-
Notifications
You must be signed in to change notification settings - Fork 3
Town View
phinn edited this page Jul 31, 2026
·
1 revision
🌐 Language: English | 中文
Town View is a game-style isometric visualization of your projects and agents. Instead of a flat list, your projects appear as houses and each agent session appears as a villager living in that house.
- Sidebar ⋯ menu → Town
- Switch between Town and Workbench with the toggle button in the top bar.
| Element | What it represents |
|---|---|
| House | A project. Colored by project name hash. Windows = agents. Lit windows = running agents. Chimney smoke = at least one agent working. |
| Villager | An agent session. Colored by engine: Kaios (gold #e8b339), Claude Code (orange #d97757), Codex (green #10a37f). |
| State animation |
idle (floating, eyes closed), working (bouncing + bubbles), error (shaking + red !), done (star pop). |
Town View supports two visual styles, switchable in settings (townStyle):
| Style | Description |
|---|---|
classic |
Clean isometric houses, low-saturation, multi-layer light/shadow |
minecraft |
Minecraft block-pixel art: oak planks, red brick, cobblestone textures. Villagers are Steve-style. |
Depending on the active theme, Town View shows different background decorations:
- SEED theme: Gundam SEED-style — mobile suit hangar, pilot figures, communication satellites
- Craft theme: 12 Minecraft entities as background decoration
- Other themes: clean isometric town
- Click a villager → side panel slides in showing: prompt, tool steps, output. You can send a new prompt, stop the agent, or jump to the full conversation.
- Incremental updates: agent events refresh only the affected villager — no full re-render.
- Remote nodes: remote MCP server nodes appear as cloud houses in the sky.
- Zero dependencies: pure SVG + CSS + DOM, no framework.
-
Renderer:
src/renderer/town.ts— builds SVG houses, villagers, animations. -
CSS:
src/renderer/town.css— isometric layout, animations, panel styles. -
Data source: same
getConversations()as Workbench — two views of the same data.
| File | Purpose |
|---|---|
src/renderer/town.ts |
Town view rendering, villager state, panel logic |
src/renderer/town.css |
Isometric layout, animations, panel, backdrop |
src/shared/i18n.ts |
town.* keys (19 keys × 4 languages) |
See also: Workbench (card-based overview), Engines (engine colors).