zerg-ztc 0.1.10 → 0.1.11

package/src/components/SingleMessage.tsx

@@ -2,6 +2,111 @@ import React from 'react';
 import { Box, Text } from 'ink';
 import { Message } from '../types.js';
 
+// Box-drawing characters for tables
+const BOX = {
+  topLeft: '╭',
+  topRight: '╮',
+  bottomLeft: '╰',
+  bottomRight: '╯',
+  horizontal: '─',
+  vertical: '│',
+  leftT: '├',
+  rightT: '┤',
+  topT: '┬',
+  bottomT: '┴',
+  cross: '┼'
+};
+
+interface ParsedTable {
+  headers: string[];
+  rows: string[][];
+}
+
+function parseMarkdownTable(lines: string[]): ParsedTable | null {
+  // Need at least header row and separator row
+  if (lines.length < 2) return null;
+
+  const headerLine = lines[0];
+  const separatorLine = lines[1];
+
+  // Check if it looks like a markdown table
+  if (!headerLine.includes('|') || !separatorLine.match(/^\|?[\s\-:|]+\|?$/)) {
+    return null;
+  }
+
+  const parseRow = (line: string): string[] => {
+    return line
+      .split('|')
+      .map(cell => cell.trim())
+      .filter((_, i, arr) => i > 0 && i < arr.length - 1 || (arr.length === 2 && i === 0));
+  };
+
+  const headers = parseRow(headerLine);
+  if (headers.length === 0) return null;
+
+  const rows: string[][] = [];
+  for (let i = 2; i < lines.length; i++) {
+    if (!lines[i].includes('|')) break;
+    rows.push(parseRow(lines[i]));
+  }
+
+  return { headers, rows };
+}
+
+function renderBoxTable(table: ParsedTable): string[] {
+  const { headers, rows } = table;
+
+  // Calculate column widths
+  const widths = headers.map((h, i) => {
+    const dataMax = rows.reduce((max, row) => {
+      const cell = row[i] || '';
+      return Math.max(max, cell.length);
+    }, 0);
+    return Math.max(h.length, dataMax);
+  });
+
+  const output: string[] = [];
+
+  // Top border
+  output.push(
+    BOX.topLeft +
+    widths.map(w => BOX.horizontal.repeat(w + 2)).join(BOX.topT) +
+    BOX.topRight
+  );
+
+  // Header row
+  output.push(
+    BOX.vertical +
+    headers.map((h, i) => ' ' + h.padEnd(widths[i]) + ' ').join(BOX.vertical) +
+    BOX.vertical
+  );
+
+  // Header separator
+  output.push(
+    BOX.leftT +
+    widths.map(w => BOX.horizontal.repeat(w + 2)).join(BOX.cross) +
+    BOX.rightT
+  );
+
+  // Data rows
+  for (const row of rows) {
+    output.push(
+      BOX.vertical +
+      widths.map((w, i) => ' ' + (row[i] || '').padEnd(w) + ' ').join(BOX.vertical) +
+      BOX.vertical
+    );
+  }
+
+  // Bottom border
+  output.push(
+    BOX.bottomLeft +
+    widths.map(w => BOX.horizontal.repeat(w + 2)).join(BOX.bottomT) +
+    BOX.bottomRight
+  );
+
+  return output;
+}
+
 interface SingleMessageProps {
   message: Message;
   expandToolOutputs?: boolean;
@@ -28,17 +133,149 @@ function formatTime(date: Date): string {
   });
 }
 
+interface DiffLine {
+  type: 'add' | 'remove' | 'context';
+  text: string;
+}
+
+interface ToolOutput {
+  preview: string;
+  full: string;
+  truncated: boolean;
+  diffLines?: DiffLine[];
+}
+
+// Render a line with diff coloring
+const DiffLineComponent: React.FC<{ line: DiffLine; lineNum?: number }> = ({ line, lineNum }) => {
+  const prefix = line.type === 'add' ? '+' : line.type === 'remove' ? '-' : ' ';
+  const color = line.type === 'add' ? 'green' : line.type === 'remove' ? 'red' : undefined;
+  const lineNumStr = lineNum !== undefined ? `${String(lineNum).padStart(4)} ` : '';
+
+  return (
+    <Text color={color}>
+      {'    '}{lineNumStr}{prefix} {line.text}
+    </Text>
+  );
+};
+
+// Render content with diff awareness and markdown table support
+const ContentRenderer: React.FC<{
+  content: string;
+  diffLines?: DiffLine[];
+  isToolTrace: boolean;
+}> = ({ content, diffLines, isToolTrace }) => {
+  // If we have structured diff lines, render them with colors
+  if (diffLines && diffLines.length > 0 && isToolTrace) {
+    const lines = content.split('\n');
+    const summaryLine = lines[0] || '';
+
+    return (
+      <Box flexDirection="column">
+        <Text>{summaryLine}</Text>
+        {diffLines.map((line, i) => (
+          <DiffLineComponent key={i} line={line} />
+        ))}
+      </Box>
+    );
+  }
+
+  // Parse content into segments (text and tables)
+  const lines = content.split('\n');
+  const segments: Array<{ type: 'text' | 'table'; lines: string[] }> = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Check if this looks like the start of a markdown table
+    if (line.includes('|') && i + 1 < lines.length && lines[i + 1].match(/^\|?[\s\-:|]+\|?$/)) {
+      // Collect all table lines
+      const tableLines: string[] = [line];
+      let j = i + 1;
+      while (j < lines.length && lines[j].includes('|')) {
+        tableLines.push(lines[j]);
+        j++;
+      }
+
+      const parsed = parseMarkdownTable(tableLines);
+      if (parsed && parsed.rows.length > 0) {
+        const boxLines = renderBoxTable(parsed);
+        segments.push({ type: 'table', lines: boxLines });
+        i = j;
+        continue;
+      }
+    }
+
+    // Regular text line
+    if (segments.length === 0 || segments[segments.length - 1].type !== 'text') {
+      segments.push({ type: 'text', lines: [] });
+    }
+    segments[segments.length - 1].lines.push(line);
+    i++;
+  }
+
+  return (
+    <Box flexDirection="column">
+      {segments.map((segment, segIdx) => (
+        <Box key={segIdx} flexDirection="column">
+          {segment.lines.map((line, lineIdx) => {
+            // Color diff lines in output
+            if (isToolTrace) {
+              const trimmed = line.trimStart();
+              if (trimmed.startsWith('+ ') && !trimmed.startsWith('+ …')) {
+                return <Text key={lineIdx} color="green">{line}</Text>;
+              }
+              if (trimmed.startsWith('- ')) {
+                return <Text key={lineIdx} color="red">{line}</Text>;
+              }
+            }
+            // Table lines get a subtle color
+            if (segment.type === 'table') {
+              return <Text key={lineIdx} color="cyan">{line}</Text>;
+            }
+            return <Text key={lineIdx}>{line}</Text>;
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
 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;
+  const metadata = message.metadata as Record<string, unknown> | undefined;
+  const toolOutput = metadata?.toolOutput as ToolOutput | undefined;
+
+  // Determine content to show
+  let content: string;
+  let diffLines: DiffLine[] | undefined;
+
+  if (toolOutput) {
+    content = expandToolOutputs && toolOutput.full ? toolOutput.full : toolOutput.preview;
+    diffLines = toolOutput.diffLines;
+  } else {
+    content = message.content;
+  }
+
+  const isToolTrace = message.role === 'tool';
+
+  // For tool traces, use more compact display
+  if (isToolTrace) {
+    return (
+      <Box flexDirection="column" marginY={0} paddingX={1}>
+        <Box flexDirection="column" marginLeft={1}>
+          <ContentRenderer
+            content={content}
+            diffLines={diffLines}
+            isToolTrace={true}
+          />
+        </Box>
+      </Box>
+    );
+  }
 
   return (
     <Box flexDirection="column" marginY={1} paddingX={1}>
@@ -48,9 +285,11 @@ export const SingleMessage: React.FC<SingleMessageProps> = ({
         {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>
-        ))}
+        <ContentRenderer
+          content={content}
+          diffLines={diffLines}
+          isToolTrace={false}
+        />
       </Box>
     </Box>
   );

package/src/config/types.ts

@@ -1,3 +1,9 @@
+export interface DictationSettings {
+  provider?: 'openai' | 'local' | 'macos';
+  language?: string;  // e.g., 'en', 'es', 'fr'
+  whisperModel?: string;  // For local whisper: 'tiny', 'base', 'small', 'medium', 'large'
+}
+
 export interface ZTCConfig {
   apiKey?: string;
   apiKeys?: Record<string, string>;
@@ -9,4 +15,5 @@ export interface ZTCConfig {
   emulationId?: string;
   spinnerVerbs?: string[];
   toolPermissions?: Partial<Record<'file_read' | 'file_write' | 'shell_exec' | 'network', boolean>>;
+  dictation?: DictationSettings;
 }

package/src/ui/views/status_bar.ts

@@ -67,8 +67,8 @@ export function buildStatusBarView({
 
   return box([
     box([
-      text(isActive ? '⠋ ' : `${config.icon} `, { color: config.color }),
-      text(label, { color: config.color }),
+      text(isActive ? '⠋' : config.icon, { 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('', {})