Spaces:
No application file
No application file
| 4. Feature: Minimal Web Interface | |
| 4.1 Story: As a user, I need a chat interface to interact with the system. | |
| 4.1.1 Task: Create Next.js app with single page at /chat, using App Router, TypeScript, and Tailwind CSS for styling | |
| 4.1.2 Task: Implement chat UI with message history stored in React state, input field with enter-to-send, and auto-scroll to bottom | |
| 4.1.3 Task: On message submit, call MCP server via POST /api/mcp with {tool: "write_graph", params: {action: "create_workflow", user_question: "..."}}, which triggers agent | |
| 4.1.4 Task: Show pulsing "Agent thinking..." indicator by polling MCP get_next_instruction every 2 seconds while workflow is active | |
| 4.1.5 Task: When execution completes, fetch results via MCP query_graph and display in HTML table with column headers and zebra striping | |
| 4.2 Story: As a user, I need to see what the agent is doing. | |
| 4.2.1 Task: Add status panel that polls MCP query_graph every 5 seconds for active workflow and current instruction, displaying name and status | |
| 4.2.2 Task: During pause, show countdown timer (setInterval every second) with "Human review window: 4:32 remaining" and orange background | |
| 4.2.3 Task: Query and display last 5 instructions via MCP: "MATCH (i:Instruction)-[:EXECUTED_AS]->(e:Execution) RETURN i, e ORDER BY e.completed_at DESC LIMIT 5" | |
| 4.2.4 Task: Implement red STOP button that calls MCP write_graph to set workflow status='stopped', which agent checks during pause loop | |
| 4.3 Story: As a user, I need basic graph visualization. | |
| 4.3.1 Task: Add Cytoscape.js component that calls MCP query_graph to fetch active workflow nodes and relationships, rendering as directed graph | |
| 4.3.2 Task: Apply status-based styling: pending=gray (#9CA3AF), executing=yellow (#FCD34D), complete=green (#10B981), failed=red (#EF4444) | |
| 4.3.3 Task: On node click, display properties panel showing all node properties formatted as key-value pairs in monospace font | |
| 4.3.4 Task: Implement auto-refresh every 10 seconds using setInterval, with smooth transitions to avoid jarring updates | |