# Agent at work hero > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The top of a site for Ledgerline, an invented agent that reconciles a company's bank feed against its open invoices. The headline names the job ("Matches every bank line to its invoice. Then shows you why.") and the right half shows the agent doing it, in a panel plainly tagged "Example run": the task as a person wrote it, a five-step plan that ticks off, a log of tool calls and their results, a drafted journal entry as a diff, and a status line that ends on "Waiting for approval … no writes yet". It is honest about what an agent does: the copy and the run both say nothing is posted until a person approves. The detail worth copying is that the first frame is already mid-run, so the panel reads as work in progress rather than an empty terminal. ## Reference behaviour 1. Initial state: step 1 ("Pull 1,284 lines from the bank feed") is done, step 2 ("Match against 412 open invoices") is spinning, steps 3–5 are idle. The log already shows ten lines (bank fetch, open invoices, match rules, two matches, each with its result) and the status reads "Step 2 of 5 · 1,031 of 1,284 matched" with the bar at 52%. 2. The run continues on its own clock: 1.8s after load a card spend with no invoice is flagged (status 1,236, 68%), then step 3 starts (flag six lines), then step 4 (draft journal JE-1031 shown as a green `+ Dr` line and a red `- Cr` line), each 1.1–1.3s apart. The status text and bar update with each event; the bar width eases over 600ms. 3. Final state, about 5.4s after load: steps 1–4 done (green filled circle with a check), step 5 ("Wait for approval, then post") shows a dashed amber ring, the status dot turns amber and stops pulsing, and the status reads "Waiting for approval · 4 entries · 6 flags · 3m 12s · no writes yet". The run then holds; it never loops by itself. 4. New log lines fade and rise 6px over 280ms (expo out) and push older lines up; the log keeps at most 26 lines. 5. "Replay" in the panel header clears the plan and log and plays every event from the start at 120ms per instant event plus each event's delay (full run about 8s). 6. Hover the primary buttons: brightness 1.08; ghost buttons: ring goes from `#5D6A78` to `--ink`. 7. Reduced motion: the final state is rendered at once, no spinner, no pulse, no line animation. Replay redraws the final state. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ ≡ Ledgerline How it works Controls Integrations Pricing [Book a walkthrough] │ nav 64 ├─────────────────────────────────────┬────────────────────────────────┤ │ Reconciliation agent for finance… │ [Example run] Harbor & Pine… [↻ Replay] │ 12/16 │ ├────────────────────────────────┤ │ Matches every │ task sentence 14px │ │ bank line to its 60/1.02 │ started 06:02 by Priya Anand… │ │ invoice. Then shows ├──────────┬─────────────────────┤ │ you why. (second sentence ink-2) │ ✓ Pull… │ > bank.fetch(…) │ │ lede 17/1.6, max 470 │ ◌ Match… │ 1,284 lines · … │ │ [Run it on last month →] [Read the…] │ ○ Flag… │ > match(line=841…) │ │ ───────────────────────── │ ○ Draft… │ INV-2291 … │ │ 96.1% 4 h │ ○ Wait… │ + Dr 6810 … - Cr … │ │ ├──────────┴─────────────────────┤ │ │ • Step 2 of 5 · 1,236 … ▬▬▬▬░ │ status └─────────────────────────────────────┴────────────────────────────────┘ grid: 1fr | 620px, gap 56, padding 40 48; panel max-height 640, plan column 236px ``` - `