@stacksjs/defaults 0.70.228 → 0.70.230

package/resources/components/Dashboard/Infrastructure/ServerDetailsDashboard.stx

@@ -0,0 +1,203 @@
+<script client>
+import type {
+  DashboardCloudEnvironment,
+  DashboardCloudOperation,
+  DashboardCloudProject,
+  DashboardServerDefinition,
+  DashboardServerDeployment,
+} from '../../../../app/Actions/Dashboard/Cloud/cloud-overview'
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+interface ServerDetailResponse {
+  project: DashboardCloudProject
+  kind: 'configuration' | 'deployment'
+  server: DashboardServerDefinition | null
+  deployment: DashboardServerDeployment | null
+  environment: DashboardCloudEnvironment | null
+  generatedAt: string
+}
+
+const route = useRoute()
+const detail = state<ServerDetailResponse | null>(null)
+const loading = state(true)
+const loadError = state('')
+
+const title = derived(() => detail()?.server?.name || detail()?.deployment?.serverName || 'Server details')
+const status = derived(() => detail()?.server?.status || detail()?.deployment?.status || 'inactive')
+const kindLabel = derived(() => {
+  if (!detail())
+    return 'Inspect desired configuration or persisted deployment state.'
+  return detail()?.kind === 'deployment' ? 'Persisted deployment' : 'Compute configuration'
+})
+const serverDisk = derived(() => {
+  const server = detail()?.server
+  return server ? diskLabel(server) : 'Not set'
+})
+const resizeSummary = derived(() => {
+  const operation = detail()?.deployment?.operation
+  return operation ? operationSummary(operation) : ''
+})
+
+function formatDate(value: string | null): string {
+  if (!value)
+    return 'Not recorded'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? 'Not recorded'
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+function diskLabel(server: DashboardServerDefinition): string {
+  if (server.diskGb === null)
+    return 'Not set'
+  return `${server.diskGb} GB${server.diskType ? ` ${server.diskType}` : ''}`
+}
+
+function operationSummary(operation: DashboardCloudOperation): string {
+  const source = operation.sourceType || 'current size'
+  const target = operation.targetType || 'requested size'
+  return `${source} to ${target}`
+}
+
+async function loadServer(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  const identifier = String(route.params.id || '')
+  if (!identifier) {
+    detail.set(null)
+    loadError.set('A server identifier is required.')
+    loading.set(false)
+    return
+  }
+
+  try {
+    const result = await dashboardApi<ServerDetailResponse>(`/api/dashboard/servers/${encodeURIComponent(identifier)}`)
+    const hasExpectedRecord = result?.kind === 'configuration'
+      ? Boolean(result.server)
+      : result?.kind === 'deployment'
+        ? Boolean(result.deployment)
+        : false
+    if (!result?.project || !hasExpectedRecord)
+      throw new Error('The server API returned incomplete state.')
+    detail.set(result)
+  }
+  catch (error) {
+    detail.set(null)
+    loadError.set(error instanceof Error ? error.message : 'Server state could not be loaded.')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+onMount(() => {
+  void loadServer()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <div class="flex gap-2 items-center">
+        <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">{{ title() }}</h1>
+        <CloudStatusBadge :if="detail()" :status="status()" />
+      </div>
+      <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ detail() ? kindLabel() + ' from the current cloud snapshot.' : kindLabel() }}</p>
+    </div>
+    <div class="flex gap-3 items-center">
+      <Button variant="secondary" :loading="loading()" @click="loadServer">
+        <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+        Refresh
+      </Button>
+      <StxLink to="/servers" class="inline-flex gap-2 items-center font-semibold text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500">
+        <span class="h-4 w-4 i-hugeicons-arrow-left-01"></span>
+        Back to Servers
+      </StxLink>
+    </div>
+  </header>
+
+  <div :if="loading()" class="flex items-center justify-center py-20 text-neutral-500 text-sm dark:text-neutral-400 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+    <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
+    Loading server state...
+  </div>
+
+  <div :if="!loading() && loadError()" role="alert" class="p-6 text-center bg-white dark:bg-neutral-900 border border-red-200 rounded-xl dark:border-red-900">
+    <span class="inline-block h-8 w-8 text-red-500 i-hugeicons-alert-02"></span>
+    <h2 class="mt-3 font-semibold text-neutral-900 dark:text-white">Server state unavailable</h2>
+    <p class="mt-2 text-neutral-500 text-sm dark:text-neutral-400">{{ loadError() }}</p>
+    <Button class="mt-4" @click="loadServer">Try again</Button>
+  </div>
+
+  <template :if="!loading() && detail()">
+    <section class="grid gap-3 grid-cols-2 xl:grid-cols-4">
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+        <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Provider</p>
+        <p class="mt-2 capitalize font-semibold text-lg text-neutral-900 dark:text-white">{{ detail()?.project.provider }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+        <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Project mode</p>
+        <p class="mt-2 capitalize font-semibold text-lg text-neutral-900 dark:text-white">{{ detail()?.project.mode }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+        <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Region</p>
+        <p class="mt-2 font-semibold text-lg text-neutral-900 dark:text-white">{{ detail()?.server?.region || detail()?.environment?.region || detail()?.project.region }}</p>
+      </div>
+      <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+        <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Snapshot</p>
+        <p class="mt-2 font-medium text-neutral-900 text-sm dark:text-white">{{ formatDate(detail()?.generatedAt || null) }}</p>
+      </div>
+    </section>
+
+    <section :if="detail()?.server" class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <header class="px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
+        <h2 class="font-semibold text-neutral-900 dark:text-white">Desired compute configuration</h2>
+        <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Declared in config/cloud.ts. This does not assert that an instance is running.</p>
+      </header>
+      <dl class="grid gap-x-8 gap-y-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 p-5 text-sm">
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Configuration key</dt><dd class="mt-1 font-medium font-mono text-neutral-900 dark:text-white">{{ detail()?.server?.key }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Role</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.server?.role }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Size</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.server?.size }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Instances</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.server?.instances }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Disk</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ serverDisk() }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Disk encryption</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.server?.encrypted ? 'Enabled' : 'Not enabled' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Domain</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.server?.domain || 'Not set' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Operating system</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.server?.operatingSystem || 'Not set' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Bun version</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.server?.bunVersion || 'Not set' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Database</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.server?.database || 'Not set' }}</dd></div>
+      </dl>
+    </section>
+
+    <section :if="detail()?.deployment" class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <header class="px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
+        <h2 class="font-semibold text-neutral-900 dark:text-white">Persisted deployment state</h2>
+        <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Recorded by ts-cloud. Values are not live provider health checks.</p>
+      </header>
+      <dl class="grid gap-x-8 gap-y-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 p-5 text-sm">
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Stack</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.deployment?.stackName }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Environment</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.deployment?.environment || 'Not mapped' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Provider</dt><dd class="mt-1 capitalize font-medium text-neutral-900 dark:text-white">{{ detail()?.deployment?.provider }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Public IPv4</dt><dd class="mt-1 font-medium font-mono text-neutral-900 dark:text-white">{{ detail()?.deployment?.publicIp || 'Not recorded' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">Public IPv6</dt><dd class="mt-1 break-all font-medium font-mono text-neutral-900 dark:text-white">{{ detail()?.deployment?.publicIpv6 || 'Not recorded' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">SSH user</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ detail()?.deployment?.sshUser || 'Not recorded' }}</dd></div>
+        <div><dt class="text-neutral-500 dark:text-neutral-400">State recorded</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ formatDate(detail()?.deployment?.recordedAt || null) }}</dd></div>
+      </dl>
+      <div :if="detail()?.deployment?.operation" class="mb-5 mx-5 p-4 text-amber-900 dark:text-amber-100 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-xl dark:border-amber-900/70">
+        <div class="flex gap-3 items-center justify-between">
+          <h3 class="font-semibold text-sm">Resize operation</h3>
+          <CloudStatusBadge :status="detail()?.deployment?.status || 'attention'" />
+        </div>
+        <p class="mt-2 text-sm">{{ resizeSummary() }}</p>
+        <p class="mt-2 text-amber-700 text-xs dark:text-amber-300">Phase {{ detail()?.deployment?.operation?.phase }} · {{ detail()?.deployment?.operation?.status }} · {{ detail()?.deployment?.operation?.attempts || 0 }} attempts</p>
+        <p class="mt-1 text-amber-700 text-xs dark:text-amber-300">Updated {{ formatDate(detail()?.deployment?.operation?.updatedAt || null) }}</p>
+      </div>
+    </section>
+
+    <section class="flex gap-4 items-start p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <span class="flex items-center justify-center shrink-0 h-10 w-10 text-neutral-600 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800 rounded-xl"><span class="h-5 w-5 i-hugeicons-shield-01"></span></span>
+      <div>
+        <h2 class="font-semibold text-neutral-900 dark:text-white">Firewall state unavailable</h2>
+        <p class="mt-1 max-w-3xl leading-6 text-neutral-500 text-sm dark:text-neutral-400">The dashboard does not currently have a provider-backed firewall reader or mutation endpoint. No firewall rules are inferred, displayed, added, or removed from this page.</p>
+      </div>
+    </section>
+  </template>
+</div>

package/resources/components/Dashboard/Infrastructure/ServerlessDashboard.stx

@@ -0,0 +1,246 @@
+<script client>
+import type {
+  DashboardCloudEnvironment,
+  DashboardCloudEvent,
+  DashboardCloudLink,
+  DashboardCloudProject,
+  DashboardCloudResource,
+  DashboardCloudService,
+} from '../../../../app/Actions/Dashboard/Cloud/cloud-overview'
+import { dashboardApi } from '../../../../functions/dashboard-api'
+
+interface ServerlessResponse {
+  project: DashboardCloudProject
+  environments: DashboardCloudEnvironment[]
+  services: DashboardCloudService[]
+  links: DashboardCloudLink[]
+  events: DashboardCloudEvent[]
+  generatedAt: string
+}
+
+interface ManifestGroup {
+  environment: string
+  resources: DashboardCloudResource[]
+}
+
+const project = state<DashboardCloudProject>({
+  name: 'Cloud project',
+  slug: 'app',
+  mode: 'server',
+  provider: 'not configured',
+  region: 'not configured',
+})
+const environments = state<DashboardCloudEnvironment[]>([])
+const services = state<DashboardCloudService[]>([])
+const links = state<DashboardCloudLink[]>([])
+const events = state<DashboardCloudEvent[]>([])
+const generatedAt = state('')
+const loading = state(true)
+const loadError = state('')
+const selectedResource = state<DashboardCloudResource | null>(null)
+
+const serviceResources = derived<DashboardCloudResource[]>(() => services().map(service => ({
+  id: service.id,
+  name: service.name,
+  type: service.type,
+  category: service.type,
+  status: service.status,
+  environment: service.environment,
+  description: service.description,
+  details: [
+    ...(service.environment ? [{ label: 'Environment', value: service.environment }] : []),
+    ...service.details,
+    { label: 'Outgoing connections', value: String(links().filter(link => link.source === service.id).length) },
+    { label: 'Incoming connections', value: String(links().filter(link => link.target === service.id).length) },
+  ],
+})))
+const manifestGroups = derived<ManifestGroup[]>(() => {
+  const resources = serviceResources()
+  const names = Array.from(new Set(resources.map(resource => resource.environment || 'unmapped')))
+  return names.map(environment => ({
+    environment,
+    resources: resources.filter(resource => (resource.environment || 'unmapped') === environment),
+  }))
+})
+const serviceNames = derived<Record<string, string>>(() => Object.fromEntries(services().map(service => [service.id, service.name])))
+const serviceTypes = derived(() => new Set(services().map(service => service.type)).size)
+
+function formatDate(value: string | null): string {
+  if (!value)
+    return 'Not recorded'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? 'Not recorded'
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+}
+
+function eventIcon(event: DashboardCloudEvent): string {
+  if (event.type === 'attention')
+    return 'i-hugeicons-alert-02 text-amber-500'
+  if (event.type === 'success')
+    return 'i-hugeicons-checkmark-circle-02 text-green-500'
+  return 'i-hugeicons-information-circle text-blue-500'
+}
+
+function relationshipName(id: string): string {
+  return serviceNames()[id] || id
+}
+
+function closeResource(): void {
+  selectedResource.set(null)
+}
+
+async function loadServerless(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const response = await dashboardApi<ServerlessResponse>('/api/dashboard/serverless')
+    project.set(response.project)
+    environments.set(Array.isArray(response.environments) ? response.environments : [])
+    services.set(Array.isArray(response.services) ? response.services : [])
+    links.set(Array.isArray(response.links) ? response.links : [])
+    events.set(Array.isArray(response.events) ? response.events : [])
+    generatedAt.set(response.generatedAt || '')
+  }
+  catch (error) {
+    environments.set([])
+    services.set([])
+    links.set([])
+    events.set([])
+    generatedAt.set('')
+    loadError.set(error instanceof Error ? error.message : 'Serverless state could not be loaded.')
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === 'Escape')
+    closeResource()
+})
+
+onMount(() => {
+  void loadServerless()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <div class="flex gap-2 items-center">
+        <h1 class="font-semibold text-2xl text-neutral-900 tracking-tight dark:text-white">Serverless infrastructure</h1>
+        <CloudStatusBadge :status="services().length > 0 ? 'configured' : 'inactive'" />
+      </div>
+      <p class="mt-1 max-w-2xl text-neutral-500 text-sm dark:text-neutral-400">Services and relationships derived only from environment application manifests in config/cloud.ts.</p>
+    </div>
+    <Button variant="secondary" :loading="loading()" @click="loadServerless">
+      <span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </header>
+
+  <div :if="loadError()" role="alert" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-xl dark:border-red-900">
+    <span>{{ loadError() }}</span>
+    <Button variant="secondary" size="sm" @click="loadServerless">Try again</Button>
+  </div>
+
+  <section class="grid gap-3 grid-cols-2 xl:grid-cols-4">
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Services</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ services().length }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Relationships</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ links().length }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Service types</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ serviceTypes() }}</p>
+    </div>
+    <div class="p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <p class="text-neutral-500 text-xs uppercase dark:text-neutral-400">Manifest environments</p>
+      <p class="mt-2 font-semibold text-neutral-900 text-xl dark:text-white">{{ environments().length }}</p>
+    </div>
+  </section>
+
+  <section :if="!loading() && services().length === 0" class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+    <div class="grid lg:grid-cols-[minmax(0,1fr)_22rem]">
+      <div class="p-6 sm:p-8">
+        <span class="inline-flex items-center justify-center h-11 w-11 text-neutral-500 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
+          <span class="h-6 w-6 i-hugeicons-function"></span>
+        </span>
+        <h2 class="mt-5 font-semibold text-lg text-neutral-900 dark:text-white">No serverless application manifests</h2>
+        <p class="mt-2 max-w-xl leading-6 text-neutral-600 text-sm dark:text-neutral-300">
+          {{ project().mode === 'server'
+            ? 'This project is configured for server deployment and no environment app manifests are present.'
+            : 'Serverless mode is selected, but no environment app manifests are present.' }}
+        </p>
+        <p class="mt-3 font-mono text-neutral-500 text-xs dark:text-neutral-400">Source: config/cloud.ts → environments.*.app</p>
+        <StxLink to="/cloud" class="inline-flex gap-2 items-center mt-6 font-semibold text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500">
+          Inspect cloud configuration
+          <span class="h-4 w-4 i-hugeicons-arrow-right-01"></span>
+        </StxLink>
+      </div>
+      <div class="p-6 text-neutral-200 bg-neutral-950 border-neutral-800 lg:border-l">
+        <p class="text-neutral-400 text-xs uppercase">Current project</p>
+        <dl class="mt-5 space-y-4">
+          <div><dt class="text-neutral-500 text-xs">Mode</dt><dd class="mt-1 capitalize font-semibold">{{ project().mode }}</dd></div>
+          <div><dt class="text-neutral-500 text-xs">Provider</dt><dd class="mt-1 capitalize font-semibold">{{ project().provider }}</dd></div>
+          <div><dt class="text-neutral-500 text-xs">Region</dt><dd class="mt-1 font-mono text-sm">{{ project().region }}</dd></div>
+        </dl>
+      </div>
+    </div>
+  </section>
+
+  <section :if="services().length > 0">
+    <div>
+      <h2 class="font-semibold text-neutral-900 dark:text-white">Manifest services</h2>
+      <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Each card is a configured service, not an inferred provider capability.</p>
+    </div>
+    <div class="mt-5 space-y-6">
+      <section :for="group in manifestGroups()">
+        <div class="flex gap-2 items-center">
+          <h3 class="font-semibold text-neutral-700 text-sm dark:text-neutral-200">{{ group.environment }}</h3>
+          <span class="px-2 py-0.5 text-neutral-600 text-xs dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800 rounded-full">{{ group.resources.length }}</span>
+        </div>
+        <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3 mt-3">
+          <CloudResourceButton :for="resource in group.resources" :item="resource" @inspect="selectedResource.set($event)" />
+        </div>
+      </section>
+    </div>
+  </section>
+
+  <section :if="links().length > 0">
+    <h2 class="font-semibold text-neutral-900 dark:text-white">Manifest relationships</h2>
+    <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Accessible relationship records derived from the same manifests.</p>
+    <ul class="grid gap-3 md:grid-cols-2 mt-4">
+      <li :for="link in links()" class="flex gap-3 items-center p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+        <span class="font-semibold text-neutral-900 text-sm truncate dark:text-white">{{ relationshipName(link.source) }}</span>
+        <span class="shrink-0 px-2 py-1 text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">{{ link.type }}</span>
+        <span class="h-4 w-4 text-neutral-400 i-hugeicons-arrow-right-01"></span>
+        <span class="font-semibold text-neutral-900 text-sm truncate dark:text-white">{{ relationshipName(link.target) }}</span>
+      </li>
+    </ul>
+  </section>
+
+  <section :if="events().length > 0">
+    <h2 class="font-semibold text-neutral-900 dark:text-white">Recorded serverless events</h2>
+    <div class="mt-3 bg-white dark:bg-neutral-900 border border-neutral-200 divide-neutral-200 divide-y rounded-xl dark:border-neutral-700 dark:divide-neutral-700">
+      <article :for="event in events()" class="flex gap-3 p-4">
+        <span :class="'shrink-0 mt-0.5 h-5 w-5 ' + eventIcon(event)"></span>
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+            <p class="font-semibold text-neutral-900 text-sm dark:text-white">{{ event.service }}</p>
+            <time class="text-neutral-500 text-xs dark:text-neutral-400">{{ formatDate(event.timestamp) }}</time>
+          </div>
+          <p class="mt-1 text-neutral-600 text-sm dark:text-neutral-300">{{ event.message }}</p>
+        </div>
+      </article>
+    </div>
+  </section>
+
+  <footer :if="generatedAt()" class="text-neutral-400 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</footer>
+
+  <CloudDetailsDialog :open="Boolean(selectedResource())" :item="selectedResource()" @close="closeResource" />
+</div>