zidane-ui 9.1.6 → 9.1.9

package/dist/index.js

@@ -49,8 +49,10 @@ import { StepActions, StepFrame } from "./components/StepFrame.js";
 import { Stepper } from "./components/Stepper.js";
 import { SwatchPicker } from "./components/SwatchPicker.js";
 import { CountBadge, TabPill } from "./components/TabPill.js";
+import { ZidaneMark } from "./components/ZidaneMark.js";
 import { ThemeThumb } from "./components/ThemeThumb.js";
 import { ToggleCard } from "./components/ToggleCard.js";
+import { Restricted } from "./components/Restricted.js";
 import { MatchedTitle, PaletteIcon, PaletteList, PaletteOption, PaletteRow, defaultPaletteKeys } from "./components/palette/PaletteList.js";
 import { PalettePanel, paletteVerb } from "./components/palette/PalettePanel.js";
 import { HoverCard } from "./components/floating/HoverCard.js";
@@ -61,7 +63,7 @@ import { beginLayoutAnimation, isLayoutAnimating, pulseLayout, subscribeLayoutAn
 import { MotionProvider } from "./motion/provider.js";
 import { RollingText, readRollMs, rollCells } from "./motion/roll.js";
 import { SHIMMER_MS, syncShimmer } from "./motion/shimmer.js";
-import { HeldWidth, SmoothWidth } from "./motion/size.js";
+import { HeldWidth, SmoothHeight, SmoothWidth } from "./motion/size.js";
 import { Crossfade, Presence, useCadencedValue } from "./motion/swap.js";
 import { createCodeHighlighter } from "./code/highlighter.js";
 import { defaultShikiTheme, shikiThemeFor } from "./code/shiki-theme.js";
@@ -84,4 +86,4 @@ import { watchRuntimeIcons } from "./theme/runtime-icons.js";
 import { BUILTIN_THEMES, DEFAULT_THEME, resolveTheme } from "./theme/themes.js";
 import { themeCssVars, themeStylesheet } from "./theme/stylesheet.js";
 import { withoutTransitions } from "./theme/without-transitions.js";
-export { ACCENT_PRESETS, AddressBar, BRAND_MARKS, BTN_DANGER, BTN_DANGER_CONFIRM, BTN_LG_DANGER, BTN_LG_PRIMARY, BTN_LG_SECONDARY, BTN_LG_SOLID, BTN_PRIMARY, BTN_SECONDARY, BUILTIN_THEMES, BrandMark, Breadcrumb, BrowserSignIn, CONFIRM_TITLE_ID, CONTRAST, Checkbox, ChoiceCards, CodeFrame, CodeHighlightProvider, CodePanel, CodeWrapProvider, ConfirmDialog, CopyButton, CountBadge, Crossfade, DARK_LUMINANCE_THRESHOLD, DEFAULT_EDITOR_SETTINGS, DEFAULT_LABELS, DEFAULT_PANEL_MS, DEFAULT_THEME, DiffCounts, EditableTitle, EditorEnvironmentProvider, EmptyState, ErrorBoundary, ErrorDetails, ErrorFallback, ErrorNote, FADE_KEYS, FIELD_LABEL_CLASS, FORM_CARD_CLASS, FloatingSurface, FormCard, FormSection, Grow, GrowPresence, HOVER_MOTION, HeldWidth, Highlighted, HighlightedCode, HostRow, HoverCard, HowItWorks, INPUT_CLASS, INSTANT, IconButton, IconToggle, KeyCombo, Keycap, LabelsProvider, LoadError, MAX_REAL_SCALE, MENU_FADE_RATIO, MOTIONS, MOTION_NAMES, MatchedTitle, MediaNav, Menu, MenuNote, MenuRow, MenuSection, MenuSeparator, MenuSwitch, Meta, MetaChip, MotionProvider, NavButton, NavRow, OpLine, Overlay, PANEL_ROW, PANEL_ROW_HOVER, PUNCTUATION_CODES, PaletteIcon, PaletteList, PaletteOption, PalettePanel, PaletteRow, PanelEmpty, PanelLoading, PathDisplayProvider, PathDisplayScope, Popover, Presence, PreviewWindow, REDUCED_FADE, ROW_BUTTON_CLASS, ROW_CLASS, ROW_HOST_CLASS, ROW_TRIGGER_CLASS, Raised, ReorderTabs, RollingText, RowActionsMenu, RowBadge, RowText, SHIMMER_MS, SectionLabel, SegmentSpinner, Segmented, SegmentedRow, SliderRow, SmoothWidth, StepActions, StepFrame, Stepper, SwapIcon, SwatchPicker, Switch, SwitchGlyph, SwitchRow, TEXTAREA_CLASS, TabPill, ThemeThumb, TitleText, ToggleCard, ToggleSwitch, Tooltip, Tray, ZoomableImage, _resetKeyboardLayout, anchorNudge, applyMotionVars, basename, beginLayoutAnimation, buttonClass, capChroma, clampWidth, compactPath, configureErrorReports, contrastRatio, contrastToCssVars, createCodeHighlighter, createKeyedStore, cssMotionVars, currentMotionPrefs, currentMotionTransition, currentWithFade, defaultPaletteKeys, defaultShikiTheme, depthToCssVars, derivePalette, ensureContrast, errorMessage, errorStacksShown, extendLabels, fadeTransition, focusMenuRow, formatColor, formatPathForCwd, handleMenuKeyDown, hasBrandMark, iconButtonClass, inferAppearance, installRendererErrorHandlers, isDark, isLayoutAnimating, layoutKeyLabel, luminance, menuTransition, mix, motionTransition, motionVars, moveId, oklch, oklchToRgb, oneOf, paletteToCssVars, paletteVerb, panelMotionVars, parseBoolean, parseColor, placeSurface, presetFor, pulseLayout, readDurationVar, readExitMs, readMenuExitMs, readMotionMs, readPanelMs, readPersisted, readRollMs, readableOn, reportRendererError, resetReportedErrors, resolveTheme, returnFocus, rgbToOklch, rollCells, scrollRootOf, seedFromTheme, shikiThemeFor, splitPath, subscribeLayoutAnimating, syncShimmer, themeCssVars, themeStylesheet, tildePath, tildeText, tintedNeutral, toOklch, transitionState, typesStandIn, useAnchoredPosition, useCadencedValue, useCodeHighlight, useDismiss, useDisplayPath, useDocumentAppearance, useEditorEnvironment, useKeyboardLayout, useKeyedValue, useLabels, useLayer, useLightbox, useMenuTransition, useMinuteTick, useMotionLevel, useMotionPrefs, useMotionTransition, useNearViewport, usePersistedState, usePopover, usePresence, useReducedMotion, useResizeDrag, useRowHint, useScrollLock, useSprings, useStaysMounted, useTabDrag, useTabExit, useWithFade, watchRuntimeIcons, withAlpha, withFade, withLightness, withoutTransitions, writePersisted };
+export { ACCENT_PRESETS, AddressBar, BRAND_MARKS, BTN_DANGER, BTN_DANGER_CONFIRM, BTN_LG_DANGER, BTN_LG_PRIMARY, BTN_LG_SECONDARY, BTN_LG_SOLID, BTN_PRIMARY, BTN_SECONDARY, BUILTIN_THEMES, BrandMark, Breadcrumb, BrowserSignIn, CONFIRM_TITLE_ID, CONTRAST, Checkbox, ChoiceCards, CodeFrame, CodeHighlightProvider, CodePanel, CodeWrapProvider, ConfirmDialog, CopyButton, CountBadge, Crossfade, DARK_LUMINANCE_THRESHOLD, DEFAULT_EDITOR_SETTINGS, DEFAULT_LABELS, DEFAULT_PANEL_MS, DEFAULT_THEME, DiffCounts, EditableTitle, EditorEnvironmentProvider, EmptyState, ErrorBoundary, ErrorDetails, ErrorFallback, ErrorNote, FADE_KEYS, FIELD_LABEL_CLASS, FORM_CARD_CLASS, FloatingSurface, FormCard, FormSection, Grow, GrowPresence, HOVER_MOTION, HeldWidth, Highlighted, HighlightedCode, HostRow, HoverCard, HowItWorks, INPUT_CLASS, INSTANT, IconButton, IconToggle, KeyCombo, Keycap, LabelsProvider, LoadError, MAX_REAL_SCALE, MENU_FADE_RATIO, MOTIONS, MOTION_NAMES, MatchedTitle, MediaNav, Menu, MenuNote, MenuRow, MenuSection, MenuSeparator, MenuSwitch, Meta, MetaChip, MotionProvider, NavButton, NavRow, OpLine, Overlay, PANEL_ROW, PANEL_ROW_HOVER, PUNCTUATION_CODES, PaletteIcon, PaletteList, PaletteOption, PalettePanel, PaletteRow, PanelEmpty, PanelLoading, PathDisplayProvider, PathDisplayScope, Popover, Presence, PreviewWindow, REDUCED_FADE, ROW_BUTTON_CLASS, ROW_CLASS, ROW_HOST_CLASS, ROW_TRIGGER_CLASS, Raised, ReorderTabs, Restricted, RollingText, RowActionsMenu, RowBadge, RowText, SHIMMER_MS, SectionLabel, SegmentSpinner, Segmented, SegmentedRow, SliderRow, SmoothHeight, SmoothWidth, StepActions, StepFrame, Stepper, SwapIcon, SwatchPicker, Switch, SwitchGlyph, SwitchRow, TEXTAREA_CLASS, TabPill, ThemeThumb, TitleText, ToggleCard, ToggleSwitch, Tooltip, Tray, ZidaneMark, ZoomableImage, _resetKeyboardLayout, anchorNudge, applyMotionVars, basename, beginLayoutAnimation, buttonClass, capChroma, clampWidth, compactPath, configureErrorReports, contrastRatio, contrastToCssVars, createCodeHighlighter, createKeyedStore, cssMotionVars, currentMotionPrefs, currentMotionTransition, currentWithFade, defaultPaletteKeys, defaultShikiTheme, depthToCssVars, derivePalette, ensureContrast, errorMessage, errorStacksShown, extendLabels, fadeTransition, focusMenuRow, formatColor, formatPathForCwd, handleMenuKeyDown, hasBrandMark, iconButtonClass, inferAppearance, installRendererErrorHandlers, isDark, isLayoutAnimating, layoutKeyLabel, luminance, menuTransition, mix, motionTransition, motionVars, moveId, oklch, oklchToRgb, oneOf, paletteToCssVars, paletteVerb, panelMotionVars, parseBoolean, parseColor, placeSurface, presetFor, pulseLayout, readDurationVar, readExitMs, readMenuExitMs, readMotionMs, readPanelMs, readPersisted, readRollMs, readableOn, reportRendererError, resetReportedErrors, resolveTheme, returnFocus, rgbToOklch, rollCells, scrollRootOf, seedFromTheme, shikiThemeFor, splitPath, subscribeLayoutAnimating, syncShimmer, themeCssVars, themeStylesheet, tildePath, tildeText, tintedNeutral, toOklch, transitionState, typesStandIn, useAnchoredPosition, useCadencedValue, useCodeHighlight, useDismiss, useDisplayPath, useDocumentAppearance, useEditorEnvironment, useKeyboardLayout, useKeyedValue, useLabels, useLayer, useLightbox, useMenuTransition, useMinuteTick, useMotionLevel, useMotionPrefs, useMotionTransition, useNearViewport, usePersistedState, usePopover, usePresence, useReducedMotion, useResizeDrag, useRowHint, useScrollLock, useSprings, useStaysMounted, useTabDrag, useTabExit, useWithFade, watchRuntimeIcons, withAlpha, withFade, withLightness, withoutTransitions, writePersisted };

package/dist/keybindings/headless/catalog.js

@@ -58,7 +58,7 @@ const KEYBINDING_DEFS = [
 	},
 	{
 		action: "newSession",
-		default: "ctrl+n",
+		default: "ctrl+n | cmd+n",
 		label: "new session",
 		description: "leave the active session and start a fresh one",
 		urgent: true

package/dist/labels.d.ts

@@ -48,6 +48,7 @@ declare const DEFAULT_LABELS: {
   paletteChoose: string;
   paletteTurnOn: string;
   paletteTurnOff: string;
+  paletteScopeHint: string;
   editorConflict: string;
   editorConflictDetail: string;
   editorReload: string;

package/dist/labels.js

@@ -58,6 +58,7 @@ const DEFAULT_LABELS = {
 	paletteChoose: "Choose",
 	paletteTurnOn: "Turn on",
 	paletteTurnOff: "Turn off",
+	paletteScopeHint: "Section",
 	editorConflict: "Changed on disk while editing.",
 	editorConflictDetail: "This file changed on disk while you were editing.",
 	editorReload: "Reload",

package/dist/machines/DaemonMenu.js

@@ -21,7 +21,7 @@ import { DAEMON_HEALTH_STYLE } from "zidane/chat/pure";
 const POLL_MS = 2e3;
 function MenuHeading({ children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "px-3 pt-1.5 pb-1 text-zg-badge font-semibold uppercase tracking-wide text-[var(--zg-text-muted)]",
+		className: "px-3 pt-1.5 pb-1 text-zg-badge font-semibold text-[var(--zg-text-muted)]",
 		children
 	});
 }

package/dist/machines/HostCapabilities.d.ts

@@ -12,6 +12,16 @@ interface HostCapabilitiesState {
   checking: boolean;
   /** Probes again, bypassing the backend's cache. */
   recheck: () => Promise<void>;
+  /** Installs a missing tool there; absent without the host's `installTool`. */
+  install?: (name: string) => Promise<void>;
+  /** The tool being installed. */
+  installing: string | null;
+  /** How the last install went. */
+  installed: {
+    name: string;
+    ok: boolean;
+    output: string;
+  } | null;
 }
 /**
  * A host's capabilities. Nothing is asked while `enabled` is false (an unreachable server) or without the host's
@@ -44,6 +54,18 @@ interface CapabilitiesViewProps {
   onRecheck: () => void;
   /** This computer: it serves no clients, so what it allows is not listed. */
   local?: boolean;
+  /** Installs a missing tool there. Absent: a missing tool offers nothing. */
+  onInstall?: (name: string) => void;
+  /** This connection may not install (a chat token): Install shows, Admin only. */
+  installRestricted?: boolean;
+  /** The tool being installed. */
+  installing?: string | null;
+  /** How the last install went: its output shows under the tools when it failed. */
+  installed?: {
+    name: string;
+    ok: boolean;
+    output: string;
+  } | null;
   /** Classes merged on the root. */
   className?: string;
   /** Inline styles on the root. */
@@ -55,6 +77,6 @@ interface CapabilitiesViewProps {
  *
  * @param props - {@link CapabilitiesViewProps}.
  */
-declare function CapabilitiesView({ caps, error, checking, onRecheck, local, className, style }: CapabilitiesViewProps): import("react").JSX.Element;
+declare function CapabilitiesView({ caps, error, checking, onRecheck, local, onInstall, installRestricted, installing, installed, className, style }: CapabilitiesViewProps): import("react").JSX.Element;
 //#endregion
 export { CapabilitiesView, CapabilitiesViewProps, CapabilityTags, CapabilityTagsProps, HostCapabilitiesState, useHostCapabilities };

package/dist/machines/HostCapabilities.js

@@ -1,15 +1,21 @@
 import { BTN_SECONDARY } from "../components/button.js";
-import { MetaChip } from "../components/Form.js";
+import { CopyButton } from "../components/CopyButton.js";
+import { MetaChip, OpLine } from "../components/Form.js";
+import { Restricted } from "../components/Restricted.js";
 import { machinesError } from "./headless/host.js";
 import { useMachinesHost, useMachinesLabels } from "./MachinesProvider.js";
+import { RoutedLink } from "../extensions/links.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
-import { HOST_TOOLS, capabilityTags } from "zidane/chat/pure";
+import { HOST_TOOLS, capabilityTags, toolInstall } from "zidane/chat/pure";
 //#region src/machines/HostCapabilities.tsx
 /**
 * What a host can do (`MachinesHost.capabilities`), for a hosts page: a few
 * tags on its row in a list, and the full check on its page (OS, tools on
 * PATH, sandbox, environment kinds, what it allows, disk) with Re-check.
+* On a server, a missing tool's row offers its install (`toolInstall`):
+* Install runs it there (`MachinesHost.installTool`, Admin only), a command
+* that needs root is offered to copy, else the tool's page.
 */
 /**
 * A host's capabilities. Nothing is asked while `enabled` is false (an unreachable server) or without the host's
@@ -19,10 +25,34 @@ import { HOST_TOOLS, capabilityTags } from "zidane/chat/pure";
 * @param enabled - Whether to ask. Default true.
 */
 function useHostCapabilities(hostId, enabled = true) {
-	const read = useMachinesHost().capabilities;
+	const { capabilities: read, installTool } = useMachinesHost();
 	const [caps, setCaps] = useState(null);
 	const [error, setError] = useState(null);
 	const [checking, setChecking] = useState(false);
+	const [installing, setInstalling] = useState(null);
+	const [installed, setInstalled] = useState(null);
+	const install = useCallback(async (name) => {
+		if (!installTool) return;
+		setInstalling(name);
+		setInstalled(null);
+		try {
+			const result = await installTool(hostId, name);
+			setCaps(result.capabilities);
+			setInstalled({
+				name,
+				ok: result.ok,
+				output: result.output
+			});
+		} catch (err) {
+			setInstalled({
+				name,
+				ok: false,
+				output: machinesError("install", err).detail
+			});
+		} finally {
+			setInstalling(null);
+		}
+	}, [installTool, hostId]);
 	const load = useCallback(async (refresh = false) => {
 		if (!enabled || !read) return;
 		setChecking(true);
@@ -46,7 +76,10 @@ function useHostCapabilities(hostId, enabled = true) {
 		caps,
 		error,
 		checking,
-		recheck: () => load(true)
+		recheck: () => load(true),
+		...installTool && enabled ? { install } : {},
+		installing,
+		installed
 	};
 }
 /**
@@ -60,7 +93,7 @@ function CapabilityTags({ caps }) {
 	const { tags, more } = capabilityTags(caps);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [tags.map((tag) => /* @__PURE__ */ jsx(MetaChip, { children: tag }, tag)), more > 0 && /* @__PURE__ */ jsx(MetaChip, { children: labels.machinesCapsMore(more) })] });
 }
-function Fact({ ok, icon, label, detail, title }) {
+function Fact({ ok, icon, label, detail, title, action }) {
 	const labels = useMachinesLabels();
 	return /* @__PURE__ */ jsxs("li", {
 		className: "flex items-center gap-2.5 min-w-0 px-2.5 py-2",
@@ -80,6 +113,7 @@ function Fact({ ok, icon, label, detail, title }) {
 					children: detail ?? (ok ? labels.machinesCapsAvailable : labels.machinesCapsMissing)
 				})]
 			}),
+			action,
 			/* @__PURE__ */ jsx("span", {
 				role: "img",
 				"aria-label": ok ? labels.machinesCapsAvailableA11y : labels.machinesCapsMissingA11y,
@@ -95,8 +129,40 @@ const GRID = "m-0 p-0 list-none grid grid-cols-2 gap-px rounded-zg-md overflow-h
 *
 * @param props - {@link CapabilitiesViewProps}.
 */
-function CapabilitiesView({ caps, error, checking, onRecheck, local = false, className = "", style }) {
+function CapabilitiesView({ caps, error, checking, onRecheck, local = false, onInstall, installRestricted = false, installing = null, installed = null, className = "", style }) {
 	const labels = useMachinesLabels();
+	const installAction = (name, label) => {
+		if (!onInstall || !caps || caps.partial) return void 0;
+		const how = toolInstall(name, caps);
+		if (!how) return void 0;
+		if (how.kind === "copy") return /* @__PURE__ */ jsx("span", {
+			title: labels.machinesCapsInstallCopy(how.command),
+			children: /* @__PURE__ */ jsx(CopyButton, {
+				text: how.command,
+				label: labels.machinesCapsInstallCopyLabel(label)
+			})
+		});
+		if (how.kind === "link") return /* @__PURE__ */ jsx(RoutedLink, {
+			href: how.url,
+			"aria-label": labels.machinesCapsInstallPageLabel(label),
+			className: "text-xs text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] shrink-0",
+			children: labels.machinesCapsInstallPage
+		});
+		return /* @__PURE__ */ jsx(Restricted, {
+			restricted: installRestricted,
+			reason: labels.machinesAdminOnly,
+			inline: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: BTN_SECONDARY,
+				"aria-label": labels.machinesCapsInstallLabel(label),
+				disabled: installing !== null,
+				onClick: () => onInstall(name),
+				children: installing === name ? labels.machinesCapsInstalling : labels.machinesCapsInstall
+			})
+		});
+	};
+	const installedLabel = installed ? HOST_TOOLS.find((tool) => tool.name === installed.name)?.label ?? installed.name : "";
 	return /* @__PURE__ */ jsxs("div", {
 		className: `px-3 py-3 space-y-3 ${className}`,
 		style,
@@ -128,66 +194,84 @@ function CapabilitiesView({ caps, error, checking, onRecheck, local = false, cla
 				onClick: onRecheck,
 				children: checking ? labels.machinesCapsChecking : labels.machinesCapsRecheck
 			})]
-		}), caps && /* @__PURE__ */ jsxs(Fragment, { children: [caps.tools.length > 0 && /* @__PURE__ */ jsx("ul", {
-			className: GRID,
-			"aria-label": labels.machinesCapsTools,
-			children: HOST_TOOLS.map((tool) => {
-				const found = caps.tools.find((t) => t.name === tool.name);
-				return /* @__PURE__ */ jsx(Fact, {
-					ok: found?.found === true,
-					icon: tool.icon,
-					label: tool.label,
-					...found?.version ? { detail: found.version } : {},
-					title: tool.why
-				}, tool.name);
-			})
-		}), /* @__PURE__ */ jsxs("ul", {
-			className: GRID,
-			"aria-label": labels.machinesCapsFeatures,
-			children: [
-				!caps.partial && /* @__PURE__ */ jsx(Fact, {
-					ok: caps.sandbox.ok,
-					icon: "i-ph-shield-check",
-					label: labels.machinesCapsSandbox,
-					detail: caps.sandbox.ok ? caps.sandbox.backend : labels.machinesCapsNotAvailable,
-					...caps.sandbox.reason ? { title: caps.sandbox.reason } : {}
-				}),
-				caps.environments.filter((env) => env.kind !== "local" && !env.kind.includes("@")).map((env) => /* @__PURE__ */ jsx(Fact, {
-					ok: env.available,
-					icon: env.kind === "worktree" ? "i-ph-git-branch" : env.kind === "docker" ? "i-ph-cube" : "i-ph-cloud",
-					label: env.label,
-					detail: env.available ? labels.machinesCapsEnvAvailable : labels.machinesCapsNotAvailable,
-					...env.reason ? { title: env.reason } : {}
-				}, env.kind)),
-				!local && /* @__PURE__ */ jsxs(Fragment, { children: [
-					/* @__PURE__ */ jsx(Fact, {
-						ok: caps.allows.remoteInstalls,
-						icon: "i-ph-download-simple",
-						label: labels.machinesCapsRemoteInstalls
-					}),
-					/* @__PURE__ */ jsx(Fact, {
-						ok: caps.allows.asMachine,
-						icon: "i-ph-hard-drives",
-						label: labels.machinesCapsAsMachine
-					}),
-					/* @__PURE__ */ jsx(Fact, {
-						ok: caps.allows.sync,
-						icon: "i-ph-arrows-clockwise",
-						label: labels.machinesCapsSync
-					}),
-					/* @__PURE__ */ jsx(Fact, {
-						ok: caps.allows.clone,
-						icon: "i-ph-git-branch",
-						label: labels.machinesCapsClone
+		}), caps && /* @__PURE__ */ jsxs(Fragment, { children: [
+			caps.tools.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: GRID,
+				"aria-label": labels.machinesCapsTools,
+				children: HOST_TOOLS.map((tool) => {
+					const found = caps.tools.find((t) => t.name === tool.name);
+					const action = found?.found ? void 0 : installAction(tool.name, tool.label);
+					return /* @__PURE__ */ jsx(Fact, {
+						ok: found?.found === true,
+						icon: tool.icon,
+						label: tool.label,
+						...found?.version ? { detail: found.version } : {},
+						title: tool.why,
+						...action ? { action } : {}
+					}, tool.name);
+				})
+			}),
+			installed && (installed.ok ? /* @__PURE__ */ jsx(OpLine, {
+				kind: "notice",
+				children: labels.machinesCapsInstalled(installedLabel)
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ jsx(OpLine, {
+					kind: "error",
+					children: labels.machinesCapsInstallFailed(installedLabel)
+				}), installed.output && /* @__PURE__ */ jsx("pre", {
+					className: "zg-well m-0 max-h-40 overflow-auto rounded-zg-md px-2.5 py-1.5 font-mono text-zg-meta whitespace-pre-wrap text-[var(--zg-text-muted)]",
+					children: installed.output
+				})]
+			})),
+			/* @__PURE__ */ jsxs("ul", {
+				className: GRID,
+				"aria-label": labels.machinesCapsFeatures,
+				children: [
+					!caps.partial && /* @__PURE__ */ jsx(Fact, {
+						ok: caps.sandbox.ok,
+						icon: "i-ph-shield-check",
+						label: labels.machinesCapsSandbox,
+						detail: caps.sandbox.ok ? caps.sandbox.backend : labels.machinesCapsNotAvailable,
+						...caps.sandbox.reason ? { title: caps.sandbox.reason } : {}
 					}),
-					/* @__PURE__ */ jsx(Fact, {
-						ok: caps.allows.createFolders,
-						icon: "i-ph-folder-plus",
-						label: labels.machinesCapsCreateFolders
-					})
-				] })
-			]
-		})] })]
+					caps.environments.filter((env) => env.kind !== "local" && !env.kind.includes("@")).map((env) => /* @__PURE__ */ jsx(Fact, {
+						ok: env.available,
+						icon: env.kind === "worktree" ? "i-ph-git-branch" : env.kind === "docker" ? "i-ph-cube" : "i-ph-cloud",
+						label: env.label,
+						detail: env.available ? labels.machinesCapsEnvAvailable : labels.machinesCapsNotAvailable,
+						...env.reason ? { title: env.reason } : {}
+					}, env.kind)),
+					!local && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(Fact, {
+							ok: caps.allows.remoteInstalls,
+							icon: "i-ph-download-simple",
+							label: labels.machinesCapsRemoteInstalls
+						}),
+						/* @__PURE__ */ jsx(Fact, {
+							ok: caps.allows.asMachine,
+							icon: "i-ph-hard-drives",
+							label: labels.machinesCapsAsMachine
+						}),
+						/* @__PURE__ */ jsx(Fact, {
+							ok: caps.allows.sync,
+							icon: "i-ph-arrows-clockwise",
+							label: labels.machinesCapsSync
+						}),
+						/* @__PURE__ */ jsx(Fact, {
+							ok: caps.allows.clone,
+							icon: "i-ph-git-branch",
+							label: labels.machinesCapsClone
+						}),
+						/* @__PURE__ */ jsx(Fact, {
+							ok: caps.allows.createFolders,
+							icon: "i-ph-folder-plus",
+							label: labels.machinesCapsCreateFolders
+						})
+					] })
+				]
+			})
+		] })]
 	});
 }
 //#endregion