201 lines
10 KiB
Markdown
201 lines
10 KiB
Markdown
# 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.
|