@oddessentials/agent-guild 0.24.0 → 0.24.1

package/README.md

@@ -60,6 +60,11 @@ and come back to the same screens. Drag a session card by its grip, with a
 mouse or a finger, to put the cards in the order you want; this browser
 remembers it, and new sessions join at the end.
 
+On a touchscreen, **Copy…** opens a still copy of the terminal text. Touch and
+hold to select, then use **Copy selection** or the browser's Copy menu. **Done**
+returns to the live terminal; the session keeps running while you copy. The
+view includes retained scrollback, or the current screen of a full-screen tool.
+
 **Pick your shell.** The Shell card offers the shells installed on your
 computer and remembers your choice in this browser. On Windows it defaults
 to PowerShell 7 when installed, then Windows PowerShell; Git Bash and Command

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "Launch and watch AI coding-assistant terminal sessions from one local web page. A bundled session manager owns the terminals so the page can close and reconnect.",
   "license": "MIT",
   "repository": {

package/web/app.js

@@ -2,6 +2,7 @@
 // it never owns sessions, so closing the page leaves them running.
 
 import { SOUNDS, MAX_ALERT_AGE_MS, playOnce, rearmSound, managerLossWatcher, stopWatcher, updateWatcher } from './alerts.js';
+import { TerminalCopy } from './terminal-copy.js';
 
 const TOKEN_KEY = 'agentGuild.token';
 const CWD_KEY = 'agentGuild.cwd';
@@ -3591,8 +3592,18 @@ class TerminalView {
 
 // ---- terminal panel -------------------------------------------------------
 
+const terminalCopy = new TerminalCopy({
+  opener: $('panel-copy'), dialog: $('terminal-copy'),
+  getCurrent: () => {
+    const session = state.sessions.get(state.activeId);
+    const view = state.views.get(state.activeId);
+    return session && view ? { id: session.id, name: session.name, term: view.term } : null;
+  },
+});
+
 function openPanel(id) {
   if (!state.sessions.has(id)) return;
+  if (state.activeId !== id) terminalCopy.close();
   if (dictation && dictation.id !== id) stopDictation();
   if (state.activeId && state.activeId !== id) state.views.get(state.activeId)?.unmount();
   state.activeId = id;
@@ -3604,6 +3615,7 @@ function openPanel(id) {
 }
 
 function closePanel() {
+  terminalCopy.close();
   stopDictation();
   if (state.activeId) state.views.get(state.activeId)?.unmount();
   state.activeId = null;
@@ -4187,6 +4199,7 @@ document.addEventListener('visibilitychange', () => {
 });
 addEventListener('pagehide', () => {
   state.pageAway = true;
+  terminalCopy.close();
   stopDictation();
   managerLoss.cancel();
   state.eventsSocket?.close();

package/web/index.html

@@ -125,6 +125,7 @@
       </div>
       <div class="panel-actions">
         <button id="panel-voice" class="btn voice" type="button" hidden aria-pressed="false" title="Speak into this terminal. Review the text, then press Enter yourself.">Dictate</button>
+        <button id="panel-copy" class="btn" type="button" hidden aria-haspopup="dialog" title="Select and copy terminal text">Copy…</button>
         <button id="panel-stop" class="btn danger" type="button">Stop</button>
         <button id="panel-close" class="btn" type="button" title="Hide the terminal. The session keeps running.">Hide</button>
       </div>
@@ -133,6 +134,21 @@
     <div id="voice-preview" class="voice-preview" hidden aria-live="polite"></div>
   </div>
 
+  <dialog id="terminal-copy" class="terminal-copy" aria-labelledby="terminal-copy-title">
+    <div class="terminal-copy-bar">
+      <div class="terminal-copy-heading">
+        <h2 id="terminal-copy-title">Copy terminal text</h2>
+        <p class="sub" data-session></p>
+      </div>
+      <button class="btn" type="button" data-done>Done</button>
+    </div>
+    <textarea readonly autofocus wrap="off" spellcheck="false" inputmode="none" aria-label="Terminal text snapshot" aria-describedby="terminal-copy-status"></textarea>
+    <div class="terminal-copy-footer">
+      <p id="terminal-copy-status" role="status"></p>
+      <button class="btn primary" type="button" data-copy disabled>Copy selection</button>
+    </div>
+  </dialog>
+
   <dialog id="models" class="models" aria-labelledby="models-title">
     <div class="models-bar">
       <span id="models-icon" class="provider-icon small"></span>

package/web/styles.css

@@ -418,6 +418,27 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 }
 .terminal-host { flex: 1; min-height: 0; padding: 8px 4px 4px 10px; }
 .terminal-host > div { height: 100%; }
+.terminal-copy {
+  width: min(880px, calc(100vw - 24px)); height: min(720px, calc(100dvh - 24px));
+  max-width: none; max-height: none; padding: 0; overflow: hidden;
+  color: var(--text); background: var(--surface); border: 1px solid var(--border);
+  border-radius: var(--radius); box-shadow: var(--shadow);
+}
+.terminal-copy[open] { display: flex; flex-direction: column; }
+.terminal-copy::backdrop { background: rgba(15, 17, 21, 0.5); }
+.terminal-copy-bar, .terminal-copy-footer { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
+.terminal-copy-heading { flex: 1; min-width: 0; }
+.terminal-copy-heading .sub { margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.8rem; }
+.terminal-copy textarea {
+  flex: 1; min-height: 0; width: 100%; resize: none; margin: 0; padding: 14px 16px;
+  border: 0; border-block: 1px solid var(--border); border-radius: 0;
+  background: var(--term-bg); color: #e6e9ef; font: 14px/1.5 var(--font-mono);
+  white-space: pre; user-select: text; -webkit-user-select: text; touch-action: auto; overscroll-behavior: contain;
+}
+.terminal-copy textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.terminal-copy-footer p { flex: 1; margin: 0; color: var(--muted); font-size: 0.8rem; }
+.terminal-copy .btn { min-height: 44px; flex-shrink: 0; }
+.terminal-copy .btn:disabled { cursor: default; }
 @media (pointer: coarse) {
   /* A drag on the panel would otherwise scroll the page behind it. */
   body:has(#terminal-panel:not([hidden])) { overflow: hidden; }

package/web/terminal-copy.js

@@ -0,0 +1,128 @@
+// A frozen copy surface keeps native touch selection separate from terminal gestures.
+const SELECT_HINT = 'Touch and hold to select text.';
+
+export function captureTerminalText(term) {
+  const buffer = term.buffer.active;
+  const lines = [];
+  let viewportLine = 0;
+  let viewportPrefix = '';
+  for (let y = 0; y < buffer.length; y++) {
+    const line = buffer.getLine(y);
+    const text = line.translateToString(true, 0, term.cols);
+    const wrapped = line.isWrapped && lines.length > 0;
+    if (y === buffer.viewportY) {
+      viewportLine = wrapped ? lines.length - 1 : lines.length;
+      // The visible row can begin inside a joined line. Keep its actual text
+      // prefix: terminal cells and JavaScript character counts differ for Unicode.
+      viewportPrefix = wrapped ? lines[lines.length - 1] : '';
+    }
+    if (wrapped) lines[lines.length - 1] += text;
+    else lines.push(text);
+  }
+  return { text: lines.join('\n'), viewportLine, viewportPrefix };
+}
+
+export class TerminalCopy {
+  constructor({ opener, dialog, getCurrent }) {
+    this.dialog = dialog;
+    this.getCurrent = getCurrent;
+    this.text = dialog.querySelector('textarea');
+    this.copyButton = dialog.querySelector('[data-copy]');
+    this.status = dialog.querySelector('[role="status"]');
+    this.current = null;
+    this.attempt = null;
+    const touch = matchMedia('(any-pointer: coarse)');
+    const availability = () => { opener.hidden = !touch.matches && !navigator.maxTouchPoints; };
+    touch.addEventListener('change', availability);
+    availability();
+    opener.addEventListener('click', () => this.open());
+    this.copyButton.addEventListener('click', () => this.copy());
+    dialog.querySelector('[data-done]').addEventListener('click', () => this.close(true));
+    dialog.addEventListener('cancel', (event) => { event.preventDefault(); this.close(true); });
+    // A programmatic/native close can arrive after the sheet has already reopened.
+    dialog.addEventListener('close', () => { if (!dialog.open) this.clear(); });
+    this.text.addEventListener('select', () => this.selectionChanged());
+    document.addEventListener('selectionchange', () => {
+      if (dialog.open) this.selectionChanged();
+    });
+  }
+
+  open() {
+    if (this.dialog.open) return;
+    const current = this.getCurrent();
+    if (!current) return;
+    const snapshot = captureTerminalText(current.term);
+    this.current = current;
+    this.selection = '0:0';
+    this.text.value = snapshot.text;
+    this.dialog.querySelector('[data-session]').textContent = current.name;
+    this.status.textContent = SELECT_HINT;
+    this.copyButton.disabled = true;
+    this.dialog.showModal();
+    this.text.focus({ preventScroll: true });
+    this.text.setSelectionRange(0, 0);
+    const style = getComputedStyle(this.text);
+    this.text.scrollTop = snapshot.viewportLine * parseFloat(style.lineHeight);
+    this.text.scrollLeft = 0;
+    if (snapshot.viewportPrefix) {
+      const measure = document.createElement('canvas').getContext('2d');
+      measure.font = style.font;
+      this.text.scrollLeft = measure.measureText(snapshot.viewportPrefix).width;
+    }
+  }
+
+  selectionChanged() {
+    const selection = `${this.text.selectionStart}:${this.text.selectionEnd}`;
+    if (selection !== this.selection && this.status.textContent === 'Copied') {
+      this.status.textContent = SELECT_HINT;
+    }
+    this.selection = selection;
+    this.copyButton.disabled = Boolean(this.attempt) || this.text.selectionStart === this.text.selectionEnd;
+  }
+
+  async copy() {
+    const current = this.current;
+    if (!current || this.attempt) return;
+    const range = `${this.text.selectionStart}:${this.text.selectionEnd}`;
+    const selected = this.text.value.slice(this.text.selectionStart, this.text.selectionEnd);
+    if (!selected) return;
+    const attempt = this.attempt = {};
+    this.copyButton.disabled = true;
+    this.status.textContent = 'Copying…';
+    try {
+      // Stay in the user's click activation; no permission preflight or clipboard read.
+      // Textareas normalize newlines to LF; match xterm's Windows copy convention.
+      const text = /Win/.test(navigator.platform) ? selected.replace(/\n/g, '\r\n') : selected;
+      await navigator.clipboard.writeText(text);
+      if (this.current === current && this.attempt === attempt) {
+        this.status.textContent = range === `${this.text.selectionStart}:${this.text.selectionEnd}` ? 'Copied' : SELECT_HINT;
+      }
+    } catch {
+      if (this.current === current && this.attempt === attempt) {
+        this.status.textContent = 'Use Copy in the text selection menu.';
+        this.text.focus({ preventScroll: true });
+      }
+    } finally {
+      if (this.attempt === attempt) {
+        this.attempt = null;
+        this.selectionChanged();
+      }
+    }
+  }
+
+  close(restoreFocus = false) {
+    const current = this.current;
+    this.clear();
+    if (this.dialog.open) this.dialog.close();
+    if (restoreFocus && current && this.getCurrent()?.term === current.term) current.term.focus();
+  }
+
+  clear() {
+    this.current = null;
+    this.attempt = null;
+    this.text.value = '';
+    this.status.textContent = '';
+    this.dialog.querySelector('[data-session]').textContent = '';
+    this.copyButton.disabled = true;
+  }
+}