@voltro/cli 0.28.0 → 0.29.0

package/templates/apps/frontend-status/src/pages/page.tsx

@@ -0,0 +1,136 @@
+// `/` — the public status page. `renderMode: 'ssr'`, fed by the sibling api:
+// the loader bakes the current incidents + components + updates into the first
+// paint (crawlable), then the component upgrades each to live with
+// `useSubscription`, so a newly-declared or resolved incident lands on every
+// open page within seconds — no polling.
+import type { ReactNode } from 'react'
+import { useLoaderData, type LoaderFn, type PageMeta } from '@voltro/web'
+import { useSubscription } from '@voltro/client'
+import { T } from '@voltro/i18n'
+import { getCatalog } from '../locales'
+import {
+  deriveOverall, uptimeGrid, uptimePercent,
+  type Incident, type Component, type Update,
+} from '../lib/status'
+
+interface PageData {
+  readonly incidents: ReadonlyArray<Incident>
+  readonly components: ReadonlyArray<Component>
+  readonly updates: ReadonlyArray<Update>
+}
+
+export const renderMode = 'ssr' as const
+
+// `query` is present ONLY server-side. It invokes the api's rpc over POST /rpc;
+// a streaming query is drained to its first snapshot. On a client navigation
+// `query` is undefined and we start empty — the subscriptions fill in.
+export const loader: LoaderFn<PageData> = async ({ query }) => ({
+  incidents:  query ? await query<ReadonlyArray<Incident>>('incidents.live', {}) : [],
+  components: query ? await query<ReadonlyArray<Component>>('components.list', {}) : [],
+  updates:    query ? await query<ReadonlyArray<Update>>('updates.list', {}) : [],
+})
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title:       getCatalog(locale)['meta.title'],
+  description: getCatalog(locale)['meta.description'],
+})
+
+const fmtDate = (v: string | Date | null): string =>
+  v == null ? '' : new Date(v).toLocaleString()
+
+export default function StatusPage(): ReactNode {
+  const initial = useLoaderData<PageData>()
+  const { data: iLive } = useSubscription<ReadonlyArray<Incident>>('app', 'incidents.live')
+  const { data: cLive } = useSubscription<ReadonlyArray<Component>>('app', 'components.list')
+  const { data: uLive } = useSubscription<ReadonlyArray<Update>>('app', 'updates.list')
+
+  const incidents  = iLive ?? initial.incidents
+  const components = cLive ?? initial.components
+  const updates    = uLive ?? initial.updates
+
+  const overall = deriveOverall(incidents, components)
+  const grid = uptimeGrid(incidents)
+  const pct = uptimePercent(grid)
+
+  const updatesFor = (incidentId: string): ReadonlyArray<Update> =>
+    updates
+      .filter((u) => u.incidentId === incidentId)
+      .slice()
+      .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
+
+  return (
+    <main>
+      {/* Overall banner */}
+      <div className={`banner banner--${overall}`} role="status">
+        <span className="dot" aria-hidden="true" />
+        <strong><T id={`overall.${overall}`} /></strong>
+      </div>
+
+      {/* Uptime */}
+      <section>
+        <h2><T id="uptime.heading" values={{ days: String(grid.length) }} /></h2>
+        <div className="uptime" aria-hidden="true">
+          {grid.map((up, idx) => (
+            <span key={idx} className={up ? 'day up' : 'day down'} />
+          ))}
+        </div>
+        <p className="muted"><T id="uptime.percent" values={{ percent: String(pct) }} /></p>
+      </section>
+
+      {/* Components */}
+      <section>
+        <h2><T id="components.heading" /></h2>
+        {components.length === 0 ? (
+          <p className="muted"><T id="components.empty" /></p>
+        ) : (
+          <ul className="components">
+            {components.map((c) => (
+              <li key={c.id}>
+                <span>{c.name}</span>
+                <span className={`pill pill--${c.status}`}><T id={`comp.status.${c.status}`} /></span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {/* Incidents */}
+      <section>
+        <h2><T id="incidents.heading" /></h2>
+        {incidents.length === 0 ? (
+          <p className="muted"><T id="incidents.none" /></p>
+        ) : (
+          <ul className="incidents">
+            {incidents.map((inc) => (
+              <li key={inc.id} className={`incident impact--${inc.impact}`}>
+                <div className="incident-head">
+                  <strong>{inc.title}</strong>
+                  <span className="pill"><T id={`impact.${inc.impact}`} /></span>
+                  <span className="pill"><T id={`status.${inc.status}`} /></span>
+                </div>
+                <p className="muted">
+                  <T id="incident.started" values={{ when: fmtDate(inc.startedAt) }} />
+                  {' · '}
+                  {inc.resolvedAt == null
+                    ? <T id="incident.ongoing" />
+                    : <T id="incident.resolved" values={{ when: fmtDate(inc.resolvedAt) }} />}
+                </p>
+                {updatesFor(inc.id).length > 0 ? (
+                  <ul className="timeline">
+                    {updatesFor(inc.id).map((u) => (
+                      <li key={u.id}>
+                        <span className="ts">{fmtDate(u.createdAt)}</span>
+                        <span className="pill"><T id={`status.${u.status}`} /></span>
+                        <span>{u.body}</span>
+                      </li>
+                    ))}
+                  </ul>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </main>
+  )
+}

package/templates/apps/frontend-status/template.json

@@ -0,0 +1,6 @@
+{
+  "id": "frontend-status",
+  "kind": "web",
+  "summary": "A public status page — a clean live-useSubscription showcase. An SSR shell bakes the current incidents + components into the first paint (crawlable), then upgrades to live: the banner, 90-day uptime grid and incident timeline update within seconds when an operator posts, with no polling. Pairs with the api-status backend. Bilingual (en/de), no auth (it must stay up when the product is down).",
+  "tags": ["web", "frontend", "status-page", "live", "useSubscription", "ssr", "uptime"]
+}

package/templates/apps/frontend-status/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", ".framework"]
+}

package/templates/baselines/compose/docker-compose.prod.yml

@@ -59,6 +59,21 @@ services:
       NODE_ENV: production
       DB_URL: postgres://{{projectNameSnake}}:${POSTGRES_PASSWORD:-change-me-in-prod}@postgres:5432/{{projectNameSnake}}
       VOLTRO_SESSION_SECRET: ${VOLTRO_SESSION_SECRET:?must be set for prod compose}
+      # Only needed once an app turns on a plugin that encrypts columns at rest
+      # (`governance` with `fieldEncryption`, or any `.encrypted()` column). It
+      # is commented out because a generated file cannot know which plugins you
+      # will enable — and left here, named, because the alternative is finding
+      # out at `onActivate` in a container:
+      #
+      #   governance: fieldEncryption is enabled but secret
+      #   "VOLTRO_FIELD_ENCRYPTION_KEY" did not resolve
+      #
+      # Mint it with `voltro secret generate field-encryption` — same shape as
+      # `openssl rand -hex 32`, but it is the documented path and it cannot
+      # produce the wrong length. LOSE THE KEY, LOSE THE DATA: there is no
+      # recovery for a column encrypted under a key you no longer have, so back
+      # it up wherever you keep the session secret.
+      # VOLTRO_FIELD_ENCRYPTION_KEY: ${VOLTRO_FIELD_ENCRYPTION_KEY:?must be set once fieldEncryption is on}
     ports:
       - "4000:4000"
     depends_on:

package/templates/baselines/compose-mariadb/docker-compose.prod.yml

@@ -83,6 +83,21 @@ services:
       S3_SECRET_ACCESS_KEY: ${S3_SECRET_ACCESS_KEY:-minioadmin}
       S3_FORCE_PATH_STYLE: "1"
       VOLTRO_SESSION_SECRET: ${VOLTRO_SESSION_SECRET:?must be set for prod compose}
+      # Only needed once an app turns on a plugin that encrypts columns at rest
+      # (`governance` with `fieldEncryption`, or any `.encrypted()` column). It
+      # is commented out because a generated file cannot know which plugins you
+      # will enable — and left here, named, because the alternative is finding
+      # out at `onActivate` in a container:
+      #
+      #   governance: fieldEncryption is enabled but secret
+      #   "VOLTRO_FIELD_ENCRYPTION_KEY" did not resolve
+      #
+      # Mint it with `voltro secret generate field-encryption` — same shape as
+      # `openssl rand -hex 32`, but it is the documented path and it cannot
+      # produce the wrong length. LOSE THE KEY, LOSE THE DATA: there is no
+      # recovery for a column encrypted under a key you no longer have, so back
+      # it up wherever you keep the session secret.
+      # VOLTRO_FIELD_ENCRYPTION_KEY: ${VOLTRO_FIELD_ENCRYPTION_KEY:?must be set once fieldEncryption is on}
     ports:
       - "4000:4000"
     depends_on:

package/dist/apiBuild-DgBS9ayv.js

@@ -1,2 +0,0 @@
-import { c as e, l as t } from "./apiBuild-eUM32r1u.js";
-export { e as runApiBuild, t as runServeBundleBuild };

package/dist/dbCommand-DvguqlzF.js

@@ -1,2 +0,0 @@
-import { s as e } from "./dbCommand-CpYgmSw4.js";
-export { e as runDbCommand };

package/dist/fileConventions-3bffWssN.js

@@ -1,30 +0,0 @@
-//#region src/fileConventions.ts
-var e = /\.(query|mutation|action|stream)\.ts$/, t = /\.(query|mutation|action|stream)\.server\.ts$/, n = /\.event\.ts$/, r = /\.workflow\.tsx$/, i = /\.workflow\.server\.tsx$/, a = /\.workflow\.tsx?$/, o = /\.trigger\.tsx?$/, s = /\.cron\.tsx?$/, c = /\.webhook\.tsx?$/, l = /\.outbox\.tsx?$/, u = /\.subscribe\.tsx?$/, d = /\.reaction\.tsx?$/, f = /\.aggregate\.tsx?$/, p = /\.startup\.tsx?$/, m = /\.seed\.ts$/, h = /\.relations\.ts$/, g = /\.entity\.ts$|\.schema\.ts$|^schema\.ts$/, _ = (e) => a.test(e) && !r.test(e) && !i.test(e), v = /(?:^|\/)page\.tsx$/, y = /\.island\.tsx?$/, b = /\.component\.tsx$/, x = /\.component\.ui\.tsx$/, S = /\.hook\.tsx?$/, C = /\.internal\.tsx?$/, w = /\.types\.tsx?$/, T = /\.fixture\.tsx?$/, E = /\.tracking\.tsx?$/, D = /\.store\.tsx?$/, O = /\.client\.tsx?$/, k = /\.(test|spec)\.tsx?$/, A = [
-	e,
-	t,
-	a,
-	i,
-	o,
-	s,
-	c,
-	l,
-	u,
-	d,
-	f,
-	p,
-	m,
-	h,
-	g,
-	/\.route\.tsx?$/,
-	n,
-	D,
-	O,
-	/\.(agent|tool|email|connection|serverless|server|config|generated)\.tsx?$/
-], j = (e) => A.some((t) => t.test(e)), M = /* @__PURE__ */ new Set([
-	"layout.tsx",
-	"error.tsx",
-	"loading.tsx",
-	"not-found.tsx"
-]);
-//#endregion
-export { j as A, E as C, r as D, c as E, a as O, k as S, w as T, g as _, n as a, D as b, C as c, v as d, M as f, h as g, d as h, s as i, _ as j, i as k, y as l, t as m, b as n, T as o, e as p, x as r, S as s, f as t, l as u, m as v, o as w, u as x, p as y };

package/dist/frameworkTableAssembly-lrjZtk0G.js

@@ -1,2 +0,0 @@
-import { t as e } from "./frameworkTableAssembly-BwHU9Euq.js";
-export { e as assembleFrameworkTables };

package/dist/inspect-gt8bq-Tz.js

@@ -1,2 +0,0 @@
-import { r as e } from "./inspect-CUCCzw2I.js";
-export { e as buildCapabilityManifest };

package/dist/manifestBuild-ifczArzr.js

@@ -1,2 +0,0 @@
-import { t as e } from "./manifestBuild-BnzAxp2O.js";
-export { e as buildRpcEntry };