@within-7/minto 0.3.9 → 0.4.0

package/dist/components/SubagentBlock.js

@@ -56,7 +56,25 @@ function SubagentTodosSection({
   ))));
 }
 function extractSubagentTodos(subagent) {
-  return null;
+  let latestTodos = null;
+  for (const msg of subagent.messages) {
+    if (msg.type === "assistant" && "message" in msg) {
+      const todoBlocks = msg.message.content.filter(
+        (block) => block.type === "tool_use" && block.name === "TodoWrite"
+      );
+      for (const block of todoBlocks) {
+        if ("input" in block && block.input?.todos) {
+          latestTodos = block.input.todos.map((t, i) => ({
+            id: t.id ?? String(i),
+            content: t.content ?? "",
+            status: t.status ?? "pending",
+            priority: t.priority ?? "medium"
+          }));
+        }
+      }
+    }
+  }
+  return latestTodos;
 }
 function extractThinkingMessage(subagent) {
   for (const msg of subagent.messages) {
@@ -76,6 +94,20 @@ function extractThinkingMessage(subagent) {
 }
 function extractToolExecutions(subagent) {
   const tools = [];
+  const toolResultTimes = /* @__PURE__ */ new Map();
+  let msgIndex = 0;
+  for (const msg of subagent.messages) {
+    if (msg.type === "user" && "message" in msg) {
+      const resultBlocks = (Array.isArray(msg.message.content) ? msg.message.content : []).filter((block) => block.type === "tool_result");
+      for (const rb of resultBlocks) {
+        if ("tool_use_id" in rb) {
+          toolResultTimes.set(rb.tool_use_id, msgIndex);
+        }
+      }
+    }
+    msgIndex++;
+  }
+  let toolIndex = 0;
   for (const msg of subagent.messages) {
     if (msg.type === "assistant" && "message" in msg) {
       const toolBlocks = msg.message.content.filter(
@@ -83,16 +115,21 @@ function extractToolExecutions(subagent) {
       );
       for (const toolBlock of toolBlocks) {
         if ("name" in toolBlock && "id" in toolBlock) {
+          const totalDuration = (subagent.metrics.endTime || Date.now()) - subagent.metrics.startTime;
+          const toolCount = subagent.metrics.toolUseCount || tools.length + 1;
+          const estimatedDuration = Math.max(
+            1,
+            Math.round(totalDuration / toolCount)
+          );
           tools.push({
             id: toolBlock.id,
             name: toolBlock.name,
             input: toolBlock.input,
-            status: "completed",
-            // Simplified for now
-            startTime: subagent.metrics.startTime,
-            durationMs: 100
-            // Placeholder
+            status: toolResultTimes.has(toolBlock.id) ? "completed" : "running",
+            startTime: subagent.metrics.startTime + toolIndex * estimatedDuration,
+            durationMs: estimatedDuration
           });
+          toolIndex++;
         }
       }
     }

package/dist/components/SubagentBlock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/SubagentBlock.tsx"],
-  "sourcesContent": ["/**\n * SubagentBlock - Embedded subagent execution display\n *\n * Renders a complete subagent execution hierarchically with:\n * - Header (task name, agent type, status)\n * - Optional: Subtasks (if subagent has todos)\n * - Optional: Thinking phase\n * - Optional: Tool executions\n * - Optional: Response\n * - Footer (completion status)\n *\n * Supports collapsible internal content\n */\n\nimport React, { useState } from 'react'\nimport { Box, Text } from 'ink'\nimport { getTheme } from '@utils/theme'\nimport { SYMBOLS, getTodoStatusSymbol } from '@constants/symbols'\nimport { AgentThinkingBlock } from './AgentThinkingBlock'\nimport { ToolExecutionBlock } from './ToolExecutionBlock'\nimport { AgentResponseBlock } from './AgentResponseBlock'\nimport { useAgentTokenStats, formatTokenCount } from '@hooks/useAgentTokenStats'\nimport type { SubagentState } from '@minto-types/subagent'\nimport type { TodoItem } from '@utils/todoStorage'\nimport type { AssistantMessage } from '@minto-types/conversation'\nimport type { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'\n\ninterface Props {\n  subagent: SubagentState\n  indent?: number\n  isExpanded?: boolean\n}\n\n/**\n * SubagentBlock - Hierarchical embedded subagent display\n *\n * Visual format (indent=1):\n * ```\n *   \uD83E\uDD16 Launching subagent: backend-architect\n *      \u251C\u2500 Task: Design authentication system\n *      \u2502\n *      \u2502   \uD83E\uDD14 Analyzing requirements... (300ms)\n *      \u2502\n *      \u2502   \uD83D\uDD27 Tool: Read package.json\n *      \u2502      \u2514\u2500 \u2713 Read 50 lines (80ms)\n *      \u2502\n *      \u2502   \uD83D\uDCAC I recommend using JWT...\n *      \u2502\n *      \u2514\u2500 \u2713 Completed (2.5s, 1200 tokens)\n * ```\n */\nexport function SubagentBlock({\n  subagent,\n  indent = 0,\n  isExpanded = false,\n}: Props): React.ReactNode {\n  const theme = getTheme()\n  const [expanded, setExpanded] = useState(isExpanded)\n  const marginLeft = indent * 2\n\n  // Get real-time token stats from unified TokenStatsManager\n  const tokenStats = useAgentTokenStats(subagent.id)\n\n  // Extract todos if present (from subagent execution)\n  const todos = extractSubagentTodos(subagent)\n  const thinking = extractThinkingMessage(subagent)\n  const toolExecutions = extractToolExecutions(subagent)\n  const response = extractResponse(subagent)\n\n  // Calculate metrics\n  const duration = subagent.metrics.endTime\n    ? ((subagent.metrics.endTime - subagent.metrics.startTime) / 1000).toFixed(\n        1,\n      )\n    : '...'\n  // Use token stats from TokenStatsManager (single source of truth)\n  const tokenCount = tokenStats?.grandTotalTokens ?? 0\n\n  // Status indicator\n  const statusIndicator = getStatusIndicator(subagent.status)\n  const statusColor = getStatusColor(subagent.status, theme)\n\n  return (\n    <Box flexDirection=\"column\" marginLeft={marginLeft} marginTop={1}>\n      {/* Subagent Header */}\n      <Box flexDirection=\"row\">\n        <Text color={theme.brand}>\uD83E\uDD16 </Text>\n        <Text>\n          Launching subagent: <Text bold>{subagent.agentType}</Text>\n        </Text>\n      </Box>\n\n      {/* Task description */}\n      <Box flexDirection=\"row\" marginLeft={2}>\n        <Text color={theme.dimmedText}>\u251C\u2500 </Text>\n        <Text>Task: {subagent.taskName}</Text>\n      </Box>\n\n      {/* Collapsible internal content */}\n      {expanded && (\n        <Box flexDirection=\"column\" marginLeft={2}>\n          <Text color={theme.dimmedText}>\u2502</Text>\n\n          {/* Subagent subtasks (if present) */}\n          {todos && todos.length > 0 && (\n            <SubagentTodosSection todos={todos} theme={theme} />\n          )}\n\n          {/* Subagent thinking */}\n          {thinking && (\n            <Box flexDirection=\"column\" marginLeft={1}>\n              <Text color={theme.dimmedText}>\u2502 </Text>\n              <AgentThinkingBlock\n                message={thinking.message}\n                startTime={thinking.startTime}\n                showSpinner={subagent.status === 'running'}\n                showElapsedTime={false}\n              />\n            </Box>\n          )}\n\n          {/* Subagent tool executions */}\n          {toolExecutions.map((tool, idx) => (\n            <Box key={idx} flexDirection=\"column\" marginLeft={1}>\n              <Text color={theme.dimmedText}>\u2502 </Text>\n              <ToolExecutionBlock tool={tool} indent={0} />\n            </Box>\n          ))}\n\n          {/* Subagent response */}\n          {response && (\n            <Box flexDirection=\"column\" marginLeft={1}>\n              <Text color={theme.dimmedText}>\u2502 </Text>\n              <AgentResponseBlock\n                message={response}\n                indent={0}\n                isSubagent={true}\n              />\n            </Box>\n          )}\n\n          <Text color={theme.dimmedText}>\u2502</Text>\n        </Box>\n      )}\n\n      {/* Subagent Footer (completion status) */}\n      <Box flexDirection=\"row\" marginLeft={2}>\n        <Text color={theme.dimmedText}>\u2514\u2500 </Text>\n        <Text color={statusColor}>\n          {statusIndicator} {getStatusLabel(subagent.status)}\n        </Text>\n        {subagent.status === 'completed' && (\n          <Text color={theme.mutedText}>\n            {' '}\n            ({duration}s, {formatTokenCount(tokenCount)} tokens)\n          </Text>\n        )}\n      </Box>\n\n      {/* Expand/collapse hint (only when collapsed) */}\n      {!expanded && (\n        <Box flexDirection=\"row\" marginLeft={4}>\n          <Text color={theme.mutedText}>\n            Press <Text bold>Ctrl+O</Text> to expand details\n          </Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n\n/**\n * SubagentTodosSection - Renders subagent's subtasks\n */\nfunction SubagentTodosSection({\n  todos,\n  theme,\n}: {\n  todos: TodoItem[]\n  theme: ReturnType<typeof getTheme>\n}) {\n  return (\n    <Box flexDirection=\"column\" marginLeft={1} marginY={1}>\n      <Box flexDirection=\"row\">\n        <Text color={theme.dimmedText}>\u2502 </Text>\n        <Text color={theme.dimmedText}>Subtasks:</Text>\n      </Box>\n      {todos.map((todo, idx) => (\n        <Box key={idx} flexDirection=\"row\" marginLeft={1}>\n          <Text color={theme.dimmedText}>\u2502 </Text>\n          <Text>{getTodoStatusSymbol(todo.status)} </Text>\n          <Text\n            color={todo.status === 'completed' ? theme.dim : undefined}\n            strikethrough={todo.status === 'completed'}\n          >\n            {todo.content}\n          </Text>\n        </Box>\n      ))}\n    </Box>\n  )\n}\n\n/**\n * Helper: Extract todos from subagent messages\n * (This would be populated from TodoWriteTool calls within the subagent)\n */\nfunction extractSubagentTodos(subagent: SubagentState): TodoItem[] | null {\n  // TODO: Implement extraction of todos from subagent messages\n  // For now, return null (will be implemented in Phase 4)\n  return null\n}\n\n/**\n * Helper: Extract thinking message from subagent\n */\nfunction extractThinkingMessage(\n  subagent: SubagentState,\n): { message: string; startTime: number } | null {\n  // Find thinking blocks in messages\n  for (const msg of subagent.messages) {\n    if (msg.type === 'assistant' && 'message' in msg) {\n      const thinkingBlock = msg.message.content.find(\n        (block: any) => block.type === 'thinking',\n      )\n      if (thinkingBlock && 'thinking' in thinkingBlock) {\n        return {\n          message: thinkingBlock.thinking || 'Thinking...',\n          startTime: subagent.metrics.startTime,\n        }\n      }\n    }\n  }\n  return null\n}\n\n/**\n * Helper: Extract tool executions from subagent\n */\nfunction extractToolExecutions(subagent: SubagentState): Array<{\n  id: string\n  name: string\n  input: any\n  status: 'pending' | 'running' | 'completed' | 'error'\n  startTime: number\n  durationMs?: number\n}> {\n  const tools: Array<any> = []\n\n  // Extract tool_use blocks from messages\n  for (const msg of subagent.messages) {\n    if (msg.type === 'assistant' && 'message' in msg) {\n      const toolBlocks = msg.message.content.filter(\n        (block: any) => block.type === 'tool_use',\n      )\n      for (const toolBlock of toolBlocks) {\n        if ('name' in toolBlock && 'id' in toolBlock) {\n          tools.push({\n            id: toolBlock.id,\n            name: toolBlock.name,\n            input: toolBlock.input,\n            status: 'completed', // Simplified for now\n            startTime: subagent.metrics.startTime,\n            durationMs: 100, // Placeholder\n          })\n        }\n      }\n    }\n  }\n\n  return tools\n}\n\n/**\n * Helper: Extract response message from subagent\n */\nfunction extractResponse(subagent: SubagentState): AssistantMessage | null {\n  // Find last assistant message with text content\n  for (let i = subagent.messages.length - 1; i >= 0; i--) {\n    const msg = subagent.messages[i]\n    if (msg.type === 'assistant' && 'message' in msg) {\n      const hasText = msg.message.content.some(\n        (block: any) => block.type === 'text' && block.text.trim(),\n      )\n      if (hasText) {\n        return msg as AssistantMessage\n      }\n    }\n  }\n  return null\n}\n\n/**\n * Helper: Get status indicator symbol\n */\nfunction getStatusIndicator(status: SubagentState['status']): string {\n  switch (status) {\n    case 'initializing':\n      return '\u25CB'\n    case 'queued':\n      return '\u2139'\n    case 'running':\n      return '\u22EF'\n    case 'completed':\n      return '\u2713'\n    case 'error':\n      return '\u2716'\n  }\n}\n\n/**\n * Helper: Get status color\n */\nfunction getStatusColor(\n  status: SubagentState['status'],\n  theme: ReturnType<typeof getTheme>,\n): string {\n  switch (status) {\n    case 'completed':\n      return theme.success\n    case 'error':\n      return theme.error\n    case 'running':\n      return theme.brand\n    default:\n      return theme.dimmedText\n  }\n}\n\n/**\n * Helper: Get status label\n */\nfunction getStatusLabel(status: SubagentState['status']): string {\n  switch (status) {\n    case 'initializing':\n      return 'Initializing...'\n    case 'queued':\n      return 'Queued'\n    case 'running':\n      return 'Running...'\n    case 'completed':\n      return 'Done'\n    case 'error':\n      return 'Error'\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * SubagentBlock - Embedded subagent execution display\n *\n * Renders a complete subagent execution hierarchically with:\n * - Header (task name, agent type, status)\n * - Optional: Subtasks (if subagent has todos)\n * - Optional: Thinking phase\n * - Optional: Tool executions\n * - Optional: Response\n * - Footer (completion status)\n *\n * Supports collapsible internal content\n */\n\nimport React, { useState } from 'react'\nimport { Box, Text } from 'ink'\nimport { getTheme } from '@utils/theme'\nimport { SYMBOLS, getTodoStatusSymbol } from '@constants/symbols'\nimport { AgentThinkingBlock } from './AgentThinkingBlock'\nimport { ToolExecutionBlock } from './ToolExecutionBlock'\nimport { AgentResponseBlock } from './AgentResponseBlock'\nimport { useAgentTokenStats, formatTokenCount } from '@hooks/useAgentTokenStats'\nimport type { SubagentState } from '@minto-types/subagent'\nimport type { TodoItem } from '@utils/todoStorage'\nimport type { AssistantMessage } from '@minto-types/conversation'\nimport type { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'\n\ninterface Props {\n  subagent: SubagentState\n  indent?: number\n  isExpanded?: boolean\n}\n\n/**\n * SubagentBlock - Hierarchical embedded subagent display\n *\n * Visual format (indent=1):\n * ```\n *   \uD83E\uDD16 Launching subagent: backend-architect\n *      \u251C\u2500 Task: Design authentication system\n *      \u2502\n *      \u2502   \uD83E\uDD14 Analyzing requirements... (300ms)\n *      \u2502\n *      \u2502   \uD83D\uDD27 Tool: Read package.json\n *      \u2502      \u2514\u2500 \u2713 Read 50 lines (80ms)\n *      \u2502\n *      \u2502   \uD83D\uDCAC I recommend using JWT...\n *      \u2502\n *      \u2514\u2500 \u2713 Completed (2.5s, 1200 tokens)\n * ```\n */\nexport function SubagentBlock({\n  subagent,\n  indent = 0,\n  isExpanded = false,\n}: Props): React.ReactNode {\n  const theme = getTheme()\n  const [expanded, setExpanded] = useState(isExpanded)\n  const marginLeft = indent * 2\n\n  // Get real-time token stats from unified TokenStatsManager\n  const tokenStats = useAgentTokenStats(subagent.id)\n\n  // Extract todos if present (from subagent execution)\n  const todos = extractSubagentTodos(subagent)\n  const thinking = extractThinkingMessage(subagent)\n  const toolExecutions = extractToolExecutions(subagent)\n  const response = extractResponse(subagent)\n\n  // Calculate metrics\n  const duration = subagent.metrics.endTime\n    ? ((subagent.metrics.endTime - subagent.metrics.startTime) / 1000).toFixed(\n        1,\n      )\n    : '...'\n  // Use token stats from TokenStatsManager (single source of truth)\n  const tokenCount = tokenStats?.grandTotalTokens ?? 0\n\n  // Status indicator\n  const statusIndicator = getStatusIndicator(subagent.status)\n  const statusColor = getStatusColor(subagent.status, theme)\n\n  return (\n    <Box flexDirection=\"column\" marginLeft={marginLeft} marginTop={1}>\n      {/* Subagent Header */}\n      <Box flexDirection=\"row\">\n        <Text color={theme.brand}>\uD83E\uDD16 </Text>\n        <Text>\n          Launching subagent: <Text bold>{subagent.agentType}</Text>\n        </Text>\n      </Box>\n\n      {/* Task description */}\n      <Box flexDirection=\"row\" marginLeft={2}>\n        <Text color={theme.dimmedText}>\u251C\u2500 </Text>\n        <Text>Task: {subagent.taskName}</Text>\n      </Box>\n\n      {/* Collapsible internal content */}\n      {expanded && (\n        <Box flexDirection=\"column\" marginLeft={2}>\n          <Text color={theme.dimmedText}>\u2502</Text>\n\n          {/* Subagent subtasks (if present) */}\n          {todos && todos.length > 0 && (\n            <SubagentTodosSection todos={todos} theme={theme} />\n          )}\n\n          {/* Subagent thinking */}\n          {thinking && (\n            <Box flexDirection=\"column\" marginLeft={1}>\n              <Text color={theme.dimmedText}>\u2502 </Text>\n              <AgentThinkingBlock\n                message={thinking.message}\n                startTime={thinking.startTime}\n                showSpinner={subagent.status === 'running'}\n                showElapsedTime={false}\n              />\n            </Box>\n          )}\n\n          {/* Subagent tool executions */}\n          {toolExecutions.map((tool, idx) => (\n            <Box key={idx} flexDirection=\"column\" marginLeft={1}>\n              <Text color={theme.dimmedText}>\u2502 </Text>\n              <ToolExecutionBlock tool={tool} indent={0} />\n            </Box>\n          ))}\n\n          {/* Subagent response */}\n          {response && (\n            <Box flexDirection=\"column\" marginLeft={1}>\n              <Text color={theme.dimmedText}>\u2502 </Text>\n              <AgentResponseBlock\n                message={response}\n                indent={0}\n                isSubagent={true}\n              />\n            </Box>\n          )}\n\n          <Text color={theme.dimmedText}>\u2502</Text>\n        </Box>\n      )}\n\n      {/* Subagent Footer (completion status) */}\n      <Box flexDirection=\"row\" marginLeft={2}>\n        <Text color={theme.dimmedText}>\u2514\u2500 </Text>\n        <Text color={statusColor}>\n          {statusIndicator} {getStatusLabel(subagent.status)}\n        </Text>\n        {subagent.status === 'completed' && (\n          <Text color={theme.mutedText}>\n            {' '}\n            ({duration}s, {formatTokenCount(tokenCount)} tokens)\n          </Text>\n        )}\n      </Box>\n\n      {/* Expand/collapse hint (only when collapsed) */}\n      {!expanded && (\n        <Box flexDirection=\"row\" marginLeft={4}>\n          <Text color={theme.mutedText}>\n            Press <Text bold>Ctrl+O</Text> to expand details\n          </Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n\n/**\n * SubagentTodosSection - Renders subagent's subtasks\n */\nfunction SubagentTodosSection({\n  todos,\n  theme,\n}: {\n  todos: TodoItem[]\n  theme: ReturnType<typeof getTheme>\n}) {\n  return (\n    <Box flexDirection=\"column\" marginLeft={1} marginY={1}>\n      <Box flexDirection=\"row\">\n        <Text color={theme.dimmedText}>\u2502 </Text>\n        <Text color={theme.dimmedText}>Subtasks:</Text>\n      </Box>\n      {todos.map((todo, idx) => (\n        <Box key={idx} flexDirection=\"row\" marginLeft={1}>\n          <Text color={theme.dimmedText}>\u2502 </Text>\n          <Text>{getTodoStatusSymbol(todo.status)} </Text>\n          <Text\n            color={todo.status === 'completed' ? theme.dim : undefined}\n            strikethrough={todo.status === 'completed'}\n          >\n            {todo.content}\n          </Text>\n        </Box>\n      ))}\n    </Box>\n  )\n}\n\n/**\n * Helper: Extract todos from subagent messages\n * (This would be populated from TodoWriteTool calls within the subagent)\n */\nfunction extractSubagentTodos(subagent: SubagentState): TodoItem[] | null {\n  // Extract todos from TodoWrite tool_use blocks in subagent messages\n  let latestTodos: TodoItem[] | null = null\n\n  for (const msg of subagent.messages) {\n    if (msg.type === 'assistant' && 'message' in msg) {\n      const todoBlocks = msg.message.content.filter(\n        (block: any) => block.type === 'tool_use' && block.name === 'TodoWrite',\n      )\n      for (const block of todoBlocks) {\n        if ('input' in block && block.input?.todos) {\n          // Each TodoWrite call replaces the full list\n          latestTodos = (block.input.todos as any[]).map((t, i) => ({\n            id: t.id ?? String(i),\n            content: t.content ?? '',\n            status: t.status ?? 'pending',\n            priority: t.priority ?? 'medium',\n          }))\n        }\n      }\n    }\n  }\n\n  return latestTodos\n}\n\n/**\n * Helper: Extract thinking message from subagent\n */\nfunction extractThinkingMessage(\n  subagent: SubagentState,\n): { message: string; startTime: number } | null {\n  // Find thinking blocks in messages\n  for (const msg of subagent.messages) {\n    if (msg.type === 'assistant' && 'message' in msg) {\n      const thinkingBlock = msg.message.content.find(\n        (block: any) => block.type === 'thinking',\n      )\n      if (thinkingBlock && 'thinking' in thinkingBlock) {\n        return {\n          message: thinkingBlock.thinking || 'Thinking...',\n          startTime: subagent.metrics.startTime,\n        }\n      }\n    }\n  }\n  return null\n}\n\n/**\n * Helper: Extract tool executions from subagent\n */\nfunction extractToolExecutions(subagent: SubagentState): Array<{\n  id: string\n  name: string\n  input: any\n  status: 'pending' | 'running' | 'completed' | 'error'\n  startTime: number\n  durationMs?: number\n}> {\n  const tools: Array<any> = []\n\n  // Extract tool_use blocks from messages, pair with tool_result for duration\n  const toolResultTimes = new Map<string, number>()\n  let msgIndex = 0\n\n  for (const msg of subagent.messages) {\n    if (msg.type === 'user' && 'message' in msg) {\n      const resultBlocks = (\n        Array.isArray(msg.message.content) ? msg.message.content : []\n      ).filter((block: any) => block.type === 'tool_result')\n      for (const rb of resultBlocks) {\n        if ('tool_use_id' in rb) {\n          toolResultTimes.set(rb.tool_use_id as string, msgIndex)\n        }\n      }\n    }\n    msgIndex++\n  }\n\n  let toolIndex = 0\n  for (const msg of subagent.messages) {\n    if (msg.type === 'assistant' && 'message' in msg) {\n      const toolBlocks = msg.message.content.filter(\n        (block: any) => block.type === 'tool_use',\n      )\n      for (const toolBlock of toolBlocks) {\n        if ('name' in toolBlock && 'id' in toolBlock) {\n          // Estimate duration: spread evenly across total subagent time\n          const totalDuration =\n            (subagent.metrics.endTime || Date.now()) -\n            subagent.metrics.startTime\n          const toolCount = subagent.metrics.toolUseCount || tools.length + 1\n          const estimatedDuration = Math.max(\n            1,\n            Math.round(totalDuration / toolCount),\n          )\n\n          tools.push({\n            id: toolBlock.id,\n            name: toolBlock.name,\n            input: toolBlock.input,\n            status: toolResultTimes.has(toolBlock.id) ? 'completed' : 'running',\n            startTime:\n              subagent.metrics.startTime + toolIndex * estimatedDuration,\n            durationMs: estimatedDuration,\n          })\n          toolIndex++\n        }\n      }\n    }\n  }\n\n  return tools\n}\n\n/**\n * Helper: Extract response message from subagent\n */\nfunction extractResponse(subagent: SubagentState): AssistantMessage | null {\n  // Find last assistant message with text content\n  for (let i = subagent.messages.length - 1; i >= 0; i--) {\n    const msg = subagent.messages[i]\n    if (msg.type === 'assistant' && 'message' in msg) {\n      const hasText = msg.message.content.some(\n        (block: any) => block.type === 'text' && block.text.trim(),\n      )\n      if (hasText) {\n        return msg as AssistantMessage\n      }\n    }\n  }\n  return null\n}\n\n/**\n * Helper: Get status indicator symbol\n */\nfunction getStatusIndicator(status: SubagentState['status']): string {\n  switch (status) {\n    case 'initializing':\n      return '\u25CB'\n    case 'queued':\n      return '\u2139'\n    case 'running':\n      return '\u22EF'\n    case 'completed':\n      return '\u2713'\n    case 'error':\n      return '\u2716'\n  }\n}\n\n/**\n * Helper: Get status color\n */\nfunction getStatusColor(\n  status: SubagentState['status'],\n  theme: ReturnType<typeof getTheme>,\n): string {\n  switch (status) {\n    case 'completed':\n      return theme.success\n    case 'error':\n      return theme.error\n    case 'running':\n      return theme.brand\n    default:\n      return theme.dimmedText\n  }\n}\n\n/**\n * Helper: Get status label\n */\nfunction getStatusLabel(status: SubagentState['status']): string {\n  switch (status) {\n    case 'initializing':\n      return 'Initializing...'\n    case 'queued':\n      return 'Queued'\n    case 'running':\n      return 'Running...'\n    case 'completed':\n      return 'Done'\n    case 'error':\n      return 'Error'\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/TabbedListView/ScrollableList.js

@@ -17,11 +17,26 @@ const getStatusIcon = (status) => {
 };
 function DefaultItemRenderer({
   item,
-  isFocused
+  isFocused,
+  multiSelect,
+  isSelected
 }) {
   const statusInfo = getStatusIcon(item.status);
-  const textColor = isFocused ? BRAND_GRADIENT.START : SEMANTIC_COLORS.dim;
-  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React.createElement(Text, { color: isFocused ? BRAND_GRADIENT.START : void 0 }, isFocused ? "\u25C6 " : "  "), statusInfo && /* @__PURE__ */ React.createElement(Text, { color: statusInfo.color }, statusInfo.icon, " "), /* @__PURE__ */ React.createElement(Text, { color: textColor }, item.label, item.description && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, " ", item.description), item.metadata && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, " \xB7 ", item.metadata)));
+  const checkboxWidth = multiSelect ? 2 : 0;
+  const focusWidth = 2;
+  const statusWidth = statusInfo ? 2 : 0;
+  const prefixPad = checkboxWidth + focusWidth + statusWidth;
+  const labelColor = isFocused ? BRAND_GRADIENT.START : SEMANTIC_COLORS.secondary;
+  const descColor = SEMANTIC_COLORS.dim;
+  const metaColor = SEMANTIC_COLORS.muted;
+  const hasDescription = !!item.description;
+  return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React.createElement(Box, { flexDirection: "row" }, multiSelect && /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      color: isSelected ? SEMANTIC_COLORS.success : SEMANTIC_COLORS.dim
+    },
+    isSelected ? "\u2611 " : "\u2610 "
+  ), /* @__PURE__ */ React.createElement(Text, { color: isFocused ? BRAND_GRADIENT.START : void 0 }, isFocused ? "\u25C6 " : "  "), statusInfo && /* @__PURE__ */ React.createElement(Text, { color: statusInfo.color }, statusInfo.icon, " "), /* @__PURE__ */ React.createElement(Text, { bold: isFocused, color: labelColor }, item.label), item.metadata && /* @__PURE__ */ React.createElement(Text, { color: metaColor }, " \xB7 ", item.metadata)), hasDescription && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: descColor }, " ".repeat(prefixPad), item.description)));
 }
 function ScrollableList({
   items,
@@ -30,7 +45,9 @@ function ScrollableList({
   onSelect,
   visibleCount,
   groupByCategory = false,
-  renderItem
+  renderItem,
+  multiSelect,
+  selectedIds
 }) {
   const { visibleItems, startIndex, endIndex } = useMemo(() => {
     if (items.length === 0) {
@@ -80,7 +97,16 @@ function ScrollableList({
       );
     }
     const isFocused = globalIndex === focusedIndex;
-    const itemElement = renderItem ? renderItem(item, isFocused) : /* @__PURE__ */ React.createElement(DefaultItemRenderer, { item, isFocused });
+    const isSelected = selectedIds?.has(item.id) ?? false;
+    const itemElement = renderItem ? renderItem(item, isFocused, isSelected) : /* @__PURE__ */ React.createElement(
+      DefaultItemRenderer,
+      {
+        item,
+        isFocused,
+        multiSelect,
+        isSelected
+      }
+    );
     displayElements.push(/* @__PURE__ */ React.createElement(Box, { key: item.id }, itemElement));
   });
   return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, hasMoreAbove && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " \u2191 ", countAbove, " more above...")), displayElements, hasMoreBelow && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " \u2193 ", countBelow, " more below...")));

package/dist/components/TabbedListView/ScrollableList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TabbedListView/ScrollableList.tsx"],
-  "sourcesContent": ["/**\n * ScrollableList Component\n *\n * A scrollable list matching the /command suggestion UI pattern.\n * Uses \u25C6 indicator for selection, brand colors, and scroll indicators.\n */\n\nimport React, { useMemo } from 'react'\nimport { Box, Text } from 'ink'\nimport { SEMANTIC_COLORS, BRAND_GRADIENT } from '@constants/colors'\nimport { t } from '@i18n'\nimport type { ListItem, ScrollableListProps, CategoryGroup } from './types'\n\n/** Status icon mapping */\nconst getStatusIcon = (status?: ListItem['status']) => {\n  switch (status) {\n    case 'enabled':\n      return { icon: '\u2714', color: SEMANTIC_COLORS.success }\n    case 'disabled':\n      return { icon: '\u25CB', color: SEMANTIC_COLORS.dim }\n    case 'running':\n      return { icon: '\u25D0', color: SEMANTIC_COLORS.running }\n    case 'error':\n      return { icon: '\u2717', color: SEMANTIC_COLORS.error }\n    default:\n      return null\n  }\n}\n\n/** Default item renderer - matches command suggestion style */\nfunction DefaultItemRenderer({\n  item,\n  isFocused,\n}: {\n  item: ListItem\n  isFocused: boolean\n}) {\n  const statusInfo = getStatusIcon(item.status)\n\n  // Use brand gradient color for selection, dim for others\n  const textColor = isFocused ? BRAND_GRADIENT.START : SEMANTIC_COLORS.dim\n\n  return (\n    <Box flexDirection=\"row\">\n      {/* Selection indicator: \u25C6 for selected, 2 spaces for unselected */}\n      <Text color={isFocused ? BRAND_GRADIENT.START : undefined}>\n        {isFocused ? '\u25C6 ' : '  '}\n      </Text>\n\n      {/* Status icon if present */}\n      {statusInfo && <Text color={statusInfo.color}>{statusInfo.icon} </Text>}\n\n      {/* Main content */}\n      <Text color={textColor}>\n        {item.label}\n        {item.description && (\n          <Text color={SEMANTIC_COLORS.muted}> {item.description}</Text>\n        )}\n        {item.metadata && (\n          <Text color={SEMANTIC_COLORS.muted}> \u00B7 {item.metadata}</Text>\n        )}\n      </Text>\n    </Box>\n  )\n}\n\nexport function ScrollableList({\n  items,\n  focusedIndex,\n  onFocusChange,\n  onSelect,\n  visibleCount,\n  groupByCategory = false,\n  renderItem,\n}: ScrollableListProps) {\n  // Calculate scroll window to keep selected item visible (same logic as command suggestions)\n  const { visibleItems, startIndex, endIndex } = useMemo(() => {\n    if (items.length === 0) {\n      return { visibleItems: [], startIndex: 0, endIndex: 0 }\n    }\n\n    // If all items fit in window, show them all\n    if (items.length <= visibleCount) {\n      return {\n        visibleItems: items.map((item, i) => ({ item, globalIndex: i })),\n        startIndex: 0,\n        endIndex: items.length,\n      }\n    }\n\n    // Calculate scroll window to keep focused item visible\n    const halfWindow = Math.floor(visibleCount / 2)\n    let start = Math.max(0, focusedIndex - halfWindow)\n    let end = start + visibleCount\n\n    // Adjust if we're near the end\n    if (end > items.length) {\n      end = items.length\n      start = Math.max(0, end - visibleCount)\n    }\n\n    return {\n      visibleItems: items.slice(start, end).map((item, i) => ({\n        item,\n        globalIndex: start + i,\n      })),\n      startIndex: start,\n      endIndex: end,\n    }\n  }, [items, focusedIndex, visibleCount])\n\n  // Scroll indicators\n  const hasMoreAbove = startIndex > 0\n  const hasMoreBelow = endIndex < items.length\n  const countAbove = startIndex\n  const countBelow = items.length - endIndex\n\n  // Build display with optional category headers\n  const displayElements: React.ReactNode[] = []\n  let currentCategory = ''\n\n  visibleItems.forEach(({ item, globalIndex }, visibleIndex) => {\n    // Add category header if category changed and grouping is enabled\n    if (groupByCategory && item.category !== currentCategory) {\n      currentCategory = item.category || 'Other'\n      displayElements.push(\n        <Box\n          key={`category-${currentCategory}-${globalIndex}`}\n          marginTop={visibleIndex > 0 ? 1 : 0}\n        >\n          <Text bold color={SEMANTIC_COLORS.secondary}>\n            {currentCategory}\n          </Text>\n        </Box>,\n      )\n    }\n\n    const isFocused = globalIndex === focusedIndex\n    const itemElement = renderItem ? (\n      renderItem(item, isFocused)\n    ) : (\n      <DefaultItemRenderer item={item} isFocused={isFocused} />\n    )\n\n    displayElements.push(<Box key={item.id}>{itemElement}</Box>)\n  })\n\n  return (\n    <Box flexDirection=\"column\">\n      {/* Scroll up indicator */}\n      {hasMoreAbove && (\n        <Box>\n          <Text color={SEMANTIC_COLORS.dim}> \u2191 {countAbove} more above...</Text>\n        </Box>\n      )}\n\n      {/* List items */}\n      {displayElements}\n\n      {/* Scroll down indicator */}\n      {hasMoreBelow && (\n        <Box>\n          <Text color={SEMANTIC_COLORS.dim}> \u2193 {countBelow} more below...</Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * ScrollableList Component\n *\n * A scrollable list matching the /command suggestion UI pattern.\n * Uses \u25C6 indicator for selection, brand colors, and scroll indicators.\n */\n\nimport React, { useMemo } from 'react'\nimport { Box, Text } from 'ink'\nimport { SEMANTIC_COLORS, BRAND_GRADIENT } from '@constants/colors'\nimport { t } from '@i18n'\nimport type { ListItem, ScrollableListProps, CategoryGroup } from './types'\n\n/** Status icon mapping */\nconst getStatusIcon = (status?: ListItem['status']) => {\n  switch (status) {\n    case 'enabled':\n      return { icon: '\u2714', color: SEMANTIC_COLORS.success }\n    case 'disabled':\n      return { icon: '\u25CB', color: SEMANTIC_COLORS.dim }\n    case 'running':\n      return { icon: '\u25D0', color: SEMANTIC_COLORS.running }\n    case 'error':\n      return { icon: '\u2717', color: SEMANTIC_COLORS.error }\n    default:\n      return null\n  }\n}\n\n/** Default item renderer - two-line layout with clear visual hierarchy */\nfunction DefaultItemRenderer({\n  item,\n  isFocused,\n  multiSelect,\n  isSelected,\n}: {\n  item: ListItem\n  isFocused: boolean\n  multiSelect?: boolean\n  isSelected?: boolean\n}) {\n  const statusInfo = getStatusIcon(item.status)\n\n  // Prefix width: checkbox \"\u2611 \" (2) + \"\u25C6 \" (2) + optional status icon \"\u2714 \" (2)\n  const checkboxWidth = multiSelect ? 2 : 0\n  const focusWidth = 2\n  const statusWidth = statusInfo ? 2 : 0\n  const prefixPad = checkboxWidth + focusWidth + statusWidth\n\n  // Colors: focused items use brand gradient, unfocused use secondary/dim\n  const labelColor = isFocused\n    ? BRAND_GRADIENT.START\n    : SEMANTIC_COLORS.secondary\n  const descColor = SEMANTIC_COLORS.dim\n  const metaColor = SEMANTIC_COLORS.muted\n\n  const hasDescription = !!item.description\n\n  return (\n    <Box flexDirection=\"column\">\n      {/* Line 1: [checkbox] + indicator + status + label + metadata */}\n      <Box flexDirection=\"row\">\n        {multiSelect && (\n          <Text\n            color={isSelected ? SEMANTIC_COLORS.success : SEMANTIC_COLORS.dim}\n          >\n            {isSelected ? '\u2611 ' : '\u2610 '}\n          </Text>\n        )}\n        <Text color={isFocused ? BRAND_GRADIENT.START : undefined}>\n          {isFocused ? '\u25C6 ' : '  '}\n        </Text>\n        {statusInfo && <Text color={statusInfo.color}>{statusInfo.icon} </Text>}\n        <Text bold={isFocused} color={labelColor}>\n          {item.label}\n        </Text>\n        {item.metadata && <Text color={metaColor}> \u00B7 {item.metadata}</Text>}\n      </Box>\n\n      {/* Line 2: description (indented to align under label) */}\n      {hasDescription && (\n        <Box>\n          <Text color={descColor}>\n            {' '.repeat(prefixPad)}\n            {item.description}\n          </Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nexport function ScrollableList({\n  items,\n  focusedIndex,\n  onFocusChange,\n  onSelect,\n  visibleCount,\n  groupByCategory = false,\n  renderItem,\n  multiSelect,\n  selectedIds,\n}: ScrollableListProps) {\n  // Calculate scroll window to keep selected item visible (same logic as command suggestions)\n  const { visibleItems, startIndex, endIndex } = useMemo(() => {\n    if (items.length === 0) {\n      return { visibleItems: [], startIndex: 0, endIndex: 0 }\n    }\n\n    // If all items fit in window, show them all\n    if (items.length <= visibleCount) {\n      return {\n        visibleItems: items.map((item, i) => ({ item, globalIndex: i })),\n        startIndex: 0,\n        endIndex: items.length,\n      }\n    }\n\n    // Calculate scroll window to keep focused item visible\n    const halfWindow = Math.floor(visibleCount / 2)\n    let start = Math.max(0, focusedIndex - halfWindow)\n    let end = start + visibleCount\n\n    // Adjust if we're near the end\n    if (end > items.length) {\n      end = items.length\n      start = Math.max(0, end - visibleCount)\n    }\n\n    return {\n      visibleItems: items.slice(start, end).map((item, i) => ({\n        item,\n        globalIndex: start + i,\n      })),\n      startIndex: start,\n      endIndex: end,\n    }\n  }, [items, focusedIndex, visibleCount])\n\n  // Scroll indicators\n  const hasMoreAbove = startIndex > 0\n  const hasMoreBelow = endIndex < items.length\n  const countAbove = startIndex\n  const countBelow = items.length - endIndex\n\n  // Build display with optional category headers\n  const displayElements: React.ReactNode[] = []\n  let currentCategory = ''\n\n  visibleItems.forEach(({ item, globalIndex }, visibleIndex) => {\n    // Add category header if category changed and grouping is enabled\n    if (groupByCategory && item.category !== currentCategory) {\n      currentCategory = item.category || 'Other'\n      displayElements.push(\n        <Box\n          key={`category-${currentCategory}-${globalIndex}`}\n          marginTop={visibleIndex > 0 ? 1 : 0}\n        >\n          <Text bold color={SEMANTIC_COLORS.secondary}>\n            {currentCategory}\n          </Text>\n        </Box>,\n      )\n    }\n\n    const isFocused = globalIndex === focusedIndex\n    const isSelected = selectedIds?.has(item.id) ?? false\n    const itemElement = renderItem ? (\n      renderItem(item, isFocused, isSelected)\n    ) : (\n      <DefaultItemRenderer\n        item={item}\n        isFocused={isFocused}\n        multiSelect={multiSelect}\n        isSelected={isSelected}\n      />\n    )\n\n    displayElements.push(<Box key={item.id}>{itemElement}</Box>)\n  })\n\n  return (\n    <Box flexDirection=\"column\">\n      {/* Scroll up indicator */}\n      {hasMoreAbove && (\n        <Box>\n          <Text color={SEMANTIC_COLORS.dim}> \u2191 {countAbove} more above...</Text>\n        </Box>\n      )}\n\n      {/* List items */}\n      {displayElements}\n\n      {/* Scroll down indicator */}\n      {hasMoreBelow && (\n        <Box>\n          <Text color={SEMANTIC_COLORS.dim}> \u2193 {countBelow} more below...</Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/TabbedListView/TabBar.js

@@ -2,16 +2,21 @@ import React from "react";
 import { Box, Text } from "ink";
 import { BRAND_GRADIENT, SEMANTIC_COLORS } from "../../constants/colors.js";
 function TabBar({ tabs, activeTab, onTabChange }) {
-  return /* @__PURE__ */ React.createElement(Box, null, tabs.map((tab, index) => {
+  return /* @__PURE__ */ React.createElement(Box, { flexShrink: 0 }, tabs.map((tab, index) => {
     const isActive = tab.id === activeTab;
     const isLast = index === tabs.length - 1;
-    return /* @__PURE__ */ React.createElement(Box, { key: tab.id }, isActive ? (
-      // Active tab: background highlight with brand color
-      /* @__PURE__ */ React.createElement(Text, { backgroundColor: BRAND_GRADIENT.START, color: "black", bold: true }, " ", tab.label, tab.badge !== void 0 && tab.badge > 0 ? ` (${tab.badge})` : "", " ")
-    ) : (
-      // Inactive tab: dim text
-      /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " ", tab.label, tab.badge !== void 0 && tab.badge > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, " (", tab.badge, ")"), " ")
-    ), !isLast && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, "\u2502"));
+    const badgeSuffix = tab.badge !== void 0 && tab.badge > 0 ? ` (${tab.badge})` : "";
+    const label = ` ${tab.label}${badgeSuffix} `;
+    return /* @__PURE__ */ React.createElement(React.Fragment, { key: tab.id }, isActive ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        wrap: "truncate",
+        backgroundColor: BRAND_GRADIENT.START,
+        color: "black",
+        bold: true
+      },
+      label
+    ) : /* @__PURE__ */ React.createElement(Text, { wrap: "truncate", color: SEMANTIC_COLORS.dim }, label), !isLast && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, "\u2502"));
   }), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, " Tab/\u2190\u2192"));
 }
 export {

package/dist/components/TabbedListView/TabBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/TabbedListView/TabBar.tsx"],
-  "sourcesContent": ["/**\n * TabBar Component\n *\n * Displays tab navigation matching the brand style.\n * Uses background color for active tab selection.\n */\n\nimport React from 'react'\nimport { Box, Text } from 'ink'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport type { TabBarProps } from './types'\n\nexport function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {\n  return (\n    <Box>\n      {tabs.map((tab, index) => {\n        const isActive = tab.id === activeTab\n        const isLast = index === tabs.length - 1\n\n        return (\n          <Box key={tab.id}>\n            {isActive ? (\n              // Active tab: background highlight with brand color\n              <Text backgroundColor={BRAND_GRADIENT.START} color=\"black\" bold>\n                {' '}\n                {tab.label}\n                {tab.badge !== undefined && tab.badge > 0\n                  ? ` (${tab.badge})`\n                  : ''}{' '}\n              </Text>\n            ) : (\n              // Inactive tab: dim text\n              <Text color={SEMANTIC_COLORS.dim}>\n                {' '}\n                {tab.label}\n                {tab.badge !== undefined && tab.badge > 0 && (\n                  <Text color={SEMANTIC_COLORS.muted}> ({tab.badge})</Text>\n                )}{' '}\n              </Text>\n            )}\n            {!isLast && <Text color={SEMANTIC_COLORS.muted}>\u2502</Text>}\n          </Box>\n        )\n      })}\n      <Text color={SEMANTIC_COLORS.muted}> Tab/\u2190\u2192</Text>\n    </Box>\n  )\n}\n"],
-  "mappings": "AAOA,OAAO,WAAW;AAClB,SAAS,KAAK,YAAY;AAC1B,SAAS,gBAAgB,uBAAuB;AAGzC,SAAS,OAAO,EAAE,MAAM,WAAW,YAAY,GAAgB;AACpE,SACE,oCAAC,WACE,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,UAAM,WAAW,IAAI,OAAO;AAC5B,UAAM,SAAS,UAAU,KAAK,SAAS;AAEvC,WACE,oCAAC,OAAI,KAAK,IAAI,MACX;AAAA;AAAA,MAEC,oCAAC,QAAK,iBAAiB,eAAe,OAAO,OAAM,SAAQ,MAAI,QAC5D,KACA,IAAI,OACJ,IAAI,UAAU,UAAa,IAAI,QAAQ,IACpC,KAAK,IAAI,KAAK,MACd,IAAI,GACV;AAAA;AAAA;AAAA,MAGA,oCAAC,QAAK,OAAO,gBAAgB,OAC1B,KACA,IAAI,OACJ,IAAI,UAAU,UAAa,IAAI,QAAQ,KACtC,oCAAC,QAAK,OAAO,gBAAgB,SAAO,MAAG,IAAI,OAAM,GAAC,GACjD,GACL;AAAA,OAED,CAAC,UAAU,oCAAC,QAAK,OAAO,gBAAgB,SAAO,QAAC,CACnD;AAAA,EAEJ,CAAC,GACD,oCAAC,QAAK,OAAO,gBAAgB,SAAO,mBAAO,CAC7C;AAEJ;",
+  "sourcesContent": ["/**\n * TabBar Component\n *\n * Displays tab navigation matching the brand style.\n * Uses background color for active tab selection.\n *\n * Layout notes:\n * - Each tab Box uses flexShrink={0} to prevent Yoga from compressing tabs\n * - Text uses wrap=\"truncate\" to prevent line wrapping in tight layouts\n * - Both active and inactive tabs use identical string content (no nested <Text>)\n *   to ensure consistent width measurement by Ink's Yoga engine\n */\n\nimport React from 'react'\nimport { Box, Text } from 'ink'\nimport { BRAND_GRADIENT, SEMANTIC_COLORS } from '@constants/colors'\nimport type { TabBarProps } from './types'\n\nexport function TabBar({ tabs, activeTab, onTabChange }: TabBarProps) {\n  return (\n    <Box flexShrink={0}>\n      {tabs.map((tab, index) => {\n        const isActive = tab.id === activeTab\n        const isLast = index === tabs.length - 1\n\n        // Build label string identically for active/inactive to ensure\n        // consistent width measurement by Yoga\n        const badgeSuffix =\n          tab.badge !== undefined && tab.badge > 0 ? ` (${tab.badge})` : ''\n        const label = ` ${tab.label}${badgeSuffix} `\n\n        return (\n          <React.Fragment key={tab.id}>\n            {isActive ? (\n              <Text\n                wrap=\"truncate\"\n                backgroundColor={BRAND_GRADIENT.START}\n                color=\"black\"\n                bold\n              >\n                {label}\n              </Text>\n            ) : (\n              <Text wrap=\"truncate\" color={SEMANTIC_COLORS.dim}>\n                {label}\n              </Text>\n            )}\n            {!isLast && <Text color={SEMANTIC_COLORS.muted}>\u2502</Text>}\n          </React.Fragment>\n        )\n      })}\n      <Text color={SEMANTIC_COLORS.muted}> Tab/\u2190\u2192</Text>\n    </Box>\n  )\n}\n"],
+  "mappings": "AAaA,OAAO,WAAW;AAClB,SAAS,KAAK,YAAY;AAC1B,SAAS,gBAAgB,uBAAuB;AAGzC,SAAS,OAAO,EAAE,MAAM,WAAW,YAAY,GAAgB;AACpE,SACE,oCAAC,OAAI,YAAY,KACd,KAAK,IAAI,CAAC,KAAK,UAAU;AACxB,UAAM,WAAW,IAAI,OAAO;AAC5B,UAAM,SAAS,UAAU,KAAK,SAAS;AAIvC,UAAM,cACJ,IAAI,UAAU,UAAa,IAAI,QAAQ,IAAI,KAAK,IAAI,KAAK,MAAM;AACjE,UAAM,QAAQ,IAAI,IAAI,KAAK,GAAG,WAAW;AAEzC,WACE,oCAAC,MAAM,UAAN,EAAe,KAAK,IAAI,MACtB,WACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAiB,eAAe;AAAA,QAChC,OAAM;AAAA,QACN,MAAI;AAAA;AAAA,MAEH;AAAA,IACH,IAEA,oCAAC,QAAK,MAAK,YAAW,OAAO,gBAAgB,OAC1C,KACH,GAED,CAAC,UAAU,oCAAC,QAAK,OAAO,gBAAgB,SAAO,QAAC,CACnD;AAAA,EAEJ,CAAC,GACD,oCAAC,QAAK,OAAO,gBAAgB,SAAO,mBAAO,CAC7C;AAEJ;",
   "names": []
 }

package/dist/components/TabbedListView/TabbedListView.js

@@ -5,7 +5,10 @@ import { TabBar } from "./TabBar.js";
 import { SearchInput } from "./SearchInput.js";
 import { ScrollableList } from "./ScrollableList.js";
 import { SimpleSpinner } from "../Spinner.js";
-const MAX_VISIBLE_ITEMS = 8;
+import { StatusOverlayContent } from "../StatusOverlayContent.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+const PROMPT_HEIGHT = 5;
+const CHROME_HEIGHT = 6;
 function TabbedListView({
   title,
   tabs,
@@ -16,15 +19,31 @@ function TabbedListView({
   searchPlaceholder = "Search...",
   searchQuery = "",
   onSearchChange,
+  onSearchSubmit,
   onSelect,
   onClose,
+  onBack,
   footerHint,
   isLoading = false,
   loadingText = "Loading...",
   emptyText = "No items found",
   groupByCategory = false,
-  renderItem
+  renderItem,
+  statusOverlay,
+  isActive = true,
+  showItemCount = true,
+  statusDismissHint,
+  multiSelect,
+  selectedIds,
+  onSelectionChange,
+  onMultiSelect,
+  multiSelectActionLabel
 }) {
+  const { rows } = useTerminalSize();
+  const visibleCount = Math.min(
+    8,
+    Math.max(3, rows - PROMPT_HEIGHT - CHROME_HEIGHT)
+  );
   const [focusArea, setFocusArea] = useState(
     searchEnabled ? "search" : "list"
   );
@@ -60,57 +79,105 @@ function TabbedListView({
     },
     [onSelect]
   );
-  useInput((input, key) => {
-    if (key.escape) {
-      onClose();
-      return;
-    }
-    if (key.tab) {
-      cycleTab(key.shift ? "left" : "right");
-      return;
-    }
-    if (focusArea === "tabs" || focusArea === "search") {
-      if (key.leftArrow) {
-        cycleTab("left");
+  useInput(
+    (input, key) => {
+      if (statusOverlay && statusOverlay.type !== "loading") {
+        if (key.escape || key.return) {
+          onClose();
+        }
         return;
       }
-      if (key.rightArrow) {
-        cycleTab("right");
+      if (statusOverlay) return;
+      if (key.escape) {
+        if (onBack) {
+          onBack();
+        } else {
+          onClose();
+        }
         return;
       }
-    }
-    if (key.downArrow) {
-      if (focusArea === "search") {
-        setFocusArea("list");
+      if (key.tab) {
+        cycleTab(key.shift ? "left" : "right");
         return;
       }
-      if (focusArea === "list" && filteredItems.length > 0) {
-        setFocusedIndex(
-          (prev) => prev < filteredItems.length - 1 ? prev + 1 : prev
-        );
+      if (focusArea === "tabs" || focusArea === "search") {
+        if (key.leftArrow) {
+          cycleTab("left");
+          return;
+        }
+        if (key.rightArrow) {
+          cycleTab("right");
+          return;
+        }
+      }
+      if (key.downArrow) {
+        if (focusArea === "search") {
+          setFocusArea("list");
+          return;
+        }
+        if (focusArea === "list" && filteredItems.length > 0) {
+          setFocusedIndex(
+            (prev) => prev < filteredItems.length - 1 ? prev + 1 : prev
+          );
+          return;
+        }
+      }
+      if (key.upArrow) {
+        if (focusArea === "list") {
+          if (focusedIndex > 0) {
+            setFocusedIndex((prev) => prev - 1);
+          } else if (searchEnabled) {
+            setFocusArea("search");
+          }
+          return;
+        }
+      }
+      if (key.return && focusArea === "search" && onSearchSubmit) {
+        onSearchSubmit(searchQuery);
         return;
       }
-    }
-    if (key.upArrow) {
-      if (focusArea === "list") {
-        if (focusedIndex > 0) {
-          setFocusedIndex((prev) => prev - 1);
-        } else if (searchEnabled) {
-          setFocusArea("search");
+      if (input === " " && multiSelect && focusArea === "list" && filteredItems.length > 0) {
+        const item = filteredItems[focusedIndex];
+        if (item && onSelectionChange) {
+          const isCurrentlySelected = selectedIds?.has(item.id) ?? false;
+          onSelectionChange(item.id, !isCurrentlySelected);
         }
         return;
       }
-    }
-    if (key.return && focusArea === "list" && filteredItems.length > 0) {
-      handleSelect(filteredItems[focusedIndex]);
-      return;
-    }
-    if (input === "/" && searchEnabled && focusArea !== "search") {
-      setFocusArea("search");
-      return;
-    }
-  });
+      if (input === "a" && multiSelect && focusArea === "list" && filteredItems.length > 0) {
+        if (onSelectionChange) {
+          const allSelected = filteredItems.every(
+            (item) => selectedIds?.has(item.id)
+          );
+          for (const item of filteredItems) {
+            onSelectionChange(item.id, !allSelected);
+          }
+        }
+        return;
+      }
+      if (key.return && focusArea === "list" && filteredItems.length > 0) {
+        if (multiSelect && selectedIds && selectedIds.size > 0 && onMultiSelect) {
+          const selectedItems = filteredItems.filter(
+            (item) => selectedIds.has(item.id)
+          );
+          if (selectedItems.length > 0) {
+            onMultiSelect(selectedItems);
+            return;
+          }
+        }
+        handleSelect(filteredItems[focusedIndex]);
+        return;
+      }
+      if (input === "/" && searchEnabled && focusArea !== "search") {
+        setFocusArea("search");
+        return;
+      }
+    },
+    { isActive }
+  );
   const defaultHint = "\u2191\u2193 Navigate \xB7 Enter Select \xB7 Tab/\u2190\u2192 Switch \xB7 Esc Close";
+  const multiSelectHint = "\u2191\u2193 Navigate \xB7 Space Select \xB7 a All \xB7 Enter Action \xB7 Tab Switch \xB7 Esc Close";
+  const displayHint = statusOverlay ? statusOverlay.type === "loading" ? "" : statusDismissHint || "Esc Close" : multiSelect ? selectedIds && selectedIds.size > 0 && multiSelectActionLabel ? `${multiSelectActionLabel} \xB7 ${footerHint || multiSelectHint}` : footerHint || multiSelectHint : footerHint || defaultHint;
   return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", width: "100%" }, /* @__PURE__ */ React.createElement(
     Box,
     {
@@ -124,8 +191,8 @@ function TabbedListView({
       paddingX: 1,
       flexDirection: "column"
     },
-    /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: BRAND_GRADIENT.START }, "\u25C6"), /* @__PURE__ */ React.createElement(Text, { bold: true, color: SEMANTIC_COLORS.secondary }, " ", title), filteredItems.length > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " (", filteredItems.length, ")")),
-    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(TabBar, { tabs, activeTab, onTabChange }))
+    /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: BRAND_GRADIENT.START }, "\u25C6"), /* @__PURE__ */ React.createElement(Text, { bold: true, color: SEMANTIC_COLORS.secondary }, " ", title), showItemCount && !statusOverlay && filteredItems.length > 0 && /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " (", filteredItems.length, ")")),
+    /* @__PURE__ */ React.createElement(Box, { marginTop: 1, flexShrink: 0 }, /* @__PURE__ */ React.createElement(TabBar, { tabs, activeTab, onTabChange }))
   ), /* @__PURE__ */ React.createElement(
     Box,
     {
@@ -140,7 +207,7 @@ function TabbedListView({
       paddingX: 1,
       paddingY: 1
     },
-    searchEnabled && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(
+    searchEnabled && !statusOverlay && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(
       SearchInput,
       {
         value: searchQuery,
@@ -150,19 +217,27 @@ function TabbedListView({
         isActive: focusArea === "search"
       }
     )),
-    /* @__PURE__ */ React.createElement(Box, { key: `content-${activeTab}`, flexDirection: "column" }, isLoading ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(SimpleSpinner, null), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " ", loadingText)) : filteredItems.length === 0 ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, emptyText)) : /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(Box, { key: `content-${activeTab}`, flexDirection: "column" }, statusOverlay ? /* @__PURE__ */ React.createElement(
+      StatusOverlayContent,
+      {
+        type: statusOverlay.type,
+        message: statusOverlay.message
+      }
+    ) : isLoading ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(SimpleSpinner, null), /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, " ", loadingText)) : filteredItems.length === 0 ? /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.dim }, emptyText)) : /* @__PURE__ */ React.createElement(
       ScrollableList,
       {
         items: filteredItems,
         focusedIndex,
         onFocusChange: setFocusedIndex,
         onSelect: handleSelect,
-        visibleCount: MAX_VISIBLE_ITEMS,
+        visibleCount,
         groupByCategory,
-        renderItem
+        renderItem,
+        multiSelect,
+        selectedIds
       }
     )),
-    /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, footerHint || defaultHint))
+    displayHint && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: SEMANTIC_COLORS.muted }, displayHint))
   ));
 }
 export {