The Workspace

Overview

The Codewick workspace is a three-column layout designed to keep your conversation with the AI, your code, and your live preview visible at the same time. Every panel is resizable, collapsible, and keyboard-accessible.

┌──────────┬──────────────────────────┬─────────────────────┐
│          │                          │                     │
│  Left    │    Center Workspace      │   Browser Panel     │
│  Rail    │    (Chat / Editor)       │   (Live Preview)    │
│          │                          │                     │
│          │                          │                     │
│          │                          │                     │
│          │                          │                     │
├──────────┴──────────────────────────┴─────────────────────┤
│                        Status Bar                         │
└───────────────────────────────────────────────────────────┘

The minimum window size is 1024 x 768 pixels. Below that, panels begin to overlap and the layout is not supported.

Left rail

The left rail is a narrow icon column on the far left of the window. It provides quick access to Codewick’s major panels.

Icon	Panel	Shortcut	Description
Folder	Files	`Cmd + 1`	Project file explorer — browse, create, rename, and delete files and folders
Chat bubble	Chat	`Cmd + 2`	AI conversation panel — describe what you want and see pipeline progress
Code brackets	Code	`Cmd + 3`	Editor view — opens the Monaco code editor with your project files
Git branch	Git	`Cmd + 4`	Git panel — view diffs, stage changes, commit, and manage branches
Clock	Checkpoints	`Cmd + 5`	Checkpoint history — browse and restore automatic snapshots

Bottom icons

Icon	Panel	Description
Life ring	Support	Opens the help menu with links to documentation, community, and support tickets

Clicking an icon opens its corresponding panel in the center workspace area. The active icon is highlighted. Clicking the active icon again collapses the panel.

Top bar

The top bar spans the full width of the window and displays key project information.

From left to right:

Flame logo — The Codewick icon. Click it to open the application menu with options for new project, open folder, settings, and help.
Project name — The name of the currently open project. Click to rename it.
Git branch — Shows the active git branch (e.g., main). Click to switch branches or create a new one. This only appears if the project is a git repository.
Account avatar — Your profile picture or initials, positioned on the far right. Click to open account settings, manage your subscription, or sign out.

Status bar

The status bar runs along the bottom of the window and shows real-time information at a glance.

Element	Position	Description
Server status	Left	Shows whether Codewick is connected to the AI service. Green dot means connected; yellow means reconnecting; red means offline.
Active file	Center-left	The name of the file currently open in the editor.
Language	Center	The detected language of the active file (e.g., TypeScript, Python, CSS).
Git branch	Center-right	The current branch name, duplicated here for quick reference when the top bar is not visible in a scrolled view.
Version	Right	The installed Codewick version number.

Center workspace

The center workspace is the largest panel and where you spend most of your time. It has two primary views, accessible via tabs at the top of the panel.

Chat view

The chat view is a conversation interface where you interact with the AI.

Message input — A text field at the bottom where you type prompts. Press Enter to send. Press Shift + Enter for a new line.
Message history — A scrollable thread showing your messages and AI responses. AI messages include status indicators for each pipeline stage.
Pipeline progress — When the AI is working, you’ll see a progress indicator showing which stage is active (Orchestration, Planning, Building, UI Generation, Debugging, Review) and a spinning indicator for the current task.
File references — AI responses include clickable file names. Click any file name to open it in the editor.
Undo button — Appears after each AI action. Click to roll back to the previous checkpoint.

Editor view

The editor view is a full Monaco code editor — the same engine that powers Visual Studio Code.

Key features:

Tabbed editing — Open multiple files as tabs. Drag to reorder. Middle-click or click the X to close.
Syntax highlighting — Automatic language detection with highlighting for 50+ languages.
IntelliSense — Autocomplete, parameter hints, and hover documentation for supported languages (TypeScript, JavaScript, HTML, CSS, JSON, Python, and more).
Multi-cursor editing — Cmd + D to select the next occurrence, Cmd + Shift + L to select all occurrences, Option + Click to add cursors.
Minimap — A code overview in the right margin of the editor. Toggle it from the View menu.
Find and replace — Cmd + F to find, Cmd + H to replace. Supports regex.
Code folding — Click the fold icons in the gutter to collapse blocks.

Switching between views

Click the Chat or Editor tab at the top of the center panel.
Use Cmd + Shift + C to jump to Chat.
Use Cmd + Shift + E to jump to the Editor.
When you click a file reference in the chat, the editor opens automatically.

Browser panel

The right side of the workspace is an integrated Chromium browser that live-previews your application.

Automatic refresh

When the AI generates or modifies code, the browser automatically refreshes to show the latest state. You don’t need to manually reload. If a dev server is running (e.g., Vite, Next.js), Codewick detects it and points the browser to the correct local URL.

Element selection tools

The browser panel includes a toolbar at the top with selection tools:

Pointer mode (default) — Interact with your app normally. Click buttons, fill forms, navigate pages.
Select mode — Click any visual element to select it. The element is highlighted with a blue outline, and its corresponding source code is identified in the editor. You can then describe changes in the chat that target that specific element.
Inspect mode — Hover over elements to see their bounding box, CSS class names, and component name. Click to lock the inspection panel.

Toggle between modes using the toolbar icons or the keyboard shortcut Cmd + Shift + S (cycles through modes).

Expanding the browser

The browser panel can be:

Resized by dragging the left edge of the panel.
Expanded to full window by clicking the expand icon in the browser toolbar or pressing Cmd + Shift + B. This hides the left rail and center workspace to give you a full-width preview. Press the same shortcut or click the collapse icon to return to the three-column layout.
Collapsed by double-clicking the drag handle or dragging it all the way to the right edge. The center workspace expands to fill the space.

Browser URL bar

At the top of the browser panel, a URL bar shows the current address. You can:

Type a URL to navigate to any page (useful for testing external API endpoints or referencing design inspiration).
Use the back and forward buttons to navigate history.
Click the refresh button to manually reload.

Panel resizing

All three columns — left rail, center workspace, and browser panel — are separated by drag handles.

Resizing

Click and drag any handle to adjust column widths. The minimum width for each panel is:

Panel	Minimum width
Left rail	48px (icon-only mode)
Center workspace	400px
Browser panel	300px

Collapsing

Double-click a drag handle to collapse the panel on one side to its minimum width.
Drag to the edge to collapse a panel to zero width, hiding it completely.
Double-click the edge where a collapsed panel was to restore it to its previous width.

Layout presets

Codewick doesn’t have formal layout presets, but you can quickly switch between common configurations:

Focused coding — Collapse the browser panel, maximize the editor. Cmd + Shift + B toggles the browser.
Focused preview — Expand the browser to full window. Cmd + Shift + B from the three-column view.
Balanced — Drag handles to roughly equal thirds. This is the default layout.

Keyboard shortcuts

Here is a reference of the most important workspace shortcuts:

Shortcut	Action
`Cmd + 1`	Open Files panel
`Cmd + 2`	Open Chat panel
`Cmd + 3`	Open Editor panel
`Cmd + 4`	Open Git panel
`Cmd + 5`	Open Checkpoints panel
`Cmd + Shift + C`	Switch to Chat view
`Cmd + Shift + E`	Switch to Editor view
`Cmd + Shift + B`	Toggle browser panel

Editor

Shortcut	Action
`Cmd + S`	Save current file
`Cmd + P`	Quick open file by name
`Cmd + F`	Find in file
`Cmd + H`	Find and replace
`Cmd + Shift + F`	Search across project files
`Cmd + D`	Select next occurrence
`Cmd + Shift + L`	Select all occurrences
`Cmd + /`	Toggle line comment
`Cmd + Shift + K`	Delete line
`Option + Up/Down`	Move line up/down
`Cmd + W`	Close current tab

General

Shortcut	Action
`Cmd + ,`	Open settings
`Cmd + K`	Open command palette
`Cmd + backtick`	Toggle terminal
`Cmd + Z`	Undo (in chat: revert last AI action)
`Cmd + N`	New file
`Cmd + Q`	Quit Codewick

Terminal

The terminal is a built-in shell accessible from within the workspace. It opens as a panel at the bottom of the center workspace.

Toggle with Cmd + backtick or from the View menu.
Multiple tabs — Click the + button to open additional terminal sessions.
Copy and paste — Cmd + C and Cmd + V work as expected.
Shell — Uses your default system shell (typically zsh on modern macOS).
Working directory — Automatically set to your project root.

The AI can also run terminal commands when needed during the build pipeline — for example, installing npm packages or running migrations. These commands appear in the chat log so you can see exactly what was executed.

File explorer

The file explorer (accessed via Cmd + 1 or the folder icon in the left rail) shows your project’s directory tree.

Create files and folders by right-clicking and selecting New File or New Folder.
Rename by right-clicking and selecting Rename, or pressing Enter with a file selected.
Delete by right-clicking and selecting Delete, or pressing Cmd + Backspace. Deleted files go to the system Trash.
Drag and drop to move files between folders.
Search the file tree with the filter input at the top of the panel.

Files generated by the AI are marked with a small AI icon badge in the explorer until you edit them manually.

What’s next?

You now know your way around the Codewick workspace. From here, you might explore:

Pipeline Configuration — Learn how to customize which AI models handle each stage.
Git Integration — Set up version control and connect to GitHub or GitLab.
Settings and Preferences — Customize the editor theme, font, key bindings, and more.