feat(mcp): add preset setup and capability mentions

webui/src/components/thread/ThreadShell.tsx

@@ -19,13 +19,19 @@ import { StreamErrorNotice } from "@/components/thread/StreamErrorNotice";
 import { ThreadViewport } from "@/components/thread/ThreadViewport";
 import { useNanobotStream, type SendImage, type SendOptions } from "@/hooks/useNanobotStream";
 import { useSessionHistory } from "@/hooks/useSessions";
-import { fetchCliApps, listSlashCommands } from "@/lib/api";
+import { fetchCliApps, fetchMcpPresets, fetchSettings, listSlashCommands } from "@/lib/api";
 import {
   CLI_APPS_CHANGED_EVENT,
   installedCliAppsFromPayload,
   isCliAppsPayload,
 } from "@/lib/cli-app-events";
-import type { ChatSummary, CliAppInfo, SlashCommand, UIMessage } from "@/lib/types";
+import {
+  MCP_PRESETS_CHANGED_EVENT,
+  installedMcpPresetsFromPayload,
+  isMcpPresetsPayload,
+} from "@/lib/mcp-preset-events";
+import { inferProviderFromModelName, providerDisplayLabel } from "@/lib/provider-brand";
+import type { ChatSummary, CliAppInfo, McpPresetInfo, SettingsPayload, SlashCommand, UIMessage } from "@/lib/types";
 import { normalizeLegacyLongTaskMessages } from "@/lib/thread-display-compat";
 import { scrubSubagentUiMessages } from "@/lib/subagent-channel-display";
 import { useClient } from "@/providers/ClientProvider";
@@ -55,6 +61,41 @@ function toModelBadgeLabel(modelName: string | null): string | null {
   return leaf || trimmed;
 }
 
+interface ModelBadgeInfo {
+  label: string | null;
+  provider: string | null;
+  providerLabel: string | null;
+}
+
+function activeModelPreset(settings: SettingsPayload | null): SettingsPayload["model_presets"][number] | null {
+  if (!settings) return null;
+  const configured = settings.agent.model_preset || "default";
+  return (
+    settings.model_presets.find((preset) => preset.name === configured)
+    ?? settings.model_presets.find((preset) => preset.active)
+    ?? null
+  );
+}
+
+function resolvedModelProvider(settings: SettingsPayload | null, modelName: string | null): string | null {
+  const preset = activeModelPreset(settings);
+  const rawProvider = preset?.provider || settings?.agent.provider || null;
+  if (rawProvider === "auto") {
+    return settings?.agent.resolved_provider || inferProviderFromModelName(modelName) || null;
+  }
+  return rawProvider || inferProviderFromModelName(modelName);
+}
+
+function toModelBadgeInfo(modelName: string | null, settings: SettingsPayload | null): ModelBadgeInfo {
+  const label = toModelBadgeLabel(modelName || settings?.agent.model || null);
+  const provider = resolvedModelProvider(settings, modelName || settings?.agent.model || null);
+  return {
+    label,
+    provider,
+    providerLabel: provider ? providerDisplayLabel(settings?.providers ?? [], provider) : null,
+  };
+}
+
 const QUICK_ACTION_KEYS = [
   { key: "plan", icon: LayoutGrid, tone: "text-[#f25b8f]" },
   { key: "analyze", icon: BarChart3, tone: "text-[#4f9de8]" },
@@ -103,6 +144,8 @@ export function ThreadShell({
   const [booting, setBooting] = useState(false);
   const [slashCommands, setSlashCommands] = useState<SlashCommand[]>([]);
   const [cliApps, setCliApps] = useState<CliAppInfo[]>([]);
+  const [mcpPresets, setMcpPresets] = useState<McpPresetInfo[]>([]);
+  const [settings, setSettings] = useState<SettingsPayload | null>(null);
   const [heroImageMode, setHeroImageMode] = useState(false);
   const [scrollToBottomSignal, setScrollToBottomSignal] = useState(0);
   const pendingFirstRef = useRef<PendingFirstMessage | null>(null);
@@ -141,6 +184,28 @@ export function ThreadShell({
   const displayMessages = useMemo(() => projectWebuiThreadMessages(messages), [messages]);
 
   const showHeroComposer = messages.length === 0 && !loading;
+  const modelBadge = useMemo(
+    () => toModelBadgeInfo(modelName, settings),
+    [modelName, settings],
+  );
+
+  const refreshModelSettings = useCallback(async () => {
+    try {
+      setSettings(await fetchSettings(token));
+    } catch {
+      setSettings(null);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    void refreshModelSettings();
+  }, [refreshModelSettings]);
+
+  useEffect(() => {
+    return client.onRuntimeModelUpdate(() => {
+      void refreshModelSettings();
+    });
+  }, [client, refreshModelSettings]);
 
   useEffect(() => {
     if (!chatId || loading) return;
@@ -262,6 +327,15 @@ export function ThreadShell({
     }
   }, [token]);
 
+  const refreshMcpPresets = useCallback(async () => {
+    try {
+      const payload = await fetchMcpPresets(token);
+      setMcpPresets(installedMcpPresetsFromPayload(payload));
+    } catch {
+      setMcpPresets([]);
+    }
+  }, [token]);
+
   useEffect(() => {
     let cancelled = false;
     const load = async () => {
@@ -297,6 +371,41 @@ export function ThreadShell({
     };
   }, [refreshCliApps, token]);
 
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        const payload = await fetchMcpPresets(token);
+        if (!cancelled) setMcpPresets(installedMcpPresetsFromPayload(payload));
+      } catch {
+        if (!cancelled) setMcpPresets([]);
+      }
+    };
+    load();
+
+    const refreshOnFocus = () => {
+      if (document.visibilityState === "hidden") return;
+      void refreshMcpPresets();
+    };
+    window.addEventListener("focus", refreshOnFocus);
+    document.addEventListener("visibilitychange", refreshOnFocus);
+    const refreshOnMcpPresetsChanged = (event: Event) => {
+      const payload = (event as CustomEvent<unknown>).detail;
+      if (isMcpPresetsPayload(payload)) {
+        setMcpPresets(installedMcpPresetsFromPayload(payload));
+        return;
+      }
+      void refreshMcpPresets();
+    };
+    window.addEventListener(MCP_PRESETS_CHANGED_EVENT, refreshOnMcpPresetsChanged);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("focus", refreshOnFocus);
+      document.removeEventListener("visibilitychange", refreshOnFocus);
+      window.removeEventListener(MCP_PRESETS_CHANGED_EVENT, refreshOnMcpPresetsChanged);
+    };
+  }, [refreshMcpPresets, token]);
+
   const handleWelcomeSend = useCallback(
     async (content: string, images?: SendImage[], options?: SendOptions) => {
       if (booting) return;
@@ -379,10 +488,13 @@ export function ThreadShell({
               ? t("thread.composer.placeholderHero")
               : t("thread.composer.placeholderThread")
           }
-          modelLabel={toModelBadgeLabel(modelName)}
+          modelLabel={modelBadge.label}
+          modelProvider={modelBadge.provider}
+          modelProviderLabel={modelBadge.providerLabel}
           variant={showHeroComposer ? "hero" : "thread"}
           slashCommands={slashCommands}
           cliApps={cliApps}
+          mcpPresets={mcpPresets}
           imageMode={showHeroComposer ? heroImageMode : undefined}
           onImageModeChange={showHeroComposer ? setHeroImageMode : undefined}
           onStop={stop}
@@ -399,10 +511,13 @@ export function ThreadShell({
               ? t("thread.composer.placeholderOpening")
               : t("thread.composer.placeholderHero")
           }
-          modelLabel={toModelBadgeLabel(modelName)}
+          modelLabel={modelBadge.label}
+          modelProvider={modelBadge.provider}
+          modelProviderLabel={modelBadge.providerLabel}
           variant="hero"
           slashCommands={slashCommands}
           cliApps={cliApps}
+          mcpPresets={mcpPresets}
           imageMode={heroImageMode}
           onImageModeChange={setHeroImageMode}
           runStartedAt={runStartedAt}
@@ -444,6 +559,7 @@ export function ThreadShell({
         conversationKey={historyKey}
         showScrollToBottomButton={!!session}
         cliApps={cliApps}
+        mcpPresets={mcpPresets}
       />
     </section>
   );