diff --git a/electron/ipc/channels.ts b/electron/ipc/channels.ts
index a656462d..0bbfcdf3 100644
--- a/electron/ipc/channels.ts
+++ b/electron/ipc/channels.ts
@@ -86,6 +86,11 @@ export enum IPC {
   ReadPlanContent = 'read_plan_content',
   StopPlanWatcher = 'stop_plan_watcher',
 
+  // Steps
+  StepsContent = 'steps_content',
+  ReadStepsContent = 'read_steps_content',
+  StopStepsWatcher = 'stop_steps_watcher',
+
   // Ask about code
   AskAboutCode = 'ask_about_code',
   CancelAskAboutCode = 'cancel_ask_about_code',
diff --git a/electron/ipc/register.ts b/electron/ipc/register.ts
index 3290b74c..8217ebb3 100644
--- a/electron/ipc/register.ts
+++ b/electron/ipc/register.ts
@@ -23,6 +23,7 @@ import {
   stopPlanWatcher,
   readPlanForWorktree,
 } from './plans.js';
+import { startStepsWatcher, stopStepsWatcher, readStepsForWorktree } from './steps.js';
 import { startRemoteServer } from '../remote/server.js';
 import {
   getGitIgnoredDirs,
@@ -144,6 +145,11 @@ export function registerAllHandlers(win: BrowserWindow): void {
       } catch (err) {
         console.warn('Failed to start plan watcher:', err);
       }
+      try {
+        startStepsWatcher(win, args.taskId, args.cwd);
+      } catch (err) {
+        console.warn('Failed to start steps watcher:', err);
+      }
     }
     return result;
   });
@@ -434,6 +440,18 @@ export function registerAllHandlers(win: BrowserWindow): void {
     return readPlanForWorktree(args.worktreePath, fileName);
   });
 
+  // --- Steps watcher cleanup ---
+  ipcMain.handle(IPC.StopStepsWatcher, (_e, args) => {
+    assertString(args.taskId, 'taskId');
+    stopStepsWatcher(args.taskId);
+  });
+
+  // --- Steps content (one-shot read) ---
+  ipcMain.handle(IPC.ReadStepsContent, (_e, args) => {
+    validatePath(args.worktreePath, 'worktreePath');
+    return readStepsForWorktree(args.worktreePath);
+  });
+
   // --- Ask about code ---
   ipcMain.handle(IPC.AskAboutCode, (_e, args) => {
     assertString(args.requestId, 'requestId');
diff --git a/electron/ipc/steps.ts b/electron/ipc/steps.ts
new file mode 100644
index 00000000..5a65f4a0
--- /dev/null
+++ b/electron/ipc/steps.ts
@@ -0,0 +1,107 @@
+import fs from 'fs';
+import path from 'path';
+import type { BrowserWindow } from 'electron';
+import { IPC } from './channels.js';
+
+interface StepsWatcher {
+  fsWatcher: fs.FSWatcher | null;
+  timeout: ReturnType<typeof setTimeout> | null;
+  stepsDir: string;
+  stepsFile: string;
+}
+
+const watchers = new Map<string, StepsWatcher>();
+
+/** Sends parsed steps content for a task to the renderer. */
+function sendStepsContent(win: BrowserWindow, taskId: string, stepsFile: string): void {
+  if (win.isDestroyed()) return;
+  const steps = readStepsFile(stepsFile);
+  win.webContents.send(IPC.StepsContent, { taskId, steps });
+}
+
+/** Reads and parses `.claude/steps.json`. Returns the array or null. */
+function readStepsFile(stepsFile: string): unknown[] | null {
+  try {
+    const raw = fs.readFileSync(stepsFile, 'utf-8');
+    const parsed: unknown = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return null;
+    return parsed as unknown[];
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Watches the `.claude` directory for changes to `steps.json`.
+ *
+ * We watch the directory (not the file) because `fs.watch` on a single
+ * file is unreliable with atomic writes (temp-file-then-rename),
+ * especially on macOS. Changes are debounced (200ms) before reading.
+ *
+ * An initial read is performed after starting the watcher to handle
+ * the race condition where the agent writes before the watcher is set up.
+ */
+export function startStepsWatcher(win: BrowserWindow, taskId: string, worktreePath: string): void {
+  stopStepsWatcher(taskId);
+
+  const stepsDir = path.join(worktreePath, '.claude');
+  const stepsFile = path.join(stepsDir, 'steps.json');
+
+  const entry: StepsWatcher = {
+    fsWatcher: null,
+    timeout: null,
+    stepsDir,
+    stepsFile,
+  };
+
+  const onChange = () => {
+    const current = watchers.get(taskId);
+    if (!current) return;
+    if (current.timeout) clearTimeout(current.timeout);
+    current.timeout = setTimeout(() => {
+      current.timeout = null;
+      sendStepsContent(win, taskId, current.stepsFile);
+    }, 200);
+  };
+
+  // Start watching the .claude directory
+  if (fs.existsSync(stepsDir)) {
+    try {
+      entry.fsWatcher = fs.watch(stepsDir, onChange);
+      entry.fsWatcher.on('error', (err) => {
+        console.warn(`Steps watcher error for ${stepsDir}:`, err);
+      });
+    } catch (err) {
+      console.warn(`Failed to watch steps directory ${stepsDir}:`, err);
+    }
+  }
+
+  watchers.set(taskId, entry);
+
+  // Initial read to catch files written before the watcher was set up
+  if (fs.existsSync(stepsFile)) {
+    sendStepsContent(win, taskId, stepsFile);
+  }
+}
+
+/** Stops and removes the steps watcher for a given task. */
+export function stopStepsWatcher(taskId: string): void {
+  const entry = watchers.get(taskId);
+  if (!entry) return;
+  if (entry.timeout) clearTimeout(entry.timeout);
+  if (entry.fsWatcher) entry.fsWatcher.close();
+  watchers.delete(taskId);
+}
+
+/** Read steps.json from a worktree. Used for one-shot restore. */
+export function readStepsForWorktree(worktreePath: string): unknown[] | null {
+  const stepsFile = path.join(worktreePath, '.claude', 'steps.json');
+  return readStepsFile(stepsFile);
+}
+
+/** Stops all steps watchers. */
+export function stopAllStepsWatchers(): void {
+  for (const taskId of watchers.keys()) {
+    stopStepsWatcher(taskId);
+  }
+}
diff --git a/electron/ipc/tasks.ts b/electron/ipc/tasks.ts
index b46d6776..2a7f7ef4 100644
--- a/electron/ipc/tasks.ts
+++ b/electron/ipc/tasks.ts
@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto';
 import { createWorktree, removeWorktree } from './git.js';
 import { killAgent, notifyAgentListChanged } from './pty.js';
 import { stopPlanWatcher } from './plans.js';
+import { stopStepsWatcher } from './steps.js';
 
 const MAX_SLUG_LEN = 72;
 
@@ -57,6 +58,7 @@ interface DeleteTaskOpts {
 
 export async function deleteTask(opts: DeleteTaskOpts): Promise<void> {
   if (opts.taskId) stopPlanWatcher(opts.taskId);
+  if (opts.taskId) stopStepsWatcher(opts.taskId);
   for (const agentId of opts.agentIds) {
     try {
       killAgent(agentId);
diff --git a/electron/main.ts b/electron/main.ts
index a33b56a2..17bd0822 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -6,6 +6,7 @@ import { execFileSync } from 'child_process';
 import { registerAllHandlers } from './ipc/register.js';
 import { killAllAgents } from './ipc/pty.js';
 import { stopAllPlanWatchers } from './ipc/plans.js';
+import { stopAllStepsWatchers } from './ipc/steps.js';
 import { IPC } from './ipc/channels.js';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -159,6 +160,7 @@ app.whenReady().then(() => {
 app.on('before-quit', () => {
   killAllAgents();
   stopAllPlanWatchers();
+  stopAllStepsWatchers();
 });
 
 app.on('window-all-closed', () => {
diff --git a/electron/preload.cjs b/electron/preload.cjs
index 0abbb51f..95427d1c 100644
--- a/electron/preload.cjs
+++ b/electron/preload.cjs
@@ -81,6 +81,10 @@ const ALLOWED_CHANNELS = new Set([
   'plan_content',
   'read_plan_content',
   'stop_plan_watcher',
+  // Steps
+  'steps_content',
+  'read_steps_content',
+  'stop_steps_watcher',
   // Docker
   'check_docker_available',
   'check_docker_image_exists',
diff --git a/src/App.tsx b/src/App.tsx
index 044ef79c..a66724ca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,6 +43,7 @@ import {
   setNewTaskDropUrl,
   validateProjectPaths,
   setPlanContent,
+  setStepsContent,
   setDockerAvailable,
 } from './store/store';
 import { isGitHubUrl } from './lib/github-url';
@@ -310,6 +311,21 @@ function App() {
         });
     }
 
+    // Restore steps content for tasks that had steps before restart
+    for (const taskId of [...store.taskOrder, ...store.collapsedTaskOrder]) {
+      const task = store.tasks[taskId];
+      if (!task?.worktreePath) continue;
+      invoke<unknown[] | null>(IPC.ReadStepsContent, {
+        worktreePath: task.worktreePath,
+      })
+        .then((result) => {
+          if (result) setStepsContent(taskId, result);
+        })
+        .catch((err) => {
+          console.warn(`Failed to restore steps for task ${taskId}:`, err);
+        });
+    }
+
     await validateProjectPaths();
     await restoreWindowState();
     await captureWindowState();
@@ -326,6 +342,15 @@ function App() {
       }
     });
 
+    // Listen for steps content pushed from backend steps watcher
+    const offStepsContent = window.electron.ipcRenderer.on(IPC.StepsContent, (data: unknown) => {
+      if (!data || typeof data !== 'object') return;
+      const msg = data as { taskId: string; steps: unknown[] | null };
+      if (msg.taskId && store.tasks[msg.taskId]) {
+        setStepsContent(msg.taskId, msg.steps);
+      }
+    });
+
     const handlePaste = (e: ClipboardEvent) => {
       if (store.showNewTaskDialog || store.showHelpDialog || store.showSettingsDialog) return;
       const el = document.activeElement;
@@ -584,6 +609,7 @@ function App() {
       stopTaskStatusPolling();
       stopNotificationWatcher();
       offPlanContent();
+      offStepsContent();
       unlistenFocusChanged?.();
       unlistenResized?.();
       unlistenMoved?.();
diff --git a/src/components/SettingsDialog.tsx b/src/components/SettingsDialog.tsx
index 1554a203..284e7c5d 100644
--- a/src/components/SettingsDialog.tsx
+++ b/src/components/SettingsDialog.tsx
@@ -14,6 +14,7 @@ import {
   setThemePreset,
   setAutoTrustFolders,
   setShowPlans,
+  setShowSteps,
   setShowPromptInput,
   setDesktopNotificationsEnabled,
   setInactiveColumnOpacity,
@@ -192,6 +193,32 @@ export function SettingsDialog(props: SettingsDialogProps) {
             </span>
           </div>
         </label>
+        <label
+          style={{
+            display: 'flex',
+            'align-items': 'center',
+            gap: '10px',
+            cursor: 'pointer',
+            padding: '8px 12px',
+            'border-radius': '8px',
+            background: theme.bgInput,
+            border: `1px solid ${theme.border}`,
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={store.showSteps}
+            onChange={(e) => setShowSteps(e.currentTarget.checked)}
+            style={{ 'accent-color': theme.accent, cursor: 'pointer' }}
+          />
+          <div style={{ display: 'flex', 'flex-direction': 'column', gap: '2px' }}>
+            <span style={{ 'font-size': '13px', color: theme.fg }}>Steps tracking</span>
+            <span style={{ 'font-size': '11px', color: theme.fgSubtle }}>
+              Show agent progress from steps.json in a collapsible panel. Agents are instructed to
+              maintain a .claude/steps.json file via the initial prompt.
+            </span>
+          </div>
+        </label>
         <label
           style={{
             display: 'flex',
diff --git a/src/components/StatusDot.tsx b/src/components/StatusDot.tsx
index a1295dcb..e9c9e20b 100644
--- a/src/components/StatusDot.tsx
+++ b/src/components/StatusDot.tsx
@@ -4,7 +4,9 @@ import { theme } from '../lib/theme';
 const SIZES = { sm: 6, md: 8 } as const;
 
 function getDotColor(status: TaskDotStatus): string {
-  return { busy: theme.fgMuted, waiting: '#e5a800', ready: theme.success }[status];
+  return { busy: theme.fgMuted, waiting: '#e5a800', ready: theme.success, review: '#c084fc' }[
+    status
+  ];
 }
 
 export function StatusDot(props: { status: TaskDotStatus; size?: 'sm' | 'md' }) {
diff --git a/src/components/TaskPanel.tsx b/src/components/TaskPanel.tsx
index a873a985..58600052 100644
--- a/src/components/TaskPanel.tsx
+++ b/src/components/TaskPanel.tsx
@@ -26,6 +26,7 @@ import { TaskTitleBar } from './TaskTitleBar';
 import { TaskBranchInfoBar } from './TaskBranchInfoBar';
 import { TaskNotesPanel } from './TaskNotesPanel';
 import { TaskShellSection } from './TaskShellSection';
+import { TaskStepsSection } from './TaskStepsSection';
 import { TaskAITerminal } from './TaskAITerminal';
 import { TaskClosingOverlay } from './TaskClosingOverlay';
 import { theme } from '../lib/theme';
@@ -148,6 +149,19 @@ export function TaskPanel(props: TaskPanelProps) {
     };
   }
 
+  function stepsSection(): PanelChild {
+    return {
+      id: 'steps-section',
+      initialSize: 28,
+      minSize: 28,
+      get fixed() {
+        return !props.task.stepsContent?.length;
+      },
+      requestSize: () => (props.task.stepsContent?.length ? 150 : 28),
+      content: () => <TaskStepsSection task={props.task} isActive={props.isActive} />,
+    };
+  }
+
   function notesAndFiles(): PanelChild {
     return {
       id: 'notes-files',
@@ -245,6 +259,7 @@ export function TaskPanel(props: TaskPanelProps) {
         children={[
           titleBar(),
           branchInfoBar(),
+          ...(store.showSteps ? [stepsSection()] : []),
           notesAndFiles(),
           shellSection(),
           aiTerminal(),
diff --git a/src/components/TaskStepsSection.tsx b/src/components/TaskStepsSection.tsx
new file mode 100644
index 00000000..486404c0
--- /dev/null
+++ b/src/components/TaskStepsSection.tsx
@@ -0,0 +1,342 @@
+import { Show, For, createSignal } from 'solid-js';
+import { theme } from '../lib/theme';
+import { sf } from '../lib/fontScale';
+import { badgeStyle } from '../lib/badgeStyle';
+import { ScalablePanel } from './ScalablePanel';
+import type { Task } from '../store/types';
+
+const STATUS_COLORS: Record<string, string> = {
+  investigating: '#60a5fa',
+  implementing: '#c084fc',
+  testing: '#e5a800',
+  awaiting_review: '#f87171',
+  done: theme.success,
+};
+
+function statusColor(status: string): string {
+  return STATUS_COLORS[status] ?? theme.fgMuted;
+}
+
+function relativeTime(timestamp: string): string {
+  const now = Date.now();
+  const then = new Date(timestamp).getTime();
+  if (isNaN(then)) return '';
+  const diffMs = now - then;
+  if (diffMs < 60_000) return 'just now';
+  const mins = Math.floor(diffMs / 60_000);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
+}
+
+interface TaskStepsSectionProps {
+  task: Task;
+  isActive: boolean;
+}
+
+export function TaskStepsSection(props: TaskStepsSectionProps) {
+  const [expandedHistory, setExpandedHistory] = createSignal<Set<number>>(new Set());
+
+  const steps = () => props.task.stepsContent ?? [];
+  const latestStep = () => {
+    const s = steps();
+    return s.length > 0 ? s[s.length - 1] : null;
+  };
+  const historySteps = () => {
+    const s = steps();
+    if (s.length <= 1) return [];
+    return s.slice(0, -1).reverse();
+  };
+
+  function toggleHistory(originalIndex: number) {
+    setExpandedHistory((prev) => {
+      const next = new Set(prev);
+      if (next.has(originalIndex)) {
+        next.delete(originalIndex);
+      } else {
+        next.add(originalIndex);
+      }
+      return next;
+    });
+  }
+
+  return (
+    <ScalablePanel panelId={`${props.task.id}:steps`}>
+      <div
+        style={{
+          height: '100%',
+          display: 'flex',
+          'flex-direction': 'column',
+          background: 'transparent',
+        }}
+      >
+        {/* Header bar */}
+        <div
+          style={{
+            height: '28px',
+            'min-height': '28px',
+            display: 'flex',
+            'align-items': 'center',
+            padding: '0 8px',
+            gap: '8px',
+          }}
+        >
+          <span
+            style={{
+              'font-size': sf(10),
+              'font-weight': '600',
+              color: theme.fgMuted,
+              'text-transform': 'uppercase',
+              'letter-spacing': '0.05em',
+              'flex-shrink': '0',
+            }}
+          >
+            Steps
+          </span>
+          <Show
+            when={latestStep()}
+            fallback={
+              <span style={{ 'font-size': sf(10), color: theme.fgSubtle }}>No steps yet</span>
+            }
+          >
+            {(step) => (
+              <div
+                style={{
+                  display: 'flex',
+                  'align-items': 'center',
+                  gap: '6px',
+                  overflow: 'hidden',
+                  flex: '1',
+                  'min-width': '0',
+                }}
+              >
+                <span style={badgeStyle(statusColor(step().status))}>
+                  {step().status.replace('_', ' ')}
+                </span>
+                <span
+                  style={{
+                    'font-size': sf(10),
+                    color: theme.fgMuted,
+                    overflow: 'hidden',
+                    'text-overflow': 'ellipsis',
+                    'white-space': 'nowrap',
+                  }}
+                >
+                  {step().summary}
+                </span>
+              </div>
+            )}
+          </Show>
+        </div>
+
+        {/* Expanded content */}
+        <Show when={steps().length > 0}>
+          <div
+            style={{
+              flex: '1',
+              overflow: 'auto',
+              padding: '0 8px 8px',
+              display: 'flex',
+              'flex-direction': 'column',
+              gap: '6px',
+            }}
+          >
+            {/* Latest step — always expanded */}
+            <Show when={latestStep()}>
+              {(step) => (
+                <div
+                  style={{
+                    background: theme.taskPanelBg,
+                    'border-radius': '6px',
+                    padding: '8px 10px',
+                    border: `1px solid ${theme.border}`,
+                  }}
+                >
+                  <div
+                    style={{
+                      display: 'flex',
+                      'align-items': 'center',
+                      gap: '8px',
+                      'margin-bottom': '4px',
+                    }}
+                  >
+                    <span style={badgeStyle(statusColor(step().status))}>
+                      {step().status.replace('_', ' ')}
+                    </span>
+                    <span
+                      style={{
+                        'font-size': sf(11),
+                        'font-weight': '600',
+                        color: theme.fg,
+                        flex: '1',
+                      }}
+                    >
+                      {step().summary}
+                    </span>
+                    <Show when={step().timestamp}>
+                      <span
+                        style={{ 'font-size': sf(9), color: theme.fgSubtle, 'flex-shrink': '0' }}
+                      >
+                        {relativeTime(step().timestamp)}
+                      </span>
+                    </Show>
+                  </div>
+                  <Show when={step().detail}>
+                    <div
+                      style={{
+                        'font-size': sf(10),
+                        color: theme.fgMuted,
+                        'margin-top': '4px',
+                        'line-height': '1.4',
+                      }}
+                    >
+                      {step().detail}
+                    </div>
+                  </Show>
+                  <Show when={(step().files_touched ?? []).length > 0}>
+                    <div
+                      style={{
+                        display: 'flex',
+                        'flex-wrap': 'wrap',
+                        gap: '4px',
+                        'margin-top': '6px',
+                      }}
+                    >
+                      <For each={step().files_touched}>
+                        {(file) => (
+                          <span
+                            style={{
+                              'font-size': sf(9),
+                              padding: '1px 6px',
+                              'border-radius': '3px',
+                              background: `color-mix(in srgb, ${theme.fgMuted} 10%, transparent)`,
+                              color: theme.fgMuted,
+                              border: `1px solid ${theme.border}`,
+                            }}
+                          >
+                            {file}
+                          </span>
+                        )}
+                      </For>
+                    </div>
+                  </Show>
+                </div>
+              )}
+            </Show>
+
+            {/* History — collapsible entries */}
+            <Show when={historySteps().length > 0}>
+              <div style={{ display: 'flex', 'flex-direction': 'column', gap: '2px' }}>
+                <For each={historySteps()}>
+                  {(step, reversedIdx) => {
+                    const originalIndex = () => steps().length - 2 - reversedIdx();
+                    const isExpanded = () => expandedHistory().has(originalIndex());
+
+                    return (
+                      <div>
+                        <div
+                          onClick={() => toggleHistory(originalIndex())}
+                          style={{
+                            display: 'flex',
+                            'align-items': 'center',
+                            gap: '6px',
+                            padding: '3px 6px',
+                            cursor: 'pointer',
+                            'border-radius': '4px',
+                            'user-select': 'none',
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.background = `color-mix(in srgb, ${theme.fgMuted} 8%, transparent)`;
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.background = 'transparent';
+                          }}
+                        >
+                          <span
+                            style={{
+                              'font-size': sf(9),
+                              color: theme.fgSubtle,
+                              'flex-shrink': '0',
+                              width: '20px',
+                              'text-align': 'right',
+                            }}
+                          >
+                            {originalIndex() + 1}
+                          </span>
+                          <span
+                            style={{
+                              ...badgeStyle(statusColor(step.status)),
+                              'font-size': sf(9),
+                              padding: '1px 5px',
+                            }}
+                          >
+                            {step.status.replace('_', ' ')}
+                          </span>
+                          <span
+                            style={{
+                              'font-size': sf(10),
+                              color: theme.fgMuted,
+                              overflow: 'hidden',
+                              'text-overflow': 'ellipsis',
+                              'white-space': 'nowrap',
+                              flex: '1',
+                            }}
+                          >
+                            {step.summary}
+                          </span>
+                        </div>
+
+                        <Show when={isExpanded()}>
+                          <div
+                            style={{
+                              'margin-left': '32px',
+                              padding: '4px 8px',
+                              'font-size': sf(10),
+                              color: theme.fgMuted,
+                              'border-left': `2px solid ${theme.border}`,
+                            }}
+                          >
+                            <Show when={step.detail}>
+                              <div style={{ 'margin-bottom': '4px' }}>{step.detail}</div>
+                            </Show>
+                            <Show when={step.files_touched && step.files_touched.length > 0}>
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  'flex-wrap': 'wrap',
+                                  gap: '3px',
+                                }}
+                              >
+                                <For each={step.files_touched}>
+                                  {(file) => (
+                                    <span
+                                      style={{
+                                        'font-size': sf(9),
+                                        padding: '1px 5px',
+                                        'border-radius': '3px',
+                                        background: `color-mix(in srgb, ${theme.fgMuted} 10%, transparent)`,
+                                        color: theme.fgMuted,
+                                      }}
+                                    >
+                                      {file}
+                                    </span>
+                                  )}
+                                </For>
+                              </div>
+                            </Show>
+                          </div>
+                        </Show>
+                      </div>
+                    );
+                  }}
+                </For>
+              </div>
+            </Show>
+          </div>
+        </Show>
+      </div>
+    </ScalablePanel>
+  );
+}
diff --git a/src/components/TaskTitleBar.tsx b/src/components/TaskTitleBar.tsx
index 8e46fb19..d6c7cf7f 100644
--- a/src/components/TaskTitleBar.tsx
+++ b/src/components/TaskTitleBar.tsx
@@ -1,4 +1,4 @@
-import { Show, type JSX } from 'solid-js';
+import { Show } from 'solid-js';
 import {
   store,
   reorderTask,
@@ -11,21 +11,10 @@ import { EditableText, type EditableTextHandle } from './EditableText';
 import { IconButton } from './IconButton';
 import { StatusDot } from './StatusDot';
 import { theme } from '../lib/theme';
+import { badgeStyle } from '../lib/badgeStyle';
 import { handleDragReorder } from '../lib/dragReorder';
 import type { Task } from '../store/types';
 
-const badgeStyle = (color: string): JSX.CSSProperties => ({
-  'font-size': '11px',
-  'font-weight': '600',
-  padding: '2px 8px',
-  'border-radius': '4px',
-  background: `color-mix(in srgb, ${color} 15%, transparent)`,
-  color: color,
-  border: `1px solid color-mix(in srgb, ${color} 25%, transparent)`,
-  'flex-shrink': '0',
-  'white-space': 'nowrap',
-});
-
 interface TaskTitleBarProps {
   task: Task;
   isActive: boolean;
diff --git a/src/ipc/types.ts b/src/ipc/types.ts
index b30416f3..d51c5198 100644
--- a/src/ipc/types.ts
+++ b/src/ipc/types.ts
@@ -61,3 +61,11 @@ export interface FileDiffResult {
   oldContent: string;
   newContent: string;
 }
+
+export interface StepEntry {
+  summary: string;
+  detail?: string;
+  status: 'investigating' | 'implementing' | 'testing' | 'awaiting_review' | 'done';
+  files_touched?: string[];
+  timestamp: string;
+}
diff --git a/src/lib/badgeStyle.ts b/src/lib/badgeStyle.ts
new file mode 100644
index 00000000..e9204c62
--- /dev/null
+++ b/src/lib/badgeStyle.ts
@@ -0,0 +1,13 @@
+import type { JSX } from 'solid-js';
+
+export const badgeStyle = (color: string): JSX.CSSProperties => ({
+  'font-size': '11px',
+  'font-weight': '600',
+  padding: '2px 8px',
+  'border-radius': '4px',
+  background: `color-mix(in srgb, ${color} 15%, transparent)`,
+  color: color,
+  border: `1px solid color-mix(in srgb, ${color} 25%, transparent)`,
+  'flex-shrink': '0',
+  'white-space': 'nowrap',
+});
diff --git a/src/store/autosave.ts b/src/store/autosave.ts
index 9a7d1785..b55c55b4 100644
--- a/src/store/autosave.ts
+++ b/src/store/autosave.ts
@@ -26,6 +26,7 @@ function persistedSnapshot(): string {
     windowState: store.windowState,
     autoTrustFolders: store.autoTrustFolders,
     showPlans: store.showPlans,
+    showSteps: store.showSteps,
     desktopNotificationsEnabled: store.desktopNotificationsEnabled,
     inactiveColumnOpacity: store.inactiveColumnOpacity,
     editorCommand: store.editorCommand,
diff --git a/src/store/core.ts b/src/store/core.ts
index c64663be..dd5bbdb2 100644
--- a/src/store/core.ts
+++ b/src/store/core.ts
@@ -42,6 +42,7 @@ export const [store, setStore] = createStore<AppStore>({
   windowState: null,
   autoTrustFolders: false,
   showPlans: true,
+  showSteps: false,
   desktopNotificationsEnabled: false,
   inactiveColumnOpacity: 0.6,
   editorCommand: '',
diff --git a/src/store/persistence.ts b/src/store/persistence.ts
index 82f4fd0b..07b5f934 100644
--- a/src/store/persistence.ts
+++ b/src/store/persistence.ts
@@ -52,6 +52,7 @@ export async function saveState(): Promise<void> {
     windowState: store.windowState ? { ...store.windowState } : undefined,
     autoTrustFolders: store.autoTrustFolders,
     showPlans: store.showPlans,
+    showSteps: store.showSteps,
     desktopNotificationsEnabled: store.desktopNotificationsEnabled,
     inactiveColumnOpacity: store.inactiveColumnOpacity,
     editorCommand: store.editorCommand || undefined,
@@ -83,6 +84,7 @@ export async function saveState(): Promise<void> {
       githubUrl: task.githubUrl,
       savedInitialPrompt: task.savedInitialPrompt,
       planFileName: task.planFileName,
+      stepsFileName: task.stepsContent?.length ? 'steps.json' : undefined,
     };
   }
 
@@ -110,6 +112,7 @@ export async function saveState(): Promise<void> {
       githubUrl: task.githubUrl,
       savedInitialPrompt: task.savedInitialPrompt,
       planFileName: task.planFileName,
+      stepsFileName: task.stepsContent?.length ? 'steps.json' : undefined,
       collapsed: true,
     };
   }
@@ -192,6 +195,7 @@ interface LegacyPersistedState {
   windowState?: unknown;
   autoTrustFolders?: unknown;
   showPlans?: unknown;
+  showSteps?: unknown;
   desktopNotificationsEnabled?: unknown;
   inactiveColumnOpacity?: unknown;
   editorCommand?: unknown;
@@ -303,6 +307,7 @@ export async function loadState(): Promise<void> {
       s.windowState = parsePersistedWindowState(raw.windowState);
       s.autoTrustFolders = typeof raw.autoTrustFolders === 'boolean' ? raw.autoTrustFolders : false;
       s.showPlans = typeof raw.showPlans === 'boolean' ? raw.showPlans : true;
+      s.showSteps = typeof raw.showSteps === 'boolean' ? raw.showSteps : false;
       s.desktopNotificationsEnabled =
         typeof raw.desktopNotificationsEnabled === 'boolean'
           ? raw.desktopNotificationsEnabled
@@ -377,6 +382,7 @@ export async function loadState(): Promise<void> {
           githubUrl: pt.githubUrl,
           savedInitialPrompt: pt.savedInitialPrompt,
           planFileName: pt.planFileName,
+          stepsFileName: pt.stepsFileName,
         };
 
         s.tasks[taskId] = task;
@@ -439,6 +445,7 @@ export async function loadState(): Promise<void> {
           githubUrl: pt.githubUrl,
           savedInitialPrompt: pt.savedInitialPrompt,
           planFileName: pt.planFileName,
+          stepsFileName: pt.stepsFileName,
           collapsed: true,
           savedAgentDef: agentDef ?? undefined,
         };
diff --git a/src/store/store.ts b/src/store/store.ts
index 634f1c78..62b09a21 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -49,6 +49,7 @@ export {
   setNewTaskDropUrl,
   setNewTaskPrefillPrompt,
   setPlanContent,
+  setStepsContent,
 } from './tasks';
 export {
   setActiveTask,
@@ -96,6 +97,7 @@ export {
   setThemePreset,
   setAutoTrustFolders,
   setShowPlans,
+  setShowSteps,
   setShowPromptInput,
   setDesktopNotificationsEnabled,
   setInactiveColumnOpacity,
diff --git a/src/store/taskStatus.ts b/src/store/taskStatus.ts
index 66ca3a99..cbe24137 100644
--- a/src/store/taskStatus.ts
+++ b/src/store/taskStatus.ts
@@ -88,7 +88,7 @@ function clearAutoTrustState(agentId: string): void {
   }
 }
 
-export type TaskDotStatus = 'busy' | 'waiting' | 'ready';
+export type TaskDotStatus = 'busy' | 'waiting' | 'ready' | 'review';
 
 // --- Prompt detection helpers ---
 
@@ -577,6 +577,13 @@ export function getTaskDotStatus(taskId: string): TaskDotStatus {
   });
   if (hasActive) return 'busy';
 
+  // Check if the latest step requests review (priority above ready/waiting)
+  const steps = task.stepsContent;
+  if (steps && steps.length > 0) {
+    const latest = steps[steps.length - 1];
+    if (latest.status === 'awaiting_review') return 'review';
+  }
+
   const git = store.taskGitStatus[taskId];
   if (git?.has_committed_changes && !git?.has_uncommitted_changes) return 'ready';
   return 'waiting';
diff --git a/src/store/tasks.ts b/src/store/tasks.ts
index ebb0fc19..fdc53fe4 100644
--- a/src/store/tasks.ts
+++ b/src/store/tasks.ts
@@ -13,7 +13,7 @@ import {
   rescheduleTaskStatusPolling,
 } from './taskStatus';
 import { recordMergedLines, recordTaskCompleted } from './completion';
-import type { AgentDef, CreateTaskResult, MergeResult } from '../ipc/types';
+import type { AgentDef, CreateTaskResult, MergeResult, StepEntry } from '../ipc/types';
 import { parseGitHubUrl, taskNameFromGitHubUrl } from '../lib/github-url';
 import type { Agent, Task, GitIsolationMode } from './types';
 
@@ -129,6 +129,14 @@ export async function createTask(opts: CreateTaskOptions): Promise<string> {
   }
 
   const agentId = crypto.randomUUID();
+
+  // When steps tracking is enabled, prepend a compact instruction to the initial prompt
+  let effectivePrompt = initialPrompt;
+  if (store.showSteps && effectivePrompt) {
+    const stepsInstruction = `[Progress tracking: maintain .claude/steps.json — a JSON array of {summary, status, detail?, files_touched?, timestamp}. Statuses: investigating, implementing, testing, awaiting_review, done. Append a new entry after each major step. Set awaiting_review and STOP when you want human review.]\n\n`;
+    effectivePrompt = stepsInstruction + effectivePrompt;
+  }
+
   const task: Task = {
     id: taskId,
     name,
@@ -141,7 +149,7 @@ export async function createTask(opts: CreateTaskOptions): Promise<string> {
     shellAgentIds: [],
     notes: '',
     lastPrompt: '',
-    initialPrompt: initialPrompt ?? undefined,
+    initialPrompt: effectivePrompt ?? undefined,
     savedInitialPrompt: initialPrompt ?? undefined,
     skipPermissions: skipPermissions ?? undefined,
     dockerMode: dockerMode ?? undefined,
@@ -229,6 +237,7 @@ function removeTaskFromStore(taskId: string, agentIds: string[]): void {
   // merge+cleanup, current-branch-mode close), so placing it here prevents leaks
   // regardless of which path removed the task.  Idempotent if already stopped.
   invoke(IPC.StopPlanWatcher, { taskId }).catch(console.error);
+  invoke(IPC.StopStepsWatcher, { taskId }).catch(console.error);
 
   // Clean up agent activity tracking (timers, buffers, decoders) before
   // the store entries are deleted — otherwise markAgentExited can't find
@@ -453,8 +462,9 @@ export async function collapseTask(taskId: string): Promise<void> {
   const task = store.tasks[taskId];
   if (!task || task.collapsed || task.closingStatus) return;
 
-  // Stop plan file watcher to prevent FSWatcher leak
+  // Stop file watchers to prevent FSWatcher leak
   invoke(IPC.StopPlanWatcher, { taskId }).catch(console.error);
+  invoke(IPC.StopStepsWatcher, { taskId }).catch(console.error);
 
   // Save agent def before killing so uncollapse can restart cleanly.
   // Collapsing unmounts the TaskPanel which destroys the TerminalView,
@@ -463,8 +473,6 @@ export async function collapseTask(taskId: string): Promise<void> {
   const agentDef = firstAgent?.def;
   const agentIds = [...task.agentIds];
   const shellAgentIds = [...task.shellAgentIds];
-
-  invoke(IPC.StopPlanWatcher, { taskId }).catch(console.error);
   const allIds = [...agentIds, ...shellAgentIds];
   await Promise.allSettled(
     allIds.map((id) => invoke(IPC.KillAgent, { agentId: id }).catch(console.error)),
@@ -582,3 +590,12 @@ export function setPlanContent(
   setStore('tasks', taskId, 'planContent', content ?? undefined);
   setStore('tasks', taskId, 'planFileName', fileName ?? undefined);
 }
+
+export function setStepsContent(taskId: string, steps: unknown[] | null): void {
+  setStore(
+    'tasks',
+    taskId,
+    'stepsContent',
+    steps && steps.length > 0 ? (steps as StepEntry[]) : undefined,
+  );
+}
diff --git a/src/store/types.ts b/src/store/types.ts
index fa40f663..fff1e2cf 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -1,4 +1,4 @@
-import type { AgentDef, WorktreeStatus } from '../ipc/types';
+import type { AgentDef, StepEntry, WorktreeStatus } from '../ipc/types';
 import type { LookPreset } from '../lib/look';
 
 export type GitIsolationMode = 'worktree' | 'direct';
@@ -57,6 +57,8 @@ export interface Task {
   savedAgentDef?: AgentDef;
   planContent?: string;
   planFileName?: string;
+  stepsContent?: StepEntry[];
+  stepsFileName?: string;
 }
 
 export interface Terminal {
@@ -85,6 +87,7 @@ export interface PersistedTask {
   savedInitialPrompt?: string;
   collapsed?: boolean;
   planFileName?: string;
+  stepsFileName?: string;
 }
 
 export interface PersistedTerminal {
@@ -123,6 +126,7 @@ export interface PersistedState {
   windowState?: PersistedWindowState;
   autoTrustFolders?: boolean;
   showPlans?: boolean;
+  showSteps?: boolean;
   desktopNotificationsEnabled?: boolean;
   inactiveColumnOpacity?: number;
   editorCommand?: string;
@@ -188,6 +192,7 @@ export interface AppStore {
   windowState: PersistedWindowState | null;
   autoTrustFolders: boolean;
   showPlans: boolean;
+  showSteps: boolean;
   desktopNotificationsEnabled: boolean;
   inactiveColumnOpacity: number;
   editorCommand: string;
diff --git a/src/store/ui.ts b/src/store/ui.ts
index 8334f8c0..f509fe6c 100644
--- a/src/store/ui.ts
+++ b/src/store/ui.ts
@@ -86,6 +86,10 @@ export function setShowPlans(showPlans: boolean): void {
   setStore('showPlans', showPlans);
 }
 
+export function setShowSteps(showSteps: boolean): void {
+  setStore('showSteps', showSteps);
+}
+
 export function setShowPromptInput(show: boolean): void {
   setStore('showPromptInput', show);
 }