tycono 0.1.96-beta.37 → 0.1.96-beta.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tycono",
-  "version": "0.1.96-beta.37",
+  "version": "0.1.96-beta.38",
   "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';
+import { renderMarkdownLine } from '../utils/markdown';
 
 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,43 @@ export function summarizeEvent(event: SSEEvent, allRoleIds: string[]): StreamLin
 
 /** Render a single StreamLine */
 function StreamLineRow({ line }: { line: StreamLine }) {
+  // Multi-line markdown: split and render each line
+  if (line.markdown && line.text.includes('\n')) {
+    const lines = line.text.split('\n');
+    return (
+      <Box flexDirection="column">
+        {lines.map((l, i) => (
+          <Box key={i}>
+            {line.indent && <Text>  </Text>}
+            {line.prefix && i === 0 && (
+              <Text color={line.prefixColor} bold>
+                {(line.prefix).padEnd(12)}
+              </Text>
+            )}
+            {line.prefix && i > 0 && <Text>{' '.repeat(12)}</Text>}
+            {renderMarkdownLine(l, `${line.id}-${i}`)}
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  // Single line with markdown
+  if (line.markdown) {
+    return (
+      <Box>
+        {line.indent && <Text>  </Text>}
+        {line.prefix && (
+          <Text color={line.prefixColor} bold>
+            {(line.prefix).padEnd(12)}
+          </Text>
+        )}
+        {renderMarkdownLine(line.text, line.id)}
+      </Box>
+    );
+  }
+
+  // Plain text (tools, system messages)
   return (
     <Box>
       {line.indent && <Text>  </Text>}

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