ei-tui 0.6.6 → 0.7.0

package/src/integrations/opencode/importer.ts

@@ -250,6 +250,7 @@ export async function importOpenCodeSessions(
         personaDisplayName: persona.display_name,
         messages_context: contextMsgs,
         messages_analyze: toAnalyze,
+        sources: [`opencode:${targetSession.id}`],
       };
 
       if (!signal?.aborted) {

package/src/prompts/response/sections.ts

@@ -277,7 +277,7 @@ export function buildQuotesSection(quotes: Quote[], human: ResponsePromptData["h
   const idToName = new Map(allDataItems.map(item => [item.id, item.name]));
   
   const formatted = quotes.map(q => {
-    const speaker = q.speaker === "human" ? "Human" : q.speaker;
+    const speaker = q.speaker === "human" ? human.name : q.speaker;
     const date = formatDate(q.timestamp);
     const linkedNames = q.data_item_ids
       .map(id => idToName.get(id))

package/src/prompts/response/types.ts

@@ -23,6 +23,7 @@ export interface ResponsePromptData {
     include_message_timestamps?: boolean;
   };
   human: {
+    name: string;
     facts: Fact[];
     topics: Topic[];
     people: Person[];

package/src/prompts/room/index.ts

@@ -97,10 +97,10 @@ There is no objectively correct answer. Pick the response you find most interest
 **The MAP dynamic**: Every participant — personas and the Human alike — can see your description and traits. They have been crafting their responses specifically to appeal to your tastes. Personas are also constrained to stay true to their own identities; the Human is not. Factor that in if you choose to.`;
 
   const contextSection = context.length > 0
-    ? buildRoomHistorySection(context)
+    ? buildRoomHistorySection(context, data.human.name)
     : "";
 
-  const candidatesSection = buildJudgeCandidatesSection(candidates);
+  const candidatesSection = buildJudgeCandidatesSection(candidates, data.human.name);
   const decisionSection = buildJudgeDecisionFormatSection();
   const currentTime = formatCurrentTime();
 

package/src/prompts/room/sections.ts

@@ -32,11 +32,11 @@ export function buildRoomParticipantsSection(participants: RoomParticipantIdenti
   return `## Others in the Room\n\n${lines.join("\n\n")}`;
 }
 
-export function buildRoomHistorySection(history: RoomHistoryMessage[]): string {
+export function buildRoomHistorySection(history: RoomHistoryMessage[], humanName: string): string {
   if (history.length === 0) return "";
 
   const lines = history.map(msg => {
-    const speaker = msg.speaker_id === "human" ? "Human" : msg.speaker_name;
+    const speaker = msg.speaker_id === "human" ? humanName : msg.speaker_name;
     if (msg.silence_reason) {
       return `**${speaker}**: *[chose not to respond: ${msg.silence_reason}]*`;
     }
@@ -116,9 +116,9 @@ ${lines.join("\n\n")}
 Respond as yourself — your read on this moment, your relationship with the human, the reaction that comes naturally to who you are. A room with distinct voices is more alive than one with echoes.`;
 }
 
-export function buildJudgeCandidatesSection(candidates: RoomJudgeCandidate[]): string {
+export function buildJudgeCandidatesSection(candidates: RoomJudgeCandidate[], humanName: string): string {
   const lines = candidates.map((c, i) => {
-    const speaker = c.speaker_id === "human" ? "Human" : c.speaker_name;
+    const speaker = c.speaker_id === "human" ? humanName : c.speaker_name;
     const content = c.silence_reason
       ? `*[chose not to respond: ${c.silence_reason}]*`
       : [c.verbal_response, c.action_response ? `*${c.action_response}*` : ""].filter(Boolean).join(" ");

package/src/prompts/room/types.ts

@@ -39,6 +39,7 @@ export interface RoomResponsePromptData {
   };
   other_participants: RoomParticipantIdentity[];
   human: {
+    name: string;
     facts: Fact[];
     topics: Topic[];
     people: Person[];
@@ -72,6 +73,9 @@ export interface RoomJudgePromptData {
     long_description?: string;
     traits: PersonaTrait[];
   };
+  human: {
+    name: string;
+  };
   context: RoomHistoryMessage[];
   candidates: RoomJudgeCandidate[];
 }

package/tui/src/commands/activate.tsx

@@ -1,6 +1,7 @@
 import type { Command } from "./registry";
 import { RoomMode } from "../../../src/core/types/enums.js";
 import { openCYPEditor } from "../util/cyp-editor.js";
+import { buildCYPTree } from "../util/cyp-tree.js";
 
 export const activateCommand: Command = {
   name: "activate",
@@ -55,18 +56,18 @@ export const activateCommand: Command = {
 
     const num = parseInt(args[0], 10);
     if (isNaN(num) || num < 1) {
-      ctx.showNotification("Usage: /activate <num> (1-based message index)", "error");
+      ctx.showNotification("Usage: /activate <num> (1-based BFS tree number)", "error");
       return;
     }
 
     const messages = ctx.ei.roomMessages();
-    const target = messages[num - 1];
-    if (!target) {
-      ctx.showNotification(`No message at index ${num} (room has ${messages.length} messages)`, "error");
+    const { numToId } = buildCYPTree(messages);
+    const targetId = numToId.get(num);
+    if (!targetId) {
+      ctx.showNotification(`No message at tree position ${num} (tree has ${numToId.size} nodes)`, "error");
       return;
     }
-
-    await ctx.ei.selectCYPBranch(target.id);
+    await ctx.ei.selectCYPBranch(targetId);
 
     const freshRoom = ctx.ei.getRoom(roomId);
     const newActiveNodeId = freshRoom?.active_node_id;

package/tui/src/commands/context.tsx

@@ -1,8 +1,11 @@
 import type { Command } from "./registry.js";
 import { spawnEditor } from "../util/editor.js";
-import { contextToYAML, contextFromYAML } from "../util/yaml-serializers.js";
+import { contextToYAML, contextFromYAML, ffaContextToYAML, ffaContextFromYAML } from "../util/yaml-serializers.js";
 import { logger } from "../util/logger.js";
 import { ConfirmOverlay } from "../components/ConfirmOverlay.js";
+import { CYPTreeOverlay } from "../components/CYPTreeOverlay.js";
+import { MAPScoreOverlay } from "../components/MAPScoreOverlay.js";
+import { RoomMode } from "../../../src/core/types/enums.js";
 
 export const contextCommand: Command = {
   name: "context",
@@ -12,8 +15,191 @@ export const contextCommand: Command = {
 
   async execute(_args, ctx) {
     const personaId = ctx.ei.activePersonaId();
+    const roomId = ctx.ei.activeRoomId();
+
+    if (roomId) {
+      const room = ctx.ei.getRoom(roomId);
+      if (!room) {
+        ctx.showNotification("Room not found", "warn");
+        return;
+      }
+
+      if (room.mode === RoomMode.ChooseYourPath) {
+        const activeNodeId = room.active_node_id;
+        if (!activeNodeId) {
+          ctx.showNotification("No active node in room", "warn");
+          return;
+        }
+        ctx.showOverlay((hideOverlay) => (
+          <CYPTreeOverlay
+            roomId={roomId}
+            roomName={room.display_name}
+            messages={ctx.ei.roomMessages()}
+            activeNodeId={activeNodeId}
+            activeRoomPath={ctx.ei.roomActivePath()}
+            personas={ctx.ei.personas()}
+            onSelectBranch={(msgId) => ctx.ei.selectCYPBranch(msgId)}
+            onDismiss={hideOverlay}
+          />
+        ), ctx.renderer);
+        return;
+      }
+
+      if (room.mode === RoomMode.FreeForAll) {
+        const allMessages = ctx.ei.roomMessages();
+        if (allMessages.length === 0) {
+          ctx.showNotification("No messages to edit", "info");
+          return;
+        }
+
+        const personas = ctx.ei.personas();
+        const speakerMap = new Map(personas.map((p) => [p.id, p.display_name]));
+
+        const originalStatus = new Map(allMessages.map((m) => [m.id, m.context_status]));
+
+        let yamlContent = ffaContextToYAML(allMessages, speakerMap);
+        let editorIteration = 0;
+
+        while (true) {
+          editorIteration++;
+          logger.debug("[context] ffa starting editor iteration", { iteration: editorIteration });
+
+          const result = await spawnEditor({
+            initialContent: yamlContent,
+            filename: "ffa-context.yaml",
+            renderer: ctx.renderer,
+          });
+
+          logger.debug("[context] ffa editor returned", {
+            iteration: editorIteration,
+            aborted: result.aborted,
+            success: result.success,
+            hasContent: result.content !== null,
+          });
+
+          if (result.aborted) {
+            ctx.showNotification("Editor cancelled", "info");
+            return;
+          }
+
+          if (!result.success) {
+            ctx.showNotification("Editor failed to open", "error");
+            return;
+          }
+
+          if (result.content === null) {
+            ctx.showNotification("No changes made", "info");
+            return;
+          }
+
+          try {
+            const parsed = ffaContextFromYAML(result.content);
+
+            if (parsed.deletedMessageIds.length > 0) {
+              const count = parsed.deletedMessageIds.length;
+              const hasImplicit = parsed.implicitDeleteCount > 0;
+              const confirmed = await new Promise<boolean>((resolve) => {
+                ctx.showOverlay((hideOverlay) => (
+                  <ConfirmOverlay
+                    message={`Delete ${count} message${count === 1 ? "" : "s"}?${hasImplicit ? `\n(includes ${parsed.implicitDeleteCount} persona response${parsed.implicitDeleteCount === 1 ? "" : "s"})` : ""}`}
+                    onConfirm={() => { hideOverlay(); resolve(true); }}
+                    onCancel={() => { hideOverlay(); resolve(false); }}
+                  />
+                ), ctx.renderer);
+              });
+              if (!confirmed) {
+                ctx.showNotification("Delete cancelled", "info");
+                return;
+              }
+              await ctx.ei.deleteRoomMessages(roomId, parsed.deletedMessageIds);
+            }
+
+            for (const msg of parsed.messages) {
+              const orig = originalStatus.get(msg.id);
+              if (orig !== undefined && orig !== msg.context_status) {
+                await ctx.ei.setRoomMessageContextStatus(roomId, msg.id, msg.context_status);
+              }
+            }
+
+            const deleteCount = parsed.deletedMessageIds.length;
+            const notification =
+              deleteCount > 0
+                ? `Context updated (${deleteCount} message${deleteCount === 1 ? "" : "s"} deleted)`
+                : "Context updated";
+
+            ctx.showNotification(notification, "info");
+            return;
+          } catch (parseError) {
+            const errorMsg = parseError instanceof Error ? parseError.message : String(parseError);
+            logger.debug("[context] ffa YAML parse error, prompting for re-edit", {
+              iteration: editorIteration,
+              error: errorMsg,
+            });
+
+            const shouldReEdit = await new Promise<boolean>((resolve) => {
+              ctx.showOverlay((hideOverlay, hideForEditor) => (
+                <ConfirmOverlay
+                  message={`YAML parse error:\n${errorMsg}\n\nRe-edit?`}
+                  onConfirm={() => {
+                    logger.debug("[context] ffa user confirmed re-edit");
+                    hideForEditor();
+                    resolve(true);
+                  }}
+                  onCancel={() => {
+                    logger.debug("[context] ffa user cancelled re-edit");
+                    hideOverlay();
+                    resolve(false);
+                  }}
+                />
+              ), ctx.renderer);
+            });
+
+            logger.debug("[context] ffa shouldReEdit", { shouldReEdit, iteration: editorIteration });
+
+            if (shouldReEdit) {
+              yamlContent = result.content;
+              logger.debug("[context] ffa continuing to next iteration");
+              continue;
+            } else {
+              ctx.showNotification("Changes discarded", "info");
+              return;
+            }
+          }
+        }
+      }
+
+      if (room.mode === RoomMode.MessagesAgainstPersona) {
+        if (!room.judge_persona_id) {
+          ctx.showNotification("No judge configured for this room", "warn");
+          return;
+        }
+        const human = await ctx.ei.getHuman();
+        const humanName =
+          human.settings?.name_display ||
+          human.facts?.find((f) => f.name === "Nickname/Preferred Name")?.description ||
+          "You";
+        ctx.showOverlay((hideOverlay) => (
+          <MAPScoreOverlay
+            roomId={roomId}
+            roomName={room.display_name}
+            messages={ctx.ei.roomMessages()}
+            activeNodeId={room.active_node_id ?? ""}
+            activeRoomPath={ctx.ei.roomActivePath()}
+            personas={ctx.ei.personas()}
+            judgePersonaId={room.judge_persona_id!}
+            humanName={humanName}
+            onDismiss={hideOverlay}
+          />
+        ), ctx.renderer);
+        return;
+      }
+
+      ctx.showNotification("Unknown room mode", "warn");
+      return;
+    }
+
     if (!personaId) {
-      ctx.showNotification("No active persona", "error");
+      ctx.showNotification("No active chat", "warn");
       return;
     }
 

package/tui/src/components/CYPTreeOverlay.tsx

@@ -0,0 +1,357 @@
+import { useKeyboard } from "@opentui/solid";
+import { For, createMemo, createSignal, onMount, onCleanup, createEffect } from "solid-js";
+import type { RoomMessage, PersonaSummary } from "../../../src/core/types.js";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { useKeyboardNav } from "../context/keyboard.js";
+import { buildCYPTree, getSubtreeIds } from "../util/cyp-tree.js";
+
+export interface CYPTreeOverlayProps {
+  roomId: string;
+  roomName?: string;
+  messages: RoomMessage[];
+  activeNodeId: string;
+  activeRoomPath: RoomMessage[];
+  personas: PersonaSummary[];
+  onSelectBranch: (messageId: string) => Promise<void>;
+  onDismiss: () => void;
+}
+
+type LineKind = 'normal' | 'masked' | 'your-turn';
+
+interface TreeLine {
+  messageId: string;
+  globalNum: number;
+  prefix: string;
+  speaker: string;
+  preview: string;
+  stateIndicator: string;
+  kind: LineKind;
+  isMaskedOrPlaceholder: boolean;
+}
+
+function getMessageContent(m: RoomMessage): string {
+  if (m.content) return m.content;
+  if (m.verbal_response) return m.verbal_response;
+  if (m.action_response) return m.action_response;
+  if (m.silence_reason) return `(${m.silence_reason})`;
+  return "";
+}
+
+export function CYPTreeOverlay(props: CYPTreeOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
+  const treeData = createMemo(() => buildCYPTree(props.messages));
+
+  const [highlightedId, setHighlightedId] = createSignal<string>(props.activeNodeId);
+  const [viewStack, setViewStack] = createSignal<string[]>([]);
+  const [numBuffer, setNumBuffer] = createSignal<string>("");
+  const [navError, setNavError] = createSignal<string>("");
+
+  let scrollRef: ScrollBoxRenderable | null = null;
+
+  createEffect(() => {
+    const hid = highlightedId();
+    const lines = visibleLines();
+    const idx = lines.findIndex(l => l.messageId === hid);
+    if (idx < 0 || !scrollRef) return;
+    const top = scrollRef.scrollTop;
+    const visible = scrollRef.height;
+    if (idx < top) {
+      scrollRef.scrollTo(idx);
+    } else if (idx >= top + visible) {
+      scrollRef.scrollTo(idx - visible + 1);
+    }
+  });
+
+  const activeRoomPathIds = createMemo(() => new Set(props.activeRoomPath.map((m) => m.id)));
+
+  const incompleteFamilies = createMemo<Set<string>>(() => {
+    const result = new Set<string>();
+    const { childrenMap } = treeData();
+    childrenMap.forEach((children, parentId) => {
+      const hasPersonaChild = children.some(c => c.role === "persona");
+      const hasHumanChild = children.some(c => c.role === "human");
+      if (hasPersonaChild && !hasHumanChild) result.add(parentId);
+    });
+    return result;
+  });
+
+  const ICON_COL = 74;
+  const NUM_WIDTH = 7;
+
+  const visibleLines = createMemo<TreeLine[]>(() => {
+    const { ordered, idToNum, childrenMap } = treeData();
+    if (ordered.length === 0) return [];
+
+    const stack = viewStack();
+    const viewRootId = stack.length > 0 ? stack[stack.length - 1] : null;
+    const subtreeIds = viewRootId ? getSubtreeIds(viewRootId, childrenMap) : null;
+    const incomplete = incompleteFamilies();
+
+    const lines: TreeLine[] = [];
+
+    function buildPrefix(ancestorIsLast: boolean[], isLast: boolean, isDisplayRoot: boolean): string {
+      if (isDisplayRoot) return "";
+      let p = "";
+      for (const anc of ancestorIsLast) p += anc ? "   " : "\u2502  ";
+      return p + (isLast ? "\u2514\u2500 " : "\u251C\u2500 ");
+    }
+
+    function formatLine(numStr: string, prefix: string, speaker: string, content: string, icon: string): string {
+      const prefixLen = prefix.length;
+      const available = ICON_COL - NUM_WIDTH - prefixLen - speaker.length - 4 - 1;
+      const trimmed = content.length > available ? content.slice(0, Math.max(available - 1, 8)) + "\u2026" : content;
+      const body = `${numStr}  ${prefix}${speaker}: "${trimmed}"`;
+      return body.padEnd(ICON_COL) + " " + icon;
+    }
+
+    function pushLine(msgId: string, prefix: string, speaker: string, content: string, icon: string, kind: LineKind, globalNum: number) {
+      const numStr = ` ${String(globalNum).padStart(3)} `;
+      const formatted = formatLine(numStr, prefix, speaker, content, icon);
+      lines.push({
+        messageId: msgId,
+        globalNum,
+        prefix,
+        speaker,
+        preview: formatted,
+        stateIndicator: icon,
+        kind,
+        isMaskedOrPlaceholder: kind === 'masked' || kind === 'your-turn',
+      });
+    }
+
+    function visit(msgId: string, isLast: boolean, ancestorIsLast: boolean[], isDisplayRoot: boolean) {
+      const msg = props.messages.find((m) => m.id === msgId);
+      if (!msg) return;
+      if (subtreeIds && !subtreeIds.has(msgId)) return;
+
+      const children = childrenMap.get(msgId) ?? [];
+      const prefix = buildPrefix(ancestorIsLast, isLast, isDisplayRoot);
+      const globalNum = idToNum.get(msgId) ?? 0;
+
+      let kind: LineKind = 'normal';
+      if (msg.parent_id && incomplete.has(msg.parent_id)) kind = 'masked';
+
+      let icon: string;
+      if (msgId === props.activeNodeId) icon = "\u25CF";
+      else if (activeRoomPathIds().has(msgId)) icon = "\u25CB";
+      else if (kind === 'masked') icon = "\uD83D\uDD12";
+      else if (children.length === 0) icon = "\u00B7";
+      else icon = "\u25CB";
+
+      let speaker = "You";
+      if (msg.role === "persona" && msg.persona_id) {
+        speaker = props.personas.find((p) => p.id === msg.persona_id)?.display_name ?? msg.persona_id;
+      }
+
+      const content = kind === 'masked' ? "[hidden]" : getMessageContent(msg).replace(/\n/g, " ");
+      pushLine(msgId, prefix, speaker, content, icon, kind, globalNum);
+
+      const nextAncestors = isDisplayRoot ? [] : [...ancestorIsLast, isLast];
+      const hasHumanChild = children.some(c => c.role === "human");
+      const hasPersonaChild = children.some(c => c.role === "persona");
+      const needsYourTurn = hasPersonaChild && !hasHumanChild;
+
+      for (let i = 0; i < children.length; i++) {
+        const childIsLast = !needsYourTurn && i === children.length - 1;
+        visit(children[i].id, childIsLast, nextAncestors, false);
+      }
+
+      if (needsYourTurn) {
+        const ytPrefix = buildPrefix(nextAncestors, true, false);
+        const numStr = ` --  `;
+        const formatted = formatLine(numStr, ytPrefix, "You", "[Your turn]", "\u270F\uFE0F");
+        lines.push({
+          messageId: `your-turn-${msgId}`,
+          globalNum: 0,
+          prefix: ytPrefix,
+          speaker: "You",
+          preview: formatted,
+          stateIndicator: "\u270F\uFE0F",
+          kind: 'your-turn',
+          isMaskedOrPlaceholder: true,
+        });
+      }
+    }
+
+    const displayRootId = viewRootId ?? (ordered[0]?.id ?? null);
+    if (displayRootId) visit(displayRootId, true, [], true);
+
+    return lines;
+  });
+
+  useKeyboard((event) => {
+    event.preventDefault();
+    const key = event.name;
+
+    if (navError()) setNavError("");
+
+    if (key === "q" || key === "escape") {
+      props.onDismiss();
+      return;
+    }
+
+    if (key === "o") {
+      setViewStack((prev) => prev.slice(0, -1));
+      return;
+    }
+
+    if (key === "i") {
+      const hid = highlightedId();
+      if (hid) {
+        setViewStack((prev) => [...prev, hid]);
+      }
+      return;
+    }
+
+    if (key === "up" || key === "k") {
+      const lines = visibleLines();
+      const idx = lines.findIndex((l) => l.messageId === highlightedId());
+      if (idx > 0) setHighlightedId(lines[idx - 1].messageId);
+      return;
+    }
+
+    if (key === "down" || key === "j") {
+      const lines = visibleLines();
+      const idx = lines.findIndex((l) => l.messageId === highlightedId());
+      if (idx < lines.length - 1) setHighlightedId(lines[idx + 1].messageId);
+      return;
+    }
+
+    if (key === "pageup") {
+      if (scrollRef) {
+        const half = Math.max(1, Math.floor(scrollRef.height / 2));
+        scrollRef.scrollBy(-half);
+        const lines = visibleLines();
+        const newTop = scrollRef.scrollTop;
+        const targetLine = lines[newTop];
+        if (targetLine) setHighlightedId(targetLine.messageId);
+      }
+      return;
+    }
+
+    if (key === "pagedown") {
+      if (scrollRef) {
+        const half = Math.max(1, Math.floor(scrollRef.height / 2));
+        scrollRef.scrollBy(half);
+        const lines = visibleLines();
+        const newTop = scrollRef.scrollTop;
+        const targetLine = lines[Math.min(newTop + scrollRef.height - 1, lines.length - 1)];
+        if (targetLine) setHighlightedId(targetLine.messageId);
+      }
+      return;
+    }
+
+    if (key === "backspace") {
+      setNumBuffer((prev) => prev.slice(0, -1));
+      return;
+    }
+
+    if (key === "return") {
+      const buf = numBuffer();
+      let targetId: string | undefined;
+
+      if (buf.length > 0) {
+        const num = parseInt(buf, 10);
+        const { numToId } = treeData();
+        targetId = numToId.get(num);
+        if (!targetId) {
+          setNavError(`No node at position ${num}`);
+          setNumBuffer("");
+          return;
+        }
+      } else {
+        const hid = highlightedId();
+        const line = visibleLines().find(l => l.messageId === hid);
+        if (!line || line.isMaskedOrPlaceholder) return;
+        targetId = hid;
+      }
+
+      if (targetId) {
+        const targetMsg = props.messages.find(m => m.id === targetId);
+        if (targetMsg?.parent_id && incompleteFamilies().has(targetMsg.parent_id)) {
+          setNavError(`Node is masked — a sibling response is missing`);
+          setNumBuffer("");
+          return;
+        }
+        setNavError("");
+        setNumBuffer("");
+        void props.onSelectBranch(targetId).then(() => props.onDismiss());
+      }
+      return;
+    }
+
+    if (key && key.length === 1 && key >= "0" && key <= "9") {
+      setNumBuffer((prev) => prev + key);
+      return;
+    }
+  });
+
+  const headerText = createMemo(() => {
+    const name = props.roomName ?? props.roomId;
+    return `${name}  \u25CF active  \u25CB activated  \u00B7 unexplored  \uD83D\uDD12 masked  \u270F\uFE0F  your turn`;
+  });
+
+  const footerText = createMemo(() => {
+    const err = navError();
+    if (err) return `! ${err}  (press any key to continue)`;
+    const buf = numBuffer();
+    const bufPart = buf.length > 0 ? `  |  #${buf}_` : "";
+    return `[i] zoom in  [o] zoom out  [q] quit  |  Type number or highlight + Enter to activate${bufPart}`;
+  });
+
+  return (
+    <box
+      position="absolute"
+      width="100%"
+      height="100%"
+      left={0}
+      top={0}
+      backgroundColor="#000000"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width="95%"
+        height="95%"
+        backgroundColor="#1a1a2e"
+        borderStyle="single"
+        borderColor="#586e75"
+        flexDirection="column"
+      >
+        <box paddingLeft={1} paddingRight={1} paddingTop={1}>
+          <text fg="#eee8d5">{headerText()}</text>
+        </box>
+
+        <scrollbox height="100%" marginTop={1} marginBottom={1} ref={(el: ScrollBoxRenderable) => { scrollRef = el; }}>
+          <For each={visibleLines()}>
+            {(line) => {
+              const isHighlighted = () => line.messageId === highlightedId();
+              const fg = () => {
+                if (isHighlighted()) return "#b58900";
+                if (line.kind === 'masked') return "#44475a";
+                if (line.kind === 'your-turn') return "#6272a4";
+                return "#93a1a1";
+              };
+              return (
+                <box
+                  visible={true}
+                  backgroundColor={isHighlighted() ? "#2d3748" : "transparent"}
+                  paddingLeft={1}
+                >
+                  <text fg={fg()}>{line.preview}</text>
+                </box>
+              );
+            }}
+          </For>
+        </scrollbox>
+
+        <box paddingLeft={1} paddingRight={1} paddingBottom={1}>
+          <text fg={navError() ? "#dc322f" : "#586e75"}>{footerText()}</text>
+        </box>
+      </box>
+    </box>
+  );
+}