"use client"; import { useCallback, useMemo, useRef, useState } from "react";import { Schema } from "effect";import {  PluginRuntimeResponseSchema,  type PluginRuntimeView,} from "@local-studio/agent-runtime/plugin-runtime-contract";import { ApiErrorResponseSchema } from "@local-studio/agent-runtime/api-contract";import { Alert, Button, SearchInput, StatusPill, UiModal, UiModalHeader } from "@/ui";import { Eye, X } from "@/ui/icon-registry";import { useMountSubscription } from "@/hooks/use-mount-subscription";import {  SettingsButton,  SettingsGroup,  SettingsRow,  SettingsValue,  type StatusTone,} from "@/features/settings/settings-ui";import { GoogleAccountModal } from "./google-account-modal";import { ChatterboxVoiceModal } from "./chatterbox-voice-modal";import { speechStatusLabel, speechStatusTone } from "./chatterbox-voice-model";import { useSpeechStore, type SpeechSnapshot } from "./chatterbox-voice-store"; type PluginStatus = { label: string; tone: StatusTone }; function responseError(body: unknown, fallback: string): string {  try {    return Schema.decodeUnknownSync(ApiErrorResponseSchema)(body).error;  } catch {    return fallback;  }} async function pluginResponse(response: Response, fallback: string) {  const body: unknown = await response.json().catch(() => null);  if (!response.ok) throw new Error(responseError(body, fallback));  return Schema.decodeUnknownSync(PluginRuntimeResponseSchema)(body);} function capabilitySummary(plugin: PluginRuntimeView): string {  if (plugin.hostCapability?.capability === "speech") {    return `local speech · voice cloning · v${plugin.version}`;  }  return [    plugin.provides.skills ? "skills" : null,    plugin.provides.mcpServers || plugin.account      ? `${plugin.tools.serverCount} ${plugin.account ? "remote " : ""}MCP ${plugin.tools.serverCount === 1 ? "server" : "servers"}`      : null,    plugin.provides.apps ? "account app" : null,    `v${plugin.version}`,  ]    .filter((value): value is string => Boolean(value))    .join(" · ");} function pluginStatus(plugin: PluginRuntimeView, speech: SpeechSnapshot): PluginStatus {  if (plugin.hostCapability?.capability === "speech") {    if (!speech.available && !speech.loading) return { label: "Unavailable", tone: "danger" };    if (speech.status) {      return {        label: speechStatusLabel(speech.status),        tone: speechStatusTone(speech.status),      };    }    if (speech.loading) return { label: "Checking", tone: "default" };    return { label: speech.error ? "Unavailable" : "Configure", tone: "warning" };  }  if (plugin.account && !plugin.account.configured) return { label: "Setup", tone: "warning" };  if (plugin.account && !plugin.account.connected) return { label: "Sign in", tone: "warning" };  if (plugin.tools.state === "enabled") {    return {      label: `Observe · ${plugin.tools.allowedToolCount} ${plugin.tools.allowedToolCount === 1 ? "tool" : "tools"}`,      tone: "good",    };  }  if (plugin.tools.state === "available") return { label: "Available", tone: "info" };  if (plugin.tools.state === "disabled") return { label: "Off", tone: "default" };  if (plugin.tools.state === "invalid") return { label: "Invalid manifest", tone: "danger" };  if (plugin.tools.state === "configuration_required" || plugin.provides.apps) {    return { label: "Adapter needed", tone: "warning" };  }  return { label: "Skills", tone: "default" };} function activationAction(plugin: PluginRuntimeView): "account" | "connect" | "disconnect" | null {  if (plugin.hostCapability) return null;  if (plugin.account && !plugin.account.connected) return "account";  if (plugin.account) {    return plugin.tools.state === "available" || plugin.tools.state === "disabled"      ? "connect"      : null;  }  if (plugin.tools.state === "enabled") return "disconnect";  if (plugin.tools.state === "available" || plugin.tools.state === "disabled") return "connect";  return null;} function PluginRowsSkeleton() {  return (    <>      {[0, 1, 2].map((index) => (        <div key={index} className="grid animate-pulse gap-3 px-4 py-3 md:grid-cols-2">          <div className="space-y-2">            <div className="h-3 w-32 rounded bg-(--ui-hover)" />            <div className="h-2.5 w-56 max-w-full rounded bg-(--ui-hover)/70" />          </div>          <div className="flex items-center justify-end gap-3">            <div className="h-2.5 w-36 rounded bg-(--ui-hover)/70" />            <div className="h-5 w-20 rounded-full bg-(--ui-hover)" />          </div>        </div>      ))}    </>  );} type PluginRowAction = ReturnType<typeof activationAction>; function pluginActionLabel(plugin: PluginRuntimeView, action: PluginRowAction): string {  if (action === "account") return plugin.account?.configured ? "Sign in" : "Set up";  if (action === "connect") return "Connect";  return "Disconnect";} function PluginRowActions({  plugin,  action,  busy,  hostActionLabel,  onConnect,  onDisconnect,  onAccount,  onHostCapability,}: {  plugin: PluginRuntimeView;  action: PluginRowAction;  busy: boolean;  hostActionLabel: string;  onConnect: () => void;  onDisconnect: () => void;  onAccount: () => void;  onHostCapability: () => void;}) {  const actionLabel = action ? pluginActionLabel(plugin, action) : "";  const handleAction =    action === "account" ? onAccount : action === "connect" ? onConnect : onDisconnect;  return (    <>      {plugin.hostCapability ? (        <SettingsButton          onClick={onHostCapability}          disabled={busy}          aria-label={`${hostActionLabel} ${plugin.displayName}`}        >          {hostActionLabel}        </SettingsButton>      ) : null}      {plugin.account?.connected ? (        <SettingsButton          onClick={onAccount}          disabled={busy}          aria-label={`Manage ${plugin.displayName}`}        >          Manage        </SettingsButton>      ) : null}      {action ? (        <SettingsButton          onClick={handleAction}          disabled={busy}          aria-label={`${actionLabel} ${plugin.displayName}`}        >          {busy ? "Working" : actionLabel}        </SettingsButton>      ) : null}    </>  );} function PluginRow({  plugin,  speech,  busy,  onConnect,  onDisconnect,  onAccount,  onHostCapability,}: {  plugin: PluginRuntimeView;  speech: SpeechSnapshot;  busy: boolean;  onConnect: () => void;  onDisconnect: () => void;  onAccount: () => void;  onHostCapability: () => void;}) {  const status = pluginStatus(plugin, speech);  const action = activationAction(plugin);  const hostActionLabel = speech.status?.install.phase === "ready" ? "Manage" : "Configure";  return (    <SettingsRow      label={plugin.displayName}      description={plugin.description || plugin.category}      value={<SettingsValue dim>{capabilitySummary(plugin)}</SettingsValue>}      status={<StatusPill tone={status.tone}>{status.label}</StatusPill>}      actions={        action || plugin.account?.connected || plugin.hostCapability ? (          <PluginRowActions            plugin={plugin}            action={action}            busy={busy}            hostActionLabel={hostActionLabel}            onConnect={onConnect}            onDisconnect={onDisconnect}            onAccount={onAccount}            onHostCapability={onHostCapability}          />        ) : undefined      }    >      {plugin.tools.reason ? (        <div className="text-[length:var(--fs-sm)] text-(--ui-muted)">{plugin.tools.reason}</div>      ) : null}      {plugin.account?.email ? (        <div className="text-[length:var(--fs-sm)] text-(--ui-muted)">{plugin.account.email}</div>      ) : null}    </SettingsRow>  );} export function PluginsSection() {  const speech = useSpeechStore();  const [plugins, setPlugins] = useState<readonly PluginRuntimeView[]>([]);  const [loaded, setLoaded] = useState(false);  const [error, setError] = useState("");  const [query, setQuery] = useState("");  const [busyId, setBusyId] = useState<string | null>(null);  const [pending, setPending] = useState<PluginRuntimeView | null>(null);  const [accountPlugin, setAccountPlugin] = useState<PluginRuntimeView | null>(null);  const [speechPlugin, setSpeechPlugin] = useState<PluginRuntimeView | null>(null);  const requestGeneration = useRef(0);   const loadPlugins = useCallback(() => {    const generation = ++requestGeneration.current;    return fetch("/api/agent/plugins", { cache: "no-store" })      .then(async (response) => {        const payload = await pluginResponse(response, "Plugin discovery failed");        if (generation !== requestGeneration.current) return;        setPlugins(payload.plugins);        setError("");      })      .catch((loadError: unknown) => {        if (generation !== requestGeneration.current) return;        setError(loadError instanceof Error ? loadError.message : "Plugin discovery failed");      })      .finally(() => {        if (generation === requestGeneration.current) setLoaded(true);      });  }, []);   useMountSubscription(() => {    void loadPlugins();  }, [loadPlugins]);   const handleAccountChanged = useCallback(() => {    void loadPlugins();  }, [loadPlugins]);   const visiblePlugins = useMemo(() => {    const normalized = query.trim().toLowerCase();    if (!normalized) return plugins;    return plugins.filter((plugin) =>      `${plugin.displayName} ${plugin.description} ${plugin.category} ${capabilitySummary(plugin)}`        .toLowerCase()        .includes(normalized),    );  }, [plugins, query]);   const setEnabled = async (plugin: PluginRuntimeView, enabled: boolean) => {    const generation = ++requestGeneration.current;    setBusyId(plugin.id);    setError("");    try {      const response = await fetch(`/api/agent/plugins/${encodeURIComponent(plugin.id)}`, {        method: "POST",        headers: { "Content-Type": "application/json" },        body: JSON.stringify({ enabled }),      });      const payload = await pluginResponse(response, "Plugin activation failed");      if (generation !== requestGeneration.current) return;      setPlugins(payload.plugins);      setPending(null);    } catch (activationError) {      if (generation !== requestGeneration.current) return;      setError(        activationError instanceof Error ? activationError.message : "Plugin activation failed",      );    } finally {      setBusyId((current) => (current === plugin.id ? null : current));    }  };   return (    <>      <div className="mb-4 space-y-3 px-4">        <p className="max-w-3xl text-[length:var(--fs-sm)] leading-relaxed text-(--ui-muted)">          Codex-compatible bundles discovered locally. Skills are available immediately; executable          tools require explicit permission.        </p>        <SearchInput          value={query}          onChange={setQuery}          placeholder="Search plugins"          className="max-w-md"        />      </div>      {error ? (        <div className="mb-4 px-4">          <Alert variant="error">{error}</Alert>        </div>      ) : null}      <SettingsGroup        title="Plugins"        actions={          <StatusPill tone={error ? "warning" : loaded ? "good" : "default"}>            {loaded ? `${visiblePlugins.length} of ${plugins.length}` : "discovering"}          </StatusPill>        }      >        {!loaded ? (          <PluginRowsSkeleton />        ) : visiblePlugins.length ? (          visiblePlugins.map((plugin) => (            <PluginRow              key={plugin.id}              plugin={plugin}              speech={speech}              busy={busyId === plugin.id}              onConnect={() => setPending(plugin)}              onDisconnect={() => void setEnabled(plugin, false)}              onAccount={() => setAccountPlugin(plugin)}              onHostCapability={() => setSpeechPlugin(plugin)}            />          ))        ) : (          <div className="px-4 py-8 text-center text-[length:var(--fs-md)] text-(--ui-muted)">            {plugins.length ? `No plugins match “${query}”.` : "No plugin manifests found."}          </div>        )}      </SettingsGroup>      <UiModal        isOpen={pending !== null}        onClose={() => !busyId && setPending(null)}        maxWidth="max-w-md"      >        <UiModalHeader          title={`Connect ${pending?.displayName ?? "plugin"}?`}          icon={            <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-(--ui-info)/30 bg-(--ui-info)/10">              <Eye className="h-4 w-4 text-(--ui-info)" />            </span>          }          onClose={() => !busyId && setPending(null)}          closeIcon={<X className="h-4 w-4" />}        />        <div className="space-y-5 px-6 py-5">          <Alert variant="info">            Observe mode starts this plugin locally and exposes only tools it declares read-only.            Desktop actions stay blocked until Local Studio has an action-time approval prompt.          </Alert>          <p className="text-sm leading-6 text-(--ui-muted)">            The bundle remains in its installed location. Disconnecting stops exposing its tools to            Workbench sessions.          </p>          <div className="flex justify-end gap-2">            <Button variant="secondary" onClick={() => setPending(null)} disabled={Boolean(busyId)}>              Cancel            </Button>            <Button              onClick={() => pending && void setEnabled(pending, true)}              disabled={!pending || Boolean(busyId)}              loading={Boolean(busyId)}            >              Connect in observe mode            </Button>          </div>        </div>      </UiModal>      {accountPlugin?.account?.provider === "google" ? (        <GoogleAccountModal          accountId={accountPlugin.account.id}          displayName={accountPlugin.displayName}          onClose={() => setAccountPlugin(null)}          onChanged={handleAccountChanged}        />      ) : null}      {speechPlugin?.hostCapability?.capability === "speech" ? (        <ChatterboxVoiceModal key={speech.controllerKey} onClose={() => setSpeechPlugin(null)} />      ) : null}    </>  );}