zidane-ui 9.0.4 → 9.1.3

package/dist/chat/sidebar/SidebarRowView.js

@@ -0,0 +1,117 @@
+import { useMinuteTick } from "../../hooks/useMinuteTick.js";
+import { badgeToneClass } from "../../session/ArtifactRowChips.js";
+import { relativeTime } from "../headless/session-list.js";
+import { StatusDot } from "../StatusDot.js";
+import { SessionListRow } from "../SessionListRow.js";
+import { useSidebarLabels } from "./useSidebarLabels.js";
+import { SidebarChip } from "./SidebarDecoration.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from "react";
+//#region src/chat/sidebar/SidebarRowView.tsx
+/**
+* An extension's row among a space's sessions (the `SidebarRow` token): its status or
+* icon, title, badges, time and subtitle on a session row's grid, its actions
+* in the row menu, and the sessions its `children` query lists nested under
+* it. A click opens its target (`open`); an item without one toggles its
+* sessions, and its button says whether they show (`aria-expanded`). The
+* menu trigger is named for the item (`labels.itemActions`).
+*
+* The sidebar's arrow keys walk sessions only and skip item rows: an arrow
+* press opens what it lands on, and an item's target may run an extension
+* command. Tab reaches an item's button and its menu.
+*/
+/** An item's run state as a session dot. */
+const DOT = {
+	idle: "idle",
+	running: "running",
+	blocked: "attention",
+	completed: "completed",
+	error: "error"
+};
+/** Renders an extension item of the sidebar list. Memoized: keep every prop stable. */
+const SidebarRowView = memo(function SidebarRowView({ rowId, entry, collapsed, childCount, onOpen, onRunAction, onToggle, children, className, style }) {
+	const labels = useSidebarLabels();
+	useMinuteTick();
+	const { item } = entry;
+	const toggle = useCallback(() => onToggle(rowId), [onToggle, rowId]);
+	const select = useCallback(() => item.open ? onOpen(entry) : toggle(), [
+		item.open,
+		onOpen,
+		entry,
+		toggle
+	]);
+	const menuItems = useMemo(() => {
+		const out = (item.actions ?? []).map((action) => ({
+			id: `action:${action.id}`,
+			label: action.label,
+			disabled: !action.command || !onRunAction,
+			onSelect: () => onRunAction?.(entry, action)
+		}));
+		if (childCount > 0 && item.open) out.push({
+			id: "toggle",
+			label: collapsed ? labels.expandItem(item.title) : labels.collapseItem(item.title),
+			group: "children",
+			onSelect: toggle
+		});
+		return out;
+	}, [
+		item,
+		entry,
+		childCount,
+		collapsed,
+		labels,
+		onRunAction,
+		toggle
+	]);
+	const status = item.status ? /* @__PURE__ */ jsx(StatusDot, { state: DOT[item.status] }) : item.icon?.gui ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: `${item.icon.gui} text-sm ${badgeToneClass(item.tone)}`
+	}) : /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "i-ph-puzzle-piece text-sm text-[var(--zg-text-muted)]"
+	});
+	const badges = item.status && item.icon?.gui || (item.badges?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1 min-w-0 shrink-0",
+		children: [item.status && item.icon?.gui && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: `${item.icon.gui} text-zg-meta ${badgeToneClass(item.tone)}`
+		}), (item.badges ?? []).map((badge, i) => /* @__PURE__ */ jsx(SidebarChip, { chip: {
+			text: badge.text,
+			...badge.tone ? { tone: badge.tone } : {},
+			...badge.icon?.gui ? { icon: badge.icon.gui } : {}
+		} }, `${i}:${badge.text}`))]
+	}) : void 0;
+	return /* @__PURE__ */ jsx("li", {
+		"data-sidebar-item": item.id,
+		"data-collapsed": collapsed ? "true" : void 0,
+		className,
+		style,
+		children: /* @__PURE__ */ jsxs("ul", {
+			className: "list-none m-0 p-0",
+			children: [/* @__PURE__ */ jsx(SessionListRow, {
+				id: rowId,
+				title: item.title,
+				status,
+				...badges ? { badges } : {},
+				...typeof item.time === "number" ? { meta: /* @__PURE__ */ jsx("span", {
+					className: "zg-meta shrink-0",
+					children: relativeTime(item.time, Date.now(), labels)
+				}) } : {},
+				...item.subtitle ? {
+					sub: item.subtitle,
+					subClassName: "text-xs leading-4 truncate text-[var(--zg-text-muted)]"
+				} : {},
+				onSelect: select,
+				menuItems,
+				menuLabel: labels.itemActions(item.title),
+				...childCount > 0 && !item.open ? { expanded: !collapsed } : {}
+			}), childCount > 0 && !collapsed && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("ul", {
+				className: "list-none m-0 p-0 pl-3",
+				"aria-label": item.title,
+				children
+			}) })]
+		})
+	});
+});
+//#endregion
+export { SidebarRowView };

package/dist/chat/sidebar/SidebarSessionRow.d.ts

@@ -1,3 +1,4 @@
+import { SidebarRowDecoration } from "../headless/sidebar/query.js";
 import { RowProject } from "./RowChips.js";
 import { SidebarLive } from "./sidebar-live.js";
 import { CSSProperties } from "react";
@@ -81,12 +82,14 @@ interface SidebarSessionRowProps extends SidebarRowHandlers {
   spaces: readonly Space[] | null;
   /** The app's live row parts (`createSidebarLive`, built once). */
   live: SidebarLive;
+  /** What extensions put on the row (`createDecorator`): an icon and chips beside the title, a subtitle. */
+  decoration?: SidebarRowDecoration | null;
   /** Extra classes on the row. */
   className?: string;
   /** Inline styles on the row. */
   style?: CSSProperties;
 }
 /** Renders one session of the sidebar list. Memoized: keep every prop stable. */
-declare const SidebarSessionRow: import("react").MemoExoticComponent<({ sessionId, title, cwd, hostId, hostBadge, spaceId, isMain, isActive, isRenaming, archived, favorite, renameValue, menuOpen, onSelect, onRenameValueChange, onRenameCommit, onRenameCancel, onStartRename, onDelete, onSetArchived, onSetFavorite, onRetryEnvironment, onRunEnvironmentAction, onMoveToSpace, onMoveSession, onOpenMenu, onCloseMenu, excerpt, excerptQuery, project, updatedAt, environment, runDetails, artifactBadges, spaces, live, className, style }: SidebarSessionRowProps) => import("react").JSX.Element>;
+declare const SidebarSessionRow: import("react").MemoExoticComponent<({ sessionId, title, cwd, hostId, hostBadge, spaceId, isMain, isActive, isRenaming, archived, favorite, renameValue, menuOpen, onSelect, onRenameValueChange, onRenameCommit, onRenameCancel, onStartRename, onDelete, onSetArchived, onSetFavorite, onRetryEnvironment, onRunEnvironmentAction, onMoveToSpace, onMoveSession, onOpenMenu, onCloseMenu, excerpt, excerptQuery, project, updatedAt, environment, runDetails, artifactBadges, spaces, live, decoration, className, style }: SidebarSessionRowProps) => import("react").JSX.Element>;
 //#endregion
 export { SidebarRowHandlers, SidebarSessionRow, SidebarSessionRowProps };

package/dist/chat/sidebar/SidebarSessionRow.js

@@ -1,10 +1,11 @@
 import { useSidebarHost } from "./SidebarHostProvider.js";
-import { SessionListRow } from "../SessionListRow.js";
 import { useReferenceMatches } from "../transcript/references.js";
 import { ReferenceText } from "../transcript/ReferenceText.js";
+import { SessionListRow } from "../SessionListRow.js";
 import { useSidebarLabels } from "./useSidebarLabels.js";
 import { sessionMenuItems, useEnvironmentActions } from "./session-menu.js";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { SidebarDecoration } from "./SidebarDecoration.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, memo, useCallback, useMemo, useState } from "react";
 import { highlightSegments, searchHighlightRanges } from "zidane/chat/pure";
 //#region src/chat/sidebar/SidebarSessionRow.tsx
@@ -31,7 +32,7 @@ const ExcerptHighlight = memo(({ text, query }) => {
 });
 ExcerptHighlight.displayName = "ExcerptHighlight";
 /** Renders one session of the sidebar list. Memoized: keep every prop stable. */
-const SidebarSessionRow = memo(({ sessionId, title, cwd, hostId, hostBadge = true, spaceId, isMain, isActive, isRenaming, archived, favorite = false, renameValue, menuOpen, onSelect, onRenameValueChange, onRenameCommit, onRenameCancel, onStartRename, onDelete, onSetArchived, onSetFavorite, onRetryEnvironment, onRunEnvironmentAction, onMoveToSpace, onMoveSession, onOpenMenu, onCloseMenu, excerpt, excerptQuery, project, updatedAt, environment, runDetails, artifactBadges, spaces, live, className, style }) => {
+const SidebarSessionRow = memo(({ sessionId, title, cwd, hostId, hostBadge = true, spaceId, isMain, isActive, isRenaming, archived, favorite = false, renameValue, menuOpen, onSelect, onRenameValueChange, onRenameCommit, onRenameCancel, onStartRename, onDelete, onSetArchived, onSetFavorite, onRetryEnvironment, onRunEnvironmentAction, onMoveToSpace, onMoveSession, onOpenMenu, onCloseMenu, excerpt, excerptQuery, project, updatedAt, environment, runDetails, artifactBadges, spaces, live, decoration, className, style }) => {
 	const { SessionStatusDot, RowMeta, RowArtifacts } = live;
 	const host = useSidebarHost();
 	const labels = useSidebarLabels();
@@ -105,6 +106,10 @@ const SidebarSessionRow = memo(({ sessionId, title, cwd, hostId, hostBadge = tru
 			surface: "title",
 			links: false
 		}) : void 0,
+		...decoration && (decoration.icon || decoration.chips.length > 0 || decoration.component) ? { badges: /* @__PURE__ */ jsx(SidebarDecoration, {
+			decoration,
+			sessionId
+		}) } : {},
 		meta: typeof updatedAt === "number" ? /* @__PURE__ */ jsx(RowMeta, {
 			sessionId,
 			updatedAt,
@@ -113,7 +118,20 @@ const SidebarSessionRow = memo(({ sessionId, title, cwd, hostId, hostBadge = tru
 		sub: excerpt ? /* @__PURE__ */ jsx(ExcerptHighlight, {
 			text: excerpt,
 			query: excerptQuery ?? ""
-		}) : isRenaming ? void 0 : /* @__PURE__ */ jsx(RowArtifacts, {
+		}) : isRenaming ? void 0 : decoration?.subtitle ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"data-testid": "row-subtitle",
+			className: "block truncate text-xs leading-4 text-[var(--zg-text-muted)]",
+			children: decoration.subtitle
+		}), /* @__PURE__ */ jsx(RowArtifacts, {
+			sessionId,
+			enabled: artifactBadges,
+			onArrival: setArrived,
+			onSelect,
+			...cwd !== void 0 ? { cwd } : {},
+			...hostId && hostBadge ? { hostId } : {},
+			...project ? { project } : {},
+			...environment ? { environment } : {}
+		})] }) : /* @__PURE__ */ jsx(RowArtifacts, {
 			sessionId,
 			enabled: artifactBadges,
 			onArrival: setArrived,

package/dist/chat/sidebar/SpaceSwitcher.d.ts

@@ -1,10 +1,11 @@
+import { SidebarSpace } from "../headless/sidebar/query.js";
 import { CSSProperties } from "react";
 import { Space } from "zidane/chat/pure";
 //#region src/chat/sidebar/SpaceSwitcher.d.ts
 /** Props of {@link SpaceGlyph}. */
 interface SpaceGlyphProps {
-  /** The space whose icon (or first letter) shows. */
-  space: Pick<Space, 'name' | 'icon'>;
+  /** The space whose icon (an extension's icon class, its emoji or image, else its first letter) shows. */
+  space: Pick<Space, 'name' | 'icon'> & Pick<SidebarSpace, 'glyph'>;
   /** Side of the square in px. Defaults to 18. */
   size?: number;
 }
@@ -16,8 +17,14 @@ interface SpaceGlyphProps {
 declare function SpaceGlyph({ space, size }: SpaceGlyphProps): import("react").JSX.Element;
 /** Props of {@link SpaceSwitcher}. */
 interface SpaceSwitcherProps {
-  /** The spaces in switcher order. */
-  spaces: readonly Space[];
+  /** The spaces in switcher order (`SessionDirectoryState.switcherSpaces`). */
+  spaces: readonly (Space | SidebarSpace)[];
+  /** The spaces hidden from the switcher, offered in an icon's menu to show again. */
+  hidden?: readonly (Space | SidebarSpace)[];
+  /** Hides a space or shows it again. Absent: no hide or show rows. */
+  onHide?: (spaceId: string, hidden: boolean) => void;
+  /** Moves a space one place left (-1) or right (1). Absent: no move rows. */
+  onMove?: (spaceId: string, delta: 1 | -1) => void;
   /** The space shown. */
   activeId: string;
   /** Show another space. */
@@ -32,6 +39,6 @@ interface SpaceSwitcherProps {
  *
  * @param props - The {@link SpaceSwitcherProps}.
  */
-declare function SpaceSwitcher({ spaces, activeId, onSelect, className, style }: SpaceSwitcherProps): import("react").JSX.Element;
+declare function SpaceSwitcher({ spaces, hidden, onHide, onMove, activeId, onSelect, className, style }: SpaceSwitcherProps): import("react").JSX.Element;
 //#endregion
 export { SpaceGlyph, SpaceGlyphProps, SpaceSwitcher, SpaceSwitcherProps };

package/dist/chat/sidebar/SpaceSwitcher.js

@@ -1,11 +1,13 @@
 import { useMotionTransition } from "../../motion/springs.js";
 import { Tooltip } from "../../components/Tooltip.js";
+import { RowActionsMenu } from "../../components/RowActionsMenu.js";
 import { useMergedKeybindings } from "../../keybindings/KeybindingsProvider.js";
 import { KeyHint } from "../../keybindings/KeyHint.js";
 import { useSidebarLabels } from "./useSidebarLabels.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { motion } from "motion/react";
+import { DEFAULT_SPACE_ID } from "zidane/chat/pure";
 //#region src/chat/sidebar/SpaceSwitcher.tsx
 /**
 * Spaces switcher — one icon per space, centered in the sidebar's footer
@@ -19,6 +21,10 @@ import { motion } from "motion/react";
 * they wrap, so the first and last spaces are neighbours).
 * Roving focus: ←/→ (and Home/End) move between icons, Enter/Space selects.
 *
+* A space an extension adds wears a small badge and names its extension in
+* the tooltip. Right-click (or Shift+F10, the context-menu key) on an icon
+* opens its menu: move it left or right, hide it, show a hidden space again.
+*
 * The raised chip under the shown space is ONE element in the toolbar, below
 * every icon, springing to the shown icon's offset: a chip inside the active
 * button (a `layoutId` handoff) painted over the icons it crossed, and they
@@ -30,6 +36,15 @@ import { motion } from "motion/react";
 * @param props - The {@link SpaceGlyphProps}.
 */
 function SpaceGlyph({ space, size = 18 }) {
+	if (space.glyph) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		style: {
+			width: size,
+			height: size
+		},
+		className: "inline-flex items-center justify-center shrink-0 text-[var(--zg-text-muted)]",
+		children: /* @__PURE__ */ jsx("span", { className: `${space.glyph} text-zg-ui` })
+	});
 	return /* @__PURE__ */ jsx(IconGlyph, {
 		icon: space.icon,
 		fallback: space.name,
@@ -74,8 +89,50 @@ function offsetIn(row, node) {
 *
 * @param props - The {@link SpaceSwitcherProps}.
 */
-function SpaceSwitcher({ spaces, activeId, onSelect, className, style }) {
+function SpaceSwitcher({ spaces, hidden, onHide, onMove, activeId, onSelect, className, style }) {
 	const labels = useSidebarLabels();
+	/** The space whose menu is open, and where (a right-click's point, else under its icon). */
+	const [menu, setMenu] = useState(null);
+	const menuAnchor = useRef(null);
+	const menuSpace = menu ? spaces[menu.index] : void 0;
+	const menuItems = [];
+	if (menu && menuSpace) {
+		if (onMove) menuItems.push({
+			id: "left",
+			label: labels.moveSpaceLeft,
+			disabled: menu.index === 0,
+			onSelect: () => onMove(menuSpace.id, -1)
+		}, {
+			id: "right",
+			label: labels.moveSpaceRight,
+			disabled: menu.index === spaces.length - 1,
+			onSelect: () => onMove(menuSpace.id, 1)
+		});
+		if (onHide && menuSpace.id !== DEFAULT_SPACE_ID) menuItems.push({
+			id: "hide",
+			label: labels.hideSpace,
+			group: "hide",
+			onSelect: () => onHide(menuSpace.id, true)
+		});
+		if (onHide && hidden && hidden.length > 0) menuItems.push({
+			id: "hidden",
+			label: labels.hiddenSpaces,
+			group: "hidden",
+			items: hidden.map((space) => ({
+				id: `show:${space.id}`,
+				label: labels.showHiddenSpace(space.name),
+				onSelect: () => onHide(space.id, false)
+			}))
+		});
+	}
+	const openMenu = (index, at) => {
+		if (!onMove && !onHide) return;
+		menuAnchor.current = buttons.current[index] ?? null;
+		setMenu({
+			index,
+			at
+		});
+	};
 	const toolbar = useRef(null);
 	const buttons = useRef([]);
 	const activeIndex = spaces.findIndex((s) => s.id === activeId);
@@ -115,55 +172,91 @@ function SpaceSwitcher({ spaces, activeId, onSelect, className, style }) {
 		"data-testid": "space-switcher",
 		className: ["relative isolate flex items-center gap-0.5 min-w-0", className].filter(Boolean).join(" "),
 		style,
-		children: [chipX !== null && /* @__PURE__ */ jsx(motion.span, {
-			"aria-hidden": true,
-			"data-testid": "space-chip",
-			className: "absolute left-0 top-0 w-7 h-7 z-[-1] pointer-events-none rounded-zg-md bg-[var(--zg-raised)] [box-shadow:var(--zg-shadow-raised)]",
-			initial: false,
-			animate: { x: chipX },
-			transition: snap
-		}), spaces.map((space, index) => {
-			const active = space.id === activeId;
-			const count = spaces.length;
-			const chord = count < 2 || index === activeIndex ? null : index === (activeIndex + 1) % count ? bindings.tabNext : index === (activeIndex - 1 + count) % count ? bindings.tabPrev : null;
-			return /* @__PURE__ */ jsx(Tooltip, {
-				portal: true,
-				side: "top",
-				label: /* @__PURE__ */ jsxs("span", {
-					className: "inline-flex items-center gap-2",
-					"data-testid": `space-tooltip-${space.id}`,
-					children: [space.name, chord && /* @__PURE__ */ jsx(KeyHint, {
-						spec: chord,
-						size: "sm"
-					})]
-				}),
-				children: /* @__PURE__ */ jsx(motion.button, {
-					whileTap: { scale: .88 },
-					transition: pop,
-					ref: (node) => {
-						buttons.current[index] = node;
-					},
-					type: "button",
-					"aria-label": labels.spaceNamed(space.name),
-					"aria-pressed": active,
-					tabIndex: index === tabStop ? 0 : -1,
-					"data-active": active ? "true" : void 0,
-					onClick: () => onSelect(space.id),
-					onKeyDown: (event) => {
-						if (event.metaKey || event.altKey || event.ctrlKey) return;
-						if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
-							event.preventDefault();
-							focusAt(index + (event.key === "ArrowRight" ? 1 : -1));
-						} else if (event.key === "Home" || event.key === "End") {
+		children: [
+			chipX !== null && /* @__PURE__ */ jsx(motion.span, {
+				"aria-hidden": true,
+				"data-testid": "space-chip",
+				className: "absolute left-0 top-0 w-7 h-7 z-[-1] pointer-events-none rounded-zg-md bg-[var(--zg-raised)] [box-shadow:var(--zg-shadow-raised)]",
+				initial: false,
+				animate: { x: chipX },
+				transition: snap
+			}),
+			spaces.map((space, index) => {
+				const active = space.id === activeId;
+				const count = spaces.length;
+				const chord = count < 2 || index === activeIndex ? null : index === (activeIndex + 1) % count ? bindings.tabNext : index === (activeIndex - 1 + count) % count ? bindings.tabPrev : null;
+				const extensionId = "extensionId" in space ? space.extensionId : void 0;
+				return /* @__PURE__ */ jsx(Tooltip, {
+					portal: true,
+					side: "top",
+					label: /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-2",
+						"data-testid": `space-tooltip-${space.id}`,
+						children: [
+							space.name,
+							extensionId && /* @__PURE__ */ jsx("span", {
+								className: "zg-meta",
+								children: labels.spaceFromExtension(extensionId)
+							}),
+							chord && /* @__PURE__ */ jsx(KeyHint, {
+								spec: chord,
+								size: "sm"
+							})
+						]
+					}),
+					children: /* @__PURE__ */ jsxs(motion.button, {
+						whileTap: { scale: .88 },
+						transition: pop,
+						ref: (node) => {
+							buttons.current[index] = node;
+						},
+						type: "button",
+						"aria-label": labels.spaceNamed(space.name),
+						"aria-pressed": active,
+						tabIndex: index === tabStop ? 0 : -1,
+						"data-active": active ? "true" : void 0,
+						"data-extension": extensionId,
+						onClick: () => onSelect(space.id),
+						onContextMenu: (event) => {
+							if (!onMove && !onHide) return;
 							event.preventDefault();
-							focusAt(event.key === "Home" ? 0 : spaces.length - 1);
-						}
-					},
-					className: "relative inline-flex items-center justify-center w-7 h-7 shrink-0 p-0 rounded-zg-md border-0 bg-transparent cursor-pointer opacity-60 hover:opacity-100 hover:bg-[var(--zg-row-hover)] data-[active=true]:opacity-100 data-[active=true]:hover:bg-transparent transition-[background-color,opacity] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--zg-ring)]",
-					children: /* @__PURE__ */ jsx(SpaceGlyph, { space })
-				})
-			}, space.id);
-		})]
+							openMenu(index, {
+								x: event.clientX,
+								y: event.clientY
+							});
+						},
+						onKeyDown: (event) => {
+							if (event.key === "F10" && event.shiftKey || event.key === "ContextMenu") {
+								event.preventDefault();
+								openMenu(index, null);
+								return;
+							}
+							if (event.metaKey || event.altKey || event.ctrlKey) return;
+							if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+								event.preventDefault();
+								focusAt(index + (event.key === "ArrowRight" ? 1 : -1));
+							} else if (event.key === "Home" || event.key === "End") {
+								event.preventDefault();
+								focusAt(event.key === "Home" ? 0 : spaces.length - 1);
+							}
+						},
+						className: "relative inline-flex items-center justify-center w-7 h-7 shrink-0 p-0 rounded-zg-md border-0 bg-transparent cursor-pointer opacity-60 hover:opacity-100 hover:bg-[var(--zg-row-hover)] data-[active=true]:opacity-100 data-[active=true]:hover:bg-transparent transition-[background-color,opacity] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--zg-ring)]",
+						children: [/* @__PURE__ */ jsx(SpaceGlyph, { space }), extensionId && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							"data-testid": "space-extension-badge",
+							className: "i-ph-puzzle-piece-fill absolute right-0 bottom-0 text-zg-badge text-[var(--zg-text-muted)]"
+						})]
+					})
+				}, space.id);
+			}),
+			(onMove || onHide) && /* @__PURE__ */ jsx(RowActionsMenu, {
+				open: menu !== null && menuItems.length > 0,
+				anchorRef: menuAnchor,
+				position: menu?.at ?? null,
+				onClose: () => setMenu(null),
+				items: menuItems
+			})
+		]
 	});
 }
 //#endregion

package/dist/chat/sidebar/SpacesSection.js

@@ -36,9 +36,11 @@ function SpacesSection({ renderDefaults, className = "", style }) {
 	if (document.status !== "ready") return null;
 	const settings = document.values;
 	const on = settings.spaces === true;
-	const spaces = normalizeSpaces(settings.spaceList);
+	const stored = normalizeSpaces(settings.spaceList);
+	const spaces = stored.filter((s) => !s.extensionId);
+	const placed = stored.filter((s) => s.extensionId);
 	const patch = (next) => void host.update?.(next).catch(() => void 0);
-	const write = (next) => patch({ spaceList: normalizeSpaces(next) });
+	const write = (next) => patch({ spaceList: normalizeSpaces([...next, ...placed]) });
 	const update = (id, change) => write(spaces.map((s) => s.id === id ? change(s) : s));
 	const move = (index, delta) => {
 		const to = index + delta;

package/dist/chat/sidebar/collapsed.d.ts

@@ -0,0 +1,24 @@
+//#region src/chat/sidebar/collapsed.d.ts
+/** A sidebar's collapsed state (`createSidebarCollapsed`). */
+interface SidebarCollapsedStore {
+  /** Whether the sidebar is collapsed now. */
+  collapsed: () => boolean;
+  /** Collapses an expanded sidebar, expands a collapsed one, and keeps the choice. Does nothing while pinned. */
+  toggle: () => void;
+  /** Whether the sidebar is collapsed, re-rendering the caller when it toggles. */
+  useCollapsed: () => boolean;
+  /** Reads the stored choice again, as a new window would (tests). */
+  reload: () => void;
+}
+/**
+ * Makes the store for one window's sidebar.
+ *
+ * @param options - `key`: the localStorage key. `pinned`: always collapsed, nothing to toggle (a window with no sidebar).
+ * @returns The store.
+ */
+declare function createSidebarCollapsed({ key, pinned }: {
+  key: string;
+  pinned?: boolean;
+}): SidebarCollapsedStore;
+//#endregion
+export { SidebarCollapsedStore, createSidebarCollapsed };

package/dist/chat/sidebar/collapsed.js

@@ -0,0 +1,44 @@
+import { parseBoolean, readPersisted, writePersisted } from "../../hooks/usePersistedState.js";
+import { useSyncExternalStore } from "react";
+//#region src/chat/sidebar/collapsed.ts
+/**
+* Whether a window's sidebar is collapsed: a view preference kept in
+* localStorage (`readPersisted` / `writePersisted`), one per window like its
+* width. A store outside React, so a toggle re-renders what draws the state
+* (the sidebar, its toggle, the header's gutter) and not the whole shell.
+* Read when the store is made, so the first paint already shows the last
+* choice; a missing or unreadable value fails open to "expanded".
+*/
+/**
+* Makes the store for one window's sidebar.
+*
+* @param options - `key`: the localStorage key. `pinned`: always collapsed, nothing to toggle (a window with no sidebar).
+* @returns The store.
+*/
+function createSidebarCollapsed({ key, pinned = false }) {
+	const read = () => pinned || (readPersisted(key, parseBoolean) ?? false);
+	const listeners = /* @__PURE__ */ new Set();
+	let collapsed = read();
+	const get = () => collapsed;
+	const subscribe = (listener) => {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	};
+	return {
+		collapsed: get,
+		toggle: () => {
+			if (pinned) return;
+			collapsed = !collapsed;
+			writePersisted(key, String(collapsed));
+			for (const listener of [...listeners]) listener();
+		},
+		useCollapsed: () => useSyncExternalStore(subscribe, get, get),
+		reload: () => {
+			collapsed = read();
+		}
+	};
+}
+//#endregion
+export { createSidebarCollapsed };

package/dist/chat/sidebar/index.d.ts

@@ -1,20 +1,23 @@
 import { MainSessionRow, MainSessionRowProps } from "./MainSessionRow.js";
-import { ICON_PICKER_WIDTH, IconPicker, IconPickerProps, ProjectIconButton, ProjectIconButtonProps, useProjectIcons } from "./ProjectIcon.js";
+import { ICON_PICKER_WIDTH, IconPicker, IconPickerProps, ProjectIconButton, ProjectIconButtonProps, ProjectIconGlyph, ProjectIconGlyphProps, useProjectIcons } from "./ProjectIcon.js";
 import { EnvironmentChip, EnvironmentChipProps, ProjectChip, ProjectChipProps, RowProject } from "./RowChips.js";
 import { SessionMenuActions, SessionMenuContext, SessionMenuSurfaceActions, SessionMenuTarget, SidebarProject, archiveProjectPrompt, deleteProjectPrompt, sessionMenuItems, spaceRows, useConfirmDeleteSession, useEnvironmentActions, useEnvironmentCommands, useProjectSessionActions, useSessionMenuItems } from "./session-menu.js";
 import { SidebarChromeInset, SidebarFrame, SidebarFrameOptions, SidebarFrameProps, SidebarFrameState, useSidebarFrame } from "./SidebarFrame.js";
-import { ARRIVAL_MS, SidebarBadgeFocus, SidebarLive, SidebarLiveOptions, SidebarRowArtifactsProps, SidebarRowMetaProps, createSidebarLive, useArrival } from "./sidebar-live.js";
+import { SidebarGroupHeader, SidebarGroupHeaderProps, SidebarHeaderRow, SidebarProjectRef } from "./SidebarGroupHeader.js";
+import { ARRIVAL_MS, BadgeCardPlacement, SidebarBadgeFocus, SidebarLive, SidebarLiveOptions, SidebarRowArtifactsProps, SidebarRowMetaProps, createSidebarLive, useArrival } from "./sidebar-live.js";
 import { SessionContentSearch, useSessionSearch } from "./useSessionSearch.js";
 import { NewSessionButton, NewSessionButtonProps, SessionSidebar, SessionSidebarProps, SidebarRowSession, SidebarSpaceSlide } from "./SessionSidebar.js";
+import { SidebarChip, SidebarChipProps, SidebarDecoration, SidebarDecorationProps } from "./SidebarDecoration.js";
 import { SidebarFilterMenu, SidebarFilterMenuProps } from "./SidebarFilterMenu.js";
 import { SidebarCompactingIndicator, SidebarCompactingIndicatorProps, SidebarFooter, SidebarFooterProps, SidebarSettingsNote, SidebarSignInPrompt, SidebarSignInPromptProps, SidebarUsageIndicator, SidebarUsageIndicatorProps } from "./SidebarFooter.js";
-import { SidebarGroupHeader, SidebarGroupHeaderProps, SidebarHeaderRow } from "./SidebarGroupHeader.js";
 import { SidebarHostProvider, SidebarHostProviderProps, useSidebarHost, useSidebarNotice } from "./SidebarHostProvider.js";
+import { SidebarRowView, SidebarRowViewProps } from "./SidebarRowView.js";
 import { SidebarSearchRow, SidebarSearchRowProps } from "./SidebarSearchRow.js";
 import { SidebarRowHandlers, SidebarSessionRow, SidebarSessionRowProps } from "./SidebarSessionRow.js";
 import { SidebarToggleButton, SidebarToggleButtonProps } from "./SidebarToggleButton.js";
 import { SpaceGlyph, SpaceGlyphProps, SpaceSwitcher, SpaceSwitcherProps } from "./SpaceSwitcher.js";
 import { SpacesSection, SpacesSectionProps } from "./SpacesSection.js";
+import { SidebarCollapsedStore, createSidebarCollapsed } from "./collapsed.js";
 import { useSidebarLabels } from "./useSidebarLabels.js";
 import { usePinnedProjects } from "./usePinnedProjects.js";
 import { useSessionActivity } from "./useSessionActivity.js";
@@ -22,5 +25,6 @@ import { useCompactionProgress } from "./useCompactionProgress.js";
 import { useSessionBadges } from "./useSessionBadges.js";
 import { SessionDirectoryView, useSessionDirectoryView } from "./useSessionDirectoryView.js";
 import { useMainSession } from "./use-main-session.js";
+import { useSaveViewAsSpace } from "./useSaveViewAsSpace.js";
 import { SidebarKeyboardNavOptions, useSidebarKeyboardNav } from "./useSidebarKeyboardNav.js";
-export { ARRIVAL_MS, EnvironmentChip, type EnvironmentChipProps, ICON_PICKER_WIDTH, IconPicker, type IconPickerProps, MainSessionRow, type MainSessionRowProps, NewSessionButton, type NewSessionButtonProps, ProjectChip, type ProjectChipProps, ProjectIconButton, type ProjectIconButtonProps, type RowProject, type SessionContentSearch, type SessionDirectoryView, type SessionMenuActions, type SessionMenuContext, type SessionMenuSurfaceActions, type SessionMenuTarget, SessionSidebar, type SessionSidebarProps, type SidebarBadgeFocus, type SidebarChromeInset, SidebarCompactingIndicator, type SidebarCompactingIndicatorProps, SidebarFilterMenu, type SidebarFilterMenuProps, SidebarFooter, type SidebarFooterProps, SidebarFrame, type SidebarFrameOptions, type SidebarFrameProps, type SidebarFrameState, SidebarGroupHeader, type SidebarGroupHeaderProps, type SidebarHeaderRow, SidebarHostProvider, type SidebarHostProviderProps, type SidebarKeyboardNavOptions, type SidebarLive, type SidebarLiveOptions, type SidebarProject, type SidebarRowArtifactsProps, type SidebarRowHandlers, type SidebarRowMetaProps, type SidebarRowSession, SidebarSearchRow, type SidebarSearchRowProps, SidebarSessionRow, type SidebarSessionRowProps, type SidebarSettingsNote, SidebarSignInPrompt, type SidebarSignInPromptProps, type SidebarSpaceSlide, SidebarToggleButton, type SidebarToggleButtonProps, SidebarUsageIndicator, type SidebarUsageIndicatorProps, SpaceGlyph, type SpaceGlyphProps, SpaceSwitcher, type SpaceSwitcherProps, SpacesSection, type SpacesSectionProps, archiveProjectPrompt, createSidebarLive, deleteProjectPrompt, sessionMenuItems, spaceRows, useArrival, useCompactionProgress, useConfirmDeleteSession, useEnvironmentActions, useEnvironmentCommands, useMainSession, usePinnedProjects, useProjectIcons, useProjectSessionActions, useSessionActivity, useSessionBadges, useSessionDirectoryView, useSessionMenuItems, useSessionSearch, useSidebarFrame, useSidebarHost, useSidebarKeyboardNav, useSidebarLabels, useSidebarNotice };
+export { ARRIVAL_MS, type BadgeCardPlacement, EnvironmentChip, type EnvironmentChipProps, ICON_PICKER_WIDTH, IconPicker, type IconPickerProps, MainSessionRow, type MainSessionRowProps, NewSessionButton, type NewSessionButtonProps, ProjectChip, type ProjectChipProps, ProjectIconButton, type ProjectIconButtonProps, ProjectIconGlyph, type ProjectIconGlyphProps, type RowProject, type SessionContentSearch, type SessionDirectoryView, type SessionMenuActions, type SessionMenuContext, type SessionMenuSurfaceActions, type SessionMenuTarget, SessionSidebar, type SessionSidebarProps, type SidebarBadgeFocus, SidebarChip, type SidebarChipProps, type SidebarChromeInset, type SidebarCollapsedStore, SidebarCompactingIndicator, type SidebarCompactingIndicatorProps, SidebarDecoration, type SidebarDecorationProps, SidebarFilterMenu, type SidebarFilterMenuProps, SidebarFooter, type SidebarFooterProps, SidebarFrame, type SidebarFrameOptions, type SidebarFrameProps, type SidebarFrameState, SidebarGroupHeader, type SidebarGroupHeaderProps, type SidebarHeaderRow, SidebarHostProvider, type SidebarHostProviderProps, type SidebarKeyboardNavOptions, type SidebarLive, type SidebarLiveOptions, type SidebarProject, type SidebarProjectRef, type SidebarRowArtifactsProps, type SidebarRowHandlers, type SidebarRowMetaProps, type SidebarRowSession, SidebarRowView, type SidebarRowViewProps, SidebarSearchRow, type SidebarSearchRowProps, SidebarSessionRow, type SidebarSessionRowProps, type SidebarSettingsNote, SidebarSignInPrompt, type SidebarSignInPromptProps, type SidebarSpaceSlide, SidebarToggleButton, type SidebarToggleButtonProps, SidebarUsageIndicator, type SidebarUsageIndicatorProps, SpaceGlyph, type SpaceGlyphProps, SpaceSwitcher, type SpaceSwitcherProps, SpacesSection, type SpacesSectionProps, archiveProjectPrompt, createSidebarCollapsed, createSidebarLive, deleteProjectPrompt, sessionMenuItems, spaceRows, useArrival, useCompactionProgress, useConfirmDeleteSession, useEnvironmentActions, useEnvironmentCommands, useMainSession, usePinnedProjects, useProjectIcons, useProjectSessionActions, useSaveViewAsSpace, useSessionActivity, useSessionBadges, useSessionDirectoryView, useSessionMenuItems, useSessionSearch, useSidebarFrame, useSidebarHost, useSidebarKeyboardNav, useSidebarLabels, useSidebarNotice };

package/dist/chat/sidebar/index.js

@@ -1,6 +1,6 @@
 import { SidebarHostProvider, useSidebarHost, useSidebarNotice } from "./SidebarHostProvider.js";
 import { useSidebarLabels } from "./useSidebarLabels.js";
-import { ICON_PICKER_WIDTH, IconPicker, ProjectIconButton, useProjectIcons } from "./ProjectIcon.js";
+import { ICON_PICKER_WIDTH, IconPicker, ProjectIconButton, ProjectIconGlyph, useProjectIcons } from "./ProjectIcon.js";
 import { SpaceGlyph, SpaceSwitcher } from "./SpaceSwitcher.js";
 import { SpacesSection } from "./SpacesSection.js";
 import { MainSessionRow } from "./MainSessionRow.js";
@@ -8,6 +8,8 @@ import { EnvironmentChip, ProjectChip } from "./RowChips.js";
 import { archiveProjectPrompt, deleteProjectPrompt, sessionMenuItems, spaceRows, useConfirmDeleteSession, useEnvironmentActions, useEnvironmentCommands, useProjectSessionActions, useSessionMenuItems } from "./session-menu.js";
 import { SidebarFrame, useSidebarFrame } from "./SidebarFrame.js";
 import { SidebarGroupHeader } from "./SidebarGroupHeader.js";
+import { SidebarChip, SidebarDecoration } from "./SidebarDecoration.js";
+import { SidebarRowView } from "./SidebarRowView.js";
 import { SidebarSearchRow } from "./SidebarSearchRow.js";
 import { SidebarSessionRow } from "./SidebarSessionRow.js";
 import { usePinnedProjects } from "./usePinnedProjects.js";
@@ -17,10 +19,12 @@ import { NewSessionButton, SessionSidebar } from "./SessionSidebar.js";
 import { SidebarFilterMenu } from "./SidebarFilterMenu.js";
 import { SidebarCompactingIndicator, SidebarFooter, SidebarSignInPrompt, SidebarUsageIndicator } from "./SidebarFooter.js";
 import { SidebarToggleButton } from "./SidebarToggleButton.js";
+import { createSidebarCollapsed } from "./collapsed.js";
 import { useSessionActivity } from "./useSessionActivity.js";
 import { useCompactionProgress } from "./useCompactionProgress.js";
 import { useSessionBadges } from "./useSessionBadges.js";
 import { useSessionDirectoryView } from "./useSessionDirectoryView.js";
 import { useMainSession } from "./use-main-session.js";
+import { useSaveViewAsSpace } from "./useSaveViewAsSpace.js";
 import { ARRIVAL_MS, createSidebarLive, useArrival } from "./sidebar-live.js";
-export { ARRIVAL_MS, EnvironmentChip, ICON_PICKER_WIDTH, IconPicker, MainSessionRow, NewSessionButton, ProjectChip, ProjectIconButton, SessionSidebar, SidebarCompactingIndicator, SidebarFilterMenu, SidebarFooter, SidebarFrame, SidebarGroupHeader, SidebarHostProvider, SidebarSearchRow, SidebarSessionRow, SidebarSignInPrompt, SidebarToggleButton, SidebarUsageIndicator, SpaceGlyph, SpaceSwitcher, SpacesSection, archiveProjectPrompt, createSidebarLive, deleteProjectPrompt, sessionMenuItems, spaceRows, useArrival, useCompactionProgress, useConfirmDeleteSession, useEnvironmentActions, useEnvironmentCommands, useMainSession, usePinnedProjects, useProjectIcons, useProjectSessionActions, useSessionActivity, useSessionBadges, useSessionDirectoryView, useSessionMenuItems, useSessionSearch, useSidebarFrame, useSidebarHost, useSidebarKeyboardNav, useSidebarLabels, useSidebarNotice };
+export { ARRIVAL_MS, EnvironmentChip, ICON_PICKER_WIDTH, IconPicker, MainSessionRow, NewSessionButton, ProjectChip, ProjectIconButton, ProjectIconGlyph, SessionSidebar, SidebarChip, SidebarCompactingIndicator, SidebarDecoration, SidebarFilterMenu, SidebarFooter, SidebarFrame, SidebarGroupHeader, SidebarHostProvider, SidebarRowView, SidebarSearchRow, SidebarSessionRow, SidebarSignInPrompt, SidebarToggleButton, SidebarUsageIndicator, SpaceGlyph, SpaceSwitcher, SpacesSection, archiveProjectPrompt, createSidebarCollapsed, createSidebarLive, deleteProjectPrompt, sessionMenuItems, spaceRows, useArrival, useCompactionProgress, useConfirmDeleteSession, useEnvironmentActions, useEnvironmentCommands, useMainSession, usePinnedProjects, useProjectIcons, useProjectSessionActions, useSaveViewAsSpace, useSessionActivity, useSessionBadges, useSessionDirectoryView, useSessionMenuItems, useSessionSearch, useSidebarFrame, useSidebarHost, useSidebarKeyboardNav, useSidebarLabels, useSidebarNotice };

package/dist/chat/sidebar/session-menu.d.ts

@@ -130,6 +130,8 @@ interface SidebarProject {
   path: string;
   /** The space the list shows. */
   spaceId: string;
+  /** Its repository, when its group also lists the repository's sessions on other machines. */
+  repoKey?: string;
 }
 /**
  * A project header's archive and delete: list the project's conversations in its space (archived ones too),