@vellumai/assistant 0.8.12 → 0.9.0-staging.2

package/src/config/bundled-skills/workflows/SKILL.md

@@ -0,0 +1,214 @@
+---
+name: workflows
+description: Author and run autonomous multi-agent workflows that fan work across parallel leaf agents
+compatibility: "Designed for Vellum personal assistants"
+metadata:
+  emoji: "⚙️"
+  vellum:
+    display-name: "Workflows"
+    category: "system"
+    feature-flag: "workflows"
+    activation-hints:
+      - "A task decomposes into many similar sub-tasks that can run concurrently (score every item, extract a field from each of many documents, draft-then-verify a batch)"
+      - "You want fan-out orchestrated deterministically and the result reported back when the whole run finishes"
+    avoid-when:
+      - "The task is a single tool call or a quick lookup — do it inline"
+      - "The work needs interactive, conversational back-and-forth rather than unattended fan-out"
+---
+
+A workflow is a short JS/TS script you author that runs in a sandbox and fans work
+out across many short-lived **leaf agents**, orchestrated deterministically. Launch
+one with `run_workflow` (inline `script` OR saved `name`, exactly one). It returns a
+`runId` immediately; the run is asynchronous and you are notified in this
+conversation when it completes — **do NOT poll**.
+
+Reach for one when a task decomposes into many similar small sub-tasks that can run
+concurrently. For a single task or a quick lookup, do it inline.
+
+## The script model
+
+These are the load-bearing invariants. Get them wrong and the run misbehaves silently.
+
+### Scripts are SYNCHRONOUS — never `await`
+
+Host functions block and return their result directly. Write straight-line code.
+
+```js
+const r = agent("Summarize this thread."); // r is the result, right here
+```
+
+Do **not** write `await agent(...)`, and do **not** make the script `async`. An
+`async` script deadlocks on its second host call — the sandbox can suspend the main
+evaluation stack but not a promise continuation.
+
+### Every script begins with a literal `meta`
+
+The first statement must be a pure-literal export — no computed values, template
+strings, or concatenation:
+
+```js
+export const meta = {
+  name: "triage-inbox",
+  description: "Triage and label inbox messages",
+};
+```
+
+`meta` is extracted **statically**, without executing the script, so it must be a
+plain object literal with string `name` and `description`. The `name` is how a saved
+workflow is referenced by `workflow(name)` and the scheduler.
+
+### You must `return` the result
+
+The script body runs as a function. Its result is whatever it `return`s at the top
+level — a bare trailing expression (e.g. `result;`) is **discarded** and the run
+finishes with no result. Always `return` the value you want surfaced.
+
+```js
+const result = agent(`Write the final summary: ${JSON.stringify(parts)}`);
+return result;
+```
+
+### Determinism (this is what makes runs resumable)
+
+Every leaf call is journaled by sequence number and input hash, so a resumed run can
+replay the unchanged prefix instead of re-spawning agents. That only holds if the
+script is deterministic, so `Date.now()`, `Math.random()`, and argless `new Date()`
+**throw**. Pass any timestamps or random seeds in through `args`.
+
+## Host API
+
+All functions are synchronous from the script's perspective.
+
+| Function                     | Returns                                        | Notes                                                                                                       |
+| ---------------------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `agent(prompt, opts?)`       | the leaf's result                              | Runs ONE leaf. **Throws** on leaf failure (fails the whole run).                                            |
+| `leaf(prompt, opts?)`        | a leaf descriptor                              | Runs nothing on its own; used inside `parallel`/`map`/`pipeline`.                                           |
+| `parallel(specs)`            | `results[]`                                    | Runs an array of `leaf(...)` descriptors concurrently, results in input order. A failed leaf becomes `null` (never throws). |
+| `map(items, build)`          | `results[]`                                    | `build(item, i)` returns a `leaf(...)` descriptor per item; runs them like `parallel`.                     |
+| `pipeline(items, ...stages)` | `results[]`                                    | Each `stage(prev, i)` returns a `leaf(...)` descriptor (run an agent) OR a plain value (pass through unchanged — filter/transform locally, no agent spent). Per-stage barrier: stage N+1 starts only after all of stage N finishes. |
+| `phase(title)`               | —                                              | Marks a named phase for progress reporting.                                                                |
+| `log(msg)`                   | —                                              | Emits a progress log line.                                                                                  |
+| `usage()`                    | `{ agentsSpawned, inputTokens, outputTokens }` | Live snapshot so a script can self-moderate.                                                               |
+| `workflow(name, args?)`      | the child's result                             | Runs a SAVED workflow inline, depth 1 only (a child may not call `workflow()`).                            |
+| `args`                       | the run input                                  | The `args` object passed to `run_workflow`.                                                                |
+
+Use `agent` for a single sequential leaf (throws on failure). Use `parallel`/`map`/
+`pipeline` for fan-out (a failed leaf is `null`, so a batch survives a few bad items).
+
+## Leaf options (`opts` for `agent` / `leaf`)
+
+| Option    | Type                       | Effect                                                                                  |
+| --------- | -------------------------- | --------------------------------------------------------------------------------------- |
+| `schema`  | JSON Schema object literal | Forces structured output via a tool. A schema leaf runs with **no tools** (pure judge/extractor). Use a plain JSON Schema literal, not Zod. |
+| `label`   | string                     | Short display/diagnostic label for the leaf.                                            |
+| `profile` | string                     | Overrides the model profile. Must exist in `llm.profiles` or the leaf throws. See [Listing profiles](#listing-available-profiles). |
+| `persona` | boolean                    | `true` makes the leaf speak AS the assistant (identity + memory) — use for output meant to be in the assistant's voice. Default is anonymous — use for impartial judging/extraction. |
+
+`persona: true` is the costly path (it runs the full memory-injection pipeline). Use
+it only for the few leaves whose output must be in the assistant's voice; keep bulk
+judging/extraction anonymous.
+
+## Capabilities — the single consent point
+
+The `capabilities` argument to `run_workflow` declares **once**, up front, what the
+run's leaves may do. There are **no per-call permission prompts inside a running
+workflow**.
+
+```jsonc
+{
+  "tools": ["file_write", "gmail_send"], // side-effecting tools granted to leaves
+  "hostFunctions": [],                    // host-function names the run may invoke
+  "persona": true                         // grant leaves persona (identity + memory)
+}
+```
+
+- **Read-only baseline** (always available, no declaration, no launch prompt):
+  `file_read`, `file_list`, `recall`, `web_search`.
+- **`web_fetch` is NOT in the baseline** — an outbound fetch is side-effecting (its
+  URL can exfiltrate read data), so a leaf that must fetch a URL has to declare
+  `"web_fetch"` in `capabilities.tools`.
+- **Declaring ANY side-effecting tool** (writes, sends, shell, `web_fetch`, …) or
+  host function makes the LAUNCH prompt the user for approval **once** — that single
+  approval covers the whole run. A read-only run (no declared tools) launches with no
+  prompt. Declare the minimum you need.
+
+Runs are autonomous but BOUNDED by a per-run agent cap — spend is structurally
+capped and you cannot exceed it.
+
+## Listing available profiles
+
+Before choosing a `profile` for a leaf, look up the valid values rather than guessing
+— an unknown profile throws.
+
+- **Preferred (model-accessible):** call `manage_workflows` with action
+  `list_profiles`. It returns the profile names defined in `llm.profiles` plus the
+  workspace-wide active profile.
+- The same data is served by the daemon route `GET config/llm/profiles` (operationId
+  `llm_profiles_list`), which clients use to populate profile dropdowns.
+
+Omit `profile` to use the default: a persona leaf mirrors the main agent (the active
+profile floats above the call-site default); an anonymous leaf uses the cost-optimized
+`workflowLeaf` default.
+
+## Run management
+
+Use `manage_workflows` to inspect and control runs:
+
+| Action          | Requires   | Purpose                                                          |
+| --------------- | ---------- | ---------------------------------------------------------------- |
+| `status`        | `run_id`   | Status + agent/token counts for one run (NOT the result).       |
+| `get_result`    | `run_id`   | The full result of a finished run.                              |
+| `list_runs`     | —          | Recent runs, newest first.                                      |
+| `abort`         | `run_id`   | Signal an in-flight run to abort.                               |
+| `resume`        | `run_id`   | Resume an `interrupted` run (see below).                        |
+| `list_profiles` | —          | List defined profiles + the active profile (for leaf `profile`).|
+
+The completion notification injected when a run finishes carries a **truncated**
+preview of the result (large results are cut off). To read the complete result,
+call `manage_workflows` with action `get_result` and the `run_id` — `status`
+deliberately omits the result to stay lightweight.
+
+### Crash recovery / resume
+
+Resume is **not automatic**. If the assistant restarts mid-run, the run is reconciled
+to status `interrupted` (the agent/token accounting is preserved so the agent cap
+still carries across the restart). It sits there until you explicitly resume it by
+`run_id` via `manage_workflows` action `resume`. Resuming re-invokes the engine with
+the same `runId`: the journal **replays the completed prefix** without re-spawning (or
+re-paying for) finished leaves, then continues from the first unfinished leaf under the
+run's originally-declared capabilities. Only `interrupted` runs are resumable; a
+`completed` / `failed` / `aborted` run is terminal.
+
+## Worked example
+
+Score each inbox item in parallel (anonymous schema leaves), then write one summary in
+the assistant's voice (a single persona leaf). The item list comes in via `args` —
+never fetched inside the script.
+
+```js
+export const meta = {
+  name: "triage-inbox",
+  description: "Score and summarize inbox items",
+};
+
+phase("score");
+const scored = map(args.items, (item) =>
+  leaf(`Rate this message's urgency 0-10 with a one-line reason:\n${item.subject}\n${item.body}`, {
+    label: `score:${item.id}`,
+    schema: {
+      type: "object",
+      properties: { urgency: { type: "number" }, reason: { type: "string" } },
+      required: ["urgency", "reason"],
+    },
+  }),
+);
+
+phase("summarize");
+const summary = agent(
+  `Here are scored inbox items. Write a short triage summary, highlighting anything urgent:\n${JSON.stringify(scored)}`,
+  { persona: true },
+);
+return summary;
+```
+
+A failed scoring leaf shows up as `null` in `scored`; the run continues.

package/src/config/bundled-skills/workflows/TOOLS.json

@@ -0,0 +1,84 @@
+{
+  "version": 1,
+  "tools": [
+    {
+      "name": "run_workflow",
+      "description": "Launch an autonomous, multi-agent workflow from a script you author (or by saved name); returns a runId immediately and notifies this conversation on completion. See SKILL.md for the full script-authoring contract.",
+      "category": "workflow",
+      "risk": "low",
+      "input_schema": {
+        "type": "object",
+        "properties": {
+          "script": {
+            "type": "string",
+            "description": "Inline workflow source (JavaScript/TypeScript) following the authoring contract. Provide this OR name, not both."
+          },
+          "name": {
+            "type": "string",
+            "description": "Name of a previously saved workflow to run. Provide this OR script, not both."
+          },
+          "args": {
+            "type": "object",
+            "description": "Verbatim input object exposed to the script as `args`. Pass timestamps/seeds here (the script may not generate them)."
+          },
+          "capabilities": {
+            "type": "object",
+            "description": "Per-run capability grant (the single consent point). Leaves get a read-only baseline by default.",
+            "properties": {
+              "tools": {
+                "type": "array",
+                "items": { "type": "string" },
+                "description": "Side-effecting tool names granted to leaves on top of the read-only baseline."
+              },
+              "hostFunctions": {
+                "type": "array",
+                "items": { "type": "string" },
+                "description": "Host-function names the run may invoke."
+              },
+              "persona": {
+                "type": "boolean",
+                "description": "Grant leaves access to persona (identity + memory) context."
+              }
+            }
+          },
+          "label": {
+            "type": "string",
+            "description": "Human-readable label for display; defaults to the script's meta.name."
+          }
+        }
+      },
+      "executor": "tools/run-workflow.ts",
+      "execution_target": "host"
+    },
+    {
+      "name": "manage_workflows",
+      "description": "Inspect or control workflow runs started by run_workflow: status, get_result (the full result of a finished run — the completion notification truncates large results), abort, resume, list_runs, and list_profiles. See SKILL.md for details.",
+      "category": "workflow",
+      "risk": "low",
+      "input_schema": {
+        "type": "object",
+        "properties": {
+          "action": {
+            "type": "string",
+            "enum": [
+              "status",
+              "get_result",
+              "abort",
+              "resume",
+              "list_runs",
+              "list_profiles"
+            ],
+            "description": "What to do."
+          },
+          "run_id": {
+            "type": "string",
+            "description": "Target run id (required for \"status\", \"get_result\", \"abort\", and \"resume\")."
+          }
+        },
+        "required": ["action"]
+      },
+      "executor": "tools/manage-workflows.ts",
+      "execution_target": "host"
+    }
+  ]
+}

package/src/config/bundled-skills/workflows/tools/manage-workflows.ts

@@ -0,0 +1,12 @@
+import type {
+  ToolContext,
+  ToolExecutionResult,
+} from "../../../../tools/types.js";
+import { executeManageWorkflows } from "../../../../tools/workflows/manage-workflows.js";
+
+export async function run(
+  input: Record<string, unknown>,
+  context: ToolContext,
+): Promise<ToolExecutionResult> {
+  return executeManageWorkflows(input, context);
+}

package/src/config/bundled-skills/workflows/tools/run-workflow.ts

@@ -0,0 +1,12 @@
+import type {
+  ToolContext,
+  ToolExecutionResult,
+} from "../../../../tools/types.js";
+import { executeRunWorkflow } from "../../../../tools/workflows/run-workflow.js";
+
+export async function run(
+  input: Record<string, unknown>,
+  context: ToolContext,
+): Promise<ToolExecutionResult> {
+  return executeRunWorkflow(input, context);
+}

package/src/config/bundled-tool-registry.ts

@@ -24,7 +24,7 @@ import * as appCreate from "./bundled-skills/app-builder/tools/app-create.js";
 import * as appDelete from "./bundled-skills/app-builder/tools/app-delete.js";
 import * as appGenerateIcon from "./bundled-skills/app-builder/tools/app-generate-icon.js";
 import * as appList from "./bundled-skills/app-builder/tools/app-list.js";
-import * as appRefresh from "./bundled-skills/app-builder/tools/app-refresh.js";
+import * as appBuilder_appRefresh from "./bundled-skills/app-builder/tools/app-refresh.js";
 import * as appUpdate from "./bundled-skills/app-builder/tools/app-update.js";
 // ── app-control ────────────────────────────────────────────────────────────────
 import * as appControlClick from "./bundled-skills/app-control/tools/app-control-click.js";
@@ -88,6 +88,8 @@ import * as messagingRead from "./bundled-skills/messaging/tools/messaging-read.
 import * as messagingSearch from "./bundled-skills/messaging/tools/messaging-search.js";
 import * as messagingSend from "./bundled-skills/messaging/tools/messaging-send.js";
 import * as messagingSenderDigest from "./bundled-skills/messaging/tools/messaging-sender-digest.js";
+// ── personal-page ──────────────────────────────────────────────────────────────
+import * as personalPage_appRefresh from "./bundled-skills/personal-page/tools/app-refresh.js";
 // ── phone-calls ────────────────────────────────────────────────────────────────
 import * as callEnd from "./bundled-skills/phone-calls/tools/call-end.js";
 import * as callStart from "./bundled-skills/phone-calls/tools/call-start.js";
@@ -127,6 +129,9 @@ import * as subagentSpawn from "./bundled-skills/subagent/tools/subagent-spawn.j
 import * as subagentStatus from "./bundled-skills/subagent/tools/subagent-status.js";
 // ── transcribe ─────────────────────────────────────────────────────────────────
 import * as transcribeMedia from "./bundled-skills/transcribe/tools/transcribe-media.js";
+// ── workflows ──────────────────────────────────────────────────────────────────
+import * as manageWorkflows from "./bundled-skills/workflows/tools/manage-workflows.js";
+import * as runWorkflow from "./bundled-skills/workflows/tools/run-workflow.js";
 
 // ─── Registry ────────────────────────────────────────────────────────────────
 
@@ -143,7 +148,7 @@ export const bundledToolRegistry = new Map<string, SkillToolScript>([
   ["app-builder:tools/app-create.ts", appCreate],
   ["app-builder:tools/app-update.ts", appUpdate],
   ["app-builder:tools/app-delete.ts", appDelete],
-  ["app-builder:tools/app-refresh.ts", appRefresh],
+  ["app-builder:tools/app-refresh.ts", appBuilder_appRefresh],
   ["app-builder:tools/app-generate-icon.ts", appGenerateIcon],
   ["app-builder:tools/app-list.ts", appList],
 
@@ -223,6 +228,9 @@ export const bundledToolRegistry = new Map<string, SkillToolScript>([
   ["messaging:tools/messaging-sender-digest.ts", messagingSenderDigest],
   ["messaging:tools/messaging-archive-by-sender.ts", messagingArchiveBySender],
 
+  // personal-page
+  ["personal-page:tools/app-refresh.ts", personalPage_appRefresh],
+
   // phone-calls
   ["phone-calls:tools/call-start.ts", callStart],
   ["phone-calls:tools/call-status.ts", callStatus],
@@ -269,4 +277,8 @@ export const bundledToolRegistry = new Map<string, SkillToolScript>([
 
   // transcribe
   ["transcribe:tools/transcribe-media.ts", transcribeMedia],
+
+  // workflows
+  ["workflows:tools/run-workflow.ts", runWorkflow],
+  ["workflows:tools/manage-workflows.ts", manageWorkflows],
 ]);

package/src/config/call-site-defaults.ts

@@ -125,4 +125,9 @@ export const CALL_SITE_DEFAULTS: Record<LLMCallSite, CallSiteDefaultConfig> = {
     thinking: { enabled: false },
     disableCache: true,
   },
+  workflowLeaf: {
+    profile: "cost-optimized",
+    effort: "low",
+    thinking: { enabled: false },
+  },
 };

package/src/config/feature-flag-registry.json

@@ -14,7 +14,7 @@
       "scope": "assistant",
       "key": "memory-retrospective-fork",
       "label": "Fork-based memory retrospective",
-      "description": "Fork the source conversation through its latest message for memory retrospectives, instead of rendering the slice into a transcript and waking an empty background conversation. Lets the retrospective hit the provider prompt cache and read compaction summary + tail messages natively.",
+      "description": "Fork the source conversation through its latest message for memory retrospectives, instead of rendering the slice into a transcript and waking an empty background conversation. The retrospective reads the conversation natively, including any inherited compaction summary and tail messages. Provider prompt-cache reuse additionally requires memory.retrospective.matchConversationProfile.",
       "defaultEnabled": false
     },
     {
@@ -36,12 +36,12 @@
     },
     {
       "id": "experiment-activation-flow-2026-06-03",
-      "scope": "client",
+      "scope": "both",
       "key": "experiment-activation-flow-2026-06-03",
       "label": "Activation Flow Experiment 2026-06-03",
-      "description": "Multivariate activation-flow experiment. control = standard flow; variant-a = activation rail. Targeted via LaunchDarkly.",
+      "description": "Multivariate activation-flow experiment. control = standard flow; variant-a = activation rail; personal-page = preseeded personal-page app (read by the daemon, hence scope \"both\"). Targeted via LaunchDarkly.",
       "defaultEnabled": "control",
-      "values": ["control", "variant-a"]
+      "values": ["control", "variant-a", "personal-page"]
     },
     {
       "id": "local-docker-enabled",
@@ -410,6 +410,14 @@
       "label": "Self-intro first message",
       "description": "On the first conversation, send a natural self-introduction (e.g. \"Hi Vela, I'm alex. Nice to meet you.\") on the user's behalf and route it through real LLM inference, instead of serving the canned first greeting. Names come from the onboarding context; falls back to the canned greeting when no name is known. Exposed to clients so pre-hatch onboarding can compute the source-of-truth initial message, and to the assistant so older clients can still be gated server-side. See assistant/src/daemon/first-greeting.ts (buildSelfIntroMessage).",
       "defaultEnabled": false
+    },
+    {
+      "id": "workflows",
+      "scope": "assistant",
+      "key": "workflows",
+      "label": "Assistant Workflows",
+      "description": "Enable the sandboxed workflow orchestration engine (script-driven parallel leaf agents).",
+      "defaultEnabled": false
     }
   ]
 }

package/src/config/llm-context-resolution.ts

@@ -27,11 +27,18 @@ export function resolveEffectiveContextWindow({
   llm,
   callSite,
   overrideProfile,
+  forceOverrideProfile,
   selectionSeed,
 }: {
   llm: LLMConfig;
   callSite: LLMCallSite;
   overrideProfile?: string;
+  /**
+   * Float `overrideProfile` above the call-site layers (see
+   * `ResolveCallSiteOpts.forceOverrideProfile`). Threaded so context-window
+   * sizing reflects the same profile the dispatch path resolves.
+   */
+  forceOverrideProfile?: boolean;
   /**
    * Per-conversation mix seed (the conversation id). Threaded so context-window
    * sizing for a mix profile reflects the same arm the dispatch path picks.
@@ -40,6 +47,7 @@ export function resolveEffectiveContextWindow({
 }): EffectiveContextWindow {
   const resolved = resolveCallSiteConfig(callSite, llm, {
     overrideProfile,
+    forceOverrideProfile,
     selectionSeed,
   });
   const catalogModel = PROVIDER_CATALOG.find(

package/src/config/llm-resolver.ts

@@ -32,6 +32,19 @@ import {
  *   4. `llm.profiles[llm.activeProfile]`
  *   5. `llm.profiles[opts.overrideProfile]`
  *
+ * `opts.forceOverrideProfile` is an explicit escape hatch for non-main-agent
+ * call sites: when true (and `opts.overrideProfile` resolves to a defined
+ * profile), the override profile floats ABOVE the call-site layers — the
+ * non-main ordering becomes default → activeProfile → site profile →
+ * call-site override → overrideProfile. This mirrors how `mainAgent` treats
+ * the user's chat-model selection as authoritative, and exists for callers
+ * that must run a background call site under a specific conversation's
+ * inference profile (e.g. fork-based memory retrospectives matching the
+ * source conversation for provider prompt-cache reuse). When the referenced
+ * profile is missing, the flag is inert and the normal precedence applies
+ * (same silent fall-through as any `overrideProfile` reference); for
+ * `mainAgent` the flag is a no-op because the override already sits on top.
+ *
  * Nested objects (`thinking`, `contextWindow`, and
  * `contextWindow.overflowRecovery`) are deep-merged so partial overrides at
  * any nesting level merge into — rather than replace — the corresponding
@@ -54,6 +67,14 @@ import {
  */
 export interface ResolveCallSiteOpts {
   overrideProfile?: string;
+  /**
+   * Float `overrideProfile` above the call-site layers (named site profile +
+   * call-site override) for non-main-agent call sites. See the
+   * `resolveCallSiteConfig` docstring for the resulting precedence and the
+   * use case. Inert when `overrideProfile` is absent or references a missing
+   * profile, and a no-op for `mainAgent`.
+   */
+  forceOverrideProfile?: boolean;
   /**
    * Per-conversation seed for expanding `mix` profiles. The chosen constituent
    * is a deterministic function of `selectionSeed` + the mix profile's own
@@ -101,6 +122,15 @@ export function resolveCallSiteConfig(
     appendCallSiteLayers(layers, callSite, llm, site, opts, biasRef);
     appendProfileLayer(layers, activeFragment, biasRef);
     appendProfileLayer(layers, overrideFragment, biasRef);
+  } else if (opts.forceOverrideProfile === true && overrideFragment != null) {
+    // Escape hatch: float the override profile above the call-site layers,
+    // mirroring mainAgent's treatment of the user's chat-model selection.
+    // Guarded on a resolved fragment so a missing profile reference degrades
+    // to the normal precedence below instead of silently dropping the
+    // call-site layers' standing.
+    appendProfileLayer(layers, activeFragment, biasRef);
+    appendCallSiteLayers(layers, callSite, llm, site, opts, biasRef);
+    appendProfileLayer(layers, overrideFragment, biasRef);
   } else {
     appendProfileLayer(layers, activeFragment, biasRef);
     appendProfileLayer(layers, overrideFragment, biasRef);

package/src/config/preloaded-apps/personal-page/src/components/About.tsx

@@ -0,0 +1,22 @@
+import { profile } from "../profile-data";
+import { AnimatedParagraph, WordsPullUpMultiStyle } from "./animations";
+
+export function About() {
+  const { about } = profile;
+  return (
+    <section class="about" id="about">
+      <div class="about-card">
+        <div class="about-label">{about.label}</div>
+        <h2 class="about-heading">
+          <WordsPullUpMultiStyle
+            segments={about.heading.map((seg) => ({
+              text: seg.text,
+              className: seg.italic ? "serif-italic" : undefined,
+            }))}
+          />
+        </h2>
+        <AnimatedParagraph className="about-body" text={about.body} />
+      </div>
+    </section>
+  );
+}

package/src/config/preloaded-apps/personal-page/src/components/App.tsx

@@ -0,0 +1,16 @@
+import { profile } from "../profile-data";
+import { About } from "./About";
+import { Features } from "./Features";
+import { Hero } from "./Hero";
+import { Pending } from "./Pending";
+
+export function App() {
+  if (profile.status !== "ready") return <Pending />;
+  return (
+    <main>
+      <Hero />
+      <About />
+      <Features />
+    </main>
+  );
+}

package/src/config/preloaded-apps/personal-page/src/components/Features.tsx

@@ -0,0 +1,77 @@
+import type { ComponentChildren } from "preact";
+
+import { profile } from "../profile-data";
+import { StaggerCard, WordsPullUpMultiStyle } from "./animations";
+import { ArrowRight, Check } from "./icons";
+import { CARD_ICONS } from "./media";
+
+function CheckLine({ children }: { children: ComponentChildren }) {
+  return (
+    <li>
+      <Check className="check" />
+      <span>{children}</span>
+    </li>
+  );
+}
+
+function LearnMore() {
+  return (
+    <a class="learn-more">
+      Learn more
+      <ArrowRight size={14} />
+    </a>
+  );
+}
+
+export function Features() {
+  const { features } = profile;
+  return (
+    <section class="features">
+      <div class="features-inner">
+        <div class="features-header">
+          <div>
+            <WordsPullUpMultiStyle
+              segments={[{ text: features.headingLine1, className: "line1" }]}
+            />
+          </div>
+          <div style={{ marginTop: "0.3em" }}>
+            <WordsPullUpMultiStyle
+              segments={[{ text: features.headingLine2, className: "line2" }]}
+              delayBase={0.2}
+            />
+          </div>
+        </div>
+
+        <div class="feature-grid">
+          <StaggerCard index={0} className="feature-card visual">
+            <div class="card-backdrop" />
+            <div class="vlabel">{features.statusLabel}</div>
+          </StaggerCard>
+
+          {features.cards.slice(0, 3).map((card, i) => (
+            <StaggerCard
+              index={i + 1}
+              className="feature-card"
+              id={`feature-${i}`}
+              key={card.title}
+            >
+              <img
+                class="feature-icon"
+                src={CARD_ICONS[i % CARD_ICONS.length]}
+                alt=""
+              />
+              <div class="feature-num">{`0${i + 1}`}</div>
+              <div class="feature-title">{card.title}</div>
+              <ul class="feature-list">
+                {card.bullets.map((b) => (
+                  <CheckLine key={b}>{b}</CheckLine>
+                ))}
+              </ul>
+              <LearnMore />
+            </StaggerCard>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}