@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/helpdesk/app/globals.css

@@ -0,0 +1,201 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../app/**/*.{tsx,ts,jsx,js}";
+@source "../components/**/*.{tsx,ts,jsx,js}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ---------------------------------------------------------------------------
+   Design tokens.
+
+   Tuned for a dense internal tool rather than a marketing page: a near-neutral
+   surface ramp, hairline borders instead of shadows, and one accent used
+   sparingly so status colour still means something. Dark is the primary theme —
+   `app/layout.tsx` sets `class="dark"` — and light is a real, tested
+   alternative, not an afterthought.
+
+   These are the same variable names shadcn/ui generates against, so
+   `npx shadcn@latest add <component>` drops in already themed.
+--------------------------------------------------------------------------- */
+:root {
+  --radius: 0.5rem;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.21 0.006 285.9);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--foreground);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.55 0.204 274.5);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.968 0.002 286.4);
+  --secondary-foreground: oklch(0.27 0.006 286);
+  --muted: oklch(0.972 0.002 286.4);
+  --muted-foreground: oklch(0.53 0.013 286);
+  --accent: oklch(0.96 0.003 286.4);
+  --accent-foreground: oklch(0.27 0.006 286);
+  --destructive: oklch(0.58 0.216 27.3);
+
+  --border: oklch(0.918 0.004 286.3);
+  --input: oklch(0.918 0.004 286.3);
+  --ring: oklch(0.55 0.204 274.5);
+
+  /* Surfaces above the page: sidebar, popovers, hover rows. */
+  --surface-1: oklch(0.985 0.001 286.4);
+  --surface-2: oklch(0.968 0.002 286.4);
+
+  /* Pipeline + status. Muted on purpose — a board of saturated chips is
+     unreadable, and the eye should land on the one that's actually urgent. */
+  --stage-lead: oklch(0.62 0.03 264);
+  --stage-qualified: oklch(0.6 0.13 240);
+  --stage-proposal: oklch(0.68 0.15 78);
+  --stage-won: oklch(0.6 0.15 155);
+  --stage-lost: oklch(0.6 0.11 25);
+}
+
+.dark {
+  --background: oklch(0.165 0.004 285.9);
+  --foreground: oklch(0.93 0.002 286.3);
+  --card: oklch(0.196 0.005 285.9);
+  --card-foreground: var(--foreground);
+  --popover: oklch(0.216 0.006 285.9);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.62 0.19 274.5);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.25 0.006 286);
+  --secondary-foreground: oklch(0.93 0.002 286.3);
+  --muted: oklch(0.25 0.006 286);
+  --muted-foreground: oklch(0.65 0.012 286);
+  --accent: oklch(0.26 0.006 286);
+  --accent-foreground: oklch(0.93 0.002 286.3);
+  --destructive: oklch(0.65 0.19 25);
+
+  --border: oklch(1 0 0 / 9%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.62 0.19 274.5);
+
+  --surface-1: oklch(0.186 0.004 285.9);
+  --surface-2: oklch(0.216 0.006 285.9);
+
+  --stage-lead: oklch(0.68 0.03 264);
+  --stage-qualified: oklch(0.68 0.13 240);
+  --stage-proposal: oklch(0.75 0.14 78);
+  --stage-won: oklch(0.7 0.15 155);
+  --stage-lost: oklch(0.68 0.14 25);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 3px);
+  --radius-md: calc(var(--radius) - 1px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+
+  --color-stage-lead: var(--stage-lead);
+  --color-stage-qualified: var(--stage-qualified);
+  --color-stage-proposal: var(--stage-proposal);
+  --color-stage-won: var(--stage-won);
+  --color-stage-lost: var(--stage-lost);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+    outline-color: var(--color-ring);
+  }
+
+  html {
+    /* An internal tool is a fixed shell with scrolling panes, not a scrolling
+       document — this keeps the sidebar and header from drifting. */
+    height: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  body {
+    height: 100%;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    /* 13px is the density these screens are designed at; the slight negative
+       tracking is what keeps Inter from looking loose at that size. */
+    font-size: 13px;
+    line-height: 1.5;
+    letter-spacing: -0.006em;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  /* Numbers that sit in columns must not jitter as they change. */
+  .tabular,
+  table {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Thin, self-effacing scrollbars — the board has several at once. */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--color-foreground) 18%, transparent)
+      transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: color-mix(in oklab, var(--color-foreground) 16%, transparent);
+    border: 3px solid transparent;
+    background-clip: content-box;
+    border-radius: 999px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(in oklab, var(--color-foreground) 28%, transparent);
+  }
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* Only show focus rings for keyboard users; a mouse click shouldn't ring. */
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 1px;
+  }
+}
+
+@layer components {
+  /* A hairline that reads at 1px on any DPR without the doubling you get from
+     a plain border on retina. */
+  .hairline {
+    box-shadow: inset 0 -1px 0 0 var(--color-border);
+  }
+}

package/templates/helpdesk/app/inbox-view.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { callFn, useRouter } from "@pylonsync/react";
+import { Inbox, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select } from "@/components/ui/select";
+import { Kbd } from "@/components/kbd";
+import { PageHeader } from "@/components/page-header";
+import { EmptyState } from "@/components/empty-state";
+import { TicketList } from "@/components/ticket-list";
+import { NewTicketDialog } from "@/components/new-ticket-dialog";
+import { STATUSES, applyFilter, counts, type Filter } from "@/lib/tickets";
+import { Workspace } from "./workspace";
+
+export function InboxView({
+  email,
+  openNew,
+  initialFilter,
+}: {
+  email: string;
+  openNew?: boolean;
+  initialFilter?: string;
+}) {
+  const router = useRouter();
+  const [dialogOpen, setDialogOpen] = useState(Boolean(openNew));
+  const [status, setStatus] = useState<string>("open");
+  const [unassigned, setUnassigned] = useState(initialFilter === "unassigned");
+
+  // "c" opens a ticket, the way an issue tracker does. Ignored while typing so
+  // it never swallows a character in the reply box.
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      const target = event.target as HTMLElement | null;
+      const typing =
+        !!target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable);
+      if (event.key === "c" && !typing && !event.metaKey && !event.ctrlKey) {
+        event.preventDefault();
+        setDialogOpen(true);
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const filter: Filter = {
+          ...(status === "all" ? {} : { status }),
+          ...(unassigned ? { unassigned: true } : {}),
+        };
+        const visible = applyFilter(data.tickets, filter);
+        const queue = counts(data.tickets);
+
+        return (
+          <>
+            <PageHeader title="Inbox" count={visible.length}>
+              <div className="w-32">
+                <Select
+                  aria-label="Status"
+                  value={status}
+                  onChange={(event) => setStatus(event.target.value)}
+                  className="h-7 text-[12px]"
+                >
+                  <option value="all">All statuses</option>
+                  {STATUSES.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              <Button
+                size="sm"
+                variant={unassigned ? "default" : "secondary"}
+                onClick={() => setUnassigned((on) => !on)}
+                title="Show only tickets with no agent"
+              >
+                Unassigned
+                <span className="tabular ml-1 opacity-70">{queue.unassigned}</span>
+              </Button>
+              <Button size="sm" onClick={() => setDialogOpen(true)}>
+                <Plus />
+                New ticket
+                <Kbd className="ml-1 border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/70">
+                  c
+                </Kbd>
+              </Button>
+            </PageHeader>
+
+            {visible.length === 0 ? (
+              <EmptyState
+                icon={<Inbox />}
+                title={
+                  data.loading
+                    ? "Loading…"
+                    : data.tickets.length === 0
+                      ? "No tickets yet"
+                      : "Nothing matches this filter"
+                }
+                description={
+                  data.tickets.length === 0
+                    ? "When a customer writes in, their ticket lands here. You can also open one yourself after a phone call."
+                    : "Try a different status, or clear the unassigned filter."
+                }
+                action={
+                  data.tickets.length === 0 ? (
+                    <Button size="sm" onClick={() => setDialogOpen(true)}>
+                      <Plus />
+                      New ticket
+                    </Button>
+                  ) : undefined
+                }
+              />
+            ) : (
+              <TicketList
+                tickets={visible}
+                customerName={data.customerName}
+                assigneeName={data.agentName}
+                onSelect={(id) => router.push(`/tickets/${id}`)}
+              />
+            )}
+
+            <NewTicketDialog
+              open={dialogOpen}
+              customers={data.customers}
+              onOpenChange={setDialogOpen}
+              onCreate={async (draft) => {
+                const result = await callFn<{ id: string }>("createTicket", {
+                  subject: draft.subject,
+                  body: draft.body,
+                  priority: draft.priority,
+                  ...(draft.customerId ? { customerId: draft.customerId } : {}),
+                });
+                if (result?.id) router.push(`/tickets/${result.id}`);
+              }}
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/helpdesk/app/layout.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+/**
+ * The document shell. The app chrome — sidebar, command palette, shortcuts —
+ * lives in `app/workspace.tsx` instead, because it needs the synced data; this
+ * layer only sets up the page.
+ *
+ * `class="dark"` makes dark the default theme. The light tokens in globals.css
+ * are complete and tested, so removing the class flips the whole app; swap it
+ * for a stored preference when you want a toggle.
+ */
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>__APP_NAME__</title>
+        {/* Tailwind is compiled by Pylon from app/globals.css and the
+            stylesheet link is injected here automatically. Inter is declared in
+            app.ts (fonts: [...]) and self-hosted by the build — @font-face, the
+            preload link, and a size-adjusted fallback are injected too. */}
+      </head>
+      <body className="h-full">{children}</body>
+    </html>
+  );
+}

package/templates/helpdesk/app/login/auth-form.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  ApiError,
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+} from "@pylonsync/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+/**
+ * One form, two modes. Calls the built-in auth API (`/api/auth/password/*`),
+ * then `persistSession` writes the token so the sync engine and `callFn`
+ * authenticate as this user on the next load.
+ *
+ * The navigation is a full `assign`, not a client route change, so the SSR
+ * runtime re-resolves auth from the HttpOnly cookie and the first paint of the
+ * workspace is already signed in.
+ */
+export function AuthForm() {
+  const [mode, setMode] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      persistSession(session);
+      window.location.assign("/");
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-3.5">
+        <div className="space-y-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            autoComplete="email"
+            placeholder="you@company.com"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
+          />
+        </div>
+        {error ? (
+          <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-[12px] leading-snug text-destructive">
+            {error}
+          </p>
+        ) : null}
+        <Button type="submit" disabled={pending} className="w-full">
+          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+        </Button>
+      </form>
+
+      <p className="text-center text-[12px] text-muted-foreground">
+        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "signup" : "login");
+            setError(null);
+          }}
+          className="font-medium text-foreground underline underline-offset-2"
+        >
+          {mode === "login" ? "Create an account" : "Sign in"}
+        </button>
+      </p>
+    </div>
+  );
+}
+
+// `ApiError` carries a stable `.code`, so branch on the code rather than the
+// message — the copy here is ours, the message is the framework's.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already registered — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known breach. Choose another.";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}

package/templates/helpdesk/app/login/page.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { AuthForm } from "./auth-form";
+
+export const metadata: Metadata = {
+  title: "Sign in",
+  robots: "noindex",
+};
+
+export default function LoginPage({ auth, response }: PageProps) {
+  // Already signed in? Nothing to do here.
+  if (auth.user_id && !auth.user_id.startsWith("guest_")) {
+    response.redirect("/");
+    return null;
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center px-6">
+      <div className="w-full max-w-[320px]">
+        <div className="mb-7 flex items-center gap-2">
+          <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
+            C
+          </span>
+          <span className="text-[15px] font-semibold tracking-tight">CRM</span>
+        </div>
+        <h1 className="text-[19px] font-semibold tracking-tight">
+          Sign in to your workspace
+        </h1>
+        <p className="mt-1 text-[13px] text-muted-foreground">
+          Your team shares one pipeline. Anyone with an account sees it.
+        </p>
+        <div className="mt-6">
+          <AuthForm />
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/helpdesk/app/not-found.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Link, useRouter, type NotFoundProps } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
+
+// `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when
+// a page calls `response.notFound()`). It's HYDRATED, so it's interactive:
+// the buttons below use the client router. Not-found boundaries receive the
+// standard page props (and, matching Next, no `reset`).
+export default function NotFound(_props: NotFoundProps) {
+  const router = useRouter();
+  return (
+    <div className="space-y-6">
+      <section>
+        <h1 className="text-2xl font-semibold tracking-tight">404</h1>
+        <p className="mt-2 text-muted-foreground">
+          We couldn&apos;t find that page.
+        </p>
+      </section>
+      <div className="flex items-center gap-3">
+        <Button onClick={() => router.back()} variant="outline">
+          ← Go back
+        </Button>
+        <Button asChild>
+          <Link href="/">Home</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/helpdesk/app/page.tsx

@@ -0,0 +1,38 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { InboxView } from "./inbox-view";
+
+export const metadata: Metadata = {
+  title: "Inbox",
+  robots: "noindex",
+};
+
+/**
+ * `/` — the support queue.
+ *
+ * Server-side auth gate only. Reading `auth` opts this render out of caching,
+ * which is correct: every screen here is private.
+ *
+ * The signed-in email comes from the User row, not from `auth` — `PageAuth` is
+ * `{ user_id, is_admin, tenant_id, roles }` and carries no email.
+ */
+export default function InboxPage({
+  auth,
+  response,
+  searchParams,
+  serverData,
+}: PageProps) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+
+  return (
+    <InboxView
+      email={me?.email ?? ""}
+      openNew={searchParams?.new === "ticket"}
+      initialFilter={searchParams?.filter}
+    />
+  );
+}

package/templates/helpdesk/app/robots.ts

@@ -0,0 +1,12 @@
+import type { Robots } from "@pylonsync/react";
+
+// app/robots.ts → served at /robots.txt. The default export may also be async.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default function robots(): Robots {
+  return {
+    // Keep the authenticated app and the API out of the index.
+    rules: { userAgent: "*", allow: "/", disallow: ["/dashboard", "/api/"] },
+    sitemap: `${SITE}/sitemap.xml`,
+  };
+}

package/templates/helpdesk/app/sitemap.ts

@@ -0,0 +1,27 @@
+import type { Sitemap } from "@pylonsync/react";
+
+// app/sitemap.ts → served at /sitemap.xml. The default export can be async, so
+// it can enumerate dynamic pages from your database. Point SITE_URL at your
+// domain in production.
+const SITE = process.env.SITE_URL ?? "http://localhost:4321";
+
+export default async function sitemap(): Promise<Sitemap> {
+  // Only public pages belong here — /dashboard is private (and noindex), so
+  // it's intentionally left out.
+  const staticRoutes: Sitemap = [
+    { url: `${SITE}/`, changeFrequency: "weekly", priority: 1 },
+    { url: `${SITE}/login`, changeFrequency: "yearly", priority: 0.3 },
+    { url: `${SITE}/signup`, changeFrequency: "yearly", priority: 0.5 },
+  ];
+
+  // The export is async, so you can enumerate dynamic pages from a DB read:
+  //
+  //   const posts = await fetchPublishedPosts();
+  //   const postRoutes: Sitemap = posts.map((p) => ({
+  //     url: `${SITE}/blog/${p.slug}`,
+  //     lastModified: p.updatedAt,
+  //   }));
+  //   return [...staticRoutes, ...postRoutes];
+
+  return staticRoutes;
+}

package/templates/helpdesk/app/tickets/[id]/page.tsx

@@ -0,0 +1,23 @@
+import React, { use } from "react";
+import type { Metadata, PageProps } from "@pylonsync/react";
+import { TicketView } from "./ticket-view";
+
+export const metadata: Metadata = {
+  title: "Ticket",
+  robots: "noindex",
+};
+
+/** `app/tickets/[id]/page.tsx` -> `/tickets/:id`. */
+export default function TicketPage({
+  auth,
+  response,
+  params,
+  serverData,
+}: PageProps<{ id: string }>) {
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  return <TicketView email={me?.email ?? ""} ticketId={params.id} />;
+}