@oddessentials/agent-guild 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oddessentials/agent-guild",
-  "version": "0.12.0",
+  "version": "0.12.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

@@ -15,6 +15,7 @@ const RELEASES_URL = 'https://github.com/oddessentials/agent-guild/releases';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
 const finePointer = window.matchMedia('(hover: hover) and (pointer: fine)');
+const coarsePointer = window.matchMedia('(pointer: coarse)');
 
 const $ = (id) => document.getElementById(id);
 const state = {
@@ -2747,7 +2748,7 @@ class TerminalView {
     this.term = new window.Terminal({
       cursorBlink: true,
       fontFamily: 'ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace',
-      fontSize: 13,
+      fontSize: coarsePointer.matches ? 14 : 13,
       scrollback: 5000,
       macOptionIsMeta: true,
       theme: TERMINAL_THEME,
@@ -2828,12 +2829,51 @@ class TerminalView {
 
   mount(host) {
     host.replaceChildren(this.el);
-    if (!this.opened) { this.term.open(this.el); this.opened = true; }
+    if (!this.opened) { this.term.open(this.el); this.enableTouchScroll(); this.opened = true; }
     this.resizeObserver.observe(host);
     this.refit();
     this.term.focus();
   }
 
+  /**
+   * xterm.js 6 scrolls only for the mouse wheel, so a one-finger drag would
+   * scroll the page behind the panel instead. Turn the drag into scrolling.
+   * Full-screen programs and programs that read the mouse get a wheel event,
+   * which xterm turns into arrow keys or mouse reports as it does for a real
+   * wheel. Scrollback uses scrollLines, because xterm's scrollback reads the
+   * legacy wheelDeltaY that a constructed WheelEvent leaves at 0.
+   */
+  enableTouchScroll() {
+    let lastY = null;
+    let pending = 0;
+    this.el.addEventListener('touchstart', (e) => {
+      lastY = e.touches.length === 1 ? e.touches[0].clientY : null;
+      pending = 0;
+    }, { passive: true });
+    this.el.addEventListener('touchmove', (e) => {
+      if (lastY === null || e.touches.length !== 1) return;
+      e.preventDefault();
+      const touch = e.touches[0];
+      const delta = lastY - touch.clientY;
+      lastY = touch.clientY;
+      if (this.term.buffer.active.type === 'alternate' || this.term.modes.mouseTrackingMode !== 'none') {
+        const target = this.el.querySelector('.xterm-screen') || this.el;
+        target.dispatchEvent(new WheelEvent('wheel', {
+          deltaY: delta, deltaMode: WheelEvent.DOM_DELTA_PIXEL,
+          clientX: touch.clientX, clientY: touch.clientY, bubbles: true, cancelable: true,
+        }));
+        return;
+      }
+      pending += delta;
+      const lineHeight = this.el.querySelector('.xterm-rows')?.firstElementChild?.offsetHeight || 17;
+      const lines = Math.trunc(pending / lineHeight);
+      if (lines) { this.term.scrollLines(lines); pending -= lines * lineHeight; }
+    }, { passive: false });
+    const end = () => { lastY = null; };
+    this.el.addEventListener('touchend', end);
+    this.el.addEventListener('touchcancel', end);
+  }
+
   unmount() {
     this.resizeObserver.disconnect();
     this.el.remove();

package/web/styles.css

@@ -354,6 +354,14 @@ body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after {
 .panel-actions { display: flex; gap: 8px; }
 .terminal-host { flex: 1; min-height: 0; padding: 8px 4px 4px 10px; }
 .terminal-host > div { height: 100%; }
+@media (pointer: coarse) {
+  /* A drag on the panel would otherwise scroll the page behind it. */
+  body:has(#terminal-panel:not([hidden])) { overflow: hidden; }
+}
+@media (pointer: coarse) and (max-width: 900px) {
+  /* Tablets in portrait are wider than the phone layout but still want the whole width. */
+  .terminal-panel { inset: var(--topbar-h, 56px) 0 0; border-radius: 0; }
+}
 
 .models {
   width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; overflow: hidden;