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

package/src/tui/MessageList.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { IHistoryEntry, TUniversalMessage, TUniversalValue } from '@robota-sdk/agent-core';
+import { isToolMessage, isAssistantMessage } from '@robota-sdk/agent-core';
+import { renderMarkdown } from './render-markdown.js';
+import type { IToolCallSummary } from './utils/tool-call-extractor.js';
+import ToolDiffBlock from './ToolDiffBlock.js';
+import UsageSummaryEntry from './UsageSummaryEntry.js';
+import { formatCommandOutputSummary } from './command-output-summary.js';
+import ToolCommandOutput from './ToolCommandOutput.js';
+
+interface IProps {
+  history: IHistoryEntry[];
+}
+
+type TToolSummaryItem = {
+  toolName: string;
+  firstArg?: string;
+  isRunning?: boolean;
+  result?: string;
+  diffLines?: IToolCallSummary['diffLines'];
+  diffFile?: string;
+  toolResultData?: string;
+};
+
+function getToolSummaryStatus(tool: TToolSummaryItem): string {
+  if (formatCommandOutputSummary(tool)?.status === 'error') return '✗';
+  if (tool.isRunning) return '⟳';
+  if (tool.result === 'error') return '✗';
+  if (tool.result === 'denied') return '⊘';
+  return '✓';
+}
+
+function getToolSummaryColor(tool: TToolSummaryItem): string {
+  if (formatCommandOutputSummary(tool)?.status === 'error' || tool.result === 'error') return 'red';
+  if (tool.isRunning || tool.result === 'denied') return 'yellow';
+  return 'green';
+}
+
+function getToolSummaryLabel(tool: TToolSummaryItem): string {
+  return `${getToolSummaryStatus(tool)} ${tool.toolName}${tool.firstArg ? `(${tool.firstArg})` : ''}`;
+}
+
+function RoleLabel({ role }: { role: TUniversalMessage['role'] }): React.ReactElement {
+  switch (role) {
+    case 'user':
+      return (
+        <Text color="green" bold>
+          You:{' '}
+        </Text>
+      );
+    case 'assistant':
+      return (
+        <Text color="cyan" bold>
+          Robota:{' '}
+        </Text>
+      );
+    case 'system':
+      return (
+        <Text color="yellow" bold>
+          System:{' '}
+        </Text>
+      );
+    case 'tool':
+      return (
+        <Text color="white" bold>
+          Tool:{' '}
+        </Text>
+      );
+  }
+}
+
+function ToolMessage({ message }: { message: TUniversalMessage }): React.ReactElement {
+  if (!isToolMessage(message)) {
+    return <></>;
+  }
+  const toolName = message.name;
+  const content = message.content;
+
+  // Try to parse structured tool summaries (with diff info)
+  let summaries: IToolCallSummary[] | null = null;
+  try {
+    const parsed = JSON.parse(content) as IToolCallSummary[];
+    if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0].line === 'string') {
+      summaries = parsed as IToolCallSummary[];
+    }
+  } catch {
+    // Not JSON — fall back to plain text lines
+  }
+
+  if (summaries) {
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Box>
+          <Text color="white" bold>
+            Tool:{' '}
+          </Text>
+          {toolName && (
+            <Text color="white" dimColor>
+              [{toolName}]
+            </Text>
+          )}
+        </Box>
+        <Text> </Text>
+        {summaries.map((s, i) => (
+          <Box key={i} flexDirection="column">
+            <Text color="green">
+              {'  '}
+              {'✓'} {s.line}
+            </Text>
+            {s.diffLines && s.diffLines.length > 0 && (
+              <ToolDiffBlock file={s.diffFile} lines={s.diffLines} />
+            )}
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  // Fallback: plain text lines
+  const lines = content.split('\n').filter((l) => l.trim());
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="white" bold>
+          Tool:{' '}
+        </Text>
+        {toolName && (
+          <Text color="white" dimColor>
+            [{toolName}]
+          </Text>
+        )}
+      </Box>
+      <Text> </Text>
+      {lines.map((line, i) => (
+        <Text key={i} color="green">
+          {'  '}
+          {'✓'} {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+const MessageItem = React.memo(function MessageItem({
+  message,
+}: {
+  message: TUniversalMessage;
+}): React.ReactElement {
+  if (isToolMessage(message)) {
+    return <ToolMessage message={message} />;
+  }
+
+  const content = message.content ?? '';
+  const isInterrupted = message.state === 'interrupted';
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <RoleLabel role={message.role} />
+      </Box>
+      <Text> </Text>
+      <Box marginLeft={2}>
+        <Text wrap="wrap">
+          {isAssistantMessage(message)
+            ? renderMarkdown(content + (isInterrupted ? '\n\n_(interrupted)_' : ''))
+            : content}
+        </Text>
+      </Box>
+    </Box>
+  );
+});
+
+function ToolSummaryEntry({ entry }: { entry: IHistoryEntry }): React.ReactElement {
+  const data = entry.data as
+    | {
+        summary?: string;
+        tools?: TToolSummaryItem[];
+      }
+    | undefined;
+  const tools = data?.tools;
+  const lines = data?.summary?.split('\n') ?? [];
+
+  if (tools && tools.length > 0) {
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Box>
+          <Text color="white" bold>
+            Tool:{' '}
+          </Text>
+        </Box>
+        <Text> </Text>
+        {tools.map((tool, i) => (
+          <Box key={i} flexDirection="column">
+            <Text color={getToolSummaryColor(tool)}>
+              {'  '}
+              {getToolSummaryLabel(tool)}
+            </Text>
+            <ToolCommandOutput tool={tool} />
+            {tool.diffLines && tool.diffLines.length > 0 && (
+              <ToolDiffBlock file={tool.diffFile} lines={tool.diffLines} />
+            )}
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="white" bold>
+          Tool:{' '}
+        </Text>
+      </Box>
+      <Text> </Text>
+      {lines.map((line, i) => (
+        <Text key={i} color="green">
+          {'  '}
+          {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+function EventEntry({ entry }: { entry: IHistoryEntry }): React.ReactElement {
+  const eventData = entry.data as Record<string, TUniversalValue> | undefined;
+  const eventMessage =
+    typeof eventData?.message === 'string'
+      ? eventData.message
+      : typeof eventData?.content === 'string'
+        ? eventData.content
+        : entry.type;
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Box>
+        <Text color="yellow" bold>
+          System:{' '}
+        </Text>
+      </Box>
+      <Text> </Text>
+      <Box marginLeft={2}>
+        <Text wrap="wrap">{eventMessage}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function EntryItem({ entry }: { entry: IHistoryEntry }): React.ReactElement {
+  if (entry.category === 'chat') {
+    const message = entry.data as TUniversalMessage;
+    return <MessageItem message={message} />;
+  }
+
+  if (entry.type === 'tool-summary') {
+    return <ToolSummaryEntry entry={entry} />;
+  }
+
+  if (entry.type === 'usage-summary') {
+    return <UsageSummaryEntry entry={entry} />;
+  }
+
+  // tool-start/tool-end are recorded in history for persistence but not rendered
+  // (StreamingIndicator shows them during streaming, tool-summary shows them after)
+  if (entry.type === 'tool-start' || entry.type === 'tool-end') {
+    return <></>;
+  }
+
+  return <EventEntry entry={entry} />;
+}
+
+export default function MessageList({ history }: IProps): React.ReactElement {
+  return (
+    <Box flexDirection="column">
+      {history.map((entry) => (
+        <EntryItem key={entry.id} entry={entry} />
+      ))}
+    </Box>
+  );
+}

package/src/tui/PermissionPrompt.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+import type { IPermissionRequest } from './types.js';
+import type { TToolArgs } from '@robota-sdk/agent-core';
+import {
+  applyPermissionPromptInput,
+  getPermissionPromptInputAction,
+  PERMISSION_PROMPT_OPTIONS,
+  type TPermissionPromptInputAction,
+} from './flows/permission-prompt-flow.js';
+import { createSelectionFlowState, type ISelectionFlowState } from './flows/selection-flow.js';
+
+interface IProps {
+  request: IPermissionRequest;
+}
+
+function formatArgs(args: TToolArgs): string {
+  const entries = Object.entries(args);
+  if (entries.length === 0) return '(no arguments)';
+  return entries
+    .map(([k, v]) => `${k}: ${typeof v === 'string' ? v : JSON.stringify(v)}`)
+    .join(', ');
+}
+
+export default function PermissionPrompt({ request }: IProps): React.ReactElement {
+  const [state, setState] = React.useState<ISelectionFlowState>(() => createSelectionFlowState());
+  const stateRef = React.useRef(state);
+  const prevRequestRef = React.useRef(request);
+
+  if (prevRequestRef.current !== request) {
+    prevRequestRef.current = request;
+    const nextState = createSelectionFlowState();
+    stateRef.current = nextState;
+    setState(nextState);
+  }
+
+  const applyAction = React.useCallback(
+    (action: TPermissionPromptInputAction): void => {
+      const result = applyPermissionPromptInput(stateRef.current, action);
+      stateRef.current = result.state;
+      setState(result.state);
+      if (result.effect.type === 'resolve') {
+        request.resolve(result.effect.decision);
+      }
+    },
+    [request],
+  );
+
+  useInput((input, key) => {
+    const action = getPermissionPromptInputAction(input, key);
+    if (action !== undefined) {
+      applyAction(action);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1}>
+      <Text color="yellow" bold>
+        [Permission Required]
+      </Text>
+      <Text>
+        Tool:{' '}
+        <Text color="cyan" bold>
+          {request.toolName}
+        </Text>
+      </Text>
+      <Text dimColor> {formatArgs(request.toolArgs)}</Text>
+      <Box marginTop={1}>
+        {PERMISSION_PROMPT_OPTIONS.map((opt, i) => (
+          <Box key={opt} marginRight={2}>
+            <Text
+              color={i === state.selectedIndex ? 'cyan' : undefined}
+              bold={i === state.selectedIndex}
+            >
+              {i === state.selectedIndex ? '> ' : '  '}
+              {opt}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+      <Text dimColor> left/right to select, Enter to confirm</Text>
+    </Box>
+  );
+}

package/src/tui/PluginTUI.tsx

@@ -0,0 +1,256 @@
+/**
+ * PluginTUI — Main orchestrator component for plugin management.
+ * Manages a stack of screens: main, marketplace, installed plugins, etc.
+ */
+
+import React, { useState, useCallback } from 'react';
+import MenuSelect from './MenuSelect.js';
+import TextPrompt from './TextPrompt.js';
+import ConfirmPrompt from './ConfirmPrompt.js';
+import {
+  handleMainSelect,
+  handleMarketplaceListSelect,
+  handleMarketplaceActionSelect,
+  handleMarketplaceBrowseSelect,
+  handleInstallScopeSelect,
+  handleInstalledListSelect,
+  handleInstalledActionSelect,
+} from './plugin-tui-handlers.js';
+import type { IMenuSelectItem } from './MenuSelect.js';
+import type { ICommandPluginAdapter } from '@robota-sdk/agent-framework';
+import { usePluginScreenData } from './hooks/usePluginScreenData.js';
+
+type TScreenId =
+  | 'main'
+  | 'marketplace-list'
+  | 'marketplace-action'
+  | 'marketplace-browse'
+  | 'marketplace-install-scope'
+  | 'marketplace-add'
+  | 'installed-list'
+  | 'installed-action';
+
+interface IMenuContext {
+  marketplace?: string;
+  pluginId?: string;
+}
+
+interface IMenuState {
+  screen: TScreenId;
+  context?: IMenuContext;
+}
+
+interface IConfirmState {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+interface IProps {
+  callbacks: ICommandPluginAdapter;
+  onClose: () => void;
+  addMessage?: (msg: { role: string; content: string }) => void;
+}
+
+export default function PluginTUI({ callbacks, onClose, addMessage }: IProps): React.ReactElement {
+  const [stack, setStack] = useState<IMenuState[]>([{ screen: 'main' }]);
+  const [confirm, setConfirm] = useState<IConfirmState | undefined>();
+  const [refreshCounter, setRefreshCounter] = useState(0);
+
+  const current = stack[stack.length - 1] ?? { screen: 'main' };
+
+  const push = useCallback((state: IMenuState) => {
+    setStack((prev) => [...prev, state]);
+  }, []);
+
+  const pop = useCallback(() => {
+    setStack((prev) => {
+      if (prev.length <= 1) {
+        onClose();
+        return prev;
+      }
+      return prev.slice(0, -1);
+    });
+  }, [onClose]);
+
+  const popN = useCallback(
+    (n: number) => {
+      setStack((prev) => {
+        const next = prev.slice(0, Math.max(1, prev.length - n));
+        if (next.length === 0) {
+          onClose();
+          return prev;
+        }
+        return next;
+      });
+    },
+    [onClose],
+  );
+
+  const notify = useCallback(
+    (content: string) => {
+      addMessage?.({ role: 'system', content });
+    },
+    [addMessage],
+  );
+
+  const refresh = useCallback(() => {
+    setRefreshCounter((c) => c + 1);
+  }, []);
+
+  const setConfirmNav = useCallback(
+    (state: IConfirmState | undefined) => setConfirm(state),
+    [setConfirm],
+  );
+  // nav.push accepts a loose { screen: string } shape to satisfy plugin-tui-handlers types;
+  // we cast screen to TScreenId which is safe because handlers only push valid screen names.
+  const pushNav = useCallback(
+    (state: { screen: string; context?: IMenuContext }) =>
+      push({ screen: state.screen as TScreenId, context: state.context }),
+    [push],
+  );
+  const nav = { push: pushNav, pop, popN, notify, setConfirm: setConfirmNav, refresh };
+
+  const { items, loading, error } = usePluginScreenData(
+    current.screen,
+    current.context?.marketplace,
+    callbacks,
+    refreshCounter,
+    stack.length,
+  );
+
+  const handleSelect = useCallback(
+    (value: string) => {
+      const screen = current.screen;
+      const ctx = current.context;
+
+      if (screen === 'main') handleMainSelect(value, nav);
+      else if (screen === 'marketplace-list') handleMarketplaceListSelect(value, nav);
+      else if (screen === 'marketplace-action')
+        handleMarketplaceActionSelect(value, ctx?.marketplace ?? '', callbacks, nav);
+      else if (screen === 'marketplace-browse')
+        handleMarketplaceBrowseSelect(value, ctx?.marketplace ?? '', items, nav);
+      else if (screen === 'marketplace-install-scope')
+        handleInstallScopeSelect(value, ctx?.pluginId ?? '', callbacks, nav);
+      else if (screen === 'installed-list') handleInstalledListSelect(value, callbacks, nav);
+      else if (screen === 'installed-action')
+        handleInstalledActionSelect(value, ctx?.pluginId ?? '', callbacks, nav);
+    },
+    [current, items, callbacks, push, pop, popN, notify, setConfirm, refresh],
+  );
+
+  const handleTextSubmit = useCallback(
+    (value: string) => {
+      if (current.screen === 'marketplace-add') {
+        callbacks
+          .marketplaceAdd(value)
+          .then((name) => {
+            notify(`Added marketplace "${name}" from ${value}.`);
+            pop();
+          })
+          .catch((err) => {
+            notify(`Error: ${err instanceof Error ? err.message : String(err)}`);
+            pop();
+          });
+      }
+    },
+    [current.screen, callbacks, notify, pop],
+  );
+
+  // Confirm overlay intercepts everything
+  if (confirm) {
+    return (
+      <ConfirmPrompt
+        message={confirm.message}
+        onSelect={(index) => {
+          if (index === 0) confirm.onConfirm();
+          else confirm.onCancel();
+        }}
+      />
+    );
+  }
+
+  const screen = current.screen;
+
+  if (screen === 'marketplace-add') {
+    return (
+      <TextPrompt
+        title="Add Marketplace Source"
+        placeholder="owner/repo or git URL"
+        onSubmit={handleTextSubmit}
+        onCancel={pop}
+        validate={(v) => (!v.includes('/') ? 'Must be owner/repo or a git URL' : undefined)}
+      />
+    );
+  }
+
+  if (screen === 'marketplace-action') {
+    return (
+      <MenuSelect
+        key={stack.length}
+        title={`Marketplace: ${current.context?.marketplace ?? ''}`}
+        items={[
+          { label: 'Browse plugins', value: 'browse' },
+          { label: 'Update', value: 'update' },
+          { label: 'Remove', value: 'remove' },
+        ]}
+        onSelect={handleSelect}
+        onBack={pop}
+      />
+    );
+  }
+
+  if (screen === 'marketplace-install-scope') {
+    return (
+      <MenuSelect
+        key={stack.length}
+        title={`Install scope for "${current.context?.pluginId ?? ''}"`}
+        items={[
+          { label: 'User scope', value: 'user' },
+          { label: 'Project scope', value: 'project' },
+        ]}
+        onSelect={handleSelect}
+        onBack={pop}
+      />
+    );
+  }
+
+  if (screen === 'installed-action') {
+    return (
+      <MenuSelect
+        key={stack.length}
+        title={`Plugin: ${current.context?.pluginId ?? ''}`}
+        items={[{ label: 'Uninstall', value: 'uninstall' }]}
+        onSelect={handleSelect}
+        onBack={pop}
+      />
+    );
+  }
+
+  // Screens with async items: main, marketplace-list, marketplace-browse, installed-list
+  const titleMap: Record<string, string> = {
+    main: 'Plugin Management',
+    'marketplace-list': 'Marketplace',
+    'marketplace-browse': `Browse: ${current.context?.marketplace ?? ''}`,
+    'installed-list': 'Installed Plugins',
+  };
+
+  const staticItemsMap: Record<string, IMenuSelectItem[]> = {
+    main: [
+      { label: 'Marketplace', value: 'marketplace' },
+      { label: 'Installed Plugins', value: 'installed' },
+    ],
+  };
+
+  return (
+    <MenuSelect
+      key={`${screen}-${stack.length}-${refreshCounter}`}
+      title={titleMap[screen] ?? 'Plugin Management'}
+      items={staticItemsMap[screen] ?? items}
+      onSelect={handleSelect}
+      onBack={pop}
+      loading={loading}
+      error={error}
+    />
+  );
+}

package/src/tui/SessionPicker.tsx

@@ -0,0 +1,66 @@
+/**
+ * Session picker component for /resume command.
+ * Shows a list of sessions for the current cwd.
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import type { IResumableSessionSummary } from '@robota-sdk/agent-framework';
+import ListPicker from './ListPicker.js';
+
+const SESSION_ID_DISPLAY_LENGTH = 8;
+const SESSION_PREVIEW_DISPLAY_LENGTH = 60;
+
+interface IProps {
+  sessions: readonly IResumableSessionSummary[];
+  onSelect: (sessionId: string) => void;
+  onCancel: () => void;
+}
+
+export default function SessionPicker({
+  sessions,
+  onSelect,
+  onCancel,
+}: IProps): React.ReactElement {
+  return (
+    <Box flexDirection="column" paddingX={1} marginBottom={1}>
+      <Text bold color="cyan">
+        Select a session to resume (ESC to cancel):
+      </Text>
+      <ListPicker<IResumableSessionSummary>
+        items={[...sessions]}
+        renderItem={(session: IResumableSessionSummary, isSelected: boolean) => {
+          const preview = session.preview
+            ? session.preview.slice(0, SESSION_PREVIEW_DISPLAY_LENGTH) +
+              (session.preview.length > SESSION_PREVIEW_DISPLAY_LENGTH ? '...' : '')
+            : '';
+          return (
+            <Text>
+              {isSelected ? '> ' : '  '}
+              <Text bold>{session.name ?? session.id.slice(0, SESSION_ID_DISPLAY_LENGTH)}</Text>
+              {'  '}
+              <Text dimColor>
+                {new Date(session.updatedAt).toLocaleString(undefined, {
+                  month: 'short',
+                  day: 'numeric',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </Text>
+              {'  '}
+              <Text dimColor>msgs: {session.messageCount}</Text>
+              {preview ? (
+                <>
+                  {'\n    '}
+                  <Text color="gray">{preview}</Text>
+                </>
+              ) : null}
+            </Text>
+          );
+        }}
+        onSelect={(session: IResumableSessionSummary) => onSelect(session.id)}
+        onCancel={onCancel}
+      />
+    </Box>
+  );
+}