@sequenceholdings/artifact-studio 0.4.0 → 0.6.1

package/dist/templates/react-vite/src/App.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { seq } from '@sequenceholdings/artifact-studio'
 import {
   Button,
@@ -15,23 +16,36 @@ const CARDS = [
 ]
 
 export default function App() {
+  const [status, setStatus] = useState<'idle' | 'pending' | 'ok' | 'error'>('idle')
+
   async function pingAtlas() {
-    const response = await seq.api.get<{ ok?: boolean }>('/api/health')
-    alert(`Atlas responded: ${JSON.stringify(response)}`)
+    setStatus('pending')
+    try {
+      await seq.api.get<{ ok?: boolean }>('/api/health')
+      setStatus('ok')
+    } catch {
+      setStatus('error')
+    }
   }
 
   return (
-    <main className="min-h-screen bg-background p-10">
-      <p className="text-xs font-extrabold tracking-widest uppercase text-primary mb-2">
-        Artifact Studio
-      </p>
-      <h1 className="text-lg font-bold tracking-tight">Build on Atlas</h1>
-      <p className="text-muted-foreground leading-relaxed max-w-2xl mt-2">
-        This app uses Atlas&apos;s shared UI component library. Import any
-        component from <code className="text-sm font-mono">@sequenceholdings/atlas-ui</code>.
+    <main className="min-h-full bg-background p-roomy text-foreground sm:p-10">
+      <div>
+        <p className="mb-2 text-xs font-extrabold uppercase tracking-widest text-primary">
+          Artifact Studio
+        </p>
+        <h1 className="text-lg font-bold tracking-tight">Build on Atlas</h1>
+      </div>
+      <p className="mt-2 max-w-2xl leading-relaxed text-muted-foreground">
+        This app uses Atlas&apos;s shared UI component library. Import any component
+        from{' '}
+        <code className="font-mono text-sm">
+          @sequenceholdings/atlas-ui
+        </code>
+        .
       </p>
 
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-sm mt-7 max-w-3xl">
+      <div className="mt-7 grid max-w-3xl grid-cols-1 gap-inline-loose sm:grid-cols-3">
         {CARDS.map((card) => (
           <Card key={card.label}>
             <CardHeader>
@@ -46,9 +60,18 @@ export default function App() {
         ))}
       </div>
 
-      <Button className="mt-6" onClick={pingAtlas}>
-        Test Atlas API bridge
-      </Button>
+      <div className="mt-6 flex flex-wrap items-center gap-inline">
+        <Button
+          size="lg"
+          className="min-h-11"
+          disabled={status === 'pending'}
+          onClick={() => void pingAtlas()}
+        >
+          {status === 'pending' ? 'Testing…' : 'Test Atlas API bridge'}
+        </Button>
+        {status === 'ok' ? <Badge variant="secondary">Atlas responded</Badge> : null}
+        {status === 'error' ? <Badge variant="destructive">Request failed</Badge> : null}
+      </div>
     </main>
   )
 }

package/dist/templates/react-vite/src/styles.css

@@ -10,3 +10,13 @@
    build-time injection. At DES-227 cutover, tokens.css becomes v2 — drop the
    explicit tokens.v2 / theme.v2 imports (and the CLI stops injecting them). */
 @source "../node_modules/@sequenceholdings/atlas-ui/dist";
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.4.0",
+  "version": "0.6.1",
   "description": "SDK types and CLI library for building Artifact Studio apps. Driven via `seq-studio artifact <sub>` (@sequenceholdings/studio-cli), which runs the `./cli` runCli export.",
   "type": "module",
   "exports": {
@@ -17,6 +17,10 @@
       "types": "./dist/sdk.d.ts",
       "default": "./dist/sdk.js"
     },
+    "./offline": {
+      "types": "./dist/offline/index.d.ts",
+      "default": "./dist/offline/index.js"
+    },
     "./cli": {
       "types": "./dist/cli.d.ts",
       "default": "./dist/cli.js"
@@ -101,6 +105,10 @@
       "types": "./dist/server/release-forms.d.ts",
       "default": "./dist/server/release-forms.js"
     },
+    "./server/testing": {
+      "types": "./dist/server/testing.d.ts",
+      "default": "./dist/server/testing.js"
+    },
     "./next": {
       "types": "./dist/next.d.ts",
       "default": "./dist/next.js"
@@ -120,6 +128,10 @@
     "./tunnel": {
       "types": "./dist/tunnel/index.d.ts",
       "default": "./dist/tunnel/index.js"
+    },
+    "./offline-management": {
+      "types": "./dist/offline/management-types.d.ts",
+      "default": "./dist/offline/management-types.js"
     }
   },
   "files": [
@@ -146,9 +158,9 @@
     "google-auth-library": "^10.5.0",
     "server-only": "0.0.1",
     "parse5": "7.3.0",
-    "@sequenceholdings/lattice-form-renderer": "0.1.3",
+    "@sequenceholdings/lattice-form-renderer": "0.2.0",
     "@sequenceholdings/storage": "0.1.0",
-    "@sequenceholdings/orm": "2.1.1"
+    "@sequenceholdings/orm": "2.3.0"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",

package/templates/nextjs/AGENTS.md

@@ -0,0 +1,10 @@
+# Sequence development
+
+Before every development task, read the live documentation for this project's
+target environment. Find the environment's URL with `seq-studio envs list`
+(or the project configuration), then open `<environment-url>/docs`.
+
+Start with that site's `/docs/llms.txt` index and follow the relevant pages as
+needed. The hosted docs are the single source of truth for platform usage;
+do not duplicate their instructions in this file. If docs access is blocked,
+open the same URL in the signed-in browser.

package/templates/nextjs/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/templates/nextjs/README.md

@@ -77,6 +77,94 @@ platform-user relations also read `<namespace>/platformUsers`). Under
 `data.write`, use `<namespace>/ops/<Operation>` for each persisted mutation the
 app runs, or `<namespace>/<table>` for table-level coverage.
 
+To start a Lattice process, list its id under `processes.start` and call
+`processes.start({ process, runId, title, entity, metadata, assignments })`
+from a server action or route handler. The run starts as the signed-in user (or
+the attached service account, through `asService()`) and needs that identity's
+Invoker grant on the process. `runId` is an idempotency key: starting the same
+id again returns the existing run. `metadata` is the run's input
+(`ctx.run.metadata`). `assignments` names who works each human node
+(`{ execute: { groups: ['<group id>'] } }`), as `POST /api/lattice/runs` takes
+it; Atlas refuses principals it has tombstoned. The start node and version stay
+with the process.
+
+To read a process's runs, list its id under `processes.read` and call
+`processes.listRuns({ process, status, entity, limit, archived })` or
+`processes.getRun(runId)`. Both answer as `GET /api/lattice/runs` and
+`GET /api/lattice/runs/[runId]` would for the signed-in user: the list holds
+only runs that user may view, `getRun` needs Viewer on the run and returns
+`{ run, steps, states, event_cursor }`, and `run.metadata` is blank on read for
+every viewer — keep the data your pages need in your own ORM namespace. Reads
+work from pages and GET route handlers; starting a run does not.
+
+The same `processes.read` declaration lets you render the process itself.
+`processes.describe({ process, version })` returns the applied template a run
+is filled in from — `{ id, name, version, new_runs_disabled, start_node_id,
+input_schema, nodes }` — for the active version, or for a run's
+`processVersion` to show the template that run started from. Every node lists
+its `id`, `kind`, `title`, `description` and `outgoing_edges`; a `human` node
+also carries what a person working it is shown: `advance_edges`,
+`complete_label`, the author's `metadata` bag (form fields, surface hints) and
+`comments_enabled`. Automation, agent and function internals are the process's
+own and never appear. It needs Viewer on the process, which anyone who may
+start it has. `processes.listTasks({ processes, view, limit })` lists the
+signed-in user's own human steps across your declared processes (a subset, or
+all of them) — `view: 'active'` (default) for steps waiting on them,
+`'completed'` for ones they finished — each with its run and node identity plus
+the node's `title`, interpolated `description`, `advance_edges`,
+`complete_label` and `metadata`. It is always the caller's queue: there is no
+way to ask for someone else's, and nothing in a task lets you advance it
+without the user's own Lattice authority.
+
+To work those steps, list the process id under `processes.act` as well and
+call, from a server action or a non-GET route handler:
+`processes.advance({ runId, stepId, edgeId, payload })` completes one of the
+signed-in user's parked steps — `edgeId` is one of the node's `advance_edges`
+(omit it on a terminal node), `payload` is the step's output, and `stepId`
+disambiguates when a parallel block has several human branches parked. It
+needs the user's own `advancer` grant on that step: the application cannot
+complete a step as someone else. `processes.assign({ runId, stepId, users,
+groups })` reassigns a parked step (its advancers become exactly those
+principals) and `processes.grantViewers` / `processes.revokeViewers({ runId,
+users, groups })` share a run or take a share back; all three need the user to
+own the run, and `processes.listViewers(runId)` shows the run's stored shares.
+Users are Auth0 subs and groups are chat-group ids — take them from
+`processes.searchPrincipals({ q, types, limit })`, which finds people in the
+user's own tenant and groups they can see, as the Lattice picker does. The
+same applies through `asService()`: the attached service account acts under its
+own grants, with no elevation.
+
+A refused process call rejects with an `ArtifactServerError` whose `status` is
+Atlas's and whose `atlas` field keeps what Atlas said: `atlas.detail` is the
+reason, `atlas.code` the route's machine code when it has one — an advance
+answers `RUN_TERMINAL` (410) once the run has finished, `WORKFLOW_NOT_RUNNING`
+(409) while a fresh run's workflow is still being dispatched (retry shortly),
+`NO_PARKED_STEP` and `EDGE_ID_MISMATCH` (409) when the step moved on or was
+completed another way. Branch on `atlas.code`, not on the message text.
+
+Lattice calls this server only at paths listed under `server.lattice.accept`.
+Each entry is an exact origin-relative path (`/api/hooks/lattice`), with no
+wildcards. A process node names that path; the caller needs `end_user` on this
+app. The signed request context includes the Lattice run, node, step, and
+process ids.
+
+Feature flags need no declaration. `flags.isEnabled(name)` (or
+`flags.evaluate(names)` for up to 32 at once) asks Atlas, which evaluates them
+for the signed-in user as its own routes do, from any route, page or action. A
+refused call rejects, so treat a failure as off where a flag gates a change.
+
+To keep an audit trail of what users do in the application, declare
+`audit: { service: artifact_studio }` under `server.capabilities` and call
+`audit.record({ action, detail, resources, metadata })` from the server, for
+example `{ action: 'view', detail: 'invoices.view', resources: [{ type:
+'invoice', id }] }`. Atlas records it for the signed-in user, adds where it
+came from (project, deployment, request) and resolves once the audit log has it.
+Reads may record from GET handlers and pages. An application that replaces a
+product's Atlas routes can record under that product's audit service once
+Atlas registers the project for it. `metadata` takes scalars that say what
+happened, such as counts, outcomes and what was searched for. Never put request
+bodies, document contents or secrets in it.
+
 Managed secrets stay in hosted runtimes. For local integration tests, use your
 own test credentials, mocks or an existing governed function. Use a hosted
 preview for application code that needs a managed secret. Never put secrets in

package/templates/nextjs/package.json

@@ -10,7 +10,9 @@
     "dev": "next dev --webpack --hostname 127.0.0.1",
     "build": "next build",
     "start": "next start --hostname 127.0.0.1",
-    "type-check": "next typegen && tsc --noEmit"
+    "lint": "next typegen && tsc --noEmit --noUnusedLocals --noUnusedParameters --noFallthroughCasesInSwitch",
+    "type-check": "next typegen && tsc --noEmit",
+    "test": "node --test tests/*.test.mjs"
   },
   "dependencies": {
     "@sequenceholdings/artifact-studio": "{{artifactStudioVersion}}",

package/templates/nextjs/tests/server.test.mjs

@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import { greet } from '../app/actions.ts'
+import { GET } from '../app/api/health/route.ts'
+
+test('greeting validates input and returns the server action result', async () => {
+  const data = new FormData()
+  data.set('name', '  Atlas  ')
+  assert.deepEqual(await greet({ message: '', error: null }, data), {
+    message: 'Hello, Atlas. Your server action ran successfully.', error: null,
+  })
+  for (const name of ['', ' '.repeat(3), 'a'.repeat(81)]) {
+    data.set('name', name)
+    const result = await greet({ message: '', error: null }, data)
+    assert.equal(result.message, '')
+    assert.equal(result.error, 'Enter a name between 1 and 80 characters.')
+  }
+})
+
+test('health route returns uncached JSON without any runtime bindings', async () => {
+  const response = GET()
+  assert.equal(response.status, 200)
+  assert.equal(response.headers.get('cache-control'), 'no-store')
+  assert.deepEqual(await response.json(), { ok: true, framework: 'nextjs' })
+})

package/templates/react-vite/AGENTS.md

@@ -1,90 +1,10 @@
-# Sequence Artifact Studio app
+# Sequence development
 
-This is a sandboxed iframe SPA that runs inside Atlas and talks to Atlas backend routes through a postMessage bridge exposed as `seq.api.*` from `@sequenceholdings/artifact-studio`. No direct network access, no API keys in the bundle — everything goes through the bridge, and every endpoint the artifact uses must be declared in `artifact.bundle.yml`.
+Before every development task, read the live documentation for this project's
+target environment. Find the environment's URL with `seq-studio envs list`
+(or the project configuration), then open `<environment-url>/docs`.
 
-## Three rules that bite
-
-1. **Envelope unwrap.** Atlas wraps every CRM-style response in `{ success: true, data: T }`. The bridge passes that envelope through raw — it does **not** unwrap automatically. Route every read/write through `unwrap<T>()` in `src/lib/api.ts`:
-   ```ts
-   import { unwrap, seq } from './lib/api'
-   const customer = await unwrap<Customer>(seq.api.get(`/api/crm/customers/${id}`))
-   ```
-   For endpoints with extra envelope fields (pagination `meta`, warnings), drop to `seq.api.fetch` and read `res.body` directly.
-
-2. **FormData blocker.** `seq.api.fetch` `JSON.stringify`s any non-string `body` value, which silently turns `FormData` into `"{}"`. For multipart uploads, use `seq.api.upload(path, file, fields?, options?)`; the bridge constructs `FormData` in the trusted host and returns the usual `{ ok, status, body }` envelope.
-
-3. **Capability matcher: exact paths, `/*` prefix wildcards, and single-segment `*` patterns.** `{id}` template forms do **not** match. List both the bare path and the prefix wildcard for broad resources, or use a least-privilege segment pattern for dynamic routes:
-   ```yaml
-   - /api/crm/customers
-   - /api/crm/customers/*
-   - /api/lattice/runs/*/advance
-   ```
-
-## Prerequisite
-
-None — `seq-studio artifact init <dir>` works from any directory; no monorepo checkout is required. The template lists `@sequenceholdings/artifact-studio` and `@sequenceholdings/atlas-ui` in **devDependencies** for local editor/type-check tooling only. `seq-studio artifact build|deploy` bundles against the CLI's own pinned copies of `react`, `react-dom`, `@tanstack/react-query`, `react-router-dom`, `sonner`, and `@sequenceholdings/atlas-ui`, and resolves `@sequenceholdings/artifact-studio` to the CLI-pinned SDK, whose `seq` export uses the host-injected `window.seq`. The SDK also provides `createArtifactOrmExecutor({ namespace, manifest })` for persisted ORM operations; declare `/api/data/v2/<namespace>` under `capabilities.api.write`, including queries (execution uses POST). The helper handles the ORM envelope; do not pass its result to the CRM `unwrap()` helper. Remote deploys (`--repo` / `--git-url`) run `pnpm install --prod` for **app-specific** `dependencies` only (e.g. `recharts`, `reactflow`) from the artifact lockfile.
-
-## Package manager
-
-Use **pnpm** for artifacts you will deploy from git — `seq-studio artifact build|deploy --repo/--git-url` runs `pnpm install --frozen-lockfile --prod` when `package.json` is present, so commit `pnpm-lock.yaml`. Local editor-only installs can use another package manager, but pnpm keeps Sequence's `minimumReleaseAge` supply-chain quarantine in effect (see the studio-cli README). If you have a stale checkout from the old `file:`-link era, `rm -rf node_modules` and reinstall.
-
-## Key files
-
-| File | Role |
-|---|---|
-| `artifact.bundle.yml` | Capability manifest — every API path the artifact calls: exact paths, `/*` prefix wildcards, or single-segment `*` patterns |
-| `src/main.tsx` | Providers: `QueryClientProvider` → `PortalContainerProvider` → `App` |
-| `src/App.tsx` | Entrypoint UI |
-| `src/lib/api.ts` | `unwrap<T>` envelope helper + re-export of `seq` |
-| `src/styles.css` | Tailwind v4 + canonical `@sequenceholdings/atlas-ui/tokens.css` |
-| `vite.config.ts` | Vite + React + Tailwind v4 plugin |
-
-## Defaults
-
-- UI: prefer `@sequenceholdings/atlas-ui` primitives (`Button`, `Card`, `Input`, `Dialog`, `Select`, `Checkbox`, `DropdownMenu`, `KpiTile`, `Switch`, …) over raw Tailwind. The design-system cutover made `Select`, `Checkbox`, `DropdownMenu`, `Command`, `Calendar`, `ScrollArea`, `Table`, and the Task family first-class exports — use them directly; fall back to `Popover` compositions or native controls only when a component is genuinely missing.
-- Routing: `HashRouter`. Mount routes at `/`, not at the Atlas app prefix.
-- Data: React Query is wired in `src/main.tsx`. Use `useQuery` / `useMutation` against `unwrap(seq.api.*)`.
-- Icons: do **not** add third-party deps like `@tabler/icons-react`. Deploys from git (`--repo` / `--git-url`) build a bare tree — `seq-studio` runs `pnpm install --prod` from your lockfile, then aliases platform peers (`react`, `react-dom`, `@tanstack/react-query`, `react-router-dom`, `sonner`, `@sequenceholdings/atlas-ui`). List only app-specific imports (e.g. `recharts`) in `dependencies`; do not add file/workspace `@sequenceholdings/*` specs in git-service repos, because remote installs only accept registry semver specs. Inline SVG components in `src/icons.tsx`.
-
-## Tokens — colour comes from semantic roles, never a raw ramp
-
-This app bundles `@sequenceholdings/atlas-ui/tokens.css` and re-themes per tenant for free. Reach for a **semantic role** and colour follows the host brand and light/dark automatically.
-
-**Never** use the numbered `black-*` / `white-*` opacity scales (`text-black-40`, `bg-black-6`, `border-black-10`), raw Tailwind neutrals (`gray|slate|zinc|neutral|stone-N`), arbitrary hex in class strings (`bg-[#1f2937]`), or `var(--black-*)` / `var(--color-black-*)`. These are **retired** — post-cutover they resolve to nothing or to a fixed ink that won't flip in dark. Bare `text-white` / `bg-black` and opacity modifiers like `bg-foreground/10` stay legal; only the numbered steps and raw palettes are banned. There is no old→new lookup table on purpose — pick by *what the element is and what it sits on*.
-
-| Situation | Role |
-|---|---|
-| The page surface | `bg-background` — the page only, never a panel |
-| Bordered/rounded panel, card, list | `bg-card` — a border is not a surface; every bordered container needs an explicit surface |
-| Inset well inside a card (code block, read-only value) | `bg-muted` |
-| Form field (input, textarea, select trigger) | `bg-field` |
-| Interactive / hover fill | `bg-accent` / `bg-surface-hover` |
-| Selected / active / focus state fill | `bg-foreground/8`–`bg-foreground/15` overlay |
-| Modal scrim behind a dialog | `bg-overlay` — never `bg-foreground/N` (washes lighter in dark) |
-| Primary text | `text-foreground` |
-| Resting nav items, meta rows | `text-foreground-secondary` |
-| Section labels, captions | `text-muted-foreground` |
-| Standard border | `border-border` (form controls: `border-input`) |
-
-Surfaces **nest** — never repeat a rung (`bg-card` inside `bg-card` is invisible): `bg-background` (page) → `bg-card` (panel, + border + `shadow-xs` to lift) → `bg-muted` (inset well).
-
-**Dual-runtime.** Inside Atlas the artifact runs in its own iframe and inherits nothing — the runtime posts the host's resolved brand in as inline custom properties (theme channel + `data-tokens`). Standalone `vite dev` has no host, so the artifact must still render on the base semantic roles. **Do not** bundle `tokens.v2.tenants.css`, hardcode an opco's brand, or add `[data-theme]` selectors — that pins the artifact to one tenant.
-
-## Bridge methods
-
-Two primitives on `seq.api`:
-
-- `seq.api.fetch(path, options?)` returns `{ ok, status, body }` — does not throw on non-2xx. Use when you need the status (e.g. handle 409) or the raw envelope with extra fields like `meta`.
-- `seq.api.request(method, path, body?)` throws on non-2xx and returns parsed JSON. Sugar wrappers `seq.api.get / .post / .patch / .delete` are thin shells around `request`, so they also throw.
-
-Wrap reads/writes that should auto-throw through `unwrap()` in `src/lib/api.ts`. Drop to `seq.api.fetch` when you need pagination `meta` or status inspection.
-
-## Lattice embed context
-
-When the artifact is served from a Lattice human node (the **Tasks/Inbox** task surface, or the builder Artifacts tab), `seq.lattice.context()` tells you which run/node/step you're rendering for:
-
-```ts
-const { runId, nodeId, stepId, processId } = seq.lattice.context()
-```
-
-It's **synchronous** (the host injects this into the sandbox up front — no bridge round trip) and each field is `null` when unavailable. The Inbox provides all four; the builder Artifacts tab has no live `stepId`; a standalone open has no context at all. Use it instead of hand-parsing `window.location` — that's the sanctioned, stable accessor, and you don't need to declare anything in `artifact.bundle.yml` for it. To read step-scoped data, pass `runId`/`stepId` to the relevant Atlas endpoint (which still authorizes the caller server-side).
+Start with that site's `/docs/llms.txt` index and follow the relevant pages as
+needed. The hosted docs are the single source of truth for platform usage;
+do not duplicate their instructions in this file. If docs access is blocked,
+open the same URL in the signed-in browser.

package/templates/react-vite/CLAUDE.md

@@ -1,7 +1 @@
-# Sequence Artifact Studio app
-
-Agent instructions for this artifact live in `AGENTS.md` — one file every coding agent reads
-(Cursor and Codex load `AGENTS.md` natively; the import below pulls it in for Claude Code).
-Add or edit guidance in `AGENTS.md`, not here.
-
 @AGENTS.md

package/templates/react-vite/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@sequenceholdings/artifact-studio": "^0.4.0",
+    "@sequenceholdings/artifact-studio": "^0.6.0",
     "@sequenceholdings/atlas-ui": "^3.1.1",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",

package/templates/react-vite/src/App.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { seq } from '@sequenceholdings/artifact-studio'
 import {
   Button,
@@ -15,23 +16,36 @@ const CARDS = [
 ]
 
 export default function App() {
+  const [status, setStatus] = useState<'idle' | 'pending' | 'ok' | 'error'>('idle')
+
   async function pingAtlas() {
-    const response = await seq.api.get<{ ok?: boolean }>('/api/health')
-    alert(`Atlas responded: ${JSON.stringify(response)}`)
+    setStatus('pending')
+    try {
+      await seq.api.get<{ ok?: boolean }>('/api/health')
+      setStatus('ok')
+    } catch {
+      setStatus('error')
+    }
   }
 
   return (
-    <main className="min-h-screen bg-background p-10">
-      <p className="text-xs font-extrabold tracking-widest uppercase text-primary mb-2">
-        Artifact Studio
-      </p>
-      <h1 className="text-lg font-bold tracking-tight">Build on Atlas</h1>
-      <p className="text-muted-foreground leading-relaxed max-w-2xl mt-2">
-        This app uses Atlas&apos;s shared UI component library. Import any
-        component from <code className="text-sm font-mono">@sequenceholdings/atlas-ui</code>.
+    <main className="min-h-full bg-background p-roomy text-foreground sm:p-10">
+      <div>
+        <p className="mb-2 text-xs font-extrabold uppercase tracking-widest text-primary">
+          Artifact Studio
+        </p>
+        <h1 className="text-lg font-bold tracking-tight">Build on Atlas</h1>
+      </div>
+      <p className="mt-2 max-w-2xl leading-relaxed text-muted-foreground">
+        This app uses Atlas&apos;s shared UI component library. Import any component
+        from{' '}
+        <code className="font-mono text-sm">
+          @sequenceholdings/atlas-ui
+        </code>
+        .
       </p>
 
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-sm mt-7 max-w-3xl">
+      <div className="mt-7 grid max-w-3xl grid-cols-1 gap-inline-loose sm:grid-cols-3">
         {CARDS.map((card) => (
           <Card key={card.label}>
             <CardHeader>
@@ -46,9 +60,18 @@ export default function App() {
         ))}
       </div>
 
-      <Button className="mt-6" onClick={pingAtlas}>
-        Test Atlas API bridge
-      </Button>
+      <div className="mt-6 flex flex-wrap items-center gap-inline">
+        <Button
+          size="lg"
+          className="min-h-11"
+          disabled={status === 'pending'}
+          onClick={() => void pingAtlas()}
+        >
+          {status === 'pending' ? 'Testing…' : 'Test Atlas API bridge'}
+        </Button>
+        {status === 'ok' ? <Badge variant="secondary">Atlas responded</Badge> : null}
+        {status === 'error' ? <Badge variant="destructive">Request failed</Badge> : null}
+      </div>
     </main>
   )
 }

package/templates/react-vite/src/styles.css

@@ -10,3 +10,13 @@
    build-time injection. At DES-227 cutover, tokens.css becomes v2 — drop the
    explicit tokens.v2 / theme.v2 imports (and the CLI stops injecting them). */
 @source "../node_modules/@sequenceholdings/atlas-ui/dist";
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}