zidane-ui 9.1.6 → 9.1.9

package/dist/settings/sections/providers/ServerProvidersSection.js

@@ -1,10 +1,10 @@
 import { BTN_DANGER, BTN_PRIMARY, BTN_SECONDARY } from "../../../components/button.js";
 import { ErrorNote, FormCard, FormSection, MetaChip, OpLine, RowText } from "../../../components/Form.js";
-import { constant, useReadable } from "../../../chat/headless/store.js";
 import { toSettingsError } from "../../headless/host.js";
 import { useSettingsHost } from "../../SettingsProvider.js";
 import { SettingsPanel, SettingsPanelBody } from "../../section.js";
 import { hasCredentialChoice } from "../../headless/providers.js";
+import { SettingsRestricted } from "../../SettingsRestricted.js";
 import { useSettingsResource } from "../shared/catalog.js";
 import { CredentialSources } from "./CredentialSources.js";
 import { useAccountsSectionLabels } from "./ProvidersSection.js";
@@ -21,19 +21,16 @@ import { useMemo, useState } from "react";
 * is left alone. With more than one stored, they are its credential sources
 * (`CredentialSources`: the one in use picked, an OAuth account renamed).
 */
-const ALWAYS = constant(true);
 const YES = async () => true;
 /**
 * Renders the providers of the nearest `SettingsProvider`'s host (`providers`) as a server's cards: Set API
 * key needs `setApiKey`, Sign in `signIn`, Remove `remove`; a connection that may not write (`writable`)
-* shows none of them.
+* sees the cards restricted ("Admin only").
 *
 * @param props - The `hostName`, an `intro`, `className` and `style`.
 */
 function ServerProvidersSection({ hostName, intro, className, style }) {
-	const host = useSettingsHost();
-	const providers = host.providers;
-	const writable = useReadable(host.writable ?? ALWAYS);
+	const providers = useSettingsHost().providers;
 	const l = useAccountsSectionLabels();
 	const resource = useMemo(() => providers?.list("") ?? null, [providers]);
 	const load = useSettingsResource(resource);
@@ -49,21 +46,20 @@ function ServerProvidersSection({ hostName, intro, className, style }) {
 					kind: "busy",
 					children: l.accountsServerReading(hostName)
 				}),
-				list && providers && /* @__PURE__ */ jsx(FormSection, {
+				list && providers && /* @__PURE__ */ jsx(SettingsRestricted, { children: /* @__PURE__ */ jsx(FormSection, {
 					layout: "cards",
 					children: list.map((provider) => /* @__PURE__ */ jsx(ProviderCard, {
 						host: providers,
 						hostName,
 						provider,
-						writable,
 						labels: l
 					}, provider.key))
-				})
+				}) })
 			]
 		})] })
 	});
 }
-function ProviderCard({ host, hostName, provider, writable, labels: l }) {
+function ProviderCard({ host, hostName, provider, labels: l }) {
 	const [editing, setEditing] = useState(false);
 	const [signingIn, setSigningIn] = useState(false);
 	const [key, setKey] = useState("");
@@ -107,13 +103,13 @@ function ProviderCard({ host, hostName, provider, writable, labels: l }) {
 							children: provider.methods.map((method) => /* @__PURE__ */ jsx(MetaChip, { children: method.detail }, `${method.source}:${method.key ?? method.detail}`))
 						}) : void 0
 					}),
-					writable && signIn && provider.oauth && !signingIn && /* @__PURE__ */ jsx("button", {
+					signIn && provider.oauth && !signingIn && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: BTN_SECONDARY,
 						onClick: () => setSigningIn(true),
 						children: l.accountsSignIn
 					}),
-					writable && setApiKey && !editing && /* @__PURE__ */ jsx("button", {
+					setApiKey && !editing && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: BTN_SECONDARY,
 						onClick: () => setEditing(true),
@@ -162,7 +158,7 @@ function ProviderCard({ host, hostName, provider, writable, labels: l }) {
 				children: /* @__PURE__ */ jsx(CredentialSources, {
 					provider,
 					cwd: "",
-					host: writable ? host : { list: host.list },
+					host,
 					labels: l,
 					confirm: YES,
 					onError: setError
@@ -185,7 +181,7 @@ function ProviderCard({ host, hostName, provider, writable, labels: l }) {
 							}),
 							/* @__PURE__ */ jsx(MetaChip, { children: method.detail })
 						]
-					}), writable && remove && /* @__PURE__ */ jsx("button", {
+					}), remove && /* @__PURE__ */ jsx("button", {
 						type: "button",
 						className: BTN_DANGER,
 						disabled: busy,

package/dist/settings/sections/shared/catalog.js

@@ -5,6 +5,7 @@ import { Checkbox } from "../../../components/Form.js";
 import { toSettingsError } from "../../headless/host.js";
 import { useSettingsDocument, useSettingsHost, useSettingsWritable } from "../../SettingsProvider.js";
 import { useSectionLabels } from "../use-section-labels.js";
+import { SettingsRestricted } from "../../SettingsRestricted.js";
 import { enabledNames, toggleEnabled } from "../../headless/enabled.js";
 import { DEFAULT_CATALOG_SHARED_LABELS } from "./labels.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -130,7 +131,7 @@ function EnabledList({ catalog, keyOf, labelOf, detailOf, leadOf, badgeOf, statu
 	return /* @__PURE__ */ jsxs("div", {
 		className,
 		style,
-		children: [preamble, catalog.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage }) : /* @__PURE__ */ jsx("ul", {
+		children: [preamble, catalog.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage }) : /* @__PURE__ */ jsx(SettingsRestricted, { children: /* @__PURE__ */ jsx("ul", {
 			className: "zg-tray rounded-zg-lg flex flex-col list-none m-0 p-1",
 			children: catalog.map((entry) => {
 				const key = keyOf(entry);
@@ -177,7 +178,7 @@ function EnabledList({ catalog, keyOf, labelOf, detailOf, leadOf, badgeOf, statu
 					}) : null]
 				}, key);
 			})
-		})]
+		}) })]
 	});
 }
 //#endregion

package/dist/settings/sections/skills/SkillList.js

@@ -6,6 +6,7 @@ import { Checkbox, MetaChip } from "../../../components/Form.js";
 import { LoadError } from "../../../components/LoadError.js";
 import { useSettingsHost } from "../../SettingsProvider.js";
 import { useSectionLabels } from "../use-section-labels.js";
+import { SettingsRestricted } from "../../SettingsRestricted.js";
 import { OpenFileButton, RevealPathButton, useCatalogSharedLabels, useEnabledList, useSettingsResource } from "../shared/catalog.js";
 import { useCodeDocument } from "../../../code/editor/useCodeDocument.js";
 import { formatTokens } from "../../../session/headless/usage-format.js";
@@ -121,7 +122,7 @@ function SkillList({ cwd, catalog, actionOf, onSaved, emptyMessage }) {
 				weights
 			}),
 			shown.length === 0 && /* @__PURE__ */ jsx(EmptyState, { title: inScope.length === 0 ? l.skillsSectionNoneInScope(filter) : l.skillsSectionNoMatch(query.trim()) }),
-			/* @__PURE__ */ jsx("ul", {
+			/* @__PURE__ */ jsx(SettingsRestricted, { children: /* @__PURE__ */ jsx("ul", {
 				className: "flex flex-col gap-2 list-none m-0 p-0",
 				children: shown.map((entry) => /* @__PURE__ */ jsx(SkillCard, {
 					cwd,
@@ -139,7 +140,7 @@ function SkillList({ cwd, catalog, actionOf, onSaved, emptyMessage }) {
 					action: actionOf?.(entry),
 					onSaved
 				}, entry.name))
-			})
+			}) })
 		]
 	});
 }

package/dist/settings/testing/accounts-demo.js

@@ -16,6 +16,7 @@ const DEMO_PROVIDERS = [
 			source: "oauth",
 			key: "anthropic:oauth:work",
 			label: "work",
+			email: "ada@example.com",
 			detail: "in 12 days",
 			active: true
 		}, {

package/dist/settings/testing/accounts.contract.js

@@ -46,6 +46,7 @@ const PROVIDERS = [{
 		source: "oauth",
 		key: "anthropic:oauth:work",
 		label: "work",
+		email: "work@example.com",
 		detail: "expires in 12 days",
 		active: true
 	}, {
@@ -143,6 +144,7 @@ function describeSettingsAccountsContract(name, makeHarness, capabilities) {
 			const anthropic = list.find((p) => p.key === "anthropic");
 			expect(anthropic.available).toBe(true);
 			expect(anthropic.methods.find((m) => m.active)?.key).toBe("anthropic:oauth:work");
+			expect(anthropic.methods.find((m) => m.active)?.email).toBe("work@example.com");
 			expect(list.find((p) => p.key === "openai").available).toBe(false);
 		});
 		it.skipIf(!has("providers.setApiKey"))("setApiKey stores the key and the list shows it", async () => {

package/dist/styles.css

@@ -303,7 +303,6 @@
 .sticky{position:sticky;}
 .static{position:static;}
 .-inset-\[2px\]{inset:-2px;}
-.-inset-\[3px\]{inset:-3px;}
 .-inset-px{inset:-1px;}
 .inset-0{inset:0;}
 .-inset-x-1{left:-0.25rem;right:-0.25rem;}
@@ -401,6 +400,11 @@
 .m\[2\]{margin:2;}
 .m\[2\]\!{margin:2 !important;}
 .m\[3\]{margin:3;}
+.m\[4\]{margin:4;}
+.m\[5\]{margin:5;}
+.m\[6\]{margin:6;}
+.m\[8\]{margin:8;}
+.m\[9\]{margin:9;}
 .m23\.6{margin:5.9rem;}
 .m4\.7144{margin:1.1786rem;}
 .ma{margin:auto;}
@@ -412,6 +416,7 @@
 .-my-1{margin-top:-0.25rem;margin-bottom:-0.25rem;}
 .-my-px{margin-top:-1px;margin-bottom:-1px;}
 .mx{margin-left:1rem;margin-right:1rem;}
+.mx-0\.5{margin-left:0.125rem;margin-right:0.125rem;}
 .mx-1{margin-left:0.25rem;margin-right:0.25rem;}
 .mx-1\.5{margin-left:0.375rem;margin-right:0.375rem;}
 .mx-2{margin-left:0.5rem;margin-right:0.5rem;}
@@ -474,7 +479,6 @@
 .mt-\[5px\]{margin-top:5px;}
 .mt-\[6px\]{margin-top:6px;}
 .mt-\[7px\]{margin-top:7px;}
-.mt-0{margin-top:0;}
 .mt-0\.5{margin-top:0.125rem;}
 .mt-1{margin-top:0.25rem;}
 .mt-1\.5{margin-top:0.375rem;}
@@ -504,6 +508,7 @@
 .\!w-40{width:10rem !important;}
 .\!w-64{width:16rem !important;}
 .\!w-auto{width:auto !important;}
+.h-\[108px\]{height:108px;}
 .h-\[14px\]{height:14px;}
 .h-\[18px\]{height:18px;}
 .h-\[1em\]{height:1em;}
@@ -567,6 +572,7 @@
 .max-h-\[min\(70vh\,560px\)\]{max-height:min(70vh,560px);}
 .max-h-16{max-height:4rem;}
 .max-h-28{max-height:7rem;}
+.max-h-40{max-height:10rem;}
 .max-h-60{max-height:15rem;}
 .max-h-64{max-height:16rem;}
 .max-h-72{max-height:18rem;}
@@ -812,7 +818,6 @@
 .gap-8{gap:2rem;}
 .gap-px{gap:1px;}
 .gap-x-1{column-gap:0.25rem;}
-.gap-x-1\.5{column-gap:0.375rem;}
 .gap-x-2{column-gap:0.5rem;}
 .gap-x-2\.5{column-gap:0.625rem;}
 .gap-x-3{column-gap:0.75rem;}
@@ -831,6 +836,9 @@
 .space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
 .space-y-5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.25rem * var(--un-space-y-reverse));}
 .divide-y>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(1px * var(--un-divide-y-reverse));}
+.border-\[var\(--zg-border\)\],
+.border-zg-border,
+.divide-\[var\(--zg-border\)\]>:not([hidden])~:not([hidden]){border-color:var(--zg-border);}
 .\[\&\+\&\]\:border-\[var\(--zg-hairline\)\]+.\[\&\+\&\]\:border-\[var\(--zg-hairline\)\],
 .border-\[var\(--zg-hairline\)\],
 .divide-\[var\(--zg-hairline\)\]>:not([hidden])~:not([hidden]){border-color:var(--zg-hairline);}
@@ -867,8 +875,6 @@
 .border-s-2{border-inline-start-width:2px;}
 .border-\[var\(--zg-accent\)\]{border-color:var(--zg-accent);}
 .border-\[var\(--zg-border-strong\)\]{border-color:var(--zg-border-strong);}
-.border-\[var\(--zg-border\)\],
-.border-zg-border{border-color:var(--zg-border);}
 .border-\[var\(--zg-text-muted\)\]{border-color:var(--zg-text-muted);}
 .border-transparent{border-color:transparent;}
 .border-zg-danger{border-color:var(--zg-danger);}
@@ -1027,6 +1033,7 @@
 .pb-2{padding-bottom:0.5rem;}
 .pb-2\.5{padding-bottom:0.625rem;}
 .pb-3{padding-bottom:0.75rem;}
+.pb-3\.5{padding-bottom:0.875rem;}
 .pb-4{padding-bottom:1rem;}
 .pb-6{padding-bottom:1.5rem;}
 .pb-8{padding-bottom:2rem;}
@@ -1134,10 +1141,12 @@
 .text-\[var\(--zg-accent\)\],
 .text-zg-accent{color:var(--zg-accent);}
 .text-\[var\(--zg-bg\)\]{color:var(--zg-bg);}
+.text-\[var\(--zg-choice-fg\,var\(--zg-text-muted\)\)\]{color:var(--zg-choice-fg,var(--zg-text-muted));}
 .text-\[var\(--zg-code-fg\)\]{color:var(--zg-code-fg);}
 .text-\[var\(--zg-danger\)\],
 .text-zg-danger{color:var(--zg-danger);}
 .text-\[var\(--zg-error\)\]{color:var(--zg-error);}
+.text-\[var\(--zg-sidebar-label-fg\,var\(--zg-text-muted\)\)\]{color:var(--zg-sidebar-label-fg,var(--zg-text-muted));}
 .text-\[var\(--zg-success\)\],
 .text-zg-success{color:var(--zg-success);}
 .text-\[var\(--zg-text-muted\)\],
@@ -1162,6 +1171,7 @@
 .enabled\:hover\:text-\[var\(--zg-text\)\]:hover:enabled{color:var(--zg-text);}
 .disabled\:hover\:text-\[var\(--zg-text-muted\)\]:hover:disabled{color:var(--zg-text-muted);}
 .disabled\:text-\[var\(--zg-text-muted\)\]:disabled{color:var(--zg-text-muted);}
+.placeholder\:text-\[var\(--zg-sidebar-label-fg\,var\(--zg-text-muted\)\)\]::placeholder{color:var(--zg-sidebar-label-fg,var(--zg-text-muted));}
 .placeholder\:text-\[var\(--zg-text-muted\)\]::placeholder{color:var(--zg-text-muted);}
 .placeholder\:text-\[var\(--zg-text-subtle\)\]::placeholder{color:var(--zg-text-subtle);}
 .text-inherit{color:inherit;}
@@ -1188,7 +1198,6 @@
 .tracking-\[0\.12em\]{letter-spacing:0.12em;}
 .tracking-\[inherit\]{letter-spacing:inherit;}
 .tracking-normal{letter-spacing:0em;}
-.tracking-wide{letter-spacing:0.025em;}
 .font-\[inherit\]{font-family:inherit;}
 .font-mono{font-family:var(--zg-font-mono);}
 .font-sans{font-family:var(--zg-font-ui);}
@@ -1368,6 +1377,7 @@
   --zg-ring: #26a9f1;
 
   --zg-text-raw: #e5e8ec;
+  --zg-text-strong-raw: #ffffff;
   --zg-text-muted-raw: #9499a0;
   --zg-text-subtle-raw: #5f636a;
 
@@ -1634,6 +1644,11 @@ html[data-motion='off'] {
     color-mix(in oklab, var(--zg-text-raw) var(--zg-contrast-base), var(--zg-bg)),
     var(--zg-contrast-target) var(--zg-contrast-boost)
   );
+  --zg-text-strong: color-mix(
+    in oklab,
+    color-mix(in oklab, var(--zg-text-strong-raw, var(--zg-text-raw)) var(--zg-contrast-base), var(--zg-bg)),
+    var(--zg-contrast-target) var(--zg-contrast-boost)
+  );
   --zg-text-muted: color-mix(
     in oklab,
     color-mix(in oklab, var(--zg-text-muted-raw) var(--zg-contrast-base), var(--zg-bg)),
@@ -1775,6 +1790,16 @@ html[data-motion='off'] {
   scale: 0.985;
 }
 
+/* Restricted (`Restricted.tsx`): what a connection may read but not change,
+   dimmed by tone and opacity together; its tooltip says why. */
+.zg-restricted {
+  cursor: not-allowed;
+}
+.zg-restricted > [inert] {
+  opacity: 0.55;
+  filter: saturate(0.6);
+}
+
 /* Tooltip (`Tooltip.tsx`): visibility, the fade + 2px rise and the show
    delay are driven inline by the component (one timing model for inline and
    portalled bubbles). This is the hidden state before it renders. */
@@ -2005,12 +2030,10 @@ html[data-motion='off'] {
   background: var(--zg-row-hover);
 }
 
-/* The one uppercase section label. */
+/* The section label: sentence case, as written. */
 .zg-section-label {
   font-size: var(--zg-font-size-badge);
   font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
   /* A real label, read like any text: the muted tone (subtle is for decoration). */
   color: var(--zg-text-muted);
 }
@@ -2414,6 +2437,16 @@ html[data-motion='reduced'] .zg-shimmer {
   white-space: nowrap;
 }
 
+/* SmoothHeight: eases between two contents' heights while `data-easing`, then lets go. */
+.zg-smooth-height[data-easing] {
+  overflow: hidden;
+  transition: height var(--zg-motion-settle);
+}
+/* The content's own margins stay inside what is measured. */
+.zg-smooth-height-inner {
+  display: flow-root;
+}
+
 /* HeldWidth: a trailing slot held to its widest content; content sits on
    the right edge and is revealed from the left as the slot grows. */
 .zg-held-width {
@@ -2836,6 +2869,33 @@ html[data-motion='reduced'] :is(.animate-spin, .zg-spin-ring, .zg-sendstop-ring)
    `running`, Timeline `tool-running`). Applied to an absolutely positioned
    ring sibling, never to the dot itself. */
 
+/* The zidane mark spinning in and out (`ZidaneMark`): a quarter turn the way
+   its bands flow, from `--zg-mark-from` of its size (the dot it grows out
+   of in `StatusDot`). `.zg-mark-in` plays on mount; `.zg-mark-swap` on a
+   `Presence` plays both ways. Turn and scale ride `snap` in and `exit`
+   out, opacity `fade` / `fade-out`. */
+.zg-mark-in,
+.zg-presence.zg-mark-swap[data-state='enter'] {
+  animation:
+    zg-mark-in var(--zg-motion-snap) both,
+    zg-fade-in var(--zg-motion-fade) both;
+}
+.zg-presence.zg-mark-swap[data-state='exit'] {
+  animation:
+    zg-mark-out var(--zg-motion-exit) both,
+    zg-fade-out var(--zg-motion-fade-out) both;
+}
+@keyframes zg-mark-in {
+  from {
+    transform: scale(var(--zg-mark-from, 0.6)) rotate(-90deg);
+  }
+}
+@keyframes zg-mark-out {
+  to {
+    transform: scale(var(--zg-mark-from, 0.6)) rotate(45deg);
+  }
+}
+
 @keyframes zg-orbit {
   to {
     transform: rotate(360deg);
@@ -3682,12 +3742,10 @@ html[data-motion='reduced'] .zg-seg > span:nth-child(-n + 3) {
   contain-intrinsic-size: auto 28px;
 }
 
+/* Active: a flat wash a step above hover, no raised chip (it read as a button). Hover keeps it. */
 .zg-session-row[data-active='true']::before,
-.zg-session-row[data-tentative-active='true']::before,
-.zg-session-row[data-active='true']:hover::before,
-.zg-session-row[data-tentative-active='true']:hover::before {
-  background: var(--zg-raised);
-  box-shadow: var(--zg-shadow-raised);
+.zg-session-row[data-tentative-active='true']::before {
+  background: var(--zg-row-active);
 }
 
 .zg-session-row:hover:not([data-active='true']):not([data-tentative-active='true'])::before {
@@ -3702,11 +3760,6 @@ html[data-motion='reduced'] .zg-seg > span:nth-child(-n + 3) {
   box-shadow: var(--zg-shadow-well);
 }
 
-.zg-session-row[data-active='true'] .zg-session-title,
-.zg-session-row[data-tentative-active='true'] .zg-session-title {
-  font-weight: 500;
-}
-
 /* The title's color; its fade lives on the clip around it (`.zg-title-clip`). */
 .zg-session-title {
   color: var(--zg-text-muted);
@@ -4046,6 +4099,13 @@ html[data-motion='reduced'] .zg-orb-ripple {
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
 }
 
+/* Dark appearance: primary text at the theme's strongest, as in the sidebar. */
+:root.dark .zg-inbox {
+  --zg-text: var(--zg-text-strong);
+  /* A question's unpicked choices (QuestionField), muted elsewhere. */
+  --zg-choice-fg: var(--zg-text-strong);
+}
+
 /* Inbox card resolved: lifts away on `exit` and fades on `fade-out`, then
    unmounts (InboxPanel waits `readExitMs`). */
 .zg-inbox-card[data-state='leaving'] {
@@ -4088,6 +4148,18 @@ html[data-motion='reduced'] .zg-orb-ripple {
   width: 0;
 }
 
+/* Dark appearance: primary text at the theme's strongest (pure white unless the theme names its text); muted and
+   subtle keep the theme's gray. */
+:root.dark .zg-sidebar {
+  --zg-text: var(--zg-text-strong);
+  /* Project names, the New session label, the search placeholder; muted elsewhere. */
+  --zg-sidebar-label-fg: var(--zg-text-strong);
+}
+/* Every session title, not only the active one (`.zg-session-title` is muted in chat.css). */
+:root.dark .zg-sidebar .zg-session-title {
+  color: var(--zg-text);
+}
+
 /* Content sheet: full panel width, pinned to the aside's right edge so it
    travels with it. A light opacity fade rides along (no blur, no
    re-layout: nothing inside changes position relative to the sheet). */
@@ -4895,7 +4967,8 @@ a.zg-badge:hover,
    script has not reached are dim; the running one carries the accent and the
    running sweep; a call that ends washes its line once; a failed line is red,
    the script's own error under it. A running script past 15 lines scrolls to
-   follow its running line. Motion stops under reduced / off. */
+   follow its running line, and keeps that window once it ends. Motion stops
+   under reduced / off. */
 /* The frame's hairline, drawn again over the lines: the sticky gutter and the
    tinted lines are opaque, and covered it where they meet the frame's edge. */
 .zg-script-frame::after {
@@ -4921,13 +4994,15 @@ a.zg-badge:hover,
 .zg-code-scroll[data-wrap] .zg-script-lines {
   width: auto;
 }
-.zg-script-lines[data-follow] {
-  max-height: calc(15 * 1.5em + 1rem);
+/* A long script's window: the frame's own scroller takes it, so one element
+   scrolls both ways and the sticky gutter stays put sideways too. */
+.zg-code-scroll:has(> .zg-script-lines[data-window]) {
+  max-height: calc(15 * 1.5 * var(--zg-font-size-code) + 1rem);
   overflow-y: auto;
   scroll-behavior: smooth;
 }
-html[data-motion='off'] .zg-script-lines,
-html[data-motion='reduced'] .zg-script-lines {
+html[data-motion='off'] .zg-code-scroll,
+html[data-motion='reduced'] .zg-code-scroll {
   scroll-behavior: auto;
 }
 .zg-script-line {
@@ -4978,6 +5053,61 @@ html[data-motion='reduced'] .zg-script-lines {
 .zg-script-line[data-state='idle'] .zg-script-number {
   opacity: 0.4;
 }
+/* In a loop that went round again: ran in the round before, not yet in this one. */
+.zg-script-line[data-state='previous'] .zg-script-code {
+  opacity: 0.6;
+}
+.zg-script-line[data-state='previous'] .zg-script-mark {
+  opacity: 0.35;
+}
+/* A `sleep`: the running tint, softer, and its mark breathing. */
+.zg-script-line[data-state='waiting'] {
+  --zg-script-tint: color-mix(in srgb, var(--zg-accent-wash) 40%, transparent);
+  --zg-script-bar: color-mix(in srgb, var(--zg-accent) 60%, transparent);
+}
+.zg-script-line[data-state='waiting'] .zg-script-gutter {
+  color: var(--zg-accent);
+}
+.zg-script-line[data-state='waiting'] .zg-script-mark {
+  animation: zg-script-breathe 2s ease-in-out infinite;
+}
+html[data-motion='off'] .zg-script-line .zg-script-mark,
+html[data-motion='reduced'] .zg-script-line .zg-script-mark {
+  animation: none;
+}
+
+/* Loops: the first line's mark, and while the script is in a loop, its line
+   numbers in the running color. */
+.zg-script-loop {
+  color: var(--zg-text-subtle);
+  transition: color var(--zg-motion-fade);
+}
+.zg-script-loop[data-active] {
+  color: var(--zg-accent);
+}
+.zg-script-line[data-in-loop] .zg-script-number {
+  color: color-mix(in srgb, var(--zg-accent) 75%, var(--zg-text-subtle));
+}
+
+/* After a line's code: a loop's round, a line's call count, a wait's time left. */
+.zg-script-note {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-inline-start: 0.625ch;
+  border-radius: var(--zg-radius-xs);
+  font-family: var(--zg-font-ui);
+  font-size: 0.85em;
+  color: var(--zg-text-subtle);
+  font-variant-numeric: tabular-nums;
+  vertical-align: 0.05em;
+  transition: color var(--zg-motion-fade);
+}
+.zg-script-note[data-active] {
+  padding-inline: 0.375rem;
+  color: var(--zg-accent);
+  background: color-mix(in srgb, var(--zg-accent-wash) 60%, transparent);
+}
 /* A line's tint and bar come from its state. The gutter stays opaque (code
    scrolled sideways passes under it): the tint goes on a layer over its own
    background, and the bar sits on it, so both stay in place while scrolling. */
@@ -5032,6 +5162,12 @@ html[data-motion='reduced'] .zg-script-line::after {
   animation: none;
 }
 
+@keyframes zg-script-breathe {
+  50% {
+    opacity: 0.4;
+  }
+}
+
 @keyframes zg-script-settle {
   from {
     background-color: color-mix(in srgb, var(--zg-success-soft) 80%, transparent);

package/dist/terminal/HostTerminalSurface.js

@@ -6,9 +6,9 @@ import { matchesBinding } from "../keybindings/match.js";
 import { useKeybindingsHost } from "../keybindings/KeybindingsProvider.js";
 import { useSymbolsFontUrl, useTerminalActions, useTerminalStore } from "./TerminalProvider.js";
 import { useLinkRouter } from "../extensions/links.js";
+import { detectLinks, linkTarget, resolveTerminalPath, serverOnlyLink } from "./headless/links.js";
 import { loadGhostty, openTerminal } from "./ghostty.js";
 import { terminalFont } from "./grid-size.js";
-import { detectLinks, linkTarget, resolveTerminalPath, serverOnlyLink } from "./headless/links.js";
 import { planChunk, planReset, shouldAck } from "./headless/output-cursor.js";
 import { feedSlices, yieldToEventLoop } from "./headless/replay.js";
 import { macTerminalKey } from "./keys.js";

package/dist/terminal/headless/links.d.ts

@@ -14,6 +14,24 @@ type TerminalLink = {
   line?: number;
   column?: number;
 };
+/** Where in a file a path points: 1-based. */
+interface PathPosition {
+  /** The line. */
+  line: number;
+  /** The column. */
+  column?: number;
+  /** The last line of a range. */
+  endLine?: number;
+}
+/**
+ * A path written with a position at its end, split into both, as the terminal's links read one (plus a range's
+ * end and GitHub's `#L12`). `null` when the text ends in no position, or in line 0.
+ *
+ * @param text - The text, trimmed.
+ */
+declare function splitPathPosition(text: string): ({
+  path: string;
+} & PathPosition) | null;
 /**
  * Links on one line. URLs with a scheme are only used to keep paths out of
  * them (`https://x.dev/a/b.ts` is not a path): the library links those
@@ -54,4 +72,4 @@ declare function resolveTerminalPath(path: string, cwd: string, home?: string):
  */
 declare function serverOnlyLink(url: string, serverName: string | null, describe: (serverName: string) => string): string | null;
 //#endregion
-export { LinkTarget, TerminalLink, detectLinks, linkTarget, resolveTerminalPath, serverOnlyLink };
+export { LinkTarget, PathPosition, TerminalLink, detectLinks, linkTarget, resolveTerminalPath, serverOnlyLink, splitPathPosition };

package/dist/terminal/headless/links.js

@@ -13,7 +13,31 @@ function basename(path) {
 }
 const URL_RE = /\bhttps?:\/\/[^\s"'<>`]+/g;
 const LOCAL_RE = /(?<![\w./:@-])(?:localhost|127\.0\.0\.1|0\.0\.0\.0|\[::1\]):\d{2,5}(?:\/[^\s"'<>`]*)?/g;
-const PATH_RE = /(?<![\w./@+~-])((?:\.{1,2}\/|~\/|\/)?(?:[\w.@+-]+\/)*[\w.@+-]+)(?::(\d+)(?::(\d+))?|\((\d+),(\d+)\))?/g;
+/** A position after a path: `:12`, `:12:5` or `(12,5)` (tsc). Groups: line, column, tsc line, tsc column. */
+const POSITION = String.raw`(?::(\d+)(?::(\d+))?|\((\d+),(\d+)\))`;
+const PATH_RE = new RegExp(String.raw`(?<![\w./@+~-])((?:\.{1,2}\/|~\/|\/)?(?:[\w.@+-]+\/)*[\w.@+-]+)${POSITION}?`, "g");
+/** A whole text ending in a position: the terminal's, a range's end (`:12-20`), or GitHub's `#L12`, `#L12C5`, `#L12-L20`. */
+const ENDS_IN_POSITION = new RegExp(String.raw`^(.+?)(?:${POSITION}(?:-(\d+))?|#L(\d+)(?:C(\d+))?(?:-L?(\d+))?)$`);
+/**
+* A path written with a position at its end, split into both, as the terminal's links read one (plus a range's
+* end and GitHub's `#L12`). `null` when the text ends in no position, or in line 0.
+*
+* @param text - The text, trimmed.
+*/
+function splitPathPosition(text) {
+	const m = ENDS_IN_POSITION.exec(text);
+	if (!m) return null;
+	const line = Number(m[2] ?? m[4] ?? m[7]);
+	if (!(line >= 1)) return null;
+	const column = m[3] ?? m[5] ?? m[8];
+	const endLine = m[6] ?? m[9];
+	return {
+		path: m[1],
+		line,
+		...column ? { column: Number(column) } : {},
+		...endLine && Number(endLine) > line ? { endLine: Number(endLine) } : {}
+	};
+}
 /** Extensions that make a bare name (no slash, no position) read as a file. */
 const FILE_EXTENSIONS = new Set("ts tsx js jsx mjs cjs mts cts json jsonc md mdx py rs go rb java kt kts swift c h cc cpp hpp cs css scss sass less html htm vue svelte astro yml yaml toml lock sh bash zsh fish txt sql graphql gql proto xml ini env conf cfg php ex exs erl hs ml zig nim lua dart scala clj r jl tf".split(" "));
 /** Trailing characters that end a sentence rather than an address. */
@@ -197,4 +221,4 @@ function serverOnlyLink(url, serverName, describe) {
 	return LOOPBACK_HOSTS.has(host) || host.endsWith(".localhost") ? describe(serverName) : null;
 }
 //#endregion
-export { detectLinks, linkTarget, resolveTerminalPath, serverOnlyLink };
+export { detectLinks, linkTarget, resolveTerminalPath, serverOnlyLink, splitPathPosition };

package/dist/theme/css-vars.js

@@ -18,6 +18,7 @@ function paletteToCssVars(p) {
 		"--zg-border-strong": p.borderStrong,
 		"--zg-ring": p.ring,
 		"--zg-text-raw": p.text,
+		"--zg-text-strong-raw": p.textStrong,
 		"--zg-text-muted-raw": p.textMuted,
 		"--zg-text-subtle-raw": p.textSubtle,
 		"--zg-accent": p.accent,

package/dist/theme/derive.d.ts

@@ -14,6 +14,8 @@ interface ThemeSeed {
   appearance?: Appearance;
   /** Body text. Derived from `canvas` with a faint tint when omitted. */
   text?: string;
+  /** Primary text where it reads strongest (the sidebar and the inbox in dark). Defaults to white in dark, `text` in light. */
+  textStrong?: string;
   /** Secondary text. Pushed until it clears its contrast floor. */
   textMuted?: string;
   /** Tertiary text, such as hints. Pushed until it clears its contrast floor. */
@@ -189,6 +191,8 @@ interface ResolvedPalette {
   ring: string;
   /** Body text. */
   text: string;
+  /** Primary text where it reads strongest (the sidebar and the inbox in dark). */
+  textStrong: string;
   /** Secondary text. */
   textMuted: string;
   /** Tertiary text, such as hints. */

package/dist/theme/derive.js

@@ -184,6 +184,7 @@ function derivePalette(seed) {
 	const hoverWash = dark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.04)";
 	const textBase = seed.text ?? tintedNeutral(dark ? .93 : .24, tintSource, tint * .5);
 	const text = ensureContrast(textBase, surface2, CONTRAST.text);
+	const textStrong = ensureContrast(seed.textStrong ?? (dark ? "#ffffff" : text), surface2, CONTRAST.text);
 	const textMuted = ensureContrast(seed.textMuted ?? mix(text, bg, .42), surface2, CONTRAST.textMuted);
 	const textSubtle = ensureContrast(seed.textSubtle ?? mix(text, bg, .62), bg, CONTRAST.textSubtle);
 	const accent = ensureContrast(seed.accent, bg, 3);
@@ -256,6 +257,7 @@ function derivePalette(seed) {
 		text,
 		textMuted,
 		textSubtle,
+		textStrong,
 		accentFg,
 		accentFill,
 		accentFillHover,