@pylonsync/create-pylon 0.3.344 → 0.3.346

package/bin/create-pylon.js

@@ -164,6 +164,36 @@ const TEMPLATE_REGISTRY = {
 		platforms: [],
 		unified: true,
 	},
+	crm: {
+		blurb:
+			"Sales CRM — companies, contacts, and deals on a LIVE pipeline board: drag a deal and it moves on every teammate's board instantly. ⌘K search, activity timeline, weighted forecast, dense keyboard-first UI. Seeds a demo pipeline on first sign-in. One SSR app.",
+		platforms: [],
+		unified: true,
+	},
+	helpdesk: {
+		blurb:
+			"Support inbox — tickets triaged by priority and SLA, a LIVE queue that reorders as breaches approach, shared threads with internal notes, and assignment that lands on every agent's screen at once. ⌘K search. Seeds a demo queue on first sign-in. One SSR app.",
+		platforms: [],
+		unified: true,
+	},
+	invoices: {
+		blurb:
+			"Invoicing — clients, line items, and payments, with totals and ageing DERIVED rather than stored (integer cents throughout). Recording a payment flips the balance and status on every open tab. ⌘K search. Seeds a demo book, including an overdue and a part-paid invoice. One SSR app.",
+		platforms: [],
+		unified: true,
+	},
+	inventory: {
+		blurb:
+			"Stock control — products plus an APPEND-ONLY movement ledger; on-hand is the sum of the ledger, never a mutable counter, so concurrent receipts can't lose units and every level is explainable. Reorder flags, valuation at cost, live across tabs. Seeds a demo shelf. One SSR app.",
+		platforms: [],
+		unified: true,
+	},
+	projects: {
+		blurb:
+			"Client project delivery — a LIVE task board (drag and it moves on every teammate's board), plus time logged as an APPEND-ONLY ledger so concurrent entries can't be lost and every billed hour traces to who logged it. Budget tracking, billable rollups. Seeds two demo projects. One SSR app.",
+		platforms: [],
+		unified: true,
+	},
 	"ai-chat": {
 		blurb:
 			"Streaming AI chat — token streaming via the built-in /api/ai/stream (your key stays server-side), multi-conversation history that's owner-scoped + synced across tabs in realtime, guest or signed-in. Set PYLON_AI_API_KEY to enable. One SSR app.",
@@ -248,6 +278,11 @@ Examples:
   npm create @pylonsync/pylon my-app --template agency       # studio/agency + live project availability
   npm create @pylonsync/pylon my-app --template marketplace  # two-sided marketplace + realtime offers
   npm create @pylonsync/pylon my-app --template directory    # searchable directory + facets + live upvotes
+  npm create @pylonsync/pylon my-app --template crm          # sales CRM — live pipeline board, ⌘K, activity timeline
+  npm create @pylonsync/pylon my-app --template helpdesk     # support inbox — SLA triage, shared threads, internal notes
+  npm create @pylonsync/pylon my-app --template invoices     # invoicing — line items, payments, derived ageing
+  npm create @pylonsync/pylon my-app --template inventory    # stock control — append-only ledger, reorder flags
+  npm create @pylonsync/pylon my-app --template projects     # client delivery — task board, time tracking, budgets
   npm create @pylonsync/pylon my-app --template ai-chat      # streaming LLM chat + synced history
   npm create @pylonsync/pylon my-app --template ai-studio    # generative media studio + live gallery
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.344",
+  "version": "0.3.346",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

package/templates/crm/AGENTS.md

@@ -0,0 +1,116 @@
+# AGENTS.md: working in a Pylon project
+
+Pylon serves the API, auth, sync, WebSocket, SSE, and native React 19 SSR from one Rust process on one port. Treat this app as production infrastructure: it supports real auth, SQLite or Postgres, row-level policies, jobs, search, and one-command deploys. Declare entities, policies, and server functions in TypeScript; the binary handles the runtime. Read the full API reference at https://docs.pylonsync.com/llms-full.txt before guessing an API name.
+
+## Directory conventions
+
+**Unified SSR app:**
+- `app.ts`: data model + manifest (`entity()` + `field.*`, queries/actions/policies, `routes: await discoverAppRoutes()`). Ends with `console.log(JSON.stringify(manifest))`.
+- `app/`: file-based SSR routes. `app/page.tsx` → `/`, `app/about/page.tsx` → `/about`, `app/blog/[slug]/page.tsx` → `/blog/:slug`. `app/layout.tsx` is the shell; `app/error.tsx` / `app/not-found.tsx` are boundaries.
+- `app/globals.css`: Tailwind v4 entrypoint (auto-compiled and injected).
+- `functions/`: server functions, one per file, `default`-exported.
+- `.pylon/`: local dev state (SQLite, jobs, sessions, uploads). Created by `pylon dev`. Do not commit.
+
+**Monorepo app:** backend is `apps/api/` (entry `apps/api/schema.ts`, handlers in `apps/api/functions/`); frontend in `apps/web/`. `pylon.manifest.json` / `pylon.client.ts` are generated; do not hand-edit.
+
+## The core authoring loop
+
+1. **Define an entity:** `entity("Thing", { name: field.string(), done: field.boolean().default(false) })`. Modifiers: `.optional()`, `.unique()`, `.readonly()` (settable on insert, rejected on client update; use for `authorId`/`orgId`), `.serverOnly()` (never in HTTP responses), `.encrypted()` (AEAD at rest, needs `PYLON_ENCRYPTION_KEY`), `.crdt("text")` (collaborative).
+2. **Write a policy:** `policy({ entity: "Thing", allowRead, allowInsert, allowUpdate, allowDelete })` with CEL-like expressions over `auth.*` / `data.*` (e.g. `"auth.userId == data.authorId"`). Omitted actions deny by default. `pylon lint` flags wide-open development policies such as `allow*: "true"`; tighten them before shipping.
+3. **Author a function** in `functions/<name>.ts`: `query` (read-only), `mutation` (transactional read+write), or `action` (external I/O, no direct `ctx.db`). Import `{ query, mutation, action, v }` from `@pylonsync/functions`. `auth` defaults to `"user"` (secure-by-default); set `"public"` explicitly for unauthenticated access. Use `ctx.db.*`, `ctx.auth.userId`, `ctx.error(code, msg)`.
+4. **Read it on the client:** `db.useQuery("Thing")` (live, re-renders on any write) or `db.useQueryOne("Thing", id)`. Call functions with `db.fn(name, args)` / `callFn`. On SSR pages, read via `use(serverData.list("Thing"))` inside `<Suspense>`.
+
+## Key gotchas
+
+- **Policies deny by default; server functions BYPASS them.** Direct client CRUD (`/api/entities/*`) and sync are policy-checked. Functions run with full DB access; enforce trust with `ctx.auth` checks inside the handler, not policies.
+- **Type page props from the SDK, don't hand-roll them.** `import type { PageProps, Metadata } from "@pylonsync/react"`. Every page/layout gets `{ url, params, searchParams, auth, response, serverData }`; `PageProps<{ slug: string }>` types a `[slug]` route's params. Request headers/cookies are intentionally NOT on `PageProps`; they're server-only and stripped from hydration, so reading them in the render would mismatch.
+- **Anonymous output caching is opt-in and conditional.** `export const revalidate = 60` makes a page CDN-cacheable (`public, s-maxage=60`) only when the render is auth-independent: it must not read `props.auth`, set a cookie, or run with strict per-caller policies (`PYLON_STRICT_FN_POLICIES`). `export const dynamic = "force-static"` caches until the next deploy; `"force-dynamic"` never caches. When any condition fails, the page is `no-cache`. Eligible renders also use the origin disk cache at `.pylon/.cache/ssr`: a cookie-less GET without a query string is served from disk for the TTL and rerendered when stale. The cache is namespaced per deploy, cleared by each build, disabled in `pylon dev`, and invalidated by the `revalidate` TTL or the next deploy.
+- **No-JS forms use `route.ts` and `<Form>`.** Add `app/.../route.ts` exporting `export const POST: RouteHandler = async ({ form, db, response, auth }) => { await db.insert("X", {...}); response.redirect("/x?ok=1"); }` (303 POST-redirect-GET by default). Render `<Form action="/x">` from `@pylonsync/react` with plain `<input name=...>`. It uses native POST → handler → redirect without JavaScript and no-reload enhancement with JavaScript. The handler's `db` is read+write under the mutation trust model, so gate it on `auth`. CSRF protection is automatic through the Origin gate and SameSite=Lax. Multipart uploads are not supported yet; use URL-encoded forms and `/api/files`.
+- **`loading.tsx` streams a skeleton while the page's data resolves.** Drop `app/.../loading.tsx` (default export, page props) and the nearest one becomes a route-level Suspense fallback: Pylon flushes the shell + skeleton immediately, then reveals the real page when its top-level `use(serverData…)` resolves (no blank page). It only shows when the PAGE suspends; a page that wraps its own `<Suspense>` around a child (like `/dashboard` in this template) handles that itself. The skeleton is SERVER-ONLY: don't read `serverData` in it. A page with no `loading.tsx` is buffered (unchanged).
+- **`export const streaming = true` streams a page's inner `<Suspense>` boundaries.** Without it or a `loading.tsx`, the page is buffered until all suspended children resolve. With it, the shell and fallbacks flush immediately, then each boundary streams its content. Streaming commits the HTTP head before suspended subtrees finish, so the page is never CDN- or disk-cacheable; do not combine it with `export const revalidate`. Calls to `response.setStatus`, `setCookie`, `redirect`, or `notFound` only take effect during the synchronous shell render. A call from a suspended subtree is dropped and logged. An error from a deep `<Suspense>` child resolves through the nearest `error.tsx` at HTTP 200 rather than 5xx. Type the config with `import type { RouteSegmentConfig } from "@pylonsync/react"`.
+- **`error.tsx` / `not-found.tsx` boundaries are HYDRATED (interactive).** `app/.../error.tsx` catches a throw below it (HTTP 500) and receives `{ error: { message, digest }, reset }` (`import type { ErrorBoundaryProps }`); `reset()` re-attempts the route; the stack NEVER reaches the client (dev overlay + logs only). `app/.../not-found.tsx` renders at 404 (also for `response.notFound()`) and gets the page props (`NotFoundProps`), no `reset`. Both run useState/onClick/hooks.
+- **Client navigation hooks live in @pylonsync/react.** `useRouter()` → `{ push, replace, back, forward, refresh, prefetch }`; `useSearchParams()` → reactive `URLSearchParams`; `usePathname()` → reactive pathname. The hooks are CLIENT-reactive; during SSR they return defaults (empty params / "/"); for server-side URL values read the `url` / `searchParams` page props.
+- **Dynamic + catch-all routes follow Next conventions.** `app/blog/[slug]/page.tsx` → `params.slug`. `app/docs/[...path]/page.tsx` is a catch-all (matches `/docs/a/b/c`; `params.path === "a/b/c"`; `.split("/")` for segments). `app/shop/[[...filters]]/page.tsx` is an optional catch-all (also matches the bare `/shop`, with `params.filters === ""`). A catch-all must be the last segment; static beats dynamic beats catch-all on overlap.
+- **`serverData` (SSR) is READ-ONLY.** No write methods; the runtime rejects write frames (`SSR_WRITE_FORBIDDEN`). Mutations belong in actions/functions, never in a page render.
+- **`response.*` / `response.redirect()` / `response.notFound()` must fire in the synchronous shell render**, before any `await` / `<Suspense>`. The HTTP head commits when the shell is ready; status/headers/cookies set from a suspended subtree are lost, and `redirect`/`notFound` thrown below a Suspense boundary are swallowed.
+- **`ctx.llm` and `ctx.connections` are on mutation + action only, NOT query** (reactive purity). `action` has no direct `ctx.db`; use `ctx.runQuery` / `ctx.runMutation`.
+- **It's `db.useQueryOne`, not `useOne`.** Validators and field types have aliases: `v.bool`/`v.boolean`, `v.float`/`v.number`.
+- **Use the supported file and scheduling APIs.** Files go through `<FileUpload>` and `/api/files/*`; there is no `ctx.files`. One-shot work uses `ctx.scheduler.runAfter`, `runAt`, or `cancel`; there is no `defineWorkflow` or `defineJob`. Recurring work uses `cron("0 * * * *", "fnName")` in `buildManifest({ crons: [...] })`, imported from `@pylonsync/sdk`. Make the target function `internal: true`. It runs with anonymous auth, but its own `ctx.db.*` calls are server-side and bypass policies. Use `ctx.auth.elevate({ admin: true, reason: "..." })`, with a mandatory reason, only when chaining another internal function through `ctx.scheduler`.
+
+## Testing
+
+`pylon test` discovers every `*.test.ts` / `*.test.tsx` file under `tests/` (or `functions/`) and runs it with **Bun's test runner** (`import { test, expect } from "bun:test"`). Run the suite with `pylon test` (or `npm test`); filter with `pylon test <substring>`. This template ships `bunfig.toml` + `tests/setup.ts` (registers happy-dom) so component tests render out of the box, plus starter tests under `tests/`; replace them with your own.
+
+**Tier 1: pure logic (start here).** Keep access and plan gating, pricing, credit math, validation, and formatting in pure functions under `lib/`, and test them exhaustively. These tests need no server and run instantly. Keep `query`, `mutation`, and `action` handlers as thin wrappers so their decision logic remains testable without a running app.
+
+```ts
+import { expect, test } from "bun:test";
+import { productBySlug } from "../lib/site.config";
+
+test("unknown slug → undefined", () => {
+  expect(productBySlug("nope")).toBeUndefined();
+});
+```
+
+**Tier 2: React components.** `@testing-library/react` and happy-dom are already wired through `tests/setup.ts`. Render and assert. The template uses the classic JSX transform, so add `import React from "react"` in `.tsx` tests. For a component that reads Pylon data hooks, mock the boundary, then dynamically import the component so the mock is in place first:
+
+```tsx
+import { test, expect, mock } from "bun:test";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+mock.module("@pylonsync/react", () => ({
+  db: { useQuery: () => ({ data: [{ id: "1", name: "Acme" }], loading: false }) },
+}));
+const { OrgList } = await import("../app/orgs/org-list"); // your component
+
+test("renders orgs from the query", () => {
+  render(<OrgList />);
+  expect(screen.getByText("Acme")).toBeDefined();
+});
+```
+
+**Tier 3: functions over HTTP.** Use this tier when pure logic tests cannot cover the behavior. A handler's policies, `ctx.db` calls, and auth run in the app. Start `pylon dev` in another terminal and call the API. `resetDb()` from `@pylonsync/functions` clears the in-memory database between cases; it does nothing when the server is down and refuses to run in production.
+
+```ts
+import { afterEach, expect, test } from "bun:test";
+import { resetDb } from "@pylonsync/functions";
+
+const BASE = "http://localhost:4321";
+afterEach(() => resetDb(BASE)); // or installTestIsolation(BASE) once at top-of-file
+
+test("createThing then read it back", async () => {
+  const t = await fetch(`${BASE}/api/fn/createThing`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ name: "hello" }),
+  }).then((r) => r.json());
+  const rows = await fetch(`${BASE}/api/entities/Thing`).then((r) => r.json());
+  expect(rows.some((r: { id: string }) => r.id === t.id)).toBe(true);
+});
+```
+
+`pylon test:security` is a separate adversarial probe; it hits a running app and reports auth/policy holes (run `pylon dev`, then `pylon test:security`).
+
+## Use the CLI
+
+| Need | Command |
+|---|---|
+| Run the app (SSR + API, hot reload, one port `:4321`) | `pylon dev` (or `npm run dev`) |
+| Regenerate manifest + typed client | `pylon codegen` (Swift client: `pylon codegen client --target swift`) |
+| Validate / diff / push schema | `pylon schema check` \| `diff` \| `push` |
+| Migrations | `pylon migrate create <name>` \| `plan` \| `apply` |
+| Lint policies (PYL001–PYL004) | `pylon lint --strict` |
+| Tests | `pylon test` |
+| Adversarial security probe | `pylon test:security` |
+| Inspect cloud request logs (agent-safe) | `pylon logs --json --limit 50` |
+| Inspect data / entities | `pylon data entities` \| `pylon data list <Entity>` |
+| Call a function | `pylon fn <name> key=value` |
+| Health snapshot | `pylon status` |
+| Build for prod | `pylon build` |
+| Deploy (Pylon Cloud by default) | `pylon deploy` |
+| Look up an error code | `pylon explain <CODE>` |
+
+`--json` works on every command for machine-readable output. Prefer one-shot/agent-safe flags (`pylon logs --limit N`, not a blocking `--follow`).
+
+For full signatures, env vars, the complete CLI, and SSR/client/server-primitive details: **https://docs.pylonsync.com/llms-full.txt**.

package/templates/crm/CLAUDE.md

@@ -0,0 +1,7 @@
+# CLAUDE.md
+
+Agent guidance for this Pylon project lives in **AGENTS.md**, the cross-editor
+standard read by Claude Code, Cursor, Codex, and other agents. The import below
+makes it available to Claude Code:
+
+@AGENTS.md

package/templates/crm/README.md

@@ -0,0 +1,96 @@
+# __APP_NAME__
+
+A sales CRM for a small team — companies, contacts, and deals on a live
+pipeline board. One [Pylon](https://pylonsync.com) app: SSR frontend, API, auth,
+and realtime sync from one process on one port.
+
+## Develop
+
+```bash
+__RUN_DEV__
+```
+
+Open http://localhost:4321 and create an account. The first sign-in seeds a demo
+pipeline so the board isn't empty; delete `functions/seedWorkspace.ts` and
+`lib/seed.ts` once you have real customers.
+
+## What's interesting here
+
+**The board is live.** Drag a deal to another column and it moves on every
+teammate's board immediately — no refresh, no polling. Your own move takes the
+same path as theirs: write → sync → re-render, so there's one behaviour to
+reason about instead of two. Open the app in two windows and try it.
+
+**⌘K searches everything.** Deals, companies, and contacts, ranked by how well
+they match (`lib/search.ts`). It runs against the synced replica in memory, so
+results appear as you type with no request per keystroke. `/` opens it too, and
+`c` creates a deal.
+
+**The forecast is derived, never stored.** Open pipeline, weighted value, and
+win rate are computed from the deals themselves in `lib/pipeline.ts` — pure
+functions with no React and no `db`, so the arithmetic is unit-tested directly
+(`tests/pipeline.test.ts`).
+
+## Layout
+
+```
+app.ts                    entities + policies
+app/
+  page.tsx                "/" — the pipeline board
+  pipeline-view.tsx       board container
+  workspace.tsx           app shell — the ONLY place that touches `db`
+  companies/, contacts/   list views
+  deals/[id]/             deal detail + activity timeline
+  login/                  email/password auth
+components/               presentational — props in, callbacks out
+  ui/                     shadcn primitives
+lib/pipeline.ts           stages, money, metrics — pure
+lib/search.ts             ⌘K ranking — pure
+functions/                server functions
+tests/                    pure logic + component tests
+```
+
+The data boundary lives in exactly one module (`app/workspace.tsx`). Everything
+under `components/` takes data as props and reports changes through callbacks,
+which is why the component tests render them with fixtures and mock nothing.
+
+## Access
+
+Every entity is readable and writable by any **signed-in** user, and by nobody
+else — a shared pipeline is the point of a team CRM. `ownerId` records who
+created a row without partitioning access.
+
+For per-rep isolation, tighten `allowRead` in `app.ts`:
+
+```ts
+allowRead: "auth.userId == data.ownerId"
+```
+
+Contacts hold customer email and phone. There is no public route in this app and
+no policy allows an anonymous read — keep it that way if you add one.
+
+## Theme
+
+Dark by default (`class="dark"` in `app/layout.tsx`). The light tokens in
+`app/globals.css` are complete, so removing that class flips the whole app. Both
+use the standard shadcn variables, so `npx shadcn@latest add <component>` drops
+in already themed.
+
+## Grow it
+
+- **Add a field:** edit an entity in `app.ts` — the typed client and
+  REST/realtime API follow, no migration.
+- **Add a stage:** `PIPELINE` in `lib/pipeline.ts`. The board, the forecast, and
+  the stage picker all read from it.
+- **Add a view:** drop `app/reports/page.tsx` and add it to `NAV` in
+  `components/sidebar.tsx`.
+
+## Deploy
+
+```bash
+pylon lint --strict
+pylon test
+pylon deploy
+```
+
+Docs: https://docs.pylonsync.com

package/templates/crm/app/companies/companies-view.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React, { useState } from "react";
+import { db } from "@pylonsync/react";
+import { Building2, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/page-header";
+import { DataTable, type ColumnDef } from "@/components/data-table";
+import { EmptyState } from "@/components/empty-state";
+import { RecordDialog } from "@/components/record-dialog";
+import { Avatar } from "@/components/avatar";
+import { money, relativeTime } from "@/lib/pipeline";
+import { Workspace, type CompanyRow, type DealRow } from "../workspace";
+
+export function CompaniesView({ email }: { email: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Workspace email={email} pathname="/companies">
+      {(data) => {
+        // Pipeline per company, computed here rather than stored — one less
+        // thing to keep in sync when a deal moves.
+        const openValue = (companyId: string) =>
+          data.deals
+            .filter((deal: DealRow) => deal.companyId === companyId)
+            .reduce((sum, deal) => sum + (Number(deal.value) || 0), 0);
+
+        const columns: ColumnDef<CompanyRow>[] = [
+          {
+            key: "name",
+            header: "Company",
+            cell: (row) => (
+              <span className="flex items-center gap-2">
+                <Avatar name={row.name} size="sm" />
+                <span className="truncate font-medium">{row.name}</span>
+              </span>
+            ),
+          },
+          {
+            key: "domain",
+            header: "Domain",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.domain ?? "—"}</span>
+            ),
+          },
+          {
+            key: "industry",
+            header: "Industry",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.industry ?? "—"}</span>
+            ),
+          },
+          {
+            key: "size",
+            header: "Size",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.size ?? "—"}</span>
+            ),
+          },
+          {
+            key: "pipeline",
+            header: "Pipeline",
+            numeric: true,
+            cell: (row) => money(openValue(row.id)),
+          },
+          {
+            key: "created",
+            header: "Added",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {relativeTime(row.createdAt)}
+              </span>
+            ),
+          },
+        ];
+
+        const rows = [...data.companies].sort((a, b) => a.name.localeCompare(b.name));
+
+        return (
+          <>
+            <PageHeader title="Companies" count={rows.length}>
+              <Button size="sm" onClick={() => setOpen(true)}>
+                <Plus />
+                New company
+              </Button>
+            </PageHeader>
+
+            <DataTable
+              rows={rows}
+              columns={columns}
+              empty={
+                <EmptyState
+                  icon={<Building2 />}
+                  title="No companies yet"
+                  description="Companies are the accounts your deals and contacts hang off. Add the first one to start building a pipeline."
+                  action={
+                    <Button size="sm" onClick={() => setOpen(true)}>
+                      <Plus />
+                      New company
+                    </Button>
+                  }
+                />
+              }
+            />
+
+            <RecordDialog
+              open={open}
+              title="New company"
+              submitLabel="Create company"
+              onOpenChange={setOpen}
+              fields={[
+                { name: "name", label: "Name", required: true, placeholder: "Acme Inc" },
+                { name: "domain", label: "Domain", placeholder: "acme.com" },
+                { name: "industry", label: "Industry", placeholder: "Logistics" },
+                { name: "size", label: "Size", placeholder: "50-200" },
+              ]}
+              onCreate={async (values) => {
+                // A plain policy-checked insert — no server function needed,
+                // because there's nothing to validate beyond the field types
+                // and nothing to stamp that the policy doesn't already gate.
+                await db.insert("Company", values);
+              }}
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/crm/app/companies/page.tsx

@@ -0,0 +1,17 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { CompaniesView } from "./companies-view";
+
+export const metadata: Metadata = {
+  title: "Companies",
+  robots: "noindex",
+};
+
+export default function CompaniesPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <CompaniesView email={me?.email ?? ""} />;
+}

package/templates/crm/app/contacts/contacts-view.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import React, { useState } from "react";
+import { db } from "@pylonsync/react";
+import { Plus, Users } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/page-header";
+import { DataTable, type ColumnDef } from "@/components/data-table";
+import { EmptyState } from "@/components/empty-state";
+import { RecordDialog } from "@/components/record-dialog";
+import { Avatar } from "@/components/avatar";
+import { relativeTime } from "@/lib/pipeline";
+import { Workspace, type ContactRow } from "../workspace";
+
+export function ContactsView({ email }: { email: string }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Workspace email={email} pathname="/contacts">
+      {(data) => {
+        const columns: ColumnDef<ContactRow>[] = [
+          {
+            key: "name",
+            header: "Name",
+            cell: (row) => (
+              <span className="flex items-center gap-2">
+                <Avatar name={row.name} size="sm" />
+                <span className="truncate font-medium">{row.name}</span>
+              </span>
+            ),
+          },
+          {
+            key: "title",
+            header: "Title",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.title ?? "—"}</span>
+            ),
+          },
+          {
+            key: "company",
+            header: "Company",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {data.companyName(row.companyId) ?? "—"}
+              </span>
+            ),
+          },
+          {
+            key: "email",
+            header: "Email",
+            cell: (row) =>
+              row.email ? (
+                <a
+                  href={`mailto:${row.email}`}
+                  onClick={(event) => event.stopPropagation()}
+                  className="text-muted-foreground underline-offset-2 hover:text-foreground hover:underline"
+                >
+                  {row.email}
+                </a>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              ),
+          },
+          {
+            key: "phone",
+            header: "Phone",
+            cell: (row) => (
+              <span className="text-muted-foreground">{row.phone ?? "—"}</span>
+            ),
+          },
+          {
+            key: "created",
+            header: "Added",
+            cell: (row) => (
+              <span className="text-muted-foreground">
+                {relativeTime(row.createdAt)}
+              </span>
+            ),
+          },
+        ];
+
+        const rows = [...data.contacts].sort((a, b) => a.name.localeCompare(b.name));
+
+        return (
+          <>
+            <PageHeader title="Contacts" count={rows.length}>
+              <Button size="sm" onClick={() => setOpen(true)}>
+                <Plus />
+                New contact
+              </Button>
+            </PageHeader>
+
+            <DataTable
+              rows={rows}
+              columns={columns}
+              empty={
+                <EmptyState
+                  icon={<Users />}
+                  title="No contacts yet"
+                  description="The people you actually talk to. Add one and link it to a company to keep the account together."
+                  action={
+                    <Button size="sm" onClick={() => setOpen(true)}>
+                      <Plus />
+                      New contact
+                    </Button>
+                  }
+                />
+              }
+            />
+
+            <RecordDialog
+              open={open}
+              title="New contact"
+              submitLabel="Create contact"
+              onOpenChange={setOpen}
+              fields={[
+                { name: "name", label: "Name", required: true, placeholder: "Dana Whitfield" },
+                { name: "title", label: "Title", placeholder: "VP Operations" },
+                {
+                  name: "companyId",
+                  label: "Company",
+                  options: data.companies
+                    .slice()
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((company) => ({ value: company.id, label: company.name })),
+                },
+                { name: "email", label: "Email", type: "email", placeholder: "dana@acme.com" },
+                { name: "phone", label: "Phone", type: "tel", placeholder: "+1 555 0100" },
+              ]}
+              onCreate={async (values) => {
+                await db.insert("Contact", values);
+              }}
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/crm/app/contacts/page.tsx

@@ -0,0 +1,17 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { ContactsView } from "./contacts-view";
+
+export const metadata: Metadata = {
+  title: "Contacts",
+  robots: "noindex",
+};
+
+export default function ContactsPage({ auth, response, serverData }: PageProps) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <ContactsView email={me?.email ?? ""} />;
+}