OpenQode/Documentation/QA_WALKTHROUGH.md

Premium TUI Overhaul - Verification Walkthrough

🎯 Goal

Complete implementation and full wiring of the "Noob-Proof" TUI experience, ensuring all components are functional, visually consistent, and connected to the backend data model.

🛠 Key Implementations

1. Noob-Proof Automation UX

• Preview Plan: A dedicated view showing planned actions with risk levels (Safe, Approval, Manual).
• Automation Timeline: A visual trace of execution steps (Observation -> Intent -> Action -> Verify).
• Inspectors: Real-time state visualization for:
  • 🖥️ Desktop: Foreground app, running processes, cursor position.
  • 🌐 Browser: Current URL, page title, tabs.
  • ☁️ Server: Connection health, host status.

2. Backend Simulation (QA Mode)

• /demo Command: Triggers a fully simulated automation run.
• Dynamic Wiring: Components are no longer hardcoded; they react to the demoRunState driven by the simulation logic.

3. Component Standardization

• SnippetBlock (CodeCard): Consolidated all code rendering to use the robust SnippetBlock module.
• Features:
  • Discord-style distinct headers.
  • Google-style "Friendly Paths" (relative to project root).
  • Syntax highlighting via ink-markdown.
  • Smart collapsing for long files.

🧪 Verification Steps

1. Launch the TUI:

   node bin/opencode-ink.mjs
   

2. Trigger Simulation:

   • Type /demo in the chat input and press Enter.

3. Observe the Flow:

   • Phase 1 (Preview): The interface switches to "Preview Plan" showing a list of steps with risk indicators.
   • Phase 2 (Running): After 3 seconds, it switches to "Running" mode.
     • Left Panel: The Automation Timeline adds steps dynamically (Desktop clear -> Browser open).
     • Right Panel: The Inspector components update in real-time (e.g., Browser URL changes to google.com).
   • Phase 3 (Completion): The run finishes, and a success message appears in the chat.

✅ Quality Assurance Checklist

• Wiring: All components read from runState.
• Visuals: "Premium" aesthetic maintained (borders, colors, spacing).
• Stability: Syntax checks passed; no regressions in existing features.
• Code Quality: Removed duplicate components and legacy definitions.