feat(webui): add guided setup flows

* feat(channels): add guided setup flows

* test(channels): preserve setup config values

* fix(channels): reflect saved setup state

* refactor(channels): simplify setup state metadata

* fix(channels): harden setup lifecycle

* refactor(channels): centralize setup contracts

* fix(channels): route setup actions through webui shim

* fix(channels): adapt settings for compact screens

* fix(models): preserve default preset display

* feat(models): add curated Codex catalog

* fix(webui): stop attached gateway on interrupt

* fix(webui): simplify apps catalog

* docs(webui): clarify apps and runtime features

* feat(settings): add guided capability setup

* fix(webui): harden setup and managed services

* test: keep managed runtime checks portable

* test: scope POSIX runtime coverage

* fix(webui): simplify file settings

* feat(files): bundle document reading

* fix(webui): harden setup request boundaries

* fix(webui): prevent channel setup status squeeze

* fix(settings): group provider compatibility aliases

* refactor(settings): remove redundant setup surfaces

* fix(webui): harden guided setup lifecycle

* fix(webui): preserve channel setup compatibility

webui/src/components/thread/ThreadComposer.tsx

@@ -65,6 +65,7 @@ import {
   type RestoredReadyImage,
 } from "@/hooks/useAttachedImages";
 import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
+import { useLogoFallback } from "@/hooks/useLogoFallback";
 import type { SendImage, SendOptions } from "@/hooks/useNanobotStream";
 import { useVoiceRecorder, type VoiceRecorderErrorKey } from "@/hooks/useVoiceRecorder";
 import type {
@@ -2260,15 +2261,12 @@ function ComposerModelBadge({
 }) {
   const inferredProvider = needsSetup ? null : provider || inferProviderFromModelName(label);
   const brand = providerBrand(inferredProvider);
-  const [logoIndex, setLogoIndex] = useState(0);
-  const logoUrl = brand?.logoUrls[logoIndex];
+  const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(brand?.logoUrls);
   const showLogo = !!logoUrl;
   const title = providerLabel ? `${label} · ${providerLabel}` : label;
   const interactive = Boolean(onClick);
   const Container = interactive ? "button" : "span";
 
-  useEffect(() => setLogoIndex(0), [inferredProvider]);
-
   return (
     <Container
       title={title}
@@ -2305,8 +2303,11 @@ function ComposerModelBadge({
           <img
             src={logoUrl}
             alt=""
+            decoding="async"
+            loading="lazy"
             className={cn("object-contain", isHero ? "h-3 w-3" : "h-3.5 w-3.5")}
-            onError={() => setLogoIndex((index) => index + 1)}
+            onLoad={onLogoLoad}
+            onError={onLogoError}
           />
         ) : brand ? (
           <span
@@ -2502,15 +2503,12 @@ function MentionCandidateLogo({
   candidate: MentionCandidate;
   selected: boolean;
 }) {
-  const [logoIndex, setLogoIndex] = useState(0);
   const color = (candidate.kind === "cli"
     ? candidate.app.brand_color
     : candidate.preset.brand_color) || "hsl(var(--primary))";
   const rawLogoUrl = candidate.kind === "cli" ? candidate.app.logo_url : candidate.preset.logo_url;
   const logoUrls = useMemo(() => logoFallbackUrls(rawLogoUrl), [rawLogoUrl]);
-  const logoUrl = logoUrls[logoIndex];
-
-  useEffect(() => setLogoIndex(0), [rawLogoUrl]);
+  const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(logoUrls);
 
   if (logoUrl) {
     return (
@@ -2523,8 +2521,11 @@ function MentionCandidateLogo({
         <img
           src={logoUrl}
           alt=""
+          decoding="async"
+          loading="lazy"
           className="h-5 w-5 object-contain"
-          onError={() => setLogoIndex((index) => index + 1)}
+          onLoad={onLogoLoad}
+          onError={onLogoError}
         />
       </span>
     );