zerg-ztc 0.1.11 → 0.1.12

package/src/ui/views/activity_line.ts

@@ -1,33 +0,0 @@
-import { AgentState } from '../../types.js';
-import { box, text, LayoutNode } from '../core/index.js';
-
-interface ActivityLineProps {
-  state: AgentState;
-  spinnerLabel?: string | null;
-  spinnerFrame?: string | null;
-  inputMode?: 'queue' | 'interrupt';
-}
-
-export function buildActivityLineView({
-  state,
-  spinnerLabel,
-  spinnerFrame,
-  inputMode
-}: ActivityLineProps): LayoutNode {
-  const active = state.status === 'thinking' || state.status === 'streaming';
-  if (!active || !spinnerLabel) {
-    return box([], { height: 0 });
-  }
-  const frame = spinnerFrame || '✽';
-  const hint = inputMode === 'interrupt' ? ' (esc to interrupt)' : '';
-  return box([
-    text(`${frame} ${spinnerLabel}…${hint}`, { color: 'yellow' })
-  ], {
-    flexDirection: 'row',
-    paddingX: 2,
-    paddingY: 0,
-    marginTop: 1,
-    marginBottom: 1,
-    height: 1
-  });
-}

package/src/ui/views/app.ts

@@ -1,111 +0,0 @@
-import { Message, AgentState } from '../../types.js';
-import { InputState } from '../core/input_state.js';
-import { box, LayoutNode } from '../core/index.js';
-import { buildHeaderView } from './header.js';
-import { buildMessageListView } from './message_list.js';
-import { buildInputAreaView, estimateInputLines } from './input_area.js';
-import { buildStatusBarView } from './status_bar.js';
-import { buildActivityLineView } from './activity_line.js';
-
-interface AppViewProps {
-  messages: Message[];
-  agentState: AgentState;
-  inputState: InputState;
-  sessionId: string;
-  cols: number;
-  rows: number;
-  commands: Array<{ name: string; description: string; usage?: string }>;
-  hasApiKey: boolean;
-  version?: string;
-  contextLength?: number;
-  contextEstimated?: boolean;
-  provider?: string;
-  model?: string;
-  emulationId?: string;
-  toast?: string | null;
-  spinnerLabel?: string | null;
-  spinnerFrame?: string | null;
-  inputMode?: 'queue' | 'interrupt';
-  debug?: boolean;
-  expandToolOutputs?: boolean;
-}
-
-function estimateBadgePreviewLines(state: InputState): number {
-  const segment = state.segments[state.cursor.index];
-  if (!segment || segment.type === 'text') return 0;
-  if (segment.type === 'paste') {
-    const lines = segment.text.split('\n');
-    return Math.min(3, lines.length) + (lines.length > 3 ? 1 : 0);
-  }
-  if (segment.type === 'image') {
-    return 16;
-  }
-  return 1;
-}
-
-export function buildAppView({
-  messages,
-  agentState,
-  inputState,
-  sessionId,
-  cols,
-  rows,
-  commands,
-  hasApiKey,
-  version = '0.1.0',
-  contextLength,
-  contextEstimated,
-  provider,
-  model,
-  emulationId,
-  inputMode,
-  toast,
-  spinnerLabel,
-  spinnerFrame,
-  debug = false,
-  expandToolOutputs = false
-}: AppViewProps): LayoutNode {
-  const suggestionLines = 4;
-  const headerHeight = 1;
-  const statusHeight = 1;
-  const activityHeight = (agentState.status === 'thinking' || agentState.status === 'streaming') && spinnerLabel ? 3 : 0;
-  const inputLineCount = estimateInputLines(inputState.segments, cols);
-  const previewLines = estimateBadgePreviewLines(inputState);
-  const maxInputLines = Math.max(1, rows - (headerHeight + statusHeight + activityHeight + suggestionLines + 5));
-  const inputHeight = Math.min(Math.max(1, inputLineCount + previewLines), maxInputLines) + suggestionLines;
-  const contentHeight = Math.max(rows - (headerHeight + inputHeight + statusHeight + activityHeight), 5);
-
-  const placeholder = !hasApiKey ? 'Set API key with /config key <key>' :
-    agentState.status === 'thinking' ? 'Thinking...' :
-    agentState.status === 'tool_use' ? `Running ${agentState.currentTool}...` :
-    agentState.status === 'streaming' ? 'Streaming response...' :
-    'Type a message or /help for commands...';
-
-  return box([
-    buildHeaderView({ version, debug }),
-    buildMessageListView({ messages, height: contentHeight, debug, expandToolOutputs }),
-    buildActivityLineView({ state: agentState, spinnerLabel, spinnerFrame, inputMode }),
-    buildInputAreaView({
-      state: inputState,
-      placeholder,
-      disabled: agentState.status !== 'idle' && agentState.status !== 'error',
-      commands,
-      cols,
-      debug
-    }),
-    buildStatusBarView({
-      state: agentState,
-      sessionId,
-      version,
-      connectionStatus: hasApiKey ? 'connected' : 'disconnected',
-      contextLength,
-      contextEstimated,
-      provider,
-      model,
-      emulationId,
-      inputMode,
-      toast,
-      debug
-    })
-  ], { flexDirection: 'column' });
-}

package/src/ui/views/header.ts

@@ -1,44 +0,0 @@
-import { box, text, LayoutNode } from '../core/index.js';
-
-interface HeaderProps {
-  title?: string;
-  version?: string;
-  dateLabel?: string;
-  showHelp?: boolean;
-  debug?: boolean;
-}
-
-export function buildHeaderView({
-  title = 'Zerg Terminal Client',
-  version = '0.1.0',
-  dateLabel,
-  showHelp = true,
-  debug = false
-}: HeaderProps): LayoutNode {
-  return box([
-    box([
-      text(title, { bold: true }),
-      text(' ', {}),
-      text('ZTC', { color: 'gray', dimColor: true })
-    ], { flexDirection: 'row' }),
-    showHelp
-      ? box([
-          dateLabel ? text(dateLabel, { color: 'gray', dimColor: true }) : text('', {}),
-          dateLabel ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
-          text(`v${version}`, { color: 'gray', dimColor: true }),
-          text(' • ', { color: 'gray', dimColor: true }),
-          text('Ctrl+C exit', { color: 'gray', dimColor: true }),
-          text(' • ', { color: 'gray', dimColor: true }),
-          text('/help', { color: 'gray', dimColor: true })
-        ], { flexDirection: 'row' })
-      : box([], { flexDirection: 'row' })
-  ], {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingX: 1,
-    flexShrink: 0,
-    borderStyle: 'single',
-    borderColor: debug ? 'cyan' : 'gray',
-    marginBottom: 1
-  });
-}

package/src/ui/views/input_area.ts

@@ -1,255 +0,0 @@
-import { InputState, InputSegment } from '../core/input_state.js';
-import { box, text, LayoutNode } from '../core/index.js';
-
-interface InputAreaViewProps {
-  state: InputState;
-  placeholder: string;
-  disabled?: boolean;
-  commands?: Array<{
-    name: string;
-    description: string;
-    usage?: string;
-  }>;
-  cols?: number;
-  badgePreview?: string[] | null;
-  showBadgePreview?: boolean;
-  debug?: boolean;
-  renderContent?: boolean;
-}
-
-const suggestionLines = 4;
-const promptPrefix = '❯ ';
-const promptWidth = promptPrefix.length;
-
-interface RenderToken {
-  text: string;
-  style?: { color?: string; dimColor?: boolean; bold?: boolean; inverse?: boolean; badge?: {
-    type: 'paste' | 'file' | 'image';
-    preview: string;
-    full: string;
-    path?: string;
-  } };
-}
-
-function badgeLabel(segment: InputSegment): string {
-  switch (segment.type) {
-    case 'paste': {
-      const lines = segment.text.split('\n').length;
-      return `[pasted ${lines} line${lines === 1 ? '' : 's'}]`;
-    }
-    case 'file':
-      return `[file ${segment.path}]`;
-    case 'image':
-      return `[image ${segment.path}]`;
-    default:
-      return '';
-  }
-}
-
-function badgePreview(segment: InputSegment): { preview: string; full: string; path?: string; type: 'paste' | 'file' | 'image' } {
-  switch (segment.type) {
-    case 'paste': {
-      const lines = segment.text.split('\n');
-      const previewLines = lines.slice(0, 3).join('\n');
-      const suffix = lines.length > 3 ? '\n…' : '';
-      return { type: 'paste', preview: previewLines + suffix, full: segment.text };
-    }
-    case 'image':
-      return { type: 'image', preview: `Image: ${segment.path}`, full: segment.path, path: segment.path };
-    case 'file':
-      return { type: 'file', preview: `File: ${segment.path}`, full: segment.path, path: segment.path };
-    default:
-      return { type: 'file', preview: 'File: (unknown)', full: '' };
-  }
-}
-
-export function buildRenderTokens(segments: InputSegment[]): RenderToken[] {
-  return segments.map(segment => {
-    if (segment.type === 'text') {
-      return { text: segment.text };
-    }
-    const badge = badgePreview(segment);
-    return { text: badgeLabel(segment), style: { color: 'yellow', dimColor: true, badge } };
-  });
-}
-
-export function wrapInputSegments(
-  segments: InputSegment[],
-  cursor: { index: number; offset: number },
-  cols: number,
-  prefixWidth = promptWidth
-): { lines: RenderToken[][]; cursorLine: number; cursorCol: number } {
-  const wrapWidth = Math.max(10, cols - prefixWidth - 2);
-  const tokens = buildRenderTokens(segments);
-  let cursorPos = 0;
-  let pos = 0;
-  for (let i = 0; i < segments.length; i += 1) {
-    const segment = segments[i];
-    const tokenText = tokens[i].text;
-    if (i === cursor.index) {
-      if (segment.type === 'text') {
-        cursorPos = pos + cursor.offset;
-      } else {
-        cursorPos = pos + (cursor.offset > 0 ? tokenText.length : 0);
-      }
-    }
-    pos += tokenText.length;
-  }
-  if (cursor.index === segments.length) {
-    cursorPos = pos;
-  }
-
-  const lines: RenderToken[][] = [[]];
-  let lineIndex = 0;
-  let col = 0;
-  let cursorLine = 0;
-  let cursorCol = 0;
-  let globalPos = 0;
-
-  for (const token of tokens) {
-    const textValue = token.text || '';
-    for (let i = 0; i < textValue.length; i += 1) {
-      if (globalPos === cursorPos) {
-        cursorLine = lineIndex;
-        cursorCol = col;
-      }
-      const ch = textValue[i];
-      if (ch === '\n') {
-        lineIndex += 1;
-        lines.push([]);
-        col = 0;
-        globalPos += 1;
-        continue;
-      }
-      if (col >= wrapWidth) {
-        lineIndex += 1;
-        lines.push([]);
-        col = 0;
-      }
-      lines[lineIndex].push({ text: ch, style: token.style });
-      col += 1;
-      globalPos += 1;
-    }
-  }
-
-  if (cursorPos === globalPos) {
-    cursorLine = lineIndex;
-    cursorCol = col;
-  }
-
-  return { lines, cursorLine, cursorCol };
-}
-
-export function estimateInputLines(segments: InputSegment[], cols: number): number {
-  return wrapInputSegments(segments, { index: segments.length, offset: 0 }, cols).lines.length;
-}
-
-export function buildInputAreaView({
-  state,
-  placeholder,
-  disabled = false,
-  commands = [],
-  cols = 80,
-  badgePreview,
-  showBadgePreview = false,
-  debug = false,
-  renderContent = true
-}: InputAreaViewProps): LayoutNode {
-  if (!renderContent) {
-    return box([text('')], { flexDirection: 'column', flexShrink: 0, height: 5 });
-  }
-  const truncate = (value: string, max: number) => (
-    value.length > max ? `${value.slice(0, max - 1)}…` : value
-  );
-  const promptColor = disabled ? 'gray' : 'blue';
-
-  const plainText = state.segments.length === 1 && state.segments[0].type === 'text'
-    ? state.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, suggestionLines)
-    : [];
-
-  let inputLines: LayoutNode[] = [];
-  if (disabled) {
-    inputLines = [
-      box([
-        text(promptPrefix, { color: promptColor, bold: true }),
-        text(placeholder, { color: 'gray', dimColor: true })
-      ], { flexDirection: 'row' })
-    ];
-  } else if (state.segments.length === 0) {
-    inputLines = [
-      box([
-        text(promptPrefix, { color: promptColor, bold: true }),
-        box([
-          text('|', { inverse: true }),
-          text(placeholder, { color: 'gray', dimColor: true })
-        ], { flexDirection: 'row' })
-      ], { flexDirection: 'row' })
-    ];
-  } else {
-    const wrapped = wrapInputSegments(state.segments, state.cursor, cols, promptWidth);
-    inputLines = wrapped.lines.map((line, index) => {
-      const prefix = index === 0 ? promptPrefix : '  ';
-      const segments: LayoutNode[] = [text(prefix, { color: promptColor, bold: index === 0 })];
-      line.forEach((token, tokenIndex) => {
-        if (index === wrapped.cursorLine && tokenIndex === wrapped.cursorCol) {
-          segments.push(text(token.text || ' ', { inverse: true, ...token.style }));
-        } else {
-          segments.push(text(token.text, token.style));
-        }
-      });
-      if (index === wrapped.cursorLine && wrapped.cursorCol === line.length) {
-        segments.push(text(' ', { inverse: true }));
-      }
-      return box(segments, { flexDirection: 'row' });
-    });
-  }
-
-  const inputLine = box(inputLines, {
-    flexDirection: 'column',
-    paddingX: 1,
-    borderStyle: debug ? 'round' : undefined,
-    borderColor: debug ? (disabled ? 'gray' : 'blue') : undefined
-  });
-
-  // Only render suggestion lines if there are actual command matches
-  const suggestions = commandMatches.length > 0
-    ? box(
-        commandMatches.map((cmd) => {
-          const usage = cmd.usage ? ` ${truncate(cmd.usage, 36)}` : '';
-          return box([
-            text(`/${cmd.name}`, { color: 'cyan', bold: true }),
-            text(usage, { color: 'white' }),
-            text(` — ${truncate(cmd.description, 48)}`, { color: 'gray', dimColor: true })
-          ], { flexDirection: 'row' });
-        }),
-        { flexDirection: 'column', paddingX: 2 }
-      )
-    : null;
-
-  const previewLines = showBadgePreview && badgePreview && badgePreview.length > 0
-    ? box(badgePreview.map(line => text(line, { color: 'gray', dimColor: true })), {
-        flexDirection: 'column',
-        paddingX: 2
-      })
-    : null;
-
-  // Horizontal separator lines
-  const separatorTop = text('─'.repeat(Math.max(10, cols - 2)), { color: 'gray', dimColor: true });
-  const separatorBottom = text('─'.repeat(Math.max(10, cols - 2)), { color: 'gray', dimColor: true });
-
-  // Build the content array, filtering out nulls
-  const content: LayoutNode[] = [separatorTop, inputLine];
-  if (previewLines) content.push(previewLines);
-  if (suggestions) content.push(suggestions);
-  content.push(separatorBottom);
-
-  return box(content, {
-    flexDirection: 'column',
-    flexShrink: 0
-  });
-}