@astrale-os/adapter-cloudflare 0.2.0 → 0.3.0

package/src/cloudflare.ts

@@ -17,7 +17,7 @@ import { join } from 'node:path'
 
 import type { CloudflareParams } from './params'
 
-import { buildClient } from './client'
+import { buildClient, resolveClientDir } from './client'
 import { ensureIdentity } from './codegen/identity'
 import { generateWorkerEntry } from './codegen/worker'
 import { generateWranglerConfig } from './codegen/wrangler'
@@ -33,8 +33,12 @@ export function cloudflare(
     envs,
 
     async watch(params, ctx) {
-      const { configPath, port } = await prepare(params, ctx, 'dev')
-      if (ctx.clientDir) await buildClient(ctx.clientDir, ctx.projectDir, logTo())
+      const clientDir = resolveCloudflareClientDir(params, ctx)
+      const { configPath, port } = await prepare(params, ctx, 'dev', {
+        servesClient: Boolean(clientDir),
+        bundleAssets: Boolean(clientDir),
+      })
+      if (clientDir) await buildClient(clientDir, ctx.projectDir, logTo())
       const handle = await runWranglerDev({
         projectDir: ctx.projectDir,
         configPath,
@@ -55,17 +59,25 @@ export function cloudflare(
     // them itself, so a `astrale.config.ts` edit lands without a restart.
     // Mirrors `watch`'s prep exactly (codegen + client build), minus the spawn.
     async regenerate(params, ctx) {
-      await prepare(params, ctx, 'dev')
-      if (ctx.clientDir) await buildClient(ctx.clientDir, ctx.projectDir, logTo())
+      const clientDir = resolveCloudflareClientDir(params, ctx)
+      await prepare(params, ctx, 'dev', {
+        servesClient: Boolean(clientDir),
+        bundleAssets: Boolean(clientDir),
+      })
+      if (clientDir) await buildClient(clientDir, ctx.projectDir, logTo())
     },
 
     async deploy(params, ctx) {
+      const clientDir = resolveCloudflareClientDir(params, ctx)
       const {
         configPath,
         fallbackConfigPath,
         workerName: name,
-      } = await prepare(params, ctx, 'deploy')
-      if (ctx.clientDir) await buildClient(ctx.clientDir, ctx.projectDir, logTo())
+      } = await prepare(params, ctx, 'deploy', {
+        servesClient: Boolean(clientDir),
+        bundleAssets: Boolean(clientDir),
+      })
+      if (clientDir) await buildClient(clientDir, ctx.projectDir, logTo())
       const { url } = await runWranglerDeploy({
         projectDir: ctx.projectDir,
         configPath,
@@ -96,12 +108,29 @@ export function cloudflare(
   })
 }
 
+function resolveCloudflareClientDir(
+  params: CloudflareParams,
+  ctx: WatchCtx | DeployCtx,
+): string | undefined {
+  return resolveClientDir({
+    adapterName: 'cloudflare',
+    env: ctx.env,
+    projectDir: ctx.projectDir,
+    domain: ctx.domain,
+    ...(params.client ? { client: params.client } : {}),
+  })
+}
+
 // ── codegen orchestration ──────────────────────────────────────────────────
 
 export async function prepare(
   params: CloudflareParams,
   ctx: WatchCtx | DeployCtx,
   mode: 'dev' | 'deploy',
+  clientAssets: { servesClient: boolean; bundleAssets: boolean } = {
+    servesClient: false,
+    bundleAssets: false,
+  },
 ): Promise<{ configPath: string; fallbackConfigPath?: string; port: number; workerName: string }> {
   const astraleDir = join(ctx.projectDir, '.astrale')
   await mkdir(astraleDir, { recursive: true })
@@ -112,13 +141,11 @@ export async function prepare(
   // worker reach other instances' hosts internally, so a cross-instance JWKS
   // fetch doesn't 522. Resolved once, fed to BOTH codegens below.
   const router = resolveRouter(params.router)
-  // Two distinct client signals: the WORKER's `/ui` hook is present whenever the
-  // domain declares a client (`ctx.domain.hasClient`) — including managed
-  // deploys, which ship the built assets separately and pass no `clientDir`; the
-  // wrangler `assets.directory` binding is wired only when there's a local dir to
-  // point at (`ctx.clientDir` — direct Cloudflare deploys + local dev).
-  const servesClient = ctx.domain.hasClient
-  const bundleAssets = Boolean(ctx.clientDir)
+  // Two distinct client signals: the WORKER's `/ui` hook and Wrangler's local
+  // assets binding. Direct Cloudflare deploys use both; managed deploys ship
+  // assets separately but still need the worker hook.
+  const servesClient = clientAssets.servesClient
+  const bundleAssets = clientAssets.bundleAssets
 
   await writeFileAtomic(
     join(astraleDir, 'worker.gen.ts'),

package/src/codegen/worker.ts

@@ -3,7 +3,7 @@
  *
  * The dev wires the domain ONCE in a worker-safe `domain.ts`
  * (`export const domain = defineDomain({ schema, methods, deps, views,
- * functions, client })`) and binds it to an adapter in `astrale.config.ts`
+ * functions })`) and binds it to an adapter in `astrale.config.ts`
  * (`deploy(domain, cloudflare({ … }))`). This generates the
  * `export default { fetch }` plumbing the adapter owns by importing that single
  * `domain` and SPREADING it into `domainWorkerEntry` — so the author's folder
@@ -13,8 +13,8 @@
  *
  * Everything the entry needs — schema/methods/deps/views/functions/requires/
  * postInstall — rides on the spread; the only build-time signal left is whether
- * the domain serves a client SPA (`hasClient`), which gates the `/ui` asset hook
- * and its import. Key properties:
+ * this adapter env serves a client SPA (`hasClient`), which gates the `/ui`
+ * asset hook and its import. Key properties:
  *
  *  • Per-request `url` = the live serving origin (`scheme://host`). It is passed
  *    only to `createRemoteServer({ url })`; the SDK stamps every
@@ -47,7 +47,7 @@ export interface WorkerCodegenOptions {
 
 export function generateWorkerEntry(opts: WorkerCodegenOptions): string {
   // The asset-serving hook is a library helper (`assets`), not inlined string
-  // logic — imported only when the domain declares a `client` binding.
+  // logic — imported only when this adapter env serves client assets.
   const serverImport = opts.hasClient
     ? `import { assets, domainWorkerEntry } from '@astrale-os/sdk/server'`
     : `import { domainWorkerEntry } from '@astrale-os/sdk/server'`
@@ -64,7 +64,11 @@ export function generateWorkerEntry(opts: WorkerCodegenOptions): string {
   // routeSubrequest), wired only when the adapter's `router` is set.
   const routerEnvField = router
     ? `
-  ${router.binding}?: { fetch(request: Request): Promise<Response> }`
+  ${router.binding}?: { fetch(request: Request): Promise<Response> }
+  // Sibling WFP services share one dispatch namespace; this binding reaches them
+  // IN-PROCESS (a same-zone public fetch 522s; the instance router doesn't know svc
+  // hosts). Injected by the \`services\` domain at deploy; absent → svc routing no-ops.
+  DISPATCHER?: { get(name: string): { fetch(request: Request): Promise<Response> } }`
     : ''
   const routerHelper = router
     ? `
@@ -79,9 +83,16 @@ function isInstanceHost(host) {
     : ''
   const routerHook = router
     ? `
-  // Divert instance-host subrequests through ${router.binding} (CF 522s a same-zone
-  // Worker→Worker public fetch). No-op when the binding is absent.
-  routeSubrequest: (url, env) => (env.${router.binding} && isInstanceHost(url.hostname) ? env.${router.binding} : null),`
+  // Divert platform subrequests off the same-zone public edge (CF 522s a same-zone
+  // Worker→Worker public fetch). No-op when a binding is absent.
+  routeSubrequest: (url, env) => {
+    const host = url.hostname
+    // Sibling WFP service (<script>.svc.<domain>) → in-process via the dispatch namespace.
+    if (env.DISPATCHER && host.split('.')[1] === 'svc') return env.DISPATCHER.get(host.split('.')[0])
+    // Instance host → router service binding.
+    if (env.${router.binding} && isInstanceHost(host)) return env.${router.binding}
+    return null
+  },`
     : ''
 
   return `// AUTO-GENERATED by @astrale-os/adapter-cloudflare — do not edit.

package/src/index.ts

@@ -5,8 +5,8 @@
  *   import { cloudflare } from '@astrale-os/adapter-cloudflare'
  *
  *   adapter: cloudflare({
- *     dev:  { secrets: '.env.dev' },
- *     prod: { route: 'crm.acme.dev', secrets: '.env.prod' },
+ *     dev:  { client: { dir: 'client' }, secrets: '.env.dev' },
+ *     prod: { client: { dir: 'client' }, route: 'crm.acme.dev', secrets: '.env.prod' },
  *   })
  *
  * `dev` runs `wrangler dev` locally; an env with no `route` ships to

package/src/params.ts

@@ -1,3 +1,5 @@
+import type { ClientConfig } from './client'
+
 /**
  * `CloudflareParams` — the provider-typed config for the Cloudflare adapter.
  *
@@ -11,6 +13,8 @@
  *   • remote (custom)  — `deploy()` with `route`; URL = https://<route>
  */
 export interface CloudflareParams {
+  /** Frontend assets to build and serve for this env's mounted `/ui` views. */
+  client?: ClientConfig
   /**
    * Custom route / hostname for a routed deploy, e.g. `'crm.acme.dev'`. Omit to
    * deploy to `*.workers.dev`. Ignored by local `wrangler dev` (URL is

package/template/CLAUDE.md

@@ -0,0 +1,24 @@
+# astrale-domain
+
+A standalone Astrale domain. The authoring guide is not in this repo — it's the
+`astrale-domain` agent skill. Load it before changing the schema or handlers.
+
+## Agent skills
+
+If the `astrale-domain` / `astrale-cli` skills aren't already available in your
+harness, install them once (user-level):
+
+```bash
+npx skills add astrale-os/cli -g      # both skills · or run `astrale setup`
+```
+
+They install into your agent harness (not this project), so every Astrale
+project picks them up. `astrale update` refreshes them alongside the CLI binary
+and this project's `@astrale-os/*` dependencies.
+
+## Orientation
+
+See `README.md` for the project layout (`schema/`, `core/`, `integrations/`,
+`runtime/`, `views/`, `functions/`, `client/`), the dev/deploy loop, and the
+signing-identity note. `domain.ts` is the one place the domain contract is
+declared.

package/template/README.md

@@ -6,11 +6,18 @@ service (default) or as a worker on your own Cloudflare account.
 
 ## For AI agents
 
-The complete domain-authoring guide ships with this project at
-`.agents/skills/astrale-domain/SKILL.md` — schema modeling, handlers, kernel
-calls, external-API patterns (DI, secrets, idempotency), views, webhooks,
-deploys. Load it before making changes. For CLI operations (auth, instances,
-calls), use the `astrale-cli` skill.
+The complete domain-authoring guide is the `astrale-domain` skill (schema
+modeling, handlers, kernel calls, external-API patterns — DI, secrets,
+idempotency — views, webhooks, deploys); CLI operations (auth, instances, calls)
+are the `astrale-cli` skill. Install both once, user-level:
+
+```bash
+npx skills add astrale-os/cli -g      # both skills · or run `astrale setup`
+```
+
+Then load `astrale-domain` before making changes. (Skills are installed into your
+agent harness, not committed to this project — `astrale update` keeps them, the
+CLI, and your `@astrale-os/*` deps current.)
 
 > **Requires [Bun](https://bun.sh)** — the `astrale-domain` CLI behind `pnpm dev`
 > / `pnpm prod` imports `astrale.config.ts` and your ★ files directly, so it
@@ -38,15 +45,16 @@ domain.ts      wires it all together — the worker-safe definition
 astrale.config.ts   binds the domain to its deploy adapter (node-only)
 ```
 
-`domain.ts` is the one place everything is declared: it imports the modules
-above and passes them to `defineDomain({ schema, methods, deps, views,
-functions, client, … })` alongside the identity (`origin`, `requires`,
-`postInstall`). Nothing is discovered by folder name — a renamed or mistyped
-module is a compile error at that call, never a silently-missing route. Drop a
-field (`deps`, `views`, `functions`, `client`) when the domain has none.
-`astrale.config.ts` then binds that domain to a deploy adapter with
-`deploy(domain, cloudflare({ … }))` — keeping the node-only adapter (wrangler,
-filesystem) out of the worker bundle.
+`domain.ts` is the one place the domain contract is declared: it imports the
+modules above and passes them to `defineDomain({ schema, methods, deps, views,
+functions, … })` alongside the identity (`origin`, `requires`, `postInstall`).
+Nothing is discovered by folder name — a renamed or mistyped module is a compile
+error at that call, never a silently-missing route. Drop a field (`deps`,
+`views`, `functions`) when the domain has none. `astrale.config.ts` then binds
+that domain to a deploy adapter with `deploy(domain, cloudflare({ … }))` and
+chooses, per env, which `client` assets serve mounted `/ui` views — keeping the
+node-only adapter (wrangler, filesystem, frontend builds) out of the worker
+bundle.
 
 Everything else — the Worker entry, the wrangler config, the signing identity —
 is generated under `.astrale/` (gitignored) by the adapter. You never edit it.
@@ -90,7 +98,8 @@ adapter-owned keys `name`, `main`, `assets`, `routes` are rejected (use
 - **Edit a handler** (`core/` logic or `runtime/` wiring) → hot-reloads at the same URL. Nothing to reinstall.
 - **Edit the schema** (`schema/`) → rebuilds the graph; reinstall with `astrale domain install <url> --direct`.
 - **`postInstall`** (the static `Monitor.seed` method) runs once after install, as
-  the system identity, so the domain can seed itself and set its own grants. It
+  the system identity, so the domain can seed `/monitoring/monitors` and
+  `/monitoring/pages/status` and set its own grants. It
   must be a class-hosted static addressed by a typed colon-path
   (`/:origin:class.X:seed`) — the kernel refuses tree paths here.
 

package/template/astrale.config.ts

@@ -18,8 +18,8 @@ import { deploy } from '@astrale-os/sdk'
 //
 //   import { astrale } from '@astrale-os/adapter-astrale'
 //   export default deploy(domain, astrale({
-//     dev: { secrets: '.env.dev' },               // local wrangler dev, unchanged
-//     prod: { instance: '<your-instance-slug>' }, // pnpm prod → managed deploy
+//     dev: { client: { dir: 'client' }, secrets: '.env.dev' },               // local wrangler dev
+//     prod: { client: { dir: 'client' }, instance: '<your-instance-slug>' }, // managed deploy
 //   }))
 
 import { domain } from './domain'
@@ -28,9 +28,9 @@ export default deploy(
   domain,
   cloudflare({
     // Local dev: `wrangler dev`. No route → URL is http://localhost:8787.
-    dev: { secrets: '.env.dev' },
+    dev: { client: { dir: 'client' }, secrets: '.env.dev' },
     // Custom-domain prod. Drop `route` to ship to *.workers.dev instead.
-    prod: { route: 'astrale-domain.example.dev', secrets: '.env.prod' },
+    prod: { client: { dir: 'client' }, route: 'astrale-domain.example.dev', secrets: '.env.prod' },
     // Author secrets ship via `secrets: '.env.prod'` on any env. Extra bindings
     // (KV, R2, D1, queues, …) ride a `wrangler` block on any env (deep-merged).
   }),

package/template/client/README.md

@@ -4,11 +4,11 @@ A small React + Vite SPA that renders the domain's Views. It is loaded inside an
 iframe mounted by the Astrale shell, runs the shell handshake (via the real
 `@astrale-os/shell`) to learn its target node id and a kernel session, fetches
 that node from the kernel, and renders it. The bundled status view loads a
-`Checkable` node (a Monitor or a StatusPage — both carry a `status` prop and a
-`::check` method) and renders its status, with a "Check now" button that calls
-the node's `check` instance method and reloads the node. Built into `../.dist/`
-and served by the generated worker (`.astrale/`) under `/ui/*` via its `ASSETS`
-binding.
+StatusPage, follows its watched Monitor links, and renders the roll-up beside
+the monitored targets, probe timestamps, latency, and HTTP status. "Check now"
+calls the page's `check` instance method and reloads the page plus monitor rows.
+Built into `../.dist/` and served by the generated worker (`.astrale/`) under
+`/ui/*` via its `ASSETS` binding.
 
 ## Built on the real shell SDK
 
@@ -23,8 +23,8 @@ code imports `@/shell`, `@/ui`, `@/status`.
 
 Feature-first: each feature owns its types/api/mappers/hooks/components. The
 `shell/` and `ui/` folders are the generic, domain-neutral seams every feature
-builds on. The template ships ONE feature, `status/`, over a `Checkable` node —
-one card loads the node and exposes its status + a "Check now" action.
+builds on. The template ships ONE feature, `status/`, over a StatusPage and its
+watched Monitor nodes.
 
 ```
 src/
@@ -47,8 +47,8 @@ src/
     value.tsx           #   KV / Mono / ExternalLink
     format.ts           #   relativeTime
     index.ts            #   barrel → @/ui
-  status/               # THE status feature — polymorphic over Checkable nodes
-    status.types.ts     #   CheckableRecord
+  status/               # THE status feature — StatusPage + watched Monitors
+    status.types.ts     #   StatusPanelRecord / CheckableRecord
     status.api.ts       #   check(session, id) → @<id>::check
     status.mappers.ts   #   checkableFromNode (node → record)
     hooks/              #   useCheckable.query / useCheck.mutation

package/template/client/__tests__/app.test.tsx

@@ -50,11 +50,36 @@ function handshake(targetNodeId?: string) {
 const page = (id: string, status: string, name = 'Public status') =>
   checkableNode({ id, name, status, className: 'StatusPage' })
 
+const MONITOR_PATH = '/monitoring/monitors/astrale'
+
+const watchLinks = (critical = true) => [
+  {
+    class: { raw: '/:monitors.astrale.ai:class.watches' },
+    target: { raw: MONITOR_PATH },
+    props: { 'monitors.astrale.ai:class.watches.property.critical': critical },
+  },
+]
+
+const monitor = (status: string, statusCode = 200) =>
+  checkableNode({
+    id: 'monitor-1',
+    path: MONITOR_PATH,
+    name: 'Astrale homepage',
+    status,
+    statusCode,
+    latencyMs: 84,
+    lastCheckedAt: '2026-06-14T11:55:00Z',
+    url: 'https://astrale.ai',
+    className: 'Monitor',
+  })
+
 describe('status view (/ui/status-page)', () => {
-  it('loads the StatusPage node and renders its name + rolled-up status', async () => {
+  it('loads the StatusPage node and renders its watched monitors', async () => {
     const parent = handshake('page-1')
     const kernel = installFakeKernel((body) => {
       if (body.method === '@page-1::get') return ok(page('page-1', 'degraded'))
+      if (body.method === '@page-1::getLinks') return ok(watchLinks())
+      if (body.method === `${MONITOR_PATH}::get`) return ok(monitor('up'))
       return { error: { code: 3002, message: `unexpected: ${body.method}` } }
     })
 
@@ -68,12 +93,16 @@ describe('status view (/ui/status-page)', () => {
       expect(screen.getByText('Public status')).toBeTruthy()
       const badge = screen.getByText('DEGRADED')
       expect(badge.className).toContain('status-degraded')
-      // A StatusPage carries no `url`, so there's no url row.
-      expect(screen.queryByText('url')).toBeNull()
+      expect(screen.getByText('Astrale homepage')).toBeTruthy()
+      expect(screen.getByText('astrale.ai')).toBeTruthy()
+      expect(screen.getByText('Critical')).toBeTruthy()
+      expect(screen.getByText('84ms')).toBeTruthy()
 
-      // Exactly one kernel call, for the node load.
-      expect(kernel.calls).toHaveLength(1)
-      expect(kernel.calls[0]!.body.method).toBe('@page-1::get')
+      expect(kernel.calls.map((c) => c.body.method)).toEqual([
+        '@page-1::get',
+        '@page-1::getLinks',
+        `${MONITOR_PATH}::get`,
+      ])
     } finally {
       kernel.restore()
       parent.restore()
@@ -89,6 +118,8 @@ describe('status view (/ui/status-page)', () => {
         checked = true
         return ok(null)
       }
+      if (body.method === '@page-1::getLinks') return ok(watchLinks())
+      if (body.method === `${MONITOR_PATH}::get`) return ok(monitor(checked ? 'up' : 'down'))
       return ok(page('page-1', checked ? 'up' : 'down'))
     })
 
@@ -96,8 +127,8 @@ describe('status view (/ui/status-page)', () => {
       render(<App />)
       await flush()
 
-      expect(screen.getByText('DOWN')).toBeTruthy()
-      expect(kernel.calls).toHaveLength(1)
+      expect(screen.getAllByText('DOWN').length).toBeGreaterThan(0)
+      expect(kernel.calls).toHaveLength(3)
       expect(kernel.calls[0]!.body.method).toBe('@page-1::get')
 
       await act(async () => {
@@ -108,10 +139,14 @@ describe('status view (/ui/status-page)', () => {
       // A ::check call was issued, then the node was re-fetched.
       expect(kernel.calls.map((c) => c.body.method)).toEqual([
         '@page-1::get',
+        '@page-1::getLinks',
+        `${MONITOR_PATH}::get`,
         '@page-1::check',
         '@page-1::get',
+        '@page-1::getLinks',
+        `${MONITOR_PATH}::get`,
       ])
-      expect(screen.getByText('UP')).toBeTruthy()
+      expect(screen.getAllByText('UP').length).toBeGreaterThan(0)
     } finally {
       kernel.restore()
       parent.restore()
@@ -120,11 +155,14 @@ describe('status view (/ui/status-page)', () => {
 
   it('surfaces a check failure without losing the loaded record', async () => {
     const parent = handshake('page-1')
-    const kernel = installFakeKernel((body) =>
-      body.method === '@page-1::check'
-        ? { error: { code: 2004, message: 'Permission denied' } }
-        : ok(page('page-1', 'up')),
-    )
+    const kernel = installFakeKernel((body) => {
+      if (body.method === '@page-1::check') {
+        return { error: { code: 2004, message: 'Permission denied' } }
+      }
+      if (body.method === '@page-1::getLinks') return ok(watchLinks())
+      if (body.method === `${MONITOR_PATH}::get`) return ok(monitor('up'))
+      return ok(page('page-1', 'up'))
+    })
 
     try {
       render(<App />)
@@ -165,17 +203,18 @@ describe('status view (/ui/status-page)', () => {
 
   it('re-fetches on a setTarget hot-swap', async () => {
     const parent = handshake('page-1')
-    const kernel = installFakeKernel((body) =>
-      body.method === '@page-2::get'
+    const kernel = installFakeKernel((body) => {
+      if (body.method.endsWith('::getLinks')) return ok([])
+      return body.method === '@page-2::get'
         ? ok(page('page-2', 'down', 'Internal status'))
-        : ok(page('page-1', 'up', 'Public status')),
-    )
+        : ok(page('page-1', 'up', 'Public status'))
+    })
 
     try {
       render(<App />)
       await flush()
       expect(screen.getByText('Public status')).toBeTruthy()
-      expect(screen.getByText('UP')).toBeTruthy()
+      expect(screen.getAllByText('UP').length).toBeGreaterThan(0)
 
       // Parent pushes a new target node.
       parent.setTarget('page-2')

package/template/client/__tests__/harness.ts

@@ -250,6 +250,10 @@ export function checkableNode(opts: {
   path?: string
   name?: string
   status?: string
+  url?: string
+  statusCode?: number
+  latencyMs?: number
+  lastCheckedAt?: string
   className?: string
   domain?: string
 }): { id: string; path: string; class: { raw: string }; props: Record<string, unknown> } {
@@ -262,6 +266,18 @@ export function checkableNode(opts: {
   if (opts.status !== undefined) {
     props[`${domain}:class.${className}.property.status`] = opts.status
   }
+  if (opts.url !== undefined) {
+    props[`${domain}:class.${className}.property.url`] = opts.url
+  }
+  if (opts.statusCode !== undefined) {
+    props[`${domain}:class.${className}.property.statusCode`] = opts.statusCode
+  }
+  if (opts.latencyMs !== undefined) {
+    props[`${domain}:class.${className}.property.latencyMs`] = opts.latencyMs
+  }
+  if (opts.lastCheckedAt !== undefined) {
+    props[`${domain}:class.${className}.property.lastCheckedAt`] = opts.lastCheckedAt
+  }
   return {
     id: opts.id,
     path: opts.path ?? `/${opts.id}`,

package/template/client/__tests__/kernel.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
 import { qualifiedString, readProp, readPropBySuffix } from '@/shell'
-import { checkableFromNode } from '@/status'
+import { checkableFromNode, watchedMonitorRefs } from '@/status'
 import { relativeTime } from '@/ui'
 
 import { checkableNode } from './harness'
@@ -36,16 +36,36 @@ describe('checkableFromNode mapper', () => {
     const record = checkableFromNode(
       checkableNode({ id: 'page-1', name: 'Public', status: 'degraded', className: 'StatusPage' }),
     )
-    expect(record).toEqual({ name: 'Public', status: 'degraded' })
+    expect(record).toMatchObject({
+      id: 'page-1',
+      name: 'Public',
+      status: 'degraded',
+      className: 'StatusPage',
+    })
   })
 
   it('falls back to the path segment for the name and unknown for a missing status', () => {
-    const record = checkableFromNode(checkableNode({ id: 'page-9', path: '/status-pages/edge' }))
+    const record = checkableFromNode(
+      checkableNode({ id: 'page-9', path: '/monitoring/pages/edge' }),
+    )
     expect(record.name).toBe('edge')
     expect(record.status).toBe('unknown')
   })
 })
 
+describe('watchedMonitorRefs mapper', () => {
+  it('projects target refs and critical edge weights', () => {
+    const refs = watchedMonitorRefs([
+      {
+        class: { raw: '/:monitors.astrale.ai:class.watches' },
+        target: { raw: '/monitoring/monitors/astrale' },
+        props: { 'monitors.astrale.ai:class.watches.property.critical': true },
+      },
+    ])
+    expect(refs).toEqual([{ target: '/monitoring/monitors/astrale', critical: true }])
+  })
+})
+
 describe('relativeTime', () => {
   const now = Date.parse('2026-06-14T12:00:00Z')
   it('renders coarse buckets and a dash for missing input', () => {

package/template/client/src/shell/use-async.ts

@@ -51,6 +51,9 @@ export function useAsync<T>(fn: () => Promise<T>, deps: unknown[]): AsyncResourc
     // eslint-disable-next-line react-hooks/exhaustive-deps -- deps are the caller's cache key
   }, [...deps, epoch])
 
-  const reload = useCallback(() => setEpoch((e) => e + 1), [])
+  const reload = useCallback(() => {
+    setReloading(true)
+    setEpoch((e) => e + 1)
+  }, [])
   return { state, reload, reloading }
 }