Skip to content

PWA And VS Code

Jump to bottom
wody edited this page May 24, 2026 · 4 revisions

PWA & VS Code extension

Introduced in v0.39.0. Two independent surfaces for using vibe-coder outside a regular browser tab.

PWA (Progressive Web App)

The admin UI is now a installable PWA. Mobile browsers offer "Add to Home Screen"; desktop Chrome / Edge / Safari offer "Install app". The installed app runs in a standalone window without browser chrome.

What's served

  • GET /static/manifest.json — name / short_name / start_url / display=standalone / theme_color #0b0d12 / icon 512x512 maskable. Linked from <head> via <link rel="manifest">.
  • GET /static/sw.js — minimal service worker registered by an inline <script> in AdminTemplates.shell.

Service worker strategy

const CACHE_VERSION = 'vibe-coder-v0.39.0';

// install: precache STATIC_ASSETS
// activate: drop older caches
// fetch:
//   GET /api/*  /ws/*  /admin/*  → network only (live state)
//   GET /static/*                → cache-first (with opportunistic fill)
//   other                        → default (browser cache)

This means:

  • Static CSS / JS / icons load offline if you previously visited the page.
  • SSR pages always hit the network — they reflect live state, never stale.
  • API and WebSocket calls bypass cache entirely — no risk of a stale response shipping.

Cache invalidation

CACHE_VERSION is bumped on each release. The activate event drops any cache not matching the current name, so users get the fresh static assets after one navigation.

Mobile install flow

  1. Open the server in mobile Chrome / Safari.
  2. Browser shows an "Add to Home Screen" prompt (or use the share menu).
  3. Tap the icon on home screen → opens in standalone mode (no URL bar).

If your server is on http:// (LAN), Chrome refuses to install (PWA requires HTTPS or localhost). For LAN-only use, the "Add to Home Screen" bookmark fallback still works.

Limits

  • No background sync, no Web Push in this minor — both planned separately (see roadmap).
  • No offline form submissions — the UI assumes server reachability; offline use means read-only on previously-loaded static assets.

VS Code extension (vscode-extension/)

Single-file TypeScript MVP. Talk to a running vibe-coder-server from VS Code's command palette.

Install (dev mode)

cd vscode-extension
npm install        # only @types/vscode + typescript
npm run compile    # tsc → out/extension.js
# in VS Code: F5  →  opens Extension Development Host

Not yet on the Marketplace. vsce package produces a .vsix for side-loading once you're ready.

Commands (Ctrl/Cmd+Shift+P)

Command Behavior
Vibe Coder: Login Interactive — server URL + username + password (+ optional TOTP). Handles totp_required automatically.
Vibe Coder: Server status GET /api/server/status → info notification
Vibe Coder: List projects Quick-pick of registered projects
Vibe Coder: Send prompt to project console Project quick-pick + prompt input → POST /…/console/prompt
Vibe Coder: Trigger debug build Project quick-pick → POST /…/build/debug

Settings

Key Default Notes
vibeCoder.serverUrl http://localhost:17880 Set via Login command or in Settings UI
vibeCoder.token (empty) Set automatically by Login command (ConfigurationTarget.Global)

Both persist to the user's global settings.json so they survive across workspaces.

Implementation notes

  • No runtime npm dependencies. Only @types/vscode + typescript for compile.
  • HTTP via Node built-ins — http and https modules. No axios, no node-fetch.
  • Single file — src/extension.ts. Roughly 150 lines including the 5 command handlers.

What's missing (roadmap)

  • WebSocket subscribe — live console / build log following in a VS Code output channel.
  • Status bar — current Claude usage % at a glance.
  • TreeView sidebar — browse projects / builds without quick-pick.
  • Webview — render the project console inline.
  • Marketplace publish — vsce package + vsce login + vsce publish.

The current shape is intentionally minimal — adds value without a big ongoing maintenance burden until there's clear demand for the heavier features.

Related

  • [[CLI (vibe)|CLI]] — bash MVP with overlapping coverage. Use this from terminals; use VS Code extension from inside the editor.
  • REST API Reference — both PWA and the VS Code extension are thin wrappers over the same REST endpoints.

Clone this wiki locally