@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/components/images/ImageDefaultsCard.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import { Button, Field, Input } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { IMAGE_FORMATS, IMAGE_SIZE_PRESETS, type ImagesConfig } from "../../lib/api/images";
+import { t } from "../../i18n";
+
+// Shared defaults (images.defaults) — the bottom layer under every call.
+// An engine's own block overrides these, and an explicit argument overrides
+// both, so what is set here is "what I usually want", not "what every picture
+// must be".
+
+interface Props {
+  config: ImagesConfig;
+  onPatch: (set: Record<string, unknown>, unset?: string[]) => Promise<void>;
+}
+
+export function ImageDefaultsCard({ config, onPatch }: Props) {
+  const d = config.defaults || {};
+  const [size, setSize] = useState("");
+  const [format, setFormat] = useState("");
+  const [negative, setNegative] = useState("");
+  const [count, setCount] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    setSize(d.size || (d.width && d.height ? `${d.width}x${d.height}` : ""));
+    setFormat(d.format || "");
+    setNegative(d.negative_prompt || "");
+    setCount(d.count != null ? String(d.count) : "");
+    // The config object is replaced wholesale on every save, so keying on the
+    // resolved primitives keeps this from looping.
+  }, [d.size, d.width, d.height, d.format, d.negative_prompt, d.count]);
+
+  const save = async () => {
+    setBusy(true);
+    try {
+      const set: Record<string, unknown> = {};
+      const unset: string[] = [];
+      const text = (key: string, val: string) => {
+        if (val.trim()) set[`images.defaults.${key}`] = val.trim();
+        else unset.push(`images.defaults.${key}`);
+      };
+      // A size supersedes any stored width/height pair — keeping both would
+      // leave two answers to the same question.
+      if (size.trim()) {
+        set["images.defaults.size"] = size.trim();
+        unset.push("images.defaults.width", "images.defaults.height");
+      } else {
+        unset.push("images.defaults.size");
+      }
+      text("format", format);
+      text("negative_prompt", negative);
+      const n = Number(count);
+      if (count.trim() && Number.isFinite(n)) set["images.defaults.count"] = n;
+      else unset.push("images.defaults.count");
+      await onPatch(set, unset);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3" data-testid="image-defaults-card">
+      <div className="grid gap-3 sm:grid-cols-2">
+        <Field label={t("images_ui.size_label")} hint={t("images_ui.default_size_hint")}>
+          <UiSelect
+            value={size}
+            onChange={setSize}
+            options={[{ value: "", label: t("images_ui.engine_default") },
+              ...IMAGE_SIZE_PRESETS.map((s) => ({ value: s, label: s }))]}
+          />
+        </Field>
+        <Field label={t("images_ui.format_label")} hint={t("images_ui.format_hint")}>
+          <UiSelect
+            value={format}
+            onChange={setFormat}
+            options={[{ value: "", label: t("images_ui.engine_default") },
+              ...IMAGE_FORMATS.map((s) => ({ value: s, label: s }))]}
+          />
+        </Field>
+      </div>
+      <Field label={t("images_ui.negative_label")} hint={t("images_ui.negative_hint")}>
+        <Input value={negative} onChange={(e) => setNegative(e.target.value)} placeholder={t("images_ui.negative_ph")} />
+      </Field>
+      <Field label={t("images_ui.count_label")} hint={t("images_ui.count_hint")}>
+        <Input value={count} onChange={(e) => setCount(e.target.value)} inputMode="numeric" placeholder="1" />
+      </Field>
+      <Button variant="primary" onClick={save} loading={busy} data-testid="image-defaults-save">
+        {t("common.save")}
+      </Button>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/images/ImageProviderList.tsx

@@ -0,0 +1,142 @@
+import { ChevronDown, ChevronUp, Plus, Settings2, Trash2 } from "lucide-react";
+import { Badge, Button, Switch } from "../ui";
+import { StatusDot } from "../Section";
+import { cn } from "../../lib/cn";
+import { IMAGE_PROVIDER_META, type ImageEngineInfo } from "../../lib/api/images";
+import { t } from "../../i18n";
+
+// Image engine list — an ordered fallback chain, exactly like the voice one:
+// the arrows reorder it, the switch takes an engine out of the chain, and the
+// first reachable engine in the order draws. The internal "mock" rung is
+// hidden (it is a guarantee that a call always returns a file, not a choice).
+// Users can add any number of endpoints, each declaring which dialect it
+// speaks — that is what makes one screen cover a local Mac server, a box on
+// the LAN and a cloud key.
+
+interface Props {
+  engines: ImageEngineInfo[];
+  order: string[];
+  onToggleEnabled: (id: string, enabled: boolean) => void;
+  onReorder: (nextOrder: string[]) => void;
+  onConfigure: (id: string) => void;
+  onRemove: (id: string) => void;
+  onAddNew: () => void;
+  busy?: boolean;
+}
+
+export function ImageProviderList({
+  engines, order, onToggleEnabled, onReorder, onConfigure, onRemove, onAddNew, busy,
+}: Props) {
+  const visible = engines.filter((e) => e.id !== "mock");
+  const byId = new Map(visible.map((e) => [e.id, e]));
+  const ids = [
+    ...order.filter((id) => byId.has(id)),
+    ...visible.map((e) => e.id).filter((id) => !order.includes(id)),
+  ];
+
+  const move = (id: string, dir: -1 | 1) => {
+    const idx = ids.indexOf(id);
+    const next = idx + dir;
+    if (idx < 0 || next < 0 || next >= ids.length) return;
+    const reordered = [...ids];
+    [reordered[idx], reordered[next]] = [reordered[next], reordered[idx]];
+    onReorder(reordered);
+  };
+
+  return (
+    <div className="space-y-2">
+      {ids.map((id, idx) => {
+        const e = byId.get(id)!;
+        const meta = IMAGE_PROVIDER_META[id];
+        const name = e.custom ? e.label || id : meta?.name || id;
+        const note = e.custom
+          ? e.note || t("images_ui.custom_note")
+          : meta?.note || "";
+        return (
+          <div
+            key={id}
+            data-testid={`image-provider-${id}`}
+            className={cn(
+              "flex items-center gap-3 rounded-lg border px-3 py-2.5 border-border",
+              !e.enabled && "opacity-60",
+            )}
+          >
+            <div className="flex flex-col">
+              <button
+                type="button"
+                onClick={() => move(id, -1)}
+                disabled={busy || idx === 0}
+                aria-label={t("images_ui.move_up")}
+                data-testid={`image-provider-${id}-up`}
+                className="text-muted-fg hover:text-fg disabled:opacity-30"
+              >
+                <ChevronUp className="size-3.5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => move(id, 1)}
+                disabled={busy || idx === ids.length - 1}
+                aria-label={t("images_ui.move_down")}
+                data-testid={`image-provider-${id}-down`}
+                className="text-muted-fg hover:text-fg disabled:opacity-30"
+              >
+                <ChevronDown className="size-3.5" />
+              </button>
+            </div>
+
+            <StatusDot ok={e.available ? true : e.configured ? false : null} />
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">{name}</span>
+                {e.custom && <Badge tone="info">{e.kind || "a1111"}</Badge>}
+                {meta?.local && <Badge tone="info">{t("images_ui.badge_local")}</Badge>}
+                {e.available ? (
+                  <Badge tone="success">{t("images_ui.badge_available")}</Badge>
+                ) : e.configured ? (
+                  <Badge tone="warning">{t("images_ui.badge_unavailable")}</Badge>
+                ) : (
+                  <Badge tone="muted">{t("images_ui.badge_not_configured")}</Badge>
+                )}
+              </div>
+              <div className="truncate text-xs text-muted-fg">{note}</div>
+            </div>
+
+            <div className="flex shrink-0 items-center gap-2">
+              <Switch checked={e.enabled} onChange={(v) => onToggleEnabled(id, v)} disabled={busy} />
+              <Button
+                size="sm"
+                variant="secondary"
+                onClick={() => onConfigure(id)}
+                data-testid={`image-provider-${id}-config`}
+              >
+                <Settings2 className="size-3.5" /> {t("images_ui.configure")}
+              </Button>
+              {e.custom && (
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => onRemove(id)}
+                  disabled={busy}
+                  aria-label={t("images_ui.remove")}
+                  data-testid={`image-provider-${id}-remove`}
+                >
+                  <Trash2 className="size-3.5" />
+                </Button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+
+      <button
+        type="button"
+        onClick={onAddNew}
+        disabled={busy}
+        data-testid="image-provider-add"
+        className="flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-border px-3 py-2.5 text-sm text-muted-fg transition-colors hover:border-emerald-500/50 hover:text-fg disabled:opacity-50"
+      >
+        <Plus className="size-4" /> {t("images_ui.add_provider")}
+      </button>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/images/ImageProviderModal.tsx

@@ -0,0 +1,263 @@
+import { useEffect, useState } from "react";
+import { Button, Dialog, Field, Input } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { isSecretMarker, secretSuffix } from "../../lib/secrets";
+import {
+  IMAGE_CUSTOM_KINDS,
+  IMAGE_PROVIDER_META,
+  type ImageCustomKind,
+  type ImageEngineConfig,
+} from "../../lib/api/images";
+import { t } from "../../i18n";
+
+// Per-engine settings, saved as dotted-key patches under images.<id> (or
+// images.custom.<slug>). Secrets follow the house convention: a blank field
+// keeps the stored key and the daemon ignores "*** set ***" markers on PATCH.
+//
+// Two things are per-engine rather than global on purpose:
+//   • base_url — the whole point of the screen, and the only field a local
+//     server on this Mac needs.
+//   • defaults (steps / cfg) — a turbo checkpoint wants ~8 steps at cfg 1
+//     while a standard one wants 20 at cfg 7, and that belongs to the SERVER,
+//     not to the person typing a prompt.
+
+export interface ImageProviderSave {
+  set: Record<string, unknown>;
+  unset: string[];
+}
+
+interface Props {
+  open: boolean;
+  providerId: string | null; // a1111 | sdcpp | openai | mock | custom:<slug> | __new__
+  config: Record<string, unknown>;
+  onClose: () => void;
+  onSave: (r: ImageProviderSave) => Promise<void>;
+}
+
+function str(v: unknown): string {
+  return typeof v === "string" ? v : v == null ? "" : String(v);
+}
+
+function slugify(label: string): string {
+  return label
+    .toLowerCase()
+    .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 40);
+}
+
+export function ImageProviderModal({ open, providerId, config, onClose, onSave }: Props) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [apiKey, setApiKey] = useState("");
+  const [kind, setKind] = useState<ImageCustomKind>("a1111");
+  const [f, setF] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    if (!open || !providerId) return;
+    setError(null);
+    setApiKey("");
+    const c = (config || {}) as ImageEngineConfig;
+    const d = c.defaults || {};
+    setKind((c.kind as ImageCustomKind) || "a1111");
+    setF({
+      label: str(c.label),
+      base_url: str(c.base_url),
+      model: str(c.model),
+      timeout_s: str(c.timeout_s),
+      quality: str(c.quality),
+      d_size: d.size ? str(d.size) : (d.width && d.height ? `${d.width}x${d.height}` : ""),
+      d_steps: str(d.steps),
+      d_cfg_scale: str(d.cfg_scale),
+      d_sampler: str(d.sampler),
+      d_scheduler: str(d.scheduler),
+    });
+  }, [open, providerId, config]);
+
+  if (!providerId) return null;
+
+  const isCreate = providerId === "__new__";
+  const isCustom = isCreate || providerId.startsWith("custom:");
+  const meta = IMAGE_PROVIDER_META[providerId];
+  const effectiveKind: ImageCustomKind = isCustom ? kind : (providerId as ImageCustomKind);
+  const up = (patch: Record<string, string>) => setF((s) => ({ ...s, ...patch }));
+
+  // The OpenAI dialect has no sampling knobs at all — hiding them beats
+  // offering fields that would be accepted and then ignored.
+  const hasSamplingKnobs = effectiveKind !== "openai";
+  const hasBaseUrl = providerId !== "mock";
+  const hasSecret = providerId !== "mock";
+  const existingKey = hasSecret && isSecretMarker((config as { api_key?: unknown })?.api_key);
+  const keyPlaceholder = existingKey
+    ? t("images_ui.api_key_set", { suffix: secretSuffix((config as { api_key?: unknown })?.api_key) ?? "" })
+    : t("images_ui.api_key_label");
+
+  const title = isCreate
+    ? t("images_ui.new_provider")
+    : isCustom ? (f.label || providerId.slice(7)) : meta?.name || providerId;
+
+  const submit = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const slug = isCreate ? slugify(f.label) : isCustom ? providerId.slice(7) : "";
+      if (isCustom) {
+        if (!f.label.trim() || !slug) throw new Error(t("images_ui.err_label_required"));
+        if (!f.base_url.trim()) throw new Error(t("images_ui.err_base_url_required"));
+      }
+      const base = isCustom ? `images.custom.${slug}` : `images.${providerId}`;
+
+      const set: Record<string, unknown> = {};
+      const unset: string[] = [];
+      const optText = (key: string, val: string) => {
+        if (val.trim()) set[`${base}.${key}`] = val.trim();
+        else unset.push(`${base}.${key}`);
+      };
+      const optNum = (key: string, val: string) => {
+        const n = Number(val);
+        if (val.trim() && Number.isFinite(n)) set[`${base}.${key}`] = n;
+        else unset.push(`${base}.${key}`);
+      };
+
+      if (isCustom) {
+        set[`${base}.label`] = f.label.trim();
+        set[`${base}.kind`] = kind;
+      }
+      if (hasBaseUrl) optText("base_url", f.base_url);
+      optText("model", f.model);
+      optNum("timeout_s", f.timeout_s);
+      if (effectiveKind === "openai") optText("quality", f.quality);
+
+      // Per-engine defaults. Kept as a nested block so a call, the global
+      // defaults and the engine's own can all be told apart.
+      optText("defaults.size", f.d_size);
+      if (hasSamplingKnobs) {
+        optNum("defaults.steps", f.d_steps);
+        optNum("defaults.cfg_scale", f.d_cfg_scale);
+        optText("defaults.sampler", f.d_sampler);
+        optText("defaults.scheduler", f.d_scheduler);
+      }
+
+      if (hasSecret && apiKey.trim()) set[`${base}.api_key`] = apiKey.trim();
+
+      await onSave({ set, unset });
+      onClose();
+    } catch (e) {
+      setError((e as Error).message || t("images_ui.err_save"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("images_screen.configure_provider", { name: title })}
+      description={isCustom ? t("images_ui.custom_desc") : meta?.note}
+      size="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={submit} loading={busy} data-testid="image-provider-save">
+            {t("common.save")}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        {providerId === "mock" ? (
+          <p className="text-sm text-muted-fg">{t("images_ui.mock_desc")}</p>
+        ) : (
+          <>
+            {isCustom && (
+              <>
+                <Field label={t("images_ui.label_label")} hint={t("images_ui.label_hint")}>
+                  <Input value={f.label} onChange={(e) => up({ label: e.target.value })} placeholder="Homelab" />
+                </Field>
+                <Field label={t("images_ui.kind_label")} hint={t("images_ui.kind_hint")}>
+                  <UiSelect
+                    value={kind}
+                    onChange={(v) => setKind(v as ImageCustomKind)}
+                    options={IMAGE_CUSTOM_KINDS.map((k) => ({ value: k, label: IMAGE_PROVIDER_META[k]?.name || k }))}
+                  />
+                </Field>
+              </>
+            )}
+
+            <Field
+              label={isCustom ? t("images_ui.base_url_req_label") : t("images_ui.base_url_label")}
+              hint={effectiveKind === "openai" ? t("images_ui.base_url_openai_hint") : t("images_ui.base_url_hint")}
+            >
+              <Input
+                value={f.base_url}
+                onChange={(e) => up({ base_url: e.target.value })}
+                placeholder={effectiveKind === "openai" ? "http://127.0.0.1:8189/v1" : "http://127.0.0.1:7860"}
+                data-testid="image-provider-base-url"
+              />
+            </Field>
+
+            <Field
+              label={t("images_ui.api_key_label")}
+              hint={existingKey
+                ? t("images_ui.api_key_keep_hint")
+                : effectiveKind === "openai" && !f.base_url.trim()
+                  ? t("images_ui.api_key_reuse_hint", { engine: "engines.openai.api_key", env: "OPENAI_API_KEY" })
+                  : t("images_ui.api_key_optional_hint")}
+            >
+              <Input
+                type="password"
+                autoComplete="new-password"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                placeholder={keyPlaceholder}
+              />
+            </Field>
+
+            <Field label={t("images_ui.model_label")} hint={t("images_ui.model_hint")}>
+              <Input value={f.model} onChange={(e) => up({ model: e.target.value })} placeholder={t("images_ui.optional_ph")} />
+            </Field>
+
+            <div className="rounded-md border border-border/60 p-3 space-y-3">
+              <p className="text-xs text-muted-fg">{t("images_ui.engine_defaults_hint")}</p>
+              <Field label={t("images_ui.size_label")} hint={t("images_ui.size_hint")}>
+                <Input value={f.d_size} onChange={(e) => up({ d_size: e.target.value })} placeholder="512x512" />
+              </Field>
+              {hasSamplingKnobs && (
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <Field label={t("images_ui.steps_label")} hint={t("images_ui.steps_hint")}>
+                    <Input value={f.d_steps} onChange={(e) => up({ d_steps: e.target.value })} inputMode="numeric" placeholder="20" />
+                  </Field>
+                  <Field label={t("images_ui.cfg_label")} hint={t("images_ui.cfg_hint")}>
+                    <Input value={f.d_cfg_scale} onChange={(e) => up({ d_cfg_scale: e.target.value })} inputMode="decimal" placeholder="7" />
+                  </Field>
+                  <Field label={t("images_ui.sampler_label")}>
+                    <Input value={f.d_sampler} onChange={(e) => up({ d_sampler: e.target.value })} placeholder={t("images_ui.server_default_ph")} />
+                  </Field>
+                  <Field label={t("images_ui.scheduler_label")}>
+                    <Input value={f.d_scheduler} onChange={(e) => up({ d_scheduler: e.target.value })} placeholder={t("images_ui.server_default_ph")} />
+                  </Field>
+                </div>
+              )}
+              {effectiveKind === "openai" && (
+                <Field label={t("images_ui.quality_label")} hint={t("images_ui.quality_hint")}>
+                  <Input value={f.quality} onChange={(e) => up({ quality: e.target.value })} placeholder={t("images_ui.optional_ph")} />
+                </Field>
+              )}
+              <Field label={t("images_ui.timeout_label")} hint={t("images_ui.timeout_hint")}>
+                <Input value={f.timeout_s} onChange={(e) => up({ timeout_s: e.target.value })} inputMode="numeric" placeholder="600" />
+              </Field>
+            </div>
+          </>
+        )}
+
+        {error && (
+          <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+            {error}
+          </div>
+        )}
+      </div>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/images/ImageTestCard.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from "react";
+import { Download, ImageIcon, Wand2 } from "lucide-react";
+import { Button, Field, Input, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import {
+  Images,
+  fetchImageBlobUrl,
+  IMAGE_SIZE_PRESETS,
+  type ImageEngineInfo,
+  type ImageGenerateResult,
+} from "../../lib/api/images";
+import { t } from "../../i18n";
+
+// Draw one picture with the current routing, right here. Two jobs:
+//   1. prove an endpoint actually works before anyone depends on it, and
+//   2. show what the chosen engine could NOT honor — the same "ignored"
+//      report the CLI prints, because a silently dropped `steps` is the
+//      difference between "this looks wrong" and "that engine has no steps".
+
+interface Props {
+  engines: ImageEngineInfo[];
+  defaultProvider: string;
+  mode: string;
+}
+
+export function ImageTestCard({ engines, defaultProvider, mode }: Props) {
+  const [prompt, setPrompt] = useState("");
+  const [provider, setProvider] = useState("");
+  const [size, setSize] = useState("");
+  const [steps, setSteps] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<ImageGenerateResult | null>(null);
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  // Blob URLs leak until revoked; one ref keeps exactly one alive at a time.
+  const lastBlob = useRef<string | null>(null);
+
+  useEffect(() => () => { if (lastBlob.current) URL.revokeObjectURL(lastBlob.current); }, []);
+
+  const providerOptions = [
+    { value: "", label: mode === "single" ? t("images_ui.test_routed_single", { id: defaultProvider }) : t("images_ui.test_routed_chain") },
+    ...engines.map((e) => ({ value: e.id, label: e.custom ? e.label || e.id : e.id })),
+  ];
+
+  const run = async () => {
+    if (!prompt.trim()) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const body: Parameters<typeof Images.generate>[0] = { prompt: prompt.trim() };
+      if (provider) body.provider = provider;
+      if (size) body.size = size;
+      if (steps.trim() && Number.isFinite(Number(steps))) body.steps = Number(steps);
+      const res = await Images.generate(body);
+      setResult(res);
+      const url = await fetchImageBlobUrl(res.images[0].path);
+      if (lastBlob.current) URL.revokeObjectURL(lastBlob.current);
+      lastBlob.current = url;
+      setBlobUrl(url);
+    } catch (e) {
+      setError((e as Error).message);
+      setResult(null);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3" data-testid="image-test-card">
+      <Field label={t("images_ui.prompt_label")}>
+        <Textarea
+          rows={2}
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder={t("images_ui.prompt_ph")}
+          data-testid="image-test-prompt"
+        />
+      </Field>
+
+      <div className="grid gap-3 sm:grid-cols-3">
+        <Field label={t("images_ui.engine_label")}>
+          <UiSelect value={provider} onChange={setProvider} options={providerOptions} />
+        </Field>
+        <Field label={t("images_ui.size_label")}>
+          <UiSelect
+            value={size}
+            onChange={setSize}
+            options={[{ value: "", label: t("images_ui.configured_default") },
+              ...IMAGE_SIZE_PRESETS.map((s) => ({ value: s, label: s }))]}
+          />
+        </Field>
+        <Field label={t("images_ui.steps_label")}>
+          <Input value={steps} onChange={(e) => setSteps(e.target.value)} inputMode="numeric" placeholder={t("images_ui.configured_default")} />
+        </Field>
+      </div>
+
+      <Button
+        variant="primary"
+        onClick={run}
+        loading={busy}
+        disabled={!prompt.trim()}
+        data-testid="image-test-run"
+      >
+        <Wand2 className="size-3.5" /> {t("images_ui.generate")}
+      </Button>
+
+      {error && (
+        <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+          {error}
+        </div>
+      )}
+
+      {result && blobUrl && (
+        <div className="space-y-2" data-testid="image-test-result">
+          <img
+            src={blobUrl}
+            alt={result.prompt}
+            className="max-h-80 w-full rounded-lg border border-border object-contain"
+          />
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-fg">
+            <span className="inline-flex items-center gap-1">
+              <ImageIcon className="size-3" />
+              {result.provider}{result.model ? ` · ${result.model}` : ""}
+            </span>
+            <span>{result.request.width}x{result.request.height}</span>
+            {result.images[0]?.seed != null && <span>{t("images_ui.seed_is", { seed: String(result.images[0].seed) })}</span>}
+            <span>{(result.elapsed_ms / 1000).toFixed(1)}s</span>
+            <a href={blobUrl} download={`apx-${result.provider}.${result.images[0].format}`} className="inline-flex items-center gap-1 hover:text-fg">
+              <Download className="size-3" /> {t("images_ui.download")}
+            </a>
+          </div>
+          {result.ignored.length > 0 && (
+            <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs">
+              {t("images_ui.ignored_note", { provider: result.provider, options: result.ignored.join(", ") })}
+            </div>
+          )}
+          <p className="truncate text-xs text-muted-fg" title={result.images[0].path}>{result.images[0].path}</p>
+        </div>
+      )}
+    </div>
+  );
+}