zerg-ztc 0.1.0

package/src/ui/views/app.ts

@@ -0,0 +1,99 @@
+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';
+
+interface AppViewProps {
+  messages: Message[];
+  agentState: AgentState;
+  inputState: InputState;
+  sessionId: string;
+  cols: number;
+  rows: number;
+  commands: Array<{ name: string; description: string; usage?: string }>;
+  hasApiKey: boolean;
+  contextLength?: number;
+  contextEstimated?: boolean;
+  provider?: string;
+  model?: string;
+  emulationId?: string;
+  toast?: string | null;
+  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,
+  contextLength,
+  contextEstimated,
+  provider,
+  model,
+  emulationId,
+  toast,
+  debug = false,
+  expandToolOutputs = false
+}: AppViewProps): LayoutNode {
+  const suggestionLines = 4;
+  const headerHeight = 6; // logo row + meta row + padding
+  const statusHeight = 1;
+  const inputLineCount = estimateInputLines(inputState.segments, cols);
+  const previewLines = estimateBadgePreviewLines(inputState);
+  const maxInputLines = Math.max(1, rows - (headerHeight + statusHeight + suggestionLines + 5));
+  const inputHeight = Math.min(Math.max(1, inputLineCount + previewLines), maxInputLines) + suggestionLines;
+  const contentHeight = Math.max(rows - (headerHeight + inputHeight + statusHeight), 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: '0.1.0', debug }),
+    buildMessageListView({ messages, height: contentHeight, debug, expandToolOutputs }),
+    buildStatusBarView({
+      state: agentState,
+      sessionId,
+      version: '0.1.0',
+      connectionStatus: hasApiKey ? 'connected' : 'disconnected',
+      contextLength,
+      contextEstimated,
+      provider,
+      model,
+      emulationId,
+      toast,
+      debug
+    }),
+    buildInputAreaView({
+      state: inputState,
+      placeholder,
+      disabled: agentState.status !== 'idle' && agentState.status !== 'error',
+      commands,
+      cols,
+      debug
+    })
+  ], { flexDirection: 'column' });
+}

package/src/ui/views/header.ts

@@ -0,0 +1,42 @@
+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('ZTC', { color: 'gray', dimColor: true })
+    ], {
+      flexDirection: 'column'
+    }),
+    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: 'column',
+    justifyContent: 'space-between',
+    paddingX: 1,
+    paddingY: 1
+  });
+}

package/src/ui/views/input_area.ts

@@ -0,0 +1,244 @@
+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
+  });
+
+  const suggestions = box(
+    Array.from({ length: suggestionLines }).map((_, index) => {
+      const cmd = commandMatches[index];
+      if (!cmd) return text(' ');
+      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 }
+  );
+
+  const previewLines = showBadgePreview && badgePreview && badgePreview.length > 0
+    ? box(badgePreview.map(line => text(line, { color: 'gray', dimColor: true })), {
+        flexDirection: 'column',
+        paddingX: 2
+      })
+    : null;
+
+  return box(
+    previewLines ? [inputLine, previewLines, suggestions] : [inputLine, suggestions],
+    { flexDirection: 'column', flexShrink: 0 }
+  );
+}