site: restore scoped one-click remote setup

[gpt-6.1-sol] A blanket restriction on remote claims hid the working setup flow for Tailscale and authorized known hosts and left the opening grid unbalanced. Restore the host-labelled session card and setup demo, and make the copy safeguards reflect the supported scope rather than deny the feature.

Tests: 4 restoration checks fail without the fix; 38 Nook tests pass; bun run build; Playwright at 1440/768/375px in both themes

NOOK-1038

src/components/nook/MoreDemos.tsx

@@ -10,11 +10,11 @@ import {
   CARD_STROKE
 } from "./IslandMock";
 import { useDemoLoop } from "./useDemoLoop";
-import { Glyph, WingCapsule, type GlyphName } from "./ModuleMocks";
+import { Glyph, WingCapsule, SessionRowMock, CODEX, type GlyphName } from "./ModuleMocks";
 
 /**
  * Live demos for the breakdowns added with the 0.6–0.10 feature set:
- * terminal replies, Capture (module + Wings), and
+ * terminal replies, remote setup, Capture (module + Wings), and
  * floating actions. Same ink chrome and status palette as the originals.
  */
 
@@ -152,6 +152,109 @@ export function TerminalReplyDemo() {
   );
 }
 
+/** RemoteMirror's progress steps, in order. */
+const SETUP_STEPS = [
+  "connecting",
+  "pushing the hook binary",
+  "configuring agents",
+  "checking the host can reach this Mac"
+];
+
+export function RemoteHostDemo() {
+  /* -1 not set up · 0…3 setting up · 4 live */
+  const [step, setStep] = createSignal(-1);
+  const [pressed, setPressed] = createSignal(false);
+  useDemoLoop(11000, [
+    [0, () => (setStep(-1), setPressed(false))],
+    [1400, () => setPressed(true)],
+    [1700, () => (setPressed(false), setStep(0))],
+    [2700, () => setStep(1)],
+    [3700, () => setStep(2)],
+    [4700, () => setStep(3)],
+    [5800, () => setStep(4)]
+  ]);
+  const live = () => step() === 4;
+  const working = () => step() >= 0 && step() < 4;
+  const chip = () =>
+    live()
+      ? { color: STATUS.ready, label: "Live" }
+      : working()
+        ? { color: "rgba(255,255,255,0.55)", label: "Setting up" }
+        : { color: "rgba(255,255,255,0.35)", label: "Not set up" };
+
+  return (
+    <div class="relative mx-auto w-full max-w-[360px] space-y-3" role="img" aria-label="One-click remote setup preview for an authorized Tailscale host">
+      {/* the host's card in Settings ▸ Agents ▸ Remote hosts */}
+      <ModuleCard>
+        <div class="space-y-2 text-left">
+          <div class="flex items-center gap-2.5">
+            <div class="min-w-0 flex-1">
+              <p class="text-[13px] font-semibold text-white">gpu-rig</p>
+              <p class="truncate text-[11px] text-white/45">tailnet peer</p>
+            </div>
+            <Show when={working()}>
+              <span class="h-3 w-3 animate-spin rounded-full border-[1.5px] border-white/25 border-t-white/80" />
+            </Show>
+            <span class="flex items-center gap-1.5 text-[10.5px] font-medium text-white/85">
+              <span
+                class="h-[7px] w-[7px] rounded-full transition-colors duration-300"
+                style={{ background: chip().color }}
+              />
+              {chip().label}
+            </span>
+            <Show
+              when={live()}
+              fallback={
+                <span
+                  class="rounded-md px-2.5 py-1 text-[11px] font-semibold text-white transition-all duration-200"
+                  style={{
+                    background: ACCENT,
+                    opacity: working() ? 0 : 1,
+                    transform: pressed() ? "scale(0.92)" : "scale(1)"
+                  }}
+                >
+                  Set up
+                </span>
+              }
+            >
+              <Glyph name="refresh" size={11} class="text-white/50" />
+              <span class="rounded-md bg-white/10 px-2 py-1 text-[11px] font-semibold text-[#ff6961]">
+                Remove
+              </span>
+            </Show>
+          </div>
+          <p class="min-h-8 text-[11px] text-white/50">
+            {working() ? SETUP_STEPS[step()] : " "}
+          </p>
+        </div>
+      </ModuleCard>
+
+      {/* The host name stays visible in the session badge. */}
+      <div
+        class="transition-all duration-500"
+        style={{
+          opacity: live() ? 1 : 0,
+          transform: live() ? "translateY(0)" : "translateY(6px)"
+        }}
+      >
+        <SessionRowMock
+          title="trainer · fp16"
+          prompt="benchmark fp16"
+          state="Running python bench.py…"
+          status="running"
+          agent={CODEX}
+          host="gpu-rig"
+          age="now"
+        />
+      </div>
+      <FakeCursor
+        phase={pressed() ? "press" : step() === -1 ? "idle" : "live"}
+        at={{ x: 88, y: 16 }}
+      />
+    </div>
+  );
+}
+
 /* ── Capture: the module, and the Wings while a recording runs ────── */
 
 /** CapturePalette.recording and the NookPalette paper/ink pair. */