@flow-engineer/flow 0.2.1 → 0.2.3

package/dist/simulators/src/page.html

@@ -13,26 +13,50 @@
     :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); }
+  [hidden] { display: none !important; }
+  body { margin: 0; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); }
   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; }
+  .top { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
+  .top h1 { min-width: 0; font-size: 14px; margin: 0; font-weight: 650; line-height: 1.35; }
+  .top h1 .agent-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .top h1 small { display: block; margin-top: 2px; color: var(--quiet); font-size: 11px; font-weight: 400; }
+  .tabs { display: flex; align-items: center; justify-self: center; gap: 4px; max-width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); overflow-x: auto; scrollbar-width: thin; }
+  .tab { position: relative; display: flex; flex: none; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--quiet); cursor: pointer; transition: background .16s, color .16s; }
+  .tab img, .tab svg { display: block; width: 20px; height: 20px; flex: none; }
+  .tab-icon.web { color: #4679d8; } .tab-icon.terminal { color: var(--ink); } .tab-icon.imessage { color: #32bc4c; } .tab-icon.sms { color: #3578e5; }
+  .tab-label { display: flex; align-items: center; gap: 6px; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; padding-left: 0; font-size: 12px; font-weight: 550; transition: max-width .2s ease, opacity .16s ease, padding-left .2s ease; }
+  .tab:hover .tab-label, .tab:focus-visible .tab-label { max-width: 160px; opacity: 1; padding-left: 8px; }
+  .tab:hover { background: var(--panel); color: var(--ink); }
+  .tab[aria-pressed="true"] { background: var(--panel); color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 1px 3px rgba(0,0,0,.04); }
+  .tab:focus-visible, .ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .tab .unread { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; }
+  .header-controls { display: flex; justify-self: end; align-items: flex-end; gap: 8px; white-space: nowrap; }
+  .person-picker { display: grid; gap: 3px; min-width: 0; }
+  .person-picker > span { color: var(--quiet); font-size: 10px; font-weight: 550; }
+  .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
+  .ghost:hover { background: var(--bg); }
+  .header-actions { display: flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
+  .header-actions .ghost { font-size: 12px; }
+  .header-actions svg { width: 14px; height: 14px; flex: none; }
+  select.ghost { display: block; width: 190px; max-width: 100%; font-size: 12px; text-overflow: ellipsis; }
+  @media (max-width: 1240px) {
+    .top { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; }
+    .tabs { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
+  }
+  @media (max-width: 580px) {
+    .top { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; gap: 12px; }
+    .tabs { grid-row: auto; grid-column: auto; justify-self: stretch; width: fit-content; }
+    .header-controls { justify-self: stretch; justify-content: space-between; gap: 10px; }
+    .person-picker { flex: 1; } select.ghost { width: 100%; }
+    .header-actions { padding-left: 8px; }
+  }
+  @media (hover: none) { .tab:hover:not(:focus-visible) .tab-label { max-width: 0; opacity: 0; padding-left: 0; } }
+  @media (prefers-reduced-motion: reduce) { .tab, .tab-label { transition: none; } }
   .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; } }
+  main { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px; padding: 16px; min-height: 0; }
+  @media (max-width: 820px) { body { height: auto; min-height: 100dvh; } 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; }
@@ -233,24 +257,60 @@
   .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); }
+  .auth-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line, #ddd); font-size: 13px; }
+  .auth-state[hidden] { display: none; }
+  .auth-state a { color: var(--accent); text-underline-offset: 3px; }
+  .auth-state button { margin-left: auto; font-size: 12px; }
+  .local-cli-mode main { grid-template-columns: minmax(0, 1fr); }
+  .local-cli-mode .side { display: none; }
+  .local-cli-mode .person-picker, .local-cli-mode #debug { display: none; }
+  .cli-console { min-height: 0; display: flex; flex-direction: column; border: 1px solid #303844; border-radius: 12px; overflow: hidden; background: #11161e; color: #e2e8f0; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  .cli-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 18px; background: #1a212c; border-bottom: 1px solid #303844; }
+  .cli-bar b { display: block; font-size: 12px; }
+  .cli-bar small { color: #9caabd; font-size: 11px; }
+  .cli-console button { border: 1px solid #43516a; border-radius: 5px; background: #273243; color: #d0daea; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 12px; }
+  .cli-console button:disabled { opacity: .5; cursor: default; }
+  .cli-console pre { flex: 1; min-height: 120px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 18px 20px; font: inherit; }
+  .cli-console .stderr { color: #c9bb9b; }
+  .cli-console .input { color: #b8dfc1; }
+  .cli-console .exit { display: block; color: #96a5ba; font-size: 11px; margin: 4px 0 16px; }
+  .cli-login { margin: 0 18px 12px; color: #9fc5ff; }
+  .cli-form { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #303844; background: #161d27; }
+  .cli-form > span { color: #b8dfc1; }
+  .cli-form input { flex: 1; min-width: 0; border: 0; outline: none; padding: 8px 0; background: transparent; color: #e2e8f0; font: inherit; }
+  .cli-form input::placeholder { color: #94a3b8; }
+  .cli-form:focus-within { box-shadow: inset 0 2px #719c7b; }
+  .cli-state { color: #94a3b8; padding: 0 18px 8px; font-size: 11px; }
+  @media (max-width: 820px) { .cli-console { height: 680px; } }
 </style>
 </head>
 <body>
-<div class="top">
-  <h1>{{title}} <small>· Flow Framework playground</small></h1>
+<header class="top">
+  <h1><span class="agent-title">{{title}}</span><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>
+  <div class="header-controls">
+    <label class="person-picker play-only" for="who"><span>Person</span><select class="ghost" id="who" aria-label="Person" title="Choose a saved test person, or start as a new signed-out user"></select></label>
+    <div class="header-actions">
+      <button class="ghost" id="debug" type="button" aria-pressed="false" title="Show the agent's tool calls in the conversation"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m8 8-4 4 4 4m8-8 4 4-4 4m-3-11-2 14"/></svg>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"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 10v7m4-7v7"/></svg>Clear history</button>
+    </div>
+  </div>
+</header>
 <main>
+  <section class="cli-console" id="cliPanel" aria-label="Local CLI" hidden>
+    <div class="cli-bar"><div><b id="cliTitle">Local CLI</b><small>Runs on this computer · independent sign-in · no shell</small></div><button type="button" id="cliReset">New CLI session</button></div>
+    <pre id="cliOutput" role="log" aria-label="CLI output" aria-live="polite" tabindex="0"></pre>
+    <a class="cli-login" id="cliLogin" target="_blank" rel="noopener noreferrer" hidden>Open sign-in, then return here</a>
+    <form class="cli-form" id="cliForm"><span aria-hidden="true">$</span><input id="cliInput" autocomplete="off" spellcheck="false" aria-label="CLI input"><button type="submit" id="cliSend" disabled>Run ↵</button></form>
+    <div class="cli-state" id="cliState">Ready</div>
+  </section>
   <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="auth-state" id="authState" hidden><span id="authLabel"></span><a id="signIn" hidden>Sign in</a><button class="ghost" id="startSignedOut" type="button">New signed-out user</button></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">
@@ -358,8 +418,13 @@
   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 authentication = false;
+  let localCli = null;
+  let cliEpoch = 0, cliSeq = 0, cliRunning = false, cliWaiting = false;
+  let signedIn = true;
   let title = document.getElementById("name").textContent;
   const $ = (id) => document.getElementById(id);
+  const clearLabel = $("clear").lastChild;
   const TAPBACKS = [["❤️", "Loved"], ["👍", "Liked"], ["👎", "Disliked"], ["😂", "Laughed at"], ["‼️", "Emphasized"], ["❓", "Questioned"]];
   let platforms = [];
   let cards = [];
@@ -372,6 +437,9 @@
   const rows = new Map();  // message id → row element
 
   const where = () => PLAY ? { channel: current.channel, person } : { platform: current.id, person };
+  const isVisitor = () => authentication && person === "visitor";
+  const isLocalCli = () => PLAY && localCli && current?.channel === localCli.channel;
+  const draftKey = () => `chinwag.draft.${person}.${current.channel}`;
   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" });
@@ -398,6 +466,29 @@
     }
     const tab = PLAY ? current.channel : current.id;
     for (const b of document.querySelectorAll(".tab")) b.setAttribute("aria-pressed", String(b.dataset.id === tab));
+    cliEpoch++;
+    const cli = isLocalCli();
+    document.body.classList.toggle("local-cli-mode", !!cli);
+    $("phone").hidden = !!cli;
+    $("cliPanel").hidden = !cli;
+    $("who").disabled = !!cli;
+    $("debug").disabled = !!cli;
+    clearLabel.textContent = cli ? "Clear output" : "Clear history";
+    $("clear").title = cli ? "Clear the visible CLI output; keep this session's sign-in" : "Forget this person: their history, schedules and everything the agent kept about them";
+    if (cli) {
+      ++opened;
+      source?.close(); source = null;
+      $("cliTitle").textContent = `${localCli.name} · local CLI`;
+      $("cliInput").placeholder = `${localCli.name} --help`;
+      $("cliSend").disabled = true;
+      cliSeq = 0;
+      $("cliOutput").textContent = "";
+      $("cliLogin").hidden = true;
+      void pollCli(cliEpoch);
+      return;
+    }
+    signedIn = !isVisitor();
+    $("authState").hidden = !isVisitor();
     void refreshPerson();
     $("phone").className = "phone p-" + current.id;
     $("avatar").textContent = title.trim().charAt(0).toUpperCase();
@@ -414,7 +505,7 @@
     $("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();
+    connect().catch(() => sysnote("Could not load this conversation. Try again.", true));
   }
 
   function sysnote(text, bad) {
@@ -424,6 +515,61 @@
     insert(el);
   }
 
+  function cliOutput(stream, text) {
+    const output = $("cliOutput");
+    const follow = output.scrollHeight - output.scrollTop - output.clientHeight < 60;
+    const chunk = document.createElement("span");
+    chunk.className = stream;
+    // The CLI writes plain text/ANSI, never HTML. This viewport does not emulate a full TTY.
+    chunk.textContent = text.replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g, "").replace(/\x1b\[[0-?]*[ -/]*[@-~]/g, "");
+    output.appendChild(chunk);
+    while (output.textContent.length > 128 * 1024 && output.children.length > 1) output.firstChild.remove();
+    if (follow) output.scrollTop = output.scrollHeight;
+  }
+
+  async function pollCli(epoch) {
+    if (epoch !== cliEpoch || !isLocalCli()) return;
+    try {
+      const res = await fetch(BASE + `/api/cli?after=${cliSeq}`);
+      if (!res.ok) throw new Error("Could not read CLI output.");
+      const state = await res.json();
+      if (epoch !== cliEpoch) return;
+      for (const event of state.events) {
+        if (event.stream === "login") {
+          const url = new URL(event.text);
+          if (["http:", "https:"].includes(url.protocol)) { $("cliLogin").href = url.href; $("cliLogin").hidden = false; }
+        } else {
+          cliOutput(event.stream, event.stream === "exit" ? `exit ${event.text}\n` : event.text);
+          if (event.stream === "exit") $("cliLogin").hidden = true;
+        }
+      }
+      cliSeq = state.seq; cliRunning = state.running; cliWaiting = state.waiting;
+      $("cliSend").disabled = cliRunning && !cliWaiting;
+      $("cliSend").textContent = cliRunning ? "Send ↵" : "Run ↵";
+      $("cliInput").placeholder = cliWaiting ? "Type a reply…" : cliRunning ? "Command running…" : `${localCli.name} --help`;
+      $("cliState").textContent = cliWaiting ? "Waiting for input" : cliRunning ? "Running" : "Ready · use auth login to sign in, chat to talk, or --help for commands";
+    } catch { if (epoch === cliEpoch) $("cliState").textContent = "Connection interrupted · reconnecting…"; }
+    if (epoch === cliEpoch && isLocalCli()) setTimeout(() => pollCli(epoch), 400);
+  }
+
+  $("cliForm").addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const text = $("cliInput").value;
+    if (!text.trim()) return;
+    $("cliSend").disabled = true;
+    try {
+      const res = await fetch(BASE + "/api/cli/input", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ text }) });
+      if (res.ok) $("cliInput").value = "";
+      else cliOutput("stderr", `${(await res.json()).error || "Could not send input."}\n`);
+    } catch { cliOutput("stderr", "Could not send input. Check the connection before trying again.\n"); }
+  });
+  $("cliReset").addEventListener("click", async () => {
+    if (!confirm("End this CLI session and remove its saved sign-in? Account chat history stays with the agent.")) return;
+    const res = await fetch(BASE + "/api/cli/reset", { method: "POST" });
+    if (res.ok) { $("cliInput").value = ""; setPlatform(current.channel); }
+    else cliOutput("stderr", "Could not reset the CLI session.\n");
+  });
+
   function insert(el) {
     const thread = $("thread");
     thread.insertBefore(el, typingEl && typingEl.isConnected ? typingEl : null);
@@ -486,8 +632,12 @@
       }
     }
     const body = document.createElement("span");
-    if (current.formatting === "whatsapp") body.innerHTML = whatsappHtml(line.text);
-    else body.textContent = line.text;
+    // Channels without link buttons carry the URL in text. A real auth link must still open login.
+    const authURL = line.authentication && !line.link ? /\n(https?:\/\/\S+)$/.exec(line.text) : null;
+    const link = line.link || (authURL ? { label: "Sign in", url: authURL[1] } : null);
+    const text = authURL ? line.text.slice(0, authURL.index) : line.text;
+    if (current.formatting === "whatsapp") body.innerHTML = whatsappHtml(text);
+    else body.textContent = 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") {
@@ -540,16 +690,21 @@
       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.
+    if (link) {
+      // A button that opens a page (WhatsApp's call-to-action URL button). Authentication opens the real login. Other links use a simulated screen.
       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));
+      btn.textContent = "↗ " + link.label;
+      btn.title = link.url;
+      const url = link.url;
+      btn.addEventListener("click", () => {
+        if (line.authentication) {
+          const target = new URL(url, location.href);
+          if (["https:", "http:"].includes(target.protocol)) location.assign(target.href);
+        } else openScreen(cards.find((c) => url.includes(c.match)) || { label: link.label, kind: "page" }, url);
+      });
       btns.appendChild(btn);
       row.appendChild(btns);
     }
@@ -899,7 +1054,19 @@
     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 (isVisitor()) {
+      const response = await fetch(BASE + "/api/auth" + query());
+      if (!response.ok) throw new Error("Could not check sign-in");
+      const state = await response.json();
+      if (mine !== opened) return;
+      showAuth(state);
+      try { $("text").value = sessionStorage.getItem(draftKey()) || $("text").value; } catch {}
+
+    }
+    const response = await fetch(BASE + "/api/transcript" + query());
+    if (isVisitor() && response.status === 401) { showAuth(await response.json()); return; }
+    if (!response.ok) throw new Error("Could not load history");
+    const { lines, seq } = await response.json();
     if (mine !== opened) return;
     for (const l of lines) showLine(l, false);
     if (!lines.length) {
@@ -975,11 +1142,37 @@
   }
 
   async function send(text, extra = {}) {
+    if (isVisitor() && !signedIn) { try { sessionStorage.setItem(draftKey(), text); } catch {} }
     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) });
+    const response = await fetch(BASE + "/api/messages", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+    if (!response.ok) {
+      $("text").value = text;
+      if (isVisitor() && response.status === 401) showAuth(await response.json());
+      sysnote("Your message was not sent. Check sign-in and try again.", true);
+    } else if (signedIn) { try { sessionStorage.removeItem(draftKey()); } catch {} }
+  }
+
+  function showAuth(state) {
+    signedIn = state.signedIn === true;
+    $("authState").hidden = false;
+    $("authLabel").textContent = state.label || (signedIn ? "Signed in" : "Signed out");
+    $("signIn").hidden = signedIn || !state.signInUrl;
+    $("signIn").removeAttribute("href");
+    if (state.signInUrl) {
+      const target = new URL(state.signInUrl, location.href);
+      if (["https:", "http:"].includes(target.protocol)) $("signIn").href = target.href;
+    }
+    const option = $("who").querySelector('option[value="visitor"]');
+    if (option) option.textContent = signedIn ? "Connected user" : "New user · signed out";
   }
+  $("signIn").addEventListener("click", () => { try { sessionStorage.setItem(draftKey(), $("text").value); } catch {} });
+  $("startSignedOut").addEventListener("click", async () => {
+    const response = await fetch(BASE + "/api/auth/reset" + query(), { method: "POST", headers: { "content-type": "application/json" }, body: "{}" });
+    if (!response.ok) { sysnote("Could not reset this browser's sign-in.", true); return; }
+    setPlatform(current.channel);
+  });
 
   // The person's message is shown at once; the agent's id for it (for ticks, replies and
   // reactions) arrives a moment later.
@@ -1037,26 +1230,46 @@
   });
   $("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" });
-    }
+  $("clear").addEventListener("click", async () => {
+    if (isLocalCli()) { $("cliOutput").textContent = ""; return; }
+    const name = isVisitor() ? (signedIn ? "this account" : "this visitor") : people.find((p) => p.phone === person)?.name;
+    if (!name || !confirm(`Forget ${name}? Their history, schedules and everything the agent kept about them go, on every channel.`)) return;
+    try {
+      const response = await fetch(BASE + "/api/clear" + query(), { method: "POST" });
+      if (!response.ok) throw new Error("clear failed");
+    } catch { sysnote("Could not clear this conversation. Try again.", true); }
   });
   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 known = platforms.find(platform => platform.id === id.toLowerCase());
+    const kind = id.toLowerCase() === "terminal" ? "terminal" : (known?.id ?? p.id);
+    const name = known?.name ?? (kind === "terminal" ? "Terminal" : label);
     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); }
+    b.dataset.label = name;
+    b.setAttribute("aria-label", name);
+    b.title = name + (p.complete ? "" : " · partial simulation");
+    if (!p.complete) b.setAttribute("aria-description", "Some platform features are not simulated yet.");
+    const drawings = {
+      web: '<circle cx="12" cy="12" r="9"/><ellipse cx="12" cy="12" rx="4" ry="9"/><path d="M3 12h18M5 6h14M5 18h14"/>',
+      terminal: '<rect x="2" y="3" width="20" height="18" rx="4"/><path d="m6 8 4 4-4 4m7 0h5"/>',
+      imessage: '<rect x="1" y="1" width="22" height="22" rx="6" fill="currentColor" stroke="none"/><path d="M19 11.5c0 3.3-3.1 6-7 6-.9 0-1.7-.1-2.5-.4L6 19l.8-3.2C5.7 14.7 5 13.2 5 11.5c0-3.3 3.1-6 7-6s7 2.7 7 6Z" fill="white" stroke="none"/>',
+      sms: '<rect x="1" y="1" width="22" height="22" rx="6" fill="currentColor" stroke="none"/><path d="M6 6h12v9H9l-3 3V6Zm3 3h6m-6 3h4" stroke="white" stroke-width="1.5"/>',
+    };
+    if (drawings[kind]) {
+      const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      icon.setAttribute("viewBox", "0 0 24 24"); icon.setAttribute("fill", "none"); icon.setAttribute("stroke", "currentColor"); icon.setAttribute("stroke-width", "1.6"); icon.setAttribute("aria-hidden", "true");
+      icon.classList.add("tab-icon", kind); icon.innerHTML = drawings[kind]; b.appendChild(icon);
+    } else {
+      const img = document.createElement("img"); img.src = `https://cdn.simpleicons.org/${known?.icon ?? p.icon}`; img.alt = ""; b.appendChild(img);
+    }
+    const text = document.createElement("span"); text.className = "tab-label"; text.appendChild(document.createTextNode(name));
+    b.appendChild(text);
     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);
@@ -1097,7 +1310,7 @@
     return li;
   }
   async function refreshPerson() {
-    if (!PLAY || !panel.person || !current) return;
+    if (!PLAY || !panel.person || !current || isLocalCli()) return;
     const res = await fetch(BASE + "/api/person" + query());
     if (!res.ok) return;
     const { now, contact, outbox, lastOut = {} } = await res.json();
@@ -1145,10 +1358,12 @@
       const badge = b.querySelector(".unread");
       if (!badge) continue;
       const stored = recall(key(ch));
+      b.setAttribute("aria-label", b.dataset.label);
       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);
+      if (unread) b.setAttribute("aria-label", `${b.dataset.label}, ${unread} new ${unread === 1 ? "message" : "messages"}`);
     }
   }
 
@@ -1201,12 +1416,15 @@
   }
 
   (async () => {
-    ({ platforms, cards, people = [], channels = [], templates = [], panel = panel } = await (await fetch(BASE + "/api/platforms")).json());
+    ({ platforms, cards, people = [], channels = [], templates = [], panel = panel, authentication = false, localCli = null } = 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;
+      if (!people.length && !authentication) 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) && !(authentication && person === "visitor")) person = authentication ? "visitor" : people[0].phone;
       remember("chinwag.person", person);
+      if (authentication) {
+        const option = document.createElement("option"); option.value = "visitor"; option.textContent = "New user · signed out"; $("who").appendChild(option);
+      }
       for (const p of people) {
         const o = document.createElement("option");
         o.value = p.phone;

package/dist/simulators/src/server.d.ts

@@ -1,6 +1,7 @@
 import { type IncomingMessage, type ServerResponse } from "node:http";
 import { type Attachment, type ChannelInfo, type ChannelSummary, type Deliver, type EventSink, type FilledTemplate, type Incoming, type ListRow, type PlaygroundSink, type TemplateDefinition, type TestPerson, type TranscriptEntry } from "../../src/index.ts";
 import type { Agent } from "../../src/agent.ts";
+import type { CliConfig } from "../../cli/src/commands.ts";
 /** What the test cloud's simulators need from an agent. */
 export interface AgentConnection {
     /** A person's message; returns its id, or null when the agent answered it without a turn. */
@@ -35,6 +36,8 @@ export interface PlaygroundAgent {
         messageId: string;
     } | null>;
     testConversation(phone: string): Promise<string | null>;
+    simulateVisitor?: Agent["simulateVisitor"];
+    visitorConversation?: Agent["visitorConversation"];
     transcript(conversationId: string): Promise<TranscriptEntry[]>;
     reacted(conversationId: string, emoji: string, toText: string): void;
     forgetPerson(conversationId: string): Promise<void>;
@@ -81,6 +84,21 @@ export interface SimulatorsOptions {
     };
     /** The agent's clock (playgroundClock(), passed to createAgent as `now`): the Person panel can move it. */
     clock?: PlaygroundClock;
+    /**
+     * Adds "New user · signed out" to the person picker. `visitor` is an opaque browser identity,
+     * scoped to the channel. Return the account `key` only after the application's normal auth
+     * verifies it, plus its channel `address` if different from visitor. Keep credentials server-side.
+     * Existing declared test people keep their current identity shortcut.
+     */
+    authentication?: (input: {
+        channel: ChannelSummary;
+        visitor: string;
+    }) => Promise<{
+        key?: string;
+        address?: string;
+        label?: string;
+        signInUrl?: string;
+    }>;
 }
 export interface LinkCard {
     /** Text the link's URL contains, such as "/video/". */
@@ -95,17 +113,25 @@ type Listening = {
     close(): Promise<void>;
     url: string;
 };
+export interface LocalCliOptions {
+    /** The team's actual defineCli configuration. The browser cannot override its endpoints. */
+    config: CliConfig;
+    /** The channel tab that opens this runner, e.g. "terminal". */
+    channel: string;
+}
 export interface Playground {
     /** Pass to the agent's `events`: the trace and tool calls of test people's conversations. */
     events: EventSink;
     /** Serves the playground on 127.0.0.1 only; a token is optional there. */
     listen(agent: PlaygroundAgent, port: number, options?: {
         token?: string;
+        localCli?: LocalCliOptions;
     }): Promise<Listening>;
     /** The playground as a request handler under `base`, for a deployed agent's own server: a token is required. */
     handler(agent: PlaygroundAgent, options: {
         token: string;
         base?: string;
+        localCli?: LocalCliOptions;
     }): Handler;
 }
 export interface TestCloudSimulators {
@@ -140,6 +166,7 @@ export type Line = {
         label: string;
         url: string;
     };
+    authentication?: boolean;
     /** A photo above the text, which is its caption. */
     image?: {
         url: string;