ei-tui 0.6.7 → 0.7.0

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>
+  );
+}

package/tui/src/components/MAPScoreOverlay.tsx

@@ -0,0 +1,300 @@
+import { useKeyboard } from "@opentui/solid";
+import { For, createMemo, onMount, onCleanup } from "solid-js";
+import type { RoomMessage, PersonaSummary } from "../../../src/core/types.js";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { useKeyboardNav } from "../context/keyboard.js";
+
+export interface MAPScoreOverlayProps {
+  roomId: string;
+  roomName?: string;
+  messages: RoomMessage[];
+  activeNodeId: string;
+  activeRoomPath: RoomMessage[];
+  personas: PersonaSummary[];
+  judgePersonaId: string;
+  humanName: string;
+  onDismiss: () => void;
+}
+
+interface ScoreRow {
+  round: number | null; // null = initial seed message
+  winnerId: string | null;
+  winnerName: string;
+  winnerScore: number; // total wins for winner at this round
+  messagePreview: string;
+  verdict: string;
+  isInProgress: boolean;
+}
+
+function truncate(s: string, n: number): string {
+  if (s.length <= n) return s;
+  return s.slice(0, n - 1) + "…";
+}
+
+function getMessageText(m: RoomMessage): string {
+  return (m.verbal_response ?? m.content ?? m.silence_reason ?? "").replace(/\n+/g, " ");
+}
+
+export function MAPScoreOverlay(props: MAPScoreOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
+  let scrollRef: ScrollBoxRenderable | null = null;
+
+  const personaMap = createMemo(() => {
+    const m = new Map<string, string>();
+    for (const p of props.personas) m.set(p.id, p.display_name);
+    return m;
+  });
+
+  // Active path: walk parent_id chain from active_node_id to root, then reverse.
+  // We can't use getRoomActivePath from state-manager here (TUI component), so we derive it.
+  const activePath = createMemo<RoomMessage[]>(() => {
+    const msgById = new Map<string, RoomMessage>();
+    for (const m of props.messages) msgById.set(m.id, m);
+
+    const chain: RoomMessage[] = [];
+    let cur = msgById.get(props.activeNodeId);
+    while (cur) {
+      chain.push(cur);
+      cur = cur.parent_id ? msgById.get(cur.parent_id) : undefined;
+    }
+    return chain.reverse();
+  });
+
+  const scoreRows = createMemo<ScoreRow[]>(() => {
+    const path = activePath();
+    const pMap = personaMap();
+    const judgeId = props.judgePersonaId;
+
+    if (path.length === 0) return [];
+
+    const msgById = new Map<string, RoomMessage>();
+    for (const m of props.messages) msgById.set(m.id, m);
+
+    // Verdicts are siblings of winners — same parent_id as the winner.
+    // They are NOT on the active path, so index all messages by parent_id.
+    const verdictByParentId = new Map<string, RoomMessage>();
+    for (const m of props.messages) {
+      if (m.persona_id === judgeId && m.silence_reason && m.parent_id) {
+        verdictByParentId.set(m.parent_id, m);
+      }
+    }
+
+    const winCounts = new Map<string, number>();
+    const rows: ScoreRow[] = [];
+    let round = 0;
+
+    const seed = path[0];
+    if (!seed) return rows;
+
+    rows.push({
+      round: null,
+      winnerId: null,
+      winnerName: "—",
+      winnerScore: 0,
+      messagePreview: truncate(getMessageText(seed), 50),
+      verdict: "(initial)",
+      isInProgress: false,
+    });
+
+    // Active path: human → winner-1 → winner-2 → ...
+    // Each non-judge persona message on the path is a round winner.
+    for (const msg of path) {
+      if (msg.role !== "persona" || msg.persona_id === judgeId) continue;
+
+      round++;
+      const winnerId = msg.persona_id ?? "";
+      const prev = winCounts.get(winnerId) ?? 0;
+      const newCount = prev + 1;
+      winCounts.set(winnerId, newCount);
+      const winnerName = pMap.get(winnerId) ?? winnerId.slice(0, 8);
+      const verdictMsg = msg.parent_id ? verdictByParentId.get(msg.parent_id) : undefined;
+      const verdict = verdictMsg ? truncate(verdictMsg.silence_reason ?? "", 50) : "";
+
+      rows.push({
+        round,
+        winnerId,
+        winnerName: `${winnerName} (${newCount})`,
+        winnerScore: newCount,
+        messagePreview: truncate(getMessageText(msg), 50),
+        verdict,
+        isInProgress: false,
+      });
+    }
+
+    return rows;
+  });
+
+  const scoreSummary = createMemo<string>(() => {
+    const path = activePath();
+    const pMap = personaMap();
+    const judgeId = props.judgePersonaId;
+
+    const counts = new Map<string, number>();
+    let humanWins = 0;
+
+    for (const m of path) {
+      if (m.role === "persona" && m.persona_id !== judgeId) {
+        const id = m.persona_id ?? "";
+        counts.set(id, (counts.get(id) ?? 0) + 1);
+      }
+    }
+
+    const completedRounds = scoreRows().filter((r) => !r.isInProgress && r.round !== null).length;
+    if (completedRounds === 0) return "No rounds completed yet.";
+
+    const parts: string[] = [];
+    const sorted = [...counts.entries()].sort((a, b) => b[1] - a[1]);
+    for (const [id, cnt] of sorted) {
+      const name = pMap.get(id) ?? id.slice(0, 8);
+      parts.push(`${name} ${cnt}`);
+    }
+    parts.push(`${props.humanName} ${humanWins}`);
+
+    return "Score: " + parts.join(" — ");
+  });
+
+  useKeyboard((event) => {
+    event.preventDefault();
+    const key = event.name;
+
+    if (key === "q" || key === "escape") {
+      props.onDismiss();
+      return;
+    }
+
+    if (key === "up" || key === "k") {
+      scrollRef?.scrollBy(-1);
+      return;
+    }
+
+    if (key === "down" || key === "j") {
+      scrollRef?.scrollBy(1);
+      return;
+    }
+
+    if (key === "pageup") {
+      if (scrollRef) {
+        scrollRef.scrollBy(-Math.max(1, Math.floor(scrollRef.height / 2)));
+      }
+      return;
+    }
+
+    if (key === "pagedown") {
+      if (scrollRef) {
+        scrollRef.scrollBy(Math.max(1, Math.floor(scrollRef.height / 2)));
+      }
+      return;
+    }
+  });
+
+  const COL_ROUND = 6;
+  const COL_WINNER = 16;
+  const COL_MSG = 36;
+  const COL_VERDICT = 36;
+  const SEP = " │ ";
+
+  const headerLine = createMemo(() => {
+    return (
+      "Round".padEnd(COL_ROUND) +
+      SEP +
+      "Winner".padEnd(COL_WINNER) +
+      SEP +
+      "Message".padEnd(COL_MSG) +
+      SEP +
+      "Verdict"
+    );
+  });
+
+  const dividerLine = createMemo(() => {
+    return (
+      "─".repeat(COL_ROUND) +
+      "─┼─" +
+      "─".repeat(COL_WINNER) +
+      "─┼─" +
+      "─".repeat(COL_MSG) +
+      "─┼─" +
+      "─".repeat(COL_VERDICT)
+    );
+  });
+
+  function formatRow(row: ScoreRow): string {
+    const roundStr =
+      row.round === null ? "  —   " : String(row.round).padStart(3).padEnd(COL_ROUND);
+    const winner = row.winnerName.padEnd(COL_WINNER).slice(0, COL_WINNER);
+    const msg = row.messagePreview.padEnd(COL_MSG).slice(0, COL_MSG);
+    const verdict = row.verdict.padEnd(COL_VERDICT).slice(0, COL_VERDICT);
+    return roundStr + SEP + winner + SEP + msg + SEP + verdict;
+  }
+
+  function rowFg(row: ScoreRow): string {
+    if (row.isInProgress) return "#6272a4";
+    if (row.round === null) return "#586e75";
+    return "#93a1a1";
+  }
+
+  const roomTitle = createMemo(
+    () => `MAP Scoreboard — "${props.roomName ?? props.roomId}"`
+  );
+
+  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">{roomTitle()}</text>
+        </box>
+
+        <box paddingLeft={1} paddingRight={1} marginTop={1} height={1}>
+          <text fg="#6272a4">{headerLine()}</text>
+        </box>
+        <box paddingLeft={1} paddingRight={1} height={1}>
+          <text fg="#44475a">{dividerLine()}</text>
+        </box>
+
+        <scrollbox
+          flexGrow={1}
+          ref={(el: ScrollBoxRenderable) => { scrollRef = el; }}
+        >
+          <For each={scoreRows()}>
+            {(row) => (
+              <box
+                visible={true}
+                paddingLeft={1}
+              >
+                <text fg={rowFg(row)}>{formatRow(row)}</text>
+              </box>
+            )}
+          </For>
+        </scrollbox>
+
+        <box paddingLeft={1} paddingRight={1} height={1}>
+          <text fg="#586e75">{"─".repeat(COL_ROUND + COL_WINNER + COL_MSG + COL_VERDICT + 9)}</text>
+        </box>
+        <box paddingLeft={1} paddingRight={1} height={1}>
+          <text fg="#b58900">{scoreSummary()}</text>
+        </box>
+        <box paddingLeft={1} paddingRight={1} height={1} marginBottom={1}>
+          <text fg="#586e75">{"[q] close  [j/k] scroll  [PgUp/PgDn] page"}</text>
+        </box>
+      </box>
+    </box>
+  );
+}

package/tui/src/components/MessageList.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createMemo, createSignal, createEffect, on } from "solid-js";
+import { For, Show, createMemo, createSignal, createEffect, on, onMount } from "solid-js";
 import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
 import { useEi } from "../context/ei.js";
 import { useKeyboardNav } from "../context/keyboard.js";
@@ -40,13 +40,24 @@ export function MessageList() {
   const myId = ++instanceId;
   logger.info(`MessageList instance ${myId} MOUNTED`);
   
-  const { messages, activePersonaId, personas, activeContextBoundary, getQuotes, quotesVersion } = useEi();
+  const { messages, activePersonaId, personas, activeContextBoundary, getQuotes, quotesVersion, getHuman } = useEi();
   const { focusedPanel, registerMessageScroll } = useKeyboardNav();
 
   const isFocused = () => focusedPanel() === "messages";
 
+  const [humanDisplayName, setHumanDisplayName] = createSignal("Human");
   const [allQuotes, setAllQuotes] = createSignal<Quote[]>([]);
 
+  onMount(() => {
+    void getHuman().then(human => {
+      const name =
+        human.settings?.name_display ||
+        human.facts?.find(f => f.name === "Nickname/Preferred Name")?.description ||
+        "Human";
+      setHumanDisplayName(name);
+    });
+  });
+
   createEffect(on(() => [messages(), quotesVersion()], () => {
     void getQuotes().then(setAllQuotes);
   }));
@@ -112,7 +123,7 @@ export function MessageList() {
                 const persona = personas().find(p => p.id === activePersonaId());
                 return persona?.display_name ?? "Ei";
               };
-              const speaker = message.role === "human" ? "Human" : getDisplayName();
+              const speaker = message.role === "human" ? humanDisplayName() : getDisplayName();
               const speakerColor = message.role === "human" ? "#2aa198" : "#b58900";
               
               const header = () => `${speaker} (${formatTime(message.timestamp)}) [✂️  ${message._quoteIndex}]:`;