zerg-ztc 0.1.4 → 0.1.5

package/src/cli.tsx

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 import React from 'react';
 import { render } from 'ink';
-import { resolve, dirname } from 'path';
-import { statSync, readFileSync } from 'fs';
-import { fileURLToPath } from 'url';
+import { resolve } from 'path';
+import { statSync } from 'fs';
 import { App } from './App.js';
 import { configStore } from './config.js';
+import { getVersion } from './utils/version.js';
 
 // --- CLI Entry Point ---
 
@@ -76,15 +76,43 @@ async function main(): Promise<void> {
   await configStore.load(true);
 
   const isTty = Boolean(process.stdout.isTTY);
-  const useAltScreen = isTty && process.env.ZTC_ALT_SCREEN !== '0' && process.env.ZTC_NO_ALT_SCREEN !== '1';
+  const useAltScreen = isTty
+    && process.env.ZTC_ALT_SCREEN === '1'
+    && process.env.ZTC_NO_ALT_SCREEN !== '1'
+    && process.env.ZTC_SCROLLBACK !== '1';
 
   if (useAltScreen) {
     process.stdout.write('\x1b[?1049h');
     process.stdout.write('\x1b[?25l');
+  }
+
+  if (isTty) {
+    // Clear screen and move cursor home for a clean start
     process.stdout.write('\x1b[2J');
     process.stdout.write('\x1b[H');
   }
 
+  // In scrollback mode, print a static header once at startup
+  const scrollback = !useAltScreen;
+  if (scrollback && isTty) {
+    const version = getVersion();
+    const dateLabel = new Date().toLocaleDateString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric'
+    });
+    const cols = process.stdout.columns || 80;
+    const title = 'Zerg Terminal Client';
+    const right = `${dateLabel} • v${version} • Ctrl+C exit • /help`;
+    const padding = Math.max(0, cols - title.length - right.length - 4);
+    const borderLine = '─'.repeat(cols - 2);
+
+    console.log(`┌${borderLine}┐`);
+    console.log(`│ ${title}${' '.repeat(padding)}${right} │`);
+    console.log(`└${borderLine}┘`);
+    console.log(''); // Extra line after header
+  }
+
   // Enable bracketed paste mode so we can detect paste boundaries
   process.stdout.write('\x1b[?2004h');
 
@@ -94,21 +122,23 @@ async function main(): Promise<void> {
   // Using flags=1 for basic disambiguation which reports Cmd+V as CSI sequence
   process.stdout.write('\x1b[>1u');
 
-  // Wrap stdout.write to use synchronized output (reduces flicker)
-  // DECSM/DECRM 2026 tells terminal to batch updates
-  const originalWrite = process.stdout.write.bind(process.stdout);
-  let syncPending = false;
-  process.stdout.write = function(chunk: any, encoding?: any, callback?: any): boolean {
-    if (!syncPending) {
-      syncPending = true;
-      originalWrite('\x1b[?2026h'); // Begin synchronized update
-      setImmediate(() => {
-        originalWrite('\x1b[?2026l'); // End synchronized update
-        syncPending = false;
-      });
-    }
-    return originalWrite(chunk, encoding, callback);
-  } as typeof process.stdout.write;
+  if (useAltScreen) {
+    // Wrap stdout.write to use synchronized output (reduces flicker)
+    // DECSM/DECRM 2026 tells terminal to batch updates
+    const originalWrite = process.stdout.write.bind(process.stdout);
+    let syncPending = false;
+    process.stdout.write = function(chunk: any, encoding?: any, callback?: any): boolean {
+      if (!syncPending) {
+        syncPending = true;
+        originalWrite('\x1b[?2026h'); // Begin synchronized update
+        setImmediate(() => {
+          originalWrite('\x1b[?2026l'); // End synchronized update
+          syncPending = false;
+        });
+      }
+      return originalWrite(chunk, encoding, callback);
+    } as typeof process.stdout.write;
+  }
 
   // Render the app
   const { waitUntilExit } = render(<App />);
@@ -130,14 +160,4 @@ async function main(): Promise<void> {
 
 void main();
 
-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';
-  }
-}
+// getVersion moved to utils/version.ts

package/src/components/ActivityLine.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { AgentState } from '../types.js';
+import { InkNode } from '../ui/ink/index.js';
+import { buildActivityLineView } from '../ui/views/activity_line.js';
+
+interface ActivityLineProps {
+  state: AgentState;
+  spinnerLabel?: string | null;
+  spinnerFrame?: string | null;
+  inputMode?: 'queue' | 'interrupt';
+}
+
+export const ActivityLine: React.FC<ActivityLineProps> = ({
+  state,
+  spinnerLabel,
+  spinnerFrame,
+  inputMode
+}) => {
+  const node = buildActivityLineView({ state, spinnerLabel, spinnerFrame, inputMode });
+  return <InkNode node={node} />;
+};
+
+export default ActivityLine;

package/src/components/FullScreen.tsx

@@ -18,6 +18,7 @@ import { Box } from 'ink';
 
 interface FullScreenProps extends PropsWithChildren {
   debug?: boolean;
+  scrollback?: boolean;
 }
 
 function getTerminalSize() {
@@ -27,15 +28,15 @@ function getTerminalSize() {
   };
 }
 
-export const FullScreen: React.FC<FullScreenProps> = ({ children, debug = false }) => {
+export const FullScreen: React.FC<FullScreenProps> = ({ children, debug = false, scrollback = false }) => {
   const { rows, columns } = useScreenSize();
 
   return (
     <Box
       flexDirection="column"
       width={columns}
-      height={rows}
-      overflow="hidden"
+      height={scrollback ? undefined : rows}
+      overflow={scrollback ? undefined : 'hidden'}
       borderStyle={debug ? 'single' : undefined}
       borderColor={debug ? 'red' : undefined}
     >

package/src/components/MessageList.tsx

@@ -1,24 +1,70 @@
-import React from 'react';
+import React, { useRef, useMemo } 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;
+  height?: number;
   maxMessages?: number;
   debug?: boolean;
   expandToolOutputs?: boolean;
+  scrollback?: boolean;
 }
 
-export const MessageList: React.FC<MessageListProps> = ({ 
-  messages, 
+export const MessageList: React.FC<MessageListProps> = ({
+  messages,
   height,
   maxMessages = 50,
   debug = false,
-  expandToolOutputs = false
+  expandToolOutputs = false,
+  scrollback = false
 }) => {
-  const node = buildMessageListView({ messages, height, maxMessages, debug, expandToolOutputs });
+  // In scrollback mode, track which messages have been rendered to avoid duplication
+  const renderedIdsRef = useRef<Set<string>>(new Set());
+
+  // Filter to only new, complete messages in scrollback mode
+  const messagesToRender = useMemo(() => {
+    if (!scrollback) {
+      return messages;
+    }
+
+    // In scrollback mode, only render messages that:
+    // 1. Are NOT currently streaming (wait for completion)
+    // 2. Haven't been rendered yet
+    const newMessages: Message[] = [];
+    for (const msg of messages) {
+      // Skip streaming messages - we'll render them when complete
+      if (msg.isStreaming) {
+        continue;
+      }
+
+      // Skip already rendered messages
+      if (renderedIdsRef.current.has(msg.id)) {
+        continue;
+      }
+
+      // This is a new, complete message - render it
+      newMessages.push(msg);
+      // Mark as rendered immediately
+      renderedIdsRef.current.add(msg.id);
+    }
+    return newMessages;
+  }, [messages, scrollback]);
+
+  // Don't render anything if there are no new messages in scrollback mode
+  if (scrollback && messagesToRender.length === 0) {
+    return null;
+  }
+
+  const node = buildMessageListView({
+    messages: messagesToRender,
+    height,
+    maxMessages,
+    debug,
+    expandToolOutputs,
+    scrollback
+  });
   return <InkNode node={node} />;
 };
 

package/src/components/SingleMessage.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { Message } from '../types.js';
+
+interface SingleMessageProps {
+  message: Message;
+  expandToolOutputs?: boolean;
+}
+
+interface RoleConfig {
+  icon: string;
+  color: string;
+  label: string;
+}
+
+const roleConfigs: Record<string, 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 formatTime(date: Date): string {
+  return date.toLocaleTimeString('en-US', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  });
+}
+
+export const SingleMessage: React.FC<SingleMessageProps> = ({
+  message,
+  expandToolOutputs = false
+}) => {
+  const config = roleConfigs[message.role] || roleConfigs.system;
+  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;
+
+  return (
+    <Box flexDirection="column" marginY={1} paddingX={1}>
+      <Box flexDirection="row">
+        <Text color={config.color} bold>{config.icon} {config.label}</Text>
+        <Text color="gray" dimColor> • {formatTime(message.timestamp)}</Text>
+        {message.isStreaming && <Text color="yellow" bold> ▌</Text>}
+      </Box>
+      <Box flexDirection="column" marginLeft={2}>
+        {content.split('\n').map((line: string, i: number) => (
+          <Text key={i}>{line}</Text>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default SingleMessage;

package/src/components/StatusBar.tsx

@@ -15,6 +15,7 @@ interface StatusBarProps {
   emulationId?: string;
   inputMode?: 'queue' | 'interrupt';
   toast?: string | null;
+  spinnerLabel?: string | null;
   debug?: boolean;
 }
 
@@ -30,6 +31,7 @@ export const StatusBar: React.FC<StatusBarProps> = ({
   emulationId,
   inputMode,
   toast,
+  spinnerLabel,
   debug = false
 }) => {
   const node = buildStatusBarView({
@@ -44,6 +46,7 @@ export const StatusBar: React.FC<StatusBarProps> = ({
     emulationId,
     inputMode,
     toast,
+    spinnerLabel,
     debug
   });
   return <InkNode node={node} />;

package/src/components/index.tsx

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

package/src/config/types.ts

@@ -7,5 +7,6 @@ export interface ZTCConfig {
   maxTokens: number;
   zergEndpoint?: string;
   emulationId?: string;
+  spinnerVerbs?: string[];
   toolPermissions?: Partial<Record<'file_read' | 'file_write' | 'shell_exec' | 'network', boolean>>;
 }

package/src/config.ts

@@ -3,6 +3,7 @@ import { join } from 'path';
 import { readFile, writeFile, mkdir } from 'fs/promises';
 
 import { ZTCConfig } from './config/types.js';
+import { DEFAULT_SPINNER_VERBS } from './utils/spinner_verbs.js';
 
 // --- Configuration Store ---
 
@@ -15,6 +16,7 @@ const DEFAULT_CONFIG: ZTCConfig = {
   maxTokens: 4096,
   zergEndpoint: undefined,
   emulationId: undefined,
+  spinnerVerbs: DEFAULT_SPINNER_VERBS,
   toolPermissions: {
     file_read: true,
     file_write: true,
@@ -46,6 +48,9 @@ class ConfigStore {
       if (this.config.model === 'claude-opus-4-5-20250514') {
         this.config.model = 'claude-opus-4-20250514';
       }
+      if (!this.config.spinnerVerbs) {
+        this.config.spinnerVerbs = DEFAULT_SPINNER_VERBS;
+      }
       if (!this.config.toolPermissions) {
         this.config.toolPermissions = { ...DEFAULT_CONFIG.toolPermissions };
       }
@@ -92,6 +97,9 @@ class ConfigStore {
     if (this.config.model === 'claude-opus-4-5-20250514') {
       this.config.model = 'claude-opus-4-20250514';
     }
+    if (!this.config.spinnerVerbs) {
+      this.config.spinnerVerbs = DEFAULT_SPINNER_VERBS;
+    }
     if (!this.config.toolPermissions) {
       this.config.toolPermissions = { ...DEFAULT_CONFIG.toolPermissions };
     }

package/src/ui/views/activity_line.ts

@@ -0,0 +1,33 @@
+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

@@ -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
+  });
 }