84 lines (67 loc) · 2.25 KB

Component Inventory

UI Components

Component	File	Purpose
Header	`Header.jsx`	App header with logo, theme toggle, settings button
VibeInput	`VibeInput.jsx`	Multi-line textarea for user input with character count
TransformButton	`TransformButton.jsx`	Action button with loading spinner
OutputPanel	`OutputPanel.jsx`	Display panel for AI prompt or Markdown spec
History	`History.jsx`	List of recent transformations
MobileTabs	`MobileTabs.jsx`	Tab navigation for mobile view
DownloadButton	`DownloadButton.jsx`	Export transformation as Markdown file
SettingsModal	`SettingsModal.jsx`	Modal for AI backend configuration

Component Details

Header

Logo with gradient
Theme toggle (light/dark)
Settings button
Connection status indicator

VibeInput

Multi-line textarea (min-height: 200px)
Character count display
Max 1000 characters
Placeholder with example
Image upload support

TransformButton

Primary action button
Loading state with spinner
Keyboard shortcut hint (Ctrl+Enter)
Disabled state when input empty

OutputPanel

Title header
Scrollable content area
Copy to clipboard button
Monospace font for code

History

Collapsible section
Last 5 transformations
Click to restore
Delete individual items
Timestamps (relative)

MobileTabs

Two tabs: "AI Prompt" / "Markdown Spec"
Active state indicator
Mobile-only visibility

DownloadButton

Downloads as .md file
Contains both AI prompt and spec
Filename: vibeshift-{timestamp}.md

SettingsModal

Backend selection dropdown
API key input
Endpoint configuration (for custom)
Model selection
Connection test button
Save/cancel actions

Test Files

Test File	Type	Coverage
`SettingsModal.test.tsx`	Unit	Component tests
`models-endpoint.test.ts`	Integration	API endpoint tests

Design Patterns

Functional Components: All components use React functional style
Hooks: useState, useEffect, useCallback, useRef
Props: Explicit prop interfaces
Conditional Rendering: For loading states, empty states

Generated: 2026-03-02