Skip to content

feat(app): Merge upstream PR #7223 - Desktop Tasks Sidebar #278

Description

@shuv1337

Context

Port the Desktop Tasks Sidebar feature from upstream PR anomalyco/opencode#7223 by @dbpolito.

This feature adds a Tasks sidebar tab to the desktop app, addressing a commonly requested feature - the ability to view and track task progress (todos) directly in the sidebar panel.

Problem

Currently, the TUI has visibility into tasks/todos, but the desktop web app lacks this feature. Users have no way to see pending or in-progress tasks without switching context.

Solution from Upstream PR

The PR introduces:

  1. Tasks tab in sidebar - Shows when there are incomplete tasks
  2. Task indicator in header - Displays task progress (e.g., "2/5 Tasks") with status indicator
  3. Renamed toggle - "Toggle Review" → "Toggle Sidebar" (more accurate)
  4. Smart sidebar behavior:
    • Shows toggle if files changed OR tasks pending
    • Auto-opens to Tasks tab when no file changes exist
    • Clicking task indicator in header opens sidebar to Tasks tab

Files to Merge

File Status Changes
packages/app/src/components/session-task-indicator.tsx New Task progress indicator for header
packages/app/src/components/session-task-panel.tsx New Full task list panel component
packages/app/src/components/session/session-header.tsx Modified Add indicator, rename toggle, add showSidebarToggle logic
packages/app/src/context/layout.tsx Modified Minor formatting (whitespace only)
packages/app/src/pages/session.tsx Modified Add tasks tab, hasIncompleteTasks logic, tab filtering

Implementation Notes

Dependencies Verified ✓

  • checklist icon - exists at packages/ui/src/components/icon.tsx:L~300
  • circle-check, dot-grid, close, check icons - all exist
  • Todo type from SDK - available

Potential Conflicts

Our fork has modifications to session.tsx (AskQuestion wizard integration) and may have minor differences in session-header.tsx. Manual conflict resolution may be needed.

Reference Code Locations

  • Current toggle button: packages/app/src/components/session/session-header.tsx:171
  • Current tabs logic: packages/app/src/pages/session.tsx:741-769

Acceptance Criteria

  • New session-task-indicator.tsx component created
  • New session-task-panel.tsx component created
  • Task indicator shows in header when incomplete tasks exist
  • Tasks tab appears in sidebar when tasks are pending
  • "Toggle review" renamed to "Toggle sidebar"
  • Sidebar toggle visible when tasks OR file changes exist
  • Clicking task indicator opens sidebar to Tasks tab
  • Task status styling correct (pending/in_progress/completed/cancelled)
  • TypeScript passes (bun turbo check)
  • Tests pass (bun turbo test)

Tasks

  • Cherry-pick or manually apply changes from upstream PR
  • Resolve any merge conflicts with fork-specific code
  • Verify all icons render correctly
  • Test task panel with various task states
  • Ensure mobile responsiveness is maintained
  • Run type checking and tests

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions