@astrale-os/adapter-cloudflare 0.1.9 → 0.2.0

package/template/client/src/styles.css

@@ -3,11 +3,20 @@
   --fg: #171717;
   --muted: #737373;
   --border: #e5e5e5;
+  --border-strong: #d4d4d8;
   --card: #ffffff;
   --accent: #2563eb;
+  --accent-soft: rgba(37, 99, 235, 0.1);
   --warn-bg: #fffbeb;
   --warn-border: #fde68a;
   --warn-fg: #92400e;
+  --err: #dc2626;
+  --err-soft: rgba(220, 38, 38, 0.1);
+  --up: #16a34a;
+  --degraded: #d97706;
+  --down: #dc2626;
+  --unknown: #737373;
+  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
 }
 
 * {
@@ -49,7 +58,7 @@ body {
 }
 
 .subline {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--mono);
   font-size: 0.72rem;
   color: var(--muted);
   margin: 0.25rem 0 1rem;
@@ -61,6 +70,8 @@ body {
   margin: 0 0 1rem;
 }
 
+/* ─── Banners ───────────────────────────────────────────────────────────── */
+
 .banner {
   border: 1px solid var(--warn-border);
   background: var(--warn-bg);
@@ -71,11 +82,57 @@ body {
   margin-bottom: 1rem;
 }
 
+.banner-error {
+  border-color: var(--err);
+  background: var(--err-soft);
+  color: var(--err);
+  word-break: break-word;
+}
+
+/* ─── Panel ─────────────────────────────────────────────────────────────── */
+
+.panel {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 0.7rem;
+  padding: 1.05rem 1.2rem;
+}
+
+.panel-danger {
+  border-color: color-mix(in srgb, var(--err) 45%, var(--border));
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.85rem;
+}
+
+.panel-title {
+  font-size: 1.1rem;
+  font-weight: 650;
+  margin: 0;
+}
+
+.panel-danger .panel-title {
+  color: var(--err);
+}
+
+.panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* ─── Key/value ─────────────────────────────────────────────────────────── */
+
 .kv {
   border: 1px solid var(--border);
   border-radius: 0.5rem;
   overflow: hidden;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--mono);
   font-size: 0.72rem;
 }
 
@@ -97,14 +154,135 @@ body {
 
 .kv-val {
   word-break: break-all;
+  min-width: 0;
 }
 
 .muted {
   color: var(--muted);
 }
 
-.section-label {
+.mono {
+  font-family: var(--mono);
   font-size: 0.78rem;
+}
+
+.link {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+/* ─── Status row + badge ────────────────────────────────────────────────── */
+
+.status-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin: 0 0 1rem;
+}
+
+.status-badge {
+  display: inline-block;
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: 0.04em;
+  padding: 0.3rem 0.85rem;
+  border-radius: 0.5rem;
+  color: #ffffff;
+}
+
+.status-up {
+  background: var(--up);
+}
+
+.status-degraded {
+  background: var(--degraded);
+}
+
+.status-down {
+  background: var(--down);
+}
+
+.status-unknown {
+  background: var(--unknown);
+}
+
+/* ─── Buttons ───────────────────────────────────────────────────────────── */
+
+.check-btn {
+  font: inherit;
   font-weight: 600;
-  margin: 0 0 0.5rem;
+  color: #ffffff;
+  background: var(--accent);
+  border: 0;
+  border-radius: 0.5rem;
+  padding: 0.4rem 0.85rem;
+  cursor: pointer;
+}
+
+.check-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.check-btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+/* ─── Empty state ───────────────────────────────────────────────────────── */
+
+.empty {
+  border: 1px dashed var(--border-strong);
+  border-radius: 0.6rem;
+  padding: 1.4rem 1.2rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.empty-text {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.empty-hint {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  color: var(--muted);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.4rem;
+  padding: 0.3rem 0.6rem;
+  word-break: break-all;
+}
+
+/* ─── Loading ───────────────────────────────────────────────────────────── */
+
+.loading-line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.spinner {
+  width: 0.85rem;
+  height: 0.85rem;
+  border-radius: 50%;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--accent);
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

package/template/client/src/ui/StatusBadge.tsx

@@ -0,0 +1,31 @@
+/** Health status chip — pure presentational; styling lives in `styles.css`. */
+
+/** The health vocabulary the badge styles, shared across checkable nodes. */
+export type HealthStatus = 'up' | 'down' | 'degraded' | 'unknown'
+
+/** Map any raw status string to the four styled states (unrecognized → unknown). */
+function normalize(status: string): HealthStatus {
+  return status === 'up' || status === 'down' || status === 'degraded' ? status : 'unknown'
+}
+
+/**
+ * Color-coded status pill: up = green, degraded = amber, down = red, unknown =
+ * muted. The label is the uppercased status (`UP` / `DEGRADED` / `DOWN` /
+ * `UNKNOWN`). Takes any raw status string — the vocabulary depends on the node
+ * type (up/down for a Monitor, up/degraded/down for a StatusPage) — and styles
+ * the four known states, falling back to `unknown` for anything else. Both
+ * checkable node types render through it, so it lives in the feature-agnostic
+ * `@/ui`, not a feature's own folder.
+ */
+export function StatusBadge({ status }: { status: string }) {
+  const known = normalize(status)
+  const label =
+    known === 'up'
+      ? 'UP'
+      : known === 'degraded'
+        ? 'DEGRADED'
+        : known === 'down'
+          ? 'DOWN'
+          : 'UNKNOWN'
+  return <span className={`status-badge status-${known}`}>{label}</span>
+}

package/template/client/src/ui/format.ts

@@ -0,0 +1,24 @@
+/** Shared display formatters — pure, presentation-side (used across views). */
+
+/**
+ * Coarse relative time for `lastCheckedAt`-style ISO stamps:
+ * `just now` / `5m ago` / `2h ago` / a `YYYY-MM-DD` date for anything older than
+ * 30 days. Returns `—` for a missing stamp and the raw string for an unparseable
+ * one.
+ */
+export function relativeTime(iso: string | undefined, now = Date.now()): string {
+  if (!iso) return '—'
+  const t = Date.parse(iso)
+  if (Number.isNaN(t)) return iso
+  const diff = now - t
+  if (diff < 0) return 'just now'
+  const s = Math.floor(diff / 1000)
+  if (s < 45) return 'just now'
+  const m = Math.floor(s / 60)
+  if (m < 60) return `${m}m ago`
+  const h = Math.floor(m / 60)
+  if (h < 48) return `${h}h ago`
+  const d = Math.floor(h / 24)
+  if (d < 30) return `${d}d ago`
+  return new Date(t).toISOString().slice(0, 10)
+}

package/template/client/src/ui/index.ts

@@ -0,0 +1,13 @@
+/**
+ * The design system — generic, feature-AGNOSTIC presentational primitives +
+ * display formatters, no domain knowledge and no kernel session. The one
+ * domain-shaped exception is `StatusBadge`: it renders the up/degraded/down/
+ * unknown health vocabulary that any `Checkable` node reports, so it's a shared
+ * primitive here rather than living inside the status feature.
+ * Import from the barrel: `import { Panel, KV, relativeTime } from '@/ui'`.
+ */
+export { EmptyState, ErrorBanner, Panel, Spinner } from './surface'
+export { StatusBadge } from './StatusBadge'
+export type { HealthStatus } from './StatusBadge'
+export { ExternalLink, KV, Mono } from './value'
+export { relativeTime } from './format'

package/template/client/src/ui/surface.tsx

@@ -0,0 +1,56 @@
+/** Containers + feedback surfaces — pure presentational. */
+import type { ReactNode } from 'react'
+
+/**
+ * A titled card section. `actions` render in the header (e.g. a button); `tone:
+ * 'danger'` tints the border/title for destructive panels.
+ */
+export function Panel({
+  title,
+  actions,
+  tone,
+  children,
+}: {
+  title: string
+  actions?: ReactNode
+  tone?: 'danger'
+  children: ReactNode
+}) {
+  return (
+    <section className={tone === 'danger' ? 'panel panel-danger' : 'panel'}>
+      <header className="panel-head">
+        <h2 className="panel-title">{title}</h2>
+        {actions && <div className="panel-actions">{actions}</div>}
+      </header>
+      {children}
+    </section>
+  )
+}
+
+/** A red alert banner for a failed call. */
+export function ErrorBanner({ children }: { children: ReactNode }) {
+  return (
+    <div className="banner banner-error" role="alert">
+      {children}
+    </div>
+  )
+}
+
+/** Teaching empty state — what's missing and an optional command that fixes it. */
+export function EmptyState({ children, hint }: { children: ReactNode; hint?: string }) {
+  return (
+    <div className="empty">
+      <p className="empty-text">{children}</p>
+      {hint && <code className="empty-hint">{hint}</code>}
+    </div>
+  )
+}
+
+/** A spinner with a label, for in-flight loads. */
+export function Spinner({ label }: { label: string }) {
+  return (
+    <p className="muted loading-line">
+      <span className="spinner" aria-hidden="true" /> {label}
+    </p>
+  )
+}

package/template/client/src/ui/value.tsx

@@ -0,0 +1,32 @@
+/** Inline value renderers — pure presentational. */
+import type { ReactNode } from 'react'
+
+/** One label/value row in a `.kv` grid. */
+export function KV({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="kv-row">
+      <div className="kv-key">{label}</div>
+      <div className="kv-val">{children}</div>
+    </div>
+  )
+}
+
+/** Monospace inline value with a soft em-dash fallback. */
+export function Mono({ value, title }: { value: string | undefined; title?: string }) {
+  if (!value) return <span className="muted">—</span>
+  return (
+    <span className="mono" title={title ?? value}>
+      {value}
+    </span>
+  )
+}
+
+/** An external link rendered without its scheme, opening in a new tab. */
+export function ExternalLink({ url }: { url: string | undefined }) {
+  if (!url) return <span className="muted">—</span>
+  return (
+    <a className="mono link" href={url} target="_blank" rel="noreferrer noopener" title={url}>
+      {url.replace(/^https?:\/\//, '')}
+    </a>
+  )
+}

package/template/client/src/views/status.tsx

@@ -0,0 +1,28 @@
+/**
+ * The status view — the SPA's one view: the StatusPage panel at `/ui/status-page`.
+ * Mounted by the Astrale shell as a sandboxed iframe; `@/shell` (built on the real
+ * `@astrale-os/shell`) completes the handshake and hands over the kernel session +
+ * the target node id. `ViewFrame` gates the handshake (loading / standalone /
+ * ready); the `ready` body delegates to `StatusCard`, the feature container that
+ * loads the node, renders its rolled-up status, and exposes a "Check now" action.
+ *
+ * Pure composition — no data/transport logic lives here (that's `@/status` +
+ * `@/shell`).
+ */
+import { type ShellState, ViewFrame } from '@/shell'
+import { StatusCard } from '@/status'
+
+export function StatusView(shell: ShellState) {
+  return (
+    <ViewFrame shell={shell} title="Status" subline="astrale view">
+      {(session, nodeId) =>
+        nodeId ? (
+          // Keyed by node id so a target hot-swap remounts with fresh state.
+          <StatusCard key={nodeId} session={session} nodeId={nodeId} />
+        ) : (
+          <div className="banner">No target node — open this view from a StatusPage.</div>
+        )
+      }
+    </ViewFrame>
+  )
+}

package/template/client/tsconfig.json

@@ -11,7 +11,8 @@
     "skipLibCheck": true,
     "isolatedModules": true,
     "resolveJsonModule": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "paths": { "@/*": ["./src/*"] }
   },
   "include": [
     "src/**/*.ts",

package/template/client/vite.config.ts

@@ -1,30 +1,28 @@
 import viteReact from '@vitejs/plugin-react'
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 
 /**
- * Client SPA for the domain's `ui-note` View. Built into `../.dist/`,
- * served by the generated worker via its `ASSETS` binding (`.astrale/`).
+ * Client SPA for the domain's Views. Built into `../.dist/`, served by the
+ * generated worker via its `ASSETS` binding (`.astrale/`).
  *
  * `base: '/ui/'` + `outDir: '../.dist'`: Vite emits asset refs as
  * `/ui/assets/<hash>.js`; the worker strips the `/ui` prefix before delegating
  * to `ASSETS`, so files resolve from the directory root. `index.html` is the
- * SPA fallback for `/ui/<anything>`.
+ * SPA fallback for `/ui/<anything>` — `src/app.tsx` routes on the mount path.
  *
- * Deliberately self-contained — only react/react-dom/vite/@vitejs/plugin-react,
- * all on public npm — so the template builds without the @astrale-os registry
- * or workspace `link:`s. Two small subsets are reimplemented inline: the shell
- * child-handshake (`src/lib/shell.ts`, including `ctrl:tokenRefresh` so a
- * pushed credential is picked up) and a minimal JSON kernel client
- * (`src/lib/kernel.ts`, `@<id>::get`). Tests live in `__tests__/` and run on
- * `vitest`/`happy-dom` (see `vitest.config.ts`) — vite never bundles them.
+ * Consumes `@astrale-os/shell` for the child handshake + the real kernel client:
+ * `src/shell/use-shell.ts` boots `createShell({ mode: 'sandboxed' })` and the
+ * feature hooks call kernel methods through `shell.kernel` (token refresh, codec
+ * negotiation, redirect following, delegation — all handled by the SDK).
  *
- * Deferred on purpose (grow via `@astrale-os/kernel-client` if needed): no
- * msgpack, no streaming/binary, no redirect following, no client-side minting,
- * no writes. See `README.md`.
+ * `@` is aliased to `src/` (mirrors tsconfig `paths`) so feature code imports
+ * `@/shell`, `@/ui`, `@/status`.
  */
 export default defineConfig({
   base: '/ui/',
   plugins: [viteReact()],
+  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
   build: {
     outDir: '../.dist',
     emptyOutDir: true,

package/template/client/vitest.config.ts

@@ -1,18 +1,24 @@
 import viteReact from '@vitejs/plugin-react'
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vitest/config'
 
 /**
- * Vitest config for the self-contained client. A DOM env (`happy-dom`) backs
- * the React render + `window.postMessage`/`MessageChannel` used by the fake
- * shell-parent harness. Kept separate from `vite.config.ts` (which sets the
- * `/ui/` base + `../.dist` build) so tests don't inherit the SPA build
- * options.
+ * Vitest config for the client SPA. A DOM env (`happy-dom`) backs the React
+ * render + the shell handshake the tests exercise. Kept separate from
+ * `vite.config.ts` (which sets the `/ui/` base + `../.dist` build) so tests
+ * don't inherit the SPA build options.
  */
 export default defineConfig({
   plugins: [viteReact()],
+  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
   test: {
     environment: 'happy-dom',
     globals: true,
     include: ['__tests__/**/*.test.{ts,tsx}', 'src/**/*.test.{ts,tsx}'],
+    // `@astrale-os/*` ship bundler-targeted ESM (extensionless relative imports).
+    // vitest externalizes node_modules and uses Node's stricter ESM resolver,
+    // which wants explicit `.js`; inlining the scope makes vitest transform them
+    // through vite — the same context the build uses. Standard for these deps.
+    server: { deps: { inline: [/@astrale-os\//] } },
   },
 })

package/template/core/monitor/health.ts

@@ -0,0 +1,34 @@
+/**
+ * Health logic — PURE status rules, no I/O. `classify` maps one probe's HTTP code
+ * to a monitor verdict; `rollup` aggregates a status page's watched monitors into
+ * a page verdict. (Node identity/layout/seed data lives in `./node`; the kernel
+ * reads/writes live in `runtime/`; the network probe behind the `Prober` port.)
+ */
+
+/** A monitor's health verdict. `unknown` is the pre-first-check state. */
+export type HealthStatus = 'up' | 'down' | 'unknown'
+
+/**
+ * Map an observed HTTP status code to a verdict. `0` means the host was
+ * unreachable (DNS/timeout/refused) — that's `down`. 2xx/3xx is `up`; anything
+ * else (4xx/5xx) is `down`. Pure.
+ */
+export function classify(statusCode: number): HealthStatus {
+  if (statusCode >= 200 && statusCode < 400) return 'up'
+  return 'down'
+}
+
+/** A status page's rolled-up verdict — `degraded` = only non-critical checks down. */
+export type PageStatus = 'up' | 'degraded' | 'down' | 'unknown'
+
+/**
+ * Roll up a page's watched monitors into a page verdict: a CRITICAL monitor down
+ * ⇒ `down`; any other monitor down ⇒ `degraded`; all up ⇒ `up`; none ⇒ `unknown`.
+ * Pure.
+ */
+export function rollup(members: readonly { status: string; critical: boolean }[]): PageStatus {
+  if (members.length === 0) return 'unknown'
+  const down = members.filter((m) => m.status === 'down')
+  if (down.some((m) => m.critical)) return 'down'
+  return down.length > 0 ? 'degraded' : 'up'
+}

package/template/core/monitor/index.ts

@@ -0,0 +1,9 @@
+/**
+ * The monitor bounded context's PURE core, in one place: schema accessors
+ * (`keys`), the health status rule (`health`), and node identity/layout/seed
+ * data (`node`). No I/O, no clock/RNG — all deterministic + testable.
+ * `runtime/monitor/` imports the operations' logic from here.
+ */
+export * from './keys'
+export * from './health'
+export * from './node'

package/template/core/monitor/keys.ts

@@ -0,0 +1,41 @@
+/**
+ * Compiled-schema accessors for the monitor context — the ONE place class paths,
+ * method paths, and qualified prop keys come from. Pure (schema-derived); never
+ * hand-write key strings. `D` (the compiled domain) comes from `schema/index`,
+ * re-exported here so the rest of the context reads it from one place.
+ */
+import { K } from '@astrale-os/kernel-core'
+
+import { D } from '../../schema'
+
+export { D, K }
+
+/** Kernel ops/classes the logic addresses. */
+export const NODE_CREATE = K.Node.createNode.path.method.raw
+export const FOLDER_CLASS = K.Folder.path.class.raw
+export const NAME_KEY = K.Named.name.key
+
+/** Domain class/edge paths. */
+export const MONITOR_CLASS = D.Monitor.path.class.raw
+export const STATUS_PAGE_CLASS = D.StatusPage.path.class.raw
+export const WATCHES_EDGE = D.watches.path.class.raw
+
+/** Qualified storage keys for Monitor node props. */
+export const MONITOR_KEYS = {
+  url: D.Monitor.url.key,
+  status: D.Monitor.status.key,
+  statusCode: D.Monitor.statusCode.key,
+  latencyMs: D.Monitor.latencyMs.key,
+  lastCheckedAt: D.Monitor.lastCheckedAt.key,
+} as const
+
+/** Qualified storage key for the StatusPage's rolled-up status. */
+export const PAGE_KEYS = {
+  status: D.StatusPage.status.key,
+} as const
+
+/** Qualified key for the `watches` edge's `critical` prop. Edge-prop accessors
+ *  aren't typed yet (an SDK gap), so this casts to read the key. */
+export const WATCHES_KEYS = {
+  critical: (D.watches as unknown as { critical: { key: string } }).critical.key,
+} as const

package/template/core/monitor/node.ts

@@ -0,0 +1,57 @@
+/**
+ * Node identity — PURE domain constants + slug logic (no I/O): where monitors and
+ * status pages live in the graph, how a new node's slug is formed, and the seed
+ * set. `runtime/` consumes these; the IMPURE bits (the slug's entropy suffix, the
+ * node writes) stay in `runtime/`, so this file is deterministic and testable.
+ */
+
+/** Where each kind of node lives in the graph (domain layout; `seed` creates the folders). */
+export const MONITORS_PARENT = '/monitors'
+export const STATUS_PAGES_PARENT = '/status-pages'
+
+/** Deterministic URL-/name-safe stem (lowercased, non-alnum → `-`, clamped). Pure. */
+export function slugify(text: string): string {
+  return (
+    text
+      .replace(/^https?:\/\//i, '')
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-|-$/g, '')
+      .slice(0, 40) || 'node'
+  )
+}
+
+/**
+ * Slug for a NEW node: the stem + a caller-supplied `suffix`. Pure — `runtime/`
+ * injects the `suffix` (clock/RNG entropy for collision safety) so core stays
+ * deterministic. `seed` uses fixed slugs (not this) for idempotency.
+ */
+export function uniqueSlug(text: string, suffix: string): string {
+  return `${slugify(text)}-${suffix}`
+}
+
+export interface StarterMonitor {
+  slug: string
+  name: string
+  url: string
+  /** Whether the seeded status page treats this monitor as critical. */
+  critical: boolean
+}
+
+/**
+ * Monitors laid down by `seed` (postInstall). httpbin returns a deterministic
+ * status code, so the second starter is a stable demo target; the first points at
+ * a real site. Fixed slugs keep `seed` idempotent across reinstalls.
+ */
+export const STARTERS: readonly StarterMonitor[] = [
+  { slug: 'astrale', name: 'Astrale', url: 'https://astrale.ai', critical: true },
+  {
+    slug: 'httpbin-200',
+    name: 'httpbin (200)',
+    url: 'https://httpbin.org/status/200',
+    critical: false,
+  },
+]
+
+/** The status page `seed` creates, watching every starter monitor. */
+export const STARTER_PAGE = { slug: 'status', name: 'Status' } as const