@astrale-os/adapter-cloudflare 0.2.0 → 0.3.0

package/template/client/src/status/components/StatusCard.tsx

@@ -10,10 +10,35 @@
  */
 import type { KernelClient } from '@/shell'
 
-import { ErrorBanner, Panel, Spinner, StatusBadge } from '@/ui'
+import {
+  EmptyState,
+  ErrorBanner,
+  ExternalLink,
+  Mono,
+  Panel,
+  relativeTime,
+  Spinner,
+  StatusBadge,
+} from '@/ui'
+
+import type { WatchedMonitorRecord } from '../status.types'
 
 import { useCheck, useCheckable } from '../hooks'
 
+function latestCheckedAt(monitors: WatchedMonitorRecord[]): string | undefined {
+  let latest = 0
+  let latestIso: string | undefined
+  for (const monitor of monitors) {
+    if (!monitor.lastCheckedAt) continue
+    const time = Date.parse(monitor.lastCheckedAt)
+    if (!Number.isNaN(time) && time > latest) {
+      latest = time
+      latestIso = monitor.lastCheckedAt
+    }
+  }
+  return latestIso
+}
+
 export function StatusCard({ session, nodeId }: { session: KernelClient; nodeId: string }) {
   const checkable = useCheckable(session, nodeId)
   const check = useCheck(session, nodeId)
@@ -31,9 +56,14 @@ export function StatusCard({ session, nodeId }: { session: KernelClient; nodeId:
 
   const record = checkable.record!
   const checking = check.phase === 'running'
+  const busy = checking || checkable.reloading
+  const monitors = record.monitors
+  const criticalCount = monitors.filter((monitor) => monitor.critical).length
+  const downCount = monitors.filter((monitor) => monitor.status === 'down').length
+  const lastChecked = latestCheckedAt(monitors)
   const checkButton = (
-    <button type="button" className="check-btn" onClick={checkNow} disabled={checking}>
-      {checking ? 'Checking…' : 'Check now'}
+    <button type="button" className="check-btn" onClick={checkNow} disabled={busy}>
+      {checking ? 'Checking...' : checkable.reloading ? 'Refreshing...' : 'Check now'}
     </button>
   )
 
@@ -42,9 +72,89 @@ export function StatusCard({ session, nodeId }: { session: KernelClient; nodeId:
       {check.phase === 'failed' && check.error && (
         <ErrorBanner>Check failed: {check.error}</ErrorBanner>
       )}
-      <div className="status-row">
-        <StatusBadge status={record.status} />
+      <div className="status-dashboard">
+        <div className="status-overview">
+          <div>
+            <p className="status-label">Overall health</p>
+            <StatusBadge status={record.status} />
+          </div>
+          <div className="summary-grid" aria-label="Monitoring summary">
+            <div className="summary-cell">
+              <span className="summary-value">{monitors.length}</span>
+              <span className="summary-label">monitors</span>
+            </div>
+            <div className="summary-cell">
+              <span className="summary-value">{criticalCount}</span>
+              <span className="summary-label">critical</span>
+            </div>
+            <div className="summary-cell">
+              <span className="summary-value">{downCount}</span>
+              <span className="summary-label">down</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="status-meta">
+          <span>Page path</span>
+          <Mono value={record.path} />
+          <span>Last checked</span>
+          <span className="mono" title={lastChecked}>
+            {relativeTime(lastChecked)}
+          </span>
+        </div>
+
+        <section className="monitor-section" aria-label="Watched monitors">
+          <div className="monitor-section-head">
+            <h3>Watched monitors</h3>
+            {checkable.reloading && <span className="refreshing">Refreshing</span>}
+          </div>
+
+          {monitors.length === 0 ? (
+            <EmptyState hint="StatusPage.add({ monitor, critical })">
+              This page is not watching any monitors yet.
+            </EmptyState>
+          ) : (
+            <div className="monitor-list">
+              {monitors.map((monitor) => (
+                <MonitorRow key={`${monitor.path}:${monitor.critical}`} monitor={monitor} />
+              ))}
+            </div>
+          )}
+        </section>
       </div>
     </Panel>
   )
 }
+
+function MonitorRow({ monitor }: { monitor: WatchedMonitorRecord }) {
+  return (
+    <article className="monitor-row">
+      <div className="monitor-status">
+        <StatusBadge status={monitor.status} />
+        <span className={monitor.critical ? 'weight weight-critical' : 'weight'}>
+          {monitor.critical ? 'Critical' : 'Standard'}
+        </span>
+      </div>
+
+      <div className="monitor-main">
+        <h4>{monitor.name}</h4>
+        <ExternalLink url={monitor.url} />
+      </div>
+
+      <dl className="monitor-metrics">
+        <div>
+          <dt>HTTP</dt>
+          <dd>{monitor.statusCode ?? '-'}</dd>
+        </div>
+        <div>
+          <dt>Latency</dt>
+          <dd>{monitor.latencyMs === undefined ? '-' : `${monitor.latencyMs}ms`}</dd>
+        </div>
+        <div>
+          <dt>Checked</dt>
+          <dd title={monitor.lastCheckedAt}>{relativeTime(monitor.lastCheckedAt)}</dd>
+        </div>
+      </dl>
+    </article>
+  )
+}

package/template/client/src/status/hooks/useCheckable.query.ts

@@ -1,64 +1,72 @@
-/** Load a checkable node → typed record, with a `reload()` for post-check refresh. */
-import { useCallback, useRef, useState } from 'react'
+/** Load a status page with its watched monitors, with reload for post-check refresh. */
 
-import { type KernelClient, useNode } from '@/shell'
+import { type KernelClient, type KernelNode, useAsync } from '@/shell'
 
-import type { CheckableRecord } from '../status.types'
+import type { StatusPanelRecord, WatchedMonitorRecord } from '../status.types'
 
-import { checkableFromNode } from '../status.mappers'
+import { getCheckable, getLinks, getNodeRef } from '../status.api'
+import { checkableFromNode, monitorFromRef, watchedMonitorRefs } from '../status.mappers'
 
 export type CheckableQuery = {
-  /** Lifecycle of the underlying `@<id>::get`. */
+  /** Lifecycle of the underlying page + monitor graph read. */
   state: 'idle' | 'loading' | 'error' | 'ok'
   /** The projected record once `ok`. */
-  record?: CheckableRecord
+  record?: StatusPanelRecord
   /** Failure message once `error`. */
   message?: string
-  /** Re-fetch the node — call after `check` mutates it server-side. */
+  /** Re-fetch the page and watched monitors after `check` mutates them. */
   reload(): void
   /** True while a `reload()`-triggered re-fetch is in flight. */
   reloading: boolean
 }
 
+async function loadMonitor(
+  session: KernelClient,
+  ref: ReturnType<typeof watchedMonitorRefs>[number],
+): Promise<WatchedMonitorRecord> {
+  try {
+    const node = (await getNodeRef(session, ref.target)) as KernelNode
+    return { ...checkableFromNode(node), critical: ref.critical }
+  } catch {
+    return monitorFromRef(ref)
+  }
+}
+
+async function loadStatusPanel(session: KernelClient, nodeId: string): Promise<StatusPanelRecord> {
+  const page = checkableFromNode((await getCheckable(session, nodeId)) as KernelNode)
+  if (page.className !== 'StatusPage') return { ...page, monitors: [] }
+
+  const refs = watchedMonitorRefs(await getLinks(session, nodeId))
+  const monitors = await Promise.all(refs.map((ref) => loadMonitor(session, ref)))
+  return { ...page, monitors }
+}
+
 /**
- * Load the checkable node `nodeId` and project it to a `CheckableRecord`. Wraps
- * `useNode` (which owns the `@<id>::get` + the hot-swap re-fetch) and re-exposes
- * its `reload()` so the view can refresh after a `check`. `reloading` is true
- * from the moment `reload()` is called until the re-fetch settles — distinct from
- * the initial `loading`, so the view can show the existing record meanwhile.
+ * Load the status page `nodeId`, then its outgoing `watches` targets. The view
+ * calls `reload()` after `::check`, so the rolled-up page status and all monitor
+ * rows refresh together.
  */
 export function useCheckable(session: KernelClient, nodeId: string): CheckableQuery {
-  const node = useNode(session, nodeId)
-  const [reloading, setReloading] = useState(false)
-  // Two-phase reload tracker. `reload()` arms it as `'requested'`; once we
-  // observe `useNode` enter `loading` it advances to `'loading'`; the next time
-  // it leaves `loading` the re-fetch has settled, so we clear `reloading`. The
-  // two phases avoid clearing on the synchronous render BEFORE the effect runs
-  // (when the status is still the pre-reload `ok`).
-  const phase = useRef<'idle' | 'requested' | 'loading'>('idle')
-
-  if (phase.current === 'requested' && node.status === 'loading') {
-    phase.current = 'loading'
-  } else if (phase.current === 'loading' && node.status !== 'loading') {
-    phase.current = 'idle'
-    if (reloading) setReloading(false)
-  }
-
-  const nodeReload = node.reload
-  const reload = useCallback(() => {
-    phase.current = 'requested'
-    setReloading(true)
-    nodeReload()
-  }, [nodeReload])
+  const resource = useAsync(() => loadStatusPanel(session, nodeId), [session, nodeId])
 
-  switch (node.status) {
+  switch (resource.state.status) {
     case 'ok':
-      return { state: 'ok', record: checkableFromNode(node.node), reload, reloading }
+      return {
+        state: 'ok',
+        record: resource.state.data,
+        reload: resource.reload,
+        reloading: resource.reloading,
+      }
     case 'error':
-      return { state: 'error', message: node.message, reload, reloading }
+      return {
+        state: 'error',
+        message: resource.state.message,
+        reload: resource.reload,
+        reloading: resource.reloading,
+      }
     case 'loading':
-      return { state: 'loading', reload, reloading }
+      return { state: 'loading', reload: resource.reload, reloading: resource.reloading }
     default:
-      return { state: 'idle', reload, reloading }
+      return { state: 'idle', reload: resource.reload, reloading: resource.reloading }
   }
 }

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

@@ -3,5 +3,5 @@
 export * from './components'
 export * from './hooks'
 export { check } from './status.api'
-export { checkableFromNode } from './status.mappers'
-export type { CheckableRecord } from './status.types'
+export { checkableFromNode, watchedMonitorRefs } from './status.mappers'
+export type { CheckableRecord, StatusPanelRecord, WatchedMonitorRecord } from './status.types'

package/template/client/src/status/status.api.ts

@@ -1,5 +1,5 @@
 /** Raw kernel calls for the status feature — node instance methods. */
-import { invokeNode, type KernelClient } from '@/shell'
+import { callMethod, invokeNode, type KernelClient } from '@/shell'
 
 /**
  * Run a checkable node's `check` instance method (`@<id>::check`). The single
@@ -10,3 +10,20 @@ import { invokeNode, type KernelClient } from '@/shell'
 export function check(session: KernelClient, nodeId: string): Promise<unknown> {
   return invokeNode(session, nodeId, 'check', {})
 }
+
+export function getCheckable(session: KernelClient, nodeId: string): Promise<unknown> {
+  return invokeNode(session, nodeId, 'get', {})
+}
+
+export function getLinks(session: KernelClient, nodeId: string): Promise<unknown> {
+  return invokeNode(session, nodeId, 'getLinks', { direction: 'out' })
+}
+
+function getRefMethod(ref: string): string {
+  if (ref.startsWith('/') || ref.startsWith('@')) return `${ref}::get`
+  return `@${ref}::get`
+}
+
+export function getNodeRef(session: KernelClient, ref: string): Promise<unknown> {
+  return callMethod(session, getRefMethod(ref), {})
+}

package/template/client/src/status/status.mappers.ts

@@ -1,19 +1,102 @@
-/** Node → typed record transform for the status feature. */
-import { type KernelNode, PROP, readProp, readPropBySuffix } from '@/shell'
+/** Kernel graph payloads -> typed records for the status feature. */
+import {
+  classShortName,
+  type KernelNode,
+  PROP,
+  qualifiedProp,
+  qualifiedString,
+  readProp,
+} from '@/shell'
 
-import type { CheckableRecord } from './status.types'
+import type { CheckableRecord, WatchedMonitorRecord } from './status.types'
 
 const lastSegment = (path: string): string => path.split('/').filter(Boolean).pop() ?? path
 
+function numericProp(props: Record<string, unknown>, name: string): number | undefined {
+  const value = qualifiedProp(props, name)
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (typeof value === 'string' && value.trim() !== '') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) return parsed
+  }
+  return undefined
+}
+
 /**
  * Project a `Checkable` `KernelNode` into a `CheckableRecord`: the name from the
- * kernel `Named.name` key, the domain-qualified `status` read by suffix (default
- * `'unknown'`).
+ * kernel `Named.name` key, plus any monitor details the node carries.
  */
 export function checkableFromNode(node: KernelNode): CheckableRecord {
   const p = node.props ?? {}
   return {
+    id: node.id,
+    path: node.path ?? `@${node.id}`,
+    className: classShortName(node),
     name: readProp(p, PROP.named.name) ?? lastSegment(node.path ?? '') ?? node.id,
-    status: readPropBySuffix(p, '.property.status') ?? 'unknown',
+    status: qualifiedString(p, 'status') ?? 'unknown',
+    url: qualifiedString(p, 'url'),
+    statusCode: numericProp(p, 'statusCode'),
+    latencyMs: numericProp(p, 'latencyMs'),
+    lastCheckedAt: qualifiedString(p, 'lastCheckedAt'),
+  }
+}
+
+type RawLink = {
+  class?: unknown
+  edgeClass?: unknown
+  target?: unknown
+  to?: unknown
+  props?: Record<string, unknown>
+}
+
+function rawString(value: unknown): string | undefined {
+  if (typeof value === 'string' && value !== '') return value
+  if (value && typeof value === 'object') {
+    const raw = (value as { raw?: unknown }).raw
+    if (typeof raw === 'string' && raw !== '') return raw
+  }
+  return undefined
+}
+
+function rawLinks(raw: unknown): RawLink[] {
+  if (Array.isArray(raw)) return raw as RawLink[]
+  const obj = raw as { links?: RawLink[]; edges?: RawLink[] } | null
+  return obj?.links ?? obj?.edges ?? []
+}
+
+function booleanProp(props: Record<string, unknown> | undefined, name: string): boolean {
+  if (!props) return false
+  const direct = props[name]
+  if (typeof direct === 'boolean') return direct
+  return qualifiedProp(props, name) === true
+}
+
+export type WatchedMonitorRef = {
+  target: string
+  critical: boolean
+}
+
+/** Parse outgoing StatusPage `watches` edges into target refs and roll-up weight. */
+export function watchedMonitorRefs(raw: unknown): WatchedMonitorRef[] {
+  const out: WatchedMonitorRef[] = []
+  for (const link of rawLinks(raw)) {
+    const cls = rawString(link.class) ?? rawString(link.edgeClass) ?? ''
+    if (cls && !cls.endsWith('class.watches') && !cls.endsWith('.watches')) continue
+    const target = rawString(link.target) ?? rawString(link.to)
+    if (!target) continue
+    out.push({ target, critical: booleanProp(link.props, 'critical') })
+  }
+  return out
+}
+
+/** Fallback row when a linked monitor ref exists but the target cannot be loaded. */
+export function monitorFromRef(ref: WatchedMonitorRef): WatchedMonitorRecord {
+  return {
+    id: ref.target,
+    path: ref.target,
+    className: 'Monitor',
+    name: lastSegment(ref.target.replace(/^@/, '')),
+    status: 'unknown',
+    critical: ref.critical,
   }
 }

package/template/client/src/status/status.types.ts

@@ -1,11 +1,26 @@
-/** The status feature's client type — what a `Checkable` node projects to. */
+/** The status feature's client types — what graph nodes project to. */
 
 /**
  * Client-side projection of the `Checkable` node the view renders (a StatusPage).
- * `status` stays a plain string — the page's rolled-up verdict
+ * `status` stays a plain string — the subject's verdict
  * (up/degraded/down/unknown), which `StatusBadge` renders.
  */
 export type CheckableRecord = {
+  id: string
+  path: string
+  className: string
   name: string
   status: string
+  url?: string
+  statusCode?: number
+  latencyMs?: number
+  lastCheckedAt?: string
+}
+
+export type WatchedMonitorRecord = CheckableRecord & {
+  critical: boolean
+}
+
+export type StatusPanelRecord = CheckableRecord & {
+  monitors: WatchedMonitorRecord[]
 }