tycono 0.3.14-beta.9 → 0.3.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tycono",
-  "version": "0.3.14-beta.9",
+  "version": "0.3.14",
   "description": "Build an AI company. Watch them work.",
   "type": "module",
   "bin": {
@@ -35,7 +35,7 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
     "express": "^5.0.1",
-    "glob": "^11.0.1",
+    "glob": "^13.0.6",
     "gray-matter": "^4.0.3",
     "ink": "^5.2.1",
     "ink-select-input": "^6.2.0",

package/src/tui/app.tsx

@@ -14,8 +14,6 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
 import { StatusBar } from './components/StatusBar';
-import { OrgTree } from './components/OrgTree';
-import { StreamView } from './components/StreamView';
 import { CommandMode, type StreamLine } from './components/CommandMode';
 import { PanelMode } from './components/PanelMode';
 import { SetupWizard } from './components/SetupWizard';
@@ -632,6 +630,8 @@ export const App: React.FC = () => {
       return;
     }
     if (mode === 'command' && key.tab) {
+      // Clear terminal before Panel Mode (removes Command Mode scrollback)
+      process.stdout.write('\x1b[2J\x1b[H');
       setMode('panel');
     }
   });
@@ -670,52 +670,9 @@ export const App: React.FC = () => {
   // Command Mode: scrollable terminal (no fullscreen)
   // Panel Mode: fullscreen (intentional — like vim for inspection)
   if (mode === 'panel') {
-    // OOM debug levels: 0=full, 1=minimal, 2=orgTree only, 3=stream only
-    const debugLevel = parseInt(process.env.PANEL_MINIMAL || '0', 10);
-    if (debugLevel === 1) {
-      return (
-        <Box flexDirection="column">
-          <Text color="cyan">Panel Mode (minimal)</Text>
-          <Text color="gray">Events: {sse.events.length} | Press Esc</Text>
-        </Box>
-      );
-    }
-    if (debugLevel === 2) {
-      return (
-        <Box flexDirection="column">
-          <OrgTree tree={orgTree} focused={true} selectedIndex={0} flatRoles={flatRoleIds} ceoStatus="idle" />
-          <Text color="gray">OrgTree only | Press Esc</Text>
-        </Box>
-      );
-    }
-    if (debugLevel === 3) {
-      return (
-        <Box flexDirection="column">
-          <StreamView events={sse.events} allRoleIds={flatRoleIds} streamStatus={sse.streamStatus} waveId={focusedWaveId} roleLabel="All" />
-          <Text color="gray">StreamView only | Press Esc</Text>
-        </Box>
-      );
-    }
-    if (debugLevel === 4) {
-      // Full layout structure but empty content
-      return (
-        <Box flexDirection="column" height={termHeight}>
-          <Box flexGrow={1}>
-            <Box flexDirection="column" width={28}>
-              <Text color="green">Left Panel</Text>
-            </Box>
-            <Text color="gray">{'\u2502'}</Text>
-            <Box flexGrow={1} flexDirection="column" overflow="hidden">
-              <Text color="cyan">Right Panel</Text>
-            </Box>
-          </Box>
-          <StatusBar companyName="test" waveIndex={1} waveCount={1} waveStatus="idle" activeCount={0} portCount={0} totalCost={0} />
-        </Box>
-      );
-    }
     return (
       <Box flexDirection="column">
-        <Box flexGrow={1} flexDirection="column">
+        <Box flexDirection="column">
           <PanelMode
             tree={orgTree}
             flatRoles={flatRoleIds}

package/src/tui/components/CommandMode.tsx

@@ -83,16 +83,8 @@ export function summarizeEvent(event: SSEEvent, allRoleIds: string[]): StreamLin
     }
 
     case 'thinking': {
-      const text = ((event.data.text as string) ?? '').slice(0, 120);
-      if (!text.trim()) return null;
-      return {
-        id: ++lineCounter,
-        prefix: isSupervisor ? undefined : event.roleId,
-        prefixColor: roleColor,
-        text: `\uD83D\uDCAD ${text}`,
-        color: 'gray',
-        indent: !isSupervisor,
-      };
+      // Hide thinking by default — internal noise for user
+      return null;
     }
 
     case 'dispatch:start': {
@@ -130,17 +122,18 @@ export function summarizeEvent(event: SSEEvent, allRoleIds: string[]): StreamLin
 
     case 'tool:start': {
       const toolName = (event.data.name as string) ?? 'tool';
+      // Only show Write/Edit (file changes) + Bash (commands). Hide Read/Grep/Glob (noise).
+      const isWrite = ['Write', 'Edit', 'NotebookEdit'].includes(toolName);
+      if (!isWrite) return null; // Only show file writes — hide Read/Grep/Glob/Bash
+
       const input = event.data.input;
       let detail = '';
       if (input && typeof input === 'object') {
         const inp = input as Record<string, unknown>;
-        if (inp.file_path) detail = ` ${String(inp.file_path)}`;
-        else if (inp.command) detail = ` ${String(inp.command).slice(0, 80)}`;
-        else if (inp.pattern) detail = ` ${String(inp.pattern)}`;
-        else if (inp.description) detail = ` ${String(inp.description).slice(0, 60)}`;
+        if (inp.file_path) detail = ` ${String(inp.file_path).split('/').slice(-2).join('/')}`;
+        else if (inp.command) detail = ` ${String(inp.command).slice(0, 60)}`;
+        else if (inp.description) detail = ` ${String(inp.description).slice(0, 40)}`;
       }
-      // Highlight file writes
-      const isWrite = ['Write', 'Edit'].includes(toolName);
       return {
         id: ++lineCounter,
         prefix: isSupervisor ? undefined : event.roleId,
@@ -152,15 +145,8 @@ export function summarizeEvent(event: SSEEvent, allRoleIds: string[]): StreamLin
     }
 
     case 'tool:result': {
-      const toolName = (event.data.name as string) ?? 'tool';
-      return {
-        id: ++lineCounter,
-        prefix: isSupervisor ? undefined : event.roleId,
-        prefixColor: roleColor,
-        text: `  \u2190 ${toolName} done`,
-        color: 'gray',
-        indent: !isSupervisor,
-      };
+      // Hide tool results — tool:start is sufficient
+      return null;
     }
 
     case 'msg:start': {
@@ -421,10 +407,10 @@ export const CommandMode: React.FC<CommandModeProps> = ({
   const handleSubmit = useCallback((value: string) => {
     const trimmed = value.trim();
     if (trimmed) {
-      // Show user input immediately in scrollback (before AI responds)
+      // Show user input with visual separator for emphasis
       setUserInputs(prev => [...prev.slice(-10), {
         id: ++lineCounter,
-        text: `> ${trimmed}`,
+        text: `\u2501\u2501 > ${trimmed}`,
         color: 'green',
       }]);
       onSubmit(trimmed);

package/src/tui/components/OrgTree.tsx

@@ -1,6 +1,6 @@
 /**
- * OrgTree — left panel showing organization hierarchy with real-time status
- * CEO is now selectable (index 0 in flatRoles)
+ * OrgTree — left panel showing organization hierarchy
+ * Simplified to single Text render to prevent yoga OOM on wide terminals
  */
 
 import React from 'react';
@@ -16,103 +16,36 @@ interface OrgTreeProps {
   ceoStatus?: string;
 }
 
-function statusColor(status: string): string {
-  switch (status) {
-    case 'working':
-    case 'streaming':
-      return 'green';
-    case 'done':
-      return 'gray';
-    case 'error':
-      return 'red';
-    case 'awaiting_input':
-      return 'yellow';
-    default:
-      return 'gray';
-  }
-}
-
-interface FlatEntry {
-  roleId: string;
-  level: string;
-  status: string;
-  prefix: string;
-}
-
-function flattenTree(nodes: OrgNode[], prefix: string = '', isLast: boolean[] = []): FlatEntry[] {
-  const result: FlatEntry[] = [];
-
+function flattenTree(nodes: OrgNode[], isLast: boolean[] = []): Array<{ roleId: string; status: string; line: string }> {
+  const result: Array<{ roleId: string; status: string; line: string }> = [];
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
     const last = i === nodes.length - 1;
-
-    let linePrefix = '';
+    let prefix = '';
     for (let j = 0; j < isLast.length; j++) {
-      linePrefix += isLast[j] ? '   ' : '\u2502  ';
+      prefix += isLast[j] ? '   ' : '\u2502  ';
     }
-    linePrefix += isLast.length > 0 || i > 0 || nodes.length > 1
-      ? (last ? '\u2514\u2500 ' : '\u251C\u2500 ')
-      : '';
-
-    result.push({
-      roleId: node.role.id,
-      level: node.role.level,
-      status: node.status,
-      prefix: linePrefix,
-    });
-
+    prefix += last ? '\u2514\u2500 ' : '\u251C\u2500 ';
+    const icon = statusIcon(node.status);
+    result.push({ roleId: node.role.id, status: node.status, line: `${prefix}${icon} ${node.role.id}` });
     if (node.children.length > 0) {
-      result.push(...flattenTree(node.children, '', [...isLast, last]));
+      result.push(...flattenTree(node.children, [...isLast, last]));
     }
   }
-
   return result;
 }
 
 export const OrgTree: React.FC<OrgTreeProps> = React.memo(({ tree, focused, selectedIndex, flatRoles, ceoStatus }) => {
-  const entries = flattenTree(tree);
-  const isCeoSelected = focused && flatRoles[selectedIndex] === 'ceo';
   const ceoIcon = statusIcon(ceoStatus ?? 'idle');
-  const ceoColor = statusColor(ceoStatus ?? 'idle');
+  const entries = flattenTree(tree);
+
+  // Render entire tree as single Text block (1 yoga node instead of 50+)
+  const lines = [`${ceoIcon} CEO`, ...entries.map(e => e.line)];
 
   return (
     <Box flexDirection="column" paddingX={1}>
       <Text bold color={focused ? 'cyan' : 'gray'}>{'\u2500\u2500 Org Tree \u2500\u2500'}</Text>
-      <Box marginTop={1}>
-        <Text color={ceoColor} bold={ceoStatus === 'working'}>{ceoIcon} </Text>
-        <Text
-          color={isCeoSelected ? 'cyan' : 'yellow'}
-          bold={isCeoSelected}
-          inverse={isCeoSelected}
-        >
-          CEO
-        </Text>
-      </Box>
-      {entries.map((entry, i) => {
-        const isSelected = focused && flatRoles[selectedIndex] === entry.roleId;
-        const icon = statusIcon(entry.status);
-        const color = statusColor(entry.status);
-
-        return (
-          <Box key={entry.roleId + '-' + i}>
-            <Text color="gray">{entry.prefix}</Text>
-            <Text
-              color={color}
-              bold={entry.status === 'working'}
-            >
-              {icon}
-            </Text>
-            <Text> </Text>
-            <Text
-              color={isSelected ? 'cyan' : 'white'}
-              bold={isSelected}
-              inverse={isSelected}
-            >
-              {entry.roleId}
-            </Text>
-          </Box>
-        );
-      })}
+      <Text color="white">{'\n' + lines.join('\n')}</Text>
     </Box>
   );
 });

package/src/tui/components/PanelMode.tsx

@@ -1,30 +1,21 @@
 /**
- * PanelMode — Wave-scoped team view with right-panel tabs
+ * PanelMode — Wave-scoped team view (text-based render)
  *
- * 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) or scroll in Docs
- *   h/l        — switch right panel tab
- *   1-9        — switch wave focus
- *   Enter      — Stream: toggle filtered/all | Docs: open in vim
- *   Esc        — return to Command Mode
+ * ⛔ yoga-layout OOMs on 245+ column terminals with nested Box.
+ * Solution: flat <Text> elements only, no Box nesting beyond 1 level.
+ * Layout is string-based with manual padding.
  */
 
 import React, { useState, useEffect, useMemo } from 'react';
 import { Box, Text, useInput } from 'ink';
 import fs from 'node:fs';
+import path from 'node:path';
 import { execSync } from 'node:child_process';
-import { OrgTree } from './OrgTree';
-import { StreamView } from './StreamView';
 import type { OrgNode } from '../store';
-import path from 'node:path';
 import type { SSEEvent, ActiveSessionInfo, SessionInfo } from '../api';
 import type { WaveInfo } from '../hooks/useCommand';
 
 type RightTab = 'stream' | 'docs' | 'info';
-type DocsFilter = 'all' | 'wave' | 'kb' | 'projects';
 
 interface PanelModeProps {
   tree: OrgNode[];
@@ -45,99 +36,61 @@ interface PanelModeProps {
   onFocusWave: (waveId: string) => void;
 }
 
-function getWaveScopedStatuses(
-  allSessions: SessionInfo[],
-  focusedWaveId: string | null,
-): Record<string, string> {
-  if (!focusedWaveId) return {};
-  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';
-  }
-  return statuses;
-}
+/* ─── Helpers ─── */
 
-function findSessionForRole(
-  activeSessions: ActiveSessionInfo[],
-  allSessions: SessionInfo[],
-  roleId: string,
-  focusedWaveId: string | null,
-): ActiveSessionInfo | null {
-  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;
+function getWaveScopedStatuses(sessions: SessionInfo[], waveId: string | null): Record<string, string> {
+  if (!waveId) return {};
+  const s: Record<string, string> = {};
+  for (const ses of sessions) {
+    if (ses.waveId !== waveId) continue;
+    if (ses.status === 'active') s[ses.roleId] = 'working';
+    else if (!s[ses.roleId]) s[ses.roleId] = 'done';
   }
-  return activeSessions.find(s => s.roleId === roleId && s.status === 'active') ?? null;
+  return s;
 }
 
-function elapsed(startedAt: string): string {
-  const ms = Date.now() - new Date(startedAt).getTime();
-  if (ms < 60_000) return `${Math.floor(ms / 1000)}s`;
-  if (ms < 3600_000) return `${Math.floor(ms / 60_000)}m`;
-  return `${Math.floor(ms / 3600_000)}h`;
-}
-
-/** Scan COMPANY_ROOT for .md files (cached) */
-let mdFileCache: { root: string; files: string[] } | null = null;
-function scanMdFiles(companyRoot: string): string[] {
-  if (mdFileCache && mdFileCache.root === companyRoot) return mdFileCache.files;
-  const results: string[] = [];
-  const skip = new Set(['.git', 'node_modules', '.tycono', '.worktrees', 'dist', '.claude']);
-  function walk(dir: string, depth: number) {
-    if (depth > 3) return; // Don't go too deep
-    try {
-      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
-        if (skip.has(entry.name)) continue;
-        const full = path.join(dir, entry.name);
-        if (entry.isDirectory()) {
-          walk(full, depth + 1);
-        } else if (entry.name.endsWith('.md')) {
-          results.push(full);
-        }
-      }
-    } catch { /* permission error etc */ }
+function flattenTree(nodes: OrgNode[], isLast: boolean[] = []): Array<{ roleId: string; status: string; line: string }> {
+  const result: Array<{ roleId: string; status: string; line: string }> = [];
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const last = i === nodes.length - 1;
+    let prefix = '';
+    for (const l of isLast) prefix += l ? '   ' : '\u2502  ';
+    prefix += last ? '\u2514\u2500 ' : '\u251C\u2500 ';
+    const icon = node.status === 'working' ? '\u25CF' : node.status === 'done' ? '\u2713' : '\u25CB';
+    result.push({ roleId: node.role.id, status: node.status, line: `${prefix}${icon} ${node.role.id}` });
+    if (node.children.length > 0) result.push(...flattenTree(node.children, [...isLast, last]));
   }
-  walk(companyRoot, 0);
-  mdFileCache = { root: companyRoot, files: results };
-  return results;
+  return result;
 }
 
-/** 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));
-      }
+function eventLine(ev: SSEEvent): string | null {
+  let t: string;
+  try { t = new Date(ev.ts).toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }); }
+  catch { t = '--:--:--'; }
+  const r = (ev.roleId ?? '').padEnd(12);
+  switch (ev.type) {
+    case 'text': { const x = ((ev.data.text as string) ?? '').trim(); return x ? `${t} ${r} ${x}` : null; } // keep \n — split later
+    case 'thinking': return null; // Hide thinking — noise
+    case 'tool:start': {
+      const n = (ev.data.name as string) ?? '';
+      // Only show Write/Edit/Bash — hide Read/Grep/Glob (noise)
+      if (!['Write', 'Edit', 'NotebookEdit', 'Bash'].includes(n)) return null;
+      const inp = ev.data.input as Record<string, unknown> | undefined;
+      const d = inp ? ((inp.file_path as string)?.split('/').slice(-2).join('/') || (inp.command as string)?.slice(0, 50) || '').slice(0, 50) : '';
+      return `${t} ${r} ${n === 'Bash' ? '\u2192' : '\u{1F4C4}'} ${n} ${d}`;
     }
+    case 'tool:result': return null; // Hide — start is enough
+    case 'msg:start': return `${t} ${r} \u25B6 Started`;
+    case 'msg:done': { const turns = ev.data.turns as number | undefined; return `${t} ${r} \u2713 Done${turns ? ` (${turns} turns)` : ''}`; }
+    case 'msg:error': return `${t} ${r} \u2717 ${((ev.data.error ?? ev.data.message) as string ?? '').slice(0, 60)}`;
+    case 'dispatch:start': return `${t} ${r} \u21D2 dispatch ${ev.data.targetRole as string ?? ''}`;
+    case 'msg:awaiting_input': return `${t} ${r} ? awaiting input`;
+    default: return null;
   }
-  return Array.from(files);
 }
 
-/** 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');
-    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)'];
-  }
-}
+/* ─── Component ─── */
 
 const PanelModeInner: React.FC<PanelModeProps> = ({
   tree, flatRoles, events, selectedRoleIndex, selectedRoleId,
@@ -146,420 +99,221 @@ const PanelModeInner: React.FC<PanelModeProps> = ({
 }) => {
   const [termHeight, setTermHeight] = useState(process.stdout.rows || 30);
   const [rightTab, setRightTab] = useState<RightTab>('stream');
-  const [docsFilter, setDocsFilter] = useState<DocsFilter>('all');
   const [docsIndex, setDocsIndex] = useState(0);
-  const [docsScroll, setDocsScroll] = useState(0);
 
   useEffect(() => {
-    const onResize = () => setTermHeight(process.stdout.rows || 30);
-    process.stdout.on('resize', onResize);
-    return () => { process.stdout.off('resize', onResize); };
+    const fn = () => setTermHeight(process.stdout.rows || 30);
+    process.stdout.on('resize', fn);
+    return () => { process.stdout.off('resize', fn); };
   }, []);
 
-  // OOM fix: single separator character instead of repeated newlines
-  // Previous: '│\n'.repeat(30) created 30 yoga nodes → layout explosion on large terminals
-  const separatorStr = '\u2502';
-
-  const waveScopedStatuses = useMemo(
-    () => getWaveScopedStatuses(allSessions, focusedWaveId),
-    [allSessions, focusedWaveId],
-  );
-
-  const waveScopedTree = useMemo(() => {
-    function scopeNode(node: OrgNode): OrgNode {
-      return {
-        ...node,
-        status: waveScopedStatuses[node.role.id] ?? 'idle',
-        children: node.children.map(scopeNode),
-      };
-    }
-    return tree.map(scopeNode);
-  }, [tree, waveScopedStatuses]);
-
-  // Wave files (from SSE events) — only compute when needed
-  const waveFileSet = useMemo(() => {
-    if (rightTab !== 'docs' && rightTab !== 'info') return new Set<string>();
-    return new Set(extractWaveFiles(events));
-  }, [rightTab === 'docs' || rightTab === 'info' ? events.length : 0, rightTab]);
-
-  // Build docs list from filesystem scan + wave files
-  const docsList = useMemo(() => {
-    if (rightTab !== 'docs') return [];
+  const statuses = useMemo(() => getWaveScopedStatuses(allSessions, focusedWaveId), [allSessions, focusedWaveId]);
+  const scopedTree = useMemo(() => {
+    const scope = (n: OrgNode): OrgNode => ({ ...n, status: statuses[n.role.id] ?? 'idle', children: n.children.map(scope) });
+    return tree.map(scope);
+  }, [tree, statuses]);
 
-    interface DocEntry { path: string; title: string; isWave: boolean; }
-    const entries: DocEntry[] = [];
-
-    // Scan all .md files from COMPANY_ROOT
-    const allMdFiles = companyRoot ? scanMdFiles(companyRoot) : [];
-
-    for (const filePath of allMdFiles) {
-      const rel = filePath.replace(companyRoot + '/', '');
-      const isWave = waveFileSet.has(filePath);
-      const isKb = rel.startsWith('knowledge/');
-      const isProject = rel.startsWith('projects/');
-
-      if (docsFilter === 'wave' && !isWave) continue;
-      if (docsFilter === 'kb' && !isKb) continue;
-      if (docsFilter === 'projects' && !isProject) continue;
-
-      entries.push({ path: filePath, title: rel, isWave });
-    }
-
-    // Wave-only files not already in list (e.g. code files written by agents)
-    for (const f of waveFileSet) {
-      if (!entries.some(e => e.path === f)) {
-        if (docsFilter === 'kb' || docsFilter === 'projects') continue;
-        entries.push({ path: f, title: f.split('/').pop() || f, isWave: true });
-      }
-    }
-
-    // Sort: wave files first, then alphabetical
-    entries.sort((a, b) => {
-      if (a.isWave && !b.isWave) return -1;
-      if (!a.isWave && b.isWave) return 1;
-      return a.title.localeCompare(b.title);
-    });
-
-    return entries;
-  }, [rightTab, docsFilter, companyRoot, waveFileSet]);
-
-  const selectedDoc = docsList[docsIndex] ?? null;
-  const filePreview = useMemo(() => {
-    if (!selectedDoc || rightTab !== 'docs') return [];
-    return readFilePreview(selectedDoc.path, 60);
-  }, [selectedDoc?.path, rightTab]);
+  const focusedWave = waves.find(w => w.waveId === focusedWaveId);
+  const focusedWaveIndex = focusedWaveId ? waves.findIndex(w => w.waveId === focusedWaveId) + 1 : 0;
+  const waveSessionCount = focusedWaveId ? allSessions.filter(s => s.waveId === focusedWaveId).length : 0;
 
+  // Key handling
   useInput((input, key) => {
     if (key.escape) { onEscape(); return; }
-
-    // h/l: switch right panel tab
-    if (input === 'h' || (key.leftArrow && rightTab !== 'stream')) {
+    if (input === 'h' || key.leftArrow) {
       const tabs: RightTab[] = ['stream', 'docs', 'info'];
       const idx = tabs.indexOf(rightTab);
-      if (idx > 0) { setRightTab(tabs[idx - 1]); setDocsScroll(0); }
+      if (idx > 0) setRightTab(tabs[idx - 1]);
       return;
     }
-    if (input === 'l' || (key.rightArrow && rightTab !== 'info')) {
+    if (input === 'l' || key.rightArrow) {
       const tabs: RightTab[] = ['stream', 'docs', 'info'];
       const idx = tabs.indexOf(rightTab);
-      if (idx < tabs.length - 1) { setRightTab(tabs[idx + 1]); setDocsScroll(0); }
+      if (idx < tabs.length - 1) setRightTab(tabs[idx + 1]);
       return;
     }
-
-    // j/k: context-dependent
-    if (key.upArrow || input === 'k') {
-      if (rightTab === 'docs') {
-        if (docsScroll > 0) {
-          setDocsScroll(s => Math.max(0, s - 3));
-        } else {
-          setDocsIndex(i => Math.max(0, i - 1));
-        }
-      } else if (rightTab === 'stream') {
-        onMove('up');
-      }
+    // j/k context-dependent
+    if (input === 'k' || key.upArrow) {
+      if (rightTab === 'docs') { setDocsIndex(i => Math.max(0, i - 1)); }
+      else { onMove('up'); }
       return;
     }
-    if (key.downArrow || input === 'j') {
-      if (rightTab === 'docs') {
-        if (docsScroll > 0) {
-          setDocsScroll(s => s + 3);
-        } else {
-          setDocsIndex(i => Math.min(docsList.length - 1, i + 1));
-        }
-      } else if (rightTab === 'stream') {
-        onMove('down');
-      }
+    if (input === 'j' || key.downArrow) {
+      if (rightTab === 'docs') { setDocsIndex(i => i + 1); } // capped later by docsList length
+      else { onMove('down'); }
       return;
     }
-
-    // Docs filter: 1-4
-    if (rightTab === 'docs') {
-      const filters: DocsFilter[] = ['all', 'wave', 'kb', 'projects'];
-      const fi = parseInt(input, 10);
-      if (fi >= 1 && fi <= 4) {
-        setDocsFilter(filters[fi - 1]);
-        setDocsIndex(0);
-        setDocsScroll(0);
-        return;
-      }
-    }
-
-    // Tab key for cycling docs files
-    if (key.tab && rightTab === 'docs') {
-      setDocsIndex(i => (i + 1) % Math.max(1, docsList.length));
-      setDocsScroll(0);
-      return;
-    }
-
-    // Enter
     if (key.return) {
-      if (rightTab === 'docs' && selectedDoc) {
-        const editor = process.env.EDITOR || 'vim';
+      if (rightTab === 'docs' && selectedDocPath) {
         try {
-          execSync(`${editor} "${selectedDoc.path}"`, { stdio: 'inherit' });
-        } catch { /* user quit editor */ }
-        fileCache.delete(selectedDoc.path); // Invalidate cache after edit
-        return;
-      }
-      if (rightTab === 'stream') {
+          const editor = process.env.EDITOR || 'vim';
+          execSync(`${editor} "${selectedDocPath}"`, { stdio: 'inherit' });
+        } catch { /* ignore */ }
+      } else {
         onSelect();
-        return;
       }
+      return;
     }
-
-    // 1-9: wave switch (only in stream/info tabs — docs uses 1-4 for filters)
-    if (rightTab !== 'docs') {
-      const num = parseInt(input, 10);
-      if (num >= 1 && num <= 9 && num <= waves.length) {
-        onFocusWave(waves[num - 1].waveId);
-      }
+    // Wave switch 1-9
+    const num = parseInt(input, 10);
+    if (num >= 1 && num <= 9 && num <= waves.length) {
+      onFocusWave(waves[num - 1].waveId);
     }
   });
 
-  // Filter events for selected role
-  const roleEvents = selectedRoleId
-    ? events.filter((e) => e.roleId === selectedRoleId)
-    : events;
-
-  const roleLabel = selectedRoleId
-    ? flatRoles.includes(selectedRoleId) ? selectedRoleId : 'All'
-    : 'All';
-
-  const selectedSession = selectedRoleId
-    ? findSessionForRole(activeSessions, allSessions, selectedRoleId, focusedWaveId)
-    : null;
-
-  const focusedWave = waves.find(w => w.waveId === focusedWaveId);
-  const focusedWaveIndex = focusedWaveId
-    ? waves.findIndex(w => w.waveId === focusedWaveId) + 1
-    : 0;
-
-  const waveSessionCount = focusedWaveId
-    ? allSessions.filter(s => s.waveId === focusedWaveId).length
-    : 0;
-
-  // Read preset from wave file on disk
-  const wavePreset = useMemo(() => {
-    if (!focusedWaveId || !companyRoot) return null;
+  const leftWidth = 28;
+  const termCols = process.stdout.columns || 120;
+  const rightWidth = termCols - leftWidth - 3;
+  const headerLines = 2;
+  const footerLines = 3;
+  const contentHeight = Math.max(termHeight - headerLines - footerLines, 5);
+
+  // === Build left column: OrgTree ===
+  const ceoIcon = statuses['ceo'] === 'working' ? '\u25CF' : statuses['ceo'] === 'done' ? '\u2713' : '\u25CB';
+  const isCeoSelected = flatRoles[selectedRoleIndex] === 'ceo';
+  const treeEntries = flattenTree(scopedTree);
+
+  const leftLines: Array<{ text: string; selected: boolean; working: boolean }> = [
+    { text: `${ceoIcon} CEO`, selected: isCeoSelected, working: statuses['ceo'] === 'working' },
+    ...treeEntries.map(e => ({
+      text: e.line,
+      selected: e.roleId === flatRoles[selectedRoleIndex],
+      working: e.status === 'working',
+    })),
+  ];
+
+  // Derive selectedRoleId from index (more reliable than prop — avoids sync issues)
+  const activeRoleId = flatRoles[selectedRoleIndex] ?? null;
+
+  // === Build right column: Stream/Info/Docs ===
+  const rightContentLines: string[] = [];
+  let selectedDocPath: string | null = null;
+  if (rightTab === 'stream') {
+    if (activeRoleId) rightContentLines.push(`\u25B8 ${activeRoleId}`);
+    const maxEv = Math.max(5, contentHeight - 3);
+    const filtered = activeRoleId ? events.filter(e => e.roleId === activeRoleId) : events;
+    const visible = filtered.slice(-maxEv);
+    for (const ev of visible) {
+      const line = eventLine(ev);
+      if (!line) continue;
+      // Split multi-line text events into separate lines (preserves markdown)
+      const sublines = line.split('\n');
+      for (const sl of sublines) {
+        if (rightContentLines.length >= maxEv) break;
+        rightContentLines.push(sl.slice(0, rightWidth));
+      }
+    }
+    if (rightContentLines.length === 0) {
+      if (activeRoleId && events.length > 0) {
+        rightContentLines.push(`No events for ${activeRoleId} (${events.length} total)`);
+        rightContentLines.push('Press Enter to show all roles');
+      } else {
+        rightContentLines.push(waveId ? `Waiting for events... (${events.length} in buffer)` : 'No active stream. Type a directive to start.');
+      }
+    }
+  } else if (rightTab === 'info') {
+    rightContentLines.push(`Wave: ${focusedWave?.waveId ?? 'none'}`);
+    rightContentLines.push(`Directive: ${focusedWave?.directive?.slice(0, rightWidth - 12) || '(idle)'}`);
+    rightContentLines.push(`Sessions: ${waveSessionCount}  Events: ${events.length}`);
+    rightContentLines.push(`Stream: ${streamStatus}`);
+  } else if (rightTab === 'docs') {
+    // Docs: scan .md files with j/k scroll + Enter to open
     try {
-      const wavePath = path.join(companyRoot, 'operations', 'waves', `${focusedWaveId}.json`);
-      if (fs.existsSync(wavePath)) {
-        const data = JSON.parse(fs.readFileSync(wavePath, 'utf-8'));
-        return data.preset as string | undefined;
+      const skip = new Set(['.git', 'node_modules', '.tycono', '.worktrees', 'dist', '.claude', '.obsidian']);
+      const mdFiles: string[] = [];
+      const mdPaths: string[] = []; // full paths for vim
+      const walk = (dir: string, depth: number) => {
+        if (depth > 3 || mdFiles.length > 200) return;
+        try {
+          for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+            if (skip.has(e.name)) continue;
+            const full = path.join(dir, e.name);
+            if (e.isDirectory()) walk(full, depth + 1);
+            else if (e.name.endsWith('.md')) {
+              mdFiles.push(full.replace(companyRoot + '/', ''));
+              mdPaths.push(full);
+            }
+          }
+        } catch {}
+      };
+      walk(companyRoot, 0);
+      mdFiles.sort();
+      mdPaths.sort();
+      // Cap docsIndex
+      const cappedIdx = Math.min(docsIndex, mdFiles.length - 1);
+      if (cappedIdx !== docsIndex) setDocsIndex(Math.max(0, cappedIdx));
+      selectedDocPath = mdPaths[cappedIdx] ?? null;
+
+      const maxVisible = Math.max(5, termHeight - 12);
+      const scrollStart = Math.max(0, Math.min(cappedIdx - 3, mdFiles.length - maxVisible));
+      rightContentLines.push(`${mdFiles.length} documents  [j/k] browse  [Enter] ${process.env.EDITOR || 'vim'}`);
+      for (let i = scrollStart; i < Math.min(scrollStart + maxVisible, mdFiles.length); i++) {
+        const selected = i === cappedIdx;
+        const prefix = selected ? '\u25B6 ' : '  ';
+        rightContentLines.push(`${prefix}${mdFiles[i].slice(0, rightWidth - 4)}`);
       }
-    } catch { /* ignore */ }
-    return null;
-  }, [focusedWaveId, companyRoot]);
-
-  const leftWidth = 28;
-
-  return (
-    <Box flexDirection="column" flexGrow={1}>
-      <Box flexGrow={1}>
-        {/* Left: Wave title + Org Tree + Wave tabs */}
-        <Box flexDirection="column" width={leftWidth}>
-          <Box paddingX={1}>
-            <Text color="green" bold>W{focusedWaveIndex}</Text>
-            {wavePreset && wavePreset !== 'default' && (
-              <Text color="magenta"> ({wavePreset})</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>
-          )}
-
-          <OrgTree
-            tree={waveScopedTree}
-            focused={rightTab === 'stream'}
-            selectedIndex={selectedRoleIndex}
-            flatRoles={flatRoles}
-            ceoStatus={waveScopedStatuses['ceo'] ?? 'idle'}
-          />
-
-          {waves.length > 1 && (
-            <Box paddingX={1} marginTop={1}>
-              {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>
-
-        {/* Vertical separator — single character, not repeated newlines */}
-        <Text color="gray">{separatorStr}</Text>
-
-        {/* Right: Tabbed panel */}
-        <Box flexGrow={1} flexDirection="column">
-          {/* 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>
-            ))}
-            <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>
-              )}
-              {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>
-              )}
-              <StreamView
-                events={roleEvents}
-                allRoleIds={flatRoles}
-                streamStatus={streamStatus}
-                waveId={waveId}
-                roleLabel={roleLabel}
-              />
-            </>
-          )}
+    } catch {
+      rightContentLines.push('Cannot scan documents');
+    }
+  }
 
-          {/* Docs tab — KB browser + wave artifacts */}
-          {rightTab === 'docs' && (
-            <Box flexDirection="column" paddingX={1} flexGrow={1}>
-              {/* Filter bar */}
-              <Box marginBottom={0}>
-                {(['all', 'wave', 'kb', 'projects'] as DocsFilter[]).map((f, i) => (
-                  <Box key={f} marginRight={1}>
-                    <Text
-                      color={docsFilter === f ? 'cyan' : 'gray'}
-                      bold={docsFilter === f}
-                      inverse={docsFilter === f}
-                    >
-                      {f === 'wave' ? ` ${i + 1}:\u2605Wave ` : ` ${i + 1}:${f.charAt(0).toUpperCase() + f.slice(1)} `}
-                    </Text>
-                  </Box>
-                ))}
-                <Text color="gray" dimColor> ({docsList.length})</Text>
-              </Box>
+  // === Merge left + right, cap to terminal height ===
+  const maxRows = contentHeight;
+
+  const rows: Array<{ left: string; right: string; leftSelected: boolean; leftWorking: boolean }> = [];
+  for (let i = 0; i < maxRows; i++) {
+    const ll = leftLines[i];
+    rows.push({
+      left: (ll?.text ?? '').padEnd(leftWidth).slice(0, leftWidth),
+      right: rightContentLines[i] ?? '',
+      leftSelected: ll?.selected ?? false,
+      leftWorking: ll?.working ?? false,
+    });
+  }
 
-              {docsList.length === 0 ? (
-                <Box marginTop={1}>
-                  <Text color="gray">{docsFilter === 'wave' ? 'No files created in this wave.' : 'No documents found.'}</Text>
-                </Box>
-              ) : (
-                <Box flexGrow={1} flexDirection="column">
-                  {docsScroll === 0 ? (
-                    /* File list — only render visible window (prevent Yoga OOM on 600+ files) */
-                    <Box flexDirection="column" marginTop={0}>
-                      <Text color="gray" dimColor>{docsList.length} files{docsIndex > 0 ? ` (${docsIndex + 1}/${docsList.length})` : ''}</Text>
-                      {docsList.slice(docsIndex, docsIndex + termHeight - 10).map((doc, i) => (
-                        <Box key={doc.path}>
-                          <Text
-                            color={i === 0 ? 'cyan' : doc.isWave ? 'green' : 'white'}
-                            bold={i === 0}
-                            inverse={i === 0}
-                          >
-                            {doc.isWave ? '\u2605' : ' '} {doc.title.slice(0, 55)}
-                          </Text>
-                        </Box>
-                      ))}
-                    </Box>
-                  ) : (
-                    /* File preview */
-                    <Box flexDirection="column">
-                      <Text color="cyan" bold>{selectedDoc?.isWave ? '\u2605 ' : ''}{selectedDoc?.path.split('/').slice(-2).join('/')}</Text>
-                      <Text color="gray">{'\u2500'.repeat(50)}</Text>
-                      {filePreview.slice(docsScroll - 1, docsScroll - 1 + termHeight - 10).map((line, i) => (
-                        <Text key={i} color="white" wrap="wrap">{line}</Text>
-                      ))}
-                    </Box>
-                  )}
+  // Tab bar
+  const tabBar = ['Stream', 'Docs', 'Info'].map(t =>
+    t.toLowerCase() === rightTab ? `[${t}]` : ` ${t} `
+  ).join('  ');
 
-                  <Box marginTop={0}>
-                    <Text color="gray" dimColor>
-                      [Enter] {process.env.EDITOR || 'vim'} | [j/k] {docsScroll > 0 ? 'scroll' : 'select'}
-                    </Text>
-                  </Box>
-                </Box>
-              )}
-            </Box>
-          )}
+  // Wave tabs
+  const waveTabs = waves.length > 1
+    ? waves.map((w, i) => w.waveId === focusedWaveId ? `[${i + 1}]` : ` ${i + 1} `).join(' ')
+    : '';
 
-          {/* 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>
-              {wavePreset && <Text color="magenta">Preset: {wavePreset}</Text>}
-              <Text color="white">Directive: {focusedWave?.directive || '(idle)'}</Text>
-              <Text color="white">Sessions: {waveSessionCount}</Text>
-              <Text color="white">Files modified: {waveFileSet.size}</Text>
-              <Text color="white">SSE events: {events.length}</Text>
+  const sep = '\u2500'.repeat(Math.min(termCols, 160));
+  const statusLabel = streamStatus === 'streaming' ? '\u25CF streaming' : streamStatus === 'done' ? '\u2713 done' : 'idle';
 
-              {/* 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>
-          )}
-        </Box>
-      </Box>
+  return (
+    <Box flexDirection="column">
+      {/* Header */}
+      <Text>
+        <Text color="green" bold>{'W' + focusedWaveIndex}</Text>
+        <Text color="white">{' ' + (focusedWave?.directive?.slice(0, 40) || '(idle)')}</Text>
+        <Text color="gray">{'  \u2502  '}</Text>
+        <Text color="cyan" bold>{tabBar}</Text>
+        <Text color="gray">{'  ' + (waveSessionCount > 0 ? waveSessionCount + ' sessions' : '') + '  '}</Text>
+        <Text color={streamStatus === 'streaming' ? 'green' : 'gray'}>{statusLabel}</Text>
+      </Text>
+      <Text color="gray">{sep}</Text>
+
+      {/* Content rows: left (OrgTree) │ right (Stream/Info) */}
+      {rows.map((row, i) => (
+        <Text key={i}>
+          <Text color={row.leftSelected ? 'cyan' : row.leftWorking ? 'green' : 'white'} bold={row.leftSelected} inverse={row.leftSelected}>{row.left}</Text>
+          <Text color="gray">{' \u2502 '}</Text>
+          <Text color="white">{row.right}</Text>
+        </Text>
+      ))}
 
       {/* Footer */}
-      <Box width="100%">
-        <Text color="gray">{'\u2500'.repeat(process.stdout.columns || 70)}</Text>
-      </Box>
-      <Box paddingX={1} justifyContent="center">
-        <Text color="gray" dimColor>
-          [h/l] tab  [j/k] {rightTab === 'stream' ? 'role' : 'scroll'}  {rightTab === 'docs' ? '[Enter] vim  ' : ''}
-          {waves.length > 1 ? '[1-9] wave  ' : ''}[Esc] command
-        </Text>
-      </Box>
+      <Text color="gray">{sep}</Text>
+      <Text>
+        {waveTabs ? <Text color="gray">{waveTabs + '  '}</Text> : null}
+        <Text color="gray" dimColor>{rightTab === 'docs' ? '[h/l] tab  [j/k] browse  [Enter] open  ' : '[h/l] tab  [j/k] role  [Enter] filter  '}</Text>
+        {waves.length > 1 ? <Text color="gray" dimColor>{'[1-9] wave  '}</Text> : null}
+        <Text color="gray" dimColor>{'[Esc] back'}</Text>
+      </Text>
     </Box>
   );
 };

package/src/tui/components/StreamView.tsx

@@ -1,13 +1,13 @@
 /**
- * StreamView — detailed stream panel for Panel Mode (right side)
- * Shows full event details with timestamps for a selected role.
- * No aggressive truncation — shows tools, thinking, dispatch like Claude Code.
+ * StreamView — stream panel for Panel Mode
+ * Simplified to single Text render to prevent yoga OOM on wide terminals.
+ * Previous: 30 events × 3 React elements = 90 yoga nodes → OOM on 245+ columns
+ * Now: 1 Text element with pre-formatted string
  */
 
 import React from 'react';
 import { Box, Text } from 'ink';
 import type { SSEEvent } from '../api';
-import { getRoleColor } from '../theme';
 
 interface StreamViewProps {
   events: SSEEvent[];
@@ -21,111 +21,58 @@ function formatTime(ts: string): string {
   try {
     const d = new Date(ts);
     return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
-  } catch {
-    return '--:--:--';
-  }
+  } catch { return '--:--:--'; }
 }
 
-function renderEvent(event: SSEEvent): { content: string; contentColor: string } | null {
-  switch (event.type) {
-    case 'msg:start':
-      return {
-        content: `\u25B6 Started: ${(event.data.task as string)?.replace(/\u26D4[^\u26D4]*\u26D4[^"]*/g, '').trim().slice(0, 80) ?? ''}`,
-        contentColor: 'green',
-      };
+function eventToLine(event: SSEEvent): string | null {
+  const time = formatTime(event.ts);
+  const role = event.roleId.padEnd(12);
 
+  switch (event.type) {
+    case 'msg:start': {
+      const task = ((event.data.task as string) ?? '').replace(/\u26D4[^\u26D4]*\u26D4[^"]*/g, '').trim().slice(0, 80);
+      return `${time} ${role} \u25B6 Started: ${task}`;
+    }
     case 'msg:done': {
       const turns = event.data.turns as number | undefined;
-      return {
-        content: `\u2713 Done${turns ? ` (${turns} turns)` : ''}`,
-        contentColor: 'green',
-      };
+      return `${time} ${role} \u2713 Done${turns ? ` (${turns} turns)` : ''}`;
     }
-
     case 'msg:error':
-      return {
-        content: `\u2717 Error: ${(event.data.error as string ?? event.data.message as string ?? '').slice(0, 120)}`,
-        contentColor: 'red',
-      };
-
+      return `${time} ${role} \u2717 ${((event.data.error ?? event.data.message) as string ?? '').slice(0, 80)}`;
     case 'text': {
-      const text = ((event.data.text as string) ?? '');
-      if (!text.trim()) return null;
-      // Don't truncate — let terminal wrap
-      return { content: text, contentColor: 'white' };
+      const text = ((event.data.text as string) ?? '').trim();
+      if (!text) return null;
+      return `${time} ${role} ${text.slice(0, 120)}`;
     }
-
     case 'thinking': {
-      const text = ((event.data.text as string) ?? '').slice(0, 150);
-      if (!text.trim()) return null;
-      return { content: `\uD83D\uDCAD ${text}`, contentColor: 'gray' };
+      const text = ((event.data.text as string) ?? '').trim().slice(0, 100);
+      if (!text) return null;
+      return `${time} ${role} \uD83D\uDCAD ${text}`;
     }
-
     case 'tool:start': {
       const name = (event.data.name as string) ?? 'tool';
-      const input = event.data.input;
+      const input = event.data.input as Record<string, unknown> | undefined;
       let detail = '';
-      if (input && typeof input === 'object') {
-        const inp = input as Record<string, unknown>;
-        if (inp.file_path) detail = ` ${String(inp.file_path)}`;
-        else if (inp.command) detail = ` ${String(inp.command).slice(0, 80)}`;
-        else if (inp.pattern) detail = ` ${String(inp.pattern)}`;
-        else detail = ` ${JSON.stringify(input).slice(0, 80)}`;
+      if (input) {
+        if (input.file_path) detail = ` ${String(input.file_path).slice(0, 60)}`;
+        else if (input.command) detail = ` ${String(input.command).slice(0, 60)}`;
+        else if (input.pattern) detail = ` ${String(input.pattern)}`;
       }
-      return {
-        content: `\u2192 ${name}${detail}`,
-        contentColor: 'gray',
-      };
+      return `${time} ${role} \u2192 ${name}${detail}`;
     }
-
-    case 'tool:result':
-      return {
-        content: `\u2190 ${(event.data.name as string) ?? 'tool'} done`,
-        contentColor: 'gray',
-      };
-
     case 'dispatch:start':
-      return {
-        content: `\u21D2 dispatch ${event.data.targetRole as string ?? ''}: ${(event.data.task as string)?.replace(/\u26D4[^\u26D4]*\u26D4[^"]*/g, '').trim().slice(0, 80) ?? ''}`,
-        contentColor: 'yellow',
-      };
-
-    case 'dispatch:done':
-      return {
-        content: `\u21D0 ${event.data.targetRole as string ?? ''} completed`,
-        contentColor: 'yellow',
-      };
-
-    case 'msg:awaiting_input': {
-      const question = (event.data.question as string) ?? '';
-      return {
-        content: question ? `? ${question.slice(0, 120)}` : '? Awaiting input...',
-        contentColor: 'yellow',
-      };
-    }
-
-    // Hidden (truly internal only)
-    case 'heartbeat:tick':
-    case 'heartbeat:skip':
-    case 'prompt:assembled':
-    case 'trace:response':
-      return null;
-
+      return `${time} ${role} \u21D2 dispatch ${event.data.targetRole as string ?? ''}`;
     default:
       return null;
   }
 }
 
 const StreamViewInner: React.FC<StreamViewProps> = ({
-  events,
-  allRoleIds,
-  streamStatus,
-  waveId,
-  roleLabel,
+  events, allRoleIds, streamStatus, waveId, roleLabel,
 }) => {
-  const maxVisible = 30;
+  const termRows = process.stdout.rows || 40;
+  const maxVisible = Math.min(Math.max(5, termRows - 15), 20);
   const visibleEvents = events.slice(-maxVisible);
-
   const turnCount = events.filter(e => e.type === 'text' || e.type === 'tool:start').length;
 
   const statusLabel = streamStatus === 'streaming' ? '\u25CF streaming'
@@ -133,39 +80,24 @@ const StreamViewInner: React.FC<StreamViewProps> = ({
     : streamStatus === 'error' ? '\u2717 error'
     : 'idle';
 
+  // Build single text block (1 yoga node instead of 90+)
+  const lines = visibleEvents
+    .map(e => eventToLine(e))
+    .filter(Boolean) as string[];
+
+  const content = lines.length > 0
+    ? lines.join('\n')
+    : (waveId ? `Streaming... waiting for ${roleLabel !== 'All' ? roleLabel + ' ' : ''}events` : 'No active stream. Dispatch a wave to start.');
+
   return (
-    <Box flexDirection="column" paddingX={1} flexGrow={1}>
-      <Box justifyContent="space-between">
-        <Text bold color="cyan">
-          Stream ({roleLabel})
-        </Text>
+    <Box flexDirection="column" paddingX={1}>
+      <Text bold color="cyan">
+        Stream ({roleLabel}){'  '}
         <Text color={streamStatus === 'streaming' ? 'green' : 'gray'}>
           {statusLabel} {turnCount > 0 ? `turn ${turnCount}` : ''}
         </Text>
-      </Box>
-
-      {visibleEvents.length === 0 && (
-        <Box marginTop={1}>
-          <Text color="gray" dimColor>
-            {waveId
-              ? `Streaming... waiting for ${roleLabel !== 'All' ? roleLabel + ' ' : ''}events`
-              : 'No active stream. Dispatch a wave to start.'}
-          </Text>
-        </Box>
-      )}
-
-      {visibleEvents.map((event, i) => {
-        const rendered = renderEvent(event);
-        if (!rendered) return null;
-        const roleColor = getRoleColor(event.roleId, allRoleIds);
-        return (
-          <Box key={`${event.seq}-${i}`}>
-            <Text color="gray" dimColor>{formatTime(event.ts)} </Text>
-            <Text color={roleColor} bold>{event.roleId.padEnd(12)}</Text>
-            <Text color={rendered.contentColor} wrap="truncate">{rendered.content}</Text>
-          </Box>
-        );
-      })}
+      </Text>
+      <Text color="white" wrap="truncate">{content}</Text>
     </Box>
   );
 };