tycono 0.1.96-beta.36 → 0.1.96-beta.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tycono",
-  "version": "0.1.96-beta.36",
+  "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/components/PanelMode.tsx

@@ -1,26 +1,29 @@
 /**
- * PanelMode — Wave-scoped team view
+ * PanelMode — Wave-scoped team view with right-panel tabs
  *
- * Shows focused wave's team state:
- *   Left:  Wave title + Org Tree (wave-scoped status) + Wave tabs
- *   Right: Selected role's resources + stream
+ * Left:  Wave title + Org Tree (wave-scoped) + Wave tabs
+ * Right: [Stream] [Docs] [Info] — tab switching with h/l
  *
  * Navigation:
- *   j/k        — move in Org Tree (auto-selects)
+ *   j/k        — move in Org Tree (auto-selects) or scroll in Docs
+ *   h/l        — switch right panel tab
  *   1-9        — switch wave focus
- *   Enter      — toggle filtered/all stream
+ *   Enter      — Stream: toggle filtered/all | Docs: open in vim
  *   Esc        — return to Command Mode
- *   Ctrl+C     — quit
  */
 
 import React, { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
+import fs from 'node:fs';
+import { execSync } from 'node:child_process';
 import { OrgTree } from './OrgTree';
 import { StreamView } from './StreamView';
 import type { OrgNode } from '../store';
 import type { SSEEvent, ActiveSessionInfo, SessionInfo } from '../api';
 import type { WaveInfo } from '../hooks/useCommand';
 
+type RightTab = 'stream' | 'docs' | 'info';
+
 interface PanelModeProps {
   tree: OrgNode[];
   flatRoles: string[];
@@ -39,7 +42,6 @@ interface PanelModeProps {
   onFocusWave: (waveId: string) => void;
 }
 
-/** Get wave-scoped role statuses */
 function getWaveScopedStatuses(
   allSessions: SessionInfo[],
   focusedWaveId: string | null,
@@ -48,30 +50,22 @@ function getWaveScopedStatuses(
   const statuses: Record<string, string> = {};
   for (const s of allSessions) {
     if (s.waveId !== focusedWaveId) continue;
-    if (s.status === 'active') {
-      statuses[s.roleId] = 'working';
-    } else if (!statuses[s.roleId]) {
-      statuses[s.roleId] = 'done';
-    }
+    if (s.status === 'active') statuses[s.roleId] = 'working';
+    else if (!statuses[s.roleId]) statuses[s.roleId] = 'done';
   }
   return statuses;
 }
 
-/** Find active session for a role in focused wave */
 function findSessionForRole(
   activeSessions: ActiveSessionInfo[],
   allSessions: SessionInfo[],
   roleId: string,
   focusedWaveId: string | null,
 ): ActiveSessionInfo | null {
-  // First try: session with matching waveId
   if (focusedWaveId) {
     const waveSes = allSessions.find(s => s.waveId === focusedWaveId && s.roleId === roleId && s.status === 'active');
-    if (waveSes) {
-      return activeSessions.find(s => s.sessionId === waveSes.id) ?? null;
-    }
+    if (waveSes) return activeSessions.find(s => s.sessionId === waveSes.id) ?? null;
   }
-  // Fallback: any active session for this role
   return activeSessions.find(s => s.roleId === roleId && s.status === 'active') ?? null;
 }
 
@@ -82,24 +76,41 @@ function elapsed(startedAt: string): string {
   return `${Math.floor(ms / 3600_000)}h`;
 }
 
+/** Extract files created/modified in this wave from SSE events */
+function extractWaveFiles(events: SSEEvent[]): string[] {
+  const files = new Set<string>();
+  for (const e of events) {
+    if (e.type === 'tool:start') {
+      const name = (e.data.name as string) ?? '';
+      const input = e.data.input as Record<string, unknown> | undefined;
+      if (['Write', 'Edit', 'NotebookEdit'].includes(name) && input?.file_path) {
+        files.add(String(input.file_path));
+      }
+    }
+  }
+  return Array.from(files);
+}
+
+/** Read file preview (first N lines) */
+function readFilePreview(filePath: string, maxLines: number): string[] {
+  try {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    return content.split('\n').slice(0, maxLines);
+  } catch {
+    return ['(cannot read file)'];
+  }
+}
+
 export const PanelMode: React.FC<PanelModeProps> = ({
-  tree,
-  flatRoles,
-  events,
-  selectedRoleIndex,
-  selectedRoleId,
-  streamStatus,
-  waveId,
-  activeSessions,
-  allSessions,
-  waves,
-  focusedWaveId,
-  onMove,
-  onSelect,
-  onEscape,
-  onFocusWave,
+  tree, flatRoles, events, selectedRoleIndex, selectedRoleId,
+  streamStatus, waveId, activeSessions, allSessions, waves,
+  focusedWaveId, onMove, onSelect, onEscape, onFocusWave,
 }) => {
   const [termHeight, setTermHeight] = useState(process.stdout.rows || 30);
+  const [rightTab, setRightTab] = useState<RightTab>('stream');
+  const [docsIndex, setDocsIndex] = useState(0);
+  const [docsScroll, setDocsScroll] = useState(0);
+
   useEffect(() => {
     const onResize = () => setTermHeight(process.stdout.rows || 30);
     process.stdout.on('resize', onResize);
@@ -108,13 +119,11 @@ export const PanelMode: React.FC<PanelModeProps> = ({
 
   const separatorStr = useMemo(() => '\u2502\n'.repeat(Math.max(5, termHeight - 8)), [termHeight]);
 
-  // Wave-scoped statuses for Org Tree
   const waveScopedStatuses = useMemo(
     () => getWaveScopedStatuses(allSessions, focusedWaveId),
     [allSessions, focusedWaveId],
   );
 
-  // Override tree node statuses with wave-scoped values
   const waveScopedTree = useMemo(() => {
     function scopeNode(node: OrgNode): OrgNode {
       return {
@@ -126,11 +135,74 @@ export const PanelMode: React.FC<PanelModeProps> = ({
     return tree.map(scopeNode);
   }, [tree, waveScopedStatuses]);
 
+  // Files created in this wave
+  const waveFiles = useMemo(() => extractWaveFiles(events), [events]);
+
+  // File preview for selected doc
+  const selectedFile = waveFiles[docsIndex] ?? null;
+  const filePreview = useMemo(() => {
+    if (!selectedFile || rightTab !== 'docs') return [];
+    return readFilePreview(selectedFile, 100);
+  }, [selectedFile, rightTab]);
+
   useInput((input, key) => {
     if (key.escape) { onEscape(); return; }
-    if (key.upArrow || input === 'k') { onMove('up'); return; }
-    if (key.downArrow || input === 'j') { onMove('down'); return; }
-    if (key.return) { onSelect(); return; }
+
+    // h/l: switch right panel tab
+    if (input === 'h' || (key.leftArrow && rightTab !== 'stream')) {
+      const tabs: RightTab[] = ['stream', 'docs', 'info'];
+      const idx = tabs.indexOf(rightTab);
+      if (idx > 0) { setRightTab(tabs[idx - 1]); setDocsScroll(0); }
+      return;
+    }
+    if (input === 'l' || (key.rightArrow && rightTab !== 'info')) {
+      const tabs: RightTab[] = ['stream', 'docs', 'info'];
+      const idx = tabs.indexOf(rightTab);
+      if (idx < tabs.length - 1) { setRightTab(tabs[idx + 1]); setDocsScroll(0); }
+      return;
+    }
+
+    // j/k: context-dependent
+    if (key.upArrow || input === 'k') {
+      if (rightTab === 'docs' && docsScroll > 0) {
+        setDocsScroll(s => Math.max(0, s - 3));
+      } else if (rightTab === 'stream') {
+        onMove('up');
+      }
+      return;
+    }
+    if (key.downArrow || input === 'j') {
+      if (rightTab === 'docs') {
+        setDocsScroll(s => s + 3);
+      } else if (rightTab === 'stream') {
+        onMove('down');
+      }
+      return;
+    }
+
+    // Tab key for cycling docs files
+    if (key.tab && rightTab === 'docs') {
+      setDocsIndex(i => (i + 1) % Math.max(1, waveFiles.length));
+      setDocsScroll(0);
+      return;
+    }
+
+    // Enter
+    if (key.return) {
+      if (rightTab === 'docs' && selectedFile) {
+        // Open in vim
+        const editor = process.env.EDITOR || 'vim';
+        try {
+          execSync(`${editor} "${selectedFile}"`, { stdio: 'inherit' });
+        } catch { /* user quit editor */ }
+        return;
+      }
+      if (rightTab === 'stream') {
+        onSelect();
+        return;
+      }
+    }
+
     // 1-9: wave switch
     const num = parseInt(input, 10);
     if (num >= 1 && num <= 9 && num <= waves.length) {
@@ -147,18 +219,15 @@ export const PanelMode: React.FC<PanelModeProps> = ({
     ? flatRoles.includes(selectedRoleId) ? selectedRoleId : 'All'
     : 'All';
 
-  // Find resource info for selected role (wave-scoped)
   const selectedSession = selectedRoleId
     ? findSessionForRole(activeSessions, allSessions, selectedRoleId, focusedWaveId)
     : null;
 
-  // Focused wave info
   const focusedWave = waves.find(w => w.waveId === focusedWaveId);
   const focusedWaveIndex = focusedWaveId
     ? waves.findIndex(w => w.waveId === focusedWaveId) + 1
     : 0;
 
-  // Wave session count for display
   const waveSessionCount = focusedWaveId
     ? allSessions.filter(s => s.waveId === focusedWaveId).length
     : 0;
@@ -167,42 +236,41 @@ export const PanelMode: React.FC<PanelModeProps> = ({
 
   return (
     <Box flexDirection="column" flexGrow={1}>
-      {/* Main content */}
       <Box flexGrow={1}>
         {/* Left: Wave title + Org Tree + Wave tabs */}
         <Box flexDirection="column" width={leftWidth}>
-          {/* Wave title */}
-          {focusedWaveIndex > 0 && (
-            <Box paddingX={1} marginBottom={0}>
-              <Text color="green" bold>Wave {focusedWaveIndex}</Text>
-              {waveSessionCount > 0 && <Text color="gray"> ({waveSessionCount})</Text>}
+          <Box paddingX={1}>
+            <Text color="green" bold>W{focusedWaveIndex}</Text>
+            <Text color="gray"> </Text>
+            <Text color="white" wrap="truncate">
+              {focusedWave?.directive ? focusedWave.directive.slice(0, leftWidth - 6) : '(idle)'}
+            </Text>
+          </Box>
+          {waveSessionCount > 0 && (
+            <Box paddingX={1}>
+              <Text color="gray">{waveSessionCount} sessions</Text>
             </Box>
           )}
 
-          {/* Org Tree (wave-scoped statuses) */}
           <OrgTree
             tree={waveScopedTree}
-            focused={true}
+            focused={rightTab === 'stream'}
             selectedIndex={selectedRoleIndex}
             flatRoles={flatRoles}
             ceoStatus={waveScopedStatuses['ceo'] ?? 'idle'}
           />
 
-          {/* Wave tabs at bottom — compact inline */}
           {waves.length > 1 && (
             <Box paddingX={1} marginTop={1}>
-              <Text color="gray">W </Text>
-              {waves.map((w, i) => {
-                const isFocused = w.waveId === focusedWaveId;
-                return (
-                  <Text key={w.waveId}
-                    color={isFocused ? 'green' : 'gray'}
-                    bold={isFocused}
-                  >
-                    {isFocused ? `[${i + 1}]` : ` ${i + 1} `}
-                  </Text>
-                );
-              })}
+              {waves.map((w, i) => (
+                <Box key={w.waveId} marginRight={1}>
+                  <Text
+                    color={w.waveId === focusedWaveId ? 'green' : 'gray'}
+                    bold={w.waveId === focusedWaveId}
+                    inverse={w.waveId === focusedWaveId}
+                  >{` ${i + 1} `}</Text>
+                </Box>
+              ))}
             </Box>
           )}
         </Box>
@@ -212,71 +280,149 @@ export const PanelMode: React.FC<PanelModeProps> = ({
           <Text color="gray">{separatorStr}</Text>
         </Box>
 
-        {/* Right: Agent Detail + Stream */}
+        {/* Right: Tabbed panel */}
         <Box flexGrow={1} flexDirection="column" overflow="hidden">
-          {/* Agent Resource Header */}
-          {selectedRoleId && selectedSession && (
-            <Box flexDirection="column" paddingX={1} marginBottom={0}>
-              <Box justifyContent="space-between">
-                <Text bold color="cyan">{selectedRoleId}</Text>
-                <Text color={selectedSession.status === 'active' ? 'green' : 'gray'}>
-                  {selectedSession.status === 'active' ? '\u25CF' : '\u25CB'} {selectedSession.status}
-                  {selectedSession.startedAt ? ` (${elapsed(selectedSession.startedAt)})` : ''}
+          {/* Tab bar */}
+          <Box paddingX={1} marginBottom={0}>
+            {(['stream', 'docs', 'info'] as RightTab[]).map(tab => (
+              <Box key={tab} marginRight={1}>
+                <Text
+                  color={rightTab === tab ? 'cyan' : 'gray'}
+                  bold={rightTab === tab}
+                  inverse={rightTab === tab}
+                >
+                  {` ${tab.charAt(0).toUpperCase() + tab.slice(1)} `}
                 </Text>
               </Box>
-              {selectedSession.ports.api > 0 && (
-                <Box>
-                  <Text color="gray">Port  </Text>
-                  <Text color="white">
-                    API:{selectedSession.ports.api} Vite:{selectedSession.ports.vite}
-                    {selectedSession.ports.hmr ? ` HMR:${selectedSession.ports.hmr}` : ''}
-                  </Text>
+            ))}
+            <Text color="gray" dimColor> [h/l] switch</Text>
+          </Box>
+
+          {/* Stream tab */}
+          {rightTab === 'stream' && (
+            <>
+              {selectedRoleId && selectedSession && (
+                <Box flexDirection="column" paddingX={1}>
+                  <Box justifyContent="space-between">
+                    <Text bold color="cyan">{selectedRoleId}</Text>
+                    <Text color={selectedSession.status === 'active' ? 'green' : 'gray'}>
+                      {selectedSession.status === 'active' ? '\u25CF' : '\u25CB'} {selectedSession.status}
+                      {selectedSession.startedAt ? ` (${elapsed(selectedSession.startedAt)})` : ''}
+                    </Text>
+                  </Box>
+                  {selectedSession.ports.api > 0 && (
+                    <Text color="gray">Port API:{selectedSession.ports.api} Vite:{selectedSession.ports.vite}</Text>
+                  )}
+                  <Text color="gray">{'\u2500'.repeat(40)}</Text>
                 </Box>
               )}
-              {selectedSession.worktreePath && (
-                <Box>
-                  <Text color="gray">Tree  </Text>
-                  <Text color="white">{selectedSession.worktreePath}</Text>
+              {selectedRoleId && !selectedSession && (
+                <Box flexDirection="column" paddingX={1}>
+                  <Text bold color="cyan">{selectedRoleId}</Text>
+                  <Text color="gray">(not active in this wave)</Text>
+                  <Text color="gray">{'\u2500'.repeat(40)}</Text>
                 </Box>
               )}
-              {selectedSession.task && (
-                <Box>
-                  <Text color="gray">Task  </Text>
-                  <Text color="white" wrap="truncate">{selectedSession.task.slice(0, 60)}</Text>
-                </Box>
+              <StreamView
+                events={roleEvents}
+                allRoleIds={flatRoles}
+                streamStatus={streamStatus}
+                waveId={waveId}
+                roleLabel={roleLabel}
+              />
+            </>
+          )}
+
+          {/* Docs tab */}
+          {rightTab === 'docs' && (
+            <Box flexDirection="column" paddingX={1} flexGrow={1}>
+              {waveFiles.length === 0 ? (
+                <Text color="gray">No files created in this wave yet.</Text>
+              ) : (
+                <>
+                  {/* File list */}
+                  <Box marginBottom={1}>
+                    <Text color="gray">Files ({waveFiles.length}): </Text>
+                    {waveFiles.map((f, i) => (
+                      <Box key={f} marginRight={1}>
+                        <Text
+                          color={i === docsIndex ? 'cyan' : 'gray'}
+                          bold={i === docsIndex}
+                          inverse={i === docsIndex}
+                        >
+                          {` ${f.split('/').pop()} `}
+                        </Text>
+                      </Box>
+                    ))}
+                    <Text color="gray" dimColor> [Tab] next</Text>
+                  </Box>
+
+                  {/* File preview */}
+                  {selectedFile && (
+                    <Box flexDirection="column">
+                      <Text color="cyan" bold>{selectedFile.split('/').slice(-2).join('/')}</Text>
+                      <Text color="gray">{'\u2500'.repeat(50)}</Text>
+                      {filePreview.slice(docsScroll, docsScroll + termHeight - 12).map((line, i) => (
+                        <Text key={i} color="white" wrap="wrap">{line}</Text>
+                      ))}
+                      {filePreview.length > termHeight - 12 && (
+                        <Text color="gray" dimColor>
+                          {docsScroll > 0 ? '\u2191 ' : ''}j/k scroll | {filePreview.length - docsScroll} lines remaining
+                        </Text>
+                      )}
+                    </Box>
+                  )}
+
+                  <Box marginTop={1}>
+                    <Text color="gray" dimColor>[Enter] open in {process.env.EDITOR || 'vim'} | [Tab] next file | [j/k] scroll</Text>
+                  </Box>
+                </>
               )}
-              <Text color="gray">{'\u2500'.repeat(40)}</Text>
             </Box>
           )}
 
-          {selectedRoleId && !selectedSession && (
-            <Box flexDirection="column" paddingX={1} marginBottom={0}>
-              <Text bold color="cyan">{selectedRoleId}</Text>
-              <Text color="gray">(not active in this wave)</Text>
+          {/* Info tab */}
+          {rightTab === 'info' && (
+            <Box flexDirection="column" paddingX={1}>
+              <Text bold color="cyan">Wave Info</Text>
               <Text color="gray">{'\u2500'.repeat(40)}</Text>
+              <Text color="white">Wave: {focusedWave?.waveId ?? 'none'}</Text>
+              <Text color="white">Directive: {focusedWave?.directive || '(idle)'}</Text>
+              <Text color="white">Sessions: {waveSessionCount}</Text>
+              <Text color="white">Files modified: {waveFiles.length}</Text>
+              <Text color="white">SSE events: {events.length}</Text>
+
+              {/* Active sessions in this wave */}
+              {waveSessionCount > 0 && (
+                <>
+                  <Text color="gray" bold>{'\n'}Active in this wave:</Text>
+                  {allSessions
+                    .filter(s => s.waveId === focusedWaveId && s.status === 'active')
+                    .slice(0, 10)
+                    .map(s => {
+                      const port = activeSessions.find(a => a.sessionId === s.id);
+                      return (
+                        <Text key={s.id} color="white">
+                          {`  ${s.roleId.padEnd(12)} ${s.id.slice(0, 20)} ${port ? `API:${port.ports.api}` : ''}`}
+                        </Text>
+                      );
+                    })
+                  }
+                </>
+              )}
             </Box>
           )}
-
-          {/* Stream */}
-          <StreamView
-            events={roleEvents}
-            allRoleIds={flatRoles}
-            streamStatus={streamStatus}
-            waveId={waveId}
-            roleLabel={roleLabel}
-          />
         </Box>
       </Box>
 
-      {/* Separator */}
+      {/* Footer */}
       <Box width="100%">
         <Text color="gray">{'\u2500'.repeat(process.stdout.columns || 70)}</Text>
       </Box>
-
-      {/* Footer hints */}
       <Box paddingX={1} justifyContent="center">
         <Text color="gray" dimColor>
-          [j/k] move  [Enter] all/role  {waves.length > 1 ? '[1-9] wave  ' : ''}[Esc] command  [Ctrl+C] quit
+          [h/l] tab  [j/k] {rightTab === 'stream' ? 'role' : 'scroll'}  {rightTab === 'docs' ? '[Enter] vim  ' : ''}
+          {waves.length > 1 ? '[1-9] wave  ' : ''}[Esc] command
         </Text>
       </Box>
     </Box>

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