[UI/UX] Monitor Component Re-Architecture

[AlexChesser]

Ticket 3.1: [UI/UX] Monitor Component Re-Architecture

Title: Reorder Monitor Hierarchy for "Executive" Scannability

Description:
The current ail Monitor layout is cluttered. We need to re-order the components to follow a logical top-down flow that prioritizes the active pipeline selection and current progress over the historical logs and chat.

Tasks:

• Modify the Webview HTML/CSS to reorder components:
  1. Pipelines: (Top) The .ail.yaml selector.
  2. Steps: (Middle) Visual progress of the current loop.
  3. Run History: (Lower-Middle) List of past executions.
  4. Chat: (Bottom) The active interaction/invocation area.
• Ensure the "Chat" area (formerly Invocation) uses a flexible height to accommodate long outputs without pushing the Pipeline selector off-screen.

Opus Planning Prompt:

"Plan a structural HTML/CSS redesign of the ail Monitor Webview. The new hierarchy must be: Pipelines, Steps, Run History, and Chat. Propose a layout (flexbox or grid) that keeps the 'Pipelines' selector visible at the top while allowing the 'Chat' area to expand. Rename all 'Invocation' references in the UI to 'Chat'."

[AlexChesser]

✅ Implemented in ea8ebe2 — Monitor re-architecture completed as part of WebviewViewProvider migration for dockable panel layout.

ea8ebe2