import { For, createSignal, onCleanup, onMount, type JSX } from "solid-js"; import { IslandPill, IslandExpanded, AgentDotGrid, STATUS, CALM, ACCENT, CRITICAL, ModuleCard } from "./IslandMock"; import { Campfire, type CampfireState } from "./Campfire"; /** * Detailed feature breakdowns: alternating copy + live-demo sections. * Each demo animates when scrolled into view (IntersectionObserver + * motion's animate), staging the real interaction loop: attention * flares, approval resolves, fans throttle, sessions stream. */ /* Scroll-triggered reveal: adds `in` once the element crosses 25%. */ function useReveal() { const [el, setEl] = createSignal(); onMount(() => { const node = el(); if (!node) return; const observer = new IntersectionObserver( (entries) => { for (const entry of entries) { if (entry.isIntersecting) { node.classList.add("in"); observer.disconnect(); } } }, { threshold: 0.25 } ); observer.observe(node); onCleanup(() => observer.disconnect()); }); return [setEl, el] as const; } function BreakdownSection(props: { kicker: string; title: string; body: string; bullets: string[]; reversed?: boolean; children: JSX.Element; }) { const [ref] = useReveal(); return (

{props.kicker}

{props.title}

{props.body}

    {(bullet) => (
  • {bullet}
    • )}
{props.children}
); } /* ── Demo 1: the fleet loop — attention flares, then resolves ─────── */ function FleetDemo() { const [phase, setPhase] = createSignal<"watch" | "flare" | "resolve">( "watch" ); onMount(() => { const timers: ReturnType[] = []; const loop = () => { setPhase("watch"); timers.push(setTimeout(() => setPhase("flare"), 3200)); timers.push(setTimeout(() => setPhase("resolve"), 6400)); }; loop(); const interval = setInterval(loop, 9600); onCleanup(() => { clearInterval(interval); timers.forEach(clearTimeout); }); }); const states = () => { switch (phase()) { case "watch": return ["running", "running", "ready", "running", "idle"] as const; case "flare": return ["running", "attention", "ready", "running", "idle"] as const; case "resolve": return ["running", "ready", "ready", "running", "idle"] as const; } }; return (
} />

{phase() === "flare" ? "Codex needs your input" : phase() === "resolve" ? "Answer delivered — agents back to work" : "Fleet running calmly"}

{phase() === "flare" ? "question · in the island now" : "\u00a0"}

); } /* ── Demo 2: permission card resolves, phone push follows ─────────── */ function ApprovalDemo() { const [allowed, setAllowed] = createSignal(false); onMount(() => { const timers: ReturnType[] = []; const loop = () => { setAllowed(false); timers.push(setTimeout(() => setAllowed(true), 4200)); }; loop(); const interval = setInterval(loop, 8400); onCleanup(() => { clearInterval(interval); timers.forEach(clearTimeout); }); }); return (
{/* island card */}
the-nook · bridge {allowed() ? "allowed" : "approval"}

Run Edit

server/routes.ts +12 −4

Allow Deny
{/* phone */}

The Nook

{allowed() ? "Allowed ✓" : "Claude Code wants to edit"}

{allowed() ? "resumed" : "tap to Allow or Deny"}

); } /* ── Demo 3: fans throttle up under load, then back down ──────────── */ /* Spark pool: deterministic pseudo-random, count gated by fan speed. */ const sparkRand = (i: number, k: number) => { const x = Math.sin(i * 127.1 + k * 311.7) * 43758.5453; return x - Math.floor(x); }; const SPARKS = Array.from({ length: 20 }, (_, i) => ({ sx: `${Math.round(10 + sparkRand(i, 1) * 26)}px`, sy: `${Math.round(18 + sparkRand(i, 2) * 30)}px`, sd: `${(0.4 + sparkRand(i, 3) * 0.25).toFixed(2)}s`, sdel: `${(sparkRand(i, 4) * 1.2).toFixed(2)}s`, size: sparkRand(i, 5) > 0.5 ? 3 : 2 })); function FansDemo() { const [rpm, setRpm] = createSignal(1270); const [maxed, setMaxed] = createSignal(false); onMount(() => { let frame = 0; const timers: ReturnType[] = []; const ramp = (target: number, durationMs: number) => { cancelAnimationFrame(frame); const start = rpm(); const startTime = performance.now(); const step = (now: number) => { const t = Math.min((now - startTime) / durationMs, 1); setRpm(Math.round(start + (target - start) * t)); if (t < 1) frame = requestAnimationFrame(step); }; frame = requestAnimationFrame(step); }; const loop = () => { setMaxed(true); ramp(5960, 1200); timers.push( setTimeout(() => { setMaxed(false); ramp(1270, 1600); }, 5200) ); }; loop(); const interval = setInterval(loop, 10400); onCleanup(() => { clearInterval(interval); timers.forEach(clearTimeout); cancelAnimationFrame(frame); }); }); const fans = () => [ { rpm: rpm(), frac: rpm() / 6000 }, { rpm: Math.round(rpm() * 0.96), frac: (rpm() * 0.96) / 6000 } ]; const shakeIntensity = () => Math.max(0, Math.min(1, (rpm() - 2500) / (6000 - 2500))); /* 5 sparks when the shake starts, ~20 at max speed. */ const sparkCount = () => shakeIntensity() > 0 ? 5 + Math.floor(shakeIntensity() * 15) : 0; return (
{(f, i) => (
Fan {i() + 1}
{Math.round(f.rpm)} RPM
)}
{maxed() ? "MAX" : "Auto"} {maxed() ? "cooling session active" : "curve in control"}
0 ? "1" : "0", transition: "opacity 0.3s" }} > {(s) => ( )}
); } /* ── Demo 4: remote sessions streaming into the island ────────────── */ const REMOTE_TICKS: { name: string; via: string; state: keyof typeof STATUS; line: string; }[] = [ { name: "build-box", via: "ssh", state: "running", line: "You: fix flaky test" }, { name: "gpu-rig", via: "tailscale", state: "running", line: "You: benchmark fp16" } ]; function RemoteDemo() { const [tick, setTick] = createSignal(0); onMount(() => { const interval = setInterval( () => setTick((t) => (t + 1) % REMOTE_TICKS.length), 2600 ); onCleanup(() => clearInterval(interval)); }); return (
{(host, i) => (
{host.name} {host.via}

{host.line}

)}

same island, same glance — agents two networks away

); } /* ── Demo 5: campfire states ───────────────────────────────────────── */ function CampfireDemo() { const states: CampfireState[] = [ "running", "question", "ready", "idle", "error" ]; const labels = [ "fleet running", "pending question", "ready to review", "all quiet", "something failed" ]; return (
{(state, i) => (

{labels[i()]}

)}
); } export default function FeatureBreakdowns() { return (
); }