feat(cli): add agent composer UI and refactor text input handling

- Extract shared BaseTextInput component with readline keyboard handling
- Add AgentComposer and AgentFooter components for agent interaction
- Add useAgentStreamingState hook for managing agent streaming state
- Refactor InputPrompt to use BaseTextInput with agent tab bar focus support
- Move calculatePromptWidths to shared layoutUtils
- Disable auto-accept indicator on agent tabs (agents handle their own)

This enables a dedicated input experience for agent tabs with proper
focus management and keyboard navigation between main input and agent tabs.

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

packages/cli/src/ui/components/agent-view/AgentComposer.tsx

@@ -0,0 +1,284 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview AgentComposer — footer area for in-process agent tabs.
+ *
+ * Replaces the main Composer when an agent tab is active so that:
+ *  - The loading indicator reflects the agent's status (not the main agent)
+ *  - The input prompt sends messages to the agent (via enqueueMessage)
+ *  - Keyboard events are scoped — no conflict with the main InputPrompt
+ *
+ * Wraps its content in a local StreamingContext.Provider so reusable
+ * components like LoadingIndicator and GeminiRespondingSpinner read the
+ * agent's derived streaming state instead of the main agent's.
+ */
+
+import { Box, Text, useStdin } from 'ink';
+import { useCallback, useEffect, useMemo } from 'react';
+import {
+  AgentStatus,
+  ApprovalMode,
+  APPROVAL_MODES,
+} from '@qwen-code/qwen-code-core';
+import {
+  useAgentViewState,
+  useAgentViewActions,
+} from '../../contexts/AgentViewContext.js';
+import { useConfig } from '../../contexts/ConfigContext.js';
+import { StreamingContext } from '../../contexts/StreamingContext.js';
+import { StreamingState } from '../../types.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+import { useAgentStreamingState } from '../../hooks/useAgentStreamingState.js';
+import { useKeypress, type Key } from '../../hooks/useKeypress.js';
+import { useTextBuffer } from '../shared/text-buffer.js';
+import { calculatePromptWidths } from '../../utils/layoutUtils.js';
+import { BaseTextInput } from '../BaseTextInput.js';
+import { LoadingIndicator } from '../LoadingIndicator.js';
+import { AgentFooter } from './AgentFooter.js';
+import { keyMatchers, Command } from '../../keyMatchers.js';
+import { theme } from '../../semantic-colors.js';
+import { t } from '../../../i18n/index.js';
+
+// ─── Types ──────────────────────────────────────────────────
+
+interface AgentComposerProps {
+  agentId: string;
+}
+
+// ─── Component ──────────────────────────────────────────────
+
+export const AgentComposer: React.FC<AgentComposerProps> = ({ agentId }) => {
+  const { agents, agentTabBarFocused, agentShellFocused, agentApprovalModes } =
+    useAgentViewState();
+  const {
+    setAgentInputBufferText,
+    setAgentTabBarFocused,
+    setAgentApprovalMode,
+  } = useAgentViewActions();
+  const agent = agents.get(agentId);
+  const interactiveAgent = agent?.interactiveAgent;
+
+  const config = useConfig();
+  const { columns: terminalWidth } = useTerminalSize();
+  const { inputWidth } = calculatePromptWidths(terminalWidth);
+  const { stdin, setRawMode } = useStdin();
+
+  const {
+    status,
+    streamingState,
+    isInputActive,
+    elapsedTime,
+    lastPromptTokenCount,
+  } = useAgentStreamingState(interactiveAgent);
+
+  // ── Escape to cancel the active agent round ──
+
+  useKeypress(
+    (key) => {
+      if (
+        key.name === 'escape' &&
+        streamingState === StreamingState.Responding
+      ) {
+        interactiveAgent?.cancelCurrentRound();
+      }
+    },
+    {
+      isActive:
+        streamingState === StreamingState.Responding && !agentShellFocused,
+    },
+  );
+
+  // ── Shift+Tab to cycle this agent's approval mode ──
+
+  const agentApprovalMode =
+    agentApprovalModes.get(agentId) ?? ApprovalMode.DEFAULT;
+
+  useKeypress(
+    (key) => {
+      const isShiftTab = key.shift && key.name === 'tab';
+      const isWindowsTab =
+        process.platform === 'win32' &&
+        key.name === 'tab' &&
+        !key.ctrl &&
+        !key.meta;
+      if (isShiftTab || isWindowsTab) {
+        const currentIndex = APPROVAL_MODES.indexOf(agentApprovalMode);
+        const nextIndex =
+          currentIndex === -1 ? 0 : (currentIndex + 1) % APPROVAL_MODES.length;
+        setAgentApprovalMode(agentId, APPROVAL_MODES[nextIndex]!);
+      }
+    },
+    { isActive: !agentShellFocused },
+  );
+
+  // ── Input buffer (independent from main agent) ──
+
+  const isValidPath = useCallback((): boolean => false, []);
+
+  const buffer = useTextBuffer({
+    initialText: '',
+    viewport: { height: 3, width: inputWidth },
+    stdin,
+    setRawMode,
+    isValidPath,
+  });
+
+  // Sync agent buffer text to context so AgentTabBar can guard tab switching
+  useEffect(() => {
+    setAgentInputBufferText(buffer.text);
+    return () => setAgentInputBufferText('');
+  }, [buffer.text, setAgentInputBufferText]);
+
+  // When agent input is not active (agent running, completed, etc.),
+  // auto-focus the tab bar so arrow keys switch tabs directly.
+  // We also depend on streamingState so that transitions like
+  // WaitingForConfirmation → Responding re-trigger the effect — the
+  // approval keypress releases tab-bar focus (printable char handler),
+  // but isInputActive stays false throughout, so without this extra
+  // dependency the focus would never be restored.
+  useEffect(() => {
+    if (!isInputActive) {
+      setAgentTabBarFocused(true);
+    }
+  }, [isInputActive, streamingState, setAgentTabBarFocused]);
+
+  // ── Focus management between input and tab bar ──
+
+  const handleKeypress = useCallback(
+    (key: Key): boolean => {
+      // When tab bar has focus, block all non-printable keys so they don't
+      // act on the hidden buffer. Printable characters fall through to
+      // BaseTextInput naturally; the tab bar handler releases focus on the
+      // same event so the keystroke appears in the input immediately.
+      if (agentTabBarFocused) {
+        if (
+          key.sequence &&
+          key.sequence.length === 1 &&
+          !key.ctrl &&
+          !key.meta
+        ) {
+          return false; // let BaseTextInput type the character
+        }
+        return true; // consume non-printable keys
+      }
+
+      // Down arrow at the bottom edge (or empty buffer) → focus the tab bar
+      if (keyMatchers[Command.NAVIGATION_DOWN](key)) {
+        if (
+          buffer.text === '' ||
+          buffer.allVisualLines.length === 1 ||
+          buffer.visualCursor[0] === buffer.allVisualLines.length - 1
+        ) {
+          setAgentTabBarFocused(true);
+          return true;
+        }
+      }
+      return false;
+    },
+    [buffer, agentTabBarFocused, setAgentTabBarFocused],
+  );
+
+  const handleSubmit = useCallback(
+    (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed || !interactiveAgent) return;
+      interactiveAgent.enqueueMessage(trimmed);
+    },
+    [interactiveAgent],
+  );
+
+  // ── Render ──
+
+  const statusLabel = useMemo(() => {
+    switch (status) {
+      case AgentStatus.COMPLETED:
+        return { text: t('Completed'), color: theme.status.success };
+      case AgentStatus.FAILED:
+        return {
+          text: t('Failed: {{error}}', {
+            error:
+              interactiveAgent?.getError() ??
+              interactiveAgent?.getLastRoundError() ??
+              'unknown',
+          }),
+          color: theme.status.error,
+        };
+      case AgentStatus.CANCELLED:
+        return { text: t('Cancelled'), color: theme.text.secondary };
+      default:
+        return null;
+    }
+  }, [status, interactiveAgent]);
+
+  // ── Approval-mode styling (mirrors main InputPrompt) ──
+
+  const isYolo = agentApprovalMode === ApprovalMode.YOLO;
+  const isAutoAccept = agentApprovalMode !== ApprovalMode.DEFAULT;
+
+  const statusColor = isYolo
+    ? theme.status.errorDim
+    : isAutoAccept
+      ? theme.status.warningDim
+      : undefined;
+
+  const inputBorderColor =
+    !isInputActive || agentTabBarFocused
+      ? theme.border.default
+      : (statusColor ?? theme.border.focused);
+
+  const prefixNode = (
+    <Text color={statusColor ?? theme.text.accent}>{isYolo ? '*' : '>'} </Text>
+  );
+
+  return (
+    <StreamingContext.Provider value={streamingState}>
+      <Box flexDirection="column" marginTop={1}>
+        {/* Loading indicator — mirrors main Composer but reads agent's
+            streaming state via the overridden StreamingContext. */}
+        <LoadingIndicator
+          currentLoadingPhrase={
+            streamingState === StreamingState.Responding
+              ? t('Agent is working…')
+              : undefined
+          }
+          elapsedTime={elapsedTime}
+        />
+
+        {/* Terminal status for completed/failed agents */}
+        {statusLabel && (
+          <Box marginLeft={2}>
+            <Text color={statusLabel.color}>{statusLabel.text}</Text>
+          </Box>
+        )}
+
+        {/* Input prompt — always visible, like the main Composer */}
+        <BaseTextInput
+          buffer={buffer}
+          onSubmit={handleSubmit}
+          onKeypress={handleKeypress}
+          showCursor={isInputActive && !agentTabBarFocused}
+          placeholder={'  ' + t('Send a message to this agent')}
+          prefix={prefixNode}
+          borderColor={inputBorderColor}
+          isActive={isInputActive && !agentShellFocused}
+        />
+
+        {/* Footer: approval mode + context usage */}
+        {isInputActive && (
+          <AgentFooter
+            approvalMode={agentApprovalMode}
+            promptTokenCount={lastPromptTokenCount}
+            contextWindowSize={
+              config.getContentGeneratorConfig()?.contextWindowSize
+            }
+            terminalWidth={terminalWidth}
+          />
+        )}
+      </Box>
+    </StreamingContext.Provider>
+  );
+};

packages/cli/src/ui/components/agent-view/AgentFooter.tsx

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Lightweight footer for agent tabs showing approval mode
+ * and context usage. Mirrors the main Footer layout but without
+ * main-agent-specific concerns (vim mode, shell mode, exit prompts, etc.).
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+import { ApprovalMode } from '@qwen-code/qwen-code-core';
+import { AutoAcceptIndicator } from '../AutoAcceptIndicator.js';
+import { ContextUsageDisplay } from '../ContextUsageDisplay.js';
+import { theme } from '../../semantic-colors.js';
+
+interface AgentFooterProps {
+  approvalMode: ApprovalMode | undefined;
+  promptTokenCount: number;
+  contextWindowSize: number | undefined;
+  terminalWidth: number;
+}
+
+export const AgentFooter: React.FC<AgentFooterProps> = ({
+  approvalMode,
+  promptTokenCount,
+  contextWindowSize,
+  terminalWidth,
+}) => {
+  const showApproval =
+    approvalMode !== undefined && approvalMode !== ApprovalMode.DEFAULT;
+  const showContext = promptTokenCount > 0 && contextWindowSize !== undefined;
+
+  if (!showApproval && !showContext) {
+    return null;
+  }
+
+  return (
+    <Box
+      justifyContent="space-between"
+      width="100%"
+      flexDirection="row"
+      alignItems="center"
+    >
+      <Box marginLeft={2}>
+        {showApproval ? (
+          <AutoAcceptIndicator approvalMode={approvalMode} />
+        ) : null}
+      </Box>
+      <Box marginRight={2}>
+        {showContext && (
+          <Text color={theme.text.accent}>
+            <ContextUsageDisplay
+              promptTokenCount={promptTokenCount}
+              terminalWidth={terminalWidth}
+              contextWindowSize={contextWindowSize!}
+            />
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+};

packages/cli/src/ui/components/agent-view/AgentTabBar.tsx

@@ -8,7 +8,12 @@
  * @fileoverview AgentTabBar — horizontal tab strip for in-process agent views.
  *
  * Rendered at the top of the terminal whenever in-process agents are registered.
- * Left/Right arrow keys cycle through tabs when the input buffer is empty.
+ *
+ * On the main tab, Left/Right switch tabs when the input buffer is empty.
+ * On agent tabs, the tab bar uses an exclusive-focus model:
+ *   - Down arrow at the input's bottom edge focuses the tab bar
+ *   - Left/Right switch tabs only when the tab bar is focused
+ *   - Up arrow or typing returns focus to the input
  *
  * Tab indicators:  running,  idle/completed,  failed,  cancelled
  */
@@ -36,6 +41,8 @@ function statusIndicator(agent: RegisteredAgent): {
     case AgentStatus.RUNNING:
     case AgentStatus.INITIALIZING:
       return { symbol: '\u25CF', color: theme.status.warning }; // ● running
+    case AgentStatus.IDLE:
+      return { symbol: '\u25CF', color: theme.status.success }; // ● idle (ready)
     case AgentStatus.COMPLETED:
       return { symbol: '\u2713', color: theme.status.success }; // ✓ completed
     case AgentStatus.FAILED:
@@ -50,20 +57,32 @@ function statusIndicator(agent: RegisteredAgent): {
 // ─── Component ──────────────────────────────────────────────
 
 export const AgentTabBar: React.FC = () => {
-  const { activeView, agents, agentShellFocused } = useAgentViewState();
-  const { switchToNext, switchToPrevious } = useAgentViewActions();
-  const { buffer, embeddedShellFocused } = useUIState();
+  const { activeView, agents, agentShellFocused, agentTabBarFocused } =
+    useAgentViewState();
+  const { switchToNext, switchToPrevious, setAgentTabBarFocused } =
+    useAgentViewActions();
+  const { embeddedShellFocused } = useUIState();
 
-  // Left/Right arrow keys switch tabs when the input buffer is empty
-  // and no embedded shell (main or agent tab) has input focus.
   useKeypress(
     (key) => {
-      if (buffer.text !== '' || embeddedShellFocused || agentShellFocused)
-        return;
+      if (embeddedShellFocused || agentShellFocused) return;
+      if (!agentTabBarFocused) return;
+
       if (key.name === 'left') {
         switchToPrevious();
       } else if (key.name === 'right') {
         switchToNext();
+      } else if (key.name === 'up') {
+        setAgentTabBarFocused(false);
+      } else if (
+        key.sequence &&
+        key.sequence.length === 1 &&
+        !key.ctrl &&
+        !key.meta
+      ) {
+        // Printable character → return focus to input (key falls through
+        // to BaseTextInput's useKeypress and gets typed normally)
+        setAgentTabBarFocused(false);
       }
     },
     { isActive: true },
@@ -89,12 +108,18 @@ export const AgentTabBar: React.FC = () => {
     return () => cleanups.forEach((fn) => fn());
   }, [agents, forceRender]);
 
+  const isFocused = agentTabBarFocused;
+
+  // Navigation hint varies by context
+  const hint = isFocused ? '\u2190/\u2192 switch  \u2191 input' : '\u2193 tabs';
+
   return (
     <Box flexDirection="row" paddingX={1}>
       {/* Main tab */}
       <Box marginRight={1}>
         <Text
           bold={activeView === 'main'}
+          dimColor={!isFocused}
           backgroundColor={
             activeView === 'main' ? theme.border.default : undefined
           }
@@ -107,7 +132,9 @@ export const AgentTabBar: React.FC = () => {
       </Box>
 
       {/* Separator */}
-      <Text color={theme.border.default}>{'\u2502'}</Text>
+      <Text dimColor={!isFocused} color={theme.border.default}>
+        {'\u2502'}
+      </Text>
 
       {/* Agent tabs */}
       {[...agents.entries()].map(([agentId, agent]) => {
@@ -118,19 +145,22 @@ export const AgentTabBar: React.FC = () => {
           <Box key={agentId} marginLeft={1}>
             <Text
               bold={isActive}
+              dimColor={!isFocused}
               backgroundColor={isActive ? theme.border.default : undefined}
               color={isActive ? undefined : agent.color || theme.text.secondary}
             >
               {` ${agent.displayName} `}
             </Text>
-            <Text color={indicatorColor}>{` ${symbol}`}</Text>
+            <Text dimColor={!isFocused} color={indicatorColor}>
+              {` ${symbol}`}
+            </Text>
           </Box>
         );
       })}
 
       {/* Navigation hint */}
       <Box marginLeft={2}>
-        <Text color={theme.text.secondary}>←/→</Text>
+        <Text color={theme.text.secondary}>{hint}</Text>
       </Box>
     </Box>
   );

packages/cli/src/ui/components/agent-view/index.ts

@@ -6,4 +6,6 @@
 
 export { AgentTabBar } from './AgentTabBar.js';
 export { AgentChatView } from './AgentChatView.js';
+export { AgentComposer } from './AgentComposer.js';
+export { AgentFooter } from './AgentFooter.js';
 export { agentMessagesToHistoryItems } from './agentHistoryAdapter.js';