zidane-ui 9.1.4 → 9.1.6

package/dist/chat/transcript/AuthFailureCard.js

@@ -0,0 +1,358 @@
+import { buttonClass } from "../../components/button.js";
+import "../../components/Form.js";
+import { useReadable } from "../headless/store.js";
+import { RoutedLink } from "../../extensions/links.js";
+import { useChatLabels } from "../useChatLabels.js";
+import { useTranscriptActions } from "./actions.js";
+import { failureTooltip } from "../headless/transcript/run-failures.js";
+import { authFailureDetails, createAuthFixes, isAuthFixed, planAuthCard } from "../headless/transcript/auth-failure.js";
+import { useSignIn } from "../../onboarding/useSignIn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { CONTINUE_PROMPT, authOffersSignInFallback, authPrimaryAction } from "zidane/chat/pure";
+//#region src/chat/transcript/AuthFailureCard.tsx
+/**
+* A run that stopped because a sign-in failed (`detail.auth`): instead of the
+* quiet "Stopped" line, a compact card with what failed (the provider's
+* name, the account), the reason, and what fixes it, in place: sign that
+* account in again (the browser flow runs inside the card, a pasted code
+* included), retry, switch to another stored account, open Settings there,
+* or copy the details. A sign-in that succeeds resends the failed prompt
+* when the stop is still the transcript's last word.
+*
+* Only the last stop is interactive (the rule the Retry button follows);
+* older cards keep their headline. Once a sign-in is fixed, every card for
+* it in the session says so. The accounts come from the transcript actions
+* (`TranscriptActions.accounts`): a member the app leaves out hides its
+* button.
+*/
+/** The sign-ins fixed from a card in this page's life, per session. */
+const FIXES = createAuthFixes();
+const BODY_TEXT = "text-sm leading-[1.6]";
+const BTN_MAIN = buttonClass({
+	variant: "primary",
+	size: "xs"
+});
+const BTN_OTHER = buttonClass({
+	variant: "secondary",
+	size: "xs"
+});
+const BTN_QUIET = buttonClass({
+	variant: "ghost",
+	size: "xs"
+});
+const COPIED_MS = 1200;
+const noop = () => () => {};
+const idle = () => void 0;
+/** A host's provider list, re-rendering when it changes (`undefined` without one). */
+function useProviderList(resource) {
+	return useSyncExternalStore(resource ? resource.subscribe : noop, resource ? resource.get : idle, resource ? resource.get : idle);
+}
+/** A rejected action's words: a `SettingsError`'s detail, an `Error`'s message. */
+function messageOf(error) {
+	if (error && typeof error === "object") {
+		if ("detail" in error && typeof error.detail === "string" && error.detail) return error.detail;
+		if ("message" in error && typeof error.message === "string" && error.message) return error.message;
+		if ("kind" in error && typeof error.kind === "string") return error.kind;
+	}
+	return String(error);
+}
+/**
+* Renders a sign-in failure as a card with its fixes; see the module
+* comment for the rules.
+*
+* @param props - Component props.
+*/
+const AuthFailureCard = memo(function AuthFailureCard({ auth, text, detail, failure, resumable, onResume, className, style }) {
+	const labels = useChatLabels();
+	const { sessionId, accounts } = useTranscriptActions();
+	const cwd = accounts?.cwd ?? "";
+	const providers = auth.source === "provider" ? accounts?.providers : void 0;
+	const list = useProviderList(useMemo(() => providers?.list(cwd) ?? null, [providers, cwd]))?.data;
+	const plan = useMemo(() => planAuthCard(auth, list), [auth, list]);
+	const fixes = useReadable(FIXES.fixed(sessionId));
+	const headline = labels.authHeadline(auth, plan.label);
+	const prompt = failure.resume === "retry" && failure.prompt ? failure.prompt : CONTINUE_PROMPT;
+	const latest = useRef({
+		resumable,
+		onResume,
+		prompt
+	});
+	useEffect(() => {
+		latest.current = {
+			resumable,
+			onResume,
+			prompt
+		};
+	});
+	/** Resends the failed prompt if the stop is still the last word; says whether it did. */
+	const resumeIfLast = () => {
+		const now = latest.current;
+		if (!now.resumable || !now.onResume) return false;
+		now.onResume(now.prompt);
+		return true;
+	};
+	const [outcome, setOutcome] = useState(null);
+	const signIn = useSignIn(() => {
+		FIXES.add(sessionId, auth);
+		setOutcome(resumeIfLast() ? "retrying" : "signed-in");
+	});
+	const [switching, setSwitching] = useState(null);
+	const [copied, setCopied] = useState(false);
+	useEffect(() => {
+		if (!copied) return void 0;
+		const timer = window.setTimeout(() => setCopied(false), COPIED_MS);
+		return () => window.clearTimeout(timer);
+	}, [copied]);
+	const flow = signIn.state;
+	const running = flow !== null && flow.kind !== "done" && flow.kind !== "error";
+	const fixed = outcome !== null || !resumable && !running && isAuthFixed(fixes, auth);
+	const open = resumable || running;
+	const begin = useMemo(() => {
+		if (auth.source === "provider") {
+			const provider = plan.provider;
+			if (!providers?.signIn || !provider?.oauth) return null;
+			const replaceKey = plan.replaceKey;
+			return () => providers.signIn(provider.key, replaceKey ? { replaceKey } : void 0);
+		}
+		const mcp = accounts?.mcp;
+		if (auth.source === "mcp" && mcp?.signIn) return () => mcp.signIn(cwd, auth.provider);
+		return null;
+	}, [
+		auth,
+		plan,
+		providers,
+		accounts?.mcp,
+		cwd
+	]);
+	const other = plan.otherAccount;
+	const canSwitch = Boolean(other?.key && plan.provider && providers?.setPreferred);
+	const switchAccount = async () => {
+		setSwitching({});
+		try {
+			await providers.setPreferred(cwd, plan.provider.key, { key: other.key });
+			setSwitching(null);
+			resumeIfLast();
+		} catch (error) {
+			setSwitching({ error: messageOf(error) });
+		}
+	};
+	const switchBusy = switching !== null && switching.error === void 0;
+	const primary = authPrimaryAction(auth);
+	const offerSignIn = begin !== null && (primary === "sign-in" || authOffersSignInFallback(auth));
+	const offerRetry = onResume !== void 0 && (primary === "retry" || !offerSignIn);
+	const otherLabel = other ? other.label ?? other.detail : "";
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(authFailureDetails(headline, text, detail?.raw));
+			setCopied(true);
+		} catch {}
+	};
+	const signInButton = offerSignIn && /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: primary === "sign-in" ? BTN_MAIN : BTN_OTHER,
+		onClick: () => signIn.start(begin),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "i-ph-sign-in"
+		}), labels.authSignInAgain]
+	});
+	const retryButton = offerRetry && /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: primary === "retry" ? BTN_MAIN : BTN_OTHER,
+		title: failure.resume === "retry" ? labels.retryHint : labels.continueHint,
+		onClick: () => onResume(prompt),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "i-ph-arrow-clockwise"
+		}), labels.retry]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": labels.authCard,
+		"data-testid": "run-failure",
+		"data-cause": failure.cause,
+		"data-auth": auth.kind,
+		"data-fixed": fixed ? "" : void 0,
+		className: [`flex flex-col gap-1 min-w-0 pl-3 border-l-2 ${fixed ? "border-zg-success" : "border-zg-danger"} ${BODY_TEXT}`, className].filter(Boolean).join(" "),
+		style,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 min-w-0",
+				title: failureTooltip(text, detail, labels.resetsAt),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: `shrink-0 ${fixed ? "i-ph-check-circle text-zg-success" : "i-ph-key text-zg-danger"}`
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate font-medium text-[var(--zg-text)]",
+						children: headline
+					}),
+					fixed && outcome === null && /* @__PURE__ */ jsxs("span", {
+						className: "zg-meta-chip zg-meta shrink-0 gap-1 text-zg-success",
+						"data-testid": "auth-fixed",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "i-ph-check"
+						}), labels.authFixed]
+					})
+				]
+			}),
+			(open || outcome !== null) && text && /* @__PURE__ */ jsx("div", {
+				className: "min-w-0 text-[var(--zg-text-muted)] whitespace-pre-wrap break-words",
+				children: text
+			}),
+			outcome !== null ? /* @__PURE__ */ jsxs("div", {
+				role: "status",
+				className: "flex items-center gap-1.5 text-zg-success",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "i-ph-check"
+				}), outcome === "retrying" ? labels.authSignedInRetrying : labels.authSignedIn]
+			}) : !open ? null : running ? /* @__PURE__ */ jsx(SignInProgress, {
+				state: flow,
+				submit: signIn.submit,
+				onCancel: signIn.cancel
+			}) : flow?.kind === "error" ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "alert",
+					className: "text-zg-danger break-words",
+					children: labels.authFailed(flow.message)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_MAIN,
+						onClick: () => signIn.start(begin),
+						children: labels.authTryAgain
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_OTHER,
+						onClick: signIn.cancel,
+						children: labels.authCancel
+					})]
+				})]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [switching?.error !== void 0 && /* @__PURE__ */ jsx("div", {
+					role: "alert",
+					className: "text-zg-danger break-words",
+					children: labels.authFailed(switching.error)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-1.5",
+					children: [
+						primary === "sign-in" ? signInButton : retryButton,
+						primary === "sign-in" ? retryButton : signInButton,
+						canSwitch && /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: BTN_OTHER,
+							disabled: switchBusy,
+							onClick: () => void switchAccount(),
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "i-ph-user-switch"
+							}), switchBusy ? labels.authSwitching(otherLabel) : labels.authUseAccount(otherLabel)]
+						}),
+						accounts?.openSettings && /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: BTN_QUIET,
+							title: labels.authSettingsHint,
+							onClick: () => accounts.openSettings(plan.settings),
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "i-ph-gear"
+							}), labels.authSettings]
+						}),
+						/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: BTN_QUIET,
+							onClick: () => void copy(),
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: copied ? "i-ph-check" : "i-ph-copy"
+							}), copied ? labels.authCopied : labels.authCopyDetails]
+						})
+					]
+				})]
+			})
+		]
+	});
+});
+/** A sign-in while it runs, inside the card: where it is, the page's link, a pasted code, Cancel. */
+function SignInProgress({ state, submit, onCancel }) {
+	const labels = useChatLabels();
+	const [pasted, setPasted] = useState("");
+	const page = state.kind === "url" || state.kind === "device" ? state : null;
+	const instructions = state.kind === "url" && "instructions" in state && typeof state.instructions === "string" ? state.instructions : null;
+	const line = state.kind === "url" ? labels.authWaiting : state.kind === "device" ? labels.authEnterCode(state.userCode) : state.kind === "prompt" || state.kind === "progress" ? state.message : labels.authOpeningBrowser;
+	const takesInput = submit !== void 0 && (state.kind === "url" || state.kind === "prompt");
+	const send = (event) => {
+		event.preventDefault();
+		if (!pasted.trim()) return;
+		submit?.(pasted.trim());
+		setPasted("");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		"data-testid": "auth-sign-in",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				role: "status",
+				"aria-live": "polite",
+				className: "flex items-center gap-2 min-w-0 text-[var(--zg-text)]",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "zg-spin-ring zg-loop block shrink-0 text-[var(--zg-accent)]"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 break-words",
+						children: line
+					}),
+					page && /* @__PURE__ */ jsx(RoutedLink, {
+						href: page.url,
+						source: "auth",
+						className: "shrink-0 text-[var(--zg-accent-hover)] underline underline-offset-2",
+						children: labels.authOpenPage
+					})
+				]
+			}),
+			instructions && /* @__PURE__ */ jsx("div", {
+				className: "text-[var(--zg-text-muted)] break-words",
+				children: instructions
+			}),
+			state.kind === "prompt" && state.options && /* @__PURE__ */ jsx("ol", {
+				className: "m-0 pl-5 text-[var(--zg-text-muted)]",
+				children: state.options.map((option) => /* @__PURE__ */ jsx("li", { children: option }, option))
+			}),
+			/* @__PURE__ */ jsxs("form", {
+				className: "flex flex-wrap items-center gap-1.5",
+				onSubmit: send,
+				children: [takesInput && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+					type: "text",
+					autoComplete: "off",
+					spellCheck: false,
+					"aria-label": labels.authPaste,
+					placeholder: state.kind === "prompt" && state.placeholder ? state.placeholder : labels.authPaste,
+					value: pasted,
+					onChange: (event) => setPasted(event.target.value),
+					className: `zg-well w-full h-8 px-2.5 text-zg-ui placeholder:text-[var(--zg-text-subtle)] disabled:opacity-zg-disabled flex-1 !w-auto min-w-40 h-6`
+				}), /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					className: BTN_MAIN,
+					disabled: !pasted.trim(),
+					children: labels.authPasteSend
+				})] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: BTN_OTHER,
+					onClick: onCancel,
+					children: labels.authCancel
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { AuthFailureCard };

package/dist/chat/transcript/InteractionToolBody.js

@@ -1,9 +1,11 @@
 import { useChatLabels } from "../useChatLabels.js";
 import { ProseMarkdown } from "./ProseMarkdown.js";
+import { useOptionalWorkspaceActions, useOptionalWorkspaceView } from "../../workspace/WorkspaceProvider.js";
 import { PlanBody } from "../interactions/PlanCard.js";
 import { AnsweredQuestions } from "../interactions/QuestionForm.js";
 import { TodoListView } from "../../session/TodoList.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { SECRETS_PANEL_ID } from "zidane/chat/pure";
 //#region src/chat/transcript/InteractionToolBody.tsx
 /**
 * The tools this body knows how to render.
@@ -20,7 +22,7 @@ function hasInteractionBody(tool) {
 function parseResult(result) {
 	if (!result) return null;
 	try {
-		const parsed = JSON.parse(result);
+		const parsed = JSON.parse(result.split("\n\n", 1)[0]);
 		return parsed && typeof parsed === "object" && !Array.isArray(parsed) ? parsed : null;
 	} catch {
 		return null;
@@ -109,6 +111,12 @@ function waiting(tool, label) {
 		label
 	}) : null;
 }
+/** Opens the Secrets tab, when the workspace around offers it (`Settings.secrets` on). */
+function useOpenSecrets() {
+	const actions = useOptionalWorkspaceActions();
+	const offered = useOptionalWorkspaceView()?.tabs.some((tab) => tab.id === SECRETS_PANEL_ID) ?? false;
+	return actions && offered ? () => actions.focusTab(SECRETS_PANEL_ID) : void 0;
+}
 /**
 * The expanded body of a `present_plan`, `ask_user` or `todowrite` call (see the module comment); `null` for any other.
 *
@@ -116,6 +124,7 @@ function waiting(tool, label) {
 */
 function InteractionToolBody({ tool }) {
 	const labels = useChatLabels();
+	const openSecrets = useOpenSecrets();
 	if (!hasInteractionBody(tool)) return null;
 	const input = tool.rawInput;
 	const response = parseResult(tool.result);
@@ -162,7 +171,8 @@ function InteractionToolBody({ tool }) {
 					answers: answers ?? {},
 					instructions,
 					id: tool.id,
-					Markdown: ProseMarkdown
+					Markdown: ProseMarkdown,
+					onOpenSecrets: openSecrets
 				}),
 				!answers && (waiting(tool, labels.interactionWaitingAnswers) ?? (tool.result ? /* @__PURE__ */ jsx(Outcome, {
 					icon: "i-ph-minus-circle",

package/dist/chat/transcript/actions.d.ts

@@ -1,6 +1,24 @@
+import { SettingsProvidersHost } from "../../settings/headless/providers.js";
+import { SettingsMcpHost } from "../../settings/headless/mcp.js";
+import { AuthSettingsTarget } from "../headless/transcript/auth-failure.js";
 import { ReactNode } from "react";
 import { ModelNamer } from "zidane/chat/pure";
 //#region src/chat/transcript/actions.d.ts
+/**
+ * The accounts of the host that holds a session's credentials, for the card
+ * a run stopped by a failed sign-in shows (`AuthFailureCard`). Each member is
+ * optional, and the card's button that needs it hides without it.
+ */
+interface TranscriptAccounts {
+  /** The session's folder, whose extension providers count (`''`: built-ins only). */
+  cwd: string;
+  /** Its providers: their labels and accounts, Sign in again (`signIn`), Use another account (`setPreferred`). */
+  providers?: SettingsProvidersHost;
+  /** Its MCP servers: Sign in again on a server whose sign-in ended the run. */
+  mcp?: Pick<SettingsMcpHost, 'signIn'>;
+  /** Opens Settings on that provider's account (or that MCP server). */
+  openSettings?(target: AuthSettingsTarget): void;
+}
 /** What a transcript row can ask of the app that hosts it. Every action but `sessionId` is optional, and its control is hidden when the app leaves it out. */
 interface TranscriptActions {
   /** The session on screen; actions that address a call need it. */
@@ -38,6 +56,11 @@ interface TranscriptActions {
    * no Run in a terminal.
    */
   runInTerminal?(input: string): void;
+  /**
+   * The accounts a run that stopped on a failed sign-in can be fixed with,
+   * in place. Without it, the card offers only Retry and Copy details.
+   */
+  accounts?: TranscriptAccounts;
 }
 /** Props for {@link TranscriptActionsProvider}. */
 interface TranscriptActionsProviderProps {
@@ -57,4 +80,4 @@ declare function useTranscriptActions(): TranscriptActions;
 /** How the transcript names a model: the app's `modelName`, else from the id. */
 declare function useModelName(): ModelNamer;
 //#endregion
-export { TranscriptActions, TranscriptActionsProvider, TranscriptActionsProviderProps, useModelName, useTranscriptActions };
+export { TranscriptAccounts, TranscriptActions, TranscriptActionsProvider, TranscriptActionsProviderProps, useModelName, useTranscriptActions };

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

@@ -2,7 +2,7 @@ import { RowContext, SlotEntry, TranscriptRow, TranscriptRowProps, TranscriptRow
 import { TranscriptRenderersProvider, TranscriptRenderersProviderProps } from "./renderer-slots.js";
 import { AttachmentLabelParts, CodeBlockSlotProps, DEFAULT_TRANSCRIPT_RENDERERS, DefaultInlineText, DefaultInlineTextProps, DefaultMarkdown, DefaultMarkdownProps, DefaultPrompt, DefaultPromptProps, DefaultSessionTitle, DefaultSessionTitleProps, InlineTextSlotProps, MarkdownSlotProps, PromptSlotProps, SessionTitleSlotProps, TextPreviewSlotProps, ToolBodySlotProps, TranscriptRenderers, defaultAttachmentLabel, useTranscriptRenderers } from "./renderers.js";
 import { ToolMediaItem, parseToolMedia } from "../headless/transcript/tool-media.js";
-import { TranscriptActions, TranscriptActionsProvider, TranscriptActionsProviderProps, useModelName, useTranscriptActions } from "./actions.js";
+import { TranscriptAccounts, TranscriptActions, TranscriptActionsProvider, TranscriptActionsProviderProps, useModelName, useTranscriptActions } from "./actions.js";
 import { DiffLines, DiffLinesProps } from "./DiffLines.js";
 import { EditDiffBlock, EditDiffBlockProps } from "./EditDiffBlock.js";
 import { ExchangeFoldRow, ExchangeFoldRowProps, FoldHeader, FoldHeaderProps } from "./fold.js";
@@ -14,6 +14,7 @@ import { Markdown, MarkdownDiagrams, MarkdownDiagramsProps, MarkdownLinkProps, M
 import { MermaidDiagram, MermaidDiagramProps } from "./MermaidDiagram.js";
 import { MessageGroupRow, MessageGroupRowProps } from "./messages.js";
 import { COMMAND_DETAIL_LINE, CommandDetailRow, CommandDetailRowProps, CommandNoteRow, CommandNoteRowProps, ErrorRow, ErrorRowProps, FailureRow, FailureRowProps, InfoRow, InfoRowProps, NoticeRow, NoticeRowProps, SessionEventRow, SessionEventRowProps, SpawnEndRow, SpawnEndRowProps, SpawnStartRow, SpawnStartRowProps } from "./notices.js";
+import { AuthFailureCard, AuthFailureCardProps } from "./AuthFailureCard.js";
 import { AttachmentIcon, AttachmentIconProps, UserPromptAttachments, UserPromptAttachmentsProps, UserPromptRow, UserPromptRowProps } from "./prompt.js";
 import { PromptLines, PromptLinesProps, copyPromptLines } from "./prompt-lines.js";
 import { TextRow, TextRowProps, ThinkingBatchRow, ThinkingBatchRowProps, ThinkingRow, ThinkingRowProps } from "./prose.js";
@@ -66,4 +67,4 @@ import { TranscriptRows, TranscriptRowsInput, useSelectStops, useTranscriptRows
 import { UserBashRow, UserBashRowProps } from "./user-bash.js";
 import { RowPlace, ScrollPosition, StickToBottomOptions, useStickToBottom } from "./useStickToBottom.js";
 import { useTranscriptSelectionCopy } from "./useTranscriptSelectionCopy.js";
-export { AUTO_FILL_PAGES, AnsiSpans, type AnsiSpansProps, AnsiText, type AnsiTextProps, AttachmentIcon, AttachmentIconProps, AttachmentLabelParts, BADGE_GLYPH, BadgeEffectContext, BadgeMenuComposer, BadgeMenuProvider, BadgeMenuProviderProps, BadgeMenuSystem, CHIP_CARD_WIDTH, CODE_PANEL, COMMAND_DETAIL_LINE, CardMarkdown, CardMarkdownProps, Caret, CaretProps, ChipCard, ChipCardProps, ChipHover, ChipHoverProps, ChipOpener, CodeBlockSlotProps, CodemodeScript, type CodemodeScriptProps, CommandCard, CommandCardProps, CommandDetailRow, CommandDetailRowProps, CommandNoteRow, CommandNoteRowProps, CommandScope, CommandScopeContext, CommitCard, CommitCardProps, CompactSummaryRow, CompactSummaryRowProps, ComposerSearch, CvRow, CvRowProps, DEFAULT_TRANSCRIPT_RENDERERS, DefaultInlineText, DefaultInlineTextProps, DefaultMarkdown, DefaultMarkdownProps, DefaultPrompt, DefaultPromptProps, DefaultSessionTitle, DefaultSessionTitleProps, DiffLines, DiffLinesProps, Dot, DotProps, EditDiffBlock, EditDiffBlockProps, ErrorRow, ErrorRowProps, ExchangeFoldRow, ExchangeFoldRowProps, FILL_MIN_PROMPTS, FailedMark, FailedMarkProps, FailureRow, FailureRowProps, FileBadgeIcon, FileBadgeIconProps, FoldHeader, FoldHeaderProps, GUTTER_STEP_PX, INLINE_CODE_CLASS, ImageGenerationBlock, ImageGenerationBlockProps, InfoRow, InfoRowProps, InlineChipText, InlineChipTextProps, InlineCode, InlineCodeProps, InlineTextSlotProps, InteractionTool, InteractionToolBody, InteractionToolBodyProps, LazyRow, LazyRowProps, LineState, LinkBadge, LinkBadgeProps, LinkIcon, LinkIconProps, LiveOutput, type LiveOutputProps, LoadEarlierRow, LoadEarlierRowProps, LoadFullOutputButton, LoadFullOutputButtonProps, MAX_MATCHES, Markdown, MarkdownContext, MarkdownContextValue, MarkdownDiagrams, MarkdownDiagramsProps, MarkdownLinkProps, MarkdownProps, MarkdownSlotProps, MermaidDiagram, type MermaidDiagramProps, MessageGroupRow, MessageGroupRowProps, ModelVerdict, ModelVerdictProps, NestedToolCalls, NestedToolCallsProps, NoticeRow, NoticeRowProps, OpenBadgeMenu, OpenSessionContext, ParsedRef, ParsedReferenceUrl, PromptEcho, PromptEchoProps, PromptLines, PromptLinesProps, PromptSlotProps, ProseMarkdown, ProseMarkdownProps, ReadFileBlock, ReadFileBlockProps, RefChip, RefChipProps, RefMatch, ReferenceChip, ReferenceChipProps, ReferenceText, ReferenceTextProps, RowContext, RowFrame, RowFrameProps, RowIconsContext, RowPlace, RunReceiptInline, RunReceiptInlineProps, RunSummaryRow, RunSummaryRowProps, RunnableCodeBlock, type RunnableCodeBlockProps, ScrollPosition, SearchHighlightStyle, SelectCursor, SelectCursorProps, SelectTurnCommands, SelectTurnExit, SelectTurnHintKeys, SelectTurnHintKeysProps, SelectTurnKeysOptions, SelectTurnProvider, SelectTurnProviderProps, SelectTurnState, SelectTurnValue, SessionCard, SessionCardProps, SessionEventRow, SessionEventRowProps, SessionTitleSlotProps, ShellBlockProvider, type ShellBlockProviderProps, type ShellBlockScope, SkillCard, SkillCardProps, SlotEntry, SpawnEndRow, SpawnEndRowProps, SpawnStartRow, SpawnStartRowProps, StickToBottomOptions, SubagentBlock, SubagentBlockProps, TextPreviewSlotProps, TextRow, TextRowProps, ThinkingBatchRow, ThinkingBatchRowProps, ThinkingRow, ThinkingRowProps, ToolBatchRow, ToolBatchRowProps, ToolBodySlotProps, ToolDetails, ToolDetailsProps, ToolGlyph, ToolGlyphProps, ToolInput, ToolInputProps, ToolMedia, type ToolMediaItem, ToolMediaProps, ToolRow, ToolRowProps, ToolTiming, ToolTimingProps, TranscriptActions, TranscriptActionsProvider, TranscriptActionsProviderProps, TranscriptFind, TranscriptFindKeyOptions, TranscriptFindOptions, TranscriptFindTarget, TranscriptRenderers, TranscriptRenderersProvider, type TranscriptRenderersProviderProps, TranscriptRow, TranscriptRowProps, TranscriptRowSlot, TranscriptRowSlotProps, TranscriptRows, TranscriptRowsInput, TranscriptScrollInputs, TranscriptSearch, TranscriptSearchOptions, TranscriptSearchProps, TranscriptSearchState, TranscriptSettling, TranscriptTurnMenu, TurnCommands, TurnCommandsOptions, TurnMenuActions, TurnMenuTarget, UserBashRow, UserBashRowProps, UserPromptAttachments, UserPromptAttachmentsProps, UserPromptRow, UserPromptRowProps, WorkerDetails, WorkerDetailsProps, classifyInlineRef, copyPromptLines, createTurnCommands, defaultAttachmentLabel, drawsImageGeneration, fileBadgeName, fileBadgeSpec, findRefs, hasInteractionBody, holdForceMountRows, imageRequestsOf, isHiddenRow, lineStateOf, linkGlyph, mountRowNow, numberRef, parseRefUrl, parseReferenceUrl, parseToolMedia, refHref, referenceUrl, remarkReferences, remarkRefs, savedPaths, siteIconValue, useBackgroundMount, useBadgeMenu, useChipResolution, useCommand, useCommitInfo, useComposerSearch, useFillViewportScrollback, useForceMountRows, useFullOutput, useModelName, useReferenceMatches, useReferenceProviders, useReferenceView, useReferencedSession, useResolveChipNow, useRowIcons, useSelectStops, useSelectTurn, useSelectTurnKeys, useSettledReveal, useShellBlockScope, useSiteIcon, useSkill, useStickToBottom, useToolMedia, useTranscriptActions, useTranscriptFind, useTranscriptFindKey, useTranscriptRenderers, useTranscriptRows, useTranscriptScroll, useTranscriptSearch, useTranscriptSelectionCopy, useTurnCommands, useTurnMenu, useWheelHoverPause };
+export { AUTO_FILL_PAGES, AnsiSpans, type AnsiSpansProps, AnsiText, type AnsiTextProps, AttachmentIcon, AttachmentIconProps, AttachmentLabelParts, AuthFailureCard, AuthFailureCardProps, BADGE_GLYPH, BadgeEffectContext, BadgeMenuComposer, BadgeMenuProvider, BadgeMenuProviderProps, BadgeMenuSystem, CHIP_CARD_WIDTH, CODE_PANEL, COMMAND_DETAIL_LINE, CardMarkdown, CardMarkdownProps, Caret, CaretProps, ChipCard, ChipCardProps, ChipHover, ChipHoverProps, ChipOpener, CodeBlockSlotProps, CodemodeScript, type CodemodeScriptProps, CommandCard, CommandCardProps, CommandDetailRow, CommandDetailRowProps, CommandNoteRow, CommandNoteRowProps, CommandScope, CommandScopeContext, CommitCard, CommitCardProps, CompactSummaryRow, CompactSummaryRowProps, ComposerSearch, CvRow, CvRowProps, DEFAULT_TRANSCRIPT_RENDERERS, DefaultInlineText, DefaultInlineTextProps, DefaultMarkdown, DefaultMarkdownProps, DefaultPrompt, DefaultPromptProps, DefaultSessionTitle, DefaultSessionTitleProps, DiffLines, DiffLinesProps, Dot, DotProps, EditDiffBlock, EditDiffBlockProps, ErrorRow, ErrorRowProps, ExchangeFoldRow, ExchangeFoldRowProps, FILL_MIN_PROMPTS, FailedMark, FailedMarkProps, FailureRow, FailureRowProps, FileBadgeIcon, FileBadgeIconProps, FoldHeader, FoldHeaderProps, GUTTER_STEP_PX, INLINE_CODE_CLASS, ImageGenerationBlock, ImageGenerationBlockProps, InfoRow, InfoRowProps, InlineChipText, InlineChipTextProps, InlineCode, InlineCodeProps, InlineTextSlotProps, InteractionTool, InteractionToolBody, InteractionToolBodyProps, LazyRow, LazyRowProps, LineState, LinkBadge, LinkBadgeProps, LinkIcon, LinkIconProps, LiveOutput, type LiveOutputProps, LoadEarlierRow, LoadEarlierRowProps, LoadFullOutputButton, LoadFullOutputButtonProps, MAX_MATCHES, Markdown, MarkdownContext, MarkdownContextValue, MarkdownDiagrams, MarkdownDiagramsProps, MarkdownLinkProps, MarkdownProps, MarkdownSlotProps, MermaidDiagram, type MermaidDiagramProps, MessageGroupRow, MessageGroupRowProps, ModelVerdict, ModelVerdictProps, NestedToolCalls, NestedToolCallsProps, NoticeRow, NoticeRowProps, OpenBadgeMenu, OpenSessionContext, ParsedRef, ParsedReferenceUrl, PromptEcho, PromptEchoProps, PromptLines, PromptLinesProps, PromptSlotProps, ProseMarkdown, ProseMarkdownProps, ReadFileBlock, ReadFileBlockProps, RefChip, RefChipProps, RefMatch, ReferenceChip, ReferenceChipProps, ReferenceText, ReferenceTextProps, RowContext, RowFrame, RowFrameProps, RowIconsContext, RowPlace, RunReceiptInline, RunReceiptInlineProps, RunSummaryRow, RunSummaryRowProps, RunnableCodeBlock, type RunnableCodeBlockProps, ScrollPosition, SearchHighlightStyle, SelectCursor, SelectCursorProps, SelectTurnCommands, SelectTurnExit, SelectTurnHintKeys, SelectTurnHintKeysProps, SelectTurnKeysOptions, SelectTurnProvider, SelectTurnProviderProps, SelectTurnState, SelectTurnValue, SessionCard, SessionCardProps, SessionEventRow, SessionEventRowProps, SessionTitleSlotProps, ShellBlockProvider, type ShellBlockProviderProps, type ShellBlockScope, SkillCard, SkillCardProps, SlotEntry, SpawnEndRow, SpawnEndRowProps, SpawnStartRow, SpawnStartRowProps, StickToBottomOptions, SubagentBlock, SubagentBlockProps, TextPreviewSlotProps, TextRow, TextRowProps, ThinkingBatchRow, ThinkingBatchRowProps, ThinkingRow, ThinkingRowProps, ToolBatchRow, ToolBatchRowProps, ToolBodySlotProps, ToolDetails, ToolDetailsProps, ToolGlyph, ToolGlyphProps, ToolInput, ToolInputProps, ToolMedia, type ToolMediaItem, ToolMediaProps, ToolRow, ToolRowProps, ToolTiming, ToolTimingProps, TranscriptAccounts, TranscriptActions, TranscriptActionsProvider, TranscriptActionsProviderProps, TranscriptFind, TranscriptFindKeyOptions, TranscriptFindOptions, TranscriptFindTarget, TranscriptRenderers, TranscriptRenderersProvider, type TranscriptRenderersProviderProps, TranscriptRow, TranscriptRowProps, TranscriptRowSlot, TranscriptRowSlotProps, TranscriptRows, TranscriptRowsInput, TranscriptScrollInputs, TranscriptSearch, TranscriptSearchOptions, TranscriptSearchProps, TranscriptSearchState, TranscriptSettling, TranscriptTurnMenu, TurnCommands, TurnCommandsOptions, TurnMenuActions, TurnMenuTarget, UserBashRow, UserBashRowProps, UserPromptAttachments, UserPromptAttachmentsProps, UserPromptRow, UserPromptRowProps, WorkerDetails, WorkerDetailsProps, classifyInlineRef, copyPromptLines, createTurnCommands, defaultAttachmentLabel, drawsImageGeneration, fileBadgeName, fileBadgeSpec, findRefs, hasInteractionBody, holdForceMountRows, imageRequestsOf, isHiddenRow, lineStateOf, linkGlyph, mountRowNow, numberRef, parseRefUrl, parseReferenceUrl, parseToolMedia, refHref, referenceUrl, remarkReferences, remarkRefs, savedPaths, siteIconValue, useBackgroundMount, useBadgeMenu, useChipResolution, useCommand, useCommitInfo, useComposerSearch, useFillViewportScrollback, useForceMountRows, useFullOutput, useModelName, useReferenceMatches, useReferenceProviders, useReferenceView, useReferencedSession, useResolveChipNow, useRowIcons, useSelectStops, useSelectTurn, useSelectTurnKeys, useSettledReveal, useShellBlockScope, useSiteIcon, useSkill, useStickToBottom, useToolMedia, useTranscriptActions, useTranscriptFind, useTranscriptFindKey, useTranscriptRenderers, useTranscriptRows, useTranscriptScroll, useTranscriptSearch, useTranscriptSelectionCopy, useTurnCommands, useTurnMenu, useWheelHoverPause };

package/dist/chat/transcript/index.js

@@ -38,6 +38,7 @@ import { ImageGenerationBlock, drawsImageGeneration, imageRequestsOf, savedPaths
 import { ModelVerdict, NestedToolCalls, ToolRow } from "./tool-row.js";
 import { ExchangeFoldRow, FoldHeader } from "./fold.js";
 import { MessageGroupRow } from "./messages.js";
+import { AuthFailureCard } from "./AuthFailureCard.js";
 import { COMMAND_DETAIL_LINE, CommandDetailRow, CommandNoteRow, ErrorRow, FailureRow, InfoRow, NoticeRow, SessionEventRow, SpawnEndRow, SpawnStartRow } from "./notices.js";
 import { AttachmentIcon, UserPromptAttachments, UserPromptRow } from "./prompt.js";
 import { CompactSummaryRow, RunReceiptInline, RunSummaryRow } from "./run-rows.js";
@@ -66,4 +67,4 @@ import { useTranscriptFindKey } from "./useTranscriptFindKey.js";
 import { useTranscriptFind } from "./useTranscriptFind.js";
 import { useTurnMenu } from "./TurnMenu.js";
 import { createTurnCommands, useTurnCommands } from "./turn-commands.js";
-export { AUTO_FILL_PAGES, AnsiSpans, AnsiText, AttachmentIcon, BADGE_GLYPH, BadgeMenuProvider, CHIP_CARD_WIDTH, CODE_PANEL, COMMAND_DETAIL_LINE, CardMarkdown, Caret, ChipCard, ChipHover, CodemodeScript, CommandCard, CommandDetailRow, CommandNoteRow, CommandScopeContext, CommitCard, CompactSummaryRow, CvRow, DEFAULT_TRANSCRIPT_RENDERERS, DefaultInlineText, DefaultMarkdown, DefaultPrompt, DefaultSessionTitle, DiffLines, Dot, EditDiffBlock, ErrorRow, ExchangeFoldRow, FILL_MIN_PROMPTS, FailedMark, FailureRow, FileBadgeIcon, FoldHeader, GUTTER_STEP_PX, INLINE_CODE_CLASS, ImageGenerationBlock, InfoRow, InlineChipText, InlineCode, InteractionToolBody, LazyRow, LinkBadge, LinkIcon, LiveOutput, LoadEarlierRow, LoadFullOutputButton, MAX_MATCHES, Markdown, MarkdownContext, MarkdownDiagrams, MermaidDiagram, MessageGroupRow, ModelVerdict, NestedToolCalls, NoticeRow, OpenSessionContext, PromptEcho, PromptLines, ProseMarkdown, ReadFileBlock, RefChip, ReferenceChip, ReferenceText, RowFrame, RowIconsContext, RunReceiptInline, RunSummaryRow, RunnableCodeBlock, SearchHighlightStyle, SelectCursor, SelectTurnExit, SelectTurnHintKeys, SelectTurnProvider, SessionCard, SessionEventRow, ShellBlockProvider, SkillCard, SpawnEndRow, SpawnStartRow, SubagentBlock, TextRow, ThinkingBatchRow, ThinkingRow, ToolBatchRow, ToolDetails, ToolGlyph, ToolInput, ToolMedia, ToolRow, ToolTiming, TranscriptActionsProvider, TranscriptRenderersProvider, TranscriptRow, TranscriptRowSlot, TranscriptSearch, TranscriptSettling, UserBashRow, UserPromptAttachments, UserPromptRow, WorkerDetails, classifyInlineRef, copyPromptLines, createTurnCommands, defaultAttachmentLabel, drawsImageGeneration, fileBadgeName, fileBadgeSpec, findRefs, hasInteractionBody, holdForceMountRows, imageRequestsOf, isHiddenRow, lineStateOf, linkGlyph, mountRowNow, numberRef, parseRefUrl, parseReferenceUrl, parseToolMedia, refHref, referenceUrl, remarkReferences, remarkRefs, savedPaths, siteIconValue, useBackgroundMount, useBadgeMenu, useChipResolution, useCommand, useCommitInfo, useComposerSearch, useFillViewportScrollback, useForceMountRows, useFullOutput, useModelName, useReferenceMatches, useReferenceProviders, useReferenceView, useReferencedSession, useResolveChipNow, useRowIcons, useSelectStops, useSelectTurn, useSelectTurnKeys, useSettledReveal, useShellBlockScope, useSiteIcon, useSkill, useStickToBottom, useToolMedia, useTranscriptActions, useTranscriptFind, useTranscriptFindKey, useTranscriptRenderers, useTranscriptRows, useTranscriptScroll, useTranscriptSearch, useTranscriptSelectionCopy, useTurnCommands, useTurnMenu, useWheelHoverPause };
+export { AUTO_FILL_PAGES, AnsiSpans, AnsiText, AttachmentIcon, AuthFailureCard, BADGE_GLYPH, BadgeMenuProvider, CHIP_CARD_WIDTH, CODE_PANEL, COMMAND_DETAIL_LINE, CardMarkdown, Caret, ChipCard, ChipHover, CodemodeScript, CommandCard, CommandDetailRow, CommandNoteRow, CommandScopeContext, CommitCard, CompactSummaryRow, CvRow, DEFAULT_TRANSCRIPT_RENDERERS, DefaultInlineText, DefaultMarkdown, DefaultPrompt, DefaultSessionTitle, DiffLines, Dot, EditDiffBlock, ErrorRow, ExchangeFoldRow, FILL_MIN_PROMPTS, FailedMark, FailureRow, FileBadgeIcon, FoldHeader, GUTTER_STEP_PX, INLINE_CODE_CLASS, ImageGenerationBlock, InfoRow, InlineChipText, InlineCode, InteractionToolBody, LazyRow, LinkBadge, LinkIcon, LiveOutput, LoadEarlierRow, LoadFullOutputButton, MAX_MATCHES, Markdown, MarkdownContext, MarkdownDiagrams, MermaidDiagram, MessageGroupRow, ModelVerdict, NestedToolCalls, NoticeRow, OpenSessionContext, PromptEcho, PromptLines, ProseMarkdown, ReadFileBlock, RefChip, ReferenceChip, ReferenceText, RowFrame, RowIconsContext, RunReceiptInline, RunSummaryRow, RunnableCodeBlock, SearchHighlightStyle, SelectCursor, SelectTurnExit, SelectTurnHintKeys, SelectTurnProvider, SessionCard, SessionEventRow, ShellBlockProvider, SkillCard, SpawnEndRow, SpawnStartRow, SubagentBlock, TextRow, ThinkingBatchRow, ThinkingRow, ToolBatchRow, ToolDetails, ToolGlyph, ToolInput, ToolMedia, ToolRow, ToolTiming, TranscriptActionsProvider, TranscriptRenderersProvider, TranscriptRow, TranscriptRowSlot, TranscriptSearch, TranscriptSettling, UserBashRow, UserPromptAttachments, UserPromptRow, WorkerDetails, classifyInlineRef, copyPromptLines, createTurnCommands, defaultAttachmentLabel, drawsImageGeneration, fileBadgeName, fileBadgeSpec, findRefs, hasInteractionBody, holdForceMountRows, imageRequestsOf, isHiddenRow, lineStateOf, linkGlyph, mountRowNow, numberRef, parseRefUrl, parseReferenceUrl, parseToolMedia, refHref, referenceUrl, remarkReferences, remarkRefs, savedPaths, siteIconValue, useBackgroundMount, useBadgeMenu, useChipResolution, useCommand, useCommitInfo, useComposerSearch, useFillViewportScrollback, useForceMountRows, useFullOutput, useModelName, useReferenceMatches, useReferenceProviders, useReferenceView, useReferencedSession, useResolveChipNow, useRowIcons, useSelectStops, useSelectTurn, useSelectTurnKeys, useSettledReveal, useShellBlockScope, useSiteIcon, useSkill, useStickToBottom, useToolMedia, useTranscriptActions, useTranscriptFind, useTranscriptFindKey, useTranscriptRenderers, useTranscriptRows, useTranscriptScroll, useTranscriptSearch, useTranscriptSelectionCopy, useTurnCommands, useTurnMenu, useWheelHoverPause };

package/dist/chat/transcript/notices.d.ts

@@ -84,7 +84,8 @@ interface FailureRowProps {
  * word a small button that picks the work back up: Continue when the run
  * had done something, Retry (the same prompt) when it had not. Both hand
  * their prompt to `onResume` (the desktop app: the composer's send); without
- * it there is no button.
+ * it there is no button. A run stopped by a failed sign-in (`detail.auth`)
+ * shows the sign-in's card instead (`AuthFailureCard`).
  */
 declare const FailureRow: import("react").MemoExoticComponent<({ text, detail, failure, resumable, onResume, className, style }: FailureRowProps) => import("react").JSX.Element>;
 /** Props for {@link SessionEventRow}. */

package/dist/chat/transcript/notices.js

@@ -3,6 +3,7 @@ import { useChatLabels } from "../useChatLabels.js";
 import { Caret } from "./frame.js";
 import { useTranscriptRenderers } from "./renderers.js";
 import { failureTooltip } from "../headless/transcript/run-failures.js";
+import { AuthFailureCard } from "./AuthFailureCard.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useId, useState } from "react";
 import { CONTINUE_PROMPT, SESSION_EVENT_STATUS_STYLE, describeSpawnEnd, sessionDirLabel, sessionEventExcerpt, sessionEventMeta, shortSessionId, spawnStartParts } from "zidane/chat/pure";
@@ -100,10 +101,21 @@ const ErrorRow = memo(({ text, className, style }) => {
 * word a small button that picks the work back up: Continue when the run
 * had done something, Retry (the same prompt) when it had not. Both hand
 * their prompt to `onResume` (the desktop app: the composer's send); without
-* it there is no button.
+* it there is no button. A run stopped by a failed sign-in (`detail.auth`)
+* shows the sign-in's card instead (`AuthFailureCard`).
 */
 const FailureRow = memo(({ text, detail, failure, resumable, onResume, className, style }) => {
 	const labels = useChatLabels();
+	if (detail?.auth && failure.cause === "error") return /* @__PURE__ */ jsx(AuthFailureCard, {
+		auth: detail.auth,
+		text,
+		detail,
+		failure,
+		resumable,
+		...onResume ? { onResume } : {},
+		className,
+		style
+	});
 	const retry = failure.resume === "retry" && failure.prompt;
 	const byUser = failure.cause === "aborted";
 	return /* @__PURE__ */ jsxs("div", {

package/dist/chat/transcript/script-input.d.ts

@@ -1,6 +1,6 @@
 import { ToolRowModel } from "../headless/transcript/rows.js";
 import "../headless/transcript/index.js";
-import { LC as ScriptProgress } from "../../dist/index-WlE93Q6d.js";
+import { Gw as ScriptProgress } from "../../dist/index-DqCio7Nd.js";
 //#region src/chat/transcript/script-input.d.ts
 /**
  * A tool row's progress and how it ended, as `ToolInput` takes them for a Codemode script.

package/dist/chat/transcript/shell-block.js

@@ -1,6 +1,7 @@
 import { iconButtonClass } from "../../components/IconButton.js";
 import { CopyButton } from "../../components/CopyButton.js";
 import { constant, useReadable } from "../headless/store.js";
+import "../headless/block-runs.js";
 import { useOptionalChatHost } from "../ChatProvider.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { relativeTime } from "../headless/session-list.js";
@@ -9,7 +10,6 @@ import { useTranscriptActions } from "./actions.js";
 import { AnsiText } from "./AnsiText.js";
 import { LiveOutput } from "./LiveOutput.js";
 import { ToolTiming } from "./tool-parts.js";
-import "../headless/block-runs.js";
 import { pushComposerAttachment, textAttachment } from "../composer/composer-bus.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/components/HowItWorks.d.ts

@@ -20,6 +20,13 @@ interface HowItWorksProps {
   illustration: ReactNode | ((step: number) => ReactNode);
   /** Buttons or links that act on what the tutorial explains, such as "Build an extension". */
   actions?: ReactNode;
+  /**
+   * The block's surface: `tray` sits into the page (a settings page), `raised`
+   * lifts it off a bare panel so it stands out there.
+   *
+   * @default 'tray'
+   */
+  surface?: 'tray' | 'raised';
   /** Extra classes on the block. */
   className?: string;
   /** Inline styles on the root element, merged after the component's own. */
@@ -30,6 +37,6 @@ interface HowItWorksProps {
  *
  * @param props - Component props.
  */
-declare function HowItWorks({ title, steps, illustration, actions, className, style }: HowItWorksProps): import("react").JSX.Element;
+declare function HowItWorks({ title, steps, illustration, actions, surface, className, style }: HowItWorksProps): import("react").JSX.Element;
 //#endregion
 export { HowItWorks, HowItWorksProps, HowItWorksStep };

package/dist/components/HowItWorks.js

@@ -17,7 +17,7 @@ import { useCallback, useEffect, useId, useRef, useState } from "react";
 *
 * @param props - Component props.
 */
-function HowItWorks({ title, steps, illustration, actions, className = "", style }) {
+function HowItWorks({ title, steps, illustration, actions, surface = "tray", className = "", style }) {
 	const id = useId();
 	const [shown, setShown] = useState(0);
 	const tour = typeof illustration === "function";
@@ -26,7 +26,7 @@ function HowItWorks({ title, steps, illustration, actions, className = "", style
 	return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"aria-labelledby": `${id}-title`,
-		className: `zg-how zg-tray rounded-zg-xl p-2 ${className}`,
+		className: `zg-how ${surface === "raised" ? "zg-raised border" : "zg-tray"} rounded-zg-xl p-2 ${className}`,
 		style,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "zg-how-split",

package/dist/components/RowActionsMenu.d.ts

@@ -1,10 +1,15 @@
-import { CSSProperties } from "react";
+import { CSSProperties, ReactElement } from "react";
 //#region src/components/RowActionsMenu.d.ts
 interface RowActionBase {
   /** Stable identifier, used as the row's key. */
   id: string;
   /** Text of the row. */
   label: string;
+  /**
+   * Leading glyph, drawn muted: an icon class (`i-ph-terminal-window`), or an element (a logo). Give every row
+   * of a menu one, or none.
+   */
+  icon?: string | ReactElement;
   /** Red-tinted treatment for destructive actions (e.g. Delete). */
   destructive?: boolean;
   /** Grays the row out and ignores clicks + shortcut dispatch (e.g. while the action is already running). */