fix(cockpit): redesign Observe as a polished GitHub-inspired operational dashboard

[placerda]

Summary

Redesign the Cockpit Observe experience so it matches the polished AgentOps Cockpit visual identity and the compact, GitHub-inspired operational dashboard direction originally specified in #433.

The current Observe page renders as a largely raw HTML form-and-table experience. Its stylesheet is loading, but the implementation relies on minimally styled native controls, basic links, simple borders, and an isolated light/dark color palette instead of the Cockpit shell and component system.

Observed behavior

During the initial Cockpit onboarding test:

• Observe appeared as a plain white page with native browser controls and default-looking blue navigation links.
• The page did not visually inherit the Cockpit header, navigation, spacing, typography, surfaces, or dark presentation.
• Filters dominated the page instead of supporting an executive overview.
• Empty content areas looked unfinished rather than intentionally designed.
• Tables were the primary visual structure instead of drill-down surfaces beneath a high-level operational summary.
• The result was substantially below the GitHub dashboard reference and the visual direction approved in feat(cockpit): deploy a hosted read-only Cockpit to Azure App Service #433.

The test used the temporary disconnected-mode workaround from #458, so the lack of telemetry explains why populated metric cards and trend data were absent. It does not explain the raw shell, native controls, weak hierarchy, disconnected theme, or unfinished empty states.

Root cause

src/agentops/agent/observe/ui.py emits a self-contained HTML document with inline CSS and JavaScript. _OBSERVE_STYLES provides only a small set of colors, borders, grid rules, and typography declarations.

Observe therefore does not reuse the Cockpit visual system. Its theme follows prefers-color-scheme independently, so it can render as a white page even when the surrounding Cockpit experience is dark.

Existing tests validate HTML structure, CSS classes, accessibility behavior, and data rendering, but do not provide screenshot or visual-regression coverage. This allowed the functional implementation to pass without proving the intended visual result.

Prior requirement

Issue #433 explicitly required:

• a compact, GitHub-inspired operational dashboard;
• retained AgentOps visual identity;
• polished dark and light themes;
• compact metric cards;
• thin trend lines, subtle grids, restrained legends, and exact-value tooltips;
• responsive charts with accessible area gradients;
• an overview containing resource, project, agent, invocation, failure, latency, token, and coverage metrics.

The current implementation satisfies parts of this contract structurally, but not at the expected visual quality.

Proposed scope

• Reuse or extract the Cockpit design tokens, typography, surfaces, header, navigation, and layout primitives instead of maintaining an unrelated Observe visual system.
• Make Observe feel like one Cockpit experience rather than a separate embedded utility page.
• Provide a polished dark presentation consistent with Cockpit and a complete light equivalent.
• Add explicit theme behavior so Observe does not unexpectedly diverge from the Cockpit shell.
• Rework the Overview into an executive operational dashboard with compact KPI cards and strong visual hierarchy.
• Present invocation, failure, latency, token, and coverage trends as first-class visualizations when data is available.
• Keep filters compact, responsive, and subordinate to the operational summary.
• Treat Agents, Models, Tools, Runs, Costs, Attribution, and Coverage tables as drill-down views rather than the primary overview experience.
• Design intentional loading, empty, partial, permission-denied, disconnected, and error states.
• Preserve the existing accessibility, privacy, bounded-query, URL-filter, and protected-content guarantees.
• Add deterministic visual regression or screenshot coverage for representative states.

Acceptance criteria

• Observe uses the same recognizable shell and visual language as the rest of Cockpit.
• The Overview presents a polished, high-level operational dashboard before detailed tables.
• Dark and light themes are both complete, accessible, and visually consistent.
• Theme selection does not unexpectedly diverge between Cockpit and Observe.
• Native-looking links, controls, tables, and buttons are replaced with consistently styled components.
• Filters remain usable on narrow screens without dominating the page or requiring horizontal scrolling.
• Populated Overview fixtures demonstrate compact KPI cards and production-quality trend charts.
• Loading, empty, disconnected, partial-data, permission-denied, and query-error states look intentional and explain the next action.
• Source and refresh metadata remain available without overwhelming the primary metrics.
• Detailed tables remain readable and accessible, with clear drill-down affordances.
• Existing Observe behavior and security tests remain green.
• Automated visual coverage detects regressions in the main responsive and theme variants.

Relationships

• Builds on the visual direction and acceptance criteria from feat(cockpit): deploy a hosted read-only Cockpit to Azure App Service #433.
• Separate from Stop local Cockpit from requiring hosted Observe identity configuration #458, which fixes local Observe authentication and connected telemetry access.
• A connected local test should be repeated after Stop local Cockpit from requiring hosted Observe identity configuration #458, but connected data alone will not resolve this visual-design gap.

[placerda]

Implemented in 4add05b (Observe dashboard redesign) and 0e2849b (Cockpit sources shared design tokens).

Merged into develop via #460 (merge commit 88a89aa). This issue stays open until develop is promoted to main, where the Closes keyword will fire.