External/roboco
1
0
Fork 0
mirror of https://github.com/rennf93/roboco.git synced 2026-08-03 07:23:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

[50e80c55] Prompter interaction design and confirmation flow spec (#74) (#75)

Browse Source 
* [50e80c55] docs(design): create Prompter interaction design directory and main spec

* [50e80c55] docs(design): add confirmation interstitial spec with un-bypassable guardrails

* [50e80c55] docs(design): add model-selector drawer UX with Recommended default and complexity mapping

* [50e80c55] docs(design): add naming and navigation spec with sidebar placement and Task Assistant recommendation

---------

Co-authored-by: UX/UI Developer 1 <ux-dev-1@agents.roboco.dev>
This commit is contained in:
Renzo F
2026-06-07 04:50:38 +02:00
committed by GitHub
co-authored by UX/UI Developer 1
parent 199169ef0e
commit d5cbbf49ee
5 changed files with 724 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/ux_ui/design/README.md
+42
View File
@@ -0,0 +1,42 @@
# Prompter — UX/UI Design Deliverables
This directory contains the interaction design and confirmation flow specification for the **Prompter** feature (Phase 1). All patterns are mapped to the existing Panel design system so the Frontend Cell can implement them in parallel without inventing new visual language.
## Contents
| Document | Purpose |
|----------|---------|
| [`01-interaction-spec.md`](01-interaction-spec.md) | End-to-end chat → draft → review → confirm → launch flow, state machine, component mappings, error/loading patterns |
| [`02-confirmation-interstitial.md`](02-confirmation-interstitial.md) | Mandatory human-in-the-loop review modal: layout, copy, actions, un-bypassable guardrails |
| [`03-model-selector-ux.md`](03-model-selector-ux.md) | Model selector placement, defaults, and cognitive-load reduction |
| [`04-naming-and-navigation.md`](04-naming-and-navigation.md) | Naming alternatives to "Prompter" and sidebar nav placement |
## Design System Baseline
All screens are built from components already present in `panel/src/components/ui/` and `panel/src/components/layout/`:
- **Dialog** — `panel/src/components/ui/dialog.tsx` (Radix-based, animates in/out)
- **AlertDialog** — `panel/src/components/ui/alert-dialog.tsx` (for destructive/breaking confirmations)
- **Card** — `panel/src/components/ui/card.tsx` (sections, draft preview)
- **Tabs** — `panel/src/components/ui/tabs.tsx` (chat vs. draft review)
- **Select** — `panel/src/components/ui/select.tsx` (team, model, status)
- **Collapsible** — `panel/src/components/ui/collapsible.tsx` (advanced options drawer)
- **Button** — `panel/src/components/ui/button.tsx` (primary, outline, ghost, destructive)
- **Input / Textarea** — `panel/src/components/ui/input.tsx`, `panel/src/components/ui/textarea.tsx`
- **Badge** — `panel/src/components/ui/badge.tsx` (team labels, complexity indicators)
- **ScrollArea** — `panel/src/components/ui/scroll-area.tsx` (chat history, criteria list)
- **Skeleton** — `panel/src/components/ui/skeleton.tsx` (loading states)
- **Sidebar** — `panel/src/components/layout/sidebar.tsx` (navigation structure)
> **Rule**: No new visual language. Reuse existing tokens, spacing, and color variables (`bg-background`, `text-muted-foreground`, `border`, `shadow-sm`, etc.).
## Accessibility Baseline
- Focus trap inside dialogs on open (`focus-visible:ring-ring`)
- `aria-live="polite"` on chat message list for screen-reader announcements
- Keyboard: `Enter` to send, `Esc` to close modals, `Tab` cycles focus
- All icon-only buttons need `sr-only` text labels
## Version
Phase 1 — chat + draft-review + create/launch (no persistence/history).