zidane-ui 9.0.4 → 9.1.3

package/dist/settings/SettingsNav.js

@@ -1,3 +1,4 @@
+import { BrandMark, hasBrandMark } from "../components/BrandMark.js";
 import { MenuRow } from "../components/Menu.js";
 import { useSettingsLabels } from "./SettingsProvider.js";
 import { jsx } from "react/jsx-runtime";
@@ -5,23 +6,92 @@ import { useRef } from "react";
 //#region src/settings/SettingsNav.tsx
 /**
 * The settings nav: the top-level sections, each with the sections grouped
-* under it (`group`) listed indented beneath, all shown at once, each with
-* an optional count (how many settings or listed things it holds). ↑/↓
+* under it (`group`) listed indented beneath (and theirs beneath them, one
+* step further: an extension's page under Extensions), all shown at once, each with
+* an optional count (how many settings or listed things it holds) and its
+* glyph in the icon's box: its `mark` (a logo), else its icon, else a letter
+* badge of its `monogram`. The logo and the badge are the extension mark the
+* Extensions rows draw (`BrandMark`), one em square. ↑/↓
 * wraps through the rows (the vertical tablist pattern) and focus follows
 * selection.
 */
-/** A grouped section sits indented under its entry. */
-const SUB_SECTION_STYLE = { paddingInlineStart: "1.75rem" };
+/** A grouped section sits indented under its entry: its icon's center on the entry's label edge. */
+const SUB_SECTION_REM = 1.625;
+const subSectionStyle = (depth) => depth > 0 ? { paddingInlineStart: `${SUB_SECTION_REM * depth}rem` } : void 0;
+/**
+* The glyph box every nav row's icon spans: an icon class at `text-sm` draws
+* 1em × 1em (the icon preset's `width` / `height`).
+*/
+const GLYPH_BOX = "text-sm";
+/**
+* A section with a logo, or without an icon: the extension mark (`BrandMark`
+* at `xs`, one em) in a square the size of an icon (`GLYPH_BOX` at 1em × 1em):
+* the logo, else the monogram's first letter. The mark is decorative: the
+* tab's text stays its title.
+*/
+const MARK_BOX_CLASS = `${GLYPH_BOX} w-[1em] h-[1em] shrink-0 inline-flex items-center justify-center rounded-zg-xs`;
+const SELECTED_GLYPH = "text-[var(--zg-text)]";
+/**
+* The letter a monogram badge shows: the first letter or digit of `word`, uppercase.
+*
+* @param word - The section's monogram (a display name).
+* @returns The letter, or `undefined` when `word` has none.
+*/
+function monogramLetter(word) {
+	const match = word ? /[\p{L}\p{N}]/u.exec(word) : null;
+	return match ? match[0].toLocaleUpperCase() : void 0;
+}
+/** Whether a row draws a glyph: a logo, an icon, or a monogram with a letter. */
+const hasGlyph = (section) => Boolean(section.mark?.brand || section.icon || monogramLetter(section.monogram));
+/** A row's glyph: its logo, else its icon, else its monogram's letter badge, else none. */
+function NavGlyph({ icon, monogram, mark, title, selected }) {
+	const brand = mark?.brand && hasBrandMark(mark.brand) ? mark.brand : void 0;
+	if (!brand && icon) return /* @__PURE__ */ jsx("span", {
+		className: `${icon} ${GLYPH_BOX} ${selected ? SELECTED_GLYPH : ""}`,
+		"aria-hidden": true
+	});
+	const letter = monogramLetter(monogram ?? title);
+	if (!brand && !monogramLetter(monogram)) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: `${MARK_BOX_CLASS} ${selected ? SELECTED_GLYPH : ""}`,
+		...brand ? {} : { "data-monogram": letter },
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx(BrandMark, {
+			brand,
+			label: monogram ?? title,
+			letter,
+			size: "xs"
+		})
+	});
+}
 const ROW_CLASS = "shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--zg-ring)]";
 /**
-* The nav's rows in order: each top-level section, then the sections grouped under it.
+* The nav's rows in order: each top-level section, then the sections grouped under it, each followed
+* by the ones grouped under it in turn.
 *
 * @param sections - The sections, in the app's order.
 * @returns The rows as the nav lists them.
 */
 function navOrder(sections) {
+	return navRows(sections).map((row) => row.section);
+}
+/** {@link navOrder}'s rows with how deep each sits (0: top-level). A group cycle lists its sections once, top-level. */
+function navRows(sections) {
 	const ids = new Set(sections.map((section) => section.id));
-	return sections.filter((section) => !section.group || !ids.has(section.group)).flatMap((entry) => [entry, ...sections.filter((section) => section.group === entry.id)]);
+	const out = [];
+	const seen = /* @__PURE__ */ new Set();
+	const visit = (section, depth) => {
+		if (seen.has(section)) return;
+		seen.add(section);
+		out.push({
+			section,
+			depth
+		});
+		for (const child of sections) if (child.group === section.id) visit(child, depth + 1);
+	};
+	for (const section of sections) if (!section.group || !ids.has(section.group)) visit(section, 0);
+	for (const section of sections) visit(section, 0);
+	return out;
 }
 const NO_COUNTS = {};
 /**
@@ -32,8 +102,8 @@ const NO_COUNTS = {};
 function SettingsNav({ sections, active, counts = NO_COUNTS, onSelect, className, style }) {
 	const labels = useSettingsLabels();
 	const tabRefs = useRef({});
-	const rows = navOrder(sections);
-	const ids = new Set(sections.map((section) => section.id));
+	const listed = navRows(sections);
+	const rows = listed.map((row) => row.section);
 	const onKeyDown = (e) => {
 		const delta = e.key === "ArrowDown" ? 1 : e.key === "ArrowUp" ? -1 : 0;
 		if (delta === 0 || rows.length === 0) return;
@@ -49,7 +119,7 @@ function SettingsNav({ sections, active, counts = NO_COUNTS, onSelect, className
 		"aria-label": labels.settingsNavLabel,
 		className: ["flex-1 flex flex-col gap-0.5 min-h-0 overflow-y-auto", className].filter(Boolean).join(" "),
 		style,
-		children: rows.map((section) => {
+		children: listed.map(({ section, depth }) => {
 			const selected = section.id === active;
 			const count = counts[section.id];
 			return /* @__PURE__ */ jsx(MenuRow, {
@@ -61,9 +131,12 @@ function SettingsNav({ sections, active, counts = NO_COUNTS, onSelect, className
 				tabIndex: selected ? 0 : -1,
 				onClick: () => onSelect(section.id),
 				onKeyDown,
-				icon: section.icon ? /* @__PURE__ */ jsx("span", {
-					className: `${section.icon} text-sm ${selected ? "text-[var(--zg-text)]" : ""}`,
-					"aria-hidden": true
+				icon: hasGlyph(section) ? /* @__PURE__ */ jsx(NavGlyph, {
+					icon: section.icon,
+					monogram: section.monogram,
+					mark: section.mark,
+					title: section.title,
+					selected
 				}) : void 0,
 				title: section.title,
 				trailing: count ? /* @__PURE__ */ jsx("span", {
@@ -71,7 +144,7 @@ function SettingsNav({ sections, active, counts = NO_COUNTS, onSelect, className
 					className: "zg-meta tabular-nums text-[var(--zg-text-subtle)]",
 					children: count
 				}) : void 0,
-				style: section.group && ids.has(section.group) ? SUB_SECTION_STYLE : void 0,
+				style: subSectionStyle(depth),
 				className: `${ROW_CLASS} ${selected ? "font-medium" : "text-[var(--zg-text-muted)] hover:text-[var(--zg-text)]"}`
 			}, section.id);
 		})

package/dist/settings/SettingsRowsPage.d.ts

@@ -1,4 +1,4 @@
-import { SettingsAction, SettingsCustomRowId, SettingsSectionsPage } from "./headless/layout.js";
+import { SettingsAction, SettingsCustomRowId, SettingsSectionNoteId, SettingsSectionsPage } from "./headless/layout.js";
 import { CSSProperties, ReactNode } from "react";
 import { Settings } from "zidane/chat";
 //#region src/settings/SettingsRowsPage.d.ts
@@ -25,7 +25,7 @@ interface SettingsRowsPageProps {
   /** The Spaces section (`{ panel: 'spaces' }`). */
   spaces?: () => ReactNode;
   /** A note under a section (`note`), by its id. */
-  notes?: Readonly<Partial<Record<'terminalDaemon', () => ReactNode>>>;
+  notes?: Readonly<Partial<Record<SettingsSectionNoteId, () => ReactNode>>>;
   /** Classes merged on the page's column. */
   className?: string;
   /** Inline styles on the page's column. */

package/dist/settings/SettingsShell.d.ts

@@ -8,6 +8,8 @@ interface SettingsFrameProps {
   title: string;
   /** The open section's description. */
   description?: string;
+  /** The open section's mark, before its title and description (`SettingsSection.lead`). */
+  lead?: ReactNode;
   /** The search field. */
   search: ReactNode;
   /** The section nav. */
@@ -64,7 +66,7 @@ declare function SettingsShell({ sections, initialSection, initialFocus, onSelec
  *
  * @param props - What the shell hands its frame, plus the root's `className` and `style`.
  */
-declare function SettingsFrame({ title, description, search, nav, footer, headerActions, children, onClose, className, style }: SettingsFrameProps & {
+declare function SettingsFrame({ title, description, lead, search, nav, footer, headerActions, children, onClose, className, style }: SettingsFrameProps & {
   /** Classes merged on the frame's root. */
   className?: string;
   /** Inline styles on the frame's root. */

package/dist/settings/SettingsShell.js

@@ -83,7 +83,7 @@ function SettingsShell({ sections, initialSection, initialFocus, onSelect, count
 	}, [focusKey, activeId]);
 	const search = /* @__PURE__ */ jsxs("div", {
 		className: "relative shrink-0",
-		children: [/* @__PURE__ */ jsx("span", { className: "i-ph-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-[var(--zg-text-muted)] pointer-events-none" }), /* @__PURE__ */ jsx("input", {
+		children: [/* @__PURE__ */ jsx("span", { className: "i-ph-magnifying-glass absolute left-1.5 top-1/2 -translate-y-1/2 text-xs text-[var(--zg-text-muted)] pointer-events-none" }), /* @__PURE__ */ jsx("input", {
 			type: "text",
 			value: query,
 			onChange: (e) => setQuery(e.target.value),
@@ -163,6 +163,7 @@ function SettingsShell({ sections, initialSection, initialFocus, onSelect, count
 	const frame = {
 		title: active?.title ?? "",
 		...active?.description !== void 0 ? { description: active.description } : {},
+		...active?.lead !== void 0 ? { lead: active.lead } : {},
 		search,
 		nav,
 		footer,
@@ -201,7 +202,7 @@ function SectionScope({ id, visible, select, slot, children }) {
 *
 * @param props - What the shell hands its frame, plus the root's `className` and `style`.
 */
-function SettingsFrame({ title, description, search, nav, footer, headerActions, children, onClose, className, style }) {
+function SettingsFrame({ title, description, lead, search, nav, footer, headerActions, children, onClose, className, style }) {
 	const labels = useSettingsLabels();
 	useEffect(() => {
 		if (!onClose) return;
@@ -246,13 +247,19 @@ function SettingsFrame({ title, description, search, nav, footer, headerActions,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "shrink-0 flex items-end gap-3 px-6 pt-4 pb-3 border-b border-[var(--zg-hairline)]",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex-1 min-w-0",
-					children: [/* @__PURE__ */ jsx("h2", {
-						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", {
+							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
+						})]
 					})]
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex items-center gap-2 shrink-0 pb-0.5",

package/dist/settings/headless/catalog.js

@@ -44,6 +44,11 @@ const SETTINGS_TOGGLES = withCanonicalGates([
 		label: "Remote hosts",
 		description: "Run sessions on other machines through zidane-server."
 	},
+	{
+		key: "projectHome",
+		label: "Project home",
+		description: "Click a project in the sidebar to open its home: a new chat with the project's recent sessions, usage and blocks from extensions."
+	},
 	{
 		key: "orchestration",
 		label: "Main session",
@@ -100,6 +105,11 @@ const SETTINGS_TOGGLES = withCanonicalGates([
 		label: "Show codemode tool calls",
 		description: "List the calls each script makes under its row. Calls that start a subagent always show."
 	},
+	{
+		key: "codemodeStreamProgress",
+		label: "Stream progress",
+		description: "Show which line of a script runs, how many of its calls are done, and what it prints, while it runs."
+	},
 	{
 		key: "decisions",
 		label: "Decisions",
@@ -110,6 +120,11 @@ const SETTINGS_TOGGLES = withCanonicalGates([
 		label: "Auto-update session titles",
 		description: "Title sessions after their first run and rename them when the topic changes. Keeps titles you typed."
 	},
+	{
+		key: "runEstimates",
+		label: "Estimate time remaining",
+		description: "Show how long running sessions and subagents have left, from a quick decision when a run starts. Uses tokens."
+	},
 	{
 		key: "subagentModels",
 		label: "Allow subagents to use different models",
@@ -240,6 +255,11 @@ const SETTINGS_TOGGLES = withCanonicalGates([
 		label: "Keep scroll position",
 		description: "Reopen each conversation where you left it."
 	},
+	{
+		key: "renderDiagrams",
+		label: "Diagrams",
+		description: "Draw Mermaid code blocks in replies as diagrams in your theme's colors. Off shows their code."
+	},
 	{
 		key: "browser",
 		label: "Browser tab",

package/dist/settings/headless/fixture-sections.d.ts

@@ -1,5 +1,5 @@
 import { SettingsCatalogKind, SettingsEnvironmentsHost, SettingsExtension, SettingsExtensionAction, SettingsExtensionActionResult, SettingsExtensionActionStatus, SettingsExtensionsHost, SettingsHostCatalog, SettingsInstructionsHost, SettingsLogsHost, SettingsPlugin, SettingsPluginsHost, SettingsSkillsHost } from "./sections-host.js";
-import { LogRecord, SkillSourceListing } from "zidane/chat/pure";
+import { ExtensionSourceListing, LogRecord, SkillSourceListing } from "zidane/chat/pure";
 import { ContextSegmentsReport, EnvironmentDescriptor, EnvironmentSettingsChange } from "zidane/chat";
 import { HostCatalogExtension, HostCatalogMcp, HostCatalogPlugin, HostCatalogSkill } from "zidane/ipc";
 import { SkillConfig, WireExtensionConfigSchema } from "zidane";
@@ -34,6 +34,13 @@ interface FixtureSettingsSectionsData {
   skillSources?: Record<string, SkillSourceListing>;
   /** The extensions (for every folder). */
   extensions?: SettingsExtension[];
+  /**
+   * What a source spec lists, for the extensions browser (with `extensions`, and with `hostCatalog`
+   * its browser and Change origin). An unlisted spec
+   * answers a `not-found` listing. `changeOrigin` moves an extension to a listed source holding its
+   * name, else fails as the installer does (`name-mismatch`, naming what it found).
+   */
+  extensionSources?: Record<string, ExtensionSourceListing>;
   /** The options and actions the enabled extensions declare (with `extensions`); each key offers its member. */
   extensionOptions?: FixtureExtensionOptions;
   /** The plugins (for every folder). */
@@ -48,6 +55,8 @@ interface FixtureSettingsSectionsData {
   hostCatalog?: FixtureHostCatalogs | null;
   /** The host takes installs from this connection. Default: true. */
   hostInstalls?: boolean;
+  /** Host installs that fail, by spec: the error each rejects with. */
+  hostInstallFailures?: Record<string, string>;
 }
 /** Changes the fixture's catalogs from outside and reads what actions did. */
 interface FixtureSettingsSectionsControl {

package/dist/settings/headless/fixture-sections.js

@@ -100,6 +100,41 @@ function createFixtureSettingsSections(data = {}) {
 				return { name };
 			},
 			update: async (_cwd, extension) => `${extension.name} is up to date`,
+			browse: async (input) => held.extensionSources?.[input] ?? {
+				input,
+				source: {
+					kind: "github",
+					label: input
+				},
+				extensions: [],
+				error: {
+					code: "not-found",
+					message: `Nothing at ${input}`
+				}
+			},
+			changeOrigin: async (_cwd, extension, source, onProgress) => {
+				const listing = held.extensionSources?.[source];
+				const found = listing?.extensions.map((e) => e.name) ?? [];
+				if (!listing || !found.includes(extension.name)) {
+					const names = found.length > 0 ? `Found: ${found.join(", ")}.` : "It holds no extension.";
+					throw {
+						kind: "failed",
+						detail: `${source} has no extension named "${extension.name}". ${names}`,
+						found
+					};
+				}
+				onProgress?.(`installing ${extension.name} from ${source}`);
+				const origin = {
+					spec: source,
+					label: listing.source.label,
+					source: `github:${listing.source.label}`
+				};
+				held.extensions = (held.extensions ?? []).map((e) => e.name === extension.name ? {
+					...e,
+					origin
+				} : e);
+				return `${extension.name} now updates from ${listing.source.label}`;
+			},
 			remove: async (_cwd, extension) => {
 				held.extensions = (held.extensions ?? []).filter((e) => e.name !== extension.name);
 			},
@@ -181,10 +216,15 @@ function createFixtureSettingsSections(data = {}) {
 				return () => catalogListeners.delete(listener);
 			},
 			installs: async () => installs,
-			install: async (kind, spec) => {
+			install: async (kind, spec, options) => {
 				const all = catalog();
 				if (!all) return;
-				const name = spec.split("/").pop() ?? spec;
+				const failure = held.hostInstallFailures?.[spec];
+				if (failure) throw {
+					kind: "failed",
+					detail: failure
+				};
+				const name = options?.extension ?? spec.split("/").pop() ?? spec;
 				if (kind === "skill") {
 					all.skills.push({
 						name,
@@ -196,11 +236,17 @@ function createFixtureSettingsSections(data = {}) {
 					});
 					changed("skills");
 				} else {
+					const origin = {
+						spec,
+						label: spec,
+						source: `github:${spec}`
+					};
 					all.extensions.push({
 						name,
 						source: "user",
 						enabled: true,
-						toggleable: true
+						toggleable: true,
+						origin
 					});
 					changed("extensions");
 				}
@@ -215,6 +261,45 @@ function createFixtureSettingsSections(data = {}) {
 			update: async () => void 0
 		};
 	}
+	if (out.hostCatalog && held.extensionSources) {
+		const catalog = () => held.hostCatalog;
+		out.hostCatalog = {
+			...out.hostCatalog,
+			browse: async (input) => held.extensionSources?.[input] ?? {
+				input,
+				source: {
+					kind: "github",
+					label: input
+				},
+				extensions: [],
+				error: {
+					code: "not-found",
+					message: `Nothing at ${input}`
+				}
+			},
+			changeOrigin: async (name, source) => {
+				const listing = held.extensionSources?.[source];
+				const found = listing?.extensions.map((e) => e.name) ?? [];
+				if (!listing || !found.includes(name)) throw {
+					kind: "failed",
+					detail: `${source} has no extension named "${name}". ${found.length > 0 ? `Found: ${found.join(", ")}.` : "It holds no extension."}`,
+					found
+				};
+				const origin = {
+					spec: source,
+					label: listing.source.label,
+					source: `github:${listing.source.label}`
+				};
+				const all = catalog();
+				if (all) all.extensions = all.extensions.map((e) => e.name === name ? {
+					...e,
+					origin
+				} : e);
+				changed("extensions");
+				return `${name} now updates from ${listing.source.label}`;
+			}
+		};
+	}
 	return out;
 }
 //#endregion

package/dist/settings/headless/host.d.ts

@@ -21,6 +21,8 @@ interface SettingsError {
   kind: SettingsErrorKind;
   /** What the host said, when it said something. */
   detail?: string;
+  /** The extensions a source holds, when an install found none of the name it needed (`name-mismatch`). */
+  found?: readonly string[];
 }
 /** The settings document as the host holds it. */
 type SettingsDocument = {

package/dist/settings/headless/index.d.ts

@@ -6,12 +6,12 @@ import { SettingsClaudeImportCopy, SettingsClaudeImportDetect, SettingsClaudeImp
 import { PERF_HISTORY, PerfChannel, PerfChannelDirection, PerfGpu, PerfHotFunction, PerfLag, PerfMonitor, PerfMonitorState, PerfOrigin, PerfOsThread, PerfProcess, PerfProcessKind, PerfProcessMcp, PerfProcessNode, PerfProcessRow, PerfProcessSession, PerfProfile, PerfProfileError, PerfProfileOutcome, PerfProfileTarget, PerfSample, PerfSessionGroup, PerfSlowFrame, PerfThread, PerfTotals, PerfWatchError, SettingsPerformanceHost, createPerfMonitor, formatDuration, formatMemory, formatPercent, hasLaunched, nestProcesses, perfSeries, processGroups, processTree, sessionGroups } from "./performance.js";
 import { SettingsDocument, SettingsError, SettingsErrorKind, SettingsHost, isSettingsError, toSettingsError } from "./host.js";
 import { SettingsSearchEntry, SettingsSection } from "./registry.js";
-import { SettingsEnabledListKey, enabledNames, toggleEnabled } from "./enabled.js";
 import { BooleanSettingKey, DEFAULT_SETTINGS, SETTINGS_CHOICES, SETTINGS_TOGGLES, SettingsChoice, SettingsToggle, nextOption } from "./catalog.js";
-import { DEFAULT_SETTINGS_LABELS, SettingsLabels } from "./labels.js";
-import { HIDDEN_TABLE_KEYS, SETTINGS_PAGES, SettingsAction, SettingsActionId, SettingsCustomRowId, SettingsPage, SettingsPageSection, SettingsPanelId, SettingsPanelPage, SettingsRow, SettingsSectionsPage, SettingsSectionsPageId, SettingsTabId, SettingsTopId, describedOn, isPanelPage, settingsCount, shown, visiblePages } from "./layout.js";
+import { HIDDEN_TABLE_KEYS, SETTINGS_PAGES, SettingsAction, SettingsActionId, SettingsCustomRowId, SettingsPage, SettingsPageSection, SettingsPanelId, SettingsPanelPage, SettingsRow, SettingsSectionNoteId, SettingsSectionsPage, SettingsSectionsPageId, SettingsTabId, SettingsTopId, describedOn, isPanelPage, settingsCount, shown, visiblePages } from "./layout.js";
 import { LayoutSearchContext, SETTINGS_CHOICE_BY_KEY, SETTINGS_TOGGLE_BY_KEY, SettingsSearchHit, layoutSearchEntries, searchSettings, sectionSearchHits, settingsSearchHits } from "./search.js";
+import { SettingsEnabledListKey, enabledNames, toggleEnabled } from "./enabled.js";
+import { DEFAULT_SETTINGS_LABELS, SettingsLabels } from "./labels.js";
 import { SettingsResourceOptions, createSettingsResource, keyedSettingsResources } from "./resource.js";
 import { listLength, settingsPageCounts } from "./page-counts.js";
 import { LayoutSectionsOptions, layoutSections } from "./layout-sections.js";
-export { BooleanSettingKey, DEFAULT_SETTINGS, DEFAULT_SETTINGS_LABELS, HIDDEN_TABLE_KEYS, LayoutSearchContext, LayoutSectionsOptions, PERF_HISTORY, PerfChannel, PerfChannelDirection, PerfGpu, PerfHotFunction, PerfLag, PerfMonitor, PerfMonitorState, PerfOrigin, PerfOsThread, PerfProcess, PerfProcessKind, PerfProcessMcp, PerfProcessNode, PerfProcessRow, PerfProcessSession, PerfProfile, PerfProfileError, PerfProfileOutcome, PerfProfileTarget, PerfSample, PerfSessionGroup, PerfSlowFrame, PerfThread, PerfTotals, PerfWatchError, SETTINGS_CHOICES, SETTINGS_CHOICE_BY_KEY, SETTINGS_PAGES, SETTINGS_TOGGLES, SETTINGS_TOGGLE_BY_KEY, SettingsAction, SettingsActionId, SettingsCatalogEntries, SettingsCatalogInstallKind, SettingsCatalogKind, SettingsChoice, SettingsClaudeImportCopy, SettingsClaudeImportDetect, SettingsClaudeImportHost, SettingsClaudeImportSelection, SettingsClaudeImportSummary, SettingsCredential, SettingsCustomRowId, SettingsDecisionModel, SettingsDocument, SettingsEnabledListKey, SettingsEnvironmentsHost, SettingsError, SettingsErrorKind, SettingsExtension, SettingsExtensionAction, SettingsExtensionActionResult, SettingsExtensionActionStatus, SettingsExtensionCreate, SettingsExtensionCreated, SettingsExtensionInstall, SettingsExtensionsHost, SettingsFile, SettingsFileWrite, SettingsHost, SettingsHostCatalog, SettingsInstallScope, SettingsInstructionsHost, SettingsLabels, SettingsLoad, SettingsLogsHost, SettingsMcpAuthState, SettingsMcpBadge, SettingsMcpHost, SettingsMcpInstance, SettingsMcpRunning, SettingsMcpServer, SettingsMcpTest, SettingsMcpTool, SettingsModelTest, SettingsModelsHost, SettingsPage, SettingsPageSection, SettingsPanelId, SettingsPanelPage, SettingsPaths, SettingsPerformanceHost, SettingsPlugin, SettingsPluginsHost, SettingsPreferredCredential, SettingsProvider, SettingsProviderField, SettingsProvidersHost, SettingsResource, SettingsResourceOptions, SettingsRow, SettingsSearchEntry, SettingsSearchHit, SettingsSection, SettingsSectionsPage, SettingsSectionsPageId, SettingsSignInOptions, SettingsSkillInstall, SettingsSkillsHost, SettingsTabId, SettingsToggle, SettingsTopId, createPerfMonitor, createSettingsResource, describedOn, enabledMcpTools, enabledMcpsAfterAdd, enabledNames, formatDuration, formatMemory, formatPercent, hasCredentialChoice, hasLaunched, isPanelPage, isSettingsError, keyedSettingsResources, layoutSearchEntries, layoutSections, listLength, mcpBadge, mcpRunning, mcpSettingsAfterRemove, mcpShareable, mcpSharedNow, mcpSharingWith, nestProcesses, nextOption, perfSeries, processGroups, processTree, searchSettings, sectionSearchHits, sessionGroups, settingsCount, settingsMcpServerOf, settingsPageCounts, settingsSearchHits, shown, toSettingsError, toggleEnabled, toggleMcpTool, visiblePages };
+export { BooleanSettingKey, DEFAULT_SETTINGS, DEFAULT_SETTINGS_LABELS, HIDDEN_TABLE_KEYS, LayoutSearchContext, LayoutSectionsOptions, PERF_HISTORY, PerfChannel, PerfChannelDirection, PerfGpu, PerfHotFunction, PerfLag, PerfMonitor, PerfMonitorState, PerfOrigin, PerfOsThread, PerfProcess, PerfProcessKind, PerfProcessMcp, PerfProcessNode, PerfProcessRow, PerfProcessSession, PerfProfile, PerfProfileError, PerfProfileOutcome, PerfProfileTarget, PerfSample, PerfSessionGroup, PerfSlowFrame, PerfThread, PerfTotals, PerfWatchError, SETTINGS_CHOICES, SETTINGS_CHOICE_BY_KEY, SETTINGS_PAGES, SETTINGS_TOGGLES, SETTINGS_TOGGLE_BY_KEY, SettingsAction, SettingsActionId, SettingsCatalogEntries, SettingsCatalogInstallKind, SettingsCatalogKind, SettingsChoice, SettingsClaudeImportCopy, SettingsClaudeImportDetect, SettingsClaudeImportHost, SettingsClaudeImportSelection, SettingsClaudeImportSummary, SettingsCredential, SettingsCustomRowId, SettingsDecisionModel, SettingsDocument, SettingsEnabledListKey, SettingsEnvironmentsHost, SettingsError, SettingsErrorKind, SettingsExtension, SettingsExtensionAction, SettingsExtensionActionResult, SettingsExtensionActionStatus, SettingsExtensionCreate, SettingsExtensionCreated, SettingsExtensionInstall, SettingsExtensionsHost, SettingsFile, SettingsFileWrite, SettingsHost, SettingsHostCatalog, SettingsInstallScope, SettingsInstructionsHost, SettingsLabels, SettingsLoad, SettingsLogsHost, SettingsMcpAuthState, SettingsMcpBadge, SettingsMcpHost, SettingsMcpInstance, SettingsMcpRunning, SettingsMcpServer, SettingsMcpTest, SettingsMcpTool, SettingsModelTest, SettingsModelsHost, SettingsPage, SettingsPageSection, SettingsPanelId, SettingsPanelPage, SettingsPaths, SettingsPerformanceHost, SettingsPlugin, SettingsPluginsHost, SettingsPreferredCredential, SettingsProvider, SettingsProviderField, SettingsProvidersHost, SettingsResource, SettingsResourceOptions, SettingsRow, SettingsSearchEntry, SettingsSearchHit, SettingsSection, SettingsSectionNoteId, SettingsSectionsPage, SettingsSectionsPageId, SettingsSignInOptions, SettingsSkillInstall, SettingsSkillsHost, SettingsTabId, SettingsToggle, SettingsTopId, createPerfMonitor, createSettingsResource, describedOn, enabledMcpTools, enabledMcpsAfterAdd, enabledNames, formatDuration, formatMemory, formatPercent, hasCredentialChoice, hasLaunched, isPanelPage, isSettingsError, keyedSettingsResources, layoutSearchEntries, layoutSections, listLength, mcpBadge, mcpRunning, mcpSettingsAfterRemove, mcpShareable, mcpSharedNow, mcpSharingWith, nestProcesses, nextOption, perfSeries, processGroups, processTree, searchSettings, sectionSearchHits, sessionGroups, settingsCount, settingsMcpServerOf, settingsPageCounts, settingsSearchHits, shown, toSettingsError, toggleEnabled, toggleMcpTool, visiblePages };

package/dist/settings/headless/index.js

@@ -1,8 +1,8 @@
 import { DEFAULT_SETTINGS, SETTINGS_CHOICES, SETTINGS_TOGGLES, nextOption } from "./catalog.js";
+import { DEFAULT_SETTINGS_LABELS } from "./labels.js";
 import { isSettingsError, toSettingsError } from "./host.js";
 import { createSettingsResource, keyedSettingsResources } from "./resource.js";
 import { enabledMcpTools, enabledMcpsAfterAdd, mcpBadge, mcpRunning, mcpSettingsAfterRemove, mcpShareable, mcpSharedNow, mcpSharingWith, settingsMcpServerOf, toggleMcpTool } from "./mcp.js";
-import { DEFAULT_SETTINGS_LABELS } from "./labels.js";
 import { hasCredentialChoice } from "./providers.js";
 import { enabledNames, toggleEnabled } from "./enabled.js";
 import { HIDDEN_TABLE_KEYS, SETTINGS_PAGES, describedOn, isPanelPage, settingsCount, shown, visiblePages } from "./layout.js";

package/dist/settings/headless/layout.d.ts

@@ -4,7 +4,7 @@ import { Settings } from "zidane/chat";
 /** Pages of rows. */
 type SettingsSectionsPageId = 'general' | 'agent' | 'interface' | 'advanced';
 /** The rail's entries. */
-type SettingsTopId = SettingsSectionsPageId | 'accounts';
+type SettingsTopId = SettingsSectionsPageId | 'accounts' | 'extensions';
 /** Pages drawn by one panel component, mounted on first visit and then kept alive (their async state survives). */
 type SettingsPanelId = 'instructions' | 'skills' | 'mcp' | 'plugins' | 'extensions' | 'environments' | 'appearance' | 'editor' | 'keybindings' | 'accounts' | 'hosts' | 'logs' | 'performance';
 /** Every page's id. */
@@ -38,12 +38,14 @@ type SettingsRow =
 } | {
   action: SettingsActionId;
 };
+/** Status lines an app draws under a section (`SettingsRowsPage`'s `notes`): the terminals' daemon, how the app updates. */
+type SettingsSectionNoteId = 'terminalDaemon' | 'updates';
 /** One titled section of a page of rows. */
 type SettingsPageSection = {
   title: string;
   rows: readonly SettingsRow[];
   /** A status line under the section. */
-  note?: 'terminalDaemon';
+  note?: SettingsSectionNoteId;
 } |
 /** A component that draws its own sections (Spaces). */
 {
@@ -86,7 +88,9 @@ type SettingsPage = SettingsSectionsPage | SettingsPanelPage;
 declare const HIDDEN_TABLE_KEYS: readonly ["theme", "targetFps"];
 /**
  * Every page: the rail's entries in order, then the sub-pages (each listed
- * under its `parent`). One flat literal: the website's evaluator skips spreads.
+ * under its `parent`). Extensions is an entry of its own, after Agent: the
+ * extensions' settings entries list under it (`useExtensionSettingsSections`).
+ * One flat literal: the website's evaluator skips spreads.
  */
 declare const SETTINGS_PAGES: readonly SettingsPage[];
 /**
@@ -143,4 +147,4 @@ declare function visiblePages(opts: {
  */
 declare function shown(part: SettingsPage | SettingsPageSection | SettingsRow, server: boolean, spacesOnServer?: boolean): boolean;
 //#endregion
-export { HIDDEN_TABLE_KEYS, SETTINGS_PAGES, SettingsAction, SettingsActionId, SettingsCustomRowId, SettingsPage, SettingsPageSection, SettingsPanelId, SettingsPanelPage, SettingsRow, SettingsSectionsPage, SettingsSectionsPageId, SettingsTabId, SettingsTopId, describedOn, isPanelPage, settingsCount, shown, visiblePages };
+export { HIDDEN_TABLE_KEYS, SETTINGS_PAGES, SettingsAction, SettingsActionId, SettingsCustomRowId, SettingsPage, SettingsPageSection, SettingsPanelId, SettingsPanelPage, SettingsRow, SettingsSectionNoteId, SettingsSectionsPage, SettingsSectionsPageId, SettingsTabId, SettingsTopId, describedOn, isPanelPage, settingsCount, shown, visiblePages };

package/dist/settings/headless/layout.js

@@ -3,7 +3,9 @@
 const HIDDEN_TABLE_KEYS = ["theme", "targetFps"];
 /**
 * Every page: the rail's entries in order, then the sub-pages (each listed
-* under its `parent`). One flat literal: the website's evaluator skips spreads.
+* under its `parent`). Extensions is an entry of its own, after Agent: the
+* extensions' settings entries list under it (`useExtensionSettingsSections`).
+* One flat literal: the website's evaluator skips spreads.
 */
 const SETTINGS_PAGES = [
 	{
@@ -18,7 +20,8 @@ const SETTINGS_PAGES = [
 			},
 			{
 				title: "Updates",
-				rows: [{ key: "checkForUpdates" }, { key: "autoInstallUpdates" }]
+				rows: [{ key: "checkForUpdates" }, { key: "autoInstallUpdates" }],
+				note: "updates"
 			},
 			{
 				title: "Notifications",
@@ -106,6 +109,7 @@ const SETTINGS_PAGES = [
 					{ key: "decisions" },
 					{ custom: "decisionModel" },
 					{ key: "autoTitle" },
+					{ key: "runEstimates" },
 					{
 						custom: "compactionModel",
 						search: [{
@@ -156,6 +160,16 @@ const SETTINGS_PAGES = [
 			}
 		]
 	},
+	{
+		id: "extensions",
+		label: "Extensions",
+		icon: "i-ph-puzzle-piece",
+		description: "Project and user extensions. Choose which ones can run.",
+		search: [{
+			label: "Extensions",
+			description: "Choose which extensions run."
+		}]
+	},
 	{
 		id: "interface",
 		label: "Interface",
@@ -188,7 +202,8 @@ const SETTINGS_PAGES = [
 					{ key: "showCacheNotices" },
 					{ key: "showTodoIndicator" },
 					{ key: "artifacts" },
-					{ key: "preserveScroll" }
+					{ key: "preserveScroll" },
+					{ key: "renderDiagrams" }
 				]
 			},
 			{
@@ -200,7 +215,8 @@ const SETTINGS_PAGES = [
 					{ key: "showToolAttachments" },
 					{ key: "groupToolCalls" },
 					{ key: "showFullShellOutput" },
-					{ key: "codemodeShowCalls" }
+					{ key: "codemodeShowCalls" },
+					{ key: "codemodeStreamProgress" }
 				]
 			},
 			{
@@ -276,7 +292,8 @@ const SETTINGS_PAGES = [
 			rows: [
 				{ key: "useDaemon" },
 				{ key: "remoteHosts" },
-				{ key: "orchestration" }
+				{ key: "orchestration" },
+				{ key: "projectHome" }
 			]
 		}, {
 			title: "Agent internals",
@@ -339,17 +356,6 @@ const SETTINGS_PAGES = [
 			description: "Choose which Agent Plugins load, with their skills and MCP servers."
 		}]
 	},
-	{
-		id: "extensions",
-		parent: "agent",
-		label: "Extensions",
-		icon: "i-ph-puzzle-piece",
-		description: "Project and user extensions. Choose which ones can run.",
-		search: [{
-			label: "Extensions",
-			description: "Choose which extensions run."
-		}]
-	},
 	{
 		id: "environments",
 		parent: "agent",

package/dist/settings/headless/registry.d.ts

@@ -18,6 +18,18 @@ interface SettingsSection {
   title: string;
   /** An icon class (UnoCSS icon, e.g. `i-ph-paint-brush`) the nav draws. */
   icon?: string;
+  /**
+   * Without an `icon`: the word whose first letter the nav draws as a letter
+   * badge in the icon's place (an extension's display name). Absent too: no glyph.
+   */
+  monogram?: string;
+  /**
+   * A logo the nav draws in the icon's box, before `icon` and `monogram` (an extension's native
+   * brand, a Simple Icons slug). `monogram` names it and stands in when the kit has no such logo.
+   */
+  mark?: {
+    brand: string;
+  };
   /**
    * The id of the top-level section this one is listed under (indented
    * beneath it in the nav, e.g. `'interface'` for Appearance). Absent: a
@@ -28,6 +40,8 @@ interface SettingsSection {
   keywords?: string[];
   /** Under the title in the header. */
   description?: string;
+  /** Drawn before the title and description in the header (an extension's mark). A ReactNode in the styled shell. */
+  lead?: unknown;
   /**
    * Search entries for the rows inside the section: each lands on the
    * section and, with a `key`, on the row carrying `data-setting-focus={key}`.