@saadnvd1/agent-os 0.3.672 → 0.3.678

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

package/components/CommandPalette/conversations/ResultList.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Fragment } from "react";
+import { Bot, User } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import type { ConversationGroup, ConversationHit } from "@/data/search";
+import { cn } from "@/lib/utils";
+import { Snippet } from "./Snippet";
+import { statusChip, whenLabel } from "./format";
+
+export interface FlatHit {
+  group: ConversationGroup;
+  hit: ConversationHit;
+}
+
+export const flatten = (groups: ConversationGroup[]): FlatHit[] =>
+  groups.flatMap((group) => group.hits.map((hit) => ({ group, hit })));
+
+// Hits under their conversation: its name, where it lives, what became of it.
+export function ResultList({
+  groups,
+  active,
+  onActive,
+  onPick,
+}: {
+  groups: ConversationGroup[];
+  active: number;
+  onActive: (i: number) => void;
+  onPick: (i: number) => void;
+}) {
+  let index = -1;
+  return (
+    <>
+      {groups.map((g) => {
+        const chip = statusChip(g.status);
+        const where = [g.projectName, g.workspaceName]
+          .filter(Boolean)
+          .join(" · ");
+        return (
+          <Fragment key={g.sessionId}>
+            <div className="flex items-center gap-2 px-2 pt-3 pb-1">
+              <p className="min-w-0 truncate text-xs font-medium">{g.name}</p>
+              {chip && (
+                <Badge
+                  variant="outline"
+                  className="h-4 shrink-0 px-1.5 text-[10px] font-normal"
+                >
+                  {chip}
+                </Badge>
+              )}
+              {where && (
+                <p className="text-muted-foreground min-w-0 flex-1 truncate text-right text-[11px]">
+                  {where}
+                </p>
+              )}
+            </div>
+            {g.hits.map((h) => {
+              const i = ++index;
+              const Icon = h.role === "user" ? User : Bot;
+              return (
+                <button
+                  key={h.itemId}
+                  type="button"
+                  role="option"
+                  aria-selected={i === active}
+                  data-index={i}
+                  onMouseMove={() => i !== active && onActive(i)}
+                  onClick={() => onPick(i)}
+                  className={cn(
+                    "flex min-h-11 w-full items-start gap-2.5 rounded-lg px-2 py-2 text-left text-sm",
+                    i === active && "bg-primary/10"
+                  )}
+                >
+                  <Icon className="text-muted-foreground mt-0.5 h-3.5 w-3.5 shrink-0" />
+                  <span className="min-w-0 flex-1">
+                    <span className="line-clamp-2 break-words">
+                      <Snippet segments={h.snippet} />
+                    </span>
+                  </span>
+                  <span className="text-muted-foreground mt-0.5 shrink-0 text-[11px]">
+                    {whenLabel(h.createdAt)}
+                  </span>
+                </button>
+              );
+            })}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}

package/components/CommandPalette/conversations/Snippet.tsx

@@ -0,0 +1,24 @@
+import type { SnippetSegment } from "@/data/search";
+
+// A match with the words that hit marked. Segments, never HTML: what was said
+// in a chat is only ever text here.
+export function Snippet({ segments }: { segments: SnippetSegment[] }) {
+  return (
+    <>
+      {segments.map((s, i) =>
+        s.hit ? (
+          <mark
+            key={i}
+            className="bg-primary/20 text-foreground rounded-sm px-0.5"
+          >
+            {s.text}
+          </mark>
+        ) : (
+          <span key={i}>
+            {s.text.replace(/\*\*|__|`/g, "").replace(/\s+/g, " ")}
+          </span>
+        )
+      )}
+    </>
+  );
+}

package/components/CommandPalette/conversations/format.ts

@@ -0,0 +1,30 @@
+// When a message was said: the time today, else the date.
+export function whenLabel(ms: number | null | undefined): string {
+  if (!ms) return "";
+  const d = new Date(ms);
+  const now = new Date();
+  if (d.toDateString() === now.toDateString())
+    return d.toLocaleTimeString(undefined, {
+      hour: "numeric",
+      minute: "2-digit",
+    });
+  return d.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+    year: d.getFullYear() === now.getFullYear() ? undefined : "numeric",
+  });
+}
+
+export const plain = (segments: { text: string }[]) =>
+  segments
+    .map((s) => s.text)
+    .join("")
+    .replace(/\*\*|__|`/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+
+const LIVE = new Set(["running", "idle", "waiting"]);
+
+// What became of a conversation, when it is not simply alive.
+export const statusChip = (status: string): string | null =>
+  LIVE.has(status) ? null : status;

package/components/CommandPalette/conversations/recent.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { MAX_RECENT, parseRecent, withRecent } from "./recent";
+
+describe("recent searches", () => {
+  it("puts the newest first and keeps each search once", () => {
+    expect(withRecent(["b", "a"], " a ")).toEqual(["a", "b"]);
+    expect(withRecent(["b"], "c")).toEqual(["c", "b"]);
+  });
+  it("is capped and ignores a blank search", () => {
+    const many = Array.from({ length: 20 }, (_, i) => `q${i}`);
+    expect(withRecent(many, "new")).toHaveLength(MAX_RECENT);
+    expect(withRecent(["a"], "  ")).toEqual(["a"]);
+  });
+  it("survives what storage may hold", () => {
+    expect(parseRecent(null)).toEqual([]);
+    expect(parseRecent("{")).toEqual([]);
+    expect(parseRecent('{"a":1}')).toEqual([]);
+    expect(parseRecent('["a",3,null,"b"]')).toEqual(["a", "b"]);
+  });
+});

package/components/CommandPalette/conversations/recent.ts

@@ -0,0 +1,35 @@
+const KEY = "agentOS-recent-conversation-searches";
+export const MAX_RECENT = 6;
+
+export function parseRecent(raw: string | null): string[] {
+  try {
+    const v: unknown = JSON.parse(raw ?? "[]");
+    if (!Array.isArray(v)) return [];
+    return v
+      .filter((x): x is string => typeof x === "string")
+      .slice(0, MAX_RECENT);
+  } catch {
+    return [];
+  }
+}
+
+// Newest first, each search once.
+export function withRecent(list: string[], q: string): string[] {
+  const text = q.trim();
+  if (!text) return list;
+  return [text, ...list.filter((x) => x !== text)].slice(0, MAX_RECENT);
+}
+
+export function loadRecent(): string[] {
+  try {
+    return parseRecent(localStorage.getItem(KEY));
+  } catch {
+    return [];
+  }
+}
+
+export function saveRecent(list: string[]): void {
+  try {
+    localStorage.setItem(KEY, JSON.stringify(list));
+  } catch {}
+}

package/components/CommandPalette/conversations/useOpenHit.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { useCallback } from "react";
+import { toast } from "sonner";
+import { useUnarchiveSession } from "@/data/done";
+import type { ConversationGroup, ConversationHit } from "@/data/search";
+import { openChatAt } from "@/stores/chatJump";
+import { paletteActions } from "@/stores/palette";
+
+// Closes the palette and takes the reader to the message. An archived chat
+// only opens from the sidebar, so it comes back first (as a bookmark's does).
+export function useOpenHit() {
+  const { mutateAsync: unarchive } = useUnarchiveSession();
+  return useCallback(
+    (group: ConversationGroup, hit: ConversationHit) => {
+      paletteActions.setOpen(false);
+      // After the dialog lets go of focus, so the chat can take it.
+      const go = () =>
+        setTimeout(() => openChatAt(group.sessionId, hit.itemId), 0);
+      if (group.status !== "archived") return go();
+      unarchive(group.sessionId)
+        .then(() => {
+          toast.success(`${group.name} is back`);
+          go();
+        })
+        .catch((err: Error) => toast.error(err.message));
+    },
+    [unarchive]
+  );
+}

package/components/Draft/DraftPanel.tsx

@@ -5,7 +5,7 @@ import { useSnapshot } from "valtio";
 import { toast } from "sonner";
 import { Composer } from "@/components/Chat/Composer";
 import { Button } from "@/components/ui/button";
-import type { ChatImage } from "@/lib/chat/events";
+import type { ChatFile, ChatImage } from "@/lib/chat/events";
 import type { Project } from "@/lib/db";
 import { draftComposerKey, type Draft } from "@/lib/drafts";
 import { getModelOptions } from "@/lib/model-catalog";
@@ -57,11 +57,12 @@ export function DraftPanel({
       </div>
     );
 
-  const send = async (text: string, images: ChatImage[]) => {
+  const send = async (text: string, images: ChatImage[], files: ChatFile[]) => {
     try {
       if (draft.openPr) {
         if (!project) throw new Error("Pick a project for a task");
-        if (images.length) throw new Error("A task takes text only");
+        if (images.length || files.length)
+          throw new Error("A task takes text only");
         const { session, queued } = await createTask.mutateAsync({
           projectId: project.id,
           prompt: text,
@@ -96,6 +97,7 @@ export function DraftPanel({
         baseBranch: draft.baseBranch,
         prompt: text,
         images: images.length ? images : undefined,
+        files: files.length ? files : undefined,
       });
       // A resend whose first answer was lost: the terminal still needs its
       // first prompt, and this is the text that was sent.
@@ -134,6 +136,7 @@ export function DraftPanel({
         />
         <Composer
           draftKey={draftComposerKey(draft.id)}
+          attachScope="draft"
           running={false}
           disabled={pending}
           placeholder={
@@ -143,7 +146,7 @@ export function DraftPanel({
                 ? "Describe the task"
                 : `Message ${project?.name ?? "a new chat"}`
           }
-          onSend={(text, images) => void send(text, images)}
+          onSend={(text, images, files) => void send(text, images, files)}
           onStop={() => {}}
           models={getModelOptions(draft.agentType)}
           model={draft.model}

package/components/Terminal/index.tsx

@@ -19,7 +19,8 @@ import { useTerminalConnection, useTerminalSearch } from "./hooks";
 import type { TerminalScrollState } from "./hooks";
 import { useViewport } from "@/hooks/useViewport";
 import { useFileDrop } from "@/hooks/useFileDrop";
-import { uploadFileToTemp } from "@/lib/file-upload";
+import { toast } from "sonner";
+import { uploadFile } from "@/lib/file-upload";
 import { FilePicker } from "@/components/FilePicker";
 import type { AttachSpec } from "@/lib/hosts/attach";
 
@@ -121,11 +122,11 @@ export const Terminal = forwardRef<TerminalHandle, TerminalProps>(
       async (file: File) => {
         setIsUploading(true);
         try {
-          const path = await uploadFileToTemp(file);
-          if (path) {
-            sendInput(path);
+          const done = await uploadFile(file);
+          if (done.ok) {
+            sendInput(done.file.path);
             focus();
-          }
+          } else toast.error(done.error);
         } catch (err) {
           console.error("Failed to upload file:", err);
         } finally {

package/data/chat/useChat.ts

@@ -9,6 +9,7 @@ import type {
   ChatAccess,
   ChatCommand,
   ChatContext,
+  ChatFile,
   ChatImage,
   ChatItem,
   ChatModel,
@@ -34,12 +35,13 @@ import { usePending } from "./usePending";
 
 // A pending send as the socket's `send`, under its own id.
 const sendFrame = (
-  p: Pick<PendingSend, "id" | "text" | "images" | "compact">
+  p: Pick<PendingSend, "id" | "text" | "images" | "files" | "compact">
 ) =>
   JSON.stringify({
     type: "send",
     text: p.text,
     images: p.images,
+    files: p.files,
     clientId: p.id,
     ...(p.compact && { compact: true }),
   });
@@ -400,8 +402,13 @@ export function useChat(
   const send = useCallback(
     // `compact`: the reader let a stale chat compact first (lib/chat/stale).
     // It shows as a pending bubble at once, until it's in the chat.
-    (text: string, images?: ChatImage[], compact?: boolean) => {
-      const p = { id: clientId(), text, images, compact };
+    (
+      text: string,
+      images?: ChatImage[],
+      compact?: boolean,
+      files?: ChatFile[]
+    ) => {
+      const p = { id: clientId(), text, images, files, compact };
       pend({ type: "add", send: p, now: Date.now() });
       const ws = wsRef.current;
       if (ws?.readyState !== WebSocket.OPEN) {

package/data/client-config/queries.ts

@@ -0,0 +1,18 @@
+import { queryOptions, useQuery } from "@tanstack/react-query";
+import type { ClientConfig } from "@/lib/config/client-config-types";
+
+export const clientConfigKeys = { all: ["client-config"] as const };
+
+// What the server says clients render with and are limited by; it only
+// changes with a server release, so one read per page load.
+export const clientConfigQuery = queryOptions({
+  queryKey: clientConfigKeys.all,
+  queryFn: async (): Promise<ClientConfig> => {
+    const res = await fetch("/api/client-config");
+    if (!res.ok) throw new Error("Couldn't read the server's limits");
+    return res.json();
+  },
+  staleTime: Infinity,
+});
+
+export const useClientConfig = () => useQuery(clientConfigQuery);

package/data/search/index.ts

@@ -0,0 +1,65 @@
+import { useQuery } from "@tanstack/react-query";
+import type {
+  ContextItem,
+  SearchResponse,
+} from "@/lib/search/conversations/types";
+import { searchKeys } from "./keys";
+
+export type {
+  ContextItem,
+  ConversationGroup,
+  ConversationHit,
+  SearchResponse,
+  SnippetSegment,
+} from "@/lib/search/conversations/types";
+
+export const MIN_QUERY = 2;
+
+async function json<T>(res: Response): Promise<T> {
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || "Request failed");
+  return data;
+}
+
+/**
+ * What was said in chats, grouped by conversation. A request for words the
+ * reader has since typed past is cancelled; the last results stay up until
+ * the new ones arrive.
+ */
+export function useConversationSearch(
+  q: string,
+  workspace: string,
+  { limit = 30, enabled = true }: { limit?: number; enabled?: boolean } = {}
+) {
+  const text = q.trim();
+  return useQuery({
+    queryKey: searchKeys.conversations(text, workspace, limit),
+    queryFn: ({ signal }) =>
+      fetch(
+        `/api/search/conversations?${new URLSearchParams({ q: text, workspace, limit: String(limit) })}`,
+        { signal }
+      ).then((r) => json<SearchResponse>(r)),
+    enabled: enabled && text.length >= MIN_QUERY,
+    placeholderData: (previous) => previous,
+    staleTime: 5_000,
+  });
+}
+
+/** A hit and the messages around it, for the preview. */
+export function useMessageContext(
+  sessionId: string | undefined,
+  itemId: string | undefined
+) {
+  return useQuery({
+    queryKey: searchKeys.context(sessionId ?? "", itemId ?? ""),
+    queryFn: ({ signal }) =>
+      fetch(
+        `/api/search/conversations/context?${new URLSearchParams({ session: sessionId!, item: itemId! })}`,
+        { signal }
+      )
+        .then((r) => json<{ items: ContextItem[] }>(r))
+        .then((d) => d.items),
+    enabled: !!sessionId && !!itemId,
+    staleTime: 60_000,
+  });
+}

package/data/search/keys.ts

@@ -0,0 +1,7 @@
+export const searchKeys = {
+  all: ["search"] as const,
+  conversations: (q: string, workspace: string, limit: number) =>
+    [...searchKeys.all, "conversations", q, workspace, limit] as const,
+  context: (sessionId: string, itemId: string) =>
+    [...searchKeys.all, "context", sessionId, itemId] as const,
+};