-
Notifications
You must be signed in to change notification settings - Fork 0
ux overview
Canon document. Updated by the Synthesis agent at the close of each initiative.
Style: Minimal, developer-focused — clean panels with functional density Voice & tone: Direct and technical, assumes developer fluency, never condescending Primary platform: Web (VS Code Webview + standalone SPA) Existing design system: ShadCN/ui (Radix UI primitives + Tailwind CSS) — used in both the chat app and as the default widget image
Top-level structure:
VS Code Extension
├── Project Explorer (Tree View)
│ └── File listing from PatchworkFileSystemProvider
├── Preview Panel (Webview)
│ ├── Widget Preview (iframe)
│ └── Edit Controls
└── Command Palette integration
Chat App (Standalone SPA)
├── Chat Interface
│ ├── Message Thread
│ ├── Markdown Editor (TipTap)
│ └── Widget Previews (inline)
└── Services Inspector
Navigation pattern: VS Code uses sidebar tree view + webview panel; Chat app uses single-page scrolling conversation Key entry points: VS Code: open project folder → tree view auto-populates; Chat: load page → conversation starts Active state: VS Code highlights selected file in tree; Chat auto-scrolls to latest message
| Event | Pattern |
|---|---|
| Success | Inline confirmation in editor; compiled widget appears in preview |
| Error | Error boundary with stack trace in widget preview; inline error display in code blocks |
| Warning | Console warnings surfaced in ServicesInspector |
| Loading | Skeleton placeholders during compilation; spinner for service calls |
- Primary action: ShadCN Button component — filled variant, brand color
- Secondary action: Outlined variant, multiple allowed per view
- Destructive action: Red/destructive variant, used for file deletion with confirmation
- Validation timing: On blur for text inputs; real-time for code editing
- Error placement: Below affected field
- Required fields: Minimal forms — most interaction is code-centric
- File tree shows "No files" with prompt to create
- Chat starts with welcome message and suggested actions
- Widget preview shows placeholder when no widget is compiled
- EditModal: Full-screen modal for file editing with FileTree sidebar, code view, and diff preview
- SaveConfirmDialog: Confirmation overlay showing diffs before saving changes
- Dismissal: ESC key + explicit close button; click-outside for smaller dialogs
Standard: Not formally audited — follows ShadCN/Radix defaults (WCAG 2.1 AA baseline) Keyboard navigation: Partial — Radix primitives provide keyboard support; custom components vary Screen reader support: Inherited from Radix UI primitives Color contrast: AA minimum via ShadCN CSS variable theming Touch targets: N/A — desktop-first (VS Code + web) Reduced motion: Not explicitly implemented
| Breakpoint | Width | Layout |
|---|---|---|
| VS Code Panel | Variable | Constrained to webview panel width |
| Chat App | Full viewport | Single column, max-width constrained |
The product is desktop-first. VS Code panels adapt to user-configured panel sizes. The chat app uses a single-column layout that works at any reasonable desktop width.
Voice: Direct, assumes technical competence — "Your widget compiled in 120ms" not "Great job! Your widget is ready!"
Key copy patterns:
| Context | Approach |
|---|---|
| CTAs | Active verbs: "Compile", "Preview", "Save Changes" |
| Error messages | State what failed + technical detail: "Compilation failed: missing export in App.tsx" |
| Empty states | Functional prompt: "No files in project. Create a new file to get started." |
| Success confirmations | Brief + next step: "Saved. Preview updated." |
- Mobile responsiveness — Chat app could support mobile but no design work has been done
- Accessibility audit — Formal WCAG audit deferred; relying on Radix defaults
- Dark mode consistency — ShadCN image supports dark mode via CSS variables; chat app theme toggle status unclear