Project Type
Personal
Timeline
2026
Team
Solo, design and build
Tools
React + TypeScript
Claude Code
What I did
- Designed and built the whole prototype solo in real code, five workspace views on one agent loop, with a mocked backend so the behavior itself is the design.
- Made the loop watchable. The plan, each tool call, its evidence, and its confidence stream in as work products, not as a spinner.
- Designed the approval gate the product is named for. The agent suspends at the consequential call and cannot sign off on its own.
- Built Graphite and Teal, the token-driven design system, so light and dark are one attribute apart.
Problem
Credit moves at the speed of trust, not analysis
Banks are fast when a file is simple, and slow when it needs judgment
FDIC Small Business Lending Survey, 2024. Wolters Kluwer Banking Compliance AI Trend Report, 2026.
The gap between one day and ten is the analysis. Someone has to pull the figures out of a deal document, spread them, test each covenant, rate the risk, and write the memo that defends the call. Most of that work is mechanical. None of the accountability is, because at the end a person signs, and the signature is what a regulator, a committee, or a court will ask about. That is why the obvious fix, letting a model write the memo, stalls in exactly this industry: the institutions most interested in AI are also the ones that rank explainability as their top regulatory worry. An answer nobody can inspect is not an answer anyone can sign.
Insight
The signature is the product
On a clean deal, the agent's own recommendation is approve. The loop still stops. Every run, whatever the numbers say, parks at the same gate and waits for a person. That is the name: a countersignature is the second signature that makes a document binding, and the agent's memo is only ever the first. So the design goal was never to automate the decision. It was to make the agent's work so inspectable that a human can put their name under it without redoing it.
breaches === 0 ? 'approve' : riskScore >= 75 ? 'decline' : 'escalate'
The entire decision rule, verbatim from the repo. One line, and no branch ends the run.
Why this is hard
A right answer is not enough
A provenance problem
In regulated finance, a mostly-right answer with no working is a liability. Every extracted figure has to point back to the page it came from, and every step has to leave a trail an auditor can replay.
An uncertainty problem
Extraction is never uniformly confident, and the edge cases are where the risk lives. Confidence has to ride on every figure, and a critical flag has to change the agent's behavior, not just its color.
A gate problem
If approval is a dialog bolted on at the end, people click through it. The pause has to be structural. The loop itself stops, and the product cannot proceed until a person acts.
Solution
An agent loop you can watch, ending in a signature
Countersign runs one visible loop over a deal document: plan, act, observe, decide, and then stop. Every tool call shows its arguments going in and its data coming out. Results render as work products rather than raw output, so reading the run feels like reviewing an analyst's file, not tailing a log. The gate is not a confirmation dialog. The loop suspends itself at the consequential call, and nothing proceeds until a person acts.
| Stage | Why the stage exists |
|---|---|
| 1. Plan | The agent announces its steps before touching a number, so you know what it intends, not just what it did. |
| 2. Act | Each tool call runs in the open, arguments in, data out, with a live timer. Nothing happens off screen. |
| 3. Observe | Results come back as artifacts, metric cards with per-figure confidence, a risk gauge, a covenant pass and fail table. |
| 4. Decide | Flags derive from the evidence. A covenant breach cannot be auto-approved, so it flips the recommendation to escalate. |
| 5. Countersign | The loop parks at the gate. Approve or reject belongs to a human, and either way it lands in the audit trail. |
Process
Behavior cannot be mocked, so I built it
An agent's feel lives in its pacing: how reasoning streams, when a flag interrupts, what it is like to be asked for a decision mid-flow. None of that survives a static mockup, so I designed this by building it, solo, in Claude Code. The backend is deliberately mocked and deterministic. Every number is fictional, the extraction is simulated and labeled as such in the UI, and the same run replays identically, which turned every design question into something I could test by watching rather than argue by intuition.
Final Design
The gate the product is named for
The agent runs its plan in the open, extracting financials with a citation back to the page they came from, then scoring risk and testing covenants. A covenant breach cannot be auto-approved, so its own decision is to escalate. It assembles the memo, states its recommendation, and parks. The button says exactly what the human is doing: countersign.
What would change this decision?
The agent's call on the filed figures is fixed. The stress panel lets an analyst drag EBITDA, debt, rate, or liquidity and watch covenants, risk, and the recommendation recompute through the same decision rule the agent uses, so the what-if can never contradict the agent.
The always-on half
Approval is a moment, but credit risk is a subscription. A monitoring agent sweeps the book, re-tests every covenant against drifting figures, and raises escalations when a deal breaches or headroom runs thin. Each one waits for a person to acknowledge it.
Every step, on the record
Every event in the run, tool arguments, results, flags, and the human's decision, lands in a timestamped audit trail that exports as JSON. In this domain the trail is not a debug view. It is the compliance artifact a fund would archive.
A working prototype, not a mockup
The loop, the gate, the stress panel, and the monitor all run in the browser with no backend and no API keys. Press run and watch it work.
Design System
Graphite and Teal, one attribute from light to dark
Graphite and Teal is Countersign's own token system: one deep teal accent, graphite-navy ink on cool neutral surfaces, hairline borders, and soft elevation instead of hard shadows. The status colors are the domain itself. Pass, warn, and breach live as first-class tokens, so a covenant table reads at a glance before you read a word.
The same screens, one attribute apart
Because every color resolves through a variable, the entire theme swaps on one data attribute with zero component changes.
Reflection
Designing an agent is designing when it stops
Most agent design effort goes into making the thing act. What earned trust here was the opposite work: where it pauses, what it refuses to decide, and how completely it shows its work while getting there. The gate, the flags, and the audit trail are the product. The analysis is just what they are wrapped around. And the only way to design any of that was to build it, because an agent's judgment calls live in its timing, and timing does not exist on an artboard.