zidane-ui 9.1.13 → 9.1.14

package/dist/onboarding/steps/connect/ProviderReady.js

@@ -1,6 +1,8 @@
 import { buttonClass } from "../../../components/button.js";
+import { Notice } from "../../../components/Notice.js";
 import { Segmented } from "../../../components/Segmented.js";
 import "../../../components/Form.js";
+import { errorMessage } from "../../../components/report-error.js";
 import { SegmentSpinner } from "../../../components/SegmentSpinner.js";
 import { useOnboarding, useOnboardingLabels } from "../../OnboardingProvider.js";
 import { providerReadyText } from "./ready-text.js";
@@ -147,7 +149,7 @@ function LiveTest({ provider, model, label }) {
 				result: {
 					ok: false,
 					durationMs: 0,
-					message: failure instanceof Error ? failure.message : String(failure)
+					message: errorMessage(failure)
 				}
 			});
 		});
@@ -166,28 +168,31 @@ function LiveTest({ provider, model, label }) {
 		className: "flex items-center gap-2 text-zg-label text-[var(--zg-text-muted)]",
 		children: [/* @__PURE__ */ jsx(SegmentSpinner, {}), labels.testing]
 	});
+	if (!result.ok) return /* @__PURE__ */ jsx(Notice, {
+		tone: "error",
+		compact: true,
+		...result.message ? { detail: result.message } : {},
+		action: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setRound((n) => n + 1),
+			className: `${buttonClass({
+				variant: "ghost",
+				size: "sm"
+			})} ml-auto`,
+			children: labels.testAgain
+		}),
+		children: labels.testFailed
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
 		className: "flex items-center gap-2 min-w-0 text-zg-label",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				className: `${result.ok ? "i-ph-check-circle text-zg-success" : "i-ph-warning-circle text-zg-danger"} text-zg-body shrink-0`
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: `min-w-0 break-words ${result.ok ? "text-[var(--zg-text-muted)]" : "text-zg-danger"}`,
-				children: result.ok ? labels.testOk(label ?? result.model ?? provider, (result.durationMs / 1e3).toFixed(1)) : `${labels.testFailed}: ${result.message ?? ""}`
-			}),
-			!result.ok && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => setRound((n) => n + 1),
-				className: `${buttonClass({
-					variant: "ghost",
-					size: "sm"
-				})} ml-auto`,
-				children: labels.testAgain
-			})
-		]
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "i-ph-check-circle text-zg-success text-zg-body shrink-0"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 break-words text-[var(--zg-text-muted)]",
+			children: labels.testOk(label ?? result.model ?? provider, (result.durationMs / 1e3).toFixed(1))
+		})]
 	});
 }
 //#endregion

package/dist/onboarding/steps/tasks.js

@@ -1,4 +1,5 @@
 import { buttonClass } from "../../components/button.js";
+import { Notice } from "../../components/Notice.js";
 import { MetaChip } from "../../components/Form.js";
 import { SegmentSpinner } from "../../components/SegmentSpinner.js";
 import { useOnboardingLabels } from "../OnboardingProvider.js";
@@ -47,22 +48,24 @@ function TaskChip({ task, className }) {
 */
 function TaskFailure({ task, onRetry, className, style }) {
 	const labels = useOnboardingLabels();
-	return /* @__PURE__ */ jsxs("div", {
-		className: ["flex items-start gap-2 px-3 pb-2 min-w-0", className].filter(Boolean).join(" "),
+	return /* @__PURE__ */ jsx("div", {
+		className: ["px-3 pb-2 min-w-0", className].filter(Boolean).join(" "),
 		style,
-		children: [/* @__PURE__ */ jsx("span", {
-			role: "alert",
-			className: "flex-1 min-w-0 text-zg-label text-zg-danger break-words",
-			children: task.message ?? labels.taskFailed
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: onRetry,
-			className: buttonClass({
-				variant: "ghost",
-				size: "xs"
+		children: /* @__PURE__ */ jsx(Notice, {
+			tone: "error",
+			compact: true,
+			...task.message ? { detail: task.message } : {},
+			action: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onRetry,
+				className: buttonClass({
+					variant: "ghost",
+					size: "xs"
+				}),
+				children: labels.retry
 			}),
-			children: labels.retry
-		})]
+			children: labels.taskFailedNote
+		})
 	});
 }
 //#endregion

package/dist/palette/app-sources.js

@@ -1,5 +1,5 @@
-import { getMergedKeybindings } from "../keybindings/headless/overrides.js";
 import { usePendingApprovals } from "../approvals/ApprovalsProvider.js";
+import { getMergedKeybindings } from "../keybindings/headless/overrides.js";
 import { useKeybindingsHost } from "../keybindings/KeybindingsProvider.js";
 import { useKeyCommandActions, useKeyCommandRegistry } from "../keybindings/KeyCommands.js";
 import { usePresenceMap } from "../machines/MachinesProvider.js";

package/dist/server/sse-handler.js

@@ -1,5 +1,6 @@
 import { applyLiveEvent, finishLive } from "../chat/headless/streams/live-events.js";
 import { SSE_PROTOCOL_HEADER, attachmentsFromPreviews, encodeSseRecord, formatCursor, parseCursor } from "../adapters/sse-protocol.js";
+import { applyHistoryOp } from "zidane/chat/pure";
 import { createChatHost, eventsFromTurns } from "zidane/chat";
 import { randomUUID } from "node:crypto";
 //#region src/server/sse-handler.ts
@@ -24,12 +25,12 @@ const json = (body, status = 200) => new Response(JSON.stringify(body), {
 	status,
 	headers: {
 		"Content-Type": "application/json",
-		[SSE_PROTOCOL_HEADER]: String(1)
+		[SSE_PROTOCOL_HEADER]: String(2)
 	}
 });
 const empty = (status) => new Response(null, {
 	status,
-	headers: { [SSE_PROTOCOL_HEADER]: String(1) }
+	headers: { [SSE_PROTOCOL_HEADER]: String(2) }
 });
 /**
 * Creates a Web-standard request handler that runs zidane's chat engine and serves it over HTTP and server-sent events, for {@link createSseHost} to talk to. Every request goes through `authorize` first, and the agent's tools run on this machine.
@@ -93,6 +94,7 @@ function createSseHandler(options) {
 				return;
 			}
 			case "run:start":
+				channels.get(sessionId).running = true;
 				record(sessionId, {
 					type: "run",
 					data: { running: true }
@@ -101,7 +103,9 @@ function createSseHandler(options) {
 				return;
 			case "run:end": {
 				const ch = channels.get(sessionId);
+				delete ch.running;
 				if (ch.loaded) ch.events = finishLive(ch.events);
+				if (ch.loaded && ch.reloadDue) reload(sessionId, ch);
 				const ok = signal.ok !== false;
 				record(sessionId, {
 					type: "run",
@@ -126,9 +130,128 @@ function createSseHandler(options) {
 					data: { requestId: String(signal.requestId) }
 				});
 				return;
-			case "sessions:changed": if (signal.op === "update") pushSession(sessionId);
+			case "sessions:changed":
+				if (signal.op === "update") pushSession(sessionId);
+				return;
+			case "history:changed": {
+				const change = signal;
+				const ch = channels.get(sessionId);
+				if (ch.loaded && ch.reloadDue) {} else if (ch.loaded) {
+					const context = ch.pos === void 0 ? {} : {
+						pos: ch.pos,
+						...ch.historyId !== void 0 ? { historyId: ch.historyId } : {}
+					};
+					const applied = applyHistoryOp(ch.events, change, context);
+					if ("refetch" in applied) {
+						if (ch.running) ch.reloadDue = true;
+						else reload(sessionId, ch);
+					} else {
+						ch.events = applied.rows;
+						ch.pos = applied.pos;
+						ch.historyId = applied.historyId;
+					}
+				} else ch.early.push({ change });
+				const { kind: _kind, sessionId: _id, ...data } = signal;
+				record(sessionId, {
+					type: "history",
+					data
+				});
+			}
 		}
 	}
+	/**
+	* Loads the session's transcript from its store, with its history position.
+	* The position is read first, so the turns loaded after it are at that
+	* position or past it (a write landed in between). Every history write
+	* announced from that position on is held while the transcript loads
+	* (`early`). Each one is then applied on top at its position, as a client
+	* applies it. A write the turns already hold changes nothing and moves the
+	* position on. A rewrite loads again, at the run's end if a run streams. So
+	* the position names the rows the channel serves, and every write a client
+	* applied is in them.
+	*
+	* The live events held meanwhile go on top as a client's first read merges
+	* its live lane (`mergeLiveTail`). Only the events after the last one whose
+	* turn the load holds are applied. A turn that streamed and was saved before
+	* the load read it is in the load already.
+	*/
+	const loadChannel = async (sessionId, ch) => {
+		const load = ++ch.loads;
+		const { env } = await start();
+		const position = env.store.getMeta ? await env.store.getMeta(sessionId) : await env.store.historyPosition?.(sessionId);
+		const data = await env.store.load(sessionId);
+		if (!data) return false;
+		if (ch.loads !== load) return true;
+		let events = eventsFromTurns(data.turns, data.runs);
+		let at = position ? {
+			pos: position.pos,
+			...position.historyId !== void 0 ? { historyId: position.historyId } : {}
+		} : {};
+		const loaded = /* @__PURE__ */ new Set();
+		for (const event of events) if (event.turnId) loaded.add(event.turnId);
+		let held = -1;
+		for (let i = ch.early.length - 1; i >= 0; i--) {
+			const item = ch.early[i];
+			if ("event" in item && item.event.turnId && loaded.has(item.event.turnId)) {
+				held = i;
+				break;
+			}
+		}
+		let reloadDue = false;
+		for (const [i, item] of ch.early.entries()) {
+			if ("event" in item) {
+				if (i > held) events = applyLiveEvent(events, item.event);
+				continue;
+			}
+			if (reloadDue) continue;
+			const applied = applyHistoryOp(events, item.change, at);
+			if ("refetch" in applied) {
+				if (!ch.running) {
+					reload(sessionId, ch);
+					return true;
+				}
+				reloadDue = true;
+				continue;
+			}
+			events = applied.rows;
+			at = {
+				pos: applied.pos,
+				...applied.historyId !== void 0 ? { historyId: applied.historyId } : {}
+			};
+		}
+		if (reloadDue) ch.reloadDue = true;
+		ch.events = events;
+		if (at.pos !== void 0) {
+			ch.pos = at.pos;
+			if (at.historyId !== void 0) ch.historyId = at.historyId;
+			else delete ch.historyId;
+		} else {
+			delete ch.pos;
+			delete ch.historyId;
+		}
+		ch.early = [];
+		ch.loaded = true;
+		if (ch.reloadDue && !ch.running) reload(sessionId, ch);
+		return true;
+	};
+	/** Reads the kept transcript again after a write it cannot apply in place (a rewrite). A hydrate waits for the read. */
+	const reload = (sessionId, ch) => {
+		ch.loaded = false;
+		ch.early = [];
+		delete ch.reloadDue;
+		ch.ready = loadChannel(sessionId, ch).then((found) => {
+			if (!found && channels.get(sessionId) === ch) channels.delete(sessionId);
+		}, () => {
+			if (channels.get(sessionId) === ch) channels.delete(sessionId);
+		});
+	};
+	/** Waits until the channel's latest load is in, because a load may start another. */
+	const settled = async (sessionId, ch) => {
+		for (let ready = ch.ready;; ready = ch.ready) {
+			await ready;
+			if (ch.ready === ready || channels.get(sessionId) !== ch) return;
+		}
+	};
 	const toSession = (engine, row) => {
 		const m = row.metadata ?? {};
 		const stored = row.status ?? "idle";
@@ -163,11 +286,11 @@ function createSseHandler(options) {
 	const channel = async (sessionId) => {
 		let ch = channels.get(sessionId);
 		if (!ch) {
-			const { env } = await start();
 			const created = {
 				ready: Promise.resolve(),
 				loaded: false,
 				early: [],
+				loads: 0,
 				events: [],
 				seq: 0,
 				buffer: [],
@@ -176,28 +299,21 @@ function createSseHandler(options) {
 			};
 			channels.set(sessionId, created);
 			created.ready = (async () => {
-				const data = await env.store.load(sessionId).catch((error) => {
+				if (!await loadChannel(sessionId, created).catch((error) => {
 					if (channels.get(sessionId) === created) channels.delete(sessionId);
 					throw error;
-				});
-				if (!data) {
-					channels.delete(sessionId);
-					return;
-				}
-				let events = eventsFromTurns(data.turns, data.runs);
-				for (const { event } of created.early) events = applyLiveEvent(events, event);
-				created.events = events;
-				created.early = [];
-				created.loaded = true;
+				})) channels.delete(sessionId);
 			})();
 			ch = created;
 		}
-		await ch.ready;
+		await settled(sessionId, ch);
 		return channels.get(sessionId) === ch ? ch : null;
 	};
 	const stream = (request, sessionId, ch) => {
 		const encoder = new TextEncoder();
 		const last = parseCursor(request.headers.get("Last-Event-ID"));
+		const version = Number(request.headers.get("X-Zidane-Chat-Protocol")) || 1;
+		const known = (rec) => rec.type !== "history" || version >= 2;
 		let cleanup = () => {};
 		const body = new ReadableStream({
 			start(controller) {
@@ -216,9 +332,11 @@ function createSseHandler(options) {
 				}));
 				else {
 					const after = last?.seq ?? ch.seq;
-					for (const b of ch.buffer) if (b.seq > after) write(encodeSseRecord(formatCursor(epoch, b.seq), b.record));
+					for (const b of ch.buffer) if (b.seq > after && known(b.record)) write(encodeSseRecord(formatCursor(epoch, b.seq), b.record));
 				}
-				const listener = (id, rec) => write(encodeSseRecord(id, rec));
+				const listener = (id, rec) => {
+					if (known(rec)) write(encodeSseRecord(id, rec));
+				};
 				ch.listeners.add(listener);
 				const beat = setInterval(() => write(": keep-alive\n\n"), heartbeatMs);
 				let closed = false;
@@ -247,7 +365,7 @@ function createSseHandler(options) {
 			"Cache-Control": "no-cache, no-transform",
 			Connection: "keep-alive",
 			"X-Accel-Buffering": "no",
-			[SSE_PROTOCOL_HEADER]: String(1)
+			[SSE_PROTOCOL_HEADER]: String(2)
 		} });
 	};
 	const readJson = async (request) => {
@@ -345,6 +463,10 @@ function createSseHandler(options) {
 				events: ch.events,
 				running: engine.isSessionRunning(sessionId),
 				cursor: formatCursor(epoch, ch.seq),
+				...ch.pos !== void 0 ? {
+					pos: ch.pos,
+					...ch.historyId !== void 0 ? { historyId: ch.historyId } : {}
+				} : {},
 				interactions: engine.interactions.list(sessionId).map((p) => ({
 					requestId: p.request.id,
 					sessionId,

package/dist/session/ArtifactsPanel.js

@@ -1,8 +1,9 @@
 import { IconButton } from "../components/IconButton.js";
+import { Notice } from "../components/Notice.js";
+import { errorMessage } from "../components/report-error.js";
 import { PanelEmpty, PanelLoading } from "../components/PanelEmpty.js";
 import { PANEL_ROW, PANEL_ROW_HOVER, RowBadge } from "../components/PanelRows.js";
 import { RowActionsMenu } from "../components/RowActionsMenu.js";
-import { countArtifacts } from "./headless/artifacts.js";
 import { useExtensionItems } from "../extensions/ExtensionsProvider.js";
 import { useSessionArtifacts, useSessionHost } from "./SessionProvider.js";
 import { useLinkRouter } from "../extensions/links.js";
@@ -10,6 +11,7 @@ import { useSessionLabels } from "./useSessionLabels.js";
 import { ArtifactRowChips, badgeColorStyle, badgeToneClass } from "./ArtifactRowChips.js";
 import { renderersFor } from "../extensions/headless/select.js";
 import { ExtensionRenderer } from "../extensions/ExtensionRenderer.js";
+import { countArtifacts } from "./headless/artifacts.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/session/ArtifactsPanel.tsx
@@ -45,8 +47,15 @@ function ArtifactsPanel({ sessionId, focus = null, remoteName = null, onOpenPath
 	const removeArtifact = host?.remove;
 	const [error, setError] = useState(null);
 	useEffect(() => {
-		fetchSession?.(sessionId).catch((err) => setError(err.message));
-	}, [fetchSession, sessionId]);
+		fetchSession?.(sessionId).catch((err) => setError({
+			message: labels.artifactsLoadFailed,
+			detail: errorMessage(err)
+		}));
+	}, [
+		fetchSession,
+		sessionId,
+		labels.artifactsLoadFailed
+	]);
 	const total = countArtifacts(groups);
 	const bodyRef = useRef(null);
 	useEffect(() => {
@@ -77,12 +86,16 @@ function ArtifactsPanel({ sessionId, focus = null, remoteName = null, onOpenPath
 	const remove = useMemo(() => removeArtifact ? (row) => {
 		setError(null);
 		removeArtifact(sessionId, row.artifact.id, row.artifact.sessionId).then((ok) => {
-			if (!ok) setError(labels.artifactsUnsupported);
-		}).catch((err) => setError(err.message));
+			if (!ok) setError({ message: labels.artifactsUnsupported });
+		}).catch((err) => setError({
+			message: labels.artifactRemoveFailed,
+			detail: errorMessage(err)
+		}));
 	} : void 0, [
 		removeArtifact,
 		sessionId,
-		labels.artifactsUnsupported
+		labels.artifactsUnsupported,
+		labels.artifactRemoveFailed
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: `flex-1 min-h-0 flex flex-col ${className}`,
@@ -91,10 +104,12 @@ function ArtifactsPanel({ sessionId, focus = null, remoteName = null, onOpenPath
 		children: [/* @__PURE__ */ jsxs("div", {
 			ref: bodyRef,
 			className: "flex-1 min-h-0 flex flex-col overflow-y-auto px-3 pt-3 pb-3",
-			children: [error && /* @__PURE__ */ jsx("div", {
-				className: "text-xs text-[var(--zg-warn)] mb-2",
-				role: "alert",
-				children: error
+			children: [error && /* @__PURE__ */ jsx(Notice, {
+				tone: "error",
+				compact: true,
+				detail: error.detail,
+				className: "mb-2",
+				children: error.message
 			}), groups === null ? /* @__PURE__ */ jsx(PanelLoading, {}) : total === 0 ? /* @__PURE__ */ jsx(PanelEmpty, {
 				icon: "i-ph-cube-transparent",
 				title: labels.artifactsEmpty,
@@ -144,7 +159,7 @@ function ArtifactRow({ row, focused, remoteName, onOpenPath, onRevealPath, onFoc
 		try {
 			if (!href || !onOpenPath) return;
 			if (remoteName !== null && !isUrl) {
-				setOpenError(labels.artifactOnRemote(remoteName));
+				setOpenError({ message: labels.artifactOnRemote(remoteName) });
 				return;
 			}
 			await links.open(href, {
@@ -152,11 +167,17 @@ function ArtifactRow({ row, focused, remoteName, onOpenPath, onRevealPath, onFoc
 				...event ? { event } : {}
 			}, () => {
 				onOpenPath(href, event).then((ok) => {
-					if (!ok) setOpenError(labels.artifactPathUnavailable);
-				}, (err) => setOpenError(err instanceof Error ? err.message : String(err)));
+					if (!ok) setOpenError({ message: labels.artifactPathUnavailable });
+				}, (err) => setOpenError({
+					message: labels.artifactOpenFailed,
+					detail: errorMessage(err)
+				}));
 			});
 		} catch (err) {
-			setOpenError(err instanceof Error ? err.message : String(err));
+			setOpenError({
+				message: labels.artifactOpenFailed,
+				detail: errorMessage(err)
+			});
 		}
 	};
 	const menuItems = useMemo(() => [
@@ -242,10 +263,11 @@ function ArtifactRow({ row, focused, remoteName, onOpenPath, onRevealPath, onFoc
 							})
 						]
 					}),
-					openError && /* @__PURE__ */ jsx("div", {
-						role: "alert",
-						className: "text-xs text-[var(--zg-warn)]",
-						children: openError
+					openError && /* @__PURE__ */ jsx(Notice, {
+						tone: "error",
+						compact: true,
+						detail: openError.detail,
+						children: openError.message
 					}),
 					/* @__PURE__ */ jsx(RowFacts, { view }),
 					hasDetail && detailOpen && /* @__PURE__ */ jsx(ExtensionRenderer, {

package/dist/session/PlanTracker.js

@@ -1,11 +1,13 @@
 import { IconButton } from "../components/IconButton.js";
 import { buttonClass } from "../components/button.js";
+import { Notice } from "../components/Notice.js";
 import { MetaChip } from "../components/Form.js";
+import { errorMessage } from "../components/report-error.js";
 import { useMinuteTick } from "../hooks/useMinuteTick.js";
-import { inboxPlans } from "./headless/plans.js";
 import { useSessionHost, useSessionPlans } from "./SessionProvider.js";
 import { useSessionLabels } from "./useSessionLabels.js";
 import { ProseMarkdown } from "../chat/transcript/ProseMarkdown.js";
+import { inboxPlans } from "./headless/plans.js";
 import { StepStatusIcon } from "./StepStatusIcon.js";
 import { isDoneTodo } from "./TodoList.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -115,7 +117,7 @@ function PlanTracker({ sessionId, plan, hideHeader = false, className, style })
 	const run = (call) => {
 		if (!call) return;
 		setError(null);
-		call.catch((err) => setError(err instanceof Error ? err.message : String(err)));
+		call.catch((err) => setError(errorMessage(err)));
 	};
 	const startEdit = (step) => {
 		if (!canEdit) return;
@@ -167,8 +169,10 @@ function PlanTracker({ sessionId, plan, hideHeader = false, className, style })
 					})
 				]
 			}),
-			stopped && /* @__PURE__ */ jsx("p", {
-				className: "m-0 px-2 text-zg-meta text-[var(--zg-warn)]",
+			stopped && /* @__PURE__ */ jsx(Notice, {
+				tone: "warning",
+				compact: true,
+				className: "mx-2",
 				children: labels.planStopped(stopStep > 0 ? stopStep : null, plan.stopReason)
 			}),
 			applying && plan.possiblyInterrupted && /* @__PURE__ */ jsx("p", {
@@ -271,10 +275,11 @@ function PlanTracker({ sessionId, plan, hideHeader = false, className, style })
 			(error || canEdit || hasActions) && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-2 px-2",
 				children: [
-					error && /* @__PURE__ */ jsx("div", {
-						className: "text-zg-meta text-[var(--zg-warn)]",
-						role: "alert",
-						children: error
+					error && /* @__PURE__ */ jsx(Notice, {
+						tone: "error",
+						compact: true,
+						detail: error,
+						children: labels.planEditFailed
 					}),
 					canEdit && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-2",

package/dist/session/ProjectHome.js

@@ -1,4 +1,6 @@
 import { IconButton } from "../components/IconButton.js";
+import { Notice } from "../components/Notice.js";
+import { errorMessage } from "../components/report-error.js";
 import { RowActionsMenu } from "../components/RowActionsMenu.js";
 import { useDisplayPath } from "../hooks/useDisplayPath.js";
 import { readPersisted, writePersisted } from "../hooks/usePersistedState.js";
@@ -343,7 +345,7 @@ function useHomeBlock(panels, cwd, id, view, search) {
 		}, (err) => current && setLoaded((s) => ({
 			key,
 			content: s.content,
-			error: err instanceof Error ? err.message : String(err)
+			error: errorMessage(err)
 		})));
 		return () => {
 			current = false;
@@ -395,7 +397,7 @@ function useHomeBlock(panels, cwd, id, view, search) {
 			});
 		}, (err) => keyRef.current === key && setLoaded((s) => ({
 			...s,
-			error: err instanceof Error ? err.message : String(err)
+			error: errorMessage(err)
 		}))).finally(() => setLoadingMore(false));
 	}, [
 		panels,
@@ -438,7 +440,7 @@ const HomeBlockCard = memo(function HomeBlockCard({ panels, cwd, block, view, fi
 		setNotice(null);
 		const result = await onStartSession(start).catch((err) => ({
 			ok: false,
-			message: err instanceof Error ? err.message : String(err)
+			message: errorMessage(err)
 		}));
 		if (!result.ok) setNotice(result.message);
 	} : void 0, [onStartSession]);
@@ -555,18 +557,18 @@ const HomeBlockCard = memo(function HomeBlockCard({ panels, cwd, block, view, fi
 					items
 				})] })]
 			}),
-			notice && /* @__PURE__ */ jsxs("div", {
-				role: "alert",
-				className: "mb-3 flex items-start gap-2 text-zg-label text-[var(--zg-warn)]",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "flex-1 min-w-0",
-					children: notice
-				}), /* @__PURE__ */ jsx(IconButton, {
+			notice && /* @__PURE__ */ jsx(Notice, {
+				tone: "error",
+				compact: true,
+				detail: notice,
+				className: "mb-3",
+				action: /* @__PURE__ */ jsx(IconButton, {
 					icon: "i-ph-x",
 					size: "xs",
 					label: labels.projectHomeDismiss,
 					onClick: () => setNotice(null)
-				})]
+				}),
+				children: labels.projectHomeStartFailed
 			}),
 			/* @__PURE__ */ jsx(PanelContentView, {
 				variant: "block",