hop2 0.11.7 → 0.11.8

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

@@ -1102,11 +1102,43 @@ const App = () => {
     const t = termRef.current;
     if (!t) return;
     try {
+      // refresh() alone re-renders from the SAME GPU texture atlas, so it
+      // cannot fix the failure people actually hit: cells that draw blank
+      // because their glyphs are missing or stale in the atlas (font-size
+      // changes and context restores are the usual triggers). Rebuild the
+      // atlas first — the theme-change path has always done this, and it is
+      // the local equivalent of what a scroll achieves by making the app
+      // repaint from scratch.
+      const withAtlas = t as unknown as { clearTextureAtlas?: () => void };
+      if (typeof withAtlas.clearTextureAtlas === "function") withAtlas.clearTextureAtlas();
       t.refresh(0, t.rows - 1);
     } catch { /* terminal disposed mid-flight */ }
   };
   const forceRepaintRef = useRef(forceRepaint);
   forceRepaintRef.current = forceRepaint;
+
+  // The explicit "redraw" — what a scroll does, on demand. Local half:
+  // rebuild the glyph atlas and repaint (forceRepaint). Remote half: when
+  // the app owns the mouse (claude, vim), send a net-zero wheel pair so the
+  // APP repaints from scratch — that remote repaint is the thing scrolling
+  // actually provides, and no amount of local refreshing can substitute for
+  // it when rows never arrived. Manual only: it injects input, so it must
+  // never run on a timer.
+  const redrawSession = () => {
+    forceRepaintRef.current();
+    const t = termRef.current;
+    if (!t || !remoteMouseReportingRef.current) return;
+    const col = 1 + Math.floor((t.cols || 2) / 2);
+    const row = 1 + Math.floor((t.rows || 2) / 2);
+    // Order matters: UP then DOWN ends where the view started. (Down first
+    // is a no-op at the bottom, and the up then leaves the app scrolled.)
+    const pair = remoteMouseSgrRef.current
+      ? `\x1b[<64;${col};${row}M\x1b[<65;${col};${row}M`
+      : "";
+    if (pair) handleUserInputRef.current?.(pair);
+  };
+  const redrawSessionRef = useRef(redrawSession);
+  redrawSessionRef.current = redrawSession;
   // Mirror of the switcher-open state for callbacks that outlive a render.
   const switcherOpenRef = useRef(false);
   switcherOpenRef.current = switcherOpen;
@@ -3697,6 +3729,17 @@ const App = () => {
                         : "Locked"}
                 </span>
               </div>
+              <div className="drawer-row">
+                <label>Redraw</label>
+                <button
+                  type="button"
+                  className="quick-btn"
+                  title="Repaint the screen — rebuilds local glyphs and, in apps like Claude, asks the app itself to repaint (what a scroll does)"
+                  onClick={() => redrawSessionRef.current()}
+                >
+                  Redraw screen
+                </button>
+              </div>
               <div className="drawer-row">
                 <label>Typing</label>
                 <div className="view-mode-buttons">
@@ -3942,6 +3985,15 @@ const App = () => {
                           {isMacPlatform ? "⌘/" : "Ctrl+Shift+/"} keys
                         </button>
                       )}
+                      <button
+                        type="button"
+                        className="footer-find-toggle"
+                        aria-label="Redraw the screen"
+                        title="Repaint the screen — rebuilds local glyphs and, in apps like Claude, asks the app itself to repaint (what a scroll does)"
+                        onClick={() => redrawSessionRef.current()}
+                      >
+                        redraw
+                      </button>
                       <span title={sortedPresence.map((c) => c.name).join(", ")}>
                         {(() => {
                           // Someone else typing is the fact worth surfacing —

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

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import type { SwitcherSession } from "../utils/switcherModel";
+
+// The briefing, on the desktop wall — the same digest.json the iOS app
+// renders, written by the host-side agent (hop-ios tools/digest.mjs) into the
+// directory the daemon serves under /assets/. This card is deliberately
+// self-contained: one fetch, localStorage for dismissed/read state, no new
+// endpoints, and the same reading contract as the phone — the summary is the
+// headline, every story shows in full under its session DATELINE, unread
+// stories carry a dot that opening clears.
+
+type DigestItem = {
+  session: string;
+  headline: string;
+  why?: string;
+  urgency?: string;
+};
+
+type Digest = {
+  generated_at?: string;
+  summary?: string;
+  items?: DigestItem[];
+};
+
+const READ_KEY = "hop_digest_read";        // "<stamp>|a,b,c" — self-pruning
+const DISMISS_KEY = "hop_digest_dismissed"; // "<stamp>"
+
+const readSet = (stamp: string): Set<string> => {
+  try {
+    const raw = localStorage.getItem(READ_KEY) || "";
+    const [s, list] = raw.split("|");
+    if (s !== stamp || !list) return new Set();
+    return new Set(list.split(",").filter(Boolean));
+  } catch { return new Set(); }
+};
+
+const urgencyClass = (u?: string) =>
+  u === "needs-you" ? "needs" : u === "blocked" ? "blocked" : u === "finished" ? "done" : "fyi";
+
+export const DigestCard = ({ sessions, onOpen }: {
+  sessions: SwitcherSession[];
+  onOpen: (session: SwitcherSession) => void;
+}) => {
+  const [digest, setDigest] = useState<Digest | null>(null);
+  const [dismissed, setDismissed] = useState(() => {
+    try { return localStorage.getItem(DISMISS_KEY) || ""; } catch { return ""; }
+  });
+  const [read, setRead] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    let cancelled = false;
+    const load = () => {
+      fetch("/assets/digest.json", { cache: "no-store" })
+        .then((r) => (r.ok ? r.json() : null))
+        .then((d: Digest | null) => {
+          if (cancelled || !d?.summary) return;
+          setDigest(d);
+          setRead(readSet(d.generated_at || ""));
+        })
+        .catch(() => { /* absent is the normal state until the job runs */ });
+    };
+    load();
+    // A briefing written while this tab sat open should appear on return.
+    const onVis = () => { if (!document.hidden) load(); };
+    document.addEventListener("visibilitychange", onVis);
+    return () => { cancelled = true; document.removeEventListener("visibilitychange", onVis); };
+  }, []);
+
+  if (!digest?.summary) return null;
+  const stamp = digest.generated_at || "";
+  if (dismissed === stamp) return null;
+  const items = digest.items || [];
+
+  const markRead = (session: string) => {
+    const next = new Set(read);
+    next.add(session);
+    setRead(next);
+    try { localStorage.setItem(READ_KEY, stamp + "|" + [...next].sort().join(",")); } catch { /* private mode */ }
+  };
+
+  // The daemon folds case when a name addresses a session; match it.
+  const find = (internalName: string) =>
+    sessions.find((s) => (s.internalName || s.name) === internalName)
+      || sessions.find((s) => (s.internalName || s.name).toLowerCase() === internalName.toLowerCase());
+
+  return (
+    <div className="digest-card">
+      <div className="digest-head">
+        <span className="digest-badge">✦ Briefing</span>
+        <button className="digest-dismiss" title="Dismiss briefing"
+          onClick={() => { setDismissed(stamp); try { localStorage.setItem(DISMISS_KEY, stamp); } catch { /* ok */ } }}>
+          ×
+        </button>
+      </div>
+      <div className="digest-summary">{digest.summary}</div>
+      {items.map((item) => {
+        const target = find(item.session);
+        const name = target ? (target.displayName || target.name) : item.session;
+        return (
+          <button
+            key={item.session + item.headline}
+            className={"digest-item " + urgencyClass(item.urgency) + (read.has(item.session) ? " read" : "")}
+            onClick={() => {
+              markRead(item.session);
+              if (target) onOpen(target);
+            }}
+          >
+            <span className="digest-dateline">
+              {!read.has(item.session) && <span className="digest-dot" />}
+              {name}
+            </span>
+            <span className="digest-headline">{item.headline}</span>
+            {item.why ? <span className="digest-why">{item.why}</span> : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+};

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

@@ -27,6 +27,7 @@ import {
   type SwitcherSortMode
 } from "../utils/switcherModel";
 import { scanKeyboardProtocol } from "../utils/keyboardProtocol";
+import { DigestCard } from "./DigestCard";
 
 // Full-screen, in-app session switcher (mobile-first). Hot sessions — current,
 // attention, most recent — are preview cards; the tail is compact rows grouped
@@ -483,6 +484,14 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       const wanted = tileFontFor(boxW);
       if (Math.abs(wanted - font) >= 0.25) {
         term.options.fontSize = wanted;
+        // A font-size change invalidates the GPU glyph atlas. Without an
+        // explicit rebuild, already-drawn cells can keep pointing at stale
+        // slots and paint BLANK until something forces re-rasterisation —
+        // which is exactly the "renders wrong until I scroll" report, and
+        // why a plain refresh() never cured it. The wall changes font size
+        // on every zoom and resize, so this is the hottest trigger there is.
+        const withAtlas = term as unknown as { clearTextureAtlas?: () => void };
+        if (typeof withAtlas.clearTextureAtlas === "function") withAtlas.clearTextureAtlas();
         requestAnimationFrame(() => rescaleRef.current());
         return;
       }
@@ -1584,31 +1593,33 @@ export const SessionSwitcher = ({
     flatNav.forEach((s, i) => m.set(sessionKey(s), i));
     return m;
   }, [flatNav]);
-  // Opening the wall focuses the session the app is ON. A deep link like
-  // /s/<name>/?view=wall names a session, so landing on the wall with
-  // nothing focused (and the keyboard sitting on the FIRST card) loses the
-  // one thing the URL asked for. The old name works too — the room id is
-  // the internal name, so a renamed session still resolves. This is not an
-  // "accidental" focus: arriving here is the user's explicit act, and it
-  // focuses in place rather than entering full screen.
+  // Opening the wall focuses the session the app is ON — once. A deep link
+  // like /s/<name>/?view=wall names a session, so landing with nothing
+  // focused loses what the URL asked for.
+  //
+  // ONCE is load-bearing: flatNav changes on every filter keystroke, so an
+  // unguarded effect re-anchored the selection to the current session while
+  // you typed — and ⌘⏎ then opened THAT instead of the match you were
+  // looking at. Filtering owns the selection (top match); this only seeds it.
+  const initialFocusDoneRef = useRef(false);
+  useEffect(() => { if (!open) initialFocusDoneRef.current = false; }, [open]);
   useEffect(() => {
     if (!open || focusedKey || !currentRoom) return;
+    if (initialFocusDoneRef.current || filter) return;
     const current = flatNav.find((s) => (s.internalName || s.name) === currentRoom || s.name === currentRoom);
     if (!current) return;
+    initialFocusDoneRef.current = true;
     const key = sessionKey(current);
     setFocusedKey(key);
     const idx = navIndexByKey.get(key);
     if (typeof idx === "number") {
       setKbdIndex(idx);
-      // ...and bring it into view. A deep link can name a session sitting
-      // far down a long wall; focusing a card the user cannot see is the
-      // same as not focusing it. Deferred a frame so the card exists.
       requestAnimationFrame(() => {
         document.querySelector(`[data-nav-index="${idx}"]`)?.scrollIntoView({ block: "center" });
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentRoom, flatNav, navIndexByKey]);
+  }, [open, currentRoom, flatNav, navIndexByKey, filter, focusedKey]);
   // Latest visual order, for reorderManual (defined earlier in the component).
   // Every session in the current scope, in manual order — the canonical list
   // reordering works against, regardless of what the filter is showing.
@@ -2657,6 +2668,12 @@ export const SessionSwitcher = ({
         )}
       </div>
       <div className="switcher-scroll" ref={scrollRef} onContextMenu={openWallMenu}>
+        {/* The host agent's briefing — same digest.json the phone renders.
+            Hidden while filtering: search is about one session, the briefing
+            is about the fleet. */}
+        {model.mode !== "filter" && (
+          <DigestCard sessions={sessions} onOpen={handleTap} />
+        )}
         {model.mode === "filter" ? (
           // Matches keep their terminal previews: search results are preview
           // cards at the current zoom, same as the wall — the screen content

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

@@ -3940,3 +3940,50 @@ button.primary {
   bottom: 30px;
   max-width: 86%;
 }
+
+/* ── The briefing (DigestCard): the host agent's front page, above the wall.
+   Same reading contract as the phone: summary is the headline, stories show
+   in full under session datelines, unread carries a dot. ── */
+.digest-card {
+  margin: 10px 12px 4px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--panel) 92%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent, #7c5cff) 22%, transparent);
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+.digest-head { display: flex; align-items: center; justify-content: space-between; }
+.digest-badge {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
+  color: var(--accent, #7c5cff);
+}
+.digest-dismiss {
+  border: none; background: none; cursor: pointer;
+  color: var(--ink-muted); font-size: 14px; line-height: 1; padding: 2px 4px;
+}
+.digest-summary { font-size: 13.5px; font-weight: 550; color: var(--ink); }
+.digest-item {
+  display: flex; flex-direction: column; gap: 2px;
+  text-align: left; border: none; background: none; cursor: pointer;
+  padding: 5px 6px; margin: 0 -6px; border-radius: 8px;
+}
+.digest-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
+.digest-dateline {
+  font-family: var(--font-mono);
+  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.05em;
+  display: inline-flex; align-items: center; gap: 5px;
+}
+.digest-item.needs .digest-dateline { color: #e5484d; }
+.digest-item.blocked .digest-dateline { color: #e79d13; }
+.digest-item.done .digest-dateline { color: #30a46c; }
+.digest-item.fyi .digest-dateline { color: var(--ink-muted); }
+.digest-dot {
+  width: 6px; height: 6px; border-radius: 3px;
+  background: var(--accent, #7c5cff);
+}
+.digest-headline { font-size: 12.5px; font-weight: 600; color: var(--ink); }
+.digest-item.read .digest-headline { color: var(--ink-muted); font-weight: 500; }
+.digest-why { font-size: 11.5px; color: var(--ink-muted); }