fix(cockpit-chat-debug): give the devtools State tab real state to show

The dock has two tabs and only one of them demonstrated anything. Its graph
was a plain MessagesState, and agent.state() projects messages out into the
transcript, so the State inspector printed an empty object no matter what the
run did — the page still promised it 'pretty-prints the agent's current state'.

The process node already computed the metrics; it just buried them in a
message. DebugState widens MessagesState with an analysis dict, so those
numbers land in state where the inspector can render them.

The fixture is now recorded from a real run rather than authored, and the
State spec asserts the analysis keys instead of merely asserting the
inspector renders some object — the shape the old comment said should widen
this tab's coverage rather than fail it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: blove

apps/website/content/docs/chat/components/chat-debug.mdx

@@ -22,19 +22,25 @@ Before the first turn the Timeline tab shows its empty state: "No checkpoints ye
 
 ## How it is built
 
-Three files carry the example: the graph that produces the checkpoints, the provider that points Angular at it, and the component that mounts the panel. Open the Code tab to read them in place.
+The example is three files: the graph that produces the checkpoints, the provider that points Angular at it, and the component that mounts the panel. Open the Code tab to read them in place.
 
 ### A graph with several nodes per turn
 
-The backend is deliberately multi-step, because one node per turn produces one checkpoint and very little to look at. `generate` answers with the model, `process` appends a synthetic message derived from the answer, and `summarize` asks the model for a one-sentence summary of the conversation so far. The system prompt read by `generate` frames the assistant as an aviation helper; the graph binds no tools, so every answer comes from the model alone.
+The backend is deliberately multi-step, because one node per turn produces one checkpoint and very little to look at. `generate` answers with the model, `process` measures that answer and records the result, and `summarize` asks the model for a one-sentence summary of the conversation so far. The system prompt read by `generate` frames the assistant as an aviation helper; the graph binds no tools, so every answer comes from the model alone.
 
 <ExampleCode file="graph.py" region="pipeline-nodes" title="graph.py — the three pipeline nodes" />
 
 Each node returns a partial state update, and each of those updates becomes a checkpoint on the thread.
 
+### State the inspector can show
+
+`agent.state()` is the LangGraph values bag with `messages` projected out into the transcript, so a graph that carries nothing but its messages leaves the State tab printing an empty object. This graph widens `MessagesState` with the metrics `process` computes, which is what gives the second tab something to inspect.
+
+<ExampleCode file="graph.py" region="debug-state" title="graph.py — the state the panel inspects" />
+
 ### Wiring the nodes into a linear pipeline
 
-The nodes are registered on a `StateGraph` over `MessagesState` and chained: `generate` to `process` to `summarize` to `generate_title`, then to the end. `generate_title` is a background node that summarizes the first user message into a thread title; it returns an empty update, so it changes the message list not at all while still adding a step to the run.
+The nodes are registered on a `StateGraph` over `DebugState` and chained: `generate` to `process` to `summarize` to `generate_title`, then to the end. `generate_title` is a background node that summarizes the first user message into a thread title; it returns an empty update, so it changes the message list not at all while still adding a step to the run.
 
 <ExampleCode file="graph.py" region="graph-wiring" title="graph.py — the compiled pipeline" />
 

cockpit/chat/debug/angular/e2e/c-debug.spec.ts

@@ -88,12 +88,11 @@ test('c-debug: the State tab swaps in the live state inspector', async ({ page }
   // The tab owns the panel body — the timeline is torn down, not stacked.
   await expect(page.locator('chat-debug-checkpoint-card')).toHaveCount(0);
   // `agent.state()` is the LangGraph values bag with `messages` projected out
-  // into the transcript, so on this MessagesState graph the inspector renders
-  // an empty object today. Assert the shape the JsonPipe produces rather than
-  // that exact literal: the claim is that the inspector is mounted and bound
-  // to the agent, and a graph that carries state beyond its messages should
-  // widen this tab's coverage, not fail it.
-  await expect(stateTab.locator('chat-debug-state-inspector pre')).toHaveText(
-    /^\{[\s\S]*\}$/,
-  );
+  // into the transcript. This graph's DebugState also carries `analysis`, the
+  // metrics the `process` node computes, so the inspector has real run state
+  // to print — that is what makes this tab worth opening.
+  const inspector = stateTab.locator('chat-debug-state-inspector pre');
+  await expect(inspector).toContainText('analysis');
+  await expect(inspector).toContainText('characters');
+  await expect(inspector).toContainText('words');
 });