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

Three ClaudeDo tasks (list "Claude do", repo C:\Private\ClaudeDo), one per component, run sequentially in their own worktrees.
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).
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.

10 KiB Raw Permalink Blame History Unescape Escape