ei-tui 0.1.3

package/tui/src/components/PromptInput.tsx

@@ -0,0 +1,145 @@
+import type { TextareaRenderable, KeyBinding } from "@opentui/core";
+import { useEi } from "../context/ei";
+import { useKeyboardNav } from "../context/keyboard";
+import { parseAndExecute, registerCommand, type CommandContext } from "../commands/registry";
+import { quitCommand } from "../commands/quit";
+import { helpCommand } from "../commands/help";
+import { personaCommand } from "../commands/persona";
+import { archiveCommand, unarchiveCommand } from "../commands/archive";
+import { newCommand } from "../commands/new";
+import { pauseCommand } from "../commands/pause";
+import { resumeCommand } from "../commands/resume";
+import { modelCommand } from "../commands/model";
+import { detailsCommand } from "../commands/details";
+import { meCommand } from "../commands/me";
+import { editorCommand } from "../commands/editor";
+import { settingsCommand } from "../commands/settings";
+import { contextCommand } from "../commands/context.js";
+import { deleteCommand } from "../commands/delete";
+import { quotesCommand } from "../commands/quotes";
+import { providerCommand } from "../commands/provider";
+import { setSyncCommand } from "../commands/setsync";
+import { useOverlay } from "../context/overlay";
+
+const TEXTAREA_KEYBINDINGS: KeyBinding[] = [
+  { name: "return", action: "submit" },
+  { name: "return", meta: true, action: "newline" },
+  { name: "j", ctrl: true, action: "newline" },
+];
+
+export function PromptInput() {
+  const ei = useEi();
+  const { sendMessage, activePersonaId, stopProcessor, showNotification } = ei;
+  const { registerTextarea, registerEditorHandler, exitApp, renderer } = useKeyboardNav();
+  const { showOverlay, hideOverlay, overlayRenderer } = useOverlay();
+
+  registerCommand(helpCommand);
+  registerCommand(quitCommand);
+  registerCommand(meCommand);
+  registerCommand(quotesCommand);
+  registerCommand(editorCommand);
+  registerCommand(personaCommand);
+  registerCommand(detailsCommand);
+  registerCommand(archiveCommand);
+  registerCommand(unarchiveCommand);
+  registerCommand(newCommand);
+  registerCommand(pauseCommand);
+  registerCommand(resumeCommand);
+  registerCommand(modelCommand);
+  registerCommand(settingsCommand);
+  registerCommand(providerCommand);
+  registerCommand(setSyncCommand);
+  registerCommand(contextCommand);
+  registerCommand(deleteCommand);
+
+  let textareaRef: TextareaRenderable | undefined;
+
+  const getCommandContext = (): CommandContext => ({
+    showOverlay,
+    hideOverlay,
+    showNotification,
+    exitApp,
+    stopProcessor,
+    ei,
+    renderer,
+    setInputText: (text: string) => textareaRef?.setText(text),
+    getInputText: () => textareaRef?.plainText || "",
+  });
+
+  const handleSubmit = async () => {
+    const text = textareaRef?.plainText?.trim();
+    if (!text) return;
+    
+    if (text.startsWith("/")) {
+      const isEditorCmd = text.startsWith("/editor") ||
+                          text.startsWith("/edit") ||
+                          text.startsWith("/e ") ||
+                          text === "/e";
+      const opensEditorForData = text.startsWith("/me") || 
+                                 text.startsWith("/details") || 
+                                 text.startsWith("/d ") ||
+                                 text === "/d" ||
+                                 text.startsWith("/settings") ||
+                                 text.startsWith("/set ") ||
+                                 text === "/set" ||
+                                 text.startsWith("/p") ||
+                                 text.startsWith("/quotes") ||
+                                 text.startsWith("/q ") ||
+                                 text.startsWith("/context") ||
+                                 text.startsWith("/messages");
+      
+      if (!isEditorCmd && !opensEditorForData) {
+        textareaRef?.clear();
+      }
+      await parseAndExecute(text, getCommandContext());
+      if (opensEditorForData) {
+        textareaRef?.clear();
+      }
+      return;
+    }
+    
+    textareaRef?.clear();
+    if (!activePersonaId()) return;
+    await sendMessage(text);
+  };
+
+  const handleEditor = async () => {
+    await editorCommand.execute([], getCommandContext());
+  };
+
+  registerEditorHandler(handleEditor);
+
+  const getPlaceholder = () => {
+    if (!activePersonaId()) return "Select a persona...";
+    return "Type your message... (Enter to send, Ctrl+E for editor)";
+  };
+
+  return (
+    <box 
+      flexShrink={0}
+      border={["top"]}
+      borderStyle="single" 
+      backgroundColor="#0f3460"
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={0.5}
+      paddingBottom={0.5}
+    >
+      <textarea
+        ref={(r: TextareaRenderable) => {
+          textareaRef = r;
+          registerTextarea(r);
+        }}
+        focused={!overlayRenderer()}
+        onSubmit={() => void handleSubmit()}
+        placeholder={getPlaceholder()}
+        textColor="#eee8d5"
+        backgroundColor="#0f3460"
+        cursorColor="#eee8d5"
+        minHeight={1}
+        maxHeight={6}
+        keyBindings={overlayRenderer() ? [] : TEXTAREA_KEYBINDINGS}
+      />
+    </box>
+  );
+}

package/tui/src/components/ProviderListOverlay.tsx

@@ -0,0 +1,208 @@
+import { useKeyboard } from "@opentui/solid";
+import { For, createSignal, createMemo } from "solid-js";
+import type { KeyEvent } from "@opentui/core";
+
+export interface ProviderListItem {
+  id: string;
+  displayName: string;
+  key: string;
+  defaultModel?: string;
+  enabled: boolean;
+}
+
+interface ProviderListOverlayProps {
+  providers: ProviderListItem[];
+  activeProviderKey: string | null;
+  onSelect: (provider: ProviderListItem) => void;
+  onEdit: (provider: ProviderListItem) => void;
+  onNew: () => void;
+  onDismiss: () => void;
+}
+
+export function ProviderListOverlay(props: ProviderListOverlayProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [filterText, setFilterText] = createSignal("");
+  const [filterMode, setFilterMode] = createSignal(false);
+
+  const filteredProviders = createMemo(() => {
+    const filter = filterText().toLowerCase();
+    if (!filter) return props.providers;
+    return props.providers.filter((p) =>
+      p.displayName.toLowerCase().includes(filter) ||
+      p.key.toLowerCase().includes(filter)
+    );
+  });
+
+  createMemo(() => {
+    const list = filteredProviders();
+    if (selectedIndex() >= list.length) {
+      setSelectedIndex(Math.max(0, list.length - 1));
+    }
+  });
+
+  useKeyboard((event: KeyEvent) => {
+    const key = event.name;
+    const listLength = filteredProviders().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) {
+          props.onSelect(filteredProviders()[selectedIndex()]);
+        }
+        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) {
+          props.onSelect(filteredProviders()[selectedIndex()]);
+        }
+        return;
+      }
+
+      if (key === "e") {
+        event.preventDefault();
+        if (listLength > 0) {
+          props.onEdit(filteredProviders()[selectedIndex()]);
+        }
+        return;
+      }
+
+      if (key === "n") {
+        event.preventDefault();
+        props.onNew();
+        return;
+      }
+
+      if (key === "escape") {
+        event.preventDefault();
+        props.onDismiss();
+        return;
+      }
+
+      if (key === "/") {
+        event.preventDefault();
+        setFilterMode(true);
+        return;
+      }
+    }
+  });
+
+  const truncateModel = (model: string | undefined, maxLen: number = 30): string => {
+    if (!model) return "";
+    return model.length > maxLen ? model.slice(0, maxLen - 3) + "..." : model;
+  };
+
+  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 Provider
+        </text>
+
+        <scrollbox height="100%">
+          <For each={filteredProviders()}>
+            {(provider, index) => {
+              const isActive = () => props.activeProviderKey === provider.key;
+              const isSelected = () => selectedIndex() === index();
+              const modelText = truncateModel(provider.defaultModel);
+              const label = () => {
+                const prefix = isActive() ? "> " : "  ";
+                const model = modelText ? ` - ${modelText}` : "";
+                const disabled = !provider.enabled ? " (disabled)" : "";
+                return `${prefix}${provider.displayName}${model}${disabled}`;
+              };
+
+              return (
+                <box
+                  backgroundColor={
+                    isSelected()
+                      ? "#2d3748"
+                      : isActive()
+                      ? "#1f2937"
+                      : "transparent"
+                  }
+                  paddingLeft={1}
+                  paddingRight={1}
+                >
+                  <text
+                    fg={
+                      !provider.enabled
+                        ? "#4a5568"
+                        : 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 | e: edit | n: new | Esc: cancel | /: filter
+          </text>
+        )}
+      </box>
+    </box>
+  );
+}

package/tui/src/components/QuotesOverlay.tsx

@@ -0,0 +1,157 @@
+import { useKeyboard } from "@opentui/solid";
+import { For, createSignal, createMemo } from "solid-js";
+import type { KeyEvent } from "@opentui/core";
+import type { Quote } from "../../../src/core/types.js";
+
+interface QuotesOverlayProps {
+  quotes: Quote[];
+  messageIndex: number;
+  onClose: () => void;
+  onEdit: () => Promise<void>;
+  onDelete: (quoteId: string) => Promise<void>;
+}
+
+export function QuotesOverlay(props: QuotesOverlayProps) {
+  const [selectedIndex, setSelectedIndex] = createSignal(0);
+  const [confirmDelete, setConfirmDelete] = createSignal(false);
+
+  createMemo(() => {
+    if (selectedIndex() >= props.quotes.length) {
+      setSelectedIndex(Math.max(0, props.quotes.length - 1));
+    }
+  });
+
+  useKeyboard((event: KeyEvent) => {
+    const key = event.name;
+    const listLength = props.quotes.length;
+
+    if (confirmDelete()) {
+      event.preventDefault();
+      if (key === "y") {
+        const quote = props.quotes[selectedIndex()];
+        if (quote) {
+          void props.onDelete(quote.id);
+        }
+        setConfirmDelete(false);
+        if (props.quotes.length <= 1) {
+          props.onClose();
+        }
+      } else if (key === "n" || key === "escape") {
+        setConfirmDelete(false);
+      }
+      return;
+    }
+
+    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 === "e") {
+      event.preventDefault();
+      void props.onEdit();
+      return;
+    }
+
+    if (key === "d") {
+      event.preventDefault();
+      if (listLength > 0) {
+        setConfirmDelete(true);
+      }
+      return;
+    }
+
+    if (key === "escape") {
+      event.preventDefault();
+      props.onClose();
+      return;
+    }
+  });
+
+  const truncateText = (text: string, maxLen: number = 60): string => {
+    const singleLine = text.replace(/\n/g, " ").trim();
+    return singleLine.length > maxLen ? singleLine.slice(0, maxLen - 3) + "..." : singleLine;
+  };
+
+  const formatTimestamp = (timestamp: string): string => {
+    const date = new Date(timestamp);
+    return date.toLocaleDateString() + " " + date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+
+  return (
+    <box
+      position="absolute"
+      width="100%"
+      height="100%"
+      left={0}
+      top={0}
+      backgroundColor="#000000"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <box
+        width={70}
+        height="70%"
+        backgroundColor="#1a1a2e"
+        borderStyle="single"
+        borderColor="#586e75"
+        padding={2}
+        flexDirection="column"
+      >
+        <text fg="#eee8d5" marginBottom={1}>
+          Quotes from message [{props.messageIndex}]
+        </text>
+
+        <box visible={props.quotes.length === 0}>
+          <text fg="#586e75">No quotes in this message</text>
+        </box>
+
+        <scrollbox height="100%" visible={props.quotes.length > 0}>
+          <For each={props.quotes}>
+            {(quote, index) => {
+              const isSelected = () => selectedIndex() === index();
+              const displayText = truncateText(quote.text);
+              const speaker = quote.speaker === "human" ? "You" : quote.speaker;
+
+              return (
+                <box
+                  backgroundColor={isSelected() ? "#2d3748" : "transparent"}
+                  paddingLeft={1}
+                  paddingRight={1}
+                  marginBottom={1}
+                  flexDirection="column"
+                >
+                  <text fg={isSelected() ? "#b58900" : "#839496"}>
+                    {isSelected() ? "▶ " : "  "}{speaker} ({formatTimestamp(quote.timestamp)})
+                  </text>
+                  <text fg={isSelected() ? "#eee8d5" : "#93a1a1"} marginLeft={2}>
+                    "{displayText}"
+                  </text>
+                </box>
+              );
+            }}
+          </For>
+        </scrollbox>
+
+        <text> </text>
+
+        <box visible={confirmDelete()}>
+          <text fg="#dc322f">Delete this quote? (y/N)</text>
+        </box>
+
+        <box visible={!confirmDelete()}>
+          <text fg="#586e75">
+            j/k: navigate | e: edit in $EDITOR | d: delete | Esc: close
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}

package/tui/src/components/Sidebar.tsx

@@ -0,0 +1,95 @@
+import { For, createSignal, createEffect, createMemo, onCleanup } from "solid-js";
+import { useEi } from "../context/ei";
+import { useKeyboardNav } from "../context/keyboard";
+
+export function Sidebar() {
+  const { personas, activePersonaId } = useEi();
+  const { focusedPanel } = useKeyboardNav();
+
+  const isFocused = () => focusedPanel() === "sidebar";
+
+  // Memoize visible (non-archived) personas for proper reactivity
+  const visiblePersonas = createMemo(() => 
+    personas().filter(p => !p.is_archived)
+  );
+
+  const [highlightedPersona, setHighlightedPersona] = createSignal<string | null>(null);
+  let highlightTimer: ReturnType<typeof setTimeout> | null = null;
+
+  createEffect(() => {
+    const currentId = activePersonaId();
+    if (currentId) {
+      if (highlightTimer) clearTimeout(highlightTimer);
+      
+      setHighlightedPersona(currentId);
+      
+      highlightTimer = setTimeout(() => {
+        setHighlightedPersona(null);
+        highlightTimer = null;
+      }, 500);
+    }
+  });
+
+  onCleanup(() => {
+    if (highlightTimer) clearTimeout(highlightTimer);
+  });
+
+  return (
+    <box 
+      width={25} 
+      border={["right"]}
+      borderStyle="single" 
+      borderColor={isFocused() ? "#268bd2" : "#586e75"}
+      padding={1}
+      backgroundColor="#1a1a2e"
+    >
+      <box flexDirection="column">
+        <text fg={isFocused() ? "#268bd2" : "#93a1a1"} marginBottom={1}>
+          {`Personas ${isFocused() ? "[*]" : ""}`}
+        </text>
+        
+        <scrollbox height="100%">
+          <For each={visiblePersonas()}>
+            {(persona) => {
+              const isActive = () => activePersonaId() === persona.id;
+              const displayName = () => 
+                persona.display_name || persona.aliases[0] || persona.id;
+
+              const getLabel = () => {
+                const prefix = isActive() ? "* " : "  ";
+                const name = displayName();
+                const unread = persona.unread_count > 0 ? ` (${persona.unread_count} new)` : "";
+                const paused = persona.is_paused ? " ⏸" : "";
+                return `${prefix}${name}${unread}${paused}`;
+              };
+
+              const textColor = () => {
+                if (isActive()) return "#eee8d5";
+                if (persona.is_paused) return "#586e75";
+                return "#839496";
+              };
+
+              return (
+                <box
+                  backgroundColor={
+                    isActive() && highlightedPersona() === persona.id 
+                      ? "#3d5a80"
+                      : isActive() 
+                      ? "#2d3748"
+                      : "transparent"
+                  }
+                  padding={1}
+                  marginBottom={0.5}
+                >
+                  <text fg={textColor()}>
+                    {getLabel()}
+                  </text>
+                </box>
+              );
+            }}
+          </For>
+        </scrollbox>
+      </box>
+    </box>
+  );
+}

package/tui/src/components/StatusBar.tsx

@@ -0,0 +1,77 @@
+import { Show } from "solid-js";
+import { useEi } from "../context/ei";
+import { useKeyboardNav } from "../context/keyboard";
+
+export function StatusBar() {
+  const { activePersonaId, personas, queueStatus, notification } = useEi();
+  const { focusedPanel, sidebarVisible } = useKeyboardNav();
+
+  const getActiveDisplayName = () => {
+    const id = activePersonaId();
+    if (!id) return null;
+    const persona = personas().find(p => p.id === id);
+    return persona?.display_name ?? id;
+  };
+
+  const getQueueIndicator = () => {
+    const status = queueStatus();
+    if (status.state === "busy") {
+      return `Processing (${status.pending_count})`;
+    }
+    if (status.state === "paused") {
+      return "Paused";
+    }
+    return "Ready";
+  };
+
+  const getFocusIndicator = () => {
+    const panel = focusedPanel();
+    return panel.charAt(0).toUpperCase() + panel.slice(1);
+  };
+
+  const getNotificationColor = () => {
+    const n = notification();
+    if (!n) return "#586e75";
+    if (n.level === "error") return "#dc322f";
+    if (n.level === "warn") return "#b58900";
+    return "#2aa198";
+  };
+
+  return (
+    <box
+      height={1}
+      backgroundColor="#16213e"
+      paddingLeft={1}
+      paddingRight={1}
+      flexDirection="row"
+    >
+      <box flexGrow={1}>
+        <Show when={notification()} fallback={
+          <text fg="#586e75">
+            <Show when={getActiveDisplayName()} fallback="No persona selected">
+              {getActiveDisplayName()}
+            </Show>
+          </text>
+        }>
+          <text fg={getNotificationColor()}>
+            {notification()?.message}
+          </text>
+        </Show>
+      </box>
+
+      <text fg="#586e75" marginRight={2}>
+        [{getFocusIndicator()}]
+      </text>
+
+      <Show when={!sidebarVisible()}>
+        <text fg="#586e75" marginRight={2}>
+          [S]
+        </text>
+      </Show>
+
+      <text fg={queueStatus().state === "busy" ? "#b58900" : "#586e75"}>
+        {getQueueIndicator()}
+      </text>
+    </box>
+  );
+}