npm - @voltro/cli - Versions diffs - 0.28.0 → 0.30.0 - Mend

@voltro/cli 0.28.0 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (354) hide show

package/templates/apps/frontend-saas/src/pages/dashboard/team/page.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+// Team — URL `/dashboard/team`. Lists the tenant's invites live
+// (`invites.list`) and creates them (`invites.create`). Creating an invite
+// spends a `seats` entitlement on the api, so on the free plan (1 seat) the
+// FIRST invite trips the same typed `EntitlementExceeded` — we branch on it and
+// point the user at the Billing page to add a seat.
+import type { ReactNode } from 'react'
+import { useState, type FormEvent } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { useSubscription, useMutation } from '@voltro/client'
+import { T, useT } from '@voltro/i18n'
+import { getCatalog } from '../../../locales/index'
+import { isEntitlementExceeded, type Invite } from '../../../lib/api'
+export const renderMode = 'ssr' as const
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.team.title'],
+})
+const STATUS_KEY: Record<string, 'team.status.pending' | 'team.status.accepted' | 'team.status.revoked'> = {
+  pending:  'team.status.pending',
+  accepted: 'team.status.accepted',
+  revoked:  'team.status.revoked',
+}
+export default function Team(): ReactNode {
+  const { data: live } = useSubscription<ReadonlyArray<Invite>>('app', 'invites.list')
+  const { mutate, pending } = useMutation<{ email: string }, Invite>('app', 'invites.create')
+  const invites = live ?? []
+  const [email, setEmail] = useState('')
+  const [outOfSeats, setOutOfSeats] = useState(false)
+  const placeholder = useT('team.invite.placeholder')
+  const onInvite = (e: FormEvent): void => {
+    e.preventDefault()
+    const trimmed = email.trim()
+    if (trimmed === '') return
+    void mutate({ email: trimmed })
+      .then(() => { setEmail(''); setOutOfSeats(false) })
+      .catch((err: unknown) => { if (isEntitlementExceeded(err)) setOutOfSeats(true) })
+  }
+  return (
+    <section>
+      <h1><T id="team.heading" /></h1>
+      <form className="row" onSubmit={onInvite}>
+        <input
+          type="email" aria-label={placeholder} placeholder={placeholder}
+          value={email} onChange={(e) => setEmail(e.target.value)}
+        />
+        <button type="submit" className="btn" disabled={pending}>
+          <T id="team.invite.submit" />
+        </button>
+      </form>
+      {outOfSeats ? <p className="error-text" role="alert"><T id="team.paywall" /></p> : null}
+      {invites.length === 0 ? (
+        <p className="empty"><T id="team.empty" /></p>
+      ) : (
+        <ul className="rows" style={{ marginTop: '1.25rem' }}>
+          {invites.map((inv) => (
+            <li key={inv.id}>
+              <span>{inv.email}</span>
+              <span className="tag"><T id={STATUS_KEY[inv.status] ?? 'team.status.pending'} /></span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

package/templates/apps/frontend-saas/src/pages/layout.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+// Root layout — wraps EVERY page (marketing + dashboard). Thin: it loads the
+// stylesheet and lets each AREA layout ((marketing)/layout.tsx,
+// dashboard/layout.tsx) supply its own chrome. Layouts nest, so a dashboard
+// page is wrapped root → dashboard.
+//
+// Don't render <html>/<head>/<body> here — the framework shell owns them.
+import type { ReactNode } from 'react'
+import '../globals.css'
+export default function RootLayout({ children }: { readonly children: ReactNode }): ReactNode {
+  return <>{children}</>
+}

package/templates/apps/frontend-saas/template.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "id": "frontend-saas",
+  "kind": "web",
+  "summary": "The SaaS dashboard that closes the loop: a marketing landing, a real sign-up/sign-in form (POST /auth/*), an SSR auth gate that asks the api's session.me and RedirectErrors anonymous visitors to /login, a live projects list (useSubscription) whose create surfaces the typed EntitlementExceeded paywall, and billing (upgrade via billing.startCheckout, seats via billing.changeSeats) + team-invite pages. Pairs with the api-saas-starter api. Bilingual (en/de).",
+  "tags": ["web", "frontend", "saas", "auth", "billing", "paywall", "dashboard", "ssr", "useSubscription"]
+}

package/templates/apps/frontend-saas/tsconfig.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/apps/frontend-spa/app.config.ts CHANGED Viewed

@@ -20,7 +20,7 @@ export default {
   // <I18nProvider> from these codes and loads the matching
   // `src/locales/<code>.ts` catalog — so `<T id="…" />` / `useT()` /
   // `useLocale()` work app-wide with no manual setup. The <LocaleSwitcher>
-  // in the layout writes the `voltro:lang` cookie + reloads. Grow the app to
+  // in the layout writes the `voltro:locale` cookie + reloads. Grow the app to
   // more languages by adding a code here + a `src/locales/<code>.ts`.
   locales:       ['en', 'de'] as const,
   defaultLocale: 'en'         as const,

package/templates/apps/frontend-spa/package.json CHANGED Viewed

@@ -12,17 +12,17 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@voltro/cli": "0.28.0",
-    "@voltro/client": "0.28.0",
-    "@voltro/env": "0.28.0",
-    "@voltro/i18n": "0.28.0",
-    "@voltro/ui-shadcn": "0.28.0",
-    "@voltro/web": "0.28.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/ui-shadcn": "0.30.0",
+    "@voltro/web": "0.30.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.28.0",
+    "@voltro/devtools": "0.30.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^6.0.3",

package/templates/apps/frontend-spa/src/locales/index.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 // Catalog lookup OUTSIDE React — for a page's `meta({ locale })` locale-aware
 // <title>. This app is cookie-i18n (no `/<locale>` URL prefix), so @voltro/web
-// hands `meta` the active locale from the `voltro:lang` cookie. Inside React,
+// hands `meta` the active locale from the `voltro:locale` cookie. Inside React,
 // use `<T>` / `useT()` via the framework's auto-wired <I18nProvider> instead.
 import en from './en'

package/templates/apps/frontend-spa/src/pages/layout.tsx CHANGED Viewed

@@ -2,7 +2,7 @@
 // so there is no SSR document to worry about here.
 //
 // The app is bilingual (see `locales` in app.config.ts): <LocaleSwitcher>
-// writes the `voltro:lang` cookie + reloads so the framework re-renders in the
+// writes the `voltro:locale` cookie + reloads so the framework re-renders in the
 // chosen language.
 import type { ReactNode } from 'react'

package/templates/apps/frontend-spa/src/pages/page.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ import { T } from '@voltro/i18n'
 import { getCatalog } from '../locales'
 // Locale-aware tab title: @voltro/web resolves meta({ locale }) from the
-// active locale (the `voltro:lang` cookie in this cookie-i18n app).
+// active locale (the `voltro:locale` cookie in this cookie-i18n app).
 export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
   title: getCatalog(locale)['meta.home.title'],
 })

package/templates/apps/frontend-ssr/app.config.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export default {
   // <I18nProvider> from these codes and loads the matching
   // `src/locales/<code>.ts` catalog — so `<T id="…" />` / `useT()` /
   // `useLocale()` work app-wide (SSR + ISR too) with no manual setup. The
-  // <LocaleSwitcher> in the layout writes the `voltro:lang` cookie + reloads.
+  // <LocaleSwitcher> in the layout writes the `voltro:locale` cookie + reloads.
   // Grow the app to more languages by adding a code here + a
   // `src/locales/<code>.ts`.
   locales:       ['en', 'de'] as const,

package/templates/apps/frontend-ssr/package.json CHANGED Viewed

@@ -12,17 +12,17 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.28.0",
-    "@voltro/client": "0.28.0",
-    "@voltro/env": "0.28.0",
-    "@voltro/i18n": "0.28.0",
-    "@voltro/ui-shadcn": "0.28.0",
-    "@voltro/web": "0.28.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/ui-shadcn": "0.30.0",
+    "@voltro/web": "0.30.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.28.0",
+    "@voltro/devtools": "0.30.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^6.0.3",

package/templates/apps/frontend-ssr/src/locales/index.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 // Catalog lookup OUTSIDE React — for a page's `meta({ locale })` locale-aware
 // <title> / <meta description>. This app is cookie-i18n (no `/<locale>` URL
-// prefix), so @voltro/web hands `meta` the active locale from the `voltro:lang`
+// prefix), so @voltro/web hands `meta` the active locale from the `voltro:locale`
 // cookie. Inside React, use `<T>` / `useT()` via the framework's auto-wired
 // <I18nProvider> instead.

package/templates/apps/frontend-ssr/src/pages/layout.tsx CHANGED Viewed

@@ -3,7 +3,7 @@
 // intercepts them) after the first load.
 //
 // The app is bilingual (see `locales` in app.config.ts): nav labels come from
-// the catalog via `<T>`, and <LocaleSwitcher> writes the `voltro:lang` cookie
+// the catalog via `<T>`, and <LocaleSwitcher> writes the `voltro:locale` cookie
 // + reloads so the framework re-renders in the chosen language.
 import type { ReactNode } from 'react'

package/templates/apps/frontend-ssr/src/pages/page.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ import { getCatalog } from '../locales'
 export const renderMode = 'ssr' as const
 // Locale-aware tab title + description: @voltro/web resolves meta({ locale })
-// from the active locale (the `voltro:lang` cookie in this cookie-i18n app).
+// from the active locale (the `voltro:locale` cookie in this cookie-i18n app).
 export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
   title:       getCatalog(locale)['meta.ssr.title'],
   description: getCatalog(locale)['meta.ssr.description'],

package/templates/apps/frontend-ssr-api/app.config.ts CHANGED Viewed

@@ -29,7 +29,7 @@ export default {
   // <I18nProvider> from these codes and loads the matching
   // `src/locales/<code>.ts` catalog — so `<T id="…" />` / `useT()` /
   // `useLocale()` work app-wide (SSR too) with no manual setup. The
-  // <LocaleSwitcher> in the layout writes the `voltro:lang` cookie + reloads.
+  // <LocaleSwitcher> in the layout writes the `voltro:locale` cookie + reloads.
   // Grow the app to more languages by adding a code here + a
   // `src/locales/<code>.ts`.
   locales:       ['en', 'de'] as const,

package/templates/apps/frontend-ssr-api/package.json CHANGED Viewed

@@ -12,18 +12,18 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@{{projectName}}/api": "0.28.0",
-    "@voltro/cli": "0.28.0",
-    "@voltro/client": "0.28.0",
-    "@voltro/env": "0.28.0",
-    "@voltro/i18n": "0.28.0",
-    "@voltro/ui-shadcn": "0.28.0",
-    "@voltro/web": "0.28.0",
+    "@{{projectName}}/api": "0.30.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/ui-shadcn": "0.30.0",
+    "@voltro/web": "0.30.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.28.0",
+    "@voltro/devtools": "0.30.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^6.0.3",

package/templates/apps/frontend-ssr-api/src/locales/index.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 // Catalog lookup OUTSIDE React — for the page's `meta({ locale, loaderData })`
 // locale-aware <title> / <meta description>. This app is cookie-i18n (no
 // `/<locale>` URL prefix), so @voltro/web hands `meta` the active locale from
-// the `voltro:lang` cookie. Inside React, use `<T>` / `useT()` via the
+// the `voltro:locale` cookie. Inside React, use `<T>` / `useT()` via the
 // framework's auto-wired <I18nProvider> instead.
 import en from './en'

package/templates/apps/frontend-ssr-api/src/pages/layout.tsx CHANGED Viewed

@@ -2,7 +2,7 @@
 // Don't render <html>/<head>/<body> here — the framework shell owns them.
 //
 // The app is bilingual (see `locales` in app.config.ts): <LocaleSwitcher>
-// writes the `voltro:lang` cookie + reloads so the framework re-renders in the
+// writes the `voltro:locale` cookie + reloads so the framework re-renders in the
 // chosen language.
 import type { ReactNode } from 'react'
 import { useLocale, useT } from '@voltro/i18n'

package/templates/apps/frontend-static-blog/package.json CHANGED Viewed

@@ -12,16 +12,16 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.28.0",
-    "@voltro/client": "0.28.0",
-    "@voltro/env": "0.28.0",
-    "@voltro/i18n": "0.28.0",
-    "@voltro/web": "0.28.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/web": "0.30.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.28.0",
+    "@voltro/devtools": "0.30.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^6.0.3",

package/templates/apps/frontend-status/README.md ADDED Viewed

@@ -0,0 +1,51 @@
+# {{capProjectName}} {{capAppName}} — public status page
+A public status page, and a clean **live-`useSubscription`** showcase. Consumes
+the `api-status` backend. Bilingual (en/de), no auth.
+Scaffold both halves together:
+```bash
+voltro init my-status --api=api-status --web=frontend-status
+voltro dev
+```
+## What it does
+- **SSR first paint.** The index loader pulls the current incidents, components
+  and updates over the api's `/rpc` before the HTML is sent, so the page is
+  correct + crawlable on first load (no client round-trip).
+- **Live upgrade.** The component then subscribes with `useSubscription('app',
+  'incidents.live' | 'components.list' | 'updates.list')`, so when an operator
+  declares or resolves an incident on the api, the banner, uptime grid and
+  timeline update on every open page within seconds — no polling.
+- **Derived state.** The overall banner and the 90-day uptime grid are computed
+  from incident timestamps (`src/lib/status.ts`), not external monitoring — the
+  operator controls the narrative. That math is pure and unit-tested.
+## No auth by design
+The api leaves the read queries ungated, and this page carries no session gate —
+a status page must stay up when the product (and its login) is down. Operators
+post incidents against the api's operator-gated mutations from a separate
+authenticated surface.
+## Files
+```
+src/pages/
+  layout.tsx      header (brand + language) + stylesheet
+  page.tsx        the status page — SSR loader + 3 live subscriptions
+  page.test.tsx   loader + render + the pure status math
+src/lib/status.ts deriveOverall() + uptimeGrid() + uptimePercent() (pure, tested)
+src/locales/{en,de}.ts  bilingual catalogs
+```
+## Anti-patterns
+- **Polling for updates.** The whole point is the live subscription — don't add
+  a `setInterval`; `useSubscription` pushes deltas.
+- **Gating the reads.** These must work for anonymous visitors. Keep the api's
+  read queries ungated; the rbac guard belongs on the write mutations.
+- **A secret in this app's env.** The browser bundle is public — secrets live on
+  the api.

package/templates/apps/frontend-status/app.config.ts ADDED Viewed

@@ -0,0 +1,39 @@
+// Web app for the {{projectName}} project — a PUBLIC status page fed by the
+// sibling `api-status` api.
+//
+// The index page is `renderMode: 'ssr'`: its loader runs server-side per request
+// and pulls the current incidents + components over the api's POST /rpc, so the
+// first paint + the document <title> reflect real state (crawlable, no client
+// round-trip). The component then upgrades to live with `useSubscription`, so a
+// new incident lands on every open page within seconds — the whole point of a
+// status page.
+//
+// No auth: the reads are public (the api leaves them ungated), and the page must
+// stay up even when the rest of the product — and its login — is down.
+import { defineEnv, envVar } from '@voltro/env'
+// Public, build-time env (baked into the bundle; read via `publicEnv`).
+// Never a secret here — declare secrets on the api.
+export const env = defineEnv({
+  VOLTRO_PUBLIC_APP_NAME: envVar.string({ access: 'public', default: '{{capProjectName}}' }),
+})
+export default {
+  type: 'web' as const,
+  name: '{{capProjectName}}{{capAppName}}',
+  port: {{port}},
+  theme: 'system' as const,
+  env,
+  // Bilingual by default (cookie-driven — no `/<locale>` prefix). The framework
+  // auto-wires <I18nProvider> from these codes + the `src/locales/<code>.ts`
+  // catalogs, so `<T>` / `useT()` / `useLocale()` work app-wide (SSR too). Add a
+  // code + a `src/locales/<code>.ts` to grow to more languages.
+  locales:       ['en', 'de'] as const,
+  defaultLocale: 'en'         as const,
+  // The api this page reads. The NAME ('app') is the lookup key the loader's
+  // `query` + the hooks use: `query('incidents.live', {})`,
+  // `useSubscription('app', 'incidents.live')`.
+  apis: {
+    app: { package: '@{{projectName}}/api' },
+  },
+}

package/templates/apps/frontend-status/package.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "name": "@{{projectName}}/{{appName}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "voltro dev .",
+    "lint": "voltro doctor .",
+    "build": "voltro build .",
+    "start": "voltro start .",
+    "typecheck": "tsc --noEmit",
+    "test": "voltro test"
+  },
+  "dependencies": {
+    "@{{projectName}}/api": "0.30.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/ui-shadcn": "0.30.0",
+    "@voltro/web": "0.30.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@voltro/devtools": "0.30.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  }
+}

package/templates/apps/frontend-status/src/config.ts ADDED Viewed

@@ -0,0 +1,7 @@
+// The brand name shown in the status-page header.
+//
+// A plain constant — not `publicEnv` — so the template typechecks BEFORE
+// `voltro dev` generates the env types. `VOLTRO_PUBLIC_APP_NAME` is still
+// declared in app.config.ts; to read it typed instead, after one `voltro dev`
+// swap this for `publicEnv.VOLTRO_PUBLIC_APP_NAME` from '@voltro/env/public'.
+export const APP_NAME = '{{capProjectName}}'

package/templates/apps/frontend-status/src/globals.css ADDED Viewed

@@ -0,0 +1,70 @@
+/* Plain CSS — no Tailwind, so there's no @source scanner to configure. */
+:root {
+  --bg: #ffffff;
+  --fg: #0a0a0a;
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --panel: #f9fafb;
+  --up: #16a34a;
+  --down: #dc2626;
+  --warn: #d97706;
+}
+:root.dark {
+  --bg: #0a0a0a;
+  --fg: #fafafa;
+  --muted: #9ca3af;
+  --border: #1f2937;
+  --panel: #111827;
+  --up: #22c55e;
+  --down: #f87171;
+  --warn: #f59e0b;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  line-height: 1.55;
+}
+.muted { color: var(--muted); }
+.spacer { flex: 1; }
+.shell { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
+.shell header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
+.brand { font-weight: 700; }
+h2 { font-size: 1rem; margin: 2rem 0 0.75rem; }
+/* Overall banner */
+.banner { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; border-radius: 12px; border: 1px solid var(--border); }
+.banner .dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; background: var(--muted); }
+.banner--operational  { background: color-mix(in oklab, var(--up) 12%, transparent); border-color: var(--up); }
+.banner--operational .dot { background: var(--up); }
+.banner--degraded     { background: color-mix(in oklab, var(--warn) 12%, transparent); border-color: var(--warn); }
+.banner--degraded .dot { background: var(--warn); }
+.banner--major_outage { background: color-mix(in oklab, var(--down) 12%, transparent); border-color: var(--down); }
+.banner--major_outage .dot { background: var(--down); }
+/* Uptime grid */
+.uptime { display: flex; gap: 2px; flex-wrap: wrap; }
+.uptime .day { width: 6px; height: 26px; border-radius: 2px; background: var(--up); }
+.uptime .day.down { background: var(--down); }
+/* Components */
+.components, .incidents, .timeline { list-style: none; padding: 0; margin: 0; }
+.components li { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
+.pill { font-size: 0.78rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; color: var(--muted); }
+.pill--operational { color: var(--up); border-color: var(--up); }
+.pill--degraded, .pill--partial_outage { color: var(--warn); border-color: var(--warn); }
+.pill--major_outage { color: var(--down); border-color: var(--down); }
+/* Incidents */
+.incidents { display: flex; flex-direction: column; gap: 0.75rem; }
+.incident { border: 1px solid var(--border); border-left-width: 3px; border-radius: 10px; padding: 0.9rem 1.1rem; background: var(--panel); }
+.incident.impact--critical { border-left-color: var(--down); }
+.incident.impact--major { border-left-color: var(--warn); }
+.incident.impact--minor { border-left-color: var(--muted); }
+.incident-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+.timeline { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; border-top: 1px dashed var(--border); padding-top: 0.6rem; }
+.timeline li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; }
+.timeline .ts { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

package/templates/apps/frontend-status/src/globals.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+// Ambient declarations.
+//
+// `declare module '*.css'`: TypeScript with `moduleResolution: Bundler`
+// rejects a bare `import './globals.css'` unless the asset module is
+// declared. Vite resolves it at build time; the declaration is type-only.
+declare module '*.css'

package/templates/apps/frontend-status/src/lib/status.ts ADDED Viewed

@@ -0,0 +1,81 @@
+// Pure status math — no React, no api. Kept here so it's unit-testable on its
+// own (see page.test.tsx) and reused by the page's banner + uptime grid.
+export interface Incident {
+  readonly id: string
+  readonly title: string
+  readonly impact: string   // 'minor' | 'major' | 'critical'
+  readonly status: string   // 'investigating' | 'identified' | 'monitoring' | 'resolved'
+  readonly startedAt: string | Date
+  readonly resolvedAt: string | Date | null
+}
+export interface Component {
+  readonly id: string
+  readonly name: string
+  readonly status: string   // 'operational' | 'degraded' | 'partial_outage' | 'major_outage'
+}
+export interface Update {
+  readonly id: string
+  readonly incidentId: string
+  readonly body: string
+  readonly status: string
+  readonly createdAt: string | Date
+}
+export type Overall = 'operational' | 'degraded' | 'major_outage'
+const isOpen = (i: Incident): boolean => i.status !== 'resolved'
+// The banner state, from current incidents + component statuses. A live critical
+// incident (or a component in major_outage) is the worst; any other open
+// incident or non-operational component is a partial degradation.
+export const deriveOverall = (
+  incidents: ReadonlyArray<Incident>,
+  components: ReadonlyArray<Component>,
+): Overall => {
+  const open = incidents.filter(isOpen)
+  const worstOpen = open.some((i) => i.impact === 'critical')
+  const worstComponent = components.some((c) => c.status === 'major_outage')
+  if (worstOpen || worstComponent) return 'major_outage'
+  if (open.length > 0 || components.some((c) => c.status !== 'operational')) return 'degraded'
+  return 'operational'
+}
+const DAY_MS = 24 * 60 * 60 * 1000
+const ms = (v: string | Date): number => (v instanceof Date ? v.getTime() : Date.parse(v))
+/**
+ * A 90-day uptime grid (oldest → newest). A day counts as "down" when a
+ * major-or-critical incident overlapped it — derived from incident timestamps,
+ * NOT external monitoring, so operators control the narrative. `now` is a seam
+ * for deterministic tests.
+ */
+export const uptimeGrid = (
+  incidents: ReadonlyArray<Incident>,
+  now: number = Date.now(),
+  days = 90,
+): ReadonlyArray<boolean> => {
+  const impactful = incidents.filter((i) => i.impact === 'major' || i.impact === 'critical')
+  const todayStart = Math.floor(now / DAY_MS) * DAY_MS
+  const grid: boolean[] = []
+  for (let d = days - 1; d >= 0; d--) {
+    const dayStart = todayStart - d * DAY_MS
+    const dayEnd = dayStart + DAY_MS
+    const down = impactful.some((i) => {
+      const start = ms(i.startedAt)
+      const end = i.resolvedAt == null ? now : ms(i.resolvedAt)
+      return start < dayEnd && end >= dayStart
+    })
+    grid.push(!down)
+  }
+  return grid
+}
+// Uptime percentage over the grid window, to one decimal.
+export const uptimePercent = (grid: ReadonlyArray<boolean>): number => {
+  if (grid.length === 0) return 100
+  const up = grid.filter(Boolean).length
+  return Math.round((up / grid.length) * 1000) / 10
+}