@pylonsync/create-pylon 0.3.344 → 0.3.345

package/templates/helpdesk/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "__APP_NAME_KEBAB__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pylon dev",
+    "deploy": "pylon deploy",
+    "check": "tsc --noEmit",
+    "test": "pylon test"
+  },
+  "dependencies": {
+    "@pylonsync/react": "^__PYLON_VERSION__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
+    "@pylonsync/functions": "^__PYLON_VERSION__",
+    "@pylonsync/client": "^__PYLON_VERSION__",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0",
+    "@tailwindcss/cli": "^4.3.0",
+    "tw-animate-css": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.0",
+    "lucide-react": "^0.460.0",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-slot": "^1.1.0"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.10.0",
+    "@pylonsync/cli": "^__PYLON_VERSION__",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}

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

@@ -0,0 +1,202 @@
+import { afterEach, describe, expect, test } from "bun:test";
+// This project uses the classic JSX transform, so .tsx tests import React.
+import React from "react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { TicketList } from "../components/ticket-list";
+import { Thread } from "../components/thread";
+import { SlaIndicator } from "../components/sla-indicator";
+import type { Ticket } from "../lib/tickets";
+
+afterEach(cleanup);
+
+// Tier 2: components. No mocking needed — they take data as props and report
+// changes through callbacks, because the container owns `db`.
+
+const NOW = Date.parse("2026-07-27T12:00:00Z");
+const hoursAgo = (h: number) => new Date(NOW - h * 3_600_000).toISOString();
+const noName = () => null;
+
+const tickets: Ticket[] = [
+  {
+    id: "breached",
+    subject: "Export is timing out",
+    status: "open",
+    priority: "urgent",
+    createdAt: hoursAgo(3),
+  },
+  {
+    id: "calm",
+    subject: "Mobile layout is off",
+    status: "open",
+    priority: "low",
+    createdAt: hoursAgo(1),
+    firstRespondedAt: hoursAgo(1),
+  },
+];
+
+describe("TicketList", () => {
+  test("puts the breached ticket at the top", () => {
+    // The queue's whole job is to answer "what next" — newest-first would bury
+    // the overdue one.
+    render(
+      <TicketList
+        tickets={tickets}
+        customerName={noName}
+        assigneeName={noName}
+        now={NOW}
+        onSelect={() => {}}
+      />,
+    );
+    const rows = screen.getAllByRole("button");
+    expect(within(rows[0]).getByText("Export is timing out")).toBeDefined();
+  });
+
+  test("marks a ticket with no agent as unassigned", () => {
+    render(
+      <TicketList
+        tickets={tickets}
+        customerName={noName}
+        assigneeName={noName}
+        now={NOW}
+        onSelect={() => {}}
+      />,
+    );
+    expect(screen.getAllByText("Unassigned").length).toBe(2);
+  });
+
+  test("selecting a row reports its id", () => {
+    const picked: string[] = [];
+    render(
+      <TicketList
+        tickets={tickets}
+        customerName={noName}
+        assigneeName={noName}
+        now={NOW}
+        onSelect={(id) => picked.push(id)}
+      />,
+    );
+    fireEvent.click(screen.getByText("Mobile layout is off"));
+    expect(picked).toEqual(["calm"]);
+  });
+});
+
+describe("SlaIndicator", () => {
+  test("shows how far past the window a breach is", () => {
+    const { container } = render(
+      <SlaIndicator ticket={tickets[0]} now={NOW} />,
+    );
+    expect(container.textContent).toContain("over");
+  });
+
+  test("renders nothing once answered", () => {
+    // A badge on every row is a badge that means nothing.
+    const { container } = render(<SlaIndicator ticket={tickets[1]} now={NOW} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  test("renders nothing for a closed ticket", () => {
+    const { container } = render(
+      <SlaIndicator
+        ticket={{ ...tickets[0], status: "closed" }}
+        now={NOW}
+      />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+});
+
+describe("Thread", () => {
+  const messages = [
+    { id: "m1", body: "It broke", fromCustomer: true, createdAt: hoursAgo(3) },
+    { id: "m2", body: "Looking now", fromCustomer: false, createdAt: hoursAgo(2) },
+    { id: "m3", body: "Their MX is wrong", fromCustomer: false, internal: true, createdAt: hoursAgo(1) },
+  ];
+
+  test("renders oldest first", () => {
+    render(
+      <Thread
+        messages={messages}
+        authorName={() => "Agent"}
+        customerName="Dana"
+        now={NOW}
+        onSend={() => {}}
+      />,
+    );
+    const articles = screen.getAllByRole("article");
+    expect(within(articles[0]).getByText("It broke")).toBeDefined();
+  });
+
+  test("marks an internal note so it can't be mistaken for a reply", () => {
+    render(
+      <Thread
+        messages={messages}
+        authorName={() => "Agent"}
+        customerName="Dana"
+        now={NOW}
+        onSend={() => {}}
+      />,
+    );
+    // Scoped to the message: the composer's toggle carries the same label, so a
+    // bare getByText would match twice and throw.
+    const notes = screen
+      .getAllByRole("article")
+      .filter((article) => within(article).queryByText("Internal note"));
+    expect(notes).toHaveLength(1);
+    expect(within(notes[0]).getByText("Their MX is wrong")).toBeDefined();
+  });
+
+  test("sends a public reply by default", () => {
+    const sent: Array<[string, boolean]> = [];
+    render(
+      <Thread
+        messages={[]}
+        authorName={() => "Agent"}
+        customerName="Dana"
+        now={NOW}
+        onSend={(body, internal) => sent.push([body, internal])}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("Reply"), {
+      target: { value: "On it" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /send reply/i }));
+    expect(sent).toEqual([["On it", false]]);
+  });
+
+  test("the internal toggle switches the composer and the flag", () => {
+    // Sending an internal note to the customer is the expensive mistake here,
+    // so the mode has to be visible AND actually carried through.
+    const sent: Array<[string, boolean]> = [];
+    render(
+      <Thread
+        messages={[]}
+        authorName={() => "Agent"}
+        customerName="Dana"
+        now={NOW}
+        onSend={(body, internal) => sent.push([body, internal])}
+      />,
+    );
+    fireEvent.click(screen.getByLabelText("Internal note"));
+    fireEvent.change(screen.getByLabelText("Internal note", { selector: "textarea" }), {
+      target: { value: "MX is broken" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /add note/i }));
+    expect(sent).toEqual([["MX is broken", true]]);
+  });
+
+  test("an empty reply is not sent", () => {
+    const sent: unknown[] = [];
+    render(
+      <Thread
+        messages={[]}
+        authorName={() => "Agent"}
+        customerName="Dana"
+        now={NOW}
+        onSend={() => sent.push(1)}
+      />,
+    );
+    fireEvent.change(screen.getByLabelText("Reply"), { target: { value: "   " } });
+    fireEvent.click(screen.getByRole("button", { name: /send reply/i }));
+    expect(sent).toEqual([]);
+  });
+});

package/templates/helpdesk/tests/search.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, test } from "bun:test";
+import { moveSelection, searchItems, type SearchItem } from "../lib/search";
+
+const items: SearchItem[] = [
+  { id: "1", type: "company", title: "Acme Inc", subtitle: "acme.com", href: "/c" },
+  {
+    id: "2",
+    type: "company",
+    title: "Acme Corporation Holdings",
+    subtitle: "acmeholdings.com",
+    href: "/c",
+  },
+  {
+    id: "3",
+    type: "contact",
+    title: "Dana Whitfield",
+    subtitle: "Northwind Logistics",
+    href: "/p",
+    keywords: "dana@northwind.co VP Operations",
+  },
+  { id: "4", type: "deal", title: "Fleet dispatch rollout", href: "/d" },
+];
+
+const titles = (q: string) => searchItems(items, q).map((i) => i.title);
+
+describe("searchItems", () => {
+  test("an empty query lists everything", () => {
+    expect(searchItems(items, "").length).toBe(items.length);
+    expect(searchItems(items, "   ").length).toBe(items.length);
+  });
+
+  test("prefix beats substring", () => {
+    expect(titles("acme")[0]).toBe("Acme Inc");
+  });
+
+  test("the shorter title wins a tie", () => {
+    // Both start with "Acme"; the more specific record should come first.
+    expect(titles("acme")).toEqual(["Acme Inc", "Acme Corporation Holdings"]);
+  });
+
+  test("matches a word inside the title", () => {
+    expect(titles("dispatch")).toContain("Fleet dispatch rollout");
+  });
+
+  test("matches the subtitle and hidden keywords", () => {
+    expect(titles("northwind")).toContain("Dana Whitfield");
+    expect(titles("dana@northwind.co")).toContain("Dana Whitfield");
+    expect(titles("VP")).toContain("Dana Whitfield");
+  });
+
+  test("is case-insensitive", () => {
+    expect(titles("ACME").length).toBe(2);
+  });
+
+  test("no match is empty, not everything", () => {
+    expect(titles("zzzz")).toEqual([]);
+  });
+
+  test("respects the limit", () => {
+    expect(searchItems(items, "", 2)).toHaveLength(2);
+  });
+
+  test("a word-boundary hit beats a mid-word one", () => {
+    const rows: SearchItem[] = [
+      { id: "a", type: "deal", title: "Broadcasting", href: "/" },
+      { id: "b", type: "deal", title: "New cast list", href: "/" },
+    ];
+    expect(searchItems(rows, "cast").map((r) => r.title)[0]).toBe("New cast list");
+  });
+});
+
+describe("moveSelection", () => {
+  test("wraps at both ends", () => {
+    expect(moveSelection(0, -1, 3)).toBe(2);
+    expect(moveSelection(2, 1, 3)).toBe(0);
+    expect(moveSelection(0, 1, 3)).toBe(1);
+  });
+
+  test("an empty list stays at zero rather than going negative", () => {
+    expect(moveSelection(0, 1, 0)).toBe(0);
+    expect(moveSelection(0, -1, 0)).toBe(0);
+  });
+});

package/templates/helpdesk/tests/setup.ts

@@ -0,0 +1,5 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+// Make document/window available so @testing-library/react can render. Loaded
+// via bunfig.toml's [test] preload, before any test file runs.
+GlobalRegistrator.register();

package/templates/helpdesk/tests/tickets.test.ts

@@ -0,0 +1,215 @@
+import { describe, expect, test } from "bun:test";
+import {
+  PRIORITIES,
+  STATUSES,
+  applyFilter,
+  counts,
+  isOpen,
+  isValidPriority,
+  isValidStatus,
+  minutesToBreach,
+  queueOrder,
+  slaState,
+  ticketNumber,
+  type Ticket,
+} from "../lib/tickets";
+
+const NOW = Date.parse("2026-07-27T12:00:00Z");
+const hoursAgo = (h: number) => new Date(NOW - h * 3_600_000).toISOString();
+
+const ticket = (over: Partial<Ticket> = {}): Ticket => ({
+  id: "t1",
+  subject: "Something broke",
+  status: "open",
+  priority: "normal",
+  createdAt: hoursAgo(1),
+  ...over,
+});
+
+describe("statuses and priorities", () => {
+  test("solved and closed are terminal", () => {
+    expect(isOpen(ticket({ status: "open" }))).toBe(true);
+    expect(isOpen(ticket({ status: "pending" }))).toBe(true);
+    expect(isOpen(ticket({ status: "solved" }))).toBe(false);
+    expect(isOpen(ticket({ status: "closed" }))).toBe(false);
+  });
+
+  test("unknown values are rejected, not coerced", () => {
+    expect(isValidStatus("open")).toBe(true);
+    expect(isValidStatus("Open")).toBe(false);
+    expect(isValidStatus("archived")).toBe(false);
+    expect(isValidPriority("urgent")).toBe(true);
+    expect(isValidPriority("critical")).toBe(false);
+  });
+
+  test("priorities are ranked urgent-first with tightening windows", () => {
+    const ranks = PRIORITIES.map((p) => p.rank);
+    expect(ranks).toEqual([...ranks].sort((a, b) => a - b));
+    expect(PRIORITIES[0].id).toBe("urgent");
+    expect(PRIORITIES[0].firstResponseHours).toBeLessThan(
+      PRIORITIES[PRIORITIES.length - 1].firstResponseHours,
+    );
+    expect(STATUSES).toHaveLength(4);
+  });
+});
+
+describe("slaState", () => {
+  test("breaches once the window passes with no reply", () => {
+    // Urgent allows 1h; this one has been waiting 3.
+    expect(slaState(ticket({ priority: "urgent", createdAt: hoursAgo(3) }), NOW)).toBe(
+      "breached",
+    );
+  });
+
+  test("still due inside the window", () => {
+    expect(
+      slaState(ticket({ priority: "normal", createdAt: hoursAgo(3) }), NOW),
+    ).toBe("due");
+  });
+
+  test("a reply meets the SLA, even a late one", () => {
+    // The question is "did we reply", and re-flagging answered work just adds
+    // noise to the queue.
+    expect(
+      slaState(
+        ticket({
+          priority: "urgent",
+          createdAt: hoursAgo(9),
+          firstRespondedAt: hoursAgo(2),
+        }),
+        NOW,
+      ),
+    ).toBe("met");
+  });
+
+  test("terminal tickets have no SLA to chase", () => {
+    expect(
+      slaState(ticket({ status: "solved", priority: "urgent", createdAt: hoursAgo(50) }), NOW),
+    ).toBe("none");
+  });
+
+  test("an unparseable date is 'none', not a false breach", () => {
+    expect(slaState(ticket({ createdAt: "nonsense" }), NOW)).toBe("none");
+  });
+});
+
+describe("minutesToBreach", () => {
+  test("positive while there's time left", () => {
+    expect(minutesToBreach(ticket({ priority: "high", createdAt: hoursAgo(1) }), NOW)).toBe(
+      180,
+    );
+  });
+
+  test("negative once overdue", () => {
+    expect(
+      minutesToBreach(ticket({ priority: "urgent", createdAt: hoursAgo(3) }), NOW),
+    ).toBe(-120);
+  });
+
+  test("null when answered or closed", () => {
+    expect(
+      minutesToBreach(ticket({ firstRespondedAt: hoursAgo(1) }), NOW),
+    ).toBeNull();
+    expect(minutesToBreach(ticket({ status: "closed" }), NOW)).toBeNull();
+  });
+});
+
+describe("queueOrder", () => {
+  test("breached tickets come first, whatever their priority", () => {
+    const rows = [
+      ticket({ id: "fresh-urgent", priority: "urgent", createdAt: hoursAgo(0.2) }),
+      ticket({ id: "breached-low", priority: "low", createdAt: hoursAgo(100) }),
+    ];
+    expect(queueOrder(rows, NOW).map((t) => t.id)).toEqual([
+      "breached-low",
+      "fresh-urgent",
+    ]);
+  });
+
+  test("then by priority", () => {
+    const rows = [
+      ticket({ id: "normal", priority: "normal", createdAt: hoursAgo(1) }),
+      ticket({ id: "urgent", priority: "urgent", createdAt: hoursAgo(0.5) }),
+      ticket({ id: "low", priority: "low", createdAt: hoursAgo(1) }),
+    ];
+    expect(queueOrder(rows, NOW).map((t) => t.id)).toEqual(["urgent", "normal", "low"]);
+  });
+
+  test("oldest first within a priority", () => {
+    // Newest-first is how a ticket sits at the bottom of a busy queue for a week.
+    const rows = [
+      ticket({ id: "newer", createdAt: hoursAgo(1), firstRespondedAt: hoursAgo(1) }),
+      ticket({ id: "older", createdAt: hoursAgo(5), firstRespondedAt: hoursAgo(5) }),
+    ];
+    expect(queueOrder(rows, NOW).map((t) => t.id)).toEqual(["older", "newer"]);
+  });
+
+  test("does not mutate its input", () => {
+    const rows = [ticket({ id: "a" }), ticket({ id: "b", priority: "urgent" })];
+    const before = rows.map((t) => t.id);
+    queueOrder(rows, NOW);
+    expect(rows.map((t) => t.id)).toEqual(before);
+  });
+});
+
+describe("counts", () => {
+  test("tallies statuses, unassigned, and breaches", () => {
+    const rows = [
+      ticket({ id: "1", status: "open", assigneeId: null, priority: "urgent", createdAt: hoursAgo(5) }),
+      ticket({ id: "2", status: "open", assigneeId: "u1", firstRespondedAt: hoursAgo(1) }),
+      ticket({ id: "3", status: "pending", assigneeId: "u1", firstRespondedAt: hoursAgo(1) }),
+      ticket({ id: "4", status: "solved", assigneeId: "u1" }),
+      ticket({ id: "5", status: "closed", assigneeId: "u1" }),
+    ];
+    expect(counts(rows, NOW)).toEqual({
+      open: 2,
+      pending: 1,
+      solved: 1,
+      closed: 1,
+      unassigned: 1,
+      breached: 1,
+    });
+  });
+
+  test("a solved ticket with no assignee isn't 'unassigned' work", () => {
+    expect(counts([ticket({ status: "solved", assigneeId: null })], NOW).unassigned).toBe(0);
+  });
+});
+
+describe("applyFilter", () => {
+  const rows = [
+    ticket({ id: "1", status: "open", priority: "urgent", assigneeId: "u1" }),
+    ticket({ id: "2", status: "pending", priority: "low", assigneeId: null }),
+    ticket({ id: "3", status: "open", priority: "low", assigneeId: "u2" }),
+  ];
+
+  test("an empty filter passes everything", () => {
+    expect(applyFilter(rows, {})).toHaveLength(3);
+  });
+
+  test("narrows by status, priority, and assignee", () => {
+    expect(applyFilter(rows, { status: "open" }).map((t) => t.id)).toEqual(["1", "3"]);
+    expect(applyFilter(rows, { priority: "low" }).map((t) => t.id)).toEqual(["2", "3"]);
+    expect(applyFilter(rows, { assigneeId: "u2" }).map((t) => t.id)).toEqual(["3"]);
+  });
+
+  test("unassigned means no agent at all", () => {
+    expect(applyFilter(rows, { unassigned: true }).map((t) => t.id)).toEqual(["2"]);
+  });
+
+  test("filters combine", () => {
+    expect(applyFilter(rows, { status: "open", priority: "low" }).map((t) => t.id)).toEqual(
+      ["3"],
+    );
+  });
+});
+
+describe("ticketNumber", () => {
+  test("is stable for a given ticket", () => {
+    expect(ticketNumber("abc", "2026-01-01")).toBe(ticketNumber("abc", "2026-01-01"));
+  });
+
+  test("looks like a ticket number", () => {
+    expect(ticketNumber("abc", "2026-01-01")).toMatch(/^#\d{4}$/);
+  });
+});

package/templates/helpdesk/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": [
+      "ES2022",
+      "DOM"
+    ],
+    "types": [
+      "react",
+      "react-dom",
+      "node"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "app.ts",
+    "app/**/*",
+    "components/**/*",
+    "lib/**/*",
+    "functions/**/*"
+  ]
+}