Build a minimal working UI prototype for agentd studio to test the core interaction pattern:
Components:
1. Markdown editor (textarea) for writing agent specs
- Simple textarea with monospace font
- No syntax highlighting needed for v1
- Store spec in browser localStorage for persistence
2. Run button that:
- POSTs the agent spec to
/run endpoint - Opens SSE connection to stream execution logs
- Endpoint should spawn agent process and emit structured JSONL events to stderr
3. Observability sidebar that:
- Subscribes to SSE stream from
/run - Renders collapsible tree view of execution events
- Shows: tool calls, responses, errors, state transitions
- Displays cost-per-step and time-per-step if available
Tech stack:
- htmx for SSE streaming and interactions
- Alpine.js for client-side state (tree expansion, etc)
- No build step required
Open questions to resolve during implementation:
- How to store/load agent specs (localStorage ok for prototype?)
- Authentication (skip for local-only prototype?)
- Agent spec validation before run (client-side or server-side?)
- Cost tracking implementation (defer to later task?)
Success criteria:
- Can write simple agent spec in editor
- Can click run and see execution stream
- Can expand/collapse tree nodes in observability view
- Events display enough detail to understand what happened