@paramms/chat-widget 0.1.0 → 1.0.1

package/src/renderer.ts

@@ -1,906 +0,0 @@
-import type { ManifestAction, MessageContent, AnnotationStroke } from './protocol/index.js'
-import type { ChatStore, RenderMessage } from './store.js'
-
-export interface WidgetConfig {
-  subject?:      { title?: string; subtitle?: string; tags?: string[]; status?: string; ownerLabel?: string }
-  quickReplies?: string[]
-  accent?:       string
-}
-
-export interface RendererHandlers {
-  onSend(text: string): void
-  onAttach?(file: File): void
-  onInvoke(actionId: string, inputs?: Record<string, unknown>): void
-  onTyping(isTyping: boolean): void
-  onReadUpTo(seq: number): void
-  onReact?(messageId: string, emoji: string, remove: boolean): void
-  onCsat?(score: number): void
-  onLoadMore?(): void
-  onEdit?(messageId: string, newText: string): void
-  onDelete?(messageId: string): void
-  /** Co-browsing: a freehand stroke was completed on the shared whiteboard. */
-  onAnnotate?(stroke: Omit<AnnotationStroke, 'by'>): void
-  /** Co-browsing: clear the shared whiteboard for everyone. */
-  onAnnotateClear?(): void
-  /** Translate a message's text for display. Return null if unavailable —
-   *  the renderer shows a brief "unavailable" hint and leaves the original. */
-  onTranslate?(text: string): Promise<string | null>
-  /** Multi-subject chat list (e.g. a marketplace with one thread per item):
-   *  fetch the guest's other conversations. Omit to hide the list button
-   *  entirely — single-conversation embeds don't need this. */
-  onListChats?(): Promise<ChatListEntry[]>
-  /** Switch the active conversation to a different one from the list —
-   *  effectively a re-open with a different subjectId. */
-  onSwitchChat?(entry: ChatListEntry): void
-}
-
-export interface ChatListEntry {
-  id: string
-  subjectId?: string
-  subjectTitle?: string
-  state: string
-  updatedAt: number
-}
-
-const STYLE_ID = 'objectchat-widget-styles'
-const REACTION_EMOJIS = ['👍', '❤️', '😂', '😮', '😢', '🙏']
-const CSS = `
-.ocw { --ocw-accent:#f5713c; --ocw-bg:#f3efe9; --ocw-card:#fff; --ocw-line:#ececec; --ocw-ink:#1c1b1a; --ocw-mut:#9b9690;
-  position:relative;
-  display:flex; flex-direction:column; height:100%; min-height:520px; background:var(--ocw-bg);
-  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; color:var(--ocw-ink); overflow:hidden; }
-.ocw-head { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--ocw-card); border-bottom:1px solid var(--ocw-line); }
-.ocw-avatar { width:34px; height:34px; border-radius:50%; background:#ffe9d6; display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
-.ocw-head-main { flex:1; min-width:0; }
-.ocw-head-name { font-weight:700; font-size:15px; }
-.ocw-head-meta { color:var(--ocw-mut); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-.ocw-badge { font-size:12px; font-weight:600; color:#15803d; background:#e8f6ec; border-radius:999px; padding:3px 10px; }
-.ocw-e2e { font-size:11px; font-weight:700; color:#3730a3; background:#eef2ff; border-radius:999px; padding:3px 9px; align-items:center; }
-.ocw-menu { color:var(--ocw-mut); width:30px; height:30px; border-radius:50%; border:1px solid var(--ocw-line); background:#fff; cursor:pointer; }
-.ocw-chiprow { display:flex; gap:8px; padding:10px 12px; background:var(--ocw-card); border-bottom:1px solid var(--ocw-line); overflow-x:auto; }
-.ocw-chip { flex:none; display:flex; align-items:center; gap:6px; border:1px solid #e3ded7; background:#fff; border-radius:999px; padding:7px 13px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
-.ocw-chip:hover { border-color:var(--ocw-accent); color:var(--ocw-accent); }
-.ocw-scroll { flex:1; min-height:0; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; }
-.ocw-subject { background:var(--ocw-card); border:1px solid var(--ocw-line); border-radius:16px; padding:14px 16px; }
-.ocw-subject-title { font-weight:700; font-size:16px; margin-bottom:2px; }
-.ocw-subject-sub { color:var(--ocw-mut); font-size:13px; margin-bottom:10px; }
-.ocw-tags { display:flex; flex-wrap:wrap; gap:6px; }
-.ocw-tag { font-size:12px; color:#5b554e; background:#efeae3; border-radius:8px; padding:4px 10px; }
-.ocw-row { display:flex; align-items:flex-end; gap:8px; max-width:86%; }
-.ocw-row.mine { align-self:flex-end; flex-direction:row-reverse; }
-.ocw-row.theirs { align-self:flex-start; }
-.ocw-dot { width:26px; height:26px; border-radius:50%; background:var(--ocw-accent); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
-.ocw-bubble { padding:10px 14px; border-radius:18px; font-size:14.5px; line-height:1.4; word-wrap:break-word; }
-.theirs .ocw-bubble { background:#fff; border:1px solid var(--ocw-line); border-bottom-left-radius:6px; }
-.mine .ocw-bubble { background:var(--ocw-accent); color:#fff; border-bottom-right-radius:6px; }
-.ocw-sys { align-self:center; color:var(--ocw-mut); font-size:12.5px; font-style:italic; text-align:center; max-width:90%; }
-.ocw-bot .ocw-bubble { background:#f0fdf4; border-color:#cdebd6; }
-.ocw-note .ocw-bubble { background:#fffbeb; border:1.5px dashed #f59e0b; color:#78350f; border-radius:12px !important; }
-.ocw-note .ocw-bubble::before { content:'🔒 Note — '; font-size:11px; font-weight:700; color:#b45309; display:block; margin-bottom:3px; letter-spacing:.3px; }
-.ocw-time { font-size:10.5px; color:var(--ocw-mut); margin-top:3px; }
-.mine .ocw-meta { text-align:right; }
-.ocw-tick { margin-left:4px; }
-.ocw-deleted { font-style:italic; color:var(--ocw-mut); }
-.ocw-edited { font-size:10px; color:var(--ocw-mut); margin-left:4px; }
-.ocw-react { font-size:12px; margin-top:3px; display:flex; flex-wrap:wrap; gap:3px; }
-.ocw-react-pill { display:inline-flex; align-items:center; gap:3px; border:1px solid #e3ded7; border-radius:999px; padding:2px 7px; background:#fff; font-size:12px; cursor:pointer; }
-.ocw-react-pill:hover { border-color:var(--ocw-accent); }
-.ocw-react-pill.mine { border-color:var(--ocw-accent); background:#fff8f5; }
-.ocw-react-add { display:none; position:absolute; bottom:100%; left:0; margin-bottom:4px; background:#fff; border:1px solid #e3ded7; border-radius:14px; padding:6px 8px; box-shadow:0 4px 16px rgba(0,0,0,.12); display:flex; gap:4px; z-index:10; }
-.ocw-react-wrap { position:relative; }
-.ocw-react-wrap:not(:hover) .ocw-react-picker { display:none; }
-.ocw-react-picker { position:absolute; bottom:calc(100% + 4px); left:0; background:#fff; border:1px solid #e3ded7; border-radius:14px; padding:6px 8px; box-shadow:0 4px 16px rgba(0,0,0,.12); display:flex; gap:4px; z-index:10; white-space:nowrap; }
-.ocw-react-picker button { background:none; border:none; font-size:16px; cursor:pointer; padding:2px; border-radius:6px; }
-.ocw-react-picker button:hover { background:#f3efe9; }
-.ocw-react-btn { background:none; border:1px solid #e3ded7; border-radius:999px; padding:2px 7px; font-size:12px; cursor:pointer; color:var(--ocw-mut); }
-.ocw-react-btn:hover { border-color:var(--ocw-accent); color:var(--ocw-accent); }
-.ocw-msg-menu { position:absolute; top:0; right:0; display:none; gap:3px; }
-.ocw-row.mine:hover .ocw-msg-menu { display:flex; }
-.ocw-row.theirs:hover .ocw-msg-menu { display:flex; left:0; right:auto; }
-.ocw-msg-menu button { background:#fff; border:1px solid #e3ded7; border-radius:6px; font-size:11px; padding:2px 6px; cursor:pointer; color:var(--ocw-mut); }
-.ocw-msg-menu button:hover { border-color:var(--ocw-accent); color:var(--ocw-accent); }
-.ocw-msg-menu button.del:hover { border-color:#e74c3c; color:#e74c3c; }
-.ocw-bubble-wrap { position:relative; }
-.ocw-seen { font-size:10.5px; color:var(--ocw-mut); }
-.ocw-appt { background:#f0f7ff; border:1px solid #c7deff; border-radius:12px; padding:12px 14px; max-width:260px; }
-.ocw-appt-title { font-weight:700; font-size:14px; margin-bottom:4px; }
-.ocw-appt-time { font-size:12px; color:#1d4ed8; margin-bottom:4px; }
-.ocw-appt-loc { font-size:12px; color:var(--ocw-mut); margin-bottom:4px; }
-.ocw-appt-desc { font-size:12px; color:var(--ocw-mut); margin-bottom:10px; white-space:pre-wrap; }
-.ocw-appt-links { display:flex; flex-direction:column; gap:6px; }
-.ocw-appt-btn { display:block; text-align:center; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; background:var(--ocw-accent); color:#fff; }
-.ocw-appt-btn-sec { background:#fff; color:var(--ocw-accent); border:1px solid var(--ocw-accent); }
-.ocw-conn-status { font-size:10px; color:var(--ocw-mut); margin-left:4px; }
-.ocw-conn-status.warn { color:#e67e22; }
-.ocw-load-more { display:block; width:100%; background:none; border:1px solid #e3ded7; border-radius:10px; padding:6px 0; font-size:12px; color:var(--ocw-mut); cursor:pointer; margin-bottom:8px; }
-.ocw-load-more:hover { border-color:var(--ocw-accent); color:var(--ocw-accent); }
-.ocw-offline { margin:20px 14px; padding:20px; background:#fff; border:1px solid #e3ded7; border-radius:16px; text-align:center; }
-.ocw-offline-icon { font-size:32px; margin-bottom:8px; }
-.ocw-offline-title { font-weight:700; font-size:16px; margin-bottom:6px; }
-.ocw-offline-msg { font-size:13px; color:var(--ocw-mut); margin-bottom:16px; }
-.ocw-offline-form { display:flex; flex-direction:column; gap:8px; text-align:left; }
-.ocw-offline-input { border:1px solid #e3ded7; border-radius:10px; padding:10px 12px; font-size:13px; font-family:inherit; }
-.ocw-offline-input:focus { outline:none; border-color:var(--ocw-accent); }
-.ocw-offline-submit { background:var(--ocw-accent); color:#fff; border:none; border-radius:10px; padding:11px; font-size:14px; font-weight:600; cursor:pointer; }
-.ocw-offline-thanks { font-size:14px; color:#15803d; font-weight:600; }
-.ocw-csat-title { font-size:13px; font-weight:600; margin-bottom:8px; }
-.ocw-csat-stars { display:flex; gap:6px; }
-.ocw-csat-star { background:none; border:none; font-size:22px; cursor:pointer; padding:2px; opacity:.4; transition:opacity .15s; }
-.ocw-csat-star:hover, .ocw-csat-star.lit { opacity:1; }
-.ocw-csat-done { font-size:12px; color:var(--ocw-mut); margin-top:6px; }
-
-.ocw-typing { height:18px; padding:0 16px 4px; font-size:12px; color:var(--ocw-mut); }
-.ocw-quick { display:flex; gap:8px; padding:8px 12px 0; overflow-x:auto; }
-.ocw-quick button { flex:none; border:1px solid #e3ded7; background:#fff; border-radius:999px; padding:7px 14px; font-size:13px; cursor:pointer; color:#444; white-space:nowrap; }
-.ocw-quick button:hover { border-color:var(--ocw-accent); color:var(--ocw-accent); }
-.ocw-form-host:empty { display:none; }
-.ocw-form { margin:6px 12px 0; padding:12px; background:var(--ocw-card); border:1px solid var(--ocw-line); border-radius:14px; }
-.ocw-form-title { font-weight:700; font-size:14px; margin-bottom:8px; }
-.ocw-form-row { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
-.ocw-form-lbl { font-size:12px; color:var(--ocw-mut); }
-.ocw-form-input { border:1px solid #e3ded7; border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; outline:none; }
-.ocw-form-input:focus { border-color:var(--ocw-accent); }
-.ocw-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
-.ocw-form-cancel { background:none; border:none; color:var(--ocw-mut); font-size:13px; cursor:pointer; padding:8px 10px; }
-.ocw-form-submit { background:var(--ocw-accent); color:#fff; border:none; border-radius:999px; padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer; }
-.ocw-modal { position:absolute; inset:0; background:rgba(20,18,16,.42); display:flex; align-items:center; justify-content:center; z-index:50; }
-.ocw-modal-card { background:#fff; border-radius:16px; padding:20px; width:78%; max-width:300px; box-shadow:0 14px 44px rgba(0,0,0,.22); }
-.ocw-modal-title { font-weight:700; font-size:16px; margin-bottom:6px; }
-.ocw-modal-body { color:var(--ocw-mut); font-size:14px; margin-bottom:16px; }
-.ocw-modal-actions { display:flex; justify-content:flex-end; gap:8px; }
-.ocw-modal-cancel { background:none; border:none; color:var(--ocw-mut); font-size:14px; cursor:pointer; padding:9px 12px; }
-.ocw-modal-ok { background:var(--ocw-accent); color:#fff; border:none; border-radius:999px; padding:9px 20px; font-size:14px; font-weight:600; cursor:pointer; }
-.ocw-input { display:flex; align-items:center; gap:10px; padding:12px; }
-.ocw-footer { text-align:center; font-size:11px; color:var(--ocw-mut); padding:6px 0 8px; }
-.ocw-footer a { color:var(--ocw-mut); text-decoration:none; font-weight:600; }
-.ocw-footer a:hover { color:var(--ocw-accent); }
-.ocw-attach { background:none;border:none;cursor:pointer;font-size:18px;padding:4px 6px;opacity:.6;flex-none; }
-.ocw-attach:hover { opacity:1; }
-.ocw-input textarea { flex:1; resize:none; border:1px solid #e3ded7; border-radius:22px; padding:11px 16px; font:inherit; font-size:14px; background:#fff; outline:none; max-height:96px; }
-.ocw-input textarea:focus { border-color:var(--ocw-accent); }
-.ocw-sendbtn { width:42px; height:42px; border-radius:50%; border:none; background:var(--ocw-accent); color:#fff; font-size:18px; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; }
-.ocw-sendbtn:disabled { opacity:.5; cursor:default; }
-.ocw-cobrowse-btn { display:none; }
-.ocw-cobrowse-btn.show { display:inline-flex; }
-.ocw-cobrowse-btn.on { color:var(--ocw-accent); border-color:var(--ocw-accent); }
-.ocw-cobrowse-canvas { position:absolute; inset:0; z-index:40; touch-action:none; display:none; }
-.ocw-cobrowse-canvas.active { display:block; cursor:crosshair; }
-.ocw-cobrowse-toolbar { position:absolute; top:8px; right:8px; z-index:41; display:none; gap:6px; background:rgba(255,255,255,.92); border-radius:999px; padding:5px 8px; box-shadow:0 2px 10px rgba(0,0,0,.12); }
-.ocw-cobrowse-toolbar.active { display:flex; align-items:center; }
-.ocw-cobrowse-swatch { width:18px; height:18px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; }
-.ocw-cobrowse-swatch.sel { border-color:#1c1b1a; }
-.ocw-cobrowse-clear { background:none; border:1px solid #e3ded7; border-radius:999px; font-size:11px; padding:3px 8px; cursor:pointer; color:var(--ocw-mut); }
-.ocw-cobrowse-clear:hover { border-color:#e74c3c; color:#e74c3c; }
-.ocw-cobrowse-hint { position:absolute; bottom:8px; left:8px; z-index:41; font-size:11px; color:var(--ocw-mut); background:rgba(255,255,255,.9); border-radius:8px; padding:3px 8px; display:none; }
-.ocw-cobrowse-hint.active { display:block; }
-.ocw-chatlist-btn { background:none; border:none; cursor:pointer; font-size:18px; color:var(--ocw-mut); padding:4px 6px; border-radius:8px; }
-.ocw-chatlist-btn:hover { background:var(--ocw-bg); }
-.ocw-chatlist-panel { position:absolute; inset:0; z-index:50; background:var(--ocw-card); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .2s ease; }
-.ocw-chatlist-panel.open { transform:translateX(0); }
-.ocw-chatlist-head { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--ocw-line); }
-.ocw-chatlist-back { background:none; border:none; cursor:pointer; font-size:18px; color:var(--ocw-ink); padding:2px 6px; }
-.ocw-chatlist-title { font-weight:700; font-size:15px; flex:1; }
-.ocw-chatlist-body { flex:1; overflow-y:auto; }
-.ocw-chatlist-empty { padding:40px 20px; text-align:center; color:var(--ocw-mut); font-size:13px; }
-.ocw-chatlist-item { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--ocw-line); cursor:pointer; background:none; border-left:none; border-right:none; width:100%; text-align:left; }
-.ocw-chatlist-item:hover { background:var(--ocw-bg); }
-.ocw-chatlist-item.active { background:var(--ocw-bg); }
-.ocw-chatlist-ic { width:36px; height:36px; border-radius:50%; background:var(--ocw-bg); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; }
-.ocw-chatlist-main { flex:1; min-width:0; }
-.ocw-chatlist-name { font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-.ocw-chatlist-state { font-size:11px; color:var(--ocw-mut); margin-top:2px; }
-.ocw-chatlist-time { font-size:11px; color:var(--ocw-mut); flex:none; }
-.ocw-translate-btn { position:absolute; bottom:2px; right:-26px; background:#fff; border:1px solid #e3ded7; border-radius:50%; width:22px; height:22px; font-size:11px; cursor:pointer; color:var(--ocw-mut); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; padding:0; }
-.ocw-row.theirs .ocw-translate-btn { right:auto; left:-26px; }
-.ocw-bubble-wrap:hover .ocw-translate-btn { opacity:1; }
-.ocw-translated-tag { font-size:10px; color:var(--ocw-mut); margin-top:2px; }
-`
-
-function injectStyles(): void {
-  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return
-  const s = document.createElement('style'); s.id = STYLE_ID; s.textContent = CSS; document.head.appendChild(s)
-}
-
-function el<K extends keyof HTMLElementTagNameMap>(tag: K, cls?: string, text?: string): HTMLElementTagNameMap[K] {
-  const n = document.createElement(tag); if (cls) n.className = cls; if (text !== undefined) n.textContent = text; return n
-}
-function fmtTime(ts: number): string {
-  try { return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) } catch { return '' }
-}
-function timeAgo(ts: number): string {
-  const sec = Math.floor((Date.now() - ts) / 1000)
-  if (sec < 60) return 'now'
-  if (sec < 3600) return `${Math.floor(sec / 60)}m`
-  if (sec < 86400) return `${Math.floor(sec / 3600)}h`
-  return `${Math.floor(sec / 86400)}d`
-}
-function contentText(c: MessageContent): string {
-  switch (c.kind) {
-    case 'text':        return c.text
-    case 'system':      return typeof c.data?.['message'] === 'string' ? String(c.data['message']) : c.event
-    case 'card':        return [c.title, c.body].filter(Boolean).join(' — ')
-    case 'attachment':  return c.name ?? c.url
-    case 'form':        return c.prompt
-    case 'appointment': return `📅 ${c.title} — ${new Date(c.startIso).toLocaleString()}`
-  }
-}
-
-/** Renders a ChatStore into a host element in the Image-1 layout: header →
- *  subject card → action chips → chat → quick replies → input. Self-injects its
- *  stylesheet so it looks right wherever it mounts. Accent comes from the
- *  dashboard-authored profile theme (via the manifest), falling back to config. */
-export class Renderer {
-  private readonly scroll:  HTMLElement
-  private readonly chips:   HTMLElement
-  private readonly typing:  HTMLElement
-  private readonly quick:   HTMLElement
-  private readonly formHost: HTMLElement
-  private readonly csatPanel: HTMLElement
-  private readonly offlinePanel: HTMLElement
-  private readonly footer: HTMLElement
-  private readonly input:   HTMLTextAreaElement
-  private readonly subjectCard: HTMLElement
-  private readonly e2eBadge: HTMLElement
-  private readonly statusBadge: HTMLElement
-  private readonly headerName: HTMLElement
-  private readonly connStatus: HTMLElement
-  private typingTimer: ReturnType<typeof setTimeout> | null = null
-  private csatSubmitted = false
-
-  // ── Co-browsing (shared whiteboard) ─────────────────────────────────────
-  private readonly cobrowseBtn: HTMLButtonElement
-  private readonly cobrowseCanvas: HTMLCanvasElement
-  private readonly cobrowseToolbar: HTMLElement
-  private readonly cobrowseHint: HTMLElement
-  private cobrowseActive = false
-  private cobrowseColor = '#f5713c'
-  private lastAnnotationVersion = -1
-  private storeRef: ChatStore | null = null
-  // ── Live translation ──────────────────────────────────────────────────-
-  private readonly translationCache = new Map<string, string>()
-  private readonly showingTranslation = new Set<string>()
-
-  // ── Multi-subject chat list (e.g. marketplace: one thread per listing) ──
-  private readonly chatListPanel: HTMLElement
-  private readonly chatListBody: HTMLElement
-  private chatListBtn: HTMLButtonElement | null = null
-  private activeChatId: string | null = null
-
-  constructor(
-    private readonly root: HTMLElement,
-    private readonly me: string,
-    private readonly h: RendererHandlers,
-    private readonly cfg: WidgetConfig = {},
-  ) {
-    injectStyles()
-    root.classList.add('ocw')
-    if (cfg.accent) root.style.setProperty('--ocw-accent', cfg.accent)
-
-    // Header
-    const head = el('div', 'ocw-head')
-    head.append(el('div', 'ocw-avatar', '🧑'))
-    const hm = el('div', 'ocw-head-main')
-    this.headerName = el('div', 'ocw-head-name', cfg.subject?.ownerLabel ?? cfg.subject?.title ?? '')
-    hm.append(this.headerName)
-    if (cfg.subject?.subtitle) hm.append(el('div', 'ocw-head-meta', cfg.subject.subtitle))
-    head.append(hm)
-    this.statusBadge = el('span', 'ocw-badge', cfg.subject?.status ?? '')
-    if (!cfg.subject?.status) this.statusBadge.style.display = 'none'
-    head.append(this.statusBadge)
-    this.e2eBadge = el('span', 'ocw-e2e', '🔒 E2E'); this.e2eBadge.style.display = 'none'; head.append(this.e2eBadge)
-    this.connStatus = el('span', 'ocw-conn-status'); this.connStatus.style.display = 'none'; head.append(this.connStatus)
-    this.cobrowseBtn = el('button', 'ocw-menu ocw-cobrowse-btn', '🖍') as HTMLButtonElement
-    this.cobrowseBtn.title = 'Shared whiteboard — draw to point things out together'
-    this.cobrowseBtn.addEventListener('click', () => { this.cobrowseActive = !this.cobrowseActive; this.updateCobrowseUI() })
-    head.append(this.cobrowseBtn)
-    if (this.h.onListChats) {
-      this.chatListBtn = el('button', 'ocw-chatlist-btn', '💬') as HTMLButtonElement
-      this.chatListBtn.title = 'Your conversations'
-      this.chatListBtn.addEventListener('click', () => this.openChatList())
-      head.append(this.chatListBtn)
-    }
-    head.append(el('button', 'ocw-menu', '⋯'))
-
-    // Action chips (filled in render)
-    this.chips = el('div', 'ocw-chiprow')
-
-    // Scroll area with optional subject card + messages
-    this.scroll = el('div', 'ocw-scroll')
-    this.subjectCard = el('div', 'ocw-subject')
-    this.typing = el('div', 'ocw-typing')
-    this.quick = el('div', 'ocw-quick')
-    for (const q of cfg.quickReplies ?? []) {
-      const b = el('button', undefined, q); b.addEventListener('click', () => this.h.onSend(q)); this.quick.append(b)
-    }
-
-    // Input
-    this.formHost = el('div', 'ocw-form-host')
-    this.csatPanel = el('div', 'ocw-csat'); this.csatPanel.style.display = 'none'
-    this.offlinePanel = el('div', 'ocw-offline'); this.offlinePanel.style.display = 'none'
-    this.input = el('textarea', undefined); this.input.rows = 1; this.input.placeholder = 'Message…'
-    const sendBtn = el('button', 'ocw-sendbtn', '➤')
-    sendBtn.addEventListener('click', () => this.flushSend())
-    this.input.addEventListener('keydown', (e) => {
-      // Guard against IME composition (Korean/Japanese/Chinese input): while
-      // the user is selecting a candidate from the IME's suggestion list,
-      // pressing Enter to CONFIRM the candidate also fires a keydown with
-      // key === 'Enter'. Without this check, that confirmation keystroke was
-      // being treated as "send the message" — firing early with a partial
-      // composition, and then firing again on the real Enter press with
-      // whatever text was left, producing two bubbles for one message
-      // (e.g. typing "음식" sends "음식" then "식").
-      // e.isComposing covers most browsers; keyCode 229 is the long-standing
-      // fallback for browsers/IMEs that don't set isComposing reliably.
-      if (e.isComposing || e.keyCode === 229) return
-      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.flushSend() } else this.signalTyping()
-    })
-
-    const attachBtn = el('button', 'ocw-attach', '📎'); attachBtn.title = 'Attach image or file'
-    const fileInput = document.createElement('input'); fileInput.type = 'file'
-    fileInput.accept = 'image/*,.pdf,.txt,.doc,.docx'; fileInput.style.display = 'none'
-    attachBtn.addEventListener('click', () => fileInput.click())
-    fileInput.addEventListener('change', () => { if (fileInput.files?.[0] && this.h.onAttach) this.h.onAttach(fileInput.files[0]); fileInput.value = '' })
-
-    const inputRow = el('div', 'ocw-input'); inputRow.append(attachBtn, fileInput, this.input, sendBtn)
-
-    const footer = el('div', 'ocw-footer')
-    footer.innerHTML = 'Powered by <a href="https://relay.paramms.com" target="_blank" rel="noopener">Relay</a>'
-    this.footer = footer
-
-    root.append(head, this.chips, this.scroll, this.typing, this.quick, this.formHost, this.csatPanel, this.offlinePanel, inputRow, this.footer)
-
-    // Co-browsing overlay: a freehand canvas layered over the whole widget.
-    this.cobrowseCanvas = el('canvas', 'ocw-cobrowse-canvas') as HTMLCanvasElement
-    this.cobrowseToolbar = el('div', 'ocw-cobrowse-toolbar')
-    for (const c of ['#f5713c', '#1c1b1a', '#2563eb', '#16a34a', '#dc2626']) {
-      const sw = el('button', 'ocw-cobrowse-swatch') as HTMLButtonElement
-      sw.style.background = c
-      sw.type = 'button'
-      if (c === this.cobrowseColor) sw.classList.add('sel')
-      sw.addEventListener('click', () => {
-        this.cobrowseColor = c
-        for (const n of this.cobrowseToolbar.querySelectorAll('.ocw-cobrowse-swatch')) n.classList.remove('sel')
-        sw.classList.add('sel')
-      })
-      this.cobrowseToolbar.append(sw)
-    }
-    const cobrowseClear = el('button', 'ocw-cobrowse-clear', 'Clear')
-    cobrowseClear.addEventListener('click', () => this.h.onAnnotateClear?.())
-    this.cobrowseToolbar.append(cobrowseClear)
-    this.cobrowseHint = el('div', 'ocw-cobrowse-hint', '🖍 Draw to point things out — visible to both sides')
-    root.append(this.cobrowseCanvas, this.cobrowseToolbar, this.cobrowseHint)
-    this.bindCobrowsePointerEvents()
-
-    // Multi-subject chat list overlay — slides in from the right, same
-    // layer as the co-browse canvas. Built once; populated on open.
-    this.chatListPanel = el('div', 'ocw-chatlist-panel')
-    const clHead = el('div', 'ocw-chatlist-head')
-    const clBack = el('button', 'ocw-chatlist-back', '←')
-    clBack.addEventListener('click', () => this.closeChatList())
-    clHead.append(clBack, el('div', 'ocw-chatlist-title', 'Your conversations'))
-    this.chatListBody = el('div', 'ocw-chatlist-body')
-    this.chatListPanel.append(clHead, this.chatListBody)
-    root.append(this.chatListPanel)
-  }
-
-  private openChatList(): void {
-    this.chatListPanel.classList.add('open')
-    this.chatListBody.replaceChildren(el('div', 'ocw-chatlist-empty', 'Loading…'))
-    this.h.onListChats?.().then((entries) => {
-      this.chatListBody.replaceChildren()
-      if (!entries.length) {
-        this.chatListBody.append(el('div', 'ocw-chatlist-empty', 'No conversations yet.'))
-        return
-      }
-      for (const entry of entries) {
-        const item = el('button', `ocw-chatlist-item${entry.id === this.activeChatId ? ' active' : ''}`)
-        item.append(el('div', 'ocw-chatlist-ic', '💬'))
-        const main = el('div', 'ocw-chatlist-main')
-        main.append(el('div', 'ocw-chatlist-name', entry.subjectTitle ?? 'General enquiry'))
-        main.append(el('div', 'ocw-chatlist-state', entry.state))
-        item.append(main)
-        item.append(el('div', 'ocw-chatlist-time', timeAgo(entry.updatedAt)))
-        item.addEventListener('click', () => {
-          this.activeChatId = entry.id
-          this.closeChatList()
-          this.h.onSwitchChat?.(entry)
-        })
-        this.chatListBody.append(item)
-      }
-    }).catch(() => {
-      this.chatListBody.replaceChildren(el('div', 'ocw-chatlist-empty', 'Could not load your conversations.'))
-    })
-  }
-
-  private closeChatList(): void {
-    this.chatListPanel.classList.remove('open')
-  }
-
-  private flushSend(): void {
-    const text = this.input.value.trim()
-    if (!text) return
-    this.input.value = ''
-    this.h.onTyping(false)
-    this.h.onSend(text)
-  }
-  private signalTyping(): void {
-    this.h.onTyping(true)
-    if (this.typingTimer) clearTimeout(this.typingTimer)
-    this.typingTimer = setTimeout(() => this.h.onTyping(false), 2000)
-  }
-
-  render(store: ChatStore): void {
-    this.storeRef = store
-    // Co-browsing toggle is only meaningful for subject-anchored conversations.
-    this.cobrowseBtn.classList.toggle('show', !!store.subject)
-    if (!store.subject && this.cobrowseActive) { this.cobrowseActive = false; this.updateCobrowseUI() }
-    if (this.cobrowseActive && store.annotationVersion !== this.lastAnnotationVersion) {
-      this.lastAnnotationVersion = store.annotationVersion
-      this.resizeCobrowseCanvas()
-      this.redrawCobrowse()
-    }
-    if (store.accent) this.root.style.setProperty('--ocw-accent', store.accent)
-    this.e2eBadge.style.display = store.e2e ? 'inline-flex' : 'none'
-    this.buildSubjectCard(store)
-    // Header: when a subject is attached, show ownerLabel ("Seller", "Host")
-    // or nothing — the subject card below carries the identity.
-    // Without a subject, the header is already set to cfg.subject?.ownerLabel
-    // or "Chat" from the constructor — don't overwrite it with the domain name
-    // which would duplicate the subject card title or clutter a plain chat.
-    if (store.subject) {
-      const ownerLabel = this.cfg.subject?.ownerLabel
-      if (ownerLabel) this.headerName.textContent = ownerLabel
-      // else leave constructor default ("Chat")
-    }
-    // Without a subject: leave header as-is (set once in constructor)
-
-    // Action chips from the manifest (filtered by state in the store)
-    this.chips.replaceChildren()
-    const actions = store.visibleActions()
-    this.chips.style.display = actions.length ? 'flex' : 'none'
-    for (const a of actions) this.chips.append(this.chipEl(a))
-
-    // Messages
-    // Preserve scroll anchor when history is prepended: capture height before
-    // replaceChildren so we can restore relative position after.
-    const prevScrollHeight = this.scroll.scrollHeight
-    const prevScrollTop    = this.scroll.scrollTop
-
-    this.scroll.replaceChildren()
-    if (this.subjectCard.childNodes.length) this.scroll.append(this.subjectCard)
-    if (store.hasMoreHistory && this.h.onLoadMore) {
-      const btn = el('button', 'ocw-load-more', '↑ Load earlier messages')
-      btn.addEventListener('click', () => this.h.onLoadMore!())
-      this.scroll.append(btn)
-    }
-    let maxOther = 0
-    for (const m of store.messages()) {
-      this.scroll.append(this.messageEl(m, store))
-      if (m.senderId !== this.me && m.seq > maxOther) maxOther = m.seq
-    }
-    // Auto-scroll to bottom only for new messages; restore anchor when history was prepended.
-    if (prevScrollTop > 20) {
-      this.scroll.scrollTop = this.scroll.scrollHeight - prevScrollHeight + prevScrollTop
-    } else {
-      this.scroll.scrollTop = this.scroll.scrollHeight
-    }
-    if (maxOther > 0) this.h.onReadUpTo(maxOther)
-
-    this.typing.textContent = store.typing.size > 0 ? 'typing…' : ''
-    this.footer.style.display = store.whiteLabel ? 'none' : 'block'
-
-    // Offline mode: show form instead of chat input
-    if (store.offline) {
-      if (this.offlinePanel.style.display === 'none') this.buildOfflinePanel(store.offlineMessage)
-      this.offlinePanel.style.display = 'block'
-      ;(this.root.querySelector('.ocw-input') as HTMLElement | null)?.style.setProperty('display', 'none')
-    } else {
-      this.offlinePanel.style.display = 'none'
-      ;(this.root.querySelector('.ocw-input') as HTMLElement | null)?.style.removeProperty('display')
-    }
-
-    // CSAT: show star-rating panel when conversation reaches a terminal state
-    // and the user hasn't yet rated. Terminal states are heuristic: 'resolved',
-    // 'closed', 'sold', 'issued', 'checked_out'. The panel self-dismisses on submit.
-    const terminalStates = ['resolved', 'closed', 'sold', 'issued', 'checked_out']
-    if (this.h.onCsat && !this.csatSubmitted && terminalStates.includes(store.state) && store.messages().length > 0) {
-      if (this.csatPanel.style.display === 'none') this.buildCsatPanel()
-      this.csatPanel.style.display = 'block'
-    }
-  }
-
-  setConnStatus(status: 'connecting' | 'open' | 'reconnecting'): void {
-    if (status === 'open') { this.connStatus.style.display = 'none'; return }
-    this.connStatus.style.display = ''
-    this.connStatus.className = `ocw-conn-status${status === 'reconnecting' ? ' warn' : ''}`
-    this.connStatus.textContent = status === 'reconnecting' ? '↻ reconnecting…' : '● connecting…'
-  }
-
-  private buildOfflinePanel(offlineMessage?: string): void {
-    this.offlinePanel.replaceChildren()
-    this.offlinePanel.append(el('div', 'ocw-offline-icon', '🌙'))
-    this.offlinePanel.append(el('div', 'ocw-offline-title', "We're offline right now"))
-    this.offlinePanel.append(el('div', 'ocw-offline-msg', offlineMessage || "Leave your details and we'll get back to you soon."))
-    const form = el('div', 'ocw-offline-form')
-    const nameIn = el('input', 'ocw-offline-input') as HTMLInputElement; nameIn.placeholder = 'Your name'; nameIn.type = 'text'
-    const emailIn = el('input', 'ocw-offline-input') as HTMLInputElement; emailIn.placeholder = 'Your email'; emailIn.type = 'email'
-    const msgIn = el('textarea', 'ocw-offline-input') as HTMLTextAreaElement; msgIn.placeholder = 'Your message'; msgIn.rows = 3
-    const submit = el('button', 'ocw-offline-submit', 'Send message')
-    submit.addEventListener('click', () => {
-      if (!emailIn.value.trim() || !msgIn.value.trim()) return
-      // Post as a regular message (offline form is stored as a conversation once submitted)
-      this.h.onSend(`[Offline form]\nName: ${nameIn.value || 'Anonymous'}\nEmail: ${emailIn.value}\nMessage: ${msgIn.value}`)
-      this.offlinePanel.replaceChildren(el('div', 'ocw-offline-thanks', '✓ Message sent! We\'ll reply to your email.'))
-    })
-    form.append(nameIn, emailIn, msgIn, submit)
-    this.offlinePanel.append(form)
-  }
-
-  private buildCsatPanel(): void {
-    this.csatPanel.replaceChildren()
-    this.csatPanel.append(el('div', 'ocw-csat-title', 'How did we do?'))
-    const stars = el('div', 'ocw-csat-stars')
-    const btns: HTMLButtonElement[] = []
-    for (let i = 1; i <= 5; i++) {
-      const b = el('button', 'ocw-csat-star', '★')
-      b.dataset['score'] = String(i)
-      b.addEventListener('mouseenter', () => btns.forEach((bb, idx) => bb.classList.toggle('lit', idx < i)))
-      b.addEventListener('mouseleave', () => btns.forEach(bb => bb.classList.remove('lit')))
-      b.addEventListener('click', () => {
-        this.csatSubmitted = true
-        this.csatPanel.replaceChildren(el('div', 'ocw-csat-done', `Thanks for your ${i}★ rating!`))
-        this.h.onCsat?.(i)
-      })
-      btns.push(b); stars.append(b)
-    }
-    this.csatPanel.append(stars)
-  }
-
-  private subjectBuilt = false
-  /** Subject card from the server's Subject entity (per chatroom), with the
-   *  mount config as a fallback. Built once when data first arrives. */
-  // ── Co-browsing (shared whiteboard) ──────────────────────────────────────
-  private updateCobrowseUI(): void {
-    this.cobrowseCanvas.classList.toggle('active', this.cobrowseActive)
-    this.cobrowseToolbar.classList.toggle('active', this.cobrowseActive)
-    this.cobrowseHint.classList.toggle('active', this.cobrowseActive)
-    this.cobrowseBtn.classList.toggle('on', this.cobrowseActive)
-    if (this.cobrowseActive) {
-      this.resizeCobrowseCanvas()
-      this.redrawCobrowse()
-    }
-  }
-
-  private resizeCobrowseCanvas(): void {
-    this.cobrowseCanvas.width = this.root.clientWidth || 1
-    this.cobrowseCanvas.height = this.root.clientHeight || 1
-  }
-
-  /** Draw a stroke whose points are normalized to 0..1, scaled to the current
-   *  canvas size — so strokes line up across different viewport sizes. */
-  private drawStroke(stroke: { points: { x: number; y: number }[]; color: string; width: number }): void {
-    const ctx = this.cobrowseCanvas.getContext('2d')
-    if (!ctx || stroke.points.length < 2) return
-    const w = this.cobrowseCanvas.width, h = this.cobrowseCanvas.height
-    ctx.strokeStyle = stroke.color
-    ctx.lineWidth = Math.max(1, stroke.width * Math.min(w, h))
-    ctx.lineJoin = 'round'
-    ctx.lineCap = 'round'
-    ctx.beginPath()
-    ctx.moveTo(stroke.points[0]!.x * w, stroke.points[0]!.y * h)
-    for (const p of stroke.points.slice(1)) ctx.lineTo(p.x * w, p.y * h)
-    ctx.stroke()
-  }
-
-  private redrawCobrowse(): void {
-    const ctx = this.cobrowseCanvas.getContext('2d')
-    if (!ctx) return
-    ctx.clearRect(0, 0, this.cobrowseCanvas.width, this.cobrowseCanvas.height)
-    for (const s of this.storeRef?.annotations ?? []) this.drawStroke(s)
-  }
-
-  private bindCobrowsePointerEvents(): void {
-    let drawing = false
-    let current: { x: number; y: number }[] = []
-    const posFromEvent = (e: PointerEvent): { x: number; y: number } => {
-      const rect = this.cobrowseCanvas.getBoundingClientRect()
-      const x = rect.width  > 0 ? (e.clientX - rect.left) / rect.width  : 0
-      const y = rect.height > 0 ? (e.clientY - rect.top)  / rect.height : 0
-      return { x: Math.min(1, Math.max(0, x)), y: Math.min(1, Math.max(0, y)) }
-    }
-    const STROKE_WIDTH = 0.006 // normalized — ~6px on a 1000px-wide canvas
-    this.cobrowseCanvas.addEventListener('pointerdown', (e) => {
-      if (!this.cobrowseActive) return
-      drawing = true
-      current = [posFromEvent(e)]
-      this.cobrowseCanvas.setPointerCapture(e.pointerId)
-    })
-    this.cobrowseCanvas.addEventListener('pointermove', (e) => {
-      if (!drawing) return
-      current.push(posFromEvent(e))
-      this.redrawCobrowse()
-      this.drawStroke({ points: current, color: this.cobrowseColor, width: STROKE_WIDTH })
-    })
-    const finish = (e: PointerEvent): void => {
-      if (!drawing) return
-      drawing = false
-      if (current.length > 1) {
-        this.h.onAnnotate?.({ id: `an_${Date.now()}_${Math.random().toString(36).slice(2)}`, points: current, color: this.cobrowseColor, width: STROKE_WIDTH })
-      }
-      current = []
-      try { this.cobrowseCanvas.releasePointerCapture(e.pointerId) } catch { /* not captured */ }
-    }
-    this.cobrowseCanvas.addEventListener('pointerup', finish)
-    this.cobrowseCanvas.addEventListener('pointercancel', finish)
-  }
-
-  private buildSubjectCard(store: ChatStore): void {
-    if (this.subjectBuilt) return
-    const s = store.subject
-    const cfg = this.cfg.subject
-    // Only show the subject card when there is actual subject data (from the
-    // server) or an explicit subject config passed by the embedder (title,
-    // tags, status). Never fall back to store.name — that's the domain/profile
-    // name and is already shown in the header; rendering it here as well is
-    // what caused the duplication seen in the Hotel front desk screenshot.
-    const title = s?.title ?? cfg?.title
-    if (!title) return
-    this.subjectBuilt = true
-    this.subjectCard.replaceChildren()
-    this.subjectCard.append(el('div', 'ocw-subject-title', title))
-    if (cfg?.subtitle) this.subjectCard.append(el('div', 'ocw-subject-sub', cfg.subtitle))
-    const tags = el('div', 'ocw-tags')
-    if (s) for (const [k, v] of Object.entries(s.fields)) tags.append(el('span', 'ocw-tag', `${k}: ${v}`))
-    else for (const t of cfg?.tags ?? []) tags.append(el('span', 'ocw-tag', t))
-    if (tags.childNodes.length) this.subjectCard.append(tags)
-    const status = s?.state ?? cfg?.status
-    if (status) { this.statusBadge.textContent = status; this.statusBadge.style.display = 'inline-flex' }
-  }
-
-  private chipEl(a: ManifestAction): HTMLButtonElement {
-    const btn = el('button', 'ocw-chip', a.icon ? `${a.icon} ${a.label}` : a.label)
-    btn.dataset['actionId'] = a.id
-    btn.addEventListener('click', async () => {
-      if (a.confirm && !(await this.confirm(a.label))) return
-      if (a.input?.length) this.openForm(a)
-      else this.h.onInvoke(a.id)
-    })
-    return btn
-  }
-
-  /** In-widget confirmation modal (replaces window.confirm). */
-  private confirm(label: string): Promise<boolean> {
-    return new Promise((resolve) => {
-      const overlay = el('div', 'ocw-modal')
-      const card = el('div', 'ocw-modal-card')
-      card.append(el('div', 'ocw-modal-title', label))
-      card.append(el('div', 'ocw-modal-body', `Confirm “${label}”?`))
-      const row = el('div', 'ocw-modal-actions')
-      const cancel = el('button', 'ocw-modal-cancel', 'Cancel')
-      const ok = el('button', 'ocw-modal-ok', 'Confirm')
-      const close = (v: boolean) => { overlay.remove(); resolve(v) }
-      cancel.addEventListener('click', () => close(false))
-      ok.addEventListener('click', () => close(true))
-      overlay.addEventListener('click', (e) => { if (e.target === overlay) close(false) })
-      row.append(cancel, ok); card.append(row); overlay.append(card)
-      this.root.append(overlay)
-      ok.focus()
-    })
-  }
-
-  /** Inline form for a form-effect action: typed inputs (date picker, number,
-   *  text) rendered above the composer — no browser prompts. */
-  private openForm(a: ManifestAction): void {
-    this.formHost.replaceChildren()
-    const panel = el('div', 'ocw-form')
-    panel.append(el('div', 'ocw-form-title', a.icon ? `${a.icon} ${a.label}` : a.label))
-    const inputs = new Map<string, HTMLInputElement>()
-    for (const f of a.input ?? []) {
-      const row = el('label', 'ocw-form-row'); row.append(el('span', 'ocw-form-lbl', f.label))
-      if (f.type === 'select' && f.options?.length) {
-        const sel = el('select', 'ocw-form-input')
-        if (!f.required) sel.append(el('option', undefined, '— select —'))
-        for (const opt of f.options) { const o = el('option'); o.value = opt; o.textContent = opt; sel.append(o) }
-        if (f.required) sel.required = true
-        row.append(sel)
-        inputs.set(f.name, sel as unknown as HTMLInputElement)
-      } else {
-        const inp = el('input', 'ocw-form-input')
-        inp.type = f.type === 'number' ? 'number' : f.type === 'date' ? 'datetime-local' : 'text'
-        if (f.required) inp.required = true
-        row.append(inp); inputs.set(f.name, inp)
-      }
-      panel.append(row)
-    }
-    const actions = el('div', 'ocw-form-actions')
-    const cancel = el('button', 'ocw-form-cancel', 'Cancel')
-    const submit = el('button', 'ocw-form-submit', 'Send')
-    cancel.addEventListener('click', () => this.formHost.replaceChildren())
-    submit.addEventListener('click', () => {
-      const out: Record<string, unknown> = {}
-      for (const [name, inp] of inputs) {
-        if (inp.required && !inp.value) { inp.style.borderColor = '#e5484d'; return }
-        out[name] = inp.type === 'number' ? Number(inp.value) : inp.value
-      }
-      this.formHost.replaceChildren()
-      this.h.onInvoke(a.id, out)
-    })
-    actions.append(cancel, submit); panel.append(actions)
-    this.formHost.append(panel)
-    inputs.values().next().value?.focus()
-  }
-
-  private messageEl(m: RenderMessage, store: ChatStore): HTMLElement {
-    if (m.senderRole === 'system') {
-      const sys = el('div', 'ocw-sys'); sys.textContent = m.deletedAt ? 'message deleted' : contentText(m.content); return sys
-    }
-    const mine = m.senderId === this.me
-    const isNote = !!m.internal
-    const row = el('div', `ocw-row ${isNote ? 'ocw-note mine' : mine ? 'mine' : 'theirs'} ${m.senderRole === 'bot' ? 'ocw-bot' : ''}`)
-    if (!mine && !isNote) row.append(el('div', 'ocw-dot', m.senderRole === 'bot' ? '🤖' : '🧑'))
-    const col = el('div')
-    const bubbleWrap = el('div', 'ocw-bubble-wrap')
-    // Reply-to context if present
-    if (m.replyToId) {
-      const replyCtx = el('div', 'ocw-reply-to', '↩ replying to a message')
-      replyCtx.style.cssText = 'font-size:11px;color:var(--ocw-mut);margin-bottom:2px;font-style:italic'
-      col.append(replyCtx)
-    }
-    const bubble = el('div', 'ocw-bubble')
-    let textNode: Text | null = null
-    if (m.deletedAt) bubble.append(el('span', 'ocw-deleted', 'message deleted'))
-    else if (m.content.kind === 'attachment') {
-      const c = m.content
-      if (c.mime?.startsWith('image/')) {
-        const img = document.createElement('img')
-        img.src = c.url; img.alt = c.name ?? 'image'
-        img.style.cssText = 'max-width:220px;max-height:160px;border-radius:10px;display:block;cursor:pointer'
-        img.addEventListener('click', () => window.open(c.url, '_blank'))
-        bubble.append(img)
-      } else {
-        const a = document.createElement('a')
-        a.href = c.url; a.target = '_blank'; a.rel = 'noopener'
-        a.style.cssText = 'display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none'
-        a.append(el('span', undefined, '📄'), el('span', undefined, c.name ?? 'file'))
-        bubble.append(a)
-      }
-    } else {
-      if (m.content.kind === 'appointment') {
-        const ap = m.content
-        const card = el('div', 'ocw-appt')
-        card.append(el('div', 'ocw-appt-title', `\u{1F4C5} ${ap.title}`))
-        card.append(el('div', 'ocw-appt-time', new Date(ap.startIso).toLocaleString() + ' \u2013 ' + new Date(ap.endIso).toLocaleTimeString()))
-        if (ap.location) card.append(el('div', 'ocw-appt-loc', `\u{1F4CD} ${ap.location}`))
-        if (ap.description) card.append(el('div', 'ocw-appt-desc', ap.description))
-        const links = el('div', 'ocw-appt-links')
-        const gLink = document.createElement('a'); gLink.href = ap.googleUrl; gLink.target = '_blank'; gLink.rel = 'noopener'; gLink.className = 'ocw-appt-btn'; gLink.textContent = '\u{1F4C5} Add to Google Calendar'
-        const iLink = document.createElement('a'); iLink.href = ap.icalUrl; iLink.download = `${ap.title}.ics`; iLink.className = 'ocw-appt-btn ocw-appt-btn-sec'; iLink.textContent = '\u{1F34E} Apple / iCal'
-        links.append(gLink, iLink); card.append(links); bubble.append(card)
-      } else {
-        textNode = document.createTextNode(contentText(m.content))
-        bubble.append(textNode)
-        if (m.editedAt) bubble.append(el('span', 'ocw-edited', '(edited)'))
-      }
-    }
-    bubbleWrap.append(bubble)
-
-    // Live translation: only for the other party's plain-text messages (not notes).
-    if (!mine && !isNote && this.h.onTranslate && m.content.kind === 'text' && !m.deletedAt && m.seq > 0 && textNode) {
-      const original = m.content.text
-      if (original.trim()) {
-        const translateBtn = el('button', 'ocw-translate-btn', '🌐')
-        translateBtn.type = 'button'
-        translateBtn.title = 'Translate'
-        translateBtn.addEventListener('click', (e) => {
-          e.stopPropagation()
-          if (this.showingTranslation.has(m.id)) {
-            this.showingTranslation.delete(m.id)
-            textNode!.textContent = original
-            translateBtn.textContent = '🌐'
-            translateBtn.title = 'Translate'
-            return
-          }
-          const cached = this.translationCache.get(m.id)
-          if (cached !== undefined) {
-            this.showingTranslation.add(m.id)
-            textNode!.textContent = cached
-            translateBtn.textContent = '↩'
-            translateBtn.title = 'Show original'
-            return
-          }
-          translateBtn.textContent = '⏳'
-          void this.h.onTranslate!(original).then((result) => {
-            if (result === null) {
-              translateBtn.textContent = '⚠️'
-              translateBtn.title = 'Translation unavailable'
-              setTimeout(() => { translateBtn.textContent = '🌐'; translateBtn.title = 'Translate' }, 1500)
-              return
-            }
-            this.translationCache.set(m.id, result)
-            this.showingTranslation.add(m.id)
-            textNode!.textContent = result
-            translateBtn.textContent = '↩'
-            translateBtn.title = 'Show original'
-          })
-        })
-        bubbleWrap.append(translateBtn)
-      }
-    }
-    // Edit/delete context menu on own non-deleted messages
-    if (mine && !m.deletedAt && m.seq > 0 && (this.h.onEdit ?? this.h.onDelete)) {
-      const menu = el('div', 'ocw-msg-menu')
-      if (this.h.onEdit) {
-        const editBtn = el('button', undefined, '✏️')
-        editBtn.title = 'Edit'
-        editBtn.addEventListener('click', (e) => {
-          e.stopPropagation()
-          const text = contentText(m.content)
-          const newText = prompt('Edit message:', text)
-          if (newText !== null && newText.trim() && newText !== text) this.h.onEdit!(m.id, newText.trim())
-        })
-        menu.append(editBtn)
-      }
-      if (this.h.onDelete) {
-        const delBtn = el('button', 'del', '🗑')
-        delBtn.title = 'Delete'
-        delBtn.addEventListener('click', (e) => { e.stopPropagation(); this.h.onDelete!(m.id) })
-        menu.append(delBtn)
-      }
-      bubbleWrap.append(menu)
-    }
-    col.append(bubbleWrap)
-
-    // Reactions: existing pills + add-reaction picker (hover-revealed)
-    if (this.h.onReact && !m.deletedAt && m.seq > 0) {
-      const reactWrap = el('div', 'ocw-react-wrap')
-      const reactRow = el('div', 'ocw-react')
-      // Existing reaction pills
-      if (m.reactions && Object.keys(m.reactions).length) {
-        for (const [emoji, users] of Object.entries(m.reactions)) {
-          const pill = el('button', `ocw-react-pill${(users as string[]).includes(this.me) ? ' mine' : ''}`, `${emoji} ${(users as string[]).length}`)
-          pill.addEventListener('click', () => this.h.onReact?.(m.id, emoji, (users as string[]).includes(this.me)))
-          reactRow.append(pill)
-        }
-      }
-      // Add-reaction button + picker
-      const addBtn = el('button', 'ocw-react-btn', '＋')
-      const picker = el('div', 'ocw-react-picker')
-      for (const emoji of REACTION_EMOJIS) {
-        const pb = el('button', undefined, emoji)
-        pb.addEventListener('click', (e) => {
-          e.stopPropagation()
-          const alreadyReacted = m.reactions?.[emoji]?.includes(this.me as never)
-          this.h.onReact?.(m.id, emoji, !!alreadyReacted)
-          picker.style.display = 'none'
-        })
-        picker.append(pb)
-      }
-      picker.style.display = 'none'
-      addBtn.addEventListener('click', (e) => {
-        e.stopPropagation()
-        picker.style.display = picker.style.display === 'none' ? 'flex' : 'none'
-      })
-      document.addEventListener('click', () => { picker.style.display = 'none' }, { once: true })
-      reactRow.append(addBtn)
-      reactWrap.append(reactRow, picker)
-      col.append(reactWrap)
-    } else if (m.reactions && Object.keys(m.reactions).length) {
-      col.append(el('div', 'ocw-react', Object.entries(m.reactions).map(([e, u]) => `${e}${(u as string[]).length}`).join(' ')))
-    }
-    void store  // suppress unused warning — store available for future use
-
-    const meta = el('div', 'ocw-time ocw-meta', fmtTime(m.ts))
-    if (mine && m.status) { const t = el('span', 'ocw-tick', tick(m.status)); meta.append(t) }
-    // "Seen" indicator when agent has read past this message
-    if (mine && m.seq > 0 && store.lastReadByOthers >= m.seq) {
-      meta.append(el('span', 'ocw-seen', ' · Seen'))
-    }
-    col.append(meta)
-    row.append(col)
-    return row
-  }
-}
-
-function tick(s: NonNullable<RenderMessage['status']>): string {
-  switch (s) { case 'read': case 'delivered': return '✓✓'; case 'sent': return '✓'; default: return '🕓' }
-}