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/CliAppMentionText.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 
+import { useLogoFallback } from "@/hooks/useLogoFallback";
 import { logoFallbackUrls } from "@/lib/provider-brand";
 import type { CliAppInfo, McpPresetInfo } from "@/lib/types";
 import { cn } from "@/lib/utils";
@@ -137,16 +138,13 @@ export function CliAppMentionToken({
   variant: "composer" | "message";
   isHero?: boolean;
 }) {
-  const [logoIndex, setLogoIndex] = useState(0);
   const color = app.brand_color || "hsl(var(--primary))";
   const mentionName = label.startsWith("@") ? label.slice(1) : label;
   const logoUrls = useMemo(() => logoFallbackUrls(app.logo_url), [app.logo_url]);
-  const logoUrl = logoUrls[logoIndex];
+  const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(logoUrls);
   const showLogo = Boolean(logoUrl);
   const testIdPrefix = variant === "composer" ? "composer" : "message";
 
-  useEffect(() => setLogoIndex(0), [app.logo_url]);
-
   return (
     <span
       data-testid={`${testIdPrefix}-cli-mention-${app.name}`}
@@ -175,7 +173,10 @@ export function CliAppMentionToken({
               src={logoUrl ?? ""}
               alt=""
               className="h-full w-full object-contain"
-              onError={() => setLogoIndex((index) => index + 1)}
+              decoding="async"
+              loading="lazy"
+              onLoad={onLogoLoad}
+              onError={onLogoError}
             />
           </span>
         ) : null}
@@ -196,16 +197,13 @@ export function McpPresetMentionToken({
   variant: "composer" | "message";
   isHero?: boolean;
 }) {
-  const [logoIndex, setLogoIndex] = useState(0);
   const color = preset.brand_color || "hsl(var(--primary))";
   const mentionName = label.startsWith("@") ? label.slice(1) : label;
   const logoUrls = useMemo(() => logoFallbackUrls(preset.logo_url), [preset.logo_url]);
-  const logoUrl = logoUrls[logoIndex];
+  const { logoUrl, onLogoError, onLogoLoad } = useLogoFallback(logoUrls);
   const showLogo = Boolean(logoUrl);
   const testIdPrefix = variant === "composer" ? "composer" : "message";
 
-  useEffect(() => setLogoIndex(0), [preset.logo_url]);
-
   return (
     <span
       data-testid={`${testIdPrefix}-mcp-mention-${preset.name}`}
@@ -234,7 +232,10 @@ export function McpPresetMentionToken({
               src={logoUrl ?? ""}
               alt=""
               className="h-full w-full object-contain"
-              onError={() => setLogoIndex((index) => index + 1)}
+              decoding="async"
+              loading="lazy"
+              onLoad={onLogoLoad}
+              onError={onLogoError}
             />
           </span>
         ) : null}