PixelDosa UI

Beta

Changelog

PixelDosa UI ships in small drops. During the beta, APIs can still change, and when one does it's listed here first, marked Breaking.

  1. Latest

    A select that matches the system

    Select is a new foundation component: a choice from a short list whose open list is drawn in the system's own surface, in both themes, instead of the platform's menu. It keeps what the native select gave (keyboard, typeahead, screen reader support and form submission) and replaces the native selects in Intent Preview and Prompt Composer.

    New1

    • SelectA choice from a short, known list, with the open list drawn in the system's own surface. A form field, or a compact pill for toolbars.

    Improved2

    • Intent PreviewCorrections open a Select list in the system's own surface instead of the platform's menu.
    • Prompt ComposerControl pills are Select pills: the list matches the system, and each pill still sizes to its current choice.

  2. The screen you come back to

    Agent Console assembles the agent-ops components into a home screen for background agents, and leads with the part everyone treats as an afterthought: the return. What changed since you were last here, in words, and the one thing worth doing first — then every run grouped by what it needs, the selected one opened out, and what runs on its own.

    New1

    • Agent ConsoleThe screen you come back to — what changed while you were away, then every run grouped by what it needs.

    Improved1

    • Run InboxTakes selectedId and marks the open row with aria-current, so a list beside a detail pane shows which run you're reading.

  3. A workspace, not a prompt box with a feed under it

    Image Studio assembles the generation components into a whole screen: settings that sit beside the work and survive the prompt, results that appear as they land, the price named before the click, and a history you can recall from — prompt and settings together, so nobody needs a spreadsheet of prompts beside the tool.

    New1

    • Image StudioA whole workspace for making images — settings that survive the prompt, results as they land, and a history you can work from.

  4. Every component, described in a format a model can be held to

    A new catalogue at /r/catalog.json gives each component's props as JSON Schema, its callbacks with their arguments, and the design reasoning behind it — generated from the TypeScript, so it can't drift. For products where the model produces the interface rather than the code. Plain JSON Schema, tied to no protocol.

    New1

    • /r/catalog.json — 51 components with validated prop schemas, and the same contract under meta.schema in every registry item.

    Improved1

    • The agent guide and llms.txt now point at the catalogue, so a runtime can constrain a model to real prop values instead of letting it invent them.

  5. Agents that work while you're away

    Four components for agents that run in the background: an inbox that puts what needs you first, a readable record of what the agent did and who allowed it, a handover that carries the context, and schedules written as sentences.

    New4

    • Run InboxEvery agent run in one place, with the ones that need a person at the top.
    • Activity TrailWhat the agent did, why it was allowed to, and what came of it — readable, and exportable.
    • Human HandoffWhen a person takes over from the agent — and what they're handed.
    • Agent ScheduleWhen the agent runs on its own, written as sentences anyone can check.

  6. Pick it, compare it, ship it

    Three more generation pieces: controls you choose from previews instead of naming, a before-and-after that works with a keyboard, and a result frame that states what made it and whether content credentials are attached.

    New3

    • Parameter PanelThe controls beside the prompt — pick a look from previews instead of naming it.
    • Compare ViewBefore and after an AI edit — with a slider that actually works from the keyboard.
    • Media ResultA finished generated image, video or clip — with what made it and whether content credentials are attached.

  7. Generation, without the waiting and the guesswork

    The first three pieces for products that make images, video or audio: a job that tells you where you are in the queue and refunds honestly, a grid where you keep the good results and regenerate the rest, and a credits meter that names the price before the click.

    New3

    • Generation JobA generation that takes minutes — queue position, honest waits, partial results and refunds.
    • Variation GridThe results of one prompt — keep the good ones and regenerate only the rest.
    • Credits MeterWhat's left, and what this action will cost — named together, before the click.

  8. Regenerate without regret

    Three components for what happens around an answer: keep every version you generate, say why a bad one was bad, and tell people when AI wrote something — or ask them first.

    New3

    • Response VersionsEvery answer the agent gave, kept — step between them, compare two, keep the one you want.
    • Response FeedbackThumbs with a reason that goes somewhere, and a confirmation that says where.
    • AI DisclosureSay what the AI did and what it used — or ask first, with both answers equally available.

  9. Before it runs, and before it sends

    Two new components for the moments either side of a run: what it will cost before you start it, and a place where everything the agent prepares waits until you send it.

    New2

    • Cost EstimateWhat a run will cost and how long it will take, before it starts — as a range, with the basis named.
    • Draft ModeThe agent prepares everything and nothing leaves until a person sends it.

  10. Watch the plan happen

    Agent Plan now follows the run. The plan people agreed to becomes the progress view: the current step moves, a step waiting on you holds still, finished steps get a check, and a failed one offers Retry.

    Improved3

    • Agent PlanNew per-step status (pending, running, waiting, done, failed, skipped) and note. Any status past pending switches the plan from editing to running.
    • Agent PlanrunStatus names what's happening now, onStop stays visible for the whole run, and onRetryStep is offered on a failed step.
    • Agent PlanProgress counts finished steps instead of inventing a percentage, and each step is announced once as it finishes, fails, is skipped or starts waiting.

  11. What's next, and how to help shape it

    Templates are coming: full starter apps for AI that makes and does. Early access is free, and what you tell us decides which ones come first.

    New2

    • Free early access to templates (Image Studio, Video Studio, Research Agent, Run Inbox and more), requested through a short GitHub form.
    • Work with me: design engineering for AI products, from agent and generation interfaces to custom components and design systems.

    Improved3

    • GitHub issue forms for component and template requests, and for bugs.
    • Theme: agent-done is now green instead of yellow, so finished reads as finished. It still reads as text in both themes.
    • The site feels drawn: pen underlines that draw themselves, paper cards that lift with an ink shadow, sections that ease in as you scroll, and a switch on the homepage that shows the turn-taking rule by freezing the agent. All of it stops under reduced motion.

  12. Ink on paper, and an agent you can see

    PixelDosa now looks like a sketchbook instead of a glowing screen: a light paper theme by default, near-black ink, and four marker colours that each mean one thing. And the agent gets a body: a hand-drawn character whose pose shows what it's doing, how sure it is, and when it needs you.

    New2

    • Agent FigureA hand-drawn agent whose pose shows what a run is doing, how sure it is, and when it needs you.
    • Theme: four agent marker colours, each with a soft fill: agent-working (blue), agent-waiting (orange, the only one that asks for action), agent-blocked (red) and agent-done (green). All four read as text in both themes.

    Improved9

    • Theme: a new ink-and-paper palette in light and dark. The site now opens in light mode.
    • No more blur, glow or gradient fades: Command Menu and Overlay use a plain paper scrim, Generation Placeholder's sweep is a drawn edge on a flat wash, and Code Block's "Show all" sits on a solid strip.
    • Reasoning StreamThe collapsed ticker shows the last two lines, cropped rather than faded.
    • Agent Presenceform="orb" is deprecated and will be removed in a later drop. It still renders. Use field, or Agent Figure for a visible agent.
    • Agent PresenceNew figure and mark forms draw the agent with Agent Figure. Each state takes a pose, and the poses for your turn hold still.
    • Live Status LineShows the agent's drawn head by default, with a face that follows the state. indicator="line" keeps the dots.
    • Thinking ExperienceNew expression prop: full draws the whole agent beside the run, subtle (default) keeps its head in the status line, off uses dots.
    • AI Chat ExperienceNew expression prop: full adds the agent's head as the assistant's avatar, subtle (default) shows it beside "Thinking", off uses dots.
    • New homepage with the agent front and centre, and Dosa, a guide that walks you through it and can be hidden.

  13. Installs cleanly in a new project

    The launch components installed by name into a fresh Next.js and shadcn project: they typecheck, build and run. The test turned up a few things that only show outside this repo, all fixed.

    Improved1

    • Getting started explains that installing the theme directly applies PixelDosa's palette, while pulling it in as a dependency keeps a project's existing colours.

    Fixed4

    • Example code on docs pages used this repo's internal import paths, so copied examples didn't compile. Code tabs and Source views now show the paths shadcn add installs.
    • Examples that use more than their own component, such as Agent Steer with Live Status Line, now list what else they need, with one install command for everything.
    • Prompt ComposerRe-measures its height when its width changes. A composer rendered while hidden, or a resized window, could keep an empty text area at full height.
    • Theme: the corner radius now applies in projects that already define one.

  14. Keyboard and screen readers

    An accessibility pass on the launch components: axe-core on every component page, a real-key keyboard walk through the hero components, and a check of what screen readers announce.

    Improved2

    • Components with a title take headingLevel, so they fit the heading outline of the page they're placed in: Intent Preview, Agent Plan, Agent Ask, AI Approval Gate, AI Triage Table, Autonomy Control, Agent Memory, Inline Citations, Thinking Experience and AI Chat Experience.
    • Prompt ComposerShows the standard focus ring when its text area has keyboard focus, instead of only a faint border change.

    Fixed2

    • Inline CitationsEscape closes the source and returns focus to its marker. Before, returning focus reopened the popover straight away.
    • AI Context / Provenance SurfaceThe "Why this?" trigger has a 28px target, up from 16px, meeting WCAG 2.5.8.

  15. Readable in both themes

    A contrast audit of every page in light and dark mode. Text now meets WCAG AA contrast everywhere it was measured, and two pages that fell back to light mode after loading are fixed.

    Improved4

    • Light theme: muted-foreground is slightly darker, so muted text stays readable on muted surfaces such as badges and keyboard hints.
    • Light theme: destructive is a deeper red that reads as text on white and under white text.
    • Dark theme: text on destructive fills is now dark, because white text on the bright red failed contrast.
    • Thinking ExperienceWhile waiting on you, the agent's region steps down with muted text and faded indicators instead of dimming everything to 55% opacity.

    Fixed2

    • AI Context / Provenance SurfaceThe "generated 12 minutes ago" time is formatted in the browser, which fixes a hydration error that reset the page's theme.
    • A nested paragraph in the Card docs broke hydration and reset the page's theme.

  16. Chat, done with the same care

    Everything an assistant screen needs, built with the same rules as the rest of the system, plus a block that composes it all. A team can now build an ordinary assistant and its trust moments without a second library.

    New5

    • AI Chat ExperienceA complete assistant screen — conversation, reasoning, tool calls, code, sources, follow-ups and composer — with the orchestration decided for you.
    • MessageOne turn of a conversation, with reasoning, tool calls, citations and the answer kept together in the order the work happened.
    • Message ScrollerThe conversation list that follows new messages only while you're following along, and never moves under you while you read.
    • Code BlockCode in an AI answer that's safe to copy. It waits for the stream to finish, confirms the copy, and handles unclosed fences mid-stream.
    • SuggestionsFollow-up questions after an answer, where it's always clear whether a tap fills the composer or sends right away.

    Improved2

    • Prompt ComposerControlled value / onValueChange, so the composer can be filled from outside.
    • New homepage, and browse cards that show each component as a thumbnail.

  17. Check it in one step

    Components for reviewing what an agent did and controlling what it may do: sources that show the passage, a record of real tool calls, autonomy you can read, and memory you can edit.

    New5

    • Inline CitationsSources attached to individual claims, where checking takes one step. The supporting passage is shown beside the claim and links straight to that spot in the source.
    • Tool Call CardWhat the agent actually did — read, searched, fetched, wrote — as a record beside what it says, so retrieved knowledge looks different from assumed knowledge.
    • Prompt ComposerA request composer that isn't a blank chat box. Free text, structured controls for tone, length, audience and format, and attachments for context.
    • Autonomy ControlHow much the agent does without asking, explained through its real actions. Users can make it more careful per action, never less careful than the risk allows.
    • Agent MemoryWhat the agent remembers about you, with what you said kept apart from what it guessed. Edit anything, forget anything, pause without erasing.

  18. Agree before it runs, steer while it works

    Correcting an agent is cheapest before it starts and most useful while it's running. This release covers both, plus a way to review many AI changes starting with the riskiest.

    New6

    • Intent PreviewThe agent restates what it understood and the guesses it made, before any work starts — one click when it's right, one correction when it isn't.
    • Agent PlanThe agent's plan laid out for agreement before anything runs — reorder, remove, or add a step, then run it as edited.
    • Agent SteerRedirect a running agent without stopping it — "not that file, this one" — and see whether it actually took the redirect on board.
    • AI Triage TableReview many AI-proposed changes at once — organised by where attention is needed, with what didn't change collapsed to a single line.
    • AI Form FillAn agent filling a form you're already looking at — one request, but every field still reviewed on its own terms.
    • Agent guide, /llms.txt and per-component markdown, so coding agents can find and use PixelDosa correctly.

    Fixed1

    • Collapsed panels in Reasoning Stream and AI Context Surface no longer take keyboard focus.

  19. An agent you can read

    The agent expression layer: presence that shows whose turn it is, live status, reasoning, questions, approvals, and the first block to orchestrate them. Built on one motion rule: moving means the machine is busy, still means it's your turn.

    New15

    • Thinking ExperienceA complete agent run, orchestrated — status, reasoning, questions, approvals and the result, with one state deciding what belongs on screen.
    • Agent PresenceAn agent's live state expressed visually rather than described — motion means the machine is busy, stillness means it's your turn.
    • Live Status LineOne line saying what an agent is doing right now — replaced as work moves on, cheap enough to live in permanent product chrome.
    • Reasoning StreamAn agent's reasoning as it arrives — a two-line ticker while it streams, folding to "Thought for 12s" once the answer exists.
    • Agent AskA structured question from an agent that needs input before it can continue — the UI surface for MCP elicitation, with the asker named and refusal made first-class.
    • AI Approval GateA checkpoint before a consequential agent action — what will happen, how much it touches, whether it can be undone, and three ways to answer.
    • Generation PlaceholderA layout-reserving placeholder for AI-generated media that encodes real generation progress as a resolving dot field, then cross-fades into the finished artifact.
    • AI Action ToolbarA keyboard-navigable toolbar of the standard post-generation actions — apply, explain, retry, regenerate, undo, report — with a three-level visual hierarchy that keeps the recommended action dominant.
    • AI Context / Provenance SurfaceA collapsed-by-default "Why this?" disclosure for an AI-produced value's explanation, sources, and model metadata — works with no chat thread required.
    • Confidence MeterA tiered (low/medium/high) confidence indicator with an optional provenance caption, shared by every AI-tier component that needs to communicate uncertainty honestly.
    • Diff AcceptReview an AI-proposed text change as an inline diff, resolved hunk by hunk — not all-or-nothing — with a conflict guard if the base text has drifted.
    • Smart FieldAn AI-proposed value for a single field — confidence, source, explicit accept/reject, and one-step undo before it ever becomes real data.
    • Selection ActionsA floating, selection-triggered toolbar for AI actions — explain, rewrite (reviewed via Diff Accept), translate, classify, extract.
    • Progressive RevealReveals a growing collection of items one at a time as they arrive, with a stable layout and no per-character typewriter effect.
    • Command MenuA global, keyboard-first overlay for finding resources and running actions across an app — ⌘K/Ctrl+K, fuzzy search, grouped results, and keybind hints.

    Fixed1

    • Components that compose other components now install with working imports.

  20. Foundations

    The tokens, theme and first primitives the AI components are built on.

    New5

    • CardA bordered content container with composable header, title, description, action, content, footer and image regions.
    • ButtonA clickable control that triggers an action, with six variants, four sizes, an accessible loading state, and asChild support for rendering as a link.
    • FieldA composable form-field wrapper — Field, FieldLabel, FieldControl, FieldDescription and FieldError — that wires ARIA automatically onto whatever control you place inside it.
    • Overlay Motion PrimitiveThe shared enter/exit animation layer for Dialog, Sheet, Popover and Drawer — a scrim plus a placement-aware content panel, both driven by motion tokens.
    • Ghost InputA single-line input with inline AI ghost-text completion — pause, see a dimmed continuation, accept with Tab or dismiss with Escape.