makersclaw 0.6.0 → 0.8.0

package/registry/blocks/sidebar/README.md

@@ -57,8 +57,11 @@ true) is where it starts. The icon rail shows every group unfolded.
 - `shortcut` — Cmd/Ctrl + this key toggles it; default `"b"`, `null` for none.
 - `variant` — `"inset"` draws the page as a card on the frame's ground.
   Default: the Sidebar's own `variant`, so you rarely pass it here.
-- `className` — the frame's height and edges (`min-h-dvh` in a shell).
-  Never colour.
+- `className` — the frame's edges, and its height from its parent: in a
+  shell it sits in the kit's `AppLayout contentMode="fill"` with
+  `min-h-0 flex-1` (the Example). The kit's `AppLayout` owns the
+  window's height; `min-h-dvh` or `h-dvh` here is refused by `npm run
+  check`. Never colour.
 
 ### Sidebar
 
@@ -138,6 +141,7 @@ The header button: opens the sheet on a phone, collapses to icons from
 // app/shell.jsx — the app's shell, the surfaces as the sidebar's items
 "use client";
 import { usePathname } from "next/navigation";
+import { AppLayout } from "../components/ui";
 import { Sidebar, SidebarLayout, SidebarTrigger } from "../components/blocks/sidebar";
 
 const ICONS = { inbox: "inbox", deals: "dollar", contacts: "users", reports: "chart" };
@@ -153,18 +157,24 @@ export default function Shell({ name, surfaces, children }) {
     active: s.key === activeKey,
     badge: s.built ? undefined : "planned",
   }));
+  // The outer AppLayout owns the window; the inner one (it fills its
+  // slot) is the content that scrolls, back to its top on a new route.
   return (
-    <SidebarLayout
-      storageKey={`${name}.sidebar`}
-      className="min-h-dvh"
-      sidebar={<Sidebar title={name} items={items} label={`${name} surfaces`} />}
-    >
-      <header className="flex min-h-14 items-center gap-2 border-b border-border px-2 md:hidden">
-        <SidebarTrigger />
-        <span className="font-semibold">{name}</span>
-      </header>
-      <main className="min-w-0 flex-1 p-4 sm:p-6">{children}</main>
-    </SidebarLayout>
+    <AppLayout contentMode="fill">
+      <SidebarLayout
+        storageKey={`${name}.sidebar`}
+        className="min-h-0 flex-1"
+        sidebar={<Sidebar title={name} items={items} label={`${name} surfaces`} />}
+      >
+        <header className="flex min-h-14 items-center gap-2 border-b border-border px-2 md:hidden">
+          <SidebarTrigger />
+          <span className="font-semibold">{name}</span>
+        </header>
+        <AppLayout contentClassName="p-4 sm:p-6" scrollKey={pathname}>
+          {children}
+        </AppLayout>
+      </SidebarLayout>
+    </AppLayout>
   );
 }
 ```

package/registry/blocks/signature-pad/README.md

@@ -109,25 +109,36 @@ under the paper says so. Undo and clear are buttons with names.
 Accepting a quote in a Makersclaw app.
 
 ```jsx
+// surfaces/quote.jsx — client: one quote, accepted and signed
 "use client";
+import { useSearchParams } from "next/navigation";
+import { useArtifact } from "../lib/hooks";
+import { useRow } from "../lib/data";
 import { updateRow } from "../lib/actions";
-import { SignaturePad } from "./blocks/signature-pad";
+import { SignaturePad } from "../components/blocks/signature-pad";
 
-export default function AcceptQuote({ quote, me }) {
+export default function AcceptQuote() {
+  const id = useSearchParams().get("row");
+  const { user } = useArtifact(); // the member signed in: { id, email }
+  const { row: quote, loading } = useRow({ source: "quotes", id });
+  if (loading || !quote) return null;
   return (
     <SignaturePad
-      signer={me.name}
+      signer={user?.email}
       value={quote.signature ?? undefined}
       submitLabel="Accept and sign"
       note="Signing records that you accept this quote. It is not a certified e-signature."
+      // signed_by: a before-update trigger sets it from the member, never the page (the app's README §5)
       onSubmit={(signature) =>
-        updateRow({ source: "public.quotes", id: quote.id, patch: { status: "accepted", signature, signed_by: me.email }, detail: "accepted" })
+        updateRow({ source: "quotes", id: quote.id, patch: { status: "accepted", signature }, detail: "accepted" })
       }
     />
   );
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 ## What it will not do
 
 - Verify who signed, send the document for signature, or keep an audit

package/registry/blocks/sketch-canvas/README.md

@@ -130,8 +130,11 @@ A sketch is plain JSON. Store it as it comes out of `onChange` / `onSave`
 - `onReady(handle)` — once, when the canvas has mounted.
 - `label` — the accessible name of the canvas region (default "Sketch").
 - `className` — layout: width, margin, height. The default height is
-  `h-[32rem]`; a height class of yours (`h-dvh`, `h-full`, `min-h-…`,
-  `flex-1`) replaces it. Never colour.
+  `h-[32rem]`; a height class of yours (`h-full`, `min-h-…`, `min-h-0
+  flex-1`) replaces it. A canvas that is the whole surface sits in an
+  `AppLayout contentMode="fill"` from the kit with `min-h-0 flex-1` (the
+  Example): never `h-dvh` or a `vh` height, which `npm run check`
+  refuses. Never colour.
 
 ### The handle
 
@@ -215,22 +218,34 @@ on a partial one:
 A whiteboard that saves itself:
 
 ```jsx
+// surfaces/sketch.jsx — client: one board, saved as it is drawn
 "use client";
-import { SketchCanvas } from "./blocks/sketch-canvas";
+import { useSearchParams } from "next/navigation";
+import { useRow } from "../lib/data";
 import { updateRow } from "../lib/actions";
+import { AppLayout } from "../components/ui";
+import { SketchCanvas } from "../components/blocks/sketch-canvas";
 
-export default function Board({ board }) {
+export default function Board() {
+  const id = useSearchParams().get("row");
+  const { row: board, loading } = useRow({ source: "boards", id });
+  if (loading || !board) return null;
   return (
-    <SketchCanvas
-      label={board.title}
-      defaultValue={board.sketch}                       // jsonb, may be null
-      onSave={(sketch) => updateRow({ source: "public.boards", id: board.id, patch: { sketch } })}
-      className="h-dvh rounded-none border-0"
-    />
+    <AppLayout contentMode="fill">
+      <SketchCanvas
+        key={board.id}
+        label={board.title}
+        defaultValue={board.sketch}                       // jsonb, may be null; read once per board
+        onSave={(sketch) => updateRow({ source: "boards", id: board.id, patch: { sketch } })}
+        className="min-h-0 flex-1 rounded-none border-0"
+      />
+    </AppLayout>
   );
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 Marking up a screenshot, with numbered notes:
 
 ```jsx

package/registry/blocks/sketch-canvas/sketch-canvas.jsx

@@ -2,7 +2,7 @@
 
 // SketchCanvas — Excalidraw, in the workspace theme, behind one set of props.
 //
-// Client only, one static bundle. Excalidraw needs the DOM, and the app's
+// Client only, one bundle. Excalidraw needs the DOM, and the app's
 // check refuses import() (so no next/dynamic): the modules load with the
 // page (on the server too — see excalidraw.js and ssr-shim.js for how that
 // is made safe), and the canvas itself mounts only after the first effect

package/registry/blocks/sketch-canvas/ssr-shim.js

@@ -5,9 +5,9 @@
 // devicePixelRatio, document.createElement("img"), an Element.prototype
 // polyfill), so evaluating it on the server throws "window is not defined"
 // and the page fails to render — even though the component itself only
-// ever renders in the browser (the mount guard). The app is one static
-// bundle (no import(), no next/dynamic), so the module cannot be kept off
-// the server; instead it is let load against these stand-ins.
+// ever renders in the browser (the mount guard). The app is one bundle
+// (no import(), no next/dynamic), so the module cannot be kept off the
+// server; instead it is let load against these stand-ins.
 //
 // The stand-ins live only for that load: excalidraw.js imports this file,
 // then @excalidraw/excalidraw, then ssr-shim-end.js, which removes them —

package/registry/blocks/spreadsheet/README.md

@@ -241,10 +241,12 @@ Shift+F10 the row menu.
 ## Example
 
 ```jsx
+// surfaces/deals.jsx — client: the deals as a grid
 "use client";
 import { useState } from "react";
-import { updateRow, insertRow, deleteRow } from "../lib/actions";
-import { Spreadsheet } from "./blocks/spreadsheet";
+import { useRows } from "../lib/data";
+import { deleteRow, insertRow, updateRow } from "../lib/actions";
+import { Spreadsheet } from "../components/blocks/spreadsheet";
 
 const COLUMNS = [
   { key: "name", name: "Name", type: "text", required: true },
@@ -253,20 +255,25 @@ const COLUMNS = [
   { key: "close", name: "Close date", type: "date" },
 ];
 
-export default function Deals({ deals, team }) {
+export default function Deals() {
+  const deals = useRows({ source: "deals", orderBy: "created_at asc" });
+  const team = useRows({ source: "people", orderBy: "name asc" });
   const [view, setView] = useState({ sort: [{ key: "amount", dir: "desc" }] });
+  // Each change below is one write, and the door takes 300 a minute: a
+  // paste larger than that belongs in one action (runAction).
   return (
     <Spreadsheet
       label="Deals"
       noun="deal"
-      rows={deals}
+      rows={deals.rows}
+      loading={deals.loading}
       columns={COLUMNS}
-      people={team}
+      people={team.rows}
       view={view}
       onViewChange={setView}
       onChange={async (changes) => {
         for (const c of changes) {
-          const r = await updateRow({ source: "public.deals", id: c.rowId, patch: { [c.key]: c.value } });
+          const r = await updateRow({ source: "deals", id: c.rowId, patch: { [c.key]: c.value } });
           if (!r.ok) return r;
         }
         return { ok: true };
@@ -274,7 +281,7 @@ export default function Deals({ deals, team }) {
       onAddRows={async (rows) => {
         const made = [];
         for (const { id, ...values } of rows) {
-          const r = await insertRow({ source: "public.deals", values: { stage: "lead", ...values } });
+          const r = await insertRow({ source: "deals", values: { stage: "lead", ...values } });
           if (!r.ok) return r;
           made.push({ id: r.id });   // the database's id replaces the one the grid made up
         }
@@ -282,7 +289,7 @@ export default function Deals({ deals, team }) {
       }}
       onDeleteRows={async (ids) => {
         for (const id of ids) {
-          const r = await deleteRow({ source: "public.deals", id });
+          const r = await deleteRow({ source: "deals", id });
           if (!r.ok) return r;
         }
         return { ok: true };
@@ -292,6 +299,8 @@ export default function Deals({ deals, team }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 ## What it will not do
 
 - No formulas. A value is what was typed; a derived column is computed by

package/registry/blocks/stat-cards/README.md

@@ -125,27 +125,34 @@ States
 ## Example
 
 ```jsx
-// components/Overview.jsx — client: the numbers the server read
+// surfaces/overview.jsx — client: the numbers, read in the browser
 "use client";
-import { StatCards } from "./blocks/stat-cards";
+import { useRows } from "../lib/data";
 import { updateRow } from "../lib/actions";
+import { StatCards } from "../components/blocks/stat-cards";
 
-export default function Overview({ kpis, usage }) {
+export default function Overview() {
+  const summary = useRows({ source: "kpi_summary", limit: 1 });   // a view of the app's: this week's numbers, one row
+  const usage = useRows({ source: "quotas", orderBy: "name asc" });
+  const kpis = summary.rows[0] ?? {};
   return (
     <div className="grid gap-6">
       <StatCards
+        loading={summary.loading}
+        error={summary.error}
         items={[
-          { id: "mrr", label: "MRR", value: kpis.mrr, delta: kpis.mrrChange, trend: kpis.mrrWeeks, href: "/revenue" },
-          { id: "churn", label: "Logo churn", value: kpis.churn, delta: kpis.churnChange, invert: true },
-          { id: "trials", label: "Active trials", value: kpis.trials, previous: kpis.trialsLastWeek, delta: kpis.trialsChange },
+          { id: "mrr", label: "MRR", value: kpis.mrr, delta: kpis.mrr_change, trend: kpis.mrr_weeks, href: "/s/revenue" },
+          { id: "churn", label: "Logo churn", value: kpis.churn, delta: kpis.churn_change, invert: true },
+          { id: "trials", label: "Active trials", value: kpis.trials, previous: kpis.trials_last_week, delta: kpis.trials_change },
         ]}
         variant="cards"
       />
       <StatCards
         variant="usage"
         title="Plan usage"
-        items={usage.map((u) => ({ id: u.id, label: u.name, used: u.used, limit: u.limit, unit: u.unit }))}
-        onLimitChange={(item, limit) => updateRow({ source: "public.quotas", id: item.id, patch: { limit } })}
+        loading={usage.loading}
+        items={usage.rows.map((u) => ({ id: u.id, label: u.name, used: u.used, limit: u.limit, unit: u.unit }))}
+        onLimitChange={(item, limit) => updateRow({ source: "quotas", id: item.id, patch: { limit } })}
         limitLabel="Change budget"
       />
     </div>
@@ -153,6 +160,8 @@ export default function Overview({ kpis, usage }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 ## What it will not do
 
 - Fetch or compute: numbers come in formatted, changes already worked out.

package/registry/blocks/task-list/README.md

@@ -98,14 +98,15 @@ drag-to-reorder saves; tasks without one keep the order given.
 ## Example
 
 ```jsx
-// surfaces/tasks.jsx — server: load, hand over
-import { loadRows } from "../lib/data";
+// surfaces/tasks.jsx — client: read, hand over
+"use client";
+import { useRows } from "../lib/data";
 import Tasks from "../components/Tasks";
 
-export default async function TasksSurface() {
-  const { rows, error } = await loadRows({ source: "public.tasks", orderBy: "created_at asc" });
-  const people = await loadRows({ source: "public.people" });
-  return <Tasks tasks={rows} people={people.rows} error={error} />;
+export default function TasksSurface() {
+  const tasks = useRows({ source: "tasks", orderBy: "created_at asc" });
+  const people = useRows({ source: "people" });
+  return <Tasks tasks={tasks.rows} people={people.rows} loading={tasks.loading || people.loading} error={tasks.error} />;
 }
 ```
 
@@ -132,19 +133,19 @@ const COLUMNS = ["id", "title", "status", "assignees", "due", "priority", "tags"
 async function save(change) {
   for (const w of changeWrites(change, { columns: COLUMNS, keepNewIds: false })) {
     const r =
-      w.op === "insert" ? await insertRow({ source: "public.tasks", values: w.values, detail: w.values.title })
-      : w.op === "update" ? await updateRow({ source: "public.tasks", id: w.id, patch: w.patch })
-      : await deleteRow({ source: "public.tasks", id: w.id });
+      w.op === "insert" ? await insertRow({ source: "tasks", values: w.values, detail: w.values.title })
+      : w.op === "update" ? await updateRow({ source: "tasks", id: w.id, patch: w.patch })
+      : await deleteRow({ source: "tasks", id: w.id });
     if (r?.ok === false) return r;
   }
   return { ok: true };
 }
 
-export default function Tasks({ tasks, people, error }) {
+export default function Tasks({ tasks, people, loading, error }) {
   const [open, setOpen] = useState(null);
   return (
     <>
-      <TaskList tasks={tasks} statuses={STATUSES} people={people} onChange={save} onOpen={setOpen} error={error}
+      <TaskList tasks={tasks} statuses={STATUSES} people={people} onChange={save} onOpen={setOpen} loading={loading} error={error}
         starters={[{ label: "Weekly planning", tasks: [{ title: "Review last week" }, { title: "Pick three priorities" }] }]} />
       <Sheet open={Boolean(open)} onClose={() => setOpen(null)} title={open?.title}>{/* the task's fields */}</Sheet>
     </>
@@ -152,6 +153,8 @@ export default function Tasks({ tasks, people, error }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 Grouped by person, only open work, showing the project:
 
 ```jsx

package/registry/blocks/task-model/README.md

@@ -113,9 +113,9 @@ const COLUMNS = ["id", "title", "status", "assignees", "due", "priority", "paren
 
 async function onChange(change) {
   for (const w of changeWrites(change, { columns: COLUMNS, keepNewIds: false })) {
-    const r = w.op === "insert" ? await insertRow({ source: "public.tasks", values: w.values })
-            : w.op === "update" ? await updateRow({ source: "public.tasks", id: w.id, patch: w.patch })
-            : await deleteRow({ source: "public.tasks", id: w.id });
+    const r = w.op === "insert" ? await insertRow({ source: "tasks", values: w.values })
+            : w.op === "update" ? await updateRow({ source: "tasks", id: w.id, patch: w.patch })
+            : await deleteRow({ source: "tasks", id: w.id });
     if (r.ok === false) return r;
   }
   return { ok: true };

package/registry/blocks/transaction-list/README.md

@@ -79,22 +79,28 @@ An invoice row:
 ## Example
 
 ```jsx
-// components/Billing.jsx — client
+// surfaces/billing.jsx — client: invoices and payments
 "use client";
-import { TransactionList } from "./blocks/transaction-list";
+import { useRows } from "../lib/data";
+import { TransactionList } from "../components/blocks/transaction-list";
 
-export default function Billing({ invoices, payments, error }) {
+export default function Billing() {
+  const invoices = useRows({ source: "invoices", orderBy: "date desc" });
+  const payments = useRows({ source: "payments", orderBy: "date desc" });
   return (
     <div className="grid gap-6 lg:grid-cols-2">
       <TransactionList
         variant="invoices"
-        rows={invoices}
-        error={error}
+        rows={invoices.rows}
+        loading={invoices.loading}
+        error={invoices.error}
         description="Every invoice we have sent you."
-        downloadHref={(inv) => inv.pdfUrl}
+        downloadHref={(inv) => inv.pdf_url}
       />
       <TransactionList
-        rows={payments}
+        rows={payments.rows}
+        loading={payments.loading}
+        error={payments.error}
         dateFilter
         description="Money in and out of the account."
         onExport={async (rows) => {
@@ -109,6 +115,8 @@ export default function Billing({ invoices, payments, error }) {
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 ## What it will not do
 
 - Sort, page, or filter by column: rows come in ordered, and a record set

package/registry/blocks/whiteboard/README.md

@@ -93,8 +93,11 @@ for agents.
   receives the canvas handle: `exportImage()`, `getScene()`,
   `insertElements()`… (sketch-canvas README, "The handle").
 - `className` — layout: width, margin, height. The default height is
-  `h-[40rem]`; a height class of yours (`h-dvh` for a full page, `h-full`,
-  `flex-1`) replaces it. Never colour.
+  `h-[40rem]`; a height class of yours (`h-full`, `min-h-0 flex-1`)
+  replaces it. A board that is the whole surface sits in an `AppLayout
+  contentMode="fill"` from the kit with `min-h-0 flex-1` (the Example):
+  never `h-dvh` or a `vh` height, which `npm run check` refuses. Never
+  colour.
 
 ### Templates
 
@@ -113,39 +116,48 @@ reuse them:
 A board page that saves itself:
 
 ```jsx
+// surfaces/board.jsx — client: one board, saved as it changes
 "use client";
-import { useState } from "react";
-import { Whiteboard } from "./blocks/whiteboard";
-import { sketchToText } from "./blocks/sketch-canvas";
+import { useSearchParams } from "next/navigation";
+import { useRow, whenLanded } from "../lib/data";
 import { updateRow } from "../lib/actions";
-
-export default function BoardPage({ board, onShare }) {
-  const [title, setTitle] = useState(board.title);
+import { AppLayout } from "../components/ui";
+import { Whiteboard } from "../components/blocks/whiteboard";
+import { sketchToText } from "../components/blocks/sketch-canvas";
+
+export default function BoardPage() {
+  const id = useSearchParams().get("row");
+  const { row: board, loading } = useRow({ source: "boards", id });
+  if (loading || !board) return null;
   return (
-    <Whiteboard
-      title={title}
-      onRename={async (next) => {
-        const res = await updateRow({ source: "public.boards", id: board.id, patch: { title: next } });
-        if (res.ok) setTitle(next);
-        return res;
-      }}
-      defaultValue={board.sketch}                       // jsonb, may be null
-      onSave={(sketch) => updateRow({ source: "public.boards", id: board.id, patch: { sketch, sketch_text: sketchToText(sketch) } })}
-      onShare={onShare}
-      className="h-dvh rounded-none border-0"
-    />
+    <AppLayout contentMode="fill">
+      <Whiteboard
+        key={board.id}
+        title={board.title}
+        onRename={async (next) => {
+          const res = await updateRow({ source: "boards", id: board.id, patch: { title: next } });
+          if (res.ok) await whenLanded(); // the board is read again: the title is the new one
+          return res;
+        }}
+        defaultValue={board.sketch}                       // jsonb, may be null; read once per board
+        onSave={(sketch) => updateRow({ source: "boards", id: board.id, patch: { sketch, sketch_text: sketchToText(sketch) } })}
+        className="min-h-0 flex-1 rounded-none border-0"
+      />
+    </AppLayout>
   );
 }
 ```
 
+In a server-mode app the same calls are `loadRows` in a server surface and the Server Actions of `lib/actions`.
+
 Notes that become tasks (a `tasks` table of your own):
 
 ```jsx
 <Whiteboard
   defaultValue={board.sketch}
   onSave={save}
-  onCreateTask={({ title, sourceIds }) => insertRow({ source: "public.tasks", values: { title, board_id: board.id, source_ids: sourceIds } })}
-  onOpenTask={(task) => router.push(`/tasks/${task.id}`)}
+  onCreateTask={({ title, sourceIds }) => insertRow({ source: "tasks", values: { title, board_id: board.id, source_ids: sourceIds } })}
+  onOpenTask={(task) => router.push(`/s/tasks?row=${task.id}`)}
 />
 ```
 

package/src/cli.mjs

@@ -4,7 +4,7 @@
 // --json is the same result as one object, for the platform.
 
 import { delimiter, resolve } from "node:path";
-import { CliError, add, diff, init, install, remove, update } from "./install.mjs";
+import { CliError, add, diff, init, install, mode, remove, update } from "./install.mjs";
 import { loadItems, loadTemplate, packageInfo, readmeOf, searchItems, suggest, templateNames, useExtraBlockRoots } from "./registry.mjs";
 
 const COMMANDS = {
@@ -23,6 +23,7 @@ const COMMANDS = {
   upgrade: "update",
   install: "install",
   i: "install",
+  mode: "mode",
   help: "help",
 };
 
@@ -32,6 +33,8 @@ const VALUE_FLAGS = new Map([
   ["--template", "template"],
   ["--type", "type"],
   ["--limit", "limit"],
+  ["--tables", "tables"],
+  ["--mode", "mode"],
 ]);
 const BOOL_FLAGS = new Map([
   ["--json", "json"],
@@ -76,6 +79,8 @@ function helpText() {
   return `makersclaw ${version} — the Makersclaw app template, its kit and its blocks
 
   npx makersclaw init [dir] [-t next]     lay the template: base files, the kit, the check
+                     [--tables own|public] where its tables live (new apps: own; never changes an app's)
+                   [--mode browser|server] its mode (new apps: server; browser writes tables own too)
   npx makersclaw add <name...>            install blocks, or restore a kit component
   npx makersclaw search <words...>        find blocks and components by what they do
   npx makersclaw view <name>              one item: props, data, an example
@@ -85,6 +90,7 @@ function helpText() {
   npx makersclaw update [--major]         lay this version's fixed files and blocks
                      [--adopt]             …or take on an app laid before makersclaw (kit era)
   npx makersclaw install                  the app's packages: pnpm, from pnpm-lock.yaml
+  npx makersclaw mode <browser|server>    switch the app's mode: its fixed files, and what its code must change
 
   --cwd <dir>   the app (default: this folder)       --json   one JSON object
   --force       init over an app that exists (your own files stay)
@@ -101,7 +107,7 @@ const listLine = (paths, n = 6) => (paths.length > n ? `${paths.slice(0, n).join
 
 function packageLines(changes) {
   if (!changes.length) return [];
-  return [`  package.json: ${changes.map((c) => `${c.name} ${c.from ?? "(new)"} → ${c.to}`).join(" · ")}`];
+  return [`  package.json: ${changes.map((c) => `${c.name} ${c.from ?? "(new)"} → ${c.to ?? "(removed)"}`).join(" · ")}`];
 }
 
 /** The lock's line, when it was written. What it left out is a note. */
@@ -127,7 +133,7 @@ function layText(r, verb) {
   if (r.blocks.length) lines.push(`  blocks: ${r.blocks.join(", ")}`);
   lines.push(...packageLines(r.package));
   lines.push(...lockLine(r.lock, r.written.includes("pnpm-lock.yaml")));
-  lines.push(`  ${plural(r.pinned, "fixed file")} pinned in check/pins.json · makersclaw.json records ${r.version}`);
+  lines.push(`  ${plural(r.pinned, "fixed file")} pinned in check/pins.json · makersclaw.json records ${r.version}, tables ${r.tables}, mode ${r.mode}`);
   for (const n of r.notes) lines.push(`  note: ${n}`);
   const next = [];
   if (r.install) next.push("npx makersclaw install");
@@ -200,14 +206,31 @@ function listText(items) {
   return lines.join("\n");
 }
 
+function modeText(r) {
+  const lines = [
+    r.changed
+      ? `makersclaw ${r.version} · template ${r.template} · mode ${r.was} → ${r.mode}`
+      : `makersclaw ${r.version} · template ${r.template} · already ${r.mode}: its fixed files laid again`,
+  ];
+  if (r.written.length) lines.push(`  wrote ${plural(r.written.length, "file")}: ${listLine(r.written)}`);
+  if (r.removed.length) lines.push(`  removed (${r.mode} mode lays none): ${listLine(r.removed)}`);
+  lines.push(...packageLines(r.package));
+  lines.push(`  ${plural(r.pinned, "fixed file")} pinned in check/pins.json · makersclaw.json records mode ${r.mode}`);
+  for (const n of r.notes) lines.push(`  note: ${n}`);
+  lines.push(`the app's own code${r.changed ? " must change" : ", in this mode"}:`);
+  for (const c of r.change) lines.push(`  - ${c}`);
+  lines.push(`next: ${[...(r.install ? ["npx makersclaw install"] : []), "npm run check"].join(" · ")}`);
+  return lines.join("\n");
+}
+
 function diffText(r) {
-  const lines = [`makersclaw ${r.from} → ${r.to} · ${r.compatible ? "compatible" : "changes the contract — update --major"}`];
+  const lines = [`makersclaw ${r.from} → ${r.to} · ${r.compatible ? "compatible" : "changes the contract — update --major"} · mode ${r.mode}`];
   if (!r.entries.length && !r.package.length) {
     lines.push(`  nothing to update — the app matches makersclaw ${r.to}`);
     return lines.join("\n");
   }
   for (const e of r.entries) lines.push(`  ${e.item.padEnd(14)} ${e.status.padEnd(8)} ${e.path}${e.detail ? ` — ${e.detail}` : ""}`);
-  for (const c of r.package) lines.push(`  ${"package.json".padEnd(14)} ${c.key}.${c.name}: ${c.from ?? "(new)"} → ${c.to}`);
+  for (const c of r.package) lines.push(`  ${"package.json".padEnd(14)} ${c.key}.${c.name}: ${c.from ?? "(new)"} → ${c.to ?? "(removed)"}`);
   lines.push(`next: npx makersclaw update${r.compatible ? "" : " --major"}`);
   return lines.join("\n");
 }
@@ -240,7 +263,7 @@ export function run(opts, { stderr = process.stderr, env = process.env } = {}) {
       return { result: packageInfo(), text: packageInfo().version };
     case "init": {
       const dir = opts.args[0] ? resolve(cwd, opts.args[0]) : cwd;
-      const result = init(dir, { template: opts.template ?? "next", force: Boolean(opts.force) });
+      const result = init(dir, { template: opts.template ?? "next", force: Boolean(opts.force), tables: opts.tables, mode: opts.mode });
       return { result: { dir, ...result }, text: layText(result, "init") };
     }
     case "update": {
@@ -262,6 +285,10 @@ export function run(opts, { stderr = process.stderr, env = process.env } = {}) {
       const result = install(cwd, { env, onNote: (line) => stderr.write(`makersclaw: ${line}\n`) });
       return { result: { dir: cwd, ...result }, text: installText(result) };
     }
+    case "mode": {
+      const result = mode(cwd, opts.args[0] ?? opts.mode);
+      return { result: { dir: cwd, ...result }, text: modeText(result) };
+    }
     case "diff": {
       const result = diff(cwd);
       return { result: { dir: cwd, ...result }, text: diffText(result) };