zidane-ui 9.1.3 → 9.1.5

package/dist/onboarding/demos/features.js

@@ -375,6 +375,61 @@ function DaemonDemo({ on, className, style }) {
 		})
 	});
 }
+/** Reminders: you type `/remind`, its chip counts down to now, and the reminder lands in the session. */
+function RemindersDemo({ on, className, style }) {
+	const labels = useOnboardingLabels();
+	return /* @__PURE__ */ jsx(DemoStage, {
+		on,
+		className,
+		style,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col items-stretch gap-2 w-full max-w-[300px] min-w-0",
+			children: [/* @__PURE__ */ jsxs(MiniWindow, {
+				className: "w-full",
+				bodyClassName: "px-2.5 pt-0.5 pb-2.5 gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx(Line, { width: "64%" }),
+					/* @__PURE__ */ jsx(Line, { width: "42%" }),
+					/* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2 pt-0.5 min-w-0",
+						children: [/* @__PURE__ */ jsxs(MetaChip, { children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "i-ph-alarm"
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "zg-demo-stack",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "zg-loop zg-demo-before",
+								children: labels.demoReminderIn
+							}), /* @__PURE__ */ jsx("span", {
+								className: "zg-loop zg-demo-after text-[var(--zg-accent)]",
+								children: labels.demoReminderNow
+							})]
+						})] }), /* @__PURE__ */ jsx("span", {
+							className: "relative flex-1 h-1 rounded-full overflow-hidden zg-demo-track",
+							children: /* @__PURE__ */ jsx("span", { className: "zg-loop zg-demo-grow absolute inset-0 rounded-full bg-[var(--zg-accent-dot)]" })
+						})]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "zg-loop zg-demo-after zg-tray self-end flex flex-col gap-0.5 max-w-[85%] px-2 py-1 rounded-zg-md min-w-0",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "zg-meta truncate",
+							children: labels.demoReminderFrom
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-zg-label truncate",
+							children: labels.demoReminderText
+						})]
+					})
+				]
+			}), /* @__PURE__ */ jsx(Composer, { children: /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center min-w-0 flex-1 text-zg-label whitespace-nowrap overflow-hidden",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "zg-loop zg-demo-type-early truncate",
+					children: labels.demoReminderTyped
+				}), /* @__PURE__ */ jsx(Caret, {})]
+			}) })]
+		})
+	});
+}
 /** Browser tab: a page at localhost:5173, and the agent's pointer that clicks its button. */
 function BrowserDemo({ on, className, style }) {
 	const labels = useOnboardingLabels();
@@ -570,6 +625,54 @@ function ProjectExtensionsDemo({ on, className, style }) {
 		})
 	});
 }
+/** Secrets: the agent asks for a key in a password field, and the transcript says it was saved, never the value. */
+function SecretsDemo({ on, className, style }) {
+	const labels = useOnboardingLabels();
+	return /* @__PURE__ */ jsx(DemoStage, {
+		on,
+		className,
+		style,
+		children: /* @__PURE__ */ jsxs(MiniWindow, {
+			className: "w-full max-w-[280px]",
+			bodyClassName: "px-3 pt-1 pb-2.5 gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate text-zg-label",
+					children: labels.demoSecretPrompt
+				}),
+				/* @__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-demo-type-early truncate font-mono text-zg-badge text-[var(--zg-text)]",
+						children: labels.demoSecretDots
+					})]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2 pt-0.5 min-w-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: `${buttonClass({
+							variant: "solid",
+							size: "xs"
+						})} zg-loop zg-demo-press`,
+						children: labels.demoSecretSave
+					}), /* @__PURE__ */ jsx("span", {
+						className: "zg-loop zg-demo-after ml-auto min-w-0",
+						children: /* @__PURE__ */ jsxs(MetaChip, {
+							tone: "success",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "i-ph-shield-check"
+							}), labels.demoSecretSaved]
+						})
+					})]
+				})
+			]
+		})
+	});
+}
 const DEMOS = {
 	codemode: CodemodeDemo,
 	webSearch: WebSearchDemo,
@@ -580,10 +683,12 @@ const DEMOS = {
 	checkForUpdates: UpdatesDemo,
 	subscriptionUsage: UsageDemo,
 	useDaemon: DaemonDemo,
+	schedules: RemindersDemo,
 	browser: BrowserDemo,
 	terminal: TerminalDemo,
 	notifications: NotificationsDemo,
-	loadProjectExtensions: ProjectExtensionsDemo
+	loadProjectExtensions: ProjectExtensionsDemo,
+	secrets: SecretsDemo
 };
 /**
 * Whether a feature has a demo.
@@ -607,4 +712,4 @@ function FeatureDemo({ feature, on, className, style }) {
 	}) : null;
 }
 //#endregion
-export { AutoTitleDemo, AutocompleteDemo, BrowserDemo, CodemodeDemo, DaemonDemo, FeatureDemo, NotificationsDemo, ProjectExtensionsDemo, RunEstimatesDemo, SpacesDemo, TerminalDemo, UpdatesDemo, UsageDemo, WebSearchDemo, hasFeatureDemo };
+export { AutoTitleDemo, AutocompleteDemo, BrowserDemo, CodemodeDemo, DaemonDemo, FeatureDemo, NotificationsDemo, ProjectExtensionsDemo, RemindersDemo, RunEstimatesDemo, SecretsDemo, SpacesDemo, TerminalDemo, UpdatesDemo, UsageDemo, WebSearchDemo, hasFeatureDemo };

package/dist/onboarding/demos/how-it-works.d.ts

@@ -34,7 +34,11 @@ declare function AccountsScene({ step, className, style }: AccountsSceneProps):
 type HostsSceneProps = SceneProps;
 /** Hosts: zidane-server starts on a machine, prints a device token, then this app runs its sessions there. */
 declare function HostsScene({ step, className, style }: HostsSceneProps): import("react").JSX.Element;
+/** Props of {@link SecretsScene}. */
+type SecretsSceneProps = SceneProps;
+/** Secrets: a password field the agent asks with, the private file that keeps the key, then a command whose output hides it. */
+declare function SecretsScene({ step, className, style }: SecretsSceneProps): import("react").JSX.Element;
 /** The scene of each tutorial. */
 declare const TUTORIAL_SCENES: Readonly<Record<TutorialTopic, ComponentType<SceneProps>>>;
 //#endregion
-export { AccountsScene, AccountsSceneProps, ConnectorsScene, ConnectorsSceneProps, EnvironmentsScene, EnvironmentsSceneProps, ExtensionsScene, ExtensionsSceneProps, FilesScene, FilesSceneProps, HostsScene, HostsSceneProps, InstructionsScene, InstructionsSceneProps, SkillsScene, SkillsSceneProps, TUTORIAL_SCENES };
+export { AccountsScene, AccountsSceneProps, ConnectorsScene, ConnectorsSceneProps, EnvironmentsScene, EnvironmentsSceneProps, ExtensionsScene, ExtensionsSceneProps, FilesScene, FilesSceneProps, HostsScene, HostsSceneProps, InstructionsScene, InstructionsSceneProps, SecretsScene, SecretsSceneProps, SkillsScene, SkillsSceneProps, TUTORIAL_SCENES };

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/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,6 +1,6 @@
 import { OnboardingHostProvider, OnboardingProvider, useOnboarding, useOnboardingHost, useOnboardingLabels, useOnboardingStep } from "./OnboardingProvider.js";
-import { ExtensionMark, NATIVE_EXTENSION_ICONS, ProviderMark, extensionMarkOf } from "./marks.js";
 import { useSignIn } from "./useSignIn.js";
+import { ExtensionMark, NATIVE_EXTENSION_ICONS, ProviderMark, extensionMarkOf } from "./marks.js";
 import { DemoStage } from "./demos/parts.js";
 import { TUTORIAL_SCENES } from "./demos/how-it-works.js";
 import { Tutorial } from "./tutorials.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/ReadyStep.js

@@ -4,8 +4,8 @@ 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 { ExtensionMark as ExtensionMark$1, ProviderMark } from "../marks.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";

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/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 };