Improve visual annotation workflows - #4411
Open
shaunandrews wants to merge 7 commits into
Open
Conversation
…orkflows # Conflicts: # apps/ui/src/components/site-preview/index.tsx
Collaborator
📊 Performance Test ResultsComparing 643029b vs trunk app-size
site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related issues
How AI was used in this PR
Built through an iterative Codex session with continuous human UX feedback. Codex implemented the feature, hardened the data flow, and added tests; the interaction design was manually reviewed in an isolated Electron build.
Proposed Changes
Screenshots
1. Enter annotation mode — light
The preview toolbar exposes a clear Annotate action before any element is selected.
2. Select an element and compose a note — light and dark
The selected element stays isolated by the scrim while the composer exposes element context, overlapping-layer navigation, cancel, save, and send actions.
3. Save several notes and keep annotating — dark
Saved elements retain numbered outlines while annotation mode stays active and Send to chat becomes available.
4. Keep edge markers visible — light
When the selected element extends beyond the viewport, its numbered marker clamps into view.
5. Send annotations to chat — light
Each submitted note becomes a separate user message with its element context attached underneath.
Review guide
Please focus on the injected preview inspector lifecycle, structured annotation persistence, and the security boundary between previewed pages and Studio. The styling and transcript rendering are comparatively self-contained.
Testing Instructions
npm run typechecknpm test -- apps/ui/src/components/site-preview/inspector-script.test.ts apps/ui/src/components/site-preview/index.test.tsx apps/ui/src/ui-classic/components/session-view/annotations.test.ts apps/ui/src/ui-classic/components/session-view/conversation/index.test.ts apps/ui/src/data/queries/use-agent-run.test.tsx apps/cli/ai/inspector/annotation-result.test.ts apps/cli/commands/ai/sessions/tests/resume.test.ts packages/common/ai/inspector-annotations.test.ts packages/common/ai/visual-annotations.test.tsnpm run build --workspace @studio/uiProduction hardening result: 83 focused tests passed. Full lint, monorepo typecheck, CLI build, Electron build, and the Agentic UI renderer build pass. The full repository suite was also attempted; unrelated environment-bound port, e2e, canvas, and color-output suites do not run cleanly in this local environment.
Pre-merge Checklist