@saadnvd1/agent-os 0.3.782 → 0.3.786

package/components/Draft/picker/picker.test.ts

@@ -0,0 +1,152 @@
+import "@/components/Chat/composer/test-dom";
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { currentModelValue, ModelPicker } from "@/components/Chat/ModelPicker";
+import type { CatalogAgent, MachineCatalog } from "@/lib/machines/types";
+import { AgentModelPicker } from "./AgentModelPicker";
+
+// Radix dispatches CustomEvents; the node global is not jsdom's.
+Object.defineProperty(globalThis, "CustomEvent", {
+  value: (window as unknown as { CustomEvent: unknown }).CustomEvent,
+  configurable: true,
+});
+// A desktop, so the dialog layout and its autofocus apply.
+Object.defineProperty(window, "matchMedia", {
+  value: () => ({
+    matches: true,
+    addEventListener() {},
+    removeEventListener() {},
+  }),
+  configurable: true,
+});
+(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
+class RO {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+(globalThis as Record<string, unknown>).ResizeObserver ??= RO;
+
+const agent = (id: string, label: string, models: string[]): CatalogAgent => ({
+  agent: id as CatalogAgent["agent"],
+  label,
+  installed: true,
+  auth: "ok" as CatalogAgent["auth"],
+  hint: null,
+  models: models.map((m) => ({ value: m, label: m.toUpperCase() })),
+  defaultModel: models[0],
+  taskBlocked: null,
+  modelsError: null,
+});
+
+const catalog: MachineCatalog = {
+  agents: [
+    agent("claude", "Claude Code", ["opus", "sonnet"]),
+    agent("codex", "Codex", ["gpt-a", "gpt-flash"]),
+  ],
+  ollama: [],
+  recent: [{ agent: "claude", model: "sonnet" }],
+};
+
+const press = async (key: string, target: Element) =>
+  act(async () => {
+    target.dispatchEvent(
+      new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true })
+    );
+  });
+
+const roots: ReturnType<typeof createRoot>[] = [];
+afterEach(async () => {
+  await act(async () => roots.splice(0).forEach((r) => r.unmount()));
+  document.body.innerHTML = "";
+});
+
+async function mount(node: () => ReturnType<typeof createElement>) {
+  const el = document.createElement("div");
+  document.body.appendChild(el);
+  const root = createRoot(el);
+  roots.push(root);
+  await act(async () => root.render(node()));
+  const rerender = (n: ReturnType<typeof createElement>) =>
+    act(async () => root.render(n));
+  return { rerender };
+}
+
+const agentPicker = (open: boolean) =>
+  createElement(AgentModelPicker, {
+    open,
+    onOpenChange: vi.fn(),
+    catalog,
+    value: { agent: "claude", model: "opus" },
+    projectName: "proj",
+    onPick: vi.fn(),
+  });
+
+const search = () => document.querySelector("input") as HTMLInputElement | null;
+
+describe("currentModelValue", () => {
+  const models = [{ value: "opus", label: "Opus" }];
+  it("maps a full Claude id to its family alias", () => {
+    expect(currentModelValue(models, "claude-opus-5-5")).toBe("opus");
+    expect(currentModelValue(models, "opus")).toBe("opus");
+    expect(currentModelValue(models, "claude-haiku-5-5")).toBeUndefined();
+  });
+});
+
+describe("ModelPicker", () => {
+  it("marks the chat's model and names the agent in the lock bar", async () => {
+    await mount(() =>
+      createElement(ModelPicker, {
+        models: [
+          { value: "sonnet", label: "Sonnet" },
+          { value: "opus", label: "Opus" },
+        ],
+        model: "claude-opus-5-5",
+        agentName: "Claude Code",
+        open: true,
+        onOpenChange: vi.fn(),
+        onPick: vi.fn(),
+      })
+    );
+    const selected = document.querySelectorAll('[data-selected="true"]');
+    expect(selected).toHaveLength(1);
+    expect(selected[0].textContent).toContain("Opus");
+    expect(document.body.textContent).toContain(
+      "Claude Code · switching agent starts a new session"
+    );
+  });
+});
+
+describe("AgentModelPicker", () => {
+  it("starts each opening with an empty search", async () => {
+    const { rerender } = await mount(() => agentPicker(true));
+    const input = search()!;
+    await act(async () => {
+      const set = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value"
+      )!.set!;
+      set.call(input, "flash");
+      input.dispatchEvent(
+        new (window as unknown as { Event: typeof Event }).Event("input", {
+          bubbles: true,
+        })
+      );
+    });
+    expect(search()!.value).toBe("flash");
+    await rerender(agentPicker(false));
+    await rerender(agentPicker(true));
+    expect(search()!.value).toBe("");
+  });
+
+  it("puts focus on the new agent's model list after ←/→", async () => {
+    await mount(() => agentPicker(true));
+    const focused = () => document.activeElement as HTMLElement;
+    await press("ArrowRight", focused());
+    expect(focused().closest("[data-model-list]")).not.toBeNull();
+    expect(focused().textContent).toContain("GPT-A");
+    await press("ArrowDown", focused());
+    expect(focused().textContent).toContain("GPT-FLASH");
+  });
+});

package/components/Draft/picker/sections.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from "vitest";
+import type { ChatModel } from "@/lib/chat/events";
+import { buildSections, matchesElsewhere, matchesQuery } from "./sections";
+
+const m = (value: string, group?: string): ChatModel => ({
+  value,
+  label: value.toUpperCase(),
+  ...(group ? { group } : {}),
+});
+
+const models = [
+  m("default"),
+  m("a1", "Alpha"),
+  m("a2", "Alpha"),
+  m("b1", "Beta"),
+];
+
+describe("buildSections", () => {
+  it("puts last used and the default on top, then groups without repeating them", () => {
+    const s = buildSections({
+      models,
+      agentLabel: "X",
+      defaultValue: "default",
+      lastValue: "a2",
+      query: "",
+    });
+    expect(s.map((x) => [x.heading, x.models.map((y) => y.value)])).toEqual([
+      ["Last used", ["a2"]],
+      ["Default", ["default"]],
+      ["Alpha", ["a1"]],
+      ["Beta", ["b1"]],
+    ]);
+  });
+
+  it("shows the default once when it is also the last used", () => {
+    const s = buildSections({
+      models,
+      agentLabel: "X",
+      defaultValue: "default",
+      lastValue: "default",
+      query: "",
+    });
+    expect(s.map((x) => x.kind)).toEqual(["last", "group", "group"]);
+  });
+
+  it("filters to the matches, still grouped, and drops the top sections", () => {
+    const s = buildSections({
+      models,
+      agentLabel: "X",
+      defaultValue: "default",
+      lastValue: "a2",
+      query: "alpha a",
+    });
+    expect(s).toHaveLength(1);
+    expect(s[0].models.map((y) => y.value)).toEqual(["a1", "a2"]);
+  });
+
+  it("is empty when nothing matches", () => {
+    expect(buildSections({ models, agentLabel: "X", query: "zzz" })).toEqual(
+      []
+    );
+  });
+
+  it("lists ungrouped models under a plain heading", () => {
+    const s = buildSections({ models: [m("a")], agentLabel: "X", query: "" });
+    expect(s[0].heading).toBe("Models");
+  });
+});
+
+describe("matchesQuery", () => {
+  it("matches the agent's name as well as the model's", () => {
+    expect(matchesQuery(m("a1", "Alpha"), "Copilot", "copilot alpha")).toBe(
+      true
+    );
+    expect(matchesQuery(m("a1", "Alpha"), "Copilot", "beta")).toBe(false);
+  });
+});
+
+describe("matchesElsewhere", () => {
+  const agents = [
+    { agent: "one", label: "One", models: [m("x")] },
+    { agent: "two", label: "Two", models: [m("groq-a"), m("groq-b")] },
+    { agent: "three", label: "Three", models: [m("groq-c")] },
+  ];
+  it("counts matches in the other agents and names the first with any", () => {
+    expect(matchesElsewhere(agents, "one", "groq")).toEqual({
+      count: 3,
+      agent: "two",
+    });
+  });
+  it("is null with no query or no match", () => {
+    expect(matchesElsewhere(agents, "one", "")).toBeNull();
+    expect(matchesElsewhere(agents, "one", "nope")).toBeNull();
+    expect(matchesElsewhere(agents, "two", "groq-a")).toBeNull();
+  });
+});
+
+describe("buildSections current", () => {
+  it("pins the current model on top and does not repeat it", () => {
+    const s = buildSections({
+      models,
+      agentLabel: "X",
+      defaultValue: "default",
+      lastValue: "a1",
+      currentValue: "a1",
+      query: "",
+    });
+    expect(s.map((x) => [x.heading, x.models.map((y) => y.value)])).toEqual([
+      ["Current", ["a1"]],
+      ["Default", ["default"]],
+      ["Alpha", ["a2"]],
+      ["Beta", ["b1"]],
+    ]);
+  });
+});

package/components/Draft/picker/sections.ts

@@ -0,0 +1,121 @@
+import type { ChatModel } from "@/lib/chat/events";
+
+export interface Section {
+  key: string;
+  kind: "current" | "last" | "default" | "group";
+  heading: string;
+  models: ChatModel[];
+}
+
+const words = (q: string) => q.toLowerCase().split(/\s+/).filter(Boolean);
+
+/** Every word of the query appears in the model's name, group, id or agent. */
+export function matchesQuery(
+  m: ChatModel,
+  agentLabel: string,
+  query: string
+): boolean {
+  const hay =
+    `${agentLabel} ${m.label} ${m.group ?? ""} ${m.value}`.toLowerCase();
+  return words(query).every((w) => hay.includes(w));
+}
+
+/**
+ * The list a person scans: what they used last, the agent's default, then
+ * the rest under the provider that serves them. A search flattens it to the
+ * matches, still grouped.
+ */
+export function buildSections({
+  models,
+  agentLabel,
+  defaultValue,
+  lastValue,
+  currentValue,
+  query,
+}: {
+  models: ChatModel[];
+  agentLabel: string;
+  defaultValue?: string;
+  lastValue?: string;
+  /** The model in use now: pinned on top as "Current". */
+  currentValue?: string;
+  query: string;
+}): Section[] {
+  const searching = words(query).length > 0;
+  const sections: Section[] = [];
+  const taken = new Set<string>();
+  if (!searching) {
+    const current = models.find((m) => m.value === currentValue);
+    if (current) {
+      sections.push({
+        key: "current",
+        kind: "current",
+        heading: "Current",
+        models: [current],
+      });
+      taken.add(current.value);
+    }
+    const last = models.find((m) => m.value === lastValue);
+    if (last && !taken.has(last.value)) {
+      sections.push({
+        key: "last",
+        kind: "last",
+        heading: "Last used",
+        models: [last],
+      });
+      taken.add(last.value);
+    }
+    const def = models.find((m) => m.value === defaultValue);
+    if (def && !taken.has(def.value)) {
+      sections.push({
+        key: "default",
+        kind: "default",
+        heading: "Default",
+        models: [def],
+      });
+      taken.add(def.value);
+    }
+  }
+  const rest = models.filter(
+    (m) =>
+      !taken.has(m.value) && (!searching || matchesQuery(m, agentLabel, query))
+  );
+  const groups = new Map<string, ChatModel[]>();
+  for (const m of rest) {
+    const key = m.group ?? "";
+    groups.set(key, [...(groups.get(key) ?? []), m]);
+  }
+  for (const [key, list] of groups)
+    sections.push({
+      key: `group:${key}`,
+      kind: "group",
+      heading: key || "Models",
+      models: list,
+    });
+  return sections;
+}
+
+export interface Elsewhere {
+  /** Matches in the other agents. */
+  count: number;
+  /** The first of them that has any. */
+  agent: string;
+}
+
+/** What a search that found nothing here would find in the other agents. */
+export function matchesElsewhere(
+  agents: { agent: string; label: string; models: ChatModel[] }[],
+  current: string,
+  query: string
+): Elsewhere | null {
+  if (!words(query).length) return null;
+  let count = 0;
+  let first: string | null = null;
+  for (const a of agents) {
+    if (a.agent === current) continue;
+    const n = a.models.filter((m) => matchesQuery(m, a.label, query)).length;
+    if (n && !first) first = a.agent;
+    count += n;
+  }
+  return first ? { count, agent: first } : null;
+}

package/components/Draft/picker/useListKeys.ts

@@ -0,0 +1,54 @@
+import type { KeyboardEvent, RefObject } from "react";
+
+const ROWS = "[data-pick-row]:not(:disabled)";
+
+/**
+ * Keyboard for a picker: ↑/↓ walk the rows (↑ from the first goes back to
+ * the search), ⏎ in the search takes the first row, / jumps to the search,
+ * and ←/→ step the agent when the caret isn't in the search.
+ */
+export function useListKeys(
+  root: RefObject<HTMLElement | null>,
+  search: RefObject<HTMLInputElement | null>,
+  onStepAgent?: (delta: 1 | -1) => void
+) {
+  return (e: KeyboardEvent) => {
+    const el = root.current;
+    if (!el || e.metaKey || e.ctrlKey || e.altKey) return;
+    const inSearch = e.target === search.current;
+    const rows = [...el.querySelectorAll<HTMLElement>(ROWS)];
+    const at = rows.indexOf(e.target as HTMLElement);
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      const next =
+        e.key === "ArrowDown"
+          ? rows[inSearch || at < 0 ? 0 : Math.min(at + 1, rows.length - 1)]
+          : at > 0
+            ? rows[at - 1]
+            : search.current;
+      if (!next) return;
+      e.preventDefault();
+      next.focus();
+    } else if (e.key === "Enter" && inSearch) {
+      if (!rows[0]) return;
+      e.preventDefault();
+      rows[0].click();
+    } else if (e.key === "/" && !inSearch) {
+      e.preventDefault();
+      search.current?.focus();
+    } else if (
+      (e.key === "ArrowLeft" || e.key === "ArrowRight") &&
+      !inSearch &&
+      onStepAgent
+    ) {
+      e.preventDefault();
+      onStepAgent(e.key === "ArrowRight" ? 1 : -1);
+    }
+  };
+}
+
+/** Focus the ticked model, else the first, so the arrows work at once. */
+export function focusSelectedRow(root: HTMLElement | null): void {
+  const list = root?.querySelector("[data-model-list]") ?? root;
+  const rows = list?.querySelectorAll<HTMLElement>(ROWS);
+  (list?.querySelector<HTMLElement>("[data-selected]") ?? rows?.[0])?.focus();
+}

package/components/Draft/picker/useModelSearch.ts

@@ -0,0 +1,66 @@
+import { useEffect, useMemo, useState } from "react";
+import type { ChatModel } from "@/lib/chat/events";
+import {
+  buildSections,
+  matchesElsewhere,
+  type Elsewhere,
+  type Section,
+} from "./sections";
+
+interface AgentModels {
+  agent: string;
+  label: string;
+  models: ChatModel[];
+}
+
+/**
+ * The query typed into a model list, and what it leaves: the sections to
+ * show and, when this agent has no hit, the matches in the others.
+ */
+export function useModelSearch({
+  agent,
+  agents,
+  defaultValue,
+  lastValue,
+  currentValue,
+  open,
+}: {
+  agent: AgentModels;
+  /** Every agent that can be picked, to look for matches beyond this one. */
+  agents?: AgentModels[];
+  defaultValue?: string;
+  lastValue?: string;
+  currentValue?: string;
+  /** A picker that opens starts with an empty search. */
+  open: boolean;
+}): {
+  query: string;
+  setQuery: (q: string) => void;
+  sections: Section[];
+  elsewhere: Elsewhere | null;
+} {
+  const [query, setQuery] = useState("");
+  useEffect(() => {
+    if (open) setQuery("");
+  }, [open]);
+  const sections = useMemo(
+    () =>
+      buildSections({
+        models: agent.models,
+        agentLabel: agent.label,
+        defaultValue,
+        lastValue,
+        currentValue,
+        query,
+      }),
+    [agent.models, agent.label, defaultValue, lastValue, currentValue, query]
+  );
+  const elsewhere = useMemo(
+    () =>
+      sections.length === 0 && agents
+        ? matchesElsewhere(agents, agent.agent, query)
+        : null,
+    [sections.length, agents, agent.agent, query]
+  );
+  return { query, setQuery, sections, elsewhere };
+}

package/components/SidebarFooter.tsx

@@ -1,3 +1,4 @@
+import { WhatsNewButton } from "@/components/WhatsNew";
 import { ThemeToggle } from "@/components/ThemeToggle";
 import {
   Tooltip,
@@ -8,7 +9,8 @@ import {
 export function SidebarFooter() {
   return (
     <div className="mt-auto px-3 pt-2 pb-3">
-      <div className="flex items-center justify-between">
+      <WhatsNewButton />
+      <div className="mt-1 flex items-center justify-between">
         <span className="label-mono text-muted-foreground">Theme</span>
         <ThemeToggle />
       </div>

package/components/Updates/UpdateBanner.test.ts

@@ -89,7 +89,7 @@ describe("UpdateBanner", () => {
     expect(
       document.querySelector<HTMLAnchorElement>("a")?.getAttribute("href")
     ).toBe("https://example.com/compare");
-    await act(async () => button("What's new")!.click());
+    await act(async () => button("Commit list")!.click());
     expect(text()).toContain("Faster boot (#9)");
   });
 

package/components/Updates/UpdateBanner.tsx

@@ -12,6 +12,8 @@ import {
   type UpdateView,
 } from "@/lib/updates/banner";
 import { cn } from "@/lib/utils";
+import { WhatsNewHost } from "@/components/WhatsNew";
+import { whatsNewActions } from "@/stores/whatsNew";
 import { UpdateActions } from "./UpdateActions";
 
 const STEPS = ["pulling", "installing", "building", "restarting"] as const;
@@ -138,7 +140,7 @@ export function UpdateBannerView({
               className="text-muted-foreground hover:text-foreground inline-flex min-h-11 items-center gap-1 text-xs md:min-h-0"
               onClick={() => setNotesOpen(!notesOpen)}
             >
-              What's new
+              Commit list
               <ChevronDown
                 className={cn(
                   "h-3 w-3 transition-transform",
@@ -147,6 +149,15 @@ export function UpdateBannerView({
               />
             </button>
           )}
+          {state === "available" && (
+            <button
+              type="button"
+              className="text-primary inline-flex min-h-11 items-center text-xs underline md:min-h-0"
+              onClick={() => whatsNewActions.open(true)}
+            >
+              See what&apos;s new
+            </button>
+          )}
           {state === "available" && latest?.url && (
             <a
               href={latest.url}
@@ -195,18 +206,21 @@ export function UpdateBanner() {
     dismissedVersion: dismissed.version,
     dismissedRun: dismissed.run,
   });
-  if (state === "hidden" || !view) return null;
+  if (state === "hidden" || !view) return <WhatsNewHost />;
   return (
-    <UpdateBannerView
-      state={state}
-      view={view}
-      onDismiss={() =>
-        state === "available" && view.latest
-          ? dismissed.dismissVersion(view.latest.version)
-          : view.run
-            ? dismissed.dismissRun(view.run.id)
-            : undefined
-      }
-    />
+    <>
+      <WhatsNewHost />
+      <UpdateBannerView
+        state={state}
+        view={view}
+        onDismiss={() =>
+          state === "available" && view.latest
+            ? dismissed.dismissVersion(view.latest.version)
+            : view.run
+              ? dismissed.dismissRun(view.run.id)
+              : undefined
+        }
+      />
+    </>
   );
 }

package/components/WhatsNew/WhatsNewButton.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Sparkles } from "lucide-react";
+import { StatusPill } from "@/components/ui/status-pill";
+import { useWhatsNewHead } from "@/data/whats-new";
+import { useWhatsNewSeen } from "@/hooks/useWhatsNewSeen";
+import { unreadLabel } from "@/lib/whats-new/unread";
+import { whatsNewActions } from "@/stores/whatsNew";
+
+/** The sidebar footer row; it opens the one dialog (WhatsNewHost). */
+export function WhatsNewButton() {
+  const { data: head } = useWhatsNewHead();
+  const { unread } = useWhatsNewSeen(head);
+  return (
+    <button
+      type="button"
+      onClick={() => whatsNewActions.open()}
+      className="text-foreground hover:bg-accent/60 flex min-h-11 w-full items-center gap-2.5 rounded-lg px-2.5 text-[13px] transition-colors md:min-h-9"
+    >
+      <Sparkles className="text-muted-foreground size-4 shrink-0" />
+      <span className="flex-1 text-left">What&apos;s New</span>
+      {unread > 0 && (
+        <>
+          <StatusPill tone="primary" className="rounded-full px-2">
+            {unreadLabel(unread)} new
+          </StatusPill>
+          <span
+            role="img"
+            aria-label="Unread changes"
+            className="bg-primary size-2 shrink-0 rounded-full"
+          />
+        </>
+      )}
+    </button>
+  );
+}