feat: migrate dashboard to shadcn/ui — full component/layout/style rewrite

.gitignore

@@ -3,6 +3,8 @@ node_modules/
 .nitro/
 .tanstack/
 dist/
+Dash-shots/
+Design-lanes/
 .env
 target/
 
@@ -33,3 +35,5 @@ analysis/ghidra/revdeck/
 
 .grit
 .orchestrator/
+
+arcane/home/honeypot-dashboard/frontend-next/.claude/

arcane/home/honeypot-dashboard/frontend-next/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

arcane/home/honeypot-dashboard/frontend-next/e2e/cytoscape-theme.spec.ts

@@ -0,0 +1,136 @@
+import { expect, test, type Page } from '@playwright/test'
+import { join } from 'node:path'
+
+const cases = [
+  { palette: 'claude', mode: 'light', width: 1280, height: 800 },
+  { palette: 'claude', mode: 'dark', width: 390, height: 844 },
+  { palette: 'ocean', mode: 'light', width: 390, height: 844 },
+  { palette: 'ocean', mode: 'dark', width: 1280, height: 800 },
+] as const
+
+async function openGraph(page: Page, palette: string, mode: string) {
+  await page.addInitScript(
+    ({ palette, mode }) => {
+      localStorage.setItem('hp-palette', palette)
+      localStorage.setItem('hp-theme', mode)
+    },
+    { palette, mode },
+  )
+  await page.goto('/attackers')
+  await page.locator('table tbody tr').first().click()
+  const graph = page.getByRole('img', { name: 'Attacker entity graph around one entity node' })
+  await expect(graph).toBeVisible()
+  await expect.poll(() => graph.evaluate(host => Boolean((host as HTMLElement & { __xoreCytoscape?: unknown }).__xoreCytoscape))).toBe(true)
+}
+
+async function graphTheme(page: Page) {
+  return page.getByRole('img', { name: 'Attacker entity graph around one entity node' }).evaluate((host) => {
+    const cy = (host as HTMLElement & { __xoreCytoscape?: import('cytoscape').Core }).__xoreCytoscape
+    if (!cy) throw new Error('cytoscape seam missing')
+
+    const probe = document.createElement('span')
+    const canvas = document.createElement('canvas')
+    canvas.width = canvas.height = 1
+    const context = canvas.getContext('2d')!
+    document.documentElement.appendChild(probe)
+    const color = (value: string) => {
+      probe.style.color = value
+      context.clearRect(0, 0, 1, 1)
+      context.fillStyle = getComputedStyle(probe).color
+      context.fillRect(0, 0, 1, 1)
+      const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data
+      return alpha === 255 ? `rgb(${red}, ${green}, ${blue})` : `rgba(${red}, ${green}, ${blue}, ${alpha / 255})`
+    }
+    const channels = (value: string) => color(value).match(/[\d.]+/g)?.map(Number)
+    const token = (name: string) => color(`var(${name})`)
+    const rules = Object.fromEntries((cy.json().style as Array<{ selector: string; style: Record<string, string> }>).map(rule => [rule.selector, rule.style]))
+    const ruleColor = (selector: string, property: string) => color(String(rules[selector][property]))
+    const hub = cy.nodes('[kind = "hub"]').first()
+    const spoke = cy.nodes('[kind = "spoke"]').first()
+    const edge = cy.edges().first()
+
+    spoke.emit('mouseover')
+    edge.emit('mouseover')
+    const interaction = {
+      nodeHover: color(spoke.style('background-color')),
+      edgeHover: color(edge.style('line-color')),
+      nodeClass: spoke.hasClass('hover'),
+      edgeClass: edge.hasClass('hover'),
+    }
+    spoke.emit('mouseout')
+    edge.emit('mouseout')
+    hub.select()
+
+    const actual = {
+      nodeBackground: color(spoke.style('background-color')),
+      nodeBorder: color(spoke.style('border-color')),
+      nodeText: color(spoke.style('color')),
+      hubBackground: color(hub.style('background-color')),
+      hubBorder: color(hub.style('border-color')),
+      hubText: color(hub.style('color')),
+      edge: (edge as unknown as { pstyle(name: string): { value: number[] } }).pstyle('line-color').value,
+      selected: color(hub.style('overlay-color')),
+      overflow: ruleColor('node[kind = "overflow"]', 'border-color'),
+    }
+    const expected = {
+      nodeBackground: token('--card'),
+      nodeBorder: token('--chart-1'),
+      nodeText: token('--muted-foreground'),
+      hubBackground: token('--chart-1'),
+      hubBorder: token('--chart-2'),
+      hubText: token('--foreground'),
+      edge: channels('var(--border)'),
+      selected: token('--chart-4'),
+      overflow: token('--chart-5'),
+    }
+    const hoverColor = token('--chart-3')
+    probe.remove()
+    return {
+      actual,
+      expected,
+      interaction,
+      hoverColor,
+      counts: { nodes: cy.nodes().length, edges: cy.edges().length },
+    }
+  })
+}
+
+for (const entry of cases) {
+  test(`${entry.palette}/${entry.mode}/${entry.width} uses the exact shadcn cytoscape theme`, async ({ page }) => {
+    await page.setViewportSize({ width: entry.width, height: entry.height })
+    await openGraph(page, entry.palette, entry.mode)
+
+    const theme = await graphTheme(page)
+    expect(theme.actual).toEqual(theme.expected)
+    expect(theme.counts).toEqual({ nodes: 2, edges: 1 })
+    expect(theme.interaction).toEqual({
+      nodeHover: theme.hoverColor,
+      edgeHover: theme.hoverColor,
+      nodeClass: true,
+      edgeClass: true,
+    })
+
+    const nextMode = entry.mode === 'light' ? 'dark' : 'light'
+    await page.evaluate((mode) => {
+      localStorage.setItem('hp-theme', mode)
+      window.dispatchEvent(new StorageEvent('storage', { key: 'hp-theme', newValue: mode }))
+    }, nextMode)
+    await expect(page.locator('html')).toHaveAttribute('data-theme', nextMode)
+    const updatedTheme = await graphTheme(page)
+    expect(updatedTheme.actual).toEqual(updatedTheme.expected)
+    expect(updatedTheme.counts).toEqual(theme.counts)
+
+    if (process.env.EVIDENCE_DIR) {
+      await page.screenshot({
+        path: join(process.env.EVIDENCE_DIR, `cytoscape-${entry.palette}-${entry.mode}-${entry.width}.png`),
+        fullPage: true,
+      })
+    }
+
+    await page.getByRole('img', { name: 'Attacker entity graph around one entity node' }).evaluate((host) => {
+      const cy = (host as HTMLElement & { __xoreCytoscape?: import('cytoscape').Core }).__xoreCytoscape
+      cy?.nodes('[kind = "spoke"]').emit('tap')
+    })
+    await expect(page).toHaveURL(/\/events\?ip=203\.0\.113\.7/)
+  })
+}

arcane/home/honeypot-dashboard/frontend-next/e2e/dashboard.spec.ts

@@ -6,6 +6,7 @@ import { SESSION_COOKIE_NAME, fixtureSid } from "./fixture-session";
 // The route set is the sidebar's own registry: a new nav entry joins this
 // sweep without touching the spec, and a removed one drops out of it.
 const NAV_ROUTES = NAV_SECTIONS.flatMap((section) => section.items.map((item) => item.to));
+const PALETTE = process.env.E2E_PALETTE === "ocean" ? "ocean" : "claude";
 
 // Failure mode the matrix exists to catch (issue #60's words): a page
 // renders something broken and nothing fails. These are the two cheap
@@ -62,13 +63,13 @@ test.describe("route smoke across theme x viewport", () => {
         test(`${route} renders its shell`, async ({ browser }) => {
           const context = await browser.newContext({ viewport });
           await context.addInitScript(
-            (t) => {
+            ({ theme, palette }) => {
               try {
-                localStorage.setItem("hp-theme", t);
-                localStorage.setItem("hp-palette", "claude");
+                localStorage.setItem("hp-theme", theme);
+                localStorage.setItem("hp-palette", palette);
               } catch {}
             },
-            theme,
+            { theme, palette: PALETTE },
           );
           const page = await context.newPage();
 
@@ -105,7 +106,7 @@ test.describe("reports studio content (#2507)", () => {
     await page.goto("/reports");
     // Design step: the wizard's template gallery lists the fixture catalog
     // instead of "No report templates are available.".
-    await expect(page.locator(".hp-rp-template", { hasText: "Executive report" })).toBeVisible();
+    await expect(page.getByRole("group", { name: "Report template" }).getByText("Executive report")).toBeVisible();
     await expect(page.getByText("No report templates are available.")).toHaveCount(0);
 
     // Library step: saved definition with its schedule, plus the generated
@@ -122,7 +123,7 @@ test.describe("modal core", () => {
   test("command palette opens, filters, and Escape closes", async ({ page }) => {
     await page.goto("/");
     await page.click('button[aria-label="Search and investigate"]');
-    const dialog = page.locator('[role="dialog"][aria-label="Investigate an indicator"]');
+    const dialog = page.getByRole('dialog', { name: 'Investigate an indicator' });
     await expect(dialog).toBeVisible();
     // The palette's filter field is a textarea (multi-line query support).
     await dialog.locator("textarea").fill("203.0.113.7");
@@ -185,7 +186,7 @@ test.describe("role-aware action visibility", () => {
 // and exposes no view-state API a test could read instead.
 test.describe("topology sankey roam (#2130)", () => {
   const SETTLE = 1_500; // layout animation + the labelLayout reflow pass
-  const zoomPct = (page: Page) => page.locator(".chip[aria-live]").innerText();
+  const zoomPct = (page: Page) => page.getByText(/^[0-9]+%$/).innerText();
   const canvasShot = (page: Page) => page.locator("canvas").first().screenshot();
 
   // zrender marks elements it considers draggable by putting move/grab on
@@ -292,7 +293,7 @@ test.describe("topology sankey roam (#2130)", () => {
     await page.goto("/kill-chain");
     await page.getByRole("heading", { level: 1 }).waitFor();
     await page.waitForTimeout(SETTLE);
-    expect(await page.locator(".chip[aria-live]").count()).toBe(0);
+    expect(await page.getByText(/^[0-9]+%$/).count()).toBe(0);
     expect(await page.getByText("scroll to zoom").count()).toBe(0);
   });
 });

arcane/home/honeypot-dashboard/frontend-next/e2e/echarts-theme.spec.ts

@@ -0,0 +1,84 @@
+import { expect, test, type Page } from '@playwright/test'
+
+const palettes = ['claude', 'ocean', 'neon'] as const
+const modes = ['light', 'dark'] as const
+const viewports = [
+  { name: 'desktop', width: 1280, height: 800 },
+  { name: 'mobile', width: 390, height: 844 },
+] as const
+
+async function openChart(page: Page, palette: string, mode: string) {
+  await page.addInitScript(
+    ({ palette, mode }) => {
+      localStorage.setItem('hp-palette', palette)
+      localStorage.setItem('hp-theme', mode)
+    },
+    { palette, mode },
+  )
+  await page.goto('/topology')
+  await expect(page.locator('html')).toHaveAttribute('data-hp-theme', palette)
+  await expect(page.locator('html')).toHaveAttribute('data-theme', mode)
+  await expect(page.locator('canvas').first()).toBeVisible({ timeout: 20_000 })
+  await expect(page.getByText('scroll to zoom')).toBeVisible()
+}
+
+async function chartColors(page: Page) {
+  return page.evaluate(() => {
+    const host = document.querySelector('[_echarts_instance_]') as
+      | (HTMLElement & { __xoreChart?: { getOption: () => { color?: string[] } } })
+      | null
+    if (!host?.__xoreChart) throw new Error('chart seam missing')
+    return host.__xoreChart.getOption().color
+  })
+}
+
+async function shadcnChartColors(page: Page) {
+  return page.evaluate(() => {
+    const probe = document.createElement('span')
+    document.documentElement.appendChild(probe)
+    const colors = [1, 2, 3, 4, 5].map((index) => {
+      probe.style.color = `var(--chart-${index})`
+      return getComputedStyle(probe).color
+    })
+    probe.remove()
+    return colors
+  })
+}
+
+for (const viewport of viewports) {
+  for (const mode of modes) {
+    for (const palette of palettes) {
+      test(`${palette}/${mode}/${viewport.name} renders from shadcn chart tokens`, async ({ page }) => {
+        await page.setViewportSize(viewport)
+        await openChart(page, palette, mode)
+        const colors = await chartColors(page)
+        expect(colors).toEqual(await shadcnChartColors(page))
+        expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true)
+        if (process.env.ECHART_EVIDENCE_DIR) {
+          await page.waitForTimeout(1_500)
+          await page.screenshot({ path: `${process.env.ECHART_EVIDENCE_DIR}/${palette}-${mode}-${viewport.name}.png`, fullPage: true })
+        }
+      })
+    }
+  }
+}
+
+test('mode switch re-registers the theme and preserves resize and zoom', async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 800 })
+  await openChart(page, 'claude', 'dark')
+  const before = await chartColors(page)
+
+  await page.evaluate(() => {
+    localStorage.setItem('hp-theme', 'light')
+    window.dispatchEvent(new StorageEvent('storage', { key: 'hp-theme', newValue: 'light' }))
+  })
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'light')
+  await expect.poll(() => chartColors(page)).not.toEqual(before)
+
+  const initialWidth = await page.locator('canvas').first().evaluate((canvas) => (canvas as HTMLCanvasElement).width)
+  await page.setViewportSize({ width: 390, height: 844 })
+  await expect.poll(() => page.locator('canvas').first().evaluate((canvas) => (canvas as HTMLCanvasElement).width)).not.toBe(initialWidth)
+
+  await page.getByRole('button', { name: 'Zoom in' }).click()
+  await expect(page.getByText('120%', { exact: true })).toBeVisible()
+})

arcane/home/honeypot-dashboard/frontend-next/e2e/event-visual.spec.ts

@@ -0,0 +1,34 @@
+import { expect, test } from '@playwright/test'
+import { join } from 'node:path'
+const palette = process.env.E2E_PALETTE === 'ocean' ? 'ocean' : 'claude'
+
+for (const width of [1280, 390]) for (const mode of ['light', 'dark']) {
+  test(`event detail ${width} ${mode} loads without console errors`, async ({ page }, testInfo) => {
+    const errors: string[] = []
+    page.on('console', message => { if (message.type() === 'error') errors.push(message.text()) })
+    page.on('pageerror', error => errors.push(error.message))
+    await page.setViewportSize({ width, height: 844 })
+    await page.addInitScript(({ mode, palette }) => {
+      localStorage.setItem('hp-palette', palette)
+      localStorage.setItem('hp-theme', mode)
+    }, { mode, palette })
+    await page.goto('/event/e2e-event-0')
+    await expect(page.getByRole('heading', { name: 'citrix-honeypot event' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'The complete record' })).toBeVisible()
+    await expect(page.getByText('cve_2019_19781_payload', { exact: true })).toBeVisible()
+    const shot = process.env.EVIDENCE_DIR
+      ? join(process.env.EVIDENCE_DIR, 'shots', `event-${width}-${mode}.png`)
+      : testInfo.outputPath(`event-${width}-${mode}.png`)
+    await page.screenshot({ path: shot, fullPage: true })
+    expect(errors).toEqual([])
+  })
+}
+
+test('missing event renders the not-found state', async ({ page }, testInfo) => {
+  await page.goto('/event/missing-e2e-event')
+  await expect(page.getByText('Event not found')).toBeVisible()
+  const shot = process.env.EVIDENCE_DIR
+    ? join(process.env.EVIDENCE_DIR, 'shots', 'event-missing.png')
+    : testInfo.outputPath('event-missing.png')
+  await page.screenshot({ path: shot, fullPage: true })
+})