@pylonsync/create-pylon 0.19.1 → 0.20.0

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

@@ -1,727 +1,762 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
-import { db, callFn } from "@pylonsync/react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  callFn,
+  db,
+  getSync,
+  resumeStream,
+  storageKey,
+  streamFn,
+  useSyncStatus,
+} from "@pylonsync/react";
+import { EnsureGuest } from "@pylonsync/client";
 import { siteConfig } from "@/lib/site.config";
+import {
+  cleanTitle,
+  describeError,
+  modelAllowedFor,
+  isStaleStream,
+  modelLabel,
+  sortMessages,
+  type ConversationRow,
+  type MessageRow,
+} from "@/lib/chat";
+import type { ProviderStatus } from "@/lib/provider";
+import { Sidebar, type Account } from "@/components/chat/sidebar";
+import { Composer } from "@/components/chat/composer";
+import { AssistantMessage, UserMessage } from "@/components/chat/message";
+import { EmptyState } from "@/components/chat/empty-state";
+import { ProviderSetup } from "@/components/chat/setup";
+import { AlertIcon, ArrowDownIcon, CloseIcon, ComposeIcon, MenuIcon } from "@/components/chat/icons";
+
+// The chat app. This file is the only one that talks to Pylon: live queries
+// for conversations and messages, `streamFn("respond")` to send, and
+// `resumeStream` to follow a reply that another tab started. Everything under
+// components/chat receives plain props.
+
+export interface ChatAppProps {
+  initialConversationId: string | null;
+  // From the SSR session: a signed-in account (not a guest) and its id.
+  signedInUserId: string | null;
+}
 
-// The chat app — a client island, rendered only for a SIGNED-IN user (the page
-// redirects anyone else to /login). Conversations + messages are sync-backed
-// owner-scoped entities (`db.useQuery`), private to your account and in lockstep
-// across your tabs + devices. Sending streams tokens from the built-in
-// `POST /api/ai/stream` (SSE) — your PYLON_AI_API_KEY never reaches the browser.
-//
-// All state lives in <ChatInner> (which owns `currentId`) — the thread is a
-// presentational child. That's deliberate: creating a conversation mid-send
-// changes `currentId`, and if the thread remounted on that change it would kill
-// the in-flight stream. One owner, no remounts.
-
-interface ConversationRow {
-  id: string;
-  userId: string;
-  title: string;
-  createdAt: string;
+export function ChatApp(props: ChatAppProps) {
+  // A visitor without a session gets a guest session before the app renders.
+  return (
+    <EnsureGuest fallback={<ShellSkeleton />}>
+      <ChatShell {...props} />
+    </EnsureGuest>
+  );
 }
-interface MessageRow {
-  id: string;
+
+// The reply this tab is streaming. `knownIds` holds the message ids that
+// existed when it started, so the new rows can be told apart as they sync in.
+interface LocalTurn {
   conversationId: string;
-  userId: string;
-  role: string;
-  content: string;
-  createdAt: string;
+  userText: string | null;
+  text: string;
+  knownIds: Set<string>;
+  stopped: boolean;
+}
+
+const MODEL_KEY = "lumen:model";
+
+function readStoredModel(isGuest: boolean): string {
+  try {
+    const v = window.localStorage.getItem(MODEL_KEY);
+    if (modelAllowedFor(v, isGuest)) return v as string;
+  } catch {
+    /* storage blocked */
+  }
+  return siteConfig.chat.defaultModel;
+}
+
+function pathFor(id: string | null): string {
+  return id ? `/c/${encodeURIComponent(id)}` : "/";
 }
 
-export function ChatApp() {
-  return <ChatInner />;
+function idFromPath(pathname: string): string | null {
+  const m = pathname.match(/^\/c\/([^/]+)\/?$/);
+  if (!m) return null;
+  try {
+    return decodeURIComponent(m[1]);
+  } catch {
+    return null;
+  }
 }
 
-function ChatInner() {
+function ChatShell({ initialConversationId, signedInUserId }: ChatAppProps) {
   const { chat } = siteConfig;
-  const { data: conversations } = db.useQuery<ConversationRow>("Conversation", {
-    orderBy: { createdAt: "desc" },
-  });
-  const [currentId, setCurrentId] = useState<string | null>(null);
-  const { data: messages } = db.useQuery<MessageRow>("Message", {
+
+  const { data: conversationRows, loading: conversationsLoading } =
+    db.useQuery<ConversationRow>("Conversation");
+  const [currentId, setCurrentId] = useState<string | null>(initialConversationId);
+  const { data: messageRows } = db.useQuery<MessageRow>("Message", {
     where: { conversationId: currentId ?? "__none__" },
-    orderBy: { createdAt: "asc" },
   });
+  const messages = useMemo(() => sortMessages(messageRows), [messageRows]);
+  const conversations = conversationRows;
+  const current = conversations.find((c) => c.id === currentId) ?? null;
 
-  const [streaming, setStreaming] = useState<string | null>(null);
-  const [sending, setSending] = useState(false);
-  const [notice, setNotice] = useState<string | null>(null);
+  const [provider, setProvider] = useState<ProviderStatus | null>(null);
   const [input, setInput] = useState("");
   const [model, setModel] = useState(chat.defaultModel);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const initialized = useRef(false);
+  const [local, setLocal] = useState<LocalTurn | null>(null);
+  // `turnRef` holds the live turn object the stream loop writes into;
+  // `local` is a copy for rendering.
+  const turnRef = useRef<LocalTurn | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [setupOpen, setSetupOpen] = useState(false);
+  const [now, setNow] = useState(() => Date.now());
+  // The new-chat screen shows the composer mid-page on wide screens and docked
+  // at the bottom on narrow ones; each placement has its own textarea.
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const dockTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const syncStatus = useSyncStatus(getSync());
+
+  const startLocal = useCallback((turn: LocalTurn) => {
+    turnRef.current = turn;
+    setLocal({ ...turn });
+  }, []);
+  const renderLocal = useCallback((turn: LocalTurn) => {
+    if (turnRef.current === turn) setLocal({ ...turn });
+  }, []);
+  const endLocal = useCallback((turn: LocalTurn) => {
+    if (turnRef.current !== turn) return;
+    turnRef.current = null;
+    setLocal(null);
+  }, []);
+
+  /* ------------------------------ bootstrap ------------------------------ */
 
   useEffect(() => {
-    if (!initialized.current && conversations.length > 0) {
-      initialized.current = true;
-      setCurrentId(conversations[0].id);
-    }
-  }, [conversations]);
+    setModel(readStoredModel(!signedInUserId));
+    let cancelled = false;
+    callFn<ProviderStatus>("assistantStatus")
+      .then((s) => !cancelled && setProvider(s))
+      .catch(() => !cancelled && setProvider({ configured: false, provider: null }));
+    const t = setInterval(() => setNow(Date.now()), 60_000);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, []);
+
+  // With no provider key, a visitor with an empty history gets the example
+  // conversations from lib/examples.ts. The server re-checks both conditions.
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current || provider?.configured !== false) return;
+    if (conversationsLoading || conversations.length > 0) return;
+    seeded.current = true;
+    callFn("seedExamples").catch(() => {});
+  }, [provider, conversationsLoading, conversations.length]);
 
+  // Keep the URL and the open conversation in step, including Back/Forward.
   useEffect(() => {
-    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
-  }, [messages.length, streaming]);
+    const onPop = () => {
+      setCurrentId(idFromPath(window.location.pathname));
+      setNotice(null);
+    };
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, []);
+
+  // A conversation deleted in another tab closes here too.
+  useEffect(() => {
+    if (currentId && !conversationsLoading && conversations.length > 0 && !current && !local) {
+      openConversation(null, "replace");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentId, current, conversationsLoading, conversations.length, local]);
 
-  function selectConversation(id: string) {
+  function openConversation(id: string | null, mode: "push" | "replace" = "push") {
     setCurrentId(id);
-    setStreaming(null);
     setNotice(null);
+    setDrawerOpen(false);
+    const path = pathFor(id);
+    if (window.location.pathname !== path) {
+      if (mode === "push") window.history.pushState(null, "", path);
+      else window.history.replaceState(null, "", path);
+    }
   }
+
   function newChat() {
-    setCurrentId(null);
-    setStreaming(null);
-    setNotice(null);
-  }
-  async function renameConversation(id: string, title: string) {
-    const t = title.trim().slice(0, 80);
-    if (!t) return;
-    await db.update("Conversation", id, { title: t });
+    openConversation(null);
+    setInput("");
+    requestAnimationFrame(() => {
+      const visible = [textareaRef.current, dockTextareaRef.current].find((el) => el && el.offsetParent !== null);
+      visible?.focus();
+    });
   }
-  async function deleteConversation(id: string) {
-    if (currentId === id) setCurrentId(null);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "o") {
+        e.preventDefault();
+        newChat();
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function changeModel(id: string) {
+    setModel(id);
     try {
-      await callFn("deleteConversation", { conversationId: id });
+      window.localStorage.setItem(MODEL_KEY, id);
     } catch {
-      /* ignore */
+      /* storage blocked */
     }
   }
 
-  async function send(text: string) {
-    const trimmed = text.trim();
-    if (!trimmed || sending) return;
-    setSending(true);
+  /* -------------------------------- send -------------------------------- */
+
+  async function runTurn(
+    conversationId: string,
+    args: { content?: string; regenerate?: boolean },
+    onStarted?: () => void,
+  ): Promise<"done" | "rejected" | "failed"> {
+    const turn: LocalTurn = {
+      conversationId,
+      userText: args.content ?? null,
+      text: "",
+      knownIds: new Set(messages.map((m) => m.id)),
+      stopped: false,
+    };
+    startLocal(turn);
+    onStarted?.();
     setNotice(null);
-    setInput("");
 
-    const history = messages.map((m) => ({ role: m.role, content: m.content }));
-    let convId = currentId;
-    if (!convId) {
-      convId = await db.insert("Conversation", { title: trimmed.slice(0, 48) });
-      setCurrentId(convId);
+    try {
+      const gen = streamFn("respond", { conversationId, model, ...args });
+      let result: unknown;
+      for (;;) {
+        const step = await gen.next();
+        if (step.done) {
+          result = step.value;
+          break;
+        }
+        if (turnRef.current !== turn || turn.stopped) {
+          await gen.return(undefined);
+          break;
+        }
+        turn.text += step.value;
+        renderLocal(turn);
+      }
+      const r = result as { status?: string; errorCode?: string; message?: string } | undefined;
+      if (r?.status === "rejected") {
+        setNotice(r.message || describeError(r.errorCode).title);
+        if (args.content) setInput((cur) => cur || args.content || "");
+        return "rejected";
+      }
+      return "done";
+    } catch {
+      if (turnRef.current === turn && !turn.stopped) {
+        setNotice("The connection dropped before the reply finished. It may still be completing; reload to check.");
+      }
+      return "failed";
+    } finally {
+      endLocal(turn);
     }
-    await db.insert("Message", { conversationId: convId, role: "user", content: trimmed });
+  }
 
-    const payload = [
-      { role: "system", content: chat.systemPrompt },
-      ...history,
-      { role: "user", content: trimmed },
-    ];
+  // Guards the gap between pressing Enter and the turn starting, so a double
+  // submit cannot create two conversations. Once the turn starts, `turnRef`
+  // takes over.
+  const sendingRef = useRef(false);
+
+  async function send(text: string) {
+    const content = text.trim();
+    if (!content || sendingRef.current) return;
+    if (content.length > chat.maxInputChars) return;
+    if (turnRef.current) {
+      setNotice(describeError("BUSY").body);
+      return;
+    }
+    sendingRef.current = true;
+    setInput("");
 
-    let acc = "";
     try {
-      await streamCompletion(payload, model, (delta) => {
-        acc += delta;
-        setStreaming(acc);
-      });
-      if (acc.trim()) {
-        await db.insert("Message", { conversationId: convId, role: "assistant", content: acc });
+      let conversationId = currentId;
+      let created = false;
+      if (!conversationId) {
+        try {
+          const { id } = await callFn<{ id: string }>("createConversation", { firstMessage: content });
+          conversationId = id;
+          created = true;
+          openConversation(id, "push");
+        } catch (err) {
+          setInput(content);
+          setNotice((err as { message?: string })?.message || "Could not start a new chat. Try again.");
+          return;
+        }
       }
-    } catch (err) {
-      const code = (err as { code?: string })?.code;
-      if (code === "AI_NOT_CONFIGURED") {
-        setNotice(
-          "AI isn't configured yet. Set PYLON_AI_PROVIDER and PYLON_AI_API_KEY in .env, then restart — see the README.",
-        );
-      } else if (code === "MODEL_OVERRIDE_FORBIDDEN" || code === "MODEL_NOT_ALLOWED") {
-        setNotice(
-          "That model isn't enabled. Add it to PYLON_AI_MODELS_ALLOWED in .env (comma-separated), then restart.",
-        );
-      } else if (code === "RATE_LIMITED") {
-        setNotice("You've hit the AI rate limit — try again in a little while.");
-      } else {
-        setNotice("Something went wrong reaching the model. Try again.");
+      const outcome = await runTurn(conversationId, { content }, () => {
+        sendingRef.current = false;
+      });
+      // A refused first message leaves nothing worth keeping in a new chat.
+      if (outcome === "rejected" && created) {
+        void callFn("deleteConversation", { conversationId }).catch(() => {});
+        openConversation(null, "replace");
       }
     } finally {
-      setStreaming(null);
-      setSending(false);
+      sendingRef.current = false;
     }
   }
 
-  const empty = messages.length === 0 && streaming === null;
+  function regenerate() {
+    if (!currentId || turnRef.current) return;
+    void runTurn(currentId, { regenerate: true });
+  }
 
-  return (
-    <div className="flex h-[calc(100vh-3.5rem)]">
-      <Sidebar
-        conversations={conversations}
-        currentId={currentId}
-        onSelect={selectConversation}
-        onNew={newChat}
-        onRename={renameConversation}
-        onDelete={deleteConversation}
-      />
-      <div className="flex flex-1 flex-col bg-white">
-        <div ref={scrollRef} className="flex-1 overflow-y-auto">
-          <div className="mx-auto max-w-3xl px-4 py-6">
-            {empty ? (
-              <EmptyState onPick={send} />
-            ) : (
-              <div className="space-y-5">
-                {messages.map((m) => (
-                  <Bubble key={m.id} role={m.role} content={m.content} at={m.createdAt} />
-                ))}
-                {streaming !== null ? <Bubble role="assistant" content={streaming || "…"} streaming /> : null}
-              </div>
-            )}
-            {notice ? (
-              <div className="mt-5 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-[13px] leading-relaxed text-amber-800">
-                {notice}
-              </div>
-            ) : null}
-          </div>
-        </div>
+  // Stop whichever reply is streaming in the open conversation: this tab's,
+  // or one started in another tab. The server finds the streaming row by
+  // conversation, so Stop works before the row has synced to this tab.
+  async function stop() {
+    if (!currentId) return;
+    const conversationId = currentId;
+    const row = messages.find((m) => m.role === "assistant" && m.status === "streaming");
+    const turn = turnRef.current;
+    let content = "";
+    if (turn && turn.conversationId === conversationId) {
+      turn.stopped = true;
+      content = turn.text;
+      endLocal(turn);
+    } else if (row) {
+      content = remoteText.current.get(row.id) ?? row.content;
+    }
+    for (let attempt = 0; attempt < 3; attempt++) {
+      try {
+        const r = await callFn<{ stopped: boolean }>("stopResponse", { conversationId, content });
+        if (r.stopped || row) return;
+      } catch {
+        return;
+      }
+      // The server may not have inserted the reply row yet.
+      await new Promise((res) => setTimeout(res, 700));
+    }
+  }
 
-        <Composer
-          value={input}
-          onChange={setInput}
-          onSend={() => send(input)}
-          disabled={sending}
-          placeholder={chat.inputPlaceholder}
-          model={model}
-          onModelChange={setModel}
-        />
-      </div>
-    </div>
-  );
-}
+  // Text of replies being followed from another tab, for Stop.
+  const remoteText = useRef(new Map<string, string>());
 
-function Sidebar({
-  conversations,
-  currentId,
-  onSelect,
-  onNew,
-  onRename,
-  onDelete,
-}: {
-  conversations: ConversationRow[];
-  currentId: string | null;
-  onSelect: (id: string) => void;
-  onNew: () => void;
-  onRename: (id: string, title: string) => void;
-  onDelete: (id: string) => void;
-}) {
-  return (
-    <aside className="hidden w-64 shrink-0 flex-col border-r border-zinc-200 bg-paper sm:flex">
-      <div className="p-3">
-        <button
-          type="button"
-          onClick={onNew}
-          className="flex w-full items-center justify-center gap-2 rounded-lg bg-brand px-3 py-2 text-[13.5px] font-medium text-white transition-opacity hover:opacity-90"
-        >
-          <PlusIcon /> New chat
-        </button>
-      </div>
-      <nav className="flex-1 overflow-y-auto px-2 pb-3">
-        {conversations.length === 0 ? (
-          <p className="px-2 py-4 text-[12.5px] text-zinc-400">No conversations yet.</p>
-        ) : (
-          <ul className="space-y-0.5">
-            {conversations.map((c) => (
-              <ConversationRow
-                key={c.id}
-                convo={c}
-                active={c.id === currentId}
-                onSelect={() => onSelect(c.id)}
-                onRename={(t) => onRename(c.id, t)}
-                onDelete={() => onDelete(c.id)}
-              />
-            ))}
-          </ul>
-        )}
-      </nav>
-    </aside>
+  /* ------------------------------ rendering ------------------------------ */
+
+  const localHere = local && local.conversationId === currentId ? local : null;
+  const streamingRow = messages.find(
+    (m) => m.role === "assistant" && m.status === "streaming" && !isStaleStream(m, now),
   );
-}
+  const busy = Boolean(localHere) || Boolean(streamingRow);
 
-function ConversationRow({
-  convo,
-  active,
-  onSelect,
-  onRename,
-  onDelete,
-}: {
-  convo: ConversationRow;
-  active: boolean;
-  onSelect: () => void;
-  onRename: (title: string) => void;
-  onDelete: () => void;
-}) {
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(convo.title);
-  const [confirming, setConfirming] = useState(false);
-
-  function commit() {
-    setEditing(false);
-    if (draft.trim() && draft.trim() !== convo.title) onRename(draft);
-    else setDraft(convo.title);
+  const newUserRowSynced =
+    localHere?.userText != null &&
+    messages.some((m) => m.role === "user" && !localHere.knownIds.has(m.id));
+  const newAssistantRowSynced = localHere != null && messages.some((m) => m.role === "assistant" && !localHere.knownIds.has(m.id));
+
+  const lastAssistant = [...messages].reverse().find((m) => m.role === "assistant");
+
+  // The synced row is the source of truth for when a reply ends: finished,
+  // failed, or stopped from another tab. This tab's turn ends when the row
+  // leaves "streaming", without waiting for the stream connection to close.
+  const localRow = localHere
+    ? messages.find((m) => m.role === "assistant" && !localHere.knownIds.has(m.id))
+    : undefined;
+  useEffect(() => {
+    const turn = turnRef.current;
+    if (turn && localRow && localRow.status !== "streaming") {
+      turn.stopped = true;
+      endLocal(turn);
+    }
+  }, [localRow?.status, localRow, endLocal]);
+  const empty = !currentId || (messages.length === 0 && !localHere);
+  const isExample = Boolean(current?.example);
+  const examples = conversations.filter((c) => c.example);
+
+  const { data: me } = db.useQueryOne<{ email?: string }>("User", signedInUserId ?? "__none__");
+  const account: Account = signedInUserId ? { kind: "user", email: me?.email ?? null } : { kind: "guest" };
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const pinned = useRef(true);
+  const [showJump, setShowJump] = useState(false);
+
+  function onScroll() {
+    const el = scrollRef.current;
+    if (!el) return;
+    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+    pinned.current = distance < 120;
+    setShowJump(distance > 400);
   }
 
-  if (editing) {
-    return (
-      <li>
-        <input
-          autoFocus
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={commit}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") commit();
-            if (e.key === "Escape") {
-              setDraft(convo.title);
-              setEditing(false);
-            }
-          }}
-          className="w-full rounded-lg border border-brand bg-white px-2.5 py-2 text-[13.5px] outline-none ring-2 ring-brand/20"
-        />
-      </li>
-    );
+  // Opening a conversation starts at its newest message; the new-chat screen
+  // starts at the top.
+  useEffect(() => {
+    pinned.current = !empty;
+    requestAnimationFrame(() => {
+      const el = scrollRef.current;
+      if (el) el.scrollTop = empty ? 0 : el.scrollHeight;
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentId, empty]);
+
+  const contentKey = `${messages.length}:${messages[messages.length - 1]?.content.length ?? 0}:${localHere?.text.length ?? 0}`;
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el && pinned.current) el.scrollTop = el.scrollHeight;
+  }, [contentKey]);
+
+  function jumpToBottom() {
+    const el = scrollRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
   }
 
-  return (
-    <li className="group relative">
-      <button
-        type="button"
-        onClick={onSelect}
-        className={
-          "flex w-full items-center rounded-lg py-2 pl-2.5 pr-14 text-left text-[13.5px] transition-colors " +
-          (active ? "bg-brand-soft font-medium text-brand" : "text-zinc-600 hover:bg-zinc-100")
-        }
-        title={convo.title}
-      >
-        <span className="truncate">{convo.title || "New chat"}</span>
-      </button>
-      {/* hover actions */}
-      <div className="absolute right-1.5 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 group-hover:flex">
-        {confirming ? (
-          <button
-            type="button"
-            onClick={onDelete}
-            className="rounded px-1.5 py-0.5 text-[11px] font-medium text-red-600 hover:bg-red-50"
-          >
-            Sure?
-          </button>
-        ) : (
-          <>
-            <button
-              type="button"
-              onClick={() => {
-                setDraft(convo.title);
-                setEditing(true);
-              }}
-              aria-label="Rename"
-              className="rounded p-1 text-zinc-400 hover:bg-zinc-200 hover:text-zinc-700"
-            >
-              <PencilIcon />
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                setConfirming(true);
-                setTimeout(() => setConfirming(false), 2500);
-              }}
-              aria-label="Delete"
-              className="rounded p-1 text-zinc-400 hover:bg-zinc-200 hover:text-red-600"
-            >
-              <TrashIcon />
-            </button>
-          </>
-        )}
-      </div>
-    </li>
+  const renderComposer = (ref: React.RefObject<HTMLTextAreaElement | null>, autoFocus = false) => (
+    <Composer
+      value={input}
+      onChange={setInput}
+      onSubmit={() => void send(input)}
+      onStop={() => void stop()}
+      busy={busy}
+      placeholder={chat.inputPlaceholder}
+      model={model}
+      onModelChange={changeModel}
+      isGuest={!signedInUserId}
+      autoFocus={autoFocus}
+      textareaRef={ref}
+    />
   );
-}
 
-function EmptyState({ onPick }: { onPick: (text: string) => void }) {
-  const { chat, brand } = siteConfig;
-  return (
-    <div className="flex flex-col items-center pt-[12vh] text-center">
-      <span className="flex size-12 items-center justify-center rounded-2xl bg-brand text-xl font-bold text-white">
-        {brand.letter}
-      </span>
-      <h1 className="mt-5 text-2xl font-semibold tracking-tight text-zinc-900">{chat.emptyHeadline}</h1>
-      <p className="mt-2 max-w-md text-[15px] leading-relaxed text-zinc-500">{chat.emptySubcopy}</p>
-      <div className="mt-7 grid w-full max-w-xl gap-2 sm:grid-cols-2">
-        {chat.suggestions.map((s) => (
-          <button
-            key={s}
-            type="button"
-            onClick={() => onPick(s)}
-            className="rounded-xl border border-zinc-200 bg-white px-4 py-3 text-left text-[13.5px] text-zinc-600 transition-colors hover:border-brand hover:text-zinc-900"
-          >
-            {s}
-          </button>
-        ))}
-      </div>
-    </div>
+  const sidebar = (onClose?: () => void) => (
+    <Sidebar
+      conversations={conversations}
+      currentId={currentId}
+      now={now}
+      account={account}
+      onSelect={(id) => openConversation(id)}
+      onNew={newChat}
+      onRename={(id, title) => {
+        const t = cleanTitle(title);
+        if (t) void callFn("renameConversation", { conversationId: id, title: t }).catch(() => {});
+      }}
+      onDelete={(id) => {
+        if (id === currentId) openConversation(null, "replace");
+        void callFn("deleteConversation", { conversationId: id }).catch(() => {});
+      }}
+      onSignIn={() => window.location.assign(`/login?next=${encodeURIComponent(window.location.pathname)}`)}
+      onSignOut={() => void signOut()}
+      onClose={onClose}
+    />
   );
-}
-
-function Bubble({
-  role,
-  content,
-  streaming,
-  at,
-}: {
-  role: string;
-  content: string;
-  streaming?: boolean;
-  at?: string;
-}) {
-  const { brand } = siteConfig;
-  const isUser = role === "user";
-  const [copied, setCopied] = useState(false);
-
-  async function copy() {
-    try {
-      await navigator.clipboard.writeText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      /* clipboard unavailable */
-    }
-  }
 
   return (
-    <div className={"group flex gap-3 " + (isUser ? "flex-row-reverse" : "")}>
-      <span
-        className={
-          "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold " +
-          (isUser ? "bg-zinc-200 text-zinc-600" : "bg-brand text-white")
-        }
+    <div className="flex h-[100dvh] overflow-hidden bg-bg">
+      {/* Desktop sidebar */}
+      <aside className="hidden w-[272px] shrink-0 border-r border-line bg-paper md:block">
+        {sidebar()}
+      </aside>
+
+      {/* Mobile drawer */}
+      <div
+        className={"fixed inset-0 z-40 md:hidden " + (drawerOpen ? "" : "pointer-events-none")}
+        aria-hidden={!drawerOpen}
       >
-        {isUser ? "You" : brand.letter}
-      </span>
-      <div className={"flex max-w-[80%] flex-col " + (isUser ? "items-end" : "items-start")}>
         <div
           className={
-            "rounded-2xl px-4 py-2.5 text-[14.5px] leading-relaxed " +
-            (isUser ? "whitespace-pre-wrap bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-800")
+            "absolute inset-0 bg-ink/25 backdrop-blur-[2px] transition-opacity duration-300 " +
+            (drawerOpen ? "opacity-100" : "opacity-0")
+          }
+          onClick={() => setDrawerOpen(false)}
+        />
+        <aside
+          className={
+            "drawer absolute inset-y-0 left-0 w-[86%] max-w-[320px] bg-paper shadow-float " +
+            (drawerOpen ? "translate-x-0" : "-translate-x-full")
           }
         >
-          {isUser || streaming ? (
-            <span className="whitespace-pre-wrap">{content}</span>
+          {sidebar(() => setDrawerOpen(false))}
+        </aside>
+      </div>
+
+      <main className="relative flex min-w-0 flex-1 flex-col">
+        <header className="z-10 flex h-14 shrink-0 items-center gap-2 px-3 sm:px-5">
+          <button
+            type="button"
+            onClick={() => setDrawerOpen(true)}
+            aria-label="Open sidebar"
+            className="press flex size-9 items-center justify-center rounded-xl text-ink-2 hover:bg-hover md:hidden"
+          >
+            <MenuIcon size={20} />
+          </button>
+          <div className="min-w-0 flex-1">
+            {current ? (
+              <p className="truncate text-[14.5px] font-medium text-ink">
+                {current.title}
+                {isExample ? <span className="ml-2 text-[12.5px] font-normal text-ink-3">Example</span> : null}
+              </p>
+            ) : null}
+          </div>
+          {syncStatus !== "connected" && syncStatus !== "connecting" ? (
+            <span className="rounded-full bg-hover px-2.5 py-1 text-[12px] text-ink-2">
+              {syncStatus === "reconnecting" ? "Reconnecting" : "Offline"}
+            </span>
+          ) : null}
+          <StatusChip provider={provider} model={model} onOpenSetup={() => setSetupOpen(true)} />
+          <button
+            type="button"
+            onClick={newChat}
+            aria-label="New chat"
+            className="press flex size-9 items-center justify-center rounded-xl text-ink-2 hover:bg-hover md:hidden"
+          >
+            <ComposeIcon size={19} />
+          </button>
+        </header>
+
+        <div ref={scrollRef} onScroll={onScroll} className="thread-scroll min-h-0 flex-1 overflow-y-auto">
+          {empty ? (
+            <EmptyState
+              composer={renderComposer(textareaRef, true)}
+              onPick={(p) => void send(p)}
+              providerConfigured={provider ? provider.configured : null}
+              exampleCount={examples.length}
+              onOpenExample={examples[0] ? () => openConversation(examples[0].id) : undefined}
+            />
           ) : (
-            <Markdown text={content} />
+            <div className="mx-auto w-full max-w-[46rem] px-4 pb-10 pt-4 sm:px-6 sm:pt-8">
+              <div className="space-y-9">
+                {messages.map((m) => {
+                  if (m.role === "user") return <UserMessage key={m.id} content={m.content} />;
+                  const isLast = m.id === lastAssistant?.id;
+                  const canRegenerate = isLast && !busy && !isExample;
+                  if (m.status === "streaming") {
+                    if (isStaleStream(m, now)) {
+                      return (
+                        <AssistantMessage
+                          key={m.id}
+                          content={m.content}
+                          status="interrupted"
+                          model={m.model}
+                          canRegenerate={canRegenerate}
+                          onRegenerate={regenerate}
+                        />
+                      );
+                    }
+                    if (localHere) {
+                      return (
+                        <AssistantMessage
+                          key={m.id}
+                          content={localHere.text}
+                          status="streaming"
+                          model={m.model}
+                          canRegenerate={false}
+                        />
+                      );
+                    }
+                    return <RemoteReply key={m.id} row={m} textStore={remoteText.current} />;
+                  }
+                  return (
+                    <AssistantMessage
+                      key={m.id}
+                      content={m.content}
+                      status={m.status ?? "done"}
+                      errorCode={m.errorCode}
+                      model={m.model}
+                      canRegenerate={canRegenerate}
+                      onRegenerate={regenerate}
+                      providerConfigured={provider?.configured}
+                    />
+                  );
+                })}
+                {localHere && localHere.userText != null && !newUserRowSynced ? (
+                  <UserMessage content={localHere.userText} pending />
+                ) : null}
+                {localHere && !newAssistantRowSynced ? (
+                  <AssistantMessage content={localHere.text} status="streaming" canRegenerate={false} />
+                ) : null}
+              </div>
+            </div>
           )}
-          {streaming ? <span className="ml-0.5 inline-block h-4 w-1.5 animate-pulse bg-zinc-400 align-middle" /> : null}
         </div>
-        {!streaming ? (
-          <div className={"mt-1 flex items-center gap-2 px-1 " + (isUser ? "flex-row-reverse" : "")}>
-            {at ? <span className="text-[10.5px] text-zinc-300">{relativeTime(at)}</span> : null}
-            {!isUser ? (
+
+        <div className={"composer-dock relative shrink-0 px-3 pb-3 sm:px-6 sm:pb-5 " + (empty ? "md:hidden" : "")}>
+            {showJump ? (
               <button
                 type="button"
-                onClick={copy}
-                className="text-[10.5px] text-zinc-300 opacity-0 transition-opacity hover:text-zinc-600 group-hover:opacity-100"
+                onClick={jumpToBottom}
+                aria-label="Scroll to latest"
+                className="press absolute -top-12 left-1/2 flex size-9 -translate-x-1/2 items-center justify-center rounded-full bg-surface text-ink-2 shadow-float ring-1 ring-line"
               >
-                {copied ? "Copied" : "Copy"}
+                <ArrowDownIcon size={17} />
               </button>
             ) : null}
+            <div className="mx-auto w-full max-w-[46rem]">
+              {notice ? <Notice text={notice} onDismiss={() => setNotice(null)} /> : null}
+              {isExample && !empty ? (
+                <ExampleBar onNew={newChat} />
+              ) : (
+                <>
+                  {renderComposer(empty ? dockTextareaRef : textareaRef)}
+                  <p className="mt-2 text-center text-[12px] text-ink-3">
+                    {siteConfig.brand.name} can make mistakes. Check important information.
+                  </p>
+                </>
+              )}
+            </div>
+          </div>
+        {empty && notice ? (
+          <div className="hidden shrink-0 px-3 pb-4 md:block">
+            <div className="mx-auto max-w-[46rem]">
+              <Notice text={notice} onDismiss={() => setNotice(null)} />
+            </div>
           </div>
         ) : null}
-      </div>
+      </main>
+
+      {setupOpen ? <SetupDialog onClose={() => setSetupOpen(false)} /> : null}
     </div>
   );
 }
 
-function Composer({
-  value,
-  onChange,
-  onSend,
-  disabled,
-  placeholder,
+// A reply that another tab (or this tab before a reload) is streaming.
+// Attaches to its resumable stream and shows tokens as they arrive; the row
+// itself switches to "done" when the reply is stored.
+function RemoteReply({ row, textStore }: { row: MessageRow; textStore: Map<string, string> }) {
+  const [text, setText] = useState(row.content);
+
+  useEffect(() => {
+    if (!row.streamId) return;
+    let cancelled = false;
+    let acc = "";
+    const gen = resumeStream(row.streamId);
+    (async () => {
+      try {
+        for await (const chunk of gen) {
+          if (cancelled) break;
+          acc += chunk;
+          textStore.set(row.id, acc);
+          setText(acc);
+        }
+      } catch {
+        /* the stream expired or the reply finished; the synced row takes over */
+      }
+    })();
+    return () => {
+      cancelled = true;
+      textStore.delete(row.id);
+      void gen.return(undefined);
+    };
+  }, [row.id, row.streamId, textStore]);
+
+  return <AssistantMessage content={text} status="streaming" model={row.model} canRegenerate={false} />;
+}
+
+function StatusChip({
+  provider,
   model,
-  onModelChange,
+  onOpenSetup,
 }: {
-  value: string;
-  onChange: (v: string) => void;
-  onSend: () => void;
-  disabled: boolean;
-  placeholder: string;
+  provider: ProviderStatus | null;
   model: string;
-  onModelChange: (m: string) => void;
+  onOpenSetup: () => void;
 }) {
-  const { models } = siteConfig.chat;
-  function onKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      onSend();
-    }
+  if (!provider) return null;
+  if (!provider.configured) {
+    return (
+      <button
+        type="button"
+        onClick={onOpenSetup}
+        className="press inline-flex h-8 items-center gap-2 rounded-full bg-warn-soft px-3 text-[12.5px] font-medium text-warn ring-1 ring-warn/15 transition-colors duration-200 hover:bg-warn/10"
+      >
+        <span className="size-1.5 rounded-full bg-warn" />
+        No API key
+      </button>
+    );
   }
   return (
-    <div className="border-t border-zinc-200 bg-white px-4 py-3">
-      <div className="mx-auto flex max-w-3xl items-end gap-2">
-        <textarea
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          onKeyDown={onKeyDown}
-          rows={1}
-          placeholder={placeholder}
-          aria-label="Message"
-          className="max-h-40 flex-1 resize-none rounded-2xl border border-zinc-300 bg-white px-4 py-2.5 text-[14.5px] text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
-        />
+    <span className="hidden h-8 items-center gap-2 rounded-full px-3 text-[12.5px] text-ink-2 ring-1 ring-line sm:inline-flex">
+      <span className="size-1.5 rounded-full bg-ok" />
+      {modelLabel(model)}
+    </span>
+  );
+}
+
+function Notice({ text, onDismiss }: { text: string; onDismiss: () => void }) {
+  return (
+    <div className="msg-in mb-2 flex items-start gap-3 rounded-2xl bg-warn-soft px-4 py-2.5 ring-1 ring-warn/15" role="alert">
+      <AlertIcon size={17} className="mt-0.5 shrink-0 text-warn" />
+      <p className="flex-1 text-[13.5px] leading-relaxed text-ink">{text}</p>
+      <button type="button" onClick={onDismiss} aria-label="Dismiss" className="text-ink-3 hover:text-ink">
+        <CloseIcon size={16} />
+      </button>
+    </div>
+  );
+}
+
+function ExampleBar({ onNew }: { onNew: () => void }) {
+  return (
+    <div className="bezel">
+      <div className="bezel-core flex flex-col gap-3 px-4 py-3.5 sm:flex-row sm:items-center">
+        <p className="flex-1 text-[13.5px] leading-relaxed text-ink-2">
+          This is an example conversation written for the template. No model generated it, and it is read-only.
+        </p>
         <button
           type="button"
-          onClick={onSend}
-          disabled={disabled || !value.trim()}
-          aria-label="Send"
-          className="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-brand text-white transition-opacity hover:opacity-90 disabled:opacity-40"
+          onClick={onNew}
+          className="press inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-full bg-ink px-4 text-[13.5px] font-medium text-bg transition-opacity duration-200 hover:opacity-90"
         >
-          <SendIcon />
+          <ComposeIcon size={16} />
+          New chat
         </button>
       </div>
-      <div className="mx-auto mt-1.5 flex max-w-3xl items-center justify-between gap-3">
-        <label className="flex items-center gap-1.5 text-[11px] text-zinc-400">
-          <span className="hidden sm:inline">Model</span>
-          <select
-            value={model}
-            onChange={(e) => onModelChange(e.target.value)}
-            aria-label="Model"
-            className="rounded-md border border-zinc-200 bg-white px-1.5 py-1 text-[11.5px] text-zinc-600 outline-none focus:border-brand"
-          >
-            {models.map((m) => (
-              <option key={m.id} value={m.id}>
-                {m.label} · {m.provider}
-              </option>
-            ))}
-          </select>
-        </label>
-        <span className="text-[11px] text-zinc-400">Enter to send · Shift+Enter for a new line</span>
-      </div>
     </div>
   );
 }
 
-/* --------------------------- markdown rendering --------------------------- */
-// A small, dependency-free, XSS-safe Markdown renderer for assistant replies. It
-// builds React elements directly — raw HTML is never injected into the DOM, so
-// model output can't smuggle scripts. Covers what LLMs emit most: fenced code
-// blocks, inline `code`, **bold**, *italic*, links, bullet + numbered lists,
-// headings, and paragraphs. Swap in `react-markdown` for full CommonMark/GFM.
-function Markdown({ text }: { text: string }) {
-  return <div className="space-y-2">{renderBlocks(text)}</div>;
-}
-
-function renderBlocks(text: string): React.ReactNode[] {
-  const lines = text.replace(/\r\n/g, "\n").split("\n");
-  const out: React.ReactNode[] = [];
-  let i = 0;
-  let key = 0;
-  while (i < lines.length) {
-    const line = lines[i];
-    if (line.trimStart().startsWith("```")) {
-      const lang = line.trim().slice(3).trim();
-      const code: string[] = [];
-      i++;
-      while (i < lines.length && !lines[i].trimStart().startsWith("```")) code.push(lines[i++]);
-      i++; // closing fence
-      out.push(<CodeBlock key={key++} code={code.join("\n")} lang={lang} />);
-      continue;
-    }
-    const h = line.match(/^(#{1,3})\s+(.*)$/);
-    if (h) {
-      const size = h[1].length === 1 ? "text-[17px]" : h[1].length === 2 ? "text-[15.5px]" : "text-[14.5px]";
-      out.push(
-        <p key={key++} className={`font-semibold text-zinc-900 ${size}`}>
-          {renderInline(h[2])}
-        </p>,
-      );
-      i++;
-      continue;
-    }
-    if (/^\s*[-*]\s+/.test(line)) {
-      const items: string[] = [];
-      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*[-*]\s+/, ""));
-      out.push(
-        <ul key={key++} className="ml-4 list-disc space-y-1">
-          {items.map((it, j) => (
-            <li key={j}>{renderInline(it)}</li>
-          ))}
-        </ul>,
-      );
-      continue;
-    }
-    if (/^\s*\d+\.\s+/.test(line)) {
-      const items: string[] = [];
-      while (i < lines.length && /^\s*\d+\.\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*\d+\.\s+/, ""));
-      out.push(
-        <ol key={key++} className="ml-4 list-decimal space-y-1">
-          {items.map((it, j) => (
-            <li key={j}>{renderInline(it)}</li>
-          ))}
-        </ol>,
-      );
-      continue;
-    }
-    if (line.trim() === "") {
-      i++;
-      continue;
-    }
-    const para: string[] = [];
-    while (
-      i < lines.length &&
-      lines[i].trim() !== "" &&
-      !lines[i].trimStart().startsWith("```") &&
-      !/^\s*[-*]\s+/.test(lines[i]) &&
-      !/^\s*\d+\.\s+/.test(lines[i]) &&
-      !/^#{1,3}\s+/.test(lines[i])
-    ) {
-      para.push(lines[i++]);
-    }
-    out.push(
-      <p key={key++} className="leading-relaxed">
-        {para.flatMap((ln, j) => (j === 0 ? renderInline(ln) : [<br key={`b${j}`} />, ...renderInline(ln)]))}
-      </p>,
-    );
-  }
-  return out;
-}
-
-function renderInline(text: string): React.ReactNode[] {
-  const nodes: React.ReactNode[] = [];
-  const re = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g;
-  let last = 0;
-  let key = 0;
-  for (const m of text.matchAll(re)) {
-    const idx = m.index ?? 0;
-    if (idx > last) nodes.push(text.slice(last, idx));
-    const tok = m[0];
-    if (tok.startsWith("`")) {
-      nodes.push(
-        <code key={key++} className="rounded bg-zinc-200/70 px-1 py-0.5 font-mono text-[12.5px]">
-          {tok.slice(1, -1)}
-        </code>,
-      );
-    } else if (tok.startsWith("**")) {
-      nodes.push(<strong key={key++}>{tok.slice(2, -2)}</strong>);
-    } else if (tok.startsWith("*")) {
-      nodes.push(<em key={key++}>{tok.slice(1, -1)}</em>);
-    } else {
-      const lm = tok.match(/\[([^\]]+)\]\(([^)]+)\)/);
-      if (lm) {
-        nodes.push(
-          <a key={key++} href={lm[2]} target="_blank" rel="noopener noreferrer" className="text-brand underline">
-            {lm[1]}
-          </a>,
-        );
-      }
-    }
-    last = idx + tok.length;
-  }
-  if (last < text.length) nodes.push(text.slice(last));
-  return nodes;
-}
-
-function CodeBlock({ code, lang }: { code: string; lang?: string }) {
-  const [copied, setCopied] = useState(false);
-  async function copy() {
-    try {
-      await navigator.clipboard.writeText(code);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    } catch {
-      /* ignore */
-    }
-  }
+function SetupDialog({ onClose }: { onClose: () => void }) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
   return (
-    <div className="overflow-hidden rounded-lg border border-zinc-200 bg-zinc-950">
-      <div className="flex items-center justify-between border-b border-white/10 px-3 py-1.5">
-        <span className="font-mono text-[10.5px] uppercase tracking-wide text-zinc-400">{lang || "code"}</span>
-        <button type="button" onClick={copy} className="text-[10.5px] text-zinc-400 hover:text-white">
-          {copied ? "Copied" : "Copy"}
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-3 sm:items-center sm:p-6" role="dialog" aria-modal="true" aria-label="Add a model provider key">
+      <div className="absolute inset-0 bg-ink/30 backdrop-blur-sm" onClick={onClose} />
+      <div className="dialog-in relative w-full max-w-lg">
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          className="absolute right-4 top-4 z-10 flex size-8 items-center justify-center rounded-lg text-ink-3 hover:bg-hover hover:text-ink"
+        >
+          <CloseIcon size={17} />
         </button>
+        <ProviderSetup />
       </div>
-      <pre className="overflow-x-auto p-3 text-[12.5px] leading-relaxed text-zinc-100">
-        <code className="font-mono">{code}</code>
-      </pre>
     </div>
   );
 }
 
-async function streamCompletion(
-  messages: { role: string; content: string }[],
-  model: string,
-  onDelta: (delta: string) => void,
-): Promise<void> {
-  const res = await fetch("/api/ai/stream", {
-    method: "POST",
-    headers: { "content-type": "application/json" },
-    body: JSON.stringify({ messages, model }),
-  });
-  if (!res.ok || !res.body) {
-    let code = `HTTP_${res.status}`;
-    try {
-      code = (await res.json())?.error?.code ?? code;
-    } catch {
-      /* ignore */
-    }
-    throw { code };
+async function signOut() {
+  try {
+    await getSync().signOut();
+  } catch {
+    /* the session may already be gone */
   }
-  const reader = res.body.getReader();
-  const decoder = new TextDecoder();
-  let buf = "";
-  for (;;) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    buf += decoder.decode(value, { stream: true });
-    const lines = buf.split("\n");
-    buf = lines.pop() ?? "";
-    for (const raw of lines) {
-      const line = raw.trim();
-      if (!line.startsWith("data:")) continue;
-      const data = line.slice(5).trim();
-      if (data === "[DONE]") return;
-      try {
-        const j = JSON.parse(data);
-        if (j.error) throw { code: j.error.code ?? "STREAM_ERROR" };
-        const delta = j.choices?.[0]?.delta?.content;
-        if (delta) onDelta(delta);
-      } catch (e) {
-        if ((e as { code?: string })?.code) throw e;
-        /* ignore keep-alive / partial lines */
-      }
-    }
+  try {
+    window.localStorage.removeItem(storageKey("token"));
+  } catch {
+    /* storage blocked */
   }
+  window.location.assign("/");
 }
 
-function relativeTime(iso: string): string {
-  const t = new Date(iso).getTime();
-  if (Number.isNaN(t)) return "";
-  const s = Math.max(0, Math.floor((Date.now() - t) / 1000));
-  if (s < 45) return "just now";
-  const m = Math.floor(s / 60);
-  if (m < 60) return `${m}m ago`;
-  const h = Math.floor(m / 60);
-  if (h < 24) return `${h}h ago`;
-  return `${Math.floor(h / 24)}d ago`;
-}
-
-function PlusIcon() {
+function ShellSkeleton() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" aria-hidden>
-      <path d="M12 5v14M5 12h14" />
-    </svg>
-  );
-}
-function SendIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-      <path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z" />
-    </svg>
-  );
-}
-function PencilIcon() {
-  return (
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-      <path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" />
-    </svg>
-  );
-}
-function TrashIcon() {
-  return (
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
-      <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
-    </svg>
+    <div className="flex h-[100dvh] bg-bg">
+      <aside className="hidden w-[272px] shrink-0 border-r border-line bg-paper md:block" />
+      <main className="flex-1" />
+    </div>
   );
 }