# Chat Task Timeline Consistency Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Render the active Task's canonical timeline in the chat progress sidebar and hide it when no active Task exists.

**Architecture:** Extract task-scoped process filtering into a shared frontend helper, use it in both Task detail and chat, and make the chat sidebar a responsive wrapper around the existing `TaskTimeline` component.

**Tech Stack:** React, Next.js, TypeScript, Vitest

---

### Task 1: Extract Shared Task Process Selection

**Files:**
- Create: `app-instance/frontend/lib/task-process.ts`
- Create: `app-instance/frontend/lib/task-process.test.ts`
- Modify: `app-instance/frontend/app/(app)/tasks/[taskId]/page.tsx`

- [ ] Write failing tests for merging persisted task process data with matching live process data.
- [ ] Implement `selectTaskProcess()` returning task-scoped runs, events, and artifacts.
- [ ] Replace the Task detail page's local filtering with the shared helper.
- [ ] Run:

```bash
npm test -- --run lib/task-process.test.ts lib/task-timeline.test.ts
```

### Task 2: Replace Chat Progress View with Task Timeline

**Files:**
- Modify: `app-instance/frontend/components/chat-workbench/CurrentSessionProgressSidebar.tsx`
- Modify: `app-instance/frontend/app/(app)/page.tsx`

- [ ] Load full `BackendTask` detail whenever `activeTask` exists.
- [ ] Clear full Task detail whenever active Task becomes `null` or the session changes.
- [ ] Build chat timeline cards using `selectTaskProcess()` and `buildTaskTimelineCards()`.
- [ ] Change `CurrentSessionProgressSidebar` to accept timeline cards and render `TaskTimeline` without acceptance controls.
- [ ] Remove the chat page's use of `buildSessionProgressView()`.

### Task 3: Add Visibility and Consistency Tests

**Files:**
- Modify: `app-instance/frontend/lib/task-process.test.ts`
- Modify: `app-instance/frontend/lib/task-timeline.test.ts`
- Delete if unused: `app-instance/frontend/lib/session-progress.test.ts`
- Delete if unused: `app-instance/frontend/lib/session-progress.ts`

- [ ] Cover empty/no-active input behavior in the shared helper.
- [ ] Confirm the same Task/process input creates the same timeline cards on both surfaces.
- [ ] Remove the obsolete session-progress builder and tests if no imports remain.
- [ ] Run:

```bash
npm test
```

### Task 4: Frontend Verification

**Files:**
- Verify only

- [ ] Run:

```bash
npm run typecheck
npm run build
```

- [ ] Validate the rendered chat flow with Playwright because the Browser plugin is not available:

```text
chat page with active Task -> open current-session progress -> same timeline cards as Task detail
Task closes -> current-session progress disappears
```