zidane-ui 9.0.4 → 9.1.3

package/dist/adapters/server-host.js

@@ -5,6 +5,8 @@ import { createServerTranscriptMembers } from "./server-transcript-members.js";
 //#region src/adapters/server-host.ts
 /** Transcript turns per page. */
 const PAGE_TURNS = 200;
+/** What the server calls a session that has no title yet (core's `DEFAULT_SESSION_TITLE`). */
+const UNTITLED = "New session";
 /**
 * Converts a zidane server's session row into a {@link ChatSession}. The project root becomes the group, the main session is pinned, and the model id gets its provider prefix.
 *
@@ -13,7 +15,7 @@ const PAGE_TURNS = 200;
 function toChatSession(row) {
 	return {
 		id: row.id,
-		title: row.title || "New session",
+		title: row.title || UNTITLED,
 		status: row.status,
 		createdAt: row.createdAt,
 		updatedAt: row.updatedAt,
@@ -38,7 +40,9 @@ function toSidebarListSession(row) {
 		...row.projectRoot ? { projectRoot: row.projectRoot } : {},
 		...row.spaceId ? { spaceId: row.spaceId } : {},
 		...row.isMain ? { isMain: true } : {},
-		...row.favorite ? { favorite: true } : {}
+		...row.favorite ? { favorite: true } : {},
+		...row.agentId ? { agentId: row.agentId } : {},
+		...row.facets && Object.keys(row.facets).length > 0 ? { facets: row.facets } : {}
 	};
 }
 /**
@@ -86,9 +90,11 @@ function createServerHost(options) {
 			watched.add(sessionId);
 			if (client.hello()) hydrate(sessionId).catch(onError);
 		},
-		onClose: (sessionId) => watched.delete(sessionId)
+		onClose: (sessionId) => watched.delete(sessionId),
+		evict: true
 	});
 	const changed = /* @__PURE__ */ new Set();
+	const facetListeners = /* @__PURE__ */ new Set();
 	const onSignal = (signal, meta) => {
 		const sessionId = "sessionId" in signal && typeof signal.sessionId === "string" ? signal.sessionId : void 0;
 		if (sessionId && meta) seqs.set(sessionId, meta.seq);
@@ -104,10 +110,10 @@ function createServerHost(options) {
 				state.apply(signal.sessionId, signal.event, signal.echo);
 				return;
 			case "run:start":
-				state.setRunning(signal.sessionId, true);
-				return;
 			case "run:end":
-				state.setRunning(signal.sessionId, false, signal.ok ? "completed" : "error");
+				if (signal.kind === "run:start") state.setRunning(signal.sessionId, true);
+				else state.setRunning(signal.sessionId, false, signal.ok ? "completed" : "error");
+				if (state.sessions.get().some((s) => s.id === signal.sessionId && s.title === UNTITLED)) refreshTitles().catch(onError);
 				return;
 			case "interaction:request":
 				state.addInteraction(signal.sessionId, signal.request);
@@ -115,6 +121,9 @@ function createServerHost(options) {
 			case "interaction:resolved":
 				state.resolveInteraction(signal.requestId);
 				return;
+			case "sessions:facets":
+				for (const listener of [...facetListeners]) listener(signal.sessionId, signal.facets);
+				return;
 			case "sessions:changed":
 				for (const listener of [...changed]) listener(signal.sessionId);
 				refresh().catch(onError);
@@ -194,6 +203,15 @@ function createServerHost(options) {
 		const rows = await client.call("sessions.list", { archive: "all" });
 		state.sessions.set(rows.map(toChatSession));
 	};
+	/** Takes the listed titles only: a run's status, set from its signals, stays. */
+	const refreshTitles = async () => {
+		const rows = await client.call("sessions.list", { archive: "all" });
+		const titles = new Map(rows.map((r) => [r.id, r.title || UNTITLED]));
+		state.sessions.set((all) => all.some((s) => titles.has(s.id) && titles.get(s.id) !== s.title) ? all.map((s) => titles.has(s.id) && titles.get(s.id) !== s.title ? {
+			...s,
+			title: titles.get(s.id)
+		} : s) : all);
+	};
 	const loadModels = async () => {
 		if (!client.can("models.list")) return;
 		const { providers } = await client.call("models.list", options.cwd ? { cwd: options.cwd } : {});
@@ -325,6 +343,10 @@ function createServerHost(options) {
 				changed.add(listener);
 				return () => changed.delete(listener);
 			},
+			onFacets(listener) {
+				facetListeners.add(listener);
+				return () => facetListeners.delete(listener);
+			},
 			...may("orchestration.main") ? { main: () => client.call("orchestration.main", {}) } : {},
 			...may("sidebar.getViews") ? { views: {
 				getViews: () => client.call("sidebar.getViews", {}),

package/dist/adapters/server-machines-host.js

@@ -1,5 +1,5 @@
-import { closableClient } from "./closable-client.js";
 import { machinesError } from "../machines/headless/host.js";
+import { closableClient } from "./closable-client.js";
 import { createPresenceStore } from "../machines/headless/presence.js";
 import { createMachineLists, createOnlineMachines, lazyReadable } from "../machines/headless/stores.js";
 import { createHostSyncReads } from "../machines/headless/sync.js";

package/dist/adapters/server-settings-host.js

@@ -1,6 +1,6 @@
 import { writable } from "../chat/headless/store.js";
-import { closableClient } from "./closable-client.js";
 import { DEFAULT_SETTINGS } from "../settings/headless/catalog.js";
+import { closableClient } from "./closable-client.js";
 import { serverSettingsSections } from "./server-settings-sections.js";
 import { serverSettingsAccounts } from "./server-settings-accounts.js";
 import { serverSettingsModels } from "./server-settings-models.js";

package/dist/adapters/server-settings-sections.js

@@ -1,5 +1,5 @@
 import { createSettingsResource, keyedSettingsResources } from "../settings/headless/resource.js";
-import { IpcErrorCode, ServerCallError, ServerConnectionError } from "zidane/ipc/browser";
+import { IpcErrorCode, ServerCallError, ServerConnectionError, extensionInstallErrorData } from "zidane/ipc/browser";
 //#region src/adapters/server-settings-sections.ts
 /**
 * The catalog and diagnostics groups of the zidane-server `SettingsHost`
@@ -10,10 +10,14 @@ import { IpcErrorCode, ServerCallError, ServerConnectionError } from "zidane/ipc
 * - `hostCatalog`: `catalog.skills|mcps|extensions|plugins`, kept current by
 *   `catalog:changed`; installs (`catalog.install|remove|update`, admin)
 *   when the server takes them (`remoteInstalls` on its hello) and the
-*   token reaches them. Its MCP servers are the accounts' `mcp` group.
+*   token reaches them; the extensions' source browser (`extensions.browse`)
+*   and a change of origin (`extensions.changeOrigin`, admin, when the
+*   server takes installs). Its MCP servers are the accounts' `mcp` group.
 *
-* - `extensions`: the server's extensions (`catalog.extensions`), the
-*   options and action rows their folder declares
+* - `extensions`: the server's extensions (`catalog.extensions`), a source's
+*   extensions (`extensions.browse`), a user-scope extension installed
+*   again from another source (`extensions.changeOrigin`, admin, when the
+*   server takes installs), the options and action rows their folder declares
 *   (`extensions.configSchema` / `actions`, refetched on `catalog:changed`),
 *   the actions' probes (`extensions.actionStatuses`), a run
 *   (`extensions.runAction`, admin) and a scaffold (`extensions.create`,
@@ -26,17 +30,19 @@ import { IpcErrorCode, ServerCallError, ServerConnectionError } from "zidane/ipc
 *
 * Left out, as the protocol has no method for them: the local-disk
 * `skills` / `plugins` groups and the extensions' installs and removals by
-* folder (SKILL.md reads and writes, project-scope installs, the source
-* browser; a web app installs into the server's catalogs through
-* `hostCatalog`), `paths` and opening an instruction file in an editor.
+* folder (SKILL.md reads and writes, project-scope installs; a web app
+* installs into the server's catalogs through `hostCatalog`), `paths` and
+* opening an instruction file in an editor.
 */
 const errorOf = (error) => {
 	const detail = error instanceof Error ? error.message : void 0;
 	const kind = error instanceof ServerConnectionError ? "unreachable" : error instanceof ServerCallError && error.code === IpcErrorCode.Forbidden ? "refused" : "failed";
-	return detail ? {
+	const found = error instanceof ServerCallError ? extensionInstallErrorData(error.data)?.candidates : void 0;
+	return {
 		kind,
-		detail
-	} : { kind };
+		...detail ? { detail } : {},
+		...found ? { found } : {}
+	};
 };
 /** The client's call, rejecting with a {@link SettingsError}. */
 function settingsCaller(client) {
@@ -74,11 +80,21 @@ function serverSettingsSections(client) {
 			return resource;
 		});
 	};
+	const browse = (input) => call("extensions.browse", { source: input });
 	const extensions = {
 		list: async (cwd) => (await call("catalog.extensions", cwd ? { cwd } : {})).extensions,
 		configSchema: extensionsResource((cwd) => call("extensions.configSchema", { cwd })),
 		actions: extensionsResource((cwd) => call("extensions.actions", { cwd })),
 		actionStatuses: (cwd) => call("extensions.actionStatuses", { cwd }),
+		...client.can("extensions.browse") ? { browse } : {},
+		...installs() && client.can("extensions.changeOrigin") ? { changeOrigin: async (_cwd, extension, source) => {
+			if (extension.source !== "user") throw { kind: "refused" };
+			return (await call("extensions.changeOrigin", {
+				name: extension.name,
+				scope: "user",
+				source
+			})).message;
+		} } : {},
 		...client.can("extensions.runAction") ? { runAction: (cwd, extension, key) => call("extensions.runAction", {
 			cwd,
 			extension,
@@ -132,16 +148,23 @@ function serverSettingsSections(client) {
 				return "skills" in answer ? answer.skills : "servers" in answer ? answer.servers : "extensions" in answer ? answer.extensions : answer.plugins;
 			},
 			onChanged: (listener) => client.onSignal((signal) => {
-				if (signal.kind === "catalog:changed") listener(signal.catalog);
+				if (signal.kind === "catalog:changed" && signal.catalog !== "models") listener(signal.catalog);
 			}),
 			installs: async () => client.hello()?.remoteInstalls === true && client.can("catalog.install"),
-			install: async (kind, spec) => {
+			install: async (kind, spec, options) => {
 				await call("catalog.install", {
 					kind,
 					spec,
-					scope: "user"
+					scope: "user",
+					...options?.extension ? { extension: options.extension } : {}
 				});
 			},
+			...client.can("extensions.browse") ? { browse } : {},
+			...installs() && client.can("extensions.changeOrigin") ? { changeOrigin: async (name, source) => (await call("extensions.changeOrigin", {
+				name,
+				scope: "user",
+				source
+			})).message } : {},
 			remove: async (kind, name) => {
 				await call("catalog.remove", {
 					kind,

package/dist/adapters/server-transcript-members.d.ts

@@ -2,7 +2,7 @@ import { ChatHost } from "../chat/headless/host.js";
 import { ServerClient } from "zidane/ipc/browser";
 //#region src/adapters/server-transcript-members.d.ts
 /** The members `createServerHost` adds for the transcript's extras. */
-type ServerTranscriptMembers = Pick<ChatHost, 'searchSync' | 'paths' | 'chips' | 'references' | 'badges'>;
+type ServerTranscriptMembers = Pick<ChatHost, 'searchSync' | 'paths' | 'chips' | 'references' | 'badges' | 'blockRuns'>;
 /**
  * Builds the transcript extras over a server connection.
  *

package/dist/adapters/server-transcript-members.js

@@ -1,4 +1,6 @@
+import { createChatBlockRuns } from "../chat/headless/block-runs.js";
 import { fmtTokens } from "zidane/chat/pure";
+import { runBlockOnHost } from "zidane/ipc/browser";
 //#region src/adapters/server-transcript-members.ts
 /**
 * The transcript extras of a zidane-server `ChatHost`: the shared search
@@ -8,7 +10,9 @@ import { fmtTokens } from "zidane/chat/pure";
 * through `git.commit`, a session's context gauge through
 * `sessions.contextBreakdown`), the extensions' text references
 * (`references.providers` / `resolve`, stale on `catalog:changed`) and badge
-* menu items (`badges.actions` / `run`). A read is left out once the
+* menu items (`badges.actions` / `run`), and Run here on a reply's shell
+* blocks (`sessions.runBlock`, its saved runs through `sessions.blockRuns`,
+* fresh on `block-runs:changed`). A read is left out once the
 * handshake says the connection may not call it; a failed read is unknown.
 *
 * No site icons: the page's Content-Security-Policy (`img-src 'self' data:
@@ -23,6 +27,20 @@ import { fmtTokens } from "zidane/chat/pure";
 function createServerTranscriptMembers(client) {
 	const may = (method) => client.hello() === null || client.can(method);
 	return {
+		...may("sessions.runBlock") ? { blockRuns: createChatBlockRuns({
+			list: async (sessionId) => (await client.call("sessions.blockRuns", { sessionId })).runs,
+			run: (sessionId, request, options) => runBlockOnHost(client, sessionId, request, {
+				...options?.onOutput ? { onOutput: options.onOutput } : {},
+				...options?.signal ? { signal: options.signal } : {}
+			}),
+			remove: (sessionId, key) => client.call("sessions.removeBlockRun", {
+				sessionId,
+				key
+			}),
+			onChanged: (listener) => client.onSignal((signal) => {
+				if (signal.kind === "block-runs:changed") listener(signal.sessionId);
+			})
+		}) } : {},
 		...may("references.resolve") ? { references: {
 			providers: (cwd, options) => client.call("references.providers", {
 				cwd,

package/dist/app/AppHostProvider.d.ts

@@ -1,4 +1,5 @@
 import { ChatLabels } from "../chat/headless/labels.js";
+import { ExtensionModuleLoader } from "../extensions/ExtensionComponent.js";
 import { AppHost } from "./headless/app-host.js";
 import { ReactNode } from "react";
 //#region src/app/AppHostProvider.d.ts
@@ -8,6 +9,8 @@ interface AppHostProviderProps {
   host: AppHost;
   /** Overrides for the chat components' strings, passed to `ChatProvider`. Keys you leave out keep the default English label. */
   chatLabels?: Partial<ChatLabels>;
+  /** Loads an extension's `ui.tsx` module for the extension components (`ExtensionsProvider`'s `loadModule`). Absent: extension items draw their data. */
+  loadExtensionModule?: ExtensionModuleLoader;
   /** The app's components. */
   children: ReactNode;
 }
@@ -16,7 +19,7 @@ interface AppHostProviderProps {
  *
  * @param props - Provider props: the `host`, optional `chatLabels`, and the `children` to render.
  */
-declare function AppHostProvider({ host, chatLabels, children: app }: AppHostProviderProps): import("react").JSX.Element;
+declare function AppHostProvider({ host, chatLabels, loadExtensionModule, children: app }: AppHostProviderProps): import("react").JSX.Element;
 /** Returns the {@link AppHost} from the nearest {@link AppHostProvider}. Throws when called outside one. */
 declare function useAppHost(): AppHost;
 //#endregion

package/dist/app/AppHostProvider.js

@@ -2,6 +2,7 @@ import { AppearanceProvider } from "../appearance/AppearanceProvider.js";
 import { ApprovalsProvider } from "../approvals/ApprovalsProvider.js";
 import { ChatProvider } from "../chat/ChatProvider.js";
 import { ComposerHostProvider } from "../chat/composer/ComposerHostProvider.js";
+import { ExtensionsProvider } from "../extensions/ExtensionsProvider.js";
 import { SidebarHostProvider } from "../chat/sidebar/SidebarHostProvider.js";
 import { FilesProvider } from "../files/FilesProvider.js";
 import { GitProvider } from "../git/GitProvider.js";
@@ -27,7 +28,7 @@ import { createContext, useContext } from "react";
 *
 * Today that is `ChatProvider` when `host.chat` is present,
 * `SessionProvider` when `host.session` is, `ApprovalsProvider` when
-* `host.approvals` is, `FilesProvider` when `host.files` is, `GitProvider` when `host.git` is, `MachinesProvider` when `host.machines` is, `SettingsProvider` when `host.settings` is, `TerminalProvider` when `host.terminal` is, `KeybindingsProvider` when `host.keybindings` is and
+* `host.approvals` is, `ExtensionsProvider` when `host.extensions` is, `FilesProvider` when `host.files` is, `GitProvider` when `host.git` is, `MachinesProvider` when `host.machines` is, `SettingsProvider` when `host.settings` is, `TerminalProvider` when `host.terminal` is, `KeybindingsProvider` when `host.keybindings` is and
 * `AppearanceProvider` when `host.appearance` is, and always a `KeyCommandsProvider` (the key command
 * registry: register shortcuts with `useKeyCommands`). `host.workspace` goes in
 * context for each `WorkspaceProvider` below (`WorkspaceHostProvider`), and
@@ -42,7 +43,7 @@ const AppHostContext = createContext(null);
 *
 * @param props - Provider props: the `host`, optional `chatLabels`, and the `children` to render.
 */
-function AppHostProvider({ host, chatLabels, children: app }) {
+function AppHostProvider({ host, chatLabels, loadExtensionModule, children: app }) {
 	const onboarding = host.onboarding ? /* @__PURE__ */ jsx(OnboardingHostProvider, {
 		host: host.onboarding,
 		children: app
@@ -67,10 +68,15 @@ function AppHostProvider({ host, chatLabels, children: app }) {
 		host: host.approvals,
 		children: workspace
 	}) : workspace;
-	const files = host.files ? /* @__PURE__ */ jsx(FilesProvider, {
-		host: host.files,
+	const extensions = host.extensions ? /* @__PURE__ */ jsx(ExtensionsProvider, {
+		host: host.extensions,
+		...loadExtensionModule ? { loadModule: loadExtensionModule } : {},
 		children: approvals
 	}) : approvals;
+	const files = host.files ? /* @__PURE__ */ jsx(FilesProvider, {
+		host: host.files,
+		children: extensions
+	}) : extensions;
 	const git = host.git ? /* @__PURE__ */ jsx(GitProvider, {
 		host: host.git,
 		children: files
@@ -94,6 +100,7 @@ function AppHostProvider({ host, chatLabels, children: app }) {
 	}) : commands;
 	const children = host.appearance ? /* @__PURE__ */ jsx(AppearanceProvider, {
 		host: host.appearance,
+		...host.extensions ? { extensions: host.extensions } : {},
 		children: keybindings
 	}) : keybindings;
 	const withPalette = host.palette ? /* @__PURE__ */ jsx(PaletteProvider, {

package/dist/app/ModalProvider.d.ts

@@ -44,8 +44,12 @@ interface ModalContextValue {
   open: (node: ReactNode, options?: ModalOpenOptions) => void;
   /** Close the slot; with `id`, only while that surface still owns it (a self-close). */
   close: (id?: string) => void;
-  /** What Esc and a scrim click call instead of `close` (a shell registers its `onClose`); `null` clears it. */
-  setDismissHandler: (handler: (() => void) | null) => void;
+  /**
+   * What Esc and a scrim click call instead of `close` (a shell registers its `onClose`); `null` clears it.
+   * With `owner`, `null` clears only while `owner` is still the handler: a surface that leaves after the
+   * next one registered never clears that one's.
+   */
+  setDismissHandler: (handler: (() => void) | null, owner?: () => void) => void;
   /** Shows `node` above the current slot without replacing it. */
   openLayer: (node: ReactNode, options: LayerOptions) => void;
   /** Removes the layer without calling its `onDismiss`. */
@@ -130,6 +134,8 @@ interface ScreenShellProps {
   title: ReactNode;
   /** A line under the heading. */
   description?: ReactNode;
+  /** Before the heading and its line (a mark). */
+  lead?: ReactNode;
   /** Label for the back affordance in the left column, e.g. "Settings". */
   screenLabel: string;
   /** The back button and Esc. */
@@ -159,6 +165,6 @@ interface ScreenShellProps {
  *
  * @param props - The heading, the left column, the body and `onClose`.
  */
-declare function ScreenShell({ title, description, screenLabel, onClose, aside, asideFooter, headerActions, children, className, style }: ScreenShellProps): import("react").JSX.Element;
+declare function ScreenShell({ title, description, lead, screenLabel, onClose, aside, asideFooter, headerActions, children, className, style }: ScreenShellProps): import("react").JSX.Element;
 //#endregion
 export { LayerOptions, MODAL_TITLE_ID, ModalChromeInset, ModalContextValue, ModalOpenOptions, ModalProvider, ModalProviderProps, ModalScrimKind, ModalShell, ModalShellProps, ModalVariant, ScreenShell, ScreenShellProps, useModal, useOptionalModal };

package/dist/app/ModalProvider.js

@@ -6,7 +6,7 @@ import { ErrorBoundary, ErrorDetails } from "../components/ErrorBoundary.js";
 import { Keycap } from "../components/Keycap.js";
 import { useAppearanceState } from "../appearance/AppearanceProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { AnimatePresence, motion, useIsPresent } from "motion/react";
 //#region src/app/ModalProvider.tsx
 /**
@@ -100,7 +100,8 @@ function ModalProvider({ chromeInset = NO_CHROME, children }) {
 		dismissLayer();
 		setSlot(null);
 	}, [dismissLayer]);
-	const setDismissHandler = useCallback((handler) => {
+	const setDismissHandler = useCallback((handler, owner) => {
+		if (handler === null && owner !== void 0 && dismissHandlerRef.current !== owner) return;
 		dismissHandlerRef.current = handler;
 	}, []);
 	const dismiss = useCallback(() => {
@@ -110,7 +111,7 @@ function ModalProvider({ chromeInset = NO_CHROME, children }) {
 		}
 		close();
 	}, [close]);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!content && !layer) return;
 		const onKey = (event) => {
 			if (event.key === "Escape") {
@@ -331,21 +332,39 @@ const SIZE_CLS = {
 	xxlarge: "w-[1040px] max-h-[88vh]"
 };
 /**
+* Makes a shell's `onClose` the dismiss handler while the shell is present, reading the latest
+* `onClose` through a ref. A closed surface stays mounted while it animates out: it drops its handler
+* as it starts leaving, and never takes it back from the surface that replaced it (the effect is keyed
+* on presence and the stable setter, not on the modal value or `onClose`'s identity).
+*
+* Both run as layout effects: in the commit that shows a surface (a new one, or new content in the
+* shell already there), Esc and the scrim already call that surface's `onClose`. As passive effects
+* they ran later, and an Esc pressed in between closed the surface it replaced.
+*/
+function useDismissHandler(setDismissHandler, onClose) {
+	const present = useIsPresent();
+	const onCloseRef = useRef(onClose);
+	useLayoutEffect(() => {
+		onCloseRef.current = onClose;
+	});
+	useLayoutEffect(() => {
+		if (!present) return;
+		const handler = () => onCloseRef.current();
+		setDismissHandler(handler);
+		return () => setDismissHandler(null, handler);
+	}, [setDismissHandler, present]);
+}
+/**
 * Standard modal shell — title row + body + optional footer. Every modal in
 * the app uses this so spacing, borders, and the close-X stay consistent.
 *
 * @param props - The title, body, footer, size and close handlers.
 */
 function ModalShell({ title, description, onClose, onBack, footer, children, size = "medium", scrollBody = true, className, style }) {
-	const sizeCls = SIZE_CLS[size];
 	const modal = useModal();
 	const labels = useLabels();
-	useEffect(() => {
-		modal.setDismissHandler(onClose);
-		return () => {
-			modal.setDismissHandler(null);
-		};
-	}, [modal, onClose]);
+	const sizeCls = SIZE_CLS[size];
+	useDismissHandler(modal.setDismissHandler, onClose);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `zg-modal-panel zg-float ${sizeCls} max-w-[92vw] flex flex-col overflow-hidden${className ? ` ${className}` : ""}`,
 		style,
@@ -401,17 +420,12 @@ function ModalShell({ title, description, onClose, onBack, footer, children, siz
 *
 * @param props - The heading, the left column, the body and `onClose`.
 */
-function ScreenShell({ title, description, screenLabel, onClose, aside, asideFooter, headerActions, children, className, style }) {
+function ScreenShell({ title, description, lead, screenLabel, onClose, aside, asideFooter, headerActions, children, className, style }) {
 	const modal = useModal();
 	const labels = useLabels();
 	const chrome = useContext(ChromeContext);
 	const { sidebarWidth } = useAppearanceState();
-	useEffect(() => {
-		modal.setDismissHandler(onClose);
-		return () => {
-			modal.setDismissHandler(null);
-		};
-	}, [modal, onClose]);
+	useDismissHandler(modal.setDismissHandler, onClose);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `flex w-full h-full min-h-0${className ? ` ${className}` : ""}`,
 		style,
@@ -471,14 +485,20 @@ function ScreenShell({ title, description, screenLabel, onClose, aside, asideFoo
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex-1 min-w-0 flex items-end gap-3",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex-1 min-w-0",
-						children: [/* @__PURE__ */ jsx("h2", {
-							id: MODAL_TITLE_ID,
-							className: "text-sm font-semibold leading-tight text-[var(--zg-text)] m-0 zg-balance",
-							children: title
-						}), description && /* @__PURE__ */ jsx("p", {
-							className: "text-xs leading-tight text-[var(--zg-text-muted)] mt-0.5 m-0 truncate",
-							children: description
+						className: "flex-1 min-w-0 flex items-center gap-2.5",
+						children: [lead && /* @__PURE__ */ jsx("div", {
+							className: "shrink-0 flex",
+							children: lead
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ jsx("h2", {
+								id: MODAL_TITLE_ID,
+								className: "text-sm font-semibold leading-tight text-[var(--zg-text)] m-0 zg-balance",
+								children: title
+							}), description && /* @__PURE__ */ jsx("p", {
+								className: "text-xs leading-tight text-[var(--zg-text-muted)] mt-0.5 m-0 truncate",
+								children: description
+							})]
 						})]
 					}), headerActions && /* @__PURE__ */ jsx("div", {
 						className: "zg-no-drag flex items-center gap-2 shrink-0 pb-0.5",

package/dist/app/headless/app-host.d.ts

@@ -1,6 +1,7 @@
 import { AppearanceHost } from "../../appearance/headless/host.js";
 import { KeybindingsHost } from "../../keybindings/headless/host.js";
 import { WorkspaceHost } from "../../workspace/headless/host.js";
+import { ExtensionsHost } from "../../extensions/headless/host.js";
 import { ChatHost } from "../../chat/headless/host.js";
 import { ApprovalsHost } from "../../approvals/headless/host.js";
 import { SessionHost } from "../../session/headless/host.js";
@@ -24,6 +25,8 @@ interface AppHost {
   chat?: ChatHost;
   /** The rich composer's host: shared drafts, completions, ghost text and next-prompt suggestions. Absent: those stay off (`zidane-ui/chat/rich-composer`). */
   composer?: ComposerHost;
+  /** What the extensions behind the app contribute (slots, screens, renderers, dialogs, settings pages, webviews) and the way back to them. Absent: no extension UI. */
+  extensions?: ExtensionsHost;
   /** The Files and Diffs tabs' host: listing, reading, writing and searching files, git status, the working-tree diff and the editor preferences. Absent: no Files or Diffs tab. */
   files?: FilesHost;
   /** The git area's host: branches and pull requests, worktrees, environment kinds and remote folders. Absent: no branch menu, no remote folder picker. */

package/dist/appearance/AppearanceProvider.d.ts

@@ -1,14 +1,15 @@
 import { Theme, ThemeColors } from "../theme/themes.js";
 import { AppearanceMode, AppearanceState, CodeThemeChoice } from "./headless/prefs.js";
 import { AppearanceHost } from "./headless/host.js";
+import { ExtensionsHost } from "../extensions/headless/host.js";
 import { Appearance, ResolvedPalette } from "../theme/derive.js";
 import { shikiThemeFor } from "../code/shiki-theme.js";
 import { ReactNode } from "react";
 //#region src/appearance/AppearanceProvider.d.ts
-/** A bundled shiki theme id, what the highlighters take. */
+/** A bundled code theme id, what the highlighters take. */
 type CodeTheme = ReturnType<typeof shikiThemeFor>;
 /**
- * The shiki theme code renders with: the pick for the current appearance, else (`'auto'`, or a pick that is not a
+ * The code theme code renders with: the pick for the current appearance, else (`'auto'`, or a pick that is not a
  * bundled theme of that appearance) the app theme's mapping.
  *
  * @param choice - The code theme per appearance.
@@ -26,6 +27,12 @@ interface AppearanceProviderProps {
   folder?: string | null;
   /** Changes when the folder's themes may have changed (its enabled extensions): they are read again. */
   themesKey?: string;
+  /**
+   * The extensions host: its `Theme` items are offered too, after the host's own extra themes. One
+   * theme id shows once (the appearance host's copy wins: zidane's registry serves extension themes through
+   * `host.themes` as well). `AppHostProvider` passes `AppHost.extensions`.
+   */
+  extensions?: ExtensionsHost;
   /** Where the theme vars go. Default: `<html>`. Elsewhere, no snapshot is written and the window is left alone. */
   root?: HTMLElement;
   /** Puts the tree under the motion preferences (`MotionProvider`, which writes `html[data-motion]`). Default: true. */
@@ -39,14 +46,14 @@ interface AppearanceProviderProps {
  *
  * @param props - See {@link AppearanceProviderProps}.
  */
-declare function AppearanceProvider({ host, legacyThemeId, folder, themesKey, root, motion, children }: AppearanceProviderProps): import("react").JSX.Element;
+declare function AppearanceProvider({ host, legacyThemeId, folder, themesKey, extensions, root, motion, children }: AppearanceProviderProps): import("react").JSX.Element;
 /** The active theme (the default theme outside an {@link AppearanceProvider}). */
 declare function useTheme(): Theme;
 /** The active theme's colors. */
 declare function useColors(): ThemeColors;
 /** The active derived palette. */
 declare function usePalette(): ResolvedPalette;
-/** The shiki theme for code right now: the code theme pick for the current appearance, else the app theme's. */
+/** The theme for code right now: the code theme pick for the current appearance, else the app theme's. */
 declare function useShikiTheme(): CodeTheme;
 /** The host from the nearest {@link AppearanceProvider}, or `null` outside one. */
 declare function useAppearanceHost(): AppearanceHost | null;

package/dist/appearance/AppearanceProvider.js

@@ -3,10 +3,11 @@ import { shikiThemeFor } from "../code/shiki-theme.js";
 import { derivePalette } from "../theme/derive.js";
 import { seedFromTheme } from "../theme/from-theme.js";
 import { BUILTIN_THEMES, DEFAULT_THEME, resolveTheme } from "../theme/themes.js";
-import { DEFAULT_APPEARANCE, activeThemeId, resolveMotion } from "./headless/prefs.js";
-import { fontsToCssVars } from "./headless/fonts.js";
+import { constant, useReadable } from "../chat/headless/store.js";
 import { codeThemeTypeOf } from "../code/code-themes.js";
 import { applyPalette } from "./apply.js";
+import { fontsToCssVars } from "./headless/fonts.js";
+import { DEFAULT_APPEARANCE, activeThemeId, resolveMotion } from "./headless/prefs.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 //#region src/appearance/AppearanceProvider.tsx
@@ -28,7 +29,7 @@ import { createContext, useContext, useEffect, useMemo, useState, useSyncExterna
 *   </AppearanceProvider>
 */
 /**
-* The shiki theme code renders with: the pick for the current appearance, else (`'auto'`, or a pick that is not a
+* The code theme code renders with: the pick for the current appearance, else (`'auto'`, or a pick that is not a
 * bundled theme of that appearance) the app theme's mapping.
 *
 * @param choice - The code theme per appearance.
@@ -58,8 +59,8 @@ const ThemeContext = createContext(DEFAULT_CONTEXT);
 *
 * @param props - See {@link AppearanceProviderProps}.
 */
-function AppearanceProvider({ host, legacyThemeId, folder, themesKey, root, motion = true, children }) {
-	const extensionThemes = useExtensionThemes(host, folder, themesKey);
+function AppearanceProvider({ host, legacyThemeId, folder, themesKey, extensions, root, motion = true, children }) {
+	const extensionThemes = useMergedThemes(useExtensionThemes(host, folder, themesKey), extensions);
 	const prefersDark = usePrefersDark();
 	const state = useSyncExternalStore(host.prefs.subscribe, host.prefs.get, host.prefs.get);
 	const osReducedMotion = useOsReducedMotion();
@@ -147,7 +148,7 @@ function useColors() {
 function usePalette() {
 	return useContext(ThemeContext).palette;
 }
-/** The shiki theme for code right now: the code theme pick for the current appearance, else the app theme's. */
+/** The theme for code right now: the code theme pick for the current appearance, else the app theme's. */
 function useShikiTheme() {
 	return useContext(ThemeContext).shikiTheme;
 }
@@ -241,6 +242,17 @@ function keepThemes(prev, next) {
 	if (next.length === 0) return NO_THEMES;
 	return prev.length === next.length && JSON.stringify(prev) === JSON.stringify(next) ? prev : next;
 }
+const NO_THEME_ITEMS = constant([]);
+/** The host's extra themes, then the extensions host's `Theme` items whose id it doesn't have. */
+function useMergedThemes(themes, extensions) {
+	const items = useReadable(extensions?.items.theme ?? NO_THEME_ITEMS);
+	return useMemo(() => {
+		if (items.length === 0) return themes;
+		const ids = new Set(themes.map((t) => t.id));
+		const added = items.map((e) => e.item).filter((t) => !ids.has(t.id) && ids.add(t.id));
+		return added.length === 0 ? themes : [...themes, ...added];
+	}, [themes, items]);
+}
 function useExtensionThemes(host, folder, themesKey) {
 	const [themes, setThemes] = useState(NO_THEMES);
 	const read = host.themes;

package/dist/appearance/headless/index.js

@@ -1,5 +1,5 @@
+import { CURATED_FONTS, FONT_STACKS, availableCuratedFonts, cssFamily, fontStack, fontsToCssVars, guessKind, isFontAvailable, queryInstalledFonts } from "./fonts.js";
 import { DEFAULT_APPEARANCE, LIMITS, activeThemeId, parseAppearance, resolveMotion, stepInterfaceScale } from "./prefs.js";
 import { APPEARANCE_STORAGE_KEY, BOOT_SNAPSHOT_KEY, createStorageAppearancePrefs, createStorageBoot } from "./storage.js";
-import { CURATED_FONTS, FONT_STACKS, availableCuratedFonts, cssFamily, fontStack, fontsToCssVars, guessKind, isFontAvailable, queryInstalledFonts } from "./fonts.js";
 import { zoomKeyCommands } from "./zoom-commands.js";
 export { APPEARANCE_STORAGE_KEY, BOOT_SNAPSHOT_KEY, CURATED_FONTS, DEFAULT_APPEARANCE, FONT_STACKS, LIMITS, activeThemeId, availableCuratedFonts, createStorageAppearancePrefs, createStorageBoot, cssFamily, fontStack, fontsToCssVars, guessKind, isFontAvailable, parseAppearance, queryInstalledFonts, resolveMotion, stepInterfaceScale, zoomKeyCommands };

package/dist/appearance/headless/prefs.d.ts

@@ -34,10 +34,10 @@ interface FontSizes {
 }
 /** Which side of the Files tab the tree column sits on. */
 type FilesTreeSide = 'left' | 'right';
-/** A bundled shiki theme id, or `'auto'`: the app theme's own mapping. */
+/** A bundled code theme id, or `'auto'`: the app theme's own mapping. */
 type CodeThemePick = 'auto' | (string & {});
 /**
- * Syntax colours per appearance. Only the tokens come from shiki; the code
+ * Syntax colours per appearance. Only the tokens come from the code theme; the code
  * background is always the app's, so each slot holds a theme of its type.
  */
 interface CodeThemeChoice {