# 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.