feat: redesign subagent activity and add a right-panel workspace #916

Problem Statement

Mcode exposes delegated sub-agent work as compact rows inside the narrative, but it does not give users a clear place to scan every active and finished sub-agent or inspect one agent's work in depth. When several agents run in parallel, users must expand individual timeline rows and reconstruct status from nested tool calls. The result hides delegation state, makes finished work hard to revisit, and falls short of the calm, legible experience shown in the attached Claude Code references.

Solution

Add a thread-scoped Subagents tab to Mcode's right panel and refine the existing narrative treatment without changing the provider event model.

The right-panel tab uses a horizontal Active and Finished tab list. Active shows running sub-agents; Finished shows completed, errored, and cancelled sub-agents. Each row presents the agent identity, task, latest meaningful activity, elapsed or total duration, and explicit status. Selecting a row opens a focused detail view in the same panel with the task, lifecycle, nested activity, final output, and any existing bounded-output or file-change information Mcode can already attribute to that sub-agent.

The parent narrative keeps a compact identity-first row for each delegation. It shows the canonical sub-agent icon, the best available name or task description, and a short lifecycle label. Selecting the row opens that agent in the Subagents panel. Provider updates appear only when the normalized event stream supplies them; Mcode does not invent progress copy.

The design borrows the references' hierarchy and restraint, then adapts them to Mcode: cool-slate surfaces, Filament Amber only for live focus, tonal separation, horizontal internal tabs, no decorative cards, and reduced-motion support.

User Stories

1. As a developer running delegated work, I want a Subagents tab in the right panel, so that I can monitor delegation without leaving the thread.
2. As a developer with several parallel sub-agents, I want separate Active and Finished views, so that current work does not mix with terminal results.
3. As a developer, I want those views presented as horizontal tabs, so that the panel matches Mcode's panel interaction model.
4. As a developer, I want each tab to show its item count, so that I can scan workload at a glance.
5. As a developer, I want Active selected when I first open the panel while work is running, so that current activity appears immediately.
6. As a developer, I want Finished selected when no work is active, so that an idle panel opens on useful content.
7. As a developer inspecting one view, I want live updates to preserve my selected horizontal tab, so that the interface does not move me without intent.
8. As a developer, I want active agents ordered by latest meaningful activity, so that the agent doing work now appears first.
9. As a developer, I want finished agents ordered by completion time, so that the newest result appears first.
10. As a developer, I want each row to show a stable agent identity and task label, so that I can distinguish parallel assignments.
11. As a developer, I want each active row to show its latest available activity, so that I can understand progress without opening the detail view.
12. As a developer, I want each finished row to show completed, errored, or cancelled state in text, so that status never depends on color alone.
13. As a developer, I want elapsed time for active work and total duration for finished work, so that I can judge how long each delegation has taken.
14. As a developer, I want a calm live indicator on active work, so that I can detect motion at a glance without visual noise.
15. As a developer who prefers reduced motion, I want a static but equally clear live state, so that the surface remains accessible.
16. As a developer, I want to select a sub-agent row and open its detail view in the same panel, so that context stays beside the conversation.
17. As a developer, I want a clear back action from detail to the previous Active or Finished view, so that inspection is reversible.
18. As a developer, I want the detail header to show identity, status, and duration, so that the selected agent remains unambiguous.
19. As a developer, I want the detail view to show the original delegated task, so that I can compare the assignment with the result.
20. As a developer, I want nested tool activity to remain attributed to the correct sub-agent, so that parallel and nested delegation stays trustworthy.
21. As a developer, I want the final sub-agent result rendered as settled Markdown, so that technical output remains readable.
22. As a developer, I want truncated output to retain Mcode's existing artifact notice, so that I can find the full result when the preview is bounded.
23. As a developer, I want existing file-change information shown only when Mcode can attribute it safely, so that the panel never guesses ownership.
24. As a developer, I want nested sub-agents represented through indentation and breadcrumbs without decorative guide rails, so that hierarchy stays clear and compact.
25. As a developer reading the parent narrative, I want a compact identity-first delegation row, so that the conversation shows when work moved to a sub-agent.
26. As a developer, I want narrative delegation rows to open the matching right-panel detail, so that summary and inspection form one workflow.
27. As a developer, I want provider-supplied lifecycle updates reflected without synthetic prose, so that Mcode stays faithful to the underlying agent.
28. As a keyboard user, I want horizontal tabs, roster rows, detail navigation, and back actions to be reachable and announced, so that the complete workflow works without a pointer.
29. As a screen-reader user, I want counts, selected state, status, and elapsed time exposed through accessible names and semantics, so that the glance signals have text equivalents.
30. As a developer resizing the right panel, I want the same roster and detail capabilities at every supported width, so that a narrow panel does not collapse into a weaker picker or modal.
31. As a developer switching threads, I want the panel to show only the active thread's sub-agents and restore that thread's panel state, so that work never leaks across threads.
32. As a developer reopening a thread, I want hydrated finished sub-agents to match the settled narrative, so that historical state agrees across both surfaces.
33. As a developer viewing an empty Active or Finished tab, I want a quiet state-specific message, so that I know whether nothing is running or nothing has finished.
34. As a developer, I want errors and cancellations to remain inspectable in Finished, so that failure does not erase evidence.

Implementation Decisions

• Add Subagents as a singleton tab available only when a thread is active. It follows the right panel's existing per-thread copy-on-write visibility, width, open-tab, and active-tab behavior.
• Use horizontal tabs inside the Subagents panel for Active and Finished. Do not introduce a vertical sub-navigation rail for these states.
• Derive both the narrative row and right-panel roster from the existing normalized tool-call graph. The Agent tool call remains the sub-agent boundary, and parentToolCallId remains the source of hierarchy and attribution.
• Build one pure sub-agent projection that converts live and persisted tool calls into a view model containing identity, task, status, timing, latest activity, children, final output, and nesting relationships. Both roster and detail views consume this projection.
• Treat running, completed, errored, and cancelled as explicit, mutually understandable UI states. Finished contains every terminal state.
• Preserve the existing contract that a dispatch call can complete before the delegated work completes. The view model must use the normalized sub-agent lifecycle, not the provider's dispatch acknowledgement alone.
• Scope the tab to the active thread's loaded conversation data. It must reconcile live records with hydrated narrative without duplicating a sub-agent during the live-to-settled handoff.
• Keep the current narrative chronology. The redesign changes presentation and navigation, not event ordering, persistence, or the parent turn boundary.
• Render compact narrative rows with the shared entity icon language. Use the best provider-supplied agent name, then task description, then the existing neutral fallback.
• Make a narrative sub-agent row open the right panel, select Subagents, select the correct horizontal lifecycle tab, and open the matching detail view.
• On first entry, select Active when at least one agent runs; otherwise select Finished. After entry, preserve the user's selection as counts change.
• Sort Active by most recent child or parent activity and Finished by terminal time, with stable tie-breaking so rows do not jump unpredictably.
• Show nested agents within the owning agent's detail hierarchy. Use indentation and breadcrumb context; do not add nested vertical guide rails.
• Render final output with the existing settled Markdown and bounded-output treatments. Reuse existing shell and tool-detail presentation where it remains legible in the panel.
• Show file changes only through existing trustworthy attribution. This spec does not add heuristic file ownership.
• Use tonal surface changes before borders. Reserve Filament Amber for active selection and genuine running state. Use semantic text and icon shape with every color signal.
• Use the existing narrative entrance and collapse curves for small continuity transitions. Every new animation includes a reduced-motion alternative.
• Preserve the full panel at supported narrow widths. Allow text truncation with accessible full labels, but do not replace the roster or detail with a dropdown or modal.
• Bound rendered child activity and offer an explicit expansion for longer histories, following the existing bounded narrative pattern.
• Keep all provider-specific parsing at existing boundaries. The UI consumes normalized data and shows only fields that are present.

Testing Decisions

• The highest test seam is the pure projection from the normalized tool-call graph to the sub-agent view model. Test externally meaningful status, hierarchy, ordering, counts, latest activity, live-to-settled deduplication, and bounded children there.
• Add right-panel integration coverage that feeds representative live and hydrated thread records through the real panel store. Assert Active and Finished counts, stable selection, thread switching, row selection, detail navigation, and back navigation.
• Add focused component tests for horizontal tab semantics, status text, accessible names, keyboard navigation, reduced-motion classes, empty states, and narrow-width truncation.
• Extend the existing narrative sub-agent tests to assert that selecting a delegation opens the matching panel detail without changing narrative order or nested attribution.
• Reuse the existing parallel-sub-agent nesting fixtures as prior art for parent-child attribution and concurrent agents.
• Reuse right-panel tab catalog, activity rail, panel layout, and persistence tests as prior art for singleton tab behavior and per-thread state.
• Reuse current sub-agent row tests as prior art for task labels, nested shell calls, final output, and truncation notices.
• Verify live before relying on the test suite: run multiple parallel sub-agents in the development app, observe active-to-finished transitions, inspect one agent, switch threads, resize the panel, and reopen a hydrated thread.
• Run the live path in dark and light themes, with reduced motion enabled once, and at the default and minimum supported panel widths.
• Lock the observed behavior with focused Vitest and Testing Library coverage, then run the repository-wide verification gate.
• Tests assert user-visible state and navigation. They do not assert private component structure, animation frame details, or provider mock trivia.

Out of Scope

• Changing provider protocols, spawning behavior, sub-agent prompts, or orchestration policy.
• Streaming private reasoning or narration that a provider does not expose.
• Inventing progress summaries, file ownership, or completion data.
• A cross-thread or workspace-wide sub-agent dashboard.
• Replacing the existing right-panel framework or redesigning Browser, Terminal, Review, Plan, or Files.
• Vertical Active and Finished navigation.
• New undo, review, or approval workflows for sub-agent edits.
• New persistence solely for UI state that the existing per-thread panel model can already hold.

Further Notes

The attached reference set captures four behaviors to preserve: compact identity updates in the parent narrative, an active-agent roster, a focused detail view, and a readable changed-files summary. Mcode should borrow the hierarchy and restraint, not Claude Code's exact chrome or blue accent.

When this spec is split into implementation tickets, each ticket must link back to this issue and include the relevant reference artifact or artifact comment. Visual tickets must state the exact panel width, lifecycle state, theme, and interaction they cover.