cc-sidebar 0.1.7 → 0.1.8

package/README.md

@@ -90,11 +90,37 @@ Data is stored in `~/.claude-sidebar/`:
 
 ## Claude Code Setup
 
-Two optional integrations to make Claude aware of the sidebar:
+Three optional integrations to make Claude aware of the sidebar:
 
-### 1. Auto-completion (Recommended)
+### 1. TodoWrite Sync Hook (Recommended)
 
-Add this to your `~/.claude/CLAUDE.md` so Claude automatically marks sidebar tasks as done:
+This hook syncs Claude's TodoWrite output to the sidebar, so you can see Claude's progress in real-time.
+
+Add to your `~/.claude/settings.json`:
+
+```json
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "TodoWrite",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "bun ~/.bun/install/global/node_modules/cc-sidebar/src/sync-todos.ts"
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+If you already have other hooks, merge the `PostToolUse` array with your existing hooks.
+
+### 2. Auto-completion (Optional)
+
+Add this to your `~/.claude/CLAUDE.md` so Claude automatically marks sidebar tasks as done when it finishes work:
 
 ```markdown
 ## Sidebar Integration
@@ -122,7 +148,7 @@ Keep it simple - if no clear match, don't move anything. User can manually mark
 ```
 ```
 
-### 2. Install Skills (Recommended)
+### 3. Install Skills
 
 cc-sidebar includes skills that integrate with Claude Code:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc-sidebar",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Visual sidebar for managing todos, tasks, and context alongside Claude Code",
   "author": "Tyler Nishida",
   "license": "MIT",

package/skills/clarify/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: clarify
 description: |
-  Clarify tasks through conversation - works for new ideas or existing sidebar tasks.
+  Clarify tasks through deep conversation - works for new ideas or existing sidebar tasks.
 
   Use when: (1) You have thoughts/ideas that need clarification before becoming actionable,
   (2) You want to clarify a single task through conversation,
@@ -9,12 +9,12 @@ description: |
 
   Triggers: "/clarify", "clarify this", "let me explain this task".
 
-  Requires: Claude Code sidebar for todo integration, Atomic Plans for plan output.
+  Requires: Claude Code sidebar for todo integration.
 ---
 
 # Clarify Skill
 
-Clarify tasks through structured conversation. Works for both new ideas (creates todos) and existing sidebar tasks (updates them).
+Clarify tasks through structured, in-depth conversation. Creates a **spec for each todo** (not a shared plan).
 
 ## Invocation
 
@@ -24,111 +24,65 @@ Clarify tasks through structured conversation. Works for both new ideas (creates
 
 ## Process
 
-Follow these steps in order:
-
 ### 1. Detect Mode
 
 Check if invoked with `--task-id`:
 - **With task ID**: Updating an existing sidebar task
 - **Without task ID**: Creating new todo(s) from scratch
 
-### 2. Locate Configuration
-
-Check the project's CLAUDE.md for the Atomic Plans folder path. Look for a section like:
-
-```markdown
-## Clarify Configuration
-Plan folder: /path/to/plans
-```
-
-Or check if Atomic Plans is already configured:
-
-```markdown
-## Project Planning
-/atomic-plans /path/to/folder
-```
-
-**If no path is found:**
-1. Ask the user: "Where should I save plans for this project?"
-2. After they provide a path, ask: "Would you like me to add this to CLAUDE.md so I remember next time?"
-3. If yes, append the configuration to CLAUDE.md
-
-### 3. Interview Phase
+### 2. Interview Phase
 
-The goal is to fully understand the task(s) through conversation.
+**Interview me in detail using AskUserQuestion about literally anything:**
+- Technical implementation details
+- UI & UX considerations
+- Concerns and risks
+- Tradeoffs between approaches
+- Edge cases and error handling
+- Dependencies and blockers
+- Success criteria
 
-**IMPORTANT: Never short-circuit the process.** Whether the user provides one clear task or a chaotic mess of ideas, always interview to clarify. A "single clear task" still benefits from clarification - edge cases, implementation approach, constraints, etc.
+**CRITICAL RULES:**
+- Make sure questions are NOT obvious - don't ask things that are clear from context
+- Be very in-depth - continue interviewing continually until complete
+- Multiple rounds of questions are expected and encouraged
+- Always end with "Anything else I should know?" as a final question
 
-**If the user provided text with the command** (`/clarify [text]`):
-- Skip the opening question - they already told you what's on their mind
-- Go straight to AskUserQuestion to clarify specifics:
-  - Ambiguous parts that need clarification
-  - Implementation approach (if relevant)
-  - Edge cases or constraints
-  - Missing context: priorities, dependencies
-  - Anything else you need to fully understand the task(s)
+**If the user provided text** (`/clarify [text]`):
+- Skip opening invitation - go straight to clarifying questions
 
 **If no text was provided** (`/clarify` alone):
-- Start with a plain text invitation (NOT AskUserQuestion):
-
-  "What's on your mind? Tell me everything - tasks, concerns, ideas,
-  whatever's floating around. I'll help clarify and organize it."
-
-- Let the user ramble freely in their response
-- THEN use AskUserQuestion to clarify specifics about what they said
-
-**Interview guidelines:**
-- Don't ask obvious questions - if something is clear from the task description, skip it
-- Be thorough - keep interviewing until you have complete clarity
-- Always include "Anything else I should know?" as a final question
+- Start with: "What's on your mind? Tell me everything - tasks, concerns, ideas, whatever's floating around."
+- Let them ramble, then ask clarifying questions
 
-**Key questions to consider** (use AskUserQuestion for these):
-- What's the most important thing here?
-- Are there dependencies between these tasks?
-- What constraints should I know about?
-- Is there anything blocking progress on any of these?
+### 3. Write Spec for Each Todo
 
-**Scope filtering:**
-If the user mentions things unrelated to the current project (personal tasks, other projects), ask:
-"Some of this seems unrelated to [current project]. Should I include those tasks anyway, or focus only on [project]-related work?"
+After interviewing, create a **spec for each todo**. The spec is stored directly on the task (in the `spec` field), not in a separate plan file.
 
-### 4. Create Plan
-
-Create a new plan in the Atomic Plans folder with:
-
-**Filename:** `NNN-clarify-[topic].md` where NNN is the next number in sequence.
-
-**Content:**
-```markdown
----
-plan: NNN
-title: [Topic]
-state: active
-created: YYYY-MM-DD
-updated: YYYY-MM-DD
----
+**Spec format:**
+```
+## [Task Title]
 
-# [Topic]
+### What
+[Clear description of what needs to be done]
 
-## Intent
-[Summary of what the user wants to accomplish]
+### Why
+[The purpose/motivation]
 
-## Specs
-[Detailed specifications gathered during interview]
+### How
+[Implementation approach based on interview]
 
-## Context
-[Key decisions, constraints, and context gathered during interview]
+### Acceptance Criteria
+- [ ] Criterion 1
+- [ ] Criterion 2
 
-## Next
-- [ ] Execute the task(s)
+### Notes
+[Any constraints, risks, or considerations from interview]
 ```
 
-### 5. Update or Create Todos
+### 4. Update or Create Todos
 
 **If updating existing task** (has `--task-id`):
 
-Update the existing task in the sidebar:
-
 ```bash
 node << 'SCRIPT'
 const fs = require('fs');
@@ -141,30 +95,28 @@ let tasks = JSON.parse(fs.readFileSync(tasksPath, 'utf-8'));
 const task = tasks.find(t => t.id === 'TASK_ID_HERE');  // REPLACE with actual task ID
 if (task) {
   task.clarified = true;
-  task.planPath = 'PLAN_FILENAME.md';  // REPLACE with actual plan filename
+  task.section = 'clarified';
+  task.spec = `SPEC_CONTENT_HERE`;  // REPLACE with actual spec
   fs.writeFileSync(tasksPath, JSON.stringify(tasks, null, 2));
-  console.log('Task clarified and linked to plan');
+  console.log('Task clarified with spec');
 }
 SCRIPT
 ```
 
 **If creating new todos** (no `--task-id`):
 
-Extract discrete, actionable tasks from the interview. Each todo should be:
+Extract discrete, actionable tasks. Each todo should be:
 - **Specific**: Clear what needs to be done
 - **Actionable**: Can be worked on independently
-- **Scoped**: Relevant to the current project (unless user said otherwise)
-
-**Act as a staff engineer to prioritize:**
-Assign each task a numeric priority (1 = most important). Consider:
-- **Dependencies**: Blockers come first
-- **Urgency**: Bugs, deadlines, user-facing issues
-- **Impact**: High-value features over nice-to-haves
-- **Effort**: Quick wins can be prioritized to build momentum
+- **Has a spec**: Detailed specification from interview
 
-Mark the top 3 most important tasks as "recommended" (shown with star in sidebar).
+**Prioritization (act as staff engineer):**
+- Dependencies first (blockers)
+- Urgency (bugs, deadlines)
+- Impact (high-value over nice-to-have)
+- Quick wins for momentum
 
-Write todos to the **project-specific** tasks file:
+Mark top 3 as "recommended".
 
 ```bash
 node << 'SCRIPT'
@@ -177,144 +129,119 @@ const hash = crypto.createHash('sha256').update(process.cwd()).digest('hex').sli
 const projectDir = path.join(sidebarDir, 'projects', hash);
 const tasksPath = path.join(projectDir, 'tasks.json');
 
-// Ensure directory exists
 fs.mkdirSync(projectDir, { recursive: true });
 
-// Read existing todos
 let existing = [];
 try { existing = JSON.parse(fs.readFileSync(tasksPath, 'utf-8')); } catch {}
 
-// Plan filename (just the filename, not full path)
-const planPath = "NNN-clarify-topic.md";  // REPLACE with actual plan filename
-
-// New todos - REPLACE THIS ARRAY with extracted tasks
-// Each task needs: content, priority (1=highest), recommended (true for top 3)
+// REPLACE with extracted tasks - each has its own spec
 const newTodos = [
-  { content: "Task 1 here", priority: 1, recommended: true },
-  { content: "Task 2 here", priority: 2, recommended: true },
-  { content: "Task 3 here", priority: 3, recommended: true },
-  { content: "Task 4 here", priority: 4, recommended: false }
+  {
+    content: "Task 1 here",
+    priority: 1,
+    recommended: true,
+    spec: `## Task 1\n\n### What\n...\n\n### Why\n...\n\n### How\n...\n\n### Acceptance Criteria\n- [ ] ...`
+  },
+  // ... more tasks
 ].map(task => ({
   id: crypto.randomUUID(),
   content: task.content,
   createdAt: new Date().toISOString(),
-  clarified: true,           // Clarify IS the clarification process
-  priority: task.priority,   // Numeric priority (1 = most important)
-  recommended: task.recommended,  // Top 3 get star indicator
-  planPath: planPath         // Links task to the plan file
+  section: 'clarified',
+  clarified: true,
+  priority: task.priority,
+  recommended: task.recommended,
+  spec: task.spec
 }));
 
-// Append and write
 const combined = [...existing, ...newTodos];
 fs.writeFileSync(tasksPath, JSON.stringify(combined, null, 2));
-console.log('Added ' + newTodos.length + ' todos to sidebar');
+console.log('Added ' + newTodos.length + ' clarified todos to sidebar');
 SCRIPT
 ```
 
-### 6. Present and Prompt
-
-After creating/updating todos and plan:
-
-1. Show a summary of what was created/updated
-2. Ask: **"Execute this task now, or save for later?"**
-   - If execute → work on the task immediately
-   - If save → confirm the task is clarified and stop
+### 5. Present and Prompt
 
-**Example for existing task:**
-```
-Clarified your task and created plan 007-auth-refactor.md
+After creating/updating todos:
 
-Task: Refactor authentication module
-Specs: JWT-based, 24hr expiry, refresh tokens...
+1. Show summary of what was clarified
+2. Show the spec for each task
+3. Ask: **"Execute this task now, or save for later?"**
+   - Execute → start working immediately
+   - Save → confirm clarified and stop
 
-Execute this task now, or save for later?
+**Example output:**
 ```
+Clarified 2 todos:
 
-**Example for new tasks:**
-```
-Created 3 todos in your sidebar and plan 008-api-improvements.md
+1. ★ Implement user authentication
+   Spec: JWT-based auth with 24hr expiry, refresh tokens...
 
-Your todos:
-1. Add rate limiting to API endpoints
-2. Implement request validation
-3. Add API documentation
+2. ★ Add rate limiting to API
+   Spec: 100 req/min per user, 429 response, Redis backend...
 
 Execute the first task now, or save for later?
 ```
 
-## Relationship to Other Features
-
-| Feature | Purpose | When to Use |
-|---------|---------|-------------|
-| `/clarify` | Interview and clarify task(s) | When you need to think through a task before doing it |
-| Sidebar `c` key | Invokes `/clarify --task-id` | Quick way to clarify a queued task |
-| `/prioritize` | Re-evaluate and reorder all tasks | When context changes or you want fresh prioritization |
-| Ralph-loop | Batch process todos autonomously | After clarifying, to work through all todos |
-
-## Example Sessions
-
-### From Sidebar (existing task)
-```
-[User presses 'c' on task "Add user authentication"]
-
-Sidebar sends: /clarify --task-id abc123 Add user authentication
-
-Claude: [Uses AskUserQuestion]
-- What auth method? (JWT, session, OAuth?)
-- Any specific security requirements?
-- Which routes need protection?
+## Relationship to Other Skills
 
-User: [Answers]
+| Skill | Purpose |
+|-------|---------|
+| `/clarify` | Interview and write spec for task(s) |
+| `/prioritize` | Re-evaluate all tasks as staff engineer |
+| Atomic Plans | Track execution progress when working on task |
 
-Claude: [Creates plan, updates task with clarified=true]
+**Flow:**
+1. **Clarify** creates specs (the "what")
+2. **Prioritize** decides what's next
+3. **Atomic Plans** tracks execution (the "how/progress")
 
-Clarified your task and created plan 005-user-auth.md
+## Example Session
 
-Execute this task now, or save for later?
 ```
+User: /clarify I need to add dark mode support
 
-### From Chat (new task)
-```
-User: /clarify I need to add shift+enter support for multiline input
+Claude: [AskUserQuestion]
+- Should this affect the entire app or just certain components?
+- Do you want system preference detection (prefers-color-scheme)?
+- Are there specific colors/themes you want, or should I design them?
+- Should the preference persist across sessions (localStorage)?
 
-Claude: [Uses AskUserQuestion]
-- Which input modes need this? (adding new todos, editing existing, both?)
-- Should Enter still submit, with Shift+Enter for newlines?
+User: [Answers each question]
 
-User: [Answers]
-
-Claude: [Creates todo, writes to sidebar, creates plan]
-
-Created 1 todo in your sidebar and plan 009-multiline-input.md
-
-Execute this task now, or save for later?
-```
+Claude: [AskUserQuestion - follow-up]
+- For the color palette, do you have brand colors to work with?
+- Should transitions be animated when switching themes?
+- Any components that should NOT support dark mode?
+- Anything else I should know?
 
-### From Chat (multiple tasks)
-```
-User: /clarify
+User: [Answers]
 
-Claude: What's on your mind? Tell me everything.
+Claude: [Creates todo with spec]
 
-User: ugh so much. the auth is a mess, we're using like 3 different
-patterns. also need to update the docs. oh and there's that bug with
-the session timeout.
+Clarified 1 todo:
 
-Claude: [Uses AskUserQuestion]
-- Which auth pattern should we standardize on?
-- Is the session timeout bug blocking anything?
+★ Add dark mode support
+  Spec:
+  ## Dark Mode Support
 
-User: [Answers]
+  ### What
+  Add system-wide dark mode toggle with OS preference detection
 
-Claude: [Creates todos, writes to sidebar, creates plan]
+  ### Why
+  User requested for better nighttime usability
 
-Created 4 todos in your sidebar and plan 010-auth-cleanup.md
+  ### How
+  - CSS custom properties for colors
+  - React context for theme state
+  - localStorage for persistence
+  - prefers-color-scheme media query for initial
 
-Your todos:
-1. Standardize auth on JWT pattern
-2. Fix session timeout bug
-3. Update auth documentation
-4. Remove deprecated OAuth1 code
+  ### Acceptance Criteria
+  - [ ] Toggle switches between light/dark
+  - [ ] Respects OS preference on first visit
+  - [ ] Persists choice in localStorage
+  - [ ] Smooth transition animation
 
-Execute the first task now, or save for later?
+Execute this task now, or save for later?
 ```

package/skills/prioritize/SKILL.md

@@ -51,6 +51,8 @@ As a staff engineer, evaluate each task considering:
 - **Impact**: High-value features over nice-to-haves.
 - **Effort**: Quick wins can build momentum; large tasks may need breakdown.
 - **Context**: If user provided context, weight it heavily.
+- **Specs**: Read the `spec` field of clarified tasks for detailed requirements.
+- **Section**: Clarified tasks (with specs) are generally ready to execute.
 
 Assign each task:
 - `priority`: Numeric (1 = most important, higher = less important)
@@ -124,9 +126,18 @@ Other tasks:
 Tasks have been re-prioritized in your sidebar.
 ```
 
+## Skill Flow
+
+This skill is part of a chain:
+
+1. **Clarify** → Creates specs for each task (the "what")
+2. **Prioritize** → Staff engineer decides what's next (this skill)
+3. **Atomic Plans** → Track execution progress when working
+
 ## Notes
 
 - This skill reads and modifies the sidebar's tasks.json directly
-- It preserves all existing task fields (id, content, clarified, planPath, etc.)
+- It preserves all existing task fields (id, content, clarified, spec, etc.)
 - Only updates `priority` and `recommended` fields
 - Can be run anytime - safe to run multiple times
+- Read specs to understand task complexity when prioritizing

package/src/components/RawSidebar.tsx

@@ -13,6 +13,7 @@ import {
   updateTask,
   removeTask,
   markTaskClarified,
+  setTaskSection,
   getActiveTask,
   setActiveTask,
   activateTask,
@@ -21,6 +22,7 @@ import {
   removeFromDone,
   returnToActive,
   type Task,
+  type TaskSection,
   type ActiveTask,
   type DoneTask,
   type StatuslineData,
@@ -110,15 +112,16 @@ function wrapText(text: string, maxWidth: number): string[] {
   return lines.length > 0 ? lines : [''];
 }
 
+type SidebarSection = "inbox" | "clarified" | "in_progress" | "review";
+
 interface State {
   tasks: Task[];
   activeTask: ActiveTask | null;
   doneTasks: DoneTask[];
   claudeTodos: ClaudeTodo[];
   statusline: StatuslineData | null;
-  selectedSection: "queue" | "done";
+  selectedSection: SidebarSection;
   selectedIndex: number;
-  doneSelectedIndex: number;
   inputMode: InputMode;
   editingTaskId: string | null;
   inputBuffer: string;
@@ -132,9 +135,8 @@ export class RawSidebar {
     doneTasks: [],
     claudeTodos: [],
     statusline: null,
-    selectedSection: "queue",
+    selectedSection: "inbox",
     selectedIndex: 0,
-    doneSelectedIndex: 0,
     inputMode: "none",
     editingTaskId: null,
     inputBuffer: "",
@@ -169,6 +171,44 @@ export class RawSidebar {
     });
   }
 
+  // Get tasks for a specific section
+  private getTasksForSection(section: "inbox" | "clarified"): Task[] {
+    return this.getSortedTasks().filter(t => {
+      const taskSection = t.section || (t.clarified ? "clarified" : "inbox");
+      return taskSection === section;
+    });
+  }
+
+  // Get items for the currently selected section
+  private getCurrentSectionItems(): { type: "task" | "todo" | "done"; item: Task | ClaudeTodo | DoneTask }[] {
+    const { selectedSection, claudeTodos, doneTasks } = this.state;
+
+    if (selectedSection === "inbox") {
+      return this.getTasksForSection("inbox").map(t => ({ type: "task" as const, item: t }));
+    }
+    if (selectedSection === "clarified") {
+      return this.getTasksForSection("clarified").map(t => ({ type: "task" as const, item: t }));
+    }
+    if (selectedSection === "in_progress") {
+      return claudeTodos.map(t => ({ type: "todo" as const, item: t }));
+    }
+    if (selectedSection === "review") {
+      return doneTasks.map(t => ({ type: "done" as const, item: t }));
+    }
+    return [];
+  }
+
+  // Get the ordered list of non-empty sections for navigation
+  private getNavigableSections(): SidebarSection[] {
+    const sections: SidebarSection[] = [];
+    if (this.getTasksForSection("inbox").length > 0) sections.push("inbox");
+    if (this.getTasksForSection("clarified").length > 0) sections.push("clarified");
+    // in_progress always navigable (shows active task or Claude todos)
+    sections.push("in_progress");
+    if (this.state.doneTasks.length > 0) sections.push("review");
+    return sections;
+  }
+
   constructor(onClose?: () => void) {
     this.width = process.stdout.columns || 50;
     this.height = process.stdout.rows || 40;
@@ -594,124 +634,86 @@ export class RawSidebar {
       process.exit(0);
     }
 
-    // Up arrow or k (navigates queue and done sections)
+    // Up arrow or k - navigate within section or to previous section
     if (str === '\x1b[A' || str === '\x1bOA' || str === 'k') {
-      const { selectedSection, selectedIndex, doneSelectedIndex, tasks, doneTasks } = this.state;
-
-      if (selectedSection === "queue") {
-        if (tasks.length === 0) {
-          // No queue items, try to go to done
-          if (doneTasks.length > 0) {
-            this.state.selectedSection = "done";
-            this.state.doneSelectedIndex = doneTasks.length - 1;
-          }
-        } else if (selectedIndex > 0) {
-          this.state.selectedIndex--;
-        } else {
-          // At top of queue, wrap to bottom of done (or bottom of queue)
-          if (doneTasks.length > 0) {
-            this.state.selectedSection = "done";
-            this.state.doneSelectedIndex = Math.min(doneTasks.length - 1, 4); // Max 5 shown
-          } else {
-            this.state.selectedIndex = tasks.length - 1;
-          }
-        }
+      const items = this.getCurrentSectionItems();
+      const { selectedIndex } = this.state;
+
+      if (selectedIndex > 0) {
+        this.state.selectedIndex--;
       } else {
-        // In done section
-        if (doneSelectedIndex > 0) {
-          this.state.doneSelectedIndex--;
-        } else {
-          // At top of done, wrap to bottom of queue (or bottom of done)
-          if (tasks.length > 0) {
-            this.state.selectedSection = "queue";
-            this.state.selectedIndex = tasks.length - 1;
-          } else {
-            this.state.doneSelectedIndex = Math.min(doneTasks.length - 1, 4);
-          }
+        // Move to previous section
+        const sections = this.getNavigableSections();
+        const currentIdx = sections.indexOf(this.state.selectedSection);
+        if (currentIdx > 0) {
+          const prevSection = sections[currentIdx - 1];
+          this.state.selectedSection = prevSection!;
+          // Select last item in previous section
+          const prevItems = this.getCurrentSectionItems();
+          this.state.selectedIndex = Math.max(0, prevItems.length - 1);
         }
       }
       this.render();
       return;
     }
 
-    // Down arrow or j (navigates queue and done sections)
+    // Down arrow or j - navigate within section or to next section
     if (str === '\x1b[B' || str === '\x1bOB' || str === 'j') {
-      const { selectedSection, selectedIndex, doneSelectedIndex, tasks, doneTasks } = this.state;
-
-      if (selectedSection === "queue") {
-        if (tasks.length === 0) {
-          // No queue items, try to go to done
-          if (doneTasks.length > 0) {
-            this.state.selectedSection = "done";
-            this.state.doneSelectedIndex = 0;
-          }
-        } else if (selectedIndex < tasks.length - 1) {
-          this.state.selectedIndex++;
-        } else {
-          // At bottom of queue, wrap to top of done (or top of queue)
-          if (doneTasks.length > 0) {
-            this.state.selectedSection = "done";
-            this.state.doneSelectedIndex = 0;
-          } else {
-            this.state.selectedIndex = 0;
-          }
-        }
+      const items = this.getCurrentSectionItems();
+      const { selectedIndex } = this.state;
+
+      if (selectedIndex < items.length - 1) {
+        this.state.selectedIndex++;
       } else {
-        // In done section
-        const maxDoneIndex = Math.min(doneTasks.length - 1, 4); // Max 5 shown
-        if (doneSelectedIndex < maxDoneIndex) {
-          this.state.doneSelectedIndex++;
-        } else {
-          // At bottom of done, wrap to top of queue (or top of done)
-          if (tasks.length > 0) {
-            this.state.selectedSection = "queue";
-            this.state.selectedIndex = 0;
-          } else {
-            this.state.doneSelectedIndex = 0;
-          }
+        // Move to next section
+        const sections = this.getNavigableSections();
+        const currentIdx = sections.indexOf(this.state.selectedSection);
+        if (currentIdx < sections.length - 1) {
+          const nextSection = sections[currentIdx + 1];
+          this.state.selectedSection = nextSection!;
+          this.state.selectedIndex = 0;
         }
       }
       this.render();
       return;
     }
 
-    // Number keys 1-9 (select queue item, switches to queue section)
-    if (/^[1-9]$/.test(str)) {
-      const index = parseInt(str, 10) - 1;
-      const sortedTasks = this.getSortedTasks();
-      if (index < sortedTasks.length) {
-        this.state.selectedSection = "queue";
-        this.state.selectedIndex = index;
-        this.render();
-      }
+    // Tab - switch between sections
+    if (str === '\t') {
+      const sections = this.getNavigableSections();
+      const currentIdx = sections.indexOf(this.state.selectedSection);
+      const nextIdx = (currentIdx + 1) % sections.length;
+      this.state.selectedSection = sections[nextIdx]!;
+      this.state.selectedIndex = 0;
+      this.render();
       return;
     }
 
-    // Enter - send task to Claude (only works in queue section)
+    // Enter - send task to Claude (works in inbox and clarified sections)
     if (str === '\r' || str === '\n') {
-      if (this.state.selectedSection !== "queue") return;
-      const sortedTasks = this.getSortedTasks();
-      const task = sortedTasks[this.state.selectedIndex];
+      const { selectedSection, selectedIndex } = this.state;
+      if (selectedSection !== "inbox" && selectedSection !== "clarified") return;
+
+      const tasks = this.getTasksForSection(selectedSection);
+      const task = tasks[selectedIndex];
       if (task) {
         // Send to Claude and move to active
         sendToClaudePane(task.content);
         activateTask(task.id);
         this.loadData();
-        this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+        this.state.selectedIndex = Math.max(0, selectedIndex - 1);
         this.render();
         focusClaudePane();
       }
       return;
     }
 
-    // Ctrl+Enter or 'c' - clarify mode (only works in queue section)
-    // CSI u format: \x1b[13;5u (iTerm2), 'c' as fallback
+    // 'c' - clarify (only works in inbox section)
     if (str === '\x1b[13;5u' || str === '\x1b\r' || str === '\x1b\n' || str === 'c') {
-      if (this.state.selectedSection !== "queue") return;
-      const sortedTasks = this.getSortedTasks();
-      const task = sortedTasks[this.state.selectedIndex];
+      if (this.state.selectedSection !== "inbox") return;
+      const tasks = this.getTasksForSection("inbox");
+      const task = tasks[this.state.selectedIndex];
       if (task) {
-        // Invoke the clarify skill with task ID
         sendToClaudePane(`/clarify --task-id ${task.id} ${task.content}`);
         this.render();
         focusClaudePane();
@@ -719,24 +721,26 @@ export class RawSidebar {
       return;
     }
 
-    // 'a' - add task (always switches to queue section)
+    // 'a' - add task (adds to inbox)
     if (str === 'a') {
       this.pausePolling();
-      this.state.selectedSection = "queue";
+      this.state.selectedSection = "inbox";
       this.state.inputMode = "add";
       this.state.inputBuffer = "";
       this.state.inputCursor = 0;
-      this.prevInputLineCount = 1; // Start with 1 empty line
+      this.prevInputLineCount = 1;
       this.render();
       this.setupInputCursor();
       return;
     }
 
-    // 'e' - edit task (only works in queue section)
+    // 'e' - edit task (only in inbox/clarified sections)
     if (str === 'e') {
-      if (this.state.selectedSection !== "queue") return;
-      const sortedTasks = this.getSortedTasks();
-      const task = sortedTasks[this.state.selectedIndex];
+      const { selectedSection, selectedIndex } = this.state;
+      if (selectedSection !== "inbox" && selectedSection !== "clarified") return;
+
+      const tasks = this.getTasksForSection(selectedSection);
+      const task = tasks[selectedIndex];
       if (task) {
         this.pausePolling();
         this.state.inputMode = "edit";
@@ -751,33 +755,31 @@ export class RawSidebar {
       return;
     }
 
-    // 'd' - delete from queue, or confirm done in Review section
+    // 'd' - delete from inbox/clarified, or confirm done in review
     if (str === 'd') {
-      if (this.state.selectedSection === "queue") {
-        const sortedTasks = this.getSortedTasks();
-        const task = sortedTasks[this.state.selectedIndex];
+      const { selectedSection, selectedIndex } = this.state;
+
+      if (selectedSection === "inbox" || selectedSection === "clarified") {
+        const tasks = this.getTasksForSection(selectedSection);
+        const task = tasks[selectedIndex];
         if (task) {
           removeTask(task.id);
           this.state.tasks = getTasks();
-          this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+          this.state.selectedIndex = Math.max(0, selectedIndex - 1);
           this.render();
         }
-      } else {
-        // Confirm done - remove from Review section
-        const task = this.state.doneTasks[this.state.doneSelectedIndex];
+      } else if (selectedSection === "review") {
+        const task = this.state.doneTasks[selectedIndex];
         if (task) {
           removeFromDone(task.id);
           this.state.doneTasks = getRecentlyDone();
-          // Adjust selection if needed
           if (this.state.doneTasks.length === 0) {
-            // No more review tasks, go back to queue
-            this.state.selectedSection = "queue";
-            this.state.selectedIndex = Math.max(0, this.state.tasks.length - 1);
+            // Move to another section
+            const sections = this.getNavigableSections();
+            this.state.selectedSection = sections[0] || "inbox";
+            this.state.selectedIndex = 0;
           } else {
-            this.state.doneSelectedIndex = Math.min(
-              this.state.doneSelectedIndex,
-              this.state.doneTasks.length - 1
-            );
+            this.state.selectedIndex = Math.min(selectedIndex, this.state.doneTasks.length - 1);
           }
           this.render();
         }
@@ -785,21 +787,21 @@ export class RawSidebar {
       return;
     }
 
-    // 'r' - return Review item to In Progress (not done yet)
+    // 'r' - return review item to in_progress
     if (str === 'r') {
-      if (this.state.selectedSection === "done") {
-        const task = this.state.doneTasks[this.state.doneSelectedIndex];
+      if (this.state.selectedSection === "review") {
+        const task = this.state.doneTasks[this.state.selectedIndex];
         if (task) {
           returnToActive(task.id);
           this.loadData();
-          // Adjust selection if needed
           if (this.state.doneTasks.length === 0) {
-            this.state.selectedSection = "queue";
-            this.state.selectedIndex = Math.max(0, this.state.tasks.length - 1);
+            const sections = this.getNavigableSections();
+            this.state.selectedSection = sections[0] || "inbox";
+            this.state.selectedIndex = 0;
           } else {
-            this.state.doneSelectedIndex = Math.min(
-              this.state.doneSelectedIndex,
-              Math.max(0, this.state.doneTasks.length - 1)
+            this.state.selectedIndex = Math.min(
+              this.state.selectedIndex,
+              this.state.doneTasks.length - 1
             );
           }
           this.render();
@@ -904,7 +906,7 @@ export class RawSidebar {
     if (!this.running) return;
 
     const lines: string[] = [];
-    const { tasks, selectedIndex, inputMode, editingTaskId, inputBuffer, inputCursor } = this.state;
+    const { inputMode, editingTaskId, inputBuffer, inputCursor } = this.state;
 
     // Use dimmed colors when unfocused
     const bg = this.focused ? ansi.bgGray : ansi.dimBg;
@@ -936,120 +938,156 @@ export class RawSidebar {
     lines.push(`${bg}  ${text}${headerContent}${ansi.clearToEnd}${ansi.reset}`);
     lines.push(bgLine); // Space after header
 
-    // In Progress section - combines sidebar active task + Claude's TodoWrite items
-    const { claudeTodos } = this.state;
-    const { activeTask, doneTasks } = this.state;
-    const activeTodos = claudeTodos.filter(t => t.status !== "completed");
     // Content width: total width - 2 (margin) - 4 (indicator like "[ ] ") - 2 (right padding)
     const maxContentWidth = this.width - 8;
-
-    // Always show In Progress section
-    lines.push(`${bg}  ${bold}${text}In Progress${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
-
-    // Show sidebar active task first (sent from queue)
-    if (activeTask) {
-      const content = activeTask.content.slice(0, maxContentWidth);
-      lines.push(`${bg}  ${ansi.green}▸   ${content}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
-    }
-
-    // Show Claude's TodoWrite items (what Claude is tracking)
-    activeTodos.forEach((todo) => {
-      let statusIcon: string;
-      let todoColor = text;
-      if (todo.status === "in_progress") {
-        statusIcon = "●   ";
-        todoColor = ansi.green;
-      } else {
-        statusIcon = "○   ";
-      }
-      const content = todo.content.slice(0, maxContentWidth);
-      lines.push(`${bg}  ${todoColor}${statusIcon}${content}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
-    });
-
-    lines.push(bgLine);
-
-    // Review section (tasks Claude thinks are done, awaiting user confirmation)
-    const { selectedSection, doneSelectedIndex } = this.state;
-    if (doneTasks.length > 0) {
-      lines.push(`${bg}  ${bold}${text}Review (${doneTasks.length})${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
-      doneTasks.slice(0, 5).forEach((task, index) => {
-        const isSelected = selectedSection === "done" && index === doneSelectedIndex && this.focused;
-        const content = task.content.slice(0, maxContentWidth);
-        const icon = isSelected ? "[?] " : " ?  ";
-        const color = isSelected ? text : muted;
-        lines.push(`${bg}  ${color}${icon}${content}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
-      });
-      lines.push(bgLine);
-    }
-
-    // To-dos section - single flat list sorted by priority
-    const sortedTasks = this.getSortedTasks();
+    const { claudeTodos, activeTask, doneTasks, selectedSection, selectedIndex } = this.state;
 
     // Track where the input line is for cursor positioning
     let inputLineRow = 0;
 
-    // Helper to render a task
-    // Design: ★ for recommended, [>] for selected, [ ] for unselected
-    // Clarified tasks show planPath on second line when selected
-    const renderTask = (task: Task, index: number) => {
-      const isSelected = selectedSection === "queue" && index === selectedIndex;
+    // ANSI strikethrough
+    const strikethrough = '\x1b[9m';
+    const noStrike = '\x1b[29m';
+
+    // Helper to render a task in inbox/clarified sections
+    const renderTask = (task: Task, index: number, section: "inbox" | "clarified") => {
+      const isSelected = selectedSection === section && index === selectedIndex;
       const isEditing = inputMode === "edit" && editingTaskId === task.id;
       const star = task.recommended ? "★ " : "  ";
       const bracket = (isSelected && this.focused) ? "[>] " : "[ ] ";
-      const color = task.clarified ? text : muted;
+      const color = section === "clarified" ? text : muted;
 
       if (isEditing) {
         inputLineRow = lines.length + 1;
         this.inputRow = inputLineRow;
-        const wrappedLines = wrapText(inputBuffer, maxContentWidth - 2); // Account for star
+        const wrappedLines = wrapText(inputBuffer, maxContentWidth - 2);
         if (wrappedLines.length === 0) wrappedLines.push('');
         wrappedLines.forEach((line, i) => {
-          const prefix = i === 0 ? `${star}${bracket}` : "      "; // 6 spaces to align with text
+          const prefix = i === 0 ? `${star}${bracket}` : "      ";
           const padding = ' '.repeat(Math.max(0, maxContentWidth - 2 - line.length));
           lines.push(`${bg}  ${prefix}${text}${line}${padding}${ansi.reset}`);
         });
       } else if (isSelected && this.focused && (task.content.length > maxContentWidth - 2 || task.content.includes('\n'))) {
-        // Wrap long content or content with newlines when selected
         const wrappedLines = wrapText(task.content, maxContentWidth - 2);
         wrappedLines.forEach((line, i) => {
           const prefix = i === 0 ? `${star}${bracket}` : "      ";
           lines.push(`${bg}  ${color}${prefix}${line}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
         });
       } else {
-        // For non-selected or short content without newlines, show first line only
         const firstLine = task.content.split('\n')[0] || task.content;
         const content = firstLine.slice(0, maxContentWidth - 2);
         lines.push(`${bg}  ${color}${star}${bracket}${content}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
       }
 
-      // Show plan path on second line when selected and has planPath
-      if (isSelected && this.focused && task.planPath && !isEditing) {
-        const planDisplay = `→ ${task.planPath}`.slice(0, maxContentWidth - 2);
-        lines.push(`${bg}  ${muted}      ${planDisplay}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+      // Show spec preview or plan path when selected
+      if (isSelected && this.focused && (task.spec || task.planPath) && !isEditing) {
+        const detail = task.spec
+          ? task.spec.split('\n')[0]?.slice(0, maxContentWidth - 4) || ''
+          : `→ ${task.planPath}`;
+        lines.push(`${bg}  ${muted}      ${detail.slice(0, maxContentWidth - 2)}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
       }
     };
 
-    // Render To-dos header and tasks
-    const todoCount = sortedTasks.length > 0 ? ` (${sortedTasks.length})` : '';
-    lines.push(`${bg}  ${bold}${text}To-dos${todoCount}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
-    sortedTasks.forEach((task, index) => {
-      renderTask(task, index);
-    });
+    // === INBOX SECTION ===
+    const inboxTasks = this.getTasksForSection("inbox");
+    if (inboxTasks.length > 0 || inputMode === "add") {
+      const count = inboxTasks.length > 0 ? ` (${inboxTasks.length})` : '';
+      lines.push(`${bg}  ${bold}${text}Inbox${count}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+      inboxTasks.forEach((task, index) => renderTask(task, index, "inbox"));
 
-    // Add new task input
-    if (inputMode === "add") {
-      inputLineRow = lines.length + 1; // 1-indexed row number
-      this.inputRow = inputLineRow; // Store for cursor positioning
-      const wrappedLines = wrapText(inputBuffer, maxContentWidth - 2); // Account for star area
-      if (wrappedLines.length === 0) wrappedLines.push('');
-      wrappedLines.forEach((line, i) => {
-        const prefix = i === 0 ? '  [ ] ' : '      '; // 2 space star area + 4 char bracket
-        const padding = ' '.repeat(Math.max(0, maxContentWidth - 2 - line.length));
-        lines.push(`${bg}  ${prefix}${text}${line}${padding}${ansi.reset}`);
+      // Add new task input (in inbox section)
+      if (inputMode === "add") {
+        inputLineRow = lines.length + 1;
+        this.inputRow = inputLineRow;
+        const wrappedLines = wrapText(inputBuffer, maxContentWidth - 2);
+        if (wrappedLines.length === 0) wrappedLines.push('');
+        wrappedLines.forEach((line, i) => {
+          const prefix = i === 0 ? '  [ ] ' : '      ';
+          const padding = ' '.repeat(Math.max(0, maxContentWidth - 2 - line.length));
+          lines.push(`${bg}  ${prefix}${text}${line}${padding}${ansi.reset}`);
+        });
+      } else if (this.focused && selectedSection === "inbox") {
+        lines.push(`${bg}  ${ansi.gray}  [ ] press a to add${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+      }
+      lines.push(bgLine);
+    }
+
+    // === CLARIFIED SECTION ===
+    const clarifiedTasks = this.getTasksForSection("clarified");
+    if (clarifiedTasks.length > 0) {
+      lines.push(`${bg}  ${bold}${text}Clarified (${clarifiedTasks.length})${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+      clarifiedTasks.forEach((task, index) => renderTask(task, index, "clarified"));
+      lines.push(bgLine);
+    }
+
+    // === IN PROGRESS SECTION ===
+    // Show active task with Claude's TodoWrite items indented as subtasks
+    lines.push(`${bg}  ${bold}${text}In Progress${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+
+    if (activeTask) {
+      const content = activeTask.content.slice(0, maxContentWidth);
+      lines.push(`${bg}  ${ansi.green}▸   ${content}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+
+      // Show Claude's TodoWrite items indented as subtasks
+      claudeTodos.forEach((todo) => {
+        let statusIcon: string;
+        let todoColor = text;
+        let strike = '';
+        let strikeEnd = '';
+
+        if (todo.status === "completed") {
+          statusIcon = "✓   ";
+          todoColor = muted;
+          strike = strikethrough;
+          strikeEnd = noStrike;
+        } else if (todo.status === "in_progress") {
+          statusIcon = "●   ";
+          todoColor = ansi.green;
+        } else {
+          statusIcon = "○   ";
+        }
+        const todoContent = todo.content.slice(0, maxContentWidth - 4); // Extra indent
+        lines.push(`${bg}      ${todoColor}${strike}${statusIcon}${todoContent}${strikeEnd}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+      });
+    } else if (claudeTodos.length > 0) {
+      // No active task but Claude has todos
+      claudeTodos.forEach((todo) => {
+        let statusIcon: string;
+        let todoColor = text;
+        let strike = '';
+        let strikeEnd = '';
+
+        if (todo.status === "completed") {
+          statusIcon = "✓   ";
+          todoColor = muted;
+          strike = strikethrough;
+          strikeEnd = noStrike;
+        } else if (todo.status === "in_progress") {
+          statusIcon = "●   ";
+          todoColor = ansi.green;
+        } else {
+          statusIcon = "○   ";
+        }
+        const todoContent = todo.content.slice(0, maxContentWidth);
+        lines.push(`${bg}  ${todoColor}${strike}${statusIcon}${todoContent}${strikeEnd}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
       });
-    } else if (this.focused) {
-      // Show hint to add task (only when focused)
-      lines.push(`${bg}  ${ansi.gray}  [ ] press a to add${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+    } else {
+      lines.push(`${bg}  ${muted}    (nothing active)${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+    }
+    lines.push(bgLine);
+
+    // === REVIEW SECTION ===
+    if (doneTasks.length > 0) {
+      lines.push(`${bg}  ${bold}${text}Review (${doneTasks.length})${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+      doneTasks.slice(0, 5).forEach((task, index) => {
+        const isSelected = selectedSection === "review" && index === selectedIndex && this.focused;
+        const content = task.content.slice(0, maxContentWidth);
+        const icon = isSelected ? "[✓] " : " ✓  ";
+        const color = isSelected ? text : muted;
+        // Strikethrough for completed items
+        lines.push(`${bg}  ${color}${strikethrough}${icon}${content}${noStrike}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
+      });
+      lines.push(bgLine);
     }
 
     // Fill remaining space
@@ -1064,10 +1102,14 @@ export class RawSidebar {
     let helpText: string;
     if (inputMode !== "none") {
       helpText = "↵: submit | ⇧↵: newline | Esc: cancel";
-    } else if (selectedSection === "done") {
-      helpText = "d: done | r: return to progress | ↑↓: navigate";
+    } else if (selectedSection === "review") {
+      helpText = "d: confirm done | r: return | ↑↓: nav | Tab: section";
+    } else if (selectedSection === "inbox") {
+      helpText = "a: add | c: clarify | ↵: send | d: del | Tab: section";
+    } else if (selectedSection === "clarified") {
+      helpText = "↵: send | e: edit | d: del | Tab: section";
     } else {
-      helpText = "a: add | e: edit | d: del | ↵: send | c: clarify";
+      helpText = "↑↓: navigate | Tab: switch section";
     }
     lines.push(`${bg}  ${muted}${helpText}${ansi.reset}${bg}${ansi.clearToEnd}${ansi.reset}`);
     lines.push(bgLine);

package/src/persistence/store.ts

@@ -48,14 +48,18 @@ function updateProjectMapping(): void {
   writeFileSync(mappingPath, JSON.stringify(mapping, null, 2));
 }
 
+export type TaskSection = "inbox" | "clarified" | "in_progress" | "review";
+
 export interface Task {
   id: string;
   content: string;
   createdAt: string;
+  section?: TaskSection;    // Which section the task belongs to (default: inbox)
   clarified?: boolean;      // Was this task clarified via /clarify skill?
   priority?: number;        // Sort order (lower = higher priority, 1 = most important)
   recommended?: boolean;    // Claude's top picks (shown with star)
   planPath?: string;        // Filename of associated Atomic Plan
+  spec?: string;            // Spec content for the task (from /clarify)
 }
 
 export interface ActiveTask {
@@ -162,10 +166,12 @@ export function setTasks(tasks: Task[]): void {
 export function addTask(
   content: string,
   options?: {
+    section?: TaskSection;
     clarified?: boolean;
     priority?: number;
     recommended?: boolean;
     planPath?: string;
+    spec?: string;
   }
 ): Task {
   const tasks = getTasks();
@@ -173,10 +179,12 @@ export function addTask(
     id: crypto.randomUUID(),
     content,
     createdAt: new Date().toISOString(),
+    section: options?.section || "inbox",
     clarified: options?.clarified,
     priority: options?.priority,
     recommended: options?.recommended,
     planPath: options?.planPath,
+    spec: options?.spec,
   };
   tasks.push(task);
   setTasks(tasks);
@@ -192,11 +200,22 @@ export function updateTask(id: string, content: string): void {
   }
 }
 
-export function markTaskClarified(id: string): void {
+export function markTaskClarified(id: string, spec?: string): void {
   const tasks = getTasks();
   const task = tasks.find((t) => t.id === id);
   if (task) {
     task.clarified = true;
+    task.section = "clarified";
+    if (spec) task.spec = spec;
+    setTasks(tasks);
+  }
+}
+
+export function setTaskSection(id: string, section: TaskSection): void {
+  const tasks = getTasks();
+  const task = tasks.find((t) => t.id === id);
+  if (task) {
+    task.section = section;
     setTasks(tasks);
   }
 }