makersclaw 0.4.0 → 0.5.2

package/templates/next/files/app/frame.js

@@ -36,9 +36,37 @@ export const ESCAPE_MESSAGE = "claw:escape";
 // ---------------------------------------------------------------------------
 // Auto-refresh
 
-/** How often the page re-renders from the server while it is shown. */
+/** How often the page re-renders from the server while it is shown: the
+ *  wait between one refresh landing and the next asking. */
 export const REFRESH_MS = 5000;
 
+/** The longest wait between two refreshes, however slow the last was. */
+export const MAX_REFRESH_MS = 60000;
+
+/** How long a refresh may stay pending before the loop stops waiting for
+ *  it: a transition a navigation overtook never reports back, and one
+ *  that never lands must not end the refreshing for good. */
+export const REFRESH_SETTLE_MS = 60000;
+
+/** How long a shown page may go without a sign of anyone — a key, the
+ *  pointer, a touch, a wheel, focus — before the refresh stops. The
+ *  platform stops an app nobody used for 30 minutes, and every refresh is
+ *  a use: a tab left open on a screen nobody looks at kept its app, and
+ *  the sandbox under it, running all night. The same 30 minutes here, so
+ *  an app left open is an app left alone. */
+export const UNATTENDED_MS = 30 * 60 * 1000;
+
+/** What counts as someone there. */
+export const PRESENCE_EVENTS = ["pointerdown", "pointermove", "keydown", "wheel", "touchstart", "focusin"];
+
+/** What a surface puts on its root to keep the page as it is: no refresh,
+ *  and no probe, while any element on the page carries it. For a surface
+ *  whose rows only its own writes change, or one too big to send every
+ *  few seconds (a base of 4,812 records was about 2 MB a refresh). Its
+ *  writes still re-render it (lib/actions.js revalidates), and so does
+ *  every navigation. */
+export const REFRESH_OFF = '[data-claw-refresh="off"]';
+
 /** How long after the last keystroke in a field a refresh still waits:
  *  long enough to tab from one field to the next, or to the Save button,
  *  without a refresh landing in between. */
@@ -89,11 +117,28 @@ export function isEditing(doc, typed = null) {
   return Boolean(doc.querySelector("dialog[open]"));
 }
 
-/** One tick's decision: refresh only when someone can see the page and is
- *  not typing into it. `quietFor` is the time since the last input event
- *  (Infinity when there was none). */
-export function shouldRefresh({ visible, onScreen, editing, quietFor }) {
-  return Boolean(visible && onScreen && !editing && quietFor >= QUIET_MS);
+/** One tick's decision: refresh only when someone can see the page, is not
+ *  typing into it, and no surface on it has opted out. `quietFor` is the
+ *  time since the last input event (Infinity when there was none). */
+export function shouldRefresh({ visible, onScreen, editing, quietFor, optedOut = false }) {
+  return Boolean(visible && onScreen && !editing && !optedOut && quietFor >= QUIET_MS);
+}
+
+/** Has a surface on the page opted out (REFRESH_OFF on its root)? */
+export function refreshOptedOut(doc) {
+  try {
+    return Boolean(doc.querySelector(REFRESH_OFF));
+  } catch {
+    return false;
+  }
+}
+
+/** The wait before the next tick: the interval, plus what the last tick
+ *  cost — its probe and its refresh — so a busy stack is asked less often
+ *  the busier it is, up to MAX_REFRESH_MS. */
+export function nextRefreshIn(lastCostMs = 0) {
+  const cost = Number.isFinite(lastCostMs) && lastCostMs > 0 ? lastCostMs : 0;
+  return Math.min(MAX_REFRESH_MS, REFRESH_MS + cost);
 }
 
 /** What to ask before a refresh: app/claw-alive/route.js, a fixed route
@@ -149,6 +194,152 @@ export async function answering(url, fetchImpl = globalThis.fetch, timeoutMs = P
   }
 }
 
+/** `promise`, or undefined once `ms` have passed, whichever comes first. */
+function within(promise, ms, timers) {
+  let timer = null;
+  const late = new Promise((resolve) => (timer = timers.setTimeout(resolve, ms)));
+  return Promise.race([Promise.resolve(promise).catch(() => undefined), late]).finally(() => timers.clearTimeout(timer));
+}
+
+/**
+ * The refresh loop app/auto-refresh.jsx runs, as plain code over a
+ * document so `npm test` can drive it. `refresh()` starts one refresh and
+ * resolves when it has landed (the component's transition settling);
+ * `probe()` is the question above, asked first. → { stop() }
+ *
+ * Until 0.5.0 a timer fired every REFRESH_MS whatever was in flight: the
+ * probe was guarded, the refresh was not, so a render slower than the
+ * interval was cut off by the next one — 100+ refreshes in two minutes on
+ * an idle page, a 502 or 503 whenever the stack was busy — and a page left
+ * open in a hidden tab kept asking, so the platform's idle sweep never
+ * stopped its app (install test and basics wave, 2026-09-27). Now:
+ *
+ *   - one tick at a time: the next is timed only once the last refresh
+ *     has landed, REFRESH_MS plus what the last tick cost (nextRefreshIn);
+ *   - no timer at all while the page is hidden or behind the window's
+ *     other tabs; coming back ticks at once, so the rows are current;
+ *   - none either after UNATTENDED_MS shown with no sign of anyone
+ *     (PRESENCE_EVENTS, in the frame): the next sign refreshes at once
+ *     and the loop goes on. Coming back from hidden is such a sign;
+ *   - a tick refreshes only when shouldRefresh says so, with the probe's
+ *     2xx, and never while a surface has opted out (REFRESH_OFF).
+ *
+ * The rules are asked again after the probe: typing may have started, or
+ * the tab changed, while it was on its way.
+ */
+export function refreshLoop({
+  doc,
+  refresh,
+  probe = () => answering(probeUrl(doc)),
+  now = () => Date.now(),
+  timers = globalThis,
+  Observer = globalThis.IntersectionObserver,
+}) {
+  let onScreen = true;
+  let lastInput = -Infinity;
+  let typed = null; // the field the last `input` event came from
+  let timer = null;
+  let busy = false; // a probe or a refresh is out
+  let stopped = false;
+  let cost = 0; // what the last tick took, probe and refresh
+  let lastSeen = now(); // the last sign of someone; opening the page is one
+  let unattended = false; // stopped for want of anyone: the next sign ticks
+
+  const visible = () => doc.visibilityState === "visible";
+  const ready = () =>
+    shouldRefresh({
+      visible: visible(),
+      onScreen,
+      editing: isEditing(doc, typed),
+      quietFor: now() - lastInput,
+      optedOut: refreshOptedOut(doc),
+    });
+
+  const cancel = () => {
+    timers.clearTimeout(timer);
+    timer = null;
+  };
+  // Timed only while shown and attended: hidden, the loop waits for the
+  // page to come back (onVisible, the observer), and unattended for the
+  // next sign of someone (seen), rather than for a clock.
+  const schedule = () => {
+    cancel();
+    if (!stopped && !busy && !unattended && visible() && onScreen) timer = timers.setTimeout(tick, nextRefreshIn(cost));
+  };
+
+  async function tick() {
+    cancel();
+    if (stopped || busy) return;
+    if (visible() && onScreen && now() - lastSeen >= UNATTENDED_MS) {
+      unattended = true;
+      return;
+    }
+    if (!ready()) return schedule();
+    busy = true;
+    const started = now();
+    try {
+      if ((await probe()) && !stopped && ready()) await within(refresh(), REFRESH_SETTLE_MS, timers);
+    } catch {
+      // A probe or a refresh that throws is one that did not land; the
+      // next tick asks again. Never an unhandled rejection: the error
+      // relay would report every one to the platform.
+    } finally {
+      busy = false;
+      cost = now() - started;
+    }
+    schedule();
+  }
+
+  const onInput = (event) => {
+    lastInput = now();
+    typed = event.target;
+  };
+  // Someone is there. After a stop for want of anyone, refresh at once.
+  const seen = () => {
+    lastSeen = now();
+    if (!unattended) return;
+    unattended = false;
+    tick();
+  };
+  // Back on screen: someone looked, and the rows may be old.
+  const back = () => {
+    lastSeen = now();
+    unattended = false;
+    tick();
+  };
+  const onVisible = () => (visible() ? back() : cancel());
+
+  let observer = null;
+  if (typeof Observer === "function") {
+    observer = new Observer((entries) => {
+      const was = onScreen;
+      onScreen = entries[entries.length - 1].isIntersecting;
+      if (onScreen && !was) back();
+      else if (!onScreen) cancel();
+    });
+    observer.observe(doc.documentElement);
+  }
+  const PASSIVE = { capture: true, passive: true };
+  const win = doc.defaultView ?? null;
+  doc.addEventListener("visibilitychange", onVisible);
+  doc.addEventListener("input", onInput, true);
+  for (const type of PRESENCE_EVENTS) doc.addEventListener(type, seen, PASSIVE);
+  win?.addEventListener?.("focus", seen);
+  schedule();
+
+  return {
+    stop() {
+      stopped = true;
+      cancel();
+      observer?.disconnect();
+      doc.removeEventListener("visibilitychange", onVisible);
+      doc.removeEventListener("input", onInput, true);
+      for (const type of PRESENCE_EVENTS) doc.removeEventListener(type, seen, PASSIVE);
+      win?.removeEventListener?.("focus", seen);
+    },
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Escape from the desk
 

package/templates/next/files/check/run.mjs

@@ -10,7 +10,8 @@
 // example INSERTed into a shared table, a manifest entry whose file was
 // never written, an icon name that rendered nothing, a tweet card painted
 // in the workspace's tokens (unrecognisable as a tweet — the one thing
-// the app was for), a kit file "improved" per app.
+// the app was for), a kit file "improved" per app, a button whose server
+// action the app's own agent had no way to know about.
 //
 //   npm run check               static rules, then smoke
 //   npm run check -- --static   static rules only
@@ -73,12 +74,28 @@ const DEPICTION = /^components\/depictions\//;
  *  preview can follow typing). Never the shell, the kit or lib/. */
 const FRAME_HOST = /^(?:surfaces\/[^/]+\.jsx|components\/[^/]+\.jsx)$/;
 
+// Folders a build, an install or a tool leaves in the app, never its
+// source: ONE list for every walk here — the rules, the smoke build's
+// freshness, its copy in the sandbox. Until 0.5.0 each walk named its own
+// two or three, and the rules read a temporary .next-stub a build had
+// left (phase-planner, 2026-09-23; CLAW-FIXES #36). A name ending in *
+// is a prefix (.next, .next-check, .next-stub…). node_modules and .git
+// are skipped wherever they are; the rest at the app's root only, where
+// the build puts them: a folder of the app's own may be called out/.
+const BUILD_DIRS = ["node_modules", ".git", ".next*", "out", ".turbo", ".cache"];
+const ANY_DEPTH = new Set(["node_modules", ".git"]);
+const isBuildDir = (name) => BUILD_DIRS.some((d) => (d.endsWith("*") ? name.startsWith(d.slice(0, -1)) : name === d));
+/** Is this path, relative to the app, inside a folder that is not source? */
+function notSource(rel) {
+  const parts = rel.split("/");
+  return isBuildDir(parts[0]) || parts.some((part) => ANY_DEPTH.has(part));
+}
+
 // Files the rules skip: the kit (it owns the native elements and the
-// fallback colours), the fixed template files, machine folders. Depiction
-// files are NOT skipped — the `depictions` rule reads them.
+// fallback colours), the fixed template files, the check itself. Build
+// folders never reach this list (walk, below). Depiction files are NOT
+// skipped — the `depictions` rule reads them.
 const SKIP = [
-  /^node_modules\//,
-  /^\.next(-check)?\//,
   /^check\//,
   KIT,
   /^app\/globals\.css$/,
@@ -94,12 +111,12 @@ const SKIP = [
   /\.(md|sql|json|lock)$/,
 ];
 
-// Only the build's own folders are skipped: a dot-named module
+// Only build folders are skipped (BUILD_DIRS): a dot-named module
 // (components/.pictures.js) is a module Next bundles all the same.
 function walk(dir, out = []) {
   for (const name of readdirSync(dir)) {
-    if (name === "node_modules" || name === ".git" || name === ".next" || name === ".next-check") continue;
     const full = join(dir, name);
+    if (notSource(relative(ROOT, full))) continue;
     if (statSync(full).isDirectory()) walk(full, out);
     else out.push(full);
   }
@@ -540,14 +557,82 @@ const surfaceKeys = [];
   else ok7(`${pictures} picture${pictures === 1 ? "" : "s"} of elsewhere, framed in ${hosts} file${hosts === 1 ? "" : "s"}: ${[...rendered.keys()].join(", ")}`);
 }
 
+// 8. The agent runs the app. Every server action that writes is named, by
+//    its function name in backticks, in the agent's brief beside the app
+//    (../AGENTS.md) or its references (../references/*.md), with the sql
+//    that does the same: anything a person can do on the screens, the
+//    app's agent can do. Born of Whiteboard 0.3.0 (2026-09-28): asked in
+//    chat for a board, its agent asked the member to make one, since
+//    nothing told it how. An app with no brief beside it (a copy on its
+//    own) is not checked here.
+{
+  const home = dirname(ROOT);
+  if (!existsSync(join(home, "AGENTS.md"))) ok("agent", "no AGENTS.md beside the app: its actions are not checked here");
+  else {
+    const refs = join(home, "references");
+    const brief = [join(home, "AGENTS.md"), ...(existsSync(refs) ? readdirSync(refs).filter((n) => n.endsWith(".md")).map((n) => join(refs, n)) : [])]
+      .map((p) => readFileSync(p, "utf8"))
+      .join("\n");
+    const WRITES =
+      /\b(insertRow|updateRow|deleteRow|moveRow|saveSetting)\s*\(|\binsert\s+into\b|\bupdate\s+(?:only\s+)?(?:public\.)?[a-z_][a-z0-9_]*(?:\s+(?:as\s+)?[a-z_][a-z0-9_]*)?\s+set\b|\bdelete\s+from\b/i;
+    // Every top-level function of a server file, bare or wrapped in a call
+    // (`export const save = safe(async (…) => …)`), exported by name or in
+    // an `export { … }` list. One writes when its body writes, or when it
+    // calls or hands on a function of its own file, or another action, that
+    // writes: a scan of direct SQL alone missed 67 of 669 in the store's
+    // apps (2026-09-28).
+    const HEAD =
+      /^(export\s+)?(?:async\s+)?function\s*\*?\s*([A-Za-z_$][\w$]*)\s*\(|^(export\s+)?const\s+([A-Za-z_$][\w$]*)\s*=\s*(?:[A-Za-z_$][\w$.]*\s*\(\s*)?(?:async\s*)?(?:function\b|\((?:[^()]|\([^()]*\))*\)\s*=>|[A-Za-z_$][\w$]*\s*=>)/gm;
+    const mentions = (body, name) => new RegExp(`(^|[^\\w$.])${name.replace(/\$/g, "\\$")}(?![\\w$])`).test(body);
+    const fns = [];
+    for (const f of appFiles) {
+      if (!/^\s*(["'])use server\1/m.test(f.text.split("\n").slice(0, 8).join("\n"))) continue;
+      const listed = new Map();
+      for (const m of f.code.matchAll(/^export\s*\{([^}]*)\}/gm))
+        for (const part of m[1].split(",")) {
+          const [local, as] = part.trim().split(/\s+as\s+/);
+          if (local) listed.set(local.trim(), (as ?? local).trim());
+        }
+      const heads = [...f.code.matchAll(HEAD)];
+      heads.forEach((m, i) => {
+        const name = m[2] ?? m[4];
+        const body = f.code.slice(m.index, heads[i + 1]?.index ?? f.code.length);
+        fns.push({ file: f.path, name, exported: m[1] || m[3] ? name : (listed.get(name) ?? null), body, writes: WRITES.test(body), where: `${f.path}:${lineOf(f.code, m.index)}` });
+      });
+    }
+    for (let changed = true; changed; ) {
+      changed = false;
+      const actions = fns.filter((g) => g.writes && g.exported).map((g) => g.exported);
+      for (const f of fns) {
+        if (f.writes) continue;
+        const local = fns.filter((g) => g.writes && g.file === f.file && g !== f).map((g) => g.name);
+        const others = actions.filter((n) => n !== f.exported && n !== f.name);
+        if ([...local, ...others].some((n) => mentions(f.body.slice(f.body.indexOf("(")), n))) f.writes = changed = true;
+      }
+    }
+    const writes = fns.filter((f) => f.writes && f.exported).map((f) => ({ where: f.where, name: f.exported }));
+    const missing = writes.filter((w) => !brief.includes(`\`${w.name}\``));
+    if (!writes.length) ok("agent", "no server action writes");
+    else if (missing.length)
+      fail(
+        "agent",
+        missing[0].where,
+        `${missing.length} of ${writes.length} server actions that write are not in the agent's brief: ` +
+          `${missing.slice(0, 6).map((w) => w.name).join(", ")}${missing.length > 6 ? ", …" : ""}. Name each in ` +
+          `../references/actions.md, in backticks, with the sql that does the same, so the app's agent can do what the screen does`,
+      );
+    else ok("agent", `all ${writes.length} server actions that write are in the agent's brief`);
+  }
+}
+
 // 6. Smoke: the app, built and started, answers every surface.
 
-/** Newest mtime among the app's own sources (what a build reads). */
+/** Newest mtime among the app's own sources (what a build reads): walk
+ *  leaves the build folders out, and check/ is not built. */
 function newestSource() {
   let newest = 0;
   for (const f of walk(ROOT)) {
-    const rel = relative(ROOT, f);
-    if (/^(node_modules|\.next|\.next-check|check)\//.test(rel)) continue;
+    if (/^check\//.test(relative(ROOT, f))) continue;
     newest = Math.max(newest, statSync(f).mtimeMs);
   }
   return newest;
@@ -582,7 +667,7 @@ function copySources(dir) {
     dereference: false,
     filter: (src) => {
       const rel = relative(ROOT, src);
-      return !/^(node_modules|\.next|\.next-check|check)(\/|$)/.test(rel);
+      return !notSource(rel) && !/^check(\/|$)/.test(rel);
     },
   });
   const link = join(dir, "node_modules");

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

@@ -139,6 +139,30 @@ export function formatDate(s, options = { dateStyle: "medium" }, locale) {
   return d ? plainSpaces(new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" }).format(d)) : "";
 }
 
+/** Any date a row holds → a Date to show in the reader's own time; null
+ *  when it is none. A day ("2026-09-28", what a `date` column reads as)
+ *  is that day's LOCAL midnight: new Date("2026-09-28") is UTC's
+ *  midnight, the 27th everywhere west of Greenwich, and a screen that
+ *  shows it, then saves what it shows, moves the day back by one. A Date
+ *  stays as it is; an ISO timestamp or epoch milliseconds go through
+ *  new Date(). For a day alone, formatDate and the helpers above need no
+ *  Date at all; this is for code that mixes days with instants (a
+ *  comment's time, "due" beside "sent at"). */
+export function toLocalDate(value) {
+  if (value === null || value === undefined || value === "") return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  const day = typeof value === "string" ? parseDate(value) : null;
+  if (day) {
+    // setFullYear, not new Date(y, m, d): that one reads years 0–99 as 19xx.
+    const local = new Date(0);
+    local.setFullYear(day.getUTCFullYear(), day.getUTCMonth(), day.getUTCDate());
+    local.setHours(0, 0, 0, 0);
+    return local;
+  }
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
 // The week's first day for a locale: Intl's own answer where the browser
 // has it (getWeekInfo), else CLDR's regions that start on Sunday or
 // Saturday; everyone else starts on Monday.

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

@@ -8,10 +8,19 @@ import { cx } from "./cx";
 // validation, autofill). Wrap one in <Field> for its label, hint and
 // error — never a bare <input> with a <div> label beside it.
 
-const CONTROL =
-  "w-full min-h-11 rounded-md border border-input bg-background px-3 text-sm text-foreground " +
+const BOX =
+  "min-h-11 rounded-md border border-input bg-background px-3 text-sm text-foreground " +
   "placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring " +
   "disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive";
+const CONTROL = `w-full ${BOX}`;
+
+// An Input is as wide as its column unless the caller's className gives
+// it a width (w-24, w-auto, w-[12rem], size-10), which then stands in
+// for w-full. cx does not merge classes: with both, the rule later in the
+// stylesheet wins, and Tailwind writes w-full after w-24, w-auto, w-fit
+// and w-[…] — until 0.5.1 those did nothing on an Input. A width under a
+// breakpoint (sm:w-40) keeps w-full below it.
+const ownWidth = (className) => /(?:^|\s)!?(?:w|size)-/.test(className ?? "");
 
 /** Label, control, hint and error in one stack. Pass `id`; the label
  *  points at it. `error` (a string) marks the control invalid. */
@@ -39,7 +48,7 @@ export function Field({ id, label, hint, error, required, className, children })
 }
 
 export function Input({ className, invalid, ...rest }) {
-  return <input className={cx(CONTROL, className)} aria-invalid={invalid ? true : undefined} {...rest} />;
+  return <input className={cx(!ownWidth(className) && "w-full", BOX, className)} aria-invalid={invalid ? true : undefined} {...rest} />;
 }
 
 /**

package/templates/next/files/components/ui/index.js

@@ -23,6 +23,7 @@ export {
   endOfMonth,
   dayOfWeek,
   formatDate,
+  toLocalDate,
   firstDayOfWeek,
 } from "./calendar";
 export { DatePicker, DateInput, DATE_PRESETS } from "./date-picker";

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) {