@elizaos/app-core 2.0.0-alpha.37

package/src/components/PluginsView.tsx

@@ -0,0 +1,3152 @@
+/**
+ * Plugins view — tag-filtered plugin management.
+ *
+ * Renders a unified plugin list with searchable/filterable cards and per-plugin settings.
+ */
+
+import { Button, Input } from "@elizaos/ui";
+import type { LucideIcon } from "lucide-react";
+import {
+  Binary,
+  BookOpen,
+  Bot,
+  Brain,
+  BrickWall,
+  Briefcase,
+  Calendar,
+  ChevronRight,
+  Chrome,
+  Circle,
+  CircleDashed,
+  CircleDot,
+  ClipboardList,
+  Clock,
+  Cloud,
+  Command,
+  Construction,
+  CreditCard,
+  Diamond,
+  Dna,
+  Droplets,
+  Eye,
+  Feather,
+  FileKey,
+  FileText,
+  Fingerprint,
+  Gamepad,
+  Gamepad2,
+  Github,
+  Handshake,
+  Hash,
+  Layers,
+  Leaf,
+  Link,
+  Lock,
+  LockKeyhole,
+  Mail,
+  MessageCircle,
+  MessageSquare,
+  MessagesSquare,
+  Mic,
+  Monitor,
+  MousePointer2,
+  Package,
+  PenTool,
+  Phone,
+  Pickaxe,
+  Puzzle,
+  RefreshCw,
+  Rss,
+  ScrollText,
+  Send,
+  Server,
+  Settings,
+  Shell,
+  Shuffle,
+  Smartphone,
+  Sparkle,
+  Sparkles,
+  Square,
+  Star,
+  StickyNote,
+  Target,
+  Tornado,
+  TrendingDown,
+  Triangle,
+  Twitter,
+  Video,
+  Volume2,
+  Wallet,
+  Webhook,
+  Wrench,
+  Zap,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { PluginInfo, PluginParamDef } from "../api";
+import { client } from "../api";
+import {
+  ConfigRenderer,
+  defaultRegistry,
+  type JsonSchemaObject,
+} from "../config";
+import { useApp } from "../state";
+import type { ConfigUiHint } from "../types";
+import { openExternalUrl, resolveAppAssetUrl } from "../utils";
+import { autoLabel } from "./labels";
+import { SHOWCASE_PLUGIN } from "./plugins/showcase-data";
+import { WhatsAppQrOverlay } from "./WhatsAppQrOverlay";
+
+/* ── Always-on plugins (hidden from all views) ────────────────────────── */
+
+/**
+ * Plugin IDs hidden from Features/Connectors views.
+ * Core plugins are visible in Admin > Plugins instead.
+ */
+const ALWAYS_ON_PLUGIN_IDS = new Set([
+  // Core (always loaded)
+  "sql",
+  "local-embedding",
+  "knowledge",
+  "agent-skills",
+  "directives",
+  "commands",
+  "personality",
+  "experience",
+  // Optional core (shown in admin)
+  "agent-orchestrator",
+  "shell",
+  "plugin-manager",
+  "cli",
+  "code",
+  "edge-tts",
+  "pdf",
+  "scratchpad",
+  "secrets-manager",
+  "todo",
+  "trust",
+  "form",
+  "goals",
+  "scheduling",
+  // Internal / infrastructure
+  "elizacloud",
+  "evm",
+  "memory",
+  "rolodex",
+  "tts",
+  "elevenlabs",
+  "cron",
+  "webhooks",
+  "browser",
+  "vision",
+  "computeruse",
+]);
+
+/* ── Helpers ────────────────────────────────────────────────────────── */
+
+/** Detect advanced / debug parameters that should be collapsed by default. */
+function isAdvancedParam(param: PluginParamDef): boolean {
+  const k = param.key.toUpperCase();
+  const d = (param.description ?? "").toLowerCase();
+  return (
+    k.includes("EXPERIMENTAL") ||
+    k.includes("DEBUG") ||
+    k.includes("VERBOSE") ||
+    k.includes("TELEMETRY") ||
+    k.includes("BROWSER_BASE") ||
+    d.includes("experimental") ||
+    d.includes("advanced") ||
+    d.includes("debug")
+  );
+}
+
+/** Convert PluginParamDef[] to a JSON Schema + ConfigUiHints for ConfigRenderer. */
+export function paramsToSchema(
+  params: PluginParamDef[],
+  pluginId: string,
+): {
+  schema: JsonSchemaObject;
+  hints: Record<string, ConfigUiHint>;
+} {
+  const properties: Record<string, Record<string, unknown>> = {};
+  const required: string[] = [];
+  const hints: Record<string, ConfigUiHint> = {};
+
+  for (const p of params) {
+    // Build JSON Schema property
+    const prop: Record<string, unknown> = {};
+    if (p.type === "boolean") {
+      prop.type = "boolean";
+    } else if (p.type === "number") {
+      prop.type = "number";
+    } else {
+      prop.type = "string";
+    }
+    if (p.description) prop.description = p.description;
+    if (p.default != null) prop.default = p.default;
+    if (p.options?.length) {
+      prop.enum = p.options;
+    }
+
+    // Auto-detect format from key name
+    const keyUpper = p.key.toUpperCase();
+    if (
+      keyUpper.includes("URL") ||
+      keyUpper.includes("ENDPOINT") ||
+      keyUpper.includes("BASE_URL")
+    ) {
+      prop.format = "uri";
+    } else if (keyUpper.includes("EMAIL")) {
+      prop.format = "email";
+    } else if (
+      keyUpper.includes("_DATE") ||
+      keyUpper.includes("_SINCE") ||
+      keyUpper.includes("_UNTIL")
+    ) {
+      prop.format = "date";
+    }
+
+    // Auto-detect number types from key patterns
+    if (keyUpper.includes("PORT") && prop.type === "string") {
+      prop.type = "number";
+    } else if (
+      (keyUpper.includes("TIMEOUT") ||
+        keyUpper.includes("INTERVAL") ||
+        keyUpper.includes("_MS")) &&
+      prop.type === "string"
+    ) {
+      prop.type = "number";
+    } else if (
+      (keyUpper.includes("COUNT") ||
+        keyUpper.includes("LIMIT") ||
+        keyUpper.startsWith("MAX_")) &&
+      prop.type === "string"
+    ) {
+      prop.type = "number";
+    } else if (
+      (keyUpper.includes("RETRY") || keyUpper.includes("RETRIES")) &&
+      prop.type === "string"
+    ) {
+      prop.type = "number";
+    }
+
+    // Auto-detect boolean from key patterns
+    if (
+      prop.type === "string" &&
+      (keyUpper.includes("SHOULD_") ||
+        keyUpper.endsWith("_ENABLED") ||
+        keyUpper.endsWith("_DISABLED") ||
+        keyUpper.startsWith("USE_") ||
+        keyUpper.startsWith("ALLOW_") ||
+        keyUpper.startsWith("IS_") ||
+        keyUpper.startsWith("ENABLE_") ||
+        keyUpper.startsWith("DISABLE_") ||
+        keyUpper.startsWith("FORCE_") ||
+        keyUpper.endsWith("_AUTONOMOUS_MODE"))
+    ) {
+      prop.type = "boolean";
+    }
+
+    // Auto-detect number from key patterns (RATE, DELAY, THRESHOLD, SIZE, TEMPERATURE)
+    if (
+      prop.type === "string" &&
+      (keyUpper.includes("_RATE") ||
+        keyUpper.includes("DELAY") ||
+        keyUpper.includes("THRESHOLD") ||
+        keyUpper.includes("_SIZE") ||
+        keyUpper.includes("TEMPERATURE") ||
+        keyUpper.includes("_DEPTH") ||
+        keyUpper.includes("_PERCENT") ||
+        keyUpper.includes("_RATIO"))
+    ) {
+      prop.type = "number";
+    }
+
+    // Auto-detect comma-separated lists → array renderer
+    if (prop.type === "string" && !prop.enum) {
+      const descLower = (p.description || "").toLowerCase();
+      const isCommaSep =
+        descLower.includes("comma-separated") ||
+        descLower.includes("comma separated");
+      const isListSuffix =
+        keyUpper.endsWith("_IDS") ||
+        keyUpper.endsWith("_CHANNELS") ||
+        keyUpper.endsWith("_ROOMS") ||
+        keyUpper.endsWith("_RELAYS") ||
+        keyUpper.endsWith("_FEEDS") ||
+        keyUpper.endsWith("_DEXES") ||
+        keyUpper.endsWith("_WHITELIST") ||
+        keyUpper.endsWith("_BLACKLIST") ||
+        keyUpper.endsWith("_ALLOWLIST") ||
+        keyUpper.endsWith("_SPACES") ||
+        keyUpper.endsWith("_THREADS") ||
+        keyUpper.endsWith("_ROLES") ||
+        keyUpper.endsWith("_TENANTS") ||
+        keyUpper.endsWith("_DIRS");
+      if (isCommaSep || isListSuffix) {
+        prop.type = "array";
+        prop.items = { type: "string" };
+      }
+    }
+
+    // Auto-detect textarea (prompts, instructions, templates, greetings)
+    if (prop.type === "string" && !prop.enum && !keyUpper.includes("MODEL")) {
+      if (
+        keyUpper.includes("INSTRUCTIONS") ||
+        keyUpper.includes("_GREETING") ||
+        keyUpper.endsWith("_PROMPT") ||
+        keyUpper.endsWith("_TEMPLATE") ||
+        keyUpper.includes("SYSTEM_MESSAGE")
+      ) {
+        prop.maxLength = 999;
+      }
+    }
+
+    // Auto-detect JSON fields (json-encoded or serialized values)
+    if (prop.type === "string" && !p.sensitive) {
+      const descLower = (p.description || "").toLowerCase();
+      if (
+        descLower.includes("json-encoded") ||
+        descLower.includes("json array") ||
+        descLower.includes("serialized") ||
+        descLower.includes("json format")
+      ) {
+        (prop as Record<string, unknown>).__jsonHint = true;
+      }
+    }
+
+    // Auto-detect file/directory paths → file renderer
+    if (prop.type === "string") {
+      if (
+        (keyUpper.endsWith("_PATH") && !keyUpper.includes("WEBHOOK")) ||
+        keyUpper.endsWith("_DIR") ||
+        keyUpper.endsWith("_DIRECTORY") ||
+        keyUpper.endsWith("_FOLDER") ||
+        keyUpper.endsWith("_FILE")
+      ) {
+        (prop as Record<string, unknown>).__fileHint = true;
+      }
+    }
+
+    // Auto-detect textarea from long descriptions
+    if (p.description && p.description.length > 200) {
+      prop.maxLength = 999;
+    }
+
+    properties[p.key] = prop;
+
+    if (p.required) required.push(p.key);
+
+    // Build UI hint
+    const hint: ConfigUiHint = {
+      label: autoLabel(p.key, pluginId),
+      sensitive: p.sensitive ?? false,
+      advanced: isAdvancedParam(p),
+    };
+
+    // Port numbers — constrain range
+    if (keyUpper.includes("PORT")) {
+      hint.min = 1;
+      hint.max = 65535;
+      prop.minimum = 1;
+      prop.maximum = 65535;
+    }
+
+    // Timeout/interval — show unit
+    if (
+      keyUpper.includes("TIMEOUT") ||
+      keyUpper.includes("INTERVAL") ||
+      keyUpper.includes("_MS")
+    ) {
+      hint.unit = "ms";
+      prop.minimum = 0;
+      hint.min = 0;
+    }
+
+    // Count/limit — non-negative
+    if (
+      keyUpper.includes("COUNT") ||
+      keyUpper.includes("LIMIT") ||
+      keyUpper.startsWith("MAX_")
+    ) {
+      hint.min = 0;
+      prop.minimum = 0;
+    }
+
+    // Retry — bounded range
+    if (keyUpper.includes("RETRY") || keyUpper.includes("RETRIES")) {
+      hint.min = 0;
+      hint.max = 100;
+      prop.minimum = 0;
+      prop.maximum = 100;
+    }
+
+    // Debug/verbose/enabled — mark as advanced
+    if (
+      keyUpper.includes("DEBUG") ||
+      keyUpper.includes("VERBOSE") ||
+      keyUpper.includes("ENABLED")
+    ) {
+      hint.advanced = true;
+    }
+
+    // Model selection — NOT advanced (important user-facing choice)
+    if (keyUpper.includes("MODEL") && p.options?.length) {
+      hint.advanced = false;
+    }
+
+    // Region/zone — suggest common cloud regions when no options provided
+    if (
+      (keyUpper.includes("REGION") || keyUpper.includes("ZONE")) &&
+      !p.options?.length
+    ) {
+      hint.type = "select";
+      hint.options = [
+        { value: "us-east-1", label: "US East (N. Virginia)" },
+        { value: "us-west-2", label: "US West (Oregon)" },
+        { value: "eu-west-1", label: "EU (Ireland)" },
+        { value: "eu-central-1", label: "EU (Frankfurt)" },
+        { value: "ap-southeast-1", label: "Asia Pacific (Singapore)" },
+        { value: "ap-northeast-1", label: "Asia Pacific (Tokyo)" },
+      ];
+    }
+
+    // File/directory path → file renderer
+    if ((prop as Record<string, unknown>).__fileHint) {
+      hint.type = "file";
+      delete (prop as Record<string, unknown>).__fileHint;
+    }
+
+    // JSON-encoded value → json renderer
+    if ((prop as Record<string, unknown>).__jsonHint) {
+      hint.type = "json";
+      delete (prop as Record<string, unknown>).__jsonHint;
+    }
+
+    // Model name fields — helpful placeholder (overridden by server-provided model options via configUiHints)
+    if (
+      keyUpper.includes("MODEL") &&
+      prop.type === "string" &&
+      !p.options?.length
+    ) {
+      if (!hint.placeholder) {
+        if (keyUpper.includes("EMBEDDING")) {
+          hint.placeholder = "e.g., text-embedding-3-small";
+        } else if (keyUpper.includes("TTS")) {
+          hint.placeholder = "e.g., tts-1, eleven_multilingual_v2";
+        } else if (keyUpper.includes("STT")) {
+          hint.placeholder = "e.g., whisper-1";
+        } else if (keyUpper.includes("IMAGE")) {
+          hint.placeholder = "e.g., dall-e-3, gpt-4o";
+        } else {
+          hint.placeholder = "e.g., gpt-4o, claude-sonnet-4-20250514";
+        }
+      }
+    }
+
+    // Mode/strategy fields — extract options from description if available
+    if (
+      prop.type === "string" &&
+      !prop.enum &&
+      !p.sensitive &&
+      (keyUpper.endsWith("_MODE") || keyUpper.endsWith("_STRATEGY"))
+    ) {
+      const desc = p.description ?? "";
+      // Match "auto | local | mcp" or "filesystem|in-context|sqlite"
+      const pipeMatch =
+        desc.match(/:\s*([a-z0-9_-]+(?:\s*[|/]\s*[a-z0-9_-]+)+)/i) ??
+        desc.match(/\(([a-z0-9_-]+(?:\s*[|/,]\s*[a-z0-9_-]+)+)\)/i);
+      if (pipeMatch) {
+        const opts = pipeMatch[1]
+          .split(/[|/,]/)
+          .map((s) => s.trim())
+          .filter(Boolean);
+        const safeOpts = opts.filter((v) => /^[a-z0-9_-]+$/i.test(v));
+        if (safeOpts.length >= 2 && safeOpts.length <= 10) {
+          hint.type = "select";
+          hint.options = safeOpts.map((v) => ({ value: v, label: v }));
+        }
+      } else {
+        // Match 'polling' or 'webhook' -or- 'env', 'oauth', or 'bearer' style
+        const quotedOpts = [...desc.matchAll(/'([a-z0-9_-]+)'/gi)].map(
+          (m) => m[1],
+        );
+        const safeQuoted = quotedOpts.filter((v) => /^[a-z0-9_-]+$/i.test(v));
+        if (safeQuoted.length >= 2 && safeQuoted.length <= 10) {
+          // Radio for 2 options, select for 3+
+          hint.type = safeQuoted.length === 2 ? "radio" : "select";
+          hint.options = safeQuoted.map((v) => ({ value: v, label: v }));
+        }
+      }
+    }
+
+    if (p.description) {
+      hint.help = p.description;
+      if (p.default != null) hint.help += ` (default: ${String(p.default)})`;
+    }
+    if (p.sensitive)
+      hint.placeholder = p.isSet ? "********  (already set)" : "Enter value...";
+    else if (p.default) hint.placeholder = `Default: ${String(p.default)}`;
+    hints[p.key] = hint;
+  }
+
+  return {
+    schema: { type: "object", properties, required } as JsonSchemaObject,
+    hints,
+  };
+}
+
+/* ── PluginConfigForm bridge ─────────────────────────────────────────── */
+
+function PluginConfigForm({
+  plugin,
+  pluginConfigs,
+  onParamChange,
+}: {
+  plugin: PluginInfo;
+  pluginConfigs: Record<string, Record<string, string>>;
+  onParamChange: (pluginId: string, paramKey: string, value: string) => void;
+}) {
+  const params = plugin.parameters ?? [];
+  const { schema, hints: autoHints } = useMemo(
+    () => paramsToSchema(params, plugin.id),
+    [params, plugin.id],
+  );
+
+  // Merge server-provided configUiHints over auto-generated hints.
+  // Server hints take priority (override auto-generated ones).
+  const hints = useMemo(() => {
+    const serverHints = plugin.configUiHints;
+    if (!serverHints || Object.keys(serverHints).length === 0) return autoHints;
+    const merged: Record<string, ConfigUiHint> = { ...autoHints };
+    for (const [key, serverHint] of Object.entries(serverHints)) {
+      merged[key] = { ...merged[key], ...serverHint };
+    }
+    return merged;
+  }, [autoHints, plugin.configUiHints]);
+
+  // Build values from current config state + existing server values.
+  // Array-typed fields need comma-separated strings parsed into arrays.
+  const values = useMemo(() => {
+    const v: Record<string, unknown> = {};
+    const props = (schema.properties ?? {}) as Record<
+      string,
+      Record<string, unknown>
+    >;
+    for (const p of params) {
+      const isArrayField = props[p.key]?.type === "array";
+      const configValue = pluginConfigs[plugin.id]?.[p.key];
+      if (configValue !== undefined) {
+        if (isArrayField && typeof configValue === "string") {
+          v[p.key] = configValue
+            ? configValue
+                .split(",")
+                .map((s: string) => s.trim())
+                .filter(Boolean)
+            : [];
+        } else {
+          v[p.key] = configValue;
+        }
+      } else if (p.isSet && !p.sensitive && p.currentValue != null) {
+        if (isArrayField && typeof p.currentValue === "string") {
+          v[p.key] = String(p.currentValue)
+            ? String(p.currentValue)
+                .split(",")
+                .map((s: string) => s.trim())
+                .filter(Boolean)
+            : [];
+        } else {
+          v[p.key] = p.currentValue;
+        }
+      }
+    }
+    return v;
+  }, [params, plugin.id, pluginConfigs, schema]);
+
+  const setKeys = useMemo(
+    () =>
+      new Set(
+        params
+          .filter((p: PluginParamDef) => p.isSet)
+          .map((p: PluginParamDef) => p.key),
+      ),
+    [params],
+  );
+
+  const handleChange = useCallback(
+    (key: string, value: unknown) => {
+      // Join array values back to comma-separated strings for env var storage
+      const stringValue = Array.isArray(value)
+        ? value.join(", ")
+        : String(value ?? "");
+      onParamChange(plugin.id, key, stringValue);
+    },
+    [plugin.id, onParamChange],
+  );
+
+  return (
+    <ConfigRenderer
+      schema={schema}
+      hints={hints}
+      values={values}
+      setKeys={setKeys}
+      registry={defaultRegistry}
+      pluginId={plugin.id}
+      onChange={handleChange}
+    />
+  );
+}
+
+/* ── Default Icons ─────────────────────────────────────────────────── */
+
+const DEFAULT_ICONS: Record<string, LucideIcon> = {
+  // AI Providers
+  anthropic: Brain,
+  "google-genai": Sparkles,
+  groq: Zap,
+  "local-ai": Monitor,
+  ollama: Bot,
+  openai: CircleDashed,
+  openrouter: Shuffle,
+  "vercel-ai-gateway": Triangle,
+  xai: Hash,
+  // Connectors — chat & social
+  discord: MessageCircle,
+  telegram: Send,
+  slack: Briefcase,
+  twitter: Twitter,
+  whatsapp: Smartphone,
+  signal: Lock,
+  imessage: MessageSquare,
+  bluebubbles: Droplets,
+  bluesky: Leaf,
+  farcaster: Circle,
+  instagram: Video,
+  nostr: Fingerprint,
+  twitch: Gamepad2,
+  matrix: Link,
+  mattermost: Diamond,
+  msteams: Square,
+  "google-chat": MessagesSquare,
+  feishu: Feather,
+  line: Circle,
+  "nextcloud-talk": Cloud,
+  tlon: Tornado,
+  zalo: Circle,
+  zalouser: Circle,
+  // Features — voice & audio
+  "edge-tts": Volume2,
+  elevenlabs: Mic,
+  tts: Volume2,
+  "simple-voice": Mic,
+  "robot-voice": Bot,
+  // Features — blockchain & finance
+  evm: Link,
+  solana: CircleDot,
+  "auto-trader": TrendingDown,
+  "lp-manager": Wallet,
+  "social-alpha": Layers,
+  polymarket: Gamepad2,
+  x402: CreditCard,
+  trust: Handshake,
+  iq: Puzzle,
+  // Features — dev tools & infra
+  cli: Hash,
+  code: Puzzle,
+  shell: Shell,
+  github: Github,
+  linear: Square,
+  mcp: Puzzle,
+  browser: Chrome,
+  computeruse: MousePointer2,
+  n8n: Settings,
+  webhooks: Webhook,
+  // Features — knowledge & memory
+  knowledge: BookOpen,
+  memory: Dna,
+  "local-embedding": Binary,
+  pdf: FileText,
+  "secrets-manager": FileKey,
+  scratchpad: StickyNote,
+  rlm: RefreshCw,
+  // Features — agents & orchestration
+  "agent-orchestrator": Target,
+  "agent-skills": Wrench,
+  "plugin-manager": Package,
+  "copilot-proxy": Handshake,
+  directives: ClipboardList,
+  goals: Target,
+  "eliza-classic": Bot,
+  // Features — media & content
+  vision: Eye,
+  rss: Rss,
+  "gmail-watch": Mail,
+  prose: PenTool,
+  form: ClipboardList,
+  // Features — scheduling & automation
+  cron: Clock,
+  scheduling: Calendar,
+  todo: ClipboardList,
+  commands: Command,
+  // Features — storage & logging
+  "s3-storage": Server,
+  "trajectory-logger": TrendingDown,
+  experience: Star,
+  // Features — gaming & misc
+  minecraft: Pickaxe,
+  roblox: BrickWall,
+  babylon: Gamepad,
+  mysticism: Sparkle,
+  personality: Target,
+  moltbook: ScrollText,
+  tee: LockKeyhole,
+  blooio: Circle,
+  acp: Construction,
+  elizacloud: Cloud,
+  twilio: Phone,
+};
+
+/** Resolve display icon: explicit plugin.icon, fallback to default map, or null. */
+function resolveIcon(p: PluginInfo): LucideIcon | string | null {
+  if (p.icon) return p.icon;
+  return DEFAULT_ICONS[p.id] ?? null;
+}
+
+function iconImageSource(icon: string): string | null {
+  const value = icon.trim();
+  if (!value) return null;
+  if (
+    /^(https?:|data:image\/|blob:|file:|capacitor:|capacitor-electron:|app:|\/|\.\/|\.\.\/)/i.test(
+      value,
+    )
+  ) {
+    return resolveAppAssetUrl(value);
+  }
+  return null;
+}
+
+function getPluginResourceLinks(
+  plugin: Pick<PluginInfo, "setupGuideUrl" | "homepage" | "repository">,
+): Array<{ key: string; label: string; url: string }> {
+  const seen = new Set<string>();
+  const ordered = [
+    { key: "guide", label: "Setup guide", url: plugin.setupGuideUrl },
+    { key: "official", label: "Official", url: plugin.homepage },
+    { key: "source", label: "Source", url: plugin.repository },
+  ];
+  return ordered.flatMap((item) => {
+    const url = item.url?.trim();
+    if (!url || seen.has(url)) return [];
+    seen.add(url);
+    return [{ key: item.key, label: item.label, url }];
+  });
+}
+
+/* ── Sub-group Classification ──────────────────────────────────────── */
+
+/** Map plugin IDs to fine-grained sub-groups for the "Feature" category. */
+const FEATURE_SUBGROUP: Record<string, string> = {
+  // Voice & Audio
+  "edge-tts": "voice",
+  elevenlabs: "voice",
+  tts: "voice",
+  "simple-voice": "voice",
+  "robot-voice": "voice",
+  // Blockchain & Finance
+  evm: "blockchain",
+  solana: "blockchain",
+  "auto-trader": "blockchain",
+  "lp-manager": "blockchain",
+  "social-alpha": "blockchain",
+  polymarket: "blockchain",
+  x402: "blockchain",
+  trust: "blockchain",
+  iq: "blockchain",
+  // Dev Tools & Infrastructure
+  cli: "devtools",
+  code: "devtools",
+  shell: "devtools",
+  github: "devtools",
+  linear: "devtools",
+  mcp: "devtools",
+  browser: "devtools",
+  computeruse: "devtools",
+  n8n: "devtools",
+  webhooks: "devtools",
+  // Knowledge & Memory
+  knowledge: "knowledge",
+  memory: "knowledge",
+  "local-embedding": "knowledge",
+  pdf: "knowledge",
+  "secrets-manager": "knowledge",
+  scratchpad: "knowledge",
+  rlm: "knowledge",
+  // Agents & Orchestration
+  "agent-orchestrator": "agents",
+  "agent-skills": "agents",
+  "plugin-manager": "agents",
+  "copilot-proxy": "agents",
+  directives: "agents",
+  goals: "agents",
+  "eliza-classic": "agents",
+  // Media & Content
+  vision: "media",
+  rss: "media",
+  "gmail-watch": "media",
+  prose: "media",
+  form: "media",
+  // Scheduling & Automation
+  cron: "automation",
+  scheduling: "automation",
+  todo: "automation",
+  commands: "automation",
+  // Storage & Logging
+  "s3-storage": "storage",
+  "trajectory-logger": "storage",
+  experience: "storage",
+  // Gaming & Creative
+  minecraft: "gaming",
+  roblox: "gaming",
+  babylon: "gaming",
+  mysticism: "gaming",
+  personality: "gaming",
+  moltbook: "gaming",
+};
+
+const SUBGROUP_DISPLAY_ORDER = [
+  "ai-provider",
+  "connector",
+  "streaming",
+  "voice",
+  "blockchain",
+  "devtools",
+  "knowledge",
+  "agents",
+  "media",
+  "automation",
+  "storage",
+  "gaming",
+  "feature-other",
+  "showcase",
+] as const;
+
+const SUBGROUP_LABELS: Record<string, string> = {
+  "ai-provider": "AI Providers",
+  connector: "Connectors",
+  voice: "Voice & Audio",
+  blockchain: "Blockchain & Finance",
+  devtools: "Dev Tools & Infrastructure",
+  knowledge: "Knowledge & Memory",
+  agents: "Agents & Orchestration",
+  media: "Media & Content",
+  automation: "Scheduling & Automation",
+  storage: "Storage & Logging",
+  gaming: "Gaming & Creative",
+  "feature-other": "Other Features",
+  streaming: "Streaming Destinations",
+  showcase: "Showcase",
+};
+
+const SUBGROUP_NAV_ICONS: Record<string, LucideIcon> = {
+  all: Package,
+  "ai-provider": Brain,
+  connector: MessageCircle,
+  streaming: Video,
+  voice: Mic,
+  blockchain: Wallet,
+  devtools: Shell,
+  knowledge: BookOpen,
+  agents: Target,
+  media: Eye,
+  automation: Calendar,
+  storage: Server,
+  gaming: Gamepad2,
+  "feature-other": Puzzle,
+  showcase: Sparkles,
+};
+
+function subgroupForPlugin(plugin: PluginInfo): string {
+  if (plugin.id === "__ui-showcase__") return "showcase";
+  if (plugin.category === "ai-provider") return "ai-provider";
+  if (plugin.category === "connector") return "connector";
+  if (plugin.category === "streaming") return "streaming";
+  return FEATURE_SUBGROUP[plugin.id] ?? "feature-other";
+}
+
+type StatusFilter = "all" | "enabled" | "disabled";
+type PluginsViewMode = "all" | "connectors" | "streaming" | "social";
+type SubgroupTag = { id: string; label: string; count: number };
+
+function comparePlugins(left: PluginInfo, right: PluginInfo): number {
+  if (left.enabled !== right.enabled) return left.enabled ? -1 : 1;
+  if (left.enabled && right.enabled) {
+    const leftNeedsConfig =
+      left.parameters?.some(
+        (param: PluginParamDef) => param.required && !param.isSet,
+      ) ?? false;
+    const rightNeedsConfig =
+      right.parameters?.some(
+        (param: PluginParamDef) => param.required && !param.isSet,
+      ) ?? false;
+    if (leftNeedsConfig !== rightNeedsConfig) {
+      return leftNeedsConfig ? -1 : 1;
+    }
+  }
+  return (left.name ?? "").localeCompare(right.name ?? "");
+}
+
+function matchesPluginFilters(
+  plugin: PluginInfo,
+  searchLower: string,
+  statusFilter: StatusFilter,
+): boolean {
+  const matchesStatus =
+    statusFilter === "all" ||
+    (statusFilter === "enabled" && plugin.enabled) ||
+    (statusFilter === "disabled" && !plugin.enabled);
+  const matchesSearch =
+    !searchLower ||
+    (plugin.name ?? "").toLowerCase().includes(searchLower) ||
+    (plugin.description ?? "").toLowerCase().includes(searchLower) ||
+    (plugin.tags ?? []).some((tag) =>
+      (tag ?? "").toLowerCase().includes(searchLower),
+    ) ||
+    plugin.id.toLowerCase().includes(searchLower);
+  return matchesStatus && matchesSearch;
+}
+
+function sortPlugins(
+  filteredPlugins: PluginInfo[],
+  pluginOrder: string[],
+  allowCustomOrder: boolean,
+): PluginInfo[] {
+  if (!allowCustomOrder || pluginOrder.length === 0) {
+    return [...filteredPlugins].sort(comparePlugins);
+  }
+
+  const orderMap = new Map(pluginOrder.map((id, index) => [id, index]));
+  return [...filteredPlugins].sort((left, right) => {
+    const leftIndex = orderMap.get(left.id);
+    const rightIndex = orderMap.get(right.id);
+    if (leftIndex != null && rightIndex != null) return leftIndex - rightIndex;
+    if (leftIndex != null) return -1;
+    if (rightIndex != null) return 1;
+    return comparePlugins(left, right);
+  });
+}
+
+function buildPluginListState(options: {
+  allowCustomOrder: boolean;
+  effectiveSearch: string;
+  effectiveStatusFilter: StatusFilter;
+  isConnectorLikeMode: boolean;
+  mode: PluginsViewMode;
+  pluginOrder: string[];
+  plugins: PluginInfo[];
+  showSubgroupFilters: boolean;
+  subgroupFilter: string;
+}): {
+  categoryPlugins: PluginInfo[];
+  enabledCount: number;
+  nonDbPlugins: PluginInfo[];
+  sorted: PluginInfo[];
+  subgroupTags: SubgroupTag[];
+  visiblePlugins: PluginInfo[];
+} {
+  const {
+    allowCustomOrder,
+    effectiveSearch,
+    effectiveStatusFilter,
+    isConnectorLikeMode,
+    mode,
+    pluginOrder,
+    plugins,
+    showSubgroupFilters,
+    subgroupFilter,
+  } = options;
+  const categoryPlugins = plugins.filter(
+    (plugin) =>
+      plugin.category !== "database" &&
+      !ALWAYS_ON_PLUGIN_IDS.has(plugin.id) &&
+      (!isConnectorLikeMode || plugin.category === "connector") &&
+      (mode !== "streaming" || plugin.category === "streaming"),
+  );
+  const nonDbPlugins = [SHOWCASE_PLUGIN, ...categoryPlugins];
+  const searchLower = effectiveSearch.toLowerCase();
+  const sorted = sortPlugins(
+    categoryPlugins.filter((plugin) =>
+      matchesPluginFilters(plugin, searchLower, effectiveStatusFilter),
+    ),
+    pluginOrder,
+    allowCustomOrder,
+  );
+  const enabledCount = categoryPlugins.filter(
+    (plugin) => plugin.enabled,
+  ).length;
+
+  const subgroupCounts: Record<string, number> = {};
+  const visiblePlugins: PluginInfo[] = [];
+  for (const plugin of sorted) {
+    const subgroup = subgroupForPlugin(plugin);
+    subgroupCounts[subgroup] = (subgroupCounts[subgroup] ?? 0) + 1;
+    if (
+      !showSubgroupFilters ||
+      subgroupFilter === "all" ||
+      subgroup === subgroupFilter
+    ) {
+      visiblePlugins.push(plugin);
+    }
+  }
+
+  const subgroupTags = [
+    { id: "all", label: "All", count: sorted.length },
+    ...SUBGROUP_DISPLAY_ORDER.filter(
+      (subgroupId) => (subgroupCounts[subgroupId] ?? 0) > 0,
+    ).map((subgroupId) => ({
+      id: subgroupId,
+      label: SUBGROUP_LABELS[subgroupId],
+      count: subgroupCounts[subgroupId] ?? 0,
+    })),
+  ];
+
+  return {
+    categoryPlugins,
+    enabledCount,
+    nonDbPlugins,
+    sorted,
+    subgroupTags,
+    visiblePlugins,
+  };
+}
+
+/* ── Shared PluginListView ─────────────────────────────────────────── */
+
+interface PluginListViewProps {
+  /** Label used in search placeholder and empty state messages. */
+  label: string;
+  /** Optional list mode for pre-filtered views like Connectors. */
+  mode?: PluginsViewMode;
+  /** Whether the view is rendered in a full-screen gamified modal. */
+  inModal?: boolean;
+}
+
+function PluginListView({ label, mode = "all", inModal }: PluginListViewProps) {
+  const {
+    plugins,
+    pluginStatusFilter,
+    pluginSearch,
+    pluginSettingsOpen,
+    pluginSaving,
+    pluginSaveSuccess,
+    loadPlugins,
+    handlePluginToggle,
+    handlePluginConfigSave,
+    setActionNotice,
+    setState,
+    t,
+  } = useApp();
+
+  const [pluginConfigs, setPluginConfigs] = useState<
+    Record<string, Record<string, string>>
+  >({});
+  const [testResults, setTestResults] = useState<
+    Map<
+      string,
+      {
+        success: boolean;
+        message?: string;
+        error?: string;
+        durationMs: number;
+        loading: boolean;
+      }
+    >
+  >(new Map());
+  const [addDirOpen, setAddDirOpen] = useState(false);
+  const [addDirPath, setAddDirPath] = useState("");
+  const [addDirLoading, setAddDirLoading] = useState(false);
+  const [installingPlugins, setInstallingPlugins] = useState<Set<string>>(
+    new Set(),
+  );
+  const [installProgress, setInstallProgress] = useState<
+    Map<string, { phase: string; message: string }>
+  >(new Map());
+  const [togglingPlugins, setTogglingPlugins] = useState<Set<string>>(
+    new Set(),
+  );
+  const hasPluginToggleInFlight = togglingPlugins.size > 0;
+
+  // ── Drag-to-reorder state ────────────────────────────────────────
+  const [pluginOrder, setPluginOrder] = useState<string[]>(() => {
+    try {
+      const stored = localStorage.getItem("pluginOrder");
+      return stored ? JSON.parse(stored) : [];
+    } catch {
+      return [];
+    }
+  });
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+  const dragRef = useRef<string | null>(null);
+  const isSocialMode = mode === "social";
+  const isConnectorLikeMode = mode === "connectors" || mode === "social";
+  const resultLabel = isSocialMode ? "connectors" : label.toLowerCase();
+  const searchPlaceholder = isSocialMode
+    ? "Search..."
+    : `Search ${label.toLowerCase()}...`;
+  const effectiveStatusFilter: StatusFilter =
+    isSocialMode && pluginStatusFilter === "disabled"
+      ? "all"
+      : pluginStatusFilter;
+  const effectiveSearch = pluginSearch;
+  const showToolbar = true;
+  const allowCustomOrder = !isSocialMode;
+  const showPluginManagementActions = !isSocialMode;
+
+  // Load plugins on mount
+  useEffect(() => {
+    void loadPlugins();
+  }, [loadPlugins]);
+
+  // Listen for install progress events via WebSocket
+  useEffect(() => {
+    const unbind = client.onWsEvent(
+      "install-progress",
+      (data: Record<string, unknown>) => {
+        const pluginName = data.pluginName as string;
+        const phase = data.phase as string;
+        const message = data.message as string;
+        if (!pluginName) return;
+        if (phase === "complete" || phase === "error") {
+          setInstallProgress((prev) => {
+            const next = new Map(prev);
+            next.delete(pluginName);
+            return next;
+          });
+        } else {
+          setInstallProgress((prev) =>
+            new Map(prev).set(pluginName, { phase, message }),
+          );
+        }
+      },
+    );
+    return unbind;
+  }, []);
+
+  // Persist custom order
+  useEffect(() => {
+    if (pluginOrder.length > 0) {
+      localStorage.setItem("pluginOrder", JSON.stringify(pluginOrder));
+    }
+  }, [pluginOrder]);
+
+  const [subgroupFilter, setSubgroupFilter] = useState<string>("all");
+  const showSubgroupFilters =
+    mode !== "connectors" && mode !== "streaming" && mode !== "social";
+  const showDesktopSubgroupSidebar = showSubgroupFilters;
+  const {
+    categoryPlugins,
+    enabledCount,
+    nonDbPlugins,
+    sorted,
+    subgroupTags,
+    visiblePlugins,
+  } = useMemo(
+    () =>
+      buildPluginListState({
+        allowCustomOrder,
+        effectiveSearch,
+        effectiveStatusFilter,
+        isConnectorLikeMode,
+        mode,
+        pluginOrder,
+        plugins,
+        showSubgroupFilters,
+        subgroupFilter,
+      }),
+    [
+      allowCustomOrder,
+      effectiveSearch,
+      effectiveStatusFilter,
+      isConnectorLikeMode,
+      mode,
+      pluginOrder,
+      plugins,
+      showSubgroupFilters,
+      subgroupFilter,
+    ],
+  );
+
+  useEffect(() => {
+    if (!showSubgroupFilters) return;
+    if (subgroupFilter === "all") return;
+    if (!subgroupTags.some((tag) => tag.id === subgroupFilter)) {
+      setSubgroupFilter("all");
+    }
+  }, [showSubgroupFilters, subgroupFilter, subgroupTags]);
+
+  const renderSubgroupFilterButton = useCallback(
+    (
+      tag: { id: string; label: string; count: number },
+      options?: { sidebar?: boolean },
+    ) => {
+      const isActive = subgroupFilter === tag.id;
+      if (options?.sidebar) {
+        const Icon = SUBGROUP_NAV_ICONS[tag.id] ?? Package;
+        return (
+          <button
+            key={tag.id}
+            type="button"
+            onClick={() => setSubgroupFilter(tag.id)}
+            aria-current={isActive ? "page" : undefined}
+            className={`flex w-full items-center gap-3 rounded-2xl border px-4 py-3 text-left transition-all duration-200 ${
+              isActive
+                ? "border-accent/40 bg-accent/12 text-txt shadow-[0_10px_30px_rgba(var(--accent),0.08)]"
+                : "border-transparent text-muted hover:border-border/60 hover:bg-card/55 hover:text-txt"
+            }`}
+          >
+            <span
+              className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border ${
+                isActive
+                  ? "border-accent/30 bg-accent/18 text-txt-strong"
+                  : "border-border/50 bg-bg-accent/80 text-muted"
+              }`}
+            >
+              <Icon className="w-4 h-4" />
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block text-sm font-semibold leading-snug text-current">
+                {tag.label}
+              </span>
+            </span>
+            <span
+              className={`rounded-full border px-2 py-0.5 text-[10px] font-mono leading-none ${
+                isActive
+                  ? "border-accent/20 bg-accent/20 text-txt"
+                  : "border-border/50 bg-black/10 text-muted"
+              }`}
+            >
+              {tag.count}
+            </span>
+          </button>
+        );
+      }
+
+      return (
+        <Button
+          key={tag.id}
+          variant={isActive ? "default" : "outline"}
+          size="sm"
+          className={`h-7 px-3 text-[11px] font-bold tracking-wide rounded-lg transition-all ${
+            isActive
+              ? "shadow-[0_0_10px_rgba(var(--accent),0.2)] border-accent"
+              : "bg-card/40 backdrop-blur-sm border-border/40 text-muted hover:text-txt shadow-sm hover:border-accent/30"
+          }`}
+          onClick={() => setSubgroupFilter(tag.id)}
+        >
+          {tag.label}
+          <span
+            className={`ml-1.5 px-1.5 py-0.5 rounded border text-[9px] font-mono leading-none ${isActive ? "bg-black/20 border-black/10" : "bg-black/10 border-white/5"}`}
+          >
+            {tag.count}
+          </span>
+        </Button>
+      );
+    },
+    [subgroupFilter],
+  );
+
+  // ── Handlers ───────────────────────────────────────────────────────
+
+  const toggleSettings = (pluginId: string) => {
+    const next = new Set<string>();
+    if (!pluginSettingsOpen.has(pluginId)) next.add(pluginId);
+    setState("pluginSettingsOpen", next);
+  };
+
+  const handleParamChange = (
+    pluginId: string,
+    paramKey: string,
+    value: string,
+  ) => {
+    setPluginConfigs((prev) => ({
+      ...prev,
+      [pluginId]: { ...prev[pluginId], [paramKey]: value },
+    }));
+  };
+
+  const handleConfigSave = async (pluginId: string) => {
+    // Showcase plugin: no-op save (it's not a real plugin)
+    if (pluginId === "__ui-showcase__") return;
+    const config = pluginConfigs[pluginId] ?? {};
+    await handlePluginConfigSave(pluginId, config);
+    setPluginConfigs((prev) => {
+      const next = { ...prev };
+      delete next[pluginId];
+      return next;
+    });
+  };
+
+  const handleConfigReset = (pluginId: string) => {
+    setPluginConfigs((prev) => {
+      const next = { ...prev };
+      delete next[pluginId];
+      return next;
+    });
+  };
+
+  const handleTestConnection = async (pluginId: string) => {
+    setTestResults((prev) => {
+      const next = new Map(prev);
+      next.set(pluginId, { success: false, loading: true, durationMs: 0 });
+      return next;
+    });
+    try {
+      const result = await client.testPluginConnection(pluginId);
+      setTestResults((prev) => {
+        const next = new Map(prev);
+        next.set(pluginId, { ...result, loading: false });
+        return next;
+      });
+    } catch (err) {
+      setTestResults((prev) => {
+        const next = new Map(prev);
+        next.set(pluginId, {
+          success: false,
+          error: err instanceof Error ? err.message : String(err),
+          loading: false,
+          durationMs: 0,
+        });
+        return next;
+      });
+    }
+  };
+
+  const handleInstallPlugin = async (pluginId: string, npmName: string) => {
+    setInstallingPlugins((prev) => new Set(prev).add(pluginId));
+    try {
+      await client.installRegistryPlugin(npmName);
+      await loadPlugins();
+      setActionNotice(
+        `${npmName} installed. Restart required to activate.`,
+        "success",
+      );
+    } catch (err) {
+      setActionNotice(
+        `Failed to install ${npmName}: ${err instanceof Error ? err.message : "unknown error"}`,
+        "error",
+        3800,
+      );
+      // Still try to refresh in case install succeeded but restart failed
+      try {
+        await loadPlugins();
+      } catch {
+        /* ignore */
+      }
+    } finally {
+      setInstallingPlugins((prev) => {
+        const next = new Set(prev);
+        next.delete(pluginId);
+        return next;
+      });
+    }
+  };
+
+  const handleTogglePlugin = useCallback(
+    async (pluginId: string, enabled: boolean) => {
+      let shouldStart = false;
+      setTogglingPlugins((prev) => {
+        if (prev.has(pluginId) || prev.size > 0) return prev;
+        shouldStart = true;
+        return new Set(prev).add(pluginId);
+      });
+      if (!shouldStart) return;
+
+      try {
+        await handlePluginToggle(pluginId, enabled);
+      } finally {
+        setTogglingPlugins((prev) => {
+          const next = new Set(prev);
+          next.delete(pluginId);
+          return next;
+        });
+      }
+    },
+    [handlePluginToggle],
+  );
+
+  const handleOpenPluginExternalUrl = useCallback(
+    async (url: string) => {
+      try {
+        await openExternalUrl(url);
+      } catch (err) {
+        setActionNotice(
+          err instanceof Error ? err.message : "Failed to open external link.",
+          "error",
+          4200,
+        );
+      }
+    },
+    [setActionNotice],
+  );
+
+  // ── Add from directory ──────────────────────────────────────────────
+
+  const handleAddFromDirectory = async () => {
+    const trimmed = addDirPath.trim();
+    if (!trimmed) return;
+    setAddDirLoading(true);
+    try {
+      await client.installRegistryPlugin(trimmed);
+      await loadPlugins();
+      setAddDirPath("");
+      setAddDirOpen(false);
+      setActionNotice(`Plugin installed from ${trimmed}`, "success");
+    } catch (err) {
+      setActionNotice(
+        `Failed to add plugin: ${err instanceof Error ? err.message : "unknown error"}`,
+        "error",
+        3800,
+      );
+    }
+    setAddDirLoading(false);
+  };
+
+  // ── Drag-to-reorder handlers ─────────────────────────────────────
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent, pluginId: string) => {
+      dragRef.current = pluginId;
+      setDraggingId(pluginId);
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", pluginId);
+    },
+    [],
+  );
+
+  const handleDragOver = useCallback((e: React.DragEvent, pluginId: string) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (dragRef.current && dragRef.current !== pluginId) {
+      setDragOverId(pluginId);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent, targetId: string) => {
+      e.preventDefault();
+      const srcId = dragRef.current;
+      if (!srcId || srcId === targetId) {
+        dragRef.current = null;
+        setDraggingId(null);
+        setDragOverId(null);
+        return;
+      }
+      // Materialize current sorted order, then splice
+      if (!allowCustomOrder) return;
+      setPluginOrder(() => {
+        // Build full order: items in custom order first, then any new ones
+        const allIds = nonDbPlugins.map((p: PluginInfo) => p.id);
+        let ids: string[];
+        if (pluginOrder.length > 0) {
+          const known = new Set(pluginOrder);
+          ids = [...pluginOrder, ...allIds.filter((id) => !known.has(id))];
+        } else {
+          ids = sorted.map((p: PluginInfo) => p.id);
+          // Pad with any nonDbPlugins not currently in sorted (due to filters)
+          const inSorted = new Set(ids);
+          for (const id of allIds) {
+            if (!inSorted.has(id)) ids.push(id);
+          }
+        }
+        const fromIdx = ids.indexOf(srcId);
+        const toIdx = ids.indexOf(targetId);
+        if (fromIdx === -1 || toIdx === -1) return ids;
+        ids.splice(fromIdx, 1);
+        ids.splice(toIdx, 0, srcId);
+        return ids;
+      });
+      dragRef.current = null;
+      setDraggingId(null);
+      setDragOverId(null);
+    },
+    [allowCustomOrder, nonDbPlugins, pluginOrder, sorted],
+  );
+
+  const handleDragEnd = useCallback(() => {
+    dragRef.current = null;
+    setDraggingId(null);
+    setDragOverId(null);
+  }, []);
+
+  const handleResetOrder = useCallback(() => {
+    setPluginOrder([]);
+    localStorage.removeItem("pluginOrder");
+  }, []);
+
+  const renderResolvedIcon = useCallback(
+    (
+      plugin: PluginInfo,
+      options?: {
+        className?: string;
+        emojiClassName?: string;
+      },
+    ) => {
+      const icon = resolveIcon(plugin);
+      if (!icon) {
+        return <span className={options?.emojiClassName ?? "text-sm"}>🧩</span>;
+      }
+      if (typeof icon === "string") {
+        const imageSrc = iconImageSource(icon);
+        return imageSrc ? (
+          <img
+            src={imageSrc}
+            alt=""
+            className={
+              options?.className ?? "w-5 h-5 rounded-sm object-contain"
+            }
+            onError={(e) => {
+              (e.currentTarget as HTMLImageElement).style.display = "none";
+            }}
+          />
+        ) : (
+          <span className={options?.emojiClassName ?? "text-sm"}>{icon}</span>
+        );
+      }
+      const IconComponent = icon;
+      return <IconComponent className={options?.className ?? "w-5 h-5"} />;
+    },
+    [],
+  );
+
+  // ── Card renderers ────────────────────────────────────────────────
+
+  const renderPluginCard = (p: PluginInfo) => {
+    const hasParams = p.parameters && p.parameters.length > 0;
+    const isOpen = pluginSettingsOpen.has(p.id);
+    const setCount = hasParams
+      ? p.parameters.filter((param: PluginParamDef) => param.isSet).length
+      : 0;
+    const totalCount = hasParams ? p.parameters.length : 0;
+    const allParamsSet = !hasParams || setCount === totalCount;
+    const isShowcase = p.id === "__ui-showcase__";
+    const categoryLabel = isShowcase
+      ? "showcase"
+      : p.category === "ai-provider"
+        ? "ai provider"
+        : p.category;
+
+    const enabledBorder = isShowcase
+      ? "border-l-[3px] border-l-accent"
+      : p.enabled
+        ? !allParamsSet && hasParams
+          ? "border-l-[3px] border-l-warn"
+          : "border-l-[3px] border-l-accent"
+        : "";
+    const isToggleBusy = togglingPlugins.has(p.id);
+    const toggleDisabled =
+      isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
+
+    const isDragging = draggingId === p.id;
+    const isDragOver = dragOverId === p.id && draggingId !== p.id;
+    const pluginLinks = getPluginResourceLinks(p);
+
+    return (
+      <li
+        key={p.id}
+        draggable={allowCustomOrder}
+        onDragStart={
+          allowCustomOrder ? (e) => handleDragStart(e, p.id) : undefined
+        }
+        onDragOver={
+          allowCustomOrder ? (e) => handleDragOver(e, p.id) : undefined
+        }
+        onDrop={allowCustomOrder ? (e) => handleDrop(e, p.id) : undefined}
+        onDragEnd={allowCustomOrder ? handleDragEnd : undefined}
+        className={`border border-border bg-card transition-colors duration-150 flex flex-col ${enabledBorder} ${
+          isOpen ? "ring-1 ring-accent" : "hover:border-accent/40"
+        } ${isDragging ? "opacity-30" : ""} ${isDragOver ? "ring-2 ring-accent/60" : ""}`}
+        data-plugin-id={p.id}
+      >
+        {/* Top: drag handle + icon + name + toggle */}
+        <div className="flex items-center gap-2 px-3 pt-3 pb-1">
+          {allowCustomOrder && (
+            <span
+              className="text-[10px] text-muted opacity-30 hover:opacity-70 cursor-grab active:cursor-grabbing shrink-0 select-none leading-none"
+              title={t("pluginsview.DragToReorder")}
+            >
+              {t("pluginsview.X2807")}
+            </span>
+          )}
+          <span className="font-bold text-sm flex items-center gap-1.5 min-w-0 truncate flex-1">
+            {(() => {
+              const icon = resolveIcon(p);
+              if (!icon) return null;
+              if (typeof icon === "string") {
+                const imageSrc = iconImageSource(icon);
+                return imageSrc ? (
+                  <img
+                    src={imageSrc}
+                    alt=""
+                    className="w-5 h-5 rounded-sm object-contain"
+                    onError={(e) => {
+                      (e.currentTarget as HTMLImageElement).style.display =
+                        "none";
+                    }}
+                  />
+                ) : (
+                  <span className="text-sm">{icon}</span>
+                );
+              }
+              const IconComponent = icon;
+              return <IconComponent className="w-5 h-5" />;
+            })()}
+            {p.name}
+          </span>
+          {isShowcase ? (
+            <span className="text-[10px] font-bold tracking-wider px-2.5 py-[2px] border border-accent text-txt bg-accent-subtle shrink-0">
+              {t("pluginsview.DEMO")}
+            </span>
+          ) : (
+            <button
+              type="button"
+              data-plugin-toggle={p.id}
+              className={`text-[10px] font-bold tracking-wider px-2.5 py-[2px] border transition-colors duration-150 shrink-0 ${
+                p.enabled
+                  ? "bg-accent text-accent-fg border-accent"
+                  : "bg-transparent text-muted border-border hover:text-txt"
+              } ${
+                toggleDisabled
+                  ? "opacity-60 cursor-not-allowed"
+                  : "cursor-pointer"
+              }`}
+              onClick={(e) => {
+                e.stopPropagation();
+                void handleTogglePlugin(p.id, !p.enabled);
+              }}
+              disabled={toggleDisabled}
+            >
+              {isToggleBusy ? "APPLYING" : p.enabled ? "ON" : "OFF"}
+            </button>
+          )}
+        </div>
+
+        {/* Badges: category + version + loaded status */}
+        <div className="flex items-center gap-1.5 px-3 pb-1.5">
+          <span className="text-[10px] px-1.5 py-px border border-border bg-surface text-muted lowercase tracking-wide whitespace-nowrap">
+            {categoryLabel}
+          </span>
+          {p.version && (
+            <span className="text-[10px] font-mono text-muted opacity-70">
+              v{p.version}
+            </span>
+          )}
+          {p.enabled && !p.isActive && !isShowcase && (
+            <span
+              className={`text-[10px] px-1.5 py-px border lowercase tracking-wide whitespace-nowrap ${
+                p.loadError
+                  ? "border-destructive bg-[rgba(153,27,27,0.04)] text-destructive"
+                  : "border-warn bg-[rgba(234,179,8,0.06)] text-warn"
+              }`}
+              title={
+                p.loadError || "Plugin is enabled but not loaded in the runtime"
+              }
+            >
+              {p.loadError ? "load failed" : "not installed"}
+            </span>
+          )}
+          {isToggleBusy && (
+            <span className="text-[10px] px-1.5 py-px border border-accent bg-accent-subtle text-txt lowercase tracking-wide whitespace-nowrap">
+              {t("pluginsview.restarting")}
+            </span>
+          )}
+        </div>
+
+        {/* Description — clamped to 3 lines */}
+        <p
+          className="text-xs text-muted px-3 pb-2 flex-1"
+          style={{
+            display: "-webkit-box",
+            WebkitLineClamp: 3,
+            WebkitBoxOrient: "vertical",
+            overflow: "hidden",
+          }}
+        >
+          {p.description || "No description available"}
+        </p>
+
+        {(p.tags?.length ?? 0) > 0 && (
+          <div className="flex flex-wrap gap-1.5 px-3 pb-2">
+            {p.tags?.slice(0, 4).map((tag) => (
+              <span
+                key={`${p.id}:${tag}`}
+                className="text-[10px] px-1.5 py-px border border-border/50 bg-black/10 text-muted lowercase tracking-wide whitespace-nowrap"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {pluginLinks.length > 0 && (
+          <div className="flex flex-wrap gap-2 px-3 pb-2">
+            {pluginLinks.map((link) => (
+              <Button
+                key={`${p.id}:${link.key}`}
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 text-[10px] font-bold border-border/40 text-muted hover:text-txt hover:border-accent hover:bg-accent/5 backdrop-blur-sm transition-all"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void handleOpenPluginExternalUrl(link.url);
+                }}
+                title={`${link.label}: ${link.url}`}
+              >
+                {link.label}
+              </Button>
+            ))}
+          </div>
+        )}
+
+        {/* Bottom bar: config status + settings button */}
+        <div className="flex items-center gap-3 px-4 py-3 border-t border-border/40 mt-auto bg-black/5">
+          {hasParams && !isShowcase ? (
+            <>
+              <span
+                className={`inline-block w-2 h-2 rounded-full shadow-[0_0_10px_currentColor] shrink-0 ${
+                  allParamsSet
+                    ? "bg-ok text-ok"
+                    : "bg-destructive text-destructive"
+                }`}
+              />
+              <span className="text-[11px] font-bold tracking-wide text-muted">
+                {setCount}/{totalCount} {t("pluginsview.configured")}
+              </span>
+            </>
+          ) : !hasParams && !isShowcase ? (
+            <span className="text-[11px] font-bold tracking-wide text-muted/60">
+              {t("pluginsview.NoConfigNeeded")}
+            </span>
+          ) : (
+            <span className="text-[11px] font-bold tracking-wide text-muted/60">
+              {t("pluginsview.23FieldDemos")}
+            </span>
+          )}
+          <div className="flex-1" />
+          {p.enabled &&
+            !p.isActive &&
+            p.npmName &&
+            !isShowcase &&
+            !p.loadError && (
+              <Button
+                variant="default"
+                size="sm"
+                className="h-7 px-3 text-[10px] font-bold tracking-wide shadow-sm max-w-[140px] truncate"
+                disabled={installingPlugins.has(p.id)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleInstallPlugin(p.id, p.npmName ?? "");
+                }}
+              >
+                {installingPlugins.has(p.id)
+                  ? installProgress.get(p.npmName ?? "")?.message ||
+                    "Installing..."
+                  : "Install"}
+              </Button>
+            )}
+          {hasParams && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className={`h-7 px-2.5 text-[11px] font-bold transition-all flex items-center gap-1.5 ${
+                isOpen
+                  ? "text-txt bg-accent/10 hover:bg-accent/20"
+                  : "text-muted hover:text-txt hover:bg-white/5"
+              }`}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleSettings(p.id);
+              }}
+              title={t("pluginsview.Settings")}
+            >
+              <span className="text-[14px] leading-none">&#9881;</span>
+              <span
+                className={`inline-block text-[10px] transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`}
+              >
+                &#9654;
+              </span>
+            </Button>
+          )}
+        </div>
+
+        {/* Validation errors */}
+        {p.enabled && p.validationErrors && p.validationErrors.length > 0 && (
+          <div className="px-3 py-1.5 border-t border-destructive bg-[rgba(153,27,27,0.04)] text-xs">
+            {p.validationErrors.map(
+              (err: { field: string; message: string }) => (
+                <div
+                  key={`${err.field}:${err.message}`}
+                  className="text-destructive mb-0.5 text-[10px]"
+                >
+                  {err.field}: {err.message}
+                </div>
+              ),
+            )}
+          </div>
+        )}
+
+        {/* Validation warnings */}
+        {p.enabled &&
+          p.validationWarnings &&
+          p.validationWarnings.length > 0 && (
+            <div className="px-3 py-1">
+              {p.validationWarnings.map(
+                (w: { field: string; message: string }) => (
+                  <div
+                    key={`${w.field}:${w.message}`}
+                    className="text-warn text-[10px]"
+                  >
+                    {w.message}
+                  </div>
+                ),
+              )}
+            </div>
+          )}
+      </li>
+    );
+  };
+
+  /** Render a grid of plugin cards. */
+  const renderPluginGrid = (plugins: PluginInfo[]) => (
+    <ul className="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-3 m-0 p-0 list-none">
+      {plugins.map((p: PluginInfo) => renderPluginCard(p))}
+    </ul>
+  );
+
+  // Resolve the plugin whose settings dialog is currently open.
+  // Exclude ai-provider plugins — those are configured in Settings.
+  const settingsDialogPlugin =
+    Array.from(pluginSettingsOpen)
+      .map((id) => nonDbPlugins.find((plugin) => plugin.id === id) ?? null)
+      .find((plugin) => (plugin?.parameters?.length ?? 0) > 0) ?? null;
+
+  // ── Game-modal state ──────────────────────────────────────────────
+  const [gameSelectedId, setGameSelectedId] = useState<string | null>(null);
+  const [gameMobileDetail, setGameMobileDetail] = useState(false);
+  const gameNarrow =
+    typeof window !== "undefined" && typeof window.matchMedia === "function"
+      ? window.matchMedia("(max-width: 600px)").matches
+      : false;
+  const [connectorExpandedIds, setConnectorExpandedIds] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [connectorSelectedId, setConnectorSelectedId] = useState<string | null>(
+    null,
+  );
+  const [desktopConnectorLayout, setDesktopConnectorLayout] = useState(() =>
+    typeof window !== "undefined" && typeof window.matchMedia === "function"
+      ? window.matchMedia("(min-width: 1024px)").matches
+      : false,
+  );
+  const connectorSectionRefs = useRef<Record<string, HTMLElement | null>>({});
+
+  // Auto-select first visible plugin in game modal
+  const gameVisiblePlugins = visiblePlugins.filter(
+    (p: PluginInfo) => p.id !== "__ui-showcase__",
+  );
+  const effectiveGameSelected = gameVisiblePlugins.find(
+    (p: PluginInfo) => p.id === gameSelectedId,
+  )
+    ? gameSelectedId
+    : (gameVisiblePlugins[0]?.id ?? null);
+  const selectedPlugin =
+    gameVisiblePlugins.find(
+      (p: PluginInfo) => p.id === effectiveGameSelected,
+    ) ?? null;
+  const selectedPluginLinks = selectedPlugin
+    ? getPluginResourceLinks(selectedPlugin)
+    : [];
+
+  useEffect(() => {
+    if (!isSocialMode || !inModal) return;
+    if (pluginStatusFilter !== "disabled") return;
+    setState("pluginStatusFilter", "all");
+  }, [inModal, isSocialMode, pluginStatusFilter, setState]);
+
+  useEffect(() => {
+    if (!isSocialMode || !inModal) return;
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    )
+      return;
+
+    const media = window.matchMedia("(min-width: 1024px)");
+    const syncLayout = () => {
+      setDesktopConnectorLayout(media.matches);
+    };
+
+    syncLayout();
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", syncLayout);
+      return () => media.removeEventListener("change", syncLayout);
+    }
+
+    media.addListener(syncLayout);
+    return () => media.removeListener(syncLayout);
+  }, [inModal, isSocialMode]);
+
+  useEffect(() => {
+    if (!isSocialMode || !inModal) return;
+    if (visiblePlugins.length === 0) {
+      setConnectorSelectedId(null);
+      setConnectorExpandedIds(new Set());
+      return;
+    }
+
+    setConnectorSelectedId((prev) => {
+      if (visiblePlugins.some((plugin) => plugin.id === prev)) {
+        return prev;
+      }
+      return desktopConnectorLayout ? (visiblePlugins[0]?.id ?? null) : null;
+    });
+  }, [desktopConnectorLayout, inModal, isSocialMode, visiblePlugins]);
+
+  useEffect(() => {
+    if (!isSocialMode || !inModal || !desktopConnectorLayout) return;
+    if (!connectorSelectedId) return;
+    setConnectorExpandedIds(new Set([connectorSelectedId]));
+  }, [connectorSelectedId, desktopConnectorLayout, inModal, isSocialMode]);
+
+  useEffect(() => {
+    if (!isSocialMode || !inModal || desktopConnectorLayout) return;
+    setConnectorExpandedIds(new Set());
+  }, [desktopConnectorLayout, inModal, isSocialMode]);
+
+  const scrollConnectorIntoView = useCallback((pluginId: string) => {
+    const element = connectorSectionRefs.current[pluginId];
+    if (element && typeof element.scrollIntoView === "function") {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, []);
+
+  const handleConnectorSelect = useCallback(
+    (pluginId: string) => {
+      setConnectorSelectedId(pluginId);
+      setConnectorExpandedIds((prev) => {
+        if (desktopConnectorLayout) {
+          return new Set([pluginId]);
+        }
+        const next = new Set(prev);
+        next.add(pluginId);
+        return next;
+      });
+      scrollConnectorIntoView(pluginId);
+    },
+    [desktopConnectorLayout, scrollConnectorIntoView],
+  );
+
+  const handleConnectorSectionToggle = useCallback(
+    (pluginId: string) => {
+      setConnectorSelectedId(pluginId);
+      setConnectorExpandedIds((prev) => {
+        if (desktopConnectorLayout) {
+          return new Set([pluginId]);
+        }
+        const next = new Set(prev);
+        if (next.has(pluginId)) next.delete(pluginId);
+        else next.add(pluginId);
+        return next;
+      });
+      if (desktopConnectorLayout) {
+        scrollConnectorIntoView(pluginId);
+      }
+    },
+    [desktopConnectorLayout, scrollConnectorIntoView],
+  );
+
+  // ── Game-modal render ─────────────────────────────────────────────
+  if (inModal && isSocialMode) {
+    return (
+      <div
+        data-testid="plugins-view-social"
+        className={`flex min-h-full min-w-0 w-full flex-col bg-bg ${
+          desktopConnectorLayout ? "md:flex-row" : ""
+        }`}
+      >
+        {desktopConnectorLayout && (
+          <aside
+            data-testid="connectors-settings-sidebar"
+            className="flex w-[22rem] shrink-0 border-r border-border/50 bg-bg/35 backdrop-blur-xl"
+          >
+            <div className="flex min-h-full flex-1 flex-col sticky top-0 max-h-screen">
+              <div className="border-b border-border/40 px-5 py-5">
+                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted/80">
+                  Connectors
+                </div>
+                <div className="mt-2 text-sm text-muted">
+                  {enabledCount} enabled of {categoryPlugins.length}
+                </div>
+              </div>
+              <nav className="flex-1 space-y-2 overflow-y-auto px-4 py-4">
+                {(desktopConnectorLayout
+                  ? visiblePlugins.filter((plugin) => {
+                      return plugin.id === connectorSelectedId;
+                    })
+                  : visiblePlugins
+                ).map((plugin) => {
+                  const isSelected = connectorSelectedId === plugin.id;
+                  const isExpanded = connectorExpandedIds.has(plugin.id);
+                  const isToggleBusy = togglingPlugins.has(plugin.id);
+                  const toggleDisabled =
+                    isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
+
+                  return (
+                    <div
+                      key={plugin.id}
+                      className={`flex items-center gap-2 rounded-2xl border px-3 py-2 transition-all ${
+                        isSelected
+                          ? "border-accent/40 bg-accent/10 text-txt shadow-[0_10px_30px_rgba(var(--accent),0.08)]"
+                          : "border-transparent bg-transparent text-muted hover:border-border/60 hover:bg-card/55 hover:text-txt"
+                      }`}
+                    >
+                      <button
+                        type="button"
+                        className="flex min-w-0 flex-1 items-center gap-3 text-left"
+                        onClick={() => handleConnectorSelect(plugin.id)}
+                        aria-current={isSelected ? "page" : undefined}
+                      >
+                        <span
+                          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border ${
+                            isSelected
+                              ? "border-accent/30 bg-accent/18 text-txt-strong"
+                              : "border-border/50 bg-bg-accent/80 text-muted"
+                          }`}
+                        >
+                          {renderResolvedIcon(plugin, {
+                            className: "w-4 h-4 rounded-sm object-contain",
+                            emojiClassName: "text-sm",
+                          })}
+                        </span>
+                        <span className="min-w-0 flex-1 truncate text-sm font-semibold leading-none">
+                          {plugin.name}
+                        </span>
+                      </button>
+                      <button
+                        type="button"
+                        className={`shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-bold tracking-[0.16em] transition-colors ${
+                          plugin.enabled
+                            ? "border-accent bg-accent text-accent-fg"
+                            : "border-border bg-transparent text-muted hover:border-accent/40 hover:text-txt"
+                        } ${
+                          toggleDisabled
+                            ? "cursor-not-allowed opacity-60"
+                            : "cursor-pointer"
+                        }`}
+                        onClick={() =>
+                          void handleTogglePlugin(plugin.id, !plugin.enabled)
+                        }
+                        disabled={toggleDisabled}
+                      >
+                        {isToggleBusy ? "..." : plugin.enabled ? "ON" : "OFF"}
+                      </button>
+                      <span
+                        className={`shrink-0 text-muted transition-transform ${
+                          isExpanded ? "rotate-90" : ""
+                        }`}
+                      >
+                        <ChevronRight className="h-4 w-4" />
+                      </span>
+                    </div>
+                  );
+                })}
+              </nav>
+            </div>
+          </aside>
+        )}
+
+        <div className="min-w-0 flex-1">
+          <div className="sticky top-0 z-20 border-b border-border/50 bg-bg/85 px-4 py-4 shadow-[0_12px_30px_rgba(0,0,0,0.14)] backdrop-blur-xl sm:px-6 lg:px-8">
+            <div className="mx-auto max-w-5xl">
+              <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+                <Input
+                  type="text"
+                  className="h-11 w-full rounded-xl border-border/60 bg-card/70 text-sm shadow-sm"
+                  placeholder="Search connectors..."
+                  value={pluginSearch}
+                  onChange={(e) => setState("pluginSearch", e.target.value)}
+                />
+                <div className="flex shrink-0 gap-1.5 rounded-xl border border-white/5 bg-black/10 p-1">
+                  {(["all", "enabled"] as const).map((status) => (
+                    <Button
+                      key={status}
+                      variant={
+                        effectiveStatusFilter === status ? "default" : "ghost"
+                      }
+                      size="sm"
+                      className={`h-8 px-3 text-[11px] font-bold tracking-wide transition-all ${
+                        effectiveStatusFilter === status
+                          ? "shadow-sm"
+                          : "text-muted hover:bg-white/5 hover:text-txt"
+                      }`}
+                      onClick={() =>
+                        setState("pluginStatusFilter", status as StatusFilter)
+                      }
+                    >
+                      {status === "all"
+                        ? `All (${categoryPlugins.length})`
+                        : `Enabled (${enabledCount})`}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="mx-auto max-w-5xl px-4 py-4 sm:px-6 sm:py-5 lg:px-8 lg:py-6">
+            {hasPluginToggleInFlight && (
+              <div className="mb-4 rounded-2xl border border-accent bg-accent-subtle px-4 py-3 text-[11px] text-txt">
+                {t("pluginsview.ApplyingPluginChan")}
+              </div>
+            )}
+
+            {visiblePlugins.length === 0 ? (
+              <div className="rounded-2xl border border-dashed border-border px-5 py-10 text-center text-muted">
+                {effectiveSearch
+                  ? "No connectors match your search."
+                  : "No connectors match your filters."}
+              </div>
+            ) : (
+              <div
+                data-testid="connectors-settings-content"
+                className="space-y-4"
+              >
+                {visiblePlugins.map((plugin) => {
+                  const hasParams =
+                    (plugin.parameters?.length ?? 0) > 0 &&
+                    plugin.id !== "__ui-showcase__";
+                  const isExpanded = connectorExpandedIds.has(plugin.id);
+                  const isSelected = connectorSelectedId === plugin.id;
+                  const setCount = hasParams
+                    ? plugin.parameters.filter((param) => param.isSet).length
+                    : 0;
+                  const totalCount = hasParams ? plugin.parameters.length : 0;
+                  const allParamsSet = !hasParams || setCount === totalCount;
+                  const isToggleBusy = togglingPlugins.has(plugin.id);
+                  const toggleDisabled =
+                    isToggleBusy || (hasPluginToggleInFlight && !isToggleBusy);
+                  const isSaving = pluginSaving.has(plugin.id);
+                  const saveSuccess = pluginSaveSuccess.has(plugin.id);
+                  const testResult = testResults.get(plugin.id);
+                  const pluginLinks = getPluginResourceLinks(plugin);
+
+                  return (
+                    <section
+                      key={plugin.id}
+                      ref={(element) => {
+                        connectorSectionRefs.current[plugin.id] = element;
+                      }}
+                      data-testid={`connector-section-${plugin.id}`}
+                      className={`overflow-hidden rounded-[1.4rem] border bg-card/90 shadow-sm transition-all ${
+                        isSelected
+                          ? "border-accent/35 shadow-[0_18px_40px_rgba(var(--accent),0.08)]"
+                          : "border-border/50"
+                      }`}
+                    >
+                      <div className="flex items-start gap-3 px-4 py-4 sm:px-5">
+                        <button
+                          type="button"
+                          data-testid={`connector-header-${plugin.id}`}
+                          className="flex min-w-0 flex-1 items-start gap-3 text-left"
+                          onClick={() =>
+                            handleConnectorSectionToggle(plugin.id)
+                          }
+                        >
+                          <span
+                            className={`mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border ${
+                              isSelected
+                                ? "border-accent/30 bg-accent/18 text-txt-strong"
+                                : "border-border/50 bg-bg-accent/80 text-muted"
+                            }`}
+                          >
+                            {renderResolvedIcon(plugin, {
+                              className: "w-4 h-4 rounded-sm object-contain",
+                              emojiClassName: "text-base",
+                            })}
+                          </span>
+                          <span className="min-w-0 flex-1">
+                            <span className="flex min-w-0 flex-wrap items-center gap-2">
+                              <span className="truncate text-sm font-semibold text-txt">
+                                {plugin.name}
+                              </span>
+                              <span
+                                className={`rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] ${
+                                  allParamsSet
+                                    ? "border-ok/30 bg-ok/10 text-ok"
+                                    : "border-warn/30 bg-warn/10 text-warn"
+                                }`}
+                              >
+                                {allParamsSet ? "Ready" : "Needs setup"}
+                              </span>
+                              {plugin.version && (
+                                <span className="text-[11px] font-mono text-muted/80">
+                                  v{plugin.version}
+                                </span>
+                              )}
+                            </span>
+                            <span className="mt-1 block text-sm text-muted">
+                              {plugin.description || "No description available"}
+                            </span>
+                            <span className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-muted">
+                              <span>
+                                {hasParams
+                                  ? `${setCount}/${totalCount} configured`
+                                  : "No configuration needed"}
+                              </span>
+                              {plugin.enabled && !plugin.isActive && (
+                                <span
+                                  className={`rounded-full border px-2 py-0.5 ${
+                                    plugin.loadError
+                                      ? "border-danger/30 bg-danger/10 text-danger"
+                                      : "border-warn/30 bg-warn/10 text-warn"
+                                  }`}
+                                >
+                                  {plugin.loadError
+                                    ? "Load failed"
+                                    : "Not installed"}
+                                </span>
+                              )}
+                            </span>
+                          </span>
+                        </button>
+
+                        <div className="flex shrink-0 items-center gap-2">
+                          <button
+                            type="button"
+                            className={`rounded-full border px-3 py-1.5 text-[10px] font-bold tracking-[0.16em] transition-colors ${
+                              plugin.enabled
+                                ? "border-accent bg-accent text-accent-fg"
+                                : "border-border bg-transparent text-muted hover:border-accent/40 hover:text-txt"
+                            } ${
+                              toggleDisabled
+                                ? "cursor-not-allowed opacity-60"
+                                : "cursor-pointer"
+                            }`}
+                            onClick={() =>
+                              void handleTogglePlugin(
+                                plugin.id,
+                                !plugin.enabled,
+                              )
+                            }
+                            disabled={toggleDisabled}
+                          >
+                            {isToggleBusy
+                              ? "..."
+                              : plugin.enabled
+                                ? "ON"
+                                : "OFF"}
+                          </button>
+                          <button
+                            type="button"
+                            className={`flex items-center gap-1 rounded-full border px-3 py-1.5 text-[11px] font-semibold transition-colors ${
+                              isExpanded
+                                ? "border-accent/40 bg-accent/10 text-txt"
+                                : "border-border/50 text-muted hover:border-accent/40 hover:text-txt"
+                            }`}
+                            onClick={() =>
+                              handleConnectorSectionToggle(plugin.id)
+                            }
+                            aria-expanded={isExpanded}
+                            aria-label={`${isExpanded ? "Collapse" : "Expand"} ${plugin.name}`}
+                          >
+                            <span>{isExpanded ? "Collapse" : "Expand"}</span>
+                            <ChevronRight
+                              className={`h-4 w-4 transition-transform ${
+                                isExpanded ? "rotate-90" : ""
+                              }`}
+                            />
+                          </button>
+                        </div>
+                      </div>
+
+                      {isExpanded && (
+                        <div className="border-t border-border/40 bg-black/5 px-4 py-4 sm:px-5">
+                          {plugin.validationErrors &&
+                            plugin.validationErrors.length > 0 && (
+                              <div className="mb-4 rounded-2xl border border-danger/30 bg-danger/10 px-4 py-3 text-sm text-danger">
+                                {plugin.validationErrors.map((error) => (
+                                  <div
+                                    key={`${plugin.id}:${error.field}:${error.message}`}
+                                  >
+                                    {error.field}: {error.message}
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+
+                          {plugin.validationWarnings &&
+                            plugin.validationWarnings.length > 0 && (
+                              <div className="mb-4 rounded-2xl border border-warn/30 bg-warn/10 px-4 py-3 text-sm text-warn">
+                                {plugin.validationWarnings.map((warning) => (
+                                  <div
+                                    key={`${plugin.id}:${warning.field}:${warning.message}`}
+                                  >
+                                    {warning.message}
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+
+                          {pluginLinks.length > 0 && (
+                            <div className="mb-4 flex flex-wrap gap-2">
+                              {pluginLinks.map((link) => (
+                                <Button
+                                  key={`${plugin.id}:${link.key}`}
+                                  variant="outline"
+                                  size="sm"
+                                  className="h-8 rounded-xl border-border/40 bg-card/40 px-3 text-[11px] font-semibold text-muted transition-all hover:border-accent hover:bg-accent/5 hover:text-txt"
+                                  onClick={() => {
+                                    void handleOpenPluginExternalUrl(link.url);
+                                  }}
+                                  title={`${link.label}: ${link.url}`}
+                                >
+                                  {link.label}
+                                </Button>
+                              ))}
+                            </div>
+                          )}
+
+                          {plugin.enabled &&
+                            !plugin.isActive &&
+                            plugin.npmName &&
+                            !plugin.loadError && (
+                              <div className="mb-4 rounded-2xl border border-warn/30 bg-warn/10 px-4 py-3 text-sm text-txt">
+                                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                                  <div>
+                                    Install this connector to activate it in the
+                                    runtime.
+                                  </div>
+                                  <Button
+                                    variant="default"
+                                    size="sm"
+                                    className="h-8 rounded-xl px-4 text-[11px] font-bold"
+                                    disabled={installingPlugins.has(plugin.id)}
+                                    onClick={() =>
+                                      handleInstallPlugin(
+                                        plugin.id,
+                                        plugin.npmName ?? "",
+                                      )
+                                    }
+                                  >
+                                    {installingPlugins.has(plugin.id)
+                                      ? installProgress.get(
+                                          plugin.npmName ?? "",
+                                        )?.message || "Installing..."
+                                      : "Install Plugin"}
+                                  </Button>
+                                </div>
+                              </div>
+                            )}
+
+                          {hasParams ? (
+                            <div className="space-y-4">
+                              <PluginConfigForm
+                                plugin={plugin}
+                                pluginConfigs={pluginConfigs}
+                                onParamChange={handleParamChange}
+                              />
+                              {plugin.id === "whatsapp" && (
+                                <WhatsAppQrOverlay accountId="default" />
+                              )}
+                            </div>
+                          ) : (
+                            <div className="rounded-2xl border border-border/40 bg-card/40 px-4 py-3 text-sm text-muted">
+                              No configuration needed.
+                            </div>
+                          )}
+
+                          <div className="mt-4 flex flex-wrap items-center gap-2">
+                            {plugin.isActive && (
+                              <Button
+                                variant={
+                                  testResult?.success
+                                    ? "default"
+                                    : testResult?.error
+                                      ? "destructive"
+                                      : "outline"
+                                }
+                                size="sm"
+                                className={`h-8 rounded-xl px-4 text-[11px] font-bold transition-all ${
+                                  testResult?.loading
+                                    ? "cursor-wait opacity-70"
+                                    : testResult?.success
+                                      ? "border-ok bg-ok text-ok-fg hover:bg-ok/90"
+                                      : testResult?.error
+                                        ? "border-danger bg-danger text-danger-fg hover:bg-danger/90"
+                                        : "border-border/40 bg-card/40 hover:border-accent/40"
+                                }`}
+                                disabled={testResult?.loading}
+                                onClick={() =>
+                                  void handleTestConnection(plugin.id)
+                                }
+                              >
+                                {testResult?.loading
+                                  ? "Testing..."
+                                  : testResult?.success
+                                    ? `OK (${testResult.durationMs}ms)`
+                                    : testResult?.error
+                                      ? `Failed: ${testResult.error}`
+                                      : "Test Connection"}
+                              </Button>
+                            )}
+                            {hasParams && (
+                              <>
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  className="h-8 rounded-xl px-4 text-[11px] font-semibold text-muted hover:text-txt"
+                                  onClick={() => handleConfigReset(plugin.id)}
+                                >
+                                  Reset
+                                </Button>
+                                <Button
+                                  variant={
+                                    saveSuccess ? "default" : "secondary"
+                                  }
+                                  size="sm"
+                                  className={`h-8 rounded-xl px-4 text-[11px] font-bold transition-all ${
+                                    saveSuccess
+                                      ? "bg-ok text-ok-fg hover:bg-ok/90"
+                                      : "bg-accent text-accent-fg hover:bg-accent/90"
+                                  }`}
+                                  onClick={() =>
+                                    void handleConfigSave(plugin.id)
+                                  }
+                                  disabled={isSaving}
+                                >
+                                  {isSaving
+                                    ? "Saving..."
+                                    : saveSuccess
+                                      ? "Saved"
+                                      : "Save Settings"}
+                                </Button>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </section>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (inModal) {
+    const sectionTitle =
+      mode === "social"
+        ? "Connectors"
+        : mode === "connectors"
+          ? "Connectors"
+          : label;
+    return (
+      <div className="plugins-game-modal plugins-game-modal--inline">
+        <div
+          className={`plugins-game-list-panel${
+            gameNarrow && gameMobileDetail ? " is-hidden" : ""
+          }`}
+        >
+          <div className="plugins-game-list-head">
+            <div className="plugins-game-section-title">{sectionTitle}</div>
+          </div>
+          <div className="plugins-game-list-scroll">
+            {gameVisiblePlugins.length === 0 ? (
+              <div className="plugins-game-list-empty">
+                No {resultLabel} {t("pluginsview.found")}
+              </div>
+            ) : (
+              gameVisiblePlugins.map((p: PluginInfo) => (
+                <button
+                  key={p.id}
+                  type="button"
+                  className={`plugins-game-card${
+                    effectiveGameSelected === p.id ? " is-selected" : ""
+                  }${!p.enabled ? " is-disabled" : ""}`}
+                  onClick={() => {
+                    setGameSelectedId(p.id);
+                    if (gameNarrow) setGameMobileDetail(true);
+                  }}
+                >
+                  <div className="plugins-game-card-icon-shell">
+                    <span className="plugins-game-card-icon">
+                      {(() => {
+                        const icon = resolveIcon(p);
+                        if (!icon) return "🧩";
+                        if (typeof icon === "string") {
+                          const imageSrc = iconImageSource(icon);
+                          return imageSrc ? (
+                            <img
+                              src={imageSrc}
+                              alt=""
+                              className="plugins-game-card-icon"
+                              style={{ objectFit: "contain" }}
+                            />
+                          ) : (
+                            icon
+                          );
+                        }
+                        const IconComponent = icon;
+                        return <IconComponent className="w-5 h-5" />;
+                      })()}
+                    </span>
+                  </div>
+                  <div className="plugins-game-card-body">
+                    <div className="plugins-game-card-name">{p.name}</div>
+                    <div className="plugins-game-card-meta">
+                      <span
+                        className={`plugins-game-badge ${
+                          p.enabled ? "is-on" : "is-off"
+                        }`}
+                      >
+                        {p.enabled ? "ON" : "OFF"}
+                      </span>
+                    </div>
+                  </div>
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+        <div
+          className={`plugins-game-detail-panel${
+            gameNarrow && !gameMobileDetail ? " is-hidden" : ""
+          }`}
+        >
+          {selectedPlugin ? (
+            <>
+              <div className="plugins-game-detail-head">
+                {gameNarrow && (
+                  <button
+                    type="button"
+                    className="plugins-game-back-btn"
+                    onClick={() => setGameMobileDetail(false)}
+                  >
+                    {t("pluginsview.Back")}
+                  </button>
+                )}
+                <div className="plugins-game-detail-title-row">
+                  <div className="plugins-game-detail-icon-shell">
+                    <span className="plugins-game-detail-icon">
+                      {(() => {
+                        const icon = resolveIcon(selectedPlugin);
+                        if (!icon) return "🧩";
+                        if (typeof icon === "string") {
+                          const imageSrc = iconImageSource(icon);
+                          return imageSrc ? (
+                            <img
+                              src={imageSrc}
+                              alt=""
+                              className="plugins-game-detail-icon"
+                            />
+                          ) : (
+                            icon
+                          );
+                        }
+                        const IconComponent = icon;
+                        return <IconComponent className="w-6 h-6" />;
+                      })()}
+                    </span>
+                  </div>
+                  <div className="plugins-game-detail-main">
+                    <div className="plugins-game-detail-name">
+                      {selectedPlugin.name}
+                    </div>
+                    {selectedPlugin.version && (
+                      <span className="plugins-game-version">
+                        v{selectedPlugin.version}
+                      </span>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    className={`plugins-game-toggle ${
+                      selectedPlugin.enabled ? "is-on" : "is-off"
+                    }`}
+                    onClick={() =>
+                      void handleTogglePlugin(
+                        selectedPlugin.id,
+                        !selectedPlugin.enabled,
+                      )
+                    }
+                    disabled={togglingPlugins.has(selectedPlugin.id)}
+                  >
+                    {selectedPlugin.enabled ? "ON" : "OFF"}
+                  </button>
+                </div>
+              </div>
+              <div className="plugins-game-detail-description">
+                {selectedPlugin.description}
+              </div>
+              {(selectedPlugin.tags?.length ?? 0) > 0 && (
+                <div className="flex flex-wrap gap-1.5 px-3 pb-3">
+                  {selectedPlugin.tags?.map((tag) => (
+                    <span
+                      key={`${selectedPlugin.id}:${tag}`}
+                      className="text-[10px] px-1.5 py-px border border-border bg-black/10 text-muted lowercase tracking-wide whitespace-nowrap"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              )}
+              {selectedPluginLinks.length > 0 && (
+                <div className="plugins-game-detail-links flex flex-wrap gap-2 px-3 pb-3">
+                  {selectedPluginLinks.map((link) => (
+                    <button
+                      key={`${selectedPlugin.id}:${link.key}`}
+                      type="button"
+                      className="plugins-game-link-btn border border-border bg-transparent px-2.5 py-1 text-[11px] text-muted transition-colors hover:border-accent hover:text-txt"
+                      onClick={() => {
+                        void handleOpenPluginExternalUrl(link.url);
+                      }}
+                    >
+                      {link.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+              {selectedPlugin.parameters &&
+                selectedPlugin.parameters.length > 0 && (
+                  <div className="plugins-game-detail-config">
+                    {selectedPlugin.parameters.map((param: PluginParamDef) => (
+                      <div key={param.key} id={`field-${param.key}`}>
+                        <label
+                          htmlFor={`input-${param.key}`}
+                          className="text-[11px] tracking-wider text-muted block mb-1"
+                        >
+                          {param.key}
+                        </label>
+                        <input
+                          id={`input-${param.key}`}
+                          type={param.sensitive ? "password" : "text"}
+                          className="w-full px-2 py-1 text-[12px]"
+                          placeholder={param.description}
+                          value={
+                            pluginConfigs[selectedPlugin.id]?.[param.key] ??
+                            param.currentValue ??
+                            ""
+                          }
+                          onChange={(e) =>
+                            handleParamChange(
+                              selectedPlugin.id,
+                              param.key,
+                              e.target.value,
+                            )
+                          }
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )}
+              <div className="plugins-game-detail-actions">
+                <button
+                  type="button"
+                  className="plugins-game-action-btn"
+                  onClick={() => void handleTestConnection(selectedPlugin.id)}
+                >
+                  {t("pluginsview.TestConnection")}
+                </button>
+                <button
+                  type="button"
+                  className={`plugins-game-action-btn plugins-game-save-btn${
+                    pluginSaveSuccess.has(selectedPlugin.id) ? " is-saved" : ""
+                  }`}
+                  onClick={() => void handleConfigSave(selectedPlugin.id)}
+                  disabled={pluginSaving.has(selectedPlugin.id)}
+                >
+                  {pluginSaving.has(selectedPlugin.id)
+                    ? "Saving..."
+                    : pluginSaveSuccess.has(selectedPlugin.id)
+                      ? "Saved!"
+                      : "Save"}
+                </button>
+              </div>
+            </>
+          ) : (
+            <div className="plugins-game-detail-empty">
+              <span className="plugins-game-detail-empty-icon">🧩</span>
+              <span className="plugins-game-detail-empty-text">
+                {t("pluginsview.SelectA")}{" "}
+                {isConnectorLikeMode ? "connector" : "plugin"}{" "}
+                {t("pluginsview.toC")}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // ── Main render ────────────────────────────────────────────────────
+
+  return (
+    <div
+      data-testid={mode === "social" ? "plugins-view-social" : undefined}
+      className={`relative min-h-0 ${showDesktopSubgroupSidebar ? "md:pl-[18rem]" : ""}`}
+    >
+      {showDesktopSubgroupSidebar && (
+        <aside
+          className="hidden md:absolute md:left-0 md:top-0 md:block md:w-64"
+          data-testid="plugins-subgroup-sidebar"
+        >
+          <div className="sticky top-0 rounded-[28px] border border-border/50 bg-bg/35 p-5 backdrop-blur-xl shadow-sm">
+            <div className="mb-4 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted/80">
+              Plugin Types
+            </div>
+            <nav className="flex flex-col gap-2">
+              {subgroupTags.map((tag) =>
+                renderSubgroupFilterButton(tag, { sidebar: true }),
+              )}
+            </nav>
+          </div>
+        </aside>
+      )}
+
+      <div className="min-w-0">
+        {showToolbar && (
+          <div className="flex items-center gap-3 mb-4 flex-wrap">
+            <div className="relative flex-1 min-w-[220px]">
+              <Input
+                type="text"
+                className="w-full bg-card/60 backdrop-blur-md shadow-inner pr-8 h-9 rounded-xl focus-visible:ring-accent border-border/40"
+                placeholder={searchPlaceholder}
+                value={pluginSearch}
+                onChange={(e) => setState("pluginSearch", e.target.value)}
+              />
+              {pluginSearch && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="absolute right-1 top-1/2 -translate-y-1/2 w-6 h-6 text-muted hover:text-txt rounded-full"
+                  onClick={() => setState("pluginSearch", "")}
+                  title={t("pluginsview.ClearSearch")}
+                >
+                  ✕
+                </Button>
+              )}
+            </div>
+
+            <div className="flex gap-1.5 shrink-0 bg-black/10 p-1 rounded-xl border border-white/5">
+              {(["all", "enabled"] as const).map((s) => (
+                <Button
+                  key={s}
+                  variant={pluginStatusFilter === s ? "default" : "ghost"}
+                  size="sm"
+                  className={`h-7 px-3 text-[11px] font-bold tracking-wide rounded-lg transition-all ${
+                    pluginStatusFilter === s
+                      ? "shadow-sm"
+                      : "text-muted hover:text-txt hover:bg-white/5"
+                  }`}
+                  onClick={() =>
+                    setState("pluginStatusFilter", s as StatusFilter)
+                  }
+                >
+                  {s === "all"
+                    ? `All (${categoryPlugins.length})`
+                    : `Enabled (${enabledCount})`}
+                </Button>
+              ))}
+            </div>
+
+            {allowCustomOrder && pluginOrder.length > 0 && (
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-8 px-3 text-[11px] font-bold border-border/40 bg-card/40 backdrop-blur-md shadow-sm rounded-xl shrink-0"
+                onClick={handleResetOrder}
+                title={t("pluginsview.ResetToDefaultSor")}
+              >
+                {t("pluginsview.ResetOrder")}
+              </Button>
+            )}
+
+            {showPluginManagementActions && (
+              <Button
+                variant="secondary"
+                size="sm"
+                className="h-8 px-4 text-[11px] font-bold tracking-wide border border-accent/30 text-txt bg-accent/10 hover:bg-accent/20 hover:border-accent/50 shadow-sm rounded-xl shrink-0 transition-all"
+                onClick={() => setAddDirOpen(true)}
+              >
+                {t("pluginsview.AddPlugin")}
+              </Button>
+            )}
+          </div>
+        )}
+
+        {hasPluginToggleInFlight && (
+          <div className="mb-3 px-3 py-2 border border-accent bg-accent-subtle text-[11px] text-txt">
+            {t("pluginsview.ApplyingPluginChan")}
+          </div>
+        )}
+
+        {showSubgroupFilters && (
+          <div
+            className="flex items-center gap-2 mb-5 flex-wrap md:hidden"
+            data-testid="plugins-subgroup-chips"
+          >
+            {subgroupTags.map((tag) => renderSubgroupFilterButton(tag))}
+          </div>
+        )}
+
+        {/* Plugin grid */}
+        <div className="overflow-y-auto">
+          {sorted.length === 0 ? (
+            <div className="text-center py-10 px-5 text-muted border border-dashed border-border">
+              {effectiveSearch
+                ? `No ${resultLabel} match your search.`
+                : `No ${resultLabel} available.`}
+            </div>
+          ) : visiblePlugins.length === 0 ? (
+            <div className="text-center py-10 px-5 text-muted border border-dashed border-border">
+              {showSubgroupFilters
+                ? "No plugins match this tag filter."
+                : `No ${resultLabel} match your filters.`}
+            </div>
+          ) : (
+            renderPluginGrid(visiblePlugins)
+          )}
+        </div>
+      </div>
+
+      {/* Settings dialog */}
+      {settingsDialogPlugin &&
+        (() => {
+          const p = settingsDialogPlugin;
+          const isShowcase = p.id === "__ui-showcase__";
+          const isSaving = pluginSaving.has(p.id);
+          const saveSuccess = pluginSaveSuccess.has(p.id);
+          const categoryLabel = isShowcase
+            ? "showcase"
+            : p.category === "ai-provider"
+              ? "ai provider"
+              : p.category;
+          return (
+            <div
+              className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-6 animate-in fade-in duration-200"
+              onClick={(e) => {
+                if (e.target === e.currentTarget) toggleSettings(p.id);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleSettings(p.id);
+                }
+              }}
+              role="dialog"
+              aria-modal="true"
+            >
+              <div className="w-full max-w-2xl max-h-[85vh] border border-border/50 bg-card/90 shadow-2xl flex flex-col overflow-hidden rounded-2xl backdrop-blur-xl">
+                {/* Dialog header */}
+                <div className="flex items-center gap-3 px-5 py-4 border-b border-border/30 bg-black/10 shrink-0">
+                  <span className="font-bold text-base flex items-center gap-2 flex-1 min-w-0 tracking-wide text-txt">
+                    {(() => {
+                      const icon = resolveIcon(p);
+                      if (!icon) return null;
+                      if (typeof icon === "string") {
+                        const imageSrc = iconImageSource(icon);
+                        return imageSrc ? (
+                          <img
+                            src={imageSrc}
+                            alt=""
+                            className="w-6 h-6 rounded-md object-contain"
+                            onError={(e) => {
+                              (
+                                e.currentTarget as HTMLImageElement
+                              ).style.display = "none";
+                            }}
+                          />
+                        ) : (
+                          <span className="text-base">{icon}</span>
+                        );
+                      }
+                      const IconComponent = icon;
+                      return <IconComponent className="w-6 h-6 text-txt" />;
+                    })()}
+                    {p.name}
+                  </span>
+                  <span className="text-[10px] px-2 py-0.5 rounded-full border border-border/40 bg-black/20 text-muted lowercase tracking-widest font-bold">
+                    {categoryLabel}
+                  </span>
+                  {p.version && (
+                    <span className="text-[10px] font-mono text-muted/70">
+                      v{p.version}
+                    </span>
+                  )}
+                  {isShowcase && (
+                    <span className="text-[10px] font-bold tracking-widest px-2.5 py-[2px] border border-accent/30 text-txt bg-accent/10 rounded-full">
+                      {t("pluginsview.DEMO")}
+                    </span>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted hover:bg-white/10 hover:text-txt rounded-full transition-all shrink-0 ml-2"
+                    onClick={() => toggleSettings(p.id)}
+                  >
+                    ✕
+                  </Button>
+                </div>
+
+                {/* Dialog body — scrollable */}
+                <div className="overflow-y-auto flex-1 scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+                  {/* Plugin details */}
+                  <div className="px-5 pt-4 pb-1 flex items-center gap-3 flex-wrap text-xs text-muted">
+                    {p.description && (
+                      <span className="text-[12px] text-muted leading-relaxed">
+                        {p.description}
+                      </span>
+                    )}
+                    {(p.tags?.length ?? 0) > 0 && (
+                      <span className="flex items-center gap-1.5 flex-wrap">
+                        {p.tags?.map((tag) => (
+                          <span
+                            key={`${p.id}:${tag}:settings`}
+                            className="text-[10px] px-1.5 py-px border border-border/40 bg-black/10 text-muted lowercase tracking-wide whitespace-nowrap"
+                          >
+                            {tag}
+                          </span>
+                        ))}
+                      </span>
+                    )}
+                  </div>
+                  {(p.npmName || (p.pluginDeps && p.pluginDeps.length > 0)) && (
+                    <div className="px-5 pb-2 flex items-center gap-3 flex-wrap">
+                      {p.npmName && (
+                        <span className="font-mono text-[10px] text-muted opacity-50">
+                          {p.npmName}
+                        </span>
+                      )}
+                      {p.pluginDeps && p.pluginDeps.length > 0 && (
+                        <span className="flex items-center gap-1 flex-wrap">
+                          <span className="text-[10px] text-muted opacity-60">
+                            {t("pluginsview.dependsOn")}
+                          </span>
+                          {p.pluginDeps.map((dep: string) => (
+                            <span
+                              key={dep}
+                              className="text-[10px] px-1.5 py-px border border-border bg-accent-subtle text-muted rounded-sm"
+                            >
+                              {dep}
+                            </span>
+                          ))}
+                        </span>
+                      )}
+                    </div>
+                  )}
+
+                  <div className="px-5 py-3">
+                    <PluginConfigForm
+                      plugin={p}
+                      pluginConfigs={pluginConfigs}
+                      onParamChange={handleParamChange}
+                    />
+                    {p.id === "whatsapp" && (
+                      <WhatsAppQrOverlay accountId="default" />
+                    )}
+                  </div>
+                </div>
+
+                {/* Dialog footer — actions (hidden for showcase) */}
+                {!isShowcase && (
+                  <div className="flex justify-end gap-3 px-5 py-4 border-t border-border/30 shrink-0 bg-black/10">
+                    {p.enabled && !p.isActive && p.npmName && !p.loadError && (
+                      <Button
+                        variant="default"
+                        size="sm"
+                        className="h-8 px-4 text-[11px] font-bold tracking-wide shadow-sm"
+                        disabled={installingPlugins.has(p.id)}
+                        onClick={() =>
+                          handleInstallPlugin(p.id, p.npmName ?? "")
+                        }
+                      >
+                        {installingPlugins.has(p.id)
+                          ? installProgress.get(p.npmName ?? "")?.message ||
+                            "Installing..."
+                          : "Install Plugin"}
+                      </Button>
+                    )}
+                    {p.loadError && (
+                      <span
+                        className="px-3 py-1.5 text-[11px] text-danger font-bold tracking-wide"
+                        title={p.loadError}
+                      >
+                        {t("pluginsview.PackageBrokenMis")}
+                      </span>
+                    )}
+                    {p.isActive && (
+                      <Button
+                        variant={
+                          testResults.get(p.id)?.success
+                            ? "default"
+                            : testResults.get(p.id)?.error
+                              ? "destructive"
+                              : "outline"
+                        }
+                        size="sm"
+                        className={`h-8 px-4 text-[11px] font-bold tracking-wide transition-all ${
+                          testResults.get(p.id)?.loading
+                            ? "opacity-70 cursor-wait"
+                            : testResults.get(p.id)?.success
+                              ? "bg-ok text-ok-fg border-ok hover:bg-ok/90"
+                              : testResults.get(p.id)?.error
+                                ? "bg-danger text-danger-fg border-danger hover:bg-danger/90"
+                                : "border-border/40 bg-card/40 backdrop-blur-md shadow-sm hover:border-accent/40"
+                        }`}
+                        disabled={testResults.get(p.id)?.loading}
+                        onClick={() => handleTestConnection(p.id)}
+                      >
+                        {testResults.get(p.id)?.loading
+                          ? "Testing..."
+                          : testResults.get(p.id)?.success
+                            ? `\u2713 OK (${testResults.get(p.id)?.durationMs}ms)`
+                            : testResults.get(p.id)?.error
+                              ? `\u2715 ${testResults.get(p.id)?.error}`
+                              : "Test Connection"}
+                      </Button>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 px-4 text-[12px] font-bold text-muted hover:text-txt transition-all"
+                      onClick={() => handleConfigReset(p.id)}
+                    >
+                      {t("pluginsview.Reset")}
+                    </Button>
+                    <Button
+                      variant={saveSuccess ? "default" : "secondary"}
+                      size="sm"
+                      className={`h-8 px-5 text-[12px] font-bold tracking-wide transition-all ${
+                        saveSuccess
+                          ? "bg-ok text-ok-fg hover:bg-ok/90"
+                          : "bg-accent text-accent-fg hover:bg-accent/90 shadow-lg shadow-accent/20"
+                      }`}
+                      onClick={() => handleConfigSave(p.id)}
+                      disabled={isSaving}
+                    >
+                      {isSaving
+                        ? "Saving..."
+                        : saveSuccess
+                          ? "\u2713 Saved"
+                          : "Save Settings"}
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })()}
+
+      {/* Add from directory modal */}
+      {addDirOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-6 duration-200 animate-in fade-in"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              setAddDirOpen(false);
+              setAddDirPath("");
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setAddDirOpen(false);
+              setAddDirPath("");
+            }
+          }}
+          role="dialog"
+          aria-modal="true"
+        >
+          <div className="w-full max-w-md border border-border/50 bg-card/90 backdrop-blur-xl p-6 rounded-2xl shadow-2xl">
+            <div className="flex items-center justify-between mb-5">
+              <div className="font-bold text-base tracking-wide text-txt">
+                {t("pluginsview.AddPlugin1")}
+              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-muted hover:bg-white/10 hover:text-txt rounded-full transition-all shrink-0 ml-2"
+                onClick={() => {
+                  setAddDirOpen(false);
+                  setAddDirPath("");
+                }}
+              >
+                ✕
+              </Button>
+            </div>
+
+            <p className="text-sm font-medium tracking-wide text-muted mb-4">
+              {t("pluginsview.EnterThePathToA")}
+            </p>
+
+            <Input
+              type="text"
+              className="w-full h-10 px-3 border border-border/40 bg-black/20 text-txt text-[13px] font-mono transition-all duration-150 focus-visible:ring-accent rounded-xl shadow-inner placeholder:text-muted/50"
+              placeholder={t("pluginsview.PathToPluginOrP")}
+              value={addDirPath}
+              onChange={(e) => setAddDirPath(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") void handleAddFromDirectory();
+              }}
+            />
+
+            <div className="flex justify-end gap-3 mt-6">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 px-4 text-[12px] font-bold text-muted hover:text-txt transition-all"
+                onClick={() => {
+                  setAddDirOpen(false);
+                  setAddDirPath("");
+                }}
+              >
+                {t("pluginsview.Cancel")}
+              </Button>
+              <Button
+                variant="default"
+                size="sm"
+                className="h-8 px-6 text-[12px] font-bold tracking-wide shadow-sm"
+                onClick={handleAddFromDirectory}
+                disabled={addDirLoading || !addDirPath.trim()}
+              >
+                {addDirLoading ? "Adding..." : "Add"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Exported views ────────────────────────────────────────────────── */
+
+/** Unified plugins view — tag-filtered plugin list. */
+export function PluginsView({
+  mode = "all",
+  inModal,
+}: {
+  mode?: PluginsViewMode;
+  inModal?: boolean;
+}) {
+  const label =
+    mode === "social"
+      ? "Connectors"
+      : mode === "connectors"
+        ? "Connectors"
+        : mode === "streaming"
+          ? "Streaming"
+          : "Plugins";
+  return <PluginListView label={label} mode={mode} inModal={inModal} />;
+}