hop2 0.11.66 → 0.11.67

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

@@ -24,6 +24,7 @@ import { originalPathHint, pasteableUploadPaths } from "./utils/fileDrop";
 import { claimOnAttach, claimOnClick, isPlainClick } from "./utils/sizeClaim";
 import { installDragSelect } from "./utils/dragSelect";
 import { enableViewBlocks } from "./utils/viewBlocks";
+import { CheckbacksPanel } from "./components/CheckbacksPanel";
 import { MobileKeyboard } from "./components/MobileKeyboard";
 import { SessionSwitcher } from "./components/SessionSwitcher";
 import { SecondaryPane } from "./components/SecondaryPane";
@@ -710,6 +711,8 @@ const App = () => {
   // Published views (`hop view`). `session` scopes the panel to one session;
   // an object with none open it fleet-wide. Null = closed.
   const [viewsOpen, setViewsOpen] = useState<{ session?: string; dock?: boolean; item?: string } | null>(null);
+  // The ⏰ chip's window: what is waiting on a session.
+  const [checkbacksOpen, setCheckbacksOpen] = useState<string | null>(null);
   const sessionsRef = useRef(sessions);
   sessionsRef.current = sessions;
   // Claude Code titles its process with a bare version number; hop's session
@@ -3497,9 +3500,18 @@ const App = () => {
   // lands full-screen in the terminal you were just typing in. State-only:
   // while the wall is open the full-screen socket stays down (one client per
   // tab); the wall-close deliberate attach performs the actual connect.
+  // Opening a session IS reading it. The daemon's seen witness says so on
+  // the next poll (≤5s); the card should not wait for it — mark the turn
+  // read locally now, and poll soon so the daemon's own verdict replaces
+  // the local one.
+  const markTurnSeenLocally = (key: string) => {
+    setSessions((prev) => prev.map((s) => ((s.internalName || s.name) === key && s.turnSeen === false ? { ...s, turnSeen: true } : s)));
+    window.setTimeout(() => { void fetchSessions({ showLoading: false }); }, 900);
+  };
   const focusSessionInPlace = (nextSession: SessionInfo) => {
     const targetRoom = nextSession.internalName || nextSession.name;
     if ((session?.room ?? null) === targetRoom) return;
+    markTurnSeenLocally(targetRoom);
     const markers = loadSeenMarkers();
     markers[targetRoom] = { out: nextSession.lastActivityAt || 0, bell: nextSession.bellSeq || 0 };
     saveSeenMarkers(markers);
@@ -3519,6 +3531,7 @@ const App = () => {
   };
 
   const switchSession = (nextSession: SessionInfo) => {
+    markTurnSeenLocally(nextSession.internalName || nextSession.name);
     const targetRoom = nextSession.internalName || nextSession.name;
     const nextPath = buildSessionPath(targetRoom);
     const currentRoom = session?.room ?? sessionLabel;
@@ -4300,6 +4313,7 @@ const App = () => {
             onNotice={showToast}
             tileWsBase={resolveWsUrl()}
             onOpenViews={(scope, item) => setViewsOpen({ session: scope, item })}
+            onOpenCheckbacks={(scope) => setCheckbacksOpen(scope)}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
           />
@@ -4964,6 +4978,7 @@ const App = () => {
             onFocusSession={focusSessionInPlace}
             folders={folders}
             onOpenViews={(scope, item) => setViewsOpen({ session: scope, item })}
+            onOpenCheckbacks={(scope) => setCheckbacksOpen(scope)}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
             onOpenSettings={() => {
@@ -5106,6 +5121,14 @@ const App = () => {
       )}
       {/* Outside the mode ternary on purpose: Views opens from the hub, from a
           session, and from over the switcher, and it must outlive a switch. */}
+      {checkbacksOpen && (
+        <CheckbacksPanel
+          session={checkbacksOpen}
+          sessionName={sessions.find((s) => (s.internalName || s.name) === checkbacksOpen)?.displayName || checkbacksOpen}
+          onClose={() => setCheckbacksOpen(null)}
+          onChanged={() => { void fetchSessions({ showLoading: false }); }}
+        />
+      )}
       {viewsOpen && (
         <ViewsPanel session={viewsOpen.session} item={viewsOpen.item} sessions={sessions} dock={viewsOpen.dock}
                     onClose={() => setViewsOpen(null)} />

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

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { describeState, describeTrigger, orderForSession, type Checkback } from "../utils/checkbackText";
+
+// What is waiting on a session: the check-backs hop will type into it, when,
+// and the recent ones it already typed. Opened from the ⏰ chip on a card.
+// Pending ones can be cancelled here; scheduling stays with `hop checkback`
+// and the agent's own MCP tool.
+
+type Props = {
+  session: string;
+  sessionName: string;
+  onClose: () => void;
+  // The wall's chip count comes from the session list; a cancel here should
+  // show there without waiting for the next poll.
+  onChanged?: () => void;
+};
+
+export const CheckbacksPanel = ({ session, sessionName, onClose, onChanged }: Props) => {
+  const [items, setItems] = useState<Checkback[] | null>(null);
+  const [failed, setFailed] = useState(false);
+  const [busy, setBusy] = useState<string | null>(null);
+  const now = Date.now();
+
+  const load = () => {
+    fetch("/api/checkbacks", { cache: "no-store" })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
+      .then((d) => { setItems(Array.isArray(d?.items) ? d.items : []); setFailed(false); })
+      .catch(() => { setFailed(true); setItems([]); });
+  };
+  useEffect(() => { load(); }, [session]);
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onClose(); } };
+    window.addEventListener("keydown", onKey, true);
+    return () => window.removeEventListener("keydown", onKey, true);
+  }, [onClose]);
+
+  const cancel = async (id: string) => {
+    setBusy(id);
+    try {
+      await fetch("/api/checkbacks/cancel", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }) });
+    } finally {
+      setBusy(null);
+      load();
+      onChanged?.();
+    }
+  };
+
+  const rows = items ? orderForSession(items, session) : [];
+  const pending = rows.filter((c) => c.status === "pending");
+  const past = rows.filter((c) => c.status !== "pending").slice(0, 8);
+
+  return (
+    <>
+      <div className="views-backdrop" onClick={onClose} />
+      <div className="views-panel checkbacks-panel" role="dialog" aria-label={`Check-backs for ${sessionName}`}>
+        <div className="views-head">
+          <span className="views-badge">⏰ Check-backs</span>
+          <span className="checkbacks-session">{sessionName}</span>
+          <span className="views-head-spacer" />
+          <button type="button" className="views-close" aria-label="Close" onClick={onClose}>×</button>
+        </div>
+        {items === null ? (
+          <p className="checkbacks-empty">Loading…</p>
+        ) : failed ? (
+          <p className="checkbacks-empty">Could not load check-backs.</p>
+        ) : (
+          <div className="checkbacks-list">
+            {pending.length === 0 && <p className="checkbacks-empty">Nothing waiting on this session.</p>}
+            {pending.map((c) => (
+              <div key={c.id} className={"checkback-row pending" + (c.firedAt ? " fired" : "")}>
+                <div className="checkback-when">{describeTrigger(c.trigger, now)}{c.force ? " · typed even mid-turn" : ""}</div>
+                <div className="checkback-message">{c.message}</div>
+                <div className="checkback-foot">
+                  <span className="checkback-state">{describeState(c, now)} · by {c.createdBy === "agent" ? "the agent" : "you"}</span>
+                  <button type="button" className="checkback-cancel" disabled={busy === c.id} onClick={() => cancel(c.id)}>Cancel</button>
+                </div>
+              </div>
+            ))}
+            {past.length > 0 && (
+              <>
+                <div className="checkbacks-past-head">Recent</div>
+                {past.map((c) => (
+                  <div key={c.id} className={"checkback-row " + c.status}>
+                    <div className="checkback-when">{describeState(c, now)} · {describeTrigger(c.trigger, now)}</div>
+                    <div className="checkback-message">{c.message}</div>
+                  </div>
+                ))}
+              </>
+            )}
+            <p className="checkbacks-hint">Schedule one with <code>hop checkback</code> inside the session, or the agent does it itself over MCP.</p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

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

@@ -118,6 +118,8 @@ type Props = {
   // Open the Views panel. No argument = the whole fleet (header button); an
   // internalName = just that session (a card's chip).
   onOpenViews?: (session?: string, item?: string) => void;
+  /** The ⏰ chip: what hop will type into this session, and when. */
+  onOpenCheckbacks?: (session: string) => void;
 };
 
 type Sheet = {
@@ -1282,7 +1284,8 @@ export const SessionSwitcher = ({
   onOpenSettings,
   onToggleKeyboard,
   onFind,
-  onOpenViews
+  onOpenViews,
+  onOpenCheckbacks
 }: Props) => {
   // View state survives a REFRESH but not a new tab: sessionStorage, not
   // localStorage. Reloading the page (or hop reconnecting) used to dump the
@@ -3007,9 +3010,16 @@ export const SessionSwitcher = ({
           )}
           {!current && s.starting && !s.active && <span className="switcher-chip starting">STARTING</span>}
           {!!s.checkbacks && (
-            <span className="switcher-chip checkback" title={`${s.checkbacks} scheduled check-back${s.checkbacks === 1 ? "" : "s"} will be typed into this session (hop checkback --list)`}>
+            <button
+              type="button"
+              className="switcher-chip checkback"
+              title={`${s.checkbacks} scheduled check-back${s.checkbacks === 1 ? "" : "s"} will be typed into this session — click to see what is waiting`}
+              aria-label={`${s.checkbacks} check-back${s.checkbacks === 1 ? "" : "s"} waiting on ${s.displayName}`}
+              onClick={(e) => { e.stopPropagation(); onOpenCheckbacks?.(key); }}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
               ⏰ {s.checkbacks}
-            </span>
+            </button>
           )}
           {phase && (
             <span className={`switcher-chip phase ${phase}`} title={phaseTitle(phase)}>

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

@@ -3878,7 +3878,28 @@ body.pane-dragging { user-select: none; }
   color: var(--ink);
   border: 1px solid var(--line);
   font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
 }
+.switcher-chip.checkback:hover { border-color: var(--accent); }
+/* The check-backs window (components/CheckbacksPanel.tsx). */
+.checkbacks-panel { width: min(560px, 92vw); max-height: min(78vh, 680px); }
+.checkbacks-session { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); }
+.checkbacks-list { overflow: auto; display: flex; flex-direction: column; gap: 8px; }
+.checkback-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel); }
+.checkback-row.pending { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
+.checkback-row.pending.fired { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
+.checkback-row.delivered, .checkback-row.cancelled { opacity: 0.72; }
+.checkback-when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
+.checkback-message { margin-top: 3px; font-size: 13px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
+.checkback-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
+.checkback-state { font-size: 11px; color: var(--ink-muted); }
+.checkback-cancel { font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-alt); color: var(--ink); cursor: pointer; }
+.checkback-cancel:hover { border-color: var(--err); color: var(--err); }
+.checkbacks-past-head { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-top: 4px; }
+.checkbacks-empty { color: var(--ink-muted); font-size: 13px; margin: 6px 2px; }
+.checkbacks-hint { color: var(--ink-muted); font-size: 11.5px; margin: 6px 2px 0; }
+.checkbacks-hint code { font-family: var(--font-mono); }
 .switcher-chip.phase.done-read {
   background: var(--bg-alt);
   color: var(--ink-muted);

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

@@ -0,0 +1,73 @@
+// Words for a check-back's trigger and state, as the daemon stores them
+// (lib/checkbacks.js). Shared by the wall's check-back window.
+
+export type CheckbackTrigger =
+  | { kind: "at"; at: number }
+  | { kind: "every"; everyMs: number; next: number; until?: number | null }
+  | { kind: "idle"; afterMs?: number }
+  | { kind: "file"; path: string; baselineMtime?: number | null }
+  | { kind: "cmd"; command: string; everyMs?: number };
+
+export type Checkback = {
+  id: string;
+  session: string;
+  sessionName?: string;
+  message: string;
+  trigger: CheckbackTrigger;
+  force?: boolean;
+  createdBy?: string;
+  createdAt?: number;
+  status: "pending" | "delivered" | "cancelled";
+  firedAt?: number | null;
+  deliveredAt?: number | null;
+  cancelledAt?: number | null;
+  deliveries?: number;
+  lastError?: string | null;
+};
+
+const MIN = 60_000, HOUR = 3_600_000, DAY = 86_400_000;
+
+/** "in 12m", "in 2.5h", "3m ago" — the distance from now, in the coarsest unit that reads. */
+export const relative = (ms: number, now: number): string => {
+  const d = ms - now;
+  const a = Math.abs(d);
+  const s = a < MIN ? `${Math.max(1, Math.round(a / 1000))}s` : a < HOUR ? `${Math.round(a / MIN)}m` : a < DAY ? `${(a / HOUR).toFixed(a < 10 * HOUR ? 1 : 0)}h` : `${(a / DAY).toFixed(1)}d`;
+  return d >= 0 ? `in ${s}` : `${s} ago`;
+};
+
+const clock = (ms: number): string => {
+  const d = new Date(ms);
+  const today = new Date().toDateString() === d.toDateString();
+  const time = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  return today ? time : `${d.toLocaleDateString([], { weekday: "short" })} ${time}`;
+};
+
+const period = (ms: number): string => (ms >= HOUR && ms % HOUR === 0 ? `${ms / HOUR}h` : ms >= HOUR ? `${(ms / HOUR).toFixed(1)}h` : `${Math.round(ms / MIN)}m`);
+
+/** One line saying WHEN it fires, in the reader's words. */
+export const describeTrigger = (t: CheckbackTrigger, now: number): string => {
+  switch (t.kind) {
+    case "at": return `at ${clock(t.at)} (${relative(t.at, now)})`;
+    case "every": return `every ${period(t.everyMs)} · next ${relative(t.next, now)}${t.until ? ` · until ${clock(t.until)}` : ""}`;
+    case "idle": return t.afterMs ? `when idle for ${period(t.afterMs)}` : "when the agent is next idle";
+    case "file": return `when ${t.path} ${t.baselineMtime ? "changes" : "exists"}`;
+    case "cmd": return `when \`${t.command}\` succeeds · checked every ${period(t.everyMs || MIN)}`;
+    default: return "";
+  }
+};
+
+/** The state line: waiting, fired and waiting for idle, delivered, cancelled. */
+export const describeState = (cb: Checkback, now: number): string => {
+  if (cb.status === "pending") return cb.firedAt ? "fired · waiting for the agent to be idle" : "waiting";
+  if (cb.status === "delivered") return `typed ${cb.deliveredAt ? relative(cb.deliveredAt, now) : ""}`.trim();
+  return `cancelled${cb.cancelledAt ? ` ${relative(cb.cancelledAt, now)}` : ""}`;
+};
+
+/** Pending first (soonest first), then the recent rest, newest first. */
+export const orderForSession = (items: Checkback[], session: string): Checkback[] => {
+  const mine = items.filter((c) => c.session === session);
+  const nextOf = (c: Checkback) => (c.trigger.kind === "at" ? c.trigger.at : c.trigger.kind === "every" ? c.trigger.next : Number.MAX_SAFE_INTEGER);
+  const pending = mine.filter((c) => c.status === "pending").sort((a, b) => nextOf(a) - nextOf(b));
+  const done = mine.filter((c) => c.status !== "pending").sort((a, b) => ((b.deliveredAt || b.cancelledAt || b.createdAt || 0) - (a.deliveredAt || a.cancelledAt || a.createdAt || 0)));
+  return [...pending, ...done];
+};

package/hay/apps/web/test/checkbackText.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { describeState, describeTrigger, orderForSession, relative, type Checkback } from "../src/utils/checkbackText";
+
+const NOW = Date.parse("2026-10-02T12:00:00Z");
+const M = 60_000, H = 3_600_000;
+
+describe("words for a check-back", () => {
+  it("relative distances read in the coarsest unit", () => {
+    expect(relative(NOW + 20_000, NOW)).toBe("in 20s");
+    expect(relative(NOW + 12 * M, NOW)).toBe("in 12m");
+    expect(relative(NOW + 2.5 * H, NOW)).toBe("in 2.5h");
+    expect(relative(NOW - 3 * M, NOW)).toBe("3m ago");
+  });
+  it("each trigger kind has a line", () => {
+    expect(describeTrigger({ kind: "every", everyMs: 2 * H, next: NOW + 30 * M }, NOW)).toBe("every 2h · next in 30m");
+    expect(describeTrigger({ kind: "idle" }, NOW)).toBe("when the agent is next idle");
+    expect(describeTrigger({ kind: "idle", afterMs: 15 * M }, NOW)).toBe("when idle for 15m");
+    expect(describeTrigger({ kind: "file", path: "/x/out.csv" }, NOW)).toBe("when /x/out.csv exists");
+    expect(describeTrigger({ kind: "file", path: "/x/out.csv", baselineMtime: 1 }, NOW)).toBe("when /x/out.csv changes");
+    expect(describeTrigger({ kind: "cmd", command: "test -f a", everyMs: 5 * M }, NOW)).toBe("when `test -f a` succeeds · checked every 5m");
+    expect(describeTrigger({ kind: "at", at: NOW + 10 * M }, NOW)).toMatch(/^at .* \(in 10m\)$/);
+  });
+  it("state lines", () => {
+    const base: Checkback = { id: "c", session: "s", message: "m", trigger: { kind: "idle" }, status: "pending" };
+    expect(describeState(base, NOW)).toBe("waiting");
+    expect(describeState({ ...base, firedAt: NOW }, NOW)).toBe("fired · waiting for the agent to be idle");
+    expect(describeState({ ...base, status: "delivered", deliveredAt: NOW - 5 * M }, NOW)).toBe("typed 5m ago");
+    expect(describeState({ ...base, status: "cancelled" }, NOW)).toBe("cancelled");
+  });
+  it("orders a session's check-backs: pending soonest first, then the recent rest newest first", () => {
+    const items: Checkback[] = [
+      { id: "1", session: "s", message: "a", trigger: { kind: "at", at: NOW + 2 * H }, status: "pending" },
+      { id: "2", session: "other", message: "x", trigger: { kind: "idle" }, status: "pending" },
+      { id: "3", session: "s", message: "b", trigger: { kind: "at", at: NOW + 10 * M }, status: "pending" },
+      { id: "4", session: "s", message: "c", trigger: { kind: "idle" }, status: "delivered", deliveredAt: NOW - H },
+      { id: "5", session: "s", message: "d", trigger: { kind: "idle" }, status: "cancelled", cancelledAt: NOW - 10 * M }
+    ];
+    expect(orderForSession(items, "s").map((c) => c.id)).toEqual(["3", "1", "5", "4"]);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hop2",
-  "version": "0.11.66",
+  "version": "0.11.67",
   "description": "🐰 Hop into your terminal from anywhere. Secure remote shell access with 2FA via Cloudflare Tunnel. Next-gen rewrite with native terminal sharing.",
   "main": "hop",
   "bin": {