zerg-ztc 0.1.4 → 0.1.6

package/src/ui/views/app.ts

@@ -5,6 +5,7 @@ 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[];
@@ -15,13 +16,16 @@ interface AppViewProps {
   rows: number;
   commands: Array<{ name: string; description: string; usage?: string }>;
   hasApiKey: boolean;
+  version?: string;
   contextLength?: number;
   contextEstimated?: boolean;
   provider?: string;
   model?: string;
   emulationId?: string;
-  inputMode?: 'queue' | 'interrupt';
   toast?: string | null;
+  spinnerLabel?: string | null;
+  spinnerFrame?: string | null;
+  inputMode?: 'queue' | 'interrupt';
   debug?: boolean;
   expandToolOutputs?: boolean;
 }
@@ -48,6 +52,7 @@ export function buildAppView({
   rows,
   commands,
   hasApiKey,
+  version = '0.1.0',
   contextLength,
   contextEstimated,
   provider,
@@ -55,17 +60,20 @@ export function buildAppView({
   emulationId,
   inputMode,
   toast,
+  spinnerLabel,
+  spinnerFrame,
   debug = false,
   expandToolOutputs = false
 }: AppViewProps): LayoutNode {
   const suggestionLines = 4;
-  const headerHeight = 6; // logo row + meta row + padding
+  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 + suggestionLines + 5));
+  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), 5);
+  const contentHeight = Math.max(rows - (headerHeight + inputHeight + statusHeight + activityHeight), 5);
 
   const placeholder = !hasApiKey ? 'Set API key with /config key <key>' :
     agentState.status === 'thinking' ? 'Thinking...' :
@@ -74,12 +82,21 @@ export function buildAppView({
     'Type a message or /help for commands...';
 
   return box([
-    buildHeaderView({ version: '0.1.0', debug }),
+    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: '0.1.0',
+      version,
       connectionStatus: hasApiKey ? 'connected' : 'disconnected',
       contextLength,
       contextEstimated,
@@ -89,14 +106,6 @@ export function buildAppView({
       inputMode,
       toast,
       debug
-    }),
-    buildInputAreaView({
-      state: inputState,
-      placeholder,
-      disabled: agentState.status !== 'idle' && agentState.status !== 'error',
-      commands,
-      cols,
-      debug
     })
   ], { flexDirection: 'column' });
 }

package/src/ui/views/header.ts

@@ -15,7 +15,6 @@ export function buildHeaderView({
   showHelp = true,
   debug = false
 }: HeaderProps): LayoutNode {
-  // Single-row header to minimize vertical space
   return box([
     box([
       text(title, { bold: true }),
@@ -37,9 +36,9 @@ export function buildHeaderView({
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingX: 1,
-    height: 1,
     flexShrink: 0,
-    borderStyle: debug ? 'single' : undefined,
-    borderColor: debug ? 'cyan' : undefined
+    borderStyle: 'single',
+    borderColor: debug ? 'cyan' : 'gray',
+    marginBottom: 1
   });
 }

package/src/ui/views/input_area.ts

@@ -216,19 +216,20 @@ export function buildInputAreaView({
     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 }
-  );
+  // 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 })), {
@@ -237,8 +238,18 @@ export function buildInputAreaView({
       })
     : null;
 
-  return box(
-    previewLines ? [inputLine, previewLines, suggestions] : [inputLine, suggestions],
-    { flexDirection: 'column', flexShrink: 0 }
-  );
+  // 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
+  });
 }

package/src/ui/views/message_list.ts

@@ -278,7 +278,17 @@ function renderTable(lines: string[]): LayoutNode[] {
 
 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 => {
@@ -288,6 +298,7 @@ function renderMarkdownLines(lines: string[]): LayoutNode[] {
         normalized.push(out);
       });
     } else {
+      // Preserve the original line - don't collapse whitespace as it breaks formatting
       normalized.push(line);
     }
   });
@@ -373,10 +384,11 @@ function clipMessage(message: Message, available: number): Message | null {
 
 interface MessageListProps {
   messages: Message[];
-  height: number;
+  height?: number;
   maxMessages?: number;
   debug?: boolean;
   expandToolOutputs?: boolean;
+  scrollback?: boolean;
 }
 
 export function buildMessageListView({
@@ -384,30 +396,34 @@ export function buildMessageListView({
   height,
   maxMessages = 50,
   debug = false,
-  expandToolOutputs = false
+  expandToolOutputs = false,
+  scrollback = false
 }: MessageListProps): LayoutNode {
   const recentMessages = messages.slice(-maxMessages);
-  const visibleMessages: Message[] = [];
-  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);
+  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;
     }
-    break;
   }
 
   return box([
-    box([], { flexGrow: 1 }),
+    !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 })], {
@@ -418,9 +434,9 @@ export function buildMessageListView({
       : box([], {})
   ], {
     flexDirection: 'column',
-    height,
+    height: scrollback ? undefined : height,
     paddingX: 1,
-    flexGrow: 1,
+    flexGrow: scrollback ? undefined : 1,
     borderStyle: debug ? 'single' : undefined,
     borderColor: debug ? 'gray' : undefined
   });

package/src/ui/views/status_bar.ts

@@ -13,6 +13,7 @@ interface StatusBarProps {
   emulationId?: string;
   inputMode?: 'queue' | 'interrupt';
   toast?: string | null;
+  spinnerLabel?: string | null;
   debug?: boolean;
 }
 
@@ -39,10 +40,13 @@ export function buildStatusBarView({
   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',
@@ -64,7 +68,7 @@ export function buildStatusBarView({
   return box([
     box([
       text(isActive ? '⠋ ' : `${config.icon} `, { color: config.color }),
-      text(config.label, { 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('', {})

package/src/utils/shell.ts

@@ -54,7 +54,16 @@ export async function runShellCommand(command: string, cwd: string): Promise<She
 
 export async function resolveWorkingDir(current: string, target?: string): Promise<string> {
   const base = current || process.cwd();
-  const next = target && target.trim().length > 0 ? resolve(base, target) : base;
+  let path = target?.trim() || '';
+
+  // Expand tilde to home directory
+  if (path.startsWith('~/')) {
+    path = resolve(process.env.HOME || '', path.slice(2));
+  } else if (path === '~') {
+    path = process.env.HOME || '';
+  }
+
+  const next = path.length > 0 ? resolve(base, path) : base;
   const info = await stat(next);
   if (!info.isDirectory()) {
     throw new Error('Not a directory');

package/src/utils/spinner_frames.ts

@@ -0,0 +1 @@
+export const SPINNER_FRAMES = ['-', '\\', '|', '/'];

package/src/utils/spinner_verbs.ts

@@ -0,0 +1,23 @@
+export const DEFAULT_SPINNER_VERBS = [
+  'Thinking',
+  'Reticulating splines',
+  'Allocating time slices',
+  'Negotiating with entropy',
+  'Consulting the archives',
+  'Organizing thoughts',
+  'Compiling context',
+  'Assembling response',
+  'Tracing dependencies',
+  'Resolving intent'
+];
+
+export function parseSpinnerVerbs(input: string): string[] {
+  return input
+    .split(/[,|;\n]+/g)
+    .map(part => part.trim())
+    .filter(Boolean);
+}
+
+export function formatSpinnerVerbs(verbs: string[]): string {
+  return verbs.length === 0 ? '(none)' : verbs.join(', ');
+}

package/src/utils/tool_trace.ts

@@ -138,7 +138,11 @@ export function formatToolStart(tool: string, args: Record<string, unknown>, emu
     return `⏺ ${label}${argsText}`;
   }
   if (style === 'codex') {
-    return `• ${label}${argsText}`;
+    if (tool === 'run_command') {
+      const command = args.command ? String(args.command) : '';
+      return `! ${command}`;
+    }
+    return `⏺ ${label}${argsText}`;
   }
   return `> ${label}${argsText}`;
 }
@@ -150,7 +154,13 @@ export function formatToolEnd(tool: string, result: string, durationMs?: number,
     return `⎿ ${summary}`;
   }
   if (style === 'codex') {
-    return `  ${summary}`;
+    if (tool === 'run_command') {
+      const { lines } = buildOutputLines(tool, result);
+      if (lines.length === 0) {
+        return `  ⎿  (No content)`;
+      }
+    }
+    return `  ⎿  ${summary}`;
   }
   return `< ${summary}`;
 }

package/src/utils/update.ts

@@ -0,0 +1,44 @@
+const PACKAGE_NAME = 'zerg-ztc';
+
+export interface UpdateCheck {
+  current: string;
+  latest: string;
+  hasUpdate: boolean;
+}
+
+function parseVersion(value: string): number[] {
+  return value.split('.').map(part => Number(part.replace(/[^0-9]/g, '')) || 0);
+}
+
+export function compareVersions(a: string, b: string): number {
+  const pa = parseVersion(a);
+  const pb = parseVersion(b);
+  const len = Math.max(pa.length, pb.length);
+  for (let i = 0; i < len; i += 1) {
+    const av = pa[i] ?? 0;
+    const bv = pb[i] ?? 0;
+    if (av > bv) return 1;
+    if (av < bv) return -1;
+  }
+  return 0;
+}
+
+export async function fetchLatestVersion(): Promise<string> {
+  const res = await fetch(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, {
+    headers: { 'Accept': 'application/json' }
+  });
+  if (!res.ok) {
+    throw new Error(`Version check failed (${res.status})`);
+  }
+  const data = await res.json() as { version?: string };
+  return data.version || '0.0.0';
+}
+
+export async function checkForUpdate(current: string): Promise<UpdateCheck> {
+  const latest = await fetchLatestVersion();
+  return {
+    current,
+    latest,
+    hasUpdate: compareVersions(latest, current) > 0
+  };
+}

package/src/utils/version.ts

@@ -0,0 +1,15 @@
+import { readFileSync } from 'fs';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+export function getVersion(): string {
+  try {
+    const here = dirname(fileURLToPath(import.meta.url));
+    const pkgPath = resolve(here, '../../package.json');
+    const raw = readFileSync(pkgPath, 'utf-8');
+    const parsed = JSON.parse(raw) as { version?: string };
+    return parsed.version || '0.0.0';
+  } catch {
+    return '0.0.0';
+  }
+}