# AI UI Sandbox

*Bite-sized experiments in agent UX.*

**Year:** 2026
**Role:** Designer, developer (solo)
**Client:** Self
**Tags:** prototype-playground, personal-projects, ai
**Case study:** /work/ui-sandbox
**Part of:** the [prototype playground](/playground)

Bite-sized interaction experiments in agent-native UX from my prototype
pipeline — thinking states, commit affordances, verification and
provenance surfaces. Each sketch is the prototype itself, embedded live.

## Streaming text

Generated text restyling as it arrives.

![Weight by distance — streaming text](/sandbox-posters/015-streaming-text/27-weight-distance-light-dev.png)

## Memory staleness

A memory showing its age.

![A memory showing its age](/sandbox-posters/003-memory-staleness/73-edge-wear-digital.png)

## Context window meter

An ambient sidebar readout of how full the current conversation's context
window is — so the diminishing-returns zone is visible before you hit it.
Could roll in token cost too, or stay purely about context budget.

![Context window meter — sidebar loader](/sandbox-posters/026-session-intensity-loaders/13-context-pills-realistic.png)

## Agent thinking

How an agent looks while it works — planning, retrieving, deliberating,
hesitating.

![Planning — agent thinking](/sandbox-posters/006-agent-thinking/5-planning-gantt-timeline.png)
![Hesitating — agent thinking](/sandbox-posters/006-agent-thinking/24-hesitating-step-rhythm.png)
![Retrieving — agent thinking](/sandbox-posters/006-agent-thinking/33-retrieving-command-palette.png)
![Planning, inline — agent thinking](/sandbox-posters/006-agent-thinking/37-planning-gantt-in-app-inline.png)
![Thinking in a live IDE tree](/sandbox-posters/007-thinking-in-situ/18-tree-mid-commit-ide.png)

Also included in this section: a *deliberating — decision card* tile (live
embed only).

## Verification surfaces

Quick ways to confirm what an agent did without redoing the work yourself.

![Inline plan annotation](/sandbox-posters/013-verification-surfaces/13-plan-step-inline-annotation.png)
![Charge-approval gate](/sandbox-posters/013-verification-surfaces/25-dollar-action-charge-approval.png)

## Provenance pills

Where a claim came from, attached to the phrase.

![Citation expands in place](/sandbox-posters/016-provenance-pills/2-sup-expand.png)
![Citation as a card](/sandbox-posters/016-provenance-pills/3-sup-card.png)
![Citation pinned to the side](/sandbox-posters/016-provenance-pills/26-sup-persistent-side.png)

## Reversibility

Hold-to-confirm gestures keyed to how reversible the action is.

![Hold to confirm — fill](/sandbox-posters/011-reversibility-affordances/27-confirm-dialog-fill.png)
![Hold to confirm — ring](/sandbox-posters/011-reversibility-affordances/28-confirm-dialog-ring.png)
![Hold to confirm — perimeter](/sandbox-posters/011-reversibility-affordances/31-confirm-dialog-perimeter.png)
![Hold to confirm — weighted fade](/sandbox-posters/011-reversibility-affordances/36-confirm-dialog-weighted-fade.png)

## Predictive ghosting

Drag-and-drop reordering usually feels mushy. A ghosted landing slot makes
the drop read as deliberate — useful any time precise reordering matters,
such as in a human-in-the-loop moment.

![Reorder an agent's plan before it runs](/sandbox-posters/019-predictive-ghosting/26-card-slot-ghost-neutral.png)

New sketches posted here regularly.

---

[Overview](/llms.txt) · [All work](/) · [About](/about)