zidane-ui 9.0.4 → 9.1.3

package/dist/session/ProjectHome.js

@@ -0,0 +1,518 @@
+import { IconButton } from "../components/IconButton.js";
+import { RowActionsMenu } from "../components/RowActionsMenu.js";
+import { useDisplayPath } from "../hooks/useDisplayPath.js";
+import { readPersisted, writePersisted } from "../hooks/usePersistedState.js";
+import { useSessionLabels } from "./useSessionLabels.js";
+import { PanelContentView } from "../workspace/PanelContentView.js";
+import { useExtensionPanels } from "../workspace/WorkspaceProvider.js";
+import { ExtensionSlot } from "../extensions/ExtensionSlot.js";
+import { ProjectMenu } from "../chat/composer/ProjectMenu.js";
+import { EMPTY_HOME_PREFS, arrangeHomeBlocks, hideHomeBlock, homeBlocksOf, homeRows, moveHomeBlock, parseHomePrefs, placeHomeBlock, setHomeBlockView, setHomeBlockWidth, showHomeBlock } from "./headless/home-layout.js";
+import { useUsageSummary } from "./useUsageSummary.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/session/ProjectHome.tsx
+const PREFS_KEY = "zidane.projectHome";
+function readAllPrefs() {
+	return readPersisted(PREFS_KEY, parseHomePrefs) ?? {};
+}
+/** One project's arrangement, kept in local storage. */
+function useHomePrefs(projectKey) {
+	const [all, setAll] = useState(readAllPrefs);
+	const update = useCallback((change) => {
+		setAll((current) => {
+			const prev = current[projectKey] ?? EMPTY_HOME_PREFS;
+			const next = change(prev);
+			if (next === prev) return current;
+			const merged = {
+				...current,
+				[projectKey]: next
+			};
+			writePersisted(PREFS_KEY, JSON.stringify(merged));
+			return merged;
+		});
+	}, [projectKey]);
+	return [all[projectKey] ?? EMPTY_HOME_PREFS, update];
+}
+/**
+* Renders the project home.
+*
+* @param props - The {@link ProjectHomeProps}.
+*/
+function ProjectHome({ panels, cwd, projectKey, project, switcher, blocksUnavailable = false, defaultBlocks, onOpenSession, onOpenPath, onOpenRepo, onOpenFiles, onRevealPath, onOpenInEditor, now: nowProp, className = "", style }) {
+	const labels = useSessionLabels();
+	const catalog = useExtensionPanels(panels, panels ? cwd : null);
+	const blocks = useMemo(() => homeBlocksOf(catalog), [catalog]);
+	const [prefs, updatePrefs] = useHomePrefs(projectKey);
+	const { shown, hidden } = useMemo(() => arrangeHomeBlocks(blocks, prefs, defaultBlocks), [
+		blocks,
+		prefs,
+		defaultBlocks
+	]);
+	const rows = useMemo(() => homeRows(shown), [shown]);
+	const move = useCallback((id, delta) => updatePrefs((p) => moveHomeBlock(p, arrangeHomeBlocks(blocks, p, defaultBlocks).shown, id, delta)), [
+		updatePrefs,
+		blocks,
+		defaultBlocks
+	]);
+	const place = useCallback((id, target) => updatePrefs((p) => placeHomeBlock(p, arrangeHomeBlocks(blocks, p, defaultBlocks).shown, id, target)), [
+		updatePrefs,
+		blocks,
+		defaultBlocks
+	]);
+	const setWidth = useCallback((id, width) => updatePrefs((p) => setHomeBlockWidth(p, id, width)), [updatePrefs]);
+	const hide = useCallback((id) => updatePrefs((p) => hideHomeBlock(p, id)), [updatePrefs]);
+	const show = useCallback((id) => updatePrefs((p) => showHomeBlock(p, blocks, id, defaultBlocks)), [
+		updatePrefs,
+		blocks,
+		defaultBlocks
+	]);
+	const [editing, setEditing] = useState(false);
+	const customize = Boolean(panels) && !blocksUnavailable && blocks.length > 0 ? /* @__PURE__ */ jsx(CustomizeControls, {
+		editing,
+		onEditing: setEditing,
+		hidden,
+		onShow: show
+	}) : null;
+	const setView = useCallback((id, control, value) => updatePrefs((p) => setHomeBlockView(p, id, control, value)), [updatePrefs]);
+	const card = (block, index) => /* @__PURE__ */ jsx(HomeBlockCard, {
+		panels,
+		cwd,
+		block,
+		view: prefs.views[block.id],
+		first: index === 0,
+		last: index === shown.length - 1,
+		editing,
+		onMove: move,
+		onPlace: place,
+		onWidth: setWidth,
+		onHide: hide,
+		onView: setView,
+		onOpenSession,
+		onOpenPath
+	}, block.id);
+	let index = 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `zg-welcome-in mx-auto w-full max-w-[760px] pt-0 pb-8 text-zg-ui text-[var(--zg-text)] ${className}`,
+		style,
+		"aria-label": labels.projectHomeLabel(project?.name ?? null),
+		role: "region",
+		children: [
+			project ? /* @__PURE__ */ jsx(ProjectHeader, {
+				project,
+				action: customize,
+				...switcher ? { switcher } : {},
+				...onOpenRepo ? { onOpenRepo } : {},
+				...onOpenFiles ? { onOpenFiles } : {},
+				...onRevealPath ? { onRevealPath } : {},
+				...onOpenInEditor ? { onOpenInEditor } : {}
+			}) : /* @__PURE__ */ jsx(Greeting, {
+				now: nowProp,
+				action: customize
+			}),
+			/* @__PURE__ */ jsx(ExtensionSlot, {
+				at: "home.block",
+				className: "mb-3 px-1 flex-wrap"
+			}),
+			blocksUnavailable ? /* @__PURE__ */ jsx("p", {
+				className: "px-1 m-0 text-zg-label text-[var(--zg-text-muted)]",
+				children: labels.projectHomeRemote
+			}) : panels && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-3",
+				children: rows.map((row) => row.kind === "full" ? card(row.block, index++) : /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-3",
+					children: [card(row.blocks[0], index++), card(row.blocks[1], index++)]
+				}, `${row.blocks[0].id}+${row.blocks[1].id}`))
+			})
+		]
+	});
+}
+function ProjectHeader({ project, switcher, action, onOpenRepo, onOpenFiles, onRevealPath, onOpenInEditor }) {
+	const labels = useSessionLabels();
+	const [menuAt, setMenuAt] = useState(null);
+	const items = [...onRevealPath ? [{
+		id: "reveal",
+		label: labels.projectHomeReveal,
+		onSelect: () => onRevealPath(project.path)
+	}] : [], ...onOpenInEditor ? [{
+		id: "editor",
+		label: labels.projectHomeOpenEditor,
+		onSelect: () => onOpenInEditor(project.path)
+	}] : []];
+	const shownPath = useDisplayPath().path(project.path, project.hostId);
+	const chip = "zg-track-chip zg-meta inline-flex items-center gap-1 h-[18px] px-1.5 max-w-full min-w-0";
+	const pressable = "zg-press-subtle border-0 cursor-pointer hover:!text-[var(--zg-text)] transition-colors";
+	const repo = project.repo;
+	const repoInner = repo && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: `${repo.icon ?? "i-ph-git-branch"} shrink-0`
+	}), /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: repo.name
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-6 px-1 flex items-start gap-3 min-w-0",
+		children: [
+			project.icon && /* @__PURE__ */ jsx("span", {
+				className: "shrink-0 flex items-center h-7",
+				children: project.icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex flex-col items-start gap-1",
+				children: [
+					/* @__PURE__ */ jsx("h1", {
+						className: "text-zg-title leading-7 font-medium tracking-[-0.01em] m-0 truncate max-w-full",
+						children: switcher ? /* @__PURE__ */ jsx(ProjectMenu, {
+							label: project.name,
+							title: labels.projectHomeSwitch,
+							active: true,
+							ariaLabel: labels.projectHomeSwitch,
+							projects: switcher.projects,
+							current: switcher.current,
+							onPick: switcher.onPick,
+							...project.hostId ? { hostId: project.hostId } : {},
+							...switcher.onImportRepo ? { onImportRepo: switcher.onImportRepo } : {},
+							...switcher.onSelectDirectory ? { onSelectDirectory: switcher.onSelectDirectory } : {},
+							align: "start",
+							trigger: (props, open) => /* @__PURE__ */ jsxs("button", {
+								...props,
+								type: "button",
+								title: labels.projectHomeSwitch,
+								className: "zg-press-soft group inline-flex items-center gap-1.5 max-w-full min-w-0 p-0 bg-transparent border-0 cursor-pointer font-[inherit] text-[length:inherit] leading-[inherit] tracking-[inherit] text-[var(--zg-text)]",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "truncate",
+									children: project.name
+								}), /* @__PURE__ */ jsx("span", {
+									"aria-hidden": true,
+									className: `i-ph-caret-down text-zg-label shrink-0 text-[var(--zg-text-muted)] transition-opacity ${open ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100"}`
+								})]
+							})
+						}) : project.name
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-1.5 min-w-0 max-w-full -ml-1.5",
+						children: [repo && (onOpenRepo ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onOpenRepo,
+							title: labels.projectHomeOpenRepo(repo.name, repo.web),
+							className: `${chip} ${pressable}`,
+							children: repoInner
+						}) : /* @__PURE__ */ jsx("span", {
+							className: chip,
+							title: repo.name,
+							children: repoInner
+						})), onOpenFiles ? /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onOpenFiles,
+							onContextMenu: items.length > 0 ? (event) => {
+								event.preventDefault();
+								setMenuAt({
+									x: event.clientX,
+									y: event.clientY
+								});
+							} : void 0,
+							title: labels.projectHomeOpenFiles(project.path),
+							className: `${chip} ${pressable}`,
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: shownPath
+							})
+						}) : /* @__PURE__ */ jsx("span", {
+							className: chip,
+							title: project.path,
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: shownPath
+							})
+						})]
+					}),
+					items.length > 0 && /* @__PURE__ */ jsx(RowActionsMenu, {
+						open: menuAt !== null,
+						position: menuAt,
+						onClose: () => setMenuAt(null),
+						items
+					})
+				]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "ml-auto shrink-0 flex items-center h-7",
+				children: action
+			})
+		]
+	});
+}
+function Greeting({ now: nowProp, action }) {
+	const labels = useSessionLabels();
+	const now = useMemo(() => nowProp ?? /* @__PURE__ */ new Date(), [nowProp]);
+	const { summary } = useUsageSummary("all");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-6 px-1 flex items-start gap-3",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "text-zg-title leading-7 font-medium tracking-[-0.01em] m-0",
+				children: labels.welcomeGreeting(now.getHours(), summary?.userName ?? null)
+			}), /* @__PURE__ */ jsx("p", {
+				className: "m-0 mt-1 text-zg-label leading-4 text-[var(--zg-text-muted)]",
+				children: labels.welcomeDate(now)
+			})]
+		}), action && /* @__PURE__ */ jsx("div", {
+			className: "ml-auto shrink-0 flex items-center h-7",
+			children: action
+		})]
+	});
+}
+/** Customize, or while editing: Add block (the hidden blocks) and Done. */
+function CustomizeControls({ editing, onEditing, hidden, onShow }) {
+	const labels = useSessionLabels();
+	const anchor = useRef(null);
+	const [open, setOpen] = useState(false);
+	const button = "zg-press-subtle inline-flex items-center gap-1 h-6 px-2 rounded-zg-md bg-transparent border-0 cursor-pointer text-zg-label text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] hover:bg-[var(--zg-row-hover)] transition-colors";
+	if (!editing) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onEditing(true),
+		className: button,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "i-ph-sliders-horizontal"
+		}), labels.projectHomeCustomize]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [hidden.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+			ref: anchor,
+			type: "button",
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			onClick: () => setOpen(true),
+			className: button,
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "i-ph-plus"
+			}), labels.projectHomeAddBlock]
+		}), /* @__PURE__ */ jsx(RowActionsMenu, {
+			open,
+			anchorRef: anchor,
+			onClose: () => setOpen(false),
+			items: hidden.map((b) => ({
+				id: b.id,
+				label: b.label,
+				onSelect: () => onShow(b.id)
+			}))
+		})] }), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => onEditing(false),
+			className: `${button} text-[var(--zg-text)]`,
+			children: labels.projectHomeDone
+		})]
+	});
+}
+/**
+* One block's content: loaded for its view, reloaded when the panel says it
+* changed, its live updates kept on while it shows, and loaded again when
+* the window comes back after `BLOCK_STALE_MS` (nothing while nobody looks).
+* A slower answer for an older view never lands over a newer one.
+*/
+function useHomeBlock(panels, cwd, id, view) {
+	const viewKey = JSON.stringify(view ?? {});
+	const [rev, setRev] = useState(0);
+	const key = `${cwd}\u0000${id}\u0000${viewKey}\u0000${rev}`;
+	const [loaded, setLoaded] = useState({
+		key: "",
+		content: null,
+		error: null
+	});
+	const loadedAt = useRef(0);
+	useEffect(() => {
+		let current = true;
+		const picked = JSON.parse(viewKey);
+		const ctx = {
+			surface: "home",
+			...Object.keys(picked).length > 0 ? { view: picked } : {}
+		};
+		panels.load(cwd, id, ctx).then((content) => {
+			if (!current) return;
+			loadedAt.current = Date.now();
+			setLoaded({
+				key,
+				content,
+				error: null
+			});
+		}, (err) => current && setLoaded((s) => ({
+			key,
+			content: s.content,
+			error: err instanceof Error ? err.message : String(err)
+		})));
+		return () => {
+			current = false;
+		};
+	}, [
+		panels,
+		cwd,
+		id,
+		viewKey,
+		key
+	]);
+	useEffect(() => panels.watch?.(cwd, id), [
+		panels,
+		cwd,
+		id
+	]);
+	useEffect(() => panels.subscribe?.((change) => {
+		if (change.cwd === cwd && change.panelId === id) setRev((r) => r + 1);
+	}), [
+		panels,
+		cwd,
+		id
+	]);
+	useEffect(() => {
+		const back = () => {
+			if (document.visibilityState === "visible" && Date.now() - loadedAt.current >= BLOCK_STALE_MS) setRev((r) => r + 1);
+		};
+		window.addEventListener("focus", back);
+		document.addEventListener("visibilitychange", back);
+		return () => {
+			window.removeEventListener("focus", back);
+			document.removeEventListener("visibilitychange", back);
+		};
+	}, []);
+	const reload = useCallback(() => setRev((r) => r + 1), []);
+	return {
+		content: loaded.content,
+		error: loaded.error,
+		loading: loaded.key !== key,
+		reload
+	};
+}
+/** A block shown longer than this loads again when the window comes back. */
+const BLOCK_STALE_MS = 3e5;
+/** What a dragged block card carries: its id. */
+const DRAG_TYPE = "application/x-zidane-home-block";
+const HomeBlockCard = memo(function HomeBlockCard({ panels, cwd, block, view, first, last, editing, onMove, onPlace, onWidth, onHide, onView, onOpenSession, onOpenPath }) {
+	const labels = useSessionLabels();
+	const { content, loading, error, reload } = useHomeBlock(panels, cwd, block.id, view);
+	const [dropTarget, setDropTarget] = useState(false);
+	const menuAnchor = useRef(null);
+	const [menuOpen, setMenuOpen] = useState(false);
+	const title = content?.title ?? block.label;
+	const items = [{
+		id: "refresh",
+		label: labels.projectHomeRefresh,
+		onSelect: reload
+	}, {
+		id: "hide",
+		label: labels.projectHomeHide,
+		group: "visibility",
+		onSelect: () => onHide(block.id)
+	}];
+	const half = block.width === "half";
+	const onAction = useCallback((actionId, payload) => {
+		panels.action(cwd, block.id, actionId, payload, {
+			surface: "home",
+			...view ? { view } : {}
+		}).catch((err) => console.error("[zidane-ui] block action failed", err));
+	}, [
+		panels,
+		cwd,
+		block.id,
+		view
+	]);
+	const onControl = useCallback((control, value) => onView(block.id, control, value), [onView, block.id]);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": title,
+		className: `zg-raised border rounded-zg-xl overflow-hidden p-4 min-w-0 transition-shadow ${editing ? "cursor-grab active:cursor-grabbing" : ""} ${dropTarget ? "outline outline-2 outline-[var(--zg-ring)]" : ""}`,
+		"data-block": block.id,
+		"data-editing": editing ? "" : void 0,
+		draggable: editing,
+		onDragStart: editing ? (event) => {
+			event.dataTransfer.setData(DRAG_TYPE, block.id);
+			event.dataTransfer.effectAllowed = "move";
+		} : void 0,
+		onDragOver: editing ? (event) => {
+			if (!event.dataTransfer.types.includes(DRAG_TYPE)) return;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = "move";
+			setDropTarget(true);
+		} : void 0,
+		onDragLeave: editing ? () => setDropTarget(false) : void 0,
+		onDrop: editing ? (event) => {
+			event.preventDefault();
+			setDropTarget(false);
+			const id = event.dataTransfer.getData(DRAG_TYPE);
+			if (id) onPlace(id, block.id);
+		} : void 0,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex items-center justify-between gap-2 mb-3 min-h-6",
+			children: [/* @__PURE__ */ jsxs("h2", {
+				className: "zg-section-label m-0 flex items-center gap-1.5 min-w-0",
+				children: [
+					editing && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						title: labels.projectHomeDrag(title),
+						className: "i-ph-dots-six-vertical shrink-0 text-[var(--zg-text-muted)]"
+					}),
+					block.icon?.gui && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: `${block.icon.gui} shrink-0`
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: title
+					})
+				]
+			}), editing ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-0.5 shrink-0",
+				children: [
+					!first && /* @__PURE__ */ jsx(IconButton, {
+						icon: "i-ph-arrow-up",
+						size: "xs",
+						label: labels.projectHomeMoveUp,
+						onClick: () => onMove(block.id, -1)
+					}),
+					!last && /* @__PURE__ */ jsx(IconButton, {
+						icon: "i-ph-arrow-down",
+						size: "xs",
+						label: labels.projectHomeMoveDown,
+						onClick: () => onMove(block.id, 1)
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: half ? "i-ph-arrows-out-line-horizontal" : "i-ph-arrows-in-line-horizontal",
+						size: "xs",
+						label: half ? labels.projectHomeFullWidth : labels.projectHomeHalfWidth,
+						onClick: () => onWidth(block.id, half ? "full" : "half")
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						icon: "i-ph-eye-slash",
+						size: "xs",
+						label: labels.projectHomeHide,
+						onClick: () => onHide(block.id)
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+				ref: menuAnchor,
+				icon: "i-ph-dots-three",
+				size: "xs",
+				label: labels.projectHomeBlockMenu(title),
+				"aria-haspopup": "menu",
+				"aria-expanded": menuOpen,
+				onClick: () => setMenuOpen(true)
+			}), /* @__PURE__ */ jsx(RowActionsMenu, {
+				open: menuOpen,
+				anchorRef: menuAnchor,
+				onClose: () => setMenuOpen(false),
+				items
+			})] })]
+		}), /* @__PURE__ */ jsx(PanelContentView, {
+			variant: "block",
+			content,
+			loading,
+			error,
+			onAction,
+			onControl,
+			...onOpenSession ? { onOpenSession } : {},
+			...onOpenPath ? { onOpenPath } : {}
+		})]
+	});
+});
+//#endregion
+export { ProjectHome };

package/dist/session/ProviderUsageProvider.d.ts

@@ -1,4 +1,4 @@
-import { ProviderUsageView } from "./headless/usage.js";
+import { ProviderUsageState, ProviderUsageView } from "./headless/usage.js";
 import { ReactNode } from "react";
 //#region src/session/ProviderUsageProvider.d.ts
 /** Props for {@link ProviderUsageProvider}. */
@@ -20,6 +20,8 @@ interface ProviderUsage extends ProviderUsageView {
   refresh: () => void;
   /** Whether the host reports subscription usage at all. */
   available: boolean;
+  /** Spends one banked reset on a snapshot's account, then refreshes. `null`: the host can't redeem. */
+  redeemReset: ProviderUsageState['redeemReset'];
 }
 /**
  * The host's subscription usage: the model providers' windows, GitHub's limits, and a manual refresh. Outside a

package/dist/session/ProviderUsageProvider.js

@@ -28,9 +28,11 @@ function stateOf(usage) {
 	let state = states.get(usage);
 	if (!state) {
 		const github = usage.github;
+		const redeemReset = usage.redeemReset;
 		state = createProviderUsageState({
 			providers: (options) => providers(options),
-			...github ? { github: (options) => github(options) } : {}
+			...github ? { github: (options) => github(options) } : {},
+			...redeemReset ? { redeemReset: (target) => redeemReset(target) } : {}
 		});
 		states.set(usage, state);
 	}
@@ -83,7 +85,8 @@ function useProviderUsage() {
 	return useMemo(() => ({
 		...view,
 		refresh,
-		available: state !== null
+		available: state !== null,
+		redeemReset: state?.redeemReset ?? null
 	}), [
 		view,
 		refresh,

package/dist/session/QueueTab.js

@@ -5,11 +5,11 @@ import { KeyCombo } from "../components/Keycap.js";
 import { useLightbox } from "../components/Lightbox.js";
 import { PanelEmpty } from "../components/PanelEmpty.js";
 import { useSessionHost, useSessionQueue } from "./SessionProvider.js";
+import { useSessionLabels } from "./useSessionLabels.js";
 import { isPdfAttachment, isTextLike, pastedTextFilename, readAttachment, shouldFoldPasteToAttachment } from "../chat/composer/attachment-ingest.js";
 import { PdfPreview } from "../chat/PdfPreview.js";
 import { AttachmentNotices } from "../chat/composer/attachments.js";
 import { useAttachmentNotices } from "../chat/composer/useAttachmentIngest.js";
-import { useSessionLabels } from "./useSessionLabels.js";
 import { attachmentsKey, stagedToWire, wireToStaged } from "./headless/queue-attachments.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";

package/dist/session/SessionCacheFacts.js

@@ -1,8 +1,8 @@
 import { MetaChip } from "../components/Form.js";
 import { useStaysMounted } from "../motion/collapse.js";
 import { useSessionHost } from "./SessionProvider.js";
-import { Caret } from "../chat/transcript/frame.js";
 import { useSessionLabels } from "./useSessionLabels.js";
+import { Caret } from "../chat/transcript/frame.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { formatCount } from "zidane/chat/pure";

package/dist/session/SessionDetailsDialog.d.ts

@@ -56,7 +56,7 @@ interface SessionDetailsFacts {
   updatedAt?: number;
   /** The folder; `''` for a chat without one. */
   cwd: string;
-  /** The folder as shown (a long path giving way in the middle). Default: `cwd`. */
+  /** The folder as shown (its home folder as `~`, a long path giving way in the middle). Default: `cwd`. */
   folderDisplay?: string;
   /** The project root, the description when there is no folder. */
   projectRoot?: string;

package/dist/session/SessionDetailsDialog.js

@@ -2,9 +2,10 @@ import { IconButton } from "../components/IconButton.js";
 import { BTN_LG_DANGER, BTN_LG_SECONDARY, BTN_LG_SOLID, BTN_SECONDARY } from "../components/button.js";
 import { Tray } from "../components/Surface.js";
 import { INPUT_CLASS, MetaChip } from "../components/Form.js";
+import { useDisplayPath } from "../hooks/useDisplayPath.js";
 import { useSessionHost } from "./SessionProvider.js";
-import { providerColor } from "../chat/provider-color.js";
 import { useSessionLabels } from "./useSessionLabels.js";
+import { providerColor } from "../chat/provider-color.js";
 import { useHydrated } from "../hooks/useHydrated.js";
 import { ShellFrame } from "./SessionShell.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -45,6 +46,7 @@ function SessionDetailsDialog({ session, onRename, confirmDelete, onDelete, spac
 	const [busy, setBusy] = useState(null);
 	const [error, setError] = useState(null);
 	const [exportedPath, setExportedPath] = useState(null);
+	const display = useDisplayPath();
 	const [movedTo, setMovedTo] = useState(null);
 	const spaceId = movedTo ?? spaceProp;
 	const titleStatusOf = details?.titleStatus;
@@ -367,7 +369,8 @@ function SessionDetailsDialog({ session, onRename, confirmDelete, onDelete, spac
 							" ",
 							/* @__PURE__ */ jsx("span", {
 								className: "text-[var(--zg-text)]",
-								children: exportedPath
+								title: exportedPath,
+								children: display.path(exportedPath)
 							})
 						]
 					}) : labels.detailsExportHint,

package/dist/session/SessionHeader.d.ts

@@ -42,6 +42,8 @@ interface SessionHeaderProps {
   onMenuOpenChange?: (open: boolean) => void;
   /** The app's controls on the right. */
   toolbar?: ReactNode;
+  /** The session shown: its extensions' `session.header` items show before the toolbar. Default: `titleScope`. */
+  sessionId?: string;
   /** Extra classes on the root. */
   className?: string;
   /** Inline styles on the root (the app's chrome insets). */
@@ -53,6 +55,6 @@ interface SessionHeaderProps {
  * @param props - The session facts, the folder, details and rename handlers, the menu, the `toolbar`, `className` and
  *   `style`.
  */
-declare function SessionHeader({ title, titleDisplay, titleScope, cwd, isMain, running, server, onPickFolder, onOpenDetails, onRename, renaming, onRenamingChange, menuItems, onMenuOpenChange, toolbar, className, style }: SessionHeaderProps): import("react").JSX.Element;
+declare function SessionHeader({ title, titleDisplay, titleScope, cwd, isMain, running, server, onPickFolder, onOpenDetails, onRename, renaming, onRenamingChange, menuItems, onMenuOpenChange, toolbar, sessionId, className, style }: SessionHeaderProps): import("react").JSX.Element;
 //#endregion
 export { SessionHeader, SessionHeaderProps, SessionHeaderServer };

package/dist/session/SessionHeader.js

@@ -2,6 +2,7 @@ import { TitleText } from "../motion/title-text.js";
 import { EditableTitle } from "../components/EditableTitle.js";
 import { RowActionsMenu } from "../components/RowActionsMenu.js";
 import { useSessionLabels } from "./useSessionLabels.js";
+import { ExtensionSlot } from "../extensions/ExtensionSlot.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 //#region src/session/SessionHeader.tsx
@@ -25,7 +26,7 @@ function folderBasename(path) {
 * @param props - The session facts, the folder, details and rename handlers, the menu, the `toolbar`, `className` and
 *   `style`.
 */
-function SessionHeader({ title, titleDisplay, titleScope, cwd, isMain = false, running = false, server, onPickFolder, onOpenDetails, onRename, renaming = false, onRenamingChange, menuItems, onMenuOpenChange, toolbar, className = "", style }) {
+function SessionHeader({ title, titleDisplay, titleScope, cwd, isMain = false, running = false, server, onPickFolder, onOpenDetails, onRename, renaming = false, onRenamingChange, menuItems, onMenuOpenChange, toolbar, sessionId = titleScope, className = "", style }) {
 	const labels = useSessionLabels();
 	const [menuAt, setMenuAt] = useState(null);
 	const setMenu = (at) => {
@@ -142,6 +143,11 @@ function SessionHeader({ title, titleDisplay, titleScope, cwd, isMain = false, r
 				})
 			}),
 			/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+			/* @__PURE__ */ jsx(ExtensionSlot, {
+				at: "session.header",
+				...sessionId ? { sessionId } : {},
+				className: "zg-no-drag shrink"
+			}),
 			toolbar,
 			menuItems && /* @__PURE__ */ jsx(RowActionsMenu, {
 				open: menuAt !== null,