manigent-server 0.1.0__py3-none-any.whl

manigent/web/frontend/src/components/publicAgents/PublicAgentsAccount.tsx

@@ -0,0 +1,162 @@
+import { MouseEvent, useEffect, useMemo, useState } from 'react'
+import { PublicAgent, PublicDirectory, chatUrl, fetchDirectory } from './api'
+import { Avatar, Icon, PoweredBy, Unavailable } from './parts'
+import { addChat, loadWidget, openChat } from './widget'
+
+/** An account's public agents: /users/:account/agents/. Chats open in the web
+ * chat widget's dock (several side by side, Messenger-style); each card still
+ * links to the agent's full-page chat for a new tab or no JavaScript. */
+
+type Filter = 'all' | 'direct'
+
+const plural = (n: number, one: string) => `${n} ${one}${n === 1 ? '' : 's'}`
+
+export function matches(agent: PublicAgent, query: string, filter: Filter): boolean {
+  if (filter === 'direct' && !agent.takes_direct_requests) return false
+  const q = query.trim().toLowerCase()
+  if (!q) return true
+  return [agent.display_name, agent.id, agent.description, ...agent.skills]
+    .join(' ').toLowerCase().includes(q)
+}
+
+export default function PublicAgentsAccount({ username }: { username: string }) {
+  const [dir, setDir] = useState<PublicDirectory | null>(null)
+  const [missing, setMissing] = useState(false)
+
+  useEffect(() => {
+    fetchDirectory(username).then(setDir).catch(() => setMissing(true))
+  }, [username])
+
+  useEffect(() => {
+    if (!dir) return
+    document.title = `${dir.account.display_name} — Public agents · Manigent`
+    loadWidget('dock')
+    // Every public agent goes in the dock's picker; heads appear as they're opened.
+    dir.agents.forEach((a) => addChat(a.chat_key))
+  }, [dir])
+
+  if (missing) return <Unavailable text="This account has no public agents." />
+  if (!dir) return <div className="pa2-page" aria-busy />
+  return <AccountView dir={dir} />
+}
+
+function AccountView({ dir }: { dir: PublicDirectory }) {
+  const { account, teams, agents } = dir
+  const [query, setQuery] = useState('')
+  const [filter, setFilter] = useState<Filter>('all')
+  const defaultAgent = agents.find((a) => a.id === dir.default_agent)
+
+  const groups = useMemo(() => {
+    const hits = agents.filter((a) => matches(a, query, filter))
+    if (teams.length === 0) return hits.length ? [{ id: '', name: '', description: '', agents: hits }] : []
+    const known = new Set(teams.map((t) => t.id))
+    return [
+      ...teams.map((t) => ({ ...t, agents: hits.filter((a) => a.team_id === t.id) })),
+      {
+        id: '', name: 'Other agents', description: '',
+        agents: hits.filter((a) => !a.team_id || !known.has(a.team_id)),
+      },
+    ].filter((g) => g.agents.length > 0)
+  }, [agents, teams, query, filter])
+
+  return (
+    <>
+      <div className="pa2-page">
+        <section className="pa2-prof">
+          <Avatar name={account.display_name} seed={account.handle} size="xl" src={account.avatar_url} />
+          <div className="info">
+            <h1>{account.display_name}</h1>
+            <div className="pc-mono pa2-handle">@{account.handle}</div>
+            {account.bio && <p>{account.bio}</p>}
+            <div className="pa2-meta">
+              <span>{plural(agents.length, 'public agent')}</span>
+              {teams.length > 0 && <span>{plural(teams.length, 'team')}</span>}
+              {account.website && (
+                <a href={account.website} target="_blank" rel="noopener noreferrer nofollow">
+                  {account.website.replace(/^https?:\/\//, '').replace(/\/$/, '')}
+                </a>
+              )}
+            </div>
+          </div>
+          {defaultAgent && (
+            <a
+              className="pc-btn pri"
+              href={chatUrl(account.handle, defaultAgent.id)}
+              onClick={(e) => openInDock(e, defaultAgent.chat_key)}
+            >
+              Ask {account.display_name}
+            </a>
+          )}
+        </section>
+
+        <div className="pa2-bar">
+          <label className="pa2-search">
+            <Icon name="search" />
+            <input
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search agents by name or skill"
+              aria-label="Search agents"
+            />
+          </label>
+          <div className="pa2-tabs" role="tablist" aria-label="Filter agents">
+            {(['all', 'direct'] as const).map((f) => (
+              <button
+                key={f}
+                type="button"
+                role="tab"
+                aria-selected={filter === f}
+                className={filter === f ? 'on' : ''}
+                onClick={() => setFilter(f)}
+              >
+                {f === 'all' ? 'All' : 'Takes requests'}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {groups.length === 0 && <div className="pa2-empty">No agents match.</div>}
+        {groups.map((g) => (
+          <section className="pa2-team" key={g.id || '_other'}>
+            {g.name && <h2>{g.name}</h2>}
+            {g.description && <div className="d">{g.description}</div>}
+            <div className="pa2-grid">
+              {g.agents.map((a) => <AgentCard key={a.id} username={account.handle} agent={a} />)}
+            </div>
+          </section>
+        ))}
+      </div>
+      <PoweredBy />
+    </>
+  )
+}
+
+/** A plain click opens the chat in the dock; a modified click (new tab or
+ * window) follows the link to the full-page chat. */
+export function openInDock(e: MouseEvent, key: string) {
+  if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
+  e.preventDefault()
+  openChat(key)
+}
+
+function AgentCard({ username, agent }: { username: string; agent: PublicAgent }) {
+  return (
+    <a className="pa2-card" href={chatUrl(username, agent.id)} onClick={(e) => openInDock(e, agent.chat_key)}>
+      <div className="top">
+        <Avatar name={agent.display_name} seed={agent.id} />
+        <div className="t">
+          <b>{agent.display_name}</b>
+          <span className="pc-mono">{agent.id}</span>
+        </div>
+      </div>
+      {agent.description && <p className="desc">{agent.description}</p>}
+      {agent.skills.length > 0 && <div className="pa2-sk">{agent.skills.join(' · ')}</div>}
+      <div className="pa2-cf">
+        {agent.takes_direct_requests
+          ? <span className="pc-badge go"><i />Takes requests</span>
+          : <span className="pc-badge">Answers questions</span>}
+        <span className="go">Chat<Icon name="arrow" size={14} stroke={2.4} /></span>
+      </div>
+    </a>
+  )
+}

manigent/web/frontend/src/components/publicAgents/api.ts

@@ -0,0 +1,55 @@
+/**
+ * The account page's server calls: the account's public directory
+ * (`/api/public/users/…`, served by `server/routes/public_agents.py`). Chats
+ * themselves run in the web chat widget (`widget.ts`). No auth, no cookies.
+ */
+
+export const BASE = import.meta.env.DEV ? '/api' : ''
+
+export interface PublicAccount {
+  handle: string
+  display_name: string
+  bio: string
+  website: string | null
+  avatar_url: string | null
+}
+
+export interface PublicTeam {
+  id: string
+  name: string
+  description: string
+}
+
+export interface PublicAgent {
+  id: string
+  display_name: string
+  team_id: string | null
+  description: string
+  skills: string[]
+  takes_direct_requests: boolean
+  online: boolean
+  starter_questions: string[]
+  /** The widget key this page chats with (it lists this server; public by design). */
+  chat_key: string
+}
+
+export interface PublicDirectory {
+  account: PublicAccount
+  teams: PublicTeam[]
+  agents: PublicAgent[]
+  default_agent: string | null
+}
+
+export async function fetchDirectory(username: string): Promise<PublicDirectory> {
+  const r = await fetch(`${BASE}/api/public/users/${encodeURIComponent(username)}/agents`, {
+    credentials: 'omit',
+  })
+  if (!r.ok) throw new Error(`http_${r.status}`)
+  return r.json()
+}
+
+/** Account page and chat URLs — root-relative, outside the `/app` SPA. */
+const enc = encodeURIComponent
+export const accountUrl = (username: string) => `/users/${enc(username)}/agents/`
+export const chatUrl = (username: string, agent: string) =>
+  `/users/${enc(username)}/agents/${enc(agent)}/chat`

manigent/web/frontend/src/components/publicAgents/parts.tsx

@@ -0,0 +1,54 @@
+import { colorFor } from '../sidebar/SidebarAvatar'
+
+/** Shared bits of the two public agent pages. */
+
+export function Avatar({ name, seed, size = '', src }: {
+  name: string
+  /** What the color hashes on — the handle, so a rename keeps the color. */
+  seed: string
+  size?: '' | 'xl'
+  src?: string | null
+}) {
+  const cls = 'pc-av' + (size ? ` ${size}` : '')
+  if (src) return <img className={cls} src={src} alt="" />
+  return (
+    <div className={cls} style={{ background: colorFor(seed) }} aria-hidden>
+      {(name.trim()[0] || '?').toUpperCase()}
+    </div>
+  )
+}
+
+const PATHS = {
+  arrow: 'M5 12h14M13 6l6 6-6 6',
+  search: 'M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3',
+} as const
+
+export function Icon({ name, size = 16, stroke = 2 }: {
+  name: keyof typeof PATHS
+  size?: number
+  stroke?: number
+}) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+      <path d={PATHS[name]} />
+    </svg>
+  )
+}
+
+export function PoweredBy() {
+  return (
+    <div className="pc-foot">
+      Powered by <a href="/" target="_top">Manigent</a>
+    </div>
+  )
+}
+
+export function Unavailable({ text }: { text: string }) {
+  return (
+    <div className="pc-unavailable">
+      <p>{text}</p>
+      <PoweredBy />
+    </div>
+  )
+}

manigent/web/frontend/src/components/publicAgents/publicAgents.css

@@ -0,0 +1,53 @@
+/* The public account page (public.html). Chats are drawn by the web chat widget.
+   Values lifted from the design handoff; tokens from styles/design/tokens.css. */
+
+*{box-sizing:border-box}
+body{margin:0;background:var(--bg-canvas);color:var(--ink-1);font-family:var(--font-sans);font-size:14px;line-height:1.45;font-weight:500;-webkit-font-smoothing:antialiased}
+button{font-family:inherit}
+a{color:var(--accent-deep)}a:hover{color:var(--accent)}
+:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+
+.pc-av{width:36px;height:36px;border-radius:11px;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none;object-fit:cover}
+.pc-av.xl{width:72px;height:72px;border-radius:20px;font-size:28px}
+.pc-mono{font-family:var(--font-mono);font-size:12px;color:var(--ink-3)}
+.pc-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--bg-pill-muted);color:var(--ink-2);white-space:nowrap}
+.pc-badge.go{background:var(--prio-quick-bg);color:var(--prio-quick-fg)}
+.pc-badge i{width:7px;height:7px;border-radius:50%;background:currentColor}
+.pc-btn{border:1px solid var(--line-2);background:#fff;color:var(--ink-1);font-weight:700;font-size:13px;border-radius:9px;padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap}
+.pc-btn:hover{border-color:var(--line-strong);color:var(--ink-1)}
+.pc-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}.pc-btn.pri:hover{background:var(--accent-deep);color:#fff}
+.pc-foot{text-align:center;font-size:11.5px;color:var(--ink-3);padding:6px 0 12px}.pc-foot a{color:var(--ink-2);font-weight:700;text-decoration:none}
+.pc-unavailable{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
+.pc-unavailable p{margin:0;font-size:15px;color:var(--ink-2)}
+
+/* account */
+.pa2-page{max-width:1000px;margin:0 auto;padding:44px 28px 30px}
+.pa2-prof{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
+.pa2-prof .info{flex:1;min-width:260px}
+.pa2-prof h1{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0}
+.pa2-handle{margin-top:3px}
+.pa2-prof p{margin:8px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:600px}
+.pa2-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--ink-3)}
+.pa2-bar{display:flex;gap:10px;align-items:center;margin:32px 0 6px;flex-wrap:wrap}
+.pa2-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:0 12px;color:var(--ink-3)}
+.pa2-search:focus-within{border-color:var(--accent)}
+.pa2-search input{flex:1;border:0;outline:0;font:inherit;font-size:14px;padding:9px 0;background:transparent;color:var(--ink-1)}
+.pa2-search input:focus-visible{outline:0}
+.pa2-tabs{display:flex;gap:4px;background:var(--bg-pill-muted);border-radius:10px;padding:3px}
+.pa2-tabs button{border:0;background:transparent;font-size:13px;font-weight:700;color:var(--ink-2);padding:6px 11px;border-radius:8px;cursor:pointer}.pa2-tabs button.on{background:#fff;color:var(--ink-1);box-shadow:var(--shadow-1)}
+.pa2-team{margin-top:28px}
+.pa2-team h2{font-size:16px;font-weight:800;margin:0 0 12px}
+.pa2-team h2:has(+ .d){margin-bottom:0}
+.pa2-team .d{font-size:13px;color:var(--ink-3);margin:2px 0 12px}
+.pa2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
+.pa2-card{border:1px solid var(--line-2);background:#fff;border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
+.pa2-card:hover{border-color:var(--accent-soft);box-shadow:var(--shadow-2);color:inherit}
+.pa2-card .top{display:flex;gap:12px;align-items:center}
+.pa2-card .top .t{flex:1;min-width:0}.pa2-card b{display:block;font-size:15px;font-weight:800}
+.pa2-card .desc{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0;flex:1;text-wrap:pretty}
+.pa2-sk{font-size:12px;color:var(--ink-3)}
+.pa2-cf{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line-1);padding-top:10px;margin-top:auto}
+.pa2-cf .go{font-size:13px;font-weight:800;color:var(--accent-deep);display:inline-flex;gap:5px;align-items:center}
+.pa2-empty{padding:40px;text-align:center;color:var(--ink-3);font-size:14px}
+
+@media (max-width:600px){.pa2-page{padding:28px 16px}}

manigent/web/frontend/src/components/publicAgents/publicAgents.test.tsx

@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import PublicAgentsAccount, { matches } from './PublicAgentsAccount'
+import type { PublicAgent, PublicDirectory } from './api'
+
+const agent = (over: Partial<PublicAgent>): PublicAgent => ({
+  id: 'a', display_name: 'A', team_id: null, description: '', skills: [],
+  takes_direct_requests: true, online: true, starter_questions: [], chat_key: 'cmw_a', ...over,
+})
+
+const DIR: PublicDirectory = {
+  account: { handle: 'chu', display_name: "Chu's Wine", bio: '', website: null, avatar_url: null },
+  teams: [{ id: 'video', name: 'video', description: '' }],
+  agents: [
+    agent({ id: 'assets', display_name: 'Asset Producer', team_id: 'video', takes_direct_requests: false,
+      skills: ['voiceover'], chat_key: 'cmw_assets' }),
+    agent({ id: 'coord', display_name: 'Production Coordinator', team_id: 'video', chat_key: 'cmw_coord' }),
+    agent({ id: 'support', display_name: 'Customer Support', chat_key: 'cmw_support' }),
+  ],
+  default_agent: 'support',
+}
+
+afterEach(() => {
+  cleanup()
+  vi.unstubAllGlobals()
+  delete window.ManigentChat
+  document.querySelectorAll('script[data-manigent-widget]').forEach((s) => s.remove())
+})
+
+function mockDirectory(dir: PublicDirectory | null) {
+  vi.stubGlobal('fetch', vi.fn(async () => dir
+    ? new Response(JSON.stringify(dir), { status: 200 })
+    : new Response('{}', { status: 404 })))
+}
+
+describe('matches', () => {
+  it('searches name, handle, description and skills', () => {
+    expect(matches(DIR.agents[0], 'VOICE', 'all')).toBe(true)
+    expect(matches(DIR.agents[0], 'assets', 'all')).toBe(true)
+    expect(matches(DIR.agents[0], '', 'direct')).toBe(false)
+    expect(matches(DIR.agents[0], 'nothing', 'all')).toBe(false)
+  })
+})
+
+describe('PublicAgentsAccount', () => {
+  it('groups by team, filters, and searches', async () => {
+    mockDirectory(DIR)
+    render(<PublicAgentsAccount username="chu" />)
+    expect(await screen.findByRole('heading', { name: "Chu's Wine" })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'video' })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'Other agents' })).toBeTruthy()
+    fireEvent.click(screen.getByRole('tab', { name: 'Takes requests' }))
+    expect(screen.queryByText('Asset Producer')).toBeNull()
+    fireEvent.change(screen.getByLabelText('Search agents'), { target: { value: 'zzz' } })
+    expect(screen.getByText('No agents match.')).toBeTruthy()
+  })
+
+  it('loads the widget dock, lists every agent, and opens chats in it', async () => {
+    mockDirectory(DIR)
+    render(<PublicAgentsAccount username="chu" />)
+    await screen.findByRole('heading', { name: "Chu's Wine" })
+    const script = document.querySelector('script[data-manigent-widget]')!
+    expect(script.getAttribute('src')).toContain('/api/channels/widget.js')
+    expect(script.getAttribute('data-mode')).toBe('dock')
+    // The widget is not loaded in jsdom, so calls sit in its queue.
+    const queue = () => window.ManigentChat as unknown as unknown[][]
+    expect(queue()).toEqual(expect.arrayContaining([['add', 'cmw_assets'], ['add', 'cmw_coord'], ['add', 'cmw_support']]))
+
+    const card = screen.getByText('Asset Producer').closest('a')!
+    expect(card.getAttribute('href')).toBe('/users/chu/agents/assets/chat')
+    fireEvent.click(card)
+    expect(queue().at(-1)).toEqual(['open', 'cmw_assets'])
+    fireEvent.click(screen.getByRole('link', { name: "Ask Chu's Wine" }))
+    expect(queue().at(-1)).toEqual(['open', 'cmw_support'])
+    // A modified click follows the link to the full-page chat instead.
+    const before = queue().length
+    fireEvent.click(card, { metaKey: true })
+    expect(queue().length).toBe(before)
+  })
+
+  it('says so when the account has no public agents', async () => {
+    mockDirectory(null)
+    render(<PublicAgentsAccount username="nobody" />)
+    expect(await screen.findByText('This account has no public agents.')).toBeTruthy()
+  })
+})

manigent/web/frontend/src/components/publicAgents/widget.test.ts

@@ -0,0 +1,148 @@
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, waitFor } from '@testing-library/dom'
+
+// The embeddable widget is plain JavaScript served by the server
+// (manigent/server/channels/webchat_widget.js); load the real file.
+const SRC = readFileSync(
+  resolve(__dirname, '../../../../../server/channels/webchat_widget.js'), 'utf8',
+)
+const BASE = 'https://cm.example'
+
+const profile = (handle: string, over: Record<string, unknown> = {}) => ({
+  display_name: handle[0].toUpperCase() + handle.slice(1), handle, description: `${handle} help`,
+  online: true, takes_direct_requests: true, starter_questions: [],
+  account: { handle: 'olivia', display_name: 'Olivia', url: `${BASE}/users/olivia/agents/` },
+  request_taker: null, ...over,
+})
+
+let failSend = false
+const fetchMock = vi.fn(async (input: string, init?: RequestInit) => {
+  const url = new URL(input)
+  const key = url.searchParams.get('key') || JSON.parse(String(init?.body || '{}')).key
+  const handle = String(key).replace('cmw_', '')
+  const ok = (body: unknown) => new Response(JSON.stringify(body), { status: 200 })
+  if (url.pathname.endsWith('/profile')) return ok({ profile: profile(handle), max_chars: 4000 })
+  if (url.pathname.endsWith('/session')) {
+    return ok({ visitor: 'v_aaaaaaaaaaaaaaaaaaaa', token: 't', profile: profile(handle), max_chars: 4000 })
+  }
+  if (init?.method === 'POST') {
+    return failSend ? new Response('{}', { status: 500 }) : ok({ ok: true })
+  }
+  return ok({ messages: [] })
+})
+
+interface Api {
+  open: (k: string) => void
+  minimize: (k: string) => void
+  close: (k: string) => void
+  add: (k: string) => void
+  list: () => { key: string; state: string; name: string }[]
+  __markdown: (t: string) => DocumentFragment
+  __manager: { chats: Record<string, { receive: (m: unknown) => void; stop: () => void }> }
+}
+const api = () => (window as unknown as { ManigentChat: Api }).ManigentChat
+
+function boot(attrs: Record<string, string>) {
+  const s = document.createElement('script')
+  s.setAttribute('src', `${BASE}/api/channels/widget.js`)
+  s.setAttribute('data-test-open-shadow', '')
+  Object.entries(attrs).forEach(([k, v]) => s.setAttribute(k, v))
+  Object.defineProperty(document, 'currentScript', { configurable: true, get: () => s })
+  ;(0, eval)(SRC)
+  delete (document as unknown as { currentScript?: unknown }).currentScript
+  return document.querySelector('[data-manigent-webchat]')!.shadowRoot!
+}
+
+beforeEach(() => {
+  failSend = false
+  vi.stubGlobal('fetch', fetchMock)
+})
+afterEach(() => {
+  const m = api()?.__manager
+  if (m) Object.values(m.chats).forEach((c) => c.stop())
+  delete (window as unknown as { ManigentChat?: unknown }).ManigentChat
+  document.querySelectorAll('[data-manigent-webchat]').forEach((el) => el.remove())
+  localStorage.clear()
+  vi.unstubAllGlobals()
+})
+
+describe('markdown', () => {
+  it('renders formatting as nodes and never HTML or unsafe links', () => {
+    boot({ 'data-mode': 'dock' })
+    const div = document.createElement('div')
+    div.appendChild(api().__markdown(
+      '**Hi** <img src=x onerror=alert(1)>\n\n- one `code`\n- [ok](https://a.example) [bad](javascript:alert(1))',
+    ))
+    expect(div.querySelector('strong')!.textContent).toBe('Hi')
+    expect(div.querySelector('img')).toBeNull()
+    expect(div.textContent).toContain('<img src=x onerror=alert(1)>')
+    expect(div.querySelectorAll('li')).toHaveLength(2)
+    expect(div.querySelector('code')!.textContent).toBe('code')
+    const links = Array.from(div.querySelectorAll('a')).map((a) => a.getAttribute('href'))
+    expect(links).toEqual(['https://a.example'])
+    expect(div.querySelector('a')!.getAttribute('target')).toBe('_blank')
+  })
+})
+
+describe('dock', () => {
+  it('shows one chat head per key, sharing one dock', async () => {
+    const root = boot({ 'data-keys': 'cmw_alpha, cmw_beta' })
+    await waitFor(() => expect(root.querySelector('[aria-label="Alpha"]')).toBeTruthy())
+    expect(root.querySelector('[aria-label="Beta"]')).toBeTruthy()
+    expect(root.querySelector('[aria-label="Start a chat"]')).toBeTruthy()
+    expect(document.querySelectorAll('[data-manigent-webchat]')).toHaveLength(1)
+  })
+
+  it('opens windows side by side up to the limit, minimising the oldest', async () => {
+    const root = boot({ 'data-mode': 'dock' })
+    ;['cmw_a1', 'cmw_a2', 'cmw_a3'].forEach((k) => api().add(k))
+    ;['cmw_a1', 'cmw_a2', 'cmw_a3'].forEach((k) => api().open(k))
+    // jsdom is 1024px wide: room for two windows.
+    expect(root.querySelectorAll('.wins > .chat')).toHaveLength(2)
+    const states = Object.fromEntries(api().list().map((c) => [c.key, c.state]))
+    expect(states).toEqual({ cmw_a1: 'min', cmw_a2: 'open', cmw_a3: 'open' })
+
+    api().minimize('cmw_a3')
+    api().close('cmw_a2')
+    expect(root.querySelectorAll('.wins > .chat')).toHaveLength(0)
+    const after = Object.fromEntries(api().list().map((c) => [c.key, c.state]))
+    expect(after).toEqual({ cmw_a1: 'min', cmw_a2: 'listed', cmw_a3: 'min' })
+  })
+
+  it('counts unread replies on a minimised head', async () => {
+    const root = boot({ 'data-key': 'cmw_alpha' })
+    await waitFor(() => expect(root.querySelector('[aria-label="Alpha"]')).toBeTruthy())
+    api().__manager.chats.cmw_alpha.receive({ seq: 1, text: 'hello', at: 1 })
+    expect(root.querySelector('.hw .un')!.textContent).toBe('1')
+    api().open('cmw_alpha')
+    expect(root.querySelector('.hw .un')).toBeNull()
+    expect(root.querySelector('.md')!.textContent).toContain('hello')
+  })
+
+  it('keeps the visitor message and says so when a send fails', async () => {
+    failSend = true
+    const root = boot({ 'data-key': 'cmw_alpha', 'data-open': '' })
+    const ta = await waitFor(() => {
+      const el = root.querySelector('textarea')
+      expect(el).toBeTruthy()
+      return el as HTMLTextAreaElement
+    })
+    fireEvent.input(ta, { target: { value: 'hi **there**' } })
+    fireEvent.keyDown(ta, { key: 'Enter' })
+    await waitFor(() => expect(root.textContent).toContain('couldn’t reply just now'))
+    expect(root.querySelector('.me')!.textContent).toBe('hi **there**')
+  })
+})
+
+describe('fullpage', () => {
+  it('fills the page with one chat and its intro', async () => {
+    const root = boot({ 'data-key': 'cmw_alpha', 'data-mode': 'fullpage' })
+    await waitFor(() => expect(root.querySelector('.intro h1')!.textContent).toBe('Alpha'))
+    expect(root.querySelector('.full .chat')).toBeTruthy()
+    expect(root.querySelector('.heads')).toBeNull()
+    expect(root.querySelectorAll('.starters button').length).toBe(3)
+    expect(document.title).toBe('Alpha · Olivia')
+  })
+})

manigent/web/frontend/src/components/publicAgents/widget.ts

@@ -0,0 +1,40 @@
+import { BASE } from './api'
+
+/**
+ * The public pages run chats in the web chat widget
+ * (`server/channels/webchat_widget.js`) — the same script customer sites
+ * embed — and drive it through `window.ManigentChat`. Calls made before the
+ * script loads are queued (the widget drains the array when it boots).
+ */
+
+type Command = [string, ...unknown[]]
+interface ChatApi {
+  push: (cmd: Command) => void
+}
+
+declare global {
+  interface Window {
+    ManigentChat?: ChatApi | Command[]
+  }
+}
+
+function chatApi(): ChatApi {
+  if (!window.ManigentChat) window.ManigentChat = []
+  return window.ManigentChat as ChatApi
+}
+
+/** Load the widget once. `fullpage` mounts one chat filling the page; `dock`
+ * starts an empty dock that `addChat` / `openChat` fill. */
+export function loadWidget(mode: 'dock' | 'fullpage', key?: string) {
+  if (document.querySelector('script[data-manigent-widget]')) return
+  const s = document.createElement('script')
+  s.src = `${BASE}/api/channels/widget.js`
+  s.async = true
+  s.setAttribute('data-manigent-widget', '')
+  s.setAttribute('data-mode', mode)
+  if (key) s.setAttribute('data-key', key)
+  document.body.appendChild(s)
+}
+
+export const addChat = (key: string) => chatApi().push(['add', key])
+export const openChat = (key: string) => chatApi().push(['open', key])