A quota screen shows 100 credits available. Its API says zero. A coding agent can spot the one-line fix quickly, but it can also make the symptom disappear by changing the setup. If the role changes or the fixture returns a positive quota, the next screenshot tells you little about the original bug.

This exercise gives the agent a small, explicit contract: keep the failing inputs constant, change the code, and verify both the decision and the visible control.

Run a pinned version of the exercise

You need Git and Node.js 22 or newer. Start in a directory where you can create a fresh clone. No npm install is needed: the app uses Node built-ins.

git clone https://github.com/StatePort-Dev/stateport-agent-skills.git
cd stateport-agent-skills
git checkout cbb2b5b03017048a544bb4aa3c144fea77837c8d
cd examples/repro-lab
npm start

Open http://127.0.0.1:4173 and keep the server running. It listens only on loopback. If that port is occupied, choose another port in server.mjs and use the same origin throughout. Stop the server with Ctrl+C.

Choose Reviewer, then Exhausted quota, and enter 10 credits. The API response is:

{ "remaining": 0, "defaultLimit": 100 }

The buggy UI displays 100 available and enables Simulate allocation. Expected behavior is 0 available, Not enough credits, and a disabled button. Allocation is simulated; it changes no server data. The role is a UI fixture, not real authentication.

Keep the reproduction constant

In another terminal, from examples/repro-lab, run npm test. The supplied regression intentionally fails because 100 does not equal 0. It imports the same decision function used by the page:

const result = decision('reviewer', 10, {
  remaining: 0,
  defaultLimit: 100
});
assert.equal(result.available, 0);
assert.equal(result.allowed, false);

The default Member role already blocks allocation, so starting from that role can hide the defect. Keep Reviewer, exhausted quota and 10 credits in both the before and after checks.

These controls persist in localStorage under three repro-lab keys. Reloading the same origin can preserve them; a fresh browser profile starts with defaults. Reset this demo clears only those keys. A URL alone does not describe this reproduction.

Fix the meaning of zero

In public/decision.mjs, the faulty expression is:

const available = quota.remaining || quota.defaultLimit;

Logical OR treats zero as falsy and selects 100. This exercise defines null as missing, while zero is a valid exhausted quota. Use nullish coalescing:

const available = quota.remaining ?? quota.defaultLimit;

Run npm test again. Then reload the same page and verify the displayed value, decision text and disabled button. A passing function test does not prove the browser loaded the changed module or applied the result to the control.

Keep Reviewer and 10 credits, then check Normal quota and Missing quota: both should allow allocation with 100 available. Switch to Member and confirm allocation is blocked. The null fallback belongs to this fixture’s contract; a real service still needs validation rules for unexpected types, negative values and malformed responses.

Use this agent handoff

Give your coding agent the following task in the cloned repository:

Reproduce Reviewer / Exhausted quota / 10 credits at
http://127.0.0.1:4173. Keep those inputs and the API response
remaining=0, defaultLimit=100 unchanged. Run the supplied
regression before editing. Fix the decision function, rerun
the regression, and inspect the browser again. Report the
before/after available value, decision text and button state.
Check Normal and Missing quota too. If browser access fails,
report that limitation rather than claiming a browser pass.

That last sentence matters. The lab’s Node regression and HTTP responses have been checked. Browser rendering and this example’s complete StatePort capture, reopen and comparison cycle have not been verified for this article. There is no prepared State Card to download.

Try a saved reproduction

For repeated handoffs, the optional StatePort walkthrough describes capturing this synthetic setup, saving the exact Card identity and revision, then reopening that same Card against changed local frontend code. Keep supporting API responses fixed; replaying them cannot verify a backend change. Retain baseline and candidate evidence.

Capture is free. Reopening against current code and the agent workflow require Developer access, with a 14-day trial. This exercise makes no claim about time or token savings. If the saved-state workflow is relevant to your work, try the linked walkthrough and report the step where it helped or failed, using only synthetic evidence.

Run the Reproduction Lab

Optional StatePort walkthrough

StatePort product and trial details

Adapted from the original technical walkthrough