Devzy — VS Code extension

Written in TypeScript (plain Node.js + the vscode API) and bundled with esbuild.

Run it

From the repo root: pnpm install
Open the repo root in VS Code and press F5 ("Run Devzy Extension"). This builds the extension in watch mode and opens an Extension Development Host window.
In that window: Ctrl+Shift+P → Devzy: New Session, or Devzy: Hello World / Devzy: Check API Status.

Home and data tools

Click the Devzy icon in the Activity Bar (or the Devzy button in any editor's title bar). Home lists every tool as a card, with a search box at the top. Each tool opens in its own editor tab, and open tool tabs are restored when VS Code reloads.

Tool	What it does
Text Compare	Paste any two texts (or open/drop files) and press Compare (`Ctrl+Enter`). Shows added, removed and changed lines side by side or unified, with the changed words highlighted. Options: ignore whitespace, ignore case, ignore blank lines, and "only changes" (unchanged runs fold into an expandable line). Copy diff copies a unified patch; Open in diff editor uses VS Code's diff view.
JSON Compare	Diff two JSON documents. Every difference is listed as added, removed, changed or type changed, with its path and both values. Ignore fields takes one pattern per line: `updatedAt` (any depth), `$.updatedAt` (top level only), `meta.requestId`, `items[].price`, `.id`, `_at`. There are presets for timestamps, IDs and request metadata, and a filter button on every row ignores that path. Options: ignore array order, match array items by a key such as `id` (suggested automatically when arrays look reordered), ignore case, trim strings, treat `null` as missing, number tolerance. Open in diff editor shows both sides in VS Code's diff view with keys sorted and ignored fields removed.
JSON Stringify / Parse	Stringify: a JSON value or a JavaScript object literal (unquoted keys, single quotes, comments, trailing commas, even `const x = {…};`) → an escaped JSON string, minified or indented, optionally as a JS `'…'` string. Parse: an escaped string → pretty JSON, unwrapping any number of stringify levels and (optionally) string fields that contain JSON. JS object → JSON converts a JavaScript literal to valid JSON. Shows sizes and escaping overhead.
JSON Size Analyzer	Exact byte size of every object, array and value in minified JSON, as a tree sorted by size with each node's share of its parent and of the total. Also shows size as loaded, minified, pretty-printed and gzipped, the largest values, totals per key name and per type, the share spent on key names, and repeated strings that could be deduplicated.
JSON Format & Convert	Validate (errors show line and column, with "Go to error"), format with 2 or 4 spaces or tabs, minify, sort keys. Convert JSON to YAML, TypeScript interfaces or CSV, CSV back to JSON, and escape or unescape JSON strings. Copy the output, open it in an editor, or save it. Also accepts JSON with comments and trailing commas, and JSON Lines.
Text Utilities	Live counts (characters, words, lines, sentences, UTF-8 bytes, reading time) and one-click transforms: lower/UPPER/Title/Sentence case, camelCase, PascalCase, snake_case, CONSTANT_CASE, kebab-case, dot.case, URL slug; sort (natural order), reverse, dedupe, shuffle, number, quote, join and split lines; trim and collapse whitespace; escape/unescape HTML and strip tags. Use as input chains transforms.
Regex Tester	JavaScript regular expressions with flag toggles, live match highlighting, a table of matches with their numbered and named groups, a replace preview (`$1`, `$<name>`, `$&`), and example patterns (email, URL, IPv4, UUID, ISO date…). Pasting `/…/gi` splits out the flags.
Generators	UUID v4 and v7 (time-ordered), up to 1000 at a time; passwords and random strings (choose character sets, hex, or URL-safe nanoid alphabet) with an entropy estimate; lorem ipsum words, sentences or paragraphs. Uses WebCrypto randomness.
Converters	Number bases (binary, octal, decimal, hex, base 36; any size), colors (HEX / RGB / HSL / HSV / Flutter / SwiftUI, with a color picker and WCAG contrast against white and black), and data sizes (KB vs KiB, MB vs MiB…).
File & Folder Size	Total size, file and folder counts, a folder tree sorted by size, sizes by file type and the 100 largest files. Choose files or folders, or measure the whole workspace. Skips `node_modules` and `.git` by default (configurable).
Encode / Decode	Base64 (standard or URL-safe), URL encoding, JWT decoding (header, payload, `iat`/`exp` as dates, expired or not; the signature is not verified), Unix timestamp ↔ date, and SHA-1/256/512 hashes.

Every tool can load input by pasting, Open file…, From editor (the last active editor, unsaved changes included) or by dropping a file (hold Shift while dropping). Everything runs locally.

Explorer right-click: select two files → Text Compare or JSON Compare. On a .json file → Analyze JSON Size or JSON Format & Convert. On any file or folder → Calculate File / Folder Size. In a JSON editor, the editor context menu has the same JSON actions.

Sessions (chat tabs)

Like Claude Code, every Devzy chat session opens in its own editor tab, and you can keep several open side by side.

New session: the 💬 button in any editor's title bar, Ctrl+Alt+D (Cmd+Alt+D on macOS), the + in a session's header, or Ctrl+Shift+P → Devzy: New Session
Past sessions: Devzy icon in the Activity Bar → Sessions. Click one to reopen it; hover for rename / delete. (Also Devzy: Open Session… from the command palette.)
Sessions are saved per workspace (workspaceState). Open session tabs are restored when VS Code reloads.
A session is named after its first prompt. Enter sends, Shift+Enter adds a new line, and ■ stops a reply.

Activity bar (right edge of every session tab)

A VS Code-style icon bar. The top group opens a panel inside the tab (click again or press Esc to close it):

Icon	What it does
＋ New session	Opens a new session tab
💬 Sessions	All sessions of the workspace: click to switch, 🗑 to delete
📎 Context	Attach files to your next message: active file, open editors, or search the workspace. Attached files show as chips above the input (also reachable with the 📎 in the input box)
Git changes	Branch, ahead/behind, staged and unstaged changes (badge = count). Click a file to open its diff, 📎 to attach it

The lower group jumps to VS Code views: Explorer, Search, Run and Debug, Terminal, Git Graph (offers to install the mhutchie.git-graph extension if it's missing), Extensions, and at the bottom Devzy settings.

There is no AI model connected yet: replies are a streamed placeholder. To plug one in, replace streamReply() in src/session/assistant.ts. It gets the conversation, the attached files' contents (context.files) and an AbortSignal, and yields text chunks.

Network monitor (live calls from local Node.js apps)

A DevTools-style Network tab for your backend: every outgoing HTTP call your local Node.js processes make (node:http, node:https, global fetch, and libraries built on them such as axios, got, node-fetch and most SDKs), live, with request/response headers and bodies (HTTPS decrypted, gzip/br decoded), timings, the process it came from, and a call stack that links to the exact line of your code that made the call.

Start it: Devzy: Start Network Capture, the 📡 button in a session tab's activity bar, or Devzy: Open Network Monitor → Start capturing.
Start (or restart) your app in a new VS Code terminal (npm run dev, node server.js, …), or use Open capture terminal. Node debug sessions from launch.json are captured too.
Running the app outside VS Code? Copy env for external terminal and paste it there first.

Toolbar: ● Recording (click to pause), Clear, Export HAR (save everything as a .har), and open a capture terminal. All the HAR viewer filters, sorting and detail tabs work on live data. The status bar shows 📡 n calls while capturing.

How it works: Devzy listens on 127.0.0.1 and adds --require <dist/network-agent.cjs> to NODE_OPTIONS (plus a port and a per-workspace token) for new terminals and Node debug sessions. The agent runs inside your app, hooks the HTTP APIs and streams each call to VS Code. It never changes request/response behaviour, never keeps the process alive, and does nothing if VS Code isn't listening.

Limits: Node.js processes only (not Python, Go, browsers…); apps that were already running must be restarted once; bodies are captured up to 1 MB each; the newest devzy.network.maxEntries calls (default 1000) are kept; the undici package's own request() API (not fetch) isn't hooked yet.

HAR Viewer

Upload a .har (HTTP Archive) file exported from browser DevTools and browse every network call in the order it happened.

Ways to open one:

Devzy icon in the Activity Bar → Home → HAR Viewer
Ctrl+Shift+P → Devzy: Upload / Open HAR File… (file picker)
Ctrl+Shift+P → Devzy: Open HAR Viewer, then click Upload HAR file… or drop a file on it
Right-click a .har file in the Explorer → Upload / Open HAR File…
Just open any .har file — it opens in the viewer by default (use Reopen Editor With… → Text Editor to see the raw JSON)

What you get:

Call list sorted by start time (first call = #1), with method, status, path/host, type, size, duration and a waterfall bar. Can be re-sorted (latest first, slowest, largest).
Filters: free-text search (/ to focus), resource-type chips (Fetch/XHR, Doc, JS, CSS, Img…), method and status-class dropdowns.
Detail tabs for the selected call: Overview, Headers (request + response, filterable), Payload (query params + request body), Response (JSON tree / raw, image preview, base64 decoding), Cookies, WebSocket Messages, and Timing (DNS/connect/TLS/TTFB/download phases).
Actions: Copy URL, Copy as cURL, copy any headers/body, open a body in a VS Code editor tab.
Keyboard: ↑/↓ or j/k, PageUp/PageDown, Home/End to move through calls; Esc clears search.

Package a .vsix

pnpm package:extension     # from repo root
code --install-extension apps/vscode-extension/devzy-vscode-0.0.1.vsix

Layout

Path	Purpose
`src/extension.ts`	Entry point: `activate()` registers commands
`src/session/`	Chat sessions: store, one editor tab per session, sidebar list, workspace context (editors/git/file search), assistant stub
`src/sessionView/`	Chat session UI (plain TS + DOM, bundled to `dist/session.js`); `sidebar.ts` is the right-hand activity bar + panels
`src/network/`	Network monitor: `agent.ts` (runs inside the user's Node.js app, bundled to `dist/network-agent.cjs`), `collector.ts` (localhost TCP server → HAR entries), `index.ts` (start/stop, terminal + debug env injection, panel, status bar), `protocol.ts` (agent ↔ collector messages)
`src/tools/`	Home sidebar view + data tool tabs (`index.ts`: commands, panels, serializer, file loading; `sizeScanner.ts`: folder walk)
`src/toolsView/`	Home + data tools UI (plain TS + DOM, bundled to `dist/tools.js`); `lib/` holds the DOM-free logic (diff, size, convert, encode)
`src/har/harViewer.ts`	HAR viewer: commands, custom editor for `*.har`, webview host
`src/webview/`	HAR viewer UI (plain TS + DOM, bundled to `dist/webview.js`)
`src/shared/messages.ts`	Message types shared by the extension host and the webview
`package.json` → `contributes`	Commands, settings, menus, views shown in VS Code
`esbuild.mjs`	Bundles the extension (`dist/extension.cjs`), the network agent (`dist/network-agent.cjs`) and the webviews (`dist/webview.js`, `dist/session.js`)
`media/`	Icons / webview assets (`harViewer.css`, `session.css`)

Later, for richer UI (sidebar panels), add a React webview — your React knowledge carries straight over.