App shell
The app shell is the frame the investigator workbench is built in. Every
authenticated /app surface — and every capability pillar's UI as it
ships — renders inside the shell. Pillars never re-create the chrome.
What it is
- Header — the TokenForensics wordmark, a link to these docs, and the account menu (your identity and sign out).
- Top-tab navigation — the workbench areas, in a tab bar directly beneath the header. Overview is live today; the eight capability areas (capture, attribution, security incidents, cost, compliance, agents, drift, cases) are signposted as coming online. The product navigates with top tab bars everywhere — never a sidebar — and the bar scrolls horizontally on narrow viewports, so there is no separate mobile nav.
- Content area — whatever the current route renders, framed by the header and the tab bar.
It sits under the root layout, so the global theme toggle and the light/dark mechanic work everywhere with no extra wiring.
How it works
AppShell is a server component — the sign-out action runs on the
server and is handed to the client account menu. Only the interactive
pieces (the account dropdown and the active-tab highlight) are client
components. The tab bar is built on the shared Tabs primitive.
src/components/app-nav.ts lists every workbench area with a status —
live or soon. A capability pillar's build flips its row to live
and points it at the pillar's route. No pillar UI is pre-built; the
shell just defines where each one lands.
Why it matters
The analyst gets one coherent forensic tool, not a pile of inconsistent dashboards — the exact thing the product positions against. Navigation, identity, and theming are in the same place on every screen, and the tab bar signposts what is coming. When a pillar ships, it appears in the place the user already expects.
Last updated