| 1 | # CascadeIDE UI Concepts v1 (generated mockups) |
| 2 | |
| 3 | Source images: |
| 4 | |
| 5 | - `concept-generated/cascadeide-ui-concept-focus.png` |
| 6 | - `concept-generated/cascadeide-ui-concept-balanced.png` |
| 7 | - `concept-generated/cascadeide-ui-concept-power.png` |
| 8 | |
| 9 | Goal: describe the concepts precisely enough to drive implementation and acceptance checks. |
| 10 | |
| 11 | --- |
| 12 | |
| 13 | ## 0) Shared vocabulary (all modes) |
| 14 | |
| 15 | - **Left panel**: navigation (solution/project explorer). |
| 16 | - **Center**: editor surface (tabs + code editor). |
| 17 | - **Right panel**: agent/assistant surface (plan, operations, trace). |
| 18 | - **Bottom strip/panel**: status + build/test/debug signals (the “instrumentation line”). |
| 19 | |
| 20 | Key idea: **IDE = cockpit**. The UI must keep agent execution, code context, and telemetry visible without requiring context switches across many windows. |
| 21 | |
| 22 | --- |
| 23 | |
| 24 | ## 1) Focus mode concept (`cascadeide-ui-concept-focus.png`) |
| 25 | |
| 26 | ### Purpose |
| 27 | |
| 28 | Single-task flow: keep the editor dominant while preserving just enough navigation and agent guidance to complete one change safely. |
| 29 | |
| 30 | ### Layout |
| 31 | |
| 32 | - **Top bar**: |
| 33 | - Product label `CascadeIDE`. |
| 34 | - Workspace/project breadcrumb (e.g., `MyEcommerceProject`). |
| 35 | - Active task title (e.g., `Refactor payment retries`) + **status pill** (`In progress`). |
| 36 | - Primary controls on the right: **Run**, **Checkpoint**, **Rollback**. |
| 37 | - **Left**: compact **Solution Explorer** tree. |
| 38 | - **Center**: |
| 39 | - Document tab (e.g., `PaymentService.cs`). |
| 40 | - Large code editor with: |
| 41 | - inline diff hints (green/red bands), |
| 42 | - breakpoint / marker gutter, |
| 43 | - “current line” highlight. |
| 44 | - **Right**: **Agent** panel with three stacked blocks: |
| 45 | - **Plan** checklist (tickable items). |
| 46 | - **Next Action** (single focused step snippet). |
| 47 | - **Confirmation** (explicit “Confirm/Cancel” action gate). |
| 48 | - **Bottom instrumentation line**: pill badges for outcomes: |
| 49 | - Build status/time, |
| 50 | - Test run counts, |
| 51 | - Debug state (breakpoint hit), |
| 52 | - Additional build status. |
| 53 | |
| 54 | ### Acceptance checklist |
| 55 | |
| 56 | - Focus mode always keeps: **editor + minimal nav + agent plan + confirmation gate + bottom status**. |
| 57 | - No “power telemetry”/timeline blocks in focus by default. |
| 58 | |
| 59 | --- |
| 60 | |
| 61 | ## 2) Balanced mode concept (`cascadeide-ui-concept-balanced.png`) |
| 62 | |
| 63 | ### Purpose |
| 64 | |
| 65 | General daily work mode: editor remains primary, but secondary panels help with safe iterative execution (build/test/debug) and risk checks. |
| 66 | |
| 67 | ### Layout |
| 68 | |
| 69 | - **Top toolbar**: large action buttons: |
| 70 | - **Fix failing tests** |
| 71 | - **Investigate nullref** |
| 72 | - **Prepare commit** |
| 73 | - **Left column** (two stacked panels): |
| 74 | - **Solution Graph / Explorer** (projects/files tree). |
| 75 | - **Dependency Mini‑Map** (graph view of touched dependencies). |
| 76 | - **Center**: |
| 77 | - Code editor with optional top sub‑strip showing badges: |
| 78 | - `LOC: 12` |
| 79 | - `Impacted tests: 5` |
| 80 | - `Files changed: 3` |
| 81 | - **Right**: |
| 82 | - **Agent Operations** stack: |
| 83 | - Objective (with progress, ~75%), |
| 84 | - Tool calls (running list), |
| 85 | - Risk checks (alerts), |
| 86 | - Result (collapsible). |
| 87 | - **Bottom row** (multi-tab panel): |
| 88 | - **Build Output** |
| 89 | - **Test Results** |
| 90 | - **Debug Stack** |
| 91 | - plus separate **Event Timeline** (timepoints for analysis / failure / fix). |
| 92 | |
| 93 | ### Acceptance checklist |
| 94 | |
| 95 | - Balanced mode shows: **quick actions**, **risk checks**, **build/test/debug tabs**, and **event timeline**. |
| 96 | - Dependency mini‑map is visible or togglable without leaving the main window. |
| 97 | |
| 98 | --- |
| 99 | |
| 100 | ## 3) Power mode concept (“Autonomous Agent Cockpit”) (`cascadeide-ui-concept-power.png`) |
| 101 | |
| 102 | ### Purpose |
| 103 | |
| 104 | Autonomous execution cockpit: a high signal, always-on view of what the agent is doing, why it’s safe, and how to stop/rollback. |
| 105 | |
| 106 | ### Layout |
| 107 | |
| 108 | - **Title**: `CascadeIDE - Power Mode [Autonomous Agent Cockpit]`. |
| 109 | - **Left column**: |
| 110 | - **Project Explorer** (tree). |
| 111 | - **Task Queue List** with multiple tasks and **safety levels** per item (L1/L2/L3) + state (Pending/Queued/Paused). |
| 112 | - **Center**: |
| 113 | - Editor with: |
| 114 | - breakpoints, |
| 115 | - debug line highlight, |
| 116 | - inline diagnostics, |
| 117 | - warnings block inside editor (e.g., “Highest action detected…”). |
| 118 | - **Right column**: **Agent Trace Timeline** with step cards: |
| 119 | - Each step has timestamp, label (PLAN/ACTION/OBSERVATION/NEXT), |
| 120 | - Status chips (SUCCESS/WARNING/PENDING), |
| 121 | - Action buttons: **Explain this step**, **Rollback**. |
| 122 | - **Bottom cockpit / telemetry strip**: |
| 123 | - **Build status** (PASSING, last build, duration). |
| 124 | - **Affected tests run** (sparkline/histogram + totals). |
| 125 | - **Git status summary** (branch, file counts, unstaged changes). |
| 126 | - **Workspace snapshot JSON preview**. |
| 127 | - **Safety Level Control** block (right bottom): |
| 128 | - L1 Read‑only, L2 Confirm edits, L3 Autonomous. |
| 129 | - Prominent **Emergency Stop**. |
| 130 | |
| 131 | ### Acceptance checklist |
| 132 | |
| 133 | - Power mode must make it impossible to miss: |
| 134 | - “What is happening now?” (trace timeline), |
| 135 | - “What changed?” (git + file/touch summary), |
| 136 | - “Is it safe?” (safety level + confirmations), |
| 137 | - “How to stop/rollback?” (emergency stop + rollback). |
| 138 | |
| 139 | ### Visual language (детальный референс дерева) |
| 140 | |
| 141 | Автогенерация `concept-generated/cascadeide-ui-concept-power.png` задаёт общую композицию. **Крупный кадр стиля дерева проекта** (тёмный фон, бирюзовая полоска выделения, воздух между строками, иконки типов файлов, заголовок в духе *PROJECT EXPLORER*) сохранён отдельно: **`concept-screens/power-project-explorer-tree-concept.png`** (+ оглавление в `concept-screens/README.md`). В коде левая колонка пока ближе к **стандартному `TreeView` Fluent** внутри «острова» — см. таблицу **§4.1** в `concept-to-implementation-map-v1.md`. |
| 142 | |
| 143 | --- |
| 144 | |
| 145 | ## 4) Mapping to current implementation docs |
| 146 | |
| 147 | Primary implementation layout reference: `cascade-ide-ui-layout-v1.md`. |
| 148 | |
| 149 | When aligning UI, keep these invariants: |
| 150 | |
| 151 | - **Focus**: minimal panels + explicit confirmation gate. |
| 152 | - **Balanced**: quick actions + risk checks + build/test/debug output with timeline. |
| 153 | - **Power**: task queue + trace timeline + telemetry strip + safety controls + emergency stop. |
| 154 | |
| 155 | --- |
| 156 | |
| 157 | ## 5) Визуальное соответствие коду (кратко) |
| 158 | |
| 159 | Функциональные блоки Power в основном заведены на контролы из `cascade-ide-ui-layout-v1.md`. **«Глянец» PNG-концептов** (кастомный хром списков, редакторный gutter, спарклайны в телеметрии) **частично** — детальная матрица: **`concept-to-implementation-map-v1.md` §4.1**. |
| 160 | Референсы: **`concept-generated/*.png`** (общий макет), **`concept-screens/power-project-explorer-tree-concept.png`** (фрагмент дерева). |
| 161 | |
| 162 | |