feat(studio): monitoring screen with fleet and charts

apps/agent-forge/e2e/a11y.spec.ts

@@ -136,6 +136,15 @@ test('a #/traces/:id deep link with no daemon shows the down state and keeps the
   expect(new URL(page.url()).hash).toBe('#/traces/e2e-trace?obs=e2e-obs');
 });
 
+test('#/monitoring with no daemon shows the down state and keeps window/agent in the URL', async ({ page }) => {
+  await page.route('**/observe/**', (route) =>
+    route.fulfill({ status: 502, contentType: 'application/json', body: '{"error":"down"}' }),
+  );
+  await page.goto('/?token=e2e-studio-token#/monitoring?window=7d&agent=e2e-agent');
+  await expect(page.getByRole('main').getByText('lousho observe start')).toBeVisible();
+  expect(new URL(page.url()).hash).toBe('#/monitoring?window=7d&agent=e2e-agent');
+});
+
 test('#/settings shows the settings panel inside the screen', async ({ page }) => {
   await page.goto('/?token=e2e-studio-token#/settings');
   const main = page.getByRole('main');

apps/agent-forge/src/__tests__/contrast.test.ts

@@ -47,6 +47,8 @@ const PAIRS: [text: string, background: string][] = [
   // DataTable: header sort arrow and hovered/focused row text on the header/row tint.
   ['accent', 'surface-2'],
   ['text', 'surface-2'],
+  // Monitoring: the selected window button draws text on the accent tint.
+  ['text', 'accent-soft'],
 ];
 
 describe('theme contrast', () => {

apps/agent-forge/src/observe/ObserveView.tsx

@@ -6,29 +6,23 @@ import { ObserveDaemonDown } from './chrome';
 import type { TraceListFilter } from './observeClient';
 import { TracesPanel } from './TracesPanel';
 import { TraceDetailView } from './TraceDetailView';
-import { InsightsPanel } from './InsightsPanel';
-import { FleetPanel } from './FleetPanel';
 import { ScoresPanel } from './ScoresPanel';
 
 const TABS = [
   { id: 'traces', label: 'Traces' },
-  { id: 'insights', label: 'Insights' },
-  { id: 'fleet', label: 'Monitoring' },
   { id: 'scores', label: 'Scores' },
 ] as const;
 export type ObserveTab = (typeof TABS)[number]['id'];
 const TAB_IDS: ObserveTab[] = TABS.map((t) => t.id);
 
 /**
- * The observability surface - Traces, Insights, Monitoring (fleet) and
- * Scores - served by the observe daemon's read API through the same-origin
- * `/observe` proxy. Cross-panel drill-down (fleet row -> that agent's
- * traces) is just shared state here: `tracesFilter` is owned at the top so
- * another tab can pre-fill it.
+ * The observability surface - Traces and Scores - served by the observe
+ * daemon's read API through the same-origin `/observe` proxy. Cross-panel
+ * drill-down (score row -> its trace) is just shared state here. Monitoring
+ * (fleet + charts) is its own screen, `screens/monitoring`.
  *
  * Given `tab`, the route owns the panel: the tab strip is hidden (the left
  * nav is the only switcher) and drill-downs ask `onTabChange` to navigate.
- * Monitoring then also shows Insights under the fleet table.
  */
 export function ObserveView({
   tab: routeTab,
@@ -42,12 +36,6 @@ export function ObserveView({
   const [tracesFilter, setTracesFilter] = useState<TraceListFilter>({});
   const [traceId, setTraceId] = useState<string | undefined>(undefined);
 
-  // Monitoring's "view traces" click-through: same table, scoped to the agent.
-  const drillToAgent = (agentId: string) => {
-    setTracesFilter((filter) => ({ ...filter, agent_id: agentId }));
-    setTraceId(undefined);
-    setTab('traces');
-  };
   const drillToTrace = (id: string) => {
     setTraceId(id);
     setTab('traces');
@@ -68,17 +56,6 @@ export function ObserveView({
         onOpenTrace={setTraceId}
       />
     );
-  else if (tab === 'insights') body = <InsightsPanel />;
-  else if (tab === 'fleet' && routed)
-    body = (
-      <>
-        <FleetPanel onShowTraces={drillToAgent} />
-        <section aria-label="Insights">
-          <InsightsPanel />
-        </section>
-      </>
-    );
-  else if (tab === 'fleet') body = <FleetPanel onShowTraces={drillToAgent} />;
   else body = <ScoresPanel onOpenTrace={drillToTrace} />;
 
   if (routed)

apps/agent-forge/src/observe/__tests__/ObserveView.test.tsx

@@ -146,11 +146,4 @@ describe('ObserveView', () => {
     expect(container!.querySelector('[role="tablist"]')).toBeNull();
     expect(container!.textContent).toContain('No traces match');
   });
-
-  it('shows Insights under the fleet table on the Monitoring panel', async () => {
-    stubDaemon();
-    await renderView(<ObserveView tab="fleet" onTabChange={() => {}} />);
-    expect(container!.querySelector('[role="tablist"]')).toBeNull();
-    expect(container!.querySelector('[aria-label="Insights"]')).not.toBeNull();
-  });
 });

apps/agent-forge/src/observe/chrome.tsx

@@ -12,7 +12,7 @@ export function AgentSelect({
   value,
   onChange,
 }: {
-  agents: ObserveAgentRow[] | undefined;
+  agents: Pick<ObserveAgentRow, 'agent_id' | 'name'>[] | undefined;
   value: string;
   onChange: (agentId: string) => void;
 }) {