zidane-ui 9.0.4 → 9.1.3

package/dist/session/SideChat.js

@@ -2,8 +2,8 @@ import { PanelEmpty } from "../components/PanelEmpty.js";
 import { constant, useReadable } from "../chat/headless/store.js";
 import { useChatHost } from "../chat/ChatProvider.js";
 import { useSessionHost } from "./SessionProvider.js";
-import { Composer } from "../chat/composer/Composer.js";
 import { useSessionLabels } from "./useSessionLabels.js";
+import { Composer } from "../chat/composer/Composer.js";
 import { useStickToBottom } from "../chat/transcript/useStickToBottom.js";
 import { pinSession } from "../chat/headless/sidebar/pinned-sessions.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -224,7 +224,7 @@ function SideChat({ parentId, cwd, renderTranscript, renderPickers, requests, cl
 			className: "relative flex-1 min-h-0",
 			children: /* @__PURE__ */ jsx("div", {
 				ref: scrollRef,
-				className: "zg-side-transcript absolute inset-0 overflow-y-auto",
+				className: "zg-side-transcript absolute inset-0 overflow-y-auto p-4",
 				"data-scrolled": !pinned,
 				children: /* @__PURE__ */ jsx("div", {
 					className: sideId ? void 0 : "h-full flex flex-col",

package/dist/session/TodosPanel.js

@@ -208,7 +208,10 @@ function TodosPanel({ sessionId, className, style }) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between gap-3 min-h-6",
-					children: [snap && /* @__PURE__ */ jsx(TodoTally, { tally: snap.tally }), !editable ? null : confirmClear ? /* @__PURE__ */ jsxs("span", {
+					children: [snap && /* @__PURE__ */ jsx(TodoTally, {
+						tally: snap.tally,
+						className: "ml-2"
+					}), !editable ? null : confirmClear ? /* @__PURE__ */ jsxs("span", {
 						className: "flex items-center gap-1.5 text-zg-meta",
 						children: [
 							/* @__PURE__ */ jsx("span", {

package/dist/session/UsagePanel.js

@@ -1,11 +1,21 @@
-import { BTN_LG_SECONDARY } from "../components/button.js";
+import { BTN_LG_SECONDARY, BTN_SECONDARY } from "../components/button.js";
 import { MetaChip } from "../components/Form.js";
 import { useSessionLabels } from "./useSessionLabels.js";
+import { useOptionalConfirm } from "../app/useConfirm.js";
 import { useProviderUsage } from "./ProviderUsageProvider.js";
 import { ShellFrame } from "./SessionShell.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { formatBalance, formatUsagePercent, resetLabel, showsAccount, updatedLabel, usageTone } from "zidane/chat/pure";
 //#region src/session/UsagePanel.tsx
+/**
+* The usage panel: per-provider rate-limit windows and credits, then
+* GitHub's API limits. Every number comes through `zidane/chat/pure`'s
+* helpers (`formatUsagePercent`, `resetLabel`, `formatBalance`, `usageTone`),
+* so it reports the same facts as the TUI's panel about the same window.
+* Reads `useProviderUsage`: put a `ProviderUsageProvider` above it for
+* background probes.
+*/
 const TONE_CLS = {
 	ok: "text-[var(--zg-text)]",
 	warn: "text-zg-warn",
@@ -23,7 +33,7 @@ const BAR_CLS = {
 */
 function UsagePanel({ activeProviderKey = null, autoLoad = true, onClose, renderShell, className, style }) {
 	const labels = useSessionLabels();
-	const { snapshots, github, loading, loaded, refresh } = useProviderUsage();
+	const { snapshots, github, loading, loaded, refresh, redeemReset } = useProviderUsage();
 	const empty = snapshots.length === 0 && github.length === 0;
 	const updated = updatedLabel([...snapshots, ...github]);
 	return /* @__PURE__ */ jsx(ShellFrame, {
@@ -53,7 +63,8 @@ function UsagePanel({ activeProviderKey = null, autoLoad = true, onClose, render
 				children: snapshots.map((snapshot) => /* @__PURE__ */ jsx(ProviderRow, {
 					snapshot,
 					account: showsAccount(snapshot, snapshots) ? snapshot.account : null,
-					active: snapshot.providerKey === activeProviderKey && snapshot.activeCredential
+					active: snapshot.providerKey === activeProviderKey && snapshot.activeCredential,
+					onRedeemReset: redeemReset
 				}, snapshot.credentialKey))
 			}), github.length > 0 && /* @__PURE__ */ jsx(UsageGroup, {
 				label: labels.usageGithub,
@@ -79,7 +90,7 @@ function UsageGroup({ label, children }) {
 		})]
 	});
 }
-function ProviderRow({ snapshot, account, active }) {
+function ProviderRow({ snapshot, account, active, onRedeemReset = null }) {
 	const labels = useSessionLabels();
 	const looseCredits = snapshot.windows.some((win) => win.id === "credits") ? null : snapshot.credits;
 	return /* @__PURE__ */ jsxs("li", {
@@ -101,19 +112,28 @@ function ProviderRow({ snapshot, account, active }) {
 					})
 				]
 			}),
-			snapshot.status === "ok" ? /* @__PURE__ */ jsxs(Fragment, { children: [snapshot.windows.map((win) => /* @__PURE__ */ jsx(WindowRow, {
-				win,
-				trailing: win.id === "credits" && snapshot.credits ? formatBalance(snapshot.credits) : resetLabel(win.resetsAt)
-			}, win.id)), looseCredits && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-3 text-zg-label",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "w-16 shrink-0 text-[var(--zg-text-muted)]",
-					children: labels.usageCredits
-				}), /* @__PURE__ */ jsx("span", {
-					className: "tabular-nums text-[var(--zg-text)]",
-					children: formatBalance(looseCredits)
-				})]
-			})] }) : /* @__PURE__ */ jsxs("div", {
+			snapshot.status === "ok" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				snapshot.windows.map((win) => /* @__PURE__ */ jsx(WindowRow, {
+					win,
+					trailing: win.id === "credits" && snapshot.credits ? formatBalance(snapshot.credits) : resetLabel(win.resetsAt)
+				}, win.id)),
+				looseCredits && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-3 text-zg-label",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "w-16 shrink-0 text-[var(--zg-text-muted)]",
+						children: labels.usageCredits
+					}), /* @__PURE__ */ jsx("span", {
+						className: "tabular-nums text-[var(--zg-text)]",
+						children: formatBalance(looseCredits)
+					})]
+				}),
+				snapshot.resets && /* @__PURE__ */ jsx(ResetsRow, {
+					snapshot,
+					resets: snapshot.resets,
+					account: account ?? null,
+					onRedeem: onRedeemReset
+				})
+			] }) : /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1.5 text-zg-label text-[var(--zg-text-muted)] min-w-0",
 				children: [/* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
@@ -130,6 +150,108 @@ function ProviderRow({ snapshot, account, active }) {
 		]
 	});
 }
+/** Days before expiry when a reset's dates turn to the warning tone. */
+const EXPIRES_SOON_MS = 2592e5;
+/**
+* The account's banked resets: one line per reset (its name, when it was
+* granted and when it expires) with its own button. Spending one
+* asks first (a reset is scarce). Without the list (it failed to load) one
+* button by the count lets the provider pick. Hidden with none left, unless it has an
+* outcome to report.
+*/
+function ResetsRow({ snapshot, resets, account, onRedeem }) {
+	const labels = useSessionLabels();
+	const confirm = useOptionalConfirm();
+	/** The reset being spent: its id, `''` for the provider's pick, `null` when idle. */
+	const [busy, setBusy] = useState(null);
+	const [outcome, setOutcome] = useState(null);
+	const { available, credits } = resets;
+	if (available <= 0 && !outcome) return null;
+	const canRedeem = onRedeem !== null && confirm !== null;
+	const listed = credits !== void 0 && credits.length > 0;
+	const redeem = async (credit) => {
+		if (!onRedeem || !confirm) return;
+		if (!await confirm({
+			title: labels.usageResetConfirmTitle(account ? `${snapshot.label} (${account})` : snapshot.label),
+			message: labels.usageResetConfirmMessage(available, credit ? credit.title ?? labels.usageResetUntitled : null),
+			confirmLabel: labels.usageResetConfirm
+		})) return;
+		setBusy(credit?.id ?? "");
+		setOutcome(null);
+		try {
+			setOutcome(await onRedeem({
+				providerKey: snapshot.providerKey,
+				credentialKey: snapshot.credentialKey,
+				...credit ? { creditId: credit.id } : {}
+			}));
+		} finally {
+			setBusy(null);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		available > 0 && !listed && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 text-zg-label",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "w-16 shrink-0 text-[var(--zg-text-muted)]",
+					children: labels.usageResets
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "tabular-nums text-[var(--zg-text)]",
+					children: labels.usageResetsLeft(available)
+				}),
+				canRedeem && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: `${BTN_SECONDARY} ml-auto`,
+					disabled: busy !== null,
+					onClick: () => void redeem(null),
+					children: busy === "" ? labels.usageResetUsing : labels.usageResetUse
+				})
+			]
+		}),
+		listed && /* @__PURE__ */ jsx("ul", {
+			className: "m-0 p-0 list-none flex flex-col gap-2",
+			"aria-label": labels.usageResets,
+			children: credits.map((credit, i) => {
+				const title = credit.title ?? labels.usageResetUntitled;
+				const soon = credit.expiresAt !== null && credit.expiresAt - snapshot.fetchedAt < EXPIRES_SOON_MS;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-3",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "w-16 shrink-0 self-start text-zg-label text-[var(--zg-text-muted)]",
+							children: i === 0 ? labels.usageResets : null
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-zg-label text-[var(--zg-text)] truncate",
+								children: title
+							}), /* @__PURE__ */ jsx("span", {
+								className: `zg-meta truncate ${soon ? "text-zg-warn" : ""}`,
+								children: labels.usageResetDates(credit.grantedAt, credit.expiresAt)
+							})]
+						}),
+						canRedeem && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: `${BTN_SECONDARY} shrink-0`,
+							disabled: busy !== null,
+							"aria-label": labels.usageResetUseOne(title),
+							onClick: () => void redeem(credit),
+							children: busy === credit.id ? labels.usageResetUsing : labels.usageResetUseShort
+						})
+					]
+				}, credit.id);
+			})
+		}),
+		outcome && /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: `text-zg-label ${outcome.code === "failed" ? "text-zg-warn" : "text-[var(--zg-text-muted)]"}`,
+			children: labels.usageResetOutcome(outcome.code, outcome.error)
+		})
+	] });
+}
 /** One window: its name, the bar, then how much is used and when it resets. */
 function WindowRow({ win, trailing }) {
 	const labels = useSessionLabels();

package/dist/session/WelcomeScreen.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 //#region src/session/WelcomeScreen.d.ts
 /** Props for {@link WelcomeScreen}. */
 interface WelcomeScreenProps {
-  /** A model id's display name. Default: the id. */
+  /** A model id's display name. Default: the id made readable. */
   modelName?: (modelId: string) => string;
   /** The moment the screen describes (greeting, date, heatmap end). Default: when it mounts. */
   now?: Date;