dimakis · dimakis · Jul 4, 2026 · Jul 4, 2026
diff --git a/frontend/src/components/TaskBoardSection.tsx b/frontend/src/components/TaskBoardSection.tsx
@@ -26,6 +26,7 @@ export function TaskBoardSection() {
     pauseLoop,
     resumeLoop,
     stopLoop,
+    setSpawnEnabled,
     approveTask,
     rejectTask,
     approveSpec,
@@ -47,7 +48,7 @@ export function TaskBoardSection() {
     [deleteTask],
   );
 
-  const { state, progress, awaitingApproval } = loopStatus;
+  const { state, progress, awaitingApproval, spawnEnabled } = loopStatus;
 
   // Count items needing attention
   const needsAttention = tasks.filter(
@@ -60,9 +61,18 @@ export function TaskBoardSection() {
       badge={needsAttention || undefined}
       storageKey="cc-taskboard"
       actions={
-        <button className="cc-section-action-btn" onClick={refresh} title="Refresh">
-          &#x21bb;
-        </button>
+        <>
+          <button
+            className={`cc-section-action-btn ${spawnEnabled ? 'cc-spawn-enabled' : 'cc-spawn-disabled'}`}
+            onClick={() => setSpawnEnabled(!spawnEnabled)}
+            title={spawnEnabled ? 'Disable session spawning' : 'Enable session spawning'}
+          >
+            {spawnEnabled ? '\u26A1' : '\u26D4'}
+          </button>
+          <button className="cc-section-action-btn" onClick={refresh} title="Refresh">
+            &#x21bb;
+          </button>
+        </>
       }
     >
       {/* Compact loop bar */}

diff --git a/frontend/src/components/TokenBar.tsx b/frontend/src/components/TokenBar.tsx
@@ -29,14 +29,6 @@ export function TokenBar({ tokenState }: Props) {
   // Show only session total in that case — the agent context bar is meaningless.
   const isCompleted = agentContext === 0 && sessionTotal > 0;
 
-  if (tokenState.compacting) {
-    return (
-      <div className="token-bar token-bar--compacting" aria-label="Compacting context">
-        <span className="token-bar-compacting-label">COMPACTING</span>
-      </div>
-    );
-  }
-
   return (
     <>
       <button

diff --git a/frontend/src/components/__tests__/TokenBar.test.tsx b/frontend/src/components/__tests__/TokenBar.test.tsx
@@ -12,7 +12,6 @@ function makeState(overrides: Partial<TokenState> = {}): TokenState {
     numTurns: 0,
     turnIndex: 0,
     numCompactions: 0,
-    compacting: false,
     ...overrides,
   };
 }
@@ -105,16 +104,6 @@ describe('TokenBar', () => {
     expect(screen.getByText(/Session tokens/)).toBeTruthy();
   });
 
-  it('shows compacting indicator when compacting is true', () => {
-    const { container } = render(
-      <TokenBar tokenState={makeState({ agentContext: 170000, turnIndex: 3, compacting: true })} />,
-    );
-    expect(container.querySelector('.token-bar--compacting')).toBeTruthy();
-    expect(screen.getByText(/COMPACTING/)).toBeTruthy();
-    // Normal token display should not be visible
-    expect(screen.queryByText(/170k/)).toBeNull();
-  });
-
   it('expands detail panel on tap', () => {
     render(
       <TokenBar

diff --git a/frontend/src/hooks/__tests__/useTaskBoard.test.ts b/frontend/src/hooks/__tests__/useTaskBoard.test.ts
@@ -98,6 +98,7 @@ describe('useTaskBoard', () => {
       progress: null,
       specMode: false,
       awaitingApproval: false,
+      spawnEnabled: false,
     });
 
     const { result } = renderHook(() => useTaskBoard(), { wrapper });

diff --git a/frontend/src/hooks/useTaskBoard.ts b/frontend/src/hooks/useTaskBoard.ts
@@ -145,6 +145,7 @@ export interface UseTaskBoardResult {
   pauseLoop: () => Promise<void>;
   resumeLoop: () => Promise<void>;
   stopLoop: () => Promise<void>;
+  setSpawnEnabled: (enabled: boolean) => Promise<void>;
   approveTask: (id: string) => Promise<void>;
   rejectTask: (id: string, feedback: string) => Promise<void>;
   approveSpec: () => Promise<void>;
@@ -170,6 +171,7 @@ export function useTaskBoard(): UseTaskBoardResult {
   const storePauseLoop = useMitzoStore((s) => s.pauseLoop);
   const storeResumeLoop = useMitzoStore((s) => s.resumeLoop);
   const storeStopLoop = useMitzoStore((s) => s.stopLoop);
+  const storeSetSpawnEnabled = useMitzoStore((s) => s.setSpawnEnabled);
   const storeApproveTask = useMitzoStore((s) => s.approveTask);
   const storeRejectTask = useMitzoStore((s) => s.rejectTask);
   const storeApproveSpec = useMitzoStore((s) => s.approveSpec);
@@ -237,6 +239,7 @@ export function useTaskBoard(): UseTaskBoardResult {
     pauseLoop: storePauseLoop,
     resumeLoop: storeResumeLoop,
     stopLoop: storeStopLoop,
+    setSpawnEnabled: storeSetSpawnEnabled,
     approveTask: storeApproveTask,
     rejectTask: storeRejectTask,
     approveSpec: storeApproveSpec,

diff --git a/frontend/src/pages/__tests__/DesktopChatView.test.tsx b/frontend/src/pages/__tests__/DesktopChatView.test.tsx
@@ -98,6 +98,7 @@ function createMockStore() {
         progress: null,
         specMode: false,
         awaitingApproval: false,
+        spawnEnabled: false,
       },
     },
     workload: { items: [], profiles: [] },
@@ -112,7 +113,6 @@ function createMockStore() {
       numTurns: 0,
       turnIndex: 0,
       numCompactions: 0,
-      compacting: false,
     },
     progress: { blocks: {}, toolIndex: {} },
     sendError: null,
@@ -137,6 +137,7 @@ function createMockStore() {
     pauseLoop: vi.fn().mockResolvedValue(undefined),
     resumeLoop: vi.fn().mockResolvedValue(undefined),
     stopLoop: vi.fn().mockResolvedValue(undefined),
+    setSpawnEnabled: vi.fn().mockResolvedValue(undefined),
     approveTask: vi.fn().mockResolvedValue(undefined),
     rejectTask: vi.fn().mockResolvedValue(undefined),
     approveSpec: vi.fn().mockResolvedValue(undefined),

diff --git a/frontend/src/pages/__tests__/TaskBoard.test.tsx b/frontend/src/pages/__tests__/TaskBoard.test.tsx
@@ -72,6 +72,7 @@ vi.mock('../../hooks/useTaskBoard', () => ({
       progress: null,
       specMode: false,
       awaitingApproval: false,
+      spawnEnabled: false,
     },
     createTask: mockCreateTask,
     updateTask: mockUpdateTask,

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
@@ -77,6 +77,14 @@ a {
   text-decoration: none;
 }
 
+.cc-spawn-enabled {
+  color: var(--task-active);
+}
+
+.cc-spawn-disabled {
+  color: var(--danger);
+}
+
 a:hover {
   text-decoration: underline;
 }
@@ -1475,9 +1483,6 @@ textarea:focus {
   background: var(--surface);
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
-  position: relative;
-  z-index: 20;
-  box-shadow: 0 4px 0 0 var(--surface);
   transition:
     max-height 0.2s,
     padding 0.2s,
@@ -1669,7 +1674,7 @@ textarea:focus {
   flex: 1;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  padding: 0 var(--space-3) var(--space-4);
+  padding: var(--space-4) var(--space-3);
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
@@ -2430,10 +2435,8 @@ textarea:focus {
   position: sticky;
   top: 0;
   z-index: 10;
-  margin: -1px calc(-1 * var(--space-3)) 0;
-  padding: 0 var(--space-3);
   border-bottom: 1px solid var(--border);
-  background: var(--surface);
+  background: var(--bg-primary);
 }
 
 .session-banner-header {
@@ -3467,35 +3470,6 @@ textarea:focus {
   animation: token-flash 0.8s ease-in-out infinite alternate;
 }
 
-.token-bar--compacting {
-  color: #fbbf24;
-  border-color: rgba(251, 191, 36, 0.6);
-  background: rgba(251, 191, 36, 0.15);
-  animation: compaction-pulse 1s ease-in-out infinite alternate;
-  cursor: default;
-  pointer-events: none;
-}
-
-.token-bar-compacting-label {
-  font-weight: 700;
-  font-size: var(--text-xxs);
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-@keyframes compaction-pulse {
-  from {
-    opacity: 1;
-    border-color: rgba(251, 191, 36, 0.6);
-    box-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
-  }
-  to {
-    opacity: 0.5;
-    border-color: rgba(251, 191, 36, 0.3);
-    box-shadow: 0 0 2px rgba(251, 191, 36, 0.1);
-  }
-}
-
 @keyframes token-flash {
   from {
     opacity: 1;

diff --git a/frontend/src/types/task.ts b/frontend/src/types/task.ts
@@ -18,6 +18,7 @@ export interface LoopStatus {
   progress: { done: number; total: number } | null;
   specMode: boolean;
   awaitingApproval: boolean;
+  spawnEnabled: boolean;
 }
 
 export interface Task {

diff --git a/frontend/src/types/ws-messages.ts b/frontend/src/types/ws-messages.ts
@@ -250,7 +250,6 @@ export type ServerMessage =
   | TaskUpdatedMsg
   | TaskDeletedMsg
   | TokenUpdateMsg
-  | CompactionStatusMsg
   | LoopStatusMsg
   | ProgressStartMsg
   | ProgressUpdateMsg
@@ -302,11 +301,6 @@ export interface TokenUpdateMsg {
   turnIndex: number;
 }
 
-export interface CompactionStatusMsg {
-  type: 'compaction_status';
-  active: boolean;
-}
-
 export interface LoopStatusMsg {
   type: 'loop_status';
   state: 'idle' | 'running' | 'paused';
@@ -315,6 +309,7 @@ export interface LoopStatusMsg {
   progress: { done: number; total: number } | null;
   specMode: boolean;
   awaitingApproval: boolean;
+  spawnEnabled: boolean;
 }
 
 // Subagent lifecycle events

diff --git a/packages/client/__tests__/protocol-parser.test.ts b/packages/client/__tests__/protocol-parser.test.ts
@@ -473,14 +473,15 @@ describe('task system messages', () => {
         progress: { done: 2, total: 5 },
         specMode: false,
         awaitingApproval: false,
+        spawnEnabled: false,
       },
       makeState(),
       makeCallbacks(),
       POOL_KEY,
     );
     expect(r.tasksUpdate).toMatchObject({
       type: 'loop_status',
-      status: { state: 'running', goalId: 'g1' },
+      status: { state: 'running', goalId: 'g1', spawnEnabled: false },
     });
   });
 });
@@ -533,24 +534,6 @@ describe('token_update', () => {
     expect('sessionTotal' in r.tokensUpdate!).toBe(false);
     expect('numTurns' in r.tokensUpdate!).toBe(false);
   });
-
-  it('compaction_status sets compacting flag on tokensUpdate', () => {
-    const active = parseServerMessage(
-      { type: 'compaction_status', active: true },
-      makeState(),
-      makeCallbacks(),
-      POOL_KEY,
-    );
-    expect(active.tokensUpdate).toEqual({ compacting: true });
-
-    const done = parseServerMessage(
-      { type: 'compaction_status', active: false },
-      makeState(),
-      makeCallbacks(),
-      POOL_KEY,
-    );
-    expect(done.tokensUpdate).toEqual({ compacting: false });
-  });
 });
 
 // ─── Inbox ────────────────────────────────────────────────────────────────────

diff --git a/packages/client/src/api-client.ts b/packages/client/src/api-client.ts
@@ -282,6 +282,7 @@ export class MitzoApiClient {
     progress?: { completed: number; total: number } | null;
     specMode?: boolean;
     awaitingApproval?: boolean;
+    spawnEnabled?: boolean;
   }> {
     const res = await this.assertOk(
       await this.fetch('/api/loop/status', { credentials: 'include' }),
@@ -318,6 +319,17 @@ export class MitzoApiClient {
     );
   }
 
+  async setSpawnEnabled(enabled: boolean): Promise<void> {
+    await this.assertOk(
+      await this.fetch('/api/loop/spawn', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ enabled }),
+      }),
+    );
+  }
+
   async approveSpec(): Promise<void> {
     await this.assertOk(
       await this.fetch('/api/loop/spec/approve', { method: 'POST', credentials: 'include' }),

diff --git a/packages/client/src/protocol-parser.ts b/packages/client/src/protocol-parser.ts
@@ -481,6 +481,7 @@ export function parseServerMessage(
           progress: (msg.progress as LoopStatus['progress']) ?? null,
           specMode: (msg.specMode as boolean) ?? false,
           awaitingApproval: (msg.awaitingApproval as boolean) ?? false,
+          spawnEnabled: (msg.spawnEnabled as boolean) ?? false,
         },
       };
       break;
@@ -516,10 +517,6 @@ export function parseServerMessage(
       break;
     }
 
-    case 'compaction_status':
-      result.tokensUpdate = { compacting: Boolean(msg.active) };
-      break;
-
     // Progress tracking messages
     case 'progress_start':
       result.progressUpdate = {

diff --git a/packages/client/src/slices/tasks.ts b/packages/client/src/slices/tasks.ts
@@ -46,6 +46,7 @@ export interface LoopStatus {
   progress: { done: number; total: number } | null;
   specMode: boolean;
   awaitingApproval: boolean;
+  spawnEnabled: boolean;
 }
 
 export interface TasksState {
@@ -62,5 +63,6 @@ export const INITIAL_TASKS_STATE: TasksState = {
     progress: null,
     specMode: false,
     awaitingApproval: false,
+    spawnEnabled: false,
   },
 };
diff --git a/packages/client/src/slices/tokens.ts b/packages/client/src/slices/tokens.ts
@@ -5,7 +5,6 @@ export interface TokensState {
   numTurns: number;
   turnIndex: number;
   numCompactions: number;
-  compacting: boolean;
 }
 
 export const DEFAULT_CONTEXT_CEILING = 200_000;
@@ -17,5 +16,4 @@ export const INITIAL_TOKENS_STATE: TokensState = {
   numTurns: 0,
   turnIndex: 0,
   numCompactions: 0,
-  compacting: false,
 };