@pylonsync/create-pylon 0.19.1 → 0.20.0

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

@@ -0,0 +1,110 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import { ArrowUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { MAX_MESSAGE_LENGTH } from "@/lib/chat";
+
+interface ComposerProps {
+  channelName: string;
+  /** Changes when the channel changes; the draft clears and the field refocuses. */
+  channelKey: string;
+  onSend: (text: string) => void;
+  /** Called on each keystroke that leaves text in the field. */
+  onTyping?: () => void;
+  /** Called when the field is emptied or the message is sent. */
+  onStopTyping?: () => void;
+  disabled?: boolean;
+}
+
+/**
+ * Message field. Enter sends, Shift+Enter adds a line, and the field grows
+ * up to about eight lines. Enter during IME composition (Japanese, Chinese,
+ * Korean input) confirms the composition instead of sending.
+ */
+export function Composer({
+  channelName,
+  channelKey,
+  onSend,
+  onTyping,
+  onStopTyping,
+  disabled,
+}: ComposerProps) {
+  const [text, setText] = useState("");
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    setText("");
+    // Focus on desktop only: on a phone, focusing opens the keyboard over the conversation.
+    if (window.matchMedia("(pointer: fine)").matches) ref.current?.focus();
+  }, [channelKey]);
+
+  // Grow with the content, capped by max-height in the class list.
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [text]);
+
+  const canSend = text.trim().length > 0 && !disabled;
+
+  function submit() {
+    const value = text.trim();
+    if (!value || disabled) return;
+    onSend(value);
+    setText("");
+    onStopTyping?.();
+    ref.current?.focus();
+  }
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        submit();
+      }}
+      className="composer group/composer relative flex items-end gap-2 rounded-2xl bg-card p-1.5 pl-4 shadow-composer transition-shadow duration-200 ease-out-soft focus-within:shadow-composer-focus"
+    >
+      <label htmlFor="composer" className="sr-only">
+        Message #{channelName}
+      </label>
+      <textarea
+        id="composer"
+        ref={ref}
+        rows={1}
+        value={text}
+        maxLength={MAX_MESSAGE_LENGTH}
+        placeholder={`Message #${channelName}`}
+        autoComplete="off"
+        enterKeyHint="send"
+        onChange={(e) => {
+          setText(e.target.value);
+          if (e.target.value.trim()) onTyping?.();
+          else onStopTyping?.();
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            submit();
+          }
+        }}
+        onBlur={() => onStopTyping?.()}
+        className="max-h-48 min-h-9 flex-1 resize-none bg-transparent py-[7px] text-base leading-[22px] sm:text-[15px] text-foreground outline-none placeholder:text-muted-foreground/80"
+      />
+      <button
+        type="submit"
+        disabled={!canSend}
+        aria-label="Send message"
+        className={cn(
+          "inline-flex size-9 shrink-0 items-center justify-center rounded-xl transition-all duration-200 ease-out-soft",
+          canSend
+            ? "bg-signal text-signal-foreground shadow-sm hover:brightness-105 active:scale-95"
+            : "bg-muted text-muted-foreground/60",
+        )}
+      >
+        <ArrowUp className="size-[18px]" strokeWidth={2} aria-hidden />
+      </button>
+    </form>
+  );
+}

package/templates/chat/components/chat/message-list.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ArrowDown, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  dayLabel,
+  groupMessages,
+  timeLabel,
+  type ChatMember,
+  type ChatMessage,
+} from "@/lib/chat";
+import { Avatar } from "./avatar";
+
+interface MessageListProps {
+  channelName: string;
+  channelTopic: string;
+  /** Sorted oldest first. */
+  messages: ChatMessage[];
+  members: Map<string, ChatMember>;
+  selfId: string;
+  onDelete: (id: string) => void;
+}
+
+/** Distance from the bottom, in px, that still counts as "at the bottom". */
+const STICK_THRESHOLD = 96;
+
+/**
+ * The conversation for one channel. Render it with `key={channelId}` so a
+ * channel switch starts at the bottom with fresh scroll state. Keeps the newest message in view while the reader is at
+ * the bottom, and always after they send. When they have scrolled up to read
+ * history, new messages from others show a "New messages" button instead of
+ * yanking the scroll position.
+ */
+export function MessageList({
+  channelName,
+  channelTopic,
+  messages,
+  members,
+  selfId,
+  onDelete,
+}: MessageListProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const atBottomRef = useRef(true);
+  const lastCountRef = useRef(0);
+  const lastIdRef = useRef<string | null>(null);
+  // Rows already on screen when the list first filled. They render without
+  // the entrance animation; rows that arrive later get it.
+  const [knownIds] = useState(() => new Set(messages.map((m) => m.id)));
+  const [unseen, setUnseen] = useState(0);
+
+  const groups = useMemo(() => groupMessages(messages), [messages]);
+  // No entrance animation while the list is still empty: the first rows to
+  // arrive are history, not new messages.
+  const animateNew = lastCountRef.current > 0;
+
+  // Follow new rows when the reader is at the bottom or sent the row. The
+  // first fill (on mount, or when the replica loads) jumps without animating.
+  useLayoutEffect(() => {
+    const el = scrollRef.current;
+    const previous = lastCountRef.current;
+    const added = messages.length - previous;
+    lastCountRef.current = messages.length;
+    if (!el || added <= 0) return;
+    if (previous === 0) {
+      lastIdRef.current = messages[messages.length - 1]?.id ?? null;
+      for (const m of messages) knownIds.add(m.id);
+      el.scrollTop = el.scrollHeight;
+      return;
+    }
+    const last = messages[messages.length - 1];
+    const previousLastId = lastIdRef.current;
+    lastIdRef.current = last?.id ?? null;
+    // Rows that sorted in above the newest one are history catching up, not
+    // new messages: keep the view pinned if it was, and count nothing.
+    if (last?.id === previousLastId) {
+      if (atBottomRef.current) el.scrollTop = el.scrollHeight;
+      return;
+    }
+    // An instant pin: a smooth scroll can emit a mid-animation scroll event
+    // that reads as "not at the bottom" when the next row lands.
+    if (atBottomRef.current || last?.authorId === selfId) {
+      el.scrollTop = el.scrollHeight;
+      atBottomRef.current = true;
+      setUnseen(0);
+    } else {
+      const fromOthers = messages.slice(-added).filter((m) => m.authorId !== selfId).length;
+      if (fromOthers > 0) setUnseen((n) => n + fromOthers);
+    }
+  }, [messages, selfId, knownIds]);
+
+  // Stay pinned to the newest message when the viewport shrinks (the phone
+  // keyboard opens) or the composer grows.
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (atBottomRef.current) el.scrollTop = el.scrollHeight;
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  function onScroll() {
+    const el = scrollRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_THRESHOLD;
+    atBottomRef.current = atBottom;
+    if (atBottom && unseen) setUnseen(0);
+  }
+
+  function jumpToLatest() {
+    const el = scrollRef.current;
+    el?.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+    setUnseen(0);
+  }
+
+  let previousDay: string | null = null;
+
+  return (
+    <div className="relative min-h-0 flex-1">
+      <div
+        ref={scrollRef}
+        onScroll={onScroll}
+        role="log"
+        aria-live="polite"
+        aria-label={`Messages in #${channelName}`}
+        className="scroll-area h-full overflow-y-auto overscroll-contain"
+      >
+        <div className="flex min-h-full max-w-4xl flex-col justify-end px-3 pt-10 pb-4 sm:px-5">
+          <ChannelIntro name={channelName} topic={channelTopic} empty={messages.length === 0} />
+
+          {groups.map((group) => {
+            const first = group.messages[0];
+            const showDay = group.day !== null && group.day !== previousDay;
+            if (group.day !== null) previousDay = group.day;
+            const author = members.get(group.authorId);
+            const name = author?.name ?? "Someone";
+            const hue = author?.hue ?? 250;
+            const isSelf = group.authorId === selfId;
+            return (
+              <React.Fragment key={group.key}>
+                {showDay && first.createdAt ? <DayDivider iso={first.createdAt} /> : null}
+                <section className="group/msggroup mt-3 first:mt-0" aria-label={`${name}`}>
+                  {group.messages.map((m, i) => (
+                    <MessageRow
+                      key={m.id}
+                      message={m}
+                      head={i === 0}
+                      name={name}
+                      hue={hue}
+                      isSelf={isSelf}
+                      animate={animateNew && !knownIds.has(m.id)}
+                      onDelete={onDelete}
+                    />
+                  ))}
+                </section>
+              </React.Fragment>
+            );
+          })}
+        </div>
+      </div>
+
+      <button
+        type="button"
+        onClick={jumpToLatest}
+        aria-hidden={unseen === 0}
+        tabIndex={unseen === 0 ? -1 : 0}
+        className={cn(
+          "absolute bottom-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full bg-foreground px-3.5 py-1.5 text-[13px] font-medium text-background shadow-float transition-all duration-300 ease-out-soft",
+          unseen > 0 ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-2 opacity-0",
+        )}
+      >
+        <ArrowDown className="size-3.5" strokeWidth={2} aria-hidden />
+        {unseen === 1 ? "1 new message" : `${unseen} new messages`}
+      </button>
+    </div>
+  );
+}
+
+function ChannelIntro({ name, topic, empty }: { name: string; topic: string; empty: boolean }) {
+  return (
+    <div className="mb-8 px-2 sm:px-3">
+      <div className="mb-3 inline-flex size-11 items-center justify-center rounded-xl bg-muted text-xl font-medium text-muted-foreground">
+        #
+      </div>
+      <h2 className="text-[22px] font-semibold tracking-tight text-foreground">
+        This is the start of #{name}
+      </h2>
+      <p className="mt-1 text-[15px] text-muted-foreground">
+        {empty ? `${topic}. Send the first message.` : topic}
+      </p>
+    </div>
+  );
+}
+
+function DayDivider({ iso }: { iso: string }) {
+  return (
+    <div className="relative mt-6 mb-2 flex items-center justify-center" role="separator">
+      <span aria-hidden className="absolute inset-x-2 top-1/2 h-px bg-border sm:inset-x-3" />
+      <span className="relative rounded-full bg-background px-3 py-0.5 text-[12px] font-medium text-muted-foreground ring-1 ring-border">
+        {dayLabel(iso)}
+      </span>
+    </div>
+  );
+}
+
+interface MessageRowProps {
+  message: ChatMessage;
+  head: boolean;
+  name: string;
+  hue: number;
+  isSelf: boolean;
+  animate: boolean;
+  onDelete: (id: string) => void;
+}
+
+function MessageRow({ message, head, name, hue, isSelf, animate, onDelete }: MessageRowProps) {
+  const pending = !message.createdAt;
+  return (
+    <div
+      className={cn(
+        "group/msg relative flex gap-3 rounded-lg px-2 py-0.5 transition-colors duration-150 hover:bg-hover sm:px-3",
+        head ? "pt-1.5" : "",
+        animate && "animate-message-in",
+      )}
+    >
+      <div className="w-9 shrink-0">
+        {head ? (
+          <Avatar name={name} hue={hue} className="mt-0.5" />
+        ) : message.createdAt ? (
+          <time
+            dateTime={message.createdAt}
+            className="block pt-[3px] text-right font-mono text-[10.5px] leading-[22px] text-muted-foreground opacity-0 transition-opacity duration-150 group-hover/msg:opacity-100"
+          >
+            {timeLabel(message.createdAt).replace(/\s?[AP]M$/i, "")}
+          </time>
+        ) : null}
+      </div>
+      <div className="min-w-0 flex-1">
+        {head ? (
+          <div className="flex items-baseline gap-2">
+            <span className="truncate text-[15px] font-semibold text-foreground">{name}</span>
+            {isSelf ? (
+              <span className="shrink-0 text-[12px] text-muted-foreground">you</span>
+            ) : null}
+            {message.createdAt ? (
+              <time
+                dateTime={message.createdAt}
+                title={new Date(message.createdAt).toLocaleString()}
+                className="shrink-0 font-mono text-[11px] text-muted-foreground"
+              >
+                {timeLabel(message.createdAt)}
+              </time>
+            ) : null}
+          </div>
+        ) : null}
+        <p
+          className={cn(
+            "text-[15px] leading-[22px] whitespace-pre-wrap text-foreground/90 [overflow-wrap:anywhere] transition-opacity duration-200",
+            pending && "opacity-55",
+          )}
+        >
+          {message.text}
+          {pending ? (
+            <span className="ml-2 align-middle font-mono text-[10.5px] text-muted-foreground">
+              Sending
+            </span>
+          ) : null}
+        </p>
+      </div>
+      {isSelf && !pending ? (
+        <button
+          type="button"
+          onClick={() => onDelete(message.id)}
+          aria-label="Delete message"
+          title="Delete message"
+          className="delete-action absolute top-1 right-2 inline-flex size-7 items-center justify-center rounded-md bg-card text-muted-foreground shadow-sm ring-1 ring-border transition-opacity duration-150 hover:text-destructive"
+        >
+          <Trash2 className="size-3.5" strokeWidth={1.75} aria-hidden />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/templates/chat/components/chat/sidebar.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import React, { useState } from "react";
+import { Check, Hash, Pencil, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { MAX_NAME_LENGTH, type ChatMember } from "@/lib/chat";
+import { Avatar } from "./avatar";
+
+export interface SidebarChannel {
+  id: string;
+  slug: string;
+  name: string;
+  unread: number;
+}
+
+interface SidebarProps {
+  workspace: string;
+  channels: SidebarChannel[];
+  activeSlug: string;
+  onSelect: (slug: string) => void;
+  online: ChatMember[];
+  self: ChatMember | undefined;
+  onRename: (name: string) => Promise<void>;
+}
+
+export function Sidebar({
+  workspace,
+  channels,
+  activeSlug,
+  onSelect,
+  online,
+  self,
+  onRename,
+}: SidebarProps) {
+  return (
+    <nav
+      aria-label="Workspace"
+      className="flex h-full flex-col bg-sidebar text-sidebar-foreground [--avatar-ring:var(--sidebar)]"
+    >
+      <div className="flex h-14 shrink-0 items-center gap-2.5 px-4">
+        <span
+          aria-hidden
+          className="inline-flex size-7 items-center justify-center rounded-lg bg-signal text-[13px] font-semibold text-signal-foreground"
+        >
+          {workspace.slice(0, 1).toUpperCase()}
+        </span>
+        <span className="truncate text-[15px] font-semibold tracking-tight">{workspace}</span>
+      </div>
+
+      <div className="scroll-area min-h-0 flex-1 overflow-y-auto px-2 pb-4">
+        <h2 className="px-2 pt-3 pb-1.5 text-[12.5px] font-medium text-sidebar-muted">Channels</h2>
+        <ul className="space-y-px">
+          {channels.map((c) => {
+            const active = c.slug === activeSlug;
+            return (
+              <li key={c.id}>
+                <button
+                  type="button"
+                  onClick={() => onSelect(c.slug)}
+                  aria-current={active ? "page" : undefined}
+                  className={cn(
+                    "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-[14.5px] transition-colors duration-150",
+                    active
+                      ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                      : c.unread > 0
+                        ? "font-semibold text-sidebar-foreground hover:bg-sidebar-accent/60"
+                        : "text-sidebar-muted-strong hover:bg-sidebar-accent/60 hover:text-sidebar-foreground",
+                  )}
+                >
+                  <Hash className="size-4 shrink-0 opacity-60" strokeWidth={1.75} aria-hidden />
+                  <span className="flex-1 truncate">{c.name}</span>
+                  {c.unread > 0 && !active ? (
+                    <span className="min-w-5 rounded-full bg-signal px-1.5 text-center text-[11px] leading-5 font-semibold text-signal-foreground tabular-nums">
+                      {c.unread > 99 ? "99+" : c.unread}
+                      <span className="sr-only"> unread</span>
+                    </span>
+                  ) : null}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+
+        <h2 className="px-2 pt-6 pb-1.5 text-[12.5px] font-medium text-sidebar-muted">
+          Online <span className="tabular-nums">{online.length}</span>
+        </h2>
+        <ul className="space-y-px">
+          {online.map((m) => (
+            <li key={m.userId} className="flex h-9 items-center gap-2.5 rounded-md px-2 text-[14px]">
+              <Avatar name={m.name} hue={m.hue} size="sm" online />
+              <span className="truncate text-sidebar-muted-strong">{m.name}</span>
+              {m.userId === self?.userId ? (
+                <span className="text-[12px] text-sidebar-muted">you</span>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {self ? <SelfCard self={self} onRename={onRename} /> : null}
+    </nav>
+  );
+}
+
+function SelfCard({ self, onRename }: { self: ChatMember; onRename: (name: string) => Promise<void> }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(self.name);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  async function save() {
+    setSaving(true);
+    setError(null);
+    try {
+      await onRename(draft);
+      setEditing(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Could not save the name.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="shrink-0 border-t border-sidebar-border p-2 pb-[max(0.5rem,env(safe-area-inset-bottom))]">
+      {editing ? (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            void save();
+          }}
+          className="flex items-center gap-1.5 rounded-lg bg-sidebar-accent p-1.5"
+        >
+          <label htmlFor="display-name" className="sr-only">
+            Display name
+          </label>
+          <input
+            id="display-name"
+            autoFocus
+            value={draft}
+            maxLength={MAX_NAME_LENGTH}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") setEditing(false);
+            }}
+            className="h-8 min-w-0 flex-1 rounded-md bg-sidebar px-2 text-[14px] text-sidebar-foreground outline-none ring-1 ring-sidebar-border focus:ring-sidebar-ring"
+          />
+          <button
+            type="submit"
+            disabled={saving}
+            aria-label="Save name"
+            className="inline-flex size-8 items-center justify-center rounded-md text-sidebar-foreground hover:bg-sidebar"
+          >
+            <Check className="size-4" strokeWidth={1.75} aria-hidden />
+          </button>
+          <button
+            type="button"
+            onClick={() => setEditing(false)}
+            aria-label="Cancel"
+            className="inline-flex size-8 items-center justify-center rounded-md text-sidebar-muted hover:bg-sidebar"
+          >
+            <X className="size-4" strokeWidth={1.75} aria-hidden />
+          </button>
+        </form>
+      ) : (
+        <div className="flex items-center gap-2.5 rounded-lg p-1.5">
+          <Avatar name={self.name} hue={self.hue} size="sm" online />
+          <div className="min-w-0 flex-1 leading-tight">
+            <div className="truncate text-[14px] font-medium">{self.name}</div>
+            <div className="text-[12px] text-sidebar-muted">Guest</div>
+          </div>
+          <button
+            type="button"
+            onClick={() => {
+              setDraft(self.name);
+              setError(null);
+              setEditing(true);
+            }}
+            aria-label="Edit display name"
+            title="Edit display name"
+            className="inline-flex size-8 items-center justify-center rounded-md text-sidebar-muted transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+          >
+            <Pencil className="size-3.5" strokeWidth={1.75} aria-hidden />
+          </button>
+        </div>
+      )}
+      {error ? <p className="px-2 pt-1 text-[12px] text-red-300">{error}</p> : null}
+    </div>
+  );
+}

package/templates/chat/functions/joinChat.ts

@@ -0,0 +1,83 @@
+import { mutation, type DbWriter } from "@pylonsync/functions";
+import { guestHue, guestName } from "../lib/chat";
+import { includeDemoConversation, seedChannels, seedMessages, seedPeople } from "../lib/seed";
+
+/**
+ * Called by the client once per page load, after the guest session exists.
+ *
+ * 1. On the first call against an empty database, creates the channels from
+ *    lib/seed.ts and, when `includeDemoConversation` is on, the four demo
+ *    people and their conversation.
+ * 2. Creates the caller's Member row (a generated name like "Amber Otter" and
+ *    an avatar hue) if it does not exist yet.
+ * 3. Returns the server time, which the client uses as the starting "read up
+ *    to" mark for channels it has not opened yet.
+ *
+ * Both steps are idempotent. The advisory lock keeps two first visitors from
+ * seeding twice on Postgres; SQLite already serializes writers.
+ *
+ * Channel and Member deny client writes, so these writes use `ctx.db.unsafe`,
+ * which keeps them working under PYLON_STRICT_FN_POLICIES. Every value comes
+ * from lib/seed.ts or the caller's session, never from arguments.
+ */
+export default mutation({
+  auth: "guest",
+  args: {},
+  async handler(ctx): Promise<{ memberId: string; seeded: boolean; now: string }> {
+    const userId = ctx.auth.userId;
+    if (!userId) throw ctx.error("AUTH_REQUIRED", "Start a guest session first.");
+    await ctx.db.advisoryLock("chat_join");
+
+    let seeded = false;
+    const channels = await ctx.db.query("Channel", { $limit: 1 });
+    if (channels.length === 0) {
+      const channelIds = await seedChannelRows(ctx.db);
+      if (includeDemoConversation) {
+        // Demo messages carry the demo authors' ids, and field.owner() lets
+        // only an admin context write an owner id that isn't the caller's.
+        await ctx.auth.elevate({ admin: true, reason: "seed demo chat conversation" });
+        await seedConversation(ctx.db, channelIds);
+      }
+      seeded = true;
+    }
+
+    const existing = await ctx.db.lookup("Member", "userId", userId);
+    const now = new Date().toISOString();
+    if (existing) return { memberId: existing.id as string, seeded, now };
+
+    const memberId = await ctx.db.unsafe.insert("Member", {
+      userId,
+      name: guestName(userId),
+      hue: guestHue(userId),
+    });
+    return { memberId, seeded, now };
+  },
+});
+
+async function seedChannelRows(db: DbWriter): Promise<Map<string, string>> {
+  const channelIds = new Map<string, string>();
+  for (const [position, c] of seedChannels.entries()) {
+    const id = await db.unsafe.insert("Channel", { ...c, position });
+    channelIds.set(c.slug, id);
+  }
+  return channelIds;
+}
+
+async function seedConversation(db: DbWriter, channelIds: Map<string, string>) {
+  for (const p of seedPeople) {
+    await db.unsafe.insert("Member", { userId: p.userId, name: p.name, hue: p.hue });
+  }
+  const now = Date.now();
+  for (const m of seedMessages) {
+    const channelId = channelIds.get(m.channel);
+    if (!channelId) continue;
+    // Demo authors are not session users, so these rows set authorId and
+    // createdAt directly.
+    await db.insert("Message", {
+      channelId,
+      authorId: m.author,
+      text: m.text,
+      createdAt: new Date(now - m.minutesAgo * 60_000).toISOString(),
+    });
+  }
+}

package/templates/chat/functions/renameMember.ts

@@ -0,0 +1,25 @@
+import { mutation, v } from "@pylonsync/functions";
+import { cleanName, MAX_NAME_LENGTH } from "../lib/chat";
+import { seedPeople } from "../lib/seed";
+
+/** Changes the caller's display name. Other people see it on every message at once. */
+export default mutation({
+  auth: "guest",
+  args: { name: v.string() },
+  async handler(ctx, { name }) {
+    const clean = cleanName(name);
+    if (!clean) {
+      throw ctx.error("INVALID_NAME", `Use 1 to ${MAX_NAME_LENGTH} characters.`);
+    }
+    const taken = seedPeople.some((p) => p.name.toLowerCase() === clean.toLowerCase());
+    if (taken) throw ctx.error("NAME_TAKEN", "Someone in this workspace already uses that name.");
+    const userId = ctx.auth.userId;
+    if (!userId) throw ctx.error("AUTH_REQUIRED", "Start a guest session first.");
+    const member = await ctx.db.lookup("Member", "userId", userId);
+    if (!member) throw ctx.error("NOT_JOINED", "Call joinChat first.");
+    // Member denies client writes; `unsafe` keeps this working under
+    // PYLON_STRICT_FN_POLICIES. The row is the caller's own, found by session id.
+    await ctx.db.unsafe.update("Member", member.id as string, { name: clean });
+    return { name: clean };
+  },
+});