tycono 0.3.14-beta.2 → 0.3.14-beta.21

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,54 @@ 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) ?? '').replace(/\n/g, ' ').trim(); return x ? `${t} ${r} ${x.slice(0, 120)}` : null; }
+    case 'thinking': { const x = ((ev.data.text as string) ?? '').replace(/\n/g, ' ').trim(); return x ? `${t} ${r} \uD83D\uDCAD ${x.slice(0, 80)}` : null; }
+    case 'tool:start': { const n = (ev.data.name as string) ?? ''; const d = ev.data.input ? (((ev.data.input as any).file_path || (ev.data.input as any).command || (ev.data.input as any).pattern || '') as string).slice(0, 50) : ''; return `${t} ${r} \u2192 ${n} ${d}`; }
+    case 'tool:result': return `${t} ${r} \u2190 ${(ev.data.name as string) ?? ''} done`;
+    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 +92,211 @@ 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]);
+  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]);
 
-  // Build docs list from filesystem scan + wave files
-  const docsList = useMemo(() => {
-    if (rightTab !== 'docs') return [];
-
-    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',
+    })),
+  ];
+
+  // === Build right column: Stream/Info/Docs ===
+  const rightContentLines: string[] = [];
+  let selectedDocPath: string | null = null;
+  if (rightTab === 'stream') {
+    const maxEv = Math.max(5, contentHeight - 2);
+    const filtered = selectedRoleId ? events.filter(e => e.roleId === selectedRoleId) : events;
+    const visible = filtered.slice(-maxEv);
+    for (const ev of visible) {
+      const line = eventLine(ev);
+      if (line) rightContentLines.push(line.slice(0, rightWidth));
+    }
+    if (rightContentLines.length === 0) {
+      if (selectedRoleId && events.length > 0) {
+        rightContentLines.push(`No events for ${selectedRoleId} (${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" overflow="hidden">
-          {/* 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>
   );
 };