diff --git a/apps/desktop/src/electron/ElectronProtocol.test.ts b/apps/desktop/src/electron/ElectronProtocol.test.ts
index aec3a2d5b45c0..16bd5cba4b542 100644
--- a/apps/desktop/src/electron/ElectronProtocol.test.ts
+++ b/apps/desktop/src/electron/ElectronProtocol.test.ts
@@ -99,7 +99,7 @@ describe("ElectronProtocol", () => {
           assert.equal(yield* Effect.promise(() => response.text()), "ok");
           assert.include(
             response.headers.get("content-security-policy") ?? "",
-            "script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://clerk.t3.codes https://challenges.cloudflare.com",
+            "script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' blob: https://clerk.t3.codes https://challenges.cloudflare.com",
           );
           assert.include(
             response.headers.get("content-security-policy") ?? "",
@@ -111,7 +111,7 @@ describe("ElectronProtocol", () => {
           );
           assert.include(
             response.headers.get("content-security-policy") ?? "",
-            "font-src 'self' t3code-dev: data:",
+            "font-src 'self' t3code-dev: blob: data:",
           );
         }),
       );
diff --git a/apps/desktop/src/electron/ElectronProtocol.ts b/apps/desktop/src/electron/ElectronProtocol.ts
index 27af3f2cfd8ae..a0ef7ab71593e 100644
--- a/apps/desktop/src/electron/ElectronProtocol.ts
+++ b/apps/desktop/src/electron/ElectronProtocol.ts
@@ -74,6 +74,8 @@ function makeDesktopContentSecurityPolicy(input: DesktopProtocolRegistrationInpu
     "'self'",
     "'unsafe-inline'",
     "'wasm-unsafe-eval'",
+    // Only the page holds each environment's credentials, so plugin bundles it fetches run from blob URLs.
+    "blob:",
     ...(clerkOrigin ? [clerkOrigin] : []),
     "https://challenges.cloudflare.com",
   ];
@@ -89,7 +91,8 @@ function makeDesktopContentSecurityPolicy(input: DesktopProtocolRegistrationInpu
     `img-src 'self' ${input.scheme}: blob: data: http: https:`,
     `media-src 'self' ${input.scheme}: blob: http: https:`,
     "style-src 'self' 'unsafe-inline'",
-    `font-src 'self' ${input.scheme}: data:`,
+    // `blob:` for fonts a plugin ships, which reach the page through `api.assetUrl`.
+    `font-src 'self' ${input.scheme}: blob: data:`,
     "worker-src 'self' blob:",
     "frame-src 'self' blob: http: https:",
     "object-src 'self' blob: http: https:",
diff --git a/apps/desktop/src/ipc/DesktopIpcHandlers.ts b/apps/desktop/src/ipc/DesktopIpcHandlers.ts
index 35333ac3d33a4..afb1806e0b415 100644
--- a/apps/desktop/src/ipc/DesktopIpcHandlers.ts
+++ b/apps/desktop/src/ipc/DesktopIpcHandlers.ts
@@ -49,6 +49,7 @@ import {
   pickProjectFavicon,
   pickThemeFiles,
   setTheme,
+  setWindowBackground,
   showContextMenu,
 } from "./methods/window.ts";
 import {
@@ -139,6 +140,7 @@ export const installDesktopIpcHandlers = Effect.fn("desktop.ipc.installHandlers"
   yield* ipc.handle(pickProjectFavicon);
   yield* ipc.handle(pickThemeFiles);
   yield* ipc.handle(setTheme);
+  yield* ipc.handle(setWindowBackground);
   yield* ipc.handle(showContextMenu);
   yield* ipc.handle(openExternal);
   yield* ipc.handle(receiveProviderAuthCallback);
diff --git a/apps/desktop/src/ipc/channels.ts b/apps/desktop/src/ipc/channels.ts
index 538dd06b0b42a..fb78038046718 100644
--- a/apps/desktop/src/ipc/channels.ts
+++ b/apps/desktop/src/ipc/channels.ts
@@ -3,6 +3,7 @@ export const SET_NOTIFICATION_BADGE_CHANNEL = "desktop:set-notification-badge";
 export const PICK_PROJECT_FAVICON_CHANNEL = "desktop:pick-project-favicon";
 export const PICK_THEME_FILES_CHANNEL = "desktop:pick-theme-files";
 export const SET_THEME_CHANNEL = "desktop:set-theme";
+export const SET_WINDOW_BACKGROUND_CHANNEL = "desktop:set-window-background";
 export const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 export const OPEN_EXTERNAL_CHANNEL = "desktop:open-external";
 export const OPEN_SYSTEM_SETTINGS_CHANNEL = "desktop:open-system-settings";
diff --git a/apps/desktop/src/ipc/methods/window.ts b/apps/desktop/src/ipc/methods/window.ts
index f0d661b58bc9a..cdb065bcbff56 100644
--- a/apps/desktop/src/ipc/methods/window.ts
+++ b/apps/desktop/src/ipc/methods/window.ts
@@ -3,6 +3,7 @@ import {
   DesktopAppBrandingSchema,
   DesktopEnvironmentBootstrapSchema,
   DesktopThemeSchema,
+  DesktopWindowBackgroundSchema,
   EDITORS,
   EditorId,
   PickedThemeFileSchema,
@@ -38,6 +39,7 @@ import * as ElectronTheme from "../../electron/ElectronTheme.ts";
 import * as ElectronWindow from "../../electron/ElectronWindow.ts";
 import * as Electron from "electron";
 import * as MacPermissions from "../../permissions/MacPermissions.ts";
+import * as DesktopWindow from "../../window/DesktopWindow.ts";
 import { safariPermissionCheck } from "../../preview/BrowserImport/SafariPermission.ts";
 import * as IpcChannels from "../channels.ts";
 import * as DesktopIpc from "../DesktopIpc.ts";
@@ -264,6 +266,17 @@ export const setTheme = DesktopIpc.makeIpcMethod({
   }),
 });
 
+export const setWindowBackground = DesktopIpc.makeIpcMethod({
+  channel: IpcChannels.SET_WINDOW_BACKGROUND_CHANNEL,
+  payload: DesktopWindowBackgroundSchema,
+  result: Schema.Void,
+  handler: Effect.fn("desktop.ipc.window.setWindowBackground")(function* (background) {
+    const appSettings = yield* DesktopAppSettings.DesktopAppSettings;
+    const change = yield* appSettings.setWindowBackground(background);
+    if (change.changed) yield* (yield* DesktopWindow.DesktopWindow).syncAppearance;
+  }),
+});
+
 export const showContextMenu = DesktopIpc.makeIpcMethod({
   channel: IpcChannels.CONTEXT_MENU_CHANNEL,
   payload: ContextMenuInput,
diff --git a/apps/desktop/src/preload.ts b/apps/desktop/src/preload.ts
index 950ed972c6453..29c5976fa1515 100644
--- a/apps/desktop/src/preload.ts
+++ b/apps/desktop/src/preload.ts
@@ -192,6 +192,8 @@ contextBridge.exposeInMainWorld("desktopBridge", {
     ipcRenderer.invoke(IpcChannels.PICK_PROJECT_FAVICON_CHANNEL, initialPath),
   pickThemeFiles: () => ipcRenderer.invoke(IpcChannels.PICK_THEME_FILES_CHANNEL, undefined),
   setTheme: (theme) => ipcRenderer.invoke(IpcChannels.SET_THEME_CHANNEL, theme),
+  setWindowBackground: (background) =>
+    ipcRenderer.invoke(IpcChannels.SET_WINDOW_BACKGROUND_CHANNEL, background),
   showContextMenu: (items, position) =>
     ipcRenderer.invoke(IpcChannels.CONTEXT_MENU_CHANNEL, {
       items,
diff --git a/apps/desktop/src/settings/DesktopAppSettings.test.ts b/apps/desktop/src/settings/DesktopAppSettings.test.ts
index 0135225f90c48..4682457cbadb7 100644
--- a/apps/desktop/src/settings/DesktopAppSettings.test.ts
+++ b/apps/desktop/src/settings/DesktopAppSettings.test.ts
@@ -1,4 +1,5 @@
 import * as NodeServices from "@effect/platform-node/NodeServices";
+import { DesktopWindowBackgroundSchema } from "@t3tools/contracts";
 import { assert, describe, it } from "@effect/vitest";
 import * as Effect from "effect/Effect";
 import * as FileSystem from "effect/FileSystem";
@@ -34,6 +35,7 @@ const DesktopSettingsPatch = Schema.Struct({
   wslMode: Schema.optionalKey(Schema.Literals(["local", "wsl"])),
   wslDistro: Schema.optionalKey(Schema.NullOr(Schema.String)),
   wslOnly: Schema.optionalKey(Schema.Boolean),
+  windowCanvases: Schema.optionalKey(DesktopWindowBackgroundSchema),
 });
 
 const decodeDesktopSettingsPatch = Schema.decodeEffect(Schema.fromJsonString(DesktopSettingsPatch));
@@ -186,6 +188,7 @@ describe("DesktopSettings", () => {
           wslBackendEnabled: false,
           wslOnly: false,
           wslDistro: null,
+          windowBackground: null,
         } satisfies DesktopAppSettings.DesktopSettings);
       }),
     ),
@@ -218,6 +221,11 @@ describe("DesktopSettings", () => {
 
         yield* settings.setMainWindowBounds({ x: -1200, y: 40, width: 1440, height: 960 }, true);
         yield* settings.setServerExposureMode("network-accessible");
+        const windowBackground = {
+          light: { appearance: "light", color: "#f4f4f4" },
+          dark: { appearance: "dark", color: "#151515" },
+        } as const;
+        yield* settings.setWindowBackground(windowBackground);
 
         const persisted = yield* decodeDesktopSettingsPatch(
           yield* fileSystem.readFileString(environment.desktopSettingsPath),
@@ -226,7 +234,9 @@ describe("DesktopSettings", () => {
           mainWindowBounds: { x: -1200, y: 40, width: 1440, height: 960 },
           mainWindowMaximized: true,
           serverExposureMode: "network-accessible",
+          windowCanvases: windowBackground,
         } satisfies typeof DesktopSettingsPatch.Type);
+        assert.deepEqual((yield* settings.load).windowBackground, windowBackground);
       }),
     ),
   );
@@ -281,6 +291,7 @@ describe("DesktopSettings", () => {
           wslBackendEnabled: false,
           wslOnly: false,
           wslDistro: null,
+          windowBackground: null,
         } satisfies DesktopAppSettings.DesktopSettings);
       }),
       { appVersion: "0.0.17-nightly.20260415.1" },
@@ -310,6 +321,7 @@ describe("DesktopSettings", () => {
           wslBackendEnabled: false,
           wslOnly: false,
           wslDistro: null,
+          windowBackground: null,
         } satisfies DesktopAppSettings.DesktopSettings);
       }),
       { appVersion: "0.0.17-nightly.20260415.1" },
diff --git a/apps/desktop/src/settings/DesktopAppSettings.ts b/apps/desktop/src/settings/DesktopAppSettings.ts
index a0624ced669ea..be2b823796986 100644
--- a/apps/desktop/src/settings/DesktopAppSettings.ts
+++ b/apps/desktop/src/settings/DesktopAppSettings.ts
@@ -1,8 +1,11 @@
 import {
   DesktopServerExposureModeSchema,
   DesktopUpdateChannelSchema,
+  DesktopWindowBackgroundSchema,
   type DesktopServerExposureMode,
   type DesktopUpdateChannel,
+  type DesktopWindowBackground,
+  type DesktopWindowCanvas,
 } from "@t3tools/contracts";
 import { fromLenientJson } from "@t3tools/shared/schemaJson";
 import { resolveSymlinkTarget } from "@t3tools/shared/symlink";
@@ -39,6 +42,8 @@ export interface DesktopSettings {
   readonly wslDistro: string | null;
   // Requires restart because the pool chooses its primary spec at layer initialization.
   readonly wslOnly: boolean;
+  /** The renderer's theme canvases, painted before the page loads. */
+  readonly windowBackground: DesktopWindowBackground | null;
 }
 
 export interface DesktopSettingsChange {
@@ -76,6 +81,7 @@ export const DEFAULT_DESKTOP_SETTINGS: DesktopSettings = {
   wslBackendEnabled: false,
   wslDistro: null,
   wslOnly: false,
+  windowBackground: null,
 };
 
 const DesktopWindowBoundsDocument = Schema.Struct({
@@ -99,6 +105,7 @@ const DesktopSettingsDocument = Schema.Struct({
   wslMode: Schema.optionalKey(Schema.Literals(["local", "wsl"])),
   wslDistro: Schema.optionalKey(Schema.NullOr(Schema.String)),
   wslOnly: Schema.optionalKey(Schema.Boolean),
+  windowCanvases: Schema.optionalKey(Schema.Unknown),
 });
 
 type DesktopSettingsDocument = typeof DesktopSettingsDocument.Type;
@@ -109,6 +116,8 @@ const decodeDesktopSettingsJson = Schema.decodeEffect(DesktopSettingsJson);
 const encodeDesktopSettingsJson = Schema.encodeEffect(DesktopSettingsJson);
 const decodeDesktopWindowBounds = Schema.decodeUnknownOption(DesktopWindowBoundsSchema);
 const desktopWindowBoundsEquivalence = Schema.toEquivalence(DesktopWindowBoundsSchema);
+const decodeDesktopWindowBackground = Schema.decodeUnknownOption(DesktopWindowBackgroundSchema);
+const desktopWindowBackgroundEquivalence = Schema.toEquivalence(DesktopWindowBackgroundSchema);
 
 const settingsChange = (settings: DesktopSettings, changed: boolean): DesktopSettingsChange => ({
   settings,
@@ -169,6 +178,9 @@ export class DesktopAppSettings extends Context.Service<
     readonly setWslOnly: (
       enabled: boolean,
     ) => Effect.Effect<DesktopSettingsChange, DesktopSettingsWriteError>;
+    readonly setWindowBackground: (
+      background: DesktopWindowBackground,
+    ) => Effect.Effect<DesktopSettingsChange, DesktopSettingsWriteError>;
     readonly applyWslWindowsFallback: Effect.Effect<
       DesktopSettingsChange,
       DesktopSettingsWriteError
@@ -194,6 +206,21 @@ function normalizeWslDistro(value: unknown): string | null {
   return typeof value === "string" && isValidDistroName(value) ? value : null;
 }
 
+function normalizeWindowColor(value: unknown): string | null {
+  return typeof value === "string" && /^#[0-9a-f]{6}$/i.test(value) ? value.toLowerCase() : null;
+}
+
+function normalizeWindowBackground(value: unknown): DesktopWindowBackground | null {
+  const canvas = ({ appearance, color }: DesktopWindowCanvas): DesktopWindowCanvas => ({
+    appearance,
+    color: normalizeWindowColor(color),
+  });
+  return Option.match(decodeDesktopWindowBackground(value), {
+    onNone: () => null,
+    onSome: (background) => ({ light: canvas(background.light), dark: canvas(background.dark) }),
+  });
+}
+
 export function normalizeMainWindowBounds(value: unknown): DesktopWindowBounds | null {
   return Option.getOrNull(decodeDesktopWindowBounds(value));
 }
@@ -230,6 +257,7 @@ function normalizeDesktopSettingsDocument(
     wslBackendEnabled,
     wslDistro: normalizeWslDistro(parsed.wslDistro),
     wslOnly: parsed.wslOnly === true,
+    windowBackground: normalizeWindowBackground(parsed.windowCanvases),
   };
 }
 
@@ -276,6 +304,9 @@ function toDesktopSettingsDocument(
   if (settings.wslOnly !== defaults.wslOnly) {
     document.wslOnly = settings.wslOnly;
   }
+  if (settings.windowBackground !== null) {
+    document.windowCanvases = settings.windowBackground;
+  }
 
   return document;
 }
@@ -366,6 +397,18 @@ function setWslOnly(settings: DesktopSettings, enabled: boolean): DesktopSetting
       };
 }
 
+function setWindowBackground(
+  settings: DesktopSettings,
+  background: DesktopWindowBackground,
+): DesktopSettings {
+  const normalized = normalizeWindowBackground(background);
+  return settings.windowBackground !== null &&
+    normalized !== null &&
+    desktopWindowBackgroundEquivalence(settings.windowBackground, normalized)
+    ? settings
+    : { ...settings, windowBackground: normalized };
+}
+
 function setLocalEnvironmentEnabled(settings: DesktopSettings, enabled: boolean): DesktopSettings {
   return settings.localEnvironmentEnabled === enabled
     ? settings
@@ -564,6 +607,14 @@ export const make = Effect.gen(function* () {
 
       return yield* persist((settings) => setWslOnly(settings, enabled));
     }),
+    setWindowBackground: Effect.fn("desktop.settings.setWindowBackground")(function* (background) {
+      yield* Effect.annotateCurrentSpan({
+        light: background.light.color,
+        dark: background.dark.color,
+      });
+
+      return yield* persist((settings) => setWindowBackground(settings, background));
+    }),
     setLocalEnvironmentEnabled: Effect.fn("desktop.settings.setLocalEnvironmentEnabled")(
       function* (enabled) {
         yield* Effect.annotateCurrentSpan({ enabled });
@@ -629,6 +680,11 @@ export const layerTest = (initialSettings: DesktopSettings = DEFAULT_DESKTOP_SET
         setWslOnly: Effect.fn("DesktopAppSettings.setWslOnly")(function (enabled) {
           return update((settings) => setWslOnly(settings, enabled));
         }),
+        setWindowBackground: Effect.fn("DesktopAppSettings.setWindowBackground")(
+          function (background) {
+            return update((settings) => setWindowBackground(settings, background));
+          },
+        ),
         setLocalEnvironmentEnabled: Effect.fn("DesktopAppSettings.setLocalEnvironmentEnabled")(
           function (enabled) {
             return update((settings) => setLocalEnvironmentEnabled(settings, enabled));
diff --git a/apps/desktop/src/updates/updatesTestHarness.ts b/apps/desktop/src/updates/updatesTestHarness.ts
index d8d16b7dbfd62..1ad68c80a222d 100644
--- a/apps/desktop/src/updates/updatesTestHarness.ts
+++ b/apps/desktop/src/updates/updatesTestHarness.ts
@@ -228,6 +228,7 @@ export function makeHarness(options: UpdatesHarnessOptions = {}) {
           setWslDistro: () => Effect.die("unexpected WSL distro change"),
           setLocalEnvironmentEnabled: () => Effect.die("unexpected local environment toggle"),
           setWslOnly: () => Effect.die("unexpected WSL-only toggle"),
+          setWindowBackground: () => Effect.die("unexpected window background update"),
           applyWslWindowsFallback: Effect.die("unexpected WSL Windows fallback"),
           applyWslWindowsFallbackInMemory: Effect.die("unexpected WSL Windows fallback"),
         } satisfies DesktopAppSettings.DesktopAppSettings["Service"])
diff --git a/apps/desktop/src/window/DesktopWindow.test.ts b/apps/desktop/src/window/DesktopWindow.test.ts
index 0dcb2b85ac2c5..628d82b44e539 100644
--- a/apps/desktop/src/window/DesktopWindow.test.ts
+++ b/apps/desktop/src/window/DesktopWindow.test.ts
@@ -267,6 +267,7 @@ function layerTest(input: {
     setWslBackendEnabled: () => Effect.die("unexpected WSL backend toggle"),
     setWslDistro: () => Effect.die("unexpected WSL distro change"),
     setWslOnly: () => Effect.die("unexpected WSL-only toggle"),
+    setWindowBackground: () => Effect.die("unexpected window background update"),
     setLocalEnvironmentEnabled: () => Effect.die("unexpected local environment toggle"),
     applyWslWindowsFallback: Effect.die("unexpected WSL Windows fallback"),
     applyWslWindowsFallbackInMemory: Effect.die("unexpected WSL Windows fallback"),
@@ -479,6 +480,33 @@ describe("DesktopWindow", () => {
     );
   });
 
+  it("starts windows in the canvas the page paints in the current appearance", () => {
+    const surface = {
+      light: { appearance: "light", color: "#f4f4f4" },
+      dark: { appearance: "dark", color: "#151515" },
+    } as const;
+    const pinnedDark = {
+      light: { appearance: "dark", color: "#151515" },
+      dark: { appearance: "dark", color: "#151515" },
+    } as const;
+    const plain = {
+      light: { appearance: "light", color: null },
+      dark: { appearance: "dark", color: null },
+    } as const;
+    for (const [shouldUseDarkColors, background, expected] of [
+      [false, surface, { color: "#f4f4f4", dark: false }],
+      [true, surface, { color: "#151515", dark: true }],
+      [false, pinnedDark, { color: "#151515", dark: true }],
+      [true, plain, { color: "#000000", dark: true }],
+      [false, null, { color: "#ffffff", dark: false }],
+    ] as const) {
+      assert.deepEqual(
+        DesktopWindow.resolveWindowCanvas(shouldUseDarkColors, background),
+        expected,
+      );
+    }
+  });
+
   it("rejects renderer navigations whose origin only serializes as null", () => {
     for (const applicationUrl of ["t3code://app/", "t3code-dev://app/"]) {
       assert.isTrue(
diff --git a/apps/desktop/src/window/DesktopWindow.ts b/apps/desktop/src/window/DesktopWindow.ts
index 10801089841d1..ac3d63e391a48 100644
--- a/apps/desktop/src/window/DesktopWindow.ts
+++ b/apps/desktop/src/window/DesktopWindow.ts
@@ -8,7 +8,11 @@ import * as Ref from "effect/Ref";
 
 import * as Electron from "electron";
 
-import { type DesktopSnapShotEvent, DEFAULT_CLIENT_SETTINGS } from "@t3tools/contracts";
+import {
+  type DesktopSnapShotEvent,
+  type DesktopWindowBackground,
+  DEFAULT_CLIENT_SETTINGS,
+} from "@t3tools/contracts";
 
 import * as DesktopAssets from "../app/DesktopAssets.ts";
 import * as DesktopEnvironment from "../app/DesktopEnvironment.ts";
@@ -131,8 +135,14 @@ function getIconOption(
   });
 }
 
-function getInitialWindowBackgroundColor(shouldUseDarkColors: boolean): string {
-  return shouldUseDarkColors ? "#000000" : "#ffffff";
+/** The canvas the page paints in the current native theme, so a new window does not flash first. */
+export function resolveWindowCanvas(
+  shouldUseDarkColors: boolean,
+  background: DesktopWindowBackground | null,
+): { readonly color: string; readonly dark: boolean } {
+  const canvas = background?.[shouldUseDarkColors ? "dark" : "light"];
+  const dark = canvas === undefined ? shouldUseDarkColors : canvas.appearance === "dark";
+  return { color: canvas?.color ?? (dark ? "#000000" : "#ffffff"), dark };
 }
 
 type DisplayBounds = Pick<Electron.Rectangle, "x" | "y" | "width" | "height">;
@@ -174,11 +184,13 @@ export function resolveInitialMainWindowBounds(
   return DesktopAppSettings.DEFAULT_MAIN_WINDOW_SIZE;
 }
 
-function buildConnectingSplashDataUrl(shouldUseDarkColors: boolean): string {
-  const background = getInitialWindowBackgroundColor(shouldUseDarkColors);
-  const label = shouldUseDarkColors ? "#9ca3af" : "#6b7280";
-  const accent = shouldUseDarkColors ? "#f8fafc" : "#1f2937";
-  const track = shouldUseDarkColors ? "rgba(248,250,252,0.18)" : "rgba(31,41,55,0.18)";
+function buildConnectingSplashDataUrl({
+  color: background,
+  dark,
+}: ReturnType<typeof resolveWindowCanvas>): string {
+  const label = dark ? "#9ca3af" : "#6b7280";
+  const accent = dark ? "#f8fafc" : "#1f2937";
+  const track = dark ? "rgba(248,250,252,0.18)" : "rgba(31,41,55,0.18)";
   const html = `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'"><style>html,body{margin:0;height:100%}body{background:${background};color:${label};font-family:system-ui,-apple-system,'Segoe UI',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;-webkit-user-select:none;user-select:none;-webkit-app-region:drag}.spinner{width:26px;height:26px;border:3px solid ${track};border-top-color:${accent};border-radius:50%;animation:spin .8s linear infinite}.label{font-size:13px}@keyframes spin{to{transform:rotate(360deg)}}</style></head><body><div class="spinner"></div><div class="label">Connecting to WSL…</div></body></html>`;
   return `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
 }
@@ -258,6 +270,7 @@ function getWindowTitleBarOptions(
 function syncWindowAppearance(
   window: Electron.BrowserWindow,
   shouldUseDarkColors: boolean,
+  themeBackground: DesktopWindowBackground | null,
   platform: NodeJS.Platform,
 ): Effect.Effect<void> {
   return Effect.sync(() => {
@@ -265,7 +278,7 @@ function syncWindowAppearance(
       return;
     }
 
-    window.setBackgroundColor(getInitialWindowBackgroundColor(shouldUseDarkColors));
+    window.setBackgroundColor(resolveWindowCanvas(shouldUseDarkColors, themeBackground).color);
     const { titleBarOverlay } = getWindowTitleBarOptions(shouldUseDarkColors, platform);
     if (typeof titleBarOverlay === "object") {
       window.setTitleBarOverlay(titleBarOverlay);
@@ -386,7 +399,8 @@ export const make = Effect.gen(function* () {
       show: false,
       autoHideMenuBar: true,
       ...(environment.platform === "darwin" ? { disableAutoHideCursor: true } : {}),
-      backgroundColor: getInitialWindowBackgroundColor(shouldUseDarkColors),
+      backgroundColor: resolveWindowCanvas(shouldUseDarkColors, persistedSettings.windowBackground)
+        .color,
       ...iconOption,
       title: environment.displayName,
       ...getWindowTitleBarOptions(shouldUseDarkColors, environment.platform),
@@ -896,7 +910,10 @@ export const make = Effect.gen(function* () {
     const existingWindow = yield* electronWindow.currentMainOrFirst;
     if (Option.isSome(existingWindow)) return;
 
-    const shouldUseDarkColors = yield* electronTheme.shouldUseDarkColors;
+    const canvas = resolveWindowCanvas(
+      yield* electronTheme.shouldUseDarkColors,
+      (yield* desktopSettings.get).windowBackground,
+    );
     if (yield* Ref.get(desktopState.quitting)) return;
     const splash = yield* electronWindow.create({
       width: 360,
@@ -909,7 +926,7 @@ export const make = Effect.gen(function* () {
       center: true,
       show: false,
       skipTaskbar: false,
-      backgroundColor: getInitialWindowBackgroundColor(shouldUseDarkColors),
+      backgroundColor: canvas.color,
       title: environment.displayName,
       webPreferences: {
         contextIsolation: true,
@@ -931,7 +948,7 @@ export const make = Effect.gen(function* () {
         splash.show();
       }
     });
-    void splash.loadURL(buildConnectingSplashDataUrl(shouldUseDarkColors));
+    void splash.loadURL(buildConnectingSplashDataUrl(canvas));
     yield* logWindowInfo("connecting splash shown");
   }).pipe(
     Effect.catch((error) =>
@@ -1038,8 +1055,9 @@ export const make = Effect.gen(function* () {
     }),
     syncAppearance: Effect.gen(function* () {
       const shouldUseDarkColors = yield* electronTheme.shouldUseDarkColors;
+      const { windowBackground } = yield* desktopSettings.get;
       yield* electronWindow.syncAllAppearance((window) =>
-        syncWindowAppearance(window, shouldUseDarkColors, environment.platform),
+        syncWindowAppearance(window, shouldUseDarkColors, windowBackground, environment.platform),
       );
     }).pipe(Effect.withSpan("desktop.window.syncAppearance")),
   });
diff --git a/apps/server/package.json b/apps/server/package.json
index 0dacbbe90720c..a06e2346d534c 100644
--- a/apps/server/package.json
+++ b/apps/server/package.json
@@ -77,6 +77,7 @@
     "@effect/vitest": "catalog:",
     "@opencode-ai/sdk": "^1.3.15",
     "@t3tools/contracts": "workspace:*",
+    "@t3tools/plugin-sdk": "workspace:*",
     "@t3tools/provider-testing": "workspace:*",
     "@t3tools/secret-provider-core": "workspace:*",
     "@t3tools/secret-provider-definitions": "workspace:*",
diff --git a/apps/server/src/auth/RpcAuthorization.test.ts b/apps/server/src/auth/RpcAuthorization.test.ts
index 8044740a7e2ee..d43b5a5c2f734 100644
--- a/apps/server/src/auth/RpcAuthorization.test.ts
+++ b/apps/server/src/auth/RpcAuthorization.test.ts
@@ -68,6 +68,16 @@ describe("RPC authorization scopes", () => {
     }
   });
 
+  it("keeps enabling, reloading and configuring plugins, which runs their code, behind settings write", () => {
+    for (const method of [
+      WS_METHODS.pluginsSetEnabled,
+      WS_METHODS.pluginsReload,
+      WS_METHODS.pluginsSettingsUpdate,
+    ]) {
+      expect(requiredScopeForRpcMethod(method)).toBe(AuthSettingsWriteScope);
+    }
+  });
+
   it("rejects unknown RPC method names", () => {
     for (const method of ["server.notRegistered", "toString", "constructor"]) {
       expect(() => requiredScopeForRpcMethod(method)).toThrow(
diff --git a/apps/server/src/auth/RpcAuthorization.ts b/apps/server/src/auth/RpcAuthorization.ts
index 6049121b41a5d..0fb91a610c9e1 100644
--- a/apps/server/src/auth/RpcAuthorization.ts
+++ b/apps/server/src/auth/RpcAuthorization.ts
@@ -205,6 +205,13 @@ export const RPC_REQUIRED_SCOPES = {
   [WS_METHODS.deviceDetail]: AuthOrchestrationReadScope,
   [WS_METHODS.deviceAction]: AuthOrchestrationOperateScope,
   [WS_METHODS.subscribeDeviceState]: AuthOrchestrationReadScope,
+  // `plugins.invoke` also needs the operate scope for methods a plugin registered as writes;
+  // PluginHost checks that against the plugin's own declaration. Channels are reads.
+  [WS_METHODS.pluginsList]: AuthOrchestrationReadScope,
+  [WS_METHODS.pluginsSubscribeStates]: AuthOrchestrationReadScope,
+  [WS_METHODS.pluginsSettingsGet]: AuthOrchestrationReadScope,
+  [WS_METHODS.pluginsInvoke]: AuthOrchestrationReadScope,
+  [WS_METHODS.pluginsSubscribe]: AuthOrchestrationReadScope,
   [WS_METHODS.subscribeServerConfig]: AuthOrchestrationReadScope,
   [WS_METHODS.subscribeServerLifecycle]: AuthOrchestrationReadScope,
   [WS_METHODS.subscribeAuthAccess]: AuthAccessReadScope,
diff --git a/apps/server/src/environment/ServerEnvironment.ts b/apps/server/src/environment/ServerEnvironment.ts
index 72d7f0c2de7ef..b2b2d6956398d 100644
--- a/apps/server/src/environment/ServerEnvironment.ts
+++ b/apps/server/src/environment/ServerEnvironment.ts
@@ -243,6 +243,7 @@ export const make = Effect.gen(function* () {
       threadSnooze: true,
       threadForceStop: true,
       environmentThemes: true,
+      plugins: true,
       usageLimitSources: true,
       providerWorkspaceSnapshotsOnDemand: true,
       usagePriceOverrides: true,
diff --git a/apps/server/src/environmentTheme.test.ts b/apps/server/src/environmentTheme.test.ts
index e6b2e1bc67921..4ab2a66767c5c 100644
--- a/apps/server/src/environmentTheme.test.ts
+++ b/apps/server/src/environmentTheme.test.ts
@@ -90,6 +90,63 @@ it.layer(NodeServices.layer)("environment theme", (it) => {
     ),
   );
 
+  it.effect("adds plugin themes after the environment's own, which win on the same id", () =>
+    withEnvironmentThemes(
+      { "nightfall.json": encodeThemeFile(NIGHTFALL_THEME) },
+      Effect.gen(function* () {
+        const environmentTheme = yield* EnvironmentTheme.EnvironmentThemeService;
+        const fs = yield* FileSystem.FileSystem;
+        const path = yield* Path.Path;
+        const pluginThemes = yield* fs.makeTempDirectoryScoped({ prefix: "t3code-plugin-themes-" });
+        yield* fs.writeFileString(
+          path.join(pluginThemes, "nightfall.json"),
+          encodeThemeFile({ ...NIGHTFALL_THEME, name: "Plugin Nightfall" }),
+        );
+        yield* fs.writeFileString(
+          path.join(pluginThemes, "shared-light.json"),
+          encodeThemeFile(SHARED_THEME),
+        );
+
+        yield* environmentTheme.setPluginThemeDirectories([pluginThemes]);
+        // Marked, so clients show a plugin's themes only where they load its UI.
+        assert.deepEqual(
+          (yield* currentThemes).map((theme) => [theme.id, theme.name, theme.fromPlugin]),
+          [
+            ["nightfall", "Nightfall", undefined],
+            ["shared-light", "Shared Light", true],
+          ],
+        );
+
+        // The same folders read again, so a plugin restarted with edited files reaches windows.
+        const seen = yield* Queue.unbounded<ReadonlyArray<{ readonly name: string }>>();
+        yield* Stream.runForEach(environmentTheme.streamChanges, (themes) =>
+          Queue.offer(seen, themes),
+        ).pipe(Effect.forkScoped);
+        yield* Queue.take(seen);
+        yield* fs.writeFileString(
+          path.join(pluginThemes, "shared-light.json"),
+          encodeThemeFile({ ...SHARED_THEME, name: "Shared Light Edited" }),
+        );
+        // Only setting the folders reads them, so a client connecting doesn't read every plugin's.
+        assert.deepEqual(
+          (yield* currentThemes).map((theme) => theme.name),
+          ["Nightfall", "Shared Light"],
+        );
+        yield* environmentTheme.setPluginThemeDirectories([pluginThemes]);
+        assert.deepEqual(
+          (yield* Queue.take(seen)).map((theme) => theme.name),
+          ["Nightfall", "Shared Light Edited"],
+        );
+
+        yield* environmentTheme.setPluginThemeDirectories([]);
+        assert.deepEqual(
+          (yield* currentThemes).map((theme) => theme.id),
+          ["nightfall"],
+        );
+      }),
+    ),
+  );
+
   it.effect("never replays a set older than the snapshot it started from", () =>
     withEnvironmentThemes(
       { "nightfall.json": encodeThemeFile(NIGHTFALL_THEME) },
@@ -158,6 +215,28 @@ it.layer(NodeServices.layer)("environment theme", (it) => {
     ),
   );
 
+  it.effect.skipIf(!symlinksSupported)("ignores a plugin's themes folder linked out of it", () =>
+    withEnvironmentThemes(
+      {},
+      Effect.gen(function* () {
+        const environmentTheme = yield* EnvironmentTheme.EnvironmentThemeService;
+        const fs = yield* FileSystem.FileSystem;
+        const path = yield* Path.Path;
+        const base = yield* fs.makeTempDirectoryScoped({ prefix: "t3code-plugin-themes-" });
+        const outside = path.join(base, "outside");
+        yield* fs.makeDirectory(outside);
+        yield* fs.writeFileString(
+          path.join(outside, "nightfall.json"),
+          encodeThemeFile(NIGHTFALL_THEME),
+        );
+        yield* fs.makeDirectory(path.join(base, "plugin"));
+        yield* fs.symlink(outside, path.join(base, "plugin", "themes"));
+        yield* environmentTheme.setPluginThemeDirectories([path.join(base, "plugin", "themes")]);
+        assert.deepEqual(yield* currentThemes, []);
+      }),
+    ),
+  );
+
   it.effect("does not charge skipped files against the total size limit", () =>
     withEnvironmentThemes(
       {
diff --git a/apps/server/src/environmentTheme.ts b/apps/server/src/environmentTheme.ts
index f0fb44b2bfda7..c47943bbe4671 100644
--- a/apps/server/src/environmentTheme.ts
+++ b/apps/server/src/environmentTheme.ts
@@ -17,6 +17,8 @@ import * as Equal from "effect/Equal";
 import * as Exit from "effect/Exit";
 import * as FileSystem from "effect/FileSystem";
 import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
 import * as PubSub from "effect/PubSub";
 import * as Ref from "effect/Ref";
 import * as Schema from "effect/Schema";
@@ -50,6 +52,14 @@ export class EnvironmentThemeService extends Context.Service<
 
     /** Subscribes before reading to retain changes during connection. */
     readonly streamChanges: Stream.Stream<ReadonlyArray<EnvironmentTheme>>;
+
+    /**
+     * Theme folders of active plugins, each `<plugin folder>/themes`, read after the environment's
+     * own folder; one linked out of its plugin folder is skipped. The first theme with an id wins,
+     * so a plugin cannot replace a theme the user published. Each call reads the folders, so a
+     * plugin that restarts with edited files publishes them, and nothing else reads them again.
+     */
+    readonly setPluginThemeDirectories: (directories: ReadonlyArray<string>) => Effect.Effect<void>;
   }
 >()("t3/environmentTheme/EnvironmentThemeService") {}
 
@@ -155,32 +165,58 @@ export const readPublishedThemes = Effect.fn(function* (themesDir: string) {
 const make = Effect.gen(function* () {
   const { environmentThemesDir } = yield* ServerConfig.ServerConfig;
   const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  // Untraced: it runs for each plugin each time the folders are set.
+  const insideItsPlugin = Effect.fnUntraced(function* (directory: string) {
+    const real = yield* fs.realPath(directory).pipe(Effect.option);
+    const root = yield* fs.realPath(path.dirname(directory)).pipe(Effect.option);
+    return (
+      Option.isSome(real) &&
+      Option.isSome(root) &&
+      real.value.startsWith(`${root.value}${path.sep}`)
+    );
+  });
   // Sequence numbers let subscribers drop queued events older than their initial snapshot.
   const changes = yield* PubSub.sliding<PublishedThemes>(1);
   const published = yield* Ref.make<PublishedThemes>({ seq: 0, themes: [] });
+  const pluginThemes = yield* Ref.make<ReadonlyArray<EnvironmentTheme>>([]);
   // Serialize read/compare/publish so slow older reads cannot publish with newer sequence numbers.
   const refreshSemaphore = yield* Semaphore.make(1);
   const watcherScope = yield* Scope.make("sequential");
   yield* Effect.addFinalizer(() => Scope.close(watcherScope, Exit.void));
 
-  const refresh = refreshSemaphore.withPermits(1)(
-    Effect.gen(function* () {
-      const themes = yield* readPublishedThemes(environmentThemesDir).pipe(
-        Effect.provideService(FileSystem.FileSystem, fs),
-      );
-      // Compare the whole value so new fields cannot silently miss republishes.
-      const [changed, next] = yield* Ref.modify(
-        published,
-        (previous): readonly [readonly [boolean, PublishedThemes], PublishedThemes] => {
-          if (Equal.equals(previous.themes, themes)) return [[false, previous], previous];
-          const updated: PublishedThemes = { seq: previous.seq + 1, themes };
-          return [[true, updated], updated];
-        },
-      );
-      if (changed) yield* PubSub.publish(changes, next).pipe(Effect.asVoid);
-      return next;
-    }),
-  );
+  const readThemes = (directory: string) =>
+    readPublishedThemes(directory).pipe(Effect.provideService(FileSystem.FileSystem, fs));
+  const readPluginThemes = Effect.fnUntraced(function* (directories: ReadonlyArray<string>) {
+    const themes: Array<EnvironmentTheme> = [];
+    for (const directory of directories) {
+      if (!(yield* insideItsPlugin(directory))) continue;
+      for (const theme of yield* readThemes(directory)) themes.push({ ...theme, fromPlugin: true });
+    }
+    return themes;
+  });
+
+  const publishUnlocked = Effect.gen(function* () {
+    const themes = yield* readThemes(environmentThemesDir);
+    const ids = new Set(themes.map((theme) => theme.id));
+    for (const theme of yield* Ref.get(pluginThemes)) {
+      if (ids.has(theme.id)) continue;
+      ids.add(theme.id);
+      themes.push(theme);
+    }
+    // Compare the whole value so new fields cannot silently miss republishes.
+    const [changed, next] = yield* Ref.modify(
+      published,
+      (previous): readonly [readonly [boolean, PublishedThemes], PublishedThemes] => {
+        if (Equal.equals(previous.themes, themes)) return [[false, previous], previous];
+        const updated: PublishedThemes = { seq: previous.seq + 1, themes };
+        return [[true, updated], updated];
+      },
+    );
+    if (changed) yield* PubSub.publish(changes, next).pipe(Effect.asVoid);
+    return next;
+  });
+  const refresh = refreshSemaphore.withPermits(1)(publishUnlocked);
 
   yield* fs
     .makeDirectory(environmentThemesDir, { recursive: true })
@@ -198,6 +234,16 @@ const make = Effect.gen(function* () {
 
   return {
     current: Effect.map(refresh, (state) => state.themes),
+    setPluginThemeDirectories: Effect.fn("EnvironmentThemeService.setPluginThemeDirectories")(
+      function* (directories) {
+        yield* refreshSemaphore.withPermits(1)(
+          readPluginThemes(directories).pipe(
+            Effect.flatMap((themes) => Ref.set(pluginThemes, themes)),
+            Effect.andThen(publishUnlocked),
+          ),
+        );
+      },
+    ),
     get streamChanges() {
       return Stream.unwrap(
         Effect.gen(function* () {
diff --git a/apps/server/src/http.test.ts b/apps/server/src/http.test.ts
index 5f7df20c738c8..8138850282bfb 100644
--- a/apps/server/src/http.test.ts
+++ b/apps/server/src/http.test.ts
@@ -18,6 +18,7 @@ import { HttpClient, HttpClientRequest, HttpRouter, HttpServerResponse } from "e
 import { ASSET_ROUTE_PREFIX } from "./assets/AssetAccess.ts";
 import { ATTACHMENT_UPLOAD_ROUTE_PREFIX } from "./assets/AttachmentUpload.ts";
 import { openMediaFile } from "./assets/MediaFile.ts";
+import { PLUGIN_UPLOAD_ROUTE_PREFIX } from "./plugins/pluginUploads.ts";
 
 import {
   injectMcpAppCsp,
@@ -164,6 +165,7 @@ describe("untraced requests", () => {
             `${ATTACHMENT_UPLOAD_ROUTE_PREFIX}/*`,
             HttpServerResponse.empty(),
           );
+          yield* router.add("POST", `${PLUGIN_UPLOAD_ROUTE_PREFIX}/*`, HttpServerResponse.empty());
           yield* router.add("GET", "/api/environment", HttpServerResponse.empty());
         }),
       );
@@ -182,6 +184,7 @@ describe("untraced requests", () => {
         HttpClientRequest.get(`${ASSET_ROUTE_PREFIX}/payload.signature/image.png?v=1`),
         HttpClientRequest.post(`${ATTACHMENT_UPLOAD_ROUTE_PREFIX}/payload.signature`),
         HttpClientRequest.post(`${ATTACHMENT_UPLOAD_ROUTE_PREFIX}/payload.signature?v=1`),
+        HttpClientRequest.post(`${PLUGIN_UPLOAD_ROUTE_PREFIX}/payload.signature`),
         HttpClientRequest.head(`${ASSET_ROUTE_PREFIX}/payload.signature/image.png`),
       ]) {
         expect((yield* client.execute(request)).status).toBe(204);
diff --git a/apps/server/src/http.ts b/apps/server/src/http.ts
index e792a233c6f06..b1fe75f983754 100644
--- a/apps/server/src/http.ts
+++ b/apps/server/src/http.ts
@@ -48,6 +48,7 @@ import {
   failEnvironmentInternal,
 } from "./auth/http.ts";
 import * as ServerEnvironment from "./environment/ServerEnvironment.ts";
+import { PLUGIN_UPLOAD_ROUTE_PREFIX } from "./plugins/pluginUploads.ts";
 import { WEBHOOK_ROUTE_PREFIX } from "./scheduledTasks/ScheduledTaskService.ts";
 import {
   browserApiCorsAllowedHeaders,
@@ -288,7 +289,7 @@ function resolveDevRedirectUrl(devUrl: URL, requestUrl: URL): string {
   return redirectUrl.toString();
 }
 
-const authenticateRawRouteWithScope =
+export const authenticateRawRouteWithScope =
   /* Request instrumentation already owns the span; keep this helper in that context. */
   Effect.fnUntraced(function* (
     scope: typeof AuthOrchestrationReadScope | typeof AuthOrchestrationOperateScope,
@@ -396,7 +397,8 @@ const layerUntracedRequests = Layer.succeed(HttpMiddleware.TracerDisabledWhen)((
     UNTRACED_REQUEST_PATHS.has(path) ||
     path.startsWith(`${WEBHOOK_ROUTE_PREFIX}/`) ||
     path.startsWith(`${ASSET_ROUTE_PREFIX}/`) ||
-    path.startsWith(`${ATTACHMENT_UPLOAD_ROUTE_PREFIX}/`)
+    path.startsWith(`${ATTACHMENT_UPLOAD_ROUTE_PREFIX}/`) ||
+    path.startsWith(`${PLUGIN_UPLOAD_ROUTE_PREFIX}/`)
   );
 });
 
diff --git a/apps/server/src/mcp/McpHttpServer.ts b/apps/server/src/mcp/McpHttpServer.ts
index e684316f48d9a..39a67768013cd 100644
--- a/apps/server/src/mcp/McpHttpServer.ts
+++ b/apps/server/src/mcp/McpHttpServer.ts
@@ -31,6 +31,7 @@ import * as HtmlRender from "../htmlRender/HtmlRender.ts";
 import * as ThreadCommandExecutor from "../orchestration-v2/ThreadCommandExecutor.ts";
 import * as ThreadManagementService from "../orchestration-v2/ThreadManagementService.ts";
 import * as ProviderRegistry from "../provider/ProviderRegistry.ts";
+import * as PluginMcpTools from "../plugins/PluginMcpTools.ts";
 import * as AnalyticsService from "../telemetry/AnalyticsService.ts";
 import {
   type AgentThread,
@@ -1140,6 +1141,59 @@ export const layerDeviceToolkit = Layer.mergeAll(
   layerDeviceScreenshotRegistration,
 );
 
+const isJsonObject = Schema.is(Schema.JsonObject);
+
+const pluginToolResult = (output: Schema.Json) =>
+  new McpSchema.CallToolResult({
+    isError: false,
+    ...(isJsonObject(output) ? { structuredContent: output } : {}),
+    content: [{ type: "text", text: JSON.stringify(output) }],
+  });
+
+const pluginToolFailure = (error: { readonly message: string }) =>
+  new McpSchema.CallToolResult({ isError: true, content: [{ type: "text", text: error.message }] });
+
+/**
+ * Plugins add tools while the server runs, so they register here directly instead of through
+ * a toolkit. Kept out of `layerTools`: with no plugin installed there are none to measure.
+ */
+export const layerPluginTools = Layer.effectDiscard(
+  Effect.gen(function* () {
+    const server = yield* McpServer.McpServer;
+    const plugins = yield* PluginMcpTools.PluginMcpTools;
+    const threads = yield* ThreadManagementService.ThreadManagementService;
+    yield* plugins.attach((entry) => {
+      const call = McpToolAccess.dynamic(entry.access, (input: Schema.JsonObject) =>
+        McpInvocationContext.McpInvocationContext.pipe(
+          Effect.flatMap((scope) =>
+            entry.call(input, { threadId: scope.thread?.threadId ?? null }),
+          ),
+        ),
+      );
+      return server.addTool({
+        tool: new McpSchema.Tool({
+          name: entry.name,
+          description: entry.description,
+          inputSchema: entry.inputSchema,
+          annotations: { readOnlyHint: entry.access === "read" },
+        }),
+        annotations: Context.make(McpSchema.EnabledWhen, () => plugins.isOffered(entry.name)),
+        handle: (payload) =>
+          Effect.withFiber((fiber) =>
+            call(isJsonObject(payload) ? payload : {}).pipe(
+              Effect.provideService(
+                McpInvocationContext.McpInvocationContext,
+                Context.getUnsafe(fiber.context, McpInvocationContext.McpInvocationContext),
+              ),
+              Effect.provideService(ThreadManagementService.ThreadManagementService, threads),
+              Effect.match({ onFailure: pluginToolFailure, onSuccess: pluginToolResult }),
+            ),
+          ),
+      });
+    });
+  }),
+).pipe(Layer.provide(McpServer.McpServer.layer));
+
 export const layerMcpTransport = McpServer.layerHttp({
   name: "T3 Code",
   version: packageJson.version,
@@ -1148,7 +1202,7 @@ export const layerMcpTransport = McpServer.layerHttp({
   allowSessionTermination: true,
 }).pipe(Layer.provide(layerMcpAuthMiddleware));
 
-/** Every tool the T3 MCP server advertises. AgentContextBudget.test.ts measures this set. */
+/** Every built-in tool the T3 MCP server advertises. AgentContextBudget.test.ts measures this set. */
 export const layerTools = Layer.mergeAll(
   layerPreviewToolkit,
   layerOrchestratorToolkit,
@@ -1163,4 +1217,6 @@ export const layerTools = Layer.mergeAll(
   layerHtmlToolkit,
 );
 
-export const layer = layerTools.pipe(Layer.provideMerge(layerMcpTransport));
+export const layer = Layer.merge(layerTools, layerPluginTools).pipe(
+  Layer.provideMerge(layerMcpTransport),
+);
diff --git a/apps/server/src/mcp/McpToolAccess.ts b/apps/server/src/mcp/McpToolAccess.ts
index b82d9bb5ae59c..2837497e8a819 100644
--- a/apps/server/src/mcp/McpToolAccess.ts
+++ b/apps/server/src/mcp/McpToolAccess.ts
@@ -173,6 +173,41 @@ export const writesWithCapability = <P, A, E, R>(handle: (params: P) => Effect.E
     () => writingCaller,
   );
 
+const pluginToolFullAccessRequired =
+  "Plugin tools that change things need this thread in Full access and out of Plan mode, or an outside agent approved with Full access. Ask the user to switch, then call again.";
+
+/**
+ * For tools whose access is data, registered while the server runs (plugin tools): `read`
+ * checks like `reads`; `write` like `writesEnvironment`, because a plugin tool can do anything
+ * the plugin can, and its handler never sees the caller's limits. Returns the checked handler.
+ */
+export const dynamic = <P, A, E, R>(
+  access: "read" | "write",
+  handle: (params: P) => Effect.Effect<A, E, R>,
+) => {
+  const fullAccess = (caller: Caller) => assertFullAccess(caller, pluginToolFullAccessRequired);
+  const declaration: Declaration<
+    (params: P) => Effect.Effect<A, E | OrchestratorMcpFailure, R | WritingServices>
+  > =
+    access === "read"
+      ? reads(handle)
+      : declare(
+          (params: P) =>
+            orchestratingCaller.pipe(
+              Effect.tap((caller) =>
+                assertNotLinked(caller, "use plugin tools that change things"),
+              ),
+              Effect.tap(fullAccess),
+              Effect.flatMap(() => handle(params)),
+            ),
+          // Only the handler leaves `dynamic`, and remote checks are read where toolkits route calls.
+          undefined,
+        );
+  return checkedHandler(declaration);
+};
+
+type WritingServices = Effect.Services<typeof writingCaller>;
+
 export const writesThreads = <P, A, E, R>(
   threads: (params: P) => ReadonlyArray<ThreadId | undefined>,
   handle: (params: P) => Effect.Effect<A, E, R>,
diff --git a/apps/server/src/observability/RpcInstrumentation.ts b/apps/server/src/observability/RpcInstrumentation.ts
index 1e3388e4136ad..ef4ee80cccad2 100644
--- a/apps/server/src/observability/RpcInstrumentation.ts
+++ b/apps/server/src/observability/RpcInstrumentation.ts
@@ -87,6 +87,17 @@ const RPC_AGGREGATES = {
   [WS_METHODS.serverRefreshUsageRates]: "server",
   [WS_METHODS.serverSignalProcess]: "server",
   [WS_METHODS.serverReportClientActivity]: "server",
+  [WS_METHODS.pluginsList]: "plugins",
+  [WS_METHODS.pluginsSubscribeStates]: "plugins",
+  [WS_METHODS.pluginsSetEnabled]: "plugins",
+  [WS_METHODS.pluginsReload]: "plugins",
+  [WS_METHODS.pluginsCreateUploadUrl]: "plugins",
+  [WS_METHODS.pluginsRescan]: "plugins",
+  [WS_METHODS.pluginsUninstall]: "plugins",
+  [WS_METHODS.pluginsSettingsGet]: "plugins",
+  [WS_METHODS.pluginsSettingsUpdate]: "plugins",
+  [WS_METHODS.pluginsInvoke]: "plugins",
+  [WS_METHODS.pluginsSubscribe]: "plugins",
   [WS_METHODS.scheduledTasksSubscribe]: "scheduledTasks",
   [WS_METHODS.scheduledTasksUpsert]: "scheduledTasks",
   [WS_METHODS.scheduledTasksSetEnabled]: "scheduledTasks",
diff --git a/apps/server/src/plugins/PluginApi.ts b/apps/server/src/plugins/PluginApi.ts
new file mode 100644
index 0000000000000..c44bf13f59f93
--- /dev/null
+++ b/apps/server/src/plugins/PluginApi.ts
@@ -0,0 +1,142 @@
+import { PluginRpcName, type PluginId } from "@t3tools/contracts";
+import type { PluginApi, PluginRpcAccess, PluginRpcHandler } from "@t3tools/plugin-sdk/server";
+import type * as Context from "effect/Context";
+import * as Effect from "effect/Effect";
+import type * as Cause from "effect/Cause";
+import * as Option from "effect/Option";
+import * as Queue from "effect/Queue";
+import * as Schema from "effect/Schema";
+
+import { makeFacadeContext, pluginCodeScope, refused } from "./api/facade.ts";
+import { makeMcpApi } from "./api/mcp.ts";
+import type * as PluginMcpTools from "./PluginMcpTools.ts";
+import type * as PluginSettingsStore from "./PluginSettingsStore.ts";
+import type * as PluginStorage from "./PluginStorage.ts";
+
+const isJson = Schema.is(Schema.Json);
+const isPluginRpcName = Schema.is(PluginRpcName);
+const isPluginRpcAccess = Schema.is(Schema.Literals(["read", "write"]));
+
+/** Everything one activation registered. The host routes calls through it and tears it down. */
+export interface PluginActivation {
+  readonly methods: Map<
+    string,
+    { readonly handler: PluginRpcHandler; readonly access: PluginRpcAccess }
+  >;
+  readonly cleanups: Array<() => void | Promise<void>>;
+  /** Aborted when deactivation starts; handler signals and iterators follow it. */
+  readonly controller: AbortController;
+  /** Aborted once the cleanups have run; API calls are refused from then on. */
+  readonly ended: AbortController;
+  /**
+   * Each subscriber's buffer, by channel, so a busy channel or a slow subscriber drops only its
+   * own values. The host ends them when `ended` aborts.
+   */
+  readonly channels: Map<string, Set<Queue.Queue<Schema.Json, Cause.Done>>>;
+}
+
+export const makePluginActivation = (): PluginActivation => ({
+  methods: new Map(),
+  cleanups: [],
+  controller: new AbortController(),
+  ended: new AbortController(),
+  channels: new Map(),
+});
+
+const assertActive = (activation: PluginActivation) => {
+  if (activation.controller.signal.aborted) {
+    throw new Error("This plugin activation has ended.");
+  }
+};
+
+/** The host services the facade reaches. The host builds this once and shares it. */
+export interface PluginApiServices {
+  readonly settings: PluginSettingsStore.PluginSettingsStore["Service"];
+  readonly storage: PluginStorage.PluginStorage["Service"];
+  readonly mcpTools: PluginMcpTools.PluginMcpTools["Service"];
+}
+
+/**
+ * Builds the object a plugin's `activate` receives. Effect stays on this side: every call runs
+ * with the host's services and settles as a plain Promise that rejects with an `Error`.
+ */
+export const makePluginApi = (input: {
+  readonly id: PluginId;
+  readonly rootDir: string;
+  readonly settingsSchema: Schema.JsonObject | undefined;
+  readonly activation: PluginActivation;
+  readonly context: Context.Context<never>;
+  readonly services: PluginApiServices;
+}): PluginApi => {
+  const { id, activation, context, services } = input;
+  const facade = makeFacadeContext({ pluginId: id, activation, context });
+  const { call } = facade;
+  const log =
+    (level: "Debug" | "Info" | "Warn" | "Error") => (message: string, fields?: Schema.JsonObject) =>
+      facade.fork(
+        Effect.logWithLevel(level)(message, fields ?? {}).pipe(
+          Effect.annotateLogs({ pluginId: id }),
+        ),
+      );
+
+  const storage: PluginApi["storage"] = {
+    get: (key) => call(services.storage.get(id, key).pipe(Effect.map(Option.getOrUndefined))),
+    set: (key, value) => {
+      if (!isJson(value)) return refused(new TypeError("Storage values must be JSON."));
+      return call(services.storage.set(id, key, value));
+    },
+    delete: (key) => call(services.storage.remove(id, key)),
+    list: (prefix) => call(services.storage.list(id, prefix)),
+  };
+
+  return {
+    version: 1,
+    id,
+    rootDir: input.rootDir,
+    log: { debug: log("Debug"), info: log("Info"), warn: log("Warn"), error: log("Error") },
+    settings: {
+      get: () => call(services.settings.get(id, input.settingsSchema)),
+      changes: () => facade.iterate(services.settings.changes(id)),
+    },
+    storage,
+    rpc: {
+      register: (method, handler, options) => {
+        assertActive(activation);
+        if (!isPluginRpcName(method))
+          throw new TypeError(`"${method}" is not a valid method name.`);
+        // Plugins are untyped JavaScript, and a misspelled access level must not open a write.
+        if (!isPluginRpcAccess(options.access)) {
+          throw new TypeError(`Method "${method}" needs access "read" or "write".`);
+        }
+        if (activation.methods.has(method)) {
+          throw new Error(`Method "${method}" is already registered.`);
+        }
+        activation.methods.set(method, { handler, access: options.access });
+      },
+      publish: (channel, value) => {
+        assertActive(activation);
+        if (!isPluginRpcName(channel)) {
+          throw new TypeError(`"${channel}" is not a valid channel name.`);
+        }
+        if (!isJson(value)) throw new TypeError("Published values must be JSON.");
+        // Waking a subscriber schedules T3's work, which must not run in the plugin's scope.
+        pluginCodeScope.exit(() => {
+          for (const queue of activation.channels.get(channel) ?? []) {
+            Queue.offerUnsafe(queue, value);
+          }
+        });
+      },
+    },
+    // Something created after deactivation has nothing left to wait for, so it cleans up now.
+    onDeactivate: (cleanup) => {
+      if (activation.controller.signal.aborted) {
+        void Promise.resolve()
+          .then(cleanup)
+          .catch(() => undefined);
+        return;
+      }
+      activation.cleanups.push(cleanup);
+    },
+    mcp: makeMcpApi(facade, services),
+  };
+};
diff --git a/apps/server/src/plugins/PluginHost.test.ts b/apps/server/src/plugins/PluginHost.test.ts
new file mode 100644
index 0000000000000..489a7c9aec8d7
--- /dev/null
+++ b/apps/server/src/plugins/PluginHost.test.ts
@@ -0,0 +1,1130 @@
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { assert, it } from "@effect/vitest";
+import {
+  applyPluginStatesEvent,
+  type AuthEnvironmentScope,
+  AuthOrchestrationOperateScope,
+  AuthOrchestrationReadScope,
+  AuthSettingsWriteScope,
+  PluginId,
+  type PluginStatesEvent,
+  WS_METHODS,
+} from "@t3tools/contracts";
+import * as Deferred from "effect/Deferred";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Stream from "effect/Stream";
+import * as TestClock from "effect/testing/TestClock";
+
+import packageJson from "../../package.json" with { type: "json" };
+import * as ServerConfig from "../config.ts";
+import * as EnvironmentTheme from "../environmentTheme.ts";
+import * as PluginHost from "./PluginHost.ts";
+import {
+  fixturesDir,
+  layerConfig,
+  layerFileSystemWith,
+  layerHost,
+  stateOf,
+  waitForStatuses,
+  writeFile,
+  writeInstalledPlugin,
+  writePluginsConfig,
+} from "./pluginHostTestHarness.ts";
+import * as PluginInstaller from "./PluginInstaller.ts";
+import { makePluginRpcHandlers } from "./pluginRpcHandlers.ts";
+import * as PluginStorage from "./PluginStorage.ts";
+import * as PluginUploads from "./pluginUploads.ts";
+
+const hello = PluginId.make("hello-plugin");
+const broken = PluginId.make("broken-plugin");
+const operate = [AuthOrchestrationReadScope, AuthOrchestrationOperateScope] as const;
+
+const manifestJson = (
+  id: string,
+  options: {
+    readonly name?: string;
+    readonly version?: string;
+    readonly engines?: string;
+    readonly settingsSchema?: object;
+  } = {},
+) =>
+  JSON.stringify({
+    id,
+    name: options.name ?? id,
+    version: options.version ?? "0.1.0",
+    engines: { t3: options.engines ?? ">=0.1.0" },
+    settingsSchema: options.settingsSchema,
+  });
+
+const enableHello = writePluginsConfig({
+  enabled: { [hello]: true },
+  devPaths: [`${fixturesDir}hello-plugin`],
+});
+
+/** A `linked` plugin in a checkout folder, which the plugins folder holds a symlink to. */
+const linkPluginFolder = Effect.fn(function* (entries: {
+  readonly server?: string;
+  readonly web?: string;
+}) {
+  const { stateDir } = yield* ServerConfig.ServerConfig;
+  const fs = yield* FileSystem.FileSystem;
+  const realDir = `${stateDir}/checkout/linked`;
+  yield* writeFile(
+    `${realDir}/t3-plugin.json`,
+    JSON.stringify({
+      id: "linked",
+      name: "Linked",
+      version: "0.1.0",
+      engines: { t3: ">=0.1.0" },
+      ...entries,
+    }),
+  );
+  yield* fs.makeDirectory(`${stateDir}/plugins`, { recursive: true });
+  yield* fs.symlink(realDir, `${stateDir}/plugins/linked`);
+  return realDir;
+});
+
+const leaky = PluginId.make("leaky");
+// Fails outside a call: in a timer a method sets, or in a read a method never awaits.
+const leakyServer = `module.exports = { activate(api) {
+  api.rpc.register("rejectLater", () => { setTimeout(() => { Promise.reject(new Error("rejected in a timer")); }, 0); }, { access: "read" });
+  api.rpc.register("readMissing", () => { void require("node:fs/promises").readFile("/t3-plugin-test-missing-file"); }, { access: "read" });
+} };`;
+
+/** The next failure outside a call that the plugin's row shows. */
+const nextServerFailure = (host: PluginHost.PluginHost["Service"], pluginId: PluginId) =>
+  host.streamStates.pipe(
+    Stream.map((states) => stateOf(states, pluginId)?.serverFailure),
+    Stream.filter((failure) => failure !== undefined),
+    Stream.runHead,
+    Effect.map(Option.getOrThrow),
+  );
+
+it.layer(NodeServices.layer)("PluginHost", (it) => {
+  it.effect("activates an enabled plugin and serves its methods with the caller's access", () =>
+    Effect.gen(function* () {
+      yield* enableHello;
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const states = yield* waitForStatuses(host, { [hello]: "active" });
+        assert.include(stateOf(states, hello), { source: "dev", hasServer: true, enabled: true });
+
+        const ping = (scopes: ReadonlyArray<AuthEnvironmentScope>) =>
+          host.invoke({ pluginId: hello, method: "ping", input: "a", scopes });
+        assert.deepStrictEqual(yield* ping(operate), {
+          pong: "a",
+          greeting: "hello",
+          access: "write",
+        });
+        // A read method tells a session that can only read from one that can also write.
+        assert.deepStrictEqual(yield* ping([AuthOrchestrationReadScope]), {
+          pong: "a",
+          greeting: "hello",
+          access: "read",
+        });
+
+        const count = (scopes: ReadonlyArray<AuthEnvironmentScope>) =>
+          host.invoke({ pluginId: hello, method: "count", input: undefined, scopes });
+        const counted = yield* host
+          .subscribe({ pluginId: hello, channel: "counted" })
+          .pipe(Stream.runHead, Effect.forkChild({ startImmediately: true }));
+        assert.strictEqual(yield* count(operate), 1);
+        assert.deepStrictEqual(yield* Fiber.join(counted), Option.some(1));
+        const denied = yield* count([AuthOrchestrationReadScope]).pipe(Effect.flip);
+        assert.strictEqual(denied._tag, "PluginAccessDeniedError");
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("hands an active plugin its saved settings and tells it when they change", () =>
+    Effect.gen(function* () {
+      yield* enableHello;
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const states = yield* waitForStatuses(host, { [hello]: "active" });
+        assert.include(stateOf(states, hello), { hasSettings: true });
+
+        const changed = yield* host
+          .subscribe({ pluginId: hello, channel: "settings" })
+          .pipe(Stream.runHead, Effect.forkChild({ startImmediately: true }));
+        yield* host.updateSettings(hello, { greeting: "hey" });
+        assert.deepStrictEqual(yield* Fiber.join(changed), Option.some({ greeting: "hey" }));
+        assert.deepInclude(
+          yield* host.invoke({ pluginId: hello, method: "ping", input: "b", scopes: operate }),
+          { greeting: "hey" },
+        );
+        // The settings form's schema comes with the settings, not on every row.
+        const { settings, settingsSchema } = yield* host.getSettings(hello);
+        assert.deepStrictEqual(settings, { greeting: "hey" });
+        assert.include(settingsSchema, { additionalProperties: false });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("marks a plugin that throws in activate as failed and keeps the others running", () =>
+    Effect.gen(function* () {
+      yield* writePluginsConfig({
+        enabled: { [hello]: true, [broken]: true },
+        devPaths: [`${fixturesDir}broken-plugin`, `${fixturesDir}hello-plugin`],
+      });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const states = yield* waitForStatuses(host, { [broken]: "failed", [hello]: "active" });
+        assert.deepStrictEqual(stateOf(states, broken)?.failure, {
+          stage: "activate",
+          message: "broken-plugin refuses to start",
+        });
+        const missing = yield* host
+          .invoke({ pluginId: broken, method: "ping", input: undefined, scopes: operate })
+          .pipe(Effect.flip);
+        assert.strictEqual(missing._tag, "PluginNotActiveError");
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("fails a plugin with server code below Node 24 and runs one without", () =>
+    Effect.gen(function* () {
+      const styles = PluginId.make("styles-plugin");
+      yield* writePluginsConfig({
+        enabled: { [hello]: true, [styles]: true },
+        devPaths: [`${fixturesDir}hello-plugin`, `${fixturesDir}styles-plugin`],
+      });
+      // As `npx t3` runs on Node 22.
+      yield* Effect.acquireRelease(
+        Effect.sync(() => {
+          const running = process.versions.node;
+          Object.defineProperty(process.versions, "node", { value: "22.16.0" });
+          return running;
+        }),
+        (running) =>
+          Effect.sync(() => Object.defineProperty(process.versions, "node", { value: running })),
+      );
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const states = yield* waitForStatuses(host, { [hello]: "failed", [styles]: "active" });
+        assert.deepStrictEqual(stateOf(states, hello)?.failure, {
+          stage: "compatibility",
+          message: "Needs Node 24 or later for its server code; this server runs Node 22.16.0.",
+        });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.scoped, Effect.provide(layerConfig())),
+  );
+
+  it.effect("runs cleanup on disable and stops serving the plugin", () =>
+    Effect.gen(function* () {
+      yield* writePluginsConfig({
+        enabled: { [hello]: true },
+        devPaths: [`${fixturesDir}hello-plugin`],
+      });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const storage = yield* PluginStorage.PluginStorage;
+        yield* waitForStatuses(host, { [hello]: "active" });
+
+        const disabled = yield* host.setEnabled(hello, false);
+        assert.include(disabled, { status: "disabled", enabled: false });
+        assert.deepStrictEqual(yield* storage.get(hello, "deactivated"), Option.some(true));
+        const error = yield* host
+          .invoke({ pluginId: hello, method: "ping", input: undefined, scopes: operate })
+          .pipe(Effect.flip);
+        assert.strictEqual(error._tag, "PluginNotActiveError");
+
+        const { stateDir } = yield* ServerConfig.ServerConfig;
+        const saved = yield* FileSystem.FileSystem.use((fs) =>
+          fs.readFileString(`${stateDir}/plugins.json`),
+        );
+        assert.deepStrictEqual(JSON.parse(saved).enabled, { [hello]: false });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("reload picks up a changed manifest and changed code", () =>
+    Effect.gen(function* () {
+      const rootDir = yield* writeInstalledPlugin(
+        "reloading",
+        `module.exports = { activate(api) { api.rpc.register("which", () => "v1", { access: "read" }); } };`,
+      );
+      yield* writePluginsConfig({ enabled: { reloading: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const id = PluginId.make("reloading");
+        yield* waitForStatuses(host, { reloading: "active" });
+        const which = host.invoke({
+          pluginId: id,
+          method: "which",
+          input: undefined,
+          scopes: operate,
+        });
+        assert.strictEqual(yield* which, "v1");
+
+        yield* writeFile(
+          `${rootDir}/t3-plugin.json`,
+          JSON.stringify({
+            id: "reloading",
+            name: "Reloaded",
+            version: "0.2.0",
+            engines: { t3: ">=0.1.0" },
+            server: "./server.cjs",
+          }),
+        );
+        yield* writeFile(
+          `${rootDir}/server.cjs`,
+          `module.exports = { activate(api) { api.rpc.register("which", () => "v2", { access: "read" }); } };`,
+        );
+        const reloaded = yield* host.reload(id);
+        assert.include(reloaded, { status: "active", version: "0.2.0", name: "Reloaded" });
+        assert.strictEqual(yield* which, "v2");
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("fails a plugin that registers a method with an unknown access level", () =>
+    Effect.gen(function* () {
+      const rootDir = yield* writeInstalledPlugin(
+        "typo",
+        `module.exports = { activate(api) { api.rpc.register("go", () => 1, { access: "Write" }); } };`,
+      );
+      yield* writeFile(`${rootDir}/styles/base.css`, "body {}");
+      yield* writePluginsConfig({ enabled: { typo: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const states = yield* waitForStatuses(host, { typo: "failed" });
+        assert.deepStrictEqual(stateOf(states, "typo")?.failure, {
+          stage: "activate",
+          message: 'Method "go" needs access "read" or "write".',
+        });
+        // Nor does it serve its files.
+        const served = yield* host.readWebFile({
+          pluginId: "typo",
+          path: "/styles/base.css",
+          revision: undefined,
+        });
+        assert.isTrue(Option.isNone(served));
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("reload stops a plugin whose folder was removed", () =>
+    Effect.gen(function* () {
+      const stays = yield* writeInstalledPlugin("stays", `module.exports = { activate() {} };`);
+      const goes = yield* writeInstalledPlugin(
+        "goes",
+        `const marker = require("node:path").join(__dirname, "..", "..", "goes-cleaned");
+module.exports = { activate(api) { api.onDeactivate(() => require("node:fs").writeFileSync(marker, "")); } };`,
+      );
+      yield* writePluginsConfig({ enabled: { stays: true, goes: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const fs = yield* FileSystem.FileSystem;
+        yield* waitForStatuses(host, { stays: "active", goes: "active" });
+        yield* fs.remove(goes, { recursive: true });
+
+        yield* host.reload(PluginId.make("stays"));
+
+        assert.isTrue(yield* fs.exists(`${stays}/../../goes-cleaned`));
+        assert.isUndefined(stateOf(yield* host.list, "goes"));
+
+        // A folder copied in later with its id is a plugin the user hasn't seen, so it starts off,
+        // and reloading the gone plugin still lists it.
+        yield* writeInstalledPlugin("goes", `module.exports = { activate() {} };`);
+        const missing = yield* host.reload(PluginId.make("arrives")).pipe(Effect.flip);
+        assert.strictEqual(missing._tag, "PluginNotFoundError");
+        assert.include(stateOf(yield* host.list, "goes"), { status: "disabled", enabled: false });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("reload runs new code from a symlinked plugin folder", () =>
+    Effect.gen(function* () {
+      const realDir = yield* linkPluginFolder({ server: "./server.cjs" });
+      const plugin = (version: string) =>
+        `module.exports = { activate(api) { api.rpc.register("which", () => "${version}", { access: "read" }); } };`;
+      yield* writeFile(`${realDir}/server.cjs`, plugin("v1"));
+      yield* writePluginsConfig({ enabled: { linked: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const id = PluginId.make("linked");
+        const which = host.invoke({
+          pluginId: id,
+          method: "which",
+          input: undefined,
+          scopes: operate,
+        });
+        yield* waitForStatuses(host, { linked: "active" });
+        assert.strictEqual(yield* which, "v1");
+
+        yield* writeFile(`${realDir}/server.cjs`, plugin("v2"));
+        yield* host.reload(id);
+        assert.strictEqual(yield* which, "v2");
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("serves no file of an assets folder linked out of a symlinked plugin folder", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const realDir = yield* linkPluginFolder({ web: "./web.js" });
+      yield* writeFile(`${realDir}/web.js`, "export default {};");
+      yield* writeFile(`${stateDir}/checkout/outside/secret.txt`, "Not the plugin's.");
+      yield* fs.symlink(`${stateDir}/checkout/outside`, `${realDir}/assets`);
+      yield* writePluginsConfig({ enabled: { linked: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { linked: "active" });
+        const served = (path: string) =>
+          host
+            .readWebFile({ pluginId: "linked", path, revision: undefined })
+            .pipe(Effect.map(Option.isSome));
+        assert.isTrue(yield* served("/web.js"));
+        assert.isFalse(yield* served("/assets/secret.txt"));
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("unlinks a plugin loaded from devPaths and leaves its folder", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const folder = `${stateDir}/checkout/linked`;
+      yield* writeFile(`${folder}/t3-plugin.json`, manifestJson("linked"));
+      yield* writePluginsConfig({ enabled: { linked: true }, devPaths: [folder] });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const installer = yield* PluginInstaller.PluginInstaller;
+        yield* waitForStatuses(host, { linked: "active" });
+
+        yield* installer.uninstall(PluginId.make("linked"));
+        // Forgotten, not only stopped: a rescan does not find it again.
+        assert.isUndefined(stateOf((yield* host.rescan).plugins, "linked"));
+        const saved = yield* fs.readFileString(`${stateDir}/plugins.json`);
+        assert.deepStrictEqual(JSON.parse(saved), { enabled: {}, devPaths: [] });
+        assert.isTrue(yield* fs.exists(`${folder}/t3-plugin.json`));
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("refuses a dropped folder that would replace a linked plugin", () =>
+    Effect.gen(function* () {
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const folder = `${stateDir}/checkout/linked`;
+      yield* writeFile(`${folder}/t3-plugin.json`, manifestJson("linked"));
+      yield* writePluginsConfig({ devPaths: [folder] });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const installer = yield* PluginInstaller.PluginInstaller;
+        yield* waitForStatuses(host, { linked: "disabled" });
+        const refused = yield* installer
+          .installFiles([
+            { path: "t3-plugin.json", contents: new TextEncoder().encode(manifestJson("linked")) },
+          ])
+          .pipe(Effect.flip);
+        assert.strictEqual(refused.message, `linked is linked from ${folder}. Unlink it first.`);
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("refuses a later folder with a plugin's id, and removes or unlinks it alone", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const id = PluginId.make("twice");
+      const installed = `${stateDir}/plugins/twice-copy`;
+      const linked = `${stateDir}/checkout/twice`;
+      yield* writeFile(`${stateDir}/plugins/twice/t3-plugin.json`, manifestJson(id));
+      yield* writeFile(`${installed}/t3-plugin.json`, manifestJson(id, { version: "0.2.0" }));
+      yield* writeFile(`${linked}/t3-plugin.json`, manifestJson(id, { version: "0.3.0" }));
+      yield* writePluginsConfig({ enabled: { [id]: true }, devPaths: [linked] });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const installer = yield* PluginInstaller.PluginInstaller;
+        const storage = yield* PluginStorage.PluginStorage;
+        yield* waitForStatuses(host, { [id]: "active" });
+        yield* storage.set(id, "kept", true);
+        const copies = host.list.pipe(
+          Effect.map((states) =>
+            states
+              .filter((state) => state.id === id)
+              .map((state) => [state.version, state.status, state.failure?.message]),
+          ),
+        );
+        const refused =
+          'The installed folder "twice" already has the id twice. Remove or unlink one of them.';
+        assert.deepStrictEqual(yield* copies, [
+          ["0.1.0", "active", undefined],
+          ["0.2.0", "failed", refused],
+          ["0.3.0", "failed", refused],
+        ]);
+
+        yield* installer.uninstall(id, linked);
+        yield* installer.uninstall(id, installed);
+        assert.deepStrictEqual(yield* copies, [["0.1.0", "active", undefined]]);
+        assert.isFalse(yield* fs.exists(installed));
+        assert.isTrue(yield* fs.exists(linked));
+        // The copy in use keeps the id's data.
+        assert.deepStrictEqual(yield* storage.get(id, "kept"), Option.some(true));
+
+        const elsewhere = yield* installer.uninstall(id, `${stateDir}/elsewhere`).pipe(Effect.flip);
+        assert.strictEqual(elsewhere.message, `No copy of twice is in ${stateDir}/elsewhere.`);
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("lists a later folder with a removed plugin's id afresh, turned off", () =>
+    Effect.gen(function* () {
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const id = PluginId.make("twice");
+      yield* writeFile(`${stateDir}/plugins/twice/t3-plugin.json`, manifestJson(id));
+      yield* writeFile(`${stateDir}/plugins/twice-copy/t3-plugin.json`, manifestJson(id));
+      yield* writePluginsConfig({ enabled: { [id]: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const installer = yield* PluginInstaller.PluginInstaller;
+        yield* waitForStatuses(host, { [id]: "active" });
+
+        yield* installer.uninstall(id);
+        const left = (yield* host.list).filter((state) => state.id === id);
+        assert.deepStrictEqual(
+          left.map((state) => [state.folder, state.status, state.enabled, state.failure]),
+          [[`${stateDir}/plugins/twice-copy`, "disabled", false, undefined]],
+        );
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("lists a plugin's rejection in a timer on its row instead of stopping the server", () =>
+    Effect.gen(function* () {
+      yield* writeInstalledPlugin("leaky", leakyServer);
+      yield* writePluginsConfig({ enabled: { leaky: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { leaky: "active" });
+        yield* host.invoke({
+          pluginId: leaky,
+          method: "rejectLater",
+          input: undefined,
+          scopes: operate,
+        });
+        assert.strictEqual(yield* nextServerFailure(host, leaky), "rejected in a timer");
+        assert.include(stateOf(yield* host.list, leaky), { status: "active" });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("lists a failed read a plugin never awaited, though its stack is all Node's", () =>
+    Effect.gen(function* () {
+      yield* writeInstalledPlugin("leaky", leakyServer);
+      yield* writePluginsConfig({ enabled: { leaky: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { leaky: "active" });
+        yield* host.invoke({
+          pluginId: leaky,
+          method: "readMissing",
+          input: undefined,
+          scopes: operate,
+        });
+        assert.include(yield* nextServerFailure(host, leaky), "ENOENT");
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("lists a failure of code a turned-off plugin left running on its row", () =>
+    Effect.gen(function* () {
+      const id = PluginId.make("leftover");
+      yield* writeInstalledPlugin(
+        id,
+        `module.exports = { activate(api) {
+  api.onDeactivate(() => { setTimeout(() => { Promise.reject(new Error("left running")); }, 0); });
+} };`,
+      );
+      yield* writePluginsConfig({ enabled: { [id]: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { [id]: "active" });
+        yield* host.setEnabled(id, false);
+        assert.strictEqual(yield* nextServerFailure(host, id), "left running");
+        assert.include(stateOf(yield* host.list, id), { enabled: false, status: "disabled" });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("clears a failure from a start that failed once the plugin is turned off", () =>
+    Effect.gen(function* () {
+      const id = PluginId.make("leaky-start");
+      // A timer it sets while starting fails, then it fails to start.
+      yield* writeInstalledPlugin(
+        id,
+        `module.exports = { activate() {
+  setTimeout(() => { Promise.reject(new Error("rejected while starting")); }, 0);
+  return new Promise((_, reject) => setTimeout(() => reject(new Error("activate failed")), 0));
+} };`,
+      );
+      yield* writePluginsConfig({ enabled: { [id]: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { [id]: "failed" });
+        assert.strictEqual(yield* nextServerFailure(host, id), "rejected while starting");
+        assert.isUndefined((yield* host.setEnabled(id, false)).serverFailure);
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("does not start a plugin that stopped the server until it is turned on again", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const rootDir = yield* writeInstalledPlugin(
+        "crashing",
+        `require("node:fs").writeFileSync(__dirname + "/loaded", "");
+module.exports = { activate() {} };`,
+      );
+      yield* writePluginsConfig({ enabled: { crashing: true } });
+      const id = PluginId.make("crashing");
+      const thrown = new Error("thrown in a timer");
+      thrown.stack = `Error: thrown in a timer\n    at ${yield* fs.realPath(rootDir)}/server.cjs:1:1`;
+      yield* Effect.gen(function* () {
+        yield* waitForStatuses(yield* PluginHost.PluginHost, { crashing: "active" });
+        // As Node reports an uncaught exception, just before it exits.
+        process.emit("uncaughtExceptionMonitor", thrown);
+      }).pipe(Effect.provide(layerHost()));
+      yield* fs.remove(`${rootDir}/loaded`);
+
+      // The next start lists it as failed and leaves its code unloaded.
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const states = yield* waitForStatuses(host, { crashing: "failed" });
+        // Its switch shows it off, so turning it on is how the user retries it.
+        assert.deepInclude(stateOf(states, id), {
+          enabled: false,
+          failure: { stage: "crash", message: "thrown in a timer" },
+        });
+        assert.isFalse(yield* fs.exists(`${rootDir}/loaded`));
+        assert.include(yield* host.setEnabled(id, true), { status: "active" });
+      }).pipe(Effect.provide(layerHost()));
+      // Turned on again, it starts with the server again.
+      yield* Effect.gen(function* () {
+        yield* waitForStatuses(yield* PluginHost.PluginHost, { crashing: "active" });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("keeps a quiet channel's value while a busy channel overflows its buffer", () =>
+    Effect.gen(function* () {
+      yield* writeInstalledPlugin(
+        "channels",
+        `module.exports = { activate(api) {
+  api.rpc.register("wake", () => api.rpc.publish("quiet", "wake"), { access: "read" });
+  api.rpc.register("burst", () => {
+    for (let index = 0; index < 100; index++) api.rpc.publish("busy", index);
+    api.rpc.publish("quiet", "after");
+  }, { access: "read" });
+} };`,
+      );
+      yield* writePluginsConfig({ enabled: { channels: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const id = PluginId.make("channels");
+        const call = (method: string) =>
+          host.invoke({ pluginId: id, method, input: undefined, scopes: operate });
+        yield* waitForStatuses(host, { channels: "active" });
+        // A subscriber still busy with its first value, as one whose socket is slow to send.
+        const reached = yield* Deferred.make<void>();
+        const release = yield* Deferred.make<void>();
+        const quiet = yield* host.subscribe({ pluginId: id, channel: "quiet" }).pipe(
+          Stream.mapEffect((value) =>
+            Deferred.succeed(reached, undefined).pipe(
+              Effect.andThen(Deferred.await(release)),
+              Effect.as(value),
+            ),
+          ),
+          Stream.take(2),
+          Stream.runCollect,
+          Effect.forkChild({ startImmediately: true }),
+        );
+        yield* call("wake");
+        yield* Deferred.await(reached);
+        yield* call("burst");
+        yield* Deferred.succeed(release, undefined);
+        assert.deepStrictEqual(yield* Fiber.join(quiet), ["wake", "after"]);
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("gives up on a method that does not answer within 30 seconds, and aborts it", () =>
+    Effect.gen(function* () {
+      const started = Promise.withResolvers<void>();
+      const aborted = Promise.withResolvers<void>();
+      Reflect.set(globalThis, "__t3PluginHostInvokeStarted", started.resolve);
+      Reflect.set(globalThis, "__t3PluginHostInvokeAborted", aborted.resolve);
+      yield* writeInstalledPlugin(
+        "hangs",
+        `module.exports = { activate(api) {
+  api.rpc.register("wait", (_input, { signal }) => new Promise(() => {
+    signal.addEventListener("abort", () => globalThis.__t3PluginHostInvokeAborted());
+    globalThis.__t3PluginHostInvokeStarted();
+  }), { access: "read" });
+} };`,
+      );
+      yield* writePluginsConfig({ enabled: { hangs: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const id = PluginId.make("hangs");
+        yield* waitForStatuses(host, { hangs: "active" });
+        const call = yield* host
+          .invoke({ pluginId: id, method: "wait", input: undefined, scopes: operate })
+          .pipe(Effect.flip, Effect.forkChild({ startImmediately: true }));
+        yield* Effect.promise(() => started.promise);
+        yield* TestClock.adjust("30 seconds");
+        assert.strictEqual(
+          (yield* Fiber.join(call)).message,
+          "Plugin hangs did not answer wait within 30 seconds.",
+        );
+        yield* Effect.promise(() => aborted.promise);
+        assert.include(stateOf(yield* host.list, id), { status: "active" });
+      }).pipe(Effect.provide(layerHost()));
+      Reflect.deleteProperty(globalThis, "__t3PluginHostInvokeStarted");
+      Reflect.deleteProperty(globalThis, "__t3PluginHostInvokeAborted");
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("finishes disabling a plugin when the caller gives up, or while it starts", () =>
+    Effect.gen(function* () {
+      const started = Promise.withResolvers<void>();
+      const gate = Promise.withResolvers<void>();
+      Reflect.set(globalThis, "__t3PluginHostCleanupStarted", started.resolve);
+      Reflect.set(globalThis, "__t3PluginHostCleanupGate", gate.promise);
+      yield* writeInstalledPlugin(
+        "stubborn",
+        `module.exports = { activate(api) {
+  api.rpc.register("ping", () => "pong", { access: "read" });
+  api.onDeactivate(() => { globalThis.__t3PluginHostCleanupStarted(); return globalThis.__t3PluginHostCleanupGate; });
+} };`,
+      );
+      yield* writePluginsConfig({ enabled: { stubborn: true } });
+      // Every publish that changes the theme folders hands them over, and holds there while `held`
+      // is set.
+      const themeFolders: Array<ReadonlyArray<string>> = [];
+      let held:
+        | { readonly reached: Deferred.Deferred<void>; readonly release: Deferred.Deferred<void> }
+        | undefined;
+      const layerHeldPublish = Layer.mock(EnvironmentTheme.EnvironmentThemeService)({
+        setPluginThemeDirectories: (directories) => {
+          themeFolders.push(directories);
+          return held === undefined
+            ? Effect.void
+            : Deferred.succeed(held.reached, undefined).pipe(
+                Effect.andThen(Deferred.await(held.release)),
+              );
+        },
+      });
+      // A disable's last wait before it stops the plugin is removing the temporary folder of its
+      // plugins.json write. A fork runs only once the disable waits again, which is at that stop.
+      let releaseOnWrite: Deferred.Deferred<void> | undefined;
+      const layerReleaseOnWrite = layerFileSystemWith((fs) => ({
+        remove: (target, options) =>
+          fs
+            .remove(target, options)
+            .pipe(
+              Effect.andThen(
+                releaseOnWrite !== undefined && target.includes("plugins.json.")
+                  ? Effect.forkChild(Deferred.succeed(releaseOnWrite, undefined))
+                  : Effect.void,
+              ),
+            ),
+      }));
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const id = PluginId.make("stubborn");
+        yield* waitForStatuses(host, { stubborn: "active" });
+
+        const disabling = yield* host
+          .setEnabled(id, false)
+          .pipe(Effect.forkChild({ startImmediately: true }));
+        yield* Effect.promise(() => started.promise);
+        yield* Fiber.interrupt(disabling);
+        gate.resolve();
+
+        yield* waitForStatuses(host, { stubborn: "disabled" });
+        const error = yield* host
+          .invoke({ pluginId: id, method: "ping", input: undefined, scopes: operate })
+          .pipe(Effect.flip);
+        assert.strictEqual(error._tag, "PluginNotActiveError");
+
+        // A stop that interrupts a start while it hands over its theme folder still lets that
+        // list go out, or the disabled list would match the last one sent and keep the folder.
+        const starting = {
+          reached: yield* Deferred.make<void>(),
+          release: yield* Deferred.make<void>(),
+        };
+        held = starting;
+        const enabling = yield* host
+          .setEnabled(id, true)
+          .pipe(Effect.forkChild({ startImmediately: true }));
+        yield* Deferred.await(starting.reached);
+        releaseOnWrite = starting.release;
+        assert.include(yield* host.setEnabled(id, false), { status: "disabled" });
+        yield* Fiber.join(enabling);
+        assert.deepStrictEqual(themeFolders.at(-1), []);
+      }).pipe(Effect.provide(layerHost(layerHeldPublish).pipe(Layer.provide(layerReleaseOnWrite))));
+      Reflect.deleteProperty(globalThis, "__t3PluginHostCleanupStarted");
+      Reflect.deleteProperty(globalThis, "__t3PluginHostCleanupGate");
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("installs a dropped folder turned off, and one dropped again keeps its switch", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const helloFiles = yield* Effect.forEach(["t3-plugin.json", "server.cjs"], (name) =>
+        fs
+          .readFile(`${fixturesDir}hello-plugin/${name}`)
+          .pipe(Effect.map((contents) => ({ path: name, contents }))),
+      );
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const installer = yield* PluginInstaller.PluginInstaller;
+        yield* waitForStatuses(host, {});
+        // Nothing of a new plugin runs until its switch is turned on.
+        const installed = yield* installer.installFiles(helloFiles);
+        assert.include(installed, { id: hello, status: "disabled", enabled: false });
+        const started = yield* host.setEnabled(hello, true);
+        const replaced = yield* installer.installFiles(helloFiles);
+        assert.include(replaced, { status: "active", enabled: true });
+        assert.notStrictEqual(replaced.revision, started.revision);
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect(
+    "lists a folder copied in by hand turned off, and a dropped one replaces it there",
+    () =>
+      Effect.gen(function* () {
+        const fs = yield* FileSystem.FileSystem;
+        const { stateDir } = yield* ServerConfig.ServerConfig;
+        const notesManifest = (version: string) =>
+          JSON.stringify({ id: "notes", name: "Notes", version, engines: { t3: ">=0.1.0" } });
+        yield* Effect.gen(function* () {
+          const host = yield* PluginHost.PluginHost;
+          const installer = yield* PluginInstaller.PluginInstaller;
+          yield* waitForStatuses(host, {});
+          // The docs point people at the plugins folder, so a rescan makes sure it exists.
+          yield* host.rescan;
+          assert.isTrue(yield* fs.exists(`${stateDir}/plugins`));
+
+          // Copied in by hand under any name, a plugin is listed on the next rescan, turned off.
+          yield* writeFile(`${stateDir}/plugins/My Notes/t3-plugin.json`, notesManifest("1.0.0"));
+          const { plugins } = yield* host.rescan;
+          assert.include(stateOf(plugins, "notes"), { status: "disabled", enabled: false });
+          // A new version copied over one that is off is what Settings lists and what starts.
+          yield* writeFile(`${stateDir}/plugins/My Notes/t3-plugin.json`, notesManifest("1.0.5"));
+          assert.include(stateOf((yield* host.rescan).plugins, "notes"), { version: "1.0.5" });
+
+          // A dropped folder replaces a plugin copied in by hand, in the folder it was copied to.
+          yield* installer.installFiles([
+            { path: "t3-plugin.json", contents: new TextEncoder().encode(notesManifest("1.1.0")) },
+          ]);
+          assert.include(stateOf(yield* host.list, "notes"), { version: "1.1.0", enabled: false });
+          assert.deepStrictEqual(yield* fs.readDirectory(`${stateDir}/plugins`), ["My Notes"]);
+          yield* installer.uninstall(PluginId.make("notes"));
+          assert.isFalse(yield* fs.exists(`${stateDir}/plugins/My Notes`));
+        }).pipe(Effect.provide(layerHost()));
+      }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("puts the working version back when a new dropped version fails to start", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const encode = (text: string) => new TextEncoder().encode(text);
+      const upgrade = (version: string, activate = "") => [
+        {
+          path: "t3-plugin.json",
+          contents: encode(
+            JSON.stringify({
+              id: "upgrade",
+              name: "Upgrade",
+              version,
+              engines: { t3: ">=0.1.0" },
+              server: "./server.cjs",
+            }),
+          ),
+        },
+        {
+          path: "server.cjs",
+          contents: encode(`module.exports = { activate() { ${activate} } };`),
+        },
+      ];
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const installer = yield* PluginInstaller.PluginInstaller;
+        yield* waitForStatuses(host, {});
+        yield* installer.installFiles(upgrade("1.0.0"));
+        yield* host.setEnabled(PluginId.make("upgrade"), true);
+        const failed = yield* installer
+          .installFiles(upgrade("2.0.0", `throw new Error("2.0.0 refuses to start");`))
+          .pipe(Effect.flip);
+        assert.strictEqual(
+          failed.message,
+          "Upgrade 2.0.0 failed to start, so 1.0.0 is back. It failed with: 2.0.0 refuses to start",
+        );
+        assert.include(stateOf(yield* host.list, "upgrade"), {
+          version: "1.0.0",
+          status: "active",
+        });
+        assert.notInclude(
+          yield* fs.readFileString(`${stateDir}/plugins/upgrade/server.cjs`),
+          "refuses to start",
+        );
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("keeps server folder paths from clients that cannot manage plugins", () =>
+    Effect.gen(function* () {
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const folder = `${stateDir}/checkout/linked`;
+      yield* writeFile(`${folder}/t3-plugin.json`, manifestJson("linked"));
+      yield* writePluginsConfig({ devPaths: [folder] });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const installer = yield* PluginInstaller.PluginInstaller;
+        yield* waitForStatuses(host, { linked: "disabled" });
+        const listed = (scopes: ReadonlyArray<AuthEnvironmentScope>) => {
+          // Listing never signs an upload URL.
+          const uploads = PluginUploads.PluginUploads.of({
+            issueUrl: Effect.die("unused"),
+            claim: () => Effect.die("unused"),
+          });
+          const handlers = makePluginRpcHandlers(host, installer, uploads, scopes);
+          return Effect.all([
+            handlers[WS_METHODS.pluginsList]({}),
+            handlers[WS_METHODS.pluginsSubscribeStates]({}).pipe(
+              Stream.runHead,
+              Effect.map((first) =>
+                applyPluginStatesEvent({ plugins: [] }, Option.getOrThrow(first)),
+              ),
+            ),
+          ]).pipe(Effect.map((results) => results.flatMap((result) => result.plugins)));
+        };
+
+        for (const plugin of yield* listed([AuthOrchestrationReadScope])) {
+          assert.notProperty(plugin, "folder");
+        }
+        const managed = yield* listed([AuthOrchestrationReadScope, AuthSettingsWriteScope]);
+        assert.include(stateOf(managed, "linked"), { folder });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("sends a client only the plugins that changed after the first list", () =>
+    Effect.gen(function* () {
+      yield* writePluginsConfig({
+        enabled: { [hello]: true },
+        devPaths: [`${fixturesDir}broken-plugin`, `${fixturesDir}hello-plugin`],
+      });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { [hello]: "active", [broken]: "disabled" });
+        const disabled = (event: PluginStatesEvent) =>
+          event._tag === "changed" &&
+          event.rows.some(({ plugin }) => plugin.id === hello && plugin.status === "disabled");
+        const events = yield* host
+          .streamForClient(operate)
+          .pipe(
+            Stream.takeUntil(disabled),
+            Stream.runCollect,
+            Effect.forkChild({ startImmediately: true }),
+          );
+        yield* host.setEnabled(hello, false);
+        const [first, ...changes] = yield* Fiber.join(events);
+        assert.strictEqual(first?._tag, "snapshot");
+        for (const change of changes) {
+          assert.deepStrictEqual(
+            change._tag === "changed" ? change.rows.map(({ plugin }) => plugin.id) : [],
+            [hello],
+          );
+        }
+        const folded = [first!, ...changes].reduce(applyPluginStatesEvent, { plugins: [] });
+        assert.deepStrictEqual(folded, yield* host.listForClient(operate));
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("refuses a dropped folder this server can't run and keeps the old one", () =>
+    Effect.gen(function* () {
+      const upgrade = (
+        version: string,
+        options: { readonly engines?: string; readonly settingsSchema?: object } = {},
+      ) => [
+        {
+          path: "t3-plugin.json",
+          contents: new TextEncoder().encode(
+            manifestJson("upgrade", { name: "Upgrade", version, ...options }),
+          ),
+        },
+      ];
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const installer = yield* PluginInstaller.PluginInstaller;
+        yield* waitForStatuses(host, {});
+        yield* installer.installFiles(upgrade("1.0.0"));
+        yield* host.setEnabled(PluginId.make("upgrade"), true);
+        const refused = yield* installer
+          .installFiles(upgrade("2.0.0", { engines: ">=999.0.0" }))
+          .pipe(Effect.flip);
+        assert.strictEqual(
+          refused.message,
+          `Upgrade 2.0.0 needs T3 Code >=999.0.0, and this server is ${packageJson.version}.`,
+        );
+        const unchecked = yield* installer
+          .installFiles(
+            upgrade("2.0.0", {
+              settingsSchema: { type: "object", properties: { count: { $ref: "#/$defs/no" } } },
+            }),
+          )
+          .pipe(Effect.flip);
+        assert.include(
+          unchecked.message,
+          "Upgrade 2.0.0 has a settingsSchema T3 Code cannot validate",
+        );
+        assert.include(unchecked.message, 'Missing definition "no"');
+        assert.include(stateOf(yield* host.list, "upgrade"), {
+          version: "1.0.0",
+          status: "active",
+        });
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("restores a version an interrupted install left in staging", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const previous = `${stateDir}/plugin-staging/crashed/previous`;
+      yield* writeFile(
+        `${previous}/t3-plugin.json`,
+        JSON.stringify({
+          id: "stranded",
+          name: "Stranded",
+          version: "0.1.0",
+          engines: { t3: ">=0.1.0" },
+        }),
+      );
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { stranded: "disabled" });
+        assert.isTrue(yield* fs.exists(`${stateDir}/plugins/stranded/t3-plugin.json`));
+        assert.isFalse(yield* fs.exists(`${stateDir}/plugin-staging/crashed`));
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("sends a client that connects during startup one empty list, not two", () =>
+    Effect.gen(function* () {
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const reached = yield* Deferred.make<void>();
+      const release = yield* Deferred.make<void>();
+      // Holds startup inside its lock, as it lists the plugins folder.
+      const layerHeldStartup = layerFileSystemWith((fs) => ({
+        readDirectory: (target, options) =>
+          target.endsWith("/plugins")
+            ? Deferred.succeed(reached, undefined).pipe(
+                Effect.andThen(Deferred.await(release)),
+                Effect.andThen(fs.readDirectory(target, options)),
+              )
+            : fs.readDirectory(target, options),
+      }));
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* Deferred.await(reached);
+        const lists = yield* host.streamStates.pipe(
+          Stream.map((states) => states.map((state) => state.id)),
+          Stream.take(2),
+          Stream.runCollect,
+          Effect.forkChild({ startImmediately: true }),
+        );
+        yield* Deferred.succeed(release, undefined);
+        // Waits for startup's lock, so startup has published whatever it does by then.
+        yield* host.rescan;
+        yield* writeFile(`${stateDir}/plugins/late/t3-plugin.json`, manifestJson("late"));
+        yield* host.rescan;
+        assert.deepStrictEqual(yield* Fiber.join(lists), [[], ["late"]]);
+      }).pipe(Effect.provide(layerHost().pipe(Layer.provide(layerHeldStartup))));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("does not load a disabled plugin at startup", () =>
+    Effect.gen(function* () {
+      const rootDir = yield* writeInstalledPlugin(
+        "dormant",
+        `require("node:fs").writeFileSync(__dirname + "/loaded", "");
+module.exports = { activate() {} };`,
+      );
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const states = yield* waitForStatuses(host, { dormant: "disabled" });
+        assert.include(stateOf(states, "dormant"), { enabled: false, hasServer: true });
+        const fs = yield* FileSystem.FileSystem;
+        assert.isFalse(yield* fs.exists(`${rootDir}/loaded`));
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect(
+    "finishes starting before a slow plugin finishes activating, and a rescan meanwhile keeps it",
+    () =>
+      Effect.gen(function* () {
+        const gate = Promise.withResolvers<void>();
+        const cleanupStarted = Promise.withResolvers<void>();
+        const cleanupGate = Promise.withResolvers<void>();
+        Reflect.set(globalThis, "__t3PluginHostTestGate", gate.promise);
+        Reflect.set(globalThis, "__t3PluginHostCleanupStarted", cleanupStarted.resolve);
+        Reflect.set(globalThis, "__t3PluginHostCleanupGate", cleanupGate.promise);
+        yield* writeInstalledPlugin(
+          "slow",
+          `module.exports = { activate(api) {
+  api.rpc.register("ping", () => "pong", { access: "read" });
+  return globalThis.__t3PluginHostTestGate;
+} };`,
+        );
+        const goes = yield* writeInstalledPlugin(
+          "goes",
+          `module.exports = { activate(api) {
+  api.onDeactivate(() => { globalThis.__t3PluginHostCleanupStarted(); return globalThis.__t3PluginHostCleanupGate; });
+} };`,
+        );
+        yield* writePluginsConfig({ enabled: { slow: true, goes: true } });
+        yield* Effect.gen(function* () {
+          const host = yield* PluginHost.PluginHost;
+          const fs = yield* FileSystem.FileSystem;
+          yield* waitForStatuses(host, { slow: "loading", goes: "active" });
+
+          // The rescan stops the removed plugin while the slow one finishes starting.
+          yield* fs.remove(goes, { recursive: true });
+          const rescanning = yield* host.rescan.pipe(Effect.forkChild({ startImmediately: true }));
+          yield* Effect.promise(() => cleanupStarted.promise);
+          gate.resolve();
+          yield* waitForStatuses(host, { slow: "active" });
+          cleanupGate.resolve();
+          yield* Fiber.join(rescanning);
+
+          assert.strictEqual(stateOf(yield* host.list, "slow")?.status, "active");
+          assert.strictEqual(
+            yield* host.invoke({
+              pluginId: PluginId.make("slow"),
+              method: "ping",
+              input: undefined,
+              scopes: operate,
+            }),
+            "pong",
+          );
+        }).pipe(Effect.provide(layerHost()));
+        Reflect.deleteProperty(globalThis, "__t3PluginHostTestGate");
+        Reflect.deleteProperty(globalThis, "__t3PluginHostCleanupStarted");
+        Reflect.deleteProperty(globalThis, "__t3PluginHostCleanupGate");
+      }).pipe(Effect.provide(layerConfig())),
+  );
+});
diff --git a/apps/server/src/plugins/PluginHost.ts b/apps/server/src/plugins/PluginHost.ts
new file mode 100644
index 0000000000000..f060ebb080777
--- /dev/null
+++ b/apps/server/src/plugins/PluginHost.ts
@@ -0,0 +1,855 @@
+// @effect-diagnostics nodeBuiltinImport:off - plugins load through Node's CommonJS loader, which
+// the FileSystem service does not wrap.
+import * as NodeModule from "node:module";
+
+import {
+  AuthEnvironmentScope,
+  AuthOrchestrationOperateScope,
+  AuthOrchestrationReadScope,
+  PluginId,
+  type PluginListResult,
+  type PluginSettingsGetResult,
+  type PluginState,
+  type PluginStatesEvent,
+} from "@t3tools/contracts";
+import type { PluginDefinition } from "@t3tools/plugin-sdk/server";
+import { satisfiesSemverRange } from "@t3tools/shared/semver";
+import * as Cause from "effect/Cause";
+import * as Clock from "effect/Clock";
+import * as Context from "effect/Context";
+import * as Duration from "effect/Duration";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as FiberMap from "effect/FiberMap";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Queue from "effect/Queue";
+import * as Ref from "effect/Ref";
+import * as Schema from "effect/Schema";
+import * as Semaphore from "effect/Semaphore";
+import * as Stream from "effect/Stream";
+import {
+  HttpRouter,
+  HttpServerRequest,
+  HttpServerRespondable,
+  HttpServerResponse,
+} from "effect/http";
+
+import packageJson from "../../package.json" with { type: "json" };
+import * as ServerConfig from "../config.ts";
+import { authenticateRawRouteWithScope } from "../http.ts";
+import { forkParked } from "../serverActivation.ts";
+import {
+  makePluginActivation,
+  makePluginApi,
+  type PluginActivation,
+  type PluginApiServices,
+} from "./PluginApi.ts";
+import { errorText, PluginCodeError, pluginCodeScope } from "./api/facade.ts";
+import { makePluginFailureGuard } from "./pluginFailureGuard.ts";
+import { makePluginFailures } from "./pluginFailures.ts";
+import { discoverPlugins, type DiscoveredPlugin } from "./pluginDiscovery.ts";
+import * as PluginInstaller from "./PluginInstaller.ts";
+import * as PluginMcpTools from "./PluginMcpTools.ts";
+import { makePluginsConfig, type PluginConfigError } from "./pluginsConfig.ts";
+import * as PluginSettingsStore from "./PluginSettingsStore.ts";
+import * as PluginStorage from "./PluginStorage.ts";
+import { makePluginStates, manifestOf, type PluginRecord } from "./pluginStates.ts";
+import { makePluginWebFiles, type PluginWebFile } from "./pluginWebFiles.ts";
+
+// Plugin code that never settles must not keep a plugin loading, a client's call open, or Disable
+// and Reload waiting, forever. The cleanup deadline covers all of a plugin's cleanups together.
+const ACTIVATE_DEADLINE = Duration.seconds(30);
+const INVOKE_DEADLINE = Duration.seconds(30);
+const CLEANUP_DEADLINE = Duration.seconds(5);
+// Values of one channel a subscriber has not taken yet; past this the oldest go.
+const CHANNEL_BUFFER = 64;
+
+export class PluginNotFoundError extends Schema.TaggedError<PluginNotFoundError>()(
+  "PluginNotFoundError",
+  { pluginId: PluginId },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} is not installed.`;
+  }
+}
+
+export class PluginNotActiveError extends Schema.TaggedError<PluginNotActiveError>()(
+  "PluginNotActiveError",
+  { pluginId: PluginId, status: Schema.String },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} is ${this.status}.`;
+  }
+}
+
+export class PluginNoServerError extends Schema.TaggedError<PluginNoServerError>()(
+  "PluginNoServerError",
+  { pluginId: PluginId },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} has no server half, so it has no methods or channels.`;
+  }
+}
+
+export class PluginMethodNotFoundError extends Schema.TaggedError<PluginMethodNotFoundError>()(
+  "PluginMethodNotFoundError",
+  { pluginId: PluginId, method: Schema.String, methods: Schema.Array(Schema.String) },
+) {
+  // The methods it has, since nothing else lists them.
+  override get message(): string {
+    return `Plugin ${this.pluginId} has no method ${this.method}. Its methods: ${this.methods.join(", ") || "none"}.`;
+  }
+}
+
+export class PluginAccessDeniedError extends Schema.TaggedError<PluginAccessDeniedError>()(
+  "PluginAccessDeniedError",
+  { pluginId: PluginId, method: Schema.String, requiredScope: AuthEnvironmentScope },
+) {
+  override get message(): string {
+    return `Calling ${this.method} on plugin ${this.pluginId} needs the ${this.requiredScope} scope.`;
+  }
+}
+export const isPluginAccessDeniedError = Schema.is(PluginAccessDeniedError);
+
+// `reason` is the plugin's own error text, bounded. Plugins are trusted code, and their UI needs
+// to show why its own call failed.
+export class PluginHandlerError extends Schema.TaggedError<PluginHandlerError>()(
+  "PluginHandlerError",
+  { pluginId: PluginId, method: Schema.String, reason: Schema.String, cause: Schema.Defect() },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} failed in ${this.method}: ${this.reason}`;
+  }
+}
+
+export class PluginHandlerTimeoutError extends Schema.TaggedError<PluginHandlerTimeoutError>()(
+  "PluginHandlerTimeoutError",
+  { pluginId: PluginId, method: Schema.String },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} did not answer ${this.method} within ${Duration.toSeconds(INVOKE_DEADLINE)} seconds.`;
+  }
+}
+
+export class PluginHost extends Context.Service<
+  PluginHost,
+  {
+    readonly list: Effect.Effect<ReadonlyArray<PluginState>>;
+    /** The current list, then the whole list after every change. */
+    readonly streamStates: Stream.Stream<ReadonlyArray<PluginState>>;
+    /** `list` as a client with `scopes` sees it: server folder paths only if it manages plugins. */
+    readonly listForClient: (
+      scopes: ReadonlyArray<AuthEnvironmentScope>,
+    ) => Effect.Effect<PluginListResult>;
+    /** `listForClient` now, then the rows that differ after every change. */
+    readonly streamForClient: (
+      scopes: ReadonlyArray<AuthEnvironmentScope>,
+    ) => Stream.Stream<PluginStatesEvent>;
+    /** Persists the flag, then waits for activation or deactivation to finish. */
+    readonly setEnabled: (
+      pluginId: PluginId,
+      enabled: boolean,
+    ) => Effect.Effect<PluginState, PluginNotFoundError | PluginConfigError>;
+    /** Rescans the plugin folders and restarts this plugin with fresh code. */
+    readonly reload: (
+      pluginId: PluginId,
+    ) => Effect.Effect<PluginState, PluginNotFoundError | PluginConfigError>;
+    /**
+     * Rescans the plugin folders without restarting anything. Plugins whose folders appeared are
+     * listed, turned off unless plugins.json turns them on; ones whose folders are gone stop, and
+     * plugins.json forgets them.
+     */
+    readonly rescan: Effect.Effect<
+      { readonly plugins: ReadonlyArray<PluginState> },
+      PluginConfigError
+    >;
+    /** The settings clients see, with the schema the settings form is drawn from. */
+    readonly getSettings: (
+      pluginId: PluginId,
+    ) => Effect.Effect<
+      Omit<PluginSettingsGetResult, "pluginId">,
+      PluginNotFoundError | PluginNotActiveError | PluginSettingsError
+    >;
+    readonly updateSettings: (
+      pluginId: PluginId,
+      patch: Schema.JsonObject,
+    ) => Effect.Effect<
+      Schema.JsonObject,
+      PluginNotFoundError | PluginNotActiveError | PluginSettingsError
+    >;
+    /**
+     * `scopes` are the caller's; methods the plugin registered as writes need the operate scope. A
+     * handler that has not answered within 30 seconds is aborted.
+     */
+    readonly invoke: (input: {
+      readonly pluginId: PluginId;
+      readonly method: string;
+      readonly input: Schema.Json | undefined;
+      readonly scopes: ReadonlyArray<AuthEnvironmentScope>;
+    }) => Effect.Effect<
+      Schema.Json,
+      | PluginNotFoundError
+      | PluginNotActiveError
+      | PluginNoServerError
+      | PluginMethodNotFoundError
+      | PluginAccessDeniedError
+      | PluginHandlerError
+      | PluginHandlerTimeoutError
+    >;
+    /**
+     * What an active plugin serves at `/api/plugins/<pluginId><path>`: its `web.js`, or a file in
+     * its `assets/` or `styles/`. A `revision` that names the file's contents lets it be cached.
+     */
+    readonly readWebFile: (input: {
+      readonly pluginId: string;
+      readonly path: string;
+      readonly revision: string | undefined;
+    }) => Effect.Effect<Option.Option<PluginWebFile>>;
+    /** Values the plugin publishes on `channel` until it deactivates. */
+    readonly subscribe: (input: {
+      readonly pluginId: PluginId;
+      readonly channel: string;
+    }) => Stream.Stream<
+      Schema.Json,
+      PluginNotFoundError | PluginNotActiveError | PluginNoServerError
+    >;
+  }
+>()("t3/plugins/PluginHost") {}
+
+type PluginSettingsError =
+  | PluginSettingsStore.PluginSettingsPersistenceError
+  | PluginSettingsStore.PluginSettingsSchemaError
+  | PluginSettingsStore.PluginSettingsValidationError;
+
+const isJson = Schema.is(Schema.Json);
+
+/** What plugins.json says about the plugins a discovery found. */
+interface Found {
+  readonly enabled: Readonly<Record<string, boolean>>;
+  readonly crashed: Readonly<Record<string, string>>;
+}
+
+// One loader for the packaged single executable and plain Node: a require created from an
+// absolute path loads files from disk in both, and plugin code resolves its own imports.
+const requireFromDisk = NodeModule.createRequire(process.execPath);
+
+const isPluginDefinition = (value: unknown): value is PluginDefinition =>
+  typeof value === "object" &&
+  value !== null &&
+  "activate" in value &&
+  typeof value.activate === "function";
+
+const make = Effect.gen(function* () {
+  const config = yield* ServerConfig.ServerConfig;
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  const context = yield* Effect.context<never>();
+  const services: PluginApiServices = {
+    settings: yield* PluginSettingsStore.PluginSettingsStore,
+    storage: yield* PluginStorage.PluginStorage,
+    mcpTools: yield* PluginMcpTools.PluginMcpTools,
+  };
+  const settingsStore = services.settings;
+
+  const pluginsDir = path.join(config.stateDir, "plugins");
+  const pluginsConfig = yield* makePluginsConfig;
+  const webFiles = yield* makePluginWebFiles;
+
+  const records = yield* Ref.make<ReadonlyArray<PluginRecord>>([]);
+  // Changes on every start, so a client can tell a restarted plugin from one that kept running.
+  // Seeded with the clock so a restarted server never repeats a revision a client already saw.
+  let revision = yield* Clock.currentTimeMillis;
+  const nextRevision = () => ++revision;
+  const lifecycle = yield* Semaphore.make(1);
+  const activations = yield* FiberMap.make<PluginId>();
+  const hostScope = yield* Effect.scope;
+
+  const failures = yield* makePluginFailures;
+  const pluginStates = yield* makePluginStates({
+    records,
+    config: pluginsConfig.current,
+    failures,
+  });
+  const currentStates = pluginStates.current;
+  const publishStates = pluginStates.publish;
+  const findRecord = (pluginId: string) =>
+    Ref.get(records).pipe(Effect.map((all) => all.find((record) => record.plugin.id === pluginId)));
+  const stateOf = (pluginId: PluginId) =>
+    currentStates.pipe(
+      Effect.flatMap((states) => {
+        const state = states.find((candidate) => candidate.id === pluginId);
+        return state === undefined
+          ? Effect.fail(new PluginNotFoundError({ pluginId }))
+          : Effect.succeed(state);
+      }),
+    );
+  // By id, which finds the copy in use: discovery lists it before any duplicate.
+  const setRecord = (pluginId: PluginId, update: Omit<PluginRecord, "plugin">) =>
+    Ref.update(records, (all) => {
+      const index = all.findIndex((record) => record.plugin.id === pluginId);
+      if (index === -1) return all;
+      const next = [...all];
+      next[index] = { plugin: all[index]!.plugin, ...update };
+      return next;
+    }).pipe(Effect.andThen(publishStates));
+
+  // Untraced: a plugin's timer can fail every few milliseconds.
+  const recordServerFailure = Effect.fnUntraced(function* (pluginId: PluginId, error: unknown) {
+    const record = yield* findRecord(pluginId);
+    if (yield* failures.recordServer(pluginId, record?.revision, error)) yield* publishStates;
+  });
+  // Recorded at once and outside the plugin's scope, where the guard hears of it, and in the
+  // host's scope, so a publish still waiting ends with the host.
+  const reportServerFailure = (pluginId: PluginId, error: unknown) =>
+    pluginCodeScope.exit(() => {
+      Effect.runForkWith(context)(
+        Effect.forkIn(recordServerFailure(pluginId, error), hostScope, { startImmediately: true }),
+      );
+    });
+  const failureGuard = makePluginFailureGuard({
+    onRejection: reportServerFailure,
+    onCrash: (pluginId, error) => pluginsConfig.recordCrash(pluginId, errorText(error)),
+  });
+  // Added before the teardown finalizer, so it runs after plugin cleanups.
+  yield* Effect.addFinalizer(() => Effect.sync(failureGuard.uninstall));
+
+  const runCleanup = (pluginId: PluginId, cleanup: () => void | Promise<void>) =>
+    Effect.tryPromise({
+      try: () => pluginCodeScope.run(pluginId, () => Promise.resolve().then(cleanup)),
+      catch: (cause) => new PluginCodeError({ cause }),
+    }).pipe(
+      Effect.catchTags({
+        PluginCodeError: (error) =>
+          Effect.logWarning("plugin cleanup failed", { pluginId, reason: error.message }),
+      }),
+    );
+
+  // Aborts first so handlers and iterators stop. Teardown also runs where interruption is off, so
+  // the deadline gets an interruptible region to cut.
+  const teardown = Effect.fn("PluginHost.teardown")(function* (
+    pluginId: PluginId,
+    activation: PluginActivation,
+  ) {
+    activation.controller.abort();
+    const timedOut = yield* Effect.forEach(
+      activation.cleanups.toReversed(),
+      (cleanup) => runCleanup(pluginId, cleanup),
+      { discard: true },
+    ).pipe(Effect.interruptible, Effect.timeoutOption(CLEANUP_DEADLINE), Effect.map(Option.isNone));
+    if (timedOut) yield* Effect.logWarning("plugin cleanup timed out", { pluginId });
+    // In one step with the abort, so a subscriber that joins meanwhile sees one or the other.
+    activation.ended.abort();
+    for (const queues of activation.channels.values()) {
+      for (const queue of queues) Queue.endUnsafe(queue);
+    }
+  });
+
+  const loadDefinition = (plugin: DiscoveredPlugin, entry: string) =>
+    Effect.try({
+      try: () => {
+        const entryPath = path.join(plugin.rootDir, entry);
+        // Drop every cached module under the plugin so reload runs current code. Node still
+        // holds the old instances until the server restarts.
+        const prefix = `${plugin.rootDir}${path.sep}`;
+        for (const cached of Object.keys(requireFromDisk.cache)) {
+          if (cached.startsWith(prefix)) Reflect.deleteProperty(requireFromDisk.cache, cached);
+        }
+        const exported: unknown = pluginCodeScope.run(plugin.id, () => requireFromDisk(entryPath));
+        // Bundlers that compile `export default` to CommonJS put the definition on `default`.
+        const definition =
+          typeof exported === "object" && exported !== null && "default" in exported
+            ? exported.default
+            : exported;
+        if (!isPluginDefinition(definition)) {
+          throw new Error("The server entry does not export a plugin with an activate function.");
+        }
+        return definition;
+      },
+      catch: (cause) => new PluginCodeError({ cause }),
+    });
+
+  const activatePlugin = Effect.fn("PluginHost.activate")(function* (plugin: DiscoveredPlugin) {
+    const manifest = manifestOf(plugin);
+    if (manifest === undefined) return;
+    if (!satisfiesSemverRange(packageJson.version, manifest.engines.t3)) {
+      return yield* setRecord(plugin.id, {
+        status: "failed",
+        failure: {
+          stage: "compatibility",
+          message: `Needs T3 Code ${manifest.engines.t3}; this server is ${packageJson.version}.`,
+        },
+      });
+    }
+    // Before Node 24, `pluginCodeScope` slows every promise in the process about 3x, and without
+    // it a plugin's rejection with only Node's frames in its stack stops the server.
+    const node = process.versions.node;
+    if (manifest.server !== undefined && Number(node.split(".")[0]) < 24) {
+      return yield* setRecord(plugin.id, {
+        status: "failed",
+        failure: {
+          stage: "compatibility",
+          message: `Needs Node 24 or later for its server code; this server runs Node ${node}.`,
+        },
+      });
+    }
+    const web = yield* webFiles.find(plugin, manifest.web);
+    const started = {
+      status: "active" as const,
+      webFiles: web.folders,
+      ...(web.webRevision === undefined ? {} : { webRevision: web.webRevision }),
+      styles: web.styles,
+    };
+    if (manifest.server === undefined) {
+      return yield* setRecord(plugin.id, { ...started, revision: nextRevision() });
+    }
+    yield* setRecord(plugin.id, { status: "loading" });
+    // Before loading, since a module can start timers as it loads.
+    failureGuard.watch(`${plugin.rootDir}${path.sep}`, plugin.id);
+    const definition = yield* Effect.exit(loadDefinition(plugin, manifest.server));
+    if (definition._tag === "Failure") {
+      return yield* setRecord(plugin.id, {
+        status: "failed",
+        failure: { stage: "load", message: errorText(Cause.squash(definition.cause)) },
+      });
+    }
+    const activation = makePluginActivation();
+    const api = makePluginApi({
+      id: plugin.id,
+      rootDir: plugin.rootDir,
+      settingsSchema: manifest.settingsSchema,
+      activation,
+      context,
+      services,
+    });
+    // Only `activate` can be interrupted. A stop that lands after it waits until the record holds
+    // the activation, so `stopPlugin` always finds what to tear down.
+    yield* Effect.uninterruptibleMask((restore) =>
+      Effect.gen(function* () {
+        const activated = yield* restore(
+          Effect.tryPromise({
+            try: () =>
+              pluginCodeScope.run(plugin.id, () =>
+                Promise.resolve().then(() => definition.value.activate(api)),
+              ),
+            catch: (cause) => new PluginCodeError({ cause }),
+          }).pipe(Effect.timeoutOption(ACTIVATE_DEADLINE)),
+        ).pipe(Effect.exit);
+        if (activated._tag === "Success" && Option.isSome(activated.value)) {
+          yield* setRecord(plugin.id, { ...started, activation, revision: nextRevision() });
+          return yield* Effect.logInfo("plugin activated", { pluginId: plugin.id });
+        }
+        yield* teardown(plugin.id, activation);
+        // Whatever stopped the activation sets the plugin's next status.
+        if (activated._tag === "Failure" && Cause.hasInterruptsOnly(activated.cause)) return;
+        yield* setRecord(plugin.id, {
+          status: "failed",
+          failure: {
+            stage: "activate",
+            message:
+              activated._tag === "Failure"
+                ? errorText(Cause.squash(activated.cause))
+                : `activate did not finish within ${Duration.toSeconds(ACTIVATE_DEADLINE)} seconds.`,
+          },
+        });
+      }),
+    );
+  });
+
+  /**
+   * An active plugin's record stops routing calls and serving files before cleanups run. The caller
+   * sets the plugin's next status.
+   */
+  const stopPlugin = Effect.fn("PluginHost.stop")(function* (pluginId: PluginId) {
+    yield* FiberMap.remove(activations, pluginId);
+    // A failure from before the stop, even one while loading, which has no revision, belongs to
+    // that start; failures of code left running after it are recorded again.
+    yield* failures.clearServer(pluginId);
+    // A plugin without server code is active with no activation.
+    const record = yield* findRecord(pluginId);
+    if (record?.status !== "active") return;
+    yield* setRecord(pluginId, { status: "disabled" });
+    if (record.activation !== undefined) yield* teardown(pluginId, record.activation);
+  });
+
+  const startPlugin = (plugin: DiscoveredPlugin) =>
+    FiberMap.run(activations, plugin.id, activatePlugin(plugin));
+
+  // A plugin that stopped the server was turned off then, or the restart would only crash again.
+  const initialRecord = (plugin: DiscoveredPlugin, found: Found): PluginRecord => {
+    if ("failure" in plugin) return { plugin, status: "failed", failure: plugin.failure };
+    const crashed = found.crashed[plugin.id];
+    if (crashed !== undefined) {
+      return { plugin, status: "failed", failure: { stage: "crash", message: crashed } };
+    }
+    return found.enabled[plugin.id] === true
+      ? { plugin, status: "loading" }
+      : { plugin, status: "disabled" };
+  };
+  const startsAtDiscovery = (plugin: DiscoveredPlugin, found: Found) =>
+    initialRecord(plugin, found).status === "loading";
+
+  // Startup tolerates an unreadable plugins.json; an explicit reload reports it instead.
+  const discover = Effect.fn("PluginHost.discover")(function* (lenient: boolean) {
+    const current = yield* pluginsConfig.reread(lenient);
+    const plugins = yield* discoverPlugins({ pluginsDir, devPaths: current.devPaths ?? [] }).pipe(
+      Effect.provideService(FileSystem.FileSystem, fs),
+      Effect.provideService(Path.Path, path),
+    );
+    yield* pluginsConfig.forgetMissing(new Set(plugins.map((plugin) => plugin.id))).pipe(
+      Effect.catchTags({
+        PluginConfigError: (error) =>
+          lenient
+            ? Effect.logWarning("could not update plugins.json", { path: error.path })
+            : Effect.fail(error),
+      }),
+    );
+    const found: Found = { enabled: current.enabled ?? {}, crashed: current.crashed ?? {} };
+    return { plugins, found };
+  });
+
+  // Lifecycle changes run in the host's scope, so a caller that disconnects only stops waiting
+  // and never leaves a plugin half torn down.
+  const runLifecycle = <A, E>(body: Effect.Effect<A, E>) =>
+    lifecycle.withPermits(1)(body).pipe(Effect.forkIn(hostScope), Effect.flatMap(Fiber.join));
+
+  const awaitActivation = (pluginId: PluginId) =>
+    FiberMap.get(activations, pluginId).pipe(
+      Effect.flatMap(
+        Option.match({
+          onNone: () => Effect.void,
+          onSome: (fiber) => Effect.asVoid(Fiber.await(fiber)),
+        }),
+      ),
+    );
+
+  const setEnabled: PluginHost["Service"]["setEnabled"] = Effect.fn("PluginHost.setEnabled")(
+    function* (pluginId, enabled) {
+      yield* runLifecycle(
+        Effect.gen(function* () {
+          const record = yield* findRecord(pluginId);
+          if (record === undefined) return yield* new PluginNotFoundError({ pluginId });
+          yield* pluginsConfig.writeEnabled(pluginId, enabled);
+          if ("failure" in record.plugin) return yield* publishStates;
+          if (enabled && (record.status === "active" || record.status === "loading")) {
+            return yield* publishStates;
+          }
+          yield* stopPlugin(pluginId);
+          if (enabled) {
+            yield* startPlugin(record.plugin);
+          } else {
+            yield* setRecord(pluginId, { status: "disabled" });
+          }
+        }),
+      );
+      yield* awaitActivation(pluginId);
+      return yield* stateOf(pluginId);
+    },
+  );
+
+  /** Rescans the plugin folders and lists what appeared; `restart` also restarts with new code. */
+  const rediscover = Effect.fn("PluginHost.rediscover")(function* (restart: PluginId | undefined) {
+    // Reloading a plugin that stopped the server clears that failure; it stays off until turned on.
+    if (restart !== undefined) yield* pluginsConfig.clearCrash(restart);
+    const { plugins, found } = yield* discover(false);
+    if (restart !== undefined) yield* stopPlugin(restart);
+    const known = yield* Ref.get(records);
+    const next = plugins.map((plugin) => ({
+      plugin,
+      kept:
+        plugin.id === restart || "failure" in plugin
+          ? undefined
+          : known.find(
+              (record) =>
+                record.plugin.id === plugin.id &&
+                record.plugin.folder === plugin.folder &&
+                !("failure" in record.plugin),
+            ),
+    }));
+    // Copies that are gone or moved stop, or they would keep running unlisted.
+    for (const record of known) {
+      if (
+        record.plugin.id !== restart &&
+        !("failure" in record.plugin) &&
+        !next.some(({ kept }) => kept === record)
+      ) {
+        yield* stopPlugin(record.plugin.id);
+      }
+    }
+    // Kept records are read again here: one still starting may have finished while others stopped.
+    yield* Ref.update(records, (current) =>
+      next.map(({ plugin, kept }) => {
+        if (kept === undefined) return initialRecord(plugin, found);
+        const latest = current.find((record) => record.plugin === kept.plugin) ?? kept;
+        // One that runs nothing takes the files found now, so starting it loads their manifest.
+        return latest.status === "active" || latest.status === "loading"
+          ? latest
+          : { ...latest, plugin };
+      }),
+    );
+    yield* publishStates;
+    for (const { plugin, kept } of next) {
+      if (kept === undefined && startsAtDiscovery(plugin, found)) yield* startPlugin(plugin);
+    }
+    return plugins;
+  });
+
+  const reload: PluginHost["Service"]["reload"] = Effect.fn("PluginHost.reload")(
+    function* (pluginId) {
+      yield* runLifecycle(
+        rediscover(pluginId).pipe(
+          Effect.flatMap((plugins) =>
+            plugins.some((plugin) => plugin.id === pluginId)
+              ? Effect.void
+              : Effect.fail(new PluginNotFoundError({ pluginId })),
+          ),
+        ),
+      );
+      yield* awaitActivation(pluginId);
+      return yield* stateOf(pluginId);
+    },
+  );
+
+  const rescan = Effect.fn("PluginHost.rescan")(function* () {
+    // The docs tell people to copy plugin folders here, so it has to exist.
+    yield* fs.makeDirectory(pluginsDir, { recursive: true }).pipe(Effect.ignore);
+    yield* runLifecycle(rediscover(undefined));
+    return { plugins: yield* currentStates };
+  });
+
+  // Lookups inside an operation that already has its span.
+  const manifestFor = Effect.fnUntraced(function* (pluginId: PluginId) {
+    const record = yield* findRecord(pluginId);
+    if (record === undefined) return yield* new PluginNotFoundError({ pluginId });
+    const manifest = manifestOf(record.plugin);
+    if (manifest === undefined) {
+      return yield* new PluginNotActiveError({ pluginId, status: record.status });
+    }
+    return manifest;
+  });
+
+  const activeRecord = Effect.fnUntraced(function* (pluginId: PluginId) {
+    const record = yield* findRecord(pluginId);
+    if (record === undefined) return yield* new PluginNotFoundError({ pluginId });
+    const manifest = manifestOf(record.plugin);
+    if (manifest !== undefined && manifest.server === undefined) {
+      return yield* new PluginNoServerError({ pluginId });
+    }
+    if (record.status !== "active" || record.activation === undefined) {
+      return yield* new PluginNotActiveError({ pluginId, status: record.status });
+    }
+    return record.activation;
+  });
+
+  const { installer, recoverStaging } = yield* PluginInstaller.make({
+    lifecycle: runLifecycle,
+    copies: Ref.get(records).pipe(Effect.map((all) => all.map((record) => record.plugin))),
+    copyOf: (pluginId) =>
+      findRecord(pluginId).pipe(
+        Effect.flatMap((record) =>
+          record === undefined
+            ? Effect.fail(new PluginNotFoundError({ pluginId }))
+            : Effect.succeed(record.plugin),
+        ),
+      ),
+    stop: stopPlugin,
+    rescan: rediscover(undefined).pipe(Effect.asVoid),
+    reload,
+    config: pluginsConfig.current,
+    writeConfig: pluginsConfig.write,
+  });
+
+  const startup = lifecycle
+    .withPermits(1)(
+      Effect.gen(function* () {
+        yield* recoverStaging;
+        const { plugins, found } = yield* discover(true);
+        yield* Ref.set(
+          records,
+          plugins.map((plugin) => initialRecord(plugin, found)),
+        );
+        yield* publishStates;
+        // Each plugin activates in its own fiber, so a slow one delays nobody else.
+        for (const plugin of plugins) {
+          if (startsAtDiscovery(plugin, found)) yield* startPlugin(plugin);
+        }
+      }),
+    )
+    .pipe(Effect.withSpan("PluginHost.startup"));
+
+  yield* forkParked(startup);
+  yield* Effect.addFinalizer(() =>
+    Ref.get(records).pipe(
+      Effect.flatMap((all) =>
+        Effect.forEach(
+          all,
+          (record) =>
+            record.activation === undefined
+              ? Effect.void
+              : teardown(record.plugin.id, record.activation),
+          { concurrency: "unbounded", discard: true },
+        ),
+      ),
+    ),
+  );
+
+  const service = PluginHost.of({
+    list: currentStates,
+    streamStates: pluginStates.stream,
+    listForClient: pluginStates.listForClient,
+    streamForClient: pluginStates.streamForClient,
+    setEnabled,
+    reload,
+    rescan: rescan(),
+    getSettings: Effect.fn("PluginHost.getSettings")(function* (pluginId) {
+      const { settingsSchema } = yield* manifestFor(pluginId);
+      const settings = yield* settingsStore.getForClient(pluginId, settingsSchema);
+      return settingsSchema === undefined ? { settings } : { settings, settingsSchema };
+    }),
+    updateSettings: Effect.fn("PluginHost.updateSettings")(function* (pluginId, patch) {
+      const manifest = yield* manifestFor(pluginId);
+      return yield* settingsStore.update(pluginId, manifest.settingsSchema, patch);
+    }),
+    invoke: Effect.fn("PluginHost.invoke")(function* (request) {
+      yield* Effect.annotateCurrentSpan({
+        "plugin.id": request.pluginId,
+        "plugin.method": request.method,
+      });
+      const activation = yield* activeRecord(request.pluginId);
+      const registered = activation.methods.get(request.method);
+      if (registered === undefined) {
+        return yield* new PluginMethodNotFoundError({
+          pluginId: request.pluginId,
+          method: request.method,
+          methods: [...activation.methods.keys()],
+        });
+      }
+      const access = request.scopes.includes(AuthOrchestrationOperateScope) ? "write" : "read";
+      if (registered.access === "write" && access !== "write") {
+        return yield* new PluginAccessDeniedError({
+          pluginId: request.pluginId,
+          method: request.method,
+          requiredScope: AuthOrchestrationOperateScope,
+        });
+      }
+      const handlerError = (cause: unknown) =>
+        new PluginHandlerError({
+          pluginId: request.pluginId,
+          method: request.method,
+          reason: errorText(cause),
+          cause,
+        });
+      const deactivated = activation.controller.signal;
+      const answered = yield* Effect.raceFirst(
+        // The deadline interrupts the call, which aborts the handler's signal.
+        Effect.tryPromise({
+          try: (signal) =>
+            pluginCodeScope.run(request.pluginId, () =>
+              Promise.resolve().then(() =>
+                registered.handler(request.input, {
+                  signal: AbortSignal.any([signal, deactivated]),
+                  access,
+                }),
+              ),
+            ),
+          catch: handlerError,
+        }).pipe(Effect.timeoutOption(INVOKE_DEADLINE)),
+        // A handler that ignores its abort signal must not hold the call open after disable.
+        Effect.callback<never, PluginNotActiveError>((resume) => {
+          const onAbort = () =>
+            resume(
+              Effect.fail(
+                new PluginNotActiveError({ pluginId: request.pluginId, status: "disabled" }),
+              ),
+            );
+          if (deactivated.aborted) return onAbort();
+          deactivated.addEventListener("abort", onAbort, { once: true });
+          return Effect.sync(() => deactivated.removeEventListener("abort", onAbort));
+        }),
+      );
+      if (Option.isNone(answered)) {
+        return yield* new PluginHandlerTimeoutError({
+          pluginId: request.pluginId,
+          method: request.method,
+        });
+      }
+      const output = answered.value;
+      if (output === undefined) return null;
+      if (!isJson(output)) {
+        return yield* handlerError(new TypeError("The method returned a value that is not JSON."));
+      }
+      return output;
+    }),
+    readWebFile: Effect.fn("PluginHost.readWebFile")(function* (request) {
+      const record = yield* findRecord(request.pluginId);
+      if (record?.status !== "active" || record.webFiles === undefined) return Option.none();
+      return yield* webFiles.read(
+        record.plugin.rootDir,
+        record.webFiles,
+        request.path,
+        request.revision,
+      );
+    }),
+    subscribe: (request) =>
+      Stream.unwrap(
+        Effect.gen(function* () {
+          const activation = yield* activeRecord(request.pluginId);
+          const queue = yield* Queue.sliding<Schema.Json, Cause.Done>(CHANNEL_BUFFER);
+          yield* Effect.acquireRelease(
+            Effect.sync(() => {
+              if (activation.ended.signal.aborted) return Queue.endUnsafe(queue);
+              const queues = activation.channels.get(request.channel) ?? new Set();
+              activation.channels.set(request.channel, queues.add(queue));
+            }),
+            () =>
+              Effect.sync(() => {
+                const queues = activation.channels.get(request.channel);
+                queues?.delete(queue);
+                if (queues?.size === 0) activation.channels.delete(request.channel);
+              }),
+          );
+          return Stream.fromQueue(queue);
+        }),
+      ),
+  });
+  return Context.make(PluginHost, service).pipe(
+    Context.add(PluginInstaller.PluginInstaller, installer),
+  );
+});
+
+/** Provides the host and the installer it builds. */
+export const layer = Layer.effectContext(make);
+
+const WEB_FILES_ROUTE_PREFIX = "/api/plugins";
+
+/** `GET /api/plugins/<pluginId>/<path>`, answered with what the active plugin serves there. */
+export const layerWebFilesRoute = HttpRouter.add(
+  "GET",
+  `${WEB_FILES_ROUTE_PREFIX}/*`,
+  Effect.gen(function* () {
+    // Same sign-in as reads on the rest of `/api`.
+    yield* authenticateRawRouteWithScope(AuthOrchestrationReadScope);
+    const url = HttpServerRequest.toURL(yield* HttpServerRequest.HttpServerRequest);
+    if (Option.isNone(url)) return HttpServerResponse.text("Bad Request", { status: 400 });
+    const rest = url.value.pathname.slice(`${WEB_FILES_ROUTE_PREFIX}/`.length);
+    const slash = rest.indexOf("/");
+    const host = yield* PluginHost;
+    const file = yield* host.readWebFile({
+      pluginId: slash === -1 ? rest : rest.slice(0, slash),
+      path: slash === -1 ? "/" : rest.slice(slash),
+      revision: url.value.searchParams.get("v") ?? undefined,
+    });
+    return Option.match(file, {
+      onNone: () => HttpServerResponse.text("Not Found", { status: 404 }),
+      onSome: ({ headers, body }) => HttpServerResponse.uint8Array(body, { headers }),
+    });
+  }).pipe(
+    Effect.catchTags({
+      EnvironmentAuthInvalidError: HttpServerRespondable.toResponse,
+      EnvironmentInternalError: HttpServerRespondable.toResponse,
+      EnvironmentScopeRequiredError: HttpServerRespondable.toResponse,
+    }),
+  ),
+);
diff --git a/apps/server/src/plugins/PluginInstaller.test.ts b/apps/server/src/plugins/PluginInstaller.test.ts
new file mode 100644
index 0000000000000..c0744d9fc1d61
--- /dev/null
+++ b/apps/server/src/plugins/PluginInstaller.test.ts
@@ -0,0 +1,80 @@
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { assert, it } from "@effect/vitest";
+import { PluginId } from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import * as Layer from "effect/Layer";
+
+import * as ServerConfig from "../config.ts";
+import type { DiscoveredPlugin } from "./pluginDiscovery.ts";
+import { PluginNotFoundError } from "./PluginHost.ts";
+import * as PluginInstaller from "./PluginInstaller.ts";
+import * as PluginSettingsStore from "./PluginSettingsStore.ts";
+import * as PluginStorage from "./PluginStorage.ts";
+
+const linked = PluginId.make("linked");
+const linkedCopy: DiscoveredPlugin = {
+  id: linked,
+  rootDir: "/plugins/linked",
+  folder: "/plugins/linked",
+  source: "dev",
+  manifest: { id: linked, name: "Linked", version: "1.0.0", engines: { t3: ">=0.0.1" } },
+};
+
+/**
+ * A host holding one linked plugin, whose lifecycle lock records whether it is held, and stores
+ * that record what they deleted and whether the lock was held then.
+ */
+const harness = Effect.fn(function* () {
+  let locked = false;
+  const cleared: Array<{ readonly what: string; readonly locked: boolean }> = [];
+  const host: PluginInstaller.PluginInstallerHost = {
+    lifecycle: (body) =>
+      Effect.acquireUseRelease(
+        Effect.sync(() => {
+          locked = true;
+        }),
+        () => body,
+        () =>
+          Effect.sync(() => {
+            locked = false;
+          }),
+      ),
+    copies: Effect.succeed([linkedCopy]),
+    copyOf: (pluginId) =>
+      pluginId === linked
+        ? Effect.succeed(linkedCopy)
+        : Effect.fail(new PluginNotFoundError({ pluginId })),
+    stop: () => Effect.void,
+    rescan: Effect.void,
+    reload: (pluginId) => Effect.fail(new PluginNotFoundError({ pluginId })),
+    config: Effect.succeed({}),
+    writeConfig: () => Effect.void,
+  };
+  const { installer } = yield* PluginInstaller.make(host).pipe(
+    Effect.provide(
+      Layer.mergeAll(
+        Layer.mock(PluginSettingsStore.PluginSettingsStore)({
+          clear: () => Effect.sync(() => cleared.push({ what: "settings", locked })),
+        }),
+        Layer.mock(PluginStorage.PluginStorage)({
+          clear: () => Effect.sync(() => cleared.push({ what: "storage", locked })),
+        }),
+        ServerConfig.layerTest(process.cwd(), { prefix: "t3code-plugin-installer-test-" }),
+      ),
+    ),
+  );
+  return { installer, cleared };
+});
+
+it.layer(NodeServices.layer)("PluginInstaller", (it) => {
+  it.effect("deletes a removed plugin's data before another plugin change can start", () =>
+    Effect.gen(function* () {
+      const { installer, cleared } = yield* harness();
+      yield* installer.uninstall(linked);
+      assert.deepStrictEqual(cleared, [
+        { what: "settings", locked: true },
+        { what: "storage", locked: true },
+      ]);
+    }),
+  );
+});
diff --git a/apps/server/src/plugins/PluginInstaller.ts b/apps/server/src/plugins/PluginInstaller.ts
new file mode 100644
index 0000000000000..eabef26cd3600
--- /dev/null
+++ b/apps/server/src/plugins/PluginInstaller.ts
@@ -0,0 +1,384 @@
+import {
+  type PluginId,
+  PluginManifest,
+  type PluginState,
+  type PluginUploadFile,
+} from "@t3tools/contracts";
+import { satisfiesSemverRange } from "@t3tools/shared/semver";
+import * as Context from "effect/Context";
+import * as Crypto from "effect/Crypto";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as FileSystem from "effect/FileSystem";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Schema from "effect/Schema";
+
+import packageJson from "../../package.json" with { type: "json" };
+import * as ServerConfig from "../config.ts";
+import type { DiscoveredPlugin } from "./pluginDiscovery.ts";
+import type { PluginNotFoundError } from "./PluginHost.ts";
+import { type PluginConfigError, type PluginsConfigFile, withoutCrash } from "./pluginsConfig.ts";
+import * as PluginSettingsStore from "./PluginSettingsStore.ts";
+import * as PluginStorage from "./PluginStorage.ts";
+
+// `reason` is shown to the user as is, so it says what to fix.
+export class PluginInstallError extends Schema.TaggedError<PluginInstallError>()(
+  "PluginInstallError",
+  { reason: Schema.String, cause: Schema.optional(Schema.Defect()) },
+) {
+  override get message(): string {
+    return this.reason;
+  }
+}
+
+/**
+ * Installs and removes plugins. The host builds it and hands it the lifecycle lock, the plugin
+ * list and plugins.json, so the host keeps discovery, activation and state, and a new install
+ * source only changes this file.
+ */
+export class PluginInstaller extends Context.Service<
+  PluginInstaller,
+  {
+    /**
+     * Installs a plugin folder a client sent as files into the plugins folder. A new plugin is
+     * turned off; a replaced one keeps its switch and restarts if on. It is staged first and
+     * swapped in with a rename, so a failed install leaves the previous version.
+     */
+    readonly installFiles: (
+      files: ReadonlyArray<PluginUploadFile>,
+    ) => Effect.Effect<PluginState, PluginInstallError | PluginNotFoundError | PluginConfigError>;
+    /**
+     * Stops a plugin and deletes its folder, settings, secrets and storage; a linked folder is
+     * only forgotten. `folder` picks a copy. A duplicate copy's folder goes alone, and the copy in
+     * use keeps running with the data.
+     */
+    readonly uninstall: (
+      pluginId: PluginId,
+      folder?: string,
+    ) => Effect.Effect<void, PluginInstallError | PluginNotFoundError | PluginConfigError>;
+  }
+>()("t3/plugins/PluginInstaller") {}
+
+/** What the installer needs from the host that builds it. */
+export interface PluginInstallerHost {
+  /**
+   * Runs `body` under the lifecycle lock in the host's scope, so a caller that disconnects only
+   * stops waiting and never leaves a plugin half replaced.
+   */
+  readonly lifecycle: <A, E>(body: Effect.Effect<A, E>) => Effect.Effect<A, E>;
+  /** Every listed copy in discovery's order: an id's first copy is the one in use. */
+  readonly copies: Effect.Effect<ReadonlyArray<DiscoveredPlugin>>;
+  /** The copy of `pluginId` in use. */
+  readonly copyOf: (pluginId: PluginId) => Effect.Effect<DiscoveredPlugin, PluginNotFoundError>;
+  /** Stops a plugin; the caller sets what comes next. Only under `lifecycle`. */
+  readonly stop: (pluginId: PluginId) => Effect.Effect<void>;
+  /** Rescans the plugin folders without restarting anything. Only under `lifecycle`. */
+  readonly rescan: Effect.Effect<void, PluginConfigError>;
+  /** Rescans the plugin folders and restarts the plugin, waiting until it has started. */
+  readonly reload: (
+    pluginId: PluginId,
+  ) => Effect.Effect<PluginState, PluginNotFoundError | PluginConfigError>;
+  /** plugins.json as last read or written. */
+  readonly config: Effect.Effect<PluginsConfigFile>;
+  readonly writeConfig: (
+    update: (current: PluginsConfigFile) => PluginsConfigFile,
+  ) => Effect.Effect<void, PluginConfigError>;
+}
+
+/** What an install takes a plugin from: files a client sent. */
+type InstallOrigin = { readonly files: ReadonlyArray<PluginUploadFile> };
+
+const decodeManifestJson = Schema.decodeUnknownEffect(Schema.fromJsonString(PluginManifest));
+
+const installFailed = (reason: string) => (cause: unknown) =>
+  new PluginInstallError({ reason, cause });
+
+/** Builds the installer for the host. `recoverStaging` runs before the host's first discovery. */
+export const make = Effect.fn("PluginInstaller.make")(function* (host: PluginInstallerHost) {
+  const config = yield* ServerConfig.ServerConfig;
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  const crypto = yield* Crypto.Crypto;
+  const settingsStore = yield* PluginSettingsStore.PluginSettingsStore;
+  const storage = yield* PluginStorage.PluginStorage;
+  const scope = yield* Effect.scope;
+
+  const pluginsDir = path.join(config.stateDir, "plugins");
+  const stagingRoot = path.join(config.stateDir, "plugin-staging");
+
+  // An install interrupted mid-swap (a crash) can leave the old version only in staging. Listed
+  // while the layer builds, before the server serves requests, so recovery never touches the
+  // staging folder of an install that starts after that.
+  const leftoverStaging = yield* fs
+    .readDirectory(stagingRoot)
+    .pipe(Effect.orElseSucceed((): ReadonlyArray<string> => []));
+  const recoverStaging = Effect.gen(function* () {
+    for (const entry of leftoverStaging) {
+      const previous = path.join(stagingRoot, entry, "previous");
+      const manifest = yield* fs
+        .readFileString(path.join(previous, "t3-plugin.json"))
+        .pipe(Effect.flatMap(decodeManifestJson), Effect.option);
+      if (Option.isSome(manifest)) {
+        const target = path.join(pluginsDir, manifest.value.id);
+        const replaced = yield* fs.exists(target).pipe(Effect.orElseSucceed(() => true));
+        if (!replaced) {
+          yield* fs.makeDirectory(pluginsDir, { recursive: true }).pipe(Effect.ignore);
+          yield* fs.rename(previous, target).pipe(Effect.ignore);
+        }
+      }
+      yield* fs
+        .remove(path.join(stagingRoot, entry), { recursive: true, force: true })
+        .pipe(Effect.ignore);
+    }
+  }).pipe(Effect.withSpan("PluginInstaller.recoverStaging"));
+
+  // A caller that disconnects stops waiting but cannot interrupt a swap or a staging cleanup.
+  const inHostScope = <A, E>(body: Effect.Effect<A, E>) =>
+    body.pipe(Effect.forkIn(scope), Effect.flatMap(Fiber.join));
+
+  const readSourceManifest = (folder: string) =>
+    fs.readFileString(path.join(folder, "t3-plugin.json")).pipe(
+      Effect.mapError(installFailed("The source has no t3-plugin.json.")),
+      Effect.flatMap((raw) =>
+        decodeManifestJson(raw).pipe(
+          Effect.mapError(installFailed("The source's t3-plugin.json is not a valid manifest.")),
+        ),
+      ),
+    );
+
+  // The upload schema checks that every path stays inside `into`.
+  const writeFiles = Effect.fn("PluginInstaller.writeFiles")(function* (
+    files: ReadonlyArray<{ readonly path: string; readonly contents: Uint8Array }>,
+    into: string,
+  ) {
+    for (const file of files) {
+      const target = path.join(into, ...file.path.split("/"));
+      yield* fs
+        .makeDirectory(path.dirname(target), { recursive: true })
+        .pipe(
+          Effect.andThen(fs.writeFile(target, file.contents)),
+          Effect.mapError(installFailed(`Could not write ${file.path}.`)),
+        );
+    }
+  });
+
+  /** Why this server cannot run `manifest`, checked before anything is stopped or moved. */
+  const refusal = (manifest: PluginManifest) => {
+    if (!satisfiesSemverRange(packageJson.version, manifest.engines.t3)) {
+      return `${manifest.name} ${manifest.version} needs T3 Code ${manifest.engines.t3}, and this server is ${packageJson.version}.`;
+    }
+    const schemaProblem =
+      manifest.settingsSchema === undefined
+        ? undefined
+        : PluginSettingsStore.settingsSchemaProblem(manifest.settingsSchema);
+    return schemaProblem === undefined
+      ? undefined
+      : `${manifest.name} ${manifest.version} has a settingsSchema T3 Code cannot validate: ${schemaProblem}`;
+  };
+
+  /**
+   * Swaps `<stagingDir>/plugin` into the plugins folder under the lifecycle lock and starts it if it
+   * is on. The replaced version waits in `<stagingDir>/previous` and goes back if the new one fails
+   * to start. `stagingDir` is removed unless it holds a version's only copy, which startup then
+   * restores.
+   */
+  const swapIn = Effect.fn("PluginInstaller.swapIn")(function* (
+    manifest: PluginManifest,
+    stagingDir: string,
+  ) {
+    const staged = path.join(stagingDir, "plugin");
+    const previous = path.join(stagingDir, "previous");
+    let stopped = false;
+    let stranded = false;
+    yield* Effect.addFinalizer(() => (stranded ? Effect.void : removeStaging(stagingDir)));
+    const swapped = yield* host
+      .lifecycle(
+        // Read under the lock, so another install or a removal cannot change them before the swap.
+        Effect.gen(function* () {
+          const copies = yield* host.copies;
+          const existing = copies.find((copy) => copy.id === manifest.id);
+          if (existing?.source === "dev") {
+            return yield* new PluginInstallError({
+              reason: `${manifest.id} is linked from ${existing.folder}. Unlink it first.`,
+            });
+          }
+          const target =
+            existing === undefined ? path.join(pluginsDir, manifest.id) : existing.folder;
+          // A folder put there by hand holds another plugin, or none, which the swap would delete.
+          if (
+            existing === undefined &&
+            (yield* fs.exists(target).pipe(Effect.orElseSucceed(() => true)))
+          ) {
+            const owner = copies.find((copy) => copy.folder === target);
+            return yield* new PluginInstallError({
+              reason: `The plugins folder already has a ${manifest.id} folder${owner === undefined ? "" : ` holding ${owner.id}`}. Move it, then install again.`,
+            });
+          }
+          // A new plugin starts off, so none of it runs until the user has seen its row and turned
+          // it on. A replaced one keeps its switch.
+          const enabled =
+            existing !== undefined && (yield* host.config).enabled?.[manifest.id] === true;
+          stopped = true;
+          yield* host.stop(manifest.id);
+          yield* fs
+            .makeDirectory(pluginsDir, { recursive: true })
+            .pipe(Effect.mapError(installFailed("Could not create the plugins folder.")));
+          const hadPrevious = yield* fs.exists(target).pipe(Effect.orElseSucceed(() => false));
+          if (hadPrevious) {
+            yield* fs
+              .rename(target, previous)
+              .pipe(Effect.mapError(installFailed("Could not move the installed version aside.")));
+          }
+          yield* fs.rename(staged, target).pipe(
+            Effect.mapError(installFailed("Could not move the new version into place.")),
+            Effect.tapError(() =>
+              hadPrevious ? fs.rename(previous, target).pipe(Effect.ignore) : Effect.void,
+            ),
+          );
+          yield* host.writeConfig((current) => ({
+            ...current,
+            enabled: { ...current.enabled, [manifest.id]: enabled },
+          }));
+          return {
+            target,
+            hadPrevious,
+            replacedVersion:
+              existing !== undefined && "manifest" in existing
+                ? existing.manifest.version
+                : undefined,
+          };
+        }),
+      )
+      .pipe(
+        // Whatever failed after the stop, the plugin folder holds one version; start it again.
+        Effect.onError(() =>
+          stopped ? host.reload(manifest.id).pipe(Effect.ignore) : Effect.void,
+        ),
+      );
+    const started = yield* host.reload(manifest.id);
+    if (!swapped.hadPrevious || started.status !== "failed") return started;
+    yield* host
+      .lifecycle(
+        Effect.gen(function* () {
+          yield* host.stop(manifest.id);
+          yield* fs
+            .rename(swapped.target, path.join(stagingDir, "failed"))
+            .pipe(Effect.mapError(installFailed("Could not move the failed version aside.")));
+          yield* fs.rename(previous, swapped.target).pipe(
+            Effect.tapError(() =>
+              Effect.sync(() => {
+                stranded = true;
+              }),
+            ),
+            Effect.mapError(
+              installFailed("Could not put the previous version back. Restart T3 Code to finish."),
+            ),
+          );
+        }),
+      )
+      .pipe(Effect.ensuring(host.reload(manifest.id).pipe(Effect.ignore)));
+    return yield* new PluginInstallError({
+      reason: `${manifest.name} ${manifest.version} failed to start, so ${swapped.replacedVersion ?? "the previous version"} is back. It failed with: ${started.failure?.message ?? "an unknown error"}`,
+    });
+  }, Effect.scoped);
+
+  /** Copies `origin` into a new staging folder and returns the folder and what it holds. */
+  const stage = Effect.fn("PluginInstaller.stage")(function* (origin: InstallOrigin) {
+    const stagingDir = path.join(stagingRoot, yield* crypto.randomUUIDv4().pipe(Effect.orDie));
+    const staged = path.join(stagingDir, "plugin");
+    yield* fs
+      .makeDirectory(stagingDir, { recursive: true })
+      .pipe(Effect.mapError(installFailed("Could not create the staging folder.")));
+    return yield* Effect.gen(function* () {
+      yield* writeFiles(origin.files, staged);
+      return { stagingDir, manifest: yield* readSourceManifest(staged) };
+    }).pipe(Effect.tapError(() => removeStaging(stagingDir)));
+  });
+
+  const removeStaging = (stagingDir: string) =>
+    fs.remove(stagingDir, { recursive: true, force: true }).pipe(Effect.ignore);
+
+  const installOrigin = Effect.fn("PluginInstaller.installOrigin")(function* (
+    origin: InstallOrigin,
+  ) {
+    const { stagingDir, manifest } = yield* stage(origin);
+    const reason = refusal(manifest);
+    if (reason !== undefined) {
+      yield* removeStaging(stagingDir);
+      return yield* new PluginInstallError({ reason });
+    }
+    return yield* swapIn(manifest, stagingDir);
+  });
+
+  // `PluginUploadFiles` bounds the folder's size before it gets here.
+  const installFiles: PluginInstaller["Service"]["installFiles"] = Effect.fn(
+    "PluginInstaller.installFiles",
+  )((files) => inHostScope(installOrigin({ files })));
+
+  const removeFromConfig = (pluginId: PluginId) =>
+    host.writeConfig((current) => {
+      const { [pluginId]: _removed, ...enabled } = current.enabled ?? {};
+      return { ...withoutCrash(current, pluginId), enabled };
+    });
+
+  const forgetDevPath = (folder: string) =>
+    host.writeConfig((current) => ({
+      ...current,
+      devPaths: (current.devPaths ?? []).filter((entry) => path.resolve(entry) !== folder),
+    }));
+
+  // The folder as listed, not `rootDir`: that is the real path, so a symlinked plugin would delete
+  // the user's own folder behind the link. A linked folder is the author's own; only plugins.json
+  // forgets it.
+  const removeFolder = (copy: DiscoveredPlugin) =>
+    copy.source === "dev"
+      ? forgetDevPath(copy.folder)
+      : fs
+          .remove(copy.folder, { recursive: true, force: true })
+          .pipe(Effect.mapError(installFailed(`Could not delete ${copy.folder}.`)));
+
+  const uninstall: PluginInstaller["Service"]["uninstall"] = Effect.fn("PluginInstaller.uninstall")(
+    (pluginId, folder) =>
+      host.lifecycle(
+        Effect.gen(function* () {
+          const inUse = yield* host.copyOf(pluginId);
+          const copy =
+            folder === undefined
+              ? inUse
+              : (yield* host.copies).find(
+                  (candidate) =>
+                    candidate.id === pluginId && candidate.folder === path.resolve(folder),
+                );
+          if (copy === undefined) {
+            return yield* new PluginInstallError({
+              reason: `No copy of ${pluginId} is in ${folder}.`,
+            });
+          }
+          if (copy !== inUse) {
+            yield* removeFolder(copy);
+            return yield* host.rescan;
+          }
+          yield* host.stop(pluginId);
+          yield* removeFolder(copy);
+          yield* removeFromConfig(pluginId);
+          // Lists a duplicate copy afresh, turned off.
+          yield* host.rescan;
+          // Under the lock, or an install that starts meanwhile could lose its new settings.
+          yield* settingsStore
+            .clear(pluginId)
+            .pipe(
+              Effect.mapError(installFailed("The plugin is removed, but its settings are not.")),
+            );
+          yield* storage
+            .clear(pluginId)
+            .pipe(Effect.mapError(installFailed("The plugin is removed, but its storage is not.")));
+        }),
+      ),
+  );
+
+  return {
+    installer: PluginInstaller.of({ installFiles, uninstall }),
+    recoverStaging,
+  };
+});
diff --git a/apps/server/src/plugins/PluginMcpTools.test.ts b/apps/server/src/plugins/PluginMcpTools.test.ts
new file mode 100644
index 0000000000000..c8301a3db0943
--- /dev/null
+++ b/apps/server/src/plugins/PluginMcpTools.test.ts
@@ -0,0 +1,297 @@
+import { assert, it } from "@effect/vitest";
+import { EnvironmentId, PluginId, ProviderInstanceId, ThreadId } from "@t3tools/contracts";
+import type { PluginApi, PluginDefinition } from "@t3tools/plugin-sdk/server";
+import * as Context from "effect/Context";
+import * as Duration from "effect/Duration";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as Layer from "effect/Layer";
+import * as TestClock from "effect/testing/TestClock";
+import { McpSchema, McpServer } from "effect/ai";
+
+import * as McpHttpServer from "../mcp/McpHttpServer.ts";
+import * as McpInvocationContext from "../mcp/McpInvocationContext.ts";
+import { liveThreadsLayer } from "../mcp/McpToolAccess.testkit.ts";
+import { makeFacadeContext } from "./api/facade.ts";
+import { makeMcpApi } from "./api/mcp.ts";
+import { makePluginActivation } from "./PluginApi.ts";
+import * as PluginMcpTools from "./PluginMcpTools.ts";
+
+const fixturesDir = new URL("../../../../packages/plugin-sdk/fixtures/", import.meta.url).pathname;
+const mcpPlugin = PluginId.make("mcp-plugin");
+
+const layerTest = McpHttpServer.layerPluginTools.pipe(
+  Layer.provideMerge(PluginMcpTools.layer),
+  Layer.provideMerge(McpServer.McpServer.layer),
+  Layer.provideMerge(liveThreadsLayer),
+);
+
+const mcpClient = McpSchema.McpServerClient.of({
+  clientId: 1,
+  protocolVersion: "2025-06-18",
+  clientCapabilities: {},
+  clientInfo: { name: "mcp-test", version: "1" },
+  initializePayload: {
+    protocolVersion: "2025-06-18",
+    capabilities: {},
+    clientInfo: { name: "mcp-test", version: "1" },
+  },
+  getClient: Effect.die("unused"),
+});
+
+const threadCaller: McpInvocationContext.McpInvocationScope = {
+  environmentId: EnvironmentId.make("environment"),
+  requestNamespace: "provider:thread",
+  thread: {
+    threadId: ThreadId.make("thread:caller"),
+    providerSessionId: "provider:thread",
+    providerInstanceId: ProviderInstanceId.make("codex"),
+  },
+  client: undefined,
+  capabilities: new Set(),
+  issuedAt: 0,
+};
+
+// Plugin write tools need what environment writes need: a full-access caller.
+const fullAccessClient: McpInvocationContext.McpInvocationScope = {
+  environmentId: EnvironmentId.make("environment"),
+  requestNamespace: "client:full",
+  thread: undefined,
+  client: { sessionId: "full", label: "Claude Code", access: "full-access" },
+  capabilities: new Set(["orchestration"]),
+  issuedAt: 0,
+};
+
+const readOnlyClient: McpInvocationContext.McpInvocationScope = {
+  environmentId: EnvironmentId.make("environment"),
+  requestNamespace: "client:session",
+  thread: undefined,
+  client: { sessionId: "session", label: "Claude Code", access: "read-only" },
+  capabilities: new Set(),
+  issuedAt: 0,
+};
+
+const call = (
+  name: string,
+  scope: McpInvocationContext.McpInvocationScope,
+  args: Record<string, unknown> = {},
+) =>
+  McpServer.McpServer.pipe(
+    Effect.flatMap((server) => server.callTool({ name, arguments: args })),
+    Effect.map((result) => ({
+      isError: result.isError === true,
+      text: result.content.map((part) => (part.type === "text" ? part.text : "")).join(""),
+    })),
+    Effect.provideService(McpInvocationContext.McpInvocationContext, scope),
+    Effect.provideService(McpSchema.McpServerClient, mcpClient),
+  );
+
+// What `tools/list` shows the client: the tools whose `EnabledWhen` passes.
+const toolNames = McpServer.McpServer.pipe(
+  Effect.map((server) =>
+    server.tools
+      .filter(
+        ({ annotations }) =>
+          Context.getOrUndefined(
+            annotations,
+            McpSchema.EnabledWhen,
+          )?.({
+            protocolVersion: mcpClient.protocolVersion,
+            capabilities: mcpClient.clientCapabilities,
+            clientInfo: mcpClient.clientInfo,
+          }) ?? true,
+      )
+      .map(({ tool }) => tool.name),
+  ),
+);
+
+/** Lists tools, then calls `name`, which must be gone from both. */
+const assertGone = Effect.fn(function* (name: string) {
+  assert.notInclude(yield* toolNames, name);
+  const notFound = yield* call(name, fullAccessClient).pipe(Effect.flip);
+  assert.include(notFound.message, "not found");
+});
+
+const isDefinition = (value: unknown): value is PluginDefinition =>
+  typeof value === "object" &&
+  value !== null &&
+  "activate" in value &&
+  typeof value.activate === "function";
+
+/** Activates the fixture with only the `mcp` group, the one it uses. */
+const activateFixture = Effect.fn(function* () {
+  const loaded: unknown = yield* Effect.promise(
+    () => import(`${fixturesDir}mcp-plugin/server.cjs`),
+  );
+  const definition =
+    typeof loaded === "object" && loaded !== null && "default" in loaded
+      ? loaded.default
+      : undefined;
+  assert(isDefinition(definition));
+  const activation = makePluginActivation();
+  const facade = makeFacadeContext({
+    pluginId: mcpPlugin,
+    activation,
+    context: yield* Effect.context<never>(),
+  });
+  const api: Pick<PluginApi, "mcp"> = {
+    mcp: makeMcpApi(facade, { mcpTools: yield* PluginMcpTools.PluginMcpTools }),
+  };
+  yield* Effect.promise(() => Promise.resolve(definition.activate(api as PluginApi)));
+  return { ...api, activation };
+});
+
+it.effect("answer under plg_ names with access checks, and leave the list once stopped", () =>
+  Effect.gen(function* () {
+    const api = yield* activateFixture();
+    api.mcp.registerTool(
+      { name: "fail", description: "Throws.", inputSchema: { type: "object" }, access: "read" },
+      () => {
+        throw new Error("boom");
+      },
+    );
+    api.mcp.registerTool(
+      {
+        name: "caller",
+        description: "Names its caller.",
+        inputSchema: { type: "object" },
+        access: "read",
+      },
+      (_input, { threadId }) => ({ threadId }),
+    );
+    assert.throws(
+      () =>
+        api.mcp.registerTool(
+          { name: "no spaces", description: "", inputSchema: {}, access: "read" },
+          () => null,
+        ),
+      TypeError,
+    );
+    // Anthropic's API refuses the whole tool list over one of these at the top.
+    assert.throws(
+      () =>
+        api.mcp.registerTool(
+          {
+            name: "either",
+            description: "Takes one of two shapes.",
+            inputSchema: { type: "object", oneOf: [{ required: ["a"] }, { required: ["b"] }] },
+            access: "read",
+          },
+          () => null,
+        ),
+      /oneOf at the top of its input schema/,
+    );
+    assert.throws(
+      () =>
+        api.mcp.registerTool(
+          {
+            name: "verbose",
+            description: "x".repeat(1001),
+            inputSchema: { type: "object" },
+            access: "read",
+          },
+          () => null,
+        ),
+      /1000 characters/,
+    );
+    assert.throws(
+      () =>
+        api.mcp.registerTool(
+          {
+            name: "wide",
+            description: "Takes a long schema.",
+            inputSchema: { type: "object", description: "x".repeat(4000) },
+            access: "read",
+          },
+          () => null,
+        ),
+      /4000 characters/,
+    );
+
+    const names = yield* toolNames;
+    assert.includeMembers(names, ["plg_mcp-plugin_echo", "plg_mcp-plugin_touch"]);
+    assert.deepStrictEqual(yield* call("plg_mcp-plugin_echo", readOnlyClient, { text: "hi" }), {
+      isError: false,
+      text: '{"echoed":"hi"}',
+    });
+    const refused = yield* call("plg_mcp-plugin_touch", readOnlyClient);
+    assert.isTrue(refused.isError);
+    assert.include(refused.text, "read-only");
+    assert.deepStrictEqual(yield* call("plg_mcp-plugin_touch", fullAccessClient), {
+      isError: false,
+      text: '{"touches":1}',
+    });
+    assert.deepStrictEqual(yield* call("plg_mcp-plugin_caller", threadCaller), {
+      isError: false,
+      text: '{"threadId":"thread:caller"}',
+    });
+    assert.deepStrictEqual(yield* call("plg_mcp-plugin_caller", fullAccessClient), {
+      isError: false,
+      text: '{"threadId":null}',
+    });
+    assert.deepStrictEqual(yield* call("plg_mcp-plugin_fail", threadCaller), {
+      isError: true,
+      text: "Plugin mcp-plugin failed in fail: boom",
+    });
+
+    // A call to a handler that ignores its abort signal ends at the deadline, which aborts the
+    // signal, or when the plugin turns off.
+    const signals: Array<AbortSignal> = [];
+    let reached = Promise.withResolvers<void>();
+    api.mcp.registerTool(
+      {
+        name: "hang",
+        description: "Never answers.",
+        inputSchema: { type: "object" },
+        access: "read",
+      },
+      (_input, { signal }) => {
+        signals.push(signal);
+        reached.resolve();
+        return new Promise(() => undefined);
+      },
+    );
+    const timedOut = yield* call("plg_mcp-plugin_hang", threadCaller).pipe(
+      Effect.forkChild({ startImmediately: true }),
+    );
+    yield* Effect.promise(() => reached.promise);
+    yield* TestClock.adjust(Duration.minutes(5));
+    assert.deepStrictEqual(yield* Fiber.join(timedOut), {
+      isError: true,
+      text: "Plugin mcp-plugin did not answer hang within 5 minutes.",
+    });
+    assert.isTrue(signals[0]?.aborted);
+
+    reached = Promise.withResolvers<void>();
+    const hanging = yield* call("plg_mcp-plugin_hang", threadCaller).pipe(
+      Effect.forkChild({ startImmediately: true }),
+    );
+    yield* Effect.promise(() => reached.promise);
+
+    const offered = (yield* toolNames).filter((name) => name.startsWith("plg_mcp-plugin_"));
+    const extra = {
+      description: "Extra.",
+      inputSchema: { type: "object" },
+      access: "read",
+    } as const;
+    for (let index = offered.length; index < 32; index++) {
+      api.mcp.registerTool({ ...extra, name: `extra-${index}` }, () => null);
+    }
+    assert.throws(
+      () => api.mcp.registerTool({ ...extra, name: "one-more" }, () => null),
+      /at most 32 tools/,
+    );
+    // Replacing a tool doesn't add one.
+    api.mcp.registerTool({ ...extra, name: "caller" }, () => null);
+
+    api.activation.controller.abort();
+    assert.deepStrictEqual(yield* Fiber.join(hanging), {
+      isError: true,
+      text: "Plugin mcp-plugin is disabled.",
+    });
+
+    const tools = yield* PluginMcpTools.PluginMcpTools;
+    yield* tools.unregisterPlugin(mcpPlugin);
+    yield* assertGone("plg_mcp-plugin_echo");
+  }).pipe(Effect.provide(layerTest)),
+);
diff --git a/apps/server/src/plugins/PluginMcpTools.ts b/apps/server/src/plugins/PluginMcpTools.ts
new file mode 100644
index 0000000000000..ad4826c559669
--- /dev/null
+++ b/apps/server/src/plugins/PluginMcpTools.ts
@@ -0,0 +1,220 @@
+import { PluginId } from "@t3tools/contracts";
+import type { PluginMcpTool, PluginRpcAccess } from "@t3tools/plugin-sdk/server";
+import * as Context from "effect/Context";
+import * as Duration from "effect/Duration";
+import * as Effect from "effect/Effect";
+import * as Layer from "effect/Layer";
+import * as Schema from "effect/Schema";
+import type * as Scope from "effect/Scope";
+
+import { abortEffect, errorText } from "./api/facade.ts";
+
+// MCP clients reject longer tool names.
+const MAX_TOOL_NAME_CHARS = 64;
+const TOOL_NAME_PATTERN = /^[a-zA-Z0-9_-]+$/;
+// Every thread's agent reads every enabled plugin's tools.
+const MAX_TOOLS_PER_PLUGIN = 32;
+const MAX_DESCRIPTION_CHARS = 1000;
+// Measured as the JSON clients receive.
+const MAX_INPUT_SCHEMA_CHARS = 4000;
+// Longer than a client's call, because a tool may do real work, but a hung one frees the turn.
+const TOOL_CALL_DEADLINE = Duration.minutes(5);
+
+const isJson = Schema.is(Schema.Json);
+const encodeJson = Schema.encodeSync(Schema.fromJsonString(Schema.JsonObject));
+
+export class PluginMcpToolNameError extends Schema.TaggedError<PluginMcpToolNameError>()(
+  "PluginMcpToolNameError",
+  { pluginId: PluginId },
+) {
+  override get message(): string {
+    return `Tool names use letters, digits, "_" and "-", and plg_${this.pluginId}_<name> must fit in ${MAX_TOOL_NAME_CHARS} characters.`;
+  }
+}
+export const isPluginMcpToolNameError = Schema.is(PluginMcpToolNameError);
+
+export class PluginMcpToolLimitError extends Schema.TaggedError<PluginMcpToolLimitError>()(
+  "PluginMcpToolLimitError",
+  { tool: Schema.String, limit: Schema.Literals(["tools", "description", "inputSchema"]) },
+) {
+  override get message(): string {
+    switch (this.limit) {
+      case "tools":
+        return `A plugin registers at most ${MAX_TOOLS_PER_PLUGIN} tools, so "${this.tool}" was not added.`;
+      case "description":
+        return `Tool "${this.tool}" needs a description of at most ${MAX_DESCRIPTION_CHARS} characters.`;
+      case "inputSchema":
+        return `Tool "${this.tool}" needs an input schema of at most ${MAX_INPUT_SCHEMA_CHARS} characters as JSON.`;
+    }
+  }
+}
+
+// `reason` is the plugin's own error text, bounded, so the agent can see why the tool failed.
+export class PluginMcpToolError extends Schema.TaggedError<PluginMcpToolError>()(
+  "PluginMcpToolError",
+  { pluginId: PluginId, tool: Schema.String, reason: Schema.String, cause: Schema.Defect() },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} failed in ${this.tool}: ${this.reason}`;
+  }
+}
+
+export class PluginMcpToolTimeoutError extends Schema.TaggedError<PluginMcpToolTimeoutError>()(
+  "PluginMcpToolTimeoutError",
+  { pluginId: PluginId, tool: Schema.String },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} did not answer ${this.tool} within ${Duration.toMinutes(TOOL_CALL_DEADLINE)} minutes.`;
+  }
+}
+
+export class PluginMcpToolDisabledError extends Schema.TaggedError<PluginMcpToolDisabledError>()(
+  "PluginMcpToolDisabledError",
+  { pluginId: PluginId },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} is disabled.`;
+  }
+}
+
+/** One tool as `/mcp` advertises it. `call` runs it; McpHttpServer checks `access` first. */
+export interface PluginMcpToolEntry {
+  readonly name: string;
+  readonly description: string;
+  readonly inputSchema: Schema.JsonObject;
+  readonly access: PluginRpcAccess;
+  readonly call: (
+    input: Schema.JsonObject,
+    caller: { readonly threadId: string | null },
+  ) => Effect.Effect<
+    Schema.Json,
+    PluginMcpToolError | PluginMcpToolTimeoutError | PluginMcpToolDisabledError
+  >;
+}
+
+export class PluginMcpTools extends Context.Service<
+  PluginMcpTools,
+  {
+    /** Offers `tool` to agents as `plg_<pluginId>_<name>`, replacing a tool of that name. */
+    readonly register: (input: {
+      readonly pluginId: PluginId;
+      readonly tool: PluginMcpTool;
+      /** `signal` aborts when the agent cancels the call or the deadline passes. */
+      readonly handler: (
+        input: Schema.JsonObject,
+        context: { readonly signal: AbortSignal; readonly threadId: string | null },
+      ) => Promise<Schema.Json>;
+      /** Aborts when the plugin turns off; a call still running then answers that it is disabled. */
+      readonly deactivated: AbortSignal;
+    }) => Effect.Effect<void, PluginMcpToolNameError | PluginMcpToolLimitError>;
+    /** Withdraws the plugin's tools. */
+    readonly unregisterPlugin: (pluginId: PluginId) => Effect.Effect<void>;
+    /**
+     * Whether `/mcp` lists and runs the tool, read on every list and call. Withdrawn tools stay
+     * registered, because MCP servers can't remove one, so this hides them.
+     */
+    readonly isOffered: (name: string) => boolean;
+    /**
+     * Hands `publish` every tool now and each change until the scope closes. A withdrawn tool is
+     * published again, so clients hear the list changed.
+     */
+    readonly attach: (
+      publish: (tool: PluginMcpToolEntry) => Effect.Effect<void>,
+    ) => Effect.Effect<void, never, Scope.Scope>;
+  }
+>()("t3/plugins/PluginMcpTools") {}
+
+const make = () => {
+  // Every change runs synchronously, so plugin activation can register a tool and return.
+  const tools = new Map<string, PluginMcpToolEntry>();
+  const toolsByPlugin = new Map<PluginId, Set<string>>();
+  const publishers = new Set<(tool: PluginMcpToolEntry) => Effect.Effect<void>>();
+  // Inside `register` or `unregisterPlugin`, which have their spans.
+  const publish = Effect.fnUntraced(function* (entry: PluginMcpToolEntry) {
+    tools.set(entry.name, entry);
+    for (const publisher of publishers) yield* publisher(entry);
+  });
+  const withdraw = Effect.fnUntraced(function* (name: string) {
+    const entry = tools.get(name);
+    if (entry === undefined) return;
+    tools.delete(name);
+    for (const publisher of publishers) yield* publisher(entry);
+  });
+
+  return PluginMcpTools.of({
+    register: Effect.fn("PluginMcpTools.register")(function* ({
+      pluginId,
+      tool,
+      handler,
+      deactivated,
+    }) {
+      const name = `plg_${pluginId}_${tool.name}`;
+      if (!TOOL_NAME_PATTERN.test(tool.name) || name.length > MAX_TOOL_NAME_CHARS) {
+        return yield* new PluginMcpToolNameError({ pluginId });
+      }
+      if (tool.description.length > MAX_DESCRIPTION_CHARS) {
+        return yield* new PluginMcpToolLimitError({ tool: tool.name, limit: "description" });
+      }
+      if (encodeJson(tool.inputSchema).length > MAX_INPUT_SCHEMA_CHARS) {
+        return yield* new PluginMcpToolLimitError({ tool: tool.name, limit: "inputSchema" });
+      }
+      const names = toolsByPlugin.get(pluginId) ?? new Set();
+      if (!names.has(name) && names.size >= MAX_TOOLS_PER_PLUGIN) {
+        return yield* new PluginMcpToolLimitError({ tool: tool.name, limit: "tools" });
+      }
+      const failed = (cause: unknown) =>
+        new PluginMcpToolError({ pluginId, tool: tool.name, reason: errorText(cause), cause });
+      toolsByPlugin.set(pluginId, names.add(name));
+      yield* publish({
+        name,
+        description: tool.description,
+        inputSchema: tool.inputSchema,
+        access: tool.access,
+        call: (input, caller) =>
+          Effect.raceFirst(
+            Effect.tryPromise({
+              try: (signal) => handler(input, { signal, threadId: caller.threadId }),
+              catch: failed,
+            }).pipe(
+              // The deadline interrupts the call, which aborts the handler's signal.
+              Effect.timeoutOrElse({
+                duration: TOOL_CALL_DEADLINE,
+                orElse: () =>
+                  Effect.fail(new PluginMcpToolTimeoutError({ pluginId, tool: tool.name })),
+              }),
+              Effect.flatMap((output: unknown) =>
+                output === undefined
+                  ? Effect.succeed(null)
+                  : isJson(output)
+                    ? Effect.succeed(output)
+                    : Effect.fail(
+                        failed(new TypeError("The tool returned a value that is not JSON.")),
+                      ),
+              ),
+            ),
+            // A handler that ignores its abort signal must not hold the agent's call open.
+            abortEffect(deactivated).pipe(
+              Effect.andThen(Effect.fail(new PluginMcpToolDisabledError({ pluginId }))),
+            ),
+          ),
+      });
+    }),
+    unregisterPlugin: Effect.fn("PluginMcpTools.unregisterPlugin")(function* (pluginId) {
+      const names = toolsByPlugin.get(pluginId);
+      toolsByPlugin.delete(pluginId);
+      for (const name of names ?? []) yield* withdraw(name);
+    }),
+    isOffered: (name) => tools.has(name),
+    attach: Effect.fn("PluginMcpTools.attach")((publisher) =>
+      Effect.acquireRelease(
+        Effect.gen(function* () {
+          publishers.add(publisher);
+          for (const entry of tools.values()) yield* publisher(entry);
+        }),
+        () => Effect.sync(() => publishers.delete(publisher)),
+      ),
+    ),
+  });
+};
+
+export const layer = Layer.sync(PluginMcpTools, make);
diff --git a/apps/server/src/plugins/PluginSettingsStore.test.ts b/apps/server/src/plugins/PluginSettingsStore.test.ts
new file mode 100644
index 0000000000000..b965885668d52
--- /dev/null
+++ b/apps/server/src/plugins/PluginSettingsStore.test.ts
@@ -0,0 +1,219 @@
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { PluginId } from "@t3tools/contracts";
+import { assert, it } from "@effect/vitest";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Schema from "effect/Schema";
+import * as Stream from "effect/Stream";
+
+import * as ServerSecretStore from "../auth/ServerSecretStore.ts";
+import * as ServerConfig from "../config.ts";
+import * as SqlitePersistence from "../persistence/Sqlite.ts";
+import * as ServerSettings from "../serverSettings.ts";
+import { SECRET_REDACTED } from "../settingsSecrets.ts";
+import * as PluginSettingsStore from "./PluginSettingsStore.ts";
+
+const hello = PluginId.make("hello");
+
+const settingsSchema: Schema.JsonObject = {
+  type: "object",
+  properties: {
+    count: { type: "integer", minimum: 0 },
+    name: { type: "string" },
+    token: { type: "string", format: "t3-secret" },
+  },
+  additionalProperties: false,
+};
+
+// Like a keychain, this store can't list what it holds.
+const layerSecretStoreWithoutFolder = Layer.effect(
+  ServerSecretStore.ServerSecretStore,
+  Effect.map(ServerSecretStore.make, ({ directory: _directory, ...store }) =>
+    ServerSecretStore.ServerSecretStore.of(store),
+  ),
+);
+
+const layerTest = () =>
+  Layer.mergeAll(PluginSettingsStore.layer, ServerSettings.layer).pipe(
+    Layer.provideMerge(layerSecretStoreWithoutFolder),
+    Layer.provideMerge(Layer.fresh(SqlitePersistence.layerMemory)),
+    Layer.provideMerge(
+      Layer.fresh(
+        ServerConfig.layerTest(process.cwd(), { prefix: "t3code-plugin-settings-test-" }),
+      ),
+    ),
+  );
+
+const readSettingsFile = Effect.gen(function* () {
+  const { stateDir } = yield* ServerConfig.ServerConfig;
+  const fileSystem = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  return yield* fileSystem.readFileString(
+    path.join(stateDir, "plugin-data", hello, "settings.json"),
+  );
+});
+
+it.layer(NodeServices.layer)("PluginSettingsStore", (it) => {
+  it.effect("rejects values outside the schema without writing them", () =>
+    Effect.gen(function* () {
+      const store = yield* PluginSettingsStore.PluginSettingsStore;
+      yield* store.update(hello, settingsSchema, { count: 1 });
+
+      const error = yield* Effect.flip(
+        store.update(hello, settingsSchema, { count: -1, extra: true }),
+      );
+      assert.strictEqual(error._tag, "PluginSettingsValidationError");
+      assert.include(error.message, 'at ["count"]: Expected a value greater than or equal to 0');
+      assert.include(error.message, 'at ["extra"]: Expected no excess property');
+      assert.deepStrictEqual(yield* store.get(hello, settingsSchema), { count: 1 });
+
+      const unreadable = yield* Effect.flip(
+        store.update(hello, { type: "object", properties: { count: { $ref: "#/$defs/no" } } }, {}),
+      );
+      assert.strictEqual(unreadable._tag, "PluginSettingsSchemaError");
+      assert.include(unreadable.message, 'Missing definition "no"');
+    }).pipe(Effect.provide(layerTest())),
+  );
+
+  it.effect("drops keys a newer schema no longer has instead of refusing every save", () =>
+    Effect.gen(function* () {
+      const store = yield* PluginSettingsStore.PluginSettingsStore;
+      const withFoo: Schema.JsonObject = {
+        ...settingsSchema,
+        properties: {
+          ...(settingsSchema.properties as Schema.JsonObject),
+          foo: { type: "string" },
+        },
+      };
+      yield* store.update(hello, withFoo, { foo: "old", count: 1 });
+
+      assert.deepStrictEqual(yield* store.update(hello, settingsSchema, { count: 2 }), {
+        count: 2,
+      });
+      assert.deepStrictEqual(JSON.parse(yield* readSettingsFile), { count: 2 });
+    }).pipe(Effect.provide(layerTest())),
+  );
+
+  it.effect("gives the plugin its schema's defaults and clients only what is saved", () =>
+    Effect.gen(function* () {
+      const store = yield* PluginSettingsStore.PluginSettingsStore;
+      const withDefaults: Schema.JsonObject = {
+        type: "object",
+        properties: {
+          enabled: { type: "boolean", default: true },
+          name: { type: "string", default: "T3" },
+          token: { type: "string", format: "t3-secret", default: "not-a-secret" },
+        },
+        // A required field with a default must not block a save that leaves it unsaved.
+        required: ["enabled"],
+      };
+      const next = yield* store
+        .changes(hello)
+        .pipe(Stream.runHead, Effect.forkChild({ startImmediately: true }));
+      assert.deepStrictEqual(yield* store.get(hello, withDefaults), { enabled: true, name: "T3" });
+
+      yield* store.update(hello, withDefaults, { name: "Mine" });
+      assert.deepStrictEqual(yield* store.get(hello, withDefaults), {
+        enabled: true,
+        name: "Mine",
+      });
+      assert.deepStrictEqual(yield* Fiber.join(next), Option.some({ enabled: true, name: "Mine" }));
+      assert.deepStrictEqual(yield* store.getForClient(hello, withDefaults), { name: "Mine" });
+    }).pipe(Effect.provide(layerTest())),
+  );
+
+  it.effect("keeps secrets out of settings.json and redacts them for clients", () =>
+    Effect.gen(function* () {
+      const store = yield* PluginSettingsStore.PluginSettingsStore;
+      const { secretsDir } = yield* ServerConfig.ServerConfig;
+
+      assert.deepStrictEqual(
+        yield* store.update(hello, settingsSchema, { name: "a", token: "s3cret" }),
+        { name: "a", token: SECRET_REDACTED },
+      );
+      assert.deepStrictEqual(yield* store.get(hello, settingsSchema), {
+        name: "a",
+        token: "s3cret",
+      });
+      assert.deepStrictEqual(JSON.parse(yield* readSettingsFile), { name: "a" });
+
+      yield* store.update(hello, settingsSchema, { name: "b", token: SECRET_REDACTED });
+      assert.deepStrictEqual(yield* store.get(hello, settingsSchema), {
+        name: "b",
+        token: "s3cret",
+      });
+
+      yield* store.update(hello, settingsSchema, { token: null });
+      assert.deepStrictEqual(yield* store.getForClient(hello, settingsSchema), { name: "b" });
+      assert.isEmpty(
+        yield* FileSystem.FileSystem.use((fileSystem) => fileSystem.readDirectory(secretsDir)),
+      );
+    }).pipe(Effect.provide(layerTest())),
+  );
+
+  it.effect("clears every secret a plugin saved, and only its own", () =>
+    Effect.gen(function* () {
+      const store = yield* PluginSettingsStore.PluginSettingsStore;
+      const { secretsDir, stateDir } = yield* ServerConfig.ServerConfig;
+      const fileSystem = yield* FileSystem.FileSystem;
+      const path = yield* Path.Path;
+      const longerId = PluginId.make("hello-world");
+      yield* store.update(hello, settingsSchema, { token: "old-secret" });
+      yield* store.update(longerId, settingsSchema, { token: "other-secret" });
+      // A longer id's secrets are kept even when it has no settings folder.
+      yield* fileSystem.remove(path.join(stateDir, "plugin-data", longerId), { recursive: true });
+
+      // T3's own upload signing key, whose name starts like this plugin's secrets would.
+      const secretStore = yield* ServerSecretStore.ServerSecretStore;
+      const signingKey = yield* secretStore.getOrCreateRandom("plugin-upload-signing-key", 32);
+
+      yield* store.clear(hello);
+      yield* store.clear(PluginId.make("upload-signing-key"));
+
+      assert.sameMembers(yield* fileSystem.readDirectory(secretsDir), [
+        `plugin.${longerId}.bin`,
+        "plugin-upload-signing-key.bin",
+      ]);
+      assert.deepStrictEqual(yield* store.get(longerId, settingsSchema), { token: "other-secret" });
+      // Reinstalling starts fresh, not from the copy the store keeps in memory.
+      assert.deepStrictEqual(yield* store.get(hello, settingsSchema), {});
+      assert.deepStrictEqual(
+        yield* secretStore.get("plugin-upload-signing-key"),
+        Option.some(signingKey),
+      );
+    }).pipe(Effect.provide(layerTest())),
+  );
+
+  it.effect("keeps plugin settings when the server saves its own settings", () =>
+    Effect.gen(function* () {
+      const store = yield* PluginSettingsStore.PluginSettingsStore;
+      const serverSettings = yield* ServerSettings.ServerSettingsService;
+      yield* store.update(hello, settingsSchema, { count: 2, token: "s3cret" });
+
+      yield* serverSettings.updateSettings({ addProjectBaseDirectory: "~/next" });
+
+      assert.deepStrictEqual(yield* store.get(hello, settingsSchema), {
+        count: 2,
+        token: "s3cret",
+      });
+    }).pipe(Effect.provide(layerTest())),
+  );
+
+  it.effect("emits the plugin view after an update of that plugin", () =>
+    Effect.gen(function* () {
+      const store = yield* PluginSettingsStore.PluginSettingsStore;
+      const next = yield* store
+        .changes(hello)
+        .pipe(Stream.runHead, Effect.forkChild({ startImmediately: true }));
+
+      yield* store.update(PluginId.make("other"), undefined, { count: 9 });
+      yield* store.update(hello, settingsSchema, { count: 3, token: "s3cret" });
+
+      assert.deepStrictEqual(yield* Fiber.join(next), Option.some({ count: 3, token: "s3cret" }));
+    }).pipe(Effect.provide(layerTest())),
+  );
+});
diff --git a/apps/server/src/plugins/PluginSettingsStore.ts b/apps/server/src/plugins/PluginSettingsStore.ts
new file mode 100644
index 0000000000000..d3c7c0f51f4d6
--- /dev/null
+++ b/apps/server/src/plugins/PluginSettingsStore.ts
@@ -0,0 +1,463 @@
+import { PluginId } from "@t3tools/contracts";
+import { writeFileStringAtomically } from "@t3tools/shared/atomicWrite";
+import { fromJsonStringPretty } from "@t3tools/shared/schemaJson";
+import * as Context from "effect/Context";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as JsonSchema from "effect/JsonSchema";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Predicate from "effect/Predicate";
+import * as PubSub from "effect/PubSub";
+import * as Result from "effect/Result";
+import * as Schema from "effect/Schema";
+import * as SchemaIssue from "effect/SchemaIssue";
+import * as SchemaRepresentation from "effect/SchemaRepresentation";
+import * as Semaphore from "effect/Semaphore";
+import * as Stream from "effect/Stream";
+
+import * as ServerSecretStore from "../auth/ServerSecretStore.ts";
+import * as ServerConfig from "../config.ts";
+import { SECRET_REDACTED } from "../settingsSecrets.ts";
+
+// The Settings page shows the summary, so it stays readable when a patch breaks many fields.
+const MAX_VALIDATION_SUMMARY_LENGTH = 1000;
+const MAX_SCHEMA_REASON_LENGTH = 500;
+
+const persistenceOperations = {
+  read: "read the settings",
+  write: "save the settings",
+  readSecret: "read a secret setting",
+  writeSecret: "save a secret setting",
+} as const;
+
+export class PluginSettingsPersistenceError extends Schema.TaggedError<PluginSettingsPersistenceError>()(
+  "PluginSettingsPersistenceError",
+  {
+    pluginId: PluginId,
+    operation: Schema.Literals(["read", "write", "readSecret", "writeSecret"]),
+    cause: Schema.Defect(),
+  },
+) {
+  override get message(): string {
+    return `Failed to ${persistenceOperations[this.operation]} of plugin ${this.pluginId}.`;
+  }
+}
+
+export class PluginSettingsSchemaError extends Schema.TaggedError<PluginSettingsSchemaError>()(
+  "PluginSettingsSchemaError",
+  {
+    pluginId: PluginId,
+    /** The importer's reason, which comes from the plugin's own manifest. */
+    reason: Schema.String,
+    cause: Schema.Defect(),
+  },
+) {
+  override get message(): string {
+    return `Plugin ${this.pluginId} has a settings schema T3 Code cannot validate: ${this.reason}`;
+  }
+}
+
+export class PluginSettingsValidationError extends Schema.TaggedError<PluginSettingsValidationError>()(
+  "PluginSettingsValidationError",
+  {
+    pluginId: PluginId,
+    summary: Schema.String,
+  },
+) {
+  override get message(): string {
+    return `Invalid settings for plugin ${this.pluginId}: ${this.summary}`;
+  }
+}
+
+export class PluginSettingsStore extends Context.Service<
+  PluginSettingsStore,
+  {
+    /** Stored settings with secret values, over the schema's top-level defaults, for the plugin. */
+    readonly get: (
+      pluginId: PluginId,
+      settingsSchema: Schema.JsonObject | undefined,
+    ) => Effect.Effect<Schema.JsonObject, PluginSettingsPersistenceError>;
+    /**
+     * Stored settings for clients, without defaults. A secret that has a value reads as
+     * `SECRET_REDACTED`.
+     */
+    readonly getForClient: (
+      pluginId: PluginId,
+      settingsSchema: Schema.JsonObject | undefined,
+    ) => Effect.Effect<Schema.JsonObject, PluginSettingsPersistenceError>;
+    /**
+     * Merges `patch` over the stored settings at the top level, where `null` removes a key and
+     * `SECRET_REDACTED` keeps a secret, validates the result, saves it and returns the client view.
+     * Stored keys a schema with `additionalProperties: false` no longer lists are dropped first.
+     */
+    readonly update: (
+      pluginId: PluginId,
+      settingsSchema: Schema.JsonObject | undefined,
+      patch: Schema.JsonObject,
+    ) => Effect.Effect<
+      Schema.JsonObject,
+      PluginSettingsPersistenceError | PluginSettingsSchemaError | PluginSettingsValidationError
+    >;
+    /** The plugin view after each successful `update` of that plugin. */
+    readonly changes: (pluginId: PluginId) => Stream.Stream<Schema.JsonObject>;
+    /** Deletes the plugin's settings file and every secret it saved. */
+    readonly clear: (pluginId: PluginId) => Effect.Effect<void, PluginSettingsPersistenceError>;
+  }
+>()("t3/plugins/PluginSettingsStore") {}
+
+interface StoredSettings {
+  readonly values: Schema.JsonObject;
+  readonly secrets: Readonly<Record<string, string>>;
+}
+
+/** The text of settings.json and of the plugin's secret entry, undefined when there is none. */
+interface SavedFiles {
+  readonly settings: string | undefined;
+  readonly secrets: string | undefined;
+}
+
+interface SettingsChange {
+  readonly pluginId: PluginId;
+  readonly settings: Schema.JsonObject;
+}
+
+const SettingsJson = fromJsonStringPretty(Schema.JsonObject);
+const decodeSettingsJson = Schema.decodeUnknownEffect(SettingsJson);
+const encodeSettingsJson = Schema.encodeEffect(SettingsJson);
+const SecretsJson = Schema.fromJsonString(Schema.Record(Schema.String, Schema.String));
+const decodeSecretsJson = Schema.decodeUnknownEffect(SecretsJson);
+const encodeSecretsJson = Schema.encodeEffect(SecretsJson);
+const isJson = Schema.is(Schema.Json);
+const textEncoder = new TextEncoder();
+const textDecoder = new TextDecoder();
+
+// Top-level string fields with `format: "t3-secret"` live in ServerSecretStore, never settings.json.
+const secretFields = (settingsSchema: Schema.JsonObject | undefined): ReadonlySet<string> => {
+  const properties = settingsSchema?.properties;
+  if (!Predicate.isObject(properties)) return new Set();
+  return new Set(
+    Object.entries(properties).flatMap(([field, property]) =>
+      Predicate.isObject(property) && property.type === "string" && property.format === "t3-secret"
+        ? [field]
+        : [],
+    ),
+  );
+};
+
+// Top-level `default`s, which the plugin reads for fields nobody saved. Secrets have none.
+const defaultsOf = (settingsSchema: Schema.JsonObject | undefined): Schema.JsonObject => {
+  const properties = settingsSchema?.properties;
+  if (!Predicate.isObject(properties)) return {};
+  const secrets = secretFields(settingsSchema);
+  return Object.fromEntries(
+    Object.entries(properties).flatMap(([field, property]) =>
+      Predicate.isObject(property) && !secrets.has(field) && isJson(property.default)
+        ? [[field, property.default]]
+        : [],
+    ),
+  );
+};
+
+// Keys saved under an older schema that a closed schema no longer lists. Validating them would
+// refuse every save, and the form cannot remove a key it does not show.
+const keysOutside = (settingsSchema: Schema.JsonObject | undefined, values: Schema.JsonObject) => {
+  const properties = settingsSchema?.properties;
+  if (settingsSchema?.additionalProperties !== false || !Predicate.isObject(properties)) return [];
+  return Object.keys(values).filter((key) => !Object.hasOwn(properties, key));
+};
+
+// One entry holds all of a plugin's secrets, so removal finds them in a store that can't list
+// names. T3's own secret names have no `.`, so this name can't be one of them.
+const secretName = (pluginId: PluginId) => `plugin.${pluginId}`;
+
+const formatPathSegment = (segment: PropertyKey | { readonly key: PropertyKey }) => {
+  const key = Predicate.isObject(segment) ? segment.key : segment;
+  return typeof key === "number" ? `[${key}]` : `["${String(key)}"]`;
+};
+
+// Issues never carry input values because decoding does not set `reportInput`.
+const summarizeIssue = (issue: SchemaIssue.Issue) => {
+  const summary = SchemaIssue.makeFormatterStandardSchemaV1()(issue)
+    .issues.map(({ path, message }) =>
+      path === undefined || path.length === 0
+        ? message
+        : `at ${path.map(formatPathSegment).join("")}: ${message}`,
+    )
+    .join("; ");
+  return summary.length > MAX_VALIDATION_SUMMARY_LENGTH
+    ? `${summary.slice(0, MAX_VALIDATION_SUMMARY_LENGTH - 1)}…`
+    : summary;
+};
+
+const compileSettingsSchema = (settingsSchema: Schema.JsonObject) =>
+  Result.try(() =>
+    Schema.decodeUnknownResult(
+      // Imported JSON Schemas need no decoding services, which `Schema.Top` cannot express.
+      Schema.make<Schema.Decoder<unknown>>(
+        SchemaRepresentation.fromJsonSchemaDocument(
+          JsonSchema.fromSchemaDraft2020_12(settingsSchema),
+          // Plugins are trusted code, so their patterns are applied rather than rejected.
+          { patterns: "apply" },
+        ).ast,
+      ),
+      { onExcessProperty: "error", errors: "all" },
+    ),
+  );
+
+const importerReason = (cause: unknown) =>
+  (cause instanceof Error ? cause.message : String(cause)).slice(0, MAX_SCHEMA_REASON_LENGTH);
+
+/** Why settings cannot be validated against `settingsSchema`, or `undefined` when they can. */
+export const settingsSchemaProblem = (settingsSchema: Schema.JsonObject) => {
+  const compiled = compileSettingsSchema(settingsSchema);
+  return Result.isFailure(compiled) ? importerReason(compiled.failure) : undefined;
+};
+
+const make = Effect.gen(function* () {
+  const { stateDir } = yield* ServerConfig.ServerConfig;
+  const fileSystem = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  const secretStore = yield* ServerSecretStore.ServerSecretStore;
+  const writeSemaphore = yield* Semaphore.make(1);
+  // Sliding, so a subscriber that stops pulling drops old changes instead of blocking `update`.
+  const changesPubSub = yield* PubSub.sliding<SettingsChange>(64);
+  // Keyed by schema identity: a reloaded plugin brings a new manifest object.
+  const validators = new WeakMap<Schema.JsonObject, ReturnType<typeof compileSettingsSchema>>();
+  // Only `update` and `clear` write these files, under the write lock, so the copy stays true and
+  // a hand edit shows after a restart. Text, so a plugin that mutates what it read can't change it.
+  const savedFiles = new Map<PluginId, SavedFiles>();
+
+  const settingsPath = (pluginId: PluginId) =>
+    path.join(stateDir, "plugin-data", pluginId, "settings.json");
+
+  const validatorFor = (pluginId: PluginId, settingsSchema: Schema.JsonObject) => {
+    let validator = validators.get(settingsSchema);
+    if (validator === undefined) {
+      validator = compileSettingsSchema(settingsSchema);
+      validators.set(settingsSchema, validator);
+    }
+    return Result.isSuccess(validator)
+      ? Effect.succeed(validator.success)
+      : Effect.fail(
+          new PluginSettingsSchemaError({
+            pluginId,
+            reason: importerReason(validator.failure),
+            cause: validator.failure,
+          }),
+        );
+  };
+
+  // The caller holds the write lock, so a read from disk can't save a copy older than a write.
+  const readSavedFiles = Effect.fnUntraced(function* (pluginId: PluginId) {
+    const cached = savedFiles.get(pluginId);
+    if (cached !== undefined) return cached;
+    const settings = yield* fileSystem.readFileString(settingsPath(pluginId)).pipe(
+      Effect.catchIf(
+        (error) => error.reason._tag === "NotFound",
+        () => Effect.undefined,
+      ),
+      Effect.mapError(
+        (cause) => new PluginSettingsPersistenceError({ pluginId, operation: "read", cause }),
+      ),
+    );
+    const secrets = yield* secretStore.get(secretName(pluginId)).pipe(
+      Effect.map((bytes) =>
+        Option.getOrUndefined(Option.map(bytes, (value) => textDecoder.decode(value))),
+      ),
+      Effect.mapError(
+        (cause) => new PluginSettingsPersistenceError({ pluginId, operation: "readSecret", cause }),
+      ),
+    );
+    const files: SavedFiles = { settings, secrets };
+    savedFiles.set(pluginId, files);
+    return files;
+  });
+
+  // Shares the span of the public operation that reads.
+  const load = Effect.fnUntraced(
+    function* (pluginId: PluginId, fields: ReadonlySet<string>, files: SavedFiles) {
+      const stored = files.settings === undefined ? {} : yield* decodeSettingsJson(files.settings);
+      const values = Object.fromEntries(Object.entries(stored).filter(([key]) => !fields.has(key)));
+      const saved = yield* decodeSecretsJson(files.secrets ?? "{}").pipe(
+        Effect.mapError(
+          (cause) =>
+            new PluginSettingsPersistenceError({ pluginId, operation: "readSecret", cause }),
+        ),
+      );
+      return {
+        values,
+        secrets: Object.fromEntries(Object.entries(saved).filter(([field]) => fields.has(field))),
+      } satisfies StoredSettings;
+    },
+    (effect, pluginId) =>
+      effect.pipe(
+        Effect.catchTags({
+          SchemaError: (cause) =>
+            Effect.fail(new PluginSettingsPersistenceError({ pluginId, operation: "read", cause })),
+        }),
+      ),
+  );
+
+  const loadCurrent = (pluginId: PluginId, fields: ReadonlySet<string>) => {
+    const cached = savedFiles.get(pluginId);
+    return (
+      cached === undefined
+        ? writeSemaphore.withPermits(1)(readSavedFiles(pluginId))
+        : Effect.succeed(cached)
+    ).pipe(Effect.flatMap((files) => load(pluginId, fields, files)));
+  };
+
+  const clientView = ({ values, secrets }: StoredSettings): Schema.JsonObject => ({
+    ...values,
+    ...Object.fromEntries(Object.keys(secrets).map((field) => [field, SECRET_REDACTED])),
+  });
+
+  const get = Effect.fn("PluginSettingsStore.get")(function* (
+    pluginId: PluginId,
+    settingsSchema: Schema.JsonObject | undefined,
+  ) {
+    const { values, secrets } = yield* loadCurrent(pluginId, secretFields(settingsSchema));
+    return { ...defaultsOf(settingsSchema), ...values, ...secrets } satisfies Schema.JsonObject;
+  });
+
+  const getForClient = Effect.fn("PluginSettingsStore.getForClient")(function* (
+    pluginId: PluginId,
+    settingsSchema: Schema.JsonObject | undefined,
+  ) {
+    return clientView(yield* loadCurrent(pluginId, secretFields(settingsSchema)));
+  });
+
+  const update = Effect.fn("PluginSettingsStore.update")(function* (
+    pluginId: PluginId,
+    settingsSchema: Schema.JsonObject | undefined,
+    patch: Schema.JsonObject,
+  ) {
+    const fields = secretFields(settingsSchema);
+    const validate =
+      settingsSchema === undefined ? undefined : yield* validatorFor(pluginId, settingsSchema);
+    return yield* writeSemaphore.withPermits(1)(
+      Effect.gen(function* () {
+        const current = yield* load(pluginId, fields, yield* readSavedFiles(pluginId));
+        const stale = keysOutside(settingsSchema, current.values);
+        if (stale.length > 0) {
+          yield* Effect.logWarning("dropping plugin settings its schema no longer has", {
+            pluginId,
+            keys: stale,
+          });
+        }
+        const merged: Record<string, Schema.Json> = { ...current.values, ...current.secrets };
+        for (const key of stale) delete merged[key];
+        for (const [key, value] of Object.entries(patch)) {
+          if (fields.has(key) && value === SECRET_REDACTED) continue;
+          if (value === null) delete merged[key];
+          else merged[key] = value;
+        }
+
+        // Checked as the plugin reads them: over the schema's defaults, and with secrets' real
+        // values, so a required field that has a default or a secret passes. Defaults aren't saved.
+        const validation = validate?.({ ...defaultsOf(settingsSchema), ...merged });
+        if (validation !== undefined && Result.isFailure(validation)) {
+          return yield* new PluginSettingsValidationError({
+            pluginId,
+            summary: summarizeIssue(validation.failure.issue),
+          });
+        }
+
+        const next: StoredSettings = {
+          values: Object.fromEntries(Object.entries(merged).filter(([key]) => !fields.has(key))),
+          secrets: Object.fromEntries(
+            Object.entries(merged).filter(
+              (entry): entry is [string, string] =>
+                fields.has(entry[0]) && typeof entry[1] === "string",
+            ),
+          ),
+        };
+        const secrets =
+          Object.keys(next.secrets).length === 0
+            ? undefined
+            : yield* encodeSecretsJson(next.secrets).pipe(
+                Effect.mapError(
+                  (cause) =>
+                    new PluginSettingsPersistenceError({
+                      pluginId,
+                      operation: "writeSecret",
+                      cause,
+                    }),
+                ),
+              );
+        const settings = yield* encodeSettingsJson(next.values).pipe(
+          Effect.mapError(
+            (cause) => new PluginSettingsPersistenceError({ pluginId, operation: "write", cause }),
+          ),
+        );
+        // A write that fails partway leaves the next read to the disk.
+        savedFiles.delete(pluginId);
+        // Written on every save, which drops the secrets of fields the schema no longer has.
+        yield* (
+          secrets === undefined
+            ? secretStore.remove(secretName(pluginId))
+            : secretStore.set(secretName(pluginId), textEncoder.encode(secrets))
+        ).pipe(
+          Effect.mapError(
+            (cause) =>
+              new PluginSettingsPersistenceError({ pluginId, operation: "writeSecret", cause }),
+          ),
+        );
+        yield* writeFileStringAtomically({
+          filePath: settingsPath(pluginId),
+          contents: settings,
+        }).pipe(
+          Effect.provideService(FileSystem.FileSystem, fileSystem),
+          Effect.provideService(Path.Path, path),
+          Effect.mapError(
+            (cause) => new PluginSettingsPersistenceError({ pluginId, operation: "write", cause }),
+          ),
+        );
+        savedFiles.set(pluginId, { settings, secrets });
+
+        yield* PubSub.publish(changesPubSub, {
+          pluginId,
+          settings: { ...defaultsOf(settingsSchema), ...next.values, ...next.secrets },
+        });
+        return clientView(next);
+      }),
+    );
+  });
+
+  const changes = (pluginId: PluginId) =>
+    Stream.fromPubSub(changesPubSub).pipe(
+      Stream.filter((change) => change.pluginId === pluginId),
+      Stream.map((change) => change.settings),
+    );
+
+  const clear: PluginSettingsStore["Service"]["clear"] = Effect.fn("PluginSettingsStore.clear")(
+    (pluginId) =>
+      writeSemaphore.withPermits(1)(
+        Effect.gen(function* () {
+          savedFiles.delete(pluginId);
+          yield* secretStore
+            .remove(secretName(pluginId))
+            .pipe(
+              Effect.mapError(
+                (cause) =>
+                  new PluginSettingsPersistenceError({ pluginId, operation: "writeSecret", cause }),
+              ),
+            );
+          yield* fileSystem
+            .remove(path.dirname(settingsPath(pluginId)), { recursive: true, force: true })
+            .pipe(
+              Effect.mapError(
+                (cause) =>
+                  new PluginSettingsPersistenceError({ pluginId, operation: "write", cause }),
+              ),
+            );
+        }),
+      ),
+  );
+
+  return PluginSettingsStore.of({ get, getForClient, update, changes, clear });
+});
+
+export const layer = Layer.effect(PluginSettingsStore, make);
diff --git a/apps/server/src/plugins/PluginStorage.test.ts b/apps/server/src/plugins/PluginStorage.test.ts
new file mode 100644
index 0000000000000..71a8874f51289
--- /dev/null
+++ b/apps/server/src/plugins/PluginStorage.test.ts
@@ -0,0 +1,115 @@
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { PluginId } from "@t3tools/contracts";
+import * as NodeSqliteClient from "@t3tools/shared/nodeSqliteClient";
+import { assert, it } from "@effect/vitest";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as SqlClient from "effect/sql/SqlClient";
+
+import * as ServerConfig from "../config.ts";
+import * as PluginStorage from "./PluginStorage.ts";
+
+const hello = PluginId.make("hello");
+const other = PluginId.make("other");
+
+const layerConfig = () =>
+  Layer.fresh(ServerConfig.layerTest(process.cwd(), { prefix: "t3code-plugin-storage-test-" }));
+
+// A fresh layer per call, so closing it closes its SQLite connection.
+const withStorage = <A, E>(
+  use: (storage: PluginStorage.PluginStorage["Service"]) => Effect.Effect<A, E>,
+) => PluginStorage.PluginStorage.use(use).pipe(Effect.provide(Layer.fresh(PluginStorage.layer)));
+
+it.layer(NodeServices.layer)("PluginStorage", (it) => {
+  it.effect("creates its own plugins.sqlite on first use", () =>
+    Effect.gen(function* () {
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const fileSystem = yield* FileSystem.FileSystem;
+      const path = yield* Path.Path;
+      const filename = path.join(stateDir, "plugins.sqlite");
+
+      yield* withStorage((storage) =>
+        Effect.gen(function* () {
+          // Removing a plugin's data on a server that never stored any leaves no file behind.
+          yield* storage.clear(other);
+          assert.isFalse(yield* fileSystem.exists(filename));
+          yield* storage.set(hello, "greeting", { text: "hi" });
+          yield* storage.set(other, "gone", true);
+          yield* storage.clear(other);
+          assert.deepStrictEqual(yield* storage.list(other), []);
+        }),
+      );
+
+      const rows = yield* SqlClient.SqlClient.use(
+        (sql) => sql<{ readonly key: string }>`SELECT key FROM plugin_storage`,
+      ).pipe(Effect.provide(NodeSqliteClient.layer({ filename, readonly: true })));
+      assert.deepStrictEqual(
+        rows.map((row) => row.key),
+        ["greeting"],
+      );
+      assert.isFalse(yield* fileSystem.exists(path.join(stateDir, "statev2.sqlite")));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("round-trips values and keeps them after the layer closes", () =>
+    Effect.gen(function* () {
+      yield* withStorage((storage) =>
+        Effect.gen(function* () {
+          yield* storage.set(hello, "b", [1, "two", null]);
+          yield* storage.set(hello, "a", { nested: { ok: true } });
+          yield* storage.set(hello, "gone", 1);
+          yield* storage.set(other, "a", "other plugin");
+          yield* storage.set(hello, "a", { nested: { ok: false } });
+          yield* storage.remove(hello, "gone");
+
+          assert.deepStrictEqual(yield* storage.list(hello), ["a", "b"]);
+          assert.deepStrictEqual(yield* storage.get(hello, "gone"), Option.none());
+        }),
+      );
+
+      yield* withStorage((storage) =>
+        Effect.gen(function* () {
+          assert.deepStrictEqual(
+            yield* storage.get(hello, "a"),
+            Option.some({ nested: { ok: false } }),
+          );
+          assert.deepStrictEqual(yield* storage.get(hello, "b"), Option.some([1, "two", null]));
+          assert.deepStrictEqual(yield* storage.get(other, "a"), Option.some("other plugin"));
+        }),
+      );
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("matches list prefixes literally", () =>
+    withStorage((storage) =>
+      Effect.gen(function* () {
+        for (const key of ["a_b", "axb", "A_b", "a%c", "abc"]) {
+          yield* storage.set(hello, key, true);
+        }
+        yield* storage.set(other, "a_other", true);
+
+        assert.deepStrictEqual(yield* storage.list(hello, "a_"), ["a_b"]);
+        assert.deepStrictEqual(yield* storage.list(hello, "a%"), ["a%c"]);
+      }),
+    ).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("rejects oversize values and keys", () =>
+    withStorage((storage) =>
+      Effect.gen(function* () {
+        const tooLarge = yield* Effect.flip(storage.set(hello, "big", "x".repeat(1024 * 1024)));
+        assert.strictEqual(tooLarge._tag, "PluginStorageValueTooLargeError");
+
+        const emptyKey = yield* Effect.flip(storage.set(hello, "", 1));
+        assert.strictEqual(emptyKey._tag, "PluginStorageKeyError");
+        const longKey = yield* Effect.flip(storage.get(hello, "k".repeat(513)));
+        assert.strictEqual(longKey._tag, "PluginStorageKeyError");
+
+        assert.deepStrictEqual(yield* storage.list(hello), []);
+      }),
+    ).pipe(Effect.provide(layerConfig())),
+  );
+});
diff --git a/apps/server/src/plugins/PluginStorage.ts b/apps/server/src/plugins/PluginStorage.ts
new file mode 100644
index 0000000000000..e521a5663c957
--- /dev/null
+++ b/apps/server/src/plugins/PluginStorage.ts
@@ -0,0 +1,265 @@
+import { PluginId } from "@t3tools/contracts";
+import * as NodeSqliteClient from "@t3tools/shared/nodeSqliteClient";
+import * as Context from "effect/Context";
+import * as DateTime from "effect/DateTime";
+import * as Duration from "effect/Duration";
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Schema from "effect/Schema";
+import * as Scope from "effect/Scope";
+import * as SqlClient from "effect/sql/SqlClient";
+
+import * as ServerConfig from "../config.ts";
+
+const MAX_KEY_LENGTH = 512;
+const MAX_VALUE_BYTES = 1024 * 1024;
+
+export class PluginStoragePersistenceError extends Schema.TaggedError<PluginStoragePersistenceError>()(
+  "PluginStoragePersistenceError",
+  {
+    pluginId: PluginId,
+    operation: Schema.Literals(["open", "get", "set", "remove", "list"]),
+    cause: Schema.Defect(),
+  },
+) {
+  override get message(): string {
+    return `Plugin storage ${this.operation} failed for plugin ${this.pluginId}.`;
+  }
+}
+
+export class PluginStorageKeyError extends Schema.TaggedError<PluginStorageKeyError>()(
+  "PluginStorageKeyError",
+  {
+    pluginId: PluginId,
+    length: Schema.Number,
+  },
+) {
+  override get message(): string {
+    return `Plugin storage keys must be 1 to ${MAX_KEY_LENGTH} characters long, got ${this.length}.`;
+  }
+}
+
+export class PluginStorageInvalidValueError extends Schema.TaggedError<PluginStorageInvalidValueError>()(
+  "PluginStorageInvalidValueError",
+  {
+    pluginId: PluginId,
+    cause: Schema.Defect(),
+  },
+) {
+  override get message(): string {
+    return "Plugin storage values must be JSON.";
+  }
+}
+
+export class PluginStorageValueTooLargeError extends Schema.TaggedError<PluginStorageValueTooLargeError>()(
+  "PluginStorageValueTooLargeError",
+  {
+    pluginId: PluginId,
+    bytes: Schema.Number,
+  },
+) {
+  override get message(): string {
+    return `Plugin storage values must be at most ${MAX_VALUE_BYTES} bytes of JSON, got ${this.bytes}.`;
+  }
+}
+
+export class PluginStorage extends Context.Service<
+  PluginStorage,
+  {
+    readonly get: (
+      pluginId: PluginId,
+      key: string,
+    ) => Effect.Effect<
+      Option.Option<Schema.Json>,
+      PluginStoragePersistenceError | PluginStorageKeyError
+    >;
+    readonly set: (
+      pluginId: PluginId,
+      key: string,
+      value: Schema.Json,
+    ) => Effect.Effect<
+      void,
+      | PluginStoragePersistenceError
+      | PluginStorageKeyError
+      | PluginStorageInvalidValueError
+      | PluginStorageValueTooLargeError
+    >;
+    readonly remove: (
+      pluginId: PluginId,
+      key: string,
+    ) => Effect.Effect<void, PluginStoragePersistenceError | PluginStorageKeyError>;
+    /** Keys that start with `prefix`, sorted. */
+    readonly list: (
+      pluginId: PluginId,
+      prefix?: string,
+    ) => Effect.Effect<ReadonlyArray<string>, PluginStoragePersistenceError>;
+    /** Deletes every key of the plugin, without creating the database when there is none. */
+    readonly clear: (pluginId: PluginId) => Effect.Effect<void, PluginStoragePersistenceError>;
+  }
+>()("t3/plugins/PluginStorage") {}
+
+const ValueJson = Schema.fromJsonString(Schema.Json);
+const encodeValue = Schema.encodeUnknownEffect(ValueJson);
+const decodeValue = Schema.decodeUnknownEffect(ValueJson);
+
+const checkKey = (pluginId: PluginId, key: string) =>
+  key.length >= 1 && key.length <= MAX_KEY_LENGTH
+    ? Effect.void
+    : Effect.fail(new PluginStorageKeyError({ pluginId, length: key.length }));
+
+const make = Effect.gen(function* () {
+  const { stateDir } = yield* ServerConfig.ServerConfig;
+  const fileSystem = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  const layerScope = yield* Effect.scope;
+  const filename = path.join(stateDir, "plugins.sqlite");
+
+  // Opened on first use so a server without plugins never creates the file. A failed open is
+  // retried on the next call; a successful one stays open until the layer closes.
+  const sqlClient = yield* Effect.cachedWithTTL(
+    Effect.gen(function* () {
+      const scope = yield* Scope.fork(layerScope);
+      return yield* Layer.buildWithScope(NodeSqliteClient.layer({ filename }), scope).pipe(
+        Effect.map((context) => Context.get(context, SqlClient.SqlClient)),
+        Effect.tap(
+          (sql) => sql`
+            CREATE TABLE IF NOT EXISTS plugin_storage (
+              plugin_id TEXT NOT NULL,
+              key TEXT NOT NULL,
+              value_json TEXT NOT NULL,
+              updated_at TEXT NOT NULL,
+              PRIMARY KEY (plugin_id, key)
+            )
+          `,
+        ),
+        Effect.onError((cause) => Scope.close(scope, Exit.failCause(cause))),
+      );
+    }),
+    (exit) => (Exit.isSuccess(exit) ? Duration.infinity : Duration.zero),
+  );
+
+  const open = (pluginId: PluginId) =>
+    sqlClient.pipe(
+      Effect.mapError(
+        (cause) => new PluginStoragePersistenceError({ pluginId, operation: "open", cause }),
+      ),
+    );
+
+  const get = Effect.fn("PluginStorage.get")(
+    function* (pluginId: PluginId, key: string) {
+      yield* checkKey(pluginId, key);
+      const sql = yield* open(pluginId);
+      const rows = yield* sql<{ readonly value_json: string }>`
+        SELECT value_json FROM plugin_storage WHERE plugin_id = ${pluginId} AND key = ${key}
+      `;
+      const row = rows[0];
+      return row === undefined ? Option.none() : Option.some(yield* decodeValue(row.value_json));
+    },
+    (effect, pluginId) =>
+      effect.pipe(
+        Effect.catchTags({
+          SqlError: (cause) =>
+            Effect.fail(new PluginStoragePersistenceError({ pluginId, operation: "get", cause })),
+          SchemaError: (cause) =>
+            Effect.fail(new PluginStoragePersistenceError({ pluginId, operation: "get", cause })),
+        }),
+      ),
+  );
+
+  const set = Effect.fn("PluginStorage.set")(
+    function* (pluginId: PluginId, key: string, value: Schema.Json) {
+      yield* checkKey(pluginId, key);
+      const valueJson = yield* encodeValue(value).pipe(
+        Effect.mapError((cause) => new PluginStorageInvalidValueError({ pluginId, cause })),
+      );
+      const bytes = Buffer.byteLength(valueJson, "utf8");
+      if (bytes > MAX_VALUE_BYTES) {
+        return yield* new PluginStorageValueTooLargeError({ pluginId, bytes });
+      }
+      const sql = yield* open(pluginId);
+      const updatedAt = DateTime.formatIso(yield* DateTime.now);
+      yield* sql`
+        INSERT INTO plugin_storage (plugin_id, key, value_json, updated_at)
+        VALUES (${pluginId}, ${key}, ${valueJson}, ${updatedAt})
+        ON CONFLICT (plugin_id, key)
+        DO UPDATE SET value_json = excluded.value_json, updated_at = excluded.updated_at
+      `;
+    },
+    (effect, pluginId) =>
+      effect.pipe(
+        Effect.catchTags({
+          SqlError: (cause) =>
+            Effect.fail(new PluginStoragePersistenceError({ pluginId, operation: "set", cause })),
+        }),
+      ),
+  );
+
+  const remove = Effect.fn("PluginStorage.remove")(
+    function* (pluginId: PluginId, key: string) {
+      yield* checkKey(pluginId, key);
+      const sql = yield* open(pluginId);
+      yield* sql`DELETE FROM plugin_storage WHERE plugin_id = ${pluginId} AND key = ${key}`;
+    },
+    (effect, pluginId) =>
+      effect.pipe(
+        Effect.catchTags({
+          SqlError: (cause) =>
+            Effect.fail(
+              new PluginStoragePersistenceError({ pluginId, operation: "remove", cause }),
+            ),
+        }),
+      ),
+  );
+
+  const list = Effect.fn("PluginStorage.list")(
+    function* (pluginId: PluginId, prefix = "") {
+      const sql = yield* open(pluginId);
+      // Not LIKE: it treats `%` and `_` as wildcards and ignores ASCII case.
+      const rows = yield* sql<{ readonly key: string }>`
+        SELECT key FROM plugin_storage
+        WHERE plugin_id = ${pluginId} AND substr(key, 1, length(${prefix})) = ${prefix}
+        ORDER BY key
+      `;
+      return rows.map((row) => row.key);
+    },
+    (effect, pluginId) =>
+      effect.pipe(
+        Effect.catchTags({
+          SqlError: (cause) =>
+            Effect.fail(new PluginStoragePersistenceError({ pluginId, operation: "list", cause })),
+        }),
+      ),
+  );
+
+  const clear = Effect.fn("PluginStorage.clear")(
+    function* (pluginId: PluginId) {
+      const exists = yield* fileSystem
+        .exists(filename)
+        .pipe(
+          Effect.mapError(
+            (cause) => new PluginStoragePersistenceError({ pluginId, operation: "open", cause }),
+          ),
+        );
+      if (!exists) return;
+      const sql = yield* open(pluginId);
+      yield* sql`DELETE FROM plugin_storage WHERE plugin_id = ${pluginId}`;
+    },
+    (effect, pluginId) =>
+      effect.pipe(
+        Effect.catchTags({
+          SqlError: (cause) =>
+            Effect.fail(
+              new PluginStoragePersistenceError({ pluginId, operation: "remove", cause }),
+            ),
+        }),
+      ),
+  );
+
+  return PluginStorage.of({ get, set, remove, list, clear });
+});
+
+export const layer = Layer.effect(PluginStorage, make);
diff --git a/apps/server/src/plugins/api/facade.test.ts b/apps/server/src/plugins/api/facade.test.ts
new file mode 100644
index 0000000000000..6425fb2c83c19
--- /dev/null
+++ b/apps/server/src/plugins/api/facade.test.ts
@@ -0,0 +1,84 @@
+import { assert, it } from "@effect/vitest";
+import { PluginId } from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import * as Schema from "effect/Schema";
+import * as Stream from "effect/Stream";
+
+import { makePluginActivation } from "../PluginApi.ts";
+import { makeFacadeContext, pluginCodeScope } from "./facade.ts";
+
+class CallFailedError extends Schema.TaggedError<CallFailedError>()("CallFailedError", {}) {}
+
+// Two macrotask turns: Node reports a rejection nobody observed after the first.
+const afterNodeReportsRejections = Effect.promise(async () => {
+  for (let turn = 0; turn < 2; turn++) {
+    // oxlint-disable-next-line t3code/no-real-time-wait-in-tests -- Node emits unhandledRejection only between macrotasks; no promise can mark that point.
+    await new Promise((resolve) => setImmediate(resolve));
+  }
+});
+
+it.effect("keeps a failed call the plugin never awaits from stopping the server", () =>
+  Effect.gen(function* () {
+    const activation = makePluginActivation();
+    const facade = makeFacadeContext({
+      pluginId: PluginId.make("unawaited"),
+      activation,
+      context: yield* Effect.context<never>(),
+    });
+    const unobserved: Array<unknown> = [];
+    const onUnhandled = (reason: unknown) => unobserved.push(reason);
+    process.on("unhandledRejection", onUnhandled);
+    yield* Effect.addFinalizer(() =>
+      Effect.sync(() => process.off("unhandledRejection", onUnhandled)),
+    );
+
+    void facade.call(Effect.fail(new CallFailedError()));
+    // A stream it reads, such as `api.settings.changes()`, fails like a call.
+    const pull = () =>
+      facade.iterate(Stream.fail(new CallFailedError()))[Symbol.asyncIterator]().next();
+    void pull();
+    const pulled = yield* Effect.promise(() =>
+      pull().then(
+        () => undefined,
+        (error: { readonly code: string }) => error.code,
+      ),
+    );
+    assert.strictEqual(pulled, "CallFailedError");
+    activation.controller.abort();
+    activation.ended.abort();
+    // A timer such as `setInterval(() => void api.storage.set(...))` outliving the plugin.
+    void facade.call(Effect.void);
+    yield* afterNodeReportsRejections;
+    assert.deepStrictEqual(unobserved, []);
+
+    const awaited = yield* Effect.promise(() =>
+      facade.call(Effect.void).then(
+        () => undefined,
+        (error: { readonly code: string }) => error.code,
+      ),
+    );
+    assert.strictEqual(awaited, "PluginDeactivated");
+  }).pipe(Effect.scoped),
+);
+
+// A failure there would be tied to the plugin, and the guard would not stop the server for it.
+it.effect("runs T3's side of a stream the plugin reads outside the plugin's scope", () =>
+  Effect.gen(function* () {
+    const pluginId = PluginId.make("reading");
+    const facade = makeFacadeContext({
+      pluginId,
+      activation: makePluginActivation(),
+      context: yield* Effect.context<never>(),
+    });
+    const scopes = facade.iterate(Stream.fromEffect(Effect.sync(() => pluginCodeScope.getStore())));
+    // As a plugin's `for await` over `api.settings.changes()`.
+    const seen = yield* Effect.promise(() =>
+      pluginCodeScope.run(pluginId, async () => {
+        const values: Array<string | undefined> = [];
+        for await (const value of scopes) values.push(value);
+        return values;
+      }),
+    );
+    assert.deepStrictEqual(seen, [undefined]);
+  }),
+);
diff --git a/apps/server/src/plugins/api/facade.ts b/apps/server/src/plugins/api/facade.ts
new file mode 100644
index 0000000000000..ee9dace7fa476
--- /dev/null
+++ b/apps/server/src/plugins/api/facade.ts
@@ -0,0 +1,175 @@
+// @effect-diagnostics nodeBuiltinImport:off - AsyncLocalStorage has no Effect counterpart, and it
+// must follow plugin code through Node's own callbacks.
+import * as NodeAsyncHooks from "node:async_hooks";
+
+import type { PluginId } from "@t3tools/contracts";
+import * as Cause from "effect/Cause";
+import type * as Context from "effect/Context";
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import * as Schema from "effect/Schema";
+import * as Stream from "effect/Stream";
+
+import type { PluginActivation } from "../PluginApi.ts";
+
+const MAX_ERROR_CHARS = 500;
+
+/** A plugin error's text for logs, states and replies, bounded. */
+export const errorText = (cause: unknown) => {
+  let text = "Unknown error";
+  try {
+    text =
+      cause instanceof Error && typeof cause.message === "string" ? cause.message : String(cause);
+  } catch {
+    // Plugin code can throw values whose conversion to a string throws again.
+  }
+  return text.slice(0, MAX_ERROR_CHARS);
+};
+
+/** Plugin code threw or rejected. Its message is the plugin's own. */
+export class PluginCodeError extends Schema.TaggedError<PluginCodeError>()("PluginCodeError", {
+  cause: Schema.Defect(),
+}) {
+  override get message(): string {
+    return errorText(this.cause);
+  }
+}
+
+/**
+ * The plugin whose code is running, carried through every timer, promise and Node callback that
+ * code starts, so a failure whose stack shows only Node's internals is still the plugin's. The host
+ * runs no server code before Node 24, where this needs promise hooks.
+ */
+export const pluginCodeScope = new NodeAsyncHooks.AsyncLocalStorage<PluginId>();
+
+/** What every facade group needs from the activation it belongs to. */
+export interface FacadeContext {
+  readonly pluginId: PluginId;
+  readonly activation: PluginActivation;
+  readonly context: Context.Context<never>;
+  /** Runs the plugin's own code, such as a handler, in its scope. */
+  readonly asPlugin: <A>(run: () => A) => A;
+  /**
+   * Runs an effect as a Promise that rejects with an `Error` carrying the failure's `_tag` as `code`.
+   * Map results inside the effect: a `.then` on the Promise is a new one that nothing handles.
+   */
+  readonly call: <A, E>(effect: Effect.Effect<A, E>) => Promise<A>;
+  /** Runs an effect in the background for the plugin; failures are logged, not thrown. */
+  readonly fork: <A, E>(effect: Effect.Effect<A, E>) => void;
+  /** Exposes a stream as an iterable that ends when the plugin deactivates. */
+  readonly iterate: <A, E>(stream: Stream.Stream<A, E>) => AsyncIterable<A>;
+}
+
+/**
+ * Hands a plugin a promise whose failure only the plugin sees: one it never awaits must not be an
+ * unhandled rejection, which stops the server.
+ */
+const forPlugin = <A>(promise: Promise<A>): Promise<A> => {
+  promise.catch(() => undefined);
+  return promise;
+};
+
+/** A plugin API call refused before it ran, such as one with a bad argument. */
+export const refused = (error: Error): Promise<never> => forPlugin(Promise.reject(error));
+
+/** Carries its plugin, so a failure no plugin code handles is still the plugin's. */
+export class PluginApiCallError extends Error {
+  readonly code: string;
+  readonly pluginId: PluginId;
+  constructor(pluginId: PluginId, code: string, message: string) {
+    super(message);
+    this.name = "PluginApiError";
+    this.code = code;
+    this.pluginId = pluginId;
+  }
+}
+
+/** Completes when `signal` aborts, at once if it already has. */
+export const abortEffect = (signal: AbortSignal) =>
+  Effect.callback<void>((resume) => {
+    const onAbort = () => resume(Effect.void);
+    if (signal.aborted) return onAbort();
+    signal.addEventListener("abort", onAbort, { once: true });
+    return Effect.sync(() => signal.removeEventListener("abort", onAbort));
+  });
+
+export const makeFacadeContext = (input: {
+  readonly pluginId: PluginId;
+  readonly activation: PluginActivation;
+  readonly context: Context.Context<never>;
+}): FacadeContext => {
+  const { activation, context, pluginId } = input;
+  // T3's work for a call is not the plugin's code, so it leaves the plugin's scope.
+  const runExit = <A, E>(effect: Effect.Effect<A, E>) =>
+    pluginCodeScope.exit(() => Effect.runPromiseExitWith(context)(effect));
+  // Cleanups may still save state; afterwards a disabled plugin's leftovers cannot act.
+  const call: FacadeContext["call"] = (effect) =>
+    activation.ended.signal.aborted
+      ? refused(
+          new PluginApiCallError(
+            pluginId,
+            "PluginDeactivated",
+            "This plugin activation has ended.",
+          ),
+        )
+      : forPlugin(
+          runExit(effect).then((exit) => {
+            if (Exit.isSuccess(exit)) return exit.value;
+            const error = Cause.squash(exit.cause);
+            const code =
+              typeof error === "object" &&
+              error !== null &&
+              "_tag" in error &&
+              typeof error._tag === "string"
+                ? error._tag
+                : "PluginApiFailure";
+            throw new PluginApiCallError(
+              pluginId,
+              code,
+              error instanceof Error ? error.message : "The plugin API call failed.",
+            );
+          }),
+        );
+  return {
+    pluginId,
+    activation,
+    context,
+    asPlugin: (run) => pluginCodeScope.run(pluginId, run),
+    call,
+    fork: (effect) => {
+      pluginCodeScope.exit(() =>
+        Effect.runForkWith(context)(
+          effect.pipe(
+            Effect.catchCause((cause) =>
+              Effect.logWarning("plugin background work failed", {
+                pluginId,
+                cause: Cause.pretty(cause).slice(0, 500),
+              }),
+            ),
+          ),
+        ),
+      );
+    },
+    // The plugin pulls, but each pull runs T3's side of the stream, so it is a call too.
+    iterate: (stream) => {
+      const iterable = Stream.toAsyncIterableWith(
+        stream.pipe(Stream.interruptWhen(abortEffect(activation.controller.signal))),
+        context,
+      );
+      return {
+        [Symbol.asyncIterator]: () => {
+          const iterator = pluginCodeScope.exit(() => iterable[Symbol.asyncIterator]());
+          return {
+            next: () => call(Effect.promise(() => iterator.next())),
+            return: () =>
+              call(
+                Effect.promise(
+                  () => iterator.return?.() ?? Promise.resolve({ done: true, value: undefined }),
+                ),
+              ),
+          };
+        },
+      };
+    },
+  };
+};
diff --git a/apps/server/src/plugins/api/mcp.ts b/apps/server/src/plugins/api/mcp.ts
new file mode 100644
index 0000000000000..1db23dba58e28
--- /dev/null
+++ b/apps/server/src/plugins/api/mcp.ts
@@ -0,0 +1,78 @@
+import type { PluginApi } from "@t3tools/plugin-sdk/server";
+import * as Cause from "effect/Cause";
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import * as Schema from "effect/Schema";
+
+import * as PluginMcpTools from "../PluginMcpTools.ts";
+import { type FacadeContext, pluginCodeScope } from "./facade.ts";
+
+const isAccess = Schema.is(Schema.Literals(["read", "write"]));
+const isJsonObject = Schema.is(Schema.JsonObject);
+// Anthropic's API refuses a tool whose input schema combines schemas at its top level.
+const TOP_LEVEL_COMBINATORS = ["anyOf", "oneOf", "allOf"];
+
+export const makeMcpApi = (
+  facade: FacadeContext,
+  services: { readonly mcpTools: PluginMcpTools.PluginMcpTools["Service"] },
+): PluginApi["mcp"] => {
+  const { activation, pluginId } = facade;
+  const deactivated = activation.controller.signal;
+  let unregistersOnAbort = false;
+  return {
+    registerTool: (tool, handler) => {
+      if (deactivated.aborted) throw new Error("This plugin activation has ended.");
+      // Plugins are untyped JavaScript, and a misspelled access level must not open a write.
+      if (!isAccess(tool.access)) {
+        throw new TypeError(`Tool "${tool.name}" needs access "read" or "write".`);
+      }
+      // Model APIs reject a tool whose schema is not an object, which would fail every turn.
+      if (
+        typeof tool.description !== "string" ||
+        !isJsonObject(tool.inputSchema) ||
+        tool.inputSchema.type !== "object"
+      ) {
+        throw new TypeError(
+          `Tool "${tool.name}" needs a description and an object JSON Schema for its input.`,
+        );
+      }
+      const combinator = TOP_LEVEL_COMBINATORS.find((keyword) => keyword in tool.inputSchema);
+      if (combinator !== undefined) {
+        throw new TypeError(
+          `Tool "${tool.name}" has ${combinator} at the top of its input schema, which model APIs refuse. Put the alternatives in a property instead.`,
+        );
+      }
+      // Registering tells `/mcp` clients, which is T3's work, not the plugin's.
+      const registered = pluginCodeScope.exit(() =>
+        Effect.runSyncExitWith(facade.context)(
+          services.mcpTools.register({
+            pluginId,
+            tool,
+            handler: (input, { signal, threadId }) =>
+              facade.asPlugin(() =>
+                Promise.resolve().then(() =>
+                  handler(input, { signal: AbortSignal.any([signal, deactivated]), threadId }),
+                ),
+              ),
+            deactivated,
+          }),
+        ),
+      );
+      if (Exit.isFailure(registered)) {
+        const error = Cause.squash(registered.cause);
+        throw PluginMcpTools.isPluginMcpToolNameError(error)
+          ? new TypeError(`"${tool.name}" is not a valid tool name. ${error.message}`)
+          : error;
+      }
+      // Abort comes before any cleanup on deactivate, so a cleanup that hangs cannot keep tools live.
+      if (!unregistersOnAbort) {
+        unregistersOnAbort = true;
+        deactivated.addEventListener(
+          "abort",
+          () => facade.fork(services.mcpTools.unregisterPlugin(pluginId)),
+          { once: true },
+        );
+      }
+    },
+  };
+};
diff --git a/apps/server/src/plugins/pluginDiscovery.test.ts b/apps/server/src/plugins/pluginDiscovery.test.ts
new file mode 100644
index 0000000000000..aacc06f5258e5
--- /dev/null
+++ b/apps/server/src/plugins/pluginDiscovery.test.ts
@@ -0,0 +1,77 @@
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { assert, it } from "@effect/vitest";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as Path from "effect/Path";
+
+import { discoverPlugins } from "./pluginDiscovery.ts";
+
+const manifest = (id: string) =>
+  JSON.stringify({ id, name: id, version: "1.0.0", engines: { t3: ">=0.1.0" } });
+
+it.layer(NodeServices.layer)("discoverPlugins", (it) => {
+  it.effect("reports valid, missing, invalid, renamed and duplicate plugins", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const path = yield* Path.Path;
+      const root = yield* fs.makeTempDirectoryScoped({ prefix: "t3code-plugin-discovery-" });
+      const pluginsDir = path.join(root, "plugins");
+      const write = Effect.fn(function* (dir: string, contents: string | undefined) {
+        yield* fs.makeDirectory(dir, { recursive: true });
+        if (contents !== undefined) {
+          yield* fs.writeFileString(path.join(dir, "t3-plugin.json"), contents);
+        }
+      });
+      yield* write(path.join(pluginsDir, "valid"), manifest("valid"));
+      yield* write(path.join(pluginsDir, "empty"), undefined);
+      yield* write(
+        path.join(pluginsDir, "invalid"),
+        JSON.stringify({ ...JSON.parse(manifest("invalid")), version: "1" }),
+      );
+      yield* write(path.join(pluginsDir, "renamed"), manifest("other-name"));
+      // A schema the settings validator cannot compile would refuse every save.
+      yield* write(
+        path.join(pluginsDir, "unchecked"),
+        JSON.stringify({
+          ...JSON.parse(manifest("unchecked")),
+          settingsSchema: { type: "object", properties: { count: { $ref: "#/$defs/no" } } },
+        }),
+      );
+      yield* write(path.join(pluginsDir, "My Plugin"), manifest("spaced"));
+      yield* write(path.join(pluginsDir, "Not An Id"), undefined);
+      // Sorts before "valid", so it is the copy used.
+      yield* write(path.join(pluginsDir, "Copy of valid"), manifest("valid"));
+      const devCopy = path.join(root, "dev", "valid");
+      yield* write(devCopy, manifest("valid"));
+      const devOnly = path.join(root, "dev", "workbench");
+      yield* write(devOnly, manifest("dev-only"));
+
+      const plugins = yield* discoverPlugins({ pluginsDir, devPaths: [devCopy, devOnly] });
+      const summary = plugins.map((plugin) => ({
+        id: plugin.id,
+        source: plugin.source,
+        stage: "failure" in plugin ? plugin.failure.stage : "ok",
+      }));
+
+      assert.deepStrictEqual(summary, [
+        { id: "valid", source: "installed", stage: "ok" },
+        { id: "spaced", source: "installed", stage: "ok" },
+        { id: "empty", source: "installed", stage: "discovery" },
+        { id: "invalid", source: "installed", stage: "manifest" },
+        { id: "other-name", source: "installed", stage: "ok" },
+        { id: "unchecked", source: "installed", stage: "manifest" },
+        { id: "valid", source: "installed", stage: "duplicate" },
+        { id: "valid", source: "dev", stage: "duplicate" },
+        { id: "dev-only", source: "dev", stage: "ok" },
+      ]);
+      assert.strictEqual(plugins[0]?.folder, path.join(pluginsDir, "Copy of valid"));
+      const failures = plugins.map((plugin) => ("failure" in plugin ? plugin.failure.message : ""));
+      assert.include(failures[3], "version");
+      assert.include(failures[5], 'Missing definition "no"');
+      assert.strictEqual(
+        failures[7],
+        'The installed folder "Copy of valid" already has the id valid. Remove or unlink one of them.',
+      );
+    }).pipe(Effect.scoped),
+  );
+});
diff --git a/apps/server/src/plugins/pluginDiscovery.ts b/apps/server/src/plugins/pluginDiscovery.ts
new file mode 100644
index 0000000000000..9aae338cc9882
--- /dev/null
+++ b/apps/server/src/plugins/pluginDiscovery.ts
@@ -0,0 +1,187 @@
+import {
+  PluginId,
+  PluginManifest,
+  type PluginFailure,
+  type PluginSource,
+} from "@t3tools/contracts";
+import * as Cause from "effect/Cause";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as Path from "effect/Path";
+import * as Schema from "effect/Schema";
+
+import { settingsSchemaProblem } from "./PluginSettingsStore.ts";
+
+const PLUGIN_MANIFEST_FILE = "t3-plugin.json";
+
+// Discovery runs at startup and on every reload, so a plugins folder full of unrelated
+// directories or an oversized manifest must not stall the server.
+const MAX_PLUGIN_DIRECTORIES = 64;
+const MAX_MANIFEST_BYTES = 64 * 1024;
+const MAX_FAILURE_MESSAGE_CHARS = 500;
+
+const decodeManifest = Schema.decodeUnknownExit(Schema.fromJsonString(PluginManifest));
+const decodeLooseId = Schema.decodeUnknownOption(
+  Schema.fromJsonString(Schema.Struct({ id: PluginId })),
+);
+const isPluginId = Schema.is(PluginId);
+
+const causeMessage = (cause: Cause.Cause<unknown>) => {
+  const error = Cause.squash(cause);
+  return error instanceof Error ? error.message : String(error);
+};
+
+interface PluginLocation {
+  readonly id: PluginId;
+  readonly rootDir: string;
+  /** The folder as listed, before links resolve. Installed ones are inside the plugins folder. */
+  readonly folder: string;
+  readonly source: PluginSource;
+}
+
+/** A plugin directory, with its manifest when it could be read and decoded. */
+export type DiscoveredPlugin = PluginLocation &
+  ({ readonly manifest: PluginManifest } | { readonly failure: PluginFailure });
+
+const failed = (location: PluginLocation, failure: PluginFailure): DiscoveredPlugin => ({
+  ...location,
+  failure: { ...failure, message: failure.message.slice(0, MAX_FAILURE_MESSAGE_CHARS) },
+});
+
+/**
+ * Lists installed plugins (`<pluginsDir>/<any folder>/t3-plugin.json`), then dev plugins
+ * (`devPaths`). An id is used once: a later folder with an id already listed is reported as failed.
+ */
+export const discoverPlugins = Effect.fn("PluginDiscovery.discover")(function* (input: {
+  readonly pluginsDir: string;
+  readonly devPaths: ReadonlyArray<string>;
+}) {
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+
+  // The helpers below run for every plugin folder inside the discovery span.
+  const readManifest = Effect.fnUntraced(function* (rootDir: string) {
+    const manifestPath = path.join(rootDir, PLUGIN_MANIFEST_FILE);
+    const info = yield* fs.stat(manifestPath).pipe(Effect.option);
+    if (info._tag === "None" || info.value.type !== "File") {
+      return { _tag: "Missing" } as const;
+    }
+    if (Number(info.value.size) > MAX_MANIFEST_BYTES) {
+      return { _tag: "TooLarge" } as const;
+    }
+    const raw = yield* fs.readFileString(manifestPath).pipe(Effect.option);
+    return raw._tag === "None"
+      ? ({ _tag: "Missing" } as const)
+      : ({ _tag: "Read", raw: raw.value } as const);
+  });
+
+  // Node caches modules by real path, so reload can only find a plugin's modules by its real root.
+  const inspect = Effect.fnUntraced(function* (
+    location: string,
+    source: PluginSource,
+    fallbackId: PluginId | undefined,
+  ) {
+    const rootDir = yield* fs.realPath(location).pipe(Effect.orElseSucceed(() => location));
+    const manifest = yield* readManifest(rootDir);
+    if (manifest._tag !== "Read") {
+      if (fallbackId === undefined) return undefined;
+      return failed(
+        { id: fallbackId, rootDir, folder: location, source },
+        {
+          stage: "discovery",
+          message:
+            manifest._tag === "Missing"
+              ? `No ${PLUGIN_MANIFEST_FILE} in the plugin folder.`
+              : `${PLUGIN_MANIFEST_FILE} is larger than ${MAX_MANIFEST_BYTES} bytes.`,
+        },
+      );
+    }
+    const decoded = decodeManifest(manifest.raw);
+    if (decoded._tag === "Success") {
+      const copy = { id: decoded.value.id, rootDir, folder: location, source };
+      const { settingsSchema } = decoded.value;
+      const schemaProblem =
+        settingsSchema === undefined ? undefined : settingsSchemaProblem(settingsSchema);
+      return schemaProblem === undefined
+        ? { ...copy, manifest: decoded.value }
+        : failed(copy, {
+            stage: "manifest",
+            message: `T3 Code cannot validate its settingsSchema: ${schemaProblem}`,
+          });
+    }
+    const looseId = decodeLooseId(manifest.raw);
+    const id = looseId._tag === "Some" ? looseId.value.id : fallbackId;
+    if (id === undefined) return undefined;
+    return failed(
+      { id, rootDir, folder: location, source },
+      {
+        stage: "manifest",
+        message: `Invalid ${PLUGIN_MANIFEST_FILE}: ${causeMessage(decoded.cause)}`,
+      },
+    );
+  });
+
+  const plugins: Array<DiscoveredPlugin> = [];
+  const firstWithId = new Map<PluginId, DiscoveredPlugin>();
+  // Settings, storage and the switch belong to the id, so two folders with one id cannot both run.
+  const add = (plugin: DiscoveredPlugin) => {
+    const first = firstWithId.get(plugin.id);
+    if (first === undefined) {
+      firstWithId.set(plugin.id, plugin);
+      plugins.push(plugin);
+      return;
+    }
+    // The folder's name only: clients that cannot manage plugins see failures but not paths.
+    const kind = first.source === "dev" ? "linked" : "installed";
+    plugins.push(
+      failed(plugin, {
+        stage: "duplicate",
+        message: `The ${kind} folder "${path.basename(first.folder)}" already has the id ${plugin.id}. Remove or unlink one of them.`,
+      }),
+    );
+  };
+  let examined = 0;
+  const underLimit = Effect.fnUntraced(function* (location: string) {
+    examined += 1;
+    if (examined <= MAX_PLUGIN_DIRECTORIES) return true;
+    yield* Effect.logWarning("ignoring plugin folders past the limit", {
+      path: location,
+      limit: MAX_PLUGIN_DIRECTORIES,
+    });
+    return false;
+  });
+
+  const entries = yield* fs
+    .readDirectory(input.pluginsDir)
+    .pipe(Effect.orElseSucceed((): Array<string> => []));
+  // People copy plugin folders in by hand, so the manifest names the plugin, not the folder.
+  for (const entry of entries.toSorted()) {
+    if (entry.startsWith(".")) continue;
+    const folder = path.join(input.pluginsDir, entry);
+    const info = yield* fs.stat(folder).pipe(Effect.option);
+    if (info._tag === "None" || info.value.type !== "Directory") continue;
+    if (!(yield* underLimit(input.pluginsDir))) break;
+    const plugin = yield* inspect(folder, "installed", isPluginId(entry) ? entry : undefined);
+    if (plugin === undefined) {
+      yield* Effect.logWarning("ignoring plugin folder without a plugin id", { path: folder });
+      continue;
+    }
+    add(plugin);
+  }
+
+  for (const devPath of input.devPaths) {
+    const rootDir = path.resolve(devPath);
+    if (!(yield* underLimit(rootDir))) break;
+    const basename = path.basename(rootDir);
+    const plugin = yield* inspect(rootDir, "dev", isPluginId(basename) ? basename : undefined);
+    if (plugin === undefined) {
+      yield* Effect.logWarning("ignoring dev plugin path without a usable plugin id", {
+        path: rootDir,
+      });
+      continue;
+    }
+    add(plugin);
+  }
+
+  return plugins;
+});
diff --git a/apps/server/src/plugins/pluginFailureGuard.test.ts b/apps/server/src/plugins/pluginFailureGuard.test.ts
new file mode 100644
index 0000000000000..1c6ce9f4c3be7
--- /dev/null
+++ b/apps/server/src/plugins/pluginFailureGuard.test.ts
@@ -0,0 +1,119 @@
+import { assert, it } from "@effect/vitest";
+import { PluginId } from "@t3tools/contracts";
+
+import { pluginCodeScope } from "./api/facade.ts";
+import { makePluginFailureGuard } from "./pluginFailureGuard.ts";
+
+const leaky = PluginId.make("leaky");
+
+/** Takes the runner's crash listeners off, which would report the fake crashes below as real. */
+const withoutRunnerListeners = () => {
+  const exceptions = process.listeners("uncaughtException");
+  const rejections = process.listeners("unhandledRejection");
+  process.removeAllListeners("uncaughtException");
+  process.removeAllListeners("unhandledRejection");
+  return {
+    [Symbol.dispose]: () => {
+      process.removeAllListeners("uncaughtException");
+      process.removeAllListeners("unhandledRejection");
+      for (const listener of exceptions) process.on("uncaughtException", listener);
+      for (const listener of rejections) process.on("unhandledRejection", listener);
+    },
+  };
+};
+
+/** A guard watching the `leaky` plugin, with what it recorded. */
+const watchLeaky = () => {
+  const rejected: Array<string> = [];
+  const crashed: Array<string> = [];
+  const guard = makePluginFailureGuard({
+    onRejection: (pluginId) => rejected.push(pluginId),
+    onCrash: (pluginId) => crashed.push(pluginId),
+  });
+  guard.watch("/plugins/leaky/", leaky);
+  return { rejected, crashed, uninstall: guard.uninstall, [Symbol.dispose]: guard.uninstall };
+};
+
+const pluginError = (message: string) => {
+  const error = new Error(message);
+  error.stack = `Error: ${message}\n    at /plugins/leaky/server.cjs:1:1`;
+  return error;
+};
+
+// As Node reports a rejection nobody handled.
+const reject = (reason: Error) => process.emit("unhandledRejection", reason, Promise.resolve());
+const messageOf = (reason: unknown) => (reason instanceof Error ? reason.message : String(reason));
+
+it("records a plugin's uncaught exception and leaves the exit to Node", () => {
+  using _runner = withoutRunnerListeners();
+  using guard = watchLeaky();
+
+  // Node tells the monitor before the listeners, or its own exit when there are none.
+  process.emit("uncaughtExceptionMonitor", pluginError("thrown in a timer"));
+  process.emit("uncaughtExceptionMonitor", new Error("T3 crashed"));
+
+  assert.deepStrictEqual(guard.crashed, ["leaky"]);
+  // It adds no listener, so Node, or a guard that exits only while it listens alone, still exits.
+  assert.strictEqual(process.listenerCount("uncaughtException"), 0);
+  guard.uninstall();
+  assert.strictEqual(process.listenerCount("uncaughtExceptionMonitor"), 0);
+});
+
+it("hands T3's own rejections to a listener added after it, and only those", async () => {
+  using _runner = withoutRunnerListeners();
+  using guard = watchLeaky();
+  const seen: Array<string> = [];
+  // Such as a provider SDK's guard, when its layer builds after a plugin started.
+  const late = (reason: unknown) => seen.push(messageOf(reason));
+  process.on("unhandledRejection", late);
+  await Promise.resolve();
+
+  reject(pluginError("rejected in a timer"));
+  reject(new Error("T3 rejected"));
+
+  assert.deepStrictEqual(guard.rejected, ["leaky"]);
+  assert.deepStrictEqual(seen, ["T3 rejected"]);
+  // It listens alone, so a guard that acts only then still does.
+  assert.strictEqual(process.listenerCount("unhandledRejection"), 1);
+  guard.uninstall();
+  assert.deepStrictEqual(process.listeners("unhandledRejection"), [late]);
+});
+
+it("calls a listener added with once for one rejection", () => {
+  using _runner = withoutRunnerListeners();
+  const seen: Array<string> = [];
+  process.once("unhandledRejection", (reason) => seen.push(messageOf(reason)));
+  using _guard = watchLeaky();
+
+  reject(new Error("first"));
+  // With nothing else listening, the second stops the server as Node would.
+  assert.throws(() => reject(new Error("second")), "second");
+  assert.deepStrictEqual(seen, ["first"]);
+});
+
+it("stops calling a listener its owner removes", () => {
+  using _runner = withoutRunnerListeners();
+  const seen: Array<string> = [];
+  const listener = (reason: unknown) => seen.push(messageOf(reason));
+  process.on("unhandledRejection", listener);
+  using _guard = watchLeaky();
+
+  process.off("unhandledRejection", listener);
+
+  assert.throws(() => reject(new Error("T3 rejected")), "T3 rejected");
+  assert.deepStrictEqual(seen, []);
+});
+
+it("stops calling a plugin's own listener once the plugin removes it on disable", async () => {
+  using _runner = withoutRunnerListeners();
+  using _guard = watchLeaky();
+  const seen: Array<string> = [];
+  const listener = (reason: unknown) => seen.push(messageOf(reason));
+  // As the plugin's `activate`, then its `onDeactivate`.
+  pluginCodeScope.run(leaky, () => process.on("unhandledRejection", listener));
+  await Promise.resolve();
+  process.off("unhandledRejection", listener);
+
+  assert.throws(() => reject(new Error("T3 rejected")), "T3 rejected");
+  assert.deepStrictEqual(seen, []);
+});
diff --git a/apps/server/src/plugins/pluginFailureGuard.ts b/apps/server/src/plugins/pluginFailureGuard.ts
new file mode 100644
index 0000000000000..43e1240adb5d1
--- /dev/null
+++ b/apps/server/src/plugins/pluginFailureGuard.ts
@@ -0,0 +1,147 @@
+// @effect-diagnostics globalConsole:off - The guard runs in Node's process callbacks, outside an Effect runtime, where printing is all it can do with its own failure.
+import type { PluginId } from "@t3tools/contracts";
+import * as Predicate from "effect/Predicate";
+
+import { PluginApiCallError, pluginCodeScope } from "./api/facade.ts";
+
+const REJECTION = "unhandledRejection";
+type Listener = (...args: ReadonlyArray<unknown>) => unknown;
+const isListener = (value: unknown): value is Listener => typeof value === "function";
+
+/**
+ * Ties plugin failures outside a call to the plugin. An uncaught exception goes to `onCrash` and
+ * still stops the server, since Node calls resuming unsafe. A plugin's unhandled rejection goes to
+ * `onRejection` and skips the other listeners, which the guard wraps; it listens only while none do.
+ */
+export const makePluginFailureGuard = (handlers: {
+  readonly onRejection: (pluginId: PluginId, reason: unknown) => void;
+  /** Runs just before Node reports the exception, so it has to finish synchronously. */
+  readonly onCrash: (pluginId: PluginId, error: unknown) => void;
+}) => {
+  // Node keeps loaded plugin code and its timers until exit, so a root is never dropped.
+  const roots = new Map<string, PluginId>();
+  // Each wrapper and what `process.rawListeners` held before it: the listener or its `once` wrapper.
+  const wrapped = new WeakMap<Listener, Listener>();
+  let installed = false;
+  let syncing = false;
+
+  // The plugin whose scope the failure ran in, else one whose files its stack names.
+  const pluginOf = (error: unknown): PluginId | undefined => {
+    const running = pluginCodeScope.getStore();
+    if (running !== undefined) return running;
+    if (error instanceof PluginApiCallError) return error.pluginId;
+    let stack: unknown;
+    try {
+      stack = Predicate.isObject(error) ? error.stack : undefined;
+    } catch {
+      // A plugin can throw an object whose `stack` getter throws.
+      return undefined;
+    }
+    if (typeof stack !== "string") return undefined;
+    for (const [root, pluginId] of roots) if (stack.includes(root)) return pluginId;
+    return undefined;
+  };
+
+  // Node calls monitors before the exception's listeners or its own exit. It adds no listener, so
+  // whatever stops the server for T3's crashes stops it for a plugin's too.
+  const onUncaught = (error: unknown) => {
+    const pluginId = pluginOf(error);
+    if (pluginId === undefined) return;
+    try {
+      handlers.onCrash(pluginId, error);
+    } catch (recordError) {
+      // Node still reports the crash itself.
+      console.error(recordError);
+    }
+  };
+
+  // What Node does with no listener, for rejections that aren't a plugin's.
+  const alone = (reason: unknown) => {
+    const pluginId = pluginOf(reason);
+    if (pluginId !== undefined) return handlers.onRejection(pluginId, reason);
+    throw reason;
+  };
+
+  // Node's `off` and `listeners()` read `listener`, as on its own `once` wrappers.
+  const wrap = (raw: Listener) => {
+    const listener: unknown = Reflect.get(raw, "listener");
+    const original = isListener(listener) ? listener : raw;
+    const gated = Object.assign(
+      (reason: unknown, promise: unknown) => {
+        const pluginId = pluginOf(reason);
+        if (pluginId !== undefined) {
+          // Every wrapper sees the rejection; the first records it.
+          const first = process
+            .rawListeners(REJECTION)
+            .find((other) => isListener(other) && wrapped.has(other));
+          if (first === gated) handlers.onRejection(pluginId, reason);
+          return;
+        }
+        if (original !== raw) process.off(REJECTION, gated);
+        Reflect.apply(original, process, [reason, promise]);
+      },
+      { listener: original },
+    );
+    wrapped.set(gated, raw);
+    return gated;
+  };
+
+  // The server always installs the Cursor SDK's listener (CursorSdk.ts). It exits when it listens
+  // alone and leaves a rejection to the others otherwise, so beside a plain listener T3's own
+  // rejections would no longer stop the server. Wrapped, it still sees those, and only those.
+  const sync = () => {
+    if (!installed || syncing) return;
+    syncing = true;
+    try {
+      const listeners = process.rawListeners(REJECTION).filter(isListener);
+      const others = listeners.filter((other) => other !== alone);
+      if (
+        others.every((other) => wrapped.has(other)) &&
+        (others.length === 0) === listeners.includes(alone)
+      ) {
+        return;
+      }
+      // Re-adding them all keeps their order.
+      process.removeAllListeners(REJECTION);
+      for (const other of others) {
+        process.on(REJECTION, wrapped.has(other) ? other : wrap(other));
+      }
+      if (others.length === 0) process.on(REJECTION, alone);
+    } finally {
+      syncing = false;
+    }
+  };
+  // Node adds a listener after announcing it, so it is wrapped once it is in.
+  const onNewListener = (event: string | symbol) => {
+    if (!syncing && event === REJECTION) queueMicrotask(sync);
+  };
+  const onRemoveListener = (event: string | symbol) => {
+    if (!syncing && event === REJECTION) sync();
+  };
+
+  return {
+    /** Ties failures whose stack names a file under `root` to the plugin; the first call installs. */
+    watch: (root: string, pluginId: PluginId) => {
+      roots.set(root, pluginId);
+      if (installed) return;
+      installed = true;
+      sync();
+      process.on("newListener", onNewListener);
+      process.on("removeListener", onRemoveListener);
+      process.on("uncaughtExceptionMonitor", onUncaught);
+    },
+    /** Puts back the listeners it wrapped. */
+    uninstall: () => {
+      if (!installed) return;
+      installed = false;
+      process.off("newListener", onNewListener);
+      process.off("removeListener", onRemoveListener);
+      process.off("uncaughtExceptionMonitor", onUncaught);
+      const others = process.rawListeners(REJECTION).filter(isListener);
+      process.removeAllListeners(REJECTION);
+      for (const other of others) {
+        if (other !== alone) process.on(REJECTION, wrapped.get(other) ?? other);
+      }
+    },
+  };
+};
diff --git a/apps/server/src/plugins/pluginFailures.ts b/apps/server/src/plugins/pluginFailures.ts
new file mode 100644
index 0000000000000..0d55610b87012
--- /dev/null
+++ b/apps/server/src/plugins/pluginFailures.ts
@@ -0,0 +1,82 @@
+import type { PluginId } from "@t3tools/contracts";
+import * as Clock from "effect/Clock";
+import * as Duration from "effect/Duration";
+import * as Effect from "effect/Effect";
+import * as Ref from "effect/Ref";
+
+import { errorText } from "./api/facade.ts";
+
+// A plugin's failures outside a call reach clients at most this often, the latest one last, so a
+// timer failing every few milliseconds with new text does not resend the list each time.
+const FAILURE_PUBLISH_INTERVAL = Duration.seconds(5);
+
+interface Failure {
+  readonly revision: number | undefined;
+  readonly message: string;
+}
+
+/**
+ * Builds the host's record of the failures a plugin's row shows: server code failing outside a
+ * call. Each belongs to the start, the revision, it happened in.
+ */
+export const makePluginFailures = Effect.gen(function* () {
+  // By plugin id, for the start it happened in: a new start's revision hides the old one. A
+  // stopped plugin's leftover timers fail with no revision.
+  const serverFailures = yield* Ref.make<ReadonlyMap<PluginId, Failure>>(new Map());
+  // When each plugin's failure was last published, and the plugins whose next one is waiting.
+  const publishedAt = new Map<PluginId, number>();
+  const waiting = new Set<PluginId>();
+
+  return {
+    /** Looks up a plugin's server failure for the start `revision`. */
+    current: Effect.gen(function* () {
+      const server = yield* Ref.get(serverFailures);
+      return (pluginId: PluginId, revision: number | undefined) => {
+        const failure = server.get(pluginId);
+        return failure !== undefined && failure.revision === revision ? failure.message : undefined;
+      };
+    }),
+    /**
+     * Records a failure of the start `revision` outside a call, then succeeds with whether to
+     * publish: a timer that fails every second with the same text logs and publishes once.
+     * Untraced: a plugin's timer can fail every few milliseconds.
+     */
+    recordServer: Effect.fnUntraced(function* (
+      pluginId: PluginId,
+      revision: number | undefined,
+      error: unknown,
+    ) {
+      const message = errorText(error);
+      const known = (yield* Ref.get(serverFailures)).get(pluginId);
+      if (known?.revision === revision && known?.message === message) return false;
+      yield* Ref.update(serverFailures, (all) => new Map(all).set(pluginId, { revision, message }));
+      if (waiting.has(pluginId)) return false;
+      const last = publishedAt.get(pluginId);
+      const wait =
+        last === undefined
+          ? 0
+          : last + Duration.toMillis(FAILURE_PUBLISH_INTERVAL) - (yield* Clock.currentTimeMillis);
+      if (wait > 0) {
+        waiting.add(pluginId);
+        yield* Effect.sleep(Duration.millis(wait)).pipe(
+          Effect.ensuring(Effect.sync(() => waiting.delete(pluginId))),
+        );
+      }
+      publishedAt.set(pluginId, yield* Clock.currentTimeMillis);
+      yield* Effect.logWarning("plugin code failed outside a call", {
+        pluginId,
+        reason: (yield* Ref.get(serverFailures)).get(pluginId)?.message ?? message,
+      });
+      return true;
+    }),
+    /** Forgets the plugin's server failures, as a stop does. */
+    clearServer: (pluginId: PluginId) =>
+      Ref.update(serverFailures, (all) => {
+        const next = new Map(all);
+        next.delete(pluginId);
+        return next;
+      }),
+  };
+});
+
+export type PluginFailures = Effect.Success<typeof makePluginFailures>;
diff --git a/apps/server/src/plugins/pluginHostTestHarness.ts b/apps/server/src/plugins/pluginHostTestHarness.ts
new file mode 100644
index 0000000000000..7cc40d98b8c60
--- /dev/null
+++ b/apps/server/src/plugins/pluginHostTestHarness.ts
@@ -0,0 +1,102 @@
+// @effect-diagnostics preferSchemaOverJson:off - like the tests, it writes manifests as plain JSON.
+// The plugin host with its real stores and MCP tool registry, for its tests and the tests of the
+// modules it builds.
+import type { PluginState } from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+import * as Stream from "effect/Stream";
+
+import * as ServerSecretStore from "../auth/ServerSecretStore.ts";
+import * as EnvironmentTheme from "../environmentTheme.ts";
+import * as ServerConfig from "../config.ts";
+import * as PluginHost from "./PluginHost.ts";
+import * as PluginMcpTools from "./PluginMcpTools.ts";
+import * as PluginSettingsStore from "./PluginSettingsStore.ts";
+import * as PluginStorage from "./PluginStorage.ts";
+
+export const fixturesDir = new URL("../../../../packages/plugin-sdk/fixtures/", import.meta.url)
+  .pathname;
+
+export const layerConfig = () =>
+  Layer.fresh(ServerConfig.layerTest(process.cwd(), { prefix: "t3code-plugin-host-test-" }));
+
+// Every list of theme folders the host published, for the web files case.
+export const publishedThemeDirectories: Array<ReadonlyArray<string>> = [];
+const layerThemes = Layer.mock(EnvironmentTheme.EnvironmentThemeService)({
+  setPluginThemeDirectories: (directories) =>
+    Effect.sync(() => {
+      publishedThemeDirectories.push(directories);
+    }),
+});
+
+/** `themes` replaces the recording theme service, such as to hold a publish where it calls it. */
+export const layerHost = (themes = layerThemes) =>
+  Layer.fresh(
+    PluginHost.layer.pipe(
+      Layer.provideMerge(Layer.mergeAll(PluginSettingsStore.layer, PluginStorage.layer)),
+      Layer.provide(ServerSecretStore.layer),
+      Layer.provide(themes),
+      Layer.provideMerge(PluginMcpTools.layer),
+    ),
+  );
+
+/** The real file system with some of its methods replaced, for the host's layer. */
+export const layerFileSystemWith = (
+  replace: (fs: FileSystem.FileSystem) => Partial<FileSystem.FileSystem>,
+) =>
+  Layer.effect(
+    FileSystem.FileSystem,
+    FileSystem.FileSystem.use((fs) => Effect.succeed({ ...fs, ...replace(fs) })),
+  );
+
+export const writeFile = Effect.fn(function* (filePath: string, contents: string) {
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  yield* fs.makeDirectory(path.dirname(filePath), { recursive: true });
+  yield* fs.writeFileString(filePath, contents);
+});
+
+export const writePluginsConfig = Effect.fn(function* (config: {
+  readonly enabled?: Record<string, boolean>;
+  readonly devPaths?: ReadonlyArray<string>;
+}) {
+  const { stateDir } = yield* ServerConfig.ServerConfig;
+  yield* writeFile(`${stateDir}/plugins.json`, JSON.stringify(config));
+});
+
+/** A plugin written for one test, under `<stateDir>/plugins/<id>`. */
+export const writeInstalledPlugin = Effect.fn(function* (id: string, serverSource: string) {
+  const { stateDir } = yield* ServerConfig.ServerConfig;
+  const rootDir = `${stateDir}/plugins/${id}`;
+  yield* writeFile(
+    `${rootDir}/t3-plugin.json`,
+    JSON.stringify({
+      id,
+      name: id,
+      version: "0.1.0",
+      engines: { t3: ">=0.1.0" },
+      server: "./server.cjs",
+    }),
+  );
+  yield* writeFile(`${rootDir}/server.cjs`, serverSource);
+  return rootDir;
+});
+
+export const stateOf = (states: ReadonlyArray<PluginState>, id: string) =>
+  states.find((state) => state.id === id);
+
+/** Resolves with the first list where every listed plugin has its expected status. */
+export const waitForStatuses = (
+  host: PluginHost.PluginHost["Service"],
+  expected: Readonly<Record<string, PluginState["status"]>>,
+) =>
+  host.streamStates.pipe(
+    Stream.filter((states) =>
+      Object.entries(expected).every(([id, status]) => stateOf(states, id)?.status === status),
+    ),
+    Stream.runHead,
+    Effect.map(Option.getOrThrow),
+  );
diff --git a/apps/server/src/plugins/pluginRpcHandlers.ts b/apps/server/src/plugins/pluginRpcHandlers.ts
new file mode 100644
index 0000000000000..4288e7a866f3c
--- /dev/null
+++ b/apps/server/src/plugins/pluginRpcHandlers.ts
@@ -0,0 +1,80 @@
+import {
+  type AuthEnvironmentScope,
+  PluginError,
+  type PluginCreateUploadUrlInput,
+  type PluginId,
+  type PluginInvokeInput,
+  type PluginListInput,
+  type PluginReloadInput,
+  type PluginRescanInput,
+  type PluginSetEnabledInput,
+  type PluginSettingsGetInput,
+  type PluginSettingsUpdateInput,
+  type PluginSubscribeInput,
+  type PluginUninstallInput,
+  WS_METHODS,
+} from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import * as Stream from "effect/Stream";
+
+import { rpcAuthorizationError } from "../auth/RpcAuthorization.ts";
+import * as PluginHost from "./PluginHost.ts";
+import type * as PluginInstaller from "./PluginInstaller.ts";
+import type * as PluginUploads from "./pluginUploads.ts";
+
+const toRpcError = (pluginId: PluginId) => (error: { readonly message: string }) =>
+  PluginHost.isPluginAccessDeniedError(error)
+    ? rpcAuthorizationError(error.requiredScope)
+    : new PluginError({ message: error.message, pluginId });
+
+/** The `plugins.*` WebSocket handlers. `scopes` are the connected session's. */
+export const makePluginRpcHandlers = (
+  pluginHost: PluginHost.PluginHost["Service"],
+  installer: PluginInstaller.PluginInstaller["Service"],
+  uploads: PluginUploads.PluginUploads["Service"],
+  scopes: ReadonlyArray<AuthEnvironmentScope>,
+) => ({
+  [WS_METHODS.pluginsList]: (_input: PluginListInput) => pluginHost.listForClient(scopes),
+  [WS_METHODS.pluginsSubscribeStates]: (_input: PluginListInput) =>
+    pluginHost.streamForClient(scopes),
+  [WS_METHODS.pluginsSetEnabled]: (input: PluginSetEnabledInput) =>
+    pluginHost.setEnabled(input.pluginId, input.enabled).pipe(
+      Effect.map((plugin) => ({ plugin })),
+      Effect.mapError(toRpcError(input.pluginId)),
+    ),
+  [WS_METHODS.pluginsReload]: (input: PluginReloadInput) =>
+    pluginHost.reload(input.pluginId).pipe(
+      Effect.map((plugin) => ({ plugin })),
+      Effect.mapError(toRpcError(input.pluginId)),
+    ),
+  [WS_METHODS.pluginsCreateUploadUrl]: (_input: PluginCreateUploadUrlInput) =>
+    uploads.issueUrl.pipe(Effect.mapError((error) => new PluginError({ message: error.message }))),
+  [WS_METHODS.pluginsRescan]: (_input: PluginRescanInput) =>
+    pluginHost.rescan.pipe(Effect.mapError((error) => new PluginError({ message: error.message }))),
+  [WS_METHODS.pluginsUninstall]: (input: PluginUninstallInput) =>
+    installer
+      .uninstall(input.pluginId, input.folder)
+      .pipe(Effect.as({ pluginId: input.pluginId }), Effect.mapError(toRpcError(input.pluginId))),
+  [WS_METHODS.pluginsSettingsGet]: (input: PluginSettingsGetInput) =>
+    pluginHost.getSettings(input.pluginId).pipe(
+      Effect.map((result) => ({ pluginId: input.pluginId, ...result })),
+      Effect.mapError(toRpcError(input.pluginId)),
+    ),
+  [WS_METHODS.pluginsSettingsUpdate]: (input: PluginSettingsUpdateInput) =>
+    pluginHost.updateSettings(input.pluginId, input.patch).pipe(
+      Effect.map((settings) => ({ pluginId: input.pluginId, settings })),
+      Effect.mapError(toRpcError(input.pluginId)),
+    ),
+  [WS_METHODS.pluginsInvoke]: (input: PluginInvokeInput) =>
+    pluginHost
+      .invoke({ pluginId: input.pluginId, method: input.method, input: input.input, scopes })
+      .pipe(
+        Effect.map((output) => ({ output })),
+        Effect.mapError(toRpcError(input.pluginId)),
+      ),
+  [WS_METHODS.pluginsSubscribe]: (input: PluginSubscribeInput) =>
+    pluginHost.subscribe(input).pipe(
+      Stream.map((value) => ({ value })),
+      Stream.mapError(toRpcError(input.pluginId)),
+    ),
+});
diff --git a/apps/server/src/plugins/pluginStates.ts b/apps/server/src/plugins/pluginStates.ts
new file mode 100644
index 0000000000000..20f5b7e2d524b
--- /dev/null
+++ b/apps/server/src/plugins/pluginStates.ts
@@ -0,0 +1,190 @@
+import {
+  type AuthEnvironmentScope,
+  AuthSettingsWriteScope,
+  type PluginFailure,
+  type PluginManifest,
+  type PluginState,
+  type PluginStatesEvent,
+  type PluginStatus,
+} from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import * as Equal from "effect/Equal";
+import * as Path from "effect/Path";
+import * as PubSub from "effect/PubSub";
+import * as Ref from "effect/Ref";
+import * as Semaphore from "effect/Semaphore";
+import * as Stream from "effect/Stream";
+
+import * as EnvironmentTheme from "../environmentTheme.ts";
+import type { PluginActivation } from "./PluginApi.ts";
+import type { DiscoveredPlugin } from "./pluginDiscovery.ts";
+import type { PluginFailures } from "./pluginFailures.ts";
+import type { PluginsConfigFile } from "./pluginsConfig.ts";
+import type { PluginWebFolders } from "./pluginWebFiles.ts";
+
+/** What the host knows about one listed copy of a plugin. */
+export interface PluginRecord {
+  readonly plugin: DiscoveredPlugin;
+  readonly status: PluginStatus;
+  readonly failure?: PluginFailure;
+  readonly activation?: PluginActivation;
+  readonly revision?: number;
+  readonly webRevision?: string;
+  readonly styles?: PluginState["styles"];
+  readonly webFiles?: PluginWebFolders;
+}
+
+export const manifestOf = (plugin: DiscoveredPlugin): PluginManifest | undefined =>
+  "manifest" in plugin ? plugin.manifest : undefined;
+
+// Folders on the server are for clients that manage plugins; read access can be a guest's.
+const withoutServerPaths = (state: PluginState): PluginState => {
+  const { folder: _folder, ...shown } = state;
+  return shown;
+};
+const managesPlugins = (scopes: ReadonlyArray<AuthEnvironmentScope>) =>
+  scopes.includes(AuthSettingsWriteScope);
+
+interface ClientList {
+  readonly plugins: ReadonlyArray<PluginState>;
+}
+
+// Compared per subscriber, since each one sees its own view of the list.
+const statesEvent = (
+  previous: ClientList | undefined,
+  next: ClientList,
+): PluginStatesEvent | undefined => {
+  if (previous === undefined) return { _tag: "snapshot", ...next };
+  const rows = next.plugins.flatMap((plugin, index) =>
+    Equal.equals(plugin, previous.plugins[index]) ? [] : [{ index, plugin }],
+  );
+  return rows.length === 0 && next.plugins.length === previous.plugins.length
+    ? undefined
+    : { _tag: "changed", length: next.plugins.length, rows };
+};
+
+const toState = (
+  record: PluginRecord,
+  config: PluginsConfigFile,
+  serverFailure: string | undefined,
+): PluginState => {
+  const manifest = manifestOf(record.plugin);
+  const { id } = record.plugin;
+  return {
+    id: record.plugin.id,
+    name: manifest?.name ?? record.plugin.id,
+    ...(manifest === undefined
+      ? {}
+      : {
+          version: manifest.version,
+          ...(manifest.description === undefined ? {} : { description: manifest.description }),
+        }),
+    permissions: manifest?.permissions ?? [],
+    source: record.plugin.source,
+    folder: record.plugin.folder,
+    enabled: config.enabled?.[id] === true,
+    status: record.status,
+    ...(record.failure === undefined ? {} : { failure: record.failure }),
+    ...(record.revision === undefined ? {} : { revision: record.revision }),
+    ...(record.webRevision === undefined ? {} : { webRevision: record.webRevision }),
+    ...(record.styles === undefined || record.styles.length === 0 ? {} : { styles: record.styles }),
+    hasServer: manifest?.server !== undefined,
+    hasWeb: manifest?.web !== undefined,
+    hasSettings: manifest?.settingsSchema !== undefined,
+    ...(serverFailure === undefined ? {} : { serverFailure }),
+  };
+};
+
+/**
+ * Builds the plugin list clients see from the host's records, plugins.json and the failures, and
+ * publishes it after each change, with the theme folders of plugins that are on when those change.
+ */
+export const makePluginStates = Effect.fn("PluginStates.make")(function* (input: {
+  readonly records: Ref.Ref<ReadonlyArray<PluginRecord>>;
+  readonly config: Effect.Effect<PluginsConfigFile>;
+  readonly failures: PluginFailures;
+}) {
+  const { records, failures } = input;
+  const environmentThemes = yield* EnvironmentTheme.EnvironmentThemeService;
+  const path = yield* Path.Path;
+  const changes = yield* PubSub.sliding<ReadonlyArray<PluginState>>(1);
+  const publishLock = yield* Semaphore.make(1);
+
+  const statesOf = Effect.fn("PluginHost.statesOf")(function* (all: ReadonlyArray<PluginRecord>) {
+    const config = yield* input.config;
+    const failureOf = yield* failures.current;
+    return all.map((record) =>
+      toState(record, config, failureOf(record.plugin.id, record.revision)),
+    );
+  });
+  const current = Ref.get(records).pipe(Effect.flatMap(statesOf));
+  // What the last publish sent, starting from the empty list clients get before any. Settings
+  // rescans on every visit, and a list sent again would make every client stream rebuild what it
+  // already shows.
+  let published: ReadonlyArray<PluginState> = [];
+  // The copies whose theme folders the theme service last got, which reads every folder each time.
+  // A reload discovers its plugin afresh, so the new copy's themes are read again.
+  let themed: ReadonlyArray<DiscoveredPlugin> = [];
+  // Reading and publishing under one lock, so a slower fiber cannot publish an older list last.
+  const publishUnderLock = publishLock.withPermits(1)(
+    Effect.gen(function* () {
+      const all = yield* Ref.get(records);
+      const states = yield* statesOf(all);
+      if (Equal.equals(states, published)) return;
+      // Every enabled plugin that has not failed, so a starting or restarting one keeps its themes:
+      // windows would otherwise paint T3's colors, forget the saved theme, then switch back.
+      const copies = all.flatMap((record, index) => {
+        const state = states[index];
+        return state?.enabled === true && state.status !== "failed" ? [record.plugin] : [];
+      });
+      if (copies.length !== themed.length || copies.some((copy, index) => copy !== themed[index])) {
+        yield* environmentThemes.setPluginThemeDirectories(
+          copies.map((copy) => path.join(copy.rootDir, "themes")),
+        );
+        themed = copies;
+      }
+      yield* PubSub.publish(changes, states);
+      published = states;
+    }),
+  );
+
+  const stream = Stream.unwrap(
+    Effect.gen(function* () {
+      const subscription = yield* PubSub.subscribe(changes);
+      const snapshot = yield* current;
+      return Stream.concat(Stream.make(snapshot), Stream.fromSubscription(subscription));
+    }),
+  );
+  const forClient =
+    (scopes: ReadonlyArray<AuthEnvironmentScope>) =>
+    (plugins: ReadonlyArray<PluginState>): ClientList => ({
+      plugins: managesPlugins(scopes) ? plugins : plugins.map(withoutServerPaths),
+    });
+
+  return {
+    current,
+    /**
+     * Sends the list if it changed. A stop that interrupts a starting plugin mid-publish cannot
+     * leave it unsent.
+     */
+    publish: Effect.uninterruptible(publishUnderLock),
+    /** The current list, then the whole list after every change. */
+    stream,
+    listForClient: Effect.fn("PluginHost.listForClient")(function* (
+      scopes: ReadonlyArray<AuthEnvironmentScope>,
+    ) {
+      return forClient(scopes)(yield* current);
+    }),
+    streamForClient: (scopes: ReadonlyArray<AuthEnvironmentScope>) =>
+      stream.pipe(
+        Stream.map(forClient(scopes)),
+        Stream.mapAccum(
+          (): ClientList | undefined => undefined,
+          (previous, next) => {
+            const event = statesEvent(previous, next);
+            return [next, event === undefined ? [] : [event]];
+          },
+        ),
+      ),
+  };
+});
diff --git a/apps/server/src/plugins/pluginUploads.test.ts b/apps/server/src/plugins/pluginUploads.test.ts
new file mode 100644
index 0000000000000..619cf01ee4282
--- /dev/null
+++ b/apps/server/src/plugins/pluginUploads.test.ts
@@ -0,0 +1,126 @@
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { assert, it } from "@effect/vitest";
+import { PLUGIN_UPLOAD_MAX_BYTES } from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as TestClock from "effect/testing/TestClock";
+import { HttpRouter, HttpServerRequest, HttpServerResponse } from "effect/http";
+
+import * as ServerSecretStore from "../auth/ServerSecretStore.ts";
+import * as ServerConfig from "../config.ts";
+import * as PluginHost from "./PluginHost.ts";
+import { fixturesDir, layerConfig, layerHost, waitForStatuses } from "./pluginHostTestHarness.ts";
+import * as PluginUploads from "./pluginUploads.ts";
+
+/** Posts `files` to `url` through the upload route, over a running plugin host. */
+const uploader = Effect.fn(function* () {
+  const host = yield* PluginHost.PluginHost;
+  yield* waitForStatuses(host, {});
+  const app = yield* HttpRouter.toHttpEffect(PluginUploads.layerRoute);
+  return (url: string, files: Readonly<Record<string, string | Uint8Array<ArrayBuffer>>>) => {
+    const body = new FormData();
+    for (const [path, contents] of Object.entries(files)) {
+      body.append("file", new Blob([contents]), encodeURIComponent(path));
+    }
+    const request = new Request(`http://localhost${url}`, { method: "POST", body });
+    return app.pipe(
+      Effect.provideService(
+        HttpServerRequest.HttpServerRequest,
+        HttpServerRequest.fromWeb(request),
+      ),
+      Effect.scoped,
+      Effect.flatMap((response) =>
+        Effect.promise(() => HttpServerResponse.toWeb(response).text()).pipe(
+          Effect.map((text) => ({ status: response.status, text })),
+        ),
+      ),
+    );
+  };
+});
+
+const issueUrl = PluginUploads.PluginUploads.use((uploads) => uploads.issueUrl);
+
+const helloFiles = Effect.gen(function* () {
+  const fs = yield* FileSystem.FileSystem;
+  return {
+    "t3-plugin.json": yield* fs.readFileString(`${fixturesDir}hello-plugin/t3-plugin.json`),
+    "server.cjs": yield* fs.readFileString(`${fixturesDir}hello-plugin/server.cjs`),
+  };
+});
+
+const withHost = <A, E, R>(body: Effect.Effect<A, E, R>) =>
+  body.pipe(
+    Effect.provide(
+      Layer.merge(layerHost(), PluginUploads.layer).pipe(
+        Layer.provide(ServerSecretStore.layer),
+        Layer.provideMerge(layerConfig()),
+      ),
+    ),
+  );
+
+it.layer(NodeServices.layer)("PluginUploads", (it) => {
+  it.effect("installs an uploaded folder under the paths it was sent with", () =>
+    withHost(
+      Effect.gen(function* () {
+        const upload = yield* uploader();
+        const { relativeUrl } = yield* issueUrl;
+        const response = yield* upload(relativeUrl, {
+          ...(yield* helloFiles),
+          "notes/read me.md": "Hello.",
+        });
+        assert.strictEqual(response.status, 200);
+        assert.include(JSON.parse(response.text).plugin, {
+          id: "hello-plugin",
+          status: "disabled",
+        });
+        const fs = yield* FileSystem.FileSystem;
+        const { stateDir } = yield* ServerConfig.ServerConfig;
+        assert.strictEqual(
+          yield* fs.readFileString(`${stateDir}/plugins/hello-plugin/notes/read me.md`),
+          "Hello.",
+        );
+      }),
+    ),
+  );
+
+  it.effect("installs nothing from a forged, expired or used URL", () =>
+    withHost(
+      Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const upload = yield* uploader();
+        const files = yield* helloFiles;
+        const { relativeUrl: expiring } = yield* issueUrl;
+        const forged = `${expiring.slice(0, expiring.lastIndexOf(".") + 1)}AAAA`;
+        assert.strictEqual((yield* upload(forged, files)).status, 404);
+        yield* TestClock.adjust("6 minutes");
+        assert.strictEqual((yield* upload(expiring, files)).status, 404);
+        assert.deepStrictEqual(yield* host.list, []);
+
+        // It installs code, so a URL that leaked after its upload installs nothing more.
+        const { relativeUrl } = yield* issueUrl;
+        assert.strictEqual((yield* upload(relativeUrl, files)).status, 200);
+        assert.strictEqual((yield* upload(relativeUrl, files)).status, 404);
+      }),
+    ),
+  );
+
+  it.effect("refuses a folder over the size limit before installing it", () =>
+    withHost(
+      Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const upload = yield* uploader();
+        const { relativeUrl } = yield* issueUrl;
+        const response = yield* upload(relativeUrl, {
+          ...(yield* helloFiles),
+          "big.bin": new Uint8Array(PLUGIN_UPLOAD_MAX_BYTES + 1),
+        });
+        assert.deepStrictEqual(response, {
+          status: 413,
+          text: "A plugin folder can have up to 1000 files and 25 MB.",
+        });
+        assert.deepStrictEqual(yield* host.list, []);
+      }),
+    ),
+  );
+});
diff --git a/apps/server/src/plugins/pluginUploads.ts b/apps/server/src/plugins/pluginUploads.ts
new file mode 100644
index 0000000000000..7828bb43a83ff
--- /dev/null
+++ b/apps/server/src/plugins/pluginUploads.ts
@@ -0,0 +1,210 @@
+import {
+  PLUGIN_UPLOAD_MAX_BYTES,
+  PLUGIN_UPLOAD_MAX_FILES,
+  type PluginCreateUploadUrlResult,
+  PluginMutationResult,
+  PluginUploadFiles,
+} from "@t3tools/contracts";
+import * as Clock from "effect/Clock";
+import * as Context from "effect/Context";
+import * as Crypto from "effect/Crypto";
+import * as Effect from "effect/Effect";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Schema from "effect/Schema";
+import * as Stream from "effect/Stream";
+import { HttpRouter, HttpServerRequest, HttpServerResponse, Multipart } from "effect/http";
+
+import {
+  base64UrlDecodeUtf8,
+  base64UrlEncode,
+  signPayload,
+  timingSafeEqualBase64Url,
+} from "../auth/utils.ts";
+import * as ServerSecretStore from "../auth/ServerSecretStore.ts";
+import * as PluginInstaller from "./PluginInstaller.ts";
+
+/**
+ * A client installs a dropped plugin folder by uploading it here, to a URL `plugins.createUploadUrl`
+ * signed. Up to 25 MB as one WebSocket message would hold up every other stream on the socket.
+ * The signature is the upload's credential, as for attachments, so the client sends the request
+ * the same way on a local, remote or T3 Connect connection. Each URL installs once.
+ */
+export const PLUGIN_UPLOAD_ROUTE_PREFIX = "/api/plugin-uploads";
+
+const SIGNING_SECRET_NAME = "plugin-upload-signing-key";
+// The client uploads as soon as it has the URL.
+const UPLOAD_URL_TTL_MS = 5 * 60_000;
+
+const UploadClaims = Schema.Struct({
+  version: Schema.Literal(1),
+  kind: Schema.Literal("plugin-upload"),
+  expiresAt: Schema.Number,
+  // Tells apart URLs signed in the same millisecond, so each one is used up on its own.
+  nonce: Schema.String,
+});
+const uploadClaimsJson = Schema.fromJsonString(UploadClaims);
+const encodeUploadClaims = Schema.encodeSync(uploadClaimsJson);
+const decodeUploadClaims = Schema.decodeUnknownOption(uploadClaimsJson);
+const claimsOf = (payload: string) => {
+  try {
+    return decodeUploadClaims(base64UrlDecodeUtf8(payload));
+  } catch {
+    return Option.none();
+  }
+};
+const decodeUploadFiles = Schema.decodeUnknownEffect(PluginUploadFiles);
+const mutationResponse = HttpServerResponse.schemaJson(PluginMutationResult);
+
+export class PluginUploadUrlError extends Schema.TaggedError<PluginUploadUrlError>()(
+  "PluginUploadUrlError",
+  { cause: Schema.Defect() },
+) {
+  override get message(): string {
+    return "Could not sign a plugin upload URL.";
+  }
+}
+
+export class PluginUploads extends Context.Service<
+  PluginUploads,
+  {
+    /** Signs a URL that installs one uploaded folder within 5 minutes. */
+    readonly issueUrl: Effect.Effect<PluginCreateUploadUrlResult, PluginUploadUrlError>;
+    /**
+     * Whether `token` is a URL this server signed that is unexpired and unused. A valid one is used
+     * up, because it installs code.
+     */
+    readonly claim: (token: string) => Effect.Effect<boolean>;
+  }
+>()("t3/plugins/pluginUploads") {}
+
+const make = Effect.gen(function* () {
+  const secretStore = yield* ServerSecretStore.ServerSecretStore;
+  const crypto = yield* Crypto.Crypto;
+  const loadSigningSecret = secretStore.getOrCreateRandom(SIGNING_SECRET_NAME, 32);
+  // Unused URLs by nonce, with when each expires. A restart forgets them, which only refuses more.
+  const unused = new Map<string, number>();
+
+  const issueUrl = Effect.fn("PluginUploads.issueUrl")(function* () {
+    const secret = yield* loadSigningSecret.pipe(
+      Effect.mapError((cause) => new PluginUploadUrlError({ cause })),
+    );
+    const now = yield* Clock.currentTimeMillis;
+    for (const [nonce, expiresAt] of unused) if (expiresAt <= now) unused.delete(nonce);
+    const expiresAt = now + UPLOAD_URL_TTL_MS;
+    const nonce = yield* crypto
+      .randomUUIDv4()
+      .pipe(Effect.mapError((cause) => new PluginUploadUrlError({ cause })));
+    const payload = base64UrlEncode(
+      encodeUploadClaims({ version: 1, kind: "plugin-upload", expiresAt, nonce }),
+    );
+    unused.set(nonce, expiresAt);
+    const result: PluginCreateUploadUrlResult = {
+      relativeUrl: `${PLUGIN_UPLOAD_ROUTE_PREFIX}/${payload}.${signPayload(payload, secret)}`,
+      expiresAt,
+    };
+    return result;
+  });
+
+  const claim = Effect.fn("PluginUploads.claim")(function* (token: string) {
+    const [payload, signature, unexpected] = token.split(".");
+    if (!payload || !signature || unexpected !== undefined) return false;
+    const secret = yield* loadSigningSecret.pipe(
+      Effect.tapError((cause) =>
+        Effect.logError("Failed to load the plugin upload signing key.", { cause }),
+      ),
+      Effect.option,
+    );
+    if (
+      Option.isNone(secret) ||
+      !timingSafeEqualBase64Url(signature, signPayload(payload, secret.value))
+    ) {
+      return false;
+    }
+    const claims = claimsOf(payload);
+    if (Option.isNone(claims) || claims.value.expiresAt <= (yield* Clock.currentTimeMillis)) {
+      return false;
+    }
+    return unused.delete(claims.value.nonce);
+  });
+
+  return PluginUploads.of({ issueUrl: issueUrl(), claim });
+});
+
+export const layer = Layer.effect(PluginUploads, make);
+
+// The total leaves room for each part's headers, whose file name is a path escaped with
+// encodeURIComponent; the schema then checks the exact limits.
+const UPLOAD_LIMITS = Multipart.limitsServices({
+  maxParts: PLUGIN_UPLOAD_MAX_FILES,
+  maxFileSize: PLUGIN_UPLOAD_MAX_BYTES,
+  maxTotalSize: PLUGIN_UPLOAD_MAX_BYTES + PLUGIN_UPLOAD_MAX_FILES * 10 * 1024,
+  // By default a JSON part is read as a field, which would drop t3-plugin.json.
+  fieldMimeTypes: [],
+});
+
+const text = (body: string, status: number) => HttpServerResponse.text(body, { status });
+const notAnUpload = text("The request is not a plugin folder.", 400);
+
+// A part named with a malformed escape names no file.
+const decodePath = (name: string) => {
+  try {
+    return Option.some(decodeURIComponent(name));
+  } catch {
+    return Option.none();
+  }
+};
+
+/** `POST <PLUGIN_UPLOAD_ROUTE_PREFIX>/<token>`: installs the folder like `PluginInstaller.installFiles`. */
+export const layerRoute = HttpRouter.add(
+  "POST",
+  `${PLUGIN_UPLOAD_ROUTE_PREFIX}/*`,
+  Effect.gen(function* () {
+    const request = yield* HttpServerRequest.HttpServerRequest;
+    const url = HttpServerRequest.toURL(request);
+    if (Option.isNone(url)) return text("Bad Request", 400);
+    const uploads = yield* PluginUploads;
+    // An expired, forged or used URL looks like no route at all.
+    if (
+      !(yield* uploads.claim(url.value.pathname.slice(`${PLUGIN_UPLOAD_ROUTE_PREFIX}/`.length)))
+    ) {
+      return text("Not Found", 404);
+    }
+    // In memory, as `installFiles` takes them.
+    const received = yield* request.multipartStream.pipe(
+      Stream.filter(Multipart.isFile),
+      Stream.mapEffect((file) =>
+        file.contentEffect.pipe(
+          Effect.map((contents) =>
+            Option.map(decodePath(file.name), (path) => ({ path, contents })),
+          ),
+        ),
+      ),
+      Stream.runCollect,
+      Effect.provideContext(UPLOAD_LIMITS),
+      Effect.result,
+    );
+    if (received._tag === "Failure") {
+      return received.failure.reason._tag === "Parse" ||
+        received.failure.reason._tag === "InternalError"
+        ? notAnUpload
+        : text(
+            `A plugin folder can have up to ${PLUGIN_UPLOAD_MAX_FILES} files and ${PLUGIN_UPLOAD_MAX_BYTES / 1024 / 1024} MB.`,
+            413,
+          );
+    }
+    const named = Option.all(received.success);
+    if (Option.isNone(named)) return notAnUpload;
+    const files = yield* decodeUploadFiles(named.value).pipe(Effect.result);
+    if (files._tag === "Failure") return text(files.failure.message, 400);
+    const installer = yield* PluginInstaller.PluginInstaller;
+    return yield* installer.installFiles(files.success).pipe(
+      Effect.flatMap((plugin) => mutationResponse({ plugin }).pipe(Effect.orDie)),
+      Effect.catchTags({
+        PluginInstallError: (error) => Effect.succeed(text(error.message, 400)),
+        PluginNotFoundError: (error) => Effect.succeed(text(error.message, 404)),
+        PluginConfigError: (error) => Effect.succeed(text(error.message, 500)),
+      }),
+    );
+  }),
+);
diff --git a/apps/server/src/plugins/pluginWebFiles.test.ts b/apps/server/src/plugins/pluginWebFiles.test.ts
new file mode 100644
index 0000000000000..b66afb7958252
--- /dev/null
+++ b/apps/server/src/plugins/pluginWebFiles.test.ts
@@ -0,0 +1,218 @@
+import * as NodeHttpServer from "@effect/platform-node/NodeHttpServer";
+import * as NodeServices from "@effect/platform-node/NodeServices";
+import { assert, it } from "@effect/vitest";
+import {
+  type AuthEnvironmentScope,
+  AuthOrchestrationReadScope,
+  AuthSessionId,
+  PluginId,
+} from "@t3tools/contracts";
+import { symlinksSupported } from "@t3tools/shared/testing/symlinks";
+import * as Context from "effect/Context";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import { HttpClient, HttpClientRequest, HttpRouter } from "effect/http";
+
+import * as EnvironmentAuth from "../auth/EnvironmentAuth.ts";
+import * as ServerConfig from "../config.ts";
+import * as PluginHost from "./PluginHost.ts";
+import {
+  fixturesDir,
+  layerConfig,
+  layerHost,
+  publishedThemeDirectories,
+  stateOf,
+  waitForStatuses,
+  writeFile,
+  writePluginsConfig,
+} from "./pluginHostTestHarness.ts";
+
+// What the host serves at `/api/plugins/<pluginId><path>`, if anything.
+const served = (
+  host: PluginHost.PluginHost["Service"],
+  pluginId: string,
+  path: string,
+  revision?: string,
+) => host.readWebFile({ pluginId, path, revision }).pipe(Effect.map(Option.getOrUndefined));
+
+const scopesByToken: Record<string, ReadonlyArray<AuthEnvironmentScope>> = {
+  "Bearer read": [AuthOrchestrationReadScope],
+  "Bearer none": [],
+};
+const layerAuth = Layer.mock(EnvironmentAuth.EnvironmentAuth)({
+  authenticateHttpRequest: (request) => {
+    const scopes = scopesByToken[request.headers.authorization ?? ""];
+    return scopes === undefined
+      ? Effect.fail(new EnvironmentAuth.ServerAuthMissingCredentialError())
+      : Effect.succeed({
+          sessionId: AuthSessionId.make("session"),
+          subject: "test",
+          method: "bearer-access-token",
+          scopes,
+        });
+  },
+});
+
+it.layer(NodeServices.layer)("PluginWebFiles", (it) => {
+  it.effect("signs in like reads on the rest of /api and answers 404 for what is not served", () =>
+    Effect.gen(function* () {
+      const layerHostAnswering = Layer.mock(PluginHost.PluginHost)({
+        readWebFile: ({ pluginId, path, revision }) =>
+          Effect.succeed(
+            pluginId === "styles-plugin"
+              ? Option.some({ headers: {}, body: new TextEncoder().encode(`${path} ${revision}`) })
+              : Option.none(),
+          ),
+      });
+      const services = yield* Layer.build(
+        HttpRouter.serve(PluginHost.layerWebFilesRoute, {
+          disableListenLog: true,
+          disableLogger: true,
+        }).pipe(
+          Layer.provideMerge(layerHostAnswering),
+          Layer.provideMerge(layerAuth),
+          Layer.provideMerge(NodeHttpServer.layerTest),
+        ),
+      );
+      const client = Context.get(services, HttpClient.HttpClient);
+      const get = Effect.fn(function* (path: string, token?: string) {
+        const response = yield* client.execute(
+          HttpClientRequest.get(path).pipe(
+            token === undefined
+              ? (request) => request
+              : HttpClientRequest.setHeader("authorization", token),
+          ),
+        );
+        return { status: response.status, body: yield* response.text };
+      });
+
+      assert.strictEqual((yield* get("/api/plugins/styles-plugin/styles/base.css")).status, 401);
+      assert.strictEqual(
+        (yield* get("/api/plugins/styles-plugin/styles/base.css", "Bearer none")).status,
+        403,
+      );
+      assert.deepStrictEqual(
+        yield* get("/api/plugins/styles-plugin/styles/base.css?v=r1", "Bearer read"),
+        { status: 200, body: "/styles/base.css r1" },
+      );
+      assert.strictEqual(
+        (yield* get("/api/plugins/other-plugin/styles/base.css", "Bearer read")).status,
+        404,
+      );
+    }).pipe(Effect.scoped),
+  );
+
+  it.effect("serves an active plugin's web files and themes, and stops when disabled", () =>
+    Effect.gen(function* () {
+      const helloWeb = PluginId.make("hello-web");
+      yield* writePluginsConfig({
+        enabled: { [helloWeb]: true },
+        devPaths: [`${fixturesDir}hello-web`],
+      });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { [helloWeb]: "active" });
+
+        const response = yield* served(host, helloWeb, "/web.js");
+        assert.strictEqual(response?.headers["content-type"], "text/javascript; charset=utf-8");
+        // The bundle's revision names its contents, so browsers keep that URL's copy for good.
+        const webRevision = stateOf(yield* host.list, helloWeb)?.webRevision ?? "";
+        assert.match(webRevision, /^[0-9a-f]{16}$/);
+        const revised = yield* served(host, helloWeb, "/web.js", webRevision);
+        assert.strictEqual(
+          revised?.headers["cache-control"],
+          "private, max-age=31536000, immutable",
+        );
+        assert.strictEqual(response?.headers["cache-control"], "no-store");
+        const themes = `${fixturesDir}hello-web/themes`;
+        assert.deepStrictEqual(publishedThemeDirectories.at(-1), [themes]);
+        // A reload hands its folder over once more, so its files are read again, without dropping
+        // it first: windows would flash T3's colors.
+        publishedThemeDirectories.length = 0;
+        yield* host.reload(helloWeb);
+        assert.deepStrictEqual(publishedThemeDirectories, [[themes]]);
+        const asset = yield* served(host, helloWeb, "/assets/hello.txt");
+        assert.strictEqual(asset?.headers["content-type"], "text/plain; charset=utf-8");
+        // A path out of the assets folder names no asset; it is not the plugin's failure.
+        for (const path of ["/assets/..%2Fserver.cjs", "/assets/%E0%A4%A", "/assets/"]) {
+          assert.isUndefined(yield* served(host, helloWeb, path));
+        }
+
+        yield* host.setEnabled(helloWeb, false);
+        assert.isUndefined(yield* served(host, helloWeb, "/web.js"));
+        assert.deepStrictEqual(publishedThemeDirectories.at(-1), []);
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect.skipIf(!symlinksSupported)("reads no file a link takes out of the plugin", () =>
+    Effect.gen(function* () {
+      const fs = yield* FileSystem.FileSystem;
+      const { stateDir } = yield* ServerConfig.ServerConfig;
+      const rootDir = `${stateDir}/plugins/linking`;
+      yield* writeFile(
+        `${rootDir}/t3-plugin.json`,
+        JSON.stringify({
+          id: "linking",
+          name: "Linking",
+          version: "0.1.0",
+          engines: { t3: ">=0.1.0" },
+          web: "./web.js",
+        }),
+      );
+      yield* writeFile(`${rootDir}/styles/base.css`, "body {}");
+      yield* writeFile(`${stateDir}/outside/secret.css`, "Not the plugin's.");
+      yield* writeFile(`${stateDir}/outside/web.js`, "export default {};");
+      yield* fs.symlink(`${stateDir}/outside/secret.css`, `${rootDir}/styles/secret.css`);
+      yield* fs.symlink(`${stateDir}/outside/web.js`, `${rootDir}/web.js`);
+      yield* writePluginsConfig({ enabled: { linking: true } });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        const state = stateOf(yield* waitForStatuses(host, { linking: "active" }), "linking");
+        assert.deepStrictEqual(
+          state?.styles?.map(({ file }) => file),
+          ["base.css"],
+        );
+        assert.isUndefined(state?.webRevision);
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+
+  it.effect("serves the stylesheets of a plugin with no code while it is active", () =>
+    Effect.gen(function* () {
+      const stylesPlugin = PluginId.make("styles-plugin");
+      yield* writePluginsConfig({
+        enabled: { [stylesPlugin]: true },
+        devPaths: [`${fixturesDir}styles-plugin`],
+      });
+      yield* Effect.gen(function* () {
+        const host = yield* PluginHost.PluginHost;
+        yield* waitForStatuses(host, { [stylesPlugin]: "active" });
+        const call = yield* host
+          .invoke({ pluginId: stylesPlugin, method: "ping", input: undefined, scopes: [] })
+          .pipe(Effect.flip);
+        assert.strictEqual(call._tag, "PluginNoServerError");
+        // In name order, which is the order clients apply them in.
+        const styles = stateOf(yield* host.list, stylesPlugin)?.styles ?? [];
+        assert.deepStrictEqual(
+          styles.map(({ file }) => file),
+          ["base.css", "compact.css"],
+        );
+        const base = () => served(host, stylesPlugin, "/styles/base.css", styles[0]?.revision);
+        const response = yield* base();
+        assert.strictEqual(response?.headers["content-type"], "text/css; charset=utf-8");
+        assert.strictEqual(
+          response?.headers["cache-control"],
+          "private, max-age=31536000, immutable",
+        );
+        assert.isUndefined(yield* served(host, stylesPlugin, "/styles/..%2Ft3-plugin.json"));
+
+        yield* host.setEnabled(stylesPlugin, false);
+        assert.isUndefined(stateOf(yield* host.list, stylesPlugin)?.styles);
+        assert.isUndefined(yield* base());
+      }).pipe(Effect.provide(layerHost()));
+    }).pipe(Effect.provide(layerConfig())),
+  );
+});
diff --git a/apps/server/src/plugins/pluginWebFiles.ts b/apps/server/src/plugins/pluginWebFiles.ts
new file mode 100644
index 0000000000000..466048cbc8b28
--- /dev/null
+++ b/apps/server/src/plugins/pluginWebFiles.ts
@@ -0,0 +1,168 @@
+// @effect-diagnostics nodeBuiltinImport:off - bundle revisions are sha256 digests.
+import * as NodeCrypto from "node:crypto";
+
+import type { PluginState } from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as Option from "effect/Option";
+import * as Path from "effect/Path";
+
+import type { DiscoveredPlugin } from "./pluginDiscovery.ts";
+
+const WEB_CONTENT_TYPES: Readonly<Record<string, string>> = {
+  ".js": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".woff2": "font/woff2",
+  ".txt": "text/plain; charset=utf-8",
+};
+
+const contentRevision = (contents: Uint8Array) =>
+  NodeCrypto.createHash("sha256").update(contents).digest("hex").slice(0, 16);
+
+/** What an active plugin serves: its bundle, and the real paths of its `assets/` and `styles/`. */
+export interface PluginWebFolders {
+  readonly bundle: string | undefined;
+  readonly assets: string | undefined;
+  readonly styles: string | undefined;
+}
+
+export interface PluginWebFile {
+  readonly headers: Readonly<Record<string, string>>;
+  readonly body: Uint8Array;
+}
+
+/** Finds what a starting plugin serves to its web half, and reads those files for the host. */
+export const makePluginWebFiles = Effect.gen(function* () {
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+
+  // Reads a plain file whose real path stays inside the real folder `within`, so a path or link
+  // out of it, a link cycle, or a pipe reads nothing. Untraced: each caller has its span.
+  const readWithin = Effect.fnUntraced(function* (within: string, file: string) {
+    const resolved = yield* fs.realPath(file).pipe(Effect.option);
+    if (Option.isNone(resolved)) return Option.none();
+    const real = resolved.value;
+    if (!real.startsWith(`${within}${path.sep}`)) return Option.none();
+    const info = yield* fs.stat(real).pipe(Effect.option);
+    if (Option.isNone(info) || info.value.type !== "File") return Option.none();
+    return yield* fs.readFile(real).pipe(
+      Effect.map((body) => Option.some({ real, body })),
+      Effect.orElseSucceed(() => Option.none()),
+    );
+  });
+
+  // The real path of the plugin's `name` folder, unless a link takes it out of the plugin.
+  const folderOf = Effect.fnUntraced(function* (
+    plugin: DiscoveredPlugin,
+    name: "assets" | "styles",
+  ) {
+    const dir = yield* fs.realPath(path.join(plugin.rootDir, name)).pipe(Effect.option);
+    return Option.isSome(dir) && dir.value.startsWith(`${plugin.rootDir}${path.sep}`)
+      ? dir.value
+      : undefined;
+  });
+
+  // The `.css` files directly in `styles/`, in name order, each with the revision for its URL.
+  const stylesIn = Effect.fnUntraced(function* (dir: string) {
+    const names = yield* fs
+      .readDirectory(dir)
+      .pipe(Effect.orElseSucceed((): ReadonlyArray<string> => []));
+    // Only the ones it serves, so not a folder named like a stylesheet or a link out of `styles/`.
+    const styles = yield* Effect.forEach(
+      names.filter((name) => name.endsWith(".css")).toSorted(),
+      (file) =>
+        readWithin(dir, path.join(dir, file)).pipe(
+          Effect.map(
+            Option.match({
+              onNone: () => [],
+              onSome: ({ body }) => [{ file, revision: contentRevision(body) }],
+            }),
+          ),
+        ),
+    );
+    return styles.flat();
+  });
+
+  /** What a starting plugin serves: `entry` and `assets/` if it has a web half, and `styles/`. */
+  const find = Effect.fn("PluginHost.findWebFiles")(function* (
+    plugin: DiscoveredPlugin,
+    entry: string | undefined,
+  ) {
+    const bundle = entry === undefined ? undefined : path.join(plugin.rootDir, entry);
+    const folders: PluginWebFolders = {
+      bundle,
+      assets: bundle === undefined ? undefined : yield* folderOf(plugin, "assets"),
+      styles: yield* folderOf(plugin, "styles"),
+    };
+    // The bundle's contents now, for its URL; one that cannot be served gets no revision.
+    const read = bundle === undefined ? Option.none() : yield* readWithin(plugin.rootDir, bundle);
+    const styles: PluginState["styles"] =
+      folders.styles === undefined ? [] : yield* stylesIn(folders.styles);
+    return {
+      folders,
+      webRevision: Option.isSome(read) ? contentRevision(read.value.body) : undefined,
+      styles,
+    };
+  });
+
+  // The file `requestPath` names, the folder it has to stay inside, and whether a revision in
+  // its URL may name its contents.
+  const locate = (rootDir: string, folders: PluginWebFolders, requestPath: string) => {
+    if (requestPath === "/web.js") {
+      return folders.bundle === undefined
+        ? undefined
+        : { file: folders.bundle, within: rootDir, revisioned: true };
+    }
+    const [, name, rest] = /^\/(assets|styles)\/(.*)$/.exec(requestPath) ?? [];
+    const dir = name === "assets" ? folders.assets : name === "styles" ? folders.styles : undefined;
+    if (dir === undefined || rest === undefined) return undefined;
+    try {
+      return {
+        file: path.join(dir, decodeURIComponent(rest)),
+        within: dir,
+        revisioned: name === "styles",
+      };
+    } catch {
+      // A malformed escape names no file.
+      return undefined;
+    }
+  };
+
+  /**
+   * Reads `/web.js`, `/assets/<file>` or `/styles/<file>` of the plugin at `rootDir`. A request
+   * whose `revision` names the file's contents may be cached for good. Untraced: the host's
+   * lookup has the span.
+   */
+  const read = Effect.fnUntraced(function* (
+    rootDir: string,
+    folders: PluginWebFolders,
+    requestPath: string,
+    revision: string | undefined,
+  ) {
+    const located = locate(rootDir, folders, requestPath);
+    if (located === undefined) return Option.none<PluginWebFile>();
+    const found = yield* readWithin(located.within, located.file);
+    if (Option.isNone(found)) return Option.none<PluginWebFile>();
+    const { real, body } = found.value;
+    return Option.some<PluginWebFile>({
+      headers: {
+        "content-type":
+          WEB_CONTENT_TYPES[path.extname(real).toLowerCase()] ?? "application/octet-stream",
+        "cache-control":
+          located.revisioned && revision !== undefined && revision === contentRevision(body)
+            ? "private, max-age=31536000, immutable"
+            : "no-store",
+      },
+      body,
+    });
+  });
+
+  return { find, read };
+});
diff --git a/apps/server/src/plugins/pluginsConfig.ts b/apps/server/src/plugins/pluginsConfig.ts
new file mode 100644
index 0000000000000..78b96621fcdce
--- /dev/null
+++ b/apps/server/src/plugins/pluginsConfig.ts
@@ -0,0 +1,159 @@
+// @effect-diagnostics nodeBuiltinImport:off - a crash is saved while the process exits, which
+// needs synchronous writes the FileSystem service does not offer.
+import * as NodeFS from "node:fs";
+
+import type { PluginId } from "@t3tools/contracts";
+import { writeFileStringAtomically } from "@t3tools/shared/atomicWrite";
+import { fromJsonStringPretty } from "@t3tools/shared/schemaJson";
+import * as Effect from "effect/Effect";
+import * as FileSystem from "effect/FileSystem";
+import * as Path from "effect/Path";
+import * as Ref from "effect/Ref";
+import * as Schema from "effect/Schema";
+
+import * as ServerConfig from "../config.ts";
+
+export class PluginConfigError extends Schema.TaggedError<PluginConfigError>()(
+  "PluginConfigError",
+  { path: Schema.String, cause: Schema.Defect() },
+) {
+  override get message(): string {
+    return `Could not update ${this.path}. If it was edited by hand, fix or delete it.`;
+  }
+}
+
+// Unknown keys survive a rewrite, so a newer build's additions outlive a toggle by an older one.
+const PluginsConfigFile = Schema.StructWithRest(
+  Schema.Struct({
+    enabled: Schema.optionalKey(Schema.Record(Schema.String, Schema.Boolean)),
+    devPaths: Schema.optionalKey(Schema.Array(Schema.String)),
+    /** Why each plugin stopped the server, kept until the user turns it on again or reloads it. */
+    crashed: Schema.optionalKey(Schema.Record(Schema.String, Schema.String)),
+  }),
+  [Schema.Record(Schema.String, Schema.Json)],
+);
+export type PluginsConfigFile = typeof PluginsConfigFile.Type;
+const decodeConfig = Schema.decodeUnknownEffect(Schema.fromJsonString(PluginsConfigFile));
+const encodeConfig = Schema.encodeEffect(fromJsonStringPretty(PluginsConfigFile));
+const decodeConfigSync = Schema.decodeUnknownSync(Schema.fromJsonString(PluginsConfigFile));
+const encodeConfigSync = Schema.encodeSync(fromJsonStringPretty(PluginsConfigFile));
+
+export const withoutCrash = (current: PluginsConfigFile, pluginId: PluginId): PluginsConfigFile => {
+  if (current.crashed?.[pluginId] === undefined) return current;
+  const { [pluginId]: _cleared, ...crashed } = current.crashed;
+  return { ...current, crashed };
+};
+
+/** Builds the host's copy of `<stateDir>/plugins.json`, which it reads and writes through this. */
+export const makePluginsConfig = Effect.gen(function* () {
+  const config = yield* ServerConfig.ServerConfig;
+  const fs = yield* FileSystem.FileSystem;
+  const path = yield* Path.Path;
+  const configPath = path.join(config.stateDir, "plugins.json");
+  const current = yield* Ref.make<PluginsConfigFile>({});
+
+  const read = Effect.gen(function* () {
+    const exists = yield* fs.exists(configPath);
+    if (!exists) {
+      const emptyConfig: PluginsConfigFile = {};
+      return emptyConfig;
+    }
+    const raw = yield* fs.readFileString(configPath);
+    return yield* decodeConfig(raw);
+  }).pipe(Effect.mapError((cause) => new PluginConfigError({ path: configPath, cause })));
+
+  const write = Effect.fn("PluginHost.writeConfig")(function* (
+    update: (current: PluginsConfigFile) => PluginsConfigFile,
+  ) {
+    const next = update(yield* read);
+    const contents = yield* encodeConfig(next).pipe(
+      Effect.mapError((cause) => new PluginConfigError({ path: configPath, cause })),
+    );
+    yield* writeFileStringAtomically({ filePath: configPath, contents: `${contents}\n` }).pipe(
+      Effect.provideService(FileSystem.FileSystem, fs),
+      Effect.provideService(Path.Path, path),
+      Effect.mapError((cause) => new PluginConfigError({ path: configPath, cause })),
+    );
+    yield* Ref.set(current, next);
+  });
+
+  const emptyConfig: PluginsConfigFile = {};
+  return {
+    /** plugins.json as last read or written. */
+    current: Ref.get(current),
+    /** Reads the file again and keeps it. Startup tolerates an unreadable file; a reload reports it. */
+    reread: (lenient: boolean) =>
+      (lenient
+        ? read.pipe(
+            Effect.catchTags({
+              PluginConfigError: (error) =>
+                Effect.logWarning("ignoring unreadable plugins.json", { path: error.path }).pipe(
+                  Effect.as(emptyConfig),
+                ),
+            }),
+          )
+        : read
+      ).pipe(Effect.tap((next) => Ref.set(current, next))),
+    write,
+    /** Also forgets that the plugin crashed the server: the user chose what happens next. */
+    writeEnabled: (pluginId: PluginId, enabled: boolean) =>
+      write((current) => ({
+        ...withoutCrash(current, pluginId),
+        enabled: { ...current.enabled, [pluginId]: enabled },
+      })),
+    /**
+     * Forgets the switch and crash of every plugin not in `found`, writing only if there are any.
+     * A switch left on by a folder deleted by hand would start the next folder with its id unseen.
+     */
+    forgetMissing: (found: ReadonlySet<string>) => {
+      const keep = <V>(entries: Readonly<Record<string, V>>) =>
+        Object.fromEntries(Object.entries(entries).filter(([id]) => found.has(id)));
+      const missing = (config: PluginsConfigFile) =>
+        [...Object.keys(config.enabled ?? {}), ...Object.keys(config.crashed ?? {})].some(
+          (id) => !found.has(id),
+        );
+      return Ref.get(current).pipe(
+        Effect.flatMap((last) =>
+          missing(last)
+            ? write((latest) => ({
+                ...latest,
+                ...(latest.enabled === undefined ? {} : { enabled: keep(latest.enabled) }),
+                ...(latest.crashed === undefined ? {} : { crashed: keep(latest.crashed) }),
+              }))
+            : Effect.void,
+        ),
+      );
+    },
+    /** Forgets that the plugin crashed the server, writing only if it had. */
+    clearCrash: (pluginId: PluginId) =>
+      read.pipe(
+        Effect.flatMap((latest) =>
+          latest.crashed?.[pluginId] === undefined
+            ? Effect.void
+            : write((last) => withoutCrash(last, pluginId)),
+        ),
+      ),
+    /**
+     * Saves that the plugin crashed the server and turns it off, so the next start lists it as
+     * failed with its switch off. Synchronous, because Node exits right after; it throws if the
+     * write fails.
+     */
+    recordCrash: (pluginId: PluginId, message: string) => {
+      // From disk, like `write`, unless it can't be read.
+      let last = Ref.getUnsafe(current);
+      try {
+        last = decodeConfigSync(NodeFS.readFileSync(configPath, "utf8"));
+      } catch {
+        // Such as a file edited by hand into invalid JSON.
+      }
+      const next = {
+        ...last,
+        enabled: { ...last.enabled, [pluginId]: false },
+        crashed: { ...last.crashed, [pluginId]: message },
+      };
+      const temporary = `${configPath}.crash-${process.pid}.tmp`;
+      NodeFS.writeFileSync(temporary, `${encodeConfigSync(next)}\n`);
+      NodeFS.renameSync(temporary, configPath);
+    },
+  };
+});
diff --git a/apps/server/src/server.ts b/apps/server/src/server.ts
index 452addfb4a667..2a8a64276f83a 100644
--- a/apps/server/src/server.ts
+++ b/apps/server/src/server.ts
@@ -88,6 +88,11 @@ import * as PreviewBrowser from "./preview/PreviewBrowser.ts";
 import * as ProcessRunner from "./processRunner.ts";
 import * as GitManager from "./git/GitManager.ts";
 import * as EnvironmentTheme from "./environmentTheme.ts";
+import * as PluginHost from "./plugins/PluginHost.ts";
+import * as PluginUploads from "./plugins/pluginUploads.ts";
+import * as PluginMcpTools from "./plugins/PluginMcpTools.ts";
+import * as PluginSettingsStore from "./plugins/PluginSettingsStore.ts";
+import * as PluginStorage from "./plugins/PluginStorage.ts";
 import * as Keybindings from "./keybindings.ts";
 import * as ServerRuntimeStartup from "./serverRuntimeStartup.ts";
 import * as ServerOwnership from "./serverOwnership.ts";
@@ -681,6 +686,8 @@ const layerRuntimeCoreDependencies = layerRuntimeCoreDependenciesBase.pipe(
   Layer.provideMerge(Layer.mergeAll(NativeAppIconResolver.layer, layerProjectFaviconResolver)),
   Layer.provideMerge(layerRepositoryIdentityResolver),
   Layer.provideMerge(CodexManagedTokenBroker.layer),
+  // /mcp and the plugin host share one MCP tool registry and one set of upload URLs.
+  Layer.provideMerge(Layer.mergeAll(PluginMcpTools.layer, PluginUploads.layer)),
   Layer.provideMerge(layerServerEnvironment),
   Layer.provideMerge(layerAuth),
   Layer.provideMerge(ServerSecretStore.layer),
@@ -709,6 +716,12 @@ const layerRuntimeDependencies = layerRuntimeCoreDependencies.pipe(
   Layer.provide(NetService.layer),
 );
 
+// The plugin host sits on top of the runtime for its theme service, secret store and registry.
+const layerRuntimeDependenciesWithPlugins = PluginHost.layer.pipe(
+  Layer.provide(Layer.mergeAll(PluginSettingsStore.layer, PluginStorage.layer)),
+  Layer.provideMerge(layerRuntimeDependencies),
+);
+
 const layerCommandReadiness = HttpRouter.middleware(
   (httpEffect) =>
     Effect.flatMap(ServerRuntimeStartup.ServerRuntimeStartup, (startup) =>
@@ -734,6 +747,8 @@ const layerMakeRoutes = Layer.mergeAll(
     ServerHttp.layerAssetRoute,
     ServerHttp.layerAttachmentUploadRoute,
     GuestHttp.layer,
+    PluginHost.layerWebFilesRoute,
+    PluginUploads.layerRoute,
     DeviceHubProxy.layer,
     ServerBrowserStream.routeLayer,
     ServerHttp.layerStaticAndDevRoute,
@@ -1072,7 +1087,7 @@ const layerMakeServer = Layer.unwrap(
         ],
         { concurrency: "unbounded" },
       ).pipe(Effect.asVoid),
-    }).pipe(Layer.provideMerge(layerRuntimeDependencies), Layer.provide(layerLauncher));
+    }).pipe(Layer.provideMerge(layerRuntimeDependenciesWithPlugins), Layer.provide(layerLauncher));
 
     const layerRoutes = HttpRouter.serve(layerMakeRoutes.pipe(Layer.provide(layerLauncher)), {
       disableLogger: !config.logWebSocketEvents,
diff --git a/apps/server/src/ws.test.ts b/apps/server/src/ws.test.ts
index 641845f322ea6..4e6c3b7a9a17c 100644
--- a/apps/server/src/ws.test.ts
+++ b/apps/server/src/ws.test.ts
@@ -79,6 +79,9 @@ import * as RepositoryIdentityResolver from "./project/RepositoryIdentityResolve
 import * as ResourceTelemetry from "./resourceTelemetry/ResourceTelemetry.ts";
 import * as ReviewService from "./review/ReviewService.ts";
 import * as ScheduledTasks from "./scheduledTasks/ScheduledTaskService.ts";
+import * as PluginHost from "./plugins/PluginHost.ts";
+import * as PluginInstaller from "./plugins/PluginInstaller.ts";
+import * as PluginUploads from "./plugins/pluginUploads.ts";
 import * as SecretRequests from "./secrets/SecretRequests.ts";
 import * as GuestShareService from "./guest/GuestShareService.ts";
 import * as ServerEnvironment from "./environment/ServerEnvironment.ts";
@@ -529,6 +532,9 @@ const layerUnusedConfigRpcServices = Layer.mergeAll(
   Layer.mock(ResourceTelemetry.ResourceTelemetry)({}),
   Layer.mock(ReviewService.ReviewService)({}),
   Layer.mock(ScheduledTasks.ScheduledTaskService)({}),
+  Layer.mock(PluginHost.PluginHost)({}),
+  Layer.mock(PluginInstaller.PluginInstaller)({}),
+  Layer.mock(PluginUploads.PluginUploads)({}),
   Layer.mock(SecretRequests.SecretRequests)({}),
   Layer.mock(SecretResolver.SecretResolver)({}),
   Layer.mock(GuestShareService.GuestShareService)({}),
diff --git a/apps/server/src/ws.ts b/apps/server/src/ws.ts
index 4781fcf78dde6..52a553cb94f43 100644
--- a/apps/server/src/ws.ts
+++ b/apps/server/src/ws.ts
@@ -121,6 +121,10 @@ import * as ThreadMessageIntake from "./orchestration-v2/ThreadMessageIntake.ts"
 import * as DocumentText from "./provider/DocumentText.ts";
 import * as IdAllocator from "@t3tools/provider-core/server/IdAllocator";
 import * as ScheduledTasks from "./scheduledTasks/ScheduledTaskService.ts";
+import * as PluginHost from "./plugins/PluginHost.ts";
+import * as PluginInstaller from "./plugins/PluginInstaller.ts";
+import * as PluginUploads from "./plugins/pluginUploads.ts";
+import { makePluginRpcHandlers } from "./plugins/pluginRpcHandlers.ts";
 import * as SecretRequests from "./secrets/SecretRequests.ts";
 import * as GuestShareService from "./guest/GuestShareService.ts";
 import {
@@ -1273,6 +1277,9 @@ export const layerWsRpc = (
       const commandOutputHub = yield* CommandOutputHub.CommandOutputHub;
       const providerSessionManager = yield* ProviderSessionManager.ProviderSessionManagerV2;
       const scheduledTasks = yield* ScheduledTasks.ScheduledTaskService;
+      const pluginHost = yield* PluginHost.PluginHost;
+      const pluginInstaller = yield* PluginInstaller.PluginInstaller;
+      const pluginUploads = yield* PluginUploads.PluginUploads;
       const secretRequests = yield* SecretRequests.SecretRequests;
       const guestShares = yield* GuestShareService.GuestShareService;
       const pullRequests = yield* PullRequestService.PullRequestService;
@@ -1867,6 +1874,7 @@ export const layerWsRpc = (
       });
 
       const handlers = ServerWsRpcGroup.of({
+        ...makePluginRpcHandlers(pluginHost, pluginInstaller, pluginUploads, currentSession.scopes),
         [ORCHESTRATION_V2_WS_METHODS.dispatchCommand]: (command) =>
           Effect.annotateCurrentSpan({
             "orchestration_v2.command_id": command.commandId,
diff --git a/apps/web/index.html b/apps/web/index.html
index a7a5e7450b3de..1a8644231aad1 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -15,6 +15,7 @@
         const LIGHT_BACKGROUND = "#ffffff";
         const DARK_BACKGROUND = "#000000";
         const CUSTOM_THEMES_STORAGE_KEY = "t3code:themes:v1";
+        const ENVIRONMENT_THEMES_STORAGE_KEY = "t3code:environment-themes:v1";
         const THEME_FOLLOW_SYSTEM_STORAGE_KEY = "t3code:theme-follow-system";
         const THEME_APPEARANCE_MODE_STORAGE_KEY = "t3code:theme-appearance-mode";
         const THEME_HALVES_STORAGE_KEY = "t3code:theme-halves:v1";
@@ -197,19 +198,20 @@
               (appearance === value.appearance || isRecord(colors)),
           );
         };
+        // Custom themes first, then the palettes the server last published (a plugin's theme,
+        // say), in the order the runtime looks them up.
         const findCustomTheme = (themeId) => {
           if (RESERVED_THEME_IDS.includes(themeId)) return null;
-          try {
-            const parsed = JSON.parse(
-              window.localStorage.getItem(CUSTOM_THEMES_STORAGE_KEY) ?? "null",
-            );
-            if (!Array.isArray(parsed)) return null;
-            return (
-              parsed.find((value) => isStoredCustomTheme(value) && value.id === themeId) ?? null
-            );
-          } catch {
-            return null;
+          for (const storageKey of [CUSTOM_THEMES_STORAGE_KEY, ENVIRONMENT_THEMES_STORAGE_KEY]) {
+            try {
+              const parsed = JSON.parse(window.localStorage.getItem(storageKey) ?? "null");
+              const theme = Array.isArray(parsed)
+                ? parsed.find((value) => isStoredCustomTheme(value) && value.id === themeId)
+                : undefined;
+              if (theme) return theme;
+            } catch {}
           }
+          return null;
         };
 
         try {
diff --git a/apps/web/package.json b/apps/web/package.json
index 4407645ea143f..351c71a0e0735 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -33,6 +33,7 @@
     "@pierre/trees": "1.0.0-beta.6",
     "@t3tools/client-runtime": "workspace:*",
     "@t3tools/contracts": "workspace:*",
+    "@t3tools/plugin-sdk": "workspace:*",
     "@t3tools/provider-core": "workspace:*",
     "@t3tools/secret-provider-definitions": "workspace:*",
     "@t3tools/secret-provider-onepassword": "workspace:*",
diff --git a/apps/web/src/components/ChatView.browser.test.tsx b/apps/web/src/components/ChatView.browser.test.tsx
index 8fe98b78da113..5186197cf05dc 100644
--- a/apps/web/src/components/ChatView.browser.test.tsx
+++ b/apps/web/src/components/ChatView.browser.test.tsx
@@ -4,7 +4,9 @@ import { ThreadId } from "@t3tools/contracts";
 import { DEFAULT_CLIENT_SETTINGS } from "@t3tools/contracts/settings";
 import type * as Context from "effect/Context";
 import { expect, it, vi } from "vite-plus/test";
-import { page } from "vite-plus/test/browser";
+import { page, userEvent } from "vite-plus/test/browser";
+
+import "~/index.css";
 
 import { AppRoot } from "~/AppRoot";
 import { DraftId, useComposerDraftStore } from "~/composerDraftStore";
@@ -62,3 +64,67 @@ it("a new draft does not load its reserved thread before the server lists it", a
   // A 404 here marks the thread deleted, and the view never loads it once the send creates it.
   expect(threadRequests).toEqual([]);
 });
+
+it("marks the window's main areas with the region names plugin styles target", async () => {
+  using _environment = installFakeEnvironment([]);
+  __setClientSettingsForTests({
+    ...DEFAULT_CLIENT_SETTINGS,
+    onboardingCompletedAt: "2026-01-01T00:00:00.000Z",
+  });
+  const draftId = DraftId.make("draft-regions");
+  useComposerDraftStore
+    .getState()
+    .setProjectDraftThreadId(scopeProjectRef(ENVIRONMENT_ID, PROJECT_ID), draftId, {
+      threadId: ThreadId.make("thread-regions"),
+    });
+
+  const router = getRouter(createMemoryHistory({ initialEntries: [`/draft/${draftId}`] }));
+  await router.load();
+  await using _app = await render(<AppRoot router={router} />, {
+    // AppRoot brings its own router.
+    router: false,
+  });
+  await expect.element(page.getByTestId("composer-editor")).toBeVisible();
+
+  // Plugins style these by name, so renaming or moving one breaks them. The sidebar, thread
+  // details, terminal and command palette tests check the other names the SDK README lists.
+  expect(document.querySelector('[data-slot="sidebar-inset"]')).toHaveAttribute(
+    "data-t3-region",
+    "main",
+  );
+  await expect
+    .element(page.getByRole("region", { name: "Conversation" }))
+    .toHaveAttribute("data-t3-region", "timeline");
+
+  // A region sits on the element that paints its area, so a plugin's plain rule recolors it.
+  const pluginSheet = document.createElement("style");
+  pluginSheet.textContent = '[data-t3-region="composer"] { background: rgb(1, 2, 3); }';
+  document.head.append(pluginSheet);
+  using _pluginSheet = { [Symbol.dispose]: () => pluginSheet.remove() };
+  const composerBox = document.querySelector("[data-chat-composer-main-surface]");
+  expect(composerBox && getComputedStyle(composerBox).backgroundColor).toBe("rgb(1, 2, 3)");
+
+  await userEvent.click(page.getByRole("button", { name: "Toggle right panel" }));
+  await expect
+    .element(page.getByRole("region", { name: "Workspace panel" }))
+    .toHaveAttribute("data-t3-region", "right-panel");
+
+  await router.navigate({ to: "/settings/general" });
+  await expect
+    .element(page.getByRole("region", { name: "Settings content" }))
+    .toHaveAttribute("data-t3-region", "settings");
+  await expect
+    .element(page.getByRole("navigation", { name: "Settings sections" }))
+    .toHaveAttribute("data-t3-region", "settings-nav");
+
+  await router.navigate({ to: "/pull-requests", search: { involvement: "all", state: "open" } });
+  await expect
+    .element(page.getByRole("region", { name: "Pull requests" }))
+    .toHaveAttribute("data-t3-region", "pull-requests");
+
+  // The welcome page draws the home page under its setup dialog.
+  await router.navigate({ to: "/welcome" });
+  const homeTitle = page.getByText("What should we work on?");
+  await expect.element(homeTitle).toBeInTheDocument();
+  expect(homeTitle.element().closest("[data-t3-region]")).toHaveAttribute("data-t3-region", "home");
+});
diff --git a/apps/web/src/components/CommandPalette.browser.test.tsx b/apps/web/src/components/CommandPalette.browser.test.tsx
index 3883a3e2258e9..122ede224f7e3 100644
--- a/apps/web/src/components/CommandPalette.browser.test.tsx
+++ b/apps/web/src/components/CommandPalette.browser.test.tsx
@@ -29,5 +29,9 @@ describe("CommandPalette open intents", () => {
     const input = page.getByPlaceholder("Search commands, projects, and threads...");
     await expect.element(input).toHaveFocus();
     await expect.element(input).toHaveValue("acme");
+    // Plugin styles target the palette by this name.
+    await expect
+      .element(page.getByTestId("command-palette"))
+      .toHaveAttribute("data-t3-region", "command-palette");
   });
 });
diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 486d80a988666..55064fb87072b 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -73,6 +73,7 @@ import {
   SquarePenIcon,
   TextSearchIcon,
   UserPlusIcon,
+  BlocksIcon,
 } from "lucide-react";
 import { openThreadFind } from "./chat/threadFindStore";
 import {
@@ -86,6 +87,8 @@ import {
 } from "react";
 import type { LegendListRef } from "@legendapp/list/react";
 import { useAtomValue } from "@effect/atom-react";
+import { followedPluginEnvironmentAtom } from "../plugins/pluginFollow";
+import { pluginCommandsAtom } from "../plugins/pluginUi";
 
 import { isDesktopLocalConnectionTarget } from "../connection/desktopLocal";
 import { useDesktopLocalBootstraps } from "../connection/useDesktopLocalBootstraps";
@@ -340,6 +343,7 @@ function CommandPaletteDialog(props: {
       }
       className={cn("overflow-hidden", props.mode === "content" && "h-105")}
       data-command-palette="true"
+      data-t3-region="command-palette"
       data-palette-mode={props.mode}
       data-testid="command-palette"
       finalFocus={() => {
@@ -441,6 +445,8 @@ function OpenCommandPaletteDialog(props: {
   const { environments } = useEnvironments();
   const desktopLocalBootstraps = useDesktopLocalBootstraps();
   const primaryEnvironmentId = usePrimaryEnvironmentId();
+  const pluginEnvironmentId = useAtomValue(followedPluginEnvironmentAtom);
+  const pluginCommands = useAtomValue(pluginCommandsAtom(pluginEnvironmentId ?? ""));
   const availableSettingsSearchItems = useAvailableSettingsSearchItems();
   const { activeDraftThread, activeThread, defaultProjectRef, handleNewThread } =
     useHandleNewThread();
@@ -1647,6 +1653,19 @@ function OpenCommandPaletteDialog(props: {
     });
   }
 
+  for (const command of pluginCommands) {
+    actionItems.push({
+      kind: "action",
+      value: `action:${command.command}`,
+      searchTerms: [command.pluginName, ...command.keywords],
+      title: command.title,
+      description: command.pluginName,
+      icon: <BlocksIcon className={ITEM_ICON_CLASS} />,
+      shortcutCommand: command.command,
+      run: async () => command.run(),
+    });
+  }
+
   const rootGroups = buildRootGroups({ actionItems, recentThreadItems });
   // Every setting goes to the palette's own matcher, so settings get the same
   // word starts and typo tolerance as threads.
diff --git a/apps/web/src/components/NoProjectsHero.tsx b/apps/web/src/components/NoProjectsHero.tsx
index e6ebe6536c519..91432dfa5355e 100644
--- a/apps/web/src/components/NoProjectsHero.tsx
+++ b/apps/web/src/components/NoProjectsHero.tsx
@@ -22,7 +22,10 @@ export function NoProjectsHero() {
       role="main"
       className="h-dvh min-h-0 overflow-hidden overscroll-y-none"
     >
-      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
+      <div
+        data-t3-region="home"
+        className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background"
+      >
         {/* The desktop window only moves where CSS opts in, so keep a titlebar strip. */}
         {isElectron ? <WorkspacePageHeader electron /> : null}
         <Empty size="hero" className="flex-1">
diff --git a/apps/web/src/components/RenderErrorBoundary.tsx b/apps/web/src/components/RenderErrorBoundary.tsx
index 9d93f3e56069d..7a0616e2d7be6 100644
--- a/apps/web/src/components/RenderErrorBoundary.tsx
+++ b/apps/web/src/components/RenderErrorBoundary.tsx
@@ -4,6 +4,7 @@ interface RenderErrorBoundaryProps {
   readonly children: ReactNode;
   readonly fallback: ReactNode;
   readonly resetKeys?: ReadonlyArray<unknown>;
+  readonly onError?: (error: unknown) => void;
 }
 
 interface RenderErrorBoundaryState {
@@ -34,6 +35,10 @@ export class RenderErrorBoundary extends Component<
     return { failed: true };
   }
 
+  override componentDidCatch(error: unknown) {
+    this.props.onError?.(error);
+  }
+
   override render() {
     return this.state.failed ? this.props.fallback : this.props.children;
   }
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index 596bdee96ad1f..4e7dcd46a385a 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -46,7 +46,10 @@ import {
   MessagesSquare,
   Plus,
   TerminalSquare,
+  Puzzle,
 } from "lucide-react";
+import { useAtomValue } from "@effect/atom-react";
+import { pluginUiAtom } from "../plugins/pluginUi";
 import { Volume2, VolumeOff } from "lucide";
 import {
   type KeyboardEvent as ReactKeyboardEvent,
@@ -313,6 +316,7 @@ function SurfaceMenuItem(props: {
 }
 
 function RightPanelEmptyState(props: {
+  environmentId: EnvironmentId | null;
   onAddBrowser: () => void;
   onAddBrowserInProfile: (profileId: string) => void;
   browserProfiles: ReadonlyArray<{ readonly id: string; readonly name: string }>;
@@ -335,6 +339,7 @@ function RightPanelEmptyState(props: {
   sideChatDisabledReason: string | null;
 }) {
   const [highlight, setHighlight] = useState(-1);
+  const pluginUi = useAtomValue(pluginUiAtom);
 
   const actions = [
     {
@@ -561,6 +566,9 @@ function RightPanelEmptyState(props: {
               />
             ),
           )}
+          {pluginUi === null ? null : (
+            <pluginUi.PluginPanelLauncherItems environmentId={props.environmentId} />
+          )}
         </div>
       </div>
     </div>
@@ -594,6 +602,8 @@ function surfaceTitle(
       return surface.title ?? surface.target?.name ?? "Device";
     case "side-chat":
       return "Side chat";
+    case "plugin":
+      return surface.title;
     case "preview": {
       const snapshot = surface.resourceId ? sessions[surface.resourceId] : null;
       if (!snapshot || snapshot.navStatus._tag === "Idle") return "Browser";
@@ -692,6 +702,8 @@ function SurfaceIcon({
       ) : (
         <Smartphone className="size-3 shrink-0" />
       );
+    case "plugin":
+      return <Puzzle className="size-3 shrink-0" />;
   }
 }
 
@@ -1026,6 +1038,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
   const focusedSurface = props.surfaces.find((surface) => surface.id === props.activeSurfaceId);
   const ownsDesktopTitleBar = isElectron && props.mode === "inline";
   const browserProfiles = useBrowserDefaults().profiles;
+  const pluginUi = useAtomValue(pluginUiAtom);
   const { resolvedTheme } = useTheme();
   const tabListRef = useRef<HTMLDivElement>(null);
   const addSurfaceTriggerRef = useRef<HTMLButtonElement>(null);
@@ -1461,6 +1474,12 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                       </SurfaceMenuItem>
                     );
                   })}
+                  {pluginUi === null ? null : (
+                    <pluginUi.PluginPanelMenuItems
+                      environmentId={props.environmentId}
+                      onOpen={() => setAddSurfaceMenuOpen(false)}
+                    />
+                  )}
                 </MenuPopup>
               </Menu>
             ) : null}
@@ -1524,6 +1543,7 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
       <div className="flex min-h-0 flex-1 flex-col" data-right-panel-surface-content>
         {props.activeSurfaceId === null ? (
           <RightPanelEmptyState
+            environmentId={props.environmentId}
             onAddBrowser={props.onAddBrowser}
             onAddBrowserInProfile={props.onAddBrowserInProfile}
             browserProfiles={browserProfiles}
diff --git a/apps/web/src/components/ThreadTerminalDrawer.browser.test.tsx b/apps/web/src/components/ThreadTerminalDrawer.browser.test.tsx
index a99434f6659c6..b36dfc175537c 100644
--- a/apps/web/src/components/ThreadTerminalDrawer.browser.test.tsx
+++ b/apps/web/src/components/ThreadTerminalDrawer.browser.test.tsx
@@ -116,6 +116,10 @@ it("closes an exited terminal on its own thread after navigating to one reusing
   await using screen = await render(
     <Drawer threadRef={original} onCloseTerminal={onCloseTerminal} />,
   );
+  // Plugin styles target the drawer by this name.
+  await expect
+    .element(screen.getByRole("region", { name: "Terminal" }))
+    .toHaveAttribute("data-t3-region", "terminal");
   using _timers = fakeTimers();
   // The exit is seen once the surface loads, and its close waits for the next task.
   await act(async () => {
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index c423773fb6fc6..d2f4a039b6831 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -3185,6 +3185,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
       <div className="relative">
         <ComposerSurface.Main
           ref={composerMainSurfaceRef}
+          data-t3-region="composer"
           data-inline-resting-controls="true"
           className={composerProviderState.composerFrameClassName}
         >
diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.tsx b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
index a4a8993a7036e..fada51f096935 100644
--- a/apps/web/src/components/chat/ComposerPrimaryActions.tsx
+++ b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
@@ -110,7 +110,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
   const pointerFocusProps = preserveComposerFocusOnPointerDown
     ? { onPointerDown: preventPointerFocus }
     : undefined;
-  const environmentIdentificationMode = useEnvironmentIdentificationMode();
+  const environmentIdentificationMode = useEnvironmentIdentificationMode("composer");
   const shortcutModifiers = useShortcutModifierState();
   const isQueuing =
     !isEditingQueuedMessage &&
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 4c28163766058..88c7ec2614a1c 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1283,7 +1283,7 @@ const ConversationTimeline = memo(function ConversationTimeline({
       return (
         <>
           {activityAnnouncer}
-          <div className="h-full min-h-0 bg-background" data-timeline-loading="true" />
+          <div className="h-full min-h-0" data-timeline-loading="true" />
         </>
       );
     }
diff --git a/apps/web/src/components/chat/RightPanelSurfaceContent.tsx b/apps/web/src/components/chat/RightPanelSurfaceContent.tsx
index 6ca50c824cb45..9a3cfb1fb625f 100644
--- a/apps/web/src/components/chat/RightPanelSurfaceContent.tsx
+++ b/apps/web/src/components/chat/RightPanelSurfaceContent.tsx
@@ -33,6 +33,11 @@ const DevicePanel = lazy(() =>
   import("../device/DevicePanel").then((module) => ({ default: module.DevicePanel })),
 );
 const FilePreviewPanel = lazy(() => import("../files/FilePreviewPanel"));
+const PluginPanelSurface = lazy(() =>
+  import("../../plugins/PluginPanelSurface").then((module) => ({
+    default: module.PluginPanelSurface,
+  })),
+);
 
 type RightPanelTerminalProps = Omit<
   PersistentThreadTerminalPanelProps,
@@ -179,6 +184,18 @@ export function RightPanelSurfaceContent(props: {
           onClose={() => props.onCloseSurface(surface)}
         />
       );
+    case "plugin":
+      return (
+        <Suspense fallback={null}>
+          <PluginPanelSurface
+            environmentId={threadRef.environmentId}
+            threadId={threadRef.threadId}
+            pluginId={surface.pluginId}
+            panel={surface.panel}
+            onClose={() => props.onCloseSurface(surface)}
+          />
+        </Suspense>
+      );
     case "device":
       return (
         <Suspense fallback={null}>
diff --git a/apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx b/apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx
index a8728d7879dd4..2cce1bb661c43 100644
--- a/apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsCard.browser.test.tsx
@@ -154,6 +154,11 @@ it("returns to full density when hidden items make the content fit", async () =>
   await using screen = await render(<Card threadRef={threadB} inline fixture={fixture} rows={6} />);
   const card = page.getByRole("region", { name: "Thread details" });
   await expect.element(card).toHaveAttribute("data-density", "compact");
+  // Plugin styles target the card by this name, on the element that paints it.
+  expect(card.element().querySelector("[data-thread-details-card]")).toHaveAttribute(
+    "data-t3-region",
+    "thread-details",
+  );
 
   await screen.rerender(<Card threadRef={threadB} inline fixture={fixture} rows={2} />);
   await expect.element(card).toHaveAttribute("data-density", "full");
diff --git a/apps/web/src/components/chat/ThreadDetailsCard.tsx b/apps/web/src/components/chat/ThreadDetailsCard.tsx
index 9ffbc90de753d..0a3f8202d1db7 100644
--- a/apps/web/src/components/chat/ThreadDetailsCard.tsx
+++ b/apps/web/src/components/chat/ThreadDetailsCard.tsx
@@ -122,6 +122,7 @@ export function ThreadDetailsCard({
       style={placement ? { maxHeight: height } : undefined}
       onContextMenu={onContextMenu}
       data-thread-details-card
+      data-t3-region="thread-details"
     >
       <ScrollArea scrollFade className="min-h-0">
         <div ref={setContentElement}>{children(density)}</div>
diff --git a/apps/web/src/components/settings/JsonSchemaSettingsForm.test.ts b/apps/web/src/components/settings/JsonSchemaSettingsForm.test.ts
new file mode 100644
index 0000000000000..d98c0cb09192b
--- /dev/null
+++ b/apps/web/src/components/settings/JsonSchemaSettingsForm.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { toJsonPatch, toPatch } from "./JsonSchemaSettingsForm";
+import { pluginSettingsForm } from "./plugins/pluginSettingsForm";
+
+const form = pluginSettingsForm({
+  type: "object",
+  properties: {
+    token: { type: "string", format: "t3-secret" },
+    name: { type: "string" },
+    count: { type: "integer", minimum: 0 },
+  },
+});
+const fields = form.kind === "fields" ? form.fields : [];
+
+describe("toPatch", () => {
+  it("sends only changed fields, removes a cleared secret and keeps an untouched one", () => {
+    const saved = { token: "", name: "Ash", count: "2" };
+    expect(toPatch(fields, saved, { ...saved, token: null })).toEqual({
+      patch: { token: null },
+    });
+    expect(toPatch(fields, saved, { ...saved, name: " " })).toEqual({ patch: { name: null } });
+    expect(toPatch(fields, saved, { ...saved, token: "new" })).toEqual({
+      patch: { token: "new" },
+    });
+    // A half-typed or out-of-range number is a problem to fix, not a cleared field.
+    expect(toPatch(fields, saved, { ...saved, count: "1e" })).toEqual({
+      problem: "count must be a whole number.",
+    });
+    expect(toPatch(fields, saved, { ...saved, count: "-1" })).toEqual({
+      problem: "count must be at least 0.",
+    });
+  });
+});
+
+describe("toJsonPatch", () => {
+  it("removes a key deleted from the JSON", () => {
+    expect(toJsonPatch({ a: 1, b: { c: 2 } }, '{ "b": { "c": 3 } }')).toEqual({
+      patch: { a: null, b: { c: 3 } },
+    });
+    expect(toJsonPatch({ a: 1 }, "[]")).toEqual({ problem: "Settings must be a JSON object." });
+  });
+});
diff --git a/apps/web/src/components/settings/JsonSchemaSettingsForm.tsx b/apps/web/src/components/settings/JsonSchemaSettingsForm.tsx
new file mode 100644
index 0000000000000..c0f37a59a291b
--- /dev/null
+++ b/apps/web/src/components/settings/JsonSchemaSettingsForm.tsx
@@ -0,0 +1,394 @@
+import * as Option from "effect/Option";
+import * as Schema from "effect/Schema";
+import { XIcon } from "lucide-react";
+import { type ComponentProps, useState } from "react";
+
+import { Button } from "../ui/button";
+import { DraftInput } from "../ui/draft-input";
+import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
+import { Switch } from "../ui/switch";
+import { Textarea } from "../ui/textarea";
+import { SecretInput } from "./SecretInput";
+import { type PluginSettingsField, pluginSettingsForm } from "./plugins/pluginSettingsForm";
+import { SettingResetButton, SettingsRow } from "./settingsLayout";
+
+// `null` clears a saved value, so the plugin gets its default again.
+type DraftValue = string | boolean | null;
+export type Draft = Readonly<Record<string, DraftValue>>;
+
+const draftValue = (field: PluginSettingsField, value: Schema.Json | undefined) => {
+  switch (field.kind) {
+    case "boolean":
+      return typeof value === "boolean" ? value : (field.defaultValue ?? false);
+    case "secret":
+      return "";
+    case "list":
+      return Array.isArray(value) ? value.join("\n") : "";
+    default:
+      return typeof value === "string" || typeof value === "number" ? String(value) : "";
+  }
+};
+
+/** The changed fields as a settings patch, or the first problem a user can fix before saving. */
+export const toPatch = (
+  fields: ReadonlyArray<PluginSettingsField>,
+  saved: Draft,
+  draft: Draft,
+): { readonly patch: Schema.JsonObject } | { readonly problem: string } => {
+  const patch: Record<string, Schema.Json> = {};
+  for (const field of fields) {
+    const value = draft[field.key];
+    if (value === saved[field.key] || value === undefined) continue;
+    if (value === null) {
+      patch[field.key] = null;
+    } else if (typeof value === "boolean") {
+      patch[field.key] = value;
+    } else if (field.kind === "secret") {
+      if (value !== "") patch[field.key] = value;
+    } else if (value.trim() === "") {
+      patch[field.key] = null;
+    } else if (field.kind === "number") {
+      const parsed = Number(value);
+      if (!Number.isFinite(parsed) || (field.integer && !Number.isInteger(parsed))) {
+        return {
+          problem: `${field.label} must be ${field.integer ? "a whole number" : "a number"}.`,
+        };
+      }
+      if (field.minimum !== undefined && parsed < field.minimum) {
+        return { problem: `${field.label} must be at least ${field.minimum}.` };
+      }
+      if (field.maximum !== undefined && parsed > field.maximum) {
+        return { problem: `${field.label} must be at most ${field.maximum}.` };
+      }
+      patch[field.key] = parsed;
+    } else if (field.kind === "select") {
+      patch[field.key] = field.options.find((option) => String(option) === value) ?? value;
+    } else if (field.kind === "list") {
+      patch[field.key] = value
+        .split("\n")
+        .map((line) => line.trim())
+        .filter((line) => line.length > 0);
+    } else {
+      patch[field.key] = value;
+    }
+  }
+  return { patch };
+};
+
+const parseJsonObject = Schema.decodeUnknownOption(Schema.fromJsonString(Schema.JsonObject));
+
+/** The edited JSON as a settings patch, with `null` for each saved key it no longer has. */
+export const toJsonPatch = (
+  saved: Schema.JsonObject,
+  json: string,
+): { readonly patch: Schema.JsonObject } | { readonly problem: string } => {
+  const parsed = parseJsonObject(json);
+  if (Option.isNone(parsed)) return { problem: "Settings must be a JSON object." };
+  const removed = Object.keys(saved).filter((key) => !Object.hasOwn(parsed.value, key));
+  return { patch: { ...Object.fromEntries(removed.map((key) => [key, null])), ...parsed.value } };
+};
+
+const without = <Value,>(record: Readonly<Record<string, Value>>, key: string) =>
+  Object.fromEntries(Object.entries(record).filter(([entry]) => entry !== key));
+
+/**
+ * Settings rows drawn from a plugin's JSON Schema. Each field saves on its own, as T3's own
+ * settings rows do. `onSave` gets that field as a patch, `null` when cleared, and resolves with the
+ * settings as saved or the reason they were not.
+ */
+export function JsonSchemaSettingsForm({
+  idPrefix,
+  label,
+  schema,
+  settings,
+  canSave,
+  onSave,
+}: {
+  readonly idPrefix: string;
+  readonly label: string;
+  readonly schema: Schema.JsonObject | undefined;
+  readonly settings: Schema.JsonObject;
+  readonly canSave: boolean;
+  readonly onSave: (
+    patch: Schema.JsonObject,
+  ) => Promise<{ readonly settings: Schema.JsonObject } | { readonly problem: string }>;
+}) {
+  const form = pluginSettingsForm(schema);
+  const [saved, setSaved] = useState(settings);
+  // What the user just set, shown until it saves; it stays, with its problem, when it can't.
+  const [pending, setPending] = useState<Readonly<Record<string, DraftValue>>>({});
+  const [problems, setProblems] = useState<Readonly<Record<string, string>>>({});
+  const settle = (key: string, problem: string | null) => {
+    setProblems((all) => (problem === null ? without(all, key) : { ...all, [key]: problem }));
+    if (problem === null) setPending((all) => without(all, key));
+  };
+
+  if (form.kind === "json") {
+    return (
+      <JsonSettingsRow
+        label={label}
+        settings={saved}
+        canSave={canSave}
+        onSave={onSave}
+        onSaved={setSaved}
+      />
+    );
+  }
+  if (form.kind !== "fields") return null;
+
+  const commit = async (field: PluginSettingsField, value: DraftValue) => {
+    const current = draftValue(field, saved[field.key]);
+    const next = toPatch([field], { [field.key]: current }, { [field.key]: value });
+    setPending((all) => ({ ...all, [field.key]: value }));
+    if ("problem" in next) return settle(field.key, next.problem);
+    if (Object.keys(next.patch).length === 0) return settle(field.key, null);
+    const result = await onSave(next.patch);
+    if ("problem" in result) return settle(field.key, result.problem);
+    setSaved(result.settings);
+    settle(field.key, null);
+  };
+
+  return (
+    <>
+      {form.fields.map((field) => (
+        <JsonSchemaFieldRow
+          key={field.key}
+          id={`${idPrefix}-${field.key}`}
+          field={field}
+          value={
+            Object.hasOwn(pending, field.key)
+              ? pending[field.key]
+              : draftValue(field, saved[field.key])
+          }
+          isSet={saved[field.key] !== undefined}
+          canReset={
+            saved[field.key] !== undefined &&
+            draftValue(field, saved[field.key]) !== draftValue(field, undefined)
+          }
+          problem={problems[field.key]}
+          disabled={!canSave}
+          onCommit={(value) => void commit(field, value)}
+        />
+      ))}
+    </>
+  );
+}
+
+/** For settings whose schema doesn't fit a form: the settings as JSON, saved together. */
+function JsonSettingsRow({
+  label,
+  settings,
+  canSave,
+  onSave,
+  onSaved,
+}: {
+  readonly label: string;
+  readonly settings: Schema.JsonObject;
+  readonly canSave: boolean;
+  readonly onSave: (
+    patch: Schema.JsonObject,
+  ) => Promise<{ readonly settings: Schema.JsonObject } | { readonly problem: string }>;
+  readonly onSaved: (settings: Schema.JsonObject) => void;
+}) {
+  const [json, setJson] = useState(() => JSON.stringify(settings, null, 2));
+  const [problem, setProblem] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const save = async () => {
+    const next = toJsonPatch(settings, json);
+    if ("problem" in next) return setProblem(next.problem);
+    setBusy(true);
+    const result = await onSave(next.patch);
+    setBusy(false);
+    if ("problem" in result) return setProblem(result.problem);
+    setProblem(null);
+    onSaved(result.settings);
+    setJson(JSON.stringify(result.settings, null, 2));
+  };
+  return (
+    <SettingsRow
+      title="Settings as JSON"
+      description="These settings don't fit a form."
+      status={problem ? <span className="text-destructive">{problem}</span> : undefined}
+    >
+      <div className="space-y-2 pb-2">
+        <Textarea
+          aria-label={`${label} settings JSON`}
+          rows={8}
+          value={json}
+          onChange={(event) => setJson(event.target.value)}
+        />
+        <div className="flex justify-end">
+          <Button size="sm" disabled={busy || !canSave} onClick={() => void save()}>
+            Save
+          </Button>
+        </div>
+      </div>
+    </SettingsRow>
+  );
+}
+
+const UNSET_OPTION = "\u0000unset";
+const FIELD_WIDTH = "w-full max-w-full @min-[32rem]/settings-row:w-56";
+
+function JsonSchemaFieldRow({
+  id,
+  field,
+  value,
+  isSet,
+  canReset,
+  problem,
+  disabled,
+  onCommit,
+}: {
+  readonly id: string;
+  readonly field: PluginSettingsField;
+  readonly value: DraftValue | undefined;
+  /** The settings have a value for this field, so a secret can be cleared. */
+  readonly isSet: boolean;
+  /** The saved value differs from what the plugin gets with none. */
+  readonly canReset: boolean;
+  readonly problem: string | undefined;
+  readonly disabled: boolean;
+  readonly onCommit: (value: DraftValue) => void;
+}) {
+  const text = typeof value === "string" ? value : "";
+  const descriptionId = field.description ? `${id}-description` : undefined;
+  // What the plugin gets while the field is empty.
+  const fallback =
+    field.kind === "secret" || field.kind === "boolean" || field.defaultValue === undefined
+      ? undefined
+      : field.kind === "list"
+        ? field.defaultValue.join(", ")
+        : String(field.defaultValue);
+  const title = `${field.label}${field.required ? " *" : ""}`;
+  const control =
+    field.kind === "boolean" ? (
+      <Switch
+        checked={value === true}
+        disabled={disabled}
+        aria-label={field.label}
+        aria-describedby={descriptionId}
+        onCheckedChange={(checked) => onCommit(checked)}
+      />
+    ) : field.kind === "select" ? (
+      <Select
+        value={text === "" ? UNSET_OPTION : text}
+        disabled={disabled}
+        onValueChange={(next) =>
+          typeof next === "string" && onCommit(next === UNSET_OPTION ? "" : next)
+        }
+      >
+        <SelectTrigger id={id} size="sm" className={FIELD_WIDTH} aria-label={field.label}>
+          <SelectValue>
+            {text || (fallback === undefined ? "" : `${fallback} (default)`)}
+          </SelectValue>
+        </SelectTrigger>
+        <SelectPopup align="end" alignItemWithTrigger={false}>
+          {/* Back to the default, as clearing a text field is. */}
+          {fallback !== undefined || !field.required ? (
+            <SelectItem value={UNSET_OPTION}>
+              {fallback === undefined ? "Not set" : `${fallback} (default)`}
+            </SelectItem>
+          ) : null}
+          {field.options.map((option) => (
+            <SelectItem key={String(option)} value={String(option)}>
+              {String(option)}
+            </SelectItem>
+          ))}
+        </SelectPopup>
+      </Select>
+    ) : field.kind === "list" ? (
+      <DraftTextarea
+        id={id}
+        rows={3}
+        disabled={disabled}
+        aria-describedby={descriptionId}
+        className="w-full max-w-full @min-[32rem]/settings-row:w-[min(24rem,50cqw)]"
+        placeholder={
+          fallback === undefined ? "One value per line" : `One value per line. Default: ${fallback}`
+        }
+        value={text}
+        onCommit={onCommit}
+      />
+    ) : field.kind === "secret" ? (
+      <div className={`flex min-w-0 items-center gap-2 ${FIELD_WIDTH}`}>
+        <SecretInput
+          id={id}
+          size="sm"
+          disabled={disabled}
+          aria-describedby={descriptionId}
+          className="min-w-0 flex-1"
+          configured={isSet}
+          value=""
+          onCommit={onCommit}
+        />
+        {isSet ? (
+          <Button
+            size="icon-sm"
+            variant="ghost-destructive"
+            disabled={disabled}
+            aria-label={`Clear ${field.label}`}
+            onClick={() => onCommit(null)}
+          >
+            <XIcon className="size-3.5" />
+          </Button>
+        ) : null}
+      </div>
+    ) : (
+      <DraftInput
+        id={id}
+        size="sm"
+        disabled={disabled}
+        aria-describedby={descriptionId}
+        className={FIELD_WIDTH}
+        // Text, not a number input, so text that isn't a number stays to be fixed instead of
+        // reading as empty, which would clear the saved value.
+        type="text"
+        inputMode={field.kind === "number" ? (field.integer ? "numeric" : "decimal") : undefined}
+        maxLength={field.kind === "text" ? field.maxLength : undefined}
+        autoComplete="off"
+        spellCheck={false}
+        placeholder={fallback === undefined ? undefined : `Default: ${fallback}`}
+        value={text}
+        onCommit={onCommit}
+      />
+    );
+  return (
+    <SettingsRow
+      title={field.kind === "boolean" ? title : <label htmlFor={id}>{title}</label>}
+      description={
+        field.description ? <span id={descriptionId}>{field.description}</span> : undefined
+      }
+      status={problem ? <span className="text-destructive">{problem}</span> : undefined}
+      resetAction={
+        canReset && field.kind !== "secret" && !disabled ? (
+          <SettingResetButton label={field.label} onClick={() => onCommit(null)} />
+        ) : null
+      }
+      control={control}
+    />
+  );
+}
+
+/** A textarea that saves when it loses focus, as `DraftInput` does for one line. */
+function DraftTextarea({
+  value,
+  onCommit,
+  ...rest
+}: Omit<ComponentProps<typeof Textarea>, "value" | "onChange" | "onBlur"> & {
+  readonly value: string;
+  readonly onCommit: (next: string) => void;
+}) {
+  const [draft, setDraft] = useState<string | null>(null);
+  return (
+    <Textarea
+      {...rest}
+      value={draft ?? value}
+      onChange={(event) => setDraft(event.target.value)}
+      onBlur={() => {
+        if (draft !== null && draft !== value) onCommit(draft);
+        setDraft(null);
+      }}
+    />
+  );
+}
diff --git a/apps/web/src/components/settings/KeybindingsSettings.logic.ts b/apps/web/src/components/settings/KeybindingsSettings.logic.ts
index fe9b47b4dcadc..4e99bf75284a2 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.logic.ts
+++ b/apps/web/src/components/settings/KeybindingsSettings.logic.ts
@@ -16,6 +16,7 @@ import {
 import { shortcutConflictKey, shortcutKeyFromEvent } from "../../keybindings";
 import { isMacPlatform } from "../../lib/utils";
 import { METRIC_OPTIONS, WINDOW_OPTIONS } from "../usage/usageShortcuts";
+import { pluginCommandLabel } from "../../plugins/pluginUi";
 
 // Rank every usage command; mixing rank and alphabetical comparisons makes order input-dependent.
 const usageCommandOrder = new Map<KeybindingCommand, number>(
@@ -219,6 +220,7 @@ const KEYBINDING_GROUPS = [
   { id: "preview", title: "Preview & diff", prefixes: ["preview", "diff"] },
   { id: "appearance", title: "Appearance", prefixes: ["theme", "appearance", "themeEditor"] },
   { id: "scripts", title: "Project scripts", prefixes: ["script"] },
+  { id: "plugins", title: "Plugins", prefixes: ["plugin"] },
 ] as const;
 const OTHER_KEYBINDING_GROUP = { id: "other", title: "Other" } as const;
 
@@ -359,8 +361,9 @@ export function buildWhenVariableOptions(): ReadonlyArray<WhenVariableOption> {
 
 export function buildKeybindingCommandOptions(
   keybindings: ResolvedKeybindingsConfig,
+  pluginCommands: ReadonlyArray<KeybindingCommand> = [],
 ): ReadonlyArray<KeybindingCommandOption> {
-  const commands = new Set<KeybindingCommand>(STATIC_KEYBINDING_COMMANDS);
+  const commands = new Set<KeybindingCommand>([...STATIC_KEYBINDING_COMMANDS, ...pluginCommands]);
   for (const binding of keybindings) {
     commands.add(binding.command);
   }
@@ -383,6 +386,10 @@ export function commandLabel(command: KeybindingCommand): string {
   if (command === "view.reopenClosed") return "Reopen Closed Tab";
   if (command === "preview.focusUrl") return "Preview: Focus URL";
   const raw = String(command);
+  if (raw.startsWith("plugin.")) {
+    const label = pluginCommandLabel(raw);
+    if (label !== undefined) return label;
+  }
   if (raw.startsWith("script.") && raw.endsWith(".run")) {
     return `Run Script: ${titleCaseCommandSegment(raw.slice("script.".length, -".run".length))}`;
   }
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index f6298d778073e..ac1ea26ea3efa 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -1,3 +1,5 @@
+import { useAtomValue } from "@effect/atom-react";
+import { pluginCommandsAtom } from "../../plugins/pluginUi";
 import { useEnvironmentScope } from "../../state/session";
 import { useEnvironmentsWithScope, readEnvironmentScope } from "../../state/session";
 import {
@@ -1283,10 +1285,14 @@ function keybindingAnchorIds(rows: ReturnType<typeof buildKeybindingRows>) {
 
 // Cache rows in a separate hook so the compiler does not rebuild them per search keystroke.
 function useKeybindingCatalog() {
-  const serverKeybindings = useSettingsScope().environment?.serverConfig?.keybindings;
-  const merged = mergeWithDefaultKeybindings(serverKeybindings ?? []);
+  const { environment } = useSettingsScope();
+  const pluginCommands = useAtomValue(pluginCommandsAtom(environment?.environmentId ?? ""));
+  const merged = mergeWithDefaultKeybindings(environment?.serverConfig?.keybindings ?? []);
   return {
-    commandOptions: buildKeybindingCommandOptions(merged),
+    commandOptions: buildKeybindingCommandOptions(
+      merged,
+      pluginCommands.map((entry) => entry.command),
+    ),
     allRows: buildKeybindingRows(merged),
   };
 }
diff --git a/apps/web/src/components/settings/SettingsScopeSentence.tsx b/apps/web/src/components/settings/SettingsScopeSentence.tsx
index bb6a896d45869..50890acb008ed 100644
--- a/apps/web/src/components/settings/SettingsScopeSentence.tsx
+++ b/apps/web/src/components/settings/SettingsScopeSentence.tsx
@@ -54,6 +54,9 @@ export const SETTINGS_DEVICE_ONLY_PATHS: ReadonlySet<string> = new Set([
   "/settings/about",
 ]);
 
+/** Pages whose settings belong to whole environments, so they have no project picker. */
+export const SETTINGS_ENVIRONMENT_ONLY_PATHS: ReadonlySet<string> = new Set(["/settings/plugins"]);
+
 interface SettingsScopeMenuProps {
   readonly value: SettingsScopeSearch;
   readonly groups: readonly SidebarProjectSnapshot[];
@@ -76,10 +79,14 @@ export function SettingsScopeSentence() {
   };
   return (
     <p className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 px-3 text-sm text-muted-foreground sm:px-4">
-      <span className="flex min-w-0 items-center gap-1.5">
-        <span className="shrink-0">Applying settings for</span>
-        <ProjectScopeMenu {...props} />
-      </span>
+      {SETTINGS_ENVIRONMENT_ONLY_PATHS.has(pathname) ? (
+        <span className="shrink-0">Applying settings</span>
+      ) : (
+        <span className="flex min-w-0 items-center gap-1.5">
+          <span className="shrink-0">Applying settings for</span>
+          <ProjectScopeMenu {...props} />
+        </span>
+      )}
       <span className="flex min-w-0 items-center gap-1.5">
         <span className="shrink-0">
           {scope.search.machine || scope.scope.kind === "checkout" ? "on" : "across"}
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index ee061be1ebf78..32f9217494f02 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -13,6 +13,7 @@ import {
   BotIcon,
   createLucideIcon,
   CalendarClockIcon,
+  BlocksIcon,
   FileDiffIcon,
   FolderTreeIcon,
   GitBranchIcon,
@@ -99,6 +100,7 @@ const SETTINGS_SECTION_ICONS: Readonly<
   "/settings/browser": GlobeIcon,
   "/settings/devices": SmartphoneIcon,
   "/settings/scheduled-tasks": CalendarClockIcon,
+  "/settings/plugins": BlocksIcon,
   "/settings/source-control": GitBranchIcon,
   "/settings/worktrees": FolderTreeIcon,
   "/settings/connections": ServerIcon,
diff --git a/apps/web/src/components/settings/ThemeImportDialog.tsx b/apps/web/src/components/settings/ThemeImportDialog.tsx
index e9d37f45322d1..c199c3efcb804 100644
--- a/apps/web/src/components/settings/ThemeImportDialog.tsx
+++ b/apps/web/src/components/settings/ThemeImportDialog.tsx
@@ -5,6 +5,7 @@ import { useRef, useState } from "react";
 import { cn } from "../../lib/utils";
 import {
   getCustomThemes,
+  asImportedThemeCopy,
   installCustomTheme,
   parseThemeFile,
   removeCustomTheme,
@@ -270,7 +271,8 @@ function ThemeImportBody({
     if (!isCurrentRequest(requestId)) return;
     const installed: ThemeDefinition[] = [];
     const conflicting: ThemeDefinition[] = [];
-    for (const theme of pairVsCodeThemes(resolveThemeLabelCollisions(parsed))) {
+    for (const pairedTheme of pairVsCodeThemes(resolveThemeLabelCollisions(parsed))) {
+      const theme = asImportedThemeCopy(pairedTheme);
       if (getCustomThemes().some((existing) => existing.id === theme.id)) {
         conflicting.push(theme);
         continue;
@@ -398,9 +400,9 @@ function ThemeImportBody({
     }
     try {
       const parsed: unknown = JSON.parse(json);
-      const theme = isVsCodeThemeFile(parsed)
-        ? parseVsCodeThemeFile(parsed)
-        : parseThemeFile(parsed);
+      const theme = asImportedThemeCopy(
+        isVsCodeThemeFile(parsed) ? parseVsCodeThemeFile(parsed) : parseThemeFile(parsed),
+      );
       if (getCustomThemes().some((existing) => existing.id === theme.id)) {
         setError(null);
         setConflicts([theme]);
diff --git a/apps/web/src/components/settings/plugins/PluginInstallControls.tsx b/apps/web/src/components/settings/plugins/PluginInstallControls.tsx
new file mode 100644
index 0000000000000..a2576e27f5e05
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/PluginInstallControls.tsx
@@ -0,0 +1,180 @@
+import { useAtomValue } from "@effect/atom-react";
+import type { EnvironmentId } from "@t3tools/contracts";
+import { FolderDownIcon } from "lucide-react";
+import { useRef, useState } from "react";
+
+import { cn } from "../../../lib/utils";
+import { uploadPluginFolder } from "../../../plugins/pluginFiles";
+import { type PluginFolder, pickedFolder } from "../../../plugins/pluginFolders";
+import type { EnvironmentPresentation } from "../../../state/environments";
+import { pluginEnvironment } from "../../../state/plugins";
+import { Button } from "../../ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "../../ui/dialog";
+
+export function AddPluginButton(props: {
+  readonly environmentId: EnvironmentId;
+  readonly disabled: boolean;
+  readonly onClick: () => void;
+}) {
+  const canInstall = useAtomValue(
+    pluginEnvironment.createPluginUploadUrl.permissionAtom(props.environmentId),
+  );
+  return (
+    <Button
+      size="sm"
+      variant="outline"
+      disabled={props.disabled || !canInstall}
+      onClick={props.onClick}
+    >
+      Add plugin
+    </Button>
+  );
+}
+
+export function InstallProblems({ problems }: { readonly problems: ReadonlyArray<string> }) {
+  if (problems.length === 0) return null;
+  return (
+    <ul className="mt-2 space-y-1 text-destructive text-xs">
+      {problems.map((problem) => (
+        <li key={problem}>{problem}</li>
+      ))}
+    </ul>
+  );
+}
+
+/**
+ * Installs plugins on `environment`. A plugin without server code only changes the app, so it does
+ * nothing there unless the app loads plugin UI from it, which `loadsUi` says.
+ */
+export function usePluginInstaller(
+  environment: Pick<EnvironmentPresentation, "environmentId" | "label">,
+  loadsUi: boolean,
+) {
+  const [installing, setInstalling] = useState<string | null>(null);
+  const [problems, setProblems] = useState<ReadonlyArray<string>>([]);
+
+  const run = async (work: (report: (problem: string) => void) => Promise<void>) => {
+    const found: Array<string> = [];
+    setProblems([]);
+    await work((problem) => found.push(problem));
+    setInstalling(null);
+    setProblems(found);
+    return found.length === 0;
+  };
+
+  return {
+    installing,
+    problems,
+    clearProblems: () => setProblems([]),
+    installFolders: (folders: ReadonlyArray<PluginFolder>) => {
+      // Outside `run`, which would end the install in progress as far as the page can tell.
+      if (installing !== null) {
+        setProblems([`${installing} is still installing. Add more once it's done.`]);
+        return Promise.resolve(false);
+      }
+      return run(async (report) => {
+        if (folders.length === 0) return report("Drop a plugin's folder, not the files in it.");
+        for (const folder of folders) {
+          setInstalling(folder.name);
+          const files = await folder.read().catch((error: unknown) => {
+            report(error instanceof Error ? error.message : `Could not read ${folder.name}.`);
+            return null;
+          });
+          if (files === null) continue;
+          const plugin = await uploadPluginFolder(environment.environmentId, files).catch(
+            (error: unknown) => {
+              report(error instanceof Error ? error.message : "Could not install the plugin.");
+              return null;
+            },
+          );
+          if (plugin === null) continue;
+          if (!plugin.hasServer && !loadsUi) {
+            report(
+              `${plugin.name} only changes the app, and this app doesn't load plugin UI from ${environment.label}, so it does nothing there.`,
+            );
+          }
+        }
+      });
+    },
+  };
+}
+
+export function AddPluginDialog({
+  open,
+  onOpenChange,
+  installer,
+  dragActive,
+  scopeNote,
+}: {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly installer: ReturnType<typeof usePluginInstaller>;
+  readonly dragActive: boolean;
+  readonly scopeNote: string;
+}) {
+  const folderInput = useRef<HTMLInputElement>(null);
+  const busy = installer.installing !== null;
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogPopup className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add a plugin</DialogTitle>
+          <DialogDescription>
+            {scopeNote} Plugins run with the same access as T3 Code, so install only code you trust.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogPanel>
+          <div
+            className={cn(
+              "flex flex-col items-center gap-1.5 rounded-lg border border-dashed px-4 py-6 text-center",
+              dragActive ? "border-primary bg-primary/5" : "border-border",
+            )}
+          >
+            <FolderDownIcon className="size-5 text-muted-foreground" />
+            <p className="text-sm">
+              {busy ? `Installing ${installer.installing}…` : "Drop plugin folders here"}
+            </p>
+            <p className="text-muted-foreground text-xs">
+              T3 Code copies each one into its plugins folder.
+            </p>
+            <Button
+              className="mt-2"
+              size="sm"
+              variant="outline"
+              disabled={busy}
+              onClick={() => folderInput.current?.click()}
+            >
+              Choose folder
+            </Button>
+            <input
+              ref={(input) => {
+                // Not in React's input props; it makes the picker choose folders, not files.
+                if (input !== null) input.webkitdirectory = true;
+                folderInput.current = input;
+              }}
+              type="file"
+              hidden
+              onChange={(event) => {
+                const folder = pickedFolder(Array.from(event.currentTarget.files ?? []));
+                // Cleared so picking the same folder again still reports a change.
+                event.currentTarget.value = "";
+                if (folder === undefined) return;
+                void installer
+                  .installFolders([folder])
+                  .then((installed) => installed && onOpenChange(false));
+              }}
+            />
+          </div>
+          <InstallProblems problems={installer.problems} />
+        </DialogPanel>
+      </DialogPopup>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/settings/plugins/PluginList.tsx b/apps/web/src/components/settings/plugins/PluginList.tsx
new file mode 100644
index 0000000000000..ecba7e05ee7e6
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/PluginList.tsx
@@ -0,0 +1,68 @@
+import { RegistryContext, useAtomValue } from "@effect/atom-react";
+import { runAtomCommand } from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentId } from "@t3tools/contracts";
+import { AsyncResult } from "effect/reactivity";
+import { type ReactNode, useContext, useEffect } from "react";
+
+import { pluginEnvironment } from "../../../state/plugins";
+import { formatEnvironmentQueryError } from "../../../state/query";
+import { SettingsRow, SettingsSection } from "../settingsLayout";
+import { PluginRow } from "./PluginRow";
+
+/** The page's own settings, with `children` first, then each plugin the environment has. */
+export function PluginList({
+  environmentId,
+  children,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly children: ReactNode;
+}) {
+  const result = useAtomValue(pluginEnvironment.pluginsLive({ environmentId, input: {} }));
+  const plugins = AsyncResult.getOrElse(result, () => null)?.plugins ?? null;
+  const error = result._tag === "Failure" ? formatEnvironmentQueryError(result.cause) : null;
+  return (
+    <>
+      <SettingsSection title="Plugins">{children}</SettingsSection>
+      <ScanPluginsFolder environmentId={environmentId} />
+      <SettingsSection title="Installed plugins">
+        {error === null ? null : <SettingsRow title="Could not load plugins" description={error} />}
+        {plugins === null && error === null ? (
+          <SettingsRow title="Loading plugins…" role="status" />
+        ) : plugins?.length === 0 && error === null ? (
+          <SettingsRow
+            title="No plugins installed"
+            description="Drop a plugin folder here to add it."
+          />
+        ) : (
+          (plugins ?? []).map((plugin, index) => (
+            <PluginRow
+              // A duplicate shares its id with the copy in use.
+              key={
+                plugin.failure?.stage === "duplicate" ? `${index}` : `${plugin.id}:${plugin.source}`
+              }
+              environmentId={environmentId}
+              plugin={plugin}
+            />
+          ))
+        )}
+      </SettingsSection>
+    </>
+  );
+}
+
+/** Has the server look at its plugins folder again, so folders copied there by hand are listed. */
+function ScanPluginsFolder({ environmentId }: { readonly environmentId: EnvironmentId }) {
+  const registry = useContext(RegistryContext);
+  const canRescan = useAtomValue(pluginEnvironment.rescanPlugins.permissionAtom(environmentId));
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- The server reads its plugins folder only when asked, so opening the page asks it.
+  useEffect(() => {
+    if (!canRescan) return;
+    void runAtomCommand(
+      registry,
+      pluginEnvironment.rescanPlugins,
+      { environmentId, input: {} },
+      { label: "plugin folder scan", reportFailure: false, reportDefect: false },
+    );
+  }, [registry, environmentId, canRescan]);
+  return null;
+}
diff --git a/apps/web/src/components/settings/plugins/PluginRow.tsx b/apps/web/src/components/settings/plugins/PluginRow.tsx
new file mode 100644
index 0000000000000..9e798e28d3ae1
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/PluginRow.tsx
@@ -0,0 +1,247 @@
+import { useAtomValue } from "@effect/atom-react";
+import type { EnvironmentId, PluginState } from "@t3tools/contracts";
+import { ChevronUpIcon, RotateCwIcon, SlidersHorizontalIcon, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+
+import {
+  pluginContributionKey,
+  pluginSettingsPanelAtom,
+  pluginWebFailuresAtom,
+} from "../../../plugins/pluginRegistry";
+import { pluginEnvironment } from "../../../state/plugins";
+import { useAtomCommand } from "../../../state/use-atom-command";
+import { Button } from "../../ui/button";
+import { Collapsible, CollapsiblePanel } from "../../ui/collapsible";
+import { Popover, PopoverClose, PopoverPopup, PopoverTrigger } from "../../ui/popover";
+import { Switch } from "../../ui/switch";
+import { SettingsRow } from "../settingsLayout";
+import { PluginSettingsRows } from "./PluginSettingsRows";
+
+const FAILURE_STAGES = {
+  discovery: "Not found",
+  duplicate: "Duplicate id",
+  manifest: "Invalid manifest",
+  compatibility: "Incompatible",
+  load: "Failed to load",
+  activate: "Failed to start",
+  crash: "Stopped the server",
+} as const;
+
+export function PluginRow({
+  environmentId,
+  plugin,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly plugin: PluginState;
+}) {
+  const canManage = useAtomValue(pluginEnvironment.setPluginEnabled.permissionAtom(environmentId));
+  const setEnabled = useAtomCommand(pluginEnvironment.setPluginEnabled, "plugin enabled");
+  const reload = useAtomCommand(pluginEnvironment.reloadPlugin, "plugin reload");
+  const uninstall = useAtomCommand(pluginEnvironment.uninstallPlugin, "plugin removal");
+  const [busy, setBusy] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const customSettings = useAtomValue(
+    pluginSettingsPanelAtom(pluginContributionKey(environmentId, plugin.id)),
+  );
+  const webFailure = useAtomValue(pluginWebFailuresAtom(plugin.id)).get(environmentId);
+  const hasSettings = customSettings !== undefined || plugin.hasSettings;
+  const whileBusy = async (action: () => Promise<unknown>) => {
+    setBusy(true);
+    await action();
+    setBusy(false);
+  };
+  const unlink = plugin.source === "dev";
+  // Other actions send only the id, which names the copy in use.
+  const duplicate = plugin.failure?.stage === "duplicate";
+  const { failure, serverFailure, folder } = plugin;
+  const problems = [
+    ...(failure === undefined ? [] : [`${FAILURE_STAGES[failure.stage]}: ${failure.message}`]),
+    ...(serverFailure === undefined
+      ? []
+      : [
+          `Failed while running: ${serverFailure}`,
+          // Turning a plugin off clears its failures on the server, so this one came after.
+          ...(plugin.enabled
+            ? []
+            : ["Some of its code is still running. Restarting T3 Code stops it."]),
+        ]),
+    ...(webFailure === undefined ? [] : [`Web part failed: ${webFailure}`]),
+  ];
+  const row = (
+    <SettingsRow
+      title={plugin.name}
+      description={
+        <>
+          {plugin.description}
+          {plugin.permissions.length > 0 ? (
+            <span className="block">
+              Says it uses: {plugin.permissions.join(", ")}. T3 Code doesn't enforce this.
+            </span>
+          ) : null}
+        </>
+      }
+      status={
+        problems.length === 0 ? undefined : (
+          <div className="flex flex-wrap items-center gap-2">
+            {problems.map((problem) => (
+              <span key={problem} className="text-destructive">
+                {problem}
+              </span>
+            ))}
+          </div>
+        )
+      }
+      control={
+        duplicate ? (
+          folder !== undefined ? (
+            <RemovePluginPopover
+              name={plugin.name}
+              unlink={unlink}
+              folder={folder}
+              deletesData={false}
+              disabled={busy || !canManage}
+              onRemove={() =>
+                whileBusy(() =>
+                  uninstall({ environmentId, input: { pluginId: plugin.id, folder } }),
+                )
+              }
+            />
+          ) : undefined
+        ) : (
+          <>
+            {hasSettings ? (
+              <Button
+                size="icon-sm"
+                variant="ghost"
+                aria-label={`Settings for ${plugin.name}`}
+                aria-expanded={settingsOpen}
+                onClick={() => setSettingsOpen((open) => !open)}
+              >
+                {settingsOpen ? (
+                  <ChevronUpIcon className="size-4" />
+                ) : (
+                  <SlidersHorizontalIcon className="size-4" />
+                )}
+              </Button>
+            ) : null}
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              disabled={busy || !canManage}
+              aria-label={`Reload ${plugin.name}`}
+              onClick={() =>
+                void whileBusy(() => reload({ environmentId, input: { pluginId: plugin.id } }))
+              }
+            >
+              <RotateCwIcon className="size-4" />
+            </Button>
+            <RemovePluginPopover
+              name={plugin.name}
+              unlink={unlink}
+              folder={unlink ? folder : undefined}
+              deletesData
+              disabled={busy || !canManage}
+              onRemove={() =>
+                whileBusy(() => uninstall({ environmentId, input: { pluginId: plugin.id } }))
+              }
+            />
+            <Switch
+              checked={plugin.enabled}
+              disabled={busy || !canManage}
+              aria-label={`Enable ${plugin.name}`}
+              onCheckedChange={(enabled) =>
+                void whileBusy(() =>
+                  setEnabled({ environmentId, input: { pluginId: plugin.id, enabled } }),
+                )
+              }
+            />
+          </>
+        )
+      }
+    />
+  );
+  if (duplicate || !hasSettings) return row;
+  return (
+    <>
+      {row}
+      {/* `contents`, so the card's line between rows falls inside the panel and slides in with it. */}
+      <Collapsible open={settingsOpen} onOpenChange={setSettingsOpen} className="contents">
+        <CollapsiblePanel>
+          <div className="border-t border-border/50 [&>*+*]:border-t [&>*+*]:border-border/50">
+            <PluginSettingsRows
+              environmentId={environmentId}
+              plugin={plugin}
+              customSettings={customSettings}
+            />
+          </div>
+        </CollapsiblePanel>
+      </Collapsible>
+    </>
+  );
+}
+
+/** The remove button and the popup that confirms it, or Unlink for a plugin loaded from a folder. */
+function RemovePluginPopover({
+  name,
+  unlink,
+  folder,
+  deletesData,
+  disabled,
+  onRemove,
+}: {
+  readonly name: string;
+  readonly unlink: boolean;
+  /** Named in the popup: the folder unlinked, or the duplicate's folder deleted. */
+  readonly folder: string | undefined;
+  /** False for a duplicate: the copy in use keeps the data. */
+  readonly deletesData: boolean;
+  readonly disabled: boolean;
+  readonly onRemove: () => Promise<unknown>;
+}) {
+  const label = unlink ? "Unlink" : "Remove";
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            disabled={disabled}
+            aria-label={`${label} ${name}`}
+          />
+        }
+      >
+        <Trash2Icon className="size-4" />
+      </PopoverTrigger>
+      <PopoverPopup side="top" align="end" width="md">
+        <div className="flex flex-col gap-3">
+          {folder === undefined ? null : (
+            <p className="text-muted-foreground text-xs">
+              {unlink ? "Stops loading " : "Deletes "}
+              <span className="break-all font-mono">{folder}</span>
+              {unlink ? ". The folder stays." : "."}
+            </p>
+          )}
+          {deletesData ? (
+            <p className="text-muted-foreground text-xs">
+              This also deletes its settings, secrets and stored data, and can't be undone.
+            </p>
+          ) : null}
+          <div className="flex justify-end gap-2">
+            <PopoverClose render={<Button size="sm" variant="ghost" disabled={disabled} />}>
+              Cancel
+            </PopoverClose>
+            <Button
+              size="sm"
+              variant="destructive"
+              disabled={disabled}
+              onClick={() => void onRemove()}
+            >
+              {label} {name}
+            </Button>
+          </div>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
diff --git a/apps/web/src/components/settings/plugins/PluginSettingsRows.tsx b/apps/web/src/components/settings/plugins/PluginSettingsRows.tsx
new file mode 100644
index 0000000000000..9c938a3fb5d2f
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/PluginSettingsRows.tsx
@@ -0,0 +1,107 @@
+import { useAtomValue } from "@effect/atom-react";
+import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentId, PluginState } from "@t3tools/contracts";
+import type * as Schema from "effect/Schema";
+
+import { PluginRenderBoundary } from "../../../plugins/PluginRenderBoundary";
+import type { PluginSettingsPanelEntry } from "../../../plugins/pluginRegistry";
+import { pluginEnvironment } from "../../../state/plugins";
+import { useEnvironmentQuery } from "../../../state/query";
+import { useAtomCommand } from "../../../state/use-atom-command";
+import { JsonSchemaSettingsForm } from "../JsonSchemaSettingsForm";
+import { SettingsRow } from "../settingsLayout";
+
+/** A plugin's settings under its row: the plugin's own panel, or rows from its schema. */
+export function PluginSettingsRows({
+  environmentId,
+  plugin,
+  customSettings,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly plugin: PluginState;
+  readonly customSettings: PluginSettingsPanelEntry | undefined;
+}) {
+  if (customSettings === undefined) {
+    return <PluginSettingsEditor environmentId={environmentId} plugin={plugin} />;
+  }
+  return <PluginCustomSettings entry={customSettings} />;
+}
+
+/** A settings panel the plugin's web bundle drew instead of the generated form. */
+function PluginCustomSettings(props: { readonly entry: PluginSettingsPanelEntry }) {
+  const Panel = props.entry.component;
+  return (
+    // Padded as a settings row, so a panel drawn as one lines up with the rows around it.
+    <div className="px-3 py-3 sm:px-4">
+      <PluginRenderBoundary
+        owner={props.entry.owner}
+        what="Its settings panel"
+        resetKeys={[props.entry]}
+        fallback={
+          <p className="text-xs text-destructive">
+            This plugin's settings panel stopped with an error.
+          </p>
+        }
+      >
+        <Panel />
+      </PluginRenderBoundary>
+    </div>
+  );
+}
+
+function PluginSettingsEditor({
+  environmentId,
+  plugin,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly plugin: PluginState;
+}) {
+  const query = useEnvironmentQuery(
+    pluginEnvironment.pluginSettings({ environmentId, input: { pluginId: plugin.id } }),
+  );
+  if (query.error) return <SettingsRow title="Could not load settings" description={query.error} />;
+  if (!query.data) return <SettingsRow title="Loading settings…" role="status" />;
+  return (
+    <PluginSettingsFormView
+      environmentId={environmentId}
+      plugin={plugin}
+      schema={query.data.settingsSchema}
+      initialSettings={query.data.settings}
+    />
+  );
+}
+
+function PluginSettingsFormView({
+  environmentId,
+  plugin,
+  schema,
+  initialSettings,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly plugin: PluginState;
+  readonly schema: Schema.JsonObject | undefined;
+  readonly initialSettings: Schema.JsonObject;
+}) {
+  const update = useAtomCommand(pluginEnvironment.updatePluginSettings, {
+    label: "plugin settings",
+    reportFailure: false,
+  });
+  const canSave = useAtomValue(
+    pluginEnvironment.updatePluginSettings.permissionAtom(environmentId),
+  );
+  return (
+    <JsonSchemaSettingsForm
+      idPrefix={`plugin-setting-${plugin.id}`}
+      label={plugin.name}
+      schema={schema}
+      settings={initialSettings}
+      canSave={canSave}
+      onSave={async (patch) => {
+        const result = await update({ environmentId, input: { pluginId: plugin.id, patch } });
+        if (result._tag === "Success") return { settings: result.value.settings };
+        const error = squashAtomCommandFailure(result);
+        return { problem: error instanceof Error ? error.message : "Could not save the settings." };
+      }}
+    />
+  );
+}
diff --git a/apps/web/src/components/settings/plugins/PluginUiEnvironmentRow.tsx b/apps/web/src/components/settings/plugins/PluginUiEnvironmentRow.tsx
new file mode 100644
index 0000000000000..9d967a6611460
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/PluginUiEnvironmentRow.tsx
@@ -0,0 +1,86 @@
+import { useAtom, useAtomValue } from "@effect/atom-react";
+import type { EnvironmentId } from "@t3tools/contracts";
+import { ChevronDownIcon } from "lucide-react";
+
+import {
+  loadsPluginUi,
+  pluginUiChoicesAtom,
+  pluginUiEnvironmentsAtom,
+  withPluginUiChoice,
+} from "../../../plugins/pluginFollow";
+import {
+  type EnvironmentPresentation,
+  useEnvironments,
+  usePrimaryEnvironmentId,
+} from "../../../state/environments";
+import { Button } from "../../ui/button";
+import { Menu, MenuCheckboxItem, MenuPopup, MenuTrigger } from "../../ui/menu";
+import { settingsScopeEnvironmentLabel } from "../settingsScopeAxis";
+import { SettingsRow } from "../settingsLayout";
+import { runsPlugins } from "./pluginTargets";
+
+/**
+ * Turns plugin UI on or off for each environment in this browser. The main environment starts on
+ * and the others off; hidden while the main environment is the only one that could supply it.
+ */
+export function PluginUiEnvironmentRow() {
+  const primaryEnvironmentId = usePrimaryEnvironmentId();
+  const { environments } = useEnvironments();
+  const [choices, setChoices] = useAtom(pluginUiChoicesAtom);
+  const [appWideEnvironmentId, ...others] = useAtomValue(pluginUiEnvironmentsAtom);
+  const isOn = (environmentId: EnvironmentId) =>
+    loadsPluginUi(choices, environmentId, primaryEnvironmentId);
+  // A chosen environment stays listed while it is offline, so it can be turned off.
+  const options = environments.filter(
+    (environment) => runsPlugins(environment) || isOn(environment.environmentId),
+  );
+  if (
+    primaryEnvironmentId !== null &&
+    options.every((option) => option.environmentId === primaryEnvironmentId)
+  ) {
+    return null;
+  }
+  const labelOf = (environment: EnvironmentPresentation) =>
+    settingsScopeEnvironmentLabel(environment, environments);
+  const chosenLabels = options.filter((option) => isOn(option.environmentId)).map(labelOf);
+  const appWide = options.find((option) => option.environmentId === appWideEnvironmentId);
+  return (
+    <SettingsRow
+      title="Load plugin UI from"
+      description={
+        appWide === undefined || others.length === 0
+          ? "The chosen servers' plugins run code in this window."
+          : `The chosen servers' plugins run code in this window. Commands come from ${labelOf(appWide)}.`
+      }
+      control={
+        <Menu>
+          <MenuTrigger
+            render={<Button size="sm" variant="outline" className="w-full sm:w-48" />}
+            aria-label="Load plugin UI from"
+          >
+            <span className="min-w-0 flex-1 truncate text-left">
+              {chosenLabels.length === 0 ? "None" : chosenLabels.join(", ")}
+            </span>
+            <ChevronDownIcon />
+          </MenuTrigger>
+          <MenuPopup align="end">
+            {options.map((option) => (
+              <MenuCheckboxItem
+                key={option.environmentId}
+                variant="switch"
+                checked={isOn(option.environmentId)}
+                onCheckedChange={(on) =>
+                  setChoices(
+                    withPluginUiChoice(choices, option.environmentId, on, primaryEnvironmentId),
+                  )
+                }
+              >
+                {labelOf(option)}
+              </MenuCheckboxItem>
+            ))}
+          </MenuPopup>
+        </Menu>
+      }
+    />
+  );
+}
diff --git a/apps/web/src/components/settings/plugins/PluginsSettings.tsx b/apps/web/src/components/settings/plugins/PluginsSettings.tsx
new file mode 100644
index 0000000000000..55c237b51c600
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/PluginsSettings.tsx
@@ -0,0 +1,159 @@
+import { useAtomValue } from "@effect/atom-react";
+import { Atom } from "effect/reactivity";
+import { BlocksIcon } from "lucide-react";
+import { type DragEvent, useState } from "react";
+
+import { cn } from "../../../lib/utils";
+import { pluginUiEnvironmentsAtom } from "../../../plugins/pluginFollow";
+import { droppedFolders } from "../../../plugins/pluginFolders";
+import type { EnvironmentPresentation } from "../../../state/environments";
+import { pluginEnvironment } from "../../../state/plugins";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../../ui/empty";
+import { useSettingsScope } from "../SettingsScopeContext";
+import { SettingsPageContainer, SettingsRow, SettingsSection } from "../settingsLayout";
+import {
+  AddPluginButton,
+  AddPluginDialog,
+  InstallProblems,
+  usePluginInstaller,
+} from "./PluginInstallControls";
+import { PluginList } from "./PluginList";
+import { runsPlugins } from "./pluginTargets";
+import { PluginUiEnvironmentRow } from "./PluginUiEnvironmentRow";
+
+export function PluginsSettings() {
+  const { scope, environment } = useSettingsScope();
+  if (scope.kind === "unavailable") {
+    return (
+      <SettingsPageContainer>
+        <SettingsSection title="Plugins">
+          <SettingsRow title={scope.message} />
+        </SettingsSection>
+      </SettingsPageContainer>
+    );
+  }
+  if (environment === null) {
+    return (
+      <SettingsPageContainer>
+        <SettingsSection title="Plugins" variant="plain">
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <BlocksIcon />
+              </EmptyMedia>
+              <EmptyTitle>No environment selected</EmptyTitle>
+              <EmptyDescription>Connect an environment to manage its plugins.</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        </SettingsSection>
+      </SettingsPageContainer>
+    );
+  }
+  return <PluginsPage environment={environment} />;
+}
+
+const NO_INSTALL_PERMISSION = Atom.make(false);
+
+/** Lists the environment's plugins. Plugin folders dropped anywhere on it are installed. */
+function PluginsPage({ environment }: { readonly environment: EnvironmentPresentation }) {
+  const loadsUi = useAtomValue(pluginUiEnvironmentsAtom).includes(environment.environmentId);
+  const installer = usePluginInstaller(environment, loadsUi);
+  const [adding, setAdding] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const runs = runsPlugins(environment);
+  const canInstall = useAtomValue(
+    runs
+      ? pluginEnvironment.createPluginUploadUrl.permissionAtom(environment.environmentId)
+      : NO_INSTALL_PERMISSION,
+  );
+  const isFileDrag = (event: DragEvent) => event.dataTransfer.types.includes("Files");
+  return (
+    <SettingsPageContainer>
+      {/* Drops on the Add plugin dialog land here too: React bubbles events out of portals. */}
+      <div
+        className={cn(
+          "-m-3 flex flex-col gap-8 rounded-xl p-3",
+          dragActive &&
+            "bg-primary/5 outline-2 -outline-offset-2 outline-primary/60 outline-dashed",
+        )}
+        onDragEnter={(event) => {
+          if (!isFileDrag(event)) return;
+          event.preventDefault();
+          setDragActive(canInstall);
+        }}
+        onDragOver={(event) => {
+          if (!isFileDrag(event)) return;
+          // Taken even without permission, so the browser doesn't open the folder instead.
+          event.preventDefault();
+          event.dataTransfer.dropEffect = canInstall ? "copy" : "none";
+          setDragActive(canInstall);
+        }}
+        onDragLeave={(event) => {
+          if (!isFileDrag(event)) return;
+          if (
+            event.relatedTarget instanceof Node &&
+            event.currentTarget.contains(event.relatedTarget)
+          ) {
+            return;
+          }
+          setDragActive(false);
+        }}
+        onDrop={(event) => {
+          if (!isFileDrag(event)) return;
+          event.preventDefault();
+          setDragActive(false);
+          if (!canInstall) return;
+          void installer
+            .installFolders(droppedFolders(event.dataTransfer))
+            .then((installed) => installed && setAdding(false));
+        }}
+      >
+        {runs ? (
+          <PluginList environmentId={environment.environmentId}>
+            <SettingsRow
+              title="Add a plugin"
+              description={
+                installer.installing === null
+                  ? "Drop a plugin folder here or use Add plugin. Install only plugins you trust."
+                  : `Installing ${installer.installing}…`
+              }
+              control={
+                <AddPluginButton
+                  environmentId={environment.environmentId}
+                  disabled={installer.installing !== null}
+                  onClick={() => {
+                    installer.clearProblems();
+                    setAdding(true);
+                  }}
+                />
+              }
+            >
+              <InstallProblems problems={installer.problems} />
+            </SettingsRow>
+            <PluginUiEnvironmentRow />
+          </PluginList>
+        ) : (
+          <SettingsSection title="Plugins">
+            <SettingsRow
+              title="Plugins are not available"
+              description={`${environment.label} runs a T3 Code server without plugin support.`}
+            />
+          </SettingsSection>
+        )}
+        {runs ? (
+          <AddPluginDialog
+            open={adding}
+            onOpenChange={setAdding}
+            installer={installer}
+            dragActive={dragActive}
+            scopeNote={
+              loadsUi
+                ? `Installs on ${environment.label}.`
+                : `Installs on ${environment.label}. This app doesn't load plugin UI from ${environment.label}, so a plugin with no server code does nothing there.`
+            }
+          />
+        ) : null}
+      </div>
+    </SettingsPageContainer>
+  );
+}
diff --git a/apps/web/src/components/settings/plugins/pluginSettingsForm.test.ts b/apps/web/src/components/settings/plugins/pluginSettingsForm.test.ts
new file mode 100644
index 0000000000000..fd6c27d548055
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/pluginSettingsForm.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { pluginSettingsForm } from "./pluginSettingsForm";
+
+describe("pluginSettingsForm", () => {
+  it("derives one field per supported property", () => {
+    expect(
+      pluginSettingsForm({
+        type: "object",
+        required: ["greeting"],
+        properties: {
+          greeting: { type: "string", title: "Greeting", default: "hi", maxLength: 40 },
+          token: { type: "string", format: "t3-secret", description: "API token" },
+          retries: { type: "integer", minimum: 0, maximum: 5, default: 2 },
+          ratio: { type: "number" },
+          verbose: { type: "boolean", default: false },
+          mode: { enum: ["fast", "safe"], default: "safe" },
+          tags: { type: "array", items: { type: "string" }, default: ["a"] },
+        },
+      }),
+    ).toEqual({
+      kind: "fields",
+      fields: [
+        {
+          key: "greeting",
+          label: "Greeting",
+          description: undefined,
+          required: true,
+          kind: "text",
+          defaultValue: "hi",
+          maxLength: 40,
+        },
+        { key: "token", label: "token", description: "API token", required: false, kind: "secret" },
+        {
+          key: "retries",
+          label: "retries",
+          description: undefined,
+          required: false,
+          kind: "number",
+          integer: true,
+          defaultValue: 2,
+          minimum: 0,
+          maximum: 5,
+        },
+        {
+          key: "ratio",
+          label: "ratio",
+          description: undefined,
+          required: false,
+          kind: "number",
+          integer: false,
+          defaultValue: undefined,
+          minimum: undefined,
+          maximum: undefined,
+        },
+        {
+          key: "verbose",
+          label: "verbose",
+          description: undefined,
+          required: false,
+          kind: "boolean",
+          defaultValue: false,
+        },
+        {
+          key: "mode",
+          label: "mode",
+          description: undefined,
+          required: false,
+          kind: "select",
+          options: ["fast", "safe"],
+          defaultValue: "safe",
+        },
+        {
+          key: "tags",
+          label: "tags",
+          description: undefined,
+          required: false,
+          kind: "list",
+          defaultValue: ["a"],
+        },
+      ],
+    });
+  });
+
+  it.each([
+    ["no schema", undefined, "none"],
+    ["an object without properties", { type: "object", properties: {} }, "none"],
+    ["a nested object", { type: "object", properties: { a: { type: "object" } } }, "json"],
+    [
+      "a list of numbers",
+      { type: "object", properties: { a: { type: "array", items: { type: "number" } } } },
+      "json",
+    ],
+    ["a union", { type: "object", properties: { a: { anyOf: [{ type: "string" }] } } }, "json"],
+    ["a non-object root", { type: "string" }, "json"],
+  ] as const)("gives %s the right form kind", (_name, schema, kind) => {
+    expect(pluginSettingsForm(schema).kind).toBe(kind);
+  });
+});
diff --git a/apps/web/src/components/settings/plugins/pluginSettingsForm.ts b/apps/web/src/components/settings/plugins/pluginSettingsForm.ts
new file mode 100644
index 0000000000000..5c5cfdee1f797
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/pluginSettingsForm.ts
@@ -0,0 +1,129 @@
+import type * as Schema from "effect/Schema";
+
+interface FieldBase {
+  readonly key: string;
+  readonly label: string;
+  readonly description: string | undefined;
+  readonly required: boolean;
+}
+
+/** One control on a plugin's settings form, derived from its manifest's JSON Schema. */
+export type PluginSettingsField = FieldBase &
+  (
+    | {
+        readonly kind: "text";
+        readonly defaultValue: string | undefined;
+        readonly maxLength: number | undefined;
+      }
+    | { readonly kind: "secret" }
+    | {
+        readonly kind: "number";
+        readonly integer: boolean;
+        readonly defaultValue: number | undefined;
+        readonly minimum: number | undefined;
+        readonly maximum: number | undefined;
+      }
+    | { readonly kind: "boolean"; readonly defaultValue: boolean | undefined }
+    | {
+        readonly kind: "select";
+        readonly options: ReadonlyArray<string | number>;
+        readonly defaultValue: string | number | undefined;
+      }
+    | { readonly kind: "list"; readonly defaultValue: ReadonlyArray<string> | undefined }
+  );
+
+/**
+ * The form for a plugin's settings. `json` means the schema uses shapes the generated form does
+ * not cover, so the client edits the settings as JSON and relies on the server's validation.
+ */
+export type PluginSettingsForm =
+  | { readonly kind: "none" }
+  | { readonly kind: "fields"; readonly fields: ReadonlyArray<PluginSettingsField> }
+  | { readonly kind: "json" };
+
+const isRecord = (value: unknown): value is Schema.JsonObject =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+const stringOrUndefined = (value: unknown) => (typeof value === "string" ? value : undefined);
+const numberOrUndefined = (value: unknown) => (typeof value === "number" ? value : undefined);
+const isOption = (value: unknown): value is string | number =>
+  typeof value === "string" || typeof value === "number";
+
+const toField = (
+  key: string,
+  property: Schema.Json,
+  required: boolean,
+): PluginSettingsField | undefined => {
+  if (!isRecord(property)) return undefined;
+  const base = {
+    key,
+    label: stringOrUndefined(property.title) ?? key,
+    description: stringOrUndefined(property.description),
+    required,
+  };
+  if (Array.isArray(property.enum)) {
+    const options = property.enum.filter(isOption);
+    if (options.length === 0 || options.length !== property.enum.length) return undefined;
+    return {
+      ...base,
+      kind: "select",
+      options,
+      defaultValue: isOption(property.default) ? property.default : undefined,
+    };
+  }
+  switch (property.type) {
+    case "string":
+      return property.format === "t3-secret"
+        ? { ...base, kind: "secret" }
+        : {
+            ...base,
+            kind: "text",
+            defaultValue: stringOrUndefined(property.default),
+            maxLength: numberOrUndefined(property.maxLength),
+          };
+    case "number":
+    case "integer":
+      return {
+        ...base,
+        kind: "number",
+        integer: property.type === "integer",
+        defaultValue: numberOrUndefined(property.default),
+        minimum: numberOrUndefined(property.minimum),
+        maximum: numberOrUndefined(property.maximum),
+      };
+    case "boolean":
+      return {
+        ...base,
+        kind: "boolean",
+        defaultValue: typeof property.default === "boolean" ? property.default : undefined,
+      };
+    case "array": {
+      const items = property.items;
+      if (!isRecord(items) || items.type !== "string" || items.enum !== undefined) return undefined;
+      const fallback = property.default;
+      return {
+        ...base,
+        kind: "list",
+        defaultValue:
+          Array.isArray(fallback) && fallback.every((value) => typeof value === "string")
+            ? fallback
+            : undefined,
+      };
+    }
+    default:
+      return undefined;
+  }
+};
+
+/** Derives the settings form from a manifest `settingsSchema`. */
+export function pluginSettingsForm(schema: Schema.JsonObject | undefined): PluginSettingsForm {
+  if (schema === undefined) return { kind: "none" };
+  if (schema.type !== "object" || !isRecord(schema.properties)) return { kind: "json" };
+  const required = new Set(Array.isArray(schema.required) ? schema.required : []);
+  const fields: Array<PluginSettingsField> = [];
+  for (const [key, property] of Object.entries(schema.properties)) {
+    const field = toField(key, property, required.has(key));
+    if (field === undefined) return { kind: "json" };
+    fields.push(field);
+  }
+  return fields.length === 0 ? { kind: "none" } : { kind: "fields", fields };
+}
diff --git a/apps/web/src/components/settings/plugins/pluginTargets.ts b/apps/web/src/components/settings/plugins/pluginTargets.ts
new file mode 100644
index 0000000000000..9d160bdcbc6d8
--- /dev/null
+++ b/apps/web/src/components/settings/plugins/pluginTargets.ts
@@ -0,0 +1,5 @@
+import type { EnvironmentPresentation } from "../../../state/environments";
+
+export const runsPlugins = (environment: EnvironmentPresentation) =>
+  environment.connection.phase === "connected" &&
+  environment.serverConfig?.environment.capabilities.plugins === true;
diff --git a/apps/web/src/components/settings/settingsSearch.ts b/apps/web/src/components/settings/settingsSearch.ts
index aabfd0300eda5..e7c05ed38e2a6 100644
--- a/apps/web/src/components/settings/settingsSearch.ts
+++ b/apps/web/src/components/settings/settingsSearch.ts
@@ -34,6 +34,7 @@ export type SettingsPath =
   | "/settings/connections"
   | "/settings/access"
   | "/settings/secrets"
+  | "/settings/plugins"
   | "/settings/maintenance"
   | "/settings/labs"
   | "/settings/about"
@@ -104,6 +105,7 @@ export const SETTINGS_SECTION_LABELS: Readonly<Record<SettingsPath, string>> = {
   "/settings/connections": "Environments",
   "/settings/access": "Sharing & access",
   "/settings/secrets": "Secrets",
+  "/settings/plugins": "Plugins",
   "/settings/maintenance": "Maintenance",
   "/settings/labs": "Labs",
   "/settings/about": "About",
@@ -150,7 +152,13 @@ export const SETTINGS_NAV_GROUPS: ReadonlyArray<{
   },
   {
     heading: null,
-    paths: ["/settings/maintenance", "/settings/labs", "/settings/about", "/settings/archived"],
+    paths: [
+      "/settings/plugins",
+      "/settings/maintenance",
+      "/settings/labs",
+      "/settings/about",
+      "/settings/archived",
+    ],
   },
 ];
 
@@ -830,6 +838,12 @@ export const SETTINGS_SEARCH_ITEMS = [
     scope: "project-defaults",
     searchTerms: ["allow disable enable open drive preview tools sessions project override"],
   },
+  {
+    id: "plugins",
+    title: "Plugins",
+    to: "/settings/plugins",
+    searchTerms: ["plugins extensions add-ons enable disable reload plugin settings"],
+  },
   {
     id: "device-sources",
     title: "Device sources",
@@ -1197,6 +1211,7 @@ const SETTINGS_CATEGORY_SCOPES: Readonly<Record<SettingsPath, SettingsSearchScop
   "/settings/connections": "connections",
   "/settings/access": "connections",
   "/settings/secrets": null,
+  "/settings/plugins": null,
   "/settings/scheduled-tasks": null,
   "/settings/maintenance": null,
   "/settings/labs": null,
diff --git a/apps/web/src/components/ui/sidebar.browser.test.tsx b/apps/web/src/components/ui/sidebar.browser.test.tsx
index 288367fa4a3ed..ff228c1f96de4 100644
--- a/apps/web/src/components/ui/sidebar.browser.test.tsx
+++ b/apps/web/src/components/ui/sidebar.browser.test.tsx
@@ -36,6 +36,11 @@ describe("Sidebar", () => {
   it("hands focus to the outside trigger when it collapses around the focused control", async () => {
     await page.viewport(1280, 800);
     await using screen = await render(<Harness />, { router: false /* no routes involved */ });
+    // Plugin styles target the sidebar by this name, on the element that paints it.
+    expect(screen.container.querySelector('[data-slot="sidebar-inner"]')).toHaveAttribute(
+      "data-t3-region",
+      "sidebar",
+    );
 
     await userEvent.click(screen.getByRole("button", { name: "Collapse" }));
 
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index e99509c8ce60e..4eb0b253de832 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -289,6 +289,7 @@ function Sidebar({
             className,
           )}
           data-slot="sidebar"
+          data-t3-region="sidebar"
           {...props}
         >
           {children}
@@ -310,6 +311,7 @@ function Sidebar({
             data-mobile="true"
             data-sidebar="sidebar"
             data-slot="sidebar"
+            data-t3-region="sidebar"
             showCloseButton={false}
             side={side}
             style={
@@ -381,6 +383,7 @@ function Sidebar({
             className="flex h-full w-full flex-col bg-sidebar surface-grain group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm/5"
             data-sidebar="sidebar"
             data-slot="sidebar-inner"
+            data-t3-region="sidebar"
           >
             {children}
           </div>
@@ -611,6 +614,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
         className,
       )}
       data-slot="sidebar-inset"
+      data-t3-region="main"
       {...props}
     />
   );
diff --git a/apps/web/src/hooks/useEnvironmentTheme.test.ts b/apps/web/src/hooks/useEnvironmentTheme.test.ts
index 80b8fcbc216a0..cc7424c57dd3c 100644
--- a/apps/web/src/hooks/useEnvironmentTheme.test.ts
+++ b/apps/web/src/hooks/useEnvironmentTheme.test.ts
@@ -1,25 +1,41 @@
 import type { EnvironmentTheme } from "@t3tools/contracts";
 import { afterEach, describe, expect, it, vi } from "vite-plus/test";
 
-const publishedThemes = vi.hoisted(() => ({
-  atom: null as unknown as import("effect/reactivity").Atom.Writable<
-    ReadonlyArray<EnvironmentTheme>
-  >,
+// Like the real config, the themes and the latest event change together in one update.
+interface ServerState {
+  readonly themes: ReadonlyArray<EnvironmentTheme>;
+  readonly event: { readonly type: string } | null;
+}
+const server = vi.hoisted(() => ({
+  state: null as unknown as import("effect/reactivity").Atom.Writable<ServerState>,
 }));
 vi.mock(import("../state/server"), async () => {
   const { Atom } = await import("effect/reactivity");
-  publishedThemes.atom = Atom.make<ReadonlyArray<EnvironmentTheme>>([]);
-  return { primaryServerEnvironmentThemesAtom: publishedThemes.atom } as never;
+  server.state = Atom.make<ServerState>({ themes: [], event: null });
+  return {
+    primaryServerEnvironmentThemesAtom: Atom.make((get) => get(server.state).themes),
+    primaryServerConfigEventAtom: Atom.make((get) => get(server.state).event),
+  } as never;
 });
+const publish = (
+  registry: { readonly set: (atom: typeof server.state, state: ServerState) => void },
+  themes: ReadonlyArray<EnvironmentTheme>,
+) => registry.set(server.state, { themes, event: { type: "environmentThemesUpdated" } });
 const refreshTheme = vi.hoisted(() => vi.fn());
 vi.mock(import("./useTheme"), () => ({ refreshTheme }) as never);
 
 import { appAtomRegistry } from "../rpc/atomRegistry";
 import {
+  asImportedThemeCopy,
+  ENVIRONMENT_THEMES_STORAGE_KEY,
   getThemeDefinition,
   installCustomTheme,
   invalidateCustomThemes,
+  parseThemeFile,
   publishedThemeDefinitions,
+  THEME_FILE_VERSION,
+  themeAllowsComposerArtwork,
+  themeAllowsSidebarArtwork,
 } from "../themePalette";
 
 const NIGHTFALL_THEME = {
@@ -31,7 +47,7 @@ const NIGHTFALL_THEME = {
 } as const;
 
 afterEach(() => {
-  appAtomRegistry.set(publishedThemes.atom, []);
+  appAtomRegistry.set(server.state, { themes: [], event: null });
 });
 
 describe("environment themes", () => {
@@ -88,11 +104,41 @@ describe("environment themes", () => {
 
   // Routes without the old root sync component (/connect, prompt-link landings) never saw them.
   it("resolves published themes without a React subscriber mounted", () => {
-    appAtomRegistry.set(publishedThemes.atom, [NIGHTFALL_THEME]);
+    publish(appAtomRegistry, [NIGHTFALL_THEME]);
     expect(getThemeDefinition("nightfall")?.label).toBe("Nightfall");
+    expect(themeAllowsSidebarArtwork("nightfall")).toBe(false);
 
-    appAtomRegistry.set(publishedThemes.atom, [{ ...NIGHTFALL_THEME, name: "Nightfall 2" }]);
-    expect(getThemeDefinition("nightfall")?.label).toBe("Nightfall 2");
+    // A published theme, such as a plugin's, can keep the sidebar artwork, but not on the send
+    // button, and can set T3's corner radius and status colors.
+    publish(appAtomRegistry, [
+      {
+        ...NIGHTFALL_THEME,
+        name: "Nightfall 2",
+        sidebarArtwork: true,
+        radius: "0.625rem",
+        colors: { success: "#3fb950", info: "not-a-color" },
+        variants: { light: { info: "#0969da" } },
+      },
+    ]);
+    expect(getThemeDefinition("nightfall")).toMatchObject({
+      label: "Nightfall 2",
+      radius: "0.625rem",
+      statusColors: { dark: { success: "#3fb950" }, light: { info: "#0969da" } },
+    });
+    expect(themeAllowsSidebarArtwork("nightfall")).toBe(true);
+    expect(themeAllowsComposerArtwork("nightfall")).toBe(false);
+    // Importing the same theme file makes a copy instead of hiding the published original.
+    const imported = parseThemeFile({
+      version: THEME_FILE_VERSION,
+      id: "nightfall",
+      name: "Nightfall",
+      appearance: "dark",
+      colors: { canvas: "#1a1b26" },
+    });
+    expect(asImportedThemeCopy(imported)).toMatchObject({
+      id: "nightfall-copy",
+      label: "Nightfall copy",
+    });
   });
 
   it("lets a theme the user saved win an id collision", () => {
@@ -108,7 +154,7 @@ describe("environment themes", () => {
     });
     invalidateCustomThemes();
     try {
-      appAtomRegistry.set(publishedThemes.atom, [NIGHTFALL_THEME]);
+      publish(appAtomRegistry, [NIGHTFALL_THEME]);
       expect(getThemeDefinition("nightfall")?.label).toBe("Nightfall");
       const environment = getThemeDefinition("nightfall");
       if (!environment) throw new Error("expected the published theme");
@@ -122,13 +168,66 @@ describe("environment themes", () => {
     expect(getThemeDefinition("nightfall")?.label).toBe("Nightfall");
   });
 
+  it("uses the palettes saved last start until the server sends its own, then saves those", async () => {
+    const store = new Map([
+      [
+        ENVIRONMENT_THEMES_STORAGE_KEY,
+        JSON.stringify(
+          publishedThemeDefinitions([
+            {
+              ...NIGHTFALL_THEME,
+              sidebarArtwork: true,
+              radius: "10px",
+              colors: { info: "#0969da" },
+            },
+          ]),
+        ),
+      ],
+    ]);
+    vi.stubGlobal("window", {
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      localStorage: {
+        getItem: (key: string) => store.get(key) ?? null,
+        setItem: (key: string, value: string) => store.set(key, value),
+        removeItem: (key: string) => store.delete(key),
+      },
+    });
+    vi.resetModules();
+    const { appAtomRegistry: registry } = await import("../rpc/atomRegistry");
+    const palette = await import("../themePalette");
+    const { startEnvironmentThemeRepaint } = await import("./useEnvironmentTheme");
+    const stop = startEnvironmentThemeRepaint();
+    try {
+      expect(palette.getThemeDefinition("nightfall")?.label).toBe("Nightfall");
+      expect(palette.themeAllowsSidebarArtwork("nightfall")).toBe(true);
+      expect(palette.getThemeDefinition("nightfall")).toMatchObject({
+        radius: "10px",
+        statusColors: { dark: { info: "#0969da" } },
+      });
+
+      // The plugin that published it is gone: the server's first themes event is empty.
+      publish(registry, []);
+      expect(palette.getThemeDefinition("nightfall")).toBeNull();
+      expect(store.has(ENVIRONMENT_THEMES_STORAGE_KEY)).toBe(false);
+
+      publish(registry, [{ ...NIGHTFALL_THEME, name: "Nightfall 2" }]);
+      expect(JSON.parse(store.get(ENVIRONMENT_THEMES_STORAGE_KEY) ?? "[]")[0]?.label).toBe(
+        "Nightfall 2",
+      );
+    } finally {
+      stop();
+      vi.unstubAllGlobals();
+    }
+  });
+
   it("repaints when the environment publishes themes nothing has read yet", async () => {
     vi.resetModules();
     const { appAtomRegistry: registry } = await import("../rpc/atomRegistry");
     const { startEnvironmentThemeRepaint } = await import("./useEnvironmentTheme");
     const stop = startEnvironmentThemeRepaint();
     try {
-      registry.set(publishedThemes.atom, [NIGHTFALL_THEME]);
+      publish(registry, [NIGHTFALL_THEME]);
       expect(refreshTheme).toHaveBeenCalledTimes(1);
     } finally {
       stop();
diff --git a/apps/web/src/hooks/useEnvironmentTheme.ts b/apps/web/src/hooks/useEnvironmentTheme.ts
index ac13e38fa1541..3bff2df1a0cf4 100644
--- a/apps/web/src/hooks/useEnvironmentTheme.ts
+++ b/apps/web/src/hooks/useEnvironmentTheme.ts
@@ -1,7 +1,11 @@
 import { useAtomValue } from "@effect/atom-react";
 
 import { subscribeAtomChanges } from "../rpc/atomRegistry";
-import { environmentThemeDefinitionsAtom, type ThemeDefinition } from "../themePalette";
+import {
+  environmentThemeDefinitionsAtom,
+  startEnvironmentThemeCache,
+  type ThemeDefinition,
+} from "../themePalette";
 import { refreshTheme } from "./useTheme";
 
 export function useEnvironmentThemeDefinitions(): ReadonlyArray<ThemeDefinition> {
@@ -13,7 +17,12 @@ export function useEnvironmentThemeDefinitions(): ReadonlyArray<ThemeDefinition>
  * only land if the active theme is re-applied.
  */
 export function startEnvironmentThemeRepaint(): () => void {
-  return subscribeAtomChanges(environmentThemeDefinitionsAtom, () => {
+  const stopCache = startEnvironmentThemeCache();
+  const stopRepaint = subscribeAtomChanges(environmentThemeDefinitionsAtom, () => {
     refreshTheme({ preservePreview: true });
   });
+  return () => {
+    stopCache();
+    stopRepaint();
+  };
 }
diff --git a/apps/web/src/hooks/useSettings.ts b/apps/web/src/hooks/useSettings.ts
index 2c24f13760092..d58ae25dea4ce 100644
--- a/apps/web/src/hooks/useSettings.ts
+++ b/apps/web/src/hooks/useSettings.ts
@@ -36,6 +36,7 @@ import {
   getThemePreviewSidebarArtwork,
   resolveThemeHalf,
   subscribeToThemePreview,
+  themeAllowsComposerArtwork,
   themeAllowsSidebarArtwork,
 } from "~/themePalette";
 import {
@@ -396,7 +397,10 @@ function resolveEnvironmentIdentificationMode(input: {
     : input.mode;
 }
 
-export function useEnvironmentIdentificationMode(): EnvironmentIdentificationMode {
+/** `place` is where the artwork would draw: the sidebar, or the composer's send button. */
+export function useEnvironmentIdentificationMode(
+  place: "sidebar" | "composer" = "sidebar",
+): EnvironmentIdentificationMode {
   const settingsHydrated = useClientSettingsHydrated();
   const mode = useClientSettings((settings) => settings.environmentIdentificationMode);
   const { resolvedTheme, theme, themeHalves } = useTheme();
@@ -411,7 +415,11 @@ export function useEnvironmentIdentificationMode(): EnvironmentIdentificationMod
     mode,
     settingsHydrated,
     paletteThemeActive: previewSidebarArtwork !== null || activeThemeDefinition !== null,
-    paletteThemeAllowsArtwork: previewSidebarArtwork ?? themeAllowsSidebarArtwork(activeTheme),
+    paletteThemeAllowsArtwork:
+      previewSidebarArtwork ??
+      (place === "composer"
+        ? themeAllowsComposerArtwork(activeTheme)
+        : themeAllowsSidebarArtwork(activeTheme)),
   });
 }
 
diff --git a/apps/web/src/hooks/useTheme.ts b/apps/web/src/hooks/useTheme.ts
index 2467d89091b24..e02b444c3af8a 100644
--- a/apps/web/src/hooks/useTheme.ts
+++ b/apps/web/src/hooks/useTheme.ts
@@ -1,5 +1,5 @@
 import { pipe } from "effect/Function";
-import type { DesktopBridge } from "@t3tools/contracts";
+import type { DesktopBridge, DesktopWindowBackground } from "@t3tools/contracts";
 import { safeErrorLogAttributes } from "@t3tools/client-runtime/errors";
 import * as Schema from "effect/Schema";
 import { useSyncExternalStore } from "react";
@@ -16,6 +16,7 @@ import {
   resolveThemeAppearance,
   resolveThemeHalf,
   subscribeToThemePreview,
+  themeCanvasHex,
   THEME_PREVIEW_ID,
   THEME_APPEARANCE_MODE_STORAGE_KEY,
   THEME_FOLLOW_SYSTEM_STORAGE_KEY,
@@ -37,6 +38,8 @@ type ThemeSnapshot = {
 };
 
 type DesktopThemeBridge = Pick<DesktopBridge, "setTheme">;
+// Undefined until the first report, so colors left from a removed theme are cleared too.
+let lastDesktopWindowBackground: string | undefined;
 
 const STORAGE_KEY = "t3code:theme";
 const MEDIA_QUERY = "(prefers-color-scheme: dark)";
@@ -333,11 +336,13 @@ function applyTheme(theme: Theme, { suppressTransitions = false, preservePreview
     appearanceMode,
     themeHalves,
   );
-  applyThemePalette(resolveThemeHalf(theme, themeHalves, resolvedAppearance), resolvedAppearance);
+  const appliedTheme = resolveThemeHalf(theme, themeHalves, resolvedAppearance);
+  applyThemePalette(appliedTheme, resolvedAppearance);
   document.documentElement.classList.toggle("dark", resolvedAppearance === "dark");
   lastAppliedTheme = { theme, systemDark, followSystem, appearanceMode, themeHalves };
   syncBrowserChromeTheme();
   syncDesktopTheme(theme, followSystem, appearanceMode);
+  syncDesktopWindowBackground(theme, followSystem, appearanceMode, themeHalves);
   if (suppressTransitions) {
     // Force a reflow so the no-transitions class takes effect before removal
     void document.documentElement.offsetHeight;
@@ -391,6 +396,42 @@ function syncDesktopTheme(
   );
 }
 
+/**
+ * New desktop windows start in the theme's canvas instead of flashing black or white. The desktop
+ * app gets what the page paints while its native theme is light and while it is dark.
+ */
+function syncDesktopWindowBackground(
+  theme: Theme,
+  followSystem: boolean,
+  appearanceMode: ThemePreferenceMode,
+  themeHalves: ThemeHalves | null,
+) {
+  if (typeof window === "undefined") return;
+  const bridge = window.desktopBridge;
+  if (typeof bridge?.setWindowBackground !== "function") return;
+  const canvas = (systemDark: boolean) => {
+    const appearance = resolveThemeAppearance(
+      theme,
+      systemDark,
+      followSystem,
+      appearanceMode,
+      themeHalves,
+    );
+    return {
+      appearance,
+      color: themeCanvasHex(resolveThemeHalf(theme, themeHalves, appearance), appearance),
+    };
+  };
+  const background: DesktopWindowBackground = { light: canvas(false), dark: canvas(true) };
+  const signature = JSON.stringify(background);
+  if (lastDesktopWindowBackground === signature) return;
+  lastDesktopWindowBackground = signature;
+  void bridge.setWindowBackground(background).catch((cause: unknown) => {
+    console.error("Could not set the desktop window background.", safeErrorLogAttributes(cause));
+    if (lastDesktopWindowBackground === signature) lastDesktopWindowBackground = undefined;
+  });
+}
+
 if (typeof document !== "undefined" && typeof window !== "undefined") {
   applyTheme(getStored());
 }
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index e186516791252..f766772a53fcf 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1587,6 +1587,12 @@ html[data-theme-id] [data-app-sidebar] {
   }
 }
 
+/* A published theme, such as a plugin's, also colors the sidebar's row metadata, like thread
+   times. Built-in themes keep the sidebar's own step below read titles. */
+html[data-theme-published] [data-app-sidebar] {
+  --secondary-label: var(--app-theme-secondary-label);
+}
+
 /* T3 Chat's panel divider is deliberately pink, and its resize affordance
    keeps that color while hovered. Do not neutralize this branded edge. */
 html[data-theme-id="t3-chat"] [data-app-sidebar] {
diff --git a/apps/web/src/lib/workspaceFocus.ts b/apps/web/src/lib/workspaceFocus.ts
index e612a8ff54974..1db6790ec3c58 100644
--- a/apps/web/src/lib/workspaceFocus.ts
+++ b/apps/web/src/lib/workspaceFocus.ts
@@ -8,10 +8,32 @@ const FOCUS_BOUNDARY_SELECTOR =
 const FOCUSABLE_SELECTOR =
   'button:not(:disabled), a[href], input:not(:disabled), textarea:not(:disabled), select:not(:disabled), [contenteditable="true"], [tabindex]';
 
+/**
+ * Each area's `data-t3-region`, which plugin CSS targets. Plugins depend on these names, so they
+ * stay when an area's F6 name, label or element changes. A region goes on the element that paints
+ * the area, so an area painted by an element inside it is null here and that element names it.
+ */
+const T3_REGIONS = {
+  sidebar: null,
+  conversation: "timeline",
+  composer: null,
+  details: null,
+  panel: "right-panel",
+  terminal: "terminal",
+  home: null,
+  "pull-requests": "pull-requests",
+  settings: "settings",
+  "settings-nav": "settings-nav",
+} as const;
+
 /** Props that make an element one stop in the F6 cycle; `order` sets its place in the cycle. */
-export function workspaceAreaProps(name: string, order: number, label: string) {
+export function workspaceAreaProps(name: keyof typeof T3_REGIONS, order: number, label: string) {
+  const region = T3_REGIONS[name];
   return {
     "data-workspace-area": name,
+    // Left out rather than undefined, which would clear the region a component such as
+    // SidebarInset sets before spreading these props.
+    ...(region === null ? {} : { "data-t3-region": region }),
     "data-workspace-order": order,
     "aria-label": label,
     role: "region",
diff --git a/apps/web/src/plugins/PluginLoaderStarter.tsx b/apps/web/src/plugins/PluginLoaderStarter.tsx
new file mode 100644
index 0000000000000..0d86145cb0807
--- /dev/null
+++ b/apps/web/src/plugins/PluginLoaderStarter.tsx
@@ -0,0 +1,88 @@
+import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import type { EnvironmentId } from "@t3tools/contracts";
+import { useRouter } from "@tanstack/react-router";
+import { useEffect } from "react";
+
+import { followedPluginEnvironmentAtom, pluginUiEnvironmentsAtom } from "./pluginFollow";
+
+// Module level: React Compiler cannot compile a component that calls import() itself.
+const loadPluginWatch = () => import("./pluginWatch");
+const loadPluginLoader = () => import("./pluginLoader");
+const loadPluginStyles = () => import("./pluginStyles");
+
+const whenIdle = (run: () => void) => {
+  if (typeof window.requestIdleCallback === "function") {
+    const handle = window.requestIdleCallback(run);
+    return () => window.cancelIdleCallback(handle);
+  }
+  const handle = window.setTimeout(run, 1);
+  return () => window.clearTimeout(handle);
+};
+
+/**
+ * Follows the plugins of each environment this browser loads plugin UI from, the main one unless
+ * the user turned it off. The first one also supplies palette and keybinding commands.
+ */
+export function PluginLoaderStarter() {
+  const environmentIds = useAtomValue(pluginUiEnvironmentsAtom);
+  return environmentIds.map((environmentId, index) => (
+    <PluginEnvironmentLoader
+      key={environmentId}
+      environmentId={environmentId}
+      appWide={index === 0}
+    />
+  ));
+}
+
+/**
+ * Once the app is idle, downloads the web plugin runtime only when an active plugin of the
+ * environment has a web part, and the small stylesheet runtime only when one has a `styles` folder.
+ */
+function PluginEnvironmentLoader({
+  environmentId,
+  appWide,
+}: {
+  readonly environmentId: EnvironmentId;
+  readonly appWide: boolean;
+}) {
+  const router = useRouter();
+  const setFollowed = useAtomSet(followedPluginEnvironmentAtom);
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- starts and stops a runtime that lives outside React
+  useEffect(() => {
+    let cancelled = false;
+    const stops: Array<() => void> = [];
+    const cancelIdle = whenIdle(() => {
+      if (appWide) setFollowed(environmentId);
+      void loadPluginWatch().then(({ watchForPlugins, isLoadableWebPlugin, hasLoadableStyles }) => {
+        if (cancelled) return;
+        stops.push(
+          watchForPlugins(environmentId, isLoadableWebPlugin, () => {
+            void loadPluginLoader().then((module) => {
+              if (cancelled) return;
+              stops.push(
+                module.startPluginLoader(
+                  environmentId,
+                  (path) => router.history.push(path),
+                  appWide,
+                ),
+              );
+            });
+          }),
+          watchForPlugins(environmentId, hasLoadableStyles, () => {
+            void loadPluginStyles().then((module) => {
+              if (cancelled) return;
+              stops.push(module.startPluginStyles(environmentId));
+            });
+          }),
+        );
+      });
+    });
+    return () => {
+      cancelled = true;
+      cancelIdle();
+      if (appWide) setFollowed(null);
+      for (const stop of stops) stop();
+    };
+  }, [environmentId, appWide, router, setFollowed]);
+  return null;
+}
diff --git a/apps/web/src/plugins/PluginPanelMenuItems.tsx b/apps/web/src/plugins/PluginPanelMenuItems.tsx
new file mode 100644
index 0000000000000..c700b079ed798
--- /dev/null
+++ b/apps/web/src/plugins/PluginPanelMenuItems.tsx
@@ -0,0 +1,69 @@
+import { useAtomValue } from "@effect/atom-react";
+import type { EnvironmentId } from "@t3tools/contracts";
+import { useParams } from "@tanstack/react-router";
+import { Puzzle } from "lucide-react";
+
+import { MenuItem, MenuSeparator } from "../components/ui/menu";
+import { useRightPanelStore } from "../rightPanelStore";
+import { resolveThreadRouteTarget } from "../threadRoutes";
+import { pluginRightPanelsAtom } from "./pluginRegistry";
+
+/** Plugin right panels that can open in the routed thread, each with its open action. */
+function usePluginPanelEntries(environmentId: EnvironmentId | null) {
+  const panels = useAtomValue(pluginRightPanelsAtom(environmentId ?? ""));
+  const target = resolveThreadRouteTarget(useParams({ strict: false }));
+  if (target?.kind !== "server") return [];
+  const threadRef = target.threadRef;
+  return panels.map((panel) => ({
+    key: `${panel.pluginId}:${panel.name}`,
+    title: panel.title,
+    open: () =>
+      useRightPanelStore.getState().openPlugin(threadRef, {
+        pluginId: panel.pluginId,
+        panel: panel.name,
+        title: panel.title,
+      }),
+  }));
+}
+
+/** The add-panel menu's entries for right panels that web plugins registered. */
+export function PluginPanelMenuItems(props: {
+  readonly environmentId: EnvironmentId | null;
+  readonly onOpen: () => void;
+}) {
+  const entries = usePluginPanelEntries(props.environmentId);
+  if (entries.length === 0) return null;
+  return (
+    <>
+      <MenuSeparator />
+      {entries.map((entry) => (
+        <MenuItem
+          key={entry.key}
+          onClick={() => {
+            props.onOpen();
+            entry.open();
+          }}
+        >
+          <Puzzle />
+          {entry.title}
+        </MenuItem>
+      ))}
+    </>
+  );
+}
+
+/** The empty right panel's entries for plugin panels, styled like its built-in rows. */
+export function PluginPanelLauncherItems(props: { readonly environmentId: EnvironmentId | null }) {
+  const entries = usePluginPanelEntries(props.environmentId);
+  return entries.map((entry) => (
+    <button
+      key={entry.key}
+      type="button"
+      onClick={entry.open}
+      className="flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-(--control-radius) px-2.5 text-left text-sm transition-colors hover:bg-accent/60"
+    >
+      <Puzzle className="size-4 shrink-0" />
+      <span className="min-w-0 flex-1 truncate">{entry.title}</span>
+    </button>
+  ));
+}
diff --git a/apps/web/src/plugins/PluginPanelSurface.browser.test.tsx b/apps/web/src/plugins/PluginPanelSurface.browser.test.tsx
new file mode 100644
index 0000000000000..f08f507f51c85
--- /dev/null
+++ b/apps/web/src/plugins/PluginPanelSurface.browser.test.tsx
@@ -0,0 +1,96 @@
+import { EnvironmentId, PluginId, type PluginState } from "@t3tools/contracts";
+import { AsyncResult } from "effect/reactivity";
+import { describe, expect, it, vi } from "vite-plus/test";
+import { page } from "vite-plus/test/browser";
+
+import { render } from "../../test/render";
+
+const state = await vi.hoisted(async () => {
+  const { Atom, AsyncResult } = await import("effect/reactivity");
+  return {
+    live: Atom.make<AsyncResult.AsyncResult<{ readonly plugins: ReadonlyArray<PluginState> }>>(
+      AsyncResult.initial(),
+    ),
+  };
+});
+vi.mock(import("../state/plugins"), () => ({
+  pluginEnvironment: { pluginsLive: () => state.live } as never,
+}));
+
+import { AppAtomRegistryProvider, appAtomRegistry } from "../rpc/atomRegistry";
+import { PluginPanelSurface } from "./PluginPanelSurface";
+import { pluginUiChoicesAtom } from "./pluginFollow";
+import { registerPluginRightPanel, setPluginWebFailure } from "./pluginRegistry";
+
+const environmentId = EnvironmentId.make("environment:plugin-panel");
+
+const helloWeb = (status: PluginState["status"]): PluginState => ({
+  id: PluginId.make("hello-web"),
+  name: "Hello web",
+  version: "0.1.0",
+  permissions: [],
+  source: "dev",
+  enabled: status !== "disabled",
+  status,
+  hasServer: false,
+  hasWeb: true,
+  hasSettings: false,
+});
+
+const setList = (plugins: ReadonlyArray<PluginState>) =>
+  appAtomRegistry.set(state.live, AsyncResult.success({ plugins }));
+
+// Every case starts with no plugins listed yet and plugin UI loading from the environment.
+function setup() {
+  appAtomRegistry.set(state.live, AsyncResult.initial());
+  setPluginWebFailure(environmentId, "hello-web", undefined);
+  appAtomRegistry.set(pluginUiChoicesAtom, new Map([[environmentId, true]]));
+  return { [Symbol.dispose]: () => appAtomRegistry.set(pluginUiChoicesAtom, new Map()) };
+}
+
+const surface = () => (
+  <AppAtomRegistryProvider>
+    <PluginPanelSurface
+      environmentId={environmentId}
+      threadId="thread-1"
+      pluginId="hello-web"
+      panel="hello"
+      onClose={() => {}}
+    />
+  </AppAtomRegistryProvider>
+);
+
+describe("PluginPanelSurface", () => {
+  it("renders a plugin's panel, then a notice with a way out once the plugin unloads", async () => {
+    using _setup = setup();
+    setList([helloWeb("active")]);
+    const unregister = registerPluginRightPanel({
+      environmentId,
+      pluginId: "hello-web",
+      owner: { environmentId, pluginId: "hello-web", pluginName: "Hello web" },
+      name: "hello",
+      title: "Hello panel",
+      component: (props) => <p>Panel for {props.threadId}</p>,
+    });
+    using _panel = { [Symbol.dispose]: unregister };
+    await using _screen = await render(surface());
+
+    await expect.element(page.getByText("Panel for thread-1")).toBeVisible();
+    setList([helloWeb("disabled")]);
+    unregister();
+    await expect.element(page.getByText("Plugin not active")).toBeVisible();
+    await expect.element(page.getByRole("button", { name: "Close" })).toBeVisible();
+  });
+
+  it("shows a restored panel loading while its plugin starts, not a false notice", async () => {
+    using _setup = setup();
+    await using _screen = await render(surface());
+
+    await expect.element(page.getByText("Loading plugin")).toBeVisible();
+    setList([helloWeb("active")]);
+    await expect.element(page.getByText('Hello web is loading its "hello" panel.')).toBeVisible();
+    // A web part that fails to load is not coming, so the wait ends.
+    setPluginWebFailure(environmentId, "hello-web", "boom");
+    await expect.element(page.getByText("Plugin not active")).toBeVisible();
+  });
+});
diff --git a/apps/web/src/plugins/PluginPanelSurface.tsx b/apps/web/src/plugins/PluginPanelSurface.tsx
new file mode 100644
index 0000000000000..e4b360b858a98
--- /dev/null
+++ b/apps/web/src/plugins/PluginPanelSurface.tsx
@@ -0,0 +1,135 @@
+import { useAtomValue } from "@effect/atom-react";
+import type { EnvironmentId } from "@t3tools/contracts";
+import { AsyncResult } from "effect/reactivity";
+import { BlocksIcon } from "lucide-react";
+
+import { PluginRenderBoundary } from "./PluginRenderBoundary";
+import { pluginEnvironment } from "../state/plugins";
+import { primaryEnvironmentIdAtom } from "../state/primaryEnvironment";
+import { Button } from "../components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "../components/ui/empty";
+import { loadsPluginUi, pluginUiChoicesAtom } from "./pluginFollow";
+import {
+  pluginContributionKey,
+  pluginRightPanelAtom,
+  pluginRightPanelKey,
+  pluginWebFailuresAtom,
+  pluginWebLoadedAtom,
+} from "./pluginRegistry";
+
+function PluginPanelNotice(props: {
+  readonly title: string;
+  readonly description: string;
+  readonly onClose: () => void;
+}) {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <BlocksIcon />
+        </EmptyMedia>
+        <EmptyTitle>{props.title}</EmptyTitle>
+        <EmptyDescription>{props.description}</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button size="sm" variant="outline" onClick={props.onClose}>
+          Close
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+/**
+ * The plugin's name, or its id while the list loads or once it is uninstalled, and whether its
+ * panel may still register.
+ */
+function usePluginPanelState(environmentId: EnvironmentId, pluginId: string) {
+  const result = useAtomValue(pluginEnvironment.pluginsLive({ environmentId, input: {} }));
+  const loadsUi = loadsPluginUi(
+    useAtomValue(pluginUiChoicesAtom),
+    environmentId,
+    useAtomValue(primaryEnvironmentIdAtom),
+  );
+  const webFailed = useAtomValue(pluginWebFailuresAtom(pluginId)).has(environmentId);
+  const loaded = useAtomValue(pluginWebLoadedAtom(pluginContributionKey(environmentId, pluginId)));
+  const plugin = AsyncResult.isSuccess(result)
+    ? result.value.plugins.find((candidate) => candidate.id === pluginId)
+    : undefined;
+  const starting =
+    AsyncResult.isInitial(result) ||
+    (plugin?.hasWeb === true && (plugin.status === "active" || plugin.status === "loading"));
+  return {
+    name: plugin?.name ?? pluginId,
+    loading: loadsUi && !webFailed && !loaded && starting,
+  };
+}
+
+function PluginNotLoadedNotice(props: {
+  readonly environmentId: EnvironmentId;
+  readonly pluginId: string;
+  readonly panel: string;
+  readonly onClose: () => void;
+}) {
+  const { name, loading } = usePluginPanelState(props.environmentId, props.pluginId);
+  return loading ? (
+    <PluginPanelNotice
+      title="Loading plugin"
+      description={`${name} is loading its "${props.panel}" panel.`}
+      onClose={props.onClose}
+    />
+  ) : (
+    <PluginPanelNotice
+      title="Plugin not active"
+      description={`${name} is disabled or not loaded, so its "${props.panel}" panel is unavailable.`}
+      onClose={props.onClose}
+    />
+  );
+}
+
+/** A right panel a web plugin registered, or a notice while it loads or when it is not loaded. */
+export function PluginPanelSurface(props: {
+  readonly environmentId: EnvironmentId;
+  readonly threadId: string;
+  readonly pluginId: string;
+  readonly panel: string;
+  readonly onClose: () => void;
+}) {
+  const entry = useAtomValue(
+    pluginRightPanelAtom(pluginRightPanelKey(props.environmentId, props.pluginId, props.panel)),
+  );
+  if (entry === undefined) {
+    return (
+      <PluginNotLoadedNotice
+        environmentId={props.environmentId}
+        pluginId={props.pluginId}
+        panel={props.panel}
+        onClose={props.onClose}
+      />
+    );
+  }
+  const Panel = entry.component;
+  return (
+    <PluginRenderBoundary
+      owner={entry.owner}
+      what={`Its panel ${entry.title}`}
+      resetKeys={[entry]}
+      fallback={
+        <PluginPanelNotice
+          title="Plugin panel failed"
+          description={`${entry.title} from ${entry.owner.pluginName} stopped with an error.`}
+          onClose={props.onClose}
+        />
+      }
+    >
+      <Panel threadId={props.threadId} />
+    </PluginRenderBoundary>
+  );
+}
diff --git a/apps/web/src/plugins/PluginRenderBoundary.tsx b/apps/web/src/plugins/PluginRenderBoundary.tsx
new file mode 100644
index 0000000000000..b32a00a7d2aac
--- /dev/null
+++ b/apps/web/src/plugins/PluginRenderBoundary.tsx
@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+
+import { RenderErrorBoundary } from "../components/RenderErrorBoundary";
+import { toastManager } from "../components/ui/toast";
+import { type PluginOwner, setPluginWebFailure } from "./pluginRegistry";
+
+// Once per plugin start: a panel that breaks on every render would otherwise report each time.
+const reported = new WeakSet<PluginOwner>();
+
+// On the plugin's row in Settings and in a toast, since the fallback quietly takes the plugin's
+// place.
+const reportRenderFailure = (owner: PluginOwner, what: string, error: unknown) => {
+  if (reported.has(owner)) return;
+  reported.add(owner);
+  const reason = error instanceof Error ? error.message : String(error);
+  const message = `${what} stopped with an error: ${reason}`;
+  setPluginWebFailure(owner.environmentId, owner.pluginId, message);
+  toastManager.add({
+    type: "error",
+    title: `${owner.pluginName} hit an error`,
+    description: `${what} stopped working where it failed, until the plugin reloads.`,
+  });
+};
+
+/**
+ * Draws something a plugin contributed, and `fallback` once it throws. `what` names it for
+ * people, such as "Its panel Notes".
+ */
+export function PluginRenderBoundary(props: {
+  readonly owner: PluginOwner;
+  readonly what: string;
+  readonly fallback: ReactNode;
+  readonly resetKeys: ReadonlyArray<unknown>;
+  readonly children: ReactNode;
+}) {
+  return (
+    <RenderErrorBoundary
+      resetKeys={props.resetKeys}
+      fallback={props.fallback}
+      onError={(error) => reportRenderFailure(props.owner, props.what, error)}
+    >
+      {props.children}
+    </RenderErrorBoundary>
+  );
+}
diff --git a/apps/web/src/plugins/pluginFiles.ts b/apps/web/src/plugins/pluginFiles.ts
new file mode 100644
index 0000000000000..13a22f7ae4c31
--- /dev/null
+++ b/apps/web/src/plugins/pluginFiles.ts
@@ -0,0 +1,122 @@
+import type { PreparedHttpAuthorization } from "@t3tools/client-runtime/connection";
+import { resolveAssetUrl } from "@t3tools/client-runtime/state/assets";
+import { runAtomCommand, squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import { type EnvironmentId, PluginMutationResult, type PluginState } from "@t3tools/contracts";
+import * as Schema from "effect/Schema";
+
+import { appAtomRegistry } from "../rpc/atomRegistry";
+import { pluginEnvironment } from "../state/plugins";
+import { readPreparedConnection } from "../state/session";
+import type { PluginFolderFile } from "./pluginFolders";
+
+// Bearer and cookie sessions can fetch plugin files directly. A DPoP proof needs the relay
+// signer, which only the client runtime holds.
+async function pluginFileRequestInit(
+  authorization: PreparedHttpAuthorization | null,
+  url: URL,
+): Promise<RequestInit> {
+  if (authorization === null) return { credentials: "include" };
+  if (authorization._tag === "Bearer") {
+    return { headers: { authorization: `Bearer ${authorization.token}` } };
+  }
+  const headers = await runAtomCommand(
+    appAtomRegistry,
+    pluginEnvironment.pluginFileHeaders,
+    { authorization, url: url.href },
+    { reportFailure: false },
+  );
+  if (headers._tag !== "Success")
+    throw new Error("Could not authorize the request over T3 Connect.");
+  return { headers: { ...headers.value } };
+}
+
+class PluginFileRequestError extends Error {
+  constructor(
+    readonly status: number,
+    filePath: string,
+  ) {
+    super(`The request for ${filePath} failed with ${status}.`);
+  }
+}
+
+// A dropped connection or a gateway error, such as one bad gateway over T3 Connect, can pass.
+const isPassingDownloadFailure = (error: unknown) =>
+  error instanceof TypeError ||
+  (error instanceof PluginFileRequestError && [502, 503, 504].includes(error.status));
+const DOWNLOAD_RETRY_DELAYS_MS = [1_000, 5_000, 30_000];
+
+/**
+ * Fetches a file the plugin's server serves with the connection's credentials. A file whose URL
+ * names its contents, such as the web bundle, is one the server lets browsers cache for good.
+ */
+export async function fetchPluginFile(
+  environmentId: EnvironmentId,
+  plugin: PluginState,
+  filePath: string,
+  revision = plugin.version ?? "0",
+): Promise<Response> {
+  const connection = readPreparedConnection(environmentId);
+  if (connection === null) throw new Error("The environment is not connected.");
+  const authorization = connection.httpAuthorization;
+  const url = new URL(
+    `/api/plugins/${encodeURIComponent(plugin.id)}${filePath}`,
+    connection.httpBaseUrl,
+  );
+  url.searchParams.set("v", revision);
+  const response = await fetch(url, await pluginFileRequestInit(authorization, url));
+  if (!response.ok) throw new PluginFileRequestError(response.status, filePath);
+  return response;
+}
+
+/**
+ * Runs `download` again after a failure that can pass, 1, 5 and then 30 seconds later. Resolves
+ * undefined when `cancelled` turns true during a wait.
+ */
+export async function withDownloadRetries<A>(
+  download: () => Promise<A>,
+  cancelled: () => boolean,
+): Promise<A | undefined> {
+  for (const delay of [...DOWNLOAD_RETRY_DELAYS_MS, undefined]) {
+    try {
+      return await download();
+    } catch (error) {
+      if (delay === undefined || !isPassingDownloadFailure(error)) throw error;
+      await new Promise((resume) => setTimeout(resume, delay));
+      if (cancelled()) return undefined;
+    }
+  }
+  return undefined;
+}
+
+const decodeMutationResult = Schema.decodeUnknownSync(Schema.fromJsonString(PluginMutationResult));
+
+/**
+ * Installs a dropped plugin folder on the environment. The files go over HTTP to a URL the server
+ * signs, which needs no other credentials, so a large folder does not hold up the WebSocket.
+ */
+export async function uploadPluginFolder(
+  environmentId: EnvironmentId,
+  files: ReadonlyArray<PluginFolderFile>,
+): Promise<PluginState> {
+  const minted = await runAtomCommand(
+    appAtomRegistry,
+    pluginEnvironment.createPluginUploadUrl,
+    { environmentId, input: {} },
+    { reportFailure: false },
+  );
+  if (minted._tag !== "Success") {
+    const error = squashAtomCommandFailure(minted);
+    throw error instanceof Error ? error : new Error("Could not start the upload.");
+  }
+  const connection = readPreparedConnection(environmentId);
+  const url =
+    connection === null ? null : resolveAssetUrl(connection.httpBaseUrl, minted.value.relativeUrl);
+  if (url === null) throw new Error("The environment is not connected.");
+  const body = new FormData();
+  // Escaped, so no browser or parser changes a path's quotes, slashes or other characters.
+  for (const { path, file } of files) body.append("file", file, encodeURIComponent(path));
+  const response = await fetch(url, { method: "POST", body });
+  const text = await response.text();
+  if (!response.ok) throw new Error(text || `The upload failed with ${response.status}.`);
+  return decodeMutationResult(text).plugin;
+}
diff --git a/apps/web/src/plugins/pluginFolders.test.ts b/apps/web/src/plugins/pluginFolders.test.ts
new file mode 100644
index 0000000000000..c081b99b82029
--- /dev/null
+++ b/apps/web/src/plugins/pluginFolders.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it } from "@effect/vitest";
+
+import { droppedFolders, pickedFolder } from "./pluginFolders";
+
+const file = (name: string, text: string) => ({
+  isFile: true,
+  isDirectory: false,
+  name,
+  file: (resolve: (file: File) => void) => resolve(new File([text], name)),
+});
+
+// Hands out entries 2 at a time, like Chromium does 100 at a time.
+const folder = (name: string, entries: ReadonlyArray<object>) => ({
+  isFile: false,
+  isDirectory: true,
+  name,
+  createReader: () => {
+    let next = 0;
+    return {
+      readEntries: (resolve: (entries: ReadonlyArray<object>) => void) => {
+        resolve(entries.slice(next, next + 2));
+        next += 2;
+      },
+    };
+  },
+});
+
+const drop = (entry: object) =>
+  droppedFolders({
+    items: [{ kind: "file", webkitGetAsEntry: () => entry }],
+  } as unknown as DataTransfer)[0]!;
+
+const picked = (path: string, text: string) =>
+  Object.defineProperty(new File([text], path.split("/").at(-1)!), "webkitRelativePath", {
+    value: path,
+  });
+
+describe("plugin folders", () => {
+  it("reads every batch of every dropped folder and leaves out git history and dependencies", async () => {
+    const files = await drop(
+      folder("surface", [
+        file("t3-plugin.json", "{}"),
+        file("web.js", "draw()"),
+        folder("themes", [file("a.json", "a"), file("b.json", "b"), file("c.json", "c")]),
+        folder(".git", [file("HEAD", "ref")]),
+        folder("node_modules", [folder("react", [file("index.js", "react")])]),
+      ]),
+    ).read();
+    expect(files.map((entry) => entry.path)).toEqual([
+      "t3-plugin.json",
+      "web.js",
+      "themes/a.json",
+      "themes/b.json",
+      "themes/c.json",
+    ]);
+    expect(await files[1]?.file.text()).toBe("draw()");
+  });
+
+  it("names a picked folder's files from inside it", async () => {
+    const folder = pickedFolder([
+      picked("surface/t3-plugin.json", "{}"),
+      picked("surface/themes/dark.json", "dark"),
+      picked("surface/.git/HEAD", "ref"),
+      picked("surface/node_modules/react/index.js", "react"),
+    ]);
+    expect(folder?.name).toBe("surface");
+    expect((await folder!.read()).map((entry) => entry.path)).toEqual([
+      "t3-plugin.json",
+      "themes/dark.json",
+    ]);
+  });
+
+  it("refuses a folder that is not a plugin", async () => {
+    await expect(
+      drop(folder("photos", [file("a.png", ""), folder("2024", [])])).read(),
+    ).rejects.toThrow("photos has no t3-plugin.json");
+    await expect(pickedFolder([picked("photos/a.png", "")])!.read()).rejects.toThrow(
+      "photos has no t3-plugin.json",
+    );
+  });
+});
diff --git a/apps/web/src/plugins/pluginFolders.ts b/apps/web/src/plugins/pluginFolders.ts
new file mode 100644
index 0000000000000..af46b2574e879
--- /dev/null
+++ b/apps/web/src/plugins/pluginFolders.ts
@@ -0,0 +1,116 @@
+import { PLUGIN_UPLOAD_MAX_BYTES, PLUGIN_UPLOAD_MAX_FILES } from "@t3tools/contracts";
+
+const MANIFEST_FILE = "t3-plugin.json";
+const MAX_DEPTH = 32;
+
+/** A plugin folder the user dropped or picked, listed as the files `uploadPluginFolder` sends. */
+export interface PluginFolder {
+  readonly name: string;
+  /** Rejects with an error meant for the user when the folder is not a plugin or too large. */
+  readonly read: () => Promise<ReadonlyArray<PluginFolderFile>>;
+}
+
+export interface PluginFolderFile {
+  /** Relative to the plugin folder, with `/` separators. */
+  readonly path: string;
+  readonly file: File;
+}
+
+// Version control history and installed dependencies are never part of a built plugin.
+const LEFT_OUT = new Set([".git", "node_modules"]);
+const isLeftOut = (path: string) => path.split("/").some((segment) => LEFT_OUT.has(segment));
+
+const notAPlugin = (name: string) =>
+  new Error(`${name} has no ${MANIFEST_FILE}, so it is not a T3 Code plugin.`);
+
+// Names the top-level entry holding the most bytes, which is usually the reason.
+const tooLarge = (name: string, files: ReadonlyArray<PluginFolderFile>) => {
+  const bytesByEntry = new Map<string, number>();
+  for (const { path, file } of files) {
+    const entry = path.split("/")[0] ?? path;
+    bytesByEntry.set(entry, (bytesByEntry.get(entry) ?? 0) + file.size);
+  }
+  const [largest] = [...bytesByEntry].toSorted((a, b) => b[1] - a[1]);
+  return new Error(
+    `${name} is too large. A plugin folder can have up to ${PLUGIN_UPLOAD_MAX_FILES} files and ${PLUGIN_UPLOAD_MAX_BYTES / 1024 / 1024} MB${largest === undefined ? "" : `, and most of it is in ${largest[0]}`}. Build the plugin and add the folder with only what it needs.`,
+  );
+};
+
+function withinLimits(name: string, files: ReadonlyArray<PluginFolderFile>) {
+  const bytes = files.reduce((total, { file }) => total + file.size, 0);
+  if (files.length > PLUGIN_UPLOAD_MAX_FILES || bytes > PLUGIN_UPLOAD_MAX_BYTES) {
+    throw tooLarge(name, files);
+  }
+  return files;
+}
+
+// `readEntries` hands out a folder's entries in batches and signals the end with an empty one.
+async function entriesOf(folder: FileSystemDirectoryEntry) {
+  const reader = folder.createReader();
+  const entries: Array<FileSystemEntry> = [];
+  for (;;) {
+    const batch = await new Promise<Array<FileSystemEntry>>((resolve, reject) =>
+      reader.readEntries(resolve, reject),
+    );
+    if (batch.length === 0) return entries;
+    entries.push(...batch);
+  }
+}
+
+async function readDroppedFolder(folder: FileSystemDirectoryEntry) {
+  const top = await entriesOf(folder);
+  // Checked first, so dropping a large folder that is not a plugin reads nothing more.
+  if (!top.some((entry) => entry.isFile && entry.name === MANIFEST_FILE)) {
+    throw notAPlugin(folder.name);
+  }
+  const files: Array<PluginFolderFile> = [];
+  let bytes = 0;
+  const visit = async (entries: ReadonlyArray<FileSystemEntry>, prefix: string, depth: number) => {
+    if (depth > MAX_DEPTH) throw tooLarge(folder.name, files);
+    for (const entry of entries) {
+      const path = `${prefix}${entry.name}`;
+      if (entry.isDirectory) {
+        if (isLeftOut(path)) continue;
+        await visit(await entriesOf(entry as FileSystemDirectoryEntry), `${path}/`, depth + 1);
+        continue;
+      }
+      const file = await new Promise<File>((resolve, reject) =>
+        (entry as FileSystemFileEntry).file(resolve, reject),
+      );
+      bytes += file.size;
+      // Checked while walking, so a huge folder stops early.
+      if (files.length >= PLUGIN_UPLOAD_MAX_FILES || bytes > PLUGIN_UPLOAD_MAX_BYTES) {
+        throw tooLarge(folder.name, [...files, { path, file }]);
+      }
+      files.push({ path, file });
+    }
+  };
+  await visit(top, "", 0);
+  return withinLimits(folder.name, files);
+}
+
+/** The dropped folders. Read during the drop event: the browser empties the transfer after it. */
+export function droppedFolders(dataTransfer: DataTransfer): ReadonlyArray<PluginFolder> {
+  return Array.from(dataTransfer.items).flatMap((item) => {
+    const entry = item.kind === "file" ? item.webkitGetAsEntry() : null;
+    if (entry?.isDirectory !== true) return [];
+    const folder = entry as FileSystemDirectoryEntry;
+    return [{ name: folder.name, read: () => readDroppedFolder(folder) }];
+  });
+}
+
+/** The folder picked with a `webkitdirectory` file input, from the files it lists. */
+export function pickedFolder(files: ReadonlyArray<File>): PluginFolder | undefined {
+  const name = files[0]?.webkitRelativePath.split("/")[0];
+  if (name === undefined || name === "") return undefined;
+  return {
+    name,
+    read: async () => {
+      const inside = files
+        .map((file) => ({ path: file.webkitRelativePath.slice(name.length + 1), file }))
+        .filter(({ path }) => !isLeftOut(path));
+      if (!inside.some(({ path }) => path === MANIFEST_FILE)) throw notAPlugin(name);
+      return withinLimits(name, inside);
+    },
+  };
+}
diff --git a/apps/web/src/plugins/pluginFollow.test.ts b/apps/web/src/plugins/pluginFollow.test.ts
new file mode 100644
index 0000000000000..5da9ab33291c5
--- /dev/null
+++ b/apps/web/src/plugins/pluginFollow.test.ts
@@ -0,0 +1,27 @@
+import { EnvironmentId } from "@t3tools/contracts";
+import { describe, expect, it } from "vite-plus/test";
+
+import { chosenPluginUiEnvironments, withPluginUiChoice } from "./pluginFollow";
+
+describe("plugin UI choices", () => {
+  it("loads the main environment until it is turned off, and others only once turned on", () => {
+    const main = EnvironmentId.make("environment:main");
+    const remote = EnvironmentId.make("environment:remote");
+    const other = EnvironmentId.make("environment:other");
+    const none = new Map<EnvironmentId, boolean>();
+
+    expect(chosenPluginUiEnvironments(none, main)).toEqual([main]);
+    expect(chosenPluginUiEnvironments(none, null)).toEqual([]);
+    const both = withPluginUiChoice(
+      withPluginUiChoice(none, other, true, main),
+      remote,
+      true,
+      main,
+    );
+    // The main environment first, then the others in the order chosen.
+    expect(chosenPluginUiEnvironments(both, main)).toEqual([main, other, remote]);
+    const mainOff = withPluginUiChoice(both, main, false, main);
+    expect(chosenPluginUiEnvironments(mainOff, main)).toEqual([other, remote]);
+    expect(withPluginUiChoice(mainOff, main, true, main)).toEqual(both);
+  });
+});
diff --git a/apps/web/src/plugins/pluginFollow.ts b/apps/web/src/plugins/pluginFollow.ts
new file mode 100644
index 0000000000000..3bae44cb1cacc
--- /dev/null
+++ b/apps/web/src/plugins/pluginFollow.ts
@@ -0,0 +1,116 @@
+import { EnvironmentId } from "@t3tools/contracts";
+import * as Option from "effect/Option";
+import * as Schema from "effect/Schema";
+import { Atom } from "effect/reactivity";
+
+import { primaryEnvironmentIdAtom } from "../state/primaryEnvironment";
+import { serverEnvironment } from "../state/server";
+
+/**
+ * The environment app-wide plugin contributions come from: palette and keybinding commands.
+ * `PluginLoaderStarter` sets it once the app is idle, so readers of its plugins open no stream
+ * during startup.
+ */
+export const followedPluginEnvironmentAtom = Atom.make<EnvironmentId | null>(null).pipe(
+  Atom.keepAlive,
+  Atom.withLabel("web-followed-plugin-environment"),
+);
+
+/** Choices the user made in Settings; an environment left out keeps its default. */
+type PluginUiChoices = ReadonlyMap<EnvironmentId, boolean>;
+
+const CHOICES_KEY = "t3.plugins.uiEnvironments";
+const isEnvironmentId = Schema.is(EnvironmentId);
+
+// Reading localStorage throws where the browser blocks storage; only the main environment loads.
+const choicesStorage = () => {
+  try {
+    return window.localStorage;
+  } catch {
+    return undefined;
+  }
+};
+
+const readChoices = (): PluginUiChoices => {
+  try {
+    const stored: unknown = JSON.parse(choicesStorage()?.getItem(CHOICES_KEY) ?? "{}");
+    if (typeof stored !== "object" || stored === null) return new Map();
+    return new Map(
+      Object.entries(stored).flatMap(([environmentId, on]) =>
+        isEnvironmentId(environmentId) && typeof on === "boolean" ? [[environmentId, on]] : [],
+      ),
+    );
+  } catch {
+    return new Map();
+  }
+};
+
+/**
+ * Which environments this browser loads plugin UI from, kept in this browser alone because their
+ * plugin code runs in this window with every connection's credentials.
+ */
+export const pluginUiChoicesAtom = Atom.writable(readChoices, (ctx, choices: PluginUiChoices) => {
+  try {
+    if (choices.size === 0) choicesStorage()?.removeItem(CHOICES_KEY);
+    else choicesStorage()?.setItem(CHOICES_KEY, JSON.stringify(Object.fromEntries(choices)));
+  } catch {
+    // A full or blocked storage keeps the choice for this page only.
+  }
+  ctx.setSelf(choices);
+}).pipe(Atom.keepAlive, Atom.withLabel("web-plugin-ui-choices"));
+
+/** Whether plugin UI loads from the environment: the main one unless turned off, others once on. */
+export const loadsPluginUi = (
+  choices: PluginUiChoices,
+  environmentId: EnvironmentId,
+  primaryEnvironmentId: EnvironmentId | null,
+) => choices.get(environmentId) ?? environmentId === primaryEnvironmentId;
+
+/** `choices` with the environment turned on or off; a choice equal to the default is dropped. */
+export function withPluginUiChoice(
+  choices: PluginUiChoices,
+  environmentId: EnvironmentId,
+  on: boolean,
+  primaryEnvironmentId: EnvironmentId | null,
+): PluginUiChoices {
+  const next = new Map(choices);
+  next.delete(environmentId);
+  if (on !== (environmentId === primaryEnvironmentId)) next.set(environmentId, on);
+  return next;
+}
+
+/** The chosen environments in order: the main one first, then the others in the order chosen. */
+export const chosenPluginUiEnvironments = (
+  choices: PluginUiChoices,
+  primaryEnvironmentId: EnvironmentId | null,
+): ReadonlyArray<EnvironmentId> => [
+  ...(primaryEnvironmentId !== null &&
+  loadsPluginUi(choices, primaryEnvironmentId, primaryEnvironmentId)
+    ? [primaryEnvironmentId]
+    : []),
+  ...[...choices].flatMap(([environmentId, on]) =>
+    on && environmentId !== primaryEnvironmentId ? [environmentId] : [],
+  ),
+];
+
+/**
+ * The chosen environments that run plugins, in `chosenPluginUiEnvironments` order. Each loads its
+ * plugins' web halves and styles; the first also supplies the app-wide contributions.
+ */
+export const pluginUiEnvironmentsAtom = Atom.make((get): ReadonlyArray<EnvironmentId> => {
+  const next = chosenPluginUiEnvironments(
+    get(pluginUiChoicesAtom),
+    get(primaryEnvironmentIdAtom),
+  ).filter(
+    (environmentId) =>
+      get(serverEnvironment.configValueAtom(environmentId))?.environment.capabilities.plugins ===
+      true,
+  );
+  // Config pushes recompute this; the same list keeps every loader running.
+  const previous = Option.getOrNull(get.self<ReadonlyArray<EnvironmentId>>());
+  return previous !== null &&
+    previous.length === next.length &&
+    previous.every((environmentId, index) => environmentId === next[index])
+    ? previous
+    : next;
+}).pipe(Atom.withLabel("web-plugin-ui-environments"));
diff --git a/apps/web/src/plugins/pluginLoader.browser.test.ts b/apps/web/src/plugins/pluginLoader.browser.test.ts
new file mode 100644
index 0000000000000..6953620bbdfef
--- /dev/null
+++ b/apps/web/src/plugins/pluginLoader.browser.test.ts
@@ -0,0 +1,360 @@
+import { EnvironmentId, PluginId, type PluginState } from "@t3tools/contracts";
+import { AsyncResult, Atom } from "effect/reactivity";
+import { createElement } from "react";
+import { describe, expect, it, vi } from "vite-plus/test";
+import { userEvent } from "vite-plus/test/browser";
+
+import helloWebSource from "../../../../packages/plugin-sdk/fixtures/hello-web/web.js?raw";
+import { fakeTimers, render } from "../../test/render";
+
+vi.mock(import("../state/session"), async (original) => ({
+  ...(await original()),
+  readPreparedConnection: ((environmentId: string) => ({
+    httpBaseUrl: "http://plugins.test/",
+    httpAuthorization: environmentId.endsWith(":relay")
+      ? { _tag: "Dpop", accessToken: "relay-token" }
+      : { _tag: "Bearer", token: "token" },
+  })) as never,
+}));
+const state = await vi.hoisted(async () => {
+  const { Atom, AsyncResult } = await import("effect/reactivity");
+  return {
+    live: Atom.make<AsyncResult.AsyncResult<{ readonly plugins: ReadonlyArray<PluginState> }>>(
+      AsyncResult.initial(),
+    ),
+    // Computed only when something reads it, like the real subscription stream.
+    channel: Atom.make(() => AsyncResult.success({ value: "first value" })),
+  };
+});
+vi.mock(import("../state/plugins"), () => ({
+  pluginEnvironment: {
+    pluginsLive: () => state.live,
+    pluginChannel: () => state.channel,
+    pluginFileHeaders: {
+      label: "plugin-file-headers",
+      run: async (_registry: unknown, input: { readonly url: string }) =>
+        AsyncResult.success({ authorization: "DPoP relay-token", dpop: `proof for ${input.url}` }),
+    },
+  } as never,
+}));
+
+import { AppAtomRegistryProvider, appAtomRegistry } from "../rpc/atomRegistry";
+import { PluginPanelSurface } from "./PluginPanelSurface";
+import { pluginUiChoicesAtom } from "./pluginFollow";
+import { startPluginLoader } from "./pluginLoader";
+import {
+  pluginCommandsAtom,
+  pluginContributionKey,
+  pluginRightPanelAtom,
+  pluginRightPanelKey,
+  pluginRightPanelsAtom,
+  pluginSettingsPanelAtom,
+  pluginWebFailuresAtom,
+} from "./pluginRegistry";
+
+const webPlugin = (id: string): PluginState => ({
+  id: PluginId.make(id),
+  name: id,
+  version: "0.1.0",
+  permissions: [],
+  source: "dev",
+  enabled: true,
+  status: "active",
+  hasServer: false,
+  hasWeb: true,
+  hasSettings: false,
+});
+
+// Every case starts with no plugins listed.
+function setup() {
+  appAtomRegistry.set(state.live, AsyncResult.initial());
+}
+
+describe("startPluginLoader", () => {
+  it("loads active web plugins, runs their commands, records one that fails, and unloads everything when stopped", async () => {
+    setup();
+    const navigate = vi.fn();
+    // A bundle that never arrives must not hold back the plugins after it.
+    let releaseHungBundle: (response: Response) => void = () => {};
+    const hungBundle = new Promise<Response>((resolve) => {
+      releaseHungBundle = resolve;
+    });
+    using fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (input) =>
+        String(input).includes("/hung-web/")
+          ? hungBundle
+          : String(input).includes("/hello-web/")
+            ? new Response(helloWebSource)
+            : String(input).includes("/no-activate-web/")
+              ? new Response("export default {};")
+              : new Response("missing", { status: 500 }),
+      );
+    const environmentId = EnvironmentId.make("environment:plugin-loader");
+    const helloPanel = pluginRightPanelAtom(
+      pluginRightPanelKey(environmentId, "hello-web", "hello"),
+    );
+    const stop = startPluginLoader(environmentId, navigate, true);
+    using _loader = { [Symbol.dispose]: stop };
+
+    appAtomRegistry.set(
+      state.live,
+      AsyncResult.success({
+        plugins: [
+          webPlugin("hung-web"),
+          webPlugin("hello-web"),
+          { ...webPlugin("broken-web"), revision: 3 },
+          { ...webPlugin("no-activate-web"), revision: 4 },
+        ],
+      }),
+    );
+
+    await vi.waitFor(() => {
+      expect(appAtomRegistry.get(helloPanel)?.title).toBe("Hello panel");
+      expect(appAtomRegistry.get(pluginWebFailuresAtom("broken-web")).get(environmentId)).toBe(
+        "The request for /web.js failed with 500.",
+      );
+      expect(appAtomRegistry.get(pluginWebFailuresAtom("no-activate-web")).get(environmentId)).toBe(
+        "The web bundle does not export a plugin with an activate function.",
+      );
+    });
+    expect(String(fetchSpy.mock.calls[1]?.[0])).toBe(
+      "http://plugins.test/api/plugins/hello-web/web.js?v=0.1.0",
+    );
+    expect(fetchSpy.mock.calls[1]?.[1]).toEqual({ headers: { authorization: "Bearer token" } });
+    // A plugin's atoms come from the app's own copy of effect, so the app's registry runs them.
+    expect(Reflect.get(globalThis, "__t3PluginHost")).toMatchObject({ atom: { make: Atom.make } });
+    // The fixture typechecks against the SDK's hand-written atom types, so its settings panel
+    // checks that effect's functions and hooks still behave as those types say.
+    const helloSettings = appAtomRegistry.get(
+      pluginSettingsPanelAtom(pluginContributionKey(environmentId, "hello-web")),
+    )!.component;
+    const settingsPanel = () =>
+      createElement(AppAtomRegistryProvider, null, createElement(helloSettings));
+    {
+      await using screen = await render(settingsPanel());
+      const sayHello = screen.getByRole("button", { name: "Say hello" });
+      for (let press = 0; press < 4; press++) await userEvent.click(sayHello);
+      await expect.element(screen.getByText("Hellos: 3")).toBeVisible();
+      await userEvent.click(screen.getByRole("button", { name: "Reset" }));
+      await expect.element(screen.getByText("Hellos: 0")).toBeVisible();
+      await userEvent.click(sayHello);
+      // The count stays in the registry once nothing reads it.
+      await screen.rerender(null);
+      await screen.rerender(settingsPanel());
+      await expect.element(screen.getByText("Hellos: 1")).toBeVisible();
+    }
+
+    const [command] = appAtomRegistry.get(pluginCommandsAtom(environmentId));
+    expect(command?.command).toBe("plugin.hello-web.open-settings");
+    command?.run();
+    await vi.waitFor(() => expect(navigate).toHaveBeenCalledWith("/settings/plugins"));
+
+    expect(document.querySelectorAll('style[data-plugin="hello-web"]')).toHaveLength(1);
+
+    // Turning a plugin off takes effect while another still hangs. A failed download is tried
+    // again on that change; a bundle that downloaded and then failed waits for a restart.
+    const fetches = (pluginId: string) =>
+      fetchSpy.mock.calls.filter(([input]) => String(input).includes(`/${pluginId}/`)).length;
+    expect(fetches("broken-web")).toBe(1);
+    expect(fetches("no-activate-web")).toBe(1);
+    appAtomRegistry.set(
+      state.live,
+      AsyncResult.success({
+        plugins: [
+          webPlugin("hung-web"),
+          { ...webPlugin("broken-web"), revision: 3 },
+          { ...webPlugin("no-activate-web"), revision: 4 },
+        ],
+      }),
+    );
+    await vi.waitFor(() => expect(appAtomRegistry.get(helloPanel)).toBeUndefined());
+    await vi.waitFor(() => expect(fetches("broken-web")).toBe(2));
+    expect(fetches("no-activate-web")).toBe(1);
+
+    stop();
+    releaseHungBundle(new Response("missing", { status: 500 }));
+    expect(document.querySelectorAll('style[data-plugin="hello-web"]')).toHaveLength(0);
+    expect(appAtomRegistry.get(helloPanel)).toBeUndefined();
+    expect(appAtomRegistry.get(pluginCommandsAtom(environmentId))).toEqual([]);
+  });
+
+  it("tries a download again after a bad gateway", async () => {
+    setup();
+    let badGateways = 1;
+    using _fetch = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () =>
+        badGateways-- > 0
+          ? new Response("bad gateway", { status: 502 })
+          : new Response(helloWebSource),
+      );
+    using _timers = fakeTimers();
+    const environmentId = EnvironmentId.make("environment:plugin-loader-retry");
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [webPlugin("hello-web")] }));
+    using _loader = { [Symbol.dispose]: startPluginLoader(environmentId, vi.fn(), true) };
+
+    await vi.advanceTimersByTimeAsync(1_000);
+    await vi.waitFor(() =>
+      expect(appAtomRegistry.get(pluginCommandsAtom(environmentId))).toHaveLength(1),
+    );
+    expect(
+      appAtomRegistry.get(pluginWebFailuresAtom("hello-web")).get(environmentId),
+    ).toBeUndefined();
+  });
+
+  it("reloads a restarted plugin and undoes what it registers after unloading", async () => {
+    setup();
+    // The first start registers only when the test releases it, after a restart replaced it.
+    const slowSource = `export default { activate(api) {
+      const settings = () => api.settings.registerPanel(() => null);
+      if (globalThis.__releaseSlowPlugin) return settings();
+      return new Promise((release) => { globalThis.__releaseSlowPlugin = release; }).then(() => {
+        settings();
+        api.rightPanel.register({ name: "slow", title: "Slow", component: () => null });
+      });
+    } };`;
+    using fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (input) =>
+        String(input).includes("/hello-web/")
+          ? new Response(helloWebSource)
+          : new Response(slowSource),
+      );
+    const bundleRequests = (pluginId: string) =>
+      fetchSpy.mock.calls.filter(([input]) => String(input).includes(`/${pluginId}/`)).length;
+    const environmentId = EnvironmentId.make("environment:plugin-loader-reload");
+    const stop = startPluginLoader(environmentId, vi.fn(), true);
+    using _loader = { [Symbol.dispose]: stop };
+
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [webPlugin("hello-web")] }));
+    await vi.waitFor(() =>
+      expect(appAtomRegistry.get(pluginCommandsAtom(environmentId))).toHaveLength(1),
+    );
+    appAtomRegistry.set(
+      state.live,
+      AsyncResult.success({ plugins: [{ ...webPlugin("hello-web"), revision: 2 }] }),
+    );
+    await vi.waitFor(() => expect(bundleRequests("hello-web")).toBe(2));
+
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [webPlugin("slow-web")] }));
+    await vi.waitFor(() =>
+      expect(Reflect.get(globalThis, "__releaseSlowPlugin")).toBeTypeOf("function"),
+    );
+    appAtomRegistry.set(
+      state.live,
+      AsyncResult.success({ plugins: [{ ...webPlugin("slow-web"), revision: 2 }] }),
+    );
+    const settingsPanel = pluginSettingsPanelAtom(pluginContributionKey(environmentId, "slow-web"));
+    await vi.waitFor(() => expect(appAtomRegistry.get(settingsPanel)).toBeDefined());
+    const release = Reflect.get(globalThis, "__releaseSlowPlugin") as () => void;
+    Reflect.deleteProperty(globalThis, "__releaseSlowPlugin");
+    release();
+    await Promise.resolve();
+    expect(appAtomRegistry.get(settingsPanel)).toBeDefined();
+    expect(
+      appAtomRegistry.get(
+        pluginRightPanelAtom(pluginRightPanelKey(environmentId, "slow-web", "slow")),
+      ),
+    ).toBeUndefined();
+    stop();
+    expect(appAtomRegistry.get(settingsPanel)).toBeUndefined();
+  });
+
+  it("keeps each environment's right panels to its own threads and takes commands from the first", async () => {
+    setup();
+    // Right panels only from environment B, commands from both.
+    const source = `export default { activate(api) {
+      api.commands.register({ id: "open", title: "Open", run() {} });
+      if (!api.environmentId.endsWith(":b")) return;
+      api.rightPanel.register({ name: "notes", title: "Notes", component: () => null });
+    } };`;
+    using _fetch = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => new Response(source));
+    const environmentA = EnvironmentId.make("environment:plugin-loader-scope:a");
+    const environmentB = EnvironmentId.make("environment:plugin-loader-scope:b");
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [webPlugin("notes-web")] }));
+    using _a = { [Symbol.dispose]: startPluginLoader(environmentA, vi.fn(), true) };
+    using _b = { [Symbol.dispose]: startPluginLoader(environmentB, vi.fn(), false) };
+
+    await vi.waitFor(() => {
+      expect(appAtomRegistry.get(pluginCommandsAtom(environmentA))).toHaveLength(1);
+      expect(appAtomRegistry.get(pluginRightPanelsAtom(environmentB))).toHaveLength(1);
+    });
+    expect(appAtomRegistry.get(pluginRightPanelsAtom(environmentA))).toEqual([]);
+    // A command has no thread to say which environment it belongs to.
+    expect(appAtomRegistry.get(pluginCommandsAtom(environmentB))).toEqual([]);
+  });
+
+  it("ends a restored panel's wait once its plugin loads without that panel", async () => {
+    setup();
+    using _fetch = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => new Response("export default { activate() {} };"));
+    const environmentId = EnvironmentId.make("environment:plugin-loader-no-panel");
+    appAtomRegistry.set(pluginUiChoicesAtom, new Map([[environmentId, true]]));
+    using _choices = {
+      [Symbol.dispose]: () => appAtomRegistry.set(pluginUiChoicesAtom, new Map()),
+    };
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [webPlugin("quiet-web")] }));
+    await using screen = await render(
+      createElement(
+        AppAtomRegistryProvider,
+        null,
+        createElement(PluginPanelSurface, {
+          environmentId,
+          threadId: "thread-1",
+          pluginId: "quiet-web",
+          panel: "notes",
+          onClose: () => {},
+        }),
+      ),
+    );
+    await expect.element(screen.getByText("Loading plugin")).toBeVisible();
+
+    using _loader = { [Symbol.dispose]: startPluginLoader(environmentId, vi.fn(), true) };
+    await expect.element(screen.getByText("Plugin not active")).toBeVisible();
+  });
+
+  it("starts a channel the plugin subscribes to and hands it the values", async () => {
+    setup();
+    const channelSource = `export default { activate(api) {
+      api.rpc.subscribe("notes", (value) => api.injectStyles("/* " + String(value) + " */"));
+    } };`;
+    using _fetch = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => new Response(channelSource));
+    const environmentId = EnvironmentId.make("environment:plugin-loader-channel");
+    const stop = startPluginLoader(environmentId, vi.fn(), true);
+    using _loader = { [Symbol.dispose]: stop };
+
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [webPlugin("channel-web")] }));
+
+    await vi.waitFor(() =>
+      expect(document.querySelector('style[data-plugin="channel-web"]')?.textContent).toBe(
+        "/* first value */",
+      ),
+    );
+  });
+
+  it("signs bundle requests with a DPoP proof over a T3 Connect link", async () => {
+    setup();
+    using fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async () => new Response("export default { activate() {} };"));
+    const environmentId = EnvironmentId.make("environment:plugin-loader:relay");
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [webPlugin("relay-web")] }));
+    const stop = startPluginLoader(environmentId, vi.fn(), true);
+    using _loader = { [Symbol.dispose]: stop };
+
+    await vi.waitFor(() =>
+      expect(fetchSpy.mock.calls[0]?.[1]).toEqual({
+        headers: {
+          authorization: "DPoP relay-token",
+          dpop: "proof for http://plugins.test/api/plugins/relay-web/web.js?v=0.1.0",
+        },
+      }),
+    );
+  });
+});
diff --git a/apps/web/src/plugins/pluginLoader.ts b/apps/web/src/plugins/pluginLoader.ts
new file mode 100644
index 0000000000000..bb7e385990974
--- /dev/null
+++ b/apps/web/src/plugins/pluginLoader.ts
@@ -0,0 +1,502 @@
+import {
+  RegistryContext,
+  useAtomMount,
+  useAtomRefresh,
+  useAtomSet,
+  useAtomSubscribe,
+  useAtomValue,
+} from "@effect/atom-react";
+import { runAtomCommand, squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentId, PluginState } from "@t3tools/contracts";
+import {
+  type HOST_ATOM_EXPORTS,
+  type HOST_ATOM_REACT_EXPORTS,
+  type HOST_UI_EXPORTS,
+  type WebPluginApi,
+  type WebPluginDefinition,
+} from "@t3tools/plugin-sdk/web";
+import { AsyncResult, Atom } from "effect/reactivity";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import * as jsxRuntime from "react/jsx-runtime";
+
+import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "../components/ui/empty";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Switch } from "../components/ui/switch";
+import { Textarea } from "../components/ui/textarea";
+import { toastManager } from "../components/ui/toast";
+import { appAtomRegistry } from "../rpc/atomRegistry";
+import { registerCommands, type CommandHandlers } from "../shortcuts/dispatcher";
+import { pluginEnvironment } from "../state/plugins";
+import {
+  markPluginWebLoaded,
+  registerPluginCommand,
+  registerPluginRightPanel,
+  registerPluginSettingsPanel,
+  setPluginWebFailure,
+  type PluginOwner,
+} from "./pluginRegistry";
+import { fetchPluginFile, withDownloadRetries } from "./pluginFiles";
+import { pluginUiAtom } from "./pluginUi";
+import { pluginUi } from "./pluginUiParts";
+import { isLoadableWebPlugin } from "./pluginWatch";
+
+const PANEL_NAME = /^[a-zA-Z0-9_-]{1,64}$/;
+const COMMAND_ID = /^[a-z0-9][a-z0-9-]{0,31}$/;
+const TOAST_TYPES = new Set(["info", "success", "warning", "error"]);
+
+/**
+ * Bundles import React and the UI kit from here instead of shipping their own copies; the SDK's
+ * Vite preset rewrites those imports to this object. `atomReact` and `atom` list only what the app
+ * already bundles, because a namespace import would keep every export in the startup chunk.
+ */
+const installHostModules = () =>
+  Reflect.set(globalThis, "__t3PluginHost", {
+    react: React,
+    reactDom: ReactDOM,
+    jsxRuntime,
+    atomReact: {
+      RegistryContext,
+      useAtomMount,
+      useAtomRefresh,
+      useAtomSet,
+      useAtomSubscribe,
+      useAtomValue,
+    } satisfies Record<(typeof HOST_ATOM_REACT_EXPORTS)[number], unknown>,
+    atom: {
+      family: Atom.family,
+      keepAlive: Atom.keepAlive,
+      make: Atom.make,
+      map: Atom.map,
+      readable: Atom.readable,
+      setIdleTTL: Atom.setIdleTTL,
+      transform: Atom.transform,
+      withLabel: Atom.withLabel,
+      writable: Atom.writable,
+    } satisfies Record<(typeof HOST_ATOM_EXPORTS)[number], unknown>,
+    ui: {
+      Badge,
+      Button,
+      Empty,
+      EmptyContent,
+      EmptyDescription,
+      EmptyHeader,
+      EmptyMedia,
+      EmptyTitle,
+      Input,
+      Label,
+      Switch,
+      Textarea,
+    } satisfies Record<(typeof HOST_UI_EXPORTS)[number], unknown>,
+  });
+
+const isWebPluginDefinition = (value: unknown): value is WebPluginDefinition =>
+  typeof value === "object" &&
+  value !== null &&
+  "activate" in value &&
+  typeof value.activate === "function";
+
+// A plugin can throw anything; a thrown string is still its message.
+const errorText = (error: unknown) =>
+  (error instanceof Error
+    ? error.message
+    : typeof error === "string" && error !== ""
+      ? error
+      : "The plugin's web bundle failed."
+  ).slice(0, 500);
+
+// A bare import() cannot send credentials, so the bundle runs from an object URL.
+async function importBundle(code: string) {
+  const objectUrl = URL.createObjectURL(new Blob([code], { type: "text/javascript" }));
+  try {
+    const module: unknown = await import(/* @vite-ignore */ objectUrl);
+    const definition =
+      typeof module === "object" && module !== null && "default" in module
+        ? module.default
+        : undefined;
+    if (!isWebPluginDefinition(definition)) {
+      throw new Error("The web bundle does not export a plugin with an activate function.");
+    }
+    return definition;
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+
+/** Runs plugin code from a user action; a failure becomes an error toast. */
+const runReportingFailure = (label: string, run: () => void | Promise<void>) => {
+  void Promise.resolve()
+    .then(run)
+    .catch((error: unknown) => {
+      toastManager.add({ type: "error", title: `${label} failed`, description: errorText(error) });
+    });
+};
+
+interface WebPluginApiContext {
+  readonly environmentId: EnvironmentId;
+  /** Whether this environment supplies commands; see `startPluginLoader`. */
+  readonly appWide: boolean;
+  readonly plugin: PluginState;
+  /**
+   * Keeps a cleanup for unload, or runs it at once when the plugin is already unloaded. Returns the
+   * function that forgets the cleanup without running it.
+   */
+  readonly track: (cleanup: () => void) => () => void;
+  /** One dispatcher scope shared by every plugin; commands add and remove their own entries. */
+  readonly shortcutHandlers: () => CommandHandlers;
+  readonly navigate: (path: string) => void;
+  /** False once the plugin unloaded: a timer or callback it left behind must change nothing. */
+  readonly active: () => boolean;
+}
+
+function makeWebPluginApi({
+  environmentId,
+  appWide,
+  plugin,
+  track,
+  shortcutHandlers,
+  navigate,
+  active,
+}: WebPluginApiContext): WebPluginApi {
+  const pluginId = plugin.id;
+  const assetUrls = new Map<string, Promise<string>>();
+  // Shared by everything the plugin draws, so a render failure reaches its row once.
+  const owner: PluginOwner = { environmentId, pluginId, pluginName: plugin.name };
+  return {
+    version: 1,
+    id: pluginId,
+    environmentId,
+    rpc: {
+      invoke: async (method, input) => {
+        // A leftover timer from an unloaded start must not keep calling the new server half.
+        if (!active()) throw new Error(`${pluginId} is no longer loaded here.`);
+        const result = await runAtomCommand(
+          appAtomRegistry,
+          pluginEnvironment.invokePlugin,
+          {
+            environmentId,
+            input: { pluginId, method, ...(input === undefined ? {} : { input }) },
+          },
+          { reportFailure: false },
+        );
+        if (result._tag === "Success") return result.value.output;
+        // The server's reason, so the plugin's UI can say why its own call failed.
+        const failure = squashAtomCommandFailure(result);
+        throw new Error(
+          failure instanceof Error && failure.message !== ""
+            ? failure.message
+            : `${pluginId}.${method} failed.`,
+        );
+      },
+      subscribe: (channel, onValue) => {
+        const atom = pluginEnvironment.pluginChannel({
+          environmentId,
+          input: { pluginId, channel },
+        });
+        // `immediate` reads the atom, which starts its stream; a bare subscribe on an atom no one
+        // has read yet waits for a change that never comes.
+        const stop = appAtomRegistry.subscribe(
+          atom,
+          (result) => {
+            if (AsyncResult.isSuccess(result)) onValue(result.value.value);
+          },
+          { immediate: true },
+        );
+        const untrack = track(stop);
+        return () => {
+          untrack();
+          stop();
+        };
+      },
+    },
+    rightPanel: {
+      register: (panel) => {
+        if (!PANEL_NAME.test(panel.name) || typeof panel.title !== "string") {
+          throw new TypeError(`"${panel.name}" needs a valid name and a text title.`);
+        }
+        track(
+          registerPluginRightPanel({
+            environmentId,
+            pluginId,
+            name: panel.name,
+            title: panel.title,
+            component: panel.component,
+            owner,
+          }),
+        );
+      },
+    },
+    settings: {
+      registerPanel: (component) => {
+        // A replaced start's late panel would take the current start's place, then remove it.
+        if (!active()) return;
+        track(registerPluginSettingsPanel({ component, owner }));
+      },
+    },
+    commands: {
+      register: (command) => {
+        if (
+          !COMMAND_ID.test(command.id) ||
+          typeof command.title !== "string" ||
+          (command.keywords !== undefined &&
+            (!Array.isArray(command.keywords) ||
+              !command.keywords.every((keyword) => typeof keyword === "string")))
+        ) {
+          throw new TypeError(
+            `"${command.id}" needs an id of lowercase letters, digits and hyphens, up to 32, starting with a letter or digit, a text title, and keywords that are text.`,
+          );
+        }
+        if (!appWide) return;
+        const keybindingCommand = `plugin.${pluginId}.${command.id}` as const;
+        const run = () => runReportingFailure(command.title, command.run);
+        track(
+          registerPluginCommand({
+            environmentId,
+            pluginId,
+            pluginName: plugin.name,
+            command: keybindingCommand,
+            title: command.title,
+            keywords: command.keywords ?? [],
+            run,
+          }),
+        );
+        const handlers = shortcutHandlers();
+        handlers[keybindingCommand] = (event) => {
+          event.preventDefault();
+          run();
+        };
+        track(() => {
+          delete handlers[keybindingCommand];
+        });
+      },
+    },
+    assetUrl: (name) => {
+      const cached = assetUrls.get(name);
+      if (cached !== undefined) return cached;
+      const url = fetchPluginFile(
+        environmentId,
+        plugin,
+        `/assets/${name.split("/").map(encodeURIComponent).join("/")}`,
+      )
+        .then((response) => response.blob())
+        .then((blob) => {
+          const objectUrl = URL.createObjectURL(blob);
+          track(() => URL.revokeObjectURL(objectUrl));
+          return objectUrl;
+        });
+      assetUrls.set(name, url);
+      // A failed fetch is asked again next time instead of failing for the plugin's lifetime.
+      url.catch(() => {
+        if (assetUrls.get(name) === url) assetUrls.delete(name);
+      });
+      return url;
+    },
+    injectStyles: (css) => {
+      const style = document.createElement("style");
+      style.dataset.plugin = pluginId;
+      style.textContent = css;
+      document.head.append(style);
+      track(() => style.remove());
+    },
+    navigate: (path) => {
+      if (!path.startsWith("/")) throw new TypeError(`"${path}" is not an app path.`);
+      if (active()) navigate(path);
+    },
+    toast: (message) => {
+      if (
+        typeof message.title !== "string" ||
+        (message.description !== undefined && typeof message.description !== "string") ||
+        (message.type !== undefined && !TOAST_TYPES.has(message.type))
+      ) {
+        throw new TypeError("A toast needs a text title, text description and a known type.");
+      }
+      if (!active()) return;
+      toastManager.add({
+        type: message.type ?? "info",
+        title: message.title,
+        ...(message.description === undefined ? {} : { description: message.description }),
+      });
+    },
+    onDeactivate: (cleanup) => {
+      track(cleanup);
+    },
+  };
+}
+
+interface LoadedPlugin {
+  /** Version and start revision: a change of either loads the bundle again. */
+  readonly key: string;
+  readonly cleanups: Set<() => void>;
+  disposed: boolean;
+}
+
+// The server gives `activate` 30 seconds; a bundle that never loads or settles fails the same way
+// instead of holding up every other plugin behind it.
+const WEB_PLUGIN_DEADLINE_MS = 30_000;
+
+const withDeadline = async <A>(work: Promise<A>, what: string) => {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  const deadline = new Promise<never>((_, reject) => {
+    timer = setTimeout(
+      () => reject(new Error(`${what} took longer than 30 seconds.`)),
+      WEB_PLUGIN_DEADLINE_MS,
+    );
+  });
+  try {
+    return await Promise.race([work, deadline]);
+  } finally {
+    clearTimeout(timer);
+  }
+};
+
+const loadKey = (plugin: PluginState) => `${plugin.version ?? ""}:${plugin.revision ?? ""}`;
+
+const runCleanups = (cleanups: Iterable<() => void>) => {
+  for (const cleanup of [...cleanups].toReversed()) {
+    try {
+      cleanup();
+    } catch {
+      // A plugin's cleanup must not keep the others from running.
+    }
+  }
+};
+
+/**
+ * Loads the environment's active web plugins and follows plugin state until stopped. Each plugin
+ * fails alone: a failed fetch, import or activate is recorded for the Plugins page. Several
+ * environments load at once, and only the `appWide` one registers commands, which have no thread
+ * to tie them to an environment.
+ */
+export function startPluginLoader(
+  environmentId: EnvironmentId,
+  navigate: (path: string) => void,
+  appWide: boolean,
+): () => void {
+  installHostModules();
+  // Stays once set: the registries empty out as plugins unload, so their readers draw nothing.
+  appAtomRegistry.set(pluginUiAtom, pluginUi);
+  const shortcutHandlers: CommandHandlers = {};
+  // Registered with the first plugin command, so key presses pay nothing until one exists.
+  let stopShortcuts: (() => void) | undefined;
+  const claimShortcutHandlers = () => {
+    // A command registered after stop (a slow `activate`) must not add a scope nobody removes.
+    if (!stopped) stopShortcuts ??= registerCommands(shortcutHandlers);
+    return shortcutHandlers;
+  };
+  const loaded = new Map<PluginState["id"], LoadedPlugin>();
+  let stopped = false;
+
+  const unload = (pluginId: PluginState["id"]) => {
+    const plugin = loaded.get(pluginId);
+    if (plugin === undefined) return;
+    loaded.delete(pluginId);
+    plugin.disposed = true;
+    runCleanups(plugin.cleanups);
+  };
+
+  const load = async (plugin: PluginState) => {
+    const entry: LoadedPlugin = { key: loadKey(plugin), cleanups: new Set(), disposed: false };
+    loaded.set(plugin.id, entry);
+    // Cleared here rather than once `activate` resolves, so a part that throws while it awaits
+    // keeps its note.
+    setPluginWebFailure(environmentId, plugin.id, undefined);
+    // Registrations that arrive after unload, from a slow `activate` or a later callback, are
+    // undone at once instead of outliving the plugin.
+    const track = (cleanup: () => void) => {
+      if (entry.disposed) runCleanups([cleanup]);
+      else entry.cleanups.add(cleanup);
+      return () => {
+        entry.cleanups.delete(cleanup);
+      };
+    };
+    let downloaded = false;
+    const download = () =>
+      withDeadline(
+        fetchPluginFile(environmentId, plugin, "/web.js", plugin.webRevision).then((response) =>
+          response.text(),
+        ),
+        "Loading the web bundle",
+      );
+    try {
+      const bundle = await withDownloadRetries(download, () => entry.disposed);
+      if (bundle === undefined) return;
+      downloaded = true;
+      if (entry.disposed) return;
+      // A bundle's top-level `await` can hang too.
+      const definition = await withDeadline(importBundle(bundle), "Loading the web bundle");
+      if (stopped || entry.disposed) return;
+      await withDeadline(
+        Promise.resolve(
+          definition.activate(
+            makeWebPluginApi({
+              environmentId,
+              appWide,
+              plugin,
+              track,
+              shortcutHandlers: claimShortcutHandlers,
+              navigate,
+              active: () => !stopped && !entry.disposed,
+            }),
+          ),
+        ),
+        "Starting the web half",
+      );
+      // A restored panel the plugin did not register stops waiting for it here.
+      if (!entry.disposed) track(markPluginWebLoaded(environmentId, plugin.id));
+    } catch (error) {
+      // A load that was replaced or stopped meanwhile has nothing to report.
+      if (entry.disposed) return;
+      entry.disposed = true;
+      runCleanups(entry.cleanups);
+      entry.cleanups.clear();
+      // A download that still fails after its retries is tried again on the next plugin update. A
+      // bundle that downloaded and then failed stays in `loaded`, so it waits for the plugin to
+      // restart instead of failing again on every change.
+      if (!downloaded) loaded.delete(plugin.id);
+      setPluginWebFailure(environmentId, plugin.id, errorText(error));
+    }
+  };
+
+  const reconcile = (plugins: ReadonlyArray<PluginState>) => {
+    const wanted = new Map(
+      plugins.filter(isLoadableWebPlugin).map((plugin) => [plugin.id, plugin] as const),
+    );
+    for (const [pluginId, plugin] of loaded) {
+      const want = wanted.get(pluginId);
+      if (want === undefined || loadKey(want) !== plugin.key) unload(pluginId);
+    }
+    for (const plugin of plugins) {
+      if (!wanted.has(plugin.id)) setPluginWebFailure(environmentId, plugin.id, undefined);
+    }
+    // Not awaited, so a plugin that hangs until its deadline holds back neither the others nor
+    // the next change, such as turning another plugin off.
+    for (const plugin of wanted.values()) {
+      if (!loaded.has(plugin.id)) void load(plugin);
+    }
+  };
+
+  const stopFollowing = appAtomRegistry.subscribe(
+    pluginEnvironment.pluginsLive({ environmentId, input: {} }),
+    (result) => {
+      if (!stopped && AsyncResult.isSuccess(result)) reconcile(result.value.plugins);
+    },
+    { immediate: true },
+  );
+
+  return () => {
+    stopped = true;
+    stopFollowing();
+    for (const pluginId of loaded.keys()) unload(pluginId);
+    stopShortcuts?.();
+  };
+}
diff --git a/apps/web/src/plugins/pluginRegistry.ts b/apps/web/src/plugins/pluginRegistry.ts
new file mode 100644
index 0000000000000..403d80c44c8af
--- /dev/null
+++ b/apps/web/src/plugins/pluginRegistry.ts
@@ -0,0 +1,196 @@
+import type { EnvironmentId, PLUGIN_COMMAND_PATTERN } from "@t3tools/contracts";
+import { Atom } from "effect/reactivity";
+import type { ComponentType } from "react";
+
+import { appAtomRegistry } from "../rpc/atomRegistry";
+
+export interface PluginRightPanelEntry {
+  readonly environmentId: EnvironmentId;
+  readonly pluginId: string;
+  readonly name: string;
+  readonly title: string;
+  readonly component: ComponentType<{ readonly threadId: string }>;
+  readonly owner: PluginOwner;
+}
+
+export interface PluginCommandEntry {
+  readonly environmentId: EnvironmentId;
+  readonly pluginId: string;
+  readonly pluginName: string;
+  readonly command: typeof PLUGIN_COMMAND_PATTERN.Type;
+  readonly title: string;
+  readonly keywords: ReadonlyArray<string>;
+  readonly run: () => void;
+}
+
+// Plain maps with one list-level version: readers re-render on the version alone, so a plugin never
+// adds a subscription per panel or command. App code outside the plugin runtime and lazy routes
+// reads them through `pluginUi.ts`, so this stays out of startup.
+const rightPanels = new Map<string, PluginRightPanelEntry>();
+const settingsPanels = new Map<string, PluginSettingsPanelEntry>();
+const webFailures = new Map<string, string>();
+const webLoaded = new Set<string>();
+const commands = new Map<string, PluginCommandEntry>();
+
+// Reads go through atoms derived from the version, so React Compiler cannot cache a stale lookup.
+const versionAtom = Atom.make(0).pipe(Atom.keepAlive);
+
+const bump = () => appAtomRegistry.set(versionAtom, appAtomRegistry.get(versionAtom) + 1);
+
+/**
+ * Hands back the previous list while it holds the same entries, so a registry change that
+ * doesn't touch a reader's list doesn't re-render the component that reads it.
+ */
+const stableList = <Entry>() => {
+  let previous: ReadonlyArray<Entry> = [];
+  return (next: ReadonlyArray<Entry>) => {
+    if (next.length === previous.length && next.every((entry, i) => entry === previous[i])) {
+      return previous;
+    }
+    previous = next;
+    return next;
+  };
+};
+
+export const pluginContributionKey = (environmentId: EnvironmentId, pluginId: string) =>
+  `${environmentId}\u0000${pluginId}`;
+export const pluginRightPanelKey = (environmentId: EnvironmentId, pluginId: string, name: string) =>
+  `${pluginContributionKey(environmentId, pluginId)}\u0000${name}`;
+
+/** Adds a plugin right panel; returns the function that removes it. */
+export function registerPluginRightPanel(entry: PluginRightPanelEntry): () => void {
+  const key = pluginRightPanelKey(entry.environmentId, entry.pluginId, entry.name);
+  if (rightPanels.has(key)) {
+    throw new Error(`Right panel "${entry.name}" is already registered.`);
+  }
+  rightPanels.set(key, entry);
+  bump();
+  return () => {
+    if (rightPanels.get(key) !== entry) return;
+    rightPanels.delete(key);
+    bump();
+  };
+}
+
+export const pluginRightPanelAtom = Atom.family((key: string) =>
+  Atom.make((get) => {
+    get(versionAtom);
+    return rightPanels.get(key);
+  }),
+);
+
+export const pluginRightPanelsAtom = Atom.family((environmentId: string) => {
+  const stable = stableList<PluginRightPanelEntry>();
+  return Atom.make((get) => {
+    get(versionAtom);
+    return stable(
+      [...rightPanels.values()].filter((entry) => entry.environmentId === environmentId),
+    );
+  });
+});
+
+export interface PluginSettingsPanelEntry {
+  readonly component: ComponentType;
+  readonly owner: PluginOwner;
+}
+
+/** Replaces a plugin's generated settings form; returns the function that removes it. */
+export function registerPluginSettingsPanel(entry: PluginSettingsPanelEntry): () => void {
+  const key = pluginContributionKey(entry.owner.environmentId, entry.owner.pluginId);
+  settingsPanels.set(key, entry);
+  bump();
+  return () => {
+    if (settingsPanels.get(key) !== entry) return;
+    settingsPanels.delete(key);
+    bump();
+  };
+}
+
+export const pluginSettingsPanelAtom = Atom.family((key: string) =>
+  Atom.make((get) => {
+    get(versionAtom);
+    return settingsPanels.get(key);
+  }),
+);
+
+/** Records why a plugin's web bundle did not load; `undefined` clears it. */
+export function setPluginWebFailure(
+  environmentId: EnvironmentId,
+  pluginId: string,
+  message: string | undefined,
+) {
+  const key = pluginContributionKey(environmentId, pluginId);
+  if (webFailures.get(key) === message) return;
+  if (message === undefined) webFailures.delete(key);
+  else webFailures.set(key, message);
+  bump();
+}
+
+/** Why the plugin's web part failed, by environment, for its row in Settings. */
+export const pluginWebFailuresAtom = Atom.family((pluginId: string) =>
+  Atom.make((get): ReadonlyMap<string, string> => {
+    get(versionAtom);
+    const suffix = `\u0000${pluginId}`;
+    return new Map(
+      [...webFailures].flatMap(([key, message]) =>
+        key.endsWith(suffix) ? [[key.slice(0, -suffix.length), message] as const] : [],
+      ),
+    );
+  }),
+);
+
+/** Records that a plugin's web part finished `activate`; returns the function that clears it. */
+export function markPluginWebLoaded(environmentId: EnvironmentId, pluginId: string): () => void {
+  const key = pluginContributionKey(environmentId, pluginId);
+  webLoaded.add(key);
+  bump();
+  return () => {
+    if (webLoaded.delete(key)) bump();
+  };
+}
+
+/** Whether the plugin's web part has loaded, by `pluginContributionKey`. */
+export const pluginWebLoadedAtom = Atom.family((key: string) =>
+  Atom.make((get) => {
+    get(versionAtom);
+    return webLoaded.has(key);
+  }),
+);
+
+/** Adds a plugin command to the command palette; returns the function that removes it. */
+export function registerPluginCommand(entry: PluginCommandEntry): () => void {
+  const key = `${entry.environmentId}\u0000${entry.command}`;
+  if (commands.has(key)) {
+    throw new Error(`Command "${entry.command}" is already registered.`);
+  }
+  commands.set(key, entry);
+  bump();
+  return () => {
+    if (commands.get(key) !== entry) return;
+    commands.delete(key);
+    bump();
+  };
+}
+
+/** A loaded plugin command's name for people, such as in Keybindings settings. */
+export function pluginCommandLabel(command: string): string | undefined {
+  for (const entry of commands.values()) {
+    if (entry.command === command) return `${entry.pluginName}: ${entry.title}`;
+  }
+  return undefined;
+}
+
+export const pluginCommandsAtom = Atom.family((environmentId: string) => {
+  const stable = stableList<PluginCommandEntry>();
+  return Atom.make((get) => {
+    get(versionAtom);
+    return stable([...commands.values()].filter((entry) => entry.environmentId === environmentId));
+  });
+});
+
+/** The plugin that registered a contribution, so its failures show on that plugin's row. */
+export interface PluginOwner {
+  readonly environmentId: EnvironmentId;
+  readonly pluginId: string;
+  readonly pluginName: string;
+}
diff --git a/apps/web/src/plugins/pluginStyles.browser.test.ts b/apps/web/src/plugins/pluginStyles.browser.test.ts
new file mode 100644
index 0000000000000..0a0ee6bc2614e
--- /dev/null
+++ b/apps/web/src/plugins/pluginStyles.browser.test.ts
@@ -0,0 +1,100 @@
+import { EnvironmentId, PluginId, type PluginState } from "@t3tools/contracts";
+import { AsyncResult } from "effect/reactivity";
+import { describe, expect, it, vi } from "vite-plus/test";
+
+vi.mock(import("../state/session"), async (original) => ({
+  ...(await original()),
+  readPreparedConnection: (() => ({
+    httpBaseUrl: "http://plugins.test/",
+    httpAuthorization: { _tag: "Bearer", token: "token" },
+  })) as never,
+}));
+const state = await vi.hoisted(async () => {
+  const { Atom, AsyncResult } = await import("effect/reactivity");
+  return {
+    live: Atom.make<AsyncResult.AsyncResult<{ readonly plugins: ReadonlyArray<PluginState> }>>(
+      AsyncResult.initial(),
+    ),
+  };
+});
+vi.mock(import("../state/plugins"), () => ({
+  pluginEnvironment: { pluginsLive: () => state.live } as never,
+}));
+
+import { appAtomRegistry } from "../rpc/atomRegistry";
+import { startPluginStyles } from "./pluginStyles";
+
+const stylesPluginState: PluginState = {
+  id: PluginId.make("styles-plugin"),
+  name: "styles-plugin",
+  version: "0.1.0",
+  permissions: [],
+  source: "dev",
+  enabled: true,
+  status: "active",
+  hasServer: false,
+  hasWeb: false,
+  hasSettings: false,
+};
+
+describe("startPluginStyles", () => {
+  it("adds an active plugin's stylesheets in order, swaps changed ones and removes them when it is off", async () => {
+    // Each sheet names the file and revision it was fetched as.
+    using fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+      const url = new URL(String(input));
+      return new Response(`/* ${url.pathname.split("/").pop()} ${url.searchParams.get("v")} */`);
+    });
+    const environmentId = EnvironmentId.make("environment:plugin-styles");
+    const stylesPlugin: PluginState = {
+      ...stylesPluginState,
+      styles: [
+        { file: "base.css", revision: "r1" },
+        { file: "compact.css", revision: "r2" },
+      ],
+    };
+    const sheets = () =>
+      Array.from(document.querySelectorAll('style[data-plugin="styles-plugin"]'), (sheet) =>
+        sheet.textContent?.trim(),
+      );
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [stylesPlugin] }));
+    const stop = startPluginStyles(environmentId);
+    using _styles = { [Symbol.dispose]: stop };
+
+    await vi.waitFor(() => expect(sheets()).toEqual(["/* base.css r1 */", "/* compact.css r2 */"]));
+    // After the app's own styles, so a rule of the same specificity wins.
+    expect(document.head.lastElementChild?.textContent).toBe("/* compact.css r2 */");
+    expect(String(fetchSpy.mock.calls[0]?.[0])).toBe(
+      "http://plugins.test/api/plugins/styles-plugin/styles/base.css?v=r1",
+    );
+    expect(fetchSpy.mock.calls[0]?.[1]).toEqual({ headers: { authorization: "Bearer token" } });
+
+    appAtomRegistry.set(
+      state.live,
+      AsyncResult.success({
+        plugins: [
+          {
+            ...stylesPlugin,
+            styles: [
+              { file: "base.css", revision: "r1" },
+              { file: "compact.css", revision: "r3" },
+            ],
+          },
+        ],
+      }),
+    );
+    await vi.waitFor(() => expect(sheets()).toEqual(["/* base.css r1 */", "/* compact.css r3 */"]));
+
+    appAtomRegistry.set(
+      state.live,
+      AsyncResult.success({
+        plugins: [{ ...stylesPluginState, enabled: false, status: "disabled" }],
+      }),
+    );
+    await vi.waitFor(() => expect(sheets()).toEqual([]));
+
+    appAtomRegistry.set(state.live, AsyncResult.success({ plugins: [stylesPlugin] }));
+    await vi.waitFor(() => expect(sheets()).toHaveLength(2));
+    stop();
+    expect(sheets()).toEqual([]);
+  });
+});
diff --git a/apps/web/src/plugins/pluginStyles.ts b/apps/web/src/plugins/pluginStyles.ts
new file mode 100644
index 0000000000000..b961d02059e96
--- /dev/null
+++ b/apps/web/src/plugins/pluginStyles.ts
@@ -0,0 +1,116 @@
+import type { EnvironmentId, PluginState } from "@t3tools/contracts";
+import { AsyncResult } from "effect/reactivity";
+
+import { appAtomRegistry } from "../rpc/atomRegistry";
+import { pluginEnvironment } from "../state/plugins";
+import { fetchPluginFile, withDownloadRetries } from "./pluginFiles";
+import { setPluginWebFailure } from "./pluginRegistry";
+import { hasLoadableStyles } from "./pluginWatch";
+
+// Names every file and its contents, so a restart with the same files downloads nothing.
+const stylesKey = (plugin: PluginState) =>
+  (plugin.styles ?? []).map(({ file, revision }) => `${file}@${revision}`).join(",");
+
+/**
+ * Adds the stylesheets of the environment's active plugins to the end of the page's head, after
+ * T3's own CSS and the theme, and follows plugin state until stopped. Changed files replace a
+ * plugin's old ones once all of them have downloaded.
+ */
+export function startPluginStyles(environmentId: EnvironmentId): () => void {
+  const applied = new Map<
+    PluginState["id"],
+    { readonly key: string; readonly sheets: Element[] }
+  >();
+  // The download each plugin waits for; one that a newer change replaced is dropped.
+  const pending = new Map<PluginState["id"], string>();
+  // Plugins whose row shows a styles failure, which only this module clears: the web loader
+  // keeps its own failures on the same row.
+  const failed = new Set<PluginState["id"]>();
+  let stopped = false;
+
+  const remove = (pluginId: PluginState["id"]) => {
+    for (const sheet of applied.get(pluginId)?.sheets ?? []) sheet.remove();
+    applied.delete(pluginId);
+  };
+  const clearFailure = (pluginId: PluginState["id"]) => {
+    if (failed.delete(pluginId)) setPluginWebFailure(environmentId, pluginId, undefined);
+  };
+
+  const apply = async (plugin: PluginState, key: string) => {
+    pending.set(plugin.id, key);
+    const current = () => !stopped && pending.get(plugin.id) === key;
+    try {
+      const texts = await Promise.all(
+        (plugin.styles ?? []).map(({ file, revision }) =>
+          withDownloadRetries(
+            () =>
+              fetchPluginFile(
+                environmentId,
+                plugin,
+                `/styles/${encodeURIComponent(file)}`,
+                revision,
+              ).then((response) => response.text()),
+            () => !current(),
+          ),
+        ),
+      );
+      if (!current()) return;
+      pending.delete(plugin.id);
+      remove(plugin.id);
+      const sheets = texts.map((css) => {
+        const sheet = document.createElement("style");
+        sheet.dataset.plugin = plugin.id;
+        sheet.textContent = css ?? "";
+        return sheet;
+      });
+      document.head.append(...sheets);
+      applied.set(plugin.id, { key, sheets });
+      clearFailure(plugin.id);
+    } catch (error) {
+      if (!current()) return;
+      // Tried again on the next plugin update, like a web bundle that fails to download.
+      pending.delete(plugin.id);
+      failed.add(plugin.id);
+      setPluginWebFailure(
+        environmentId,
+        plugin.id,
+        error instanceof Error ? error.message : "The plugin's styles failed to load.",
+      );
+    }
+  };
+
+  const reconcile = (plugins: ReadonlyArray<PluginState>) => {
+    const wanted = new Map(
+      plugins.filter(hasLoadableStyles).map((plugin) => [plugin.id, plugin] as const),
+    );
+    for (const pluginId of new Set([...applied.keys(), ...pending.keys(), ...failed])) {
+      if (wanted.has(pluginId)) continue;
+      pending.delete(pluginId);
+      remove(pluginId);
+      clearFailure(pluginId);
+    }
+    for (const plugin of wanted.values()) {
+      const key = stylesKey(plugin);
+      if (applied.get(plugin.id)?.key !== key && pending.get(plugin.id) !== key) {
+        void apply(plugin, key);
+      }
+    }
+  };
+
+  const stopFollowing = appAtomRegistry.subscribe(
+    pluginEnvironment.pluginsLive({ environmentId, input: {} }),
+    (result) => {
+      if (!stopped && AsyncResult.isSuccess(result)) reconcile(result.value.plugins);
+    },
+    { immediate: true },
+  );
+
+  return () => {
+    stopped = true;
+    stopFollowing();
+    pending.clear();
+    // Deleting the entry a Map or Set iteration is on is safe.
+    for (const pluginId of applied.keys()) remove(pluginId);
+    for (const pluginId of failed) clearFailure(pluginId);
+  };
+}
diff --git a/apps/web/src/plugins/pluginThemeTokens.browser.test.ts b/apps/web/src/plugins/pluginThemeTokens.browser.test.ts
new file mode 100644
index 0000000000000..6f0b0d6915f17
--- /dev/null
+++ b/apps/web/src/plugins/pluginThemeTokens.browser.test.ts
@@ -0,0 +1,23 @@
+import { THEME_TOKENS } from "@t3tools/plugin-sdk/web";
+import { describe, expect, it } from "vite-plus/test";
+
+import "~/index.css";
+
+// A plugin's `var(--border)` resolves to nothing, and its component draws unstyled, once T3's
+// stylesheet stops defining the token.
+describe("the theme tokens the plugin SDK promises", () => {
+  it("are defined by T3's stylesheet in light and dark", () => {
+    const root = document.documentElement;
+    try {
+      for (const appearance of ["light", "dark"] as const) {
+        root.classList.toggle("dark", appearance === "dark");
+        const style = getComputedStyle(root);
+        for (const token of THEME_TOKENS) {
+          expect(style.getPropertyValue(token).trim(), `${token} in ${appearance}`).not.toBe("");
+        }
+      }
+    } finally {
+      root.classList.remove("dark");
+    }
+  });
+});
diff --git a/apps/web/src/plugins/pluginUi.ts b/apps/web/src/plugins/pluginUi.ts
new file mode 100644
index 0000000000000..cc79a2fcc7a94
--- /dev/null
+++ b/apps/web/src/plugins/pluginUi.ts
@@ -0,0 +1,33 @@
+import { Atom } from "effect/reactivity";
+
+import { appAtomRegistry } from "../rpc/atomRegistry";
+import type { PluginUi } from "./pluginUiParts";
+
+/**
+ * The plugin UI code, which the plugin loader publishes once a plugin with a web part is active.
+ * App code reaches plugin contributions only through this, so until then it downloads none of
+ * that code and reads no plugin registry.
+ */
+export const pluginUiAtom = Atom.make<PluginUi | null>(null).pipe(
+  Atom.keepAlive,
+  Atom.withLabel("web-plugin-ui"),
+);
+
+const loadedPluginUi = () => appAtomRegistry.get(pluginUiAtom);
+
+const NONE: ReadonlyArray<never> = [];
+
+// Each atom below reads its namesake in `pluginRegistry` once plugin UI has loaded.
+const fromPluginUi = <A>(pick: (ui: PluginUi) => Atom.Atom<A>, none: A) =>
+  Atom.make((get) => {
+    const ui = get(pluginUiAtom);
+    return ui === null ? none : get(pick(ui));
+  });
+
+export const pluginCommandsAtom = Atom.family((environmentId: string) =>
+  fromPluginUi((ui) => ui.pluginCommandsAtom(environmentId), NONE),
+);
+
+/** A loaded plugin command's name for people, such as in Keybindings settings. */
+export const pluginCommandLabel = (command: string) =>
+  loadedPluginUi()?.pluginCommandLabel(command);
diff --git a/apps/web/src/plugins/pluginUiKit.test.ts b/apps/web/src/plugins/pluginUiKit.test.ts
new file mode 100644
index 0000000000000..57a199be4d0ce
--- /dev/null
+++ b/apps/web/src/plugins/pluginUiKit.test.ts
@@ -0,0 +1,31 @@
+import type * as SdkUi from "@t3tools/plugin-sdk/ui";
+import type { ComponentProps } from "react";
+import { describe, expectTypeOf, it } from "vite-plus/test";
+
+import type { Badge } from "../components/ui/badge";
+import type { Button } from "../components/ui/button";
+import type { EmptyMedia } from "../components/ui/empty";
+
+type SdkProps<Name extends keyof typeof SdkUi> = Parameters<(typeof SdkUi)[Name]>[0];
+
+// Checked by the typecheck: a T3 update that drops a variant the SDK offers fails here, before a
+// plugin's button draws unstyled.
+describe("the plugin UI kit", () => {
+  it("offers only variants and sizes T3's own components have", () => {
+    expectTypeOf<NonNullable<SdkProps<"Button">["variant"]>>().toExtend<
+      NonNullable<ComponentProps<typeof Button>["variant"]>
+    >();
+    expectTypeOf<NonNullable<SdkProps<"Button">["size"]>>().toExtend<
+      NonNullable<ComponentProps<typeof Button>["size"]>
+    >();
+    expectTypeOf<NonNullable<SdkProps<"Badge">["variant"]>>().toExtend<
+      NonNullable<ComponentProps<typeof Badge>["variant"]>
+    >();
+    expectTypeOf<NonNullable<SdkProps<"Badge">["size"]>>().toExtend<
+      NonNullable<ComponentProps<typeof Badge>["size"]>
+    >();
+    expectTypeOf<NonNullable<SdkProps<"EmptyMedia">["variant"]>>().toExtend<
+      NonNullable<ComponentProps<typeof EmptyMedia>["variant"]>
+    >();
+  });
+});
diff --git a/apps/web/src/plugins/pluginUiParts.ts b/apps/web/src/plugins/pluginUiParts.ts
new file mode 100644
index 0000000000000..ac4e603c4fbeb
--- /dev/null
+++ b/apps/web/src/plugins/pluginUiParts.ts
@@ -0,0 +1,12 @@
+import { PluginPanelLauncherItems, PluginPanelMenuItems } from "./PluginPanelMenuItems";
+import { pluginCommandLabel, pluginCommandsAtom } from "./pluginRegistry";
+
+/** What app code reaches through `pluginUiAtom` once the plugin loader publishes it. */
+export const pluginUi = {
+  PluginPanelLauncherItems,
+  PluginPanelMenuItems,
+  pluginCommandLabel,
+  pluginCommandsAtom,
+};
+
+export type PluginUi = typeof pluginUi;
diff --git a/apps/web/src/plugins/pluginWatch.ts b/apps/web/src/plugins/pluginWatch.ts
new file mode 100644
index 0000000000000..599f9a5fee3b3
--- /dev/null
+++ b/apps/web/src/plugins/pluginWatch.ts
@@ -0,0 +1,38 @@
+import type { EnvironmentId, PluginState } from "@t3tools/contracts";
+import { AsyncResult } from "effect/reactivity";
+
+import { appAtomRegistry } from "../rpc/atomRegistry";
+import { pluginEnvironment } from "../state/plugins";
+
+/** Whether the web runtime should run this plugin's web part. */
+export const isLoadableWebPlugin = (plugin: PluginState) =>
+  plugin.hasWeb && plugin.enabled && plugin.status === "active";
+
+/** Whether this plugin has stylesheets for the page now. */
+export const hasLoadableStyles = (plugin: PluginState) =>
+  plugin.styles !== undefined &&
+  plugin.styles.length > 0 &&
+  plugin.enabled &&
+  plugin.status === "active";
+
+/**
+ * Calls `onFound` once the environment has a plugin that `wanted` accepts; returns the function
+ * that stops watching. The runtimes follow the same atom, so they open no second stream.
+ */
+export function watchForPlugins(
+  environmentId: EnvironmentId,
+  wanted: (plugin: PluginState) => boolean,
+  onFound: () => void,
+): () => void {
+  let found = false;
+  return appAtomRegistry.subscribe(
+    pluginEnvironment.pluginsLive({ environmentId, input: {} }),
+    (result) => {
+      if (found || !AsyncResult.isSuccess(result)) return;
+      if (!result.value.plugins.some(wanted)) return;
+      found = true;
+      onFound();
+    },
+    { immediate: true },
+  );
+}
diff --git a/apps/web/src/reopenClosedView.ts b/apps/web/src/reopenClosedView.ts
index 005887ad81faa..346bf09144b3a 100644
--- a/apps/web/src/reopenClosedView.ts
+++ b/apps/web/src/reopenClosedView.ts
@@ -139,6 +139,9 @@ export async function reopenClosedView(
     case "side-chat":
       panels.openSideChat(ref, surface.threadId);
       break;
+    case "plugin":
+      panels.openPlugin(ref, surface);
+      break;
     default:
       panels.open(ref, surface.kind);
   }
diff --git a/apps/web/src/rightPanelStore.ts b/apps/web/src/rightPanelStore.ts
index 6d9c692d64564..eef4565eb77e3 100644
--- a/apps/web/src/rightPanelStore.ts
+++ b/apps/web/src/rightPanelStore.ts
@@ -22,6 +22,7 @@ const RIGHT_PANEL_KINDS = [
   "pull-request",
   "pull-requests",
   "side-chat",
+  "plugin",
 ] as const;
 export type RightPanelKind = (typeof RIGHT_PANEL_KINDS)[number];
 
@@ -76,7 +77,9 @@ export type RightPanelSurface =
       detailTab?: PullRequestDetailTab;
     }
   | { id: "pull-requests"; kind: "pull-requests" }
-  | { id: `side-chat:${string}`; kind: "side-chat"; threadId: ThreadId };
+  | { id: `side-chat:${string}`; kind: "side-chat"; threadId: ThreadId }
+  /** A panel a web plugin registered; the panel says its plugin is not active while unloaded. */
+  | { id: `plugin:${string}`; kind: "plugin"; pluginId: string; panel: string; title: string };
 
 const RIGHT_PANEL_STORAGE_KEY = "t3code:right-panel-state:v2";
 const RIGHT_PANEL_STORAGE_VERSION = 14;
@@ -123,7 +126,11 @@ interface RightPanelStoreState {
   ) => boolean;
   open: (
     ref: ScopedThreadRef,
-    kind: Exclude<RightPanelKind, "file" | "terminal" | "pull-request" | "side-chat">,
+    kind: Exclude<RightPanelKind, "file" | "terminal" | "pull-request" | "side-chat" | "plugin">,
+  ) => void;
+  openPlugin: (
+    ref: ScopedThreadRef,
+    target: { pluginId: string; panel: string; title: string },
   ) => void;
   openSideChat: (ref: ScopedThreadRef, threadId: ThreadId) => void;
   openDevice: (ref: ScopedThreadRef, target: DeviceTabTarget, automatic?: boolean) => void;
@@ -183,7 +190,7 @@ interface RightPanelStoreState {
   toggleVisibility: (ref: ScopedThreadRef) => void;
   toggle: (
     ref: ScopedThreadRef,
-    kind: Exclude<RightPanelKind, "file" | "terminal" | "pull-request" | "side-chat">,
+    kind: Exclude<RightPanelKind, "file" | "terminal" | "pull-request" | "side-chat" | "plugin">,
   ) => void;
   setThreadPanelOpen: (
     ref: ScopedThreadRef,
@@ -206,7 +213,10 @@ const DEFAULT_THREAD_PANEL_VISIBILITY: ThreadPanelVisibility = {
 };
 
 const singletonSurface = (
-  kind: Exclude<RightPanelKind, "file" | "preview" | "terminal" | "pull-request" | "side-chat">,
+  kind: Exclude<
+    RightPanelKind,
+    "file" | "preview" | "terminal" | "pull-request" | "side-chat" | "plugin"
+  >,
 ): RightPanelSurface => {
   switch (kind) {
     case "diff":
@@ -740,6 +750,18 @@ export const useRightPanelStore = create<RightPanelStoreState>()(
             return upsertSurface({ ...current, surfaces: withoutPlaceholder }, surface);
           }),
         ),
+      openPlugin: (ref, target) =>
+        set((state) =>
+          userAction(state, scopedThreadKey(ref), (current) =>
+            upsertSurface(current, {
+              id: `plugin:${target.pluginId}:${target.panel}`,
+              kind: "plugin",
+              pluginId: target.pluginId,
+              panel: target.panel,
+              title: target.title,
+            }),
+          ),
+        ),
       openPullRequest: (ref, target) =>
         set((state) =>
           userAction(state, scopedThreadKey(ref), (current) => {
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index 0e26ab6edd879..fd4ce2027f1e6 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -30,6 +30,7 @@ import { Route as ChatSettingsSecretsRouteImport } from './routes/_chat.settings
 import { Route as ChatSettingsScheduledTasksRouteImport } from './routes/_chat.settings.scheduled-tasks'
 import { Route as ChatSettingsProvidersRouteImport } from './routes/_chat.settings.providers'
 import { Route as ChatSettingsProjectsRouteImport } from './routes/_chat.settings.projects'
+import { Route as ChatSettingsPluginsRouteImport } from './routes/_chat.settings.plugins'
 import { Route as ChatSettingsOpenSourceLicensesRouteImport } from './routes/_chat.settings.open-source-licenses'
 import { Route as ChatSettingsMaintenanceRouteImport } from './routes/_chat.settings.maintenance'
 import { Route as ChatSettingsLabsRouteImport } from './routes/_chat.settings.labs'
@@ -156,6 +157,11 @@ const ChatSettingsProjectsRoute = ChatSettingsProjectsRouteImport.update({
   path: '/projects',
   getParentRoute: () => ChatSettingsRoute,
 } as any)
+const ChatSettingsPluginsRoute = ChatSettingsPluginsRouteImport.update({
+  id: '/plugins',
+  path: '/plugins',
+  getParentRoute: () => ChatSettingsRoute,
+} as any)
 const ChatSettingsOpenSourceLicensesRoute =
   ChatSettingsOpenSourceLicensesRouteImport.update({
     id: '/open-source-licenses',
@@ -286,6 +292,7 @@ export interface FileRoutesByFullPath {
   '/settings/labs': typeof ChatSettingsLabsRoute
   '/settings/maintenance': typeof ChatSettingsMaintenanceRoute
   '/settings/open-source-licenses': typeof ChatSettingsOpenSourceLicensesRoute
+  '/settings/plugins': typeof ChatSettingsPluginsRoute
   '/settings/projects': typeof ChatSettingsProjectsRoute
   '/settings/providers': typeof ChatSettingsProvidersRoute
   '/settings/scheduled-tasks': typeof ChatSettingsScheduledTasksRoute
@@ -327,6 +334,7 @@ export interface FileRoutesByTo {
   '/settings/labs': typeof ChatSettingsLabsRoute
   '/settings/maintenance': typeof ChatSettingsMaintenanceRoute
   '/settings/open-source-licenses': typeof ChatSettingsOpenSourceLicensesRoute
+  '/settings/plugins': typeof ChatSettingsPluginsRoute
   '/settings/projects': typeof ChatSettingsProjectsRoute
   '/settings/providers': typeof ChatSettingsProvidersRoute
   '/settings/scheduled-tasks': typeof ChatSettingsScheduledTasksRoute
@@ -370,6 +378,7 @@ export interface FileRoutesById {
   '/_chat/settings/labs': typeof ChatSettingsLabsRoute
   '/_chat/settings/maintenance': typeof ChatSettingsMaintenanceRoute
   '/_chat/settings/open-source-licenses': typeof ChatSettingsOpenSourceLicensesRoute
+  '/_chat/settings/plugins': typeof ChatSettingsPluginsRoute
   '/_chat/settings/projects': typeof ChatSettingsProjectsRoute
   '/_chat/settings/providers': typeof ChatSettingsProvidersRoute
   '/_chat/settings/scheduled-tasks': typeof ChatSettingsScheduledTasksRoute
@@ -413,6 +422,7 @@ export interface FileRouteTypes {
     | '/settings/labs'
     | '/settings/maintenance'
     | '/settings/open-source-licenses'
+    | '/settings/plugins'
     | '/settings/projects'
     | '/settings/providers'
     | '/settings/scheduled-tasks'
@@ -454,6 +464,7 @@ export interface FileRouteTypes {
     | '/settings/labs'
     | '/settings/maintenance'
     | '/settings/open-source-licenses'
+    | '/settings/plugins'
     | '/settings/projects'
     | '/settings/providers'
     | '/settings/scheduled-tasks'
@@ -496,6 +507,7 @@ export interface FileRouteTypes {
     | '/_chat/settings/labs'
     | '/_chat/settings/maintenance'
     | '/_chat/settings/open-source-licenses'
+    | '/_chat/settings/plugins'
     | '/_chat/settings/projects'
     | '/_chat/settings/providers'
     | '/_chat/settings/scheduled-tasks'
@@ -666,6 +678,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ChatSettingsProjectsRouteImport
       parentRoute: typeof ChatSettingsRoute
     }
+    '/_chat/settings/plugins': {
+      id: '/_chat/settings/plugins'
+      path: '/plugins'
+      fullPath: '/settings/plugins'
+      preLoaderRoute: typeof ChatSettingsPluginsRouteImport
+      parentRoute: typeof ChatSettingsRoute
+    }
     '/_chat/settings/open-source-licenses': {
       id: '/_chat/settings/open-source-licenses'
       path: '/open-source-licenses'
@@ -820,6 +839,7 @@ interface ChatSettingsRouteChildren {
   ChatSettingsLabsRoute: typeof ChatSettingsLabsRoute
   ChatSettingsMaintenanceRoute: typeof ChatSettingsMaintenanceRoute
   ChatSettingsOpenSourceLicensesRoute: typeof ChatSettingsOpenSourceLicensesRoute
+  ChatSettingsPluginsRoute: typeof ChatSettingsPluginsRoute
   ChatSettingsProjectsRoute: typeof ChatSettingsProjectsRoute
   ChatSettingsProvidersRoute: typeof ChatSettingsProvidersRoute
   ChatSettingsScheduledTasksRoute: typeof ChatSettingsScheduledTasksRoute
@@ -849,6 +869,7 @@ const ChatSettingsRouteChildren: ChatSettingsRouteChildren = {
   ChatSettingsLabsRoute: ChatSettingsLabsRoute,
   ChatSettingsMaintenanceRoute: ChatSettingsMaintenanceRoute,
   ChatSettingsOpenSourceLicensesRoute: ChatSettingsOpenSourceLicensesRoute,
+  ChatSettingsPluginsRoute: ChatSettingsPluginsRoute,
   ChatSettingsProjectsRoute: ChatSettingsProjectsRoute,
   ChatSettingsProvidersRoute: ChatSettingsProvidersRoute,
   ChatSettingsScheduledTasksRoute: ChatSettingsScheduledTasksRoute,
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 1207b5017100d..36978ffce666f 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -59,6 +59,7 @@ import { readProject } from "../state/entities";
 
 import { getDesktopSnapShotBridge } from "../lib/desktopSnapShot";
 import { shouldResumeSnapShotSetupOnStartup } from "../lib/snapShotSetupResume";
+import { PluginLoaderStarter } from "../plugins/PluginLoaderStarter";
 
 export const Route = createRootRoute({
   beforeLoad: async ({ location }) => {
@@ -216,6 +217,8 @@ function RootRouteBranch() {
         {primaryEnvironmentAuthenticated ? (
           <EventRouter skipInitialBootstrapNavigation={returningFromWelcome} />
         ) : null}
+        {/* Also without a primary environment, where it loads plugin UI only from one the user picked. */}
+        <PluginLoaderStarter />
         {appShell}
         {/* Keep the theme editor above the router so drafts survive navigation. */}
         <ThemeEditorHost />
diff --git a/apps/web/src/routes/_chat.index.tsx b/apps/web/src/routes/_chat.index.tsx
index 75bd468f7520d..52ca8f44160b0 100644
--- a/apps/web/src/routes/_chat.index.tsx
+++ b/apps/web/src/routes/_chat.index.tsx
@@ -99,7 +99,7 @@ function DraftStartError({ onRetry }: { readonly onRetry: () => void }) {
       className="h-dvh min-h-0 overflow-hidden overscroll-y-none"
     >
       {isElectron ? <WorkspacePageHeader electron /> : null}
-      <Empty className="flex-1">
+      <Empty data-t3-region="home" className="flex-1">
         <EmptyHeader className="max-w-md">
           <EmptyTitle>Couldn’t start a new thread</EmptyTitle>
           <EmptyDescription>
diff --git a/apps/web/src/routes/_chat.settings.plugins.tsx b/apps/web/src/routes/_chat.settings.plugins.tsx
new file mode 100644
index 0000000000000..5eaa42d006027
--- /dev/null
+++ b/apps/web/src/routes/_chat.settings.plugins.tsx
@@ -0,0 +1,5 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { PluginsSettings } from "../components/settings/plugins/PluginsSettings";
+
+export const Route = createFileRoute("/_chat/settings/plugins")({ component: PluginsSettings });
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index 7758c9ca55919..01ec984edcf5e 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -14,7 +14,10 @@ import {
 } from "../components/settings/SettingsScopeContext";
 import { useEnvironments } from "../state/environments";
 import { SettingsScopeNotice } from "../components/settings/SettingsScopeNotice";
-import { SETTINGS_DEVICE_ONLY_PATHS } from "../components/settings/SettingsScopeSentence";
+import {
+  SETTINGS_DEVICE_ONLY_PATHS,
+  SETTINGS_ENVIRONMENT_ONLY_PATHS,
+} from "../components/settings/SettingsScopeSentence";
 import { SettingsPageContainer } from "../components/settings/settingsLayout";
 import {
   retainSettingsScope,
@@ -111,7 +114,9 @@ function SettingsContentLayout() {
   const location = useLocation();
   const { search, environment } = useSettingsScope();
   const contentScopeKey =
-    location.pathname === "/settings/diagnostics" || location.pathname === "/settings/providers"
+    location.pathname === "/settings/diagnostics" ||
+    location.pathname === "/settings/providers" ||
+    location.pathname === "/settings/plugins"
       ? environment?.environmentId
       : JSON.stringify(search);
   const [restoreSignal, setRestoreSignal] = useState(0);
@@ -149,8 +154,14 @@ function SettingsRouteLayout() {
   const pathname = useLocation({ select: (location) => location.pathname });
   return (
     <SettingsScopeProvider
-      search={rawSearch}
-      singleEnvironment={pathname === "/settings/providers" || pathname === "/settings/secrets"}
+      search={
+        SETTINGS_ENVIRONMENT_ONLY_PATHS.has(pathname) ? { machine: rawSearch.machine } : rawSearch
+      }
+      singleEnvironment={
+        pathname === "/settings/providers" ||
+        pathname === "/settings/secrets" ||
+        pathname === "/settings/plugins"
+      }
       onChange={(next) => {
         // Send every axis so retain middleware recognizes "all" as an explicit target.
         void navigate({
diff --git a/apps/web/src/state/plugins.ts b/apps/web/src/state/plugins.ts
new file mode 100644
index 0000000000000..5d2dc7ac5028c
--- /dev/null
+++ b/apps/web/src/state/plugins.ts
@@ -0,0 +1,5 @@
+import { createPluginEnvironmentAtoms } from "@t3tools/client-runtime/state/plugins";
+
+import { connectionAtomRuntime } from "../connection/runtime";
+
+export const pluginEnvironment = createPluginEnvironmentAtoms(connectionAtomRuntime);
diff --git a/apps/web/src/themePalette.test.ts b/apps/web/src/themePalette.test.ts
index f6903655449b5..78578c41a5817 100644
--- a/apps/web/src/themePalette.test.ts
+++ b/apps/web/src/themePalette.test.ts
@@ -100,6 +100,16 @@ describe("theme files", () => {
     expect(legacy.colors.searchMatchBackground).toBe(
       getDefaultThemeColors("dark").searchMatchBackground,
     );
+    // A plugin's theme file imports too; its status colors and radius stay with the plugin.
+    const fromPlugin = parseThemeFile({
+      version: THEME_FILE_VERSION,
+      name: "From plugin",
+      appearance: "dark",
+      radius: "0.625rem",
+      colors: { canvas: "#151515", success: "#3fb950" },
+    });
+    expect(fromPlugin).not.toHaveProperty("radius");
+    expect(fromPlugin).not.toHaveProperty("statusColors");
     const theme = parseThemeFile({
       version: THEME_FILE_VERSION,
       name: "Search",
diff --git a/apps/web/src/themePalette.ts b/apps/web/src/themePalette.ts
index e7d9c5d5bf2fa..3adeb63c6af69 100644
--- a/apps/web/src/themePalette.ts
+++ b/apps/web/src/themePalette.ts
@@ -5,7 +5,7 @@ import * as Option from "effect/Option";
 import * as Schema from "effect/Schema";
 import { Atom } from "effect/reactivity";
 import "culori/css";
-import { converter, parse } from "culori/fn";
+import { converter, formatHex, parse } from "culori/fn";
 import {
   BUILT_IN_THEMES,
   EMBER_THEME,
@@ -17,10 +17,12 @@ import {
   T3_CODE_DARK_THEME_COLORS,
   RESERVED_THEME_IDS,
   THEME_COLOR_ROLES,
+  THEME_STATUS_COLOR_ROLES,
   type ThemeAppearance,
   type ThemeColorRole,
   type ThemeColors,
   type ThemeDefinition,
+  type ThemeStatusColors,
   type ThemeVariants,
 } from "@t3tools/shared/themePalettes";
 import {
@@ -29,8 +31,13 @@ import {
   type ContextChipAccentKind,
 } from "./lib/contextChipAccents";
 
+import { pluginUiEnvironmentsAtom } from "./plugins/pluginFollow";
 import { appAtomRegistry, subscribeAtomChanges } from "./rpc/atomRegistry";
-import { primaryServerEnvironmentThemesAtom } from "./state/server";
+import {
+  primaryServerConfigEventAtom,
+  primaryServerEnvironmentThemesAtom,
+  serverEnvironment,
+} from "./state/server";
 
 export { EMBER_THEME, GROVE_THEME, IRIS_THEME, OCEAN_THEME, T3_CHAT_THEME, THEME_COLOR_ROLES };
 export type { ThemeAppearance, ThemeColorRole, ThemeColors, ThemeDefinition, ThemeVariants };
@@ -45,6 +52,7 @@ export const CUSTOM_THEMES_STORAGE_KEY = "t3code:themes:v1";
 export const THEME_FOLLOW_SYSTEM_STORAGE_KEY = "t3code:theme-follow-system";
 export const THEME_APPEARANCE_MODE_STORAGE_KEY = "t3code:theme-appearance-mode";
 export const THEME_HALVES_STORAGE_KEY = "t3code:theme-halves:v1";
+export const ENVIRONMENT_THEMES_STORAGE_KEY = "t3code:environment-themes:v1";
 
 const LEGACY_T3_CHAT_DARK_THEME_ID = "t3-chat-dark";
 
@@ -108,6 +116,34 @@ function isThemeAppearance(value: unknown): value is ThemeAppearance {
   return value === "light" || value === "dark";
 }
 
+const THEME_RADIUS = /^(?:0|\d{1,2}(?:\.\d{1,3})?(?:px|rem))$/;
+
+function statusColorsFrom(colors: unknown): ThemeStatusColors | undefined {
+  if (!isRecord(colors)) return undefined;
+  const picked: Partial<Record<keyof ThemeStatusColors, string>> = {};
+  for (const role of THEME_STATUS_COLOR_ROLES) {
+    const value = colors[role];
+    if (isThemeColor(value)) picked[role] = value;
+  }
+  return Object.keys(picked).length > 0 ? picked : undefined;
+}
+
+/** A published theme's corner radius and status colors, as `ThemeDefinition` holds them. */
+function publishedThemeExtras(
+  radius: unknown,
+  statusColors: Partial<Record<ThemeAppearance, unknown>>,
+): Pick<ThemeDefinition, "radius" | "statusColors"> {
+  const status: Partial<Record<ThemeAppearance, ThemeStatusColors>> = {};
+  for (const appearance of ["light", "dark"] as const) {
+    const colors = statusColorsFrom(statusColors[appearance]);
+    if (colors !== undefined) status[appearance] = colors;
+  }
+  return {
+    ...(typeof radius === "string" && THEME_RADIUS.test(radius) ? { radius } : {}),
+    ...(Object.keys(status).length > 0 ? { statusColors: status } : {}),
+  };
+}
+
 export function isThemeColor(value: unknown): value is string {
   return typeof value === "string" && toCanonicalThemeColor(value) !== null;
 }
@@ -166,7 +202,8 @@ function parseStoredThemeVariants(
   return Object.keys(variants).length > 0 ? variants : undefined;
 }
 
-function parseStoredTheme(value: unknown): ThemeDefinition | null {
+// Only published themes keep `sidebarArtwork`; custom themes never show the artwork.
+function parseStoredTheme(value: unknown, published = false): ThemeDefinition | null {
   if (!isRecord(value)) return null;
   if (!isThemeId(value.id) || RESERVED_THEME_IDS.has(value.id)) return null;
   if (!isThemeLabel(value.label) || !isThemeAppearance(value.appearance)) return null;
@@ -184,13 +221,20 @@ function parseStoredTheme(value: unknown): ThemeDefinition | null {
     ...(variants ? { variants } : {}),
     ...(collection ? { collection } : {}),
     ...(value.managed === true ? { managed: true } : {}),
+    ...(published && value.sidebarArtwork === true ? { sidebarArtwork: true } : {}),
+    ...(published
+      ? publishedThemeExtras(value.radius, isRecord(value.statusColors) ? value.statusColors : {})
+      : {}),
   };
 }
 
-function parseStoredThemes(storedThemes: ReadonlyArray<unknown>): ReadonlyArray<ThemeDefinition> {
+function parseStoredThemes(
+  storedThemes: ReadonlyArray<unknown>,
+  published = false,
+): ReadonlyArray<ThemeDefinition> {
   const themes: ThemeDefinition[] = [];
   for (const value of storedThemes) {
-    const theme = parseStoredTheme(value);
+    const theme = parseStoredTheme(value, published);
     if (theme && !themes.some((existing) => existing.id === theme.id)) {
       themes.push(theme);
     }
@@ -277,6 +321,12 @@ function environmentThemeDefinition(theme: EnvironmentTheme): ThemeDefinition {
     appearance: theme.appearance,
     colors: publishedThemeColors(theme, theme.appearance, theme.colors),
     ...(Object.keys(variants).length > 0 ? { variants } : {}),
+    ...(theme.sidebarArtwork === true ? { sidebarArtwork: true } : {}),
+    ...publishedThemeExtras(theme.radius, {
+      [theme.appearance]: theme.colors,
+      [theme.appearance === "dark" ? "light" : "dark"]:
+        theme.variants?.[theme.appearance === "dark" ? "light" : "dark"],
+    }),
     // Only the pure seeded form is guided-generator output. An exported file,
     // or seeds carrying explicit role overrides, must open Duplicate in the
     // advanced editor -- the guided one regenerates from canvas and accent and
@@ -312,22 +362,114 @@ export function publishedThemeDefinitions(
     .map(environmentThemeDefinition);
 }
 
-// Every reconnect snapshot delivers a fresh but usually identical array; keeping the
-// previous one skips regenerating palettes and repainting the document for it.
+// The main environment's own palettes, then the plugin palettes of each environment plugin UI
+// loads from, as plugin styles do. Every reconnect snapshot delivers a fresh but usually identical
+// array; keeping the previous one skips regenerating palettes and repainting the document for it.
 const publishedThemesAtom = Atom.make((get): ReadonlyArray<EnvironmentTheme> => {
-  const next = get(primaryServerEnvironmentThemesAtom);
+  const next = get(primaryServerEnvironmentThemesAtom).filter((theme) => theme.fromPlugin !== true);
+  const ids = new Set(next.map((theme) => theme.id));
+  for (const environmentId of get(pluginUiEnvironmentsAtom)) {
+    const themes = get(serverEnvironment.configValueAtom(environmentId))?.environmentThemes ?? [];
+    for (const theme of themes) {
+      if (theme.fromPlugin !== true || ids.has(theme.id)) continue;
+      ids.add(theme.id);
+      next.push(theme);
+    }
+  }
   const previous = Option.getOrNull(get.self<ReadonlyArray<EnvironmentTheme>>());
   return previous !== null && Equal.equals(previous, next) ? previous : next;
 }).pipe(Atom.withLabel("web-published-environment-themes"));
 
+// The server sends its palettes as their own event after it connects. Until the first one,
+// the palettes it sent last time stand in, so a published theme (a plugin's, say) paints from
+// the first frame, and the boot screen in index.html reads the same copy.
+const environmentThemesKnownAtom = Atom.make(false).pipe(Atom.keepAlive);
+
+function readStoredEnvironmentThemes(): ReadonlyArray<ThemeDefinition> {
+  if (typeof window === "undefined") return EMPTY_CUSTOM_THEMES;
+  try {
+    const parsed: unknown = JSON.parse(
+      window.localStorage.getItem(ENVIRONMENT_THEMES_STORAGE_KEY) ?? "null",
+    );
+    return Array.isArray(parsed) ? parseStoredThemes(parsed, true) : EMPTY_CUSTOM_THEMES;
+  } catch {
+    return EMPTY_CUSTOM_THEMES;
+  }
+}
+
+function storeEnvironmentThemes(themes: ReadonlyArray<ThemeDefinition>) {
+  try {
+    if (themes.length === 0) {
+      window.localStorage.removeItem(ENVIRONMENT_THEMES_STORAGE_KEY);
+      return;
+    }
+    const stored = JSON.stringify(themes);
+    if (window.localStorage.getItem(ENVIRONMENT_THEMES_STORAGE_KEY) !== stored) {
+      window.localStorage.setItem(ENVIRONMENT_THEMES_STORAGE_KEY, stored);
+    }
+  } catch {
+    // Without storage the palettes still arrive with the server, a moment later.
+  }
+}
+
 /**
- * The environment's palettes are not saved: they are republished by the server
- * on every change and would go stale the moment the machine's theme moved on.
- * Kept alive because theme lookups read it outside React on every repaint.
+ * The environment's palettes, republished by the server on every change. The saved copy is only
+ * read until the server sends them. Kept alive because theme lookups read it outside React on
+ * every repaint.
  */
-export const environmentThemeDefinitionsAtom = Atom.make((get) =>
-  publishedThemeDefinitions(get(publishedThemesAtom)),
-).pipe(Atom.keepAlive, Atom.withLabel("web-environment-theme-definitions"));
+export const environmentThemeDefinitionsAtom = Atom.make((get) => {
+  const published = publishedThemeDefinitions(get(publishedThemesAtom));
+  if (published.length > 0) return published;
+  // The shared empty list, so a server without themes never repaints the app.
+  return get(environmentThemesKnownAtom) ? EMPTY_CUSTOM_THEMES : readStoredEnvironmentThemes();
+}).pipe(Atom.keepAlive, Atom.withLabel("web-environment-theme-definitions"));
+
+// Derived from the palettes rather than read in the event listener: the event can be announced
+// before the same update reaches the palettes.
+const environmentThemesToSaveAtom = Atom.make((get) =>
+  get(environmentThemesKnownAtom) ? get(environmentThemeDefinitionsAtom) : null,
+);
+
+/** Switches to the server's palettes once it sends them, and saves them for the next start. */
+export function startEnvironmentThemeCache(): () => void {
+  const stopKnowing = appAtomRegistry.subscribe(
+    primaryServerConfigEventAtom,
+    (event) => {
+      if (event?.type === "environmentThemesUpdated") {
+        appAtomRegistry.set(environmentThemesKnownAtom, true);
+      }
+    },
+    { immediate: true },
+  );
+  const stopSaving = appAtomRegistry.subscribe(
+    environmentThemesToSaveAtom,
+    (themes) => {
+      if (themes !== null) storeEnvironmentThemes(themes);
+    },
+    { immediate: true },
+  );
+  return () => {
+    stopKnowing();
+    stopSaving();
+  };
+}
+
+/**
+ * An imported theme file whose id a published theme, such as a plugin's, already uses, renamed to a
+ * copy. A saved theme wins an id collision on purpose, so editing a published theme overrides it,
+ * but importing a plugin's own file would otherwise hide the plugin's theme and its radius and
+ * status colors.
+ */
+export function asImportedThemeCopy(theme: ThemeDefinition): ThemeDefinition {
+  const published = getEnvironmentThemes();
+  if (!published.some((candidate) => candidate.id === theme.id)) return theme;
+  // A saved copy is left out, so importing the file again offers to replace that copy.
+  const taken = new Set(published.map((candidate) => candidate.id));
+  const base = `${theme.id.slice(0, 38)}-copy`;
+  let id = base;
+  for (let copy = 2; taken.has(id); copy += 1) id = `${base}-${copy}`;
+  return { ...theme, id, label: `${theme.label.slice(0, 43)} copy` };
+}
 
 function getEnvironmentThemes(): ReadonlyArray<ThemeDefinition> {
   return appAtomRegistry.get(environmentThemeDefinitionsAtom);
@@ -1185,14 +1327,24 @@ export function getThemeDefinition(theme: ThemePreference): ThemeDefinition | nu
   );
 }
 
-export function themeAllowsSidebarArtwork(theme: ThemePreference): boolean {
+/** The send button's artwork follows built-in themes only; a published theme styles it plainly. */
+export function themeAllowsComposerArtwork(theme: ThemePreference): boolean {
   const themeId = themeIdFromPreference(theme);
   return (
-    BUILT_IN_THEME_DEFINITIONS.find((definition) => definition.id === themeId)?.sidebarArtwork ===
+    BUILT_IN_THEME_DEFINITIONS.find((candidate) => candidate.id === themeId)?.sidebarArtwork ===
     true
   );
 }
 
+/** Built-in themes and published ones, such as a plugin's, can allow it; custom themes can't. */
+export function themeAllowsSidebarArtwork(theme: ThemePreference): boolean {
+  const themeId = themeIdFromPreference(theme);
+  const definition =
+    BUILT_IN_THEME_DEFINITIONS.find((candidate) => candidate.id === themeId) ??
+    getEnvironmentThemes().find((candidate) => candidate.id === themeId);
+  return definition?.sidebarArtwork === true;
+}
+
 /** Every selection path must check single-appearance themes to keep mix and appearance tiles in sync. */
 export function singleAppearanceOf(theme: ThemeDefinition): ThemeAppearance | null {
   const modes = getThemeModes(theme);
@@ -1425,11 +1577,15 @@ export function removeCustomThemes(themeIds: ReadonlyArray<string>): void {
   );
 }
 
+const THEME_STATUS_COLOR_ROLE_SET: ReadonlySet<string> = new Set(THEME_STATUS_COLOR_ROLES);
+
 function parseThemeColorOverrides(value: unknown): ThemeColorOverrides {
   if (!isRecord(value)) throw new Error("Theme colors must be objects.");
 
   const overrides: Partial<Record<ThemeColorRole, string>> = {};
   for (const [role, color] of Object.entries(value)) {
+    // A published theme's status colors; an imported copy keeps T3's own, like its radius.
+    if (THEME_STATUS_COLOR_ROLE_SET.has(role)) continue;
     if (!THEME_COLOR_ROLE_SET.has(role)) {
       throw new Error(`"${role}" is not a supported theme color role.`);
     }
@@ -1604,10 +1760,39 @@ export function applyThemeColorPreview(colors: ThemeColors, appearance: ThemeApp
   for (const [role, value] of Object.entries(colors) as Array<[ThemeColorRole, string]>) {
     if (isThemeColor(value)) root.style.setProperty(APP_THEME_VARIABLES[role], value);
   }
+  applyPublishedThemeExtras(root, null, appearance);
   applyContextChipVariables(root, colors);
   setThemePreviewAppearance(appearance);
 }
 
+const STATUS_COLOR_VARIABLES: Readonly<Record<keyof ThemeStatusColors, string>> = {
+  success: "--success",
+  successForeground: "--success-foreground",
+  info: "--info",
+  infoForeground: "--info-foreground",
+};
+
+// Set inline on the root, which beats T3's own light and dark values, and removed otherwise.
+function applyPublishedThemeExtras(
+  root: HTMLElement,
+  palette: ThemeDefinition | null,
+  mode: ThemeAppearance,
+) {
+  // Custom themes win an id collision, so only the published definition itself counts.
+  if (palette !== null && getEnvironmentThemes().includes(palette)) {
+    root.dataset.themePublished = "";
+  } else {
+    delete root.dataset.themePublished;
+  }
+  const set = (variable: string, value: string | undefined) => {
+    if (value === undefined) root.style.removeProperty(variable);
+    else root.style.setProperty(variable, value);
+  };
+  set("--radius", palette?.radius);
+  const status = palette?.statusColors?.[mode];
+  for (const role of THEME_STATUS_COLOR_ROLES) set(STATUS_COLOR_VARIABLES[role], status?.[role]);
+}
+
 export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppearance): void {
   if (typeof document === "undefined") return;
 
@@ -1625,6 +1810,7 @@ export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppe
       root.style.setProperty(APP_THEME_VARIABLES[role], value);
     }
     applyContextChipVariables(root, colors);
+    applyPublishedThemeExtras(root, palette, mode);
     return;
   }
 
@@ -1632,9 +1818,18 @@ export function applyThemePalette(theme: ThemePreference, appearance?: ThemeAppe
   for (const variable of Object.values(APP_THEME_VARIABLES)) {
     root.style.removeProperty(variable);
   }
+  applyPublishedThemeExtras(root, null, appearance ?? "light");
   applyContextChipVariables(root, getStandardPaintedThemeColors(appearance ?? "light"));
 }
 
+/** The canvas `applyThemePalette` paints for `theme`, as `#rrggbb`; null without a palette. */
+export function themeCanvasHex(theme: ThemePreference, appearance: ThemeAppearance): string | null {
+  const palette = getThemeDefinition(theme);
+  if (!palette) return null;
+  const canvas = parse((getThemeColorsForMode(palette, appearance) ?? palette.colors).canvas);
+  return canvas ? formatHex(canvas) : null;
+}
+
 export function resolveThemeAppearance(
   theme: ThemePreference,
   systemDark: boolean,
diff --git a/docs/README.md b/docs/README.md
index af3c45ce567b1..5dcd957c81990 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -11,6 +11,7 @@
 - [Project settings](./user/project-settings.md)
 - [Appearance and themes](./user/appearance.md)
 - [Keyboard shortcuts](./user/keybindings.md)
+- [Plugins](./user/plugins.md)
 - [SnapShots](./user/snap-shot.md)
 - [Visual replies](./user/html-renders.md)
 - [Import browser sessions](./user/browser-import.md)
@@ -57,6 +58,7 @@ source alone does not explain. Most code changes do not need an internal documen
 - [Terminal runtime](./internals/terminal-runtime.md)
 - [Devices](./internals/devices.md)
 - [Voice input](./internals/voice-input.md)
+- [Plugins](./internals/plugins.md)
 
 ### Runbooks
 
diff --git a/docs/internals/plugins.md b/docs/internals/plugins.md
new file mode 100644
index 0000000000000..253e6cf5e692c
--- /dev/null
+++ b/docs/internals/plugins.md
@@ -0,0 +1,140 @@
+# Plugins
+
+A plugin is a folder with a `t3-plugin.json` manifest
+([schema](../../packages/contracts/src/plugins.ts)), typed with
+[`@t3tools/plugin-sdk`](../../packages/plugin-sdk).
+[`PluginHost`](../../apps/server/src/plugins/PluginHost.ts) runs plugins and
+[`PluginInstaller`](../../apps/server/src/plugins/PluginInstaller.ts) installs them.
+
+## Trust and failure
+
+Plugins are trusted code the user chose to install. Server entries run in the server process and web
+bundles run as React code in the page with every connection's credentials, with no sandbox. Manifest
+`permissions` are shown on the plugin's row and not enforced, and `settings.get()` hands plugins
+secret values in plain text. Do not shape the API around a future sandbox.
+
+The host isolates failure instead. A plugin that throws or hangs while starting is marked failed,
+and a throw in a handler fails that call. Node exits on a rejection nobody handles, so every promise
+the API hands a plugin comes from `call` or `refused` in
+[`facade.ts`](../../apps/server/src/plugins/api/facade.ts), which mark it handled.
+
+Plugin code can still fail where nothing T3 runs is waiting, such as in a timer or a child process
+with no `'error'` listener. The [failure guard](../../apps/server/src/plugins/pluginFailureGuard.ts)
+ties such a failure to a plugin when it can. A plugin's unhandled rejection becomes that plugin's
+`serverFailure`, and Node does not exit. The plugin stays active. Disabling or reloading it releases
+what it registered through the API, but timers it started itself keep running, and Node keeps its
+code until the server restarts. This is accepted because the user chose to install that code, and
+the alternative is one plugin bug stopping the server and every running agent.
+
+An uncaught exception still stops the server, because Node calls resuming after one unsafe. When the
+guard ties one to a plugin, it saves the error to `plugins.json` before Node exits. The next start
+lists that plugin as failed with its switch off until the user turns it on again, so a plugin that
+throws at startup can't stop every start. A failure the guard can't tie to a plugin
+stops the server too.
+
+The host runs plugin code in an `AsyncLocalStorage` scope, which Node carries into the timers and
+callbacks that code starts, so a failure with only Node's frames in its stack is still the plugin's.
+Before Node 24 that scope slows every promise in the process about 3x, so the host fails plugins
+with a server half there as incompatible, though the server still allows Node 22.16+ and 23.11+.
+Plugins without one still run.
+
+## The API and manifests
+
+The server bundle inlines `effect`, so plugins never share the host's Effect runtime or `Schema`
+instances. They get Promises, `AsyncIterable` streams, `AbortSignal` and the SDK's own types, never
+T3's contracts, which change between releases.
+
+`plugins.invoke` and `plugins.subscribe` need only the read scope, so the host checks a method's
+`access` itself: a `write` method needs the caller's operate scope, as T3's own changes do. A call
+fails after 30 seconds and aborts the handler's signal, so a handler that never answers can't hold
+a client's call open. An agent's tool call gets 5 minutes, because a tool may do real work, then
+fails the same way with an error the agent reads, so a hung tool can't hold the turn. Each
+subscriber gets its own sliding buffer per channel, so a busy channel or a slow subscriber drops
+only that channel's oldest values.
+
+Manifests ignore keys they don't know, so a newer manifest key is lost silently on an older T3.
+`engines.t3` is how a plugin requires a newer T3: the server refuses to install or start a version
+outside it. `api.version` is how a plugin detects newer API members and still runs on older
+releases, so a change that adds a member raises it and names that version in the member's doc.
+
+Discovery and install compile the manifest's `settingsSchema`, so a schema T3 can't validate fails
+the plugin with the reason instead of refusing every save later.
+
+## State lives beside T3's
+
+`<stateDir>/plugins.json` holds enabled flags, dev paths and the plugins that stopped the server.
+Settings go in `plugin-data/<id>/` and storage in `plugins.sqlite`. They stay out of
+`settings.json`, whose writer drops keys it doesn't know, and out of `statev2.sqlite`, whose
+numbered migrations refuse to start when a fork's id collides with an upstream one. Settings stay
+out of `plugins/<id>/`, so replacing a plugin's files keeps them. Removing a plugin deletes its
+settings, secrets and storage, so nothing is left that no plugin can reach.
+
+All of a plugin's secrets share one secret store entry, because a keychain can't list names and
+removal must also find the secrets of fields a plugin has since renamed. The settings store keeps
+each plugin's files in memory after the first read and changes them only through its own writes,
+so a hand edit to `settings.json` shows after a restart.
+
+## Installing
+
+Installs copy into `plugin-staging/`, outside `plugins/`, so discovery never sees a half-written
+plugin. Only the swap takes the lifecycle lock, so a slow copy does not block other plugins. The
+old version waits in staging until the new one starts and goes back if it fails.
+
+Clients upload a dropped folder's files, never its path, which would mean nothing on a remote
+environment. They post them over HTTP to a URL `plugins.createUploadUrl` signs for 5 minutes,
+because one large WebSocket message holds up every other stream on the socket. As for attachments,
+the signature is the credential, so the upload works the same on every kind of connection. Each URL
+installs once. The server keeps its unused URLs in memory, so a restart refuses those it signed
+before.
+
+Discovery takes the id from the manifest, because people copy plugin folders in by hand. Settings,
+storage and the enabled flag belong to the id, so a later folder with an id already listed fails as
+a duplicate. Installed folders come first, in name order, then dev paths. Removing or unlinking a
+duplicate deletes only its folder or link, and the copy in use keeps the data. Discovery also
+forgets the enabled flag and crash record of every id no folder has, so a folder copied in later
+with that id starts off. Nothing watches `plugins/`: the server reads it at startup, on reload and
+when Settings asks.
+
+## Clients
+
+Each browser keeps its own choice of the environments it loads plugin UI from, the main one by
+default, because that code runs with every connection's credentials. Right panels show only in their
+environment's threads. Commands have no thread, so only the first chosen environment registers them.
+
+Rows carry `hasSettings` rather than the settings schema. Every client, read-only ones and the
+idle watcher included, gets a plugin's row again on each status change, and only the settings
+form needs the schema, which it fetches with `plugins.settings.get`.
+
+With no plugins, the plugin system adds about 11 KB of minified JS to the startup chunks of a
+production build, about 4.5 KB gzipped, in 5 more chunks. Most of it is the plugin contract
+schemas and RPC definitions,
+[`PluginLoaderStarter`](../../apps/web/src/plugins/PluginLoaderStarter.tsx), `pluginFollow` and
+the [`pluginUi.ts`](../../apps/web/src/plugins/pluginUi.ts) stub that app code reads plugin parts
+through. Once the app is idle, the starter downloads a 2 KB watcher and follows
+`plugins.subscribeStates` for each chosen environment, a stream of its own because the server
+config stream would resend the whole config on every plugin change. It downloads the web loader
+only when an active plugin has a web part, and a separate small styles chunk only when one has a
+`styles/` folder. The server starts plugins after it is listening.
+
+A bare `import(url)` cannot send credentials, so the loader fetches each bundle with the
+connection's credentials and imports it from a `blob:` URL, which the desktop CSP allows. Mobile
+release builds cannot load code, so the mobile app shows no plugin UI, settings or themes.
+
+Bundles get React, the UI kit, `Atom` functions and atom hooks from `globalThis.__t3PluginHost`,
+because a second React or effect would not share T3's renderer or atom registry. The SDK declares
+its own atom types, so a plugin needs no `effect` and T3's effect upgrades don't break its
+typecheck. No type check compares those types with effect's. Instead the `hello-web` fixture
+typechecks against the SDK's types, and `pluginLoader.browser.test.ts` runs its settings panel on
+effect's functions, so an effect upgrade that changes one the fixture uses fails there. A change to
+a shared function or hook needs a matching change in the SDK's `atom.ts` or `atom-react.ts`.
+
+Plugin themes arrive over the server config stream after the first paint, so the client saves them
+in localStorage for the boot script in `index.html`. The server marks plugin themes, so the client
+can show only those of chosen environments. The desktop main process cannot read localStorage, so
+the page sends it the canvas it paints under a light and a dark native theme.
+
+## Agent tools
+
+MCP servers can't remove a tool, so each plugin tool registers with an `EnabledWhen` check that the
+server runs on every list and call. A stopped plugin's tools leave new listings and answer as not
+found.
diff --git a/docs/user/plugins.md b/docs/user/plugins.md
new file mode 100644
index 0000000000000..f82dbeabdc805
--- /dev/null
+++ b/docs/user/plugins.md
@@ -0,0 +1,90 @@
+# Plugins
+
+Plugins add features to T3 Code: right panels, commands, themes, styles and tools for agents. A
+plugin belongs to one environment and runs inside that environment's T3 Code server, with the same
+access to your files, threads and credentials as T3 Code itself. A plugin's row lists the
+permissions it says it uses, but T3 Code doesn't enforce them. Install only plugins you trust.
+
+## Add a plugin
+
+Open **Settings → Plugins** and drag a plugin's folder onto the page. **Add plugin** also lets you
+choose the folder in a file window.
+
+T3 Code copies a plugin folder into the environment's `plugins` folder, so later changes to your
+copy do not affect the installed plugin. To update it, add the new version's folder the same way.
+A new plugin is installed turned off, so none of it runs until you have read its row and turned it
+on. A new version of a plugin stays on or off as the old one was. If a new version fails to install
+or start, you keep the version you had, and T3 Code says why. A plugin that needs a newer version
+of T3 Code, or whose settings T3 Code can't check, isn't installed, and T3 Code says why.
+
+Plugin folders you copy into the `plugins` folder yourself show up, turned off, the next time you
+open **Settings → Plugins**. That folder is `~/.t3/userdata/plugins` on the environment's machine
+by default. A folder with the same plugin id as one you already have doesn't run, and its row names
+the folder that has that id. Remove one of them.
+
+**Settings → Plugins** shows one environment at a time, the main one until you pick another at the
+top of the page. To use a plugin on several environments, add it to each of them.
+
+## Turn a plugin on or off
+
+Use the switch on the plugin's row. A plugin that fails to start shows the reason on its row, for
+example when it needs a newer version of T3 Code. A plugin with server code needs the environment's
+T3 Code server to run on Node 24 or later, as the desktop app's does. **Reload** restarts a plugin
+with its current files. Turning a plugin off doesn't stop code it started on its own, such as a
+timer. If its row says some of its code is still running, restart T3 Code to stop it.
+
+A plugin can stop T3 Code's server with an error. When the server starts again, that plugin stays
+off and its row says it stopped the server. To try it again, turn it back on.
+
+## Plugin settings
+
+If a plugin has settings, open them with the settings button on its row. Each setting saves as soon
+as you change it or leave its field, and an empty field shows the default the plugin uses. Secret
+fields are stored in the environment's secret store and are never shown again after you save them;
+the clear button next to one removes it.
+
+## Remove a plugin
+
+Choose **Remove** on the plugin's row and confirm in the popup. Removing a plugin also deletes its
+settings, secrets and stored data, and this can't be undone. Reinstalling it later starts fresh.
+
+A plugin loaded from its own folder shows **Unlink** instead. Unlinking stops loading it and deletes
+its settings, secrets and stored data the same way, but leaves the folder where it is.
+
+On a duplicate's row, **Remove** deletes only that folder and **Unlink** only stops loading it. The
+plugin in use keeps running with its settings, secrets and stored data.
+
+## Themes and styles
+
+A plugin can change how T3 Code looks without running any code. Theme files in its `themes` folder
+show up as themes while the plugin is on. CSS files in its `styles` folder apply to the app while
+the plugin is on, on top of T3 Code's own styles and your theme. A plugin can be just a `styles`
+folder and its manifest. Themes and styles load from the same environments as plugin UI (see [Where
+plugins live](#where-plugins-live)).
+
+## Tools for agents
+
+A plugin can give agents new tools. Agents in threads started after you turn the plugin on see them.
+Turning the plugin off takes its tools away from every thread. Tools that only read work in any
+thread. Tools that change things work only in a thread set to **Full access** and not in Plan mode.
+
+## Where plugins live
+
+Installed plugins are in the `plugins` folder of the environment's T3 Code data directory, one
+folder per plugin. Their settings are in `plugin-data`, and `plugins.json` records which ones are
+enabled. T3 Code reads a plugin's settings file once, so an edit you make to it by hand shows after
+T3 Code restarts.
+
+Plugin UI, styles and themes load in the web and desktop apps. They load from the app's main
+environment, which is the desktop app's own server or the server the web app was opened from, and
+from any other environment you turn on under **Load plugin UI from** in **Settings → Plugins**. You
+can turn the main environment off there too. app.t3.codes and a desktop app with its local
+environment turned off have no main environment, so no plugin UI loads until you choose one. The
+choice applies to this browser only. Each chosen environment's plugins run code in this window, with
+access to every environment this window is connected to, so choose only environments whose plugins
+you trust.
+
+A plugin's right panels show only in the threads of the plugin's own environment. Its command palette
+commands come from only one chosen environment, the main one unless you turn it off. When you choose
+more than one, **Load plugin UI from** says which. The mobile app doesn't show plugin UI, settings or
+themes.
diff --git a/knip.jsonc b/knip.jsonc
index c2093737fd942..17b47601affed 100644
--- a/knip.jsonc
+++ b/knip.jsonc
@@ -140,6 +140,19 @@
       // These workspace packages are private to this monorepo.
       "includeEntryExports": true,
     },
+    "packages/plugin-sdk": {
+      // Plugin authors outside this repository import these exports.
+      "includeEntryExports": false,
+      // The plugin host and the web loader load example and fixture entries from their manifests.
+      "entry": [
+        "examples/*/*.cjs",
+        "examples/*/web.tsx",
+        "examples/*/vite.config.ts",
+        "fixtures/*/*.cjs",
+        "fixtures/*/web.{js,tsx}",
+        "fixtures/*/vite.config.ts",
+      ],
+    },
     "packages/effect-acp": {
       "includeEntryExports": true,
       "entry": ["test/fixtures/*.ts"],
diff --git a/package.json b/package.json
index c78b879301b9e..e80dc1015c9f3 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "report:renders": "node scripts/render-metrics.ts",
     "lint": "vp lint --report-unused-disable-directives",
     "knip": "knip --preprocessor ./scripts/knip-schemas.ts",
-    "knip:check": "knip --include files,dependencies --no-config-hints && knip --workspace apps/server --workspace apps/desktop --workspace apps/web --workspace packages/client-runtime --workspace packages/contracts --workspace packages/effect-acp --workspace packages/effect-codex-app-server --workspace packages/shared --workspace packages/ssh --workspace packages/tailscale --workspace packages/provider-core --workspace packages/provider-acp --workspace packages/provider-acp-registry --workspace packages/provider-testing --workspace packages/provider-pi --workspace packages/provider-muse --workspace packages/provider-opencode --workspace packages/provider-cursor --workspace packages/provider-fx --workspace packages/provider-grok --workspace packages/secret-provider-core --workspace packages/secret-provider-definitions --workspace packages/secret-provider-onepassword --workspace packages/source-control-core --workspace packages/source-control-definitions --workspace packages/source-control-azure-devops --workspace packages/source-control-bitbucket --workspace packages/source-control-forgejo --workspace packages/source-control-gitcafe --workspace packages/source-control-github --workspace packages/source-control-gitlab --workspace packages/source-control-testing --exports --preprocessor ./scripts/knip-schemas.ts --no-config-hints",
+    "knip:check": "knip --include files,dependencies --no-config-hints && knip --workspace apps/server --workspace apps/desktop --workspace apps/web --workspace packages/client-runtime --workspace packages/contracts --workspace packages/effect-acp --workspace packages/effect-codex-app-server --workspace packages/shared --workspace packages/ssh --workspace packages/tailscale --workspace packages/plugin-sdk --workspace packages/provider-core --workspace packages/provider-acp --workspace packages/provider-acp-registry --workspace packages/provider-testing --workspace packages/provider-pi --workspace packages/provider-muse --workspace packages/provider-opencode --workspace packages/provider-cursor --workspace packages/provider-fx --workspace packages/provider-grok --workspace packages/secret-provider-core --workspace packages/secret-provider-definitions --workspace packages/secret-provider-onepassword --workspace packages/source-control-core --workspace packages/source-control-definitions --workspace packages/source-control-azure-devops --workspace packages/source-control-bitbucket --workspace packages/source-control-forgejo --workspace packages/source-control-gitcafe --workspace packages/source-control-github --workspace packages/source-control-gitlab --workspace packages/source-control-testing --exports --preprocessor ./scripts/knip-schemas.ts --no-config-hints",
     "knip:production": "knip --production --preprocessor ./scripts/knip-schemas.ts",
     "lint:mobile": "node scripts/mobile-native-static-check.ts",
     "mobile:install": "node scripts/mobile-native-client.ts ensure",
diff --git a/packages/client-runtime/package.json b/packages/client-runtime/package.json
index d1b48e1d76f4f..1fa3cb1cad77b 100644
--- a/packages/client-runtime/package.json
+++ b/packages/client-runtime/package.json
@@ -191,6 +191,10 @@
       "types": "./src/state/git.ts",
       "default": "./src/state/git.ts"
     },
+    "./state/plugins": {
+      "types": "./src/state/plugins.ts",
+      "default": "./src/state/plugins.ts"
+    },
     "./state/command-output": {
       "types": "./src/state/commandOutput.ts",
       "default": "./src/state/commandOutput.ts"
diff --git a/packages/client-runtime/src/rpc/client.ts b/packages/client-runtime/src/rpc/client.ts
index 2832a4e231556..198502a1c7208 100644
--- a/packages/client-runtime/src/rpc/client.ts
+++ b/packages/client-runtime/src/rpc/client.ts
@@ -59,6 +59,8 @@ export type EnvironmentSubscriptionRpcTag =
   | typeof WS_METHODS.subscribeServerConfig
   | typeof WS_METHODS.subscribeServerLifecycle
   | typeof WS_METHODS.scheduledTasksSubscribe
+  | typeof WS_METHODS.pluginsSubscribeStates
+  | typeof WS_METHODS.pluginsSubscribe
   | typeof WS_METHODS.serverGetStorageCleanupReport
   | typeof WS_METHODS.serverGetDatabaseStorage
   | typeof WS_METHODS.subscribeTerminalMetadata
diff --git a/packages/client-runtime/src/state/commandPermissions.test.ts b/packages/client-runtime/src/state/commandPermissions.test.ts
index adfad46a41b89..bc59994f102a9 100644
--- a/packages/client-runtime/src/state/commandPermissions.test.ts
+++ b/packages/client-runtime/src/state/commandPermissions.test.ts
@@ -96,11 +96,20 @@ describe("command permissions", () => {
     ),
   );
 
-  it.effect("requires the destination settings grant to run storage cleanup", () =>
+  it.effect.each([
+    WS_METHODS.serverRunStorageCleanup,
+    // Installing, enabling, reloading or configuring a plugin runs its code in the server.
+    WS_METHODS.pluginsSetEnabled,
+    WS_METHODS.pluginsReload,
+    WS_METHODS.pluginsCreateUploadUrl,
+    WS_METHODS.pluginsRescan,
+    WS_METHODS.pluginsUninstall,
+    WS_METHODS.pluginsSettingsUpdate,
+  ])("requires the destination settings grant for %s", (method) =>
     Effect.scoped(
       Effect.gen(function* () {
         const registry = yield* setup;
-        const cleanup = createCommandPermissions(runtime, WS_METHODS.serverRunStorageCleanup);
+        const cleanup = createCommandPermissions(runtime, method);
         registry.set(sessions(env), AsyncResult.success(grant(true)));
         expect(registry.get(cleanup.permissionAtom(env))).toBe(false);
         expect((yield* cleanup.authorize(registry, env).pipe(Effect.flip))._tag).toBe(
diff --git a/packages/client-runtime/src/state/environmentHttpAuth.ts b/packages/client-runtime/src/state/environmentHttpAuth.ts
index e3fcbb5ffadfa..385d5e57355f6 100644
--- a/packages/client-runtime/src/state/environmentHttpAuth.ts
+++ b/packages/client-runtime/src/state/environmentHttpAuth.ts
@@ -221,3 +221,6 @@ const executeEnvironmentRequest = Effect.fnUntraced(function* <
     }),
   );
 });
+
+// Plugin file requests sign the same way.
+export { buildEnvironmentAuthHeaders };
diff --git a/packages/client-runtime/src/state/plugins.ts b/packages/client-runtime/src/state/plugins.ts
new file mode 100644
index 0000000000000..22c4b60d3fc7d
--- /dev/null
+++ b/packages/client-runtime/src/state/plugins.ts
@@ -0,0 +1,89 @@
+import { applyPluginStatesEvent, type PluginListResult, WS_METHODS } from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import * as Stream from "effect/Stream";
+import { Atom } from "effect/reactivity";
+
+import type { PreparedHttpAuthorization } from "../connection/model.ts";
+import type { EnvironmentRegistry } from "../connection/registry.ts";
+import { ManagedRelayDpopSigner } from "../relay/managedRelay.ts";
+import { buildEnvironmentAuthHeaders } from "./environmentHttpAuth.ts";
+import {
+  createEnvironmentRpcCommand,
+  createEnvironmentRpcQueryAtomFamily,
+  createEnvironmentRpcSubscriptionAtomFamily,
+  createRuntimeCommand,
+} from "./runtime.ts";
+
+const NO_PLUGINS: PluginListResult = { plugins: [] };
+
+/** Plugin management and calls into plugins. Nothing here runs until something reads it. */
+export function createPluginEnvironmentAtoms<R, E>(
+  runtime: Atom.AtomRuntime<EnvironmentRegistry | R, E>,
+) {
+  return {
+    // The server sends the list once, then the rows that change; readers get the whole list.
+    pluginsLive: createEnvironmentRpcSubscriptionAtomFamily(runtime, {
+      label: "environment-data:plugins:live",
+      tag: WS_METHODS.pluginsSubscribeStates,
+      // `scan` emits its seed first; skipping it keeps the list loading until the first event.
+      transform: (events) =>
+        events.pipe(
+          Stream.scan(() => NO_PLUGINS, applyPluginStatesEvent),
+          Stream.filter((list) => list !== NO_PLUGINS),
+        ),
+    }),
+    pluginSettings: createEnvironmentRpcQueryAtomFamily(runtime, {
+      label: "environment-data:plugins:settings",
+      tag: WS_METHODS.pluginsSettingsGet,
+      // Dropped when the editor closes, so reopening it shows the saved values.
+      idleTtlMs: 0,
+    }),
+    setPluginEnabled: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:plugins:set-enabled",
+      tag: WS_METHODS.pluginsSetEnabled,
+    }),
+    reloadPlugin: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:plugins:reload",
+      tag: WS_METHODS.pluginsReload,
+    }),
+    // Signs the URL a dropped folder is uploaded to; see `PluginCreateUploadUrlResult`.
+    createPluginUploadUrl: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:plugins:create-upload-url",
+      tag: WS_METHODS.pluginsCreateUploadUrl,
+    }),
+    rescanPlugins: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:plugins:rescan",
+      tag: WS_METHODS.pluginsRescan,
+    }),
+    uninstallPlugin: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:plugins:uninstall",
+      tag: WS_METHODS.pluginsUninstall,
+    }),
+    updatePluginSettings: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:plugins:update-settings",
+      tag: WS_METHODS.pluginsSettingsUpdate,
+    }),
+    // Web plugins call their own server half through these.
+    invokePlugin: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:plugins:invoke",
+      tag: WS_METHODS.pluginsInvoke,
+    }),
+    pluginChannel: createEnvironmentRpcSubscriptionAtomFamily(runtime, {
+      label: "environment-data:plugins:channel",
+      tag: WS_METHODS.pluginsSubscribe,
+      // A restart ends the server's stream, so the reloaded web half needs a new one, not this one.
+      idleTtlMs: 0,
+    }),
+    // Plugin bundles and assets are plain GETs; over T3 Connect each needs its own DPoP proof.
+    pluginFileHeaders: createRuntimeCommand(runtime, {
+      label: "environment-data:plugins:file-headers",
+      execute: (input: {
+        readonly authorization: PreparedHttpAuthorization;
+        readonly url: string;
+      }) =>
+        Effect.flatMap(Effect.serviceOption(ManagedRelayDpopSigner), (signer) =>
+          buildEnvironmentAuthHeaders(input.authorization, "GET", input.url, signer),
+        ).pipe(Effect.map((headers): Readonly<Record<string, string>> => ({ ...headers }))),
+    }),
+  };
+}
diff --git a/packages/contracts/src/clientRpcPermissions.ts b/packages/contracts/src/clientRpcPermissions.ts
index d3139f2eeff24..e94e8a528bd2b 100644
--- a/packages/contracts/src/clientRpcPermissions.ts
+++ b/packages/contracts/src/clientRpcPermissions.ts
@@ -57,6 +57,13 @@ export const CLIENT_GUARDED_RPC_SCOPES = {
   [WS_METHODS.scheduledTasksUpsert]: AuthOrchestrationOperateScope,
   [WS_METHODS.scheduledTasksSetEnabled]: AuthOrchestrationOperateScope,
   [WS_METHODS.scheduledTasksDelete]: AuthOrchestrationOperateScope,
+  // Enabling a plugin runs its code in the server, like pointing a provider at a binary.
+  [WS_METHODS.pluginsSetEnabled]: AuthSettingsWriteScope,
+  [WS_METHODS.pluginsReload]: AuthSettingsWriteScope,
+  [WS_METHODS.pluginsCreateUploadUrl]: AuthSettingsWriteScope,
+  [WS_METHODS.pluginsRescan]: AuthSettingsWriteScope,
+  [WS_METHODS.pluginsUninstall]: AuthSettingsWriteScope,
+  [WS_METHODS.pluginsSettingsUpdate]: AuthSettingsWriteScope,
   [WS_METHODS.scheduledTasksRunNow]: AuthOrchestrationOperateScope,
   [WS_METHODS.scheduledTasksRotateWebhookToken]: AuthOrchestrationOperateScope,
   [ORCHESTRATION_V2_WS_METHODS.stopWorkflow]: AuthOrchestrationOperateScope,
diff --git a/packages/contracts/src/environment.ts b/packages/contracts/src/environment.ts
index 9d60bec43fe5c..a6e2afb23a278 100644
--- a/packages/contracts/src/environment.ts
+++ b/packages/contracts/src/environment.ts
@@ -105,6 +105,8 @@ export const ExecutionEnvironmentCapabilities = Schema.Struct({
   threadForceStop: Schema.optionalKey(Schema.Boolean),
   /** Every protocol-2 server sends this; older mobile builds still read it. */
   environmentThemes: Schema.optionalKey(Schema.Boolean),
+  /** Serves the `plugins.*` methods. Clients hide every plugin surface without it. */
+  plugins: Schema.optionalKey(Schema.Boolean),
   usageLimitSources: Schema.optionalKey(Schema.Boolean),
   /** Honors `workspaceSnapshotsOnDemand`; older servers send every snapshot and drop them in the stream. */
   providerWorkspaceSnapshotsOnDemand: Schema.optionalKey(Schema.Boolean),
diff --git a/packages/contracts/src/index.ts b/packages/contracts/src/index.ts
index f00976d243b37..9138cdbb11982 100644
--- a/packages/contracts/src/index.ts
+++ b/packages/contracts/src/index.ts
@@ -62,6 +62,7 @@ export * from "./previewAutomation.ts";
 export * from "./previewCapture.ts";
 export * from "./usage.ts";
 export * from "./scheduledTask.ts";
+export * from "./plugins.ts";
 export * from "./worktreeMcp.ts";
 export * from "./resourceTelemetry.ts";
 export * from "./rpc.ts";
diff --git a/packages/contracts/src/ipc.ts b/packages/contracts/src/ipc.ts
index f14452fec5a92..114b018385828 100644
--- a/packages/contracts/src/ipc.ts
+++ b/packages/contracts/src/ipc.ts
@@ -1008,6 +1008,23 @@ export const DesktopPreviewRecordingSaveInputSchema = Schema.Struct({
   data: Schema.Uint8Array,
 });
 
+/** The canvas the page paints in one appearance, as `#rrggbb`; null for plain black or white. */
+export const DesktopWindowCanvasSchema = Schema.Struct({
+  appearance: Schema.Literals(["light", "dark"]),
+  color: Schema.NullOr(Schema.String),
+});
+export type DesktopWindowCanvas = typeof DesktopWindowCanvasSchema.Type;
+
+/**
+ * What the page paints while Electron's native theme is light and while it is dark. A theme
+ * pinned to one appearance paints that appearance in both.
+ */
+export const DesktopWindowBackgroundSchema = Schema.Struct({
+  light: DesktopWindowCanvasSchema,
+  dark: DesktopWindowCanvasSchema,
+});
+export type DesktopWindowBackground = typeof DesktopWindowBackgroundSchema.Type;
+
 export const SystemSettingsPaneSchema = Schema.Literals(["full-disk-access"]);
 export type SystemSettingsPane = typeof SystemSettingsPaneSchema.Type;
 
@@ -1088,6 +1105,8 @@ export interface DesktopBridge {
   pickProjectFavicon: (initialPath?: string) => Promise<string | null>;
   pickThemeFiles: () => Promise<readonly PickedThemeFile[] | null>;
   setTheme: (theme: DesktopTheme) => Promise<void>;
+  /** The theme's canvases, which new windows start in so they don't flash black or white. */
+  setWindowBackground: (background: DesktopWindowBackground) => Promise<void>;
   showContextMenu: <T extends string>(
     items: readonly ContextMenuItem<T>[],
     position?: { x: number; y: number },
diff --git a/packages/contracts/src/keybindings.test.ts b/packages/contracts/src/keybindings.test.ts
index 0b887507859fc..c19d9a9413241 100644
--- a/packages/contracts/src/keybindings.test.ts
+++ b/packages/contracts/src/keybindings.test.ts
@@ -29,10 +29,13 @@ it.effect("drops resolved rules with commands this build does not know", () =>
       { command: "terminal.toggle", shortcut },
       { command: "someFuture.toggle", shortcut },
       { command: "filePicker.toggle", shortcut },
+      { command: "plugin.hello-web.say-hello", shortcut },
+      { command: "plugin.Hello.say-hello", shortcut },
+      { command: "plugin.hello-web.say.hello", shortcut },
     ]);
     assert.deepEqual(
       parsed.map((rule) => rule.command),
-      ["terminal.toggle", "filePicker.toggle"],
+      ["terminal.toggle", "filePicker.toggle", "plugin.hello-web.say-hello"],
     );
   }),
 );
diff --git a/packages/contracts/src/keybindings.ts b/packages/contracts/src/keybindings.ts
index 714e0a1d486a1..2c15dbb57a2da 100644
--- a/packages/contracts/src/keybindings.ts
+++ b/packages/contracts/src/keybindings.ts
@@ -124,9 +124,19 @@ export const SCRIPT_RUN_COMMAND_PATTERN = Schema.TemplateLiteral([
   Schema.Literal(".run"),
 ]);
 
+/** A command a web plugin registered: `plugin.<pluginId>.<commandId>`. */
+export const PLUGIN_COMMAND_PATTERN = Schema.TemplateLiteral([
+  Schema.Literal("plugin."),
+  // The `PluginId` rule; that schema is branded, which a template literal cannot hold.
+  Schema.NonEmptyString.check(Schema.isMaxLength(32), Schema.isPattern(/^[a-z][a-z0-9-]*$/)),
+  Schema.Literal("."),
+  Schema.NonEmptyString.check(Schema.isMaxLength(32), Schema.isPattern(/^[a-z0-9][a-z0-9-]*$/)),
+]);
+
 export const KeybindingCommand = Schema.Union([
   Schema.Literals(STATIC_KEYBINDING_COMMANDS),
   SCRIPT_RUN_COMMAND_PATTERN,
+  PLUGIN_COMMAND_PATTERN,
 ]);
 export type KeybindingCommand = typeof KeybindingCommand.Type;
 
diff --git a/packages/contracts/src/plugins.test.ts b/packages/contracts/src/plugins.test.ts
new file mode 100644
index 0000000000000..821ef4f02285b
--- /dev/null
+++ b/packages/contracts/src/plugins.test.ts
@@ -0,0 +1,72 @@
+import * as Schema from "effect/Schema";
+import { describe, expect, it } from "vite-plus/test";
+
+import { PLUGIN_UPLOAD_MAX_BYTES, PluginManifest, PluginUploadFiles } from "./plugins.ts";
+
+const decodeManifest = Schema.decodeUnknownSync(PluginManifest);
+
+const manifest = {
+  id: "hello-plugin",
+  name: "Hello",
+  version: "0.1.0",
+  engines: { t3: ">=0.1.6" },
+  server: "./dist/server.cjs",
+  web: "dist/web.js",
+  settingsSchema: { type: "object", properties: { greeting: { type: "string" } } },
+  permissions: ["Reads thread titles"],
+};
+
+describe("PluginManifest", () => {
+  it("decodes a valid manifest", () => {
+    expect(decodeManifest(manifest)).toEqual(manifest);
+    expect(decodeManifest({ ...manifest, version: "1.0.0-beta.2+build.5" }).version).toBe(
+      "1.0.0-beta.2+build.5",
+    );
+    expect(decodeManifest({ ...manifest, engines: { t3: "^0.1 || >=1.0.0 <2" } }).engines.t3).toBe(
+      "^0.1 || >=1.0.0 <2",
+    );
+  });
+
+  it("loads a manifest written when it could have `contributes`, without the key", () => {
+    expect(decodeManifest({ ...manifest, contributes: { panels: [] } })).toEqual(manifest);
+  });
+
+  it.each([
+    ["a missing id", { id: undefined }],
+    ["an id with uppercase letters", { id: "Hello" }],
+    ["an id with an underscore", { id: "hello_plugin" }],
+    ["a version that is not semver", { version: "1.0" }],
+    ["an engines range the host cannot evaluate", { engines: { t3: "~0.1.6" } }],
+    ["a server entry that escapes the plugin directory", { server: "../other/server.cjs" }],
+    ["an absolute server entry", { server: "/usr/lib/server.cjs" }],
+    ["a Windows server entry", { server: "C:\\plugins\\server.cjs" }],
+    ["a server entry that is not CommonJS", { server: "dist/server.js" }],
+    ["a web entry that escapes the plugin directory", { web: "dist/../../web.js" }],
+  ])("rejects %s", (_name, override) => {
+    expect(() => decodeManifest({ ...manifest, ...override })).toThrow();
+  });
+});
+
+describe("PluginUploadFiles", () => {
+  const decodeFiles = Schema.decodeUnknownSync(PluginUploadFiles);
+
+  it("refuses paths outside the folder", () => {
+    const contents = new TextEncoder().encode("hi");
+    expect(decodeFiles([{ path: "dist/web.js", contents }])[0]).toEqual({
+      path: "dist/web.js",
+      contents,
+    });
+    for (const path of ["../outside.js", "/etc/passwd", "C:/plugin/web.js", "dist\\web.js"]) {
+      expect(() => decodeFiles([{ path, contents }])).toThrow();
+    }
+  });
+
+  it("refuses a folder over the size limit with a reason", () => {
+    const half = new Uint8Array(PLUGIN_UPLOAD_MAX_BYTES / 2 + 1);
+    const files = [
+      { path: "a.bin", contents: half },
+      { path: "b.bin", contents: half },
+    ];
+    expect(() => decodeFiles(files)).toThrow("A plugin folder can have up to 25 MB.");
+  });
+});
diff --git a/packages/contracts/src/plugins.ts b/packages/contracts/src/plugins.ts
new file mode 100644
index 0000000000000..b5492e67ad4d9
--- /dev/null
+++ b/packages/contracts/src/plugins.ts
@@ -0,0 +1,307 @@
+import * as Schema from "effect/Schema";
+
+import { ForwardCompatibleArray, TrimmedNonEmptyString } from "./baseSchemas.ts";
+
+// Lowercase because the id names the plugin's directory on case-insensitive filesystems. No
+// underscores, so the `plg_<id>_` prefix on plugin MCP tool names belongs to exactly one plugin.
+export const PluginId = TrimmedNonEmptyString.check(
+  Schema.isMaxLength(32),
+  Schema.isPattern(/^[a-z][a-z0-9-]*$/),
+).pipe(Schema.brand("PluginId"));
+export type PluginId = typeof PluginId.Type;
+
+// https://semver.org/#is-there-a-suggested-regular-expression-regex-to-check-a-semver-string
+const SEMVER_PATTERN =
+  /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
+
+const PluginVersion = TrimmedNonEmptyString.check(
+  Schema.isMaxLength(64),
+  Schema.isPattern(SEMVER_PATTERN, { expected: "a semver version such as 1.2.3" }),
+);
+
+// The syntax `satisfiesSemverRange` in packages/shared/src/semver.ts evaluates. Anything else,
+// such as `~1.2`, would never match, so it fails here with a reason instead.
+const ENGINE_COMPARATOR = String.raw`(?:\^|>=|>|<=|<|=)?v?\d+(?:\.\d+){0,2}`;
+const ENGINE_GROUP = String.raw`${ENGINE_COMPARATOR}(?:\s+${ENGINE_COMPARATOR})*`;
+const PluginEngineRange = TrimmedNonEmptyString.check(
+  Schema.isMaxLength(128),
+  Schema.isPattern(new RegExp(String.raw`^${ENGINE_GROUP}(?:\s*\|\|\s*${ENGINE_GROUP})*$`), {
+    expected: "a version range using ^, >=, >, <=, <, = and ||, such as >=0.1.6",
+  }),
+);
+
+// Lexical check only. Code that reads or serves the file still resolves symlinks.
+const isInsidePluginDirectory = Schema.makeFilter(
+  (path: string) =>
+    !path.startsWith("/") &&
+    !path.includes("\\") &&
+    !/^[a-zA-Z]:/.test(path) &&
+    path.split("/").every((segment) => segment !== ".."),
+  { expected: "a relative path inside the plugin directory" },
+);
+const PluginEntryPath = TrimmedNonEmptyString.check(
+  Schema.isMaxLength(256),
+  isInsidePluginDirectory,
+);
+
+// The packaged server is a Node single executable that can only `require` plugin code, and a
+// `.js` file under a `"type": "module"` package.json would load as ESM.
+const PluginServerEntryPath = PluginEntryPath.check(
+  Schema.isPattern(/\.cjs$/, { expected: "a CommonJS file ending in .cjs" }),
+);
+
+/** `t3-plugin.json` at the root of a plugin directory. */
+export const PluginManifest = Schema.Struct({
+  id: PluginId,
+  name: TrimmedNonEmptyString.check(Schema.isMaxLength(80)),
+  version: PluginVersion,
+  description: Schema.optionalKey(Schema.String.check(Schema.isMaxLength(500))),
+  engines: Schema.Struct({ t3: PluginEngineRange }),
+  server: Schema.optionalKey(PluginServerEntryPath),
+  web: Schema.optionalKey(PluginEntryPath),
+  /**
+   * JSON Schema for the plugin's settings. Top-level string fields with `format: "t3-secret"` are
+   * write-only and kept in the secret store; `t3-secret` anywhere else is saved as plain text.
+   */
+  settingsSchema: Schema.optionalKey(Schema.JsonObject),
+  /** Shown to the user before enabling. Not enforced: plugins are trusted code. */
+  permissions: Schema.optionalKey(
+    Schema.Array(TrimmedNonEmptyString.check(Schema.isMaxLength(200))).check(
+      Schema.isMaxLength(32),
+    ),
+  ),
+});
+export type PluginManifest = typeof PluginManifest.Type;
+
+/** `dev` is a folder in `devPaths`, loaded where it is. */
+export const PluginSource = Schema.Literals(["installed", "dev"]);
+export type PluginSource = typeof PluginSource.Type;
+
+export const PluginStatus = Schema.Literals(["active", "disabled", "failed", "loading"]);
+export type PluginStatus = typeof PluginStatus.Type;
+
+/**
+ * `crash` is a plugin that stopped the server, turned off until the user turns it on again.
+ * `duplicate` is a folder whose id an earlier folder already has.
+ */
+export const PluginFailureStage = Schema.Literals([
+  "discovery",
+  "duplicate",
+  "manifest",
+  "compatibility",
+  "load",
+  "activate",
+  "crash",
+]);
+export type PluginFailureStage = typeof PluginFailureStage.Type;
+
+export const PluginFailure = Schema.Struct({
+  stage: PluginFailureStage,
+  message: Schema.String,
+});
+export type PluginFailure = typeof PluginFailure.Type;
+
+/** What the server knows about one discovered plugin, including ones whose manifest failed. */
+export const PluginState = Schema.Struct({
+  id: PluginId,
+  name: TrimmedNonEmptyString,
+  /** Absent when the manifest could not be decoded. */
+  version: Schema.optionalKey(Schema.String),
+  description: Schema.optionalKey(Schema.String),
+  permissions: Schema.Array(Schema.String),
+  source: PluginSource,
+  enabled: Schema.Boolean,
+  status: PluginStatus,
+  failure: Schema.optionalKey(PluginFailure),
+  /** Changes each time the plugin starts, so clients can reload its web half after a restart. */
+  revision: Schema.optionalKey(Schema.Number),
+  /**
+   * Names the contents of its web bundle while it runs. Sent as the bundle URL's `v`, which the
+   * server then lets browsers cache for good.
+   */
+  webRevision: Schema.optionalKey(Schema.String),
+  /**
+   * The `.css` files in its `styles` folder while it runs, in the order clients apply them. Each
+   * `revision` names the file's contents and is sent as its URL's `v`, like `webRevision`.
+   */
+  styles: Schema.optionalKey(
+    Schema.Array(Schema.Struct({ file: Schema.String, revision: Schema.String })),
+  ),
+  /**
+   * The folder it loads from: a `dev` plugin's as plugins.json lists it, an installed one's inside
+   * the plugins folder.
+   */
+  folder: Schema.optionalKey(Schema.String),
+  hasServer: Schema.Boolean,
+  hasWeb: Schema.Boolean,
+  /** Why its server code failed outside a call since it last started, such as in a timer. */
+  serverFailure: Schema.optionalKey(Schema.String),
+  /** True when its manifest has a `settingsSchema`, which `plugins.settings.get` sends. */
+  hasSettings: Schema.Boolean,
+});
+export type PluginState = typeof PluginState.Type;
+
+/** Name of a method or channel a plugin registered for `plugins.invoke` and `plugins.subscribe`. */
+export const PluginRpcName = TrimmedNonEmptyString.check(
+  Schema.isMaxLength(64),
+  Schema.isPattern(/^[a-zA-Z][a-zA-Z0-9._-]*$/),
+);
+export type PluginRpcName = typeof PluginRpcName.Type;
+
+export const PluginListInput = Schema.Struct({});
+export type PluginListInput = typeof PluginListInput.Type;
+
+export const PluginListResult = Schema.Struct({
+  plugins: ForwardCompatibleArray(PluginState),
+});
+export type PluginListResult = typeof PluginListResult.Type;
+
+/**
+ * `plugins.subscribeStates`: the whole list first, then only the rows that differ from the event
+ * before, by position, so a change to one plugin does not resend every row.
+ */
+export const PluginStatesEvent = Schema.Union([
+  Schema.TaggedStruct("snapshot", {
+    plugins: Schema.Array(PluginState),
+  }),
+  Schema.TaggedStruct("changed", {
+    /** How many plugins the list has now; rows past it are gone. */
+    length: Schema.Number,
+    rows: Schema.Array(Schema.Struct({ index: Schema.Number, plugin: PluginState })),
+  }),
+]);
+export type PluginStatesEvent = typeof PluginStatesEvent.Type;
+
+/** The list after `event`, from the list before it. Rows the event leaves out keep their value. */
+export const applyPluginStatesEvent = (
+  current: PluginListResult,
+  event: PluginStatesEvent,
+): PluginListResult => {
+  if (event._tag === "snapshot") return { plugins: event.plugins };
+  const plugins = current.plugins.slice(0, event.length);
+  for (const { index, plugin } of event.rows) plugins[index] = plugin;
+  return { plugins };
+};
+
+export const PluginSetEnabledInput = Schema.Struct({
+  pluginId: PluginId,
+  enabled: Schema.Boolean,
+});
+export type PluginSetEnabledInput = typeof PluginSetEnabledInput.Type;
+
+export const PluginReloadInput = Schema.Struct({
+  pluginId: PluginId,
+});
+export type PluginReloadInput = typeof PluginReloadInput.Type;
+
+/** Limits on a plugin folder a client uploads to the URL `plugins.createUploadUrl` returns. */
+export const PLUGIN_UPLOAD_MAX_FILES = 1_000;
+export const PLUGIN_UPLOAD_MAX_BYTES = 25 * 1024 * 1024;
+
+/** One file of a plugin folder dropped into a client, by its path inside that folder. */
+export const PluginUploadFile = Schema.Struct({
+  path: TrimmedNonEmptyString.check(Schema.isMaxLength(1024), isInsidePluginDirectory),
+  contents: Schema.Uint8Array,
+});
+export type PluginUploadFile = typeof PluginUploadFile.Type;
+
+/** The files of an uploaded plugin folder, which the server checks before it installs them. */
+export const PluginUploadFiles = Schema.Array(PluginUploadFile).check(
+  Schema.isMaxLength(PLUGIN_UPLOAD_MAX_FILES, {
+    message: `A plugin folder can have up to ${PLUGIN_UPLOAD_MAX_FILES} files.`,
+  }),
+  Schema.makeFilter(
+    (files) =>
+      files.reduce((total, file) => total + file.contents.byteLength, 0) <= PLUGIN_UPLOAD_MAX_BYTES,
+    { message: `A plugin folder can have up to ${PLUGIN_UPLOAD_MAX_BYTES / 1024 / 1024} MB.` },
+  ),
+);
+
+export const PluginCreateUploadUrlInput = Schema.Struct({});
+export type PluginCreateUploadUrlInput = typeof PluginCreateUploadUrlInput.Type;
+
+/**
+ * A signed URL, relative to the environment, that takes one plugin folder as multipart form data:
+ * a `file` part per file, named with its path through `encodeURIComponent`. It answers with a
+ * `PluginMutationResult`, or a status and the reason as text.
+ */
+export const PluginCreateUploadUrlResult = Schema.Struct({
+  relativeUrl: TrimmedNonEmptyString.check(Schema.isMaxLength(4096)),
+  expiresAt: Schema.Number,
+});
+export type PluginCreateUploadUrlResult = typeof PluginCreateUploadUrlResult.Type;
+
+export const PluginRescanInput = Schema.Struct({});
+export type PluginRescanInput = typeof PluginRescanInput.Type;
+
+export const PluginUninstallInput = Schema.Struct({
+  pluginId: PluginId,
+  /**
+   * A row's `folder`, to remove or unlink that copy. A `duplicate` copy goes alone, and the copy
+   * in use keeps the id's data.
+   */
+  folder: Schema.optionalKey(Schema.String),
+});
+export type PluginUninstallInput = typeof PluginUninstallInput.Type;
+
+export const PluginUninstallResult = Schema.Struct({ pluginId: PluginId });
+export type PluginUninstallResult = typeof PluginUninstallResult.Type;
+
+/** Result of `plugins.setEnabled`, `plugins.reload` and a folder upload. */
+export const PluginMutationResult = Schema.Struct({
+  plugin: PluginState,
+});
+export type PluginMutationResult = typeof PluginMutationResult.Type;
+
+export const PluginSettingsGetInput = Schema.Struct({
+  pluginId: PluginId,
+});
+export type PluginSettingsGetInput = typeof PluginSettingsGetInput.Type;
+
+export const PluginSettingsUpdateInput = Schema.Struct({
+  pluginId: PluginId,
+  patch: Schema.JsonObject,
+});
+export type PluginSettingsUpdateInput = typeof PluginSettingsUpdateInput.Type;
+
+/** Secret fields read back as the server's redaction marker, never their value. */
+export const PluginSettingsResult = Schema.Struct({
+  pluginId: PluginId,
+  settings: Schema.JsonObject,
+});
+export type PluginSettingsResult = typeof PluginSettingsResult.Type;
+
+/** `plugins.settings.get`: the settings with the manifest's schema, for the settings form. */
+export const PluginSettingsGetResult = Schema.Struct({
+  ...PluginSettingsResult.fields,
+  settingsSchema: Schema.optionalKey(Schema.JsonObject),
+});
+export type PluginSettingsGetResult = typeof PluginSettingsGetResult.Type;
+
+export const PluginInvokeInput = Schema.Struct({
+  pluginId: PluginId,
+  method: PluginRpcName,
+  input: Schema.optionalKey(Schema.Json),
+});
+export type PluginInvokeInput = typeof PluginInvokeInput.Type;
+
+export const PluginInvokeResult = Schema.Struct({
+  output: Schema.Json,
+});
+export type PluginInvokeResult = typeof PluginInvokeResult.Type;
+
+export const PluginSubscribeInput = Schema.Struct({
+  pluginId: PluginId,
+  channel: PluginRpcName,
+});
+export type PluginSubscribeInput = typeof PluginSubscribeInput.Type;
+
+export const PluginSubscriptionEvent = Schema.Struct({
+  value: Schema.Json,
+});
+export type PluginSubscriptionEvent = typeof PluginSubscriptionEvent.Type;
+
+export class PluginError extends Schema.TaggedError<PluginError>()("PluginError", {
+  message: Schema.String,
+  pluginId: Schema.optionalKey(PluginId),
+}) {}
diff --git a/packages/contracts/src/rpc.ts b/packages/contracts/src/rpc.ts
index 37ea5866ae733..81453f967c6d0 100644
--- a/packages/contracts/src/rpc.ts
+++ b/packages/contracts/src/rpc.ts
@@ -375,6 +375,28 @@ import {
   ScheduledTaskUpsertInput,
   ScheduledTaskMutationResult,
 } from "./scheduledTask.ts";
+import {
+  PluginCreateUploadUrlInput,
+  PluginCreateUploadUrlResult,
+  PluginError,
+  PluginInvokeInput,
+  PluginInvokeResult,
+  PluginUninstallInput,
+  PluginUninstallResult,
+  PluginListInput,
+  PluginListResult,
+  PluginRescanInput,
+  PluginMutationResult,
+  PluginReloadInput,
+  PluginSetEnabledInput,
+  PluginSettingsGetInput,
+  PluginSettingsGetResult,
+  PluginSettingsResult,
+  PluginSettingsUpdateInput,
+  PluginSubscribeInput,
+  PluginSubscriptionEvent,
+  PluginStatesEvent,
+} from "./plugins.ts";
 import { SecretRequestAnswerInput, SecretRequestError } from "./secretRequest.ts";
 import {
   ProjectCloneActionInput,
@@ -548,6 +570,18 @@ export const WS_METHODS = {
   scheduledTasksListWebhookDeliveries: "scheduledTasks.listWebhookDeliveries",
   scheduledTasksGetWebhookDelivery: "scheduledTasks.getWebhookDelivery",
 
+  pluginsList: "plugins.list",
+  pluginsSubscribeStates: "plugins.subscribeStates",
+  pluginsSetEnabled: "plugins.setEnabled",
+  pluginsReload: "plugins.reload",
+  pluginsCreateUploadUrl: "plugins.createUploadUrl",
+  pluginsRescan: "plugins.rescan",
+  pluginsUninstall: "plugins.uninstall",
+  pluginsSettingsGet: "plugins.settings.get",
+  pluginsSettingsUpdate: "plugins.settings.update",
+  pluginsInvoke: "plugins.invoke",
+  pluginsSubscribe: "plugins.subscribe",
+
   cloudGetRelayClientStatus: "cloud.getRelayClientStatus",
   cloudInstallRelayClient: "cloud.installRelayClient",
 
@@ -1950,6 +1984,79 @@ const WsScheduledTasksGetWebhookDeliveryRpc = Rpc.make(
   },
 );
 
+const PluginRpcError = Schema.Union([PluginError, EnvironmentAuthorizationError]);
+
+const WsPluginsListRpc = Rpc.make(WS_METHODS.pluginsList, {
+  payload: PluginListInput,
+  success: PluginListResult,
+  error: PluginRpcError,
+});
+
+/** The current list, then the rows that change. */
+const WsPluginsSubscribeStatesRpc = Rpc.make(WS_METHODS.pluginsSubscribeStates, {
+  payload: PluginListInput,
+  success: PluginStatesEvent,
+  error: PluginRpcError,
+  stream: true,
+});
+
+const WsPluginsSetEnabledRpc = Rpc.make(WS_METHODS.pluginsSetEnabled, {
+  payload: PluginSetEnabledInput,
+  success: PluginMutationResult,
+  error: PluginRpcError,
+});
+
+const WsPluginsReloadRpc = Rpc.make(WS_METHODS.pluginsReload, {
+  payload: PluginReloadInput,
+  success: PluginMutationResult,
+  error: PluginRpcError,
+});
+
+/** Signs the URL a client uploads a dropped plugin folder to, over HTTP. */
+const WsPluginsCreateUploadUrlRpc = Rpc.make(WS_METHODS.pluginsCreateUploadUrl, {
+  payload: PluginCreateUploadUrlInput,
+  success: PluginCreateUploadUrlResult,
+  error: PluginRpcError,
+});
+
+/** Looks at the plugins folder again, so plugin folders put there since are listed. */
+const WsPluginsRescanRpc = Rpc.make(WS_METHODS.pluginsRescan, {
+  payload: PluginRescanInput,
+  success: PluginListResult,
+  error: PluginRpcError,
+});
+
+const WsPluginsUninstallRpc = Rpc.make(WS_METHODS.pluginsUninstall, {
+  payload: PluginUninstallInput,
+  success: PluginUninstallResult,
+  error: PluginRpcError,
+});
+
+const WsPluginsSettingsGetRpc = Rpc.make(WS_METHODS.pluginsSettingsGet, {
+  payload: PluginSettingsGetInput,
+  success: PluginSettingsGetResult,
+  error: PluginRpcError,
+});
+
+const WsPluginsSettingsUpdateRpc = Rpc.make(WS_METHODS.pluginsSettingsUpdate, {
+  payload: PluginSettingsUpdateInput,
+  success: PluginSettingsResult,
+  error: PluginRpcError,
+});
+
+const WsPluginsInvokeRpc = Rpc.make(WS_METHODS.pluginsInvoke, {
+  payload: PluginInvokeInput,
+  success: PluginInvokeResult,
+  error: PluginRpcError,
+});
+
+const WsPluginsSubscribeRpc = Rpc.make(WS_METHODS.pluginsSubscribe, {
+  payload: PluginSubscribeInput,
+  success: PluginSubscriptionEvent,
+  error: PluginRpcError,
+  stream: true,
+});
+
 const WsSubscribeAuthAccessRpc = Rpc.make(WS_METHODS.subscribeAuthAccess, {
   payload: Schema.Struct({}),
   success: AuthAccessStreamEvent,
@@ -2035,6 +2142,17 @@ export const WsRpcGroup = RpcGroup.make(
   WsSecretsAnswerRequestRpc,
   WsScheduledTasksListWebhookDeliveriesRpc,
   WsScheduledTasksGetWebhookDeliveryRpc,
+  WsPluginsListRpc,
+  WsPluginsSubscribeStatesRpc,
+  WsPluginsSetEnabledRpc,
+  WsPluginsReloadRpc,
+  WsPluginsCreateUploadUrlRpc,
+  WsPluginsRescanRpc,
+  WsPluginsUninstallRpc,
+  WsPluginsSettingsGetRpc,
+  WsPluginsSettingsUpdateRpc,
+  WsPluginsInvokeRpc,
+  WsPluginsSubscribeRpc,
   WsServerReportClientActivityRpc,
   WsCloudGetRelayClientStatusRpc,
   WsCloudInstallRelayClientRpc,
diff --git a/packages/contracts/src/server.ts b/packages/contracts/src/server.ts
index c36f724b8239e..f4d5509c96507 100644
--- a/packages/contracts/src/server.ts
+++ b/packages/contracts/src/server.ts
@@ -565,6 +565,16 @@ const environmentThemeFields = {
       dark: Schema.optional(EnvironmentThemeColors),
     }),
   ),
+  /** Keeps the nightly and dev artwork in the sidebar, which T3 otherwise swaps for a label. */
+  sidebarArtwork: Schema.optional(Schema.Boolean),
+  /** T3's corner radius while the theme is on, such as `0.625rem`. */
+  radius: Schema.optional(
+    TrimmedNonEmptyString.check(
+      Schema.isPattern(/^(?:0|\d{1,2}(?:\.\d{1,3})?(?:px|rem))$/, {
+        expected: "a length such as 0.625rem or 10px",
+      }),
+    ),
+  ),
 };
 
 export const EnvironmentThemeFile = Schema.Struct(environmentThemeFields);
@@ -573,6 +583,8 @@ export type EnvironmentThemeFile = typeof EnvironmentThemeFile.Type;
 export const EnvironmentTheme = Schema.Struct({
   id: EnvironmentThemeId,
   ...environmentThemeFields,
+  /** Published by an active plugin, so it shows only where the client loads that plugin's UI. */
+  fromPlugin: Schema.optionalKey(Schema.Literal(true)),
 });
 export type EnvironmentTheme = typeof EnvironmentTheme.Type;
 
diff --git a/packages/plugin-sdk/.gitignore b/packages/plugin-sdk/.gitignore
new file mode 100644
index 0000000000000..84d52920d1ba9
--- /dev/null
+++ b/packages/plugin-sdk/.gitignore
@@ -0,0 +1,2 @@
+# Built by `vp run build:examples`.
+examples/*/dist/
diff --git a/packages/plugin-sdk/README.md b/packages/plugin-sdk/README.md
new file mode 100644
index 0000000000000..4fcfa1045e1ca
--- /dev/null
+++ b/packages/plugin-sdk/README.md
@@ -0,0 +1,243 @@
+# @t3tools/plugin-sdk
+
+Types and build helpers for T3 Code plugins. A plugin is a folder with a `t3-plugin.json` manifest,
+an optional server half that runs inside the T3 Code server, and an optional web half that runs in
+the web and desktop apps. Plugins are trusted code: they run with the same access as T3 Code.
+
+[`examples/quick-notes`](./examples/quick-notes) is a plugin to copy from. It builds its web half
+instead of committing it: run `vp run build:examples` in `packages/plugin-sdk` before adding it to
+T3 Code, which builds it to `dist/web.js` with the Vite preset below. The plugins in
+[`fixtures/`](./fixtures) back the tests and are small and working too. They are written by hand
+and need no build. `hello-web` uses most of the web API.
+
+## Install
+
+The SDK isn't on npm yet. Build it from a T3 Code checkout: run `vp run build` in
+`packages/plugin-sdk`, then `npm pack` in its `dist` folder. Install the `.tgz` file it writes in
+your plugin with `npm install --save-dev <path to the .tgz>`. `dist` holds the whole package as it
+will be published.
+
+The SDK has no dependencies of its own. What else a plugin needs depends on its parts:
+
+- A web half needs `react` and `@types/react` as dev dependencies, plus `react-dom` if it imports
+  it, and Vite 8 or later to build it. The bundle uses T3's own React at runtime, but the build
+  reads React's exports.
+- Typechecking a server half needs `@types/node`.
+
+## Manifest
+
+```json
+{
+  "id": "hello-web",
+  "name": "Hello web",
+  "version": "0.1.0",
+  "description": "Shown on the Plugins page.",
+  "engines": { "t3": ">=0.1.6" },
+  "server": "./server.cjs",
+  "web": "./web.js",
+  "settingsSchema": {
+    "type": "object",
+    "properties": { "token": { "type": "string", "format": "t3-secret" } }
+  }
+}
+```
+
+- `id` uses lowercase letters, digits and hyphens, starts with a letter and has up to 32
+  characters. It names the plugin's folder, its agent tools (`plg_<id>_<tool>`) and its keybinding
+  commands (`plugin.<id>.<command>`).
+- `engines.t3` is a version range made of `^`, `>=`, `>`, `<=`, `<`, `=` and `||`, such as
+  `>=0.1.6`. A server outside it refuses to install the plugin or start it, and says why.
+- `permissions` is an optional list of what the plugin says it uses. Settings → Plugins shows it on
+  the plugin's row, and T3 Code doesn't enforce it.
+- `server` must be CommonJS ending in `.cjs`. `web` is a single-file ES module. A plugin with a
+  `server` runs only on a T3 Code server running Node 24 or later, such as the desktop app's. On
+  an older Node, such as `npx t3` on Node 22, it fails to start and says why.
+- `settingsSchema` is JSON Schema. T3 Code draws a form from it on the Plugins page, and top-level
+  string fields with `"format": "t3-secret"` are stored in the server's secret store and never shown
+  again. `t3-secret` anywhere else is saved as plain text. The form covers top-level strings,
+  numbers, integers, booleans, `enum`s of strings or numbers, and arrays of strings. One property
+  of any other shape, such as an object or a nullable type, turns the whole form into a JSON box.
+  Every save is checked against the schema with the top-level `default`s filled in, so a default
+  its own field rejects refuses every save. A schema T3 Code can't validate against fails the
+  plugin when T3 Code finds or installs it, and says why.
+- A `themes/` folder of theme JSON files is published while the plugin is active, and an `assets/`
+  folder is served to the web half when the plugin has one. T3 Code remembers the published
+  themes, so the boot screen and the desktop window start in the active theme's colors. A theme
+  that sets `"sidebarArtwork": true` keeps the nightly and dev artwork in the sidebar, which T3
+  otherwise swaps for a label; the send button stays plain. `"radius"`, such as `"0.625rem"`, sets
+  T3's corner radius, and `success`, `successForeground`, `info` and `infoForeground` in a theme's
+  `colors` or `variants` set its status colors.
+- A `styles/` folder of `.css` files is added to the page while the plugin is active, in name
+  order, after T3's own styles and the theme. A manifest and `styles/` are a whole plugin, with
+  no `server` or `web`, as in the `styles-plugin` fixture. Like a web half, styles and themes load
+  only from the environments turned on under **Load plugin UI from** in Settings → Plugins, which
+  starts with just the main environment.
+  **Reload** picks up edits. The page gets each file's text, so a `url()` can't reach the
+  plugin's folder; use a `data:` URL for an image.
+
+## Server half
+
+```js
+/** @type {import("@t3tools/plugin-sdk/server").PluginDefinition} */
+module.exports = {
+  activate(api) {
+    api.rpc.register("greeting", () => "Hello", { access: "read" });
+  },
+};
+```
+
+`activate` receives the [`PluginApi`](./src/server.ts): settings, storage, RPC methods and channels
+for the web half, and MCP tools for agents. `api.settings.get()` reads from memory after its first
+call, so a handler can call it on every request.
+
+Everything a plugin registers is released when it is disabled, reloaded or uninstalled; add your
+own cleanup with `api.onDeactivate`.
+
+`rpc.register` takes an `access`. Any session that can read the environment may call a `read`
+method, a guest's read-only session included. A `write` method needs the `orchestration:operate`
+scope, which the owner's sessions have and a read-only session lacks. The handler's second argument
+has the caller's `access` and a `signal`. The signal aborts when the caller goes away, the plugin
+stops, or 30 seconds pass, and a method that hasn't answered by then fails. A client can send any
+JSON as input, so check it before acting on it.
+
+`rpc.publish` sends a value to every session that follows the channel, and any session that can
+read the environment may follow one, so never publish secrets. A subscriber gets only the values
+published after it subscribes, so give the web half a method that returns the current value, as
+[`examples/quick-notes`](./examples/quick-notes) does with `list`. A subscriber that falls behind
+keeps the latest 64 values of each channel and loses older ones.
+
+A promise rejection in plugin code that nothing handles, such as in a timer, doesn't stop T3 Code.
+It shows on the plugin's row in Settings → Plugins, and the plugin keeps running. An exception
+nothing catches does stop the server. When T3 Code can tell it was your plugin's, the plugin stays
+off after the restart until the user turns it on again. That includes a throw in a timer callback
+and an `'error'` event with no listener, so catch errors in callbacks and give every child process,
+socket and stream you create an `'error'` listener.
+
+## Tools for agents
+
+`api.mcp.registerTool(tool, handler)` gives agents a tool, as
+[`fixtures/mcp-plugin`](./fixtures/mcp-plugin) does.
+
+- Agents see the tool as `plg_<id>_<name>`. `name` uses letters, digits, `_` and `-`, and the
+  whole name must fit in 64 characters, because MCP clients refuse longer ones.
+- `access` is `read` or `write`. Any agent can call a `read` tool. A `write` tool runs only for an
+  agent in a thread set to Full access and not in Plan mode, or an outside agent approved with Full
+  access. Other agents, and agents from linked environments, get a refusal. Make every tool that
+  changes something `write`.
+- `inputSchema` is a JSON Schema with `"type": "object"` and no `anyOf`, `oneOf` or `allOf` at its
+  top level, which model APIs refuse. Put alternatives inside a property. An agent can send any
+  JSON object, so check the input before acting on it.
+- The handler's second argument has a `signal`, which aborts when the agent cancels the call or the
+  plugin stops, and the `threadId` of the calling agent's thread, or `null` for an MCP client
+  outside a thread. It returns JSON, and a throw becomes an error the agent reads. A call that
+  hasn't answered within 5 minutes fails the same way, and its `signal` aborts.
+- Every agent in every thread of the environment sees the tools of every plugin that is on, so
+  each tool takes up room in every agent's context. A plugin registers at most 32 tools, each with
+  a description of up to 1,000 characters and an input schema of up to 4,000 characters as JSON.
+  `registerTool` throws when a tool breaks a rule, so a plugin that registers it in `activate` fails
+  to start and says why.
+
+The server API can't read T3's threads, projects or providers. A tool can keep its own data per
+thread in `storage` under the `threadId`, but it can't look that thread up.
+
+## Web half
+
+```tsx
+import { Button } from "@t3tools/plugin-sdk/ui";
+import { defineWebPlugin } from "@t3tools/plugin-sdk/web";
+
+export default defineWebPlugin({
+  activate(api) {
+    api.rightPanel.register({
+      name: "hello",
+      title: "Hello",
+      component: () => <Button onClick={() => api.navigate("/settings/plugins")}>Settings</Button>,
+    });
+    api.commands.register({
+      id: "say-hello",
+      title: "Say hello",
+      run: () => api.toast({ title: "Hello" }),
+    });
+  },
+});
+```
+
+`activate` receives the [`WebPluginApi`](./src/web.ts): calls into the server half, right panels, a
+settings panel, palette and keybinding commands, styles, assets, navigation and toasts.
+
+`api.rpc.invoke` and `api.rpc.subscribe` reach the methods and channels the server half adds with
+`rpc.register` and `rpc.publish`. Describe them once as a `PluginRpcMap` type from
+`@t3tools/plugin-sdk/shared`, and pass it to both `definePlugin` and `defineWebPlugin`. Then a
+wrong method name, input or value fails to typecheck in either half.
+[`examples/quick-notes`](./examples/quick-notes) keeps its map in `rpc.ts`.
+
+The app can load web halves from several environments at once. Right panels show only in the threads
+of the environment the plugin runs on, which `api.environmentId` names. Palette and keybinding
+commands come only from the first of those environments, the main one unless it's turned off.
+
+Register right panels inside `activate`. When the app restores a panel that was open, the panel
+shows that the plugin is loading until `activate` finishes, then "Plugin not active" until a panel
+with its name is registered.
+
+Build it with the Vite preset, which makes the bundle use T3 Code's own React, atoms, atom hooks and
+UI components instead of shipping copies:
+
+```ts
+// vite.config.ts
+import { t3PluginWeb } from "@t3tools/plugin-sdk/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({ plugins: [t3PluginWeb({ entry: "web.tsx", outDir: "dist" })] });
+```
+
+Point the manifest's `web` at `dist/web.js`.
+
+Make atoms with `import * as Atom from "@t3tools/plugin-sdk/atom"` and read them with the hooks in
+`@t3tools/plugin-sdk/atom-react`, such as `useAtomValue`. Both run T3's own copies, so your atoms
+live in T3's registry and the bundle has no effect in it. Their types belong to the SDK, so they
+don't change when T3 upgrades effect. Atoms from `effect` itself or hooks from `@effect/atom-react`
+would bundle a second copy. [`examples/quick-notes`](./examples/quick-notes) keeps its notes in an
+atom.
+
+## Keeping a plugin working across T3 updates
+
+T3 changes its markup, class names, labels and layout in most releases. You don't need to drop
+parts of your design to survive that. Build each part on the most stable thing T3 offers for it:
+
+- **Style with theme tokens.** A theme file in `themes/` sets T3's colors and corner radius. In your
+  own components, use the CSS variables that `THEME_TOKENS` from `@t3tools/plugin-sdk/web` lists,
+  such as `var(--border)` and `var(--radius)`, instead of hex or rgb values. T3 defines each of
+  them under every theme and keeps them across releases.
+- **Scope CSS to a region.** T3 keeps the `data-t3-region` names of the window's main areas
+  across releases: `sidebar`, `main` (everything beside the sidebar), `timeline`, `composer`,
+  `thread-details`, `right-panel`, `terminal`, `home`, `pull-requests`, `settings`,
+  `settings-nav` and `command-palette`. A plain `background` rule recolors most regions, such as
+  `[data-t3-region="composer"] { background: #101820; }`. The surfaces inside `main`,
+  `right-panel` and `pull-requests` paint over them, so set `--background` on those three instead.
+  For `terminal`, set `--terminal-background`, which a terminal reads when it opens. `terminal` is
+  the drawer under the chat. A terminal opened in the right panel has no `terminal` region, so set
+  `--terminal-background` on `right-panel` to reach it.
+- **Reach into T3's markup only as a last resort.** Selectors on `aria-label`, `data-slot`, class
+  names such as `[class~="border-border/65"]` or `.lucide-shield-off`, and `:has()` break when T3
+  renames or moves things. Use one only when no theme value or region does the job. Keep each rule
+  small and in one commented place, prefer one that falls back to T3's own look when the markup
+  changes, and list it in the plugin's README with the seam that would replace it.
+- **Leave T3's frame to T3.** The title bar row, the room for the window buttons on Windows and
+  Linux, drag areas, phone safe areas and breakpoints are T3's, so don't resize or pad them.
+- **Check `api.version` before using a newer API member.** A member added after version 1 names
+  the version that added it in its doc, so a plugin can skip that feature on an older T3 and keep
+  running. To require a T3 release instead, set `engines.t3`.
+- **Ship what the plugin runs.** Installing a folder leaves out `.git` and `node_modules`, so
+  build everything into the files the manifest names.
+- **Ask for a seam.** When T3 doesn't hand over what you need, ask for a region or token on the
+  T3 Code repository instead of reaching into its markup.
+
+## Developing a plugin
+
+Add the plugin's folder to `devPaths` in `plugins.json` in the T3 Code data directory, turn the
+plugin on in Settings → Plugins, and use **Reload** after each change. **Unlink** on its row removes
+it from `devPaths` and leaves the folder alone. A linked folder whose id an installed plugin already
+has fails as a duplicate, so remove the installed copy first.
+
+To install a finished plugin, drag its folder onto Settings → Plugins, or use **Add plugin** to
+choose it. Unlink a linked copy first. It installs turned off, so turn it on on its row.
diff --git a/packages/plugin-sdk/examples/quick-notes/README.md b/packages/plugin-sdk/examples/quick-notes/README.md
new file mode 100644
index 0000000000000..07e6b197bd82a
--- /dev/null
+++ b/packages/plugin-sdk/examples/quick-notes/README.md
@@ -0,0 +1,11 @@
+# Quick notes
+
+Short notes kept by the plugin's server half, so every device connected to the environment sees
+the same list. Open the **Quick notes** right panel in a thread to add and remove notes.
+
+First build its web half with `vp run build:examples` in `packages/plugin-sdk`. Then install it
+by dragging this folder onto **Settings → Plugins**, or with **Add plugin → Choose folder**.
+
+It uses `rightPanel.register`, `rpc.invoke`, `rpc.subscribe` and an atom on the web side, and
+`rpc.register`, `rpc.publish` and `storage` on the server side. Both halves check their calls
+against the `QuickNotesRpc` type in `rpc.ts`.
diff --git a/packages/plugin-sdk/examples/quick-notes/rpc.ts b/packages/plugin-sdk/examples/quick-notes/rpc.ts
new file mode 100644
index 0000000000000..8ce4d3fef8a99
--- /dev/null
+++ b/packages/plugin-sdk/examples/quick-notes/rpc.ts
@@ -0,0 +1,11 @@
+export type Note = { readonly id: string; readonly text: string };
+
+/** The server half's methods and channel. Both halves name it, so their calls are checked. */
+export type QuickNotesRpc = {
+  methods: {
+    list: { input: undefined; output: ReadonlyArray<Note> };
+    add: { input: { text: string }; output: ReadonlyArray<Note> };
+    remove: { input: { id: string }; output: ReadonlyArray<Note> };
+  };
+  channels: { notes: ReadonlyArray<Note> };
+};
diff --git a/packages/plugin-sdk/examples/quick-notes/server.cjs b/packages/plugin-sdk/examples/quick-notes/server.cjs
new file mode 100644
index 0000000000000..adef4756e6511
--- /dev/null
+++ b/packages/plugin-sdk/examples/quick-notes/server.cjs
@@ -0,0 +1,43 @@
+const { randomUUID } = require("node:crypto");
+
+/** @type {import("@t3tools/plugin-sdk/server").PluginDefinition<import("./rpc.ts").QuickNotesRpc>} */
+module.exports = {
+  activate(api) {
+    /** @typedef {import("./rpc.ts").Note} Note */
+    /** @returns {Promise<ReadonlyArray<Note>>} */
+    const read = async () => {
+      const notes = await api.storage.get("notes");
+      return Array.isArray(notes) ? notes : [];
+    };
+    // Each change waits for the one before it, so two quick adds never drop a note.
+    /** @type {Promise<unknown>} */
+    let changing = Promise.resolve();
+    /** @param {(notes: ReadonlyArray<Note>) => ReadonlyArray<Note>} update */
+    const change = (update) => {
+      const changed = changing.then(async () => {
+        const notes = update(await read());
+        await api.storage.set("notes", notes);
+        api.rpc.publish("notes", notes);
+        return notes;
+      });
+      changing = changed.catch(() => undefined);
+      return changed;
+    };
+    api.rpc.register("list", read, { access: "read" });
+    api.rpc.register(
+      "add",
+      async (input) => {
+        const text = typeof input?.text === "string" ? input.text.trim().slice(0, 500) : "";
+        if (text === "") return read();
+        const note = { id: randomUUID(), text };
+        return change((notes) => [...notes, note].slice(-200));
+      },
+      { access: "write" },
+    );
+    api.rpc.register(
+      "remove",
+      async (input) => change((notes) => notes.filter((note) => note.id !== input?.id)),
+      { access: "write" },
+    );
+  },
+};
diff --git a/packages/plugin-sdk/examples/quick-notes/t3-plugin.json b/packages/plugin-sdk/examples/quick-notes/t3-plugin.json
new file mode 100644
index 0000000000000..801365d33ab2c
--- /dev/null
+++ b/packages/plugin-sdk/examples/quick-notes/t3-plugin.json
@@ -0,0 +1,9 @@
+{
+  "id": "quick-notes",
+  "name": "Quick notes",
+  "version": "0.1.1",
+  "description": "Short notes kept on the server, in a right panel.",
+  "engines": { "t3": ">=0.1.5" },
+  "server": "./server.cjs",
+  "web": "./dist/web.js"
+}
diff --git a/packages/plugin-sdk/examples/quick-notes/vite.config.ts b/packages/plugin-sdk/examples/quick-notes/vite.config.ts
new file mode 100644
index 0000000000000..8056e54e0d1e3
--- /dev/null
+++ b/packages/plugin-sdk/examples/quick-notes/vite.config.ts
@@ -0,0 +1,5 @@
+import { t3PluginWeb } from "@t3tools/plugin-sdk/vite";
+import { defineConfig } from "vite-plus";
+
+// Builds dist/web.js. `vp run build:examples` in packages/plugin-sdk builds every example.
+export default defineConfig({ root: import.meta.dirname, plugins: [t3PluginWeb()] });
diff --git a/packages/plugin-sdk/examples/quick-notes/web.tsx b/packages/plugin-sdk/examples/quick-notes/web.tsx
new file mode 100644
index 0000000000000..f8fa1cd605c7b
--- /dev/null
+++ b/packages/plugin-sdk/examples/quick-notes/web.tsx
@@ -0,0 +1,79 @@
+import * as Atom from "@t3tools/plugin-sdk/atom";
+import { useAtomValue } from "@t3tools/plugin-sdk/atom-react";
+import { Button, Input } from "@t3tools/plugin-sdk/ui";
+import { defineWebPlugin } from "@t3tools/plugin-sdk/web";
+import { useState } from "react";
+
+import type { Note, QuickNotesRpc } from "./rpc.ts";
+
+const css = `
+.quick-notes-panel { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
+.quick-notes-list { display: flex; flex-direction: column; gap: 0.25rem; }
+.quick-notes-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
+.quick-notes-item span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.quick-notes-form { display: flex; gap: 0.5rem; }
+`;
+
+export default defineWebPlugin<QuickNotesRpc>({
+  activate(api) {
+    api.injectStyles(css);
+    // A read-only client, for one, is refused; say so instead of leaving the draft as it was.
+    const showFailure = (error: unknown) =>
+      api.toast({
+        type: "error",
+        title: "Quick notes couldn't save that",
+        description: error instanceof Error ? error.message : String(error),
+      });
+
+    // One list for every open panel, following the server's channel while one shows.
+    const notesAtom = Atom.make((get): ReadonlyArray<Note> => {
+      void api.rpc.invoke("list").then((notes) => get.setSelf(notes));
+      get.addFinalizer(api.rpc.subscribe("notes", (notes) => get.setSelf(notes)));
+      return [];
+    });
+
+    api.rightPanel.register({
+      name: "notes",
+      title: "Quick notes",
+      component: function QuickNotesPanel() {
+        const notes = useAtomValue(notesAtom);
+        const [draft, setDraft] = useState("");
+        return (
+          <div className="quick-notes-panel">
+            <form
+              className="quick-notes-form"
+              onSubmit={(event) => {
+                event.preventDefault();
+                void api.rpc.invoke("add", { text: draft }).then(() => setDraft(""), showFailure);
+              }}
+            >
+              <Input
+                aria-label="New note"
+                placeholder="Write a note"
+                value={draft}
+                onChange={(event) => setDraft(event.currentTarget.value)}
+              />
+              <Button type="submit">Add</Button>
+            </form>
+            <div className="quick-notes-list">
+              {notes.toReversed().map((note) => (
+                <div key={note.id} className="quick-notes-item">
+                  <span>{note.text}</span>
+                  <Button
+                    size="xs"
+                    variant="ghost"
+                    onClick={() =>
+                      void api.rpc.invoke("remove", { id: note.id }).catch(showFailure)
+                    }
+                  >
+                    Remove
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      },
+    });
+  },
+});
diff --git a/packages/plugin-sdk/fixtures/broken-plugin/server.cjs b/packages/plugin-sdk/fixtures/broken-plugin/server.cjs
new file mode 100644
index 0000000000000..3c152c0154f1b
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/broken-plugin/server.cjs
@@ -0,0 +1,6 @@
+/** @type {import("@t3tools/plugin-sdk/server").PluginDefinition} */
+module.exports = {
+  activate() {
+    throw new Error("broken-plugin refuses to start");
+  },
+};
diff --git a/packages/plugin-sdk/fixtures/broken-plugin/t3-plugin.json b/packages/plugin-sdk/fixtures/broken-plugin/t3-plugin.json
new file mode 100644
index 0000000000000..2ad4ed7d34299
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/broken-plugin/t3-plugin.json
@@ -0,0 +1,8 @@
+{
+  "id": "broken-plugin",
+  "name": "Broken",
+  "version": "0.1.0",
+  "description": "Test fixture whose activate throws.",
+  "engines": { "t3": ">=0.1.0" },
+  "server": "./server.cjs"
+}
diff --git a/packages/plugin-sdk/fixtures/hello-plugin/server.cjs b/packages/plugin-sdk/fixtures/hello-plugin/server.cjs
new file mode 100644
index 0000000000000..affe4238e29a8
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/hello-plugin/server.cjs
@@ -0,0 +1,36 @@
+// Plain CommonJS with no SDK import, so the plugin host loads it as is. The type comes from the SDK.
+
+/** @type {import("@t3tools/plugin-sdk/server").PluginDefinition} */
+module.exports = {
+  activate(api) {
+    api.log.info("hello-plugin activated");
+    api.rpc.register(
+      "ping",
+      async (input, { access }) => {
+        const settings = await api.settings.get();
+        const greeting = typeof settings.greeting === "string" ? settings.greeting : "hello";
+        return { pong: input ?? null, greeting, access };
+      },
+      { access: "read" },
+    );
+    api.rpc.register(
+      "count",
+      async () => {
+        const current = await api.storage.get("count");
+        const next = (typeof current === "number" ? current : 0) + 1;
+        await api.storage.set("count", next);
+        api.rpc.publish("counted", next);
+        return next;
+      },
+      { access: "write" },
+    );
+    api.onDeactivate(() => api.storage.set("deactivated", true));
+    void (async () => {
+      // Only the greeting: settings include secret values, and any reader can subscribe.
+      for await (const settings of api.settings.changes()) {
+        const greeting = typeof settings.greeting === "string" ? settings.greeting : null;
+        api.rpc.publish("settings", { greeting });
+      }
+    })();
+  },
+};
diff --git a/packages/plugin-sdk/fixtures/hello-plugin/t3-plugin.json b/packages/plugin-sdk/fixtures/hello-plugin/t3-plugin.json
new file mode 100644
index 0000000000000..dc8391fc6d822
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/hello-plugin/t3-plugin.json
@@ -0,0 +1,16 @@
+{
+  "id": "hello-plugin",
+  "name": "Hello",
+  "version": "0.1.0",
+  "description": "Test fixture that answers ping with its greeting setting and counts calls in storage.",
+  "engines": { "t3": ">=0.1.0" },
+  "server": "./server.cjs",
+  "settingsSchema": {
+    "type": "object",
+    "properties": {
+      "greeting": { "type": "string", "maxLength": 40 },
+      "token": { "type": "string", "format": "t3-secret" }
+    },
+    "additionalProperties": false
+  }
+}
diff --git a/packages/plugin-sdk/fixtures/hello-web/assets/hello.txt b/packages/plugin-sdk/fixtures/hello-web/assets/hello.txt
new file mode 100644
index 0000000000000..da6bb1feccf00
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/hello-web/assets/hello.txt
@@ -0,0 +1 @@
+Hello from hello-web assets.
diff --git a/packages/plugin-sdk/fixtures/hello-web/server.cjs b/packages/plugin-sdk/fixtures/hello-web/server.cjs
new file mode 100644
index 0000000000000..c56387edc585c
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/hello-web/server.cjs
@@ -0,0 +1,17 @@
+/** @type {import("@t3tools/plugin-sdk/server").PluginDefinition} */
+module.exports = {
+  activate(api) {
+    api.rpc.register("greeting", () => "Hello from the server half of hello-web.", {
+      access: "read",
+    });
+    api.mcp.registerTool(
+      {
+        name: "greet",
+        description: "Greets someone by name.",
+        inputSchema: { type: "object", properties: { name: { type: "string" } } },
+        access: "read",
+      },
+      (input) => `Hello, ${input.name ?? "friend"}!`,
+    );
+  },
+};
diff --git a/packages/plugin-sdk/fixtures/hello-web/t3-plugin.json b/packages/plugin-sdk/fixtures/hello-web/t3-plugin.json
new file mode 100644
index 0000000000000..137dbe91a1645
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/hello-web/t3-plugin.json
@@ -0,0 +1,9 @@
+{
+  "id": "hello-web",
+  "name": "Hello web",
+  "version": "0.1.0",
+  "description": "Test fixture with a right panel and a settings panel that call its server half.",
+  "engines": { "t3": ">=0.1.0" },
+  "server": "./server.cjs",
+  "web": "./web.js"
+}
diff --git a/packages/plugin-sdk/fixtures/hello-web/themes/hello-dusk.json b/packages/plugin-sdk/fixtures/hello-web/themes/hello-dusk.json
new file mode 100644
index 0000000000000..a2b9d62a0044f
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/hello-web/themes/hello-dusk.json
@@ -0,0 +1,6 @@
+{
+  "name": "Hello Dusk",
+  "appearance": "dark",
+  "canvas": "#1d1b26",
+  "accent": "#f2a65a"
+}
diff --git a/packages/plugin-sdk/fixtures/hello-web/web.js b/packages/plugin-sdk/fixtures/hello-web/web.js
new file mode 100644
index 0000000000000..94e8566b55cb7
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/hello-web/web.js
@@ -0,0 +1,93 @@
+// @effect-diagnostics globalFetch:off
+// Written by hand in the shape `t3PluginWeb` builds, so tests load it with no build step: React,
+// the atom functions and hooks, and the UI kit come from T3 through `globalThis.__t3PluginHost`.
+
+/** @type {{
+ * readonly react: typeof import("react"); readonly ui: typeof import("@t3tools/plugin-sdk/ui");
+ * readonly atom: typeof import("@t3tools/plugin-sdk/atom");
+ * readonly atomReact: typeof import("@t3tools/plugin-sdk/atom-react") }} */
+const host = Reflect.get(globalThis, "__t3PluginHost");
+const { createElement: h, useContext, useEffect, useState } = host.react;
+const Atom = host.atom;
+const { RegistryContext, useAtomSet, useAtomValue } = host.atomReact;
+const { Button } = host.ui;
+
+// One count per greeting, kept in T3's atom registry while Settings is closed.
+const greetingCount = Atom.family((/** @type {string} */ greeting) =>
+  Atom.withLabel(Atom.keepAlive(Atom.make(0)), `hello-web/${greeting}`),
+);
+const hellos = Atom.writable(
+  (get) => get(greetingCount("hello")),
+  (ctx, /** @type {number} */ count) => ctx.set(greetingCount("hello"), Math.min(count, 3)),
+);
+// A map of a writable atom passes its writes on, so setting the label sets the count.
+const hellosLabel = Atom.map(hellos, (count) => `Hellos: ${count}`);
+
+/** @type {import("@t3tools/plugin-sdk/web").WebPluginDefinition} */
+export default {
+  activate(api) {
+    /** @param {{ readonly threadId: string }} props */
+    function HelloPanel(props) {
+      const [greeting, setGreeting] = useState("Loading…");
+      const [note, setNote] = useState("");
+      useEffect(() => {
+        void api.rpc.invoke("greeting").then((value) => setGreeting(String(value)));
+        void api
+          .assetUrl("hello.txt")
+          .then((url) => fetch(url))
+          .then((response) => response.text())
+          .then(setNote);
+      }, []);
+      return h(
+        "div",
+        { className: "hello-web-panel" },
+        h("p", null, greeting),
+        h("p", null, note),
+        h("p", { className: "hello-web-muted" }, "Thread ", props.threadId),
+      );
+    }
+    function HelloSettings() {
+      const registry = useContext(RegistryContext);
+      const label = useAtomValue(hellosLabel);
+      const setHellos = useAtomSet(hellos);
+      return h(
+        "div",
+        { className: "hello-web-settings" },
+        h("p", null, "These settings are drawn by hello-web."),
+        h("p", null, label),
+        h(
+          Button,
+          {
+            size: "xs",
+            variant: "outline",
+            onClick: () => {
+              setHellos((count) => count + 1);
+              api.toast({ title: "Hello from hello-web" });
+            },
+          },
+          "Say hello",
+        ),
+        h(
+          Button,
+          { size: "xs", variant: "ghost", onClick: () => registry.set(hellosLabel, 0) },
+          "Reset",
+        ),
+      );
+    }
+    // Its own classes: T3's Tailwind classes exist only while T3's own code happens to use them.
+    api.injectStyles(`
+.hello-web-panel { display: grid; gap: 0.25rem; padding: 1rem; font-size: 0.875rem; border-top: 2px solid var(--primary); }
+.hello-web-muted { color: var(--muted-foreground); }
+.hello-web-settings { display: grid; gap: 0.5rem; }
+.hello-web-settings p { font-size: 0.75rem; }
+`);
+    api.rightPanel.register({ name: "hello", title: "Hello panel", component: HelloPanel });
+    api.commands.register({
+      id: "open-settings",
+      title: "Open hello-web settings",
+      keywords: ["hello"],
+      run: () => api.navigate("/settings/plugins"),
+    });
+    api.settings.registerPanel(HelloSettings);
+  },
+};
diff --git a/packages/plugin-sdk/fixtures/mcp-plugin/server.cjs b/packages/plugin-sdk/fixtures/mcp-plugin/server.cjs
new file mode 100644
index 0000000000000..b030e24b583a2
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/mcp-plugin/server.cjs
@@ -0,0 +1,30 @@
+// Plain CommonJS with no SDK import, so the plugin host loads it as is. The type comes from the SDK.
+
+/** @type {import("@t3tools/plugin-sdk/server").PluginDefinition} */
+module.exports = {
+  activate(api) {
+    api.mcp.registerTool(
+      {
+        name: "echo",
+        description: "Returns the text it is given.",
+        inputSchema: {
+          type: "object",
+          properties: { text: { type: "string" } },
+          required: ["text"],
+        },
+        access: "read",
+      },
+      (input) => ({ echoed: input.text ?? null }),
+    );
+    let touches = 0;
+    api.mcp.registerTool(
+      {
+        name: "touch",
+        description: "Counts how many times it was called.",
+        inputSchema: { type: "object", properties: {} },
+        access: "write",
+      },
+      () => ({ touches: ++touches }),
+    );
+  },
+};
diff --git a/packages/plugin-sdk/fixtures/mcp-plugin/t3-plugin.json b/packages/plugin-sdk/fixtures/mcp-plugin/t3-plugin.json
new file mode 100644
index 0000000000000..0f31023252333
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/mcp-plugin/t3-plugin.json
@@ -0,0 +1,8 @@
+{
+  "id": "mcp-plugin",
+  "name": "MCP tools",
+  "version": "0.1.0",
+  "description": "Test fixture that offers agents a read tool that echoes and a write tool that counts.",
+  "engines": { "t3": ">=0.1.0" },
+  "server": "./server.cjs"
+}
diff --git a/packages/plugin-sdk/fixtures/styles-plugin/styles/base.css b/packages/plugin-sdk/fixtures/styles-plugin/styles/base.css
new file mode 100644
index 0000000000000..31bfb7989b490
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/styles-plugin/styles/base.css
@@ -0,0 +1,4 @@
+/* Stable region names and theme tokens, so the rule survives T3 updates. */
+[data-t3-region="sidebar"] {
+  border-inline-end: 1px solid var(--border);
+}
diff --git a/packages/plugin-sdk/fixtures/styles-plugin/styles/compact.css b/packages/plugin-sdk/fixtures/styles-plugin/styles/compact.css
new file mode 100644
index 0000000000000..131aa227a6ce9
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/styles-plugin/styles/compact.css
@@ -0,0 +1,3 @@
+[data-t3-region="composer"] {
+  padding-block: 0.25rem;
+}
diff --git a/packages/plugin-sdk/fixtures/styles-plugin/t3-plugin.json b/packages/plugin-sdk/fixtures/styles-plugin/t3-plugin.json
new file mode 100644
index 0000000000000..24c89d07025b8
--- /dev/null
+++ b/packages/plugin-sdk/fixtures/styles-plugin/t3-plugin.json
@@ -0,0 +1,7 @@
+{
+  "id": "styles-plugin",
+  "name": "Styles plugin",
+  "version": "0.1.0",
+  "description": "Test fixture that changes the app with CSS alone, without server or web code.",
+  "engines": { "t3": ">=0.1.0" }
+}
diff --git a/packages/plugin-sdk/package.json b/packages/plugin-sdk/package.json
new file mode 100644
index 0000000000000..2db444a73ca1c
--- /dev/null
+++ b/packages/plugin-sdk/package.json
@@ -0,0 +1,70 @@
+{
+  "name": "@t3tools/plugin-sdk",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Types and build helpers for T3 Code plugins.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pingdotgg/t3code",
+    "directory": "packages/plugin-sdk"
+  },
+  "type": "module",
+  "exports": {
+    "./server": {
+      "types": "./src/server.ts",
+      "import": "./src/server.ts"
+    },
+    "./web": {
+      "types": "./src/web.ts",
+      "import": "./src/web.ts"
+    },
+    "./atom": {
+      "types": "./src/atom.ts",
+      "import": "./src/atom.ts"
+    },
+    "./atom-react": {
+      "types": "./src/atom-react.ts",
+      "import": "./src/atom-react.ts"
+    },
+    "./shared": {
+      "types": "./src/shared.ts",
+      "import": "./src/shared.ts"
+    },
+    "./ui": {
+      "types": "./src/ui.ts",
+      "import": "./src/ui.ts"
+    },
+    "./vite": {
+      "types": "./src/vite.ts",
+      "import": "./src/vite.ts"
+    }
+  },
+  "scripts": {
+    "build": "node scripts/build.ts",
+    "build:examples": "node scripts/build-examples.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "react": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "@types/node": "*",
+    "@types/react": ">=19",
+    "react": ">=19"
+  },
+  "peerDependenciesMeta": {
+    "@types/node": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  }
+}
diff --git a/packages/plugin-sdk/scripts/build-examples.ts b/packages/plugin-sdk/scripts/build-examples.ts
new file mode 100644
index 0000000000000..bfd6369c79032
--- /dev/null
+++ b/packages/plugin-sdk/scripts/build-examples.ts
@@ -0,0 +1,12 @@
+// @effect-diagnostics nodeBuiltinImport:off
+// Builds each example's web half to its dist/web.js with the example's own vite.config.ts.
+import * as NodeFS from "node:fs";
+import * as NodePath from "node:path";
+
+import { build } from "vite-plus";
+
+const examples = NodePath.join(import.meta.dirname, "../examples");
+for (const name of NodeFS.readdirSync(examples).toSorted()) {
+  const configFile = NodePath.join(examples, name, "vite.config.ts");
+  if (NodeFS.existsSync(configFile)) await build({ configFile, logLevel: "warn" });
+}
diff --git a/packages/plugin-sdk/scripts/build.ts b/packages/plugin-sdk/scripts/build.ts
new file mode 100644
index 0000000000000..8012d7581faca
--- /dev/null
+++ b/packages/plugin-sdk/scripts/build.ts
@@ -0,0 +1,147 @@
+// @effect-diagnostics nodeBuiltinImport:off
+// Builds the publishable package into dist: JavaScript and bundled declarations from src, and a
+// package.json whose exports point at them. Publish or pack dist itself, never this folder, whose
+// manifest exports the sources.
+import * as NodeChildProcess from "node:child_process";
+import * as NodeFS from "node:fs";
+import * as NodeOS from "node:os";
+import * as NodePath from "node:path";
+
+import { build } from "vite-plus/pack";
+
+const packageRoot = NodePath.resolve(import.meta.dirname, "..");
+const repoRoot = NodePath.resolve(packageRoot, "../..");
+const outDir = NodePath.join(packageRoot, "dist");
+const entries = ["atom", "atom-react", "server", "shared", "ui", "vite", "web"];
+// What the published declarations may import besides each other.
+const PEER_IMPORT = /^react(\/|$)/;
+const tsc = NodePath.join(repoRoot, "node_modules/.bin/tsc");
+
+interface PackageManifest {
+  readonly name: string;
+  readonly version: string;
+  readonly description?: string;
+  readonly license?: string;
+  readonly repository?: object;
+  readonly exports?: Readonly<Record<string, { readonly types: string }>>;
+  readonly peerDependencies?: Readonly<Record<string, string>>;
+  readonly peerDependenciesMeta?: object;
+}
+const readManifest = (file: string): PackageManifest =>
+  JSON.parse(NodeFS.readFileSync(file, "utf8"));
+
+NodeFS.rmSync(outDir, { recursive: true, force: true });
+await build({
+  cwd: packageRoot,
+  config: false,
+  logLevel: "warn",
+  entry: Object.fromEntries(entries.map((name) => [name, `src/${name}.ts`])),
+  outDir,
+  platform: "node",
+  fixedExtension: false,
+  dts: false,
+});
+
+const declarations = NodeFS.mkdtempSync(NodePath.join(NodeOS.tmpdir(), "t3-plugin-sdk-types-"));
+try {
+  const emitted = NodeChildProcess.spawnSync(
+    tsc,
+    ["-p", "tsconfig.build.json", "--outDir", declarations, "--noCheck"],
+    { cwd: packageRoot, encoding: "utf8" },
+  );
+  const errors = emitted.stdout.split("\n").filter((line) => / error TS/.test(line));
+  if (emitted.error !== undefined || errors.length > 0) {
+    throw new Error(`Writing declarations failed:\n${errors.join("\n") || emitted.error}`);
+  }
+
+  await build({
+    cwd: packageRoot,
+    config: false,
+    logLevel: "warn",
+    entry: Object.fromEntries(
+      entries.map((name) => [name, NodePath.join(declarations, `${name}.d.ts`)]),
+    ),
+    outDir,
+    clean: false,
+    fixedExtension: false,
+    hash: false,
+    dts: { dtsInput: true },
+    deps: { neverBundle: PEER_IMPORT },
+    inputOptions: { checks: { pluginTimings: false } },
+    outputOptions: { chunkFileNames: "chunks/[name].d.ts" },
+    plugins: [
+      {
+        // The sources import each other as `./name.ts`.
+        name: "t3-sibling-declarations",
+        resolveId(source: string, importer: string | undefined) {
+          if (importer === undefined || !source.startsWith(".") || !/\.tsx?$/.test(source)) {
+            return undefined;
+          }
+          return NodePath.resolve(NodePath.dirname(importer), source).replace(/\.tsx?$/, ".d.ts");
+        },
+      },
+    ],
+  });
+} finally {
+  NodeFS.rmSync(declarations, { recursive: true, force: true });
+}
+
+// The published declarations must import nothing but each other and peer dependencies, and must
+// typecheck on their own.
+const declarationFiles = NodeFS.readdirSync(outDir).filter((file) => file.endsWith(".d.ts"));
+for (const file of declarationFiles) {
+  const text = NodeFS.readFileSync(NodePath.join(outDir, file), "utf8");
+  for (const [, specifier = ""] of text.matchAll(/(?:from|import\()\s*"([^"]+)"/g)) {
+    if (!specifier.startsWith("./") && !PEER_IMPORT.test(specifier)) {
+      throw new Error(
+        `dist/${file} imports ${specifier}, which the published package can't reach.`,
+      );
+    }
+  }
+}
+const checked = NodeChildProcess.spawnSync(
+  tsc,
+  [
+    "--ignoreConfig",
+    "--noEmit",
+    "--strict",
+    "--skipLibCheck",
+    "false",
+    "--module",
+    "nodenext",
+    "--target",
+    "es2023",
+    "--lib",
+    "esnext,dom",
+    ...declarationFiles.map((file) => NodePath.join(outDir, file)),
+  ],
+  { cwd: packageRoot, encoding: "utf8" },
+);
+if (checked.status !== 0)
+  throw new Error(`The published declarations don't typecheck:\n${checked.stdout}`);
+
+// The source manifest, private and exporting src, becomes one that exports dist.
+const sources = readManifest(NodePath.join(packageRoot, "package.json"));
+const published = {
+  name: sources.name,
+  version: sources.version,
+  description: sources.description,
+  license: sources.license,
+  repository: sources.repository,
+  type: "module",
+  files: ["*.js", "*.d.ts", "chunks"],
+  exports: Object.fromEntries(
+    Object.entries(sources.exports ?? {}).map(([subpath, target]) => {
+      const name = NodePath.basename(target.types, ".ts");
+      return [subpath, { types: `./${name}.d.ts`, default: `./${name}.js` }];
+    }),
+  ),
+  peerDependencies: sources.peerDependencies,
+  peerDependenciesMeta: sources.peerDependenciesMeta,
+};
+NodeFS.writeFileSync(
+  NodePath.join(outDir, "package.json"),
+  `${JSON.stringify(published, null, 2)}\n`,
+);
+NodeFS.copyFileSync(NodePath.join(packageRoot, "README.md"), NodePath.join(outDir, "README.md"));
+NodeFS.copyFileSync(NodePath.join(repoRoot, "LICENSE"), NodePath.join(outDir, "LICENSE"));
diff --git a/packages/plugin-sdk/src/atom-react.ts b/packages/plugin-sdk/src/atom-react.ts
new file mode 100644
index 0000000000000..eb491ea621b4d
--- /dev/null
+++ b/packages/plugin-sdk/src/atom-react.ts
@@ -0,0 +1,43 @@
+import type { Context } from "react";
+
+import type { Atom, Writable } from "./atom.ts";
+
+// T3's own atom hooks, which read atoms from `@t3tools/plugin-sdk/atom` in T3's registry. Build
+// with `@t3tools/plugin-sdk/vite`, which points this module at the app's copies.
+
+/** T3's atom registry, for reading and writing atoms outside a component. */
+export interface Registry {
+  get<A>(atom: Atom<A>): A;
+  set<R, W>(atom: Writable<R, W>, value: W): void;
+  /** Keeps the atom alive until the returned function runs. */
+  mount<A>(atom: Atom<A>): () => void;
+  refresh<A>(atom: Atom<A>): void;
+  /** Returns the function that stops the subscription. */
+  subscribe<A>(
+    atom: Atom<A>,
+    onValue: (value: A) => void,
+    options?: { readonly immediate?: boolean },
+  ): () => void;
+}
+
+/** Holds T3's registry. Read it with `useContext` to reach atoms from an event handler. */
+export declare const RegistryContext: Context<Registry>;
+/** Returns the atom's value, or the part `select` picks, and renders again when it changes. */
+export declare const useAtomValue: {
+  <A>(atom: Atom<A>): A;
+  <A, B>(atom: Atom<A>, select: (value: A) => B): B;
+};
+/** Returns a setter for the atom without rendering again when its value changes. */
+export declare const useAtomSet: <R, W>(
+  atom: Writable<R, W>,
+) => (value: W | ((value: R) => W)) => void;
+/** Keeps the atom alive while the component is mounted. */
+export declare const useAtomMount: <A>(atom: Atom<A>) => void;
+/** Returns a function that computes the atom again. */
+export declare const useAtomRefresh: <A>(atom: Atom<A>) => () => void;
+/** Calls `onValue` with each new value while the component is mounted. */
+export declare const useAtomSubscribe: <A>(
+  atom: Atom<A>,
+  onValue: (value: A) => void,
+  options?: { readonly immediate?: boolean },
+) => void;
diff --git a/packages/plugin-sdk/src/atom.ts b/packages/plugin-sdk/src/atom.ts
new file mode 100644
index 0000000000000..5cb4372006893
--- /dev/null
+++ b/packages/plugin-sdk/src/atom.ts
@@ -0,0 +1,86 @@
+// T3's own `Atom` functions, so a plugin's atoms live in T3's atom registry and work with the hooks
+// in `@t3tools/plugin-sdk/atom-react`. Import as `import * as Atom from "@t3tools/plugin-sdk/atom"`
+// and build with `@t3tools/plugin-sdk/vite`. The SDK owns these types, a small part of effect's
+// `effect/reactivity`, so a plugin needs no `effect` and an effect upgrade in T3 doesn't change them.
+
+declare const AtomType: unique symbol;
+declare const WritableType: unique symbol;
+
+/** A value T3's atom registry computes and caches. Read it in a component with `useAtomValue`. */
+export interface Atom<A> {
+  readonly [AtomType]: () => A;
+}
+
+/** An atom that also takes writes of `W`, through `useAtomSet` or `get.set`. */
+export interface Writable<R, W = R> extends Atom<R> {
+  readonly [WritableType]: (value: W) => void;
+}
+
+/** What an atom's read function gets. Call it, as in `get(other)`, to read another atom. */
+export interface AtomContext {
+  <A>(atom: Atom<A>): A;
+  /** Reads another atom and runs this read again when it changes. */
+  get<A>(this: AtomContext, atom: Atom<A>): A;
+  /** Reads another atom without following its changes. */
+  once<A>(this: AtomContext, atom: Atom<A>): A;
+  /** Replaces this atom's value, for a value that arrives after the read returned. */
+  setSelf<A>(this: AtomContext, value: A): void;
+  set<R, W>(this: AtomContext, atom: Writable<R, W>, value: W): void;
+  refresh<A>(this: AtomContext, atom: Atom<A>): void;
+  refreshSelf(this: AtomContext): void;
+  /** Keeps another atom alive while this one is. */
+  mount<A>(this: AtomContext, atom: Atom<A>): void;
+  subscribe<A>(
+    this: AtomContext,
+    atom: Atom<A>,
+    onValue: (value: A) => void,
+    options?: { readonly immediate?: boolean },
+  ): void;
+  /** Runs before the read runs again and when the atom is disposed. */
+  addFinalizer(this: AtomContext, cleanup: () => void): void;
+}
+
+/** What a writable atom's write function gets. */
+export interface WriteContext<A> {
+  get<T>(this: WriteContext<A>, atom: Atom<T>): T;
+  setSelf(this: WriteContext<A>, value: A): void;
+  set<R, W>(this: WriteContext<A>, atom: Writable<R, W>, value: W): void;
+  refreshSelf(this: WriteContext<A>): void;
+}
+
+/**
+ * Makes an atom. From a function, its value is what the function returns, computed again when an
+ * atom it reads with `get` changes. From any other value, it is a writable atom holding it.
+ */
+export declare const make: {
+  <A>(read: (get: AtomContext) => A): Atom<A>;
+  <A>(initialValue: A): Writable<A>;
+};
+/** Makes an atom whose value `read` returns. */
+export declare const readable: <A>(read: (get: AtomContext) => A) => Atom<A>;
+/** Makes an atom whose value `read` returns and whose writes `write` handles. */
+export declare const writable: <R, W>(
+  read: (get: AtomContext) => R,
+  write: (ctx: WriteContext<R>, value: W) => void,
+) => Writable<R, W>;
+/** Returns a function that makes one atom per argument and returns it again for that argument. */
+export declare const family: <Arg, T extends object>(create: (arg: Arg) => T) => (arg: Arg) => T;
+/** An atom computed from another one's value. Writes to a writable atom pass through to it. */
+export declare const map: {
+  <R, W, B>(atom: Writable<R, W>, f: (value: R) => B): Writable<B, W>;
+  <A, B>(atom: Atom<A>, f: (value: A) => B): Atom<B>;
+};
+/** Like `map`, but `read` gets the context too, to read other atoms. */
+export declare const transform: {
+  <R, W, B>(
+    atom: Writable<R, W>,
+    read: (get: AtomContext, atom: Writable<R, W>) => B,
+  ): Writable<B, W>;
+  <A, B>(atom: Atom<A>, read: (get: AtomContext, atom: Atom<A>) => B): Atom<B>;
+};
+/** A copy of the atom that keeps its value when nothing reads it. */
+export declare const keepAlive: <T extends Atom<unknown>>(atom: T) => T;
+/** A copy of the atom that keeps its value for `milliseconds` after the last reader leaves. */
+export declare const setIdleTTL: <T extends Atom<unknown>>(atom: T, milliseconds: number) => T;
+/** A copy of the atom with a name for debugging. */
+export declare const withLabel: <T extends Atom<unknown>>(atom: T, name: string) => T;
diff --git a/packages/plugin-sdk/src/server.ts b/packages/plugin-sdk/src/server.ts
new file mode 100644
index 0000000000000..d054e05cb09ba
--- /dev/null
+++ b/packages/plugin-sdk/src/server.ts
@@ -0,0 +1,134 @@
+import type { JsonObject, JsonValue, PluginRpcMap } from "./shared.ts";
+
+/** `read` methods need the caller's `orchestration:read` scope, `write` methods `orchestration:operate`. */
+export type PluginRpcAccess = "read" | "write";
+
+export interface PluginRpcContext {
+  /**
+   * Aborts when the caller goes away, the plugin deactivates, or the handler has not answered
+   * within 30 seconds, when the call fails.
+   */
+  readonly signal: AbortSignal;
+  /**
+   * What the caller's session may call: `write` if it may call `write` methods, else `read`. A
+   * `read` method can use it to tell a read-only session, such as a guest's, from the owner's.
+   */
+  readonly access: PluginRpcAccess;
+}
+
+/** Answers one method of a `PluginRpcMap`. */
+export type PluginRpcHandler<
+  Method extends PluginRpcMap["methods"][string] = PluginRpcMap["methods"][string],
+> = (
+  input: Method["input"],
+  context: PluginRpcContext,
+) => Method["output"] | Promise<Method["output"]>;
+
+/** How every rejected API call fails. `code` names the server's error; treat it as opaque. */
+export interface PluginApiError extends Error {
+  readonly code: string;
+}
+
+/**
+ * A plugin registers at most 32 tools, because agents in every thread see them all. A call that
+ * hasn't answered within 5 minutes fails with an error the agent reads, and its `signal` aborts.
+ */
+export interface PluginMcpTool {
+  /** Agents see the tool as `plg_<pluginId>_<name>`. Letters, digits, `_` and `-`. */
+  readonly name: string;
+  /** At most 1000 characters. */
+  readonly description: string;
+  /** JSON Schema for the tool's arguments, at most 4000 characters as JSON. */
+  readonly inputSchema: JsonObject;
+  /**
+   * Every agent sees the tool. A `write` tool runs only for an agent in a thread set to Full
+   * access and not in Plan mode, or an outside agent approved with Full access; others get a
+   * refusal that says so. Agents from linked environments can't call it.
+   */
+  readonly access: PluginRpcAccess;
+}
+
+export type PluginMcpToolHandler = (
+  input: JsonObject,
+  context: {
+    /** Aborts when the agent cancels the call, the plugin deactivates, or 5 minutes pass. */
+    readonly signal: AbortSignal;
+    /** The thread whose agent called the tool, or null for an MCP client outside a thread. */
+    readonly threadId: string | null;
+  },
+) => JsonValue | Promise<JsonValue>;
+
+export interface PluginLogger {
+  readonly debug: (message: string, fields?: JsonObject) => void;
+  readonly info: (message: string, fields?: JsonObject) => void;
+  readonly warn: (message: string, fields?: JsonObject) => void;
+  readonly error: (message: string, fields?: JsonObject) => void;
+}
+
+/**
+ * What `activate` receives. Everything is scoped to one activation and released on deactivate.
+ * `Rpc` types the methods and channels the web half calls.
+ */
+export interface PluginApi<Rpc extends PluginRpcMap = PluginRpcMap> {
+  /**
+   * This API's version, 1 so far. T3 raises it when the API gains a member, whose doc then names
+   * the version that added it, so a plugin can check it before using a member an older T3 lacks.
+   * To refuse older T3 releases outright, set `engines.t3` in the manifest.
+   */
+  readonly version: number;
+  readonly id: string;
+  readonly rootDir: string;
+  readonly log: PluginLogger;
+  readonly settings: {
+    /**
+     * The saved settings, secret values included. Fields nobody saved read as the `default` in
+     * the manifest's `settingsSchema`, at the top level and for fields that are not secrets.
+     */
+    readonly get: () => Promise<JsonObject>;
+    /** Yields the settings as `get` reads them after each change, until deactivation. */
+    readonly changes: () => AsyncIterable<JsonObject>;
+  };
+  readonly storage: {
+    readonly get: (key: string) => Promise<JsonValue | undefined>;
+    readonly set: (key: string, value: JsonValue) => Promise<void>;
+    readonly delete: (key: string) => Promise<void>;
+    readonly list: (prefix?: string) => Promise<ReadonlyArray<string>>;
+  };
+  readonly rpc: {
+    /**
+     * Answers `plugins.invoke` calls for `method` from clients. `input` has the type `Rpc` gives
+     * it, but a client can send any JSON, so check input before acting on it.
+     */
+    readonly register: <Method extends Extract<keyof Rpc["methods"], string>>(
+      method: Method,
+      handler: PluginRpcHandler<Rpc["methods"][Method]>,
+      options: { readonly access: PluginRpcAccess },
+    ) => void;
+    /** Sends `value` to every `plugins.subscribe` caller on `channel`. Any session that can read this environment may subscribe, so never publish secrets. */
+    readonly publish: <Channel extends Extract<keyof Rpc["channels"], string>>(
+      channel: Channel,
+      value: Rpc["channels"][Channel],
+    ) => void;
+  };
+  /** Runs when the plugin is disabled or reloaded, or the server stops; at once if that already happened. */
+  readonly onDeactivate: (cleanup: () => void | Promise<void>) => void;
+  readonly mcp: {
+    /**
+     * Offers a tool to agents in every thread until the plugin deactivates. Then it leaves new tool
+     * lists, and a call to it fails as an unknown tool.
+     */
+    readonly registerTool: (tool: PluginMcpTool, handler: PluginMcpToolHandler) => void;
+  };
+}
+
+export interface PluginDefinition<Rpc extends PluginRpcMap = PluginRpcMap> {
+  readonly activate: (api: PluginApi<Rpc>) => void | Promise<void>;
+}
+
+/**
+ * Types a server plugin. The CommonJS entry sets `module.exports` to the result. Pass the plugin's
+ * `PluginRpcMap`, as in `definePlugin<NotesRpc>({ ... })`, to type `api.rpc`.
+ */
+export const definePlugin = <Rpc extends PluginRpcMap = PluginRpcMap>(
+  definition: PluginDefinition<Rpc>,
+): PluginDefinition<Rpc> => definition;
diff --git a/packages/plugin-sdk/src/shared.ts b/packages/plugin-sdk/src/shared.ts
new file mode 100644
index 0000000000000..9410518806024
--- /dev/null
+++ b/packages/plugin-sdk/src/shared.ts
@@ -0,0 +1,20 @@
+export type JsonValue = null | boolean | number | string | ReadonlyArray<JsonValue> | JsonObject;
+
+export interface JsonObject {
+  readonly [key: string]: JsonValue;
+}
+
+/**
+ * A plugin's server methods and channels, as in `{ methods: { add: { input: { text: string };
+ * output: string } }; channels: {} }`. Pass it to `definePlugin` and `defineWebPlugin` so both halves
+ * check their calls. Use `input: undefined` for no input, and `type`, not `interface`, for values.
+ */
+export interface PluginRpcMap {
+  readonly methods: {
+    readonly [method: string]: {
+      readonly input: JsonValue | undefined;
+      readonly output: JsonValue;
+    };
+  };
+  readonly channels: { readonly [channel: string]: JsonValue };
+}
diff --git a/packages/plugin-sdk/src/ui.ts b/packages/plugin-sdk/src/ui.ts
new file mode 100644
index 0000000000000..ce57533f2596d
--- /dev/null
+++ b/packages/plugin-sdk/src/ui.ts
@@ -0,0 +1,79 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+/**
+ * T3's own UI components. These exist only at runtime inside T3: build with
+ * `@t3tools/plugin-sdk/vite`, which points this module at the app's copies.
+ *
+ * Each takes the HTML attributes of the element it draws plus its own props, and nothing else, so
+ * a misspelled prop fails to typecheck. `data-*` and `aria-*` attributes are always allowed.
+ */
+type UiComponent<
+  Element extends "button" | "div" | "input" | "label" | "p" | "span" | "textarea",
+  Props = object,
+> = (props: Omit<ComponentPropsWithoutRef<Element>, keyof Props> & Props) => ReactNode;
+
+export declare const Badge: UiComponent<
+  "span",
+  {
+    readonly variant?:
+      | "default"
+      | "destructive"
+      | "error"
+      | "info"
+      | "outline"
+      | "secondary"
+      | "success"
+      | "warning";
+    readonly size?: "default" | "sm" | "lg";
+  }
+>;
+export declare const Button: UiComponent<
+  "button",
+  {
+    readonly variant?:
+      | "default"
+      | "destructive"
+      | "destructive-outline"
+      | "ghost"
+      | "ghost-muted"
+      | "ghost-destructive"
+      | "link"
+      | "outline"
+      | "secondary"
+      | "warning-outline";
+    readonly size?:
+      | "default"
+      | "xs"
+      | "sm"
+      | "lg"
+      | "xl"
+      | "icon-xs"
+      | "icon-sm"
+      | "icon"
+      | "icon-lg"
+      | "icon-xl";
+  }
+>;
+export declare const Empty: UiComponent<"div">;
+export declare const EmptyContent: UiComponent<"div">;
+export declare const EmptyDescription: UiComponent<"p">;
+export declare const EmptyHeader: UiComponent<"div">;
+export declare const EmptyMedia: UiComponent<"div", { readonly variant?: "default" | "icon" }>;
+export declare const EmptyTitle: UiComponent<"div">;
+// T3's Input and Textarea have their own `size`, which the SDK doesn't offer.
+export declare const Input: UiComponent<"input", { readonly size?: never }>;
+export declare const Label: UiComponent<"label">;
+export declare const Switch: UiComponent<
+  "span",
+  {
+    readonly checked?: boolean;
+    readonly defaultChecked?: boolean;
+    readonly onCheckedChange?: (checked: boolean) => void;
+    readonly disabled?: boolean;
+    readonly readOnly?: boolean;
+    readonly required?: boolean;
+    readonly name?: string;
+    readonly onChange?: never;
+  }
+>;
+export declare const Textarea: UiComponent<"textarea", { readonly size?: never }>;
diff --git a/packages/plugin-sdk/src/vite.test.ts b/packages/plugin-sdk/src/vite.test.ts
new file mode 100644
index 0000000000000..6177dece2c18a
--- /dev/null
+++ b/packages/plugin-sdk/src/vite.test.ts
@@ -0,0 +1,90 @@
+// @effect-diagnostics nodeBuiltinImport:off
+import * as NodeFSP from "node:fs/promises";
+import * as NodeOS from "node:os";
+import * as NodePath from "node:path";
+
+import { build } from "vite-plus";
+import { describe, expect, expectTypeOf, it } from "vite-plus/test";
+
+import type * as AtomModule from "./atom.ts";
+import type * as AtomReactModule from "./atom-react.ts";
+import { t3PluginWeb } from "./vite.ts";
+import { HOST_ATOM_EXPORTS, HOST_ATOM_REACT_EXPORTS } from "./web.ts";
+
+const exampleRoot = NodePath.join(import.meta.dirname, "../examples/quick-notes");
+
+describe("t3PluginWeb", () => {
+  it("bundles a web plugin without React and reads shared modules from the host", async () => {
+    const output = await build({
+      root: exampleRoot,
+      configFile: false,
+      logLevel: "silent",
+      plugins: [t3PluginWeb()],
+      build: { write: false, minify: false },
+    });
+    const chunks = (Array.isArray(output) ? output : [output]).flatMap((result) =>
+      "output" in result ? result.output.filter((item) => item.type === "chunk") : [],
+    );
+
+    expect(chunks.map((chunk) => chunk.fileName)).toEqual(["web.js"]);
+    const [chunk] = chunks;
+    expect(chunk?.moduleIds.filter((id) => id.includes("node_modules"))).toEqual([]);
+    expect(chunk?.code).not.toMatch(/^import /m);
+    // The example's atoms and hooks come from T3, not a bundled copy of effect.
+    for (const key of ["react", "jsxRuntime", "ui", "atom", "atomReact"]) {
+      expect(chunk?.code).toContain(`globalThis.__t3PluginHost.${key}`);
+    }
+  });
+
+  it("keeps a lazily imported module inside web.js, since T3 loads no other file", async () => {
+    const root = await NodeFSP.mkdtemp(NodePath.join(NodeOS.tmpdir(), "t3-plugin-lazy-"));
+    await using _root = { [Symbol.asyncDispose]: () => NodeFSP.rm(root, { recursive: true }) };
+    await NodeFSP.writeFile(NodePath.join(root, "later.ts"), 'export const later = "later";\n');
+    await NodeFSP.writeFile(
+      NodePath.join(root, "web.tsx"),
+      'export default { activate: () => import("./later.ts") };\n',
+    );
+
+    const output = await build({
+      root,
+      configFile: false,
+      logLevel: "silent",
+      plugins: [t3PluginWeb()],
+      build: { write: false, minify: false },
+    });
+    const files = (Array.isArray(output) ? output : [output]).flatMap((result) =>
+      "output" in result ? result.output.map((item) => item.fileName) : [],
+    );
+    expect(files).toEqual(["web.js"]);
+  });
+
+  it("refuses a stylesheet T3 would never load", async () => {
+    const root = await NodeFSP.mkdtemp(NodePath.join(NodeOS.tmpdir(), "t3-plugin-css-"));
+    await using _root = { [Symbol.asyncDispose]: () => NodeFSP.rm(root, { recursive: true }) };
+    await NodeFSP.writeFile(NodePath.join(root, "web.css"), "p { color: red; }");
+    await NodeFSP.writeFile(
+      NodePath.join(root, "web.tsx"),
+      'import "./web.css";\nexport default {};\n',
+    );
+
+    await expect(
+      build({
+        root,
+        configFile: false,
+        logLevel: "silent",
+        plugins: [t3PluginWeb()],
+        build: { write: false, minify: false },
+      }),
+    ).rejects.toThrow("which T3 never loads");
+  });
+});
+
+describe("shared atom modules", () => {
+  // T3 hands a plugin only the listed names, so a name the SDK declares but T3 doesn't list breaks.
+  it("lists exactly the values the SDK's atom modules declare", () => {
+    expectTypeOf<keyof typeof AtomModule>().toEqualTypeOf<(typeof HOST_ATOM_EXPORTS)[number]>();
+    expectTypeOf<keyof typeof AtomReactModule>().toEqualTypeOf<
+      (typeof HOST_ATOM_REACT_EXPORTS)[number]
+    >();
+  });
+});
diff --git a/packages/plugin-sdk/src/vite.ts b/packages/plugin-sdk/src/vite.ts
new file mode 100644
index 0000000000000..a7a7f42e7e203
--- /dev/null
+++ b/packages/plugin-sdk/src/vite.ts
@@ -0,0 +1,109 @@
+// @effect-diagnostics nodeBuiltinImport:off
+import * as NodeModule from "node:module";
+import * as NodePath from "node:path";
+
+import { HOST_ATOM_EXPORTS, HOST_ATOM_REACT_EXPORTS, HOST_UI_EXPORTS } from "./web.ts";
+
+const HOST_PREFIX = "\0t3-plugin-host:";
+
+/** Imports that T3 provides at runtime, mapped to their key on `globalThis.__t3PluginHost`. */
+const HOST_MODULES: Readonly<Record<string, string>> = {
+  react: "react",
+  "react-dom": "reactDom",
+  "react/jsx-runtime": "jsxRuntime",
+  "@t3tools/plugin-sdk/atom": "atom",
+  "@t3tools/plugin-sdk/atom-react": "atomReact",
+  "@t3tools/plugin-sdk/ui": "ui",
+};
+
+const FIXED_EXPORTS: Readonly<Record<string, ReadonlyArray<string>>> = {
+  "@t3tools/plugin-sdk/atom": HOST_ATOM_EXPORTS,
+  "@t3tools/plugin-sdk/atom-react": HOST_ATOM_REACT_EXPORTS,
+  "@t3tools/plugin-sdk/ui": HOST_UI_EXPORTS,
+};
+
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
+
+// React's export list depends on its version, so it is read from the plugin's own install.
+const installedExports = (root: string, specifier: string) => {
+  try {
+    return Object.keys(NodeModule.createRequire(NodePath.join(root, "package.json"))(specifier));
+  } catch (cause) {
+    throw new Error(
+      `The plugin imports ${specifier}, which isn't installed in ${root}. Install react and react-dom as dev dependencies: the bundle uses T3's own copies at runtime, but the build reads their export lists.`,
+      { cause },
+    );
+  }
+};
+
+export interface T3PluginWebOptions {
+  /** The web entry, relative to the Vite root. Defaults to `web.tsx`. */
+  readonly entry?: string;
+  /** Where `web.js` is written, relative to the Vite root. Defaults to `dist`. */
+  readonly outDir?: string;
+}
+
+/**
+ * Builds a plugin's web half as the single-file ESM bundle T3 loads. React, react-dom, the JSX
+ * runtime and the SDK's `atom`, `atom-react` and `ui` modules become reads from
+ * `globalThis.__t3PluginHost`, so the bundle uses T3's copies instead of shipping its own.
+ * Point the manifest's `web` at `<outDir>/web.js`.
+ */
+export function t3PluginWeb(options: T3PluginWebOptions = {}) {
+  let root = NodePath.resolve();
+  return {
+    name: "t3-plugin-web",
+    enforce: "pre" as const,
+    config: () => ({
+      // The host shares only the production JSX runtime, so development builds must not use jsxDEV.
+      oxc: { jsx: { runtime: "automatic" as const, importSource: "react", development: false } },
+      build: {
+        lib: {
+          entry: options.entry ?? "web.tsx",
+          formats: ["es" as const],
+          fileName: () => "web.js",
+          // Named so the stylesheet check below explains itself, not Vite's package.json error.
+          cssFileName: "web",
+        },
+        outDir: options.outDir ?? "dist",
+        // T3 loads only `web.js`, so `import()` and `React.lazy` modules must stay inside it.
+        rolldownOptions: { output: { codeSplitting: false } },
+      },
+    }),
+    configResolved: (config: { readonly root: string }) => {
+      root = config.root;
+    },
+    // T3 loads only `web.js`, so a stylesheet Vite writes beside it would never apply. Runs last,
+    // after Vite's own CSS step has added it.
+    generateBundle: {
+      order: "post" as const,
+      handler(
+        this: { readonly error: (message: string) => never },
+        _options: unknown,
+        bundle: Readonly<Record<string, { readonly fileName: string }>>,
+      ) {
+        const stylesheet = Object.values(bundle).find((output) => output.fileName.endsWith(".css"));
+        if (stylesheet === undefined) return;
+        this.error(
+          `The build wrote ${stylesheet.fileName}, which T3 never loads. Import the CSS with \`?inline\`, as in \`import css from "./web.css?inline"\`, and pass it to \`api.injectStyles(css)\` in \`activate\`.`,
+        );
+      },
+    },
+    resolveId: (source: string) => (source in HOST_MODULES ? HOST_PREFIX + source : undefined),
+    load: (id: string) => {
+      if (!id.startsWith(HOST_PREFIX)) return undefined;
+      const specifier = id.slice(HOST_PREFIX.length);
+      const names = FIXED_EXPORTS[specifier] ?? installedExports(root, specifier);
+      const exported = names.filter((name) => name !== "default" && IDENTIFIER.test(name));
+      // Pure reads let the bundler drop every export the plugin does not use.
+      return [
+        `const host = globalThis.__t3PluginHost.${HOST_MODULES[specifier]};`,
+        "const read = (name) => host[name];",
+        "export default host;",
+        ...exported.map(
+          (name) => `export const ${name} = /* @__PURE__ */ read(${JSON.stringify(name)});`,
+        ),
+      ].join("\n");
+    },
+  };
+}
diff --git a/packages/plugin-sdk/src/web.ts b/packages/plugin-sdk/src/web.ts
new file mode 100644
index 0000000000000..2be4d1d696212
--- /dev/null
+++ b/packages/plugin-sdk/src/web.ts
@@ -0,0 +1,192 @@
+import type { ReactNode } from "react";
+
+import type { PluginRpcMap } from "./shared.ts";
+
+/** `invoke`'s input: optional when the method's input may be undefined. */
+type RpcInputArgs<Input> = undefined extends Input ? [input?: Input] : [input: Input];
+
+/** Anything React can draw: an element, text, or null for nothing. */
+export type WebPluginNode = ReactNode;
+
+/**
+ * A React function component. Only React's types are needed: build with
+ * `@t3tools/plugin-sdk/vite` so the bundle uses T3's React instead of its own copy.
+ */
+export type WebPluginComponent<Props = Record<string, never>> = (props: Props) => WebPluginNode;
+
+export interface WebPluginRightPanel {
+  /** Unique within the plugin. Letters, digits, `_` and `-`. */
+  readonly name: string;
+  /** Shown on the panel's tab and in the panel's add menu. */
+  readonly title: string;
+  /** Rendered in the right panel of the thread the user opened it in. */
+  readonly component: WebPluginComponent<{ readonly threadId: string }>;
+}
+
+export interface WebPluginCommand {
+  /**
+   * Unique within the plugin: lowercase letters, digits and hyphens. Keybindings name the command
+   * `plugin.<pluginId>.<id>`.
+   */
+  readonly id: string;
+  /** Shown in the command palette. */
+  readonly title: string;
+  /** Extra words the command palette matches. */
+  readonly keywords?: ReadonlyArray<string>;
+  readonly run: () => void | Promise<void>;
+}
+
+/**
+ * What a web plugin's `activate` receives. Everything is released when the plugin unloads. `Rpc`
+ * types the calls into the plugin's server half.
+ */
+export interface WebPluginApi<Rpc extends PluginRpcMap = PluginRpcMap> {
+  /**
+   * This API's version, 1 so far. T3 raises it when the API gains a member, whose doc then names
+   * the version that added it, so a plugin can check it before using a member an older T3 lacks.
+   * To refuse older T3 releases outright, set `engines.t3` in the manifest.
+   */
+  readonly version: number;
+  readonly id: string;
+  /** The environment whose server this plugin was loaded from. */
+  readonly environmentId: string;
+  readonly rpc: {
+    /**
+     * Calls a method the plugin's server half registered. A failure rejects with the server's
+     * reason, such as the message the handler threw.
+     */
+    readonly invoke: <Method extends Extract<keyof Rpc["methods"], string>>(
+      method: Method,
+      ...input: RpcInputArgs<Rpc["methods"][Method]["input"]>
+    ) => Promise<Rpc["methods"][Method]["output"]>;
+    /** Follows a channel the plugin's server half publishes to; returns the unsubscribe function. */
+    readonly subscribe: <Channel extends Extract<keyof Rpc["channels"], string>>(
+      channel: Channel,
+      onValue: (value: Rpc["channels"][Channel]) => void,
+    ) => () => void;
+  };
+  readonly rightPanel: {
+    readonly register: (panel: WebPluginRightPanel) => void;
+  };
+  readonly settings: {
+    /**
+     * Shows on the Plugins page in place of the generated settings form, in browsers that load
+     * plugin UI from this plugin's environment. Other browsers show the generated form, if the
+     * `settingsSchema` has fields.
+     */
+    readonly registerPanel: (component: WebPluginComponent) => void;
+  };
+  readonly commands: {
+    /**
+     * Adds a command to the command palette that users can also bind to a key. Only the first
+     * environment the app loads plugin UI from adds its plugins' commands.
+     */
+    readonly register: (command: WebPluginCommand) => void;
+  };
+  /**
+   * A URL for a file in the plugin's `assets/` folder, such as `icon.svg`, usable in `src` and
+   * `href`. It stays valid until the plugin unloads.
+   */
+  readonly assetUrl: (name: string) => Promise<string>;
+  /**
+   * Adds a stylesheet until the plugin unloads. Rules that reach T3's own elements restyle the app
+   * and can stop matching when T3 changes its markup.
+   */
+  readonly injectStyles: (css: string) => void;
+  /** Opens a path in the app, such as `/settings/plugins`. */
+  readonly navigate: (path: string) => void;
+  readonly toast: (message: {
+    readonly title: string;
+    readonly description?: string;
+    readonly type?: "info" | "success" | "warning" | "error";
+  }) => void;
+  /** Runs when the plugin is disabled, reloaded or unloaded. */
+  readonly onDeactivate: (cleanup: () => void) => void;
+}
+
+export interface WebPluginDefinition<Rpc extends PluginRpcMap = PluginRpcMap> {
+  readonly activate: (api: WebPluginApi<Rpc>) => void | Promise<void>;
+}
+
+/** Hooks T3 shares with web plugins through `@t3tools/plugin-sdk/atom-react`. */
+export const HOST_ATOM_REACT_EXPORTS = [
+  "RegistryContext",
+  "useAtomMount",
+  "useAtomRefresh",
+  "useAtomSet",
+  "useAtomSubscribe",
+  "useAtomValue",
+] as const;
+
+/** `Atom` functions T3 shares with web plugins through `@t3tools/plugin-sdk/atom`. */
+export const HOST_ATOM_EXPORTS = [
+  "family",
+  "keepAlive",
+  "make",
+  "map",
+  "readable",
+  "setIdleTTL",
+  "transform",
+  "withLabel",
+  "writable",
+] as const;
+
+/** Components T3 shares with web plugins through `@t3tools/plugin-sdk/ui`. */
+export const HOST_UI_EXPORTS = [
+  "Badge",
+  "Button",
+  "Empty",
+  "EmptyContent",
+  "EmptyDescription",
+  "EmptyHeader",
+  "EmptyMedia",
+  "EmptyTitle",
+  "Input",
+  "Label",
+  "Switch",
+  "Textarea",
+] as const;
+
+/**
+ * CSS variables T3 defines under every theme and keeps across releases. Themes set them, so a
+ * plugin's own styles that use them, such as `var(--border)`, follow the user's theme.
+ */
+export const THEME_TOKENS = [
+  "--background",
+  "--foreground",
+  "--card",
+  "--card-foreground",
+  "--popover",
+  "--popover-foreground",
+  "--primary",
+  "--primary-foreground",
+  "--secondary",
+  "--secondary-foreground",
+  "--muted",
+  "--muted-foreground",
+  "--accent",
+  "--accent-foreground",
+  "--border",
+  "--input",
+  "--ring",
+  "--destructive",
+  "--destructive-foreground",
+  "--warning",
+  "--warning-foreground",
+  "--success",
+  "--success-foreground",
+  "--info",
+  "--info-foreground",
+  "--radius",
+  "--terminal-background",
+] as const;
+
+export type ThemeToken = (typeof THEME_TOKENS)[number];
+
+/**
+ * Types a web plugin. The ESM bundle's default export is the result. Pass the plugin's
+ * `PluginRpcMap`, as in `defineWebPlugin<NotesRpc>({ ... })`, to type `api.rpc`.
+ */
+export const defineWebPlugin = <Rpc extends PluginRpcMap = PluginRpcMap>(
+  definition: WebPluginDefinition<Rpc>,
+): WebPluginDefinition<Rpc> => definition;
diff --git a/packages/plugin-sdk/tsconfig.build.json b/packages/plugin-sdk/tsconfig.build.json
new file mode 100644
index 0000000000000..b8c8731852a15
--- /dev/null
+++ b/packages/plugin-sdk/tsconfig.build.json
@@ -0,0 +1,14 @@
+// Declarations for `scripts/build.ts`, which bundles them per entry.
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "allowJs": false,
+    "checkJs": false,
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx", "**/testing/**"]
+}
diff --git a/packages/plugin-sdk/tsconfig.json b/packages/plugin-sdk/tsconfig.json
new file mode 100644
index 0000000000000..991a2c4c85698
--- /dev/null
+++ b/packages/plugin-sdk/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "jsx": "react-jsx",
+    "lib": ["ES2023", "DOM"],
+    "allowJs": true,
+    "checkJs": true
+  },
+  "include": ["src", "scripts", "fixtures", "examples/*/web.tsx", "examples/*/server.cjs"]
+}
diff --git a/packages/shared/src/themePalettes.ts b/packages/shared/src/themePalettes.ts
index 19e321c5886c3..225c3eac85bc6 100644
--- a/packages/shared/src/themePalettes.ts
+++ b/packages/shared/src/themePalettes.ts
@@ -94,6 +94,18 @@ export const THEME_COLOR_ROLES = [
 export type ThemeColorRole = (typeof THEME_COLOR_ROLES)[number];
 export type ThemeColors = Readonly<Record<ThemeColorRole, string>>;
 export type ThemeVariants = Readonly<Partial<Record<ThemeAppearance, ThemeColors>>>;
+
+/** Status colors a published theme may set in its colors; T3's own stay otherwise. */
+export const THEME_STATUS_COLOR_ROLES = [
+  "success",
+  "successForeground",
+  "info",
+  "infoForeground",
+] as const;
+export type ThemeStatusColors = Readonly<
+  Partial<Record<(typeof THEME_STATUS_COLOR_ROLES)[number], string>>
+>;
+
 export type ThemeDefinition = Readonly<{
   id: string;
   label: string;
@@ -103,6 +115,10 @@ export type ThemeDefinition = Readonly<{
   collection?: Readonly<{ id: string; label: string }>;
   sidebarArtwork?: boolean;
   managed?: boolean;
+  /** Published themes only: T3's corner radius, such as `0.625rem`. */
+  radius?: string;
+  /** Published themes only, per appearance. */
+  statusColors?: Readonly<Partial<Record<ThemeAppearance, ThemeStatusColors>>>;
 }>;
 
 export const T3_CODE_LIGHT_THEME_COLORS: ThemeColors = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb4789ac81439..c3edb096de816 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -956,6 +956,9 @@ importers:
       '@t3tools/contracts':
         specifier: workspace:*
         version: link:../../packages/contracts
+      '@t3tools/plugin-sdk':
+        specifier: workspace:*
+        version: link:../../packages/plugin-sdk
       '@t3tools/provider-testing':
         specifier: workspace:*
         version: link:../../packages/provider-testing
@@ -1070,6 +1073,9 @@ importers:
       '@t3tools/contracts':
         specifier: workspace:*
         version: link:../../packages/contracts
+      '@t3tools/plugin-sdk':
+        specifier: workspace:*
+        version: link:../../packages/plugin-sdk
       '@t3tools/provider-core':
         specifier: workspace:*
         version: link:../../packages/provider-core
@@ -1590,6 +1596,21 @@ importers:
         specifier: 1.4.0
         version: 1.4.0(@astrojs/compiler-rs@0.5.1)(@tsc-rs/typescript@0.8.0)(@types/node@24.12.4)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.28(@tsc-rs/typescript@0.8.0))(bufferutil@4.1.0)(esbuild@0.28.2)(jiti@2.7.0)(jsdom@30.1.0(@noble/hashes@1.8.0))(playwright@1.60.0)(terser@5.48.0)(unrun@0.2.39)(utf-8-validate@6.0.6)(yaml@2.9.0)
 
+  packages/plugin-sdk:
+    devDependencies:
+      '@types/node':
+        specifier: 24.12.4
+        version: 24.12.4
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.3.0
+      react:
+        specifier: 'catalog:'
+        version: 19.3.0
+      vite-plus:
+        specifier: 1.4.0
+        version: 1.4.0(@astrojs/compiler-rs@0.5.1)(@tsc-rs/typescript@0.8.0)(@types/node@24.12.4)(@vitest/browser-playwright@5.0.5)(@vitest/ui@5.0.5)(@volar/typescript@2.4.28(@tsc-rs/typescript@0.8.0))(bufferutil@4.1.0)(esbuild@0.28.2)(jiti@2.7.0)(jsdom@30.1.0(@noble/hashes@1.8.0))(playwright@1.60.0)(terser@5.48.0)(unrun@0.2.39)(utf-8-validate@6.0.6)(yaml@2.9.0)
+
   packages/provider-acp:
     dependencies:
       '@t3tools/contracts':
diff --git a/scripts/release-smoke.ts b/scripts/release-smoke.ts
index 8f300533523ae..4cf7a186d2240 100644
--- a/scripts/release-smoke.ts
+++ b/scripts/release-smoke.ts
@@ -27,6 +27,7 @@ const workspaceFiles = [
   "packages/client-runtime/package.json",
   "packages/contracts/package.json",
   "packages/shared/package.json",
+  "packages/plugin-sdk/package.json",
   "packages/ssh/package.json",
   "packages/tailscale/package.json",
   "packages/provider-core/package.json",