feat(web): the homepage shows B4's guardrails and route shapes

[blove]

PR 2 of 3 from docs/superpowers/specs/2026-09-25-homepage-files-tour-design.md. It adds two sections between the folder tour (#845) and the closing call to action. The plan is docs/superpowers/plans/2026-09-25-homepage-files-tour-pr2.md.

Guardrails (#guardrails): "Four checks decide what a call can do."

You pick one of five calls a support agent might make. The page then shows what each of B4's four checks (tool scope, permission, sandbox, delegation) does with it, under one real app config.

• readFile passes every check and runs inside the sandbox.
• refund pauses for approval. Allow once runs it and saves nothing, so the next refund asks again. Deny returns [B4_E3001] Permission denied by user: tool refund to the model.
• runBash("curl … | sh") has no allow rule, so it pauses. Allow once runs it in the Docker sandbox with no network, because the config sets network: { mode: "deny" }. Deny stops it.
• deleteUser is withheld by tool scope, so the model never sees it.
• task to the translator subagent is stopped by a delegation rule, with the real [B4_E3002] message.

Every result on the page is produced by B4's own code in the tests:

• resolveToolScope decides tool scope.
• For approvals, the permissions store and wrapToolWithApproval run inside a real LangGraph graph that pauses and resumes.
• The sandbox builds its own docker run arguments, and the tests record them with a fake Docker client.
• resolveGuardedSubagent decides delegation.

A mutation check backs this up. Adding a curl allow rule makes the pause, allow-once and deny tests fail, even with the pinned config text taken out.

Route shapes (#route-shapes): "Pick the shape per route."

The scaffold's hello route is written four ways: agent, workflow, a LangGraph graph and a LangChain chain. B4's discoverRoutes classifies each fixture, and the graph, chain and workflow versions each run and greet "Ada".

Spec corrections (details in the plan)

• The four-call spec never reached the delegation check. A fifth call, task, was added, as Brian decided.
• runBash asks for approval instead of being allow-listed. Brian decided this so the page doesn't read as advice to allow-list curl.
• Config placement:
  • sandbox belongs in b4.config.ts, not in the route.
  • A deny delegation rule hides the subagent from the model entirely, so the fixture uses a constrain rule instead.
• The default-network sentence was false. The spec said the sandbox's default blocks 169.254.169.254, but the Docker provider doesn't enforce that denylist. The copy now says only what's tested. The same claim in sandbox.mdx is flagged as a separate follow-up.
• The spec called for "a radio group with aria-pressed", which mixes two ARIA patterns. Both switchers use native radios in a <fieldset> instead.

UI/UX (ui-ux-pro-max)

• Clicks set the final state at once. The board, aria attributes and announcement all update on the click; GSAP only animates, and the next action stops it. There's one announcement per action.
• Nothing shifts. Every variant stays in one grid cell; the hidden ones are inert.
• Accessible basics:
  • targets are 44px
  • gate states are text plus a glyph, not colour alone
  • highlighted code keeps at least 4.5:1 contrast (tested)
  • reduced motion runs no animation
• Focus stays in the tracer when a click hides the focused control. The WebKit run caught a case the Chromium-only checks missed: WebKit moves focus on mousedown.

New devDependencies (apps/web)

@b4run/cli, @b4run/permissions, @b4run/sandbox, @langchain/core@1.2.12, @langchain/langgraph@1.4.17. They add 15 lines to the lockfile and no new packages.

Verification

• Gates: pnpm --dir apps/web test passes (60 files: 920 passed, 1 skipped). lint, typecheck, node scripts/check-docs.mjs and pnpm check:build-cache all pass.
• Playwright + axe at 375, 768, 1024 and 1440px, with motion on and reduced (all 8 runs):
  • no horizontal scroll, smallest target 44px, and 0px layout shift across every call, answer and shape
  • the keyboard alone works through both answers on refund and runBash
  • rapid clicks show the right final state, with exactly one announcement per action
  • axe reports 0 violations
• The WebKit focus scenarios pass.
• lastmod: only the / entry changes.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
b4-run	Ready	Preview	Sep 25, 2026 9:30pm UTC

[github-actions]

Automated approval: this PR received an intelligent (AI) code review. See the review comments on this PR.