@pylonsync/create-pylon 0.19.1 → 0.21.0

package/templates/crm/components/sidebar.tsx

@@ -1,112 +1,117 @@
 import React from "react";
 import { Link } from "@pylonsync/react";
-import { Building2, Command, LayoutGrid, LogOut, Users } from "lucide-react";
+import { LogOut, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { BRAND } from "@/lib/brand";
+import { NAV } from "@/components/nav";
 import { Avatar } from "@/components/avatar";
+import { BrandMark } from "@/components/brand-mark";
 import { Kbd } from "@/components/kbd";
 
-export interface NavItem {
-  href: string;
-  label: string;
-  icon: React.ReactNode;
-  count?: number;
+/** True when `href` is the section `pathname` belongs to. */
+export function isActive(href: string, pathname: string): boolean {
+  if (href === "/") return pathname === "/";
+  return pathname === href || pathname.startsWith(`${href}/`);
 }
 
-export const NAV: Array<Omit<NavItem, "count">> = [
-  { href: "/", label: "Pipeline", icon: <LayoutGrid /> },
-  { href: "/companies", label: "Companies", icon: <Building2 /> },
-  { href: "/contacts", label: "Contacts", icon: <Users /> },
-];
-
 /**
- * The fixed left rail. Presentational: the active path, the counts, and the
- * sign-out handler all arrive as props, so it renders identically in a test.
+ * The navigation rail: brand, search, links with counts, and the signed-in
+ * person. The same component renders as the fixed rail on wide screens and
+ * inside the drawer on phones (see components/app-shell.tsx).
+ *
+ * Presentational: the path, counts, and handlers arrive as props, so it
+ * renders the same in a test.
  */
 export function Sidebar({
-  workspace,
-  email,
+  user,
   pathname,
   counts,
   onOpenCommand,
+  onNavigate,
   onSignOut,
+  className,
 }: {
-  workspace: string;
-  email: string;
+  user: { name: string; email: string };
   pathname: string;
+  /** Badge per nav href. Omit a key to show no number. */
   counts?: Record<string, number>;
   onOpenCommand: () => void;
+  /** Called after a link is chosen, so the phone drawer can close. */
+  onNavigate?: () => void;
   onSignOut: () => void;
+  className?: string;
 }) {
   return (
-    <aside className="flex w-[224px] shrink-0 flex-col border-r border-border bg-surface-1">
-      <div className="flex h-12 items-center gap-2 px-3">
-        <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-[11px] font-bold text-primary-foreground">
-          {workspace.slice(0, 1).toUpperCase()}
+    <div className={cn("flex h-full w-full flex-col bg-surface-1", className)}>
+      <div className="flex h-13 shrink-0 items-center gap-2.5 px-4">
+        <BrandMark />
+        <span className="truncate text-[14px] font-semibold tracking-[-0.01em]">
+          {BRAND.name}
         </span>
-        <span className="truncate text-[13px] font-semibold">{workspace}</span>
       </div>
 
-      <div className="px-2 pb-2">
+      <div className="px-3 pb-3">
         <button
           type="button"
           onClick={onOpenCommand}
           className={cn(
-            "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5",
-            "text-[12px] text-muted-foreground transition-colors hover:border-ring/40 hover:text-foreground",
+            "flex h-8 w-full items-center gap-2 rounded-md border border-border bg-background px-2.5",
+            "text-[12.5px] text-muted-foreground shadow-[0_1px_1px_rgb(0_0_0/0.03)] transition-colors",
+            "hover:border-foreground/15 hover:text-foreground",
           )}
         >
-          <Command className="size-3.5" />
-          <span className="flex-1 text-left">Search…</span>
-          <Kbd>⌘K</Kbd>
+          <Search className="size-3.5" />
+          <span className="flex-1 text-left">Search</span>
+          <Kbd className="max-md:hidden">⌘K</Kbd>
         </button>
       </div>
 
-      <nav className="flex-1 space-y-0.5 px-2" aria-label="Main">
+      <nav className="flex-1 space-y-px overflow-y-auto px-3" aria-label="Main">
         {NAV.map((item) => {
-          const active =
-            item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          const active = isActive(item.href, pathname);
+          const count = counts?.[item.href];
           return (
             <Link
               key={item.href}
               href={item.href}
+              onClick={onNavigate}
               aria-current={active ? "page" : undefined}
               className={cn(
-                "flex h-7 items-center gap-2 rounded-md px-2 text-[13px] transition-colors",
-                "[&_svg]:size-3.5 [&_svg]:shrink-0",
+                "flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] transition-colors md:h-7.5",
+                "[&_svg]:size-4 [&_svg]:shrink-0",
                 active
-                  ? "bg-surface-2 font-medium text-foreground"
-                  : "text-muted-foreground hover:bg-surface-2/60 hover:text-foreground",
+                  ? "bg-foreground/[0.06] font-medium text-foreground [&_svg]:text-primary"
+                  : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
               )}
             >
               {item.icon}
               <span className="flex-1 truncate">{item.label}</span>
-              {counts?.[item.href] ? (
-                <span className="tabular text-[11px] text-muted-foreground">
-                  {counts[item.href]}
-                </span>
+              {typeof count === "number" ? (
+                <span className="tabular text-[11.5px] text-muted-foreground">{count}</span>
               ) : null}
             </Link>
           );
         })}
       </nav>
 
-      <div className="border-t border-border p-2">
-        <div className="flex items-center gap-2 rounded-md px-1.5 py-1">
-          <Avatar name={email} size="sm" />
-          <span className="min-w-0 flex-1 truncate text-[12px] text-muted-foreground">
-            {email}
-          </span>
+      <div className="border-t border-border p-3">
+        <div className="flex items-center gap-2.5">
+          <Avatar name={user.name || user.email} />
+          <div className="min-w-0 flex-1 leading-tight">
+            <p className="truncate text-[12.5px] font-medium">{user.name || "Signed in"}</p>
+            <p className="truncate text-[11.5px] text-muted-foreground">{user.email}</p>
+          </div>
           <button
             type="button"
             onClick={onSignOut}
             title="Sign out"
             aria-label="Sign out"
-            className="rounded p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground"
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground"
           >
-            <LogOut className="size-3.5" />
+            <LogOut className="size-4" />
           </button>
         </div>
       </div>
-    </aside>
+    </div>
   );
 }

package/templates/crm/components/stage-badge.tsx

@@ -2,10 +2,12 @@ import React from "react";
 import { cn } from "@/lib/utils";
 import { stageById } from "@/lib/pipeline";
 
-const DOT: Record<string, string> = {
+/** The colour dot for each stage, shared by the badge and the board columns. */
+export const STAGE_DOT: Record<string, string> = {
   lead: "bg-stage-lead",
   qualified: "bg-stage-qualified",
   proposal: "bg-stage-proposal",
+  negotiation: "bg-stage-negotiation",
   won: "bg-stage-won",
   lost: "bg-stage-lost",
 };
@@ -25,7 +27,7 @@ export function StageBadge({
   return (
     <span className={cn("inline-flex items-center gap-1.5 whitespace-nowrap", className)}>
       <span
-        className={cn("size-1.5 shrink-0 rounded-full", DOT[stage] ?? "bg-muted-foreground")}
+        className={cn("size-1.5 shrink-0 rounded-full", STAGE_DOT[stage] ?? "bg-muted-foreground")}
       />
       <span className="text-muted-foreground">{meta?.label ?? stage}</span>
     </span>

package/templates/crm/components/ui/button.tsx

@@ -5,15 +5,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[13px] font-medium transition-[color,background-color,box-shadow,transform] duration-150 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/0.15),0_1px_2px_rgb(0_0_0/0.1)] hover:bg-primary/90",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-[0_1px_1px_rgb(0_0_0/0.03)] hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -21,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
+        sm: "h-8 rounded-md px-3 text-[12.5px] md:h-7.5 [&_svg]:size-3.5",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
       },

package/templates/crm/components/ui/dialog.tsx

@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background p-6 shadow-lg duration-200",
+        "fixed left-[50%] top-[50%] z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-xl border bg-background p-5 shadow-[0_24px_48px_-12px_rgb(0_0_0/0.25)] duration-200 sm:p-6",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className,
       )}

package/templates/crm/components/ui/input.tsx

@@ -12,7 +12,7 @@ function Input({
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-[13px] transition-colors",
         "placeholder:text-muted-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",

package/templates/crm/components/ui/select.tsx

@@ -22,7 +22,7 @@ function Select({
       <select
         data-slot="select"
         className={cn(
-          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-sm shadow-sm transition-colors",
+          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-base shadow-sm md:text-[13px] transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className,

package/templates/crm/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
+        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm md:text-[13px] transition-colors",
         "placeholder:text-muted-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",

package/templates/crm/functions/seedWorkspace.ts

@@ -1,15 +1,19 @@
 import { mutation } from "@pylonsync/functions";
-import { shapeSeed } from "../lib/seed";
+import { SEED_TEAM, shapeSeed } from "../lib/seed";
+import { ensureDemoUser } from "../lib/demo-team";
 
 /**
  * Fill a brand-new workspace with a realistic pipeline, once.
  *
- * An empty CRM demonstrates nothing — no board, no forecast, no sense of what
- * the app is for. The client calls this after sign-in; it returns immediately
- * if any company already exists, so it is safe to call on every load and can
- * never duplicate the fixtures or touch real data.
+ * The client calls this after sign-in. It returns immediately if any company
+ * already exists, so it is safe to call on every load and never duplicates the
+ * fixtures or touches real data. An advisory lock stops two first loads from
+ * seeding twice.
  *
- * Delete this function and lib/seed.ts once the workspace has real customers.
+ * Deals are spread across the person who signed in and four demo teammates
+ * (see SEED_TEAM and lib/demo-team.ts). Delete this function,
+ * lib/seed.ts, and the `seedWorkspace` call in app/workspace.tsx once the
+ * workspace has real customers, then delete the demo users.
  */
 export default mutation<Record<string, never>, { seeded: boolean }>({
   auth: "user",
@@ -17,44 +21,55 @@ export default mutation<Record<string, never>, { seeded: boolean }>({
   async handler(ctx) {
     // The guard is "has anything at all", not "has the seed", so a workspace
     // whose demo rows were deleted on purpose stays deleted.
-    const existing = await ctx.db.query("Company", { $limit: 1 });
-    if (existing.length > 0) return { seeded: false };
+    if ((await ctx.db.query("Company", { $limit: 1 })).length > 0) return { seeded: false };
+    await ctx.db.advisoryLock("crm_seed_workspace");
+    if ((await ctx.db.query("Company", { $limit: 1 })).length > 0) return { seeded: false };
 
     const seed = shapeSeed();
-    const owner = ctx.auth.userId;
+    const me = ctx.auth.userId;
+
+    // Position 0 is the person who signed in; SEED_TEAM follows.
+    const owners: Array<string | null> = [me];
+    for (const person of SEED_TEAM) owners.push(await ensureDemoUser(ctx.db, person));
 
     const companyIds = new Map<string, string>();
-    for (const company of seed.companies) {
-      const id = await ctx.db.insert("Company", { ...company.row, ownerId: owner });
+    for (const [index, company] of seed.companies.entries()) {
+      const id = await ctx.db.insert("Company", {
+        ...company.row,
+        ownerId: owners[index % owners.length],
+      });
       companyIds.set(company.key, id as string);
     }
 
     const contactIds = new Map<string, string>();
-    for (const contact of seed.contacts) {
+    for (const [index, contact] of seed.contacts.entries()) {
       const id = await ctx.db.insert("Contact", {
         ...contact.row,
         companyId: companyIds.get(contact.company) ?? null,
-        ownerId: owner,
+        ownerId: owners[index % owners.length],
       });
       contactIds.set(String(contact.row.name), id as string);
     }
 
-    const dealIds = new Map<string, string>();
+    const dealIds = new Map<string, { id: string; owner: string | null }>();
     for (const deal of seed.deals) {
+      const owner = owners[deal.owner] ?? me;
       const id = await ctx.db.insert("Deal", {
         ...deal.row,
         companyId: companyIds.get(deal.company) ?? null,
         contactId: contactIds.get(deal.contact) ?? null,
         ownerId: owner,
       });
-      dealIds.set(deal.title, id as string);
+      dealIds.set(deal.title, { id: id as string, owner });
     }
 
+    // Activity on a deal is logged by the deal's owner.
     for (const activity of seed.activities) {
+      const deal = dealIds.get(activity.deal);
       await ctx.db.insert("Activity", {
         ...activity.row,
-        dealId: dealIds.get(activity.deal) ?? null,
-        ownerId: owner,
+        dealId: deal?.id ?? null,
+        ownerId: deal?.owner ?? me,
       });
     }
 

package/templates/crm/lib/brand.ts

@@ -0,0 +1,9 @@
+// The product name, in one place. The sidebar, the sign-in screen, the page
+// title, and the drawer on phones all read it. Rename the product here; the
+// mark is in components/brand-mark.tsx and the favicon is app/icon.svg.
+
+export const BRAND = {
+  name: "Dealbook",
+  /** One line on the sign-in screen: what the app holds and who sees it. */
+  description: "Your team's pipeline, companies, and contacts. Everyone on the team sees the same board.",
+} as const;

package/templates/crm/lib/demo-team.ts

@@ -0,0 +1,51 @@
+// Creates the demo teammates the seed spreads records across. Each is a User
+// row with a `@demo.invalid` address and no password. Outside dev mode nobody
+// can sign in as one: the address can't receive a sign-in or reset email.
+// In dev mode (`PYLON_DEV_MODE=true`) the auth API returns sign-in codes
+// directly, so anyone can sign in as a demo teammate there.
+
+import type { DbWriter } from "@pylonsync/functions";
+
+export interface DemoPerson {
+  name: string;
+  email: string;
+}
+
+/**
+ * The address to try on `attempt` (0, 1, 2, …): the person's own address
+ * first, then `local+2@demo.invalid`, `local+3@…`, and so on.
+ */
+export function demoEmail(email: string, attempt: number): string {
+  if (attempt === 0) return email;
+  const at = email.indexOf("@");
+  return `${email.slice(0, at)}+${attempt + 1}${email.slice(at)}`;
+}
+
+/**
+ * A User row the seed may reuse: one it created itself on an earlier run.
+ * A row with a password or a verified email belongs to someone who
+ * registered that address, so the seed never assigns demo records to it.
+ */
+export function isDemoRow(row: Record<string, unknown>): boolean {
+  return !row.passwordHash && !row.emailVerified;
+}
+
+/** Returns the id of a demo User row for `person`, creating it if needed. */
+export async function ensureDemoUser(db: DbWriter, person: DemoPerson): Promise<string> {
+  for (let attempt = 0; attempt < 20; attempt += 1) {
+    const email = demoEmail(person.email, attempt);
+    // Users are written by auth, and their policy denies client inserts, so
+    // demo rows go through the server-trust surface. The read sees
+    // passwordHash, which is how a registered account is told apart.
+    const [existing] = await db.unsafe.query("User", { email, $limit: 1 });
+    if (!existing) {
+      return db.unsafe.insert("User", {
+        email,
+        displayName: person.name,
+        createdAt: new Date(Date.now() - 200 * 86_400_000).toISOString(),
+      });
+    }
+    if (isDemoRow(existing)) return existing.id as string;
+  }
+  throw new Error(`No free demo address for ${person.email}`);
+}

package/templates/crm/lib/pipeline.ts

@@ -17,6 +17,7 @@ export const PIPELINE: Stage[] = [
   { id: "lead", label: "Lead", probability: 0.1 },
   { id: "qualified", label: "Qualified", probability: 0.3 },
   { id: "proposal", label: "Proposal", probability: 0.6 },
+  { id: "negotiation", label: "Negotiation", probability: 0.8 },
   { id: "won", label: "Won", closed: "won", probability: 1 },
   { id: "lost", label: "Lost", closed: "lost", probability: 0 },
 ];
@@ -219,3 +220,39 @@ export function daysUntil(
   };
   return Math.round((startOfDay(then) - startOfDay(now)) / 86_400_000);
 }
+
+export type CloseDue =
+  | { tone: "overdue"; days: number; label: string }
+  | { tone: "soon"; days: number; label: string };
+
+/**
+ * The close-date warning for a deal card: "3d overdue", "Today", or "5d".
+ *
+ * Only open deals get one. A won or lost deal has closed, so its expected
+ * close date is history, not a deadline. Beyond a week out there is nothing
+ * to act on yet, so that returns null too.
+ */
+export function closeDue(
+  deal: { stage: string; closeDate?: string | null },
+  now: number = Date.now(),
+): CloseDue | null {
+  if (!isOpen(deal)) return null;
+  const days = daysUntil(deal.closeDate, now);
+  if (days === null || days > 7) return null;
+  if (days < 0) return { tone: "overdue", days, label: `${Math.abs(days)}d overdue` };
+  return { tone: "soon", days, label: days === 0 ? "Today" : `${days}d` };
+}
+
+/** "Mar 3" for this year, "Mar 3, 2027" otherwise. */
+export function shortDate(iso: string | null | undefined, now: number = Date.now()): string {
+  if (!iso) return "";
+  const then = Date.parse(iso);
+  if (!Number.isFinite(then)) return "";
+  const date = new Date(then);
+  const sameYear = date.getFullYear() === new Date(now).getFullYear();
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    ...(sameYear ? {} : { year: "numeric" }),
+  });
+}

package/templates/crm/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/crm/lib/seed.ts

@@ -7,6 +7,37 @@
 // Pure data + pure shaping, so the seeding function stays a thin wrapper and
 // this file can be edited (or emptied) without reading any server code.
 
+/**
+ * The demo sales team. Each becomes a User row with no
+ * password (see lib/demo-team.ts); they exist so deals have realistic owners.
+ */
+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 owns the seeded deal at `index`, as a position in `[you, ...SEED_TEAM]`.
+ * Stepping by 3 through a team of 5 spreads every stage across everyone,
+ * including the person who signed up.
+ */
+export function seedOwner(index: number, teamSize: number = SEED_TEAM.length + 1): number {
+  return (index * 3 + 1) % teamSize;
+}
+
+/** A fictional US number in the 555-01xx range reserved for fiction. */
+export function seedPhone(index: number): string {
+  const area = [212, 312, 415, 512, 617, 720][index % 6];
+  return `+1 (${area}) 555-01${String(index % 100).padStart(2, "0")}`;
+}
+
 export interface SeedCompany {
   key: string;
   name: string;
@@ -131,14 +162,14 @@ export const SEED_DEALS: SeedDeal[] = [
   { company: "vantage", contact: "Anita Rao", title: "Installer scheduling", value: 26500, stage: "qualified", closeInDays: 38, age: 14 },
   { company: "tidewater", contact: "Sarah Lindqvist", title: "Shop floor work orders", value: 41000, stage: "qualified", closeInDays: 33, age: 19 },
 
-  // Proposal
+  // Proposal and negotiation
   { company: "northwind", contact: "Dana Whitfield", title: "Fleet dispatch rollout", value: 48000, stage: "proposal", closeInDays: 12, age: 34 },
   { company: "riverbed", contact: "Tom Alvarez", title: "Multi-store inventory", value: 22000, stage: "proposal", closeInDays: 5, age: 29 },
-  { company: "meridian", contact: "Rachel Stone", title: "Customer tracking portal", value: 88000, stage: "proposal", closeInDays: 9, age: 41 },
+  { company: "meridian", contact: "Rachel Stone", title: "Customer tracking portal", value: 88000, stage: "negotiation", closeInDays: 9, age: 41 },
   { company: "bluefin", contact: "Elena Vasquez", title: "Embedded reporting module", value: 36000, stage: "proposal", closeInDays: 14, age: 27 },
-  { company: "harbor", contact: "Robert Chen", title: "Guest messaging platform", value: 67000, stage: "proposal", closeInDays: 7, age: 38 },
-  { company: "halcyon", contact: "Margaret O'Neill", title: "Care plan tracking", value: 52000, stage: "proposal", closeInDays: 16, age: 31 },
-  { company: "summit", contact: "Greg Holloway", title: "Security review tooling", value: 18000, stage: "proposal", closeInDays: 3, age: 24 },
+  { company: "harbor", contact: "Robert Chen", title: "Guest messaging platform", value: 67000, stage: "negotiation", closeInDays: 6, age: 38 },
+  { company: "halcyon", contact: "Margaret O'Neill", title: "Care plan tracking", value: 52000, stage: "negotiation", closeInDays: 13, age: 31 },
+  { company: "summit", contact: "Greg Holloway", title: "Security review tooling", value: 18000, stage: "negotiation", closeInDays: -2, age: 24 },
   { company: "sable", contact: "Isabel Moreau", title: "Loyalty programme", value: 11200, stage: "proposal", closeInDays: 10, age: 26 },
 
   // Won
@@ -208,7 +239,14 @@ export const SEED_ACTIVITIES: SeedActivity[] = [
 export interface ShapedSeed {
   companies: Array<{ key: string; row: Record<string, unknown> }>;
   contacts: Array<{ company: string; row: Record<string, unknown> }>;
-  deals: Array<{ company: string; contact: string; title: string; row: Record<string, unknown> }>;
+  /** `owner` is a position in `[you, ...SEED_TEAM]`; see seedOwner. */
+  deals: Array<{
+    company: string;
+    contact: string;
+    title: string;
+    owner: number;
+    row: Record<string, unknown>;
+  }>;
   activities: Array<{ deal: string; row: Record<string, unknown> }>;
 }
 
@@ -239,12 +277,19 @@ export function shapeSeed(now: number = Date.now()): ShapedSeed {
     })),
     contacts: SEED_CONTACTS.map((c, index) => ({
       company: c.company,
-      row: { name: c.name, email: c.email, title: c.title, createdAt: at(-110 + index * 2) },
+      row: {
+        name: c.name,
+        email: c.email,
+        title: c.title,
+        phone: seedPhone(index),
+        createdAt: at(-110 + index * 2),
+      },
     })),
-    deals: SEED_DEALS.map((d) => ({
+    deals: SEED_DEALS.map((d, index) => ({
       company: d.company,
       contact: d.contact,
       title: d.title,
+      owner: seedOwner(index),
       row: {
         title: d.title,
         value: d.value,

package/templates/crm/tests/components.test.tsx

@@ -31,7 +31,7 @@ describe("PipelineBoard", () => {
         onOpen={() => {}}
       />,
     );
-    for (const label of ["Lead", "Qualified", "Proposal", "Won"]) {
+    for (const label of ["Lead", "Qualified", "Proposal", "Negotiation", "Won"]) {
       expect(screen.getByLabelText(label)).toBeDefined();
     }
     // Lost is real in the model but deliberately not a column.
@@ -181,7 +181,7 @@ describe("CommandPalette", () => {
     render(
       <CommandPalette open items={items} onClose={() => {}} onSelect={() => {}} />,
     );
-    fireEvent.change(screen.getByLabelText(/search deals/i), {
+    fireEvent.change(screen.getByLabelText(/^search/i), {
       target: { value: "acme" },
     });
     expect(screen.getByText("Acme Inc")).toBeDefined();
@@ -201,7 +201,7 @@ describe("CommandPalette", () => {
         onSelect={(item) => selected.push(item.id)}
       />,
     );
-    const input = screen.getByLabelText(/search deals/i);
+    const input = screen.getByLabelText(/^search/i);
     fireEvent.change(input, { target: { value: "fleet" } });
     fireEvent.keyDown(input, { key: "Enter" });
     expect(selected).toEqual(["1"]);
@@ -221,7 +221,7 @@ describe("CommandPalette", () => {
         onSelect={(item) => selected.push(item.id)}
       />,
     );
-    fireEvent.keyDown(screen.getByLabelText(/search deals/i), { key: "Escape" });
+    fireEvent.keyDown(screen.getByLabelText(/^search/i), { key: "Escape" });
     expect(closed).toBe(true);
     expect(selected).toEqual([]);
   });
@@ -237,7 +237,7 @@ describe("CommandPalette", () => {
       />,
     );
     expect(screen.getByText("New deal")).toBeDefined();
-    fireEvent.change(screen.getByLabelText(/search deals/i), {
+    fireEvent.change(screen.getByLabelText(/^search/i), {
       target: { value: "acme" },
     });
     expect(screen.queryByText("New deal")).toBeNull();