Single Page App (spa)

Category: frontend | Form: | Symbol: Sp

Host a custom Single Page Application

SPA hosts client-side rendered web apps. Requires a build step before serving. Curated scaffolds (svelte — the default and fastest-loading — plus react, vue) ship a modern Vite + TypeScript + Tailwind CSS v4 starter with a Triform platform layer (auth-aware fetch, circle inference, branded sign-in overlay) and a unit test; they build with bun. The build operation runs via BuildForce, which detects the toolchain from package.json — so any Vite framework also builds (solid, astro, next, nuxt, qwik, …) when you bring your own package.json. Vanilla SPAs get a zero-dependency build path — files are read directly from the workspace/CAS without a bundler, making it the fastest path for agents to publish HTML/CSS/JS. Build artifacts are stored to S3 (namespace exp-{element_id}). The serve operation loads cached index.html from S3; without a prior build, a placeholder page is returned. The navigate operation is identical to serve — all routes return the same index.html for client-side history API routing. Set spec.framework (required field) and optionally spec.source (defaults to “local”). The build operation accepts environment (development/staging/production) and clean (boolean) inputs. PWA support: set pwa.enabled=true to make the SPA installable on mobile and desktop. This injects a web app manifest and service worker automatically. Set pwa.name, pwa.icons (192x192 + 512x512), and pwa.theme_color for best results. pwa.offline_strategy controls caching (cache-first by default). Common mistake: calling navigate expecting server-side route resolution — SPA always returns index.html regardless of path. Use ssr if you need per-route server rendering.

Guide

Host client-side rendered web applications with framework auto-detection and zero-dependency vanilla builds.

Overview

SPA elements build and serve client-side JavaScript applications. The build pipeline runs via BuildForce with automatic framework detection, and artifacts are stored to S3 for fast serving. A unique feature: vanilla framework bypasses npm entirely, reading files directly from the workspace/CAS.

How It Works

Build (physics/src/physics/impls/spa.rs)

1. Detects framework from spec.framework — supports: react, vue, svelte, sveltekit, next, nuxt, angular, solid, astro, vanilla
2. Vanilla path: Reads files from workspace/CAS via storage layer, no npm/bundler needed. If no files exist, generates a default index.html
3. Framework path: Constructs a BuildRequest with framework hint, minification (production), source maps (non-production), and caching
4. Stores all artifacts to S3 (exp-{element_id}/builds/latest/)
5. Entry HTML is stored at the well-known path builds/latest/index.html for fast serve

Serve

Loads index.html from S3. Without a prior build, returns a placeholder page showing element info and framework name.

Navigate

Identical to serve — always returns the same index.html. SPA routing is handled client-side via the history API. The path parameter is logged but doesn’t change the response.

Configuration

Required Fields

Field	Type	Default	Description
framework	enum	react	react, vue, svelte, angular, vanilla

Key Properties

Property	Type	Description
source	string	Git URL or “local” (default: “local”)
build.command	string	Build command (default: “npm run build”)
build.output_dir	string	Build output directory (default: “dist”)
routing.mode	enum	history, hash, memory
cdn.enabled	boolean	Enable CDN distribution (default: true)
environment.variables	object	Build-time env vars

Operations

Operation	Description
build	Run BuildForce with framework detection. Returns build_hash, size_bytes, duration_ms, cache_hit
serve	Return cached index.html from S3
navigate	Same as serve (SPA history API fallback)

Plus all category operations.

Quick Start

# Create a React SPA
POST /api/{circle}/frontend/spa/
{
  "slug": "my-app",
  "spec": { "framework": "react", "source": "local" }
}

# Build it
POST /api/{circle}/frontend/spa/my-app/ops/build
{ "environment": "production" }

# Serve via public URL
GET /{circle}/frontend/spa/my-app/live

Vanilla SPA (fastest path)

# Create with vanilla framework — no npm needed
POST /api/{circle}/frontend/spa/
{
  "slug": "landing",
  "spec": { "framework": "vanilla" }
}

# Write files via CAS, then build
POST /api/{circle}/frontend/spa/landing/ops/build {}
# Build reads workspace files and stores them directly

S3 Storage

• Namespace: exp-{element_id}
• Build artifacts: builds/latest/{filename}
• Manifest: builds/latest/manifest.json
• Entry HTML: builds/latest/index.html

When to Use

• Custom React/Vue/Svelte/Angular applications
• Static sites that need client-side routing
• Agents publishing HTML/CSS/JS quickly (use vanilla framework)

When NOT to Use

• Need SEO or server-side data → use ssr
• Simple forms/dashboards without code → use view
• 3D/WebGL → use three-d

Related

• View — No-code declarative UI
• SSR — Server-side rendering
• Frontend Category — Shared operations

Relationships

• Attaches to: auth-policy, evaluator, brand
• Uses: variable, function

Capabilities

• buildable: Supports build/serve/assets operations
• csr: Client-side rendering
• cdn: CDN distribution
• frameworks: Multiple framework support
• preview: Preview deployments
• installable: PWA — installable on mobile and desktop via manifest + service worker

Properties

Property	Type	Default	Description
source	string	—	Git reference to source code directory
framework	string	"svelte"	Frontend framework (curated: svelte, react, vue, vanilla; any Vite framework also builds)
entry_point	string	"index.html"	Main entry file for the SPA
data_sources	array	—	References to data source elements
build	object	—	Build configuration
routing	string	"hash"	Client-side routing configuration
assets	object	—	Static asset configuration
environment	object	—	Environment variable injection
cdn	object	—	CDN and distribution settings
security	object	—	Security headers and policies
pwa	object	—	Progressive Web App configuration — makes this SPA installable on mobile and desktop
preview	object	—	Preview deployment settings

Operations

activity

Get /ops/activity | Auth: Read

Get activity events for this element

Scope depends on element capabilities: individual elements query by element_id, project-form elements with activity-scope-members include member activities, circle-level elements with activity-scope-all query the entire circle. Gracefully returns empty list if activities table is missing (old circles).

analytics

Get /ops/analytics | Auth: Read

Get experience usage analytics

Returns usage metrics for the frontend element. Use ?period query param (1d, 7d, 30d, 90d) to specify the time window. Returns views, unique_visitors, avg_session_duration_ms, bounce_rate, and top_paths. Useful for understanding user engagement with the frontend.

asset

Get /ops/assets/{asset_path} | Auth: Read

Serve a static asset from the build output (JS, CSS, WASM, images)

Serves a single asset by path from the build output. Returns binary content with appropriate Content-Type header. Used by the browser to load JS/CSS/WASM referenced in the served HTML. Typically called via /live URLs, not directly by agents.

assets

Get /ops/assets | Auth: Read

List bundled static assets

Lists all static assets from the last build output (JS, CSS, images, fonts). Each asset includes path, type, size_bytes, and content hash for cache busting. Returns total_size_bytes for the whole bundle. Only meaningful after a successful build.

attach

Post /ops/attach | Auth: Read

Attach this experience to a target element

Attaches this frontend to a target element (e.g., browser or user-browser). The target’s contract.yaml must declare this frontend type in attaches. Priority controls ordering when multiple frontends are attached. Returns attachment_id for later detach.

attachments

Get /ops/attachments | Auth: Read

List all modifiers and resources attached to this element

Returns both modifiers (policy enforcement) and resources (data injection) with is_modifier flag to distinguish. Items in the generated MODIFIER_TYPES list are modifiers; everything else is a resource. Includes cascade_policy and version pin info.

batch_stats

Get /ops/batch_stats | Auth: Read

Get per-element statistics for all children of this element

Returns per-child stats plus an aggregate. Most meaningful on compound or manifest form elements (repositories, circles, projects); atoms have no children so the result is an empty children array with a zeroed aggregate. Uses efficient GROUP BY SQL. Weighted averages for eval scores.

build

Post /ops/build | Auth: Write

Build the SPA bundle

Runs BuildForce with auto-detected framework (react/vue/svelte/angular/solid/astro/vanilla). Vanilla framework bypasses npm entirely — reads files from workspace/CAS and stores as-is. Pass environment (default: production) for minification/sourcemap control. clean:true deletes previous S3 artifacts first. Returns build_hash (12 chars), asset_count, size_bytes, duration_ms, and cache_hit. On failure returns success:false with error and log.

build_status

Get /ops/build-status | Auth: Read

Get current build status

Returns the current build state: success (with file count and serve URL), in-progress, or not-built. Call after ‘build’ to check compilation status.

compose

Post /ops/compose | Auth: Execute

Batch add and remove modifiers on this element in a single call

Declarative composition: add modifiers by ref path (slug or path@version) and remove by attachment ID, all in one atomic call on the target element. Each ‘add’ entry resolves the source element, validates topology, attaches with optional priority and cascade policy. Each ‘remove’ entry deletes the attachment row. Returns a summary of what was added and removed. Example: compose({ add: [{ref: “my-prompt”}, {ref: “rate-limit/api@v2”, priority: 50}], remove: [{attachment_id: “uuid”}] })

configure_domain

Post /ops/domain | Auth: Admin

Configure a custom domain for this experience

Maps a custom domain (e.g., app.example.com) to this frontend element. ssl_mode “auto” provisions a Let’s Encrypt certificate automatically. Returns status (pending_verification, active, error) and ssl_status. DNS must point to Triform before verification succeeds.

context

Get /ops/context | Auth: Read

Get connected elements (graph traversal)

Graph traversal showing all connected elements with their relationship type (contains, contained_by, references, referenced_by, attaches, etc.). Use ?depth=N to control traversal depth (default 1) and ?types=actor,data to filter by element types.

create

Post /ops/create | Auth: Write

Create child element

POST to the parent path — element_type goes in the request body, NOT the URL. Both element_type and slug are required and must be non-empty. Name is derived from slug if omitted. Writes to both Git and PostgreSQL. All elements are stored flat under the circle — no intermediate library wrapper rows.

create_preview

Post /ops/preview/create | Auth: Write

Create a time-limited public preview link (no auth required to view)

Generates a shareable preview URL that expires after expires_in_hours (default 24). Anyone with the URL can view the frontend without authentication. Returns the token, full preview URL, and expiration timestamp. Use for stakeholder reviews or demos.

delete

Delete /ops/delete | Auth: Admin

Delete element (soft delete)

Soft delete — sets state to ‘deleted’ but retains the record. Cannot delete elements that have children (has_no_bond precondition) or active runs. Requires admin auth and confirmation.

detach

Post /ops/detach | Auth: Read

Detach this experience from a target element

Removes the attachment between this frontend and a target element. Requires target_id. This is a destructive action — the frontend will no longer be served through that target.

disable

Post /ops/disable | Auth: Admin

Disable element (hides and prevents use)

Idempotent — safe to call on already-disabled elements. Optionally pass a reason string. Disabled elements cannot be invoked or executed. Inverse of enable.

enable

Post /ops/enable | Auth: Admin

Enable element (makes usable and visible)

Idempotent — safe to call on already-enabled elements. Transitions element to ready/enabled state. Cannot enable deleted elements. Inverse of disable.

export_bundle

Get /ops/export/bundle | Auth: Read

Export element as downloadable git bundle

On non-root-namespace elements, returns a binary git bundle. On root-namespace (circle) elements, dispatch hands off to the circle’s own export_bundle op, which returns a multi-element JSON envelope with one base64 bundle per child element — this is intentional, not an error.

get

Get /ops/get | Auth: Read

Get element details

Element is already resolved by the routing layer — this returns the cached element, not a fresh DB query. Use the path /api/{circle}/{slug} to address elements.

get_attached_modifiers

Get /ops/attached | Auth: Read

Get elements that are attached to this experience

Returns modifiers and resources attached TO this frontend (inverse of list_attachments). Includes rate-limit, auth-policy, and other modifier elements that affect this frontend.

import_bundle

Post /ops/import/bundle | Auth: Write

Import git bundle into element

Accepts a base64-encoded git bundle in the JSON bundle_base64 field. Use overwrite=true to replace existing elements with same slug (default skips duplicates). Imported elements get new UUIDs. Returns counts of imported/skipped elements and any errors.

intention

Get /ops/intention | Auth: Read

Get element intention with full inheritance chain

Returns three levels: direct (this element’s intention), inherited (from category and root), and resolved (final merged intention). Useful for understanding an element’s purpose in context of its hierarchy.

list_attachments

Get /ops/targets | Auth: Read

List all elements this experience is attached to

Returns all target elements where this frontend is currently attached. Shows target_id, target_type, priority, and cascade_policy.

navigate

Post /ops/navigate | Auth: Read

Client-side navigation

Identical to serve — always returns the same index.html regardless of path input. SPA routing is handled entirely client-side via the history API. The path parameter is logged for debugging but does not affect the response content.

preview

Get /ops/preview | Auth: Read

Get preview screenshot

Returns the most recent preview screenshot for this SPA element. Screenshots are captured automatically after promote operations (demo, live) using headless Chromium (Browserless). Returns has_screenshot:true with a base64 data URL in screenshot_url, or has_screenshot:false if no screenshot has been captured yet. Priority: live > demo > dev.

promote

Post /ops/promote | Auth: Admin

Promote element configuration to a target environment

Only for manifest-form elements (projects). Environments advance: dev → demo → live. dev→demo requires member+ role, demo→live requires admin. Freezes member versions at promotion time (creates snapshot). Persists environment config to spec.environments.

readme

Get /ops/readme | Auth: Read

Get element README.md content

Reads README.md from the element’s git repository. Returns empty content (not an error) if no README exists. Always returns markdown format.

readme_update

Post /ops/readme_update | Auth: Write

Update element README.md content

Creates or overwrites README.md in the element’s git repo. Commits to the draft branch. Content must be provided as a markdown string.

remove-modifier

Post /ops/remove-modifier | Auth: Execute

Remove an attached modifier from this element by attachment ID

Removes a modifier/resource attachment by its row ID. The ID comes from the attachments or context API. This is the reverse of attach — called on the target element, not the source.

render

Post /ops/render | Auth: Read

Render the SPA (alias for serve)

Same as serve — loads index.html from CAS workspace or S3 build artifacts, falling back to a placeholder page. Use serve for GET-style retrieval; use render when you need POST with an input body (e.g. passing context data). Returns _html_content with _etag and _cache_control.

restore

Post /ops/restore | Auth: Admin

Restore element to a specific version

Automatically snapshots the current state before restoring (creates a ‘Before restore to vN’ version entry). Writes restored spec to git as .triform/spec.yaml. Git failures warn but don’t fail the operation — DB state is authoritative. Cannot restore deleted elements.

schema

Get /ops/schema | Auth: Read

Get element input/output schema (MCP tools/list compatible)

Returns type-level port schemas from the TypeRegistry — not instance-specific overrides. Includes direction (input/output), required flag, and JSON schema per port. Useful for understanding what data an element accepts and produces.

serve

Get /ops/serve | Auth: Read

Serve the SPA assets

Loads index.html from S3 (exp-{element_id}/builds/latest/index.html). Returns placeholder if no build exists. Response includes _html_content, _etag, _cache_control, framework name. Source defaults to “local”, framework defaults to “react” if empty.

source

Get /ops/source | Auth: Read

Get any file’s content from the element’s git repository

Reads an arbitrary file from the element’s CAS-backed git tree by its relative path. Same store as readme, just generalized. Path safety: rejects .. traversal, leading /, and null bytes. Use this to view main.py for action elements, asset files for SPAs, etc. Returns empty content (not an error) if the file doesn’t exist.

source_branches

Get /ops/source/branches | Auth: Read

List Source branches for this element

Returns the standard draft/demo/live Source branches, their current commits, and promotion relationships. Use GET /api/{element_path}/ops/source/branches.

source_promote

Post /ops/source/promote | Auth: Write

Promote Source branch forward

Promotes draft to demo or demo to live through the generated element op path. Direct Git pushes to demo/live are blocked by Source policy.

source_repair

Post /ops/source/repair | Auth: Write

Inspect or repair the element Source index

Runs Source repair through the element operation path. Defaults to dry_run=true; set dry_run=false only after reviewing a dry-run report.

source_status

Get /ops/source/status | Auth: Read

Get Source control status for this element

Returns the branch-aware clone URL, checkout commands, current draft commit, child source-link count, portable export summary, Source health, warnings, and auth hints for the addressed element. Use the element-first path: GET /api/{element_path}/ops/source/status.

source_validate

Post /ops/source/validate | Auth: Read

Validate Source branch contents

Validates a Source branch before accepting local Git workflow changes or promotion. Defaults to branch=draft and rejects runtime data, generated output, secret material, and unreadable CAS refs.

stats

Get /ops/stats | Auth: Read

Get aggregate statistics for this element

Health status is computed: error if errors_per_day > 5 or success_rate < 0.8, warning if errors_per_day > 0 or success_rate < 0.95. Firing alerts escalate health to error/warning. Default period is ‘day’. Returns runs_per_day, success_rate, avg_duration_ms, and more.

tree

Get /ops/tree | Auth: Read

Get the element’s position in the graph — ancestors, children, references, and subtree statistics

Uses per-circle ElementGraph cache for O(1) lookups. Returns ancestors (containment chain), children (direct), members (references), referenced_by (reverse refs), attachments, and subtree stats. Default depth is 3, max is 10. Pass ?include_metadata=true for name/state on each node.

update

Patch /ops/update | Auth: Write

Update element

Partial update — send only the fields you want to change. spec, name, and intention are all independently optional. spec MUST be a JSON object when present; deep-merged into the existing spec by default. Empty {"spec":{}} preserves existing spec content but still records a new version (no-op for content, not for version state). To clear/replace the entire spec wholesale send {"spec":{...},"deep":false}. List-typed spec fields use replace semantics (the patch list replaces the existing list, no array merging). Coordinates Git + DB writes. Slug cannot be changed after creation.

update_meta

Patch /ops/update_meta | Auth: Write

Update element metadata (lightweight merge — does NOT bump version or snapshot spec)

Shallow JSONB merge into element.meta. Top-level keys in the provided value replace existing meta values; other keys are preserved. Used for UI metadata like canvas positions, panel state, viewer preferences. Wire-shape op_name is update_meta (distinct from update) so SSE subscribers + the cache auto-invalidator can distinguish lightweight metadata changes from spec edits without inspecting the payload. The MutatingElementStore wrapper stamps this op_name on the lifecycle event emitted by update_element_meta storage calls.

version

Get /ops/version | Auth: Read

Get current version or full history

Returns current version by default. Pass ?history=true for full version history (up to ?limit=N, default 50). Versions are backed by the element_versions table. Every spec update creates a new version entry.

Error Codes

Code	Class	Retryable	Description
SPA_BUILD_FAILED	internal	yes	SPA build failed
SPA_DEPLOY_FAILED	internal	yes	SPA deployment failed