issue 001  //  09.08.2026  //  16:04 theme  //  snd: off
menu
homepage / 002 ux + product / managerbot · supplier ordering03 / 07

managerbot · supplier ordering

the trust layer for an ai that orders from food suppliers: review, sign-in, a watchable browser, and the commands underneath.

managerbot askswhich login should i use?harbor supply · sharedmy us foods loginuse another
→
the rulethe agent preps,
the seller decides
credentials, matches, checkout
seller in controlan ai that orders from suppliers without ever holding the keys
the consent primitive · illustrative
what it is

managerbot is square's ai assistant for sellers; its procurement arm turns a messy supply list into a supplier cart. my thread through it was every moment where the automation hands control back to the seller: reviewing what it read, signing in to a supplier, watching it work, approving the order.

what i did

designed the flows, prototyped them in eight documented passes, then built them for production: the review and sign-in ui in react, the secure-browser polish in the seller dashboard, and the us foods command layer in go.

what happened

the sign-in components, browser polish and us foods commands are merged; the feature was in staging end-to-end testing when i left, with a written handoff of every open issue.

speci
roledesign + front-end + back-endcompanyblock, inc. (square)whenaugust – october 2026whatthe seller-facing trust layer for agentic procurementsurfacesreview cards · supplier sign-in · secure vendor browser · us foods commandsstackreact/typescript + storybook · go · single-file html prototypesstatusmerged; launch was in staging test at handoff
the problem01

a restaurant seller hands the agent a 22-line list — a whiteboard photo, a text message — and the agent turns it into a supplier cart. that only works if the seller trusts it. trust breaks at specific moments: did it read my list right? where is my password going? what is it doing inside my supplier account right now? did it order what i meant?

my work was those moments. the vendor plumbing and the agent itself belonged to others; the boundary where a seller sees, corrects and approves belonged to me.

the rule·

automation prepares, the seller decides. the agent can read, match and fill a cart; anything that spends money or uses a credential surfaces for a human first.

the review card02

it started in august with a live alpha: a real seller ran the first production order and it worked, but he spent two minutes hunting for his supplier password, and the team wanted a surface where sellers check what the agent read before anything touches the cart. i wrote a short brief claiming that review layer as my lane, then prototyped it as a storybook card in the production repo: every line from the seller's list beside its matched product, a confidence state (confirmed, needs review, no match), editable quantities, include or remove — approval before any mutation.

order of operations·
  • compare what the agent read against what the seller wrote
  • explain the caveats: uncertain matches, missing products
  • then ask for approval. never mutate first.
supplier sign-in03

the password hunt became the next lane. suppliers authenticate differently — some use passwords, us foods emails a one-time code to a contact on file — and the capture ui had to hold a hard boundary: square's chat and the agent's model never see a secret.

i prototyped the whole flow as a single html file and iterated it in eight documented passes, each driven by real feedback. a whiteboarding session with product and engineering set the scoping rules: credentials belong to the merchant and the person, sharing defaults on with a per-login toggle. i signed into the real us foods portal and corrected my own prototype against it — the identifier is a user id, not an email, and offering a passkey makes no sense for a vendor that mails you a fresh code every time. a security pass rewrote code delivery so the seller picks a masked destination, (***) ***-4416, and square stores the pick, never the contact.

an earlier pass · the password capture card, before the live draft
earlier pass · picking a masked destination for the verification code
earlier pass · the first version of the secure logins settings
sign-in capture · a native form the seller's password manager can fill; supplier and website rows locked
passwordless variant · us foods emails a code, so no password ever exists
shared login · signed in with no approval needed, the supplier site open in the secure browser
saved code sign-in · the code is used once at the supplier, never kept
password rejected · the agent stops instead of retrying, so the account never locks
more verification needed · the seller finishes in the supplier browser, the draft order waits
secure logins · one settings surface for every supplier login
the same screen with its design notes on · every state documented for engineering
credential boundaries, by design04
mask-only, overwrite-onlya stored password is never displayed and has no reveal toggle. the field shows bullets; typing stages a replacement; leaving it empty restores the mask.
opposite autofill posturesthe capture form is a native login form so the seller's own password manager can fill it. the settings form repels autofill on purpose, so a browser never saves a supplier secret as if it were a square login.
locked destination rowsthe supplier and website rows in the capture card cannot be edited. the seller sees exactly where the login goes, and nothing can redirect it.
consent separate from captureteam sharing moved out of the sign-in card into a follow-up question after sign-in succeeded. one decision per card.
elicitation cards·

managerbot's consent primitive is a pinned question card in the chat with choice chips. i reused the production component for every sign-in ask — which saved login to use, whether to share it — and split multi-part questions one per card with step counts. i also documented its failure mode at scale: a long run of answered cards can push the live question off screen. that went into the handoff as a priority fix.

the secure vendor browser05

when the agent works inside a supplier's site, the seller watches it in a side pane: a remote browser running in the cloud, streamed into the dashboard, so supplier cookies and credentials never touch the seller's machine. the direction from the feature's owner: it should feel like an embedded page, not a browser. i ran three rounds of mockups pixel-matched against staging — down to measuring the remote browser's 49px toolbar and finding the viewport math drawing the page 9% too small — kept the team aligned on a figjam board that became the working status artifact, and shipped the polish as a train of small, single-change prs.

shipped in that pass·
  • a joined header with a loading shimmer, so the remote browser's spinner stays the only spinner
  • a visible, contrast-checked resize grip that keeps the rail's accessible name
  • hide and show for the pane, and the supplier page at actual size
  • the handoff card reworded: "complete" became "continue" — the seller is handing control back, not finishing — with cancel made visually distinct
  • a cover over the page once sign-in finishes, so credentials are never left on screen
the vendor browser pane, shown
and hidden. the seller chooses.
a supplier page at actual size in the pane
us foods, in go06

in october i went below the ui: the command layer the agent uses to drive a us foods account. i reverse-engineered the portal from recorded api traffic and the site's own javascript into a written command-surface spec, then built it — session status and sign-out, customer-location switching, product search, order guides, order create, edit and clear, delivery dates, and the browser handoff.

the vendor's quirks became the spec. us foods saves whatever totals you send and never recomputes them, and its own site underprices changed items, so my commands compute the review-page sum instead of trusting the site's. the server accepts delivery dates it will never honor, so the commands implement the date picker's rules themselves. a session reports ready only after waiting out the site's own token renewal.

built around the vendor·
  • designed from how us foods actually works, never templated from the other vendors
  • a case count and an each count on the same line item — unique to this vendor
  • every change is one whole-order put, so the commands always send the whole order
  • seven stacked prs, reviewed and merged, with synthetic fixtures only
  • shared helpers kept opt-in rather than global, after making them global pushed an unrelated vendor past a test budget
the input · a 22-line whiteboard photo
the output · the full staging run, whiteboard to filled cart
the real thing · a staging run in the production dashboard, the agent working the order in chat
end to end, honestly07

the last week was testing the whole chain on staging: photo in, cart out. the runs surfaced real issues and the handoff names each one with evidence — the vendor's bot-blocking fired on the hosted browser while my laptop session worked, so the fix is an allowlist, not our code; the agent once saved an order without the cart-review step, the first thing i would fix; a stack of answered question cards buried the live one. i left a written handoff with the open prs, the test log, and a priority on every issue.

what i'd do differently·

push the review card into the production chat flow earlier instead of polishing it in storybook. the staging runs proved the approval moment is the product, and it was the piece still missing at the end.

a note on what you're seeingnda

this work was done at block, inc. (square). the case study covers process and design thinking only; metrics, screenshots and proprietary details are omitted per nda. more available on request, under the right agreement.

← homepage  //  002 ux + product © 2026 naeema :)