fix(task-panel): improve task states hierarchy and empty state

[StanGirard]

Summary

• improve TaskPanel task section hierarchy with explicit progress indicator
• redesign task rows with clearer visual states (Queued/Running/Done)
• improve empty state guidance for task section
• update Playground Task Panel mock to reflect the new UI states

Why

• the task list was functionally correct but visually flat, making status scanning slower
• this improves readability and state clarity without changing business behavior

Testing

• cd web && bun run test TaskPanel.test.tsx
• cd web && bun run test Playground.test.tsx
• cd web && bun run typecheck

Review provenance

• Implemented by AI agent
• Human review: no

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
companion	Ready	Preview, Comment	Mar 14, 2026 8:07pm

[greptile-apps]

Greptile Summary

This PR is a purely visual redesign of the TaskPanel task section and its Playground mock. It adds an explicit progress bar to the section header, replaces flat task rows with bordered cards carrying a status badge (Queued / Running / Done), and enriches the empty state with an icon and secondary guidance copy. No data shapes, store contracts, or WebSocket message types are touched.

Key changes:

• TasksSection (TaskPanel.tsx): computes completionPct from completedCount / tasks.length; renders a progress bar and percentage only when tasks are present; redesigns the empty state with an SVG icon and the new hint "Planned work will appear here as it streams."
• TaskRow (TaskPanel.tsx + Playground.tsx): derives statusMeta (label + badge CSS) from task status and renders a pill badge alongside the subject; removes truncate from activeForm text to allow wrapping; adds a transition-colors border to each row
• Playground mock: hardcodes the new 50% progress bar and delegates to the updated TaskRow

The three new visible states — badge labels, progress percentage, and the new empty-state secondary text — have no corresponding test cases in TaskPanel.test.tsx, which violates the Frontend Testing rule requiring coverage for behavior changes in web/src/**/*.tsx.

Confidence Score: 4/5

• Safe to merge; purely cosmetic UI changes with no business-logic or protocol impact.
• All changes are confined to Tailwind class names and JSX structure. No store actions, WebSocket events, or data types were modified. The one deduction is missing Vitest coverage for the three new visible states (badge labels, progress percentage, new empty-state copy), which is required by the Frontend Testing rule.
• web/src/components/TaskPanel.tsx — new visual states (status badges, progress %, empty-state secondary text) lack matching test cases.

Important Files Changed

Filename	Overview
web/src/components/TaskPanel.tsx	Pure UI enhancement: adds progress bar, status badges (Running/Done/Queued), and richer empty state. No logic or data-shape changes. New visual states lack test coverage in TaskPanel.test.tsx.
web/src/components/Playground.tsx	Playground mock updated to mirror the new TaskPanel UI: adds hardcoded 50% progress bar and delegates to the updated TaskRow. Changes are cosmetic and correctly reflect the new component shape.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    T[Task status] --> P{status?}
    P -->|"in_progress"| R["🟦 Running badge\nbg-cc-primary/5 border\nSpinning icon\nactiveForm text shown"]
    P -->|"completed"| D["🟩 Done badge\nopacity-70 bg-cc-hover/20\nCheckmark icon\nline-through subject"]
    P -->|"pending / other"| Q["⬜ Queued badge\nbg-cc-bg border-cc-border/70\nEmpty circle icon"]

    TL[TasksSection] --> NE{tasks.length?}
    NE -->|"= 0"| ES["Empty state\n🗂 icon + 'No tasks yet'\n+ guidance text"]
    NE -->|"> 0"| PH["Header: completed/total count\nProgress bar: completionPct%\nTask rows list"]

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: web/src/components/TaskPanel.tsx
Line: 1119-1197

Comment:
**Missing tests for new visual states**

The PR introduces three new behaviors that are entirely untested:

1. **Status badges** — `"Running"`, `"Done"`, and `"Queued"` badge labels are added to every `TaskRow`. No test in `TaskPanel.test.tsx` asserts on these strings, so a regression (e.g., renaming a label or breaking the `statusMeta` ternary) would go undetected.
2. **Progress percentage** — `completionPct` is computed and rendered in the section header (e.g., `"33%"` for 1-of-3 completed). No test verifies the correct percentage is shown.
3. **New empty-state secondary text** — `"Planned work will appear here as it streams."` appears in the redesigned empty state, but the existing test at line 507 only checks `"No tasks yet"` and not this new string.

Per the **Frontend Testing** rule, behavior changes in `web/src/**/*.tsx` require matching test coverage. Suggested additions for `TaskPanel.test.tsx`:

```tsx
it("shows status badge labels for each task state", () => {
  resetStore({
    sessions: new Map([["s1", { backend_type: "claude" }]]),
    sessionTasks: new Map([["s1", [
      { id: "t1", status: "pending",    subject: "A" },
      { id: "t2", status: "in_progress", subject: "B" },
      { id: "t3", status: "completed",  subject: "C" },
    ]]]),
  });
  render(<TaskPanel sessionId="s1" />);
  expect(screen.getByText("Queued")).toBeInTheDocument();
  expect(screen.getByText("Running")).toBeInTheDocument();
  expect(screen.getByText("Done")).toBeInTheDocument();
});

it("shows completion percentage in progress bar header", () => {
  resetStore({
    sessions: new Map([["s1", { backend_type: "claude" }]]),
    sessionTasks: new Map([["s1", [
      { id: "t1", status: "completed", subject: "Done" },
      { id: "t2", status: "pending",   subject: "Todo" },
      { id: "t3", status: "pending",   subject: "Also todo" },
    ]]]),
  });
  render(<TaskPanel sessionId="s1" />);
  expect(screen.getByText("33%")).toBeInTheDocument();
});

it("shows secondary guidance text in empty state", () => {
  resetStore({
    sessions: new Map([["s1", { backend_type: "claude" }]]),
    sessionTasks: new Map(),
  });
  render(<TaskPanel sessionId="s1" />);
  expect(screen.getByText("Planned work will appear here as it streams.")).toBeInTheDocument();
});
```

**Rule Used:** CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=666e8656-df2f-4480-b76a-67f089c8461a))

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: e8f1684}

[cubic-dev-ai]

1 issue found across 2 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="web/src/components/Playground.tsx">

<violation number="1" location="web/src/components/Playground.tsx:1305">
P3: The progress percentage/bar is hardcoded to 50%, which can disagree with the task data shown in the same mock panel.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P3: The progress percentage/bar is hardcoded to 50%, which can disagree with the task data shown in the same mock panel.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At web/src/components/Playground.tsx, line 1305:

<comment>The progress percentage/bar is hardcoded to 50%, which can disagree with the task data shown in the same mock panel.</comment>

<file context>
@@ -1288,16 +1288,34 @@ export function Playground() {
+                  <span className="text-cc-muted uppercase tracking-wider">
+                    Progress
+                  </span>
+                  <span className="text-cc-fg tabular-nums font-medium">
+                    50%
+                  </span>
</file context>