@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/creator/lib/demo.ts

@@ -0,0 +1,94 @@
+// Demo subscribers for local development.
+//
+// `pylon dev` fills an empty list with about 180 fictional subscribers spread
+// over the last 30 days, so the counter, chart, and list have data. A deploy
+// does not seed: `demoDataEnabled` is true only when PYLON_DEMO_DATA is on, or
+// when it is unset and the process runs under `pylon dev`. Set
+// PYLON_DEMO_DATA=0 to turn it off in development too.
+//
+// Pure data + pure shaping, so functions/seedDemo.ts stays a thin wrapper and
+// this file is testable without a server.
+
+const ON = new Set(["1", "true", "yes", "on"]);
+const OFF = new Set(["0", "false", "no", "off"]);
+
+/**
+ * True when demo rows may be written. An explicit PYLON_DEMO_DATA wins.
+ * Otherwise it needs both PYLON_DEV_MODE on and PYLON_DEV_WATCH_DIR set. Only
+ * `pylon dev` sets PYLON_DEV_WATCH_DIR; `pylon start` and the Docker image do
+ * not, and the image turns PYLON_DEV_MODE on by default, so dev mode alone is
+ * not proof of a local machine.
+ */
+export function demoDataEnabled(env: Record<string, string | undefined>): boolean {
+  const explicit = env.PYLON_DEMO_DATA?.trim().toLowerCase();
+  if (explicit && ON.has(explicit)) return true;
+  if (explicit && OFF.has(explicit)) return false;
+  const dev = env.PYLON_DEV_MODE?.trim().toLowerCase();
+  const devMode = dev === "1" || dev === "true";
+  return devMode && Boolean(env.PYLON_DEV_WATCH_DIR?.trim());
+}
+
+const FIRST = [
+  "priya", "marcus", "lena", "tomas", "aisha", "ben", "hana", "diego", "sofia", "kwame",
+  "ingrid", "raj", "noor", "felix", "maya", "owen", "yuki", "carmen", "theo", "amara",
+  "jonas", "leila", "sam", "ines", "dev", "clara", "malik", "rosa", "ethan", "zara",
+];
+const LAST = [
+  "nair", "bell", "fischer", "alvarez", "khan", "osei", "sato", "ruiz", "marin", "mensah",
+  "berg", "patel", "haddad", "wagner", "chen", "reilly", "tanaka", "vega", "park", "okafor",
+];
+// Fictional company domains on the reserved .example TLD, so no demo address
+// can reach a real inbox.
+const DOMAINS = [
+  "fieldnote.example", "northwind.example", "quarry.example", "bluefin.example", "wren.example",
+  "copperline.example", "tidewater.example", "larkspur.example", "kestrel.example", "orchardlabs.example",
+  "sable.example", "ironwood.example", "halcyon.example", "pinecrest.example", "vantage.example",
+];
+
+/** Small deterministic PRNG (mulberry32) so the demo set is stable per seed. */
+function rng(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export interface DemoSubscriber {
+  email: string;
+  createdAt: string;
+}
+
+/**
+ * About 180 subscribers over the 30 days before `nowMs`, rising toward today.
+ * Emails are unique. Every timestamp is in the past.
+ */
+export function demoSubscribers(nowMs: number, seed = 23): DemoSubscriber[] {
+  const rand = rng(seed);
+  const out: DemoSubscriber[] = [];
+  const seen = new Set<string>();
+  const DAY = 86_400_000;
+  for (let daysAgo = 29; daysAgo >= 0; daysAgo--) {
+    // Growth curve: ~2/day a month ago, ~10/day this week, plus noise.
+    const base = 2 + Math.round((29 - daysAgo) * 0.28);
+    const count = Math.max(0, base + Math.round((rand() - 0.5) * 4));
+    for (let i = 0; i < count; i++) {
+      const first = FIRST[Math.floor(rand() * FIRST.length)];
+      const last = LAST[Math.floor(rand() * LAST.length)];
+      const domain = DOMAINS[Math.floor(rand() * DOMAINS.length)];
+      const shape = rand();
+      const local = shape < 0.5 ? `${first}.${last}` : shape < 0.8 ? `${first}` : `${first[0]}${last}`;
+      const email = `${local}@${domain}`;
+      if (seen.has(email)) continue;
+      seen.add(email);
+      // A random minute inside that day, never later than `nowMs`.
+      const offset = Math.floor(rand() * DAY);
+      const ts = Math.min(nowMs - 60_000, nowMs - daysAgo * DAY - offset);
+      out.push({ email, createdAt: new Date(ts).toISOString() });
+    }
+  }
+  return out.sort((a, b) => (a.createdAt < b.createdAt ? -1 : 1));
+}

package/templates/creator/lib/site.config.ts

@@ -48,7 +48,11 @@ export type CreatorConfig = BaseConfig & {
     ctaLabel: string;
     successMessage: string;
     counterLabel: string; // e.g. "readers subscribed"
-    seedCount?: number; // vanity baseline added to the real live count
+    counterLabelOne: string; // the same label for a count of 1
+    // Subscribers you are moving over from another tool, added to the
+    // Subscriber table's count. Keep 0 unless those people are real; the page
+    // shows the sum as one number.
+    importedCount: number;
   };
   links?: { headline: string; body: string; items: LinkItem[] };
 };
@@ -62,7 +66,7 @@ export const siteConfig: CreatorConfig = {
     domain: "mayarivera.co",
     email: "hello@mayarivera.example",
     footerBlurb:
-      "Product design coach and writer. I help designers do braver work — through 1:1 coaching, portfolio reviews, and a weekly newsletter.",
+      "Product design coach and writer. 1:1 coaching, portfolio reviews, and a weekly newsletter.",
     copyrightName: "Maya Rivera",
     socials: [
       {
@@ -83,14 +87,14 @@ export const siteConfig: CreatorConfig = {
   seo: {
     title: "Maya Rivera — product design coach & writer",
     description:
-      "Product design coaching, portfolio reviews, and a weekly newsletter for designers who want to do braver work.",
+      "Product design coaching, portfolio reviews, and a weekly newsletter for product designers.",
   },
 
   hero: {
     name: "Maya Rivera",
     tagline: "Product design coach & writer.",
     intro:
-      "I help product designers get unstuck, sharpen their portfolios, and do the bravest work of their careers. I spent fifteen years leading design teams, and now I spend that time with you.",
+      "I coach product designers on portfolios, critique, and the move to senior roles. I led design teams for fifteen years. Now I work with designers one at a time.",
   },
 
   about: {
@@ -106,7 +110,7 @@ export const siteConfig: CreatorConfig = {
     items: [
       {
         title: "1:1 coaching",
-        body: "Monthly sessions on whatever's in your way — craft, career, confidence. We build a plan and I hold you to it.",
+        body: "Two sessions a month on your work and your next role. We agree on a plan and review it each session.",
         price: "from $400/mo",
       },
       {
@@ -151,7 +155,7 @@ export const siteConfig: CreatorConfig = {
     items: [
       {
         quote:
-          "Maya helped me land a senior role in three months. The portfolio review alone was worth ten times the price.",
+          "Maya helped me land a senior role in three months. The portfolio review changed which projects I led with.",
         name: "Daniel Reyes",
         role: "Senior Product Designer",
       },
@@ -163,7 +167,7 @@ export const siteConfig: CreatorConfig = {
       },
       {
         quote:
-          "I read the newsletter every week. It feels like a coaching session in my inbox.",
+          "I read the newsletter every week. Each issue has one thing I can use that week.",
         name: "Marcus Bell",
         role: "Product Designer",
       },
@@ -172,12 +176,13 @@ export const siteConfig: CreatorConfig = {
 
   newsletter: {
     name: "The Studio Notes",
-    subcopy: "One short email every Sunday on design, taste, and doing brave work.",
+    subcopy: "One short email every Sunday on critique, portfolios, and design careers.",
     emailPlaceholder: "you@email.com",
     ctaLabel: "Subscribe",
     successMessage: "You are in. The next issue arrives on Sunday.",
-    counterLabel: "designers reading",
-    seedCount: 2400,
+    counterLabel: "designers subscribed",
+    counterLabelOne: "designer subscribed",
+    importedCount: 0,
   },
 
   links: {

package/templates/creator/lib/stats.ts

@@ -28,3 +28,38 @@ export interface SubscriberStatsData {
 export type SubscriberStatsResult =
   | ({ authorized: true } & SubscriberStatsData)
   | { authorized: false };
+
+/* ------------------------- public live counter ------------------------- */
+
+// The public counter shows the Subscriber table's row count, read from the
+// PII-free SubscriberCount row. `importedCount` is
+// `siteConfig.newsletter.importedCount`: subscribers you are moving over from
+// another tool. It is 0 by default, so the page shows only rows in the table.
+export function publicCount(
+  countRows: ReadonlyArray<{ count: number }>,
+  importedCount = 0,
+): number {
+  const real = countRows.length > 0 ? Math.max(0, Math.floor(countRows[0].count)) : 0;
+  const imported = Number.isFinite(importedCount) ? Math.max(0, Math.floor(importedCount)) : 0;
+  return real + imported;
+}
+
+// The subset of `ctx.db.unsafe` the recount needs. Typed structurally so the
+// helper runs against the real handle and a test double.
+export interface CountDb {
+  list(entity: string): Promise<unknown[]>;
+  insert(entity: string, data: Record<string, unknown>): Promise<unknown>;
+  update(entity: string, id: string, data: Record<string, unknown>): Promise<unknown>;
+}
+
+// Write the Subscriber row count into the single SubscriberCount row, creating
+// it if missing. Every writer of Subscriber calls this in the same transaction,
+// so the public number is always the table's count.
+export async function syncSubscriberCount(db: CountDb): Promise<number> {
+  const total = (await db.list("Subscriber")).length;
+  const row = (await db.list("SubscriberCount"))[0] as { id: string } | undefined;
+  const now = new Date().toISOString();
+  if (row) await db.update("SubscriberCount", row.id, { count: total, updatedAt: now });
+  else await db.insert("SubscriberCount", { count: total, updatedAt: now });
+  return total;
+}

package/templates/creator/tests/counter.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, test } from "bun:test";
+import { publicCount, syncSubscriberCount, type CountDb } from "../lib/stats";
+import { demoDataEnabled, demoSubscribers } from "../lib/demo";
+import { siteConfig } from "../lib/site.config";
+
+describe("publicCount", () => {
+  test("is the table's count when nothing is imported", () => {
+    expect(publicCount([{ count: 3 }])).toBe(3);
+    expect(publicCount([])).toBe(0);
+  });
+  test("adds only an explicit, non-negative imported count", () => {
+    expect(publicCount([{ count: 3 }], 40)).toBe(43);
+    expect(publicCount([{ count: 3 }], -5)).toBe(3);
+    expect(publicCount([{ count: 3 }], Number.NaN)).toBe(3);
+  });
+  test("the shipped config adds nothing to the real count", () => {
+    expect(siteConfig.newsletter.importedCount).toBe(0);
+  });
+});
+
+// An in-memory stand-in for ctx.db.unsafe.
+function fakeDb(signups: number): CountDb & { rows: Record<string, Record<string, unknown>[]> } {
+  const rows: Record<string, Record<string, unknown>[]> = {
+    Subscriber: Array.from({ length: signups }, (_, i) => ({ id: `s${i}` })),
+    SubscriberCount: [],
+  };
+  return {
+    rows,
+    async list(entity) {
+      return rows[entity] ?? [];
+    },
+    async insert(entity, data) {
+      const id = `${entity}-${rows[entity].length}`;
+      rows[entity].push({ id, ...data });
+      return id;
+    },
+    async update(entity, id, data) {
+      const row = rows[entity].find((r) => r.id === id);
+      if (row) Object.assign(row, data);
+      return id;
+    },
+  };
+}
+
+describe("syncSubscriberCount", () => {
+  test("creates the stat row with the Subscriber count", async () => {
+    const db = fakeDb(5);
+    expect(await syncSubscriberCount(db)).toBe(5);
+    expect(db.rows.SubscriberCount).toHaveLength(1);
+    expect(db.rows.SubscriberCount[0].count).toBe(5);
+  });
+  test("recounts into the existing row instead of adding one", async () => {
+    const db = fakeDb(5);
+    await syncSubscriberCount(db);
+    db.rows.Subscriber.push({ id: "late" });
+    await syncSubscriberCount(db);
+    expect(db.rows.SubscriberCount).toHaveLength(1);
+    expect(db.rows.SubscriberCount[0].count).toBe(6);
+  });
+});
+
+describe("demoDataEnabled", () => {
+  test("needs a `pylon dev` process when PYLON_DEMO_DATA is unset", () => {
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "1", PYLON_DEV_WATCH_DIR: "/src/app" })).toBe(true);
+    // The Docker base image turns dev mode on by default; without `pylon dev` it must not seed.
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "true" })).toBe(false);
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "true", PYLON_DEV_WATCH_DIR: "/src/app" })).toBe(true);
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "false" })).toBe(false);
+    expect(demoDataEnabled({})).toBe(false);
+  });
+  test("an explicit PYLON_DEMO_DATA wins", () => {
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "1", PYLON_DEV_WATCH_DIR: "/src/app", PYLON_DEMO_DATA: "0" })).toBe(false);
+    expect(demoDataEnabled({ PYLON_DEV_MODE: "false", PYLON_DEMO_DATA: "1" })).toBe(true);
+  });
+});
+
+describe("demoSubscribers", () => {
+  const now = Date.parse("2026-09-26T15:00:00Z");
+  const rows = demoSubscribers(now);
+  test("unique emails, all in the past 30 days", () => {
+    expect(new Set(rows.map((r) => r.email)).size).toBe(rows.length);
+    for (const r of rows) {
+      const t = Date.parse(r.createdAt);
+      expect(t).toBeLessThan(now);
+      expect(t).toBeGreaterThan(now - 31 * 86_400_000);
+    }
+  });
+  test("enough rows to fill the chart, stable for a seed", () => {
+    expect(rows.length).toBeGreaterThan(120);
+    expect(demoSubscribers(now)).toEqual(rows);
+  });
+});

package/templates/creator/tests/live-count.test.tsx

@@ -0,0 +1,45 @@
+import { afterEach, expect, mock, test } from "bun:test";
+import React from "react";
+import { cleanup, render, screen } from "@testing-library/react";
+
+// The live count reads the SubscriberCount row. Mock the data boundary so the
+// test controls what the "server" says.
+let rows: { id: string; count: number }[] = [];
+let loading = false;
+mock.module("@pylonsync/react", () => ({
+  db: { useQuery: () => ({ data: rows, loading }) },
+  callFn: async () => ({ seeded: false }),
+}));
+mock.module("@pylonsync/client", () => ({
+  EnsureGuest: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+const { LiveCounter } = await import("../app/(marketing)/newsletter-signup");
+
+afterEach(() => {
+  cleanup();
+  rows = [];
+  loading = false;
+});
+
+test("shows the table's count, with no vanity baseline", () => {
+  rows = [{ id: "c", count: 42 }];
+  render(<LiveCounter importedCount={0} label="designers subscribed" labelOne="designer subscribed" />);
+  expect(screen.getByTestId("live-count").textContent).toBe("42 designers subscribed");
+});
+
+test("shows nothing before the first sync or while the list is empty", () => {
+  loading = true;
+  const { unmount } = render(<LiveCounter importedCount={0} label="designers subscribed" labelOne="designer subscribed" />);
+  expect(screen.queryByTestId("live-count")).toBeNull();
+  unmount();
+  loading = false;
+  rows = [{ id: "c", count: 0 }];
+  render(<LiveCounter importedCount={0} label="designers subscribed" labelOne="designer subscribed" />);
+  expect(screen.queryByTestId("live-count")).toBeNull();
+});
+
+test("uses the singular label for one subscriber", () => {
+  rows = [{ id: "c", count: 1 }];
+  render(<LiveCounter importedCount={0} label="designers subscribed" labelOne="designer subscribed" />);
+  expect(screen.getByTestId("live-count").textContent).toBe("1 designer subscribed");
+});

package/templates/crm/README.md

@@ -14,6 +14,11 @@ 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.
 
+The deals are spread across you and four demo teammates. Each is a User
+row with a `@demo.invalid` address and no password, so outside dev mode nobody
+can sign in as one (see `lib/demo-team.ts`). Delete those users along with the
+seed.
+
 ## What's interesting here
 
 **The board is live.** Drag a deal to another column and it moves on every
@@ -31,6 +36,22 @@ 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`).
 
+## Brand and layout
+
+The product ships as **Dealbook**. 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
+(Instrument Sans) 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
 
 ```
@@ -84,7 +105,7 @@ already themed.
 - **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`.
+  `components/nav.tsx`.
 
 ## Deploy
 

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

@@ -9,7 +9,7 @@ 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 { isOpen, money, relativeTime } from "@/lib/pipeline";
 import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type CompanyRow, type DealRow } from "../workspace";
 
@@ -17,30 +17,37 @@ export function CompaniesView() {
   const [open, setOpen] = useState(false);
 
   return (
-    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/companies">
       {(data) => {
-        // Pipeline per company, computed here rather than stored — one less
-        // thing to keep in sync when a deal moves.
+        // Open pipeline per company, computed from the deals rather than
+        // stored, so a moved deal can't leave it stale.
         const openValue = (companyId: string) =>
           data.deals
-            .filter((deal: DealRow) => deal.companyId === companyId)
+            .filter((deal: DealRow) => deal.companyId === companyId && isOpen(deal))
             .reduce((sum, deal) => sum + (Number(deal.value) || 0), 0);
 
         const columns: ColumnDef<CompanyRow>[] = [
           {
             key: "name",
             header: "Company",
+            className: "w-[46%] md:w-[26%]",
             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.industry ?? row.domain ?? ""}
+                  </span>
+                </span>
               </span>
             ),
           },
           {
             key: "domain",
             header: "Domain",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">{row.domain ?? "—"}</span>
             ),
@@ -48,6 +55,7 @@ export function CompaniesView() {
           {
             key: "industry",
             header: "Industry",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">{row.industry ?? "—"}</span>
             ),
@@ -55,19 +63,27 @@ export function CompaniesView() {
           {
             key: "size",
             header: "Size",
+            hideBelow: "lg",
+            className: "w-[110px]",
             cell: (row) => (
               <span className="text-muted-foreground">{row.size ?? "—"}</span>
             ),
           },
           {
             key: "pipeline",
-            header: "Pipeline",
+            header: "Open pipeline",
             numeric: true,
-            cell: (row) => money(openValue(row.id)),
+            className: "w-[130px]",
+            cell: (row) => {
+              const value = openValue(row.id);
+              return value > 0 ? money(value) : <span className="text-muted-foreground">—</span>;
+            },
           },
           {
             key: "created",
             header: "Added",
+            hideBelow: "sm",
+            className: "w-[110px]",
             cell: (row) => (
               <span className="text-muted-foreground">
                 {relativeTime(row.createdAt)}
@@ -80,16 +96,18 @@ export function CompaniesView() {
 
         return (
           <>
-            <PageHeader title="Companies" count={rows.length}>
+            <PageHeader title="Companies" count={data.navCounts["/companies"]}>
               <Button size="sm" onClick={() => setOpen(true)}>
                 <Plus />
-                New company
+                <span className="max-sm:sr-only">New company</span>
               </Button>
             </PageHeader>
 
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Companies"
               empty={
                 <EmptyState
                   icon={<Building2 />}
@@ -111,8 +129,8 @@ export function CompaniesView() {
               submitLabel="Create company"
               onOpenChange={setOpen}
               fields={[
-                { name: "name", label: "Name", required: true, placeholder: "Acme Inc" },
-                { name: "domain", label: "Domain", placeholder: "acme.com" },
+                { name: "name", label: "Name", required: true, placeholder: "Northwind Logistics" },
+                { name: "domain", label: "Domain", placeholder: "northwind.co" },
                 { name: "industry", label: "Industry", placeholder: "Logistics" },
                 { name: "size", label: "Size", placeholder: "50-200" },
               ]}

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

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

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

@@ -17,23 +17,30 @@ export function ContactsView() {
   const [open, setOpen] = useState(false);
 
   return (
-    <RequireAuth title="CRM" description="Your team shares one pipeline. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/contacts">
       {(data) => {
         const columns: ColumnDef<ContactRow>[] = [
           {
             key: "name",
             header: "Name",
+            className: "w-[55%] md:w-[22%]",
             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} />
+                <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.title, data.companyName(row.companyId)].filter(Boolean).join(", ")}
+                  </span>
+                </span>
               </span>
             ),
           },
           {
             key: "title",
             header: "Title",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">{row.title ?? "—"}</span>
             ),
@@ -41,6 +48,7 @@ export function ContactsView() {
           {
             key: "company",
             header: "Company",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">
                 {data.companyName(row.companyId) ?? "—"}
@@ -50,6 +58,8 @@ export function ContactsView() {
           {
             key: "email",
             header: "Email",
+            hideBelow: "lg",
+            className: "w-[24%]",
             cell: (row) =>
               row.email ? (
                 <a
@@ -66,13 +76,25 @@ export function ContactsView() {
           {
             key: "phone",
             header: "Phone",
-            cell: (row) => (
-              <span className="text-muted-foreground">{row.phone ?? "—"}</span>
-            ),
+            className: "w-[140px]",
+            cell: (row) =>
+              row.phone ? (
+                <a
+                  href={`tel:${row.phone.replace(/[^+\d]/g, "")}`}
+                  onClick={(event) => event.stopPropagation()}
+                  className="tabular text-muted-foreground hover:text-foreground"
+                >
+                  {row.phone}
+                </a>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              ),
           },
           {
             key: "created",
             header: "Added",
+            hideBelow: "xl",
+            className: "w-[100px]",
             cell: (row) => (
               <span className="text-muted-foreground">
                 {relativeTime(row.createdAt)}
@@ -85,16 +107,18 @@ export function ContactsView() {
 
         return (
           <>
-            <PageHeader title="Contacts" count={rows.length}>
+            <PageHeader title="Contacts" count={data.navCounts["/contacts"]}>
               <Button size="sm" onClick={() => setOpen(true)}>
                 <Plus />
-                New contact
+                <span className="max-sm:sr-only">New contact</span>
               </Button>
             </PageHeader>
 
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Contacts"
               empty={
                 <EmptyState
                   icon={<Users />}
@@ -126,7 +150,7 @@ export function ContactsView() {
                     .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: "email", label: "Email", type: "email", placeholder: "dana@northwind.co" },
                 { name: "phone", label: "Phone", type: "tel", placeholder: "+1 555 0100" },
               ]}
               onCreate={async (values) => {

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

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