Task Progress Bar

The task progress bar shows task completion progress in the sidebar conversation row. Users can see at a glance which conversations have active task lists and how far along they are.

---

How It Works

When a conversation has an active task list (created by the AI during a session), a progress indicator appears in the sidebar row:

• Background gradient: Fills left-to-right based on completion percentage
• Progress badge: Shows "X/Y" completed tasks
• Auto-hide: Disappears when all tasks are completed

---

Components

useTaskProgress Hook

File: src/hooks/use-task-progress.ts

Returns progress state for a conversation:

interface TaskProgress {
  completed: number   // Number of completed/errored tasks
  total: number       // Total task count
  percentage: number  // 0-100
  hasTaskList: boolean // false when all tasks complete or no task list
}

A task is counted as "completed" if its status is completed or error.

Progress hides (hasTaskList: false) when:

• All tasks are complete
• The task list is archived (completedAt is set)
• No task list exists for the conversation

ConversationRow

File: src/components/sidebar/ConversationRow.tsx

Uses the useTaskProgress hook and applies:

• A .thread-row-with-progress CSS class with a gradient background
• An inline badge showing the completed/total count

getTaskListForConversation()

File: src/hooks/use-conversation-side-panel.tsx

Enables looking up a conversation's task list without switching to it.

CSS

File: src/styles/components/layout.css

.thread-row-with-progress {
  --progress-bar-color: #3b82f6;
  background-image: linear-gradient(
    to right,
    var(--progress-bar-color) 50%,
    transparent 50%
  );
}

The percentage in the gradient is set dynamically via inline style.

---

Customizing the Color

Change --progress-bar-color in the CSS:

.thread-row-with-progress {
  --progress-bar-color: #10b981; /* green */
}

---

Accessibility

• Progress badge includes an aria-label with the task count
• When complete, the progress elements are removed and normal screen reader flow resumes
• The progress indicator does not interfere with keyboard navigation

---

Performance

• useTaskProgress is memoized and only re-renders when progress data changes
• Progress rendering uses CSS gradients (GPU-accelerated)
• No extra DOM mutations -- progress is CSS-only

---

Related

• User Guide -- Task lists in context
• Developer Guide -- Architecture overview