toolroll 0.9.86 → 0.9.88

package/dist/design/kit.d.ts

@@ -0,0 +1,208 @@
+/**
+ * The revamp kit's words and rules, shared by the server's HTML kit (src/server/kit.ts) and the React kit
+ * (src/browser/kit/), so both draw the same thing from the same facts. No DOM, no server state: the rules
+ * are in src/design/KIT.md, the look in src/design/kit.css.
+ *
+ * The approval helpers here decide only what a page SHOWS (a password field, one click, or no button). The server
+ * still proves every act at the moment it happens (scope.ts freshness, passwordless.ts, people-tokens.ts); a page
+ * that shows one click for an act the server then refuses says so in place.
+ */
+import { type Headline } from "../task-status.js";
+/** The five status words. */
+export type StatusKey = "needs" | "running" | "queued" | "finished" | "failed";
+/** A chip's tone: "" is neutral; "ask" names a specific ask inside a Needs-you group (ink words, amber dot). */
+export type ChipTone = "" | "needs" | "ask" | "live" | "done" | "failed";
+export declare const STATUS: Readonly<Record<StatusKey, {
+    word: string;
+    tone: ChipTone;
+}>>;
+/** A task's headline (task-status.ts) as the kit's chip: its own word, in the tone of the status it belongs to. A
+ * row that waits on a person never shows a failure tone; something that waits on someone else is never amber. */
+export declare function chipOfHeadline(headline: Headline): {
+    word: string;
+    tone: ChipTone;
+    status: StatusKey;
+};
+/** Which of the five a headline is. */
+export declare function statusOfHeadline(headline: Headline): StatusKey;
+/** Resource states (a computer that builds, not work): never amber. */
+export declare const RESOURCE: Readonly<Record<"idle" | "building" | "offline", {
+    word: string;
+    tone: ChipTone;
+}>>;
+/**
+ * none = one click (answer, accept, retry, merge, remove a hold);
+ * standard = a password unless Passwordless is on or a password was typed in the last 15 minutes here;
+ * step-up = a password unless Passwordless is on;
+ * way-in = anything that creates or widens a way in (invites, tokens, sign-in methods, widening access):
+ *          always the password typed now.
+ */
+export type ApprovalKind = "none" | "standard" | "step-up" | "way-in";
+export declare const APPROVAL_KINDS: readonly ApprovalKind[];
+/** The facts a page has about this person and act, as the server read them for this page. */
+export type ApprovalFacts = {
+    /** Passwordless is on for this signed-in browser (html.ts passwordlessRendering). */
+    passwordless: boolean;
+    /** A recently typed password would stand in for this act now (scope.ts freshnessFor preview): the act is allowlisted and
+     * the password was typed on this session within the window. Only a standard act honours it. */
+    remembered: boolean;
+    /** When the remembered password stops counting, as words ("10:47"), for the terms line. */
+    rememberedUntil?: string | null;
+    /** An automatic-approval rule covers this act: the page shows no button at all. Never for way-in. */
+    automatic?: boolean;
+};
+/** What the page shows: a password field, one click, or no button (approved automatically). */
+export type ApprovalAsk = "password" | "click" | "automatic";
+export declare function approvalAsk(kind: ApprovalKind, facts: ApprovalFacts): ApprovalAsk;
+/** How a click without a password is justified, for the record line after an approval. */
+export declare function approvalHow(kind: ApprovalKind, facts: ApprovalFacts): "password" | "remembered" | "passwordless" | "none" | "automatic";
+/** The terms line under an approval: which rule applies, in words. Empty for a one-click act. */
+export declare function termsOf(kind: ApprovalKind, facts: ApprovalFacts): string;
+/** A duration in seconds as the timing rows say it: "38s", "6m 12s", "1h 25m". */
+export declare function dur(seconds: number): string;
+/** "3 flows", "1 flow". */
+export declare const plural: (n: number, one: string, many: string) => string;
+/** A step's state on the timing axis. */
+export type TimingState = "ok" | "run" | "q" | "bad" | "wait";
+export declare const TIMING_WORDS: Readonly<Record<TimingState, string>>;
+export type TimingRow = {
+    name: string;
+    sub?: string;
+    st: TimingState;
+    start: number;
+    dur: number;
+};
+/** Each row's bar as percentages of one shared axis; a queued row has no bar until it starts. */
+export declare function timingBars(rows: readonly TimingRow[], scale?: number): Array<{
+    left: number;
+    width: number;
+} | null>;
+/** One step on a progress line: done (a check), now (waits on you: amber), live (running: blue), failed, or to do. */
+export type StepState = "done" | "now" | "live" | "failed" | "todo";
+export type StepItem = {
+    label: string;
+    state: StepState;
+    sub?: string;
+};
+/** The words a screen reader hears for a step's state. */
+export declare const STEP_WORDS: Readonly<Record<StepState, string>>;
+/** How far the line is filled, 0–1: up to the current step (the first that isn't done), or all of it. */
+export declare function stepsFill(steps: readonly StepItem[]): number;
+/** One shape of a 24×24 stroke icon: its element and attributes (data, so each side draws it with its own escaping). */
+export type IconShape = readonly ["path", {
+    readonly d: string;
+}] | readonly ["circle", {
+    readonly cx: number;
+    readonly cy: number;
+    readonly r: number;
+}] | readonly ["rect", {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly rx: number;
+}];
+/** The icons the kit draws (lucide shapes). */
+export declare const KIT_ICONS: {
+    readonly home: readonly [IconShape, IconShape];
+    readonly tasks: readonly [IconShape, IconShape, IconShape, IconShape, IconShape];
+    readonly flows: readonly [readonly ["rect", {
+        readonly x: 3;
+        readonly y: 3;
+        readonly width: 8;
+        readonly height: 8;
+        readonly rx: 2;
+    }], IconShape, readonly ["rect", {
+        readonly x: 13;
+        readonly y: 13;
+        readonly width: 8;
+        readonly height: 8;
+        readonly rx: 2;
+    }]];
+    readonly agents: readonly [IconShape, readonly ["rect", {
+        readonly x: 4;
+        readonly y: 8;
+        readonly width: 16;
+        readonly height: 12;
+        readonly rx: 2;
+    }], IconShape, IconShape, IconShape, IconShape];
+    readonly projects: readonly [IconShape];
+    readonly settings: readonly [IconShape, IconShape, IconShape, IconShape, IconShape, IconShape, IconShape, IconShape, IconShape];
+    readonly pen: readonly [IconShape];
+    readonly arrow: readonly [IconShape, IconShape];
+    readonly plus: readonly [IconShape, IconShape];
+    readonly send: readonly [IconShape, IconShape];
+    readonly stop: readonly [readonly ["rect", {
+        readonly x: 6;
+        readonly y: 6;
+        readonly width: 12;
+        readonly height: 12;
+        readonly rx: 2;
+    }]];
+    readonly x: readonly [IconShape, IconShape];
+    readonly back: readonly [IconShape];
+    readonly menu: readonly [IconShape, IconShape, IconShape];
+    readonly search: readonly [IconShape, IconShape];
+    readonly chevron: readonly [IconShape];
+    readonly check: readonly [IconShape];
+    readonly alert: readonly [IconShape, IconShape, IconShape];
+    readonly more: readonly [IconShape, IconShape, IconShape];
+    readonly file: readonly [IconShape, IconShape];
+    readonly minus: readonly [IconShape];
+    readonly fit: readonly [IconShape, IconShape, IconShape, IconShape];
+    readonly bolt: readonly [IconShape];
+    readonly code: readonly [IconShape, IconShape];
+    readonly sun: readonly [IconShape, IconShape, IconShape, IconShape, IconShape, IconShape, IconShape, IconShape, IconShape];
+    readonly cpu: readonly [readonly ["rect", {
+        readonly x: 4;
+        readonly y: 4;
+        readonly width: 16;
+        readonly height: 16;
+        readonly rx: 2;
+    }], readonly ["rect", {
+        readonly x: 9;
+        readonly y: 9;
+        readonly width: 6;
+        readonly height: 6;
+        readonly rx: 1;
+    }], IconShape, IconShape, IconShape, IconShape, IconShape, IconShape, IconShape, IconShape];
+    readonly bell: readonly [IconShape, IconShape];
+    readonly shield: readonly [IconShape];
+    readonly folder: readonly [IconShape];
+    readonly people: readonly [IconShape, IconShape, IconShape, IconShape];
+    readonly coin: readonly [IconShape, IconShape, IconShape];
+    readonly monitor: readonly [readonly ["rect", {
+        readonly x: 2;
+        readonly y: 3;
+        readonly width: 20;
+        readonly height: 14;
+        readonly rx: 2;
+    }], IconShape, IconShape];
+    readonly list: readonly [IconShape, IconShape, IconShape, IconShape, IconShape, IconShape];
+    readonly board: readonly [readonly ["rect", {
+        readonly x: 3;
+        readonly y: 3;
+        readonly width: 18;
+        readonly height: 18;
+        readonly rx: 2;
+    }], IconShape, IconShape];
+    readonly panel: readonly [readonly ["rect", {
+        readonly x: 3;
+        readonly y: 3;
+        readonly width: 18;
+        readonly height: 18;
+        readonly rx: 2;
+    }], IconShape];
+};
+export type KitIcon = keyof typeof KIT_ICONS;
+/** The eight Settings groups, in order: [label, slug, href]. */
+export declare const SETTINGS_GROUPS: ReadonlyArray<readonly [label: string, slug: string, href: string]>;
+/** Each group's icon on the Settings overview (wave D). */
+export declare const SETTINGS_GROUP_ICONS: Readonly<Record<string, KitIcon>>;
+/** How a Settings row says what waits on this person: "1 item needs you", "2 items need you". */
+export declare const needsWords: (n: number) => string;
+/** The not-found page's default words. */
+export declare const NOT_FOUND: {
+    title: (path: string) => string;
+    text: string;
+};

package/dist/design/kit.js

@@ -0,0 +1,177 @@
+/**
+ * The revamp kit's words and rules, shared by the server's HTML kit (src/server/kit.ts) and the React kit
+ * (src/browser/kit/), so both draw the same thing from the same facts. No DOM, no server state: the rules
+ * are in src/design/KIT.md, the look in src/design/kit.css.
+ *
+ * The approval helpers here decide only what a page SHOWS (a password field, one click, or no button). The server
+ * still proves every act at the moment it happens (scope.ts freshness, passwordless.ts, people-tokens.ts); a page
+ * that shows one click for an act the server then refuses says so in place.
+ */
+import { HEADLINE_TONE } from "../task-status.js";
+export const STATUS = {
+    needs: { word: "Needs you", tone: "needs" },
+    running: { word: "Running", tone: "live" },
+    queued: { word: "Queued", tone: "" },
+    finished: { word: "Finished", tone: "done" },
+    failed: { word: "Failed", tone: "failed" },
+};
+/** A task's headline (task-status.ts) as the kit's chip: its own word, in the tone of the status it belongs to. A
+ * row that waits on a person never shows a failure tone; something that waits on someone else is never amber. */
+export function chipOfHeadline(headline) {
+    const status = statusOfHeadline(headline);
+    return { word: headline === "Needs you" ? STATUS.needs.word : headline, tone: STATUS[status].tone, status };
+}
+/** Which of the five a headline is. */
+export function statusOfHeadline(headline) {
+    switch (HEADLINE_TONE[headline]) {
+        case "attention":
+        case "ready": return "needs";
+        case "live": return "running";
+        case "success": return "finished";
+        case "danger": return "failed";
+        case "neutral": return "queued";
+    }
+}
+/** Resource states (a computer that builds, not work): never amber. */
+export const RESOURCE = {
+    idle: { word: "Idle", tone: "" },
+    building: { word: "Building", tone: "live" },
+    offline: { word: "Offline", tone: "failed" },
+};
+export const APPROVAL_KINDS = ["none", "standard", "step-up", "way-in"];
+export function approvalAsk(kind, facts) {
+    if (kind === "way-in")
+        return "password";
+    if (facts.automatic === true)
+        return "automatic";
+    if (kind === "none")
+        return "click";
+    if (facts.passwordless)
+        return "click";
+    if (kind === "standard" && facts.remembered)
+        return "click";
+    return "password";
+}
+/** How a click without a password is justified, for the record line after an approval. */
+export function approvalHow(kind, facts) {
+    const ask = approvalAsk(kind, facts);
+    if (ask === "password")
+        return "password";
+    if (ask === "automatic")
+        return "automatic";
+    if (kind === "none")
+        return "none";
+    return facts.passwordless ? "passwordless" : "remembered";
+}
+/** The terms line under an approval: which rule applies, in words. Empty for a one-click act. */
+export function termsOf(kind, facts) {
+    if (kind === "way-in") {
+        if (facts.passwordless)
+            return "Passwordless is on, but this creates a new way in, so it still asks for your password.";
+        if (facts.remembered)
+            return "A remembered password doesn’t count here: this creates a new way in.";
+        return "This creates a new way in, so it always asks for your password.";
+    }
+    if (facts.automatic === true)
+        return "Approved automatically by your rule.";
+    if (kind === "none")
+        return "";
+    if (facts.passwordless)
+        return "No password needed: Passwordless is on for your account.";
+    if (kind === "standard" && facts.remembered)
+        return facts.rememberedUntil ? `No password needed: remembered on this computer until ${facts.rememberedUntil}.` : "No password needed: remembered on this computer.";
+    return "Asks for your password.";
+}
+// ---- time and counts --------------------------------------------------------------------------------------------
+/** A duration in seconds as the timing rows say it: "38s", "6m 12s", "1h 25m". */
+export function dur(seconds) {
+    const n = Math.max(0, Math.round(seconds));
+    if (n < 60)
+        return `${n}s`;
+    if (n < 3600)
+        return `${Math.floor(n / 60)}m ${String(n % 60).padStart(2, "0")}s`;
+    return `${Math.floor(n / 3600)}h ${String(Math.floor((n % 3600) / 60)).padStart(2, "0")}m`;
+}
+/** "3 flows", "1 flow". */
+export const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+export const TIMING_WORDS = { ok: "Done", run: "Now", q: "Queued", bad: "Failed", wait: "Needs you" };
+/** Each row's bar as percentages of one shared axis; a queued row has no bar until it starts. */
+export function timingBars(rows, scale) {
+    const sc = scale ?? Math.max(1, ...rows.map(row => row.start + (row.st === "q" ? 0 : row.dur))) * 1.02;
+    return rows.map(row => row.st === "q" ? null : { left: (Math.max(0, row.start) / sc) * 100, width: (Math.max(row.dur, sc / 400) / sc) * 100 });
+}
+/** The words a screen reader hears for a step's state. */
+export const STEP_WORDS = { done: "done", now: "waiting on you", live: "in progress", failed: "failed", todo: "not started" };
+/** How far the line is filled, 0–1: up to the current step (the first that isn't done), or all of it. */
+export function stepsFill(steps) {
+    if (steps.length < 2)
+        return steps.length === 1 && steps[0].state === "done" ? 1 : 0;
+    const at = steps.findIndex(step => step.state !== "done");
+    return at === -1 ? 1 : at / (steps.length - 1);
+}
+const path = (d) => ["path", { d }];
+const circle = (cx, cy, r) => ["circle", { cx, cy, r }];
+/** The icons the kit draws (lucide shapes). */
+export const KIT_ICONS = {
+    // The app shell's destinations (the rail and the phone menu) and its New task pen.
+    home: [path("m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"), path("M9 22V12h6v10")],
+    tasks: [path("m3 17 2 2 4-4"), path("m3 7 2 2 4-4"), path("M13 6h8"), path("M13 12h8"), path("M13 18h8")],
+    flows: [["rect", { x: 3, y: 3, width: 8, height: 8, rx: 2 }], path("M7 11v4a2 2 0 0 0 2 2h4"), ["rect", { x: 13, y: 13, width: 8, height: 8, rx: 2 }]],
+    agents: [path("M12 8V4H8"), ["rect", { x: 4, y: 8, width: 16, height: 12, rx: 2 }], path("M2 14h2"), path("M20 14h2"), path("M15 13v2"), path("M9 13v2")],
+    projects: [path("M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z")],
+    settings: [path("M21 4h-7"), path("M10 4H3"), path("M21 12h-9"), path("M8 12H3"), path("M21 20h-5"), path("M12 20H3"), path("M14 2v4"), path("M8 10v4"), path("M16 18v4")],
+    pen: [path("M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z")],
+    arrow: [path("M5 12h14"), path("m12 5 7 7-7 7")],
+    plus: [path("M12 5v14"), path("M5 12h14")],
+    send: [path("M12 19V5"), path("m5 12 7-7 7 7")],
+    stop: [["rect", { x: 6, y: 6, width: 12, height: 12, rx: 2 }]],
+    x: [path("M18 6 6 18"), path("m6 6 12 12")],
+    back: [path("m15 18-6-6 6-6")],
+    menu: [path("M4 6h16"), path("M4 12h16"), path("M4 18h16")],
+    search: [circle(11, 11, 7), path("m20 20-3.5-3.5")],
+    chevron: [path("m6 9 6 6 6-6")],
+    check: [path("M20 6 9 17l-5-5")],
+    alert: [circle(12, 12, 9), path("M12 8v4"), path("M12 16h.01")],
+    more: [circle(5, 12, 1), circle(12, 12, 1), circle(19, 12, 1)],
+    file: [path("M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"), path("M14 3v5h5")],
+    // Wave C (flows): the canvas's zoom bar and the flow page's tools.
+    minus: [path("M5 12h14")],
+    fit: [path("M15 3h6v6"), path("M9 21H3v-6"), path("M21 3l-7 7"), path("M3 21l7-7")],
+    bolt: [path("M13 2 4 14h7l-1 8 9-12h-7z")],
+    code: [path("m16 18 6-6-6-6"), path("m8 6-6 6 6 6")],
+    // The Settings groups' icons (wave D; SETTINGS_GROUP_ICONS).
+    sun: [circle(12, 12, 4), path("M12 2v2"), path("M12 20v2"), path("m4.93 4.93 1.41 1.41"), path("m17.66 17.66 1.41 1.41"), path("M2 12h2"), path("M20 12h2"), path("m6.34 17.66-1.41 1.41"), path("m19.07 4.93-1.41 1.41")],
+    cpu: [["rect", { x: 4, y: 4, width: 16, height: 16, rx: 2 }], ["rect", { x: 9, y: 9, width: 6, height: 6, rx: 1 }], path("M15 2v2"), path("M15 20v2"), path("M2 15h2"), path("M2 9h2"), path("M20 15h2"), path("M20 9h2"), path("M9 2v2"), path("M9 20v2")],
+    bell: [path("M10.27 21a2 2 0 0 0 3.46 0"), path("M3.26 15.33A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.67C19.41 13.96 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.41 5.96-2.74 7.33")],
+    shield: [path("M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z")],
+    folder: [path("M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z")],
+    people: [path("M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"), circle(9, 7, 4), path("M22 21v-2a4 4 0 0 0-3-3.87"), path("M16 3.13a4 4 0 0 1 0 7.75")],
+    coin: [circle(12, 12, 10), path("M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"), path("M12 18V6")],
+    monitor: [["rect", { x: 2, y: 3, width: 20, height: 14, rx: 2 }], path("M8 21h8"), path("M12 17v4")],
+    list: [path("M8 6h13"), path("M8 12h13"), path("M8 18h13"), path("M3 6h.01"), path("M3 12h.01"), path("M3 18h.01")],
+    board: [["rect", { x: 3, y: 3, width: 18, height: 18, rx: 2 }], path("M9 3v18"), path("M15 3v18")],
+    panel: [["rect", { x: 3, y: 3, width: 18, height: 18, rx: 2 }], path("M15 3v18")],
+};
+// ---- settings frame ---------------------------------------------------------------------------------------------
+/** The eight Settings groups, in order: [label, slug, href]. */
+export const SETTINGS_GROUPS = [
+    ["General", "general", "/settings/general"],
+    ["Agents and models", "agents", "/settings/agents"],
+    ["Chat apps and alerts", "alerts", "/settings/alerts"],
+    ["Approvals and safety", "approval", "/settings/approval"],
+    ["Projects", "projects", "/settings/projects"],
+    ["People and sign-in", "access", "/settings/access"],
+    ["Spend", "spend", "/spend"],
+    ["System", "system", "/settings/system"],
+];
+/** Each group's icon on the Settings overview (wave D). */
+export const SETTINGS_GROUP_ICONS = {
+    general: "sun", agents: "cpu", alerts: "bell", approval: "shield", projects: "folder", access: "people", spend: "coin", system: "monitor",
+};
+/** How a Settings row says what waits on this person: "1 item needs you", "2 items need you". */
+export const needsWords = (n) => n === 1 ? "1 item needs you" : `${n} items need you`;
+/** The not-found page's default words. */
+export const NOT_FOUND = {
+    title: (path) => `There’s no page at ${path}.`,
+    text: "It may have moved. Home has what needs you; Tasks has every task.",
+};

package/dist/design/tokens.css

@@ -1,4 +1,4 @@
-/* @generated by youi from the Signal design language v1.0.0. Do not edit: change the tokens in design-language and run `youi sync`. */
+/* @generated by youi from the Toolroll design language v1.0.0. Do not edit: change the tokens in the design repo and run `youiyoux sync`. */
 /* Built with Terrazzo (DTCG 2025.10 resolver). */
 :root {
   color-scheme: light;
@@ -8,10 +8,18 @@
   --so-attention: var(--so-signal);
   --so-attention-soft: var(--so-signal-soft);
   --so-code-bg: #fafafa;
+  /* Composer: the filled surface of the message box, one step off the page. */
+  --so-composer: #f2f2f2;
+  /* Composer Control: the filled circle and pill chips inside the composer (+, project, toggle chips) and the empty send. */
+  --so-composer-control: #dcdcdc;
   /* Vermilion: failure and irreversible acts. */
   --so-danger: #c4320a;
   --so-danger-soft: #feebe7;
   --so-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  /* Field: the filled surface of a text field, select or secondary text box (the field family: no outline; the label names it, focus draws the ink ring). */
+  --so-field: #ececec;
+  /* Field Line: the boundary that identifies a control (fields, outline buttons, switches, radio cards), 3:1 or better on paper. */
+  --so-field-line: #8f8f8f;
   --so-font-mono: "Geist Mono", ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
   --so-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   /* Frame Grey: the frame the sidebar sits on, and the page background of server pages. */
@@ -33,6 +41,10 @@
   --so-nav-hover: #e4e4e4;
   /* Nav Ink: idle sidebar rows and their hover fill on the frame. */
   --so-nav-ink: #525252;
+  /* Needs You Amber: what waits on this person, and nothing else (the Needs-you chip's dot, a waiting box's outline, the dock's dot). Never a warning, quota, link or decoration. */
+  --so-needs: var(--so-warning);
+  /* The wash behind a Needs-you chip. */
+  --so-needs-soft: var(--so-warning-soft);
   --so-neutral-ink: #525252;
   /* Neutral Badge: the badge for anything that is a fact and not a claim on the person, such as queued, running or built today in a project peek, or a count in a fold. */
   --so-neutral-soft: #f0f0f0;
@@ -40,6 +52,8 @@
   --so-on-attention: var(--so-on-signal);
   --so-on-signal: #ffffff;
   --so-overlay: rgb(0 0 0 / .32);
+  /* Overlay Edge: the border of a popover, sheet, drawer or menu (floating things get a border, not a shadow). */
+  --so-overlay-line: #b8b8b8;
   /* Paper: every sheet, card, field, menu and dialog. */
   --so-paper: #ffffff;
   --so-phone-block: 14px;
@@ -56,6 +70,10 @@
   --so-radius-sm: 6px;
   /* Raised: segmented-tab tracks, notices, row hover fills, and the muted well behind a "next step" block or a neutral problem line. */
   --so-raised: #f5f5f5;
+  /* Ink: all body text, and the colour of every act: primary buttons, the New task button, switches and radio cards when on. */
+  --so-ring: var(--so-ink);
+  /* Kit Scrim: what a blocking kit overlay dims the page with, lighter than the console's older overlay. */
+  --so-scrim: rgb(0 0 0 / .22);
   --so-scroll: #cfcfcf;
   /* Selection: text selection highlight, with ink text on it. */
   --so-selection: #d4d4d4;
@@ -150,8 +168,12 @@
     --so-accent-hover: #ffffff;
     --so-accent-text: #ededed;
     --so-code-bg: #111111;
+    --so-composer: #242424;
+    --so-composer-control: #333333;
     --so-danger: #ff977d;
     --so-danger-soft: rgb(255 151 125 / .12);
+    --so-field: #232323;
+    --so-field-line: #6b6b6b;
     --so-ground: #0b0b0b;
     --so-info: #70b8ff;
     --so-info-soft: rgb(112 184 255 / .12);
@@ -169,9 +191,11 @@
     --so-on-accent: #0a0a0a;
     --so-on-signal: #0a0a0a;
     --so-overlay: rgb(0 0 0 / .6);
+    --so-overlay-line: #4a4a4a;
     --so-paper: #161616;
     --so-pill-shadow: 0px 0px 0px 1px #2a2a2a, 0px 1px 2px 0px rgb(0 0 0 / .5);
     --so-raised: #1c1c1c;
+    --so-scrim: rgb(0 0 0 / .5);
     --so-scroll: #333333;
     --so-selection: #3a3a3a;
     --so-shadow-overlay: 0px 0px 0px 1px #2e2e2e, 0px 24px 48px -12px rgb(0 0 0 / .7);
@@ -195,8 +219,12 @@
   --so-accent-hover: #ffffff;
   --so-accent-text: #ededed;
   --so-code-bg: #111111;
+  --so-composer: #242424;
+  --so-composer-control: #333333;
   --so-danger: #ff977d;
   --so-danger-soft: rgb(255 151 125 / .12);
+  --so-field: #232323;
+  --so-field-line: #6b6b6b;
   --so-ground: #0b0b0b;
   --so-info: #70b8ff;
   --so-info-soft: rgb(112 184 255 / .12);
@@ -214,9 +242,11 @@
   --so-on-accent: #0a0a0a;
   --so-on-signal: #0a0a0a;
   --so-overlay: rgb(0 0 0 / .6);
+  --so-overlay-line: #4a4a4a;
   --so-paper: #161616;
   --so-pill-shadow: 0px 0px 0px 1px #2a2a2a, 0px 1px 2px 0px rgb(0 0 0 / .5);
   --so-raised: #1c1c1c;
+  --so-scrim: rgb(0 0 0 / .5);
   --so-scroll: #333333;
   --so-selection: #3a3a3a;
   --so-shadow-overlay: 0px 0px 0px 1px #2e2e2e, 0px 24px 48px -12px rgb(0 0 0 / .7);

package/dist/discord-settings.js

@@ -1,13 +1,17 @@
 import { html } from "./html.js";
 import { loadDiscordCredentials } from "./discord-api.js";
-import { chatSettingsHtml } from "./chat-settings-page.js";
+import { chatSecretRow, chatSettingsHtml } from "./chat-settings-page.js";
 export function discordSettingsHtml(store, dir, options = {}) {
     return chatSettingsHtml(store, dir, options, {
         provider: "discord",
         label: "Discord",
         credentials: loadDiscordCredentials(dir),
-        setup: html `<details open><summary>Create your Discord app</summary><ol><li><a href="https://discord.com/developers/applications" target="_blank" rel="noopener noreferrer">Create an application</a>, then copy its token from the Bot page.</li><li>Keep the Interactions Endpoint URL empty and privileged intents off.</li><li>Under Installation, enable Guild Install with the bot scope and no server permissions. Use its install link to add it to your server, then open a direct message to the bot.</li></ol></details>`,
-        connect: password => html `<label>Bot token<input style="min-height:44px" type="password" name="bot-token" autocomplete="off" required></label>${password}<p class="meta">The token stays on this installation. Next, pair your own Discord account.</p><button type="submit">Connect Discord</button>`,
-        access: html `<p>Private messages and replies use your Toolroll permissions. Shared channels are not supported. Secure review links use this installation’s configured HTTPS console address.</p><p>The worker connects out to Discord. It does not need a public webhook or a Tailscale account.</p>`,
+        intro: "Manage projects and review results in a private Discord conversation.",
+        steps: html `<ol class="k-note"><li><a class="k-link" href="https://discord.com/developers/applications" target="_blank" rel="noopener noreferrer">Create an application</a>, then copy its token from the Bot page.</li><li>Keep the Interactions Endpoint URL empty and privileged intents off.</li><li>Under Installation, enable Guild Install with the bot scope and no server permissions. Use its install link to add it to your server, then open a direct message to the bot.</li></ol>`,
+        fields: chatSecretRow({ id: "discord-bot-token", name: "bot-token", label: "Bot token" }),
+        fieldsNote: "The token stays on this installation. Next, pair your own Discord account.",
+        pairWhere: "in a direct message to your Toolroll Discord app",
+        tryLine: html `Try “What needs my attention?” or “Show the evidence for the latest result.”`,
+        access: html `<p class="k-note">Private messages and replies use your Toolroll permissions. Shared channels are not supported. Secure review links use this installation’s configured HTTPS console address.</p><p class="k-note">Toolroll connects out to Discord. It does not need a public webhook or a Tailscale account.</p>`,
     });
 }

package/dist/export-ui.d.ts

@@ -1,9 +1,11 @@
 /**
- * Settings → Data (v105): an instance operator downloads everything Standing
- * Orders knows as one .zip. One form: the password, typed again, and a button.
+ * Settings → Data (v105): an instance operator downloads everything Toolroll
+ * knows as one .zip: the password (when the rules ask for it) and a button.
+ * Built from the revamp kit; the Settings frame adds the title.
  */
 import { type Html } from "./html.js";
-export declare const EXPORT_CSS: string;
-export declare function dataExportHtml(notice: {
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export declare const EXPORT_CSS = "";
+export declare function dataExportHtml(said: {
     problem?: string | null;
 }): Html;

package/dist/export-ui.js

@@ -1,11 +1,21 @@
 /**
- * Settings → Data (v105): an instance operator downloads everything Standing
- * Orders knows as one .zip. One form: the password, typed again, and a button.
+ * Settings → Data (v105): an instance operator downloads everything Toolroll
+ * knows as one .zip: the password (when the rules ask for it) and a button.
+ * Built from the revamp kit; the Settings frame adds the title.
  */
-import { html, postForm, reauth } from "./html.js";
-export const EXPORT_CSS = `.data-export{max-width:720px;min-width:0}.data-export label{display:grid;gap:4px;margin:14px 0 0;font-size:.875rem}` +
-    `.data-export input[type=password]{width:100%;max-width:360px;box-sizing:border-box}.data-export button[type=submit]{margin-top:14px;min-height:44px;white-space:nowrap}`;
-export function dataExportHtml(notice) {
-    const note = notice.problem ? html `<p class="problem" role="alert">${notice.problem}</p>` : "";
-    return html `<section class="data-export">${note}<p>Everything Toolroll knows, as one .zip: projects, tasks, runs and cost, the action ledger, evidence packs, chats, flows, subagents and settings. Passwords, keys and tokens are never included.</p>${postForm("/settings/data", html `${reauth(html `<label>Your Toolroll password<input type="password" name="password" autocomplete="current-password" required></label>`)}<button type="submit">Download export</button>`)}<p class="meta">The same export from the command line: <code>toolroll export --out &lt;path&gt; [--zip]</code></p></section>`;
+import { html, joinHtml } from "./html.js";
+import { codeLine, note, notice, settingsSection } from "./server/kit.js";
+import { kitSectionForm } from "./settings-kit.js";
+/** The page is kit pieces now; nothing of the old look is left. Kept as an export for the shared stylesheet. */
+export const EXPORT_CSS = "";
+export function dataExportHtml(said) {
+    return settingsSection({ id: "data-export", title: "Download everything",
+        lead: "Everything Toolroll knows, as one .zip: projects, tasks, runs and cost, the action ledger, evidence packs, chats, flows, subagents and settings. Passwords, keys and tokens are never included.",
+        body: joinHtml([
+            said.problem ? notice(said.problem) : "",
+            // The answer is a download, not a page: post as a navigation.
+            kitSectionForm({ proof: "data", action: "/settings/data", id: "data-form", download: true, save: { label: "Download export" }, body: html `` }),
+            note("The same export from the command line:"),
+            codeLine("toolroll export --out <path> [--zip]"),
+        ]) });
 }

package/dist/flow-changed.d.ts

@@ -0,0 +1,14 @@
+import type { Store } from "./store.js";
+export type FlowChange = {
+    flow: number;
+} | {
+    script: {
+        repo: string;
+        name: string;
+    };
+};
+/**
+ * Run `write` (the change itself) and end what it ends, all in one transaction. `write` answers whether it changed
+ * anything; when it didn't, nothing else happens. Returns what `write` returned.
+ */
+export declare function flowChanged<T>(store: Store, change: FlowChange, by: string, now: Date, write: () => T, changed?: (result: T) => boolean): T;

package/dist/flow-changed.js

@@ -0,0 +1,53 @@
+/**
+ * The one road for a change to what a flow runs: its drawing saved, or a script one of its zones runs saved or removed.
+ * Every approval a person gave for the flow as it was ends here, in the same transaction as the write, with its ledger
+ * line, so the flow page, `flows show` and chat all say it ended and why:
+ *  - "Runs on its own" (flow-unattended.ts): its grants end ("flow changed" / "script changed"), and the work they
+ *    pre-authorized falls back to a person.
+ *  - Browser use (flow-browser.ts): its approval seals the drawing and each browser zone's script, so the change itself
+ *    stops it standing (browserStanding re-proves at every launch). Here it is said once in the ledger, for each
+ *    flow whose approval stood before the write and doesn't after; the page shows it as expired with the reason.
+ * Nothing here widens anything: it only ends approvals.
+ */
+import { browserViewOf } from "./flow-browser.js";
+import { endUnattendedGrants } from "./flow-unattended.js";
+/** The flows a change reaches: the flow itself, or every flow in the script's project with a zone that runs it. */
+function flowsOf(store, change) {
+    if ("flow" in change) {
+        const flow = store.getFlow(change.flow);
+        return flow === null ? [] : [flow];
+    }
+    return store.listFlows([change.script.repo]).filter(flow => {
+        try {
+            const drawn = JSON.parse(flow.definitionJson);
+            return (drawn.stages ?? []).some(stage => stage.kind === "check" && stage.script === change.script.name);
+        }
+        catch {
+            return false;
+        }
+    });
+}
+/**
+ * Run `write` (the change itself) and end what it ends, all in one transaction. `write` answers whether it changed
+ * anything; when it didn't, nothing else happens. Returns what `write` returned.
+ */
+export function flowChanged(store, change, by, now, write, changed = result => result === true) {
+    return store.transact(() => {
+        const before = new Map(flowsOf(store, change).map(flow => [flow.id, browserViewOf(store, flow)?.status === "allowed"]));
+        const result = write();
+        if (!changed(result))
+            return result;
+        if ("flow" in change)
+            endUnattendedGrants(store, { flow: change.flow }, by, "flow changed", now);
+        else
+            endUnattendedGrants(store, { script: change.script }, by, "script changed", now);
+        for (const [id, stood] of before) {
+            const flow = store.getFlow(id);
+            if (!stood || flow === null || browserViewOf(store, flow)?.status === "allowed")
+                continue;
+            store.recordAction({ at: now.toISOString(), actor: by, repo: flow.repo, taskId: null, runId: null, source: "policy", action: "flow browser use: ended", outcome: "ended",
+                detail: `${flow.name} (flow #${flow.id}) · ${"flow" in change ? "the flow changed" : `the ${change.script.name} script changed`}` });
+        }
+        return result;
+    });
+}