"use client"; import { useCallback, useMemo, useState } from "react";import { Schema } from "effect";import {  PLUGIN_TEMPLATE,  PluginSourceResponseSchema,  PluginsResponseSchema,  isValidPluginId,  type PluginRow,} from "@local-studio/agent-runtime/plugin-contract";import { Alert, Button, FormField, Input, RefreshIconButton, SearchInput, StatusPill } from "@/ui";import { Plus, Trash2 } from "@/ui/icon-registry";import { ResourceDrawer, ResourceDrawerSection, ResourceFact } from "@/ui/resource-drawer";import { ResourceLogo } from "@/ui/resource-logo";import {  DataRow,  EndCell,  HeadCell,  IdentityCell,  RowAction,  StatusText,  TableFrame,  TableNotice,  TableSection,  TextCell,} from "@/features/recipes/recipes-content/catalog-table-shell";import { useMountSubscription } from "@/hooks/use-mount-subscription";import { jsonBody, requestAgentJson } from "./agent-json"; /** * Plugins the user writes, in the directory the agent already reads. * * A plugin here is a pi extension: one TypeScript module that registers tools * onto every session. There is no registry file and no install step — the list * below *is* the contents of `<agentDir>/extensions`, so what the table says is * loaded and what is loaded cannot disagree. Disabling renames the file rather * than recording a flag somewhere only this app can see. * * The honesty this surface owes the user is different from the connectors tab's. * A connector runs a command in a child process; a plugin runs *inside* the * agent, so it is not sandboxed from anything the agent can touch. Saving still * executes nothing — the file is picked up when the next session is built — * but "next message" is a short fuse and the drawer says so plainly. */ const decodePlugins = Schema.decodeUnknownSync(PluginsResponseSchema);const decodeSource = Schema.decodeUnknownSync(PluginSourceResponseSchema); const CODE_CLASS =  "w-full rounded-[var(--ui-radius)] border border-(--ui-separator) bg-(--ui-surface) px-3 py-2 font-mono text-[length:var(--fs-sm)] leading-5 text-(--ui-fg) focus:border-(--ui-accent)/60 focus:outline-none"; const formatBytes = (bytes: number): string =>  bytes < 1024 ? `${bytes} B` : `${Math.round(bytes / 102.4) / 10} KB`; const PluginBadge = ({ plugin }: { plugin: PluginRow | null }) =>  plugin ? (    <StatusPill tone={plugin.enabled ? "good" : "default"}>      {plugin.enabled ? "loaded" : "disabled"}    </StatusPill>  ) : null; const PluginFacts = ({ plugin }: { plugin: PluginRow }) => (  <ResourceDrawerSection title="On disk">    <ResourceFact label="File" value={plugin.file} mono />    <ResourceFact label="Path" value={plugin.path} mono />    <ResourceFact      label="State"      value={        plugin.enabled          ? "Loaded into every new session"          : "Renamed with a .off suffix, so the agent skips it"      }    />  </ResourceDrawerSection>); /** * The source lives in the section, not in here. * * Opening a plugin fetches its file, so the text arrives one tick after the * drawer does. A local `useState(initialSource)` would latch the empty string * it opened with and there is no effect to re-seed it from — so the section * owns the buffer and this component only edits it. */function PluginEditorDrawer({  plugin,  source,  onSourceChange,  loadingSource,  onClose,  onChanged,}: {  /** Null while composing a new plugin — the id is still being chosen. */  plugin: PluginRow | null;  source: string;  onSourceChange: (next: string) => void;  loadingSource: boolean;  onClose: () => void;  onChanged: (plugins: readonly PluginRow[]) => void;}) {  const [id, setId] = useState(plugin?.id ?? "");  const [saving, setSaving] = useState(false);  const [error, setError] = useState("");  const creating = plugin === null;  const named = id.trim();  const idError =    creating && named && !isValidPluginId(named)      ? "Use lowercase letters, digits, and hyphens."      : "";   const save = async () => {    setSaving(true);    setError("");    try {      const { plugins } = await requestAgentJson(        "/api/agent/plugins",        decodePlugins,        jsonBody({ id: named, source }),      );      onChanged(plugins);      onClose();    } catch (saveError) {      setError(saveError instanceof Error ? saveError.message : "Plugin save failed");    } finally {      setSaving(false);    }  };   return (    <ResourceDrawer      title={plugin?.id ?? "New plugin"}      icon={<ResourceLogo identity={named || "plugin"} label={named || "plugin"} />}      badge={<PluginBadge plugin={plugin} />}      status={plugin?.path ?? "Saved as a .ts file in the agent's extensions directory"}      footer={        <>          <Button variant="secondary" onClick={onClose}>            Cancel          </Button>          <Button            loading={saving}            disabled={!named || Boolean(idError) || loadingSource}            onClick={() => void save()}          >            {creating ? "Create plugin" : "Save plugin"}          </Button>        </>      }      onClose={onClose}      width={860}    >      <Alert variant="warning" className="mb-6">        A plugin runs inside the agent process with your user account — the same reach as the        agent itself, with no sandbox between them. Saving writes the file and nothing more; the        code first runs when your next message rebuilds the session.      </Alert>       {creating ? (        <div className="mb-5">          <FormField            label="Plugin name"            description="Becomes the filename and cannot be changed later."            error={idError || undefined}          >            <Input              value={id}              onChange={(event) => setId(event.target.value)}              placeholder="my-tools"              className="font-mono"            />          </FormField>        </div>      ) : null}       <section className="mb-6">        <div className="mb-2">          <h3 className="text-[length:var(--fs-base)] font-medium text-(--ui-fg)">Source</h3>          <p className="mt-0.5 text-[length:var(--fs-sm)] text-(--ui-muted)">            TypeScript, compiled by the agent on load. Imports resolve against the agent&rsquo;s            own dependencies.          </p>        </div>        <textarea          value={loadingSource ? "Loading…" : source}          onChange={(event) => onSourceChange(event.target.value)}          readOnly={loadingSource}          spellCheck={false}          rows={22}          aria-label="Plugin source"          className={CODE_CLASS}        />      </section>       {plugin ? <PluginFacts plugin={plugin} /> : null}       {error ? <p className="mt-4 text-[length:var(--fs-sm)] text-(--ui-danger)">{error}</p> : null}    </ResourceDrawer>  );} function PluginRowView({  plugin,  onOpen,  onChanged,}: {  plugin: PluginRow;  onOpen: () => void;  onChanged: (plugins: readonly PluginRow[]) => void;}) {  const [busy, setBusy] = useState(false);  const [rowError, setRowError] = useState("");   const run = (url: string, init: RequestInit, failure: string) => {    setBusy(true);    setRowError("");    void requestAgentJson(url, decodePlugins, init)      .then(({ plugins }) => onChanged(plugins))      .catch((error: unknown) => setRowError(error instanceof Error ? error.message : failure))      .finally(() => setBusy(false));  };   return (    <DataRow      onOpen={plugin.read_only ? undefined : onOpen}      ariaLabel={`Open ${plugin.id}`}      dimmed={!plugin.enabled}    >      <IdentityCell        leading={<ResourceLogo identity={plugin.id} label={plugin.id} />}        label={plugin.id}        description={          rowError ||          (plugin.read_only            ? "A directory extension — edit it in your editor"            : `${formatBytes(plugin.bytes)} · ${plugin.file}`)        }      />      <TextCell mono title={plugin.path}>        {plugin.path}      </TextCell>      <EndCell>        <div className="flex items-center justify-end gap-2">          <StatusText tone={plugin.enabled ? "ok" : "dim"}>            {plugin.enabled ? "loaded" : "disabled"}          </StatusText>          {plugin.read_only ? null : (            <>              <RowAction                alwaysVisible                disabled={busy}                onClick={() =>                  run(                    "/api/agent/plugins",                    jsonBody({ id: plugin.id, enabled: !plugin.enabled }),                    "Could not change this plugin",                  )                }                title={                  plugin.enabled                    ? "Stop loading this plugin into new sessions"                    : "Load this plugin from your next message"                }              >                {plugin.enabled ? "Disable" : "Enable"}              </RowAction>              <RowAction                alwaysVisible                disabled={busy}                onClick={() =>                  run(                    `/api/agent/plugins?id=${encodeURIComponent(plugin.id)}`,                    { method: "DELETE" },                    "Could not delete this plugin",                  )                }                tone="danger"                title={`Delete ${plugin.file}`}              >                <Trash2 className="h-3 w-3" />              </RowAction>            </>          )}        </div>      </EndCell>    </DataRow>  );} export function PluginsSection() {  const [plugins, setPlugins] = useState<readonly PluginRow[]>([]);  const [directory, setDirectory] = useState("");  const [loaded, setLoaded] = useState(false);  const [refreshing, setRefreshing] = useState(false);  const [query, setQuery] = useState("");  const [error, setError] = useState("");  const [editing, setEditing] = useState<PluginRow | null>(null);  const [composing, setComposing] = useState(false);  const [source, setSource] = useState("");  const [loadingSource, setLoadingSource] = useState(false);   const refresh = useCallback(() => {    setRefreshing(true);    void requestAgentJson("/api/agent/plugins", decodePlugins)      .then((payload) => {        setPlugins(payload.plugins);        setDirectory(payload.directory);        setError("");      })      .catch((loadError: unknown) => {        setPlugins([]);        setError(loadError instanceof Error ? loadError.message : "Plugin discovery failed");      })      .finally(() => {        setLoaded(true);        setRefreshing(false);      });  }, []);   useMountSubscription(() => {    refresh();  }, [refresh]);   const openPlugin = (plugin: PluginRow) => {    setEditing(plugin);    setComposing(false);    setSource("");    setLoadingSource(true);    void requestAgentJson(      `/api/agent/plugins/source?id=${encodeURIComponent(plugin.id)}`,      decodeSource,    )      .then((payload) => setSource(payload.source))      .catch((readError: unknown) =>        setSource(`// ${readError instanceof Error ? readError.message : "could not read"}`),      )      .finally(() => setLoadingSource(false));  };   const visible = useMemo(() => {    const normalized = query.trim().toLowerCase();    if (!normalized) return plugins;    return plugins.filter((plugin) =>      `${plugin.id} ${plugin.file}`.toLowerCase().includes(normalized),    );  }, [plugins, query]);   const closeDrawer = () => {    setEditing(null);    setComposing(false);    setSource("");  };   return (    <>      <TableSection        title="Plugins"        description={          directory            ? `TypeScript modules that add tools to every session. Read from ${directory}.`            : "TypeScript modules that add tools to every session."        }        actions={          <div className="flex items-center gap-2">            <SearchInput              value={query}              onChange={setQuery}              placeholder="Search plugins"              className="w-56"            />            <StatusText tone={error ? "warn" : loaded ? "ok" : "dim"}>              {loaded ? `${visible.length} of ${plugins.length}` : "reading"}            </StatusText>            <RefreshIconButton onClick={refresh} loading={refreshing} label="Reload plugins" />            <Button              size="sm"              onClick={() => {                setComposing(true);                setEditing(null);                setSource(PLUGIN_TEMPLATE);                setLoadingSource(false);              }}            >              <Plus className="h-3.5 w-3.5" />              New plugin            </Button>          </div>        }      >        {loaded && visible.length === 0 ? (          <TableNotice            title={plugins.length ? `No plugin matches “${query}”` : "No plugins yet"}            body={              error ||              "A plugin is one TypeScript file that registers tools onto every session. New plugin opens a working example you can edit and save — it starts as a file on disk, not as running code."            }          />        ) : (          <TableFrame minWidthClass="min-w-[40rem]">            <thead>              <tr>                <HeadCell>Plugin</HeadCell>                <HeadCell>File</HeadCell>                <HeadCell numeric>State</HeadCell>              </tr>            </thead>            <tbody>              {visible.map((plugin) => (                <PluginRowView                  key={plugin.id}                  plugin={plugin}                  onOpen={() => openPlugin(plugin)}                  onChanged={setPlugins}                />              ))}            </tbody>          </TableFrame>        )}      </TableSection>       {editing || composing ? (        <PluginEditorDrawer          key={editing?.id ?? "new"}          plugin={editing}          source={source}          onSourceChange={setSource}          loadingSource={loadingSource}          onClose={closeDrawer}          onChanged={setPlugins}        />      ) : null}    </>  );}