docs(ui): task-detail island redesign spec + component build prompts
This commit is contained in:
mika kuns
200
docs/superpowers/specs/2026-06-04-task-detail-redesign-design.md
Normal file
200
docs/superpowers/specs/2026-06-04-task-detail-redesign-design.md
Normal file
@@ -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):
|
||||
|
||||
```
|
||||
<Title>
|
||||
|
||||
<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.
|
||||
Reference in New Issue
Block a user