@montytools/cli 0.2.9 → 0.4.0

package/lib/compile.mjs

@@ -0,0 +1,67 @@
+// The ONE config-compile pipeline: esbuild-bundle a temp entry that runs the
+// app's OWN compileApp/zod/sdk instances on monty.config.ts, execute it in a
+// subprocess, parse the emitted metadata. Used by `monty dev`/`monty deploy`
+// (bin/monty.mjs) and the demo harness (scripts/demo.mjs) — one pipeline, so
+// what a demo installs is byte-for-byte what a deploy would send.
+import { spawnSync } from "node:child_process";
+import { mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+
+export class CompileError extends Error {
+  constructor(code, fix) {
+    super(`[${code}] ${fix}`);
+    this.code = code;
+    this.fix = fix;
+  }
+}
+
+// Compile appDir/monty.config.ts → { slug, name, icon?, schemaJson, exposure? }.
+// Throws CompileError:
+// - CONFIG_BUNDLE_FAILED — esbuild could not bundle (usually unlinked deps)
+// - CONFIG_COMPILE_FAILED — the config threw while loading
+export async function compileAppConfig(appDir) {
+  appDir = resolve(appDir); // esbuild requires an absolute absWorkingDir
+  // esbuild is a dependency of THIS package (@montytools/cli), so resolution
+  // from here works for any caller — no per-script resolution dance.
+  const { build } = await import("esbuild");
+  const tmpDir = join(appDir, ".monty");
+  mkdirSync(tmpDir, { recursive: true });
+  const entry = join(tmpDir, "compile-entry.mjs");
+  const out = join(tmpDir, "compile-out.mjs");
+  writeFileSync(entry, [
+    `import { app } from "../monty.config";`,
+    `import { compileApp } from "@montytools/sdk/compile";`,
+    `process.stdout.write(JSON.stringify(compileApp(app)));`,
+  ].join("\n"));
+  try {
+    await build({
+      entryPoints: [entry],
+      outfile: out,
+      bundle: true,
+      platform: "node",
+      format: "esm",
+      target: "node22",
+      absWorkingDir: appDir,
+      logLevel: "silent",
+    });
+    const result = spawnSync(process.execPath, [out], { encoding: "utf8" });
+    if (result.status !== 0) {
+      throw new CompileError(
+        "CONFIG_COMPILE_FAILED",
+        `monty.config.ts threw while loading:\n${result.stderr}\nFix the config (it must only call defineApp with zod tables).`,
+      );
+    }
+    return JSON.parse(result.stdout);
+  } catch (e) {
+    if (e?.errors) {
+      throw new CompileError(
+        "CONFIG_BUNDLE_FAILED",
+        `esbuild could not bundle monty.config.ts: ${e.errors[0]?.text ?? e.message}\nRun \`pnpm install\` so the app's deps link, then retry.`,
+      );
+    }
+    throw e;
+  } finally {
+    rmSync(entry, { force: true });
+    rmSync(out, { force: true });
+  }
+}

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "@montytools/cli",
-  "version": "0.2.9",
+  "version": "0.4.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TomasMonty/monty-v2.git",
+    "directory": "packages/cli"
+  },
   "type": "module",
   "bin": {
     "monty": "./bin/monty.mjs"
   },
   "files": [
     "bin",
+    "lib",
     "template",
     "skills"
   ],
@@ -15,7 +21,7 @@
   },
   "scripts": {
     "prepack": "node scripts/bundle-template.mjs",
-    "typecheck": "node --check bin/monty.mjs",
+    "typecheck": "node --check bin/monty.mjs && node --check lib/compile.mjs",
     "postinstall": "node bin/postinstall.mjs"
   },
   "dependencies": {

package/skills/monty-build/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: monty-build
-description: Build, run, and deploy Monty workspace apps. Use whenever the task involves a Monty app, monty.config.ts, the monty CLI (create/dev/deploy/add), the @montytools/sdk, or a prompt mentioning usemonty.dev. Covers folder discipline, the build loop, data/auth rules, and error handling.
+description: Build, run, and deploy Monty workspace apps. Use whenever the task involves a Monty app, monty.config.ts, the monty CLI (create/dev/logs/deploy/add), the @montytools/sdk, or a prompt mentioning usemonty.dev. Covers folder discipline, the build loop, data/auth rules, and error handling.
 ---
 
 # Building Monty apps
@@ -11,25 +11,43 @@ platform's job. The complete contract lives in the app's own `AGENTS.md`
 (nearest-file-wins — read it before writing code). This skill is the map, not
 the territory.
 
+Every app has two states: **Live** (published — what members and visitors
+see) and **Studio** (development — a running dev shell on `#dev`-sandboxed
+data, often already started for you by the Monty desktop). Those are the only
+names for them; "dev"/"prod" mean something else on this platform.
+
 ## Rules
 
-1. **Folders are managed.** Apps live in `~/Monty/<slug>`. `monty current`
-   tells you where you are; `cd "$(monty select <slug>)"` jumps to an app;
-   `monty apps` lists local ones. Never mkdir app folders by hand.
-2. **The loop:** `monty create <slug> --name "Name" --icon <lucide-icon>` →
+1. **Folders are managed.** Apps live in `~/.monty/apps/<id>` (a server-issued
+   id, minted when `monty create` registers the app — so create needs
+   `monty login` first). `monty current` tells you where you are;
+   `cd "$(monty select <slug>)"` jumps to an app; `monty apps` lists local
+   ones. Never mkdir app folders by hand, and never edit the `id:` line in
+   `monty.config.ts`.
+2. **The loop:** `monty create <slug> --name "Name" --icon <tabler-icon>` →
    (if the prompt includes a `build id`, pass it: `--build <id>` — the
    workspace's New app screen tracks your progress live) →
    `monty install` → edit `monty.config.ts` (zod tables) + `src/routes/` →
-   verify with `monty dev` (auto-port, already authenticated, sandboxed
-   data). **You are done when `monty dev` prints the workspace dev URL and
-   the app works — leave `monty dev` running.** Publishing to the whole
-   workspace is the OWNER'S click (Publish in the workspace menu bar);
-   **never run `monty deploy` yourself** unless the user explicitly asks
-   for a direct production deploy.
+   verify in Studio: run `monty dev` once — if the dev shell is already
+   running (the Monty desktop usually runs it for you) it prints the status,
+   Studio URL, and recent log lines, then **exits immediately**; if nothing
+   is running it starts the shell (start it in the background and move on).
+   Then iterate: edit code → vite hot-reloads → `monty logs -n 50` shows
+   whether it compiled and any browser errors. **You are done when
+   `monty dev` reports `state: online` (or prints the Studio URL on a fresh
+   start) and the app works.** Re-running `monty dev` is always safe — it
+   attaches, prints status, and exits. Never try to run a second dev
+   *server* for the same app (attach handles this for you) and never kill a
+   dev shell you didn't start; `monty dev --takeover` is the only sanctioned
+   restart when a session is wedged. Taking the app Live is the OWNER'S
+   click (Publish in the workspace menu bar); **never run `monty deploy`
+   yourself** unless the user explicitly asks for a direct Live deploy.
 3. **Everything through the CLI.** `monty install`, `monty build`,
    `monty typecheck`, `monty dev`, `monty deploy` — never run vite, tsc,
    pnpm, or npm scripts directly. `monty dev` auto-picks a free port and
-   prints it; `monty typecheck` builds first when needed.
+   prints it; `monty typecheck` builds first when needed. `monty logs`
+   (add `-f` to follow) is how you read the dev shell's output — vite build
+   errors, browser errors, and publish results all land there.
 4. **One import surface:** `@montytools/sdk` (`defineApp`, zod) and
    `@montytools/sdk/react` (hooks: `useList`, `useInsert`, …). Never import
    Clerk or Convex directly; never fetch external APIs from app code — the
@@ -41,18 +59,20 @@ the territory.
 7. **Errors are instructions.** Every failure prints
    `[MontyError CODE] Fix: …` — do exactly what the Fix says; don't guess.
    Typecheck failures block deploy by design.
-8. **Verify before deploy.** `monty dev` writes to a `#dev` sandbox — live
-   team records are never touched, so exercise the app for real.
+8. **Verify before publish.** The dev shell writes to the `#dev` Studio
+   sandbox — Live team records are never touched, so exercise the app for
+   real.
 
 ## CLI reference
 
 | command | purpose |
 |---|---|
 | `monty login` | browser sign-in (loopback authorize), once per machine |
-| `monty create <slug>` | stamp a new app into `~/Monty/<slug>` |
+| `monty create <slug>` | register the app in the workspace + stamp it into `~/.monty/apps/<id>` (needs login) |
 | `monty current` / `select` / `apps` | where am I / jump to app / list local |
 | `monty install` / `build` / `typecheck` | full lifecycle via the CLI — no raw pnpm/vite/tsc |
-| `monty dev` | run locally (auto-picks a free port), sandboxed data, auto-auth |
+| `monty dev` | run the app in Studio, or attach to an already-running session (auto-port, sandboxed data, auto-auth) |
+| `monty logs [-n N] [-f]` | read/follow the dev shell log — the debugging window after every edit |
 | `monty add <name…>` | install curated shadcn components |
-| `monty deploy` | build + typecheck + upload; app appears in the workspace |
+| `monty deploy` | build + typecheck + upload straight to Live (owner escape hatch) |
 | `monty skills` | (re)install this skill for your agent |

package/template/.claude/settings.json

@@ -0,0 +1,5 @@
+{
+  "permissions": {
+    "allow": ["Bash(monty:*)", "Edit(**)", "Write(**)"]
+  }
+}

package/template/AGENTS.md

@@ -10,8 +10,8 @@ Folders are managed for you: this app lives in `~/Monty/<slug>`. `monty current`
 
 | File | What it is |
 |---|---|
-| `monty.config.ts` | Your data schema — plain zod. The ONLY place data shapes are defined. Also `name` + `icon` (any [lucide](https://lucide.dev/icons) icon name, e.g. `"receipt"`, `"users"`) — Monty renders your app's logo tile from it. |
-| `src/routes/` | Your UI — TanStack Router file routes (`index.tsx` = `/`). |
+| `monty.config.ts` | Your data schema — plain zod. The ONLY place data shapes are defined. Also `name` + `icon` (any [Tabler](https://tabler.io/icons) icon name, e.g. `"receipt"`, `"users"`) — Monty renders your app's logo tile from it. |
+| `src/routes/` | Your UI — TanStack Router file routes (`index.tsx` = `/`). The starter `index.tsx` is a blank-canvas placeholder — replace it with the real app. |
 | `src/main.tsx` | Wiring. Do not edit. |
 
 ## Rules (violations break the app)
@@ -110,6 +110,63 @@ Every platform error is one line shaped like:
 | `UNAUTHENTICATED` / `NO_ACTIVE_WORKSPACE` | App isn't running through the Monty host/dev shell. |
 | `MISSING_ENV` / `NO_PROVIDER` | `.env.local` or the `<MontyProvider>` in `main.tsx` was removed. |
 
+## Server code (optional): functions, public endpoints, schedules
+
+When logic must not run in the browser (private tables, third-party APIs with
+secret keys, webhooks, clocks), create `server/index.ts` with named async
+exports. Web-standard APIs only (`fetch`, `crypto`, `URL`, …) — no `node:`
+imports; it runs on Cloudflare Workers when Live and inside `monty dev` in
+Studio. Every export gets `ctx`: `ctx.records` (full CRUD on all your
+tables, including ones the UI never exposes), `ctx.secrets` (see below),
+`ctx.viewer` (who called: member session/visitor/schedule/none), and
+`ctx.track()` (emit an event).
+
+```ts
+// server/index.ts
+import type { MontyFnContext, MontyPublicRequest } from "@montytools/sdk/server";
+
+// 1) App-called: invoke from the UI with useServerFn.
+export async function score(args: { sessionId: string }, ctx: MontyFnContext) {
+  const weights = await ctx.records.list("scoring");   // hidden table — fine here
+  return { verdict: weights.length > 0 ? "ok" : "empty" };
+}
+
+// 2) PUBLIC endpoint — declared in monty.config.ts `publicFns: ["stripe"]`,
+// then ANYONE on the internet can call GET/POST /__monty/public/stripe.
+// Verify a signature from ctx.secrets against the RAW req.body before
+// trusting anything; return { status, body?, contentType? } to control the
+// response (or return data for 200 JSON, or nothing for {"ok":true}).
+export async function stripe(req: MontyPublicRequest, ctx: MontyFnContext) {
+  if (!verify(req.headers["stripe-signature"], req.body, ctx.secrets.STRIPE_WEBHOOK_SECRET)) {
+    return { status: 401, body: "bad signature" };
+  }
+  await ctx.records.insert("payments", JSON.parse(req.body));
+  return { status: 200, body: "ok" };
+}
+
+// 3) SCHEDULED — declared in monty.config.ts `schedule: { digest: "0 9 * * *" }`
+// (5-field cron, UTC; max 3). Runs as digest({}, ctx) with
+// ctx.viewer = { lane: "schedule", cron }. Make it idempotent — re-runs happen.
+export async function digest(_args: Record<string, unknown>, ctx: MontyFnContext) { /* … */ }
+
+// 4) onEvent — reserved name: the platform calls it after every accepted
+// track() event. Forward to Slack/Meta/PostHog/your CRM here, with your keys.
+export async function onEvent(event: { name: string }, ctx: MontyFnContext) { /* … */ }
+```
+
+From the UI: `const score = useServerFn<Result>(app, "score"); await score({ sessionId })`.
+Public functions are NOT callable through `useServerFn` — only at their
+`/__monty/public/<name>` URL (and vice versa: undeclared functions are never
+public).
+
+**Secrets:** `monty secret set STRIPE_KEY` stores a key for Live (write-only,
+never in code or config). In Studio, put the same names in the gitignored
+`.monty/secrets.json`. Both arrive as `ctx.secrets.STRIPE_KEY`.
+
+**Studio behavior:** `monty dev` runs your schedules for real (a `cron:` line
+prints per firing, UTC) and serves public functions at
+`http://localhost:<port>/__monty/public/<name>` — curl them to test.
+
 ## Dev loop
 
 Everything goes through the `monty` CLI — never run vite, tsc, pnpm, or npm
@@ -123,11 +180,12 @@ monty dev         # Vite + HMR, auto-picks a free port and prints it
 Headless? Verify with `monty build` then `monty typecheck` (typecheck builds
 first when needed — the build generates `src/routeTree.gen.ts`).
 
-**Development vs production:** while `monty dev` runs, the app is live in
-the workspace in DEV mode (workspace admins only, tunneled, `#dev` sandboxed
-data). Shipping to the whole team is the owner's **Publish** click in the
+**Studio vs Live:** every Monty app has two states. While `monty dev` runs,
+the app is in **Studio** — visible in the workspace to admins only
+(tunneled, `#dev` sandboxed data). **Live** is the published state the
+whole team sees. Going Live is the owner's **Publish** click in the
 workspace menu bar — it signals your running `monty dev`, which builds,
-typechecks, and uploads. You are done when the app works in dev mode;
+typechecks, and uploads. You are done when the app works in Studio;
 leave `monty dev` running and let the owner publish. Only run
 `monty deploy` directly if the user explicitly asks.
 
@@ -135,12 +193,12 @@ leave `monty dev` running and let the owner publish. Only run
 `http://localhost:5173` is ALREADY AUTHENTICATED — no sign-in screen (the dev
 server mints short-lived workspace tokens from the CLI login). Point
 Playwright or any browser automation at it, click through your app against
-live sandboxed data, and read your errors in the `monty dev` terminal
+reactive sandboxed data, and read your errors in the `monty dev` terminal
 (`[browser:error] …` lines). Edit → HMR → look → fix: verify your own work.
 
-Dev writes go to a sandboxed `#dev` namespace inside your real workspace —
-iterate freely, live app data is untouched. The "DEV · … · sandbox data" badge
-confirms it.
+Studio writes go to a sandboxed `#dev` namespace inside your real workspace —
+iterate freely, Live app data is untouched. The "STUDIO · … · sandbox data"
+badge confirms it.
 
 ## Modeling tips
 

package/template/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Expenses</title>
+    <title>New app</title>
   </head>
   <body>
     <div id="root"></div>

package/template/monty.config.ts

@@ -1,20 +1,21 @@
-import { z } from "zod";
 import { defineApp } from "@montytools/sdk";
 
 // This file is the ONLY place data shapes are defined. Edit it, save, and the
-// typed hooks in your components update immediately.
+// typed hooks in your components update immediately. The starter ships with no
+// tables — declare each one as a zod object as the app needs it, e.g.:
+//
+//   import { z } from "zod";
+//   tables: {
+//     tasks: z.object({
+//       title: z.string().min(1),
+//       done: z.boolean().default(false),
+//     }),
+//   },
 export const app = defineApp({
-  slug: "expenses",
-  name: "Expenses",
-  icon: "receipt",
-  tables: {
-    expenses: z.object({
-      title: z.string().min(1),
-      amount: z.number().positive(),
-      status: z.enum(["draft", "submitted", "approved"]).default("draft"),
-      assigneeId: z.string().optional(), // a workspace member's userId (from useMembers)
-    }),
-  },
+  slug: "new-app",
+  name: "New app",
+  icon: "layout-grid",
+  tables: {},
 });
 
 export type App = typeof app;

package/template/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@fontsource-variable/roboto": "^5.2.10",
-    "@montytools/sdk": "^0.1.2",
+    "@montytools/sdk": "^0.1.4",
     "@tanstack/react-router": "1.170.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/template/src/routes/index.tsx

@@ -1,263 +1,38 @@
-import { useState } from "react";
 import { createFileRoute } from "@tanstack/react-router";
-import { CheckIcon, PlusIcon, TrashIcon } from "lucide-react";
+import { Sparkles } from "lucide-react";
 
-import {
-  useInsert,
-  useList,
-  useMembers,
-  useRemove,
-  useUpdate,
-} from "@montytools/sdk/react";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import {
   Empty,
   EmptyDescription,
   EmptyHeader,
+  EmptyMedia,
   EmptyTitle,
 } from "@/components/ui/empty";
-import {
-  Field,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Spinner } from "@/components/ui/spinner";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 
 import { app } from "../../monty.config";
 
 export const Route = createFileRoute("/")({
-  component: ExpenseBoard,
+  component: BlankCanvas,
 });
 
-type Status = "draft" | "submitted" | "approved";
-const NEXT_STATUS: Record<Status, Status | null> = {
-  draft: "submitted",
-  submitted: "approved",
-  approved: null,
-};
-const STATUS_VARIANT = {
-  draft: "secondary",
-  submitted: "default",
-  approved: "outline",
-} as const;
-
-function ExpenseBoard() {
-  const [statusFilter, setStatusFilter] = useState<Status | "all">("all");
-
-  // Live, typed, reactive — a teammate's write re-renders this list.
-  const { data: expenses, status, loadMore } = useList(app, "expenses", {
-    filter: statusFilter === "all" ? undefined : { status: statusFilter },
-    order: "desc",
-    limit: 50,
-  });
-  const members = useMembers();
-  const insert = useInsert(app, "expenses");
-  const update = useUpdate(app, "expenses");
-  const remove = useRemove(app, "expenses");
-
-  const [title, setTitle] = useState("");
-  const [amount, setAmount] = useState("");
-  // "__none" sentinel: a controlled Radix Select must never flip to undefined
-  // (it goes uncontrolled and keeps displaying the stale selection).
-  const [assigneeId, setAssigneeId] = useState("__none");
-  const [formError, setFormError] = useState<string | null>(null);
-
-  async function addExpense() {
-    setFormError(null);
-    try {
-      await insert({
-        title,
-        amount: Number(amount),
-        ...(assigneeId !== "__none" ? { assigneeId } : {}),
-      });
-      setTitle("");
-      setAmount("");
-      setAssigneeId("__none");
-    } catch (error) {
-      setFormError(error instanceof Error ? error.message : String(error));
-    }
-  }
-
-  const memberName = (userId?: string) =>
-    members?.find((m) => m.userId === userId)?.name ?? "—";
-
+// The starter ships empty on purpose: this page is what the person watching
+// the preview sees while their agent builds the first version. Replace this
+// whole route with the real app — don't build around it.
+function BlankCanvas() {
   return (
-    <main className="mx-auto flex max-w-4xl flex-col gap-6 p-6">
-      <header className="flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">Expenses</h1>
-        <Select
-          value={statusFilter}
-          onValueChange={(v) => setStatusFilter(v as Status | "all")}
-        >
-          <SelectTrigger className="w-40">
-            <SelectValue placeholder="Filter status" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectItem value="all">All statuses</SelectItem>
-              <SelectItem value="draft">Draft</SelectItem>
-              <SelectItem value="submitted">Submitted</SelectItem>
-              <SelectItem value="approved">Approved</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </header>
-
-      <Card>
-        <CardHeader>
-          <CardTitle>Add expense</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <FieldGroup>
-            <div className="flex flex-wrap items-end gap-4">
-              <Field className="min-w-48 flex-1">
-                <FieldLabel htmlFor="title">Title</FieldLabel>
-                <Input
-                  id="title"
-                  value={title}
-                  onChange={(e) => setTitle(e.target.value)}
-                  placeholder="Team lunch"
-                />
-              </Field>
-              <Field className="w-32">
-                <FieldLabel htmlFor="amount">Amount</FieldLabel>
-                <Input
-                  id="amount"
-                  type="number"
-                  value={amount}
-                  onChange={(e) => setAmount(e.target.value)}
-                  placeholder="42.50"
-                />
-              </Field>
-              <Field className="w-48">
-                <FieldLabel>Assignee</FieldLabel>
-                <Select value={assigneeId} onValueChange={setAssigneeId}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Unassigned" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem value="__none">Unassigned</SelectItem>
-                      {(members ?? []).map((m) => (
-                        <SelectItem key={m.userId} value={m.userId}>
-                          {m.name}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Button onClick={addExpense}>
-                <PlusIcon data-icon="inline-start" />
-                Add
-              </Button>
-            </div>
-            {formError && <FieldError>{formError}</FieldError>}
-          </FieldGroup>
-        </CardContent>
-      </Card>
-
-      {status === "LoadingFirstPage" && expenses.length === 0 ? (
-        <div className="flex justify-center p-12">
-          <Spinner />
-        </div>
-      ) : expenses.length === 0 ? (
-        <Empty>
-          <EmptyHeader>
-            <EmptyTitle>No expenses yet</EmptyTitle>
-            <EmptyDescription>
-              Add the first one above — it appears for every teammate in real
-              time.
-            </EmptyDescription>
-          </EmptyHeader>
-        </Empty>
-      ) : (
-        <Card>
-          <CardContent>
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Title</TableHead>
-                  <TableHead>Amount</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead>Assignee</TableHead>
-                  <TableHead className="w-40" />
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {expenses.map((e) => (
-                  <TableRow key={e._id}>
-                    <TableCell className="font-medium">{e.title}</TableCell>
-                    <TableCell>${e.amount.toFixed(2)}</TableCell>
-                    <TableCell>
-                      <Badge variant={STATUS_VARIANT[e.status]}>
-                        {e.status}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>{memberName(e.assigneeId)}</TableCell>
-                    <TableCell>
-                      <div className="flex justify-end gap-2">
-                        {NEXT_STATUS[e.status] && (
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() =>
-                              update(e._id, { status: NEXT_STATUS[e.status]! })
-                            }
-                          >
-                            <CheckIcon data-icon="inline-start" />
-                            {NEXT_STATUS[e.status]}
-                          </Button>
-                        )}
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => remove(e._id)}
-                        >
-                          <TrashIcon data-icon="inline-start" />
-                          Delete
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-            {status === "CanLoadMore" && (
-              <div className="flex justify-center pt-4">
-                <Button variant="ghost" onClick={() => loadMore()}>
-                  Load more
-                </Button>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      )}
+    <main className="grid min-h-dvh place-items-center p-6">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <Sparkles />
+          </EmptyMedia>
+          <EmptyTitle>{app.name} is a blank canvas</EmptyTitle>
+          <EmptyDescription>
+            Your agent builds the first version right on this page — changes
+            appear live as it works.
+          </EmptyDescription>
+        </EmptyHeader>
+      </Empty>
     </main>
   );
 }