forked from Mike/freno-dev
364 lines
12 KiB
TypeScript
364 lines
12 KiB
TypeScript
import { For, type JSX } from "solid-js";
|
||
import {
|
||
IslandPill,
|
||
AgentDotGrid,
|
||
STATUS,
|
||
CALM,
|
||
CRITICAL,
|
||
ACCENT,
|
||
ModuleCard
|
||
} from "./IslandMock";
|
||
|
||
/**
|
||
* Feature collage: five cells sold as the app's actual UI. The hero cell
|
||
* shows the real collapsed pill (campfire slot, camera housing, live data)
|
||
* dressed in the island's black surface; supporting cells reuse the same
|
||
* module chrome, status palette, and metric language.
|
||
*/
|
||
|
||
function CollageCell(props: {
|
||
class?: string;
|
||
kicker: string;
|
||
title: string;
|
||
body: string;
|
||
children?: JSX.Element;
|
||
}) {
|
||
return (
|
||
<div
|
||
class={`border-overlay1 bg-surface1 relative flex flex-col overflow-hidden rounded-2xl border p-6 ${props.class ?? ""}`}
|
||
>
|
||
<p class="text-subtext1 mb-3 text-[11px] font-semibold tracking-[0.14em] uppercase">
|
||
{props.kicker}
|
||
</p>
|
||
<h3 class="text-text mb-2 text-lg font-bold tracking-tight">
|
||
{props.title}
|
||
</h3>
|
||
<p class="text-subtext0 text-sm leading-relaxed">{props.body}</p>
|
||
<div class="mt-5 flex-1">{props.children}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Stage for app-UI mocks: the island's black ink ground. The real island
|
||
* is always dark (preferredColorScheme .dark), so the mocks read correctly
|
||
* in both site themes.
|
||
*/
|
||
function InkStage(props: { children: JSX.Element; class?: string }) {
|
||
return (
|
||
<div class={`flex justify-center rounded-xl py-5 ${props.class ?? ""}`} style={{ background: "#0d0d0f" }}>
|
||
{props.children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** The approvals mock rebuilt on the app's PermissionCard anatomy. */
|
||
function ApprovalCardMock() {
|
||
return (
|
||
<div
|
||
class="mx-auto w-full max-w-sm rounded-[10px] p-2.5 text-left"
|
||
style={{ background: "rgba(234,179,8,0.08)" }}
|
||
>
|
||
<div class="mb-1.5 flex items-center gap-1.5">
|
||
<span
|
||
class="inline-block h-[13px] w-[13px] rounded-[3px]"
|
||
style={{ background: "#D97742" }}
|
||
/>
|
||
<span class="text-[12px] font-semibold text-white">
|
||
the-nook · bridge
|
||
</span>
|
||
<span
|
||
class="ml-auto rounded-full px-1.5 py-0.5 text-[10px] font-semibold text-white"
|
||
style={{ background: "rgba(234,179,8,0.25)" }}
|
||
>
|
||
approval
|
||
</span>
|
||
</div>
|
||
<p class="text-[13px] font-medium text-white">Run Edit</p>
|
||
<p class="mt-0.5 font-mono text-[11px] text-white/50">
|
||
server/routes.ts +12 −4
|
||
</p>
|
||
<div class="mt-2.5 flex gap-2">
|
||
<span
|
||
class="rounded-md px-3 py-1 text-[11px] font-semibold"
|
||
style={{ background: ACCENT }}
|
||
>
|
||
Allow
|
||
</span>
|
||
<span class="rounded-md border border-white/20 px-3 py-1 text-[11px] font-semibold text-white/80">
|
||
Deny
|
||
</span>
|
||
<span class="px-1 py-1 text-[11px] text-white/50">
|
||
Deny with reason…
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** Fans panel mock: RPM gauge rows in the app's card chrome. */
|
||
function FansPanelMock() {
|
||
const fans = [
|
||
{ rpm: 1270, frac: 0.26 },
|
||
{ rpm: 1219, frac: 0.25 }
|
||
];
|
||
return (
|
||
<ModuleCard>
|
||
<div class="space-y-2.5">
|
||
<For each={fans}>
|
||
{(f) => (
|
||
<div class="flex items-center gap-3">
|
||
<div
|
||
class="h-1 flex-1 overflow-hidden rounded-full"
|
||
style={{ background: "rgba(255,255,255,0.08)" }}
|
||
>
|
||
<div
|
||
class="h-full rounded-full"
|
||
style={{
|
||
width: `${f.frac * 100}%`,
|
||
background: CALM
|
||
}}
|
||
/>
|
||
</div>
|
||
<span
|
||
class="font-mono text-white"
|
||
style={{ "font-size": "13px", "font-weight": 500 }}
|
||
>
|
||
{f.rpm}
|
||
</span>
|
||
<span class="text-[9px] font-semibold text-white/50">RPM</span>
|
||
</div>
|
||
)}
|
||
</For>
|
||
<div class="h-px" style={{ background: "rgba(255,255,255,0.06)" }} />
|
||
<div class="flex gap-2">
|
||
<span class="rounded-md border border-white/15 px-2 py-0.5 text-[11px] text-white/70">
|
||
Auto
|
||
</span>
|
||
<span
|
||
class="rounded-md px-2 py-0.5 text-[11px] font-bold"
|
||
style={{ color: CRITICAL }}
|
||
>
|
||
MAX
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</ModuleCard>
|
||
);
|
||
}
|
||
|
||
/** Remote agents: two session rows like the expanded agents panel. */
|
||
function RemoteMock() {
|
||
return (
|
||
<div class="space-y-1.5">
|
||
<div
|
||
class="rounded-[10px] p-2.5"
|
||
style={{ background: "rgba(255,255,255,0.055)", "box-shadow": "inset 0 0 0 1px rgba(255,255,255,0.07)" }}
|
||
>
|
||
<div class="flex items-center gap-2">
|
||
<span
|
||
class="inline-block h-[7px] w-[7px] rounded-full"
|
||
style={{ background: STATUS.running }}
|
||
/>
|
||
<span class="text-[13px] font-semibold text-white">build-box</span>
|
||
<span
|
||
class="ml-auto rounded-full px-1.5 py-0.5 text-[10px] font-semibold text-white/75"
|
||
style={{ background: "rgba(255,255,255,0.08)" }}
|
||
>
|
||
ssh
|
||
</span>
|
||
</div>
|
||
<p class="mt-0.5 text-[11px] text-white/50">You: fix flaky test</p>
|
||
</div>
|
||
<div
|
||
class="rounded-[10px] p-2.5"
|
||
style={{ background: "rgba(255,255,255,0.055)", "box-shadow": "inset 0 0 0 1px rgba(255,255,255,0.07)" }}
|
||
>
|
||
<div class="flex items-center gap-2">
|
||
<span
|
||
class="inline-block h-[7px] w-[7px] rounded-full"
|
||
style={{ background: STATUS.ready }}
|
||
/>
|
||
<span class="text-[13px] font-semibold text-white">gpu-rig</span>
|
||
<span
|
||
class="ml-auto rounded-full px-1.5 py-0.5 text-[10px] font-semibold text-white/75"
|
||
style={{ background: "rgba(255,255,255,0.08)" }}
|
||
>
|
||
tailscale
|
||
</span>
|
||
</div>
|
||
<p class="mt-0.5 text-[11px] text-white/50">Ready</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** System gauges: temp die blocks + memory, in module cards. */
|
||
function GaugesMock() {
|
||
return (
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<ModuleCard>
|
||
<div class="flex items-baseline justify-between">
|
||
<span class="text-[9px] font-semibold text-white/50">CPU</span>
|
||
<span class="font-mono text-white" style={{ "font-size": "15px" }}>
|
||
72°
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="mt-1.5 h-1 overflow-hidden rounded-full"
|
||
style={{ background: "rgba(255,255,255,0.08)" }}
|
||
>
|
||
<div
|
||
class="h-full rounded-full"
|
||
style={{ width: "64%", background: CALM }}
|
||
/>
|
||
</div>
|
||
</ModuleCard>
|
||
<ModuleCard>
|
||
<div class="flex items-baseline justify-between">
|
||
<span class="text-[9px] font-semibold text-white/50">GPU</span>
|
||
<span class="font-mono text-white" style={{ "font-size": "15px" }}>
|
||
58°
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="mt-1.5 h-1 overflow-hidden rounded-full"
|
||
style={{ background: "rgba(255,255,255,0.08)" }}
|
||
>
|
||
<div
|
||
class="h-full rounded-full"
|
||
style={{ width: "31%", background: CALM }}
|
||
/>
|
||
</div>
|
||
</ModuleCard>
|
||
</div>
|
||
);
|
||
}
|
||
export default function FeatureCollage() {
|
||
return (
|
||
<section
|
||
class="bg-base relative z-20 -mt-28 px-4 pb-16 pt-40 md:px-8"
|
||
id="feature-collage"
|
||
>
|
||
<div class="mx-auto max-w-5xl">
|
||
<p class="text-subtext1 mb-2 text-center text-xs font-semibold tracking-[0.18em] uppercase">
|
||
Why the Nook
|
||
</p>
|
||
<h2 class="text-text mb-12 text-center text-3xl font-bold">
|
||
One glance. Everything your agents are doing.
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 gap-5 md:grid-cols-3">
|
||
{/* Hero: real collapsed pill on the island surface */}
|
||
<div
|
||
class="border-overlay1 bg-surface1 relative col-span-1 flex flex-col items-center overflow-hidden rounded-2xl border p-6 md:col-span-2"
|
||
>
|
||
<div class="mb-5 self-start">
|
||
<p class="text-subtext1 mb-3 text-[11px] font-semibold tracking-[0.14em] uppercase">
|
||
The island
|
||
</p>
|
||
<h3 class="text-text mb-2 text-2xl font-bold tracking-tight">
|
||
Every agent, one glance
|
||
</h3>
|
||
<p class="text-subtext0 max-w-sm text-sm leading-relaxed">
|
||
A pill tucked into your notch — a campfire for your whole
|
||
fleet on the left, live data on the right. Blue running,
|
||
green ready, amber needs you.
|
||
</p>
|
||
</div>
|
||
<div class="my-10 flex w-full justify-center">
|
||
<IslandPill
|
||
campfire="running"
|
||
right={
|
||
<div class="flex flex-col items-center gap-1 px-1">
|
||
<div class="flex gap-1.5">
|
||
<span
|
||
class="inline-block h-2.5 w-2.5 rounded-[3px]"
|
||
style={{ background: STATUS.running }}
|
||
/>
|
||
<span
|
||
class="inline-block h-2.5 w-2.5 rounded-[3px]"
|
||
style={{ background: STATUS.ready }}
|
||
/>
|
||
</div>
|
||
<div class="flex gap-1.5">
|
||
<span
|
||
class="inline-block h-2.5 w-2.5 rounded-[3px]"
|
||
style={{ background: STATUS.attention }}
|
||
/>
|
||
<span
|
||
class="inline-block h-2.5 w-2.5 rounded-[3px]"
|
||
style={{ background: STATUS.idle }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
}
|
||
/>
|
||
</div>
|
||
<p class="text-subtext0 -mb-1 text-center text-xs">
|
||
expand for the full panel ↓
|
||
</p>
|
||
</div>
|
||
|
||
{/* Approvals */}
|
||
<CollageCell
|
||
kicker="Approvals"
|
||
title="Unblock agents, anywhere"
|
||
body="Permission prompts surface as cards in the panel — Allow once, always, or deny. Away from the desk, push them to your phone and answer from there."
|
||
>
|
||
<InkStage>
|
||
<div class="w-full max-w-sm px-3">
|
||
<ApprovalCardMock />
|
||
</div>
|
||
</InkStage>
|
||
</CollageCell>
|
||
|
||
{/* Fans */}
|
||
<CollageCell
|
||
kicker="Cooling"
|
||
title="Silence it or max it"
|
||
body="Read both fans live, then take over the curve completely. Flip to MAX before a compile, whisper-quiet when the fleet idles."
|
||
>
|
||
<InkStage class="w-full">
|
||
<div class="w-full max-w-[260px] text-left">
|
||
<FansPanelMock />
|
||
</div>
|
||
</InkStage>
|
||
</CollageCell>
|
||
|
||
{/* Remote agents */}
|
||
<CollageCell
|
||
kicker="Remote"
|
||
title="Agents on other machines"
|
||
body="Run agents on Linux boxes and SSH servers — a one-line install pipes their sessions back to the same island, over Tailscale or a reverse tunnel."
|
||
>
|
||
<InkStage class="w-full">
|
||
<div class="w-full max-w-[280px] text-left">
|
||
<RemoteMock />
|
||
</div>
|
||
</InkStage>
|
||
</CollageCell>
|
||
|
||
{/* Gauges */}
|
||
<CollageCell
|
||
kicker="Your Mac"
|
||
title="The gauges that matter"
|
||
body="CPU and GPU die temps, memory pressure, live network throughput — the same tier palette the island uses, warning before a compile cooks your lap."
|
||
>
|
||
<InkStage class="w-full">
|
||
<div class="w-full max-w-[300px] text-left">
|
||
<GaugesMock />
|
||
</div>
|
||
</InkStage>
|
||
</CollageCell>
|
||
</div>
|
||
|
||
<p class="text-subtext1 mt-6 text-center text-xs">
|
||
Plus calendar, reminders, calls, and Now Playing — all in the same
|
||
island, all one-time purchase.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|