zidane-ui 9.0.4 → 9.1.3

package/dist/settings/sections/extensions/ExtensionSourceBrowser.js

@@ -0,0 +1,164 @@
+import { Checkbox, MetaChip } from "../../../components/Form.js";
+import { useSectionLabels } from "../use-section-labels.js";
+import { ExtensionMark as ExtensionMark$1 } from "../../../onboarding/marks.js";
+import { SourceBrowser } from "../../../onboarding/sources/SourceBrowser.js";
+import { GITHUB_SKILL_SOURCE_IMAGES } from "../../../onboarding/skills/SkillSourceBrowser.js";
+import { DEFAULT_EXTENSIONS_SECTION_LABELS } from "./labels.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { DEFAULT_EXTENSION_SOURCE } from "zidane/chat/pure";
+//#region src/settings/sections/extensions/ExtensionSourceBrowser.tsx
+/**
+* Finds extensions in a repository or a package, and picks them: the source
+* browser Skills uses (`SourceBrowser`), over extension listings. It opens
+* on the default source (`DEFAULT_EXTENSION_SOURCE`, the zidane
+* repository), whose rows are the native extensions even when the
+* repository can't be read: then one calm note says so. Each row shows the
+* extension's mark, display name, version and description; one already
+* installed, or with no way to install (a folder on the host), can't be
+* picked. A pick carries the row's `install` (what `catalog.install` takes).
+*/
+/**
+* The pick of a listed extension. `undefined` for one with no way to install.
+*
+* @param entry - The listed extension.
+*/
+function extensionPickOf(entry) {
+	if (!entry.install) return void 0;
+	return {
+		key: `${entry.install.source}\u0000${entry.install.extension ?? entry.name}`,
+		name: entry.name,
+		label: entry.displayName,
+		install: entry.install
+	};
+}
+const pickOf = (entry, listing) => extensionPickOf(entry) ?? {
+	key: `${listing.input}\u0000${entry.path}`,
+	name: entry.name,
+	label: entry.displayName,
+	install: { source: listing.input }
+};
+const itemsOf = (listing) => listing.extensions;
+const searchText = (entry) => [
+	entry.name,
+	entry.displayName,
+	entry.description ?? ""
+];
+const truncatedOf = (listing) => listing.truncated === true;
+/** The card of a listing: its link is the source's page, else the repository's or the package's. */
+function cardOf(listing) {
+	const { source } = listing;
+	const url = source.url ?? (source.kind === "github" && source.owner && source.repo ? `https://github.com/${source.owner}/${source.repo}` : source.kind === "npm" && source.package ? `https://www.npmjs.com/package/${source.package}` : void 0);
+	return {
+		kind: source.kind,
+		label: source.label,
+		...source.owner ? { owner: source.owner } : {},
+		...source.repo ? { repo: source.repo } : {},
+		...url ? { url } : {}
+	};
+}
+/**
+* Renders the extension source browser, open on the default source.
+*
+* @param props - Component props.
+*/
+function ExtensionSourceBrowser({ browse, picks, onToggle, installed = [], initial = DEFAULT_EXTENSION_SOURCE, images = GITHUB_SKILL_SOURCE_IMAGES, className, style }) {
+	const l = useSectionLabels(DEFAULT_EXTENSIONS_SECTION_LABELS);
+	const sources = useMemo(() => {
+		const [owner = "", repo = ""] = DEFAULT_EXTENSION_SOURCE.split("/");
+		return [{
+			id: "zidane",
+			spec: DEFAULT_EXTENSION_SOURCE,
+			owner,
+			repo,
+			label: l.extensionsSectionDefaultSource,
+			description: l.extensionsSectionDefaultSourceDescription
+		}];
+	}, [l]);
+	const selectable = useCallback((entry) => entry.install !== void 0 && !installed.includes(entry.name), [installed]);
+	const renderRow = useCallback(({ item, picked, onToggle: toggle }) => /* @__PURE__ */ jsx(ExtensionSourceRow, {
+		entry: item,
+		picked,
+		installed: installed.includes(item.name),
+		onToggle: toggle
+	}), [installed]);
+	const noteOf = useCallback((listing) => listing.builtin && listing.error ? l.extensionsSectionUnreachable : void 0, [l]);
+	return /* @__PURE__ */ jsx(SourceBrowser, {
+		compact: true,
+		browse,
+		itemsOf,
+		cardOf,
+		pickOf,
+		selectable,
+		renderRow,
+		searchText,
+		words: {
+			count: l.extensionsSectionBrowseCount,
+			empty: l.extensionsSectionBrowseEmpty,
+			emptyHint: l.extensionsSectionBrowseEmptyHint,
+			filter: l.extensionsSectionBrowseFilter,
+			noMatch: l.extensionsSectionBrowseNoMatch
+		},
+		picks,
+		onToggle,
+		failureOf,
+		noteOf,
+		truncatedOf,
+		sources,
+		images,
+		initial,
+		className,
+		style
+	});
+}
+/** A source that could not be read and lists nothing shows as a failed source; the default one lists the native rows. */
+const failureOf = (listing) => listing.error && !listing.builtin && listing.extensions.length === 0 ? listing.error.message : void 0;
+/** One listed extension as a checkbox row: mark, display name, version, installed, description. */
+function ExtensionSourceRow({ entry, picked, installed, onToggle }) {
+	const l = useSectionLabels(DEFAULT_EXTENSIONS_SECTION_LABELS);
+	const on = installed || picked;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "checkbox",
+		"aria-checked": on,
+		disabled: installed || !entry.install,
+		onClick: () => onToggle(!picked),
+		"data-picked": picked ? "" : void 0,
+		className: "zg-skill-row zg-press-subtle flex items-start gap-3 w-full min-w-0 px-3 py-2.5 text-left rounded-zg-lg bg-transparent border-0 cursor-pointer text-[var(--zg-text)] hover:before:bg-[var(--zg-row-hover)] disabled:cursor-default disabled:hover:before:bg-transparent zg-focus-ring",
+		children: [/* @__PURE__ */ jsx(Checkbox, { checked: on }), /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col gap-0.5 flex-1 min-w-0",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2 min-w-0",
+				children: [
+					/* @__PURE__ */ jsx(ExtensionMark$1, {
+						entry: {
+							name: entry.name,
+							label: entry.displayName,
+							...entry.icon ? { icon: entry.icon } : {},
+							...entry.brand ? { brand: entry.brand } : {}
+						},
+						size: "sm"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-zg-ui font-medium truncate",
+						children: entry.displayName
+					}),
+					entry.version && /* @__PURE__ */ jsx("span", {
+						className: "zg-meta font-mono shrink-0",
+						children: l.extensionsSectionBrowseVersion(entry.version)
+					}),
+					installed && /* @__PURE__ */ jsx(MetaChip, {
+						tone: "success",
+						className: "ml-auto",
+						children: l.extensionsSectionInstalled
+					})
+				]
+			}), entry.description && /* @__PURE__ */ jsx("span", {
+				className: "text-zg-label text-[var(--zg-text-muted)] text-pretty line-clamp-2",
+				children: entry.description
+			})]
+		})]
+	});
+}
+//#endregion
+export { ExtensionSourceBrowser, extensionPickOf };

package/dist/settings/sections/extensions/ExtensionsSection.d.ts

@@ -57,14 +57,18 @@ interface ExtensionActionsProps {
   onEdit?: () => void;
   /** Runs its installer again. Absent: no Update. */
   onUpdate?: () => void;
+  /** Opens "Change origin…". Absent: Update has no menu. */
+  onChangeOrigin?: () => void;
   /** Deletes it. Absent: no Remove. */
   onRemove?: () => void;
 }
 /**
- * An extension row's controls: Edit, Update, Remove (asks first), then its folder.
+ * An extension row's controls: Edit, Update, Remove (asks first), then its folder. With
+ * `onChangeOrigin`, a right click on Update or the arrow beside it opens "Update from <origin>"
+ * and "Change origin…".
  *
  * @param props - The `extension`, its busy and armed states, and the actions it offers.
  */
-declare function ExtensionActions({ extension: ext, busy, armed, onArm, onEdit, onUpdate, onRemove }: ExtensionActionsProps): import("react").JSX.Element;
+declare function ExtensionActions({ extension: ext, busy, armed, onArm, onEdit, onUpdate, onChangeOrigin, onRemove }: ExtensionActionsProps): import("react").JSX.Element;
 //#endregion
 export { ExtensionActions, ExtensionList, ExtensionsSection, ExtensionsSectionProps, useExtensionsSectionLabels };

package/dist/settings/sections/extensions/ExtensionsSection.js

@@ -1,29 +1,50 @@
+import { IconButton } from "../../../components/IconButton.js";
 import { BTN_DANGER, BTN_DANGER_CONFIRM, BTN_LG_PRIMARY, BTN_LG_SECONDARY, BTN_SECONDARY, buttonClass } from "../../../components/button.js";
+import { Tooltip } from "../../../components/Tooltip.js";
 import { ErrorNote, FIELD_LABEL_CLASS, FORM_CARD_CLASS, INPUT_CLASS, MetaChip, OpLine } from "../../../components/Form.js";
-import { toSettingsError } from "../../headless/host.js";
+import { RowActionsMenu } from "../../../components/RowActionsMenu.js";
+import { useDisplayPath } from "../../../hooks/useDisplayPath.js";
 import { useSettingsHost } from "../../SettingsProvider.js";
+import { toSettingsError } from "../../headless/host.js";
+import { ExtensionSlot } from "../../../extensions/ExtensionSlot.js";
 import { SettingsPanel, SettingsPanelActions, SettingsPanelBody } from "../../section.js";
 import { useSectionLabels } from "../use-section-labels.js";
+import { ExtensionMark } from "../../../onboarding/marks.js";
 import { EnabledList, RevealPathButton, ScopePicker, useCatalogSharedLabels, useOpLine, useSettingsValues, useWriteSetting } from "../shared/catalog.js";
 import { SettingsTutorial } from "../../SettingsTutorial.js";
-import { ExtensionMark } from "../../../onboarding/marks.js";
 import { DEFAULT_EXTENSIONS_SECTION_LABELS } from "./labels.js";
+import { useChangeOriginLayer } from "./ChangeOriginDialog.js";
+import { ExtensionPicksBar, needsAccessHint, useExtensionPicks } from "./ExtensionPicksBar.js";
+import { ExtensionSourceBrowser } from "./ExtensionSourceBrowser.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { nativeExtensionByName } from "zidane/chat/pure";
 //#region src/settings/sections/extensions/ExtensionsSection.tsx
 /**
 * Settings › Extensions: the extensions found for a folder with their
 * allowlist toggles (`enabledExtensions`), over the settings host's
 * `extensions` group. The extensions' own options flow in as `children`,
-* under the list, in the same scroll.
+* under the list, in the same scroll; under them, the extensions'
+* `settings.section` items (from the extensions host when there is one).
+* The extensions' settings pages are entries of their own under this one in
+* the settings nav (`useExtensionSettingsSections`).
+*
+* Install opens the source browser (`browse`, the one Skills uses), on the
+* default source with the native extensions: pick extensions from one or
+* more sources, choose the scope, then `install` each pick (its row's
+* `install`). A host without `browse` gets the form instead (a source, an
+* optional extension name, the scope).
 *
-* Install (`install`: a GitHub / npm / local source, an optional extension
-* name, the scope), and per row Edit (the app's `onEdit`, an authoring
-* session on its folder), Update (`update`, the installer again), Remove
-* (asks first; `remove`, then it leaves the allowlist) and its folder
-* (`paths.reveal`). The list is read again after each toggle: an
-* extension's state follows the allowlist.
+* Each row shows the extension's mark (`extensionMark`, the one the
+* settings nav draws). One that failed to load stays off, with a red
+* "error" chip whose tooltip (hover and keyboard focus, read through
+* `aria-describedby`) says why. Per row: Edit (the app's `onEdit`, an
+* authoring session on its folder), Update for one installed from a source
+* (`origin`, its `.install.json`: `update`, the installer again; a right
+* click or the arrow beside it opens "Update from <origin>" and "Change
+* origin…", which installs it again from another source through
+* `changeOrigin`), Remove (asks first; `remove`, then it leaves the
+* allowlist) and its folder (`paths.reveal`). The list is read again after
+* each toggle: an extension's state follows the allowlist.
 */
 /** The Extensions section's strings, overridable through `LabelsProvider`. */
 function useExtensionsSectionLabels() {
@@ -31,6 +52,7 @@ function useExtensionsSectionLabels() {
 }
 const NO_EXTENSIONS = [];
 const keyOf = (ext) => ext.name;
+const nameOf = (ext) => ext.displayName ?? ext.name;
 const forcedEnabledOf = (ext) => ext.error ? false : void 0;
 /**
 * Renders the extensions of the nearest `SettingsProvider`'s host for `cwd`.
@@ -82,10 +104,87 @@ function ExtensionsSection({ cwd, onEdit, onCreateExtension, children, className
 		extensionKey,
 		refreshNonce
 	]);
-	const errored = useMemo(() => catalog.filter((ext) => ext.error), [catalog]);
+	const installed = useMemo(() => catalog.map((ext) => ext.name), [catalog]);
+	const [picks, setPicks, togglePicks] = useExtensionPicks();
+	const [scope, setScope] = useState("user");
+	const [installing, setInstalling] = useState(false);
+	const [needsAccess, setNeedsAccess] = useState(false);
+	const browseHost = host?.browse;
+	const browse = useCallback(async (input) => {
+		try {
+			return await browseHost(input);
+		} catch (err) {
+			throw new Error(shared.catalogError(toSettingsError(err)));
+		}
+	}, [browseHost, shared]);
+	/** Installs the picks in turn. One that installed leaves the picks, so a failure keeps only the rest. */
+	const runInstallPicks = useCallback(async () => {
+		if (!cwd || !host?.install || picks.length === 0) return;
+		setInstalling(true);
+		setNeedsAccess(false);
+		let allowed = enabledExtensions;
+		try {
+			for (const pick of picks) {
+				setOpLine({
+					kind: "busy",
+					text: l.extensionsSectionInstalling(pick.label)
+				});
+				const request = {
+					source: pick.install.source,
+					scope,
+					...pick.install.extension ? { extension: pick.install.extension } : {}
+				};
+				const { name } = await host.install(cwd, request, (line) => {
+					if (mounted.current) setOpLine({
+						kind: "busy",
+						text: line
+					});
+				});
+				if (allowed !== void 0 && !allowed.includes(name)) {
+					allowed = [...allowed, name];
+					write("enabledExtensions", allowed);
+				}
+				setPicks((current) => current.filter((p) => p.key !== pick.key));
+			}
+			setOpLine(null);
+			setInstallOpen(false);
+		} catch (err) {
+			const error = toSettingsError(err);
+			const text = shared.catalogError(error);
+			setNeedsAccess(needsAccessHint(text));
+			fail(error);
+		} finally {
+			setInstalling(false);
+			setRefreshNonce((n) => n + 1);
+		}
+	}, [
+		cwd,
+		host,
+		picks,
+		setPicks,
+		scope,
+		enabledExtensions,
+		write,
+		l,
+		shared,
+		setOpLine,
+		fail
+	]);
+	/** "Change origin…" above Settings; the list is read again once it installed. */
+	const hostChangeOrigin = host?.changeOrigin;
+	const changeOrigin = useMemo(() => cwd && hostChangeOrigin ? (ext, source, onProgress) => hostChangeOrigin(cwd, ext, source, onProgress) : void 0, [cwd, hostChangeOrigin]);
+	const originChanged = useCallback((message) => {
+		if (!mounted.current) return;
+		setOpLine({
+			kind: "notice",
+			text: message
+		});
+		setRefreshNonce((n) => n + 1);
+	}, [setOpLine]);
+	const openChangeOrigin = useChangeOriginLayer(changeOrigin, originChanged);
+	/** The form's install. The form stays open, with what was typed, until it succeeds. */
 	const runInstall = useCallback(async (req) => {
 		if (!cwd || !host?.install) return;
-		setInstallOpen(false);
 		setOpLine({
 			kind: "busy",
 			text: l.extensionsSectionInstalling(req.source)
@@ -99,6 +198,7 @@ function ExtensionsSection({ cwd, onEdit, onCreateExtension, children, className
 			});
 			if (enabledExtensions !== void 0 && !enabledExtensions.includes(name)) write("enabledExtensions", [...enabledExtensions, name]);
 			setOpLine(null);
+			setInstallOpen(false);
 			setRefreshNonce((n) => n + 1);
 		} catch (err) {
 			fail(err);
@@ -209,14 +309,34 @@ function ExtensionsSection({ cwd, onEdit, onCreateExtension, children, className
 						children: l.extensionsSectionBuild
 					})
 				}),
-				installOpen && /* @__PURE__ */ jsx(ExtensionInstallForm, { onSubmit: (req) => void runInstall(req) }),
+				installOpen && (host?.browse ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3 mb-3",
+					children: [/* @__PURE__ */ jsx(ExtensionSourceBrowser, {
+						browse,
+						picks,
+						onToggle: togglePicks,
+						installed
+					}), /* @__PURE__ */ jsx(ExtensionPicksBar, {
+						count: picks.length,
+						scope: {
+							value: scope,
+							onChange: setScope
+						},
+						busy: installing,
+						onClear: () => setPicks([]),
+						onInstall: () => void runInstallPicks()
+					})]
+				}) : /* @__PURE__ */ jsx(ExtensionInstallForm, { onSubmit: (req) => void runInstall(req) })),
 				opLine?.kind === "error" && /* @__PURE__ */ jsx(OpLine, {
 					kind: "error",
 					children: shared.catalogError(opLine.error)
 				}),
+				opLine?.kind === "error" && needsAccess && /* @__PURE__ */ jsx("p", {
+					className: "m-0 text-zg-label text-[var(--zg-text-muted)] text-pretty",
+					children: l.extensionsSectionAccessHint
+				}),
 				loadError && /* @__PURE__ */ jsx(ErrorNote, { children: shared.catalogError(loadError) }),
 				actionError && /* @__PURE__ */ jsx(ErrorNote, { children: shared.catalogError(actionError) }),
-				errored.length > 0 && /* @__PURE__ */ jsx(ErrorNote, { children: errored.length === 1 ? l.extensionsSectionOneFailed(errored[0].name, errored[0].error) : l.extensionsSectionManyFailed(errored.length) }),
 				/* @__PURE__ */ jsx(ExtensionList, {
 					catalog,
 					actionOf: (ext) => ext.dir ? /* @__PURE__ */ jsx(ExtensionActions, {
@@ -225,12 +345,17 @@ function ExtensionsSection({ cwd, onEdit, onCreateExtension, children, className
 						armed: removeArmed === ext.name,
 						onArm: (armed) => setRemoveArmed(armed ? ext.name : null),
 						...onEdit ? { onEdit: () => void openEdit(ext) } : {},
-						...host?.update ? { onUpdate: () => void runUpdate(ext) } : {},
+						...host?.update && ext.origin ? { onUpdate: () => void runUpdate(ext) } : {},
+						...openChangeOrigin && ext.origin ? { onChangeOrigin: () => openChangeOrigin(ext) } : {},
 						...host?.remove ? { onRemove: () => void runRemove(ext) } : {}
 					}) : null,
 					emptyMessage: cwd ? l.extensionsSectionEmpty : l.extensionsSectionNoFolder
 				}),
-				children
+				children,
+				/* @__PURE__ */ jsx(ExtensionSlot, {
+					at: "settings.section",
+					className: "mt-6 flex-wrap"
+				})
 			]
 		}) })]
 	});
@@ -242,13 +367,16 @@ function ExtensionsSection({ cwd, onEdit, onCreateExtension, children, className
 * @param props - The `catalog`, each extension's controls (`actionOf`), the `preamble` and the `emptyMessage`.
 */
 function ExtensionList({ catalog, actionOf, preamble, emptyMessage }) {
+	const display = useDisplayPath();
+	const detail = useCallback((ext) => detailOf(ext, display), [display]);
 	return /* @__PURE__ */ jsx(EnabledList, {
 		catalog,
 		keyOf,
-		labelOf: keyOf,
-		detailOf,
+		labelOf: nameOf,
+		detailOf: detail,
 		leadOf,
 		badgeOf,
+		statusOf,
 		...actionOf ? { actionOf } : {},
 		forcedEnabledOf,
 		preamble,
@@ -256,16 +384,41 @@ function ExtensionList({ catalog, actionOf, preamble, emptyMessage }) {
 		emptyMessage
 	});
 }
-const detailOf = (ext) => [ext.description ?? ext.dir ?? "", ext.capabilities && ext.capabilities.length > 0 ? ext.capabilities.join(", ") : ""].filter(Boolean).join(", ");
-const leadOf = (ext) => /* @__PURE__ */ jsx(NativeMark, { name: ext.name });
-const badgeOf = (ext) => /* @__PURE__ */ jsx(ExtensionBadge, { extension: ext });
+/** Its description, else its folder (home folder as `~`), then what it adds. */
+const detailOf = (ext, display) => [ext.description ?? (ext.dir ? display.path(ext.dir) : ""), ext.capabilities && ext.capabilities.length > 0 ? ext.capabilities.join(", ") : ""].filter(Boolean).join(", ");
+const leadOf = (ext) => /* @__PURE__ */ jsx(ExtensionMark, {
+	entry: {
+		name: ext.name,
+		...ext.displayName ? { label: ext.displayName } : {},
+		...ext.icon ? { icon: ext.icon } : {}
+	},
+	size: "sm"
+});
+const badgeOf = (ext) => ext.error ? null : /* @__PURE__ */ jsx(ExtensionBadge, { extension: ext });
+const statusOf = (ext) => ext.error ? /* @__PURE__ */ jsx(ExtensionErrorChip, { extension: ext }) : void 0;
 /**
-* An extension row's controls: Edit, Update, Remove (asks first), then its folder.
+* An extension row's controls: Edit, Update, Remove (asks first), then its folder. With
+* `onChangeOrigin`, a right click on Update or the arrow beside it opens "Update from <origin>"
+* and "Change origin…".
 *
 * @param props - The `extension`, its busy and armed states, and the actions it offers.
 */
-function ExtensionActions({ extension: ext, busy, armed, onArm, onEdit, onUpdate, onRemove }) {
+function ExtensionActions({ extension: ext, busy, armed, onArm, onEdit, onUpdate, onChangeOrigin, onRemove }) {
 	const l = useExtensionsSectionLabels();
+	const arrow = useRef(null);
+	const [menu, setMenu] = useState(null);
+	const hasMenu = Boolean(onUpdate && onChangeOrigin);
+	const items = hasMenu && onUpdate && onChangeOrigin ? [{
+		id: "update",
+		label: ext.origin ? l.extensionsSectionUpdateFrom(ext.origin.label) : l.extensionsSectionUpdate,
+		disabled: busy,
+		onSelect: onUpdate
+	}, {
+		id: "origin",
+		label: l.extensionsSectionChangeOrigin,
+		disabled: busy,
+		onSelect: onChangeOrigin
+	}] : [];
 	if (armed && onRemove) return /* @__PURE__ */ jsxs("span", {
 		className: "flex items-center gap-1",
 		children: [/* @__PURE__ */ jsx("button", {
@@ -290,13 +443,43 @@ function ExtensionActions({ extension: ext, busy, armed, onArm, onEdit, onUpdate
 				className: BTN_SECONDARY,
 				children: l.extensionsSectionEdit
 			}),
-			onUpdate && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onUpdate,
-				disabled: busy,
-				title: l.extensionsSectionUpdateTitle,
-				className: BTN_SECONDARY,
-				children: busy ? l.extensionsSectionUpdateBusy : l.extensionsSectionUpdate
+			onUpdate && /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-0.5",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onUpdate,
+						onContextMenu: hasMenu ? (event) => {
+							event.preventDefault();
+							setMenu({
+								x: event.clientX,
+								y: event.clientY
+							});
+						} : void 0,
+						disabled: busy,
+						title: l.extensionsSectionUpdateTitle,
+						className: BTN_SECONDARY,
+						children: busy ? l.extensionsSectionUpdateBusy : l.extensionsSectionUpdate
+					}),
+					hasMenu && /* @__PURE__ */ jsx(IconButton, {
+						ref: arrow,
+						icon: "i-ph-caret-down",
+						label: l.extensionsSectionUpdateMenu(ext.displayName ?? ext.name),
+						size: "sm",
+						disabled: busy,
+						active: menu !== null,
+						"aria-haspopup": "menu",
+						"aria-expanded": menu !== null,
+						onClick: () => setMenu((open) => open ? null : "arrow")
+					}),
+					hasMenu && /* @__PURE__ */ jsx(RowActionsMenu, {
+						open: menu !== null,
+						anchorRef: arrow,
+						position: typeof menu === "object" ? menu : null,
+						onClose: () => setMenu(null),
+						items
+					})
+				]
 			}),
 			onRemove && /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -313,22 +496,30 @@ function ExtensionActions({ extension: ext, busy, armed, onArm, onEdit, onUpdate
 		]
 	});
 }
-/** The mark of a native extension, as the setup wizard draws it. Other extensions show nothing. */
-function NativeMark({ name }) {
-	const native = nativeExtensionByName(name);
-	return native ? /* @__PURE__ */ jsx(ExtensionMark, {
-		entry: native,
-		size: "sm"
-	}) : null;
-}
 function ExtensionBadge({ extension }) {
 	const l = useExtensionsSectionLabels();
-	if (extension.error) return /* @__PURE__ */ jsx(MetaChip, {
-		tone: "danger",
-		children: l.extensionsSectionErrorBadge
-	});
 	return /* @__PURE__ */ jsx(MetaChip, { children: l.extensionsSectionSource(extension.source, extension.version) });
 }
+/**
+* The red "error" chip of an extension that failed to load. It is focusable, and its tooltip says
+* why on hover and keyboard focus; the tooltip describes it (`aria-describedby`).
+*/
+function ExtensionErrorChip({ extension }) {
+	const l = useExtensionsSectionLabels();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label: extension.error,
+		portal: true,
+		maxWidth: 360,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "inline-flex p-0 bg-transparent border-0 rounded-zg-xs cursor-help zg-focus-ring",
+			children: /* @__PURE__ */ jsx(MetaChip, {
+				tone: "danger",
+				children: l.extensionsSectionErrorBadge
+			})
+		})
+	});
+}
 /** The install form: a source spec (GitHub / npm / local path), an optional extension name, the scope. */
 function ExtensionInstallForm({ onSubmit }) {
 	const l = useExtensionsSectionLabels();

package/dist/settings/sections/extensions/labels.d.ts

@@ -1,7 +1,4 @@
 //#region src/settings/sections/extensions/labels.d.ts
-/**
- * The Extensions section's strings. Overridable through `LabelsProvider`.
- */
 /** The default English strings of the Extensions section. */
 declare const DEFAULT_EXTENSIONS_SECTION_LABELS: {
   extensionsSectionInstall: string;
@@ -11,14 +8,22 @@ declare const DEFAULT_EXTENSIONS_SECTION_LABELS: {
   extensionsSectionInstalling: (source: string) => string;
   extensionsSectionUpdating: (name: string) => string;
   extensionsSectionRemoving: (name: string) => string;
-  extensionsSectionOneFailed: (name: string, error: string) => string;
-  extensionsSectionManyFailed: (count: number) => string;
   extensionsSectionConfirmRemove: string;
   extensionsSectionKeep: string;
   extensionsSectionEdit: string;
   extensionsSectionUpdate: string;
   extensionsSectionUpdateBusy: string;
   extensionsSectionUpdateTitle: string;
+  extensionsSectionUpdateMenu: (name: string) => string;
+  extensionsSectionUpdateFrom: (origin: string) => string;
+  extensionsSectionChangeOrigin: string;
+  extensionsSectionChangeOriginTitle: (name: string) => string;
+  extensionsSectionChangeOriginHint: string;
+  extensionsSectionChangeOriginField: string;
+  extensionsSectionChangeOriginSubmit: string;
+  extensionsSectionChangeOriginBusy: string;
+  extensionsSectionChangeOriginFound: string;
+  extensionsSectionChangeOriginMismatch: (name: string) => string;
   extensionsSectionRemove: string;
   extensionsSectionRemoveTitle: (dir: string) => string;
   extensionsSectionEmpty: string;
@@ -31,6 +36,22 @@ declare const DEFAULT_EXTENSIONS_SECTION_LABELS: {
   extensionsSectionNamePlaceholder: string;
   extensionsSectionProjectHint: string;
   extensionsSectionUserHint: string;
+  extensionsSectionDefaultSource: string;
+  extensionsSectionDefaultSourceDescription: string;
+  extensionsSectionUnreachable: string;
+  extensionsSectionBrowseCount: (count: number) => string;
+  extensionsSectionBrowseEmpty: string;
+  extensionsSectionBrowseEmptyHint: string;
+  extensionsSectionBrowseFilter: string;
+  extensionsSectionBrowseNoMatch: string;
+  extensionsSectionBrowseVersion: (version: string) => string;
+  extensionsSectionInstalled: string;
+  extensionsSectionPicked: (count: number) => string;
+  extensionsSectionInstallPicked: (count: number) => string;
+  extensionsSectionClear: string;
+  extensionsSectionScopeUser: string;
+  extensionsSectionScopeProject: string;
+  extensionsSectionAccessHint: string;
 };
 /** The shape of the Extensions section's label dictionary. */
 type ExtensionsSectionLabels = typeof DEFAULT_EXTENSIONS_SECTION_LABELS;