pablodelucca

Pixel Agents — Compressed Reference

AI community intermediate

SOURCE https://github.com/pablodelucca/pixel-agents

Description

VS Code extension with embedded React webview: pixel art office where AI agents (Claude Code terminals) are animated characters.

Installation

This entry records only its repository, not the path inside it, so there is no exact command to give. Open the source below and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

Repository README

This is the README for pablodelucca/pixel-agents, shared by 2 entries in this directory. It describes the repository, not this entry specifically.

Pixel Agents — Compressed Reference

VS Code extension with embedded React webview: pixel art office where AI agents (Claude Code terminals) are animated characters.

Architecture

src/                          — Extension backend (Node.js, VS Code API)
  constants.ts                — Extension-only constants (VS Code IDs, key names)
  extension.ts                — Entry: activate(), deactivate()
  PixelAgentsViewProvider.ts   — WebviewViewProvider, message dispatch, asset loading, server lifecycle
  assetLoader.ts              — PNG parsing, sprite conversion, catalog building, default layout loading
  agentManager.ts             — Terminal lifecycle: launch, remove, restore, persist
  configPersistence.ts        — User-level config file I/O (~/.pixel-agents/config.json), external asset directories
  layoutPersistence.ts        — User-level layout file I/O (~/.pixel-agents/layout.json), migration, cross-window watching
  fileWatcher.ts              — fs.watch + polling, readNewLines, /clear detection, terminal adoption
  transcriptParser.ts         — JSONL parsing: tool_use/tool_result → webview messages
  timerManager.ts             — Waiting/permission timer logic
  types.ts                    — Shared interfaces (AgentState, PersistedAgent)

server/                       — Standalone server (Node.js, no VS Code deps except types)
  src/
    server.ts                 — HTTP server: hook endpoint, health check, server.json discovery
    hookEventHandler.ts       — Routes hook events to agents, buffers pre-registration events
    constants.ts              — All timing/scanning constants (shared by extension + server)
    providers/file/
      claudeHookInstaller.ts  — Install/uninstall hooks in ~/.claude/settings.json
      hooks/claude-hook.ts    — Hook script: reads stdin, POSTs to server (bundled to CJS by esbuild)
  __tests__/                  — Vitest test suite
    server.test.ts            — HTTP server lifecycle, auth, hooks, server.json
    hookEventHandler.test.ts  — Event routing, buffering, timer cancellation
    claudeHookInstaller.test.ts — Hook install/uninstall in settings.json
    claude-hook.test.ts       — Integration: spawns real hook script process

webview-ui/src/               — React + TypeScript (Vite)
  constants.ts                — All webview magic numbers/strings (grid, animation, rendering, camera, zoom, editor, game logic, notification sound)
  notificationSound.ts        — Web Audio API chime on agent turn completion, with enable/disable
  App.tsx                     — Composition root, hooks + components + EditActionBar
  hooks/
    useExtensionMessages.ts   — Message handler + agent/tool state
    useEditorActions.ts       — Editor state + callbacks
    useEditorKeyboard.ts      — Keyboard shortcut effect
  components/
    BottomToolbar.tsx          — + Agent, Layout toggle, Settings button
    ZoomControls.tsx           — +/- zoom (top-right)
    SettingsModal.tsx          — Centered modal: settings, e