chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(network-maps): address design critique — harden, normalize, clarify, polish

Browse Source 
- Archive: two-step inline confirm in card dropdown menu
- Delete Device/Edge: two-step inline confirm in PropertiesPanel footer
- Context menu Delete: floating confirm bar instead of immediate deletion
- AI Generate New: two-step confirm when replacing existing diagram nodes
- DiagramHeader: show 'Unsaved changes' in amber when isDirty and not saving
- deviceRegistry: SECURITY_COLOR #f97316 → #f87171 (deprecated ember orange removed)
- CanvasEmptyPrompt: remove backdrop-blur (design system violation)
- CanvasEmptyPrompt: remove redundant 'Skip AI' bottom button (duplicate of Build manually card)
- CanvasEmptyPrompt: rounded-xl/rounded-2xl → rounded-lg, border-2 → border
- Topology bar: h-1 → h-2 + native tooltip with category breakdown
- AIAssistPanel: replace pulse-dot loading with spinner (consistent with rest of feature)
- ContextMenu: add shadow-lg (consistent with other dropdowns)
- DeviceNode tooltip: Position.Bottom → Position.Top (avoids canvas-edge clipping)
- CanvasEmptyPrompt: raise ⌘↵ hint from /50 opacity to full text-muted-foreground

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-04-12 22:42:31 +00:00
parent 327a5c7c14
commit 2a6178e246
9 changed files with 189 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/network/CanvasEmptyPrompt.tsx
View File

@@ -63,7 +63,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
if (mode === 'manual') {
return (
<div className="pointer-events-none absolute inset-x-0 bottom-6 z-10 flex justify-center px-6">
<div className="pointer-events-auto flex max-w-xl items-center gap-3 rounded-2xl border border-default bg-card/95 px-4 py-3 shadow-xl backdrop-blur">
<div className="pointer-events-auto flex max-w-xl items-center gap-3 rounded-lg border border-default bg-card px-4 py-3 shadow-xl">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent/10 text-accent">
<PencilRuler size={14} />
</div>
@@ -94,7 +94,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
}
}}
>
<div className="pointer-events-auto relative w-full max-w-lg rounded-xl border border-default bg-card p-8 shadow-2xl">
<div className="pointer-events-auto relative w-full max-w-lg rounded-lg border border-default bg-card p-8 shadow-2xl">
<button
onClick={switchToManual}
disabled={loading}
@@ -123,7 +123,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
<div className="grid gap-3 sm:grid-cols-2">
<button
onClick={() => setMode('ai')}
className="rounded-xl border border-accent/40 bg-accent/10 p-4 text-left transition-colors hover:border-accent hover:bg-accent/15"
className="rounded-lg border border-accent/40 bg-accent/10 p-4 text-left transition-colors hover:border-accent hover:bg-accent/15"
>
<div className="mb-3 inline-flex rounded-lg bg-accent/15 p-2 text-accent">
<Sparkles size={16} />
@@ -136,7 +136,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
<button
onClick={switchToManual}
className="rounded-xl border-2 border-primary/20 bg-elevated/40 p-4 text-left transition-colors hover:border-accent hover:bg-elevated/60"
className="rounded-lg border border-default bg-elevated/40 p-4 text-left transition-colors hover:border-accent hover:bg-elevated/60"
>
<div className="mb-3 inline-flex rounded-lg bg-primary/10 p-2 text-primary">
<PencilRuler size={16} />
@@ -148,13 +148,6 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
</button>
</div>
<button
onClick={switchToManual}
className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg border border-default px-4 py-3 text-sm font-medium text-primary hover:border-accent hover:text-accent"
>
<PencilRuler size={14} />
Skip AI and start dragging devices
</button>
</>
) : (
<>
@@ -186,7 +179,7 @@ export function CanvasEmptyPrompt({ onGenerate }: CanvasEmptyPromptProps) {
autoFocus
className="w-full resize-none rounded-lg border border-default bg-input px-4 py-3 pb-7 text-sm text-primary placeholder:text-muted-foreground focus:border-accent focus:outline-none disabled:opacity-50"
/>
<span className="pointer-events-none absolute bottom-2 right-3 text-[10px] text-muted-foreground/50">
<span className="pointer-events-none absolute bottom-2 right-3 text-[10px] text-muted-foreground">
⌘↵ to generate
</span>
</div>

2
frontend/src/components/network/ContextMenu.tsx
View File

@@ -55,7 +55,7 @@ export function ContextMenu({ position, actions, onClose }: ContextMenuProps) {
return (
<div
ref={menuRef}
className="fixed z-50 w-48 rounded-lg border border-default bg-card py-1"
className="fixed z-50 w-48 rounded-lg border border-default bg-card py-1 shadow-lg"
style={{ left: clampedPosition.x, top: clampedPosition.y }}
>
{actions.map((action) => (

8
frontend/src/components/network/DiagramHeader.tsx
View File

@@ -5,6 +5,7 @@ import { ChevronLeft, Save, Download, FileJson, Image, FileText } from 'lucide-r
interface DiagramHeaderProps {
name: string
clientName: string | null
isDirty: boolean
isSaving: boolean
lastSavedAt: Date | null
diagramId: string | null
@@ -18,6 +19,7 @@ interface DiagramHeaderProps {
export function DiagramHeader({
name,
clientName,
isDirty,
isSaving,
lastSavedAt,
diagramId,
@@ -111,9 +113,11 @@ export function DiagramHeader({
<div className="flex-1" />
{lastSavedAt && (
{isDirty && !isSaving ? (
<span className="text-[10px] text-amber-400">Unsaved changes</span>
) : lastSavedAt ? (
<span className="text-[10px] text-muted-foreground">{formatLastSaved()}</span>
)}
) : null}
<button
onClick={onSave}

2
frontend/src/components/network/nodes/DeviceNode.tsx
View File

@@ -57,7 +57,7 @@ function DeviceNodeComponent({ data }: NodeProps) {
</BaseNode>
</NodeTooltipTrigger>
{hasTooltipContent && (
<NodeTooltipContent position={Position.Bottom}>
<NodeTooltipContent position={Position.Top}>
<div className="flex flex-col gap-1 min-w-[140px]">
<TooltipRow label="Host" value={props.hostname} />
<TooltipRow label="IP" value={props.ip} />

2
frontend/src/components/network/nodes/deviceRegistry.ts
View File

@@ -20,7 +20,7 @@ export interface DeviceRenderConfig {
// Cloud (cyan) — external/internet-connected
// Infra (steel) — physical/passive hardware
export const NETWORK_COLOR = '#60a5fa'
export const SECURITY_COLOR = '#f97316'
export const SECURITY_COLOR = '#f87171'
export const COMPUTE_COLOR = '#34d399'
export const ENDPOINT_COLOR = '#fbbf24'
export const STORAGE_COLOR = '#a78bfa'

49
frontend/src/components/network/panels/AIAssistPanel.tsx
View File

@@ -16,11 +16,13 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
const [mode, setMode] = useState<'replace' | 'merge'>('replace')
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [replaceConfirm, setReplaceConfirm] = useState(false)
const handleGenerate = useCallback(async () => {
if (!description.trim()) return
setLoading(true)
setError(null)
setReplaceConfirm(false)
try {
const result = await networkDiagramsApi.aiGenerate({
description: description.trim(),
@@ -38,6 +40,14 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
}
}, [description, mode, onGenerate, getExistingBounds])
// Reset confirm state when mode changes or panel collapses
const handleModeChange = (newMode: 'replace' | 'merge') => {
setMode(newMode)
setReplaceConfirm(false)
}
const needsReplaceConfirm = mode === 'replace' && hasNodes
if (!expanded) {
return (
<div className="border-t border-default bg-card">
@@ -60,7 +70,10 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
<Sparkles size={14} />
AI Generate
</div>
<button onClick={() => setExpanded(false)} className="text-muted-foreground hover:text-primary">
<button
onClick={() => { setExpanded(false); setReplaceConfirm(false) }}
className="text-muted-foreground hover:text-primary"
>
<ChevronDown size={14} />
</button>
</div>
@@ -68,7 +81,7 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
<div className="flex flex-col gap-3 p-4">
<div className="flex gap-2">
<button
onClick={() => setMode('replace')}
onClick={() => handleModeChange('replace')}
className={cn(
'rounded px-3 py-1 text-xs font-medium transition-colors',
mode === 'replace'
@@ -79,7 +92,7 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
Generate New
</button>
<button
onClick={() => setMode('merge')}
onClick={() => handleModeChange('merge')}
className={cn(
'rounded px-3 py-1 text-xs font-medium transition-colors',
mode === 'merge'
@@ -91,7 +104,7 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
</button>
</div>
{mode === 'replace' && hasNodes && (
{needsReplaceConfirm && (
<div className="flex items-start gap-2 rounded border border-yellow-500/30 bg-yellow-500/5 px-3 py-2">
<AlertTriangle size={14} className="mt-0.5 shrink-0 text-yellow-400" />
<p className="text-[11px] text-yellow-400">
@@ -113,8 +126,32 @@ export function AIAssistPanel({ onGenerate, getExistingBounds, hasNodes }: AIAss
{loading ? (
<div className="flex items-center justify-center gap-2 py-2">
<div className="h-2 w-2 animate-pulse rounded-full bg-accent" />
<span className="text-xs text-muted-foreground">Generating your network diagram...</span>
<div className="h-4 w-4 animate-spin rounded-full border-2 border-accent border-t-transparent" />
<span className="text-xs text-muted-foreground">Generating your network diagram…</span>
</div>
) : needsReplaceConfirm && !replaceConfirm ? (
<button
onClick={() => setReplaceConfirm(true)}
disabled={!description.trim()}
className="rounded border border-yellow-500/40 bg-yellow-500/10 px-4 py-2 text-xs font-medium text-yellow-400 hover:bg-yellow-500/20 disabled:opacity-50"
>
Replace Diagram…
</button>
) : needsReplaceConfirm && replaceConfirm ? (
<div className="flex gap-2">
<button
onClick={() => setReplaceConfirm(false)}
className="flex-1 rounded border border-default px-3 py-2 text-xs text-primary hover:bg-elevated"
>
Cancel
</button>
<button
onClick={handleGenerate}
disabled={!description.trim()}
className="flex-1 rounded bg-red-500/20 px-3 py-2 text-xs font-medium text-red-400 hover:bg-red-500/30 disabled:opacity-50"
>
Yes, Replace
</button>
</div>
) : (
<button

75
frontend/src/components/network/panels/PropertiesPanel.tsx
View File

@@ -1,4 +1,4 @@
import { useCallback } from 'react'
import { useCallback, useState, useEffect } from 'react'
import { Trash2, Minus, Spline, GitBranch } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { DeviceProperties, DiagramEdge } from '@/types'
@@ -75,6 +75,11 @@ export function PropertiesPanel({
onDeleteNode,
onDeleteEdge,
}: PropertiesPanelProps) {
const [deleteConfirm, setDeleteConfirm] = useState(false)
// Reset confirm state whenever the selection changes
useEffect(() => { setDeleteConfirm(false) }, [selectedNode?.id, selectedEdge?.id])
const handlePropertyChange = useCallback((field: keyof DeviceProperties, value: string) => {
if (!selectedNode) return
const nodeData = selectedNode.data as unknown as DeviceNodeData
@@ -213,13 +218,33 @@ export function PropertiesPanel({
</div>
</div>
<div className="border-t border-default p-3">
<button
onClick={() => onDeleteEdge(selectedEdge.id)}
className="flex w-full items-center justify-center gap-1.5 rounded border border-red-500/30 px-2 py-1.5 text-xs text-red-400 hover:bg-red-500/10"
>
<Trash2 size={12} />
Delete Connection
</button>
{deleteConfirm ? (
<div className="flex flex-col gap-1.5">
<p className="text-center text-[10px] text-muted-foreground">Delete this connection?</p>
<div className="flex gap-1.5">
<button
onClick={() => setDeleteConfirm(false)}
className="flex-1 rounded border border-default px-2 py-1.5 text-xs text-primary hover:bg-elevated"
>
Cancel
</button>
<button
onClick={() => onDeleteEdge(selectedEdge.id)}
className="flex-1 rounded bg-red-500/20 px-2 py-1.5 text-xs font-medium text-red-400 hover:bg-red-500/30"
>
Delete
</button>
</div>
</div>
) : (
<button
onClick={() => setDeleteConfirm(true)}
className="flex w-full items-center justify-center gap-1.5 rounded border border-red-500/30 px-2 py-1.5 text-xs text-red-400 hover:bg-red-500/10"
>
<Trash2 size={12} />
Delete Connection
</button>
)}
</div>
</div>
)
@@ -326,13 +351,33 @@ export function PropertiesPanel({
</div>
<div className="border-t border-default p-3">
<button
onClick={() => onDeleteNode(selectedNode!.id)}
className="flex w-full items-center justify-center gap-1.5 rounded border border-red-500/30 px-2 py-1.5 text-xs text-red-400 hover:bg-red-500/10"
>
<Trash2 size={12} />
Delete Device
</button>
{deleteConfirm ? (
<div className="flex flex-col gap-1.5">
<p className="text-center text-[10px] text-muted-foreground">Delete this device?</p>
<div className="flex gap-1.5">
<button
onClick={() => setDeleteConfirm(false)}
className="flex-1 rounded border border-default px-2 py-1.5 text-xs text-primary hover:bg-elevated"
>
Cancel
</button>
<button
onClick={() => onDeleteNode(selectedNode!.id)}
className="flex-1 rounded bg-red-500/20 px-2 py-1.5 text-xs font-medium text-red-400 hover:bg-red-500/30"
>
Delete
</button>
</div>
</div>
) : (
<button
onClick={() => setDeleteConfirm(true)}
className="flex w-full items-center justify-center gap-1.5 rounded border border-red-500/30 px-2 py-1.5 text-xs text-red-400 hover:bg-red-500/10"
>
<Trash2 size={12} />
Delete Device
</button>
)}
</div>
</div>
)

28
frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx
View File

@@ -65,6 +65,7 @@ function DiagramEditorInner() {
const canvasRef = useRef<HTMLDivElement | null>(null)
const [contextMenu, setContextMenu] = useState<ContextMenuState>(null)
const [pendingDeleteNodeId, setPendingDeleteNodeId] = useState<string | null>(null)
useEffect(() => { isDirtyRef.current = isDirty }, [isDirty])
useEffect(() => { diagramIdRef.current = diagramId }, [diagramId])
@@ -525,6 +526,7 @@ function DiagramEditorInner() {
<DiagramHeader
name={name}
clientName={clientName}
isDirty={isDirty}
isSaving={isSaving}
lastSavedAt={lastSavedAt}
diagramId={diagramId}
@@ -584,7 +586,12 @@ function DiagramEditorInner() {
? getNodeMenuActions({
onCopy: copyNodes,
onDuplicate: duplicateNodes,
onDelete: deleteSelected,
onDelete: () => {
const nodeId = contextMenu.nodeId
setContextMenu(null)
if (nodeId) setPendingDeleteNodeId(nodeId)
else deleteSelected()
},
})
: getCanvasMenuActions({
onPaste: pasteNodes,
@@ -596,6 +603,25 @@ function DiagramEditorInner() {
onClose={closeContextMenu}
/>
)}
{pendingDeleteNodeId && (
<div className="pointer-events-none absolute inset-x-0 bottom-4 z-50 flex justify-center">
<div className="pointer-events-auto flex items-center gap-3 rounded-lg border border-default bg-card px-4 py-2.5 shadow-lg">
<span className="text-xs text-muted-foreground">Delete this device?</span>
<button
onClick={() => setPendingDeleteNodeId(null)}
className="rounded border border-default px-3 py-1 text-xs text-primary hover:bg-elevated"
>
Cancel
</button>
<button
onClick={() => { handleDeleteNode(pendingDeleteNodeId); setPendingDeleteNodeId(null) }}
className="rounded bg-red-500/20 px-3 py-1 text-xs font-medium text-red-400 hover:bg-red-500/30"
>
Delete
</button>
</div>
</div>
)}
</div>
)
}

66
frontend/src/pages/NetworkDiagrams/index.tsx
View File

@@ -12,12 +12,12 @@ const OTHER_COLOR = '#4f5666'
function TopologyBar({ categoryCounts, nodeCount }: { categoryCounts: Record<string, number>; nodeCount: number }) {
if (nodeCount === 0) return null
const sorted = Object.entries(categoryCounts).sort(([, a], [, b]) => b - a)
const tooltipLabel = sorted.map(([cat, count]) => `${count} ${cat}`).join(' · ')
return (
<div className="flex h-1 w-full overflow-hidden rounded-full">
<div className="group/bar relative flex h-2 w-full overflow-hidden rounded-full" title={tooltipLabel}>
{sorted.map(([cat, count]) => (
<div
key={cat}
title={`${cat}: ${count}`}
style={{
width: `${(count / nodeCount) * 100}%`,
backgroundColor: CATEGORY_COLORS[cat] ?? OTHER_COLOR,
@@ -38,6 +38,7 @@ export default function NetworkDiagramsPage() {
const [clientDropdownOpen, setClientDropdownOpen] = useState(false)
const [clientSearch, setClientSearch] = useState('')
const [menuOpenId, setMenuOpenId] = useState<string | null>(null)
const [confirmArchiveId, setConfirmArchiveId] = useState<string | null>(null)
const clientDropdownRef = useRef<HTMLDivElement>(null)
useEffect(() => {
@@ -101,6 +102,7 @@ export default function NetworkDiagramsPage() {
toast.error('Failed to archive')
}
setMenuOpenId(null)
setConfirmArchiveId(null)
}, [loadDiagrams])
const handleImport = useCallback(async () => {
@@ -269,25 +271,47 @@ export default function NetworkDiagramsPage() {
</div>
{menuOpenId === d.id && (
<div className="absolute right-2 top-10 z-50 w-36 rounded border border-default bg-card py-1 shadow-lg">
<button
onClick={e => { e.stopPropagation(); navigate(`/network-diagrams/${d.id}`) }}
className="w-full px-3 py-1.5 text-left text-xs text-primary hover:bg-elevated"
>
Open
</button>
<button
onClick={e => { e.stopPropagation(); handleDuplicate(d.id) }}
className="w-full px-3 py-1.5 text-left text-xs text-primary hover:bg-elevated"
>
Duplicate
</button>
<button
onClick={e => { e.stopPropagation(); handleArchive(d.id) }}
className="w-full px-3 py-1.5 text-left text-xs text-red-400 hover:bg-elevated"
>
Archive
</button>
<div className="absolute right-2 top-10 z-50 w-44 rounded border border-default bg-card py-1 shadow-lg">
{confirmArchiveId === d.id ? (
<>
<p className="px-3 py-1.5 text-[10px] text-muted-foreground">Archive this diagram?</p>
<div className="flex gap-1 px-2 pb-1.5">
<button
onClick={e => { e.stopPropagation(); setConfirmArchiveId(null) }}
className="flex-1 rounded border border-default px-2 py-1 text-[10px] text-primary hover:bg-elevated"
>
Cancel
</button>
<button
onClick={e => { e.stopPropagation(); handleArchive(d.id) }}
className="flex-1 rounded bg-red-500/20 px-2 py-1 text-[10px] font-medium text-red-400 hover:bg-red-500/30"
>
Archive
</button>
</div>
</>
) : (
<>
<button
onClick={e => { e.stopPropagation(); navigate(`/network-diagrams/${d.id}`) }}
className="w-full px-3 py-1.5 text-left text-xs text-primary hover:bg-elevated"
>
Open
</button>
<button
onClick={e => { e.stopPropagation(); handleDuplicate(d.id) }}
className="w-full px-3 py-1.5 text-left text-xs text-primary hover:bg-elevated"
>
Duplicate
</button>
<button
onClick={e => { e.stopPropagation(); setConfirmArchiveId(d.id) }}
className="w-full px-3 py-1.5 text-left text-xs text-red-400 hover:bg-elevated"
>
Archive…
</button>
</>
)}
</div>
)}
</div>