fix: inspector syncs state on direct agent.setState()

When using selfManagedAgents, calling agent.setState() directly only
fires onStateChanged — the inspector subscribed to onStateSnapshotEvent
(pipeline-only) but not onStateChanged, leaving the "Current State"
panel permanently stale. Add onStateChanged handler mirroring the
existing onMessagesChanged pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: mxmzb

packages/web-inspector/src/__tests__/web-inspector.spec.ts

@@ -206,4 +206,51 @@ describe("WebInspectorElement", () => {
     inspectorHandle.persistState();
     expect(localStorage.getItem("cpk:inspector:state")).toBeTruthy();
   });
+
+  it("syncs agent state on direct setState (onStateChanged without pipeline events)", async () => {
+    // Simulates a selfManagedAgent where agent.setState() is called directly
+    // from UI code, bypassing the AG-UI event pipeline. Before the fix,
+    // only onStateSnapshotEvent updated the inspector — onStateChanged was
+    // not subscribed to, so direct setState() left the inspector stale.
+    const { agent, controller } = createMockAgent("counter", {
+      state: { counter: 0 },
+    });
+    const { core, emitAgentsChanged } = createMockCore({ counter: agent });
+
+    const inspector = new WebInspectorElement();
+    document.body.appendChild(inspector);
+    inspector.core = core as unknown as WebInspectorElement["core"];
+
+    emitAgentsChanged();
+    await inspector.updateComplete;
+
+    const inspectorHandle = inspector as unknown as InspectorInternals;
+
+    // Initial state should be captured on subscription
+    expect(inspectorHandle.agentStates.get("counter")).toEqual({ counter: 0 });
+
+    // Simulate agent.setState({ counter: 1 }) — mutate the agent's state
+    // property and fire onStateChanged (exactly what AbstractAgent.setState does)
+    (agent as unknown as { state: unknown }).state = { counter: 1 };
+    controller.emit("onStateChanged", {
+      state: { counter: 1 },
+      messages: [],
+      agent,
+    });
+    await inspector.updateComplete;
+
+    // Inspector should reflect the updated state
+    expect(inspectorHandle.agentStates.get("counter")).toEqual({ counter: 1 });
+
+    // Simulate a second setState
+    (agent as unknown as { state: unknown }).state = { counter: 5 };
+    controller.emit("onStateChanged", {
+      state: { counter: 5 },
+      messages: [],
+      agent,
+    });
+    await inspector.updateComplete;
+
+    expect(inspectorHandle.agentStates.get("counter")).toEqual({ counter: 5 });
+  });
 });

packages/web-inspector/src/index.ts

@@ -496,6 +496,9 @@ export class WebInspectorElement extends LitElement {
       onMessagesChanged: () => {
         this.syncAgentMessages(agent);
       },
+      onStateChanged: () => {
+        this.syncAgentState(agent);
+      },
       onRawEvent: ({ event }) => {
         this.recordAgentEvent(agentId, "RAW_EVENT", event);
       },