makersclaw 0.1.0

package/templates/next/files/app/error-relay.jsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+import { claw, publishStatus, reportError } from "../lib/claw";
+
+// Errors React does not catch — a handler throwing, a rejected promise —
+// still reach Makersclaw: window.onerror and unhandledrejection post them
+// to _claw/events, where the platform agent reads them as console events.
+// The error boundaries (error.jsx, global-error.jsx) cover render errors.
+//
+// It also keeps <html data-claw-status> current from _claw/me (on mount
+// and whenever the tab comes back), so reportError can tag an error
+// "preview" while the artifact is a draft. This is the fixed layer's job:
+// the shell is the agent's file and may never call useArtifact().
+export default function ErrorRelay() {
+  useEffect(() => {
+    const controller = new AbortController();
+    const publish = async () => {
+      const r = await claw("me", { signal: controller.signal });
+      if (r.ok) publishStatus(r.data?.artifact?.status);
+    };
+    const onVisible = () => {
+      if (document.visibilityState === "visible") publish();
+    };
+    const onError = (event) => {
+      const err = event.error;
+      reportError({
+        message: err?.message || event.message || "error",
+        stack: err?.stack,
+        url: location.href,
+      });
+    };
+    const onRejection = (event) => {
+      const r = event.reason;
+      reportError({
+        message: r?.message || (typeof r === "string" ? r : "unhandled rejection"),
+        stack: r?.stack,
+        url: location.href,
+      });
+    };
+    publish();
+    document.addEventListener("visibilitychange", onVisible);
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onRejection);
+    return () => {
+      controller.abort();
+      document.removeEventListener("visibilitychange", onVisible);
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onRejection);
+    };
+  }, []);
+  return null;
+}

package/templates/next/files/app/error.jsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { reportError } from "../lib/claw";
+
+// The route-level error boundary: a surface that throws while rendering
+// lands here, inside the shell, and the error is posted to _claw/events so
+// the platform agent sees it. Next.js strips server error messages in
+// production; `digest` is what the server log can be searched for.
+export default function SurfaceError({ error, reset }) {
+  const [reported, setReported] = useState(null);
+  useEffect(() => {
+    reportError({
+      message: error?.message || "render error",
+      stack: [error?.stack, error?.digest ? `digest: ${error.digest}` : ""].filter(Boolean).join("\n"),
+      url: location.href,
+    }).then((r) => setReported(Boolean(r?.ok)));
+  }, [error]);
+
+  return (
+    <div className="max-w-prose">
+      <p className="text-xs uppercase tracking-wide text-muted-foreground">Something broke on this surface</p>
+      <h1 className="mt-1 text-lg font-semibold">The page could not render</h1>
+      <p className="mt-2 text-sm text-muted-foreground">
+        {error?.message || "An error happened while rendering."}
+        {error?.digest ? <span className="font-mono text-xs text-muted-foreground"> ({error.digest})</span> : null}
+      </p>
+      <p className="mt-2 text-xs text-muted-foreground">
+        {reported === true
+          ? "Makersclaw has been told and will fix it."
+          : reported === false
+            ? "Makersclaw could not be reached to report this."
+            : "Reporting to Makersclaw…"}
+      </p>
+      <button
+        type="button"
+        onClick={() => reset()}
+        className="mt-4 rounded-md border border-border px-3 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/templates/next/files/app/global-error.jsx

@@ -0,0 +1,36 @@
+"use client";
+
+import "./globals.css";
+import { useEffect } from "react";
+import { reportError } from "../lib/claw";
+
+// The last boundary: an error in the root layout itself. It must render its
+// own <html> and <body> (the layout is gone, so it imports globals.css
+// itself), and it reports the same way as error.jsx.
+export default function GlobalError({ error, reset }) {
+  useEffect(() => {
+    reportError({
+      message: error?.message || "layout error",
+      stack: [error?.stack, error?.digest ? `digest: ${error.digest}` : ""].filter(Boolean).join("\n"),
+      url: location.href,
+    });
+  }, [error]);
+
+  return (
+    <html lang="en" data-theme="dark">
+      <body className="bg-background p-10 font-sans text-foreground">
+        <p className="text-xs uppercase tracking-wide text-muted-foreground">Something broke in the shell</p>
+        <h1 className="mt-1 text-lg font-semibold">The app could not render</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{error?.message || "An error happened while rendering."}</p>
+        <p className="mt-2 text-xs text-muted-foreground">Makersclaw has been told.</p>
+        <button
+          type="button"
+          onClick={() => reset()}
+          className="mt-4 rounded-md border border-border px-3 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          Try again
+        </button>
+      </body>
+    </html>
+  );
+}

package/templates/next/files/app/globals.css

@@ -0,0 +1,178 @@
+/* Tailwind reads exactly the files `npm run check` reads — never a .json,
+   a dot-file or public/ — so a class name can only reach the page from a
+   file the rules have seen. Paths are relative to this file. */
+@import "tailwindcss" source(none);
+@source "../app/**/*.{js,jsx}";
+@source "../components/**/*.{js,jsx}";
+@source "../surfaces/**/*.{js,jsx}";
+@source "../lib/**/*.js";
+@source "../surfaces.js";
+
+/* Dark is a data-theme on <html>, set by app/layout.jsx from the desk
+   (x-claw-theme, then the claw_theme cookie), never the system preference:
+   the OS window decides. Kept for `dark:`; with the workspace theme below
+   you should not need it — every token already flips with the preset. */
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+/* ------------------------------------------------------------------------
+   THE WORKSPACE THEME. Not yours to edit.
+
+   Every colour, face and radius in this app comes from the workspace —
+   System Settings → Appearance on the desk — as the stylesheet
+   `_claw/theme.css`, linked from app/layout.jsx. That sheet sets the
+   variables of the first :root block; the values here are the Makersclaw
+   preset, so the app looks right with no sheet (local `next dev`) and
+   every app in a workspace looks like the desk and like each other.
+
+   The slots (--card, --primary, …) are what a preset may pin; when it
+   does not, the fallback derives them from the three-colour palette, the
+   same maths the desk uses. Use the utilities (bg-card, text-primary,
+   border-border, rounded-lg, font-sans…) and nothing else: never a hex,
+   rgb(), hsl() or oklch() in this app. `npm run check` refuses one.
+   ------------------------------------------------------------------------ */
+@layer base {
+  :root {
+    color-scheme: dark;
+
+    --background-base: #1c1c1c;
+    --background-alpha: 1;
+    --background: color-mix(in srgb, #1c1c1c 100%, transparent);
+    --midground-base: #fbe9cf;
+    --midground-alpha: 1;
+    --midground: color-mix(in srgb, #fbe9cf 100%, transparent);
+    --foreground-base: #ffffff;
+    --foreground-alpha: 0;
+    --foreground: color-mix(in srgb, #ffffff 0%, transparent);
+
+    --theme-font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --theme-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
+    --theme-font-display: var(--theme-font-sans);
+    --theme-base-size: 15px;
+    --theme-line-height: 1.55;
+    --theme-letter-spacing: -0.01em;
+
+    --radius: 0.5rem;
+    --theme-radius: 0.5rem;
+    --theme-spacing-mul: 1;
+    --theme-density: comfortable;
+  }
+
+  html {
+    font-family: var(--theme-font-sans);
+    font-size: var(--theme-base-size);
+    line-height: var(--theme-line-height);
+    letter-spacing: var(--theme-letter-spacing);
+  }
+
+  body {
+    min-height: 100dvh;
+    background: var(--color-background);
+    color: var(--color-foreground);
+  }
+
+  [data-nums] {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Native controls the kit wraps (components/ui): the workspace scheme,
+     not the browser's default chrome. */
+  select,
+  input,
+  textarea,
+  button {
+    font: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+  }
+
+  dialog {
+    color: inherit;
+  }
+
+  dialog::backdrop {
+    background: color-mix(in srgb, var(--background-base) 70%, transparent);
+  }
+
+  [popover] {
+    color: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+}
+
+/* The boundary where the workspace theme stops: a depiction (README §3c),
+   framed by the kit's <Depiction>, is a picture of something that exists
+   elsewhere and wears that place's colours and face. `font` shorthand
+   resets family, size, weight, line-height and every font-variant in one
+   go (undoing the preset's face and [data-nums]); letter-spacing and
+   line-height undo html's; CanvasText follows the box's own color-scheme;
+   the density multiplier is pinned so a slipped p-4 scales less wrongly
+   (depictions are px-only regardless — rem is the workspace's base size
+   and no wrapper can undo it). Never `all: initial`: it would not reset
+   custom properties, and font-family: initial is Times. */
+@layer components {
+  [data-depiction] {
+    isolation: isolate;
+    color-scheme: light;
+    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-align: start;
+    color: CanvasText;
+    --theme-spacing-mul: 1;
+    --default-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  }
+  [data-depiction][data-scheme="dark"] {
+    color-scheme: dark;
+  }
+}
+
+/* The tokens the utilities read. A slot the preset pinned wins; otherwise
+   the palette derives it. Mixes are opaque (mixed WITH the canvas, never
+   alpha on text) so type keeps its contrast on every ground. */
+@theme inline {
+  --color-background: var(--background-base);
+  --color-foreground: var(--midground-base);
+
+  --color-card: var(--card, color-mix(in srgb, var(--midground-base) 4%, var(--background-base)));
+  --color-card-foreground: var(--card-foreground, var(--midground-base));
+  --color-popover: var(--popover, color-mix(in srgb, var(--midground-base) 6%, var(--background-base)));
+  --color-popover-foreground: var(--popover-foreground, var(--midground-base));
+
+  --color-primary: var(--primary, var(--midground-base));
+  --color-primary-foreground: var(--primary-foreground, var(--background-base));
+  --color-secondary: var(--secondary, color-mix(in srgb, var(--midground-base) 8%, var(--background-base)));
+  --color-secondary-foreground: var(--secondary-foreground, var(--midground-base));
+  --color-muted: var(--muted, color-mix(in srgb, var(--midground-base) 8%, var(--background-base)));
+  --color-muted-foreground: var(--muted-foreground, color-mix(in srgb, var(--midground-base) 72%, var(--background-base)));
+  --color-accent: var(--accent, color-mix(in srgb, var(--midground-base) 12%, var(--background-base)));
+  --color-accent-foreground: var(--accent-foreground, var(--midground-base));
+
+  --color-destructive: var(--destructive, #fb2c36);
+  --color-destructive-foreground: var(--destructive-foreground, #ffffff);
+  --color-success: var(--success, #4ade80);
+  --color-warning: var(--warning, #ffbd38);
+  --color-info: var(--info, #60a5fa);
+
+  --color-border: var(--border, color-mix(in srgb, var(--midground-base) 15%, transparent));
+  --color-input: var(--input, color-mix(in srgb, var(--midground-base) 15%, transparent));
+  --color-ring: var(--ring, var(--midground-base));
+
+  --radius-sm: calc(var(--theme-radius) - 4px);
+  --radius-md: calc(var(--theme-radius) - 2px);
+  --radius-lg: var(--theme-radius);
+  --radius-xl: calc(var(--theme-radius) + 4px);
+
+  --font-sans: var(--theme-font-sans);
+  --font-mono: var(--theme-font-mono);
+  --font-display: var(--theme-font-display);
+
+  /* Density: the preset's multiplier scales every p-N / gap-N / space-N. */
+  --spacing: calc(0.25rem * var(--theme-spacing-mul, 1));
+
+  /* One sub-xs tier for dense captions; the only size below text-xs. */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+}

package/templates/next/files/app/layout.jsx

@@ -0,0 +1,51 @@
+import "./globals.css";
+import { cookies, headers } from "next/headers";
+import { surfaceNav } from "../surfaces";
+import AutoRefresh from "./auto-refresh";
+import ErrorRelay from "./error-relay";
+import Shell from "./shell";
+
+// FIXED — the platform agent does not edit this file. Design lives in
+// app/shell.jsx and the surfaces; colour lives nowhere in the app.
+//
+// Nothing here is prerendered: the theme comes from a cookie and the
+// surfaces read the workspace database, so `next build` never needs data.
+export const dynamic = "force-dynamic";
+
+export const metadata = { title: process.env.CLAW_PRODUCT || "Artifact" };
+
+// <html> carries what the browser-side code reads: the base path for
+// lib/claw.js, the product name, and data-theme. The theme follows the
+// desk: the OS window opens the app with ?theme=light|dark and the
+// product proxy repeats it as the x-claw-theme header on every request
+// (middleware.js explains); the claw_theme cookie covers a run without
+// the proxy. Dark when neither says — the desk is dark.
+//
+// The palette follows the WORKSPACE: <head> links `_claw/theme.css`, the
+// preset picked in System Settings → Appearance, served by the product
+// proxy with the page's own cookie as identity (never the sandbox). A
+// stylesheet in <head> blocks first paint, so there is no flash of the
+// fallback; app/globals.css holds the same preset as defaults for a run
+// with no proxy (local `next dev`, where the link 404s harmlessly). The
+// href is prefixed by hand: Next's basePath applies to next/link and
+// assets, not to a literal <link>.
+export default async function RootLayout({ children }) {
+  const basePath = process.env.CLAW_BASE_PATH || "";
+  const name = process.env.CLAW_PRODUCT || "Artifact";
+  const wanted = (await headers()).get("x-claw-theme") || (await cookies()).get("claw_theme")?.value;
+  const theme = wanted === "light" ? "light" : "dark";
+  return (
+    <html lang="en" data-claw-base-path={basePath} data-claw-product={name} data-theme={theme}>
+      <head>
+        <link rel="stylesheet" href={`${basePath}/_claw/theme.css`} />
+      </head>
+      <body>
+        <AutoRefresh />
+        <ErrorRelay />
+        <Shell name={name} surfaces={surfaceNav()}>
+          {children}
+        </Shell>
+      </body>
+    </html>
+  );
+}

package/templates/next/files/app/not-found.jsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { homeSurface } from "../surfaces";
+
+// The manifest can be empty (app/page.jsx explains), so the way back is
+// "/" then — never a link built from an entry that is not there.
+export default function NotFound() {
+  const home = homeSurface();
+  return (
+    <div className="max-w-prose">
+      <p className="text-xs uppercase tracking-wide text-muted-foreground">Not here</p>
+      <h1 className="mt-1 text-lg font-semibold">No such surface</h1>
+      <p className="mt-2 text-sm text-muted-foreground">This app has no surface at this address.</p>
+      <p className="mt-4 text-sm">
+        <Link
+          href={home ? `/s/${encodeURIComponent(home.key)}` : "/"}
+          className="underline outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {home ? `Go to ${home.label}` : "Go to the start"}
+        </Link>
+      </p>
+    </div>
+  );
+}

package/templates/next/files/app/page.jsx

@@ -0,0 +1,22 @@
+import { redirect } from "next/navigation";
+import { homeSurface } from "../surfaces";
+
+export const dynamic = "force-dynamic";
+
+// "/" is never a page of its own: it sends the viewer to the home surface —
+// the entry flagged `home` in surfaces.js, else the first one. With no
+// entry at all (the template as shipped, or an app whose blueprint lists
+// nothing yet) there is nowhere to send them, so it says so instead of
+// redirecting to /s/undefined. Plain Tailwind: this page is seen for
+// seconds, before the platform agent writes the manifest.
+export default function Home() {
+  const home = homeSurface();
+  if (home) redirect(`/s/${encodeURIComponent(home.key)}`);
+  return (
+    <div className="max-w-prose">
+      <p className="text-xs uppercase tracking-wide text-muted-foreground">Empty</p>
+      <h1 className="mt-1 text-lg font-semibold">No surfaces yet.</h1>
+      <p className="mt-2 text-sm text-muted-foreground">Makersclaw is listing them.</p>
+    </div>
+  );
+}

package/templates/next/files/app/s/[key]/page.jsx

@@ -0,0 +1,47 @@
+import { notFound } from "next/navigation";
+import surfaces from "../../../surfaces";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({ params }) {
+  const { key } = await params;
+  const s = surfaces.find((x) => x.key === key);
+  const name = process.env.CLAW_PRODUCT || "Artifact";
+  return { title: s ? `${s.label} · ${name}` : name };
+}
+
+// One route for every surface. A manifest entry without a component is
+// planned — the platform agent has named it but not built it yet — and
+// says so; a built one renders its component with the entry's plain data
+// (never the component itself: a client surface cannot receive a function).
+export default async function SurfacePage({ params, searchParams }) {
+  const { key } = await params;
+  const s = surfaces.find((x) => x.key === key);
+  if (!s) notFound();
+  if (!s.component) return <Planned surface={s} />;
+  const Surface = s.component;
+  const sp = (await searchParams) ?? {};
+  return (
+    <Surface surface={{ key: s.key, kind: s.kind ?? null, label: s.label, source: s.source ?? null }} searchParams={sp} />
+  );
+}
+
+function Planned({ surface }) {
+  return (
+    <div className="max-w-prose">
+      <p className="text-xs uppercase tracking-wide text-muted-foreground">Planned</p>
+      <h1 className="mt-1 text-lg font-semibold">Makersclaw is building this</h1>
+      <p className="mt-2 text-sm text-muted-foreground">
+        {surface.label}
+        {surface.kind ? ` will be a ${surface.kind}` : null}
+        {surface.source ? (
+          <>
+            {" "}
+            over <code className="font-mono text-xs">{surface.source}</code>
+          </>
+        ) : null}
+        . It appears here as soon as it is built.
+      </p>
+    </div>
+  );
+}

package/templates/next/files/app/shell.jsx

@@ -0,0 +1,64 @@
+"use client";
+
+// STARTER — replace this file first. You design the inside of the window:
+// nav, layout, type, density. NOT colour: every colour here is a token
+// (bg-background, text-muted-foreground, border-border…) that the
+// workspace's theme fills in, so keep using tokens in what you write.
+// The OS window already shows the app's name and its run controls
+// (Pause, Run now, Edit), and its tab strip carries Agent, Runs and
+// Activity; never repeat any of them. This shell is the App tab: the
+// domain surfaces and nothing else.
+//
+// Mobile first: this starter is one column with the surfaces as a strip
+// along the top, and grows a side rail from 640px. Start narrow, widen.
+//
+// ONE THING TO KEEP when you replace it: `next/link`. The app runs under
+// a base path and <Link> applies it; a plain <a href="/s/..."> resolves
+// against the origin instead and the click leaves the app, loading the
+// Makersclaw dashboard inside this frame. The page still answers 200, so
+// nothing catches it but a click (README §4).
+//
+// Props: name (the app's name — for aria labels, not for display),
+// surfaces (surfaceNav() from surfaces.js: { key, label, kind, source,
+// home, built }), children (the current surface).
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cx } from "../components/ui";
+
+export default function Shell({ name, surfaces, children }) {
+  const pathname = usePathname() ?? "";
+  const activeKey = decodeURIComponent(/^\/s\/([^/?#]+)/.exec(pathname)?.[1] ?? "");
+
+  return (
+    <div className="flex min-h-dvh flex-col bg-background text-foreground sm:flex-row">
+      <nav
+        aria-label={`${name} surfaces`}
+        className="shrink-0 overflow-x-auto border-b border-border p-2 sm:w-44 sm:overflow-visible sm:border-b-0 sm:border-r sm:p-3"
+      >
+        <ul className="flex gap-1 sm:flex-col">
+          {surfaces.map((s) => {
+            const active = s.key === activeKey;
+            return (
+              <li key={s.key} className="shrink-0">
+                <Link
+                  href={`/s/${encodeURIComponent(s.key)}`}
+                  aria-current={active ? "page" : undefined}
+                  className={cx(
+                    "flex min-h-9 items-center justify-between gap-2 rounded-md px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    active ? "bg-accent text-accent-foreground" : "hover:bg-accent",
+                    !s.built && "text-muted-foreground",
+                  )}
+                >
+                  <span>{s.label}</span>
+                  {s.built ? null : <span className="text-2xs uppercase tracking-wide">planned</span>}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+      <main className="min-w-0 flex-1 p-4 sm:p-6">{children}</main>
+    </div>
+  );
+}