@schlessera/brain-ui-react 0.5.0 → 0.6.0

package/src/components/chat/chat-page.tsx

@@ -34,6 +34,8 @@ import { SessionDrawer } from "./session-drawer.js";
 import { SettingsPanel } from "../settings/settings-panel.js";
 import { StreamingPanel } from "../quick-actions/streaming-modal.js";
 import { WhatsupPanel } from "../quick-actions/whatsup-modal.js";
+import { SearchPanel } from "../quick-actions/search-modal.js";
+import { AddPanel } from "../quick-actions/add-modal.js";
 import { FilePanel } from "../files/file-panel.js";
 import { MicButton } from "../voice/mic-button.js";
 import { DictationSheet } from "../voice/dictation-sheet.js";
@@ -120,6 +122,10 @@ export function ChatPage() {
   const setSyncPanelOpen = useUIStore((s) => s.setSyncPanelOpen);
   const whatsupPanelOpen = useUIStore((s) => s.whatsupPanelOpen);
   const setWhatsupPanelOpen = useUIStore((s) => s.setWhatsupPanelOpen);
+  const searchPanelOpen = useUIStore((s) => s.searchPanelOpen);
+  const setSearchPanelOpen = useUIStore((s) => s.setSearchPanelOpen);
+  const addPanelOpen = useUIStore((s) => s.addPanelOpen);
+  const setAddPanelOpen = useUIStore((s) => s.setAddPanelOpen);
   const filePanelOpen = useUIStore((s) => s.filePanelOpen);
   const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
   const settingsPanelOpen = useUIStore((s) => s.settingsPanelOpen);
@@ -381,6 +387,17 @@ export function ChatPage() {
     setInput("");
     setShowCommandPalette(false);
 
+    // Search and add talk to the brain CLI over REST, not to the agent — they
+    // stay available while a turn streams or the socket is down.
+    switch (command) {
+      case "search":
+        setSearchPanelOpen(true);
+        return;
+      case "add":
+        setAddPanelOpen(true);
+        return;
+    }
+
     const disabled = wsStatus !== "connected" || isStreaming;
     if (disabled) return;
 
@@ -391,15 +408,6 @@ export function ChatPage() {
       case "whatsup":
         setWhatsupPanelOpen(true);
         break;
-      case "search":
-        setInput("");
-        // Focus the input with a placeholder hint
-        setTimeout(() => textareaRef.current?.focus(), 50);
-        break;
-      case "add":
-        setInput("");
-        setTimeout(() => textareaRef.current?.focus(), 50);
-        break;
       case "stats":
         runStatsAction();
         break;
@@ -463,6 +471,12 @@ export function ChatPage() {
     ? pinnedProviderId ?? selectedProviderId
     : selectedProviderId;
   const displayProvider = providers.find((p) => p.id === displayProviderId);
+  // A session can be pinned to a profile the user has since hidden — it is gone
+  // from the picker but still running the turn. Show its id rather than
+  // claiming "Default model", which would name a different model than the one
+  // actually answering.
+  const displayProviderLabel =
+    displayProvider?.label ?? displayProviderId ?? "Default model";
   const showProviderPicker = providers.length > 1;
   // What happens if the user sends into the currently-running session.
   const displayBackendId = displayProvider?.backendId;
@@ -498,6 +512,14 @@ export function ChatPage() {
         open={whatsupPanelOpen}
         onClose={() => setWhatsupPanelOpen(false)}
       />
+      <SearchPanel
+        open={searchPanelOpen}
+        onClose={() => setSearchPanelOpen(false)}
+      />
+      <AddPanel
+        open={addPanelOpen}
+        onClose={() => setAddPanelOpen(false)}
+      />
       <FilePanel
         open={filePanelOpen}
         onClose={() => setFilePanelOpen(false)}
@@ -700,7 +722,7 @@ export function ChatPage() {
                         <Lock className="h-3 w-3 shrink-0 opacity-70" />
                       )}
                       <span className="truncate">
-                        {displayProvider?.label ?? "Default model"}
+                        {displayProviderLabel}
                       </span>
                       {!providerLocked && (
                         <ChevronDown className="h-3 w-3 shrink-0 opacity-70" />

package/src/components/layout/kbd.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+/** A key cap for inline keyboard hints ("↵ to open"). */
+export function Kbd({ children }: { children: ReactNode }) {
+  return (
+    <kbd className="rounded border border-border bg-surface-raised px-1 py-0.5 font-mono text-[10px] text-muted-foreground">
+      {children}
+    </kbd>
+  );
+}

package/src/components/quick-actions/add-modal.tsx

@@ -0,0 +1,231 @@
+import { useState, useEffect, useRef } from "react";
+import { Loader2, CheckCircle2, XCircle } from "lucide-react";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { Kbd } from "../layout/kbd.js";
+import { api } from "../../lib/api-client.js";
+
+type State = "editing" | "saving" | "saved" | "error";
+
+/** Split the tags field on commas; empties dropped so "a,,b," is clean. */
+function parseTags(raw: string): string[] {
+  return raw
+    .split(",")
+    .map((t) => t.trim())
+    .filter(Boolean);
+}
+
+export function AddPanel({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const [content, setContent] = useState("");
+  const [title, setTitle] = useState("");
+  const [type, setType] = useState("");
+  const [tags, setTags] = useState("");
+  const [state, setState] = useState<State>("editing");
+  const [error, setError] = useState("");
+  // Types already in the brain, offered as completions — `brain add` accepts
+  // any string, so this is a hint list, not a closed set.
+  const [knownTypes, setKnownTypes] = useState<string[]>([]);
+
+  const contentRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    setContent("");
+    setTitle("");
+    setType("");
+    setTags("");
+    setError("");
+    setState("editing");
+
+    const t = setTimeout(() => contentRef.current?.focus(), 120);
+
+    let cancelled = false;
+    api
+      .brainStats()
+      .then((s) => {
+        if (!cancelled) setKnownTypes(Object.keys(s.byType).sort());
+      })
+      .catch(() => {
+        // Completions are a nicety; a failed stats call must not block adding.
+      });
+
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+    };
+  }, [open]);
+
+  async function handleSave() {
+    const body = content.trim();
+    if (!body || state === "saving") return;
+
+    setState("saving");
+    setError("");
+    try {
+      await api.brainAdd(body, {
+        type: type.trim() || undefined,
+        title: title.trim() || undefined,
+        tags: parseTags(tags).length ? parseTags(tags) : undefined,
+      });
+      setState("saved");
+    } catch (err: any) {
+      setError(err?.message || "Add failed");
+      setState("error");
+    }
+  }
+
+  function handleAddAnother() {
+    setContent("");
+    setTitle("");
+    setType("");
+    setTags("");
+    setState("editing");
+    setTimeout(() => contentRef.current?.focus(), 0);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    // Cmd/Ctrl+Enter saves from anywhere in the form.
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      void handleSave();
+    }
+  }
+
+  const saving = state === "saving";
+  const canSave = content.trim().length > 0 && !saving;
+
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Add to brain" wide>
+      <div className="flex h-full flex-col" onKeyDown={handleKeyDown}>
+        {state === "saved" ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-4 px-8 text-center">
+            <CheckCircle2 className="h-8 w-8 text-primary" />
+            <p className="text-sm text-foreground">Added to your brain.</p>
+            <p className="text-xs text-muted-foreground">
+              Run a sync to index and push it.
+            </p>
+            <div className="flex gap-2">
+              <button
+                onClick={handleAddAnother}
+                className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+              >
+                Add another
+              </button>
+              <button
+                onClick={onClose}
+                className="rounded-lg bg-primary px-4 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="flex-1 space-y-4 overflow-y-auto p-5">
+              <Field label="Note">
+                <textarea
+                  ref={contentRef}
+                  value={content}
+                  onChange={(e) => setContent(e.target.value)}
+                  rows={8}
+                  placeholder="What do you want to remember?"
+                  className="w-full resize-y rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
+                />
+              </Field>
+
+              <Field label="Title" hint="optional, derived from the note if empty">
+                <input
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  className="w-full rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary/40"
+                />
+              </Field>
+
+              <div className="grid grid-cols-2 gap-3">
+                <Field label="Type" hint="optional">
+                  <input
+                    value={type}
+                    onChange={(e) => setType(e.target.value)}
+                    list="brain-add-types"
+                    placeholder="note"
+                    className="w-full rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
+                  />
+                  <datalist id="brain-add-types">
+                    {knownTypes.map((t) => (
+                      <option key={t} value={t} />
+                    ))}
+                  </datalist>
+                </Field>
+
+                <Field label="Tags" hint="comma-separated">
+                  <input
+                    value={tags}
+                    onChange={(e) => setTags(e.target.value)}
+                    placeholder="idea, reading"
+                    className="w-full rounded-lg border border-border bg-surface-raised px-3 py-2 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-primary/40"
+                  />
+                </Field>
+              </div>
+
+              {state === "error" && (
+                <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2">
+                  <XCircle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-destructive" />
+                  <span className="text-xs text-destructive">{error}</span>
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center justify-between border-t border-border px-5 py-3">
+              <span className="text-[11px] text-muted-foreground">
+                <Kbd>Ctrl</Kbd>/<Kbd>Cmd</Kbd> + <Kbd>↵</Kbd> to save
+              </span>
+              <div className="flex gap-2">
+                <button
+                  onClick={onClose}
+                  className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleSave}
+                  disabled={!canSave}
+                  className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40"
+                >
+                  {saving && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+                  {saving ? "Saving..." : "Add"}
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </SlidePanel>
+  );
+}
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <label className="block space-y-1.5">
+      <span className="text-xs font-medium text-foreground">
+        {label}
+        {hint && (
+          <span className="font-normal text-muted-foreground"> — {hint}</span>
+        )}
+      </span>
+      {children}
+    </label>
+  );
+}

package/src/components/quick-actions/search-modal.tsx

@@ -0,0 +1,285 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Loader2, Search, X, AlertTriangle } from "lucide-react";
+import { SlidePanel } from "../layout/slide-panel.js";
+import { Kbd } from "../layout/kbd.js";
+import { useFileStore } from "../../stores/file-store.js";
+import { useUIStore } from "../../stores/ui-store.js";
+import { api, type BrainSearchHit } from "../../lib/api-client.js";
+import { parseSnippet } from "../../lib/search-snippet.js";
+import { cn } from "../../lib/utils.js";
+
+/** Wait this long after the last keystroke before hitting the CLI. */
+const DEBOUNCE_MS = 250;
+const MIN_QUERY = 2;
+const LIMIT = 25;
+
+type State = "idle" | "loading" | "done" | "error";
+
+export function SearchPanel({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [state, setState] = useState<State>("idle");
+  const [results, setResults] = useState<BrainSearchHit[]>([]);
+  const [warnings, setWarnings] = useState<string[]>([]);
+  const [error, setError] = useState("");
+  const [selected, setSelected] = useState(0);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const controllerRef = useRef<AbortController | null>(null);
+
+  const openFile = useFileStore((s) => s.openFile);
+  const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
+
+  const trimmed = query.trim();
+
+  const runSearch = useCallback(async (q: string) => {
+    controllerRef.current?.abort();
+    const controller = new AbortController();
+    controllerRef.current = controller;
+
+    setState("loading");
+    try {
+      const res = await api.brainSearch(q, {
+        limit: LIMIT,
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) return;
+      setResults(res.results);
+      setWarnings(res.warnings ?? []);
+      setSelected(0);
+      setState("done");
+    } catch (err: any) {
+      // A superseded request is not a failure — the newer one owns the state.
+      if (err?.name === "AbortError" || controller.signal.aborted) return;
+      setError(err?.message || "Search failed");
+      setResults([]);
+      setState("error");
+    } finally {
+      if (controllerRef.current === controller) controllerRef.current = null;
+    }
+  }, []);
+
+  // Fresh panel every time it opens: stale results from a previous query would
+  // otherwise flash before the first search lands.
+  useEffect(() => {
+    if (!open) {
+      controllerRef.current?.abort();
+      controllerRef.current = null;
+      return;
+    }
+    setQuery("");
+    setResults([]);
+    setWarnings([]);
+    setError("");
+    setState("idle");
+    setSelected(0);
+    // Focus after the slide-in starts; focusing mid-transform fights the
+    // mobile keyboard on some browsers.
+    const t = setTimeout(() => inputRef.current?.focus(), 120);
+    return () => clearTimeout(t);
+  }, [open]);
+
+  // Debounced search on typing.
+  useEffect(() => {
+    if (!open) return;
+    if (trimmed.length < MIN_QUERY) {
+      controllerRef.current?.abort();
+      controllerRef.current = null;
+      setResults([]);
+      setWarnings([]);
+      setState("idle");
+      return;
+    }
+    const t = setTimeout(() => void runSearch(trimmed), DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [open, trimmed, runSearch]);
+
+  function handleOpenResult(hit: BrainSearchHit) {
+    // The file panel takes the same right-hand slot, so hand the screen over
+    // rather than stacking two sheets.
+    onClose();
+    setFilePanelOpen(true);
+    void openFile(hit.path);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (results.length === 0) return;
+      e.preventDefault();
+      const delta = e.key === "ArrowDown" ? 1 : -1;
+      const next = (selected + delta + results.length) % results.length;
+      setSelected(next);
+      listRef.current
+        ?.querySelectorAll("[data-result]")
+        [next]?.scrollIntoView({ block: "nearest" });
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const hit = results[selected];
+      if (hit) handleOpenResult(hit);
+      // Enter with nothing selected jumps the debounce.
+      else if (trimmed.length >= MIN_QUERY) void runSearch(trimmed);
+    }
+  }
+
+  return (
+    <SlidePanel open={open} onClose={onClose} title="Search" wide>
+      <div className="flex h-full flex-col">
+        {/* Query field */}
+        <div className="border-b border-border px-5 py-3">
+          <div className="flex items-center gap-2 rounded-lg border border-border bg-surface-raised px-3 py-2 focus-within:border-primary/40">
+            <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search your brain..."
+              className="min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
+              autoComplete="off"
+              autoCorrect="off"
+              spellCheck={false}
+            />
+            {state === "loading" && (
+              <Loader2 className="h-4 w-4 shrink-0 animate-spin text-primary" />
+            )}
+            {query && state !== "loading" && (
+              <button
+                onClick={() => {
+                  setQuery("");
+                  inputRef.current?.focus();
+                }}
+                className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+                title="Clear"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Degraded-mode notices from the CLI (e.g. FTS-only, no vectors) */}
+        {warnings.length > 0 && (
+          <div className="flex items-start gap-2 border-b border-border bg-surface-raised/40 px-5 py-2">
+            <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+            <div className="text-[11px] leading-relaxed text-muted-foreground">
+              {warnings.map((w, i) => (
+                <div key={i}>{w}</div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Results */}
+        <div ref={listRef} className="flex-1 overflow-y-auto">
+          {state === "error" ? (
+            <Placeholder>{error}</Placeholder>
+          ) : trimmed.length < MIN_QUERY ? (
+            <Placeholder>
+              <span>
+                Type at least {MIN_QUERY} characters. <Kbd>↑</Kbd> <Kbd>↓</Kbd> to
+                pick, <Kbd>↵</Kbd> to open.
+              </span>
+            </Placeholder>
+          ) : state === "done" && results.length === 0 ? (
+            <Placeholder>No results for “{trimmed}”.</Placeholder>
+          ) : (
+            <div className="divide-y divide-border/40">
+              {results.map((hit, i) => (
+                <ResultRow
+                  key={hit.path}
+                  hit={hit}
+                  active={i === selected}
+                  onMouseEnter={() => setSelected(i)}
+                  onClick={() => handleOpenResult(hit)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between border-t border-border px-5 py-3">
+          <span className="text-[11px] text-muted-foreground">
+            {state === "done" && results.length > 0
+              ? `${results.length}${results.length === LIMIT ? "+" : ""} result${results.length === 1 ? "" : "s"}`
+              : ""}
+          </span>
+          <button
+            onClick={onClose}
+            className="rounded-lg bg-surface-raised px-4 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-surface-overlay"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </SlidePanel>
+  );
+}
+
+function ResultRow({
+  hit,
+  active,
+  onClick,
+  onMouseEnter,
+}: {
+  hit: BrainSearchHit;
+  active: boolean;
+  onClick: () => void;
+  onMouseEnter: () => void;
+}) {
+  return (
+    <button
+      data-result
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      title={hit.path}
+      className={cn(
+        "flex w-full flex-col gap-1 px-5 py-3 text-left transition-colors",
+        active ? "bg-surface-raised" : "hover:bg-surface-raised/60"
+      )}
+    >
+      <div className="flex items-baseline gap-2">
+        {hit.type && (
+          <span className="shrink-0 rounded bg-surface-overlay px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+            {hit.type}
+          </span>
+        )}
+        <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
+          {hit.title || hit.path}
+        </span>
+      </div>
+      {hit.snippet && (
+        <p className="line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+          {parseSnippet(hit.snippet).map((seg, i) =>
+            seg.hit ? (
+              <span key={i} className="text-foreground">
+                {seg.text}
+              </span>
+            ) : (
+              <span key={i}>{seg.text}</span>
+            )
+          )}
+        </p>
+      )}
+      <span className="truncate font-mono text-[10px] text-muted-foreground/60">
+        {hit.path}
+      </span>
+    </button>
+  );
+}
+
+function Placeholder({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-32 items-center justify-center px-8 text-center text-xs text-muted-foreground">
+      {children}
+    </div>
+  );
+}

package/src/components/settings/models-tab.tsx

@@ -5,6 +5,7 @@ import type {
   ModelCatalogResponse,
 } from "@schlessera/brain-ui-sdk/protocol";
 import { api } from "../../lib/api-client.js";
+import { useProviderStore } from "../../stores/provider-store.js";
 import { cn } from "../../lib/utils.js";
 
 /**
@@ -19,6 +20,7 @@ export function ModelsTab({ active }: { active: boolean }) {
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const loadProviders = useProviderStore((s) => s.loadProviders);
 
   useEffect(() => {
     if (!active) return;
@@ -63,6 +65,10 @@ export function ModelsTab({ active }: { active: boolean }) {
     setError(null);
     try {
       setCatalog(await api.setHiddenModels(hidden));
+      // The composer's picker holds its own copy of the roster, fetched once on
+      // mount — without this it keeps offering a model the user just hid until
+      // the page is reloaded.
+      void loadProviders();
     } catch (err) {
       setCatalog(previous);
       setError(err instanceof Error ? err.message : "Could not save");
@@ -75,6 +81,9 @@ export function ModelsTab({ active }: { active: boolean }) {
     setError(null);
     try {
       setCatalog(await api.refreshModels());
+      // A refresh can surface newly released models — put them in the picker
+      // now, not on next load.
+      void loadProviders();
     } catch (err) {
       setError(err instanceof Error ? err.message : "Refresh failed");
     } finally {