@nexus-ai-fs/tui 0.9.18

package/src/panels/search/rlm-answer-view.tsx

@@ -0,0 +1,105 @@
+/**
+ * RLM document Q&A answer view: progressive streaming display.
+ *
+ * Shows document context paths, iteration steps as they arrive via SSE,
+ * then the final answer. Status bar shows model, tokens, duration, iteration count.
+ */
+
+import React from "react";
+import type { RlmAnswer, RlmStep } from "../../stores/search-store.js";
+
+interface RlmAnswerViewProps {
+  readonly answer: RlmAnswer | null;
+  readonly loading: boolean;
+  readonly contextPaths: readonly string[];
+}
+
+function formatStep(step: RlmStep): string {
+  const code = step.code_executed.length > 80
+    ? `${step.code_executed.slice(0, 77)}...`
+    : step.code_executed;
+  const output = step.output_summary.length > 80
+    ? `${step.output_summary.slice(0, 77)}...`
+    : step.output_summary;
+  return `[${step.step}] ${code}\n    → ${output}  (${step.tokens_used} tok, ${step.duration_seconds.toFixed(1)}s)`;
+}
+
+export function RlmAnswerView({ answer, loading, contextPaths }: RlmAnswerViewProps): React.ReactNode {
+  if (!answer && !loading) {
+    return (
+      <box height="100%" width="100%" flexDirection="column" justifyContent="center" alignItems="center">
+        <text>Press / to ask a question about your documents</text>
+        {contextPaths.length > 0 ? (
+          <text>{`Context: ${contextPaths.length} file(s) — a:clear`}</text>
+        ) : (
+          <text>{"Tip: go to Search tab, select results, press 'a' to add document context"}</text>
+        )}
+      </box>
+    );
+  }
+
+  if (!answer) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Connecting to RLM...</text>
+      </box>
+    );
+  }
+
+  const statusLabel =
+    answer.status === "streaming" ? "Streaming..."
+      : answer.status === "completed" ? "Completed"
+        : answer.status === "budget_exceeded" ? "Budget Exceeded"
+          : "Error";
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Document context paths */}
+      {contextPaths.length > 0 && (
+        <box height={1} width="100%">
+          <text>{`Docs: ${contextPaths.join(", ")}`}</text>
+        </box>
+      )}
+
+      {/* Status bar */}
+      <box height={1} width="100%">
+        <text>
+          {`${statusLabel}  ${answer.model ? `Model: ${answer.model}  ` : ""}Iterations: ${answer.iterations}  Tokens: ${answer.total_tokens}${answer.total_duration_seconds > 0 ? `  Time: ${answer.total_duration_seconds.toFixed(1)}s` : ""}`}
+        </text>
+      </box>
+
+      {/* Error / budget message */}
+      {answer.error_message && (
+        <box height={1} width="100%">
+          <text>
+            {answer.status === "budget_exceeded"
+              ? `Budget exceeded: ${answer.error_message}`
+              : `Error: ${answer.error_message}`}
+          </text>
+        </box>
+      )}
+
+      {/* Main content: answer or streaming steps */}
+      <scrollbox flexGrow={1} width="100%">
+        {answer.answer ? (
+          <text>{answer.answer}</text>
+        ) : answer.steps.length > 0 ? (
+          <box flexDirection="column">
+            {answer.steps.map((step) => (
+              <box key={step.step} height={2} width="100%">
+                <text>{formatStep(step)}</text>
+              </box>
+            ))}
+            {answer.status === "streaming" && (
+              <box height={1} width="100%">
+                <text>{"Thinking..."}</text>
+              </box>
+            )}
+          </box>
+        ) : (
+          <text>{answer.status === "streaming" ? "Starting inference..." : "(no answer)"}</text>
+        )}
+      </scrollbox>
+    </box>
+  );
+}

package/src/panels/search/search-panel.tsx

@@ -0,0 +1,405 @@
+/**
+ * Search & Knowledge panel: tabbed layout with search, knowledge graph,
+ * and memories views.
+ *
+ * Press / to enter search input mode, type query, Enter to submit, Escape to cancel.
+ */
+
+import React, { useCallback } from "react";
+import { useSearchStore } from "../../stores/search-store.js";
+import { useGlobalStore } from "../../stores/global-store.js";
+import type { SearchMode } from "../../stores/search-store.js";
+import { useKeyboard } from "../../shared/hooks/use-keyboard.js";
+import { listNavigationBindings } from "../../shared/hooks/use-list-navigation.js";
+import { useTextInput } from "../../shared/hooks/use-text-input.js";
+import { useConfirmStore } from "../../shared/hooks/use-confirm.js";
+import { useApi } from "../../shared/hooks/use-api.js";
+import { useUiStore } from "../../stores/ui-store.js";
+import { useVisibleTabs } from "../../shared/hooks/use-visible-tabs.js";
+import { SubTabBar } from "../../shared/components/sub-tab-bar.js";
+import { subTabCycleBindings } from "../../shared/components/sub-tab-bar-utils.js";
+import { useTabFallback } from "../../shared/hooks/use-tab-fallback.js";
+import { SearchResults } from "./search-results.js";
+import { KnowledgeView } from "./knowledge-view.js";
+import { MemoryList } from "./memory-list.js";
+import { PlaybookList } from "./playbook-list.js";
+import { RlmAnswerView } from "./rlm-answer-view.js";
+import { ColumnSearch } from "./column-search.js";
+import { useKnowledgeStore } from "../../stores/knowledge-store.js";
+import { Tooltip } from "../../shared/components/tooltip.js";
+import { SEARCH_TABS } from "../../shared/navigation.js";
+
+const MODE_LABELS: Readonly<Record<SearchMode, string>> = {
+  keyword: "KW",
+  semantic: "SEM",
+  hybrid: "HYB",
+};
+
+const HELP_TEXT: Readonly<Record<string, string>> = {
+  search: "j/k:navigate  a:add to context  /:search  m:mode  Enter:select  Tab:tab  r:refresh  q:quit",
+  knowledge: "j/k:navigate  Tab:switch tab  /:search  m:mode  Enter:select  d:delete  r:refresh  q:quit",
+  memories: "j/k:navigate  Tab:tab  /:search  Enter:history  v:diff  n:create  u:update  d:delete  Esc:close  r:refresh  q:quit",
+  playbooks: "j/k:navigate  Tab:switch tab  /:search  m:mode  Enter:select  d:delete  r:refresh  q:quit",
+  ask: "/:ask  a:clear context  Tab:switch tab  r:refresh  q:quit",
+  columns: "/:search column  Tab:switch tab  r:refresh  q:quit",
+};
+
+export default function SearchPanel(): React.ReactNode {
+  const client = useApi();
+  const confirm = useConfirmStore((s) => s.confirm);
+  const overlayActive = useUiStore((s) => s.overlayActive);
+  const visibleTabs = useVisibleTabs(SEARCH_TABS);
+  // Effective zone: explicit config > server-discovered zone (matches status-bar fallback)
+  const configZoneId = useGlobalStore((s) => s.config.zoneId);
+  const serverZoneId = useGlobalStore((s) => s.zoneId);
+  const effectiveZoneId = configZoneId ?? serverZoneId ?? undefined;
+
+  const searchQuery = useSearchStore((s) => s.searchQuery);
+  const searchResults = useSearchStore((s) => s.searchResults);
+  const expandedContent = useSearchStore((s) => s.expandedContent);
+  const expandedPath = useSearchStore((s) => s.expandedPath);
+  const searchTotal = useSearchStore((s) => s.searchTotal);
+  const selectedResultIndex = useSearchStore((s) => s.selectedResultIndex);
+  const searchLoading = useSearchStore((s) => s.searchLoading);
+  const selectedEntity = useSearchStore((s) => s.selectedEntity);
+  const neighbors = useSearchStore((s) => s.neighbors);
+  const knowledgeSearchResult = useSearchStore((s) => s.knowledgeSearchResult);
+  const knowledgeLoading = useSearchStore((s) => s.knowledgeLoading);
+  const memories = useSearchStore((s) => s.memories);
+  const selectedMemoryIndex = useSearchStore((s) => s.selectedMemoryIndex);
+  const memoriesLoading = useSearchStore((s) => s.memoriesLoading);
+  const memoryHistory = useSearchStore((s) => s.memoryHistory);
+  const memoryHistoryLoading = useSearchStore((s) => s.memoryHistoryLoading);
+  const memoryDiff = useSearchStore((s) => s.memoryDiff);
+  const memoryDiffLoading = useSearchStore((s) => s.memoryDiffLoading);
+  const playbooks = useSearchStore((s) => s.playbooks);
+  const selectedPlaybookIndex = useSearchStore((s) => s.selectedPlaybookIndex);
+  const playbooksLoading = useSearchStore((s) => s.playbooksLoading);
+  const rlmAnswer = useSearchStore((s) => s.rlmAnswer);
+  const rlmLoading = useSearchStore((s) => s.rlmLoading);
+  const rlmContextPaths = useSearchStore((s) => s.rlmContextPaths);
+  const activeTab = useSearchStore((s) => s.activeTab);
+  const error = useSearchStore((s) => s.error);
+
+  // Knowledge store (column search)
+  const columnSearchResults = useKnowledgeStore((s) => s.columnSearchResults);
+  const columnSearchLoading = useKnowledgeStore((s) => s.columnSearchLoading);
+  const searchByColumn = useKnowledgeStore((s) => s.searchByColumn);
+
+  const searchMode = useSearchStore((s) => s.searchMode);
+  const cycleSearchMode = useSearchStore((s) => s.cycleSearchMode);
+
+  const search = useSearchStore((s) => s.search);
+  const fetchEntity = useSearchStore((s) => s.fetchEntity);
+  const fetchNeighbors = useSearchStore((s) => s.fetchNeighbors);
+  const searchKnowledge = useSearchStore((s) => s.searchKnowledge);
+  const fetchMemories = useSearchStore((s) => s.fetchMemories);
+  const fetchPlaybooks = useSearchStore((s) => s.fetchPlaybooks);
+  const deletePlaybook = useSearchStore((s) => s.deletePlaybook);
+  const deleteMemory = useSearchStore((s) => s.deleteMemory);
+  const createMemory = useSearchStore((s) => s.createMemory);
+  const updateMemory = useSearchStore((s) => s.updateMemory);
+  const setSelectedPlaybookIndex = useSearchStore((s) => s.setSelectedPlaybookIndex);
+  const askRlm = useSearchStore((s) => s.askRlm);
+  const addRlmContextPath = useSearchStore((s) => s.addRlmContextPath);
+  const clearRlmContextPaths = useSearchStore((s) => s.clearRlmContextPaths);
+  const fetchMemoryHistory = useSearchStore((s) => s.fetchMemoryHistory);
+  const fetchMemoryDiff = useSearchStore((s) => s.fetchMemoryDiff);
+  const clearMemoryHistory = useSearchStore((s) => s.clearMemoryHistory);
+  const clearMemoryDiff = useSearchStore((s) => s.clearMemoryDiff);
+  const setActiveTab = useSearchStore((s) => s.setActiveTab);
+  const setSelectedResultIndex = useSearchStore((s) => s.setSelectedResultIndex);
+  const setSelectedMemoryIndex = useSearchStore((s) => s.setSelectedMemoryIndex);
+  const setSearchQuery = useSearchStore((s) => s.setSearchQuery);
+
+  useTabFallback(visibleTabs, activeTab, setActiveTab);
+
+  const submitSearch = useCallback(
+    (query: string) => {
+      if (!client || !query.trim()) return;
+
+      setSearchQuery(query.trim());
+      if (activeTab === "search") {
+        search(query.trim(), client);
+      } else if (activeTab === "knowledge") {
+        searchKnowledge(query.trim(), client);
+      } else if (activeTab === "memories") {
+        fetchMemories(query.trim(), client);
+      } else if (activeTab === "playbooks") {
+        fetchPlaybooks(query.trim(), client);
+      } else if (activeTab === "ask") {
+        askRlm(query.trim(), client, effectiveZoneId);
+      } else if (activeTab === "columns") {
+        void searchByColumn(query.trim(), client);
+      }
+    },
+    [client, activeTab, search, searchKnowledge, fetchMemories, fetchPlaybooks, askRlm, searchByColumn, setSearchQuery, effectiveZoneId],
+  );
+
+  // Refresh current view based on active tab
+  const refreshCurrentView = useCallback((): void => {
+    if (!client) return;
+
+    if (activeTab === "search" && searchQuery) {
+      search(searchQuery, client);
+    } else if (activeTab === "knowledge" && searchQuery) {
+      searchKnowledge(searchQuery, client);
+    } else if (activeTab === "memories") {
+      fetchMemories("", client);
+    } else if (activeTab === "playbooks") {
+      fetchPlaybooks(searchQuery || "", client);
+    } else if (activeTab === "ask" && searchQuery) {
+      askRlm(searchQuery, client, effectiveZoneId);
+    } else if (activeTab === "columns" && searchQuery) {
+      void searchByColumn(searchQuery, client);
+    }
+  }, [client, activeTab, searchQuery, search, searchKnowledge, fetchMemories, fetchPlaybooks, askRlm, searchByColumn, effectiveZoneId]);
+
+  // Text input for search bar
+  const textInput = useTextInput({
+    onSubmit: (val) => {
+      // Clear expanded content when submitting a new search
+      useSearchStore.setState({ expandedContent: null, expandedPath: null });
+      submitSearch(val);
+    },
+  });
+
+  // Shared list navigation (j/k/up/down/g/G) — switches per active tab
+  const listNav = listNavigationBindings({
+    getIndex: () => {
+      if (activeTab === "search") return selectedResultIndex;
+      if (activeTab === "memories") return selectedMemoryIndex;
+      if (activeTab === "playbooks") return selectedPlaybookIndex;
+      return 0;
+    },
+    setIndex: (i) => {
+      if (activeTab === "search") setSelectedResultIndex(i);
+      else if (activeTab === "memories") setSelectedMemoryIndex(i);
+      else if (activeTab === "playbooks") setSelectedPlaybookIndex(i);
+    },
+    getLength: () => {
+      if (activeTab === "search") return searchResults.length;
+      if (activeTab === "memories") return memories.length;
+      if (activeTab === "playbooks") return playbooks.length;
+      return 0;
+    },
+  });
+
+  useKeyboard(
+    overlayActive
+      ? {}
+      : textInput.active
+      ? textInput.inputBindings
+      : {
+          ...listNav,
+          ...subTabCycleBindings(visibleTabs, activeTab, setActiveTab),
+          r: () => refreshCurrentView(),
+          m: () => cycleSearchMode(),
+          "/": () => textInput.activate(searchQuery),
+          return: () => {
+            if (!client) return;
+
+            if (activeTab === "search") {
+              const result = searchResults[selectedResultIndex];
+              if (result) {
+                // Read the full file and show as expanded content
+                client.get<{ content: string }>(`/api/v2/files/read?path=${encodeURIComponent(result.path)}`)
+                  .then((r) => {
+                    useSearchStore.setState({ expandedContent: r.content, expandedPath: result.path });
+                  })
+                  .catch(() => {});
+              }
+            } else if (activeTab === "knowledge") {
+              if (selectedEntity) {
+                const entityId = String(
+                  (selectedEntity as Record<string, unknown>).entity_id ?? "",
+                );
+                if (entityId) {
+                  fetchNeighbors(entityId, client);
+                }
+              }
+            } else if (activeTab === "memories") {
+              const memory = memories[selectedMemoryIndex];
+              if (memory) {
+                const memId = String(
+                  (memory as Record<string, unknown>).memory_id ?? "",
+                );
+                if (memId) {
+                  if (memoryHistory?.memory_id === memId) {
+                    clearMemoryHistory();
+                    clearMemoryDiff();
+                  } else {
+                    clearMemoryDiff();
+                    fetchMemoryHistory(memId, client);
+                  }
+                }
+              }
+            }
+          },
+          v: () => {
+            if (!client || activeTab !== "memories") return;
+
+            const memory = memories[selectedMemoryIndex];
+            if (!memory) return;
+
+            const memId = String(
+              (memory as Record<string, unknown>).memory_id ?? "",
+            );
+            if (!memId) return;
+
+            if (memoryHistory && memoryHistory.memory_id === memId && memoryHistory.current_version >= 2) {
+              fetchMemoryDiff(
+                memId,
+                memoryHistory.current_version - 1,
+                memoryHistory.current_version,
+                client,
+              );
+            }
+          },
+          d: async () => {
+            if (!client) return;
+            if (activeTab === "playbooks") {
+              const playbook = playbooks[selectedPlaybookIndex];
+              if (playbook) {
+                const ok = await confirm("Delete playbook?", "This cannot be undone.");
+                if (!ok) return;
+                deletePlaybook(playbook.playbook_id, client);
+              }
+            } else if (activeTab === "memories") {
+              const memory = memories[selectedMemoryIndex];
+              if (memory) {
+                const memId = String((memory as Record<string, unknown>).memory_id ?? "");
+                if (memId) {
+                  const ok = await confirm("Delete memory?", "This cannot be undone.");
+                  if (!ok) return;
+                  deleteMemory(memId, client);
+                }
+              }
+            }
+          },
+          n: () => {
+            if (activeTab === "memories" && client && searchQuery.trim()) {
+              createMemory(searchQuery.trim(), {}, client);
+            }
+          },
+          u: () => {
+            if (activeTab === "memories" && client && searchQuery.trim()) {
+              const memory = memories[selectedMemoryIndex];
+              if (memory) {
+                const memId = String((memory as Record<string, unknown>).memory_id ?? "");
+                if (memId) updateMemory(memId, searchQuery.trim(), client);
+              }
+            }
+          },
+          a: () => {
+            if (activeTab === "search") {
+              const result = searchResults[selectedResultIndex];
+              if (result) {
+                addRlmContextPath(result.path);
+              }
+            } else if (activeTab === "ask") {
+              clearRlmContextPaths();
+            }
+          },
+          escape: () => {
+            // Close expanded file content
+            if (expandedContent !== null) {
+              useSearchStore.setState({ expandedContent: null, expandedPath: null });
+              return;
+            }
+            if (activeTab === "memories" && (memoryHistory || memoryDiff)) {
+              clearMemoryHistory();
+              clearMemoryDiff();
+            }
+          },
+        },
+    overlayActive ? undefined : textInput.active ? textInput.onUnhandled : undefined,
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      <Tooltip tooltipKey="search-panel" message="Tip: Press ? for keybinding help" />
+      {/* Search input bar */}
+      <box height={1} width="100%">
+        <text>
+          {textInput.active
+            ? `Search: ${textInput.buffer}█`
+            : `Query: ${searchQuery || "(press / to search)"}  [${MODE_LABELS[searchMode]}]`}
+        </text>
+      </box>
+
+      {/* Tab bar */}
+      <SubTabBar tabs={visibleTabs} activeTab={activeTab} />
+
+      {/* Error display */}
+      {error && (
+        <box height={1} width="100%">
+          <text>{`Error: ${error}`}</text>
+        </box>
+      )}
+
+      {/* Tab content */}
+      <box flexGrow={1} borderStyle="single">
+        {activeTab === "search" && expandedContent !== null && (
+          <box height="100%" width="100%" flexDirection="column">
+            <box height={1} width="100%">
+              <text bold>{`── ${expandedPath} ── (Escape to close)`}</text>
+            </box>
+            <scrollbox flexGrow={1} width="100%">
+              <text>{expandedContent}</text>
+            </scrollbox>
+          </box>
+        )}
+        {activeTab === "search" && expandedContent === null && (
+          <SearchResults
+            results={searchResults}
+            total={searchTotal}
+            selectedIndex={selectedResultIndex}
+            loading={searchLoading}
+          />
+        )}
+        {activeTab === "knowledge" && (
+          <KnowledgeView
+            entity={selectedEntity}
+            neighbors={neighbors}
+            knowledgeSearchResult={knowledgeSearchResult}
+            loading={knowledgeLoading}
+          />
+        )}
+        {activeTab === "memories" && (
+          <MemoryList
+            memories={memories}
+            selectedIndex={selectedMemoryIndex}
+            loading={memoriesLoading}
+            memoryHistory={memoryHistory}
+            memoryHistoryLoading={memoryHistoryLoading}
+            memoryDiff={memoryDiff}
+            memoryDiffLoading={memoryDiffLoading}
+          />
+        )}
+        {activeTab === "playbooks" && (
+          <PlaybookList
+            playbooks={playbooks}
+            selectedIndex={selectedPlaybookIndex}
+            loading={playbooksLoading}
+          />
+        )}
+        {activeTab === "ask" && (
+          <RlmAnswerView answer={rlmAnswer} loading={rlmLoading} contextPaths={rlmContextPaths} />
+        )}
+        {activeTab === "columns" && (
+          <ColumnSearch results={columnSearchResults} loading={columnSearchLoading} />
+        )}
+      </box>
+
+      {/* Help bar */}
+      <box height={1} width="100%">
+        <text>
+          {textInput.active
+            ? "Type query, Enter:submit, Escape:cancel, Backspace:delete"
+            : HELP_TEXT[activeTab] ?? "j/k:navigate  Tab:switch tab  r:refresh  q:quit"}
+        </text>
+      </box>
+    </box>
+  );
+}

package/src/panels/search/search-results.tsx

@@ -0,0 +1,116 @@
+/**
+ * Search results list: path, chunk_text (truncated), score, line range.
+ */
+
+import React, { useCallback } from "react";
+import type { SearchResult } from "../../stores/search-store.js";
+import { textStyle } from "../../shared/text-style.js";
+import { statusColor } from "../../shared/theme.js";
+import { EmptyState } from "../../shared/components/empty-state.js";
+import { VirtualList } from "../../shared/components/virtual-list.js";
+import { truncateText } from "../../shared/utils/format-text.js";
+
+const VIEWPORT_HEIGHT = 20;
+
+interface SearchResultsProps {
+  readonly results: readonly SearchResult[];
+  readonly total: number;
+  readonly selectedIndex: number;
+  readonly loading: boolean;
+}
+
+function formatScore(score: number): string {
+  return score.toFixed(2);
+}
+
+function scoreColor(score: number): string {
+  if (score > 0.7) return statusColor.healthy;
+  if (score >= 0.4) return statusColor.warning;
+  return statusColor.dim;
+}
+
+function formatLineRange(start: number | null, end: number | null): string {
+  if (start == null) return "—";
+  if (start === end || end == null) return `L${start}`;
+  return `L${start}-${end}`;
+}
+
+function formatScoreBreakdown(result: SearchResult): string {
+  const parts: string[] = [];
+  if (result.keyword_score != null) parts.push(`bm25:${result.keyword_score.toFixed(2)}`);
+  if (result.vector_score != null) parts.push(`vec:${result.vector_score.toFixed(2)}`);
+  if (result.reranker_score != null) parts.push(`rerank:${result.reranker_score.toFixed(2)}`);
+  return parts.length > 0 ? parts.join(" ") : "";
+}
+
+export function SearchResults({
+  results,
+  total,
+  selectedIndex,
+  loading,
+}: SearchResultsProps): React.ReactNode {
+  if (loading) {
+    return (
+      <box height="100%" width="100%" justifyContent="center" alignItems="center">
+        <text>Searching...</text>
+      </box>
+    );
+  }
+
+  if (results.length === 0) {
+    return (
+      <EmptyState
+        message="No results."
+        hint="Try a different query or search mode (m to cycle: KW → SEM → HYB)."
+      />
+    );
+  }
+
+  const renderResult = useCallback(
+    (result: SearchResult, i: number) => {
+      const isSelected = i === selectedIndex;
+      const prefix = isSelected ? "> " : "  ";
+      const score = formatScore(result.score).padEnd(5);
+      const lines = formatLineRange(result.line_start, result.line_end).padEnd(9);
+      const path = truncateText(result.path, 29).padEnd(29);
+      const breakdown = formatScoreBreakdown(result);
+      const chunk = truncateText(result.chunk_text.replace(/\n/g, " "), 30);
+
+      return (
+        <box key={`${result.path}:${result.chunk_index}`} height={1} width="100%">
+          <text>
+            <span>{prefix}</span>
+            <span style={textStyle({ fg: scoreColor(result.score) })}>{score}</span>
+            <span>{`  ${lines}  ${path}  `}</span>
+            <span style={textStyle({ dim: true })}>{breakdown ? `[${breakdown}]  ` : ""}</span>
+            <span>{chunk}</span>
+          </text>
+        </box>
+      );
+    },
+    [selectedIndex],
+  );
+
+  return (
+    <box height="100%" width="100%" flexDirection="column">
+      {/* Header */}
+      <box height={1} width="100%">
+        <text>{`Results: ${total} found`}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  SCORE  LINES      PATH                           CHUNK"}</text>
+      </box>
+      <box height={1} width="100%">
+        <text>{"  -----  ---------  -----------------------------  --------------------------------"}</text>
+      </box>
+
+      {/* Result rows */}
+      <VirtualList
+        items={results}
+        renderItem={renderResult}
+        viewportHeight={VIEWPORT_HEIGHT}
+        selectedIndex={selectedIndex}
+      />
+    </box>
+  );
+}