ei-tui 0.1.3

package/tui/src/commands/settings.tsx

@@ -0,0 +1,83 @@
+import type { Command } from "./registry.js";
+import { spawnEditor } from "../util/editor.js";
+import { settingsToYAML, settingsFromYAML, validateModelProvider } from "../util/yaml-serializers.js";
+import { logger } from "../util/logger.js";
+import { ConfirmOverlay } from "../components/ConfirmOverlay.js";
+
+export const settingsCommand: Command = {
+  name: "settings",
+  aliases: ["set"],
+  description: "Edit your settings in $EDITOR",
+  usage: "/settings",
+  
+  async execute(_args, ctx) {
+    const human = await ctx.ei.getHuman();
+    let yamlContent = settingsToYAML(human.settings);
+    let editorIteration = 0;
+    
+    while (true) {
+      editorIteration++;
+      logger.debug("[settings] starting editor iteration", { iteration: editorIteration });
+      
+      const result = await spawnEditor({
+        initialContent: yamlContent,
+        filename: "settings.yaml",
+        renderer: ctx.renderer,
+      });
+      
+      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 newSettings = settingsFromYAML(result.content, human.settings);
+        // Validate provider name in default_model (case-insensitive match + auto-correct)
+        const llmAccounts = human.settings?.accounts?.filter(a => a.type === "llm") ?? [];
+        newSettings.default_model = validateModelProvider(newSettings.default_model, llmAccounts);
+        await ctx.ei.updateSettings(newSettings);
+        ctx.showNotification("Settings updated", "info");
+        return;
+        
+      } catch (parseError) {
+        const errorMsg = parseError instanceof Error ? parseError.message : String(parseError);
+        logger.debug("[settings] YAML parse error, prompting for re-edit", { iteration: editorIteration, error: errorMsg });
+        
+        const shouldReEdit = await new Promise<boolean>((resolve) => {
+          ctx.showOverlay((hideOverlay) => (
+            <ConfirmOverlay
+              message={`YAML parse error:\n${errorMsg}\n\nRe-edit?`}
+              onConfirm={() => {
+                hideOverlay();
+                resolve(true);
+              }}
+              onCancel={() => {
+                hideOverlay();
+                resolve(false);
+              }}
+            />
+          ));
+        });
+        
+        if (shouldReEdit) {
+          yamlContent = result.content;
+          await new Promise(r => setTimeout(r, 50));
+          continue;
+        } else {
+          ctx.showNotification("Changes discarded", "info");
+          return;
+        }
+      }
+    }
+  }
+};

package/tui/src/components/ConfirmOverlay.tsx

@@ -0,0 +1,51 @@
+import { useKeyboard } from "@opentui/solid";
+
+interface ConfirmOverlayProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmOverlay(props: ConfirmOverlayProps) {
+  useKeyboard((event) => {
+    event.preventDefault();
+    
+    const key = event.name.toLowerCase();
+    
+    if (key === 'y') {
+      props.onConfirm();
+    } else if (key === 'n' || key === 'escape') {
+      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>
+        <text> </text>
+        <text fg="#586e75">
+          (y/N)
+        </text>
+      </box>
+    </box>
+  );
+}

package/tui/src/components/ConflictOverlay.tsx

@@ -0,0 +1,78 @@
+import { useKeyboard } from "@opentui/solid";
+import type { StateConflictResolution } from "../../../src/core/types.js";
+
+interface ConflictOverlayProps {
+  localTimestamp: Date;
+  remoteTimestamp: Date;
+  onResolve: (resolution: StateConflictResolution) => void;
+}
+
+function formatTimestamp(date: Date): string {
+  const y = date.getFullYear();
+  const mo = (date.getMonth() + 1).toString().padStart(2, "0");
+  const d = date.getDate().toString().padStart(2, "0");
+  const h = date.getHours().toString().padStart(2, "0");
+  const m = date.getMinutes().toString().padStart(2, "0");
+  return `${y}-${mo}-${d} ${h}:${m}`;
+}
+
+export function ConflictOverlay(props: ConflictOverlayProps) {
+  useKeyboard((event) => {
+    event.preventDefault();
+
+    const key = event.name.toLowerCase();
+
+    if (key === "l") {
+      props.onResolve("local");
+    } else if (key === "s") {
+      props.onResolve("server");
+    } else if (key === "y") {
+      props.onResolve("yolo");
+    }
+  });
+
+  return (
+    <box
+      position="absolute"
+      width="100%"
+      height="100%"
+      left={0}
+      top={0}
+      backgroundColor="#000000"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={60}
+        backgroundColor="#1a1a2e"
+        borderStyle="single"
+        borderColor="#586e75"
+        padding={2}
+        flexDirection="column"
+      >
+        <text fg="#dc322f">
+          State Conflict Detected
+        </text>
+        <text> </text>
+        <text fg="#93a1a1">
+          Both local and server state exist.
+        </text>
+        <text> </text>
+        <text fg="#eee8d5">
+          {`  Local:  ${formatTimestamp(props.localTimestamp)}`}
+        </text>
+        <text fg="#eee8d5">
+          {`  Server: ${formatTimestamp(props.remoteTimestamp)}`}
+        </text>
+        <text> </text>
+        <text fg="#b58900">
+          [L] Keep Local   [S] Use Server   [Y] Yolo Merge
+        </text>
+        <text> </text>
+        <text fg="#586e75">
+          Yolo Merge combines both — safe for most cases
+        </text>
+      </box>
+    </box>
+  );
+}

package/tui/src/components/HelpOverlay.tsx

@@ -0,0 +1,69 @@
+import { useKeyboard } from "@opentui/solid";
+import { For } from "solid-js";
+import { getAllCommands } from "../commands/registry";
+
+interface HelpOverlayProps {
+  onDismiss: () => void;
+}
+
+export function HelpOverlay(props: HelpOverlayProps) {
+  useKeyboard((event) => {
+    event.preventDefault();
+    props.onDismiss();
+  });
+
+  const commands = getAllCommands();
+
+  return (
+    <box
+      position="absolute"
+      width="100%"
+      height="100%"
+      left={0}
+      top={0}
+      backgroundColor="#000000"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={60}
+        backgroundColor="#1a1a2e"
+        borderStyle="single"
+        borderColor="#586e75"
+        padding={2}
+        flexDirection="column"
+      >
+
+        <text fg="#eee8d5">
+          Commands:
+        </text>
+        <For each={commands.sort()}>
+          {(cmd) => (
+            <text fg="#93a1a1">
+              /{cmd.name} - {cmd.description}
+            </text>
+          )}
+        </For>
+        <text> </text>
+
+        <text fg="#eee8d5">
+          Keybindings:
+        </text>
+        <text fg="#93a1a1">Escape - Abort operation / Resume queue</text>
+        <text fg="#93a1a1">Ctrl+C - Clear input / Exit</text>
+        <text fg="#93a1a1">Ctrl+B - Toggle sidebar</text>
+        <text fg="#93a1a1">Ctrl+E - Edit in $EDITOR</text>
+        <text fg="#93a1a1">PageUp/Down - Scroll messages</text>
+        <text> </text>
+
+        <text fg="#586e75">
+          Press any key to dismiss
+        </text>
+        <text> </text>
+        <text fg="#2a2a3e">
+          Ei - 永 (ei) - eternal
+        </text>
+      </box>
+    </box>
+  );
+}

package/tui/src/components/Layout.tsx

@@ -0,0 +1,24 @@
+import { JSX, Show } from "solid-js";
+import { useKeyboardNav } from "../context/keyboard";
+
+interface LayoutProps {
+  sidebar: JSX.Element;
+  messages: JSX.Element;
+  input: JSX.Element;
+}
+
+export function Layout(props: LayoutProps) {
+  const { sidebarVisible } = useKeyboardNav();
+
+  return (
+    <box flexDirection="row" width="100%" height="100%">
+      <Show when={sidebarVisible()}>
+        {props.sidebar}
+      </Show>
+      <box flexDirection="column" flexGrow={1}>
+        {props.messages}
+        {props.input}
+      </box>
+    </box>
+  );
+}

package/tui/src/components/MessageList.tsx

@@ -0,0 +1,174 @@
+import { For, Show, createMemo, createSignal, createEffect, on } from "solid-js";
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { useEi } from "../context/ei.js";
+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";
+
+interface MessageWithQuotes extends Message {
+  _quotes: Quote[];
+  _quoteIndex: number;
+}
+
+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}`;
+}
+
+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) + "⁺" + result.slice(insertPos);
+    }
+  }
+  return result;
+}
+
+let instanceId = 0;
+
+export function MessageList() {
+  const myId = ++instanceId;
+  logger.info(`MessageList instance ${myId} MOUNTED`);
+  
+  const { messages, activePersonaId, personas, activeContextBoundary, getQuotes, quotesVersion } = useEi();
+  const { focusedPanel, registerMessageScroll } = useKeyboardNav();
+
+  const isFocused = () => focusedPanel() === "messages";
+
+  const [allQuotes, setAllQuotes] = createSignal<Quote[]>([]);
+
+  createEffect(on(() => [messages(), quotesVersion()], () => {
+    void getQuotes().then(setAllQuotes);
+  }));
+
+  const messagesWithQuotes = createMemo<MessageWithQuotes[]>(() => {
+    const quotesByMessage = new Map<string, Quote[]>();
+    for (const quote of allQuotes()) {
+      if (quote.message_id) {
+        const existing = quotesByMessage.get(quote.message_id) ?? [];
+        existing.push(quote);
+        quotesByMessage.set(quote.message_id, existing);
+      }
+    }
+
+    return messages().map((msg, idx) => {
+      const quotes = quotesByMessage.get(msg.id) ?? [];
+      return {
+        ...msg,
+        _quotes: quotes,
+        _quoteIndex: idx + 1,
+      };
+    });
+  });
+
+  const handleScrollboxRef = (scrollbox: ScrollBoxRenderable) => {
+    registerMessageScroll(scrollbox);
+  };
+
+  const boundaryIsActive = createMemo(() => {
+    const boundary = activeContextBoundary();
+    const msgs = messages();
+    const lastMessage = msgs[msgs.length - 1];
+    return boundary ? (!lastMessage || boundary > lastMessage.timestamp) : false;
+  });
+
+  return (
+    <box 
+      flexGrow={1}
+      border={isFocused() ? ["left"] : undefined}
+      borderColor={isFocused() ? "#268bd2" : undefined}
+      borderStyle="single"
+    >
+      <Show
+        when={messagesWithQuotes().length > 0}
+        fallback={
+          <box flexGrow={1} padding={1} backgroundColor="#0f1419" justifyContent="center" alignItems="center">
+            <text fg="#586e75" content="No messages yet. Start a conversation!" />
+          </box>
+        }
+      >
+        <scrollbox
+          ref={handleScrollboxRef}
+          flexGrow={1}
+          padding={1}
+          backgroundColor="#0f1419"
+          stickyScroll={true}
+          stickyStart="bottom"
+        >
+          <For each={messagesWithQuotes()}>
+            {(message, index) => {
+              const getDisplayName = () => {
+                const persona = personas().find(p => p.id === activePersonaId());
+                return persona?.display_name ?? "Ei";
+              };
+              const speaker = message.role === "human" ? "Human" : getDisplayName();
+              const speakerColor = message.role === "human" ? "#2aa198" : "#b58900";
+              
+              const header = () => `${speaker} (${formatTime(message.timestamp)}) [✂️  ${message._quoteIndex}]:`;
+              
+              const displayContent = insertQuoteMarkers(message.content, message._quotes);
+              
+              const showDivider = () => {
+                const boundary = activeContextBoundary();
+                if (!boundary) return false;
+                const i = index();
+                if (i === 0) return false;
+                const msgs = messagesWithQuotes();
+                const prevMsg = msgs[i - 1];
+                const result = prevMsg.timestamp < boundary && message.timestamp >= boundary;
+                if (result) {
+                  logger.debug(`showDivider TRUE at index ${i}: prev=${prevMsg.timestamp}, boundary=${boundary}, curr=${message.timestamp}`);
+                }
+                return result;
+              };
+
+              const showTrailingDivider = () => {
+                const msgs = messagesWithQuotes();
+                const isLast = index() === msgs.length - 1;
+                if (!isLast) return false;
+                return boundaryIsActive();
+              };
+              
+              return (
+                <>
+                  <box marginTop={1} marginBottom={1} visible={showDivider()}>
+                    <text fg="#586e75" content="─── New Context ───" />
+                  </box>
+                  <box flexDirection="column" marginBottom={1}>
+                    <text
+                      fg={speakerColor}
+                      attributes={TextAttributes.BOLD}
+                      content={header()}
+                    />
+                    <box marginLeft={2}>
+                      <markdown
+                        content={displayContent}
+                        syntaxStyle={solarizedDarkSyntax}
+                        conceal={true}
+                      />
+                    </box>
+                  </box>
+                  <box marginTop={1} marginBottom={1} visible={showTrailingDivider()}>
+                    <text fg="#586e75" content="─── New Context ───" />
+                  </box>
+                </>
+              );
+            }}
+          </For>
+        </scrollbox>
+      </Show>
+    </box>
+  );
+}

package/tui/src/components/PersonaListOverlay.tsx

@@ -0,0 +1,186 @@
+import { useKeyboard } from "@opentui/solid";
+import { For, createSignal, createMemo } from "solid-js";
+import type { KeyEvent } from "@opentui/core";
+import type { PersonaSummary } from "../../../src/core/types.js";
+
+interface PersonaListOverlayProps {
+  personas: PersonaSummary[];
+  activePersonaId: string | null;
+  title?: string;
+  onSelect: (personaId: string) => void;
+  onDismiss: () => void;
+}
+
+export function PersonaListOverlay(props: PersonaListOverlayProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [filterText, setFilterText] = createSignal("");
+  const [filterMode, setFilterMode] = createSignal(false);
+
+  const filteredPersonas = createMemo(() => {
+    const filter = filterText().toLowerCase();
+    if (!filter) return props.personas;
+    return props.personas.filter((p) =>
+      p.display_name.toLowerCase().includes(filter)
+    );
+  });
+
+  createMemo(() => {
+    const list = filteredPersonas();
+    if (selectedIndex() >= list.length) {
+      setSelectedIndex(Math.max(0, list.length - 1));
+    }
+  });
+
+  useKeyboard((event: KeyEvent) => {
+    const key = event.name;
+    const listLength = filteredPersonas().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 = filteredPersonas()[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 = filteredPersonas()[selectedIndex()];
+          props.onSelect(selected.id);
+        }
+        return;
+      }
+
+      if (key === "escape") {
+        event.preventDefault();
+        props.onDismiss();
+        return;
+      }
+
+      if (key === "/") {
+        event.preventDefault();
+        setFilterMode(true);
+        return;
+      }
+    }
+  });
+
+  const truncateDescription = (desc: string | undefined, maxLen: number = 40): string => {
+    if (!desc) return "";
+    return desc.length > maxLen ? desc.slice(0, maxLen - 3) + "..." : desc;
+  };
+
+  const title = props.title || "Select Persona";
+
+  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}>
+          {title}
+        </text>
+
+        <scrollbox height="100%">
+          <For each={filteredPersonas()}>
+            {(persona, index) => {
+              const isActive = () => props.activePersonaId === persona.id;
+              const isSelected = () => selectedIndex() === index();
+              const description = truncateDescription(persona.short_description);
+              const label = () => {
+                const prefix = isActive() ? "> " : "  ";
+                const descText = description ? ` - ${description}` : "";
+                return `${prefix}${persona.display_name}${descText}`;
+              };
+
+              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>
+  );
+}