@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/ai-chat/app/login/page.tsx

@@ -1,38 +1,53 @@
 import React from "react";
 import { Link, type Metadata, type PageProps } from "@pylonsync/react";
 import { AuthForm } from "../auth-form";
+import { BrandMark } from "@/components/chat/icons";
 import { siteConfig } from "@/lib/site.config";
+import { brandIcon } from "@/lib/brand-icon";
+import { safeNextPath } from "@/lib/chat";
 
 export const metadata: Metadata = {
-  title: `Sign in — ${siteConfig.brand.name}`,
+  title: `Sign in to ${siteConfig.brand.name}`,
   robots: "noindex",
+  icons: { icon: brandIcon },
 };
 
-// `app/login/page.tsx` → `/login`. Sign-in is required to use the chat (chats
-// are tied to your account). It sits outside the `(chat)` route group, so it
-// renders bare — no app top bar. Already signed in? Skip back to the
-// chat — `response.redirect` in the synchronous shell render is a real 307
-// before any HTML is sent.
-export default function LoginPage({ auth, response }: PageProps) {
-  // Already signed in (a real account, not an anonymous guest)? Skip the form.
-  if (auth.user_id && !auth.user_id.startsWith("guest_")) response.redirect("/");
+// `/login`: optional. Chat works without an account; signing in keeps the
+// history on every device, and the guest's chats move to the account. A
+// signed-in account is sent back to the chat.
+export default function LoginPage({ auth, response, searchParams }: PageProps) {
+  const next = safeNextPath(typeof searchParams.next === "string" ? searchParams.next : null);
+  if (auth.user_id && !auth.is_guest && !auth.user_id.startsWith("guest_")) response.redirect(next);
   const { brand } = siteConfig;
+  const hasGuestSession = Boolean(auth.user_id);
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12">
-      <div className="w-full max-w-[400px] rounded-2xl border border-zinc-200/70 p-8">
-        <Link href="/" className="inline-flex">
-          <span className="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-base font-bold text-white">
-            {brand.letter}
-          </span>
-        </Link>
-        <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
-          Sign in to {brand.name}
-        </h1>
-        <p className="mt-1 text-[13px] text-zinc-500">
-          Create an account or sign in to start chatting.
-        </p>
-        <div className="mt-6">
-          <AuthForm />
+    <div className="flex min-h-[100dvh] flex-col bg-paper px-4 py-6 sm:px-6">
+      <Link href={next} className="press inline-flex w-max items-center gap-2.5 rounded-xl px-1.5 py-1 hover:bg-hover">
+        <BrandMark size={26} />
+        <span className="text-[15.5px] font-semibold tracking-[-0.015em] text-ink">{brand.name}</span>
+      </Link>
+
+      <div className="flex flex-1 items-center justify-center py-10">
+        <div className="rise w-full max-w-[25rem]">
+          <h1 className="text-center font-serif text-[32px] leading-tight tracking-[-0.02em] text-ink">
+            Sign in to {brand.name}
+          </h1>
+          <p className="mx-auto mt-2 max-w-[21rem] text-center text-[14.5px] leading-relaxed text-ink-2">
+            {hasGuestSession
+              ? "Your chats from this browser move to your account."
+              : "Keep your chats on every device."}
+          </p>
+          <div className="bezel mt-8">
+            <div className="bezel-core p-5 sm:p-6">
+              <AuthForm next={next} />
+            </div>
+          </div>
+          <p className="mt-6 text-center text-[13px] text-ink-3">
+            <Link href={next} className="underline decoration-ink/20 underline-offset-4 hover:text-ink">
+              Continue without an account
+            </Link>
+          </p>
         </div>
       </div>
     </div>

package/templates/ai-chat/app.ts

@@ -3,28 +3,27 @@ import {
   field,
   policy,
   auth,
+  llm,
   buildManifest,
   discoverAppRoutes,
   discoverFunctions,
   font,
 } from "@pylonsync/sdk";
+import { siteConfig } from "./lib/site.config";
 
 // ---------------------------------------------------------------------------
-// ai-chat — a streaming AI chat app. Tokens stream from the built-in
-// `POST /api/ai/stream` endpoint (your PYLON_AI_API_KEY never leaves the
-// server); the conversation itself is sync-backed, so your chats stay in sync
-// across tabs and devices in realtime.
+// ai-chat: a streaming AI assistant. Every visitor gets a guest session and can
+// chat right away; signing in moves the guest's conversations to the account.
 //
-// Two data entities (+ User):
-//   • Conversation — a chat thread. Owner-scoped: you only ever see your own.
-//   • Message      — one turn (user or assistant). Owner-scoped too. Both use
-//                    `field.owner()` on userId, so the client can insert with a
-//                    plain optimistic `db.insert` and the id is stamped from the
-//                    session — unspoofable, no server function needed to write.
-//   • User         — the account (email/password is built in).
-//
-// There's no single "owner"/admin — it's multi-user: every signed-in (or guest)
-// visitor gets their own private chats.
+//   Conversation  a chat thread. Owner-scoped.
+//   Message       one turn. Assistant replies are written by the `respond`
+//                 function, which streams tokens from `ctx.llm.stream` and
+//                 records the resumable stream id on the row, so any other tab
+//                 can attach to the same reply while it generates.
+//   ReplyLog      one row per generation, for limits and the busy check.
+//   GuestClaim    a one-time code that lets a guest's history move to the
+//                 account they sign in to. Never readable by clients.
+//   User          the account (email/password is built in).
 // ---------------------------------------------------------------------------
 
 const Conversation = entity(
@@ -32,12 +31,15 @@ const Conversation = entity(
   {
     userId: field.string().owner(),
     title: field.string().default("New chat"),
+    // Set on the seeded examples shown when no provider key is configured.
+    example: field.boolean().default(false),
     createdAt: field.datetime().defaultNow(),
+    updatedAt: field.datetime().defaultNow(),
   },
   {
     indexes: [
       { name: "by_user", fields: ["userId"], unique: false },
-      { name: "by_created", fields: ["createdAt"], unique: false },
+      { name: "by_updated", fields: ["updatedAt"], unique: false },
     ],
   },
 );
@@ -49,6 +51,12 @@ const Message = entity(
     userId: field.string().owner(),
     role: field.string(), // "user" | "assistant"
     content: field.string(),
+    // "streaming" | "done" | "stopped" | "error"; see lib/chat.ts.
+    status: field.string().default("done"),
+    errorCode: field.string().optional(),
+    // Resumable stream id of the reply while it generates.
+    streamId: field.string().optional(),
+    model: field.string().optional(),
     createdAt: field.datetime().defaultNow(),
   },
   {
@@ -59,6 +67,39 @@ const Message = entity(
   },
 );
 
+// One row per generation, never deleted by regenerate or conversation
+// delete. The hourly limits count these rows, and `finishedAt` stays null
+// while the provider call runs, so one user cannot run two generations at
+// once. Never readable by clients.
+const ReplyLog = entity(
+  "ReplyLog",
+  {
+    userId: field.string(),
+    messageId: field.string(),
+    isGuest: field.boolean(),
+    model: field.string(),
+    createdAt: field.datetime(),
+    finishedAt: field.datetime().optional(),
+  },
+  {
+    indexes: [
+      { name: "by_user", fields: ["userId"], unique: false },
+      { name: "by_created", fields: ["createdAt"], unique: false },
+      { name: "by_message", fields: ["messageId"], unique: false },
+    ],
+  },
+);
+
+const GuestClaim = entity(
+  "GuestClaim",
+  {
+    guestId: field.string(),
+    codeHash: field.string().serverOnly(),
+    expiresAt: field.datetime(),
+  },
+  { indexes: [{ name: "by_code", fields: ["codeHash"], unique: true }] },
+);
+
 const User = entity(
   "User",
   {
@@ -72,26 +113,45 @@ const User = entity(
   { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
 );
 
-// Conversations + messages are PRIVATE: a signed-in (or guest) user can only
-// read, create, and modify their OWN rows. `field.owner()` stamps userId from
-// the session on insert, so "create your own" is enforced at write time and
-// reads are scoped by the same id.
+// Clients read their own rows. Every write goes through a server function:
+// `respond` writes messages, `createConversation`, `renameConversation`, and
+// `deleteConversation` manage threads, and `stopResponse` ends a reply. That
+// keeps a client from writing assistant turns, moving a message to another
+// thread, or setting fields such as `example`.
 const conversationPolicy = policy({
   name: "conversation_owner",
   entity: "Conversation",
-  allowRead: "auth.userId == data.userId",
-  allowInsert: "auth.userId != null",
-  allowUpdate: "auth.userId == data.userId",
-  allowDelete: "auth.userId == data.userId",
+  allowRead: "auth.userId != null && auth.userId == data.userId",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
 });
 
 const messagePolicy = policy({
   name: "message_owner",
   entity: "Message",
-  allowRead: "auth.userId == data.userId",
-  allowInsert: "auth.userId != null",
-  allowUpdate: "auth.userId == data.userId",
-  allowDelete: "auth.userId == data.userId",
+  allowRead: "auth.userId != null && auth.userId == data.userId",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const replyLogPolicy = policy({
+  name: "reply_log_server_only",
+  entity: "ReplyLog",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const guestClaimPolicy = policy({
+  name: "guest_claim_server_only",
+  entity: "GuestClaim",
+  allowRead: "false",
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
 });
 
 const userPolicy = policy({
@@ -103,41 +163,56 @@ const userPolicy = policy({
   allowDelete: "false",
 });
 
-// Every non-internal function in functions/ becomes a manifest entry —
-// this is what makes them show up in /api/manifest, the OpenAPI spec,
-// and `pylon codegen`.
 const fns = await discoverFunctions();
 
 const manifest = buildManifest({
   name: "__APP_NAME__",
   version: "0.1.0",
-  entities: [Conversation, Message, User],
-  // No custom functions needed: messages are written with optimistic db.insert
-  // (owner-stamped), and streaming uses the built-in POST /api/ai/stream.
+  entities: [Conversation, Message, ReplyLog, GuestClaim, User],
   queries: fns.queries,
   actions: fns.actions,
-  policies: [conversationPolicy, messagePolicy, userPolicy],
+  policies: [conversationPolicy, messagePolicy, replyLogPolicy, guestClaimPolicy, userPolicy],
   auth: auth(),
-  // Self-hosted Inter (next/font parity): the build fetches the woff2, serves it
-  // same-origin (no third-party request, no FOUT), preloads it, and synthesizes a
-  // size-adjusted fallback face so there's no layout shift. globals.css reads it
-  // via `var(--font-sans, …)`; layout.tsx carries no font <link>.
+  // The model list in lib/site.config.ts is the allowlist: ctx.llm refuses any
+  // other model id.
+  llm: llm({
+    defaultModel: siteConfig.chat.defaultModel,
+    allowedModels: siteConfig.chat.models.map((m) => m.id),
+  }),
+  // Self-hosted fonts: the build downloads the woff2 files, serves them from
+  // this origin, and adds size-adjusted fallbacks so text does not shift when
+  // they load. globals.css maps them to Tailwind's font-sans, font-serif, and font-mono.
   fonts: [
     font({
-      family: "Inter",
-      variable: "--font-sans",
-      weights: ["400", "500", "600", "700"],
+      family: "Geist",
+      variable: "--font-ui",
+      weights: ["400", "500", "600"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+    font({
+      family: "Source Serif 4",
+      variable: "--font-reading",
+      weights: ["400", "600"],
       subsets: ["latin"],
       display: "swap",
       preload: true,
     }),
+    font({
+      family: "Geist Mono",
+      variable: "--font-code",
+      weights: ["400", "500"],
+      subsets: ["latin"],
+      display: "swap",
+    }),
   ],
   routes: await discoverAppRoutes(),
 });
 
 // Not a debug leftover: the CLI runs `bun run app.ts` and parses stdout as
-// your manifest (see crates/cli/src/bun.rs). Deleting this line breaks every
-// pylon command that reads your schema.
+// your manifest. Deleting this line breaks every pylon command that reads your
+// schema.
 console.log(JSON.stringify(manifest, null, 2));
 
 export default manifest;

package/templates/ai-chat/components/chat/composer.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { siteConfig } from "@/lib/site.config";
+import { findModel, modelAllowedFor } from "@/lib/chat";
+import { ArrowUpIcon, CheckIcon, ChevronDownIcon, StopIcon } from "./icons";
+
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export interface ComposerProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onStop: () => void;
+  // A reply is generating: the send button becomes Stop.
+  busy: boolean;
+  placeholder: string;
+  model: string;
+  onModelChange: (id: string) => void;
+  // Guests see the models outside `guestModels` as needing an account.
+  isGuest?: boolean;
+  autoFocus?: boolean;
+  textareaRef?: React.RefObject<HTMLTextAreaElement | null>;
+}
+
+// The message box. Enter sends, Shift+Enter adds a line, Escape stops a reply.
+export function Composer({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  busy,
+  placeholder,
+  model,
+  onModelChange,
+  isGuest = false,
+  autoFocus,
+  textareaRef,
+}: ComposerProps) {
+  const ownRef = useRef<HTMLTextAreaElement>(null);
+  const ref = textareaRef ?? ownRef;
+  const canSend = value.trim().length > 0 && !busy;
+  const tooLong = value.length > siteConfig.chat.maxInputChars;
+
+  useIsoLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "0px";
+    el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+  }, [value, ref]);
+
+  function onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      if (canSend && !tooLong) onSubmit();
+    } else if (e.key === "Escape" && busy) {
+      e.preventDefault();
+      onStop();
+    }
+  }
+
+  return (
+    <form
+      className="bezel composer-shell"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (canSend && !tooLong) onSubmit();
+      }}
+    >
+      <div className="bezel-core flex flex-col px-3 pb-2.5 pt-3 transition-shadow duration-300">
+        <textarea
+          ref={ref}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          rows={1}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          aria-label="Message"
+          className="max-h-60 min-h-[28px] w-full resize-none bg-transparent px-1.5 text-[15.5px] leading-[1.6] text-ink outline-none placeholder:text-ink-3"
+        />
+        <div className="mt-2 flex items-center justify-between gap-2">
+          <ModelPicker value={model} onChange={onModelChange} isGuest={isGuest} />
+          <div className="flex items-center gap-3">
+            {tooLong ? (
+              <span className="text-[12px] text-warn">
+                {value.length.toLocaleString()} / {siteConfig.chat.maxInputChars.toLocaleString()}
+              </span>
+            ) : null}
+            {busy ? (
+              <button
+                type="button"
+                onClick={onStop}
+                aria-label="Stop"
+                title="Stop (Esc)"
+                className="press flex size-9 items-center justify-center rounded-full bg-ink text-bg transition-transform duration-200"
+              >
+                <StopIcon size={11} />
+              </button>
+            ) : (
+              <button
+                type="submit"
+                disabled={!canSend || tooLong}
+                aria-label="Send"
+                title="Send (Enter)"
+                className="press flex size-9 items-center justify-center rounded-full bg-brand text-white transition-[opacity,transform] duration-200 disabled:bg-ink/15 disabled:text-ink-3"
+              >
+                <ArrowUpIcon size={18} />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+function ModelPicker({
+  value,
+  onChange,
+  isGuest,
+}: {
+  value: string;
+  onChange: (id: string) => void;
+  isGuest: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const current = findModel(value) ?? siteConfig.chat.models[0];
+
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e: MouseEvent) {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div ref={rootRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className="press inline-flex h-8 items-center gap-1 rounded-lg px-2 text-[13px] font-medium text-ink-2 transition-colors duration-200 hover:bg-hover hover:text-ink"
+      >
+        {current.label}
+        <ChevronDownIcon size={14} className={"transition-transform duration-300 " + (open ? "rotate-180" : "")} />
+      </button>
+      {open ? (
+        <div
+          role="listbox"
+          aria-label="Model"
+          className="menu-in absolute bottom-10 left-0 z-30 w-[17rem] rounded-2xl border border-line bg-surface p-1.5 shadow-float"
+        >
+          {siteConfig.chat.models.map((m) => {
+            const locked = !modelAllowedFor(m.id, isGuest);
+            return (
+              <button
+                key={m.id}
+                type="button"
+                role="option"
+                aria-selected={m.id === current.id}
+                aria-disabled={locked}
+                disabled={locked}
+                onClick={() => {
+                  onChange(m.id);
+                  setOpen(false);
+                }}
+                className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left transition-colors duration-150 enabled:hover:bg-hover disabled:opacity-55"
+              >
+                <span className="min-w-0 flex-1">
+                  <span className="block text-[13.5px] font-medium text-ink">{m.label}</span>
+                  <span className="block text-[12.5px] text-ink-3">{locked ? "Sign in to use this model" : m.note}</span>
+                </span>
+                {m.id === current.id ? <CheckIcon size={16} className="text-brand" /> : null}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/templates/ai-chat/components/chat/empty-state.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import React from "react";
+import { siteConfig } from "@/lib/site.config";
+import { ProviderSetup } from "./setup";
+import { BookIcon } from "./icons";
+
+export interface EmptyStateProps {
+  // The composer, placed under the headline.
+  composer: React.ReactNode;
+  onPick: (prompt: string) => void;
+  providerConfigured: boolean | null;
+  exampleCount: number;
+  onOpenExample?: () => void;
+}
+
+// The new-chat screen: headline, composer, starter prompts, and the setup
+// steps while no provider key is configured. Below the md breakpoint the
+// composer is docked at the bottom of the screen instead.
+export function EmptyState({ composer, onPick, providerConfigured, exampleCount, onOpenExample }: EmptyStateProps) {
+  const { chat } = siteConfig;
+  return (
+    <div className="mx-auto flex w-full max-w-[46rem] flex-col px-4 pb-10 pt-[max(10vh,3rem)] sm:px-6 md:pt-[16vh]">
+      <h1 className="rise text-center font-serif text-[30px] font-normal leading-tight tracking-[-0.02em] text-ink sm:text-[38px]">
+        {chat.emptyHeadline}
+      </h1>
+
+      <div className="rise mt-9 hidden [animation-delay:60ms] md:block">{composer}</div>
+
+      <div className="rise mt-4 grid grid-cols-2 gap-2 [animation-delay:120ms] max-md:mt-8">
+        {chat.suggestions.map((s) => (
+          <button
+            key={s.title}
+            type="button"
+            onClick={() => onPick(s.prompt)}
+            className="press group/s rounded-2xl px-4 py-3 text-left ring-1 ring-line transition-[background-color,box-shadow] duration-300 hover:bg-surface hover:shadow-soft"
+          >
+            <span className="block text-[14px] font-medium text-ink">{s.title}</span>
+            <span className="mt-0.5 line-clamp-2 text-[13px] text-ink-3 sm:line-clamp-1 transition-colors duration-300 group-hover/s:text-ink-2">
+              {s.prompt}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {providerConfigured === false ? (
+        <div className="rise mt-8 space-y-3 [animation-delay:180ms]">
+          <ProviderSetup />
+          {exampleCount > 0 && onOpenExample ? (
+            <button
+              type="button"
+              onClick={onOpenExample}
+              className="press flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-left ring-1 ring-line transition-colors duration-300 hover:bg-surface"
+            >
+              <BookIcon size={18} className="shrink-0 text-ink-3" />
+              <span className="flex-1 text-[13.5px] text-ink-2">
+                Open an example conversation to see how replies are laid out.
+              </span>
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}