mirror of https://github.com/rennf93/roboco.git synced 2026-08-03 07:23:24 +02:00

Files

T

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

* [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>

2026-06-07 04:50:38 +02:00

2.6 KiB

Raw Blame History

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.

Document	Purpose
`01-interaction-spec.md`	End-to-end chat → draft → review → confirm → launch flow, state machine, component mappings, error/loading patterns
`02-confirmation-interstitial.md`	Mandatory human-in-the-loop review modal: layout, copy, actions, un-bypassable guardrails
`03-model-selector-ux.md`	Model selector placement, defaults, and cognitive-load reduction
`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).

2.6 KiB Raw Blame History

Prompter — UX/UI Design Deliverables

Contents

Design System Baseline

Accessibility Baseline

Version

2.6 KiB

Raw Blame History