archflow-mcp / implementation_plan.md
Ryan Cashman
Simplify to pure HTML - remove rich dep
a089044
# Implementation Plan - ArchFlow MCP Hacker Terminal
This plan outlines the steps to build and refine the Hacker Terminal UI for ArchFlow MCP.
## User Review Required
> [!IMPORTANT]
> - **Copy Functionality**: I am adding a custom JavaScript-based copy button to handle the HTML output.
> - **Theme**: The current theme is "Matrix Green". Let me know if you want "Amber" or "Cyberpunk Purple".
## Proposed Changes
### UI Enhancements
- [x] **Basic Layout**: Split screen with Input and Output.
- [x] **Terminal Theme**: Black background, green text, glowing borders.
- [x] **ANSI Formatting**: Using `rich` to generate HTML with terminal colors.
- [x] **Copy Button**: Add a button to copy the terminal output to clipboard.
- [x] **Mobile Responsiveness**: Ensure it looks good on smaller screens (Gradio handles most of this, but we can tweak CSS).
### Backend Logic (Simulation)
- [x] **Mock Analysis**: Simulate "thinking" time and generate fake results.
- [x] **Siren Detection**: Show "Microservices" warning as requested.
- [x] **Roadmap Generation**: Show a simple phased roadmap.
## Verification Plan
### Automated Tests
- [x] **Browser Subagent**: Verify the UI loads and interactive elements work.
- [x] **Copy Test**: Verify the copy button actually puts text in the clipboard (verified via JS injection).
### Manual Verification
- **Visual Check**: Ensure the "glow" effects look "sick".
- **Workflow**: Input -> Analyze -> Output -> Copy.