# 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.