@saadnvd1/agent-os 0.3.673 → 0.3.680

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>
+    </>
+  );
+}

package/components/CommandPalette/conversations/EmptyState.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { Clock, SearchX, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function Hint() {
+  return (
+    <p className="text-muted-foreground px-4 py-10 text-center text-sm">
+      Search what you and your agents have said, in every chat.
+      <span className="mt-1 block text-xs">
+        Words match as you type. Quote a phrase to match it exactly.
+      </span>
+    </p>
+  );
+}
+
+export function Recent({
+  items,
+  onPick,
+  onClear,
+}: {
+  items: string[];
+  onPick: (q: string) => void;
+  onClear: () => void;
+}) {
+  if (!items.length) return <Hint />;
+  return (
+    <div className="p-1.5">
+      <div className="flex items-center justify-between px-2 pt-2 pb-1">
+        <p className="text-muted-foreground text-[11px] font-medium">Recent</p>
+        <button
+          type="button"
+          onClick={onClear}
+          className="text-muted-foreground hover:text-foreground flex h-6 items-center gap-1 text-[11px]"
+        >
+          <X className="h-3 w-3" /> Clear
+        </button>
+      </div>
+      {items.map((q) => (
+        <button
+          key={q}
+          type="button"
+          onClick={() => onPick(q)}
+          className="hover:bg-foreground/[0.05] flex min-h-11 w-full items-center gap-2.5 rounded-lg px-2 text-left text-sm md:min-h-9"
+        >
+          <Clock className="text-muted-foreground h-4 w-4 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">{q}</span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function Skeleton() {
+  return (
+    <div className="space-y-4 p-3" role="status" aria-label="Searching">
+      {[0, 1, 2].map((g) => (
+        <div key={g} className="space-y-2">
+          <div className="bg-foreground/[0.08] h-3 w-1/3 animate-pulse rounded" />
+          <div className="bg-foreground/[0.06] h-9 animate-pulse rounded-lg" />
+          <div className="bg-muted/40 h-9 w-5/6 animate-pulse rounded-lg" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function NoResults({
+  query,
+  scoped,
+  onWiden,
+}: {
+  query: string;
+  scoped: boolean;
+  onWiden: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-3 px-4 py-10 text-center">
+      <SearchX className="text-muted-foreground h-6 w-6" />
+      <p className="text-muted-foreground text-sm">
+        Nothing said matches “{query}”.
+      </p>
+      {scoped && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onWiden}
+          className="h-11 md:h-8"
+        >
+          Search all workspaces
+        </Button>
+      )}
+    </div>
+  );
+}

package/components/CommandPalette/conversations/Preview.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { ArrowLeft, CornerDownLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Markdown } from "@/components/Chat/Markdown";
+import { findRanges } from "@/components/Chat/find-highlight";
+import { useMessageContext, type ConversationGroup } from "@/data/search";
+import { cn } from "@/lib/utils";
+import { whenLabel } from "./format";
+
+// Marks `terms` in the preview with the browser's highlight registry, so the
+// markdown and code blocks inside are never rewritten. Without the API the
+// hit still scrolls into view and the result row still marks the words.
+function markTerms(root: HTMLElement, terms: string[]) {
+  if (typeof CSS === "undefined" || !("highlights" in CSS)) return () => {};
+  const ranges = terms.flatMap((t) => findRanges(root, t));
+  CSS.highlights.set("conv-search", new Highlight(...ranges));
+  return () => {
+    CSS.highlights.delete("conv-search");
+  };
+}
+
+// The message a result found with the ones around it, drawn as the chat draws
+// them. On a phone it has the whole dialog and a way back to the list.
+export function Preview({
+  group,
+  itemId,
+  terms,
+  onOpen,
+  onBack,
+}: {
+  group: ConversationGroup;
+  itemId: string;
+  terms: string[];
+  onOpen: () => void;
+  onBack?: () => void;
+}) {
+  const {
+    data: items,
+    isPending,
+    isError,
+  } = useMessageContext(group.sessionId, itemId);
+  const root = useRef<HTMLDivElement>(null);
+  const termKey = terms.join(" ");
+  useEffect(() => {
+    const el = root.current;
+    if (!el || !items) return;
+    el.querySelector("[data-hit]")?.scrollIntoView({ block: "center" });
+    return markTerms(el, termKey.split(" ").filter(Boolean));
+  }, [items, termKey]);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="border-foreground/[0.06] flex items-center gap-2 border-b px-3 py-2">
+        {onBack && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onBack}
+            aria-label="Back to results"
+            className="h-11 w-11 shrink-0"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        )}
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-medium">{group.name}</p>
+          <p className="text-muted-foreground truncate text-xs">
+            {[group.projectName, group.workspaceName]
+              .filter(Boolean)
+              .join(" · ")}
+          </p>
+        </div>
+        <Button
+          size="sm"
+          onClick={onOpen}
+          className="h-11 shrink-0 gap-1.5 md:h-8"
+        >
+          Open
+          <CornerDownLeft className="hidden h-3.5 w-3.5 md:inline" />
+        </Button>
+      </div>
+      <div
+        ref={root}
+        className="min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain p-5"
+      >
+        {isPending && (
+          <div className="space-y-3" aria-label="Loading preview">
+            {[0, 1, 2].map((i) => (
+              <div
+                key={i}
+                className="bg-foreground/[0.06] h-12 animate-pulse rounded-xl"
+              />
+            ))}
+          </div>
+        )}
+        {isError && (
+          <p className="text-muted-foreground py-6 text-center text-sm">
+            That message is gone.
+          </p>
+        )}
+        {items?.map((m) => (
+          <div
+            key={m.id}
+            {...(m.hit ? { "data-hit": "" } : {})}
+            className={cn(
+              "rounded-xl",
+              m.hit && "ring-primary/30 -m-2 p-2 ring-1",
+              m.role === "user" && "flex flex-col items-end"
+            )}
+          >
+            <span className="label-mono text-muted-foreground mb-1 flex items-center gap-1.5">
+              {m.role === "user" ? "You" : "Agent"}
+              {m.createdAt ? <span>· {whenLabel(m.createdAt)}</span> : null}
+            </span>
+            {m.role === "user" ? (
+              <div className="bg-foreground/[0.07] max-w-[85%] rounded-2xl rounded-br-md px-3.5 py-2 text-sm whitespace-pre-wrap">
+                {m.text}
+              </div>
+            ) : (
+              <Markdown text={m.text} />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}