@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/projects/components/sidebar.tsx

@@ -1,111 +1,117 @@
 import React from "react";
 import { Link } from "@pylonsync/react";
-import { Command, FolderKanban, 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: "Projects", icon: <FolderKanban /> },
-  { href: "/clients", label: "Clients", 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/projects/components/summary-bar.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { duration, money, type Portfolio } from "@/lib/work";
+
+/**
+ * The four numbers across active projects. Derived from the time ledger; see
+ * `portfolio` in lib/work.ts, where the arithmetic is unit-tested.
+ */
+export function SummaryBar({ portfolio: p }: { portfolio: Portfolio }) {
+  return (
+    <dl className="grid shrink-0 grid-cols-2 gap-px border-b border-border bg-border lg:grid-cols-4">
+      <Metric label="Active projects" value={String(p.activeCount)} hint="in delivery now" />
+      <Metric label="Time logged" value={duration(p.loggedMinutes)} hint="on active projects" />
+      <Metric label="Billable" value={money(p.billableCents)} hint="at each project's rate" />
+      <Metric
+        label="Over budget"
+        value={String(p.overBudgetCount)}
+        hint={p.overBudgetCount === 1 ? "project past its hours" : "projects past their hours"}
+        alarming={p.overBudgetCount > 0}
+      />
+    </dl>
+  );
+}
+
+function Metric({
+  label,
+  value,
+  hint,
+  alarming,
+}: {
+  label: string;
+  value: string;
+  hint: string;
+  alarming?: boolean;
+}) {
+  return (
+    <div className="min-w-0 bg-background px-4 py-2.5 md:px-5 md:py-3.5">
+      <dt className="truncate text-[12px] text-muted-foreground">{label}</dt>
+      <dd
+        className={
+          "tabular mt-1 text-[18px] font-semibold leading-none tracking-[-0.02em] md:text-[22px]" +
+          (alarming ? " text-destructive" : "")
+        }
+      >
+        {value}
+      </dd>
+      <p className="mt-1 truncate text-[11.5px] text-muted-foreground md:mt-1.5">{hint}</p>
+    </div>
+  );
+}

package/templates/projects/components/task-board.tsx

@@ -29,7 +29,7 @@ export function TaskBoard({
   const columns = groupByStatus(tasks);
 
   return (
-    <div className="flex h-full gap-3 overflow-x-auto p-4">
+    <div className="flex h-full snap-x snap-mandatory scroll-px-4 gap-3 overflow-x-auto p-4 md:snap-none md:px-5">
       {columns.map((column) => {
         const isTarget = over === column.status.id;
         const logged = column.tasks.reduce(
@@ -62,18 +62,19 @@ export function TaskBoard({
               onMove(id, column.status.id);
             }}
             className={cn(
-              "flex w-[268px] shrink-0 flex-col rounded-xl border transition-colors",
-              isTarget ? "border-ring/60 bg-surface-2/60" : "border-border bg-surface-1/50",
+              "flex w-[84vw] shrink-0 snap-start flex-col rounded-xl border transition-colors",
+              "md:w-auto md:min-w-[220px] md:max-w-[360px] md:flex-1",
+              isTarget ? "border-ring/50 bg-primary/[0.04]" : "border-border/70 bg-surface-1",
             )}
             aria-label={column.status.label}
           >
-            <header className="flex items-center gap-2 px-3 py-2.5">
-              <h2 className="text-[12px] font-medium">{column.status.label}</h2>
-              <span className="tabular text-[11px] text-muted-foreground">
+            <header className="flex items-center gap-2 px-3 pb-2 pt-3">
+              <h2 className="text-[12.5px] font-semibold">{column.status.label}</h2>
+              <span className="tabular text-[12px] text-muted-foreground">
                 {column.tasks.length}
               </span>
               {logged > 0 ? (
-                <span className="tabular ml-auto text-[11px] text-muted-foreground">
+                <span className="tabular ml-auto text-[12px] text-muted-foreground">
                   {duration(logged)}
                 </span>
               ) : null}
@@ -96,8 +97,8 @@ export function TaskBoard({
                 />
               ))}
               {column.tasks.length === 0 ? (
-                <p className="px-1 py-6 text-center text-[11px] text-muted-foreground">
-                  {isTarget ? "Drop here" : "Nothing here"}
+                <p className="rounded-lg border border-dashed border-border px-3 py-6 text-center text-[12px] text-muted-foreground">
+                  {isTarget ? "Drop to move here" : `No tasks in ${column.status.label}`}
                 </p>
               ) : null}
             </div>

package/templates/projects/components/time-dialog.tsx

@@ -9,23 +9,30 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { duration, parseDuration } from "@/lib/work";
+import { Select } from "@/components/ui/select";
+import { TASK_STATUSES, duration, parseDuration } from "@/lib/work";
 
 /**
- * Log time against a task.
+ * Log time against a task, and move it between columns. The status select is
+ * how a task changes column on a touch screen, where cards can't be dragged.
  *
  * The field accepts however people write time — "90", "1.5h", "1h30", "45m".
- * Rejecting "1h30" because it isn\'t "90" is the kind of friction that stops
+ * Rejecting "1h30" because it isn't "90" is the kind of friction that stops
  * time being logged at all, which costs far more than a lenient parser.
  */
 export function TimeDialog({
   open,
   taskTitle,
+  status,
+  onMove,
   onOpenChange,
   onLog,
 }: {
   open: boolean;
   taskTitle: string;
+  /** The task's current column. With `onMove`, shows a status select. */
+  status?: string;
+  onMove?: (status: string) => void;
   onOpenChange: (open: boolean) => void;
   onLog: (minutes: number, note: string) => void | Promise<void>;
 }) {
@@ -63,7 +70,24 @@ export function TimeDialog({
           <DialogTitle>Log time</DialogTitle>
         </DialogHeader>
         <form onSubmit={submit} className="grid gap-4">
-          <p className="truncate text-[12px] text-muted-foreground">{taskTitle}</p>
+          <p className="truncate text-[13px] font-medium">{taskTitle}</p>
+
+          {status && onMove ? (
+            <div className="space-y-1.5">
+              <Label htmlFor="task-status">Status</Label>
+              <Select
+                id="task-status"
+                value={status}
+                onChange={(event) => onMove(event.target.value)}
+              >
+                {TASK_STATUSES.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.label}
+                  </option>
+                ))}
+              </Select>
+            </div>
+          ) : null}
 
           <div className="space-y-1.5">
             <Label htmlFor="time-value">Time</Label>
@@ -79,7 +103,7 @@ export function TimeDialog({
             ) : null}
             {tooMuch ? (
               <p className="text-[11px] text-destructive">
-                That\'s more than a day — check the value.
+                That's more than a day — check the value.
               </p>
             ) : null}
             {minutes === null && value.trim() ? (

package/templates/projects/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/projects/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/projects/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/projects/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/projects/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/projects/functions/seedWorkspace.ts

@@ -1,25 +1,37 @@
 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 delivery workspace once.
  *
- * Seeds time as ENTRIES rather than totals, because logged time here is the sum
- * of the ledger — a seed that wrote totals would contradict the app\'s own model.
- * One project lands over its budget so that state is visible on first load.
+ * Seeds time as ENTRIES rather than totals, because logged time here is the
+ * sum of the ledger; a seed that wrote totals would contradict the app's own
+ * model. One project lands over its budget so that state is visible on first
+ * load.
  *
- * Returns immediately if any project exists, so it is safe on every load.
+ * Returns immediately if any project exists, so it is safe on every load. An
+ * advisory lock stops two first loads from seeding twice. Tasks are assigned
+ * across the person who signed in and four demo teammates (User rows with no
+ * password, see SEED_TEAM), and each entry is logged by its task's assignee.
+ * Delete this function, lib/seed.ts, and the `seedWorkspace` call in
+ * app/workspace.tsx once you have real projects, then delete the demo users.
  */
 export default mutation<Record<string, never>, { seeded: boolean }>({
   auth: "user",
   args: {},
   async handler(ctx) {
-    const existing = await ctx.db.query("Project", { $limit: 1 });
-    if (existing.length > 0) return { seeded: false };
+    if ((await ctx.db.query("Project", { $limit: 1 })).length > 0) return { seeded: false };
+    await ctx.db.advisoryLock("projects_seed_workspace");
+    if ((await ctx.db.query("Project", { $limit: 1 })).length > 0) return { seeded: false };
 
     const seed = shapeSeed();
     const me = ctx.auth.userId;
 
+    // Position 0 is the person who signed in; SEED_TEAM follows.
+    const team: Array<string | null> = [me];
+    for (const person of SEED_TEAM) team.push(await ensureDemoUser(ctx.db, person));
+
     const clientIds = new Map<string, string>();
     for (const client of seed.clients) {
       const id = await ctx.db.insert("Client", client.row);
@@ -35,22 +47,24 @@ export default mutation<Record<string, never>, { seeded: boolean }>({
       projectIds.set(project.key, id as string);
     }
 
-    const taskIds = new Map<string, string>();
+    const tasks = new Map<string, { id: string; assignee: string | null }>();
     for (const task of seed.tasks) {
+      const assignee = task.assignee === null ? null : (team[task.assignee] ?? me);
       const id = await ctx.db.insert("Task", {
         ...task.row,
         projectId: projectIds.get(task.project) ?? null,
-        assigneeId: me,
+        assigneeId: assignee,
       });
-      taskIds.set(task.key, id as string);
+      tasks.set(task.key, { id: id as string, assignee });
     }
 
     for (const entry of seed.entries) {
+      const task = tasks.get(entry.task);
       await ctx.db.insert("TimeEntry", {
         ...entry.row,
-        taskId: taskIds.get(entry.task) ?? null,
+        taskId: task?.id ?? null,
         projectId: projectIds.get(entry.project) ?? null,
-        userId: me,
+        userId: task?.assignee ?? me,
       });
     }
 

package/templates/projects/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: "Workbench",
+  /** One line on the sign-in screen: what the app holds and who sees it. */
+  description: "Your team's client projects, task boards, and timesheets. Everyone sees the same work.",
+} as const;

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

@@ -134,10 +134,43 @@ export const SEED_TASKS: SeedTask[] = [
   { key: "rf-reports", project: "referrals", title: "Turnaround reports", status: "done", estimateHours: 8, loggedHours: [4, 5] },
 ];
 
+/**
+ * The demo delivery team. Each becomes a User row with no
+ * password (see lib/demo-team.ts); they exist so tasks and timesheets have realistic
+ * owners. The `.invalid` domain is reserved and can never receive mail.
+ */
+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 the seeded task at `index` is assigned to, as a position in
+ * `[you, ...SEED_TEAM]`, or null. A task still to do whose index in SEED_TASKS
+ * is a multiple of 3 is unassigned, so the board has work to pick up; the rest spread across the team,
+ * including the person who signed up.
+ */
+export function seedAssignee(
+  index: number,
+  status: string,
+  teamSize: number = SEED_TEAM.length + 1,
+): number | null {
+  if (status === "todo" && index % 3 === 0) return null;
+  return (index * 3 + 1) % teamSize;
+}
+
 export interface ShapedSeed {
   clients: Array<{ key: string; row: Record<string, unknown> }>;
   projects: Array<{ key: string; client: string; row: Record<string, unknown> }>;
-  tasks: Array<{ key: string; project: string; row: Record<string, unknown> }>;
+  /** `assignee` is a position in `[you, ...SEED_TEAM]`, or null; see seedAssignee. */
+  tasks: Array<{ key: string; project: string; assignee: number | null; row: Record<string, unknown> }>;
   entries: Array<{ task: string; project: string; row: Record<string, unknown> }>;
 }
 
@@ -162,6 +195,7 @@ export function shapeSeed(now: number = Date.now()): ShapedSeed {
     tasks.push({
       key: task.key,
       project: task.project,
+      assignee: seedAssignee(index, task.status),
       row: {
         title: task.title,
         status: task.status,