Mistwright

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 600, 15px for pane headings; pane labels 12px 600 uppercase +0.06em
• InterBody: Inter 400, 15px/1.5 in the dense chat (16px in composer); tool chips 13px; file names 14px mono (JetBrains Mono)

Patterns

• three-pane builder (definition / chat / runs)
• status bar with saved and release chips
• tabbed file tree panel
• dark right-aligned user bubbles
• thinking disclosure and tool-call chips
• empty runs panel with icon
• segmented Runs / Examples
• resizable pane handles
• dark Run button

States it is designed for

• new agent with stub file
• assistant thinking
• tool running
• file changed (unsaved badge)
• no runs yet (empty panel)
• run in progress with live status
• run failed with error log
• released version (Live chip)
• model quota exceeded

Who it is for

• automation builders
• operations teams
• developers configuring AI agents

Layout

1. App sidebar (as the platform shell) with Agents active
2. Top bar: workspace chip, breadcrumb 'Agents / New agent'
3. Status bar: green dot + agent name, 'Saved · Not live' chip with dropdown, release version chip; right tabs (General, Model, Triggers) and dark Run button
4. Left pane (~160px): 'Agent definition' label, tabs (Workspace, Input, Output), 'Agent files' list
5. Centre pane: 'Training' label, New chat, Sessions dropdown; messages; composer with attach and send
6. Right pane (~260px): 'Runs' label with nav arrows, refresh and collapse; segmented Runs | Examples; empty state
7. Panes separated by draggable handles; below 1200px right pane collapses to a toggle; below 768px panes become tabs

Palette

Engineered, focused, calm. Monochrome with one green status dot; the dark user bubbles anchor the conversation.

• canvas#f7f7f7
• surface#ffffff
• text#171717
• muted#646464
• border#e4e4e4
• user-bubble#262626
• on-bubble#ffffff
• success#15803d
• primary#171717
• chip-bg#f3f3f3
• focus#2563eb

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Inter 600, 15px for pane headings; pane labels 12px 600 uppercase +0.06em

Body

Inter 400, 15px/1.5 in the dense chat (16px in composer); tool chips 13px; file names 14px mono (JetBrains Mono)

Similar to the observed neo-grotesk.

Spacing and imagery

Dense; 4px base; panes 12px padding with 8px gaps on the grey canvas; radius 12px panes, 12px bubbles, 999px chips; no shadows; composer has a 1px border.

No imagery; file and document icons; empty state uses a single muted document glyph.

Components

• status bar with chips
• release version chip
• config tabs
• run button
• file tree with tabs
• training chat
• user bubble
• thinking disclosure
• tool-call chip
• composer
• runs list
• examples list
• empty state
• pane resize handle

Interactions

• Drag handles resize panes; double-click resets
• Clicking a file opens it in a centre-pane editor tab
• Thinking line expands to show reasoning summary
• Tool chips expand to show the command output
• Run opens a dialog to choose an input example, then streams a run into the Runs list
• Cmd/Ctrl+S saves; 'Saved · Not live' changes to 'Unsaved' when files change

Data

• Agent{id, workspace_id, name, status (draft|live), current_release}
• AgentFile{id, agent_id, path, content, updated_at}
• TrainingMessage{id, agent_id, session_id, role, content, tool_calls jsonb}
• Run{id, agent_id, release, input jsonb, output jsonb, status (queued|running|succeeded|failed), started_at}
• Example{id, agent_id, name, input jsonb, expected jsonb}

Guardrails

Experience

• Always show whether the agent is saved and whether it is live
• Separate training chat (editing) from runs (testing) visually
• Show what tools the assistant used, in short chips
• Make Run the only primary action
• Offer examples so runs are reproducible
• Warn before releasing with failing examples

Accessibility

• Panes are landmarks with headings; resize handles are keyboard-operable separators with aria-valuenow
• Thinking and tool chips are buttons with aria-expanded
• Chat is a log region
• Status chips have text, not only coloured dots
• Composer labelled and send button named
• Focus ring 2px blue

Security

• RLS: agents, files, messages, runs, examples scoped to workspace members; release requires admin
• Tool execution sandboxed server-side with an allow-list of commands
• Model keys in server secrets only
• Validate file paths (no traversal) and size limits
• Audit log for releases

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste an entry's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack entries)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Mistwright**, the agent editor of an automation platform. Authors describe a process in a training chat; an assistant reads and writes the agent's instruction files (shown in a file tree); test runs appear in a right panel with examples. Status chips show saved/live state and the release version.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, ToggleGroup, Collapsible, Dialog, DropdownMenu, ResizablePanelGroup), lucide-react, TanStack Query, zod, a lightweight code editor (CodeMirror 6) for files. Supabase Auth, Postgres, Realtime for run status, and Edge Functions for the model and sandboxed tools.

### Pages & layout
1. **Platform shell** (sidebar with Agents active).
2. **/agents/:id** (this screen): status bar ('New agent', 'Saved · Not live', 'Release 0.0.1', General/Model/Triggers, Run); left pane 'Agent definition' (Workspace | Input | Output tabs, files: AGENT.md); centre 'Training' (New chat, Sessions) with user bubbles such as 'I want to set up an agent for supplier onboarding. I'll describe the steps.', assistant 'Thinking finished', tool chip 'Shell · list · read', reply; composer 'Message the agent...'; right 'Runs' with Runs | Examples and empty state 'No runs yet'.
3. **Run dialog**: choose example or paste JSON input.
4. Responsive: collapsible right pane; tabs on mobile.

### Design system
- Colors: `--canvas: #f7f7f7`, `--surface: #ffffff`, `--text: #171717`, `--muted: #646464`, `--border: #e4e4e4`, `--user-bubble: #262626`, `--on-bubble: #ffffff`, `--success: #15803d`, `--primary: #171717`, `--chip-bg: #f3f3f3`, `--focus: #2563eb`.
- Fonts: Inter (similar to observed); JetBrains Mono for file names and code. Pane labels 12px uppercase +0.06em; chat 15px/1.5; composer 16px.
- Spacing: 4px base; 8px pane gaps; 12px pane padding.
- Radius: panes and bubbles 12px; chips full.
- Shadows: none.
- Motion: 150ms disclosures; run status pulse; reduced motion respected.

### Components & interactions
`AgentStatusBar` (StatusDot + name, SaveStateChip, ReleaseChip, ConfigTabs, RunButton), `DefinitionPane` (tabs, FileTree), `TrainingChat` (UserBubble, AssistantMessage, ThinkingDisclosure, ToolChip, Composer), `RunsPane` (ToggleGroup, RunRow with status badge, ExampleRow, EmptyState), `PaneHandle`.

### Data & state
Tables per data model. Training sessions stream from the Edge Function; file edits proposed by the assistant are applied as new `agent_files` versions. Runs update via Realtime. Mock: one stub file, two training messages, zero runs, then a scripted run succeeding.

### Accessibility
Separators follow the window-splitter pattern. Chat role=log. Status text accompanies the green dot. Run dialog focus-trapped. All icon buttons named.
Verified contrast: body text on white pane: #171717 on #ffffff = 17.93:1; user bubble text: #ffffff on #262626 = 15.13:1; muted pane label on white: #646464 on #ffffff = 5.92:1; chip text on chip fill: #171717 on #f3f3f3 = 16.16:1; status dot on canvas: #15803d on #f7f7f7 = 4.68:1; run button label: #ffffff on #171717 = 17.93:1; focus ring on white: #2563eb on #ffffff = 5.17:1; muted text on canvas: #646464 on #f7f7f7 = 5.52:1.

### Security
RLS on all agent tables by workspace membership; `release_agent` RPC requires admin and writes an audit row. Tools run in a sandbox with an allow-list and time/CPU limits. File paths validated; max 200 KB per file. Secrets only server-side. Rate-limit runs.

### Performance & SEO
Lazy-load the code editor. Virtualise long runs lists. Stream chat tokens. Noindex.

### Guardrails
- Invented agents, processes and file contents
- Never auto-release
- Show tool usage transparently
- Typed code, errors surfaced
- Acceptance criteria: (1) chat edits update the file tree with an unsaved badge; (2) Run executes an example and shows status live; (3) empty runs state has a clear next step; (4) RLS and admin-only release enforced; (5) tabs layout at 390px.

Open the builderAll templatesThis palette on its own