@lincoln504/pi-research 0.1.12 → 1.0.0

package/src/tui/research-panel.ts

@@ -1,339 +1,132 @@
 /**
  * Research TUI Panel
  *
- * Side-by-side layout for SearXNG status and researcher progress.
+ * Side-by-side researcher column layout with progress tracking.
+ * Adapted from the original design to work with the current browser-based
+ * architecture using DuckDuckGo Lite (Playwright).
  */
 
-import { type Component, visibleWidth, truncateToWidth } from '@mariozechner/pi-tui';
-import type { Theme } from '@mariozechner/pi-coding-agent';
-import type { SearxngStatus } from '../infrastructure/searxng-lifecycle.ts';
-import { getPiActivePanels } from '../utils/session-state.ts';
-import { FLASH_DURATION_MS } from '../constants.ts';
-
-export interface SliceState {
-  id: string;
-  label: string; // Displayed label: "1", "2", "3", etc.
-  completed: boolean;
-  queued: boolean;
-  flash: 'green' | 'red' | null;
-  tokens?: number; // Tokens for this specific agent
-  cost?: number;   // Cost for this specific agent
-}
-
-export interface ResearchProgress {
-  /** Total tool calls expected across all researchers in the initial plan. */
-  expected: number;
-  /** Actual tool calls completed so far. */
-  made: number;
-  /** True when research has expanded beyond the initial planned researchers. */
-  extended: boolean;
-}
-
-export interface ResearchPanelState {
-  sessionId: string;
-  query: string;
-  searxngStatus: SearxngStatus;
-  totalTokens: number;
-  slices: Map<string, SliceState>;
-  modelName: string;
-  hideSearxng?: boolean;
-  /** Optional progress bar data. Set after planning completes. */
-  progress?: ResearchProgress;
-  /** Temporary status message displayed in the header (e.g. 'planning...') */
-  statusMessage?: string;
-}
-
-// Store timeouts per session ID to prevent cross-session conflicts
-const sessionTimeouts = new Map<string, Set<NodeJS.Timeout>>();
-// Store active flash timeouts per researcher ID within each session
-const sessionResearcherTimeouts = new Map<string, Map<string, NodeJS.Timeout>>();
-
-/**
- * Default duration for researcher cell flash indicators
- */
-export const DEFAULT_FLASH_DURATION_MS = FLASH_DURATION_MS;
-
-/**
- * Clear all active flash timeouts for a specific session
- */
-export function clearAllFlashTimeouts(sessionId?: string): void {
-  if (sessionId) {
-    // Clear timeouts for specific session
-    const timeouts = sessionTimeouts.get(sessionId);
-    if (timeouts) {
-      for (const timeout of timeouts) {
-        clearTimeout(timeout);
-      }
-      timeouts.clear();
-    }
-    sessionTimeouts.delete(sessionId);
-    
-    // Clear researcher mapping for this session
-    sessionResearcherTimeouts.delete(sessionId);
-  } else {
-    // Clear all timeouts across all sessions
-    for (const timeouts of sessionTimeouts.values()) {
-      for (const timeout of timeouts) {
-        clearTimeout(timeout);
-      }
-      timeouts.clear();
-    }
-    sessionTimeouts.clear();
-    sessionResearcherTimeouts.clear();
-  }
-}
+import { type Component, visibleWidth, truncateToWidth, type TUI } from '@earendil-works/pi-tui';
+import type { Theme, ResearchPanelState } from '../types/research-panel-types.ts';
+import { getSteeringMessages } from '../orchestration/session-state.ts';
+import {
+  formatTokens,
+  renderProgressPct,
+  formatCost,
+  _formatTokens,
+  _renderProgressPct,
+  _formatCost,
+} from './research-panel-format.ts';
+import { generateWaveFill } from './research-panel-wave.ts';
 
 /**
- * Add a new researcher column
+ * Re-export types for convenience
  */
-export function addSlice(state: ResearchPanelState, id: string, label: string, queued: boolean = false): void {
-  state.slices.set(id, { id, label, completed: false, queued, flash: null });
-}
+export type { Theme, SliceState, ResearchPanelState, ResearchProgress } from '../types/research-panel-types.ts';
 
 /**
- * Remove a researcher column
+ * Re-export state management functions
  */
-export function removeSlice(state: ResearchPanelState, id: string): void {
-  state.slices.delete(id);
-}
+export {
+  addSlice,
+  removeSlice,
+  activateSlice,
+  updateSliceTokens,
+  updateSliceStatus,
+  completeSlice,
+  reactivateSlice,
+  clearCompletedResearchers,
+  createInitialPanelState,
+  flashSlice,
+  clearAllFlashTimeouts,
+} from './research-panel-state.ts';
 
 /**
- * Mark researcher as active (start from queued state)
+ * Re-export formatting utilities (internal test exports)
  */
-export function activateSlice(state: ResearchPanelState, id: string): void {
-  const slice = state.slices.get(id);
-  if (slice) slice.queued = false;
-}
+export { _formatTokens, _renderProgressPct, _formatCost } from './research-panel-format.ts';
 
 /**
- * Update researcher tokens and cost.
- * Tokens are treated as current context size (latest value), while cost is accumulated.
+ * Re-export color utilities
  */
-export function updateSliceTokens(state: ResearchPanelState, id: string, tokens: number, cost: number): void {
-  const slice = state.slices.get(id);
-  if (slice) {
-    slice.tokens = tokens;
-    slice.cost = (slice.cost || 0) + cost;
-  }
-}
+export {
+  derive256Gradient as _derive256Gradient,
+  deriveRgbGradient as _deriveRgbGradient,
+  rgbTo256 as _rgbTo256,
+  indexToRgb as _indexToRgb,
+  rgbToHsl as _rgbToHsl,
+  hslToRgb as _hslToRgb,
+  parseAnsiFgColor as _parseAnsiFgColor,
+} from './research-panel-color-utils.ts';
 
 /**
- * Mark researcher as complete
+ * Center `display` inside a column of `w` terminal cells, measuring by DISPLAY
+ * width (visibleWidth), not code units. String.padStart/padEnd count UTF-16 code
+ * units, so a CJK/emoji label (2 cells per glyph, and 2 code units per emoji)
+ * produced rows whose visible width disagreed with the border rows — the box
+ * edges no longer lined up. Exported for tests as _centerPadToWidth.
  */
-export function completeSlice(state: ResearchPanelState, id: string): void {
-  const slice = state.slices.get(id);
-  if (slice) {
-    slice.completed = true;
-    slice.queued = false;
-    
-    // Explicitly clear any active flash when completing
-    const researcherTimeouts = sessionResearcherTimeouts.get(state.sessionId);
-    if (researcherTimeouts) {
-      const timeout = researcherTimeouts.get(id);
-      if (timeout) {
-        clearTimeout(timeout);
-        researcherTimeouts.delete(id);
-        
-        // Also remove from session set
-        const timeouts = sessionTimeouts.get(state.sessionId);
-        if (timeouts) {
-          timeouts.delete(timeout);
-        }
-      }
-    }
-    slice.flash = null;
-  }
+function centerPadToWidth(display: string, w: number): string {
+  const pad = Math.max(0, w - visibleWidth(display));
+  const left = Math.floor(pad / 2);
+  return ' '.repeat(left) + display + ' '.repeat(pad - left);
 }
 
-/**
- * Re-mark a researcher as active (used when promoting a completed researcher to lead evaluator)
- */
-export function reactivateSlice(state: ResearchPanelState, id: string): void {
-  const slice = state.slices.get(id);
-  if (slice) {
-    slice.completed = false;
-    slice.flash = null;
-  }
-}
+export { centerPadToWidth as _centerPadToWidth };
 
-/**
- * Flash a researcher green or red
- */
-export function flashSlice(
-  state: ResearchPanelState,
-  researcherId: string,
-  color: 'green' | 'red',
-  durationMs: number = DEFAULT_FLASH_DURATION_MS,
-  onUpdate?: () => void
-): void {
-  const slice = state.slices.get(researcherId);
-  if (!slice || slice.completed || slice.queued) return;
-  
-  // Ensure session map exists
-  if (!sessionResearcherTimeouts.has(state.sessionId)) {
-    sessionResearcherTimeouts.set(state.sessionId, new Map());
-  }
-  const researcherTimeouts = sessionResearcherTimeouts.get(state.sessionId)!;
-
-  // Clear any existing timeout for THIS researcher in THIS session to prevent overlapping resets
-  const existingTimeout = researcherTimeouts.get(researcherId);
-  if (existingTimeout) {
-    clearTimeout(existingTimeout);
-    researcherTimeouts.delete(researcherId);
-    
-    // Also remove from session set
-    const timeouts = sessionTimeouts.get(state.sessionId);
-    if (timeouts) {
-      timeouts.delete(existingTimeout);
-    }
-  }
-
-  slice.flash = color;
-  onUpdate?.();
-
-  const timeout = setTimeout(() => {
-    slice.flash = null;
-    onUpdate?.();
-    
-    // Cleanup
-    researcherTimeouts.delete(researcherId);
-    const timeouts = sessionTimeouts.get(state.sessionId);
-    if (timeouts) {
-      timeouts.delete(timeout);
-    }
-  }, durationMs);
-
-  // Track the new timeout
-  researcherTimeouts.set(researcherId, timeout);
-  if (!sessionTimeouts.has(state.sessionId)) {
-    sessionTimeouts.set(state.sessionId, new Set());
-  }
-  sessionTimeouts.get(state.sessionId)!.add(timeout);
-}
-
-/**
- * Create initial panel state
- */
-export function createInitialPanelState(sessionId: string, query: string, searxngStatus: SearxngStatus, modelName: string): ResearchPanelState {
-  return {
-    sessionId,
-    query,
-    searxngStatus,
-    totalTokens: 0,
-    slices: new Map(),
-    modelName,
-  };
-}
-
-function formatTokens(tokens: number): string {
-  if (tokens < 1000) return tokens.toString();
-  if (tokens < 10000) return `${(tokens / 1000).toFixed(1)}k`;
-  if (tokens < 1_000_000) return `${Math.round(tokens / 1000)}k`;
-  return `${(tokens / 1_000_000).toFixed(1)}M`;
-}
-
-/**
- * Render a percentage string for the header (no bar, no brackets).
- * Returns empty string when progress data is absent or not yet initialised.
- * The percentage is global: it reflects all researchers' tool calls combined,
- * with the final report step weighted at 2× a regular tool call.
- */
-function renderProgressPct(progress: ResearchProgress | undefined): string {
-  if (!progress || progress.expected <= 0) return '';
-  if (progress.extended) return 'exploring';
-  const pct = Math.round(Math.min(1, progress.made / progress.expected) * 100);
-  return `${pct}%`;
-}
-
-function formatCost(cost: number): string {
-  if (cost === 0) return '$0.00';
-  if (cost < 0.0001) return '<$0.01';
-  if (cost < 1) {
-    // Show up to 4 decimal places for sub-dollar amounts, but strip trailing zeros
-    const s = cost.toFixed(4);
-    return `$${parseFloat(s)}`;
-  }
-  if (cost < 100) return `$${cost.toFixed(2)}`;
-  return `$${Math.round(cost)}`;
-}
-
-function getStatusText(state: string): string {
-  switch (state) {
-    case 'starting_up': return 'SearXNG';
-    case 'active':      return 'SearXNG';
-    case 'inactive':    return 'Offline';
-    case 'error':       return 'Error';
-    default:            return '?';
-  }
-}
-
-function extractPort(url: string): string {
-  if (!url) return '';
-  const m = url.match(/:(\d+)(?:\/|$)/);
-  return m ? `:${m[1]}` : '';
-}
-
-/**
- * Internal rendering logic for a single research panel block.
- * Returns 3 or 4 lines of TUI content depending on whether costs are present.
- */
 function renderPanelBlock(
   state: ResearchPanelState,
   theme: Theme,
   width: number,
-  showSearxng: boolean
 ): string[] {
-  const LEFT_INNER = 7;
-  const LEFT_BOX_W = LEFT_INNER + 2;
-  const GAP = 1;
-  const totalLeftOffset = LEFT_BOX_W + GAP;
-  const availableForRight = Math.max(1, width - totalLeftOffset);
-  const rightInner = Math.max(1, availableForRight - 2);
-
+  const rightInner = Math.max(1, width - 2);
   const numRows = 4;
 
-  // Prep left box raw parts (no colors yet)
-  interface RawLeftBox {
-    top: string;
-    rows: string[];
-    bottom: string;
-    statusColor: 'success' | 'error' | 'muted';
-  }
-
-  let leftRaw: RawLeftBox | null = null;
-
-  if (showSearxng && width >= totalLeftOffset + 10) {
-    const status = state.searxngStatus;
-    const statusText = getStatusText(status.state).trim();
-    const portStr = extractPort(status.url).trim();
-    
-    // 4 rows: row 1 is status, row 2 is port
-    const rows = [
-      '│' + statusText.padEnd(LEFT_INNER),
-      '│' + portStr.padEnd(LEFT_INNER)
-    ];
-
-    leftRaw = {
-      top: '┌' + '─'.repeat(LEFT_INNER),
-      rows,
-      bottom: '└' + '─'.repeat(LEFT_INNER),
-      statusColor: status.state === 'error' ? 'error' : (status.state === 'active' || status.state === 'starting_up') ? 'success' : 'muted',
-    };
-  }
+  const sliceIds = Array.from(state.slices.keys()).filter(id => {
+    const s = state.slices.get(id);
+    if (!s || s.queued) return false;
+    return true;
+  });
+
+  // Stable sort: Planning/Coordinator first, Researchers numerically, Eval last
+  sliceIds.sort((a, b) => {
+    const sa = state.slices.get(a)!;
+    const sb = state.slices.get(b)!;
+    const la = sa.label.toLowerCase();
+    const lb = sb.label.toLowerCase();
+
+    // Priority 1: Coordinator — key off the stable slice id, NOT a label substring.
+    // In quick mode the slice id is the query-derived label, and a researcher's specialist
+    // label can contain "plan"/"coord" (e.g. "Urban Planning Specialist"); matching the
+    // label text would wrongly sort such a column into the coordinator's leading slot.
+    const isPlanA = a === 'coord';
+    const isPlanB = b === 'coord';
+    if (isPlanA && !isPlanB) return -1;
+    if (!isPlanA && isPlanB) return 1;
+
+    // Priority 3: Eval (Last) — key off the stable slice id, not the label text, so a
+    // quick-mode run whose query is literally "eval" isn't sorted/rendered as the eval box.
+    const isEvalA = a === 'eval';
+    const isEvalB = b === 'eval';
+    if (isEvalA && !isEvalB) return 1;
+    if (!isEvalA && isEvalB) return -1;
+
+    // Priority 2: Numerical researchers
+    const numA = parseInt(la, 10);
+    const numB = parseInt(lb, 10);
+    if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
+    if (!isNaN(numA)) return -1;
+    if (!isNaN(numB)) return 1;
+
+    return la.localeCompare(lb);
+  });
 
-  const sliceIds = Array.from(state.slices.keys()).filter(id => !state.slices.get(id)!.queued);
   const numSlices = sliceIds.length;
-  const MAX_VISIBLE_SLICES = 6;
-  let visibleSliceIds = sliceIds;
-  let showIndicator = false;
-  let hiddenCount = 0;
-  if (numSlices > MAX_VISIBLE_SLICES) {
-    visibleSliceIds = sliceIds.slice(numSlices - MAX_VISIBLE_SLICES);
-    hiddenCount = numSlices - MAX_VISIBLE_SLICES;
-    showIndicator = true;
-  }
-  const numVisible = showIndicator ? MAX_VISIBLE_SLICES : numSlices;
-  const totalCols = showIndicator ? numVisible + 1 : numVisible;
+  const visibleSliceIds = sliceIds;
+  const numVisible = numSlices;
+  const totalCols = numVisible;
+  const showIndicator = false;
+  const hiddenCount = 0;
 
   // Calculate column widths for the right section
   const dividers = totalCols - 1;
@@ -359,140 +152,181 @@ function renderPanelBlock(
       const slice = sliceId ? state.slices.get(sliceId) : null;
       const w = colW(i);
       const isLast = i === totalCols - 1;
-      
-      // Top Border with Label
+
       const isIndicator = showIndicator && i === 0;
       const labelStr = slice ? slice.label : `+${hiddenCount}`;
-      const isEval = labelStr === 'Eval';
-      const cornerLabel = `┐ ${labelStr} ┌`;
-      const canShowCornerLabel = w >= cornerLabel.length;
-      const canShowBasicLabel = w >= labelStr.length + 2;
+      // Key the decorative eval box off the stable slice id, not label text (a quick-mode
+      // query literally "eval" would otherwise render as the evaluator's box).
+      const isEval = sliceId === 'eval';
+
+      // Determine right border character based on if next column is eval
+      const nextSliceId = i + 1 < totalCols ? (showIndicator && i + 1 === 0 ? null : (showIndicator ? visibleSliceIds[i] : visibleSliceIds[i + 1])) : null;
+      const nextIsEval = nextSliceId === 'eval';
+
+      // Top Border with Label — all sizing by DISPLAY width. labelStr can be the
+      // quick-mode query (CJK/emoji): measuring with .length (code units) made the
+      // border row wider/narrower than the body rows, breaking box alignment.
+      const labelPadding = 2; // Spaces around label
+      const labelWidth = visibleWidth(labelStr);
+      const totalLabelWidth = labelWidth + labelPadding;
 
       let topPart;
       if (isEval) {
-        topPart = '─'.repeat(w);
-      } else if (canShowCornerLabel) {
-        const sideWidth = w - cornerLabel.length;
-        const leftPad = Math.floor(sideWidth / 2);
-        const rightPad = sideWidth - leftPad;
-        topPart = '─'.repeat(leftPad) + cornerLabel + '─'.repeat(rightPad);
-      } else if (canShowBasicLabel) {
-        const sideWidth = w - labelStr.length;
+        // Eval box: box-drawing dashes (─) at edges, en dashes (–) in middle
+        if (w >= 2) {
+          topPart = '─' + '-'.repeat(Math.max(0, w - 2)) + '─';
+        } else {
+          topPart = '─'.repeat(w);
+        }
+      } else if (w >= totalLabelWidth) {
+        const sideWidth = w - totalLabelWidth;
         const leftPad = Math.floor(sideWidth / 2);
         const rightPad = sideWidth - leftPad;
-        topPart = '─'.repeat(leftPad) + labelStr + '─'.repeat(rightPad);
+        topPart = '─'.repeat(leftPad) + ' ' + labelStr + ' ' + '─'.repeat(rightPad);
+      } else if (w >= 1 && labelStr.length > 0) {
+        // Tight space: show as much of the label as fits. truncateToWidth cuts at
+        // grapheme boundaries (never emits a lone surrogate, unlike the previous
+        // labelStr[0].slice(0, w)), and the '─' fill is sized by remaining CELLS
+        // (a single CJK first char occupies 2 cells, so padEnd-by-length overflowed).
+        const clipped = truncateToWidth(labelStr, w, '');
+        topPart = clipped + '─'.repeat(Math.max(0, w - visibleWidth(clipped)));
       } else {
         topPart = '─'.repeat(w);
       }
-      rightRawRows[0]!.push(topPart + (isLast ? '┐' : '┬'));
+
+      const topRightCorner = isEval ? '╮' : (nextIsEval ? '╭' : (isLast ? '┐' : '┬'));
+      rightRawRows[0]!.push(topPart + topRightCorner);
       rightColors[0]!.push('accent');
 
-      // Token Row (always row 1)
+      // Token Row (row 1)
       let tokenStr: string;
       if (isEval) {
-        const evalDisplay = 'Eval'.length > w ? 'Eval'.slice(0, w) : 'Eval';
-        tokenStr = evalDisplay.padStart(Math.floor((w + evalDisplay.length) / 2)).padEnd(w);
+        // Eval label display: ╷ eval ╷ or ╷ status ╷ with decorative borders
+        const innerWidth = Math.max(0, w - 2);
+        // Prioritize status if it exists, otherwise use 'eval'
+        const evalLabel = slice?.status || 'eval';
+        const labelDisplay = truncateToWidth(evalLabel, innerWidth);
+        const padding = innerWidth - visibleWidth(labelDisplay);
+        const leftPad = Math.floor(padding / 2);
+        const rightPad = padding - leftPad;
+        tokenStr = '╷' + ' '.repeat(leftPad) + labelDisplay + ' '.repeat(rightPad) + '╷';
       } else if (isIndicator) {
-        tokenStr = '...'.padStart(Math.floor((w + 3) / 2)).padEnd(w);
+        tokenStr = centerPadToWidth('...', w);
       } else {
-        const isPlanning = labelStr.includes('planning') || labelStr.includes('complexity');
+        // Identify the coordinator column by its stable slice id, not a label substring:
+        // "planning"/"complexity" in the (possibly query-derived, in quick mode) label would
+        // false-positive and blank out a real column's tokens/cost/status.
+        const isPlanning = sliceId === 'coord';
         const tokens = slice?.tokens || 0;
-        const raw = (isPlanning || tokens === 0) ? '' : formatTokens(tokens);
-        const display = raw.length > w ? raw.slice(0, w) : raw;
-        tokenStr = display.padStart(Math.floor((w + display.length) / 2)).padEnd(w);
+        let raw = '';
+
+        // Status ALWAYS shows (incl. the coordinator's round-1 search count "N results" and
+        // planning status) — it must NOT be gated by isPlanning. Only the token-count FALLBACK
+        // is suppressed for the coordinator column (it shows status/wave, not a token tally).
+        // Regression guard: keying isPlanning off sliceId==='coord' (0a9da110) had wrongly
+        // pulled the status branch under !isPlanning too, blanking the coordinator's live
+        // search count.
+        if (slice?.completed && slice?.failed) {
+            // Persistent terminal marker — NOT gated on !completed like the status branch,
+            // so a failed researcher stays visibly failed instead of muted-like-a-success.
+            raw = 'failed';
+        } else if (slice?.status && !slice.completed && !slice.queued) {
+            raw = slice.status;
+        } else if (!isPlanning && tokens > 0) {
+            raw = formatTokens(tokens);
+        }
+
+        // Center by display width (padStart/padEnd count code units and misalign
+        // the box for wide/astral chars — e.g. a CJK status or query fragment).
+        tokenStr = centerPadToWidth(truncateToWidth(raw, w), w);
       }
-      rightRawRows[1]!.push(tokenStr + '│');
-      const flashColor = slice?.flash === 'green' ? 'success' : slice?.flash === 'red' ? 'error' : null;
-      rightColors[1]!.push(flashColor || (slice?.completed ? 'muted' : 'text'));
+
+      const rightWall12 = isEval ? '┊' : (nextIsEval ? '┊' : '│');
+      rightRawRows[1]!.push(tokenStr + rightWall12);
+      const f1 = slice?.flash === 'green' ? 'success' : slice?.flash === 'red' ? 'error' : null;
+      rightColors[1]!.push(f1 || (slice?.failed ? 'error' : slice?.completed ? 'muted' : 'text'));
 
       // Cost Row (row 2)
       let costStr: string;
       if (isEval) {
-        costStr = ' '.repeat(w);
+        // Eval cost row: ╵ (empty space) or ╵ cost ╵ with decorative borders
+        const innerWidth = Math.max(0, w - 2);
+        const cost = slice?.cost || 0;
+        const raw = cost === 0 ? '' : formatCost(cost);
+        const labelDisplay = truncateToWidth(raw, innerWidth);
+        const padding = innerWidth - visibleWidth(labelDisplay);
+        const leftPad = Math.floor(padding / 2);
+        const rightPad = padding - leftPad;
+        costStr = '╵' + ' '.repeat(leftPad) + labelDisplay + ' '.repeat(rightPad) + '╵';
       } else if (isIndicator) {
-        const display = '...'.length > w ? '...'.slice(0, w) : '...';
-        costStr = display.padStart(Math.floor((w + display.length) / 2)).padEnd(w);
+        costStr = centerPadToWidth(truncateToWidth('...', w), w);
       } else {
-        const isPlanning = labelStr.includes('planning') || labelStr.includes('complexity');
+        const isPlanning = sliceId === 'coord'; // coordinator column shows no per-column cost (see token row)
         const cost = slice?.cost || 0;
         const raw = (isPlanning || cost === 0) ? '' : formatCost(cost);
-        const display = raw.length > w ? raw.slice(0, w) : raw;
-        costStr = display.padStart(Math.floor((w + display.length) / 2)).padEnd(w);
+        costStr = centerPadToWidth(truncateToWidth(raw, w), w);
       }
-      rightRawRows[2]!.push(costStr + '│');
-      rightColors[2]!.push(flashColor || (slice?.completed ? 'muted' : 'text'));
+      rightRawRows[2]!.push(costStr + rightWall12);
+      const f2 = slice?.flash === 'green' ? 'success' : slice?.flash === 'red' ? 'error' : null;
+      rightColors[2]!.push(f2 || (slice?.failed ? 'error' : slice?.completed ? 'muted' : 'text'));
 
       // Bottom Border
-      rightRawRows[3]!.push('─'.repeat(w) + (isLast ? '┘' : '┴'));
+      let bottomContent;
+      if (isEval) {
+        // Eval box: box-drawing dashes (─) at edges, en dashes (–) in middle
+        if (w >= 2) {
+          bottomContent = '─' + '-'.repeat(Math.max(0, w - 2)) + '─';
+        } else {
+          bottomContent = '─'.repeat(w);
+        }
+      } else {
+        bottomContent = '─'.repeat(w);
+      }
+      const bottomRightCorner = isEval ? '╯' : (nextIsEval ? '╰' : (isLast ? '┘' : '┴'));
+      rightRawRows[3]!.push(bottomContent + bottomRightCorner);
       rightColors[3]!.push('accent');
     }
   }
 
   // Final Assembly
   const blockResult: string[] = [];
-  const jointChars = ['┬', '│', '│', '┴'];
-  
+  const firstSliceId = visibleSliceIds[0];
+  const startsWithEval = firstSliceId === 'eval';
+
+  const leftChars = startsWithEval ? ['╭', '┊', '┊', '╰'] : ['┌', '│', '│', '└'];
+
   for (let rowIdx = 0; rowIdx < 4; rowIdx++) {
-    let line = '';
-    
-    if (leftRaw) {
-      const leftBorderColor = 'accent';
-      let leftPartContent: string;
-      let leftPartColor: 'success' | 'error' | 'muted' | 'text' | 'accent';
-      
-      if (rowIdx === 0) {
-        leftPartContent = leftRaw.top;
-        leftPartColor = leftBorderColor;
-      } else if (rowIdx === 3) {
-        leftPartContent = leftRaw.bottom;
-        leftPartColor = leftBorderColor;
-      } else {
-        // Middle rows (1 and 2)
-        leftPartContent = leftRaw.rows[rowIdx - 1] || '│' + ' '.repeat(LEFT_INNER);
-        // Only the status row (row 1) gets the status color
-        leftPartColor = rowIdx === 1 ? leftRaw.statusColor : leftBorderColor;
-      }
-      
-      line += theme.fg(leftBorderColor, leftPartContent.slice(0, 1));
-      line += theme.fg(leftPartColor, leftPartContent.slice(1));
-      line += theme.fg('accent', jointChars[rowIdx]!);
-    } else {
-      // No SearXNG box
-      const noBorderChars = ['┌', '│', '│', '└'];
-      line += ' '.repeat(totalLeftOffset - 1);
-      line += theme.fg('accent', noBorderChars[rowIdx]!);
-    }
-    
+    let line = theme.fg('accent', leftChars[rowIdx]!);
+
     const rightRowParts = rightRawRows[rowIdx]!;
     const rightRowColors = rightColors[rowIdx]!;
-    
+
     for (let colIdx = 0; colIdx < rightRowParts.length; colIdx++) {
       const part = rightRowParts[colIdx]!;
       const content = part.slice(0, -1);
       const wall = part.slice(-1);
-      
-      if (rowIdx === 0) {
-        const cornerStart = content.indexOf('┐');
-        if (cornerStart !== -1) {
-          const cornerEnd = content.lastIndexOf('┌') + 1;
-          const before = content.slice(0, cornerStart);
-          const cornerOpen = content.slice(cornerStart, cornerStart + 1);
-          const labelText = content.slice(cornerStart + 1, cornerEnd - 1);
-          const cornerClose = content.slice(cornerEnd - 1, cornerEnd);
-          const after = content.slice(cornerEnd);
-          
-          line += theme.fg('accent', before);
-          line += theme.fg('accent', cornerOpen);
-          line += theme.fg('muted', labelText);
-          line += theme.fg('accent', cornerClose);
-          line += theme.fg('accent', after);
-        } else {
-          line += theme.fg('accent', content);
-        }
+
+      if (rowIdx === 0 || rowIdx === 3) {
+        // Top and bottom borders: all accent color
+        line += theme.fg('accent', content);
       } else {
+        // Body rows (1-2)
         const color = rightRowColors[colIdx]!;
-        line += theme.fg(color, content);
+        const firstChar = content[0];
+        const lastChar = content[content.length - 1];
+
+        // Check if this is an eval decorative box (╷...╷ or ╵...╵)
+        if (content.length >= 2 && ((firstChar === '╷' && lastChar === '╷') || (firstChar === '╵' && lastChar === '╵'))) {
+          // Eval box: render decorative chars as accent, inner content as text
+          line += theme.fg('accent', firstChar as string);
+          line += theme.fg(color, content.slice(1, -1));
+          line += theme.fg('accent', lastChar as string);
+        } else {
+          line += theme.fg(color, content);
+        }
       }
+
+      // Walls: accent color
       line += theme.fg('accent', wall);
     }
     blockResult.push(line);
@@ -505,70 +339,140 @@ function renderPanelBlock(
  * Renders ALL active research runs in that session into a single widget.
  */
 export function createMasterResearchPanel(
-  piSessionId: string
-): (tui: unknown, theme: Theme) => Component {
-  return (_tui: unknown, theme: Theme) => {
+  piSessionId: string,
+  getActivePanelsFn?: (piSessionId: string) => ResearchPanelState[]
+): (tui: TUI, theme: Theme) => Component {
+  const getPanels = getActivePanelsFn;
+
+  return (_tui: TUI, theme: Theme) => {
     const component: Component = {
       render(width: number): string[] {
-        const panels = getPiActivePanels(piSessionId);
+        // Safety guard for extremely narrow terminals
+        if (width < 4) return [];
+
+        const panels: ResearchPanelState[] = getPanels ? getPanels(piSessionId) : [];
+
+        // NOTE: render() runs on every frame (30 FPS during the wave animation).
+        // It must stay pure and allocation-light — NO logging here. A previous
+        // logger.debug() on this path issued a synchronous appendFileSync per
+        // frame, which (with DEBUG enabled) blocked the event loop and made the
+        // wave animation slow and jumpy. Diagnostics belong on state-change
+        // paths, not the render hot path.
         if (panels.length === 0) return [];
 
         const allLines: string[] = [];
         for (let i = 0; i < panels.length; i++) {
           const panel = panels[i]!;
-          
-          // Header line for each block
+
+          // Header line for each block (fixed width, rounded corners)
           const pctStr = renderProgressPct(panel.progress);
-          const status = panel.statusMessage ? ` [${panel.statusMessage}] ` : '';
-          const headerText = pctStr ? ` Research: ${pctStr}${status} ` : (status ? ` Research: ${status} ` : ` Research `);
-          const headerLine = theme.fg('accent', '─'.repeat(2)) + theme.fg('muted', headerText) + theme.fg('accent', '─'.repeat(Math.max(0, width - 2 - headerText.length)));
+          const label = panel.title ?? 'Research';
+          let headerText: string;
+          if (pctStr) {
+            headerText = ` ${label}: ${pctStr}`;
+          } else {
+            headerText = ` ${label}`;
+          }
+
+          const maxWidth = Math.max(20, width - 4);
+          if (visibleWidth(headerText) > maxWidth) {
+            if (pctStr) {
+              const remainingLen = maxWidth - ` ${label}: ${pctStr} `.length;
+              if (remainingLen > 6) {
+                headerText = ` ${label}: ${pctStr} ..`;
+              } else {
+                headerText = ` ${label}: ${pctStr}`;
+              }
+            } else {
+              const remainingLen = maxWidth - ` ${label} `.length;
+              if (remainingLen > 6) {
+                headerText = ` ${label} ..`;
+              } else {
+                headerText = ` ${label}`;
+              }
+            }
+          }
+
+          // Render header: ─╴ text ╶╮ (half-endpoint chars give breathing room around text)
+          // During active search the right side becomes a wave: ─╴ text ╶╼──────
+          const leftDecor = theme.fg('accent', '─╴');
+          const rightDecor = theme.fg('accent', ' ╶╮');
+
+          let headerLine = leftDecor + theme.fg('muted', headerText);
+
+          if (panel.isSearching) {
+            headerLine += ' '; // space between header text and wave
+            const currentWidth = visibleWidth(headerLine);
+            const targetWidth = Math.max(0, width - 1);
+            const available = Math.max(0, targetWidth - currentWidth);
+
+            if (available > 0 && panel.waveFrame !== undefined) {
+              const waveResult = generateWaveFill(theme, panel.waveFrame, panel.waveColors, available);
+              panel.waveColors = waveResult.updatedColors;
+              headerLine += waveResult.fill;
+            } else if (available > 0) {
+              // Fallback: fill with ─ before animation starts
+              headerLine += theme.fg('accent', '─'.repeat(available));
+            }
+          } else {
+            headerLine += rightDecor;
+          }
+
           allLines.push(headerLine);
 
-          // Show SearXNG box only for the bottom-most panel in the Master Widget stack
-          const isBottomMost = i === panels.length - 1;
-          const blockLines = renderPanelBlock(panel, theme, width, isBottomMost);
+          const blockLines = renderPanelBlock(panel, theme, width);
           allLines.push(...blockLines);
         }
 
-        // Safety: truncate any line that exceeds terminal width
-        return allLines.map(line => {
-          const w = visibleWidth(line);
-          if (w > width) {
-            return truncateToWidth(line, Math.max(3, width - 1));
+        // Render steering messages once at the bottom (not duplicated under each panel)
+        const allSteering = getSteeringMessages(piSessionId);
+        const isSteeringAcceptable = panels.some(p => p.steeringAcceptable === true);
+
+        if (allSteering.length > 0) {
+          // Messages exist (queued or active) — show them regardless of phase.
+          // Queued messages persist through eval/coordinator phases so the user
+          // can see what's waiting to be consumed at the next round boundary.
+          const maxSteeringLines = 3;
+          const visibleSteering = allSteering.slice(-maxSteeringLines);
+          if (allSteering.length > maxSteeringLines) {
+            const hiddenCount = allSteering.length - maxSteeringLines;
+            allLines.push(theme.fg('dim', ` ... and ${hiddenCount} older steering message(s) hidden`));
           }
-          return line;
-        });
-      },
-      invalidate(): void {
-        // Master widget is refreshed explicitly via masterUpdateRegistry
-      }
-    };
-    return component;
-  };
-}
+          for (const msg of visibleSteering) {
+            const prefix = msg.status === 'queued' ? ' QUEUED RESEARCH STEERING: ' : ' RESEARCH STEERING: ';
+            const display = truncateToWidth(`${prefix}${msg.text}`, width);
+            // Use 'warning' style for queued (amber/yellow), 'muted' for active
+            const color = msg.status === 'queued' ? 'warning' : 'muted';
+            allLines.push(theme.fg(color as any, display));
+          }
+        } else if (isSteeringAcceptable) {
+          // No messages yet but steering is acceptable — show the "available" hint
+          allLines.push(theme.fg('muted', ' available for research steering'));
+        }
+        // When steering is not acceptable and there are no messages: show nothing.
 
-/**
- * Legacy: Create individual research panel component
- */
-export function createResearchPanel(
-  state: ResearchPanelState
-): (tui: unknown, theme: Theme) => Component & { dispose?(): void } {
-  return (_tui: unknown, theme: Theme) => {
-    const component: any = {
-      render(width: number): string[] {
-        return renderPanelBlock(state, theme, width, !state.hideSearxng).map(line => {
+        if (panels.length > 0) {
+          // Hint line: show pop steering hint whenever there are queued (poppable) messages
+          const hasQueued = allSteering.some(m => m.status === 'queued');
+          const hint = hasQueued ? ' esc cancel research | alt+p pop steering' : ' esc to cancel research';
+          allLines.push(theme.fg('muted', hint));
+        }
+
+        return allLines.map(line => {
           const w = visibleWidth(line);
           if (w > width) {
-            return truncateToWidth(line, Math.max(3, width - 1));
+            return truncateToWidth(line, Math.max(1, width));
           }
           return line;
         });
       },
       invalidate(): void {
-        // No-op
-      },
-      dispose(): void {
-        clearAllFlashTimeouts(state.sessionId);
+        // Propagate up the component tree so the framework's render pipeline
+        // is triggered. 
+        const comp = component as Component & { parent?: { invalidate: () => void } };
+        if (comp.parent && typeof comp.parent.invalidate === 'function') {
+          comp.parent.invalidate();
+        }
       }
     };
     return component;