@saadnvd1/agent-os 0.3.781 → 0.3.786

package/app/api/hosts/[id]/agents/route.ts

@@ -7,16 +7,18 @@ import type { HostCatalogResponse } from "@/lib/machines/types";
 export const dynamic = "force-dynamic";
 
 // The agents and models a machine reports, for the new-session form: this
-// machine's own, or a linked machine's through its AgentOS.
+// machine's own, or a linked machine's through its AgentOS. ?project= adds
+// what that project last ran with.
 export async function GET(
-  _request: Request,
+  request: Request,
   { params }: { params: Promise<{ id: string }> }
 ) {
   const { id } = await params;
   if (!getHost(id))
     return NextResponse.json({ error: "Unknown machine" }, { status: 404 });
+  const project = new URL(request.url).searchParams.get("project") || null;
   const body: HostCatalogResponse = isRemoteHost(id)
-    ? await hostCatalog(id)
-    : { catalog: await machineCatalog(), error: null };
+    ? await hostCatalog(id, project)
+    : { catalog: await machineCatalog(project), error: null };
   return NextResponse.json(body);
 }

package/app/api/machine/route.ts

@@ -4,7 +4,9 @@ import { thisMachineReport } from "@/lib/machines/report";
 export const dynamic = "force-dynamic";
 
 // This machine's name, OS, addresses, agents and models. A linked machine
-// asks for it (it is on the peer allowlist) to fill the new-session form.
-export async function GET() {
-  return NextResponse.json(await thisMachineReport());
+// asks for it (it is on the peer allowlist) to fill the new-session form;
+// ?project= adds what that project last ran with.
+export async function GET(request: Request) {
+  const project = new URL(request.url).searchParams.get("project");
+  return NextResponse.json(await thisMachineReport(project || null));
 }

package/app/api/whats-new/route.ts

@@ -0,0 +1,47 @@
+import { createHash } from "crypto";
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { cachedCheck } from "@/lib/updates/check";
+import { aheadEntries } from "@/lib/whats-new/ahead";
+import { headOf, loadEntries, pageOf } from "@/lib/whats-new/load";
+
+const query = z.object({
+  head: z.literal("1").optional(),
+  ahead: z.literal("1").optional(),
+  before: z
+    .string()
+    .regex(/^\d{4}-\d{2}-\d{2}$/)
+    .optional(),
+  limit: z.coerce.number().int().min(1).max(200).default(60),
+});
+
+// GET /api/whats-new?head=1 - the newest id and the count, for the footer's
+// dot. With ahead=1: what a waiting update would add. Otherwise a page of entries, newest first, older than `before`.
+// Reads a static file; nothing here calls a model.
+export async function GET(request: NextRequest) {
+  const parsed = query.safeParse(
+    Object.fromEntries(request.nextUrl.searchParams)
+  );
+  if (!parsed.success)
+    return NextResponse.json({ error: "Bad query" }, { status: 400 });
+  const { head, ahead, before, limit } = parsed.data;
+  const entries = loadEntries();
+  const check = ahead ? cachedCheck() : null;
+  const body = ahead
+    ? {
+        entries: check?.available
+          ? await aheadEntries(check.latest?.sha, entries)
+          : [],
+      }
+    : head
+      ? headOf(entries)
+      : pageOf(entries, { before, limit });
+  const text = JSON.stringify(body);
+  const etag = `"${createHash("sha1").update(text).digest("hex").slice(0, 16)}"`;
+  const headers = { ETag: etag, "Cache-Control": "private, no-cache" };
+  if (request.headers.get("if-none-match") === etag)
+    return new NextResponse(null, { status: 304, headers });
+  return new NextResponse(text, {
+    headers: { ...headers, "Content-Type": "application/json" },
+  });
+}

package/components/Chat/ChatPanel.tsx

@@ -291,6 +291,7 @@ export function ChatPanel({
     models,
     model,
     modelLabel,
+    agentName,
     send,
     interrupt,
     setModel,
@@ -881,6 +882,7 @@ export function ChatPanel({
           models={models}
           model={model}
           modelLabel={modelLabel}
+          agentName={agentName}
           onSetModel={setModel}
           access={access}
           onSetAccess={accessLocked ? undefined : setAccess}

package/components/Chat/ModelPicker.tsx

@@ -1,13 +1,16 @@
 "use client";
 
-import { Check, ChevronDown } from "lucide-react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { useRef } from "react";
+import { ChevronDown, Lock } from "lucide-react";
 import type { ChatModel } from "@/lib/chat/events";
+import { ModelList } from "@/components/Draft/picker/ModelList";
+import { PickerSheet } from "@/components/Draft/picker/PickerSheet";
+import { SearchField } from "@/components/Draft/picker/SearchField";
+import {
+  focusSelectedRow,
+  useListKeys,
+} from "@/components/Draft/picker/useListKeys";
+import { useModelSearch } from "@/components/Draft/picker/useModelSearch";
 
 export function modelLabel(
   models: ChatModel[],
@@ -17,11 +20,25 @@ export function modelLabel(
   return models.find((m) => m.value === value)?.label ?? (serverLabel || value);
 }
 
+/**
+ * The list value a chat's model is: itself, or the family alias when the chat
+ * holds a full id ("claude-opus-5-5" is the "opus" row).
+ */
+export function currentModelValue(
+  models: ChatModel[],
+  model: string
+): string | undefined {
+  if (models.some((m) => m.value === model)) return model;
+  const family = /^claude-([a-z]+)-\d/.exec(model)?.[1];
+  return family ? models.find((m) => m.value === family)?.value : undefined;
+}
+
 // The session's model, switchable mid-conversation. Opened by its button or /model.
 export function ModelPicker({
   models,
   model,
   label,
+  agentName,
   open,
   onOpenChange,
   onPick,
@@ -29,47 +46,70 @@ export function ModelPicker({
   models: ChatModel[];
   model: string;
   label?: string;
+  agentName?: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onPick: (value: string) => void;
 }) {
+  const current = currentModelValue(models, model);
+  const root = useRef<HTMLDivElement>(null);
+  const search = useRef<HTMLInputElement>(null);
+  const { query, setQuery, sections } = useModelSearch({
+    agent: { agent: "chat", label: "", models },
+    currentValue: current,
+    open,
+  });
+  const onKeyDown = useListKeys(root, search);
   if (!model && models.length === 0) return null;
   return (
-    <DropdownMenu open={open} onOpenChange={onOpenChange}>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          aria-label="Model"
-          className="text-muted-foreground hover:text-foreground hover:bg-foreground/[0.05] flex h-10 max-w-36 min-w-0 items-center gap-1 rounded-lg px-2 text-xs"
-        >
-          <span className="truncate">
-            {modelLabel(models, model, label) || "Model"}
-          </span>
-          <ChevronDown className="h-3 w-3 shrink-0" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" side="top" className="max-w-80">
-        {models.map((m) => (
-          <DropdownMenuItem
-            key={m.value}
-            onSelect={() => onPick(m.value)}
-            disabled={!!m.disabled}
-            className="flex min-h-11 items-start gap-2 md:min-h-9"
-          >
-            <Check
-              className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${m.value === model ? "opacity-100" : "opacity-0"}`}
+    <>
+      <button
+        type="button"
+        aria-label="Model"
+        aria-haspopup="dialog"
+        onClick={() => onOpenChange(true)}
+        className="text-muted-foreground hover:text-foreground hover:bg-foreground/[0.05] flex h-10 max-w-36 min-w-0 items-center gap-1 rounded-lg px-2 text-xs"
+      >
+        <span className="truncate">
+          {modelLabel(models, model, label) || "Model"}
+        </span>
+        <ChevronDown className="h-3 w-3 shrink-0" />
+      </button>
+      <PickerSheet
+        open={open}
+        onOpenChange={(o) => {
+          onOpenChange(o);
+        }}
+        title="Model"
+        onKeyDown={onKeyDown}
+        onOpened={() => focusSelectedRow(root.current)}
+      >
+        <div ref={root} className="flex min-h-0 flex-1 flex-col">
+          <p className="text-muted-foreground bg-foreground/[0.03] mx-1.5 mt-1.5 flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-xs">
+            <Lock className="h-3.5 w-3.5 shrink-0" />
+            {agentName && `${agentName} · `}
+            {agentName ? "switching" : "Switching"} agent starts a new session
+          </p>
+          <SearchField
+            value={query}
+            onChange={setQuery}
+            placeholder="Search models"
+            inputRef={search}
+          />
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+            <ModelList
+              sections={sections}
+              selected={current ?? null}
+              query={query}
+              agentLabel=""
+              onPick={(value) => {
+                onPick(value);
+                onOpenChange(false);
+              }}
             />
-            <span className="flex flex-col">
-              <span className="text-sm">{m.label}</span>
-              {(m.disabled || m.description) && (
-                <span className="text-muted-foreground line-clamp-2 text-xs">
-                  {m.disabled ?? m.description}
-                </span>
-              )}
-            </span>
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+          </div>
+        </div>
+      </PickerSheet>
+    </>
   );
 }

package/components/Chat/composer/ComposerBody.tsx

@@ -63,6 +63,7 @@ export interface ComposerProps {
   models?: ChatModel[];
   model?: string;
   modelLabel?: string;
+  agentName?: string;
   onSetModel?: (model: string) => void;
   access?: ChatAccess;
   onSetAccess?: (access: ChatAccess) => void;
@@ -101,6 +102,7 @@ export function ComposerBody({
   models = [],
   model = "",
   modelLabel,
+  agentName,
   onSetModel,
   access,
   onSetAccess,
@@ -383,6 +385,7 @@ export function ComposerBody({
           models={models}
           model={model}
           modelLabel={modelLabel}
+          agentName={agentName}
           onSetModel={onSetModel}
           modelOpen={modelOpen}
           onModelOpenChange={setModelOpen}

package/components/Chat/composer/Toolbar.tsx

@@ -33,6 +33,7 @@ export function Toolbar({
   models,
   model,
   modelLabel,
+  agentName,
   onSetModel,
   modelOpen,
   onModelOpenChange,
@@ -56,6 +57,7 @@ export function Toolbar({
   models: ChatModel[];
   model: string;
   modelLabel?: string;
+  agentName?: string;
   onSetModel?: (model: string) => void;
   modelOpen: boolean;
   onModelOpenChange: (open: boolean) => void;
@@ -141,6 +143,7 @@ export function Toolbar({
           models={models}
           model={model}
           label={modelLabel}
+          agentName={agentName}
           open={modelOpen}
           onOpenChange={onModelOpenChange}
           onPick={onSetModel}

package/components/Draft/AgentModelChip.test.ts

@@ -23,6 +23,7 @@ describe("usableAgent", () => {
       agent({ agent: "claude", auth: "needs-login" }),
     ],
     ollama: [],
+    recent: [],
   };
 
   it("keeps an agent the machine can run", () => {

package/components/Draft/AgentModelChip.tsx

@@ -1,45 +1,33 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Bot } from "lucide-react";
 import type { Draft } from "@/lib/drafts";
 import { AGENT_OPTIONS, agentLabel } from "@/lib/agent-options";
 import { resolveModelForAgent } from "@/lib/model-catalog";
 import { useMachineCatalog } from "@/data/machines";
-import type { CatalogAgent, MachineCatalog } from "@/lib/machines/types";
-import { ChipHeading, ChipItem, ChipMenu } from "./Chip";
+import { catalogBlocker, usableAgent } from "./catalogBlocker";
+import { ChipItem, ChipMenu, ChipTrigger } from "./Chip";
+import { AgentModelPicker } from "./picker/AgentModelPicker";
 
-// What stands between an agent and its first prompt, if anything.
-export function catalogBlocker(a: CatalogAgent): string | null {
-  if (!a.installed) return "Not installed";
-  if (a.auth === "needs-login") return a.hint ?? "Needs sign-in";
-  return null;
-}
-
-/** The agent to use when the one chosen can't run on this machine. */
-export function usableAgent(
-  catalog: MachineCatalog,
-  agentType: Draft["agentType"]
-): CatalogAgent | null {
-  const have = catalog.agents.find((a) => a.agent === agentType);
-  if (have && !catalogBlocker(have)) return null;
-  return catalog.agents.find((a) => !catalogBlocker(a)) ?? null;
-}
+export { catalogBlocker, usableAgent };
 
 /**
- * The agent and its model in one menu, grouped by agent, from what the
- * machine the session will run on reports. A local Ollama model picks the
- * agent that can run it.
+ * The agent and its model in one picker, from what the machine the session
+ * will run on reports: pick the agent, then only its models.
  */
 export function AgentModelChip({
   draft,
+  projectName,
   onChange,
 }: {
   draft: Draft;
+  projectName: string | null;
   onChange: (patch: Partial<Draft>) => void;
 }) {
-  const { data, isPending } = useMachineCatalog(draft.hostId);
+  const { data, isPending } = useMachineCatalog(draft.hostId, draft.projectId);
   const catalog = data?.catalog ?? null;
+  const [open, setOpen] = useState(false);
 
   // The machine changed under the draft: move to an agent it has.
   useEffect(() => {
@@ -59,18 +47,33 @@ export function AgentModelChip({
 
   const current = catalog?.agents.find((a) => a.agent === draft.agentType);
   const model = current?.models.find((m) => m.value === draft.model);
-  const label =
-    model && draft.model !== current?.defaultModel
-      ? `${agentLabel(draft.agentType)} · ${model.label}`
-      : agentLabel(draft.agentType);
-
+  const label = model
+    ? `${agentLabel(draft.agentType)} · ${model.label}`
+    : agentLabel(draft.agentType);
   const blocker = current ? catalogBlocker(current) : null;
 
   return (
     <>
-      <ChipMenu icon={Bot} name="Agent" label={label}>
-        {!catalog &&
-          AGENT_OPTIONS.map((o) => (
+      {catalog ? (
+        <>
+          <ChipTrigger
+            icon={Bot}
+            name="Agent and model"
+            label={label}
+            onClick={() => setOpen(true)}
+          />
+          <AgentModelPicker
+            open={open}
+            onOpenChange={setOpen}
+            catalog={catalog}
+            value={{ agent: draft.agentType, model: draft.model }}
+            projectName={projectName}
+            onPick={(agentType, m) => onChange({ agentType, model: m })}
+          />
+        </>
+      ) : (
+        <ChipMenu icon={Bot} name="Agent" label={label}>
+          {AGENT_OPTIONS.map((o) => (
             <ChipItem
               key={o.value}
               checked={o.value === draft.agentType}
@@ -89,68 +92,8 @@ export function AgentModelChip({
               {o.label}
             </ChipItem>
           ))}
-        {catalog?.agents.map((a, i) => {
-          const blocked = catalogBlocker(a);
-          return (
-            <div key={a.agent}>
-              <ChipHeading first={i === 0}>
-                {a.label}
-                {blocked ? ` · ${blocked}` : ""}
-              </ChipHeading>
-              {a.models.map((m) => (
-                <ChipItem
-                  key={m.value}
-                  checked={
-                    a.agent === draft.agentType && m.value === draft.model
-                  }
-                  disabled={!!blocked}
-                  hint={m.description}
-                  onSelect={() =>
-                    onChange({ agentType: a.agent, model: m.value })
-                  }
-                >
-                  {m.label}
-                </ChipItem>
-              ))}
-              {a.modelsError && (
-                <p className="text-muted-foreground px-2 py-1 text-xs">
-                  Couldn&apos;t list its models: {a.modelsError}
-                </p>
-              )}
-            </div>
-          );
-        })}
-        {catalog && catalog.ollama.length > 0 && (
-          <div>
-            <ChipHeading>Ollama (local models)</ChipHeading>
-            {catalog.ollama.map((o) => (
-              <ChipItem
-                key={o.name}
-                checked={
-                  !!o.runsWith &&
-                  o.runsWith.agent === draft.agentType &&
-                  o.runsWith.model === draft.model
-                }
-                disabled={!o.runsWith}
-                hint={
-                  o.runsWith
-                    ? `Runs in ${agentLabel(o.runsWith.agent)}`
-                    : "No agent here is set up to run it"
-                }
-                onSelect={() =>
-                  o.runsWith &&
-                  onChange({
-                    agentType: o.runsWith.agent,
-                    model: o.runsWith.model,
-                  })
-                }
-              >
-                {o.name}
-              </ChipItem>
-            ))}
-          </div>
-        )}
-      </ChipMenu>
+        </ChipMenu>
+      )}
       {blocker && (
         <p className="w-full text-xs text-amber-600 dark:text-amber-400">
           {blocker}

package/components/Draft/Chip.tsx

@@ -14,6 +14,33 @@ import { cn } from "@/lib/utils";
 const chipClass =
   "border-border/70 bg-card text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04] flex h-11 max-w-full min-w-0 items-center gap-1.5 rounded-lg border px-2.5 text-xs md:h-8 disabled:pointer-events-none disabled:opacity-60";
 
+// The button of a choice whose picker is its own dialog.
+export function ChipTrigger({
+  icon: Icon,
+  label,
+  name,
+  onClick,
+}: {
+  icon: LucideIcon;
+  label: string;
+  name: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={`${name}: ${label}`}
+      aria-haspopup="dialog"
+      onClick={onClick}
+      className={chipClass}
+    >
+      <Icon className="h-3.5 w-3.5 shrink-0" />
+      <span className="truncate">{label}</span>
+      <ChevronDown className="h-3 w-3 shrink-0" />
+    </button>
+  );
+}
+
 // One of a draft's choices: what it is now, and a menu to change it.
 export function ChipMenu({
   icon: Icon,

package/components/Draft/DraftChips.tsx

@@ -159,7 +159,11 @@ export function DraftChips({
       )}
 
       {!draft.openPr && !draft.agentRole && (
-        <AgentModelChip draft={draft} onChange={onChange} />
+        <AgentModelChip
+          draft={draft}
+          projectName={project?.name ?? null}
+          onChange={onChange}
+        />
       )}
 
       {!draft.openPr && local && (

package/components/Draft/DraftPanel.tsx

@@ -8,8 +8,6 @@ import { Button } from "@/components/ui/button";
 import type { ChatFile, ChatImage } from "@/lib/chat/events";
 import type { Project } from "@/lib/db";
 import { draftComposerKey, type Draft } from "@/lib/drafts";
-import { discoversModels } from "@/lib/model-catalog";
-import { useDiscoveredModels } from "@/data/agents";
 import { useHostsQuery } from "@/data/hosts";
 import { useGitCheck } from "@/data/git/queries";
 import { useSelectedWorkspace } from "@/hooks/useSelectedWorkspace";
@@ -27,8 +25,6 @@ import { useStartAnalystBeside } from "@/components/Analyst/pair";
 import { DraftChips } from "./DraftChips";
 import { DraftHeading } from "./DraftHeading";
 import { ModelUnavailableDialog } from "./ModelUnavailableDialog";
-import { useMachineCatalog } from "@/data/machines";
-import { draftModels } from "./draftModels";
 
 // A new session before its first send: choices on top, a composer below.
 // Sending makes the session (and its worktree) and turns this tab into it.
@@ -52,14 +48,6 @@ export function DraftPanel({
   const { data: git } = useGitCheck(
     project && draft?.hostId === "local" ? project.working_directory : ""
   );
-  const discovers = !!draft && discoversModels(draft.agentType);
-  const found = useDiscoveredModels(
-    draft?.agentType ?? "",
-    draft?.projectId ?? null,
-    discovers
-  );
-  // On another machine the models are the ones it reports, not this one's.
-  const there = useMachineCatalog(draft?.hostId ?? "local");
   const launch = useLaunchSession();
   const startAnalyst = useStartAnalystBeside();
   const { workspace } = useSelectedWorkspace();
@@ -262,15 +250,6 @@ export function DraftPanel({
           }
           onSend={(text, images, files) => void send(text, images, files)}
           onStop={() => {}}
-          models={
-            (draft.hostId !== "local" &&
-              there.data?.catalog?.agents.find(
-                (a) => a.agent === draft.agentType
-              )?.models) ||
-            draftModels(draft.agentType, found)
-          }
-          model={draft.model}
-          onSetModel={(model) => draftsActions.update(draft.id, { model })}
           access={draft.openPr ? undefined : draft.access}
           onSetAccess={(access) => draftsActions.update(draft.id, { access })}
           prefill={prefill}

package/components/Draft/catalogBlocker.ts

@@ -0,0 +1,19 @@
+import type { Draft } from "@/lib/drafts";
+import type { CatalogAgent, MachineCatalog } from "@/lib/machines/types";
+
+// What stands between an agent and its first prompt, if anything.
+export function catalogBlocker(a: CatalogAgent): string | null {
+  if (!a.installed) return "Not installed";
+  if (a.auth === "needs-login") return a.hint ?? "Needs sign-in";
+  return null;
+}
+
+/** The agent to use when the one chosen can't run on this machine. */
+export function usableAgent(
+  catalog: MachineCatalog,
+  agentType: Draft["agentType"]
+): CatalogAgent | null {
+  const have = catalog.agents.find((a) => a.agent === agentType);
+  if (have && !catalogBlocker(have)) return null;
+  return catalog.agents.find((a) => !catalogBlocker(a)) ?? null;
+}