@paramms/chat-widget 0.1.0

package/src/renderer.ts

@@ -0,0 +1,906 @@
+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 '🕓' }
+}