Skip to content

Explain each stage of a run in a tooltip - #39

Merged
anurag merged 1 commit into
mainfrom
ag/stage-tooltips
Sep 24, 2026
Merged

anurag merged 1 commit into
mainfrom
ag/stage-tooltips

Conversation

@anurag

@anurag anurag commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

Summary

The UI showed the name of each stage of a run, but not what the stage does or where it runs. Now each stage has a tooltip that tells both.

Stage Runs in
Designing The architect task on Render Workflows
Provisioning The Render Sandbox of the run
Curating The prompt-to-app task on Render Workflows
Building The builder task on Render Workflows. Its tools run in the Render Sandbox.
Verifying The verify-app task on Render Workflows. The builds run in the Render Sandbox.
Publishing The publish-app task on Render Workflows, in a second Render Sandbox
Waiting For Services Render. The prompt-to-app task waits on the Render API.
Waiting For Deploys Render. A repair runs in the deploy-manager and builder tasks.
Smoke Testing The prompt-to-app task on Render Workflows
Done The app's own project on Render

Behavior

  • The tooltip opens above its stage on hover or keyboard focus. Thus a pointer that moves down the list does not go into an open tooltip.
  • The tooltip touches its stage, so the pointer can move onto it. Escape closes it and does not move the focus (WCAG 1.4.13).
  • The name of each stage is a <button>, so that the Tab key can go to it. Biome's noNoninteractiveTabindex rule does not let a list item have a tabindex. The button refers to its tooltip with aria-describedby.
  • The stage list is now static HTML. Before, each poll replaced all of the stages, in the aria-live region of the run panel. That closed an open tooltip and took the focus from a stage. Now a poll changes only the class of each stage.

Stage list check

RUN_STAGES in app/store.ts now gives the RunStage type. A new test in tests/gateway.test.ts checks that public/index.html lists these stages in this order, each with a tooltip that tells where it runs. Before, only a comment kept the two lists the same (PR #38). AGENTS.md and docs/FAQ.md tell about the tooltips.

Test plan

  • npm run check: Biome, tsc, and 377 Vitest tests pass.
  • The new test fails when a tooltip has no "Runs in" part.
  • In a browser, against a mock of the /ui/apps API: the tooltips of a running, a deployed, and a failed run. Desktop width, and phone width with no horizontal scroll.
  • The Tab key opens a tooltip, with the focus ring. Escape closes it, and the focus stays.
  • A tooltip stays open through two polls of a running run.

🤖 Generated with Claude Code

The UI showed the name of each stage, but not what the stage does or
where it runs. Now each stage has a tooltip. The tooltip tells what the
stage does, and where it runs: a Render Workflows task, the Render
Sandbox of the run, or Render itself.

The tooltip opens above its stage when the pointer is on the stage, or
when the keyboard focuses it. Thus a pointer that moves down the list
does not go into an open tooltip. The tooltip touches its stage, so the
pointer can move onto it, and Escape closes it (WCAG 1.4.13). The name
of each stage is a button, so that the Tab key can go to it. Biome does
not let a list item have a tabindex.

The stage list is now static HTML. Before, each poll replaced all of
the stages, in a live region. That closed an open tooltip, took the
focus from a stage, and could make a screen reader read the list again
every 5 seconds. Now a poll changes only the class of each stage.

RUN_STAGES in app/store.ts now gives the RunStage type. A new gateway
test checks that public/index.html lists these stages in this order,
each with a tooltip that tells where it runs. Before, only a comment
kept the two lists the same.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@anurag
anurag merged commit 40f67ed into main Sep 24, 2026
3 checks passed
@anurag
anurag deleted the ag/stage-tooltips branch September 24, 2026 14:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant