AI agent in new age banking

I Built a Visual Pipeline Stepper for an AI Agent and It Changed How Users Understand What the Agent Is Doing
The hardest problem in AI product design isn't making the agent smart. It's making the agent legible.
When a user uploads an invoice to Finley and clicks "Run," something interesting happens in the backend: the invoice gets extracted by an LLM, vendor memory gets queried from Hindsight, contextual analysis runs, and a deterministic decision engine produces a verdict. That's four distinct operations with meaningfully different purposes.
Without UI, it looks like: spinner → result. The user has no idea what just happened or why they should trust the output.
The pipeline stepper
I built a visual stepper component that advances in real time as the backend processes the invoice:
Invoice input → LLM extraction → Memory retrieval → Analysis → Decision → Feedback & learning
Each stage lights up as it completes. The user watches the agent think. By the time the result panel appears, they've already seen that 9 memory entries were retrieved for this vendor. They're primed to understand why the verdict is "flag."
This sounds simple. It had a subtle implementation challenge: the backend is a single API call. The stages animate on a timer, not on actual backend events. I staggered them with controlled delays:
javascriptawait stageDelay("memory", 300);
await stageDelay("analyze", 600);
await stageDelay("decision", 900);
Is this technically accurate to the millisecond? No. Does it make the system feel transparent and understandable? Completely.
The result panel problem
The first version of the result panel was a wall of JSON. Extracted fields, analysis flags, decision verdict — all dumped in a monospace block. It was technically correct and completely unusable.
The redesign separated it into three clear zones: extracted invoice data (what did the agent read?), analysis (what did the agent check?), and decision (what should you do?). Each flag shows whether it was memory-backed — meaning the agent didn't just pattern-match on this invoice in isolation, it recalled historical vendor behaviour to make that call.
That "memory-backed" indicator is the most important UI element in the whole application. It's the difference between "the agent thinks this might be a duplicate" and "the agent knows this vendor submitted a duplicate in January and again in March."
The feedback loop
After the result, the user sees three action buttons: Approve, Override & Approve, Reject. Whatever they click, plus any correction note they add, gets written back to Hindsight agent memory as a new entry for that vendor.
The copy on that panel was important to get right. It says: "What you do here teaches the agent for the next invoice from this vendor." That's not just UI copy. It's the entire value proposition of the system, stated in one sentence. Users who understand that feedback loop use it differently — more carefully, more specifically — than users who think they're just clicking a button to close a modal.
What I learned building this
Loading states are product, not polish. The pipeline stepper made Finley feel like a system that reasons rather than a black box that guesses. That perception matters enormously for user trust in AI-powered tools.
Every UI element should teach the user something. The "memory-backed" badge, the memory recall count, the vendor sidebar — each one reinforces the idea that this agent learns. That's the story the UI has to tell.
Feedback copy is product design. "Submit" is a dead button. "Submit feedback & update memory" tells the user what they're doing and why it matters.
CSS Modules kept things sane. With six components each having their own style file, there were zero naming collisions across the entire frontend. That's the kind of boring good decision that saves hours of debugging.