hop2 0.11.79 → 0.11.81

package/hay/apps/server/src/rooms.ts

@@ -1226,7 +1226,7 @@ export class Room extends EventEmitter {
    * With a client attached, the real terminal answers and we stay silent.
    */
   private answerTerminalQueriesIfHeadless(data: string) {
-    if (this.clients.size > 0 || this.ended) return;
+    if (this.ended) return;
     if (data.indexOf("\x1b") === -1) return;
     let reply = "";
     // OSC 10/11: foreground / background color queries — answered with the
@@ -1234,12 +1234,29 @@ export class Room extends EventEmitter {
     // background (Claude Code picks light vs dark this way) matches what the
     // user is really looking at. Falls back to the dark default before any
     // client has ever attached.
+    //
+    // Answered even while browsers are attached: the web terminal swallows
+    // OSC 10/11 without replying, so "a client will answer" was never true
+    // for them, and a Codex started with a tile or a viewer open got no
+    // reply — it fell back to its dark palette and an unshaded input box
+    // (alphagenome, 2026-10-15). Only a local CLI attach sits in a real
+    // terminal that answers for itself.
+    const answersColors = [...this.clients.values()].some((client) => client.source === "local-cli");
     const osc = (n: number, hex: string) => {
       const p = (i: number) => hex.slice(i, i + 2).repeat(2);
       return `\x1b]${n};rgb:${p(0)}/${p(2)}/${p(4)}\x1b\\`;
     };
-    if (/\x1b\]10;\?(?:\x07|\x1b\\)/.test(data)) reply += osc(10, this.clientFg);
-    if (/\x1b\]11;\?(?:\x07|\x1b\\)/.test(data)) reply += osc(11, this.clientBg);
+    if (!answersColors) {
+      if (/\x1b\]10;\?(?:\x07|\x1b\\)/.test(data)) reply += osc(10, this.clientFg);
+      if (/\x1b\]11;\?(?:\x07|\x1b\\)/.test(data)) reply += osc(11, this.clientBg);
+    }
+    // The rest xterm.js answers itself, so only a room nobody watches does.
+    if (this.clients.size > 0) {
+      if (reply) {
+        try { this.pty.write(reply); } catch { /* pty gone */ }
+      }
+      return;
+    }
     // DA1: identify as a VT220-class terminal (matches xterm.js's own reply).
     if (/\x1b\[0?c/.test(data)) reply += "\x1b[?62;22c";
     // DSR 5 (status): "OK".

package/hay/apps/server/test/rooms.test.ts

@@ -647,7 +647,7 @@ describe("Room", () => {
   });
 
   describe("headless terminal-identity answers", () => {
-    it("answers color/DA/truecolor probes only while no client is attached", () => {
+    it("answers DA/truecolor probes only while no client is attached; colors whenever no real terminal is", () => {
       let ptyInstance: FakePty | null = null;
       const factory: PtyFactory = () => {
         ptyInstance = new FakePty() as unknown as FakePty;
@@ -663,9 +663,19 @@ describe("Room", () => {
       expect(answered).toContain("[?62;22c");
       expect(answered).toContain("P1+r524742");
 
-      // Attached: the real terminal answers; the room stays silent.
+      // A browser attached: xterm.js answers DA itself, but swallows OSC
+      // 10/11 without replying — the room still answers the color, or a
+      // Codex started under a viewer gets no reply and goes dark.
       room.attachClient({ id: "a", name: "Alex", colorIndex: 0, cols: 80, rows: 24 }, new FakeSocket());
       ptyInstance!.writes.length = 0;
+      ptyInstance!.emit("\x1b]11;?\x07 \x1b[0c");
+      const withBrowser = ptyInstance!.writes.join("");
+      expect(withBrowser).toContain("]11;rgb:0d0d/1111/1717");
+      expect(withBrowser).not.toContain("[?62;22c");
+
+      // A local CLI attach sits in a real terminal that answers for itself.
+      room.attachClient({ id: "c", name: "cli", colorIndex: 1, cols: 80, rows: 24, source: "local-cli" }, new FakeSocket());
+      ptyInstance!.writes.length = 0;
       ptyInstance!.emit("\x1b]11;?\x07");
       expect(ptyInstance!.writes.join("")).toBe("");
     });

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

@@ -276,6 +276,8 @@ type SessionInfo = {
   turnSeen?: boolean;
   // Scheduled check-backs waiting on this session (hop checkback).
   checkbacks?: number;
+  checkbackNext?: number;
+  codexAutomations?: number;
   attentionReason?: string;
   attentionNote?: string;
   cols?: number;
@@ -3301,6 +3303,8 @@ const App = () => {
           agentPhase: s.agentPhase === "working" || s.agentPhase === "done" ? s.agentPhase : null,
           turnSeen: s.turnSeen !== false,
           checkbacks: Number(s.checkbacks) > 0 ? Number(s.checkbacks) : undefined,
+          checkbackNext: Number(s.checkbackNext) > 0 ? Number(s.checkbackNext) : undefined,
+          codexAutomations: Number(s.codexAutomations) > 0 ? Number(s.codexAutomations) : undefined,
           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
@@ -4351,6 +4355,8 @@ const App = () => {
             onOpenCheckbacks={(scope) => setCheckbacksOpen(scope)}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
+            themeMode={themeMode}
+            onThemeChange={setThemeMode}
           />
           {toast && <div className="terminal-toast" role="status" aria-live="polite">{toast}</div>}
         </main>
@@ -5016,6 +5022,8 @@ const App = () => {
             onOpenCheckbacks={(scope) => setCheckbacksOpen(scope)}
             userName={name}
             terminalTheme={resolveTerminalTheme(themeMode)}
+            themeMode={themeMode}
+            onThemeChange={setThemeMode}
             onOpenSettings={() => {
               setSwitcherOpen(false);
               setDrawerOpen(true);

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

@@ -1,10 +1,15 @@
 import { useEffect, useState } from "react";
-import { describeState, describeTrigger, orderForSession, type Checkback } from "../utils/checkbackText";
+import {
+  chipWhen, conditionLabel, dayHeading, describeRrule, describeState, describeTrigger, isTimed,
+  nextOfTrigger, orderForSession, relative, timeOfDay, type Checkback, type CodexAutomation
+} 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.
+// What is scheduled on a session, read like a reminders list: the timed ones
+// under their day, the ones waiting on something (a job, a file, idle) in a
+// list of their own, the Codex automations aimed at the same conversation
+// beside hop's, and the recent past folded away. Opened from a card's chip.
+// hop's own can be cancelled here; scheduling stays with `hop checkback` and
+// the agent's MCP tool, and Codex's automations with Codex.
 
 type Props = {
   session: string;
@@ -15,16 +20,26 @@ type Props = {
   onChanged?: () => void;
 };
 
+type Timed =
+  | { source: "hop"; at: number; cb: Checkback }
+  | { source: "codex"; at: number; auto: CodexAutomation; rule: string };
+
 export const CheckbacksPanel = ({ session, sessionName, onClose, onChanged }: Props) => {
   const [items, setItems] = useState<Checkback[] | null>(null);
+  const [automations, setAutomations] = useState<CodexAutomation[]>([]);
   const [failed, setFailed] = useState(false);
   const [busy, setBusy] = useState<string | null>(null);
+  const [open, setOpen] = useState<string | null>(null);
   const now = Date.now();
 
   const load = () => {
-    fetch("/api/checkbacks", { cache: "no-store" })
+    fetch(`/api/checkbacks?session=${encodeURIComponent(session)}`, { 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); })
+      .then((d) => {
+        setItems(Array.isArray(d?.items) ? d.items : []);
+        setAutomations(Array.isArray(d?.automations) ? d.automations : []);
+        setFailed(false);
+      })
       .catch(() => { setFailed(true); setItems([]); });
   };
   useEffect(() => { load(); }, [session]);
@@ -47,14 +62,43 @@ export const CheckbacksPanel = ({ session, sessionName, onClose, onChanged }: Pr
 
   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);
+  const past = rows.filter((c) => c.status !== "pending").slice(0, 12);
+  // A one-shot Codex automation whose time has passed is not upcoming:
+  // Codex keeps it ACTIVE whether or not it ran (some never arrive), so it
+  // folds away under "Past due" instead of heading the list as "Overdue".
+  const autoTimes = automations.map((auto) => ({ auto, r: describeRrule(auto.rrule, now) }));
+  const isPastDue = (r: { next: number | null }, rule: string) => /COUNT=1/.test(rule) && r.next !== null && r.next < now;
+  const activeAutos = autoTimes.filter(({ auto, r }) => auto.status === "ACTIVE" && !isPastDue(r, auto.rrule)).map(({ auto }) => auto);
+  const pastDueAutos = autoTimes.filter(({ auto, r }) => auto.status === "ACTIVE" && isPastDue(r, auto.rrule));
+  const pausedAutos = automations.filter((a) => a.status !== "ACTIVE");
+
+  // Everything with a clock time, hop's and Codex's together, soonest first.
+  const timed: Timed[] = [
+    ...pending.filter((c) => isTimed(c.trigger)).map((cb) => ({ source: "hop" as const, at: nextOfTrigger(cb.trigger) ?? now, cb })),
+    ...activeAutos.map((auto) => { const r = describeRrule(auto.rrule, now); return { source: "codex" as const, at: r.next ?? Number.MAX_SAFE_INTEGER, auto, rule: r.label }; })
+  ].sort((a, b) => a.at - b.at);
+  const days: Array<[string, Timed[]]> = [];
+  for (const t of timed) {
+    const head = t.at === Number.MAX_SAFE_INTEGER ? "Repeating" : dayHeading(t.at, now);
+    const last = days[days.length - 1];
+    if (last && last[0] === head) last[1].push(t); else days.push([head, [t]]);
+  }
+  const waiting = pending.filter((c) => !isTimed(c.trigger));
+  const nothing = timed.length === 0 && waiting.length === 0;
+
+  const message = (key: string, text: string) => (
+    <div className={"sched-message" + (open === key ? " open" : "")}
+         onClick={() => setOpen((o) => (o === key ? null : key))}
+         title={open === key ? "" : "Click to read it all"}>{text}</div>
+  );
+  const who = (c: Checkback) => (c.createdBy === "agent" ? "the agent" : "you");
 
   return (
     <>
       <div className="views-backdrop" onClick={onClose} />
-      <div className="views-panel checkbacks-panel" role="dialog" aria-label={`Check-backs for ${sessionName}`}>
+      <div className="views-panel checkbacks-panel" role="dialog" aria-label={`Scheduled for ${sessionName}`}>
         <div className="views-head">
-          <span className="views-badge">⏰ Check-backs</span>
+          <span className="views-badge">Scheduled</span>
           <span className="checkbacks-session">{sessionName}</span>
           <span className="views-head-spacer" />
           <button type="button" className="views-close" aria-label="Close" onClick={onClose}>×</button>
@@ -62,32 +106,116 @@ export const CheckbacksPanel = ({ session, sessionName, onClose, onChanged }: Pr
         {items === null ? (
           <p className="checkbacks-empty">Loading…</p>
         ) : failed ? (
-          <p className="checkbacks-empty">Could not load check-backs.</p>
+          <p className="checkbacks-empty">Could not load what is scheduled.</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>
+            {nothing && <p className="checkbacks-empty">Nothing scheduled on this session.</p>}
+
+            {days.map(([head, list]) => (
+              <section key={head} className="sched-day">
+                <div className="sched-day-head">{head}</div>
+                {list.map((t) => t.source === "hop" ? (
+                  <div key={t.cb.id} className={"sched-row" + (t.cb.firedAt ? " fired" : "")}>
+                    <div className="sched-time">{t.at === Number.MAX_SAFE_INTEGER ? "—" : timeOfDay(t.at)}</div>
+                    <div className="sched-body">
+                      {message(t.cb.id, t.cb.message)}
+                      <div className="sched-meta">
+                        {t.cb.trigger.kind === "every" ? describeTrigger(t.cb.trigger, now) : chipWhen(t.at, now)}
+                        {t.cb.firedAt ? " · due, waiting for the agent to be idle" : ""}
+                        {t.cb.force ? " · typed even mid-turn" : ""} · by {who(t.cb)}
+                      </div>
+                    </div>
+                    <button type="button" className="checkback-cancel" disabled={busy === t.cb.id} onClick={() => cancel(t.cb.id)}>Cancel</button>
+                  </div>
+                ) : (
+                  <div key={"codex-" + t.auto.id} className="sched-row codex">
+                    <div className="sched-time">{t.at === Number.MAX_SAFE_INTEGER ? "—" : timeOfDay(t.at)}</div>
+                    <div className="sched-body">
+                      <div className="sched-title">{t.auto.name}</div>
+                      {message("codex-" + t.auto.id, t.auto.prompt)}
+                      <div className="sched-meta">Codex automation · {t.rule}{t.at !== Number.MAX_SAFE_INTEGER && t.at < now ? " · past due" : ""}</div>
+                    </div>
+                    <span className="sched-owner" title="Codex runs this one; manage it in Codex">Codex</span>
+                  </div>
+                ))}
+              </section>
             ))}
+
+            {waiting.length > 0 && (
+              <section className="sched-day">
+                <div className="sched-day-head">When something happens</div>
+                {waiting.map((c) => {
+                  const cond = conditionLabel(c.trigger);
+                  return (
+                    <div key={c.id} className={"sched-row" + (c.firedAt ? " fired" : "")}>
+                      <div className="sched-time tag">{cond.tag}</div>
+                      <div className="sched-body">
+                        {message(c.id, c.message)}
+                        <div className="sched-meta">
+                          <code className="sched-cond" title={cond.detail}>{cond.detail}</code>
+                        </div>
+                        <div className="sched-meta">
+                          {c.firedAt ? "happened · waiting for the agent to be idle" : c.trigger.kind === "cmd" ? describeTrigger(c.trigger, now).replace(/^when `.*` succeeds · /, "") : "watching"}
+                          {c.lastError && !c.firedAt ? ` · ${c.lastError}` : ""} · by {who(c)}
+                        </div>
+                      </div>
+                      <button type="button" className="checkback-cancel" disabled={busy === c.id} onClick={() => cancel(c.id)}>Cancel</button>
+                    </div>
+                  );
+                })}
+              </section>
+            )}
+
+            {pastDueAutos.length > 0 && (
+              <details className="sched-fold">
+                <summary>Past due Codex automations ({pastDueAutos.length})</summary>
+                <p className="checkbacks-hint">Codex still lists these as active, but a one-shot follow-up is not always delivered — check the session before counting on it.</p>
+                {pastDueAutos.map(({ auto, r }) => (
+                  <div key={auto.id} className="sched-row codex past">
+                    <div className="sched-time tag">was due</div>
+                    <div className="sched-body">
+                      <div className="sched-title">{auto.name}</div>
+                      <div className="sched-meta">{r.next ? `${dayHeading(r.next, now) === "Due now" ? new Date(r.next).toLocaleString([], { weekday: "short", month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) : timeOfDay(r.next)} · ${relative(r.next, now)}` : r.label}</div>
+                    </div>
+                  </div>
+                ))}
+              </details>
+            )}
+
+            {pausedAutos.length > 0 && (
+              <details className="sched-fold">
+                <summary>Paused Codex automations ({pausedAutos.length})</summary>
+                {pausedAutos.map((a) => (
+                  <div key={a.id} className="sched-row codex past">
+                    <div className="sched-time tag">paused</div>
+                    <div className="sched-body">
+                      <div className="sched-title">{a.name}</div>
+                      <div className="sched-meta">{describeRrule(a.rrule, now).label}</div>
+                    </div>
+                  </div>
+                ))}
+              </details>
+            )}
+
             {past.length > 0 && (
-              <>
-                <div className="checkbacks-past-head">Recent</div>
+              <details className="sched-fold">
+                <summary>Recent ({past.length})</summary>
                 {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 key={c.id} className={"sched-row past " + c.status}>
+                    <div className="sched-time tag">{c.status === "delivered" ? "sent" : "cancelled"}</div>
+                    <div className="sched-body">
+                      {message(c.id, c.message)}
+                      <div className="sched-meta">{describeState(c, now)}</div>
+                    </div>
                   </div>
                 ))}
-              </>
+              </details>
             )}
-            <p className="checkbacks-hint">Schedule one with <code>hop checkback</code> inside the session, or the agent does it itself over MCP.</p>
+
+            <p className="checkbacks-hint">
+              hop types these into the session when they come due and the agent is idle. Schedule with <code>hop checkback</code> or
+              the agent's <code>hop_checkback</code> tool; Codex automations are run by Codex.
+            </p>
           </div>
         )}
       </div>

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

@@ -220,9 +220,16 @@ export const DigestCard = ({ sessions, onOpen }: {
       <span className="digest-dateline">{sessionLabel(item.session)}</span>
       <span className="digest-headline">{item.headline}</span>
       {item.why ? <span className="digest-why">{item.why}</span> : null}
-      {item.recommendation ? <span className="digest-reco">→ {item.recommendation}</span> : null}
+      {item.recommendation ? (
+        <span className="digest-reco"><span className="digest-reco-label">Suggested</span>{item.recommendation}</span>
+      ) : null}
       {item.replies?.length ? (
-        <span className="digest-replies">{item.replies.map((r) => <span key={r} className="digest-reply">{r}</span>)}</span>
+        // The ways the agent offered to go — words, not buttons: the card
+        // opens the session, where the answer is given.
+        <span className="digest-replies">
+          <span className="digest-replies-label">Options</span>
+          {item.replies.map((r, i) => <span key={r} className="digest-reply">{i > 0 ? " · " : ""}{r}</span>)}
+        </span>
       ) : null}
     </button>
   );
@@ -237,7 +244,7 @@ export const DigestCard = ({ sessions, onOpen }: {
           if (!rows.length) return null;
           return (
             <div key={slot} className={"digest-slot slot-" + slot}>
-              <div className="digest-slot-head">{SLOT_LABEL[slot]}</div>
+              <div className="digest-slot-head">{SLOT_LABEL[slot]}<span className="digest-slot-count">{rows.length}</span></div>
               {rows.map((it) => renderItem(it, s))}
             </div>
           );
@@ -351,7 +358,9 @@ export const DigestCard = ({ sessions, onOpen }: {
                         <span className="digest-when">{ago(item.at)}</span>
                         <span className="digest-headline">{item.headline}</span>
                         {item.why ? <span className="digest-why">{item.why}</span> : null}
-                        {item.recommendation ? <span className="digest-reco">→ {item.recommendation}</span> : null}
+                        {item.recommendation ? (
+                          <span className="digest-reco"><span className="digest-reco-label">Suggested</span>{item.recommendation}</span>
+                        ) : null}
                       </div>
                     ))}
                   </div>

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

@@ -38,6 +38,7 @@ import {
   insertAfter, describeAccount, type AgentHome, type AgentHomes } from "../utils/switcherModel";
 import { scanKeyboardProtocol } from "../utils/keyboardProtocol";
 import { isAppCtrlEnter, isFullscreenChord } from "../utils/fullscreenChord";
+import { chipWhen } from "../utils/checkbackText";
 import { DigestCard } from "./DigestCard";
 import { hasUnseenViews, loadViewsSeen } from "./ViewsPanel";
 
@@ -113,6 +114,10 @@ type Props = {
   userName?: string;
   terminalTheme?: object;
   onOpenSettings?: () => void;
+  // The page theme, switchable straight from the wall: the settings drawer
+  // lives in the full-screen view, and the hub (no session open) has none.
+  themeMode?: "system" | "light" | "dark";
+  onThemeChange?: (mode: "system" | "light" | "dark") => void;
   onToggleKeyboard?: () => void;
   onFind?: () => void;
   // Open the Views panel. No argument = the whole fleet (header button); an
@@ -1299,6 +1304,8 @@ export const SessionSwitcher = ({
   userName,
   terminalTheme,
   onOpenSettings,
+  themeMode,
+  onThemeChange,
   onToggleKeyboard,
   onFind,
   onOpenViews,
@@ -3081,18 +3088,29 @@ export const SessionSwitcher = ({
             </span>
           )}
           {!current && s.starting && !s.active && <span className="switcher-chip starting">STARTING</span>}
-          {!!s.checkbacks && (
-            <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}
-            </button>
-          )}
+          {(!!s.checkbacks || !!s.codexAutomations) && (() => {
+            // What is scheduled here, hop's and Codex's own: the chip says WHEN
+            // the next timed one is due ("in 12m", "4:30 PM"), or that it is
+            // waiting on something (a job, a file) when nothing has a time.
+            const total = (s.checkbacks || 0) + (s.codexAutomations || 0);
+            const when = s.checkbackNext ? chipWhen(s.checkbackNext, Date.now()) : "waiting";
+            return (
+              <button
+                type="button"
+                className="switcher-chip checkback"
+                title={`${total} scheduled${s.codexAutomations ? ` (${s.codexAutomations} Codex automation${s.codexAutomations === 1 ? "" : "s"})` : ""}${s.checkbackNext ? ` — next ${when}` : " — waiting on a condition"}. Click to see the list.`}
+                aria-label={`${total} scheduled on ${s.displayName}`}
+                onClick={(e) => { e.stopPropagation(); onOpenCheckbacks?.(key); }}
+                onPointerDown={(e) => e.stopPropagation()}
+              >
+                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <rect x="3" y="5" width="18" height="16" rx="3" /><path d="M3 10h18M8 3v4M16 3v4" />
+                </svg>
+                <span>{when}</span>
+                {total > 1 && <span className="checkback-count">{total}</span>}
+              </button>
+            );
+          })()}
           {s.agentHome && homesFor(s.agent).length > 1 && (() => {
             const known = homesFor(s.agent).find((h) => h.dir === s.agentHome?.dir);
             const out = known?.login && !known.login.loggedIn;
@@ -3344,6 +3362,18 @@ export const SessionSwitcher = ({
                 : (() => { const n = visibleSessions.reduce((k, s) => k + (s.views?.count || 0), 0); return n > 0 ? <span className="views-entry-count">{n}</span> : null; })()}
             </button>
           )}
+          {onThemeChange && themeMode && (() => {
+            const next = themeMode === "system" ? "light" : themeMode === "light" ? "dark" : "system";
+            const label = (m: string) => (m === "system" ? "Auto" : m === "light" ? "Light" : "Dark");
+            return (
+              <button type="button" className="switcher-action theme-entry" onClick={() => onThemeChange(next)}
+                      aria-label={`Theme: ${label(themeMode)} — switch to ${label(next)}`}
+                      title={`Theme: ${label(themeMode)} — click for ${label(next)}`}>
+                <span aria-hidden="true">{themeMode === "light" ? "☀" : themeMode === "dark" ? "☾" : "◐"}</span>
+                {label(themeMode)}
+              </button>
+            );
+          })()}
           {onOpenSettings && (
             <button type="button" className="switcher-action" aria-label="Settings" title="Settings" onClick={onOpenSettings}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">

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

@@ -46,7 +46,10 @@ type ViewItem = {
   mtime?: number;
   // "server" is a LIVE proxied localhost server (`hop port`), not a stored
   // file: it stops working when the server does, which a file never does.
-  kind?: "file" | "server";
+  // "link" points at another app entirely — a Nebula notebook on its own
+  // server — opened at `target`; `app` names what opens it.
+  kind?: "file" | "server" | "link";
+  app?: string;
   // For a server, the proxy itself. The manifest scan can only see the
   // redirect page `hop port` leaves behind; going straight to the proxy skips
   // a visible flash and a round trip.
@@ -104,6 +107,7 @@ export const hasUnseenViews = (
 // that the column stops lining up. The tag also survives a monospace column.
 const kindOf = (name: string, kind?: string) => {
   if (kind === "server") return "LIVE";
+  if (kind === "link") return "NB";
   const ext = (name.split(".").pop() || "").toLowerCase();
   if (["csv", "tsv"].includes(ext)) return "TBL";
   if (["mp3", "m4a", "wav", "flac", "aac", "ogg", "opus"].includes(ext)) return "AUD";
@@ -128,13 +132,13 @@ const formatBytes = (n?: number) => {
 };
 
 const hrefFor = (item: ViewItem) =>
-  item.kind === "server" && item.target ? item.target : item.path;
+  (item.kind === "server" || item.kind === "link") && item.target ? item.target : item.path;
 
 // The stored file itself, as an attachment: the daemon's /download mode
 // serves the markdown an agent wrote rather than the page it renders into.
 // Only files — a server is live, there is nothing to save.
 const downloadHrefFor = (item: ViewItem) =>
-  item.kind === "server" ? null : item.path.replace(/\/inline$/, "") + "/download";
+  item.kind === "server" || item.kind === "link" ? null : item.path.replace(/\/inline$/, "") + "/download";
 
 // A hidden same-origin anchor with `download`: the row is already an <a>
 // (anchors cannot nest), and window.open would show the file, not save it.
@@ -371,7 +375,8 @@ export const ViewsPanel = ({ session, item, sessions = [], dock = false, onClose
   };
 
   const copyLink = (item: ViewItem) => {
-    const url = location.origin + hrefFor(item);
+    const href = hrefFor(item);
+    const url = /^https?:\/\//.test(href) ? href : location.origin + href;
     navigator.clipboard?.writeText(url).then(() => {
       setCopied(item.path);
       window.setTimeout(() => setCopied((c) => (c === item.path ? null : c)), 1400);
@@ -447,12 +452,16 @@ export const ViewsPanel = ({ session, item, sessions = [], dock = false, onClose
   const rowsFor = (key: string, rows: ViewItem[]) => rows.map((item) => {
     const fresh = (item.mtime || 0) > (seenAtOpen[key] || 0);
     const isServer = item.kind === "server";
+    const isLink = item.kind === "link";
     const selected = preview?.path === item.path;
     // A server has no meaningful size and its filename is an implementation
     // detail (the redirect page) — it is a door, not a document, so say what
     // it is instead.
+    const linkHost = isLink ? (() => { try { return new URL(item.target || "").host; } catch { return ""; } })() : "";
     const meta = isServer
       ? "live server"
+      : isLink
+      ? [item.app === "nebula" ? "Nebula notebook" : "link", linkHost, relativeTime((item.mtime || 0) * 1000, now)].filter(Boolean).join(" · ")
       : [
           // The filename is only worth a line of its own when the title isn't
           // already showing it.
@@ -464,7 +473,7 @@ export const ViewsPanel = ({ session, item, sessions = [], dock = false, onClose
       <a
         key={item.path}
         className={"views-row" + (fresh ? " fresh" : "")
-          + (isServer ? " server" : "") + (selected ? " selected" : "")}
+          + (isServer || isLink ? " server" : "") + (selected ? " selected" : "")}
         href={hrefFor(item)}
         target="_blank"
         rel="noopener"
@@ -487,7 +496,7 @@ export const ViewsPanel = ({ session, item, sessions = [], dock = false, onClose
           <button type="button" className="views-act"
                   title="Open in a new tab" aria-label="Open in a new tab"
                   onClick={() => window.open(hrefFor(item), "_blank", "noopener")}>↗</button>
-          {!isServer && (
+          {!isServer && !isLink && (
             <button type="button" className="views-act"
                     title="Download" aria-label={`Download ${item.name}`}
                     onClick={() => triggerDownload(item)}>⤓</button>
@@ -496,7 +505,7 @@ export const ViewsPanel = ({ session, item, sessions = [], dock = false, onClose
                   title={copied === item.path ? "Copied" : "Copy link"}
                   aria-label="Copy link"
                   onClick={() => copyLink(item)}>{copied === item.path ? "✓" : "⧉"}</button>
-          {!isServer && (
+          {!isServer && !isLink && (
             /* The FILE, not the page: ?download=1 serves the published bytes as
                an attachment under their real name (md/csv/json raw, not the
                rendered view). A window.open, not an anchor: anchors can't nest
@@ -556,8 +565,24 @@ export const ViewsPanel = ({ session, item, sessions = [], dock = false, onClose
   // stay iframes — sandboxed only for LIVE servers (an arbitrary dev app
   // must not frame-bust the wall); our own files skip the sandbox, because a
   // sandboxed iframe disables the browser's PDF viewer.
+  // A notebook lives in its own app: the pane says where it opens rather
+  // than framing Nebula (another origin, often reached over a forwarded port).
+  const linkFile = (() => {
+    if (!preview || preview.kind !== "link") return "";
+    try { return new URL(preview.target || "").searchParams.get("file") || ""; } catch { return ""; }
+  })();
   const page = showPreview && (
-    preview.kind !== "server" && isImage(preview.name) ? (
+    preview.kind === "link" ? (
+      <div className="views-link-card">
+        <div className="views-link-app">{preview.app === "nebula" ? "Nebula notebook" : "Link"}</div>
+        <div className="views-link-title">{preview.title || preview.name}</div>
+        {linkFile && <code className="views-link-path">{linkFile}</code>}
+        <a className="views-link-open" href={preview.target} target="_blank" rel="noopener">
+          Open in {preview.app === "nebula" ? "Nebula" : "a new tab"} ↗
+        </a>
+        <div className="views-link-host">{(() => { try { return new URL(preview.target || "").host; } catch { return ""; } })()}</div>
+      </div>
+    ) : preview.kind !== "server" && isImage(preview.name) ? (
       <div className="views-media"><img src={preview.path} alt={preview.title || preview.name} /></div>
     ) : preview.kind !== "server" && isVideo(preview.name) ? (
       <div className="views-media"><video src={preview.path} controls autoPlay={false} /></div>
@@ -600,7 +625,7 @@ export const ViewsPanel = ({ session, item, sessions = [], dock = false, onClose
       <span className="views-head-spacer" />
       {preview && (
         <span className="views-nav-acts">
-          {preview.kind !== "server" && (
+          {preview.kind !== "server" && preview.kind !== "link" && (
             <button type="button" className="views-act"
                     title="Download" aria-label={`Download ${preview.name}`}
                     onClick={() => triggerDownload(preview)}>⤓</button>