hop2 0.11.63 → 0.11.65

package/hay/apps/web/src/App.tsx

@@ -22,6 +22,7 @@ import { getMathTip } from "./utils/mathTooltip";
 import { scanKeyboardProtocol } from "./utils/keyboardProtocol";
 import { originalPathHint, pasteableUploadPaths } from "./utils/fileDrop";
 import { claimOnAttach, claimOnClick, isPlainClick } from "./utils/sizeClaim";
+import { installDragSelect } from "./utils/dragSelect";
 import { MobileKeyboard } from "./components/MobileKeyboard";
 import { SessionSwitcher } from "./components/SessionSwitcher";
 import { SecondaryPane } from "./components/SecondaryPane";
@@ -261,6 +262,10 @@ type SessionInfo = {
   createdBy?: "user" | "agent";
   createdVia?: string | null;
   agent?: "claude" | "codex" | null;
+  // Server-decided: a turn in flight, or the last one finished — and whether
+  // a human has opened the session since it finished (see lib/agent-phase.js).
+  agentPhase?: "working" | "done" | null;
+  turnSeen?: boolean;
   attentionReason?: string;
   attentionNote?: string;
   cols?: number;
@@ -739,6 +744,14 @@ const App = () => {
     return screenLooksLikeClaude();
   };
   foregroundIsClaudeRef.current = foregroundIsClaude;
+  // Which agent the current session runs, by the daemon's hook records.
+  const currentSessionAgentRef = useRef<(() => "claude" | "codex" | null) | null>(null);
+  currentSessionAgentRef.current = () => {
+    const room = activeSessionRoomRef.current;
+    if (!room) return null;
+    const s = sessionsRef.current.find((x) => (x.internalName || x.name) === room);
+    return s?.agent || null;
+  };
   const drawerOpenRef = useRef(drawerOpen);
   drawerOpenRef.current = drawerOpen;
   const shortcutHelpRef = useRef(shortcutHelpOpen);
@@ -2094,6 +2107,9 @@ const App = () => {
       fontFamily: getComputedStyle(document.documentElement).getPropertyValue("--font-terminal").trim()
         || "Menlo, Monaco, 'Courier New', monospace",
       fontSize,
+      // ⌥-drag always selects, iTerm's escape hatch for apps that track the
+      // mouse. (Plain drag selects too in agent sessions — utils/dragSelect.)
+      macOptionClickForcesSelection: true,
       lineHeight: 1.3,
       cursorBlink: true,
       scrollback: 50000,
@@ -2132,6 +2148,14 @@ const App = () => {
     // Unicode, the browser around the terminal draws properly.
     enableMathHover(terminal, getMathTip());
     terminal.open(containerRef.current);
+    // Plain drag selects in Claude/Codex sessions even though they track the
+    // mouse; the wheel still reaches them. See utils/dragSelect.ts.
+    // Hooked on the SCROLL wrapper, not xterm's host: a press in the gutter
+    // lands on the wrapper (which still starts a selection when tracking is
+    // off), and a capture listener only sees presses on its own subtree.
+    (terminal as any).__dragSelectCleanup = installDragSelect(terminal as never,
+      (containerRef.current.closest(".terminal-scroll") as HTMLElement | null) || containerRef.current, () =>
+      foregroundIsClaudeRef.current?.() === true || currentSessionAgentRef.current?.() === "codex");
 
     // GPU-accelerated rendering (same renderer VS Code uses). Must load after
     // open(). If WebGL isn't available (old GPU, blocklisted driver) the
@@ -3028,6 +3052,10 @@ const App = () => {
           (terminal as any).__overlayScrollbarCleanup();
           (terminal as any).__overlayScrollbarCleanup = null;
         }
+        if ((terminal as any).__dragSelectCleanup) {
+          (terminal as any).__dragSelectCleanup();
+          (terminal as any).__dragSelectCleanup = null;
+        }
         terminal.dispose();
         termRef.current = null;
         fitRef.current = null;
@@ -3205,6 +3233,8 @@ const App = () => {
           createdBy: s.createdBy === "agent" ? "agent" : "user",
           createdVia: typeof s.createdVia === "string" ? s.createdVia : null,
           agent: s.agent === "claude" || s.agent === "codex" ? s.agent : null,
+          agentPhase: s.agentPhase === "working" || s.agentPhase === "done" ? s.agentPhase : null,
+          turnSeen: s.turnSeen !== false,
           cols: Number.isInteger(s.cols) ? s.cols : undefined,
           rows: Number.isInteger(s.rows) ? s.rows : undefined,
           // These three were silently dropped here, so the switcher never saw
@@ -3966,7 +3996,7 @@ const App = () => {
         grab();
         setViewsOpen((v) => v ? null
           : (activeSessionRoomRef.current
-              ? { session: activeSessionRoomRef.current, dock: true }
+              ? { session: activeSessionRoomRef.current }
               : {}));
         return;
       }
@@ -4160,7 +4190,7 @@ const App = () => {
               // DOCKED and scoped: in full-screen mode you almost always want
               // THIS session's results, read beside the live terminal rather
               // than over it. The panel's own toggle widens to the fleet.
-              onClick={() => setViewsOpen({ session: session.room, dock: true })}
+              onClick={() => setViewsOpen({ session: session.room })}
             >
               Views
               {(() => {
@@ -4214,7 +4244,7 @@ const App = () => {
             onRefresh={() => fetchSessions({ showLoading: false })}
             onNotice={showToast}
             tileWsBase={resolveWsUrl()}
-            onOpenViews={(scope) => setViewsOpen({ session: scope, dock: true })}
+            onOpenViews={(scope) => setViewsOpen({ session: scope })}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
           />
@@ -4878,7 +4908,7 @@ const App = () => {
             tileWsBase={resolveWsUrl()}
             onFocusSession={focusSessionInPlace}
             folders={folders}
-            onOpenViews={(scope) => setViewsOpen({ session: scope, dock: true })}
+            onOpenViews={(scope) => setViewsOpen({ session: scope })}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
             onOpenSettings={() => {

package/hay/apps/web/src/components/SecondaryPane.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+import { installDragSelect } from "../utils/dragSelect";
+import { bufferLooksLikeClaude } from "../utils/voiceHold";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { safeParseServerMessage } from "hay-shared";
@@ -58,6 +60,8 @@ export const SecondaryPane = ({
   onSplit,
   onZoom
 }: Props) => {
+  const procLabelRef = useRef(procLabel);
+  procLabelRef.current = procLabel;
   const hostRef = useRef<HTMLDivElement>(null);
   const boxRef = useRef<HTMLDivElement>(null);
   const termRef = useRef<Terminal | null>(null);
@@ -77,6 +81,7 @@ export const SecondaryPane = ({
       cols: sizeRef.current.cols,
       rows: sizeRef.current.rows,
       fontSize,
+      macOptionClickForcesSelection: true,
       fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
       theme: theme as never,
       scrollback: 2000,
@@ -86,6 +91,10 @@ export const SecondaryPane = ({
     term.loadAddon(fitAddon);
     enableMathHover(term, getMathTip());
     term.open(hostRef.current);
+    // Plain drag selects in Claude/Codex panes even though they track the
+    // mouse; the wheel still reaches them. See utils/dragSelect.ts.
+    const uninstallDragSelect = installDragSelect(term as never, hostRef.current, () =>
+      /^(claude|codex)$/i.test(procLabelRef.current || "") || bufferLooksLikeClaude(term as never));
     termRef.current = term;
 
     let shouldReconnect = true;
@@ -222,6 +231,7 @@ export const SecondaryPane = ({
       ro.disconnect();
       dataSub.dispose();
       try { wsRef.current?.close(); } catch { /* ignore */ }
+      uninstallDragSelect();
       term.dispose();
       termRef.current = null;
     };

package/hay/apps/web/src/components/SessionSwitcher.tsx

@@ -15,6 +15,9 @@ import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import { enableMathHover } from "../utils/mathLinkProvider";
 import { getMathTip } from "../utils/mathTooltip";
+import { claimOnTileFocus, sizeIsForeign } from "../utils/sizeClaim";
+import { cardPhase, phaseLabel, phaseTitle } from "../utils/agentPhase";
+import { installDragSelect } from "../utils/dragSelect";
 import { urlAtCell, cellAtPoint } from "../utils/urlAtCell";
 import { attachScrollFlywheel } from "../utils/scrollFlywheel";
 import { ContextMenu, type MenuRequest } from "./ContextMenu";
@@ -354,11 +357,17 @@ const runningApp = (s: SwitcherSession) => {
 // responsiveness and whether keystrokes are accepted. The old design — an
 // HTML preview swapped for a fresh xterm + socket behind a veil — is gone.
 const LIVETILE_POLL_MS = 5000;
-const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, activeCols, activeRows, onFullscreen, onUnfocus, onNotice, onSender }: {
+const LiveTile = ({ wsBase, room, userName, theme, live, deliberate, claudeApp, codexApp = false, claimSize, activeCols, activeRows, onFullscreen, onUnfocus, onNotice, onSender }: {
   /** The wall keeps a registry of live tiles' input senders (file drops). */
   onSender?: (send: ((data: string) => void) | null) => void;
   wsBase: string; room: string; userName: string; theme: object | undefined;
-  live: boolean; claudeApp: boolean; claimSize: boolean; activeCols?: number; activeRows?: number;
+  /**
+   * `live` says the tile is the focused one; `deliberate` says the human
+   * put it there (click, Enter, start, create) rather than the wall
+   * pre-focusing the current session as it opened. Only a deliberate focus
+   * takes the session's size — see claimOnTileFocus.
+   */
+  live: boolean; deliberate: boolean; claudeApp: boolean; codexApp?: boolean; claimSize: boolean; activeCols?: number; activeRows?: number;
   onFullscreen: () => void; onUnfocus: () => void; onNotice: (m: string) => void;
 }) => {
   const boxRef = useRef<HTMLDivElement | null>(null);
@@ -367,6 +376,8 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
   const rescaleRef = useRef<() => void>(() => {});
   // Wired by the live effect; watch mode leaves them null so keys go nowhere.
   const sendInputRef = useRef<((data: string) => void) | null>(null);
+  const deliberateRef = useRef(deliberate);
+  deliberateRef.current = deliberate;
   // When the link addon last opened something from this tile — so the click
   // that follows its mouseup does not open the same URL a second time.
   const lastLinkOpenAtRef = useRef(0);
@@ -417,6 +428,8 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
   // every session that came back through `hop restore`. The buffer's own
   // chrome is the honest witness; both callers share it.
   const looksLikeClaude = () => isClaudeSurface(claudeAppRef.current, termRef.current as never);
+  const codexAppRef = useRef(codexApp);
+  codexAppRef.current = codexApp;
   if (!voiceHoldRef.current) {
     voiceHoldRef.current = createVoiceHold({
       send: (data) => sendInputRef.current?.(data),
@@ -491,6 +504,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       cols: activeCols && activeCols > 1 ? activeCols : 80,
       rows: activeRows && activeRows > 1 ? activeRows : 24,
       scrollback: 2000,
+      macOptionClickForcesSelection: true,
       // Same scroll feel as the full-screen terminal: one wheel notch moves
       // 4 lines (xterm's default of 1 is the "tiles feel sluggish" report),
       // Shift+wheel blasts. Momentum is attached below.
@@ -522,6 +536,9 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     }));
     enableMathHover(term, getMathTip()); // rendered math on hover, here too
     term.open(box);
+    // Plain drag selects in Claude/Codex tiles even though they track the
+    // mouse; the wheel still reaches them. See utils/dragSelect.ts.
+    const uninstallDragSelect = installDragSelect(term as never, box, () => looksLikeClaude() || codexAppRef.current);
     termRef.current = term;
     fitRef.current = fit;
     const inner = box.querySelector(".xterm") as HTMLElement | null;
@@ -741,6 +758,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       detachFlywheel();
       ro?.disconnect();
       sub.dispose();
+      uninstallDragSelect();
       term.dispose();
       termRef.current = null;
       fitRef.current = null;
@@ -782,13 +800,9 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     // for sizes that are genuinely foreign (full-screen leftovers), not for
     // disagreements about rounding.
     const cur = termRef.current;
-    if (cur) {
-      const closeCols = Math.abs(cur.cols - dims.cols) <= Math.max(3, Math.round(dims.cols * 0.15));
-      const closeRows = Math.abs(cur.rows - dims.rows) <= Math.max(2, Math.round(dims.rows * 0.15));
-      if (closeCols && closeRows) {
-        lastClaimRef.current = { cols: dims.cols, rows: dims.rows, at: performance.now() };
-        return;
-      }
+    if (cur && !sizeIsForeign({ cols: cur.cols, rows: cur.rows }, { cols: dims.cols, rows: dims.rows })) {
+      lastClaimRef.current = { cols: dims.cols, rows: dims.rows, at: performance.now() };
+      return;
     }
     lastClaimRef.current = { cols: dims.cols, rows: dims.rows, at: performance.now() };
     const sep = wsBase.includes("?") ? "&" : "?";
@@ -931,6 +945,31 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     let reconnectTimer = 0;
     let reconnectAttempt = 0;
     const pendingInput: Array<{ data: string; at: number }> = [];
+    // Engaging a tile is an act on it, the same as opening the session full
+    // screen, and takes the size the same way — through THIS socket, as an
+    // attach claim, so ownership moves here and the election's active_size
+    // confirms the fit (the handler below resizes the tile to it). Until
+    // now a clicked tile only ever attached at the session's current size
+    // and fitted itself on the first keystroke; a session wearing a
+    // full-screen size stayed a wall of tiny text when clicked ("clicking
+    // the tile does not enter the terminal, but full screen does"). Once
+    // per focus: a reconnect is the same socket healing, not a new act.
+    let focusClaimDone = false;
+    const claimFitOnFocus = (sock: WebSocket) => {
+      if (focusClaimDone) return;
+      focusClaimDone = true;
+      const fitAddon = fitRef.current;
+      const boxEl = boxRef.current;
+      const t = termRef.current;
+      if (!fitAddon || !boxEl || !t || boxEl.clientWidth < 60 || boxEl.clientHeight < 40) return;
+      const dims = fitAddon.proposeDimensions();
+      const natural = dims?.cols && dims?.rows ? { cols: dims.cols, rows: dims.rows } : null;
+      if (!natural || !claimOnTileFocus({ deliberate: deliberateRef.current, natural, current: { cols: t.cols, rows: t.rows } })) return;
+      lastClaimRef.current = { cols: natural.cols, rows: natural.rows, at: performance.now() };
+      try {
+        sock.send(JSON.stringify({ type: "resize", cols: natural.cols, rows: natural.rows, claim: "attach", user: true }));
+      } catch { /* closing; the next act re-claims */ }
+    };
     // Sub-second drops stay invisible: the "reconnecting…" chrome waits out
     // a grace window, and the first retry goes immediately — a tunnel
     // restart or a waking laptop usually reconnects before either fires.
@@ -963,6 +1002,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
         if (disposed || ws !== sock) return;
         reconnectAttempt = 0;
         markLive();
+        claimFitOnFocus(sock);
         window.setTimeout(() => rescaleRef.current(), 30);
         const cutoff = Date.now() - 15000;
         for (const pend of pendingInput) {
@@ -1614,7 +1654,11 @@ export const SessionSwitcher = ({
       else sessionStorage.removeItem("hay_switcher_focus");
     } catch { /* private mode */ }
   }, [focusedKey]);
-  useEffect(() => { if (!open) setFocusedKey(null); }, [open]);
+  // The key the HUMAN focused (click, Enter, start, create), as opposed to
+  // the wall pre-focusing the current session as it opens. The live tile
+  // takes the session's size only for the former.
+  const deliberateFocusRef = useRef<string | null>(null);
+  useEffect(() => { if (!open) { setFocusedKey(null); deliberateFocusRef.current = null; } }, [open]);
   useEffect(() => { if (!interactiveTiles) setFocusedKey(null); }, [interactiveTiles]);
   const [renameDraft, setRenameDraft] = useState("");
   const [creating, setCreating] = useState(false);
@@ -2002,6 +2046,7 @@ export const SessionSwitcher = ({
     if (!current) return;
     initialFocusDoneRef.current = true;
     const key = sessionKey(current);
+    deliberateFocusRef.current = null; // the wall's own pre-focus, not an act
     setFocusedKey(key);
     const idx = navIndexByKey.get(key);
     if (typeof idx === "number") {
@@ -2242,6 +2287,7 @@ export const SessionSwitcher = ({
   const focusInPlace = (session: SwitcherSession) => {
     const key = sessionKey(session);
     filterInputRef.current?.blur();
+    deliberateFocusRef.current = key;
     setFocusedKey(key);
     onFocusSession?.(session);
     const idx = flatNav.findIndex((x) => sessionKey(x) === key);
@@ -2291,6 +2337,7 @@ export const SessionSwitcher = ({
         kick.onerror = () => { try { kick.close(); } catch { /* refused */ } };
       } catch { /* daemon will surface it as starting on the next poll */ }
       onNotice("Starting " + (session.displayName || session.name) + "…");
+      deliberateFocusRef.current = key;
       setFocusedKey(key);
       onFocusSession?.(session);
       onRefresh();
@@ -2703,6 +2750,7 @@ export const SessionSwitcher = ({
           if (hiddenByOrigin) setOriginScope("all");
           if (taken.parked) setParkedOpen(true);
           const key = sessionKey(taken);
+          deliberateFocusRef.current = key;
           setFocusedKey(key);
           if (visible) {
             const idx = navIndexByKey.get(key);
@@ -2746,6 +2794,7 @@ export const SessionSwitcher = ({
       // The id is minted server-side now; the display name is what the user
       // typed. Keys ride on the id, labels on the name.
       onFocusSession?.({ name: data.displayName || data.name, displayName: data.displayName || data.name, active: false, starting: true, internalName: data.internalName || data.name });
+      deliberateFocusRef.current = data.internalName || data.name;
       setFocusedKey(data.internalName || data.name);
       onRefresh();
     } catch {
@@ -2831,7 +2880,13 @@ export const SessionSwitcher = ({
     // producing output RIGHT NOW glows instead of jumping to the top.
     // Window comfortably exceeds the 10s relative-time tick so a busy
     // session's glow holds steady rather than flickering between polls.
-    const activeNow = !current && now - (s.lastActivityAt || 0) < 12000;
+    // Agent sessions wear their PHASE (working / done / read) instead of the
+    // generic "output right now" ring: the daemon's verdict is the sharper
+    // signal, and two rings on one card were unreadable.
+    const phase = cardPhase(s);
+    const activeNow = !current && !phase && now - (s.lastActivityAt || 0) < 12000;
+    // A question waiting on you is the card's colour too (amber), over the phase.
+    const needsYou = s.attentionReason === "ask" || waitingOnUser(preview);
     // Freshness: recency the eye can read WITHOUT the row moving. A left-edge
     // bar whose intensity decays from full (just active) to nothing over
     // ~10 minutes — bright means "just now", faint means "a while ago",
@@ -2852,7 +2907,7 @@ export const SessionSwitcher = ({
         tabIndex={0}
         data-nav-index={navIndexByKey.get(key)}
         data-session-key={key}
-        className={`switcher-card${current ? " current" : ""}${activeNow ? " active-now" : ""}${kbdSelected ? " kbd-selected" : ""}${focusedKey === key ? " focused" : ""}${dragKey === key ? " dragging" : ""}${draggable ? " draggable" : ""}${fileDropKey === key ? " file-drop" : ""}`}
+        className={`switcher-card${current ? " current" : ""}${activeNow ? " active-now" : ""}${phase ? ` phase-${phase}` : ""}${needsYou ? " needs-you" : ""}${kbdSelected ? " kbd-selected" : ""}${focusedKey === key ? " focused" : ""}${dragKey === key ? " dragging" : ""}${draggable ? " draggable" : ""}${fileDropKey === key ? " file-drop" : ""}`}
         draggable={draggable}
         onDragStart={draggable ? (e) => { setDragKey(key); e.dataTransfer.effectAllowed = "move"; } : undefined}
         onDragEnter={draggable ? () => { if (dragKey && dragKey !== key) moveManual(dragKey, key); } : undefined}
@@ -2941,6 +2996,11 @@ export const SessionSwitcher = ({
             </span>
           )}
           {!current && s.starting && !s.active && <span className="switcher-chip starting">STARTING</span>}
+          {phase && (
+            <span className={`switcher-chip phase ${phase}`} title={phaseTitle(phase)}>
+              <span className="phase-dot" aria-hidden="true" />{phaseLabel(phase)}
+            </span>
+          )}
           {/* A result waiting on this session is worth as much as its status:
               a published PDF or write-up was otherwise invisible from the wall.
               stopPropagation on pointerdown keeps the long-press sheet out of
@@ -2976,7 +3036,9 @@ export const SessionSwitcher = ({
               userName={userName || "user"}
               theme={terminalTheme}
               live={focusedKey === key}
+              deliberate={deliberateFocusRef.current === key}
               claudeApp={appLabel(s) === "claude"}
+              codexApp={appLabel(s) === "codex"}
               claimSize={s.hasLocalCli !== true}
               activeCols={preview?.cols}
               activeRows={preview?.rows}

package/hay/apps/web/src/components/ViewsPanel.tsx

@@ -60,8 +60,10 @@ type Props = {
   // Only used to translate internalName into the name the user renamed it to;
   // the manifest has no idea a session was ever renamed.
   sessions?: { name: string; displayName?: string; internalName?: string }[];
-  // Right-side dock beside a live terminal (full-screen mode). Falls back to
-  // the modal below ~1100px, where a dock would leave no terminal to see.
+  // Right-side dock beside a live terminal. Off by default everywhere now:
+  // the reader opens as the CENTERED window, index beside page — a dock at
+  // the screen's edge was farther from where the eye already is. The dock
+  // stays available for a caller that wants it.
   dock?: boolean;
   onClose: () => void;
 };

package/hay/apps/web/src/styles.css

@@ -2249,8 +2249,18 @@ button.primary {
   .switcher-card.active-now .switcher-card-fresh { animation: none; }
 }
 
-.switcher-card.current {
-  border-color: var(--accent);
+/* CURRENT and FOCUSED used to paint the whole frame purple, which made
+   purple the loudest colour on the wall — and purple says nothing about
+   the session. The frame and the wash now belong to STATUS (see the
+   phase/needs-you rules below); current is a purple bar along the top
+   edge plus its chip, focused a thin purple outline. */
+.switcher-card.current::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 3px;
+  background: var(--accent);
+  pointer-events: none;
 }
 
 /* The wall's order freezes while open — a session producing output RIGHT NOW
@@ -2971,7 +2981,6 @@ button.primary {
 .switcher-row.kbd-selected {
   outline: 2px solid var(--accent);
   outline-offset: -2px;
-  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
 }
 
 /* AI tagline (hop ai tagline): what this session is working on, in words the
@@ -3185,7 +3194,8 @@ button.primary {
 }
 
 .switcher-card.focused {
-  border-color: var(--accent);
+  outline: 1px solid var(--accent);
+  outline-offset: -1px;
 }
 
 @media (min-width: 769px) {
@@ -3795,6 +3805,65 @@ body.pane-dragging { user-select: none; }
   color: #1a1200;
 }
 
+/* The agent's phase, the wall's three colours (utils/agentPhase.ts):
+   WORKING blue, DONE (unread) green, READ quiet. Purple stays "current /
+   focused", amber stays "asking you", so no two signals share a hue. */
+.switcher-chip.phase {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.switcher-chip.phase .phase-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.switcher-chip.phase.working {
+  background: color-mix(in srgb, #3b82f6 22%, var(--bg-alt));
+  color: #3b82f6;
+}
+.switcher-chip.phase.working .phase-dot {
+  animation: phase-working-pulse 1.2s ease-in-out infinite;
+}
+@keyframes phase-working-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.35; transform: scale(0.7); }
+}
+.switcher-chip.phase.done-unread {
+  background: #22a06b;
+  color: #04170d;
+}
+.switcher-chip.phase.done-read {
+  background: var(--bg-alt);
+  color: var(--ink-muted);
+}
+@media (prefers-reduced-motion: reduce) {
+  .switcher-chip.phase.working .phase-dot { animation: none; }
+}
+/* STATUS owns the card's colour: the frame, a wash over the whole card and
+   a soft ring, all in one hue — blue working, green finished-and-unread,
+   amber asking you (wins over the phase: a question is the more urgent
+   fact). A read session goes quiet. Purple is reserved for "you are here". */
+.switcher-card.phase-working { --status: #3b82f6; }
+.switcher-card.phase-done-unread { --status: #22a06b; }
+.switcher-card.needs-you { --status: var(--warn); }
+.switcher-card.phase-working,
+.switcher-card.phase-done-unread,
+.switcher-card.needs-you {
+  border-color: var(--status);
+  background: color-mix(in srgb, var(--status) 9%, var(--panel));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status) 35%, transparent), 0 0 14px -3px color-mix(in srgb, var(--status) 45%, transparent);
+}
+.switcher-card.phase-done-read {
+  opacity: 0.88;
+}
+.switcher-card.phase-done-read.current,
+.switcher-card.phase-done-read.focused,
+.switcher-card.phase-done-read:hover {
+  opacity: 1;
+}
+
 /* Colour-preview rows. Inline spans paint their background only over the
    glyph box, and at line-height 1.3 the half-leading above and below stayed
    the tile's background — code blocks rendered as horizontal stripes with a

package/hay/apps/web/src/utils/agentPhase.ts

@@ -0,0 +1,26 @@
+// The wall's three agent colours, from the daemon's verdict. The daemon
+// decides working / done and whether a human has opened the session since
+// the turn ended (its seen witness counts every device), so the web wall and
+// the phone paint the same session the same colour.
+//
+//   working      blue   a turn is in flight
+//   done-unread  green  finished; nobody has opened it since
+//   done-read    quiet  finished, and looked at
+//
+// A question the agent is asking (attentionReason "ask") keeps its own amber
+// signal on top; it is not folded in here.
+export type CardPhase = "working" | "done-unread" | "done-read" | null;
+
+export const cardPhase = (s: { agentPhase?: "working" | "done" | null; turnSeen?: boolean }): CardPhase => {
+  if (s.agentPhase === "working") return "working";
+  if (s.agentPhase === "done") return s.turnSeen === false ? "done-unread" : "done-read";
+  return null;
+};
+
+export const phaseLabel = (p: CardPhase): string =>
+  p === "working" ? "WORKING" : p === "done-unread" ? "DONE" : p === "done-read" ? "READ" : "";
+
+export const phaseTitle = (p: CardPhase): string =>
+  p === "working" ? "The agent is working on a turn"
+    : p === "done-unread" ? "The agent finished — you have not opened this session since"
+    : p === "done-read" ? "The agent finished, and you have looked" : "";

package/hay/apps/web/src/utils/dragSelect.ts

@@ -0,0 +1,100 @@
+// Drag to select in an AGENT session, even while the app has mouse tracking on.
+//
+// Claude Code and Codex both enable mouse tracking (for the wheel), and
+// xterm then hands every drag to the app instead of selecting. On a Mac
+// xterm offers no rescue gesture by default: Shift is ignored there, and
+// ⌥-drag needs an option nobody sets. So "I selected text and ⌘C copied
+// nothing" was really "nothing was ever selected" — the drag went to Claude,
+// which does nothing with it.
+//
+// Neither agent uses clicks or drags, only the wheel. So while the pointer
+// is down for a plain left drag on an agent surface, tracking is switched
+// off LOCALLY (xterm's protocol state is local anyway — the app is never
+// told), the drag selects, and the protocol is put back on release. The
+// wheel still reaches the app between drags. Other TUIs (vim, htop, tmux
+// with the mouse on) keep their drags: the gate is the agent surface, not
+// the tracking mode.
+
+export type TrackingTerminal = {
+  modes: { mouseTrackingMode: string };
+  hasSelection: () => boolean;
+  onSelectionChange: (cb: () => void) => { dispose: () => void };
+  _core?: { coreMouseService?: { activeProtocol: string } };
+};
+
+/** A plain left press on an agent surface while the app tracks the mouse. */
+export const shouldSelectLocally = (o: {
+  button: number;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  trackingMode: string;
+  agentSurface: boolean;
+}): boolean =>
+  o.button === 0 && !o.metaKey && !o.ctrlKey && o.trackingMode !== "none" && o.agentSurface;
+
+/**
+ * Installs the capture-phase mousedown that pauses tracking for the drag.
+ * Tracking stays paused for as long as the selection it produced exists:
+ * xterm DISABLES its selection service when a protocol comes back on, and
+ * disabling clears the selection — restoring on release wiped the very
+ * text the drag had just selected (so ⌘C copied nothing). The selection
+ * clears on the next keypress or a click elsewhere, and tracking returns
+ * then. Returns the uninstaller. `agentSurface` is consulted at press time,
+ * so a session that stops being an agent session (shell after `exit`) gets
+ * its drags forwarded again.
+ */
+export const installDragSelect = (
+  terminal: TrackingTerminal,
+  element: HTMLElement,
+  agentSurface: () => boolean
+): (() => void) => {
+  let paused: { prev: string; sub: { dispose: () => void } | null } | null = null;
+  const mouse = () => terminal._core?.coreMouseService;
+  const resume = () => {
+    if (!paused) return;
+    const { prev, sub } = paused;
+    paused = null;
+    sub?.dispose();
+    const m = mouse();
+    // Put it back only if nothing else changed it meanwhile (the app
+    // switching tracking off during the pause is its own decision).
+    try { if (m && m.activeProtocol === "NONE") m.activeProtocol = prev; } catch { /* gone */ }
+  };
+  const onUp = () => {
+    if (!paused) return;
+    let has = false;
+    try { has = terminal.hasSelection(); } catch { has = false; }
+    if (!has) { resume(); return; }
+    if (!paused.sub) {
+      paused.sub = terminal.onSelectionChange(() => {
+        let still = false;
+        try { still = terminal.hasSelection(); } catch { still = false; }
+        if (!still) resume();
+      });
+    }
+  };
+  const onDown = (ev: MouseEvent) => {
+    const m = mouse();
+    if (!m) return;
+    let trackingMode = "none";
+    try { trackingMode = terminal.modes.mouseTrackingMode; } catch { return; }
+    const local = shouldSelectLocally({ button: ev.button, metaKey: ev.metaKey, ctrlKey: ev.ctrlKey, trackingMode, agentSurface: agentSurface() });
+    if (paused) {
+      // Already paused for a standing selection: another selecting press
+      // just replaces it; any other press hands the mouse back first.
+      if (!local) resume();
+      return;
+    }
+    if (!local) return;
+    const prev = m.activeProtocol;
+    try { m.activeProtocol = "NONE"; } catch { return; }
+    paused = { prev, sub: null };
+  };
+  element.addEventListener("mousedown", onDown, true);
+  window.addEventListener("mouseup", onUp, true);
+  return () => {
+    element.removeEventListener("mousedown", onDown, true);
+    window.removeEventListener("mouseup", onUp, true);
+    resume();
+  };
+};

package/hay/apps/web/src/utils/sizeClaim.ts

@@ -56,3 +56,36 @@ export const isPlainClick = (
   if (!down) return true;
   return Math.hypot(up.x - down.x, up.y - down.y) <= slopPx;
 };
+
+/**
+ * CLOSE ENOUGH is the right size. A tile that renders the session scaled
+ * by ~0.9 is visually free; a claim is for sizes that are genuinely
+ * foreign (a full-screen leftover on a wall tile), not for two walls
+ * disagreeing about rounding — that disagreement, claimed, was two
+ * browsers re-sizing every session back and forth on every open.
+ */
+export const sizeIsForeign = (current: Size, natural: Size): boolean => {
+  const closeCols = Math.abs(current.cols - natural.cols) <= Math.max(3, Math.round(natural.cols * 0.15));
+  const closeRows = Math.abs(current.rows - natural.rows) <= Math.max(2, Math.round(natural.rows * 0.15));
+  return !(closeCols && closeRows);
+};
+
+/**
+ * A wall tile going live because the human ENGAGED it — a click, Enter,
+ * starting or creating a session there — is the same act as opening a
+ * session full screen, and takes the size the same way: only when what the
+ * session is wearing is foreign to the tile. The wall pre-focusing the
+ * current session as it opens is not an act (nobody clicked), and a tile
+ * that already fits has nothing to claim — a claim there would be a resize
+ * on every wall open, the fight the size-ownership rules exist to end.
+ */
+export const claimOnTileFocus = (o: {
+  deliberate: boolean;
+  natural: Size | null;
+  current: Size | null;
+}): boolean => {
+  if (!o.deliberate || !o.natural) return false;
+  if (o.natural.cols < 20 || o.natural.rows < 5) return false;
+  if (!o.current) return true;
+  return sizeIsForeign(o.current, o.natural);
+};