feat: complete phase 1 -- core framework with chat loop, agents, and React UI

Backend:
- FastAPI WebSocket /ws endpoint with streaming via LangGraph astream
- LangGraph Supervisor connecting 3 mock agents (order_lookup, order_actions, fallback)
- YAML Agent Registry with Pydantic validation and immutable configs
- PostgresSaver checkpoint persistence via langgraph-checkpoint-postgres
- Session TTL with 30-min sliding window and interrupt extension
- LLM provider abstraction (Anthropic/OpenAI/Google)
- Token usage + cost tracking callback handler
- Input validation: message size cap, thread_id format, content length
- Security: no hardcoded defaults, startup API key validation, no input reflection

Frontend:
- React 19 + TypeScript + Vite chat UI
- WebSocket hook with reconnect + exponential backoff
- Streaming token display with agent attribution
- Interrupt approval/reject UI for write operations
- Collapsible tool call viewer

Testing:
- 87 unit tests, 87% coverage (exceeds 80% requirement)
- Ruff lint + format clean

Infrastructure:
- Docker Compose (PostgreSQL 16 + backend)
- pyproject.toml with full dependency management

frontend/src/components/AgentAction.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import type { ToolAction } from "../types";
+
+interface Props {
+  action: ToolAction;
+}
+
+export function AgentAction({ action }: Props) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header} onClick={() => setExpanded(!expanded)}>
+        <span style={styles.icon}>{expanded ? "v" : ">"}</span>
+        <span style={styles.agent}>{action.agent}</span>
+        <span style={styles.tool}>{action.tool}</span>
+      </div>
+      {expanded && (
+        <div style={styles.details}>
+          <div style={styles.section}>
+            <strong>Args:</strong>
+            <pre style={styles.code}>{JSON.stringify(action.args, null, 2)}</pre>
+          </div>
+          {action.result !== undefined && (
+            <div style={styles.section}>
+              <strong>Result:</strong>
+              <pre style={styles.code}>{JSON.stringify(action.result, null, 2)}</pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    margin: "4px 16px",
+    padding: "6px 10px",
+    background: "#f5f5f5",
+    borderRadius: "6px",
+    fontSize: "12px",
+    color: "#666",
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    cursor: "pointer",
+  },
+  icon: {
+    fontFamily: "monospace",
+    width: "12px",
+  },
+  agent: {
+    fontWeight: 600,
+  },
+  tool: {
+    color: "#0066cc",
+    fontFamily: "monospace",
+  },
+  details: {
+    marginTop: "6px",
+    paddingLeft: "18px",
+  },
+  section: {
+    marginBottom: "4px",
+  },
+  code: {
+    background: "#e8e8e8",
+    padding: "4px 8px",
+    borderRadius: "4px",
+    fontSize: "11px",
+    overflowX: "auto",
+    margin: "4px 0",
+  },
+};