feat(mcp): add preset setup and capability mentions

webui/src/components/CliAppMentionText.tsx

@@ -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}