@robota-sdk/agent-transport 3.0.0-beta.64

package/src/tui/SessionStatusBar.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import type { TPermissionMode } from '@robota-sdk/agent-core';
+import type { IStatusLineCommandSettings } from '@robota-sdk/agent-framework';
+import { useTuiCliAdapter } from './tui-cli-adapter-context.js';
+import StatusBar from './StatusBar.js';
+
+interface IProps {
+  cwd: string;
+  permissionMode: TPermissionMode;
+  modelId?: string;
+  providerType?: string | undefined;
+  sessionId: string;
+  isThinking: boolean;
+  activeToolCount: number;
+  activeBackgroundTaskCount: number;
+  hasPendingPrompt: boolean;
+  contextState: { percentage: number; usedTokens: number; maxTokens: number };
+  sessionName?: string;
+  settings: IStatusLineCommandSettings;
+  activeAgentLabel?: string;
+}
+
+export default function SessionStatusBar({
+  cwd,
+  permissionMode,
+  modelId,
+  providerType,
+  sessionId,
+  isThinking,
+  activeToolCount,
+  activeBackgroundTaskCount,
+  hasPendingPrompt,
+  contextState,
+  sessionName,
+  settings,
+  activeAgentLabel,
+}: IProps): React.ReactElement | null {
+  const cliAdapter = useTuiCliAdapter();
+  const gitBranch = useMemo(() => cliAdapter.getGitBranch(cwd), [cliAdapter, cwd]);
+  const providerDisplayName = useMemo(
+    () =>
+      providerType !== undefined ? cliAdapter.getProviderDisplayName(providerType) : undefined,
+    [cliAdapter, providerType],
+  );
+  if (!settings.enabled) return null;
+
+  return (
+    <StatusBar
+      permissionMode={permissionMode}
+      modelName={modelId ?? ''}
+      providerDisplayName={providerDisplayName}
+      sessionId={sessionId}
+      isThinking={isThinking}
+      activeToolCount={activeToolCount}
+      activeBackgroundTaskCount={activeBackgroundTaskCount}
+      hasPendingPrompt={hasPendingPrompt}
+      contextPercentage={contextState.percentage}
+      contextUsedTokens={contextState.usedTokens}
+      contextMaxTokens={contextState.maxTokens}
+      sessionName={sessionName}
+      gitBranch={gitBranch}
+      showGitBranch={settings.gitBranch}
+      activeAgentLabel={activeAgentLabel}
+    />
+  );
+}

package/src/tui/SlashAutocomplete.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import type { ICommand } from '@robota-sdk/agent-framework';
+
+interface IProps {
+  /** Filtered list of commands to display */
+  commands: ICommand[];
+  /** Currently highlighted item index */
+  selectedIndex: number;
+  /** Whether to show the popup */
+  visible: boolean;
+  /** Whether showing subcommands (no slash prefix) */
+  isSubcommandMode?: boolean;
+}
+
+const MAX_VISIBLE = 8;
+// border(1×2) + paddingX(1×2) consumed by outer box
+const OUTER_CHROME = 4;
+const MIN_ROW_WIDTH = 40;
+const NAME_COL_MAX = 20;
+
+function useRowWidth(): number {
+  const { stdout } = useStdout();
+  const measure = () => Math.max(MIN_ROW_WIDTH, (stdout.columns ?? 80) - OUTER_CHROME);
+  const [width, setWidth] = useState(measure);
+
+  useEffect(() => {
+    const onResize = () => setWidth(measure());
+    stdout.on('resize', onResize);
+    return () => {
+      stdout.off('resize', onResize);
+    };
+  }, [stdout]);
+
+  return width;
+}
+
+function capName(name: string, colWidth: number): string {
+  return name.length > colWidth ? `${name.slice(0, colWidth - 1)}…` : name.padEnd(colWidth);
+}
+
+/** Render a single command row */
+function CommandRow(props: {
+  cmd: ICommand;
+  isSelected: boolean;
+  showSlash: boolean;
+  rowWidth: number;
+  nameColWidth: number;
+}): React.ReactElement {
+  const { cmd, isSelected, showSlash, rowWidth, nameColWidth } = props;
+  const indicator = isSelected ? '▸ ' : '  ';
+  const nameColor = isSelected ? 'cyan' : undefined;
+  const dimmed = !isSelected;
+  const displayLabel = cmd.displayName ?? cmd.name;
+  const namePart = capName(displayLabel, nameColWidth);
+  const text = showSlash
+    ? `${indicator}/${namePart}  ${cmd.description ?? ''}`
+    : `${indicator}${namePart}  ${cmd.description ?? ''}`;
+
+  return (
+    <Box width={rowWidth}>
+      <Text color={nameColor} dimColor={dimmed} wrap="truncate-end">
+        {text}
+      </Text>
+    </Box>
+  );
+}
+
+/** Autocomplete popup showing matching slash commands */
+export default function SlashAutocomplete({
+  commands,
+  selectedIndex,
+  visible,
+  isSubcommandMode,
+}: IProps): React.ReactElement | null {
+  const rowWidth = useRowWidth();
+
+  if (!visible || commands.length === 0) return null;
+
+  const scrollOffset = computeScrollOffset(selectedIndex, commands.length);
+  const visibleCommands = commands.slice(scrollOffset, scrollOffset + MAX_VISIBLE);
+
+  const nameColWidth = Math.min(
+    NAME_COL_MAX,
+    Math.max(...visibleCommands.map((c) => (c.displayName ?? c.name).length)),
+  );
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
+      {visibleCommands.map((cmd, i) => (
+        <CommandRow
+          key={cmd.name}
+          cmd={cmd}
+          isSelected={scrollOffset + i === selectedIndex}
+          showSlash={!isSubcommandMode}
+          rowWidth={rowWidth}
+          nameColWidth={nameColWidth}
+        />
+      ))}
+    </Box>
+  );
+}
+
+/** Compute scroll offset to keep selectedIndex visible */
+function computeScrollOffset(selectedIndex: number, total: number): number {
+  if (total <= MAX_VISIBLE) return 0;
+  if (selectedIndex < MAX_VISIBLE) return 0;
+  const maxOffset = total - MAX_VISIBLE;
+  return Math.min(selectedIndex - MAX_VISIBLE + 1, maxOffset);
+}

package/src/tui/StatusBar.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { TPermissionMode } from '@robota-sdk/agent-core';
+import { formatTokenCount } from '@robota-sdk/agent-core';
+import { formatStatusActivity } from './status-activity.js';
+
+/** Threshold boundaries for context percentage color coding */
+const CONTEXT_YELLOW_THRESHOLD = 70;
+const CONTEXT_RED_THRESHOLD = 90;
+
+interface IProps {
+  permissionMode: TPermissionMode;
+  modelName: string;
+  providerDisplayName?: string | undefined;
+  sessionId: string;
+  isThinking: boolean;
+  activeToolCount?: number;
+  activeBackgroundTaskCount?: number;
+  hasPendingPrompt?: boolean;
+  contextPercentage: number;
+  contextUsedTokens: number;
+  contextMaxTokens: number;
+  sessionName?: string;
+  gitBranch?: string;
+  showGitBranch?: boolean;
+  activeAgentLabel?: string;
+}
+
+interface IStatusLeftProps {
+  permissionMode: TPermissionMode;
+  modelName: string;
+  providerDisplayName?: string | undefined;
+  isThinking: boolean;
+  activeToolCount: number;
+  activeBackgroundTaskCount: number;
+  hasPendingPrompt: boolean;
+  contextPercentage: number;
+  contextUsedTokens: number;
+  contextMaxTokens: number;
+  sessionName?: string;
+  gitBranch?: string;
+  showGitBranch: boolean;
+}
+
+/** Return the color for the context percentage indicator */
+function getContextColor(percentage: number): string {
+  if (percentage >= CONTEXT_RED_THRESHOLD) return 'red';
+  if (percentage >= CONTEXT_YELLOW_THRESHOLD) return 'yellow';
+  return 'green';
+}
+
+function StatusActivityText({
+  isThinking,
+  activeToolCount,
+  activeBackgroundTaskCount,
+  hasPendingPrompt,
+}: Pick<
+  IStatusLeftProps,
+  'isThinking' | 'activeToolCount' | 'activeBackgroundTaskCount' | 'hasPendingPrompt'
+>): React.ReactElement {
+  const activity = formatStatusActivity({
+    isThinking,
+    activeToolCount,
+    activeBackgroundTaskCount,
+    hasPendingPrompt,
+  });
+
+  return (
+    <Text color={activity.color} bold={activity.kind !== 'idle'}>
+      {activity.text}
+    </Text>
+  );
+}
+
+function ContextText({
+  percentage,
+  usedTokens,
+  maxTokens,
+}: {
+  percentage: number;
+  usedTokens: number;
+  maxTokens: number;
+}): React.ReactElement {
+  return (
+    <Text color={getContextColor(percentage)}>
+      Context: {Math.round(percentage)}% ({formatTokenCount(usedTokens)}/
+      {formatTokenCount(maxTokens)})
+    </Text>
+  );
+}
+
+function ModeText({ permissionMode }: { permissionMode: TPermissionMode }): React.ReactElement {
+  return (
+    <>
+      <Text color="cyan" bold>
+        Mode:
+      </Text>{' '}
+      <Text>{permissionMode}</Text>
+    </>
+  );
+}
+
+function shouldShowPermissionMode(permissionMode: TPermissionMode): boolean {
+  return permissionMode !== 'default';
+}
+
+function ProviderText({
+  modelName,
+  providerDisplayName,
+}: {
+  modelName: string;
+  providerDisplayName?: string | undefined;
+}): React.ReactElement {
+  if (providerDisplayName !== undefined) {
+    return (
+      <Text dimColor>
+        {providerDisplayName} {modelName}
+      </Text>
+    );
+  }
+  return <Text dimColor>{modelName}</Text>;
+}
+
+function StatusLeft(props: IStatusLeftProps): React.ReactElement {
+  const shouldShowGitBranch =
+    props.showGitBranch && props.gitBranch !== undefined && props.gitBranch.length > 0;
+  const showPermissionMode = shouldShowPermissionMode(props.permissionMode);
+  return (
+    <Text>
+      <StatusActivityText
+        isThinking={props.isThinking}
+        activeToolCount={props.activeToolCount}
+        activeBackgroundTaskCount={props.activeBackgroundTaskCount}
+        hasPendingPrompt={props.hasPendingPrompt}
+      />
+      {showPermissionMode && (
+        <>
+          {'  |  '}
+          <ModeText permissionMode={props.permissionMode} />
+        </>
+      )}
+      {props.sessionName && (
+        <>
+          {'  |  '}
+          <Text color="magenta">{props.sessionName}</Text>
+        </>
+      )}
+      {shouldShowGitBranch && (
+        <>
+          {'  |  '}
+          <Text dimColor>git: {props.gitBranch}</Text>
+        </>
+      )}
+      {'  |  '}
+      <ProviderText modelName={props.modelName} providerDisplayName={props.providerDisplayName} />
+      {'  |  '}
+      <ContextText
+        percentage={props.contextPercentage}
+        usedTokens={props.contextUsedTokens}
+        maxTokens={props.contextMaxTokens}
+      />
+    </Text>
+  );
+}
+
+export default function StatusBar({
+  permissionMode,
+  modelName,
+  providerDisplayName,
+  sessionId: _sessionId,
+  isThinking,
+  activeToolCount = 0,
+  activeBackgroundTaskCount = 0,
+  hasPendingPrompt = false,
+  contextPercentage,
+  contextUsedTokens,
+  contextMaxTokens,
+  sessionName,
+  gitBranch,
+  showGitBranch = true,
+  activeAgentLabel,
+}: IProps): React.ReactElement {
+  return (
+    <Box
+      borderStyle="single"
+      borderColor="gray"
+      paddingLeft={1}
+      paddingRight={1}
+      justifyContent="space-between"
+    >
+      <StatusLeft
+        permissionMode={permissionMode}
+        modelName={modelName}
+        providerDisplayName={providerDisplayName}
+        isThinking={isThinking}
+        activeToolCount={activeToolCount}
+        activeBackgroundTaskCount={activeBackgroundTaskCount}
+        hasPendingPrompt={hasPendingPrompt}
+        contextPercentage={contextPercentage}
+        contextUsedTokens={contextUsedTokens}
+        contextMaxTokens={contextMaxTokens}
+        sessionName={sessionName}
+        gitBranch={gitBranch}
+        showGitBranch={showGitBranch}
+      />
+      {activeAgentLabel !== undefined && (
+        <Text color="yellow" bold>
+          [{activeAgentLabel}]
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/tui/StreamingIndicator.tsx

@@ -0,0 +1,91 @@
+/**
+ * Streaming indicator — shows real-time tool execution and AI response text.
+ * Displayed during session.run() execution.
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { IToolState } from '@robota-sdk/agent-framework';
+import { renderMarkdown } from './render-markdown.js';
+import ToolDiffBlock from './ToolDiffBlock.js';
+
+function getToolStyle(t: IToolState): {
+  color: string;
+  icon: string;
+  strikethrough: boolean;
+} {
+  if (t.isRunning) return { color: 'yellow', icon: '⟳', strikethrough: false };
+  if (t.result === 'error') return { color: 'red', icon: '✗', strikethrough: true };
+  if (t.result === 'denied') return { color: 'yellowBright', icon: '⊘', strikethrough: true };
+  return { color: 'green', icon: '✓', strikethrough: false };
+}
+
+interface IProps {
+  text: string;
+  activeTools: IToolState[];
+  isThinking?: boolean;
+}
+
+function renderThinkingFallback(isThinking: boolean): React.ReactElement {
+  if (!isThinking) return <></>;
+  return (
+    <Box marginBottom={1}>
+      <Text color="yellow">Thinking...</Text>
+    </Box>
+  );
+}
+
+function renderTools(activeTools: IToolState[]): React.ReactElement {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text color="white" bold>
+        Tools:
+      </Text>
+      <Text> </Text>
+      {activeTools.map((t, i) => {
+        const { color, icon, strikethrough } = getToolStyle(t);
+        return (
+          <Box key={`${t.toolName}-${i}`} flexDirection="column">
+            <Text color={color} strikethrough={strikethrough}>
+              {'  '}
+              {icon} {t.toolName}({t.firstArg})
+            </Text>
+            {t.diffLines && t.diffLines.length > 0 && (
+              <ToolDiffBlock file={t.diffFile} lines={t.diffLines} />
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+export default function StreamingIndicator({
+  text,
+  activeTools,
+  isThinking = false,
+}: IProps): React.ReactElement {
+  const hasTools = activeTools.length > 0;
+  const hasText = text.length > 0;
+
+  if (!hasTools && !hasText) {
+    return renderThinkingFallback(isThinking);
+  }
+
+  return (
+    <Box flexDirection="column">
+      {hasTools && renderTools(activeTools)}
+      {hasText && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color="cyan" bold>
+            Robota:
+          </Text>
+          <Text> </Text>
+          <Box marginLeft={2}>
+            <Text wrap="wrap">{renderMarkdown(text)}</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/TextPrompt.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import {
+  applyTextPromptInput,
+  createTextPromptFlowState,
+  getTextPromptInputAction,
+  type ITextPromptFlowState,
+  type TTextPromptInputAction,
+} from './flows/text-prompt-flow.js';
+
+interface IProps {
+  title: string;
+  description?: string;
+  placeholder?: string;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+  validate?: (value: string) => string | undefined;
+  allowEmpty?: boolean;
+  masked?: boolean;
+}
+
+export default function TextPrompt({
+  title,
+  description,
+  placeholder,
+  onSubmit,
+  onCancel,
+  validate,
+  allowEmpty = false,
+  masked = false,
+}: IProps): React.ReactElement {
+  const [state, setState] = useState<ITextPromptFlowState>(() => createTextPromptFlowState());
+  const stateRef = useRef(state);
+  const applyAction = useCallback(
+    (action: TTextPromptInputAction): void => {
+      const result = applyTextPromptInput(stateRef.current, action, { allowEmpty, validate });
+      stateRef.current = result.state;
+      setState(result.state);
+      if (result.effect.type === 'cancel') {
+        onCancel();
+      } else if (result.effect.type === 'submit') {
+        onSubmit(result.effect.value);
+      }
+    },
+    [allowEmpty, validate, onCancel, onSubmit],
+  );
+
+  useInput((input, key) => {
+    const action = getTextPromptInputAction(input, key);
+    if (action !== undefined) applyAction(action);
+  });
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
+      <Text color="yellow" bold>
+        {title}
+      </Text>
+      <PromptDescription description={description} />
+      <Box marginTop={1}>
+        <Text color="cyan">&gt; </Text>
+        {state.value ? (
+          <Text>{masked ? '*'.repeat(state.value.length) : state.value}</Text>
+        ) : placeholder ? (
+          <Text dimColor>{placeholder}</Text>
+        ) : null}
+        <Text color="cyan">█</Text>
+      </Box>
+      {state.error && <Text color="red">{state.error}</Text>}
+      <Text dimColor> Enter Submit Esc Cancel</Text>
+    </Box>
+  );
+}
+
+function PromptDescription({ description }: { description?: string }): React.ReactElement | null {
+  if (description === undefined || description.length === 0) {
+    return null;
+  }
+
+  return <Text dimColor>{description}</Text>;
+}

package/src/tui/ToolCommandOutput.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { ICommandOutputInput } from './command-output-summary.js';
+import { formatCommandOutputSummary } from './command-output-summary.js';
+
+interface IProps {
+  tool: ICommandOutputInput;
+}
+
+export default function ToolCommandOutput({ tool }: IProps): React.ReactElement | null {
+  const summary = formatCommandOutputSummary(tool);
+  if (!summary) return null;
+  if (
+    summary.statusLabel === 'ok' &&
+    summary.previewLines.length === 0 &&
+    !summary.transcriptHint
+  ) {
+    return null;
+  }
+  const color = summary.status === 'error' ? 'red' : 'white';
+
+  return (
+    <Box flexDirection="column" marginLeft={4}>
+      {summary.statusLabel !== 'ok' && (
+        <Text color={color} dimColor>
+          {summary.statusLabel}
+        </Text>
+      )}
+      {summary.previewLines.map((line, index) => (
+        <Text key={`${line}-${index}`} color={color} dimColor>
+          {line}
+        </Text>
+      ))}
+      {summary.transcriptHint && <Text dimColor>{summary.transcriptHint}</Text>}
+    </Box>
+  );
+}

package/src/tui/ToolDiffBlock.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { buildToolDiffSummary } from './utils/tool-diff-summary.js';
+import { renderMarkdown } from './render-markdown.js';
+import type { IDiffLine } from './utils/edit-diff.js';
+
+interface IProps {
+  file?: string;
+  lines: readonly IDiffLine[];
+}
+
+export default function ToolDiffBlock({ file, lines }: IProps): React.ReactElement {
+  const summary = buildToolDiffSummary({ file, lines });
+
+  return (
+    <Box flexDirection="column" marginLeft={4}>
+      {summary.file && (
+        <Text color="white" dimColor>
+          │ {summary.file}
+        </Text>
+      )}
+      <Text>{renderMarkdown(summary.markdown)}</Text>
+      {summary.truncated && (
+        <Text color="white" dimColor>
+          │ ... and {summary.remainingLineCount} more lines
+        </Text>
+      )}
+    </Box>
+  );
+}