Cut a While

Pomodoro for VS Code — stay in flow without leaving the editor.

Cut a While in VS Code — timer panel, sidebar, and status bar

A minimal focus timer that lives inside VS Code: status bar countdown, activity-bar tree, and a clean webview panel that follows your editor theme.

Why

External timers break concentration. Cut a While keeps work / break cycles, tasks, and light analytics next to your code — with optional Zen Mode when you need fewer distractions.

Features

Pomodoro cycles — work, short break, and long break (defaults 25 / 5 / 15)
Status bar — live countdown; click to open the panel
Activity Bar — overview (streak, today, time left). The timer itself is the Timer Panel
Timer panel — editorial UI with progress arc, session dots, and streak
Tasks — chips select a task; Start begins the session. The task stays editable while focusing
Stats — today / week / totals, 7-day chart, top tasks, project focus time
Sounds — six completion themes (bell, digital, nature, zen, soft, classic)
Accent color — blue, purple, green, pink, orange, or teal
Zen Mode — optional full focus when a work session starts
Auto-pause — pause when VS Code loses window focus; prompt to resume
Focus tracking — hover a file to see accumulated focus time; project totals in stats
Persistent state — timer progress survives window reloads

Install

VS Code Marketplace

Search Cut a While in the Extensions view, or install from the Marketplace listing.

Open VSX (Cursor / VSCodium / Antigravity)

Search Cut a While in Extensions, install by ID horaciodominguez.cut-a-while, or use the Open VSX listing.

GitHub Release (`.vsix`)

Download cut-a-while-0.1.6.vsix from the latest GitHub Release, then in VS Code: Extensions → … → Install from VSIX…

From source

npm install
npm run build
npm run package

Then install the generated cut-a-while-0.1.6.vsix as above, or press F5 after npm run build to run an Extension Development Host.

Usage

Open Cut a While in the Activity Bar and choose Open Timer Panel. The sidebar shows today’s count and your streak; the timer UI is the bottom Timer Panel. You can also click the status-bar countdown.
Pick a task chip or type what you’re working on. A chip only selects the task. Starting a session does not add a task to the list.
Press Start. You can edit the task while the session is running. The same task stays through the break.
When focus ends, the break starts and a short notice appears. From the panel you can pause, stop, or start the next focus.

Commands

Command	Default shortcut
Cut a While: Start / Pause Timer	None. Assign one in Keyboard Shortcuts. `Ctrl+Shift+T` / `Cmd+Shift+T` stays Reopen Closed Editor. On a break this pauses; it does not skip the break.
Cut a While: Show Timer Panel	—
Cut a While: Reset Timer	—
Cut a While: Show Statistics	—

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type Cut a While.

Settings

Search Cut a While in Settings, or edit settings.json:

Setting	Default	Description
`cut-a-while.workDuration`	`25`	Work session length (minutes)
`cut-a-while.breakDuration`	`5`	Short break (minutes)
`cut-a-while.longBreakDuration`	`15`	Long break (minutes)
`cut-a-while.longBreakInterval`	`4`	Work sessions before a long break
`cut-a-while.autoStart`	`true`	Auto-start the next cycle when one ends
`cut-a-while.autoPause`	`true`	Pause when VS Code loses window focus
`cut-a-while.sound.enabled`	`true`	Play a sound when a cycle completes
`cut-a-while.soundTheme`	`bell`	`bell` \| `digital` \| `nature` \| `zen` \| `soft` \| `classic`
`cut-a-while.zenMode`	`false`	Enter Zen Mode on focus start (exits on pause/break)
`cut-a-while.statusBarAlignment`	`right`	`left` \| `right`
`cut-a-while.theme.accent`	`blue`	Accent for ring, CTA, and UI accents

Most of these are also editable from the in-panel Settings drawer.

Limits

The Activity Bar view is an overview. Start, pause, and settings live in the Timer Panel (bottom) or via Cut a While: Show Timer Panel.
Auto-pause (cut-a-while.autoPause, default on) pauses focus and breaks when the window loses focus, then asks to resume.
Zen Mode turns on for a running focus session and turns off on pause, break, or stop.
On Windows, completion and theme preview use system beeps (one pattern per theme). On other platforms, the panel plays Web Audio when it is visible.
Task chips select a task. The session starts only when you press Start.

Architecture

Extension Host (Node)          Webview (React + Vite)
┌─────────────────────┐        ┌──────────────────────┐
│ TimerManager        │◄──────►│ Timer panel UI       │
│ Storage (globalState│  msgs  │ Settings / Stats /   │
│ Status bar + Tree   │        │ Tasks drawers        │
│ Zen / auto-pause    │        └──────────────────────┘
│ File / project focus│
└─────────────────────┘

Host: TypeScript, VS Code Extension API
UI: React 19, Tailwind CSS 4, Framer Motion (drawers)
Build: tsc → out/extension.js; Vite → out/webview/

Development

Requirements: Node.js 20+, VS Code / Cursor with extension debugging.

npm install
npm run build      # compile extension + webview
npm run dev        # watch both
npm test           # Vitest (timer, storage, time utils)
npm run lint
npm run package    # produce .vsix via vsce

Publish to Open VSX (after npm run package):

npm run publish:openvsx -- -p <TOKEN>

Token at open-vsx.org/user-settings/tokens.

Debug: open this folder in VS Code → Run and Debug → Run Extension (or F5). A second window (Extension Development Host) loads the extension.

Tip: after UI changes, rebuild the webview (npm run build:webview or npm run dev) and reload the Extension Development Host.

License

MIT — see LICENSE. Publisher: horaciodominguez.

Cut a While

Horacio Dominguez

Cut a While

Why

Features

Install

VS Code Marketplace

Open VSX (Cursor / VSCodium / Antigravity)

GitHub Release (.vsix)

From source

Usage

Commands

Settings

Limits

Architecture

Development

License

GitHub Release (`.vsix`)