feat(mcp): add preset setup and capability mentions

2026-05-24 19:43:20 +08:00
parent 8be258212e
commit 704ac558f6
54 changed files with 8425 additions and 708 deletions
@@ -1,12 +1,17 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";

-import type { CliAppInfo } from "@/lib/types";
+import { logoFallbackUrls } from "@/lib/provider-brand";
+import type { CliAppInfo, McpPresetInfo } from "@/lib/types";
 import { cn } from "@/lib/utils";

 export type CliAppMentionSegment =
  | { kind: "text"; text: string }
  | { kind: "cli"; text: string; app: CliAppInfo };

+export type CapabilityMentionSegment =
+  | CliAppMentionSegment
+  | { kind: "mcp"; text: string; preset: McpPresetInfo };
+
 export function cliAppInitials(app: CliAppInfo): string {
  const value = app.display_name || app.name;
  return (
@@ -19,6 +24,18 @@ export function cliAppInitials(app: CliAppInfo): string {
  );
 }

+export function mcpPresetInitials(preset: Pick<McpPresetInfo, "name" | "display_name">): string {
+  const value = preset.display_name || preset.name;
+  return (
+    value
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || preset.name.slice(0, 2).toUpperCase()
+  );
+}
+
 export function splitCliAppMentionSegments(
  value: string,
  cliApps: CliAppInfo[],
@@ -55,22 +72,76 @@ export function splitCliAppMentionSegments(
  return segments.length ? segments : [{ kind: "text", text: value }];
 }

+export function splitCapabilityMentionSegments(
+  value: string,
+  cliApps: CliAppInfo[],
+  mcpPresets: McpPresetInfo[] = [],
+): CapabilityMentionSegment[] {
+  if (!value || (cliApps.length === 0 && mcpPresets.length === 0)) {
+    return value ? [{ kind: "text", text: value }] : [];
+  }
+  const cliAppsByName = new Map(
+    cliApps
+      .filter((app) => app.installed)
+      .map((app) => [app.name.toLowerCase(), app]),
+  );
+  const mcpPresetsByName = new Map(
+    mcpPresets
+      .filter((preset) => preset.installed && preset.configured)
+      .map((preset) => [preset.name.toLowerCase(), preset]),
+  );
+  if (cliAppsByName.size === 0 && mcpPresetsByName.size === 0) {
+    return [{ kind: "text", text: value }];
+  }
+
+  const segments: CapabilityMentionSegment[] = [];
+  const mentionRe = /(^|[\s([{])@([a-z0-9_-]+)\b/gi;
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+  while ((match = mentionRe.exec(value)) !== null) {
+    const prefix = match[1] ?? "";
+    const name = match[2] ?? "";
+    const key = name.toLowerCase();
+    const app = cliAppsByName.get(key);
+    const preset = app ? null : mcpPresetsByName.get(key);
+    if (!app && !preset) continue;
+
+    const mentionStart = match.index + prefix.length;
+    const mentionEnd = mentionStart + name.length + 1;
+    if (mentionStart > cursor) {
+      segments.push({ kind: "text", text: value.slice(cursor, mentionStart) });
+    }
+    if (app) {
+      segments.push({ kind: "cli", text: value.slice(mentionStart, mentionEnd), app });
+    } else if (preset) {
+      segments.push({ kind: "mcp", text: value.slice(mentionStart, mentionEnd), preset });
+    }
+    cursor = mentionEnd;
+  }
+  if (cursor < value.length) {
+    segments.push({ kind: "text", text: value.slice(cursor) });
+  }
+  return segments.length ? segments : [{ kind: "text", text: value }];
+}
+
 export function CliAppMentionText({
  text,
  cliApps,
+  mcpPresets = [],
 }: {
  text: string;
  cliApps: CliAppInfo[];
+  mcpPresets?: McpPresetInfo[];
 }) {
-  const segments = splitCliAppMentionSegments(text, cliApps);
-  if (!segments.some((segment) => segment.kind === "cli")) return <>{text}</>;
+  const segments = splitCapabilityMentionSegments(text, cliApps, mcpPresets);
+  if (!segments.some((segment) => segment.kind === "cli" || segment.kind === "mcp")) return <>{text}</>;
  return (
    <>
      {segments.map((segment, index) => {
        if (segment.kind === "text") {
          return <span key={`text-${index}`}>{segment.text}</span>;
        }
-        return (
+        if (segment.kind === "cli") return (
          <CliAppMentionToken
            key={`cli-${segment.app.name}-${index}`}
            app={segment.app}
@@ -78,6 +149,14 @@ export function CliAppMentionText({
            variant="message"
          />
        );
+        return (
+          <McpPresetMentionToken
+            key={`mcp-${segment.preset.name}-${index}`}
+            preset={segment.preset}
+            label={segment.text}
+            variant="message"
+          />
+        );
      })}
    </>
  );
@@ -94,15 +173,20 @@ export function CliAppMentionToken({
  variant: "composer" | "message";
  isHero?: boolean;
 }) {
-  const [failed, setFailed] = useState(false);
+  const [logoIndex, setLogoIndex] = useState(0);
  const color = app.brand_color || "hsl(var(--primary))";
  const mentionName = label.startsWith("@") ? label.slice(1) : label;
-  const showLogo = Boolean(app.logo_url) && !failed;
+  const logoUrls = useMemo(() => logoFallbackUrls(app.logo_url), [app.logo_url]);
+  const logoUrl = logoUrls[logoIndex];
+  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}`}
+      title={`CLI app: ${app.display_name || app.name}`}
      className="relative inline transition-[color,text-shadow] duration-150"
      style={{
        color,
@@ -124,10 +208,69 @@ export function CliAppMentionToken({
            )}
          >
            <img
-              src={app.logo_url ?? ""}
+              src={logoUrl ?? ""}
              alt=""
              className="h-full w-full object-contain"
-              onError={() => setFailed(true)}
+              onError={() => setLogoIndex((index) => index + 1)}
+            />
+          </span>
+        ) : null}
+      </span>
+      {mentionName}
+    </span>
+  );
+}
+
+export function McpPresetMentionToken({
+  preset,
+  label,
+  variant,
+  isHero = false,
+}: {
+  preset: McpPresetInfo;
+  label: string;
+  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 showLogo = Boolean(logoUrl);
+  const testIdPrefix = variant === "composer" ? "composer" : "message";
+
+  useEffect(() => setLogoIndex(0), [preset.logo_url]);
+
+  return (
+    <span
+      data-testid={`${testIdPrefix}-mcp-mention-${preset.name}`}
+      title={`MCP server: ${preset.display_name || preset.name}`}
+      className="relative inline transition-[color,text-shadow] duration-150"
+      style={{
+        color,
+        textShadow: `0 0 10px ${alphaColor(color, 24)}`,
+      }}
+    >
+      <span
+        className={cn("relative inline-block", showLogo && "text-transparent")}
+        style={{ lineHeight: "inherit" }}
+      >
+        @
+        {showLogo ? (
+          <span
+            data-testid={`${testIdPrefix}-mcp-mention-logo-${preset.name}`}
+            className={cn(
+              "absolute left-1/2 top-1/2 grid place-items-center overflow-hidden rounded-[3px]",
+              "-translate-x-1/2 -translate-y-1/2",
+              isHero ? "h-[0.74em] w-[0.74em]" : "h-[0.72em] w-[0.72em]",
+            )}
+          >
+            <img
+              src={logoUrl ?? ""}
+              alt=""
+              className="h-full w-full object-contain"
+              onError={() => setLogoIndex((index) => index + 1)}
            />
          </span>
        ) : null}
@@ -14,13 +14,22 @@ import { ImageLightbox } from "@/components/ImageLightbox";
 import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
 import { cn } from "@/lib/utils";
 import { formatTurnLatency } from "@/lib/format";
-import type { CliAppInfo, UICliAppAttachment, UIImage, UIMediaAttachment, UIMessage } from "@/lib/types";
+import type {
+  CliAppInfo,
+  McpPresetInfo,
+  UICliAppAttachment,
+  UIMcpPresetAttachment,
+  UIImage,
+  UIMediaAttachment,
+  UIMessage,
+} from "@/lib/types";

 interface MessageBubbleProps {
  message: UIMessage;
  /** When false, hide the assistant reply copy button (mid-turn text before more agent activity). Default true. */
  showAssistantCopyAction?: boolean;
  cliApps?: CliAppInfo[];
+  mcpPresets?: McpPresetInfo[];
 }

 /**
@@ -36,6 +45,7 @@ export function MessageBubble({
  message,
  showAssistantCopyAction = true,
  cliApps = [],
+  mcpPresets = [],
 }: MessageBubbleProps) {
  const { t } = useTranslation();
  const [copied, setCopied] = useState(false);
@@ -45,6 +55,10 @@ export function MessageBubble({
    () => mergeCliMentionApps(cliApps, message.cliApps),
    [cliApps, message.cliApps],
  );
+  const mentionMcpPresets = useMemo(
+    () => mergeMcpMentionPresets(mcpPresets, message.mcpPresets),
+    [mcpPresets, message.mcpPresets],
+  );

  useEffect(() => {
    return () => {
@@ -96,7 +110,11 @@ export function MessageBubble({
              "text-left text-[16px]/[1.75] whitespace-pre-wrap break-words",
            )}
          >
-            <CliAppMentionText text={message.content} cliApps={mentionCliApps} />
+            <CliAppMentionText
+              text={message.content}
+              cliApps={mentionCliApps}
+              mcpPresets={mentionMcpPresets}
+            />
          </p>
        ) : null}
      </div>
@@ -166,6 +184,39 @@ export function MessageBubble({
  );
 }

+function mergeMcpMentionPresets(
+  presets: McpPresetInfo[],
+  attachments: UIMcpPresetAttachment[] | undefined,
+): McpPresetInfo[] {
+  if (!attachments?.length) return presets;
+  const byName = new Map(presets.map((preset) => [preset.name.toLowerCase(), preset]));
+  for (const attachment of attachments) {
+    const name = attachment.name?.trim();
+    if (!name) continue;
+    const existing = byName.get(name.toLowerCase());
+    byName.set(name.toLowerCase(), {
+      name,
+      display_name: attachment.display_name || existing?.display_name || name,
+      category: attachment.category || existing?.category || "mcp",
+      description: existing?.description || "",
+      docs_url: existing?.docs_url || "",
+      transport: attachment.transport || existing?.transport || "mcp",
+      requires: existing?.requires || "",
+      note: existing?.note || "",
+      install_supported: existing?.install_supported ?? true,
+      installed: true,
+      configured: attachment.configured ?? existing?.configured ?? true,
+      available: existing?.available ?? true,
+      status: attachment.status || existing?.status || "configured",
+      logo_url: attachment.logo_url ?? existing?.logo_url ?? null,
+      brand_color: attachment.brand_color ?? existing?.brand_color ?? null,
+      required_fields: existing?.required_fields || [],
+      connection_summary: existing?.connection_summary || "",
+    });
+  }
+  return Array.from(byName.values());
+}
+
 function mergeCliMentionApps(
  cliApps: CliAppInfo[],
  attachments: UICliAppAttachment[] | undefined,
@@ -33,6 +33,7 @@ export function SessionSearchDialog({
 }: SessionSearchDialogProps) {
  const { t } = useTranslation();
  const inputRef = useRef<HTMLInputElement>(null);
+  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
  const [query, setQuery] = useState("");
  const [highlightedIndex, setHighlightedIndex] = useState(0);

@@ -46,7 +47,6 @@ export function SessionSearchDialog({
    );
  }, [normalizedQuery, open, sessions, titleOverrides]);
  const itemCount = sessionResults.length;
-  const shortcutLabel = useMemo(getSearchShortcutLabel, []);

  useEffect(() => {
    if (!open) return;
@@ -65,6 +65,18 @@ export function SessionSearchDialog({
    );
  }, [itemCount]);

+  useEffect(() => {
+    itemRefs.current = itemRefs.current.slice(0, itemCount);
+  }, [itemCount]);
+
+  useEffect(() => {
+    if (!open) return;
+    itemRefs.current[highlightedIndex]?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+    });
+  }, [highlightedIndex, open]);
+
  const handleSelect = (key: string) => {
    onOpenChange(false);
    onSelect(key);
@@ -107,18 +119,18 @@ export function SessionSearchDialog({
      <DialogContent
        showCloseButton={false}
        className={cn(
-          "max-h-[min(34rem,calc(100vh-2rem))] w-[calc(100vw-2rem)] max-w-[42rem] gap-0 overflow-hidden p-0",
-          "rounded-2xl border border-border/70 bg-popover/95 text-popover-foreground shadow-2xl backdrop-blur-xl",
-          "sm:rounded-2xl",
+          "flex max-h-[min(40rem,calc(100vh-2rem))] w-[calc(100vw-2rem)] max-w-[42rem] flex-col gap-0 overflow-hidden p-0",
+          "rounded-[22px] border border-border bg-background text-foreground shadow-[0_22px_70px_rgba(0,0,0,0.22)]",
+          "dark:border-white/14 dark:bg-[#2b2b2b] dark:shadow-[0_26px_90px_rgba(0,0,0,0.44)] sm:rounded-[22px]",
        )}
      >
        <DialogTitle className="sr-only">{t("sidebar.searchAria")}</DialogTitle>
        <DialogDescription className="sr-only">
          {t("sidebar.searchPlaceholder")}
        </DialogDescription>
-        <div className="flex h-14 items-center gap-3 border-b border-border/60 px-5">
+        <div className="flex h-[62px] shrink-0 items-center gap-3 border-b border-border px-[18px]">
          <Search
-            className="h-4 w-4 shrink-0 text-muted-foreground"
+            className="h-[18px] w-[18px] shrink-0 text-muted-foreground"
            aria-hidden
          />
          <input
@@ -128,16 +140,16 @@ export function SessionSearchDialog({
            onKeyDown={handleKeyDown}
            placeholder={t("sidebar.searchPlaceholder")}
            aria-label={t("sidebar.searchAria")}
-            className="h-full min-w-0 flex-1 bg-transparent text-[15px] font-medium text-foreground outline-none placeholder:text-muted-foreground/75"
+            className="h-full min-w-0 flex-1 bg-transparent text-[19px] font-normal leading-none text-foreground outline-none placeholder:text-muted-foreground"
          />
-          <kbd className="hidden h-6 shrink-0 items-center rounded-md border border-border/70 bg-muted/60 px-2 text-[11px] font-medium text-muted-foreground sm:inline-flex">
-            {shortcutLabel}
-          </kbd>
        </div>

-        <div className="min-h-0 overflow-y-auto overscroll-contain p-2">
+        <div
+          data-testid="session-search-scroll"
+          className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-2.5 scrollbar-thin scrollbar-track-transparent"
+        >
          <section>
-            <div className="px-2 pb-1.5 pt-1 text-[12px] font-medium text-muted-foreground/70">
+            <div className="px-2.5 pb-1.5 pt-1 text-[12px] font-medium text-muted-foreground">
              {sectionLabel}
            </div>

@@ -150,7 +162,7 @@ export function SessionSearchDialog({
                {emptyLabel}
              </div>
            ) : (
-              <ul className="space-y-1">
+              <ul className="space-y-0.5">
                {sessionResults.map((session, index) => {
                  const title = titleOverrides[session.key]?.trim() ||
                    session.title?.trim() ||
@@ -164,15 +176,18 @@ export function SessionSearchDialog({
                  return (
                    <li key={session.key}>
                      <button
+                        ref={(node) => {
+                          itemRefs.current[index] = node;
+                        }}
                        type="button"
                        onClick={() => handleSelect(session.key)}
                        onMouseEnter={() => setHighlightedIndex(index)}
                        aria-current={active ? "page" : undefined}
                        className={cn(
-                          "flex min-h-12 w-full min-w-0 rounded-xl px-3 py-2.5 text-left transition-colors",
+                          "grid min-h-[54px] w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[11px] px-3 py-2 text-left transition-colors",
                          highlighted
-                            ? "bg-accent text-accent-foreground"
-                            : "text-popover-foreground hover:bg-accent/75 hover:text-accent-foreground",
+                            ? "bg-muted text-foreground"
+                            : "text-foreground hover:bg-muted",
                        )}
                      >
                        <span className="min-w-0 flex-1">
@@ -181,17 +196,17 @@ export function SessionSearchDialog({
                          </span>
                          {showPreview ? (
                            <span
-                              className={cn(
-                                "block truncate text-[12px] leading-4",
-                                highlighted
-                                  ? "text-accent-foreground/70"
-                                  : "text-muted-foreground",
-                              )}
+                              className="block truncate text-[12px] leading-4 text-muted-foreground"
                            >
                              {preview}
                            </span>
                          ) : null}
                        </span>
+                        {active ? (
+                          <span className="shrink-0 rounded-full bg-muted-foreground/10 px-2 py-0.5 text-[11px] font-medium text-muted-foreground">
+                            {t("common.current", { defaultValue: "Current" })}
+                          </span>
+                        ) : null}
                      </button>
                    </li>
                  );
@@ -221,13 +236,3 @@ function sessionMatchesTerms(

  return terms.every((term) => haystack.includes(term));
 }
-
-function getSearchShortcutLabel() {
-  if (typeof navigator === "undefined") return "Ctrl K";
-  const platform = navigator.platform.toLowerCase();
-  const apple =
-    platform.includes("mac") ||
-    platform.includes("iphone") ||
-    platform.includes("ipad");
-  return apple ? "⌘K" : "Ctrl K";
-}
@@ -11,14 +11,15 @@ import {
 import { MarkdownText, preloadMarkdownText } from "@/components/MarkdownText";
 import {
  CliAppMentionToken,
+  McpPresetMentionToken,
  cliAppInitials,
-  splitCliAppMentionSegments,
-  type CliAppMentionSegment,
+  mcpPresetInitials,
+  splitCapabilityMentionSegments,
+  type CapabilityMentionSegment,
 } from "@/components/CliAppMentionText";
 import {
  Activity,
  ArrowUp,
-  AtSign,
  BookOpen,
  Check,
  ChevronDown,
@@ -48,7 +49,19 @@ import {
 } from "@/hooks/useAttachedImages";
 import { useClipboardAndDrop } from "@/hooks/useClipboardAndDrop";
 import type { SendImage, SendOptions } from "@/hooks/useNanobotStream";
-import type { CliAppInfo, GoalStateWsPayload, OutboundCliAppMention, SlashCommand } from "@/lib/types";
+import type {
+  CliAppInfo,
+  GoalStateWsPayload,
+  McpPresetInfo,
+  OutboundCliAppMention,
+  OutboundMcpPresetMention,
+  SlashCommand,
+} from "@/lib/types";
+import {
+  inferProviderFromModelName,
+  logoFallbackUrls,
+  providerBrand,
+} from "@/lib/provider-brand";
 import { cn } from "@/lib/utils";

 /** ``<input accept>``: aligned with the server's MIME whitelist. SVG is
@@ -67,9 +80,12 @@ interface ThreadComposerProps {
  placeholder?: string;
  isStreaming?: boolean;
  modelLabel?: string | null;
+  modelProvider?: string | null;
+  modelProviderLabel?: string | null;
  variant?: "thread" | "hero";
  slashCommands?: SlashCommand[];
  cliApps?: CliAppInfo[];
+  mcpPresets?: McpPresetInfo[];
  imageMode?: boolean;
  onImageModeChange?: (enabled: boolean) => void;
  onStop?: () => void;
@@ -97,7 +113,7 @@ const IMAGE_ASPECT_RATIOS: ImageAspectRatio[] = ["auto", "1:1", "3:4", "9:16", "
 const SLASH_PALETTE_GAP_PX = 8;
 const SLASH_PALETTE_MAX_HEIGHT_PX = 288;
 const SLASH_PALETTE_MIN_HEIGHT_PX = 144;
-const SLASH_PALETTE_CHROME_PX = 64;
+const SLASH_PALETTE_CHROME_PX = 40;

 type SlashPalettePlacement = "above" | "below";

@@ -112,6 +128,10 @@ interface CliAppMentionQuery {
  end: number;
 }

+type MentionCandidate =
+  | { kind: "cli"; name: string; app: CliAppInfo }
+  | { kind: "mcp"; name: string; preset: McpPresetInfo };
+
 function slashCommandI18nKey(command: string): string {
  return command.replace(/^\//, "").replace(/-/g, "_");
 }
@@ -192,6 +212,19 @@ function cliAppMentionPayload(app: CliAppInfo): OutboundCliAppMention {
  };
 }

+function mcpPresetMentionPayload(preset: McpPresetInfo): OutboundMcpPresetMention {
+  return {
+    name: preset.name,
+    display_name: preset.display_name,
+    category: preset.category,
+    transport: preset.transport,
+    status: preset.status,
+    configured: preset.configured,
+    logo_url: preset.logo_url ?? null,
+    brand_color: preset.brand_color ?? null,
+  };
+}
+
 function RunElapsedStrip({
  startedAt,
  goalState,
@@ -394,9 +427,12 @@ export function ThreadComposer({
  placeholder,
  isStreaming = false,
  modelLabel = null,
+  modelProvider = null,
+  modelProviderLabel = null,
  variant = "thread",
  slashCommands = [],
  cliApps = [],
+  mcpPresets = [],
  imageMode: controlledImageMode,
  onImageModeChange,
  onStop,
@@ -534,9 +570,9 @@ export function ThreadComposer({
    };
  }, [cliAppMenuDismissed, cursorPosition, disabled, value]);

-  const filteredCliApps = useMemo(() => {
+  const filteredMentionCandidates = useMemo<MentionCandidate[]>(() => {
    if (!cliAppMention) return [];
-    return cliApps
+    const cliCandidates: MentionCandidate[] = cliApps
      .filter((app) => app.installed)
      .filter((app) => {
        const haystack = [
@@ -548,16 +584,32 @@ export function ThreadComposer({
        ].join(" ").toLowerCase();
        return haystack.includes(cliAppMention.query);
      })
-      .slice(0, 8);
-  }, [cliAppMention, cliApps]);
+      .map((app) => ({ kind: "cli", name: app.name, app }));
+    const mcpCandidates: MentionCandidate[] = mcpPresets
+      .filter((preset) => preset.installed && preset.configured)
+      .filter((preset) => {
+        const haystack = [
+          preset.name,
+          preset.display_name,
+          preset.category,
+          preset.description,
+          preset.transport,
+        ].join(" ").toLowerCase();
+        return haystack.includes(cliAppMention.query);
+      })
+      .map((preset) => ({ kind: "mcp", name: preset.name, preset }));
+    return [...cliCandidates, ...mcpCandidates].slice(0, 8);
+  }, [cliAppMention, cliApps, mcpPresets]);

-  const showCliAppMenu = filteredCliApps.length > 0;
+  const showCliAppMenu = filteredMentionCandidates.length > 0;
  const showAnyPalette = showSlashMenu || showCliAppMenu;
  const mentionSegments = useMemo(
-    () => splitCliAppMentionSegments(value, cliApps),
-    [cliApps, value],
+    () => splitCapabilityMentionSegments(value, cliApps, mcpPresets),
+    [cliApps, mcpPresets, value],
+  );
+  const hasMentionDecorations = mentionSegments.some(
+    (segment) => segment.kind === "cli" || segment.kind === "mcp",
  );
-  const hasCliMentionDecorations = mentionSegments.some((segment) => segment.kind === "cli");
  const activeCliMentionApps = useMemo(() => {
    const seen = new Set<string>();
    return mentionSegments.flatMap((segment) => {
@@ -566,6 +618,14 @@ export function ThreadComposer({
      return [segment.app];
    });
  }, [mentionSegments]);
+  const activeMcpPresetMentions = useMemo(() => {
+    const seen = new Set<string>();
+    return mentionSegments.flatMap((segment) => {
+      if (segment.kind !== "mcp" || seen.has(segment.preset.name)) return [];
+      seen.add(segment.preset.name);
+      return [segment.preset];
+    });
+  }, [mentionSegments]);
  const [slashPaletteLayout, setSlashPaletteLayout] = useState<SlashPaletteLayout>({
    placement: "above",
    maxHeight: SLASH_PALETTE_MAX_HEIGHT_PX,
@@ -586,10 +646,10 @@ export function ThreadComposer({
  }, [filteredSlashCommands.length, selectedCommandIndex]);

  useEffect(() => {
-    if (selectedCliAppIndex >= filteredCliApps.length) {
+    if (selectedCliAppIndex >= filteredMentionCandidates.length) {
      setSelectedCliAppIndex(0);
    }
-  }, [filteredCliApps.length, selectedCliAppIndex]);
+  }, [filteredMentionCandidates.length, selectedCliAppIndex]);

  useEffect(() => {
    if (!showAnyPalette) return;
@@ -640,7 +700,7 @@ export function ThreadComposer({
      window.removeEventListener("resize", updateLayout);
      document.removeEventListener("scroll", updateLayout, true);
    };
-  }, [filteredCliApps.length, filteredSlashCommands.length, showAnyPalette]);
+  }, [filteredMentionCandidates.length, filteredSlashCommands.length, showAnyPalette]);

  useEffect(() => {
    if (!aspectMenuOpen) return;
@@ -695,11 +755,11 @@ export function ThreadComposer({
    [resizeTextarea],
  );

-  const chooseCliApp = useCallback(
-    (app: CliAppInfo) => {
+  const chooseMentionCandidate = useCallback(
+    (candidate: MentionCandidate) => {
      if (!cliAppMention) return;
      const suffix = value.slice(cliAppMention.end);
-      const mention = `@${app.name}${suffix.startsWith(" ") ? "" : " "}`;
+      const mention = `@${candidate.name}${suffix.startsWith(" ") ? "" : " "}`;
      const next = `${value.slice(0, cliAppMention.start)}${mention}${suffix}`;
      const nextCursor = cliAppMention.start + mention.length;
      setValue(next);
@@ -736,8 +796,9 @@ export function ThreadComposer({
          }))
        : undefined;
    const attachedCliApps = activeCliMentionApps.map(cliAppMentionPayload);
+    const attachedMcpPresets = activeMcpPresetMentions.map(mcpPresetMentionPayload);
    const options: SendOptions | undefined =
-      imageMode || attachedCliApps.length > 0
+      imageMode || attachedCliApps.length > 0 || attachedMcpPresets.length > 0
        ? {
            ...(imageMode
              ? {
@@ -748,6 +809,7 @@ export function ThreadComposer({
                }
              : {}),
            ...(attachedCliApps.length > 0 ? { cliApps: attachedCliApps } : {}),
+            ...(attachedMcpPresets.length > 0 ? { mcpPresets: attachedMcpPresets } : {}),
          }
        : undefined;
    onSend(trimmed, payload, options);
@@ -760,25 +822,36 @@ export function ThreadComposer({
    setCliAppMenuDismissed(false);
    setCursorPosition(0);
    resizeTextarea();
-  }, [activeCliMentionApps, canSend, clear, imageAspectRatio, imageMode, onSend, readyImages, resizeTextarea, value]);
+  }, [
+    activeCliMentionApps,
+    activeMcpPresetMentions,
+    canSend,
+    clear,
+    imageAspectRatio,
+    imageMode,
+    onSend,
+    readyImages,
+    resizeTextarea,
+    value,
+  ]);

  const onKeyDown = (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
    if (showCliAppMenu) {
      if (e.key === "ArrowDown") {
        e.preventDefault();
-        setSelectedCliAppIndex((idx) => (idx + 1) % filteredCliApps.length);
+        setSelectedCliAppIndex((idx) => (idx + 1) % filteredMentionCandidates.length);
        return;
      }
      if (e.key === "ArrowUp") {
        e.preventDefault();
        setSelectedCliAppIndex(
-          (idx) => (idx - 1 + filteredCliApps.length) % filteredCliApps.length,
+          (idx) => (idx - 1 + filteredMentionCandidates.length) % filteredMentionCandidates.length,
        );
        return;
      }
      if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
        e.preventDefault();
-        chooseCliApp(filteredCliApps[selectedCliAppIndex]);
+        chooseMentionCandidate(filteredMentionCandidates[selectedCliAppIndex]);
        return;
      }
      if (e.key === "Escape") {
@@ -894,12 +967,12 @@ export function ThreadComposer({
      ) : null}
      {showCliAppMenu ? (
        <CliAppMentionPalette
-          apps={filteredCliApps}
+          candidates={filteredMentionCandidates}
          selectedIndex={selectedCliAppIndex}
          layout={slashPaletteLayout}
          isHero={isHero}
          onHover={setSelectedCliAppIndex}
-          onChoose={chooseCliApp}
+          onChoose={chooseMentionCandidate}
        />
      ) : null}
      <div
@@ -947,7 +1020,7 @@ export function ThreadComposer({
          <RunElapsedStrip startedAt={runStartedAt} goalState={goalState} />
        ) : null}
        <div className="relative">
-          {hasCliMentionDecorations ? (
+          {hasMentionDecorations ? (
            <ComposerCliMentionOverlay
              segments={mentionSegments}
              isHero={isHero}
@@ -978,7 +1051,7 @@ export function ThreadComposer({
              "relative z-10 caret-foreground placeholder:text-muted-foreground/70",
              "focus:outline-none focus-visible:outline-none",
              "disabled:cursor-not-allowed",
-              hasCliMentionDecorations && "text-transparent selection:bg-primary/20",
+              hasMentionDecorations && "text-transparent selection:bg-primary/20",
            )}
          />
        </div>
@@ -1019,7 +1092,7 @@ export function ThreadComposer({
                "rounded-full text-muted-foreground hover:text-foreground",
                isHero
                  ? "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card"
-                  : "h-7.5 w-7.5 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card",
+                  : "h-9 w-9 border border-border/55 bg-card shadow-[0_2px_8px_rgba(15,23,42,0.05)] hover:bg-card",
              )}
            >
              <Plus className={cn(isHero ? "h-5 w-5" : "h-4 w-4")} />
@@ -1038,7 +1111,7 @@ export function ThreadComposer({
                }}
                className={cn(
                  "rounded-full border border-border/55 px-2.5 font-medium shadow-[0_2px_8px_rgba(15,23,42,0.04)]",
-                  isHero ? "h-9 text-[12px]" : "h-7.5 text-[10.5px]",
+                  "h-9 text-[12px]",
                  imageMode
                    ? "border-primary/30 bg-primary/10 text-primary hover:bg-primary/12"
                    : "bg-card text-muted-foreground hover:bg-card hover:text-foreground",
@@ -1058,7 +1131,7 @@ export function ThreadComposer({
                  onClick={() => setAspectMenuOpen((open) => !open)}
                  className={cn(
                    "rounded-full border border-border/55 bg-card px-2.5 font-medium text-foreground/80 shadow-[0_2px_8px_rgba(15,23,42,0.04)] hover:bg-card",
-                    isHero ? "h-9 text-[12px]" : "h-7.5 text-[10.5px]",
+                    "h-9 text-[12px]",
                  )}
                >
                  <span>{t(`thread.composer.imageMode.aspect.${imageAspectRatio.replace(":", "_")}`)}</span>
@@ -1078,22 +1151,12 @@ export function ThreadComposer({
              ) : null}
            </div>
            {modelLabel ? (
-              <span
-                title={modelLabel}
-                className={cn(
-                  "inline-flex min-w-0 items-center gap-1.5 rounded-full border px-2.5 py-1",
-                  "border-foreground/10 bg-foreground/[0.035] font-medium text-foreground/80",
-                  isHero
-                    ? "max-w-[13rem] text-[12px] shadow-[0_2px_8px_rgba(15,23,42,0.04)]"
-                    : "max-w-[10rem] text-[10.5px] shadow-[0_2px_8px_rgba(15,23,42,0.035)]",
-                )}
-              >
-                <span
-                  aria-hidden
-                  className="h-1.5 w-1.5 flex-none rounded-full bg-emerald-500/80"
-                />
-                <span className="truncate">{modelLabel}</span>
-              </span>
+              <ComposerModelBadge
+                label={modelLabel}
+                provider={modelProvider}
+                providerLabel={modelProviderLabel}
+                isHero={isHero}
+              />
            ) : null}
            {!isHero ? (
              <span className="hidden select-none text-[10.5px] text-muted-foreground/60 sm:inline">
@@ -1115,7 +1178,7 @@ export function ThreadComposer({
                : isHero
                  ? "border border-foreground bg-foreground text-background shadow-[0_4px_12px_rgba(15,23,42,0.20)] hover:bg-foreground/90 disabled:border-foreground/35 disabled:bg-foreground/35 disabled:text-background/80"
                  : "border border-foreground bg-foreground text-background shadow-[0_3px_10px_rgba(15,23,42,0.18)] hover:bg-foreground/90 disabled:border-foreground/35 disabled:bg-foreground/35 disabled:text-background/80",
-              isHero ? "" : "h-7.5 w-7.5",
+              "h-9 w-9",
              (canSend || showStopButton) && "hover:scale-[1.03] active:scale-95",
            )}
          >
@@ -1133,12 +1196,79 @@ export function ThreadComposer({
  );
 }

+function ComposerModelBadge({
+  label,
+  provider,
+  providerLabel,
+  isHero,
+}: {
+  label: string;
+  provider?: string | null;
+  providerLabel?: string | null;
+  isHero: boolean;
+}) {
+  const inferredProvider = provider || inferProviderFromModelName(label);
+  const brand = providerBrand(inferredProvider);
+  const [logoIndex, setLogoIndex] = useState(0);
+  const logoUrl = brand?.logoUrls[logoIndex];
+  const showLogo = !!logoUrl;
+  const title = providerLabel ? `${label} · ${providerLabel}` : label;
+
+  useEffect(() => setLogoIndex(0), [inferredProvider]);
+
+  return (
+    <span
+      title={title}
+      className={cn(
+        "inline-flex min-w-0 items-center rounded-full border border-border/55 bg-card font-medium text-foreground/82",
+        "shadow-[0_2px_8px_rgba(15,23,42,0.045)]",
+        isHero ? "h-9 max-w-[13.5rem] gap-2 px-2.5 text-[12px]" : "h-9 max-w-[12rem] gap-2 px-2.5 text-[12px]",
+      )}
+    >
+      <span
+        data-testid={inferredProvider ? `composer-model-logo-${inferredProvider}` : "composer-model-logo"}
+        className={cn(
+          "grid shrink-0 place-items-center overflow-hidden rounded-full border bg-background",
+          "h-5 w-5",
+        )}
+        style={{
+          borderColor: brand ? `${brand.color}28` : undefined,
+          boxShadow: brand ? `inset 0 0 0 1px ${brand.color}18` : undefined,
+        }}
+        aria-hidden
+      >
+        {showLogo ? (
+          <img
+            src={logoUrl}
+            alt=""
+            className="h-3.5 w-3.5 object-contain"
+            onError={() => setLogoIndex((index) => index + 1)}
+          />
+        ) : brand ? (
+          <span
+            className={cn(
+              "grid h-full w-full place-items-center rounded-full text-white",
+              "text-[8px]",
+            )}
+            style={{ backgroundColor: brand.color }}
+          >
+            {brand.initials.slice(0, 2)}
+          </span>
+        ) : (
+          <Sparkles className={cn("text-muted-foreground/65", isHero ? "h-3.5 w-3.5" : "h-3 w-3")} />
+        )}
+      </span>
+      <span className="truncate">{label}</span>
+    </span>
+  );
+}
+
 function ComposerCliMentionOverlay({
  segments,
  isHero,
  className,
 }: {
-  segments: CliAppMentionSegment[];
+  segments: CapabilityMentionSegment[];
  isHero: boolean;
  className: string;
 }) {
@@ -1154,7 +1284,7 @@ function ComposerCliMentionOverlay({
        if (segment.kind === "text") {
          return <span key={`text-${index}`}>{segment.text}</span>;
        }
-        return (
+        if (segment.kind === "cli") return (
          <CliAppMentionToken
            key={`cli-${segment.app.name}-${index}`}
            app={segment.app}
@@ -1163,6 +1293,15 @@ function ComposerCliMentionOverlay({
            isHero={isHero}
          />
        );
+        return (
+          <McpPresetMentionToken
+            key={`mcp-${segment.preset.name}-${index}`}
+            preset={segment.preset}
+            label={segment.text}
+            variant="composer"
+            isHero={isHero}
+          />
+        );
      })}
    </div>
  );
@@ -1177,12 +1316,12 @@ interface SlashCommandPaletteProps {
 }

 interface CliAppMentionPaletteProps {
-  apps: CliAppInfo[];
+  candidates: MentionCandidate[];
  selectedIndex: number;
  layout: SlashPaletteLayout;
  isHero: boolean;
  onHover: (index: number) => void;
-  onChoose: (app: CliAppInfo) => void;
+  onChoose: (candidate: MentionCandidate) => void;
 }

 function ImageAspectMenu({
@@ -1239,7 +1378,7 @@ function ImageAspectMenu({
 }

 function CliAppMentionPalette({
-  apps,
+  candidates,
  selectedIndex,
  layout,
  isHero,
@@ -1257,98 +1396,117 @@ function CliAppMentionPalette({
      aria-label={t("thread.composer.mentions.ariaLabel")}
      style={{ maxHeight: layout.maxHeight }}
      className={cn(
-        "absolute left-1/2 z-30 w-[calc(100%-0.5rem)] -translate-x-1/2 overflow-hidden rounded-[18px] border",
+        "absolute left-1/2 z-30 w-[calc(100%-0.5rem)] -translate-x-1/2 overflow-hidden rounded-[22px] border",
        layout.placement === "above" ? "bottom-full mb-2" : "top-full mt-2",
-        "border-border/65 bg-popover p-1.5 text-popover-foreground shadow-[0_18px_55px_rgba(15,23,42,0.18)]",
-        "dark:border-white/10 dark:shadow-[0_22px_55px_rgba(0,0,0,0.45)]",
+        "border-border/70 bg-popover p-2 text-popover-foreground shadow-[0_20px_60px_rgba(15,23,42,0.12)]",
+        "dark:border-white/10 dark:shadow-[0_24px_60px_rgba(0,0,0,0.42)]",
        isHero ? "max-w-[58rem]" : "max-w-[49.5rem]",
      )}
    >
-      <div className="flex items-center gap-1.5 px-2 pb-1 pt-1 text-[11px] font-medium tracking-[0.08em] text-muted-foreground/70">
-        <AtSign className="h-3 w-3" aria-hidden />
-        <span>{t("thread.composer.mentions.label")}</span>
+      <div className="px-2 pb-1.5 pt-0.5 text-[13px] font-semibold text-muted-foreground/78">
+        {t("thread.composer.mentions.label")}
      </div>
-      <div className="overflow-y-auto pr-0.5" style={{ maxHeight: listMaxHeight }}>
-        {apps.map((app, index) => {
+      <div className="overflow-y-auto" style={{ maxHeight: listMaxHeight }}>
+        {candidates.map((candidate, index) => {
          const selected = index === selectedIndex;
+          const name = candidate.name;
+          const displayName = candidate.kind === "cli"
+            ? candidate.app.display_name
+            : candidate.preset.display_name;
+          const typeLabel = candidate.kind === "cli"
+            ? t("thread.composer.mentions.cliBadge")
+            : t("thread.composer.mentions.mcpBadge");
+          const ariaDescription = candidate.kind === "cli"
+            ? t("thread.composer.mentions.cliDescription", { name })
+            : t("thread.composer.mentions.mcpDescription", { name });
          return (
            <button
-              key={app.name}
+              key={`${candidate.kind}-${name}`}
              type="button"
              role="option"
              aria-selected={selected}
+              aria-label={`${displayName} @${name} ${ariaDescription} ${typeLabel}`}
              onMouseEnter={() => onHover(index)}
              onMouseDown={(e) => {
                e.preventDefault();
-                onChoose(app);
+                onChoose(candidate);
              }}
              className={cn(
-                "flex w-full items-center gap-3 rounded-[13px] px-3 py-2.5 text-left transition-colors",
+                "flex h-10 w-full items-center gap-2.5 rounded-[13px] px-2.5 text-left transition-colors",
                selected
-                  ? "bg-primary/10 text-foreground"
-                  : "text-foreground/86 hover:bg-accent/55",
+                  ? "bg-foreground/[0.055] text-foreground"
+                  : "text-foreground/90 hover:bg-foreground/[0.04]",
              )}
            >
-              <CliAppMentionLogo app={app} selected={selected} />
-              <span className="min-w-0 flex-1">
-                <span className="flex min-w-0 items-baseline gap-2">
-                  <span className="font-mono text-[13px] font-semibold text-foreground">
-                    @{app.name}
-                  </span>
-                  <span className="truncate text-[13px] font-medium">
-                    {app.display_name}
-                  </span>
+              <MentionCandidateLogo candidate={candidate} selected={selected} />
+              <span className="flex min-w-0 flex-1 items-baseline gap-2">
+                <span className="shrink-0 text-[15px] font-medium tracking-normal text-foreground">
+                  {displayName}
                </span>
-                <span className="mt-0.5 block truncate text-[12px] text-muted-foreground">
-                  {app.category}
-                  {app.entry_point ? ` · ${app.entry_point}` : ""}
+                <span className="truncate text-[15px] font-normal tracking-normal text-muted-foreground/72">
+                  @{name}
                </span>
              </span>
+              <span
+                className={cn(
+                  "ml-2 shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold tracking-normal",
+                  candidate.kind === "cli"
+                    ? "bg-orange-500/10 text-orange-600 dark:text-orange-300"
+                    : "bg-sky-500/10 text-sky-600 dark:text-sky-300",
+                )}
+              >
+                {typeLabel}
+              </span>
            </button>
          );
        })}
      </div>
-      <div className="flex items-center gap-2 px-2 pt-1.5 text-[10.5px] text-muted-foreground/70">
-        <span>{t("thread.composer.slash.navigateHint")}</span>
-        <span>{t("thread.composer.slash.selectHint")}</span>
-        <span>{t("thread.composer.slash.closeHint")}</span>
-      </div>
    </div>
  );
 }

-function CliAppMentionLogo({
-  app,
+function MentionCandidateLogo({
+  candidate,
  selected,
 }: {
-  app: CliAppInfo;
+  candidate: MentionCandidate;
  selected: boolean;
 }) {
-  const [failed, setFailed] = useState(false);
-  const color = app.brand_color || "hsl(var(--primary))";
-  if (app.logo_url && !failed) {
+  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]);
+
+  if (logoUrl) {
    return (
      <span
        className={cn(
-          "flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] border bg-background",
-          selected ? "border-primary/25" : "border-border/65",
+          "flex h-5 w-5 shrink-0 items-center justify-center overflow-hidden rounded-[5px]",
+          selected ? "bg-background/55" : "bg-transparent",
        )}
      >
        <img
-          src={app.logo_url}
+          src={logoUrl}
          alt=""
-          className="h-4.5 w-4.5 object-contain"
-          onError={() => setFailed(true)}
+          className="h-5 w-5 object-contain"
+          onError={() => setLogoIndex((index) => index + 1)}
        />
      </span>
    );
  }
  return (
    <span
-      className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-[10.5px] font-semibold text-white"
+      className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[5px] text-[7.5px] font-semibold text-white"
      style={{ backgroundColor: color }}
    >
-      {cliAppInitials(app)}
+      {candidate.kind === "cli"
+        ? cliAppInitials(candidate.app)
+        : mcpPresetInitials(candidate.preset)}
    </span>
  );
 }
@@ -6,7 +6,7 @@ import {
  AgentActivityCluster,
  isAgentActivityMember,
 } from "@/components/thread/AgentActivityCluster";
-import type { CliAppInfo, UIMessage } from "@/lib/types";
+import type { CliAppInfo, McpPresetInfo, UIMessage } from "@/lib/types";

 interface ThreadMessagesProps {
  messages: UIMessage[];
@@ -15,6 +15,7 @@ interface ThreadMessagesProps {
  hiddenMessageCount?: number;
  onLoadEarlier?: () => void;
  cliApps?: CliAppInfo[];
+  mcpPresets?: McpPresetInfo[];
 }

 export type DisplayUnit =
@@ -166,6 +167,7 @@ export function ThreadMessages({
  hiddenMessageCount = 0,
  onLoadEarlier,
  cliApps = [],
+  mcpPresets = [],
 }: ThreadMessagesProps) {
  const { t } = useTranslation();
  const units = useMemo(() => buildDisplayUnits(messages), [messages]);
@@ -211,6 +213,7 @@ export function ThreadMessages({
                isTurnStreaming={index === liveActivityClusterIndex}
                hasBodyBelow={hasBodyBelow}
                cliApps={cliApps}
+                mcpPresets={mcpPresets}
              />
            ) : (
              <MessageBubble
@@ -221,6 +224,7 @@ export function ThreadMessages({
                    : true
                }
                cliApps={cliApps}
+                mcpPresets={mcpPresets}
              />
            )}
          </div>
@@ -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>
  );
@@ -14,7 +14,7 @@ import { ThreadMessages } from "@/components/thread/ThreadMessages";
 import { isAgentActivityMember } from "@/components/thread/AgentActivityCluster";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import type { CliAppInfo, UIMessage } from "@/lib/types";
+import type { CliAppInfo, McpPresetInfo, UIMessage } from "@/lib/types";

 interface ThreadViewportProps {
  messages: UIMessage[];
@@ -25,6 +25,7 @@ interface ThreadViewportProps {
  conversationKey?: string | null;
  showScrollToBottomButton?: boolean;
  cliApps?: CliAppInfo[];
+  mcpPresets?: McpPresetInfo[];
 }

 const NEAR_BOTTOM_PX = 48;
@@ -55,6 +56,7 @@ export function ThreadViewport({
  conversationKey = null,
  showScrollToBottomButton = true,
  cliApps = [],
+  mcpPresets = [],
 }: ThreadViewportProps) {
  const { t } = useTranslation();
  const scrollRef = useRef<HTMLDivElement>(null);
@@ -252,6 +254,7 @@ export function ThreadViewport({
                  hiddenMessageCount={hiddenMessageCount}
                  onLoadEarlier={loadEarlierMessages}
                  cliApps={cliApps}
+                  mcpPresets={mcpPresets}
                />
              </div>
            </div>
@@ -13,6 +13,7 @@ import type {
  InboundEvent,
  OutboundCliAppMention,
  OutboundImageGeneration,
+  OutboundMcpPresetMention,
  OutboundMedia,
  GoalStateWsPayload,
  UIImage,
@@ -313,6 +314,7 @@ export interface SendImage {
 export interface SendOptions {
  imageGeneration?: OutboundImageGeneration;
  cliApps?: OutboundCliAppMention[];
+  mcpPresets?: OutboundMcpPresetMention[];
 }

 export function useNanobotStream(
@@ -891,6 +893,7 @@ export function useNanobotStream(
            createdAt: Date.now(),
            ...(previews ? { images: previews } : {}),
            ...(options?.cliApps?.length ? { cliApps: options.cliApps } : {}),
+            ...(options?.mcpPresets?.length ? { mcpPresets: options.mcpPresets } : {}),
          },
        ];
      });
@@ -81,6 +81,7 @@
      "image": "Image",
      "web": "Web",
      "cliApps": "CLI Apps",
+      "mcp": "MCP",
      "runtime": "Runtime",
      "advanced": "Advanced"
    },
@@ -96,11 +97,20 @@
      "webSearch": "Web search",
      "webBehavior": "Behavior",
      "cliApps": "CLI Apps",
+      "mcp": "MCP",
      "identity": "Identity",
      "safety": "Safety",
      "capabilities": "Capabilities",
      "integrations": "Integrations"
    },
+    "models": {
+      "selectModel": "Select model",
+      "addConfiguration": "Add configuration",
+      "newConfiguration": "New model configuration",
+      "newConfigurationHelp": "Save a provider and model as a one-click option.",
+      "configurationName": "Name",
+      "configurationNamePlaceholder": "Fast writing"
+    },
    "rows": {
      "theme": "Theme",
      "language": "Language",
@@ -112,6 +122,7 @@
      "gateway": "Gateway",
      "restartState": "Restart state",
      "pendingChanges": "Pending changes",
+      "currentModel": "Current model",
      "selectedPreset": "Selected preset",
      "presetModel": "Preset model",
      "density": "Density",
@@ -154,6 +165,9 @@
      "provider": "Select the provider that should serve new model requests.",
      "model": "Set the default model name used by nanobot.",
      "configPath": "The gateway configuration file currently in use.",
+      "currentModel": "Choose the model nanobot uses for new replies.",
+      "selectedModelProvider": "Set by the selected model.",
+      "selectedModelValue": "Set by the selected model.",
      "selectedPreset": "Named presets are read-only here; edit them in config.json.",
      "presetModel": "Switch to Default to edit model and provider from the WebUI.",
      "density": "Stored only in this browser.",
@@ -178,6 +192,11 @@
      "cliAppsFilter": "Search by app, category, or capability.",
      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed."
    },
+    "timezone": {
+      "select": "Select timezone",
+      "search": "Search timezone",
+      "empty": "No matching timezones."
+    },
    "cliApps": {
      "allCategories": "All categories",
      "availableCount": "{{count}} apps",
@@ -209,6 +228,59 @@
      "unavailable": "Unavailable",
      "noDescription": "No description available."
    },
+    "mcp": {
+      "allCategories": "All categories",
+      "summary": "{{installed}} of {{total}} presets enabled",
+      "filterAll": "All",
+      "filterInstalled": "Enabled",
+      "filterNotInstalled": "Not enabled",
+      "searchPlaceholder": "Search MCP presets",
+      "moreOptions": "More MCP options",
+      "moreOptionsSubtitle": "Add a custom server or import mcp.json.",
+      "customTitle": "Custom MCP",
+      "customSubtitle": "Add any stdio, HTTP, or SSE MCP server.",
+      "customAction": "Custom",
+      "importAction": "Import",
+      "serverName": "Server name",
+      "serverUrl": "URL",
+      "transport": "Transport",
+      "command": "Command",
+      "args": "Args JSON",
+      "headers": "Headers JSON",
+      "env": "Env JSON",
+      "timeout": "Tool timeout",
+      "advancedOptions": "Advanced options",
+      "hideAdvanced": "Hide advanced",
+      "saveCustom": "Save MCP",
+      "configImport": "Import mcp.json",
+      "importConfig": "Import",
+      "restartRequired": "Restart nanobot to connect updated MCP tools.",
+      "toolsFound": "{{count}} tools",
+      "loading": "Loading MCP presets...",
+      "empty": "No MCP presets match this filter.",
+      "openDocs": "Open docs",
+      "test": "Test",
+      "remove": "Remove",
+      "enable": "Enable",
+      "enabled": "Enabled",
+      "setup": "Connect",
+      "configure": "Connect",
+      "connectTitle": "Connect {{name}}",
+      "connectHint": "Add the key from your account settings.",
+      "saveAndEnable": "Save and enable",
+      "updateSetup": "Update setup",
+      "configured": "configured",
+      "keepExisting": "Leave blank to keep existing",
+      "statusConfigured": "Configured",
+      "statusMissingCredentials": "Needs key",
+      "statusMissingDependency": "Needs dependency",
+      "statusComingSoon": "Coming soon",
+      "statusNotInstalled": "Not enabled",
+      "toolScope": "Tools",
+      "allTools": "All",
+      "noTools": "None",
+      "testForTools": "Run Test to inspect and choose individual tools."
+    },
    "values": {
      "light": "Light",
      "dark": "Dark",
@@ -296,7 +368,8 @@
    },
    "providers": {
      "searchPlaceholder": "Search providers",
-      "noMatches": "No providers match this search."
+      "noMatches": "No providers match this search.",
+      "saveProvider": "Save provider"
    },
    "legal": {
      "thirdPartyBrands": "Product names, logos, and brands are property of their respective owners. Use is for identification only and does not imply endorsement."
@@ -505,8 +578,14 @@
        }
      },
      "mentions": {
-        "ariaLabel": "CLI Apps",
-        "label": "CLI APPS"
+        "ariaLabel": "Apps and MCP",
+        "label": "Plugins",
+        "cliGroup": "CLI Apps",
+        "mcpGroup": "MCP servers",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "Use @{{name}} as a local CLI app",
+        "mcpDescription": "Use @{{name}} as an MCP server"
      },
      "encoding": "Encoding…",
      "remove": "Remove attachment",
@@ -539,15 +618,17 @@
    "agentActivityToolsOnly": "{{tools}} tool calls",
    "agentActivityLiveSummary": "Working… · {{reasoning}} steps · {{tools}} tool calls",
    "agentActivityLiveToolsOnly": "Working… · {{tools}} tool calls",
-    "cliActivityRunningOne": "Running CLI @{{name}}",
-    "cliActivityRanOne": "Ran CLI @{{name}}",
-    "cliActivityFailedOne": "CLI failed @{{name}}",
-    "cliActivityRunningMany": "Running {{count}} CLIs",
-    "cliActivityRanMany": "Ran {{count}} CLIs",
-    "cliActivityFailedMany": "{{count}} CLI failed",
-    "cliRunRunning": "Running CLI",
-    "cliRunRan": "Ran CLI",
-    "cliRunFailed": "CLI failed",
+    "activityThinkingFor": "Thinking for {{duration}}",
+    "activityThoughtFor": "Thought for {{duration}}",
+    "cliActivityRunningOne": "Using @{{name}}",
+    "cliActivityRanOne": "Used @{{name}}",
+    "cliActivityFailedOne": "Failed @{{name}}",
+    "cliActivityRunningMany": "Using {{count}} CLI apps",
+    "cliActivityRanMany": "Used {{count}} CLI apps",
+    "cliActivityFailedMany": "{{count}} CLI apps failed",
+    "cliRunRunning": "Using",
+    "cliRunRan": "Used",
+    "cliRunFailed": "Failed",
    "imageAttachment": "Image attachment",
    "copyReply": "Copy reply",
    "copiedReply": "Copied reply",
@@ -81,7 +81,9 @@
      "image": "Image",
      "web": "Web",
      "runtime": "Runtime",
-      "advanced": "Advanced"
+      "advanced": "Advanced",
+      "cliApps": "Apps CLI",
+      "mcp": "MCP"
    },
    "sections": {
      "interface": "Interfaz",
@@ -97,7 +99,9 @@
      "identity": "Identity",
      "safety": "Safety",
      "capabilities": "Capacidades",
-      "integrations": "Integrations"
+      "integrations": "Integrations",
+      "cliApps": "Apps CLI",
+      "mcp": "MCP"
    },
    "rows": {
      "theme": "Tema",
@@ -141,7 +145,11 @@
      "ssrfWhitelist": "SSRF whitelist",
      "mcpServers": "MCP servers",
      "pathAppend": "PATH append",
-      "configurationDocs": "Configuration docs"
+      "configurationDocs": "Configuration docs",
+      "currentModel": "Modelo actual",
+      "brandLogos": "Logotipos de marca",
+      "cliAppsCatalog": "Catálogo de apps CLI",
+      "cliAppsFilter": "Filtro de apps CLI"
    },
    "help": {
      "theme": "Cambia entre apariencia clara y oscura.",
@@ -168,7 +176,13 @@
      "botIcon": "Short emoji or text shown beside the bot name.",
      "timezone": "IANA timezone used by runtime context and schedules.",
      "toolHintMaxLength": "Maximum characters shown in tool progress hints.",
-      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed."
+      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed.",
+      "currentModel": "Elige el modelo que nanobot usará para las próximas respuestas.",
+      "selectedModelProvider": "Lo define el modelo seleccionado.",
+      "selectedModelValue": "Lo define el modelo seleccionado.",
+      "brandLogos": "Los logotipos se cargan desde los dominios de las marcas con una reserva de icono local.",
+      "cliAppsCatalog": "Explora CLIs de apps que nanobot puede ejecutar localmente.",
+      "cliAppsFilter": "Busca por app, categoría o capacidad."
    },
    "values": {
      "light": "Claro",
@@ -185,9 +199,7 @@
      "on": "On",
      "off": "Off",
      "configured": "Configured",
-      "notConfigured": "Not configured",
-      "restartRequired": "Restart required",
-      "liveReload": "Live reload ready"
+      "notConfigured": "Not configured"
    },
    "status": {
      "loading": "Cargando configuración...",
@@ -259,7 +271,8 @@
    },
    "providers": {
      "searchPlaceholder": "Search providers",
-      "noMatches": "No providers match this search."
+      "noMatches": "No providers match this search.",
+      "saveProvider": "Guardar proveedor"
    },
    "image": {
      "selectProvider": "Seleccionar proveedor",
@@ -267,6 +280,106 @@
      "selectSize": "Seleccionar tamaño",
      "configureProvider": "Configurar proveedor",
      "missingCredential": "Configura este proveedor antes de activar la generación de imágenes."
+    },
+    "models": {
+      "selectModel": "Seleccionar modelo",
+      "addConfiguration": "Añadir configuración",
+      "newConfiguration": "Nueva configuración de modelo",
+      "newConfigurationHelp": "Guarda un proveedor y un modelo como una opción de un clic.",
+      "configurationName": "Nombre",
+      "configurationNamePlaceholder": "Escritura rápida"
+    },
+    "timezone": {
+      "select": "Seleccionar zona horaria",
+      "search": "Buscar zona horaria",
+      "empty": "No hay zonas horarias coincidentes."
+    },
+    "cliApps": {
+      "allCategories": "Todas las categorías",
+      "availableCount": "{{count}} apps",
+      "installedCount": "{{count}} instaladas",
+      "summary": "{{installed}} de {{total}} CLIs instaladas",
+      "filterAll": "Todas",
+      "filterInstalled": "CLIs instaladas",
+      "filterNotInstalled": "No instaladas",
+      "searchPlaceholder": "Buscar CLIs",
+      "statusInstalled": "Instalada",
+      "statusAvailable": "Disponible",
+      "statusMissing": "Falta dependencia",
+      "statusUnsupported": "No compatible",
+      "statusNotInstalled": "No instalada",
+      "unsupported": "No compatible",
+      "loading": "Cargando apps CLI...",
+      "empty": "Ninguna app CLI coincide con este filtro.",
+      "readyTitle": "@{{name}} está listo",
+      "readyStatus": "Listo",
+      "readyPrompt": "Usa @{{name}} para ver qué puede hacer este CLI.",
+      "readyTry": "Probar @{{name}}",
+      "readyCopied": "Copiado",
+      "openChat": "Abrir chat",
+      "requires": "Requiere",
+      "test": "Probar CLI",
+      "update": "Actualizar CLI",
+      "uninstall": "Desinstalar CLI",
+      "install": "Instalar CLI",
+      "unavailable": "No disponible",
+      "noDescription": "Sin descripción disponible."
+    },
+    "mcp": {
+      "allCategories": "Todas las categorías",
+      "summary": "{{installed}} de {{total}} presets habilitados",
+      "filterAll": "Todos",
+      "filterInstalled": "Habilitados",
+      "filterNotInstalled": "No habilitados",
+      "searchPlaceholder": "Buscar presets MCP",
+      "moreOptions": "Más opciones de MCP",
+      "moreOptionsSubtitle": "Añade un servidor personalizado o importa mcp.json.",
+      "customTitle": "MCP personalizado",
+      "customSubtitle": "Añade cualquier servidor MCP stdio, HTTP o SSE.",
+      "customAction": "Personalizado",
+      "importAction": "Importar",
+      "serverName": "Nombre del servidor",
+      "serverUrl": "URL",
+      "transport": "Transporte",
+      "command": "Comando",
+      "args": "Args JSON",
+      "headers": "Headers JSON",
+      "env": "Env JSON",
+      "timeout": "Tiempo límite de herramienta",
+      "advancedOptions": "Opciones avanzadas",
+      "hideAdvanced": "Ocultar avanzado",
+      "saveCustom": "Guardar MCP",
+      "configImport": "Importar mcp.json",
+      "importConfig": "Importar",
+      "restartRequired": "Reinicia nanobot para conectar las herramientas MCP actualizadas.",
+      "toolsFound": "{{count}} herramientas",
+      "loading": "Cargando presets MCP...",
+      "empty": "Ningún preset MCP coincide con este filtro.",
+      "openDocs": "Abrir docs",
+      "test": "Probar",
+      "remove": "Eliminar",
+      "enable": "Habilitar",
+      "enabled": "Habilitado",
+      "setup": "Conectar",
+      "configure": "Conectar",
+      "connectTitle": "Conectar {{name}}",
+      "connectHint": "Añade la clave desde la configuración de tu cuenta.",
+      "saveAndEnable": "Guardar y habilitar",
+      "updateSetup": "Actualizar configuración",
+      "configured": "configurado",
+      "keepExisting": "Déjalo en blanco para conservar el valor actual",
+      "statusConfigured": "Configurado",
+      "statusMissingCredentials": "Necesita clave",
+      "statusMissingDependency": "Necesita dependencia",
+      "statusComingSoon": "Próximamente",
+      "statusNotInstalled": "No habilitado",
+      "toolScope": "Herramientas",
+      "allTools": "Todas",
+      "noTools": "Ninguna",
+      "testForTools": "Ejecuta Probar para inspeccionar y elegir herramientas individuales."
+    },
+    "legal": {
+      "thirdPartyBrands": "Los nombres, logotipos y marcas de productos pertenecen a sus respectivos propietarios. Su uso es solo identificativo y no implica respaldo."
    }
  },
  "chat": {
@@ -370,8 +483,7 @@
          "title": "Editar una imagen",
          "prompt": "Ayúdame a editar una imagen. Primero pídeme que suba o indique la imagen, y luego genera el resultado editado."
        }
-      },
-      "description": "Haz preguntas, continúa tu trabajo local o inicia un nuevo hilo."
+      }
    },
    "header": {
      "toggleSidebar": "Mostrar u ocultar la barra lateral",
@@ -475,6 +587,16 @@
        "decode_failed": "No se pudo decodificar esta imagen",
        "too_large": "Imagen demasiado grande — prueba una más pequeña",
        "io": "No se pudo leer este archivo"
+      },
+      "mentions": {
+        "ariaLabel": "Apps y MCP",
+        "label": "Plugins",
+        "cliGroup": "Apps CLI",
+        "mcpGroup": "Servidores MCP",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "Usar @{{name}} como app CLI local",
+        "mcpDescription": "Usar @{{name}} como servidor MCP"
      }
    },
    "scrollToBottom": "Desplazarse al final",
@@ -499,7 +621,18 @@
    "imageAttachment": "Imagen adjunta",
    "copyReply": "Copiar respuesta",
    "copiedReply": "Respuesta copiada",
-    "turnLatencyTitle": "Tiempo de respuesta (extremo a extremo)"
+    "turnLatencyTitle": "Tiempo de respuesta (extremo a extremo)",
+    "activityThinkingFor": "Pensando durante {{duration}}",
+    "activityThoughtFor": "Pensó durante {{duration}}",
+    "cliActivityRunningOne": "Usando @{{name}}",
+    "cliActivityRanOne": "Usó @{{name}}",
+    "cliActivityFailedOne": "Falló @{{name}}",
+    "cliActivityRunningMany": "Usando {{count}} apps CLI",
+    "cliActivityRanMany": "Usó {{count}} apps CLI",
+    "cliActivityFailedMany": "Fallaron {{count}} apps CLI",
+    "cliRunRunning": "Usando",
+    "cliRunRan": "Usado",
+    "cliRunFailed": "Falló"
  },
  "lightbox": {
    "title": "Vista previa de imagen",
@@ -81,7 +81,9 @@
      "image": "Image",
      "web": "Web",
      "runtime": "Runtime",
-      "advanced": "Advanced"
+      "advanced": "Advanced",
+      "cliApps": "Apps CLI",
+      "mcp": "MCP"
    },
    "sections": {
      "interface": "Interface",
@@ -97,7 +99,9 @@
      "identity": "Identity",
      "safety": "Safety",
      "capabilities": "Capacités",
-      "integrations": "Integrations"
+      "integrations": "Integrations",
+      "cliApps": "Apps CLI",
+      "mcp": "MCP"
    },
    "rows": {
      "theme": "Thème",
@@ -141,7 +145,11 @@
      "ssrfWhitelist": "SSRF whitelist",
      "mcpServers": "MCP servers",
      "pathAppend": "PATH append",
-      "configurationDocs": "Configuration docs"
+      "configurationDocs": "Configuration docs",
+      "currentModel": "Modèle actuel",
+      "brandLogos": "Logos de marque",
+      "cliAppsCatalog": "Catalogue d'apps CLI",
+      "cliAppsFilter": "Filtre des apps CLI"
    },
    "help": {
      "theme": "Basculer entre les apparences claire et sombre.",
@@ -168,7 +176,13 @@
      "botIcon": "Short emoji or text shown beside the bot name.",
      "timezone": "IANA timezone used by runtime context and schedules.",
      "toolHintMaxLength": "Maximum characters shown in tool progress hints.",
-      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed."
+      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed.",
+      "currentModel": "Choisissez le modèle que nanobot utilisera pour les prochaines réponses.",
+      "selectedModelProvider": "Défini par le modèle sélectionné.",
+      "selectedModelValue": "Défini par le modèle sélectionné.",
+      "brandLogos": "Les logos sont chargés depuis les domaines des marques avec une icône locale en secours.",
+      "cliAppsCatalog": "Parcourez les CLIs d'apps que nanobot peut exécuter localement.",
+      "cliAppsFilter": "Recherchez par app, catégorie ou capacité."
    },
    "values": {
      "light": "Clair",
@@ -185,9 +199,7 @@
      "on": "On",
      "off": "Off",
      "configured": "Configured",
-      "notConfigured": "Not configured",
-      "restartRequired": "Restart required",
-      "liveReload": "Live reload ready"
+      "notConfigured": "Not configured"
    },
    "status": {
      "loading": "Chargement des paramètres...",
@@ -259,7 +271,8 @@
    },
    "providers": {
      "searchPlaceholder": "Search providers",
-      "noMatches": "No providers match this search."
+      "noMatches": "No providers match this search.",
+      "saveProvider": "Enregistrer le fournisseur"
    },
    "image": {
      "selectProvider": "Sélectionner un fournisseur",
@@ -267,6 +280,106 @@
      "selectSize": "Sélectionner une taille",
      "configureProvider": "Configurer le fournisseur",
      "missingCredential": "Configurez ce fournisseur avant d’activer la génération d’images."
+    },
+    "models": {
+      "selectModel": "Sélectionner un modèle",
+      "addConfiguration": "Ajouter une configuration",
+      "newConfiguration": "Nouvelle configuration de modèle",
+      "newConfigurationHelp": "Enregistrez un fournisseur et un modèle comme option en un clic.",
+      "configurationName": "Nom",
+      "configurationNamePlaceholder": "Rédaction rapide"
+    },
+    "timezone": {
+      "select": "Sélectionner un fuseau horaire",
+      "search": "Rechercher un fuseau horaire",
+      "empty": "Aucun fuseau horaire correspondant."
+    },
+    "cliApps": {
+      "allCategories": "Toutes les catégories",
+      "availableCount": "{{count}} apps",
+      "installedCount": "{{count}} installées",
+      "summary": "{{installed}} CLIs installées sur {{total}}",
+      "filterAll": "Tout",
+      "filterInstalled": "CLIs installées",
+      "filterNotInstalled": "Non installées",
+      "searchPlaceholder": "Rechercher des CLIs",
+      "statusInstalled": "Installée",
+      "statusAvailable": "Disponible",
+      "statusMissing": "Dépendance manquante",
+      "statusUnsupported": "Non compatible",
+      "statusNotInstalled": "Non installée",
+      "unsupported": "Non compatible",
+      "loading": "Chargement des apps CLI...",
+      "empty": "Aucune app CLI ne correspond à ce filtre.",
+      "readyTitle": "@{{name}} est prêt",
+      "readyStatus": "Prêt",
+      "readyPrompt": "Utilisez @{{name}} pour voir ce que ce CLI peut faire.",
+      "readyTry": "Essayer @{{name}}",
+      "readyCopied": "Copié",
+      "openChat": "Ouvrir le chat",
+      "requires": "Requiert",
+      "test": "Tester le CLI",
+      "update": "Mettre à jour le CLI",
+      "uninstall": "Désinstaller le CLI",
+      "install": "Installer le CLI",
+      "unavailable": "Indisponible",
+      "noDescription": "Aucune description disponible."
+    },
+    "mcp": {
+      "allCategories": "Toutes les catégories",
+      "summary": "{{installed}} presets activés sur {{total}}",
+      "filterAll": "Tout",
+      "filterInstalled": "Activés",
+      "filterNotInstalled": "Non activés",
+      "searchPlaceholder": "Rechercher des presets MCP",
+      "moreOptions": "Plus d'options MCP",
+      "moreOptionsSubtitle": "Ajoutez un serveur personnalisé ou importez mcp.json.",
+      "customTitle": "MCP personnalisé",
+      "customSubtitle": "Ajoutez n'importe quel serveur MCP stdio, HTTP ou SSE.",
+      "customAction": "Personnalisé",
+      "importAction": "Importer",
+      "serverName": "Nom du serveur",
+      "serverUrl": "URL",
+      "transport": "Transport",
+      "command": "Commande",
+      "args": "Args JSON",
+      "headers": "Headers JSON",
+      "env": "Env JSON",
+      "timeout": "Délai d'outil",
+      "advancedOptions": "Options avancées",
+      "hideAdvanced": "Masquer les options avancées",
+      "saveCustom": "Enregistrer MCP",
+      "configImport": "Importer mcp.json",
+      "importConfig": "Importer",
+      "restartRequired": "Redémarrez nanobot pour connecter les outils MCP mis à jour.",
+      "toolsFound": "{{count}} outils",
+      "loading": "Chargement des presets MCP...",
+      "empty": "Aucun preset MCP ne correspond à ce filtre.",
+      "openDocs": "Ouvrir la doc",
+      "test": "Tester",
+      "remove": "Supprimer",
+      "enable": "Activer",
+      "enabled": "Activé",
+      "setup": "Connecter",
+      "configure": "Connecter",
+      "connectTitle": "Connecter {{name}}",
+      "connectHint": "Ajoutez la clé depuis les paramètres de votre compte.",
+      "saveAndEnable": "Enregistrer et activer",
+      "updateSetup": "Mettre à jour la configuration",
+      "configured": "configuré",
+      "keepExisting": "Laissez vide pour conserver la valeur actuelle",
+      "statusConfigured": "Configuré",
+      "statusMissingCredentials": "Clé requise",
+      "statusMissingDependency": "Dépendance requise",
+      "statusComingSoon": "Bientôt disponible",
+      "statusNotInstalled": "Non activé",
+      "toolScope": "Outils",
+      "allTools": "Tous",
+      "noTools": "Aucun",
+      "testForTools": "Exécutez Tester pour inspecter et choisir des outils individuels."
+    },
+    "legal": {
+      "thirdPartyBrands": "Les noms, logos et marques de produits appartiennent à leurs propriétaires respectifs. Leur utilisation sert uniquement à l'identification et n'implique aucune approbation."
    }
  },
  "chat": {
@@ -370,8 +483,7 @@
          "title": "Modifier une image",
          "prompt": "Aidez-moi à modifier une image. Demandez-moi d’abord de téléverser ou d’indiquer l’image, puis générez le résultat modifié."
        }
-      },
-      "description": "Posez des questions, poursuivez votre travail local ou démarrez un nouveau fil."
+      }
    },
    "header": {
      "toggleSidebar": "Afficher ou masquer la barre latérale",
@@ -475,6 +587,16 @@
        "decode_failed": "Impossible de décoder cette image",
        "too_large": "Image trop grande — essayez-en une plus petite",
        "io": "Impossible de lire ce fichier"
+      },
+      "mentions": {
+        "ariaLabel": "Apps et MCP",
+        "label": "Plugins",
+        "cliGroup": "Apps CLI",
+        "mcpGroup": "Serveurs MCP",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "Utiliser @{{name}} comme app CLI locale",
+        "mcpDescription": "Utiliser @{{name}} comme serveur MCP"
      }
    },
    "scrollToBottom": "Faire défiler vers le bas",
@@ -499,7 +621,18 @@
    "imageAttachment": "Pièce jointe image",
    "copyReply": "Copier la réponse",
    "copiedReply": "Réponse copiée",
-    "turnLatencyTitle": "Temps de réponse (de bout en bout)"
+    "turnLatencyTitle": "Temps de réponse (de bout en bout)",
+    "activityThinkingFor": "Réflexion pendant {{duration}}",
+    "activityThoughtFor": "Réflexion terminée en {{duration}}",
+    "cliActivityRunningOne": "Utilisation de @{{name}}",
+    "cliActivityRanOne": "@{{name}} utilisé",
+    "cliActivityFailedOne": "Échec de @{{name}}",
+    "cliActivityRunningMany": "Utilisation de {{count}} apps CLI",
+    "cliActivityRanMany": "{{count}} apps CLI utilisées",
+    "cliActivityFailedMany": "Échec de {{count}} apps CLI",
+    "cliRunRunning": "Utilisation",
+    "cliRunRan": "Utilisé",
+    "cliRunFailed": "Échec"
  },
  "lightbox": {
    "title": "Aperçu de l’image",
@@ -81,7 +81,9 @@
      "image": "Image",
      "web": "Web",
      "runtime": "Runtime",
-      "advanced": "Advanced"
+      "advanced": "Advanced",
+      "cliApps": "Aplikasi CLI",
+      "mcp": "MCP"
    },
    "sections": {
      "interface": "Antarmuka",
@@ -97,7 +99,9 @@
      "identity": "Identity",
      "safety": "Safety",
      "capabilities": "Kapabilitas",
-      "integrations": "Integrations"
+      "integrations": "Integrations",
+      "cliApps": "Aplikasi CLI",
+      "mcp": "MCP"
    },
    "rows": {
      "theme": "Tema",
@@ -141,7 +145,11 @@
      "ssrfWhitelist": "SSRF whitelist",
      "mcpServers": "MCP servers",
      "pathAppend": "PATH append",
-      "configurationDocs": "Configuration docs"
+      "configurationDocs": "Configuration docs",
+      "currentModel": "Model saat ini",
+      "brandLogos": "Logo merek",
+      "cliAppsCatalog": "Katalog aplikasi CLI",
+      "cliAppsFilter": "Filter aplikasi CLI"
    },
    "help": {
      "theme": "Beralih antara tampilan terang dan gelap.",
@@ -168,7 +176,13 @@
      "botIcon": "Short emoji or text shown beside the bot name.",
      "timezone": "IANA timezone used by runtime context and schedules.",
      "toolHintMaxLength": "Maximum characters shown in tool progress hints.",
-      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed."
+      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed.",
+      "currentModel": "Pilih model yang digunakan nanobot untuk balasan berikutnya.",
+      "selectedModelProvider": "Ditentukan oleh model yang dipilih.",
+      "selectedModelValue": "Ditentukan oleh model yang dipilih.",
+      "brandLogos": "Logo dimuat dari domain merek dengan ikon lokal sebagai cadangan.",
+      "cliAppsCatalog": "Jelajahi CLI aplikasi yang dapat dijalankan nanobot secara lokal.",
+      "cliAppsFilter": "Cari berdasarkan aplikasi, kategori, atau kemampuan."
    },
    "values": {
      "light": "Terang",
@@ -185,9 +199,7 @@
      "on": "On",
      "off": "Off",
      "configured": "Configured",
-      "notConfigured": "Not configured",
-      "restartRequired": "Restart required",
-      "liveReload": "Live reload ready"
+      "notConfigured": "Not configured"
    },
    "status": {
      "loading": "Memuat pengaturan...",
@@ -259,7 +271,8 @@
    },
    "providers": {
      "searchPlaceholder": "Search providers",
-      "noMatches": "No providers match this search."
+      "noMatches": "No providers match this search.",
+      "saveProvider": "Simpan penyedia"
    },
    "image": {
      "selectProvider": "Pilih penyedia",
@@ -267,6 +280,106 @@
      "selectSize": "Pilih ukuran",
      "configureProvider": "Konfigurasi penyedia",
      "missingCredential": "Konfigurasikan penyedia ini sebelum mengaktifkan pembuatan gambar."
+    },
+    "models": {
+      "selectModel": "Pilih model",
+      "addConfiguration": "Tambah konfigurasi",
+      "newConfiguration": "Konfigurasi model baru",
+      "newConfigurationHelp": "Simpan penyedia dan model sebagai opsi sekali klik.",
+      "configurationName": "Nama",
+      "configurationNamePlaceholder": "Penulisan cepat"
+    },
+    "timezone": {
+      "select": "Pilih zona waktu",
+      "search": "Cari zona waktu",
+      "empty": "Tidak ada zona waktu yang cocok."
+    },
+    "cliApps": {
+      "allCategories": "Semua kategori",
+      "availableCount": "{{count}} aplikasi",
+      "installedCount": "{{count}} terpasang",
+      "summary": "{{installed}} dari {{total}} CLI terpasang",
+      "filterAll": "Semua",
+      "filterInstalled": "CLI terpasang",
+      "filterNotInstalled": "Belum terpasang",
+      "searchPlaceholder": "Cari CLI",
+      "statusInstalled": "Terpasang",
+      "statusAvailable": "Tersedia",
+      "statusMissing": "Dependensi hilang",
+      "statusUnsupported": "Tidak didukung",
+      "statusNotInstalled": "Belum terpasang",
+      "unsupported": "Tidak didukung",
+      "loading": "Memuat aplikasi CLI...",
+      "empty": "Tidak ada aplikasi CLI yang cocok dengan filter ini.",
+      "readyTitle": "@{{name}} siap",
+      "readyStatus": "Siap",
+      "readyPrompt": "Gunakan @{{name}} untuk melihat kemampuan CLI ini.",
+      "readyTry": "Coba @{{name}}",
+      "readyCopied": "Disalin",
+      "openChat": "Buka chat",
+      "requires": "Membutuhkan",
+      "test": "Uji CLI",
+      "update": "Perbarui CLI",
+      "uninstall": "Copot CLI",
+      "install": "Pasang CLI",
+      "unavailable": "Tidak tersedia",
+      "noDescription": "Tidak ada deskripsi."
+    },
+    "mcp": {
+      "allCategories": "Semua kategori",
+      "summary": "{{installed}} dari {{total}} preset diaktifkan",
+      "filterAll": "Semua",
+      "filterInstalled": "Aktif",
+      "filterNotInstalled": "Tidak aktif",
+      "searchPlaceholder": "Cari preset MCP",
+      "moreOptions": "Opsi MCP lainnya",
+      "moreOptionsSubtitle": "Tambahkan server khusus atau impor mcp.json.",
+      "customTitle": "MCP khusus",
+      "customSubtitle": "Tambahkan server MCP stdio, HTTP, atau SSE apa pun.",
+      "customAction": "Khusus",
+      "importAction": "Impor",
+      "serverName": "Nama server",
+      "serverUrl": "URL",
+      "transport": "Transport",
+      "command": "Perintah",
+      "args": "Args JSON",
+      "headers": "Headers JSON",
+      "env": "Env JSON",
+      "timeout": "Batas waktu alat",
+      "advancedOptions": "Opsi lanjutan",
+      "hideAdvanced": "Sembunyikan lanjutan",
+      "saveCustom": "Simpan MCP",
+      "configImport": "Impor mcp.json",
+      "importConfig": "Impor",
+      "restartRequired": "Mulai ulang nanobot untuk menyambungkan alat MCP yang diperbarui.",
+      "toolsFound": "{{count}} alat",
+      "loading": "Memuat preset MCP...",
+      "empty": "Tidak ada preset MCP yang cocok dengan filter ini.",
+      "openDocs": "Buka dokumentasi",
+      "test": "Uji",
+      "remove": "Hapus",
+      "enable": "Aktifkan",
+      "enabled": "Aktif",
+      "setup": "Hubungkan",
+      "configure": "Hubungkan",
+      "connectTitle": "Hubungkan {{name}}",
+      "connectHint": "Tambahkan kunci dari pengaturan akun Anda.",
+      "saveAndEnable": "Simpan dan aktifkan",
+      "updateSetup": "Perbarui konfigurasi",
+      "configured": "terkonfigurasi",
+      "keepExisting": "Biarkan kosong untuk mempertahankan nilai saat ini",
+      "statusConfigured": "Terkonfigurasi",
+      "statusMissingCredentials": "Butuh kunci",
+      "statusMissingDependency": "Butuh dependensi",
+      "statusComingSoon": "Segera hadir",
+      "statusNotInstalled": "Tidak aktif",
+      "toolScope": "Alat",
+      "allTools": "Semua",
+      "noTools": "Tidak ada",
+      "testForTools": "Jalankan Uji untuk memeriksa dan memilih alat individual."
+    },
+    "legal": {
+      "thirdPartyBrands": "Nama produk, logo, dan merek adalah milik pemiliknya masing-masing. Penggunaan hanya untuk identifikasi dan tidak menyiratkan dukungan."
    }
  },
  "chat": {
@@ -370,8 +483,7 @@
          "title": "Edit gambar",
          "prompt": "Bantu saya mengedit gambar. Minta saya mengunggah atau menyebutkan gambar terlebih dahulu, lalu buat hasil editnya."
        }
-      },
-      "description": "Ajukan pertanyaan, lanjutkan pekerjaan lokal, atau mulai thread baru."
+      }
    },
    "header": {
      "toggleSidebar": "Tampilkan atau sembunyikan sidebar",
@@ -475,6 +587,16 @@
        "decode_failed": "Tidak dapat mendekode gambar ini",
        "too_large": "Gambar terlalu besar — coba yang lebih kecil",
        "io": "Tidak dapat membaca file ini"
+      },
+      "mentions": {
+        "ariaLabel": "Aplikasi dan MCP",
+        "label": "Plugin",
+        "cliGroup": "Aplikasi CLI",
+        "mcpGroup": "Server MCP",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "Gunakan @{{name}} sebagai aplikasi CLI lokal",
+        "mcpDescription": "Gunakan @{{name}} sebagai server MCP"
      }
    },
    "scrollToBottom": "Gulir ke bawah",
@@ -499,7 +621,18 @@
    "imageAttachment": "Lampiran gambar",
    "copyReply": "Salin balasan",
    "copiedReply": "Balasan disalin",
-    "turnLatencyTitle": "Waktu respons (ujung ke ujung)"
+    "turnLatencyTitle": "Waktu respons (ujung ke ujung)",
+    "activityThinkingFor": "Berpikir selama {{duration}}",
+    "activityThoughtFor": "Selesai berpikir dalam {{duration}}",
+    "cliActivityRunningOne": "Menggunakan @{{name}}",
+    "cliActivityRanOne": "Menggunakan @{{name}} selesai",
+    "cliActivityFailedOne": "@{{name}} gagal",
+    "cliActivityRunningMany": "Menggunakan {{count}} aplikasi CLI",
+    "cliActivityRanMany": "{{count}} aplikasi CLI digunakan",
+    "cliActivityFailedMany": "{{count}} aplikasi CLI gagal",
+    "cliRunRunning": "Menggunakan",
+    "cliRunRan": "Digunakan",
+    "cliRunFailed": "Gagal"
  },
  "lightbox": {
    "title": "Pratinjau gambar",
@@ -81,7 +81,9 @@
      "image": "Image",
      "web": "Web",
      "runtime": "Runtime",
-      "advanced": "Advanced"
+      "advanced": "Advanced",
+      "cliApps": "CLI アプリ",
+      "mcp": "MCP"
    },
    "sections": {
      "interface": "インターフェース",
@@ -97,7 +99,9 @@
      "identity": "Identity",
      "safety": "Safety",
      "capabilities": "機能",
-      "integrations": "Integrations"
+      "integrations": "Integrations",
+      "cliApps": "CLI アプリ",
+      "mcp": "MCP"
    },
    "rows": {
      "theme": "テーマ",
@@ -141,7 +145,11 @@
      "ssrfWhitelist": "SSRF whitelist",
      "mcpServers": "MCP servers",
      "pathAppend": "PATH append",
-      "configurationDocs": "Configuration docs"
+      "configurationDocs": "Configuration docs",
+      "currentModel": "現在のモデル",
+      "brandLogos": "ブランドロゴ",
+      "cliAppsCatalog": "CLI アプリカタログ",
+      "cliAppsFilter": "CLI アプリフィルター"
    },
    "help": {
      "theme": "ライト表示とダーク表示を切り替えます。",
@@ -168,7 +176,13 @@
      "botIcon": "Short emoji or text shown beside the bot name.",
      "timezone": "IANA timezone used by runtime context and schedules.",
      "toolHintMaxLength": "Maximum characters shown in tool progress hints.",
-      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed."
+      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed.",
+      "currentModel": "今後の返信で nanobot が使用するモデルを選択します。",
+      "selectedModelProvider": "選択したモデルによって設定されます。",
+      "selectedModelValue": "選択したモデルによって設定されます。",
+      "brandLogos": "ロゴはブランドのドメインから読み込まれ、ローカルアイコンにフォールバックします。",
+      "cliAppsCatalog": "nanobot がローカルで実行できるアプリ CLI を探します。",
+      "cliAppsFilter": "アプリ、カテゴリ、機能で検索します。"
    },
    "values": {
      "light": "ライト",
@@ -185,9 +199,7 @@
      "on": "On",
      "off": "Off",
      "configured": "Configured",
-      "notConfigured": "Not configured",
-      "restartRequired": "Restart required",
-      "liveReload": "Live reload ready"
+      "notConfigured": "Not configured"
    },
    "status": {
      "loading": "設定を読み込んでいます...",
@@ -259,7 +271,8 @@
    },
    "providers": {
      "searchPlaceholder": "Search providers",
-      "noMatches": "No providers match this search."
+      "noMatches": "No providers match this search.",
+      "saveProvider": "プロバイダーを保存"
    },
    "image": {
      "selectProvider": "プロバイダーを選択",
@@ -267,6 +280,106 @@
      "selectSize": "サイズを選択",
      "configureProvider": "プロバイダーを設定",
      "missingCredential": "画像生成を有効にする前に、このプロバイダーを設定してください。"
+    },
+    "models": {
+      "selectModel": "モデルを選択",
+      "addConfiguration": "設定を追加",
+      "newConfiguration": "新しいモデル設定",
+      "newConfigurationHelp": "プロバイダーとモデルをワンクリックの選択肢として保存します。",
+      "configurationName": "名前",
+      "configurationNamePlaceholder": "高速ライティング"
+    },
+    "timezone": {
+      "select": "タイムゾーンを選択",
+      "search": "タイムゾーンを検索",
+      "empty": "一致するタイムゾーンはありません。"
+    },
+    "cliApps": {
+      "allCategories": "すべてのカテゴリ",
+      "availableCount": "{{count}} 個のアプリ",
+      "installedCount": "{{count}} 個インストール済み",
+      "summary": "{{total}} 個中 {{installed}} 個の CLI がインストール済み",
+      "filterAll": "すべて",
+      "filterInstalled": "インストール済み CLI",
+      "filterNotInstalled": "未インストール",
+      "searchPlaceholder": "CLI を検索",
+      "statusInstalled": "インストール済み",
+      "statusAvailable": "利用可能",
+      "statusMissing": "依存関係が不足",
+      "statusUnsupported": "未対応",
+      "statusNotInstalled": "未インストール",
+      "unsupported": "未対応",
+      "loading": "CLI アプリを読み込み中...",
+      "empty": "この条件に一致する CLI アプリはありません。",
+      "readyTitle": "@{{name}} の準備ができました",
+      "readyStatus": "準備完了",
+      "readyPrompt": "@{{name}} を使って、この CLI でできることを確認します。",
+      "readyTry": "@{{name}} を試す",
+      "readyCopied": "コピーしました",
+      "openChat": "チャットを開く",
+      "requires": "必要条件",
+      "test": "CLI をテスト",
+      "update": "CLI を更新",
+      "uninstall": "CLI をアンインストール",
+      "install": "CLI をインストール",
+      "unavailable": "利用不可",
+      "noDescription": "説明はありません。"
+    },
+    "mcp": {
+      "allCategories": "すべてのカテゴリ",
+      "summary": "{{total}} 個中 {{installed}} 個のプリセットが有効",
+      "filterAll": "すべて",
+      "filterInstalled": "有効",
+      "filterNotInstalled": "未有効",
+      "searchPlaceholder": "MCP プリセットを検索",
+      "moreOptions": "その他の MCP オプション",
+      "moreOptionsSubtitle": "カスタムサーバーを追加するか mcp.json をインポートします。",
+      "customTitle": "カスタム MCP",
+      "customSubtitle": "任意の stdio、HTTP、SSE MCP サーバーを追加します。",
+      "customAction": "カスタム",
+      "importAction": "インポート",
+      "serverName": "サーバー名",
+      "serverUrl": "URL",
+      "transport": "トランスポート",
+      "command": "コマンド",
+      "args": "Args JSON",
+      "headers": "Headers JSON",
+      "env": "Env JSON",
+      "timeout": "ツールのタイムアウト",
+      "advancedOptions": "詳細オプション",
+      "hideAdvanced": "詳細を隠す",
+      "saveCustom": "MCP を保存",
+      "configImport": "mcp.json をインポート",
+      "importConfig": "インポート",
+      "restartRequired": "更新された MCP ツールに接続するには nanobot を再起動してください。",
+      "toolsFound": "{{count}} 個のツール",
+      "loading": "MCP プリセットを読み込み中...",
+      "empty": "この条件に一致する MCP プリセットはありません。",
+      "openDocs": "ドキュメントを開く",
+      "test": "テスト",
+      "remove": "削除",
+      "enable": "有効化",
+      "enabled": "有効",
+      "setup": "接続",
+      "configure": "接続",
+      "connectTitle": "{{name}} に接続",
+      "connectHint": "アカウント設定からキーを追加します。",
+      "saveAndEnable": "保存して有効化",
+      "updateSetup": "設定を更新",
+      "configured": "設定済み",
+      "keepExisting": "既存の値を維持するには空欄のままにします",
+      "statusConfigured": "設定済み",
+      "statusMissingCredentials": "キーが必要",
+      "statusMissingDependency": "依存関係が必要",
+      "statusComingSoon": "近日公開",
+      "statusNotInstalled": "未有効",
+      "toolScope": "ツール",
+      "allTools": "すべて",
+      "noTools": "なし",
+      "testForTools": "テストを実行して個別のツールを確認・選択します。"
+    },
+    "legal": {
+      "thirdPartyBrands": "製品名、ロゴ、ブランドはそれぞれの所有者に帰属します。使用は識別のみを目的とし、承認を意味するものではありません。"
    }
  },
  "chat": {
@@ -370,8 +483,7 @@
          "title": "画像を編集",
          "prompt": "画像編集を手伝ってください。まず編集する画像のアップロードまたは指定を求め、その後に編集後の結果を生成してください。"
        }
-      },
-      "description": "質問したり、ローカル作業を続けたり、新しいスレッドを始めたりできます。"
+      }
    },
    "header": {
      "toggleSidebar": "サイドバーを切り替える",
@@ -475,6 +587,16 @@
        "decode_failed": "この画像をデコードできません",
        "too_large": "画像が大きすぎます。小さいものを選んでください",
        "io": "このファイルを読み込めません"
+      },
+      "mentions": {
+        "ariaLabel": "アプリと MCP",
+        "label": "プラグイン",
+        "cliGroup": "CLI アプリ",
+        "mcpGroup": "MCP サーバー",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "@{{name}} をローカル CLI アプリとして使用",
+        "mcpDescription": "@{{name}} を MCP サーバーとして使用"
      }
    },
    "scrollToBottom": "一番下へスクロール",
@@ -499,7 +621,18 @@
    "imageAttachment": "画像の添付",
    "copyReply": "返信をコピー",
    "copiedReply": "返信をコピーしました",
-    "turnLatencyTitle": "応答時間（全行程）"
+    "turnLatencyTitle": "応答時間（全行程）",
+    "activityThinkingFor": "{{duration}}考えています",
+    "activityThoughtFor": "{{duration}}考えました",
+    "cliActivityRunningOne": "@{{name}} を使用中",
+    "cliActivityRanOne": "@{{name}} を使用しました",
+    "cliActivityFailedOne": "@{{name}} が失敗しました",
+    "cliActivityRunningMany": "{{count}} 個の CLI アプリを使用中",
+    "cliActivityRanMany": "{{count}} 個の CLI アプリを使用しました",
+    "cliActivityFailedMany": "{{count}} 個の CLI アプリが失敗しました",
+    "cliRunRunning": "使用中",
+    "cliRunRan": "使用済み",
+    "cliRunFailed": "失敗"
  },
  "lightbox": {
    "title": "画像プレビュー",
@@ -81,7 +81,9 @@
      "image": "Image",
      "web": "Web",
      "runtime": "Runtime",
-      "advanced": "Advanced"
+      "advanced": "Advanced",
+      "cliApps": "CLI 앱",
+      "mcp": "MCP"
    },
    "sections": {
      "interface": "인터페이스",
@@ -97,7 +99,9 @@
      "identity": "Identity",
      "safety": "Safety",
      "capabilities": "기능",
-      "integrations": "Integrations"
+      "integrations": "Integrations",
+      "cliApps": "CLI 앱",
+      "mcp": "MCP"
    },
    "rows": {
      "theme": "테마",
@@ -141,7 +145,11 @@
      "ssrfWhitelist": "SSRF whitelist",
      "mcpServers": "MCP servers",
      "pathAppend": "PATH append",
-      "configurationDocs": "Configuration docs"
+      "configurationDocs": "Configuration docs",
+      "currentModel": "현재 모델",
+      "brandLogos": "브랜드 로고",
+      "cliAppsCatalog": "CLI 앱 카탈로그",
+      "cliAppsFilter": "CLI 앱 필터"
    },
    "help": {
      "theme": "밝은 모드와 어두운 모드를 전환합니다.",
@@ -168,7 +176,13 @@
      "botIcon": "Short emoji or text shown beside the bot name.",
      "timezone": "IANA timezone used by runtime context and schedules.",
      "toolHintMaxLength": "Maximum characters shown in tool progress hints.",
-      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed."
+      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed.",
+      "currentModel": "nanobot이 새 답변에 사용할 모델을 선택합니다.",
+      "selectedModelProvider": "선택한 모델에서 설정됩니다.",
+      "selectedModelValue": "선택한 모델에서 설정됩니다.",
+      "brandLogos": "로고는 브랜드 도메인에서 불러오며, 실패하면 로컬 아이콘을 사용합니다.",
+      "cliAppsCatalog": "nanobot이 로컬에서 실행할 수 있는 앱 CLI를 살펴봅니다.",
+      "cliAppsFilter": "앱, 카테고리 또는 기능으로 검색합니다."
    },
    "values": {
      "light": "라이트",
@@ -185,9 +199,7 @@
      "on": "On",
      "off": "Off",
      "configured": "Configured",
-      "notConfigured": "Not configured",
-      "restartRequired": "Restart required",
-      "liveReload": "Live reload ready"
+      "notConfigured": "Not configured"
    },
    "status": {
      "loading": "설정을 불러오는 중...",
@@ -259,7 +271,8 @@
    },
    "providers": {
      "searchPlaceholder": "Search providers",
-      "noMatches": "No providers match this search."
+      "noMatches": "No providers match this search.",
+      "saveProvider": "제공자 저장"
    },
    "image": {
      "selectProvider": "제공자 선택",
@@ -267,6 +280,106 @@
      "selectSize": "크기 선택",
      "configureProvider": "제공자 구성",
      "missingCredential": "이미지 생성을 활성화하기 전에 이 제공자를 구성하세요."
+    },
+    "models": {
+      "selectModel": "모델 선택",
+      "addConfiguration": "구성 추가",
+      "newConfiguration": "새 모델 구성",
+      "newConfigurationHelp": "제공자와 모델을 한 번에 선택할 수 있는 옵션으로 저장합니다.",
+      "configurationName": "이름",
+      "configurationNamePlaceholder": "빠른 글쓰기"
+    },
+    "timezone": {
+      "select": "시간대 선택",
+      "search": "시간대 검색",
+      "empty": "일치하는 시간대가 없습니다."
+    },
+    "cliApps": {
+      "allCategories": "모든 카테고리",
+      "availableCount": "앱 {{count}}개",
+      "installedCount": "{{count}}개 설치됨",
+      "summary": "CLI {{total}}개 중 {{installed}}개 설치됨",
+      "filterAll": "전체",
+      "filterInstalled": "설치된 CLI",
+      "filterNotInstalled": "미설치",
+      "searchPlaceholder": "CLI 검색",
+      "statusInstalled": "설치됨",
+      "statusAvailable": "사용 가능",
+      "statusMissing": "의존성 필요",
+      "statusUnsupported": "지원 안 함",
+      "statusNotInstalled": "미설치",
+      "unsupported": "지원 안 함",
+      "loading": "CLI 앱 로드 중...",
+      "empty": "이 필터와 일치하는 CLI 앱이 없습니다.",
+      "readyTitle": "@{{name}} 준비됨",
+      "readyStatus": "준비됨",
+      "readyPrompt": "@{{name}}을 사용해 이 CLI가 무엇을 할 수 있는지 확인하세요.",
+      "readyTry": "@{{name}} 사용해 보기",
+      "readyCopied": "복사됨",
+      "openChat": "채팅 열기",
+      "requires": "필요 항목",
+      "test": "CLI 테스트",
+      "update": "CLI 업데이트",
+      "uninstall": "CLI 제거",
+      "install": "CLI 설치",
+      "unavailable": "사용 불가",
+      "noDescription": "설명이 없습니다."
+    },
+    "mcp": {
+      "allCategories": "모든 카테고리",
+      "summary": "프리셋 {{total}}개 중 {{installed}}개 활성화됨",
+      "filterAll": "전체",
+      "filterInstalled": "활성화됨",
+      "filterNotInstalled": "비활성",
+      "searchPlaceholder": "MCP 프리셋 검색",
+      "moreOptions": "추가 MCP 옵션",
+      "moreOptionsSubtitle": "사용자 지정 서버를 추가하거나 mcp.json을 가져옵니다.",
+      "customTitle": "사용자 지정 MCP",
+      "customSubtitle": "stdio, HTTP 또는 SSE MCP 서버를 추가합니다.",
+      "customAction": "사용자 지정",
+      "importAction": "가져오기",
+      "serverName": "서버 이름",
+      "serverUrl": "URL",
+      "transport": "전송 방식",
+      "command": "명령",
+      "args": "Args JSON",
+      "headers": "Headers JSON",
+      "env": "Env JSON",
+      "timeout": "도구 제한 시간",
+      "advancedOptions": "고급 옵션",
+      "hideAdvanced": "고급 숨기기",
+      "saveCustom": "MCP 저장",
+      "configImport": "mcp.json 가져오기",
+      "importConfig": "가져오기",
+      "restartRequired": "업데이트된 MCP 도구를 연결하려면 nanobot을 다시 시작하세요.",
+      "toolsFound": "도구 {{count}}개",
+      "loading": "MCP 프리셋 로드 중...",
+      "empty": "이 필터와 일치하는 MCP 프리셋이 없습니다.",
+      "openDocs": "문서 열기",
+      "test": "테스트",
+      "remove": "제거",
+      "enable": "활성화",
+      "enabled": "활성화됨",
+      "setup": "연결",
+      "configure": "연결",
+      "connectTitle": "{{name}} 연결",
+      "connectHint": "계정 설정에서 키를 추가하세요.",
+      "saveAndEnable": "저장 후 활성화",
+      "updateSetup": "설정 업데이트",
+      "configured": "구성됨",
+      "keepExisting": "기존 값을 유지하려면 비워 두세요",
+      "statusConfigured": "구성됨",
+      "statusMissingCredentials": "키 필요",
+      "statusMissingDependency": "의존성 필요",
+      "statusComingSoon": "곧 제공",
+      "statusNotInstalled": "비활성",
+      "toolScope": "도구",
+      "allTools": "전체",
+      "noTools": "없음",
+      "testForTools": "테스트를 실행해 개별 도구를 확인하고 선택하세요."
+    },
+    "legal": {
+      "thirdPartyBrands": "제품 이름, 로고 및 브랜드는 각 소유자의 자산입니다. 사용은 식별 목적일 뿐 보증이나 제휴를 의미하지 않습니다."
    }
  },
  "chat": {
@@ -370,8 +483,7 @@
          "title": "이미지 편집",
          "prompt": "이미지 편집을 도와주세요. 먼저 편집할 이미지를 업로드하거나 지정하게 한 뒤, 편집된 결과를 생성해 주세요."
        }
-      },
-      "description": "질문을 하거나, 로컬 작업을 이어가거나, 새 스레드를 시작할 수 있습니다."
+      }
    },
    "header": {
      "toggleSidebar": "사이드바 전환",
@@ -475,6 +587,16 @@
        "decode_failed": "이 이미지를 디코딩할 수 없습니다",
        "too_large": "이미지가 너무 큽니다. 더 작은 걸로 시도해 주세요",
        "io": "이 파일을 읽을 수 없습니다"
+      },
+      "mentions": {
+        "ariaLabel": "앱 및 MCP",
+        "label": "플러그인",
+        "cliGroup": "CLI 앱",
+        "mcpGroup": "MCP 서버",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "@{{name}}을 로컬 CLI 앱으로 사용",
+        "mcpDescription": "@{{name}}을 MCP 서버로 사용"
      }
    },
    "scrollToBottom": "맨 아래로 스크롤",
@@ -499,7 +621,18 @@
    "imageAttachment": "이미지 첨부",
    "copyReply": "답변 복사",
    "copiedReply": "답변이 복사됨",
-    "turnLatencyTitle": "응답 시간(엔드투엔드)"
+    "turnLatencyTitle": "응답 시간(엔드투엔드)",
+    "activityThinkingFor": "{{duration}} 동안 생각 중",
+    "activityThoughtFor": "{{duration}} 동안 생각함",
+    "cliActivityRunningOne": "@{{name}} 사용 중",
+    "cliActivityRanOne": "@{{name}} 사용함",
+    "cliActivityFailedOne": "@{{name}} 실패",
+    "cliActivityRunningMany": "CLI 앱 {{count}}개 사용 중",
+    "cliActivityRanMany": "CLI 앱 {{count}}개 사용함",
+    "cliActivityFailedMany": "CLI 앱 {{count}}개 실패",
+    "cliRunRunning": "사용 중",
+    "cliRunRan": "사용함",
+    "cliRunFailed": "실패"
  },
  "lightbox": {
    "title": "이미지 미리보기",
@@ -81,7 +81,9 @@
      "image": "Image",
      "web": "Web",
      "runtime": "Runtime",
-      "advanced": "Advanced"
+      "advanced": "Advanced",
+      "cliApps": "Ứng dụng CLI",
+      "mcp": "MCP"
    },
    "sections": {
      "interface": "Giao diện",
@@ -97,7 +99,9 @@
      "identity": "Identity",
      "safety": "Safety",
      "capabilities": "Khả năng",
-      "integrations": "Integrations"
+      "integrations": "Integrations",
+      "cliApps": "Ứng dụng CLI",
+      "mcp": "MCP"
    },
    "rows": {
      "theme": "Giao diện",
@@ -141,7 +145,11 @@
      "ssrfWhitelist": "SSRF whitelist",
      "mcpServers": "MCP servers",
      "pathAppend": "PATH append",
-      "configurationDocs": "Configuration docs"
+      "configurationDocs": "Configuration docs",
+      "currentModel": "Mô hình hiện tại",
+      "brandLogos": "Logo thương hiệu",
+      "cliAppsCatalog": "Danh mục ứng dụng CLI",
+      "cliAppsFilter": "Bộ lọc ứng dụng CLI"
    },
    "help": {
      "theme": "Chuyển giữa giao diện sáng và tối.",
@@ -168,7 +176,13 @@
      "botIcon": "Short emoji or text shown beside the bot name.",
      "timezone": "IANA timezone used by runtime context and schedules.",
      "toolHintMaxLength": "Maximum characters shown in tool progress hints.",
-      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed."
+      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed.",
+      "currentModel": "Chọn mô hình nanobot dùng cho các câu trả lời mới.",
+      "selectedModelProvider": "Được đặt bởi mô hình đã chọn.",
+      "selectedModelValue": "Được đặt bởi mô hình đã chọn.",
+      "brandLogos": "Logo được tải từ tên miền thương hiệu, có biểu tượng cục bộ làm dự phòng.",
+      "cliAppsCatalog": "Duyệt các CLI ứng dụng mà nanobot có thể chạy cục bộ.",
+      "cliAppsFilter": "Tìm theo ứng dụng, danh mục hoặc khả năng."
    },
    "values": {
      "light": "Sáng",
@@ -185,9 +199,7 @@
      "on": "On",
      "off": "Off",
      "configured": "Configured",
-      "notConfigured": "Not configured",
-      "restartRequired": "Restart required",
-      "liveReload": "Live reload ready"
+      "notConfigured": "Not configured"
    },
    "status": {
      "loading": "Đang tải cài đặt...",
@@ -259,7 +271,8 @@
    },
    "providers": {
      "searchPlaceholder": "Search providers",
-      "noMatches": "No providers match this search."
+      "noMatches": "No providers match this search.",
+      "saveProvider": "Lưu nhà cung cấp"
    },
    "image": {
      "selectProvider": "Chọn nhà cung cấp",
@@ -267,6 +280,106 @@
      "selectSize": "Chọn kích thước",
      "configureProvider": "Cấu hình nhà cung cấp",
      "missingCredential": "Cấu hình nhà cung cấp này trước khi bật tạo ảnh."
+    },
+    "models": {
+      "selectModel": "Chọn mô hình",
+      "addConfiguration": "Thêm cấu hình",
+      "newConfiguration": "Cấu hình mô hình mới",
+      "newConfigurationHelp": "Lưu nhà cung cấp và mô hình thành một lựa chọn một lần nhấp.",
+      "configurationName": "Tên",
+      "configurationNamePlaceholder": "Viết nhanh"
+    },
+    "timezone": {
+      "select": "Chọn múi giờ",
+      "search": "Tìm múi giờ",
+      "empty": "Không có múi giờ phù hợp."
+    },
+    "cliApps": {
+      "allCategories": "Tất cả danh mục",
+      "availableCount": "{{count}} ứng dụng",
+      "installedCount": "Đã cài {{count}}",
+      "summary": "Đã cài {{installed}} / {{total}} CLI",
+      "filterAll": "Tất cả",
+      "filterInstalled": "CLI đã cài",
+      "filterNotInstalled": "Chưa cài",
+      "searchPlaceholder": "Tìm CLI",
+      "statusInstalled": "Đã cài",
+      "statusAvailable": "Có sẵn",
+      "statusMissing": "Thiếu phụ thuộc",
+      "statusUnsupported": "Không hỗ trợ",
+      "statusNotInstalled": "Chưa cài",
+      "unsupported": "Không hỗ trợ",
+      "loading": "Đang tải ứng dụng CLI...",
+      "empty": "Không có ứng dụng CLI nào khớp bộ lọc này.",
+      "readyTitle": "@{{name}} đã sẵn sàng",
+      "readyStatus": "Sẵn sàng",
+      "readyPrompt": "Dùng @{{name}} để xem CLI này làm được gì.",
+      "readyTry": "Thử @{{name}}",
+      "readyCopied": "Đã sao chép",
+      "openChat": "Mở chat",
+      "requires": "Yêu cầu",
+      "test": "Kiểm tra CLI",
+      "update": "Cập nhật CLI",
+      "uninstall": "Gỡ CLI",
+      "install": "Cài CLI",
+      "unavailable": "Không khả dụng",
+      "noDescription": "Không có mô tả."
+    },
+    "mcp": {
+      "allCategories": "Tất cả danh mục",
+      "summary": "Đã bật {{installed}} / {{total}} preset",
+      "filterAll": "Tất cả",
+      "filterInstalled": "Đã bật",
+      "filterNotInstalled": "Chưa bật",
+      "searchPlaceholder": "Tìm preset MCP",
+      "moreOptions": "Tùy chọn MCP khác",
+      "moreOptionsSubtitle": "Thêm máy chủ tùy chỉnh hoặc nhập mcp.json.",
+      "customTitle": "MCP tùy chỉnh",
+      "customSubtitle": "Thêm bất kỳ máy chủ MCP stdio, HTTP hoặc SSE nào.",
+      "customAction": "Tùy chỉnh",
+      "importAction": "Nhập",
+      "serverName": "Tên máy chủ",
+      "serverUrl": "URL",
+      "transport": "Giao thức truyền",
+      "command": "Lệnh",
+      "args": "Args JSON",
+      "headers": "Headers JSON",
+      "env": "Env JSON",
+      "timeout": "Thời gian chờ công cụ",
+      "advancedOptions": "Tùy chọn nâng cao",
+      "hideAdvanced": "Ẩn nâng cao",
+      "saveCustom": "Lưu MCP",
+      "configImport": "Nhập mcp.json",
+      "importConfig": "Nhập",
+      "restartRequired": "Khởi động lại nanobot để kết nối các công cụ MCP đã cập nhật.",
+      "toolsFound": "{{count}} công cụ",
+      "loading": "Đang tải preset MCP...",
+      "empty": "Không có preset MCP nào khớp bộ lọc này.",
+      "openDocs": "Mở tài liệu",
+      "test": "Kiểm tra",
+      "remove": "Xóa",
+      "enable": "Bật",
+      "enabled": "Đã bật",
+      "setup": "Kết nối",
+      "configure": "Kết nối",
+      "connectTitle": "Kết nối {{name}}",
+      "connectHint": "Thêm khóa từ phần cài đặt tài khoản của bạn.",
+      "saveAndEnable": "Lưu và bật",
+      "updateSetup": "Cập nhật thiết lập",
+      "configured": "đã cấu hình",
+      "keepExisting": "Để trống để giữ giá trị hiện tại",
+      "statusConfigured": "Đã cấu hình",
+      "statusMissingCredentials": "Cần khóa",
+      "statusMissingDependency": "Cần phụ thuộc",
+      "statusComingSoon": "Sắp ra mắt",
+      "statusNotInstalled": "Chưa bật",
+      "toolScope": "Công cụ",
+      "allTools": "Tất cả",
+      "noTools": "Không có",
+      "testForTools": "Chạy Kiểm tra để xem và chọn từng công cụ."
+    },
+    "legal": {
+      "thirdPartyBrands": "Tên sản phẩm, logo và thương hiệu thuộc về chủ sở hữu tương ứng. Việc sử dụng chỉ nhằm nhận diện và không ngụ ý được xác nhận."
    }
  },
  "chat": {
@@ -370,8 +483,7 @@
          "title": "Chỉnh sửa ảnh",
          "prompt": "Giúp tôi chỉnh sửa một ảnh. Trước tiên hãy yêu cầu tôi tải lên hoặc chỉ định ảnh, rồi tạo kết quả đã chỉnh sửa."
        }
-      },
-      "description": "Hãy đặt câu hỏi, tiếp tục công việc cục bộ hoặc bắt đầu một luồng mới."
+      }
    },
    "header": {
      "toggleSidebar": "Bật/tắt thanh bên",
@@ -475,6 +587,16 @@
        "decode_failed": "Không thể giải mã ảnh này",
        "too_large": "Ảnh quá lớn — hãy thử ảnh nhỏ hơn",
        "io": "Không thể đọc tệp này"
+      },
+      "mentions": {
+        "ariaLabel": "Ứng dụng và MCP",
+        "label": "Plugin",
+        "cliGroup": "Ứng dụng CLI",
+        "mcpGroup": "Máy chủ MCP",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "Dùng @{{name}} như ứng dụng CLI cục bộ",
+        "mcpDescription": "Dùng @{{name}} như máy chủ MCP"
      }
    },
    "scrollToBottom": "Cuộn xuống cuối",
@@ -499,7 +621,18 @@
    "imageAttachment": "Tệp hình ảnh đính kèm",
    "copyReply": "Sao chép trả lời",
    "copiedReply": "Đã sao chép trả lời",
-    "turnLatencyTitle": "Thời gian phản hồi (end-to-end)"
+    "turnLatencyTitle": "Thời gian phản hồi (end-to-end)",
+    "activityThinkingFor": "Đang suy nghĩ trong {{duration}}",
+    "activityThoughtFor": "Đã suy nghĩ trong {{duration}}",
+    "cliActivityRunningOne": "Đang dùng @{{name}}",
+    "cliActivityRanOne": "Đã dùng @{{name}}",
+    "cliActivityFailedOne": "@{{name}} thất bại",
+    "cliActivityRunningMany": "Đang dùng {{count}} ứng dụng CLI",
+    "cliActivityRanMany": "Đã dùng {{count}} ứng dụng CLI",
+    "cliActivityFailedMany": "{{count}} ứng dụng CLI thất bại",
+    "cliRunRunning": "Đang dùng",
+    "cliRunRan": "Đã dùng",
+    "cliRunFailed": "Thất bại"
  },
  "lightbox": {
    "title": "Xem trước ảnh",
@@ -9,6 +9,18 @@
      "title": "无法连接到 nanobot",
      "gatewayHint": "请确认 gateway 已启动（`nanobot gateway`），并且当前页面与 gateway 运行在同一台机器上。"
    },
+    "auth": {
+      "title": "需要验证",
+      "hint": "请输入 gateway 配置中的 tokenIssueSecret。",
+      "placeholder": "密码",
+      "submit": "连接",
+      "invalid": "密码无效，请重试。"
+    },
+    "account": {
+      "section": "账户",
+      "logoutHint": "断开此浏览器与 gateway 的连接。",
+      "logout": "退出登录"
+    },
    "system": {
      "section": "系统",
      "restartHint": "重启 nanobot 以应用运行时更改。",
@@ -69,6 +81,7 @@
      "image": "图片",
      "web": "网页",
      "cliApps": "CLI 应用",
+      "mcp": "MCP",
      "runtime": "运行时",
      "advanced": "高级"
    },
@@ -84,11 +97,20 @@
      "webSearch": "网页搜索",
      "webBehavior": "行为",
      "cliApps": "CLI 应用",
+      "mcp": "MCP",
      "identity": "身份",
      "safety": "安全",
      "capabilities": "能力",
      "integrations": "集成"
    },
+    "models": {
+      "selectModel": "选择模型",
+      "addConfiguration": "添加配置",
+      "newConfiguration": "新建模型配置",
+      "newConfigurationHelp": "把服务商和模型保存为一个可直接切换的选项。",
+      "configurationName": "名称",
+      "configurationNamePlaceholder": "快速写作"
+    },
    "rows": {
      "theme": "主题",
      "language": "语言",
@@ -100,6 +122,7 @@
      "gateway": "网关",
      "restartState": "重启状态",
      "pendingChanges": "待处理更改",
+      "currentModel": "当前模型",
      "selectedPreset": "选中的预设",
      "presetModel": "预设模型",
      "density": "密度",
@@ -142,6 +165,9 @@
      "provider": "选择新模型请求使用的服务商。",
      "model": "设置 nanobot 默认使用的模型名称。",
      "configPath": "当前网关正在使用的配置文件。",
+      "currentModel": "选择 nanobot 接下来回复时使用的模型。",
+      "selectedModelProvider": "由当前模型决定。",
+      "selectedModelValue": "由当前模型决定。",
      "selectedPreset": "命名预设在这里只读；需要编辑时请改 config.json。",
      "presetModel": "切回 Default 后可在 WebUI 编辑模型和服务商。",
      "density": "仅保存在当前浏览器。",
@@ -166,6 +192,11 @@
      "cliAppsFilter": "按应用、分类或能力搜索。",
      "advancedReadOnly": "高级安全控制在 WebUI 中只读；需要时请谨慎编辑 config.json。"
    },
+    "timezone": {
+      "select": "选择时区",
+      "search": "搜索时区",
+      "empty": "没有匹配的时区。"
+    },
    "cliApps": {
      "allCategories": "全部分类",
      "availableCount": "{{count}} 个应用",
@@ -197,6 +228,59 @@
      "unavailable": "不可用",
      "noDescription": "暂无描述。"
    },
+    "mcp": {
+      "allCategories": "全部分类",
+      "summary": "已启用 {{installed}} / {{total}} 个预设",
+      "filterAll": "全部",
+      "filterInstalled": "已启用",
+      "filterNotInstalled": "未启用",
+      "searchPlaceholder": "搜索 MCP 预设",
+      "moreOptions": "更多 MCP 选项",
+      "moreOptionsSubtitle": "添加自定义服务，或导入 mcp.json。",
+      "customTitle": "自定义 MCP",
+      "customSubtitle": "添加任意 stdio、HTTP 或 SSE MCP 服务。",
+      "customAction": "自定义",
+      "importAction": "导入",
+      "serverName": "服务名",
+      "serverUrl": "URL",
+      "transport": "传输方式",
+      "command": "命令",
+      "args": "参数 JSON",
+      "headers": "Headers JSON",
+      "env": "环境变量 JSON",
+      "timeout": "工具超时",
+      "advancedOptions": "高级选项",
+      "hideAdvanced": "收起高级",
+      "saveCustom": "保存 MCP",
+      "configImport": "导入 mcp.json",
+      "importConfig": "导入",
+      "restartRequired": "重启 nanobot 以连接更新后的 MCP 工具。",
+      "toolsFound": "{{count}} 个工具",
+      "loading": "正在加载 MCP 预设...",
+      "empty": "没有匹配的 MCP 预设。",
+      "openDocs": "打开文档",
+      "test": "测试",
+      "remove": "移除",
+      "enable": "启用",
+      "enabled": "已启用",
+      "setup": "连接",
+      "configure": "连接",
+      "connectTitle": "连接 {{name}}",
+      "connectHint": "填入你账户里的 key。",
+      "saveAndEnable": "保存并启用",
+      "updateSetup": "更新配置",
+      "configured": "已配置",
+      "keepExisting": "留空则保留当前值",
+      "statusConfigured": "已配置",
+      "statusMissingCredentials": "需要 key",
+      "statusMissingDependency": "缺少依赖",
+      "statusComingSoon": "暂不支持",
+      "statusNotInstalled": "未启用",
+      "toolScope": "工具",
+      "allTools": "全部",
+      "noTools": "不暴露",
+      "testForTools": "运行测试后，可以查看并选择单个工具。"
+    },
    "values": {
      "light": "浅色",
      "dark": "深色",
@@ -284,7 +368,8 @@
    },
    "providers": {
      "searchPlaceholder": "搜索服务商",
-      "noMatches": "没有匹配的服务商。"
+      "noMatches": "没有匹配的服务商。",
+      "saveProvider": "保存服务商"
    },
    "legal": {
      "thirdPartyBrands": "产品名称、Logo 和品牌归各自所有者所有；此处仅用于识别，不代表背书或合作。"
@@ -492,8 +577,14 @@
        }
      },
      "mentions": {
-        "ariaLabel": "CLI 应用",
-        "label": "CLI 应用"
+        "ariaLabel": "应用和 MCP",
+        "label": "插件",
+        "cliGroup": "CLI 应用",
+        "mcpGroup": "MCP 服务",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "使用 @{{name}} 调用本地 CLI",
+        "mcpDescription": "使用 @{{name}} 调用 MCP 服务"
      },
      "encoding": "处理中…",
      "remove": "移除附件",
@@ -527,15 +618,17 @@
    "agentActivityToolsOnly": "{{tools}} 次工具调用",
    "agentActivityLiveSummary": "进行中… · {{reasoning}} 步 · {{tools}} 次工具调用",
    "agentActivityLiveToolsOnly": "进行中… · {{tools}} 次工具调用",
-    "cliActivityRunningOne": "正在运行 CLI @{{name}}",
-    "cliActivityRanOne": "已运行 CLI @{{name}}",
-    "cliActivityFailedOne": "CLI 调用失败 @{{name}}",
-    "cliActivityRunningMany": "正在运行 {{count}} 个 CLI",
-    "cliActivityRanMany": "已运行 {{count}} 个 CLI",
-    "cliActivityFailedMany": "{{count}} 个 CLI 调用失败",
-    "cliRunRunning": "正在运行 CLI",
-    "cliRunRan": "已运行 CLI",
-    "cliRunFailed": "CLI 调用失败",
+    "activityThinkingFor": "思考中 {{duration}}",
+    "activityThoughtFor": "思考了 {{duration}}",
+    "cliActivityRunningOne": "正在使用 @{{name}}",
+    "cliActivityRanOne": "已使用 @{{name}}",
+    "cliActivityFailedOne": "使用 @{{name}} 失败",
+    "cliActivityRunningMany": "正在使用 {{count}} 个 CLI 应用",
+    "cliActivityRanMany": "已使用 {{count}} 个 CLI 应用",
+    "cliActivityFailedMany": "{{count}} 个 CLI 应用失败",
+    "cliRunRunning": "正在使用",
+    "cliRunRan": "已使用",
+    "cliRunFailed": "失败",
    "imageAttachment": "图片附件",
    "copyReply": "复制回复",
    "copiedReply": "已复制回复",
@@ -81,7 +81,9 @@
      "image": "Image",
      "web": "Web",
      "runtime": "Runtime",
-      "advanced": "Advanced"
+      "advanced": "Advanced",
+      "cliApps": "CLI 應用",
+      "mcp": "MCP"
    },
    "sections": {
      "interface": "介面",
@@ -97,7 +99,9 @@
      "identity": "Identity",
      "safety": "Safety",
      "capabilities": "功能",
-      "integrations": "Integrations"
+      "integrations": "Integrations",
+      "cliApps": "CLI 應用",
+      "mcp": "MCP"
    },
    "rows": {
      "theme": "主題",
@@ -141,7 +145,11 @@
      "ssrfWhitelist": "SSRF whitelist",
      "mcpServers": "MCP servers",
      "pathAppend": "PATH append",
-      "configurationDocs": "Configuration docs"
+      "configurationDocs": "Configuration docs",
+      "currentModel": "目前模型",
+      "brandLogos": "品牌標誌",
+      "cliAppsCatalog": "CLI 應用目錄",
+      "cliAppsFilter": "CLI 應用篩選"
    },
    "help": {
      "theme": "在淺色與深色外觀之間切換。",
@@ -168,7 +176,13 @@
      "botIcon": "Short emoji or text shown beside the bot name.",
      "timezone": "IANA timezone used by runtime context and schedules.",
      "toolHintMaxLength": "Maximum characters shown in tool progress hints.",
-      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed."
+      "advancedReadOnly": "Advanced safety controls are read-only in WebUI. Edit config.json intentionally when needed.",
+      "currentModel": "選擇 nanobot 接下來回覆時使用的模型。",
+      "selectedModelProvider": "由目前模型決定。",
+      "selectedModelValue": "由目前模型決定。",
+      "brandLogos": "標誌會從品牌網域載入，並提供本地圖示作為備援。",
+      "cliAppsCatalog": "瀏覽 nanobot 可在本機執行的應用 CLI。",
+      "cliAppsFilter": "按應用、分類或能力搜尋。"
    },
    "values": {
      "light": "淺色",
@@ -185,9 +199,7 @@
      "on": "On",
      "off": "Off",
      "configured": "Configured",
-      "notConfigured": "Not configured",
-      "restartRequired": "Restart required",
-      "liveReload": "Live reload ready"
+      "notConfigured": "Not configured"
    },
    "status": {
      "loading": "正在載入設定...",
@@ -259,7 +271,8 @@
    },
    "providers": {
      "searchPlaceholder": "Search providers",
-      "noMatches": "No providers match this search."
+      "noMatches": "No providers match this search.",
+      "saveProvider": "儲存服務商"
    },
    "image": {
      "selectProvider": "選擇服務商",
@@ -267,6 +280,106 @@
      "selectSize": "選擇尺寸",
      "configureProvider": "設定服務商",
      "missingCredential": "啟用圖片生成前，請先設定此服務商。"
+    },
+    "models": {
+      "selectModel": "選擇模型",
+      "addConfiguration": "新增設定",
+      "newConfiguration": "新增模型設定",
+      "newConfigurationHelp": "把服務商和模型儲存為一個可直接切換的選項。",
+      "configurationName": "名稱",
+      "configurationNamePlaceholder": "快速寫作"
+    },
+    "timezone": {
+      "select": "選擇時區",
+      "search": "搜尋時區",
+      "empty": "沒有符合的時區。"
+    },
+    "cliApps": {
+      "allCategories": "全部分類",
+      "availableCount": "{{count}} 個應用",
+      "installedCount": "已安裝 {{count}} 個",
+      "summary": "已安裝 {{installed}} / {{total}} 個 CLI",
+      "filterAll": "全部",
+      "filterInstalled": "已安裝的 CLI",
+      "filterNotInstalled": "未安裝",
+      "searchPlaceholder": "搜尋 CLI",
+      "statusInstalled": "已安裝",
+      "statusAvailable": "可用",
+      "statusMissing": "缺少相依項",
+      "statusUnsupported": "不支援",
+      "statusNotInstalled": "未安裝",
+      "unsupported": "不支援",
+      "loading": "正在載入 CLI 應用...",
+      "empty": "沒有符合此篩選條件的 CLI 應用。",
+      "readyTitle": "@{{name}} 已就緒",
+      "readyStatus": "就緒",
+      "readyPrompt": "使用 @{{name}} 查看這個 CLI 能做什麼。",
+      "readyTry": "試用 @{{name}}",
+      "readyCopied": "已複製",
+      "openChat": "開啟聊天",
+      "requires": "需要",
+      "test": "測試 CLI",
+      "update": "更新 CLI",
+      "uninstall": "解除安裝 CLI",
+      "install": "安裝 CLI",
+      "unavailable": "不可用",
+      "noDescription": "暫無描述。"
+    },
+    "mcp": {
+      "allCategories": "全部分類",
+      "summary": "已啟用 {{installed}} / {{total}} 個預設",
+      "filterAll": "全部",
+      "filterInstalled": "已啟用",
+      "filterNotInstalled": "未啟用",
+      "searchPlaceholder": "搜尋 MCP 預設",
+      "moreOptions": "更多 MCP 選項",
+      "moreOptionsSubtitle": "新增自訂服務，或匯入 mcp.json。",
+      "customTitle": "自訂 MCP",
+      "customSubtitle": "新增任意 stdio、HTTP 或 SSE MCP 服務。",
+      "customAction": "自訂",
+      "importAction": "匯入",
+      "serverName": "服務名稱",
+      "serverUrl": "URL",
+      "transport": "傳輸方式",
+      "command": "指令",
+      "args": "Args JSON",
+      "headers": "Headers JSON",
+      "env": "Env JSON",
+      "timeout": "工具逾時",
+      "advancedOptions": "進階選項",
+      "hideAdvanced": "隱藏進階",
+      "saveCustom": "儲存 MCP",
+      "configImport": "匯入 mcp.json",
+      "importConfig": "匯入",
+      "restartRequired": "重新啟動 nanobot 以連接更新後的 MCP 工具。",
+      "toolsFound": "{{count}} 個工具",
+      "loading": "正在載入 MCP 預設...",
+      "empty": "沒有符合此篩選條件的 MCP 預設。",
+      "openDocs": "開啟文件",
+      "test": "測試",
+      "remove": "移除",
+      "enable": "啟用",
+      "enabled": "已啟用",
+      "setup": "連接",
+      "configure": "連接",
+      "connectTitle": "連接 {{name}}",
+      "connectHint": "從你的帳號設定中加入金鑰。",
+      "saveAndEnable": "儲存並啟用",
+      "updateSetup": "更新設定",
+      "configured": "已設定",
+      "keepExisting": "留空以保留目前值",
+      "statusConfigured": "已設定",
+      "statusMissingCredentials": "需要金鑰",
+      "statusMissingDependency": "需要相依項",
+      "statusComingSoon": "即將推出",
+      "statusNotInstalled": "未啟用",
+      "toolScope": "工具",
+      "allTools": "全部",
+      "noTools": "無",
+      "testForTools": "執行測試以檢查並選擇個別工具。"
+    },
+    "legal": {
+      "thirdPartyBrands": "產品名稱、標誌與品牌均屬於其各自擁有者。使用僅為識別用途，並不代表背書。"
    }
  },
  "chat": {
@@ -370,8 +483,7 @@
          "title": "編輯圖片",
          "prompt": "幫我編輯一張圖片。先請我上傳或指定要編輯的圖片，然後生成編輯後的結果。"
        }
-      },
-      "description": "你可以提問、延續本地工作，或是開始新的執行緒。"
+      }
    },
    "header": {
      "toggleSidebar": "切換側邊欄",
@@ -475,6 +587,16 @@
        "decode_failed": "無法解碼這張圖片",
        "too_large": "圖片太大，請換一張小一點的",
        "io": "無法讀取這個檔案"
+      },
+      "mentions": {
+        "ariaLabel": "應用和 MCP",
+        "label": "插件",
+        "cliGroup": "CLI 應用",
+        "mcpGroup": "MCP 服務",
+        "cliBadge": "CLI",
+        "mcpBadge": "MCP",
+        "cliDescription": "使用 @{{name}} 呼叫本機 CLI",
+        "mcpDescription": "使用 @{{name}} 呼叫 MCP 服務"
      }
    },
    "scrollToBottom": "捲動到底部",
@@ -499,7 +621,18 @@
    "imageAttachment": "圖片附件",
    "copyReply": "複製回覆",
    "copiedReply": "已複製回覆",
-    "turnLatencyTitle": "本輪耗時（端到端）"
+    "turnLatencyTitle": "本輪耗時（端到端）",
+    "activityThinkingFor": "思考中，已 {{duration}}",
+    "activityThoughtFor": "已思考 {{duration}}",
+    "cliActivityRunningOne": "正在使用 @{{name}}",
+    "cliActivityRanOne": "已使用 @{{name}}",
+    "cliActivityFailedOne": "@{{name}} 失敗",
+    "cliActivityRunningMany": "正在使用 {{count}} 個 CLI 應用",
+    "cliActivityRanMany": "已使用 {{count}} 個 CLI 應用",
+    "cliActivityFailedMany": "{{count}} 個 CLI 應用失敗",
+    "cliRunRunning": "使用中",
+    "cliRunRan": "已使用",
+    "cliRunFailed": "失敗"
  },
  "lightbox": {
    "title": "圖片預覽",
@@ -2,6 +2,8 @@ import type {
  ChatSummary,
  CliAppsPayload,
  ImageGenerationSettingsUpdate,
+  McpPresetsPayload,
+  ModelConfigurationCreate,
  ProviderSettingsUpdate,
  SettingsPayload,
  SettingsUpdate,
@@ -39,6 +41,21 @@ async function request<T>(
  return (await res.json()) as T;
 }

+function mcpValuesHeader(values: Record<string, unknown>): HeadersInit | undefined {
+  const payload: Record<string, unknown> = {};
+  Object.entries(values).forEach(([key, value]) => {
+    if (value === null || value === undefined) return;
+    if (typeof value === "string") {
+      const trimmed = value.trim();
+      if (trimmed) payload[key] = trimmed;
+      return;
+    }
+    payload[key] = value;
+  });
+  if (!Object.keys(payload).length) return undefined;
+  return { "X-Nanobot-MCP-Values": JSON.stringify(payload) };
+}
+
 function splitKey(key: string): { channel: string; chatId: string } {
  const idx = key.indexOf(":");
  if (idx === -1) return { channel: "", chatId: key };
@@ -125,6 +142,66 @@ export async function runCliAppAction(
  return request<CliAppsPayload>(`${base}/api/settings/cli-apps/${action}?${query}`, token);
 }

+export async function fetchMcpPresets(
+  token: string,
+  base: string = "",
+): Promise<McpPresetsPayload> {
+  return request<McpPresetsPayload>(`${base}/api/settings/mcp-presets`, token);
+}
+
+export async function runMcpPresetAction(
+  token: string,
+  action: "enable" | "remove" | "test",
+  name: string,
+  values: Record<string, string> = {},
+  base: string = "",
+): Promise<McpPresetsPayload> {
+  const query = new URLSearchParams();
+  query.set("name", name);
+  return request<McpPresetsPayload>(
+    `${base}/api/settings/mcp-presets/${action}?${query}`,
+    token,
+    { headers: mcpValuesHeader(values) },
+  );
+}
+
+export async function saveCustomMcpServer(
+  token: string,
+  values: Record<string, string>,
+  base: string = "",
+): Promise<McpPresetsPayload> {
+  return request<McpPresetsPayload>(
+    `${base}/api/settings/mcp-presets/custom`,
+    token,
+    { headers: mcpValuesHeader(values) },
+  );
+}
+
+export async function importMcpConfig(
+  token: string,
+  config: string,
+  base: string = "",
+): Promise<McpPresetsPayload> {
+  return request<McpPresetsPayload>(
+    `${base}/api/settings/mcp-presets/import`,
+    token,
+    { headers: mcpValuesHeader({ config }) },
+  );
+}
+
+export async function updateMcpServerTools(
+  token: string,
+  name: string,
+  enabledTools: string[],
+  base: string = "",
+): Promise<McpPresetsPayload> {
+  return request<McpPresetsPayload>(
+    `${base}/api/settings/mcp-presets/tools`,
+    token,
+    { headers: mcpValuesHeader({ name, enabled_tools: enabledTools }) },
+  );
+}
+
 export async function listSlashCommands(
  token: string,
  base: string = "",
@@ -188,6 +265,22 @@ export async function updateSettings(
  return request<SettingsPayload>(`${base}/api/settings/update?${query}`, token);
 }

+export async function createModelConfiguration(
+  token: string,
+  configuration: ModelConfigurationCreate,
+  base: string = "",
+): Promise<SettingsPayload> {
+  const query = new URLSearchParams();
+  if (configuration.name !== undefined) query.set("name", configuration.name);
+  query.set("label", configuration.label);
+  query.set("provider", configuration.provider);
+  query.set("model", configuration.model);
+  return request<SettingsPayload>(
+    `${base}/api/settings/model-configurations/create?${query}`,
+    token,
+  );
+}
+
 export async function updateProviderSettings(
  token: string,
  update: ProviderSettingsUpdate,
@@ -0,0 +1,20 @@
+import type { McpPresetInfo, McpPresetsPayload } from "@/lib/types";
+
+export const MCP_PRESETS_CHANGED_EVENT = "nanobot:mcp-presets-changed";
+
+export function isMcpPresetsPayload(value: unknown): value is McpPresetsPayload {
+  return !!value
+    && typeof value === "object"
+    && Array.isArray((value as { presets?: unknown }).presets);
+}
+
+export function installedMcpPresetsFromPayload(payload: McpPresetsPayload): McpPresetInfo[] {
+  return payload.presets.filter((preset) => preset.installed && preset.configured);
+}
+
+export function notifyMcpPresetsChanged(payload: McpPresetsPayload): void {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent<McpPresetsPayload>(MCP_PRESETS_CHANGED_EVENT, {
+    detail: payload,
+  }));
+}
@@ -4,6 +4,7 @@ import type {
  Outbound,
  OutboundCliAppMention,
  OutboundImageGeneration,
+  OutboundMcpPresetMention,
  OutboundMedia,
  GoalStateWsPayload,
 } from "./types";
@@ -305,7 +306,11 @@ export class NanobotClient {
    chatId: string,
    content: string,
    media?: OutboundMedia[],
-    options?: { imageGeneration?: OutboundImageGeneration; cliApps?: OutboundCliAppMention[] },
+    options?: {
+      imageGeneration?: OutboundImageGeneration;
+      cliApps?: OutboundCliAppMention[];
+      mcpPresets?: OutboundMcpPresetMention[];
+    },
  ): void {
    this.knownChats.add(chatId);
    const frame: Outbound = {
@@ -315,6 +320,7 @@ export class NanobotClient {
      ...(media && media.length > 0 ? { media } : {}),
      ...(options?.imageGeneration ? { image_generation: options.imageGeneration } : {}),
      ...(options?.cliApps?.length ? { cli_apps: options.cliApps } : {}),
+      ...(options?.mcpPresets?.length ? { mcp_presets: options.mcpPresets } : {}),
      webui: true,
    };
    this.queueSend(frame);
@@ -0,0 +1,188 @@
+export interface ProviderBrand {
+  logoUrl: string;
+  logoUrls: string[];
+  color: string;
+  initials: string;
+}
+
+function officialFaviconUrl(domain: string): string {
+  return `https://${domain}/favicon.ico`;
+}
+
+function duckDuckGoFaviconUrl(domain: string): string {
+  return `https://icons.duckduckgo.com/ip3/${encodeURIComponent(domain)}.ico`;
+}
+
+function googleFaviconUrl(domain: string): string {
+  return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(domain)}&sz=64`;
+}
+
+export function faviconUrls(domain: string): string[] {
+  const faviconDomain = faviconDomainFromValue(domain);
+  return [
+    officialFaviconUrl(faviconDomain),
+    duckDuckGoFaviconUrl(faviconDomain),
+    googleFaviconUrl(domain),
+  ];
+}
+
+function brand(
+  domain: string,
+  color: string,
+  initials: string,
+  logoOverrides: string[] = [],
+): ProviderBrand {
+  const logoUrls = [...logoOverrides];
+  faviconUrls(domain).forEach((url) => addUniqueLogoUrl(logoUrls, url));
+  return {
+    logoUrl: logoUrls[0],
+    logoUrls,
+    color,
+    initials,
+  };
+}
+
+function addUniqueLogoUrl(urls: string[], url: string | null | undefined): void {
+  const value = url?.trim();
+  if (value && !urls.includes(value)) urls.push(value);
+}
+
+function domainFromLogoUrl(url: string): string | null {
+  if (url.startsWith("/")) return null;
+  try {
+    const parsed = new URL(url);
+    if (!/^https?:$/.test(parsed.protocol)) return null;
+    const host = parsed.hostname.toLowerCase();
+    if (host === "www.google.com" || host === "google.com") {
+      return parsed.searchParams.get("domain");
+    }
+    if (host === "icons.duckduckgo.com") {
+      const match = parsed.pathname.match(/^\/ip3\/(.+)\.ico$/);
+      return match ? decodeURIComponent(match[1]) : null;
+    }
+    return host.replace(/^www\./, "");
+  } catch {
+    return null;
+  }
+}
+
+function faviconDomainFromValue(value: string): string {
+  const host = value.split("/")[0]?.trim();
+  return host || value;
+}
+
+export function logoFallbackUrls(logoUrl: string | null | undefined): string[] {
+  const value = logoUrl?.trim();
+  if (!value) return [];
+  if (value.startsWith("/")) return [value];
+
+  const urls: string[] = [];
+  const domain = domainFromLogoUrl(value);
+  const isFaviconProxy = /^(https?:\/\/)?(www\.google\.com|google\.com|icons\.duckduckgo\.com)\//i.test(value);
+  if (domain && isFaviconProxy) {
+    addUniqueLogoUrl(urls, value);
+    faviconUrls(domain).forEach((url) => addUniqueLogoUrl(urls, url));
+    return urls;
+  }
+  addUniqueLogoUrl(urls, value);
+  if (domain) faviconUrls(domain).forEach((url) => addUniqueLogoUrl(urls, url));
+  return urls;
+}
+
+export const PROVIDER_BRAND_ALIASES: Record<string, string> = {
+  brave_search: "brave",
+  byteplus_coding_plan: "byteplus",
+  minimaxAnthropic: "minimax",
+  minimax_anthropic: "minimax",
+  openai_codex: "openai",
+  volcengine_coding_plan: "volcengine",
+};
+
+export const PROVIDER_LABEL_ALIASES: Record<string, string> = {
+  brave_search: "Brave Search",
+  byteplus_coding_plan: "BytePlus",
+  minimaxAnthropic: "MiniMax",
+  minimax_anthropic: "MiniMax",
+  openai_codex: "OpenAI",
+  volcengine_coding_plan: "Volcengine",
+};
+
+const PROVIDER_BRANDS: Record<string, ProviderBrand> = {
+  aihubmix: brand("aihubmix.com", "#111827", "AH"),
+  ant_ling: brand("ant-ling.com", "#7C3AED", "AL"),
+  anthropic: brand("anthropic.com", "#D97757", "A"),
+  atomic_chat: brand("atomic.chat", "#111827", "AC"),
+  azure_openai: brand("azure.microsoft.com", "#0078D4", "AZ"),
+  bedrock: brand("aws.amazon.com", "#FF9900", "AWS"),
+  brave: brand("brave.com", "#FB542B", "B"),
+  byteplus: brand("byteplus.com", "#325CFF", "BP"),
+  dashscope: brand("dashscope.aliyun.com", "#FF6A00", "DS"),
+  deepseek: brand("deepseek.com", "#4D6BFE", "DS"),
+  duckduckgo: brand("duckduckgo.com", "#DE5833", "DDG"),
+  exa: brand("exa.ai", "#5B5BF6", "E"),
+  gemini: brand("gemini.google.com", "#4285F4", "G"),
+  github_copilot: brand("github.com", "#24292F", "GH"),
+  groq: brand("groq.com", "#F55036", "GQ"),
+  huggingface: brand("huggingface.co", "#FF9D00", "HF"),
+  jina: brand("jina.ai", "#7C3AED", "J"),
+  kagi: brand("kagi.com", "#FFB319", "K"),
+  lm_studio: brand("lmstudio.ai", "#111827", "LM"),
+  longcat: brand("longcat.chat", "#111827", "LC"),
+  minimax: brand("minimax.io", "#111827", "MM"),
+  mistral: brand("mistral.ai", "#FA520F", "M"),
+  moonshot: brand("moonshot.ai", "#111827", "MS"),
+  novita: brand("novita.ai", "#7C3AED", "N"),
+  olostep: brand("olostep.com", "#111827", "O"),
+  nvidia: brand("nvidia.com", "#76B900", "NV"),
+  ollama: brand("ollama.com", "#111827", "O"),
+  openai: brand("openai.com", "#111827", "AI"),
+  openrouter: brand("openrouter.ai", "#111827", "OR"),
+  ovms: brand("openvino.ai", "#0071C5", "OV"),
+  qianfan: brand("cloud.baidu.com", "#2932E1", "QF"),
+  searxng: brand("searxng.org", "#3050FF", "SX"),
+  siliconflow: brand("siliconflow.cn", "#111827", "SF"),
+  skywork: brand("skywork.ai", "#5B5BF6", "SW"),
+  stepfun: brand("stepfun.com", "#2F6BFF", "SF"),
+  tavily: brand("tavily.com", "#111827", "T"),
+  volcengine: brand("volcengine.com", "#1664FF", "VE"),
+  vllm: brand("vllm.ai", "#2563EB", "VL"),
+  xiaomi_mimo: brand("xiaomimimo.com", "#FF6900", "MI"),
+  zhipu: brand("z.ai", "#155EEF", "Z", [
+    "https://z-cdn.chatglm.cn/z-ai/static/logo.svg",
+    "https://www.google.com/s2/favicons?domain=z.ai&sz=64",
+  ]),
+};
+
+export function providerBrand(provider: string | null | undefined): ProviderBrand | null {
+  if (!provider) return null;
+  const key = PROVIDER_BRAND_ALIASES[provider] ?? provider;
+  return PROVIDER_BRANDS[key] ?? null;
+}
+
+export function providerDisplayLabel(
+  providers: Array<{ name: string; label: string }>,
+  value: string | null | undefined,
+): string {
+  if (!value) return "";
+  return providers.find((provider) => provider.name === value)?.label
+    ?? PROVIDER_LABEL_ALIASES[value]
+    ?? value;
+}
+
+export function inferProviderFromModelName(modelName: string | null | undefined): string | null {
+  const normalized = (modelName ?? "").trim().toLowerCase();
+  if (!normalized) return null;
+  const prefix = normalized.split(/[/:]/)[0];
+  if (providerBrand(prefix)) return prefix;
+  if (/claude|anthropic/.test(normalized)) return "anthropic";
+  if (/gpt-|^o\d|chatgpt|openai/.test(normalized)) return "openai";
+  if (/deepseek/.test(normalized)) return "deepseek";
+  if (/gemini/.test(normalized)) return "gemini";
+  if (/qwen|dashscope/.test(normalized)) return "dashscope";
+  if (/kimi|moonshot/.test(normalized)) return "moonshot";
+  if (/minimax/.test(normalized)) return "minimax";
+  if (/mistral|mixtral/.test(normalized)) return "mistral";
+  if (/skywork|skyclaw/.test(normalized)) return "skywork";
+  if (/ring-/.test(normalized)) return "ant_ling";
+  return null;
+}
@@ -53,6 +53,8 @@ export interface UIMessage {
  media?: UIMediaAttachment[];
  /** App-specific CLI adapters explicitly attached to this user turn. */
  cliApps?: UICliAppAttachment[];
+  /** Settings-managed MCP presets explicitly attached to this user turn. */
+  mcpPresets?: UIMcpPresetAttachment[];
  /** Assistant turn: accumulated model reasoning / thinking text. Built up
   * incrementally from ``reasoning_delta`` frames; finalized when
   * ``reasoning_end`` arrives. */
@@ -73,6 +75,17 @@ export interface UICliAppAttachment {
  brand_color?: string | null;
 }

+export interface UIMcpPresetAttachment {
+  name: string;
+  display_name?: string;
+  category?: string;
+  transport?: string;
+  status?: string;
+  configured?: boolean;
+  logo_url?: string | null;
+  brand_color?: string | null;
+}
+
 /** Structured UI blob on ``progress`` WS frames; channels may add more ``kind`` values later. */
 export interface AgentUIBlob {
  kind: string;
@@ -294,6 +307,69 @@ export interface CliAppsPayload {
  };
 }

+export interface McpPresetField {
+  name: string;
+  label: string;
+  secret: boolean;
+  required: boolean;
+  configured: boolean;
+  placeholder?: string;
+  env_var?: string | null;
+}
+
+export interface McpPresetInfo {
+  name: string;
+  display_name: string;
+  category: string;
+  description: string;
+  docs_url: string;
+  transport: "stdio" | "streamableHttp" | "sse" | "oauth" | string;
+  requires: string;
+  note: string;
+  install_supported: boolean;
+  installed: boolean;
+  configured: boolean;
+  available: boolean;
+  status: "not_installed" | "configured" | "missing_credentials" | "missing_dependency" | "coming_soon" | string;
+  logo_url?: string | null;
+  brand_color?: string | null;
+  required_fields: McpPresetField[];
+  connection_summary: string;
+  tool_count?: number;
+  tool_names?: string[];
+  checked_at?: string | null;
+  error?: string | null;
+  enabled_tools?: string[];
+  source?: "preset" | "custom" | string;
+}
+
+export interface McpPresetsPayload {
+  presets: McpPresetInfo[];
+  installed_count: number;
+  requires_restart?: boolean;
+  hot_reload?: {
+    ok: boolean;
+    message: string;
+    added?: string[];
+    changed?: string[];
+    removed?: string[];
+    retried?: string[];
+    connected?: string[];
+    configured?: string[];
+    failed?: string[];
+    tools_removed?: number;
+    requires_restart?: boolean;
+  };
+  last_action?: {
+    ok: boolean;
+    message: string;
+    tool_count?: number;
+    tool_names?: string[];
+    checked_at?: string | null;
+    error?: string | null;
+  };
+}
+
 export interface SettingsUpdate {
  model?: string;
  provider?: string;
@@ -304,6 +380,13 @@ export interface SettingsUpdate {
  toolHintMaxLength?: number;
 }

+export interface ModelConfigurationCreate {
+  name?: string;
+  label: string;
+  provider: string;
+  model: string;
+}
+
 export interface ProviderSettingsUpdate {
  provider: string;
  apiKey?: string;
@@ -446,6 +529,17 @@ export interface OutboundCliAppMention {
  brand_color?: string | null;
 }

+export interface OutboundMcpPresetMention {
+  name: string;
+  display_name?: string;
+  category?: string;
+  transport?: string;
+  status?: string;
+  configured?: boolean;
+  logo_url?: string | null;
+  brand_color?: string | null;
+}
+
 /** Response shape for ``GET .../webui-thread`` (server-built transcript replay). */
 export interface WebuiThreadPersistedPayload {
  schemaVersion: number;
@@ -464,6 +558,7 @@ export type Outbound =
      media?: OutboundMedia[];
      image_generation?: OutboundImageGeneration;
      cli_apps?: OutboundCliAppMention[];
+      mcp_presets?: OutboundMcpPresetMention[];
      /** Marks messages sent by the embedded WebUI, without changing the
       * generic websocket protocol for other clients. */
      webui?: true;
@@ -2,7 +2,7 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { describe, expect, it } from "vitest";

 import { AgentActivityCluster } from "@/components/thread/AgentActivityCluster";
-import type { CliAppInfo, UIMessage } from "@/lib/types";
+import type { CliAppInfo, McpPresetInfo, UIMessage } from "@/lib/types";

 const BLENDER_CLI_APP: CliAppInfo = {
  name: "blender",
@@ -21,6 +21,26 @@ const BLENDER_CLI_APP: CliAppInfo = {
  skill_installed: true,
 };

+const BROWSERBASE_MCP: McpPresetInfo = {
+  name: "browserbase",
+  display_name: "Browserbase",
+  category: "browser",
+  description: "Cloud browser automation",
+  docs_url: "https://docs.browserbase.com",
+  transport: "streamableHttp",
+  requires: "Browserbase API key",
+  note: "",
+  install_supported: true,
+  installed: true,
+  configured: true,
+  available: true,
+  status: "configured",
+  logo_url: "https://example.invalid/browserbase.svg",
+  brand_color: "#111827",
+  required_fields: [],
+  connection_summary: "https://mcp.browserbase.com/mcp",
+};
+
 function activityMessages(extraReasoning = "", extraTool?: UIMessage): UIMessage[] {
  const rows: UIMessage[] = [
    {
@@ -120,7 +140,6 @@ describe("AgentActivityCluster", () => {
        />,
      );

-      fireEvent.click(screen.getByRole("button", { name: /working/i }));
      const scrollport = screen.getByTestId("agent-activity-scroll");
      setScrollGeometry(scrollport, {
        scrollHeight: 1000,
@@ -149,7 +168,6 @@ describe("AgentActivityCluster", () => {
        />,
      );

-      fireEvent.click(screen.getByRole("button", { name: /working/i }));
      const scrollport = screen.getByTestId("agent-activity-scroll");
      setScrollGeometry(scrollport, {
        scrollHeight: 1000,
@@ -201,7 +219,6 @@ describe("AgentActivityCluster", () => {
        />,
      );

-      fireEvent.click(screen.getByRole("button", { name: /working/i }));
      const scrollport = screen.getByTestId("agent-activity-scroll");
      setScrollGeometry(scrollport, {
        scrollHeight: 1000,
@@ -238,6 +255,44 @@ describe("AgentActivityCluster", () => {
    }
  });

+  it("turns the live reasoning marker into an animated check when thinking completes", async () => {
+    const liveReasoning: UIMessage = {
+      id: "r-check",
+      role: "assistant",
+      content: "",
+      reasoning: "checking a source",
+      reasoningStreaming: true,
+      isStreaming: true,
+      createdAt: 1,
+    };
+    const { rerender } = render(
+      <AgentActivityCluster
+        messages={[liveReasoning]}
+        isTurnStreaming
+        hasBodyBelow
+      />,
+    );
+
+    expect(screen.getByTestId("activity-reasoning-marker")).toHaveAttribute("data-state", "thinking");
+
+    rerender(
+      <AgentActivityCluster
+        messages={[{
+          ...liveReasoning,
+          reasoningStreaming: false,
+          isStreaming: false,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow
+      />,
+    );
+
+    const marker = screen.getByTestId("activity-reasoning-marker");
+    expect(marker).toHaveAttribute("data-state", "done");
+    expect(marker.querySelector("svg")).toBeInTheDocument();
+    await waitFor(() => expect(marker).toHaveClass("animate-in"));
+  });
+
  it("renders file edit totals and a compact expanded file list", async () => {
    const restoreMotion = installReducedMotion();
    try {
@@ -306,16 +361,68 @@ describe("AgentActivityCluster", () => {
      />,
    );

-    fireEvent.click(screen.getByRole("button", { name: /running cli @blender/i }));
-
    const cliRuns = screen.getByTestId("activity-cli-runs");
-    expect(cliRuns).toHaveTextContent("Running CLI");
+    expect(cliRuns).toHaveTextContent("Using");
    expect(cliRuns).toHaveTextContent("@blender");
    expect(cliRuns).toHaveTextContent("--json --background scene.blend");
    expect(screen.getByTestId("activity-cli-logo-blender")).toBeInTheDocument();
    expect(screen.queryByText(/run_cli_app/)).not.toBeInTheDocument();
  });

+  it("keeps CLI rows in chronological trace order", () => {
+    const cliArgs = { name: "blender", args: ["project", "new"], json: true };
+    const cliLine = `run_cli_app(${JSON.stringify(cliArgs)})`;
+    render(
+      <AgentActivityCluster
+        messages={[
+          {
+            id: "t-search",
+            role: "tool",
+            kind: "trace",
+            content: 'web_search({"query":"nanobot architecture"})',
+            traces: ['web_search({"query":"nanobot architecture"})'],
+            createdAt: 1,
+          },
+          {
+            id: "t-cli",
+            role: "tool",
+            kind: "trace",
+            content: cliLine,
+            traces: [cliLine],
+            toolEvents: [{
+              phase: "end",
+              call_id: "call-blender",
+              name: "run_cli_app",
+              arguments: cliArgs,
+            }],
+            createdAt: 2,
+          },
+          {
+            id: "t-fetch",
+            role: "tool",
+            kind: "trace",
+            content: 'web_fetch({"url":"https://example.com/diagram"})',
+            traces: ['web_fetch({"url":"https://example.com/diagram"})'],
+            createdAt: 3,
+          },
+        ]}
+        isTurnStreaming
+        hasBodyBelow={false}
+        cliApps={[BLENDER_CLI_APP]}
+      />,
+    );
+
+    const searchRow = screen.getByText("Searching").closest("li");
+    const cliRow = screen.getByText("@blender").closest("li");
+    const fetchRow = screen.getByText("Reading").closest("li");
+
+    expect(searchRow).not.toBeNull();
+    expect(cliRow).not.toBeNull();
+    expect(fetchRow).not.toBeNull();
+    expect(searchRow!.compareDocumentPosition(cliRow!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(cliRow!.compareDocumentPosition(fetchRow!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
  it("labels rejected CLI app calls as failed instead of ran", () => {
    render(
      <AgentActivityCluster
@@ -341,14 +448,143 @@ describe("AgentActivityCluster", () => {
      />,
    );

-    fireEvent.click(screen.getByRole("button", { name: /cli failed @github/i }));
+    fireEvent.click(screen.getByRole("button", { name: /failed @github/i }));

-    expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("CLI failed");
+    expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("Failed");
    expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("@github");
    expect(screen.getByTestId("activity-cli-runs")).toHaveTextContent("Error: CLI app 'github' not found");
    expect(screen.queryByText("Ran CLI")).not.toBeInTheDocument();
  });

+  it("renders MCP preset tool calls as branded activity rows", () => {
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-mcp",
+          role: "tool",
+          kind: "trace",
+          content: "mcp_browserbase_browser_navigate()",
+          traces: ["mcp_browserbase_browser_navigate({\"url\":\"https://example.com\"})"],
+          toolEvents: [
+            {
+              phase: "start",
+              call_id: "call-browserbase",
+              name: "mcp_browserbase_browser_navigate",
+              arguments: { url: "https://example.com" },
+            },
+          ],
+          createdAt: 1,
+        }]}
+        isTurnStreaming
+        hasBodyBelow={false}
+        mcpPresets={[BROWSERBASE_MCP]}
+      />,
+    );
+
+    const mcpRuns = screen.getByTestId("activity-mcp-runs");
+    expect(mcpRuns).toHaveTextContent("Using");
+    expect(mcpRuns).toHaveTextContent("Browserbase");
+    expect(mcpRuns).toHaveTextContent("browser_navigate");
+    expect(mcpRuns).toHaveTextContent("url: https://example.com");
+    expect(screen.getByTestId("activity-mcp-logo-browserbase")).toBeInTheDocument();
+    expect(screen.queryByText(/mcp_browserbase_browser_navigate/)).not.toBeInTheDocument();
+  });
+
+  it("renders public web fetch traces with the site favicon", () => {
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-web-fetch",
+          role: "tool",
+          kind: "trace",
+          content: 'web_fetch({"url":"https://auth0.com/blog/jwt-security-best-practices"})',
+          traces: ['web_fetch({"url":"https://auth0.com/blog/jwt-security-best-practices"})'],
+          createdAt: 1,
+        }]}
+        isTurnStreaming
+        hasBodyBelow={false}
+      />,
+    );
+
+    const favicon = screen.getByTestId("activity-web-favicon-auth0.com");
+    expect(favicon.querySelector("img")?.getAttribute("src")).toContain("auth0.com");
+    expect(screen.getByText("Reading")).toBeInTheDocument();
+    expect(screen.getByText("auth0.com/blog/jwt-security-best-practices")).toBeInTheDocument();
+  });
+
+  it("renders plain-text fetch progress with the site favicon", () => {
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-web-fetch-text",
+          role: "tool",
+          kind: "trace",
+          content: "Fetching https://auth0.com/blog/jwt-security-best-practices",
+          traces: ["Fetching https://auth0.com/blog/jwt-security-best-practices"],
+          createdAt: 1,
+        }]}
+        isTurnStreaming
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.getByTestId("activity-web-favicon-auth0.com")).toBeInTheDocument();
+    expect(screen.getByText("Reading")).toBeInTheDocument();
+    expect(screen.getByText("auth0.com/blog/jwt-security-best-practices")).toBeInTheDocument();
+  });
+
+  it("does not request favicons for private web fetch targets", () => {
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-web-fetch-local",
+          role: "tool",
+          kind: "trace",
+          content: 'web_fetch({"url":"http://localhost:3000/dashboard"})',
+          traces: ['web_fetch({"url":"http://localhost:3000/dashboard"})'],
+          createdAt: 1,
+        }]}
+        isTurnStreaming
+        hasBodyBelow={false}
+      />,
+    );
+
+    expect(screen.queryByTestId("activity-web-favicon-localhost")).not.toBeInTheDocument();
+    expect(screen.getByText("url: http://localhost:3000/dashboard")).toBeInTheDocument();
+  });
+
+  it("summarizes long shell traces instead of dumping scripts", () => {
+    const command = [
+      "cat << 'EOF' | bash",
+      "SECRET_TOKEN=sk-test",
+      "for id in m1 m2 m3; do",
+      "  echo done $id",
+      "done",
+      "EOF",
+    ].join("\n");
+    const line = `exec(${JSON.stringify({ command })})`;
+    render(
+      <AgentActivityCluster
+        messages={[{
+          id: "t-shell",
+          role: "tool",
+          kind: "trace",
+          content: line,
+          traces: [line],
+          createdAt: 1,
+        }]}
+        isTurnStreaming={false}
+        hasBodyBelow
+      />,
+    );
+
+    expect(screen.getByText("Shell")).toBeInTheDocument();
+    expect(screen.getByText(/cat << 'EOF' \| bash · script, 6 lines/)).toBeInTheDocument();
+    expect(screen.queryByText(/SECRET_TOKEN/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/for id in/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/^Done$/)).not.toBeInTheDocument();
+  });
+
  it("does not render zero diff counters for completed edits", () => {
    render(
      <AgentActivityCluster
@@ -440,7 +676,6 @@ describe("AgentActivityCluster", () => {
    );

    expect(screen.getByRole("button", { name: /preparing edit/i })).toBeInTheDocument();
-    fireEvent.click(screen.getByRole("button", { name: /preparing edit/i }));
    expect(screen.getByText("Preparing file edit…")).toBeInTheDocument();
  });

@@ -1,15 +1,21 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";

 import {
+  createModelConfiguration,
  deleteSession,
  fetchCliApps,
+  fetchMcpPresets,
  fetchSidebarState,
  fetchWebuiThread,
+  importMcpConfig,
  listSessions,
  listSlashCommands,
  runCliAppAction,
+  runMcpPresetAction,
+  saveCustomMcpServer,
  updateSidebarState,
  updateImageGenerationSettings,
+  updateMcpServerTools,
  updateProviderSettings,
  updateSettings,
  updateWebSearchSettings,
@@ -68,6 +74,21 @@ describe("webui API helpers", () => {
    );
  });

+  it("serializes model configuration creation", async () => {
+    await createModelConfiguration("tok", {
+      label: "Fast writing",
+      provider: "openai",
+      model: "openai/gpt-4.1-mini",
+    });
+
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/settings/model-configurations/create?label=Fast+writing&provider=openai&model=openai%2Fgpt-4.1-mini",
+      expect.objectContaining({
+        headers: { Authorization: "Bearer tok" },
+      }),
+    );
+  });
+
  it("serializes provider settings updates without returning secrets", async () => {
    await updateProviderSettings("tok", {
      provider: "openrouter",
@@ -145,6 +166,91 @@ describe("webui API helpers", () => {
    );
  });

+  it("reads MCP presets and serializes actions", async () => {
+    vi.mocked(fetch).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        presets: [],
+        installed_count: 0,
+      }),
+    } as Response);
+
+    await expect(fetchMcpPresets("tok")).resolves.toMatchObject({ presets: [] });
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/settings/mcp-presets",
+      expect.objectContaining({
+        headers: { Authorization: "Bearer tok" },
+      }),
+    );
+
+    await runMcpPresetAction("tok", "enable", "browserbase", {
+      browserbase_api_key: "bb_live_test",
+    });
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/settings/mcp-presets/enable?name=browserbase",
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: "Bearer tok",
+          "X-Nanobot-MCP-Values": JSON.stringify({
+            browserbase_api_key: "bb_live_test",
+          }),
+        }),
+      }),
+    );
+  });
+
+  it("serializes custom MCP, mcp.json import, and tool allowlist actions", async () => {
+    await saveCustomMcpServer("tok", {
+      name: "docs",
+      transport: "stdio",
+      command: "npx",
+      args: '["-y","docs-mcp"]',
+      env: '{"API_KEY":"secret"}',
+    });
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/settings/mcp-presets/custom",
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: "Bearer tok",
+          "X-Nanobot-MCP-Values": JSON.stringify({
+            name: "docs",
+            transport: "stdio",
+            command: "npx",
+            args: '["-y","docs-mcp"]',
+            env: '{"API_KEY":"secret"}',
+          }),
+        }),
+      }),
+    );
+
+    await importMcpConfig("tok", '{"mcpServers":{"docs":{"command":"npx"}}}');
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/settings/mcp-presets/import",
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: "Bearer tok",
+          "X-Nanobot-MCP-Values": JSON.stringify({
+            config: '{"mcpServers":{"docs":{"command":"npx"}}}',
+          }),
+        }),
+      }),
+    );
+
+    await updateMcpServerTools("tok", "docs", ["search", "fetch"]);
+    expect(fetch).toHaveBeenCalledWith(
+      "/api/settings/mcp-presets/tools",
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: "Bearer tok",
+          "X-Nanobot-MCP-Values": JSON.stringify({
+            name: "docs",
+            enabled_tools: ["search", "fetch"],
+          }),
+        }),
+      }),
+    );
+  });
+
  it("reads and writes persisted sidebar state", async () => {
    const state = {
      schema_version: 1,
@@ -713,6 +713,12 @@ describe("App layout", () => {

    expect(await screen.findByRole("heading", { name: "Overview" })).toBeInTheDocument();
    expect(document.title).toBe("Settings · nanobot");
+    expect(screen.getByTestId("overview-nanobot-logo")).toBeInTheDocument();
+    expect(screen.getByTestId("overview-logo-openai")).toBeInTheDocument();
+    expect(screen.getByTestId("overview-logo-brave")).toBeInTheDocument();
+    expect(screen.getByTestId("overview-logo-openrouter")).toBeInTheDocument();
+    expect(screen.queryByTestId("overview-logo-nanobot-gateway")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("overview-logo-nanobot-workspace")).not.toBeInTheDocument();
    expect(screen.queryByRole("navigation", { name: "Sidebar navigation" })).not.toBeInTheDocument();
    const settingsNav = screen.getByRole("navigation", { name: "Settings sections" });
    expect(settingsNav.className).toContain("overflow-x-auto");
@@ -722,23 +728,41 @@ describe("App layout", () => {
      "page",
    );
    expect(within(settingsNav).getByRole("button", { name: "Models" })).toBeInTheDocument();
-    expect(within(settingsNav).getByRole("button", { name: "Providers" })).toBeInTheDocument();
+    expect(within(settingsNav).queryByRole("button", { name: "Providers" })).not.toBeInTheDocument();
    expect(within(settingsNav).getByRole("button", { name: "Image" })).toBeInTheDocument();
    expect(within(settingsNav).getByRole("button", { name: "Web" })).toBeInTheDocument();
    expect(within(settingsNav).getByRole("button", { name: "Advanced" })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Sign out" })).toBeInTheDocument();
    fireEvent.click(within(settingsNav).getByRole("button", { name: "Appearance" }));
    expect(screen.getByText("Brand logos")).toBeInTheDocument();
+    expect(screen.getByRole("switch", { name: "Brand logos" })).toBeInTheDocument();
    fireEvent.click(within(settingsNav).getByRole("button", { name: "Models" }));
-    expect(screen.getByText("AI")).toBeInTheDocument();
+    expect(screen.queryByText("AI")).not.toBeInTheDocument();
+    expect(screen.getByText("Current model")).toBeInTheDocument();
+    expect(screen.queryByText("Presets")).not.toBeInTheDocument();
+    fireEvent.pointerDown(screen.getByRole("button", { name: /openai\/gpt-4o/ }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Add configuration" }));
+    const modelDialog = screen.getByRole("dialog", { name: "New model configuration" });
+    expect(within(modelDialog).getByText("Save a provider and model as a one-click option.")).toBeInTheDocument();
+    fireEvent.change(within(modelDialog).getByPlaceholderText("Fast writing"), {
+      target: { value: "Fast writing" },
+    });
+    fireEvent.change(within(modelDialog).getByPlaceholderText("openai/gpt-4.1"), {
+      target: { value: "openai/gpt-4.1-mini" },
+    });
+    expect(within(modelDialog).getByRole("button", { name: /OpenAI/ })).toBeInTheDocument();
+    expect(within(modelDialog).getByRole("button", { name: "Save" })).toBeEnabled();
+    fireEvent.click(within(modelDialog).getByRole("button", { name: "Cancel" }));
    const modelInput = screen.getByDisplayValue("openai/gpt-4o");
    expect(modelInput).toBeInTheDocument();
+    fireEvent.pointerDown(screen.getByRole("button", { name: /Auto/ }));
+    expect(screen.getAllByTestId("provider-picker-logo-openai").length).toBeGreaterThan(0);
+    fireEvent.click(screen.getByRole("menuitem", { name: /Auto/ }));
    fireEvent.change(modelInput, { target: { value: "openai/gpt-4o-mini" } });
    expect(screen.getByText("Unsaved changes.").parentElement?.className).toContain(
      "text-blue-600",
    );
    fireEvent.change(modelInput, { target: { value: "openai/gpt-4o" } });
-    fireEvent.click(within(settingsNav).getByRole("button", { name: "Providers" }));
    expect(screen.getByText("OpenRouter")).toBeInTheDocument();
    expect(screen.getByText("Ant Ling")).toBeInTheDocument();
    expect(screen.getByTestId("provider-logo-openai")).toBeInTheDocument();
@@ -757,10 +781,11 @@ describe("App layout", () => {
    expect(screen.getByDisplayValue("https://api.ant-ling.com/v1")).toBeInTheDocument();
    fireEvent.click(screen.getByText("Atomic Chat"));
    expect(screen.getByDisplayValue("http://localhost:1337/v1")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Save" })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "Save provider" })).toBeEnabled();

    fireEvent.click(within(settingsNav).getByRole("button", { name: "Image" }));
    expect(screen.getByRole("heading", { name: "Image" })).toBeInTheDocument();
+    expect(screen.getByRole("switch", { name: "Image generation" })).toBeInTheDocument();
    expect(screen.getByText("Provider status")).toBeInTheDocument();
    expect(screen.getByDisplayValue("openai/gpt-5.4-image-2")).toBeInTheDocument();
    expect(screen.getByText("Save directory")).toBeInTheDocument();
@@ -768,7 +793,9 @@ describe("App layout", () => {

    fireEvent.click(within(settingsNav).getByRole("button", { name: "Web" }));
    expect(screen.getByText("Search provider")).toBeInTheDocument();
+    expect(screen.getByRole("switch", { name: "Jina reader" })).toBeInTheDocument();
    expect(screen.getByRole("button", { name: /Brave Search/ })).toBeInTheDocument();
+    expect(screen.getByTestId("provider-picker-logo-brave")).toBeInTheDocument();
    expect(screen.getByText("BSAo••••ew20")).toBeInTheDocument();
    fireEvent.click(screen.getByRole("button", { name: "Edit" }));
    fireEvent.change(screen.getByPlaceholderText("Leave blank to keep the current key"), {
@@ -783,7 +810,16 @@ describe("App layout", () => {

    fireEvent.click(within(settingsNav).getByRole("button", { name: "Runtime" }));
    expect(screen.getByText("Bot name")).toBeInTheDocument();
+    expect(screen.queryByText("Tool hint length")).not.toBeInTheDocument();
    expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
+    fireEvent.pointerDown(screen.getByRole("button", { name: "UTC" }));
+    expect(screen.getByPlaceholderText("Search timezone")).toBeInTheDocument();
+    fireEvent.change(screen.getByPlaceholderText("Search timezone"), {
+      target: { value: "Shanghai" },
+    });
+    fireEvent.click(screen.getByRole("menuitem", { name: /Asia\/Shanghai/ }));
+    expect(screen.getByRole("button", { name: "Asia/Shanghai" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save" })).toBeEnabled();
  });

  it("returns from settings to the blank start page when no session was active", async () => {
@@ -969,6 +1005,7 @@ describe("App layout", () => {
    expect(dialog).toHaveClass("origin-center");
    expect(dialog.className).not.toContain("translate-x");
    expect(dialog.className).not.toContain("translate-y");
+    expect(dialog.querySelector("kbd")).toBeNull();
    expect(within(dialog).getByText("Q2 roadmap")).toBeInTheDocument();
    expect(within(dialog).getByText("Travel ideas")).toBeInTheDocument();
    expect(within(dialog).queryByText("websocket")).not.toBeInTheDocument();
@@ -12,7 +12,6 @@ const SETTINGS_NAV_KEYS = [
  "overview",
  "appearance",
  "models",
-  "providers",
  "image",
  "web",
  "runtime",
@@ -2,7 +2,7 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { describe, expect, it, vi } from "vitest";

 import { MessageBubble } from "@/components/MessageBubble";
-import type { CliAppInfo, UIMessage } from "@/lib/types";
+import type { CliAppInfo, McpPresetInfo, UIMessage } from "@/lib/types";

 const CLI_APPS: CliAppInfo[] = [
  {
@@ -39,6 +39,28 @@ const CLI_APPS: CliAppInfo[] = [
  },
 ];

+const MCP_PRESETS: McpPresetInfo[] = [
+  {
+    name: "browserbase",
+    display_name: "Browserbase",
+    category: "browser",
+    description: "Cloud browser automation",
+    docs_url: "https://docs.browserbase.com",
+    transport: "streamableHttp",
+    requires: "Browserbase API key",
+    note: "",
+    install_supported: true,
+    installed: true,
+    configured: true,
+    available: true,
+    status: "configured",
+    logo_url: "https://example.invalid/browserbase.svg",
+    brand_color: "#111827",
+    required_fields: [],
+    connection_summary: "https://mcp.browserbase.com/mcp",
+  },
+];
+
 describe("MessageBubble", () => {
  it("renders user messages as right-aligned pills", () => {
    const message: UIMessage = {
@@ -69,6 +91,7 @@ describe("MessageBubble", () => {

    const token = screen.getByTestId("message-cli-mention-zoom");
    expect(token).toHaveTextContent("@zoom");
+    expect(token).toHaveAttribute("title", "CLI app: Zoom");
    expect(token.className).not.toContain("rounded");
    expect(token.className).not.toContain("px-");
    expect(token.getAttribute("style")).toContain("color: #0B5CFF");
@@ -104,6 +127,23 @@ describe("MessageBubble", () => {
    expect(screen.getByTestId("message-cli-mention-logo-drawio")).toBeInTheDocument();
  });

+  it("renders MCP preset mentions inside sent user messages", () => {
+    const message: UIMessage = {
+      id: "u-mcp",
+      role: "user",
+      content: "Use @browserbase to inspect the checkout flow",
+      createdAt: Date.now(),
+    };
+
+    render(<MessageBubble message={message} mcpPresets={MCP_PRESETS} />);
+
+    const token = screen.getByTestId("message-mcp-mention-browserbase");
+    expect(token).toHaveTextContent("@browserbase");
+    expect(token).toHaveAttribute("title", "MCP server: Browserbase");
+    expect(token.getAttribute("style")).toContain("color: #111827");
+    expect(screen.getByTestId("message-mcp-mention-logo-browserbase")).toBeInTheDocument();
+  });
+
  it("copies completed assistant replies from the action row", async () => {
    const writeText = vi.fn().mockResolvedValue(undefined);
    Object.defineProperty(navigator, "clipboard", {
@@ -375,6 +375,53 @@ describe("NanobotClient", () => {
    );
  });

+  it("includes MCP preset attachments in outbound messages", () => {
+    const client = new NanobotClient({
+      url: "ws://test",
+      reconnect: false,
+      socketFactory: (url) => new FakeSocket(url) as unknown as WebSocket,
+    });
+    client.connect();
+    lastSocket().fakeOpen();
+
+    client.sendMessage(
+      "chat-mcp",
+      "@browserbase check this page",
+      undefined,
+      {
+        mcpPresets: [{
+          name: "browserbase",
+          display_name: "Browserbase",
+          category: "browser",
+          transport: "streamableHttp",
+          status: "configured",
+          configured: true,
+          logo_url: "https://example.invalid/browserbase.svg",
+          brand_color: "#111827",
+        }],
+      },
+    );
+
+    expect(lastSocket().sent).toContain(
+      JSON.stringify({
+        type: "message",
+        chat_id: "chat-mcp",
+        content: "@browserbase check this page",
+        mcp_presets: [{
+          name: "browserbase",
+          display_name: "Browserbase",
+          category: "browser",
+          transport: "streamableHttp",
+          status: "configured",
+          configured: true,
+          logo_url: "https://example.invalid/browserbase.svg",
+          brand_color: "#111827",
+        }],
+        webui: true,
+      }),
+    );
+  });
+
  it("re-attaches known chats after a reconnect", async () => {
    const client = new NanobotClient({
      url: "ws://test",
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest";
+
+import { faviconUrls, logoFallbackUrls, providerBrand } from "@/lib/provider-brand";
+
+describe("provider brand logos", () => {
+  it("uses multiple favicon sources before falling back to initials", () => {
+    expect(faviconUrls("z.ai")).toEqual([
+      "https://z.ai/favicon.ico",
+      "https://icons.duckduckgo.com/ip3/z.ai.ico",
+      "https://www.google.com/s2/favicons?domain=z.ai&sz=64",
+    ]);
+  });
+
+  it("keeps explicit Google favicon URLs first before trying fallbacks", () => {
+    expect(logoFallbackUrls("https://www.google.com/s2/favicons?domain=browserbase.com&sz=64")).toEqual([
+      "https://www.google.com/s2/favicons?domain=browserbase.com&sz=64",
+      "https://browserbase.com/favicon.ico",
+      "https://icons.duckduckgo.com/ip3/browserbase.com.ico",
+    ]);
+  });
+
+  it("normalizes path-like favicon domains for secondary fallbacks", () => {
+    expect(logoFallbackUrls("https://www.google.com/s2/favicons?domain=github.com/HKUDS/CLI-Anything&sz=64")).toEqual([
+      "https://www.google.com/s2/favicons?domain=github.com/HKUDS/CLI-Anything&sz=64",
+      "https://github.com/favicon.ico",
+      "https://icons.duckduckgo.com/ip3/github.com.ico",
+      "https://www.google.com/s2/favicons?domain=github.com%2FHKUDS%2FCLI-Anything&sz=64",
+    ]);
+  });
+
+  it("keeps Zhipu on the current Z.ai brand domain", () => {
+    expect(providerBrand("zhipu")?.logoUrls[0]).toBe("https://z-cdn.chatglm.cn/z-ai/static/logo.svg");
+    expect(providerBrand("zhipu")?.logoUrls).toContain("https://www.google.com/s2/favicons?domain=z.ai&sz=64");
+    expect(providerBrand("zhipu")?.logoUrls).toContain("https://z.ai/favicon.ico");
+    expect(providerBrand("zhipu")?.initials).toBe("Z");
+  });
+});
@@ -0,0 +1,70 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { SessionSearchDialog } from "@/components/SessionSearchDialog";
+import type { ChatSummary } from "@/lib/types";
+
+function session(index: number): ChatSummary {
+  return {
+    key: `websocket:chat-${index}`,
+    channel: "websocket",
+    chatId: `chat-${index}`,
+    createdAt: null,
+    updatedAt: null,
+    title: `Chat ${index}`,
+    preview: `Preview ${index}`,
+  };
+}
+
+describe("SessionSearchDialog", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("uses a solid compact command palette surface", () => {
+    render(
+      <SessionSearchDialog
+        open
+        sessions={[session(1)]}
+        activeKey={null}
+        loading={false}
+        onOpenChange={() => {}}
+        onSelect={() => {}}
+      />,
+    );
+
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toHaveClass("bg-background");
+    expect(dialog.className).not.toContain("bg-popover/");
+    expect(dialog.className).not.toContain("backdrop-blur");
+    expect(screen.getByTestId("session-search-scroll")).toHaveClass("overflow-y-auto");
+  });
+
+  it("keeps keyboard navigation scrollable through long result lists", () => {
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+
+    render(
+      <SessionSearchDialog
+        open
+        sessions={Array.from({ length: 24 }, (_, index) => session(index + 1))}
+        activeKey={null}
+        loading={false}
+        onOpenChange={() => {}}
+        onSelect={() => {}}
+      />,
+    );
+
+    const input = screen.getByRole("textbox", { name: "Search" });
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+    fireEvent.keyDown(input, { key: "ArrowDown" });
+
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+});
@@ -1,8 +1,8 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";

 import { ThreadComposer } from "@/components/thread/ThreadComposer";
-import type { CliAppInfo, SlashCommand } from "@/lib/types";
+import type { CliAppInfo, McpPresetInfo, SlashCommand } from "@/lib/types";

 const COMMANDS: SlashCommand[] = [
  {
@@ -70,6 +70,47 @@ const CLI_APPS: CliAppInfo[] = [
    skill_installed: false,
  },
 ];
+
+const MCP_PRESETS: McpPresetInfo[] = [
+  {
+    name: "browserbase",
+    display_name: "Browserbase",
+    category: "browser",
+    description: "Cloud browser automation",
+    docs_url: "https://docs.browserbase.com",
+    transport: "streamableHttp",
+    requires: "Browserbase API key",
+    note: "",
+    install_supported: true,
+    installed: true,
+    configured: true,
+    available: true,
+    status: "configured",
+    logo_url: "https://example.invalid/browserbase.svg",
+    brand_color: "#111827",
+    required_fields: [],
+    connection_summary: "https://mcp.browserbase.com/mcp",
+  },
+  {
+    name: "figma",
+    display_name: "Figma",
+    category: "design",
+    description: "Design context",
+    docs_url: "https://figma.com",
+    transport: "streamableHttp",
+    requires: "Figma desktop",
+    note: "",
+    install_supported: true,
+    installed: true,
+    configured: false,
+    available: false,
+    status: "missing_credentials",
+    logo_url: null,
+    brand_color: "#F24E1E",
+    required_fields: [],
+    connection_summary: "",
+  },
+];
 const ORIGINAL_INNER_HEIGHT = window.innerHeight;

 afterEach(() => {
@@ -125,11 +166,14 @@ describe("ThreadComposer", () => {
      <ThreadComposer
        onSend={vi.fn()}
        modelLabel="gpt-4o"
+        modelProvider="openai"
+        modelProviderLabel="OpenAI"
        placeholder="Type your message..."
      />,
    );

    expect(screen.getByText("gpt-4o")).toBeInTheDocument();
+    expect(screen.getByTestId("composer-model-logo-openai")).toBeInTheDocument();
    const input = screen.getByPlaceholderText("Type your message...");
    expect(input.className).toContain("min-h-[50px]");
    expect(input.parentElement?.parentElement?.className).toContain("max-w-[49.5rem]");
@@ -227,7 +271,7 @@ describe("ThreadComposer", () => {
    const input = screen.getByLabelText("Message input");
    fireEvent.change(input, { target: { value: "@", selectionStart: 1 } });

-    const palette = screen.getByRole("listbox", { name: "CLI Apps" });
+    const palette = screen.getByRole("listbox", { name: "Apps and MCP" });
    expect(palette).toBeInTheDocument();
    expect(screen.getByRole("option", { name: /@gimp/i })).toHaveAttribute(
      "aria-selected",
@@ -246,7 +290,7 @@ describe("ThreadComposer", () => {
    expect(screen.getByTestId("composer-cli-mention-blender")).toHaveTextContent("@blender");
    expect(screen.queryByTestId("composer-cli-app-tray")).not.toBeInTheDocument();
    expect(onSend).not.toHaveBeenCalled();
-    expect(screen.queryByRole("listbox", { name: "CLI Apps" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("listbox", { name: "Apps and MCP" })).not.toBeInTheDocument();

    fireEvent.click(screen.getByRole("button", { name: "Send message" }));

@@ -282,6 +326,69 @@ describe("ThreadComposer", () => {
    expect(screen.getByTestId("composer-cli-mention-blender")).toHaveTextContent("@blender");
  });

+  it("shows configured MCP presets in the mention palette and submits metadata", () => {
+    const onSend = vi.fn();
+    render(
+      <ThreadComposer
+        onSend={onSend}
+        placeholder="Type your message..."
+        cliApps={CLI_APPS}
+        mcpPresets={MCP_PRESETS}
+      />,
+    );
+
+    const input = screen.getByLabelText("Message input");
+    fireEvent.change(input, {
+      target: { value: "use @bro", selectionStart: 8 },
+    });
+
+    expect(screen.getByRole("option", { name: /@browserbase/i })).toBeInTheDocument();
+    expect(screen.queryByRole("option", { name: /@figma/i })).not.toBeInTheDocument();
+
+    fireEvent.keyDown(input, { key: "Tab" });
+
+    expect(input).toHaveValue("use @browserbase ");
+    expect(screen.getByTestId("composer-mcp-mention-browserbase")).toHaveTextContent("@browserbase");
+
+    fireEvent.click(screen.getByRole("button", { name: "Send message" }));
+
+    expect(onSend).toHaveBeenCalledWith("use @browserbase", undefined, {
+      mcpPresets: [{
+        name: "browserbase",
+        display_name: "Browserbase",
+        category: "browser",
+        transport: "streamableHttp",
+        status: "configured",
+        configured: true,
+        logo_url: "https://example.invalid/browserbase.svg",
+        brand_color: "#111827",
+      }],
+    });
+  });
+
+  it("shows right-side source badges so users can distinguish CLI apps from MCP servers", () => {
+    render(
+      <ThreadComposer
+        onSend={vi.fn()}
+        placeholder="Type your message..."
+        cliApps={CLI_APPS}
+        mcpPresets={MCP_PRESETS}
+      />,
+    );
+
+    const input = screen.getByLabelText("Message input");
+    fireEvent.change(input, { target: { value: "@", selectionStart: 1 } });
+
+    expect(screen.queryByText("CLI Apps")).not.toBeInTheDocument();
+    expect(screen.queryByText("MCP servers")).not.toBeInTheDocument();
+    const gimp = screen.getByRole("option", { name: /GIMP @gimp .* CLI/i });
+    const browserbase = screen.getByRole("option", { name: /Browserbase @browserbase .* MCP/i });
+    expect(within(gimp).getByText("CLI")).toBeInTheDocument();
+    expect(within(browserbase).getByText("MCP")).toBeInTheDocument();
+    expect(within(gimp).getByText("@gimp")).toBeInTheDocument();
+    expect(within(browserbase).getByText("@browserbase")).toBeInTheDocument();
+  });
+
  it("does not duplicate the next word separator when completing a CLI app mention", () => {
    render(
      <ThreadComposer
@@ -1010,7 +1010,7 @@ describe("ThreadShell", () => {
    ));

    const input = await screen.findByLabelText("Message input");
-    expect(screen.queryByRole("listbox", { name: "CLI Apps" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("listbox", { name: "Apps and MCP" })).not.toBeInTheDocument();

    const payload: CliAppsPayload = {
      apps: [{
@@ -1038,7 +1038,7 @@ describe("ThreadShell", () => {
    });
    fireEvent.change(input, { target: { value: "@", selectionStart: 1 } });

-    expect(screen.getByRole("listbox", { name: "CLI Apps" })).toBeInTheDocument();
+    expect(screen.getByRole("listbox", { name: "Apps and MCP" })).toBeInTheDocument();
    expect(screen.getByRole("option", { name: /@gimp/i })).toBeInTheDocument();
  });
 });