feat(agents): expose runtime + model on create-from-template

Template create used to silently default the runtime to "first usable"
and never collected a model — users had no idea where the new agent
would run or which model it would use until they opened the detail
page. Add a Runtime + Model picker pair above the skill list on the
template-detail step so the choice is visible (and overridable) before
the one-click Use action.

- Extract RuntimePicker out of create-agent-dialog so the form and the
  template-detail step share one popover; selection seeding moves into
  the picker too, since it's the only place that knows the active
  filter (mine/all). Parent keeps just the duplicate-mode pre-fill.
- Mirror RuntimePicker's label-row + trigger DOM in ModelDropdown so
  the two pickers render at identical heights when sat side-by-side
  (fixes a 6-8px misalignment caused by inconsistent label-row sizing).
- Send model in createAgentFromTemplate; server side already accepts
  the field (CreateAgentFromTemplateRequest.Model, omitempty), empty
  string still falls through to the runtime's default model.
- Drop the runtime_register_first fallback hint that made the Runtime
  trigger two-line in the empty state, breaking alignment with Model's
  one-line trigger.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/views/agents/components/create-agent-dialog.tsx

@@ -1,20 +1,16 @@
 "use client";
 
-import { useState, useEffect, useMemo } from "react";
+import { useState } from "react";
 import {
   ArrowLeft,
-  ChevronDown,
-  Cloud,
   FileText,
   Globe,
-  Loader2,
   Lock,
   PenLine,
 } from "lucide-react";
 import { useQueryClient } from "@tanstack/react-query";
-import { ProviderLogo } from "../../runtimes/components/provider-logo";
-import { ActorAvatar } from "../../common/actor-avatar";
 import { ModelDropdown } from "./model-dropdown";
+import { RuntimePicker, isRuntimeUsableForUser } from "./runtime-picker";
 import { TemplatePicker } from "./template-picker";
 import { TemplateDetail } from "./template-detail";
 import { InstructionsEditor } from "./instructions-editor";
@@ -41,11 +37,6 @@ import {
   DialogTitle,
   DialogDescription,
 } from "@multica/ui/components/ui/dialog";
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-} from "@multica/ui/components/ui/popover";
 import { Button } from "@multica/ui/components/ui/button";
 import { Input } from "@multica/ui/components/ui/input";
 import { Label } from "@multica/ui/components/ui/label";
@@ -59,8 +50,6 @@ import {
 import { CharCounter } from "./char-counter";
 import { useT } from "../../i18n";
 
-type RuntimeFilter = "mine" | "all";
-
 // State machine encoded as a discriminated union.
 //
 //   chooser          → "Start blank" or "From template" cards
@@ -182,85 +171,30 @@ export function CreateAgentDialog({
   );
   const [creating, setCreating] = useState(false);
   const [failedURLs, setFailedURLs] = useState<string[] | null>(null);
-  const [runtimeOpen, setRuntimeOpen] = useState(false);
-  const [runtimeFilter, setRuntimeFilter] = useState<RuntimeFilter>("mine");
 
-  const getOwnerMember = (ownerId: string | null) => {
-    if (!ownerId) return null;
-    return members.find((m) => m.user_id === ownerId) ?? null;
-  };
-
-  const hasOtherRuntimes = runtimes.some((r) => r.owner_id !== currentUserId);
-
-  // A runtime is disabled for the caller when it's owned by someone else
-  // AND its visibility is not "public". Older backends that haven't shipped
-  // MUL-2062 leave visibility undefined; we treat anything other than the
-  // literal string "public" as private so the strict default holds (the
-  // backend will reject the create anyway).
-  const isRuntimeDisabledForUser = (r: RuntimeDevice): boolean => {
-    if (!currentUserId) return false;
-    if (r.owner_id === currentUserId) return false;
-    return r.visibility !== "public";
-  };
-
-  const filteredRuntimes = useMemo(() => {
-    const filtered = runtimeFilter === "mine" && currentUserId
-      ? runtimes.filter((r) => r.owner_id === currentUserId)
-      : runtimes;
-    return [...filtered].sort((a, b) => {
-      // Caller's own runtimes first; among the rest, usable (public) ones
-      // come before unusable (private) ones so the picker doesn't lead
-      // with greyed-out rows.
-      const aMine = a.owner_id === currentUserId;
-      const bMine = b.owner_id === currentUserId;
-      if (aMine && !bMine) return -1;
-      if (!aMine && bMine) return 1;
-      const aDisabled = isRuntimeDisabledForUser(a);
-      const bDisabled = isRuntimeDisabledForUser(b);
-      if (!aDisabled && bDisabled) return -1;
-      if (aDisabled && !bDisabled) return 1;
-      return 0;
-    });
-    // currentUserId is the only external dep of isRuntimeDisabledForUser;
-    // listing it in the deps array is enough.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runtimes, runtimeFilter, currentUserId]);
-
-  // When duplicating, default to the template's runtime so the clone
-  // lands on the same machine — caller can still switch in the picker.
-  // But never seed with a runtime the caller can't actually use (locked
-  // by visibility); otherwise the dialog opens with a selected row the
-  // user can't submit, and Create falls through to a backend 403. Falling
-  // back to the first usable runtime is friendlier than the locked
-  // pre-fill. Computed inside the initializer so the find-walk only runs
-  // on first mount, not on every render.
+  // Duplicate-mode pre-fill: clone lands on the source agent's runtime so
+  // the user doesn't have to re-pick. Skipped when that runtime is now
+  // locked for the caller (Create would 403). Empty fallback hands the
+  // job to RuntimePicker — it owns filter state, so it's the only place
+  // that knows which runtimes are visible right now.
   const [selectedRuntimeId, setSelectedRuntimeId] = useState(() => {
     const templateRuntime = template?.runtime_id
       ? runtimes.find((r) => r.id === template.runtime_id)
       : undefined;
-    if (templateRuntime && !isRuntimeDisabledForUser(templateRuntime)) {
+    if (templateRuntime && isRuntimeUsableForUser(templateRuntime, currentUserId)) {
       return templateRuntime.id;
     }
-    return filteredRuntimes.find((r) => !isRuntimeDisabledForUser(r))?.id ?? "";
+    return "";
   });
 
-  useEffect(() => {
-    if (!selectedRuntimeId) {
-      const firstUsable = filteredRuntimes.find(
-        (r) => !isRuntimeDisabledForUser(r),
-      );
-      if (firstUsable) setSelectedRuntimeId(firstUsable.id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filteredRuntimes, selectedRuntimeId]);
-
   const selectedRuntime = runtimes.find((d) => d.id === selectedRuntimeId) ?? null;
   // Defense-in-depth: even if a locked runtime somehow ends up selected
   // (e.g. duplicate of an agent whose template runtime is now locked, and
   // the workspace has no usable fallback), gate Create on it so we don't
   // submit a request the backend will reject with 403.
   const selectedRuntimeLocked =
-    selectedRuntime != null && isRuntimeDisabledForUser(selectedRuntime);
+    selectedRuntime != null &&
+    !isRuntimeUsableForUser(selectedRuntime, currentUserId);
 
   // Transition helpers. Each centralises the form-field initialisation
   // for its target step, so transitions can't leave stale state behind.
@@ -300,6 +234,7 @@ export function CreateAgentDialog({
         template_slug: tmpl.slug,
         name: candidate,
         runtime_id: selectedRuntime.id,
+        model: model.trim() || undefined,
         visibility: "workspace",
       });
       if (wsId) {
@@ -555,6 +490,16 @@ export function CreateAgentDialog({
             onUse={quickCreateFromTemplate}
             creating={creating}
             failedURLs={failedURLs}
+            runtimes={runtimes}
+            runtimesLoading={runtimesLoading}
+            members={members}
+            currentUserId={currentUserId}
+            selectedRuntimeId={selectedRuntimeId}
+            onRuntimeSelect={setSelectedRuntimeId}
+            selectedRuntime={selectedRuntime}
+            model={model}
+            onModelChange={setModel}
+            useDisabled={!selectedRuntime || selectedRuntimeLocked}
           />
         )}
 
@@ -652,131 +597,14 @@ export function CreateAgentDialog({
                   </div>
                 </div>
 
-                <div className="min-w-0">
-                  <div className="flex items-center justify-between">
-                    <Label className="text-xs text-muted-foreground">{t(($) => $.create_dialog.runtime_label)}</Label>
-                    {hasOtherRuntimes && (
-                      <div className="flex items-center gap-0.5 rounded-md bg-muted p-0.5">
-                        <button
-                          type="button"
-                          onClick={() => { setRuntimeFilter("mine"); setSelectedRuntimeId(""); }}
-                          className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
-                            runtimeFilter === "mine"
-                              ? "bg-background text-foreground shadow-sm"
-                              : "text-muted-foreground hover:text-foreground"
-                          }`}
-                        >
-                          {t(($) => $.create_dialog.runtime_filter_mine)}
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => { setRuntimeFilter("all"); setSelectedRuntimeId(""); }}
-                          className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
-                            runtimeFilter === "all"
-                              ? "bg-background text-foreground shadow-sm"
-                              : "text-muted-foreground hover:text-foreground"
-                          }`}
-                        >
-                          {t(($) => $.create_dialog.runtime_filter_all)}
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                  <Popover open={runtimeOpen} onOpenChange={setRuntimeOpen}>
-                    <PopoverTrigger
-                      disabled={runtimes.length === 0 && !runtimesLoading}
-                      className="flex w-full min-w-0 items-center gap-3 rounded-lg border border-border bg-background px-3 py-2.5 mt-1.5 text-left text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50"
-                    >
-                      {runtimesLoading ? (
-                        <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
-                      ) : selectedRuntime ? (
-                        <ProviderLogo provider={selectedRuntime.provider} className="h-4 w-4 shrink-0" />
-                      ) : (
-                        <Cloud className="h-4 w-4 shrink-0 text-muted-foreground" />
-                      )}
-                      <div className="min-w-0 flex-1">
-                        <div className="flex items-center gap-2">
-                          <span className="truncate font-medium">
-                            {runtimesLoading ? t(($) => $.create_dialog.runtime_loading) : (selectedRuntime?.name ?? t(($) => $.create_dialog.runtime_none))}
-                          </span>
-                          {selectedRuntime?.runtime_mode === "cloud" && (
-                            <span className="shrink-0 rounded bg-info/10 px-1.5 py-0.5 text-xs font-medium text-info">
-                              {t(($) => $.create_dialog.runtime_cloud_badge)}
-                            </span>
-                          )}
-                        </div>
-                        <div className="truncate text-xs text-muted-foreground">
-                          {selectedRuntime
-                            ? (getOwnerMember(selectedRuntime.owner_id)?.name ?? selectedRuntime.device_info)
-                            : t(($) => $.create_dialog.runtime_register_first)}
-                        </div>
-                      </div>
-                      <ChevronDown className={`h-4 w-4 shrink-0 text-muted-foreground transition-transform ${runtimeOpen ? "rotate-180" : ""}`} />
-                    </PopoverTrigger>
-                    <PopoverContent align="start" className="w-[var(--anchor-width)] p-1 max-h-60 overflow-y-auto">
-                      {filteredRuntimes.map((device) => {
-                        const ownerMember = getOwnerMember(device.owner_id);
-                        const disabled = isRuntimeDisabledForUser(device);
-                        const disabledTitle = disabled
-                          ? t(($) => $.create_dialog.runtime_private_locked_tooltip)
-                          : undefined;
-                        return (
-                          <button
-                            key={device.id}
-                            type="button"
-                            disabled={disabled}
-                            title={disabledTitle}
-                            onClick={() => {
-                              if (disabled) return;
-                              setSelectedRuntimeId(device.id);
-                              setRuntimeOpen(false);
-                            }}
-                            className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm transition-colors ${
-                              disabled
-                                ? "cursor-not-allowed opacity-50"
-                                : device.id === selectedRuntimeId
-                                  ? "bg-accent"
-                                  : "hover:bg-accent/50"
-                            }`}
-                          >
-                            <ProviderLogo provider={device.provider} className="h-4 w-4 shrink-0" />
-                            <div className="min-w-0 flex-1">
-                              <div className="flex items-center gap-2">
-                                <span className="truncate font-medium">{device.name}</span>
-                                {device.runtime_mode === "cloud" && (
-                                  <span className="shrink-0 rounded bg-info/10 px-1.5 py-0.5 text-xs font-medium text-info">
-                                    {t(($) => $.create_dialog.runtime_cloud_badge)}
-                                  </span>
-                                )}
-                                {disabled && (
-                                  <span className="shrink-0 inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
-                                    <Lock className="h-3 w-3" />
-                                    {t(($) => $.create_dialog.runtime_private_badge)}
-                                  </span>
-                                )}
-                              </div>
-                              <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
-                                {ownerMember ? (
-                                  <>
-                                    <ActorAvatar actorType="member" actorId={ownerMember.user_id} size={14} />
-                                    <span className="truncate">{ownerMember.name}</span>
-                                  </>
-                                ) : (
-                                  <span className="truncate">{device.device_info}</span>
-                                )}
-                              </div>
-                            </div>
-                            <span
-                              className={`h-2 w-2 shrink-0 rounded-full ${
-                                device.status === "online" ? "bg-success" : "bg-muted-foreground/40"
-                              }`}
-                            />
-                          </button>
-                        );
-                      })}
-                    </PopoverContent>
-                  </Popover>
-                </div>
+                <RuntimePicker
+                  runtimes={runtimes}
+                  runtimesLoading={runtimesLoading}
+                  members={members}
+                  currentUserId={currentUserId}
+                  selectedRuntimeId={selectedRuntimeId}
+                  onSelect={setSelectedRuntimeId}
+                />
 
                 <ModelDropdown
                   runtimeId={selectedRuntime?.id ?? null}

packages/views/agents/components/model-dropdown.tsx

@@ -97,8 +97,10 @@ export function ModelDropdown({
 
   if (!supported && !modelsQuery.isLoading) {
     return (
-      <div className="min-w-0">
-        <Label className="text-xs text-muted-foreground">{t(($) => $.model_dropdown.label)}</Label>
+      <div className="flex flex-col min-w-0">
+        <div className="flex h-6 items-center">
+          <Label className="text-xs text-muted-foreground">{t(($) => $.model_dropdown.label)}</Label>
+        </div>
         <div className="mt-1.5 flex items-start gap-2 rounded-lg border border-dashed border-border bg-muted/30 px-3 py-2.5 text-sm text-muted-foreground">
           <Info className="mt-0.5 h-4 w-4 shrink-0" />
           <div className="min-w-0">
@@ -113,8 +115,8 @@ export function ModelDropdown({
   }
 
   return (
-    <div className="min-w-0">
-      <div className="flex items-center justify-between">
+    <div className="flex flex-col min-w-0">
+      <div className="flex h-6 items-center justify-between">
         <Label className="text-xs text-muted-foreground">{t(($) => $.model_dropdown.label)}</Label>
         {modelsQuery.isError && (
           <span className="text-xs text-muted-foreground">{t(($) => $.model_dropdown.discovery_failed)}</span>
@@ -127,8 +129,11 @@ export function ModelDropdown({
         >
           <Cpu className="h-4 w-4 shrink-0 text-muted-foreground" />
           <div className="min-w-0 flex-1">
-            <div className="truncate font-medium">
-              {triggerLabel}
+            {/* Wrapped in flex to mirror RuntimePicker's trigger DOM. The
+                two pickers sit side-by-side; inline-in-flex vs block-line-
+                box height calc would otherwise leave them ~1px misaligned. */}
+            <div className="flex items-center gap-2">
+              <span className="truncate font-medium">{triggerLabel}</span>
             </div>
             {value && (
               <div className="truncate text-xs text-muted-foreground">

packages/views/agents/components/runtime-picker.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { ChevronDown, Cloud, Loader2, Lock } from "lucide-react";
+import { ProviderLogo } from "../../runtimes/components/provider-logo";
+import { ActorAvatar } from "../../common/actor-avatar";
+import type { MemberWithUser, RuntimeDevice } from "@multica/core/types";
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "@multica/ui/components/ui/popover";
+import { Label } from "@multica/ui/components/ui/label";
+import { useT } from "../../i18n";
+
+export type RuntimeFilter = "mine" | "all";
+
+// Pulled out of create-agent-dialog so the template-detail step can reuse the
+// same picker without duplicating the ~90-line popover. Internal UI state
+// (popover open, filter toggle) lives here; selection lives in the parent
+// because both the form and the template-create call read selectedRuntime.
+export function RuntimePicker({
+  runtimes,
+  runtimesLoading,
+  members,
+  currentUserId,
+  selectedRuntimeId,
+  onSelect,
+}: {
+  runtimes: RuntimeDevice[];
+  runtimesLoading?: boolean;
+  members: MemberWithUser[];
+  currentUserId: string | null;
+  selectedRuntimeId: string;
+  onSelect: (id: string) => void;
+}) {
+  const { t } = useT("agents");
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState<RuntimeFilter>("mine");
+
+  const getOwnerMember = (ownerId: string | null) => {
+    if (!ownerId) return null;
+    return members.find((m) => m.user_id === ownerId) ?? null;
+  };
+
+  const hasOtherRuntimes = runtimes.some((r) => r.owner_id !== currentUserId);
+
+  const filteredRuntimes = useMemo(
+    () => computeFilteredRuntimes(runtimes, filter, currentUserId),
+    [runtimes, filter, currentUserId],
+  );
+
+  const selectedRuntime =
+    runtimes.find((d) => d.id === selectedRuntimeId) ?? null;
+
+  // Sole source of truth for seeding the parent's selection when it's empty
+  // — first mount with no template runtime, runtimes arriving later over
+  // WS, or filter toggle clearing to a set with no usable item. Only fires
+  // when `selectedRuntimeId === ""` so a duplicate-mode pre-fill (template
+  // runtime) is never silently overwritten.
+  useEffect(() => {
+    if (selectedRuntimeId !== "") return;
+    const firstUsable = filteredRuntimes.find((r) =>
+      isRuntimeUsableForUser(r, currentUserId),
+    );
+    if (firstUsable) onSelect(firstUsable.id);
+  }, [filteredRuntimes, selectedRuntimeId, currentUserId, onSelect]);
+
+  // On filter toggle, recompute the picker's selection to a usable item
+  // in the new filter set. Pushes `""` when nothing matches; the seeding
+  // effect above is a no-op in that case (correct: no usable item to pick).
+  const handleFilterChange = (next: RuntimeFilter) => {
+    if (next === filter) return;
+    setFilter(next);
+    const nextList = computeFilteredRuntimes(runtimes, next, currentUserId);
+    const firstUsable = nextList.find((r) =>
+      isRuntimeUsableForUser(r, currentUserId),
+    );
+    onSelect(firstUsable?.id ?? "");
+  };
+
+  return (
+    <div className="flex flex-col min-w-0">
+      <div className="flex h-6 items-center justify-between">
+        <Label className="text-xs text-muted-foreground">
+          {t(($) => $.create_dialog.runtime_label)}
+        </Label>
+        {hasOtherRuntimes && (
+          <div className="flex items-center gap-0.5 rounded-md bg-muted p-0.5">
+            <button
+              type="button"
+              onClick={() => handleFilterChange("mine")}
+              className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
+                filter === "mine"
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {t(($) => $.create_dialog.runtime_filter_mine)}
+            </button>
+            <button
+              type="button"
+              onClick={() => handleFilterChange("all")}
+              className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
+                filter === "all"
+                  ? "bg-background text-foreground shadow-sm"
+                  : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              {t(($) => $.create_dialog.runtime_filter_all)}
+            </button>
+          </div>
+        )}
+      </div>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          disabled={runtimes.length === 0 && !runtimesLoading}
+          className="flex w-full min-w-0 items-center gap-3 rounded-lg border border-border bg-background px-3 py-2.5 mt-1.5 text-left text-sm transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50"
+        >
+          {runtimesLoading ? (
+            <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+          ) : selectedRuntime ? (
+            <ProviderLogo
+              provider={selectedRuntime.provider}
+              className="h-4 w-4 shrink-0"
+            />
+          ) : (
+            <Cloud className="h-4 w-4 shrink-0 text-muted-foreground" />
+          )}
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <span className="truncate font-medium">
+                {runtimesLoading
+                  ? t(($) => $.create_dialog.runtime_loading)
+                  : (selectedRuntime?.name ??
+                    t(($) => $.create_dialog.runtime_none))}
+              </span>
+              {selectedRuntime?.runtime_mode === "cloud" && (
+                <span className="shrink-0 rounded bg-info/10 px-1.5 py-0.5 text-xs font-medium text-info">
+                  {t(($) => $.create_dialog.runtime_cloud_badge)}
+                </span>
+              )}
+            </div>
+            {selectedRuntime && (
+              <div className="truncate text-xs text-muted-foreground">
+                {getOwnerMember(selectedRuntime.owner_id)?.name ??
+                  selectedRuntime.device_info}
+              </div>
+            )}
+          </div>
+          <ChevronDown
+            className={`h-4 w-4 shrink-0 text-muted-foreground transition-transform ${
+              open ? "rotate-180" : ""
+            }`}
+          />
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="w-[var(--anchor-width)] p-1 max-h-60 overflow-y-auto"
+        >
+          {filteredRuntimes.map((device) => {
+            const ownerMember = getOwnerMember(device.owner_id);
+            const disabled = !isRuntimeUsableForUser(device, currentUserId);
+            const disabledTitle = disabled
+              ? t(($) => $.create_dialog.runtime_private_locked_tooltip)
+              : undefined;
+            return (
+              <button
+                key={device.id}
+                type="button"
+                disabled={disabled}
+                title={disabledTitle}
+                onClick={() => {
+                  if (disabled) return;
+                  onSelect(device.id);
+                  setOpen(false);
+                }}
+                className={`flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-left text-sm transition-colors ${
+                  disabled
+                    ? "cursor-not-allowed opacity-50"
+                    : device.id === selectedRuntimeId
+                      ? "bg-accent"
+                      : "hover:bg-accent/50"
+                }`}
+              >
+                <ProviderLogo
+                  provider={device.provider}
+                  className="h-4 w-4 shrink-0"
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="truncate font-medium">{device.name}</span>
+                    {device.runtime_mode === "cloud" && (
+                      <span className="shrink-0 rounded bg-info/10 px-1.5 py-0.5 text-xs font-medium text-info">
+                        {t(($) => $.create_dialog.runtime_cloud_badge)}
+                      </span>
+                    )}
+                    {disabled && (
+                      <span className="shrink-0 inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                        <Lock className="h-3 w-3" />
+                        {t(($) => $.create_dialog.runtime_private_badge)}
+                      </span>
+                    )}
+                  </div>
+                  <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
+                    {ownerMember ? (
+                      <>
+                        <ActorAvatar
+                          actorType="member"
+                          actorId={ownerMember.user_id}
+                          size={14}
+                        />
+                        <span className="truncate">{ownerMember.name}</span>
+                      </>
+                    ) : (
+                      <span className="truncate">{device.device_info}</span>
+                    )}
+                  </div>
+                </div>
+                <span
+                  className={`h-2 w-2 shrink-0 rounded-full ${
+                    device.status === "online"
+                      ? "bg-success"
+                      : "bg-muted-foreground/40"
+                  }`}
+                />
+              </button>
+            );
+          })}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+// Visibility gate exposed so the parent can defend Create against a locked
+// selection (e.g. duplicate of an agent whose runtime is now private).
+export function isRuntimeUsableForUser(
+  r: RuntimeDevice,
+  currentUserId: string | null,
+): boolean {
+  if (!currentUserId) return true;
+  if (r.owner_id === currentUserId) return true;
+  return r.visibility === "public";
+}
+
+function computeFilteredRuntimes(
+  runtimes: RuntimeDevice[],
+  filter: RuntimeFilter,
+  currentUserId: string | null,
+): RuntimeDevice[] {
+  const filtered =
+    filter === "mine" && currentUserId
+      ? runtimes.filter((r) => r.owner_id === currentUserId)
+      : runtimes;
+  return [...filtered].sort((a, b) => {
+    const aMine = a.owner_id === currentUserId;
+    const bMine = b.owner_id === currentUserId;
+    if (aMine && !bMine) return -1;
+    if (!aMine && bMine) return 1;
+    const aUsable = isRuntimeUsableForUser(a, currentUserId);
+    const bUsable = isRuntimeUsableForUser(b, currentUserId);
+    if (aUsable && !bUsable) return -1;
+    if (!aUsable && bUsable) return 1;
+    return 0;
+  });
+}

packages/views/agents/components/template-detail.tsx

@@ -3,11 +3,17 @@
 import { Check, ChevronRight, Loader2 } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { agentTemplateDetailOptions } from "@multica/core/agents/queries";
-import type { AgentTemplateSummary } from "@multica/core/types";
+import type {
+  AgentTemplateSummary,
+  MemberWithUser,
+  RuntimeDevice,
+} from "@multica/core/types";
 import { Button } from "@multica/ui/components/ui/button";
 import { cn } from "@multica/ui/lib/utils";
 import { useT } from "../../i18n";
 import { getAccentClass, getTemplateIcon } from "./template-picker";
+import { ModelDropdown } from "./model-dropdown";
+import { RuntimePicker } from "./runtime-picker";
 
 interface TemplateDetailProps {
   template: AgentTemplateSummary;
@@ -23,6 +29,19 @@ interface TemplateDetailProps {
    *  this banner can render — `quickCreateFromTemplate` fires from here
    *  and never advances to a different step on failure. */
   failedURLs?: readonly string[] | null;
+  // Runtime/model state lives in the parent so `quickCreateFromTemplate`
+  // can read the latest selection without lifting child state up at click
+  // time.
+  runtimes: RuntimeDevice[];
+  runtimesLoading?: boolean;
+  members: MemberWithUser[];
+  currentUserId: string | null;
+  selectedRuntimeId: string;
+  onRuntimeSelect: (id: string) => void;
+  selectedRuntime: RuntimeDevice | null;
+  model: string;
+  onModelChange: (model: string) => void;
+  useDisabled?: boolean;
 }
 
 /**
@@ -42,6 +61,16 @@ export function TemplateDetail({
   onUse,
   creating = false,
   failedURLs,
+  runtimes,
+  runtimesLoading,
+  members,
+  currentUserId,
+  selectedRuntimeId,
+  onRuntimeSelect,
+  selectedRuntime,
+  model,
+  onModelChange,
+  useDisabled,
 }: TemplateDetailProps) {
   const { t } = useT("agents");
   const { data: detail, isLoading, error } = useQuery(
@@ -93,6 +122,29 @@ export function TemplateDetail({
             </div>
           </div>
 
+          {/* Runtime + Model — picked here so the user knows where the
+              new agent will run and which model it uses. Defaults seeded
+              by the parent (first usable runtime, empty model = runtime
+              default); user can override before clicking Use. Two columns
+              with `items-stretch` keep both pickers visually balanced. */}
+          <section className="mt-6 grid grid-cols-1 items-stretch gap-4 sm:grid-cols-2">
+            <RuntimePicker
+              runtimes={runtimes}
+              runtimesLoading={runtimesLoading}
+              members={members}
+              currentUserId={currentUserId}
+              selectedRuntimeId={selectedRuntimeId}
+              onSelect={onRuntimeSelect}
+            />
+            <ModelDropdown
+              runtimeId={selectedRuntime?.id ?? null}
+              runtimeOnline={selectedRuntime?.status === "online"}
+              value={model}
+              onChange={onModelChange}
+              disabled={!selectedRuntime}
+            />
+          </section>
+
           {/* Skill list — always visible (summary has cached descriptions) */}
           <section className="mt-6">
             <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
@@ -152,7 +204,7 @@ export function TemplateDetail({
       <div className="flex items-center justify-end gap-2 border-t bg-background px-5 py-3">
         <Button
           onClick={() => onUse(template)}
-          disabled={creating}
+          disabled={creating || useDisabled}
           className="gap-1.5"
         >
           {creating ? (

packages/views/locales/en/agents.json

@@ -210,7 +210,6 @@
     "runtime_filter_all": "All",
     "runtime_loading": "Loading runtimes...",
     "runtime_none": "No runtime available",
-    "runtime_register_first": "Register a runtime before creating an agent",
     "runtime_cloud_badge": "Cloud",
     "runtime_private_badge": "Private",
     "runtime_private_locked_tooltip": "Private runtime — only its owner or a workspace admin can create agents on it. Ask the owner to switch it to Public to share.",

packages/views/locales/zh-Hans/agents.json

@@ -206,7 +206,6 @@
     "runtime_filter_all": "全部",
     "runtime_loading": "加载运行时...",
     "runtime_none": "暂无可用运行时",
-    "runtime_register_first": "请先注册一个运行时再创建智能体",
     "runtime_cloud_badge": "云端",
     "runtime_private_badge": "私有",
     "runtime_private_locked_tooltip": "私有运行时——只有 runtime 所有者或工作区管理员可在其上创建智能体。如果需要共享，请联系所有者切换为「公开」。",