@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/ai-chat/app/(chat)/layout.tsx

@@ -1,46 +1,9 @@
 import React from "react";
-import { Link, type PageAuth } from "@pylonsync/react";
-import { siteConfig } from "@/lib/site.config";
 
-// `(chat)` is a ROUTE GROUP: the parens segment is stripped from every URL
-// (so `(chat)/page.tsx` still serves `/`), and this layout wraps only the
-// pages inside the group. /login sits outside it and renders bare in the
-// root shell.
-//
-// App shell: a slim top bar over a full-height chat. `auth.user_id` is resolved
-// server-side from the session cookie before any HTML is sent, so the bar shows
-// the account / "Sign in" with no flash. The chat page fills the rest of the
-// viewport (h-[calc(100vh-3.5rem)] in chat-client.tsx — keep the header at h-14).
-interface LayoutProps {
-  children: React.ReactNode;
-  auth: PageAuth;
-}
-
-export default function ChatLayout({ children, auth }: LayoutProps) {
-  const signedIn = Boolean(auth?.user_id);
-  const { brand } = siteConfig;
-
-  return (
-    <>
-      <header className="flex h-14 items-center justify-between border-b border-zinc-200 bg-white px-4">
-        <Link href="/" className="flex items-center gap-2">
-          <span className="flex size-6 items-center justify-center rounded-[7px] bg-brand text-[13px] font-bold text-white">
-            {brand.letter}
-          </span>
-          <span className="text-[15px] font-semibold tracking-tight text-zinc-900">{brand.name}</span>
-        </Link>
-        {signedIn ? (
-          <span className="text-[13px] text-zinc-400">Signed in</span>
-        ) : (
-          <Link
-            href="/login"
-            className="rounded-full border border-zinc-300 px-3.5 py-1.5 text-[13px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50"
-          >
-            Sign in
-          </Link>
-        )}
-      </header>
-      {children}
-    </>
-  );
+// `(chat)` is a route group: the folder name is not part of the URL, so
+// `(chat)/page.tsx` serves `/` and `(chat)/c/[id]/page.tsx` serves `/c/:id`.
+// The chat fills the viewport and draws its own sidebar and header, so this
+// layout adds nothing around it. /login sits outside the group.
+export default function ChatLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
 }

package/templates/ai-chat/app/(chat)/not-found.tsx

@@ -1,21 +1,17 @@
 import React from "react";
 import { Link, type NotFoundProps } from "@pylonsync/react";
 
-// `(chat)/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and
-// when a page calls `response.notFound()`). It lives inside the `(chat)` group
-// on purpose: a group segment adds no URL prefix, so this is still the root
-// 404 boundary, but it wraps in the app-shell layout — a missing URL gets the
-// top bar instead of a bare page. Hydrated, so the link is a client nav.
+// Rendered at HTTP 404 for any unmatched URL.
 export default function NotFound(_props: NotFoundProps) {
   return (
-    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
-      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
-      <p className="mt-2 text-zinc-500">We couldn&apos;t find that page.</p>
+    <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-bg px-6 text-center">
+      <h1 className="font-serif text-[34px] tracking-[-0.02em] text-ink">Page not found</h1>
+      <p className="mt-2 text-[15px] text-ink-2">That address does not match any page.</p>
       <Link
         href="/"
-        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+        className="press mt-7 inline-flex h-10 items-center rounded-full bg-ink px-5 text-[14px] font-medium text-bg transition-opacity hover:opacity-90"
       >
-        Back home
+        Start a new chat
       </Link>
     </div>
   );

package/templates/ai-chat/app/(chat)/page.tsx

@@ -2,22 +2,18 @@ import React from "react";
 import { type Metadata, type PageProps } from "@pylonsync/react";
 import { ChatApp } from "./chat-client";
 import { siteConfig } from "@/lib/site.config";
+import { brandIcon } from "@/lib/brand-icon";
 
 export const metadata: Metadata = {
   title: siteConfig.seo.title,
   description: siteConfig.seo.description,
   openGraph: { title: siteConfig.seo.title, description: siteConfig.seo.description, type: "website" },
+  icons: { icon: brandIcon },
 };
 
-// `app/page.tsx` → `/`. The whole app is the chat island — a sidebar of
-// conversations + the streaming thread. Sign-in is REQUIRED: chats are tied to
-// your account, so an unauthenticated visitor is redirected to /login (a real
-// 307 from the synchronous shell render, before any HTML is sent).
-export default function Home({ auth, response }: PageProps) {
-  // Real account required — reject anonymous + guest (guest_…) sessions.
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  return <ChatApp />;
+// `/`: a new chat. No sign-in wall: a first-time visitor gets a guest session
+// in the browser and can send a message right away.
+export default function Home({ auth }: PageProps) {
+  const signedIn = Boolean(auth.user_id) && !auth.is_guest && !auth.user_id?.startsWith("guest_");
+  return <ChatApp initialConversationId={null} signedInUserId={signedIn ? auth.user_id : null} />;
 }

package/templates/ai-chat/app/auth-form.tsx

@@ -1,23 +1,15 @@
 "use client";
 
 import React, { useState } from "react";
-import {
-  passwordLogin,
-  passwordRegister,
-  persistSession,
-  ApiError,
-} from "@pylonsync/client";
+import { callFn } from "@pylonsync/react";
+import { ApiError, passwordLogin, passwordRegister, persistSession } from "@pylonsync/client";
 
-// The email/password form — one form, two modes. It calls the built-in auth API
-// directly (`passwordLogin` / `passwordRegister` POST to `/api/auth/password/*`),
-// then `persistSession` writes the freshly-minted token to local storage so the
-// sync engine authenticates as the real account on the next load. We then do a
-// full navigation to "/" so the SSR runtime re-resolves auth from the HttpOnly
-// cookie and renders the chat.
-//
-// Sign-in is REQUIRED to use the chat: conversations are owner-scoped to your
-// account, so the home page redirects unauthenticated visitors here.
-export function AuthForm() {
+// Email and password sign-in, in two modes. Before signing in, a guest asks
+// the server for a one-time claim code (`prepareGuestClaim`). After the new
+// session is stored, `claimGuestHistory` uses the code to move the guest's
+// conversations to the account. Then a full page load lets the server render
+// with the new session cookie.
+export function AuthForm({ next }: { next: string }) {
   const [mode, setMode] = useState<"login" | "register">("login");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -28,37 +20,53 @@ export function AuthForm() {
     e.preventDefault();
     setError(null);
     setPending(true);
+
+    let claimCode: string | null = null;
+    try {
+      const r = await callFn<{ code: string | null }>("prepareGuestClaim");
+      claimCode = r.code;
+    } catch {
+      /* no guest session: nothing to move */
+    }
+
     try {
       const session =
-        mode === "login"
-          ? await passwordLogin({ email, password })
-          : await passwordRegister({ email, password });
-      // Make this session authoritative, replacing any anonymous guest token.
+        mode === "login" ? await passwordLogin({ email, password }) : await passwordRegister({ email, password });
       persistSession(session);
-      window.location.assign("/");
+      if (claimCode) {
+        try {
+          await callFn("claimGuestHistory", { code: claimCode }, { token: session.token });
+        } catch {
+          /* sign-in succeeded; the guest chats stay with the guest session */
+        }
+      }
+      window.location.assign(next);
     } catch (err) {
       setError(messageFor(err));
       setPending(false);
     }
   }
 
+  const inputClass =
+    "h-11 w-full rounded-xl bg-bg px-3.5 text-[15px] text-ink outline-none ring-1 ring-line transition-shadow duration-200 placeholder:text-ink-3 focus:ring-2 focus:ring-brand/40";
+
   return (
     <div className="space-y-5">
       <form onSubmit={onSubmit} className="space-y-4">
         <label className="block">
-          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Email</span>
+          <span className="mb-1.5 block text-[13px] font-medium text-ink-2">Email</span>
           <input
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
             autoComplete="email"
-            placeholder="you@yourbusiness.com"
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            placeholder="you@example.com"
+            className={inputClass}
           />
         </label>
         <label className="block">
-          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Password</span>
+          <span className="mb-1.5 block text-[13px] font-medium text-ink-2">Password</span>
           <input
             type="password"
             value={password}
@@ -66,32 +74,32 @@ export function AuthForm() {
             required
             autoComplete={mode === "login" ? "current-password" : "new-password"}
             placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className={inputClass}
           />
         </label>
         {error ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+          <p className="rounded-xl bg-danger/8 px-3.5 py-2.5 text-[13px] leading-snug text-danger ring-1 ring-danger/15" role="alert">
             {error}
           </p>
         ) : null}
         <button
           type="submit"
           disabled={pending}
-          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+          className="press inline-flex h-11 w-full items-center justify-center rounded-full bg-ink text-[14.5px] font-medium text-bg transition-opacity duration-200 hover:opacity-90 disabled:opacity-60"
         >
-          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+          {pending ? "Signing in" : mode === "login" ? "Sign in" : "Create account"}
         </button>
       </form>
 
-      <p className="text-center text-[13px] text-zinc-500">
-        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+      <p className="text-center text-[13.5px] text-ink-2">
+        {mode === "login" ? "New here?" : "Already have an account?"}{" "}
         <button
           type="button"
           onClick={() => {
             setMode(mode === "login" ? "register" : "login");
             setError(null);
           }}
-          className="font-medium text-zinc-900 underline underline-offset-2"
+          className="font-medium text-ink underline decoration-ink/25 underline-offset-4 hover:decoration-ink"
         >
           {mode === "login" ? "Create an account" : "Sign in"}
         </button>
@@ -100,21 +108,20 @@ export function AuthForm() {
   );
 }
 
-// Map the framework's auth error codes to friendly copy. `ApiError` carries a
-// stable `.code` so you branch on the code, not the message.
+// Maps the framework's auth error codes to messages.
 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.";
+        return "That email is already registered. Sign in instead.";
       case "WEAK_PASSWORD":
-        return "Pick a longer password — at least 10 characters.";
+        return "Use at least 10 characters.";
       case "PWNED_PASSWORD":
-        return "That password has appeared in a known data breach. Choose a different one.";
+        return "That password appears in a known data breach. Choose a different one.";
       case "RATE_LIMITED":
-        return "Too many attempts — try again in a minute.";
+        return "Too many attempts. Try again in a minute.";
       default:
         return err.message;
     }

package/templates/ai-chat/app/error.tsx

@@ -1,26 +1,23 @@
 import React from "react";
 import { type ErrorBoundaryProps } from "@pylonsync/react";
 
-// `app/error.tsx` → the GLOBAL error boundary. Sitting at the app root
-// (outside the `(chat)` group), it catches a throw from any section — the chat
-// or /login — and renders at HTTP 500 in the bare root shell. Hydrated +
-// interactive: `reset()` re-attempts the route. The thrown error reaches the
-// client as `{ message, digest }` only — the stack stays in the dev overlay /
-// server logs.
+// The global error boundary. Renders at HTTP 500 for a throw anywhere in the
+// app. The client receives `{ message, digest }` only; the stack stays in the
+// server log.
 export default function Error({ error, reset }: ErrorBoundaryProps) {
   return (
-    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
-      <h1 className="text-2xl font-semibold tracking-tight">Something went wrong</h1>
-      <p className="mt-2 text-zinc-500">{error.message}</p>
+    <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-bg px-6 text-center">
+      <h1 className="font-serif text-[30px] tracking-[-0.02em] text-ink">Something went wrong</h1>
+      <p className="mt-2 max-w-md text-[15px] text-ink-2">{error.message}</p>
       {error.digest ? (
-        <p className="mt-1 text-xs text-zinc-400">
-          Reference: <code>{error.digest}</code>
+        <p className="mt-1 text-[12.5px] text-ink-3">
+          Reference: <code className="inline-code">{error.digest}</code>
         </p>
       ) : null}
       <button
         type="button"
         onClick={reset}
-        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+        className="press mt-7 inline-flex h-10 items-center rounded-full bg-ink px-5 text-[14px] font-medium text-bg transition-opacity hover:opacity-90"
       >
         Try again
       </button>