create-pyric 0.1.0-alpha.21 → 0.1.0-alpha.24

package/templates/chat/src/ui/chat/chat-format.ts

@@ -0,0 +1,8 @@
+import type { UiUser } from './chat-types';
+
+/** The initials shown in an avatar for a user, or for "You" when there is none. */
+export const initials = (user: UiUser | null): string =>
+  (user?.displayName ?? user?.email ?? 'You').split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
+
+/** A short local time for a conversation or message timestamp. */
+export const formatTime = (date?: Date): string => date ? new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date) : '';

package/templates/chat/src/ui/chat/chat-page.tsx

@@ -4,21 +4,18 @@ import * as jsxRuntime from 'react/jsx-runtime';
 import * as jsxDevRuntime from 'react/jsx-dev-runtime';
 import { createElement, isValidElement, type ComponentType } from 'react';
 import { createPortal } from 'react-dom';
-import { ArrowUp, Bell, Check, CheckCircle2, ChevronsUpDown, Code2, Copy, LoaderCircle, LogIn, LogOut, MessageSquarePlus, PanelLeftClose, PanelLeftOpen, Square, TerminalSquare, Trash2, XCircle } from 'lucide-react';
+import { useListenerOwner, type ListenerOwner } from '@pyric/ui/listener-owner';
+import { ArrowUp, Bell, Code2, MessageSquarePlus, PanelLeftClose, Square, XCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from '@/components/ui/message';
-import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';
-import type { ChatPageServices, UiConversation, UiMessage, UiNotification, UiPresence, UiToolCall, UiUsage, UiUser } from './chat-types';
+import type { ChatPageServices, UiConversation, UiMessage, UiNotification, UiPresence, UiUser } from './chat-types';
 import type { ChatMode } from '../../chat-mode';
-import { MarkdownMessage } from './markdown-message';
+import { ConversationHeader } from './conversation-header';
+import { ConversationList } from './conversation-list';
+import { MessageThread } from './message-thread';
+import { PresenceBar } from './presence-bar';
 import { storePreviewComponent } from './preview-component-state';
 import { reconcileMessages, starterMessages } from './message-reconciliation';
 
-const initials = (user: UiUser | null): string =>
-  (user?.displayName ?? user?.email ?? 'You').split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
-
-const formatTime = (date?: Date): string => date ? new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date) : '';
 const errorMessage = (reason: unknown, fallback: string): string => reason instanceof Error ? reason.message : fallback;
 const isAbort = (reason: unknown): boolean => reason instanceof DOMException && reason.name === 'AbortError';
 const modeOptions: Array<{ id: ChatMode; label: string; description: string; placeholder: string }> = [
@@ -36,114 +33,6 @@ const writeConversationUrl = (conversationId: string | null, replace = false): v
   window.history[replace ? 'replaceState' : 'pushState']({}, '', `${url.pathname}${url.search}${url.hash}`);
 };
 
-function CopyMessageButton({ text }: { text: string }) {
-  const [copied, setCopied] = useState(false);
-
-  const copy = async () => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1600);
-    } catch {
-      setCopied(false);
-    }
-  };
-
-  return (
-    <Button variant="ghost" size="icon-xs" aria-label={copied ? 'Message copied' : 'Copy message'} title={copied ? 'Message copied' : 'Copy message'} onClick={() => void copy()} disabled={!text}>
-      {copied ? <Check /> : <Copy />}
-    </Button>
-  );
-}
-
-function StartPlanCard({ onStart, onDecline, onSendDirection }: { onStart: () => void; onDecline: () => void; onSendDirection: (direction: string) => void }) {
-  const [editing, setEditing] = useState(false);
-  const [direction, setDirection] = useState('');
-
-  const sendDirection = () => {
-    const value = direction.trim();
-    if (!value) return;
-    onSendDirection(value);
-  };
-
-  return (
-    <section aria-label="Start plan" className="mt-2 max-w-full rounded-lg border border-primary/30 bg-primary/5 p-3">
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="text-sm font-medium">Ready to start the plan?</p>
-          <p className="mt-1 text-xs leading-5 text-muted-foreground">PyChat can turn this direction into the first actionable step.</p>
-        </div>
-        <span className="shrink-0 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary">Plan</span>
-      </div>
-      {editing && <textarea value={direction} onChange={(event) => setDirection(event.target.value)} onKeyDown={(event) => { if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') sendDirection(); }} autoFocus rows={2} placeholder="Tell PyChat what to change…" aria-label="What should PyChat change?" className="mt-3 w-full resize-y rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50" />}
-      <div className="mt-3 flex flex-wrap items-center gap-2">
-        <Button size="sm" onClick={onStart}>Start plan</Button>
-        {editing ? <Button size="sm" variant="secondary" onClick={sendDirection} disabled={!direction.trim()}>Send direction</Button> : <Button size="sm" variant="outline" onClick={() => setEditing(true)}>Tell PyChat what to change</Button>}
-        <Button size="sm" variant="ghost" onClick={onDecline}>Decline</Button>
-      </div>
-    </section>
-  );
-}
-
-function ToolActivity({ calls }: { calls: UiToolCall[] }) {
-  if (!calls.length) return null;
-  return (
-    <Collapsible className="mb-1 min-w-0 w-full max-w-full rounded-lg border bg-background/40 px-3 py-2">
-      <div className="flex items-center justify-between gap-3">
-        <span className="flex min-w-0 items-center gap-2 text-xs font-medium text-muted-foreground"><TerminalSquare className="size-3.5 shrink-0" /> Workspace activity <span className="font-normal">· {calls.length}</span></span>
-        <CollapsibleTrigger render={<Button variant="ghost" size="icon" className="size-7" />} aria-label="Toggle workspace activity"><ChevronsUpDown /></CollapsibleTrigger>
-      </div>
-      <CollapsibleContent className="space-y-1.5 pt-2">
-        {calls.map((call) => <div key={call.id} className="flex min-w-0 items-center gap-2 text-xs"><span className="shrink-0 text-muted-foreground">{call.status === 'running' ? <LoaderCircle className="size-3.5 animate-spin" /> : call.status === 'complete' ? <CheckCircle2 className="size-3.5 text-primary" /> : <XCircle className="size-3.5 text-destructive" />}</span><span className="truncate font-mono">{call.name}</span><span className="truncate text-muted-foreground">{call.summary ?? (call.status === 'running' ? 'Running…' : '')}</span></div>)}
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
-
-function UsageSummary({ usage }: { usage?: UiUsage }) {
-  if (!usage) return null;
-  const total = usage.inputTokens + usage.outputTokens;
-  return <span className="inline-flex items-center gap-1.5"><span>{total.toLocaleString()} tokens</span>{usage.reasoningTokens ? <span>· {usage.reasoningTokens.toLocaleString()} thinking</span> : null}</span>;
-}
-
-function ThoughtsDisclosure({ thoughts, streaming }: { thoughts: string; streaming: boolean }) {
-  return (
-    <Collapsible defaultOpen={streaming} className="mb-1 min-w-0 w-full max-w-full rounded-lg border border-dashed bg-muted/30 px-3 py-2">
-      <div className="flex items-center justify-between gap-3">
-        <span className="text-xs font-medium text-muted-foreground">Thoughts</span>
-        <CollapsibleTrigger render={<Button variant="ghost" size="icon" className="size-7" />} aria-label="Toggle thoughts">
-          <ChevronsUpDown />
-        </CollapsibleTrigger>
-      </div>
-      <CollapsibleContent className="pt-2">
-        <MarkdownMessage content={thoughts} className="max-w-full text-xs leading-5 text-muted-foreground" />
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
-
-function StreamingFollow({ revision, streaming }: { revision: string; streaming: boolean }) {
-  const { end } = useMessageScrollerScrollable();
-  const { scrollToEnd } = useMessageScroller();
-  const followingRef = useRef(true);
-
-  useEffect(() => {
-    if (!streaming) {
-      followingRef.current = true;
-      return;
-    }
-    if (!end) followingRef.current = false;
-  }, [end, streaming]);
-
-  useEffect(() => {
-    if (!streaming || !followingRef.current) return;
-    const frame = window.requestAnimationFrame(() => scrollToEnd());
-    return () => window.cancelAnimationFrame(frame);
-  }, [revision, scrollToEnd, streaming]);
-
-  return null;
-}
-
 class PreviewErrorBoundary extends React.Component<{ children: React.ReactNode }, { error: string | null }> {
   state: { error: string | null } = { error: null };
   static getDerivedStateFromError(error: unknown) {
@@ -245,6 +134,20 @@ export function ChatPage({ services }: ChatPageProps) {
   useEffect(() => { messagesRef.current = messages; }, [messages]);
   useEffect(() => { activeConversationIdRef.current = activeConversationId; }, [activeConversationId]);
 
+  // The React component that owns these listeners, captured during render.
+  // In a production build the hook returns no owner and reads no stack, so
+  // each listener falls back to the name of the UI region it feeds.
+  const { owner: componentOwner } = useListenerOwner();
+  // The element each listener feeds, so the sandbox can outline it on the page.
+  const presenceRef = useRef<HTMLDivElement | null>(null);
+  const conversationListRef = useRef<HTMLElement | null>(null);
+  const conversationHeaderRef = useRef<HTMLElement | null>(null);
+  const messageThreadRef = useRef<HTMLDivElement | null>(null);
+  const ownerFor = (region: string, element: Element | null): string | ListenerOwner => {
+    if (!componentOwner) return region;
+    return element ? { ...componentOwner, element } : componentOwner;
+  };
+
   useEffect(() => {
     setAuthLoading(true);
     return services.auth.observe((nextUser) => {
@@ -258,7 +161,7 @@ export function ChatPage({ services }: ChatPageProps) {
       setOnline([]);
       return;
     }
-    const unsubscribe = services.presence.observe(setOnline);
+    const unsubscribe = services.presence.observe(setOnline, { owner: ownerFor('presence-bar', presenceRef.current) });
     let alive = true;
     if (typeof Notification !== 'undefined' && Notification.permission === 'granted') {
       void services.notifications.enable((message) => {
@@ -315,7 +218,7 @@ export function ChatPage({ services }: ChatPageProps) {
     void services.conversations.list().then(applyList).catch((reason: unknown) => {
       if (alive) { setError(errorMessage(reason, 'Could not load conversations')); setConversationLoading(false); }
     });
-    const unsubscribe = services.conversations.observeList(applyList);
+    const unsubscribe = services.conversations.observeList(applyList, { owner: ownerFor('conversation-list', conversationListRef.current) });
     return () => { alive = false; unsubscribe(); };
   }, [deletingConversationId, services, user]);
 
@@ -334,10 +237,10 @@ export function ChatPage({ services }: ChatPageProps) {
       if (!alive) return;
       setMessages((current) => reconcileMessages(nextMessages, current));
       setMessageLoading(false);
-    });
+    }, { owner: ownerFor('message-thread', messageThreadRef.current) });
     const unsubscribeConversation = services.conversations.observe(activeConversationId, (conversation) => {
       setConversations((current) => current.map((item) => item.id === conversation.id ? conversation : item));
-    });
+    }, { owner: ownerFor('conversation-header', conversationHeaderRef.current) });
     return () => { alive = false; unsubscribeMessages(); unsubscribeConversation(); };
   }, [activeConversationId, services, user]);
 
@@ -519,13 +422,13 @@ export function ChatPage({ services }: ChatPageProps) {
       <aside className={`${sidebarOpen ? 'w-72' : 'w-0'} absolute inset-y-0 start-0 z-20 flex shrink-0 flex-col overflow-hidden border-e bg-card shadow-xl transition-[width] duration-200 sm:relative sm:inset-auto sm:z-auto sm:shadow-none`}>
         <div className="flex h-16 items-center justify-between border-b px-4"><div><p className="text-sm font-semibold tracking-tight">PyChat</p><p className="text-xs text-muted-foreground">Private AI workspace</p></div><Button variant="ghost" size="icon" aria-label="Close conversation sidebar" onClick={() => setSidebarOpen(false)}><PanelLeftClose /></Button></div>
         <div className="p-3"><Button className="w-full justify-start gap-2" variant="outline" onClick={() => void startConversation()} disabled={!user || streaming}><MessageSquarePlus /> New conversation</Button></div>
-        <nav aria-label="Conversations" className="flex-1 space-y-1 overflow-y-auto px-2">{conversations.map((conversation) => <div key={conversation.id} className={`group flex items-center gap-1 rounded-lg text-sm transition-colors ${conversation.id === activeConversationId ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'}`}><button className="min-w-0 flex-1 px-3 py-2 text-start" onClick={() => selectConversation(conversation.id)}><span className="block truncate font-medium">{conversation.title}</span><span className="mt-0.5 block text-xs opacity-70">{conversation.updatedAt ? formatTime(conversation.updatedAt) : 'Just now'}</span></button><Button variant="ghost" size="icon" className="me-1 size-8 shrink-0 sm:opacity-0 sm:transition-opacity sm:group-hover:opacity-100 focus-visible:opacity-100" aria-label={`Delete conversation ${conversation.title}`} disabled={deletingConversationId !== null} onClick={() => void deleteConversation(conversation.id)}><Trash2 /></Button></div>)}{!conversations.length && !conversationLoading && <p className="px-3 py-8 text-center text-xs text-muted-foreground">No conversations yet. Start one to develop an idea.</p>}</nav>
-        <div className="border-t p-3">{user ? <div className="flex items-center gap-2"><div className="relative shrink-0"><div className="grid size-8 place-items-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">{initials(user)}</div><span className="absolute -end-0.5 -bottom-0.5 size-2.5 rounded-full border-2 border-card bg-emerald-500" aria-hidden="true" /></div><div className="min-w-0 flex-1"><p className="truncate text-sm font-medium">{user.displayName ?? 'Signed in'}</p><p className="truncate text-xs text-muted-foreground">{online.length} online · {user.email}</p></div><Button variant="ghost" size="icon" aria-label="Sign out" onClick={() => void signOut()}><LogOut /></Button></div> : <Button className="w-full gap-2" onClick={() => void signIn()} disabled={authLoading}><LogIn /> Sign in to continue</Button>}</div>
+        <ConversationList ref={conversationListRef} conversations={conversations} activeConversationId={activeConversationId} deletingConversationId={deletingConversationId} loading={conversationLoading} onSelect={selectConversation} onDelete={(id) => void deleteConversation(id)} />
+        <PresenceBar ref={presenceRef} user={user} onlineCount={online.length} authLoading={authLoading} onSignIn={() => void signIn()} onSignOut={() => void signOut()} />
       </aside>
       <section className="flex min-w-0 flex-1 flex-col">
-        <header className="flex h-16 shrink-0 items-center gap-3 border-b px-4 sm:px-6">{!sidebarOpen && <Button variant="ghost" size="icon" aria-label="Open conversation sidebar" onClick={() => setSidebarOpen(true)}><PanelLeftOpen /></Button>}<div className="min-w-0 flex-1"><p className="truncate text-sm font-semibold">{activeConversation?.title ?? 'New conversation'}</p><p className="text-xs text-muted-foreground">Private thinking space · {modeOptions.find((option) => option.id === mode)?.label}</p></div><Button variant={notificationsEnabled ? 'secondary' : 'ghost'} size="icon" aria-label={notificationsEnabled ? 'Send test notification' : 'Enable notifications'} title={notificationsEnabled ? 'Send test notification' : 'Enable notifications'} disabled={!user || notificationsBusy} onClick={() => void enableNotifications()}>{notificationsBusy ? <LoaderCircle className="animate-spin" /> : <Bell />}</Button><Button variant={workspaceOpen ? 'secondary' : 'ghost'} size="icon" aria-label={workspaceOpen ? 'Workspace open' : 'Open workspace'} title="Open workspace" onClick={() => setWorkspaceOpen((open) => !open)}><Code2 /></Button></header>
+        <ConversationHeader ref={conversationHeaderRef} title={activeConversation?.title ?? 'New conversation'} modeLabel={modeOptions.find((option) => option.id === mode)?.label} sidebarOpen={sidebarOpen} onOpenSidebar={() => setSidebarOpen(true)} notificationsEnabled={notificationsEnabled} notificationsBusy={notificationsBusy} notificationsDisabled={!user || notificationsBusy} onEnableNotifications={() => void enableNotifications()} workspaceOpen={workspaceOpen} onToggleWorkspace={() => setWorkspaceOpen((open) => !open)} />
         {notice && <div role="status" className="chat-message-in border-b bg-primary/5 px-4 py-2.5 sm:px-6"><div className="mx-auto flex max-w-3xl items-start gap-3"><Bell className="mt-0.5 size-4 shrink-0 text-primary" /><div className="min-w-0 flex-1"><p className="truncate text-sm font-medium">{notice.title}</p>{notice.body && <p className="truncate text-xs text-muted-foreground">{notice.body}</p>}</div><Button variant="ghost" size="icon-xs" aria-label="Dismiss notification" onClick={() => setNotice(null)}><XCircle /></Button></div></div>}
-        <MessageScrollerProvider autoScroll><MessageScroller className="min-h-0 flex-1"><StreamingFollow revision={messageRevision} streaming={streaming} /><MessageScrollerViewport className="px-4 py-8 sm:px-8"><MessageScrollerContent className="mx-auto w-full max-w-3xl gap-8"><MessageScrollerItem messageId="intro" scrollAnchor={messages.length <= 1}><div className="mx-auto max-w-xl py-16 text-center"><div className="mx-auto mb-5 grid size-12 place-items-center rounded-2xl bg-primary text-primary-foreground shadow-sm"><span className="text-lg">✦</span></div><h1 className="text-2xl font-semibold tracking-tight">A clearer place to think.</h1><p className="mt-2 text-sm leading-6 text-muted-foreground">Explore possibilities, turn ideas into plans, or pressure-test a direction. Your context stays with you across conversations.</p></div></MessageScrollerItem><MessageGroup className="gap-8">{messages.map((message, index) => <MessageScrollerItem key={message.id} messageId={message.id} scrollAnchor={message.role === 'user'} className="chat-message-in" style={{ animationDelay: `${Math.min(index * 35, 350)}ms` }}><Message align={message.role === 'user' ? 'end' : 'start'}><MessageAvatar className={message.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'}><span className="grid size-8 place-items-center text-xs font-semibold">{message.role === 'user' ? initials(user) : '✦'}</span></MessageAvatar><MessageContent className={message.role === 'assistant' ? 'w-full max-w-[min(42rem,78%)]' : 'w-fit max-w-[min(42rem,78%)]'}><MessageHeader>{message.role === 'user' ? 'You' : 'PyChat'}</MessageHeader>{message.role === 'assistant' && message.toolCalls && <ToolActivity calls={message.toolCalls} />}{message.role === 'assistant' && message.thoughts && <ThoughtsDisclosure thoughts={message.thoughts} streaming={message.status === 'streaming'} />}<div className={`w-fit max-w-full rounded-xl px-4 py-3 leading-7 shadow-sm ${message.role === 'user' ? 'bg-primary text-primary-foreground' : 'border-transparent bg-muted text-foreground'}`}>{message.text ? message.role === 'assistant' ? <MarkdownMessage content={message.text} /> : <p className="whitespace-pre-wrap text-sm">{message.text}</p> : <span className="inline-flex gap-1 text-muted-foreground"><i className="size-1.5 animate-pulse rounded-full bg-current" /><i className="size-1.5 animate-pulse rounded-full bg-current [animation-delay:150ms]" /><i className="size-1.5 animate-pulse rounded-full bg-current [animation-delay:300ms]" /></span>}</div>{message.status === 'streaming' && <MessageFooter>Thinking…</MessageFooter>}{message.status === 'error' && <MessageFooter><span role="alert">Response unavailable.</span><Button variant="ghost" size="sm" onClick={() => retryRef.current?.()}>Retry</Button></MessageFooter>}{message.role === 'assistant' && message.usage && <MessageFooter><UsageSummary usage={message.usage} /></MessageFooter>}<div className={message.role === 'user' ? 'self-end' : 'self-start'}><CopyMessageButton text={message.text} /></div>{message.role === 'assistant' && planReadyMessageId && (message.id === planReadyMessageId || message.clientMessageId === planReadyMessageId) && <StartPlanCard onStart={() => { setPlanReadyMessageId(null); void sendMessage('Start the plan above. Begin with the first actionable step.', 'plan'); }} onDecline={() => setPlanReadyMessageId(null)} onSendDirection={(direction) => { setPlanReadyMessageId(null); void sendMessage(direction, 'plan'); }} />}</MessageContent></Message></MessageScrollerItem>)}</MessageGroup></MessageScrollerContent></MessageScrollerViewport><MessageScrollerButton /></MessageScroller></MessageScrollerProvider>
+        <MessageThread ref={messageThreadRef} messages={messages} user={user} streaming={streaming} revision={messageRevision} planReadyMessageId={planReadyMessageId} onRetry={() => retryRef.current?.()} onStartPlan={() => { setPlanReadyMessageId(null); void sendMessage('Start the plan above. Begin with the first actionable step.', 'plan'); }} onDeclinePlan={() => setPlanReadyMessageId(null)} onSendDirection={(direction) => { setPlanReadyMessageId(null); void sendMessage(direction, 'plan'); }} />
         <div className="border-t bg-background/90 p-4 backdrop-blur sm:px-8"><div className="mx-auto max-w-3xl">{error && <p role="alert" className="mb-2 text-xs text-destructive">{error}</p>}<div className="mb-2 flex flex-wrap items-center gap-1" role="tablist" aria-label="Thinking mode">{modeOptions.map((option) => <button key={option.id} type="button" role="tab" aria-selected={mode === option.id} title={option.description} disabled={!user || streaming} onClick={() => { setMode(option.id); setPlanReadyMessageId(null); }} className={`rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring ${mode === option.id ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'}`}>{option.label}</button>)}</div><div className="relative rounded-xl border bg-card shadow-sm focus-within:ring-2 focus-within:ring-ring/30"><textarea ref={textareaRef} value={draft} onChange={(event) => setDraft(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); void sendMessage(); } }} disabled={!user || streaming} rows={3} placeholder={user ? modeOptions.find((option) => option.id === mode)?.placeholder : 'Sign in to start a private conversation'} aria-label="Message" className="min-h-24 w-full resize-none bg-transparent px-4 pb-12 pt-4 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed" /><div className="absolute inset-x-3 bottom-3 flex items-center justify-between"><span className="text-xs text-muted-foreground">Enter to send · Shift + Enter for a new line</span>{streaming ? <Button variant="secondary" size="icon" aria-label="Stop generating" onClick={stopStreaming}><Square /></Button> : <Button size="icon" aria-label="Send message" disabled={!user || !draft.trim() || messageLoading} onClick={() => void sendMessage()}><ArrowUp /></Button>}</div></div><p className="mt-2 text-center text-[11px] text-muted-foreground">PyChat helps you explore, plan, and refine. Check important information.</p></div></div>
       </section>
       {workspaceOpen && <PreviewErrorBoundary><WorkspacePreview services={services} revision={workspaceRevision} onClose={() => setWorkspaceOpen(false)} /></PreviewErrorBoundary>}

package/templates/chat/src/ui/chat/chat-types.ts

@@ -1,3 +1,4 @@
+import type { ListenerOwner } from '@pyric/ui/listener-owner';
 import type { ChatMode } from '../../chat-mode';
 
 export type UiMessageRole = 'user' | 'assistant' | 'system';
@@ -55,6 +56,17 @@ export type UiToolCall = {
   summary?: string;
 };
 
+/**
+ * Who owns a listener: the React component `useListenerOwner` identified, or
+ * the name of the UI region it feeds. Under the local sandbox this is
+ * recorded as the listener's owner, so the runtime chip and Studio group
+ * listeners by the UI they feed; the production SDK ignores it.
+ *
+ * `ListenerOwner` is a type-only import, so `@pyric/ui` stays a development
+ * dependency and never reaches the production build.
+ */
+export type ListenerOptions = { owner?: string | ListenerOwner };
+
 export type ChatPageServices = {
   auth: {
     currentUser(): UiUser | null;
@@ -66,14 +78,14 @@ export type ChatPageServices = {
     list(): Promise<UiConversation[]>;
     create(input?: { title?: string }): Promise<string>;
     delete(id: string): Promise<void>;
-    observe(id: string, callback: (conversation: UiConversation) => void): () => void;
-    observeList(callback: (conversations: UiConversation[]) => void): () => void;
+    observe(id: string, callback: (conversation: UiConversation) => void, options?: ListenerOptions): () => void;
+    observeList(callback: (conversations: UiConversation[]) => void, options?: ListenerOptions): () => void;
   };
   messages: {
     list(conversationId: string): Promise<UiMessage[]>;
     appendUserMessage(input: { conversationId: string; text: string; clientMessageId: string }): Promise<string>;
     appendAssistantMessage(input: { conversationId: string; text: string; clientMessageId: string; thoughts?: string; model?: string; finishReason?: UiFinishReason; inputTokenCount?: number | null; outputTokenCount?: number | null }): Promise<string>;
-    observeRecent(conversationId: string, callback: (messages: UiMessage[]) => void): () => void;
+    observeRecent(conversationId: string, callback: (messages: UiMessage[]) => void, options?: ListenerOptions): () => void;
   };
   ai: {
     stream(
@@ -86,7 +98,7 @@ export type ChatPageServices = {
     ): Promise<{ text: string; thoughts?: string; model?: string; finishReason?: UiFinishReason; inputTokenCount?: number | null; outputTokenCount?: number | null; usage?: UiUsage }>;
   };
   presence: {
-    observe(callback: (online: UiPresence[]) => void): () => void;
+    observe(callback: (online: UiPresence[]) => void, options?: ListenerOptions): () => void;
   };
   notifications: {
     enable(onMessage: (message: UiNotification) => void): Promise<boolean>;

package/templates/chat/src/ui/chat/conversation-header.tsx

@@ -0,0 +1,26 @@
+import type { Ref } from 'react';
+import { Bell, Code2, LoaderCircle, PanelLeftOpen } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+type ConversationHeaderProps = {
+  ref?: Ref<HTMLElement>;
+  title: string;
+  modeLabel?: string;
+  sidebarOpen: boolean;
+  onOpenSidebar: () => void;
+  notificationsEnabled: boolean;
+  notificationsBusy: boolean;
+  notificationsDisabled: boolean;
+  onEnableNotifications: () => void;
+  workspaceOpen: boolean;
+  onToggleWorkspace: () => void;
+};
+
+/** The header above the thread: the conversation title, the current mode, and
+ *  the notification and workspace controls. Its root element is the one the
+ *  active-conversation listener feeds. */
+export function ConversationHeader({ ref, title, modeLabel, sidebarOpen, onOpenSidebar, notificationsEnabled, notificationsBusy, notificationsDisabled, onEnableNotifications, workspaceOpen, onToggleWorkspace }: ConversationHeaderProps) {
+  return (
+    <header ref={ref} id="conversation-header" className="flex h-16 shrink-0 items-center gap-3 border-b px-4 sm:px-6">{!sidebarOpen && <Button variant="ghost" size="icon" aria-label="Open conversation sidebar" onClick={onOpenSidebar}><PanelLeftOpen /></Button>}<div className="min-w-0 flex-1"><p className="truncate text-sm font-semibold">{title}</p><p className="text-xs text-muted-foreground">Private thinking space · {modeLabel}</p></div><Button variant={notificationsEnabled ? 'secondary' : 'ghost'} size="icon" aria-label={notificationsEnabled ? 'Send test notification' : 'Enable notifications'} title={notificationsEnabled ? 'Send test notification' : 'Enable notifications'} disabled={notificationsDisabled} onClick={onEnableNotifications}>{notificationsBusy ? <LoaderCircle className="animate-spin" /> : <Bell />}</Button><Button variant={workspaceOpen ? 'secondary' : 'ghost'} size="icon" aria-label={workspaceOpen ? 'Workspace open' : 'Open workspace'} title="Open workspace" onClick={onToggleWorkspace}><Code2 /></Button></header>
+  );
+}

package/templates/chat/src/ui/chat/conversation-list.tsx

@@ -0,0 +1,38 @@
+import type { Ref } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { formatTime } from './chat-format';
+import type { UiConversation } from './chat-types';
+
+type ConversationItemProps = {
+  conversation: UiConversation;
+  active: boolean;
+  deleteDisabled: boolean;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+};
+
+/** One row of the sidebar: the button that opens a conversation, and the control that deletes it. */
+function ConversationItem({ conversation, active, deleteDisabled, onSelect, onDelete }: ConversationItemProps) {
+  return (
+    <div className={`group flex items-center gap-1 rounded-lg text-sm transition-colors ${active ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'}`}><button className="min-w-0 flex-1 px-3 py-2 text-start" onClick={() => onSelect(conversation.id)}><span className="block truncate font-medium">{conversation.title}</span><span className="mt-0.5 block text-xs opacity-70">{conversation.updatedAt ? formatTime(conversation.updatedAt) : 'Just now'}</span></button><Button variant="ghost" size="icon" className="me-1 size-8 shrink-0 sm:opacity-0 sm:transition-opacity sm:group-hover:opacity-100 focus-visible:opacity-100" aria-label={`Delete conversation ${conversation.title}`} disabled={deleteDisabled} onClick={() => onDelete(conversation.id)}><Trash2 /></Button></div>
+  );
+}
+
+type ConversationListProps = {
+  ref?: Ref<HTMLElement>;
+  conversations: UiConversation[];
+  activeConversationId: string | null;
+  deletingConversationId: string | null;
+  loading: boolean;
+  onSelect: (id: string) => void;
+  onDelete: (id: string) => void;
+};
+
+/** The sidebar's list of conversations. Its root element is the one the
+ *  conversation-list listener feeds, so the page passes a ref for it. */
+export function ConversationList({ ref, conversations, activeConversationId, deletingConversationId, loading, onSelect, onDelete }: ConversationListProps) {
+  return (
+    <nav ref={ref} id="conversations" aria-label="Conversations" className="flex-1 space-y-1 overflow-y-auto px-2">{conversations.map((conversation) => <ConversationItem key={conversation.id} conversation={conversation} active={conversation.id === activeConversationId} deleteDisabled={deletingConversationId !== null} onSelect={onSelect} onDelete={onDelete} />)}{!conversations.length && !loading && <p className="px-3 py-8 text-center text-xs text-muted-foreground">No conversations yet. Start one to develop an idea.</p>}</nav>
+  );
+}

package/templates/chat/src/ui/chat/firebase-chat-gateway.ts

@@ -80,7 +80,7 @@ export const createFirebaseChatGateway = (): ChatPageServices => {
       },
     },
     presence: {
-      observe: (callback) => presence.observe((entries) => callback(entries.map(toUiPresence))),
+      observe: (callback, options) => presence.observe((entries) => callback(entries.map(toUiPresence)), options),
     },
     notifications: {
       enable: async (onMessage) => (await notifications.enable((message) => onMessage({ title: message.title, body: message.body }))) !== null,
@@ -90,14 +90,14 @@ export const createFirebaseChatGateway = (): ChatPageServices => {
       list: async () => (await conversations.list()).items.map(toUiConversation),
       create: (input) => conversations.create(input),
       delete: (id) => conversations.delete(id as Conversation['id']),
-      observe: (id, callback) => conversations.observe(id as Conversation['id'], (value) => callback(toUiConversation(value))),
-      observeList: (callback) => conversations.observeList((values) => callback(values.map(toUiConversation))),
+      observe: (id, callback, options) => conversations.observe(id as Conversation['id'], (value) => callback(toUiConversation(value)), options),
+      observeList: (callback, options) => conversations.observeList((values) => callback(values.map(toUiConversation)), options),
     },
     messages: {
       list: async (conversationId) => (await messages.list(conversationId)).items.map(toUiMessage),
       appendUserMessage: (input) => messages.appendUserMessage({ ...input, conversationId: asConversationId(input.conversationId) }),
       appendAssistantMessage: (input) => messages.appendAssistantMessage({ ...input, conversationId: asConversationId(input.conversationId) }),
-      observeRecent: (conversationId, callback) => messages.observeRecent(conversationId, (value) => callback(value.map(toUiMessage))),
+      observeRecent: (conversationId, callback, options) => messages.observeRecent(conversationId, (value) => callback(value.map(toUiMessage)), options),
     },
     ai: {
       stream: async (input, onChunk, onThought, onTool, onUsage, onWorkspaceChanged) => {

package/templates/chat/src/ui/chat/message-thread.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useRef, useState, type Ref } from 'react';
+import { Check, CheckCircle2, ChevronsUpDown, Copy, LoaderCircle, TerminalSquare, XCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from '@/components/ui/message';
+import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerScrollable } from '@/components/ui/message-scroller';
+import { initials } from './chat-format';
+import type { UiMessage, UiToolCall, UiUsage, UiUser } from './chat-types';
+import { MarkdownMessage } from './markdown-message';
+
+function CopyMessageButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1600);
+    } catch {
+      setCopied(false);
+    }
+  };
+
+  return (
+    <Button variant="ghost" size="icon-xs" aria-label={copied ? 'Message copied' : 'Copy message'} title={copied ? 'Message copied' : 'Copy message'} onClick={() => void copy()} disabled={!text}>
+      {copied ? <Check /> : <Copy />}
+    </Button>
+  );
+}
+
+function StartPlanCard({ onStart, onDecline, onSendDirection }: { onStart: () => void; onDecline: () => void; onSendDirection: (direction: string) => void }) {
+  const [editing, setEditing] = useState(false);
+  const [direction, setDirection] = useState('');
+
+  const sendDirection = () => {
+    const value = direction.trim();
+    if (!value) return;
+    onSendDirection(value);
+  };
+
+  return (
+    <section aria-label="Start plan" className="mt-2 max-w-full rounded-lg border border-primary/30 bg-primary/5 p-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-sm font-medium">Ready to start the plan?</p>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">PyChat can turn this direction into the first actionable step.</p>
+        </div>
+        <span className="shrink-0 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary">Plan</span>
+      </div>
+      {editing && <textarea value={direction} onChange={(event) => setDirection(event.target.value)} onKeyDown={(event) => { if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') sendDirection(); }} autoFocus rows={2} placeholder="Tell PyChat what to change…" aria-label="What should PyChat change?" className="mt-3 w-full resize-y rounded-md border bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/50" />}
+      <div className="mt-3 flex flex-wrap items-center gap-2">
+        <Button size="sm" onClick={onStart}>Start plan</Button>
+        {editing ? <Button size="sm" variant="secondary" onClick={sendDirection} disabled={!direction.trim()}>Send direction</Button> : <Button size="sm" variant="outline" onClick={() => setEditing(true)}>Tell PyChat what to change</Button>}
+        <Button size="sm" variant="ghost" onClick={onDecline}>Decline</Button>
+      </div>
+    </section>
+  );
+}
+
+function ToolActivity({ calls }: { calls: UiToolCall[] }) {
+  if (!calls.length) return null;
+  return (
+    <Collapsible className="mb-1 min-w-0 w-full max-w-full rounded-lg border bg-background/40 px-3 py-2">
+      <div className="flex items-center justify-between gap-3">
+        <span className="flex min-w-0 items-center gap-2 text-xs font-medium text-muted-foreground"><TerminalSquare className="size-3.5 shrink-0" /> Workspace activity <span className="font-normal">· {calls.length}</span></span>
+        <CollapsibleTrigger render={<Button variant="ghost" size="icon" className="size-7" />} aria-label="Toggle workspace activity"><ChevronsUpDown /></CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="space-y-1.5 pt-2">
+        {calls.map((call) => <div key={call.id} className="flex min-w-0 items-center gap-2 text-xs"><span className="shrink-0 text-muted-foreground">{call.status === 'running' ? <LoaderCircle className="size-3.5 animate-spin" /> : call.status === 'complete' ? <CheckCircle2 className="size-3.5 text-primary" /> : <XCircle className="size-3.5 text-destructive" />}</span><span className="truncate font-mono">{call.name}</span><span className="truncate text-muted-foreground">{call.summary ?? (call.status === 'running' ? 'Running…' : '')}</span></div>)}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function UsageSummary({ usage }: { usage?: UiUsage }) {
+  if (!usage) return null;
+  const total = usage.inputTokens + usage.outputTokens;
+  return <span className="inline-flex items-center gap-1.5"><span>{total.toLocaleString()} tokens</span>{usage.reasoningTokens ? <span>· {usage.reasoningTokens.toLocaleString()} thinking</span> : null}</span>;
+}
+
+function ThoughtsDisclosure({ thoughts, streaming }: { thoughts: string; streaming: boolean }) {
+  return (
+    <Collapsible defaultOpen={streaming} className="mb-1 min-w-0 w-full max-w-full rounded-lg border border-dashed bg-muted/30 px-3 py-2">
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-xs font-medium text-muted-foreground">Thoughts</span>
+        <CollapsibleTrigger render={<Button variant="ghost" size="icon" className="size-7" />} aria-label="Toggle thoughts">
+          <ChevronsUpDown />
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="pt-2">
+        <MarkdownMessage content={thoughts} className="max-w-full text-xs leading-5 text-muted-foreground" />
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+function StreamingFollow({ revision, streaming }: { revision: string; streaming: boolean }) {
+  const { end } = useMessageScrollerScrollable();
+  const { scrollToEnd } = useMessageScroller();
+  const followingRef = useRef(true);
+
+  useEffect(() => {
+    if (!streaming) {
+      followingRef.current = true;
+      return;
+    }
+    if (!end) followingRef.current = false;
+  }, [end, streaming]);
+
+  useEffect(() => {
+    if (!streaming || !followingRef.current) return;
+    const frame = window.requestAnimationFrame(() => scrollToEnd());
+    return () => window.cancelAnimationFrame(frame);
+  }, [revision, scrollToEnd, streaming]);
+
+  return null;
+}
+
+type MessageBubbleProps = {
+  message: UiMessage;
+  user: UiUser | null;
+  planReady: boolean;
+  onRetry: () => void;
+  onStartPlan: () => void;
+  onDeclinePlan: () => void;
+  onSendDirection: (direction: string) => void;
+};
+
+/** One message in the thread, with its tool activity, thoughts, usage, and the
+ *  plan card the assistant offers after a plan turn. */
+function MessageBubble({ message, user, planReady, onRetry, onStartPlan, onDeclinePlan, onSendDirection }: MessageBubbleProps) {
+  return (
+    <Message align={message.role === 'user' ? 'end' : 'start'}><MessageAvatar className={message.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'}><span className="grid size-8 place-items-center text-xs font-semibold">{message.role === 'user' ? initials(user) : '✦'}</span></MessageAvatar><MessageContent className={message.role === 'assistant' ? 'w-full max-w-[min(42rem,78%)]' : 'w-fit max-w-[min(42rem,78%)]'}><MessageHeader>{message.role === 'user' ? 'You' : 'PyChat'}</MessageHeader>{message.role === 'assistant' && message.toolCalls && <ToolActivity calls={message.toolCalls} />}{message.role === 'assistant' && message.thoughts && <ThoughtsDisclosure thoughts={message.thoughts} streaming={message.status === 'streaming'} />}<div className={`w-fit max-w-full rounded-xl px-4 py-3 leading-7 shadow-sm ${message.role === 'user' ? 'bg-primary text-primary-foreground' : 'border-transparent bg-muted text-foreground'}`}>{message.text ? message.role === 'assistant' ? <MarkdownMessage content={message.text} /> : <p className="whitespace-pre-wrap text-sm">{message.text}</p> : <span className="inline-flex gap-1 text-muted-foreground"><i className="size-1.5 animate-pulse rounded-full bg-current" /><i className="size-1.5 animate-pulse rounded-full bg-current [animation-delay:150ms]" /><i className="size-1.5 animate-pulse rounded-full bg-current [animation-delay:300ms]" /></span>}</div>{message.status === 'streaming' && <MessageFooter>Thinking…</MessageFooter>}{message.status === 'error' && <MessageFooter><span role="alert">Response unavailable.</span><Button variant="ghost" size="sm" onClick={onRetry}>Retry</Button></MessageFooter>}{message.role === 'assistant' && message.usage && <MessageFooter><UsageSummary usage={message.usage} /></MessageFooter>}<div className={message.role === 'user' ? 'self-end' : 'self-start'}><CopyMessageButton text={message.text} /></div>{message.role === 'assistant' && planReady && <StartPlanCard onStart={onStartPlan} onDecline={onDeclinePlan} onSendDirection={onSendDirection} />}</MessageContent></Message>
+  );
+}
+
+type MessageThreadProps = {
+  ref?: Ref<HTMLDivElement>;
+  messages: UiMessage[];
+  user: UiUser | null;
+  streaming: boolean;
+  revision: string;
+  planReadyMessageId: string | null;
+  onRetry: () => void;
+  onStartPlan: () => void;
+  onDeclinePlan: () => void;
+  onSendDirection: (direction: string) => void;
+};
+
+/** The scrolling thread: the intro, then one bubble per message. Its root
+ *  element is the one the message listener feeds. */
+export function MessageThread({ ref, messages, user, streaming, revision, planReadyMessageId, onRetry, onStartPlan, onDeclinePlan, onSendDirection }: MessageThreadProps) {
+  return (
+    <div ref={ref} id="message-thread" className="flex min-h-0 flex-1 flex-col"><MessageScrollerProvider autoScroll><MessageScroller className="min-h-0 flex-1"><StreamingFollow revision={revision} streaming={streaming} /><MessageScrollerViewport className="px-4 py-8 sm:px-8"><MessageScrollerContent className="mx-auto w-full max-w-3xl gap-8"><MessageScrollerItem messageId="intro" scrollAnchor={messages.length <= 1}><div className="mx-auto max-w-xl py-16 text-center"><div className="mx-auto mb-5 grid size-12 place-items-center rounded-2xl bg-primary text-primary-foreground shadow-sm"><span className="text-lg">✦</span></div><h1 className="text-2xl font-semibold tracking-tight">A clearer place to think.</h1><p className="mt-2 text-sm leading-6 text-muted-foreground">Explore possibilities, turn ideas into plans, or pressure-test a direction. Your context stays with you across conversations.</p></div></MessageScrollerItem><MessageGroup className="gap-8">{messages.map((message, index) => <MessageScrollerItem key={message.id} messageId={message.id} scrollAnchor={message.role === 'user'} className="chat-message-in" style={{ animationDelay: `${Math.min(index * 35, 350)}ms` }}><MessageBubble message={message} user={user} planReady={Boolean(planReadyMessageId) && (message.id === planReadyMessageId || message.clientMessageId === planReadyMessageId)} onRetry={onRetry} onStartPlan={onStartPlan} onDeclinePlan={onDeclinePlan} onSendDirection={onSendDirection} /></MessageScrollerItem>)}</MessageGroup></MessageScrollerContent></MessageScrollerViewport><MessageScrollerButton /></MessageScroller></MessageScrollerProvider></div>
+  );
+}

package/templates/chat/src/ui/chat/presence-bar.tsx

@@ -0,0 +1,23 @@
+import type { Ref } from 'react';
+import { LogIn, LogOut } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { initials } from './chat-format';
+import type { UiUser } from './chat-types';
+
+type PresenceBarProps = {
+  ref?: Ref<HTMLDivElement>;
+  user: UiUser | null;
+  onlineCount: number;
+  authLoading: boolean;
+  onSignIn: () => void;
+  onSignOut: () => void;
+};
+
+/** The foot of the sidebar: the signed-in user with the online count and a
+ *  sign-out control, or a sign-in button. Its root element is the one the
+ *  presence listener feeds. */
+export function PresenceBar({ ref, user, onlineCount, authLoading, onSignIn, onSignOut }: PresenceBarProps) {
+  return (
+    <div ref={ref} id="presence-bar" className="border-t p-3">{user ? <div className="flex items-center gap-2"><div className="relative shrink-0"><div className="grid size-8 place-items-center rounded-full bg-primary text-xs font-semibold text-primary-foreground">{initials(user)}</div><span className="absolute -end-0.5 -bottom-0.5 size-2.5 rounded-full border-2 border-card bg-emerald-500" aria-hidden="true" /></div><div className="min-w-0 flex-1"><p className="truncate text-sm font-medium">{user.displayName ?? 'Signed in'}</p><p className="truncate text-xs text-muted-foreground">{onlineCount} online · {user.email}</p></div><Button variant="ghost" size="icon" aria-label="Sign out" onClick={onSignOut}><LogOut /></Button></div> : <Button className="w-full gap-2" onClick={onSignIn} disabled={authLoading}><LogIn /> Sign in to continue</Button>}</div>
+  );
+}

package/templates/chat/vite.config.ts

@@ -11,11 +11,15 @@ import path from 'node:path';
 // self-contained sandbox preview you can serve under `pyric sandbox`, build with a
 // non-production mode: `vite build --mode development` (see the `build:sandbox`
 // script). That output is marked and can never be deployed.
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [react(), tailwindcss(), pyric()],
+  // The sandbox build keeps function names: pyric's listener attribution reads
+  // the owning React component's name from the render stack, and minification
+  // would replace it with a mangled one. The production build is unaffected.
+  build: mode === 'production' ? {} : { minify: false },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
   },
-});
+}));