@paramms/chat-widget 0.1.0

package/src/__tests__/ime.test.ts

@@ -0,0 +1,93 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest'
+import { asUserId, asConversationId } from '../protocol/index.js'
+import { ChatStore } from '../store.js'
+import { Renderer } from '../renderer.js'
+
+const me = 'alice'
+const cid = asConversationId('c1')
+
+function openedConv() {
+  return {
+    type: 'opened' as const,
+    conversation: {
+      id: cid, tenantId: 't' as never, profileId: 'p' as never,
+      guestId: asUserId(me), participants: [asUserId(me)],
+      state: 'open', lastSeq: 0, createdAt: 0, updatedAt: 0,
+    },
+  }
+}
+
+function setup() {
+  const root = document.createElement('div')
+  const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+  const store = new ChatStore(asUserId(me))
+  const r = new Renderer(root, me, h)
+  store.apply(openedConv())
+  r.render(store)
+  const textarea = root.querySelector('textarea') as HTMLTextAreaElement
+  return { root, h, textarea }
+}
+
+describe('Renderer — IME composition guard (CJK input)', () => {
+  it('does NOT send when Enter confirms an IME composition candidate', () => {
+    const { h, textarea } = setup()
+    textarea.value = '음식'
+    // Simulates the keydown fired by the IME when the user presses Enter to
+    // CONFIRM a composed Korean/Japanese/Chinese candidate — not to submit
+    // the message. isComposing: true is how browsers signal this.
+    const ev = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+    Object.defineProperty(ev, 'isComposing', { value: true })
+    textarea.dispatchEvent(ev)
+    expect(h.onSend).not.toHaveBeenCalled()
+  })
+
+  it('falls back to keyCode 229 for IMEs that do not set isComposing', () => {
+    const { h, textarea } = setup()
+    textarea.value = '음식'
+    const ev = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+    Object.defineProperty(ev, 'isComposing', { value: false })
+    Object.defineProperty(ev, 'keyCode', { value: 229 })
+    textarea.dispatchEvent(ev)
+    expect(h.onSend).not.toHaveBeenCalled()
+  })
+
+  it('still sends normally on a real (non-IME) Enter press', () => {
+    const { h, textarea } = setup()
+    textarea.value = 'hello'
+    const ev = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+    Object.defineProperty(ev, 'isComposing', { value: false })
+    textarea.dispatchEvent(ev)
+    expect(h.onSend).toHaveBeenCalledTimes(1)
+    expect(h.onSend).toHaveBeenCalledWith('hello')
+  })
+
+  it('does not produce a second send for the real Enter that follows an IME-confirm Enter', () => {
+    // Reproduces the exact reported bug: typing "음식" via IME, where Enter
+    // fires once to confirm the composition and again to submit — only the
+    // second, real Enter should trigger a send, and with the FULL text.
+    const { h, textarea } = setup()
+
+    textarea.value = '음식'
+    const composingEnter = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+    Object.defineProperty(composingEnter, 'isComposing', { value: true })
+    textarea.dispatchEvent(composingEnter)
+
+    // Real submit keystroke, composition has ended.
+    const realEnter = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+    Object.defineProperty(realEnter, 'isComposing', { value: false })
+    textarea.dispatchEvent(realEnter)
+
+    expect(h.onSend).toHaveBeenCalledTimes(1)
+    expect(h.onSend).toHaveBeenCalledWith('음식')
+  })
+
+  it('shift+Enter still inserts a newline (not a send) regardless of composition state', () => {
+    const { h, textarea } = setup()
+    textarea.value = 'line one'
+    const ev = new KeyboardEvent('keydown', { key: 'Enter', shiftKey: true, bubbles: true, cancelable: true })
+    Object.defineProperty(ev, 'isComposing', { value: false })
+    textarea.dispatchEvent(ev)
+    expect(h.onSend).not.toHaveBeenCalled()
+  })
+})

package/src/__tests__/render.test.ts

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest'
+import { asUserId, asConversationId, asMessageId, asActionId } from '../protocol/index.js'
+import { ChatStore } from '../store.js'
+import { Renderer } from '../renderer.js'
+
+const me = 'alice'
+const cid = asConversationId('c1')
+
+describe('Renderer (jsdom)', () => {
+  it('renders messages and actions, and wires send/invoke', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+
+    store.apply({ type: 'opened', conversation: { id: cid, tenantId: 't' as never, profileId: 'p' as never, guestId: asUserId(me), participants: [asUserId(me)], state: 'open', lastSeq: 0, createdAt: 0, updatedAt: 0 } })
+    store.apply({ type: 'message', message: { id: asMessageId('s1'), conversationId: cid, seq: 1, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'Welcome!' }, ts: 1 } })
+    store.apply({ type: 'manifest', conversationId: cid, version: 1, actions: [{ id: asActionId('ai'), label: 'Ask AI', audience: 'guest', surface: 'toolbar' }] })
+    r.render(store)
+
+    expect(root.querySelector('.ocw-scroll')!.textContent).toContain('Welcome!')
+    const actionBtn = root.querySelector('.ocw-chip') as HTMLButtonElement
+    expect(actionBtn.textContent).toBe('Ask AI')
+
+    actionBtn.click()
+    expect(h.onInvoke).toHaveBeenCalledWith('ai')
+
+    // read receipt fired for the other party's message
+    expect(h.onReadUpTo).toHaveBeenCalledWith(1)
+
+    const input = root.querySelector('.ocw-input textarea') as HTMLTextAreaElement
+    input.value = 'hello there'
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(h.onSend).toHaveBeenCalledWith('hello there')
+  })
+
+  it('form action opens an inline form with typed inputs and invokes with values', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply({ type: 'opened', conversation: { id: cid, tenantId: 't' as never, profileId: 'p' as never, guestId: asUserId(me), participants: [asUserId(me)], state: 'open', lastSeq: 0, createdAt: 0, updatedAt: 0 } })
+    store.apply({ type: 'manifest', conversationId: cid, version: 1, actions: [
+      { id: asActionId('appointment'), label: 'Schedule', audience: 'guest', surface: 'toolbar',
+        input: [{ name: 'time', label: 'Time', type: 'date', required: true }] },
+    ] })
+    r.render(store)
+
+    ;(root.querySelector('.ocw-chip') as HTMLButtonElement).click()
+    const dateInput = root.querySelector('.ocw-form-input') as HTMLInputElement
+    expect(dateInput.type).toBe('datetime-local')               // real date+time picker, not a prompt
+    dateInput.value = '2026-06-10T14:30'
+    ;(root.querySelector('.ocw-form-submit') as HTMLButtonElement).click()
+    expect(h.onInvoke).toHaveBeenCalledWith('appointment', { time: '2026-06-10T14:30' })
+    expect(root.querySelector('.ocw-form')).toBeNull()           // form closes after submit
+  })
+})

package/src/__tests__/render_new.test.ts

@@ -0,0 +1,441 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest'
+import { asUserId, asConversationId, asMessageId, asActionId } from '../protocol/index.js'
+import { ChatStore } from '../store.js'
+import { Renderer } from '../renderer.js'
+
+const me = 'alice'
+const cid = asConversationId('c1')
+
+function openedConv() {
+  return {
+    type: 'opened' as const,
+    conversation: {
+      id: cid, tenantId: 't' as never, profileId: 'p' as never,
+      guestId: asUserId(me), participants: [asUserId(me)],
+      state: 'open', lastSeq: 0, createdAt: 0, updatedAt: 0,
+    },
+  }
+}
+
+// ── Reaction UI ───────────────────────────────────────────────────────────────
+
+describe('Renderer — reaction UI', () => {
+  it('renders existing reaction pills from message data', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onReact: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({
+      type: 'message', message: {
+        id: asMessageId('m1'), conversationId: cid, seq: 1,
+        senderId: asUserId('bob'), senderRole: 'agent',
+        content: { kind: 'text', text: 'Hi!' }, ts: 1,
+        reactions: { '👍': [asUserId('carol')], '❤️': [asUserId('alice'), asUserId('dave')] },
+      },
+    })
+    r.render(store)
+
+    const pills = root.querySelectorAll('.ocw-react-pill')
+    expect(pills.length).toBe(2)
+    expect(Array.from(pills).map(p => p.textContent)).toEqual(
+      expect.arrayContaining(['👍 1', '❤️ 2']),
+    )
+  })
+
+  it('marks my own reaction pill with "mine" class', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onReact: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({
+      type: 'message', message: {
+        id: asMessageId('m1'), conversationId: cid, seq: 1,
+        senderId: asUserId('bob'), senderRole: 'agent',
+        content: { kind: 'text', text: 'Hi!' }, ts: 1,
+        reactions: { '👍': [asUserId(me)] },
+      },
+    })
+    r.render(store)
+    const pill = root.querySelector('.ocw-react-pill') as HTMLElement
+    expect(pill.classList.contains('mine')).toBe(true)
+  })
+
+  it('clicking an existing reaction pill calls onReact with remove=true if already reacted', () => {
+    const root = document.createElement('div')
+    const onReact = vi.fn()
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onReact }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({
+      type: 'message', message: {
+        id: asMessageId('m1'), conversationId: cid, seq: 1,
+        senderId: asUserId('bob'), senderRole: 'agent',
+        content: { kind: 'text', text: 'Hi!' }, ts: 1,
+        reactions: { '👍': [asUserId(me)] },
+      },
+    })
+    r.render(store)
+    ;(root.querySelector('.ocw-react-pill') as HTMLButtonElement).click()
+    expect(onReact).toHaveBeenCalledWith('m1', '👍', true)  // remove=true (was mine)
+  })
+
+  it('shows add-reaction (+) button for non-deleted messages with seq > 0', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onReact: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'message', message: { id: asMessageId('m2'), conversationId: cid, seq: 1, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'yo' }, ts: 1 } })
+    r.render(store)
+    expect(root.querySelector('.ocw-react-btn')).not.toBeNull()
+  })
+
+  it('clicking + button toggles picker visibility', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onReact: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'message', message: { id: asMessageId('m3'), conversationId: cid, seq: 1, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'yo' }, ts: 1 } })
+    r.render(store)
+    const addBtn = root.querySelector('.ocw-react-btn') as HTMLButtonElement
+    const picker = root.querySelector('.ocw-react-picker') as HTMLElement
+    expect(picker.style.display).toBe('none')
+    addBtn.click()
+    expect(picker.style.display).toBe('flex')
+  })
+
+  it('clicking a picker emoji calls onReact with remove=false (new reaction)', () => {
+    const root = document.createElement('div')
+    const onReact = vi.fn()
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onReact }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'message', message: { id: asMessageId('m4'), conversationId: cid, seq: 2, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'hello' }, ts: 2 } })
+    r.render(store)
+    ;(root.querySelector('.ocw-react-btn') as HTMLButtonElement).click()
+    const pickerBtns = root.querySelectorAll('.ocw-react-picker button')
+    expect(pickerBtns.length).toBeGreaterThan(0)
+    ;(pickerBtns[0] as HTMLButtonElement).click()
+    expect(onReact).toHaveBeenCalledWith('m4', expect.any(String), false)
+  })
+
+  it('does not render reaction UI when onReact is not provided', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({
+      type: 'message', message: {
+        id: asMessageId('m5'), conversationId: cid, seq: 1,
+        senderId: asUserId('bob'), senderRole: 'agent',
+        content: { kind: 'text', text: 'Hi!' }, ts: 1,
+        reactions: { '👍': [asUserId('carol')] },
+      },
+    })
+    r.render(store)
+    expect(root.querySelector('.ocw-react-btn')).toBeNull()
+    expect(root.querySelector('.ocw-react-pill')).toBeNull()
+    // Falls back to plain text reaction display
+    expect(root.querySelector('.ocw-react')?.textContent).toContain('👍')
+  })
+})
+
+// ── CSAT panel ────────────────────────────────────────────────────────────────
+
+describe('Renderer — CSAT panel', () => {
+  it('shows star rating panel when state is terminal (resolved)', () => {
+    const root = document.createElement('div')
+    const onCsat = vi.fn()
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onCsat }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply({ type: 'opened', conversation: { id: cid, tenantId: 't' as never, profileId: 'p' as never, guestId: asUserId(me), participants: [asUserId(me)], state: 'resolved', lastSeq: 1, createdAt: 0, updatedAt: 0 } })
+    store.apply({ type: 'message', message: { id: asMessageId('m1'), conversationId: cid, seq: 1, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'Done!' }, ts: 1 } })
+    r.render(store)
+    const panel = root.querySelector('.ocw-csat') as HTMLElement
+    expect(panel.style.display).not.toBe('none')
+    expect(panel.querySelectorAll('.ocw-csat-star').length).toBe(5)
+  })
+
+  it('does not show CSAT when state is not terminal', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onCsat: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply({ type: 'opened', conversation: { id: cid, tenantId: 't' as never, profileId: 'p' as never, guestId: asUserId(me), participants: [asUserId(me)], state: 'open', lastSeq: 0, createdAt: 0, updatedAt: 0 } })
+    r.render(store)
+    const panel = root.querySelector('.ocw-csat') as HTMLElement
+    expect(panel.style.display).toBe('none')
+  })
+
+  it('clicking a star calls onCsat with the correct score and replaces panel', () => {
+    const root = document.createElement('div')
+    const onCsat = vi.fn()
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onCsat }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply({ type: 'opened', conversation: { id: cid, tenantId: 't' as never, profileId: 'p' as never, guestId: asUserId(me), participants: [asUserId(me)], state: 'resolved', lastSeq: 1, createdAt: 0, updatedAt: 0 } })
+    store.apply({ type: 'message', message: { id: asMessageId('m1'), conversationId: cid, seq: 1, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'Done!' }, ts: 1 } })
+    r.render(store)
+
+    const stars = root.querySelectorAll('.ocw-csat-star')
+    ;(stars[3] as HTMLButtonElement).click()  // 4th star = score 4
+    expect(onCsat).toHaveBeenCalledWith(4)
+    // Panel replaced with thank-you
+    expect(root.querySelector('.ocw-csat')!.textContent).toContain('4★')
+    expect(root.querySelector('.ocw-csat-star')).toBeNull()
+  })
+
+  it('does not show CSAT when onCsat handler not provided', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply({ type: 'opened', conversation: { id: cid, tenantId: 't' as never, profileId: 'p' as never, guestId: asUserId(me), participants: [asUserId(me)], state: 'resolved', lastSeq: 1, createdAt: 0, updatedAt: 0 } })
+    store.apply({ type: 'message', message: { id: asMessageId('m1'), conversationId: cid, seq: 1, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'Done!' }, ts: 1 } })
+    r.render(store)
+    expect((root.querySelector('.ocw-csat') as HTMLElement).style.display).toBe('none')
+  })
+
+  it('CSAT does not show again after being submitted', () => {
+    const root = document.createElement('div')
+    const onCsat = vi.fn()
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onCsat }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply({ type: 'opened', conversation: { id: cid, tenantId: 't' as never, profileId: 'p' as never, guestId: asUserId(me), participants: [asUserId(me)], state: 'resolved', lastSeq: 1, createdAt: 0, updatedAt: 0 } })
+    store.apply({ type: 'message', message: { id: asMessageId('m1'), conversationId: cid, seq: 1, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'Done!' }, ts: 1 } })
+    r.render(store)
+    ;(root.querySelectorAll('.ocw-csat-star')[0] as HTMLButtonElement).click()
+    // Re-render: CSAT should remain in thank-you state, not re-show stars
+    r.render(store)
+    expect(root.querySelector('.ocw-csat-star')).toBeNull()
+    expect(onCsat).toHaveBeenCalledTimes(1)
+  })
+
+  it('shows for other terminal states: sold, closed, issued, checked_out', () => {
+    for (const state of ['sold', 'closed', 'issued', 'checked_out']) {
+      const root = document.createElement('div')
+      const onCsat = vi.fn()
+      const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onCsat }
+      const store = new ChatStore(asUserId(me))
+      const r = new Renderer(root, me, h)
+      store.apply({ type: 'opened', conversation: { id: cid, tenantId: 't' as never, profileId: 'p' as never, guestId: asUserId(me), participants: [asUserId(me)], state, lastSeq: 1, createdAt: 0, updatedAt: 0 } })
+      store.apply({ type: 'message', message: { id: asMessageId('mx'), conversationId: cid, seq: 1, senderId: asUserId('agent'), senderRole: 'agent', content: { kind: 'text', text: 'done' }, ts: 1 } })
+      r.render(store)
+      expect((root.querySelector('.ocw-csat') as HTMLElement).style.display).not.toBe('none'), `CSAT should show for state="${state}"`
+    }
+  })
+})
+
+// ── Select field type ─────────────────────────────────────────────────────────
+
+describe('Renderer — select field in form actions', () => {
+  it('renders a <select> element for select-type fields', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({
+      type: 'manifest', conversationId: cid, version: 1, actions: [
+        {
+          id: asActionId('book'), label: 'Book Room', audience: 'guest', surface: 'toolbar',
+          input: [
+            { name: 'room_type', label: 'Room Type', type: 'select', required: true, options: ['Standard', 'Deluxe', 'Suite'] },
+          ],
+        },
+      ],
+    })
+    r.render(store)
+    ;(root.querySelector('.ocw-chip') as HTMLButtonElement).click()
+
+    const sel = root.querySelector('.ocw-form-input') as HTMLSelectElement
+    expect(sel.tagName).toBe('SELECT')
+    const options = Array.from(sel.options).map(o => o.value)
+    expect(options).toEqual(expect.arrayContaining(['Standard', 'Deluxe', 'Suite']))
+  })
+
+  it('select field invokes with chosen value on submit', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({
+      type: 'manifest', conversationId: cid, version: 1, actions: [
+        {
+          id: asActionId('tier'), label: 'Choose Tier', audience: 'guest', surface: 'toolbar',
+          input: [{ name: 'tier', label: 'Tier', type: 'select', required: true, options: ['Basic', 'Pro', 'Enterprise'] }],
+        },
+      ],
+    })
+    r.render(store)
+    ;(root.querySelector('.ocw-chip') as HTMLButtonElement).click()
+
+    const sel = root.querySelector('.ocw-form-input') as HTMLSelectElement
+    sel.value = 'Pro'
+    ;(root.querySelector('.ocw-form-submit') as HTMLButtonElement).click()
+    expect(h.onInvoke).toHaveBeenCalledWith('tier', { tier: 'Pro' })
+  })
+
+  it('mixes select and text fields in the same form', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({
+      type: 'manifest', conversationId: cid, version: 1, actions: [
+        {
+          id: asActionId('booking'), label: 'Book', audience: 'guest', surface: 'toolbar',
+          input: [
+            { name: 'type', label: 'Type', type: 'select', required: true, options: ['A', 'B'] },
+            { name: 'note', label: 'Note', type: 'text', required: false },
+          ],
+        },
+      ],
+    })
+    r.render(store)
+    ;(root.querySelector('.ocw-chip') as HTMLButtonElement).click()
+
+    const formInputs = root.querySelectorAll('.ocw-form-input')
+    expect(formInputs.length).toBe(2)
+    expect(formInputs[0]!.tagName).toBe('SELECT')
+    expect(formInputs[1]!.tagName).toBe('INPUT')
+  })
+})
+
+// ── History / load-more ───────────────────────────────────────────────────────
+
+describe('Renderer — load-more history', () => {
+  it('shows load-more button when store.hasMoreHistory and onLoadMore provided', () => {
+    const root = document.createElement('div')
+    const onLoadMore = vi.fn()
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onLoadMore }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    // Fake hasMoreHistory by injecting a synthetic history frame
+    store.apply({ type: 'history', conversationId: cid, messages: [], hasMore: true })
+    r.render(store)
+    const btn = root.querySelector('.ocw-load-more') as HTMLButtonElement
+    expect(btn).not.toBeNull()
+    btn.click()
+    expect(onLoadMore).toHaveBeenCalledTimes(1)
+  })
+
+  it('hides load-more button when hasMoreHistory is false', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onLoadMore: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'history', conversationId: cid, messages: [], hasMore: false })
+    r.render(store)
+    expect(root.querySelector('.ocw-load-more')).toBeNull()
+  })
+
+  it('hides load-more button when onLoadMore not provided', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'history', conversationId: cid, messages: [], hasMore: true })
+    r.render(store)
+    expect(root.querySelector('.ocw-load-more')).toBeNull()
+  })
+})
+
+// ── Edit / delete context menu ────────────────────────────────────────────────
+
+describe('Renderer — edit/delete context menu', () => {
+  it('shows edit and delete buttons on own non-deleted messages', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onEdit: vi.fn(), onDelete: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'message', message: { id: asMessageId('m1'), conversationId: cid, seq: 1, senderId: asUserId(me), senderRole: 'guest', content: { kind: 'text', text: 'my msg' }, ts: 1 } })
+    r.render(store)
+    const menu = root.querySelector('.ocw-msg-menu')
+    expect(menu).not.toBeNull()
+    expect(menu!.querySelectorAll('button').length).toBe(2)
+  })
+
+  it('delete button calls onDelete with message id', () => {
+    const root = document.createElement('div')
+    const onDelete = vi.fn()
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onDelete }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'message', message: { id: asMessageId('m2'), conversationId: cid, seq: 2, senderId: asUserId(me), senderRole: 'guest', content: { kind: 'text', text: 'bye' }, ts: 2 } })
+    r.render(store)
+    const delBtn = root.querySelector('.ocw-msg-menu .del') as HTMLButtonElement
+    expect(delBtn).not.toBeNull()
+    delBtn.click()
+    expect(onDelete).toHaveBeenCalledWith('m2')
+  })
+
+  it('does not show context menu on other users messages', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn(), onEdit: vi.fn(), onDelete: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'message', message: { id: asMessageId('m3'), conversationId: cid, seq: 1, senderId: asUserId('bob'), senderRole: 'agent', content: { kind: 'text', text: 'hi' }, ts: 1 } })
+    r.render(store)
+    expect(root.querySelector('.ocw-msg-menu')).toBeNull()
+  })
+
+  it('does not show context menu when handlers not provided', () => {
+    const root = document.createElement('div')
+    const h = { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() }
+    const store = new ChatStore(asUserId(me))
+    const r = new Renderer(root, me, h)
+    store.apply(openedConv())
+    store.apply({ type: 'message', message: { id: asMessageId('m4'), conversationId: cid, seq: 1, senderId: asUserId(me), senderRole: 'guest', content: { kind: 'text', text: 'hi' }, ts: 1 } })
+    r.render(store)
+    expect(root.querySelector('.ocw-msg-menu')).toBeNull()
+  })
+})
+
+// ── Connection status indicator ───────────────────────────────────────────────
+
+describe('Renderer — connection status', () => {
+  it('setConnStatus("connecting") shows connecting label', () => {
+    const root = document.createElement('div')
+    const r = new Renderer(root, me, { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() })
+    r.setConnStatus('connecting')
+    const el = root.querySelector('.ocw-conn-status') as HTMLElement
+    expect(el.style.display).not.toBe('none')
+    expect(el.textContent).toContain('connecting')
+  })
+
+  it('setConnStatus("reconnecting") shows warn class', () => {
+    const root = document.createElement('div')
+    const r = new Renderer(root, me, { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() })
+    r.setConnStatus('reconnecting')
+    const el = root.querySelector('.ocw-conn-status') as HTMLElement
+    expect(el.classList.contains('warn')).toBe(true)
+    expect(el.textContent).toContain('reconnecting')
+  })
+
+  it('setConnStatus("open") hides the indicator', () => {
+    const root = document.createElement('div')
+    const r = new Renderer(root, me, { onSend: vi.fn(), onInvoke: vi.fn(), onTyping: vi.fn(), onReadUpTo: vi.fn() })
+    r.setConnStatus('connecting')
+    r.setConnStatus('open')
+    const el = root.querySelector('.ocw-conn-status') as HTMLElement
+    expect(el.style.display).toBe('none')
+  })
+})