@saadnvd1/agent-os 0.3.782 → 0.3.786

package/components/Draft/picker/AgentModelPicker.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { CatalogAgent, MachineCatalog } from "@/lib/machines/types";
+import type { AgentType } from "@/lib/providers";
+import { catalogBlocker } from "../catalogBlocker";
+import { AgentRail, AgentStrip } from "./AgentRail";
+import { ModelList } from "./ModelList";
+import { PickerSheet } from "./PickerSheet";
+import { SameAsLast, lastPick } from "./SameAsLast";
+import { SearchField } from "./SearchField";
+import { focusSelectedRow, useListKeys } from "./useListKeys";
+import { useModelSearch } from "./useModelSearch";
+
+/**
+ * Pick the agent, then only its models: a rail of agents beside the list on
+ * a desktop, a strip above it on a phone. "Same as last time" sets both.
+ */
+export function AgentModelPicker({
+  open,
+  onOpenChange,
+  catalog,
+  value,
+  projectName,
+  onPick,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  catalog: MachineCatalog;
+  value: { agent: AgentType; model: string };
+  projectName: string | null;
+  onPick: (agent: AgentType, model: string) => void;
+}) {
+  const ready = catalog.agents.filter((a) => !catalogBlocker(a));
+  const [browsed, setBrowsed] = useState<AgentType>(value.agent);
+  const browsing: CatalogAgent | undefined =
+    ready.find((a) => a.agent === browsed) ?? ready[0];
+  const root = useRef<HTMLDivElement>(null);
+  const search = useRef<HTMLInputElement>(null);
+
+  const { query, setQuery, sections, elsewhere } = useModelSearch({
+    agent: {
+      agent: browsing?.agent ?? "",
+      label: browsing?.label ?? "",
+      models: browsing?.models ?? [],
+    },
+    agents: ready,
+    defaultValue: browsing?.defaultModel,
+    lastValue: catalog.recent.find((r) => r.agent === browsing?.agent)?.model,
+    open,
+  });
+
+  useEffect(() => {
+    if (open) setBrowsed(value.agent);
+    // Only on opening: a pick changes `value` while it closes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  // After ←/→ the keys belong to the new agent's list.
+  const refocus = useRef(false);
+  useEffect(() => {
+    if (!refocus.current) return;
+    refocus.current = false;
+    focusSelectedRow(root.current);
+  }, [browsing?.agent]);
+
+  const browse = (agent: AgentType, keepQuery = false) => {
+    setBrowsed(agent);
+    if (!keepQuery) setQuery("");
+  };
+  const step = (delta: 1 | -1) => {
+    const at = ready.findIndex((a) => a.agent === browsing?.agent);
+    const next = ready[(at + delta + ready.length) % ready.length];
+    if (next) {
+      refocus.current = next.agent !== browsing?.agent;
+      browse(next.agent);
+    }
+  };
+  const onKeyDown = useListKeys(root, search, step);
+  const choose = (agent: AgentType, model: string) => {
+    onPick(agent, model);
+    onOpenChange(false);
+  };
+  const same = lastPick(catalog);
+  const lastAgent = catalog.recent[0]?.agent;
+
+  return (
+    <PickerSheet
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Agent & model"
+      onKeyDown={onKeyDown}
+      onOpened={() => focusSelectedRow(root.current)}
+    >
+      <div ref={root} className="flex min-h-0 flex-1 flex-col">
+        {same && !query && projectName && (
+          <SameAsLast pick={same} projectName={projectName} onPick={choose} />
+        )}
+        <div className="flex min-h-0 flex-1 flex-col md:flex-row">
+          <div className="hidden md:block">
+            <AgentRail
+              agents={catalog.agents}
+              browsing={browsing?.agent ?? value.agent}
+              onBrowse={(a) => browse(a)}
+            />
+          </div>
+          <div className="md:hidden">
+            <AgentStrip
+              agents={catalog.agents}
+              browsing={browsing?.agent ?? value.agent}
+              lastAgent={lastAgent}
+              onBrowse={(a) => browse(a)}
+            />
+          </div>
+          <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+            <SearchField
+              value={query}
+              onChange={setQuery}
+              placeholder={`Search ${browsing?.label ?? "agent"} models`}
+              inputRef={search}
+            />
+            <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+              {browsing && (
+                <ModelList
+                  sections={sections}
+                  selected={browsing.agent === value.agent ? value.model : null}
+                  query={query}
+                  agentLabel={browsing.label}
+                  elsewhere={elsewhere}
+                  onPick={(model) => choose(browsing.agent, model)}
+                  onJump={(a) => browse(a as AgentType, true)}
+                />
+              )}
+              {browsing?.modelsError && (
+                <p className="text-muted-foreground px-3 py-2 text-xs">
+                  Couldn&apos;t list its models: {browsing.modelsError}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+        <p className="text-muted-foreground bg-foreground/[0.03] hidden shrink-0 gap-3 px-3 py-1.5 text-[11px] md:flex">
+          <span>←→ agent</span>
+          <span>↑↓ model</span>
+          <span>⏎ select</span>
+          <span>/ search</span>
+          <span>esc close</span>
+        </p>
+      </div>
+    </PickerSheet>
+  );
+}

package/components/Draft/picker/AgentRail.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { CatalogAgent } from "@/lib/machines/types";
+import type { AgentType } from "@/lib/providers";
+import { catalogBlocker } from "../catalogBlocker";
+
+const initials = (label: string) => {
+  const w = label.split(/\s+/);
+  return (w.length > 1 ? w[0][0] + w[1][0] : label.slice(0, 2)).toUpperCase();
+};
+
+const Mark = ({ label }: { label: string }) => (
+  <span className="bg-muted text-muted-foreground grid h-6 w-6 shrink-0 place-items-center rounded-md text-[10px] font-semibold">
+    {initials(label)}
+  </span>
+);
+
+const Dot = ({ login }: { login: boolean }) => (
+  <i
+    className={cn(
+      "h-1.5 w-1.5 shrink-0 rounded-full",
+      login ? "bg-amber-500" : "bg-muted-foreground/40"
+    )}
+  />
+);
+
+/** Agents down the left on a desktop, with how many models each has. */
+export function AgentRail({
+  agents,
+  browsing,
+  onBrowse,
+}: {
+  agents: CatalogAgent[];
+  browsing: AgentType;
+  onBrowse: (agent: AgentType) => void;
+}) {
+  const [more, setMore] = useState(false);
+  const ready = agents.filter((a) => !catalogBlocker(a));
+  const other = agents.filter((a) => catalogBlocker(a));
+  return (
+    <nav
+      aria-label="Agents"
+      className="flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto p-1.5"
+    >
+      {ready.map((a) => (
+        <button
+          key={a.agent}
+          type="button"
+          aria-current={a.agent === browsing}
+          onClick={() => onBrowse(a.agent)}
+          className={cn(
+            "hover:bg-foreground/[0.05] flex h-10 items-center gap-2 rounded-lg px-2 text-left text-sm",
+            a.agent === browsing && "bg-primary/10 font-medium"
+          )}
+        >
+          <Mark label={a.label} />
+          <span className="min-w-0 flex-1 truncate">{a.label}</span>
+          <span className="text-muted-foreground text-xs">
+            {a.models.length || "–"}
+          </span>
+        </button>
+      ))}
+      {other.length > 0 && (
+        <button
+          type="button"
+          aria-expanded={more}
+          onClick={() => setMore(!more)}
+          className="text-muted-foreground hover:text-foreground flex h-9 items-center justify-between rounded-lg px-2 text-[11px] font-medium"
+        >
+          Not installed · {other.length}
+          <ChevronDown
+            className={cn("h-3 w-3 transition-transform", more && "rotate-180")}
+          />
+        </button>
+      )}
+      {more &&
+        other.map((a) => (
+          <div
+            key={a.agent}
+            className="text-muted-foreground flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm opacity-70"
+          >
+            <Mark label={a.label} />
+            <span className="flex min-w-0 flex-1 flex-col">
+              <span className="truncate">{a.label}</span>
+              <span className="truncate text-[11px]">{catalogBlocker(a)}</span>
+            </span>
+            <Dot login={a.auth === "needs-login"} />
+          </div>
+        ))}
+    </nav>
+  );
+}
+
+/** The same agents as a row to swipe along, for a phone. */
+export function AgentStrip({
+  agents,
+  browsing,
+  lastAgent,
+  onBrowse,
+}: {
+  agents: CatalogAgent[];
+  browsing: AgentType;
+  lastAgent?: AgentType;
+  onBrowse: (agent: AgentType) => void;
+}) {
+  return (
+    <div
+      aria-label="Agents"
+      className="flex shrink-0 [scrollbar-width:none] gap-1.5 overflow-x-auto px-3 py-1.5"
+    >
+      {agents.map((a) => {
+        const blocked = catalogBlocker(a);
+        return blocked ? (
+          <span
+            key={a.agent}
+            className="text-muted-foreground flex h-11 shrink-0 items-center gap-1.5 rounded-lg px-3 text-sm opacity-60"
+          >
+            <Dot login={a.auth === "needs-login"} />
+            {a.label}
+            <span className="text-[11px]">{blocked}</span>
+          </span>
+        ) : (
+          <button
+            key={a.agent}
+            type="button"
+            aria-pressed={a.agent === browsing}
+            onClick={() => onBrowse(a.agent)}
+            className={cn(
+              "bg-foreground/[0.05] flex h-11 shrink-0 items-center gap-1.5 rounded-lg px-3 text-sm",
+              a.agent === browsing && "bg-primary/15 text-primary font-medium"
+            )}
+          >
+            {a.label}
+            {a.agent === lastAgent && (
+              <i className="bg-primary h-1.5 w-1.5 rounded-full" />
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/components/Draft/picker/ModelList.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { Check, Clock } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ChatModel } from "@/lib/chat/events";
+import { ModelNote } from "./ModelNote";
+import type { Elsewhere, Section } from "./sections";
+
+// The query's words picked out in a name.
+function Highlight({ text, query }: { text: string; query: string }) {
+  const words = query.trim().split(/\s+/).filter(Boolean);
+  if (!words.length) return <>{text}</>;
+  const re = new RegExp(
+    `(${words.map((w) => w.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`,
+    "ig"
+  );
+  return (
+    <>
+      {text.split(re).map((part, i) =>
+        i % 2 ? (
+          <mark key={i} className="text-foreground bg-primary/25 rounded-sm">
+            {part}
+          </mark>
+        ) : (
+          part
+        )
+      )}
+    </>
+  );
+}
+
+function Row({
+  model,
+  selected,
+  query,
+  onPick,
+}: {
+  model: ChatModel;
+  selected: boolean;
+  query: string;
+  onPick: (value: string) => void;
+}) {
+  const sub = model.disabled ?? model.description;
+  return (
+    <button
+      type="button"
+      data-pick-row
+      data-selected={selected || undefined}
+      disabled={!!model.disabled}
+      onClick={() => onPick(model.value)}
+      className={cn(
+        "hover:bg-foreground/[0.05] focus-visible:bg-foreground/[0.07] flex min-h-11 w-full items-center gap-2 rounded-lg px-2 text-left outline-none disabled:opacity-50 md:min-h-9",
+        selected && "bg-primary/10"
+      )}
+    >
+      <Check
+        className={cn(
+          "text-primary h-3.5 w-3.5 shrink-0",
+          selected ? "opacity-100" : "opacity-0"
+        )}
+      />
+      <span className="flex min-w-0 flex-1 flex-col py-1">
+        <span className="truncate text-sm">
+          <Highlight text={model.label} query={query} />
+        </span>
+        {sub && (
+          <span className="text-muted-foreground line-clamp-2 text-xs">
+            {sub}
+          </span>
+        )}
+      </span>
+      {model.note && <ModelNote note={model.note} />}
+    </button>
+  );
+}
+
+/** The models of one agent in sections, the chosen one ticked. */
+export function ModelList({
+  sections,
+  selected,
+  query,
+  agentLabel,
+  elsewhere,
+  onPick,
+  onJump,
+}: {
+  sections: Section[];
+  selected: string | null;
+  query: string;
+  agentLabel: string;
+  elsewhere?: Elsewhere | null;
+  onPick: (value: string) => void;
+  onJump?: (agent: string) => void;
+}) {
+  if (sections.length === 0)
+    return (
+      <p className="text-muted-foreground px-3 py-6 text-center text-sm">
+        No {agentLabel ? `${agentLabel} ` : ""}model matches &ldquo;
+        {query.trim()}&rdquo;.
+        {elsewhere && onJump && (
+          <button
+            type="button"
+            data-pick-row
+            onClick={() => onJump(elsewhere.agent)}
+            className="text-primary mt-2 block min-h-11 w-full font-medium hover:underline"
+          >
+            {elsewhere.count} match in other agents
+          </button>
+        )}
+      </p>
+    );
+  return (
+    <div data-model-list className="flex flex-col gap-0.5 p-1.5">
+      {sections.map((s) => (
+        <div key={s.key} className="flex flex-col gap-0.5">
+          <div className="text-muted-foreground flex items-center justify-between px-2 pt-2 pb-1 text-[11px] font-medium">
+            <span className="flex items-center gap-1">
+              {s.kind === "last" && <Clock className="h-3 w-3" />}
+              {s.heading}
+            </span>
+            {s.kind === "group" && <span>{s.models.length}</span>}
+          </div>
+          {s.models.map((m) => (
+            <Row
+              key={m.value}
+              model={m}
+              selected={m.value === selected}
+              query={query}
+              onPick={onPick}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/Draft/picker/ModelNote.tsx

@@ -0,0 +1,15 @@
+import { StatusPill } from "@/components/ui/status-pill";
+
+// "15x usage" and up costs real quota; "Included" costs none.
+export function noteTone(note: string): "amber" | "green" | "muted" {
+  if (/included/i.test(note)) return "green";
+  return parseFloat(note) >= 10 ? "amber" : "muted";
+}
+
+export function ModelNote({ note }: { note: string }) {
+  return (
+    <StatusPill tone={noteTone(note)} className="shrink-0">
+      {note}
+    </StatusPill>
+  );
+}

package/components/Draft/picker/PickerSheet.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import type { ReactNode } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { cn } from "@/lib/utils";
+
+// Where the phone layout ends and the desktop popover begins.
+export const PICKER_DESKTOP = "(min-width: 768px)";
+
+/** A bottom sheet on a phone, a dialog on a desktop. */
+export function PickerSheet({
+  open,
+  onOpenChange,
+  title,
+  onKeyDown,
+  onOpened,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  onKeyDown?: React.KeyboardEventHandler;
+  // Desktop only: a phone keeps the keyboard down until asked.
+  onOpened?: () => void;
+  children: ReactNode;
+}) {
+  const desktop = useMediaQuery(PICKER_DESKTOP);
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        placement={desktop ? "center" : "sheet"}
+        aria-describedby={undefined}
+        aria-label={title}
+        onKeyDown={onKeyDown}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          if (desktop) onOpened?.();
+        }}
+        className={cn(
+          "gap-0 overflow-hidden p-0",
+          desktop ? "h-[440px] max-w-[620px] sm:max-w-[620px]" : "h-[86dvh]"
+        )}
+      >
+        <div className="flex h-12 shrink-0 items-center justify-between px-4 md:hidden">
+          <DialogTitle className="text-base">{title}</DialogTitle>
+          <DialogPrimitive.Close
+            aria-label="Close"
+            className="text-muted-foreground hover:text-foreground -mr-2 grid h-11 w-11 place-items-center rounded-lg"
+          >
+            <X className="h-4 w-4" />
+          </DialogPrimitive.Close>
+        </div>
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/Draft/picker/SameAsLast.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Repeat } from "lucide-react";
+import type { CatalogAgent, MachineCatalog } from "@/lib/machines/types";
+import { catalogBlocker } from "../catalogBlocker";
+import { ModelNote } from "./ModelNote";
+
+export interface LastPick {
+  agent: CatalogAgent;
+  model: CatalogAgent["models"][number];
+}
+
+/** The newest pick in the project that this machine can still run. */
+export function lastPick(catalog: MachineCatalog): LastPick | null {
+  for (const r of catalog.recent) {
+    const agent = catalog.agents.find((a) => a.agent === r.agent);
+    const model = agent?.models.find((m) => m.value === r.model);
+    if (agent && model && !catalogBlocker(agent)) return { agent, model };
+  }
+  return null;
+}
+
+/** One tap to the agent and model the project last used. */
+export function SameAsLast({
+  pick,
+  projectName,
+  onPick,
+}: {
+  pick: LastPick;
+  projectName: string;
+  onPick: (agent: CatalogAgent["agent"], model: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      data-pick-row
+      onClick={() => onPick(pick.agent.agent, pick.model.value)}
+      className="bg-primary/10 hover:bg-primary/15 mx-1.5 mt-1.5 flex min-h-11 shrink-0 items-center gap-2.5 rounded-lg px-3 text-left"
+    >
+      <Repeat className="text-primary h-4 w-4 shrink-0" />
+      <span className="flex min-w-0 flex-1 flex-col py-1">
+        <span className="truncate text-sm font-medium">
+          Same as last time in {projectName}
+        </span>
+        <span className="text-muted-foreground truncate text-xs">
+          {pick.agent.label} · {pick.model.label}
+        </span>
+      </span>
+      {pick.model.note && <ModelNote note={pick.model.note} />}
+    </button>
+  );
+}

package/components/Draft/picker/SearchField.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import type { Ref } from "react";
+import { Search, X } from "lucide-react";
+
+export function SearchField({
+  value,
+  onChange,
+  placeholder,
+  inputRef,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+  inputRef: Ref<HTMLInputElement>;
+}) {
+  return (
+    <label className="bg-input/60 hairline mx-1.5 mt-1.5 flex h-11 items-center gap-2 rounded-lg px-3 md:h-9">
+      <Search className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        autoComplete="off"
+        autoCorrect="off"
+        spellCheck={false}
+        enterKeyHint="search"
+        aria-label={placeholder}
+        className="placeholder:text-muted-foreground min-w-0 flex-1 bg-transparent text-base outline-none md:text-sm"
+      />
+      {value ? (
+        <button
+          type="button"
+          aria-label="Clear search"
+          onClick={() => onChange("")}
+          className="text-muted-foreground hover:text-foreground grid h-11 w-8 place-items-center md:h-8"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      ) : (
+        <kbd className="text-muted-foreground bg-muted hidden rounded px-1.5 text-[10px] md:block">
+          /
+        </kbd>
+      )}
+    </label>
+  );
+}