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

package/src/tui/__tests__/abort-streaming-e2e.test.tsx

@@ -0,0 +1,183 @@
+/**
+ * E2E-style test for abort during streaming.
+ * Uses ink-testing-library to verify that:
+ * 1. Streaming text debounce works (renders batched, not per-delta)
+ * 2. ESC during streaming triggers abort
+ * 3. Partial text is preserved after abort
+ */
+
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { render } from 'ink-testing-library';
+import { Box, Text, useInput } from 'ink';
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Minimal streaming component that simulates the debounced onTextDelta pattern.
+ * Accepts deltas via a callback ref, renders accumulated text.
+ */
+function StreamingTestApp({
+  onReady,
+  onAbort,
+}: {
+  onReady: (appendDelta: (text: string) => void) => void;
+  onAbort: () => void;
+}): React.ReactElement {
+  const [text, setText] = useState('');
+  const textRef = useRef('');
+  const [aborted, setAborted] = useState(false);
+  const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const renderCountRef = useRef(0);
+
+  // Debounced delta handler (same pattern as InteractiveSession)
+  const appendDelta = useCallback((delta: string) => {
+    textRef.current += delta;
+    if (!flushTimerRef.current) {
+      flushTimerRef.current = setTimeout(() => {
+        setText(textRef.current);
+        flushTimerRef.current = null;
+      }, 16);
+    }
+  }, []);
+
+  // ESC handler
+  useInput((_input, key) => {
+    if (key.escape) {
+      setAborted(true);
+      onAbort();
+      // Force flush any pending text
+      if (flushTimerRef.current) {
+        clearTimeout(flushTimerRef.current);
+        flushTimerRef.current = null;
+      }
+      setText(textRef.current);
+    }
+  });
+
+  // Notify parent that we're ready
+  useEffect(() => {
+    onReady(appendDelta);
+  }, [onReady, appendDelta]);
+
+  renderCountRef.current++;
+
+  return (
+    <Box flexDirection="column">
+      <Text>{text}</Text>
+      {aborted && <Text color="yellow">Interrupted by user.</Text>}
+      <Text dimColor>renders: {renderCountRef.current}</Text>
+    </Box>
+  );
+}
+
+describe('Streaming abort E2E', () => {
+  it('debounced streaming renders fewer times than delta count', async () => {
+    let appendDelta: ((text: string) => void) | null = null;
+
+    const { lastFrame } = render(
+      React.createElement(StreamingTestApp, {
+        onReady: (fn: (text: string) => void) => {
+          appendDelta = fn;
+        },
+        onAbort: () => {},
+      }),
+    );
+
+    // Wait for component to mount
+    await new Promise((r) => setTimeout(r, 20));
+    expect(appendDelta).not.toBeNull();
+
+    // Send 20 rapid deltas
+    for (let i = 0; i < 20; i++) {
+      appendDelta!(`chunk${i} `);
+    }
+
+    // Wait for debounce flush
+    await new Promise((r) => setTimeout(r, 50));
+
+    const frame = lastFrame()!;
+    // All text should be present
+    expect(frame).toContain('chunk0');
+    expect(frame).toContain('chunk19');
+
+    // Render count should be MUCH less than 20 (debounced)
+    const renderMatch = frame.match(/renders: (\d+)/);
+    expect(renderMatch).not.toBeNull();
+    const renderCount = parseInt(renderMatch![1], 10);
+    // With 16ms debounce and ~50ms total time, expect 3-5 renders, not 20+
+    expect(renderCount).toBeLessThan(10);
+  });
+
+  it('ESC during rapid streaming triggers abort and shows text', async () => {
+    let appendDelta: ((text: string) => void) | null = null;
+    let abortCalled = false;
+
+    const { stdin, lastFrame } = render(
+      React.createElement(StreamingTestApp, {
+        onReady: (fn: (text: string) => void) => {
+          appendDelta = fn;
+        },
+        onAbort: () => {
+          abortCalled = true;
+        },
+      }),
+    );
+
+    await new Promise((r) => setTimeout(r, 20));
+
+    // Send some deltas
+    for (let i = 0; i < 5; i++) {
+      appendDelta!(`line${i} `);
+    }
+
+    // Press ESC
+    stdin.write('\x1B');
+    await new Promise((r) => setTimeout(r, 50));
+
+    expect(abortCalled).toBe(true);
+
+    const frame = lastFrame()!;
+    // Text should be visible (flush on abort)
+    expect(frame).toContain('line0');
+    expect(frame).toContain('line4');
+    // Cancelled indicator
+    expect(frame).toContain('Interrupted by user.');
+  });
+
+  it('ESC during ongoing streaming stops further rendering', async () => {
+    let appendDelta: ((text: string) => void) | null = null;
+    let abortCalled = false;
+
+    const { stdin, lastFrame } = render(
+      React.createElement(StreamingTestApp, {
+        onReady: (fn: (text: string) => void) => {
+          appendDelta = fn;
+        },
+        onAbort: () => {
+          abortCalled = true;
+        },
+      }),
+    );
+
+    await new Promise((r) => setTimeout(r, 20));
+
+    // Send first batch
+    appendDelta!('before_abort ');
+
+    // Wait for flush
+    await new Promise((r) => setTimeout(r, 20));
+
+    // Press ESC
+    stdin.write('\x1B');
+    await new Promise((r) => setTimeout(r, 30));
+
+    expect(abortCalled).toBe(true);
+
+    // Send more deltas AFTER abort (should still accumulate in ref but component should show Cancelled)
+    appendDelta!('after_abort ');
+    await new Promise((r) => setTimeout(r, 50));
+
+    const frame = lastFrame()!;
+    expect(frame).toContain('before_abort');
+    expect(frame).toContain('Interrupted by user.');
+  });
+});

package/src/tui/__tests__/background-task-panel.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { render } from 'ink-testing-library';
+import type { IExecutionWorkspaceEntry } from '@robota-sdk/agent-framework';
+import BackgroundTaskPanel from '../BackgroundTaskPanel.js';
+
+function makeEntry(overrides: Partial<IExecutionWorkspaceEntry>): IExecutionWorkspaceEntry {
+  return {
+    id: 'task:agent_1',
+    sourceId: 'agent_1',
+    kind: 'background_task',
+    origin: { kind: 'slash_command', sessionId: 'session_1', commandName: 'agent' },
+    taskKind: 'agent',
+    status: 'running',
+    title: 'general-purpose',
+    subtitle: 'agent',
+    preview: 'Analyze backlog',
+    unread: false,
+    attention: 'none',
+    visibility: 'default',
+    updatedAt: '2026-05-09T00:00:00.000Z',
+    controls: ['select', 'cancel'],
+    ...overrides,
+  };
+}
+
+describe('BackgroundTaskPanel', () => {
+  it('renders SDK workspace entries with compact markers instead of raw task ids', () => {
+    const { lastFrame } = render(
+      <BackgroundTaskPanel
+        entries={[
+          makeEntry({ id: 'task:agent_1', status: 'running' }),
+          makeEntry({ id: 'task:agent_2', status: 'completed', preview: 'Done' }),
+          makeEntry({
+            id: 'task:agent_3',
+            status: 'failed',
+            attention: 'failed',
+            preview: 'Timed out',
+          }),
+        ]}
+      />,
+    );
+
+    const frame = lastFrame()!;
+    expect(frame).toContain('Background work');
+    expect(frame).toContain('├ □ general-purpose agent');
+    expect(frame).toContain('├ ■ general-purpose agent · completed');
+    expect(frame).toContain('└ ■ general-purpose agent · failed');
+    expect(frame).not.toContain('agent_1');
+    expect(frame).not.toContain('agent_2');
+    expect(frame).not.toContain('agent_3');
+  });
+});

package/src/tui/__tests__/background-task-row-format.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest';
+import type { IExecutionWorkspaceEntry } from '@robota-sdk/agent-framework';
+import { formatBackgroundTaskRow } from '../background-task-row-format.js';
+
+function makeEntry(overrides: Partial<IExecutionWorkspaceEntry>): IExecutionWorkspaceEntry {
+  return {
+    id: 'task:agent_1',
+    sourceId: 'agent_1',
+    kind: 'background_task',
+    origin: { kind: 'slash_command', sessionId: 'session_1', commandName: 'agent' },
+    taskKind: 'agent',
+    status: 'running',
+    title: 'Explore',
+    subtitle: 'general-purpose',
+    preview: 'Analyze backlog',
+    unread: false,
+    attention: 'none',
+    visibility: 'default',
+    updatedAt: '2026-05-09T00:00:00.000Z',
+    controls: ['select', 'cancel'],
+    ...overrides,
+  };
+}
+
+describe('formatBackgroundTaskRow', () => {
+  it('formats running SDK workspace entries without raw task ids', () => {
+    const row = formatBackgroundTaskRow(makeEntry({ id: 'task:agent_1' }), { isLast: true });
+
+    expect(row.connector).toBe('└');
+    expect(row.marker).toBe('□');
+    expect(row.label).toBe('Explore agent');
+    expect(row.segments).toEqual(['running', 'agent · general-purpose']);
+    expect(row.preview).toBe('Analyze backlog');
+    expect(row.accessibleText).not.toContain('agent_1');
+  });
+
+  it('formats failed and completed rows from SDK-owned status and attention', () => {
+    const failed = formatBackgroundTaskRow(
+      makeEntry({
+        id: 'task:agent_2',
+        status: 'failed',
+        attention: 'failed',
+        preview: 'Timed out',
+      }),
+      { isLast: false },
+    );
+    const completed = formatBackgroundTaskRow(
+      makeEntry({ id: 'task:agent_3', status: 'completed', preview: 'Summary ready' }),
+    );
+
+    expect(failed.connector).toBe('├');
+    expect(failed.marker).toBe('■');
+    expect(failed.color).toBe('red');
+    expect(failed.preview).toBe('Timed out');
+    expect(completed.marker).toBe('■');
+    expect(completed.color).toBe('green');
+    expect(completed.preview).toBe('Summary ready');
+  });
+});

package/src/tui/__tests__/cjk-text-input-flow.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from 'vitest';
+import {
+  applyCjkTextInput,
+  applyCjkTextPaste,
+  createCjkTextInputFlowState,
+  syncCjkTextInputFlowState,
+} from '../flows/cjk-text-input-flow.js';
+
+describe('cjk text input flow', () => {
+  it('Given printable input When applied Then value changes at cursor', () => {
+    const result = applyCjkTextInput(
+      createCjkTextInputFlowState('ab'),
+      'c',
+      {},
+      { canPaste: true },
+    );
+
+    expect(result.state).toMatchObject({ value: 'abc', cursor: 3 });
+    expect(result.effect).toEqual({ type: 'change', value: 'abc' });
+  });
+
+  it('Given cursor in middle When backspace is applied Then previous char is removed', () => {
+    const state = { ...createCjkTextInputFlowState('abc'), cursor: 2 };
+
+    const result = applyCjkTextInput(state, '', { backspace: true }, { canPaste: true });
+
+    expect(result.state).toMatchObject({ value: 'ac', cursor: 1 });
+    expect(result.effect).toEqual({ type: 'change', value: 'ac' });
+  });
+
+  it('Given return key When applied Then submit effect contains current value', () => {
+    const result = applyCjkTextInput(
+      createCjkTextInputFlowState('hello'),
+      '',
+      { return: true },
+      { canPaste: true },
+    );
+
+    expect(result.effect).toEqual({ type: 'submit', value: 'hello' });
+  });
+
+  it('Given multiline fallback paste When applied Then paste effect is emitted', () => {
+    const result = applyCjkTextInput(
+      createCjkTextInputFlowState(''),
+      'a\nb',
+      {},
+      { canPaste: true },
+    );
+
+    expect(result.effect).toEqual({ type: 'paste', text: 'a\nb', cursor: 0 });
+  });
+
+  it('Given Ink usePaste single-line text When applied Then text is inserted at cursor', () => {
+    const state = { ...createCjkTextInputFlowState('ab'), cursor: 1 };
+
+    const result = applyCjkTextPaste(state, '한글', { canPaste: true });
+
+    expect(result.state).toMatchObject({ value: 'a한글b', cursor: 3 });
+    expect(result.effect).toEqual({ type: 'change', value: 'a한글b' });
+  });
+
+  it('Given Ink usePaste multiline text When applied Then normalized paste effect is emitted', () => {
+    const state = { ...createCjkTextInputFlowState('ab'), cursor: 1 };
+
+    const result = applyCjkTextPaste(state, 'x\r\ny\rz', { canPaste: true });
+
+    expect(result.state).toBe(state);
+    expect(result.effect).toEqual({ type: 'paste', text: 'x\ny\nz', cursor: 1 });
+  });
+
+  it('Given bracketed multiline paste When end marker arrives Then buffered paste is emitted', () => {
+    const started = applyCjkTextInput(
+      createCjkTextInputFlowState('x'),
+      '[200~hello',
+      {},
+      { canPaste: true },
+    ).state;
+    const result = applyCjkTextInput(started, '\nworld[201~', {}, { canPaste: true });
+
+    expect(result.effect).toEqual({ type: 'paste', text: 'hello\nworld', cursor: 1 });
+    expect(result.state.isPasting).toBe(false);
+  });
+
+  it('Given external value update When synced Then cursor hint is honored', () => {
+    const state = createCjkTextInputFlowState('abc');
+
+    const result = syncCjkTextInputFlowState(state, 'a[Pasted]bc', 9);
+
+    expect(result).toMatchObject({ value: 'a[Pasted]bc', cursor: 9 });
+  });
+
+  it('Given vertical navigation disabled When up arrow is applied Then cursor is unchanged', () => {
+    const state = { ...createCjkTextInputFlowState('abcdef'), cursor: 5 };
+
+    const result = applyCjkTextInput(
+      state,
+      '',
+      { upArrow: true },
+      {
+        canPaste: true,
+        enableVerticalNavigation: false,
+        availableWidth: 2,
+      },
+    );
+
+    expect(result.state).toBe(state);
+    expect(result.effect).toEqual({ type: 'none' });
+  });
+});

package/src/tui/__tests__/cjk-text-input.test.ts

@@ -0,0 +1,191 @@
+/**
+ * Tests for CjkTextInput pure utility functions.
+ *
+ * These test the input filtering and insertion logic extracted from
+ * the React component, without requiring Ink/React rendering.
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  filterPrintable,
+  insertAtCursor,
+  displayOffset,
+  charIndexAtDisplayOffset,
+} from '../flows/cjk-text-input-flow.js';
+
+describe('filterPrintable', () => {
+  it('returns empty string for null input', () => {
+    expect(filterPrintable(null)).toBe('');
+  });
+
+  it('returns empty string for undefined input', () => {
+    expect(filterPrintable(undefined)).toBe('');
+  });
+
+  it('returns empty string for empty string', () => {
+    expect(filterPrintable('')).toBe('');
+  });
+
+  it('passes through normal ASCII text', () => {
+    expect(filterPrintable('hello')).toBe('hello');
+  });
+
+  it('passes through Korean characters', () => {
+    expect(filterPrintable('안녕하세요')).toBe('안녕하세요');
+  });
+
+  it('passes through emoji', () => {
+    expect(filterPrintable('🎉')).toBe('🎉');
+  });
+
+  it('filters out null byte', () => {
+    expect(filterPrintable('\x00')).toBe('');
+  });
+
+  it('filters out escape character', () => {
+    expect(filterPrintable('\x1b')).toBe('');
+  });
+
+  it('filters out DEL character', () => {
+    expect(filterPrintable('\x7f')).toBe('');
+  });
+
+  it('filters out mixed control characters, keeps printable', () => {
+    expect(filterPrintable('\x01hello\x02world\x7f')).toBe('helloworld');
+  });
+
+  it('returns empty when input is only control characters', () => {
+    expect(filterPrintable('\x00\x01\x02\x03\x1f\x7f')).toBe('');
+  });
+
+  it('handles tab character (0x09) — filtered as control', () => {
+    expect(filterPrintable('\t')).toBe('');
+  });
+
+  it('handles newline (0x0a) — filtered as control', () => {
+    expect(filterPrintable('\n')).toBe('');
+  });
+});
+
+describe('insertAtCursor', () => {
+  it('inserts at the beginning', () => {
+    const result = insertAtCursor('world', 0, 'hello ');
+    expect(result.value).toBe('hello world');
+    expect(result.cursor).toBe(6);
+  });
+
+  it('inserts at the end', () => {
+    const result = insertAtCursor('hello', 5, ' world');
+    expect(result.value).toBe('hello world');
+    expect(result.cursor).toBe(11);
+  });
+
+  it('inserts in the middle', () => {
+    const result = insertAtCursor('helo', 3, 'l');
+    expect(result.value).toBe('hello');
+    expect(result.cursor).toBe(4);
+  });
+
+  it('inserts into empty string', () => {
+    const result = insertAtCursor('', 0, 'abc');
+    expect(result.value).toBe('abc');
+    expect(result.cursor).toBe(3);
+  });
+
+  it('handles multi-character paste', () => {
+    const result = insertAtCursor('ac', 1, 'bb');
+    expect(result.value).toBe('abbc');
+    expect(result.cursor).toBe(3);
+  });
+
+  it('handles Korean character insertion', () => {
+    const result = insertAtCursor('안세요', 1, '녕하');
+    expect(result.value).toBe('안녕하세요');
+    expect(result.cursor).toBe(3);
+  });
+
+  it('handles emoji insertion', () => {
+    const result = insertAtCursor('hello world', 6, '🎉 ');
+    expect(result.value).toBe('hello 🎉 world');
+    expect(result.cursor).toBe(9);
+  });
+});
+
+describe('displayOffset', () => {
+  it('returns 0 for charIndex 0', () => {
+    expect(displayOffset([...'hello'], 0, 10)).toBe(0);
+  });
+
+  it('returns char count for ASCII within one line', () => {
+    expect(displayOffset([...'hello'], 3, 10)).toBe(3);
+  });
+
+  it('accumulates across wrap boundary', () => {
+    // "abcde" width 3: offset at index 4 = 4 (abc on line 0, de on line 1)
+    expect(displayOffset([...'abcde'], 4, 3)).toBe(4);
+  });
+
+  it('cursor before CJK char is at end of previous content', () => {
+    // "abcd한" width 5: cursor before "한" is at col 4 on line 0
+    // gap happens when "한" renders, not at cursor position
+    expect(displayOffset([...'abcd한'], 4, 5)).toBe(4);
+    // cursor after "한": 4(gap included) + 2 = 7 → but via offset: gap is at render
+    expect(displayOffset([...'abcd한'], 5, 5)).toBe(7);
+  });
+
+  it('handles pure CJK', () => {
+    // "한글" width 5: "한"=2, "글"=2 → total 4, fits on one line
+    expect(displayOffset([...'한글'], 2, 5)).toBe(4);
+  });
+
+  it('handles CJK wrapping', () => {
+    // "한글테" width 5: cursor before "테" is after "글" (offset 4)
+    // "테" doesn't fit at col 4, but cursor is BEFORE the wrap
+    expect(displayOffset([...'한글테'], 2, 5)).toBe(4);
+    // cursor after "테": gap(1) + 2 = offset 7
+    expect(displayOffset([...'한글테'], 3, 5)).toBe(7);
+  });
+});
+
+describe('charIndexAtDisplayOffset', () => {
+  it('returns 0 for offset 0', () => {
+    expect(charIndexAtDisplayOffset([...'hello'], 0, 10)).toBe(0);
+  });
+
+  it('finds correct index for ASCII', () => {
+    expect(charIndexAtDisplayOffset([...'hello'], 3, 10)).toBe(3);
+  });
+
+  it('returns text length when offset exceeds text', () => {
+    expect(charIndexAtDisplayOffset([...'hi'], 100, 10)).toBe(2);
+  });
+
+  it('round-trips with displayOffset for ASCII', () => {
+    const text = 'abcdefghij';
+    const chars = [...text];
+    const width = 4;
+    for (let i = 0; i <= chars.length; i++) {
+      const off = displayOffset(chars, i, width);
+      expect(charIndexAtDisplayOffset(chars, off, width)).toBe(i);
+    }
+  });
+
+  it('round-trips with displayOffset for CJK', () => {
+    const text = '한글테스트';
+    const chars = [...text];
+    const width = 5;
+    for (let i = 0; i <= chars.length; i++) {
+      const off = displayOffset(chars, i, width);
+      expect(charIndexAtDisplayOffset(chars, off, width)).toBe(i);
+    }
+  });
+
+  it('up arrow simulation: offset - width gives previous line position', () => {
+    // "abcdef" width 3: line 0 = "abc", line 1 = "def"
+    // cursor at index 4 (line 1, col 1) → offset = 4
+    // offset - 3 = 1 → charIndex 1 (line 0, col 1)
+    const chars = [...'abcdef'];
+    const off = displayOffset(chars, 4, 3);
+    expect(charIndexAtDisplayOffset(chars, off - 3, 3)).toBe(1);
+  });
+});