Add the cellb.dev website as site/

README.md

@@ -45,6 +45,7 @@ packages/cellb/        the runtime, its browser host, conformance corpus and doc
 examples/flue/         a Flue agent app (Cloudflare target, Agents SDK) on cellb, in Node and Chromium
 examples/agents/       pi and opencode in Durable Objects on cellb, against the fake model
 examples/fake-openai/  a scripted OpenAI-compatible model endpoint the examples test against
+site/                  the cellb.dev website (Astro, Tailwind CSS, shadcn/ui tokens)
 docs/superpowers/      plans for work on the repository
 .github/workflows/     interop CI against the real celld and RustFS
 ```
@@ -64,7 +65,9 @@ they use. Both are workspaces
    runs it on cellb against a fake model endpoint; `pnpm test:browser` runs the same app in Chromium.
 5. `cd examples/agents && pnpm test`: pi and opencode, each in a Durable Object on cellb, against
    the fake model.
-6. `pnpm run interop`: the celld interop suite. `scripts/interop-env.sh` downloads the pinned celld
+6. `pnpm --filter @statewalker/cellb-site dev`: the website at `http://localhost:4321`; `build`
+   writes it to `site/dist/`.
+7. `pnpm run interop`: the celld interop suite. `scripts/interop-env.sh` downloads the pinned celld
    and RustFS releases and starts RustFS on `127.0.0.1:9200`.
 
 `pnpm test` at the root runs every workspace's tests, and stops at the first one that fails.

biome.json

@@ -46,5 +46,18 @@
     "parser": {
       "tailwindDirectives": true
     }
-  }
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.astro"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUnusedVariables": "off",
+            "noUnusedImports": "off"
+          }
+        }
+      }
+    }
+  ]
 }

pnpm-workspace.yaml

@@ -1,6 +1,7 @@
 packages:
   - "packages/*"
   - "examples/*"
+  - "site"
 
 catalog:
   "@biomejs/biome": 2.5.15

site/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.astro/

site/README.md

@@ -0,0 +1,56 @@
+# @statewalker/cellb-site
+
+The cellb.dev website: Astro 5, Tailwind CSS v4 and shadcn/ui tokens, designed as a visual
+sibling of [celld.dev](https://celld.dev). It is static; `dist/` can go to any static host.
+
+```sh
+pnpm install                   # at the repository root
+pnpm --filter @statewalker/cellb-site dev      # http://localhost:4321
+pnpm --filter @statewalker/cellb-site build    # static output in site/dist/
+```
+
+## Structure
+
+| path | purpose |
+| --- | --- |
+| `src/styles/global.css` | All design tokens (shadcn/ui variable contract), light + dark |
+| `src/components/ui/` | shadcn-style primitives as Astro components: Button, Badge, Card |
+| `src/components/` | Header, Footer, Logo, ThemeToggle, CodeBlock (Shiki + copy), HeroVisual, LiveDemo |
+| `src/layouts/` | `Base` (theme bootstrap, header/footer) and `Docs` (sidebar) |
+| `src/pages/` | Home, `/docs` (getting started), `/docs/how-it-works` |
+| `components.json` | shadcn CLI config, so React shadcn components can be added later (`@astrojs/react` + `npx shadcn add …`) |
+
+## Content map
+
+The copy is drawn from this repository: the root README, `packages/cellb/README.md` and
+`packages/cellb/docs/*`.
+
+| Section (home) | Message | Source |
+| --- | --- | --- |
+| Hero | One cell model for browser, server and cloud; for people and AI agents | root README |
+| The architecture | Cells are the unit of the app; placement is a deployment choice. Isomorphic, durable, movable | package README "Why it exists" |
+| Where it runs | Browser / Node / celld fleet, one entry point each | architecture.md, browser-host.md |
+| Use cases | IDE-class apps (VS Code/Theia-style plugin hosts), AI agents as DOs, sandboxed agent-written code, local-first apps, apps for people and agents, Workers without native binaries | examples/flue, examples/agents, Worker Loader docs |
+| Code | Node, browser and fleet examples (tabs) | package README |
+| Comparison | The full celld 0.6.3 / cellb Node / cellb browsers table, with 70/5/6 scenario counts | root README |
+| Life of a cell | Take → run → log → move | ownership-and-durability.md |
+| Demo | Web Lock ownership across tabs (the primitive behind browser shards) | browser-host.md |
+
+Docs: `/docs` (getting started: install, entry points, Node, browser, fleet) and
+`/docs/how-it-works` (ports, request path, gates, ownership, durability, loaded Workers). The
+sidebar links to the repository's reference docs and examples (`src/lib/site.ts` holds the URLs).
+
+## Style
+
+- Shared with celld: the shadcn token contract, Inter / JetBrains Mono, bordered cards, grid
+  background, mono eyebrow labels, code windows, comparison tables, CTA band.
+- Different: violet (hue ≈ 292) with a magenta secondary. Edit `:root` / `.dark` in
+  `src/styles/global.css` to re-skin.
+
+## Open items
+
+- The package is private (v0.0.1, no npm release), so install is "clone the monorepo". Switch
+  the hero snippet to `npm i @statewalker/cellb` once it is published.
+- Positioning statements (IDE-class apps, people + agents) are the project's vision; the
+  feature claims under them are the ones the repository tests.
+- Update the comparison table when the root README changes (it is data in `src/pages/index.astro`).

site/astro.config.mjs

@@ -0,0 +1,9 @@
+// @ts-check
+
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  site: "https://cellb.dev",
+  vite: { plugins: [tailwindcss()] },
+});

site/components.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/global.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": { "components": "@/components", "ui": "@/components/ui", "utils": "@/lib/utils" },
+  "iconLibrary": "lucide"
+}

site/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@statewalker/cellb-site",
+  "private": true,
+  "type": "module",
+  "description": "The cellb.dev website (Astro, Tailwind CSS, shadcn/ui tokens).",
+  "license": "MIT",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "astro": "^5.18.2",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0",
+    "tailwindcss": "^4.3.3"
+  }
+}

site/src/components/CodeBlock.astro

@@ -0,0 +1,52 @@
+---
+import { Code } from "astro:components";
+import Icon from "./Icon.astro";
+
+interface Props {
+  code: string;
+  lang?: string;
+  title?: string;
+  class?: string;
+}
+
+const { code, lang = "sh", title, class: className } = Astro.props;
+---
+
+<div class:list={["group relative overflow-hidden rounded-xl border bg-code text-code-foreground", className]}>
+  {title && (
+    <div class="flex items-center gap-2 border-b border-white/10 px-4 py-2 font-mono text-xs text-code-foreground/60">
+      <span class="flex gap-1.5">
+        <span class="size-2.5 rounded-full bg-white/15" />
+        <span class="size-2.5 rounded-full bg-white/15" />
+        <span class="size-2.5 rounded-full bg-white/15" />
+      </span>
+      <span class="ml-2">{title}</span>
+    </div>
+  )}
+  <button
+    type="button"
+    data-copy={code}
+    aria-label="Copy code"
+    class="absolute right-2 top-2 z-10 inline-flex size-8 items-center justify-center rounded-md text-code-foreground/60 opacity-0 transition hover:bg-white/10 hover:text-code-foreground group-hover:opacity-100 focus-visible:opacity-100"
+  >
+    <Icon name="copy" class="size-4 copy-icon" />
+    <Icon name="check" class="size-4 check-icon hidden" />
+  </button>
+  <Code code={code} lang={lang as any} theme="github-dark-default" class="!bg-transparent px-4 py-4 text-[13px] leading-6 font-mono overflow-x-auto" />
+</div>
+
+<script>
+  document.querySelectorAll<HTMLButtonElement>("[data-copy]").forEach((btn) =>
+    btn.addEventListener("click", async () => {
+      try {
+        await navigator.clipboard.writeText(btn.dataset.copy ?? "");
+        btn.querySelector(".copy-icon")?.classList.add("hidden");
+        btn.querySelector(".check-icon")?.classList.remove("hidden");
+        setTimeout(() => {
+          btn.querySelector(".copy-icon")?.classList.remove("hidden");
+          btn.querySelector(".check-icon")?.classList.add("hidden");
+        }, 1500);
+      } catch {}
+    }),
+  );
+</script>

site/src/components/Footer.astro

@@ -0,0 +1,37 @@
+---
+import { CELLD, REPO, repoDoc } from "@/lib/site";
+import Logo from "./Logo.astro";
+---
+
+<footer class="border-t">
+  <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:px-6 md:grid-cols-[1fr_auto_auto_auto]">
+    <div class="space-y-3">
+      <Logo />
+      <p class="max-w-xs text-sm text-muted-foreground">
+        Isomorphic Durable Objects for the browser, the server and the cloud. A sibling of
+        <a href={CELLD} class="text-foreground underline-offset-4 hover:underline">celld</a>.
+      </p>
+    </div>
+    <div class="space-y-2 text-sm">
+      <p class="font-medium">Learn</p>
+      <ul class="space-y-1.5 text-muted-foreground">
+        <li><a href="/docs" class="hover:text-foreground">Getting started</a></li>
+        <li><a href="/docs/how-it-works" class="hover:text-foreground">How it works</a></li>
+        <li><a href="/#use-cases" class="hover:text-foreground">Use cases</a></li>
+        <li><a href="/#compare" class="hover:text-foreground">Comparison with celld</a></li>
+      </ul>
+    </div>
+    <div class="space-y-2 text-sm">
+      <p class="font-medium">Project</p>
+      <ul class="space-y-1.5 text-muted-foreground">
+        <li><a href={REPO} class="hover:text-foreground">GitHub</a></li>
+        <li><a href={repoDoc("gaps.md")} class="hover:text-foreground">Known gaps</a></li>
+        <li><a href={CELLD} class="hover:text-foreground">celld.dev</a></li>
+      </ul>
+    </div>
+    <div class="space-y-2 text-sm">
+      <p class="font-medium">Licence</p>
+      <p class="text-muted-foreground">MIT; vendored code keeps its own</p>
+    </div>
+  </div>
+</footer>

site/src/components/Header.astro

@@ -0,0 +1,47 @@
+---
+import { REPO } from "@/lib/site";
+import Icon from "./Icon.astro";
+import Logo from "./Logo.astro";
+import ThemeToggle from "./ThemeToggle.astro";
+import Badge from "./ui/Badge.astro";
+
+const path = Astro.url.pathname;
+const nav = [
+  { href: "/docs", label: "Docs" },
+  { href: "/docs/how-it-works", label: "How it works" },
+  { href: "/#use-cases", label: "Use cases" },
+  { href: "/#compare", label: "vs celld" },
+];
+---
+
+<header class="sticky top-0 z-40 w-full border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+  <div class="mx-auto flex h-14 max-w-6xl items-center gap-6 px-4 sm:px-6">
+    <Logo />
+    <Badge variant="outline" class="hidden font-mono text-[10px] sm:inline-flex">v0.0.1 · preview</Badge>
+    <nav class="hidden items-center gap-5 text-sm md:flex">
+      {nav.map((item) => (
+        <a
+          href={item.href}
+          class:list={[
+            "transition-colors hover:text-foreground",
+            path === item.href || (item.href !== "/docs" && path.startsWith(item.href))
+              ? "text-foreground"
+              : "text-muted-foreground",
+          ]}
+        >
+          {item.label}
+        </a>
+      ))}
+    </nav>
+    <div class="ml-auto flex items-center gap-1">
+      <a
+        href={REPO}
+        aria-label="GitHub"
+        class="inline-flex size-9 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+      >
+        <Icon name="github" />
+      </a>
+      <ThemeToggle />
+    </div>
+  </div>
+</header>

site/src/components/HeroVisual.astro

@@ -0,0 +1,57 @@
+---
+// One fleet, three kinds of node, one bucket. The highlighted cell is the
+// same Durable Object as it moves: celld → cellb in Node → cellb in a tab.
+const hosts = [
+  {
+    name: "browser tab",
+    engine: "cellb · SQLite WASM on OPFS",
+    cells: ["doc:spec", "agent:review"],
+    active: 1,
+  },
+  { name: "node-a", engine: "cellb · node:sqlite", cells: ["room:lobby", "user:ada"], active: -1 },
+  { name: "edge-1", engine: "celld · V8", cells: ["queue:jobs", "kv:sessions"], active: -1 },
+];
+---
+
+<div class="relative">
+  <div class="absolute -inset-6 -z-10 rounded-[2rem] bg-gradient-to-br from-primary/25 via-accent-2/10 to-transparent blur-2xl"></div>
+  <div class="overflow-hidden rounded-xl border bg-card shadow-lg">
+    <div class="flex items-center justify-between border-b bg-muted/60 px-4 py-2 font-mono text-[11px] text-muted-foreground">
+      <span>fleet · s3://cells</span>
+      <span class="inline-flex items-center gap-1.5">
+        <span class="size-1.5 animate-pulse rounded-full bg-emerald-500"></span>
+        3 nodes live
+      </span>
+    </div>
+
+    <div class="bg-grid space-y-3 p-4">
+      <div class="grid gap-3 sm:grid-cols-3">
+        {hosts.map((h) => (
+          <div class="rounded-lg border bg-background/80 p-3">
+            <p class="font-mono text-xs font-medium">{h.name}</p>
+            <p class="mt-0.5 truncate font-mono text-[10px] text-muted-foreground">{h.engine}</p>
+            <div class="mt-3 space-y-1.5">
+              {h.cells.map((c, i) => (
+                <div
+                  class:list={[
+                    "flex items-center gap-2 rounded-md border px-2 py-1.5 font-mono text-[11px]",
+                    i === h.active ? "border-primary/50 bg-primary/10 text-foreground" : "border-dashed text-muted-foreground",
+                  ]}
+                >
+                  <span class:list={["size-1.5 shrink-0 rounded-sm", i === h.active ? "bg-primary" : "bg-muted-foreground/40"]}></span>
+                  <span class="truncate">{c}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div class="rounded-lg border bg-background/80 p-3 font-mono text-[11px] leading-5">
+        <p class="text-muted-foreground">cells/Agent:review/</p>
+        <p><span class="text-muted-foreground">own.json</span> <span class="text-primary">{"{ node: \"tab-7f\", epoch: 3 }"}</span></p>
+        <p class="truncate text-muted-foreground">ltx/e1/… <span class="text-foreground/70">celld</span> · ltx/e2/… <span class="text-foreground/70">node-a</span> · ltx/e3/… <span class="text-primary">browser</span></p>
+      </div>
+    </div>
+  </div>
+</div>