@robota-sdk/agent-ui-terminal 3.0.0-beta.81

package/src/SlashAutocomplete.tsx

@@ -0,0 +1,154 @@
+import { Box, useStdout } from 'ink';
+import React, { useState, useEffect } from 'react';
+
+import {
+  KeyHintFooter,
+  SELECTION_INDICATOR,
+  SELECTION_INDICATOR_NONE,
+  type IKeyHint,
+} from './key-hint-footer.js';
+import { useKeybindingHints } from './keybindings/keybindings-context.js';
+import { numberedRowPrefix } from './numbered-list.js';
+import { Text } from './SafeText.js';
+import { useScreenReader } from './screen-reader-context.js';
+import { usePalette } from './theme/index.js';
+
+import type { ICommand } from '@robota-sdk/agent-interface-command';
+
+/** Footer for the autocomplete popup. */
+export const SLASH_AUTOCOMPLETE_FOOTER_HINTS: readonly IKeyHint[] = [
+  { keys: '↑↓', label: 'Navigate' },
+  { keys: 'Tab', label: 'Complete' },
+  { keys: 'Enter', label: 'Select' },
+  { keys: 'Esc', label: 'Close' },
+];
+
+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 = (): number => Math.max(MIN_ROW_WIDTH, (stdout.columns ?? 80) - OUTER_CHROME);
+  const [width, setWidth] = useState(measure);
+
+  useEffect(() => {
+    const onResize = (): void => 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;
+  /** CLI-2004: row number in the mode, replacing the `> ` cursor. */
+  rowNumber?: number;
+}): React.ReactElement {
+  const palette = usePalette();
+  const { cmd, isSelected, showSlash, rowWidth, nameColWidth, rowNumber } = props;
+  const indicator =
+    rowNumber !== undefined
+      ? numberedRowPrefix(rowNumber)
+      : isSelected
+        ? SELECTION_INDICATOR
+        : SELECTION_INDICATOR_NONE;
+  const nameColor = isSelected ? palette.text.accent : undefined;
+  const dimmed = !isSelected;
+  const namePart = capName(cmd.name, 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 palette = usePalette();
+  const rowWidth = useRowWidth();
+  const screenReader = useScreenReader();
+  const footerHints = useKeybindingHints('autocomplete-menu', [
+    [['previous', 'next'], 'Navigate'],
+    ['accept', 'Complete'],
+    ['execute', 'Select'],
+    ['close', 'Close'],
+  ]);
+
+  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.name.length)),
+  );
+
+  return (
+    <Box
+      flexDirection="column"
+      {...(screenReader
+        ? {}
+        : { borderStyle: 'round' as const, borderColor: palette.border.muted })}
+      paddingX={1}
+    >
+      {visibleCommands.map((cmd, i) => (
+        <CommandRow
+          key={cmd.name}
+          cmd={cmd}
+          isSelected={scrollOffset + i === selectedIndex}
+          showSlash={!isSubcommandMode}
+          rowWidth={rowWidth}
+          nameColWidth={nameColWidth}
+          {...(screenReader ? { rowNumber: scrollOffset + i } : {})}
+        />
+      ))}
+      <KeyHintFooter hints={footerHints} />
+    </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/StatusBar.tsx

@@ -0,0 +1,284 @@
+import { formatTokenCount } from '@robota-sdk/agent-core';
+import { Box } from 'ink';
+import React from 'react';
+
+import { Text } from './SafeText.js';
+import { useScreenReader } from './screen-reader-context.js';
+import { formatStatusActivity } from './status-activity.js';
+import { usePalette } from './theme/index.js';
+
+import type { IThemeColors } from './theme/index.js';
+import type { TModelEffortSelection, TPermissionMode } from '@robota-sdk/agent-core';
+
+/** Threshold boundaries for context percentage color coding */
+const CONTEXT_YELLOW_THRESHOLD = 70;
+const CONTEXT_RED_THRESHOLD = 90;
+
+/** Segment separator between status-bar fields (SCREEN-006: single SSOT, was repeated inline 6x). */
+const SEP = '  |  ';
+
+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;
+  activePresetId?: string;
+  effort?: TModelEffortSelection;
+}
+
+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;
+  activePresetId?: string;
+  effort?: TModelEffortSelection;
+}
+
+/** Return the color for the context percentage indicator */
+function getContextColor(percentage: number, palette: IThemeColors): string {
+  if (percentage >= CONTEXT_RED_THRESHOLD) return palette.text.error;
+  if (percentage >= CONTEXT_YELLOW_THRESHOLD) return palette.text.warning;
+  return palette.text.success;
+}
+
+function StatusActivityText({
+  isThinking,
+  activeToolCount,
+  activeBackgroundTaskCount,
+  hasPendingPrompt,
+}: Pick<
+  IStatusLeftProps,
+  'isThinking' | 'activeToolCount' | 'activeBackgroundTaskCount' | 'hasPendingPrompt'
+>): React.ReactElement {
+  const palette = usePalette();
+  const activity = formatStatusActivity({
+    isThinking,
+    activeToolCount,
+    activeBackgroundTaskCount,
+    hasPendingPrompt,
+  });
+
+  return (
+    <Text color={palette.text[activity.tone]} bold={activity.kind !== 'idle'}>
+      {activity.text}
+    </Text>
+  );
+}
+
+function ContextText({
+  percentage,
+  usedTokens,
+  maxTokens,
+}: {
+  percentage: number;
+  usedTokens: number;
+  maxTokens: number;
+}): React.ReactElement {
+  const palette = usePalette();
+  return (
+    <Text color={getContextColor(percentage, palette)}>
+      Context: {Math.round(percentage)}% ({formatTokenCount(usedTokens)}/
+      {formatTokenCount(maxTokens)} tokens)
+    </Text>
+  );
+}
+
+function ModeText({ permissionMode }: { permissionMode: TPermissionMode }): React.ReactElement {
+  const palette = usePalette();
+  return (
+    <>
+      <Text color={palette.text.accent} bold>
+        Mode:
+      </Text>{' '}
+      <Text>{permissionMode}</Text>
+    </>
+  );
+}
+
+/**
+ * CLI-2004 verdict (l): outside the mode the `default` mode is hidden as noise. In the mode it is
+ * ALWAYS rendered — with no key-based cycling to announce, the status line is the only place a
+ * reader can find which permission mode it is in, and a hidden `default` leaves nothing to find.
+ */
+function shouldShowPermissionMode(permissionMode: TPermissionMode, screenReader: boolean): boolean {
+  return screenReader || permissionMode !== 'default';
+}
+
+function PresetText({ activePresetId }: { activePresetId: string }): React.ReactElement {
+  const palette = usePalette();
+  return (
+    <>
+      <Text color={palette.text.accent} bold>
+        Preset:
+      </Text>{' '}
+      <Text>{activePresetId}</Text>
+    </>
+  );
+}
+
+function shouldShowActivePreset(activePresetId: string | undefined): activePresetId is string {
+  return activePresetId !== undefined && activePresetId !== 'default';
+}
+
+function ProviderText({
+  modelName,
+  providerDisplayName,
+  effort,
+}: {
+  modelName: string;
+  providerDisplayName?: string | undefined;
+  effort?: TModelEffortSelection;
+}): React.ReactElement {
+  const provider =
+    providerDisplayName !== undefined ? `${providerDisplayName} ${modelName}` : modelName;
+  if (providerDisplayName !== undefined) {
+    return (
+      <Text dimColor>
+        {provider}
+        {effort !== undefined ? ` Effort: ${effort}` : ''}
+      </Text>
+    );
+  }
+  return (
+    <Text dimColor>
+      {provider}
+      {effort !== undefined ? ` Effort: ${effort}` : ''}
+    </Text>
+  );
+}
+
+function StatusLeft(props: IStatusLeftProps): React.ReactElement {
+  const palette = usePalette();
+  const shouldShowGitBranch =
+    props.showGitBranch && props.gitBranch !== undefined && props.gitBranch.length > 0;
+  // CLI-2004 § Solution 13: one rule applied to fields of different VOLATILITY. The activity text
+  // and the context percentage re-render on their own cadence and on every token, so a reader
+  // reviewing the status line would re-announce them continuously while the operator types — they
+  // are suppressed. The permission mode, the preset and the model change only when the operator
+  // changes them: those are anchors, and they stay.
+  const screenReader = useScreenReader();
+  const showPermissionMode = shouldShowPermissionMode(props.permissionMode, screenReader);
+  const activePresetId = props.activePresetId;
+  const showActivePreset = shouldShowActivePreset(activePresetId);
+  return (
+    <Text>
+      {!screenReader && (
+        <StatusActivityText
+          isThinking={props.isThinking}
+          activeToolCount={props.activeToolCount}
+          activeBackgroundTaskCount={props.activeBackgroundTaskCount}
+          hasPendingPrompt={props.hasPendingPrompt}
+        />
+      )}
+      {showPermissionMode && (
+        <>
+          {SEP}
+          <ModeText permissionMode={props.permissionMode} />
+        </>
+      )}
+      {showActivePreset && (
+        <>
+          {SEP}
+          <PresetText activePresetId={activePresetId} />
+        </>
+      )}
+      {props.sessionName && (
+        <>
+          {SEP}
+          <Text color={palette.text.session}>{props.sessionName}</Text>
+        </>
+      )}
+      {shouldShowGitBranch && (
+        <>
+          {SEP}
+          <Text dimColor>git: {props.gitBranch}</Text>
+        </>
+      )}
+      {SEP}
+      <ProviderText
+        modelName={props.modelName}
+        providerDisplayName={props.providerDisplayName}
+        effort={props.effort}
+      />
+      {!screenReader && (
+        <>
+          {SEP}
+          <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,
+  activePresetId,
+  effort,
+}: IProps): React.ReactElement {
+  const palette = usePalette();
+  return (
+    <Box 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}
+        activePresetId={activePresetId}
+        effort={effort}
+      />
+      {activeAgentLabel !== undefined && (
+        <Text color={palette.text.warning} bold>
+          [{activeAgentLabel}]
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/StreamingIndicator.tsx

@@ -0,0 +1,145 @@
+/**
+ * Streaming indicator — shows real-time tool execution and AI response text.
+ * Displayed during session.run() execution.
+ */
+
+import { Box } from 'ink';
+import React from 'react';
+
+import { useRenderMarkdown } from './hooks/useRenderMarkdown.js';
+import { humanizeToolArgument, humanizeToolName } from './humanize-tool-name.js';
+import { RenderedText, Text } from './SafeText.js';
+import {
+  useModelCommandToolPrefix,
+  useProductDisplayName,
+} from './product-display-name-context.js';
+import { useScreenReader } from './screen-reader-context.js';
+import { SCREEN_READER_LABELS } from './screen-reader-labels.js';
+import { STATUS_SYMBOL, statusGlyphColor, toolStateStatusKind } from './status-glyph.js';
+import { usePalette } from './theme/index.js';
+import ToolDiffBlock from './ToolDiffBlock.js';
+
+import type { IThemeColors } from './theme/index.js';
+import type { IToolState } from '@robota-sdk/agent-interface-session';
+
+function getToolStyle(
+  t: IToolState,
+  palette: IThemeColors,
+): {
+  color: string;
+  icon: string;
+  strikethrough: boolean;
+} {
+  const kind = toolStateStatusKind(t);
+  return {
+    color: statusGlyphColor(palette, kind),
+    icon: STATUS_SYMBOL[kind],
+    strikethrough: kind === 'error' || kind === 'denied',
+  };
+}
+
+interface IProps {
+  text: string;
+  activeTools: readonly IToolState[];
+  isThinking?: boolean;
+}
+
+function ThinkingFallback({ isThinking }: { isThinking: boolean }): React.ReactElement {
+  const palette = usePalette();
+  if (!isThinking) return <></>;
+  return (
+    <Box marginBottom={1}>
+      <Text color={palette.text.warning}>Thinking...</Text>
+    </Box>
+  );
+}
+
+function ActiveTools({ activeTools }: { activeTools: readonly IToolState[] }): React.ReactElement {
+  const palette = usePalette();
+  const modelCommandToolPrefix = useModelCommandToolPrefix();
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text color={palette.text.emphasis} bold>
+        Tools:
+      </Text>
+      <Text> </Text>
+      {activeTools.map((t, i) => {
+        const { color, icon, strikethrough } = getToolStyle(t, palette);
+        return (
+          <Box key={`${t.toolName}-${i}`} flexDirection="column">
+            <Text color={color} strikethrough={strikethrough}>
+              {'  '}
+              {icon} {humanizeToolName(t.toolName, modelCommandToolPrefix)}({humanizeToolArgument(t.firstArg)})
+            </Text>
+            {t.diffLines && t.diffLines.length > 0 && (
+              <ToolDiffBlock file={t.diffFile} lines={t.diffLines} />
+            )}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/**
+ * CLI-2004: the whole progress indicator collapses to ONE static line. A spinner is a repaint per
+ * frame, and a repaint is an announcement — the reader would hear the same line forever. The line
+ * still carries what changed (which tools are running, how far the reply has got), just once per
+ * actual change instead of once per frame.
+ */
+function renderScreenReaderStatus(
+  text: string,
+  activeTools: readonly IToolState[],
+  isThinking: boolean,
+  modelCommandToolPrefix?: string,
+): React.ReactElement {
+  const running = activeTools
+    .map((tool) => humanizeToolName(tool.toolName, modelCommandToolPrefix))
+    .join(', ');
+  const parts = [
+    running.length > 0 ? `${SCREEN_READER_LABELS.tool} ${running}` : undefined,
+    text.length > 0 ? text : isThinking ? SCREEN_READER_LABELS.thinking : undefined,
+  ].filter((part): part is string => part !== undefined);
+  if (parts.length === 0) return <></>;
+  return <Text>{parts.join(' — ')}</Text>;
+}
+
+export default function StreamingIndicator({
+  text,
+  activeTools,
+  isThinking = false,
+}: IProps): React.ReactElement {
+  const palette = usePalette();
+  const renderMarkdown = useRenderMarkdown();
+  const hasTools = activeTools.length > 0;
+  const hasText = text.length > 0;
+  const screenReader = useScreenReader();
+  const productDisplayName = useProductDisplayName();
+  const modelCommandToolPrefix = useModelCommandToolPrefix();
+
+  if (screenReader) {
+    return renderScreenReaderStatus(text, activeTools, isThinking, modelCommandToolPrefix);
+  }
+
+  if (!hasTools && !hasText) {
+    return <ThinkingFallback isThinking={isThinking} />;
+  }
+
+  return (
+    <Box flexDirection="column">
+      {hasTools && <ActiveTools activeTools={activeTools} />}
+      {hasText && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Text color={palette.text.accent} bold>
+            {productDisplayName}:
+          </Text>
+          <Text> </Text>
+          <Box marginLeft={2}>
+            {/* `renderMarkdown` sanitizes its input and then styles it; the SGR in its output is ours. */}
+            <RenderedText wrap="wrap">{renderMarkdown(text)}</RenderedText>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}