feat: alot, code highlight, related tasks, group by project and other

package.json

@@ -85,6 +85,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "ssh-config": "^5.0.4",

pnpm-lock.yaml

@@ -89,6 +89,9 @@ importers:
       react-markdown:
         specifier: ^10.1.0
         version: 10.1.0(@types/react@18.3.27)(react@18.3.1)
+      rehype-highlight:
+        specifier: ^7.0.2
+        version: 7.0.2
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
@@ -3158,9 +3161,15 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
   hast-util-to-jsx-runtime@2.3.6:
     resolution: {integrity: sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==}
 
+  hast-util-to-text@4.0.2:
+    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
+
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
@@ -3170,6 +3179,10 @@ packages:
   hermes-parser@0.25.1:
     resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   hosted-git-info@4.1.0:
     resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
     engines: {node: '>=10'}
@@ -3632,6 +3645,9 @@ packages:
     resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
     engines: {node: '>=8'}
 
+  lowlight@3.3.0:
+    resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -4418,6 +4434,9 @@ packages:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
+  rehype-highlight@7.0.2:
+    resolution: {integrity: sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==}
+
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
@@ -4997,6 +5016,9 @@ packages:
     resolution: {integrity: sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 
+  unist-util-find-after@5.0.0:
+    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
+
   unist-util-is@6.0.1:
     resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
 
@@ -8569,6 +8591,10 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
   hast-util-to-jsx-runtime@2.3.6:
     dependencies:
       '@types/estree': 1.0.8
@@ -8589,6 +8615,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  hast-util-to-text@4.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      hast-util-is-element: 3.0.0
+      unist-util-find-after: 5.0.0
+
   hast-util-whitespace@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -8599,6 +8632,8 @@ snapshots:
     dependencies:
       hermes-estree: 0.25.1
 
+  highlight.js@11.11.1: {}
+
   hosted-git-info@4.1.0:
     dependencies:
       lru-cache: 6.0.0
@@ -9068,6 +9103,12 @@ snapshots:
 
   lowercase-keys@2.0.0: {}
 
+  lowlight@3.3.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      highlight.js: 11.11.1
+
   lru-cache@10.4.3: {}
 
   lru-cache@11.2.6: {}
@@ -10056,6 +10097,14 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  rehype-highlight@7.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-to-text: 4.0.2
+      lowlight: 3.3.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
   remark-gfm@4.0.1:
     dependencies:
       '@types/mdast': 4.0.4
@@ -10772,6 +10821,11 @@ snapshots:
     dependencies:
       imurmurhash: 0.1.4
 
+  unist-util-find-after@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.1
+
   unist-util-is@6.0.1:
     dependencies:
       '@types/unist': 3.0.3

src/main/index.ts

@@ -17,12 +17,34 @@ import {
   WINDOW_ZOOM_FACTOR_CHANGED_CHANNEL,
 } from '@shared/constants';
 import { createLogger } from '@shared/utils/logger';
-import { app, BrowserWindow, ipcMain } from 'electron';
+import { app, BrowserWindow } from 'electron';
 import { existsSync } from 'fs';
 import { join } from 'path';
 
+const CONTEXT_CHANGED = 'context:changed';
+const SSH_STATUS = 'ssh:status';
+const TEAM_CHANGE = 'team:change';
+const WINDOW_FULLSCREEN_CHANGED = 'window:fullscreen-changed';
+
 import { initializeIpcHandlers, removeIpcHandlers } from './ipc/handlers';
+import { HttpServer } from './services/infrastructure/HttpServer';
 import { getProjectsBasePath, getTodosBasePath } from './utils/pathDecoder';
+import {
+  configManager,
+  LocalFileSystemProvider,
+  MemberStatsComputer,
+  NotificationManager,
+  ServiceContext,
+  ServiceContextRegistry,
+  SshConnectionManager,
+  TeamAgentToolsInstaller,
+  TeamDataService,
+  TeamMemberLogsFinder,
+  TeamProvisioningService,
+  UpdaterService,
+} from './services';
+
+const logger = createLogger('App');
 
 // Window icon path for non-mac platforms.
 const getWindowIconPath = (): string | undefined => {
@@ -42,16 +64,6 @@ const getWindowIconPath = (): string | undefined => {
   return undefined;
 };
 
-const logger = createLogger('App');
-// IPC channel constants (duplicated from @preload to avoid boundary violation)
-const SSH_STATUS = 'ssh:status';
-const CONTEXT_CHANGED = 'context:changed';
-const WINDOW_FULLSCREEN_CHANGED = 'window:fullscreen-changed';
-const HTTP_SERVER_START = 'httpServer:start';
-const HTTP_SERVER_STOP = 'httpServer:stop';
-const HTTP_SERVER_GET_STATUS = 'httpServer:getStatus';
-const TEAM_CHANGE = 'team:change';
-
 process.on('unhandledRejection', (reason) => {
   logger.error('Unhandled promise rejection in main process:', reason);
 });
@@ -60,22 +72,6 @@ process.on('uncaughtException', (error) => {
   logger.error('Uncaught exception in main process:', error);
 });
 
-import { HttpServer } from './services/infrastructure/HttpServer';
-import {
-  configManager,
-  LocalFileSystemProvider,
-  MemberStatsComputer,
-  NotificationManager,
-  ServiceContext,
-  ServiceContextRegistry,
-  SshConnectionManager,
-  TeamAgentToolsInstaller,
-  TeamDataService,
-  TeamMemberLogsFinder,
-  TeamProvisioningService,
-  UpdaterService,
-} from './services';
-
 // =============================================================================
 // Application State
 // =============================================================================
@@ -334,47 +330,13 @@ function initializeServices(): void {
       onClaudeRootPathUpdated: (_claudeRootPath: string | null) => {
         reconfigureLocalContextForClaudeRoot();
       },
+    },
+    {
+      httpServer,
+      startHttpServer: () => startHttpServer(handleModeSwitch),
     }
   );
 
-  // HTTP Server control IPC handlers
-  ipcMain.handle(HTTP_SERVER_START, async () => {
-    try {
-      if (httpServer.isRunning()) {
-        return { success: true, data: { running: true, port: httpServer.getPort() } };
-      }
-      await startHttpServer(handleModeSwitch);
-      // Persist the enabled state
-      configManager.updateConfig('httpServer', { enabled: true, port: httpServer.getPort() });
-      return { success: true, data: { running: true, port: httpServer.getPort() } };
-    } catch (error) {
-      logger.error('Failed to start HTTP server via IPC:', error);
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : 'Failed to start server',
-      };
-    }
-  });
-
-  ipcMain.handle(HTTP_SERVER_STOP, async () => {
-    try {
-      await httpServer.stop();
-      // Persist the disabled state
-      configManager.updateConfig('httpServer', { enabled: false });
-      return { success: true, data: { running: false, port: httpServer.getPort() } };
-    } catch (error) {
-      logger.error('Failed to stop HTTP server via IPC:', error);
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : 'Failed to stop server',
-      };
-    }
-  });
-
-  ipcMain.handle(HTTP_SERVER_GET_STATUS, () => {
-    return { success: true, data: { running: httpServer.isRunning(), port: httpServer.getPort() } };
-  });
-
   // Forward SSH state changes to renderer and HTTP SSE clients
   sshConnectionManager.on('state-change', (status: unknown) => {
     if (mainWindow && !mainWindow.isDestroyed()) {
@@ -451,6 +413,10 @@ function shutdownServices(): void {
     todoChangeCleanup();
     todoChangeCleanup = null;
   }
+  if (teamChangeCleanup) {
+    teamChangeCleanup();
+    teamChangeCleanup = null;
+  }
 
   // Dispose all contexts (including local)
   if (contextRegistry) {

src/main/ipc/handlers.ts

@@ -11,6 +11,7 @@
  * - notifications.ts: Notification management
  * - config.ts: App configuration
  * - ssh.ts: SSH connection management
+ * - httpServer.ts: HTTP sidecar server control
  */
 
 import { createLogger } from '@shared/utils/logger';
@@ -22,6 +23,11 @@ import {
   registerContextHandlers,
   removeContextHandlers,
 } from './context';
+import {
+  initializeHttpServerHandlers,
+  registerHttpServerHandlers,
+  removeHttpServerHandlers,
+} from './httpServer';
 
 const logger = createLogger('IPC:handlers');
 import { registerNotificationHandlers, removeNotificationHandlers } from './notifications';
@@ -62,6 +68,7 @@ import type {
   TeamProvisioningService,
   UpdaterService,
 } from '../services';
+import type { HttpServer } from '../services/infrastructure/HttpServer';
 
 /**
  * Initializes IPC handlers with service registry.
@@ -78,6 +85,10 @@ export function initializeIpcHandlers(
     rewire: (context: ServiceContext) => void;
     full: (context: ServiceContext) => void;
     onClaudeRootPathUpdated: (claudeRootPath: string | null) => Promise<void> | void;
+  },
+  httpServerDeps?: {
+    httpServer: HttpServer;
+    startHttpServer: () => Promise<void>;
   }
 ): void {
   // Initialize domain handlers with registry
@@ -97,6 +108,9 @@ export function initializeIpcHandlers(
   initializeConfigHandlers({
     onClaudeRootPathUpdated: contextCallbacks.onClaudeRootPathUpdated,
   });
+  if (httpServerDeps) {
+    initializeHttpServerHandlers(httpServerDeps.httpServer, httpServerDeps.startHttpServer);
+  }
 
   // Register all handlers
   registerProjectHandlers(ipcMain);
@@ -112,6 +126,9 @@ export function initializeIpcHandlers(
   registerContextHandlers(ipcMain);
   registerTeamHandlers(ipcMain);
   registerWindowHandlers(ipcMain);
+  if (httpServerDeps) {
+    registerHttpServerHandlers(ipcMain);
+  }
 
   logger.info('All handlers registered');
 }
@@ -134,6 +151,7 @@ export function removeIpcHandlers(): void {
   removeContextHandlers(ipcMain);
   removeTeamHandlers(ipcMain);
   removeWindowHandlers(ipcMain);
+  removeHttpServerHandlers(ipcMain);
 
   logger.info('All handlers removed');
 }

src/main/ipc/httpServer.ts

@@ -0,0 +1,103 @@
+/**
+ * IPC Handlers for HTTP Server Operations.
+ *
+ * Handlers:
+ * - httpServer:start: Start the HTTP sidecar server
+ * - httpServer:stop: Stop the HTTP sidecar server
+ * - httpServer:getStatus: Get HTTP server running status and port
+ */
+
+import { createLogger } from '@shared/utils/logger';
+import { type IpcMain } from 'electron';
+
+import { configManager } from '../services';
+
+import type { HttpServer } from '../services/infrastructure/HttpServer';
+
+const logger = createLogger('IPC:httpServer');
+
+let httpServer: HttpServer;
+let startServer: () => Promise<void>;
+
+/**
+ * Initializes HTTP server handlers with service instances.
+ */
+export function initializeHttpServerHandlers(
+  server: HttpServer,
+  startHttpServer: () => Promise<void>
+): void {
+  httpServer = server;
+  startServer = startHttpServer;
+}
+
+/**
+ * Registers all HTTP server IPC handlers.
+ */
+export function registerHttpServerHandlers(ipcMain: IpcMain): void {
+  ipcMain.handle('httpServer:start', handleStart);
+  ipcMain.handle('httpServer:stop', handleStop);
+  ipcMain.handle('httpServer:getStatus', handleGetStatus);
+
+  logger.info('HTTP server handlers registered');
+}
+
+/**
+ * Removes all HTTP server IPC handlers.
+ */
+export function removeHttpServerHandlers(ipcMain: IpcMain): void {
+  ipcMain.removeHandler('httpServer:start');
+  ipcMain.removeHandler('httpServer:stop');
+  ipcMain.removeHandler('httpServer:getStatus');
+
+  logger.info('HTTP server handlers removed');
+}
+
+// =============================================================================
+// Handler Implementations
+// =============================================================================
+
+async function handleStart(): Promise<{
+  success: boolean;
+  data?: { running: boolean; port: number | null };
+  error?: string;
+}> {
+  try {
+    if (httpServer.isRunning()) {
+      return { success: true, data: { running: true, port: httpServer.getPort() } };
+    }
+    await startServer();
+    configManager.updateConfig('httpServer', { enabled: true, port: httpServer.getPort() });
+    return { success: true, data: { running: true, port: httpServer.getPort() } };
+  } catch (error) {
+    logger.error('Failed to start HTTP server via IPC:', error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to start server',
+    };
+  }
+}
+
+async function handleStop(): Promise<{
+  success: boolean;
+  data?: { running: boolean; port: number | null };
+  error?: string;
+}> {
+  try {
+    await httpServer.stop();
+    configManager.updateConfig('httpServer', { enabled: false });
+    return { success: true, data: { running: false, port: httpServer.getPort() } };
+  } catch (error) {
+    logger.error('Failed to stop HTTP server via IPC:', error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Failed to stop server',
+    };
+  }
+}
+
+function handleGetStatus(): {
+  success: boolean;
+  data: { running: boolean; port: number | null };
+} {
+  return { success: true, data: { running: httpServer.isRunning(), port: httpServer.getPort() } };
+}

src/main/ipc/teams.ts

@@ -181,60 +181,70 @@ async function handleGetData(
   if (!validated.valid) {
     return { success: false, error: validated.error ?? 'Invalid teamName' };
   }
-  return wrapTeamHandler('getData', async () => {
+  const tn = validated.value!;
-    const tn = validated.value!;
+  let data: TeamData;
-    const data = await getTeamDataService().getTeamData(tn);
+  try {
-    const provisioning = getTeamProvisioningService();
+    data = await getTeamDataService().getTeamData(tn);
-    const isAlive = provisioning.isTeamAlive(tn);
+  } catch (error) {
-
+    const message = error instanceof Error ? error.message : String(error);
-    if (isAlive) {
+    if (
-      // Fire-and-forget: relay can take time (waits for lead reply).
+      message === `Team not found: ${tn}` &&
-      void provisioning.relayLeadInboxMessages(tn).catch(() => undefined);
+      getTeamProvisioningService().hasProvisioningRun(tn)
+    ) {
+      return { success: false, error: 'TEAM_PROVISIONING' };
     }
+    logger.error(`[teams:getData] ${message}`);
+    return { success: false, error: message };
+  }
+  const provisioning = getTeamProvisioningService();
+  const isAlive = provisioning.isTeamAlive(tn);
 
-    const live = provisioning.getLiveLeadProcessMessages(tn);
+  if (isAlive) {
-    if (live.length === 0) {
+    void provisioning.relayLeadInboxMessages(tn).catch(() => undefined);
-      return { ...data, isAlive };
+  }
+
+  const live = provisioning.getLiveLeadProcessMessages(tn);
+  if (live.length === 0) {
+    return { success: true, data: { ...data, isAlive } };
+  }
+
+  const normalizeText = (text: string): string => text.trim().replace(/\r\n/g, '\n');
+  const leadSessionTextFingerprints = new Set<string>();
+  for (const msg of data.messages) {
+    if ((msg as { source?: unknown }).source !== 'lead_session') continue;
+    if (typeof msg.from !== 'string' || typeof msg.text !== 'string') continue;
+    leadSessionTextFingerprints.add(`${msg.from}\0${normalizeText(msg.text)}`);
+  }
+
+  const keyFor = (m: {
+    messageId?: string;
+    timestamp: string;
+    from: string;
+    text: string;
+  }): string => {
+    if (typeof m.messageId === 'string' && m.messageId.trim().length > 0) {
+      return m.messageId;
     }
+    return `${m.timestamp}\0${m.from}\0${(m.text ?? '').slice(0, 80)}`;
+  };
 
-    const normalizeText = (text: string): string => text.trim().replace(/\r\n/g, '\n');
+  const merged: typeof data.messages = [];
-    const leadSessionTextFingerprints = new Set<string>();
+  const seen = new Set<string>();
-    for (const msg of data.messages) {
+  for (const msg of [...data.messages, ...live]) {
-      if ((msg as { source?: unknown }).source !== 'lead_session') continue;
+    if ((msg as { source?: unknown }).source === 'lead_process') {
-      if (typeof msg.from !== 'string' || typeof msg.text !== 'string') continue;
+      const fp = `${msg.from}\0${normalizeText(msg.text ?? '')}`;
-      leadSessionTextFingerprints.add(`${msg.from}\0${normalizeText(msg.text)}`);
+      if (leadSessionTextFingerprints.has(fp)) {
-    }
+        continue;
-
-    const keyFor = (m: {
-      messageId?: string;
-      timestamp: string;
-      from: string;
-      text: string;
-    }): string => {
-      if (typeof m.messageId === 'string' && m.messageId.trim().length > 0) {
-        return m.messageId;
       }
-      return `${m.timestamp}\0${m.from}\0${(m.text ?? '').slice(0, 80)}`;
-    };
-
-    const merged: typeof data.messages = [];
-    const seen = new Set<string>();
-    for (const msg of [...data.messages, ...live]) {
-      if ((msg as { source?: unknown }).source === 'lead_process') {
-        const fp = `${msg.from}\0${normalizeText(msg.text ?? '')}`;
-        if (leadSessionTextFingerprints.has(fp)) {
-          continue;
-        }
-      }
-      const key = keyFor(msg);
-      if (seen.has(key)) continue;
-      seen.add(key);
-      merged.push(msg);
     }
-    merged.sort((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
+    const key = keyFor(msg);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    merged.push(msg);
+  }
+  merged.sort((a, b) => Date.parse(b.timestamp) - Date.parse(a.timestamp));
 
-    return { ...data, isAlive, messages: merged };
+  return { success: true, data: { ...data, isAlive, messages: merged } };
-  });
 }
 
 async function handleDeleteTeam(
@@ -548,14 +558,28 @@ async function handleSendMessage(
     }
   }
 
-  return wrapTeamHandler('sendMessage', () =>
+  return wrapTeamHandler('sendMessage', async () => {
-    getTeamDataService().sendMessage(validatedTeamName.value!, {
+    const tn = validatedTeamName.value!;
+    const result = await getTeamDataService().sendMessage(tn, {
       member: validatedMember.value!,
       text: payload.text!,
       summary: payload.summary,
       from: payload.from,
-    })
+    });
-  );
+
+    // Best-effort: if messaging the lead while process is alive, relay immediately (no UI dependency).
+    try {
+      const provisioning = getTeamProvisioningService();
+      if (provisioning.isTeamAlive(tn)) {
+        // Avoid reading unrelated inboxes; relayLeadInboxMessages will no-op when nothing new exists.
+        void provisioning.relayLeadInboxMessages(tn).catch(() => undefined);
+      }
+    } catch {
+      // ignore
+    }
+
+    return result;
+  });
 }
 
 async function handleCreateTask(
@@ -596,6 +620,17 @@ async function handleCreateTask(
       return { success: false, error: 'blockedBy must be an array of task ID strings' };
     }
   }
+  if (payload.related !== undefined) {
+    if (!Array.isArray(payload.related) || payload.related.some((id) => typeof id !== 'string')) {
+      return { success: false, error: 'related must be an array of task ID strings' };
+    }
+    for (const id of payload.related) {
+      const validated = validateTaskId(id);
+      if (!validated.valid) {
+        return { success: false, error: validated.error ?? 'Invalid related task id' };
+      }
+    }
+  }
   if (payload.prompt !== undefined) {
     if (typeof payload.prompt !== 'string') {
       return { success: false, error: 'prompt must be a string' };
@@ -614,6 +649,7 @@ async function handleCreateTask(
       description: payload.description?.trim(),
       owner: payload.owner?.trim() || undefined,
       blockedBy: payload.blockedBy,
+      related: payload.related,
       prompt: payload.prompt?.trim() || undefined,
       startImmediately: payload.startImmediately,
     })

src/main/services/team/TeamDataService.ts

@@ -38,6 +38,7 @@ import type {
   TeamSummary,
   TeamTask,
   TeamTaskStatus,
+  TeamTaskWithKanban,
   UpdateKanbanPatch,
 } from '@shared/types';
 
@@ -196,11 +197,17 @@ export class TeamDataService {
       }
     }
 
+    const tasksWithKanban: TeamTaskWithKanban[] = tasks.map((task) => {
+      const col = kanbanState.tasks[task.id]?.column;
+      const kanbanColumn = col === 'review' || col === 'approved' ? col : undefined;
+      return { ...task, kanbanColumn };
+    });
+
     const members = this.memberResolver.resolveMembers(
       config,
       metaMembers,
       inboxNames,
-      tasks,
+      tasksWithKanban,
       messages
     );
 
@@ -217,10 +224,16 @@ export class TeamDataService {
       }
     }
 
+    const tasksToReturn: TeamTaskWithKanban[] = tasks.map((task) => {
+      const col = kanbanState.tasks[task.id]?.column;
+      const kanbanColumn = col === 'review' || col === 'approved' ? col : undefined;
+      return { ...task, kanbanColumn };
+    });
+
     return {
       teamName,
       config,
-      tasks,
+      tasks: tasksToReturn,
       members,
       messages,
       kanbanState,
@@ -232,6 +245,7 @@ export class TeamDataService {
     const nextId = await this.taskReader.getNextTaskId(teamName);
 
     const blockedBy = request.blockedBy?.filter((id) => id.length > 0) ?? [];
+    const related = request.related?.filter((id) => id.length > 0 && id !== nextId) ?? [];
 
     let description = request.description
       ? `${request.subject}\n\n${request.description}`
@@ -262,6 +276,7 @@ export class TeamDataService {
       status: shouldStart ? 'in_progress' : 'pending',
       blocks: [],
       blockedBy,
+      related: related.length > 0 ? related : undefined,
       projectPath,
     };
 

src/main/services/team/TeamMemberResolver.ts

@@ -3,7 +3,7 @@ import type {
   MemberStatus,
   ResolvedTeamMember,
   TeamConfig,
-  TeamTask,
+  TeamTaskWithKanban,
 } from '@shared/types';
 
 export class TeamMemberResolver {
@@ -11,7 +11,7 @@ export class TeamMemberResolver {
     config: TeamConfig,
     metaMembers: TeamConfig['members'],
     inboxNames: string[],
-    tasks: TeamTask[],
+    tasks: TeamTaskWithKanban[],
     messages: InboxMessage[]
   ): ResolvedTeamMember[] {
     const names = new Set<string>();
@@ -70,7 +70,10 @@ export class TeamMemberResolver {
     const members: ResolvedTeamMember[] = [];
     for (const name of names) {
       const ownedTasks = tasks.filter((task) => task.owner === name);
-      const currentTask = ownedTasks.find((task) => task.status === 'in_progress') ?? null;
+      const currentTask =
+        ownedTasks.find(
+          (task) => task.status === 'in_progress' && task.kanbanColumn !== 'approved'
+        ) ?? null;
       const memberMessages = messages.filter((message) => message.from === name);
       const latestMessage = memberMessages[0] ?? null;
       const status = this.resolveStatus(latestMessage);

src/main/services/team/TeamProvisioningService.ts

@@ -113,8 +113,11 @@ interface ProvisioningRun {
     leadName: string;
     startedAt: string;
     textParts: string[];
-    resolve: (text: string) => void;
+    settled: boolean;
-    reject: (error: string) => void;
+    idleHandle: NodeJS.Timeout | null;
+    idleMs: number;
+    resolveOnce: (text: string) => void;
+    rejectOnce: (error: string) => void;
     timeoutHandle: NodeJS.Timeout;
   } | null;
 }
@@ -266,6 +269,13 @@ function buildTaskStatusProtocol(teamName: string): string {
    node "$HOME/.claude/tools/teamctl.js" --team "${teamName}" task comment <taskId> --text "<summary of your finding or decision>" --from "<your-name>"
    Do NOT comment on trivial coordination messages. Only comment when the information is valuable context for the task.
 8. When sending a message about a specific task, include #<taskId> in your SendMessage summary field for traceability.
+9. Review workflow clarity (IMPORTANT):
+   - The work task (e.g. #1) is the thing that must end up APPROVED after review.
+   - If you are reviewing work for task #X, run review approve/request-changes on #X (the work task).
+   - Do NOT approve a separate "review task" (e.g. #2 created just to ask for a review) — that will put the wrong task into APPROVED.
+   - Typical flow:
+     a) Owner finishes work on #X → task complete #X
+     b) Reviewer accepts → review approve #X
 Failure to follow this protocol means the task board will show incorrect status.`;
 }
 
@@ -974,6 +984,8 @@ export class TeamProvisioningService {
         `[${request.teamName}] Launching with --resume ${previousSessionId} for session continuity`
       );
     }
+    // New sessions: CLI creates its own ID. No --resume with synthetic name — docs say
+    // --resume is for existing sessions and may show an interactive picker if not found.
 
     try {
       child = spawn(claudePath, launchArgs, {
@@ -1225,18 +1237,43 @@ export class TeamProvisioningService {
         }),
       ].join('\n');
 
-      const captureTimeoutMs = 60_000;
+      const captureTimeoutMs = 15_000;
+      const captureIdleMs = 800;
       const capturePromise = new Promise<string>((resolve, reject) => {
         const timeoutHandle = setTimeout(() => {
           reject(new Error('Timed out waiting for lead reply'));
         }, captureTimeoutMs);
-        run.leadRelayCapture = {
+        const capture = {
           leadName,
           startedAt: nowIso(),
-          textParts: [],
+          textParts: [] as string[],
-          resolve,
+          settled: false,
-          reject,
+          idleHandle: null as NodeJS.Timeout | null,
+          idleMs: captureIdleMs,
           timeoutHandle,
+          resolveOnce: (text: string) => {
+            if (capture.settled) return;
+            capture.settled = true;
+            if (capture.idleHandle) {
+              clearTimeout(capture.idleHandle);
+              capture.idleHandle = null;
+            }
+            clearTimeout(capture.timeoutHandle);
+            resolve(text);
+          },
+          rejectOnce: (error: string) => {
+            if (capture.settled) return;
+            capture.settled = true;
+            if (capture.idleHandle) {
+              clearTimeout(capture.idleHandle);
+              capture.idleHandle = null;
+            }
+            clearTimeout(capture.timeoutHandle);
+            reject(new Error(error));
+          },
+        };
+        run.leadRelayCapture = {
+          ...capture,
         };
       });
 
@@ -1270,9 +1307,15 @@ export class TeamProvisioningService {
       try {
         replyText = (await capturePromise).trim() || null;
       } catch {
-        // ignore
+        // Best-effort: if we captured some text but never got result.success, keep it.
+        const partial = run.leadRelayCapture?.textParts?.join('')?.trim();
+        replyText = partial && partial.length > 0 ? partial : null;
       } finally {
         if (run.leadRelayCapture) {
+          if (run.leadRelayCapture.idleHandle) {
+            clearTimeout(run.leadRelayCapture.idleHandle);
+            run.leadRelayCapture.idleHandle = null;
+          }
           clearTimeout(run.leadRelayCapture.timeoutHandle);
           run.leadRelayCapture = null;
         }
@@ -1309,6 +1352,13 @@ export class TeamProvisioningService {
     }
   }
 
+  /**
+   * Check if a team has an active provisioning run (started but not yet finished).
+   */
+  hasProvisioningRun(teamName: string): boolean {
+    return this.activeByTeam.has(teamName);
+  }
+
   /**
    * Check if a team has a live process.
    */
@@ -1436,27 +1486,54 @@ export class TeamProvisioningService {
     // stream-json output has various message types:
     // {"type":"assistant","content":[{"type":"text","text":"..."},...]}
     // {"type":"result","subtype":"success",...}
-    if (msg.type === 'assistant' && Array.isArray(msg.content)) {
+    if (msg.type === 'assistant') {
-      const textParts = (msg.content as Record<string, unknown>[])
+      const content = Array.isArray(msg.content)
+        ? (msg.content as Record<string, unknown>[])
+        : (() => {
+            const message = msg.message;
+            if (!message || typeof message !== 'object') return null;
+            const inner = (message as Record<string, unknown>).content;
+            return Array.isArray(inner) ? (inner as Record<string, unknown>[]) : null;
+          })();
+
+      const textParts = (content ?? [])
         .filter((part) => part.type === 'text' && typeof part.text === 'string')
         .map((part) => part.text as string);
       if (textParts.length > 0) {
         const text = textParts.join('');
         logger.debug(`[${run.teamName}] assistant: ${text.slice(0, 200)}`);
         if (run.leadRelayCapture) {
-          run.leadRelayCapture.textParts.push(text);
+          const capture = run.leadRelayCapture;
+          if (!capture.settled) {
+            capture.textParts.push(text);
+            if (capture.idleHandle) {
+              clearTimeout(capture.idleHandle);
+            }
+            capture.idleHandle = setTimeout(() => {
+              const combined = capture.textParts.join('').trim();
+              capture.resolveOnce(combined);
+            }, capture.idleMs);
+          }
         }
       }
     }
 
     if (msg.type === 'result') {
-      const subtype = msg.subtype as string | undefined;
+      const subtype =
+        typeof msg.subtype === 'string'
+          ? msg.subtype
+          : (() => {
+              const result = msg.result;
+              if (!result || typeof result !== 'object') return undefined;
+              const inner = (result as Record<string, unknown>).subtype;
+              return typeof inner === 'string' ? inner : undefined;
+            })();
       if (subtype === 'success') {
         logger.info(`[${run.teamName}] stream-json result: success — turn complete, process alive`);
         if (run.leadRelayCapture) {
           const capture = run.leadRelayCapture;
           const combined = capture.textParts.join('').trim();
-          capture.resolve(combined);
+          capture.resolveOnce(combined);
         }
         if (!run.provisioningComplete) {
           void this.handleProvisioningTurnComplete(run);
@@ -1466,7 +1543,7 @@ export class TeamProvisioningService {
           typeof msg.error === 'string' ? msg.error : JSON.stringify(msg.error ?? 'unknown');
         logger.warn(`[${run.teamName}] stream-json result: error — ${errorMsg}`);
         if (run.leadRelayCapture) {
-          run.leadRelayCapture.reject(errorMsg);
+          run.leadRelayCapture.rejectOnce(errorMsg);
         }
         if (!run.provisioningComplete) {
           const progress = updateProgress(

src/main/services/team/TeamTaskReader.ts

@@ -105,6 +105,9 @@ export class TeamTaskReader {
             : 'pending',
           blocks: Array.isArray(parsed.blocks) ? (parsed.blocks as string[]) : undefined,
           blockedBy: Array.isArray(parsed.blockedBy) ? (parsed.blockedBy as string[]) : undefined,
+          related: Array.isArray(parsed.related)
+            ? (parsed.related as unknown[]).filter((id): id is string => typeof id === 'string')
+            : undefined,
           createdAt,
           projectPath: typeof parsed.projectPath === 'string' ? parsed.projectPath : undefined,
           comments: Array.isArray(parsed.comments)

src/main/services/team/TeamTaskWriter.ts

@@ -51,6 +51,7 @@ export class TeamTaskWriter {
         description: task.description ?? '',
         blocks: task.blocks ?? [],
         blockedBy: task.blockedBy ?? [],
+        related: task.related ?? [],
         createdAt: task.createdAt ?? new Date().toISOString(),
       };
 

src/renderer/components/chat/CompactBoundary.tsx

@@ -10,6 +10,7 @@ import {
   TOOL_CALL_BORDER,
   TOOL_CALL_TEXT,
 } from '@renderer/constants/cssVariables';
+import { rehypePlugins } from '@renderer/utils/markdownPlugins';
 import { formatTokensCompact as formatTokens } from '@shared/utils/tokenFormatting';
 import { format } from 'date-fns';
 import { ChevronRight, Layers } from 'lucide-react';
@@ -146,7 +147,11 @@ export const CompactBoundary = ({
             style={{ borderColor: 'var(--chat-ai-border)' }}
           >
             {compactContent ? (
-              <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={rehypePlugins}
+                components={markdownComponents}
+              >
                 {compactContent}
               </ReactMarkdown>
             ) : (

src/renderer/components/chat/DisplayItemList.tsx

@@ -96,7 +96,7 @@ export const DisplayItemList = ({
   }
 
   return (
-    <div className="space-y-2">
+    <div className="min-w-0 space-y-2">
       {items.map((item, index) => {
         let itemKey = '';
         let element: React.ReactNode = null;

src/renderer/components/chat/LastOutputDisplay.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 
 import { useStore } from '@renderer/store';
+import { rehypePlugins } from '@renderer/utils/markdownPlugins';
 import { AlertTriangle, CheckCircle, FileCheck, XCircle } from 'lucide-react';
 import remarkGfm from 'remark-gfm';
 import { useShallow } from 'zustand/react/shallow';
@@ -88,7 +89,11 @@ export const LastOutputDisplay = ({
 
         {/* Content - scrollable */}
         <div className="max-h-96 overflow-y-auto px-4 py-3" data-search-content>
-          <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={rehypePlugins}
+            components={mdComponents}
+          >
             {textContent}
           </ReactMarkdown>
         </div>
@@ -231,7 +236,11 @@ export const LastOutputDisplay = ({
 
           {/* Plan content - scrollable */}
           <div className="max-h-96 overflow-y-auto px-4 py-3">
-            <ReactMarkdown remarkPlugins={[remarkGfm]} components={mdComponents}>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={rehypePlugins}
+              components={mdComponents}
+            >
               {planContent}
             </ReactMarkdown>
           </div>

src/renderer/components/chat/UserChatGroup.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown, { type Components } from 'react-markdown';
 import { api } from '@renderer/api';
 import { useTabUI } from '@renderer/hooks/useTabUI';
 import { useStore } from '@renderer/store';
+import { rehypePlugins } from '@renderer/utils/markdownPlugins';
 import { createLogger } from '@shared/utils/logger';
 import { format } from 'date-fns';
 import { User } from 'lucide-react';
@@ -204,7 +205,10 @@ function createUserMarkdownComponents(
 
       if (isBlock) {
         return (
-          <code className="block font-mono text-xs" style={{ color: userTextColor }}>
+          <code
+            className={`block font-mono text-xs ${className ?? ''}`.trim()}
+            style={{ color: userTextColor }}
+          >
             {hl(children)}
           </code>
         );
@@ -442,7 +446,11 @@ const UserChatGroupInner = ({ userGroup }: Readonly<UserChatGroupProps>): React.
             <CopyButton text={textContent} bgColor="var(--chat-user-bg)" />
 
             <div className="text-sm" style={{ color: 'var(--chat-user-text)' }} data-search-content>
-              <ReactMarkdown remarkPlugins={[remarkGfm]} components={userMarkdownComponents}>
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                rehypePlugins={rehypePlugins}
+                components={userMarkdownComponents}
+              >
                 {displayText}
               </ReactMarkdown>
             </div>

src/renderer/components/chat/items/BaseItem.tsx

@@ -181,7 +181,7 @@ export const BaseItem: React.FC<BaseItemProps> = ({
       {/* Expanded Content */}
       {isExpanded && children && (
         <div
-          className="ml-2 mt-2 space-y-3 pl-6"
+          className="ml-2 mt-2 min-w-0 space-y-3 pl-6"
           style={{ borderLeft: '2px solid var(--color-border)' }}
         >
           {children}

src/renderer/components/chat/markdownComponents.tsx

@@ -110,7 +110,7 @@ export function createMarkdownComponents(searchCtx: SearchContext | null): Compo
       </del>
     ),
 
-    // Inline code vs block code
+    // Inline code vs block code (block is highlighted by rehype-highlight; preserve hljs class)
     code: ({ className, children }) => {
       const hasLanguageClass = className?.includes('language-');
       const content = typeof children === 'string' ? children : '';
@@ -119,7 +119,10 @@ export function createMarkdownComponents(searchCtx: SearchContext | null): Compo
 
       if (isBlock) {
         return (
-          <code className="block font-mono text-xs" style={{ color: 'var(--color-text)' }}>
+          <code
+            className={`block font-mono text-xs ${className ?? ''}`.trim()}
+            style={{ color: 'var(--color-text)' }}
+          >
             {hl(children)}
           </code>
         );

src/renderer/components/chat/viewers/MarkdownViewer.tsx

@@ -23,6 +23,7 @@ import {
   PROSE_TABLE_HEADER_BG,
 } from '@renderer/constants/cssVariables';
 import { useStore } from '@renderer/store';
+import { rehypePlugins } from '@renderer/utils/markdownPlugins';
 import { FileText } from 'lucide-react';
 import remarkGfm from 'remark-gfm';
 import { useShallow } from 'zustand/react/shallow';
@@ -137,7 +138,7 @@ function createViewerMarkdownComponents(searchCtx: SearchContext | null): Compon
       </del>
     ),
 
-    // Code: inline vs block detection
+    // Code: inline vs block detection (block code is highlighted by rehype-highlight; preserve hljs class)
     code: (props) => {
       const {
         className: codeClassName,
@@ -155,7 +156,10 @@ function createViewerMarkdownComponents(searchCtx: SearchContext | null): Compon
 
       if (isBlock) {
         return (
-          <code className="font-mono text-xs" style={{ color: COLOR_TEXT }}>
+          <code
+            className={`break-all font-mono text-xs ${codeClassName ?? ''}`.trim()}
+            style={{ color: COLOR_TEXT }}
+          >
             {hl(children)}
           </code>
         );
@@ -163,7 +167,7 @@ function createViewerMarkdownComponents(searchCtx: SearchContext | null): Compon
       // Inline code — no hl(); parent block element's hl() descends here
       return (
         <code
-          className="rounded px-1.5 py-0.5 font-mono text-xs"
+          className="break-all rounded px-1.5 py-0.5 font-mono text-xs"
           style={{
             backgroundColor: PROSE_CODE_BG,
             color: PROSE_CODE_TEXT,
@@ -177,7 +181,7 @@ function createViewerMarkdownComponents(searchCtx: SearchContext | null): Compon
     // Code blocks
     pre: ({ children }) => (
       <pre
-        className="my-3 overflow-x-auto rounded-lg p-3 text-xs leading-relaxed"
+        className="my-3 max-w-full overflow-x-auto rounded-lg p-3 text-xs leading-relaxed"
         style={{
           backgroundColor: PROSE_PRE_BG,
           border: `1px solid ${PROSE_PRE_BORDER}`,
@@ -296,7 +300,7 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
 
   return (
     <div
-      className={`overflow-hidden rounded-lg shadow-sm ${copyable && !label ? 'group relative' : ''} ${className}`}
+      className={`min-w-0 overflow-hidden rounded-lg shadow-sm ${copyable && !label ? 'group relative' : ''} ${className}`}
       style={{
         backgroundColor: CODE_BG,
         border: `1px solid ${CODE_BORDER}`,
@@ -328,9 +332,13 @@ export const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
       )}
 
       {/* Markdown content with scroll */}
-      <div className={`overflow-auto ${maxHeight}`}>
+      <div className={`min-w-0 overflow-auto ${maxHeight}`}>
-        <div className="p-4">
+        <div className="min-w-0 break-words p-4">
-          <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={rehypePlugins}
+            components={components}
+          >
             {content}
           </ReactMarkdown>
         </div>

src/renderer/components/common/UpdateDialog.tsx

@@ -10,6 +10,7 @@ import ReactMarkdown from 'react-markdown';
 
 import { markdownComponents } from '@renderer/components/chat/markdownComponents';
 import { useStore } from '@renderer/store';
+import { rehypePlugins } from '@renderer/utils/markdownPlugins';
 import { X } from 'lucide-react';
 import remarkGfm from 'remark-gfm';
 
@@ -150,7 +151,11 @@ export const UpdateDialog = (): React.JSX.Element | null => {
               color: 'var(--color-text-muted)',
             }}
           >
-            <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={rehypePlugins}
+              components={markdownComponents}
+            >
               {normalizeReleaseNotes(releaseNotes)}
             </ReactMarkdown>
           </div>

src/renderer/components/layout/Sidebar.tsx

@@ -16,11 +16,12 @@ import { useShallow } from 'zustand/react/shallow';
 
 import { DateGroupedSessions } from '../sidebar/DateGroupedSessions';
 import { GlobalTaskList } from '../sidebar/GlobalTaskList';
-import { defaultTaskFiltersState, TaskFiltersPopover } from '../sidebar/TaskFiltersPopover';
+import { TaskFiltersPopover } from '../sidebar/TaskFiltersPopover';
+import { defaultTaskFiltersState } from '../sidebar/taskFiltersState';
 
 import { SidebarHeader } from './SidebarHeader';
 
-import type { TaskFiltersState } from '../sidebar/TaskFiltersPopover';
+import type { TaskFiltersState } from '../sidebar/taskFiltersState';
 
 type SidebarTab = 'tasks' | 'sessions';
 
@@ -106,7 +107,7 @@ export const Sidebar = (): React.JSX.Element => {
       }}
     >
       <div
-        className="flex min-w-0 flex-1 flex-col overflow-hidden"
+        className="flex min-w-0 flex-1 flex-col overflow-hidden pr-2"
         style={{
           width: '100%',
           minWidth: sidebarCollapsed ? 0 : width,

src/renderer/components/sidebar/GlobalTaskList.tsx

@@ -1,23 +1,56 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@renderer/components/ui/select';
 import { useStore } from '@renderer/store';
 import { normalizePath } from '@renderer/utils/pathNormalize';
-import { getNonEmptyTaskCategories, groupTasksByDate } from '@renderer/utils/taskGrouping';
+import {
+  getNonEmptyTaskCategories,
+  groupTasksByDate,
+  groupTasksByProject,
+} from '@renderer/utils/taskGrouping';
 import { ListTodo, Search, X } from 'lucide-react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { SidebarTaskItem } from './SidebarTaskItem';
+import { TaskFiltersPopover } from './TaskFiltersPopover';
 import {
   defaultTaskFiltersState,
   getTaskUnreadCount,
-  TaskFiltersPopover,
   taskMatchesStatus,
   useReadStateSnapshot,
-} from './TaskFiltersPopover';
+} from './taskFiltersState';
 
-import type { TaskFiltersState } from './TaskFiltersPopover';
+import type { TaskFiltersState } from './taskFiltersState';
 import type { GlobalTask } from '@shared/types';
 
+const TASK_GROUPING_STORAGE_KEY = 'sidebarTasksGrouping';
+
+export type TaskGroupingMode = 'project' | 'time';
+
+function loadGroupingMode(): TaskGroupingMode {
+  try {
+    const v = localStorage.getItem(TASK_GROUPING_STORAGE_KEY);
+    if (v === 'project' || v === 'time') return v;
+  } catch {
+    /* ignore */
+  }
+  return 'project';
+}
+
+function saveGroupingMode(mode: TaskGroupingMode): void {
+  try {
+    localStorage.setItem(TASK_GROUPING_STORAGE_KEY, mode);
+  } catch {
+    /* ignore */
+  }
+}
+
 export interface GlobalTaskListProps {
   /** When true, do not render the header row (Tasks + Filters); parent renders tabs and filters. */
   hideHeader?: boolean;
@@ -90,10 +123,16 @@ export const GlobalTaskList = ({
   const filtersPopoverOpen = externalFiltersPopoverOpen ?? internalFiltersPopoverOpen;
   const setFiltersPopoverOpen = externalOnFiltersPopoverOpenChange ?? setInternalFiltersPopoverOpen;
   const [searchQuery, setSearchQuery] = useState('');
+  const [groupingMode, setGroupingModeState] = useState<TaskGroupingMode>(loadGroupingMode);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const hasFetchedRef = useRef(false);
   const readState = useReadStateSnapshot();
 
+  const setGroupingMode = (mode: TaskGroupingMode): void => {
+    setGroupingModeState(mode);
+    saveGroupingMode(mode);
+  };
+
   useEffect(() => {
     if (!hasFetchedRef.current) {
       hasFetchedRef.current = true;
@@ -144,6 +183,10 @@ export const GlobalTaskList = ({
 
   const grouped = useMemo(() => groupTasksByDate(filtered), [filtered]);
   const categories = useMemo(() => getNonEmptyTaskCategories(grouped), [grouped]);
+  const projectGroups = useMemo(() => groupTasksByProject(filtered), [filtered]);
+
+  const hasContent =
+    groupingMode === 'time' ? categories.length > 0 : projectGroups.some((g) => g.tasks.length > 0);
 
   return (
     <div className="flex size-full min-w-0 flex-col">
@@ -192,6 +235,23 @@ export const GlobalTaskList = ({
         )}
       </div>
 
+      {/* Grouping mode */}
+      <div
+        className="flex shrink-0 items-center gap-2 border-b px-2 py-1"
+        style={{ borderColor: 'var(--color-border)' }}
+      >
+        <span className="shrink-0 text-[11px] text-text-muted">Group by:</span>
+        <Select value={groupingMode} onValueChange={(v) => setGroupingMode(v as TaskGroupingMode)}>
+          <SelectTrigger className="h-7 min-w-0 flex-1 border-[var(--color-border)] px-2 text-[11px]">
+            <SelectValue placeholder="Group by" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="project">Project</SelectItem>
+            <SelectItem value="time">Time</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
       {/* Content */}
       <div className="flex-1 overflow-y-auto">
         {globalTasksLoading && globalTasks.length === 0 && (
@@ -202,7 +262,7 @@ export const GlobalTaskList = ({
           </div>
         )}
 
-        {!globalTasksLoading && categories.length === 0 && (
+        {!globalTasksLoading && !hasContent && (
           <div className="flex flex-col items-center gap-2 px-4 py-8 text-text-muted">
             <ListTodo className="size-8 opacity-40" />
             <span className="text-[12px]">
@@ -211,38 +271,68 @@ export const GlobalTaskList = ({
           </div>
         )}
 
-        {categories.map((category) => {
+        {groupingMode === 'project' &&
-          const tasks = grouped[category];
+          projectGroups.map((group) => {
-          let lastTeam: string | null = null;
+            if (group.tasks.length === 0) return null;
-
+            let lastTeam: string | null = null;
-          return (
+            return (
-            <div key={category}>
+              <div key={group.projectKey}>
-              {/* Date header */}
+                <div
-              <div
+                  className="sticky top-0 z-10 px-3 py-1.5 text-[11px] font-semibold text-text-secondary"
-                className="sticky top-0 z-10 px-3 py-1.5 text-[11px] font-semibold text-text-secondary"
+                  style={{ backgroundColor: 'var(--color-surface-sidebar)' }}
-                style={{ backgroundColor: 'var(--color-surface-sidebar)' }}
+                >
-              >
+                  {group.projectLabel}
-                {dateCategoryLabels[category] ?? category}
+                </div>
+                {group.tasks.map((task) => {
+                  const showTeamHeader = task.teamName !== lastTeam;
+                  lastTeam = task.teamName;
+                  return (
+                    <div key={`${task.teamName}-${task.id}`}>
+                      {showTeamHeader && (
+                        <div className="px-3 pb-0.5 pt-1.5 text-[10px] font-medium text-text-muted">
+                          Team: {task.teamDisplayName}
+                        </div>
+                      )}
+                      <SidebarTaskItem task={task} />
+                    </div>
+                  );
+                })}
               </div>
+            );
+          })}
 
-              {tasks.map((task) => {
+        {groupingMode === 'time' &&
-                const showTeamHeader = task.teamName !== lastTeam;
+          categories.map((category) => {
-                lastTeam = task.teamName;
+            const tasks = grouped[category];
+            let lastTeam: string | null = null;
 
-                return (
+            return (
-                  <div key={`${task.teamName}-${task.id}`}>
+              <div key={category}>
-                    {showTeamHeader && (
+                <div
-                      <div className="px-3 pb-0.5 pt-1.5 text-[10px] font-medium text-text-muted">
+                  className="sticky top-0 z-10 px-3 py-1.5 text-[11px] font-semibold text-text-secondary"
-                        Team: {task.teamDisplayName}
+                  style={{ backgroundColor: 'var(--color-surface-sidebar)' }}
-                      </div>
+                >
-                    )}
+                  {dateCategoryLabels[category] ?? category}
-                    <SidebarTaskItem task={task} />
+                </div>
-                  </div>
+
-                );
+                {tasks.map((task) => {
-              })}
+                  const showTeamHeader = task.teamName !== lastTeam;
-            </div>
+                  lastTeam = task.teamName;
-          );
+
-        })}
+                  return (
+                    <div key={`${task.teamName}-${task.id}`}>
+                      {showTeamHeader && (
+                        <div className="px-3 pb-0.5 pt-1.5 text-[10px] font-medium text-text-muted">
+                          Team: {task.teamDisplayName}
+                        </div>
+                      )}
+                      <SidebarTaskItem task={task} />
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
       </div>
     </div>
   );

src/renderer/components/sidebar/SidebarTaskItem.tsx

@@ -1,7 +1,7 @@
 import { useUnreadCommentCount } from '@renderer/hooks/useUnreadCommentCount';
 import { useStore } from '@renderer/store';
 import { format, isThisYear, isToday, isYesterday } from 'date-fns';
-import { CheckCircle2, Circle, Loader2 } from 'lucide-react';
+import { CheckCircle2, Circle, Eye, Loader2, ShieldCheck } from 'lucide-react';
 
 import type { GlobalTask, TeamTaskStatus } from '@shared/types';
 import type { LucideIcon } from 'lucide-react';
@@ -30,7 +30,12 @@ interface SidebarTaskItemProps {
 export const SidebarTaskItem = ({ task }: SidebarTaskItemProps): React.JSX.Element => {
   const openTeamTab = useStore((s) => s.openTeamTab);
   const unreadCount = useUnreadCommentCount(task.teamName, task.id, task.comments);
-  const cfg = statusConfig[task.status] ?? statusConfig.pending;
+  const cfg =
+    task.kanbanColumn === 'approved'
+      ? ({ icon: ShieldCheck, color: 'text-emerald-400', label: 'approved' } as const)
+      : task.kanbanColumn === 'review'
+        ? ({ icon: Eye, color: 'text-amber-400', label: 'in review' } as const)
+        : (statusConfig[task.status] ?? statusConfig.pending);
   const StatusIcon = cfg.icon;
   const dateLabel = formatTaskDate(task.createdAt);
 

src/renderer/components/sidebar/TaskFiltersPopover.tsx

@@ -1,27 +1,10 @@
-import { useSyncExternalStore } from 'react';
-
 import { Button } from '@renderer/components/ui/button';
 import { Checkbox } from '@renderer/components/ui/checkbox';
 import { Combobox } from '@renderer/components/ui/combobox';
 import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
-import { getSnapshot, getUnreadCount, subscribe } from '@renderer/services/commentReadStorage';
 import { Filter } from 'lucide-react';
 
-export type TaskStatusFilterId = 'todo' | 'in_progress' | 'done' | 'review' | 'approved';
+import { STATUS_OPTIONS, type TaskFiltersState, type TaskStatusFilterId } from './taskFiltersState';
-
-const STATUS_OPTIONS: { id: TaskStatusFilterId; label: string }[] = [
-  { id: 'todo', label: 'TODO' },
-  { id: 'in_progress', label: 'IN PROGRESS' },
-  { id: 'done', label: 'DONE' },
-  { id: 'review', label: 'REVIEW' },
-  { id: 'approved', label: 'APPROVED' },
-];
-
-export interface TaskFiltersState {
-  statusIds: Set<TaskStatusFilterId>;
-  teamName: string | null;
-  unreadOnly: boolean;
-}
 
 interface TaskFiltersPopoverProps {
   open: boolean;
@@ -152,44 +135,3 @@ export const TaskFiltersPopover = ({
     </Popover>
   );
 };
-
-export const defaultTaskFiltersState = (): TaskFiltersState => ({
-  statusIds: new Set(STATUS_OPTIONS.map((o) => o.id)),
-  teamName: null,
-  unreadOnly: false,
-});
-
-export function taskMatchesStatus(
-  task: { status: string; kanbanColumn?: 'review' | 'approved' },
-  statusIds: Set<TaskStatusFilterId>
-): boolean {
-  if (statusIds.size === 0) return false;
-  if (statusIds.size === STATUS_OPTIONS.length) return true;
-
-  const inTodo = task.status === 'pending' && !task.kanbanColumn;
-  const inProgress = task.status === 'in_progress';
-  const inDone = task.status === 'completed' && !task.kanbanColumn;
-  const inReview = task.kanbanColumn === 'review';
-  const inApproved = task.kanbanColumn === 'approved';
-
-  return (
-    (statusIds.has('todo') && inTodo) ||
-    (statusIds.has('in_progress') && inProgress) ||
-    (statusIds.has('done') && inDone) ||
-    (statusIds.has('review') && inReview) ||
-    (statusIds.has('approved') && inApproved)
-  );
-}
-
-export function useReadStateSnapshot(): ReturnType<typeof getSnapshot> {
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-
-export function getTaskUnreadCount(
-  readState: ReturnType<typeof getSnapshot>,
-  teamName: string,
-  taskId: string,
-  comments: { createdAt: string }[] | undefined
-): number {
-  return getUnreadCount(readState, teamName, taskId, comments ?? []);
-}

src/renderer/components/sidebar/taskFiltersState.ts

@@ -0,0 +1,60 @@
+import { useSyncExternalStore } from 'react';
+
+import { getSnapshot, getUnreadCount, subscribe } from '@renderer/services/commentReadStorage';
+
+export type TaskStatusFilterId = 'todo' | 'in_progress' | 'done' | 'review' | 'approved';
+
+export const STATUS_OPTIONS: { id: TaskStatusFilterId; label: string }[] = [
+  { id: 'todo', label: 'TODO' },
+  { id: 'in_progress', label: 'IN PROGRESS' },
+  { id: 'done', label: 'DONE' },
+  { id: 'review', label: 'REVIEW' },
+  { id: 'approved', label: 'APPROVED' },
+];
+
+export interface TaskFiltersState {
+  statusIds: Set<TaskStatusFilterId>;
+  teamName: string | null;
+  unreadOnly: boolean;
+}
+
+export const defaultTaskFiltersState = (): TaskFiltersState => ({
+  statusIds: new Set(STATUS_OPTIONS.map((o) => o.id)),
+  teamName: null,
+  unreadOnly: false,
+});
+
+export function taskMatchesStatus(
+  task: { status: string; kanbanColumn?: 'review' | 'approved' },
+  statusIds: Set<TaskStatusFilterId>
+): boolean {
+  if (statusIds.size === 0) return false;
+  if (statusIds.size === STATUS_OPTIONS.length) return true;
+
+  const inTodo = task.status === 'pending' && !task.kanbanColumn;
+  const inProgress = task.status === 'in_progress' && !task.kanbanColumn;
+  const inDone = task.status === 'completed' && !task.kanbanColumn;
+  const inReview = task.kanbanColumn === 'review';
+  const inApproved = task.kanbanColumn === 'approved';
+
+  return (
+    (statusIds.has('todo') && inTodo) ||
+    (statusIds.has('in_progress') && inProgress) ||
+    (statusIds.has('done') && inDone) ||
+    (statusIds.has('review') && inReview) ||
+    (statusIds.has('approved') && inApproved)
+  );
+}
+
+export function useReadStateSnapshot(): ReturnType<typeof getSnapshot> {
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+
+export function getTaskUnreadCount(
+  readState: ReturnType<typeof getSnapshot>,
+  teamName: string,
+  taskId: string,
+  comments: { createdAt: string }[] | undefined
+): number {
+  return getUnreadCount(readState, teamName, taskId, comments ?? []);
+}

src/renderer/components/team/TeamDetailView.tsx

@@ -32,12 +32,14 @@ import { TeamSessionsSection } from './TeamSessionsSection';
 import type { KanbanFilterState } from './kanban/KanbanFilterPopover';
 import type { MessagesFilterState } from './messages/MessagesFilterPopover';
 import type { Session } from '@renderer/types/data';
-import type { InboxMessage, ResolvedTeamMember, TeamTask } from '@shared/types';
+import type { InboxMessage, ResolvedTeamMember, TeamTaskWithKanban } from '@shared/types';
 
 interface TeamDetailViewProps {
   teamName: string;
 }
 
+const ACTIVE_PROVISIONING_STATES = new Set(['validating', 'spawning', 'monitoring', 'verifying']);
+
 interface CreateTaskDialogState {
   open: boolean;
   defaultSubject: string;
@@ -50,7 +52,7 @@ interface TimeWindow {
   end: number;
 }
 
-function filterKanbanTasks(tasks: TeamTask[], query: string): TeamTask[] {
+function filterKanbanTasks(tasks: TeamTaskWithKanban[], query: string): TeamTaskWithKanban[] {
   if (query.startsWith('#')) {
     const id = query.slice(1);
     return tasks.filter((t) => t.id === id);
@@ -66,7 +68,7 @@ function filterKanbanTasks(tasks: TeamTask[], query: string): TeamTask[] {
 
 export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Element => {
   const [requestChangesTaskId, setRequestChangesTaskId] = useState<string | null>(null);
-  const [selectedTask, setSelectedTask] = useState<TeamTask | null>(null);
+  const [selectedTask, setSelectedTask] = useState<TeamTaskWithKanban | null>(null);
   const [selectedMember, setSelectedMember] = useState<ResolvedTeamMember | null>(null);
   const [pendingRepliesByMember, setPendingRepliesByMember] = useState<Record<string, number>>({});
   const [createTaskDialog, setCreateTaskDialog] = useState<CreateTaskDialogState>({
@@ -113,6 +115,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
     reviewActionError,
     launchTeam,
     provisioningError,
+    isTeamProvisioning,
     kanbanFilterQuery,
     clearKanbanFilter,
   } = useStore(
@@ -136,6 +139,9 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
       reviewActionError: s.reviewActionError,
       launchTeam: s.launchTeam,
       provisioningError: s.provisioningError,
+      isTeamProvisioning: Object.values(s.provisioningRuns).some(
+        (run) => run.teamName === teamName && ACTIVE_PROVISIONING_STATES.has(run.state)
+      ),
       kanbanFilterQuery: s.kanbanFilterQuery,
       clearKanbanFilter: s.clearKanbanFilter,
     }))
@@ -369,6 +375,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
     description: string,
     owner?: string,
     blockedBy?: string[],
+    related?: string[],
     prompt?: string,
     startImmediately?: boolean
   ): void => {
@@ -380,11 +387,12 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
           description: description || undefined,
           owner,
           blockedBy,
+          related,
           prompt,
           startImmediately,
         });
 
-        if (prompt && owner && data?.isAlive && startImmediately !== false) {
+        if (prompt && owner && data?.isAlive && !isTeamProvisioning && startImmediately !== false) {
           const msg = `New task assigned to ${owner}: "${subject}". Instructions:\n${prompt}`;
           try {
             await api.teams.processSend(teamName, msg);
@@ -527,6 +535,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
           taskMap={taskMap}
           pendingRepliesByMember={pendingRepliesByMember}
           isTeamAlive={data.isAlive}
+          isTeamProvisioning={isTeamProvisioning}
           onMemberClick={setSelectedMember}
           onSendMessage={(member) => {
             setSendDialogRecipient(member.name);
@@ -714,6 +723,8 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
         <ActivityTimeline
           messages={filteredMessages}
           members={data.members}
+          readSet={readSet}
+          getMessageKey={toMessageKey}
           onMemberClick={setSelectedMember}
           onCreateTaskFromMessage={(subject, description) => {
             openCreateTaskDialog(subject, description);
@@ -757,6 +768,8 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
         teamName={teamName}
         tasks={data.tasks}
         messages={data.messages}
+        isTeamAlive={data.isAlive}
+        isTeamProvisioning={isTeamProvisioning}
         onClose={() => setSelectedMember(null)}
         onSendMessage={() => {
           const name = selectedMember?.name ?? '';
@@ -781,7 +794,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
         teamName={teamName}
         members={data.members}
         tasks={data.tasks}
-        isTeamAlive={data.isAlive}
+        isTeamAlive={data.isAlive && !isTeamProvisioning}
         defaultSubject={createTaskDialog.defaultSubject}
         defaultDescription={createTaskDialog.defaultDescription}
         defaultOwner={createTaskDialog.defaultOwner}
@@ -803,6 +816,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
       <LaunchTeamDialog
         open={launchDialogOpen}
         teamName={teamName}
+        members={data?.members ?? []}
         defaultProjectPath={data.config.projectPath}
         provisioningError={provisioningError}
         onClose={() => setLaunchDialogOpen(false)}

src/renderer/components/team/activity/ActiveTasksBlock.tsx

@@ -3,13 +3,13 @@ import { getTeamColorSet } from '@renderer/constants/teamColors';
 import { formatAgentRole } from '@renderer/utils/formatAgentRole';
 import { Loader2 } from 'lucide-react';
 
-import type { ResolvedTeamMember, TeamTask } from '@shared/types';
+import type { ResolvedTeamMember, TeamTaskWithKanban } from '@shared/types';
 
 interface ActiveTasksBlockProps {
   members: ResolvedTeamMember[];
-  tasks: TeamTask[];
+  tasks: TeamTaskWithKanban[];
   onMemberClick?: (member: ResolvedTeamMember) => void;
-  onTaskClick?: (task: TeamTask) => void;
+  onTaskClick?: (task: TeamTaskWithKanban) => void;
 }
 
 export const ActiveTasksBlock = ({

src/renderer/components/team/activity/ActivityItem.tsx

@@ -30,6 +30,8 @@ interface ActivityItemProps {
   memberRole?: string;
   memberColor?: string;
   recipientColor?: string;
+  /** When true, show a blue unread dot. */
+  isUnread?: boolean;
   onMemberNameClick?: (memberName: string) => void;
   onCreateTask?: (subject: string, description: string) => void;
   onReply?: (message: InboxMessage) => void;
@@ -127,6 +129,7 @@ export const ActivityItem = ({
   memberRole,
   memberColor,
   recipientColor,
+  isUnread,
   onMemberNameClick,
   onCreateTask,
   onReply,
@@ -175,7 +178,7 @@ export const ActivityItem = ({
   };
 
   const summaryText = message.summary || autoSummary || '';
-  const HeaderTag = systemLabel ? 'button' : 'div';
+  const isHeaderClickable = Boolean(systemLabel);
 
   return (
     <article
@@ -186,16 +189,18 @@ export const ActivityItem = ({
         borderLeft: `3px solid ${colors.border}`,
       }}
     >
-      {/* Header — clickable when system message to toggle expand */}
+      {/* Header — div with role=button (cannot use <button> due to nested buttons inside) */}
-      <HeaderTag
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- role=button, tabIndex, onKeyDown below; nested buttons prevent using native button */}
-        type={systemLabel ? 'button' : undefined}
+      <div
+        role={isHeaderClickable ? 'button' : undefined}
+        tabIndex={isHeaderClickable ? 0 : undefined}
         className={[
           'flex items-center gap-2 px-3 py-2',
-          systemLabel ? 'w-full cursor-pointer select-none border-0 bg-transparent text-left' : '',
+          isHeaderClickable ? 'cursor-pointer select-none' : '',
         ].join(' ')}
-        onClick={systemLabel ? () => setIsExpanded((v) => !v) : undefined}
+        onClick={isHeaderClickable ? () => setIsExpanded((v) => !v) : undefined}
         onKeyDown={
-          systemLabel
+          isHeaderClickable
             ? (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                   e.preventDefault();
@@ -205,6 +210,9 @@ export const ActivityItem = ({
             : undefined
         }
       >
+        {isUnread ? (
+          <span className="size-2 shrink-0 rounded-full bg-blue-500" title="Unread" aria-hidden />
+        ) : null}
         {/* Chevron for collapsible system messages */}
         {systemLabel ? (
           <ChevronRight
@@ -374,7 +382,7 @@ export const ActivityItem = ({
             {timestamp}
           </span>
         </div>
-      </HeaderTag>
+      </div>
 
       {/* Content — collapsed for system messages, expanded for others */}
       {isExpanded ? (

src/renderer/components/team/activity/ActivityTimeline.tsx

@@ -9,6 +9,10 @@ import type { InboxMessage, ResolvedTeamMember } from '@shared/types';
 interface ActivityTimelineProps {
   messages: InboxMessage[];
   members?: ResolvedTeamMember[];
+  /** Set of message keys that have been read; messages not in this set show an unread dot. */
+  readSet?: Set<string>;
+  /** Function to get a stable key for a message (used with readSet). */
+  getMessageKey?: (message: InboxMessage) => string;
   onCreateTaskFromMessage?: (subject: string, description: string) => void;
   onReplyToMessage?: (message: InboxMessage) => void;
   onMemberClick?: (member: ResolvedTeamMember) => void;
@@ -23,6 +27,7 @@ const MessageRowWithObserver = ({
   memberRole,
   memberColor,
   recipientColor,
+  isUnread,
   onMemberNameClick,
   onCreateTask,
   onReply,
@@ -32,6 +37,7 @@ const MessageRowWithObserver = ({
   memberRole?: string;
   memberColor?: string;
   recipientColor?: string;
+  isUnread?: boolean;
   onMemberNameClick?: (name: string) => void;
   onCreateTask?: (subject: string, description: string) => void;
   onReply?: (message: InboxMessage) => void;
@@ -74,6 +80,7 @@ const MessageRowWithObserver = ({
         memberRole={memberRole}
         memberColor={memberColor}
         recipientColor={recipientColor}
+        isUnread={isUnread}
         onMemberNameClick={onMemberNameClick}
         onCreateTask={onCreateTask}
         onReply={onReply}
@@ -85,6 +92,8 @@ const MessageRowWithObserver = ({
 export const ActivityTimeline = ({
   messages,
   members,
+  readSet,
+  getMessageKey,
   onCreateTaskFromMessage,
   onReplyToMessage,
   onMemberClick,
@@ -126,6 +135,8 @@ export const ActivityTimeline = ({
         const recipientColor =
           recipientInfo?.color ?? (message.to ? getMemberColorByName(message.to) : undefined);
         const messageKey = `${message.messageId ?? index}-${message.timestamp}-${message.from}`;
+        const isUnread =
+          readSet !== undefined && getMessageKey ? !readSet.has(getMessageKey(message)) : false;
         return (
           <MessageRowWithObserver
             key={messageKey}
@@ -133,6 +144,7 @@ export const ActivityTimeline = ({
             memberRole={info?.role}
             memberColor={info?.color}
             recipientColor={recipientColor}
+            isUnread={isUnread}
             onMemberNameClick={onMemberClick ? handleMemberNameClick : undefined}
             onCreateTask={onCreateTaskFromMessage}
             onReply={onReplyToMessage}

src/renderer/components/team/dialogs/CreateTaskDialog.tsx

@@ -43,6 +43,7 @@ interface CreateTaskDialogProps {
     description: string,
     owner?: string,
     blockedBy?: string[],
+    related?: string[],
     prompt?: string,
     startImmediately?: boolean
   ) => void;
@@ -69,6 +70,7 @@ export const CreateTaskDialog = ({
   });
   const [owner, setOwner] = useState<string>(defaultOwner);
   const [blockedBy, setBlockedBy] = useState<string[]>([]);
+  const [related, setRelated] = useState<string[]>([]);
   const [startImmediately, setStartImmediately] = useState(true);
   const promptDraft = useDraftPersistence({ key: `createTask:${teamName}:prompt` });
   const [prevOpen, setPrevOpen] = useState(false);
@@ -80,6 +82,7 @@ export const CreateTaskDialog = ({
     }
     setOwner(defaultOwner);
     setBlockedBy([]);
+    setRelated([]);
     setStartImmediately(isTeamAlive);
     promptDraft.clearDraft();
   }
@@ -109,6 +112,12 @@ export const CreateTaskDialog = ({
     );
   };
 
+  const toggleRelated = (taskId: string): void => {
+    setRelated((prev) =>
+      prev.includes(taskId) ? prev.filter((id) => id !== taskId) : [...prev, taskId]
+    );
+  };
+
   const handleSubmit = (): void => {
     if (!canSubmit) return;
     onSubmit(
@@ -116,6 +125,7 @@ export const CreateTaskDialog = ({
       descriptionDraft.value.trim(),
       owner || undefined,
       blockedBy.length > 0 ? blockedBy : undefined,
+      related.length > 0 ? related : undefined,
       promptDraft.value.trim() || undefined,
       startImmediately
     );
@@ -296,6 +306,51 @@ export const CreateTaskDialog = ({
               ) : null}
             </div>
           ) : null}
+
+          {availableTasks.length > 0 ? (
+            <div className="grid gap-2">
+              <Label>Related tasks (optional)</Label>
+              <div className="max-h-32 overflow-y-auto rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-2">
+                {availableTasks.map((t) => {
+                  const isSelected = related.includes(t.id);
+                  return (
+                    <button
+                      key={`related:${t.id}`}
+                      type="button"
+                      className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors ${
+                        isSelected
+                          ? 'bg-purple-500/15 text-purple-300'
+                          : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]'
+                      }`}
+                      onClick={() => toggleRelated(t.id)}
+                    >
+                      <span
+                        className={`flex size-3.5 shrink-0 items-center justify-center rounded-sm border text-[9px] ${
+                          isSelected
+                            ? 'border-purple-400 bg-purple-500/30 text-purple-300'
+                            : 'border-[var(--color-border-emphasis)]'
+                        }`}
+                      >
+                        {isSelected ? '\u2713' : ''}
+                      </span>
+                      <Badge
+                        variant="secondary"
+                        className="shrink-0 px-1 py-0 text-[10px] font-normal"
+                      >
+                        #{t.id}
+                      </Badge>
+                      <span className="truncate">{t.subject}</span>
+                    </button>
+                  );
+                })}
+              </div>
+              {related.length > 0 ? (
+                <p className="text-[11px] text-purple-300">
+                  Related: {related.map((id) => `#${id}`).join(', ')}
+                </p>
+              ) : null}
+            </div>
+          ) : null}
         </div>
 
         <DialogFooter>

src/renderer/components/team/dialogs/LaunchTeamDialog.tsx

@@ -16,14 +16,21 @@ import { Label } from '@renderer/components/ui/label';
 import { MentionableTextarea } from '@renderer/components/ui/MentionableTextarea';
 import { useDraftPersistence } from '@renderer/hooks/useDraftPersistence';
 import { cn } from '@renderer/lib/utils';
+import { formatAgentRole } from '@renderer/utils/formatAgentRole';
 import { Check, CheckCircle2, Loader2 } from 'lucide-react';
 
 import type { MentionSuggestion } from '@renderer/types/mention';
-import type { Project, TeamLaunchRequest, TeamProvisioningPrepareResult } from '@shared/types';
+import type {
+  Project,
+  ResolvedTeamMember,
+  TeamLaunchRequest,
+  TeamProvisioningPrepareResult,
+} from '@shared/types';
 
 interface LaunchTeamDialogProps {
   open: boolean;
   teamName: string;
+  members: ResolvedTeamMember[];
   defaultProjectPath?: string;
   provisioningError: string | null;
   onClose: () => void;
@@ -66,6 +73,7 @@ function renderHighlightedText(text: string, query: string): React.JSX.Element {
 export const LaunchTeamDialog = ({
   open,
   teamName,
+  members,
   defaultProjectPath,
   provisioningError,
   onClose,
@@ -198,12 +206,13 @@ export const LaunchTeamDialog = ({
 
   const mentionSuggestions = useMemo<MentionSuggestion[]>(
     () =>
-      projects.map((p) => ({
+      members.map((m) => ({
-        id: p.path,
+        id: m.name,
-        name: p.name,
+        name: m.name,
-        subtitle: p.path,
+        subtitle: formatAgentRole(m.role) ?? formatAgentRole(m.agentType) ?? undefined,
+        color: m.color,
       })),
-    [projects]
+    [members]
   );
 
   const activeError = localError ?? provisioningError;
@@ -381,7 +390,7 @@ export const LaunchTeamDialog = ({
               value={promptDraft.value}
               onValueChange={promptDraft.setValue}
               suggestions={mentionSuggestions}
-              placeholder="Instructions for team lead... Use @ to mention projects."
+              placeholder="Instructions for team lead... Use @ to mention team members."
               footerRight={
                 promptDraft.isSaved ? (
                   <span className="text-[10px] text-[var(--color-text-muted)]">Draft saved</span>

src/renderer/components/team/dialogs/TaskCommentsSection.tsx

@@ -23,6 +23,8 @@ interface TaskCommentsSectionProps {
   taskId: string;
   comments: TaskComment[];
   members: ResolvedTeamMember[];
+  /** When true, the "Comments" header is not rendered (e.g. inside a collapsible section). */
+  hideHeader?: boolean;
 }
 
 export const TaskCommentsSection = ({
@@ -30,6 +32,7 @@ export const TaskCommentsSection = ({
   taskId,
   comments,
   members,
+  hideHeader = false,
 }: TaskCommentsSectionProps): React.JSX.Element => {
   const addTaskComment = useStore((s) => s.addTaskComment);
   const addingComment = useStore((s) => s.addingComment);
@@ -78,23 +81,22 @@ export const TaskCommentsSection = ({
 
   return (
     <div ref={commentsRef}>
-      <div className="mb-2 flex items-center gap-1.5 text-xs font-medium text-[var(--color-text-muted)]">
+      {!hideHeader ? (
-        <MessageSquare size={12} />
+        <div className="mb-2 flex items-center gap-1.5 text-xs font-medium text-[var(--color-text-muted)]">
-        Comments
+          <MessageSquare size={12} />
-        {comments.length > 0 ? (
+          Comments
-          <span className="rounded-full bg-[var(--color-surface-raised)] px-1.5 py-0 text-[10px]">
+          {comments.length > 0 ? (
-            {comments.length}
+            <span className="rounded-full bg-[var(--color-surface-raised)] px-1.5 py-0 text-[10px]">
-          </span>
+              {comments.length}
-        ) : null}
+            </span>
-      </div>
+          ) : null}
+        </div>
+      ) : null}
 
       {comments.length > 0 ? (
         <div className="mb-3 space-y-2">
           {comments.map((comment) => (
-            <div
+            <div key={comment.id} className="group p-2.5">
-              key={comment.id}
-              className="group rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-2.5"
-            >
               <div className="mb-1 flex items-center gap-2 text-[10px] text-[var(--color-text-muted)]">
                 <span
                   className="font-medium"

src/renderer/components/team/dialogs/TaskDetailDialog.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 
 import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
+import { CollapsibleTeamSection } from '@renderer/components/team/CollapsibleTeamSection';
 import { MemberLogsTab } from '@renderer/components/team/members/MemberLogsTab';
 import { Badge } from '@renderer/components/ui/badge';
 import { Button } from '@renderer/components/ui/button';
@@ -13,27 +14,24 @@ import {
   DialogTitle,
 } from '@renderer/components/ui/dialog';
 import { markAsRead } from '@renderer/services/commentReadStorage';
-import { TASK_STATUS_LABELS, TASK_STATUS_STYLES } from '@renderer/utils/memberHelpers';
-import { formatDistanceToNow } from 'date-fns';
 import {
-  ArrowLeftFromLine,
+  KANBAN_COLUMN_DISPLAY,
-  ArrowRightFromLine,
+  TASK_STATUS_LABELS,
-  Clock,
+  TASK_STATUS_STYLES,
-  FileText,
+} from '@renderer/utils/memberHelpers';
-  PenLine,
+import { formatDistanceToNow } from 'date-fns';
-  User,
+import { ArrowLeftFromLine, ArrowRightFromLine, Clock, Link2, PenLine, User } from 'lucide-react';
-} from 'lucide-react';
 
 import { TaskCommentsSection } from './TaskCommentsSection';
 
-import type { KanbanTaskState, ResolvedTeamMember, TeamTask } from '@shared/types';
+import type { KanbanTaskState, ResolvedTeamMember, TeamTaskWithKanban } from '@shared/types';
 
 interface TaskDetailDialogProps {
   open: boolean;
-  task: TeamTask | null;
+  task: TeamTaskWithKanban | null;
   teamName: string;
   kanbanTaskState?: KanbanTaskState;
-  taskMap: Map<string, TeamTask>;
+  taskMap: Map<string, TeamTaskWithKanban>;
   members: ResolvedTeamMember[];
   onClose: () => void;
   onScrollToTask?: (taskId: string) => void;
@@ -76,11 +74,30 @@ export const TaskDetailDialog = ({
     );
   }
 
+  const kanbanColumn = kanbanTaskState?.column ?? currentTask.kanbanColumn;
   const status = currentTask.status;
-  const statusStyle = TASK_STATUS_STYLES[status];
+  const statusStyle =
-  const statusLabel = TASK_STATUS_LABELS[status];
+    kanbanColumn && KANBAN_COLUMN_DISPLAY[kanbanColumn]
+      ? {
+          bg: KANBAN_COLUMN_DISPLAY[kanbanColumn].bg,
+          text: KANBAN_COLUMN_DISPLAY[kanbanColumn].text,
+        }
+      : TASK_STATUS_STYLES[status];
+  const statusLabel =
+    kanbanColumn && KANBAN_COLUMN_DISPLAY[kanbanColumn]
+      ? KANBAN_COLUMN_DISPLAY[kanbanColumn].label
+      : TASK_STATUS_LABELS[status];
   const blockedByIds = currentTask.blockedBy?.filter((id) => id.length > 0) ?? [];
   const blocksIds = currentTask.blocks?.filter((id) => id.length > 0) ?? [];
+  const relatedIds = (currentTask.related ?? []).filter(
+    (id) => id.length > 0 && id !== currentTask.id
+  );
+  const relatedByIds = Array.from(taskMap.values())
+    .filter(
+      (t) =>
+        t.id !== currentTask.id && Array.isArray(t.related) && t.related.includes(currentTask.id)
+    )
+    .map((t) => t.id);
 
   return (
     <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
@@ -132,19 +149,15 @@ export const TaskDetailDialog = ({
         </div>
 
         {/* Description */}
-        <div>
+        <CollapsibleTeamSection title="Description" defaultOpen>
-          <div className="mb-1 flex items-center gap-1.5 text-xs font-medium text-[var(--color-text-muted)]">
-            <FileText size={12} />
-            Description
-          </div>
           {currentTask.description ? (
-            <div className="max-h-[200px] overflow-y-auto rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-3">
+            <div className="max-h-[200px] overflow-y-auto">
               <MarkdownViewer content={currentTask.description} maxHeight="max-h-[180px]" />
             </div>
           ) : (
             <p className="text-xs text-[var(--color-text-muted)]">No description</p>
           )}
-        </div>
+        </CollapsibleTeamSection>
 
         {/* Dependencies */}
         {blockedByIds.length > 0 ? (
@@ -203,6 +216,56 @@ export const TaskDetailDialog = ({
           </div>
         ) : null}
 
+        {/* Related tasks (explicit) */}
+        {relatedIds.length > 0 || relatedByIds.length > 0 ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-1.5 text-xs font-medium text-[var(--color-text-muted)]">
+              <Link2 size={12} />
+              Related tasks
+            </div>
+
+            {relatedIds.length > 0 ? (
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="text-xs text-[var(--color-text-muted)]">Links</span>
+                {relatedIds.map((id) => {
+                  const depTask = taskMap.get(id);
+                  return (
+                    <button
+                      key={`related:${currentTask.id}:${id}`}
+                      type="button"
+                      className="inline-flex items-center rounded bg-purple-500/15 px-1.5 py-0.5 text-[10px] font-medium text-purple-300 transition-colors hover:bg-purple-500/25"
+                      title={depTask ? `#${id}: ${depTask.subject}` : `#${id}`}
+                      onClick={() => handleDependencyClick(id)}
+                    >
+                      #{id}
+                    </button>
+                  );
+                })}
+              </div>
+            ) : null}
+
+            {relatedByIds.length > 0 ? (
+              <div className="flex flex-wrap items-center gap-1.5">
+                <span className="text-xs text-[var(--color-text-muted)]">Linked from</span>
+                {relatedByIds.map((id) => {
+                  const depTask = taskMap.get(id);
+                  return (
+                    <button
+                      key={`related-by:${currentTask.id}:${id}`}
+                      type="button"
+                      className="inline-flex items-center rounded bg-fuchsia-500/15 px-1.5 py-0.5 text-[10px] font-medium text-fuchsia-300 transition-colors hover:bg-fuchsia-500/25"
+                      title={depTask ? `#${id}: ${depTask.subject}` : `#${id}`}
+                      onClick={() => handleDependencyClick(id)}
+                    >
+                      #{id}
+                    </button>
+                  );
+                })}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
         {/* Review info */}
         {kanbanTaskState ? (
           <div className="flex items-center gap-2">
@@ -218,28 +281,35 @@ export const TaskDetailDialog = ({
         ) : null}
 
         {/* Comments */}
-        <TaskCommentsSection
+        <CollapsibleTeamSection
-          teamName={teamName}
+          title="Comments"
-          taskId={currentTask.id}
+          badge={
-          comments={currentTask.comments ?? []}
+            (currentTask.comments?.length ?? 0) > 0
-          members={members}
+              ? (currentTask.comments?.length ?? 0)
-        />
+              : undefined
-
+          }
-        {/* Separator */}
+          defaultOpen
-        <div className="border-t border-[var(--color-border)]" />
+        >
-
+          <TaskCommentsSection
-        {/* Session Logs — sessions that reference this task */}
-        <div className="min-w-0 overflow-hidden">
-          <h4 className="mb-2 text-xs font-medium text-[var(--color-text-muted)]">
-            Execution Logs
-          </h4>
-          <MemberLogsTab
             teamName={teamName}
             taskId={currentTask.id}
-            taskOwner={currentTask.owner}
+            comments={currentTask.comments ?? []}
-            taskStatus={currentTask.status}
+            members={members}
+            hideHeader
           />
-        </div>
+        </CollapsibleTeamSection>
+
+        {/* Execution Logs — sessions that reference this task */}
+        <CollapsibleTeamSection title="Execution Logs" defaultOpen>
+          <div className="min-w-0 overflow-hidden">
+            <MemberLogsTab
+              teamName={teamName}
+              taskId={currentTask.id}
+              taskOwner={currentTask.owner}
+              taskStatus={currentTask.status}
+            />
+          </div>
+        </CollapsibleTeamSection>
 
         <DialogFooter>
           <Button variant="outline" onClick={onClose}>

src/renderer/components/team/kanban/KanbanBoard.tsx

@@ -3,7 +3,15 @@ import { useMemo, useState } from 'react';
 import { Button } from '@renderer/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { cn } from '@renderer/lib/utils';
-import { Columns3, LayoutGrid } from 'lucide-react';
+import {
+  CheckCircle2,
+  ClipboardList,
+  Columns3,
+  Eye,
+  LayoutGrid,
+  PlayCircle,
+  ShieldCheck,
+} from 'lucide-react';
 
 import { KanbanColumn } from './KanbanColumn';
 import { KanbanFilterPopover } from './KanbanFilterPopover';
@@ -13,6 +21,37 @@ import type { KanbanFilterState } from './KanbanFilterPopover';
 import type { Session } from '@renderer/types/data';
 import type { KanbanColumnId, KanbanState, ResolvedTeamMember, TeamTask } from '@shared/types';
 
+const COLUMN_ACCENTS: Record<
+  KanbanColumnId,
+  { headerBg: string; bodyBg: string; icon: React.ReactNode }
+> = {
+  todo: {
+    headerBg: 'rgba(59, 130, 246, 0.12)',
+    bodyBg: 'rgba(59, 130, 246, 0.05)',
+    icon: <ClipboardList size={14} className="shrink-0 text-[var(--color-text-muted)]" />,
+  },
+  in_progress: {
+    headerBg: 'rgba(234, 179, 8, 0.14)',
+    bodyBg: 'rgba(234, 179, 8, 0.06)',
+    icon: <PlayCircle size={14} className="shrink-0 text-[var(--color-text-muted)]" />,
+  },
+  done: {
+    headerBg: 'rgba(34, 197, 94, 0.12)',
+    bodyBg: 'rgba(34, 197, 94, 0.05)',
+    icon: <CheckCircle2 size={14} className="shrink-0 text-[var(--color-text-muted)]" />,
+  },
+  review: {
+    headerBg: 'rgba(139, 92, 246, 0.12)',
+    bodyBg: 'rgba(139, 92, 246, 0.05)',
+    icon: <Eye size={14} className="shrink-0 text-[var(--color-text-muted)]" />,
+  },
+  approved: {
+    headerBg: 'rgba(34, 197, 94, 0.24)',
+    bodyBg: 'rgba(34, 197, 94, 0.11)',
+    icon: <ShieldCheck size={14} className="shrink-0 text-[var(--color-text-muted)]" />,
+  },
+};
+
 interface KanbanBoardProps {
   tasks: TeamTask[];
   teamName: string;
@@ -184,8 +223,16 @@ export const KanbanBoard = ({
         <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
           {COLUMNS.map((column) => {
             const columnTasks = grouped.get(column.id) ?? [];
+            const accent = COLUMN_ACCENTS[column.id];
             return (
-              <KanbanColumn key={column.id} title={column.title} count={columnTasks.length}>
+              <KanbanColumn
+                key={column.id}
+                title={column.title}
+                count={columnTasks.length}
+                icon={accent.icon}
+                headerBg={accent.headerBg}
+                bodyBg={accent.bodyBg}
+              >
                 {renderCards(column.id, columnTasks)}
               </KanbanColumn>
             );
@@ -195,9 +242,16 @@ export const KanbanBoard = ({
         <div className="flex gap-3 overflow-x-auto pb-2">
           {COLUMNS.map((column) => {
             const columnTasks = grouped.get(column.id) ?? [];
+            const accent = COLUMN_ACCENTS[column.id];
             return (
               <div key={column.id} className="w-64 shrink-0">
-                <KanbanColumn title={column.title} count={columnTasks.length}>
+                <KanbanColumn
+                  title={column.title}
+                  count={columnTasks.length}
+                  icon={accent.icon}
+                  headerBg={accent.headerBg}
+                  bodyBg={accent.bodyBg}
+                >
                   {renderCards(column.id, columnTasks)}
                 </KanbanColumn>
               </div>

src/renderer/components/team/kanban/KanbanColumn.tsx

@@ -1,16 +1,37 @@
 import { Badge } from '@renderer/components/ui/badge';
+import { cn } from '@renderer/lib/utils';
 
 interface KanbanColumnProps {
   title: string;
   count: number;
+  icon?: React.ReactNode;
+  headerBg?: string;
+  bodyBg?: string;
   children: React.ReactNode;
 }
 
-export const KanbanColumn = ({ title, count, children }: KanbanColumnProps): React.JSX.Element => {
+export const KanbanColumn = ({
+  title,
+  count,
+  icon,
+  headerBg,
+  bodyBg,
+  children,
+}: KanbanColumnProps): React.JSX.Element => {
   return (
-    <section className="rounded-md border border-[var(--color-border)] bg-[var(--color-surface)]">
+    <section
-      <header className="flex items-center justify-between border-b border-[var(--color-border)] px-3 py-2">
+      className={cn(
-        <h4 className="text-xs font-semibold uppercase tracking-wide text-[var(--color-text)]">
+        'rounded-md border border-[var(--color-border)]',
+        !bodyBg && 'bg-[var(--color-surface)]'
+      )}
+      style={bodyBg ? { backgroundColor: bodyBg } : undefined}
+    >
+      <header
+        className="flex items-center justify-between border-b border-[var(--color-border)] px-3 py-2"
+        style={headerBg ? { backgroundColor: headerBg } : undefined}
+      >
+        <h4 className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-[var(--color-text)]">
+          {icon}
           {title}
         </h4>
         <Badge variant="secondary" className="px-2 py-0.5 text-[10px] font-normal">

src/renderer/components/team/members/MemberCard.tsx

@@ -5,14 +5,15 @@ import { agentAvatarUrl, getMemberDotClass, getPresenceLabel } from '@renderer/u
 import { ListPlus, Loader2, MessageSquare } from 'lucide-react';
 
 import type { TaskStatusCounts } from '@renderer/utils/pathNormalize';
-import type { ResolvedTeamMember, TeamTask } from '@shared/types';
+import type { ResolvedTeamMember, TeamTaskWithKanban } from '@shared/types';
 
 interface MemberCardProps {
   member: ResolvedTeamMember;
   memberColor: string;
   taskCounts?: TaskStatusCounts | null;
   isTeamAlive?: boolean;
-  currentTask?: TeamTask | null;
+  isTeamProvisioning?: boolean;
+  currentTask?: TeamTaskWithKanban | null;
   isAwaitingReply?: boolean;
   onOpenTask?: () => void;
   onClick?: () => void;
@@ -25,6 +26,7 @@ export const MemberCard = ({
   memberColor,
   taskCounts,
   isTeamAlive,
+  isTeamProvisioning,
   currentTask,
   isAwaitingReply,
   onOpenTask,
@@ -32,8 +34,8 @@ export const MemberCard = ({
   onSendMessage,
   onAssignTask,
 }: MemberCardProps): React.JSX.Element => {
-  const dotClass = getMemberDotClass(member, isTeamAlive);
+  const dotClass = getMemberDotClass(member, isTeamAlive, isTeamProvisioning);
-  const presenceLabel = getPresenceLabel(member, isTeamAlive);
+  const presenceLabel = getPresenceLabel(member, isTeamAlive, isTeamProvisioning);
   const colors = getTeamColorSet(memberColor);
   const pending = taskCounts?.pending ?? 0;
   const inProgress = taskCounts?.inProgress ?? 0;
@@ -73,12 +75,53 @@ export const MemberCard = ({
             />
             <span
               className={`absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-2 border-[var(--color-surface)] ${dotClass}`}
-              aria-label={member.status}
+              aria-label={presenceLabel}
             />
           </div>
-          <span className="min-w-0 flex-1 truncate text-sm font-medium text-[var(--color-text)]">
+          <div className="flex min-w-0 flex-1 items-center gap-1.5 truncate text-sm">
-            {member.name}
+            <span className="shrink-0 font-medium text-[var(--color-text)]">{member.name}</span>
-          </span>
+            {currentTask ? (
+              <>
+                <Loader2
+                  className="size-3 shrink-0 animate-spin"
+                  style={{ color: colors.border }}
+                />
+                <span className="shrink-0 text-[10px] text-[var(--color-text-muted)]">
+                  working on
+                </span>
+                <button
+                  type="button"
+                  className="min-w-0 shrink truncate rounded px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-text)] transition-opacity hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-[var(--color-border)]"
+                  style={{ border: `1px solid ${colors.border}40` }}
+                  title="Open task"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onOpenTask?.();
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }
+                  }}
+                >
+                  #{currentTask.id} {currentTask.subject.slice(0, 36)}
+                  {currentTask.subject.length > 36 ? '…' : ''}
+                </button>
+              </>
+            ) : null}
+            {!currentTask && isAwaitingReply ? (
+              <>
+                <Loader2
+                  className="size-3 shrink-0 animate-spin"
+                  style={{ color: colors.border }}
+                />
+                <span className="shrink-0 text-[10px] text-[var(--color-text-muted)]">
+                  awaiting reply
+                </span>
+              </>
+            ) : null}
+          </div>
           {(() => {
             const roleLabel = formatAgentRole(member.role) ?? formatAgentRole(member.agentType);
             return roleLabel ? (
@@ -125,42 +168,9 @@ export const MemberCard = ({
             </button>
           </div>
         </div>
-
-        {currentTask ? (
-          <div className="mt-1 flex items-center gap-2 pl-9 text-[10px] text-[var(--color-text-muted)]">
-            <Loader2 className="size-3 animate-spin" style={{ color: colors.border }} />
-            <span className="truncate">working on</span>
-            <button
-              type="button"
-              className="truncate rounded px-1.5 py-0.5 text-[10px] font-medium text-[var(--color-text)] transition-opacity hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-[var(--color-border)]"
-              style={{ border: `1px solid ${colors.border}40` }}
-              title="Open task"
-              onClick={(e) => {
-                e.stopPropagation();
-                onOpenTask?.();
-              }}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
-                  e.stopPropagation();
-                  e.preventDefault();
-                }
-              }}
-            >
-              #{currentTask.id} {currentTask.subject.slice(0, 36)}
-              {currentTask.subject.length > 36 ? '…' : ''}
-            </button>
-          </div>
-        ) : null}
-
-        {!currentTask && isAwaitingReply ? (
-          <div className="mt-1 flex items-center gap-2 pl-9 text-[10px] text-[var(--color-text-muted)]">
-            <Loader2 className="size-3 animate-spin" style={{ color: colors.border }} />
-            <span className="truncate">awaiting reply</span>
-          </div>
-        ) : null}
       </div>
       <div
-        className="h-0.5 rounded-b bg-[var(--color-border)]"
+        className="h-px rounded-b bg-[var(--color-border)]"
         role="progressbar"
         aria-valuenow={completed}
         aria-valuemin={0}

src/renderer/components/team/members/MemberDetailDialog.tsx

@@ -12,18 +12,20 @@ import { MemberMessagesTab } from './MemberMessagesTab';
 import { MemberStatsTab } from './MemberStatsTab';
 import { MemberTasksTab } from './MemberTasksTab';
 
-import type { InboxMessage, ResolvedTeamMember, TeamTask } from '@shared/types';
+import type { InboxMessage, ResolvedTeamMember, TeamTaskWithKanban } from '@shared/types';
 
 interface MemberDetailDialogProps {
   open: boolean;
   member: ResolvedTeamMember | null;
   teamName: string;
-  tasks: TeamTask[];
+  tasks: TeamTaskWithKanban[];
   messages: InboxMessage[];
+  isTeamAlive?: boolean;
+  isTeamProvisioning?: boolean;
   onClose: () => void;
   onSendMessage: () => void;
   onAssignTask: () => void;
-  onTaskClick: (task: TeamTask) => void;
+  onTaskClick: (task: TeamTaskWithKanban) => void;
 }
 
 export const MemberDetailDialog = ({
@@ -32,6 +34,8 @@ export const MemberDetailDialog = ({
   teamName,
   tasks,
   messages,
+  isTeamAlive,
+  isTeamProvisioning,
   onClose,
   onSendMessage,
   onAssignTask,
@@ -61,9 +65,13 @@ export const MemberDetailDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
-      <DialogContent className="sm:max-w-4xl">
+      <DialogContent className="min-w-0 overflow-hidden sm:max-w-4xl">
         <DialogHeader>
-          <MemberDetailHeader member={member} />
+          <MemberDetailHeader
+            member={member}
+            isTeamAlive={isTeamAlive}
+            isTeamProvisioning={isTeamProvisioning}
+          />
         </DialogHeader>
 
         <MemberDetailStats
@@ -110,7 +118,7 @@ export const MemberDetailDialog = ({
           <TabsContent value="stats">
             <MemberStatsTab teamName={teamName} memberName={member.name} />
           </TabsContent>
-          <TabsContent value="logs">
+          <TabsContent value="logs" className="min-w-0 overflow-hidden">
             <MemberLogsTab teamName={teamName} memberName={member.name} />
           </TabsContent>
         </Tabs>

src/renderer/components/team/members/MemberDetailHeader.tsx

@@ -7,12 +7,18 @@ import type { ResolvedTeamMember } from '@shared/types';
 
 interface MemberDetailHeaderProps {
   member: ResolvedTeamMember;
+  isTeamAlive?: boolean;
+  isTeamProvisioning?: boolean;
 }
 
-export const MemberDetailHeader = ({ member }: MemberDetailHeaderProps): React.JSX.Element => {
+export const MemberDetailHeader = ({
+  member,
+  isTeamAlive,
+  isTeamProvisioning,
+}: MemberDetailHeaderProps): React.JSX.Element => {
   const role = member.role || formatAgentRole(member.agentType);
-  const presenceLabel = getPresenceLabel(member);
+  const presenceLabel = getPresenceLabel(member, isTeamAlive, isTeamProvisioning);
-  const dotClass = getMemberDotClass(member);
+  const dotClass = getMemberDotClass(member, isTeamAlive, isTeamProvisioning);
 
   return (
     <div className="flex items-center gap-3">
@@ -25,7 +31,7 @@ export const MemberDetailHeader = ({ member }: MemberDetailHeaderProps): React.J
         />
         <span
           className={`absolute -bottom-0.5 -right-0.5 size-3 rounded-full border-2 border-[var(--color-surface)] ${dotClass}`}
-          aria-label={member.status}
+          aria-label={presenceLabel}
         />
       </div>
       <div className="min-w-0 flex-1">

src/renderer/components/team/members/MemberExecutionLog.tsx

@@ -41,7 +41,7 @@ export const MemberExecutionLog = ({
   }
 
   return (
-    <div className="space-y-6">
+    <div className="min-w-0 space-y-6 overflow-hidden">
       {conversation.items.map((item) => {
         if (item.type === 'system') {
           return <SystemChatGroup key={item.group.id} systemGroup={item.group} />;
@@ -92,8 +92,8 @@ const UserLogItem = ({ group }: { group: UserGroup }): React.JSX.Element => {
   const text = group.content.rawText ?? group.content.text ?? '';
   if (!text.trim()) {
     return (
-      <div className="flex justify-end">
+      <div className="flex min-w-0 justify-end">
-        <div className="max-w-[85%] rounded-2xl rounded-br-sm border border-[var(--color-border)] bg-[var(--chat-user-bg)] px-4 py-3">
+        <div className="min-w-0 max-w-[85%] rounded-2xl rounded-br-sm border border-[var(--color-border)] bg-[var(--chat-user-bg)] px-4 py-3">
           <div className="text-[10px] text-[var(--color-text-muted)]">
             {format(group.timestamp, 'h:mm:ss a')}
           </div>
@@ -104,12 +104,12 @@ const UserLogItem = ({ group }: { group: UserGroup }): React.JSX.Element => {
   }
 
   return (
-    <div className="flex justify-end">
+    <div className="flex min-w-0 justify-end">
-      <div className="max-w-[85%] rounded-2xl rounded-br-sm border border-[var(--chat-user-border)] bg-[var(--chat-user-bg)] px-4 py-3">
+      <div className="min-w-0 max-w-full rounded-2xl rounded-br-sm border border-[var(--chat-user-border)] bg-[var(--chat-user-bg)] px-4 py-3">
         <div className="text-right text-[10px] text-[var(--color-text-muted)]">
           {format(group.timestamp, 'h:mm:ss a')}
         </div>
-        <div className="mt-2 text-sm text-[var(--chat-user-text)]">
+        <div className="mt-2 min-w-0 break-words text-sm text-[var(--chat-user-text)]">
           <MarkdownViewer content={text} copyable />
         </div>
       </div>

src/renderer/components/team/members/MemberList.tsx

@@ -3,18 +3,19 @@ import { getMemberColor } from '@shared/constants/memberColors';
 import { MemberCard } from './MemberCard';
 
 import type { TaskStatusCounts } from '@renderer/utils/pathNormalize';
-import type { ResolvedTeamMember, TeamTask } from '@shared/types';
+import type { ResolvedTeamMember, TeamTaskWithKanban } from '@shared/types';
 
 interface MemberListProps {
   members: ResolvedTeamMember[];
   memberTaskCounts?: Map<string, TaskStatusCounts>;
-  taskMap?: Map<string, TeamTask>;
+  taskMap?: Map<string, TeamTaskWithKanban>;
   pendingRepliesByMember?: Record<string, number>;
   isTeamAlive?: boolean;
+  isTeamProvisioning?: boolean;
   onMemberClick?: (member: ResolvedTeamMember) => void;
   onSendMessage?: (member: ResolvedTeamMember) => void;
   onAssignTask?: (member: ResolvedTeamMember) => void;
-  onOpenTask?: (task: TeamTask) => void;
+  onOpenTask?: (task: TeamTaskWithKanban) => void;
 }
 
 export const MemberList = ({
@@ -23,6 +24,7 @@ export const MemberList = ({
   taskMap,
   pendingRepliesByMember,
   isTeamAlive,
+  isTeamProvisioning,
   onMemberClick,
   onSendMessage,
   onAssignTask,
@@ -49,6 +51,7 @@ export const MemberList = ({
             memberColor={member.color ?? getMemberColor(index)}
             taskCounts={memberTaskCounts?.get(member.name.toLowerCase())}
             isTeamAlive={isTeamAlive}
+            isTeamProvisioning={isTeamProvisioning}
             currentTask={currentTask}
             isAwaitingReply={awaitingReply}
             onOpenTask={currentTask ? () => onOpenTask?.(currentTask) : undefined}

src/renderer/components/team/members/MemberLogsTab.tsx

@@ -154,7 +154,7 @@ export const MemberLogsTab = ({
   }
 
   return (
-    <div className="max-h-[400px] min-w-0 space-y-1.5 overflow-y-auto overflow-x-hidden pr-1">
+    <div className="max-h-[400px] w-full min-w-0 space-y-1.5 overflow-y-auto overflow-x-hidden pr-1">
       {logs.map((log) => (
         <LogCard
           key={
@@ -251,7 +251,7 @@ const LogCard = ({
             </div>
           )}
           {!detailLoading && detailChunks && (
-            <div className="max-h-[360px] min-w-0 overflow-y-auto overflow-x-hidden pr-1">
+            <div className="max-h-[360px] w-full min-w-0 overflow-y-auto overflow-x-hidden pr-1">
               <MemberExecutionLog
                 chunks={detailChunks}
                 memberName={log.kind === 'lead_session' ? (log.memberName ?? undefined) : undefined}

src/renderer/components/team/members/MemberTasksTab.tsx

@@ -1,13 +1,17 @@
 import { useMemo } from 'react';
 
 import { Badge } from '@renderer/components/ui/badge';
-import { TASK_STATUS_LABELS, TASK_STATUS_STYLES } from '@renderer/utils/memberHelpers';
+import {
+  KANBAN_COLUMN_DISPLAY,
+  TASK_STATUS_LABELS,
+  TASK_STATUS_STYLES,
+} from '@renderer/utils/memberHelpers';
 
-import type { TeamTask } from '@shared/types';
+import type { TeamTaskWithKanban } from '@shared/types';
 
 interface MemberTasksTabProps {
-  tasks: TeamTask[];
+  tasks: TeamTaskWithKanban[];
-  onTaskClick?: (task: TeamTask) => void;
+  onTaskClick?: (task: TeamTaskWithKanban) => void;
 }
 
 const STATUS_ORDER: Record<string, number> = {
@@ -37,7 +41,15 @@ export const MemberTasksTab = ({ tasks, onTaskClick }: MemberTasksTabProps): Rea
     <div className="max-h-[320px] overflow-y-auto">
       <div className="flex flex-col gap-1">
         {visibleTasks.map((task) => {
-          const style = TASK_STATUS_STYLES[task.status];
+          const col = task.kanbanColumn;
+          const style =
+            col && KANBAN_COLUMN_DISPLAY[col]
+              ? { bg: KANBAN_COLUMN_DISPLAY[col].bg, text: KANBAN_COLUMN_DISPLAY[col].text }
+              : TASK_STATUS_STYLES[task.status];
+          const label =
+            col && KANBAN_COLUMN_DISPLAY[col]
+              ? KANBAN_COLUMN_DISPLAY[col].label
+              : TASK_STATUS_LABELS[task.status];
           return (
             <button
               type="button"
@@ -54,7 +66,7 @@ export const MemberTasksTab = ({ tasks, onTaskClick }: MemberTasksTabProps): Rea
               <span
                 className={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${style.bg} ${style.text}`}
               >
-                {TASK_STATUS_LABELS[task.status]}
+                {label}
               </span>
             </button>
           );

src/renderer/components/team/tasks/TaskList.tsx

@@ -2,10 +2,10 @@ import { useMemo, useState } from 'react';
 
 import { TaskRow } from './TaskRow';
 
-import type { TeamTask } from '@shared/types';
+import type { TeamTaskWithKanban } from '@shared/types';
 
 interface TaskListProps {
-  tasks: TeamTask[];
+  tasks: TeamTaskWithKanban[];
 }
 
 export const TaskList = ({ tasks }: TaskListProps): React.JSX.Element => {

src/renderer/components/team/tasks/TaskRow.tsx

@@ -1,7 +1,7 @@
-import type { TeamTask } from '@shared/types';
+import type { TeamTaskWithKanban } from '@shared/types';
 
 interface TaskRowProps {
-  task: TeamTask;
+  task: TeamTaskWithKanban;
 }
 
 export const TaskRow = ({ task }: TaskRowProps): React.JSX.Element => {
@@ -13,7 +13,9 @@ export const TaskRow = ({ task }: TaskRowProps): React.JSX.Element => {
       <td className="px-3 py-2 text-xs text-[var(--color-text-muted)]">{task.id}</td>
       <td className="px-3 py-2 text-sm text-[var(--color-text)]">{task.subject}</td>
       <td className="px-3 py-2 text-xs text-[var(--color-text-muted)]">{task.owner ?? '\u2014'}</td>
-      <td className="px-3 py-2 text-xs text-[var(--color-text-muted)]">{task.status}</td>
+      <td className="px-3 py-2 text-xs text-[var(--color-text-muted)]">
+        {task.kanbanColumn ?? task.status}
+      </td>
       <td className="px-3 py-2 text-xs">
         {blockedByIds.length > 0 ? (
           <span className="text-yellow-300">{blockedByIds.map((id) => `#${id}`).join(', ')}</span>

src/renderer/components/ui/combobox.tsx

@@ -74,20 +74,21 @@ export const Combobox = ({
           className="flex size-full flex-col overflow-hidden rounded-md bg-[var(--color-surface)]"
           shouldFilter={false}
         >
-          <div className="flex items-center border-b border-[var(--color-border)] px-2">
+          <div className="flex items-center border-b border-[var(--color-border)]">
             <CommandPrimitive.Input
               value={search}
               onValueChange={setSearch}
               placeholder={searchPlaceholder}
-              className="flex h-8 w-full border-0 bg-transparent py-1 text-xs text-[var(--color-text)] outline-none placeholder:text-[var(--color-text-muted)]"
+              className="flex h-8 w-full border-0 bg-transparent px-2 py-1 text-xs text-[var(--color-text)] outline-none placeholder:text-[var(--color-text-muted)]"
             />
           </div>
           <CommandPrimitive.List
             id={listboxId}
-            className="max-h-72 overflow-y-auto overscroll-contain px-2 py-1"
+            className="max-h-72 overflow-y-auto overscroll-contain py-1 pl-0 pr-2"
+            style={{ paddingLeft: 0 }}
             onWheel={(e) => e.stopPropagation()}
           >
-            <CommandPrimitive.Empty className="px-2 py-4 text-center text-xs text-[var(--color-text-muted)]">
+            <CommandPrimitive.Empty className="py-4 pr-2 text-center text-xs text-[var(--color-text-muted)]">
               {emptyMessage}
             </CommandPrimitive.Empty>
             {options
@@ -112,6 +113,7 @@ export const Combobox = ({
                       setSearch('');
                     }}
                     className="relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-0 pr-2 text-xs outline-none data-[selected=true]:bg-[var(--color-surface-raised)] data-[selected=true]:text-[var(--color-text)]"
+                    style={{ paddingLeft: 0 }}
                   >
                     {renderOption ? (
                       renderOption(option, isSelected, search)

src/renderer/hooks/useMentionDetection.ts

@@ -62,6 +62,8 @@ const MIRROR_PROPS = [
   'wordSpacing',
 ] as const;
 
+const MENTION_DROPDOWN_OFFSET_PX = 10;
+
 /**
  * Calculates caret coordinates relative to the textarea element
  * using a mirror div technique.
@@ -180,7 +182,7 @@ export function useMentionDetection({
       if (!textarea) return;
       const coords = getCaretCoordinates(textarea, triggerIdx, text);
       setDropdownPosition({
-        top: coords.top + coords.height,
+        top: coords.top + coords.height + MENTION_DROPDOWN_OFFSET_PX,
         left: 0,
       });
     },

src/renderer/index.css

@@ -383,6 +383,64 @@
   --skeleton-base-dim: rgba(205, 208, 215, 0.6);
 }
 
+/* rehype-highlight (highlight.js) — map hljs classes to app theme variables */
+.hljs {
+  color: var(--color-text);
+  background: transparent;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+  color: var(--syntax-keyword);
+}
+.hljs-string,
+.hljs-doctag {
+  color: var(--syntax-string);
+}
+.hljs-comment,
+.hljs-quote {
+  color: var(--syntax-comment);
+  font-style: italic;
+}
+.hljs-number,
+.hljs-literal {
+  color: var(--syntax-number);
+}
+.hljs-built_in,
+.hljs-type,
+.hljs-class .hljs-title {
+  color: var(--syntax-type);
+}
+.hljs-title.function_,
+.hljs-function .hljs-title {
+  color: var(--syntax-function);
+}
+.hljs-params,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute {
+  color: var(--color-text);
+}
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link,
+.hljs-regexp {
+  color: var(--syntax-operator);
+}
+.hljs-deletion {
+  color: var(--diff-removed-text);
+}
+.hljs-section {
+  font-weight: 600;
+  color: var(--syntax-keyword);
+}
+
 * {
   margin: 0;
   padding: 0;

src/renderer/services/draftStorage.ts

@@ -8,67 +8,115 @@ interface StoredDraft {
   timestamp: number;
 }
 
+let idbUnavailable = false;
+let idbUnavailableLogged = false;
+const fallbackStore = new Map<string, StoredDraft>();
+
+function markIdbUnavailable(): void {
+  if (!idbUnavailableLogged) {
+    idbUnavailableLogged = true;
+    console.warn(
+      '[draftStorage] IndexedDB unavailable, using in-memory draft storage for this session.'
+    );
+  }
+  idbUnavailable = true;
+}
+
+function fallbackSave(key: string, value: string): void {
+  const fullKey = `${DRAFT_KEY_PREFIX}${key}`;
+  fallbackStore.set(fullKey, { value, timestamp: Date.now() });
+}
+
+function fallbackLoad(key: string): string | null {
+  const fullKey = `${DRAFT_KEY_PREFIX}${key}`;
+  const stored = fallbackStore.get(fullKey);
+  if (!stored) return null;
+  if (Date.now() - stored.timestamp > DRAFT_TTL_MS) {
+    fallbackStore.delete(fullKey);
+    return null;
+  }
+  return stored.value;
+}
+
+function fallbackDelete(key: string): void {
+  fallbackStore.delete(`${DRAFT_KEY_PREFIX}${key}`);
+}
+
+function fallbackCleanupExpired(): void {
+  const now = Date.now();
+  for (const [fullKey, stored] of fallbackStore.entries()) {
+    if (now - stored.timestamp > DRAFT_TTL_MS) fallbackStore.delete(fullKey);
+  }
+}
+
 async function saveDraft(key: string, value: string): Promise<void> {
+  if (idbUnavailable) {
+    fallbackSave(key, value);
+    return;
+  }
   try {
-    const stored: StoredDraft = {
+    const stored: StoredDraft = { value, timestamp: Date.now() };
-      value,
-      timestamp: Date.now(),
-    };
     await set(`${DRAFT_KEY_PREFIX}${key}`, stored);
-  } catch (error) {
+  } catch {
-    console.error(`[draftStorage] Failed to save draft for ${key}:`, error);
+    markIdbUnavailable();
+    fallbackSave(key, value);
   }
 }
 
 async function loadDraft(key: string): Promise<string | null> {
+  if (idbUnavailable) return fallbackLoad(key);
   try {
     const stored = await get<StoredDraft>(`${DRAFT_KEY_PREFIX}${key}`);
-    if (!stored) {
+    if (!stored) return null;
-      return null;
-    }
-
     const age = Date.now() - stored.timestamp;
     if (age > DRAFT_TTL_MS) {
       void deleteDraft(key);
       return null;
     }
-
     return stored.value;
-  } catch (error) {
+  } catch {
-    console.error(`[draftStorage] Failed to load draft for ${key}:`, error);
+    markIdbUnavailable();
-    return null;
+    return fallbackLoad(key);
   }
 }
 
 async function deleteDraft(key: string): Promise<void> {
+  if (idbUnavailable) {
+    fallbackDelete(key);
+    return;
+  }
   try {
     await del(`${DRAFT_KEY_PREFIX}${key}`);
-  } catch (error) {
+  } catch {
-    console.error(`[draftStorage] Failed to delete draft for ${key}:`, error);
+    markIdbUnavailable();
+    fallbackDelete(key);
   }
 }
 
 async function cleanupExpired(): Promise<void> {
+  if (idbUnavailable) {
+    fallbackCleanupExpired();
+    return;
+  }
   try {
     const allKeys = await keys();
     const draftKeys = allKeys.filter(
       (k): k is IDBValidKey & string => typeof k === 'string' && k.startsWith(DRAFT_KEY_PREFIX)
     );
-
     const now = Date.now();
-
     for (const fullKey of draftKeys) {
       try {
         const stored = await get<StoredDraft>(fullKey);
-        if (stored && now - stored.timestamp > DRAFT_TTL_MS) {
+        if (stored && now - stored.timestamp > DRAFT_TTL_MS) await del(fullKey);
-          await del(fullKey);
+      } catch {
-        }
+        markIdbUnavailable();
-      } catch (error) {
+        fallbackCleanupExpired();
-        console.error(`[draftStorage] Failed to check/delete key ${fullKey}:`, error);
+        return;
       }
     }
-  } catch (error) {
+  } catch {
-    console.error('[draftStorage] Failed to cleanup expired drafts:', error);
+    markIdbUnavailable();
+    fallbackCleanupExpired();
   }
 }
 

src/renderer/store/slices/teamSlice.ts

@@ -1,6 +1,9 @@
 import { api } from '@renderer/api';
 import { normalizePath } from '@renderer/utils/pathNormalize';
 import { IpcError, unwrapIpc } from '@renderer/utils/unwrapIpc';
+import { createLogger } from '@shared/utils/logger';
+
+const logger = createLogger('teamSlice');
 
 import type { AppState } from '../types';
 import type {
@@ -250,9 +253,8 @@ export const createTeamSlice: StateCreator<AppState, [], [], TeamSlice> = (set,
         }
       }
     } catch (error) {
-      // If provisioning is in progress for this team, stay in loading state
+      // If provisioning is in progress for this team, stay in loading state;
-      // instead of showing an error — the file watcher / progress callback will
+      // file watcher / progress callback will refresh once config is written.
-      // trigger a refresh once config.json is written.
       const isProvisioning = Object.values(get().provisioningRuns).some(
         (run) =>
           run.teamName === teamName &&
@@ -268,15 +270,17 @@ export const createTeamSlice: StateCreator<AppState, [], [], TeamSlice> = (set,
         return;
       }
 
+      const message =
+        error instanceof IpcError
+          ? error.message
+          : error instanceof Error
+            ? error.message
+            : 'Failed to fetch team data';
+      logger.error(`[team:getData] ${message}`);
       set({
         selectedTeamLoading: false,
         selectedTeamData: null,
-        selectedTeamError:
+        selectedTeamError: message,
-          error instanceof IpcError
-            ? error.message
-            : error instanceof Error
-              ? error.message
-              : 'Failed to fetch team data',
       });
     }
   },

src/renderer/utils/markdownPlugins.ts

@@ -0,0 +1,8 @@
+/**
+ * Rehype plugins for markdown rendering (used with react-markdown).
+ * Rehype runs after remark; rehype-highlight adds syntax highlighting to code blocks.
+ */
+
+import rehypeHighlight from 'rehype-highlight';
+
+export const rehypePlugins = [rehypeHighlight];

src/renderer/utils/memberHelpers.ts

@@ -11,15 +11,28 @@ export const STATUS_DOT_COLORS: Record<MemberStatus, string> = {
   unknown: 'bg-zinc-600',
 };
 
-export function getMemberDotClass(member: ResolvedTeamMember, isTeamAlive?: boolean): string {
+export function getMemberDotClass(
-  if (isTeamAlive === false) return STATUS_DOT_COLORS.terminated;
+  member: ResolvedTeamMember,
+  isTeamAlive?: boolean,
+  isTeamProvisioning?: boolean
+): string {
   if (member.status === 'terminated') return STATUS_DOT_COLORS.terminated;
-  return member.currentTaskId ? STATUS_DOT_COLORS.active : STATUS_DOT_COLORS.idle;
+  if (isTeamProvisioning) return STATUS_DOT_COLORS.unknown;
+  if (isTeamAlive === false) return STATUS_DOT_COLORS.terminated;
+  if (member.status === 'unknown') return STATUS_DOT_COLORS.unknown;
+  if (member.currentTaskId) return STATUS_DOT_COLORS.active;
+  return member.status === 'active' ? STATUS_DOT_COLORS.active : STATUS_DOT_COLORS.idle;
 }
 
-export function getPresenceLabel(member: ResolvedTeamMember, isTeamAlive?: boolean): string {
+export function getPresenceLabel(
-  if (isTeamAlive === false) return 'offline';
+  member: ResolvedTeamMember,
+  isTeamAlive?: boolean,
+  isTeamProvisioning?: boolean
+): string {
   if (member.status === 'terminated') return 'terminated';
+  if (isTeamProvisioning) return 'connecting';
+  if (isTeamAlive === false) return 'offline';
+  if (member.status === 'unknown') return 'unknown';
   return member.currentTaskId ? 'working' : 'idle';
 }
 
@@ -36,3 +49,11 @@ export const TASK_STATUS_LABELS: Record<TeamTaskStatus, string> = {
   completed: 'Completed',
   deleted: 'Deleted',
 };
+
+export const KANBAN_COLUMN_DISPLAY: Record<
+  'review' | 'approved',
+  { label: string; bg: string; text: string }
+> = {
+  review: { label: 'In Review', bg: 'bg-amber-500/15', text: 'text-amber-400' },
+  approved: { label: 'Approved', bg: 'bg-emerald-500/15', text: 'text-emerald-400' },
+};

src/renderer/utils/taskGrouping.ts

@@ -1,3 +1,4 @@
+import { normalizePath } from '@renderer/utils/pathNormalize';
 import { differenceInDays, isToday, isYesterday } from 'date-fns';
 
 import { DATE_CATEGORY_ORDER } from '../types/tabs';
@@ -7,6 +8,12 @@ import type { GlobalTask } from '@shared/types';
 
 export type DateGroupedTasks = Record<DateCategory, GlobalTask[]>;
 
+export interface ProjectTaskGroup {
+  projectKey: string;
+  projectLabel: string;
+  tasks: GlobalTask[];
+}
+
 function getDateCategory(dateStr: string | undefined): DateCategory {
   if (!dateStr) return 'Older';
   const d = new Date(dateStr);
@@ -46,3 +53,64 @@ export function groupTasksByDate(tasks: GlobalTask[]): DateGroupedTasks {
 export function getNonEmptyTaskCategories(groups: DateGroupedTasks): DateCategory[] {
   return DATE_CATEGORY_ORDER.filter((cat) => groups[cat].length > 0);
 }
+
+const NO_PROJECT_KEY = '__no_project__';
+const NO_PROJECT_LABEL = 'Without project';
+
+function trimTrailingPathSep(p: string): string {
+  let s = p;
+  while (s.length > 0 && (s.endsWith('/') || s.endsWith('\\'))) s = s.slice(0, -1);
+  return s;
+}
+
+function projectLabelFromPath(path: string): string {
+  const normalized = trimTrailingPathSep(path);
+  const segments = normalized
+    .split('/')
+    .flatMap((s) => s.split('\\'))
+    .filter(Boolean);
+  return segments.length > 0 ? segments[segments.length - 1] : path || NO_PROJECT_LABEL;
+}
+
+export function groupTasksByProject(tasks: GlobalTask[]): ProjectTaskGroup[] {
+  const byKey = new Map<string, { path: string; tasks: GlobalTask[] }>();
+
+  for (const task of tasks) {
+    const path = task.projectPath?.trim() ?? '';
+    const key = path ? normalizePath(path) : NO_PROJECT_KEY;
+    let entry = byKey.get(key);
+    if (!entry) {
+      entry = { path: path || '', tasks: [] };
+      byKey.set(key, entry);
+    }
+    entry.tasks.push(task);
+  }
+
+  for (const entry of byKey.values()) {
+    entry.tasks.sort((a, b) => {
+      const cmp = a.teamName.localeCompare(b.teamName);
+      if (cmp !== 0) return cmp;
+      const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+      const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+      return dateB - dateA;
+    });
+  }
+
+  const groups: ProjectTaskGroup[] = [];
+  for (const [key, { path, tasks: list }] of byKey) {
+    const projectLabel = key === NO_PROJECT_KEY ? NO_PROJECT_LABEL : projectLabelFromPath(path);
+    groups.push({ projectKey: key, projectLabel, tasks: list });
+  }
+
+  groups.sort((a, b) => {
+    const tsA = Math.max(
+      ...a.tasks.map((t) => (t.createdAt ? new Date(t.createdAt).getTime() : 0))
+    );
+    const tsB = Math.max(
+      ...b.tasks.map((t) => (t.createdAt ? new Date(t.createdAt).getTime() : 0))
+    );
+    return tsB - tsA;
+  });
+
+  return groups;
+}

src/shared/types/team.ts

@@ -64,11 +64,22 @@ export interface TeamTask {
   status: TeamTaskStatus;
   blocks?: string[];
   blockedBy?: string[];
+  /**
+   * Explicit task links (non-blocking). Used for navigation between related tasks,
+   * e.g. "review task" ↔ "work task".
+   */
+  related?: string[];
   createdAt?: string;
   projectPath?: string;
   comments?: TaskComment[];
 }
 
+/** Task enriched for UI/DTO use (overlay from kanban-state.json). */
+export interface TeamTaskWithKanban extends TeamTask {
+  /** Set when task is in team kanban (review or approved column). */
+  kanbanColumn?: 'review' | 'approved';
+}
+
 export interface InboxMessage {
   from: string;
   to?: string;
@@ -130,7 +141,7 @@ export interface ResolvedTeamMember {
 export interface TeamData {
   teamName: string;
   config: TeamConfig;
-  tasks: TeamTask[];
+  tasks: TeamTaskWithKanban[];
   members: ResolvedTeamMember[];
   messages: InboxMessage[];
   kanbanState: KanbanState;
@@ -153,6 +164,7 @@ export interface CreateTaskRequest {
   description?: string;
   owner?: string;
   blockedBy?: string[];
+  related?: string[];
   prompt?: string;
   startImmediately?: boolean;
 }
@@ -220,12 +232,10 @@ export interface TeamProvisioningProgress {
   cliLogsTail?: string;
 }
 
-export interface GlobalTask extends TeamTask {
+export interface GlobalTask extends TeamTaskWithKanban {
   teamName: string;
   teamDisplayName: string;
   projectPath?: string;
-  /** Set when task is in team kanban (review or approved column). */
-  kanbanColumn?: 'review' | 'approved';
 }
 
 export interface MemberSubagentSummary {

test/main/services/team/TeamDataService.test.ts

@@ -163,4 +163,45 @@ describe('TeamDataService', () => {
       expect.objectContaining({ status: 'pending', owner: 'alice', createdBy: 'user' })
     );
   });
+
+  it('persists explicit related task links when creating a task', async () => {
+    const createTaskMock = vi.fn(async () => undefined);
+    const service = new TeamDataService(
+      {
+        listTeams: vi.fn(),
+        getConfig: vi.fn(async () => ({ name: 'My team', members: [] })),
+      } as never,
+      {
+        getNextTaskId: vi.fn(async () => '3'),
+        getTasks: vi.fn(async () => []),
+      } as never,
+      {
+        listInboxNames: vi.fn(async () => []),
+        getMessages: vi.fn(async () => []),
+      } as never,
+      {} as never,
+      {
+        createTask: createTaskMock,
+        addBlocksEntry: vi.fn(async () => undefined),
+      } as never,
+      {
+        resolveMembers: vi.fn(() => []),
+      } as never,
+      {
+        getState: vi.fn(async () => ({ teamName: 'my-team', reviewers: [], tasks: {} })),
+        garbageCollect: vi.fn(async () => undefined),
+      } as never
+    );
+
+    const result = await service.createTask('my-team', {
+      subject: 'Review work task',
+      related: ['1', '2'],
+    });
+
+    expect(result.related).toEqual(['1', '2']);
+    expect(createTaskMock).toHaveBeenCalledWith(
+      'my-team',
+      expect.objectContaining({ related: ['1', '2'] })
+    );
+  });
 });