@saadnvd1/agent-os 0.3.770 → 0.3.775

package/components/CommandPalette/PaletteTabs.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { PALETTE_TABS, type PaletteTab } from "@/lib/palette/registry";
+import { cn } from "@/lib/utils";
+
+// The palette's tabs. Tab and Shift-Tab in the input move between them, so
+// these keep out of the focus order and never take focus from it.
+export function PaletteTabs({
+  tab,
+  onSelect,
+}: {
+  tab: PaletteTab;
+  onSelect: (tab: PaletteTab) => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    ref.current
+      ?.querySelector('[aria-selected="true"]')
+      ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [tab]);
+  return (
+    <div
+      ref={ref}
+      role="tablist"
+      aria-label="Palette sections"
+      className="border-foreground/[0.06] flex shrink-0 scrollbar-none gap-1 overflow-x-auto border-b px-2 py-1.5"
+    >
+      {PALETTE_TABS.map((t) => (
+        <button
+          key={t.id}
+          type="button"
+          role="tab"
+          id={`palette-tab-${t.id}`}
+          aria-selected={t.id === tab}
+          tabIndex={-1}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => onSelect(t.id)}
+          className={cn(
+            "flex min-h-11 shrink-0 items-center rounded-lg px-3 text-sm whitespace-nowrap md:min-h-8 md:px-2.5 md:text-xs",
+            t.id === tab
+              ? "bg-primary/10 text-foreground font-medium"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          {t.label}
+        </button>
+      ))}
+    </div>
+  );
+}

package/components/CommandPalette/conversations/ConversationSearch.tsx

@@ -8,14 +8,16 @@ import { MIN_QUERY, useConversationSearch } from "@/data/search";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
 import { useViewport } from "@/hooks/useViewport";
+import { cycleTab } from "@/lib/palette/tabs";
 import { paletteActions, paletteUi } from "@/stores/palette";
+import { PaletteTabs } from "../PaletteTabs";
 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
+// ⌘K's Conversations tab: 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() {
@@ -97,7 +99,10 @@ export function ConversationSearch() {
                   openHit(highlighted);
                 } else if (e.key === "Tab") {
                   e.preventDefault();
-                  paletteActions.setMode("commands", text);
+                  paletteActions.setTab(
+                    cycleTab("conversations", e.shiftKey ? -1 : 1),
+                    text
+                  );
                 }
               }}
               placeholder="Search every conversation…"
@@ -111,8 +116,12 @@ export function ConversationSearch() {
               esc
             </kbd>
           </div>
+          <PaletteTabs
+            tab="conversations"
+            onSelect={(tab) => paletteActions.setTab(tab, text)}
+          />
           {workspace && (
-            <div className="flex items-center gap-2 px-3 pb-2">
+            <div className="flex items-center gap-2 px-3 py-2">
               <div className="flex overflow-hidden rounded-md border text-xs">
                 {(
                   [
@@ -222,19 +231,12 @@ export function ConversationSearch() {
             <kbd className="font-mono">↵</kbd> open
           </span>
           <span>
-            <kbd className="font-mono">tab</kbd> commands
+            <kbd className="font-mono">tab</kbd> next tab
           </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`

package/components/CommandPalette/useAppCommands.ts

@@ -23,6 +23,7 @@ import {
   Scale,
 } from "lucide-react";
 import type { Session } from "@/lib/db";
+import type { SessionStatus } from "@/components/views/types";
 import type { PaletteCommand } from "@/lib/palette/registry";
 import { useWorkspacesQuery } from "@/data/workspaces";
 import { useRecipesQuery } from "@/data/recipes";
@@ -57,13 +58,25 @@ function switchMode(current: string | undefined, to: "light" | "dark"): string {
   }
 }
 
+const STATE: Record<string, { status: "running" | "waiting"; detail: string }> =
+  {
+    waiting: { status: "waiting", detail: "Waiting on you" },
+    running: { status: "running", detail: "Working" },
+  };
+
+function sessionState(s: SessionStatus | undefined) {
+  return s?.need || (s?.asks ?? 0) > 0 ? STATE.waiting : STATE[s?.status ?? ""];
+}
+
 // The palette's app-wide commands and its session search.
 export function useAppCommands({
   sessions,
+  statuses,
   onSelectSession,
   onSearchCode,
 }: {
   sessions: Session[];
+  statuses: Record<string, SessionStatus>;
   onSelectSession: (session: Session) => void;
   onSearchCode: () => void;
 }) {
@@ -260,6 +273,7 @@ export function useAppCommands({
         group: "Sessions",
         keywords: [s.working_directory, s.branch_name ?? ""].filter(Boolean),
         icon: MessageSquare,
+        ...sessionState(statuses[s.id]),
         run: () => onSelectSession(s),
       }))
   );

package/components/CommandPalette/useConversationRows.ts

@@ -0,0 +1,55 @@
+"use client";
+
+import { useMemo } from "react";
+import { MessagesSquare, Search } from "lucide-react";
+import type { PaletteCommand } from "@/lib/palette/registry";
+import { MIN_QUERY, useConversationSearch } from "@/data/search";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
+import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
+import { paletteActions } from "@/stores/palette";
+import { plain } from "./conversations/format";
+import { useOpenHit } from "./conversations/useOpenHit";
+
+// Conversation matches offered last in All.
+const CONVERSATIONS = 3;
+
+// The few conversations a query finds, then a way into the full search.
+export function useConversationRows(
+  query: string,
+  enabled: boolean
+): PaletteCommand[] {
+  const { workspace } = useSelectedWorkspace();
+  const debounced = useDebouncedValue(query.trim(), 150);
+  const openHit = useOpenHit();
+  const { data: found } = useConversationSearch(
+    debounced,
+    workspace?.id ?? "all",
+    { limit: CONVERSATIONS, enabled }
+  );
+  return useMemo(() => {
+    const q = query.trim();
+    if (!enabled || 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,
+        keepOpen: true,
+        run: () => paletteActions.setTab("conversations", q),
+      },
+    ];
+  }, [found, query, debounced, enabled, openHit]);
+}

package/components/SessionList/useSessionSwitching.ts

@@ -36,7 +36,7 @@ export function useSessionSwitching(
     {
       id: "session.previous",
       title: "Previous session",
-      group: "Sessions",
+      group: "Actions",
       hint: chordHint(PREVIOUS),
       keywords: ["switch", "up"],
       icon: MessageSquare,
@@ -45,7 +45,7 @@ export function useSessionSwitching(
     {
       id: "session.next",
       title: "Next session",
-      group: "Sessions",
+      group: "Actions",
       hint: chordHint(NEXT),
       keywords: ["switch", "down"],
       icon: MessageSquare,

package/components/Share/MessageList.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { TYPE_LABEL } from "@/lib/share/view";
+import type { PreviewItem } from "@/data/shares";
+
+// The chat's messages. The text picks the range (click for a start,
+// shift-click for an end); the checkbox leaves one message out of it.
+export function MessageList({
+  rows,
+  inside,
+  dropped,
+  touch,
+  onPick,
+  onToggle,
+}: {
+  rows: PreviewItem[];
+  inside: Set<string>;
+  dropped: string[];
+  touch: boolean;
+  onPick: (id: string, extend: boolean) => void;
+  onToggle: (id: string) => void;
+}) {
+  const first = rows.find((r) => inside.has(r.id))?.id;
+  const listRef = useRef<HTMLUListElement>(null);
+  const firstRef = useRef<HTMLLIElement>(null);
+  useEffect(() => {
+    if (listRef.current && firstRef.current)
+      listRef.current.scrollTop = firstRef.current.offsetTop;
+  }, [first]);
+
+  return (
+    <div className="shrink-0">
+      <div className="text-muted-foreground mb-1 text-xs font-medium">
+        Messages
+      </div>
+      <p className="text-muted-foreground mb-1.5 text-xs">
+        {touch
+          ? "Tap a message to start the range, then another to end it."
+          : "Click a message to start the range, shift-click to end it."}
+      </p>
+      <ul
+        ref={listRef}
+        className="relative max-h-64 divide-y overflow-y-auto rounded-lg border md:max-h-[40vh]"
+      >
+        {rows.map((item) => {
+          const on = inside.has(item.id);
+          return (
+            <li
+              key={item.id}
+              ref={item.id === first ? firstRef : undefined}
+              className={cn("flex items-center", on && "bg-primary/5")}
+            >
+              <label className="flex min-h-11 w-11 shrink-0 cursor-pointer items-center justify-center">
+                <input
+                  type="checkbox"
+                  className="h-4 w-4"
+                  aria-label="Include this message"
+                  disabled={!on}
+                  checked={on && !dropped.includes(item.id)}
+                  onChange={() => onToggle(item.id)}
+                />
+              </label>
+              <button
+                type="button"
+                aria-pressed={on}
+                onClick={(e) => onPick(item.id, e.shiftKey)}
+                className={cn(
+                  "flex min-h-11 min-w-0 flex-1 items-center gap-3 py-1.5 pr-3 text-left text-sm",
+                  !on && "text-muted-foreground opacity-60"
+                )}
+              >
+                <span className="text-muted-foreground w-12 shrink-0 text-xs">
+                  {TYPE_LABEL[item.type] ?? item.type}
+                </span>
+                <span className="min-w-0 flex-1 truncate">
+                  {item.excerpt || "(empty)"}
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/components/Share/RangePicker.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  PRESETS,
+  presetRange,
+  type RangePreset,
+  type RangeRow,
+} from "@/lib/share/range";
+
+// The part of the chat to share: a preset, with what it comes to underneath.
+export function RangePicker({
+  rows,
+  active,
+  summary,
+  onPick,
+}: {
+  rows: RangeRow[];
+  active: RangePreset | null;
+  summary: string;
+  onPick: (preset: RangePreset) => void;
+}) {
+  const now = new Date();
+  return (
+    <div className="space-y-1.5">
+      <div
+        className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap"
+        role="group"
+        aria-label="Part of the chat to share"
+      >
+        {PRESETS.map((p) => {
+          const empty = !presetRange(rows, p.id, now);
+          return (
+            <Button
+              key={p.id}
+              size="sm"
+              variant={active === p.id ? "default" : "outline"}
+              className="min-h-11"
+              aria-pressed={active === p.id}
+              disabled={empty}
+              title={empty ? "No messages today" : undefined}
+              onClick={() => onPick(p.id)}
+            >
+              {p.label}
+            </Button>
+          );
+        })}
+      </div>
+      <p
+        className="text-muted-foreground text-xs"
+        aria-live="polite"
+        data-testid="share-range-summary"
+      >
+        {summary}
+        {!active && " · Custom range"}
+      </p>
+    </div>
+  );
+}

package/components/Share/ShareDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useSnapshot } from "valtio";
 import { toast } from "sonner";
 import { Check, Copy, ExternalLink, Link2 } from "lucide-react";
@@ -19,12 +19,18 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { DownloadMenu } from "./DownloadMenu";
+import { MessageList } from "./MessageList";
+import { RangePicker } from "./RangePicker";
+import { useCoarsePointer } from "@/components/Chat/composer/useCoarsePointer";
 import { cn } from "@/lib/utils";
 import { Switch } from "@/components/ui/switch";
 import { writeClipboard } from "@/hooks/useCopyToClipboard";
 import {
   useCreateShare,
+  useShareMessages,
   useSharePreview,
+  type PreviewItem,
+  type PreviewRequest,
   type ShareExpiry,
   type SharePreview,
 } from "@/data/shares";
@@ -34,12 +40,21 @@ import {
   DEFAULT_EXPIRY,
   EXPIRIES,
   EXPIRY_LABEL,
-  TYPE_LABEL,
   formatBytes,
-  nothingLeft,
   redactionSummary,
   toggleDrop,
 } from "@/lib/share/view";
+import {
+  DEFAULT_PRESET,
+  activePreset,
+  clickRange,
+  inRange,
+  presetRange,
+  rangeFromHere,
+  rangeSummary,
+  type RangePreset,
+  type ShareRange,
+} from "@/lib/share/range";
 
 // Opened from a menu or an artifact: the redacted page exactly as it would be
 // uploaded, with what to leave out, then Create link or Download.
@@ -52,7 +67,7 @@ export function ShareDialog() {
     >
       {target && (
         <ShareBody
-          key={target.sessionId ?? target.artifactId}
+          key={`${target.sessionId ?? target.artifactId}:${target.fromId ?? ""}`}
           target={{ ...target }}
         />
       )}
@@ -69,6 +84,7 @@ function ShareBody({
     artifactId?: string;
     title: string;
     version?: number;
+    fromId?: string;
   };
 }) {
   const [tools, setTools] = useState(false);
@@ -80,22 +96,60 @@ function ShareBody({
   const [follow, setFollow] = useState(false);
   const [copied, setCopied] = useState(false);
   const [tab, setTab] = useState<"page" | "markdown">("page");
+  const [rows, setRows] = useState<PreviewItem[] | null>(null);
+  const [range, setRange] = useState<ShareRange | null>(null);
+  const [anchor, setAnchor] = useState<string | null>(null);
+  const [armed, setArmed] = useState(false);
   const previewReq = useSharePreview();
+  const listReq = useShareMessages();
   const create = useCreateShare();
+  const coarse = useCoarsePointer();
   const seq = useRef(0);
 
   const { kind, sessionId, artifactId } = target;
+  const chat = kind === "chat";
+
+  // A chat opens on its last exchange, or on the message it was shared from.
   useEffect(() => {
+    if (!chat) return;
+    let live = true;
+    listReq
+      .mutateAsync({ kind, sessionId, includeTools: true })
+      .then(({ items }) => {
+        if (!live) return;
+        const from = target.fromId ? rangeFromHere(items, target.fromId) : null;
+        setRows(items);
+        setRange(from ?? presetRange(items, DEFAULT_PRESET, new Date()));
+        setAnchor(from?.fromId ?? null);
+      })
+      .catch((err: Error) => live && setError(err.message));
+    return () => {
+      live = false;
+    };
+    // listReq is stable enough; re-running on it would loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chat, kind, sessionId, target.fromId]);
+
+  const ready =
+    !chat || (rows !== null && range !== null) || rows?.length === 0;
+  const request: PreviewRequest = useMemo(
+    () => ({
+      kind,
+      sessionId,
+      artifactId,
+      includeTools: tools,
+      dropIds: dropped,
+      ...(range ?? {}),
+    }),
+    [kind, sessionId, artifactId, tools, dropped, range]
+  );
+
+  useEffect(() => {
+    if (!ready) return;
     const mine = ++seq.current;
     const timer = setTimeout(async () => {
       try {
-        const p = await previewReq.mutateAsync({
-          kind,
-          sessionId,
-          artifactId,
-          includeTools: tools,
-          dropIds: dropped,
-        });
+        const p = await previewReq.mutateAsync(request);
         if (mine === seq.current) {
           setPreview(p);
           setError(null);
@@ -107,7 +161,7 @@ function ShareBody({
     return () => clearTimeout(timer);
     // previewReq is stable enough; re-running on it would loop.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [kind, sessionId, artifactId, tools, dropped]);
+  }, [ready, request]);
 
   const toggle = (id: string) => setDropped((d) => toggleDrop(d, id));
 
@@ -115,11 +169,7 @@ function ShareBody({
     if (!preview) return;
     try {
       const res = await create.mutateAsync({
-        kind,
-        sessionId,
-        artifactId,
-        includeTools: tools,
-        dropIds: dropped,
+        ...request,
         sharedAt: preview.sharedAt,
         hash: preview.hash,
         expiresIn,
@@ -149,8 +199,33 @@ function ShareBody({
   };
 
   const linked = preview?.connectLinked ?? false;
-  const empty =
-    kind === "chat" && !!preview && nothingLeft(preview.items, dropped);
+  const visibleRows = useMemo(
+    () => (rows ?? []).filter((r) => tools || !r.tools),
+    [rows, tools]
+  );
+  const covered = useMemo(() => inRange(rows ?? [], range), [rows, range]);
+  const inside = useMemo(() => new Set(covered.map((r) => r.id)), [covered]);
+  const shared = visibleRows.filter(
+    (r) => inside.has(r.id) && !dropped.includes(r.id)
+  );
+  const empty = chat && !!rows && shared.length === 0;
+  const active = activePreset(rows ?? [], range, new Date());
+
+  const pickPreset = (preset: RangePreset) => {
+    const r = presetRange(rows ?? [], preset, new Date());
+    if (!r) return;
+    setRange(r);
+    setAnchor(r.fromId);
+    setArmed(false);
+  };
+  const pickRow = (id: string, shift: boolean) => {
+    const extend = shift || (coarse && armed);
+    setRange(
+      clickRange(rows ?? [], anchor ?? range?.fromId ?? null, id, extend)
+    );
+    if (!extend) setAnchor(id);
+    setArmed(coarse && !extend);
+  };
   const summary = preview ? redactionSummary(preview.hits) : "";
 
   return (
@@ -166,6 +241,15 @@ function ShareBody({
         </DialogDescription>
       </div>
 
+      {chat && rows && rows.length > 0 && (
+        <RangePicker
+          rows={rows}
+          active={active}
+          summary={rangeSummary(visibleRows.length, shared)}
+          onPick={pickPreset}
+        />
+      )}
+
       <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto md:flex-row md:overflow-hidden">
         <div className="flex min-h-[45vh] flex-1 flex-col gap-2 md:min-h-0">
           <div className="flex gap-2" role="group" aria-label="Preview format">
@@ -210,31 +294,14 @@ function ShareBody({
                 <span>Include tool calls and thinking</span>
                 <Switch checked={tools} onCheckedChange={setTools} />
               </label>
-              <div className="min-h-0">
-                <div className="text-muted-foreground mb-1 text-xs font-medium">
-                  Messages
-                </div>
-                <ul className="max-h-64 divide-y overflow-y-auto rounded-lg border">
-                  {preview?.items.map((item) => (
-                    <li key={item.id}>
-                      <label className="flex min-h-11 cursor-pointer items-center gap-3 px-3 py-1.5 text-sm">
-                        <input
-                          type="checkbox"
-                          className="h-4 w-4 shrink-0"
-                          checked={!dropped.includes(item.id)}
-                          onChange={() => toggle(item.id)}
-                        />
-                        <span className="text-muted-foreground w-12 shrink-0 text-xs">
-                          {TYPE_LABEL[item.type] ?? item.type}
-                        </span>
-                        <span className="min-w-0 flex-1 truncate">
-                          {item.excerpt || "(empty)"}
-                        </span>
-                      </label>
-                    </li>
-                  ))}
-                </ul>
-              </div>
+              <MessageList
+                rows={visibleRows}
+                inside={inside}
+                dropped={dropped}
+                touch={coarse}
+                onPick={pickRow}
+                onToggle={toggle}
+              />
             </>
           )}
 
@@ -372,15 +439,9 @@ function ShareBody({
           <div className="flex gap-2">
             <DownloadMenu
               preview={preview}
-              title={target.title}
+              title={target.title || preview?.title || ""}
               disabled={!preview || preview.tooBig || empty}
-              request={{
-                kind,
-                sessionId,
-                artifactId,
-                includeTools: tools,
-                dropIds: dropped,
-              }}
+              request={request}
             />
             {linked && (
               <Button

package/data/session-artifacts/keys.ts

@@ -7,4 +7,6 @@ export const sessionArtifactKeys = {
   // A page's versions, by any version's id; pageId keys the invalidation.
   versions: (pageId: string) =>
     [...sessionArtifactKeys.all, "versions", pageId] as const,
+  compare: (sessionId: string, from: string, to: string, mode: string) =>
+    [...sessionArtifactKeys.all, "compare", sessionId, from, to, mode] as const,
 };

package/data/session-artifacts/queries.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { SessionArtifact } from "@/lib/session-artifacts/types";
 import type { PageVersions } from "@/lib/artifacts/actions";
+import type { CompareMode, CompareResult } from "@/lib/artifacts/compare/types";
 import { sessionArtifactKeys } from "./keys";
 
 export type { SessionArtifact } from "@/lib/session-artifacts/types";
@@ -76,3 +77,27 @@ export function useArtifactVersions(
     staleTime: 30_000,
   });
 }
+
+/** What changed between two versions of a page. */
+export function useArtifactCompare(
+  sessionId: string,
+  fromId: string,
+  toId: string,
+  mode: CompareMode,
+  enabled = true
+) {
+  return useQuery({
+    queryKey: sessionArtifactKeys.compare(sessionId, fromId, toId, mode),
+    queryFn: async (): Promise<Extract<CompareResult, { ok: true }>> => {
+      const res = await fetch(
+        `${artifactContentUrl(sessionId, fromId)}/compare?to=${encodeURIComponent(toId)}&mode=${mode}`
+      );
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error || "Couldn't compare versions");
+      return data;
+    },
+    enabled: enabled && !!fromId && !!toId,
+    // Versions never change once saved.
+    staleTime: Infinity,
+  });
+}