A gamified desktop client for GitHub Copilot
Turn every AI interaction into a slot-machine experience — track tokens, hit milestones, level up, and make coding with Copilot feel like winning.
Copilot Tokens wraps the full power of GitHub Copilot's agentic coding assistant inside a desktop app that makes every session feel alive. It's not a toy — underneath the animations is a complete multi-panel AI coding environment with tool permissions, diff viewing, git integration, and session replay. The gamification layer sits on top, giving you real-time feedback on how you and the AI are working together.
Watch the agent review code changes, provide feedback, and the full tool execution pipeline in action.
review-720.mov
One click to skip all permission prompts. The satisfying toggle, the flash — and then the agent runs free.
yolo-720.mov
Hit milestones, earn badges, and level up across 5 categories. Every session adds to your progress.
achievements-720.mov
Toggle SDK capabilities on and off — reasoning chains, custom tools, infinite sessions, hooks, and more. All configurable from the Settings panel.
settings-720.mov
What happens when you hit 1,000,000 tokens? Find out.
1million-720.mov
- Agentic coding powered by the
@github/copilot-sdk— file edits, shell commands, web fetches, and more - Multi-panel chat with draggable split panes for parallel conversations
- Tool permission system with YOLO mode for the brave
- Model selector with live context window tracking
- MCP server support for extensible tool integrations
- Custom agents — pick from presets or create your own personas with tailored system prompts
Every feature toggleable from Settings — turn things on and off to match your preferences:
- Reasoning chains — stream the model's chain-of-thought in a collapsible thinking panel with effort selector (low → max)
- Ask user flow — the agent asks clarifying questions mid-task with interactive choice buttons
- Native tools — desktop notifications, clipboard read/write, system info, app launching, sound playback via
defineTool() - Infinite sessions — conversations never die; auto-compaction keeps the context window managed
- Session hooks — pre/post tool hooks, prompt validation, error recovery, session summaries
- Session events — error banners, model change notifications, truncation warnings, shutdown report cards
- Real-time odometer counters for input tokens, output tokens, and totals
- Context window progress bar showing actual session utilization with compaction awareness
- Git stats — files changed, lines added/removed — polled live from your working directory
- 100 levels across 5 categories: tokens, messages, tool calls, files, and lines changed
- 7 tiers from Novice to Legendary — all category bars must fill to level up
- Milestone celebrations at token/file/line thresholds with sparkle, confetti, and jackpot effects
- Level-up overlays with animated fanfare
- Neon Arcade — dark GitHub palette with neon glows and particles
- Retro Casino — warm reds and golds with a vintage feel
- Minimal — clean and distraction-free
- Create your own themes, milestone packs, and sound packs in the Pack Studio
Every sound is synthesized at runtime — no audio files. Lever pulls, token ticks, milestone chimes, jackpot fanfares, and celebration sequences are all generated from oscillators and envelopes using the Web Audio API.
- Every session is automatically recorded — messages, tool calls, stats, and timing
- Browse past sessions or resume SDK sessions with full conversation history
- Full replay with timeline scrubbing
- Reads under your working directory auto-approve
- Writes, shell commands, and URL fetches prompt for approval
- "Always allow" rules persist across sessions
- YOLO mode bypasses all dialogs (with a satisfying toggle sound)
src/
├── main/ Electron main process
│ ├── copilot-service SDK wrapper — sessions, streaming, tools, hooks, agents
│ ├── permission-service Tool permission rules & evaluation
│ ├── auth-service GitHub OAuth Device Flow + gh CLI detection
│ ├── stats-service Lifetime stats, streaks, level progress
│ └── pack-service Custom milestone/sound/theme pack CRUD
├── preload/ Context-isolated bridge
│ └── preload 13 typed APIs: copilot, stats, git, auth, model,
│ settings, features, sessions, agents, pack, mcp, cwd, util
└── renderer/ React 19 + Tailwind 4 + Motion
├── App Root — panels, modals, state orchestration
├── components/
│ ├── ReelArea Animated chat feed (30+ event types)
│ ├── TokenDashboard Live counters & context progress
│ ├── SplitLayout Multi-panel with draggable dividers
│ ├── PermissionDialog Tool approval UI
│ ├── Settings General, SDK Features, System Prompt tabs
│ ├── AgentPicker Custom agent personas & presets
│ ├── HooksIndicator Hook pipeline activity display
│ ├── PackStudio Theme/milestone/sound editor
│ ├── SessionBrowser Past sessions + SDK session resume
│ ├── DiffViewer Unified diff rendering
│ └── tiles/ 16 per-tool UI components
│ ├── ReasoningTile Chain-of-thought streaming
│ ├── AskUserTile Interactive choice buttons
│ ├── SessionEventTiles Error/compaction/shutdown banners
│ ├── NativeToolTiles Notification/clipboard/system info
│ ├── SqlTile, MemoryTile, SubagentTile, SkillTile
│ └── BashTile, FileEditTile, FileReadTile, WebFetchTile...
└── lib/
├── level-system 100-level polynomial progression
├── milestones Threshold-based achievement triggers
├── sound-manager Web Audio procedural synthesis
├── themes CSS variable-driven theming
├── tile-registry Plugin-style tile registration
└── party-bus Cross-component event pub/sub
- Three-process Electron architecture — main (Node.js), preload (context bridge), renderer (browser). All IPC is typed end-to-end.
- No external audio files — all sounds are procedurally generated with the Web Audio API.
- CSS variable theming — themes swap a set of CSS custom properties; components reference variables, never hard-coded colors.
- Event-driven gamification — a lightweight pub/sub bus (PartyBus) decouples game events from UI, so milestones, level-ups, and celebrations trigger without tight coupling.
- Everything is toggleable — every SDK feature (reasoning, tools, hooks, agents, sessions) can be turned on/off from Settings without restarting the app.
- Persistent state — auth, permissions, stats, packs, feature flags, and level progress all persist via
electron-store.
- Node.js 20+
- A GitHub account with Copilot access
- The GitHub Copilot CLI installed (
copilotin your PATH)
npm install
npm run startOn first launch, you'll authenticate via GitHub OAuth Device Flow (or it picks up your existing gh CLI session).
# Package the app
npm run package
# Create platform-specific installers
npm run make- Create a component in
src/renderer/components/tiles/ - Export from the barrel
index.ts - Register in
src/renderer/lib/register-tiles.tswith the tool name as key
Create themes in the Pack Studio or register them programmatically. A theme is a set of color tokens and effect flags:
{
name: 'my-theme',
label: 'My Theme',
colors: { bgPrimary, bgSecondary, border, textPrimary, textSecondary,
accentGold, accentPurple, accentBlue, accentGreen, accentRed },
effects: { neonGlow: true, particles: false }
}Define milestones that trigger at token, file, or line thresholds with visual effects (sparkle, banner, confetti, jackpot, mega) and sound cues.
Create agent personas from the Agent Picker or via the agentsAPI. Each agent gets a name, description, system prompt, and optional tool restrictions.
The app registers Electron-native tools that the AI agent can call: desktop notifications, clipboard read/write, system info, URL opening, and sound playback. Add your own in buildNativeTools() in copilot-service.ts.
| Layer | Technology |
|---|---|
| Runtime | Electron 40 |
| Bundler | Vite 7 + Electron Forge |
| Frontend | React 19, Tailwind CSS 4, Motion |
| AI | @github/copilot-sdk |
| Persistence | electron-store |
| Language | TypeScript (strict) |
MIT