ei-tui 0.4.3 → 0.5.1

package/tui/src/commands/room.tsx

@@ -0,0 +1,261 @@
+import { For, createSignal, createMemo, onMount, onCleanup } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import type { KeyEvent } from "@opentui/core";
+import type { Command } from "./registry";
+import { spawnEditor } from "../util/editor.js";
+import { RoomMode } from "../../../src/core/types/enums.js";
+import type { RoomSummary } from "../../../src/core/types.js";
+import { useKeyboardNav } from "../context/keyboard.js";
+import { buildRoomYAMLTemplate, parseRoomYAML } from "../util/room-parser.js";
+
+function modeBadge(mode: RoomMode): string {
+  switch (mode) {
+    case RoomMode.ChooseYourPath: return "[CYP]";
+    case RoomMode.FreeForAll: return "[FFA]";
+    case RoomMode.MessagesAgainstPersona: return "[MAP]";
+    default: return "[???]";
+  }
+}
+
+interface RoomListOverlayProps {
+  rooms: RoomSummary[];
+  activeRoomId: string | null;
+  onSelect: (roomId: string) => void;
+  onDismiss: () => void;
+}
+
+function RoomListOverlay(props: RoomListOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [filterText, setFilterText] = createSignal("");
+  const [filterMode, setFilterMode] = createSignal(false);
+
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
+  const filteredRooms = createMemo(() => {
+    const filter = filterText().toLowerCase();
+    if (!filter) return props.rooms;
+    return props.rooms.filter((r) =>
+      r.display_name.toLowerCase().includes(filter)
+    );
+  });
+
+  createMemo(() => {
+    const list = filteredRooms();
+    if (selectedIndex() >= list.length) {
+      setSelectedIndex(Math.max(0, list.length - 1));
+    }
+  });
+
+  useKeyboard((event: KeyEvent) => {
+    const key = event.name;
+    const listLength = filteredRooms().length;
+
+    if (filterMode()) {
+      if (key === "escape") {
+        event.preventDefault();
+        setFilterText("");
+        setFilterMode(false);
+        return;
+      }
+      if (key === "backspace") {
+        event.preventDefault();
+        setFilterText((prev) => prev.slice(0, -1));
+        return;
+      }
+      if (key === "return") {
+        event.preventDefault();
+        if (listLength > 0) {
+          const selected = filteredRooms()[selectedIndex()];
+          props.onSelect(selected.id);
+        }
+        return;
+      }
+      if (key.length === 1 && !event.ctrl && !event.meta) {
+        event.preventDefault();
+        setFilterText((prev) => prev + key);
+        return;
+      }
+    } else {
+      if (key === "j" || key === "down") {
+        event.preventDefault();
+        setSelectedIndex((prev) => Math.min(prev + 1, listLength - 1));
+        return;
+      }
+      if (key === "k" || key === "up") {
+        event.preventDefault();
+        setSelectedIndex((prev) => Math.max(prev - 1, 0));
+        return;
+      }
+      if (key === "return") {
+        event.preventDefault();
+        if (listLength > 0) {
+          const selected = filteredRooms()[selectedIndex()];
+          props.onSelect(selected.id);
+        }
+        return;
+      }
+      if (key === "escape") {
+        event.preventDefault();
+        props.onDismiss();
+        return;
+      }
+      if (key === "/") {
+        event.preventDefault();
+        setFilterMode(true);
+        return;
+      }
+    }
+  });
+
+  return (
+    <box
+      position="absolute"
+      width="100%"
+      height="100%"
+      left={0}
+      top={0}
+      backgroundColor="#000000"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={70}
+        height="80%"
+        backgroundColor="#1a1a2e"
+        borderStyle="single"
+        borderColor="#586e75"
+        padding={2}
+        flexDirection="column"
+      >
+        <text fg="#eee8d5" marginBottom={1}>
+          Select Room
+        </text>
+
+        <scrollbox height="100%">
+          <For each={filteredRooms()}>
+            {(room, index) => {
+              const isActive = () => props.activeRoomId === room.id;
+              const isSelected = () => selectedIndex() === index();
+              const label = () => {
+                const prefix = isActive() ? "> " : "  ";
+                const badge = modeBadge(room.mode);
+                const unread = room.unread_count > 0 ? ` (${room.unread_count})` : "";
+                return `${prefix}${badge} ${room.display_name}${unread}`;
+              };
+
+              return (
+                <box
+                  backgroundColor={
+                    isSelected()
+                      ? "#2d3748"
+                      : isActive()
+                      ? "#1f2937"
+                      : "transparent"
+                  }
+                  paddingLeft={1}
+                  paddingRight={1}
+                >
+                  <text
+                    fg={
+                      isSelected()
+                        ? "#eee8d5"
+                        : isActive()
+                        ? "#93a1a1"
+                        : "#839496"
+                    }
+                  >
+                    {label()}
+                  </text>
+                </box>
+              );
+            }}
+          </For>
+        </scrollbox>
+
+        <text> </text>
+
+        {filterMode() ? (
+          <text fg="#586e75">Filter: {filterText()}|</text>
+        ) : (
+          <text fg="#586e75">
+            j/k: navigate | Enter: select | Esc: cancel | /: filter
+          </text>
+        )}
+      </box>
+    </box>
+  );
+}
+
+export const roomCommand: Command = {
+  name: "room",
+  aliases: ["r"],
+  description: "List rooms, switch to a room, or create a new one",
+  usage: "/room | /room <name> | /room new",
+
+  async execute(args, ctx) {
+    const unarchived = ctx.ei.rooms().filter(r => !r.is_archived);
+
+    if (args.length === 0) {
+      if (unarchived.length === 0) {
+        ctx.showNotification("No rooms. Use /room new to create one.", "info");
+        return;
+      }
+      ctx.showOverlay((hideOverlay, _hideForEditor) => (
+        <RoomListOverlay
+          rooms={unarchived}
+          activeRoomId={ctx.ei.activeRoomId()}
+          onSelect={(roomId) => {
+            const room = unarchived.find(r => r.id === roomId);
+            ctx.ei.selectRoom(roomId);
+            hideOverlay();
+            ctx.showNotification(`Switched to ${room?.display_name ?? roomId}`, "info");
+          }}
+          onDismiss={hideOverlay}
+        />
+      ), ctx.renderer);
+      return;
+    }
+
+    if (args[0].toLowerCase() === "new") {
+      const personas = ctx.ei.personas();
+      const rawName = args.slice(1).join(" ").replace(/^["']|["']$/g, "");
+      const result = await spawnEditor({
+        initialContent: buildRoomYAMLTemplate(personas, rawName),
+        filename: "new-room.yaml",
+        renderer: ctx.renderer,
+      });
+
+      if (result.aborted) {
+        ctx.showNotification("Room creation cancelled", "info");
+        return;
+      }
+
+      if (!result.success || result.content === null) {
+        ctx.showNotification("No changes — room not created", "info");
+        return;
+      }
+
+      try {
+        const input = parseRoomYAML(result.content, personas);
+        await ctx.ei.createRoom(input);
+        ctx.showNotification(`Room "${input.display_name}" created`, "info");
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        ctx.showNotification(`Failed to create room: ${msg}`, "error");
+      }
+      return;
+    }
+
+    const name = args.join(" ");
+    const roomId = ctx.ei.resolveRoomName(name);
+    if (roomId) {
+      const room = unarchived.find(r => r.id === roomId);
+      ctx.ei.selectRoom(roomId);
+      ctx.showNotification(`Switched to ${room?.display_name ?? name}`, "info");
+    } else {
+      ctx.showNotification(`No room named "${name}". Use /room new to create one.`, "warn");
+    }
+  },
+};

package/tui/src/commands/silence.tsx

@@ -0,0 +1,29 @@
+import type { Command } from "./registry";
+import { RoomMode } from "../../../src/core/types/enums.js";
+
+export const silenceCommand: Command = {
+  name: "silence",
+  aliases: [],
+  description: "Pass your turn with optional reason",
+  usage: "/silence [reason]",
+
+  async execute(args, ctx) {
+    const rawReason = args.join(" ").replace(/^["']|["']$/g, "").trim();
+    const reason = rawReason || "passed";
+
+    const roomId = ctx.ei.activeRoomId();
+    if (roomId) {
+      const room = ctx.ei.getRoom(roomId);
+      if (room?.mode === RoomMode.FreeForAll) {
+        await ctx.ei.sendFfaMessage(null, reason);
+      } else {
+        ctx.ei.submitHumanRoomMessage(null, reason);
+      }
+      ctx.showNotification(`Silence recorded: "${reason}"`, "info");
+      return;
+    }
+
+    await ctx.ei.sendSilenceMessage(reason);
+    ctx.showNotification("Silence recorded", "info");
+  },
+};

package/tui/src/components/ArchivedItemsOverlay.tsx

@@ -0,0 +1,144 @@
+import { useKeyboard } from "@opentui/solid";
+import { For, createSignal, createMemo, onMount, onCleanup } from "solid-js";
+import type { KeyEvent } from "@opentui/core";
+import type { PersonaSummary, RoomSummary } from "../../../src/core/types.js";
+import { useKeyboardNav } from "../context/keyboard.js";
+
+export type ArchivedItem =
+  | { kind: "persona"; id: string; display_name: string }
+  | { kind: "room"; id: string; display_name: string; mode: RoomSummary["mode"] };
+
+interface ArchivedItemsOverlayProps {
+  personas: PersonaSummary[];
+  rooms: RoomSummary[];
+  onSelect: (item: ArchivedItem) => void | Promise<void>;
+  onDismiss: () => void;
+}
+
+function modeLabel(mode: RoomSummary["mode"]): string {
+  switch (mode) {
+    case "choose_your_path": return "CYP";
+    case "free_for_all": return "FFA";
+    case "messages_against_persona": return "MAP";
+    default: return mode;
+  }
+}
+
+export function ArchivedItemsOverlay(props: ArchivedItemsOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
+  const allItems = createMemo<ArchivedItem[]>(() => [
+    ...props.rooms.map(r => ({
+      kind: "room" as const,
+      id: r.id,
+      display_name: r.display_name,
+      mode: r.mode,
+    })),
+    ...props.personas.map(p => ({
+      kind: "persona" as const,
+      id: p.id,
+      display_name: p.display_name,
+    })),
+  ]);
+
+  createMemo(() => {
+    const list = allItems();
+    if (selectedIndex() >= list.length) {
+      setSelectedIndex(Math.max(0, list.length - 1));
+    }
+  });
+
+  useKeyboard((event: KeyEvent) => {
+    const key = event.name;
+    const listLength = allItems().length;
+
+    if (key === "j" || key === "down") {
+      event.preventDefault();
+      setSelectedIndex((prev) => Math.min(prev + 1, listLength - 1));
+      return;
+    }
+
+    if (key === "k" || key === "up") {
+      event.preventDefault();
+      setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      return;
+    }
+
+    if (key === "return") {
+      event.preventDefault();
+      if (listLength > 0) {
+        const selected = allItems()[selectedIndex()];
+        void props.onSelect(selected);
+      }
+      return;
+    }
+
+    if (key === "escape") {
+      event.preventDefault();
+      props.onDismiss();
+      return;
+    }
+  });
+
+  return (
+    <box
+      position="absolute"
+      width="100%"
+      height="100%"
+      left={0}
+      top={0}
+      backgroundColor="#000000"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={70}
+        height="80%"
+        backgroundColor="#1a1a2e"
+        borderStyle="single"
+        borderColor="#586e75"
+        padding={2}
+        flexDirection="column"
+      >
+        <text fg="#eee8d5" marginBottom={1}>
+          Archived Items (Enter to unarchive)
+        </text>
+
+        <scrollbox height="100%">
+          <For each={allItems()}>
+            {(item, index) => {
+              const isSelected = () => selectedIndex() === index();
+              const label = () => {
+                if (item.kind === "room") {
+                  return `[Room] ${item.display_name} (${modeLabel(item.mode)})`;
+                }
+                return `[Persona] ${item.display_name}`;
+              };
+              return (
+                <box
+                  backgroundColor={isSelected() ? "#2d3748" : "transparent"}
+                  paddingLeft={1}
+                  paddingRight={1}
+                >
+                  <text fg={isSelected() ? "#eee8d5" : "#839496"}>
+                    {label()}
+                  </text>
+                </box>
+              );
+            }}
+          </For>
+        </scrollbox>
+
+        <text> </text>
+
+        <text fg="#586e75">
+          j/k: navigate | Enter: unarchive | Esc: cancel
+        </text>
+      </box>
+    </box>
+  );
+}

package/tui/src/components/ConfirmOverlay.tsx

@@ -1,4 +1,6 @@
 import { useKeyboard } from "@opentui/solid";
+import { onMount, onCleanup } from "solid-js";
+import { useKeyboardNav } from "../context/keyboard.js";
 
 interface ConfirmOverlayProps {
   message: string;
@@ -7,6 +9,10 @@ interface ConfirmOverlayProps {
 }
 
 export function ConfirmOverlay(props: ConfirmOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
   useKeyboard((event) => {
     event.preventDefault();
     

package/tui/src/components/ConflictOverlay.tsx

@@ -1,5 +1,7 @@
 import { useKeyboard } from "@opentui/solid";
+import { onMount, onCleanup } from "solid-js";
 import type { StateConflictResolution } from "../../../src/core/types.js";
+import { useKeyboardNav } from "../context/keyboard.js";
 
 interface ConflictOverlayProps {
   localTimestamp: Date;
@@ -17,6 +19,10 @@ function formatTimestamp(date: Date): string {
 }
 
 export function ConflictOverlay(props: ConflictOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
   useKeyboard((event) => {
     event.preventDefault();
 

package/tui/src/components/HelpOverlay.tsx

@@ -1,12 +1,17 @@
 import { useKeyboard } from "@opentui/solid";
-import { For } from "solid-js";
+import { For, onMount, onCleanup } from "solid-js";
 import { getAllCommands } from "../commands/registry";
+import { useKeyboardNav } from "../context/keyboard.js";
 
 interface HelpOverlayProps {
   onDismiss: () => void;
 }
 
 export function HelpOverlay(props: HelpOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
   useKeyboard((event) => {
     event.preventDefault();
     props.onDismiss();

package/tui/src/components/LoadingOverlay.tsx

@@ -0,0 +1,51 @@
+import { useKeyboard } from "@opentui/solid";
+import { onMount, onCleanup } from "solid-js";
+import { useKeyboardNav } from "../context/keyboard.js";
+
+interface LoadingOverlayProps {
+  message: string;
+  onCancel?: () => void;
+}
+
+export function LoadingOverlay(props: LoadingOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
+  useKeyboard((event) => {
+    if (event.name === "escape" && props.onCancel) {
+      event.preventDefault();
+      props.onCancel();
+    }
+  });
+
+  return (
+    <box
+      position="absolute"
+      width="100%"
+      height="100%"
+      left={0}
+      top={0}
+      backgroundColor="#000000"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={50}
+        backgroundColor="#1a1a2e"
+        borderStyle="single"
+        borderColor="#586e75"
+        padding={2}
+        flexDirection="column"
+      >
+        <text fg="#eee8d5">
+          {props.message}
+        </text>
+        <box visible={!!props.onCancel}>
+          <text> </text>
+          <text fg="#586e75">Esc: cancel</text>
+        </box>
+      </box>
+    </box>
+  );
+}

package/tui/src/components/MessageList.tsx

@@ -5,6 +5,7 @@ import { useKeyboardNav } from "../context/keyboard.js";
 import { logger } from "../util/logger.js";
 import { solarizedDarkSyntax } from "../util/syntax.js";
 import type { Quote, Message } from "../../../src/core/types.js";
+import { insertQuoteMarkers } from "../util/quote-utils.js";
 
 interface MessageWithQuotes extends Message {
   _quotes: Quote[];
@@ -28,24 +29,6 @@ function buildMessageText(message: Message): string {
   return parts.join('\n\n');
 }
 
-function insertQuoteMarkers(content: string, quotes: Quote[]): string {
-  const validQuotes = quotes
-    .filter(q => q.end !== null && q.end !== undefined)
-    .sort((a, b) => b.end! - a.end!);
-  
-  let result = content;
-  for (const quote of validQuotes) {
-    let insertPos = quote.end!;
-    if (insertPos >= 0 && insertPos <= result.length) {
-      while (insertPos > 0 && (result[insertPos - 1] === '\n' || result[insertPos - 1] === ' ')) {
-        insertPos--;
-      }
-      result = result.slice(0, insertPos) + "\u207a" + result.slice(insertPos);
-    }
-  }
-  return result;
-}
-
 let instanceId = 0;
 
 export function MessageList() {

package/tui/src/components/PersonPickerOverlay.tsx

@@ -0,0 +1,121 @@
+import { useKeyboard } from "@opentui/solid";
+import { For, createSignal, onMount, onCleanup } from "solid-js";
+import { useKeyboardNav } from "../context/keyboard.js";
+import type { KeyEvent } from "@opentui/core";
+
+export interface PersonPickerItem {
+  id: string;
+  name: string;
+  relationship?: string;
+  description?: string;
+}
+
+interface PersonPickerOverlayProps {
+  title: string;
+  people: PersonPickerItem[];
+  onSelect: (person: PersonPickerItem) => void;
+  onDismiss: () => void;
+}
+
+const truncate = (text: string, maxLen: number): string => {
+  return text.length > maxLen ? text.slice(0, maxLen - 3) + "..." : text;
+};
+
+export function PersonPickerOverlay(props: PersonPickerOverlayProps) {
+  const { setOverlayActive } = useKeyboardNav();
+  onMount(() => setOverlayActive(true));
+  onCleanup(() => setOverlayActive(false));
+
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+
+  useKeyboard((event: KeyEvent) => {
+    const key = event.name;
+    const listLength = props.people.length;
+
+    if (key === "j" || key === "down") {
+      event.preventDefault();
+      setSelectedIndex((prev) => Math.min(prev + 1, listLength - 1));
+      return;
+    }
+
+    if (key === "k" || key === "up") {
+      event.preventDefault();
+      setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      return;
+    }
+
+    if (key === "return") {
+      event.preventDefault();
+      if (listLength > 0) {
+        props.onSelect(props.people[selectedIndex()]);
+      }
+      return;
+    }
+
+    if (key === "escape") {
+      event.preventDefault();
+      props.onDismiss();
+      return;
+    }
+  });
+
+  return (
+    <box
+      position="absolute"
+      width="100%"
+      height="100%"
+      left={0}
+      top={0}
+      backgroundColor="#000000"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={70}
+        height="80%"
+        backgroundColor="#1a1a2e"
+        borderStyle="single"
+        borderColor="#586e75"
+        padding={2}
+        flexDirection="column"
+      >
+        <text fg="#eee8d5" marginBottom={1}>
+          {props.title}
+        </text>
+
+        <scrollbox height="100%">
+          <For each={props.people}>
+            {(person, index) => {
+              const isSelected = () => selectedIndex() === index();
+              const label = () => {
+                let text = person.name;
+                if (person.relationship) {
+                  text += ` — ${person.relationship}`;
+                }
+                if (person.description) {
+                  text += ` · ${truncate(person.description, 40)}`;
+                }
+                return text;
+              };
+
+              return (
+                <box
+                  backgroundColor={isSelected() ? "#2d3748" : "transparent"}
+                  paddingLeft={1}
+                  paddingRight={1}
+                >
+                  <text fg={isSelected() ? "#eee8d5" : "#839496"}>
+                    {label()}
+                  </text>
+                </box>
+              );
+            }}
+          </For>
+        </scrollbox>
+
+        <text> </text>
+        <text fg="#586e75">j/k: navigate | Enter: select | Esc: cancel</text>
+      </box>
+    </box>
+  );
+}