@tutti-os/agent-gui 0.0.90 → 0.0.92

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   resolveAgentGuiSessionProviderFlatIconUrl,
   resolveNextAgentGUIConversationRailWidthPx,
   shouldAutoCollapseAgentGUIConversationRail
-} from "./chunk-P7RX2NSY.js";
+} from "./chunk-M2LWH54R.js";
 import "./chunk-45FF4DQU.js";
 import "./chunk-7LMJXF4R.js";
 import "./chunk-GAPTLVII.js";
@@ -80,7 +80,7 @@ import {
   textPromptContent,
   toLocalShortDateTime,
   useProjectedAgentConversation
-} from "./chunk-KTXWPKGP.js";
+} from "./chunk-7QHBFRG5.js";
 import {
   AgentMessageMarkdown,
   AgentTargetPresentationProvider,
@@ -2366,8 +2366,8 @@ var DEFAULT_AGENT_SETTINGS = {
   hideWorktreeMismatchDropWarning: false
 };
 
-// providerTargets.ts
-var agentGUIProviderTargetStaticLabels = {
+// agentTargets.ts
+var agentGUIAgentTargetStaticLabels = {
   "claude-code": "Claude Code",
   codex: "Codex",
   cursor: "Cursor",
@@ -2390,8 +2390,8 @@ var agentGUIDisabledPlaceholderProviders = [
   "hermes",
   "openclaw"
 ];
-function createLocalAgentGUIProviderTarget(provider) {
-  const targetId = localAgentGUIProviderTargetId(provider);
+function createLocalAgentGUIAgentTarget(provider) {
+  const targetId = localAgentGUIAgentTargetId(provider);
   const agentTargetId = localAgentGUIAgentTargetId(provider);
   return {
     targetId,
@@ -2401,49 +2401,27 @@ function createLocalAgentGUIProviderTarget(provider) {
       kind: "local",
       provider
     },
-    label: agentGUIProviderTargetStaticLabels[provider] ?? provider
+    label: agentGUIAgentTargetStaticLabels[provider] ?? provider
   };
 }
-function createDisabledPlaceholderAgentGUIProviderTarget(provider) {
+function createDisabledPlaceholderAgentGUIAgentTarget(provider) {
   return {
-    ...createLocalAgentGUIProviderTarget(provider),
+    ...createLocalAgentGUIAgentTarget(provider),
     disabled: true
   };
 }
-function createStaticAgentGUIProviderTargets(providers = agentGUIDefaultTargetProviders, options) {
+function createStaticAgentGUIAgentTargets(providers = agentGUIDefaultTargetProviders, options) {
   const disabledProviders = new Set(
     options?.includeDisabledPlaceholders === true ? agentGUIDisabledPlaceholderProviders : []
   );
   return providers.map(
-    (provider) => disabledProviders.has(provider) ? createDisabledPlaceholderAgentGUIProviderTarget(provider) : createLocalAgentGUIProviderTarget(provider)
+    (provider) => disabledProviders.has(provider) ? createDisabledPlaceholderAgentGUIAgentTarget(provider) : createLocalAgentGUIAgentTarget(provider)
   );
 }
-function localAgentGUIProviderTargetId(provider) {
-  return `local:${provider}`;
-}
 function localAgentGUIAgentTargetId(provider) {
-  switch (provider) {
-    case "codex":
-      return "local:codex";
-    case "claude-code":
-      return "local:claude-code";
-    case "tutti-agent":
-      return "local:tutti-agent";
-    case "cursor":
-      return "local:cursor";
-    case "hermes":
-      return "local:hermes";
-    case "nexight":
-      return "local:nexight";
-    case "openclaw":
-      return "local:openclaw";
-    case "opencode":
-      return "local:opencode";
-    default:
-      return null;
-  }
+  return `local:${provider}`;
 }
-function normalizeAgentGUIProviderTargets(targets, options) {
+function normalizeAgentGUIAgentTargets(targets, options) {
   const includeDisabledPlaceholders = options?.includeDisabledPlaceholders === true;
   const useStaticCatalog = options?.useStaticCatalog !== false;
   const source = targets && targets.length > 0 ? targets : [];
@@ -2451,7 +2429,7 @@ function normalizeAgentGUIProviderTargets(targets, options) {
   const seenTargetKeys = /* @__PURE__ */ new Set();
   const seenProviders = /* @__PURE__ */ new Set();
   for (const target of source) {
-    const normalized = normalizeAgentGUIProviderTarget(target);
+    const normalized = normalizeAgentGUIAgentTarget(target);
     if (!normalized) {
       continue;
     }
@@ -2469,15 +2447,15 @@ function normalizeAgentGUIProviderTargets(targets, options) {
         continue;
       }
       normalizedTargets.push(
-        createDisabledPlaceholderAgentGUIProviderTarget(provider)
+        createDisabledPlaceholderAgentGUIAgentTarget(provider)
       );
     }
   }
-  return normalizedTargets.length > 0 || !useStaticCatalog ? normalizedTargets : createStaticAgentGUIProviderTargets(void 0, {
+  return normalizedTargets.length > 0 || !useStaticCatalog ? normalizedTargets : createStaticAgentGUIAgentTargets(void 0, {
     includeDisabledPlaceholders
   });
 }
-function normalizeAgentGUIProviderTarget(target) {
+function normalizeAgentGUIAgentTarget(target) {
   const {
     targetId: _targetId,
     agentTargetId: _agentTargetId,
@@ -2498,7 +2476,7 @@ function normalizeAgentGUIProviderTarget(target) {
   if (!targetId || !label || !kind || target.ref.provider !== target.provider) {
     return null;
   }
-  const normalizedBadge = normalizeAgentGUIProviderTargetBadge(badge);
+  const normalizedBadge = normalizeAgentGUIAgentTargetBadge(badge);
   return {
     ...rest,
     targetId,
@@ -2517,7 +2495,7 @@ function normalizeAgentGUIProviderTarget(target) {
     ...unavailableReason?.trim() ? { unavailableReason: unavailableReason.trim() } : {}
   };
 }
-function normalizeAgentGUIProviderTargetBadge(badge) {
+function normalizeAgentGUIAgentTargetBadge(badge) {
   const iconUrl = badge?.iconUrl?.trim() ?? "";
   if (!iconUrl) {
     return null;
@@ -7010,7 +6988,7 @@ function composerDefaultsPatchFromSettings(touched, finalSettings) {
   }
   return Object.keys(patch).length > 0 ? patch : null;
 }
-function composerTargetDataFromProviderTarget(input) {
+function composerTargetDataFromAgentTarget(input) {
   const agentTargetId = normalizeOptionalText2(input.target.agentTargetId);
   const currentAgentTargetId = normalizeOptionalText2(
     input.current.agentTargetId
@@ -7034,7 +7012,7 @@ function composerTargetDataFromProviderTarget(input) {
     }
   };
 }
-function isExplicitAgentGUIProviderTarget(target, explicitTargets) {
+function isExplicitAgentGUIAgentTarget(target, explicitTargets) {
   return explicitTargets.some(
     (candidate) => candidate.agentTargetId === target.agentTargetId
   );
@@ -7052,8 +7030,8 @@ function resolveAgentGUIDirectorySelection(input) {
   if (agentTargetId) {
     return findAgentGUIDirectoryTarget(input.targets, agentTargetId) ?? null;
   }
-  const providerTargets = input.provider ? input.targets.filter((target) => target.provider === input.provider) : [];
-  return providerTargets.find((target) => target.disabled !== true) ?? providerTargets[0] ?? input.targets.find((target) => target.disabled !== true) ?? input.targets[0] ?? null;
+  const agentTargets = input.provider ? input.targets.filter((target) => target.provider === input.provider) : [];
+  return agentTargets.find((target) => target.disabled !== true) ?? agentTargets[0] ?? input.targets.find((target) => target.disabled !== true) ?? input.targets[0] ?? null;
 }
 function resolveAgentGUIHomeDirectorySelection(input) {
   const dataAgentTargetId = normalizeOptionalText2(input.data.agentTargetId);
@@ -7184,7 +7162,7 @@ function sanitizeComposerSettingsForTarget(input) {
   }
   return sanitizeComposerSettingsForOptions(input.settings, input.options);
 }
-function agentGUIProviderTargetsEqual(left, right) {
+function agentGUIAgentTargetsEqual(left, right) {
   return (left.agentTargetId ?? left.targetId) === (right.agentTargetId ?? right.targetId);
 }
 function reportAgentGUIDiagnostic(runtime, input) {
@@ -7239,7 +7217,7 @@ function reportAgentGUIConversationFilterTargetUnresolved(input) {
     details: {
       agentTargetId: input.agentTargetId,
       provider: input.provider,
-      providerTargetCount: input.providerTargetCount,
+      agentTargetCount: input.agentTargetCount,
       reason: input.reason
     },
     event: "agent.gui.conversation_filter.target_unresolved",
@@ -7284,15 +7262,15 @@ function reportAgentGUIRenderStateDiagnostic(input) {
       isInterrupting: input.isInterrupting,
       isLoadingMessages: input.isLoadingMessages,
       isSubmitting: input.isSubmitting,
-      providerTargetsLoading: input.providerTargetsLoading,
+      agentTargetsLoading: input.agentTargetsLoading,
       pendingApprovalRequestId: input.pendingApproval?.requestId ?? null,
       pendingInteractivePromptKind: input.pendingInteractivePrompt?.kind ?? null,
       pendingInteractivePromptRequestId: promptRequestId(
         input.pendingInteractivePrompt
       ),
-      selectedProviderTargetDisabled: input.selectedProviderTargetDisabled,
-      selectedProviderTargetId: input.selectedProviderTargetId,
-      selectedProviderTargetIsExplicit: input.selectedProviderTargetIsExplicit,
+      selectedAgentTargetDisabled: input.selectedAgentTargetDisabled,
+      selectedAgentTargetId: input.selectedAgentTargetId,
+      selectedAgentTargetIsExplicit: input.selectedAgentTargetIsExplicit,
       sessionAuthBlocked: input.sessionAuthBlocked,
       runtimeSession: agentGUIRuntimeSessionDiagnosticDetails(
         input.activeRuntimeSession
@@ -9209,8 +9187,8 @@ function useAgentGUINodeController({
   workspacePath,
   avoidGroupingEdits,
   data,
-  providerTargets,
-  providerTargetsLoading = false,
+  agentTargets,
+  agentTargetsLoading = false,
   providerReadinessGates = null,
   defaultAgentTargetId = null,
   openSessionRequest = null,
@@ -9241,95 +9219,87 @@ function useAgentGUINodeController({
   const agentQueuedPromptRuntime = useAgentQueuedPromptRuntime();
   const agentHostApi = useAgentHostApi();
   const agentActivitySnapshot = useAgentActivitySnapshot(workspaceId);
-  const normalizedExplicitProviderTargets = useMemo3(
-    () => normalizeAgentGUIProviderTargets(providerTargets, {
+  const normalizedExplicitAgentTargets = useMemo3(
+    () => normalizeAgentGUIAgentTargets(agentTargets, {
       // AgentGUINode always passes the projected `/agents` array, including
       // an explicit empty array. The undefined branch exists only for direct
       // package-internal controller harnesses and legacy tests.
-      useStaticCatalog: providerTargets === void 0
+      useStaticCatalog: agentTargets === void 0
     }),
-    [providerTargets]
+    [agentTargets]
   );
-  const normalizedProviderTargets = providerTargetsLoading ? [] : normalizedExplicitProviderTargets;
-  const handoffProviderTargets = useMemo3(
-    () => providerTargetsLoading ? [] : normalizedExplicitProviderTargets.filter(
+  const normalizedAgentTargets = agentTargetsLoading ? [] : normalizedExplicitAgentTargets;
+  const handoffAgentTargets = useMemo3(
+    () => agentTargetsLoading ? [] : normalizedExplicitAgentTargets.filter(
       (target) => target.disabled !== true
     ),
-    [normalizedExplicitProviderTargets, providerTargetsLoading]
+    [normalizedExplicitAgentTargets, agentTargetsLoading]
   );
   const homeDirectorySelection = useMemo3(() => {
     return resolveAgentGUIHomeDirectorySelection({
       data,
       defaultAgentTargetId,
-      directory: normalizedProviderTargets,
-      directoryLoading: providerTargetsLoading
+      directory: normalizedAgentTargets,
+      directoryLoading: agentTargetsLoading
     });
-  }, [
-    data,
-    defaultAgentTargetId,
-    normalizedProviderTargets,
-    providerTargetsLoading
-  ]);
-  const selectedProviderTarget = homeDirectorySelection.target;
-  const selectedProviderTargetIsExplicit = useMemo3(
-    () => normalizedExplicitProviderTargets.some(
-      (target) => target.agentTargetId === selectedProviderTarget.agentTargetId
+  }, [data, defaultAgentTargetId, normalizedAgentTargets, agentTargetsLoading]);
+  const selectedAgentTarget = homeDirectorySelection.target;
+  const selectedAgentTargetIsExplicit = useMemo3(
+    () => normalizedExplicitAgentTargets.some(
+      (target) => target.agentTargetId === selectedAgentTarget.agentTargetId
     ),
-    [normalizedExplicitProviderTargets, selectedProviderTarget]
+    [normalizedExplicitAgentTargets, selectedAgentTarget]
   );
   const [homeComposerTargetOverride, setHomeComposerTargetOverride] = useState4(null);
   const homeComposerTargetOverrideIsExplicit = useMemo3(
-    () => homeComposerTargetOverride ? normalizedExplicitProviderTargets.some(
+    () => homeComposerTargetOverride ? normalizedExplicitAgentTargets.some(
       (target) => target.agentTargetId === homeComposerTargetOverride.agentTargetId
     ) : false,
-    [homeComposerTargetOverride, normalizedExplicitProviderTargets]
+    [homeComposerTargetOverride, normalizedExplicitAgentTargets]
   );
-  const effectiveSelectedProviderTarget = homeComposerTargetOverride ?? selectedProviderTarget;
-  const effectiveSelectedProviderTargetIsExplicit = homeComposerTargetOverride ? homeComposerTargetOverrideIsExplicit : selectedProviderTargetIsExplicit;
-  const firstReadyHomeComposerProviderTarget = useMemo3(() => {
+  const effectiveSelectedAgentTarget = homeComposerTargetOverride ?? selectedAgentTarget;
+  const effectiveSelectedAgentTargetIsExplicit = homeComposerTargetOverride ? homeComposerTargetOverrideIsExplicit : selectedAgentTargetIsExplicit;
+  const firstReadyHomeComposerAgentTarget = useMemo3(() => {
     if (!providerReadinessGates) {
       return null;
     }
-    return normalizedProviderTargets.find(
+    return normalizedAgentTargets.find(
       (target) => target.disabled !== true && providerReadinessGates[target.provider] === null
     ) ?? null;
-  }, [normalizedProviderTargets, providerReadinessGates]);
-  const nodeComposerTargetResolvedByProviderTarget = agentGUINodeDataHasComposerTarget(data) && selectedProviderTarget.agentTargetId === normalizeOptionalText2(data.agentTargetId);
+  }, [normalizedAgentTargets, providerReadinessGates]);
+  const nodeComposerTargetResolvedByAgentTarget = agentGUINodeDataHasComposerTarget(data) && selectedAgentTarget.agentTargetId === normalizeOptionalText2(data.agentTargetId);
   const selectedComposerTargetData = useMemo3(
-    () => homeComposerTargetOverride ? composerTargetDataFromProviderTarget({
+    () => homeComposerTargetOverride ? composerTargetDataFromAgentTarget({
       current: data,
       isExplicit: homeComposerTargetOverrideIsExplicit,
       target: homeComposerTargetOverride
-    }) : nodeComposerTargetResolvedByProviderTarget ? composerTargetDataFromProviderTarget({
+    }) : nodeComposerTargetResolvedByAgentTarget ? composerTargetDataFromAgentTarget({
       current: data,
-      isExplicit: selectedProviderTargetIsExplicit,
-      target: selectedProviderTarget
-    }) : agentGUINodeDataHasComposerTarget(data) && data.lastActiveAgentSessionId !== null ? composerTargetDataFromNodeData(data, normalizedProviderTargets) : composerTargetDataFromProviderTarget({
+      isExplicit: selectedAgentTargetIsExplicit,
+      target: selectedAgentTarget
+    }) : agentGUINodeDataHasComposerTarget(data) && data.lastActiveAgentSessionId !== null ? composerTargetDataFromNodeData(data, normalizedAgentTargets) : composerTargetDataFromAgentTarget({
       current: data,
-      isExplicit: selectedProviderTargetIsExplicit,
-      target: selectedProviderTarget
+      isExplicit: selectedAgentTargetIsExplicit,
+      target: selectedAgentTarget
     }),
     [
       data,
       homeComposerTargetOverride,
       homeComposerTargetOverrideIsExplicit,
-      nodeComposerTargetResolvedByProviderTarget,
-      normalizedProviderTargets,
-      selectedProviderTarget,
-      selectedProviderTargetIsExplicit
+      nodeComposerTargetResolvedByAgentTarget,
+      normalizedAgentTargets,
+      selectedAgentTarget,
+      selectedAgentTargetIsExplicit
     ]
   );
   useEffect4(() => {
     if (!homeComposerTargetOverride) {
       return;
     }
-    if (agentGUIProviderTargetsEqual(
-      homeComposerTargetOverride,
-      selectedProviderTarget
-    )) {
+    if (agentGUIAgentTargetsEqual(homeComposerTargetOverride, selectedAgentTarget)) {
       setHomeComposerTargetOverride(null);
     }
-  }, [homeComposerTargetOverride, selectedProviderTarget]);
+  }, [homeComposerTargetOverride, selectedAgentTarget]);
   const agentActivityDisplayStatusesRef = useRef4(null);
   const agentActivityDisplayStatuses = useMemo3(() => {
     const next = selectSessionDisplayStatuses(agentActivitySnapshot);
@@ -9467,7 +9437,7 @@ function useAgentGUINodeController({
     sessionViewRef(activeConversationId)
   );
   const activeSessionState = activeSessionView?.controlState ?? null;
-  const composerTargetData = activeConversationId === null ? selectedComposerTargetData : composerTargetDataFromNodeData(data, normalizedProviderTargets);
+  const composerTargetData = activeConversationId === null ? selectedComposerTargetData : composerTargetDataFromNodeData(data, normalizedAgentTargets);
   const providerComposerOptions = composerOptionsForTarget({
     snapshot: agentActivitySnapshot,
     target: composerTargetData
@@ -9728,18 +9698,18 @@ function useAgentGUINodeController({
     agentActivitySnapshot
   );
   const dataRef = useRef4(data);
-  const selectedProviderTargetRef = useRef4(effectiveSelectedProviderTarget);
-  selectedProviderTargetRef.current = effectiveSelectedProviderTarget;
-  const selectedProviderTargetIsExplicitRef = useRef4(
-    effectiveSelectedProviderTargetIsExplicit
-  );
-  selectedProviderTargetIsExplicitRef.current = effectiveSelectedProviderTargetIsExplicit;
-  const providerTargetsProvidedRef = useRef4(providerTargets !== void 0);
-  providerTargetsProvidedRef.current = providerTargets !== void 0;
+  const selectedAgentTargetRef = useRef4(effectiveSelectedAgentTarget);
+  selectedAgentTargetRef.current = effectiveSelectedAgentTarget;
+  const selectedAgentTargetIsExplicitRef = useRef4(
+    effectiveSelectedAgentTargetIsExplicit
+  );
+  selectedAgentTargetIsExplicitRef.current = effectiveSelectedAgentTargetIsExplicit;
+  const agentTargetsProvidedRef = useRef4(agentTargets !== void 0);
+  agentTargetsProvidedRef.current = agentTargets !== void 0;
   const selectedComposerTargetDataRef = useRef4(selectedComposerTargetData);
   selectedComposerTargetDataRef.current = selectedComposerTargetData;
-  const normalizedProviderTargetsRef = useRef4(normalizedProviderTargets);
-  normalizedProviderTargetsRef.current = normalizedProviderTargets;
+  const normalizedAgentTargetsRef = useRef4(normalizedAgentTargets);
+  normalizedAgentTargetsRef.current = normalizedAgentTargets;
   const draftSettingsBySessionIdRef = useRef4(draftSettingsBySessionId);
   const onDataChangeRef = useRef4(onDataChange);
   const onRememberComposerDefaultsRef = useRef4(onRememberComposerDefaults);
@@ -11421,7 +11391,7 @@ function useAgentGUINodeController({
     (options) => {
       const targetData = activeConversationIdRef.current === null ? selectedComposerTargetDataRef.current : composerTargetDataFromNodeData(
         dataRef.current,
-        normalizedProviderTargetsRef.current
+        normalizedAgentTargetsRef.current
       );
       loadComposerOptionsForTarget(targetData, options);
     },
@@ -12157,10 +12127,10 @@ function useAgentGUINodeController({
   }, []);
   const startConversation = useCallback4(
     (initialContentInput, displayPrompt) => {
-      const target = selectedProviderTargetRef.current;
+      const target = selectedAgentTargetRef.current;
       const targetData = selectedComposerTargetDataRef.current;
       const agentTargetId = targetData.agentTargetId ?? "";
-      if (!agentTargetId || providerTargetsProvidedRef.current && !selectedProviderTargetIsExplicitRef.current) {
+      if (!agentTargetId || agentTargetsProvidedRef.current && !selectedAgentTargetIsExplicitRef.current) {
         setDetailError(translate("agentHost.agentGui.agentTargetRequired"));
         return;
       }
@@ -12698,7 +12668,7 @@ function useAgentGUINodeController({
         const filterTarget = resolveAgentGUIDirectorySelection({
           agentTargetId: filter.agentTargetId,
           provider: dataRef.current.provider,
-          targets: normalizedProviderTargets
+          targets: normalizedAgentTargets
         });
         if (filterTarget && filterTarget.disabled !== true && (filterTarget.agentTargetId?.trim() ?? "") === filter.agentTargetId) {
           setHomeComposerTargetOverride(filterTarget);
@@ -12739,7 +12709,7 @@ function useAgentGUINodeController({
       agentActivityRuntime,
       defaultAgentTargetId,
       loadDraftComposerOptions,
-      normalizedProviderTargets,
+      normalizedAgentTargets,
       persistActiveConversation,
       workspaceId
     ]
@@ -12751,7 +12721,7 @@ function useAgentGUINodeController({
     if (handledPrefillPromptSequenceRef.current === prefillPromptRequest.sequence) {
       return;
     }
-    if (providerTargetsLoading && prefillPromptRequest.agentTargetId?.trim()) {
+    if (agentTargetsLoading && prefillPromptRequest.agentTargetId?.trim()) {
       return;
     }
     const selectedTargetData = selectedComposerTargetDataRef.current;
@@ -12759,7 +12729,7 @@ function useAgentGUINodeController({
     const prefillTarget = prefillTargetHinted ? resolveAgentGUIDirectorySelection({
       agentTargetId: prefillPromptRequest.agentTargetId,
       provider: prefillPromptRequest.provider ?? selectedTargetData.provider,
-      targets: normalizedProviderTargets
+      targets: normalizedAgentTargets
     }) : null;
     handledPrefillPromptSequenceRef.current = prefillPromptRequest.sequence;
     if (prefillPromptRequest.agentTargetId?.trim() && !prefillTarget) {
@@ -12795,11 +12765,11 @@ function useAgentGUINodeController({
     setActiveConversationId(null);
     setIsLoadingMessages(false);
     setDetailError(null);
-    const targetData = prefillTarget ? composerTargetDataFromProviderTarget({
+    const targetData = prefillTarget ? composerTargetDataFromAgentTarget({
       current: dataRef.current,
-      isExplicit: isExplicitAgentGUIProviderTarget(
+      isExplicit: isExplicitAgentGUIAgentTarget(
         prefillTarget,
-        normalizedExplicitProviderTargets
+        normalizedExplicitAgentTargets
       ),
       target: prefillTarget
     }) : selectedTargetData;
@@ -12809,11 +12779,11 @@ function useAgentGUINodeController({
         targetData.agentTargetId ? { kind: "agentTarget", agentTargetId: targetData.agentTargetId } : { kind: "all" }
       );
       onDataChangeRef.current((current) => {
-        const nextTargetData = composerTargetDataFromProviderTarget({
+        const nextTargetData = composerTargetDataFromAgentTarget({
           current,
-          isExplicit: isExplicitAgentGUIProviderTarget(
+          isExplicit: isExplicitAgentGUIAgentTarget(
             prefillTarget,
-            normalizedExplicitProviderTargets
+            normalizedExplicitAgentTargets
           ),
           target: prefillTarget
         });
@@ -12845,12 +12815,12 @@ function useAgentGUINodeController({
     agentActivityRuntime,
     defaultAgentTargetId,
     loadDraftComposerOptions,
-    normalizedExplicitProviderTargets,
-    normalizedProviderTargets,
+    normalizedExplicitAgentTargets,
+    normalizedAgentTargets,
     persistActiveConversation,
     prefillPromptRequest,
     previewMode,
-    providerTargetsLoading,
+    agentTargetsLoading,
     workspaceId
   ]);
   const continueInNewConversation = useCallback4(() => {
@@ -14978,7 +14948,7 @@ function useAgentGUINodeController({
     workspacePath
   ]);
   useEffect4(() => {
-    if (previewMode || providerTargetsLoading || !activeConversationId) {
+    if (previewMode || agentTargetsLoading || !activeConversationId) {
       return;
     }
     const summary = resolveConversationSummaryById(
@@ -14998,7 +14968,7 @@ function useAgentGUINodeController({
     const sessionTarget = resolveAgentGUIDirectorySelection({
       agentTargetId: summaryAgentTargetId,
       provider: summary.provider,
-      targets: normalizedProviderTargets
+      targets: normalizedAgentTargets
     });
     if (!sessionTarget || sessionTarget.provider !== summary.provider) {
       return;
@@ -15007,11 +14977,11 @@ function useAgentGUINodeController({
       return;
     }
     setHomeComposerTargetOverride(null);
-    const sessionTargetIsExplicit = normalizedExplicitProviderTargets.some(
-      (target) => agentGUIProviderTargetsEqual(target, sessionTarget)
+    const sessionTargetIsExplicit = normalizedExplicitAgentTargets.some(
+      (target) => agentGUIAgentTargetsEqual(target, sessionTarget)
     );
     onDataChangeRef.current((current) => {
-      const targetData = composerTargetDataFromProviderTarget({
+      const targetData = composerTargetDataFromAgentTarget({
         current,
         isExplicit: sessionTargetIsExplicit,
         target: sessionTarget
@@ -15026,19 +14996,16 @@ function useAgentGUINodeController({
     activeConversationId,
     conversations,
     defaultAgentTargetId,
-    normalizedExplicitProviderTargets,
-    normalizedProviderTargets,
+    normalizedExplicitAgentTargets,
+    normalizedAgentTargets,
     previewMode,
-    providerTargetsLoading
+    agentTargetsLoading
   ]);
   const activeSessionTargetResolution = useMemo3(() => {
     if (previewMode || activeConversationId === null) {
       return {
         status: "resolved",
-        target: composerTargetDataFromNodeData(
-          data,
-          normalizedProviderTargets
-        ),
+        target: composerTargetDataFromNodeData(data, normalizedAgentTargets),
         missingAgentTargetId: null
       };
     }
@@ -15048,16 +15015,16 @@ function useAgentGUINodeController({
       // key; the node's persisted agentTargetId can lag when the reconcile
       // effect declines to overwrite an explicit target with a fallback.
       foreignKeyAgentTargetId: activeConversation?.agentTargetId ?? data.agentTargetId ?? null,
-      directory: normalizedProviderTargets,
-      directoryLoading: providerTargetsLoading
+      directory: normalizedAgentTargets,
+      directoryLoading: agentTargetsLoading
     });
   }, [
     activeConversation?.agentTargetId,
     activeConversationId,
     data,
-    normalizedProviderTargets,
+    normalizedAgentTargets,
     previewMode,
-    providerTargetsLoading
+    agentTargetsLoading
   ]);
   const activeSessionTargetMissing = activeSessionTargetResolution.status === "missing";
   const visibleConversationsRef = useRef4(
@@ -15473,7 +15440,7 @@ function useAgentGUINodeController({
     hasProviderSessionNotFoundError,
     pendingApproval
   ]);
-  const canSubmit = !providerTargetsLoading && activeLiveState !== "activating" && activeLiveState !== "failed" && !activeConversationResumeUnavailable && (activeConversationId !== null || effectiveSelectedProviderTarget.disabled !== true && effectiveSelectedProviderTargetIsExplicit) && (composerTargetData.provider !== "openclaw" || openclawGateway?.status === "ready") && pendingApproval === null && pendingInteractivePrompt === null && sessionChrome.auth === null && !activeConversationBusy && !isCreatingConversation && !isSubmitting && !isInterrupting;
+  const canSubmit = !agentTargetsLoading && activeLiveState !== "activating" && activeLiveState !== "failed" && !activeConversationResumeUnavailable && (activeConversationId !== null || effectiveSelectedAgentTarget.disabled !== true && effectiveSelectedAgentTargetIsExplicit) && (composerTargetData.provider !== "openclaw" || openclawGateway?.status === "ready") && pendingApproval === null && pendingInteractivePrompt === null && sessionChrome.auth === null && !activeConversationBusy && !isCreatingConversation && !isSubmitting && !isInterrupting;
   const activeConversationCreatePending = Boolean(activeConversationId) && isCreatingConversation && startingConversationIdRef.current === activeConversationId;
   const canQueueWhileBusy = Boolean(activeConversationId) && (activeConversationCreatePending || activeConversationBusy || isSubmitting || Boolean(activeSessionState?.pendingInteractive));
   useEffect4(() => {
@@ -15531,11 +15498,11 @@ function useAgentGUINodeController({
       isSubmitting,
       pendingApproval,
       pendingInteractivePrompt,
-      providerTargetsLoading,
+      agentTargetsLoading,
       runtime: agentActivityRuntime,
-      selectedProviderTargetDisabled: effectiveSelectedProviderTarget.disabled === true,
-      selectedProviderTargetId: effectiveSelectedProviderTarget.agentTargetId ?? null,
-      selectedProviderTargetIsExplicit: effectiveSelectedProviderTargetIsExplicit,
+      selectedAgentTargetDisabled: effectiveSelectedAgentTarget.disabled === true,
+      selectedAgentTargetId: effectiveSelectedAgentTarget.agentTargetId ?? null,
+      selectedAgentTargetIsExplicit: effectiveSelectedAgentTargetIsExplicit,
       sessionAuthBlocked: sessionChrome.auth !== null,
       workspaceId
     });
@@ -15554,16 +15521,16 @@ function useAgentGUINodeController({
     canQueueWhileBusy,
     canSubmit,
     conversation,
-    effectiveSelectedProviderTarget.agentTargetId,
-    effectiveSelectedProviderTarget.disabled,
-    effectiveSelectedProviderTargetIsExplicit,
+    effectiveSelectedAgentTarget.agentTargetId,
+    effectiveSelectedAgentTarget.disabled,
+    effectiveSelectedAgentTargetIsExplicit,
     isCreatingConversation,
     isInterrupting,
     isLoadingMessages,
     isSubmitting,
     pendingApproval,
     pendingInteractivePrompt,
-    providerTargetsLoading,
+    agentTargetsLoading,
     sessionChrome.auth,
     workspaceId
   ]);
@@ -15680,12 +15647,12 @@ function useAgentGUINodeController({
     const defaultTargetId = defaultAgentTargetId?.trim() ?? "";
     if (defaultTargetId) {
       return findAgentGUIDirectoryTarget(
-        normalizedProviderTargets,
+        normalizedAgentTargets,
         defaultTargetId
       ) ?? null;
     }
-    return normalizedProviderTargets.find((target) => target.disabled !== true) ?? normalizedProviderTargets[0] ?? null;
-  }, [defaultAgentTargetId, normalizedProviderTargets]);
+    return normalizedAgentTargets.find((target) => target.disabled !== true) ?? normalizedAgentTargets[0] ?? null;
+  }, [defaultAgentTargetId, normalizedAgentTargets]);
   const resetHomeComposerAgentTargetToDefault = useCallback4(() => {
     if (previewMode) {
       return;
@@ -15694,10 +15661,10 @@ function useAgentGUINodeController({
     if (!nextTarget) {
       return;
     }
-    const nextTargetIsExplicit = normalizedExplicitProviderTargets.some(
-      (target) => agentGUIProviderTargetsEqual(target, nextTarget)
+    const nextTargetIsExplicit = normalizedExplicitAgentTargets.some(
+      (target) => agentGUIAgentTargetsEqual(target, nextTarget)
     );
-    const nextTargetData = composerTargetDataFromProviderTarget({
+    const nextTargetData = composerTargetDataFromAgentTarget({
       current: dataRef.current,
       isExplicit: nextTargetIsExplicit,
       target: nextTarget
@@ -15707,7 +15674,7 @@ function useAgentGUINodeController({
     isComposerHomeRef.current = true;
     setIsComposerHome(true);
     onDataChangeRef.current((current) => {
-      const currentNextTargetData = composerTargetDataFromProviderTarget({
+      const currentNextTargetData = composerTargetDataFromAgentTarget({
         current,
         isExplicit: nextTargetIsExplicit,
         target: nextTarget
@@ -15728,7 +15695,7 @@ function useAgentGUINodeController({
     }
   }, [
     loadComposerOptionsForTarget,
-    normalizedExplicitProviderTargets,
+    normalizedExplicitAgentTargets,
     previewMode,
     resolveDefaultHomeComposerTarget
   ]);
@@ -15751,15 +15718,15 @@ function useAgentGUINodeController({
       const nextTarget = resolveAgentGUIDirectorySelection({
         agentTargetId: input.agentTargetId,
         provider: nextProvider,
-        targets: normalizedProviderTargets
+        targets: normalizedAgentTargets
       });
       if (!nextTarget) {
         return;
       }
-      const nextTargetIsExplicit = normalizedExplicitProviderTargets.some(
-        (target) => agentGUIProviderTargetsEqual(target, nextTarget)
+      const nextTargetIsExplicit = normalizedExplicitAgentTargets.some(
+        (target) => agentGUIAgentTargetsEqual(target, nextTarget)
       );
-      const nextTargetData = composerTargetDataFromProviderTarget({
+      const nextTargetData = composerTargetDataFromAgentTarget({
         current: dataRef.current,
         isExplicit: nextTargetIsExplicit,
         target: nextTarget
@@ -15818,7 +15785,7 @@ function useAgentGUINodeController({
       setDetailError(null);
       persistActiveConversation(null);
       onDataChangeRef.current((current) => {
-        const currentNextTargetData = composerTargetDataFromProviderTarget({
+        const currentNextTargetData = composerTargetDataFromAgentTarget({
           current,
           isExplicit: nextTargetIsExplicit,
           target: nextTarget
@@ -15826,13 +15793,13 @@ function useAgentGUINodeController({
         const nextAgentTargetId = currentNextTargetData.agentTargetId;
         const currentTargetId = normalizeOptionalText2(current.agentTargetId);
         const nextTargetId = nextAgentTargetId ?? nextTarget.targetId;
-        const providerTargetChanged = current.provider !== nextProvider || (currentTargetId !== null || nextAgentTargetId !== null) && currentTargetId !== nextTargetId;
+        const agentTargetChanged = current.provider !== nextProvider || (currentTargetId !== null || nextAgentTargetId !== null) && currentTargetId !== nextTargetId;
         const nextData = {
           ...current,
           provider: currentNextTargetData.provider,
           agentTargetId: currentNextTargetData.agentTargetId,
           lastActiveAgentSessionId: null,
-          composerOverrides: providerTargetChanged ? null : current.composerOverrides
+          composerOverrides: agentTargetChanged ? null : current.composerOverrides
         };
         dataRef.current = nextData;
         return nextData;
@@ -15845,42 +15812,42 @@ function useAgentGUINodeController({
       activation,
       defaultAgentTargetId,
       loadComposerOptionsForTarget,
-      normalizedExplicitProviderTargets,
-      normalizedProviderTargets,
+      normalizedExplicitAgentTargets,
+      normalizedAgentTargets,
       persistActiveConversation,
       previewMode
     ]
   );
   useEffect4(() => {
-    if (previewMode || activeConversationId !== null || conversationFilter.kind !== "all" || homeComposerTargetOverride !== null || agentGUINodeDataHasComposerTarget(data) || homeDirectorySelection.source !== "implicit" || !providerReadinessGates || !firstReadyHomeComposerProviderTarget) {
+    if (previewMode || activeConversationId !== null || conversationFilter.kind !== "all" || homeComposerTargetOverride !== null || agentGUINodeDataHasComposerTarget(data) || homeDirectorySelection.source !== "implicit" || !providerReadinessGates || !firstReadyHomeComposerAgentTarget) {
       return;
     }
-    if (agentGUIProviderTargetsEqual(
-      firstReadyHomeComposerProviderTarget,
-      effectiveSelectedProviderTarget
+    if (agentGUIAgentTargetsEqual(
+      firstReadyHomeComposerAgentTarget,
+      effectiveSelectedAgentTarget
     )) {
       return;
     }
     if (!Object.prototype.hasOwnProperty.call(
       providerReadinessGates,
-      effectiveSelectedProviderTarget.provider
+      effectiveSelectedAgentTarget.provider
     )) {
       return;
     }
-    const selectedGate = providerReadinessGates[effectiveSelectedProviderTarget.provider];
+    const selectedGate = providerReadinessGates[effectiveSelectedAgentTarget.provider];
     if (!selectedGate) {
       return;
     }
     selectHomeComposerAgentTarget({
-      provider: firstReadyHomeComposerProviderTarget.provider,
-      agentTargetId: firstReadyHomeComposerProviderTarget.agentTargetId ?? firstReadyHomeComposerProviderTarget.targetId
+      provider: firstReadyHomeComposerAgentTarget.provider,
+      agentTargetId: firstReadyHomeComposerAgentTarget.agentTargetId ?? firstReadyHomeComposerAgentTarget.targetId
     });
   }, [
     activeConversationId,
     conversationFilter.kind,
     data,
-    effectiveSelectedProviderTarget,
-    firstReadyHomeComposerProviderTarget,
+    effectiveSelectedAgentTarget,
+    firstReadyHomeComposerAgentTarget,
     homeDirectorySelection.source,
     homeComposerTargetOverride,
     previewMode,
@@ -15892,13 +15859,13 @@ function useAgentGUINodeController({
       const nextTarget = resolveAgentGUIDirectorySelection({
         agentTargetId: input.agentTargetId,
         provider: input.provider,
-        targets: normalizedProviderTargets
+        targets: normalizedAgentTargets
       });
       if (!nextTarget) {
         reportAgentGUIConversationFilterTargetUnresolved({
           provider: input.provider,
           agentTargetId: input.agentTargetId ?? null,
-          providerTargetCount: normalizedProviderTargets.length,
+          agentTargetCount: normalizedAgentTargets.length,
           reason: "unresolved",
           runtime: agentActivityRuntime,
           workspaceId
@@ -15941,20 +15908,20 @@ function useAgentGUINodeController({
     [
       agentActivityRuntime,
       defaultAgentTargetId,
-      normalizedProviderTargets,
+      normalizedAgentTargets,
       selectConversation,
       selectHomeComposerAgentTarget,
       workspaceId
     ]
   );
   useEffect4(() => {
-    if (previewMode || providerTargetsLoading || activeConversationId === null || conversationFilter.kind !== "agentTarget" || isLoadingConversations || conversationListState?.initialized !== true) {
+    if (previewMode || agentTargetsLoading || activeConversationId === null || conversationFilter.kind !== "agentTarget" || isLoadingConversations || conversationListState?.initialized !== true) {
       return;
     }
     if (filterAgentGUIConversationSummaries(conversations, conversationFilter).length > 0) {
       return;
     }
-    const target = normalizedProviderTargets.find(
+    const target = normalizedAgentTargets.find(
       (candidate) => (candidate.agentTargetId?.trim() ?? "") === conversationFilter.agentTargetId
     );
     if (!target) {
@@ -15970,9 +15937,9 @@ function useAgentGUINodeController({
     conversationListState?.initialized,
     conversations,
     isLoadingConversations,
-    normalizedProviderTargets,
+    normalizedAgentTargets,
     previewMode,
-    providerTargetsLoading,
+    agentTargetsLoading,
     selectHomeComposerAgentTarget
   ]);
   const stableCreateConversation = useStableControllerEventCallback(createConversation);
@@ -16048,7 +16015,7 @@ function useAgentGUINodeController({
   );
   const viewData = activeConversationId === null ? selectedComposerTargetData.data : data;
   const effectiveHomeDirectorySelectionStatus = homeComposerTargetOverride ? "resolved" : homeDirectorySelection.status;
-  const providerReadinessGate = activeConversationId === null ? effectiveHomeDirectorySelectionStatus === "loading" ? { status: "checking" } : effectiveHomeDirectorySelectionStatus === "missing" ? { status: "unavailable" } : providerReadinessGates?.[effectiveSelectedProviderTarget.provider] ?? null : null;
+  const providerReadinessGate = activeConversationId === null ? effectiveHomeDirectorySelectionStatus === "loading" ? { status: "checking" } : effectiveHomeDirectorySelectionStatus === "missing" ? { status: "unavailable" } : providerReadinessGates?.[effectiveSelectedAgentTarget.provider] ?? null : null;
   const controllerActions = useMemo3(
     () => ({
       updateConversationFilter: stableUpdateConversationFilter,
@@ -16132,10 +16099,10 @@ function useAgentGUINodeController({
         workspacePath,
         currentUserId,
         data: viewData,
-        selectedProviderTarget: effectiveSelectedProviderTarget,
-        providerTargets: normalizedProviderTargets,
-        handoffProviderTargets,
-        providerTargetsLoading,
+        selectedAgentTarget: effectiveSelectedAgentTarget,
+        agentTargets: normalizedAgentTargets,
+        handoffAgentTargets,
+        agentTargetsLoading,
         conversationFilter,
         conversations: visibleConversations,
         userProjects,
@@ -16215,11 +16182,11 @@ function useAgentGUINodeController({
       conversationDetail,
       controllerActions,
       data,
-      effectiveSelectedProviderTarget,
-      handoffProviderTargets,
-      normalizedProviderTargets,
+      effectiveSelectedAgentTarget,
+      handoffAgentTargets,
+      normalizedAgentTargets,
       providerReadinessGate,
-      providerTargetsLoading,
+      agentTargetsLoading,
       detailError,
       draftContent,
       draftPrompt,
@@ -16247,7 +16214,7 @@ function useAgentGUINodeController({
       pendingDeleteConversations,
       pendingApproval,
       pendingInteractivePrompt,
-      effectiveSelectedProviderTarget.disabled,
+      effectiveSelectedAgentTarget.disabled,
       queuedPrompts,
       drainingQueuedPromptId,
       currentUserId,
@@ -16659,6 +16626,39 @@ import {
   cn as cn3
 } from "@tutti-os/ui-system";
 import { WorkspaceUserProjectSelect as WorkspaceUserProjectSelect2 } from "@tutti-os/workspace-user-project/ui";
+
+// agent-gui/agentGuiNode/model/agentGuiAgentAvatarPresentation.ts
+function resolveAgentGUIHeroIconUrl(provider) {
+  const normalizedProvider = normalizeManagedAgentProvider(provider);
+  return MANAGED_AGENT_ICON_URLS[normalizedProvider] ?? MANAGED_AGENT_ICON_FALLBACK_URL;
+}
+function resolveAgentGUIAgentAvatarIconUrl(provider, iconUrl) {
+  const normalizedProvider = normalizeManagedAgentProvider(provider);
+  return iconUrl?.trim() || MANAGED_AGENT_PROVIDER_RAIL_ICON_URLS[normalizedProvider] || resolveAgentGUIHeroIconUrl(normalizedProvider);
+}
+function projectAgentGUIAgentTargetAvatar(target) {
+  return {
+    targetId: target.targetId,
+    agentTargetId: target.agentTargetId ?? target.targetId,
+    provider: target.provider,
+    label: target.label,
+    iconUrl: resolveAgentGUIAgentAvatarIconUrl(target.provider, target.iconUrl),
+    ...target.badge ? { badge: target.badge } : {},
+    ...target.disabled === true ? { disabled: true } : {}
+  };
+}
+function createFallbackAgentGUIAgentAvatar(input) {
+  const agentTargetId = input.agentTargetId?.trim() || `local:${input.provider}`;
+  return {
+    targetId: agentTargetId,
+    agentTargetId,
+    provider: input.provider,
+    label: input.label,
+    iconUrl: resolveAgentGUIAgentAvatarIconUrl(input.provider, input.iconUrl)
+  };
+}
+
+// agent-gui/agentGuiNode/AgentGUINodeView.tsx
 import {
   BareIconButton,
   Input as Input2,
@@ -16765,6 +16765,10 @@ import { ArrowLeftRight, Code, Compass, Import, Pencil, X } from "lucide-react";
 
 // agent-gui/agentGuiNode/AgentGUINode.styles.ts
 var styles = {
+  agentAvatar: "agent-gui-node__agent-avatar",
+  agentAvatarBadge: "agent-gui-node__agent-avatar-badge",
+  agentAvatarBadgeImage: "agent-gui-node__agent-avatar-badge-image",
+  agentAvatarImage: "agent-gui-node__agent-avatar-image",
   bottomDock: "agent-gui-node__bottom-dock",
   bottomDockPrompt: "agent-gui-node__bottom-dock-prompt",
   bottomDockScrollToBottom: "agent-gui-node__bottom-dock-scroll-to-bottom",
@@ -16870,6 +16874,9 @@ var styles = {
   emptyHeroCarousel: "agent-gui-node__empty-hero-carousel",
   emptyHeroCarouselCanvas: "agent-gui-node__empty-hero-carousel-canvas",
   emptyHeroCarouselItem: "agent-gui-node__empty-hero-carousel-item",
+  emptyHeroCarouselLayer: "agent-gui-node__empty-hero-carousel-layer",
+  emptyHeroCarouselPlaceholder: "agent-gui-node__empty-hero-carousel-placeholder",
+  emptyHeroCarouselStage: "agent-gui-node__empty-hero-carousel-stage",
   emptyHeroIconEffect: "agent-gui-node__empty-hero-icon-effect",
   emptyHeroIconRail: "agent-gui-node__empty-hero-icon-rail",
   emptyHeroIconRailItem: "agent-gui-node__empty-hero-icon-rail-item",
@@ -16908,8 +16915,6 @@ var styles = {
   providerRailAvatar: "agent-gui-node__provider-rail-avatar",
   providerRailAvatarIcon: "agent-gui-node__provider-rail-avatar-icon",
   providerRailAvatarImage: "agent-gui-node__provider-rail-avatar-image",
-  providerRailBadge: "agent-gui-node__provider-rail-badge",
-  providerRailBadgeImage: "agent-gui-node__provider-rail-badge-image",
   emptyHeroIconSlot: "agent-gui-node__empty-hero-icon-slot",
   providerRailConfigButton: "agent-gui-node__provider-rail-config-button",
   providerRailFooter: "agent-gui-node__provider-rail-footer",
@@ -17153,16 +17158,35 @@ import {
 import * as THREE from "three";
 var CAMERA_FOV_DEG = 14;
 var CAMERA_Z = 7.5;
-var WHEEL_TARGET_SLOTS = 21;
-var TILE_SPACING = 1.35;
-var UNFOCUSED_OPACITY = 0.55;
-var SPRING_STIFFNESS = 90;
-var SPRING_DAMPING_RATIO = 0.62;
+var WHEEL_TARGET_SLOTS = 40;
+var TILE_SPACING = 1.55;
+var VISIBLE_ARC_CURVATURE = 0.9;
+var MIN_RECORD_OPACITY = 0.22;
+var RECORD_FADE_RANGE_SLOTS = 4.5;
+var RECORD_FADE_CURVE = 1.45;
+var SPRING_STIFFNESS = 120;
+var SPRING_DAMPING_RATIO = 0.78;
+var SPRING_MIN_LAUNCH_VELOCITY = 2.6;
 var SPRING_SETTLE_EPSILON = 1e-3;
 var SPRING_SETTLE_VELOCITY = 0.02;
+var MAX_FRAME_DELTA_SECONDS = 0.032;
 var TEXTURE_SIZE = 256;
-var TEXTURE_CORNER_RADIUS = 0.05;
+var BADGE_CORNER_RADIUS = 0.5;
+var BADGE_DIAMETER = 0.36;
+var BADGE_OFFSET = 0.4;
 var MAX_PIXEL_RATIO = 2;
+var RECORD_RADIUS_RATIO = 0.47;
+var RECORD_LABEL_RADIUS_RATIO = 0.41;
+var RECORD_SPINDLE_RADIUS_RATIO = 0.035;
+var RECORD_SPIN_SECONDS = 7;
+var RECORD_MODEL_SCALE = 1.3;
+var RECORD_MODEL_RADIUS = 0.475;
+var RECORD_MODEL_THICKNESS = 0.065;
+var RECORD_MODEL_TILT_X = -0.11;
+var RECORD_MODEL_SIDE_TILT_FACTOR = 0.18;
+var RECORD_MODEL_MAX_SIDE_TILT = 0.16;
+var RECORD_RENDER_RANGE_SLOTS = 3.4;
+var RECORD_EDGE_SEGMENTS = 48;
 function ringOffset(index, scroll, count) {
   if (count <= 1) {
     return index - scroll;
@@ -17176,13 +17200,120 @@ function ringOffset(index, scroll, count) {
   }
   return offset;
 }
-function roundedIconTexture(image, onReadyRender) {
+function vinylRecordTexture(image, onReadyRender) {
+  const canvas = document.createElement("canvas");
+  canvas.width = TEXTURE_SIZE;
+  canvas.height = TEXTURE_SIZE;
+  const context = canvas.getContext("2d");
+  if (context) {
+    const center = TEXTURE_SIZE / 2;
+    const recordRadius = TEXTURE_SIZE * RECORD_RADIUS_RATIO;
+    const labelRadius = recordRadius * RECORD_LABEL_RADIUS_RATIO;
+    context.clearRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE);
+    context.save();
+    context.beginPath();
+    context.arc(center, center, recordRadius, 0, Math.PI * 2);
+    context.clip();
+    const recordFill = context.createRadialGradient(
+      center * 0.92,
+      center * 0.88,
+      labelRadius,
+      center,
+      center,
+      recordRadius
+    );
+    recordFill.addColorStop(0, "rgb(26 26 27)");
+    recordFill.addColorStop(0.54, "rgb(5 5 6)");
+    recordFill.addColorStop(0.82, "rgb(18 18 19)");
+    recordFill.addColorStop(1, "rgb(3 3 4)");
+    context.fillStyle = recordFill;
+    context.fillRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE);
+    for (let radius = labelRadius + 4; radius < recordRadius - 3; radius += 3.5) {
+      const grooveIndex = Math.round((radius - labelRadius) / 3.5);
+      context.beginPath();
+      context.arc(center, center, radius, 0, Math.PI * 2);
+      context.strokeStyle = grooveIndex % 3 === 0 ? "rgb(255 255 255 / 0.12)" : "rgb(255 255 255 / 0.055)";
+      context.lineWidth = grooveIndex % 3 === 0 ? 0.7 : 0.45;
+      context.stroke();
+    }
+    context.save();
+    context.translate(center, center);
+    context.rotate(-Math.PI / 4);
+    const sheen = context.createLinearGradient(
+      -recordRadius,
+      0,
+      recordRadius,
+      0
+    );
+    sheen.addColorStop(0, "rgb(255 255 255 / 0)");
+    sheen.addColorStop(0.42, "rgb(255 255 255 / 0.02)");
+    sheen.addColorStop(0.5, "rgb(255 255 255 / 0.18)");
+    sheen.addColorStop(0.58, "rgb(255 255 255 / 0.02)");
+    sheen.addColorStop(1, "rgb(255 255 255 / 0)");
+    context.fillStyle = sheen;
+    context.fillRect(
+      -recordRadius,
+      -recordRadius,
+      recordRadius * 2,
+      recordRadius * 2
+    );
+    context.restore();
+    context.restore();
+    context.save();
+    context.beginPath();
+    context.arc(center, center, labelRadius, 0, Math.PI * 2);
+    context.clip();
+    const scale = Math.max(
+      labelRadius * 2 / image.width,
+      labelRadius * 2 / image.height
+    );
+    const width = image.width * scale;
+    const height = image.height * scale;
+    context.drawImage(
+      image,
+      center - width / 2,
+      center - height / 2,
+      width,
+      height
+    );
+    context.restore();
+    context.beginPath();
+    context.arc(center, center, labelRadius, 0, Math.PI * 2);
+    context.strokeStyle = "rgb(255 255 255 / 0.2)";
+    context.lineWidth = 1;
+    context.stroke();
+    context.beginPath();
+    context.arc(
+      center,
+      center,
+      recordRadius * RECORD_SPINDLE_RADIUS_RATIO,
+      0,
+      Math.PI * 2
+    );
+    context.fillStyle = "rgb(5 5 6)";
+    context.fill();
+    context.strokeStyle = "rgb(255 255 255 / 0.18)";
+    context.lineWidth = 0.75;
+    context.stroke();
+    context.beginPath();
+    context.arc(center, center, recordRadius - 0.75, 0, Math.PI * 2);
+    context.strokeStyle = "rgb(255 255 255 / 0.32)";
+    context.lineWidth = 1.25;
+    context.stroke();
+  }
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  texture.anisotropy = 4;
+  onReadyRender();
+  return texture;
+}
+function roundedIconTexture(image, onReadyRender, cornerRadius) {
   const canvas = document.createElement("canvas");
   canvas.width = TEXTURE_SIZE;
   canvas.height = TEXTURE_SIZE;
   const context = canvas.getContext("2d");
   if (context) {
-    const radius = TEXTURE_SIZE * TEXTURE_CORNER_RADIUS;
+    const radius = TEXTURE_SIZE * cornerRadius;
     context.beginPath();
     context.roundRect(0, 0, TEXTURE_SIZE, TEXTURE_SIZE, radius);
     context.clip();
@@ -17219,8 +17350,11 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   renderer;
   scene;
   camera;
+  edgeGeometry;
+  faceGeometry;
   raycaster = new THREE.Raycaster();
   tiles = [];
+  textures = /* @__PURE__ */ new Set();
   // Number of distinct agents; the wheel holds agentCount * repeats tiles
   // (the icon sequence repeated), and scroll/target count TILE slots.
   agentCount;
@@ -17232,11 +17366,15 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   scroll = 0;
   target = 0;
   velocity = 0;
-  frameHandle = null;
+  renderFrameHandle = null;
+  springFrameHandle = null;
+  recordSpinFrameHandle = null;
   lastFrameAt = null;
+  lastRecordSpinFrameAt = null;
+  hoveredTile = null;
   disposed = false;
   constructor(options) {
-    this.agentCount = options.iconUrls.length;
+    this.agentCount = options.items.length;
     const repeats = Math.max(
       1,
       Math.round(WHEEL_TARGET_SLOTS / Math.max(this.agentCount, 1))
@@ -17253,19 +17391,80 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     this.scene = new THREE.Scene();
     this.camera = new THREE.PerspectiveCamera(CAMERA_FOV_DEG, 1, 0.1, 50);
     this.camera.position.set(0, 0, CAMERA_Z);
+    this.scene.add(new THREE.AmbientLight(16777215, 1.25));
+    const keyLight = new THREE.DirectionalLight(16777215, 2.4);
+    keyLight.position.set(-2.5, 3.5, 5);
+    this.scene.add(keyLight);
+    const rimLight = new THREE.DirectionalLight(10467327, 0.9);
+    rimLight.position.set(4, -1.5, 2.5);
+    this.scene.add(rimLight);
+    this.faceGeometry = new THREE.PlaneGeometry(1, 1);
+    this.edgeGeometry = new THREE.CylinderGeometry(
+      RECORD_MODEL_RADIUS,
+      RECORD_MODEL_RADIUS,
+      RECORD_MODEL_THICKNESS,
+      RECORD_EDGE_SEGMENTS,
+      1,
+      true
+    );
     for (let slot = 0; slot < this.tileCount; slot++) {
-      const geometry = new THREE.PlaneGeometry(1, 1);
-      const material = new THREE.MeshBasicMaterial({
+      const agentIndex = slot % this.agentCount;
+      const poseGroup = new THREE.Group();
+      const recordGroup = new THREE.Group();
+      recordGroup.scale.setScalar(RECORD_MODEL_SCALE);
+      const faceMaterial = new THREE.MeshBasicMaterial({
         transparent: true,
         depthWrite: false,
         visible: false
       });
-      const mesh = new THREE.Mesh(geometry, material);
-      mesh.userData.agentIndex = slot % this.agentCount;
-      this.scene.add(mesh);
-      this.tiles.push({ mesh });
+      const faceMesh = new THREE.Mesh(this.faceGeometry, faceMaterial);
+      faceMesh.position.z = RECORD_MODEL_THICKNESS / 2 + 2e-3;
+      faceMesh.userData.agentIndex = agentIndex;
+      const edgeMaterial = new THREE.MeshStandardMaterial({
+        color: 460552,
+        metalness: 0.42,
+        roughness: 0.28,
+        transparent: true,
+        depthWrite: false
+      });
+      const edgeMesh = new THREE.Mesh(this.edgeGeometry, edgeMaterial);
+      edgeMesh.rotation.x = Math.PI / 2;
+      const badgeMaterial = new THREE.MeshBasicMaterial({
+        transparent: true,
+        depthWrite: false,
+        // The solid circle is the owner marker's asset-independent fallback.
+        // Keep it visible while the optional remote avatar is loading or when
+        // that avatar cannot safely become a WebGL texture.
+        visible: options.items[slot % this.agentCount]?.badge != null
+      });
+      const badgeMesh = new THREE.Mesh(
+        new THREE.CircleGeometry(BADGE_DIAMETER / 2, 32),
+        badgeMaterial
+      );
+      badgeMesh.position.set(
+        BADGE_OFFSET,
+        -BADGE_OFFSET,
+        RECORD_MODEL_THICKNESS / 2 + 0.01
+      );
+      badgeMesh.userData.agentIndex = agentIndex;
+      recordGroup.add(edgeMesh, faceMesh);
+      poseGroup.add(recordGroup, badgeMesh);
+      poseGroup.visible = false;
+      poseGroup.userData.agentIndex = agentIndex;
+      this.scene.add(poseGroup);
+      this.tiles.push({
+        badgeMesh,
+        edgeMaterial,
+        edgeMesh,
+        faceMaterial,
+        faceMesh,
+        poseGroup,
+        ready: false,
+        recordGroup,
+        rotation: 0
+      });
     }
-    options.iconUrls.forEach((iconUrl, agentIndex) => {
+    options.items.forEach((item, agentIndex) => {
       const loadedImage = options.loadedImages?.[agentIndex] ?? null;
       const image = loadedImage ?? new Image();
       if (!loadedImage) {
@@ -17284,10 +17483,14 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
       if (image.complete && image.naturalWidth > 0) {
         this.applyImageTexture(image, agentIndex);
       } else if (!loadedImage) {
-        image.src = iconUrl;
+        image.src = item.iconUrl;
+      }
+      if (item.badge?.iconUrl) {
+        this.loadBadgeImage(item.badge.iconUrl, agentIndex);
       }
     });
     this.applyPoses();
+    this.startRecordSpin();
   }
   setSize(width, height) {
     if (this.disposed || width <= 0 || height <= 0) {
@@ -17310,6 +17513,7 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   // icon sequence repeats); returns the normalized agent index.
   stepBy(direction) {
     this.target += direction;
+    this.primeSpringMotion();
     this.animate();
     return this.targetIndex();
   }
@@ -17338,6 +17542,7 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     }
     this.target += best ?? 0;
     if (animateMove) {
+      this.primeSpringMotion();
       this.animate();
       return;
     }
@@ -17348,6 +17553,26 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
   }
   // Canvas-relative pointer coordinates -> agent index, or null.
   pick(x, y, width, height) {
+    const tile = this.pickTile(x, y, width, height);
+    const index = tile?.poseGroup.userData.agentIndex;
+    return typeof index === "number" ? index : null;
+  }
+  // Gives playback to the record beneath the pointer. When no record is
+  // hovered, playback returns to the record nearest the center.
+  hover(x, y, width, height) {
+    const tile = this.pickTile(x, y, width, height);
+    if (tile !== this.hoveredTile) {
+      this.hoveredTile = tile;
+      this.startRecordSpin();
+    }
+    const index = tile?.poseGroup.userData.agentIndex;
+    return typeof index === "number" ? index : null;
+  }
+  clearHover() {
+    this.hoveredTile = null;
+    this.startRecordSpin();
+  }
+  pickTile(x, y, width, height) {
     if (this.disposed || width <= 0 || height <= 0) {
       return null;
     }
@@ -17357,30 +17582,52 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     );
     this.raycaster.setFromCamera(pointer, this.camera);
     const meshes = this.tiles.filter(
-      (tile) => tile.mesh.material.visible && tile.mesh.material.opacity > 0.05
-    ).map((tile) => tile.mesh);
+      (tile) => tile.poseGroup.visible && tile.faceMaterial.visible && tile.faceMaterial.opacity > 0.05
+    ).flatMap(
+      (tile) => tile.badgeMesh.material.visible ? [tile.faceMesh, tile.badgeMesh] : [tile.faceMesh]
+    );
     const hit = this.raycaster.intersectObjects(meshes, false)[0];
-    const index = hit?.object.userData.agentIndex;
-    return typeof index === "number" ? index : null;
+    if (!hit) {
+      return null;
+    }
+    return this.tiles.find(
+      (tile) => tile.faceMesh === hit.object || tile.badgeMesh === hit.object
+    ) ?? null;
   }
   dispose() {
     this.disposed = true;
-    if (this.frameHandle !== null) {
-      cancelAnimationFrame(this.frameHandle);
-      this.frameHandle = null;
+    if (this.renderFrameHandle !== null) {
+      cancelAnimationFrame(this.renderFrameHandle);
+      this.renderFrameHandle = null;
+    }
+    if (this.springFrameHandle !== null) {
+      cancelAnimationFrame(this.springFrameHandle);
+      this.springFrameHandle = null;
+    }
+    if (this.recordSpinFrameHandle !== null) {
+      cancelAnimationFrame(this.recordSpinFrameHandle);
+      this.recordSpinFrameHandle = null;
     }
     for (const image of this.images) {
       image.onload = null;
+      image.onerror = null;
       if (this.ownedImages.has(image)) {
         image.src = "";
       }
     }
     this.ownedImages.clear();
     for (const tile of this.tiles) {
-      tile.mesh.geometry.dispose();
-      tile.mesh.material.map?.dispose();
-      tile.mesh.material.dispose();
+      tile.badgeMesh.geometry.dispose();
+      tile.badgeMesh.material.dispose();
+      tile.faceMaterial.dispose();
+      tile.edgeMaterial.dispose();
+    }
+    for (const texture of this.textures) {
+      texture.dispose();
     }
+    this.textures.clear();
+    this.faceGeometry.dispose();
+    this.edgeGeometry.dispose();
     this.renderer.dispose();
   }
   prefersReducedMotion() {
@@ -17398,17 +17645,31 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
       this.onSettle(this.targetIndex());
       return;
     }
-    if (this.frameHandle === null) {
+    if (this.springFrameHandle === null) {
+      if (this.renderFrameHandle !== null) {
+        cancelAnimationFrame(this.renderFrameHandle);
+        this.renderFrameHandle = null;
+      }
       this.lastFrameAt = null;
-      this.frameHandle = requestAnimationFrame(this.frame);
+      this.springFrameHandle = requestAnimationFrame(this.frame);
+    }
+  }
+  primeSpringMotion() {
+    const delta = this.target - this.scroll;
+    const direction = Math.sign(delta);
+    if (direction === 0) {
+      return;
+    }
+    if (this.velocity * direction < SPRING_MIN_LAUNCH_VELOCITY) {
+      this.velocity = direction * SPRING_MIN_LAUNCH_VELOCITY;
     }
   }
   frame = (now) => {
-    this.frameHandle = null;
+    this.springFrameHandle = null;
     if (this.disposed) {
       return;
     }
-    const dt = this.lastFrameAt === null ? 1 / 60 : Math.min((now - this.lastFrameAt) / 1e3, 0.05);
+    const dt = this.lastFrameAt === null ? 1 / 60 : Math.min((now - this.lastFrameAt) / 1e3, MAX_FRAME_DELTA_SECONDS);
     this.lastFrameAt = now;
     const delta = this.target - this.scroll;
     if (Math.abs(delta) <= SPRING_SETTLE_EPSILON && Math.abs(this.velocity) <= SPRING_SETTLE_VELOCITY) {
@@ -17424,14 +17685,54 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     this.scroll += this.velocity * dt;
     this.applyPoses();
     this.renderer.render(this.scene, this.camera);
-    this.frameHandle = requestAnimationFrame(this.frame);
+    this.springFrameHandle = requestAnimationFrame(this.frame);
+  };
+  startRecordSpin() {
+    if (this.disposed || this.prefersReducedMotion() || this.recordSpinFrameHandle !== null) {
+      return;
+    }
+    this.lastRecordSpinFrameAt = null;
+    this.recordSpinFrameHandle = requestAnimationFrame(this.recordSpinFrame);
+  }
+  recordSpinFrame = (now) => {
+    this.recordSpinFrameHandle = null;
+    const spinningTile = this.hoveredTile ?? this.centerTile();
+    if (this.disposed || !spinningTile || this.prefersReducedMotion()) {
+      return;
+    }
+    const dt = this.lastRecordSpinFrameAt === null ? 1 / 60 : Math.min(
+      (now - this.lastRecordSpinFrameAt) / 1e3,
+      MAX_FRAME_DELTA_SECONDS
+    );
+    this.lastRecordSpinFrameAt = now;
+    spinningTile.rotation = (spinningTile.rotation + Math.PI * 2 * dt / RECORD_SPIN_SECONDS) % (Math.PI * 2);
+    if (this.springFrameHandle === null) {
+      this.applyPoses();
+      this.renderer.render(this.scene, this.camera);
+    }
+    this.recordSpinFrameHandle = requestAnimationFrame(this.recordSpinFrame);
   };
+  centerTile() {
+    let centeredTile = null;
+    let centeredOffset = Number.POSITIVE_INFINITY;
+    this.tiles.forEach((tile, index) => {
+      if (!tile.ready) {
+        return;
+      }
+      const offset = Math.abs(ringOffset(index, this.scroll, this.tileCount));
+      if (offset < centeredOffset) {
+        centeredTile = tile;
+        centeredOffset = offset;
+      }
+    });
+    return centeredTile;
+  }
   requestRender() {
-    if (this.disposed || this.frameHandle !== null) {
+    if (this.disposed || this.renderFrameHandle !== null || this.springFrameHandle !== null) {
       return;
     }
-    this.frameHandle = requestAnimationFrame(() => {
-      this.frameHandle = null;
+    this.renderFrameHandle = requestAnimationFrame(() => {
+      this.renderFrameHandle = null;
       if (!this.disposed) {
         this.renderer.render(this.scene, this.camera);
       }
@@ -17441,26 +17742,124 @@ var AgentGuiHeroCarouselScene = class _AgentGuiHeroCarouselScene {
     if (this.disposed) {
       return;
     }
-    const texture = roundedIconTexture(image, () => this.requestRender());
+    const texture = vinylRecordTexture(image, () => this.requestRender());
+    this.textures.add(texture);
     for (const tile of this.tiles) {
-      if (tile.mesh.userData.agentIndex === agentIndex) {
-        tile.mesh.material.map = texture;
-        tile.mesh.material.visible = true;
-        tile.mesh.material.needsUpdate = true;
+      if (tile.poseGroup.userData.agentIndex === agentIndex) {
+        tile.faceMaterial.map = texture;
+        tile.faceMaterial.visible = true;
+        tile.faceMaterial.needsUpdate = true;
+        tile.ready = true;
       }
     }
+    this.applyPoses();
+    this.startRecordSpin();
+  }
+  loadBadgeImage(badgeUrl, agentIndex) {
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.decoding = "async";
+    image.loading = "eager";
+    this.ownedImages.add(image);
+    this.images.push(image);
+    let settled = false;
+    const keepFallback = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      this.requestRender();
+    };
+    const applyDecodedImage = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      this.applyBadgeImageTexture(image, agentIndex);
+    };
+    image.onload = () => {
+      if (this.disposed) {
+        return;
+      }
+      let decode;
+      try {
+        decode = image.decode?.();
+      } catch {
+        keepFallback();
+        return;
+      }
+      if (decode) {
+        void decode.then(applyDecodedImage).catch(keepFallback);
+        return;
+      }
+      applyDecodedImage();
+    };
+    image.onerror = keepFallback;
+    image.src = badgeUrl;
+  }
+  applyBadgeImageTexture(image, agentIndex) {
+    if (this.disposed) {
+      return;
+    }
+    let texture = null;
+    try {
+      texture = roundedIconTexture(
+        image,
+        () => this.requestRender(),
+        BADGE_CORNER_RADIUS
+      );
+      this.renderer.initTexture(texture);
+    } catch {
+      texture?.dispose();
+      this.requestRender();
+      return;
+    }
+    this.textures.add(texture);
+    for (const tile of this.tiles) {
+      if (tile.poseGroup.userData.agentIndex === agentIndex) {
+        tile.badgeMesh.material.map = texture;
+        tile.badgeMesh.material.visible = true;
+        tile.badgeMesh.material.needsUpdate = true;
+      }
+    }
+    this.requestRender();
   }
   applyPoses() {
     const step = Math.PI * 2 / Math.max(this.tileCount, 1);
     this.tiles.forEach((tile, index) => {
       const offset = ringOffset(index, this.scroll, this.tileCount);
+      const visible = tile.ready && Math.abs(offset) <= RECORD_RENDER_RANGE_SLOTS;
+      tile.poseGroup.visible = visible;
+      if (!visible) {
+        return;
+      }
       const angle = offset * step;
       const x = this.wheelRadius * Math.sin(angle);
-      const y = this.wheelRadius * (Math.cos(angle) - 1);
-      tile.mesh.position.set(x, y, 0);
-      tile.mesh.rotation.z = -angle;
-      const focus = THREE.MathUtils.clamp(1 - Math.abs(offset), 0, 1);
-      tile.mesh.material.opacity = UNFOCUSED_OPACITY + (1 - UNFOCUSED_OPACITY) * focus;
+      const y = this.wheelRadius * (Math.cos(angle) - 1) * VISIBLE_ARC_CURVATURE;
+      tile.poseGroup.position.set(x, y, 0);
+      const fadeProgress = THREE.MathUtils.clamp(
+        1 - Math.abs(offset) / RECORD_FADE_RANGE_SLOTS,
+        0,
+        1
+      );
+      const rangeOpacity = Math.pow(
+        THREE.MathUtils.smoothstep(fadeProgress, 0, 1),
+        RECORD_FADE_CURVE
+      );
+      tile.poseGroup.rotation.set(
+        RECORD_MODEL_TILT_X,
+        THREE.MathUtils.clamp(
+          -angle * RECORD_MODEL_SIDE_TILT_FACTOR,
+          -RECORD_MODEL_MAX_SIDE_TILT,
+          RECORD_MODEL_MAX_SIDE_TILT
+        ),
+        -angle * VISIBLE_ARC_CURVATURE
+      );
+      tile.recordGroup.rotation.z = -tile.rotation;
+      const opacity = MIN_RECORD_OPACITY + (1 - MIN_RECORD_OPACITY) * rangeOpacity;
+      tile.faceMaterial.opacity = opacity;
+      tile.edgeMaterial.opacity = opacity;
+      tile.badgeMesh.material.opacity = opacity;
     });
   }
 };
@@ -17473,31 +17872,31 @@ var CAROUSEL_DRAG_STEP_PX = 52;
 function emptyPreloadedCarouselImages(length) {
   return Array.from({ length }).map(() => null);
 }
-function useAgentGUIHeroCarouselImages(icons, iconKey) {
+function useAgentGUIHeroCarouselImages(items, iconKey) {
   const [preloadState, setPreloadState] = useState7({
     images: [],
-    ready: icons.length === 0
+    ready: items.length === 0
   });
   useEffect6(() => {
-    if (icons.length === 0) {
+    if (items.length === 0) {
       setPreloadState({ images: [], ready: true });
       return;
     }
     if (typeof Image !== "function") {
       setPreloadState({
-        images: emptyPreloadedCarouselImages(icons.length),
+        images: emptyPreloadedCarouselImages(items.length),
         ready: true
       });
       return;
     }
     let cancelled = false;
     setPreloadState({
-      images: emptyPreloadedCarouselImages(icons.length),
+      images: emptyPreloadedCarouselImages(items.length),
       ready: false
     });
     void Promise.all(
-      icons.map(
-        (icon) => new Promise((resolve) => {
+      items.map(
+        (item) => new Promise((resolve) => {
           const image = new Image();
           const resolveDecoded = () => {
             const decode = image.decode?.();
@@ -17514,7 +17913,7 @@ function useAgentGUIHeroCarouselImages(icons, iconKey) {
             resolveDecoded();
           };
           image.onerror = () => resolve(null);
-          image.src = icon.iconUrl;
+          image.src = item.iconUrl;
           if (image.complete) {
             if (image.naturalWidth > 0) {
               resolveDecoded();
@@ -17538,16 +17937,15 @@ function useAgentGUIHeroCarouselImages(icons, iconKey) {
 var AgentGUIHeroAgentCarousel = memo2(
   function AgentGUIHeroAgentCarousel2({
     activeAgentTargetId,
-    icons,
-    providerTargets,
+    items,
     onProviderSelect,
     providerSelectLabel
   }) {
     const activeIconIndex = useMemo4(
-      () => !activeAgentTargetId ? -1 : icons.findIndex(
-        (icon) => icon.agentTargetId === activeAgentTargetId
+      () => !activeAgentTargetId ? -1 : items.findIndex(
+        (item) => item.agentTargetId === activeAgentTargetId
       ),
-      [activeAgentTargetId, icons]
+      [activeAgentTargetId, items]
     );
     const [centerIndex, setCenterIndex] = useState7(
       activeIconIndex >= 0 ? activeIconIndex : 0
@@ -17556,42 +17954,29 @@ var AgentGUIHeroAgentCarousel = memo2(
     centerIndexRef.current = centerIndex;
     const activeIconIndexRef = useRef5(activeIconIndex);
     activeIconIndexRef.current = activeIconIndex;
-    const interactive = onProviderSelect != null && (providerTargets?.length ?? 0) > 0;
-    const targetForIndex = useCallback5(
-      (index) => {
-        const icon = icons[index];
-        if (!icon || !interactive) {
-          return null;
-        }
-        if (!icon.agentTargetId) {
-          return null;
-        }
-        return providerTargets?.find(
-          (target) => (target.agentTargetId ?? target.targetId) === icon.agentTargetId
-        ) ?? null;
-      },
-      [icons, interactive, providerTargets]
-    );
+    const interactive = onProviderSelect != null && items.length > 0;
     const selectIndex = useCallback5(
       (index) => {
-        const target = targetForIndex(index);
-        if (!target || !onProviderSelect) {
+        const item = items[index];
+        if (!item || !onProviderSelect) {
           return;
         }
         onProviderSelect({
-          provider: target.provider,
-          agentTargetId: target.targetId
+          provider: item.provider,
+          agentTargetId: item.targetId
         });
       },
-      [onProviderSelect, targetForIndex]
+      [items, onProviderSelect]
     );
     const selectIndexRef = useRef5(selectIndex);
     selectIndexRef.current = selectIndex;
     const stageRef = useRef5(null);
     const canvasRef = useRef5(null);
     const sceneRef = useRef5(null);
-    const iconKey = icons.map((icon) => `${icon.agentTargetId ?? icon.provider}:${icon.iconUrl}`).join("|");
-    const carouselImages = useAgentGUIHeroCarouselImages(icons, iconKey);
+    const iconKey = items.map(
+      (item) => `${item.agentTargetId}:${item.iconUrl}:${item.badge?.iconUrl ?? ""}`
+    ).join("|");
+    const carouselImages = useAgentGUIHeroCarouselImages(items, iconKey);
     useEffect6(() => {
       const canvas = canvasRef.current;
       const stage = stageRef.current;
@@ -17600,7 +17985,7 @@ var AgentGUIHeroAgentCarousel = memo2(
       }
       const scene = AgentGuiHeroCarouselScene.create({
         canvas,
-        iconUrls: icons.map((icon) => icon.iconUrl),
+        items,
         loadedImages: carouselImages.images,
         onSettle: (index) => {
           centerIndexRef.current = index;
@@ -17638,14 +18023,14 @@ var AgentGUIHeroAgentCarousel = memo2(
     const stepBy = useCallback5(
       (direction) => {
         const scene = sceneRef.current;
-        if (!scene || icons.length <= 1) {
+        if (!scene || items.length <= 1) {
           return;
         }
         const next = scene.stepBy(direction);
         centerIndexRef.current = next;
         setCenterIndex(next);
       },
-      [icons.length]
+      [items.length]
     );
     const stepByRef = useRef5(stepBy);
     stepByRef.current = stepBy;
@@ -17681,6 +18066,7 @@ var AgentGUIHeroAgentCarousel = memo2(
       null
     );
     const suppressClickRef = useRef5(false);
+    const pointerActivatedIndexRef = useRef5(null);
     const handlePointerDown = (event) => {
       if (!interactive || event.button !== 0) {
         return;
@@ -17702,6 +18088,7 @@ var AgentGUIHeroAgentCarousel = memo2(
       }
       drag.anchorX = event.clientX;
       suppressClickRef.current = true;
+      pointerActivatedIndexRef.current = null;
       stepBy(deltaX < 0 ? 1 : -1);
     };
     const handlePointerEnd = (event) => {
@@ -17714,6 +18101,7 @@ var AgentGUIHeroAgentCarousel = memo2(
         return;
       }
       suppressClickRef.current = false;
+      pointerActivatedIndexRef.current = null;
       event.preventDefault();
       event.stopPropagation();
     };
@@ -17744,18 +18132,53 @@ var AgentGUIHeroAgentCarousel = memo2(
         rect.height
       );
     };
+    const activateOnPointerDown = (index, event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      pointerActivatedIndexRef.current = index;
+      handleItemClick(index);
+    };
+    const activateOnClick = (index) => {
+      if (pointerActivatedIndexRef.current === index) {
+        pointerActivatedIndexRef.current = null;
+        return;
+      }
+      pointerActivatedIndexRef.current = null;
+      handleItemClick(index);
+    };
+    const handleCanvasPointerDown = (event) => {
+      const index = pickAt(event);
+      if (index !== null) {
+        activateOnPointerDown(index, event);
+      }
+    };
     const handleCanvasClick = (event) => {
       const index = pickAt(event);
       if (index !== null) {
-        handleItemClick(index);
+        activateOnClick(index);
       }
     };
     const handleCanvasHover = (event) => {
+      const scene = sceneRef.current;
       const canvas = canvasRef.current;
-      if (!canvas) {
+      if (!scene || !canvas) {
         return;
       }
-      canvas.style.cursor = pickAt(event) !== null ? "pointer" : "";
+      const rect = canvas.getBoundingClientRect();
+      const hoveredIndex = scene.hover(
+        event.clientX - rect.left,
+        event.clientY - rect.top,
+        rect.width,
+        rect.height
+      );
+      canvas.style.cursor = hoveredIndex !== null ? "pointer" : "";
+    };
+    const handleCanvasLeave = () => {
+      sceneRef.current?.clearHover();
+      if (canvasRef.current) {
+        canvasRef.current.style.cursor = "";
+      }
     };
     return /* @__PURE__ */ jsxs9(
       "div",
@@ -17780,28 +18203,31 @@ var AgentGUIHeroAgentCarousel = memo2(
               "aria-hidden": "true",
               className: AgentGUINode_styles_default.emptyHeroCarouselCanvas,
               onClick: interactive ? handleCanvasClick : void 0,
-              onPointerMove: interactive ? handleCanvasHover : void 0
+              onPointerDown: interactive ? handleCanvasPointerDown : void 0,
+              onPointerMove: interactive ? handleCanvasHover : void 0,
+              onPointerLeave: interactive ? handleCanvasLeave : void 0
             }
           ),
-          icons.map((icon, index) => {
+          items.map((item, index) => {
             const isCenter = index === centerIndex;
-            const target = targetForIndex(index);
-            const key = `${icon.agentTargetId ?? icon.provider}:${icon.iconUrl}`;
-            if (target && onProviderSelect) {
-              const label = providerSelectLabel ? `${providerSelectLabel}: ${target.label}` : target.label;
+            const key = `${item.agentTargetId}:${item.iconUrl}`;
+            if (onProviderSelect) {
+              const itemLabel = item.badge?.label ? `${item.label}, ${item.badge.label}` : item.label;
+              const label = providerSelectLabel ? `${providerSelectLabel}: ${itemLabel}` : itemLabel;
               return /* @__PURE__ */ jsx20(
                 "button",
                 {
                   type: "button",
                   className: AgentGUINode_styles_default.emptyHeroCarouselItem,
-                  "data-agent-target-id": icon.agentTargetId,
-                  "data-provider": icon.provider,
+                  "data-agent-target-id": item.agentTargetId,
+                  "data-provider": item.provider,
                   "data-provider-active": isCenter,
                   "aria-label": label,
                   "aria-pressed": isCenter,
-                  title: target.label,
-                  onClick: () => handleItemClick(index),
-                  children: target.label
+                  title: item.label,
+                  onPointerDown: (event) => activateOnPointerDown(index, event),
+                  onClick: () => activateOnClick(index),
+                  children: item.label
                 },
                 key
               );
@@ -17810,7 +18236,7 @@ var AgentGUIHeroAgentCarousel = memo2(
               "span",
               {
                 className: AgentGUINode_styles_default.emptyHeroCarouselItem,
-                "data-provider": icon.provider,
+                "data-provider": item.provider,
                 "data-provider-active": isCenter
               },
               key
@@ -23050,7 +23476,7 @@ var MENTION_PALETTE_DISMISS_INTERACTION_SELECTOR = [
 function resolveComposerProviderIconUrl(provider) {
   return MANAGED_AGENT_ICON_URLS[normalizeManagedAgentProvider(provider)] ?? MANAGED_AGENT_ICON_FALLBACK_URL;
 }
-function resolveComposerProviderTargetIconUrl(target) {
+function resolveComposerAgentTargetIconUrl(target) {
   if (normalizeManagedAgentProvider(target.provider) === "cursor") {
     return cursorColorfulUrl;
   }
@@ -23230,9 +23656,9 @@ function AgentComposer({
   queuedPrompts,
   drainingQueuedPromptId,
   workspaceAppIcons = EMPTY_WORKSPACE_APP_ICONS2,
-  selectedProviderTarget = null,
-  providerTargets = [],
-  handoffProviderTargets,
+  selectedAgentTarget = null,
+  agentTargets = [],
+  handoffAgentTargets,
   providerSelectReadonly = false,
   onProviderSelect,
   onHandoffConversation,
@@ -24719,35 +25145,35 @@ ${normalizedText}` : normalizedText;
   const isHeroLayout = layoutMode === "hero";
   const composerClassName = isHeroLayout ? AgentGUINode_styles_default.composerHero : AgentGUINode_styles_default.composer;
   const providerSwitchTargets = useMemo10(
-    () => providerTargets.filter(Boolean),
-    [providerTargets]
+    () => agentTargets.filter(Boolean),
+    [agentTargets]
   );
   const enabledProviderSwitchTargets = useMemo10(
     () => providerSwitchTargets.filter((target) => target.disabled !== true),
     [providerSwitchTargets]
   );
-  const selectedAgentTargetId = selectedProviderTarget?.targetId ?? `local:${provider}`;
+  const selectedAgentTargetId = selectedAgentTarget?.targetId ?? `local:${provider}`;
   const selectedProviderSwitchTarget = providerSwitchTargets.find(
     (target) => target.targetId === selectedAgentTargetId
-  ) ?? providerSwitchTargets.find((target) => target.provider === provider) ?? selectedProviderTarget;
+  ) ?? providerSwitchTargets.find((target) => target.provider === provider) ?? selectedAgentTarget;
   const providerMenuTargets = selectedProviderSwitchTarget && !enabledProviderSwitchTargets.some(
     (target) => target.targetId === selectedProviderSwitchTarget.targetId
   ) ? [selectedProviderSwitchTarget, ...enabledProviderSwitchTargets] : enabledProviderSwitchTargets;
-  const enabledHandoffProviderTargets = useMemo10(
-    () => (handoffProviderTargets ?? providerMenuTargets).filter(
+  const enabledHandoffAgentTargets = useMemo10(
+    () => (handoffAgentTargets ?? providerMenuTargets).filter(
       (target) => target.disabled !== true
     ),
-    [handoffProviderTargets, providerMenuTargets]
+    [handoffAgentTargets, providerMenuTargets]
   );
-  const handoffMenuTargets = selectedProviderSwitchTarget ? enabledHandoffProviderTargets.filter((target) => {
+  const handoffMenuTargets = selectedProviderSwitchTarget ? enabledHandoffAgentTargets.filter((target) => {
     if (target.targetId === selectedProviderSwitchTarget.targetId) {
       return false;
     }
     const selectedAgentTargetId2 = selectedProviderSwitchTarget.agentTargetId ?? selectedProviderSwitchTarget.targetId;
     const targetAgentTargetId = target.agentTargetId ?? target.targetId;
     return targetAgentTargetId !== selectedAgentTargetId2;
-  }) : enabledHandoffProviderTargets;
-  const selectedProviderLabel = selectedProviderSwitchTarget?.label ?? selectedProviderTarget?.label ?? provider;
+  }) : enabledHandoffAgentTargets;
+  const selectedProviderLabel = selectedProviderSwitchTarget?.label ?? selectedAgentTarget?.label ?? provider;
   const effectiveHandoffLabel = handoffLabel || labels.handoffConversation;
   const effectiveHandoffMenuLabel = handoffMenuLabel || labels.handoffConversationMenu;
   const inputShellClassName = cn(
@@ -25977,9 +26403,7 @@ ${normalizedText}` : normalizedText;
                                               alt: "",
                                               "aria-hidden": "true",
                                               className: "size-4 shrink-0 rounded-[4px]",
-                                              src: resolveComposerProviderTargetIconUrl(
-                                                target
-                                              )
+                                              src: resolveComposerAgentTargetIconUrl(target)
                                             }
                                           ),
                                           /* @__PURE__ */ jsx32("span", { className: "min-w-0 truncate", children: target.label })
@@ -26029,7 +26453,7 @@ ${normalizedText}` : normalizedText;
                                         alt: "",
                                         "aria-hidden": "true",
                                         className: "size-4 shrink-0 rounded-[4px]",
-                                        src: resolveComposerProviderTargetIconUrl(
+                                        src: resolveComposerAgentTargetIconUrl(
                                           selectedProviderSwitchTarget
                                         )
                                       }
@@ -26056,7 +26480,7 @@ ${normalizedText}` : normalizedText;
                                             alt: "",
                                             "aria-hidden": "true",
                                             className: "size-4 shrink-0 rounded-[4px]",
-                                            src: resolveComposerProviderTargetIconUrl(target)
+                                            src: resolveComposerAgentTargetIconUrl(target)
                                           }
                                         ),
                                         /* @__PURE__ */ jsx32("span", { className: "min-w-0 truncate", children: target.label })
@@ -26916,26 +27340,6 @@ function setBooleanStateIfChanged(stateRef, setState, nextState) {
   stateRef.current = nextState;
   setState(nextState);
 }
-function resolveAgentGUIHeroIconUrl(provider) {
-  const normalizedProvider = normalizeManagedAgentProvider(provider);
-  return MANAGED_AGENT_ICON_URLS[normalizedProvider] ?? MANAGED_AGENT_ICON_FALLBACK_URL;
-}
-function agentGUIProviderIconPresentation(provider, iconUrl) {
-  const normalizedProvider = normalizeManagedAgentProvider(provider);
-  const providerRailIconUrl = MANAGED_AGENT_PROVIDER_RAIL_ICON_URLS[normalizedProvider] ?? null;
-  return {
-    provider: normalizedProvider,
-    iconUrl: iconUrl?.trim() || providerRailIconUrl || resolveAgentGUIHeroIconUrl(normalizedProvider)
-  };
-}
-function agentGUIProviderRailIconPresentation(provider, iconUrl) {
-  const normalizedProvider = normalizeManagedAgentProvider(provider);
-  const providerRailIconUrl = MANAGED_AGENT_PROVIDER_RAIL_ICON_URLS[normalizedProvider] ?? null;
-  return {
-    provider: normalizedProvider,
-    iconUrl: iconUrl?.trim() || providerRailIconUrl || resolveAgentGUIHeroIconUrl(normalizedProvider)
-  };
-}
 function shouldEmphasizeEmptyHeroProvider(label) {
   return label.trim().length > 0;
 }
@@ -27139,7 +27543,7 @@ function buildAgentConversationHandoffPrompt(input) {
   if (!conversation) {
     return "";
   }
-  const sourceAgentLabel = input.selectedProviderTarget?.label?.trim() || conversation.provider;
+  const sourceAgentLabel = input.selectedAgentTarget?.label?.trim() || conversation.provider;
   const title = conversationPlainTitle(
     conversation,
     input.labels,
@@ -27348,7 +27752,7 @@ function AgentGUINodeView({
     [viewModel.data.provider, viewModel.openclawGateway]
   );
   const isOpenclawGatewayBlocking = openclawGateway !== null && openclawGateway.status !== "ready";
-  const createConversationDisabled = viewModel.isCreatingConversation || viewModel.selectedProviderTarget.disabled === true || isOpenclawGatewayBlocking;
+  const createConversationDisabled = viewModel.isCreatingConversation || viewModel.selectedAgentTarget.disabled === true || isOpenclawGatewayBlocking;
   const createConversationAction = useStableEventCallback2(
     actions.createConversation
   );
@@ -27562,7 +27966,7 @@ function AgentGUINodeView({
   };
   const effectiveRailConfigProvider = railConfigProvider === void 0 ? viewModel.data.provider : railConfigProvider;
   const effectiveRailSlashStatusLimits = railSlashStatusLimits ?? slashStatusLimits;
-  const shouldShowProviderRailConfigButton = viewModel.conversationFilter.kind === "all" || viewModel.selectedProviderTarget?.disabled !== true;
+  const shouldShowProviderRailConfigButton = viewModel.conversationFilter.kind === "all" || viewModel.selectedAgentTarget?.disabled !== true;
   const shouldShowProviderRailConfigMenu = shouldShowProviderRailConfigButton && viewModel.conversationFilter.kind !== "all";
   const effectiveProviderAuthAccountLabel = useMemo11(() => {
     const provider = (effectiveRailConfigProvider ?? viewModel.data.provider)?.trim() ?? "";
@@ -27576,10 +27980,10 @@ function AgentGUINodeView({
     providerAuthAccountLabels,
     viewModel.data.provider
   ]);
-  const enabledProviderTargets = viewModel.providerTargets.filter(
+  const enabledAgentTargets = viewModel.agentTargets.filter(
     (target) => target.disabled !== true && ((target.agentTargetId?.trim() ?? "") || (target.targetId?.trim() ?? ""))
   );
-  const sectionAgentTargetFallbackId = enabledProviderTargets.length <= 1 ? viewModel.selectedProviderTarget.agentTargetId?.trim() || viewModel.selectedProviderTarget.targetId?.trim() || null : null;
+  const sectionAgentTargetFallbackId = enabledAgentTargets.length <= 1 ? viewModel.selectedAgentTarget.agentTargetId?.trim() || viewModel.selectedAgentTarget.targetId?.trim() || null : null;
   const openAgentEnvSetup = useCallback11(() => {
     openAgentEnvPanel({ provider: effectiveRailConfigProvider, focus: null });
   }, [effectiveRailConfigProvider]);
@@ -27608,8 +28012,8 @@ function AgentGUINodeView({
       createConversationDisabled,
       openclawGateway,
       isCollapsed: conversationRailCollapsed,
-      providerTargets: viewModel.providerTargets,
-      providerTargetsLoading: viewModel.providerTargetsLoading,
+      agentTargets: viewModel.agentTargets,
+      agentTargetsLoading: viewModel.agentTargetsLoading,
       conversationFilter: viewModel.conversationFilter,
       sectionAgentTargetFallbackId,
       onCreateConversation: requestCreateConversation,
@@ -27662,8 +28066,8 @@ function AgentGUINodeView({
       selectConversation,
       selectProjectDirectory,
       sectionAgentTargetFallbackId,
-      viewModel.providerTargets,
-      viewModel.providerTargetsLoading,
+      viewModel.agentTargets,
+      viewModel.agentTargetsLoading,
       toggleConversationPinned,
       uiLanguage,
       viewModel.conversationFilter,
@@ -27691,7 +28095,7 @@ function AgentGUINodeView({
     conversationRailStoreState
   );
   const agentTargetPresentations = useMemo11(
-    () => viewModel.providerTargets.flatMap(
+    () => viewModel.agentTargets.flatMap(
       (target) => target.agentTargetId ? [
         {
           agentTargetId: target.agentTargetId,
@@ -27702,7 +28106,7 @@ function AgentGUINodeView({
         }
       ] : []
     ),
-    [viewModel.providerTargets, viewModel.workspaceId]
+    [viewModel.agentTargets, viewModel.workspaceId]
   );
   const content = /* @__PURE__ */ jsxs22(AgentTargetPresentationProvider, { agentTargets: agentTargetPresentations, children: [
     /* @__PURE__ */ jsxs22(
@@ -27730,9 +28134,9 @@ function AgentGUINodeView({
                     labels,
                     previewMode,
                     workspaceId: viewModel.workspaceId,
-                    selectedProviderTarget: viewModel.selectedProviderTarget,
-                    providerTargets: viewModel.providerTargets,
-                    providerTargetsLoading: viewModel.providerTargetsLoading,
+                    selectedAgentTarget: viewModel.selectedAgentTarget,
+                    agentTargets: viewModel.agentTargets,
+                    agentTargetsLoading: viewModel.agentTargetsLoading,
                     renderProviderRailEmpty,
                     providerRailAllPresentation,
                     onSelectConversationFilterTarget: actions.selectConversationFilterTarget,
@@ -28157,9 +28561,9 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
     avoidGroupingEdits: viewModel.avoidGroupingEdits
   });
   const hasActiveConversation = viewModel.activeConversationId !== null;
-  const agentsLoadedEmpty = !viewModel.providerTargetsLoading && viewModel.providerTargets.length === 0;
-  const selectedProviderTargetComingSoon = viewModel.selectedProviderTarget?.disabled === true && (viewModel.providerReadinessGate === null || viewModel.providerReadinessGate?.status === "coming_soon");
-  const emptyProviderReadinessGate = !hasActiveConversation ? viewModel.providerReadinessGate ?? (selectedProviderTargetComingSoon ? { status: "coming_soon" } : null) : null;
+  const agentsLoadedEmpty = !viewModel.agentTargetsLoading && viewModel.agentTargets.length === 0;
+  const selectedAgentTargetComingSoon = viewModel.selectedAgentTarget?.disabled === true && (viewModel.providerReadinessGate === null || viewModel.providerReadinessGate?.status === "coming_soon");
+  const emptyProviderReadinessGate = !hasActiveConversation ? viewModel.providerReadinessGate ?? (selectedAgentTargetComingSoon ? { status: "coming_soon" } : null) : null;
   const activePrompt = viewModel.pendingInteractivePrompt ?? viewModel.pendingApproval;
   const activePromptRequestId = activePrompt?.requestId ?? null;
   const sessionChrome = useMemo11(
@@ -28718,16 +29122,16 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
     [submitInteractivePrompt]
   );
   const canSwitchComposerProvider = true;
-  const composerProviderTargets = viewModel.providerTargets;
-  const composerHandoffProviderTargets = viewModel.handoffProviderTargets;
-  const composerProvider = viewModel.activeConversationId === null ? viewModel.selectedProviderTarget?.provider ?? viewModel.data.provider : viewModel.data.provider;
-  const composerSelectedProviderTarget = viewModel.activeConversationId === null ? viewModel.selectedProviderTarget : viewModel.providerTargets.find((target) => {
+  const composerAgentTargets = viewModel.agentTargets;
+  const composerHandoffAgentTargets = viewModel.handoffAgentTargets;
+  const composerProvider = viewModel.activeConversationId === null ? viewModel.selectedAgentTarget?.provider ?? viewModel.data.provider : viewModel.data.provider;
+  const composerSelectedAgentTarget = viewModel.activeConversationId === null ? viewModel.selectedAgentTarget : viewModel.agentTargets.find((target) => {
     if (target.provider !== viewModel.data.provider) {
       return false;
     }
     const agentTargetId = viewModel.data.agentTargetId;
     return !agentTargetId || target.targetId === agentTargetId || target.agentTargetId === agentTargetId;
-  }) ?? viewModel.selectedProviderTarget;
+  }) ?? viewModel.selectedAgentTarget;
   const bottomDockComposerProps = useMemo11(
     () => ({
       workspaceId: viewModel.workspaceId,
@@ -28742,9 +29146,9 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
       hasCompactableContext: viewModel.hasSentUserMessage,
       compactSupported: viewModel.compactSupported,
       availableSkills: viewModel.availableSkills,
-      selectedProviderTarget: composerSelectedProviderTarget,
-      providerTargets: composerProviderTargets,
-      handoffProviderTargets: composerHandoffProviderTargets,
+      selectedAgentTarget: composerSelectedAgentTarget,
+      agentTargets: composerAgentTargets,
+      handoffAgentTargets: composerHandoffAgentTargets,
       providerSelectReadonly: !canSwitchComposerProvider || viewModel.activeConversationId !== null,
       onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
       disabled: composerDisabled,
@@ -28800,7 +29204,7 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
           activeConversation: viewModel.activeConversation,
           currentUserId: viewModel.currentUserId,
           labels,
-          selectedProviderTarget: composerSelectedProviderTarget,
+          selectedAgentTarget: composerSelectedAgentTarget,
           uiLanguage,
           workspaceId: viewModel.workspaceId
         }),
@@ -28823,10 +29227,10 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
       composerDisabled,
       composerDisabledReason,
       composerFocusRequestSequence,
-      composerHandoffProviderTargets,
+      composerHandoffAgentTargets,
       composerLabels,
-      composerProviderTargets,
-      composerSelectedProviderTarget,
+      composerAgentTargets,
+      composerSelectedAgentTarget,
       handleInterruptCurrentTurn,
       isActive,
       isComposerSending,
@@ -28899,40 +29303,31 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
     }),
     [bottomDockComposerProps]
   );
-  const emptyHeroProvider = viewModel.selectedProviderTarget?.provider ?? viewModel.data.provider;
+  const emptyHeroProvider = viewModel.selectedAgentTarget?.provider ?? viewModel.data.provider;
   const emptyHeroRuntimeProviderLabel = labels.emptyProviderForProvider?.(emptyHeroProvider) ?? labels.emptyProvider ?? "";
-  const emptyHeroProviderLabel = viewModel.selectedProviderTarget?.label ?? emptyHeroRuntimeProviderLabel;
+  const emptyHeroProviderLabel = viewModel.selectedAgentTarget?.label ?? emptyHeroRuntimeProviderLabel;
   const emptyHeroBaseLabel = labels.emptyForProvider?.(emptyHeroProvider) ?? labels.empty;
   const emptyHeroLabel = emptyHeroRuntimeProviderLabel ? emptyHeroBaseLabel.replace(
     emptyHeroRuntimeProviderLabel,
     emptyHeroProviderLabel
   ) : emptyHeroBaseLabel;
-  const emptyHeroIconPresentations = useMemo11(
-    () => viewModel.conversationFilter.kind === "all" ? viewModel.providerTargets.map((target) => ({
-      agentTargetId: target.agentTargetId ?? target.targetId,
-      provider: target.provider,
-      iconUrl: agentGUIProviderRailIconPresentation(
-        target.provider,
-        target.iconUrl
-      ).iconUrl
-    })) : [
-      {
-        ...agentGUIProviderIconPresentation(
-          emptyHeroProvider,
-          viewModel.selectedProviderTarget?.iconUrl
-        ),
-        agentTargetId: viewModel.selectedProviderTarget?.agentTargetId ?? viewModel.selectedProviderTarget?.targetId
-      }
+  const emptyHeroAvatarPresentations = useMemo11(
+    () => viewModel.agentTargets.length > 0 ? viewModel.agentTargets.map(projectAgentGUIAgentTargetAvatar) : viewModel.selectedAgentTarget ? [projectAgentGUIAgentTargetAvatar(viewModel.selectedAgentTarget)] : [
+      createFallbackAgentGUIAgentAvatar({
+        provider: emptyHeroProvider,
+        label: emptyHeroProviderLabel,
+        iconUrl: null
+      })
     ],
     [
       emptyHeroProvider,
-      viewModel.conversationFilter.kind,
-      viewModel.providerTargets,
-      viewModel.selectedProviderTarget
+      emptyHeroProviderLabel,
+      viewModel.agentTargets,
+      viewModel.selectedAgentTarget
     ]
   );
-  const disabledProviderTarget = selectedProviderTargetComingSoon ? viewModel.selectedProviderTarget ?? null : null;
-  const shouldRenderProviderUnavailableState = !hasActiveConversation && disabledProviderTarget !== null && renderProviderUnavailableState !== void 0;
+  const disabledAgentTarget = selectedAgentTargetComingSoon ? viewModel.selectedAgentTarget ?? null : null;
+  const shouldRenderProviderUnavailableState = !hasActiveConversation && disabledAgentTarget !== null && renderProviderUnavailableState !== void 0;
   const shouldRenderProviderReadinessGateState = !hasActiveConversation && emptyProviderReadinessGate !== null && renderProviderReadinessGateState !== void 0;
   const bottomDockStoreState = useMemo11(
     () => ({
@@ -29335,62 +29730,73 @@ var AgentGUIDetailPane = memo3(function AgentGUIDetailPane2({
             "data-testid": "agent-gui-agents-empty",
             children: /* @__PURE__ */ jsx35("div", { className: AgentGUINode_styles_default.emptyHeroBody, children: /* @__PURE__ */ jsx35("h2", { className: AgentGUINode_styles_default.emptyHeroTitle, children: labels.agentsEmpty }) })
           }
-        ) : shouldRenderProviderUnavailableState && disabledProviderTarget ? /* @__PURE__ */ jsx35(Fragment9, { children: renderProviderUnavailableState?.({
-          provider: disabledProviderTarget.provider,
+        ) : shouldRenderProviderUnavailableState && disabledAgentTarget ? /* @__PURE__ */ jsx35(Fragment9, { children: renderProviderUnavailableState?.({
+          provider: disabledAgentTarget.provider,
           providerLabel: labels.emptyProviderForProvider?.(
-            disabledProviderTarget.provider
+            disabledAgentTarget.provider
           ) ?? resolveAgentGuiWorkbenchProviderLabel(
-            disabledProviderTarget.provider
+            disabledAgentTarget.provider
           ),
-          target: disabledProviderTarget,
+          target: disabledAgentTarget,
           iconUrl: resolveAgentGUIHeroIconUrl(
-            disabledProviderTarget.provider
+            disabledAgentTarget.provider
           ),
-          unavailableReason: disabledProviderTarget.unavailableReason ?? null
-        }) }) : emptyProviderReadinessGate ? shouldRenderProviderReadinessGateState ? /* @__PURE__ */ jsx35(Fragment9, { children: renderProviderReadinessGateState?.({
+          unavailableReason: disabledAgentTarget.unavailableReason ?? null
+        }) }) : emptyProviderReadinessGate && shouldRenderProviderReadinessGateState ? /* @__PURE__ */ jsx35(Fragment9, { children: renderProviderReadinessGateState?.({
           provider: emptyHeroProvider,
           providerLabel: emptyHeroProviderLabel || resolveAgentGuiWorkbenchProviderLabel(emptyHeroProvider),
-          target: viewModel.selectedProviderTarget ?? null,
+          target: viewModel.selectedAgentTarget ?? null,
           iconUrl: resolveAgentGUIHeroIconUrl(emptyHeroProvider),
           gate: emptyProviderReadinessGate,
           showAllProviders: viewModel.conversationFilter.kind === "all"
         }) }) : /* @__PURE__ */ jsx35(
-          AgentGUIProviderReadinessGatePane,
+          AgentGUIEmptyHeroCarouselStage,
           {
-            provider: emptyHeroProvider,
-            gate: emptyProviderReadinessGate,
-            showAllProviders: viewModel.conversationFilter.kind === "all",
-            emptyLabel: emptyHeroLabel,
-            emptyProvider: emptyHeroProviderLabel,
-            providerTargets: composerProviderTargets,
-            selectedProviderTarget: viewModel.selectedProviderTarget,
+            activeAgentTargetId: viewModel.selectedAgentTarget?.agentTargetId ?? viewModel.selectedAgentTarget?.targetId,
+            items: emptyHeroAvatarPresentations,
             onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
             providerSelectLabel: labels.providerSwitchLabel,
-            labels
-          }
-        ) : /* @__PURE__ */ jsx35(
-          AgentGUIEmptyHeroPane,
-          {
-            provider: emptyHeroProvider,
-            emptyLabel: emptyHeroLabel,
-            emptyProvider: emptyHeroProviderLabel,
-            iconPresentations: emptyHeroIconPresentations,
-            inlineNoticeChrome,
-            isRespondingApproval: viewModel.isRespondingApproval,
-            onSubmitApprovalOption: submitApprovalOption,
-            onRetryActivation: retryActivation,
-            onAuthLogin: authLogin,
-            onContinueInNewConversation: continueInNewConversation,
-            onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
-            providerTargets: composerProviderTargets,
-            selectedProviderTarget: viewModel.selectedProviderTarget,
-            chromeLabels,
-            composerProps: emptyHeroComposerProps,
-            providerSelectLabel: labels.providerSwitchLabel,
-            suggestions: labels.homeSuggestions ?? EMPTY_HOME_SUGGESTIONS,
-            suggestionsCloseLabel: labels.homeSuggestionsClose,
-            onSelectSuggestion: handleSelectHomeSuggestion,
-            onSelectSuggestionAction: handleHomeSuggestionAction
+            children: emptyProviderReadinessGate ? /* @__PURE__ */ jsx35(
+              AgentGUIProviderReadinessGatePane,
+              {
+                provider: emptyHeroProvider,
+                gate: emptyProviderReadinessGate,
+                showAllProviders: viewModel.conversationFilter.kind === "all",
+                carouselMountedExternally: emptyHeroAvatarPresentations.length > 1,
+                emptyLabel: emptyHeroLabel,
+                emptyProvider: emptyHeroProviderLabel,
+                agentTargets: composerAgentTargets,
+                selectedAgentTarget: viewModel.selectedAgentTarget,
+                onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
+                providerSelectLabel: labels.providerSwitchLabel,
+                labels
+              }
+            ) : /* @__PURE__ */ jsx35(
+              AgentGUIEmptyHeroPane,
+              {
+                provider: emptyHeroProvider,
+                emptyLabel: emptyHeroLabel,
+                emptyProvider: emptyHeroProviderLabel,
+                avatarPresentations: emptyHeroAvatarPresentations,
+                carouselMountedExternally: emptyHeroAvatarPresentations.length > 1,
+                inlineNoticeChrome,
+                isRespondingApproval: viewModel.isRespondingApproval,
+                onSubmitApprovalOption: submitApprovalOption,
+                onRetryActivation: retryActivation,
+                onAuthLogin: authLogin,
+                onContinueInNewConversation: continueInNewConversation,
+                onProviderSelect: canSwitchComposerProvider && viewModel.activeConversationId === null ? selectHomeComposerAgentTargetAndFocus : void 0,
+                agentTargets: composerAgentTargets,
+                selectedAgentTarget: viewModel.selectedAgentTarget,
+                chromeLabels,
+                composerProps: emptyHeroComposerProps,
+                providerSelectLabel: labels.providerSwitchLabel,
+                suggestions: labels.homeSuggestions ?? EMPTY_HOME_SUGGESTIONS,
+                suggestionsCloseLabel: labels.homeSuggestionsClose,
+                onSelectSuggestion: handleSelectHomeSuggestion,
+                onSelectSuggestionAction: handleHomeSuggestionAction
+              }
+            )
           }
         ) : /* @__PURE__ */ jsx35(
           AgentGUIConversationTimelinePane,
@@ -29530,11 +29936,35 @@ function useOptionalStableEventCallback(callback) {
   }, [callback != null]);
 }
 var EMPTY_HOME_SUGGESTIONS = Object.freeze([]);
+var AgentGUIEmptyHeroCarouselStage = memo3(
+  function AgentGUIEmptyHeroCarouselStage2({
+    activeAgentTargetId,
+    children,
+    items,
+    onProviderSelect,
+    providerSelectLabel
+  }) {
+    "use memo";
+    return /* @__PURE__ */ jsxs22("div", { className: AgentGUINode_styles_default.emptyHeroCarouselStage, children: [
+      items.length > 1 ? /* @__PURE__ */ jsx35("div", { className: AgentGUINode_styles_default.emptyHeroCarouselLayer, children: /* @__PURE__ */ jsx35(
+        AgentGUIHeroAgentCarousel,
+        {
+          activeAgentTargetId,
+          items,
+          onProviderSelect,
+          providerSelectLabel
+        }
+      ) }) : null,
+      children
+    ] });
+  }
+);
 var AgentGUIEmptyHeroPane = memo3(function AgentGUIEmptyHeroPane2({
   provider,
   emptyLabel,
   emptyProvider,
-  iconPresentations,
+  avatarPresentations,
+  carouselMountedExternally = false,
   inlineNoticeChrome,
   isRespondingApproval,
   onSubmitApprovalOption,
@@ -29542,8 +29972,8 @@ var AgentGUIEmptyHeroPane = memo3(function AgentGUIEmptyHeroPane2({
   onRetryActivation,
   onContinueInNewConversation,
   onProviderSelect,
-  providerTargets,
-  selectedProviderTarget,
+  agentTargets,
+  selectedAgentTarget,
   chromeLabels,
   composerProps,
   providerSelectLabel,
@@ -29553,36 +29983,47 @@ var AgentGUIEmptyHeroPane = memo3(function AgentGUIEmptyHeroPane2({
   onSelectSuggestionAction
 }) {
   "use memo";
-  const heroIconPresentations = iconPresentations.length > 0 ? iconPresentations : [agentGUIProviderIconPresentation(provider)];
-  const heroIconAnimationKey = heroIconPresentations.map((icon) => `${icon.provider}:${icon.iconUrl}`).join("|");
+  const heroAvatarPresentations = avatarPresentations.length > 0 ? avatarPresentations : [
+    createFallbackAgentGUIAgentAvatar({
+      provider,
+      label: emptyProvider
+    })
+  ];
+  const heroIconAnimationKey = heroAvatarPresentations.map(
+    (avatar) => `${avatar.agentTargetId}:${avatar.iconUrl}:${avatar.badge?.iconUrl ?? ""}`
+  ).join("|");
   return /* @__PURE__ */ jsx35("div", { className: AgentGUINode_styles_default.emptyHero, children: /* @__PURE__ */ jsxs22("div", { className: AgentGUINode_styles_default.emptyHeroBody, children: [
-    /* @__PURE__ */ jsx35("div", { className: AgentGUINode_styles_default.emptyHeroIconSlot, children: heroIconPresentations.length > 1 ? /* @__PURE__ */ jsx35(
-      AgentGUIHeroAgentCarousel,
-      {
-        activeAgentTargetId: selectedProviderTarget?.agentTargetId ?? selectedProviderTarget?.targetId,
-        icons: heroIconPresentations,
-        providerTargets,
-        onProviderSelect,
-        providerSelectLabel
-      },
-      heroIconAnimationKey
-    ) : /* @__PURE__ */ jsx35(
-      AgentGUIProviderIconVisual,
+    /* @__PURE__ */ jsx35(
+      "div",
       {
-        ariaHidden: true,
-        imageClassName: AgentGUINode_styles_default.emptyHeroIconEffect,
-        icon: heroIconPresentations[0]
-      },
-      heroIconAnimationKey
-    ) }),
+        className: AgentGUINode_styles_default.emptyHeroIconSlot,
+        "data-carousel-placeholder": carouselMountedExternally || void 0,
+        children: carouselMountedExternally ? null : heroAvatarPresentations.length > 1 ? /* @__PURE__ */ jsx35(
+          AgentGUIHeroAgentCarousel,
+          {
+            activeAgentTargetId: selectedAgentTarget?.agentTargetId ?? selectedAgentTarget?.targetId,
+            items: heroAvatarPresentations,
+            onProviderSelect,
+            providerSelectLabel
+          }
+        ) : /* @__PURE__ */ jsx35(
+          AgentGUIAgentAvatarVisual,
+          {
+            className: AgentGUINode_styles_default.emptyHeroIconEffect,
+            presentation: heroAvatarPresentations[0]
+          },
+          heroIconAnimationKey
+        )
+      }
+    ),
     /* @__PURE__ */ jsx35("h2", { className: AgentGUINode_styles_default.emptyHeroTitle, children: /* @__PURE__ */ jsx35(
       EmptyHeroTitle,
       {
         label: emptyLabel,
         providerLabel: emptyProvider,
         providerSelectLabel,
-        providerTargets,
-        selectedProviderTarget,
+        agentTargets,
+        selectedAgentTarget,
         onProviderSelect
       }
     ) }),
@@ -29617,24 +30058,17 @@ var AgentGUIProviderReadinessGatePane = memo3(
     showAllProviders = false,
     emptyLabel,
     emptyProvider,
-    providerTargets,
-    selectedProviderTarget,
+    agentTargets,
+    selectedAgentTarget,
     onProviderSelect,
     providerSelectLabel,
+    carouselMountedExternally = false,
     labels
   }) {
     "use memo";
-    const heroIconUrl = resolveAgentGUIHeroIconUrl(provider);
-    const launchpadIconPresentations = useMemo11(
-      () => providerTargets.map((target) => ({
-        agentTargetId: target.agentTargetId ?? target.targetId,
-        provider: target.provider,
-        iconUrl: agentGUIProviderRailIconPresentation(
-          target.provider,
-          target.iconUrl
-        ).iconUrl
-      })),
-      [providerTargets]
+    const heroAvatarPresentations = useMemo11(
+      () => agentTargets.map(projectAgentGUIAgentTargetAvatar),
+      [agentTargets]
     );
     const pendingAction = gate.pendingAction ?? null;
     const isPending = pendingAction !== null;
@@ -29652,23 +30086,28 @@ var AgentGUIProviderReadinessGatePane = memo3(
         "data-testid": "agent-gui-provider-readiness-gate",
         role: "status",
         children: [
-          showAllProviders ? /* @__PURE__ */ jsx35(
+          carouselMountedExternally ? /* @__PURE__ */ jsx35(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: AgentGUINode_styles_default.emptyHeroCarouselPlaceholder
+            }
+          ) : showAllProviders ? /* @__PURE__ */ jsx35(
             AgentGUIHeroAgentCarousel,
             {
-              activeAgentTargetId: selectedProviderTarget?.agentTargetId ?? selectedProviderTarget?.targetId,
-              icons: launchpadIconPresentations,
-              providerTargets,
+              activeAgentTargetId: selectedAgentTarget?.agentTargetId ?? selectedAgentTarget?.targetId,
+              items: heroAvatarPresentations,
               onProviderSelect,
               providerSelectLabel
             }
           ) : /* @__PURE__ */ jsx35(
-            "img",
+            AgentGUIAgentAvatarVisual,
             {
-              "aria-hidden": "true",
               className: AgentGUINode_styles_default.emptyHeroIconEffect,
-              draggable: false,
-              src: heroIconUrl,
-              alt: ""
+              presentation: selectedAgentTarget ? projectAgentGUIAgentTargetAvatar(selectedAgentTarget) : createFallbackAgentGUIAgentAvatar({
+                provider,
+                label: emptyProvider
+              })
             }
           ),
           /* @__PURE__ */ jsx35("h2", { className: AgentGUINode_styles_default.emptyHeroTitle, children: useSharedHeroTitle ? /* @__PURE__ */ jsx35(
@@ -29677,8 +30116,8 @@ var AgentGUIProviderReadinessGatePane = memo3(
               label: emptyLabel,
               providerLabel: emptyProvider,
               providerSelectLabel,
-              providerTargets,
-              selectedProviderTarget,
+              agentTargets,
+              selectedAgentTarget,
               onProviderSelect
             }
           ) : content.title }),
@@ -29796,19 +30235,37 @@ function AgentGUIUnifiedProviderIcon({
     }
   ) });
 }
-function AgentGUIProviderIconVisual({
-  ariaHidden = false,
-  icon,
-  imageClassName
+function AgentGUIAgentAvatarVisual({
+  className,
+  imageClassName,
+  presentation
 }) {
-  return /* @__PURE__ */ jsx35(
-    "img",
+  return /* @__PURE__ */ jsxs22(
+    "span",
     {
-      alt: "",
-      "aria-hidden": ariaHidden ? "true" : void 0,
-      className: imageClassName,
-      draggable: false,
-      src: icon.iconUrl
+      "aria-hidden": "true",
+      className: cn3(AgentGUINode_styles_default.agentAvatar, className),
+      "data-agent-target-id": presentation.agentTargetId,
+      children: [
+        /* @__PURE__ */ jsx35(
+          "img",
+          {
+            alt: "",
+            className: cn3(AgentGUINode_styles_default.agentAvatarImage, imageClassName),
+            draggable: false,
+            src: presentation.iconUrl
+          }
+        ),
+        presentation.badge?.iconUrl ? /* @__PURE__ */ jsx35("span", { className: AgentGUINode_styles_default.agentAvatarBadge, children: /* @__PURE__ */ jsx35(
+          "img",
+          {
+            alt: "",
+            className: AgentGUINode_styles_default.agentAvatarBadgeImage,
+            draggable: false,
+            src: presentation.badge.iconUrl
+          }
+        ) }) : null
+      ]
     }
   );
 }
@@ -29816,8 +30273,8 @@ function EmptyHeroTitle({
   label,
   providerLabel,
   providerSelectLabel,
-  providerTargets = [],
-  selectedProviderTarget = null,
+  agentTargets = [],
+  selectedAgentTarget = null,
   onProviderSelect
 }) {
   const providerStart = providerLabel ? label.indexOf(providerLabel) : -1;
@@ -29825,8 +30282,8 @@ function EmptyHeroTitle({
     return /* @__PURE__ */ jsx35(Fragment9, { children: label });
   }
   const providerEnd = providerStart + providerLabel.length;
-  const selectedAgentTargetId = selectedProviderTarget?.targetId ?? `local:${selectedProviderTarget?.provider ?? ""}`;
-  const canSwitchProvider = providerTargets.length > 1 && selectedProviderTarget && onProviderSelect;
+  const selectedAgentTargetId = selectedAgentTarget?.targetId ?? `local:${selectedAgentTarget?.provider ?? ""}`;
+  const canSwitchProvider = agentTargets.length > 1 && selectedAgentTarget && onProviderSelect;
   const providerName = label.slice(providerStart, providerEnd);
   return /* @__PURE__ */ jsxs22(Fragment9, { children: [
     label.slice(0, providerStart),
@@ -29835,7 +30292,7 @@ function EmptyHeroTitle({
       {
         value: selectedAgentTargetId,
         onValueChange: (nextTargetId) => {
-          const target = providerTargets.find(
+          const target = agentTargets.find(
             (candidate) => candidate.targetId === nextTargetId
           );
           if (!target) {
@@ -29862,7 +30319,7 @@ function EmptyHeroTitle({
             {
               align: "center",
               className: cn3(AgentGUINode_styles_default.composerMenuContent, "min-w-[190px]"),
-              children: providerTargets.map((target) => /* @__PURE__ */ jsx35(
+              children: agentTargets.map((target) => /* @__PURE__ */ jsx35(
                 SelectItem3,
                 {
                   value: target.targetId,
@@ -29879,10 +30336,10 @@ function EmptyHeroTitle({
                         alt: "",
                         "aria-hidden": "true",
                         className: "size-4 shrink-0 rounded-[4px]",
-                        src: agentGUIProviderRailIconPresentation(
+                        src: resolveAgentGUIAgentAvatarIconUrl(
                           target.provider,
                           target.iconUrl
-                        ).iconUrl
+                        )
                       }
                     ),
                     /* @__PURE__ */ jsx35("span", { className: "min-w-0 truncate", children: target.label })
@@ -30050,7 +30507,7 @@ function syncAgentGUIConversationRailStore(store, next) {
   Object.assign(store, next);
 }
 function agentGUIConversationRailStoreSnapshotsEqual(current, next) {
-  return current.activeConversationId === next.activeConversationId && current.pendingDeleteConversationId === next.pendingDeleteConversationId && current.pendingDeleteProjectConversations === next.pendingDeleteProjectConversations && current.pendingDeleteConversations === next.pendingDeleteConversations && current.isLoadingConversations === next.isLoadingConversations && current.isDeletingConversation === next.isDeletingConversation && current.isDeletingProjectConversations === next.isDeletingProjectConversations && current.labels === next.labels && current.workspaceUserProjectI18n === next.workspaceUserProjectI18n && current.uiLanguage === next.uiLanguage && current.previewMode === next.previewMode && current.createConversationDisabled === next.createConversationDisabled && current.openclawGateway === next.openclawGateway && current.isCollapsed === next.isCollapsed && current.providerTargets === next.providerTargets && current.providerTargetsLoading === next.providerTargetsLoading && current.conversationFilter === next.conversationFilter && current.sectionAgentTargetFallbackId === next.sectionAgentTargetFallbackId && current.onUpdateConversationFilter === next.onUpdateConversationFilter && current.onSelectConversationFilterTarget === next.onSelectConversationFilterTarget && current.onCreateConversation === next.onCreateConversation && current.onRetryOpenclawGateway === next.onRetryOpenclawGateway && current.onSelectConversation === next.onSelectConversation && current.onToggleConversationPinned === next.onToggleConversationPinned && current.onMarkConversationUnread === next.onMarkConversationUnread && current.onOpenProjectFiles === next.onOpenProjectFiles && current.onOpenConversationWindow === next.onOpenConversationWindow && current.selectProjectDirectory === next.selectProjectDirectory && current.onRemoveProject === next.onRemoveProject && current.onRequestDeleteProjectConversations === next.onRequestDeleteProjectConversations && current.onCancelDeleteProjectConversations === next.onCancelDeleteProjectConversations && current.onConfirmDeleteProjectConversations === next.onConfirmDeleteProjectConversations && current.onRequestDeleteConversations === next.onRequestDeleteConversations && current.onCancelDeleteConversations === next.onCancelDeleteConversations && current.onConfirmDeleteConversations === next.onConfirmDeleteConversations && current.onRequestDeleteConversation === next.onRequestDeleteConversation && current.onRequestRenameConversation === next.onRequestRenameConversation && current.onCancelDeleteConversation === next.onCancelDeleteConversation && current.onConfirmDeleteConversation === next.onConfirmDeleteConversation;
+  return current.activeConversationId === next.activeConversationId && current.pendingDeleteConversationId === next.pendingDeleteConversationId && current.pendingDeleteProjectConversations === next.pendingDeleteProjectConversations && current.pendingDeleteConversations === next.pendingDeleteConversations && current.isLoadingConversations === next.isLoadingConversations && current.isDeletingConversation === next.isDeletingConversation && current.isDeletingProjectConversations === next.isDeletingProjectConversations && current.labels === next.labels && current.workspaceUserProjectI18n === next.workspaceUserProjectI18n && current.uiLanguage === next.uiLanguage && current.previewMode === next.previewMode && current.createConversationDisabled === next.createConversationDisabled && current.openclawGateway === next.openclawGateway && current.isCollapsed === next.isCollapsed && current.agentTargets === next.agentTargets && current.agentTargetsLoading === next.agentTargetsLoading && current.conversationFilter === next.conversationFilter && current.sectionAgentTargetFallbackId === next.sectionAgentTargetFallbackId && current.onUpdateConversationFilter === next.onUpdateConversationFilter && current.onSelectConversationFilterTarget === next.onSelectConversationFilterTarget && current.onCreateConversation === next.onCreateConversation && current.onRetryOpenclawGateway === next.onRetryOpenclawGateway && current.onSelectConversation === next.onSelectConversation && current.onToggleConversationPinned === next.onToggleConversationPinned && current.onMarkConversationUnread === next.onMarkConversationUnread && current.onOpenProjectFiles === next.onOpenProjectFiles && current.onOpenConversationWindow === next.onOpenConversationWindow && current.selectProjectDirectory === next.selectProjectDirectory && current.onRemoveProject === next.onRemoveProject && current.onRequestDeleteProjectConversations === next.onRequestDeleteProjectConversations && current.onCancelDeleteProjectConversations === next.onCancelDeleteProjectConversations && current.onConfirmDeleteProjectConversations === next.onConfirmDeleteProjectConversations && current.onRequestDeleteConversations === next.onRequestDeleteConversations && current.onCancelDeleteConversations === next.onCancelDeleteConversations && current.onConfirmDeleteConversations === next.onConfirmDeleteConversations && current.onRequestDeleteConversation === next.onRequestDeleteConversation && current.onRequestRenameConversation === next.onRequestRenameConversation && current.onCancelDeleteConversation === next.onCancelDeleteConversation && current.onConfirmDeleteConversation === next.onConfirmDeleteConversation;
 }
 var AgentGUIConversationRailStorePane = memo3(
   function AgentGUIConversationRailStorePane2({
@@ -30465,11 +30922,11 @@ function agentGUIProviderRailAriaLabel(label, badgeLabel) {
   }
   return `${label}, ${normalizedBadgeLabel}`;
 }
-function agentGUIProviderTargetMatchesConversationFilter(target, filter) {
+function agentGUIAgentTargetMatchesConversationFilter(target, filter) {
   return filter.kind === "agentTarget" && (target.agentTargetId?.trim() ?? "") === filter.agentTargetId;
 }
-function agentGUIProviderRailTargets(providerTargets, providerTargetsLoading) {
-  return providerTargetsLoading ? [] : providerTargets;
+function agentGUIProviderRailTargets(agentTargets, agentTargetsLoading) {
+  return agentTargetsLoading ? [] : agentTargets;
 }
 var AGENT_GUI_PROVIDER_RAIL_DRAG_HYSTERESIS_PX = 8;
 var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
@@ -30477,9 +30934,9 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
   labels,
   previewMode,
   workspaceId,
-  selectedProviderTarget,
-  providerTargets,
-  providerTargetsLoading,
+  selectedAgentTarget,
+  agentTargets,
+  agentTargetsLoading,
   renderProviderRailEmpty,
   providerRailAllPresentation,
   onRequestComposerFocus,
@@ -30522,23 +30979,20 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
     },
     [providerRailOrderStorageKey]
   );
-  const railProviderTargets = useMemo11(
-    () => agentGUIProviderRailTargets(providerTargets, providerTargetsLoading),
-    [providerTargets, providerTargetsLoading]
+  const railAgentTargets = useMemo11(
+    () => agentGUIProviderRailTargets(agentTargets, agentTargetsLoading),
+    [agentTargets, agentTargetsLoading]
   );
   const providerTiles = useMemo11(() => {
-    return applyAgentGUIProviderRailOrder(
-      railProviderTargets,
-      providerRailOrder
-    );
-  }, [providerRailOrder, railProviderTargets]);
+    return applyAgentGUIProviderRailOrder(railAgentTargets, providerRailOrder);
+  }, [providerRailOrder, railAgentTargets]);
   const visibleProviderTiles = providerTiles;
-  const selectedProviderTargetIsPlaceholder = selectedProviderTarget?.disabled === true;
-  const allTileSelected = conversationFilter.kind === "all" && !selectedProviderTargetIsPlaceholder;
+  const selectedAgentTargetIsPlaceholder = selectedAgentTarget?.disabled === true;
+  const allTileSelected = conversationFilter.kind === "all" && !selectedAgentTargetIsPlaceholder;
   const selectAllProviders = useCallback11(() => {
     onUpdateConversationFilter({ kind: "all" });
-    if (selectedProviderTargetIsPlaceholder) {
-      const fallbackTarget = railProviderTargets.find((target) => target.disabled !== true) ?? null;
+    if (selectedAgentTargetIsPlaceholder) {
+      const fallbackTarget = railAgentTargets.find((target) => target.disabled !== true) ?? null;
       if (fallbackTarget) {
         onSelectConversationFilterTarget({
           provider: fallbackTarget.provider,
@@ -30551,8 +31005,8 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
     onSelectConversationFilterTarget,
     onRequestComposerFocus,
     onUpdateConversationFilter,
-    railProviderTargets,
-    selectedProviderTargetIsPlaceholder
+    railAgentTargets,
+    selectedAgentTargetIsPlaceholder
   ]);
   const selectAgentTargetTile = useCallback11(
     (target) => {
@@ -30569,7 +31023,7 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
   }, [setProviderRailDragState]);
   const handleProviderRailDragStart = useCallback11(
     (event, target) => {
-      if (previewMode || providerTargetsLoading) {
+      if (previewMode || agentTargetsLoading) {
         event.preventDefault();
         return;
       }
@@ -30581,11 +31035,11 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
         position: null
       });
     },
-    [previewMode, providerTargetsLoading, setProviderRailDragState]
+    [previewMode, agentTargetsLoading, setProviderRailDragState]
   );
   const handleProviderRailDragOver = useCallback11(
     (event, target) => {
-      if (previewMode || providerTargetsLoading || !dragState) {
+      if (previewMode || agentTargetsLoading || !dragState) {
         return;
       }
       event.preventDefault();
@@ -30613,7 +31067,7 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
         position
       });
     },
-    [dragState, previewMode, providerTargetsLoading, setProviderRailDragState]
+    [dragState, previewMode, agentTargetsLoading, setProviderRailDragState]
   );
   const commitProviderRailDragDrop = useCallback11(
     (event) => {
@@ -30623,7 +31077,7 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
         overTargetId: null,
         position: null
       } : null);
-      if (previewMode || providerTargetsLoading || !activeDragState) {
+      if (previewMode || agentTargetsLoading || !activeDragState) {
         clearProviderRailDragState();
         return;
       }
@@ -30683,14 +31137,14 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
       dragState,
       persistProviderRailOrder,
       previewMode,
-      providerTargetsLoading,
+      agentTargetsLoading,
       visibleProviderTiles
     ]
   );
   const handleProviderRailContainerDragOver = useCallback11(
     (event) => {
       const activeDragState = dragStateRef.current ?? dragState;
-      if (!activeDragState || previewMode || providerTargetsLoading) {
+      if (!activeDragState || previewMode || agentTargetsLoading) {
         return;
       }
       event.preventDefault();
@@ -30729,16 +31183,16 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
         position
       });
     },
-    [dragState, previewMode, providerTargetsLoading, setProviderRailDragState]
+    [dragState, previewMode, agentTargetsLoading, setProviderRailDragState]
   );
-  if (!providerTargetsLoading && visibleProviderTiles.length === 0 && renderProviderRailEmpty) {
+  if (!agentTargetsLoading && visibleProviderTiles.length === 0 && renderProviderRailEmpty) {
     return /* @__PURE__ */ jsx35(
       "div",
       {
         className: AgentGUINode_styles_default.providerRail,
         role: "tablist",
         "aria-label": labels.providerSwitchLabel,
-        "aria-busy": providerTargetsLoading,
+        "aria-busy": agentTargetsLoading,
         "data-empty": "true"
       }
     );
@@ -30749,7 +31203,7 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
       className: "flex min-h-0 w-full flex-col items-center",
       role: "tablist",
       "aria-label": labels.providerSwitchLabel,
-      "aria-busy": providerTargetsLoading,
+      "aria-busy": agentTargetsLoading,
       onDragOver: handleProviderRailContainerDragOver,
       onDrop: commitProviderRailDragDrop,
       children: [
@@ -30778,7 +31232,7 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
           ),
           /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: AgentGUINode_styles_default.providerRailSeparator })
         ] }) : null,
-        providerTargetsLoading ? [0, 1, 2].map((index) => /* @__PURE__ */ jsx35(
+        agentTargetsLoading ? [0, 1, 2].map((index) => /* @__PURE__ */ jsx35(
           "button",
           {
             type: "button",
@@ -30799,7 +31253,7 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
           `provider-target-loading-${index}`
         )) : null,
         visibleProviderTiles.map((target) => {
-          const providerSelected = visibleProviderTiles.length === 1 ? true : target.disabled === true ? selectedProviderTarget?.provider === target.provider && selectedProviderTarget?.targetId === target.targetId : agentGUIProviderTargetMatchesConversationFilter(
+          const providerSelected = visibleProviderTiles.length === 1 ? true : target.disabled === true ? selectedAgentTarget?.provider === target.provider && selectedAgentTarget?.targetId === target.targetId : agentGUIAgentTargetMatchesConversationFilter(
             target,
             conversationFilter
           );
@@ -30827,33 +31281,19 @@ var AgentGUIProviderRail = memo3(function AgentGUIProviderRail2({
               "data-agent-target-id": target.targetId,
               "data-selected": providerSelected ? "true" : "false",
               disabled: previewMode,
-              draggable: !previewMode && !providerTargetsLoading,
+              draggable: !previewMode && !agentTargetsLoading,
               onClick: () => selectAgentTargetTile(target),
               onDragEnd: clearProviderRailDragState,
               onDragOver: (event) => handleProviderRailDragOver(event, target),
               onDragStart: (event) => handleProviderRailDragStart(event, target),
-              children: /* @__PURE__ */ jsxs22("span", { className: AgentGUINode_styles_default.providerRailAvatar, children: [
-                /* @__PURE__ */ jsx35(
-                  AgentGUIProviderIconVisual,
-                  {
-                    ariaHidden: true,
-                    imageClassName: AgentGUINode_styles_default.providerRailAvatarImage,
-                    icon: agentGUIProviderRailIconPresentation(
-                      target.provider,
-                      target.iconUrl
-                    )
-                  }
-                ),
-                target.badge?.iconUrl ? /* @__PURE__ */ jsx35("span", { "aria-hidden": "true", className: AgentGUINode_styles_default.providerRailBadge, children: /* @__PURE__ */ jsx35(
-                  "img",
-                  {
-                    alt: "",
-                    className: AgentGUINode_styles_default.providerRailBadgeImage,
-                    draggable: false,
-                    src: target.badge.iconUrl
-                  }
-                ) }) : null
-              ] })
+              children: /* @__PURE__ */ jsx35(
+                AgentGUIAgentAvatarVisual,
+                {
+                  className: AgentGUINode_styles_default.providerRailAvatar,
+                  imageClassName: AgentGUINode_styles_default.providerRailAvatarImage,
+                  presentation: projectAgentGUIAgentTargetAvatar(target)
+                }
+              )
             },
             `${target.provider}:${target.targetId}`
           );
@@ -33569,7 +34009,7 @@ function resolveAgentGUIRailStatusProvider(input) {
   if (filter.kind !== "agentTarget") {
     return null;
   }
-  const target = input.providerTargets.find(
+  const target = input.agentTargets.find(
     (candidate) => candidate.disabled !== true && (candidate.agentTargetId?.trim() ?? "") === filter.agentTargetId
   );
   return target ? target.provider : null;
@@ -33871,8 +34311,8 @@ var AgentGUINode = memo4(function AgentGUINode2({
     data: state,
     openSessionRequest,
     prefillPromptRequest,
-    providerTargets: internalAgentTargets,
-    providerTargetsLoading: agentsLoading,
+    agentTargets: internalAgentTargets,
+    agentTargetsLoading: agentsLoading,
     providerReadinessGates: internalProviderReadinessGates,
     defaultAgentTargetId,
     previewMode,
@@ -33904,9 +34344,9 @@ var AgentGUINode = memo4(function AgentGUINode2({
   );
   const fallbackAgentTitle = t("sidebar.fallbackAgentLabel");
   const activeProvider = viewModel.activeConversation?.provider ?? state.provider;
-  const activeReadinessProvider = viewModel.activeConversationId !== null ? activeProvider : viewModel.selectedProviderTarget.provider;
-  const selectedProviderTargetLabel = viewModel.selectedProviderTarget?.label ?? resolveAgentGUIProviderDisplayLabel(state.provider, fallbackAgentTitle);
-  const displayProviderLabel = viewModel.activeConversation ? resolveAgentGUIProviderDisplayLabel(activeProvider, fallbackAgentTitle) : selectedProviderTargetLabel;
+  const activeReadinessProvider = viewModel.activeConversationId !== null ? activeProvider : viewModel.selectedAgentTarget.provider;
+  const selectedAgentTargetLabel = viewModel.selectedAgentTarget?.label ?? resolveAgentGUIProviderDisplayLabel(state.provider, fallbackAgentTitle);
+  const displayProviderLabel = viewModel.activeConversation ? resolveAgentGUIProviderDisplayLabel(activeProvider, fallbackAgentTitle) : selectedAgentTargetLabel;
   const activeConversationDockTitle = viewModel.activeConversation ? resolveAgentGUIDockConversationTitle(viewModel.activeConversation) : null;
   useEffect18(() => {
     if (previewMode || !viewModel.activeConversation) {
@@ -34553,9 +34993,9 @@ var AgentGUINode = memo4(function AgentGUINode2({
   const railStatusProvider = useMemo12(
     () => resolveAgentGUIRailStatusProvider({
       conversationFilter: viewModel.conversationFilter,
-      providerTargets: viewModel.providerTargets
+      agentTargets: viewModel.agentTargets
     }),
-    [viewModel.conversationFilter, viewModel.providerTargets]
+    [viewModel.conversationFilter, viewModel.agentTargets]
   );
   const activeAgentProbe = useMemo12(
     () => findWorkspaceAgentProbeForDockProvider(