@mccaskie-labs/workbench-ai 0.3.1 → 0.4.1

package/dist/reply-ui.js

@@ -0,0 +1,153 @@
+// '@mccaskie-labs/workbench-ai/reply-ui': the box a person copies a draft
+// from (docs/capabilities/04-reply-drafter.md). renderReplyBox draws the
+// draft, Copy reply and Write it again; REPLY_SCRIPT (under the page's nonce)
+// makes Copy work with the Clipboard API and, when the browser refuses it,
+// selects the text so the person can copy it themselves. Nothing is ever sent
+// from here: the person pastes the reply.
+//
+// Every element carries a wb-reply-* class (REPLY_STYLES), so a project
+// restyles the box from its own CSS.
+export { REPLY_STYLES } from "./styles.js";
+/** The box's words in English, Tagalog and Taglish. A project's own strings win (`ui.wbreply.<key>`). */
+export const REPLY_WORDS = {
+    en: {
+        copy: "Copy reply",
+        copied: "Copied",
+        selected: "Selected: press copy",
+        again: "Write it again",
+        note_label: "What to change",
+        note_hint: "Make it shorter, don't mention the pool…",
+        check: "Check this one before you send it:",
+        refused: "We can't draft a reply to this one. Please write it yourself.",
+        failed: "The draft didn't come through. Try again in a moment.",
+        "reason.unknown_fact": "it has a price, date or number that isn't from your details",
+        "reason.missing_fact": "something it needed is missing (shown as ___)",
+        "reason.too_long": "it's long",
+        "reason.ambiguous_incoming": "the message was hard to read",
+        "reason.language_unsure": "we weren't sure which language to reply in",
+        "reason.never_rule": "it says something your replies never say",
+        "reason.contradicts_fact": "it may say the date is free when it isn't",
+    },
+    tl: {
+        copy: "Kopyahin ang sagot",
+        copied: "Nakopya na",
+        selected: "Napili na: pindutin ang kopya",
+        again: "Isulat ulit",
+        note_label: "Ano ang babaguhin",
+        note_hint: "Paikliin, huwag banggitin ang pool…",
+        check: "Tingnan muna ito bago ipadala:",
+        refused: "Hindi namin ito masasagot. Pakisulat na lang po ninyo.",
+        failed: "Hindi dumating ang sagot. Subukan ulit mamaya.",
+        "reason.unknown_fact": "may presyo, petsa o numero na wala sa inyong detalye",
+        "reason.missing_fact": "may kulang na detalye (makikita bilang ___)",
+        "reason.too_long": "mahaba ito",
+        "reason.ambiguous_incoming": "mahirap basahin ang mensahe",
+        "reason.language_unsure": "hindi kami sigurado kung anong wika ang gagamitin",
+        "reason.never_rule": "may sinabi itong hindi dapat sabihin",
+        "reason.contradicts_fact": "baka sinasabi nitong bakante ang petsa kahit hindi",
+    },
+    taglish: {
+        copy: "Copy reply",
+        copied: "Copied na",
+        selected: "Naka-select na: pindutin ang copy",
+        again: "Isulat ulit",
+        note_label: "Ano ang babaguhin",
+        note_hint: "Paikliin, huwag i-mention ang pool…",
+        check: "I-check muna ito bago i-send:",
+        refused: "Hindi namin ma-draft ang reply dito. Pakisulat na lang po.",
+        failed: "Hindi dumating ang draft. Try ulit mamaya.",
+        "reason.unknown_fact": "may price, date o number na wala sa details ninyo",
+        "reason.missing_fact": "may kulang na detail (makikita bilang ___)",
+        "reason.too_long": "mahaba ito",
+        "reason.ambiguous_incoming": "mahirap basahin ang message",
+        "reason.language_unsure": "hindi kami sure kung anong language ang gagamitin",
+        "reason.never_rule": "may sinabi itong hindi dapat sabihin",
+        "reason.contradicts_fact": "baka sinasabi nitong available ang date kahit hindi",
+    },
+};
+const esc = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+function wordsFor(o) {
+    const own = REPLY_WORDS[o.language ?? "en"];
+    return (key) => o.words?.(`ui.wbreply.${key.replace(".", "_")}`) ?? own[key];
+}
+const isDraft = (x) => !!x && typeof x === "object" && typeof x.text === "string" && Array.isArray(x.check_reasons);
+/**
+ * The box for a draft, or for why there is none: pass what `ai.reply` gave, or
+ * the error it threw. A refusal by the content rules or by Claude shows "We
+ * can't draft a reply to this one"; any other error, "Try again".
+ */
+export function renderReplyBox(result, opts = {}) {
+    const w = wordsFor(opts);
+    if (!isDraft(result)) {
+        const code = result?.code;
+        const refused = code === "content_refused" || code === "refused";
+        return `<section class="wb-reply" data-wb-reply><p class="wb-reply-error" role="alert">${esc(w(refused ? "refused" : "failed"))}</p></section>`;
+    }
+    const parts = [`<section class="wb-reply" data-wb-reply lang="${result.language === "en" ? "en" : "fil"}">`];
+    if (result.needs_human_check && result.check_reasons.length) {
+        parts.push(`<p class="wb-reply-check" role="note">${esc(w("check"))} ${esc(result.check_reasons.map((r) => w(`reason.${r}`)).join("; "))}.</p>`);
+    }
+    const id = `wbreply-${result.workbench.request_id.replace(/[^A-Za-z0-9_-]/g, "")}`;
+    parts.push(`<textarea class="wb-reply-text" id="${id}" rows="6" spellcheck="true" aria-label="${esc(w("copy"))}">${esc(result.text)}</textarea>`);
+    parts.push(`<div class="wb-reply-actions"><button type="button" class="wb-reply-copy" data-wb-reply-copy aria-controls="${id}">${esc(w("copy"))}</button><span class="wb-reply-status" role="status" aria-live="polite" data-copied="${esc(w("copied"))}" data-selected="${esc(w("selected"))}"></span></div>`);
+    if (opts.againAction) {
+        const hidden = Object.entries(opts.hidden ?? {})
+            .map(([k, v]) => `<input type="hidden" name="${esc(k)}" value="${esc(v)}">`)
+            .join("");
+        parts.push(`<form class="wb-reply-again" method="post" action="${esc(opts.againAction)}">${hidden}<input type="hidden" name="previous" value="${esc(result.text)}"><input class="wb-reply-note" name="note" maxlength="300" aria-label="${esc(w("note_label"))}" placeholder="${esc(w("note_hint"))}"><button type="submit" class="wb-reply-again-button">${esc(w("again"))}</button></form>`);
+    }
+    parts.push("</section>");
+    return parts.join("");
+}
+/** Copies exactly `text`; when the Clipboard API is missing or refused, selects it instead. */
+export async function copyReply(text, deps) {
+    try {
+        if (!deps.clipboard)
+            throw new Error("no clipboard");
+        await deps.clipboard.writeText(text);
+        return "copied";
+    }
+    catch {
+        deps.select();
+        return "selected";
+    }
+}
+/** Runs on the page: wires every box's Copy button. Stringified into REPLY_SCRIPT, so it uses nothing from outside. */
+export function mountReplyBoxes(copy) {
+    for (const box of Array.from(document.querySelectorAll("[data-wb-reply]"))) {
+        const button = box.querySelector("[data-wb-reply-copy]");
+        const area = box.querySelector("textarea");
+        const status = box.querySelector("[role=status]");
+        if (!button || !area || !status)
+            continue;
+        let timer;
+        button.addEventListener("click", () => {
+            void copy(area.value, {
+                clipboard: navigator.clipboard,
+                select: () => {
+                    area.focus();
+                    area.select();
+                    area.setSelectionRange(0, area.value.length);
+                },
+            }).then((how) => {
+                status.textContent = status.dataset[how] ?? "";
+                button.classList.toggle("wb-reply-copied", how === "copied");
+                if (timer)
+                    clearTimeout(timer);
+                timer = setTimeout(() => {
+                    status.textContent = "";
+                    button.classList.remove("wb-reply-copied");
+                }, 4000);
+            });
+        });
+    }
+}
+/**
+ * The box's script: put it in the page under its nonce, after the boxes.
+ *
+ * It is the functions' own source, so whatever bundles the app's Worker shapes
+ * it. Wrangler's esbuild keeps function names by wrapping them in `__name(…)`,
+ * a helper that exists only in the bundle, so the script brings a stand-in of
+ * its own: without it the box's buttons do nothing.
+ */
+export const REPLY_SCRIPT = `(function(){var __name=function(f){return f};(${mountReplyBoxes.toString()})(${copyReply.toString()});})();`;

package/dist/styles.d.ts

@@ -0,0 +1,33 @@
+/** One CSS custom property the rules read, with its default. */
+export interface StyleVariable {
+    /** `--wb-<tool>-<what>`. */
+    name: string;
+    value: string;
+    about: string;
+}
+/** A rule for a class in another state, or for an element inside it. */
+export interface StyleState {
+    selector: string;
+    about: string;
+    css: string;
+}
+/** One class the tool puts on an element, with its default rule. */
+export interface StyleClass {
+    name: string;
+    element: string;
+    about: string;
+    css: string;
+    states?: readonly StyleState[];
+}
+/** Every class and variable the tool draws with (the same shape as workbench-ui's ToolStyles). */
+export interface ToolStyles {
+    format: 1;
+    tool: string;
+    package: string;
+    title: string;
+    prefix: string;
+    variables: readonly StyleVariable[];
+    classes: readonly StyleClass[];
+}
+/** The style hooks of the reply box (renderReplyBox, from '@mccaskie-labs/workbench-ai/reply-ui'). */
+export declare const REPLY_STYLES: ToolStyles;

package/dist/styles.js

@@ -0,0 +1,86 @@
+// The look the reply box starts with (docs/capabilities-manifest.md §10).
+// Every element renderReplyBox and REPLY_SCRIPT draw carries one of these
+// classes, and every class has a default rule here, so the box looks finished
+// out of the box and a project restyles it from its own CSS by the same names.
+// `npx workbench-ui styles` writes these into the project's
+// public/styles/workbench.css inside `@layer workbench`. The names are public:
+// renaming one is a breaking change.
+const v = (name) => `var(--wb-reply-${name})`;
+const focus = { selector: ":focus-visible", about: "Has focus", css: `outline:none;box-shadow:0 0 0 3px ${v("focus")}` };
+/** The style hooks of the reply box (renderReplyBox, from '@mccaskie-labs/workbench-ai/reply-ui'). */
+export const REPLY_STYLES = {
+    format: 1,
+    tool: "reply",
+    package: "@mccaskie-labs/workbench-ai",
+    title: "Reply box",
+    prefix: "wb-reply-",
+    variables: [
+        { name: "--wb-reply-text", value: "#e8e8ec", about: "Text of the draft, the buttons and the notes" },
+        { name: "--wb-reply-muted", value: "#9a9aa6", about: "Quieter text: the note box's hint, \"Copied\"" },
+        { name: "--wb-reply-surface", value: "#1b1b1f", about: "Background of the box and the draft" },
+        { name: "--wb-reply-line", value: "#33333b", about: "Borders of the box, the draft and the buttons" },
+        { name: "--wb-reply-accent", value: "#4c8dff", about: "The Copy button" },
+        { name: "--wb-reply-on-accent", value: "#ffffff", about: "Text on the Copy button" },
+        { name: "--wb-reply-warn", value: "#d9a441", about: "The edge of the \"check this one\" note" },
+        { name: "--wb-reply-focus", value: "rgba(76,141,255,.4)", about: "The ring round the field or button that has focus" },
+        { name: "--wb-reply-radius", value: "8px", about: "Corner rounding of the box, the draft and the buttons" },
+        { name: "--wb-reply-target", value: "2.75rem", about: "Least height of a button (a 44 px touch target)" },
+    ],
+    classes: [
+        {
+            name: "wb-reply",
+            element: "section",
+            about: "The whole box: the draft, Copy and Write it again",
+            css: `display:flex;flex-direction:column;gap:.6rem;max-width:36rem;padding:.75rem;color:${v("text")};background:${v("surface")};border:1px solid ${v("line")};border-radius:${v("radius")}`,
+        },
+        {
+            name: "wb-reply-check",
+            element: "p",
+            about: "\"Check this one before you send it\", and why, when the draft needs a person's eye",
+            css: `margin:0;padding:.4rem .6rem;border-left:3px solid ${v("warn")};font-size:.9rem`,
+        },
+        {
+            name: "wb-reply-text",
+            element: "textarea",
+            about: "The draft, ready to paste (it can be changed before copying)",
+            css: `box-sizing:border-box;width:100%;min-height:8rem;margin:0;padding:.6rem;font:inherit;line-height:1.5;color:${v("text")};background:${v("surface")};border:1px solid ${v("line")};border-radius:${v("radius")};resize:vertical`,
+            states: [focus],
+        },
+        { name: "wb-reply-actions", element: "div", about: "The Copy button and its status", css: "display:flex;flex-wrap:wrap;align-items:center;gap:.6rem" },
+        {
+            name: "wb-reply-copy",
+            element: "button",
+            about: "Copy reply",
+            css: `min-height:${v("target")};margin:0;padding:0 1.1rem;font:inherit;font-weight:600;color:${v("on-accent")};background:${v("accent")};border:0;border-radius:${v("radius")};cursor:pointer`,
+            states: [focus],
+        },
+        {
+            name: "wb-reply-copied",
+            element: "button",
+            about: "The Copy button just after it copied (a state class, taken off after a few seconds)",
+            css: `background:transparent;color:${v("accent")};box-shadow:inset 0 0 0 2px ${v("accent")}`,
+        },
+        { name: "wb-reply-status", element: "span", about: "\"Copied\", or \"Selected: press copy\" when the browser won't copy for the page", css: `color:${v("muted")};font-size:.9rem` },
+        {
+            name: "wb-reply-again",
+            element: "form",
+            about: "Write it again: a note and its button",
+            css: "display:flex;flex-wrap:wrap;gap:.5rem;margin:0",
+        },
+        {
+            name: "wb-reply-note",
+            element: "input",
+            about: "The note for the next draft (\"make it shorter\")",
+            css: `flex:1 1 12rem;min-height:${v("target")};box-sizing:border-box;margin:0;padding:0 .6rem;font:inherit;color:${v("text")};background:${v("surface")};border:1px solid ${v("line")};border-radius:${v("radius")}`,
+            states: [focus, { selector: "::placeholder", about: "The hint", css: `color:${v("muted")}` }],
+        },
+        {
+            name: "wb-reply-again-button",
+            element: "button",
+            about: "Write it again",
+            css: `min-height:${v("target")};margin:0;padding:0 1rem;font:inherit;color:${v("text")};background:transparent;border:1px solid ${v("line")};border-radius:${v("radius")};cursor:pointer`,
+            states: [focus],
+        },
+        { name: "wb-reply-error", element: "p", about: "Why there is no draft: \"We can't draft this one\"", css: "margin:0" },
+    ],
+};

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import type Anthropic from "@anthropic-ai/sdk";
 import type { WorkbenchEnv } from "@mccaskie-labs/workbench-config";
+import type { DraftWithTemplate, ReplyDraft, ReplyGuide, ReplyGuideName, ReplyRequest } from "./replies.ts";
 import type { OwnVoice, SpellingName, VoiceName } from "./writing.ts";
 export type SystemBlock = Anthropic.TextBlockParam;
 export type ContentBlockParam = Anthropic.ContentBlockParam;
@@ -13,6 +14,8 @@ export interface AiOptions {
     /** This install's Gateway address (`WORKBENCH_GATEWAY_URL`). There is no built-in one. */
     url: string;
     fetch?: typeof fetch;
+    /** The project's reply guides, `REPLY_GUIDES` from its generated `src/replies.generated.ts`, for `reply`. */
+    replyGuides?: Readonly<Record<string, ReplyGuide>>;
 }
 export interface TextRequest {
     /** A Workbench alias (`claude-default`, `claude-best`, `claude-fast`) or an allowlisted model id. */
@@ -131,6 +134,14 @@ export interface Ai {
     budget(): Promise<BudgetStatus>;
     /** Image generation and image search (step 4.8). The key needs the images or search scope. */
     readonly images: AiImages;
+    /**
+     * A ready-to-paste reply from facts and a reply guide (docs/capabilities/04-reply-drafter.md).
+     * The model places each fact as a token; the package fills and checks them, so a price or
+     * date the model typed fails the draft (retried once, then `needs_human_check`).
+     */
+    reply<G extends ReplyGuideName>(req: ReplyRequest<G>): Promise<ReplyDraft>;
+    /** As `reply`, with the token text the draft was filled from (what `replies pick` keeps). */
+    replyWithTemplate<G extends ReplyGuideName>(req: ReplyRequest<G>): Promise<DraftWithTemplate>;
 }
 export type AspectRatio = "1:1" | "3:2" | "2:3" | "4:3" | "3:4" | "16:9" | "9:16";
 export interface ImageGenerateRequest {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mccaskie-labs/workbench-ai",
-  "version": "0.3.1",
-  "description": "Claude through the Workbench Gateway: text, structured output, streaming and budget status, with no Anthropic key in the app. Refusals and truncations throw; createFakeAi for tests.",
+  "version": "0.4.1",
+  "description": "Claude through the Workbench Gateway: text, structured output, streaming, budget status and reply drafts whose facts are checked by code, with no Anthropic key in the app. Refusals and truncations throw; createFakeAi for tests.",
   "license": "UNLICENSED",
   "type": "module",
   "repository": {
@@ -18,6 +18,14 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./reply-ui": {
+      "types": "./dist/reply-ui.d.ts",
+      "default": "./dist/reply-ui.js"
+    },
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/styles.js"
+    },
     "./package.json": "./package.json"
   },
   "bin": {
@@ -39,13 +47,15 @@
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^1.5.0",
-    "@mccaskie-labs/workbench-config": "^0.3.0"
+    "@mccaskie-labs/workbench-config": "^0.3.0",
+    "@mccaskie-labs/workbench-country": "^0.2.1"
   },
   "peerDependencies": {
     "zod": "^4.1.0"
   },
   "devDependencies": {
     "@types/node": "24.19.2",
+    "esbuild": "0.28.2",
     "vitest": "^5.1.0",
     "zod": "4.6.7"
   }