npm - @flow-engineer/flow - Versions diffs - 0.0.1 → 0.2.1 - Mend

@flow-engineer/flow 0.0.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (104) hide show

package/LICENSE +202 -0
package/README.md +611 -0
package/coding-agents/skill.md +353 -0
package/coding-agents/test-skill.md +223 -0
package/coding-agents/tools-skill.md +89 -0
package/dist/flow-messaging/src/client.d.ts +40 -0
package/dist/flow-messaging/src/client.js +142 -0
package/dist/flow-messaging/src/index.d.ts +72 -0
package/dist/flow-messaging/src/index.js +605 -0
package/dist/simulators/src/index.d.ts +2 -0
package/dist/simulators/src/index.js +2 -0
package/dist/simulators/src/page.html +1245 -0
package/dist/simulators/src/person.html +100 -0
package/dist/simulators/src/platforms.d.ts +29 -0
package/dist/simulators/src/platforms.js +72 -0
package/dist/simulators/src/server.d.ts +201 -0
package/dist/simulators/src/server.js +759 -0
package/dist/src/agent.d.ts +504 -0
package/dist/src/agent.js +818 -0
package/dist/src/channels.d.ts +178 -0
package/dist/src/channels.js +243 -0
package/dist/src/conversation.d.ts +361 -0
package/dist/src/conversation.js +1487 -0
package/dist/src/db.d.ts +18 -0
package/dist/src/db.js +57 -0
package/dist/src/events.d.ts +17 -0
package/dist/src/events.js +20 -0
package/dist/src/http.d.ts +45 -0
package/dist/src/http.js +269 -0
package/dist/src/index.d.ts +14 -0
package/dist/src/index.js +11 -0
package/dist/src/model.d.ts +21 -0
package/dist/src/model.js +96 -0
package/dist/src/names.d.ts +22 -0
package/dist/src/names.js +43 -0
package/dist/src/nudges.d.ts +23 -0
package/dist/src/nudges.js +117 -0
package/dist/src/postgres.d.ts +20 -0
package/dist/src/postgres.js +62 -0
package/dist/src/schedules.d.ts +60 -0
package/dist/src/schedules.js +249 -0
package/dist/src/skills.d.ts +12 -0
package/dist/src/skills.js +69 -0
package/dist/src/store.d.ts +214 -0
package/dist/src/store.js +448 -0
package/dist/src/talk.d.ts +57 -0
package/dist/src/talk.js +166 -0
package/dist/src/time.d.ts +71 -0
package/dist/src/time.js +170 -0
package/dist/src/tools.d.ts +43 -0
package/dist/src/tools.js +26 -0
package/dist/src/traces.d.ts +31 -0
package/dist/src/traces.js +303 -0
package/dist/src/types.d.ts +260 -0
package/dist/src/types.js +2 -0
package/dist/testing/src/account.d.ts +4 -0
package/dist/testing/src/account.js +580 -0
package/dist/testing/src/chat.d.ts +3 -0
package/dist/testing/src/chat.js +117 -0
package/dist/testing/src/check-endpoint.d.ts +31 -0
package/dist/testing/src/check-endpoint.js +158 -0
package/dist/testing/src/chinwag.d.ts +2 -0
package/dist/testing/src/chinwag.js +6 -0
package/dist/testing/src/cli.d.ts +2 -0
package/dist/testing/src/cli.js +592 -0
package/dist/testing/src/client.d.ts +117 -0
package/dist/testing/src/client.js +956 -0
package/dist/testing/src/flow-login.d.ts +143 -0
package/dist/testing/src/flow-login.js +249 -0
package/dist/testing/src/http-agent.d.ts +47 -0
package/dist/testing/src/http-agent.js +155 -0
package/dist/testing/src/index.d.ts +3 -0
package/dist/testing/src/index.js +2 -0
package/dist/testing/src/new.d.ts +13 -0
package/dist/testing/src/new.js +147 -0
package/dist/testing/src/print-run.d.ts +3 -0
package/dist/testing/src/print-run.js +22 -0
package/dist/testing/src/protocol.d.ts +159 -0
package/dist/testing/src/protocol.js +28 -0
package/dist/testing/src/report.d.ts +74 -0
package/dist/testing/src/report.js +90 -0
package/dist/testing/src/show.d.ts +36 -0
package/dist/testing/src/show.js +280 -0
package/dist/testing/src/suite.d.ts +87 -0
package/dist/testing/src/suite.js +198 -0
package/docs/agents.md +85 -0
package/examples/cafe/agent/AGENTS.md +10 -0
package/examples/cafe/agent/skills/allergens/SKILL.md +7 -0
package/examples/cafe/src/agent.ts +43 -0
package/examples/cafe/src/channels.ts +20 -0
package/examples/cafe/src/main.ts +30 -0
package/examples/cafe/src/tools.ts +62 -0
package/examples/cafe/tests/scenarios/latte-correction.yaml +30 -0
package/examples/cafe/tests/scenarios/order-fails.yaml +26 -0
package/examples/cafe/tests/tools/get_menu.yaml +14 -0
package/examples/cafe/tests/tools/place_order.yaml +29 -0
package/examples/http-agent/server.mjs +32 -0
package/examples/http-agent/tests/scenarios/opening-hours.yaml +16 -0
package/flow-messaging/README.md +191 -0
package/package.json +63 -8
package/spec/agent-endpoint.openapi.yaml +148 -0
package/spec/nudges.openapi.yaml +167 -0
package/spec/request.schema.json +121 -0
package/spec/response.schema.json +284 -0

package/dist/simulators/src/page.html ADDED Viewed

@@ -0,0 +1,1245 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{title}} · Flow Framework playground</title>
+<style>
+  :root {
+    --bg: #f4f4f1; --panel: #ffffff; --ink: #1c1c1a; --quiet: #6b6b66; --line: #e2e1dc; --accent: #2f6fed;
+    --good: #2e8b57; --warn: #b7791f; --fold: #8a5cf6; --bad: #c0392b;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root { --bg: #161615; --panel: #1f1f1d; --ink: #ecebe6; --quiet: #9a9a94; --line: #33332f; }
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
+  button { font: inherit; }
+  .top { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
+  .top h1 { font-size: 15px; margin: 0; font-weight: 600; }
+  .top h1 small { color: var(--quiet); font-weight: 400; }
+  .tabs { display: flex; gap: 4px; flex-wrap: wrap; }
+  .tab { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
+  .tab img { width: 16px; height: 16px; }
+  .tab small { color: var(--quiet); font-size: 11px; }
+  .tab[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
+  .tab { position: relative; }
+  .tab .unread { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
+  .spacer { flex: 1; }
+  .ghost { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
+  select.ghost { max-width: 240px; }
+  .empty { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--quiet); }
+  .empty code { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
+  body:not(.play) .play-only, body.play .cloud-only { display: none; }
+  main { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px; padding: 16px; height: calc(100vh - 58px); }
+  @media (max-width: 820px) { main { grid-template-columns: 1fr; height: auto; } .side { height: 520px; } .phone { height: 680px; } }
+  /* The phone */
+  .phone { border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.06); position: relative; }
+  .bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
+  .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; flex: none; }
+  .who { display: flex; flex-direction: column; min-width: 0; }
+  .who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .who span { font-size: 12.5px; opacity: .85; }
+  .thread { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
+  .row { display: flex; flex-direction: column; max-width: 80%; position: relative; margin-top: 4px; }
+  .row.me { align-self: flex-end; align-items: flex-end; }
+  .row.them { align-self: flex-start; align-items: flex-start; }
+  .bubble { padding: 6px 9px 6px 10px; border-radius: 18px; white-space: pre-wrap; word-wrap: break-word; position: relative; min-width: 48px; }
+  .quote { border-left: 4px solid; border-radius: 6px; padding: 4px 8px; margin: 0 0 4px; font-size: 12.5px; background: rgba(0,0,0,.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
+  .quote b { display: block; font-size: 12px; }
+  .stamp { float: right; margin: 6px 0 -4px 10px; font-size: 11px; opacity: .6; white-space: nowrap; }
+  .ticks { font-size: 12px; letter-spacing: -3px; margin-left: 3px; }
+  .ticks.read { color: #53bdeb; opacity: 1; }
+  .meta { font-size: 10.5px; opacity: .65; margin: 2px 6px 0; }
+  .meta.carrier { font-style: italic; }
+  .reacts { display: flex; gap: 2px; margin-top: -6px; margin-bottom: 2px; z-index: 1; }
+  .react { background: #fff; border-radius: 999px; padding: 0 5px; font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
+  .actions { position: absolute; top: 2px; display: none; gap: 2px; z-index: 2; }
+  .row.them .actions { right: -64px; } .row.me .actions { left: -64px; }
+  .row:hover .actions, .row:focus-within .actions { display: flex; }
+  .actions button { border: 0; background: rgba(0,0,0,.08); border-radius: 999px; width: 28px; height: 28px; cursor: pointer; font-size: 14px; color: #333; }
+  .picker { position: absolute; bottom: 100%; display: flex; gap: 2px; background: #fff; padding: 4px 6px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.2); z-index: 3; }
+  .row.them .picker { left: 0; } .row.me .picker { right: 0; }
+  .picker button { border: 0; background: none; font-size: 20px; cursor: pointer; padding: 2px; color: #111; }
+  .picker button.word { font-size: 12px; padding: 4px 6px; border-radius: 999px; background: #f2f2f7; margin: 0 1px; }
+  .btns { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; width: 100%; min-width: 220px; }
+  .fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
+  .fields span { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px dashed currentColor; opacity: .75; }
+  .btns button { border: 0; padding: 8px; cursor: pointer; text-align: center; }
+  .tpl-name { font-size: 11.5px; opacity: .7; margin-bottom: 2px; }
+  .tpl-head { font-weight: 600; margin-bottom: 2px; }
+  .tpl-media { display: flex; align-items: center; justify-content: center; width: 260px; max-width: 100%; height: 140px; border-radius: 6px; margin: 0 0 4px; background: rgba(0,0,0,.06); font-size: 13px; opacity: .8; }
+  .tpl-foot { display: block; font-size: 12.5px; opacity: .6; margin-top: 2px; }
+  .photo { display: block; width: 260px; max-width: 100%; min-height: 140px; max-height: 320px; object-fit: cover; border-radius: 12px; margin: 0 0 4px; background: rgba(0,0,0,.06); }
+  /* A link in a custom UI's params, as that UI would show it (the agent's card rules). */
+  .linkcard { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; min-width: 220px; max-width: 280px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(0,0,0,.1); background: #fff; color: #111; text-align: left; cursor: pointer; }
+  .linkcard b { font-size: 14px; color: #2f6fed; }
+  .linkcard.call b { color: #1e8e3e; }
+  .linkcard small { font-size: 11px; color: #6b6b66; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .screen { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; background: #fff; color: #111; }
+  .screen.on { display: flex; }
+  .screen .s-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #eee; }
+  .screen .s-bar button { border: 0; background: none; font-size: 18px; cursor: pointer; }
+  .screen .s-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; }
+  .screen code { font-size: 12px; word-break: break-all; color: #6b6b66; }
+  .screen.call { background: #1f2a24; color: #fff; }
+  .screen.call .s-bar { border-color: rgba(255,255,255,.1); } .screen.call .s-bar button { color: #fff; }
+  .screen.call .face { width: 96px; height: 96px; border-radius: 50%; background: #3c5a4a; display: grid; place-items: center; font-size: 40px; }
+  .screen.call code { color: #b9c9bf; }
+  .screen .end { border: 0; border-radius: 999px; padding: 12px 28px; background: #d93025; color: #fff; cursor: pointer; font-size: 15px; }
+  /* Debug mode: the agent's tool calls, inline where they happened; never shown otherwise. */
+  .toolcall { align-self: center; width: 92%; margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.92); color: #333; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
+  body:not(.debug) .toolcall { display: none; }
+  .toolcall .tc-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
+  .toolcall .tc-head b { font-weight: 600; }
+  .toolcall .st { color: #6b6b66; }
+  .toolcall .st.bg { color: #8a6d1f; } .toolcall .st.bad { color: #a33; }
+  .toolcall details { margin-top: 4px; } .toolcall summary { cursor: pointer; color: #6b6b66; }
+  .toolcall pre { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: auto; background: #f6f6f4; padding: 6px 8px; border-radius: 6px; }
+  .toolcall ul { margin: 4px 0 0; padding-left: 16px; }
+  /* Embedded (a dashboard shows just the phone) and replay (a saved conversation, read only). */
+  .embed .top, .embed .side { display: none; }
+  .embed main { grid-template-columns: 1fr; height: 100vh; padding: 0; }
+  .embed .phone { border-radius: 0; border: 0; box-shadow: none; height: 100vh; }
+  .replay .compose, .replay .replying, .replay #reset { display: none; }
+  .ghost[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
+  .sysnote { align-self: center; font-size: 11.5px; padding: 4px 10px; border-radius: 8px; margin: 6px 0; max-width: 90%; text-align: center; }
+  .sysnote.bad { background: #fdecea; color: var(--bad); }
+  .dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 18px; align-self: flex-start; align-items: center; margin-top: 4px; }
+  .dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .4; animation: blink 1.2s infinite; }
+  .dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
+  .dots .status { font-size: 12.5px; margin-left: 6px; opacity: .85; }
+  @keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: .9; } }
+  .replying { display: none; margin: 0 10px; padding: 6px 8px; border-left: 4px solid; border-radius: 6px; font-size: 12.5px; position: relative; }
+  .replying.on { display: block; }
+  .replying button { position: absolute; right: 4px; top: 2px; border: 0; background: none; cursor: pointer; font-size: 14px; }
+  .compose { display: flex; gap: 8px; padding: 8px 10px 10px; align-items: center; }
+  .compose input { flex: 1; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); font: inherit; outline: none; background: #fff; color: #111; min-width: 0; }
+  .compose button { border: 0; border-radius: 999px; width: 38px; height: 38px; font-size: 16px; cursor: pointer; color: #fff; flex: none; }
+  .counter { font-size: 11px; opacity: .6; min-width: 44px; text-align: right; }
+  .compose .attach { cursor: pointer; font-size: 18px; opacity: .7; flex: none; }
+  .bubble .file { font-size: 13px; opacity: .85; }
+  .sheet { position: absolute; inset: auto 0 0 0; background: #fff; color: #111; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,.2); padding: 8px 0 12px; display: none; max-height: 70%; overflow-y: auto; z-index: 5; }
+  .sheet.on { display: block; }
+  .sheet h3 { margin: 4px 16px 8px; font-size: 15px; text-align: center; }
+  .sheet label { display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid #f0f0f0; cursor: pointer; }
+  .sheet label small { display: block; color: #667781; }
+  .sheet .send { display: block; margin: 10px auto 0; border: 0; border-radius: 999px; padding: 10px 24px; background: #00a884; color: #fff; cursor: pointer; }
+  /* SMS (Android Messages) */
+  .p-sms { background: #fff; color: #111; }
+  .p-sms .bar { background: #fff; border-bottom: 1px solid #eee; }
+  .p-sms .avatar { background: #e8def8; color: #4a3c75; }
+  .p-sms .me .bubble { background: #d3e3fd; color: #041e49; }
+  .p-sms .them .bubble { background: #f1f3f4; color: #111; }
+  .p-sms .compose button { background: #0b57d0; }
+  .p-sms .sysnote:not(.bad) { color: #5f6368; }
+  /* WhatsApp */
+  .p-whatsapp { background: #efeae2; color: #111; }
+  .p-whatsapp .bar { background: #008069; color: #fff; }
+  .p-whatsapp .avatar { background: #dfe5e7; color: #54656f; }
+  .p-whatsapp .bubble { border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
+  .p-whatsapp .me .bubble { background: #d9fdd3; }
+  .p-whatsapp .them .bubble { background: #fff; }
+  .p-whatsapp .quote { border-color: #06cf9c; }
+  .p-whatsapp .quote b { color: #06cf9c; }
+  .p-whatsapp .them .quote { border-color: #53bdeb; } .p-whatsapp .them .quote b { color: #027eb5; }
+  .p-whatsapp .btns button { background: #fff; color: #027eb5; border-radius: 8px; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
+  .p-whatsapp .sysnote:not(.bad) { background: #fff7d6; color: #54656f; }
+  .p-whatsapp .replying { background: #f0f2f5; border-color: #06cf9c; color: #54656f; }
+  .p-whatsapp .compose { background: #f0f2f5; }
+  .p-whatsapp .compose button { background: #00a884; }
+  /* Not yet modelled in full */
+  .p-imessage { background: #fff; color: #111; }
+  .p-imessage .bar { background: #f6f6f6; border-bottom: 1px solid #e5e5e5; flex-direction: column; gap: 2px; }
+  .p-imessage .bar .who { align-items: center; }
+  .p-imessage .avatar { background: linear-gradient(#a5abb8, #858994); color: #fff; }
+  .p-imessage .me .bubble { background: #0a84ff; color: #fff; }
+  .p-imessage .them .bubble { background: #e9e9eb; color: #111; }
+  .p-imessage .dots { background: #e9e9eb; color: #555; }
+  .p-imessage .compose button { background: #0a84ff; }
+  .p-telegram { background: #c8dcea; color: #111; }
+  .p-telegram .bar { background: #fff; border-bottom: 1px solid #ddd; }
+  .p-telegram .avatar { background: #3390ec; color: #fff; }
+  .p-telegram .bubble { border-radius: 14px; }
+  .p-telegram .me .bubble { background: #e3fee0; }
+  .p-telegram .them .bubble { background: #fff; }
+  .p-telegram .compose { background: #fff; }
+  .p-telegram .compose button { background: #3390ec; }
+  .p-web { background: #fafaf8; color: #111; }
+  .p-web .bar { background: #fff; border-bottom: 1px solid #eee; }
+  .p-web .avatar { background: #2f6fed; color: #fff; }
+  .p-web .me .bubble { background: #2f6fed; color: #fff; }
+  .p-web .them .bubble { background: #ecebe6; color: #111; }
+  .p-web .dots { background: #ecebe6; color: #444; }
+  .p-web .compose button { background: #2f6fed; }
+  /* Side panel */
+  .side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
+  .side > .card:last-child { flex: 1; }
+  .backend { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
+  [hidden] { display: none !important; }
+  .sidetabs { display: flex; gap: 4px; padding: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; flex: none; }
+  .sidetabs button { flex: 1; border: 0; background: transparent; color: var(--quiet); padding: 7px 10px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; position: relative; }
+  .sidetabs button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
+  .sidetabs .dot { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+  .side > .pane { flex: 1; }
+  #pPerson { overflow-y: auto; }
+  .sec { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
+  .sec:last-child { border-bottom: 0; }
+  .sec .label { font-size: 12px; font-weight: 600; color: var(--ink); }
+  .hint { font-weight: 400; color: var(--quiet); font-size: 12px; margin-left: 4px; }
+  .dim { color: var(--quiet); font-size: 13px; }
+  .now { grid-template-columns: 1fr auto; align-items: center; }
+  .big { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }
+  .pill { font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); max-width: 220px; text-align: center; }
+  .pill.quiet { background: #fff4e5; border-color: #f5c27a; color: #8a5300; }
+  .pill.open { background: #e9f7ef; border-color: #9fd9b4; color: #1f6b3d; }
+  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.quiet { background: #3a2a10; color: #f5c27a; } :root:not([data-theme="light"]) .pill.open { background: #12301e; color: #9fd9b4; } }
+  .row2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+  .sec input, .sec select, .sec textarea { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); min-width: 0; }
+  .sec textarea { width: 100%; resize: vertical; }
+  .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
+  .grid2 label { display: grid; gap: 4px; font-size: 12px; color: var(--quiet); }
+  .check { display: flex; gap: 6px; align-items: center; font-size: 13px; }
+  details summary { cursor: pointer; font-size: 12px; color: var(--quiet); margin-bottom: 8px; }
+  details.sec > summary { margin: 0; color: var(--ink); }
+  details.sec:not([open]) { gap: 0; }
+  details.sec:not([open]) > :not(summary) { display: none; }
+  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: fit-content; }
+  .seg button { border: 0; background: transparent; color: var(--ink); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
+  .seg button + button { border-left: 1px solid var(--line); }
+  .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
+  .primary { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
+  .primary:disabled { opacity: .6; }
+  .items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+  .items li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 3px; font-size: 13px; }
+  .items .tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--quiet); }
+  .items .tag.held { color: #b35c00; }
+  .items .what { white-space: pre-wrap; }
+  .items li.empty { border-style: dashed; color: var(--quiet); }
+  .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; }
+  .card h2 { font-size: 13px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
+  .card h2 span { font-weight: 400; color: var(--quiet); }
+  table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+  th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+  th { color: var(--quiet); font-weight: 500; }
+  td.msg { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
+  .metrics { max-height: 220px; overflow-y: auto; }
+  .log { flex: 1; overflow-y: auto; padding: 6px 14px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
+  .log div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; border-bottom: 1px dashed var(--line); padding: 2px 0; }
+  .log .t { color: var(--quiet); }
+  .tag { font-weight: 600; } .tag.inline { color: var(--good); } .tag.bg { color: var(--warn); } .tag.fold, .tag.ack { color: var(--fold); } .tag.bad { color: var(--bad); }
+</style>
+</head>
+<body>
+<div class="top">
+  <h1>{{title}} <small>· Flow Framework playground</small></h1>
+  <div class="tabs" id="tabs" role="group" aria-label="Platform"></div>
+  <div class="spacer"></div>
+  <select class="ghost play-only" id="who" aria-label="Test person" title="Who you are: one of the agent's test people, the same person on every channel"></select>
+  <button class="ghost" id="debug" type="button" aria-pressed="false" title="Show the agent's tool calls in the conversation">Debug</button>
+  <button class="ghost cloud-only" id="reset" type="button">New conversation</button>
+  <button class="ghost play-only" id="clear" type="button" title="Forget this person: their history, schedules and everything the agent kept about them">Clear history</button>
+</div>
+<main>
+  <section class="phone" id="phone" aria-label="Simulator">
+    <div class="bar" id="bar">
+      <div class="avatar" id="avatar"></div>
+      <div class="who"><b id="name">{{title}}</b><span id="sub"></span></div>
+    </div>
+    <div class="thread" id="thread" aria-live="polite"></div>
+    <div class="replying" id="replying"><b>Replying to</b><div id="replyingText"></div><button type="button" id="cancelReply" aria-label="Cancel reply">✕</button></div>
+    <form class="compose" id="form">
+      <label class="attach" title="Send a photo, voice note or PDF (the message box is its caption)">📎<input type="file" id="file" accept="image/*,audio/*,application/pdf" hidden></label>
+      <input id="text" autocomplete="off" placeholder="Message" aria-label="Message">
+      <span class="counter" id="counter"></span>
+      <button type="submit" aria-label="Send">➤</button>
+    </form>
+    <div class="sheet" id="sheet" role="dialog" aria-label="Choose an option"></div>
+    <div class="screen" id="screen" role="dialog" aria-label="Opened link"></div>
+  </section>
+  <div class="side">
+    <nav class="sidetabs" role="tablist" aria-label="Side panel">
+      <button type="button" role="tab" data-pane="pPerson" id="tabPerson" hidden>Person</button>
+      <button type="button" role="tab" data-pane="pTurns">Turns</button>
+      <button type="button" role="tab" data-pane="pTrace">Trace <span class="dot" id="traceDot" hidden></span></button>
+    </nav>
+    <section class="card pane" id="pPerson" role="tabpanel" hidden>
+      <div class="sec now">
+        <div>
+          <div class="label">Their time</div>
+          <div class="big" id="theirTime">–</div>
+          <div class="dim" id="theirZone"></div>
+        </div>
+        <div class="pill" id="quietPill" hidden></div>
+      </div>
+      <details class="sec" id="clockSec" hidden>
+        <summary class="label">Move the clock <span class="hint">reminders and held nudges come due as it moves</span></summary>
+        <div class="row2">
+          <button type="button" class="ghost" data-advance="900000">+15 min</button>
+          <button type="button" class="ghost" data-advance="3600000">+1 hour</button>
+          <button type="button" class="ghost" data-advance="86400000">+1 day</button>
+          <button type="button" class="ghost" id="toQuietEnd" title="Jump to when their quiet hours end">To end of quiet hours</button>
+        </div>
+        <div class="row2"><input type="datetime-local" id="clockTo" aria-label="Move the clock to (your time)"><button type="button" class="ghost" id="clockGo">Go to this time</button><span class="hint">your time</span></div>
+      </details>
+      <div class="sec">
+        <div class="label">Waiting to go</div>
+        <ul class="items" id="waiting"></ul>
+      </div>
+      <div class="sec" id="nudgeSec" hidden>
+        <div class="label">Send a nudge <span class="hint">as your backend would, through the API</span></div>
+        <div class="seg" role="radiogroup" aria-label="Kind of nudge">
+          <button type="button" data-kind="prompt" aria-pressed="true" title="The agent writes it in its own words">Prompt</button>
+          <button type="button" data-kind="text" aria-pressed="false" title="Sent exactly as written">Exact text</button>
+          <button type="button" data-kind="template" aria-pressed="false" title="A WhatsApp template you set up with Meta">Template</button>
+        </div>
+        <textarea id="nText" rows="3" placeholder="What the agent should tell them, e.g. Their order 1042 shipped"></textarea>
+        <div class="row2" id="nTemplateRow" hidden>
+          <select id="nTemplate" aria-label="Template"></select>
+          <input id="nValues" placeholder="values for {{1}}, {{2}}… comma separated" aria-label="Template body values">
+        </div>
+        <label class="check"><input type="checkbox" id="nQuiet" checked> Wait for their quiet hours to end</label>
+        <details>
+          <summary>More options</summary>
+          <div class="grid2">
+            <label>Send at <span class="hint">your time</span><input type="datetime-local" id="nAt"></label>
+            <label>Drop if still held after <span class="hint">minutes</span><input id="nExpires" inputmode="numeric" placeholder="1440"></label>
+            <label>Idempotency key<input id="nKey" placeholder="order-1042-shipped"></label>
+          </div>
+        </details>
+        <div class="row2"><button type="button" class="primary" id="nSend">Send nudge</button><span class="hint" id="nResult"></span></div>
+      </div>
+      <div class="sec">
+        <div class="label">Contact settings</div>
+        <div class="dim" id="contactLine"></div>
+        <div class="grid2">
+          <label>Time zone<span class="row2"><input id="tz" placeholder="America/New_York" list="zones"><button type="button" class="ghost" id="tzSet">Save</button></span></label>
+          <label>Quiet hours<span class="row2"><input id="qFrom" placeholder="22:00" size="5" aria-label="From"> – <input id="qTo" placeholder="07:00" size="5" aria-label="To"><button type="button" class="ghost" id="qSet">Save</button></span></label>
+        </div>
+        <div class="row2"><button type="button" class="ghost" id="qOff">No quiet hours for them</button><button type="button" class="ghost" id="qDefault">Use the agent's</button></div>
+        <datalist id="zones"><option value="America/New_York"><option value="America/Chicago"><option value="America/Denver"><option value="America/Los_Angeles"><option value="Europe/London"><option value="Asia/Kolkata"><option value="Asia/Singapore"><option value="Australia/Sydney"></datalist>
+      </div>
+    </section>
+    <section class="card pane" id="pTurns" role="tabpanel" hidden>
+      <h2>Per turn <span id="status"></span></h2>
+      <div class="metrics">
+        <table>
+          <thead><tr><th>You sent</th><th>Acknowledged</th><th>Last message</th><th>Model calls</th></tr></thead>
+          <tbody id="turns"></tbody>
+        </table>
+      </div>
+    </section>
+    <section class="card pane" id="pTrace" role="tabpanel" hidden>
+      <h2>Trace</h2>
+      <div class="log" id="log"></div>
+    </section>
+  </div>
+</main>
+<script>
+  const BOOT = "{{boot}}";
+  // Where the simulators are mounted ("" on their own port, "/simulator" inside the test cloud).
+  const BASE = "{{base}}";
+  // The playground plays the agent's test people on its own channels; the test cloud, generated people on any platform.
+  const PLAY = "{{mode}}" === "playground";
+  if (PLAY) document.body.classList.add("play");
+  const params = new URLSearchParams(location.search);
+  // ?replay=<url of a saved run> shows that conversation read only; ?embed=1 shows only the phone.
+  const REPLAY = params.get("replay");
+  let replayData = null;
+  if (REPLAY) document.body.classList.add("replay");
+  if (params.get("embed") === "1") document.body.classList.add("embed");
+  const remember = (k, v) => { if (!params.has("embed")) { try { localStorage.setItem(k, v); } catch {} } };
+  const recall = (k) => { try { return localStorage.getItem(k); } catch { return null; } };
+  let person = params.get("person") || (PLAY ? recall("chinwag.person") : null) || "demo";
+  let people = [];         // the playground: the agent's test people
+  let channels = [];       // the playground: the agent's channels, each with the platform that plays it
+  let title = document.getElementById("name").textContent;
+  const $ = (id) => document.getElementById(id);
+  const TAPBACKS = [["❤️", "Loved"], ["👍", "Liked"], ["👎", "Disliked"], ["😂", "Laughed at"], ["‼️", "Emphasized"], ["❓", "Questioned"]];
+  let platforms = [];
+  let cards = [];
+  let current = null;
+  let source = null;
+  let typingEl = null;
+  let statusText = null;
+  let turns = [];
+  let replyTo = null;      // { id, text, fromAgent }
+  const rows = new Map();  // message id → row element
+  const where = () => PLAY ? { channel: current.channel, person } : { platform: current.id, person };
+  const query = () => "?" + new URLSearchParams(where()).toString();
+  const fmt = (ms) => ms == null ? "…" : ms < 1000 ? `${ms} ms` : `${(ms / 1000).toFixed(1)} s`;
+  const clock = (at) => new Date(at).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  const subtitle = () => ({ sms: person, whatsapp: "online", imessage: "iMessage", telegram: "bot", web: "Usually replies instantly" })[current.id];
+  // WhatsApp's own formatting: *bold*, _italic_, ~strike~, ```mono```.
+  function whatsappHtml(text) {
+    const esc = text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+    return esc
+      .replace(/```([\s\S]+?)```/g, "<code>$1</code>")
+      .replace(/(^|[\s(])\*(\S(?:[^*\n]*\S)?)\*(?=[\s).,!?:;]|$)/g, "$1<b>$2</b>")
+      .replace(/(^|[\s(])_(\S(?:[^_\n]*\S)?)_(?=[\s).,!?:;]|$)/g, "$1<i>$2</i>")
+      .replace(/(^|[\s(])~(\S(?:[^~\n]*\S)?)~(?=[\s).,!?:;]|$)/g, "$1<s>$2</s>");
+  }
+  function setPlatform(id) {
+    if (PLAY) {
+      const ch = channels.find((c) => c.name === id) || channels[0];
+      current = { ...ch.platform, channel: ch.name };
+      remember("chinwag.channel", ch.name);
+    } else {
+      current = platforms.find((p) => p.id === id) || platforms[0];
+      if (!REPLAY) remember("chinwag.platform", current.id);
+    }
+    const tab = PLAY ? current.channel : current.id;
+    for (const b of document.querySelectorAll(".tab")) b.setAttribute("aria-pressed", String(b.dataset.id === tab));
+    void refreshPerson();
+    $("phone").className = "phone p-" + current.id;
+    $("avatar").textContent = title.trim().charAt(0).toUpperCase();
+    $("sub").textContent = subtitle();
+    $("thread").innerHTML = "";
+    $("log").innerHTML = "";
+    rows.clear();
+    turns = [];
+    renderTurns();
+    typingEl = null;
+    statusText = null;
+    setReply(null);
+    $("sheet").classList.remove("on");
+    $("text").placeholder = current.id === "sms" ? "Text message" : "Message";
+    updateCounter();
+    if (!current.complete) sysnote("This simulator doesn't model every feature of the real platform yet.");
+    connect();
+  }
+  function sysnote(text, bad) {
+    const el = document.createElement("div");
+    el.className = "sysnote" + (bad ? " bad" : "");
+    el.textContent = text;
+    insert(el);
+  }
+  function insert(el) {
+    const thread = $("thread");
+    thread.insertBefore(el, typingEl && typingEl.isConnected ? typingEl : null);
+    thread.scrollTop = thread.scrollHeight;
+  }
+  function quoteEl(id) {
+    const target = rows.get(id);
+    if (!target) return null;
+    const q = document.createElement("div");
+    q.className = "quote";
+    const who = document.createElement("b");
+    who.textContent = target.classList.contains("me") ? "You" : title;
+    q.append(who, document.createTextNode(target.dataset.text));
+    return q;
+  }
+  function addMessage(line) {
+    const mine = line.kind === "in";
+    const row = document.createElement("div");
+    row.className = "row " + (mine ? "me" : "them");
+    row.dataset.text = line.text;
+    row.dataset.at = String(line.at);
+    if (line.id) { row.dataset.id = line.id; rows.set(line.id, row); }
+    const b = document.createElement("div");
+    b.className = "bubble";
+    if (line.replyTo) { const q = quoteEl(line.replyTo); if (q) b.appendChild(q); }
+    for (const a of line.attachments || []) {
+      const f = document.createElement("div");
+      f.className = "file";
+      f.textContent = "📎 " + (a.name || { image: "Photo", audio: "Voice note", document: "Document" }[a.kind]);
+      b.appendChild(f);
+    }
+    if (line.image) {
+      // A photo, the text under it its caption. Loaded from its URL, as the platform would fetch it.
+      const img = document.createElement("img");
+      img.className = "photo"; img.src = line.image.url; img.alt = "Photo"; img.loading = "lazy"; img.referrerPolicy = "no-referrer";
+      img.title = line.image.url;
+      b.appendChild(img);
+    }
+    // A WhatsApp template. Declared (it has its buttons, even none): header, filled body, footer,
+    // buttons, as WhatsApp shows it. Not declared: its name over the values it was sent with.
+    const tpl = line.template;
+    const declared = tpl && Array.isArray(tpl.buttons);
+    if (tpl) {
+      b.title = `Template ${tpl.name}`;
+      if (!declared) { const n = document.createElement("div"); n.className = "tpl-name"; n.textContent = `Template “${tpl.name}”`; b.appendChild(n); }
+      const h = tpl.header;
+      if (h && h.kind === "text") { const el = document.createElement("div"); el.className = "tpl-head"; el.textContent = h.text; b.appendChild(el); }
+      else if (h && h.kind === "image" && h.url && h.url.startsWith("https://")) {
+        const img = document.createElement("img");
+        img.className = "photo"; img.src = h.url; img.alt = "Photo"; img.loading = "lazy"; img.referrerPolicy = "no-referrer"; img.title = h.url;
+        b.appendChild(img);
+      } else if (h) {
+        const el = document.createElement("div");
+        el.className = "tpl-media";
+        el.textContent = { image: "🖼 Photo", video: "▶ Video", document: "📄 Document" }[h.kind] || h.kind;
+        if (h.url || h.fileId) el.title = h.url || h.fileId;
+        b.appendChild(el);
+      }
+    }
+    const body = document.createElement("span");
+    if (current.formatting === "whatsapp") body.innerHTML = whatsappHtml(line.text);
+    else body.textContent = line.text;
+    b.appendChild(body);
+    if (tpl && tpl.footer) { const f = document.createElement("span"); f.className = "tpl-foot"; f.textContent = tpl.footer; b.appendChild(f); }
+    if (current.id === "whatsapp") {
+      const stamp = document.createElement("span");
+      stamp.className = "stamp";
+      stamp.textContent = clock(line.at);
+      if (mine) { const t = document.createElement("span"); t.className = "ticks"; t.textContent = line.id ? "✓✓" : "✓"; stamp.appendChild(t); }
+      b.appendChild(stamp);
+    }
+    row.appendChild(b);
+    if (declared && tpl.buttons.length) {
+      // A quick reply comes back as their tap, with its payload; a URL or phone button opens, as a link button does.
+      const btns = document.createElement("div");
+      btns.className = "btns";
+      for (const t of tpl.buttons) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        if (t.type === "quick_reply") {
+          btn.textContent = "↩ " + t.text;
+          btn.addEventListener("click", () => send(t.text, { choice: { id: t.payload, title: t.text }, replyTo: line.id }));
+        } else {
+          const url = t.type === "url" ? t.url : "tel:" + t.phone;
+          btn.textContent = (t.type === "url" ? "↗ " : "📞 ") + t.text;
+          btn.title = url;
+          btn.addEventListener("click", () => openScreen(cards.find((c) => url.includes(c.match)) || { label: t.text, kind: "page" }, url));
+        }
+        btns.appendChild(btn);
+      }
+      row.appendChild(btns);
+    }
+    if (line.buttons) {
+      const btns = document.createElement("div");
+      btns.className = "btns";
+      for (const label of line.buttons) {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.textContent = "↩ " + label;
+        btn.addEventListener("click", () => send(label, { choice: { title: label }, replyTo: line.id }));
+        btns.appendChild(btn);
+      }
+      row.appendChild(btns);
+    }
+    if (line.list) {
+      const btns = document.createElement("div");
+      btns.className = "btns";
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.textContent = "☰ " + line.list.button;
+      btn.addEventListener("click", () => openList(line));
+      btns.appendChild(btn);
+      row.appendChild(btns);
+    }
+    if (line.link) {
+      // A button that opens a page (WhatsApp's call-to-action URL button). Nothing is really opened.
+      const btns = document.createElement("div");
+      btns.className = "btns";
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.textContent = "↗ " + line.link.label;
+      btn.title = line.link.url;
+      const url = line.link.url;
+      btn.addEventListener("click", () => openScreen(cards.find((c) => url.includes(c.match)) || { label: line.link.label, kind: "page" }, url));
+      btns.appendChild(btn);
+      row.appendChild(btns);
+    }
+    if (line.fields) {
+      // The channel's own params: a link shows as the app would show it (a card), anything else as a chip.
+      const fields = document.createElement("div");
+      fields.className = "fields";
+      for (const [name, value] of Object.entries(line.fields)) {
+        const url = typeof value === "string" ? value : value && typeof value.url === "string" ? value.url : null;
+        if (url && /^[a-z][a-z0-9+.-]*:/i.test(url)) { row.appendChild(linkCard(name, url)); continue; }
+        const chip = document.createElement("span");
+        const shown = value && typeof value === "object" ? (value.screen ?? value.url ?? JSON.stringify(value)) : String(value);
+        chip.textContent = `→ ${name}: ${shown}`;
+        chip.title = JSON.stringify(value);
+        fields.appendChild(chip);
+      }
+      if (fields.children.length) row.appendChild(fields);
+    }
+    const reacts = document.createElement("div");
+    reacts.className = "reacts";
+    row.appendChild(reacts);
+    if (current.id !== "whatsapp") {
+      const meta = document.createElement("div");
+      meta.className = "meta" + (line.carrier ? " carrier" : "");
+      let text = clock(line.at);
+      if (line.sms && (line.sms.segments > 1 || line.sms.encoding === "Unicode")) text += ` · ${line.sms.segments} segment${line.sms.segments > 1 ? "s" : ""}, ${line.sms.encoding}`;
+      if (line.carrier) text += " · sent by the carrier";
+      meta.textContent = text;
+      row.appendChild(meta);
+    }
+    addActions(row, line);
+    insert(row);
+  }
+  function linkCard(name, url) {
+    const rule = cards.find((c) => url.includes(c.match)) || { label: "Open in app", kind: "page" };
+    const card = document.createElement("button");
+    card.type = "button";
+    card.className = "linkcard" + (rule.kind === "call" ? " call" : "");
+    card.title = `${name}: ${url}`;
+    const label = document.createElement("b");
+    label.textContent = (rule.kind === "call" ? "📹 " : "") + rule.label + " ›";
+    const small = document.createElement("small");
+    small.textContent = `${name} · ${url}`;
+    card.append(label, small);
+    card.addEventListener("click", () => openScreen(rule, url));
+    return card;
+  }
+  // What opening a link shows. Nothing is really opened: this is the app's own screen, played.
+  function openScreen(rule, url) {
+    const screen = $("screen");
+    screen.innerHTML = "";
+    screen.className = "screen on" + (rule.kind === "call" ? " call" : "");
+    const bar = document.createElement("div");
+    bar.className = "s-bar";
+    const back = document.createElement("button");
+    back.type = "button"; back.textContent = "‹"; back.setAttribute("aria-label", "Back");
+    const name = document.createElement("b");
+    name.textContent = rule.label;
+    bar.append(back, name);
+    const body = document.createElement("div");
+    body.className = "s-body";
+    const close = () => { clearInterval(timer); screen.className = "screen"; };
+    let timer = null;
+    if (rule.kind === "call") {
+      const face = document.createElement("div");
+      face.className = "face"; face.textContent = "👩‍⚕️";
+      const state = document.createElement("div");
+      state.textContent = "Connecting…";
+      const started = Date.now();
+      timer = setInterval(() => {
+        const s = Math.floor((Date.now() - started) / 1000);
+        state.textContent = s < 2 ? "Connecting…" : `In call · ${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+      }, 500);
+      const end = document.createElement("button");
+      end.type = "button"; end.className = "end"; end.textContent = "End call";
+      end.addEventListener("click", close);
+      body.append(face, state, end);
+    } else {
+      const text = document.createElement("div");
+      text.textContent = `The app opens this screen.`;
+      body.appendChild(text);
+    }
+    const code = document.createElement("code");
+    code.textContent = url;
+    body.appendChild(code);
+    back.addEventListener("click", close);
+    screen.append(bar, body);
+  }
+  function addActions(row, line) {
+    const mine = line.kind === "in";
+    const actions = document.createElement("div");
+    actions.className = "actions";
+    if (current.replies && line.id) {
+      const reply = document.createElement("button");
+      reply.type = "button"; reply.title = "Reply"; reply.textContent = "↩";
+      reply.addEventListener("click", () => setReply({ id: line.id, text: line.text, fromAgent: !mine }));
+      actions.appendChild(reply);
+    }
+    if (!mine && current.personReactions && line.id) {
+      const react = document.createElement("button");
+      react.type = "button"; react.title = "React"; react.textContent = "☺";
+      react.addEventListener("click", () => togglePicker(row, current.personReactions.map((e) => [e, e]), (emoji) => {
+        fetch(BASE + "/api/reactions", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...where(), messageId: line.id, emoji }) });
+      }));
+      actions.appendChild(react);
+    }
+    if (!mine && current.tapbacksAsText) {
+      const tap = document.createElement("button");
+      tap.type = "button"; tap.title = "Tapback from an iPhone (arrives as a text)"; tap.textContent = "❤︎";
+      tap.addEventListener("click", () => togglePicker(row, TAPBACKS, (_e, word) => send(`${word} “${line.text}”`), true));
+      actions.appendChild(tap);
+    }
+    if (actions.children.length) row.appendChild(actions);
+  }
+  function togglePicker(row, options, pick, words) {
+    const open = row.querySelector(".picker");
+    document.querySelectorAll(".picker").forEach((p) => p.remove());
+    if (open) return;
+    const picker = document.createElement("div");
+    picker.className = "picker";
+    for (const [emoji, word] of options) {
+      const b = document.createElement("button");
+      b.type = "button";
+      b.textContent = emoji;
+      b.title = word;
+      b.addEventListener("click", () => { picker.remove(); pick(emoji, word); });
+      picker.appendChild(b);
+    }
+    row.appendChild(picker);
+  }
+  function openList(line) {
+    const sheet = $("sheet");
+    sheet.innerHTML = "";
+    const h = document.createElement("h3");
+    h.textContent = line.list.button;
+    sheet.appendChild(h);
+    let picked = null;
+    for (const r of line.list.rows) {
+      const label = document.createElement("label");
+      const radio = document.createElement("input");
+      radio.type = "radio"; radio.name = "row";
+      radio.addEventListener("change", () => { picked = r; });
+      const text = document.createElement("div");
+      text.textContent = r.title;
+      if (r.description) { const s = document.createElement("small"); s.textContent = r.description; text.appendChild(s); }
+      label.append(radio, text);
+      sheet.appendChild(label);
+    }
+    const go = document.createElement("button");
+    go.type = "button"; go.className = "send"; go.textContent = "Send";
+    go.addEventListener("click", () => { if (!picked) return; sheet.classList.remove("on"); send(picked.title, { choice: { id: picked.id, title: picked.title }, replyTo: line.id }); });
+    sheet.appendChild(go);
+    sheet.classList.add("on");
+  }
+  function setReply(r) {
+    replyTo = r;
+    $("replying").classList.toggle("on", !!r);
+    $("replyingText").textContent = r ? r.text : "";
+    if (r) $("text").focus();
+  }
+  function addReaction(line) {
+    const row = rows.get(line.messageId);
+    if (!row) return;
+    const pill = document.createElement("span");
+    pill.className = "react";
+    pill.textContent = line.emoji;
+    row.querySelector(".reacts").appendChild(pill);
+  }
+  function markRead(ids) {
+    for (const id of ids) {
+      const t = rows.get(id)?.querySelector(".ticks");
+      if (t) { t.textContent = "✓✓"; t.classList.add("read"); }
+    }
+  }
+  function showTyping(on) {
+    if (!current.typing) return;
+    if (current.id === "whatsapp" || current.id === "telegram") { $("sub").textContent = on ? "typing…" : subtitle(); return; }
+    if (on) {
+      if (!typingEl) {
+        typingEl = document.createElement("div");
+        typingEl.className = "dots";
+        typingEl.innerHTML = "<i></i><i></i><i></i><span class='status'></span>";
+      }
+      typingEl.querySelector(".status").textContent = statusText || "";
+      $("thread").appendChild(typingEl);
+      $("thread").scrollTop = $("thread").scrollHeight;
+    } else if (typingEl) typingEl.remove();
+  }
+  function showStatus(text) {
+    statusText = text;
+    if (text) showTyping(true);
+    else if (typingEl) typingEl.querySelector(".status").textContent = "";
+  }
+  // Per-turn metrics: a turn starts with a message from the person; a double text sent before any
+  // acknowledgement joins it, and timings count from their latest message.
+  function startTurn(text, at) {
+    const open = turns.at(-1);
+    if (open && open.ack == null) { open.texts.push(text); open.from = at; }
+    else turns.push({ texts: [text], from: at, ack: null, done: null, calls: 0 });
+    renderTurns();
+  }
+  function onSeen(kind, at) {
+    const t = turns.at(-1);
+    if (!t) return;
+    if (t.ack == null) t.ack = at - t.from;
+    if (kind === "message") t.done = at - t.from;
+    renderTurns();
+  }
+  function renderTurns() {
+    $("turns").innerHTML = "";
+    for (const t of turns) {
+      const tr = document.createElement("tr");
+      for (const [i, v] of [t.texts.join(" / "), fmt(t.ack), fmt(t.done), String(t.calls)].entries()) {
+        const td = document.createElement("td");
+        if (i === 0) td.className = "msg";
+        td.textContent = v;
+        tr.appendChild(td);
+      }
+      $("turns").appendChild(tr);
+    }
+  }
+  const toolEls = new Map();
+  function addTool(line) {
+    const el = document.createElement("div");
+    el.className = "toolcall";
+    toolEls.set(line.callId, el);
+    drawTool(el, line);
+    insert(el);
+  }
+  function updateTool(line) {
+    const el = toolEls.get(line.callId);
+    if (el) drawTool(el, line);
+  }
+  function drawTool(el, line) {
+    el.innerHTML = "";
+    const head = document.createElement("div");
+    head.className = "tc-head";
+    const name = document.createElement("b");
+    name.textContent = "🔧 " + line.tool;
+    const st = document.createElement("span");
+    st.className = "st" + (line.status === "background" ? " bg" : line.status === "failed" ? " bad" : "");
+    st.textContent = { running: "running…", background: `still running after ${fmt(line.ms)}, moved to the background`, done: `answered in ${fmt(line.ms)}`, failed: `failed after ${fmt(line.ms)}` }[line.status] || line.status;
+    head.append(name, st);
+    if (line.played) { const p = document.createElement("span"); p.className = "st"; p.textContent = `· played as “${line.played}”`; head.appendChild(p); }
+    el.appendChild(head);
+    const block = (label, value, open) => {
+      const d = document.createElement("details");
+      if (open) d.open = true;
+      const sm = document.createElement("summary");
+      sm.textContent = label;
+      const pre = document.createElement("pre");
+      let text = typeof value === "string" ? value : JSON.stringify(value, null, 2);
+      try { if (typeof value === "string") text = JSON.stringify(JSON.parse(value), null, 2); } catch {}
+      pre.textContent = text;
+      d.append(sm, pre);
+      el.appendChild(d);
+    };
+    block("input", line.input ?? {}, false);
+    if (line.output !== undefined) block(line.status === "failed" ? "error" : "output", line.output, false);
+    if (line.changes && line.changes.length) {
+      const ul = document.createElement("ul");
+      for (const c of line.changes) { const li = document.createElement("li"); li.textContent = c; ul.appendChild(li); }
+      el.appendChild(ul);
+    }
+  }
+  function setDebug(on) {
+    document.body.classList.toggle("debug", on);
+    $("debug").setAttribute("aria-pressed", String(on));
+    try { localStorage.setItem("chinwag.debug", on ? "1" : "0"); } catch {}
+  }
+  function showLine(line, live) {
+    document.querySelector("#thread .empty")?.remove();
+    if (line.kind === "tool") { addTool(line); return; }
+    if (line.kind === "in") { addMessage(line); startTurn(line.text, line.at); }
+    else if (line.kind === "out") { addMessage(line); if (!line.carrier) onSeen("message", line.at); }
+    else if (line.kind === "reaction") { addReaction(line); if (line.by === "agent") onSeen("reaction", line.at); }
+    else if (line.kind === "read") markRead(line.messageIds);
+    else if (line.kind === "undelivered") sysnote(`Not delivered: “${line.text.slice(0, 60)}” (${line.reason})`, true);
+  }
+  function trace(e) {
+    const t = turns.at(-1);
+    if (t && (e.type === "model.call" || e.type === "model.restarted")) { t.calls++; renderTurns(); }
+    let tag = "", cls = "", text = e.type;
+    if (e.type === "tool.end") { tag = "inline"; cls = "inline"; text = `${e.tool} answered in ${e.ms} ms`; }
+    else if (e.type === "tool.detached") { tag = "background"; cls = "bg"; text = `${e.tool} still running after ${e.ms} ms (${e.task})`; }
+    else if (e.type === "task.done") { tag = "done"; cls = "bg"; text = `${e.tool} finished after ${e.ms} ms (${e.task})`; }
+    else if (e.type === "model.restarted") { tag = "folded"; cls = "fold"; text = "new message arrived, step restarted with it"; }
+    else if (e.type === "ack.required") { tag = "held"; cls = "ack"; text = `${e.held.join(", ")} held until they're acknowledged`; }
+    else if (e.type === "model.call") { text = `model ${e.ms} ms` + (e.toolCalls.length ? ` → ${e.toolCalls.join(", ")}` : " → (nothing)"); }
+    else if (e.type === "message.in") { text = `in [${e.messageId}]: ${e.text}`; }
+    else if (e.type === "message.out") { text = `out: ${e.text}` + (e.buttons ? ` [${e.buttons.join(" | ")}]` : "") + (e.list ? ` [list: ${e.list.rows.length} rows]` : "") + (e.link ? ` [link: ${e.link.label} → ${e.link.url}]` : "") + (e.image ? ` [image: ${e.image.url}]` : "") + (e.fields ? ` [${Object.keys(e.fields).join(", ")}]` : ""); }
+    else if (e.type === "reaction") { text = `reacted ${e.emoji} to ${e.messageId}`; }
+    else if (e.type === "reaction.in") { text = `they reacted ${e.emoji}`; }
+    else if (e.type === "status") { text = `status: ${e.text}`; }
+    else if (e.type === "text.hidden") { text = `(not shown) ${e.text}`; }
+    else if (e.type === "skill.loaded") { text = `loaded skill ${e.skill}`; }
+    else if (e.type === "turn.end") { text = `turn done in ${e.ms} ms`; }
+    else if (e.type === "tool.start") { text = `${e.tool} started`; }
+    else if (e.type === "message.undelivered") { tag = "not delivered"; cls = "bad"; text = e.reason; }
+    // In the thread too, so it shows with Debug off; handle() shows each numbered event once.
+    else if (e.type === "model.error") { tag = "model error"; cls = "bad"; text = e.error; sysnote(`Model error: ${e.error}`, true); }
+    logRow(e.at, tag, cls, text);
+  }
+  // A Backend button's run, on every open page: what it returned, or why it failed.
+  function actionDone(d) {
+    if (d.ok) logRow(d.at, "playground", "inline", d.label + (d.result ? ` → ${d.result}` : ""));
+    else logRow(d.at, "playground failed", "bad", `${d.label}: ${d.error}`);
+  }
+  function logRow(at, tag, cls, text) {
+    const row = document.createElement("div");
+    const ts = document.createElement("span");
+    ts.className = "t";
+    ts.textContent = new Date(at).toLocaleTimeString([], { hour12: false });
+    const what = document.createElement("span");
+    if (tag) { const b = document.createElement("span"); b.className = "tag " + cls; b.textContent = tag + " "; what.appendChild(b); }
+    what.appendChild(document.createTextNode(text));
+    row.append(ts, what);
+    $("log").appendChild(row);
+    $("log").scrollTop = $("log").scrollHeight;
+    if ($("pTrace").hidden) $("traceDot").hidden = false;
+  }
+  // The page hears the agent's events on a live stream or, where the stream never arrives (some
+  // tunnels hold it back), by asking for them again and again. The events are numbered: `lastSeq`
+  // is the last one shown, so none shows twice, and `opened` ends the loops of an older connect().
+  let lastSeq = 0;
+  let opened = 0;
+  let polling = false;
+  async function connect() {
+    const mine = ++opened;
+    if (source) { source.close(); source = null; }
+    if (replayData) { showReplay(replayData); return; }
+    const { lines, seq } = await (await fetch(BASE + "/api/transcript" + query())).json();
+    if (mine !== opened) return;
+    for (const l of lines) showLine(l, false);
+    if (!lines.length) {
+      const empty = document.createElement("p");
+      empty.className = "empty";
+      empty.textContent = "This channel has no messages yet.";
+      $("thread").appendChild(empty);
+    }
+    lastSeq = seq;
+    if (polling) { poll(mine); return; }
+    let heard = false;
+    const fallBack = () => {
+      if (heard || mine !== opened) return;
+      clearTimeout(timer);
+      source.close(); source = null;
+      polling = true;
+      poll(mine);
+    };
+    const timer = setTimeout(fallBack, 3000);
+    source = new EventSource(BASE + "/api/events" + query() + "&after=" + seq);
+    source.onerror = fallBack;
+    source.onmessage = (ev) => {
+      const d = JSON.parse(ev.data);
+      if (d.type === "hello") { heard = true; clearTimeout(timer); }
+      handle(d);
+    };
+  }
+  async function poll(mine) {
+    let wait = 500;
+    while (mine === opened) {
+      try {
+        const res = await fetch(BASE + "/api/poll" + query() + "&after=" + lastSeq);
+        if (!res.ok) throw new Error("poll " + res.status);
+        const { boot, seq, events } = await res.json();
+        if (mine !== opened) return;
+        handle({ type: "hello", boot });
+        for (const d of events) { handle(d); if (mine !== opened) return; }
+        lastSeq = Math.max(lastSeq, seq);
+        wait = 500;
+      } catch {
+        await new Promise((r) => setTimeout(r, wait));
+        wait = Math.min(wait * 2, 8000);
+      }
+    }
+  }
+  function handle(d) {
+    if (typeof d.seq === "number") { if (d.seq <= lastSeq) return; lastSeq = d.seq; }
+    if (d.type === "hello") { if (d.boot !== BOOT) location.reload(); }
+    else if (d.type === "line") showLine(d.line, true);
+    else if (d.type === "lineUpdate") updateTool(d.line);
+    else if (d.type === "id") giveId(d.at, d.messageId);
+    else if (d.type === "status") { if (current.status) { showStatus(d.text); if (d.text) onSeen("status", d.at); } }
+    else if (d.type === "typing") showTyping(d.on);
+    else if (d.type === "trace") trace(d.event);
+    else if (d.type === "action") actionDone(d);
+    else if (d.type === "reset") setPlatform(PLAY ? current.channel : current.id);
+  }
+  /** A saved run: its transcript, and (cloud tests) its simulated tool calls with what they played and changed. */
+  function showReplay(data) {
+    sysnote("Replay of a saved conversation");
+    let lines = data.transcript || data.lines || [];
+    if (Array.isArray(data.toolCalls) && data.toolCalls.length) {
+      lines = lines.filter((l) => l.kind !== "tool").concat(data.toolCalls.map((c, i) => ({
+        kind: "tool", callId: `replay-${i}`, tool: c.tool, input: c.input, at: c.at,
+        status: c.ok ? "done" : "failed", ms: c.latencyMs, output: c.ok ? c.output : c.error, played: c.kind, changes: c.changes,
+      })));
+    }
+    lines.sort((a, b) => a.at - b.at);
+    for (const l of lines) showLine(l, false);
+  }
+  async function send(text, extra = {}) {
+    const body = { ...where(), text, ...extra };
+    if (!body.replyTo && replyTo) body.replyTo = replyTo.id;
+    setReply(null);
+    await fetch(BASE + "/api/messages", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+  }
+  // The person's message is shown at once; the agent's id for it (for ticks, replies and
+  // reactions) arrives a moment later.
+  function giveId(at, id) {
+    const row = [...document.querySelectorAll(".row.me")].reverse().find((r) => r.dataset.at === String(at) && !r.dataset.id);
+    if (!row || !id) return;
+    row.dataset.id = id;
+    rows.set(id, row);
+    const ticks = row.querySelector(".ticks");
+    if (ticks && !ticks.classList.contains("read")) ticks.textContent = "✓✓";
+    row.querySelector(".actions")?.remove();
+    addActions(row, { kind: "in", id, text: row.dataset.text });
+  }
+  function updateCounter() {
+    const text = $("text").value;
+    if (current?.id !== "sms" || !text) { $("counter").textContent = ""; return; }
+    const gsm = /^[\x20-\x7E\n\r£¥èéùìòÇØøÅåΔ_ΦΓΛΩΠΨΣΘΞÆæßÉ¡ÄÖÑÜ§¿äöñüà€]*$/.test(text);
+    const len = [...text].length, single = gsm ? 160 : 70, multi = gsm ? 153 : 67;
+    const segs = len <= single ? 1 : Math.ceil(len / multi);
+    const left = (len <= single ? single : segs * multi) - len;
+    $("counter").textContent = segs > 1 ? `${left}/${segs}` : String(left);
+  }
+  async function refreshStatus() {
+    try {
+      const s = await (await fetch(BASE + "/api/status")).json();
+      $("status").textContent = s.busy ? `busy · ${s.backgroundTasks} in background` : `idle ${Math.round(s.idleForMs / 1000)} s`;
+    } catch {}
+  }
+  $("form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    const text = $("text").value.trim();
+    if (!text) return;
+    $("text").value = "";
+    updateCounter();
+    send(text);
+  });
+  $("text").addEventListener("input", updateCounter);
+  // A file goes with whatever is in the message box as its caption.
+  $("file").addEventListener("change", () => {
+    const file = $("file").files[0];
+    $("file").value = "";
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const kind = file.type.startsWith("image/") ? "image" : file.type.startsWith("audio/") ? "audio" : "document";
+      const data = String(reader.result).split(",")[1] || "";
+      const caption = $("text").value.trim();
+      $("text").value = "";
+      updateCounter();
+      send(caption, { attachments: [{ kind, mime: file.type || "application/octet-stream", name: file.name, data }] });
+    };
+    reader.readAsDataURL(file);
+  });
+  $("cancelReply").addEventListener("click", () => setReply(null));
+  $("reset").addEventListener("click", () => fetch(BASE + "/api/reset" + query(), { method: "POST" }));
+  $("clear").addEventListener("click", () => {
+    const who = people.find((p) => p.phone === person);
+    if (who && confirm(`Forget ${who.name}? Their history, schedules and everything the agent kept about them go, on every channel.`)) {
+      fetch(BASE + "/api/clear?" + new URLSearchParams({ person }).toString(), { method: "POST" });
+    }
+  });
+  document.addEventListener("click", (e) => {
+    if (!e.target.closest(".picker") && !e.target.closest(".actions")) document.querySelectorAll(".picker").forEach((p) => p.remove());
+  });
+  function tabFor(id, label, p) {
+    const b = document.createElement("button");
+    b.className = "tab";
+    b.type = "button";
+    b.dataset.id = id;
+    const img = document.createElement("img");
+    img.src = `https://cdn.simpleicons.org/${p.icon}`;
+    img.alt = "";
+    b.append(img, document.createTextNode(label));
+    if (!p.complete) { const s = document.createElement("small"); s.textContent = "partial"; b.appendChild(s); }
+    const badge = document.createElement("span"); badge.className = "unread"; badge.hidden = true; badge.setAttribute("aria-label", "new message"); b.appendChild(badge);
+    b.addEventListener("click", () => setPlatform(id));
+    $("tabs").appendChild(b);
+  }
+  // The playground with nothing to play: say what the agent's author has to declare.
+  function empty(html) {
+    document.querySelector("main").innerHTML = `<div class="empty">${html}</div>`;
+  }
+  // The side panel's tabs: Person (what is set and waiting for this person, the clock, nudges),
+  // the author's Backend buttons, per-turn timings and the trace.
+  function showPane(id) {
+    for (const b of document.querySelectorAll(".sidetabs button")) b.setAttribute("aria-selected", String(b.dataset.pane === id));
+    for (const pane of document.querySelectorAll(".pane")) pane.hidden = pane.id !== id;
+    if (id === "pTrace") $("traceDot").hidden = true;
+    remember("chinwag.pane", id);
+  }
+  for (const b of document.querySelectorAll(".sidetabs button")) b.addEventListener("click", () => showPane(b.dataset.pane));
+  let panel = { person: false, nudge: false, clock: false };
+  let templates = [];
+  let quietEndsAt = null;
+  let nudgeKind = "prompt";
+  const post = async (path, body) => {
+    const res = await fetch(BASE + path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ ...where(), ...body }) });
+    return { ok: res.ok, data: await res.json().catch(() => ({})) };
+  };
+  const at = (ms, zone, opts = {}) => new Date(ms).toLocaleString("en-US", { timeZone: zone || undefined, weekday: "short", month: "short", day: "numeric", hour: "numeric", minute: "2-digit", ...opts });
+  const city = (zone) => (zone ? zone.split("/").pop().replaceAll("_", " ") : "");
+  const short = (text, n = 140) => (text.length > n ? text.slice(0, n - 1) + "…" : text);
+  function item(tag, cls, what, meta) {
+    const li = document.createElement("li");
+    const t = document.createElement("span"); t.className = "tag" + (cls ? " " + cls : ""); t.textContent = tag;
+    const w = document.createElement("span"); w.className = "what"; w.textContent = short(what); w.title = what;
+    li.append(t, w);
+    if (meta) { const m = document.createElement("span"); m.className = "dim"; m.textContent = meta; li.append(m); }
+    return li;
+  }
+  async function refreshPerson() {
+    if (!PLAY || !panel.person || !current) return;
+    const res = await fetch(BASE + "/api/person" + query());
+    if (!res.ok) return;
+    const { now, contact, outbox, lastOut = {} } = await res.json();
+    markUnread(lastOut);
+    const zone = contact?.timeZone;
+    $("theirTime").textContent = zone ? at(now, zone) : at(now);
+    $("theirZone").textContent = !contact ? "They have not written to the agent yet, so nudges to them are refused (unknown_person)."
+      : zone ? `${city(zone)} time, set by ${contact.timeZoneSource === "person" ? "them" : "the business"}`
+      : "Your time: their time zone is not known, so quiet hours don't apply to them";
+    const pill = $("quietPill");
+    quietEndsAt = null;
+    for (const h of outbox.held) if (h.holdUntil && (!quietEndsAt || h.holdUntil < quietEndsAt)) quietEndsAt = h.holdUntil;
+    if (contact?.quietHours) {
+      pill.hidden = false;
+      const inQuiet = quietEndsAt !== null && quietEndsAt > now;
+      pill.className = "pill " + (inQuiet ? "quiet" : "open");
+      pill.textContent = `Quiet hours ${contact.quietHours.from}–${contact.quietHours.to}` + (inQuiet ? ` · nudges wait until ${at(quietEndsAt, zone, { weekday: undefined, month: undefined, day: undefined })}` : "");
+      pill.title = contact.quietHoursSource === "person" ? "Their own quiet hours" : "The agent's quiet hours";
+    } else pill.hidden = true;
+    const rules = [];
+    if (contact) {
+      rules.push(contact.quietHours ? `Quiet hours ${contact.quietHours.from}–${contact.quietHours.to} (${contact.quietHoursSource === "person" ? "their own" : "the agent's"})` : contact.quietHoursSource === "no_time_zone" ? "Quiet hours don't apply: no time zone" : "No quiet hours");
+      if (contact.stop) rules.push("Texted STOP: nothing the business starts goes");
+      for (const p of contact.pauses) rules.push(`Paused until ${p.until ? at(p.until - 1, zone) : "?"}`);
+      for (const t of contact.topics) rules.push(`Not about: ${t.rule}`);
+    }
+    $("contactLine").textContent = rules.join(" · ");
+    const list = [];
+    for (const h of outbox.held) {
+      const until = h.reason === "window_closed" ? "until they reply (WhatsApp window closed)" : `until ${at(h.holdUntil, zone)}`;
+      list.push(item(`Held ${h.kind} nudge · goes on ${h.channel}`, "held", h.what, `${until}${h.expiresAt ? ` · dropped if still held at ${at(h.expiresAt, zone)}` : ""}`));
+    }
+    for (const sc of outbox.schedules) list.push(item(sc.origin === "person" ? "Their reminder" : "Scheduled by the business", "", sc.message, `${sc.summary}${sc.nextRunAt ? ` · next ${at(sc.nextRunAt, sc.timeZone)}` : ""}${sc.respectsQuietHours ? " · waits for quiet hours" : ""}`));
+    if (!list.length) { const li = document.createElement("li"); li.className = "empty"; li.textContent = "Nothing scheduled or held."; list.push(li); }
+    $("waiting").replaceChildren(...list);
+    $("toQuietEnd").disabled = !quietEndsAt;
+  }
+  // A new message on a channel not shown: a badge on its tab, until it is opened.
+  function markUnread(lastOut) {
+    const key = (ch) => `chinwag.seen.${person}.${ch}`;
+    for (const b of document.querySelectorAll(".tab")) {
+      const ch = b.dataset.id;
+      const times = lastOut[ch] ?? [];
+      const last = times.at(-1) ?? 0;
+      const badge = b.querySelector(".unread");
+      if (!badge) continue;
+      const stored = recall(key(ch));
+      if (ch === current.channel || stored === null) { remember(key(ch), String(last)); badge.hidden = true; continue; }
+      const unread = times.filter((t) => t > Number(stored)).length;
+      badge.hidden = unread === 0;
+      badge.textContent = unread > 9 ? "9+" : String(unread);
+    }
+  }
+  function setNudgeKind(kind) {
+    nudgeKind = kind;
+    for (const b of document.querySelectorAll(".seg button")) b.setAttribute("aria-pressed", String(b.dataset.kind === kind));
+    $("nTemplateRow").hidden = kind !== "template";
+    $("nText").hidden = kind === "template";
+    $("nText").placeholder = kind === "text" ? "Sent exactly as written, e.g. Your code is 4417" : "What the agent should tell them, e.g. Their order 1042 shipped";
+  }
+  function setUpPersonPanel() {
+    if (!PLAY || !panel.person) return;
+    $("tabPerson").hidden = false;
+    if (panel.clock) {
+      $("clockSec").hidden = false;
+      for (const b of document.querySelectorAll("[data-advance]")) b.addEventListener("click", async () => { await post("/api/clock", { advanceMs: Number(b.dataset.advance) }); refreshPerson(); });
+      $("toQuietEnd").addEventListener("click", async () => { if (quietEndsAt) await post("/api/clock", { to: quietEndsAt + 1000 }); refreshPerson(); });
+      $("clockGo").addEventListener("click", async () => { const v = $("clockTo").value; if (v) await post("/api/clock", { to: new Date(v).getTime() }); refreshPerson(); });
+    }
+    $("tzSet").addEventListener("click", async () => { await post("/api/time-zone", { time_zone: $("tz").value.trim() }); refreshPerson(); });
+    $("qSet").addEventListener("click", async () => { await post("/api/quiet-hours", { quiet_hours: { from: $("qFrom").value.trim(), to: $("qTo").value.trim() } }); refreshPerson(); });
+    $("qOff").addEventListener("click", async () => { await post("/api/quiet-hours", { quiet_hours: "off" }); refreshPerson(); });
+    $("qDefault").addEventListener("click", async () => { await post("/api/quiet-hours", { quiet_hours: null }); refreshPerson(); });
+    if (panel.nudge) {
+      $("nudgeSec").hidden = false;
+      for (const t of templates) { const o = document.createElement("option"); o.value = t.name; o.textContent = t.name; o.title = t.body; $("nTemplate").appendChild(o); }
+      for (const b of document.querySelectorAll(".seg button")) {
+        b.disabled = b.dataset.kind === "template" && !templates.length;
+        if (b.disabled) b.title = "This agent declares no WhatsApp templates";
+        b.addEventListener("click", () => setNudgeKind(b.dataset.kind));
+      }
+      $("nSend").addEventListener("click", async () => {
+        const text = $("nText").value.trim();
+        const body = { kind: nudgeKind, ...(nudgeKind === "prompt" ? { prompt: text } : nudgeKind === "text" ? { text } : { template: $("nTemplate").value, body: $("nValues").value.split(",").map((v) => v.trim()).filter(Boolean) }) };
+        if ($("nAt").value) body.at = new Date($("nAt").value).getTime();
+        if (!$("nQuiet").checked) body.respect_quiet_hours = false;
+        const mins = Number($("nExpires").value);
+        if (mins > 0) body.expires_at = Date.now() + mins * 60_000;
+        if ($("nKey").value.trim()) body.idempotency_key = $("nKey").value.trim();
+        $("nSend").disabled = true;
+        $("nResult").textContent = "";
+        try {
+          const { ok, data } = await post("/api/nudge", body);
+          $("nResult").textContent = ok ? `${data.status}${data.reason ? ` (${data.reason})` : ""}` : (data.error || "failed");
+          if (ok && nudgeKind !== "template") $("nText").value = "";
+        } finally { $("nSend").disabled = false; refreshPerson(); }
+      });
+    }
+    setInterval(refreshPerson, 3000);
+  }
+  (async () => {
+    ({ platforms, cards, people = [], channels = [], templates = [], panel = panel } = await (await fetch(BASE + "/api/platforms")).json());
+    if (PLAY) {
+      if (!channels.length) return empty("This agent has no channels. Declare them in <code>createAgent({ channels: [...] })</code> (whatsapp(), sms(), customUI()) to test it here.");
+      if (!people.length) return empty("This agent has no test people. Declare who may be played here in <code>createAgent({ testPeople: [{ name, phone }] })</code>.");
+      if (!people.some((p) => p.phone === person)) person = people[0].phone;
+      remember("chinwag.person", person);
+      for (const p of people) {
+        const o = document.createElement("option");
+        o.value = p.phone;
+        o.textContent = `${p.name} · ${p.phone}`;
+        $("who").appendChild(o);
+      }
+      $("who").value = person;
+      $("who").addEventListener("change", () => { person = $("who").value; remember("chinwag.person", person); setPlatform(current.channel); });
+      for (const c of channels) tabFor(c.name, c.name, c.platform);
+      setUpPersonPanel();
+      const saved = recall("chinwag.pane");
+      showPane(saved && !document.querySelector(`[data-pane="${saved}"]`)?.hidden ? saved : panel.person ? "pPerson" : "pTrace");
+    } else {
+      for (const p of platforms) tabFor(p.id, p.name, p);
+      showPane("pTrace");
+    }
+    let debug = params.get("debug") === "1";
+    if (!params.has("debug")) { try { debug = localStorage.getItem("chinwag.debug") === "1"; } catch {} }
+    setDebug(debug);
+    $("debug").addEventListener("click", () => setDebug(!document.body.classList.contains("debug")));
+    if (REPLAY) {
+      replayData = await (await fetch(REPLAY)).json();
+      // The agent's own name in the replay's header, when the saved run has one.
+      if (replayData.agentTitle) { title = replayData.agentTitle; $("name").textContent = title; document.title = `${title} · replay`; }
+      for (const b of document.querySelectorAll(".tab")) b.disabled = true;
+      setPlatform(replayData.channel || replayData.platform || "sms");
+      return;
+    }
+    const saved = PLAY ? params.get("channel") || recall("chinwag.channel") : params.get("platform") || recall("chinwag.platform");
+    setPlatform(saved || (PLAY ? channels[0].name : "sms"));
+    setInterval(refreshStatus, 1000);
+    refreshStatus();
+  })();
+</script>
+</body>
+</html>