Merge pull request #416 from znygugeyx-ctrl/feat/subagent-fork-render

feat: 参考 claude code 官方实现，改进 sub agent 以及 fork agent 的渲染方式

src/components/PromptInput/PromptInput.tsx

@@ -26,6 +26,7 @@ import { useSetPromptOverlayDialog } from '../../context/promptOverlayContext.js
 import { formatImageRef, formatPastedTextRef, getPastedTextRefNumLines, parseReferences } from '../../history.js';
 import type { VerificationStatus } from '../../hooks/useApiKeyVerification.js';
 import { type HistoryMode, useArrowKeyHistory } from '../../hooks/useArrowKeyHistory.js';
+import { useBackgroundAgentTasks } from '../../hooks/useBackgroundAgentTasks.js';
 import { useDoublePress } from '../../hooks/useDoublePress.js';
 import { useHistorySearch } from '../../hooks/useHistorySearch.js';
 import type { IDESelection } from '../../hooks/useIdeSelection.js';
@@ -415,6 +416,16 @@ function PromptInput({
   // First ↓ selects the pill, second ↓ moves to row 0. Prevents double-select
   // of pill + row when both bg tasks (pill) and forked agents (rows) are visible.
   const coordinatorTaskIndex = useAppState(s => s.coordinatorTaskIndex);
+  const selectedBgAgentIndex = useAppState(s => s.selectedBgAgentIndex);
+  const setSelectedBgAgentIndex = useCallback(
+    (v: number | ((prev: number) => number)) =>
+      setAppState(prev => {
+        const next = typeof v === 'function' ? v(prev.selectedBgAgentIndex) : v;
+        if (next === prev.selectedBgAgentIndex) return prev;
+        return { ...prev, selectedBgAgentIndex: next };
+      }),
+    [setAppState],
+  );
   const setCoordinatorTaskIndex = useCallback(
     (v: number | ((prev: number) => number)) =>
       setAppState(prev => {
@@ -501,10 +512,13 @@ function PromptInput({
     (runningTaskCount > 0 || (process.env.USER_TYPE === 'ant' && coordinatorTaskCount > 0)) &&
     !shouldHideTasksFooter(tasks, showSpinnerTree);
   const teamsFooterVisible = cachedTeams.length > 0;
+  const bgAgentList = useBackgroundAgentTasks();
+  const bgAgentFooterVisible = bgAgentList.length > 0;
 
   const footerItems = useMemo(
     () =>
       [
+        bgAgentFooterVisible && 'bg_agent',
         tasksFooterVisible && 'tasks',
         tmuxFooterVisible && 'tmux',
         bagelFooterVisible && 'bagel',
@@ -513,6 +527,7 @@ function PromptInput({
         companionFooterVisible && 'companion',
       ].filter(Boolean) as FooterItem[],
     [
+      bgAgentFooterVisible,
       tasksFooterVisible,
       tmuxFooterVisible,
       bagelFooterVisible,
@@ -540,6 +555,7 @@ function PromptInput({
   const _bagelSelected = footerItemSelected === 'bagel';
   const teamsSelected = footerItemSelected === 'teams';
   const bridgeSelected = footerItemSelected === 'bridge';
+  const bgAgentSelected = footerItemSelected === 'bg_agent';
 
   function selectFooterItem(item: FooterItem | null): void {
     setAppState(prev => (prev.footerSelection === item ? prev : { ...prev, footerSelection: item }));
@@ -547,6 +563,9 @@ function PromptInput({
       setTeammateFooterIndex(0);
       setCoordinatorTaskIndex(minCoordinatorIndex);
     }
+    if (item === 'bg_agent') {
+      setSelectedBgAgentIndex(-1);
+    }
   }
 
   // delta: +1 = down/right, -1 = up/left. Returns true if nav happened
@@ -1808,6 +1827,15 @@ function PromptInput({
   useKeybindings(
     {
       'footer:up': () => {
+        // ↑ in bg_agent pill: move selection up (-1 = main). At -1, leave pill.
+        if (bgAgentSelected) {
+          if (selectedBgAgentIndex > -1) {
+            setSelectedBgAgentIndex(prev => prev - 1);
+          } else {
+            selectFooterItem(null);
+          }
+          return;
+        }
         // ↑ scrolls within the coordinator task list before leaving the pill
         if (
           tasksSelected &&
@@ -1821,6 +1849,13 @@ function PromptInput({
         navigateFooter(-1, true);
       },
       'footer:down': () => {
+        // ↓ in bg_agent pill: move selection down through agents. Clamp at last.
+        if (bgAgentSelected) {
+          if (selectedBgAgentIndex < bgAgentList.length - 1) {
+            setSelectedBgAgentIndex(prev => prev + 1);
+          }
+          return;
+        }
         // ↓ scrolls within the coordinator task list, never leaves the pill
         if (tasksSelected && process.env.USER_TYPE === 'ant' && coordinatorTaskCount > 0) {
           if (coordinatorTaskIndex < coordinatorTaskCount - 1) {
@@ -1906,6 +1941,15 @@ function PromptInput({
             setShowBridgeDialog(true);
             selectFooterItem(null);
             break;
+          case 'bg_agent':
+            if (selectedBgAgentIndex === -1) {
+              exitTeammateView(setAppState);
+            } else {
+              const picked = bgAgentList[selectedBgAgentIndex];
+              if (picked) enterTeammateView(picked.agentId, setAppState);
+            }
+            // Keep the pill focused so ↑/↓ continue to work after Enter.
+            break;
         }
       },
       'footer:clearSelection': () => {

src/components/messages/AssistantToolUseMessage.tsx

@@ -30,6 +30,7 @@ type Props = {
   inProgressToolCallCount?: number;
   lookups: ReturnType<typeof buildMessageLookups>;
   isTranscriptMode?: boolean;
+  defaultCollapsed?: boolean;
 };
 
 export function AssistantToolUseMessage({
@@ -45,6 +46,7 @@ export function AssistantToolUseMessage({
   inProgressToolCallCount,
   lookups,
   isTranscriptMode,
+  defaultCollapsed,
 }: Props): React.ReactNode {
   const terminalSize = useTerminalSize();
   const [theme] = useTheme();
@@ -167,6 +169,7 @@ export function AssistantToolUseMessage({
         </Box>
         {!isResolved &&
           !isQueued &&
+          !defaultCollapsed &&
           (isClassifierChecking ? (
             <MessageResponse height={1}>
               <Text dimColor>

src/components/messages/UserForkBoilerplateMessage.tsx

@@ -3,28 +3,31 @@
  */
 import type { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs';
 import * as React from 'react';
-import { Box, Text } from '@anthropic/ink';
+import { FORK_BOILERPLATE_TAG, FORK_DIRECTIVE_PREFIX } from '../../constants/xml.js';
 import { extractTag } from '../../utils/messages.js';
+import { UserPromptMessage } from './UserPromptMessage.js';
 
 type Props = {
   addMargin: boolean;
   param: TextBlockParam;
+  isTranscriptMode?: boolean;
+  timestamp?: string;
 };
 
-export function UserForkBoilerplateMessage({ param, addMargin }: Props): React.ReactNode {
-  const text = param.text;
-  const extracted = extractTag(text, 'fork-boilerplate');
-  if (!extracted) {
-    return null;
-  }
-
-  const firstLine = extracted.trim().split('\n')[0] ?? '';
-  const preview = firstLine.length > 80 ? firstLine.slice(0, 77) + '...' : firstLine;
+export function UserForkBoilerplateMessage({ param, addMargin, isTranscriptMode, timestamp }: Props): React.ReactNode {
+  if (!extractTag(param.text, FORK_BOILERPLATE_TAG)) return null;
+  const closeTag = `</${FORK_BOILERPLATE_TAG}>`;
+  const afterTag = param.text.slice(param.text.indexOf(closeTag) + closeTag.length).trimStart();
+  const userPrompt = afterTag.startsWith(FORK_DIRECTIVE_PREFIX)
+    ? afterTag.slice(FORK_DIRECTIVE_PREFIX.length)
+    : afterTag;
 
   return (
-    <Box flexDirection="row" marginTop={addMargin ? 1 : 0}>
-      <Text dimColor>[fork] </Text>
-      <Text>{preview}</Text>
-    </Box>
+    <UserPromptMessage
+      addMargin={addMargin}
+      param={{ type: 'text', text: userPrompt }}
+      isTranscriptMode={isTranscriptMode}
+      timestamp={timestamp}
+    />
   );
 }

src/components/messages/UserTextMessage.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { NO_CONTENT_MESSAGE } from '../../constants/messages.js';
 import {
   COMMAND_MESSAGE_TAG,
+  FORK_BOILERPLATE_TAG,
   LOCAL_COMMAND_CAVEAT_TAG,
   TASK_NOTIFICATION_TAG,
   TEAMMATE_MESSAGE_TAG,
@@ -124,16 +125,21 @@ export function UserTextMessage({
   }
 
   // Fork child's first message: collapse the rules/format boilerplate, show
-  // only the directive. FORK_BOILERPLATE_TAG is inlined so the import doesn't
-  // ship in external builds where feature('FORK_SUBAGENT') is false.
-  if (feature('FORK_SUBAGENT')) {
-    if (param.text.includes('<fork-boilerplate>')) {
-      /* eslint-disable @typescript-eslint/no-require-imports */
-      const { UserForkBoilerplateMessage } =
-        require('./UserForkBoilerplateMessage.js') as typeof import('./UserForkBoilerplateMessage.js');
-      /* eslint-enable @typescript-eslint/no-require-imports */
-      return <UserForkBoilerplateMessage addMargin={addMargin} param={param} />;
-    }
+  // only the user prompt. Independent of FORK_SUBAGENT flag — the fork agent
+  // transcript always needs to render the prompt as a normal user bubble.
+  if (param.text.includes(`<${FORK_BOILERPLATE_TAG}>`)) {
+    /* eslint-disable @typescript-eslint/no-require-imports */
+    const { UserForkBoilerplateMessage } =
+      require('./UserForkBoilerplateMessage.js') as typeof import('./UserForkBoilerplateMessage.js');
+    /* eslint-enable @typescript-eslint/no-require-imports */
+    return (
+      <UserForkBoilerplateMessage
+        addMargin={addMargin}
+        param={param}
+        isTranscriptMode={isTranscriptMode}
+        timestamp={timestamp}
+      />
+    );
   }
 
   // Cross-session UDS message (from another Claude session's SendMessage).

src/components/tasks/BackgroundAgentSelector.tsx

@@ -0,0 +1,63 @@
+import { Box, Text } from '@anthropic/ink';
+import { useBackgroundAgentTasks } from '../../hooks/useBackgroundAgentTasks.js';
+import { useElapsedTime } from '../../hooks/useElapsedTime.js';
+import { useAppState } from '../../state/AppState.js';
+import type { LocalAgentTaskState } from '../../tasks/LocalAgentTask/LocalAgentTask.js';
+import { formatTokens } from '../../utils/format.js';
+
+function AgentRow({ task, selected }: { task: LocalAgentTaskState; selected: boolean }) {
+  const elapsed = useElapsedTime(task.startTime, task.status === 'running');
+  const tokens = task.progress?.tokenCount ?? 0;
+  const isRunning = task.status === 'running';
+  return (
+    <Box flexDirection="row" width="100%" justifyContent="space-between">
+      <Box flexDirection="row" flexShrink={1}>
+        <Text color={isRunning ? 'success' : undefined}>{selected ? '● ' : '○ '}</Text>
+        <Text bold={selected} wrap="truncate-end">
+          {task.agentType} <Text dimColor>{task.description}</Text>
+        </Text>
+      </Box>
+      <Box flexShrink={0}>
+        <Text dimColor>
+          {elapsed} · ↓ {formatTokens(tokens)} tokens
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+function getHint(pillFocused: boolean, viewedTask: LocalAgentTaskState | null): string {
+  if (pillFocused) return '↑/↓ to select · Enter to view';
+  if (!viewedTask) return 'shift+↓ to manage background agents';
+  return viewedTask.status === 'running' ? 'shift+↓ to manage · x to stop' : 'shift+↓ to manage · x to clear';
+}
+
+export function BackgroundAgentSelector(): React.ReactNode {
+  const tasks = useBackgroundAgentTasks();
+  const viewingId = useAppState(s => s.viewingAgentTaskId);
+  const footerSelection = useAppState(s => s.footerSelection);
+  const selectedBgIndex = useAppState(s => s.selectedBgAgentIndex);
+
+  if (tasks.length === 0) return null;
+
+  const pillFocused = footerSelection === 'bg_agent';
+  const highlightedId = pillFocused
+    ? selectedBgIndex === -1
+      ? null
+      : (tasks[selectedBgIndex]?.agentId ?? null)
+    : (viewingId ?? null);
+  const mainHighlighted = pillFocused ? selectedBgIndex === -1 : viewingId === undefined;
+  const viewedTask = viewingId ? (tasks.find(t => t.agentId === viewingId) ?? null) : null;
+
+  return (
+    <Box flexDirection="column" width="100%">
+      <Box flexDirection="row" width="100%" justifyContent="space-between">
+        <Text bold={mainHighlighted}>{mainHighlighted ? '● ' : '○ '}main</Text>
+        <Text dimColor>{getHint(pillFocused, viewedTask)}</Text>
+      </Box>
+      {tasks.map(task => (
+        <AgentRow key={task.agentId} task={task} selected={task.agentId === highlightedId} />
+      ))}
+    </Box>
+  );
+}