@paneui/cli 0.0.11 → 0.0.13

package/dist/commands/demo-artifact.js

@@ -0,0 +1,609 @@
+// The `pane demo` tutorial artifact — a self-contained HTML page that teaches
+// Pane *by being a pane*. Authored as a string constant (OPEN-1 fallback (a)):
+// the CLI ships independently of the relay and talks to a remote relay over
+// HTTP, so the artifact has to travel inside the `POST /v1/panes` create body
+// (`template.source`). A relay static asset would mean fetching the artifact
+// *back* from the relay before sending it on — circular, network-dependent,
+// and broken offline. A build-time string is the single source the CLI demo
+// uses today; a future landing-page mount can inline the same HTML from this
+// module (it's a plain ESM export).
+//
+// Constraints (the content-frame CSP, src/bridge/routes.ts):
+//   default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline';
+//   img-src data: attachment:; connect-src 'none'
+// => fully self-contained: inline CSS + inline JS, NO external resources
+//    (no CDN, no remote fonts, no fetch). Animation is CSS keyframes + the
+//    Web Animations API only.
+//
+// Runtime surface used (confirmed against
+// src/bridge/client/runtime.client.ts): pane.emit(type, data?), pane.on(type,
+// handler), pane.inputData, pane.ready. Nothing else.
+//
+// Event schema (the contract `pane demo` registers — kept here so the artifact
+// and its schema stay in one file and cannot drift):
+//   demo.start   page  {}                          — Scene 1 "Show me how"
+//   demo.hello   page  {}                          — Scene 3 "Click me" (the proof)
+//   demo.form    page  { name, choice }            — Scene 4 structured data
+//   demo.advance agent { scene, note? }            — drive the next scene in
+//   demo.echo    agent { received }                — reflect the form payload back
+//   demo.done    agent {}                          — render the final CTA
+/**
+ * The tutorial event schema, in the legacy `{ events: { type: { payload,
+ * emittedBy } } }` shape (still fully supported; see skills/pane/SKILL.md).
+ * Exported so the demo command and its tests reference the one definition.
+ */
+export const DEMO_EVENT_SCHEMA = {
+    events: {
+        "demo.start": {
+            emittedBy: ["page"],
+            payload: { type: "object", additionalProperties: false },
+        },
+        "demo.hello": {
+            emittedBy: ["page"],
+            payload: { type: "object", additionalProperties: false },
+        },
+        "demo.form": {
+            emittedBy: ["page"],
+            payload: {
+                type: "object",
+                properties: {
+                    name: { type: "string", maxLength: 80 },
+                    choice: { type: "string", enum: ["build", "explore", "watch"] },
+                },
+                required: ["choice"],
+                additionalProperties: false,
+            },
+        },
+        "demo.advance": {
+            emittedBy: ["agent"],
+            payload: {
+                type: "object",
+                properties: {
+                    scene: { type: "integer" },
+                    note: { type: "string" },
+                },
+                required: ["scene"],
+                additionalProperties: false,
+            },
+        },
+        "demo.echo": {
+            emittedBy: ["agent"],
+            payload: {
+                type: "object",
+                properties: { received: { type: "object" } },
+                required: ["received"],
+                additionalProperties: false,
+            },
+        },
+        "demo.done": {
+            emittedBy: ["agent"],
+            payload: { type: "object", additionalProperties: false },
+        },
+    },
+};
+/** The tab title for the demo pane. */
+export const DEMO_TITLE = "Pane — the 60-second tour";
+/** The auto-created template's name (inline-form `--name`). */
+export const DEMO_TEMPLATE_NAME = "Pane demo tour";
+// The artifact HTML. One document, no external resources. The mode switch
+// (`live` | `simulated`) is read from inputData so a future landing-page
+// mount can drop the same blob in `simulated` mode without a rewrite — in
+// LIVE mode (the only mode this PR ships) the real agent loop drives every
+// agent event over the relay; SIMULATED is a deliberate no-op placeholder
+// here (the scripted-echo path is a fast-follow, OPEN-3).
+export const DEMO_ARTIFACT_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Pane — the 60-second tour</title>
+<style>
+  :root {
+    --bg: #0b0d12;
+    --panel: #141821;
+    --ink: #e7ebf3;
+    --muted: #97a1b5;
+    --line: #232a37;
+    --accent: #6ea8fe;
+    --accent-2: #8b78ff;
+    --ok: #46d39a;
+    --radius: 14px;
+    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+      Arial, sans-serif;
+    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  }
+  * { box-sizing: border-box; }
+  html, body { height: 100%; }
+  body {
+    margin: 0;
+    background:
+      radial-gradient(1100px 600px at 50% -10%, #1a2030 0%, var(--bg) 60%);
+    color: var(--ink);
+    font-family: var(--font);
+    -webkit-font-smoothing: antialiased;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100%;
+    padding: 24px;
+    line-height: 1.5;
+  }
+  .stage {
+    width: 100%;
+    max-width: 560px;
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+  }
+  .progress {
+    display: flex;
+    gap: 6px;
+    padding: 16px 22px 0;
+  }
+  .progress i {
+    flex: 1;
+    height: 3px;
+    border-radius: 3px;
+    background: var(--line);
+    transition: background 0.4s ease;
+  }
+  .progress i.on { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
+  .body { padding: 26px 30px 30px; }
+  .scene { display: none; }
+  .scene.active { display: block; }
+  .kicker {
+    font-size: 12px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted);
+    margin: 0 0 10px;
+  }
+  h1 {
+    font-size: 24px;
+    line-height: 1.25;
+    margin: 0 0 12px;
+    letter-spacing: -0.01em;
+  }
+  p { margin: 0 0 14px; color: #c7cedd; }
+  p.lead { color: var(--ink); font-size: 16px; }
+  .muted { color: var(--muted); font-size: 14px; }
+  button.cta {
+    appearance: none;
+    border: 0;
+    cursor: pointer;
+    font: inherit;
+    font-weight: 600;
+    color: #0b0d12;
+    background: linear-gradient(90deg, var(--accent), var(--accent-2));
+    padding: 12px 20px;
+    border-radius: 10px;
+    margin-top: 6px;
+    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.2s ease;
+    box-shadow: 0 6px 18px rgba(110, 168, 254, 0.28);
+  }
+  button.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(110, 168, 254, 0.38); }
+  button.cta:active { transform: translateY(0); }
+  button.cta:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
+  .diagram {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin: 6px 0 18px;
+    padding: 18px 14px;
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    background: #10141d;
+  }
+  .node {
+    flex: 1;
+    text-align: center;
+    font-size: 13px;
+    color: var(--ink);
+    padding: 12px 6px;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    background: #161b26;
+  }
+  .node .ic { font-size: 20px; display: block; margin-bottom: 4px; }
+  .node small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
+  .wire { color: var(--accent); font-size: 18px; opacity: 0.7; }
+  .field { display: block; margin: 0 0 14px; }
+  .field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
+  input[type="text"] {
+    width: 100%;
+    font: inherit;
+    color: var(--ink);
+    background: #0e121a;
+    border: 1px solid var(--line);
+    border-radius: 9px;
+    padding: 11px 12px;
+    outline: none;
+  }
+  input[type="text"]:focus { border-color: var(--accent); }
+  .choices { display: flex; gap: 8px; flex-wrap: wrap; }
+  .choices label {
+    flex: 1;
+    min-width: 120px;
+    border: 1px solid var(--line);
+    border-radius: 9px;
+    padding: 11px 12px;
+    cursor: pointer;
+    background: #0e121a;
+    transition: border-color 0.15s ease, background 0.15s ease;
+  }
+  .choices label.sel { border-color: var(--accent); background: #141b2b; }
+  .choices input { position: absolute; opacity: 0; pointer-events: none; }
+  .choices b { display: block; font-size: 14px; }
+  .choices em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
+  pre {
+    margin: 0 0 14px;
+    padding: 14px 16px;
+    background: #0e121a;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: #cdd6e6;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  pre .k { color: var(--accent); }
+  pre .s { color: var(--ok); }
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 13px;
+    color: var(--ok);
+    border: 1px solid rgba(70, 211, 154, 0.35);
+    background: rgba(70, 211, 154, 0.08);
+    padding: 6px 11px;
+    border-radius: 999px;
+    margin: 0 0 14px;
+  }
+  .point {
+    border-left: 2px solid var(--accent);
+    padding: 2px 0 2px 12px;
+    margin: 0 0 8px;
+    color: var(--ink);
+  }
+  .log { list-style: none; margin: 0 0 16px; padding: 0; }
+  .log li {
+    display: flex;
+    gap: 10px;
+    align-items: baseline;
+    padding: 9px 12px;
+    border: 1px solid var(--line);
+    border-radius: 9px;
+    margin-bottom: 7px;
+    background: #0e121a;
+    font-size: 13px;
+  }
+  .log code { font-family: var(--mono); color: var(--accent); }
+  .log .who { color: var(--muted); font-size: 11px; margin-left: auto; }
+  .anim-in { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
+  @keyframes rise {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .anim-in { animation: none; }
+    * { transition: none !important; }
+  }
+</style>
+</head>
+<body>
+  <main class="stage" role="application" aria-label="Pane tutorial">
+    <div class="progress" aria-hidden="true">
+      <i data-step="1"></i><i data-step="2"></i><i data-step="3"></i>
+      <i data-step="4"></i><i data-step="5"></i><i data-step="6"></i>
+    </div>
+    <div class="body">
+      <!-- Scene 1 — Hook -->
+      <section class="scene" data-scene="1">
+        <p class="kicker">A pane</p>
+        <h1>You're looking at a pane.</h1>
+        <p class="lead">
+          An agent just handed you this UI — by URL, nothing installed. Whatever
+          you do here turns into structured data the agent reads back.
+        </p>
+        <p class="muted">Let's prove it in about a minute.</p>
+        <button class="cta" id="b-start" type="button">Show me how &rarr;</button>
+      </section>
+
+      <!-- Scene 2 — The model -->
+      <section class="scene" data-scene="2">
+        <p class="kicker">The round-trip</p>
+        <h1>How it works</h1>
+        <div class="diagram" aria-hidden="true">
+          <div class="node"><span class="ic">&#9881;</span>your terminal<small>the agent</small></div>
+          <span class="wire">&#8644;</span>
+          <div class="node"><span class="ic">&#9729;</span>relay<small>routes events</small></div>
+          <span class="wire">&#8644;</span>
+          <div class="node"><span class="ic">&#9638;</span>this page<small>the pane</small></div>
+        </div>
+        <p>
+          You ran <code>pane demo</code> &mdash; that command is acting as your
+          agent right now. It's watching this session over a WebSocket.
+        </p>
+        <button class="cta" id="b-hello" type="button">Click me</button>
+      </section>
+
+      <!-- Scene 3 — First emit (the proof) -->
+      <section class="scene" data-scene="3">
+        <div class="badge">&#10003; Your agent just received your click.</div>
+        <h1>That landed in two places.</h1>
+        <p class="point">Look at your terminal — it printed the same event.</p>
+        <p>
+          The click became a <code>demo.hello</code> event, streamed to the
+          agent, which streamed a reply back to redraw this page. No polling, no
+          refresh.
+        </p>
+        <p class="muted">Now the interesting part: typed, validated data.</p>
+        <button class="cta" id="b-to-form" type="button">Next &rarr;</button>
+      </section>
+
+      <!-- Scene 4 — Structured data -->
+      <section class="scene" data-scene="4">
+        <p class="kicker">Structured data</p>
+        <h1>Interactions aren't clicks — they're data.</h1>
+        <label class="field">
+          <span>Your name (optional)</span>
+          <input type="text" id="f-name" autocomplete="off" maxlength="80"
+            placeholder="e.g. Sam" />
+        </label>
+        <div class="field">
+          <span>What brought you here?</span>
+          <div class="choices" id="f-choices">
+            <label data-choice="build"><input type="radio" name="choice" value="build" />
+              <b>Build</b><em>wire it into an agent</em></label>
+            <label data-choice="explore"><input type="radio" name="choice" value="explore" />
+              <b>Explore</b><em>just looking</em></label>
+            <label data-choice="watch"><input type="radio" name="choice" value="watch" />
+              <b>Watch</b><em>show me more</em></label>
+          </div>
+        </div>
+        <button class="cta" id="b-form" type="button" disabled>Send it &rarr;</button>
+        <div id="echo" hidden>
+          <div class="badge" style="margin-top:16px">&#10003; Your agent received:</div>
+          <pre id="echo-pre"></pre>
+          <p class="muted">
+            That's the exact payload — typed and validated by the relay before
+            the agent ever saw it.
+          </p>
+        </div>
+      </section>
+
+      <!-- Scene 5 — State / the log -->
+      <section class="scene" data-scene="5">
+        <p class="kicker">The event log</p>
+        <h1>Everything you did is a log.</h1>
+        <p>
+          A pane is an append-only event log your agent can read at any time.
+          Here's yours so far:
+        </p>
+        <ul class="log" id="log"></ul>
+        <p class="muted">
+          From your terminal that's just:
+          <code style="font-family:var(--mono);color:var(--accent)">pane show &lt;id&gt;</code>
+        </p>
+      </section>
+
+      <!-- Scene 6 — Now you -->
+      <section class="scene" data-scene="6">
+        <p class="kicker">Your turn</p>
+        <h1>That's the whole idea.</h1>
+        <p>An agent hands a human a UI, gets structured data back. To build one:</p>
+        <pre><span class="k">pane</span> create \\
+  --template ./form.html --name "My form" \\
+  --event-schema ./schema.json
+<span class="k">pane</span> watch &lt;id&gt; --type form.submitted</pre>
+        <p>
+          The full guide is in the skill:
+          <code style="font-family:var(--mono);color:var(--accent)">pane skill show</code>.
+        </p>
+        <p class="muted">Now go hand one to a human.</p>
+      </section>
+    </div>
+  </main>
+
+<script>
+(function () {
+  var reduce = false;
+  try {
+    reduce = window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch (e) { reduce = false; }
+
+  var scenes = {};
+  var nodes = document.querySelectorAll(".scene");
+  for (var i = 0; i < nodes.length; i++) {
+    scenes[nodes[i].getAttribute("data-scene")] = nodes[i];
+  }
+  var steps = document.querySelectorAll(".progress i");
+  var current = 0;
+
+  function setProgress(n) {
+    for (var i = 0; i < steps.length; i++) {
+      var step = Number(steps[i].getAttribute("data-step"));
+      if (step <= n) steps[i].classList.add("on");
+      else steps[i].classList.remove("on");
+    }
+  }
+
+  // Show a scene by number. Scenes are interaction-driven: scene 1 is shown
+  // immediately; every later scene is revealed by an agent reply (demo.advance
+  // / demo.echo / demo.done), never by the page on its own.
+  function show(n) {
+    if (n === current) return;
+    var el = scenes[String(n)];
+    if (!el) return;
+    var prev = current ? scenes[String(current)] : null;
+    if (prev) prev.classList.remove("active");
+    el.classList.add("active");
+    current = n;
+    setProgress(n);
+    if (!reduce && el.animate) {
+      try {
+        el.animate(
+          [
+            { opacity: 0, transform: "translateY(10px)" },
+            { opacity: 1, transform: "translateY(0)" },
+          ],
+          { duration: 460, easing: "cubic-bezier(0.2,0.7,0.2,1)" }
+        );
+      } catch (e) { /* WAAPI unavailable — the scene still shows */ }
+    }
+    var focusable = el.querySelector("button.cta:not([disabled]), input");
+    if (focusable && focusable.focus) {
+      try { focusable.focus(); } catch (e) { /* ignore */ }
+    }
+  }
+
+  function esc(s) {
+    return String(s)
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+
+  // Render the form payload the agent echoed back, as pretty (highlighted)
+  // JSON. Only fields we understand are rendered — never the raw envelope.
+  function renderEcho(received) {
+    var obj = received && typeof received === "object" ? received : {};
+    var parts = [];
+    parts.push("{");
+    var keys = ["name", "choice"];
+    var shown = [];
+    for (var i = 0; i < keys.length; i++) {
+      var k = keys[i];
+      if (Object.prototype.hasOwnProperty.call(obj, k)) {
+        shown.push(
+          '  <span class="k">"' + esc(k) + '"</span>: ' +
+          '<span class="s">' + JSON.stringify(obj[k]) + "</span>"
+        );
+      }
+    }
+    parts.push(shown.join(",\\n"));
+    parts.push("}");
+    document.getElementById("echo-pre").innerHTML = parts.join("\\n");
+    document.getElementById("echo").hidden = false;
+  }
+
+  // Render the event log for scene 5 from pane.state — the user's own emits.
+  var EVENT_LABEL = {
+    "demo.start": "opened the tour",
+    "demo.hello": "clicked the button",
+    "demo.form": "submitted the form",
+  };
+  function renderLog() {
+    var log = document.getElementById("log");
+    if (!log) return;
+    log.innerHTML = "";
+    var events = [];
+    try { events = pane.state.events || []; } catch (e) { events = []; }
+    var any = false;
+    for (var i = 0; i < events.length; i++) {
+      var t = events[i].type;
+      if (!Object.prototype.hasOwnProperty.call(EVENT_LABEL, t)) continue;
+      any = true;
+      var li = document.createElement("li");
+      var code = document.createElement("code");
+      code.textContent = t;
+      var label = document.createElement("span");
+      label.textContent = EVENT_LABEL[t];
+      var who = document.createElement("span");
+      who.className = "who";
+      who.textContent = "you";
+      li.appendChild(code);
+      li.appendChild(label);
+      li.appendChild(who);
+      log.appendChild(li);
+    }
+    if (!any) {
+      var li2 = document.createElement("li");
+      li2.textContent = "Your events will appear here.";
+      log.appendChild(li2);
+    }
+  }
+
+  // --- wiring -----------------------------------------------------------
+
+  // Scene 1 -> demo.start. The agent replies demo.advance{scene:2}.
+  document.getElementById("b-start").addEventListener("click", function () {
+    var b = this;
+    b.disabled = true;
+    pane.emit("demo.start", {})["catch"](function () { b.disabled = false; });
+  });
+
+  // Scene 2 -> demo.hello (the proof). The agent replies demo.advance{scene:3}.
+  document.getElementById("b-hello").addEventListener("click", function () {
+    var b = this;
+    b.disabled = true;
+    pane.emit("demo.hello", {})["catch"](function () { b.disabled = false; });
+  });
+
+  // Scene 3 -> reveal the form. This is a local navigation step (no round-trip
+  // needed to read the form), so it just shows scene 4.
+  document.getElementById("b-to-form").addEventListener("click", function () {
+    show(4);
+  });
+
+  // Scene 4 — the structured-data form. choice is required; name optional.
+  var choiceWrap = document.getElementById("f-choices");
+  var formBtn = document.getElementById("b-form");
+  var picked = null;
+  choiceWrap.addEventListener("change", function (e) {
+    var label = e.target.closest ? e.target.closest("label") : null;
+    var labels = choiceWrap.querySelectorAll("label");
+    for (var i = 0; i < labels.length; i++) labels[i].classList.remove("sel");
+    if (label) {
+      label.classList.add("sel");
+      picked = label.getAttribute("data-choice");
+      formBtn.disabled = false;
+    }
+  });
+  formBtn.addEventListener("click", function () {
+    if (!picked) return;
+    var name = document.getElementById("f-name").value.trim();
+    var data = { choice: picked };
+    if (name) data.name = name;
+    formBtn.disabled = true;
+    // The agent replies demo.echo{received} (then walks scenes 5 + 6).
+    pane.emit("demo.form", data)["catch"](function () {
+      formBtn.disabled = false;
+    });
+  });
+
+  // --- agent-driven scene changes --------------------------------------
+
+  pane.on("demo.advance", function (ev) {
+    var scene = ev && ev.data && Number(ev.data.scene);
+    if (scene === 5) renderLog();
+    if (scene >= 1 && scene <= 6) show(scene);
+  });
+
+  pane.on("demo.echo", function (ev) {
+    var received = ev && ev.data ? ev.data.received : null;
+    renderEcho(received);
+  });
+
+  pane.on("demo.done", function () {
+    show(6);
+  });
+
+  // First paint. mode is read for forward-compat (a future landing-page mount
+  // can pass { mode: "simulated" } and replay a canned trace through the same
+  // render path) but LIVE is the only behaviour this build ships.
+  pane.ready.then(function () {
+    show(1);
+  });
+  // pane.ready resolves on the init frame; show scene 1 eagerly too so the
+  // page is never blank if init is momentarily delayed.
+  if (!current) show(1);
+})();
+</script>
+</body>
+</html>`;

package/dist/commands/demo.js

@@ -0,0 +1,305 @@
+// `pane demo` — a self-teaching tutorial pane.
+//
+// One command: create a pane with the bundled tutorial artifact, open (or
+// print) its URL, then run a tiny built-in agent loop in this same process
+// that watches the session and reacts to each human interaction with the
+// matching agent event. Every received event is echoed to the terminal as it
+// lands, so the user sees their click in BOTH places — the pane redraws AND
+// their terminal prints the same event. That round-trip IS the lesson, and a
+// successful demo doubles as an end-to-end smoke test of the install (auth,
+// relay reachability, WebSocket, a real event round-trip).
+//
+// Run-to-completion: the loop walks Scenes 1-6, sends demo.done, prints the
+// "build your own" snippet, and exits 0. The pane is created with a short TTL
+// (the relay's sweeper reclaims it) and best-effort DELETEd on exit.
+import { openStream, PaneClient, } from "@paneui/core";
+import { spawn } from "node:child_process";
+import { platform } from "node:os";
+import { assertKnownFlags } from "../argv.js";
+import { resolveConfig } from "../config.js";
+import { fail, failFromError } from "../output.js";
+import { VERSION } from "../version.js";
+import { DEMO_ARTIFACT_HTML, DEMO_EVENT_SCHEMA, DEMO_TEMPLATE_NAME, DEMO_TITLE, } from "./demo-artifact.js";
+const KNOWN_FLAGS = ["ttl"];
+// --no-open is the documented spelling; the parser stores it as the boolean
+// flag "no-open" (a leading `--no-` is NOT auto-negated by this CLI's parser,
+// so we read the literal flag name).
+const KNOWN_BOOLS = ["no-open", "json"];
+// The default pane TTL for the demo: long enough to read through the tour at a
+// relaxed pace, short enough that an abandoned demo is reclaimed promptly. The
+// relay clamps this to its own MAX_TTL_SECONDS regardless.
+const DEMO_TTL_SECONDS = 900;
+export const demoHelp = `pane demo — take the 60-second guided tour
+
+Usage:
+  pane demo [options]
+
+Creates a short-lived pane with the built-in tutorial artifact, opens its URL
+in your browser (or prints it if none is available), then runs a tiny agent
+loop right here in your terminal that watches the session and reacts to each
+thing you do in the pane. Every event you trigger is echoed to this terminal
+as it arrives — so you see your click land in BOTH places at once.
+
+It's also a full smoke test: if your install is healthy, the tour completes;
+if auth, the relay, or the WebSocket is broken, it fails loudly at the exact
+step that's wrong.
+
+The loop runs to completion (Scenes 1-6), then prints a "build your own"
+snippet and exits 0. The demo pane is created with a short TTL and deleted on
+exit.
+
+Options:
+  --ttl <seconds>   Demo pane time-to-live (default ${DEMO_TTL_SECONDS}). The relay
+                    clamps to its configured maximum.
+  --no-open         Don't try to open a browser — just print the URL. Implied
+                    on headless / SSH sessions where no opener is found.
+  --url <url>       Relay base URL (overrides PANE_URL).
+  --api-key <key>   Agent API key (overrides PANE_API_KEY).
+  -h, --help        Show this help.
+
+Run it right after 'pane agent register' to confirm everything works.`;
+export function demoReactions(humanEventType, humanData) {
+    switch (humanEventType) {
+        case "demo.start":
+            return [{ type: "demo.advance", data: { scene: 2 } }];
+        case "demo.hello":
+            return [
+                {
+                    type: "demo.advance",
+                    data: {
+                        scene: 3,
+                        note: "received your click — printed in your terminal",
+                    },
+                },
+            ];
+        case "demo.form": {
+            const received = humanData && typeof humanData === "object"
+                ? humanData
+                : {};
+            return [
+                { type: "demo.echo", data: { received } },
+                { type: "demo.advance", data: { scene: 5 }, delayMs: 1200 },
+                { type: "demo.done", data: {}, delayMs: 2400 },
+            ];
+        }
+        default:
+            return [];
+    }
+}
+/** The human event types the demo loop reacts to (its terminal one is demo.form). */
+const HUMAN_EVENT_TYPES = new Set(["demo.start", "demo.hello", "demo.form"]);
+/** The "build your own" snippet printed on completion. */
+function buildYourOwnSnippet() {
+    return [
+        "",
+        "That's the round-trip. To hand your own UI to a human:",
+        "",
+        "  pane create \\",
+        '    --template ./form.html --name "My form" \\',
+        "    --event-schema ./schema.json",
+        "  pane watch <id> --type form.submitted",
+        "",
+        "Full guide:  pane skill show",
+        "Docs:        https://paneui.com",
+        "",
+    ].join("\n");
+}
+/**
+ * Best-effort open a URL in the user's default browser. Returns true if an
+ * opener was spawned, false if none is available (headless / unknown platform)
+ * or the spawn failed. Never throws — the tour works headless either way.
+ */
+export function openInBrowser(url) {
+    // No env-var gating here: on headless / CI boxes the platform opener simply
+    // isn't installed (or errors), the spawn failure is swallowed below, and the
+    // caller falls back to printing the URL. (`--no-open` is handled upstream.)
+    const p = platform();
+    let cmd;
+    let args;
+    if (p === "darwin") {
+        cmd = "open";
+        args = [url];
+    }
+    else if (p === "win32") {
+        // `start` is a cmd builtin; the empty "" is the (ignored) window title.
+        cmd = "cmd";
+        args = ["/c", "start", "", url];
+    }
+    else {
+        // Linux / BSD: xdg-open is the de-facto opener. On a headless box it
+        // won't exist; the spawn error is swallowed and we fall back to print.
+        cmd = "xdg-open";
+        args = [url];
+    }
+    try {
+        const child = spawn(cmd, args, { stdio: "ignore", detached: true });
+        let failed = false;
+        child.on("error", () => {
+            failed = true;
+        });
+        child.unref();
+        // `spawn` reports a missing binary asynchronously via the 'error' event,
+        // so we can't know synchronously whether xdg-open exists. We optimistically
+        // report true; the printed URL below is always shown regardless, so a
+        // silent opener failure still leaves the user a working link.
+        return !failed;
+    }
+    catch {
+        return false;
+    }
+}
+export async function runDemo(args) {
+    assertKnownFlags(args, KNOWN_FLAGS, KNOWN_BOOLS, "pane demo");
+    let ttl = DEMO_TTL_SECONDS;
+    const ttlRaw = args.flags.get("ttl");
+    if (ttlRaw !== undefined) {
+        const t = Number(ttlRaw);
+        if (!Number.isInteger(t) || t <= 0) {
+            fail("--ttl must be a positive integer", "invalid_args");
+        }
+        ttl = t;
+    }
+    // Resolve config once and build the client from it — the agent loop below
+    // needs the API key directly (for the WS token), and makeClient would
+    // re-resolve the same config (extra disk read + parse) to no benefit.
+    const cfg = resolveConfig(args);
+    const client = new PaneClient({
+        url: cfg.url,
+        apiKey: cfg.apiKey,
+        cliVersion: VERSION,
+    });
+    // 1. Create the demo pane with the bundled artifact + its event schema.
+    let created;
+    try {
+        created = await client.createPane({
+            template: {
+                name: DEMO_TEMPLATE_NAME,
+                type: "html-inline",
+                source: DEMO_ARTIFACT_HTML,
+                event_schema: DEMO_EVENT_SCHEMA,
+            },
+            title: DEMO_TITLE,
+            ttl,
+            participants: { humans: 1 },
+        });
+    }
+    catch (e) {
+        failFromError(e);
+    }
+    const paneId = created.pane_id;
+    const humanUrl = created.urls.humans[0];
+    // 2. Open (or print) the URL. The loop runs either way, so headless / SSH
+    //    works — we just skip the browser launch.
+    const wantOpen = !args.bools.has("no-open");
+    const out = process.stdout;
+    out.write(`\nPane demo — your 60-second tour is ready.\n\n`);
+    if (humanUrl) {
+        out.write(`  ${humanUrl}\n\n`);
+        if (wantOpen && openInBrowser(humanUrl)) {
+            out.write(`Opening it in your browser…\n`);
+        }
+        else {
+            out.write(`Open this link to start the tour.\n`);
+        }
+    }
+    else {
+        out.write(`(No human URL was minted — check your relay configuration.)\n`);
+    }
+    out.write(`\nWatching the pane — your clicks will print here as they land:\n\n`);
+    // 3. Run the agent loop: watch the stream, react to each human event,
+    //    echo every received event to the terminal, and finish on demo.done.
+    await runDemoLoop({
+        wsBaseUrl: client.wsBaseUrl,
+        paneId,
+        token: cfg.apiKey,
+        sendEvent: (type, data) => client.sendEvent(paneId, { type, data }).then(() => undefined),
+        deletePane: () => client.deletePane(paneId).catch(() => undefined),
+        write: (s) => {
+            out.write(s);
+        },
+    });
+}
+export function runDemoLoop(deps) {
+    const schedule = deps.schedule ?? ((fn, ms) => void setTimeout(fn, ms));
+    const open = deps.openStreamImpl ?? openStream;
+    return new Promise((resolve) => {
+        let settled = false;
+        // Late-bound so `finish` (defined before the stream is opened) can close
+        // it; `open()` returns synchronously below and every handler that calls
+        // `finish` fires asynchronously, so the binding is always set by then.
+        const ref = {};
+        // Track whether demo.done was actually sent, so an early stream close
+        // (TTL / human shut the tab) is reported as "before completion" rather
+        // than a successful finish.
+        let doneSent = false;
+        const finish = async () => {
+            if (settled)
+                return;
+            settled = true;
+            try {
+                ref.handle?.close();
+            }
+            catch {
+                /* ignore */
+            }
+            await deps.deletePane();
+            resolve();
+        };
+        // Dispatch a single agent reaction, honouring its delay. demo.done is the
+        // terminal event — once it's been emitted we wrap up.
+        const dispatch = (r) => {
+            const send = () => {
+                if (settled)
+                    return;
+                deps
+                    .sendEvent(r.type, r.data)
+                    .then(() => {
+                    if (r.type === "demo.done") {
+                        doneSent = true;
+                        deps.write(buildYourOwnSnippet());
+                        void finish();
+                    }
+                })
+                    .catch((e) => {
+                    deps.write(`\n[demo] failed to send ${r.type}: ${e instanceof Error ? e.message : String(e)}\n`);
+                    void finish();
+                });
+            };
+            if (r.delayMs && r.delayMs > 0)
+                schedule(send, r.delayMs);
+            else
+                send();
+        };
+        ref.handle = open({ wsBaseUrl: deps.wsBaseUrl, paneId: deps.paneId, token: deps.token }, {
+            onEvent: (event) => {
+                if (settled)
+                    return;
+                // Only react to (and echo) the human's own interactions. The agent's
+                // own replies stream back too — echoing those would double-print and
+                // re-trigger reactions.
+                if (!HUMAN_EVENT_TYPES.has(event.type))
+                    return;
+                deps.write(`  ← ${event.type}  ${JSON.stringify(event.data ?? {})}\n`);
+                for (const r of demoReactions(event.type, event.data))
+                    dispatch(r);
+            },
+            onClose: () => {
+                // If the pane closed before demo.done (e.g. TTL or the human shut the
+                // tab), still resolve cleanly — the loop is run-to-completion but a
+                // dropped human is a valid end, not a crash.
+                if (!doneSent) {
+                    deps.write(`\n[demo] session closed before completion.\n`);
+                }
+                void finish();
+            },
+            onRelayError: (err) => {
+                deps.write(`\n[demo] relay error: ${err.message ?? err.code ?? "unknown"}\n`);
+                void finish();
+            },
+            onError: (err) => {
+                deps.write(`\n[demo] stream error: ${err.message}\n`);
+                void finish();
+            },
+        });
+    });
+}

package/dist/commands/share.js

@@ -0,0 +1,184 @@
+// `pane share <pane-id>` — manage identity sharing on a pane.
+//
+//   pane share <pane-id> --email <addr> [--role participant|viewer]
+//       Invite a human by email (upsert). Role defaults to participant
+//       (read + emit); viewer is read-only.
+//   pane share <pane-id> --mode <invite-only|link|public>
+//       Set the pane-id (/p/<pane-id>) access mode. Convenience aliases:
+//       --public (= public), --link (= link), --invite-only (= invite_only).
+//       Token (/s/<token>) links are independent and keep working in every
+//       mode.
+//   pane share <pane-id> --list
+//       Show the pane's access_mode + every grant.
+//   pane share <pane-id> --revoke <grant-id>
+//       Remove one grant (idempotent).
+//
+// One verb per invocation. Output is machine-readable JSON on stdout; errors
+// are `{"error":{"code","message"}}` on stderr with a non-zero exit.
+import { assertKnownFlags } from "../argv.js";
+import { makeClient } from "../config.js";
+import { printJson, fail, failFromError } from "../output.js";
+// Value-flags this command accepts (in addition to the global --url/--api-key/
+// --profile). Boolean flags (--public/--link/--invite-only/--list) are
+// registered in index.ts's BOOLEAN_FLAGS so the parser doesn't swallow the
+// next token.
+const VALUE_FLAGS = ["email", "role", "revoke", "mode"];
+const BOOL_FLAGS = ["public", "link", "invite-only", "list"];
+// Map a --mode value (or one of the convenience boolean aliases) to the wire
+// AccessMode. Accepts both hyphenated ("invite-only") and underscore
+// ("invite_only") spellings for --mode.
+function parseAccessMode(value) {
+    switch (value) {
+        case "invite_only":
+        case "invite-only":
+            return "invite_only";
+        case "link":
+            return "link";
+        case "public":
+            return "public";
+        default:
+            return null;
+    }
+}
+export const shareHelp = `pane share — manage identity sharing on a pane
+
+A pane has two layered share mechanisms on top of participant tokens:
+  - access mode: governs the pane-id (/p/<pane-id>) path. One of:
+      invite-only  only invited people (after login) can open it.
+      link         anyone with the /p URL opens it read-only, no login
+                   (the default; not discoverable).
+      public       anyone opens it read-only, no login (may be listed later).
+  - invitation: specific humans (by email) get a grant. A 'participant'
+                grant can read AND emit page events; a 'viewer' grant is
+                read-only. A pending invite binds to the human on their
+                first magic-link login.
+
+Token (/s/<token>) links are independent of the access mode and keep working
+in every mode until explicitly revoked.
+
+Usage:
+  pane share <pane-id> --email <addr> [--role participant|viewer]
+  pane share <pane-id> --mode <invite-only|link|public>
+  pane share <pane-id> --public | --link | --invite-only
+  pane share <pane-id> --list
+  pane share <pane-id> --revoke <grant-id>
+
+Verbs (exactly one per call):
+  --email <addr>          Invite a human by email (upsert). --role defaults
+                          to 'participant'. Re-inviting the same address
+                          updates the role in place. Returns the grant
+                          { id, human_id, invite_email, role, accepted_at }.
+  --mode <mode>           Set the /p access mode (invite-only|link|public).
+                          Returns { pane_id, access_mode }.
+  --public                Alias for --mode public.
+  --link                  Alias for --mode link.
+  --invite-only           Alias for --mode invite-only.
+  --list                  Show { pane_id, access_mode, items: [grant...] }.
+  --revoke <grant-id>     Remove one grant. Idempotent (unknown id still OK).
+
+Options:
+  --role <participant|viewer>  Role for --email (default participant).
+  --url <url>                  Relay base URL (overrides PANE_URL).
+  --api-key <key>              Agent API key (overrides PANE_API_KEY).
+  -h, --help                   Show this help.
+
+Output: stdout is machine-readable JSON.`;
+export async function runShare(args) {
+    if (args.bools.has("help")) {
+        process.stdout.write(shareHelp + "\n");
+        return;
+    }
+    assertKnownFlags(args, VALUE_FLAGS, BOOL_FLAGS, "pane share");
+    // positionals[0] is the verb slot in the dispatcher's view, but `share` is a
+    // flat top-level command: positionals[0] is the pane id.
+    const paneId = args.positionals[0];
+    if (!paneId) {
+        fail("missing <pane-id> — usage: pane share <pane-id> --email <addr> | --mode <invite-only|link|public> | --list | --revoke <grant-id>", "invalid_args");
+    }
+    // Determine which verb was requested; reject ambiguous combinations so the
+    // caller's intent is never guessed. The three access-mode aliases
+    // (--public / --link / --invite-only) and the explicit --mode all collapse
+    // to the single "set access mode" verb.
+    const hasEmail = args.flags.has("email");
+    const hasMode = args.flags.has("mode");
+    const hasPublic = args.bools.has("public");
+    const hasLink = args.bools.has("link");
+    const hasInviteOnly = args.bools.has("invite-only");
+    const hasList = args.bools.has("list");
+    const hasRevoke = args.flags.has("revoke");
+    const modeAliasCount = (hasMode ? 1 : 0) +
+        (hasPublic ? 1 : 0) +
+        (hasLink ? 1 : 0) +
+        (hasInviteOnly ? 1 : 0);
+    const hasModeVerb = modeAliasCount > 0;
+    const verbCount = (hasEmail ? 1 : 0) +
+        (hasModeVerb ? 1 : 0) +
+        (hasList ? 1 : 0) +
+        (hasRevoke ? 1 : 0);
+    if (verbCount === 0) {
+        fail("missing verb — pass exactly one of --email <addr>, --mode <invite-only|link|public> (or --public/--link/--invite-only), --list, --revoke <grant-id>", "invalid_args");
+    }
+    if (verbCount > 1 || modeAliasCount > 1) {
+        fail("ambiguous — pass exactly one of --email, --mode/--public/--link/--invite-only, --list, --revoke", "invalid_args");
+    }
+    const client = makeClient(args);
+    try {
+        if (hasList) {
+            const res = await client.listGrants(paneId);
+            printJson(res);
+            return;
+        }
+        if (hasModeVerb) {
+            // Resolve the access mode from --mode or one of the boolean aliases.
+            let mode;
+            if (hasMode) {
+                const raw = args.flags.get("mode");
+                if (!raw) {
+                    fail("missing <mode> — usage: pane share <pane-id> --mode <invite-only|link|public>", "invalid_args");
+                }
+                mode = parseAccessMode(raw);
+                if (!mode) {
+                    fail(`invalid --mode '${raw}' — expected 'invite-only', 'link', or 'public'`, "invalid_args");
+                }
+            }
+            else if (hasPublic) {
+                mode = "public";
+            }
+            else if (hasLink) {
+                mode = "link";
+            }
+            else {
+                mode = "invite_only";
+            }
+            const res = await client.setPaneVisibility(paneId, mode);
+            printJson(res);
+            return;
+        }
+        if (hasRevoke) {
+            const grantId = args.flags.get("revoke");
+            if (!grantId) {
+                fail("missing <grant-id> — usage: pane share <pane-id> --revoke <grant-id>", "invalid_args");
+            }
+            await client.revokeGrant(paneId, grantId);
+            printJson({ pane_id: paneId, grant_id: grantId, revoked: true });
+            return;
+        }
+        // hasEmail
+        const email = args.flags.get("email");
+        if (!email) {
+            fail("missing <addr> — usage: pane share <pane-id> --email <addr>", "invalid_args");
+        }
+        const role = args.flags.get("role");
+        if (role !== undefined && role !== "participant" && role !== "viewer") {
+            fail(`invalid --role '${role}' — expected 'participant' or 'viewer'`, "invalid_args");
+        }
+        const res = await client.createGrant(paneId, {
+            email: email,
+            ...(role ? { role: role } : {}),
+        });
+        printJson(res);
+    }
+    catch (e) {
+        failFromError(e);
+    }
+}

package/dist/commands/upgrade.js

@@ -0,0 +1,67 @@
+// `pane upgrade <pane-id>` — re-pin a live pane to another version of its
+// template, swapping design + content in place (#267).
+import { assertKnownFlags } from "../argv.js";
+import { makeClient } from "../config.js";
+import { printJson, fail, failFromError } from "../output.js";
+const KNOWN_FLAGS = ["template-version"];
+const KNOWN_BOOLS = ["force"];
+export const upgradeHelp = `pane upgrade — re-pin a live pane to another template version
+
+Usage:
+  pane upgrade <pane-id> [--template-version <n>] [--force]
+
+Re-points an existing, live pane at a different version of the SAME template
+(POST /v1/panes/:id/upgrade). This swaps the pane's HTML (design) and its
+event/input/record schemas (content contract) in place — the human keeps the
+same URL, no new pane is created. Use it after appending a new template
+version with 'pane template version <id|slug> --template ...'.
+
+Events already on disk are never rewritten — each keeps the template version
+it was authored under, so the prior history still renders.
+
+By default the relay runs a strict schema-compat gate: if the target version's
+schema narrows the pane's current one (a removed collection, a newly-required
+field, a tightened type), the upgrade is refused with a
+'schema_incompatible_upgrade' error whose details.breaks lists what would
+break. Pass --force to apply the upgrade anyway, accepting that events written
+under the old schema may no longer validate.
+
+Note: the re-pin takes effect on the relay immediately and emits a
+'system.template.updated' event, but an already-open pane tab is not
+force-reloaded in v1 — the new version renders the next time the URL is loaded.
+
+Options:
+  --template-version <n>  Target version number. Defaults to the template's
+                          latest version.
+  --force                 Override the strict schema-compat gate (compat=force).
+  --url <url>             Relay base URL (overrides PANE_URL).
+  --api-key <key>         Agent API key (overrides PANE_API_KEY).
+  -h, --help              Show this help.
+
+Output (stdout, JSON):
+  { pane_id, template_version_id, template_version, upgraded, breaks, compat }`;
+export async function runUpgrade(args) {
+    assertKnownFlags(args, KNOWN_FLAGS, KNOWN_BOOLS, "pane upgrade");
+    const paneId = args.positionals[0];
+    if (!paneId)
+        fail("missing <pane-id>", "invalid_args");
+    const opts = {};
+    const versionRaw = args.flags.get("template-version");
+    if (versionRaw !== undefined) {
+        const version = Number(versionRaw);
+        if (!Number.isInteger(version) || version < 1) {
+            fail("--template-version must be a positive integer", "invalid_args");
+        }
+        opts.template_version = version;
+    }
+    if (args.bools.has("force"))
+        opts.compat = "force";
+    const client = makeClient(args);
+    try {
+        const res = await client.upgradePane(paneId, opts);
+        printJson(res);
+    }
+    catch (e) {
+        failFromError(e);
+    }
+}

package/dist/index.js

@@ -31,7 +31,9 @@ import { runState, stateHelp } from "./commands/state.js";
 import { runSend, sendHelp } from "./commands/send.js";
 import { runWatch, watchHelp } from "./commands/watch.js";
 import { runDelete, deleteHelp } from "./commands/delete.js";
+import { runUpgrade, upgradeHelp } from "./commands/upgrade.js";
 import { runParticipant, participantHelp } from "./commands/participant.js";
+import { runShare, shareHelp } from "./commands/share.js";
 import { runTemplate, artifactHelp } from "./commands/template.js";
 import { runAgent, agentHelp } from "./commands/agent.js";
 import { runKey, keyHelp } from "./commands/key.js";
@@ -44,6 +46,7 @@ import { runRecords, recordsHelp } from "./commands/records.js";
 import { runTemplateRecords, templateRecordsHelp, } from "./commands/template-records.js";
 import { runQuery, queryHelp } from "./commands/query.js";
 import { runTrash, trashHelp } from "./commands/trash.js";
+import { runDemo, demoHelp } from "./commands/demo.js";
 import { VERSION } from "./version.js";
 import { PaneApiError } from "@paneui/core";
 import { failUpgradeRequired } from "./output.js";
@@ -60,10 +63,21 @@ Pane commands (operate on the core noun — a live UI channel):
   send <id>         Emit an agent event into a pane.
   watch <id>        Stream a pane's events as JSON-lines on stdout.
   delete <id>       Close/delete a pane (DELETE /v1/panes/:id).
+  upgrade <id>      Re-pin a live pane to another version of its template —
+                    swap design + content in place, same URL (--template-version
+                    <n>, --force to override the schema-compat gate).
   participant       Manage participant URLs on an existing pane
     <list|new|revoke> (list | mint a fresh URL | revoke one URL).
+  share <id>        Share a pane by identity: invite humans by email
+                    (--email, with --role participant|viewer), set the /p
+                    access mode (--mode invite-only|link|public, or the
+                    aliases --public/--link/--invite-only), list grants
+                    (--list), or revoke one (--revoke <grant-id>).
 
 Other noun groups:
+  demo              Take the 60-second guided tour — creates a tutorial pane,
+                    opens it, and runs a live agent loop in your terminal.
+                    Doubles as an end-to-end smoke test of your install.
   template          Reusable, versioned UI templates
                     (create | version | update | search | list | show | delete).
   template-records  Owner-curated content scoped to a Template head
@@ -127,6 +141,18 @@ const BOOLEAN_FLAGS = new Set([
     "print-key",
     "yes",
     "plain",
+    // `pane demo --no-open`: skip the browser launch. Stored as the literal
+    // `no-open` boolean (the parser does not auto-negate `--no-` prefixes).
+    "no-open",
+    // `pane share` access-mode aliases + list verb — registered here so the
+    // parser treats them as flags, not value-flags that would swallow the next
+    // token. (The full --mode <value> is a value-flag, handled in share.ts.)
+    "public",
+    "link",
+    "invite-only",
+    "list",
+    // `pane upgrade --force`: override the strict schema-compat gate.
+    "force",
 ]);
 async function main() {
     const rawArgv = process.argv.slice(2);
@@ -162,7 +188,9 @@ async function main() {
         send: sendHelp,
         watch: watchHelp,
         delete: deleteHelp,
+        upgrade: upgradeHelp,
         participant: participantHelp,
+        share: shareHelp,
         // Other noun groups.
         template: artifactHelp,
         key: keyHelp,
@@ -176,6 +204,7 @@ async function main() {
         "template-records": templateRecordsHelp,
         query: queryHelp,
         trash: trashHelp,
+        demo: demoHelp,
     };
     if (!(noun in helps)) {
         process.stderr.write(JSON.stringify({
@@ -214,9 +243,15 @@ async function main() {
         case "delete":
             await runDelete(args);
             break;
+        case "upgrade":
+            await runUpgrade(args);
+            break;
         case "participant":
             await runParticipant(args);
             break;
+        case "share":
+            await runShare(args);
+            break;
         // Other noun groups.
         case "template":
             await runTemplate(args);
@@ -254,6 +289,9 @@ async function main() {
         case "trash":
             await runTrash(args);
             break;
+        case "demo":
+            await runDemo(args);
+            break;
     }
 }
 main().catch((err) => {

package/dist/version.js

@@ -8,4 +8,4 @@
 // Keep this in lockstep with packages/cli/package.json's `version` field;
 // they're consulted in different places (here for the runtime header,
 // package.json for npm publish + dependency resolution).
-export const VERSION = "0.0.11";
+export const VERSION = "0.0.13";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paneui/cli",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Command-line client for the Pane relay: create panes, inspect state, send and watch events.",
   "license": "MIT",
   "type": "module",
@@ -41,13 +41,13 @@
     "test:unit": "vitest run"
   },
   "dependencies": {
-    "@paneui/core": "^0.0.11",
+    "@paneui/core": "^0.0.13",
     "qrcode-terminal": "^0.12.0"
   },
   "devDependencies": {
     "@types/node": "^25.9.1",
     "@types/qrcode-terminal": "^0.12.2",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.8"
   }
 }