Skip to content

COMPLETE dashboard rewrite: live page-by-page shadcn visual fidelity and component coverage tracker #3218

Description

@Xore

Current event-detail checkpoint

User accepted e79cfa6 failure/missing screenshots ("fine, continue"). Shared-header follow-up pushed: 79af399 on design/shadcn-migration. InvestigateHeader now uses the existing migrated header typography pattern, semantic colors, full-width layout and wrapping sibling chip/action slot rather than overview-header's unused second grid column. Props, h1, escaping and caller-owned actions unchanged; no new abstraction/dependency or global stylesheet changes.

Proof: 192 unit tests / 24 files; typecheck/build passed; production-build Playwright 76/76 including nine palettes in both modes. Four header-before and four header-after captures; event links, headings and raw record identical; no page/console errors. Mobile DOM: viewport 390, document scrollWidth 375, header width/scrollWidth both 347 (no header overflow). Evidence: /home/xore/desktop/event-id-migration/header-*. Visual review of this follow-up awaits user; automated greens are not independent acceptance.

Typeset assessment: official typography URL redirects to /docs/typeset; CLI typography entry is absent. Typeset is for prose/rendered HTML, not a blanket wrapper over interactive Card/Table controls. Shared header reuses already-migrated Alerts typography. Long-form prose typeset integration and independent final route review remain open; no claim of completed Typeset migration. No merge/deploy.

Contract: COMPLETE dashboard rewrite, not component swaps

Rewrite EVERY dashboard page and shared surface to match the applicable official shadcn examples at https://ui.shadcn.com/docs/components: composition, layout, theme, spacing, typography hierarchy, sizing, borders/radii, styling, states, keyboard interaction and overall feel. Reading a catalogue index or replacing Button/Input imports is not this deliverable.

This is the live coverage and progress tracker requested by the user. #3201 remains the parent epic; #3202#3211 remain execution issues. This tracker owns the exhaustive acceptance ledger, not a competing implementation plan. Local notes/chat are supporting evidence only.

Preserve existing functionality, APIARY typography/density and nine palettes, authentication/authorization, URL state, data loading, virtualization and accessibility. Consolidate shared tokens through Xore/theme. Retain specialist chart/map/terminal/VNC engines where necessary, but rewrite their surrounding controls and surfaces. Do not invent irrelevant features just to consume a component; document justified N/A.

Update protocol — mandatory on every work chunk

Before work: name the execution issue, exact routes/surfaces and current baseline. After each chunk, failure, takeover, review, commit or PR: update that execution issue AND this tracker with changed scope, verified evidence, remaining gaps, blockers and the next concrete step. Keep the Current truth section current; do not bury status only in comments. A stopped process is not a completed task. Reconcile notification IDs with their attempt before taking action.

Use statuses: TODO → implementing → functionally verified → visually reviewed → accepted. A checklist is checked only at accepted, or documented/reviewed N/A. Each accepted entry requires reference/example URLs, implementation PR/commit, behavior/accessibility evidence, desktop/mobile × light/dark captures, visual comparison verdict and palette verification. Tests and PNG existence alone cannot establish visual fidelity.

Execution backlog

Page/source coverage

Inventory below is generated from tracked route TSX source at 96ca00cb; includes the root shell and developer gallery, not just navigable pages. Server-only API/auth handlers are behavior-regression scope, not visual pages. Reconcile future additions and nested states; this count must not become a frozen scope cap.

47 tracked route/shell TSX files, 0 accepted in this ledger. Each row still needs explicit reference mapping, execution issue and acceptance evidence.

  • __root.tsx — TODO
  • agent-campaigns.tsx — TODO
  • alerts.tsx — whole-page rewrite committed 43089ef on design/shadcn-migration; automated gates green; SHIP scoped code review; direct acceptance evidence recorded (loading/mobile/focus, official Table measured as reference); user visual acceptance passed for current appearance; final catalogue/reference gates and shadcn Phase 4: end-of-ride design decisions (user picks fresh) #3209 remain — shadcn Phase 3-B2: list/table routes → shadcn #3206
  • attackers.tsx — TODO
  • auth-events.tsx — TODO
  • campaigns.tsx — TODO
  • canarytokens.tsx — TODO
  • cape.$sha.tsx — TODO
  • cape.index.tsx — TODO
  • clusters.tsx — TODO
  • commands.tsx — TODO
  • credentials.tsx — TODO
  • dead-letters.tsx — TODO
  • dev.gallery.tsx — TODO
  • event.$id.tsx — partial implementation through 79af399; cards and error/missing screenshots user-accepted; shared-header visual gate and independent review pending — shadcn Phase 3-B3: detail/form routes → shadcn #3207
  • events.tsx — TODO
  • ghidra.$sha.tsx — TODO
  • github-analysis.$sha.tsx — TODO
  • github-analysis.index.tsx — TODO
  • history.tsx — TODO
  • index.tsx — TODO
  • investigate.cidr.$cidr.tsx — TODO
  • investigate.cluster.tsx — TODO
  • investigate.ip.$ip.tsx — partial reference slice; visual acceptance pending
  • investigate.lookup.tsx — TODO
  • ips.tsx — TODO
  • kill-chain.tsx — TODO
  • llm-analysis.tsx — TODO
  • ml-anomalies.tsx — TODO
  • payload-analysis.$hash.tsx — TODO
  • payload-workbench.results.tsx — TODO
  • payloads.tsx — TODO
  • problem-reports.tsx — TODO
  • recordings.tsx — TODO
  • reports.tsx — TODO
  • revdeck.$sha.tsx — TODO
  • revdeck.index.tsx — TODO
  • sandbox.$job.tsx — TODO
  • sandbox.vnc.tsx — TODO
  • search.tsx — TODO
  • sensors.$sensor.tsx — TODO
  • sensors.index.tsx — TODO
  • sessions.$id.tsx — TODO
  • settings.tsx — partial reference slice; visual acceptance pending
  • source-health.tsx — TODO
  • topology.tsx — TODO
  • tty-replay.$shasum.tsx — TODO

Shared surface coverage

Official component-page ledger

Catalogue snapshot from the live official index: 64 distinct Base component pages. Links are inventory, NOT claims of having read or matched the examples. Record examples/variants inspected and the matching installed primitive family; the app currently uses Radix-based primitives, so this index snapshot does not authorize a silent primitive-family migration. Reconcile other official family-specific examples during review.

  • Accordion — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Alert — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Alert Dialog — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Aspect Ratio — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Attachment — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Avatar — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Badge — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Breadcrumb — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Bubble — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Button — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Button Group — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Calendar — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Card — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Carousel — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Chart — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Checkbox — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Collapsible — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Combobox — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Command — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Context Menu — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Data Table — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Date Picker — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Dialog — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Direction — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Drawer — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Dropdown Menu — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Empty — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Field — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Hover Card — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Input — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Input Group — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Input OTP — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Item — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Kbd — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Label — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Marker — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Menubar — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Message — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Message Scroller — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Native Select — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Navigation Menu — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Pagination — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Popover — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Progress — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Questionnaire — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Radio Group — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Resizable — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Scroll Area — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Select — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Separator — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Sheet — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Sidebar — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Skeleton — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Slider — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Spinner — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Switch — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Table — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Tabs — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Textarea — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Toast — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Toggle — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Toggle Group — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Tooltip — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A
  • Typography — TODO: examples reviewed, consumers mapped, implementation/evidence or justified N/A

Final acceptance

  • Every page/shared surface and component row resolved with evidence; no silent exclusions.
  • Actual visual comparison against referenced shadcn examples, not import-count acceptance.
  • Build/typecheck/unit/browser gates, behavior and accessibility checks pass on the final reviewed revision.
  • No tests overwrite tracked screenshot baselines; protected files preserved.
  • Remaining hydration workaround receives behavioral review, not silence-only acceptance.
  • Independent final review and user visual acceptance; merge/deployment only with authorization.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions