zerg-ztc 0.1.3 → 0.1.4

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/app.ts

@@ -20,6 +20,7 @@ interface AppViewProps {
   provider?: string;
   model?: string;
   emulationId?: string;
+  inputMode?: 'queue' | 'interrupt';
   toast?: string | null;
   debug?: boolean;
   expandToolOutputs?: boolean;
@@ -52,6 +53,7 @@ export function buildAppView({
   provider,
   model,
   emulationId,
+  inputMode,
   toast,
   debug = false,
   expandToolOutputs = false
@@ -84,6 +86,7 @@ export function buildAppView({
       provider,
       model,
       emulationId,
+      inputMode,
       toast,
       debug
     }),

package/src/ui/views/header.ts

@@ -15,13 +15,13 @@ export function buildHeaderView({
   showHelp = true,
   debug = false
 }: HeaderProps): LayoutNode {
+  // Single-row header to minimize vertical space
   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 +34,12 @@ export function buildHeaderView({
         ], { flexDirection: 'row' })
       : box([], { flexDirection: 'row' })
   ], {
-    flexDirection: 'column',
+    flexDirection: 'row',
     justifyContent: 'space-between',
     paddingX: 1,
-    paddingY: 1
+    height: 1,
+    flexShrink: 0,
+    borderStyle: debug ? 'single' : undefined,
+    borderColor: debug ? 'cyan' : undefined
   });
 }

package/src/ui/views/status_bar.ts

@@ -11,6 +11,7 @@ interface StatusBarProps {
   provider?: string;
   model?: string;
   emulationId?: string;
+  inputMode?: 'queue' | 'interrupt';
   toast?: string | null;
   debug?: boolean;
 }
@@ -36,6 +37,7 @@ export function buildStatusBarView({
   provider,
   model,
   emulationId,
+  inputMode,
   toast,
   debug = false
 }: StatusBarProps): LayoutNode {
@@ -78,6 +80,8 @@ export function buildStatusBarView({
       (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('', {}),
@@ -98,6 +102,8 @@ export function buildStatusBarView({
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingX: 1,
+    height: 1,
+    flexShrink: 0,
     borderStyle: debug ? 'single' : undefined,
     borderColor: debug ? 'gray' : undefined
   });