mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
d5cbbf49ee
* [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>
43 lines
2.6 KiB
Markdown
43 lines
2.6 KiB
Markdown
# 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).
|