@saadnvd1/agent-os 0.3.770 → 0.3.775

package/components/Artifacts/Compare/index.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowRight, ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Notice } from "@/components/ui/notice";
+import { Segmented } from "@/components/ui/segmented";
+import { useArtifactCompare } from "@/data/session-artifacts";
+import type { ArtifactVersion } from "@/lib/artifacts/actions";
+import { summaryLabel } from "@/lib/artifacts/compare/diff";
+import { relativeTime } from "@/lib/schedules/when";
+import { DiffView } from "./DiffView";
+import { SideBySide } from "./SideBySide";
+import { VersionPicker } from "./VersionPicker";
+
+type View = "changes" | "side" | "source";
+
+// The shown version against the one before it; the first version against
+// the one after.
+export function defaultPair(
+  versions: ArtifactVersion[],
+  shownId: string
+): { from: string; to: string } {
+  const i = Math.max(
+    0,
+    versions.findIndex((v) => v.id === shownId)
+  );
+  return i > 0
+    ? { from: versions[i - 1].id, to: versions[i].id }
+    : {
+        from: versions[0].id,
+        to: versions[Math.min(1, versions.length - 1)].id,
+      };
+}
+
+function Note({ v, label }: { v: ArtifactVersion; label: string }) {
+  return (
+    <div className="bg-muted/50 min-w-0 rounded-lg px-3 py-2 text-[12.5px]">
+      <div className="text-muted-foreground text-[11px]">
+        {label} · v{v.version} · {relativeTime(v.createdAt)}
+      </div>
+      <div className="break-words">
+        {v.note || (
+          <span className="text-muted-foreground">No note on this version</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Changes({
+  sessionId,
+  from,
+  to,
+  mode,
+  onSide,
+}: {
+  sessionId: string;
+  from: ArtifactVersion;
+  to: ArtifactVersion;
+  mode: "changes" | "source";
+  onSide: () => void;
+}) {
+  const q = useArtifactCompare(sessionId, from.id, to.id, mode);
+  if (q.isPending)
+    return <div className="bg-muted/40 m-3 h-40 animate-pulse rounded-lg" />;
+  if (q.isError)
+    return <p className="text-destructive p-4 text-sm">{q.error.message}</p>;
+  const d = q.data;
+  if ("tooLarge" in d)
+    return (
+      <div className="p-3">
+        <Notice
+          tone="warning"
+          action={
+            <Button variant="outline" className="h-11 md:h-8" onClick={onSide}>
+              Side by side
+            </Button>
+          }
+        >
+          These pages are {d.reason}. Compare them side by side instead.
+        </Notice>
+      </div>
+    );
+  const same = d.summary.added + d.summary.removed === 0;
+  return (
+    <div>
+      <div className="px-4 pt-3 text-[13px] font-medium">
+        {summaryLabel(d.summary)}
+        <span className="text-muted-foreground font-normal">
+          {mode === "changes" ? " · visible text" : " · HTML source"}
+        </span>
+      </div>
+      {same ? (
+        <p className="text-muted-foreground p-4 text-sm">
+          {mode === "changes"
+            ? "The visible text is the same. Look at Side by side or Source for styling and script changes."
+            : "The source is identical."}
+        </p>
+      ) : (
+        <DiffView lines={d.lines} wrap={mode === "changes"} />
+      )}
+    </div>
+  );
+}
+
+// Two versions of a page: what changed in its text, side by side, or in its
+// HTML. Owner's viewer only; never offered on a share or public link.
+export function ArtifactCompare({
+  sessionId,
+  versions,
+  shownId,
+  onClose,
+}: {
+  sessionId: string;
+  versions: ArtifactVersion[];
+  shownId: string;
+  onClose: () => void;
+}) {
+  const [pair, setPair] = useState(() => defaultPair(versions, shownId));
+  const [view, setView] = useState<View>("changes");
+  const from = versions.find((v) => v.id === pair.from) ?? versions[0];
+  const to =
+    versions.find((v) => v.id === pair.to) ?? versions[versions.length - 1];
+  const [a, b] = from.version <= to.version ? [from, to] : [to, from];
+
+  return (
+    <div className="@container flex h-full min-w-0 flex-col">
+      <div className="flex flex-col gap-3 border-b px-3 py-3 sm:px-4">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Back to the page"
+            onClick={onClose}
+            className="-ml-1 h-11 w-11 shrink-0 md:h-8 md:w-8"
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <div className="text-[13px] font-medium">Compare versions</div>
+        </div>
+        <div className="flex items-end gap-2">
+          <VersionPicker
+            name="From"
+            value={from.id}
+            versions={versions}
+            onChange={(id) => setPair({ ...pair, from: id })}
+          />
+          <ArrowRight className="text-muted-foreground mb-3.5 h-4 w-4 shrink-0 md:mb-2.5" />
+          <VersionPicker
+            name="To"
+            value={to.id}
+            versions={versions}
+            onChange={(id) => setPair({ ...pair, to: id })}
+          />
+        </div>
+        <div className="grid gap-2 @xl:grid-cols-2">
+          <Note v={a} label="Before" />
+          <Note v={b} label="After" />
+        </div>
+        <Segmented
+          label="Comparison"
+          value={view}
+          onChange={setView}
+          options={[
+            { value: "changes", label: "Changes" },
+            { value: "side", label: "Side by side" },
+            { value: "source", label: "Source" },
+          ]}
+        />
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto">
+        {from.id === to.id ? (
+          <p className="text-muted-foreground p-4 text-sm">
+            Pick two different versions.
+          </p>
+        ) : view === "side" ? (
+          <SideBySide from={a} to={b} />
+        ) : (
+          <Changes
+            sessionId={sessionId}
+            from={a}
+            to={b}
+            mode={view === "source" ? "source" : "changes"}
+            onSide={() => setView("side")}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/components/Chat/Messages.tsx

@@ -29,6 +29,7 @@ import { Markdown } from "./Markdown";
 import { openSessionLink } from "./session-link";
 import { TurnCopy } from "./TurnCopy";
 import { UndoButton } from "./Undo";
+import { ShareFromHere } from "./ShareFromHere";
 import { useRowState } from "./rowState";
 import { useBookmarkChat } from "@/components/Bookmarks/context";
 import { ChatItemContext } from "./itemContext";
@@ -280,6 +281,7 @@ export function UserMessage({
         <div className="-mr-1.5 flex items-center">
           {onUndo && <UndoButton onClick={onUndo} />}
           <ExportFromHere itemId={item.id} />
+          <ShareFromHere itemId={item.id} />
           <BookmarkButton itemId={item.id} />
         </div>
       )}
@@ -325,6 +327,10 @@ export function AssistantMessage({
                   <Quote className="h-3.5 w-3.5" />
                 </button>
               )}
+              <ShareFromHere
+                itemId={item.id}
+                className="text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7"
+              />
             </div>
             <BookmarkButton itemId={item.id} />
           </div>

package/components/Chat/ShareFromHere.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Share2 } from "lucide-react";
+import { useBookmarkChat } from "@/components/Bookmarks/context";
+import { shareUiActions } from "@/stores/shareUi";
+
+// Opens the share dialog on the part of the chat from this message to the latest.
+export function ShareFromHere({
+  itemId,
+  className,
+}: {
+  itemId: string;
+  className?: string;
+}) {
+  const chat = useBookmarkChat();
+  if (!chat) return null;
+  return (
+    <button
+      type="button"
+      aria-label="Share from here"
+      title="Share from here"
+      onClick={(e) => {
+        e.stopPropagation();
+        shareUiActions.open({
+          kind: "chat",
+          sessionId: chat.sessionId,
+          title: "",
+          fromId: itemId,
+        });
+      }}
+      className={
+        className ??
+        "text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] flex h-11 w-11 shrink-0 items-center justify-center rounded-md opacity-40 group-hover:opacity-100 focus-visible:opacity-100 md:h-7 md:w-7 md:opacity-0"
+      }
+    >
+      <Share2 className="h-3.5 w-3.5" />
+    </button>
+  );
+}

package/components/CommandPalette/CommandPalette.tsx

@@ -13,10 +13,11 @@ 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, and (Tab) what was said in any chat.
+// features offer, found by typing, in tabs (Tab cycles them) that include
+// what was said in any chat.
 export function CommandPalette() {
-  const { open, mode } = useSnapshot(paletteUi);
-  const wide = mode === "conversations";
+  const { open, tab } = useSnapshot(paletteUi);
+  const wide = tab === "conversations";
   return (
     <Dialog open={open} onOpenChange={paletteActions.setOpen}>
       <DialogContent
@@ -37,7 +38,7 @@ export function CommandPalette() {
             ? "Search what was said in every conversation"
             : "Search for an action, a session or a conversation"}
         </DialogDescription>
-        {/* Mounted per opening and per mode, so each starts from its own query. */}
+        {/* Mounted per opening and per side, so each starts from its own query. */}
         {wide ? (
           <ConversationSearch key="conversations" />
         ) : (

package/components/CommandPalette/CommandsBody.tsx

@@ -2,84 +2,84 @@
 
 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 { ArrowRight, Search } from "lucide-react";
+import { type PaletteCommand, type PaletteTab } from "@/lib/palette/registry";
+import {
+  allSections,
+  emptySections,
+  withSeeAll,
+  tabItems,
+  type Section,
+} from "@/lib/palette/sections";
+import { cycleTab, parsePrefix } from "@/lib/palette/tabs";
+import { loadUsage, noteUse } from "@/lib/palette/usage";
 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";
+import { PaletteRows } from "./PaletteRows";
+import { PaletteTabs } from "./PaletteTabs";
+import { useConversationRows } from "./useConversationRows";
 
-// 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;
+const PLACEHOLDER: Record<PaletteTab, string> = {
+  all: "Search everything…",
+  sessions: "Search sessions…",
+  commands: "Search commands…",
+  settings: "Search settings…",
+  conversations: "",
+};
+// A tab's rows are cut here, so a long list stays quick to draw.
+const TAB_LIMIT = 100;
 
 export function CommandsBody() {
   const commands = usePaletteList();
   // Subscribed for changes, read raw: its items are held by ref.
   useSnapshot(paletteUi);
   const picker = paletteUi.picker;
+  const tab = paletteUi.tab;
   const all = picker?.items ?? commands;
   const [query, setQuery] = useState(paletteUi.query);
   const [active, setActive] = useState(0);
+  // The tab a `>` or `@` chose, which Backspace on an empty query undoes.
+  const [prefixTab, setPrefixTab] = useState<PaletteTab | null>(null);
+  const [usage, setUsage] = useState(loadUsage);
+  const [now] = useState(Date.now);
   const listRef = useRef<HTMLDivElement>(null);
+  const q = query.trim();
 
-  // 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 conversations = useConversationRows(query, !picker && tab === "all");
 
-  const results = useMemo(() => {
-    if (query.trim()) return [...matchCommands(all, query), ...conversations];
+  const sections = useMemo<Section[]>(() => {
     // 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]);
+    if (picker) return [{ name: "", items: all }];
+    if (tab === "all") {
+      if (!q) return emptySections(all, usage);
+      const found = withSeeAll(
+        allSections(all, query, usage, now),
+        (to) => paletteActions.setTab(to, query),
+        ArrowRight
+      );
+      return conversations.length
+        ? [...found, { name: "Conversations", items: conversations }]
+        : found;
+    }
+    const items = tabItems(all, tab, query, usage, now).slice(0, TAB_LIMIT);
+    if (q) return [{ name: "", items }];
+    // Without a query, a long tab reads better under its own headings.
+    const groups: Section[] = [];
+    for (const c of items) {
+      let g = groups.find((x) => x.name === c.group);
+      if (!g) groups.push((g = { name: c.group, items: [] }));
+      g.items.push(c);
+    }
+    return groups;
+  }, [all, tab, q, query, usage, now, picker, conversations]);
+  const results = useMemo(() => sections.flatMap((s) => s.items), [sections]);
+
+  // A new tab starts at its top.
+  const [shownTab, setShownTab] = useState(tab);
+  if (shownTab !== tab) {
+    setShownTab(tab);
+    setActive(0);
+  }
   const highlighted = Math.min(active, Math.max(results.length - 1, 0));
 
   useEffect(() => {
@@ -88,23 +88,29 @@ export function CommandsBody() {
       ?.scrollIntoView({ block: "nearest" });
   }, [highlighted]);
 
+  const goTo = (next: PaletteTab) => {
+    setPrefixTab(null);
+    paletteActions.setTab(next, query);
+  };
+
   const run = (c: PaletteCommand | undefined) => {
     if (!c) return;
     if (c.keepOpen) return c.run();
+    if (!picker && !c.id.startsWith("conversation:")) setUsage(noteUse(c.id));
     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 });
-  });
+  const onChange = (value: string) => {
+    const prefix = !picker && !query ? parsePrefix(value) : null;
+    setActive(0);
+    if (prefix) {
+      setQuery(prefix.text);
+      setPrefixTab(prefix.tab);
+      paletteActions.setTab(prefix.tab, prefix.text);
+    } else setQuery(value);
+  };
 
   return (
     <>
@@ -113,10 +119,7 @@ export function CommandsBody() {
         <input
           autoFocus
           value={query}
-          onChange={(e) => {
-            setQuery(e.target.value);
-            setActive(0);
-          }}
+          onChange={(e) => onChange(e.target.value)}
           onKeyDown={(e) => {
             if (e.key === "ArrowDown" || e.key === "ArrowUp") {
               e.preventDefault();
@@ -126,10 +129,18 @@ export function CommandsBody() {
               );
             } else if (e.key === "Tab" && !picker) {
               e.preventDefault();
-              paletteActions.setMode("conversations", query);
+              goTo(cycleTab(tab, e.shiftKey ? -1 : 1));
             } else if (e.key === "Enter") {
               e.preventDefault();
               run(results[highlighted]);
+            } else if (
+              e.key === "Backspace" &&
+              !query &&
+              prefixTab &&
+              tab === prefixTab
+            ) {
+              e.preventDefault();
+              goTo("all");
             } else if (
               picker &&
               (e.metaKey || e.ctrlKey) &&
@@ -139,21 +150,19 @@ export function CommandsBody() {
               run(picker.items[Number(e.key) - 1]);
             }
           }}
-          placeholder={
-            picker?.placeholder ?? "Search actions, sessions and conversations…"
-          }
-          aria-label={
-            picker?.placeholder ?? "Search actions, sessions and conversations"
-          }
+          placeholder={picker?.placeholder ?? PLACEHOLDER[tab]}
+          aria-label={picker?.placeholder ?? PLACEHOLDER[tab].replace("…", "")}
           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>
+      {!picker && <PaletteTabs tab={tab} onSelect={goTo} />}
       <div
         ref={listRef}
         role="listbox"
+        aria-labelledby={picker ? undefined : `palette-tab-${tab}`}
         className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5"
       >
         {results.length === 0 && (
@@ -161,55 +170,12 @@ export function CommandsBody() {
             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>
-        ))}
+        <PaletteRows
+          sections={sections}
+          highlighted={highlighted}
+          onHover={setActive}
+          onRun={run}
+        />
       </div>
     </>
   );

package/components/CommandPalette/PaletteRows.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import type { PaletteCommand } from "@/lib/palette/registry";
+import type { Section } from "@/lib/palette/sections";
+import { cn } from "@/lib/utils";
+
+// The sections' rows under their headings, numbered in order so the caller's
+// highlight and Enter agree with what's drawn.
+export function PaletteRows({
+  sections,
+  highlighted,
+  onHover,
+  onRun,
+}: {
+  sections: Section[];
+  highlighted: number;
+  onHover: (i: number) => void;
+  onRun: (c: PaletteCommand) => void;
+}) {
+  let index = 0;
+  return (
+    <>
+      {sections.map((s) => (
+        <div key={s.name || "results"} className="mb-1">
+          {s.name && (
+            <p className="text-muted-foreground px-2 pt-2 pb-1 text-[11px] font-medium">
+              {s.name}
+            </p>
+          )}
+          {s.items.map((c) => {
+            const i = index++;
+            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 && onHover(i)}
+                onClick={() => onRun(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",
+                  c.id.startsWith("see-all:") && "text-muted-foreground"
+                )}
+              >
+                {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={cn(
+                        "block truncate text-xs",
+                        c.status === "waiting"
+                          ? "text-amber-700 dark:text-amber-400"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      {c.detail}
+                    </span>
+                  )}
+                </span>
+                {c.hint && (
+                  <kbd className="text-muted-foreground hidden shrink-0 font-mono text-[11px] sm:inline">
+                    {c.hint}
+                  </kbd>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </>
+  );
+}