@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/helpdesk/components/sidebar.tsx

@@ -1,111 +1,117 @@
 import React from "react";
 import { Link } from "@pylonsync/react";
-import { Command, Inbox, 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: "Inbox", icon: <Inbox /> },
-  { href: "/customers", label: "Customers", 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/helpdesk/components/sla-indicator.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 import { duration } from "@/lib/format";
-import { minutesToBreach, slaState, type Ticket } from "@/lib/tickets";
+import { sla, type Ticket } from "@/lib/tickets";
 
 /**
  * How long is left to reply, or how long we're already late.
@@ -19,19 +19,16 @@ export function SlaIndicator({
   now?: number;
   className?: string;
 }) {
-  const state = slaState(ticket, now);
-  if (state === "none" || state === "met") return null;
-
-  const minutes = minutesToBreach(ticket, now);
-  if (minutes === null) return null;
+  const { state, minutes } = sla(ticket, now);
+  if (minutes === null || (state !== "due" && state !== "breached")) return null;
 
   const breached = state === "breached";
   return (
     <span
       title={breached ? "First response overdue" : "First response due"}
       className={cn(
-        "tabular inline-flex items-center gap-1 text-[11px] whitespace-nowrap",
-        breached ? "text-destructive" : "text-muted-foreground",
+        "tabular inline-flex items-center gap-1.5 rounded px-1.5 py-px text-[11.5px] font-medium whitespace-nowrap",
+        breached ? "bg-destructive/10 text-destructive" : "text-muted-foreground",
         className,
       )}
     >

package/templates/helpdesk/components/thread.tsx

@@ -58,7 +58,7 @@ export function Thread({
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-6 py-5">
+      <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-4 md:px-6 md:py-5">
         {ordered.length === 0 ? (
           <p className="py-8 text-center text-[12px] text-muted-foreground">
             No messages on this ticket yet.
@@ -72,7 +72,7 @@ export function Thread({
               <article
                 key={message.id}
                 className={cn(
-                  "rounded-lg border p-3",
+                  "rounded-lg border p-3 md:p-3.5",
                   message.internal
                     ? "border-stage-proposal/30 bg-stage-proposal/5"
                     : message.fromCustomer
@@ -80,7 +80,7 @@ export function Thread({
                       : "border-border bg-card",
                 )}
               >
-                <div className="mb-1.5 flex items-center gap-2 text-[11px] text-muted-foreground">
+                <div className="mb-1.5 flex items-center gap-2 text-[12px] text-muted-foreground">
                   <Avatar name={who ?? "?"} size="sm" />
                   <span className="font-medium text-foreground">{who ?? "Unknown"}</span>
                   {message.internal ? (
@@ -96,7 +96,7 @@ export function Thread({
                     {relativeTime(message.createdAt, now)}
                   </time>
                 </div>
-                <p className="whitespace-pre-wrap text-[13px] leading-6">
+                <p className="whitespace-pre-wrap text-[13.5px] leading-6 md:text-[13px]">
                   {message.body}
                 </p>
               </article>
@@ -108,20 +108,20 @@ export function Thread({
       <form
         onSubmit={submit}
         className={cn(
-          "shrink-0 border-t p-3 transition-colors",
+          "shrink-0 border-t p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] transition-colors md:px-6",
           internal ? "border-stage-proposal/40 bg-stage-proposal/5" : "border-border",
         )}
       >
         <Textarea
           value={body}
-          rows={3}
+          rows={2}
           placeholder={internal ? "Internal note — the customer won't see this…" : "Reply to the customer…"}
           aria-label={internal ? "Internal note" : "Reply"}
           onChange={(event) => setBody(event.target.value)}
           onKeyDown={(event) => {
             if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) submit(event);
           }}
-          className="min-h-20 resize-none"
+          className="min-h-16 resize-none md:min-h-20"
         />
         <div className="mt-2 flex items-center justify-between gap-2">
           <label className="flex items-center gap-2 text-[12px] text-muted-foreground">

package/templates/helpdesk/components/ticket-list.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 import { Avatar } from "@/components/avatar";
-import { PriorityBadge, StatusBadge } from "@/components/priority-badge";
+import { PriorityIcon, StatusBadge } from "@/components/priority-badge";
 import { SlaIndicator } from "@/components/sla-indicator";
 import { relativeTime } from "@/lib/format";
-import { queueOrder, ticketNumber, type Ticket } from "@/lib/tickets";
+import { priorityById, queueOrder, ticketNumber, type Ticket } from "@/lib/tickets";
 
 /**
  * The queue. Rows are ordered by lib/tickets.queueOrder — breached first, then
- * priority, then oldest — so the top of the list is genuinely the next thing to
- * work on rather than just the newest arrival.
+ * priority, then oldest — so the top of the list is the next thing to work on,
+ * not the newest arrival.
+ *
+ * One line per ticket on a desktop, two on a phone. Keyboard: ↑/↓ or j/k move
+ * between tickets and Enter opens one.
  *
  * Presentational: ordering is pure and tested, and selection is delegated.
  */
@@ -18,6 +21,7 @@ export function TicketList({
   customerName,
   assigneeName,
   selectedId,
+  showStatus = true,
   now,
   onSelect,
 }: {
@@ -25,50 +29,85 @@ export function TicketList({
   customerName: (id: string | null | undefined) => string | null;
   assigneeName: (id: string | null | undefined) => string | null;
   selectedId?: string | null;
+  /** Off when every row has the same status, such as on the Open tab. */
+  showStatus?: boolean;
   now?: number;
   onSelect: (id: string) => void;
 }) {
   const ordered = queueOrder(tickets, now);
 
+  function onKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
+    const down = event.key === "ArrowDown" || event.key === "j";
+    const up = event.key === "ArrowUp" || event.key === "k";
+    if (!down && !up) return;
+    event.preventDefault();
+    const item = event.currentTarget.closest("li");
+    const next = (down ? item?.nextElementSibling : item?.previousElementSibling) as HTMLElement | null;
+    next?.querySelector("button")?.focus();
+  }
+
   return (
-    <ul className="min-h-0 flex-1 overflow-y-auto">
+    <ul className="min-h-0 flex-1 overflow-y-auto" aria-label="Tickets">
       {ordered.map((ticket) => {
         const assignee = assigneeName(ticket.assigneeId);
+        const customer = customerName(ticket.customerId);
         return (
           <li key={ticket.id}>
             <button
               type="button"
               onClick={() => onSelect(ticket.id)}
+              onKeyDown={onKeyDown}
               aria-current={ticket.id === selectedId ? "true" : undefined}
               className={cn(
-                "flex w-full flex-col gap-1 border-b border-border/60 px-4 py-2.5 text-left transition-colors",
-                ticket.id === selectedId ? "bg-surface-2" : "hover:bg-surface-1",
+                "grid w-full grid-cols-[16px_minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 border-b border-border/60 px-4 py-2.5 text-left transition-colors md:h-11 md:py-0 md:pl-5 md:pr-5",
+                "focus-visible:bg-primary/[0.06] focus-visible:outline-none",
+                ticket.id === selectedId ? "bg-foreground/[0.04]" : "hover:bg-foreground/[0.025]",
               )}
             >
-              <div className="flex items-center gap-2">
-                <span className="tabular shrink-0 text-[11px] text-muted-foreground">
+              <PriorityIcon
+                priority={ticket.priority}
+                title={priorityById(ticket.priority)?.label}
+                className="row-span-2 self-start pt-0.5 md:row-span-1 md:self-center md:pt-0"
+              />
+              <span className="flex min-w-0 items-baseline gap-2.5">
+                <span className="tabular hidden w-11 shrink-0 text-[12px] text-muted-foreground md:inline">
                   {ticketNumber(ticket.id, ticket.createdAt)}
                 </span>
-                <span className="min-w-0 flex-1 truncate text-[13px] font-medium">
-                  {ticket.subject}
+                <span className="truncate text-[13px] font-medium">{ticket.subject}</span>
+                <span className="hidden truncate text-[12.5px] text-muted-foreground lg:inline">
+                  {customer ?? ""}
                 </span>
+              </span>
+              <span className="flex shrink-0 items-center gap-2.5 md:gap-3">
                 <SlaIndicator ticket={ticket} now={now} />
-              </div>
-              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
-                <StatusBadge status={ticket.status} />
-                <PriorityBadge priority={ticket.priority} />
-                <span className="truncate">{customerName(ticket.customerId) ?? "—"}</span>
-                <span className="ml-auto flex shrink-0 items-center gap-1.5">
+                {showStatus ? (
+                  <StatusBadge status={ticket.status} className="hidden md:inline-flex" />
+                ) : null}
+                <span className="hidden w-5 md:inline-flex" title={assignee ?? "Unassigned"}>
                   {assignee ? (
                     <Avatar name={assignee} size="sm" />
                   ) : (
-                    <span className="text-muted-foreground">Unassigned</span>
+                    <span className="size-5 rounded-full border border-dashed border-muted-foreground/50" />
                   )}
+                </span>
+                <time
+                  className="tabular hidden w-14 text-right text-[12px] text-muted-foreground md:inline"
+                  dateTime={ticket.createdAt ?? undefined}
+                >
+                  {relativeTime(ticket.createdAt, now)}
+                </time>
+              </span>
+              <span className="col-start-2 col-end-4 flex min-w-0 items-center gap-2 text-[12px] text-muted-foreground md:hidden">
+                <span className="tabular">{ticketNumber(ticket.id, ticket.createdAt)}</span>
+                <span aria-hidden="true">·</span>
+                <span className="truncate">{customer ?? "No customer"}</span>
+                <span className="ml-auto flex shrink-0 items-center gap-1.5">
+                  {assignee ? <Avatar name={assignee} size="sm" /> : <span>Unassigned</span>}
                   <time dateTime={ticket.createdAt ?? undefined}>
                     {relativeTime(ticket.createdAt, now)}
                   </time>
                 </span>
-              </div>
+              </span>
             </button>
           </li>
         );
@@ -76,3 +115,24 @@ export function TicketList({
     </ul>
   );
 }
+
+/** The queue's shape while the first sync is in flight. */
+export function TicketListSkeleton() {
+  return (
+    <ul className="min-h-0 flex-1 overflow-hidden" aria-hidden="true">
+      {Array.from({ length: 10 }).map((_, index) => (
+        <li
+          key={index}
+          className="flex h-14 items-center gap-3 border-b border-border/60 px-4 md:h-11 md:px-5"
+        >
+          <span className="size-3.5 animate-pulse rounded bg-foreground/[0.07]" />
+          <span
+            className="h-2.5 animate-pulse rounded-full bg-foreground/[0.07]"
+            style={{ width: `${38 + ((index * 17) % 30)}%` }}
+          />
+          <span className="ml-auto h-2.5 w-12 animate-pulse rounded-full bg-foreground/[0.07]" />
+        </li>
+      ))}
+    </ul>
+  );
+}

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

@@ -1,49 +1,59 @@
 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 helpdesk with a realistic queue, once.
  *
- * An empty inbox demonstrates nothing about triage, SLA, or the thread view.
- * The client calls this after sign-in; it returns immediately if any ticket
- * already exists, so it is safe 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 ticket
+ * already exists, so it is safe 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 real tickets arrive.
+ * Tickets are assigned across the person who signed in and four demo agents
+ * (see SEED_TEAM and lib/demo-team.ts). Delete this function,
+ * lib/seed.ts, and the `seedWorkspace` call in app/workspace.tsx once real
+ * tickets arrive, 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("Ticket", { $limit: 1 });
-    if (existing.length > 0) return { seeded: false };
+    if ((await ctx.db.query("Ticket", { $limit: 1 })).length > 0) return { seeded: false };
+    await ctx.db.advisoryLock("helpdesk_seed_workspace");
+    if ((await ctx.db.query("Ticket", { $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 customerIds = new Map<string, string>();
     for (const customer of seed.customers) {
       const id = await ctx.db.insert("Customer", customer.row);
       customerIds.set(customer.key, id as string);
     }
 
-    const ticketIds = new Map<string, string>();
+    const tickets = new Map<string, { id: string; assignee: string | null }>();
     for (const ticket of seed.tickets) {
+      const assignee = ticket.assignee === null ? null : (team[ticket.assignee] ?? me);
       const id = await ctx.db.insert("Ticket", {
         ...ticket.row,
         customerId: customerIds.get(ticket.customer) ?? null,
-        // Answered tickets are assigned to whoever is seeding; the unanswered
-        // ones stay unassigned so the queue has something to pick up.
-        assigneeId: ticket.row.firstRespondedAt ? me : null,
+        assigneeId: assignee,
       });
-      ticketIds.set(ticket.key, id as string);
+      tickets.set(ticket.key, { id: id as string, assignee });
     }
 
+    // Agent replies on a ticket are written by its assignee.
     for (const message of seed.messages) {
+      const ticket = tickets.get(message.ticket);
       await ctx.db.insert("Message", {
         ...message.row,
-        ticketId: ticketIds.get(message.ticket) ?? null,
-        authorId: message.row.fromCustomer ? null : me,
+        ticketId: ticket?.id ?? null,
+        authorId: message.row.fromCustomer ? null : (ticket?.assignee ?? me),
       });
     }
 

package/templates/helpdesk/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: "Frontdesk",
+  /** One line on the sign-in screen: what the app holds and who sees it. */
+  description: "Your team's support queue and customer threads. Every agent works from the same inbox.",
+} as const;

package/templates/helpdesk/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}`);
+}