zerg-ztc 0.1.0

package/src/components/InputArea.tsx

@@ -0,0 +1,551 @@
+import React, { useReducer, useCallback } from 'react';
+import { useInput, useStdout } from 'ink';
+import { InkNode } from '../ui/ink/index.js';
+import { buildInputAreaView, wrapInputSegments } from '../ui/views/input_area.js';
+import { InputBus, InputKey } from '../ui/core/input.js';
+import { InputState, InputSegment } from '../ui/core/input_state.js';
+import { debugLog } from '../debug/logger.js';
+import chalk from 'chalk';
+import { saveClipboardImage } from '../utils/clipboard_image.js';
+import { renderImagePreview } from '../utils/image_preview.js';
+import {
+  createEmptyState,
+  insertText,
+  insertSegment,
+  insertBadge,
+  backspace,
+  deleteForward,
+  moveLeft,
+  moveRight,
+  moveWordLeft,
+  moveWordRight,
+  getPlainText,
+  serializeSegments,
+  PASTE_BADGE_THRESHOLD
+} from '../ui/core/input_segments.js';
+
+interface InputAreaProps {
+  onSubmit: (text: string) => void;
+  onCommand?: (command: string, args: string[]) => void;
+  commands?: Array<{
+    name: string;
+    description: string;
+    usage?: string;
+  }>;
+  onStateChange?: (state: InputState) => void;
+  onToast?: (message: string) => void;
+  cols?: number;
+  inputBus?: InputBus;
+  disabled?: boolean;
+  placeholder?: string;
+  historyEnabled?: boolean;
+  debug?: boolean;
+}
+
+export type { InputState } from '../ui/core/input_state.js';
+
+type InputAction =
+  | { type: 'apply'; state: Partial<InputState> }
+  | { type: 'submit'; historyEnabled: boolean; historyEntry?: string }
+  | { type: 'history_nav'; direction: 'up' | 'down'; historyEnabled: boolean };
+
+const initialState: InputState = createEmptyState();
+
+function reducer(state: InputState, action: InputAction): InputState {
+  switch (action.type) {
+    case 'apply':
+      return { ...state, ...action.state };
+    case 'submit': {
+      const history = action.historyEnabled && action.historyEntry
+        ? [...state.history.slice(-100), action.historyEntry]
+        : state.history;
+      return {
+        ...state,
+        segments: [],
+        cursor: { index: 0, offset: 0 },
+        historyIdx: -1,
+        history
+      };
+    }
+    case 'history_nav': {
+      if (!action.historyEnabled || state.history.length === 0) return state;
+
+      let newIdx: number;
+      if (action.direction === 'up') {
+        newIdx = state.historyIdx === -1
+          ? state.history.length - 1
+          : Math.max(0, state.historyIdx - 1);
+      } else {
+        newIdx = state.historyIdx === -1 ? -1 : state.historyIdx + 1;
+        if (newIdx >= state.history.length) newIdx = -1;
+      }
+
+      if (newIdx === -1) {
+        return { ...state, historyIdx: -1, segments: [], cursor: { index: 0, offset: 0 } };
+      }
+
+      const historyValue = state.history[newIdx];
+      const nextSegments: InputSegment[] = historyValue.length > 0
+        ? [{ type: 'text', text: historyValue }]
+        : [];
+      return {
+        ...state,
+        historyIdx: newIdx,
+        segments: nextSegments,
+        cursor: { index: nextSegments.length ? 0 : 0, offset: historyValue.length }
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+export const InputArea: React.FC<InputAreaProps> = ({ 
+  onSubmit, 
+  onCommand,
+  commands = [],
+  onStateChange,
+  onToast,
+  cols = process.stdout.columns || 80,
+  inputBus,
+  disabled = false,
+  placeholder = 'Type a message...',
+  historyEnabled = true,
+  debug = false
+}) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const stateRef = React.useRef(state);
+  const [badgePreview, setBadgePreview] = React.useState<string[] | null>(null);
+  React.useEffect(() => {
+    stateRef.current = state;
+    onStateChange?.(state);
+  }, [onStateChange, state]);
+
+  React.useEffect(() => {
+    const segment = state.segments[state.cursor.index];
+    if (!segment || segment.type === 'text') {
+      setBadgePreview(null);
+      return;
+    }
+    if (segment.type === 'paste') {
+      const lines = segment.text.split('\n');
+      const preview = lines.slice(0, 3);
+      if (lines.length > 3) preview.push('…');
+      setBadgePreview(preview);
+      return;
+    }
+    if (segment.type === 'file') {
+      setBadgePreview([`[file] ${segment.path}`]);
+      return;
+    }
+    if (segment.type === 'image') {
+      renderImagePreview(segment.path, 40, 16).then(result => {
+        if (result && result.length > 0) {
+          setBadgePreview(result);
+        } else {
+          setBadgePreview([`[image] ${segment.path}`, 'Install chafa for preview.']);
+        }
+      }).catch(() => {
+        setBadgePreview([`[image] ${segment.path}`]);
+      });
+    }
+  }, [state.cursor.index, state.segments]);
+
+  const inputRenderCount = React.useRef(0);
+  React.useEffect(() => {
+    inputRenderCount.current += 1;
+    const totalLength = state.segments.reduce((acc, segment) => (
+      segment.type === 'text' ? acc + segment.text.length : acc + 0
+    ), 0);
+    debugLog(`InputArea render #${inputRenderCount.current} (valueLen=${totalLength})`);
+  });
+
+  const handleSubmit = useCallback(() => {
+    const serialized = serializeSegments(state.segments).trim();
+    if (!serialized) return;
+
+    const plainText = getPlainText(state.segments).trim();
+    const isCommand = state.segments.length === 1 && state.segments[0].type === 'text' && plainText.startsWith('/');
+    if (isCommand) {
+      const parts = plainText.slice(1).split(/\s+/);
+      const cmd = parts[0];
+      const args = parts.slice(1);
+      onCommand?.(cmd, args);
+    } else {
+      onSubmit(serialized);
+    }
+
+    dispatch({ type: 'submit', historyEnabled, historyEntry: serialized });
+  }, [state.segments, onSubmit, onCommand, historyEnabled]);
+
+  const navigateHistory = useCallback((direction: 'up' | 'down') => {
+    dispatch({ type: 'history_nav', direction, historyEnabled });
+  }, [historyEnabled]);
+
+  const { stdout } = useStdout();
+  const overlayEnabled = process.env.ZTC_INPUT_OVERLAY !== '0' && process.env.ZTC_WEB_MIRROR !== '1';
+  const overlayStateRef = React.useRef<InputState>(initialState);
+  const overlayBusyRef = React.useRef(false);
+  const pasteBusyRef = React.useRef(false);
+
+  const insertTextIntoState = useCallback((text: string) => {
+    const current = stateRef.current;
+    const next = insertText(current, text);
+    dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+  }, []);
+
+  const renderOverlay = useCallback((overlayState: InputState) => {
+    if (!stdout || !stdout.isTTY) return;
+    if (overlayBusyRef.current) return;
+    overlayBusyRef.current = true;
+
+    const rows = stdout.rows || 24;
+    const statusHeight = 1;
+    const cols = stdout.columns || 80;
+    const wrapped = wrapInputSegments(overlayState.segments, overlayState.cursor, cols);
+    const inputLines = Math.max(1, wrapped.lines.length);
+    const inputHeight = inputLines + 4;
+    const startRow = Math.max(1, rows - (inputHeight + statusHeight) + 1);
+
+    const prompt = disabled ? chalk.gray('❯ ') : chalk.blue('❯ ');
+
+    const lines: string[] = [];
+    if (disabled) {
+      lines.push(prompt + chalk.gray(placeholder));
+    } else if (overlayState.segments.length === 0) {
+      lines.push(prompt + chalk.inverse(' ') + chalk.gray(placeholder));
+    } else {
+      wrapped.lines.forEach((lineTokens, index) => {
+        const prefix = index === 0 ? prompt : '  ';
+        let lineText = prefix;
+        lineTokens.forEach((token, tokenIndex) => {
+          const isCursor = index === wrapped.cursorLine && tokenIndex === wrapped.cursorCol;
+          if (isCursor) {
+            lineText += chalk.inverse(token.text || ' ');
+          } else if (token.style?.color === 'yellow') {
+            lineText += chalk.gray(token.text);
+          } else {
+            lineText += token.text;
+          }
+        });
+        if (index === wrapped.cursorLine && wrapped.cursorCol === lineTokens.length) {
+          lineText += chalk.inverse(' ');
+        }
+        lines.push(lineText);
+      });
+    }
+
+    const plainText = overlayState.segments.length === 1 && overlayState.segments[0].type === 'text'
+      ? overlayState.segments[0].text
+      : '';
+    const isCommandMode = plainText.startsWith('/');
+    const commandQuery = isCommandMode ? plainText.slice(1).trim() : '';
+    const commandMatches = isCommandMode
+      ? commands.filter(c => c.name.startsWith(commandQuery)).slice(0, 4)
+      : [];
+
+    for (let i = 0; i < 4; i += 1) {
+      const cmd = commandMatches[i];
+      if (!cmd) {
+        lines.push(' ');
+        continue;
+      }
+      const usage = cmd.usage ? ` ${cmd.usage}` : '';
+      const line = `${chalk.cyan.bold(`/${cmd.name}`)}${chalk.white(usage)}${chalk.gray(` — ${cmd.description}`)}`;
+      lines.push(line);
+    }
+
+    stdout.write('\x1b[s');
+    for (let i = 0; i < inputHeight; i += 1) {
+      const row = startRow + i;
+      const raw = lines[i] || '';
+      const trimmed = raw.length > cols ? raw.slice(0, cols) : raw;
+      stdout.write(`\x1b[${row};1H\x1b[2K${trimmed}`);
+    }
+    stdout.write('\x1b[u');
+    overlayBusyRef.current = false;
+  }, [commands, disabled, placeholder, stdout]);
+
+  const insertTextIntoOverlay = useCallback((text: string) => {
+    const current = overlayStateRef.current;
+    const next = insertText(current, text);
+    overlayStateRef.current = { ...next, historyIdx: -1 };
+    renderOverlay(overlayStateRef.current);
+  }, [renderOverlay]);
+
+  const handleClipboardImagePaste = useCallback(async (target: 'state' | 'overlay') => {
+    if (pasteBusyRef.current) return;
+    pasteBusyRef.current = true;
+    try {
+      const path = await saveClipboardImage();
+      if (!path) return;
+      onToast?.(`Image saved to ${path}`);
+      if (target === 'overlay') {
+        const current = overlayStateRef.current;
+        const next = insertBadge(current, { type: 'image', path });
+        overlayStateRef.current = { ...next, historyIdx: -1 };
+        renderOverlay(overlayStateRef.current);
+      } else {
+        const current = stateRef.current;
+        const next = insertBadge(current, { type: 'image', path });
+        dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+      }
+    } finally {
+      pasteBusyRef.current = false;
+    }
+  }, [insertTextIntoOverlay, insertTextIntoState, onToast, renderOverlay]);
+
+  const handleInput = useCallback((input: string, key: InputKey) => {
+    if (disabled) return;
+
+    if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {
+      void handleClipboardImagePaste('state');
+      return;
+    }
+
+    if (key.return && !key.shift) {
+      handleSubmit();
+      return;
+    }
+
+    if (key.return && key.shift) {
+      const next = insertText(state, '\n');
+      dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+      return;
+    }
+
+    if (key.upArrow) {
+      navigateHistory('up');
+      return;
+    }
+    if (key.downArrow) {
+      navigateHistory('down');
+      return;
+    }
+
+    if (key.leftArrow) {
+      if (key.ctrl) {
+        dispatch({ type: 'apply', state: moveWordLeft(state) });
+      } else {
+        dispatch({ type: 'apply', state: moveLeft(state) });
+      }
+      return;
+    }
+    if (key.rightArrow) {
+      if (key.ctrl) {
+        dispatch({ type: 'apply', state: moveWordRight(state) });
+      } else {
+        dispatch({ type: 'apply', state: moveRight(state) });
+      }
+      return;
+    }
+
+    if (key.ctrl && input === 'a') {
+      dispatch({ type: 'apply', state: { cursor: { index: 0, offset: 0 } } });
+      return;
+    }
+    if (key.ctrl && input === 'e') {
+      dispatch({ type: 'apply', state: { cursor: { index: state.segments.length, offset: 0 } } });
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      const next = key.backspace ? backspace(state) : deleteForward(state);
+      dispatch({ type: 'apply', state: next });
+      return;
+    }
+
+    if (key.ctrl && input === 'u') {
+      dispatch({ type: 'apply', state: { segments: [], cursor: { index: 0, offset: 0 } } });
+      return;
+    }
+
+    if (key.ctrl && input === 'w') {
+      const next = backspace(moveWordLeft(state));
+      dispatch({ type: 'apply', state: next });
+      return;
+    }
+
+    if (!key.ctrl && !key.meta && input) {
+      if (input.includes('\n')) {
+        const lineCount = input.split('\n').length;
+        if (lineCount >= PASTE_BADGE_THRESHOLD) {
+          const next = insertBadge(state, { type: 'paste', text: input });
+          dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+          return;
+        }
+      }
+      const next = insertText(state, input);
+      dispatch({ type: 'apply', state: { ...next, historyIdx: -1 } });
+    }
+  }, [disabled, handleSubmit, navigateHistory, state]);
+
+  const handleOverlayInput = useCallback((input: string, key: InputKey) => {
+    if (disabled) return;
+    const current = overlayStateRef.current;
+
+    if ((key.ctrl || key.meta) && (input === 'v' || input === '\u0016')) {
+      void handleClipboardImagePaste('overlay');
+      return;
+    }
+
+    if (key.return && !key.shift) {
+      const serialized = serializeSegments(current.segments).trim();
+      if (serialized) {
+        const plainText = getPlainText(current.segments).trim();
+        const isCommand = current.segments.length === 1 && current.segments[0].type === 'text' && plainText.startsWith('/');
+        if (isCommand) {
+          const parts = plainText.slice(1).split(/\s+/);
+          const cmd = parts[0];
+          const args = parts.slice(1);
+          onCommand?.(cmd, args);
+        } else {
+          onSubmit(serialized);
+        }
+        if (historyEnabled) {
+          current.history = [...current.history.slice(-100), serialized];
+        }
+      }
+      overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (key.return && key.shift) {
+      overlayStateRef.current = { ...insertText(current, '\n'), historyIdx: -1 };
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (key.upArrow || key.downArrow) {
+      const direction = key.upArrow ? 'up' : 'down';
+      if (historyEnabled && current.history.length > 0) {
+        let newIdx: number;
+        if (direction === 'up') {
+          newIdx = current.historyIdx === -1 ? current.history.length - 1 : Math.max(0, current.historyIdx - 1);
+        } else {
+          newIdx = current.historyIdx === -1 ? -1 : current.historyIdx + 1;
+          if (newIdx >= current.history.length) newIdx = -1;
+        }
+        if (newIdx === -1) {
+          overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+        } else {
+          const historyValue = current.history[newIdx];
+          overlayStateRef.current = {
+            ...current,
+            historyIdx: newIdx,
+            segments: historyValue.length > 0 ? [{ type: 'text', text: historyValue }] : [],
+            cursor: { index: historyValue.length > 0 ? 0 : 0, offset: historyValue.length }
+          };
+        }
+        renderOverlay(overlayStateRef.current);
+      }
+      return;
+    }
+
+    if (key.leftArrow) {
+      if (key.ctrl) {
+        overlayStateRef.current = moveWordLeft(current);
+      } else {
+        overlayStateRef.current = moveLeft(current);
+      }
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (key.rightArrow) {
+      if (key.ctrl) {
+        overlayStateRef.current = moveWordRight(current);
+      } else {
+        overlayStateRef.current = moveRight(current);
+      }
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (key.ctrl && input === 'a') {
+      overlayStateRef.current = { ...current, cursor: { index: 0, offset: 0 } };
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (key.ctrl && input === 'e') {
+      overlayStateRef.current = { ...current, cursor: { index: current.segments.length, offset: 0 } };
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (key.backspace || key.delete) {
+      overlayStateRef.current = key.backspace ? backspace(current) : deleteForward(current);
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (key.ctrl && input === 'u') {
+      overlayStateRef.current = { ...createEmptyState(), history: current.history, historyIdx: -1 };
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (key.ctrl && input === 'w') {
+      overlayStateRef.current = backspace(moveWordLeft(current));
+      renderOverlay(overlayStateRef.current);
+      return;
+    }
+
+    if (!key.ctrl && !key.meta && input) {
+      if (input.includes('\n')) {
+        const lineCount = input.split('\n').length;
+        if (lineCount >= PASTE_BADGE_THRESHOLD) {
+          overlayStateRef.current = insertBadge(current, { type: 'paste', text: input });
+        } else {
+          overlayStateRef.current = insertText(current, input);
+        }
+      } else {
+        overlayStateRef.current = insertText(current, input);
+      }
+      overlayStateRef.current = { ...overlayStateRef.current, historyIdx: -1 };
+      renderOverlay(overlayStateRef.current);
+    }
+  }, [disabled, historyEnabled, onCommand, onSubmit, renderOverlay]);
+
+  useInput((input, key) => {
+    if (overlayEnabled) {
+      handleOverlayInput(input, key);
+      return;
+    }
+    handleInput(input, key);
+  });
+
+  React.useEffect(() => {
+    if (!inputBus) return;
+    return inputBus.subscribe(({ input, key }) => {
+      if (overlayEnabled) {
+        handleOverlayInput(input, key);
+        return;
+      }
+      handleInput(input, key);
+    });
+  }, [handleInput, handleOverlayInput, inputBus, overlayEnabled]);
+
+  React.useEffect(() => {
+    if (!overlayEnabled) return;
+    renderOverlay(overlayStateRef.current);
+  }, [overlayEnabled, renderOverlay]);
+
+  const node = buildInputAreaView({
+    state,
+    placeholder,
+    disabled,
+    commands,
+    cols,
+    badgePreview,
+    showBadgePreview: true,
+    debug,
+    renderContent: !overlayEnabled
+  });
+
+  return <InkNode node={node} />;
+};
+
+export default InputArea;

package/src/components/MessageList.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Message } from '../types.js';
+import { InkNode } from '../ui/ink/index.js';
+import { buildMessageListView } from '../ui/views/message_list.js';
+
+interface MessageListProps {
+  messages: Message[];
+  height: number;
+  maxMessages?: number;
+  debug?: boolean;
+  expandToolOutputs?: boolean;
+}
+
+export const MessageList: React.FC<MessageListProps> = ({ 
+  messages, 
+  height,
+  maxMessages = 50,
+  debug = false,
+  expandToolOutputs = false
+}) => {
+  const node = buildMessageListView({ messages, height, maxMessages, debug, expandToolOutputs });
+  return <InkNode node={node} />;
+};
+
+export default MessageList;

package/src/components/StatusBar.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { AgentState } from '../types.js';
+import { InkNode } from '../ui/ink/index.js';
+import { buildStatusBarView } from '../ui/views/status_bar.js';
+
+interface StatusBarProps {
+  state: AgentState;
+  sessionId?: string;
+  version?: string;
+  connectionStatus?: 'connected' | 'disconnected' | 'connecting';
+  contextLength?: number;
+  contextEstimated?: boolean;
+  provider?: string;
+  model?: string;
+  emulationId?: string;
+  toast?: string | null;
+  debug?: boolean;
+}
+
+export const StatusBar: React.FC<StatusBarProps> = ({ 
+  state, 
+  sessionId,
+  version = '0.1.0',
+  connectionStatus = 'connected',
+  contextLength,
+  contextEstimated,
+  provider,
+  model,
+  emulationId,
+  toast,
+  debug = false
+}) => {
+  const node = buildStatusBarView({
+    state,
+    sessionId,
+    version,
+    connectionStatus,
+    contextLength,
+    contextEstimated,
+    provider,
+    model,
+    emulationId,
+    toast,
+    debug
+  });
+  return <InkNode node={node} />;
+};
+
+export default StatusBar;

package/src/components/index.tsx

@@ -0,0 +1,6 @@
+// Component exports
+export { Header } from './Header.js';
+export { MessageList } from './MessageList.js';
+export { InputArea } from './InputArea.js';
+export { StatusBar } from './StatusBar.js';
+export { FullScreen, useScreenSize } from './FullScreen.js';

package/src/config/types.ts

@@ -0,0 +1,11 @@
+export interface ZTCConfig {
+  apiKey?: string;
+  apiKeys?: Record<string, string>;
+  provider?: string;
+  openaiCompatibleBaseUrl?: string;
+  model: string;
+  maxTokens: number;
+  zergEndpoint?: string;
+  emulationId?: string;
+  toolPermissions?: Partial<Record<'file_read' | 'file_write' | 'shell_exec' | 'network', boolean>>;
+}