@pylonsync/create-pylon 0.19.1 → 0.21.0

package/templates/inventory/lib/search.ts

@@ -1,15 +1,16 @@
 // Client-side search powering the ⌘K palette.
 //
-// A small team's CRM fits in the synced replica, so search runs locally against
+// A small team's workspace fits in the synced replica, so search runs locally against
 // data already in memory: results appear as you type, with no request per
 // keystroke. Swap in `db.useSearch` (Pylon's FTS) when a workspace outgrows
 // that — the component boundary doesn't change, only this file.
 
 export interface SearchItem {
   id: string;
-  type: "deal" | "company" | "contact";
+  /** The record kind, such as "deal". The palette picks its icon from this. */
+  type: string;
   title: string;
-  /** Second line: the company for a contact, the domain for a company. */
+  /** Shown on the right of the row: the company for a contact, say. */
   subtitle?: string;
   href: string;
   /** Extra text matched but not displayed — an email, say. */

package/templates/inventory/lib/seed.ts

@@ -198,9 +198,35 @@ export const SEED_MOVEMENTS: SeedMovement[] = (() => {
   return SEED_PRODUCTS.flatMap((p) => ledgerFor(p, purchaseOrder));
 })();
 
+/**
+ * The demo stock team. Each becomes a User row with no
+ * password (see lib/demo-team.ts); they exist so the ledger shows who moved stock.
+ */
+export interface SeedTeammate {
+  name: string;
+  email: string;
+}
+
+export const SEED_TEAM: SeedTeammate[] = [
+  { name: "Maya Castillo", email: "maya.castillo@demo.invalid" },
+  { name: "Jordan Ellis", email: "jordan.ellis@demo.invalid" },
+  { name: "Aisha Karim", email: "aisha.karim@demo.invalid" },
+  { name: "Noah Brandt", email: "noah.brandt@demo.invalid" },
+];
+
+/**
+ * Who recorded the seeded movement at `index`, as a position in
+ * `[you, ...SEED_TEAM]`. Stepping by 3 through a team of 5 spreads the ledger
+ * across everyone.
+ */
+export function seedActor(index: number, teamSize: number = SEED_TEAM.length + 1): number {
+  return (index * 3 + 1) % teamSize;
+}
+
 export interface ShapedSeed {
   products: Array<{ key: string; row: Record<string, unknown> }>;
-  movements: Array<{ product: string; row: Record<string, unknown> }>;
+  /** `actor` is a position in `[you, ...SEED_TEAM]`; see seedActor. */
+  movements: Array<{ product: string; actor: number; row: Record<string, unknown> }>;
 }
 
 export function shapeSeed(now: number = Date.now()): ShapedSeed {
@@ -220,8 +246,9 @@ export function shapeSeed(now: number = Date.now()): ShapedSeed {
         createdAt: daysAgo(120 - index),
       },
     })),
-    movements: SEED_MOVEMENTS.map((m) => ({
+    movements: SEED_MOVEMENTS.map((m, index) => ({
       product: m.product,
+      actor: seedActor(index),
       row: {
         delta: m.delta,
         reason: m.reason,

package/templates/inventory/lib/stock.ts

@@ -119,6 +119,38 @@ export function stockState(quantity: number, reorderPoint?: number | null): Stoc
   return "ok";
 }
 
+export interface StockTab {
+  id: string;
+  label: string;
+}
+
+/** The product list's tabs, left to right. */
+export const STOCK_TABS: StockTab[] = [
+  { id: "all", label: "All" },
+  { id: "reorder", label: "Needs reorder" },
+  { id: "out", label: "Out of stock" },
+];
+
+/** Whether an active product at `state` belongs on a tab. */
+export function inStockTab(tabId: string, state: StockState): boolean {
+  if (tabId === "reorder") return state !== "ok";
+  if (tabId === "out") return state === "out";
+  return true;
+}
+
+/**
+ * How many active products each tab lists. The sidebar badge, the tab counts,
+ * and the summary bar all read `summarize`, and this agrees with it by
+ * construction: all = skuCount, reorder = low + out, out = outCount.
+ */
+export function stockTabCounts(summary: Summary): Record<string, number> {
+  return {
+    all: summary.skuCount,
+    reorder: summary.lowCount + summary.outCount,
+    out: summary.outCount,
+  };
+}
+
 export interface Summary {
   skuCount: number;
   unitCount: number;

package/templates/inventory/tests/demo-team.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, test } from "bun:test";
+import { demoEmail, isDemoRow } from "../lib/demo-team";
+
+describe("demo teammates", () => {
+  test("the first address is the person's own, then numbered aliases", () => {
+    expect(demoEmail("maya.castillo@demo.invalid", 0)).toBe("maya.castillo@demo.invalid");
+    expect(demoEmail("maya.castillo@demo.invalid", 1)).toBe("maya.castillo+2@demo.invalid");
+    expect(demoEmail("maya.castillo@demo.invalid", 2)).toBe("maya.castillo+3@demo.invalid");
+  });
+
+  test("a registered account is never reused as a demo teammate", () => {
+    // Someone who registered a demo address first must not be handed the
+    // seeded records.
+    expect(isDemoRow({ email: "x@demo.invalid", passwordHash: "argon2id$..." })).toBe(false);
+    expect(isDemoRow({ email: "x@demo.invalid", emailVerified: "2026-07-01T00:00:00Z" })).toBe(false);
+    expect(isDemoRow({ email: "x@demo.invalid", displayName: "Maya Castillo" })).toBe(true);
+  });
+});

package/templates/inventory/tests/stock.test.ts

@@ -1,6 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import {
   REASONS,
+  STOCK_TABS,
+  inStockTab,
   isValidReason,
   money,
   needsReorder,
@@ -11,6 +13,7 @@ import {
   reasonAllows,
   signedQuantity,
   stockState,
+  stockTabCounts,
   summarize,
   type Movement,
   type Product,
@@ -253,3 +256,29 @@ describe("parsing", () => {
     expect(parseCount("")).toBeNull();
   });
 });
+
+describe("stock tabs", () => {
+  const products = [
+    product({ id: "a", reorderPoint: 5 }),
+    product({ id: "b", reorderPoint: 5 }),
+    product({ id: "c", reorderPoint: 5 }),
+    product({ id: "d", reorderPoint: 5, archived: true }),
+  ];
+  const ledger = [
+    move({ id: "1", productId: "a", delta: 20 }),
+    move({ id: "2", productId: "b", delta: 3 }),
+    move({ id: "3", productId: "d", delta: 1 }),
+  ];
+
+  test("each tab's count is exactly the rows it lists", () => {
+    const counts = stockTabCounts(summarize(products, ledger));
+    const levels = onHandByProduct(ledger);
+    for (const tab of STOCK_TABS) {
+      const listed = products.filter(
+        (p) => !p.archived && inStockTab(tab.id, stockState(levels.get(p.id) ?? 0, p.reorderPoint)),
+      );
+      expect(counts[tab.id]).toBe(listed.length);
+    }
+    expect(counts).toEqual({ all: 3, reorder: 2, out: 1 });
+  });
+});

package/templates/invoices/AGENTS.md

@@ -62,7 +62,7 @@ this pass before the user has to ask.
 - **`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`, `ctx.rooms`, and `ctx.connections` are on mutation + action only, NOT query** (reactive purity). `action` has no direct `ctx.db`; use `ctx.runQuery` / `ctx.runMutation`.
-- **`ctx.llm.stream(request, onEvent)` streams tokens as they generate** and still resolves with the full response, so `stop_reason === "tool_use"` drives an agent tool loop. Events are `text_delta` / `tool_use_start` / `tool_input_delta` / `done`. Same auth + model-allowlist gating as `ctx.llm.complete`. Streaming does NOT extend the call deadline (`PYLON_FN_CALL_TIMEOUT`, 30s default) — set `timeout: <secs>` on the def for a long run.
+- **`ctx.llm.stream(request, onEvent)` streams tokens as they generate** and still resolves with the full response, so `stop_reason === "tool_use"` drives an agent tool loop. Events are `text_delta` / `tool_use_start` / `tool_input_delta` / `done`. Same auth + model-allowlist gating as `ctx.llm.complete`. The call timeout is an idle timeout (`PYLON_FN_CALL_TIMEOUT`, 30s default; Stack0 Cloud 300s): each stream event resets it, and the total run is capped at 10× the timeout. Set `timeout: <secs>` on the def when a step (a slow tool call) can be silent longer than that.
 - **`ctx.stream.write(text)` streams to the caller — and every fn stream is RESUMABLE**: the server buffers frames under a stream id (`streamFn`'s `onStreamId`), so a dropped connection or closed tab catches up via `resumeStream(id)`, including the final result after the handler finished. `ctx.rooms.broadcast(room, topic, data)` fans out to every CURRENTLY-CONNECTED subscriber (second device, second tab) but does not replay missed messages — use the stream id for anything that must survive a gap. Broadcast resolves `{ delivered: false }` when the room has no members — a no-op, not an error. Clients receive with `useRoomMessages(room, cb)` from `@pylonsync/react`; `useRoom` is the send side.
 - **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/*`; an upload is readable by its uploader only, so pass `visibility: "public"` to `uploadFile` or `<FileUpload>` for files every visitor sees; 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`.

package/templates/invoices/README.md

@@ -42,6 +42,22 @@ one from the existing rows: a counter in a synced replica is a race, and gaps in
 an invoice series get asked about by accountants. `number` is unique in the
 schema, so a genuine collision fails loudly.
 
+## Brand and layout
+
+The product ships as **Billfold**. The name lives in `lib/brand.ts`, and the
+sidebar, sign-in screen, page titles, and phone drawer all read it. The mark is
+`components/brand-mark.tsx`; `app/icon.svg`, `app/apple-icon.png`, and
+`public/favicon.ico` draw the same shape for browsers and home screens. The
+accent colour is `--brand` at the top of `app/globals.css`, and the typeface
+(Hanken Grotesk) is set in `fonts` in `app.ts`.
+
+The frame is `components/app-shell.tsx`. From 768px up the sidebar is a fixed
+rail; below that it opens as a drawer from the menu button in each page header,
+tables drop their lower-priority columns (`hideBelow` in
+`components/data-table.tsx`), and boards scroll one column at a time. The nav
+links are in `components/nav.tsx`. Every nav count comes from `navCounts` in
+`app/workspace.tsx`, and page headers and tabs read the same numbers.
+
 ## Layout
 
 ```

package/templates/invoices/app/clients/clients-view.tsx

@@ -17,7 +17,7 @@ export function ClientsView() {
   const [open, setOpen] = useState(false);
 
   return (
-    <RequireAuth title="Invoices" description="Your team shares one set of books. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/clients">
       {(data) => {
         // Outstanding per client, derived rather than stored — one less thing
@@ -35,16 +35,23 @@ export function ClientsView() {
           {
             key: "name",
             header: "Client",
+            className: "w-[60%] md:w-[34%]",
             cell: (row) => (
-              <span className="flex items-center gap-2">
-                <Avatar name={row.name} size="sm" />
-                <span className="truncate font-medium">{row.name}</span>
+              <span className="flex min-w-0 items-center gap-2.5">
+                <Avatar name={row.name} shape="square" />
+                <span className="min-w-0">
+                  <span className="block truncate font-medium">{row.name}</span>
+                  <span className="block truncate text-[12px] text-muted-foreground md:hidden">
+                    {row.email ?? ""}
+                  </span>
+                </span>
               </span>
             ),
           },
           {
             key: "email",
             header: "Email",
+            hideBelow: "md",
             cell: (row) =>
               row.email ? (
                 <a
@@ -62,6 +69,8 @@ export function ClientsView() {
             key: "invoices",
             header: "Invoices",
             numeric: true,
+            hideBelow: "sm",
+            className: "w-[100px]",
             cell: (row) =>
               data.invoices.filter((invoice) => invoice.clientId === row.id).length,
           },
@@ -69,6 +78,7 @@ export function ClientsView() {
             key: "outstanding",
             header: "Outstanding",
             numeric: true,
+            className: "w-[120px] md:w-[140px]",
             cell: (row) => {
               const value = outstanding(row.id);
               return (
@@ -84,16 +94,18 @@ export function ClientsView() {
 
         return (
           <>
-            <PageHeader title="Clients" count={rows.length}>
+            <PageHeader title="Clients" count={data.navCounts["/clients"]}>
               <Button size="sm" onClick={() => setOpen(true)}>
                 <Plus />
-                New client
+                <span className="max-sm:sr-only">New client</span>
               </Button>
             </PageHeader>
 
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Clients"
               empty={
                 <EmptyState
                   icon={<Users />}

package/templates/invoices/app/clients/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { ClientsView } from "./clients-view";
 
 export const metadata: Metadata = {
-  title: "Clients",
+  title: `Clients · ${BRAND.name}`,
   robots: "noindex",
 };
 

package/templates/invoices/app/globals.css

@@ -9,15 +9,21 @@
 /* ---------------------------------------------------------------------------
    Design tokens.
 
-   Tuned for a dense internal tool rather than a marketing page: a near-neutral
-   surface ramp, hairline borders instead of shadows, and one accent used
-   sparingly so status colour still means something. Dark is the primary theme —
-   `app/layout.tsx` sets `class="dark"` — and light is a real, tested
-   alternative, not an afterthought.
+   Tuned for a dense internal tool: a near-neutral surface ramp, hairline
+   borders instead of shadows, and one accent used sparingly so status colour
+   still means something. Light is the default; `.dark` holds a complete dark
+   set (add `class="dark"` to <html> in app/layout.tsx to switch).
 
-   These are the same variable names shadcn/ui generates against, so
+   These are the variable names shadcn/ui generates against, so
    `npx shadcn@latest add <component>` drops in already themed.
 --------------------------------------------------------------------------- */
+:root {
+  /* The brand accent: primary buttons, the brand mark, focus rings, and the
+     active nav icon. Change these two lines to re-colour the product. */
+  --brand: oklch(0.47 0.15 255);
+  --brand-dark: oklch(0.64 0.14 255);
+}
+
 :root {
   --radius: 0.5rem;
 
@@ -28,7 +34,7 @@
   --popover: oklch(1 0 0);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.55 0.204 274.5);
+  --primary: var(--brand);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.968 0.002 286.4);
   --secondary-foreground: oklch(0.27 0.006 286);
@@ -40,7 +46,7 @@
 
   --border: oklch(0.918 0.004 286.3);
   --input: oklch(0.918 0.004 286.3);
-  --ring: oklch(0.55 0.204 274.5);
+  --ring: var(--brand);
 
   /* Surfaces above the page: sidebar, popovers, hover rows. */
   --surface-1: oklch(0.985 0.001 286.4);
@@ -51,6 +57,7 @@
   --stage-lead: oklch(0.62 0.03 264);
   --stage-qualified: oklch(0.6 0.13 240);
   --stage-proposal: oklch(0.68 0.15 78);
+  --stage-negotiation: oklch(0.64 0.16 45);
   --stage-won: oklch(0.6 0.15 155);
   --stage-lost: oklch(0.6 0.11 25);
 }
@@ -63,7 +70,7 @@
   --popover: oklch(0.216 0.006 285.9);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.62 0.19 274.5);
+  --primary: var(--brand-dark);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.25 0.006 286);
   --secondary-foreground: oklch(0.93 0.002 286.3);
@@ -75,7 +82,7 @@
 
   --border: oklch(1 0 0 / 9%);
   --input: oklch(1 0 0 / 12%);
-  --ring: oklch(0.62 0.19 274.5);
+  --ring: var(--brand-dark);
 
   --surface-1: oklch(0.186 0.004 285.9);
   --surface-2: oklch(0.216 0.006 285.9);
@@ -83,6 +90,7 @@
   --stage-lead: oklch(0.68 0.03 264);
   --stage-qualified: oklch(0.68 0.13 240);
   --stage-proposal: oklch(0.75 0.14 78);
+  --stage-negotiation: oklch(0.72 0.15 45);
   --stage-won: oklch(0.7 0.15 155);
   --stage-lost: oklch(0.68 0.14 25);
 }
@@ -118,6 +126,7 @@
   --color-stage-lead: var(--stage-lead);
   --color-stage-qualified: var(--stage-qualified);
   --color-stage-proposal: var(--stage-proposal);
+  --color-stage-negotiation: var(--stage-negotiation);
   --color-stage-won: var(--stage-won);
   --color-stage-lost: var(--stage-lost);
 }
@@ -143,15 +152,21 @@
     height: 100%;
     background-color: var(--color-background);
     color: var(--color-foreground);
-    /* 13px is the density these screens are designed at; the slight negative
-       tracking is what keeps Inter from looking loose at that size. */
-    font-size: 13px;
+    /* 14px on phones, 13px from the md breakpoint up: the density these
+       screens are designed at on a desktop. */
+    font-size: 14px;
     line-height: 1.5;
-    letter-spacing: -0.006em;
+    letter-spacing: -0.003em;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
 
+  @media (min-width: 768px) {
+    body {
+      font-size: 13px;
+    }
+  }
+
   button {
     cursor: pointer;
   }

package/templates/invoices/app/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#0859ac"/><path d="M9 6.5A2 2 0 0 1 11 4.5h7.6l5.4 5.4v15.6a2 2 0 0 1-2 2H11a2 2 0 0 1-2-2v-19Z" fill="#fff"/><rect x="12" y="15" width="8.5" height="2.2" rx="1.1" fill="#0859ac"/><rect x="12" y="19.4" width="5.5" height="2.2" rx="1.1" fill="#0859ac"/></svg>

package/templates/invoices/app/invoices/[id]/invoice-view.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import { Link, callFn, db, useRouter } from "@pylonsync/react";
-import { ArrowLeft, Trash2 } from "lucide-react";
+import { Banknote, ChevronRight, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Select } from "@/components/ui/select";
 import { PageHeader } from "@/components/page-header";
@@ -25,7 +25,7 @@ export function InvoiceView({
   const [payOpen, setPayOpen] = useState(false);
 
   return (
-    <RequireAuth title="Invoices" description="Your team shares one set of books. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
         const invoice = data.invoices.find((i) => i.id === invoiceId);
@@ -35,7 +35,7 @@ export function InvoiceView({
             <>
               <PageHeader title="Invoice" />
               <EmptyState
-                title={data.loading ? "Loading…" : "Invoice not found"}
+                title={data.loading ? "Loading invoice…" : "Invoice not found"}
                 description={
                   data.loading ? undefined : "It may have been deleted, or the link is wrong."
                 }
@@ -64,36 +64,32 @@ export function InvoiceView({
 
         return (
           <>
-            <PageHeader title={invoice.number}>
-              <StatusBadge status={shown} />
-              <div className="w-28">
-                <Select
-                  aria-label="Status"
-                  value={invoice.status}
-                  className="h-7 text-[12px]"
-                  onChange={(event) =>
-                    void callFn("setInvoiceStatus", {
-                      invoiceId: invoice.id,
-                      status: event.target.value,
-                    })
-                  }
+            <PageHeader
+              title={invoice.number}
+              leading={
+                <Link
+                  href="/"
+                  className="hidden items-center gap-1 text-[13px] text-muted-foreground transition-colors hover:text-foreground md:inline-flex"
                 >
-                  {STATUSES.map((s) => (
-                    <option key={s.id} value={s.id}>
-                      {s.label}
-                    </option>
-                  ))}
-                </Select>
-              </div>
-              {t.balanceCents > 0 && invoice.status !== "void" ? (
+                  Invoices
+                  <ChevronRight className="size-3.5" />
+                </Link>
+              }
+            >
+              {/* Offered on a sent invoice with a balance. A draft hasn't been
+                  issued yet, and a void or paid one has nothing to collect. */}
+              {invoice.status === "sent" && t.balanceCents > 0 ? (
                 <Button size="sm" onClick={() => setPayOpen(true)}>
-                  Record payment
+                  <Banknote />
+                  <span className="max-sm:sr-only">Record payment</span>
                 </Button>
               ) : null}
               {editable ? (
                 <Button
                   size="sm"
                   variant="ghost"
+                  aria-label="Delete draft"
+                  title="Delete draft"
                   onClick={async () => {
                     await db.delete("Invoice", invoice.id);
                     router.push("/");
@@ -106,21 +102,59 @@ export function InvoiceView({
             </PageHeader>
 
             <div className="min-h-0 flex-1 overflow-y-auto">
-              <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-6">
-                <Link
-                  href="/"
-                  className="inline-flex w-fit items-center gap-1.5 text-[12px] text-muted-foreground transition-colors hover:text-foreground"
-                >
-                  <ArrowLeft className="size-3.5" />
-                  Invoices
-                </Link>
+              <div className="mx-auto flex max-w-3xl flex-col gap-6 px-4 py-5 md:px-8 md:py-8">
+                <div className="flex flex-wrap items-end justify-between gap-3">
+                  <div>
+                    <div className="flex items-center gap-2">
+                      <h2 className="tabular text-[22px] font-semibold tracking-[-0.02em] md:text-[26px]">
+                        {invoice.number}
+                      </h2>
+                      <StatusBadge status={shown} />
+                    </div>
+                    <p className="mt-1 text-[13px] text-muted-foreground">
+                      {client?.name ?? "No client yet"}
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-[12px] text-muted-foreground">
+                      {invoice.status === "draft" ? "Total" : "Balance due"}
+                    </p>
+                    <p
+                      className={
+                        "tabular text-[22px] font-semibold tracking-[-0.02em] md:text-[26px]" +
+                        (shown === "overdue" ? " text-destructive" : "")
+                      }
+                    >
+                      {money(invoice.status === "draft" ? t.totalCents : t.balanceCents)}
+                    </p>
+                  </div>
+                </div>
 
-                <dl className="grid grid-cols-2 gap-x-6 gap-y-4 rounded-lg border border-border bg-card p-4 sm:grid-cols-4">
+                <dl className="grid grid-cols-2 gap-x-6 gap-y-4 rounded-xl border border-border bg-surface-1 p-4 sm:grid-cols-4">
+                  <Field label="Status">
+                    <Select
+                      aria-label="Status"
+                      value={invoice.status}
+                      className="h-8 bg-background md:h-7.5"
+                      onChange={(event) =>
+                        void callFn("setInvoiceStatus", {
+                          invoiceId: invoice.id,
+                          status: event.target.value,
+                        })
+                      }
+                    >
+                      {STATUSES.map((s) => (
+                        <option key={s.id} value={s.id}>
+                          {s.label}
+                        </option>
+                      ))}
+                    </Select>
+                  </Field>
                   <Field label="Client">
                     <Select
                       aria-label="Client"
                       value={invoice.clientId ?? ""}
-                      className="h-7 text-[12px]"
+                      className="h-8 bg-background md:h-7.5"
                       onChange={(event) =>
                         void db.update("Invoice", invoice.id, {
                           clientId: event.target.value || null,
@@ -153,16 +187,6 @@ export function InvoiceView({
                         })
                       : "—"}
                   </Field>
-                  <Field label="Balance">
-                    <span
-                      className={
-                        "tabular font-medium" +
-                        (t.balanceCents > 0 ? " text-destructive" : "")
-                      }
-                    >
-                      {money(t.balanceCents)}
-                    </span>
-                  </Field>
                 </dl>
 
                 {client?.address ? (
@@ -192,11 +216,11 @@ export function InvoiceView({
                 {paid.length > 0 ? (
                   <section>
                     <h2 className="mb-2 text-[13px] font-semibold">Payments</h2>
-                    <ul className="space-y-1.5">
+                    <ul className="divide-y divide-border/70 overflow-hidden rounded-xl border border-border">
                       {paid.map((payment) => (
                         <li
                           key={payment.id}
-                          className="flex items-center gap-3 rounded-md border border-border bg-card px-3 py-2 text-[12px]"
+                          className="flex h-11 items-center gap-3 bg-card px-3.5 text-[13px]"
                         >
                           <span className="tabular font-medium">
                             {money(payment.amountCents)}
@@ -247,7 +271,7 @@ export function InvoiceView({
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="min-w-0">
-      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+      <dt className="text-[11.5px] font-medium text-muted-foreground">{label}</dt>
       <dd className="mt-1 truncate text-[13px]">{children}</dd>
     </div>
   );

package/templates/invoices/app/invoices/[id]/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { InvoiceView } from "./invoice-view";
 
 export const metadata: Metadata = {
-  title: "Invoice",
+  title: `Invoice · ${BRAND.name}`,
   robots: "noindex",
 };