tycono 0.3.14-beta.14 → 0.3.14-beta.16

package/package.json

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

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';
@@ -670,52 +668,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" height={termHeight}>
-        <Box flexGrow={1} flexDirection="column">
+      <Box flexDirection="column">
+        <Box flexDirection="column">
           <PanelMode
             tree={orgTree}
             flatRoles={flatRoleIds}

package/src/tui/components/PanelMode.tsx

@@ -1,30 +1,20 @@
 /**
- * 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 { 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 { OrgNode } from '../store';
 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,8 +35,21 @@ interface PanelModeProps {
   onFocusWave: (waveId: string) => void;
 }
 
-function flattenTreeForText(nodes: OrgNode[], isLast: boolean[] = []): string[] {
-  const lines: string[] = [];
+/* ─── Helpers ─── */
+
+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 s;
+}
+
+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;
@@ -54,120 +57,32 @@ function flattenTreeForText(nodes: OrgNode[], isLast: boolean[] = []): string[]
     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';
-    lines.push(`${prefix}${icon} ${node.role.id}`);
-    if (node.children.length > 0) lines.push(...flattenTreeForText(node.children, [...isLast, last]));
+    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]));
   }
-  return lines;
+  return result;
 }
 
-function eventToOneLiner(event: SSEEvent): string | null {
-  const time = new Date(event.ts).toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
-  const role = event.roleId.padEnd(12);
-  switch (event.type) {
-    case 'text': { const t = ((event.data.text as string) ?? '').trim(); return t ? `${time} ${role} ${t.slice(0, 100)}` : null; }
-    case 'thinking': { const t = ((event.data.text as string) ?? '').trim(); return t ? `${time} ${role} \uD83D\uDCAD ${t.slice(0, 80)}` : null; }
-    case 'tool:start': { const n = (event.data.name as string) ?? ''; return `${time} ${role} \u2192 ${n}`; }
-    case 'msg:start': return `${time} ${role} \u25B6 Started`;
-    case 'msg:done': return `${time} ${role} \u2713 Done`;
-    case 'msg:error': return `${time} ${role} \u2717 Error`;
-    case 'dispatch:start': return `${time} ${role} \u21D2 ${event.data.targetRole as string ?? ''}`;
+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.slice(0, 120)}` : null; }
+    case 'thinking': { const x = ((ev.data.text as string) ?? '').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;
   }
 }
 
-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;
-}
-
-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;
-  }
-  return activeSessions.find(s => s.roleId === roleId && s.status === 'active') ?? null;
-}
-
-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 */ }
-  }
-  walk(companyRoot, 0);
-  mdFileCache = { root: companyRoot, files: results };
-  return results;
-}
-
-/** 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, 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,
@@ -176,295 +91,147 @@ 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 [];
-
-    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);
-    });
+  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]);
 
-    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); }
-      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');
-      }
-      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');
-      }
-      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);
+      if (idx < tabs.length - 1) setRightTab(tabs[idx + 1]);
       return;
     }
-
-    // Enter
-    if (key.return) {
-      if (rightTab === 'docs' && selectedDoc) {
-        const editor = process.env.EDITOR || 'vim';
-        try {
-          execSync(`${editor} "${selectedDoc.path}"`, { stdio: 'inherit' });
-        } catch { /* user quit editor */ }
-        fileCache.delete(selectedDoc.path); // Invalidate cache after edit
-        return;
-      }
-      if (rightTab === 'stream') {
-        onSelect();
-        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);
-      }
+    if (input === 'k' || key.upArrow) { onMove('up'); return; }
+    if (input === 'j' || key.downArrow) { onMove('down'); return; }
+    if (key.return) { onSelect(); return; }
+    // 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;
-    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;
-      }
-    } catch { /* ignore */ }
-    return null;
-  }, [focusedWaveId, companyRoot]);
-
   const leftWidth = 28;
   const termCols = process.stdout.columns || 120;
-  const rightWidth = Math.max(40, termCols - leftWidth - 3);
-
-  // === Build panel as line arrays, render each line as <Text> ===
-  // yoga-layout OOMs with nested Box on 245+ columns.
-  // Solution: flat list of <Text> elements (1 yoga node per line, no nesting)
-
-  // Left: OrgTree
-  const ceoIcon = waveScopedStatuses['ceo'] === 'working' ? '\u25CF' : waveScopedStatuses['ceo'] === 'done' ? '\u2713' : '\u25CB';
-  const treeLines = [`${ceoIcon} CEO`, ...flattenTreeForText(waveScopedTree)];
-
-  // Right: Stream/Info content
-  const rightLines: string[] = [];
+  const rightWidth = termCols - leftWidth - 3;
+
+  // === 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 ===
+  const rightContentLines: string[] = [];
   if (rightTab === 'stream') {
-    const maxEv = Math.min(termHeight - 8, 20);
-    const visible = (selectedRoleId ? events.filter(e => e.roleId === selectedRoleId) : events).slice(-maxEv);
+    const maxEv = Math.max(5, termHeight - 10);
+    const filtered = selectedRoleId ? events.filter(e => e.roleId === selectedRoleId) : events;
+    const visible = filtered.slice(-maxEv);
     for (const ev of visible) {
-      const line = eventToOneLiner(ev);
-      if (line) rightLines.push(line.slice(0, rightWidth));
+      const line = eventLine(ev);
+      if (line) rightContentLines.push(line.slice(0, rightWidth));
+    }
+    if (rightContentLines.length === 0) {
+      rightContentLines.push(waveId ? 'Waiting for events...' : 'No active stream. Type a directive to start.');
     }
-    if (rightLines.length === 0) rightLines.push(waveId ? `Waiting... (${events.length} events, waveId=${waveId?.slice(-8)})` : 'No active stream.');
   } else if (rightTab === 'info') {
-    rightLines.push(`Wave: ${focusedWave?.waveId ?? 'none'}`);
-    if (wavePreset) rightLines.push(`Preset: ${wavePreset}`);
-    rightLines.push(`Directive: ${focusedWave?.directive?.slice(0, 60) || '(idle)'}`);
-    rightLines.push(`Sessions: ${waveSessionCount}  Events: ${events.length}`);
+    rightContentLines.push(`Wave: ${focusedWave?.waveId ?? 'none'}`);
+    rightContentLines.push(`Directive: ${focusedWave?.directive?.slice(0, rightWidth - 12) || '(idle)'}`);
+    rightContentLines.push(`Sessions: ${waveSessionCount}  Events: ${events.length}`);
   } else {
-    rightLines.push('Docs tab (h/l to switch)');
+    rightContentLines.push('Press h to switch to Stream tab');
   }
 
-  // Merge into display lines
-  const maxRows = Math.max(treeLines.length, rightLines.length);
-  const mergedLines: Array<{ left: string; right: string }> = [];
+  // === Merge left + right, pad to fill terminal height ===
+  const headerLines = 3; // header + separator + org tree title
+  const footerLines = 2; // separator + keybindings
+  const contentHeight = Math.max(termHeight - headerLines - footerLines, 5);
+  const maxRows = Math.max(leftLines.length, rightContentLines.length, contentHeight);
+
+  const rows: Array<{ left: string; right: string; leftSelected: boolean; leftWorking: boolean }> = [];
   for (let i = 0; i < maxRows; i++) {
-    mergedLines.push({
-      left: (treeLines[i] ?? '').padEnd(leftWidth).slice(0, leftWidth),
-      right: (rightLines[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,
     });
   }
 
   // Tab bar
-  const tabLabels = ['Stream', 'Docs', 'Info'];
-  const tabBar = tabLabels.map(t => t.toLowerCase() === rightTab ? `[${t}]` : ` ${t} `).join('  ');
+  const tabBar = ['Stream', 'Docs', 'Info'].map(t =>
+    t.toLowerCase() === rightTab ? `[${t}]` : ` ${t} `
+  ).join('  ');
 
   // Wave tabs
   const waveTabs = waves.length > 1
     ? waves.map((w, i) => w.waveId === focusedWaveId ? `[${i + 1}]` : ` ${i + 1} `).join(' ')
     : '';
 
-  // Separator line
-  const sep = '\u2500'.repeat(termCols);
+  const sep = '\u2500'.repeat(Math.min(termCols, 160));
+  const statusLabel = streamStatus === 'streaming' ? '\u25CF streaming' : streamStatus === 'done' ? '\u2713 done' : 'idle';
 
   return (
     <Box flexDirection="column">
-      {/* Header: wave title │ tabs */}
+      {/* 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="gray">{'  ' + (waveSessionCount > 0 ? waveSessionCount + ' sessions' : '') + '  '}</Text>
+        <Text color={streamStatus === 'streaming' ? 'green' : 'gray'}>{statusLabel}</Text>
       </Text>
       <Text color="gray">{sep}</Text>
 
-      {/* Merged: OrgTree (left) │ Stream (right) */}
-      {mergedLines.map((line, i) => (
+      {/* Content rows: left (OrgTree) │ right (Stream/Info) */}
+      {rows.map((row, i) => (
         <Text key={i}>
-          <Text color={line.left.includes('\u25CF') ? 'green' : line.left.includes('\u2713') ? 'cyan' : 'white'}>{line.left}</Text>
+          <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">{line.right}</Text>
+          <Text color="white">{row.right}</Text>
         </Text>
       ))}
 
-      {/* Separator + wave tabs + footer */}
+      {/* Footer */}
       <Text color="gray">{sep}</Text>
-      {waveTabs ? (
-        <Text>
-          <Text color="gray">{waveTabs + '  '}</Text>
-          <Text color="gray" dimColor>{'[h/l] tab  [j/k] role  [1-9] wave  [Esc] back'}</Text>
-        </Text>
-      ) : (
-        <Text color="gray" dimColor>{'[h/l] tab  [j/k] role  [Esc] back'}</Text>
-      )}
+      <Text>
+        {waveTabs ? <Text color="gray">{waveTabs + '  '}</Text> : null}
+        <Text color="gray" dimColor>{'[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>
   );
 };