feat(network): add asset style lab mockups

frontend/src/components/network/nodes/DeviceNode.tsx

@@ -1,10 +1,12 @@
 import { memo, useState, useRef, useEffect } from 'react'
 import { Position, NodeResizer, useReactFlow, type NodeProps } from '@xyflow/react'
+import { HardDrive, Network, ShieldCheck } from 'lucide-react'
 import { BaseNode, BaseNodeHeader, BaseNodeContent } from '../ui/base-node'
 import { BaseHandle } from '../ui/base-handle'
 import { NodeStatusIndicator, type NodeStatus } from '../ui/node-status-indicator'
 import { NodeTooltip, NodeTooltipTrigger, NodeTooltipContent } from '../ui/node-tooltip'
-import { getDeviceRenderConfig } from './deviceRegistry'
+import { getDeviceRenderConfig, CATEGORY_LABELS } from './deviceRegistry'
+import { cn } from '@/lib/utils'
 import type { DeviceProperties } from '@/types'
 
 export interface DeviceNodeData {
@@ -29,9 +31,48 @@ const NODE_DEFAULT = 120  // default square side in px
 const NODE_MIN = 80       // minimum square side in px
 const NODE_MAX = 280      // maximum square side in px
 
+function DeviceNodeChrome({
+  category,
+  accentClass,
+  glyph,
+}: {
+  category: string
+  accentClass: string
+  glyph: string
+}) {
+  const MetaIcon = category === 'network'
+    ? Network
+    : category === 'security'
+      ? ShieldCheck
+      : HardDrive
+
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-x-0 top-0 flex items-center justify-between px-2 py-1">
+        <span className={cn('rounded-full border px-1.5 py-0.5 text-[8px] font-semibold tracking-[0.18em]', accentClass)}>
+          {glyph}
+        </span>
+        <span className="text-[8px] font-medium uppercase tracking-[0.16em] text-muted-foreground/80">
+          {CATEGORY_LABELS[category] ?? category}
+        </span>
+      </div>
+      <div className="pointer-events-none absolute inset-x-3 top-6 h-px bg-gradient-to-r from-transparent via-border-default to-transparent" />
+      <div className="pointer-events-none absolute bottom-2 left-2 flex items-center gap-1 rounded-full border border-default bg-page/80 px-1.5 py-0.5 text-[8px] uppercase tracking-[0.14em] text-muted-foreground">
+        <MetaIcon size={9} />
+        <span>Asset</span>
+      </div>
+      <div className="pointer-events-none absolute bottom-2 right-2 flex gap-1">
+        <span className="h-1.5 w-1.5 rounded-full bg-border-default" />
+        <span className="h-1.5 w-1.5 rounded-full bg-border-default/80" />
+        <span className="h-1.5 w-1.5 rounded-full bg-border-default/60" />
+      </div>
+    </>
+  )
+}
+
 function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
   const nodeData = data as unknown as DeviceNodeData
-  const { icon: Icon, color } = getDeviceRenderConfig(nodeData.deviceType, nodeData.category)
+  const { icon: Icon, color, accentClass, surfaceClass, category, glyph } = getDeviceRenderConfig(nodeData.deviceType, nodeData.category)
   const status = (nodeData.properties?.status || 'unknown') as NodeStatus
   const ip = nodeData.properties?.ip
   const props = nodeData.properties || {}
@@ -46,6 +87,8 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
   const labelPx = Math.max(9, Math.min(20, Math.round(scale * 11)))
   // IP font: 9px at default, clamped to [8, 16]
   const ipPx = Math.max(8, Math.min(16, Math.round(scale * 9)))
+  const typePx = Math.max(8, Math.min(13, Math.round(scale * 8.5)))
+  const iconPlateSize = Math.round(Math.max(36, Math.min(92, scale * 56)))
 
   const [editing, setEditing] = useState(false)
   const [labelValue, setLabelValue] = useState(nodeData.label ?? '')
@@ -81,9 +124,23 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
       <NodeStatusIndicator status={status}>
         <NodeTooltip>
           <NodeTooltipTrigger>
-            <BaseNode className="w-full h-full group flex flex-col items-center justify-center">
-              <BaseNodeHeader className="flex-col gap-1 items-center py-2 px-2">
-                <Icon size={iconPx} style={{ color }} />
+            <BaseNode className="group h-full w-full bg-gradient-to-b from-card via-card to-page/80">
+              <div className={cn('pointer-events-none absolute inset-x-0 top-0 h-14 bg-gradient-to-b', surfaceClass)} />
+              <DeviceNodeChrome category={category} accentClass={accentClass} glyph={glyph} />
+              <BaseNodeHeader className="flex h-full flex-col items-center justify-center gap-2 px-2 pt-8 pb-3">
+                <div
+                  className={cn(
+                    'relative flex items-center justify-center rounded-2xl border shadow-inner',
+                    accentClass,
+                  )}
+                  style={{ width: iconPlateSize, height: iconPlateSize }}
+                >
+                  <div className="absolute inset-[5px] rounded-[14px] border border-white/8 bg-page/65" />
+                  <div className="absolute inset-x-2 top-2 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
+                  <div className="relative z-10">
+                    <Icon size={iconPx} style={{ color }} />
+                  </div>
+                </div>
                 {editing ? (
                   <input
                     ref={inputRef}
@@ -109,7 +166,7 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
                 ) : (
                   <span
                     style={{ fontSize: labelPx }}
-                    className="font-medium text-primary text-center leading-tight line-clamp-2 cursor-default"
+                    className="max-w-[88%] cursor-default text-center font-medium leading-tight text-primary line-clamp-2"
                     onDoubleClick={e => {
                       e.stopPropagation()
                       setEditing(true)
@@ -118,10 +175,21 @@ function DeviceNodeComponent({ id, data, selected, width, height }: NodeProps) {
                     {labelValue}
                   </span>
                 )}
+                <span
+                  style={{ fontSize: typePx }}
+                  className="rounded-full border border-default bg-page/70 px-2 py-0.5 text-[9px] uppercase tracking-[0.18em] text-muted-foreground"
+                >
+                  {nodeData.deviceType.replace(/-/g, ' ')}
+                </span>
               </BaseNodeHeader>
               {ip && (
-                <BaseNodeContent className="items-center pt-0 pb-1">
-                  <span className="font-mono text-muted-foreground" style={{ fontSize: ipPx }}>{ip}</span>
+                <BaseNodeContent className="items-center pt-0 pb-3">
+                  <span
+                    className="rounded-full border border-default bg-page/80 px-2 py-0.5 font-mono text-muted-foreground"
+                    style={{ fontSize: ipPx }}
+                  >
+                    {ip}
+                  </span>
                 </BaseNodeContent>
               )}
               <BaseHandle type="target" position={Position.Top} />

frontend/src/components/network/nodes/deviceRegistry.ts

@@ -9,6 +9,10 @@ import {
 export interface DeviceRenderConfig {
   icon: LucideIcon
   color: string
+  accentClass: string
+  surfaceClass: string
+  category: string
+  glyph: string
 }
 
 // Category-semantic color palette — each color carries meaning:
@@ -27,62 +31,109 @@ export const STORAGE_COLOR  = '#a78bfa'
 export const CLOUD_COLOR    = '#67e8f9'
 export const INFRA_COLOR    = '#94a3b8'
 
+const CATEGORY_STYLES: Record<string, Pick<DeviceRenderConfig, 'accentClass' | 'surfaceClass'>> = {
+  network: {
+    accentClass: 'border-sky-400/40 bg-sky-400/12 text-sky-300',
+    surfaceClass: 'from-sky-400/12 via-sky-400/4 to-transparent',
+  },
+  security: {
+    accentClass: 'border-rose-400/40 bg-rose-400/12 text-rose-300',
+    surfaceClass: 'from-rose-400/12 via-rose-400/4 to-transparent',
+  },
+  compute: {
+    accentClass: 'border-emerald-400/40 bg-emerald-400/12 text-emerald-300',
+    surfaceClass: 'from-emerald-400/12 via-emerald-400/4 to-transparent',
+  },
+  storage: {
+    accentClass: 'border-violet-400/40 bg-violet-400/12 text-violet-300',
+    surfaceClass: 'from-violet-400/12 via-violet-400/4 to-transparent',
+  },
+  cloud: {
+    accentClass: 'border-cyan-400/40 bg-cyan-400/12 text-cyan-300',
+    surfaceClass: 'from-cyan-400/12 via-cyan-400/4 to-transparent',
+  },
+  endpoint: {
+    accentClass: 'border-amber-400/40 bg-amber-400/12 text-amber-300',
+    surfaceClass: 'from-amber-400/12 via-amber-400/4 to-transparent',
+  },
+  infrastructure: {
+    accentClass: 'border-slate-400/40 bg-slate-300/10 text-slate-300',
+    surfaceClass: 'from-slate-300/10 via-slate-300/4 to-transparent',
+  },
+}
+
+function makeConfig(
+  icon: LucideIcon,
+  color: string,
+  category: string,
+  glyph: string,
+): DeviceRenderConfig {
+  return {
+    icon,
+    color,
+    category,
+    glyph,
+    accentClass: CATEGORY_STYLES[category]?.accentClass ?? CATEGORY_STYLES.infrastructure.accentClass,
+    surfaceClass: CATEGORY_STYLES[category]?.surfaceClass ?? CATEGORY_STYLES.infrastructure.surfaceClass,
+  }
+}
+
 const SYSTEM_DEVICE_ICONS: Record<string, DeviceRenderConfig> = {
   // Network layer
-  'router':        { icon: Router,            color: NETWORK_COLOR },
-  'switch':        { icon: Network,            color: NETWORK_COLOR },
-  'access-point':  { icon: Wifi,              color: NETWORK_COLOR },
-  'load-balancer': { icon: Gauge,             color: NETWORK_COLOR },
+  'router':        makeConfig(Router, NETWORK_COLOR, 'network', 'RTR'),
+  'switch':        makeConfig(Network, NETWORK_COLOR, 'network', 'SW'),
+  'access-point':  makeConfig(Wifi, NETWORK_COLOR, 'network', 'AP'),
+  'load-balancer': makeConfig(Gauge, NETWORK_COLOR, 'network', 'LB'),
 
   // Security
-  'firewall':      { icon: BrickWallFire,      color: SECURITY_COLOR },
-  'badge-reader':  { icon: KeyRound,          color: SECURITY_COLOR },
+  'firewall':      makeConfig(BrickWallFire, SECURITY_COLOR, 'security', 'FW'),
+  'badge-reader':  makeConfig(KeyRound, SECURITY_COLOR, 'security', 'BR'),
 
   // Compute
-  'server':        { icon: Server,            color: COMPUTE_COLOR },
-  'vm':            { icon: Boxes,             color: COMPUTE_COLOR },
-  'container':     { icon: Package,           color: COMPUTE_COLOR },
+  'server':        makeConfig(Server, COMPUTE_COLOR, 'compute', 'SRV'),
+  'vm':            makeConfig(Boxes, COMPUTE_COLOR, 'compute', 'VM'),
+  'container':     makeConfig(Package, COMPUTE_COLOR, 'compute', 'CTR'),
 
   // Storage
-  'nas':           { icon: Database,          color: STORAGE_COLOR },
-  'san':           { icon: HardDrive,         color: STORAGE_COLOR },
-  'cloud-storage': { icon: CloudCog,          color: STORAGE_COLOR },
+  'nas':           makeConfig(Database, STORAGE_COLOR, 'storage', 'NAS'),
+  'san':           makeConfig(HardDrive, STORAGE_COLOR, 'storage', 'SAN'),
+  'cloud-storage': makeConfig(CloudCog, STORAGE_COLOR, 'storage', 'CS'),
 
   // Cloud / Internet
-  'cloud':         { icon: Cloud,             color: CLOUD_COLOR },
-  'aws':           { icon: Cloud,             color: CLOUD_COLOR },
-  'azure':         { icon: Cloud,             color: CLOUD_COLOR },
-  'gcp':           { icon: Cloud,             color: CLOUD_COLOR },
-  'isp':           { icon: Globe,             color: CLOUD_COLOR },
+  'cloud':         makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'CLD'),
+  'aws':           makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'AWS'),
+  'azure':         makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'AZ'),
+  'gcp':           makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'GCP'),
+  'isp':           makeConfig(Globe, CLOUD_COLOR, 'cloud', 'WAN'),
 
   // Endpoints
-  'workstation':   { icon: Monitor,           color: ENDPOINT_COLOR },
-  'laptop':        { icon: Laptop,            color: ENDPOINT_COLOR },
-  'tablet':        { icon: Tablet,            color: ENDPOINT_COLOR },
-  'phone':         { icon: Smartphone,        color: ENDPOINT_COLOR },
-  'printer':       { icon: Printer,           color: ENDPOINT_COLOR },
+  'workstation':   makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint', 'WS'),
+  'laptop':        makeConfig(Laptop, ENDPOINT_COLOR, 'endpoint', 'LTP'),
+  'tablet':        makeConfig(Tablet, ENDPOINT_COLOR, 'endpoint', 'TAB'),
+  'phone':         makeConfig(Smartphone, ENDPOINT_COLOR, 'endpoint', 'PH'),
+  'printer':       makeConfig(Printer, ENDPOINT_COLOR, 'endpoint', 'PRN'),
 
   // Infrastructure / physical
-  'ups':           { icon: BatteryCharging,   color: INFRA_COLOR },
-  'pdu':           { icon: PlugZap,           color: INFRA_COLOR },
-  'rack':          { icon: RectangleVertical, color: INFRA_COLOR },
-  'patch-panel':   { icon: Cable,             color: INFRA_COLOR },
-  'camera':        { icon: Camera,            color: INFRA_COLOR },
-  'nvr':           { icon: Video,             color: INFRA_COLOR },
-  'iot':           { icon: Radio,             color: INFRA_COLOR },
+  'ups':           makeConfig(BatteryCharging, INFRA_COLOR, 'infrastructure', 'UPS'),
+  'pdu':           makeConfig(PlugZap, INFRA_COLOR, 'infrastructure', 'PDU'),
+  'rack':          makeConfig(RectangleVertical, INFRA_COLOR, 'infrastructure', 'RCK'),
+  'patch-panel':   makeConfig(Cable, INFRA_COLOR, 'infrastructure', 'PP'),
+  'camera':        makeConfig(Camera, INFRA_COLOR, 'infrastructure', 'CAM'),
+  'nvr':           makeConfig(Video, INFRA_COLOR, 'infrastructure', 'NVR'),
+  'iot':           makeConfig(Radio, INFRA_COLOR, 'infrastructure', 'IOT'),
 }
 
 const CATEGORY_DEFAULTS: Record<string, DeviceRenderConfig> = {
-  'network':        { icon: Router,      color: NETWORK_COLOR },
-  'compute':        { icon: Server,      color: COMPUTE_COLOR },
-  'storage':        { icon: Database,    color: STORAGE_COLOR },
-  'cloud':          { icon: Cloud,       color: CLOUD_COLOR },
-  'endpoint':       { icon: Monitor,     color: ENDPOINT_COLOR },
-  'infrastructure': { icon: PlugZap,     color: INFRA_COLOR },
-  'security':       { icon: BrickWallFire, color: SECURITY_COLOR },
+  'network':        makeConfig(Router, NETWORK_COLOR, 'network', 'NET'),
+  'compute':        makeConfig(Server, COMPUTE_COLOR, 'compute', 'CPU'),
+  'storage':        makeConfig(Database, STORAGE_COLOR, 'storage', 'DB'),
+  'cloud':          makeConfig(Cloud, CLOUD_COLOR, 'cloud', 'CLD'),
+  'endpoint':       makeConfig(Monitor, ENDPOINT_COLOR, 'endpoint', 'END'),
+  'infrastructure': makeConfig(PlugZap, INFRA_COLOR, 'infrastructure', 'INF'),
+  'security':       makeConfig(BrickWallFire, SECURITY_COLOR, 'security', 'SEC'),
 }
 
-const FALLBACK: DeviceRenderConfig = { icon: Cpu, color: INFRA_COLOR }
+const FALLBACK: DeviceRenderConfig = makeConfig(Cpu, INFRA_COLOR, 'infrastructure', 'DEV')
 
 export function getDeviceRenderConfig(slug: string, category?: string): DeviceRenderConfig {
   if (SYSTEM_DEVICE_ICONS[slug]) return SYSTEM_DEVICE_ICONS[slug]

frontend/src/components/network/ui/base-node.tsx

@@ -5,8 +5,8 @@ export function BaseNode({ className, ...props }: ComponentProps<'div'>) {
   return (
     <div
       className={cn(
-        'bg-card text-heading relative rounded-lg border border-default',
-        'transition-colors hover:border-hover',
+        'bg-card text-heading relative overflow-hidden rounded-xl border border-default',
+        'transition-colors hover:border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50',
         'in-[.selected]:border-accent',
         className,
       )}

frontend/src/pages/NetworkDiagrams/AssetStyleShowcase.tsx

@@ -0,0 +1,220 @@
+import type { ComponentType, CSSProperties } from 'react'
+import {
+  ArrowLeft,
+  Cloud,
+  Database,
+  Monitor,
+  Network,
+  Server,
+  Shield,
+  Wifi,
+} from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { cn } from '@/lib/utils'
+
+type NodeSpec = {
+  id: string
+  label: string
+  meta: string
+  x: number
+  y: number
+  accent: string
+  Icon: ComponentType<{ size?: number; className?: string; style?: CSSProperties }>
+  chip: string
+}
+
+const nodes: NodeSpec[] = [
+  { id: 'wan', label: 'ISP Edge', meta: 'wan uplink', x: 240, y: 28, accent: '#67e8f9', Icon: Cloud, chip: 'WAN' },
+  { id: 'fw', label: 'Perimeter FW', meta: 'ha pair', x: 240, y: 150, accent: '#f87171', Icon: Shield, chip: 'FW' },
+  { id: 'core', label: 'Core Switch', meta: 'stacked', x: 240, y: 278, accent: '#60a5fa', Icon: Network, chip: 'SW' },
+  { id: 'ap', label: 'Access Point', meta: 'wifi 6', x: 72, y: 406, accent: '#60a5fa', Icon: Wifi, chip: 'AP' },
+  { id: 'srv', label: 'File Server', meta: 'vm host', x: 240, y: 406, accent: '#34d399', Icon: Server, chip: 'SRV' },
+  { id: 'nas', label: 'Backup NAS', meta: 'snapshots', x: 408, y: 406, accent: '#a78bfa', Icon: Database, chip: 'NAS' },
+  { id: 'desk', label: 'User Workstation', meta: 'accounting', x: 240, y: 534, accent: '#fbbf24', Icon: Monitor, chip: 'WS' },
+]
+
+const links = [
+  ['wan', 'fw'],
+  ['fw', 'core'],
+  ['core', 'ap'],
+  ['core', 'srv'],
+  ['core', 'nas'],
+  ['core', 'desk'],
+] as const
+
+function ApplianceNode({ node }: { node: NodeSpec }) {
+  const { Icon } = node
+  return (
+    <div
+      className="absolute h-[108px] w-[136px] rounded-lg border border-default bg-card"
+      style={{ left: node.x, top: node.y }}
+    >
+      <div className="flex items-center justify-between border-b border-default px-2 py-1">
+        <span
+          className="rounded border px-1.5 py-0.5 text-[9px] font-semibold tracking-[0.22em]"
+          style={{ color: node.accent, borderColor: `${node.accent}66`, backgroundColor: `${node.accent}14` }}
+        >
+          {node.chip}
+        </span>
+        <span className="text-[9px] uppercase tracking-[0.18em] text-muted-foreground">Asset</span>
+      </div>
+      <div className="px-3 pb-2 pt-3">
+        <div
+          className="mb-3 flex h-11 items-center justify-center rounded-md border"
+          style={{ borderColor: `${node.accent}55`, backgroundColor: `${node.accent}12` }}
+        >
+          <Icon size={22} style={{ color: node.accent }} />
+        </div>
+        <div className="text-[12px] font-semibold text-heading">{node.label}</div>
+        <div className="mt-1 text-[10px] uppercase tracking-[0.14em] text-muted-foreground">{node.meta}</div>
+      </div>
+      <div className="absolute bottom-2 right-2 flex gap-1">
+        <span className="h-1.5 w-1.5 rounded-full bg-border-default" />
+        <span className="h-1.5 w-1.5 rounded-full bg-border-default/75" />
+        <span className="h-1.5 w-1.5 rounded-full bg-border-default/50" />
+      </div>
+    </div>
+  )
+}
+
+function SaaSNode({ node }: { node: NodeSpec }) {
+  const { Icon } = node
+  return (
+    <div
+      className="absolute h-[100px] w-[136px] rounded-2xl border border-default bg-card/95"
+      style={{ left: node.x, top: node.y }}
+    >
+      <div className="flex h-full flex-col items-center justify-center px-3 text-center">
+        <div
+          className="mb-3 flex h-11 w-11 items-center justify-center rounded-2xl"
+          style={{ backgroundColor: `${node.accent}18`, color: node.accent }}
+        >
+          <Icon size={20} />
+        </div>
+        <div className="text-[12px] font-semibold text-heading">{node.label}</div>
+        <div className="mt-1 text-[10px] text-muted-foreground">{node.meta}</div>
+      </div>
+    </div>
+  )
+}
+
+function DiagramWires({ variant }: { variant: 'appliance' | 'saas' }) {
+  return (
+    <svg className="absolute inset-0 h-full w-full">
+      {links.map(([from, to]) => {
+        const source = nodes.find(node => node.id === from)
+        const target = nodes.find(node => node.id === to)
+        if (!source || !target) return null
+
+        const x1 = source.x + 68
+        const y1 = source.y + (variant === 'appliance' ? 108 : 100)
+        const x2 = target.x + 68
+        const y2 = target.y
+        const midY = (y1 + y2) / 2
+
+        return (
+          <path
+            key={`${from}-${to}`}
+            d={`M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`}
+            fill="none"
+            stroke={variant === 'appliance' ? '#7d8596' : '#606779'}
+            strokeDasharray={variant === 'appliance' ? '0' : '5 4'}
+            strokeWidth={variant === 'appliance' ? '2.2' : '1.8'}
+          />
+        )
+      })}
+    </svg>
+  )
+}
+
+function DiagramPanel({
+  title,
+  subtitle,
+  description,
+  variant,
+}: {
+  title: string
+  subtitle: string
+  description: string
+  variant: 'appliance' | 'saas'
+}) {
+  return (
+    <section className="flex min-w-0 flex-1 flex-col rounded-2xl border border-default bg-card">
+      <div className="border-b border-default px-5 py-4">
+        <div className="mb-1 text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+          {subtitle}
+        </div>
+        <h2 className="font-heading text-xl font-semibold text-heading">{title}</h2>
+        <p className="mt-2 max-w-xl text-sm text-muted-foreground">{description}</p>
+      </div>
+      <div className="p-5">
+        <div
+          className={cn(
+            'relative overflow-hidden rounded-2xl border border-default',
+            variant === 'appliance' ? 'bg-[#171a21]' : 'bg-[#181b23]',
+          )}
+        >
+          <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(132,139,155,0.08)_1px,transparent_1px),linear-gradient(to_bottom,rgba(132,139,155,0.08)_1px,transparent_1px)] bg-[size:24px_24px]" />
+          <div className="absolute inset-x-0 top-0 h-20 bg-gradient-to-b from-white/[0.03] to-transparent" />
+          <div className="relative h-[660px]">
+            <DiagramWires variant={variant} />
+            {nodes.map(node =>
+              variant === 'appliance' ? (
+                <ApplianceNode key={node.id} node={node} />
+              ) : (
+                <SaaSNode key={node.id} node={node} />
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default function AssetStyleShowcasePage() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="mx-auto max-w-[1560px] px-6 py-8">
+      <div className="mb-6 flex items-start justify-between gap-4">
+        <div>
+          <button
+            onClick={() => navigate('/network-diagrams')}
+            className="mb-4 inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
+          >
+            <ArrowLeft size={14} />
+            Back to Network Maps
+          </button>
+          <div className="mb-2 text-xs font-semibold uppercase tracking-[0.22em] text-muted-foreground">
+            Asset Style Lab
+          </div>
+          <h1 className="font-heading text-3xl font-bold text-heading">Two directions for network-map assets</h1>
+          <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
+            Same topology, two visual languages. The left mock-up leans closer to infrastructure documentation.
+            The right mock-up leans toward a cleaner product experience inside the app.
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-6 xl:grid-cols-2">
+        <DiagramPanel
+          title="Visio / Network Appliance"
+          subtitle="Documentation-first"
+          description="More chassis cues, stronger device framing, technical chip labels, and more explicit infrastructure character."
+          variant="appliance"
+        />
+        <DiagramPanel
+          title="Clean Premium SaaS"
+          subtitle="Product-first"
+          description="Cleaner geometry, quieter chrome, softer connection treatment, and a more refined in-app editing feel."
+          variant="saas"
+        />
+      </div>
+
+      <div className="mt-6 rounded-2xl border border-default bg-card px-5 py-4 text-sm text-muted-foreground">
+        The fastest next step is to pick the lane that feels more “ResolutionFlow,” then I can translate that look into the actual editor nodes rather than keeping it as a mock-up.
+      </div>
+    </div>
+  )
+}

frontend/src/pages/NetworkDiagrams/index.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Plus, Search, Network, MoreHorizontal, Upload, ChevronDown } from 'lucide-react'
+import { Plus, Search, Network, MoreHorizontal, Upload, ChevronDown, Sparkles } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { networkDiagramsApi } from '@/api'
 import { toast } from '@/lib/toast'
@@ -171,6 +171,13 @@ export default function NetworkDiagramsPage() {
           <p className="mt-1 text-sm text-muted-foreground">Visual network topology documentation for your clients</p>
         </div>
         <div className="flex gap-2">
+          <button
+            onClick={() => navigate('/network-diagrams/style-lab')}
+            className="flex items-center gap-1.5 rounded border border-default px-3 py-2 text-sm text-primary hover:border-hover"
+          >
+            <Sparkles size={14} />
+            Style Lab
+          </button>
           <button
             onClick={handleImport}
             className="flex items-center gap-1.5 rounded border border-default px-3 py-2 text-sm text-primary hover:border-hover"

frontend/src/router.tsx

@@ -62,6 +62,7 @@ const GuideDetailPage = lazyWithRetry(() => import('@/pages/GuideDetailPage'))
 const AccountSettingsPage = lazyWithRetry(() => import('@/pages/AccountSettingsPage'))
 const NetworkDiagramsPage = lazyWithRetry(() => import('@/pages/NetworkDiagrams'))
 const DiagramEditorPage = lazyWithRetry(() => import('@/pages/NetworkDiagrams/DiagramEditor'))
+const AssetStyleShowcasePage = lazyWithRetry(() => import('@/pages/NetworkDiagrams/AssetStyleShowcase'))
 // Admin pages
 const AdminLayout = lazyWithRetry(() => import('@/components/admin/AdminLayout'))
 const AdminDashboardPage = lazyWithRetry(() => import('@/pages/admin/DashboardPage'))
@@ -199,6 +200,7 @@ export const router = sentryCreateBrowserRouter([
       { path: 'scripts/manage', element: page(ScriptManagePage) },
       { path: 'script-builder', element: page(ScriptBuilderPage) },
       { path: 'network-diagrams', element: page(NetworkDiagramsPage) },
+      { path: 'network-diagrams/style-lab', element: page(AssetStyleShowcasePage) },
       { path: 'network-diagrams/new', element: page(DiagramEditorPage) },
       { path: 'network-diagrams/:id', element: page(DiagramEditorPage) },
       { path: 'kb-accelerator', element: page(KBAcceleratorPage) },