@polpo-ai/dashboard 0.1.0

package/components/dashboard/agent-capabilities.tsx

@@ -0,0 +1,326 @@
+"use client";
+
+/**
+ * Agent capabilities — one full-width card per modality
+ * (Text / Image / Audio / Video). Reads as "here's the model behind
+ * each capability". There is no on/off here: whether a capability is
+ * usable is governed per-tool in the Tools tab.
+ *
+ * Layout per card:
+ *   [icon + name]  [description]
+ *   [model pickers grid]
+ *
+ * Each slot is a `<ModelSelectorCompact>` (ghost appearance) — an inline
+ * trigger that opens a command-palette dropdown (search + keyboard nav +
+ * cost tiers), no modal. On change we PATCH the matching
+ * agent field and `router.refresh()` so the server-rendered page picks
+ * up the new value.
+ *
+ * Catalogs:
+ *   - chat fields (model, vision) → Vercel AI Gateway catalog
+ *     (`/api/gateway/models`), fetched once here and shared.
+ *   - media fields (image/video/voice) → `DEFAULT_MEDIA_MODELS`
+ *     filtered by kind.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Image as ImageIcon, Video, Volume2, Type, Loader2 } from "lucide-react";
+import type { AgentConfig } from "@polpo-ai/core";
+import {
+  ModelSelectorCompact,
+  DEFAULT_MEDIA_MODELS,
+  DEFAULT_MEDIA_PROVIDERS,
+  DEFAULT_PROVIDERS,
+  type Model,
+} from "@lumea-labs/llm";
+
+/** The provider-entry shape both selectors accept (logo + colour). */
+type Provider = (typeof DEFAULT_PROVIDERS)[number];
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+/** Free, local (no-key) text-to-speech engine. Not in the media catalog, so
+ *  we surface it explicitly as the default TTS option. */
+const EDGE_TTS_MODEL: Model = {
+  id: "edge/edge-tts",
+  name: "Edge TTS — free",
+  providerId: "edge",
+  kind: "voice",
+};
+
+/** Which agent field a model slot writes to, and how to resolve it. */
+interface ModelSlot {
+  /** Short uppercase label, e.g. "GENERATION". */
+  label: string;
+  /** The AgentConfig key this slot patches, e.g. "image_model". */
+  field: keyof AgentConfig;
+  /** Effective value (agent override or default). */
+  value: string;
+  /** True when the value comes from agent config (not the default). */
+  configured: boolean;
+  /** Media catalog kind for resolution / selector filtering. */
+  kind: Model["kind"];
+  /** "chat" slots use the gateway catalog; "media" use DEFAULT_MEDIA_MODELS. */
+  catalog: "chat" | "media";
+}
+
+interface CapabilityCard {
+  name: "Text" | "Image" | "Audio" | "Video";
+  description: string;
+  icon: typeof ImageIcon;
+  slots: ModelSlot[];
+}
+
+interface GatewayModel {
+  id: string;
+  owned_by?: string;
+}
+
+/** Resolve a model id against DEFAULT_MEDIA_MODELS; synthesise a minimal
+ *  entry (provider logo + raw name) when not in the catalog. */
+function resolveMediaModel(modelId: string, kind: Model["kind"]): Model {
+  const lower = modelId.toLowerCase();
+  const exact = DEFAULT_MEDIA_MODELS.find((m) => m.id.toLowerCase() === lower);
+  if (exact) return exact;
+  const suffix = DEFAULT_MEDIA_MODELS.find(
+    (m) => lower.endsWith(`/${m.id.toLowerCase()}`) || lower.endsWith(m.id.toLowerCase()),
+  );
+  if (suffix) return suffix;
+  const slashIdx = modelId.indexOf("/");
+  const providerId = slashIdx > 0 ? modelId.slice(0, slashIdx) : "other";
+  const remainder = slashIdx > 0 ? modelId.slice(slashIdx + 1) : modelId;
+  return { id: modelId, name: remainder, providerId, kind };
+}
+
+/** A single selectable model slot — a clean badge trigger that opens a
+ *  searchable model picker in a dialog. */
+function ModelSlotPicker({
+  slot,
+  projectId,
+  agentName,
+  gatewayModels,
+  gatewayProviders,
+}: {
+  slot: ModelSlot;
+  projectId: string;
+  agentName: string;
+  gatewayModels: Model[];
+  gatewayProviders: Provider[];
+}) {
+  const router = useRouter();
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isChat = slot.catalog === "chat";
+  const providers = isChat ? gatewayProviders : DEFAULT_MEDIA_PROVIDERS;
+  let baseModels = isChat
+    ? gatewayModels
+    : DEFAULT_MEDIA_MODELS.filter((m) => m.kind === slot.kind);
+  // Edge TTS is a free, local (no-key) text-to-speech engine that isn't in
+  // the media catalog — surface it as a first-class, default option on the
+  // text-to-speech slot so it can be picked without a provider key.
+  if (slot.field === "tts_model") {
+    baseModels = [EDGE_TTS_MODEL, ...baseModels.filter((m) => m.id !== EDGE_TTS_MODEL.id)];
+  }
+  // Guarantee the current value renders in the trigger even when it's a
+  // custom / not-in-catalog id — synthesise a minimal entry and prepend it.
+  const models = baseModels.some((m) => m.id === slot.value)
+    ? baseModels
+    : [resolveMediaModel(slot.value, slot.kind), ...baseModels];
+
+  async function handleChange(modelId: string) {
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `${API_URL}/v1/projects/${projectId}/data/v1/agents/${encodeURIComponent(agentName)}`,
+        {
+          method: "PATCH",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ [slot.field]: modelId }),
+        },
+      );
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        setError(body.error ?? `Update failed (${res.status})`);
+        setSaving(false);
+        return;
+      }
+      router.refresh();
+    } catch (err) {
+      setError((err as Error).message ?? "Update failed");
+    }
+    setSaving(false);
+  }
+
+  return (
+    <div className="flex min-w-0 flex-col gap-1">
+      <div className="flex items-center gap-4">
+        {/* Field label — what this model powers. */}
+        <span className="flex w-44 shrink-0 items-center gap-1.5 whitespace-nowrap text-[13px] font-medium text-foreground">
+          {slot.label}
+          {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
+        </span>
+        {/* Bordered select-style trigger → reads as an editable control.
+            Opens a command palette (search + keyboard nav + cost tiers). */}
+        <div className="min-w-0 flex-1">
+          <ModelSelectorCompact
+            models={models}
+            value={slot.value}
+            onChange={handleChange}
+            providers={providers}
+            appearance="button"
+            showCost
+            activeFirst
+            className="w-full justify-between"
+          />
+        </div>
+        {!slot.configured && (
+          <span className="shrink-0 text-[10px] uppercase tracking-wider text-muted-foreground/50">
+            default
+          </span>
+        )}
+      </div>
+
+      {error && (
+        <span className="block pl-48 text-[11px] text-destructive" title={error}>
+          {error.length > 48 ? `${error.slice(0, 48)}…` : error}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function AgentCapabilities({
+  agent,
+  projectId,
+  agentName,
+}: {
+  agent: AgentConfig;
+  projectId: string;
+  agentName: string;
+}) {
+  // Gateway catalog — fetched once, shared by all chat slots (text + vision).
+  const [gatewayModels, setGatewayModels] = useState<Model[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/gateway/models")
+      .then((r) => r.json())
+      .then((data) => {
+        if (cancelled) return;
+        const raw = (data.data ?? data ?? []) as GatewayModel[];
+        setGatewayModels(
+          raw
+            .filter((m) => m.id.includes("/"))
+            .map((m) => {
+              const [providerId, ...rest] = m.id.split("/");
+              return { id: m.id, name: rest.join("/"), providerId } as Model;
+            }),
+        );
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const gatewayProviders = useMemo<Provider[]>(() => {
+    const seen = new Set(DEFAULT_PROVIDERS.map((p) => p.id));
+    const extras = Array.from(
+      new Set(gatewayModels.map((m) => m.providerId).filter((p) => !seen.has(p))),
+    ).map((id) => ({ id, name: id, color: "#888" }) as Provider);
+    return [...DEFAULT_PROVIDERS, ...extras];
+  }, [gatewayModels]);
+
+  const slot = (
+    label: string,
+    field: keyof AgentConfig,
+    fallback: string,
+    kind: Model["kind"],
+    catalog: "chat" | "media",
+  ): ModelSlot => {
+    const configured = agent[field] as string | undefined;
+    return {
+      label,
+      field,
+      value: configured ?? fallback,
+      configured: !!configured,
+      kind,
+      catalog,
+    };
+  };
+
+  const cards: CapabilityCard[] = [
+    {
+      name: "Text",
+      description: "Core reasoning and chat — every agent talks and thinks in text.",
+      icon: Type,
+      slots: [slot("Generation model", "model", "xai/grok-4.1-fast-non-reasoning", "chat", "chat")],
+    },
+    {
+      name: "Image",
+      description: "Generate + analyze with vision models.",
+      icon: ImageIcon,
+      slots: [
+        slot("Generation model", "image_model", "fal/fal-ai/flux/dev", "image", "media"),
+        slot("Vision model", "vision_model", "openai/gpt-4o-mini", "chat", "chat"),
+      ],
+    },
+    {
+      name: "Audio",
+      description: "Transcribe and synthesize speech.",
+      icon: Volume2,
+      slots: [
+        slot("Speech-to-text model", "transcribe_model", "openai/whisper-1", "voice", "media"),
+        slot("Text-to-speech model", "tts_model", "edge/edge-tts", "voice", "media"),
+      ],
+    },
+    {
+      name: "Video",
+      description: "Generate videos from prompts.",
+      icon: Video,
+      slots: [slot("Generation model", "video_model", "fal/luma-ray-2-flash", "video", "media")],
+    },
+  ];
+
+  // Settings form — each modality is a titled section (name + one-line
+  // description) over its labelled model fields. No card chrome; the bordered
+  // pickers read as editable controls.
+  return (
+    <div className="flex flex-col divide-y divide-border">
+      {cards.map((card) => {
+        const Icon = card.icon;
+        return (
+          <div key={card.name} className="py-7 first:pt-0 last:pb-0">
+            {/* Section header: icon + name + what it's for. The divider sits
+                after the whole block (via divide-y), not under the title. */}
+            <div className="mb-4">
+              <div className="flex items-center gap-2">
+                <Icon className="h-[18px] w-[18px] shrink-0 text-foreground" strokeWidth={2} />
+                <span className="text-base font-bold tracking-tight text-foreground">
+                  {card.name}
+                </span>
+              </div>
+              <p className="mt-1.5 text-xs text-muted-foreground">{card.description}</p>
+            </div>
+            {/* Fields */}
+            <div className="flex flex-col gap-2.5">
+              {card.slots.map((s) => (
+                <ModelSlotPicker
+                  key={s.field as string}
+                  slot={s}
+                  projectId={projectId}
+                  agentName={agentName}
+                  gatewayModels={gatewayModels}
+                  gatewayProviders={gatewayProviders}
+                />
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/components/dashboard/agent-identity-header.tsx

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import { Users } from "lucide-react";
+
+/**
+ * Shared agent identity header — monogram + name + optional team badge +
+ * role, with a right-aligned actions slot. One implementation used by the
+ * agent detail page layout AND the builder's right pane, so the two never
+ * diverge (DRY). Presentational only (no hooks) → safe in server + client.
+ */
+export function AgentIdentityHeader({
+  name,
+  role,
+  team,
+  actions,
+}: {
+  name: string;
+  role?: string | null;
+  team?: string | null;
+  actions?: ReactNode;
+}) {
+  const initials = name.slice(0, 2).toUpperCase();
+  return (
+    <div className="flex items-start gap-3">
+      <div className="grid size-10 shrink-0 place-items-center bg-foreground font-mono text-xs font-bold text-background">
+        {initials}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <h2 className="font-mono text-base font-extrabold tracking-tight">
+            {name}
+          </h2>
+          {team && (
+            <span className="inline-flex shrink-0 items-center gap-1 border border-border bg-secondary px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-wider text-muted-foreground">
+              <Users className="h-3 w-3" strokeWidth={2} />
+              {team}
+            </span>
+          )}
+        </div>
+        <p
+          className={`mt-0.5 text-sm italic ${role ? "text-muted-foreground" : "text-muted-foreground/40"}`}
+        >
+          {role || "No role set"}
+        </p>
+      </div>
+      {actions && (
+        <div className="flex shrink-0 items-center gap-2">{actions}</div>
+      )}
+    </div>
+  );
+}

package/components/dashboard/agent-model-picker.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+/**
+ * Agent model picker — shows the current model as a `<ModelBadge>`
+ * with an edit button. Click → swap the badge for
+ * `<ModelSelectorCompact>` to change. On selection (or blur/escape),
+ * collapses back to badge.
+ *
+ * Catalog: pulled from `/api/gateway/models` (Vercel AI Gateway
+ * proxy). Each entry's `id` is `<provider>/<name>` — we split on `/`
+ * to derive providerId + name and reuse `DEFAULT_PROVIDERS` for the
+ * logo tiles.
+ *
+ * Persist: `PATCH /v1/projects/:id/data/v1/agents/:name` with
+ * `{ model }`. On success we `router.refresh()` so the layout's
+ * server-fetched `agent.model` updates without a hard reload.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Loader2, Pencil } from "lucide-react";
+import {
+  ModelBadge,
+  ModelSelectorCompact,
+  DEFAULT_PROVIDERS,
+  type Model,
+} from "@lumea-labs/llm";
+
+interface GatewayModel {
+  id: string;
+  owned_by?: string;
+  context_window?: number;
+}
+
+interface Props {
+  projectId: string;
+  agentName: string;
+  currentModel: string | undefined;
+}
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
+
+export function AgentModelPicker({ projectId, agentName, currentModel }: Props) {
+  const router = useRouter();
+  const [models, setModels] = useState<Model[]>([]);
+  const [editing, setEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/gateway/models")
+      .then((r) => r.json())
+      .then((data) => {
+        if (cancelled) return;
+        const raw = (data.data ?? data ?? []) as GatewayModel[];
+        const mapped: Model[] = raw
+          .filter((m) => m.id.includes("/"))
+          .map((m) => {
+            const [providerId, ...rest] = m.id.split("/");
+            return {
+              id: m.id,
+              name: rest.join("/"),
+              providerId,
+            };
+          });
+        setModels(mapped);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Derive providers from the catalog so brand new ones (e.g.
+  // "fireworks/...") show up too. Falls back to DEFAULT_PROVIDERS
+  // for the known ones (logos, colours).
+  const providers = useMemo(() => {
+    const seen = new Set(DEFAULT_PROVIDERS.map((p) => p.id));
+    const extras = Array.from(
+      new Set(models.map((m) => m.providerId).filter((p) => !seen.has(p))),
+    ).map((id) => ({
+      id,
+      name: id,
+      color: "#888",
+    }));
+    return [...DEFAULT_PROVIDERS, ...extras];
+  }, [models]);
+
+  // Resolve the currently selected model into the Model shape needed
+  // by <ModelBadge>. If it's not in the gateway catalog (e.g. custom
+  // provider), build a minimal entry on the fly so the badge still
+  // renders the raw id without crashing.
+  const currentModelEntry = useMemo<Model | null>(() => {
+    if (!currentModel) return null;
+    const found = models.find((m) => m.id === currentModel);
+    if (found) return found;
+    const [providerId, ...rest] = currentModel.split("/");
+    return {
+      id: currentModel,
+      name: rest.length > 0 ? rest.join("/") : currentModel,
+      providerId: providerId ?? "other",
+    };
+  }, [currentModel, models]);
+
+  async function handleChange(modelId: string) {
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `${API_URL}/v1/projects/${projectId}/data/v1/agents/${encodeURIComponent(agentName)}`,
+        {
+          method: "PATCH",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ model: modelId }),
+        },
+      );
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        setError(body.error ?? `Update failed (${res.status})`);
+        setSaving(false);
+        return;
+      }
+      // Collapse back to badge once the new model is committed.
+      setEditing(false);
+      router.refresh();
+    } catch (err) {
+      setError((err as Error).message ?? "Update failed");
+    }
+    setSaving(false);
+  }
+
+  if (models.length === 0) {
+    return (
+      <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground/40 font-mono">
+        <Loader2 className="h-3 w-3 animate-spin" />
+        loading models…
+      </span>
+    );
+  }
+
+  // Editing mode — full selector with cancel.
+  if (editing) {
+    return (
+      <div className="inline-flex items-center gap-2">
+        <ModelSelectorCompact
+          models={models}
+          value={currentModel}
+          onChange={handleChange}
+          providers={providers}
+          appearance="ghost"
+          showProvider
+          showLogo
+        />
+        {saving && <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />}
+        <button
+          type="button"
+          onClick={() => {
+            setEditing(false);
+            setError(null);
+          }}
+          className="text-[11px] text-muted-foreground hover:text-foreground transition-colors"
+        >
+          Cancel
+        </button>
+        {error && (
+          <span className="text-[11px] text-destructive" title={error}>
+            {error.length > 40 ? `${error.slice(0, 40)}…` : error}
+          </span>
+        )}
+      </div>
+    );
+  }
+
+  // Default mode — read-only badge + edit button.
+  return (
+    <div className="inline-flex items-center gap-1.5">
+      {currentModelEntry ? (
+        <ModelBadge model={currentModelEntry} providers={providers} showLogo />
+      ) : (
+        <span className="text-xs text-muted-foreground/40 italic">no model set</span>
+      )}
+      <button
+        type="button"
+        onClick={() => setEditing(true)}
+        aria-label="Change model"
+        title="Change model"
+        className="inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground"
+      >
+        <Pencil className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}

package/components/dashboard/agent-model-selector.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown } from "lucide-react";
+import type { AgentConfig } from "@polpo-ai/core";
+
+/**
+ * Agent picker with the model shown on a second line inside the same
+ * control. One bordered block, two-line items: agent display name on
+ * top, model id (monospace, muted) below. Selected item gets a brand
+ * accent bar in the dropdown.
+ *
+ * Shared between the /playground page and the inline playground tab
+ * inside the onboarding checklist.
+ */
+export function AgentModelSelector({
+  agents,
+  selected,
+  onSelect,
+}: {
+  agents: AgentConfig[];
+  selected: string | undefined;
+  onSelect: (name: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  const selectedConfig =
+    agents.find((a) => a.name === selected) ?? agents[0];
+
+  return (
+    <div ref={rootRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className="group flex items-center gap-3 border border-border bg-card px-3 py-2 text-left transition-colors hover:border-foreground/30"
+      >
+        <AgentAvatar name={selectedConfig?.name ?? "?"} />
+        <AgentModelPair
+          name={selectedConfig?.identity?.displayName ?? selectedConfig?.name ?? "—"}
+          model={selectedConfig?.model}
+        />
+        <ChevronDown
+          className={`ml-2 size-3.5 text-muted-foreground transition-transform ${
+            open ? "rotate-180" : ""
+          }`}
+        />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-full z-50 mt-1 min-w-[240px] border border-border bg-card py-1 shadow-lg">
+          {agents.map((a) => {
+            const isSelected = a.name === selected;
+            return (
+              <button
+                key={a.name}
+                type="button"
+                onClick={() => {
+                  onSelect(a.name);
+                  setOpen(false);
+                }}
+                className={`flex w-full items-center gap-3 border-l-2 px-3 py-2 text-left transition-colors hover:bg-accent ${
+                  isSelected
+                    ? "border-l-brand bg-accent/40"
+                    : "border-l-transparent"
+                }`}
+              >
+                <AgentAvatar name={a.name} />
+                <AgentModelPair
+                  name={a.identity?.displayName ?? a.name}
+                  model={a.model}
+                />
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AgentModelPair({
+  name,
+  model,
+}: {
+  name: string;
+  model?: string;
+}) {
+  return (
+    <div className="flex min-w-0 flex-col">
+      <span className="truncate text-sm font-medium leading-tight text-foreground">
+        {name}
+      </span>
+      {model && (
+        <span className="mt-0.5 truncate font-mono text-[10px] leading-none text-muted-foreground">
+          {model}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function AgentAvatar({ name }: { name: string }) {
+  const letter = name.charAt(0).toUpperCase();
+  return (
+    <span className="flex size-6 shrink-0 items-center justify-center border border-border bg-background text-[10px] font-semibold text-foreground">
+      {letter}
+    </span>
+  );
+}