@agentprojectcontext/apx 1.66.0 → 1.67.0

package/src/interfaces/web/src/components/code/CodeArtifactsTab.tsx

@@ -1,10 +1,13 @@
 import { useRef, useState } from "react";
 import useSWR from "swr";
-import { Copy, RefreshCw, Trash2, FileCode2, Play, Pencil, Eye, SquarePen } from "lucide-react";
+import { Copy, RefreshCw, Trash2, FileCode2, Play, Pencil, Eye, SquarePen, ExternalLink, Share2, Square } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import { Empty, Spinner } from "../ui";
-import { Artifacts, type ArtifactEntry, type ArtifactRunResult } from "../../lib/api/artifacts";
+import { Artifacts, type ArtifactEntry, type ArtifactRunResult, type ArtifactPreview } from "../../lib/api/artifacts";
+
+// Artifacts we can render in a browser via an ephemeral preview server.
+const PREVIEWABLE = /\.(html?|jsx|tsx|js)$/i;
 import { useToast } from "../Toast";
 import {
   Dialog,
@@ -41,6 +44,12 @@ function ArtifactRow({
   const [runResult, setRunResult] = useState<ArtifactRunResult | null>(null);
   const toast = useToast();
 
+  // Preview / share state
+  const [preview, setPreview] = useState<ArtifactPreview | null>(null);
+  const [previewing, setPreviewing] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const previewable = PREVIEWABLE.test(entry.name);
+
   // Rename state
   const [renaming, setRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState(entry.name);
@@ -84,6 +93,45 @@ function ArtifactRow({
     }
   };
 
+  // Start (or reuse) an ephemeral preview server and open it in a new tab.
+  const startPreview = async () => {
+    setPreviewing(true);
+    try {
+      const p = await Artifacts.preview(pid, entry.name);
+      setPreview(p);
+      window.open(p.url, "_blank", "noopener,noreferrer");
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setPreviewing(false);
+    }
+  };
+
+  // Expose the running preview through a public tunnel and open it.
+  const share = async () => {
+    if (!preview) return;
+    setSharing(true);
+    try {
+      const tn = await Artifacts.openTunnel(preview.id);
+      setPreview({ ...preview, tunnel: { id: tn.id, url: tn.url, provider: tn.provider } });
+      window.open(tn.url, "_blank", "noopener,noreferrer");
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setSharing(false);
+    }
+  };
+
+  const stopPreview = async () => {
+    if (!preview) return;
+    try {
+      await Artifacts.stopPreview(preview.id);
+    } catch {
+      /* ignore — already gone */
+    }
+    setPreview(null);
+  };
+
   const remove = async () => {
     setDeleting(true);
     try {
@@ -232,6 +280,37 @@ function ArtifactRow({
             </Tip>
           )}
 
+          {/* Preview — serve on an ephemeral local server and open in a tab.
+              Only for browser-renderable artifacts (HTML / React / JS). */}
+          {previewable && (
+            <Tip content={t("code_module.artifacts_preview_hint")}>
+              <button
+                type="button"
+                disabled={previewing}
+                onClick={() => void startPreview()}
+                className="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] font-medium bg-sky-500/15 text-sky-700 hover:bg-sky-500/25 disabled:opacity-60 dark:text-sky-300"
+              >
+                {previewing ? <Spinner size={10} /> : <ExternalLink className="size-3" />}
+                {t("code_module.artifacts_preview")}
+              </button>
+            </Tip>
+          )}
+
+          {/* Share — open a public tunnel to the running preview. */}
+          {preview && !preview.tunnel && (
+            <Tip content={t("code_module.artifacts_share_hint")}>
+              <button
+                type="button"
+                disabled={sharing}
+                onClick={() => void share()}
+                className="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[10px] font-medium bg-amber-500/15 text-amber-700 hover:bg-amber-500/25 disabled:opacity-60 dark:text-amber-300"
+              >
+                {sharing ? <Spinner size={10} /> : <Share2 className="size-3" />}
+                {t("code_module.artifacts_share")}
+              </button>
+            </Tip>
+          )}
+
           {/* Eliminar — confirmation dialog */}
           <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
             <Tip content={t("code_module.artifacts_delete")}>
@@ -289,6 +368,70 @@ function ArtifactRow({
           </code>
         </div>
 
+        {/* Running preview: local + optional public URL, with a stop button. */}
+        {preview && (
+          <div className="space-y-1 rounded border border-sky-500/30 bg-sky-500/5 p-2">
+            <div className="flex items-center gap-2">
+              <span className="shrink-0 text-[10px] font-medium text-muted-foreground">
+                {t("code_module.artifacts_preview_local")}
+              </span>
+              <a
+                href={preview.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="min-w-0 flex-1 truncate font-mono text-[10px] text-sky-700 underline hover:text-sky-900 dark:text-sky-300"
+              >
+                {preview.url}
+              </a>
+              <Tip content={t("code_module.artifacts_copy_url")}>
+                <button
+                  type="button"
+                  onClick={() => void copy(preview.url)}
+                  className="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                  <Copy className="size-3" />
+                </button>
+              </Tip>
+              <Tip content={t("code_module.artifacts_stop_preview")}>
+                <button
+                  type="button"
+                  onClick={() => void stopPreview()}
+                  className="shrink-0 rounded p-0.5 text-rose-600 hover:bg-rose-50 dark:text-rose-400 dark:hover:bg-rose-950"
+                >
+                  <Square className="size-3" />
+                </button>
+              </Tip>
+            </div>
+            {preview.tunnel && (
+              <div className="flex items-center gap-2">
+                <span className="shrink-0 text-[10px] font-medium text-amber-700 dark:text-amber-300">
+                  {t("code_module.artifacts_preview_public")}
+                </span>
+                <a
+                  href={preview.tunnel.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="min-w-0 flex-1 truncate font-mono text-[10px] text-amber-700 underline hover:text-amber-900 dark:text-amber-300"
+                >
+                  {preview.tunnel.url}
+                </a>
+                <span className="shrink-0 font-mono text-[9px] text-muted-foreground">
+                  {preview.tunnel.provider}
+                </span>
+                <Tip content={t("code_module.artifacts_copy_url")}>
+                  <button
+                    type="button"
+                    onClick={() => void copy(preview.tunnel!.url)}
+                    className="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+                  >
+                    <Copy className="size-3" />
+                  </button>
+                </Tip>
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Run result display */}
         {runResult && (
           <div className="space-y-1">

package/src/interfaces/web/src/components/settings/RoutingPanel.tsx

@@ -0,0 +1,236 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { Route as RouteIcon, Image, Ruler, Radio, Hash, ChevronRight } from "lucide-react";
+import { Section } from "../Section";
+import { Badge, Button, Dialog, Field, Loading, Switch, Textarea, Tip } from "../ui";
+import { useToast } from "../Toast";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { t } from "../../i18n";
+
+// Content-based model routing (OpenHands RouterLLM pattern). NOT the failover
+// router (that is DefaultRouterCard). Here each rule prefers a model for a turn
+// based on features (image/size/channel/keywords); it composes with failover —
+// a routed model that is down still falls back down the regular chain.
+interface RoutingWhen {
+  has_image?: boolean;
+  min_prompt_chars?: number;
+  max_prompt_chars?: number;
+  min_context_chars?: number;
+  channels?: string[];
+  keywords?: string[];
+}
+interface RoutingRule {
+  model: string;
+  when?: RoutingWhen;
+}
+
+const EXAMPLE_RULES: RoutingRule[] = [
+  { model: "openai:gpt-4o", when: { has_image: true } },
+  { model: "anthropic:claude-3-5-haiku", when: { max_prompt_chars: 400 } },
+];
+
+// Render a rule's `when` block as readable condition chips.
+function WhenChips({ when }: { when?: RoutingWhen }) {
+  const chips: { icon: ReactNode; label: string }[] = [];
+  if (!when || Object.keys(when).length === 0) {
+    chips.push({ icon: <ChevronRight size={11} />, label: t("routing_panel.when_any") });
+  } else {
+    if (when.has_image === true) chips.push({ icon: <Image size={11} />, label: t("routing_panel.when_image") });
+    if (when.has_image === false) chips.push({ icon: <Image size={11} />, label: t("routing_panel.when_no_image") });
+    if (Number.isFinite(when.min_prompt_chars))
+      chips.push({ icon: <Ruler size={11} />, label: t("routing_panel.when_min_prompt", { n: String(when.min_prompt_chars) }) });
+    if (Number.isFinite(when.max_prompt_chars))
+      chips.push({ icon: <Ruler size={11} />, label: t("routing_panel.when_max_prompt", { n: String(when.max_prompt_chars) }) });
+    if (Number.isFinite(when.min_context_chars))
+      chips.push({ icon: <Ruler size={11} />, label: t("routing_panel.when_min_context", { n: String(when.min_context_chars) }) });
+    if (Array.isArray(when.channels) && when.channels.length > 0)
+      chips.push({ icon: <Radio size={11} />, label: t("routing_panel.when_channels", { list: when.channels.join(", ") }) });
+    if (Array.isArray(when.keywords) && when.keywords.length > 0)
+      chips.push({ icon: <Hash size={11} />, label: t("routing_panel.when_keywords", { list: when.keywords.join(", ") }) });
+  }
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {chips.map((c, i) => (
+        <span key={i} className="inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-fg">
+          {c.icon} {c.label}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export function RoutingPanel() {
+  const toast = useToast();
+  const { config, isLoading, patch } = useGlobalConfig();
+
+  const [enabled, setEnabled] = useState(false);
+  const [rulesText, setRulesText] = useState("[]");
+  const [editing, setEditing] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  // Snapshot of the saved state, for dirty tracking.
+  const [saved, setSaved] = useState<{ enabled: boolean; rulesText: string }>({ enabled: false, rulesText: "[]" });
+
+  useEffect(() => {
+    const routing = (config.super_agent?.routing || {}) as { enabled?: boolean; rules?: RoutingRule[] };
+    const rules = Array.isArray(routing.rules) ? routing.rules : [];
+    const text = JSON.stringify(rules, null, 2);
+    setEnabled(routing.enabled === true);
+    setRulesText(text);
+    setSaved({ enabled: routing.enabled === true, rulesText: text });
+  }, [config.super_agent?.routing]);
+
+  // Parse the editor buffer live: the list preview and save both use this.
+  const parsed = useMemo<{ rules: RoutingRule[]; error: string | null }>(() => {
+    try {
+      const v = JSON.parse(rulesText);
+      if (!Array.isArray(v)) return { rules: [], error: t("routing_panel.json_not_array") };
+      return { rules: v as RoutingRule[], error: null };
+    } catch (e) {
+      return { rules: [], error: t("routing_panel.json_error", { msg: (e as Error).message }) };
+    }
+  }, [rulesText]);
+
+  if (isLoading) return <Loading />;
+
+  const rules = parsed.rules;
+  const ruleCount = rules.length;
+  // Normalize for dirty compare so whitespace-only edits don't count.
+  const normalizedText = parsed.error ? rulesText : JSON.stringify(rules);
+  const savedNormalized = (() => { try { return JSON.stringify(JSON.parse(saved.rulesText)); } catch { return saved.rulesText; } })();
+  const dirty = enabled !== saved.enabled || normalizedText !== savedNormalized;
+
+  const doSave = async () => {
+    if (parsed.error) return;
+    setBusy(true);
+    try {
+      await patch({ "super_agent.routing": { enabled, rules } });
+      toast.success(t("routing_panel.saved_toast"));
+      const text = JSON.stringify(rules, null, 2);
+      setRulesText(text);
+      setSaved({ enabled, rulesText: text });
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+      setConfirmOpen(false);
+    }
+  };
+
+  const signalOn = enabled && ruleCount > 0;
+
+  return (
+    <div data-testid="routing-panel">
+      <Section title={t("routing_panel.title")} description={t("routing_panel.description")}>
+        <div className="space-y-4">
+          {/* Active/inactive signal — the user wants a clear "it's on" cue. */}
+          <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-muted/20 p-3">
+            <span data-testid="routing-signal">
+              {signalOn ? (
+                <Badge tone="success">
+                  <RouteIcon size={11} /> {t("routing_panel.signal_on", { n: String(ruleCount) })}
+                </Badge>
+              ) : enabled ? (
+                <Badge tone="warning">
+                  <RouteIcon size={11} /> {t("routing_panel.signal_on_empty")}
+                </Badge>
+              ) : (
+                <Badge tone="muted">
+                  <RouteIcon size={11} /> {t("routing_panel.signal_off")}
+                </Badge>
+              )}
+            </span>
+            <Tip content={t("routing_panel.helper")}>
+              <span className="text-xs text-muted-fg underline decoration-dotted underline-offset-2">
+                {t("routing_panel.how_it_works")}
+              </span>
+            </Tip>
+          </div>
+
+          <Switch checked={enabled} onChange={setEnabled} label={t("routing_panel.enable_label")} />
+
+          {/* Rules preview */}
+          <div className="rounded-lg border border-border bg-muted/20 p-3">
+            <div className="mb-2 flex items-center justify-between gap-2">
+              <div>
+                <div className="text-sm font-medium">{t("routing_panel.rules_title")}</div>
+                <div className="text-xs text-muted-fg">{t("routing_panel.rules_desc")}</div>
+              </div>
+              <Button size="sm" variant="secondary" onClick={() => setEditing((v) => !v)}>
+                {editing ? t("routing_panel.hide_editor") : t("routing_panel.edit_rules")}
+              </Button>
+            </div>
+
+            <ul className="space-y-1.5">
+              {rules.map((r, i) => (
+                <li key={i} className="rounded-md bg-card px-2.5 py-2 text-xs">
+                  <div className="mb-1 flex items-center gap-2">
+                    <span className="w-6 text-muted-fg">#{i + 1}</span>
+                    <span className="font-mono text-[12px]">{r.model || "—"}</span>
+                  </div>
+                  <div className="pl-8">
+                    <WhenChips when={r.when} />
+                  </div>
+                </li>
+              ))}
+              {ruleCount === 0 && !parsed.error && (
+                <li className="text-xs text-muted-fg">{t("routing_panel.rules_empty")}</li>
+              )}
+            </ul>
+          </div>
+
+          {/* JSON editor for the rules array */}
+          {editing && (
+            <Field label={t("routing_panel.editor_label")} hint={t("routing_panel.json_hint")}>
+              <Textarea
+                rows={10}
+                className="font-mono text-xs"
+                value={rulesText}
+                onChange={(e) => setRulesText(e.target.value)}
+                spellCheck={false}
+              />
+              {parsed.error ? (
+                <span className="mt-1 block text-[11px] text-red-400">{parsed.error}</span>
+              ) : (
+                <button
+                  type="button"
+                  className="mt-1 text-[11px] text-muted-fg underline decoration-dotted underline-offset-2"
+                  onClick={() => setRulesText(JSON.stringify(EXAMPLE_RULES, null, 2))}
+                >
+                  {t("routing_panel.insert_example")}
+                </button>
+              )}
+            </Field>
+          )}
+
+          <p className="text-[11px] leading-relaxed text-muted-fg">{t("routing_panel.helper")}</p>
+
+          <Button
+            variant="primary"
+            loading={busy}
+            disabled={!dirty || !!parsed.error}
+            onClick={() => setConfirmOpen(true)}
+          >
+            {dirty ? t("routing_panel.save") : t("routing_panel.saved")}
+          </Button>
+        </div>
+      </Section>
+
+      <Dialog
+        open={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        title={t("routing_panel.confirm_title")}
+        description={t("routing_panel.confirm_body")}
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setConfirmOpen(false)}>{t("routing_panel.cancel")}</Button>
+            <Button variant="primary" loading={busy} onClick={doSave}>{t("routing_panel.confirm_apply")}</Button>
+          </>
+        }
+      >
+        <p className="text-sm text-muted-fg">
+          {enabled ? t("routing_panel.confirm_on", { n: String(ruleCount) }) : t("routing_panel.confirm_off")}
+        </p>
+      </Dialog>
+    </div>
+  );
+}

package/src/interfaces/web/src/i18n/en.ts

@@ -976,6 +976,15 @@ export const en = {
     artifacts_rename:    "Rename",
     artifacts_view:      "View contents",
     artifacts_edit:      "Edit contents",
+    artifacts_preview:       "Preview",
+    artifacts_preview_hint:  "Open a live preview in a local browser tab",
+    artifacts_share:         "Share",
+    artifacts_share_hint:    "Create a public tunnel URL to share this preview",
+    artifacts_stop_preview:  "Stop preview",
+    artifacts_preview_local: "Local preview",
+    artifacts_preview_public:"Public URL",
+    artifacts_copy_url:      "Copy URL",
+    artifacts_preview_started: "Preview running at {url}",
     tree_collapse_all:   "Collapse all",
     terminal_clear:      "Clear",
     terminal_close:      "Close terminal",
@@ -1077,6 +1086,44 @@ export const en = {
     provider_not_configured: "The provider \"{name}\" is not configured.",
   },
 
+  routing_panel: {
+    title:            "Content routing",
+    description:      "Prefer a different model per message based on its content (image, size, channel, keywords). Separate from the fallback chain above.",
+    signal_on:        "Content routing: ON ({n} rules)",
+    signal_on_empty:  "Content routing: ON (no rules yet)",
+    signal_off:       "Content routing: OFF",
+    how_it_works:     "How does it work?",
+    enable_label:     "Enable content routing",
+    rules_title:      "Routing rules",
+    rules_desc:       "Evaluated top to bottom; the first rule whose conditions all match wins.",
+    rules_empty:      "No rules yet. Add some in the editor.",
+    edit_rules:       "Edit rules (JSON)",
+    hide_editor:      "Hide editor",
+    editor_label:     "Rules (JSON array)",
+    json_hint:        "Array of { model, when }. when keys: has_image, min_prompt_chars, max_prompt_chars, min_context_chars, channels[], keywords[]. Empty when = matches every message.",
+    json_error:       "Invalid JSON: {msg}",
+    json_not_array:   "The rules must be a JSON array.",
+    insert_example:   "Insert an example",
+    when_any:         "any message",
+    when_image:       "has image",
+    when_no_image:    "no image",
+    when_min_prompt:  "prompt ≥ {n} chars",
+    when_max_prompt:  "prompt ≤ {n} chars",
+    when_min_context: "context ≥ {n} chars",
+    when_channels:    "channels: {list}",
+    when_keywords:    "keywords: {list}",
+    helper:           "Routing picks a model per message (image, size, channel, keywords). It composes with failover: a routed model that is down falls back down the chain. An explicit per-request model override always wins.",
+    save:             "Save routing",
+    saved:            "Saved",
+    saved_toast:      "Content routing saved.",
+    confirm_title:    "Apply routing changes?",
+    confirm_body:     "This changes which model handles each message. Failover still applies if a routed model is down.",
+    confirm_on:       "Content routing will be ON with {n} rules.",
+    confirm_off:      "Content routing will be OFF (every message uses the default router).",
+    confirm_apply:    "Apply",
+    cancel:           "Cancel",
+  },
+
   engines_panel: {
     title:               "Providers",
     new_btn:             "New provider",

package/src/interfaces/web/src/i18n/es.ts

@@ -974,6 +974,15 @@ export const es = {
     artifacts_rename:    "Renombrar",
     artifacts_view:      "Ver contenido",
     artifacts_edit:      "Editar contenido",
+    artifacts_preview:       "Previsualizar",
+    artifacts_preview_hint:  "Abrir una previsualización en vivo en una pestaña local",
+    artifacts_share:         "Compartir",
+    artifacts_share_hint:    "Crear una URL pública por túnel para compartir esta preview",
+    artifacts_stop_preview:  "Detener preview",
+    artifacts_preview_local: "Preview local",
+    artifacts_preview_public:"URL pública",
+    artifacts_copy_url:      "Copiar URL",
+    artifacts_preview_started: "Preview activa en {url}",
     tree_collapse_all:   "Colapsar todo",
     terminal_clear:      "Limpiar",
     terminal_close:      "Cerrar terminal",
@@ -1075,6 +1084,44 @@ export const es = {
     provider_not_configured: "El proveedor \"{name}\" no está configurado.",
   },
 
+  routing_panel: {
+    title:            "Ruteo por contenido",
+    description:      "Elegí un modelo distinto por mensaje según su contenido (imagen, tamaño, canal, keywords). Aparte de la cadena de fallback de arriba.",
+    signal_on:        "Ruteo por contenido: ON ({n} reglas)",
+    signal_on_empty:  "Ruteo por contenido: ON (todavía sin reglas)",
+    signal_off:       "Ruteo por contenido: OFF",
+    how_it_works:     "¿Cómo funciona?",
+    enable_label:     "Activar ruteo por contenido",
+    rules_title:      "Reglas de ruteo",
+    rules_desc:       "Se evalúan de arriba hacia abajo; gana la primera regla que cumpla todas sus condiciones.",
+    rules_empty:      "Todavía sin reglas. Agregá algunas en el editor.",
+    edit_rules:       "Editar reglas (JSON)",
+    hide_editor:      "Ocultar editor",
+    editor_label:     "Reglas (array JSON)",
+    json_hint:        "Array de { model, when }. Claves de when: has_image, min_prompt_chars, max_prompt_chars, min_context_chars, channels[], keywords[]. when vacío = matchea todos los mensajes.",
+    json_error:       "JSON inválido: {msg}",
+    json_not_array:   "Las reglas tienen que ser un array JSON.",
+    insert_example:   "Insertar un ejemplo",
+    when_any:         "cualquier mensaje",
+    when_image:       "tiene imagen",
+    when_no_image:    "sin imagen",
+    when_min_prompt:  "prompt ≥ {n} chars",
+    when_max_prompt:  "prompt ≤ {n} chars",
+    when_min_context: "contexto ≥ {n} chars",
+    when_channels:    "canales: {list}",
+    when_keywords:    "keywords: {list}",
+    helper:           "El ruteo elige un modelo por mensaje (imagen, tamaño, canal, keywords). Se compone con el failover: un modelo ruteado que esté caído cae por la cadena. Un override de modelo explícito por request siempre gana.",
+    save:             "Guardar ruteo",
+    saved:            "Guardado",
+    saved_toast:      "Ruteo por contenido guardado.",
+    confirm_title:    "¿Aplicar los cambios de ruteo?",
+    confirm_body:     "Esto cambia qué modelo atiende cada mensaje. El failover sigue aplicando si un modelo ruteado está caído.",
+    confirm_on:       "El ruteo por contenido va a quedar ON con {n} reglas.",
+    confirm_off:      "El ruteo por contenido va a quedar OFF (cada mensaje usa el router default).",
+    confirm_apply:    "Aplicar",
+    cancel:           "Cancelar",
+  },
+
   engines_panel: {
     title:               "Proveedores",
     new_btn:             "Nuevo proveedor",

package/src/interfaces/web/src/lib/api/artifacts.ts

@@ -28,6 +28,29 @@ export interface ArtifactRunResult {
   error?: string;
 }
 
+// A running ephemeral preview server for an artifact. `url` is the local
+// http://localhost:<port>/ address; `tunnel` is set once shared publicly.
+export interface ArtifactPreview {
+  id: string;
+  projectId: string | number | null;
+  name: string;
+  kind: "html" | "react" | "static" | "text";
+  port: number;
+  url: string;
+  watch: boolean;
+  createdAt: string;
+  hits: number;
+  tunnel: { id: string; url: string; provider: string } | null;
+}
+
+export interface ArtifactTunnel {
+  id: string;
+  url: string;
+  provider: string;
+  port: number;
+  createdAt: string;
+}
+
 export const Artifacts = {
   list: (pid: string) =>
     http.get<ArtifactEntry[]>(`/projects/${encodeURIComponent(pid)}/artifacts`),
@@ -54,4 +77,19 @@ export const Artifacts = {
       `/projects/${encodeURIComponent(pid)}/artifacts/${encodeURIComponent(name)}`,
       { newName },
     ),
+
+  // Start (or reuse) an ephemeral local preview server for an artifact.
+  preview: (pid: string, name: string, watch = true) =>
+    http.post<ArtifactPreview>(
+      `/projects/${encodeURIComponent(pid)}/artifacts/${encodeURIComponent(name)}/preview`,
+      { watch },
+    ),
+  // List running preview servers for a project.
+  previews: (pid: string) =>
+    http.get<ArtifactPreview[]>(`/projects/${encodeURIComponent(pid)}/previews`),
+  stopPreview: (id: string) => http.del<void>(`/previews/${encodeURIComponent(id)}`),
+  // Open / close a public tunnel to a running preview.
+  openTunnel: (id: string, provider?: string) =>
+    http.post<ArtifactTunnel>(`/previews/${encodeURIComponent(id)}/tunnel`, { provider }),
+  closeTunnel: (id: string) => http.del<void>(`/previews/${encodeURIComponent(id)}/tunnel`),
 };

package/src/interfaces/web/src/screens/base/ModelsTab.tsx

@@ -1,12 +1,14 @@
 import { DefaultRouterCard } from "../../components/settings/DefaultRouterCard";
+import { RoutingPanel } from "../../components/settings/RoutingPanel";
 import { EnginesPanel } from "../../components/settings/EnginesPanel";
 
-// Base "Models" page: general default router (no per-task cases) on top of the
-// provider list. EnginesPanel is reused as-is from Settings.
+// Base "Models" page: default failover router + content-based routing on top of
+// the provider list. EnginesPanel is reused as-is from Settings.
 export function ModelsTab() {
   return (
     <div className="space-y-6">
       <DefaultRouterCard />
+      <RoutingPanel />
       <EnginesPanel />
     </div>
   );

package/src/interfaces/web/src/types/daemon.ts

@@ -293,6 +293,22 @@ export interface SuperAgentConfig {
     models?: string[];
     order?: string[];
   };
+  // Content-based routing (RouterLLM pattern): prefer a model per turn by
+  // features. Composes with model_fallback (failover) — see RoutingPanel.
+  routing?: {
+    enabled?: boolean;
+    rules?: Array<{
+      model: string;
+      when?: {
+        has_image?: boolean;
+        min_prompt_chars?: number;
+        max_prompt_chars?: number;
+        min_context_chars?: number;
+        channels?: string[];
+        keywords?: string[];
+      };
+    }>;
+  };
 }
 
 /** ~/.apx/config.json shape (partial — only what we read/write today). */