Interfaces for AI tools, with the thinking shown.

I’m Jun Liu, a design engineer in Hong Kong. I design and build the tools people use to watch, debug and trust AI agents, like the run below, and the components underneath them. Everything works with a keyboard and a screen reader.

Support triage run_00032

Passed in 3.03 s

  1. Support triage, Agent, starts at 0 ms, takes 3.03 s
  2. plan, Model call, starts at 34 ms, takes 590 ms
  3. search_docs, Retrieval, starts at 632 ms, takes 220 ms
  4. classify_ticket, Tool call, starts at 864 ms, takes 1.17 s
  5. classify_ticket.llm, Model call, starts at 893 ms, takes 1.13 s
  6. search_kb, Tool call, starts at 892 ms, takes 1.06 s
  7. respond, Model call, starts at 1.98 s, takes 1.04 s
  • Model call
  • Tool call
  • Retrieval

One of 5,000 sample runs. Open it in the run explorer

Case studies

What I chose, what I turned down, and what each decision cost.

  1. Run explorer

    Finding the one bad run in five thousand

    Designing a tool for inspecting AI agent runs: aligning steps with their timing, failure that survives colour blindness, and a list that keeps under 30 rows in the page for 5,000 runs.

  2. Returns assistant

    Designing for an agent you can’t fully predict

    Steps that appear live then fold away, a person approves the money, failure you can act on, and one screen-reader announcement per reply instead of 25.

  3. Design system

    Tokens as data, components with no surprises

    Semantic tokens enforced by a test, a theme that never flashes, and a loading button that keeps its name for screen readers.

Components

The pieces the tools are built from. All of them are live: try them with the keyboard. See the tokens

Button

Four variants. While loading it keeps its width, so nothing around it shifts.

  • Spring press feedback
  • aria-busy while loading
  • Visible focus ring

Showing the week view

Segmented control

A radio group whose selection glides between options.

  • Arrow keys, Home and End
  • Roving tabindex
  • Shared-layout animation
A summary every Monday.
Managed by your organisation.

Switch

Works controlled or uncontrolled. Clicking the label toggles it too.

  • role="switch"
  • Description wired to aria-describedby
  • Spring thumb