zidane-ui 9.0.4 → 9.1.3

package/dist/extensions/ExtensionSlot.js

@@ -0,0 +1,161 @@
+import { SegmentSpinner } from "../components/SegmentSpinner.js";
+import { CountBadge } from "../components/TabPill.js";
+import { useExtensionsLabels } from "./useExtensionsLabels.js";
+import { ExtensionComponent } from "./ExtensionComponent.js";
+import { useExtensionItems, useExtensionsHost } from "./ExtensionsProvider.js";
+import { badgeColorStyle, badgeToneClass } from "../session/ArtifactRowChips.js";
+import { qualifyPanelId, slotIsActionable, slotItems, titlebarItems } from "./headless/select.js";
+import { useOptionalWorkspaceActions } from "../workspace/WorkspaceProvider.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from "react";
+//#region src/extensions/ExtensionSlot.tsx
+/**
+* The items extensions put in one named place (`app.statusbar`,
+* `composer.above`, `session.header`…), lowest `order` first. Each item
+* draws its data: an icon (or a running arc while `loader`), its text, a
+* count, its tone or exact color, raised and breathing while `highlight`,
+* a banner's lines. An item that names a component draws it instead, with
+* the data as its fallback. A click opens the item's panel (through
+* `onOpenPanel`, by default the side panel of the `WorkspaceProvider` above,
+* when there is one) or runs its command (through the host's commands); an
+* item that does neither is not a button.
+*
+* The block places (`sidebar.top`, `sidebar.bottom`) stack their items as
+* full-width rows, one per line, the count at the row's end; the other places
+* draw compact chips side by side.
+*/
+/** The places that draw full-width rows, one per line, rather than chips. */
+const BLOCK_SLOTS = /* @__PURE__ */ new Set(["sidebar.top", "sidebar.bottom"]);
+/**
+* Draws the extension items of one slot. Draws nothing when there are none.
+*
+* @param props - The place, the session, the turn, the panel opener, `className` and `style`.
+*/
+function ExtensionSlot({ at, sessionId, turnId, onOpenPanel, className, style }) {
+	const host = useExtensionsHost();
+	const workspace = useOptionalWorkspaceActions();
+	const focusTab = useMemo(() => workspace ? (panelId) => workspace.focusTab(panelId) : void 0, [workspace]);
+	const openPanel = onOpenPanel ?? focusTab;
+	const all = useExtensionItems("slot");
+	const panels = useExtensionItems("panel");
+	const items = at === "app.titlebar" ? titlebarItems(all, sessionId) : slotItems(all, at, sessionId, turnId);
+	const run = host?.commands?.run;
+	const activate = useCallback((entry) => {
+		const { panel, command } = entry.item;
+		if (command && run) run(command, sessionId ? { sessionId } : void 0);
+		else if (panel && openPanel) openPanel(qualifyPanelId(entry.extension, panel, panels), entry);
+	}, [
+		run,
+		openPanel,
+		panels,
+		sessionId
+	]);
+	if (items.length === 0) return null;
+	const canPanel = Boolean(openPanel);
+	const canCommand = Boolean(run);
+	const block = BLOCK_SLOTS.has(at);
+	return /* @__PURE__ */ jsx("div", {
+		"data-extension-slot": at,
+		"data-turn-id": turnId,
+		className: [
+			block ? "flex flex-col items-stretch gap-0.5 min-w-0" : "flex items-center gap-1.5 min-w-0",
+			at === "composer.above" ? "flex-col items-stretch" : "",
+			className
+		].filter(Boolean).join(" "),
+		style,
+		children: items.map((entry) => /* @__PURE__ */ jsx(SlotEntry, {
+			entry,
+			sessionId,
+			block,
+			onActivate: entry.item.command && canCommand || entry.item.panel && canPanel ? activate : void 0
+		}, entry.key))
+	});
+}
+/**
+* The extensions' `app.titlebar` items: small chips, lowest `order` first, at most eight per extension.
+* The desktop app puts it in its title bar right of the window controls and the sidebar toggle, the web
+* app in its header. Each item takes clicks inside a window drag region (`zg-no-drag`), so the bar
+* around it still moves the window. Draws nothing when there are none.
+*
+* @param props - The session on screen, the panel opener, `className` and `style`.
+*/
+function ExtensionTitlebar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ExtensionSlot, {
+		at: "app.titlebar",
+		...props,
+		className: ["zg-no-drag shrink-0 max-w-[50vw] overflow-hidden", className].filter(Boolean).join(" ")
+	});
+}
+const SlotEntry = memo(function SlotEntry({ entry, sessionId, block, onActivate }) {
+	const data = /* @__PURE__ */ jsx(SlotData, {
+		item: entry.item,
+		block
+	});
+	const component = entry.item.component && /* @__PURE__ */ jsx(ExtensionComponent, {
+		extension: entry.extension,
+		component: entry.item.component,
+		props: sessionId ? { sessionId } : void 0,
+		fallback: data
+	});
+	let body = component || data;
+	if (component && block) body = /* @__PURE__ */ jsx("span", {
+		className: "flex flex-1 items-center gap-2 min-w-0",
+		children: component
+	});
+	const look = [
+		block ? "flex w-full items-center gap-2 min-w-0 rounded-zg-md px-2 py-1 text-zg-label text-left" : "inline-flex items-center gap-1 min-w-0 rounded-zg-md px-1.5 py-0.5 text-zg-label",
+		entry.item.highlight ? "zg-raised zg-attention" : "",
+		badgeToneClass(entry.item.tone)
+	].filter(Boolean).join(" ");
+	if (onActivate && slotIsActionable(entry.item)) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-extension-item": entry.key,
+		title: entry.item.title,
+		onClick: () => onActivate(entry),
+		className: `zg-press-subtle bg-transparent border-0 cursor-pointer ${look}`,
+		children: body
+	});
+	return block ? /* @__PURE__ */ jsx("div", {
+		"data-extension-item": entry.key,
+		title: entry.item.title,
+		className: look,
+		children: body
+	}) : /* @__PURE__ */ jsx("span", {
+		"data-extension-item": entry.key,
+		title: entry.item.title,
+		className: look,
+		children: body
+	});
+});
+/** An item's data: icon or arc, text, count, banner lines. A block row puts the count at its end. */
+function SlotData({ item, block }) {
+	const labels = useExtensionsLabels();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		item.loader ? /* @__PURE__ */ jsx(SegmentSpinner, {
+			size: "xs",
+			label: labels.extensionWorking
+		}) : item.icon?.gui && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: `${item.icon.gui} shrink-0`,
+			style: badgeColorStyle(item.color)
+		}),
+		item.text && /* @__PURE__ */ jsx("span", {
+			className: block ? "truncate flex-1 min-w-0" : "truncate",
+			children: item.text
+		}),
+		item.count !== void 0 && /* @__PURE__ */ jsx(CountBadge, {
+			text: item.count,
+			tone: "neutral",
+			...block ? { className: "ml-auto shrink-0" } : {}
+		}),
+		item.lines && item.lines.length > 0 && /* @__PURE__ */ jsx("span", {
+			className: "flex flex-col min-w-0",
+			children: item.lines.map((line, i) => /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: line
+			}, i))
+		})
+	] });
+}
+//#endregion
+export { ExtensionSlot, ExtensionTitlebar };

package/dist/extensions/ExtensionWebview.d.ts

@@ -0,0 +1,32 @@
+import { WebviewWire } from "./headless/wire.js";
+import { CSSProperties } from "react";
+//#region src/extensions/ExtensionWebview.d.ts
+/** Props for {@link ExtensionWebview}. */
+interface ExtensionWebviewProps {
+  /** The webview's full id (`<extension>/<id>`). */
+  id: string;
+  /**
+   * The URL the iframe loads, or `null` to show nothing. Default: the host's (`ExtensionsHost.webviews`),
+   * else a `url` source as given and a `file` source not shown (the app must serve it).
+   */
+  resolveSrc?(webview: WebviewWire, extension: string): string | null;
+  /**
+   * The origin the page's messages must come from, and the target of replies. Default: the host's, else
+   * `'*'`: an opaque-origin sandbox, checked by the sending window alone.
+   */
+  origin?: string;
+  /** The iframe's sandbox flags. Default: the host's, else `'allow-scripts allow-forms'` (no same-origin access). */
+  sandbox?: string;
+  /** Extra classes on the iframe. */
+  className?: string;
+  /** Inline styles on the iframe. */
+  style?: CSSProperties;
+}
+/**
+ * Draws one extension webview with its RPC bridge. Draws nothing when no extension offers `id` or its URL resolves to `null`.
+ *
+ * @param props - The webview id, the app's origin policy, `className` and `style`.
+ */
+declare function ExtensionWebview({ id, resolveSrc, origin, sandbox, className, style }: ExtensionWebviewProps): import("react").JSX.Element | null;
+//#endregion
+export { ExtensionWebview, ExtensionWebviewProps };

package/dist/extensions/ExtensionWebview.js

@@ -0,0 +1,80 @@
+import { useExtensionItems, useExtensionsHost } from "./ExtensionsProvider.js";
+import { createWebviewRpcBridge } from "./headless/webview-bridge.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+//#region src/extensions/ExtensionWebview.tsx
+/**
+* An extension's webview (`ctx.add(Webview, …)`): its page in a sandboxed
+* iframe, talking to the extension only through the RPC bridge
+* (`createWebviewRpcBridge`), and only to the contracts the webview lists.
+* The app owns the origin policy: where a page's URL comes from
+* (`resolveSrc`: a `file` source becomes a URL the app serves), which
+* origin its messages must come from and replies go to (`origin`), and the
+* sandbox flags. It gives them once on the host (`ExtensionsHost.webviews`),
+* so every webview the kit draws (a side panel tab, a screen) follows them;
+* the props override them. Messages from any other window are ignored.
+*
+* The page calls with
+* `parent.postMessage({ type: 'zidane:rpc', id, contract, method, input }, '*')`
+* and hears `{ type: 'zidane:rpc:result', id, ok, output | error }`.
+*/
+const defaultSrc = (webview) => "url" in webview.src ? webview.src.url : null;
+const noSubscribe = () => () => void 0;
+/**
+* Draws one extension webview with its RPC bridge. Draws nothing when no extension offers `id` or its URL resolves to `null`.
+*
+* @param props - The webview id, the app's origin policy, `className` and `style`.
+*/
+function ExtensionWebview({ id, resolveSrc, origin, sandbox, className, style }) {
+	const host = useExtensionsHost();
+	const policy = host?.webviews;
+	const resolve = resolveSrc ?? (policy ? policy.resolveSrc.bind(policy) : defaultSrc);
+	origin ??= policy?.origin ?? "*";
+	sandbox ??= policy?.sandbox ?? "allow-scripts allow-forms";
+	const entry = useExtensionItems("webview").find((e) => e.item.id === id);
+	const frame = useRef(null);
+	const read = () => entry ? resolve(entry.item, entry.extension) : null;
+	const subscribe = useMemo(() => policy?.subscribe ? (listener) => policy.subscribe(listener) : noSubscribe, [policy]);
+	const src = useSyncExternalStore(subscribe, read, read);
+	const rpc = host?.rpc;
+	const contracts = entry?.item.rpc;
+	const extension = entry?.extension;
+	useEffect(() => {
+		const iframe = frame.current;
+		if (!iframe || !extension) return void 0;
+		const bridge = createWebviewRpcBridge({
+			extensionId: extension,
+			contracts: contracts ?? [],
+			...rpc ? { rpc } : {},
+			post: (message) => iframe.contentWindow?.postMessage(message, origin)
+		});
+		const onMessage = (event) => {
+			if (event.source !== iframe.contentWindow) return;
+			if (origin !== "*" && event.origin !== origin) return;
+			bridge.handle(event.data);
+		};
+		window.addEventListener("message", onMessage);
+		return () => {
+			window.removeEventListener("message", onMessage);
+			bridge.dispose();
+		};
+	}, [
+		extension,
+		contracts,
+		rpc,
+		origin,
+		src
+	]);
+	if (!entry || !src) return null;
+	return /* @__PURE__ */ jsx("iframe", {
+		ref: frame,
+		title: entry.item.title,
+		src,
+		sandbox,
+		"data-extension-webview": id,
+		className: ["block w-full h-full border-0", className].filter(Boolean).join(" "),
+		style
+	});
+}
+//#endregion
+export { ExtensionWebview };

package/dist/extensions/ExtensionsProvider.d.ts

@@ -0,0 +1,42 @@
+import { ExtensionItem, ExtensionTokenName } from "./headless/wire.js";
+import { ExtensionsHost } from "./headless/host.js";
+import { ExtensionModuleLoader } from "./ExtensionComponent.js";
+import { ExtensionEffectRouter } from "./headless/effect-router.js";
+import { ExtensionsLabels } from "./headless/labels.js";
+import { ReactNode } from "react";
+//#region src/extensions/ExtensionsProvider.d.ts
+/** Props for {@link ExtensionsProvider}. */
+interface ExtensionsProviderProps {
+  /** What the extensions contribute, and the way back to them. */
+  host: ExtensionsHost;
+  /** Loads an extension's `ui.tsx` module (its exports are the components items name). Absent: items draw their data. */
+  loadModule?: ExtensionModuleLoader;
+  /** Overrides for the built-in strings. Keys you leave out keep the default English label. */
+  labels?: Partial<ExtensionsLabels>;
+  /** The app. */
+  children: ReactNode;
+}
+/**
+ * Provides an {@link ExtensionsHost}, the `ui.tsx` loader and optional label overrides to the extension components below it.
+ *
+ * @param props - Provider props: the `host`, an optional `loadModule` and `labels`, and the `children`.
+ */
+declare function ExtensionsProvider({ host, loadModule, labels, children }: ExtensionsProviderProps): import("react").JSX.Element;
+/** The effect router of the nearest {@link ExtensionsProvider}, or `null` (no provider, or a host without `effects`). */
+declare function useExtensionEffectRouter(): ExtensionEffectRouter | null;
+/** The {@link ExtensionsHost} from the nearest {@link ExtensionsProvider}, or `null` outside one. */
+declare function useExtensionsHost(): ExtensionsHost | null;
+/**
+ * The items of one token, re-rendering when they change. Empty outside an {@link ExtensionsProvider}.
+ *
+ * @param token - The token.
+ */
+declare function useExtensionItems<N extends ExtensionTokenName>(token: N): readonly ExtensionItem<N>[];
+/**
+ * Returns `wrap(node)`, which puts this tree's extensions host, `ui.tsx` loader and labels around a
+ * node rendered elsewhere: the app's modal layer sits above the providers, so a dialog or screen
+ * opened on it carries them in.
+ */
+declare function useCarryExtensionsContext(): (node: ReactNode) => ReactNode;
+//#endregion
+export { ExtensionsProvider, ExtensionsProviderProps, useCarryExtensionsContext, useExtensionEffectRouter, useExtensionItems, useExtensionsHost };

package/dist/extensions/ExtensionsProvider.js

@@ -0,0 +1,104 @@
+import { LabelsProvider, useLabels } from "../labels.js";
+import { constant, useReadable } from "../chat/headless/store.js";
+import { pressChord } from "../keybindings/press.js";
+import { createEffectRouter } from "./headless/effect-router.js";
+import { ExtensionComponentsProvider, useExtensionModuleLoader } from "./ExtensionComponent.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo } from "react";
+//#region src/extensions/ExtensionsProvider.tsx
+/**
+* Puts an `ExtensionsHost` in context, with the loader of the extensions'
+* `ui.tsx` bundles and optional label overrides:
+*
+*   <ExtensionsProvider host={host} loadModule={(id) => import(\`/ext/\${id}/ui.js\`)}>
+*     <ExtensionSlot at="app.statusbar" />
+*     <ExtensionDialogHost />
+*   </ExtensionsProvider>
+*
+* Components below read the host's stores through `useExtensionItems`.
+* Without a provider they draw nothing (no host: no extension UI).
+*/
+const HostContext = createContext(null);
+/** The kit's keymap route: above an app's default 0, like the kit's other routes (`KIT_EFFECT_PRIORITY`). */
+const KEYMAP_EFFECT_PRIORITY = 10;
+const RouterContext = createContext(null);
+/**
+* Provides an {@link ExtensionsHost}, the `ui.tsx` loader and optional label overrides to the extension components below it.
+*
+* @param props - Provider props: the `host`, an optional `loadModule` and `labels`, and the `children`.
+*/
+function ExtensionsProvider({ host, loadModule, labels, children }) {
+	const body = /* @__PURE__ */ jsx(LabelsProvider, {
+		labels,
+		children
+	});
+	const effects = host.effects;
+	const router = useMemo(() => effects ? createEffectRouter(effects) : null, [effects]);
+	useEffect(() => router?.register({
+		accepts: (effect) => effect.kind === "keymap",
+		apply: (effect) => effect.kind === "keymap" && pressChord(effect.chord),
+		priority: KEYMAP_EFFECT_PRIORITY
+	}), [router]);
+	return /* @__PURE__ */ jsx(HostContext.Provider, {
+		value: host,
+		children: /* @__PURE__ */ jsx(RouterContext.Provider, {
+			value: router,
+			children: loadModule ? /* @__PURE__ */ jsx(ExtensionComponentsProvider, {
+				loadModule,
+				children: body
+			}) : body
+		})
+	});
+}
+/** The effect router of the nearest {@link ExtensionsProvider}, or `null` (no provider, or a host without `effects`). */
+function useExtensionEffectRouter() {
+	return useContext(RouterContext);
+}
+/** The {@link ExtensionsHost} from the nearest {@link ExtensionsProvider}, or `null` outside one. */
+function useExtensionsHost() {
+	return useContext(HostContext);
+}
+const NONE = constant([]);
+/**
+* The items of one token, re-rendering when they change. Empty outside an {@link ExtensionsProvider}.
+*
+* @param token - The token.
+*/
+function useExtensionItems(token) {
+	const host = useExtensionsHost();
+	return useReadable(host?.items[token] ?? NONE);
+}
+/**
+* Returns `wrap(node)`, which puts this tree's extensions host, `ui.tsx` loader and labels around a
+* node rendered elsewhere: the app's modal layer sits above the providers, so a dialog or screen
+* opened on it carries them in.
+*/
+function useCarryExtensionsContext() {
+	const host = useExtensionsHost();
+	const router = useExtensionEffectRouter();
+	const loader = useExtensionModuleLoader();
+	const labels = useLabels();
+	return useCallback((node) => {
+		const loaded = loader ? /* @__PURE__ */ jsx(ExtensionComponentsProvider, {
+			loadModule: loader,
+			children: node
+		}) : node;
+		return /* @__PURE__ */ jsx(LabelsProvider, {
+			labels,
+			children: /* @__PURE__ */ jsx(HostContext.Provider, {
+				value: host,
+				children: /* @__PURE__ */ jsx(RouterContext.Provider, {
+					value: router,
+					children: loaded
+				})
+			})
+		});
+	}, [
+		host,
+		router,
+		loader,
+		labels
+	]);
+}
+//#endregion
+export { ExtensionsProvider, useCarryExtensionsContext, useExtensionEffectRouter, useExtensionItems, useExtensionsHost };

package/dist/extensions/SettingsWireForm.d.ts

@@ -0,0 +1,44 @@
+import { WireSettings } from "./headless/wire.js";
+import { ExtensionAccessScope } from "./headless/host.js";
+import { SettingValue } from "./headless/select.js";
+import { CSSProperties } from "react";
+//#region src/extensions/SettingsWireForm.d.ts
+/** An action row's outcome, as the parent reports it. */
+interface SettingsWireActionState {
+  /** `busy` disables the row's button; `error` draws `text` as a failure. */
+  state: 'busy' | 'done' | 'error';
+  /** Status line under the row. Absent: none. */
+  text?: string;
+}
+/** Props for {@link SettingsWireForm}. */
+interface SettingsWireFormProps {
+  /** The rows. */
+  settings: WireSettings;
+  /** The values shown, by extension then key (`settingsValues` gives the starting ones). */
+  values: Readonly<Record<string, Readonly<Record<string, SettingValue>>>>;
+  /** A row changed (a switch flipped, an input committed). Locked rows never call it. */
+  onChange(extension: string, key: string, value: SettingValue): void;
+  /** Runs an action row. Absent: no action rows. */
+  onRunAction?(extension: string, key: string): void;
+  /** Action rows' outcomes, by `extension:key`. */
+  actionStates?: Readonly<Record<string, SettingsWireActionState>>;
+  /** A message per row (a refused write), by `extension:key`. */
+  errors?: Readonly<Record<string, string>>;
+  /**
+   * The scope this client's token grants (`ExtensionsHost.scope`): an action needing more shows its
+   * button disabled, with why. `null` or absent: never limited (a local or in-process host).
+   */
+  scope?: ExtensionAccessScope | null;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Draws settings rows over the settings wire.
+ *
+ * @param props - The rows, their values, the change and action handlers, `className` and `style`.
+ */
+declare function SettingsWireForm({ settings, values, onChange, onRunAction, actionStates, errors, scope, className, style }: SettingsWireFormProps): import("react").JSX.Element;
+//#endregion
+export { SettingsWireActionState, SettingsWireForm, SettingsWireFormProps };

package/dist/extensions/SettingsWireForm.js

@@ -0,0 +1,104 @@
+import { FormSection, MetaChip } from "../components/Form.js";
+import { useExtensionsLabels } from "./useExtensionsLabels.js";
+import { isSettingLocked, missingScope } from "./headless/select.js";
+import { SettingFocus } from "../settings/section.js";
+import { ExtensionActionRow, ExtensionConfigRow } from "../settings/sections/extensions/ExtensionConfigRows.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/extensions/SettingsWireForm.tsx
+function categories(settings) {
+	const labels = new Map(settings.schema.categories.map((c) => [c.id, c.label]));
+	const out = /* @__PURE__ */ new Map();
+	const ensure = (id, extension, label) => {
+		let cat = out.get(id);
+		if (!cat) {
+			cat = {
+				id,
+				label: id === extension ? void 0 : label ?? labels.get(id) ?? id,
+				items: [],
+				actions: []
+			};
+			out.set(id, cat);
+		}
+		return cat;
+	};
+	for (const item of settings.schema.items) ensure(item.category, item.extension).items.push(item);
+	for (const action of settings.actions) ensure(action.category, action.extension, action.categoryLabel).actions.push(action);
+	return [...out.values()];
+}
+/**
+* Draws settings rows over the settings wire.
+*
+* @param props - The rows, their values, the change and action handlers, `className` and `style`.
+*/
+function SettingsWireForm({ settings, values, onChange, onRunAction, actionStates, errors, scope, className, style }) {
+	const labels = useExtensionsLabels();
+	const cats = categories(settings);
+	if (cats.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: `m-0 px-1 text-xs text-[var(--zg-text-muted)]${className ? ` ${className}` : ""}`,
+		style,
+		children: labels.extensionSettingsNone
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: ["space-y-5", className].filter(Boolean).join(" "),
+		style,
+		children: cats.map((cat) => /* @__PURE__ */ jsxs(FormSection, {
+			title: cat.label,
+			children: [cat.items.map((item) => {
+				const id = `${item.extension}:${item.key}`;
+				const value = values[item.extension]?.[item.key] ?? item.default;
+				return /* @__PURE__ */ jsxs(SettingFocus, {
+					id,
+					children: [/* @__PURE__ */ jsx(SettingRow, {
+						item,
+						value,
+						locked: isSettingLocked(settings, item.extension, item.key),
+						onChange
+					}), errors?.[id] && /* @__PURE__ */ jsx("div", {
+						className: "px-3 pb-1.5 text-xs text-zg-danger",
+						children: errors[id]
+					})]
+				}, id);
+			}), onRunAction && cat.actions.map((action) => {
+				const id = `${action.extension}:${action.key}`;
+				const run = actionStates?.[id];
+				return /* @__PURE__ */ jsx(SettingFocus, {
+					id,
+					children: /* @__PURE__ */ jsx(ExtensionActionRow, {
+						label: action.label,
+						...action.description ? { description: action.description } : {},
+						...run?.text ? { status: {
+							text: run.text,
+							error: run.state === "error"
+						} } : {},
+						busy: run?.state === "busy",
+						needsScope: missingScope(scope, action.scope),
+						onRun: () => onRunAction(action.extension, action.key)
+					})
+				}, id);
+			})]
+		}, cat.id))
+	});
+}
+function SettingRow({ item, value, locked, onChange }) {
+	const labels = useExtensionsLabels();
+	const lock = locked ? /* @__PURE__ */ jsxs(MetaChip, {
+		title: labels.extensionSettingLocked,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "i-ph-lock-simple"
+		}), labels.extensionSettingLocked]
+	}) : null;
+	return /* @__PURE__ */ jsx(ExtensionConfigRow, {
+		item,
+		value,
+		locked,
+		lock,
+		switchRole: true,
+		maskSecrets: true,
+		onWrite: (next) => {
+			if (next !== value) onChange(item.extension, item.key, next);
+		}
+	});
+}
+//#endregion
+export { SettingsWireForm };

package/dist/extensions/headless/dialog-queue.d.ts

@@ -0,0 +1,27 @@
+import { DialogRequestWire } from "./wire.js";
+import { ExtensionDialogs } from "./host.js";
+//#region src/extensions/headless/dialog-queue.d.ts
+/** Where a request comes from. */
+interface DialogQueueShowContext {
+  /** The extension that asked. */
+  extensionId: string;
+  /** The session the dialog belongs to, when it has one. */
+  sessionId?: string;
+  /** Aborts when the backend withdraws the dialog (timeout, abort, the extension unloaded). */
+  signal?: AbortSignal;
+  /** The dialog's id; default: a fresh one. */
+  id?: string;
+}
+/** A dialog queue: the stores the UI reads, and the entry the backend calls. */
+interface DialogQueue {
+  /** `ExtensionsHost.dialogs`. */
+  dialogs: ExtensionDialogs;
+  /** Queues a dialog; resolves with the answer (`undefined` for a cancel), rejects with the signal's reason. */
+  show(request: DialogRequestWire, ctx: DialogQueueShowContext): Promise<unknown>;
+  /** Drops every pending dialog unanswered (the client goes away). */
+  clear(): void;
+}
+/** Creates an empty {@link DialogQueue}. */
+declare function createDialogQueue(): DialogQueue;
+//#endregion
+export { DialogQueue, DialogQueueShowContext, createDialogQueue };

package/dist/extensions/headless/dialog-queue.js

@@ -0,0 +1,68 @@
+import { writable } from "../../chat/headless/store.js";
+//#region src/extensions/headless/dialog-queue.ts
+/**
+* The client half of `ctx.ui` dialogs, for hosts to build `ExtensionsHost.dialogs` on: the
+* backend's request lands in `show` (zidane's `DialogPort.show` on this client), waits in the
+* queue, and resolves with what the user answers. An aborted request leaves the queue unanswered.
+*/
+/** Creates an empty {@link DialogQueue}. */
+function createDialogQueue() {
+	let seq = 0;
+	const pending = [];
+	const current = writable(null);
+	const toasts = writable([]);
+	const publish = () => {
+		current.set(pending.find((p) => p.dialog.request.kind !== "toast")?.dialog ?? null);
+		const next = pending.filter((p) => p.dialog.request.kind === "toast").map((p) => p.dialog);
+		const prev = toasts.get();
+		if (next.length !== prev.length || next.some((d, i) => d !== prev[i])) toasts.set(next);
+	};
+	const take = (id) => {
+		const index = pending.findIndex((p) => p.dialog.id === id);
+		if (index < 0) return void 0;
+		const [p] = pending.splice(index, 1);
+		p.done();
+		publish();
+		return p;
+	};
+	return {
+		dialogs: {
+			current,
+			toasts,
+			answer: async (id, answer) => {
+				take(id)?.resolve(answer);
+			}
+		},
+		show(request, ctx) {
+			if (ctx.signal?.aborted) return Promise.reject(ctx.signal.reason);
+			const id = ctx.id ?? `dialog-${++seq}`;
+			const dialog = {
+				id,
+				extensionId: ctx.extensionId,
+				...ctx.sessionId ? { sessionId: ctx.sessionId } : {},
+				request
+			};
+			return new Promise((resolve, reject) => {
+				const onAbort = () => {
+					if (take(id)) reject(ctx.signal.reason);
+				};
+				ctx.signal?.addEventListener("abort", onAbort, { once: true });
+				pending.push({
+					dialog,
+					resolve,
+					done: () => ctx.signal?.removeEventListener("abort", onAbort)
+				});
+				publish();
+			});
+		},
+		clear() {
+			for (const p of pending.splice(0)) {
+				p.done();
+				p.resolve(void 0);
+			}
+			publish();
+		}
+	};
+}
+//#endregion
+export { createDialogQueue };