tycono 0.1.96-beta.37 → 0.1.96-beta.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tycono",
-  "version": "0.1.96-beta.37",
+  "version": "0.1.96-beta.39",
   "description": "Build an AI company. Watch them work.",
   "type": "module",
   "bin": {

package/src/tui/components/CommandMode.tsx

@@ -10,6 +10,7 @@ import { Box, Text, Static } from 'ink';
 import TextInput from 'ink-text-input';
 import type { SSEEvent } from '../api';
 import { getRoleColor } from '../theme';
+// Markdown rendering is done inline via regex (no external dependency)
 
 const SUPERVISOR_ROLE = 'ceo';
 
@@ -20,6 +21,7 @@ export interface StreamLine {
   prefix?: string;
   prefixColor?: string;
   indent?: boolean;
+  markdown?: boolean;  // render text as markdown
 }
 
 interface CommandModeProps {
@@ -56,6 +58,7 @@ export function summarizeEvent(event: SSEEvent, allRoleIds: string[]): StreamLin
           id: ++lineCounter,
           text,
           color: 'white',
+          markdown: true,
         };
       } else {
         return {
@@ -65,6 +68,7 @@ export function summarizeEvent(event: SSEEvent, allRoleIds: string[]): StreamLin
           text,
           color: 'white',
           indent: true,
+          markdown: true,
         };
       }
     }
@@ -232,6 +236,28 @@ export function summarizeEvent(event: SSEEvent, allRoleIds: string[]): StreamLin
 
 /** Render a single StreamLine */
 function StreamLineRow({ line }: { line: StreamLine }) {
+  // Markdown: inline formatting only (no multi-line splitting — too many elements)
+  if (line.markdown) {
+    // Strip markdown markers for terminal display
+    const cleaned = line.text
+      .replace(/^#{1,4}\s+/gm, '')           // ## heading → heading
+      .replace(/\*\*(.+?)\*\*/g, '$1')        // **bold** → bold
+      .replace(/`(.+?)`/g, '$1')              // `code` → code
+      .replace(/^---+$/gm, '\u2500'.repeat(40)); // --- → line
+
+    return (
+      <Box>
+        {line.indent && <Text>  </Text>}
+        {line.prefix && (
+          <Text color={line.prefixColor} bold>
+            {(line.prefix).padEnd(12)}
+          </Text>
+        )}
+        <Text color={line.color} wrap="wrap">{cleaned}</Text>
+      </Box>
+    );
+  }
+
   return (
     <Box>
       {line.indent && <Text>  </Text>}
@@ -261,19 +287,19 @@ export const CommandMode: React.FC<CommandModeProps> = ({
     if (line) eventLines.push(line);
   }
 
-  // Merge system messages and event lines (cap total to prevent memory bloat)
-  const allLines = [...systemMessages, ...eventLines].slice(-200);
+  // Merge system messages and event lines (cap total)
+  const allLines = [...systemMessages, ...eventLines].slice(-100);
 
   // Split into committed (scrollback) and live (re-rendered)
   const newCommitted = allLines.slice(committedRef.current);
-  if (newCommitted.length > 8) {
-    const toCommit = newCommitted.slice(0, -8);
+  if (newCommitted.length > 6) {
+    const toCommit = newCommitted.slice(0, -6);
     committedRef.current += toCommit.length;
   }
 
   // Cap committed to prevent Static from holding too many items
   const rawCommitted = allLines.slice(0, committedRef.current);
-  const committedLines = rawCommitted.length > 100 ? rawCommitted.slice(-100) : rawCommitted;
+  const committedLines = rawCommitted.length > 50 ? rawCommitted.slice(-50) : rawCommitted;
   const liveLines = allLines.slice(committedRef.current);
 
   const handleSubmit = useCallback((value: string) => {

package/src/tui/components/PanelMode.tsx

@@ -91,11 +91,21 @@ function extractWaveFiles(events: SSEEvent[]): string[] {
   return Array.from(files);
 }
 
-/** Read file preview (first N lines) */
+/** Read file preview (first N lines, cached) */
+const fileCache = new Map<string, string[]>();
 function readFilePreview(filePath: string, maxLines: number): string[] {
+  const cached = fileCache.get(filePath);
+  if (cached) return cached;
   try {
     const content = fs.readFileSync(filePath, 'utf-8');
-    return content.split('\n').slice(0, maxLines);
+    const lines = content.split('\n').slice(0, maxLines);
+    fileCache.set(filePath, lines);
+    // Evict old entries
+    if (fileCache.size > 5) {
+      const first = fileCache.keys().next().value;
+      if (first) fileCache.delete(first);
+    }
+    return lines;
   } catch {
     return ['(cannot read file)'];
   }

package/src/tui/hooks/useSSE.ts

@@ -8,7 +8,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { subscribeToWaveStream, type SSEEvent, type SSEConnection } from '../api';
 
-const MAX_EVENTS = 150;
+const MAX_EVENTS = 100;
 const RECONNECT_DELAY_MS = 3000;
 const MAX_RECONNECT_DELAY_MS = 15000;
 const BATCH_INTERVAL_MS = 300; // Throttle: update React state max ~3x/sec

package/src/tui/utils/markdown.tsx

@@ -0,0 +1,102 @@
+/**
+ * Terminal Markdown Renderer
+ *
+ * Converts markdown text to Ink <Text> elements with basic formatting:
+ * - **bold** → bold text
+ * - `code` → dimmed text
+ * - ## heading → bold colored text
+ * - --- → horizontal line
+ * - | table | → kept as-is (monospace already works)
+ */
+
+import React from 'react';
+import { Text } from 'ink';
+
+interface Segment {
+  text: string;
+  bold?: boolean;
+  dim?: boolean;
+  color?: string;
+}
+
+/** Parse inline markdown (bold, code) into segments */
+function parseInline(text: string): Segment[] {
+  const segments: Segment[] = [];
+  let remaining = text;
+
+  while (remaining.length > 0) {
+    // Bold: **text**
+    const boldMatch = remaining.match(/^(.*?)\*\*(.+?)\*\*(.*)/s);
+    if (boldMatch) {
+      if (boldMatch[1]) segments.push({ text: boldMatch[1] });
+      segments.push({ text: boldMatch[2], bold: true });
+      remaining = boldMatch[3];
+      continue;
+    }
+
+    // Inline code: `text`
+    const codeMatch = remaining.match(/^(.*?)`(.+?)`(.*)/s);
+    if (codeMatch) {
+      if (codeMatch[1]) segments.push({ text: codeMatch[1] });
+      segments.push({ text: codeMatch[2], dim: true, color: 'yellow' });
+      remaining = codeMatch[3];
+      continue;
+    }
+
+    // No more matches — push rest
+    segments.push({ text: remaining });
+    break;
+  }
+
+  return segments;
+}
+
+/** Render a single line of markdown as Ink elements */
+export function renderMarkdownLine(line: string, key: string | number): React.ReactElement {
+  // Horizontal rule
+  if (/^---+$/.test(line.trim())) {
+    return <Text key={key} color="gray">{'\u2500'.repeat(Math.min(60, process.stdout.columns || 60))}</Text>;
+  }
+
+  // Heading: ## text
+  const headingMatch = line.match(/^(#{1,4})\s+(.+)/);
+  if (headingMatch) {
+    const level = headingMatch[1].length;
+    const content = headingMatch[2].replace(/\*\*/g, ''); // Strip bold in headings
+    const color = level <= 2 ? 'cyan' : 'white';
+    return <Text key={key} color={color} bold>{content}</Text>;
+  }
+
+  // Empty line
+  if (!line.trim()) {
+    return <Text key={key}> </Text>;
+  }
+
+  // Regular line with inline formatting
+  const segments = parseInline(line);
+
+  if (segments.length === 1 && !segments[0].bold && !segments[0].dim) {
+    // Simple text — no formatting needed
+    return <Text key={key} color="white">{segments[0].text}</Text>;
+  }
+
+  return (
+    <Text key={key}>
+      {segments.map((seg, i) => (
+        <Text
+          key={i}
+          bold={seg.bold}
+          dimColor={seg.dim}
+          color={seg.color ?? 'white'}
+        >
+          {seg.text}
+        </Text>
+      ))}
+    </Text>
+  );
+}
+
+/** Render multi-line markdown text as array of Ink elements */
+export function renderMarkdown(text: string, baseKey: string | number = 0): React.ReactElement[] {
+  return text.split('\n').map((line, i) => renderMarkdownLine(line, `${baseKey}-${i}`));
+}