zerg-ztc 0.1.11 → 0.1.12

package/src/ui/views/message_list.ts

@@ -1,443 +0,0 @@
-import { Message, MessageRole, ToolCall } from '../../types.js';
-import { box, text, LayoutNode } from '../core/index.js';
-
-function formatTime(date: Date): string {
-  return date.toLocaleTimeString('en-US', { 
-    hour: '2-digit', 
-    minute: '2-digit',
-    hour12: false 
-  });
-}
-
-function toDate(value?: Date | string): Date | null {
-  if (!value) return null;
-  if (value instanceof Date) return value;
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return null;
-  return parsed;
-}
-
-function truncate(str: string, maxLen: number): string {
-  if (str.length <= maxLen) return str;
-  return str.slice(0, maxLen - 3) + '...';
-}
-
-interface RoleConfig {
-  icon: string;
-  color: string;
-  label: string;
-}
-
-const roleConfigs: Record<MessageRole, RoleConfig> = {
-  user: { icon: '❯', color: 'blue', label: 'You' },
-  assistant: { icon: '◆', color: 'magenta', label: 'Zerg' },
-  tool: { icon: '⏺', color: 'yellow', label: 'Trace' },
-  system: { icon: '●', color: 'gray', label: 'System' }
-};
-
-function toolCallView(tool: ToolCall): LayoutNode {
-  const statusIcons = {
-    pending: '○',
-    running: '◐',
-    complete: '●',
-    error: '✗'
-  };
-  
-  const statusColors = {
-    pending: 'gray',
-    running: 'yellow',
-    complete: 'green',
-    error: 'red'
-  } as const;
-
-  const icon = statusIcons[tool.status];
-  const color = statusColors[tool.status];
-
-  let duration = '';
-  const started = toDate(tool.startedAt);
-  const completed = toDate(tool.completedAt);
-  if (started && completed) {
-    const ms = completed.getTime() - started.getTime();
-    duration = ms < 1000 ? `${ms}ms` : `${(ms / 1000).toFixed(1)}s`;
-  }
-
-  const extra = tool.result ? renderToolResult(tool) : null;
-
-  return box([
-    box([
-      text(`${icon} `, { color }),
-      text(tool.name, { color: 'cyan', bold: true }),
-      text(` (${tool.id.slice(0, 8)})`, { color: 'gray', dimColor: true }),
-      duration ? text(` [${duration}]`, { color: 'gray', dimColor: true }) : text('', {})
-    ], { flexDirection: 'row' }),
-    tool.result
-      ? extra || box([
-          text('→ ', { color: 'green' }),
-          text(truncate(tool.result, 80))
-        ], { flexDirection: 'row', marginLeft: 2 })
-      : box([], {}),
-    tool.error
-      ? box([
-          text('✗ ', { color: 'red' }),
-          text(truncate(tool.error, 80), { color: 'red' })
-        ], { flexDirection: 'row', marginLeft: 2 })
-      : box([], {})
-  ], { flexDirection: 'column', marginLeft: 2 });
-}
-
-function parseJson(raw?: string): Record<string, unknown> | null {
-  if (!raw) return null;
-  try {
-    const data = JSON.parse(raw) as Record<string, unknown>;
-    if (data && typeof data === 'object') return data;
-  } catch {
-    return null;
-  }
-  return null;
-}
-
-function renderDiffLines(diff: string, maxLines = 12): LayoutNode {
-  const lines = diff.split('\n').slice(0, maxLines);
-  return box(lines.map(line => {
-    if (line.startsWith('+')) {
-      return text(line, { color: 'green' });
-    }
-    if (line.startsWith('-')) {
-      return text(line, { color: 'red' });
-    }
-    return text(line, { color: 'gray', dimColor: true });
-  }), { flexDirection: 'column', marginLeft: 2 });
-}
-
-function renderToolResult(tool: ToolCall): LayoutNode | null {
-  const parsed = parseJson(tool.result);
-  if (!parsed) return null;
-
-  if (tool.name === 'read_file') {
-    const path = String(parsed.path || '');
-    const size = parsed.size ? `${parsed.size} bytes` : 'unknown size';
-    const content = String(parsed.content || '');
-    const truncatedFlag = parsed.truncated ? ' (truncated)' : '';
-    const previewLines = content.split('\n').slice(0, 6);
-    return box([
-      box([
-        text('→ ', { color: 'green' }),
-        text(`Read ${path} (${size})${truncatedFlag}`, { color: 'green' })
-      ], { flexDirection: 'row', marginLeft: 2 }),
-      box(previewLines.map(line => text(line, { color: 'gray' })), { flexDirection: 'column', marginLeft: 4 })
-    ], { flexDirection: 'column' });
-  }
-
-  if (tool.name === 'write_file') {
-    const path = String(parsed.path || '');
-    const action = String(parsed.action || 'written');
-    const diff = typeof parsed.diff === 'string' ? parsed.diff : '';
-    return box([
-      box([
-        text('→ ', { color: 'green' }),
-        text(`Wrote ${path} (${action})`, { color: 'green' })
-      ], { flexDirection: 'row', marginLeft: 2 }),
-      diff ? renderDiffLines(diff) : box([text('(no diff)', { color: 'gray', dimColor: true })], { marginLeft: 4 })
-    ], { flexDirection: 'column' });
-  }
-
-  if (tool.name === 'search') {
-    const path = String(parsed.path || '');
-    const count = Number(parsed.count || 0);
-    const matches = Array.isArray(parsed.matches) ? parsed.matches : [];
-    const preview = matches.slice(0, 6).map((entry: unknown) => {
-      if (entry && typeof entry === 'object') {
-        const row = entry as Record<string, unknown>;
-        const file = String(row.path || '');
-        const line = row.line ? `:${row.line}` : '';
-        const textValue = String(row.text || '');
-        return `${file}${line} ${textValue}`.trim();
-      }
-      return '';
-    }).filter(Boolean);
-    return box([
-      box([
-        text('→ ', { color: 'green' }),
-        text(`Found ${count} matches${path ? ` in ${path}` : ''}`, { color: 'green' })
-      ], { flexDirection: 'row', marginLeft: 2 }),
-      box(preview.map(line => text(line, { color: 'gray' })), { flexDirection: 'column', marginLeft: 4 })
-    ], { flexDirection: 'column' });
-  }
-
-  if (tool.name === 'list_directory') {
-    const path = String(parsed.path || '');
-    const entries = Array.isArray(parsed.entries) ? parsed.entries : [];
-    const names = entries
-      .map(entry => entry && typeof entry === 'object' && 'name' in entry ? String((entry as Record<string, unknown>).name) : '')
-      .filter(Boolean)
-      .slice(0, 8);
-    return box([
-      box([
-        text('→ ', { color: 'green' }),
-        text(`Listed ${path} (${entries.length} items)`, { color: 'green' })
-      ], { flexDirection: 'row', marginLeft: 2 }),
-      box(names.map(name => text(`- ${name}`, { color: 'gray' })), { flexDirection: 'column', marginLeft: 4 })
-    ], { flexDirection: 'column' });
-  }
-
-  return null;
-}
-
-function renderInlineMarkdown(line: string): LayoutNode {
-  const parts: Array<{ text: string; bold?: boolean; dim?: boolean }> = [];
-  let rest = line;
-  let matchedBold = false;
-
-  const pushPlain = (text: string) => {
-    if (text) parts.push({ text });
-  };
-
-  while (rest.length > 0) {
-    const boldStart = rest.indexOf('**');
-    if (boldStart === -1) {
-      pushPlain(rest);
-      break;
-    }
-    pushPlain(rest.slice(0, boldStart));
-    const afterStart = rest.slice(boldStart + 2);
-    const boldEnd = afterStart.indexOf('**');
-    if (boldEnd === -1) {
-      pushPlain(rest);
-      break;
-    }
-    const boldText = afterStart.slice(0, boldEnd);
-    if (boldText) {
-      matchedBold = true;
-      parts.push({ text: boldText, bold: true });
-    }
-    rest = afterStart.slice(boldEnd + 2);
-  }
-
-  if (!matchedBold && line.includes('**')) {
-    return text(line.replace(/\*\*/g, ''), {});
-  }
-
-  return box(
-    parts.map(part => text(part.text, { bold: part.bold, dimColor: part.dim })),
-    { flexDirection: 'row' }
-  );
-}
-
-function renderMarkdownLine(line: string): LayoutNode {
-  const trimmed = line.trimStart();
-  if (trimmed.startsWith('### ')) {
-    return text(trimmed.slice(4), { bold: true, color: 'cyan' });
-  }
-  if (trimmed.startsWith('## ')) {
-    return text(trimmed.slice(3), { bold: true, color: 'cyan' });
-  }
-  if (trimmed.startsWith('# ')) {
-    return text(trimmed.slice(2), { bold: true, color: 'cyan' });
-  }
-  return renderInlineMarkdown(line);
-}
-
-function isTableSeparator(line: string): boolean {
-  const trimmed = line.trim();
-  return trimmed.startsWith('|') && trimmed.endsWith('|') && /^[|\-\s:]+$/.test(trimmed);
-}
-
-function splitTableRow(line: string): string[] {
-  const trimmed = line.trim();
-  const parts = trimmed.replace(/^\|/, '').replace(/\|$/, '').split('|');
-  return parts.map(part => part.replace(/\*\*/g, '').trim());
-}
-
-function renderTable(lines: string[]): LayoutNode[] {
-  if (lines.length < 2) return [];
-  const header = splitTableRow(lines[0]);
-  const rows = lines.slice(2).map(splitTableRow);
-  const allRows = [header, ...rows];
-  const widths: number[] = [];
-  allRows.forEach(row => {
-    row.forEach((cell, idx) => {
-      const len = cell.length;
-      widths[idx] = Math.max(widths[idx] || 0, len);
-    });
-  });
-
-  const formatRow = (row: string[]) => {
-    const cells = row.map((cell, idx) => cell.padEnd(widths[idx] || 0));
-    return `| ${cells.join(' | ')} |`;
-  };
-
-  const rendered: LayoutNode[] = [];
-  rendered.push(text(formatRow(header), { bold: true }));
-  const sep = `| ${widths.map(w => '-'.repeat(Math.max(3, w))).join(' | ')} |`;
-  rendered.push(text(sep, { color: 'gray', dimColor: true }));
-  rows.forEach(row => {
-    rendered.push(text(formatRow(row), { color: 'gray' }));
-  });
-  return rendered;
-}
-
-function renderMarkdownLines(lines: string[]): LayoutNode[] {
-  const normalized: string[] = [];
-  let inCodeBlock = false;
-  lines.forEach(line => {
-    if (line.trim().startsWith('```')) {
-      inCodeBlock = !inCodeBlock;
-      normalized.push(line);
-      return;
-    }
-    if (inCodeBlock) {
-      normalized.push(line);
-      return;
-    }
-    if (line.includes('||') && line.includes('|')) {
-      const segments = line.split('||').map(segment => segment.trim()).filter(Boolean);
-      segments.forEach(segment => {
-        let out = segment;
-        if (!out.startsWith('|')) out = `| ${out}`;
-        if (!out.endsWith('|')) out = `${out} |`;
-        normalized.push(out);
-      });
-    } else {
-      // Preserve the original line - don't collapse whitespace as it breaks formatting
-      normalized.push(line);
-    }
-  });
-
-  const nodes: LayoutNode[] = [];
-  let i = 0;
-  while (i < normalized.length) {
-    const line = normalized[i];
-    const next = normalized[i + 1];
-    if (line && next && line.includes('|') && isTableSeparator(next)) {
-      const tableLines: string[] = [line, next];
-      let j = i + 2;
-      while (j < normalized.length && normalized[j].includes('|')) {
-        tableLines.push(normalized[j]);
-        j += 1;
-      }
-      nodes.push(...renderTable(tableLines));
-      i = j;
-      continue;
-    }
-    nodes.push(renderMarkdownLine(line));
-    i += 1;
-  }
-  return nodes;
-}
-
-function messageView(message: Message, expandToolOutputs = false): LayoutNode {
-  const config = roleConfigs[message.role];
-  const toolOutput = message.metadata && (message.metadata as Record<string, any>).toolOutput;
-  const content = toolOutput && expandToolOutputs && toolOutput.full
-    ? toolOutput.full
-    : toolOutput && toolOutput.preview
-      ? toolOutput.preview
-      : message.content;
-  const lines = content.split('\n');
-
-  return box([
-    box([
-      text(`${config.icon} ${config.label}`, { color: config.color, bold: true }),
-      text(` • ${formatTime(message.timestamp)}`, { color: 'gray', dimColor: true }),
-      message.isStreaming ? text(' ▌', { color: 'yellow', bold: true }) : text('', {})
-    ], { flexDirection: 'row' }),
-    box(renderMarkdownLines(lines), { flexDirection: 'column', marginLeft: 2 }),
-    message.toolCalls && message.toolCalls.length > 0
-      ? box(message.toolCalls.map(tool => toolCallView(tool)), { flexDirection: 'column' })
-      : box([], {})
-  ], { flexDirection: 'column', marginY: 1 });
-}
-
-function estimateMessageLines(message: Message): number {
-  const toolOutput = message.metadata && (message.metadata as Record<string, any>).toolOutput;
-  const content = toolOutput && toolOutput.preview ? toolOutput.preview : message.content;
-  const contentLines = content.split('\n').length;
-  const toolLines = message.toolCalls ? message.toolCalls.length * 3 : 0;
-  const headerLines = 1;
-  const margins = 2;
-  return headerLines + contentLines + toolLines + margins;
-}
-
-function clipMessage(message: Message, available: number): Message | null {
-  if (available <= 0) return null;
-  const headerLines = 1;
-  const margins = 2;
-  const remaining = available - headerLines - margins;
-  if (remaining <= 0) return null;
-
-  const toolOutput = message.metadata && (message.metadata as Record<string, any>).toolOutput;
-  const content = toolOutput && toolOutput.preview ? toolOutput.preview : message.content;
-  const lines = content.split('\n');
-  if (lines.length <= remaining) {
-    return message;
-  }
-  const clippedLines = lines.slice(-remaining);
-  if (clippedLines.length > 0) {
-    clippedLines[0] = `... ${clippedLines[0]}`;
-  }
-  return {
-    ...message,
-    content: clippedLines.join('\n'),
-    toolCalls: []
-  };
-}
-
-interface MessageListProps {
-  messages: Message[];
-  height?: number;
-  maxMessages?: number;
-  debug?: boolean;
-  expandToolOutputs?: boolean;
-  scrollback?: boolean;
-}
-
-export function buildMessageListView({
-  messages,
-  height,
-  maxMessages = 50,
-  debug = false,
-  expandToolOutputs = false,
-  scrollback = false
-}: MessageListProps): LayoutNode {
-  const recentMessages = messages.slice(-maxMessages);
-  let visibleMessages: Message[] = recentMessages;
-  if (!scrollback && typeof height === 'number') {
-    visibleMessages = [];
-    let remaining = height;
-    for (let i = recentMessages.length - 1; i >= 0; i -= 1) {
-      const msg = recentMessages[i];
-      const estimate = estimateMessageLines(msg);
-      if (estimate <= remaining) {
-        visibleMessages.unshift(msg);
-        remaining -= estimate;
-        continue;
-      }
-      if (visibleMessages.length === 0) {
-        const clipped = clipMessage(msg, remaining);
-        if (clipped) {
-          visibleMessages.unshift(clipped);
-        }
-      }
-      break;
-    }
-  }
-
-  return box([
-    !scrollback ? box([], { flexGrow: 1 }) : box([], {}),
-    box(visibleMessages.map(msg => messageView(msg, expandToolOutputs)), { flexDirection: 'column' }),
-    messages.length === 0
-      ? box([text('No messages yet. Type something to begin.', { color: 'gray', dimColor: true })], {
-          flexGrow: 1,
-          alignItems: 'center',
-          justifyContent: 'center'
-        })
-      : box([], {})
-  ], {
-    flexDirection: 'column',
-    height: scrollback ? undefined : height,
-    paddingX: 1,
-    flexGrow: scrollback ? undefined : 1,
-    borderStyle: debug ? 'single' : undefined,
-    borderColor: debug ? 'gray' : undefined
-  });
-}

package/src/ui/views/status_bar.ts

@@ -1,114 +0,0 @@
-import { AgentState, AgentStatus } from '../../types.js';
-import { box, text, LayoutNode } from '../core/index.js';
-
-interface StatusBarProps {
-  state: AgentState;
-  sessionId?: string;
-  version?: string;
-  connectionStatus?: 'connected' | 'disconnected' | 'connecting';
-  contextLength?: number;
-  contextEstimated?: boolean;
-  provider?: string;
-  model?: string;
-  emulationId?: string;
-  inputMode?: 'queue' | 'interrupt';
-  toast?: string | null;
-  spinnerLabel?: string | null;
-  debug?: boolean;
-}
-
-function getStatusConfig(state: AgentState) {
-  const configs: Record<AgentStatus, { icon: string; color: string; label: string }> = {
-    idle: { icon: '●', color: 'green', label: 'Ready' },
-    thinking: { icon: '◐', color: 'yellow', label: 'Thinking' },
-    tool_use: { icon: '⚙', color: 'cyan', label: `Tool: ${state.currentTool || 'unknown'}` },
-    streaming: { icon: '▸', color: 'magenta', label: 'Streaming' },
-    error: { icon: '✗', color: 'red', label: 'Error' }
-  };
-  return configs[state.status];
-}
-
-export function buildStatusBarView({
-  state,
-  sessionId,
-  version = '0.1.0',
-  connectionStatus = 'connected',
-  contextLength,
-  contextEstimated,
-  provider,
-  model,
-  emulationId,
-  inputMode,
-  toast,
-  spinnerLabel,
-  debug = false
-}: StatusBarProps): LayoutNode {
-  const config = getStatusConfig(state);
-  const isActive = state.status !== 'idle' && state.status !== 'error';
-  const useSpinnerLabel = spinnerLabel && (state.status === 'thinking' || state.status === 'streaming');
-  const label = useSpinnerLabel ? spinnerLabel : config.label;
-
-  const connectionColors = {
-    connected: 'green',
-    disconnected: 'red',
-    connecting: 'yellow'
-  } as const;
-
-  const connectionIcons = {
-    connected: '◉',
-    disconnected: '◯',
-    connecting: '◐'
-  };
-
-  const contextLabel = contextLength !== undefined
-    ? `${contextEstimated ? '~' : ''}ctx ${contextLength.toLocaleString()}`
-    : '';
-  const toastLabel = toast ? (toast.length > 60 ? `${toast.slice(0, 59)}…` : toast) : '';
-
-  return box([
-    box([
-      text(isActive ? '⠋' : config.icon, { color: config.color }),
-      text(` ${label}`, { color: config.color }),
-      state.error ? text(` - ${state.error}`, { color: 'red' }) : text('', {}),
-      toastLabel ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
-      toastLabel ? text(toastLabel, { color: 'yellow' }) : text('', {})
-    ], { flexDirection: 'row' }),
-    box([
-      text(connectionIcons[connectionStatus], { color: connectionColors[connectionStatus] }),
-      text(' ', { color: 'gray', dimColor: true }),
-      state.authError ? text('auth error', { color: 'red' }) : text('', {}),
-      state.authError ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
-      provider ? text(provider, { color: 'gray', dimColor: true }) : text('', {}),
-      provider && model ? text(' / ', { color: 'gray', dimColor: true }) : text('', {}),
-      model ? text(model, { color: 'gray', dimColor: true }) : text('', {}),
-      (provider || model) ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
-      emulationId ? text(`emu:${emulationId}`, { color: 'gray', dimColor: true }) : text('', {}),
-      emulationId ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
-      inputMode ? text(`mode:${inputMode}`, { color: 'gray', dimColor: true }) : text('', {}),
-      inputMode ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
-      state.tokensUsed !== undefined && state.tokensUsed > 0
-        ? text(`${state.tokensUsed.toLocaleString()} tok`, { color: 'gray', dimColor: true })
-        : text('', {}),
-      state.tokensUsed !== undefined && state.tokensUsed > 0
-        ? text(' • ', { color: 'gray', dimColor: true })
-        : text('', {}),
-      contextLength !== undefined
-        ? text(contextLabel, { color: 'gray', dimColor: true })
-        : text('', {}),
-      contextLength !== undefined
-        ? text(' • ', { color: 'gray', dimColor: true })
-        : text('', {}),
-      text(`ZTC v${version}`, { color: 'gray', dimColor: true }),
-      sessionId ? text(' • ', { color: 'gray', dimColor: true }) : text('', {}),
-      sessionId ? text(sessionId.slice(0, 8), { color: 'gray', dimColor: true }) : text('', {})
-    ], { flexDirection: 'row' })
-  ], {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingX: 1,
-    height: 1,
-    flexShrink: 0,
-    borderStyle: debug ? 'single' : undefined,
-    borderColor: debug ? 'gray' : undefined
-  });
-}

package/src/ui/vue/index.ts

@@ -1,53 +0,0 @@
-import { LayoutNode, TextNode } from '../core/types.js';
-
-type VNodeFactory = (type: string, props: Record<string, unknown> | null, children?: unknown) => unknown;
-
-function toVueStyle(style?: Record<string, unknown>): Record<string, unknown> {
-  return style ? { ...style } : {};
-}
-
-function renderText(h: VNodeFactory, node: TextNode): unknown {
-  const style: Record<string, unknown> = {
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-    fontSize: '14px',
-    lineHeight: '16px',
-    whiteSpace: 'pre'
-  };
-  if (node.style?.color) style.color = node.style.color;
-  if (node.style?.bold) style.fontWeight = 600;
-  if (node.style?.dimColor) style.opacity = 0.6;
-  if (node.style?.inverse) style.background = '#111';
-
-  return h('span', { style }, node.text);
-}
-
-export function renderToVue(h: VNodeFactory, node: LayoutNode): unknown {
-  if (node.type === 'text') {
-    return renderText(h, node);
-  }
-
-  const style = toVueStyle({
-    display: 'flex',
-    flexDirection: node.style?.flexDirection || 'column',
-    flexGrow: node.style?.flexGrow ?? 0,
-    flexShrink: node.style?.flexShrink ?? 0,
-    paddingLeft: node.style?.paddingX ?? node.style?.padding ?? 0,
-    paddingRight: node.style?.paddingX ?? node.style?.padding ?? 0,
-    paddingTop: node.style?.paddingY ?? node.style?.padding ?? 0,
-    paddingBottom: node.style?.paddingY ?? node.style?.padding ?? 0,
-    marginLeft: node.style?.marginX ?? node.style?.margin ?? 0,
-    marginRight: node.style?.marginX ?? node.style?.margin ?? 0,
-    marginTop: node.style?.marginY ?? node.style?.margin ?? 0,
-    marginBottom: node.style?.marginY ?? node.style?.margin ?? 0
-  });
-
-  if (node.style?.width !== undefined) style.width = `${node.style.width}px`;
-  if (node.style?.height !== undefined) style.height = `${node.style.height}px`;
-  if (node.style?.borderStyle) {
-    style.borderStyle = node.style.borderStyle;
-    style.borderWidth = '1px';
-    style.borderColor = node.style.borderColor || 'currentColor';
-  }
-
-  return h('div', { style }, node.children.map(child => renderToVue(h, child)));
-}