@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/agents/AgentModelBadge.tsx

@@ -0,0 +1,157 @@
+import { useState } from "react";
+import { Check, Server } from "lucide-react";
+import { Agents } from "../../lib/api";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Empty, Loading, Spinner } from "../ui";
+import { useToast } from "../Toast";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { INHERIT_MODEL, isInheritedModel, splitModelId, useModelCatalog } from "./modelCatalog";
+
+// The agent's forced model, shown as a compact badge that doubles as its own
+// editor: click it and a popover picks provider → model from what this install
+// has configured. It lives in the card's action row (beside View/Chat), so it
+// only gets the leftover width and truncates ("anthropic:claude-op…") instead
+// of stretching the card.
+export function AgentModelBadge({
+  pid, slug, model, onSaved, className,
+}: {
+  pid: string;
+  slug: string;
+  model?: string | null;
+  onSaved?: () => void;
+  className?: string;
+}) {
+  const toast = useToast();
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const inherited = isInheritedModel(model);
+
+  const pick = async (value: string) => {
+    if (value === model || (value === INHERIT_MODEL && inherited)) { setOpen(false); return; }
+    setSaving(true);
+    try {
+      await Agents.update(pid, slug, { model: value });
+      onSaved?.();
+      setOpen(false);
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        aria-label={t("agents_ui.model_change_tip")}
+        className={cn(
+          "flex min-w-0 items-center gap-1 rounded-md border border-border px-1.5 py-0.5 text-[10px] transition-colors hover:border-muted-fg/60 hover:text-foreground",
+          inherited ? "text-muted-fg" : "text-sky-800 dark:text-sky-400",
+          className,
+        )}
+      >
+        {saving ? <Spinner size={10} /> : <Server className="size-2.5 shrink-0" />}
+        <span className="truncate font-mono">
+          {inherited ? INHERIT_MODEL : model}
+        </span>
+      </PopoverTrigger>
+      <PopoverContent side="bottom" align="end" className="w-72 p-2">
+        <ModelPickerCard current={model || ""} onPick={pick} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// Rendered only once the popover opens (Base UI mounts the portal on demand),
+// so the provider catalog is fetched on first click, not per card painted.
+function ModelPickerCard({ current, onPick }: { current: string; onPick: (v: string) => void }) {
+  const { providers, loading } = useModelCatalog();
+  // Which provider's models are listed. Null = follow the stored model's
+  // provider; derived instead of stateful so the async catalog needs no effect.
+  const [picked, setPicked] = useState<string | null>(null);
+  const wanted = picked ?? splitModelId(current).provider;
+  const active = providers.find((p) => p.slug === wanted) ?? providers[0];
+
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="text-xs font-medium text-foreground">{t("agents_ui.model_change_title")}</span>
+
+      {loading && <Loading />}
+      {!loading && providers.length === 0 && (
+        <Empty icon={Server}>{t("agents_ui.model_no_providers")}</Empty>
+      )}
+
+      {!loading && providers.length > 0 && (
+        <>
+          <div className="flex flex-wrap gap-1">
+            {providers.map((p) => (
+              <button
+                key={p.slug}
+                type="button"
+                onClick={() => setPicked(p.slug)}
+                className={cn(
+                  "rounded-md border px-1.5 py-0.5 text-[10px] transition-colors",
+                  p.slug === active?.slug
+                    ? "border-transparent bg-accent text-accent-fg"
+                    : "border-border text-muted-fg hover:text-foreground",
+                )}
+              >
+                {p.name}
+              </button>
+            ))}
+          </div>
+
+          <ul className="max-h-52 overflow-y-auto">
+            <li>
+              <ModelRow
+                label={t("agents_ui.model_inherit_option")}
+                selected={isInheritedModel(current)}
+                onClick={() => onPick(INHERIT_MODEL)}
+              />
+            </li>
+            {active?.models.map((m) => {
+              const id = `${active.slug}:${m}`;
+              return (
+                <li key={id}>
+                  <ModelRow
+                    label={m}
+                    hint={m === active.defaultModel ? t("agents_ui.model_provider_default") : undefined}
+                    mono
+                    selected={current === id}
+                    onClick={() => onPick(id)}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      )}
+    </div>
+  );
+}
+
+function ModelRow({
+  label, hint, mono, selected, onClick,
+}: {
+  label: string;
+  hint?: string;
+  mono?: boolean;
+  selected: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center justify-between gap-2 rounded-md px-2 py-1 text-left text-xs hover:bg-accent hover:text-accent-fg",
+        selected && "bg-accent/50",
+      )}
+    >
+      <span className={cn("truncate", mono && "font-mono")}>{label}</span>
+      {hint && <span className="shrink-0 text-[10px] text-muted-fg">{hint}</span>}
+      {selected && <Check className="size-3 shrink-0" />}
+    </button>
+  );
+}

package/src/interfaces/web/src/components/agents/AgentModelSelect.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from "react";
+import { UiSelect } from "../UiSelect";
+import { INHERIT_MODEL, isInheritedModel, useModelCatalog } from "./modelCatalog";
+import { t } from "../../i18n";
+
+// Model override for one agent, offered as a list instead of a free-text field.
+//
+// The options are built from the providers actually configured in this install
+// (config.engines): for each active provider we offer its default model plus
+// the curated known_models for its engine, emitted as the `<provider>:<model>`
+// id the router parses.
+//
+// The first option is `inherit` — the stored marker for "no override". An
+// agent file with no `Model:` at all selects it too, so the empty and the
+// explicit form read the same in the form.
+//
+// A value already stored that no longer matches a configured provider is kept
+// as its own option, so opening the form never silently drops it.
+export function AgentModelSelect({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  const { providers } = useModelCatalog();
+  const selected = isInheritedModel(value) ? INHERIT_MODEL : value;
+
+  const options = useMemo(() => {
+    const seen = new Set<string>();
+    const out: { value: string; label: string; description?: string }[] = [
+      { value: INHERIT_MODEL, label: t("project.agent_detail.model_router_default") },
+    ];
+    for (const prov of providers) {
+      for (const m of prov.models) {
+        const id = `${prov.slug}:${m}`;
+        if (seen.has(id)) continue;
+        seen.add(id);
+        out.push({
+          value: id,
+          label: id,
+          description: prov.defaultModel === m
+            ? t("project.agent_detail.model_provider_default", { provider: prov.name })
+            : prov.name,
+        });
+      }
+    }
+    // Keep an unknown stored value selectable rather than dropping it.
+    if (selected !== INHERIT_MODEL && !seen.has(selected)) {
+      out.push({ value: selected, label: selected, description: t("project.agent_detail.model_unlisted") });
+    }
+    return out;
+  }, [providers, selected]);
+
+  return (
+    <UiSelect
+      value={selected}
+      onChange={onChange}
+      options={options}
+      placeholder={t("project.agent_detail.model_router_default")}
+    />
+  );
+}

package/src/interfaces/web/src/components/agents/AgentSkillsPicker.tsx

@@ -0,0 +1,115 @@
+import useSWR from "swr";
+import { Lock, Sparkles } from "lucide-react";
+import { Skills } from "../../lib/api/skills";
+import { Switch } from "../ui";
+import { Tip } from "../ui/tip";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { toneOutline } from "../../lib/tone";
+
+// Per-agent skill selection, fed by the project's own skill list so the choices
+// here are exactly what /skills shows for this project.
+//
+// Two independent gates decide a row's state:
+//   • scope gate  — a skill switched off globally or for this project can't be
+//     turned on for one agent. It renders locked. If the agent had already
+//     declared it, the box still reads checked (the declaration survives in
+//     frontmatter) — it just can't be toggled until the scope re-enables it.
+//   • agent gate  — the agent's own Skills frontmatter list.
+//
+// "Use the project defaults" clears the agent's list entirely: an agent with no
+// declared skills inherits whatever the project enables, which is what the
+// runtime already does (see agentSkills() in build-agent-system.js).
+export function AgentSkillsPicker({
+  value, onChange, projectPath, useDefaults, onUseDefaults, matchHeight,
+}: {
+  value: string[];
+  onChange: (next: string[]) => void;
+  projectPath?: string;
+  useDefaults: boolean;
+  onUseDefaults: (v: boolean) => void;
+  /** Cap the scroller so it lines up with the tools card beside it. */
+  matchHeight?: number;
+}) {
+  const { data, isLoading } = useSWR(
+    ["/api/skills", projectPath ?? "default"],
+    () => Skills.list(projectPath),
+  );
+  const skills = data?.skills ?? [];
+  const selected = new Set(value);
+
+  const toggle = (slug: string) => {
+    const next = new Set(selected);
+    if (next.has(slug)) next.delete(slug); else next.add(slug);
+    onChange([...next]);
+  };
+
+  return (
+    <div className="space-y-3">
+      <Switch
+        checked={useDefaults}
+        onChange={onUseDefaults}
+        label={t("agents_form.skills_use_defaults")}
+      />
+      <p className="-mt-1 text-[11px] text-muted-fg">{t("agents_form.skills_use_defaults_hint")}</p>
+
+      <div
+        className={cn(
+          "overflow-y-auto rounded-lg border border-border",
+          useDefaults && "pointer-events-none opacity-40",
+        )}
+        style={{ maxHeight: matchHeight ? `${matchHeight}px` : undefined }}
+        aria-disabled={useDefaults}
+      >
+        {isLoading && <p className="p-3 text-xs text-muted-fg">{t("common.loading")}</p>}
+        {!isLoading && skills.length === 0 && (
+          <p className="p-3 text-xs text-muted-fg">{t("agents_form.skills_empty")}</p>
+        )}
+        <ul className="divide-y divide-border">
+          {skills.map((s) => {
+            // `enabled === false` = switched off for this scope. Built-in
+            // private skills are always on, so they never lock.
+            const lockedByScope = s.enabled === false && !s.private;
+            const on = selected.has(s.slug);
+            const row = (
+              <button
+                type="button"
+                disabled={lockedByScope || useDefaults}
+                onClick={() => toggle(s.slug)}
+                className={cn(
+                  "flex w-full items-start gap-2 px-2.5 py-2 text-left transition-colors",
+                  lockedByScope ? "cursor-not-allowed opacity-45" : "hover:bg-muted/40",
+                )}
+              >
+                <span
+                  className={cn(
+                    "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded border",
+                    on ? toneOutline.emerald : "border-border",
+                  )}
+                >
+                  {on && <Sparkles size={10} />}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-center gap-1.5">
+                    <span className="truncate font-mono text-[11px]">{s.slug}</span>
+                    {lockedByScope && <Lock size={10} className="shrink-0 text-muted-fg" />}
+                  </span>
+                  {s.description && (
+                    <span className="mt-0.5 block truncate text-[10px] text-muted-fg">{s.description}</span>
+                  )}
+                </span>
+              </button>
+            );
+            return (
+              <li key={s.slug}>
+                {lockedByScope
+                  ? <Tip content={t("agents_form.skills_locked")}>{row}</Tip>
+                  : row}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/agents/BlobAvatar.tsx

@@ -0,0 +1,50 @@
+import type { CSSProperties } from "react";
+import { cn } from "../../lib/cn";
+import { BLOB_PRESETS, BLOB_VIEWBOX } from "./blobPresets";
+
+// Deterministic 0..-3.9s delay from a seed (agent slug), so a list of blobs
+// doesn't blink/look in lockstep.
+function delayFor(seed?: string): string {
+  if (!seed) return "0s";
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
+  return `-${(h % 40) / 10}s`;
+}
+
+/**
+ * Animated silicone-blob avatar: a transparent body PNG with rounded-rect eyes
+ * drawn on top in an overlaid SVG. The whole thing bobs+tilts; the eyes look
+ * around and blink on their own nested groups (see .blobav* in styles.css).
+ * Set `animated={false}` for a still version (icon picker grid).
+ */
+export function BlobAvatar({
+  preset,
+  size = 36,
+  animated = true,
+  seed,
+  className,
+}: {
+  preset: string;
+  size?: number;
+  animated?: boolean;
+  seed?: string;
+  className?: string;
+}) {
+  const p = BLOB_PRESETS[preset];
+  if (!p) return null;
+  const style: CSSProperties = { width: size, height: size, ["--bl-d" as string]: delayFor(seed) };
+  return (
+    <span className={cn("blobav", animated && "blobav-anim", className)} style={style}>
+      <img className="blobav-body" src={p.src} alt="" draggable={false} />
+      <svg className="blobav-eyes-svg" viewBox={`0 0 ${BLOB_VIEWBOX} ${BLOB_VIEWBOX}`} aria-hidden="true">
+        <g className="blobav-look">
+          <g className="blobav-eyes">
+            {p.eyes.map((e, i) => (
+              <rect key={i} x={e.x} y={e.y} width={e.w} height={e.h} rx={e.rx} fill={p.eyeColor} />
+            ))}
+          </g>
+        </g>
+      </svg>
+    </span>
+  );
+}

package/src/interfaces/web/src/components/agents/blobPresets.ts

@@ -0,0 +1,50 @@
+// AUTO-GENERATED by scripts/export_web_assets.py — do not edit by hand.
+// Square blob bodies live in public/modules/blobs/<key>.png; eye rects are in the
+// same 256x256 canvas and are drawn animated on top by <BlobAvatar>. An empty eye
+// list = a 'cyclops' whose face is baked into the render (it bobs but doesn't blink).
+
+export type BlobEye = { x: number; y: number; w: number; h: number; rx: number };
+export type BlobPreset = { key: string; label: string; src: string; eyeColor: string; eyes: BlobEye[] };
+
+export const BLOB_VIEWBOX = 256;
+
+export const BLOB_PRESETS: Record<string, BlobPreset> = {
+  menta: { key: "menta", label: "Menta", src: "/modules/blobs/menta.png", eyeColor: "#15181C", eyes: [{ x: 121.9, y: 93.1, w: 16.0, h: 33.8, rx: 6.4 }, { x: 151.9, y: 93.1, w: 16.0, h: 33.8, rx: 6.4 }] },
+  parche: { key: "parche", label: "Parche", src: "/modules/blobs/parche.png", eyeColor: "#15181C", eyes: [{ x: 133.6, y: 88.6, w: 17.3, h: 33.8, rx: 6.9 }, { x: 166.1, y: 88.6, w: 17.3, h: 33.8, rx: 6.9 }] },
+  trino: { key: "trino", label: "Trino", src: "/modules/blobs/trino.png", eyeColor: "#15181C", eyes: [{ x: 105.5, y: 130.1, w: 18.0, h: 29.7, rx: 7.2 }, { x: 141.5, y: 130.1, w: 18.0, h: 29.7, rx: 7.2 }] },
+  cubi: { key: "cubi", label: "Cubi", src: "/modules/blobs/cubi.png", eyeColor: "#15181C", eyes: [{ x: 103.2, y: 93.1, w: 17.2, h: 33.8, rx: 6.9 }, { x: 135.6, y: 93.1, w: 17.2, h: 33.8, rx: 6.9 }] },
+  nimbo: { key: "nimbo", label: "Nimbo", src: "/modules/blobs/nimbo.png", eyeColor: "#15181C", eyes: [{ x: 103.3, y: 93.1, w: 17.1, h: 33.8, rx: 6.9 }, { x: 135.6, y: 93.1, w: 17.1, h: 33.8, rx: 6.9 }] },
+  papa: { key: "papa", label: "Papa", src: "/modules/blobs/papa.png", eyeColor: "#15181C", eyes: [{ x: 125.5, y: 90.9, w: 18.5, h: 30.5, rx: 7.4 }, { x: 161.6, y: 90.9, w: 18.5, h: 30.5, rx: 7.4 }] },
+  noche: { key: "noche", label: "Noche", src: "/modules/blobs/noche.png", eyeColor: "#3AE7B0", eyes: [{ x: 123.8, y: 133.6, w: 15.9, h: 33.8, rx: 6.4 }, { x: 157.6, y: 133.6, w: 15.9, h: 33.8, rx: 6.4 }] },
+  kiwi: { key: "kiwi", label: "Kiwi", src: "/modules/blobs/kiwi.png", eyeColor: "#15181C", eyes: [{ x: 123.0, y: 84.1, w: 13.1, h: 29.3, rx: 5.2 }, { x: 147.7, y: 84.1, w: 13.1, h: 29.3, rx: 5.2 }] },
+  gajo: { key: "gajo", label: "Gajo", src: "/modules/blobs/gajo.png", eyeColor: "#15181C", eyes: [{ x: 107.9, y: 95.3, w: 16.6, h: 29.3, rx: 6.7 }, { x: 139.3, y: 95.3, w: 16.6, h: 29.3, rx: 6.7 }] },
+  campana: { key: "campana", label: "Campana", src: "/modules/blobs/campana.png", eyeColor: "#15181C", eyes: [{ x: 108.6, y: 86.3, w: 15.8, h: 29.3, rx: 6.3 }, { x: 135.5, y: 86.3, w: 15.8, h: 29.3, rx: 6.3 }] },
+  cobalto: { key: "cobalto", label: "Cobalto", src: "/modules/blobs/cobalto.png", eyeColor: "#15181C", eyes: [{ x: 125.5, y: 95.3, w: 16.8, h: 29.3, rx: 6.7 }, { x: 157.2, y: 95.3, w: 16.8, h: 29.3, rx: 6.7 }] },
+  rubi: { key: "rubi", label: "Rubí", src: "/modules/blobs/rubi.png", eyeColor: "#15181C", eyes: [{ x: 123.0, y: 84.1, w: 13.1, h: 29.3, rx: 5.2 }, { x: 147.7, y: 84.1, w: 13.1, h: 29.3, rx: 5.2 }] },
+  trebol: { key: "trebol", label: "Trébol", src: "/modules/blobs/trebol.png", eyeColor: "#15181C", eyes: [{ x: 123.6, y: 120.1, w: 17.2, h: 29.3, rx: 6.9 }, { x: 155.1, y: 120.1, w: 17.2, h: 29.3, rx: 6.9 }] },
+  saturno: { key: "saturno", label: "Saturno", src: "/modules/blobs/saturno.png", eyeColor: "#15181C", eyes: [] },
+  onyx: { key: "onyx", label: "Onyx", src: "/modules/blobs/onyx.png", eyeColor: "#3AE7B0", eyes: [{ x: 119.7, y: 124.6, w: 16.6, h: 29.3, rx: 6.6 }, { x: 152.9, y: 124.6, w: 16.6, h: 29.3, rx: 6.6 }] },
+  perla: { key: "perla", label: "Perla", src: "/modules/blobs/perla.png", eyeColor: "#15181C", eyes: [{ x: 121.4, y: 108.4, w: 13.5, h: 21.4, rx: 5.4 }, { x: 148.5, y: 108.4, w: 13.5, h: 21.4, rx: 5.4 }] },
+  faro: { key: "faro", label: "Faro", src: "/modules/blobs/faro.png", eyeColor: "#15181C", eyes: [{ x: 94.4, y: 100.0, w: 14.2, h: 20.3, rx: 5.7 }, { x: 122.7, y: 100.0, w: 14.2, h: 20.3, rx: 5.7 }] },
+  brasa: { key: "brasa", label: "Brasa", src: "/modules/blobs/brasa.png", eyeColor: "#15181C", eyes: [{ x: 94.8, y: 95.2, w: 16.9, h: 18.6, rx: 6.8 }, { x: 126.3, y: 95.2, w: 16.9, h: 18.6, rx: 6.8 }] },
+  aqua: { key: "aqua", label: "Aqua", src: "/modules/blobs/aqua.png", eyeColor: "#15181C", eyes: [{ x: 92.9, y: 105.8, w: 10.9, h: 20.3, rx: 4.4 }, { x: 114.7, y: 105.8, w: 10.9, h: 20.3, rx: 4.4 }] },
+  coral: { key: "coral", label: "Coral", src: "/modules/blobs/coral.png", eyeColor: "#15181C", eyes: [{ x: 99.4, y: 147.0, w: 14.5, h: 19.1, rx: 5.8 }, { x: 129.3, y: 147.0, w: 14.5, h: 19.1, rx: 5.8 }] },
+  zafiro: { key: "zafiro", label: "Zafiro", src: "/modules/blobs/zafiro.png", eyeColor: "#15181C", eyes: [{ x: 105.7, y: 116.5, w: 14.3, h: 21.4, rx: 5.7 }, { x: 132.4, y: 116.5, w: 14.3, h: 21.4, rx: 5.7 }] },
+  pino: { key: "pino", label: "Pino", src: "/modules/blobs/pino.png", eyeColor: "#15181C", eyes: [{ x: 125.0, y: 123.2, w: 13.4, h: 20.3, rx: 5.4 }, { x: 151.9, y: 123.2, w: 13.4, h: 20.3, rx: 5.4 }] },
+  eclipse: { key: "eclipse", label: "Eclipse", src: "/modules/blobs/eclipse.png", eyeColor: "#060709", eyes: [{ x: 102.8, y: 111.9, w: 15.5, h: 20.3, rx: 6.2 }, { x: 131.5, y: 111.9, w: 15.5, h: 20.3, rx: 6.2 }] },
+  peon: { key: "peon", label: "Peón", src: "/modules/blobs/peon.png", eyeColor: "#15181C", eyes: [{ x: 109.1, y: 85.6, w: 10.2, h: 18.0, rx: 4.1 }, { x: 132.9, y: 85.6, w: 10.2, h: 18.0, rx: 4.1 }] },
+  ovni: { key: "ovni", label: "Ovni", src: "/modules/blobs/ovni.png", eyeColor: "#15181C", eyes: [{ x: 106.6, y: 105.0, w: 15.8, h: 16.0, rx: 6.3 }, { x: 138.1, y: 105.0, w: 15.8, h: 16.0, rx: 6.3 }] },
+  amatista: { key: "amatista", label: "Amatista", src: "/modules/blobs/amatista.png", eyeColor: "#15181C", eyes: [{ x: 85.8, y: 103.4, w: 16.9, h: 18.3, rx: 6.8 }, { x: 117.3, y: 103.4, w: 16.9, h: 18.3, rx: 6.8 }] },
+  volcan: { key: "volcan", label: "Volcán", src: "/modules/blobs/volcan.png", eyeColor: "#15181C", eyes: [{ x: 100.6, y: 97.4, w: 13.4, h: 19.1, rx: 5.4 }, { x: 127.5, y: 97.4, w: 13.4, h: 19.1, rx: 5.4 }] },
+  quad: { key: "quad", label: "Quad", src: "/modules/blobs/quad.png", eyeColor: "#15181C", eyes: [{ x: 80.9, y: 68.2, w: 17.6, h: 21.8, rx: 7.0 }, { x: 148.5, y: 68.2, w: 17.6, h: 21.8, rx: 7.0 }] },
+  cometa: { key: "cometa", label: "Cometa", src: "/modules/blobs/cometa.png", eyeColor: "#15181C", eyes: [{ x: 107.5, y: 94.8, w: 15.7, h: 21.4, rx: 6.3 }, { x: 136.9, y: 94.8, w: 15.7, h: 21.4, rx: 6.3 }] },
+  lila: { key: "lila", label: "Lila", src: "/modules/blobs/lila.png", eyeColor: "#15181C", eyes: [{ x: 104.8, y: 104.3, w: 14.1, h: 20.3, rx: 5.6 }, { x: 133.0, y: 104.3, w: 14.1, h: 20.3, rx: 5.6 }] },
+  orbita: { key: "orbita", label: "Órbita", src: "/modules/blobs/orbita.png", eyeColor: "#060709", eyes: [{ x: 104.3, y: 96.7, w: 15.8, h: 18.7, rx: 6.3 }, { x: 135.9, y: 96.7, w: 15.8, h: 18.7, rx: 6.3 }] },
+  caracol: { key: "caracol", label: "Caracol", src: "/modules/blobs/caracol.png", eyeColor: "#15181C", eyes: [{ x: 149.9, y: 109.4, w: 14.6, h: 17.1, rx: 5.9 }, { x: 181.4, y: 109.4, w: 14.6, h: 17.1, rx: 5.9 }] },
+  iris: { key: "iris", label: "Iris", src: "/modules/blobs/iris.png", eyeColor: "#15181C", eyes: [{ x: 97.7, y: 106.6, w: 13.7, h: 20.3, rx: 5.5 }, { x: 125.1, y: 106.6, w: 13.7, h: 20.3, rx: 5.5 }] },
+  laguna: { key: "laguna", label: "Laguna", src: "/modules/blobs/laguna.png", eyeColor: "#15181C", eyes: [{ x: 106.6, y: 83.8, w: 15.8, h: 18.5, rx: 6.3 }, { x: 138.1, y: 83.8, w: 15.8, h: 18.5, rx: 6.3 }] },
+  carbon: { key: "carbon", label: "Carbón", src: "/modules/blobs/carbon.png", eyeColor: "#060709", eyes: [{ x: 93.7, y: 99.3, w: 16.3, h: 21.4, rx: 6.5 }, { x: 124.2, y: 99.3, w: 16.3, h: 21.4, rx: 6.5 }] },
+};
+
+export const BLOB_KEYS = Object.keys(BLOB_PRESETS);
+export function isBlobKey(v?: string | null): v is string { return !!v && v in BLOB_PRESETS; }

package/src/interfaces/web/src/components/agents/modelCatalog.ts

@@ -0,0 +1,66 @@
+import { useMemo } from "react";
+import useSWR from "swr";
+import { Admin } from "../../lib/api/admin";
+import { Engines } from "../../lib/api/engines";
+
+/** One configured provider plus the models we can offer for it. */
+export interface CatalogProvider {
+  slug: string;
+  name: string;
+  defaultModel: string;
+  /** `default_model` first, then the engine's curated known_models. */
+  models: string[];
+}
+
+// A model id is `<provider>:<model>` and the model half can hold colons of its
+// own (ollama:gemma2:9b), so only the first one separates.
+export function splitModelId(id: string): { provider: string; model: string } {
+  const i = id.indexOf(":");
+  return i < 0 ? { provider: "", model: id } : { provider: id.slice(0, i), model: id.slice(i + 1) };
+}
+
+/**
+ * What the UI writes for "no forced model". The daemon accepts an absent field
+ * too, but `inherit` is APC's documented marker and keeps the agent file
+ * self-explanatory — core/agent/agent-model.js resolves both to the router.
+ */
+export const INHERIT_MODEL = "inherit";
+
+// No override: either nothing stored, or the `inherit` marker.
+export function isInheritedModel(model?: string | null): boolean {
+  return !model || model.trim().toLowerCase() === INHERIT_MODEL;
+}
+
+/**
+ * The models this install can actually offer, grouped by provider: for every
+ * active provider in `config.engines`, its default model plus the curated
+ * known_models of its engine (source of truth: core/engines/presets.js).
+ *
+ * Both requests are plain SWR keys shared app-wide, so several pickers on
+ * screen cost one fetch each.
+ */
+export function useModelCatalog() {
+  const cfg = useSWR("/api/admin/config", () => Admin.config.get());
+  const presets = useSWR("/api/engines/presets", () => Engines.presets());
+
+  const providers = useMemo<CatalogProvider[]>(() => {
+    const engines = cfg.data?.config?.engines ?? {};
+    const catalog = presets.data?.presets ?? {};
+    const out: CatalogProvider[] = [];
+    for (const [slug, prov] of Object.entries(engines)) {
+      if (prov?.is_active === false) continue;
+      const engine = prov?.engine || slug;
+      const models: string[] = [];
+      for (const m of [
+        ...(prov?.default_model ? [prov.default_model] : []),
+        ...(catalog[engine]?.known_models ?? []),
+      ]) {
+        if (!models.includes(m)) models.push(m);
+      }
+      out.push({ slug, name: prov?.name || slug, defaultModel: prov?.default_model || "", models });
+    }
+    return out;
+  }, [cfg.data, presets.data]);
+
+  return { providers, loading: cfg.isLoading || presets.isLoading };
+}

package/src/interfaces/web/src/components/chat/ActionGroup.tsx

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import { ChevronRight, Loader2, Wrench } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { ToolCall } from "./ToolCall";
+import { AskQuestionsCard } from "./AskQuestionsCard";
+import { ReasoningBlock } from "./ReasoningBlock";
+import type { ChatPart } from "../../hooks/useChat";
+import { t } from "../../i18n";
+
+// One run of tool calls, as a block: the tools the agent ran back to back,
+// behind a row that names how many and whether any failed.
+//
+// A turn here can take 24 steps, so the transcript used to read as bubble,
+// card, bubble, card … for a whole screen — the answer buried at the bottom of
+// its own progress log. The steps are worth keeping (a failed call is often the
+// whole story), just not worth a screenful: they collapse into one row, one
+// click from the detail.
+//
+// A turn may have SEVERAL of these, in the order the work happened, with what
+// the agent said in between standing outside them (see segmentTurnParts). They
+// are numbered against the turn's own count, not each block's, so the reader
+// still reads one turn rather than a series of small ones.
+//
+// Open while the turn runs — you want to watch it work — and collapsed once it
+// finishes, unless the reader says otherwise (their click wins from then on).
+
+interface Props {
+  /** One run of tool calls, with the reasoning around them. */
+  parts: ChatPart[];
+  /** The turn is still streaming. */
+  running?: boolean;
+  /** Where this run sits in the turn's own count (1-based, inclusive). Given
+   *  only when the turn has more than one block — a lone block just says how
+   *  many, and "actions 1–4 of 4" would be noise. */
+  range?: { from: number; to: number; total: number };
+}
+
+export function ActionGroup({ parts, running, range }: Props) {
+  const [manual, setManual] = useState<boolean | null>(null);
+
+  const tools = parts.filter((p) => p.kind === "tool");
+  const failed = tools.filter((p) => p.kind === "tool" && p.status === "error").length;
+  // An ask_questions card is a control the user has to reach — never hide it.
+  const hasAsk = tools.some((p) => p.kind === "tool" && p.tool === "ask_questions");
+  const open = manual ?? (!!running || hasAsk);
+
+  if (tools.length === 0) return null;
+
+  return (
+    <div className="w-full overflow-hidden rounded-lg border border-border bg-muted/20">
+      <button
+        type="button"
+        onClick={() => setManual(!open)}
+        aria-expanded={open}
+        className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-[12px]"
+      >
+        <ChevronRight
+          className={cn("size-3 shrink-0 text-muted-foreground transition-transform", open && "rotate-90")}
+        />
+        {running ? (
+          <Loader2 className="size-3.5 shrink-0 animate-spin text-sky-700 dark:text-sky-400" />
+        ) : (
+          <Wrench className="size-3.5 shrink-0 text-muted-foreground" />
+        )}
+        <span className="font-medium">
+          {range
+            // "Actions 7–7 of 7" for a block of one is a sentence tripping over
+            // itself; it is action 7.
+            ? range.from === range.to
+              ? t("chat_ui.actions_at", { n: range.from, total: range.total })
+              : t("chat_ui.actions_range", { from: range.from, to: range.to, total: range.total })
+            : tools.length === 1
+              ? t("chat_ui.actions_count_one")
+              : t("chat_ui.actions_count", { n: tools.length })}
+        </span>
+        {failed > 0 && (
+          <span className="text-rose-700 dark:text-rose-400">
+            · {t("shared_ui.tools_failed", { n: failed })}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div className="flex flex-col gap-1.5 border-t border-border/60 px-2.5 py-2">
+          {parts.map((part, i) =>
+            part.kind === "reasoning" ? (
+              <ReasoningBlock key={i} text={part.text} streaming={part.streaming} />
+            ) : part.kind === "tool" ? (
+              part.tool === "ask_questions" ? (
+                <AskQuestionsCard key={`${part.id}-${i}`} part={part} pending={false} />
+              ) : (
+                <ToolCall key={`${part.id}-${i}`} part={part} />
+              )
+            ) : null,
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Cut a turn into the blocks it actually happened in.
+ *
+ * A turn is an ordered list: the agent says a line, runs three tools, says
+ * what it found, runs three more, answers. This used to be flattened to
+ * "everything up to the LAST tool call" + "whatever came after" — one opaque
+ * work block with every sentence the agent wrote along the way buried inside
+ * it, and only the closing line left standing. What it did in between was
+ * readable only by expanding a log; turning the log off left the middle of the
+ * turn missing entirely.
+ *
+ * So: consecutive tool calls collapse into a block, and anything the agent SAID
+ * stays out of the blocks, in the order it said it. Same parts, same turn, same
+ * count — the shape it happened in.
+ *
+ * `ask_questions` is never grouped: it is a control the reader has to reach.
+ * Reasoning belongs to the step it was thinking about, so it rides in the
+ * neighbouring block, and stands alone only when there is no block to join.
+ */
+export type TurnSegment =
+  /** A run of tool calls (with the reasoning around them). `from`/`to` are the
+   *  1-based positions of its first and last tool WITHIN THE TURN, so several
+   *  blocks read as one counter rather than restarting at 1. */
+  | { kind: "work"; parts: ChatPart[]; from: number; to: number }
+  /** Something the agent said, or a card that must stay in the open. */
+  | { kind: "part"; part: ChatPart };
+
+const isWorkTool = (p: ChatPart) => p.kind === "tool" && p.tool !== "ask_questions";
+
+export function segmentTurnParts(parts: ChatPart[]): TurnSegment[] {
+  const out: TurnSegment[] = [];
+  let open: Extract<TurnSegment, { kind: "work" }> | null = null;
+  let seen = 0; // tools so far in this turn — the shared counter
+
+  for (const part of parts) {
+    if (isWorkTool(part)) {
+      seen += 1;
+      if (!open) {
+        open = { kind: "work", parts: [], from: seen, to: seen };
+        out.push(open);
+      }
+      open.parts.push(part);
+      open.to = seen;
+      continue;
+    }
+    // Thinking joins the block it was thinking about rather than opening one:
+    // a block that is nothing but reasoning would render as "0 actions".
+    if (part.kind === "reasoning" && open) {
+      open.parts.push(part);
+      continue;
+    }
+    open = null;
+    out.push({ kind: "part", part });
+  }
+  return out;
+}
+
+/** Tool calls in the turn — the total the blocks are numbered against. */
+export function countTurnTools(parts: ChatPart[]): number {
+  return parts.filter(isWorkTool).length;
+}