prompt2pwn 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,20 @@
-# Temporary Holding Version
+# p2p — ChatPvP
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Play ChatPvP from your terminal. Requires Node.js 24 or newer and a deployment URL from your game host.
+
+Run without a global install:
+
+```sh
+npx prompt2pwn --target <url>
+```
+
+Or install the `p2p` command:
+
+```sh
+npm install --global prompt2pwn
+p2p --target <url>
+```
+
+Replace `<url>` with the deployment origin. In the client, enter `/login` and follow the GitHub authorization instructions, then choose your player handle. `/help` lists commands; `/quit` exits.
+
+To connect an MCP client as the same player, use `/mcp` or read the saved bearer with `p2p token --target <url>`. Keep that bearer private. Detailed agent setup instructions are included in [skills/prompt2pwn/SKILL.md](skills/prompt2pwn/SKILL.md).

package/dist/App-AQGN5XOX.js

@@ -0,0 +1,624 @@
+import {
+  ago,
+  compareEventIds,
+  cooldownSeconds,
+  countdown,
+  displayWidth,
+  formatDuration,
+  formatTokens,
+  gauge,
+  holderLabel,
+  rowTemplate,
+  sanitize,
+  shortModel,
+  spinnerGlyph,
+  stateBadge,
+  winnerLabel
+} from "./chunk-SZ6ZA65E.js";
+
+// src/ui/App.tsx
+import { Box as Box4, Text as Text6, useInput, useStdin } from "ink";
+import { useRef } from "react";
+
+// src/model/local-lines.ts
+function mergeLines(lines, local) {
+  const pending = [...local].sort((a, b) => a.seq - b.seq);
+  const merged = [];
+  const emit = (line) => merged.push({ ...line, key: `local:${line.seq}` });
+  for (const line of lines) {
+    for (let i = 0; i < pending.length; ) {
+      const next = pending[i];
+      if (next && (next.anchor === null || compareEventIds(next.anchor, line.id) < 0)) {
+        emit(next);
+        pending.splice(i, 1);
+      } else i += 1;
+    }
+    merged.push(line);
+  }
+  for (const line of pending) emit(line);
+  return merged;
+}
+
+// src/ui/InputBox.tsx
+import { Text } from "ink";
+
+// src/ui/layout.ts
+var segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+var graphemes = (text) => Array.from(segmenter.segment(text), (segment) => segment.segment);
+function fitRow(text, columns) {
+  const flat = text.replace(/\n/g, " ");
+  if (columns <= 0) return "";
+  if (displayWidth(flat) <= columns) return flat;
+  let out = "";
+  let width = 0;
+  for (const grapheme of graphemes(flat)) {
+    const next = displayWidth(grapheme);
+    if (width + next + 1 > columns) break;
+    out += grapheme;
+    width += next;
+  }
+  return `${out}\u2026`;
+}
+function cells(content) {
+  const out = [];
+  let position = 0;
+  for (const segment of content)
+    for (const grapheme of graphemes(segment.text)) {
+      out.push({ grapheme, width: displayWidth(grapheme), style: segment.style, position });
+      position += 1;
+    }
+  return out;
+}
+function pushCell(segments, cell) {
+  const last = segments.at(-1);
+  if (last && last.style === cell.style) last.text += cell.grapheme;
+  else
+    segments.push(
+      cell.style ? { text: cell.grapheme, style: cell.style } : { text: cell.grapheme }
+    );
+}
+function wrapContent(content, firstWidth, width) {
+  const rows = [];
+  let current = { position: 0, segments: [] };
+  let used = 0;
+  let limit = firstWidth;
+  const flush = (position) => {
+    rows.push(current);
+    current = { position, segments: [] };
+    used = 0;
+    limit = width;
+  };
+  for (const cell of cells(content)) {
+    if (cell.grapheme === "\n") {
+      flush(cell.position + 1);
+      continue;
+    }
+    if (used + cell.width > limit && (used > 0 || limit < width)) flush(cell.position);
+    if (limit <= 0) continue;
+    pushCell(current.segments, cell);
+    used += cell.width;
+  }
+  rows.push(current);
+  return rows;
+}
+function layoutLine(line, options) {
+  const { columns } = options;
+  if (columns <= 0) return [];
+  const template = rowTemplate(line, options);
+  const prefixText = template.prefix.map((segment) => segment.text).join("");
+  let prefix = template.prefix;
+  let prefixWidth = displayWidth(prefixText);
+  if (prefixWidth > columns) {
+    const fitted = fitRow(prefixText, columns);
+    const style = template.prefix[0]?.style;
+    prefix = [style ? { text: fitted, style } : { text: fitted }];
+    prefixWidth = displayWidth(fitted);
+  }
+  const firstWidth = columns - prefixWidth;
+  const indentWidth = firstWidth >= 1 ? prefixWidth : 0;
+  const wrapped = wrapContent(template.content, firstWidth, columns - indentWidth);
+  const starts = template.parts ? partStarts(template.content) : null;
+  return wrapped.map(({ position, segments }, index) => {
+    const row = {
+      key: template.key,
+      position,
+      segments: index === 0 ? [...prefix, ...segments] : indentWidth > 0 ? [{ text: " ".repeat(indentWidth) }, ...segments] : segments
+    };
+    if (!starts) return row;
+    const part = starts.findLastIndex((start) => start <= position);
+    return { ...row, part, position: position - (starts[part] ?? 0) };
+  });
+}
+function partStarts(content) {
+  const starts = [0];
+  graphemes(content.map((segment) => segment.text).join("")).forEach((grapheme, index) => {
+    if (grapheme === "\n") starts.push(index + 1);
+  });
+  return starts;
+}
+var layoutRows = (lines, options) => lines.flatMap((line) => layoutLine(line, options));
+var maxOffset = (rowCount, viewportRows) => Math.max(0, rowCount - viewportRows);
+var anchorText = (line) => line?.kind === "agent" ? line.text : null;
+var partText = (rows, key, part) => rows.filter((row) => row.key === key && row.part === part).flatMap((row) => row.segments.map((segment) => segment.text)).join("");
+function rebasePart(position, before, after) {
+  if (before === after) return position;
+  const old = graphemes(before);
+  const next = graphemes(after);
+  let same = 0;
+  while (same < old.length && same < next.length && old[same] === next[same]) same += 1;
+  return position < same ? position : Math.max(same, position + next.length - old.length);
+}
+function anchorAt(rows, lines, offset) {
+  const row = rows[offset];
+  if (!row) return null;
+  if (row.part !== void 0)
+    return {
+      key: row.key,
+      part: row.part,
+      position: row.position,
+      text: partText(rows, row.key, row.part)
+    };
+  return {
+    key: row.key,
+    position: row.position,
+    text: anchorText(lines.find((line) => line.key === row.key))
+  };
+}
+function offsetForAnchor(rows, lines, anchor) {
+  const line = lines.find((candidate) => candidate.key === anchor.key);
+  if (!line) return null;
+  let { position } = anchor;
+  if (anchor.part !== void 0) {
+    if (anchor.text !== null)
+      position = rebasePart(position, anchor.text, partText(rows, anchor.key, anchor.part));
+  } else {
+    const text = anchorText(line);
+    if (anchor.text !== null && text !== null && text !== anchor.text && text.endsWith(anchor.text))
+      position += graphemes(text).length - graphemes(anchor.text).length;
+  }
+  let found = null;
+  for (const [index, row] of rows.entries()) {
+    if (row.key !== anchor.key || row.part !== anchor.part) continue;
+    if (row.position <= position) found = index;
+    else if (found === null) return index;
+  }
+  return found;
+}
+
+// src/ui/InputBox.tsx
+import { jsx } from "react/jsx-runtime";
+var clip = (text, width) => {
+  let out = "";
+  for (const cluster of graphemes(text)) {
+    if (displayWidth(out + cluster) > width) break;
+    out += cluster;
+  }
+  return out;
+};
+var safe = (text) => sanitize(text).replace(/\n/g, " ");
+function inputRow({
+  input,
+  columns,
+  maxChars,
+  placeholder,
+  showCounter = true
+}) {
+  if (columns <= 0) return [];
+  const count = [...input.text].length;
+  const counter = showCounter ? clip(`${count}/${maxChars ?? "\u2013"}`, columns) : "";
+  const available = columns - displayWidth(counter);
+  const display = safe(input.text);
+  const position = safe([...input.text].slice(0, input.cursor).join("")).length;
+  const clusters = graphemes(display);
+  let index = 0;
+  let offset = 0;
+  while (index < clusters.length) {
+    const cluster = clusters[index] ?? "";
+    if (offset + cluster.length > position) break;
+    offset += cluster.length;
+    index++;
+  }
+  const cursor = clusters[index] ?? " ";
+  const cursorWidth = displayWidth(cursor) <= available ? displayWidth(cursor) : 0;
+  const prefix = clip(" > ", available - cursorWidth);
+  const gap = available - cursorWidth - displayWidth(prefix) >= 2 ? 2 : 0;
+  const contentWidth = available - cursorWidth - displayWidth(prefix) - gap;
+  let before = "";
+  let after = "";
+  if (!input.text) before = clip(safe(placeholder), contentWidth);
+  else {
+    for (let i = index - 1; i >= 0; i--) {
+      const candidate = (clusters[i] ?? "") + before;
+      if (displayWidth(candidate) > contentWidth) break;
+      before = candidate;
+    }
+    after = clip(clusters.slice(index + 1).join(""), contentWidth - displayWidth(before));
+  }
+  const body = [
+    { key: "prefix", text: prefix },
+    { key: "before", text: before, dim: input.text === "" }
+  ];
+  if (cursorWidth > 0) body.push({ key: "cursor", text: cursor, inverse: true });
+  body.push({ key: "after", text: after });
+  const used = body.reduce((sum, segment) => sum + displayWidth(segment.text), 0);
+  body.push({ key: "gap", text: " ".repeat(Math.max(0, available - used)) });
+  const red = maxChars !== null && count > maxChars - 50;
+  body.push({ key: "counter", text: counter, red, dim: !red });
+  return body;
+}
+function InputBox(props) {
+  return /* @__PURE__ */ jsx(Text, { wrap: "truncate", children: inputRow(props).map((segment) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      inverse: segment.inverse,
+      dimColor: segment.dim,
+      color: segment.red ? "red" : void 0,
+      children: segment.text
+    },
+    segment.key
+  )) });
+}
+
+// src/ui/Picker.tsx
+import { Box, Text as Text2 } from "ink";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function pickerRows(picker, columns, viewportRows) {
+  const { step, choices, options } = picker;
+  const hint = step === "handle" ? "type a handle, Enter to confirm \xB7 Tab next step \xB7 Ctrl-L logout \xB7 Ctrl-C quit" : step === "emoji" ? "\u2190\u2191\u2193\u2192 move \xB7 Enter choose \xB7 Tab next step \xB7 \xD7 seated \xB7 Ctrl-L logout \xB7 Ctrl-C quit" : "\u2190\u2192 move \xB7 Enter claim \xB7 Tab next step \xB7 Ctrl-L logout \xB7 Ctrl-C quit";
+  const fit = (text) => fitRow(sanitize(text), columns);
+  const rows = [
+    [
+      {
+        text: fit(`onboarding \xB7 step ${["handle", "emoji", "color"].indexOf(step) + 1}/3 ${step}`)
+      }
+    ],
+    [
+      {
+        text: fit(
+          `handle ${choices.handle ?? "\u2013"} \xB7 emoji ${choices.emoji ?? "\u2013"} \xB7 color ${choices.color ?? "\u2013"}`
+        )
+      }
+    ],
+    [{ text: fit(hint) }],
+    // Slice 047 (045's follow-up): what a seated preference means in this run's room.
+    ...step === "emoji" ? [[{ text: fit("your emoji here is this one if free, else the first free one") }]] : [],
+    [{ text: fit(picker.message) }]
+  ];
+  const fixedRows = rows.length;
+  if (options && step !== "handle") {
+    const width = step === "emoji" ? 4 : 12;
+    const perRow = Math.max(1, Math.floor(columns / width));
+    const values = step === "emoji" ? options.emoji : options.colors;
+    const focus = step === "emoji" ? picker.emojiFocus : picker.colorFocus;
+    const gridRows = Math.max(0, viewportRows - fixedRows);
+    const start = Math.max(0, Math.floor(focus / perRow) - gridRows + 1) * perRow;
+    for (let i = start; i < values.length && rows.length < viewportRows; i += perRow) {
+      const cells2 = [];
+      for (let j = i; j < Math.min(i + perRow, values.length); j++) {
+        const value = values[j] ?? "";
+        const marker = focus === j ? ">" : " ";
+        if (step === "emoji")
+          cells2.push({
+            text: fit(`${marker}${value}${options.takenEmoji.includes(value) ? "\xD7" : " "}`),
+            dim: options.takenEmoji.includes(value)
+          });
+        else if (columns < width) cells2.push({ text: fit(`${marker}\u2588\u2588 ${value} `), color: value });
+        else
+          cells2.push(
+            { text: marker },
+            { text: "\u2588\u2588", color: value },
+            { text: ` ${sanitize(value)} ` }
+          );
+      }
+      rows.push(cells2);
+    }
+  }
+  return rows.slice(0, Math.max(0, viewportRows));
+}
+function Picker({
+  picker,
+  columns,
+  viewportRows
+}) {
+  return /* @__PURE__ */ jsx2(Box, { flexDirection: "column", height: viewportRows, overflow: "hidden", children: pickerRows(picker, columns, viewportRows).map((cells2, row) => {
+    const fixed = picker.step === "emoji" ? ["step", "choices", "hint", "note", "message"] : ["step", "choices", "hint", "message"];
+    const key = fixed[row] ?? cells2.map((cell) => cell.text).join("");
+    let column = 0;
+    return /* @__PURE__ */ jsx2(Box, { height: 1, children: /* @__PURE__ */ jsx2(Text2, { wrap: "truncate", children: cells2.map((cell) => {
+      const start = column;
+      column += cell.text.length;
+      return /* @__PURE__ */ jsx2(Text2, { dimColor: cell.dim, color: cell.color, children: cell.text }, `${start}`);
+    }) }) }, key);
+  }) });
+}
+
+// src/ui/QueuePanel.tsx
+import { Box as Box2, Text as Text3 } from "ink";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+function chromeRow(left, right, fill, columns) {
+  if (columns <= 1) return fitRow(left, columns);
+  const body = fitRow(left, columns - 1);
+  return body + fill.repeat(columns - 1 - displayWidth(body)) + right;
+}
+function queuePanelRows({
+  panel,
+  nowMs,
+  columns
+}) {
+  const eta = panel ? countdown(panel.nextTurnEta, nowMs) : "\u2013";
+  const separator = chromeRow(`\u251C\u2500 next turn ${eta} `, "\u2524", "\u2500", columns);
+  const items = (panel?.queue ?? []).map(
+    ({ author, submittedAt, chars }) => `${sanitize(author.emoji)} @${sanitize(author.handle)} ${ago(submittedAt, nowMs)} ${chars}ch`
+  );
+  const queue = fitRow(
+    `queued ${items.length}${items.length > 0 ? `: ${items.join(" \xB7 ")}` : ""}`,
+    columns
+  );
+  const indicators = fitRow(
+    [
+      ...(panel?.probing ?? []).map((handle) => `\u{1F50D} @${sanitize(handle)} probing\u2026`),
+      ...(panel?.typing ?? []).map((handle) => `\u270E @${sanitize(handle)} typing`)
+    ].join(" \xB7 "),
+    columns
+  );
+  return [separator, queue, indicators];
+}
+
+// src/ui/StatusLine.tsx
+import { Text as Text4 } from "ink";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function statusRow({
+  panel,
+  holder,
+  result,
+  authors,
+  connection,
+  columns,
+  play,
+  nowMs = 0
+}) {
+  const models = panel ? `${shortModel(sanitize(panel.model.current))} \u2192 ${shortModel(sanitize(panel.model.next))}` : "\u2013 \u2192 \u2013";
+  const context = panel ? `ctx ${gauge(panel.contextTokens, panel.compactAtTokens)} ${formatTokens(panel.contextTokens)}/${formatTokens(panel.compactAtTokens)}` : "ctx \u2013";
+  const identity = play?.authStatus ?? (!play?.snapshot ? "\u2013" : !play.token ? "/login to play" : play.snapshot.me ? `@${sanitize(play.snapshot.me.handle)}` : "not onboarded");
+  const seconds = cooldownSeconds(play?.cooldownUntil ?? null, nowMs);
+  const cd = play?.token && play.snapshot?.me && seconds > 0 ? formatDuration(seconds) : "\u2013";
+  const dm = play?.token && play.snapshot?.me && play.dmsLeft !== null ? `${play.dmsLeft}/${play.snapshot.config.dm.perWindow}` : "\u2013";
+  const standing = result ? `\u{1F3C6} ${winnerLabel(result.winner, authors)}` : `\u{1F451} ${holderLabel(holder, authors)}`;
+  const text = ` ${identity}  ${models} \xB7 ${context} \xB7 cd ${cd} \xB7 dm ${dm} \xB7 ${standing}${connection === "reconnecting" ? " \xB7 reconnecting\u2026" : ""}`;
+  return fitRow(text, columns);
+}
+
+// src/ui/Transcript.tsx
+import { Box as Box3, Text as Text5 } from "ink";
+import { useImperativeHandle, useMemo, useState } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var clamp = (value, max) => Math.min(Math.max(0, value), max);
+function Transcript({
+  lines,
+  authors,
+  viewportRows,
+  columns,
+  timeZone,
+  spinner,
+  requestOlder,
+  ref
+}) {
+  const rows = useMemo(
+    () => layoutRows(lines, { columns, timeZone, spinner, authors }),
+    [lines, columns, timeZone, spinner, authors]
+  );
+  const [view, setView] = useState({ follow: true, anchor: null, fallback: 0 });
+  const bottom = maxOffset(rows.length, viewportRows);
+  const anchored = view.anchor === null ? null : offsetForAnchor(rows, lines, view.anchor);
+  const offset = view.follow ? bottom : clamp(anchored ?? view.fallback, bottom);
+  const step = Math.max(1, viewportRows - 1);
+  const moveTo = (target) => {
+    const next = clamp(target, bottom);
+    if (next === bottom) setView({ follow: true, anchor: null, fallback: next });
+    else setView({ follow: false, anchor: anchorAt(rows, lines, next), fallback: next });
+  };
+  useImperativeHandle(ref, () => ({
+    navigate(key) {
+      if (viewportRows <= 0) return;
+      if (key === "pageUp" || key === "up") {
+        if (offset === 0) requestOlder();
+        moveTo(offset - (key === "pageUp" ? step : 1));
+      } else if (key === "pageDown") moveTo(offset + step);
+      else if (key === "down") moveTo(offset + 1);
+      else if (key === "home") moveTo(0);
+      else if (key === "end") moveTo(bottom);
+    }
+  }));
+  if (viewportRows <= 0) return null;
+  const seen = /* @__PURE__ */ new Map();
+  const visible = rows.slice(offset, offset + viewportRows).map((row) => {
+    const base = `${row.key}:${row.position}`;
+    const repeat = seen.get(base) ?? 0;
+    seen.set(base, repeat + 1);
+    return { key: repeat === 0 ? base : `${base}:${repeat}`, row };
+  });
+  return /* @__PURE__ */ jsx5(Box3, { flexDirection: "column", height: viewportRows, overflow: "hidden", children: visible.map(({ key, row }) => {
+    let column = 0;
+    return /* @__PURE__ */ jsx5(Text5, { wrap: "truncate", children: row.segments.map((segment) => {
+      const start = column;
+      column += segment.text.length;
+      return /* @__PURE__ */ jsx5(Text5, { color: segment.style?.color, dimColor: segment.style?.dim, children: segment.text }, `${start}`);
+    }) }, key);
+  }) });
+}
+
+// src/ui/useSession.ts
+import { useEffect, useState as useState2 } from "react";
+function useSession(session, intervalMs, clock) {
+  const [model, setModel] = useState2(() => session.model);
+  useEffect(() => {
+    let timer = null;
+    let active = true;
+    const unsubscribe = session.subscribe(() => {
+      if (timer !== null) return;
+      timer = clock.setTimeout(() => {
+        timer = null;
+        if (active) setModel(session.model);
+      }, intervalMs);
+    });
+    setModel((current) => current === session.model ? current : session.model);
+    return () => {
+      active = false;
+      unsubscribe();
+      if (timer !== null) clock.clearTimeout(timer);
+    };
+  }, [session, intervalMs, clock]);
+  return model;
+}
+function useSpinner(active, clock, intervalMs = 100) {
+  const [tick, setTick] = useState2(0);
+  useEffect(() => {
+    if (!active) return;
+    let timer = null;
+    const schedule = () => {
+      timer = clock.setTimeout(() => {
+        setTick((current) => current + 1);
+        schedule();
+      }, intervalMs);
+    };
+    schedule();
+    return () => {
+      if (timer !== null) clock.clearTimeout(timer);
+    };
+  }, [active, clock, intervalMs]);
+  return spinnerGlyph(tick);
+}
+function useTerminalSize(terminal) {
+  const [size, setSize] = useState2({ columns: terminal.columns, rows: terminal.rows });
+  useEffect(
+    () => terminal.subscribe(() => setSize({ columns: terminal.columns, rows: terminal.rows })),
+    [terminal]
+  );
+  return size;
+}
+
+// src/ui/App.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var RENDER_INTERVAL_MS = 33;
+var CHROME_ROWS = 7;
+function headerRow(model, columns) {
+  const viewers = model.panel ? String(model.panel.viewers) : "\u2013";
+  const state = stateBadge(
+    model.snapshot?.state ?? null,
+    model.completion,
+    model.snapshot?.pauseReasons ?? []
+  );
+  const room = model.snapshot?.room.title ?? model.pinnedRoom ?? null;
+  const segment = room === null ? "" : `\xB7 ${fitRow(room, 24)} `;
+  return chromeRow(`\u256D\u2500 p2p \xB7 ChatPvP ${segment}${state} ${viewers} watching `, "\u256E", "\u2500", columns);
+}
+var footerRow = (columns) => chromeRow("\u2570", "\u256F", "\u2500", columns);
+function App({ session, clock, timeZone, terminal, onExit }) {
+  const model = useSession(session, RENDER_INTERVAL_MS, clock);
+  const { columns, rows } = useTerminalSize(terminal);
+  const lines = mergeLines(model.lines, model.historyLoaded ? model.localLines : []);
+  const thinking = lines.some(
+    (line) => (line.kind === "agent" || line.kind === "dm_agent") && line.status === "thinking"
+  );
+  const transcript = useRef(null);
+  const spinner = useSpinner(thinking, clock);
+  const { isRawModeSupported } = useStdin();
+  useInput(
+    (input, key) => {
+      if (key.ctrl && input === "c") {
+        onExit?.();
+        return;
+      }
+      if (session.model.picker) {
+        if (key.ctrl && input === "l") {
+          void session.logout();
+          return;
+        }
+        const action = key.return ? "enter" : key.tab ? "tab" : key.leftArrow ? "left" : key.rightArrow ? "right" : key.upArrow ? "up" : key.downArrow ? "down" : key.backspace ? "backspace" : key.delete ? "delete" : key.home ? "home" : key.end ? "end" : null;
+        if (action) void session.pickerKey(action, columns);
+        else if (!key.ctrl && !key.meta && !key.escape && !key.pageUp && !key.pageDown && input)
+          void session.pickerKey("insert", columns, input);
+        return;
+      }
+      if (key.pageUp) transcript.current?.navigate("pageUp");
+      else if (key.pageDown) transcript.current?.navigate("pageDown");
+      else if (key.upArrow) transcript.current?.navigate("up");
+      else if (key.downArrow) transcript.current?.navigate("down");
+      else if (key.home || key.end) {
+        const direction = key.home ? "home" : "end";
+        if (session.model.input.text) session.moveCursor(direction);
+        else transcript.current?.navigate(direction);
+      } else if (key.leftArrow) session.moveCursor(-1);
+      else if (key.rightArrow) session.moveCursor(1);
+      else if (key.backspace) session.backspace();
+      else if (key.delete) session.delete();
+      else if (session.model.browserOffer && !session.model.input.text && !key.ctrl && !key.meta && (key.return || ["y", "Y", "n", "N"].includes(input)))
+        session.answerBrowser(!key.return && input.toLowerCase() === "y");
+      else if (key.return) void session.submit();
+      else if (!key.ctrl && !key.meta && !key.escape && !key.tab && input) {
+        session.dismissBrowser();
+        session.insert(input);
+      }
+    },
+    { isActive: isRawModeSupported }
+  );
+  if (rows < 1 || columns < 1) return null;
+  const nowMs = clock.now() + (model.snapshot?.serverOffsetMs ?? 0);
+  const viewportRows = Math.max(0, rows - CHROME_ROWS);
+  const [separator, queue, indicators] = queuePanelRows({ panel: model.panel, nowMs, columns });
+  const status = statusRow({
+    panel: model.panel,
+    holder: model.holder,
+    result: model.lines.findLast((line) => line.kind === "results"),
+    authors: model.authors,
+    connection: model.connection,
+    columns,
+    play: model,
+    nowMs: clock.now()
+  });
+  const bottom = [
+    { name: "separator", text: separator, dim: true },
+    { name: "queue", text: queue, dim: false },
+    { name: "indicators", text: indicators, dim: false },
+    { name: "footer", text: footerRow(columns), dim: true },
+    { name: "input", text: "", dim: false },
+    { name: "status", text: status, dim: false }
+  ].slice(0, Math.max(0, rows - 1 - viewportRows));
+  return /* @__PURE__ */ jsxs2(Box4, { flexDirection: "column", width: columns, height: rows, overflow: "hidden", children: [
+    /* @__PURE__ */ jsx6(Box4, { height: 1, children: /* @__PURE__ */ jsx6(Text6, { wrap: "truncate", dimColor: true, children: headerRow(model, columns) }) }),
+    /* @__PURE__ */ jsx6(
+      Transcript,
+      {
+        ref: transcript,
+        lines,
+        authors: model.authors,
+        viewportRows: model.picker ? 0 : viewportRows,
+        columns,
+        timeZone,
+        spinner,
+        requestOlder: session.requestOlder
+      }
+    ),
+    model.picker && /* @__PURE__ */ jsx6(Picker, { picker: model.picker, columns, viewportRows }),
+    bottom.map((row) => (
+      // A fixed-height box keeps an empty row (no indicators) on screen.
+      /* @__PURE__ */ jsx6(Box4, { height: 1, children: row.name === "input" ? /* @__PURE__ */ jsx6(
+        InputBox,
+        {
+          input: model.picker?.input ?? model.input,
+          showCounter: !model.picker,
+          columns,
+          maxChars: model.snapshot?.config.prompt.maxChars ?? null,
+          placeholder: model.picker ? "handle\u2026" : !model.token ? "/login to play" : !model.snapshot?.me ? "not onboarded" : "prompt\u2026"
+        }
+      ) : /* @__PURE__ */ jsx6(Text6, { wrap: "truncate", dimColor: row.dim, children: row.text }) }, row.name)
+    ))
+  ] });
+}
+export {
+  App,
+  CHROME_ROWS,
+  RENDER_INTERVAL_MS,
+  footerRow,
+  headerRow
+};