Files
sanderling/examples/folio-web
pj b6dabaeeca fix(folio-web): enumerate authored targets and values, declare the llm generator
The two edge-case typing leaves become the typing builtin at their combined
weight: that text is deliberately not domain-specific, so naming the field and
leaving the text to the policy is the designed path, and it keeps the seeded
arm on the corpus while the model writes its own.

Total weight is unchanged at 165, so every surviving branch keeps its share and
submitTxn stays at 9.70 percent.

Claude-Session: https://claude.ai/code/session_01A5KmftdEJ49A9z5mF5ESrX
2026-08-13 21:45:05 +05:30
..

Folio (web)

A React + Vite port of the folio personal-ledger app: login with demo credentials, create accounts, add credits and debits. Exists as the minimal web example sanderling runs its property-based specs against.

Stack

  • React 19 + Vite + TypeScript
  • Stable HTML id attributes on every interactive element so the spec targets DOM nodes by id, not by aria-label parsing
  • data-* attributes (data-cents, data-account-id, data-txn-count) carry structured numeric state for property assertions

Prerequisites

  • just
  • bun (installs the JS toolchain; the project uses bun.lock, not package-lock.json or pnpm-lock.yaml)
  • Chrome installed (sanderling drives it via CDP)
bun install

Demo credentials

email:    [email protected]
password: ledger123

Run a sanderling test

just test

The justfile boots the Vite dev server on port 5173, waits for the port to respond, then runs sanderling test --platform web --bundle-id http://localhost:5173 against it. Override the port with PORT=4000 just test; DURATION, SEED, and OUTPUT work the same way as in the KMP folio example.

Traces land in ./sanderling/runs/<timestamp>/.

How it connects to sanderling

  • The spec at sanderling/spec.ts finds elements by HTML id (#email, #add-account, #ledger, #txn-amount, ...). Anything the spec touches has a stable id in the markup.
  • Numeric state the spec asserts on is exposed via data-cents and similar attributes. The spec reads el.attrs["data-cents"] rather than parsing currency strings out of aria-label.
  • Account cards expose data-account-id + data-balance so the spec can correlate cards across steps without depending on DOM order.
  • just test invokes sanderling test --platform web, which connects to Chrome via the Chrome DevTools Protocol; no extension or app SDK is involved.