makersclaw 0.3.2 → 0.5.1

package/templates/next/files/components/ui/sheet.jsx

@@ -20,6 +20,9 @@ import { Checkbox, Input } from "./field";
 //           press outside still close it. Give it `label`.
 //   label   the dialog's name for a screen reader when no `title` shows
 //
+// A field with autoFocus inside it takes focus once the sheet is open
+// (otherwise the browser gives it to the first control: Close).
+//
 // Confirm below is the "delete this?" case — never window.confirm().
 
 const SIDES = {
@@ -33,6 +36,37 @@ const SIDES = {
   bottom: "inset-x-0 top-auto bottom-0 w-full max-w-none max-h-[85dvh] rounded-t-xl border-t",
 };
 
+// autoFocus inside a Sheet. React focuses an autoFocus field as the field
+// mounts, and the dialog opens after that, in the effect below: a field
+// mounted with the sheet, or long before it (a sheet's body is rendered
+// while it is closed), was focused inside a closed dialog, where focus
+// goes nowhere. showModal() then focused the first thing it could, the
+// header's Close button, and typing in "New piece" went nowhere
+// (weekly-content-report, 2026-09-23; CLAW-FIXES #18). So once it is
+// open, the Sheet puts focus where a field asked for it.
+//
+// Which field: React renders no autofocus attribute in the browser. It
+// keeps a host element's props on the element, under "__reactProps$…"
+// (react-dom's own key since React 17; test:app holds the installed
+// react-dom to that name), so that is read, for the elements React
+// autofocuses. The attribute counts too: a server-rendered field has it.
+const AUTOFOCUSABLE = "input, textarea, select, button, [autofocus]";
+
+function reactProps(node) {
+  for (const key of Object.keys(node)) if (key.startsWith("__reactProps$")) return node[key];
+  return null;
+}
+
+/** The field in `dialog` that asked for focus (autoFocus), or null — never
+ *  one inside a sheet nested in this one, never a disabled one. */
+export function autoFocusTarget(dialog) {
+  for (const node of dialog.querySelectorAll(AUTOFOCUSABLE)) {
+    if (node.disabled || node.closest("dialog") !== dialog) continue;
+    if (node.hasAttribute("autofocus") || reactProps(node)?.autoFocus) return node;
+  }
+  return null;
+}
+
 export function Sheet({ open, onClose, title, description, side = "end", footer, bare = false, label, className, children }) {
   const ref = useRef(null);
   const titleId = useId();
@@ -41,8 +75,10 @@ export function Sheet({ open, onClose, title, description, side = "end", footer,
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    if (open && !el.open) el.showModal();
-    else if (!open && el.open) el.close();
+    if (open && !el.open) {
+      el.showModal();
+      autoFocusTarget(el)?.focus();
+    } else if (!open && el.open) el.close();
   }, [open]);
 
   return (

package/templates/next/files/components/ui/toggle.jsx

@@ -88,13 +88,24 @@ const SEG = {
   sm: { track: "p-0.5", item: "min-h-8 px-2.5", square: "min-h-8 min-w-8 px-0", glyph: 16 },
 };
 
+// The group is a scroll container, so its row never makes its parent
+// wider (in a plain grid it pushed the page wider on a phone, 0.5.0).
+// That also takes away the minimums a flex item gets from its content,
+// so each comes back unless the className sizes that axis itself:
+// shrink-0 keeps its width in a flex row (its neighbours give way, as
+// before), min-h-min its height in a flex column.
+const FLEXES = /(?:^|\s)!?(?:w-|flex-|grow|shrink|basis-)/;
+const TALL = /(?:^|\s)!?(?:h-|min-h-|size-)/;
+
 /**
  * A row of toggles as one control, the segmented look: a muted track,
  * the pressed items raised. `type` single (exactly one pressed — pressing
  * it again keeps it; a filter that can be off is `multiple`) · multiple.
  * `value` is a string (single) or an array (multiple); `onChange` gets
  * the same shape. md is 44px tall, sm 36px. Stretches when given a width
- * (className="w-full"): the items share it.
+ * (className="w-full"): the items share it. Never wider than its
+ * container: past that it scrolls sideways inside itself (it does not
+ * wrap unless className="flex-wrap").
  *
  *   items   [{ value, label, icon?, iconOnly?, disabled? }] — `iconOnly`
  *           shows the icon alone; `label` is then what a screen reader says
@@ -157,7 +168,14 @@ export function ToggleGroup({
     <div
       role="group"
       aria-label={ariaLabel}
-      className={cx("inline-flex max-w-full gap-1 rounded-md bg-muted", s.track, disabled && "opacity-50", className)}
+      className={cx(
+        "inline-flex max-w-full gap-1 overflow-x-auto rounded-md bg-muted",
+        !FLEXES.test(className ?? "") && "shrink-0",
+        !TALL.test(className ?? "") && "min-h-min",
+        s.track,
+        disabled && "opacity-50",
+        className,
+      )}
     >
       {live.map((it, i) => {
         const on = isOn(it.value);

package/templates/next/files/lib/actions.js

@@ -43,18 +43,73 @@ function done() {
   revalidatePath("/", "layout");
 }
 
+// updated_at: a row a write changes says when. Up to 0.4.x updateRow left
+// it alone, so unless a package shipped its own trigger, "changed 3 days
+// ago", a list sorted by updated_at and the per-field merges the basics
+// apps do all read the stamp of an older write (CLAW-FIXES #22). Set only
+// where the table has the column and a write can put now() in it: a
+// timestamp, with or without a zone, that is not a view's computed column.
+// Anything else (a text or a number column of that name) stays the app's.
+// A patch that names updated_at itself wins.
+//
+// The catalog is asked once a minute per table, not on every write: a
+// drag on a board is a write, and the workspace database is across the
+// network. A minute is how long a column added meanwhile (an install
+// widening a shared table) goes unstamped.
+const STAMP = "updated_at";
+const STAMP_TYPES = new Set([1114, 1184]); // timestamp, timestamptz
+const STAMP_TTL_MS = 60_000;
+const stamps = new Map(); // quoted source → { at, has }
+
+async function stampsUpdatedAt(source) {
+  const table = ident(source);
+  const known = stamps.get(table);
+  if (known && Date.now() - known.at < STAMP_TTL_MS) return known.has;
+  let has = false;
+  try {
+    // to_regclass reads the quoted name as the UPDATE does: the same
+    // search_path, the same case. A domain counts as its base type.
+    const { rows } = await query(
+      `SELECT coalesce(nullif(t.typbasetype, 0), t.oid) AS type,
+              pg_column_is_updatable(a.attrelid, a.attnum, false) AS updatable
+       FROM pg_attribute a JOIN pg_type t ON t.oid = a.atttypid
+       WHERE a.attrelid = to_regclass($1) AND a.attname = $2 AND a.attnum > 0 AND NOT a.attisdropped`,
+      [table, STAMP],
+    );
+    has = Boolean(rows[0]?.updatable) && STAMP_TYPES.has(Number(rows[0]?.type));
+  } catch (error) {
+    // Never fail the write for its stamp; ask again next time.
+    console.error(`[actions] could not read ${source}'s columns: ${error?.message ?? error}`);
+    return false;
+  }
+  stamps.set(table, { at: Date.now(), has });
+  return has;
+}
+
+/** ", updated_at = now()" for an UPDATE of `source` that sets `cols`,
+ *  when the table stamps it and the write does not set it itself; else "". */
+async function stampFor(source, cols) {
+  return !cols.includes(STAMP) && (await stampsUpdatedAt(source)) ? `, ${ident(STAMP)} = now()` : "";
+}
+
+/** The SET text for `cols` (from $2 on), stamped (above). */
+async function setClause(source, cols) {
+  return cols.map((c, i) => `${ident(c)} = $${i + 2}`).join(", ") + (await stampFor(source, cols));
+}
+
 function fail(error) {
   const message = error?.message ?? String(error);
   console.error(`[actions] write failed: ${message}`);
   return { ok: false, error: message };
 }
 
-/** Change columns of one row. `patch` is { column: value }. */
+/** Change columns of one row. `patch` is { column: value }; updated_at
+ *  becomes now() when the table has one (above). */
 export async function updateRow({ source, idColumn = "id", id, patch, surface, action = "edited", detail, data }) {
   try {
     const cols = Object.keys(patch ?? {}).filter((c) => patch[c] !== undefined);
     if (!cols.length) return { ok: false, error: "nothing to change" };
-    const sets = cols.map((c, i) => `${ident(c)} = $${i + 2}`).join(", ");
+    const sets = await setClause(source, cols);
     const { rowCount } = await query(
       `UPDATE ${ident(source)} SET ${sets} WHERE ${ident(idColumn)} = $1`,
       [id, ...cols.map((c) => patch[c])],
@@ -139,7 +194,8 @@ export async function deleteRow({ source, idColumn = "id", id, surface, detail }
  * ON CONFLICT, because a settings table made with the `sql` verb usually
  * has a plain `key text` column and Postgres rejects ON CONFLICT without a
  * unique index on it. JSON mode sets the key inside the jsonb `column` of
- * the row `id` in `source`.
+ * the row `id` in `source`. An update stamps updated_at as updateRow's
+ * does; the insert leaves it to the column's default.
  */
 export async function saveSetting({
   mode = "table",
@@ -156,15 +212,17 @@ export async function saveSetting({
   try {
     if (!key) return { ok: false, error: "no key" };
     if (mode === "json") {
+      const stamp = await stampFor(source, [column]);
       const { rowCount } = await query(
-        `UPDATE ${ident(source)} SET ${ident(column)} = jsonb_set(COALESCE(${ident(column)}, '{}'::jsonb), $2::text[], $3::jsonb, true) WHERE ${ident(idColumn)} = $1`,
+        `UPDATE ${ident(source)} SET ${ident(column)} = jsonb_set(COALESCE(${ident(column)}, '{}'::jsonb), $2::text[], $3::jsonb, true)${stamp} WHERE ${ident(idColumn)} = $1`,
         [id, [key], JSON.stringify(value ?? null)],
       );
       if (!rowCount) return { ok: false, error: "row not found" };
     } else {
       const stored = typeof value === "object" && value !== null ? JSON.stringify(value) : value;
+      const stamp = await stampFor(source, [valueColumn]);
       const { rowCount } = await query(
-        `UPDATE ${ident(source)} SET ${ident(valueColumn)} = $2 WHERE ${ident(keyColumn)} = $1`,
+        `UPDATE ${ident(source)} SET ${ident(valueColumn)} = $2${stamp} WHERE ${ident(keyColumn)} = $1`,
         [key, stored],
       );
       if (!rowCount) {

package/templates/next/files/lib/claw.js

@@ -3,18 +3,24 @@
 // (docs/ARTIFACT-CONTRACTS.md §5). It is reachable from the BROWSER only —
 // the grant cookie is the identity — so everything here is client-side.
 //
-// Every call resolves; nothing throws. A 404 or a network error means the
-// gateway has no such route yet, and comes back as `unavailable: true` so
-// a surface renders a quiet "not connected yet" state instead of breaking.
+// Every call resolves; nothing throws. A 404 that names no refusal, or a
+// network error, means the gateway has no such route yet, and comes back
+// as `unavailable: true` so a surface renders a quiet "not connected yet"
+// state instead of breaking. A 404 with a `code` is a route that exists
+// saying no (notFound, below).
 //
-// An app calls four of these. `me` (identity, status) and `events`
-// (errors) are plumbing. `chat` and `cancel` are COMMISSIONING — work the
-// founder asks for from inside the app, streamed back so they can watch
-// it (SOP §2.3); lib/platform.js wraps them as startJob / cancelJob and
-// lib/hooks.js as useJob. What an app still never calls is monitoring:
-// the OS draws Agent, Runs and Activity as tabs on its window. The rest
-// of the gateway's routes (§5) stay reachable through claw() /
-// clawStream() for a surface that has a real reason.
+// An app calls a handful of these. `me` (identity, status, the desk's
+// origin) and `events` (errors) are plumbing. `ask` and `requests` are
+// ASKING — a screen asks its agent for work, with a row as context, and
+// the conversation lives in the desk's agent column, not in the app;
+// lib/platform.js wraps them as ask / requests / stopRequest and
+// lib/hooks.js as useJob and useRequests. `chat` and `cancel` are the
+// 0.3.x door to the same work, streamed into the app (startJob /
+// cancelJob): kept for a claw that has no `ask` yet. What an app still
+// never calls is monitoring: the OS draws Agent, Runs and Activity as
+// tabs on its window. The rest of the gateway's routes (§5) stay
+// reachable through claw() / clawStream() for a surface that has a real
+// reason.
 
 /** The prefix the app is served under. The <html> attribute is set by the
  *  running server, so it wins over the value inlined at build time. */
@@ -59,20 +65,121 @@ export function errorSource() {
   return PRELAUNCH.has(clawStatus()) ? "preview" : "runtime";
 }
 
-async function readError(res) {
+// ---------------------------------------------------------------------------
+// The desk around the frame
+//
+// The app runs in a frame on the founder's desk, and on its own host in
+// production, so nothing but a message crosses to the desk. A screen that
+// asks its agent (lib/platform.js, ask) tells the desk which request to
+// open in its agent column; the desk checks the message came from this
+// frame and this app's origin before it acts (claw's web/src/os/
+// frame-grant.ts, openRequestMessage).
+//
+// The message goes to the desk's exact origin, never "*": "*" hands the
+// request and session ids to whatever page happens to frame the app.
+// The origin comes from the gateway (`desk_origin` on _claw/me and on
+// every ask) and lives on <html data-claw-desk-origin> the way the status
+// does, so any code that asks can post without a component's state.
+
+/** The message the app posts to the desk: open this request's
+ *  conversation in the agent column. */
+export const OPEN_REQUEST_MESSAGE = "claw:open-request";
+
+/** An http(s) origin, or null. A URL with a path is cut to its origin; a
+ *  "*", a relative path or anything else unparseable is refused. */
+function originOf(value) {
+  if (typeof value !== "string" || !value) return null;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "https:" && url.protocol !== "http:") return null;
+    return url.origin;
+  } catch {
+    return null;
+  }
+}
+
+/** Keep the desk's origin, as last heard from the gateway. Anything that
+ *  is not an origin clears it, as a missing status clears the status. */
+export function publishDesk(origin) {
+  if (typeof document === "undefined") return;
+  const clean = originOf(origin);
+  if (clean) document.documentElement.dataset.clawDeskOrigin = clean;
+  else delete document.documentElement.dataset.clawDeskOrigin;
+}
+
+export function deskOrigin() {
+  if (typeof document === "undefined") return null;
+  return originOf(document.documentElement.dataset.clawDeskOrigin);
+}
+
+function currentWindow() {
+  return typeof window === "undefined" ? undefined : window;
+}
+
+/** Is the page inside a frame? Only then is there a desk to talk to. */
+function framed(win) {
+  return Boolean(win && win.parent && win.parent !== win);
+}
+
+/**
+ * Ask the desk to open a request's conversation in its agent column.
+ * Posts only when the app is framed and the desk's origin is known, and
+ * only to that origin. → true when the message went.
+ */
+export function openInDesk({ requestId, sessionId } = {}, win = currentWindow()) {
+  const origin = deskOrigin();
+  if (!requestId || !origin || !framed(win)) return false;
+  try {
+    win.parent.postMessage(
+      { type: OPEN_REQUEST_MESSAGE, request_id: String(requestId), session_id: sessionId ? String(sessionId) : null },
+      origin,
+    );
+    return true;
+  } catch {
+    return false; // a parent that will not take messages
+  }
+}
+
+/** Is this message from the desk, of this type? Only the window around
+ *  the frame may send one — app/frame.js isDeskEscape, for any type. */
+export function isDeskMessage(event, type, win = currentWindow()) {
+  return Boolean(framed(win) && event?.source === win.parent && event?.data?.type === type);
+}
+
+/** A refusal's words, and its `code` when the gateway names one
+ *  (`not_your_thread`, `needs_answer`, …): the code is what a caller
+ *  branches on, the words are what it shows. */
+async function readFailure(res) {
   const text = await res.text().catch(() => "");
+  let parsed = null;
   try {
-    const parsed = JSON.parse(text);
-    return parsed.error || parsed.message || text || res.statusText;
+    parsed = JSON.parse(text);
   } catch {
-    return text || res.statusText || `HTTP ${res.status}`;
+    /* not JSON: the words are the text */
+  }
+  if (parsed && typeof parsed === "object") {
+    const error = parsed.error || parsed.message || text || res.statusText;
+    return typeof parsed.code === "string" && parsed.code ? { error, code: parsed.code } : { error };
   }
+  return { error: text || res.statusText || `HTTP ${res.status}` };
+}
+
+/** A 404 is two different answers. With a `code` it is a route that
+ *  exists refusing (_claw/ask's `unknown_thread`): an error like any
+ *  other. Without one it is a gateway that has no such route — a claw
+ *  from before it, or no gateway at all — and comes back `unavailable`,
+ *  as every 404 did before codes existed. useJob reads that difference
+ *  to choose between _claw/ask and the 0.3.x _claw/chat. */
+async function notFound(res) {
+  const { error, code } = await readFailure(res);
+  if (code) return { ok: false, status: 404, error, code, unavailable: false };
+  return { ok: false, status: 404, error: "not available yet", unavailable: true };
 }
 
 /**
  * claw("me") / claw("agent", { method: "PATCH", body: {...} })
  *   → { ok: true, status, data }
- *   → { ok: false, status, error, unavailable }
+ *   → { ok: false, status, error, unavailable, code? }
  */
 export async function claw(path, { method = "GET", body, signal } = {}) {
   let res;
@@ -92,12 +199,8 @@ export async function claw(path, { method = "GET", body, signal } = {}) {
     if (error?.name === "AbortError") return { ok: false, status: 0, error: "aborted", aborted: true };
     return { ok: false, status: 0, error: "not reachable", unavailable: true };
   }
-  if (res.status === 404) {
-    return { ok: false, status: 404, error: "not available yet", unavailable: true };
-  }
-  if (!res.ok) {
-    return { ok: false, status: res.status, error: await readError(res), unavailable: false };
-  }
+  if (res.status === 404) return notFound(res);
+  if (!res.ok) return { ok: false, status: res.status, ...(await readFailure(res)), unavailable: false };
   const text = await res.text().catch(() => "");
   let data = null;
   if (text) {
@@ -155,12 +258,8 @@ export async function clawStream(path, body, onEvent, { signal } = {}) {
     if (error?.name === "AbortError") return { ok: false, status: 0, error: "aborted", aborted: true };
     return { ok: false, status: 0, error: "not reachable", unavailable: true };
   }
-  if (res.status === 404) {
-    return { ok: false, status: 404, error: "not available yet", unavailable: true };
-  }
-  if (!res.ok) {
-    return { ok: false, status: res.status, error: await readError(res), unavailable: false };
-  }
+  if (res.status === 404) return notFound(res);
+  if (!res.ok) return { ok: false, status: res.status, ...(await readFailure(res)), unavailable: false };
   if (!res.body) return { ok: false, status: res.status, error: "empty stream" };
 
   const reader = res.body.getReader();

package/templates/next/files/lib/data.js

@@ -24,7 +24,10 @@ export function orderClause(orderBy, fallback) {
 }
 
 /** Dates and other non-JSON values become plain so rows can cross into
- *  client components. pg already returns bigint/numeric as strings. */
+ *  client components. pg already returns bigint/numeric as strings, and a
+ *  `date` column as its day ("2026-09-28", lib/db.js), which passes
+ *  through untouched: only a timestamp is still a Date here, and it
+ *  becomes its ISO instant. */
 export function plain(row) {
   const out = {};
   for (const [k, v] of Object.entries(row)) {

package/templates/next/files/lib/db.js

@@ -1,4 +1,21 @@
-import { Pool } from "pg";
+import { Pool, types } from "pg";
+
+// A `date` column is a day on a wall calendar, not an instant, so it is
+// read as its text: "2026-09-28", the same day for every reader, the
+// kit's date format (components/ui/calendar.jsx), and what a save writes
+// back unchanged. pg's own parser made it a Date at the SERVER's
+// midnight: lib/data.js sent that on as an ISO timestamp, and a server
+// east of UTC wrote "2026-09-27T22:00:00.000Z" for the 28th, a browser
+// west of UTC showed the 27th, and a form that saved what it showed
+// stored the day before (CLAW-FIXES #21, three store builds). Until 0.5.0
+// it was a Date; a date[] column is text the same way. Registered on
+// pg's shared types, so a pool made before this module loaded again (a
+// dev server's hot reload keeps it on globalThis) reads days too.
+const DATE = 1082;
+const DATE_ARRAY = 1182;
+const TEXT_ARRAY = 1009;
+types.setTypeParser(DATE, (text) => text);
+types.setTypeParser(DATE_ARRAY, types.getTypeParser(TEXT_ARRAY));
 
 // One pool per process; DATABASE_URL comes from this directory's .env,
 // written by app_database and sourced by product_run at start.