ei-tui 0.4.3 → 0.5.1

package/tui/src/components/PersonaListOverlay.tsx

@@ -1,7 +1,8 @@
 import { useKeyboard } from "@opentui/solid";
-import { For, createSignal, createMemo } from "solid-js";
+import { For, createSignal, createMemo, onMount, onCleanup } from "solid-js";
 import type { KeyEvent } from "@opentui/core";
 import type { PersonaSummary } from "../../../src/core/types.js";
+import { useKeyboardNav } from "../context/keyboard.js";
 
 interface PersonaListOverlayProps {
   personas: PersonaSummary[];
@@ -12,10 +13,14 @@ interface PersonaListOverlayProps {
 }
 
 export function PersonaListOverlay(props: PersonaListOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
   const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [filterText, setFilterText] = createSignal("");
   const [filterMode, setFilterMode] = createSignal(false);
 
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
   const filteredPersonas = createMemo(() => {
     const filter = filterText().toLowerCase();
     if (!filter) return props.personas;

package/tui/src/components/PromptInput.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from "solid-js";
+import { createEffect, createMemo, createSignal } from "solid-js";
 import { getAllCommands } from "../commands/registry";
 import type { TextareaRenderable, KeyBinding } from "@opentui/core";
 import { useEi } from "../context/ei";
@@ -26,10 +26,16 @@ import { dlqCommand } from "../commands/dlq";
 import { toolsCommand } from "../commands/tools";
 import { authCommand } from '../commands/auth';
 import { dedupeCommand } from "../commands/dedupe";
+import { roomCommand } from "../commands/room.js";
+import { activateCommand } from "../commands/activate.js";
+import { silenceCommand } from "../commands/silence.js";
+import { captureCommand } from "../commands/capture.js";
+import { openCYPEditor } from "../util/cyp-editor.js";
 import { useOverlay } from "../context/overlay";
 import { CommandSuggest } from "./CommandSuggest";
 import { useKeyboard } from "@opentui/solid";
 import type { KeyEvent } from "@opentui/core";
+import { RoomMode } from "../../../src/core/types/enums.js";
 
 const TEXTAREA_KEYBINDINGS: KeyBinding[] = [
   { name: "return", action: "submit" },
@@ -39,7 +45,23 @@ const TEXTAREA_KEYBINDINGS: KeyBinding[] = [
 
 export function PromptInput() {
   const ei = useEi();
-  const { sendMessage, activePersonaId, stopProcessor, showNotification } = ei;
+  const {
+    sendMessage,
+    activePersonaId,
+    stopProcessor,
+    showNotification,
+    activeRoomId,
+    getRoom,
+    roomMessages,
+    roomActivePath,
+    personas,
+    sendFfaMessage,
+    submitHumanRoomMessage,
+    recallHumanRoomMessage,
+    activateRoom,
+    selectCYPBranch,
+    humanRoomMessagePending,
+  } = ei;
   const { registerTextarea, registerEditorHandler, exitApp, renderer, resetHistoryIndex } = useKeyboardNav();
   const { showOverlay, hideOverlay, overlayRenderer } = useOverlay();
 
@@ -49,12 +71,9 @@ export function PromptInput() {
   registerCommand(quotesCommand);
   registerCommand(editorCommand);
   registerCommand(personaCommand);
+  registerCommand(roomCommand);
   registerCommand(detailsCommand);
-  registerCommand(archiveCommand);
-  registerCommand(unarchiveCommand);
   registerCommand(newCommand);
-  registerCommand(pauseCommand);
-  registerCommand(resumeCommand);
   registerCommand(modelCommand);
   registerCommand(settingsCommand);
   registerCommand(providerCommand);
@@ -64,14 +83,36 @@ export function PromptInput() {
   registerCommand(queueCommand);
   registerCommand(dlqCommand);
   registerCommand(toolsCommand);
-  registerCommand(authCommand);
   registerCommand(dedupeCommand);
+  registerCommand(activateCommand);
+  registerCommand(silenceCommand);
+  registerCommand(captureCommand);
+  registerCommand(authCommand);
+  registerCommand(pauseCommand);
+  registerCommand(resumeCommand);
+  registerCommand(archiveCommand);
+  registerCommand(unarchiveCommand);
 
   let textareaRef: TextareaRenderable | undefined;
 
   const [inputText, setInputText] = createSignal("");
   const [suggestIndex, setSuggestIndex] = createSignal(0);
 
+  const allPersonasResponded = createMemo(() => {
+    const roomId = activeRoomId();
+    if (!roomId) return false;
+    const room = getRoom(roomId);
+    if (!room?.active_node_id) return false;
+    const respondedIds = new Set(
+      roomMessages()
+        .filter(m => m.parent_id === room.active_node_id && m.role === "persona" && m.persona_id)
+        .map(m => m.persona_id!)
+    );
+    const judgeId = room.judge_persona_id;
+    const nonJudgeIds = room.persona_ids.filter(id => id !== judgeId);
+    return nonJudgeIds.every(id => respondedIds.has(id));
+  });
+
   const suggestMatches = () => {
     const raw = inputText().trim();
     if (!raw.startsWith("/")) return [];
@@ -95,7 +136,46 @@ export function PromptInput() {
     resetHistoryIndex();
   });
 
+  createEffect(() => {
+    if (activeRoomId() && !humanRoomMessagePending()) {
+      const room = getRoom(activeRoomId()!);
+      if (room?.mode !== RoomMode.FreeForAll && allPersonasResponded() && !humanRoomMessagePending()) {
+        showNotification("Use /silence to pass", "info");
+      }
+    }
+  });
+
   useKeyboard((event: KeyEvent) => {
+    if (event.name === "up" && activeRoomId() && humanRoomMessagePending()) {
+      const room = getRoom(activeRoomId()!);
+      if (room?.mode !== RoomMode.FreeForAll) {
+        // Lock check: if any child of active_node has children, the node is explored — don't allow recall
+        const activeNodeId = room?.active_node_id;
+        const allMessages = roomMessages();
+        const childrenOfActiveNode = allMessages.filter(m => m.parent_id === activeNodeId);
+        const isLocked = childrenOfActiveNode.some(child =>
+          allMessages.some(m => m.parent_id === child.id)
+        );
+        if (isLocked) {
+          showNotification("Cannot recall — this path has already been explored", "warn");
+          event.preventDefault();
+          return;
+        }
+        const pendingMsg = allMessages.find(
+          m => m.parent_id === room?.active_node_id && m.role === "human"
+        );
+        const recalled = recallHumanRoomMessage();
+        if (recalled) {
+          const content = pendingMsg?.verbal_response ?? pendingMsg?.silence_reason ?? "";
+          textareaRef?.setText(content);
+          setInputText(content);
+          textareaRef?.gotoBufferEnd();
+        }
+        event.preventDefault();
+        return;
+      }
+    }
+
     if (!suggestVisible()) return;
 
     if (event.name === "up") {
@@ -144,7 +224,32 @@ export function PromptInput() {
   });
 
   const handleSubmit = async () => {
-    const text = textareaRef?.plainText?.trim();
+    const text = textareaRef?.plainText?.trim() ?? "";
+
+    if (activeRoomId()) {
+      const room = getRoom(activeRoomId()!);
+
+      if (room?.mode !== RoomMode.FreeForAll && !text) {
+        if (humanRoomMessagePending() && allPersonasResponded()) {
+          if (room?.mode === RoomMode.ChooseYourPath && room.active_node_id) {
+            await openCYPEditor({
+              roomId: activeRoomId()!,
+              activeNodeId: room.active_node_id,
+              messages: roomMessages(),
+              activePath: roomActivePath(),
+              personas: personas(),
+              selectBranch: selectCYPBranch,
+              showNotification,
+              renderer,
+            });
+          } else {
+            await activateRoom();
+          }
+        }
+        return;
+      }
+    }
+
     if (!text) return;
 
     if (text.startsWith("/")) {
@@ -181,6 +286,33 @@ export function PromptInput() {
       return;
     }
 
+    if (activeRoomId()) {
+      const room = getRoom(activeRoomId()!);
+      if (room?.mode === RoomMode.FreeForAll) {
+        textareaRef?.clear();
+        setInputText("");
+        await sendFfaMessage(text, undefined);
+        return;
+      }
+
+      if (!humanRoomMessagePending()) {
+        const msgId = submitHumanRoomMessage(text, undefined);
+        if (msgId !== null) {
+          textareaRef?.clear();
+          setInputText("");
+        }
+        return;
+      }
+
+      if (humanRoomMessagePending() && allPersonasResponded()) {
+        await activateRoom();
+        return;
+      }
+
+      showNotification("Waiting for participants to respond...", "info");
+      return;
+    }
+
     textareaRef?.clear();
     setInputText("");
     resetHistoryIndex();
@@ -196,6 +328,7 @@ export function PromptInput() {
   registerEditorHandler(handleEditor);
 
   const getPlaceholder = () => {
+    if (activeRoomId() && humanRoomMessagePending()) return "Response Submitted - Press [Up] to recall";
     if (!activePersonaId()) return "Select a persona...";
     return "Type your message... (Enter to send, Ctrl+E for editor)";
   };

package/tui/src/components/ProviderListOverlay.tsx

@@ -1,6 +1,7 @@
 import { useKeyboard } from "@opentui/solid";
-import { For, createSignal, createMemo } from "solid-js";
+import { For, createSignal, createMemo, onMount, onCleanup } from "solid-js";
 import type { KeyEvent } from "@opentui/core";
+import { useKeyboardNav } from "../context/keyboard.js";
 
 export interface ProviderListItem {
   id: string;
@@ -20,6 +21,9 @@ interface ProviderListOverlayProps {
 }
 
 export function ProviderListOverlay(props: ProviderListOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
   const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [filterText, setFilterText] = createSignal("");
   const [filterMode, setFilterMode] = createSignal(false);

package/tui/src/components/QuotesOverlay.tsx

@@ -1,7 +1,8 @@
 import { useKeyboard } from "@opentui/solid";
-import { For, createSignal, createMemo } from "solid-js";
+import { For, createSignal, createMemo, onMount, onCleanup } from "solid-js";
 import type { KeyEvent } from "@opentui/core";
 import type { Quote } from "../../../src/core/types.js";
+import { useKeyboardNav } from "../context/keyboard.js";
 
 interface QuotesOverlayProps {
   quotes: Quote[];
@@ -12,6 +13,9 @@ interface QuotesOverlayProps {
 }
 
 export function QuotesOverlay(props: QuotesOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
   const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [confirmDelete, setConfirmDelete] = createSignal(false);
 

package/tui/src/components/RoomMessageList.tsx

@@ -0,0 +1,179 @@
+import { For, Show, createMemo, createSignal, createEffect, on, onCleanup } from "solid-js";
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { useEi } from "../context/ei.js";
+import { useKeyboardNav } from "../context/keyboard.js";
+import { solarizedDarkSyntax } from "../util/syntax.js";
+import type { RoomMessage, Quote } from "../../../src/core/types.js";
+import { RoomMode } from "../../../src/core/types/enums.js";
+import { insertQuoteMarkers } from "../util/quote-utils.js";
+
+interface RoomMessageWithQuotes extends RoomMessage {
+  _quotes: Quote[];
+}
+
+function formatTime(timestamp: string): string {
+  const date = new Date(timestamp);
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  return `${hours}:${minutes}`;
+}
+
+export function RoomMessageList() {
+  const { roomMessages, roomActivePath, personas, activeRoomId, getRoom, getQuotes, quotesVersion } = useEi();
+  const { registerMessageScroll } = useKeyboardNav();
+
+  const personaNameMap = createMemo(() => {
+    const map = new Map<string, string>();
+    for (const p of personas()) {
+      map.set(p.id, p.display_name);
+    }
+    return map;
+  });
+
+  const messageIndices = createMemo(() => {
+    const all = roomMessages();
+    const indexMap = new Map<string, number>();
+    all.forEach((m, i) => indexMap.set(m.id, i + 1));
+    return indexMap;
+  });
+
+  const siblingCounts = createMemo(() => {
+    const all = roomMessages();
+    const countMap = new Map<string, number>();
+    for (const msg of all) {
+      const siblings = all.filter(m => m.parent_id === msg.parent_id && m.id !== msg.id && m.parent_id !== null);
+      countMap.set(msg.id, siblings.length);
+    }
+    return countMap;
+  });
+
+  const activeRoom = createMemo(() => {
+    const id = activeRoomId();
+    return id ? getRoom(id) : null;
+  });
+
+  const displayMessages = createMemo(() => {
+    if (activeRoom()?.mode === RoomMode.ChooseYourPath) {
+      return roomActivePath();
+    }
+    if (activeRoom()?.mode === RoomMode.MessagesAgainstPersona) {
+      const activeNodeId = activeRoom()?.active_node_id;
+      if (!activeNodeId) return roomMessages();
+      return roomMessages().filter(m => m.parent_id !== activeNodeId);
+    }
+    return roomMessages();
+  });
+
+  const [allQuotes, setAllQuotes] = createSignal<Quote[]>([]);
+
+  createEffect(on(() => [roomMessages(), quotesVersion()], () => {
+    void getQuotes().then(setAllQuotes);
+  }));
+
+  const quotesByMessage = createMemo(() => {
+    const map = new Map<string, Quote[]>();
+    for (const quote of allQuotes()) {
+      if (quote.message_id) {
+        const existing = map.get(quote.message_id) ?? [];
+        existing.push(quote);
+        map.set(quote.message_id, existing);
+      }
+    }
+    return map;
+  });
+
+  const displayMessagesWithQuotes = createMemo<RoomMessageWithQuotes[]>(() => {
+    const qMap = quotesByMessage();
+    return displayMessages().map(msg => ({
+      ...msg,
+      _quotes: qMap.get(msg.id) ?? [],
+    }));
+  });
+
+  const getSpeakerName = (msg: RoomMessage): string => {
+    if (msg.role === "human") return "Human";
+    if (msg.persona_id) return personaNameMap().get(msg.persona_id) ?? msg.persona_id;
+    return "Persona";
+  };
+
+  const getSpeakerColor = (msg: RoomMessage): string => {
+    if (msg.role === "human") return "#268bd2";
+    return "#b58900";
+  };
+
+  const handleScrollboxRef = (scrollbox: ScrollBoxRenderable) => {
+    registerMessageScroll(scrollbox);
+  };
+
+  onCleanup(() => {
+    registerMessageScroll(null as unknown as ScrollBoxRenderable);
+  });
+
+  return (
+    <box flexGrow={1}>
+      <Show
+        when={displayMessages().length > 0}
+        fallback={
+          <box flexGrow={1} padding={1} backgroundColor="#0f1419" justifyContent="center" alignItems="center">
+            <text fg="#586e75" content="No messages yet." />
+          </box>
+        }
+      >
+        <scrollbox
+          ref={handleScrollboxRef}
+          flexGrow={1}
+          padding={1}
+          backgroundColor="#0f1419"
+          stickyScroll={true}
+          stickyStart="bottom"
+        >
+          <For each={displayMessagesWithQuotes()}>
+            {(msg) => {
+              const speakerName = getSpeakerName(msg);
+              const speakerColor = getSpeakerColor(msg);
+              const idx = messageIndices().get(msg.id) ?? "?";
+              const siblingCount = siblingCounts().get(msg.id) ?? 0;
+              const branchIndicator = (siblingCount > 0 && activeRoom()?.mode === RoomMode.ChooseYourPath)
+                ? ` ⑂${siblingCount}`
+                : "";
+              const header = `${speakerName} (${formatTime(msg.timestamp)}) [${idx}]${branchIndicator}:`;
+              const isSilence = msg.silence_reason !== undefined && !msg.verbal_response;
+              const isJudge = activeRoom()?.judge_persona_id !== undefined
+                && msg.persona_id === activeRoom()?.judge_persona_id;
+              const silenceText = isSilence
+                ? isJudge
+                  ? `[${speakerName}'s verdict: ${msg.silence_reason ?? ""}]`
+                  : `[${speakerName} chose not to respond: ${msg.silence_reason ?? ""}]`
+                : "";
+              const contentParts: string[] = [];
+              if (msg.action_response) contentParts.push(`_${msg.action_response}_`);
+              if (msg.verbal_response) contentParts.push(msg.verbal_response);
+              const msgQuotes = msg._quotes;
+              const normalContent = insertQuoteMarkers(contentParts.join("\n\n"), msgQuotes);
+
+              return (
+                <box flexDirection="column" marginBottom={1}>
+                  <text
+                    fg={speakerColor}
+                    attributes={TextAttributes.BOLD}
+                    content={header}
+                  />
+                  <box marginLeft={2} visible={isSilence}>
+                    <text fg="#586e75" content={silenceText} />
+                  </box>
+                  <box marginLeft={2} visible={!isSilence}>
+                    <markdown
+                      content={normalContent}
+                      syntaxStyle={solarizedDarkSyntax}
+                      conceal={true}
+                    />
+                  </box>
+                </box>
+              );
+            }}
+          </For>
+        </scrollbox>
+      </Show>
+    </box>
+  );
+}

package/tui/src/components/Sidebar.tsx

@@ -1,18 +1,37 @@
 import { For, createSignal, createEffect, createMemo, onCleanup } from "solid-js";
 import { useEi } from "../context/ei";
 import { useKeyboardNav } from "../context/keyboard";
+import { RoomMode } from "../../../src/core/types/enums.js";
+import type { RoomSummary } from "../../../src/core/types.js";
+
+const modeBadge = (mode: RoomMode): string => {
+  switch (mode) {
+    case RoomMode.ChooseYourPath: return "[CYP]";
+    case RoomMode.FreeForAll: return "[FFA]";
+    case RoomMode.MessagesAgainstPersona: return "[MAP]";
+    default: return "";
+  }
+};
 
 export function Sidebar() {
-  const { personas, activePersonaId } = useEi();
+  const { personas, activePersonaId, rooms, activeRoomId } = useEi();
   const { focusedPanel } = useKeyboardNav();
 
   const isFocused = () => focusedPanel() === "sidebar";
+  const isRoomMode = () => activeRoomId() !== null;
 
   // Memoize visible (non-archived) personas for proper reactivity
   const visiblePersonas = createMemo(() => 
     personas().filter(p => !p.is_archived)
   );
 
+  // Memoize visible (non-archived) rooms sorted by last_activity desc
+  const visibleRooms = createMemo(() =>
+    rooms()
+      .filter((r: RoomSummary) => !r.is_archived)
+      .sort((a: RoomSummary, b: RoomSummary) => b.last_activity.localeCompare(a.last_activity))
+  );
+
   const [highlightedPersona, setHighlightedPersona] = createSignal<string | null>(null);
   let highlightTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -45,7 +64,7 @@ export function Sidebar() {
     >
       <box flexDirection="column">
         <text fg={isFocused() ? "#268bd2" : "#93a1a1"} marginBottom={1}>
-          {`Personas ${isFocused() ? "[*]" : ""}`}
+          {isRoomMode() ? `/p Personas | * Rooms` : `* Personas | /r Rooms`}
         </text>
         
         <scrollbox height="100%">
@@ -71,6 +90,7 @@ export function Sidebar() {
 
               return (
                 <box
+                  visible={!isRoomMode()}
                   flexDirection="column"
                   backgroundColor={
                     isActive() && highlightedPersona() === persona.id 
@@ -92,6 +112,38 @@ export function Sidebar() {
               );
             }}
           </For>
+          <For each={visibleRooms()}>
+            {(room) => {
+              const isActive = () => activeRoomId() === room.id;
+
+              const getLabel = () => {
+                const prefix = isActive() ? "* " : "  ";
+                const name = room.display_name;
+                const badge = modeBadge(room.mode);
+                const unread = room.unread_count > 0 ? ` (${room.unread_count} new)` : "";
+                return `${prefix}${name} ${badge}${unread}`;
+              };
+
+              const textColor = () => {
+                if (isActive()) return "#eee8d5";
+                return "#839496";
+              };
+
+              return (
+                <box
+                  visible={isRoomMode()}
+                  flexDirection="column"
+                  backgroundColor={isActive() ? "#2d3748" : "transparent"}
+                  paddingX={1}
+                  marginBottom={1}
+                >
+                  <text fg={textColor()}>
+                    {getLabel()}
+                  </text>
+                </box>
+              );
+            }}
+          </For>
         </scrollbox>
       </box>
     </box>

package/tui/src/components/StatusBar.tsx

@@ -1,9 +1,21 @@
-import { Show } from "solid-js";
+import { Show, createMemo } from "solid-js";
 import { useEi } from "../context/ei";
 import { useKeyboardNav } from "../context/keyboard";
+import { RoomMode } from "../../../src/core/types/enums.js";
 
 export function StatusBar() {
-  const { activePersonaId, personas, queueStatus, notification } = useEi();
+  const {
+    activePersonaId,
+    personas,
+    queueStatus,
+    notification,
+    activeRoomId,
+    roomMessages,
+    getRoom,
+    rooms,
+    humanRoomMessagePending,
+    isRoomProcessing,
+  } = useEi();
   const { focusedPanel, sidebarVisible } = useKeyboardNav();
 
   const getActiveDisplayName = () => {
@@ -44,6 +56,73 @@ export function StatusBar() {
     return "#2aa198";
   };
 
+  const respondedPersonaIds = createMemo(() => {
+    const roomId = activeRoomId();
+    if (!roomId) return new Set<string>();
+    const roomSummary = rooms().find(r => r.id === roomId);
+    if (!roomSummary?.active_node_id) return new Set<string>();
+    const msgs = roomMessages().filter(
+      m => m.parent_id === roomSummary.active_node_id && m.role === "persona" && m.persona_id
+    );
+    return new Set(msgs.map(m => m.persona_id!));
+  });
+
+  const allPersonasResponded = createMemo(() => {
+    const roomId = activeRoomId();
+    if (!roomId) return false;
+    const room = getRoom(roomId);
+    if (!room) return false;
+    const judgeId = room.judge_persona_id;
+    const nonJudgeIds = room.persona_ids.filter(id => id !== judgeId);
+    return nonJudgeIds.every(id => respondedPersonaIds().has(id));
+  });
+
+  const pendingPersonaNames = createMemo(() => {
+    const roomId = activeRoomId();
+    if (!roomId) return [];
+    const room = getRoom(roomId);
+    if (!room) return [];
+    const judgeId = room.judge_persona_id;
+    const allPersonas = personas();
+    return room.persona_ids
+      .filter(id => id !== judgeId && !respondedPersonaIds().has(id))
+      .map(id => allPersonas.find(p => p.id === id)?.display_name ?? id);
+  });
+
+  const getRoomWaitingText = () => {
+    const names: string[] = [];
+    if (!humanRoomMessagePending()) {
+      names.push("You");
+    }
+    names.push(...pendingPersonaNames());
+    return "Waiting for " + names.join(", ") + "...";
+  };
+
+  const activeRoom = () => {
+    const roomId = activeRoomId();
+    if (!roomId) return null;
+    return getRoom(roomId);
+  };
+
+  const centerIndicator = createMemo(() => {
+    const roomId = activeRoomId();
+    if (roomId) {
+      const room = getRoom(roomId);
+      if (room?.mode !== RoomMode.FreeForAll) {
+        if (isRoomProcessing()) {
+          return { text: "[Waiting]", color: "#586e75" };
+        }
+        if (humanRoomMessagePending() && allPersonasResponded()) {
+          return { text: "[Activate!]", color: "#b58900" };
+        }
+        if (humanRoomMessagePending()) {
+          return { text: "[Waiting]", color: "#586e75" };
+        }
+      }
+    }
+    return { text: `[${getFocusIndicator()}]`, color: "#586e75" };
+  });
+
   return (
     <box
       height={1}
@@ -54,11 +133,23 @@ export function StatusBar() {
     >
       <box flexGrow={1}>
         <Show when={notification()} fallback={
-          <text fg="#586e75">
-            <Show when={getActiveDisplayName()} fallback="No persona selected">
-              {getActiveDisplayName()}
+          <Show when={activeRoomId()} fallback={
+            <text fg="#586e75">
+              <Show when={getActiveDisplayName()} fallback="No persona selected">
+                {getActiveDisplayName()}
+              </Show>
+            </text>
+          }>
+            <Show when={allPersonasResponded() && humanRoomMessagePending()} fallback={
+              <text fg="#586e75">
+                {getRoomWaitingText()}
+              </text>
+            }>
+              <text fg="#586e75">
+                {activeRoom()?.display_name ?? ""}
+              </text>
             </Show>
-          </text>
+          </Show>
         }>
           <text fg={getNotificationColor()}>
             {notification()?.message}
@@ -66,8 +157,8 @@ export function StatusBar() {
         </Show>
       </box>
 
-      <text fg="#586e75" marginRight={2}>
-        [{getFocusIndicator()}]
+      <text fg={centerIndicator().color} marginRight={2}>
+        {centerIndicator().text}
       </text>
 
       <Show when={!sidebarVisible()}>