zerg-ztc 0.1.3 → 0.1.5

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

@@ -13,7 +13,9 @@ interface StatusBarProps {
   provider?: string;
   model?: string;
   emulationId?: string;
+  inputMode?: 'queue' | 'interrupt';
   toast?: string | null;
+  spinnerLabel?: string | null;
   debug?: boolean;
 }
 
@@ -27,7 +29,9 @@ export const StatusBar: React.FC<StatusBarProps> = ({
   provider,
   model,
   emulationId,
+  inputMode,
   toast,
+  spinnerLabel,
   debug = false
 }) => {
   const node = buildStatusBarView({
@@ -40,7 +44,9 @@ export const StatusBar: React.FC<StatusBarProps> = ({
     provider,
     model,
     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/types.ts

@@ -7,6 +7,7 @@ export type MessageRole = 'user' | 'assistant' | 'tool' | 'system';
 export type ToolStatus = 'pending' | 'running' | 'complete' | 'error';
 
 export type AgentStatus = 'idle' | 'thinking' | 'tool_use' | 'streaming' | 'error';
+export type InputMode = 'queue' | 'interrupt';
 
 export interface ToolCall {
   id: string;

package/src/ui/core/input_segments.ts

@@ -36,20 +36,24 @@ export function clampCursor(segments: InputSegment[], cursor: InputCursor): Inpu
 
 export function insertText(state: InputState, text: string): InputState {
   if (text.length === 0) return state;
-  const segments = [...state.segments];
+  // Deep copy segments to avoid mutating original state
+  const segments: InputSegment[] = state.segments.map(s => ({ ...s }));
   const cursor = clampCursor(segments, state.cursor);
 
   if (cursor.index === segments.length) {
     const last = segments[segments.length - 1];
     if (last && last.type === 'text') {
-      last.text += text;
+      const newText = last.text + text;
+      segments[segments.length - 1] = { ...last, text: newText };
     } else {
       segments.push({ type: 'text', text });
     }
+    const finalSegment = segments[segments.length - 1];
+    const finalOffset = finalSegment.type === 'text' ? finalSegment.text.length : 1;
     return {
       ...state,
       segments: normalizeSegments(segments),
-      cursor: { index: segments.length - 1, offset: (segments[segments.length - 1] as any).text.length }
+      cursor: { index: segments.length - 1, offset: finalOffset }
     };
   }
 
@@ -57,7 +61,8 @@ export function insertText(state: InputState, text: string): InputState {
   if (segment.type === 'text') {
     const before = segment.text.slice(0, cursor.offset);
     const after = segment.text.slice(cursor.offset);
-    segment.text = before + text + after;
+    const newText = before + text + after;
+    segments[cursor.index] = { ...segment, text: newText };
     return {
       ...state,
       segments: normalizeSegments(segments),
@@ -94,18 +99,20 @@ export function insertBadge(state: InputState, segment: InputSegment): InputStat
 }
 
 export function backspace(state: InputState): InputState {
-  const segments = [...state.segments];
+  // Deep copy segments to avoid mutating original state
+  const segments: InputSegment[] = state.segments.map(s => ({ ...s }));
   const cursor = clampCursor(segments, state.cursor);
 
   if (cursor.index === segments.length) {
     if (segments.length === 0) return state;
     const last = segments[segments.length - 1];
     if (last.type === 'text' && last.text.length > 0) {
-      last.text = last.text.slice(0, -1);
+      const newText = last.text.slice(0, -1);
+      segments[segments.length - 1] = { ...last, text: newText };
       return {
         ...state,
         segments: normalizeSegments(segments),
-        cursor: { index: segments.length - 1, offset: last.text.length }
+        cursor: { index: segments.length - 1, offset: newText.length }
       };
     }
     segments.pop();
@@ -119,7 +126,8 @@ export function backspace(state: InputState): InputState {
   const segment = segments[cursor.index];
   if (segment.type === 'text') {
     if (cursor.offset > 0) {
-      segment.text = segment.text.slice(0, cursor.offset - 1) + segment.text.slice(cursor.offset);
+      const newText = segment.text.slice(0, cursor.offset - 1) + segment.text.slice(cursor.offset);
+      segments[cursor.index] = { ...segment, text: newText };
       return {
         ...state,
         segments: normalizeSegments(segments),
@@ -130,7 +138,7 @@ export function backspace(state: InputState): InputState {
     const prev = segments[cursor.index - 1];
     if (prev.type === 'text') {
       const prevLen = prev.text.length;
-      prev.text += segment.text;
+      segments[cursor.index - 1] = { ...prev, text: prev.text + segment.text };
       segments.splice(cursor.index, 1);
       return {
         ...state,
@@ -159,7 +167,7 @@ export function backspace(state: InputState): InputState {
   const prev = segments[cursor.index - 1];
   if (prev.type === 'text') {
     const prevLen = prev.text.length;
-    prev.text = prev.text.slice(0, -1);
+    segments[cursor.index - 1] = { ...prev, text: prev.text.slice(0, -1) };
     return {
       ...state,
       segments: normalizeSegments(segments),
@@ -175,7 +183,8 @@ export function backspace(state: InputState): InputState {
 }
 
 export function deleteForward(state: InputState): InputState {
-  const segments = [...state.segments];
+  // Deep copy segments to avoid mutating original state
+  const segments: InputSegment[] = state.segments.map(s => ({ ...s }));
   const cursor = clampCursor(segments, state.cursor);
 
   if (cursor.index === segments.length) return state;
@@ -183,7 +192,8 @@ export function deleteForward(state: InputState): InputState {
   const segment = segments[cursor.index];
   if (segment.type === 'text') {
     if (cursor.offset < segment.text.length) {
-      segment.text = segment.text.slice(0, cursor.offset) + segment.text.slice(cursor.offset + 1);
+      const newText = segment.text.slice(0, cursor.offset) + segment.text.slice(cursor.offset + 1);
+      segments[cursor.index] = { ...segment, text: newText };
       return {
         ...state,
         segments: normalizeSegments(segments),
@@ -193,7 +203,7 @@ export function deleteForward(state: InputState): InputState {
     if (cursor.index + 1 >= segments.length) return state;
     const next = segments[cursor.index + 1];
     if (next.type === 'text') {
-      segment.text += next.text;
+      segments[cursor.index] = { ...segment, text: segment.text + next.text };
       segments.splice(cursor.index + 1, 1);
       return {
         ...state,
@@ -221,7 +231,7 @@ export function deleteForward(state: InputState): InputState {
   if (cursor.index + 1 >= segments.length) return state;
   const next = segments[cursor.index + 1];
   if (next.type === 'text') {
-    next.text = next.text.slice(1);
+    segments[cursor.index + 1] = { ...next, text: next.text.slice(1) };
     return {
       ...state,
       segments: normalizeSegments(segments),
@@ -236,6 +246,31 @@ export function deleteForward(state: InputState): InputState {
   };
 }
 
+export function killToEnd(state: InputState): InputState {
+  const segments = [...state.segments];
+  const cursor = clampCursor(segments, state.cursor);
+
+  if (cursor.index >= segments.length) return state;
+
+  const segment = segments[cursor.index];
+  if (segment.type === 'text') {
+    segment.text = segment.text.slice(0, cursor.offset);
+    segments.splice(cursor.index + 1);
+    return {
+      ...state,
+      segments: normalizeSegments(segments),
+      cursor: { index: cursor.index, offset: segment.text.length }
+    };
+  }
+
+  segments.splice(cursor.index);
+  return {
+    ...state,
+    segments: normalizeSegments(segments),
+    cursor: { index: Math.min(cursor.index, segments.length), offset: 0 }
+  };
+}
+
 export function moveLeft(state: InputState): InputState {
   const segments = state.segments;
   const cursor = clampCursor(segments, state.cursor);

package/src/ui/core/types.ts

@@ -24,6 +24,7 @@ export interface Style {
   justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between';
   borderStyle?: string;
   borderColor?: string;
+  overflow?: 'visible' | 'hidden';
 }
 
 export interface TextStyle {

package/src/ui/ink/render.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Box, Text, type BoxProps } from 'ink';
 import { LayoutNode, TextNode } from '../core/types.js';
 
-function renderText(node: TextNode): React.ReactElement {
+const InkText = memo(function InkText({ node }: { node: TextNode }): React.ReactElement {
   const style = node.style || {};
   return (
     <Text
@@ -15,11 +15,11 @@ function renderText(node: TextNode): React.ReactElement {
       {node.text}
     </Text>
   );
-}
+});
 
-export function InkNode({ node }: { node: LayoutNode }): React.ReactElement {
+function InkNodeInner({ node }: { node: LayoutNode }): React.ReactElement {
   if (node.type === 'text') {
-    return renderText(node);
+    return <InkText node={node} />;
   }
 
   const style = node.style || {};
@@ -33,13 +33,22 @@ export function InkNode({ node }: { node: LayoutNode }): React.ReactElement {
       padding={style.padding}
       paddingX={style.paddingX}
       paddingY={style.paddingY}
+      paddingLeft={style.paddingLeft}
+      paddingRight={style.paddingRight}
+      paddingTop={style.paddingTop}
+      paddingBottom={style.paddingBottom}
       margin={style.margin}
       marginX={style.marginX}
       marginY={style.marginY}
+      marginLeft={style.marginLeft}
+      marginRight={style.marginRight}
+      marginTop={style.marginTop}
+      marginBottom={style.marginBottom}
       alignItems={style.alignItems}
       justifyContent={style.justifyContent}
       borderStyle={style.borderStyle as BoxProps['borderStyle']}
       borderColor={style.borderColor}
+      overflow={style.overflow}
     >
       {node.children.map((child, index) => (
         <InkNode key={`${child.type}-${index}`} node={child} />
@@ -47,3 +56,5 @@ export function InkNode({ node }: { node: LayoutNode }): React.ReactElement {
     </Box>
   );
 }
+
+export const InkNode = memo(InkNodeInner);

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,12 +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;
   toast?: string | null;
+  spinnerLabel?: string | null;
+  spinnerFrame?: string | null;
+  inputMode?: 'queue' | 'interrupt';
   debug?: boolean;
   expandToolOutputs?: boolean;
 }
@@ -47,23 +52,28 @@ export function buildAppView({
   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 = 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...' :
@@ -72,28 +82,30 @@ 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,
       provider,
       model,
       emulationId,
+      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

@@ -18,10 +18,9 @@ export function buildHeaderView({
   return box([
     box([
       text(title, { bold: true }),
+      text(' ', {}),
       text('ZTC', { color: 'gray', dimColor: true })
-    ], {
-      flexDirection: 'column'
-    }),
+    ], { flexDirection: 'row' }),
     showHelp
       ? box([
           dateLabel ? text(dateLabel, { color: 'gray', dimColor: true }) : text('', {}),
@@ -34,9 +33,12 @@ export function buildHeaderView({
         ], { flexDirection: 'row' })
       : box([], { flexDirection: 'row' })
   ], {
-    flexDirection: 'column',
+    flexDirection: 'row',
     justifyContent: 'space-between',
     paddingX: 1,
-    paddingY: 1
+    flexShrink: 0,
+    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
+  });
 }