zidane-ui 9.1.4 → 9.1.6

package/dist/onboarding/demos/how-it-works.js

@@ -1003,6 +1003,123 @@ function HostsScene({ step, className, style }) {
 		})
 	});
 }
+/** Secrets: a password field the agent asks with, the private file that keeps the key, then a command whose output hides it. */
+function SecretsScene({ step, className, style }) {
+	const labels = useOnboardingLabels();
+	return /* @__PURE__ */ jsx(TourStage, {
+		step,
+		className,
+		style,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "zg-demo-stack items-center justify-items-center w-full max-w-[268px]",
+			children: [
+				/* @__PURE__ */ jsxs(Part, {
+					at: [0],
+					className: "relative zg-raised border rounded-zg-lg flex flex-col gap-2 px-3.5 py-3 w-[212px]",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate text-zg-label text-[var(--zg-text)]",
+							children: labels.sceneSecretPrompt
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "zg-well flex items-center gap-1.5 h-6 px-2 rounded-zg-md min-w-0",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "i-ph-lock-simple text-zg-label text-[var(--zg-text-muted)] shrink-0"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "zg-loop zg-tour-type truncate font-mono text-zg-badge text-[var(--zg-text)]",
+								style: after(300),
+								children: labels.sceneSecretDots
+							})]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: `zg-loop zg-tour-press ${buttonClass({
+								variant: "solid",
+								size: "xs"
+							})} self-start`,
+							style: after(1500),
+							children: labels.sceneSecretSave
+						}),
+						/* @__PURE__ */ jsx(TourPointer, {
+							className: "absolute left-14 bottom-1",
+							from: [40, 30]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(Part, {
+					at: [1],
+					className: "flex items-center w-full",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "zg-raised border rounded-full grid place-items-center w-9 h-9 shrink-0",
+							children: /* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "i-ph-key text-zg-body text-[var(--zg-accent)]"
+							})
+						}),
+						/* @__PURE__ */ jsx(Link, {
+							lit: [1],
+							dots: [1]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "zg-raised border rounded-zg-md flex flex-col gap-1 px-2.5 py-2 w-[156px] shrink-0 min-w-0",
+							children: [
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex items-center gap-1.5 min-w-0",
+									children: [/* @__PURE__ */ jsx("span", {
+										"aria-hidden": true,
+										className: "i-ph-file-lock text-zg-label text-[var(--zg-text-muted)] shrink-0"
+									}), /* @__PURE__ */ jsx("span", {
+										className: "truncate font-mono text-zg-badge text-[var(--zg-text)]",
+										children: labels.sceneSecretName
+									})]
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "truncate font-mono text-zg-badge text-[var(--zg-text-muted)]",
+									children: labels.sceneSecretsFolder
+								}),
+								/* @__PURE__ */ jsx(Pop, {
+									at: 900,
+									className: "self-start",
+									children: /* @__PURE__ */ jsxs(MetaChip, {
+										tone: "success",
+										children: [/* @__PURE__ */ jsx("span", {
+											"aria-hidden": true,
+											className: "i-ph-clock"
+										}), labels.sceneSecretTtl]
+									})
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Part, {
+					at: [2],
+					className: "flex items-center w-full",
+					children: /* @__PURE__ */ jsxs(MiniWindow, {
+						className: "w-full",
+						bodyClassName: "px-2.5 pb-2.5 gap-1 font-mono text-zg-badge",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "zg-loop zg-tour-type truncate text-[var(--zg-text)]",
+							style: after(200),
+							children: labels.sceneSecretCommand
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "zg-loop zg-tour-then flex items-center gap-1.5 min-w-0",
+							style: after(1300),
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "i-ph-shield-check shrink-0 text-zg-success"
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate text-[var(--zg-accent)]",
+								children: labels.sceneSecretOutput
+							})]
+						})]
+					})
+				})
+			]
+		})
+	});
+}
 /** The scene of each tutorial. */
 const TUTORIAL_SCENES = {
 	connectors: ConnectorsScene,
@@ -1013,7 +1130,8 @@ const TUTORIAL_SCENES = {
 	environments: EnvironmentsScene,
 	files: FilesScene,
 	accounts: AccountsScene,
-	hosts: HostsScene
+	hosts: HostsScene,
+	secrets: SecretsScene
 };
 //#endregion
-export { AccountsScene, ConnectorsScene, EnvironmentsScene, ExtensionsScene, FilesScene, HostsScene, InstructionsScene, SkillsScene, TUTORIAL_SCENES };
+export { AccountsScene, ConnectorsScene, EnvironmentsScene, ExtensionsScene, FilesScene, HostsScene, InstructionsScene, SecretsScene, SkillsScene, TUTORIAL_SCENES };

package/dist/onboarding/demos/index.js

@@ -1,6 +1,6 @@
 import { DemoStage } from "./parts.js";
-import { ApprovalDemo, SandboxDemo } from "./autonomy.js";
 import { TUTORIAL_SCENES } from "./how-it-works.js";
+import { ApprovalDemo, SandboxDemo } from "./autonomy.js";
 import { ExtensionDemo } from "./extensions.js";
 import { FeatureDemo, hasFeatureDemo } from "./features.js";
 export { ApprovalDemo, DemoStage, ExtensionDemo, FeatureDemo, SandboxDemo, TUTORIAL_SCENES, hasFeatureDemo };

package/dist/onboarding/headless/labels.d.ts

@@ -111,6 +111,14 @@ declare const DEFAULT_ONBOARDING_LABELS: {
   sceneTokenCreate: string;
   sceneToken: string;
   sceneWss: string;
+  sceneSecretPrompt: string;
+  sceneSecretDots: string;
+  sceneSecretSave: string;
+  sceneSecretName: string;
+  sceneSecretsFolder: string;
+  sceneSecretTtl: string;
+  sceneSecretCommand: string;
+  sceneSecretOutput: string;
   sourceField: string;
   browse: string;
   sourceName: (label: string, repo: string) => string;
@@ -185,6 +193,15 @@ declare const DEFAULT_ONBOARDING_LABELS: {
   demoNotifyApp: string;
   demoNotifyBody: string;
   demoFolders: readonly ["my-app", ".zidane", "extensions", "deploy.ts"];
+  demoSecretPrompt: string;
+  demoSecretDots: string;
+  demoSecretSave: string;
+  demoSecretSaved: string;
+  demoReminderTyped: string;
+  demoReminderIn: string;
+  demoReminderNow: string;
+  demoReminderFrom: string;
+  demoReminderText: string;
   demoCommitCommand: string;
   demoCommitMessage: string;
   demoBranch: string;

package/dist/onboarding/headless/labels.js

@@ -165,6 +165,14 @@ const DEFAULT_ONBOARDING_LABELS = {
 	sceneTokenCreate: "$ zidane server token create --name laptop",
 	sceneToken: "zds_3f2a…",
 	sceneWss: "wss://",
+	sceneSecretPrompt: "Tailscale auth key",
+	sceneSecretDots: "••••••••••••",
+	sceneSecretSave: "Save securely",
+	sceneSecretName: "TS_AUTHKEY",
+	sceneSecretsFolder: "~/.zidane/secrets",
+	sceneSecretTtl: "24 hours",
+	sceneSecretCommand: "$ cat $ZIDANE_SECRETS/TS_AUTHKEY",
+	sceneSecretOutput: "[secret:TS_AUTHKEY]",
 	sourceField: "Repository or package",
 	browse: "Browse",
 	sourceName: (label, repo) => `${label}, ${repo}`,
@@ -252,6 +260,15 @@ const DEFAULT_ONBOARDING_LABELS = {
 		"extensions",
 		"deploy.ts"
 	],
+	demoSecretPrompt: "Tailscale auth key",
+	demoSecretDots: "••••••••••••",
+	demoSecretSave: "Save securely",
+	demoSecretSaved: "Saved TS_AUTHKEY",
+	demoReminderTyped: "/remind in 20m check the deploy",
+	demoReminderIn: "in 20 min",
+	demoReminderNow: "now",
+	demoReminderFrom: "Reminder",
+	demoReminderText: "Check the deploy",
 	demoCommitCommand: "/commit",
 	demoCommitMessage: "feat: rate limit /chat",
 	demoBranch: "main",

package/dist/onboarding/index.js

@@ -1,14 +1,14 @@
 import { OnboardingHostProvider, OnboardingProvider, useOnboarding, useOnboardingHost, useOnboardingLabels, useOnboardingStep } from "./OnboardingProvider.js";
+import { useSignIn } from "./useSignIn.js";
 import { ExtensionMark, NATIVE_EXTENSION_ICONS, ProviderMark, extensionMarkOf } from "./marks.js";
-import { ConnectProviderCard } from "./ConnectProviderCard.js";
 import { DemoStage } from "./demos/parts.js";
+import { TUTORIAL_SCENES } from "./demos/how-it-works.js";
+import { Tutorial } from "./tutorials.js";
+import { ConnectProviderCard } from "./ConnectProviderCard.js";
 import { ApprovalDemo, SandboxDemo } from "./demos/autonomy.js";
 import { OnboardingStepFrame } from "./OnboardingStepFrame.js";
 import { AutonomyStep } from "./steps/AutonomyStep.js";
-import { TUTORIAL_SCENES } from "./demos/how-it-works.js";
-import { Tutorial } from "./tutorials.js";
 import { ConnectorsStep } from "./steps/ConnectorsStep.js";
-import { useSignIn } from "./useSignIn.js";
 import { ConnectStep } from "./steps/ConnectStep.js";
 import { ConversationPresetPreview, ConversationPreview, transcriptPreviewOptions } from "./conversation.js";
 import { ConversationStep } from "./steps/ConversationStep.js";

package/dist/onboarding/marks.d.ts

@@ -33,8 +33,7 @@ interface ExtensionMarkEntry {
   brand?: string;
 }
 /**
- * The mark of an extension: its own icon, else the logo a listing gives it, else `extensionMark`'s
- * (the native catalog's logo or icon, else its letter).
+ * The mark of an extension: `extensionMark` of its entry, the rule every app and every row shares.
  *
  * @param entry - The extension.
  */

package/dist/onboarding/marks.js

@@ -29,24 +29,16 @@ function ProviderMark({ provider, size = "md", className }) {
 	});
 }
 /**
-* The mark of an extension: its own icon, else the logo a listing gives it, else `extensionMark`'s
-* (the native catalog's logo or icon, else its letter).
+* The mark of an extension: `extensionMark` of its entry, the rule every app and every row shares.
 *
 * @param entry - The extension.
 */
 function extensionMarkOf(entry) {
-	const own = entry.icon?.gui?.trim();
-	if (own) return {
-		kind: "icon",
-		gui: own
-	};
-	if (entry.brand) return {
-		kind: "brand",
-		brand: entry.brand
-	};
 	return extensionMark({
 		id: entry.name,
-		...entry.label ? { name: entry.label } : {}
+		...entry.label ? { name: entry.label } : {},
+		...entry.icon ? { icon: entry.icon } : {},
+		...entry.brand ? { brand: entry.brand } : {}
 	});
 }
 /**

package/dist/onboarding/steps/ConnectorsStep.js

@@ -6,8 +6,8 @@ import { constant, useReadable } from "../../chat/headless/store.js";
 import { connectorsFromImport } from "../headless/controller.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
 import { RoutedLink } from "../../extensions/links.js";
-import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { Tutorial } from "../tutorials.js";
+import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { StepSection, StepTray } from "./StepSection.js";
 import { TaskChip, TaskFailure } from "./tasks.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/onboarding/steps/ReadyStep.js

@@ -4,11 +4,11 @@ import { BrowserSignIn } from "../../components/BrowserSignIn.js";
 import { presetFor } from "../../theme/accents.js";
 import { constant, useReadable } from "../../chat/headless/store.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
+import { useSignIn } from "../useSignIn.js";
 import { ExtensionMark as ExtensionMark$1, ProviderMark } from "../marks.js";
 import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { StepSection } from "./StepSection.js";
 import { TaskChip } from "./tasks.js";
-import { useSignIn } from "../useSignIn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, useEffect, useState } from "react";
 import { APPROVAL_MODE_OPTIONS, TRANSCRIPT_PRESETS, connectorById, nativeExtensionByName, onboardingImportParts, onboardingSwitchedFeatures, transcriptPresetOf } from "zidane/chat/pure";

package/dist/onboarding/steps/SkillsStep.js

@@ -1,7 +1,7 @@
 import { constant, useReadable } from "../../chat/headless/store.js";
 import { useOnboarding, useOnboardingLabels } from "../OnboardingProvider.js";
-import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { Tutorial } from "../tutorials.js";
+import { OnboardingStepFrame } from "../OnboardingStepFrame.js";
 import { SkillSourceBrowser } from "../skills/SkillSourceBrowser.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/onboarding/steps/SkillsStep.tsx

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

@@ -3,8 +3,8 @@ import { Segmented } from "../../../components/Segmented.js";
 import { ErrorNote, FormCard, OpLine } from "../../../components/Form.js";
 import { BrowserSignIn } from "../../../components/BrowserSignIn.js";
 import { useOnboarding, useOnboardingLabels } from "../../OnboardingProvider.js";
-import { ProviderMark } from "../../marks.js";
 import { useSignIn } from "../../useSignIn.js";
+import { ProviderMark } from "../../marks.js";
 import { KeyForm } from "./KeyForm.js";
 import { ProviderReady } from "./ProviderReady.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/onboarding/tutorials.d.ts

@@ -9,6 +9,8 @@ interface TutorialProps {
   actions?: ReactNode;
   /** The server it is about, by name: the steps that name this computer name it instead. Absent: this computer. */
   host?: string;
+  /** The block's surface (`HowItWorks`): `raised` on a bare panel. @default 'tray' */
+  surface?: 'tray' | 'raised';
   /** Extra classes on the block. */
   className?: string;
 }
@@ -17,6 +19,6 @@ interface TutorialProps {
  *
  * @param props - Component props.
  */
-declare function Tutorial({ topic, actions, host, className }: TutorialProps): import("react").JSX.Element;
+declare function Tutorial({ topic, actions, host, surface, className }: TutorialProps): import("react").JSX.Element;
 //#endregion
 export { Tutorial, TutorialProps };

package/dist/onboarding/tutorials.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @param props - Component props.
 */
-function Tutorial({ topic, actions, host, className = "" }) {
+function Tutorial({ topic, actions, host, surface, className = "" }) {
 	const labels = useOnboardingLabels();
 	const words = host === void 0 ? labels.tutorials[topic] : labels.tutorialOnServer(topic, host);
 	const Scene = TUTORIAL_SCENES[topic];
@@ -17,6 +17,7 @@ function Tutorial({ topic, actions, host, className = "" }) {
 		steps: words.steps,
 		illustration: (step) => /* @__PURE__ */ jsx(Scene, { step }),
 		actions,
+		...surface ? { surface } : {},
 		className
 	});
 }

package/dist/palette/app-sources.js

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

package/dist/palette/headless/app-sources.js

@@ -76,6 +76,16 @@ const ACTIONS = {
 		group: "navigate",
 		icon: "i-ph-sidebar-simple"
 	},
+	navigateBack: {
+		group: "navigate",
+		icon: "i-ph-arrow-left",
+		keywords: ["history", "previous"]
+	},
+	navigateForward: {
+		group: "navigate",
+		icon: "i-ph-arrow-right",
+		keywords: ["history", "next"]
+	},
 	panelNext: {
 		group: "navigate",
 		icon: "i-ph-caret-double-right"

package/dist/palette/headless/labels.js

@@ -62,6 +62,8 @@ const DEFAULT_PALETTE_LABELS = {
 		openArtifacts: "Show artifacts",
 		openUsagePanel: "Show usage",
 		toggleSidebar: "Toggle sidebar",
+		navigateBack: "Go back",
+		navigateForward: "Go forward",
 		panelNext: "Next panel tab",
 		panelPrev: "Previous panel tab",
 		tabNext: "Next tab",

package/dist/session/ArtifactsPanel.js

@@ -2,6 +2,7 @@ import { IconButton } from "../components/IconButton.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";
@@ -9,7 +10,6 @@ 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

package/dist/session/PanelAttention.d.ts

@@ -25,16 +25,24 @@ interface InboxAttentionProps extends PanelAttentionProps {
  */
 declare function InboxAttention({ sessionId, actions, reveal }: InboxAttentionProps): null;
 /**
- * Badges the Todos tab with the active session's open items (pending and in progress); hidden at zero.
+ * Badges the Queue tab with the active session's queued messages; hidden at zero.
  *
  * @param props - The {@link PanelAttentionProps}.
  */
-declare function TodosAttention({ sessionId, actions }: PanelAttentionProps): null;
+declare function QueueAttention({ sessionId, actions }: PanelAttentionProps): null;
+/** Props for {@link SecretsAttention}. */
+interface SecretsAttentionProps {
+  /** The active session, or `null`. */
+  sessionId: string | null;
+  /** Where the open goes. Default: the `WorkspaceProvider` above (none: nothing happens). Keep it stable. */
+  actions?: Pick<WorkspaceActions, 'openProactive'>;
+}
 /**
- * Badges the Queue tab with the active session's queued messages; hidden at zero.
+ * Opens the Secrets tab (proactively) the first time the active session saves a secret, once per session. Reads the
+ * session's secrets itself, so the change signal reaches it while the panel is closed.
  *
- * @param props - The {@link PanelAttentionProps}.
+ * @param props - The {@link SecretsAttentionProps}.
  */
-declare function QueueAttention({ sessionId, actions }: PanelAttentionProps): null;
+declare function SecretsAttention({ sessionId, actions }: SecretsAttentionProps): null;
 //#endregion
-export { AttentionActions, InboxAttention, InboxAttentionProps, PanelAttentionProps, QueueAttention, TodosAttention };
+export { AttentionActions, InboxAttention, InboxAttentionProps, PanelAttentionProps, QueueAttention, SecretsAttention, SecretsAttentionProps };

package/dist/session/PanelAttention.js

@@ -1,9 +1,9 @@
 import { useOptionalChatHost } from "../chat/ChatProvider.js";
-import { useSessionQueue, useSessionTodos } from "./SessionProvider.js";
+import { useSessionHost, useSessionQueue, useSessionSecrets } from "./SessionProvider.js";
 import { useOptionalWorkspaceActions } from "../workspace/WorkspaceProvider.js";
 import { useAllInteractions, usePendingInteractions } from "../chat/interactions/hooks.js";
 import { useEffect, useLayoutEffect, useRef } from "react";
-import { INBOX_PANEL_ID, QUEUE_PANEL_ID, TODOS_PANEL_ID } from "zidane/chat/pure";
+import { INBOX_PANEL_ID, QUEUE_PANEL_ID, SECRETS_PANEL_ID } from "zidane/chat/pure";
 //#region src/session/PanelAttention.tsx
 /**
 * The side panel's attention drivers: they turn what waits in a session into
@@ -16,12 +16,13 @@ import { INBOX_PANEL_ID, QUEUE_PANEL_ID, TODOS_PANEL_ID } from "zidane/chat/pure
 *     once); a live request in the active session pins the Inbox tab and
 *     shows it, once per request (a blocked run outranks a tab). Rehydrated
 *     requests only badge.
-*   - `TodosAttention`: open items of the active session's list, info tone.
 *   - `QueueAttention`: messages of the active session waiting for its run
 *     to end, info tone.
+*   - `SecretsAttention`: the first time the active session saves a secret
+*     (new, or a replaced one), a proactive open of the Secrets tab, once per
+*     session; it never yanks the panel off a tab the user picked.
 *
 *   <InboxAttention sessionId={active} />
-*   <TodosAttention sessionId={active} />
 *   <QueueAttention sessionId={active} />
 */
 const ATTENTION_TONE = "attention";
@@ -74,47 +75,57 @@ function InboxAttention({ sessionId, actions, reveal = true }) {
 	return null;
 }
 /**
-* Badges the Todos tab with the active session's open items (pending and in progress); hidden at zero.
+* Badges the Queue tab with the active session's queued messages; hidden at zero.
 *
 * @param props - The {@link PanelAttentionProps}.
 */
-function TodosAttention({ sessionId, actions }) {
+function QueueAttention({ sessionId, actions }) {
 	const panel = useAttentionActions(actions);
-	const snap = useSessionTodos(sessionId);
-	const open = snap && snap.todos.length > 0 ? snap.tally.pending + snap.tally.in_progress : 0;
+	const queued = useSessionQueue(sessionId).length;
 	useLayoutEffect(() => {
 		if (!sessionId || !panel) return;
-		panel.setAttention(sessionId, TODOS_PANEL_ID, open > 0 ? {
-			count: open,
+		panel.setAttention(sessionId, QUEUE_PANEL_ID, queued > 0 ? {
+			count: queued,
 			tone: "info"
 		} : null);
 	}, [
 		sessionId,
-		open,
+		queued,
 		panel
 	]);
 	return null;
 }
 /**
-* Badges the Queue tab with the active session's queued messages; hidden at zero.
+* Opens the Secrets tab (proactively) the first time the active session saves a secret, once per session. Reads the
+* session's secrets itself, so the change signal reaches it while the panel is closed.
 *
-* @param props - The {@link PanelAttentionProps}.
+* @param props - The {@link SecretsAttentionProps}.
 */
-function QueueAttention({ sessionId, actions }) {
-	const panel = useAttentionActions(actions);
-	const queued = useSessionQueue(sessionId).length;
-	useLayoutEffect(() => {
-		if (!sessionId || !panel) return;
-		panel.setAttention(sessionId, QUEUE_PANEL_ID, queued > 0 ? {
-			count: queued,
-			tone: "info"
-		} : null);
+function SecretsAttention({ sessionId, actions }) {
+	const fromProvider = useOptionalWorkspaceActions();
+	const panel = actions ?? fromProvider;
+	const secrets = useSessionHost().secrets;
+	const entries = useSessionSecrets(sessionId);
+	useEffect(() => {
+		if (sessionId) secrets?.refresh(sessionId).catch(() => void 0);
+	}, [secrets, sessionId]);
+	const seen = useRef(/* @__PURE__ */ new Map());
+	const opened = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		if (!sessionId || !entries) return;
+		const known = seen.current.get(sessionId);
+		const now = new Map(entries.map((e) => [e.name, e.createdAt]));
+		seen.current.set(sessionId, now);
+		if (!known || !panel || opened.current.has(sessionId)) return;
+		if (!entries.some((e) => e.sessionId === sessionId && known.get(e.name) !== e.createdAt)) return;
+		opened.current.add(sessionId);
+		panel.openProactive(SECRETS_PANEL_ID);
 	}, [
 		sessionId,
-		queued,
+		entries,
 		panel
 	]);
 	return null;
 }
 //#endregion
-export { InboxAttention, QueueAttention, TodosAttention };
+export { InboxAttention, QueueAttention, SecretsAttention };

package/dist/session/PlanTracker.d.ts

@@ -0,0 +1,54 @@
+import { InboxPlans } from "./headless/plans.js";
+import { CSSProperties } from "react";
+import { PlanView } from "zidane/chat";
+//#region src/session/PlanTracker.d.ts
+/** Props for {@link PlanTracker}. */
+interface PlanTrackerProps {
+  /** The session the plan belongs to. */
+  sessionId: string;
+  /** The plan to show. */
+  plan: PlanView;
+  /** Leave out the title row (a "Recent" row opened already shows it). */
+  hideHeader?: boolean;
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+}
+/**
+ * The tone of a plan's state chip.
+ *
+ * @param plan - The plan.
+ */
+declare function planStateTone(plan: PlanView): 'accent' | 'warn' | 'success' | 'muted';
+/**
+ * A session's plans for the Inbox: the one in progress and the recent ones. Reads the session from the host once.
+ *
+ * @param sessionId - The session.
+ */
+declare function useInboxPlans(sessionId: string): InboxPlans;
+/**
+ * Renders one plan with its step edits, retry, add box, tally, and the plan's stop, resume and drop.
+ *
+ * @param props - The {@link PlanTrackerProps}.
+ */
+declare function PlanTracker({ sessionId, plan, hideHeader, className, style }: PlanTrackerProps): import("react").JSX.Element;
+/** Props for {@link RecentPlans}. */
+interface RecentPlansProps {
+  /** The session the plans belong to. */
+  sessionId: string;
+  /** Closed plans, newest first (`useInboxPlans`). */
+  plans: readonly PlanView[];
+  /** Extra classes on the root element. */
+  className?: string;
+  /** Inline styles on the root element. */
+  style?: CSSProperties;
+}
+/**
+ * The Inbox's "Recent" plans: one line each (title, how it ended, its tally), opened in place to read its steps.
+ *
+ * @param props - The {@link RecentPlansProps}.
+ */
+declare function RecentPlans({ sessionId, plans, className, style }: RecentPlansProps): import("react").JSX.Element;
+//#endregion
+export { PlanTracker, PlanTrackerProps, RecentPlans, RecentPlansProps, planStateTone, useInboxPlans };