@drawnagency/primitives 0.1.87 → 0.1.89

package/src/components/chat/ChatWidget.tsx

@@ -1,65 +1,123 @@
-// Chat launcher FAB. Renders ONLY the floating button until first open; the
-// panel (and its code) loads lazily so viewers who never click pay almost
-// nothing. Browser-safe: no node imports, no process.env.
+// Chat launcher + shell chooser. Browser-safe: no node imports, no process.env.
 //
-// Two placements:
-// - "viewer" (default): bottom-right corner of viewer pages.
-// - "editor": BOTTOM of the /edit route's FAB column (edit-mode toggle at
-//   bottom-16, bug report at bottom-28 above it), aligned to the content edge
-//   via fab-container-right like its neighbors.
-import { lazy, Suspense, useState } from "react";
+// Placements:
+// - "viewer" (default): >=768px the conversation docks as a full-height right
+//   sidebar (html.bp-chat-docked shifts the page band left — see base.css);
+//   below 768px it opens as a bottom sheet. The FAB shows only while closed.
+//   Docked-open is the default and the preference persists per tab
+//   (sessionStorage, mirrored by Layout.astro's pre-paint script so the
+//   column is reserved before hydration).
+// - "editor": unchanged floating panel at the BOTTOM of the /edit route's FAB
+//   column (edit-mode toggle at bottom-16, bug report at bottom-28 above it),
+//   aligned to the content edge via fab-container-right like its neighbors.
+import { lazy, Suspense, useEffect, useRef, useState } from "react";
 import { cn } from "../../lib/cn";
 
 const ChatPanel = lazy(() => import("./ChatPanel"));
 
+const OPEN_KEY = "bp-chat-open";
+const DOCK_QUERY = "(min-width: 768px)";
+
 export interface ChatWidgetProps {
   siteName: string;
+  /** Resolved assistant display name (per-audience, resolved server-side). */
+  botName: string;
+  /** Configured waiting phrases ("…" appended in the panel). */
+  thinkingPhrases?: string[];
   /** Already audience-filtered server-side — never pass unfiltered config tasks. */
   tasks: { id: string; label: string }[];
   isEditor?: boolean;
   /** Editor-only: chat against the current (unsaved) chatbot config. */
   draftChatbot?: unknown;
   variant?: "viewer" | "editor";
+  /** Viewer's audience (null for editor sessions) — tags local chat history. */
+  audience?: string | null;
 }
 
-export default function ChatWidget({ siteName, tasks, isEditor, draftChatbot, variant = "viewer" }: ChatWidgetProps) {
+export default function ChatWidget({ siteName, botName, thinkingPhrases, tasks, isEditor, draftChatbot, variant = "viewer", audience }: ChatWidgetProps) {
   const [open, setOpen] = useState(false);
   const [everOpened, setEverOpened] = useState(false);
+  const [docked, setDocked] = useState(false);
+  const [userOpened, setUserOpened] = useState(false);
+  const fabRef = useRef<HTMLButtonElement>(null);
+  const isViewer = variant === "viewer";
+
+  // Post-hydration restore. The server renders only the FAB; Layout.astro's
+  // pre-paint script has already reserved the docked column and CSS hides the
+  // FAB under html.bp-chat-docked, so this state sync causes no layout jump.
+  useEffect(() => {
+    if (!isViewer || typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(DOCK_QUERY);
+    const apply = () => setDocked(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    let storedOpen = true; // default: sidebar open
+    try { storedOpen = window.sessionStorage.getItem(OPEN_KEY) !== "0"; } catch {}
+    if (mq.matches && storedOpen) { setOpen(true); setEverOpened(true); }
+    return () => mq.removeEventListener("change", apply);
+  }, [isViewer]);
+
+  // Reflect docked-open on <html> (drives the band shift + FAB hiding) and
+  // persist the preference. Only the docked state persists — the phone sheet
+  // always starts closed.
+  useEffect(() => {
+    if (!isViewer) return;
+    document.documentElement.classList.toggle("bp-chat-docked", open && docked);
+    if (docked) {
+      try { window.sessionStorage.setItem(OPEN_KEY, open ? "1" : "0"); } catch {}
+    }
+    return () => document.documentElement.classList.remove("bp-chat-docked");
+  }, [open, docked, isViewer]);
+
+  // Closing the sheet/sidebar returns focus to the launcher.
+  useEffect(() => {
+    if (isViewer && !open && everOpened) fabRef.current?.focus();
+  }, [open, everOpened, isViewer]);
+
+  const showFab = !isViewer || !open;
 
   return (
     <>
-      <button
-        type="button"
-        aria-label={open ? "Collapse chat" : `Chat with ${siteName}`}
-        aria-expanded={open}
-        onClick={() => { setOpen((o) => !o); setEverOpened(true); }}
-        className={cn(
-          "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
-          variant === "editor"
-            ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
-            : "bottom-4 right-4 h-12 w-12",
-        )}
-      >
-        {open ? (
-          <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="m6 9 6 6 6-6" />
-          </svg>
-        ) : (
-          <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
-          </svg>
-        )}
-      </button>
+      {showFab && (
+        <button
+          ref={fabRef}
+          type="button"
+          aria-label={open ? "Collapse chat" : `Chat with ${botName}`}
+          aria-expanded={open}
+          onClick={() => { setOpen((o) => !o); setEverOpened(true); setUserOpened(true); }}
+          className={cn(
+            "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
+            variant === "editor"
+              ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
+              : "bottom-4 h-12 w-12 viewer-fab bp-chat-fab",
+          )}
+        >
+          {open ? (
+            <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+            </svg>
+          )}
+        </button>
+      )}
       {everOpened && (
         <Suspense fallback={null}>
           <ChatPanel
             open={open}
             onClose={() => setOpen(false)}
             siteName={siteName}
+            botName={botName}
+            thinkingPhrases={thinkingPhrases}
             tasks={tasks}
             isEditor={isEditor}
             draftChatbot={draftChatbot}
             variant={variant}
+            mode={isViewer ? (docked ? "docked" : "sheet") : "floating"}
+            focusComposer={userOpened}
+            audience={audience}
           />
         </Suspense>
       )}

package/src/components/chat/chat-history.ts

@@ -0,0 +1,105 @@
+// Local-only chat history (localStorage). The ACTIVE conversation lives in
+// sessionStorage (per-tab, survives same-tab navigation — see ChatPanel);
+// this module is the durable archive behind the panel's history list.
+//
+// Retention: pinned conversations are kept forever and sort to the top;
+// unpinned ones expire after HISTORY_RETENTION_DAYS and are capped at
+// HISTORY_MAX_UNPINNED overall (not per audience — one browser is one
+// viewer in practice). Every entry is tagged with the audience it belonged
+// to, and the list only ever shows the current audience's conversations —
+// localStorage outlives the 24h audience cookie, so an expired session must
+// not expose another audience's transcripts on a shared machine.
+import type { ChatMessage } from "./ChatPanel";
+
+const HISTORY_KEY = "bp-chat-history";
+export const HISTORY_RETENTION_DAYS = 30;
+export const HISTORY_MAX_UNPINNED = 20;
+const MESSAGE_CAP = 40;
+const TITLE_MAX = 60;
+
+export interface StoredConversation {
+  id: string;
+  title: string;
+  /** Audience tag ("editor" for editor sessions on viewer pages). */
+  audience: string;
+  pinned: boolean;
+  updatedAt: number;
+  messages: ChatMessage[];
+}
+
+function isMessage(m: unknown): m is ChatMessage {
+  return !!m && typeof m === "object" &&
+    ((m as ChatMessage).role === "user" || (m as ChatMessage).role === "assistant") &&
+    typeof (m as ChatMessage).content === "string";
+}
+
+function isEntry(e: unknown): e is StoredConversation {
+  if (!e || typeof e !== "object") return false;
+  const c = e as StoredConversation;
+  return typeof c.id === "string" && typeof c.title === "string" &&
+    typeof c.audience === "string" && typeof c.pinned === "boolean" &&
+    typeof c.updatedAt === "number" && Array.isArray(c.messages) && c.messages.every(isMessage);
+}
+
+function readAll(): StoredConversation[] {
+  try {
+    const parsed: unknown = JSON.parse(window.localStorage.getItem(HISTORY_KEY) ?? "[]");
+    return Array.isArray(parsed) ? parsed.filter(isEntry) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeAll(entries: StoredConversation[]): void {
+  try {
+    window.localStorage.setItem(HISTORY_KEY, JSON.stringify(entries));
+  } catch { /* storage unavailable/full — history is best-effort */ }
+}
+
+function prune(entries: StoredConversation[], now: number): StoredConversation[] {
+  const cutoff = now - HISTORY_RETENTION_DAYS * 86_400_000;
+  const pinned = entries.filter((e) => e.pinned);
+  const unpinned = entries
+    .filter((e) => !e.pinned && e.updatedAt >= cutoff)
+    .sort((a, b) => b.updatedAt - a.updatedAt)
+    .slice(0, HISTORY_MAX_UNPINNED);
+  return [...pinned, ...unpinned];
+}
+
+/** Current audience's conversations: pinned first, then newest first. */
+export function loadHistory(audience: string, now = Date.now()): StoredConversation[] {
+  return readAll()
+    .filter((e) => e.audience === audience)
+    .filter((e) => e.pinned || e.updatedAt >= now - HISTORY_RETENTION_DAYS * 86_400_000)
+    .sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0) || b.updatedAt - a.updatedAt);
+}
+
+/** Create/refresh a conversation's archive entry (preserves its pinned flag)
+ *  and apply retention. No-ops on empty transcripts. */
+export function upsertConversation(
+  input: { id: string; audience: string; messages: ChatMessage[] },
+  now = Date.now(),
+): void {
+  const messages = input.messages.filter((m) => m.content !== "").slice(-MESSAGE_CAP);
+  if (messages.length === 0) return;
+  const all = readAll();
+  const existing = all.find((e) => e.id === input.id);
+  const firstUser = messages.find((m) => m.role === "user");
+  const entry: StoredConversation = {
+    id: input.id,
+    audience: input.audience,
+    pinned: existing?.pinned ?? false,
+    updatedAt: now,
+    title: (firstUser ?? messages[0]).content.slice(0, TITLE_MAX),
+    messages,
+  };
+  writeAll(prune([...all.filter((e) => e.id !== input.id), entry], now));
+}
+
+export function setConversationPinned(id: string, pinned: boolean): void {
+  writeAll(readAll().map((e) => (e.id === id ? { ...e, pinned } : e)));
+}
+
+export function removeConversation(id: string): void {
+  writeAll(readAll().filter((e) => e.id !== id));
+}

package/src/components/sections/Colors/index.tsx

@@ -24,6 +24,7 @@ const schema = z.object({
 
 export default defineSection({
   type: "colors",
+  interactive: true,
   category: "brand-guide",
   label: "Colors",
   icon: <Palette size={18} />,

package/src/components/sections/SectionIsland.tsx

@@ -0,0 +1,21 @@
+import { ensureSectionsRegistered } from "./register";
+import { getSection } from "../../lib/registry";
+
+// Registering on import means the registry is populated both during SSR of the
+// island and after it hydrates client-side (register runs again in the browser
+// bundle; the Symbol.for-keyed singleton dedupes).
+ensureSectionsRegistered();
+
+interface Props {
+  type: string;
+  content: unknown;
+  options?: Record<string, unknown>;
+}
+
+export default function SectionIsland({ type, content, options }: Props) {
+  const def = getSection(type);
+  if (!def) return null;
+  const Component = def.component;
+  // Viewer mode: no onChange / openModal callbacks -> the view (not editable) path.
+  return <Component content={content} options={options} isEditMode={false} />;
+}

package/src/components/shared/Navigation.tsx

@@ -18,9 +18,21 @@ interface Props {
   // Optional same-island handler (tests). In production the editor nav is a
   // separate island from EditorShell, so a click dispatches pageSelectEvent.
   onPageSelect?: (pageId: string) => void;
+  /** Viewport width where the drawer becomes a fixed sidebar. Pages that dock
+   *  the chat sidebar pass "xl" so tablet widths keep the hamburger and give
+   *  the freed column to chat. Static per page render — deliberately keyed to
+   *  chat being ENABLED, not open, so the nav never flaps when chat toggles. */
+  desktopBreakpoint?: "lg" | "xl";
 }
 
-export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, logo, onPageSelect }: Props) {
+// Both branches are literal class strings so Tailwind's scanner sees them.
+const BP_CLASSES = {
+  lg: { hidden: "lg:hidden", leftAuto: "lg:left-auto", translate: "lg:translate-x-0", block: "lg:block" },
+  xl: { hidden: "xl:hidden", leftAuto: "xl:left-auto", translate: "xl:translate-x-0", block: "xl:block" },
+} as const;
+
+export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, logo, onPageSelect, desktopBreakpoint = "lg" }: Props) {
+  const bp = BP_CLASSES[desktopBreakpoint];
   const [isOpen, setIsOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
@@ -205,7 +217,7 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
 
   return (
     <>
-      <header className="fixed top-0 left-0 right-0 z-50 bg-base lg:hidden">
+      <header className={cn("fixed top-0 left-0 right-0 z-50 bg-base", bp.hidden)}>
         <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-between px-4">
           <div className="flex flex-col items-start gap-1">
             {logoMark}
@@ -221,11 +233,12 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
         </div>
       </header>
 
-      {isOpen && <div className="fixed inset-0 z-40 bg-black/50 lg:hidden" onClick={() => setIsOpen(false)} />}
+      {isOpen && <div className={cn("fixed inset-0 z-40 bg-black/50", bp.hidden)} onClick={() => setIsOpen(false)} />}
 
-      <nav className={cn("fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
+      <nav className={cn("fixed top-0 left-0 z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform nav-sidebar",
+        bp.leftAuto, bp.translate,
         isOpen ? "translate-x-0" : "-translate-x-full")}>
-        <div className="hidden px-4 py-4 lg:block">
+        <div className={cn("hidden px-4 py-4", bp.block)}>
           {logoMark}
           <span className="text-lg font-bold text-primary">{currentSiteName}</span>
         </div>

package/src/components/shell/EditorShell.tsx

@@ -10,12 +10,17 @@ import type { SiteIndex, SiteConfig, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 import type { MediaManifest } from "../../media/types";
 import type { QueueItem } from "../../media/queue";
+import { composePreviewImage } from "../../media/compose-preview";
+import { derivePreviewInputs, servedPreviewSize } from "../../media/preview-inputs";
+import { resolveMedia } from "../../media/resolve";
+import { getMediaProvider } from "../../media";
 // Sanctioned outside->inside import: document/ is a sealed subtree, but the
 // Document mode toggle wiring needs the patch shape it edits (mirrors the same
 // sanctioned import in schemas/site-config.ts and lib/pages.ts).
 import type { DocumentOptions } from "../../document/engine/settings";
 import { SiteConfigSchema, IndexSchema } from "../../schemas/site-config";
 import { ensureSanitizer } from "../../lib/sanitize";
+import { resolveChatbotName } from "../../lib/chatbot";
 import { EditorProvider, useEditorContext, type HistoryState } from "./EditorContext";
 import { makeBlockMoveDispatch } from "./blockMoveDispatch";
 import { ROOT_CONTAINER_ID, resolveDropIndex } from "../../lib/block-dnd";
@@ -240,6 +245,15 @@ export default function EditorShell({
   useEffect(() => { sectionsRef.current = sections; }, [sections]);
   useEffect(() => { siteIndexRef.current = siteIndex; }, [siteIndex]);
   useEffect(() => { void ensureSanitizer(); }, []);
+  // Mirrors siteConfig so the async preview-image upload callback (below)
+  // writes onto the latest config instead of a stale closure.
+  const siteConfigRef = useRef<SiteConfig | null>(siteConfig);
+  useEffect(() => { siteConfigRef.current = siteConfig; }, [siteConfig]);
+  // Guards the debounced preview-image composition effect (below): skips
+  // recomposing on the very first run when a preview already exists, and
+  // dedupes concurrent runs against the same composition signature.
+  const previewInitializedRef = useRef(false);
+  const lastPreviewSigRef = useRef<string | null>(null);
 
   // --- Collaboration refs ---
   // Freshest dirty-section set for the inbound remote-section handler (never
@@ -1332,6 +1346,60 @@ export default function EditorShell({
     setLocalChangesExist(true);
   }, [applySiteConfigPreview, persistence]);
 
+  // Recompose the social-preview raster (siteConfig.previewImage) when brand
+  // inputs change. Debounced so text edits don't compose per keystroke. The
+  // new previewImage rides the next normal save like any other config change.
+  useEffect(() => {
+    if (!siteConfig) return;
+    const resolveLogoUrl = (imageId: string): string | null => {
+      const pending = mediaPipeline.pendingLocalUrls[imageId];
+      if (pending) return pending;
+      const resolved = resolveMedia({ imageId }, mediaManifest, [1200], getMediaProvider());
+      return resolved?.src ?? null;
+    };
+    const { inputs, signature } = derivePreviewInputs(siteConfig, resolveLogoUrl);
+
+    // On first run: if a preview already exists, seed the signature and skip
+    // (don't recompose/re-upload on every editor open). If none exists yet,
+    // fall through to compose one. Subsequent runs recompose only on change.
+    if (!previewInitializedRef.current) {
+      previewInitializedRef.current = true;
+      if (siteConfig.previewImage) {
+        lastPreviewSigRef.current = signature;
+        return;
+      }
+    }
+    if (signature === lastPreviewSigRef.current) return;
+
+    const timer = setTimeout(() => {
+      lastPreviewSigRef.current = signature; // guard against duplicate concurrent runs
+      (async () => {
+        try {
+          const blob = await composePreviewImage(inputs);
+          const file = new File([blob], "site-preview.webp", { type: "image/webp" });
+          const { width, height } = servedPreviewSize(siteConfigRef.current!.media.sizes);
+          mediaPipeline.contextValue.uploadFileWithCallback(file, (imageId) => {
+            handleSiteConfigChange({ ...siteConfigRef.current!, previewImage: { imageId, width, height } });
+          }, { hidden: true });
+        } catch (err) {
+          console.error("[EditorShell] preview-image composition failed:", err);
+          // Composition/upload failed — un-mark the signature so the next effect
+          // run (next brand-input change, or this same one on remount) retries
+          // instead of being permanently skipped as "already done".
+          lastPreviewSigRef.current = null;
+        }
+      })();
+    }, 900);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    siteConfig?.logo,
+    siteConfig?.primaryColor,
+    siteConfig?.siteName,
+    siteConfig?.headingFont,
+    siteConfig?.darkMode,
+  ]);
+
   const handleHistoryRestore = useCallback(async (historyContent: {
     sections: LoadedSection[];
     index: SiteIndex;
@@ -1512,6 +1580,8 @@ export default function EditorShell({
           {chatbotPlatformEnabled && siteConfig && (
             <ChatWidget
               siteName={siteConfig.siteName}
+              botName={resolveChatbotName(siteConfig.chatbot, null)}
+              thinkingPhrases={siteConfig.chatbot.thinkingPhrases}
               tasks={siteConfig.chatbot.tasks.map((t) => ({ id: t.id, label: t.label }))}
               isEditor
               draftChatbot={siteConfig.chatbot}
@@ -1628,7 +1698,7 @@ export default function EditorShell({
               items={[
                 ...Object.values(mediaManifest.images),
                 ...mediaPipeline.pendingMediaItems,
-              ].filter((item) => !mediaPipeline.pendingDeletions.includes(item.id))}
+              ].filter((item) => !mediaPipeline.pendingDeletions.includes(item.id) && !item.hidden)}
               onSelect={(id) => {
                 if (mediaSelectCallback) {
                   mediaSelectCallback(id);

package/src/components/shell/MediaLibraryContext.tsx

@@ -5,7 +5,7 @@ import type { SiteConfig } from "../../schemas/site-config";
 export interface MediaLibraryContextValue {
   openSelectModal: (onSelect: (imageId: string) => void) => void;
   uploadFile: (file: File) => void;
-  uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void) => string;
+  uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void, opts?: { hidden?: boolean }) => string;
   reportRejectedUploads: (files: { name: string; reason: "size" | "type" }[]) => void;
   manifest: MediaManifest;
   pendingItems: MediaItem[];

package/src/components/shell/SiteSettingsChatbot.tsx

@@ -5,6 +5,17 @@ import ChatPanel from "../chat/ChatPanel";
 import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 import { audiencePasses } from "../../lib/pages";
+import { resolveChatbotName, DEFAULT_CHATBOT_NAME } from "../../lib/chatbot";
+
+/** Comma-separated textarea → schema list: trimmed, blanks dropped, clamped
+ *  to the schema caps (30 phrases × 80 chars). */
+function parseThinkingPhrases(text: string): string[] {
+  return text
+    .split(",")
+    .map((s) => s.trim().slice(0, 80))
+    .filter(Boolean)
+    .slice(0, 30);
+}
 
 interface Props {
   siteConfig: SiteConfig;
@@ -38,6 +49,9 @@ export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences,
   const [newTaskLabel, setNewTaskLabel] = useState("");
   const [showTest, setShowTest] = useState(false);
   const [previewAudience, setPreviewAudience] = useState("");
+  // Local text mirror of thinkingPhrases: parsing on every keystroke while
+  // round-tripping through the array would fight trailing commas/spaces.
+  const [thinkingText, setThinkingText] = useState(() => (chatbot.thinkingPhrases ?? []).join(", "));
 
   // A deselected audience can no longer chat — never keep simulating it.
   useEffect(() => {
@@ -77,6 +91,10 @@ export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences,
     const v = chatbot.audiencePrompts[name];
     return typeof v === "string" ? v : "";
   };
+  const audienceNameValue = (name: string) => {
+    const v = chatbot.audienceNames?.[name];
+    return typeof v === "string" ? v : "";
+  };
 
   return (
     <div className="flex flex-col gap-4">
@@ -94,12 +112,39 @@ export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences,
         Show the chat widget to viewers
       </label>
 
+      <div>
+        <label htmlFor="chatbot-name" className="mb-1 block text-sm font-medium text-base-contrast">Assistant name</label>
+        <input id="chatbot-name" aria-label="Assistant name" maxLength={60} value={chatbot.name}
+          onChange={(e) => patch({ name: e.target.value })}
+          placeholder={DEFAULT_CHATBOT_NAME}
+          className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+        <p className="mt-1 text-xs text-base-contrast-light">Shown in the widget header. Leave blank for “{DEFAULT_CHATBOT_NAME}”. Audiences can override it below.</p>
+      </div>
+
+      <div>
+        <label htmlFor="chatbot-thinking-phrases" className="mb-1 block text-sm font-medium text-base-contrast">Thinking phrases</label>
+        <textarea id="chatbot-thinking-phrases" aria-label="Thinking phrases" rows={2}
+          value={thinkingText}
+          onChange={(e) => { setThinkingText(e.target.value); patch({ thinkingPhrases: parseThinkingPhrases(e.target.value) }); }}
+          placeholder="Mixing the palette, Checking the guide, Consulting the brand book"
+          className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+        <p className="mt-1 text-xs text-base-contrast-light">Comma-separated; one is shown at random while the assistant thinks, with “…” added automatically. Leave blank for “Thinking…”.</p>
+      </div>
+
       <div>
         <p className="mb-1 text-sm font-medium text-base-contrast">Audiences</p>
         <p className="mb-2 text-xs text-base-contrast-light">Who sees the widget — only the selected audiences; none selected means no one.</p>
         <AudienceChips audiences={audiences} selected={chatbot.audiences} onToggle={(n) => patch({ audiences: toggleName(chatbot.audiences, n) })} />
         {chatbot.audiences.map((name) => (
           <div key={name} className="mt-2">
+            <label htmlFor={`audience-name-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
+              Assistant name for {name}
+            </label>
+            <input id={`audience-name-${name}`} aria-label={`Assistant name for ${name}`} maxLength={60}
+              value={audienceNameValue(name)}
+              onChange={(e) => patch({ audienceNames: { ...chatbot.audienceNames, [name]: e.target.value } })}
+              placeholder={resolveChatbotName(chatbot, null)}
+              className="mb-1 w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
             <label htmlFor={`audience-prompt-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
               Additional guidance for {name}
             </label>
@@ -175,6 +220,8 @@ export function SiteSettingsChatbot({ siteConfig, onSiteConfigChange, audiences,
         {showTest && platformEnabled && (
           <ChatPanel
             open onClose={() => setShowTest(false)} siteName={siteConfig.siteName}
+            botName={resolveChatbotName(chatbot, previewAudience || null)}
+            thinkingPhrases={chatbot.thinkingPhrases}
             tasks={chatbot.tasks
               .filter((t) => previewAudience === "" || audiencePasses(t.access, previewAudience))
               .map((t) => ({ id: t.id, label: t.label }))}

package/src/hooks/useCollabSession.ts

@@ -5,6 +5,13 @@ import type {
 } from "../collab/types";
 
 const REJOIN_DELAYS_MS = [5_000, 15_000, 30_000, 60_000];
+// Circuit breaker: after this many consecutive failed rejoins (~3.5 min of
+// backoff), stop the auto-rejoin loop and stay in solo mode rather than retry
+// forever — an unbounded reconnect loop is itself a way to hammer the backend.
+// Refocusing the tab (visibilitychange → visible) resets the breaker and
+// retries, so a user returning to a long-idle/offline tab reconnects without a
+// manual reload.
+const MAX_REJOIN_ATTEMPTS = 6;
 
 export interface UseCollabSessionArgs {
   provider: CollabProvider | null;
@@ -129,14 +136,34 @@ export function useCollabSession(args: UseCollabSessionArgs): UseCollabSessionRe
       // race two concurrent joins into two sessions, and the orphaned timer
       // would survive unmount (the cleanup only clears the tracked one).
       if (timer) clearTimeout(timer);
+      // Circuit breaker: give up after a capped number of consecutive failures
+      // rather than rejoin forever. onVisible() below rearms it on refocus.
+      if (attempt >= MAX_REJOIN_ATTEMPTS) {
+        console.warn(`Collab: stopped auto-rejoining after ${attempt} consecutive failures; staying solo until the tab is refocused.`);
+        return;
+      }
       const delay = REJOIN_DELAYS_MS[Math.min(attempt, REJOIN_DELAYS_MS.length - 1)];
       attempt += 1;
       timer = setTimeout(() => { timer = null; void join(); }, delay);
     }
 
+    // Rearm the breaker (and reconnect immediately) when the user tabs back to
+    // a disconnected editor — the common recovery from a laptop-sleep / network
+    // blip that exhausted the rejoin budget. No-op while already live/connecting.
+    function onVisible() {
+      if (cancelled) return;
+      if (typeof document !== "undefined" && document.visibilityState !== "visible") return;
+      if (sessionRef.current || joining) return;
+      if (timer) { clearTimeout(timer); timer = null; }
+      attempt = 0;
+      void join();
+    }
+    if (typeof document !== "undefined") document.addEventListener("visibilitychange", onVisible);
+
     void join();
     return () => {
       cancelled = true;
+      if (typeof document !== "undefined") document.removeEventListener("visibilitychange", onVisible);
       if (timer) clearTimeout(timer);
       void sessionRef.current?.disconnect().catch(() => {});
       sessionRef.current = null;

package/src/hooks/useMediaPipeline.ts

@@ -76,6 +76,7 @@ export function useMediaPipeline({
   // Display-folder target per in-flight upload, keyed by content hash. Set at
   // enqueue time, consumed when the processing queue finalizes the item.
   const uploadTargetsRef = useRef<Map<string, string | null>>(new Map());
+  const hiddenUploadsRef = useRef<Map<string, boolean>>(new Map());
   const destroyedRef = useRef(false);
 
   // Shared persistence path for every pending media item — the processing
@@ -171,10 +172,12 @@ export function useMediaPipeline({
               alt: "",
               storage: "github",
               ...(targetFolderId ? { folderId: targetFolderId } : {}),
+              ...(hiddenUploadsRef.current.get(event.item.hash) ? { hidden: true } : {}),
             };
 
             const persisted = await finalizePendingMedia(item, localUrls, blobsMap);
             uploadTargetsRef.current.delete(event.item.hash);
+            hiddenUploadsRef.current.delete(event.item.hash);
             if (!persisted) return;
 
             const callback = uploadCallbacksRef.current.get(event.item.hash);
@@ -603,7 +606,7 @@ export function useMediaPipeline({
 
   // --- Unified enqueue ---
 
-  const enqueueFile = useCallback((file: File, onComplete?: (imageId: string) => void) => {
+  const enqueueFile = useCallback((file: File, onComplete?: (imageId: string) => void, opts?: { hidden?: boolean }) => {
     if (!siteConfig) return;
     const mediaConfig = siteConfig.media;
     if (file.size > mediaConfig.maxFileSize) return;
@@ -627,6 +630,7 @@ export function useMediaPipeline({
         if (onComplete) {
           uploadCallbacksRef.current.set(hash, onComplete);
         }
+        if (opts?.hidden) hiddenUploadsRef.current.set(hash, true);
 
         let kind: "image" | "animated" | "video" = "image";
         if (file.type === "image/gif" || file.type === "image/apng") kind = "animated";
@@ -646,12 +650,12 @@ export function useMediaPipeline({
       // Placeholder — EditorShell overrides this
     },
     uploadFile: (file: File) => handleMediaUpload([file]),
-    uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void) => {
+    uploadFileWithCallback: (file: File, onComplete: (imageId: string) => void, opts?: { hidden?: boolean }) => {
       const blobUrl = URL.createObjectURL(file);
       enqueueFile(file, (imageId) => {
         URL.revokeObjectURL(blobUrl);
         onComplete(imageId);
-      });
+      }, opts);
       return blobUrl;
     },
     reportRejectedUploads: () => {