diff --git a/docs/superpowers/plans/2026-06-04-task-detail-redesign-prompts.md b/docs/superpowers/plans/2026-06-04-task-detail-redesign-prompts.md new file mode 100644 index 0000000..85d4062 --- /dev/null +++ b/docs/superpowers/plans/2026-06-04-task-detail-redesign-prompts.md @@ -0,0 +1,33 @@ +# Task Detail Redesign — Component Build Prompts + +Three isolated build tasks (one per component). Each runs in its own worktree off +`main`, with the project CLAUDE.md auto-loaded. Full design context lives in +`docs/superpowers/specs/2026-06-04-task-detail-redesign-design.md` — every task +must read it first. + +Shared rules (all three): +- Build a **standalone** `UserControl` + dedicated `ViewModel` that renders fully + in the Avalonia previewer via **design-time sample data** (parameterless ctor + populating realistic values). Do **not** bind to `DetailsIslandViewModel`. +- New files under `src/ClaudeDo.Ui/Views/Islands/Detail/` and + `src/ClaudeDo.Ui/ViewModels/Islands/Detail/`. +- Use **only** tokens from `Design/Tokens.axaml` and classes from + `Design/IslandStyles.axaml`. No inline hex, no magic numbers where a token + exists. `PathIcon` fills geometry — stroke-only art is invisible. +- Compiled bindings (`x:DataType`). MVVM via CommunityToolkit + (`[ObservableProperty]`, `[RelayCommand]`); VM inherits `ViewModelBase`. +- **Do NOT modify** `DetailsIslandView.axaml`, `DetailsIslandViewModel.cs`, + `AgentStripView`, `SessionTerminalView`, or `TaskRunner.cs`. +- Verify: `dotnet build src/ClaudeDo.Ui/ClaudeDo.Ui.csproj -c Release` is green. + Stage files explicitly by path (never `git add -A`). Commit with a conventional + message. + +--- + +## TASK 1 — TaskHeaderBar + +(prompt text = task description; see below) + +## TASK 2 — DescriptionStepsCard + +## TASK 3 — WorkConsole diff --git a/docs/superpowers/specs/2026-06-04-task-detail-redesign-design.md b/docs/superpowers/specs/2026-06-04-task-detail-redesign-design.md new file mode 100644 index 0000000..f0ba97a --- /dev/null +++ b/docs/superpowers/specs/2026-06-04-task-detail-redesign-design.md @@ -0,0 +1,200 @@ +# Task Detail Island Redesign — Design + +**Date:** 2026-06-04 +**Status:** Approved (design), pending implementation +**Author:** brainstormed with user via visual companion + +## Problem + +The Detail island (`DetailsIslandView`, 413 lines) grew into one long scrolling +column as features piled on. The user has to scroll constantly. Specific pains +(confirmed by the user): + +- **Everything is always stacked** — Steps, Description, Terminal, and several + conditional sections share one scroll column with no way to hide/fold. +- **Duplicated info** — `model` shows in the gear flyout *and* the agent strip; + the branch line shows in the agent strip *and* as the terminal label. +- **Agent strip is a heavy 5-row block** pinned near the bottom even when idle. +- **Steps + Description take a lot of room** before the action controls. + +The terminal staying prominent is *fine* — not a pain point. + +## Solution overview + +Replace the linear body with a **fixed-region layout** built from **3 new +self-contained components**, plus a roadblock band. Top region (header + details +card) stays put; the work console is pinned to the lower third. + +``` +┌─────────────────────────────────────┐ +│ TaskHeaderBar (separated title) │ #T42 · title · 🗑/💀 · ⚙ +├─────────────────────────────────────┤ +│ DescriptionStepsCard │ card; text ⇄ steps toggle icon +│ (Preview = what Claude gets) │ copy · preview/edit +├─────────────────────────────────────┤ +│ Roadblock band (only when failed) │ ⚠ message · Continue · Reset&Retry +├─────────────────────────────────────┤ +│ WorkConsole (pinned, terminal) │ ●●● · model·turns·diff +│ tabs: Output | Actions | Session │ +└─────────────────────────────────────┘ +``` + +## The 3 components + +Each is a standalone `UserControl` + dedicated `ViewModel` with **design-time +sample data** so it renders fully in the Avalonia previewer in isolation. Built +in separate worktrees; **none touch `DetailsIslandView.axaml` or +`DetailsIslandViewModel.cs`** (that is the wiring session). All visuals use +**only** the existing design tokens (`Design/Tokens.axaml`) and style classes +(`Design/IslandStyles.axaml`) — no hardcoded colors/sizes. + +New folder: `src/ClaudeDo.Ui/Views/Islands/Detail/` +New VMs: `src/ClaudeDo.Ui/ViewModels/Islands/Detail/` + +### 1. TaskHeaderBar + +- **Layout:** one row — `#T42` id badge (mono `meta`, copyable) · editable title + `TextBox` (transparent, `FontSizeTaskTitle`, wraps) · **trash/skull button** · + ⚙ gear button with the agent-settings flyout. +- **Trash → Skull:** when **not** running show `Icon.Trash` (delete task, + `BloodBrush`); when **running** show a **skull** glyph (kill session). One + button, swaps icon + command on running state. Skull is a *new* filled + geometry to add to `IslandStyles.axaml` resources (`Icon.Skull`). +- **No done circle. No star** (the star lives on the task card/row already). +- **Gear flyout:** keep the existing agent-settings content verbatim — Model + combo + `InheritedBadge` + reset; Max Turns `NumericUpDown` + badge + reset; + System Prompt `TextBox` + "prepended" hint; Agent File combo + badge + reset. + Disabled while running (`IsAgentSectionEnabled`). +- **Existing bindings reused:** `TaskIdBadge`, `EditableTitle`, `DeleteTaskCommand`, + `StopCommand`, `IsRunning`, `IsAgentSectionEnabled`, all the agent-settings + members (`TaskModelOptions`/`TaskModelSelection`/`ModelBadge`/ + `ResetTaskModelCommand`/`TaskMaxTurns`/`TurnsBadge`/`ResetTaskTurnsCommand`/ + `TaskSystemPrompt`/`EffectiveSystemPromptHint`/`TaskAgentOptions`/ + `TaskSelectedAgent`/`AgentBadge`/`ResetTaskAgentCommand`). + +### 2. DescriptionStepsCard + +A `Border.island`-style card. The single explicitly-requested "separate +component." Top-right **toggle icon** switches the card between **Description** +and **Steps** views; the icon shows the *other* mode (in Description view → steps +icon `Icon.MoreHorizontal`/list glyph; in Steps view → text glyph). + +- **Header row:** small `section-label` ("DETAILS" / "STEPS") · spacer · **Copy** + icon button (`Icon.Copy`) · **Preview/Edit** toggle button (Description view + only) · **toggle icon** (top-right). +- **Description view:** + - *Preview mode* = renders **what Claude gets** via `MarkdownView`: the + canonical composed text (Title + Description + open steps — see below). + - *Edit mode* = raw description `TextBox` (mono, `Surface2Brush`, multiline). +- **Steps view:** add-step input (Enter to add) + list of step rows (check + circle `Ellipse.task-check` + inline-editable title, `subtask-row` style). +- **Copy** copies the **formatted** version (Title + Description + open steps), + nothing else, to the clipboard. +- **Existing bindings reused (when wired):** `EditableDescription`, + `IsEditingDescription`/`ToggleEditDescriptionCommand`, `Subtasks`, + `NewSubtaskTitle`/`AddSubtaskCommand`, `ToggleSubtaskDoneCommand`, + `CommitSubtaskEditCommand`. +- **New members (defined on the component VM now, lifted into + `DetailsIslandViewModel` at wiring):** `IsStepsView` + `ToggleCardViewCommand`; + `ComposedPreview` (string, the canonical format); `CopyFormattedCommand`. + +### 3. WorkConsole + +Terminal-styled card (`Border.terminal`) pinned to the lower third. + +- **Title bar:** three cosmetic traffic-light dots (`Ellipse.dot-red`, + `dot-yellow`, `dot-green`) on the left; centered/!right small **info header**: + `model · {turns} turns · +adds −dels` (mono `meta`; `diff-add`/`diff-del` + classes for the numbers). **No branch line.** LIVE/DONE/FAILED chip + (`live-chip`) on the right. +- **Tab strip:** `Output` | `Actions` | `Session`. + - **Output** — the live log. Reuse `SessionTerminalView` (`Entries`, `Label`, + `IsRunning`, `IsDone`, `IsFailed`) for the body, *or* the same + timestamp+`SelectableTextBlock` row template. + - **Actions** — worktree management: merge-target `ComboBox`, **Open Diff**, + **Worktree**, **Merge** (+ planning **Merge All Subtasks** when planning + parent). Bindings: `MergeTargetBranches`/`SelectedMergeTarget`, + `OpenDiffCommand`, `OpenWorktreeCommand`, `MergeAllCommand`/`CanMergeAll`/ + `MergeAllDisabledReason`/`MergeAllError`, `ReviewCombinedDiffCommand`. + - **Session** — review + outcomes: feedback `TextBox` + Approve/Reject/Park/ + Cancel (`ReviewFeedback`, `ApproveReviewCommand`, `RejectReviewCommand`, + `ParkReviewCommand`, `CancelReviewCommand`, shown when `IsWaitingForReview`) + and the child-outcomes list (`ChildOutcomes`, `HasChildOutcomes`). +- **Roadblock band** (above the tabs, inside or just above the card): visible on + `IsFailed`/`IsCancelled`; shows a warning (`Icon.Warning`, `BloodBrush`) and + **Continue** (`ContinueCommand`, `ShowContinue`) + **Reset & Retry** + (`ResetAndRetryCommand`, `ShowResetAndRetry`). +- **Info-header bindings:** `Model`, `Turns`, `DiffAdditions`, `DiffDeletions`, + `IsRunning`/`IsDone`/`IsFailed`. + +## Combined Description + Steps behavior + +Steps are part of the description. When the task runs, the **effective prompt = +Title + Description + only the OPEN steps**. Resolved steps are dropped. + +**Canonical composed format** (shared by the Worker prompt, the card's Preview, +and Copy): + +``` + + +<Description> + +## Sub-Tasks +- [ ] <open step 1> +- [ ] <open step 2> +``` + +- Omit the `## Sub-Tasks` section entirely when no open steps remain. +- Omit the description paragraph when description is empty. + +**Worker change (wiring session, by Claude):** `TaskRunner.cs:104-113` currently +appends *all* subtasks with `[x]`/`[ ]`. Change to append **only incomplete** +subtasks as `- [ ]` lines (drop completed). Factor the format into a shared +`TaskPromptComposer` in `ClaudeDo.Data` (referenced by both Worker and UI) so the +card's Preview and the real prompt never diverge. + +## Color / token guidelines (mandatory) + +- Backgrounds: `IslandBackgroundBrush`, `Surface2Brush`, `Surface3Brush`, + `DeepBrush`, `VoidBrush` (terminal). Borders: `LineBrush`/`LineBrightBrush`, + `HairlineOverlayBrush`. Text: `TextBrush`/`TextDimBrush`/`TextMuteBrush`/ + `TextFaintBrush`. Accent: `AccentBrush`/`AccentDimBrush`. Status: blood/peat/ + moss/sage + the `*TintBrush` pairs. +- Radii: `IslandCornerRadius` (14), `ButtonCornerRadius` (6), `InputCornerRadius` + (8). Spacing: `SpaceXs..Space2Xl`. Fonts: `SansFont`, `MonoFont`; sizes + `FontSizeMono`/`FontSizeBody`/`FontSizeTaskTitle`. +- Reuse style classes: `island`, `island-header`, `chip`, `btn`/`btn accent`/ + `primary`/`danger`, `icon-btn`, `flat`, `terminal`, `dot-red/yellow/green`, + `live-chip`, `task-check`, `subtask-row`, `section-label`, `field-label`, + `meta`, `diff-add`/`diff-del`, `diff-meter-*`. +- **No inline hex, no magic numbers** where a token exists. `PathIcon` fills + geometry — line-art must be filled or stroked via `Path`. + +## Build / isolation strategy + +1. Three ClaudeDo tasks (list "Claude do", repo `C:\Private\ClaudeDo`), one per + component, run sequentially in their own worktrees. +2. Each delivers: `Detail/<Name>.axaml` + `.axaml.cs` + `Detail/<Name>ViewModel.cs` + with design-time sample data; the `ClaudeDo.Ui` project **builds green** + (`dotnet build src/ClaudeDo.Ui/ClaudeDo.Ui.csproj -c Release`). +3. Components are visual-only against sample data. Real `DetailsIslandViewModel` + binding + the Worker steps→prompt change happen in the **wiring session** + (this Claude session, done while the build tasks run). + +## Wiring plan (this session) + +- Implement `TaskPromptComposer` + the `TaskRunner` open-steps change + a unit + test in `ClaudeDo.Worker.Tests`/`Data.Tests`. +- After the 3 components land: host them in `DetailsIslandView` (header top, + card below, roadblock band, work console pinned bottom), lift the new card VM + members into `DetailsIslandViewModel`, repoint `x:DataType`, delete the + superseded inline sections + `AgentStripView` usage. Update locale parity and + the test fakes. + +## Monitoring loop (this session) + +While the build tasks run: poll each via `get_task` / `get_task_log` / +`get_task_diff`, summarize progress and anything a session got stuck on, and if a +session is blocked on something missing, add a small follow-up task to the +"Claude do" list.