@schlessera/brain-ui-react 0.34.1 → 0.36.0

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

@@ -0,0 +1,188 @@
+import { Button, Callout } from "@schlessera/brain-ui-kit";
+import { CheckCircle2 } from "lucide-react";
+import type { ReactNode, RefObject } from "react";
+import { useId } from "react";
+import { Kbd } from "../layout/kbd.js";
+
+/**
+ * The "Add to brain" form, rendered from props (S6). `AddPanel` is the
+ * container: it owns the draft, the `brain add` / `brain index` requests and
+ * the `operation.epoch` guard that keeps a stale save from landing in a
+ * fresh form; this owns the two screens — the form, and the receipt after a
+ * save — and nothing else.
+ *
+ * `state` is the container's machine: `editing` and `error` show the form
+ * (with the error under it), `saving` is the form with the Add button inert,
+ * `saved` is the receipt. On the receipt, `indexed` is three-valued because
+ * an older server does not report it: `false` offers a retry, `true` says
+ * so, `undefined` says the server did not say.
+ *
+ * Fields stay native (the kit has no text input); the buttons are the kit's.
+ * The content field's ref is the container's, because focus after open and
+ * after "Add another" is timed against the panel's slide, which the
+ * container owns.
+ */
+export type AddState = "editing" | "saving" | "saved" | "error";
+
+export interface AddDraft {
+  content: string;
+  title: string;
+  type: string;
+  tags: string;
+}
+
+export interface AddFormProps {
+  state: AddState;
+  draft: AddDraft;
+  /** Types already in the brain, offered as completions — a hint list, not a closed set. */
+  knownTypes: string[];
+  error: string;
+  savedPath: string;
+  indexed: boolean | undefined;
+  indexing: boolean;
+  contentRef: RefObject<HTMLTextAreaElement | null>;
+  onDraft: (patch: Partial<AddDraft>) => void;
+  onSave: () => void;
+  onRetryIndex: () => void;
+  onAddAnother: () => void;
+  onClose: () => void;
+}
+
+export function AddForm(p: AddFormProps) {
+  const typesId = useId();
+  const saving = p.state === "saving";
+  const canSave = p.draft.content.trim().length > 0 && !saving;
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    // Cmd/Ctrl+Enter saves from anywhere in the form. The container refuses
+    // a save that is not from `editing` or `error`, so the receipt is safe.
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      p.onSave();
+    }
+  }
+
+  if (p.state === "saved") {
+    return (
+      <div className="flex h-full flex-col" onKeyDown={onKeyDown}>
+        <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">
+            {p.indexed === false
+              ? "Saved, but not indexed. Your content is safe; search may not find it yet."
+              : p.indexed === true
+                ? "Saved and indexed. Run a sync when you want to push it."
+                : "Saved. This server did not report whether indexing completed."}
+          </p>
+          {p.savedPath && <p className="break-all text-xs text-muted-foreground">{p.savedPath}</p>}
+          {p.indexed === false && (
+            <div className="flex flex-col items-center gap-2" role="status">
+              {p.error && <p className="text-xs text-destructive">{p.error}</p>}
+              <Button
+                label={p.indexing ? "Indexing…" : "Retry indexing"}
+                icon="retry"
+                tone="primary"
+                size="sm"
+                block={false}
+                disabled={p.indexing}
+                onClick={p.onRetryIndex}
+              />
+            </div>
+          )}
+          <div className="flex gap-2">
+            <Button label="Add another" icon="add" tone="ghost" size="sm" block={false} onClick={p.onAddAnother} />
+            <Button label="Done" icon="confirm" tone="primary" size="sm" block={false} onClick={p.onClose} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col" onKeyDown={onKeyDown}>
+      <div className="flex-1 space-y-4 overflow-y-auto p-5">
+        <Field label="Note">
+          <textarea
+            ref={p.contentRef}
+            value={p.draft.content}
+            onChange={(e) => p.onDraft({ content: 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={p.draft.title}
+            onChange={(e) => p.onDraft({ title: 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={p.draft.type}
+              onChange={(e) => p.onDraft({ type: e.target.value })}
+              list={typesId}
+              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={typesId}>
+              {p.knownTypes.map((t) => (
+                <option key={t} value={t} />
+              ))}
+            </datalist>
+          </Field>
+
+          <Field label="Tags" hint="comma-separated">
+            <input
+              value={p.draft.tags}
+              onChange={(e) => p.onDraft({ tags: 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>
+
+        {p.state === "error" && (
+          <div role="alert">
+            <Callout tone="red" variant="banner" icon="failed" mono text={p.error} />
+          </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 label="Cancel" tone="quiet" size="sm" block={false} onClick={p.onClose} />
+          <Button
+            label={saving ? "Saving…" : "Add"}
+            icon="add"
+            tone="primary"
+            size="sm"
+            block={false}
+            disabled={!canSave}
+            onClick={p.onSave}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, hint, children }: { label: string; hint?: string; children: 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/add-modal.tsx

@@ -1,10 +1,7 @@
 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";
+import { useBrainApi } from "../../root-context.js";
+import { AddForm, type AddState as State } from "./add-form.js";
 
 /** Split the tags field on commas; empties dropped so "a,,b," is clean. */
 function parseTags(raw: string): string[] {
@@ -14,6 +11,13 @@ function parseTags(raw: string): string[] {
     .filter(Boolean);
 }
 
+/**
+ * The container (S6): the draft, `brain add`, `brain index` and the
+ * `operation.epoch` guard live here; `AddForm` draws from props. The epoch
+ * is bumped on open, on close, on "Add another" and on every request, so a
+ * response from a form the user has already left cannot land in the one
+ * they are looking at.
+ */
 export function AddPanel({
   open,
   onClose,
@@ -21,12 +25,17 @@ export function AddPanel({
   open: boolean;
   onClose: () => void;
 }) {
+  const api = useBrainApi();
   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("");
+  const [savedPath, setSavedPath] = useState("");
+  const [indexed, setIndexed] = useState<boolean | undefined>();
+  const [indexing, setIndexing] = useState(false);
+  const operation = useRef({ epoch: 0 }).current;
   // 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[]>([]);
@@ -35,6 +44,11 @@ export function AddPanel({
 
   useEffect(() => {
     if (!open) return;
+    operation.epoch++;
+    setKnownTypes([]);
+    setSavedPath("");
+    setIndexed(undefined);
+    setIndexing(false);
     setContent("");
     setTitle("");
     setType("");
@@ -55,31 +69,57 @@ export function AddPanel({
       });
 
     return () => {
+      operation.epoch++;
       cancelled = true;
       clearTimeout(t);
     };
-  }, [open]);
+  }, [open, operation, api]);
 
   async function handleSave() {
     const body = content.trim();
-    if (!body || state === "saving") return;
+    if (!body || (state !== "editing" && state !== "error")) return;
+    const current = ++operation.epoch;
 
     setState("saving");
     setError("");
     try {
-      await api.brainAdd(body, {
+      const result = await api.brainAdd(body, {
         type: type.trim() || undefined,
         title: title.trim() || undefined,
         tags: parseTags(tags).length ? parseTags(tags) : undefined,
       });
+      if (current !== operation.epoch) return;
+      setSavedPath(result.path ?? "");
+      setIndexed(result.indexed);
+      setError(result.indexed === false ? result.indexError || "Indexing failed." : "");
       setState("saved");
     } catch (err: any) {
+      if (current !== operation.epoch) return;
       setError(err?.message || "Add failed");
       setState("error");
     }
   }
 
+  async function retryIndex() {
+    if (indexing) return;
+    const current = ++operation.epoch;
+    setIndexing(true);
+    setError("");
+    try {
+      await api.brainIndex();
+      if (current === operation.epoch) setIndexed(true);
+    } catch (err) {
+      if (current === operation.epoch) setError(err instanceof Error ? err.message : "Indexing failed.");
+    } finally {
+      if (current === operation.epoch) setIndexing(false);
+    }
+  }
+
   function handleAddAnother() {
+    operation.epoch++;
+    setSavedPath("");
+    setIndexed(undefined);
+    setIndexing(false);
     setContent("");
     setTitle("");
     setType("");
@@ -88,144 +128,28 @@ export function AddPanel({
     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>
+      <AddForm
+        state={state}
+        draft={{ content, title, type, tags }}
+        knownTypes={knownTypes}
+        error={error}
+        savedPath={savedPath}
+        indexed={indexed}
+        indexing={indexing}
+        contentRef={contentRef}
+        onDraft={(patch) => {
+          if (patch.content !== undefined) setContent(patch.content);
+          if (patch.title !== undefined) setTitle(patch.title);
+          if (patch.type !== undefined) setType(patch.type);
+          if (patch.tags !== undefined) setTags(patch.tags);
+        }}
+        onSave={() => void handleSave()}
+        onRetryIndex={() => void retryIndex()}
+        onAddAnother={handleAddAnother}
+        onClose={onClose}
+      />
     </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

@@ -4,7 +4,8 @@ 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 type { BrainSearchHit } from "../../lib/api-client.js";
+import { useBrainApi } from "../../root-context.js";
 import { parseSnippet } from "../../lib/search-snippet.js";
 import { cn } from "../../lib/utils.js";
 
@@ -22,8 +23,10 @@ export function SearchPanel({
   open: boolean;
   onClose: () => void;
 }) {
+  const api = useBrainApi();
   const [query, setQuery] = useState("");
   const [state, setState] = useState<State>("idle");
+  const [resultQuery, setResultQuery] = useState("");
   const [results, setResults] = useState<BrainSearchHit[]>([]);
   const [warnings, setWarnings] = useState<string[]>([]);
   const [error, setError] = useState("");
@@ -31,15 +34,40 @@ export function SearchPanel({
 
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const controllerRef = useRef<AbortController | null>(null);
 
   const openFile = useFileStore((s) => s.openFile);
   const setFilePanelOpen = useUIStore((s) => s.setFilePanelOpen);
 
   const trimmed = query.trim();
+  const currentResults = resultQuery === trimmed ? results : [];
 
-  const runSearch = useCallback(async (q: string) => {
+  const cancelSearch = useCallback(() => {
+    if (debounceRef.current !== null) clearTimeout(debounceRef.current);
+    debounceRef.current = null;
     controllerRef.current?.abort();
+    controllerRef.current = null;
+  }, []);
+
+  function changeQuery(value: string) {
+    if (value.trim() === trimmed) {
+      setQuery(value);
+      return;
+    }
+    // Invalidate before the debounce, including completions already queued.
+    cancelSearch();
+    setQuery(value);
+    setResultQuery("");
+    setResults([]);
+    setWarnings([]);
+    setError("");
+    setSelected(0);
+    setState("idle");
+  }
+
+  const runSearch = useCallback(async (q: string) => {
+    cancelSearch();
     const controller = new AbortController();
     controllerRef.current = controller;
 
@@ -50,6 +78,7 @@ export function SearchPanel({
         signal: controller.signal,
       });
       if (controller.signal.aborted) return;
+      setResultQuery(q);
       setResults(res.results);
       setWarnings(res.warnings ?? []);
       setSelected(0);
@@ -63,17 +92,17 @@ export function SearchPanel({
     } finally {
       if (controllerRef.current === controller) controllerRef.current = null;
     }
-  }, []);
+  }, [cancelSearch, api]);
 
   // 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;
+      cancelSearch();
       return;
     }
     setQuery("");
+    setResultQuery("");
     setResults([]);
     setWarnings([]);
     setError("");
@@ -82,27 +111,28 @@ export function SearchPanel({
     // 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]);
+    return () => { clearTimeout(t); cancelSearch(); };
+  }, [open, cancelSearch, api]);
 
   // Debounced search on typing.
   useEffect(() => {
     if (!open) return;
     if (trimmed.length < MIN_QUERY) {
-      controllerRef.current?.abort();
-      controllerRef.current = null;
+      cancelSearch();
       setResults([]);
       setWarnings([]);
       setState("idle");
       return;
     }
-    const t = setTimeout(() => void runSearch(trimmed), DEBOUNCE_MS);
-    return () => clearTimeout(t);
-  }, [open, trimmed, runSearch]);
+    debounceRef.current = setTimeout(() => void runSearch(trimmed), DEBOUNCE_MS);
+    return cancelSearch;
+  }, [open, trimmed, runSearch, cancelSearch]);
 
   function handleOpenResult(hit: BrainSearchHit) {
     // The file panel takes the same right-hand slot, so hand the screen over
     // rather than stacking two sheets.
+    if (resultQuery !== trimmed || state !== "done") return;
+    cancelSearch();
     onClose();
     setFilePanelOpen(true);
     void openFile(hit.path);
@@ -110,10 +140,10 @@ export function SearchPanel({
 
   function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-      if (results.length === 0) return;
+      if (currentResults.length === 0) return;
       e.preventDefault();
       const delta = e.key === "ArrowDown" ? 1 : -1;
-      const next = (selected + delta + results.length) % results.length;
+      const next = (selected + delta + currentResults.length) % currentResults.length;
       setSelected(next);
       listRef.current
         ?.querySelectorAll("[data-result]")
@@ -122,10 +152,10 @@ export function SearchPanel({
     }
     if (e.key === "Enter") {
       e.preventDefault();
-      const hit = results[selected];
+      const hit = currentResults[selected];
       if (hit) handleOpenResult(hit);
       // Enter with nothing selected jumps the debounce.
-      else if (trimmed.length >= MIN_QUERY) void runSearch(trimmed);
+      else if (trimmed.length >= MIN_QUERY && state !== "loading") void runSearch(trimmed);
     }
   }
 
@@ -139,7 +169,7 @@ export function SearchPanel({
             <input
               ref={inputRef}
               value={query}
-              onChange={(e) => setQuery(e.target.value)}
+              onChange={(e) => changeQuery(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"
@@ -153,7 +183,7 @@ export function SearchPanel({
             {query && state !== "loading" && (
               <button
                 onClick={() => {
-                  setQuery("");
+                  changeQuery("");
                   inputRef.current?.focus();
                 }}
                 className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground"
@@ -192,7 +222,7 @@ export function SearchPanel({
             <Placeholder>No results for “{trimmed}”.</Placeholder>
           ) : (
             <div className="divide-y divide-border/40">
-              {results.map((hit, i) => (
+              {currentResults.map((hit, i) => (
                 <ResultRow
                   key={hit.path}
                   hit={hit}