@saadnvd1/agent-os 0.3.672 → 0.3.678

package/components/CommandPalette/CommandPalette.tsx

@@ -1,182 +1,49 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
 import { useSnapshot } from "valtio";
-import { Search, type LucideIcon } from "lucide-react";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { matchCommands, type PaletteCommand } from "@/lib/palette/registry";
 import { cn } from "@/lib/utils";
-import { usePaletteList } from "@/hooks/usePaletteCommands";
 import { paletteActions, paletteUi } from "@/stores/palette";
-
-// How many of a long group (sessions) show before a query narrows it.
-const GROUP_PREVIEW = 8;
+import { CommandsBody } from "./CommandsBody";
+import { ConversationSearch } from "./conversations/ConversationSearch";
 
 // ⌘K anywhere, or the header button on a phone: every action the open
-// features offer, found by typing.
+// features offer, found by typing, and (Tab) what was said in any chat.
 export function CommandPalette() {
-  const { open } = useSnapshot(paletteUi);
+  const { open, mode } = useSnapshot(paletteUi);
+  const wide = mode === "conversations";
   return (
     <Dialog open={open} onOpenChange={paletteActions.setOpen}>
       <DialogContent
         showCloseButton={false}
         // Sized to what the keyboard leaves visible (--app-height), not vh.
-        className="top-[max(env(safe-area-inset-top),1rem)] flex max-h-[min(calc(var(--app-height,100dvh)-env(safe-area-inset-top)-2rem),560px)] translate-y-0 flex-col gap-0 overflow-hidden p-0 sm:top-[15vh] sm:max-h-[min(calc(var(--app-height,100dvh)-15vh-1rem),560px)] sm:max-w-lg"
+        className={cn(
+          "top-[max(env(safe-area-inset-top),1rem)] flex translate-y-0 flex-col gap-0 overflow-hidden p-0 sm:top-[15vh]",
+          wide
+            ? "h-[calc(var(--app-height,100dvh)-env(safe-area-inset-top)-2rem)] sm:h-[min(calc(var(--app-height,100dvh)-15vh-1rem),600px)] sm:max-w-4xl"
+            : "max-h-[min(calc(var(--app-height,100dvh)-env(safe-area-inset-top)-2rem),560px)] sm:max-h-[min(calc(var(--app-height,100dvh)-15vh-1rem),560px)] sm:max-w-lg"
+        )}
       >
-        <DialogTitle className="sr-only">Command palette</DialogTitle>
+        <DialogTitle className="sr-only">
+          {wide ? "Search conversations" : "Command palette"}
+        </DialogTitle>
         <DialogDescription className="sr-only">
-          Search for an action or a session
+          {wide
+            ? "Search what was said in every conversation"
+            : "Search for an action, a session or a conversation"}
         </DialogDescription>
-        {/* Mounted per opening, so each starts with an empty query. */}
-        <PaletteBody />
+        {/* Mounted per opening and per mode, so each starts from its own query. */}
+        {wide ? (
+          <ConversationSearch key="conversations" />
+        ) : (
+          <CommandsBody key="commands" />
+        )}
       </DialogContent>
     </Dialog>
   );
 }
-
-function PaletteBody() {
-  const commands = usePaletteList();
-  // Subscribed for changes, read raw: its items are held by ref.
-  useSnapshot(paletteUi);
-  const picker = paletteUi.picker;
-  const all = picker?.items ?? commands;
-  const [query, setQuery] = useState("");
-  const [active, setActive] = useState(0);
-  const listRef = useRef<HTMLDivElement>(null);
-
-  const results = useMemo(() => {
-    if (query.trim()) return matchCommands(all, query);
-    // A picker shows every choice; it's the whole list.
-    if (picker) return all;
-    // With no query, long groups are cut short so every group shows.
-    const seen = new Map<string, number>();
-    return all.filter((c) => {
-      const n = (seen.get(c.group) ?? 0) + 1;
-      seen.set(c.group, n);
-      return n <= GROUP_PREVIEW;
-    });
-  }, [all, query, picker]);
-  const highlighted = Math.min(active, Math.max(results.length - 1, 0));
-
-  useEffect(() => {
-    listRef.current
-      ?.querySelector(`[data-index="${highlighted}"]`)
-      ?.scrollIntoView({ block: "nearest" });
-  }, [highlighted]);
-
-  const run = (c: PaletteCommand | undefined) => {
-    if (!c) return;
-    paletteActions.setOpen(false);
-    // After the dialog lets go of focus, so what it opens can take it.
-    setTimeout(() => c.run(), 0);
-  };
-
-  // Under their headings with no query; one ranked list with one.
-  const groups: { name: string; items: { c: PaletteCommand; i: number }[] }[] =
-    [];
-  results.forEach((c, i) => {
-    const name = query.trim() ? "" : c.group;
-    let g = groups.find((x) => x.name === name);
-    if (!g) groups.push((g = { name, items: [] }));
-    g.items.push({ c, i });
-  });
-
-  return (
-    <>
-      <div className="border-foreground/[0.06] flex items-center gap-2 border-b px-3">
-        <Search className="text-muted-foreground h-4 w-4 shrink-0" />
-        <input
-          autoFocus
-          value={query}
-          onChange={(e) => {
-            setQuery(e.target.value);
-            setActive(0);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-              e.preventDefault();
-              const n = results.length || 1;
-              setActive(
-                (highlighted + (e.key === "ArrowDown" ? 1 : -1) + n) % n
-              );
-            } else if (e.key === "Enter") {
-              e.preventDefault();
-              run(results[highlighted]);
-            } else if (
-              picker &&
-              (e.metaKey || e.ctrlKey) &&
-              /^[1-9]$/.test(e.key)
-            ) {
-              e.preventDefault();
-              run(picker.items[Number(e.key) - 1]);
-            }
-          }}
-          placeholder={picker?.placeholder ?? "Search actions and sessions…"}
-          aria-label={picker?.placeholder ?? "Search actions and sessions"}
-          className="placeholder:text-muted-foreground h-12 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm"
-        />
-        <kbd className="text-muted-foreground hidden font-mono text-[10px] sm:inline">
-          esc
-        </kbd>
-      </div>
-      <div
-        ref={listRef}
-        role="listbox"
-        className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5"
-      >
-        {results.length === 0 && (
-          <p className="text-muted-foreground py-8 text-center text-sm">
-            Nothing matches.
-          </p>
-        )}
-        {groups.map((g) => (
-          <div key={g.name || "results"} className="mb-1">
-            {g.name && (
-              <p className="text-muted-foreground px-2 pt-2 pb-1 text-[11px] font-medium">
-                {g.name}
-              </p>
-            )}
-            {g.items.map(({ c, i }) => {
-              const Icon = c.icon as LucideIcon | undefined;
-              return (
-                <button
-                  key={c.id}
-                  type="button"
-                  role="option"
-                  aria-selected={i === highlighted}
-                  data-index={i}
-                  onMouseMove={() => i !== highlighted && setActive(i)}
-                  onClick={() => run(c)}
-                  className={cn(
-                    "flex min-h-11 w-full items-center gap-2.5 rounded-lg px-2 text-left text-sm md:min-h-9",
-                    i === highlighted && "bg-primary/10"
-                  )}
-                >
-                  {Icon && (
-                    <Icon className="text-muted-foreground h-4 w-4 shrink-0" />
-                  )}
-                  <span className="min-w-0 flex-1 truncate">{c.title}</span>
-                  {query.trim() && (
-                    <span className="text-muted-foreground shrink-0 text-xs">
-                      {c.group}
-                    </span>
-                  )}
-                  {c.hint && (
-                    <kbd className="text-muted-foreground hidden shrink-0 font-mono text-[11px] sm:inline">
-                      {c.hint}
-                    </kbd>
-                  )}
-                </button>
-              );
-            })}
-          </div>
-        ))}
-      </div>
-    </>
-  );
-}

package/components/CommandPalette/CommandsBody.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useSnapshot } from "valtio";
+import { MessagesSquare, Search, type LucideIcon } from "lucide-react";
+import { matchCommands, type PaletteCommand } from "@/lib/palette/registry";
+import { cn } from "@/lib/utils";
+import { MIN_QUERY, useConversationSearch } from "@/data/search";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
+import { usePaletteList } from "@/hooks/usePaletteCommands";
+import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
+import { paletteActions, paletteUi } from "@/stores/palette";
+import { plain } from "./conversations/format";
+import { useOpenHit } from "./conversations/useOpenHit";
+
+// How many of a long group (sessions) show before a query narrows it.
+const GROUP_PREVIEW = 8;
+// Conversation matches offered beside the commands.
+const CONVERSATIONS = 3;
+
+export function CommandsBody() {
+  const commands = usePaletteList();
+  // Subscribed for changes, read raw: its items are held by ref.
+  useSnapshot(paletteUi);
+  const picker = paletteUi.picker;
+  const all = picker?.items ?? commands;
+  const [query, setQuery] = useState(paletteUi.query);
+  const [active, setActive] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Conversations that match, under the commands (never in a picker).
+  const { workspace } = useSelectedWorkspace();
+  const debounced = useDebouncedValue(query.trim(), 150);
+  const openHit = useOpenHit();
+  const { data: found } = useConversationSearch(
+    debounced,
+    workspace?.id ?? "all",
+    {
+      limit: CONVERSATIONS,
+      enabled: !picker,
+    }
+  );
+  const conversations = useMemo<PaletteCommand[]>(() => {
+    const q = query.trim();
+    if (picker || q.length < MIN_QUERY || q !== debounced) return [];
+    const hits = (found?.groups ?? []).flatMap((group) =>
+      group.hits.slice(0, 1).map((hit) => ({
+        id: `conversation:${group.sessionId}:${hit.itemId}`,
+        title: group.name,
+        detail: plain(hit.snippet),
+        group: "Conversations",
+        icon: MessagesSquare,
+        run: () => openHit(group, hit),
+        keepOpen: true,
+      }))
+    );
+    return [
+      ...hits,
+      {
+        id: "conversation:all",
+        title: `Search all conversations for “${q}”`,
+        group: "Conversations",
+        icon: Search,
+        hint: "tab",
+        keepOpen: true,
+        run: () => paletteActions.setMode("conversations", q),
+      },
+    ];
+  }, [found, query, debounced, picker, openHit]);
+
+  const results = useMemo(() => {
+    if (query.trim()) return [...matchCommands(all, query), ...conversations];
+    // A picker shows every choice; it's the whole list.
+    if (picker) return all;
+    // With no query, long groups are cut short so every group shows.
+    const seen = new Map<string, number>();
+    return all.filter((c) => {
+      const n = (seen.get(c.group) ?? 0) + 1;
+      seen.set(c.group, n);
+      return n <= GROUP_PREVIEW;
+    });
+  }, [all, query, picker, conversations]);
+  const highlighted = Math.min(active, Math.max(results.length - 1, 0));
+
+  useEffect(() => {
+    listRef.current
+      ?.querySelector(`[data-index="${highlighted}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [highlighted]);
+
+  const run = (c: PaletteCommand | undefined) => {
+    if (!c) return;
+    if (c.keepOpen) return c.run();
+    paletteActions.setOpen(false);
+    // After the dialog lets go of focus, so what it opens can take it.
+    setTimeout(() => c.run(), 0);
+  };
+
+  // Under their headings with no query; one ranked list with one.
+  const groups: { name: string; items: { c: PaletteCommand; i: number }[] }[] =
+    [];
+  results.forEach((c, i) => {
+    const name = query.trim() && c.group !== "Conversations" ? "" : c.group;
+    let g = groups.find((x) => x.name === name);
+    if (!g) groups.push((g = { name, items: [] }));
+    g.items.push({ c, i });
+  });
+
+  return (
+    <>
+      <div className="border-foreground/[0.06] flex items-center gap-2 border-b px-3">
+        <Search className="text-muted-foreground h-4 w-4 shrink-0" />
+        <input
+          autoFocus
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setActive(0);
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+              e.preventDefault();
+              const n = results.length || 1;
+              setActive(
+                (highlighted + (e.key === "ArrowDown" ? 1 : -1) + n) % n
+              );
+            } else if (e.key === "Tab" && !picker) {
+              e.preventDefault();
+              paletteActions.setMode("conversations", query);
+            } else if (e.key === "Enter") {
+              e.preventDefault();
+              run(results[highlighted]);
+            } else if (
+              picker &&
+              (e.metaKey || e.ctrlKey) &&
+              /^[1-9]$/.test(e.key)
+            ) {
+              e.preventDefault();
+              run(picker.items[Number(e.key) - 1]);
+            }
+          }}
+          placeholder={
+            picker?.placeholder ?? "Search actions, sessions and conversations…"
+          }
+          aria-label={
+            picker?.placeholder ?? "Search actions, sessions and conversations"
+          }
+          className="placeholder:text-muted-foreground h-12 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm"
+        />
+        <kbd className="text-muted-foreground hidden font-mono text-[10px] sm:inline">
+          esc
+        </kbd>
+      </div>
+      <div
+        ref={listRef}
+        role="listbox"
+        className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5"
+      >
+        {results.length === 0 && (
+          <p className="text-muted-foreground py-8 text-center text-sm">
+            Nothing matches.
+          </p>
+        )}
+        {groups.map((g) => (
+          <div key={g.name || "results"} className="mb-1">
+            {g.name && (
+              <p className="text-muted-foreground px-2 pt-2 pb-1 text-[11px] font-medium">
+                {g.name}
+              </p>
+            )}
+            {g.items.map(({ c, i }) => {
+              const Icon = c.icon as LucideIcon | undefined;
+              return (
+                <button
+                  key={c.id}
+                  type="button"
+                  role="option"
+                  aria-selected={i === highlighted}
+                  data-index={i}
+                  onMouseMove={() => i !== highlighted && setActive(i)}
+                  onClick={() => run(c)}
+                  className={cn(
+                    "flex min-h-11 w-full items-center gap-2.5 rounded-lg px-2 text-left text-sm md:min-h-9",
+                    i === highlighted && "bg-primary/10"
+                  )}
+                >
+                  {Icon && (
+                    <Icon className="text-muted-foreground h-4 w-4 shrink-0" />
+                  )}
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate">{c.title}</span>
+                    {c.detail && (
+                      <span className="text-muted-foreground block truncate text-xs">
+                        {c.detail}
+                      </span>
+                    )}
+                  </span>
+                  {query.trim() && c.group !== "Conversations" && (
+                    <span className="text-muted-foreground shrink-0 text-xs">
+                      {c.group}
+                    </span>
+                  )}
+                  {c.hint && (
+                    <kbd className="text-muted-foreground hidden shrink-0 font-mono text-[11px] sm:inline">
+                      {c.hint}
+                    </kbd>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

package/components/CommandPalette/conversations/ConversationSearch.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Loader2, Search } from "lucide-react";
+import { useSnapshot } from "valtio";
+import { cn } from "@/lib/utils";
+import { MIN_QUERY, useConversationSearch } from "@/data/search";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
+import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
+import { useViewport } from "@/hooks/useViewport";
+import { paletteActions, paletteUi } from "@/stores/palette";
+import { NoResults, Recent, Skeleton } from "./EmptyState";
+import { Preview } from "./Preview";
+import { ResultList, flatten } from "./ResultList";
+import { loadRecent, saveRecent, withRecent } from "./recent";
+import { useOpenHit } from "./useOpenHit";
+
+// ⌘K's second mode: what was said in any chat, found as you type. Results on
+// the left, the selected message in its conversation on the right; a phone
+// shows the list, and a tap shows the message.
+export function ConversationSearch() {
+  const { query: seed } = useSnapshot(paletteUi);
+  const { isMobile } = useViewport();
+  const { workspace } = useSelectedWorkspace();
+  const [text, setText] = useState(seed);
+  const [all, setAll] = useState(false);
+  const [recent, setRecent] = useState(loadRecent);
+  const [active, setActive] = useState(0);
+  const [previewing, setPreviewing] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
+  const open = useOpenHit();
+
+  const q = useDebouncedValue(text.trim(), 150);
+  const scope = all || !workspace ? "all" : workspace.id;
+  const searching = q.length >= MIN_QUERY;
+  const { data, isPending, isFetching, isError } = useConversationSearch(
+    q,
+    scope,
+    { enabled: searching }
+  );
+  const groups = useMemo(
+    () => (searching ? (data?.groups ?? []) : []),
+    [searching, data]
+  );
+  const hits = useMemo(() => flatten(groups), [groups]);
+  const highlighted = Math.min(active, Math.max(hits.length - 1, 0));
+  const current = hits[highlighted];
+  // The text typed is ahead of the results shown while the debounce runs.
+  const stale = text.trim() !== q || (searching && isFetching);
+
+  // New results start at the top.
+  const [shown, setShown] = useState(data);
+  if (shown !== data) {
+    setShown(data);
+    setActive(0);
+  }
+  useEffect(() => {
+    listRef.current
+      ?.querySelector(`[data-index="${highlighted}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, [highlighted]);
+
+  const openHit = (i: number) => {
+    const h = hits[i];
+    if (!h) return;
+    saveRecent(withRecent(recent, text));
+    open(h.group, h.hit);
+  };
+  const pick = (i: number) => {
+    setActive(i);
+    if (isMobile) setPreviewing(true);
+    else openHit(i);
+  };
+
+  const showPreview = !!current && (!isMobile || previewing);
+  const showList = !isMobile || !previewing;
+
+  return (
+    <>
+      {showList && (
+        <div className="border-foreground/[0.06] flex flex-col border-b">
+          <div className="flex items-center gap-2 px-3">
+            <Search className="text-muted-foreground h-4 w-4 shrink-0" />
+            <input
+              autoFocus
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                  e.preventDefault();
+                  const n = hits.length || 1;
+                  setActive(
+                    (highlighted + (e.key === "ArrowDown" ? 1 : -1) + n) % n
+                  );
+                } else if (e.key === "Enter") {
+                  e.preventDefault();
+                  openHit(highlighted);
+                } else if (e.key === "Tab") {
+                  e.preventDefault();
+                  paletteActions.setMode("commands", text);
+                }
+              }}
+              placeholder="Search every conversation…"
+              aria-label="Search every conversation"
+              className="placeholder:text-muted-foreground h-12 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm"
+            />
+            {stale && searching && (
+              <Loader2 className="text-muted-foreground h-3.5 w-3.5 shrink-0 animate-spin" />
+            )}
+            <kbd className="text-muted-foreground hidden font-mono text-[10px] sm:inline">
+              esc
+            </kbd>
+          </div>
+          {workspace && (
+            <div className="flex items-center gap-2 px-3 pb-2">
+              <div className="flex overflow-hidden rounded-md border text-xs">
+                {(
+                  [
+                    [false, workspace.name],
+                    [true, "All workspaces"],
+                  ] as const
+                ).map(([value, label]) => (
+                  <button
+                    key={String(value)}
+                    type="button"
+                    aria-pressed={all === value}
+                    onClick={() => setAll(value)}
+                    className={cn(
+                      "h-8 max-w-40 truncate px-3 md:h-7",
+                      all === value
+                        ? "bg-primary/10 text-foreground font-medium"
+                        : "text-muted-foreground hover:text-foreground"
+                    )}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      <div className="flex min-h-0 flex-1">
+        {showList && (
+          <div
+            ref={listRef}
+            role="listbox"
+            aria-label="Matches"
+            className={cn(
+              "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5",
+              current &&
+                "md:border-foreground/[0.06] md:flex-none md:basis-[44%] md:border-r"
+            )}
+          >
+            {data?.indexing != null && (
+              <p className="bg-muted/50 text-muted-foreground mx-1 mt-1 rounded-lg px-3 py-2 text-xs">
+                Still indexing older conversations (
+                {Math.round(data.indexing * 100)}%). Results fill in as it goes.
+              </p>
+            )}
+            {!searching && (
+              <Recent
+                items={recent}
+                onPick={setText}
+                onClear={() => {
+                  saveRecent([]);
+                  setRecent([]);
+                }}
+              />
+            )}
+            {searching && isPending && <Skeleton />}
+            {searching && isError && (
+              <p className="text-muted-foreground px-4 py-10 text-center text-sm">
+                Search isn’t answering. Try again in a moment.
+              </p>
+            )}
+            {searching &&
+              !isPending &&
+              !isError &&
+              hits.length === 0 &&
+              !stale && (
+                <NoResults
+                  query={q}
+                  scoped={scope !== "all"}
+                  onWiden={() => setAll(true)}
+                />
+              )}
+            <div className={cn(stale && "opacity-60 transition-opacity")}>
+              <ResultList
+                groups={groups}
+                active={highlighted}
+                onActive={setActive}
+                onPick={pick}
+              />
+            </div>
+            {data?.more && (
+              <p className="text-muted-foreground px-3 py-3 text-center text-xs">
+                Showing the best matches. Add a word to narrow it down.
+              </p>
+            )}
+          </div>
+        )}
+        {showPreview && current && (
+          <div className="flex min-w-0 flex-1 flex-col">
+            <Preview
+              key={`${current.group.sessionId}:${current.hit.itemId}`}
+              group={current.group}
+              itemId={current.hit.itemId}
+              terms={data?.terms ?? []}
+              onOpen={() => openHit(highlighted)}
+              onBack={isMobile ? () => setPreviewing(false) : undefined}
+            />
+          </div>
+        )}
+      </div>
+      <div className="border-foreground/[0.06] text-muted-foreground flex items-center gap-4 border-t px-3 py-2 text-[11px]">
+        <span className="hidden gap-4 sm:flex">
+          <span>
+            <kbd className="font-mono">↑↓</kbd> move
+          </span>
+          <span>
+            <kbd className="font-mono">↵</kbd> open
+          </span>
+          <span>
+            <kbd className="font-mono">tab</kbd> commands
+          </span>
+          <span>
+            <kbd className="font-mono">esc</kbd> close
+          </span>
+        </span>
+        <button
+          type="button"
+          onClick={() => paletteActions.setMode("commands", text)}
+          className="h-8 sm:hidden"
+        >
+          Commands
+        </button>
+        <span className="ml-auto font-mono">
+          {searching && data
+            ? `${groups.length} ${groups.length === 1 ? "chat" : "chats"} · ${data.tookMs} ms`
+            : ""}
+        </span>
+      </div>
+    </>
+  );
+}