zidane-ui 9.1.4 → 9.1.6

package/dist/session/RemindersPanel.js

@@ -0,0 +1,526 @@
+import { IconButton } from "../components/IconButton.js";
+import { buttonClass } from "../components/button.js";
+import { Segmented } from "../components/Segmented.js";
+import { MetaChip } from "../components/Form.js";
+import { PanelEmpty, PanelLoading } from "../components/PanelEmpty.js";
+import { PANEL_ROW, PANEL_ROW_HOVER } from "../components/PanelRows.js";
+import { useMinuteTick } from "../hooks/useMinuteTick.js";
+import { constant, useReadable } from "../chat/headless/store.js";
+import { canKeepSchedule, isScheduleFinished, readReminderWhen, sortSchedules } from "./headless/schedules.js";
+import { useOptionalChatHost } from "../chat/ChatProvider.js";
+import { useAllSchedules, useSchedulesStatus, useSessionHost, useSessionSchedules } from "./SessionProvider.js";
+import { useSessionLabels } from "./useSessionLabels.js";
+import { OpenSessionContext } from "../chat/transcript/markdown-context.js";
+import { BTN_GHOST, BTN_PRIMARY, CardError, INPUT } from "../chat/interactions/card-ui.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useId, useMemo, useState } from "react";
+import { describeTime, describeTrigger, scheduleLabel, scheduleTargetSession } from "zidane/chat/pure";
+//#region src/session/RemindersPanel.tsx
+/**
+* The Reminders panel body (zidane's schedules): the prompts set to reach a
+* session at a set time, once or on a repeat. It lists this session's
+* reminders or all of them, each with when it fires, its next time, who set
+* it and why it is off; it pauses, resumes, runs now, deletes, keeps an
+* agent's repeat for good, and shows a reminder's history. The form reads
+* the time words (`in 20m`, `tomorrow 9:00`, `weekdays 9:00`) in this
+* client's time zone, shows what they mean as you type, and sends the exact
+* trigger.
+*
+* It reads `SessionHost.schedules` and hides itself without it; while the
+* Reminders setting is off it says so. The list follows the host's change
+* signal (`schedules:changed`).
+*/
+const errorText = (err) => err instanceof Error ? err.message : String(err);
+/** The time words follow the clock: the minute tick re-renders, and each render reads it. */
+const readClock = () => Date.now();
+/** A quick time pick under the When field. */
+const PICK = `${buttonClass({
+	variant: "secondary",
+	size: "xs"
+})} font-mono text-zg-meta`;
+const NO_SESSIONS = constant([]);
+/**
+* The title of the session a reminder goes to, from the chat host's list. `null` when the list does not hold it.
+*
+* @param sessionId - The session (`null`: none).
+*/
+function useTargetTitle(sessionId) {
+	const sessions = useReadable(useOptionalChatHost()?.sessions?.list ?? NO_SESSIONS);
+	if (sessionId === null) return null;
+	return sessions.find((s) => s.id === sessionId)?.title || null;
+}
+/** Seconds in every time the panel writes, so you know when a reminder goes out. */
+const TO_THE_SECOND = { seconds: true };
+/**
+* Re-renders once a second while `active` and the window shows, for countdowns; returns the time to read.
+*
+* @param active - Whether anything on screen counts down.
+*/
+function useSecondClock(active) {
+	const [, setTick] = useState(0);
+	useEffect(() => {
+		if (!active) return;
+		const timer = setInterval(() => {
+			if (document.visibilityState !== "hidden") setTick((n) => n + 1);
+		}, 1e3);
+		return () => clearInterval(timer);
+	}, [active]);
+	return readClock();
+}
+/**
+* Renders the reminders of a session, or all of them, with the create form.
+*
+* @param props - The `sessionId`, `initialScope`, `className` and `style`.
+*/
+function RemindersPanel({ sessionId, initialScope = "session", onOpenSession, className = "", style }) {
+	const labels = useSessionLabels();
+	const contextOpen = useContext(OpenSessionContext);
+	const openSession = onOpenSession ?? contextOpen ?? void 0;
+	const host = useSessionHost().schedules;
+	const status = useSchedulesStatus();
+	const [scope, setScope] = useState(initialScope);
+	const mine = useSessionSchedules(sessionId);
+	const all = useAllSchedules();
+	const [error, setError] = useState(null);
+	useMinuteTick();
+	const list = scope === "session" ? mine : all;
+	const sorted = useMemo(() => list ? sortSchedules(list) : null, [list]);
+	const live = sorted?.filter((s) => !isScheduleFinished(s)) ?? [];
+	const finished = sorted?.filter(isScheduleFinished) ?? [];
+	const now = useSecondClock(live.some((s) => s.enabled && s.nextFireAt !== null));
+	if (!host) return null;
+	const root = `flex-1 min-h-0 flex flex-col ${className}`;
+	if (status === null) return /* @__PURE__ */ jsx("div", {
+		className: root,
+		style,
+		"aria-label": labels.remindersLabel,
+		children: /* @__PURE__ */ jsx(PanelLoading, {})
+	});
+	if (!status.enabled) return /* @__PURE__ */ jsx("div", {
+		className: root,
+		style,
+		"aria-label": labels.remindersLabel,
+		children: /* @__PURE__ */ jsx(PanelEmpty, {
+			icon: "i-ph-alarm",
+			title: labels.remindersOff,
+			hint: status.supported ? labels.remindersOffHint : labels.remindersUnsupported
+		})
+	});
+	const act = (run) => {
+		setError(null);
+		run().catch((err) => setError(errorText(err)));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: root,
+		style,
+		"aria-label": labels.remindersLabel,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "shrink-0 flex items-center gap-2 px-3 pt-3",
+				children: [/* @__PURE__ */ jsx(Segmented, {
+					size: "sm",
+					ariaLabel: labels.remindersScopeLabel,
+					value: scope,
+					onChange: setScope,
+					options: [{
+						value: "session",
+						label: labels.remindersScopeSession
+					}, {
+						value: "all",
+						label: labels.remindersScopeAll
+					}]
+				}), sorted && sorted.length > 0 && /* @__PURE__ */ jsx("span", {
+					className: "zg-meta",
+					children: labels.remindersCount(sorted.length)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-h-0 flex flex-col overflow-y-auto px-3 pt-2 pb-3",
+				children: [error && /* @__PURE__ */ jsx("div", {
+					className: "text-xs text-[var(--zg-warn)] mb-2",
+					role: "alert",
+					children: error
+				}), sorted === null ? /* @__PURE__ */ jsx(PanelLoading, {}) : sorted.length === 0 ? /* @__PURE__ */ jsx(PanelEmpty, {
+					icon: "i-ph-alarm",
+					title: scope === "session" ? labels.remindersEmpty : labels.remindersEmptyAll,
+					...host.create ? { hint: labels.remindersEmptyHint } : {}
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3",
+					children: [live.length > 0 && /* @__PURE__ */ jsx("ul", {
+						className: "m-0 p-0 list-none flex flex-col gap-0.5",
+						"aria-label": labels.remindersListLabel,
+						children: live.map((schedule) => /* @__PURE__ */ jsx(ReminderRow, {
+							schedule,
+							sessionId,
+							now,
+							act,
+							openSession
+						}, schedule.id))
+					}), finished.length > 0 && /* @__PURE__ */ jsxs("section", {
+						className: "flex flex-col gap-1",
+						"aria-label": labels.remindersFinished,
+						children: [live.length > 0 && /* @__PURE__ */ jsx("h3", {
+							className: "zg-section-label m-0 px-0.5",
+							children: labels.remindersFinished
+						}), /* @__PURE__ */ jsx("ul", {
+							className: "m-0 p-0 list-none flex flex-col gap-0.5",
+							children: finished.map((schedule) => /* @__PURE__ */ jsx(ReminderRow, {
+								schedule,
+								sessionId,
+								now,
+								act,
+								openSession
+							}, schedule.id))
+						})]
+					})]
+				})]
+			}),
+			host.create && /* @__PURE__ */ jsx(ReminderForm, { sessionId })
+		]
+	});
+}
+/** One fact of a reminder's meta line: a small glyph, then the words. */
+function Fact({ icon, className = "", children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: `inline-flex items-center gap-1 min-w-0 ${className}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: `${icon} shrink-0 opacity-70`
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		})]
+	});
+}
+const CREATOR_ICON = {
+	user: "i-ph-user",
+	agent: "i-ph-robot",
+	extension: "i-ph-puzzle-piece"
+};
+/** The chip at the end of a reminder's meta line: the countdown, Off or Done. */
+function ReminderStatus({ schedule, now }) {
+	const labels = useSessionLabels();
+	if (!schedule.enabled) return /* @__PURE__ */ jsxs(MetaChip, {
+		tone: "warn",
+		title: schedule.disabledReason,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "i-ph-pause"
+		}), labels.reminderOff]
+	});
+	if (schedule.nextFireAt === null) return /* @__PURE__ */ jsxs(MetaChip, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "i-ph-check"
+	}), labels.reminderDone] });
+	return /* @__PURE__ */ jsx(MetaChip, {
+		tone: "accent",
+		className: "tabular-nums",
+		children: labels.reminderCountdown(schedule.nextFireAt - now)
+	});
+}
+function ReminderRow({ schedule, sessionId, now, act, openSession }) {
+	const labels = useSessionLabels();
+	const host = useSessionHost().schedules;
+	const [open, setOpen] = useState(false);
+	const historyId = useId();
+	const label = scheduleLabel(schedule);
+	const target = scheduleTargetSession(schedule.action);
+	const other = target !== void 0 && target !== sessionId ? target : null;
+	const otherTitle = useTargetTitle(other);
+	const where = schedule.action.kind === "extension" ? labels.reminderTargetExtension(schedule.action.extensionId) : "newSession" in schedule.action ? labels.reminderTargetNew(schedule.action.newSession.cwd) : null;
+	const { update, runNow, remove, fires } = host;
+	const once = schedule.trigger.kind === "at";
+	const finished = isScheduleFinished(schedule);
+	const sentAt = schedule.lastFire?.firedAt;
+	const time = schedule.nextFireAt !== null ? labels.reminderNext(describeTime(schedule.nextFireAt, now, TO_THE_SECOND)) : sentAt !== void 0 ? labels.reminderLastSent(describeTime(sentAt, now, TO_THE_SECOND)) : null;
+	const live = schedule.enabled && !finished;
+	return /* @__PURE__ */ jsxs("li", {
+		className: `${PANEL_ROW} ${PANEL_ROW_HOVER} group flex-col !items-stretch !gap-1 !py-2`,
+		"data-schedule-id": schedule.id,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-2.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: `zg-track-chip !rounded-zg-md shrink-0 size-7 flex items-center justify-center ${live ? "text-[var(--zg-accent)]" : "text-[var(--zg-text-muted)]"}`,
+				children: /* @__PURE__ */ jsx("span", { className: once ? "i-ph-alarm" : "i-ph-repeat" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-w-0 flex flex-col gap-0.5",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 min-h-6",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: `flex-1 min-w-0 truncate text-zg-ui ${live ? "text-[var(--zg-text)]" : "text-[var(--zg-text-muted)]"}`,
+							title: label,
+							children: label
+						}), /* @__PURE__ */ jsxs("div", {
+							className: `shrink-0 flex items-center transition-opacity ${open ? "" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"}`,
+							children: [
+								update && canKeepSchedule(schedule) && /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									icon: "i-ph-push-pin",
+									label: labels.reminderKeep(label),
+									onClick: () => act(() => update(schedule.id, { expiresAt: null }))
+								}),
+								update && !finished && /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									icon: schedule.enabled ? "i-ph-pause" : "i-ph-play",
+									label: schedule.enabled ? labels.reminderPause(label) : labels.reminderResume(label),
+									onClick: () => act(() => update(schedule.id, { enabled: !schedule.enabled }))
+								}),
+								runNow && /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									icon: "i-ph-paper-plane-tilt",
+									label: labels.reminderRunNow(label),
+									onClick: () => act(() => runNow(schedule.id))
+								}),
+								fires && /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									icon: "i-ph-clock-counter-clockwise",
+									label: open ? labels.reminderHistoryHide(label) : labels.reminderHistoryShow(label),
+									active: open,
+									"aria-expanded": open,
+									"aria-controls": historyId,
+									onClick: () => setOpen((v) => !v)
+								}),
+								remove && /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									icon: "i-ph-trash",
+									label: labels.reminderDelete(label),
+									onClick: () => act(() => remove(schedule.id))
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 min-w-0",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "flex-1 min-w-0 flex flex-wrap items-center gap-x-3 gap-y-0.5 zg-meta",
+							children: [
+								time && /* @__PURE__ */ jsx(Fact, {
+									icon: "i-ph-clock",
+									children: time
+								}),
+								!once && /* @__PURE__ */ jsx(Fact, {
+									icon: "i-ph-calendar-blank",
+									children: describeTrigger(schedule.trigger, now)
+								}),
+								/* @__PURE__ */ jsx(Fact, {
+									icon: CREATOR_ICON[schedule.createdBy.kind],
+									children: labels.reminderCreator(schedule.createdBy)
+								}),
+								where && /* @__PURE__ */ jsx(Fact, {
+									icon: "i-ph-arrow-bend-up-right",
+									children: where
+								}),
+								other !== null && /* @__PURE__ */ jsx(Fact, {
+									icon: "i-ph-arrow-bend-up-right",
+									className: "max-w-full",
+									children: openSession ? /* @__PURE__ */ jsx("button", {
+										type: "button",
+										onClick: () => openSession(other),
+										title: labels.reminderTargetOpen(otherTitle ?? labels.reminderTargetUntitled),
+										className: "max-w-full truncate bg-transparent border-0 p-0 m-0 [font:inherit] text-inherit text-left cursor-pointer rounded-sm hover:text-[var(--zg-text)] hover:underline underline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--zg-ring)]",
+										children: otherTitle ?? labels.reminderTargetUntitled
+									}) : otherTitle ?? labels.reminderTargetOther
+								})
+							]
+						}), /* @__PURE__ */ jsx(ReminderStatus, {
+							schedule,
+							now
+						})]
+					}),
+					!schedule.enabled && schedule.disabledReason && /* @__PURE__ */ jsx("span", {
+						className: "zg-meta !text-zg-warn",
+						children: labels.reminderOffReason(schedule.disabledReason)
+					}),
+					schedule.expiresAt !== void 0 && schedule.enabled && /* @__PURE__ */ jsx("span", {
+						className: "zg-meta",
+						children: labels.reminderExpires(describeTime(schedule.expiresAt, now, TO_THE_SECOND))
+					})
+				]
+			})]
+		}), fires && open && /* @__PURE__ */ jsx(FireHistory, {
+			id: historyId,
+			scheduleId: schedule.id,
+			label,
+			version: schedule.lastFire?.id ?? "",
+			load: fires
+		})]
+	});
+}
+function FireHistory({ id, scheduleId, label, version, load }) {
+	const labels = useSessionLabels();
+	const [fires, setFires] = useState(null);
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		let live = true;
+		load(scheduleId, 20).then((list) => live && setFires(list), (err) => live && setError(errorText(err)));
+		return () => {
+			live = false;
+		};
+	}, [
+		load,
+		scheduleId,
+		version
+	]);
+	const now = readClock();
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: "ml-[38px] mt-1 pl-3 border-l border-[var(--zg-hairline)]",
+		children: error ? /* @__PURE__ */ jsx(CardError, { error }) : fires === null ? null : fires.length === 0 ? /* @__PURE__ */ jsx("span", {
+			className: "zg-meta",
+			children: labels.reminderNoFires
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "m-0 p-0 list-none flex flex-col gap-0.5",
+			"aria-label": labels.reminderHistoryLabel(label),
+			children: fires.map((fire) => /* @__PURE__ */ jsxs("li", {
+				className: "flex flex-wrap gap-x-2 zg-meta",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "tabular-nums",
+						children: describeTime(fire.firedAt, now, TO_THE_SECOND)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: fire.outcome === "failed" ? "text-[var(--zg-danger)]" : void 0,
+						children: labels.reminderFireOutcome(fire.outcome)
+					}),
+					fire.late && /* @__PURE__ */ jsx("span", { children: labels.reminderFireLate }),
+					fire.error && /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: fire.error
+					})
+				]
+			}, fire.id))
+		})
+	});
+}
+function ReminderForm({ sessionId }) {
+	const labels = useSessionLabels();
+	const create = useSessionHost().schedules?.create;
+	const id = useId();
+	const [when, setWhen] = useState("");
+	const [text, setText] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(null);
+	useMinuteTick();
+	const now = useSecondClock(readReminderWhen(when, readClock()).ok);
+	const parsed = readReminderWhen(when, now);
+	const ready = parsed.ok && text.trim() !== "";
+	const submit = async (event) => {
+		event.preventDefault();
+		if (!create || busy || !ready) return;
+		const fresh = readReminderWhen(when, readClock());
+		if (!fresh.ok) return;
+		setBusy(true);
+		setError(null);
+		try {
+			await create({
+				trigger: fresh.trigger,
+				action: {
+					kind: "prompt",
+					sessionId,
+					text: text.trim()
+				}
+			});
+			setWhen("");
+			setText("");
+		} catch (err) {
+			setError(errorText(err));
+		} finally {
+			setBusy(false);
+		}
+	};
+	const invalid = when.trim() !== "" && !parsed.ok;
+	const preview = parsed.ok ? labels.reminderPreview(describeTrigger(parsed.trigger, now, TO_THE_SECOND)) : null;
+	return /* @__PURE__ */ jsxs("form", {
+		className: "zg-raised border shrink-0 mx-3 mb-3 flex flex-col gap-2 rounded-zg-lg p-2.5",
+		"aria-label": labels.reminderNew,
+		onSubmit: (e) => void submit(e),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: `${id}-text`,
+				className: "sr-only",
+				children: labels.reminderPromptLabel
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				id: `${id}-text`,
+				value: text,
+				onChange: (e) => setText(e.target.value),
+				placeholder: labels.reminderPromptPlaceholder,
+				rows: 2,
+				className: `${INPUT} py-2 resize-none`
+			}),
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: `${id}-when`,
+				className: "sr-only",
+				children: labels.reminderWhenLabel
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: `i-ph-alarm absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none ${invalid ? "text-zg-danger" : "text-[var(--zg-text-subtle)]"}`
+				}), /* @__PURE__ */ jsx("input", {
+					id: `${id}-when`,
+					value: when,
+					onChange: (e) => setWhen(e.target.value),
+					placeholder: labels.reminderWhenPlaceholder,
+					autoComplete: "off",
+					spellCheck: false,
+					"aria-invalid": invalid ? true : void 0,
+					title: invalid && !parsed.ok ? labels.reminderWhenError(parsed.reason) : void 0,
+					"aria-describedby": `${id}-when-hint`,
+					className: `${INPUT} h-8 !pl-8`
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-center gap-1",
+				children: labels.reminderWhenPicks.map((words) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": labels.reminderWhenPick(words),
+					"aria-pressed": when.trim() === words,
+					onClick: () => setWhen(words),
+					className: `${PICK} ${when.trim() === words ? "!text-[var(--zg-accent)]" : ""}`,
+					children: words
+				}, words))
+			}),
+			/* @__PURE__ */ jsx(CardError, { error }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						id: `${id}-when-hint`,
+						"aria-live": "polite",
+						className: "flex-1 min-w-0 flex items-center gap-1 zg-meta tabular-nums",
+						children: [preview !== null && /* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "i-ph-clock shrink-0"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: preview
+						})]
+					}),
+					(when !== "" || text !== "") && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: BTN_GHOST,
+						disabled: busy,
+						onClick: () => {
+							setWhen("");
+							setText("");
+							setError(null);
+						},
+						children: labels.reminderCancel
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: BTN_PRIMARY,
+						disabled: busy || !ready,
+						children: labels.reminderCreate
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { RemindersPanel };

package/dist/session/SecretsPanel.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from "react";
+//#region src/session/SecretsPanel.d.ts
+/** Props for {@link SecretsPanel}. */
+interface SecretsPanelProps {
+  /** The session whose project's secrets to list. */
+  sessionId: string;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Renders a session project's saved secrets, with revoke, replace and add.
+ *
+ * @param props - The `sessionId`, `className` and `style`.
+ */
+declare function SecretsPanel({ sessionId, className, style }: SecretsPanelProps): import("react").JSX.Element;
+//#endregion
+export { SecretsPanel, SecretsPanelProps };