[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-78677":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},78677,"pixel-agents","pixel-agents-hq\u002Fpixel-agents","pixel-agents-hq","Pixel office.",null,"TypeScript",8170,1273,41,26,0,75,332,468,225,40.32,"MIT License",false,"main",true,[],"2026-06-12 02:03:48","\u003Ch1 align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fdiscussions\">\n        \u003Cimg src=\"webview-ui\u002Fpublic\u002Fbanner.png\" alt=\"Pixel Agents\">\n    \u003C\u002Fa>\n\u003C\u002Fh1>\n\n\u003Ch2 align=\"center\" style=\"padding-bottom: 20px;\">\n  The game interface where AI agents build real things\n\u003C\u002Fh2>\n\n\u003Cdiv align=\"center\" style=\"margin-top: 25px;\">\n\n[![version](https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fgist.githubusercontent.com%2Fpablodelucca%2F3cd28398fa4a2c0a636e1d51d41aee39%2Fraw%2Fversion.json)](https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Freleases)\n[![marketplaces](https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fgist.githubusercontent.com%2Fpablodelucca%2F3cd28398fa4a2c0a636e1d51d41aee39%2Fraw%2Finstalls.json)](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=pablodelucca.pixel-agents)\n[![stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fpixel-agents-hq\u002Fpixel-agents?logo=github&color=0183ff&style=flat)](https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fstargazers)\n[![license](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fpixel-agents-hq\u002Fpixel-agents?color=0183ff&style=flat)](https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fblob\u002Fmain\u002FLICENSE)\n[![good first issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fgood%20first%20issue?color=7057ff&label=good%20first%20issues)](https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fissues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)\n\n\u003C\u002Fdiv>\n\n\u003Cdiv align=\"center\">\n\u003Ca href=\"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=pablodelucca.pixel-agents\">🛒 VS Code Marketplace\u003C\u002Fa> • \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fdiscussions\">💬 Discussions\u003C\u002Fa> • \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fissues\">🐛 Issues\u003C\u002Fa> • \u003Ca href=\"CONTRIBUTING.md\">🤝 Contributing\u003C\u002Fa> • \u003Ca href=\"CHANGELOG.md\">📋 Changelog\u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Cbr\u002F>\n\nPixel Agents turns multi-agent AI systems into something you can actually see and manage. Each agent becomes a character in a pixel art office. They walk around, sit at their desk, and visually reflect what they are doing — typing when writing code, reading when searching files, waiting when it needs your attention.\n\nRight now it works as a VS Code extension with Claude Code. The vision though, is a fully agent-agnostic, platform-agnostic interface for orchestrating any AI agents, deployable anywhere.\n\nThis is the source code for the free Pixel Agents extension for VS Code — install from the [VS Code Marketplace](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=pablodelucca.pixel-agents) or [Open VSX](https:\u002F\u002Fopen-vsx.org\u002Fextension\u002Fpablodelucca\u002Fpixel-agents) with the full furniture catalog included.\n\n![Pixel Agents screenshot](webview-ui\u002Fpublic\u002FScreenshot.jpg)\n\n## Features\n\n- **One agent, one character** — every Claude Code terminal gets its own animated character\n- **Live activity tracking** — characters animate based on what the agent is actually doing (writing, reading, running commands)\n- **Office layout editor** — design your office with floors, walls, and furniture using a built-in editor\n- **Speech bubbles** — visual indicators when an agent is waiting for input or needs permission\n- **Sound notifications** — optional chime when an agent finishes its turn\n- **Sub-agent visualization** — Task tool sub-agents spawn as separate characters linked to their parent\n- **Persistent layouts** — your office design is saved and shared across VS Code windows\n- **External asset directories** — load custom or third-party furniture packs from any folder on your machine\n- **Diverse characters** — 6 diverse characters. These are based on the amazing work of [JIK-A-4, Metro City](https:\u002F\u002Fjik-a-4.itch.io\u002Fmetrocity-free-topdown-character-pack).\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"webview-ui\u002Fpublic\u002Fcharacters.png\" alt=\"Pixel Agents characters\" width=\"320\" height=\"72\" style=\"image-rendering: pixelated;\">\n\u003C\u002Fp>\n\n## Requirements\n\n- VS Code 1.105.0 or later\n- [Claude Code CLI](https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code) installed and configured\n- **Platform**: Windows, Linux, and macOS are supported\n\n## Getting Started\n\nIf you just want to use Pixel Agents, the easiest way is to download the [VS Code extension](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=pablodelucca.pixel-agents). If you want to play with the code, develop, or contribute, then:\n\n### Install from source\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents.git\ncd pixel-agents\nnpm install\ncd webview-ui && npm install && cd ..\nnpm run build\n```\n\nThen press **F5** in VS Code to launch the Extension Development Host.\n\n### Usage\n\n1. Open the **Pixel Agents** panel (it appears in the bottom panel area alongside your terminal)\n2. Click **+ Agent** to spawn a new Claude Code terminal and its character. Right-click for the option to launch with `--dangerously-skip-permissions` (bypasses all tool approval prompts)\n3. Start coding with Claude — watch the character react in real time\n4. Click a character to select it, then click a seat to reassign it\n5. Click **Layout** to open the office editor and customize your space\n\n## Layout Editor\n\nThe built-in editor lets you design your office:\n\n- **Floor** — Full HSB color control\n- **Walls** — Auto-tiling walls with color customization\n- **Tools** — Select, paint, erase, place, eyedropper, pick\n- **Undo\u002FRedo** — 50 levels with Ctrl+Z \u002F Ctrl+Y\n- **Export\u002FImport** — Share layouts as JSON files via the Settings modal\n\nThe grid is expandable up to 64×64 tiles. Click the ghost border outside the current grid to grow it.\n\n### Office Assets\n\nAll office assets (furniture, floors, walls) are now **fully open-source** and included in this repository under `webview-ui\u002Fpublic\u002Fassets\u002F`. No external purchases or imports are needed — everything works out of the box.\n\nEach furniture item lives in its own folder under `assets\u002Ffurniture\u002F` with a `manifest.json` that declares its sprites, rotation groups, state groups (on\u002Foff), and animation frames. Floor tiles are individual PNGs in `assets\u002Ffloors\u002F`, and wall tile sets are in `assets\u002Fwalls\u002F`. This modular structure makes it easy to add, remove, or modify assets without touching any code.\n\nTo add a new furniture item, create a folder in `webview-ui\u002Fpublic\u002Fassets\u002Ffurniture\u002F` with your PNG sprite(s) and a `manifest.json`, then rebuild. The asset manager (`scripts\u002Fasset-manager.html`) provides a visual editor for creating and editing manifests.\n\nTo use furniture from an external directory, open Settings → **Add Asset Directory**. See [docs\u002Fexternal-assets.md](docs\u002Fexternal-assets.md) for the full manifest format and how to use third-party asset packs.\n\nCharacters are based on the amazing work of [JIK-A-4, Metro City](https:\u002F\u002Fjik-a-4.itch.io\u002Fmetrocity-free-topdown-character-pack).\n\n## How It Works\n\nPixel Agents watches Claude Code's JSONL transcript files to track what each agent is doing. When an agent uses a tool (like writing a file or running a command), the extension detects it and updates the character's animation accordingly. No modifications to Claude Code are needed — it's purely observational.\n\nThe webview runs a lightweight game loop with canvas rendering, BFS pathfinding, and a character state machine (idle → walk → type\u002Fread). Everything is pixel-perfect at integer zoom levels.\n\n## Tech Stack\n\n- **Extension**: TypeScript, VS Code Webview API, esbuild\n- **Webview**: React 19, TypeScript, Vite, Canvas 2D\n\n## Known Limitations\n\n- **Agent-terminal sync** — the way agents are connected to Claude Code terminal instances is not super robust and sometimes desyncs, especially when terminals are rapidly opened\u002Fclosed or restored across sessions.\n- **Heuristic-based status detection** — Claude Code's JSONL transcript format does not provide clear signals for when an agent is waiting for user input or when it has finished its turn. The current detection is based on heuristics (idle timers, turn-duration events) and often misfires — agents may briefly show the wrong status or miss transitions.\n- **Linux\u002FmacOS tip** — if you launch VS Code without a folder open (e.g. bare `code` command), agents will start in your home directory. This is fully supported; just be aware your Claude sessions will be tracked under `~\u002F.claude\u002Fprojects\u002F` using your home directory as the project root.\n\n## Troubleshooting\n\nIf your agent appears stuck on idle or doesn't spawn:\n\n1. **Debug View** — In the Pixel Agents panel, click the gear icon (Settings), then toggle **Debug View**. This shows connection diagnostics per agent: JSONL file status, lines parsed, last data timestamp, and file path. If you see \"JSONL not found\", the extension can't locate the session file.\n2. **Debug Console** — If you're running from source (Extension Development Host via F5), open VS Code's **View > Debug Console**. Search for `[Pixel Agents]` to see detailed logs: project directory resolution, JSONL polling status, path encoding mismatches, and unrecognized JSONL record types.\n\n## Where This Is Going\n\nThe long-term vision is an interface where managing AI agents feels like playing the Sims, but the results are real things built.\n\n- **Agents as characters** you can see, assign, monitor, and redirect, each with visible roles (designer, coder, writer, reviewer), stats, context usage, and tools.\n- **Desks as directories** — drag an agent to a desk to assign it to a project or working directory.\n- **An office as a project** — with a Kanban board on the wall where idle agents can pick up tasks autonomously.\n- **Deep inspection** — click any agent to see its model, branch, system prompt, and full work history. Interrupt it, chat with it, or redirect it.\n- **Token health bars** — rate limits and context windows visualized as in-game stats.\n- **Fully customizable** — upload your own character sprites, themes, and office assets. Eventually maybe even move beyond pixel art into 3D or VR.\n\nFor this to work, the architecture needs to be modular at every level:\n\n- **Platform-agnostic**: VS Code extension today, Electron app, web app, or any other host environment tomorrow.\n- **Agent-agnostic**: Claude Code today, but built to support Codex, OpenCode, Gemini, Cursor, Copilot, and others through composable adapters.\n- **Theme-agnostic**: community-created assets, skins, and themes from any contributor.\n\nWe're actively working on the core module and adapter architecture that makes this possible. If you're interested to talk about this further, please visit our [Discussions Section](https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fdiscussions).\n\n## Community & Contributing\n\nUse **[Issues](https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fissues)** to report bugs or request features. Join **[Discussions](https:\u002F\u002Fgithub.com\u002Fpixel-agents-hq\u002Fpixel-agents\u002Fdiscussions)** for questions and conversations.\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for instructions on how to contribute.\n\nPlease read our [Code of Conduct](CODE_OF_CONDUCT.md) before participating.\n\n## Supporting the Project\n\nIf you find Pixel Agents useful, consider supporting its development:\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fpablodelucca\">\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSponsor-GitHub-ea4aaa?logo=github\" alt=\"GitHub Sponsors\">\n\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fko-fi.com\u002Fpablodelucca\">\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSupport-Ko--fi-ff5e5b?logo=ko-fi\" alt=\"Ko-fi\">\n\u003C\u002Fa>\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=pixel-agents-hq\u002Fpixel-agents&type=Date)](https:\u002F\u002Fwww.star-history.com\u002F?repos=pixel-agents-hq%2Fpixel-agents&type=date&legend=bottom-right)\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n","Pixel Agents 是一个将多智能体AI系统可视化管理的游戏界面。该项目通过将每个AI代理转换为像素艺术办公室中的角色，使得用户能够直观地看到并管理这些代理的行为，例如打字、阅读或等待等。采用TypeScript编写，支持作为VS Code扩展使用，并计划发展成为与平台无关的通用AI代理管理界面。其核心功能包括为每个代理分配独特的动画角色、实时活动追踪以及可自定义的办公室布局编辑器。适用于需要对多个AI代理进行协调和监控的应用场景，特别是对于开发者和研究人员来说，它提供了一种新颖且直观的方式来理解和控制复杂的AI系统行为。",2,"2026-06-11 03:57:09","high_star"]