33488fd634
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
78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
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",
|
|
},
|
|
};
|