GLA-67: redesign Prism panel into tabbed inspection UI

[paoloanzn]

Summary

• redesign the Prism panel into three tabs with a persistent toolbar: Dashboard, Mapping Tree, and Sequence Flow
• build the new Dashboard modules (overview stats, endpoint list, authentication, GraphQL operation schema/explorer, request headers)
• implement Mapping Tree overview + hierarchical groups with right-side endpoint details drawer
• implement Sequence Flow timeline + deep inspection tabs for headers/auth/cookies/graphql/variables/incoming/response headers
• add export selection controls in Mapping Tree synced with Dashboard (node, branch, and all/none selection)
• make Authentication and Cookies modules collapsible and collapsed by default
• show full auth values and sent/captured cookies in detail views
• fix header-name wrapping/cropping issues across views
• align timeline marker/chip colors with the legend color coding
• make Sequence Overview internally scrollable with incremental lazy loading and loading spinner indicator
• remove misleading red styling from auth value pills and render as standard neutral text

Validation

• npm run compile
• npm run build

Ref: GLA-67

[linear]

GLA-67 Multi-tab UI redesign

Redesign the Prism panel into a tabbed interface with three distinct views, each optimized for a different inspection mode. Based on the attached mockup — the Network Graph view is explicitly out of scope for now.

Tab 1 — Dashboard (default view)

Modular, card-based layout. The landing view when you open Prism.

• Overview & Stats module — total endpoints discovered, observation count, GraphQL vs REST breakdown
• Endpoint list — grouped by GraphQL/REST, each row shows method, operation/endpoint name, observation count, auth indicator
• Authentication module — surfaces the actual auth header values (redacted) detected across the session, so the user sees at a glance what credentials are in play
• GraphQL Operation module — when a GraphQL endpoint is selected, shows operation type, variables schema, and selection set with a Schema/Explorer tab switcher
• Request Headers module — table of header name, observed value (truncated), and type

Tab 2 — Mapping Tree

Hierarchical tree view of the full API surface.

• Expandable/collapsible tree grouped by API type (Core GraphQL API, User Data REST, etc.) — semantic groups inferred from URL patterns and operation names
• Each node shows method badge, operation/endpoint name, observation count
• Selecting a node opens the same detail panel as Dashboard, in a right-side drawer
• A small "Mapping Overview" summary chart at the top showing GraphQL vs REST vs AI-enriched ratio

Tab 3 — Sequence Flow

Timeline-based view for understanding the order and timing of requests.

• Horizontal timeline with entry markers, color-coded by type (GraphQL / REST / auth)
• Clicking a marker populates a detail panel below with tabs: Headers, Auth, GraphQL, Variables, Incoming, Headers
• Useful for understanding auth flows and page initialization sequences — which requests fire first, what depends on what

Tab navigation

Tabs appear at the top of the panel: Dashboard | Mapping Tree | Sequence Flow
Toolbar controls (Live/Frozen toggle, Export, Settings) persist across all tabs in a fixed top bar.