UI & Navigation

Available

CutReady's interface showing sidebar navigation and explorer panel

CutReady uses a modern, VS Code-inspired interface with a sidebar, tabbed editors, resizable panels, and a command palette.

Layout

┌────────────────────────────────────────────────────────────┐
│  Title Bar (window controls, feedback, panel toggles)      │
├────────┬──────────────────────────────────┬────────────────┤
│ Side-  │  Tab Bar (open documents)        │  Chat Panel    │
│ bar    ├──────────────────────────────────┤  (AI chat +    │
│ (5     │  Main Content                    │   Activity)    │
│ icons) │  (Sketch / Record / Script /     │                │
│        │   Settings)                      │                │
│        ├──────────────────────────────────┤                │
│        │  Output Panel (Activity + Debug)     │                │
└────────┴──────────────────────────────────┴────────────────┘

Sidebar

The sidebar has 5 navigation icons:

Icon	View	Description
🏠	Home	Project selection and creation
✏️	Sketch	Edit sketches and planning tables
🔴	Record	Browser profile selection and recording
📄	Script	Edit recorded scripts (coming soon)
⚙️	Settings	API keys, output directory configuration
💬	Chat	AI chat panel (right sidebar)

• Toggle visibility: Ctrl+B
• Move sidebar: Right-click for left/right positioning
• The sidebar remembers its width across sessions

Command Palette

Press Ctrl+Shift+P to open the command palette — a searchable list of all available commands. Start typing to filter.

Title Bar

CutReady uses a frameless window with a custom title bar that includes:

• Window controls (minimize, maximize, close)
• Feedback button — chat-bubble icon to submit feedback with optional debug log
• Toggle buttons for sidebar, output panel, and chat panel
• Drag area for moving the window

Output Panel

Toggle with `Ctrl+“ — a resizable bottom panel with two tabs:

• Activity — real-time log of AI operations, tool calls, and sparkle actions
• Debug — captures JavaScript console output and Rust backend log messages for diagnostics

Both tabs support export (download as .log file) and per-tab clear.

Feedback

CutReady has a built-in feedback system accessible from the title bar:

• Click the 💬 icon next to the panel toggles to open the feedback popover
• Choose a category: General, Bug, Feature, or Design
• Optionally toggle Include debug log to attach diagnostic information
• Feedback is persisted to the app data directory and viewable in Settings → Feedback
• From Settings, you can copy feedback or create a GitHub Issue — the issue body is formatted by AI with the app version and optional debug log

Keyboard Shortcuts

Shortcut	Action
Ctrl+Shift+P	Open Command Palette
Ctrl+B	Toggle Sidebar
Ctrl+`	Toggle Output Panel
Ctrl+S	Save Version
Ctrl+Shift+I	Toggle Chat Panel
Escape	Close overlays/modals

Chat Panel

The Chat Panel is a right-side panel for interacting with the AI assistant:

• Chat tab — Converse with built-in AI agents (Script Writer, Demo Planner, Sketch Improver) or custom agents
• Activity tab — View color-coded logs of AI operations (sparkle button calls, agent responses, errors)
• Toggle — Click the 💬 icon in the sidebar or press Ctrl+Shift+I

The chat panel is independent of the main content area — you can keep it open while editing sketches, reviewing storyboards, or working on notes.

Theme

CutReady includes both light and dark themes, toggled from the status bar at the bottom of the window.