Paolo/gla 67 multi tab UI redesign

[paoloanzn]

No description provided.

[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.