coworking-agents 0.1.0 → 0.2.1

package/README.md

@@ -1,31 +1,37 @@
 <p align="center">
-  <img src="docs/logo.png" width="128" alt="coworking-agents logo">
+  <img src="https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/logo.png" width="128" alt="coworking-agents logo">
 </p>
 
 <h1 align="center">coworking-agents</h1>
 
-<p align="center"><b>A live pixel-art office for your AI coding agents.</b><br>Claude Code · Codex · zero dependencies · local only</p>
+<p align="center"><b>A live pixel-art office for your AI coding agents.</b><br>Claude Code · Codex · walk around · trophies · zero dependencies · local only</p>
+
+<p align="center"><a href="https://www.npmjs.com/package/coworking-agents"><img src="https://img.shields.io/npm/v/coworking-agents" alt="npm"></a></p>
 
 **A live pixel-art office for your AI coding agents.** Every open session (Claude Code, Codex, …) becomes a person at a desk. At a glance you see who is working, who needs you (and what they are asking), whose turn it is, and which sessions are editing the same checkout, even across different AIs.
 
-![The office by day](docs/office-day.png)
+![The office by day](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/office-day.png)
 
-![The office at night: monitors and desk lamps light the room](docs/office-night.png)
+![The office at night: monitors and desk lamps light the room](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/office-night.png)
 
 ## Tour
 
 | | |
 |---|---|
-| ![Top bar](docs/top-bar.png) | **Top bar.** One HUD with the counters and the usage meters; the counter below is where agents waiting on you sit (4 per office, **+** slides to the next). |
-| ![Talk](docs/talk.png) | **Talk.** Click a waiting agent: it says what it wants at its desk. Reply right there (sent to its Terminal/iTerm tab) or jump to the terminal. |
-| ![Camera](docs/camera.png) | **Camera.** Click an agent and the camera flies in to its desk with a spotlight; the side panel shows everything about the session. |
-| ![Panel](docs/panel.png) | **Agent panel.** Now, last request and reply, last-hour timeline, today's numbers, tokens, context, files, subagents, certificates. |
-| ![Usage](docs/usage.png) | **Usage report.** Tokens per day for 14 days, all-time totals per AI and per model, rate-limit windows with reset times. |
-| ![Work site](docs/work-site.png) | **Arrivals and departures.** A new session gets its room boarded up and built (planks, dust, caution tape); a closed one walks out and its desk is demolished. |
-| ![Building](docs/building.png) | **Building view.** Many agents? Floors, each a live thumbnail. |
-| ![House wall](docs/house-wall.png) | **House wall.** Podium of the most used skills, installed skills, MCP servers and plugins. |
-| ![Night](docs/office-night.png) | **Day and night.** Lighting follows your clock; a wall switch turns the ceiling lights on or off; the rest room stays dark. |
-| ![Mobile](docs/mobile.png) | **Phone.** Works on small screens too. |
+| ![Top bar](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/top-bar.png) | **Top bar.** One HUD with the counters and the usage meters; the counter below is where agents waiting on you sit (4 per office, **+** slides to the next). |
+| ![Talk](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/talk.png) | **Talk.** Click a waiting agent: it says what it wants at its desk. Reply right there (typed into its Terminal/iTerm tab for Claude Code and Codex CLI) or jump to it. |
+| ![Camera](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/camera.png) | **Camera.** Click an agent and the camera flies in to its desk with a spotlight; the side panel shows everything about the session. |
+| ![Panel](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/panel.png) | **Agent panel.** Now, last request and reply, last-hour timeline, today's numbers, tokens, context, files, subagents, certificates. |
+| ![Usage](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/usage.png) | **Usage report.** Tokens per day for 14 days, all-time totals per AI and per model, rate-limit windows with reset times. |
+| ![Work site](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/work-site.png) | **Arrivals and departures.** A new session gets its room boarded up and built (planks, dust, caution tape); a closed one walks out and its desk is demolished. |
+| ![Achievements](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/achievements.png) | **Achievements.** 74 of them, five tiers each, coins for every tier, the agent of the month on top. |
+| ![Paper](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/paper.png) | **The Office Times.** Your week in headlines, written from measured history. |
+| ![Trophy room](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/trophy-room.png) | **Trophy room.** Glass cabinets with lit shelves, legend trophies in a glass case under spotlights, a crown under a dome for Legend of Legends. Click a trophy for its card. |
+| ![Christmas](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/christmas.png) | **Holidays.** Lights, snow and Santa hats at Christmas; pumpkins, bats and witch hats at Halloween; flags at Festa Junina. |
+| ![Building](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/building.png) | **Building view.** Many agents? Floors, each a live thumbnail. |
+| ![House wall](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/house-wall.png) | **House wall.** Podium of the most used skills, installed skills, MCP servers and plugins. |
+| ![Night](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/office-night.png) | **Day and night.** Lighting follows your clock; a wall switch turns the ceiling lights on or off; the rest room stays dark. |
+| ![Mobile](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/mobile.png) | **Phone.** Works on small screens too. |
 
 ## Why
 
@@ -40,9 +46,10 @@ npx coworking-agents --private    # hide names, branches, repos, titles and path
 npx coworking-agents --port 5000  # pick a port (default 4777; falls back to a free one if taken)
 npx coworking-agents --no-open    # don't open the browser
 npx coworking-agents --json       # print one snapshot of the state as JSON and exit
+npx coworking-agents@latest       # make sure you run the newest release (npx caches the last one)
 ```
 
-Requires Node 18+. Zero dependencies.
+Requires Node 18+. Zero dependencies. When a newer release is on npm, the terminal and the office tell you once (`--no-update-check` or `COWORKING_NO_UPDATE_CHECK=1` turns that off).
 
 ### Access token
 
@@ -78,7 +85,7 @@ Running `npx coworking-agents` a second time reuses the office that is already r
   - **Nap corner:** sessions idle for a long time (20+ min) lie down on bean bags.
 - **Floors and Building view.** With many rooms the office gains floors, each with its own shared wing. A floor picker appears at the top, and **Building view** shows every floor as a live thumbnail with counts of who is working and who needs you; click one to go there.
 
-![Building view: every floor as a live thumbnail](docs/building.png)
+![Building view: every floor as a live thumbnail](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/building.png)
 
 ## States
 
@@ -99,7 +106,7 @@ Running `npx coworking-agents` a second time reuses the office that is already r
 
 Click a person for the side panel: repository, branch, worktree, model, context size, turns, recent actions, subagents, most-used tools and certificates.
 
-![Side panel for one agent](docs/panel.png)
+![Side panel for one agent](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/panel.png)
 
 ## Help toasts
 
@@ -109,36 +116,76 @@ Each toast has **Show** (switches floor, opens the panel and scrolls to the desk
 
 Agents away from their desks (kitchen, meeting room, nap corner) carry a name tag over their heads. Optional sound and system notifications can be turned on from the top bar.
 
-## A living office
+## Working with your agents
+
+- **Talk and reply:** click a waiting agent to read what it wants; type the next instruction and send it straight to its Terminal/iTerm tab (Claude Code, and Codex CLI when its terminal process can be matched), or copy it and jump there. Sessions in the Claude or Codex desktop apps can't be typed into: the button copies and opens the app.
+- **Answer questions:** a single-choice question from Claude Code can be answered by clicking an option.
+- **Compact:** when a Claude session that finished its turn passes 75% of its context window, a **Compact** button shows over it and sends `/compact` to its terminal tab (macOS).
+- **Alerts:** a toast and a system notification when a rate limit crosses 80% / 95%, a context passes 85%, or an agent has waited 5 minutes for you; chiptunes for requests, done work, arrivals and departures.
+- **Same file, same repo:** a red banner when two sessions edit the same file or checkout.
+- **Git on the door:** each room sign shows uncommitted files (●), commits to push (↑) and to pull (↓), read with `git status` in the background (no fetch).
+- **History and daily report:** the last 24 hours of arrivals, departures, requests and finished work; a daily report with active time, tools and files that copies as Markdown for a standup; your reply times.
+- **Estimated cost:** what the tokens would cost at official API list prices (table in `src/prices.js`, dated; override in `~/.config/coworking-agents/prices.json`), priced per reply with Claude's cache-write split. Unknown models are never guessed. On a subscription this is not what you pay.
+- **Focus mode:** sounds and system notifications pause for 25 or 50 minutes.
+- **Replay:** scrub or play back the last hour.
+
+## Walk around (Gather-style)
+
+You're in the office too, with a **YOU** tag. **WASD** or the arrow keys walk (hold **Shift** to run), a click on the floor walks you there through the doors, and walls stop you. Near an agent, a prop or a door, **Enter** talks, opens or enters. Turn it off in the ☰ menu.
+
+## The game room and the trophy room
+
+![The game room](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/game-room.png)
+
+Under the team rooms there's a game room with four doors: arcades, foosball, a pool table, an aquarium, a water cooler and bean bags, where idle agents hang out. Its props open the reports: the **newspaper rack** (the weekly paper), the **vending machine** (the shop), the **easel** (customise), the **guestbook** (history) and the **cork board** (today's date, files edited today, the daily report).
+
+A marble portal leads to the **trophy room**, its own screen: legends with wings and a flame in lit niches between marble columns, a stained-glass arch over the crown of **Legend of Legends**, every other trophy under its own glass dome or in the side cabinets, locked ones as silhouettes. Each tier has its own award (bronze cup, silver star cup, gold ruby cup, diamond crystal, winged legend). Click one for its card.
+
+![The trophy room](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/trophy-room.png)
 
-- **Certificates and achievements:** each desk's partition gets framed certificates for the skills and MCP servers that session used, plus achievements such as *Hundred tools*, *Thousand tools*, *Marathoner* (4h+), *Immortal* (24h+), *Team lead*, *Elephant memory* (500k+ context tokens), *Long talk*, *Terminal master*, *Writer* and *Researcher*. Hover to read them.
-- **Whiteboard:** a live bar chart of who is working, needs you, has the turn, or is asleep.
-- **Cork board:** skills installed on the machine and the most-used ones, per AI, plus MCP servers and plugins.
-- **Day/night lighting:** the light follows your local time (day, dusk, night with monitors and lamps glowing).
-- **The office cat** wanders around and naps next to sleeping agents.
-- **Languages:** English and Brazilian Portuguese, picked from your browser and switchable in the top bar.
+## Achievements, coins and the shop
 
-<p align="center"><img src="docs/mobile.png" alt="The office on a phone" width="300"></p>
+- **74 achievements**, each with five tiers from bronze to legend, measured from your history (hours, actions, streaks, nights, Friday evenings, weeks and months with work, tokens, cache, models, cost), the live office (parallel sessions, subagents, giant contexts, commits and pushes, repos and branches, quick answers, clean desks) and what you do in the office (walking, talking, the radio, the shop, customising). A few are secret.
+- **Legend of Legends** when every achievement is at legend.
+- **Coins:** each tier pays 10 to 50 coins (the super achievement 1000). Spend them in the **shop** on decor that appears in the office: corridor plants, a rug, a COFFEE neon, floor lamps, a disco ball, a golden statue of the agent of the month, a piano, a fountain.
+- **Agent of the month:** a framed portrait on the wall of the conversation with the most active time this month; the top 5 are in the achievements tab.
+- **The weekly paper**, *The Office Times*, tells your week in headlines, all from measured data.
+- **Progress file:** achievements, coins, purchases, avatars and settings live in `~/.config/coworking-agents/progress.json` (mode `0600`). No account needed: the app runs on your machine, so the progress is yours.
 
+## Make it yours
 
-## Shortcuts and tools
+![Customise](https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/customise.png)
+
+☰ → **Customise** has 13 options: the office name (on a plaque by the elevator and in the top bar), your own look, floor (wood, dark wood, carpet, concrete, tiles, checker, marble, grass), walls (10 colours), room carpets (5 palettes), desks (5), the window view (city, beach, mountains, forest, space), the sky (automatic, always day, sunset, always night), lighting (natural, warm, cool, neon), the mascot (cat, dog, robot, fox, penguin, bunny), plants (normal or jungle), the radio station and the accent colour. The die next to an agent's face in its panel gives that agent a new look.
+
+## A living office
+
+- **Life:** after a long task an agent goes for a coffee or celebrates with confetti; at lunch idle agents eat a sandwich; idle ones play ping-pong and foosball or chat at the water cooler; a request waiting 2+ minutes rings the desk phone; uncommitted files pile up as paper on the desk; the desk plant grows with the session's age; a week-old session gets a cake; a room where everyone works hangs a do-not-disturb sign; after 6pm idle rooms turn their lights off; a janitor mops at night; Friday evenings bring pizza; newcomers step out of the elevator next to a punch clock; long-idle agents think funny thoughts.
+- **Sky, seasons and weather:** the sun crosses the windows, the moon shows tonight's real phase, city lights follow the hour, leaves and petals fall by season (hemisphere from your time zone). Real weather is opt-in: click a window and the browser fetches it from Open-Meteo (coordinates rounded to ~1 km); rain slides down the glass.
+- **Chiptune radio** (off by default): the station follows the AI working the most, the beat follows the office mood; an **ON AIR** sign lights up while anyone works.
+- **Holidays:** Christmas, New Year, Halloween, Festa Junina, Carnaval and the office's birthday decorate the room and put hats on everyone (`E` turns decor off).
+- **Pets:** the mascot visits whoever has waited on you the longest and likes being petted; a dog joins at 8 achievements at gold, a parrot at 16.
+- **Certificates** for the skills and MCP servers each session used hang on its partition.
+- **Office photo:** ☰ → Office photo saves the scene as a PNG. And something happens if you click the `</>` neon three times.
+- **Languages:** English and Brazilian Portuguese.
+
+<p align="center"><img src="https://raw.githubusercontent.com/ChaconLucas/coworking-agents/main/docs/mobile.png" alt="The office on a phone" width="300"></p>
+
+## Shortcuts
 
 | Key | Does |
 |---|---|
 | `1`–`9` | open the n-th agent |
 | `N` | next agent that needs you (opens its talk modal) |
 | `/` | quick search by name, title, repository or state |
-| `R` / `D` | usage report / daily report |
-| `H` | replay the last hour (scrub or play) |
+| `R` / `T` / `G` / `C` | usage report / daily report (today) / history / achievements |
+| WASD or arrows, Shift, Enter | walk, run, interact with what's near you |
+| `F` | focus mode (25 min, again 50, again off) |
+| `H` | replay the last hour |
 | `L` | ceiling lights on/off |
+| `E` | holiday decor on/off |
 | `B` | building view (when there are floors) |
 
-- **Compact:** when a Claude session's context passes 75% and it finished its turn, a **Compact** button shows over it; it sends `/compact` to that session's terminal tab (macOS).
-- **Alerts:** a toast and a system notification when a rate limit crosses 80% / 95% or a context passes 85%; distinct chiptunes for requests, done, arrivals and departures.
-- **Real weather (opt-in):** click a window; the browser asks for your location and, if you allow it, fetches the current weather from Open-Meteo directly (coordinates rounded to ~1 km). Off by default; nothing goes through the server.
-- **Same file:** a red banner when two sessions edit the same file, not just the same repository.
-- **New certificates** are hung on the partition with a little animation.
-
 ## Platforms
 
 | | macOS | Linux | Windows |
@@ -147,20 +194,40 @@ Agents away from their desks (kitchen, meeting room, nap corner) carry a name ta
 | Go to terminal | exact tab (Terminal, iTerm2) | window (needs `xdotool` or `wmctrl`) | window |
 | Reply / answer / compact from the office | ✓ | copy and go | copy and go |
 
-Linux and Windows support is written against their process tools but has not been tested on real machines yet; reports welcome.
+Linux and Windows support is written against their process tools but has not been tested on real machines yet; reports welcome. See the [roadmap](https://github.com/ChaconLucas/coworking-agents/blob/main/ROADMAP.md) for what's waiting on testing and what's next.
 
 ## Privacy and security
 
 - **Read-only.** No hooks, nothing installed into the AIs, no configuration changed.
-- **No tokens spent.** It never calls a model or any network service.
+- **No tokens spent.** It never calls a model. The only network calls are the update check (asks npm for the latest version number, nothing else is sent; `--no-update-check` turns it off) and, only if you turn on real weather, the forecast your browser fetches from Open-Meteo.
 - **Local only.** The server binds to `127.0.0.1`.
 - **Host allowlist.** Requests whose `Host` header isn't `127.0.0.1`, `localhost` or `[::1]` are rejected, which blocks DNS-rebinding attacks.
 - **Access token.** Every request needs the per-run token cookie (see [Access token](#access-token)). The "Go to terminal" endpoint additionally requires a custom header and a local origin.
-- **Strict CSP.** `default-src 'self'`, no frames, no external scripts, fonts or connections.
+- **Strict CSP.** `default-src 'self'`, no frames, no external scripts or fonts; the only outside connection allowed is Open-Meteo for the opt-in weather.
 - **Never reads credentials.** Not Claude Code's `*.key` files, not Codex's `auth.json`. From `~/.claude.json` it reads only `skillUsage`, `pluginUsage` and `mcpServers`.
 - **Secrets are masked.** Tokens, passwords, API keys and `Bearer` values inside commands are replaced with `•••` before display.
 - **`--private` mode** for screen sharing hides agent names, branches, repo names (replaced by aliases like `repo A`), session titles, paths, file names, questions, skills, MCP names and the host name.
 
+## Claude rate limits and context window
+
+Claude Code only hands these numbers to your **status line** script, so the office reads a copy that the script saves. Add this to your status line (Python; `d` is the JSON Claude Code sends on stdin):
+
+```python
+import os, json, time
+base = os.path.expanduser('~/.config/coworking-agents'); os.makedirs(base, exist_ok=True)
+rl = d.get('rate_limits') or {}
+if rl:
+    json.dump({'at': int(time.time() * 1000), 'five_hour': rl.get('five_hour'), 'seven_day': rl.get('seven_day')}, open(base + '/claude-limits.json', 'w'))
+size = (d.get('context_window') or {}).get('context_window_size')
+if size and d.get('session_id'):
+    p = base + '/claude-context.json'
+    try: m = json.load(open(p))
+    except Exception: m = {}
+    m[d['session_id']] = size; json.dump(dict(list(m.items())[-200:]), open(p, 'w'))
+```
+
+Without it, the context percentage shows only once it is measurable (a reply past 200k tokens proves a 1M window); until then the panel shows the token count and "window size unknown", and no compact button appears.
+
 ## Limitations
 
 - **Codex has no live-session registry.** "Open" means a Codex process is running and the conversation was touched in the last 3 hours, so a closed Codex chat can linger for a while.

package/ROADMAP.md

@@ -0,0 +1,26 @@
+# Roadmap
+
+What is planned, what is waiting on something we can't test here, and ideas. Pull requests and reports welcome.
+
+## Waiting on real machines or real transcripts
+
+These are written or designed, but can't be verified without hardware or data we don't have. If you can help, open an issue with what you saw.
+
+- **Windows, real-machine test.** The process table (PowerShell/CIM), snapshot and server have never run on a real Windows box. Needed: someone running `npx coworking-agents` and `npx coworking-agents --json` there.
+- **Windows CPU per process.** Other AI CLIs always show "idle" on Windows because CIM doesn't give CPU %. Needs a cheap measurement (e.g. two `Get-Process` samples) tested on a real machine.
+- **Linux, real-machine test.** `ps`, `/proc/<pid>/cwd` and the "go to terminal" path (xdotool / wmctrl) were written blind.
+- **Typing into a terminal on Linux and Windows.** Reply, answer and `/compact` are macOS only (AppleScript into Terminal/iTerm). Linux would need per-terminal support (tmux `send-keys` is the most portable start); Windows would need Windows Terminal/conhost support.
+- **Full readers for other AIs.** Gemini CLI, OpenCode, Aider, Cursor Agent, Amp, Goose, Qwen Code, Crush, Droid and Kimi are detected by process only (working/idle). Showing what they are doing (tool, file, question, tokens) needs their on-disk session format, read from real transcripts. Share a sample (redacted) to get one added.
+
+## Next
+
+- **Status-line copy of the context window** set up automatically (opt-in), so the context percentage is exact from the first reply instead of only after a reply passes 200k.
+- **1.0.0** once the above settles.
+
+## Done recently
+
+Estimated cost · wait reminder · git state on the door · daily report as Markdown · history · focus mode · avatar picker.
+
+## Ideas
+
+- **Seasonal decor** by date (subtle, off with a toggle).

package/bin/coworking-agents.js

@@ -18,14 +18,16 @@ if (flag('-h') || flag('--help')) {
   --no-open   don't open the browser
   --private   hide session titles, paths and file names (screen sharing)
   --demo [N]  show a fake office with every state and N agents (default 10)
-  --json      print one snapshot and exit`);
+  --json      print one snapshot and exit
+  --no-update-check  don't ask npm whether a newer version is out`);
   process.exit(0);
 }
 
 if (flag('--json')) {
   const { snapshot } = require('../src/collect');
-  console.log(JSON.stringify(snapshot({ privacy: flag('--private') }), null, 2));
-  process.exit(0);
+  // write and let Node exit on its own: process.exit() cuts a big snapshot short when stdout is a pipe
+  process.stdout.write(JSON.stringify(snapshot({ privacy: flag('--private') }), null, 2) + '\n');
+  return;
 }
 
 function open(url) {
@@ -75,4 +77,8 @@ async function reuse() {
   }
   console.log(`coworking-agents → ${hq.url}${privacy ? '  (private mode)' : ''}\nCtrl+C to close.`);
   if (!flag('--no-open')) open(hq.url);
+  if (!demo && !flag('--no-update-check')) {
+    const up = await require('../src/update').startChecks();
+    if (up) console.log(`New version ${up.latest} (you have ${up.current}): npx coworking-agents@latest`);
+  }
 })();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "coworking-agents",
-  "version": "0.1.0",
-  "description": "A pixel-art coworking office for your AI coding agents (Claude Code, Codex, \u2026): see who's working, who needs you, and who's editing the same checkout.",
+  "version": "0.2.1",
+  "description": "A pixel-art coworking office for your AI coding agents (Claude Code, Codex, …): see who's working, who needs you, and who's editing the same checkout.",
   "bin": {
     "coworking-agents": "bin/coworking-agents.js"
   },
@@ -14,7 +14,8 @@
     "LICENSE",
     "commands",
     "skills",
-    "AGENTS.md"
+    "AGENTS.md",
+    "ROADMAP.md"
   ],
   "engines": {
     "node": ">=18"
@@ -36,5 +37,11 @@
     "monitor"
   ],
   "author": "Lucas Chacon",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ChaconLucas/coworking-agents.git"
+  },
+  "homepage": "https://github.com/ChaconLucas/coworking-agents#readme",
+  "bugs": "https://github.com/ChaconLucas/coworking-agents/issues",
   "license": "MIT"
 }

package/public/art.js

@@ -29,8 +29,11 @@ function shade(hex, f) {
   const c = [n >> 16, (n >> 8) & 255, n & 255].map(v => Math.max(0, Math.min(255, Math.round(v * f))));
   return '#' + c.map(v => v.toString(16).padStart(2, '0')).join('');
 }
+// a chosen look replaces the one derived from the id (see setLookSeeds)
+let lookSeeds = new Map();
+function setLookSeeds(m) { lookSeeds = m; }
 function look(id) {
-  const h = hash(id);
+  const h = hash(lookSeeds.get(id) || id);
   const skin = SKIN[h % SKIN.length], hair = HAIR[(h >>> 3) % HAIR.length], shirt = SHIRT[(h >>> 7) % SHIRT.length];
   return {
     s: skin[0], S: skin[1], h: hair[0], H: hair[1], c: shirt, C: shade(shirt, .72), p: PANTS[(h >>> 11) % PANTS.length],
@@ -125,6 +128,29 @@ function hairExtras(lk, x, y, front) {
   }
   // hair highlight
   r(x + 5, y + 1, 3, 1, shade(lk.h, 1.35));
+  if (HAT) drawHat(HAT, x, y);
+}
+// holiday hats over the head (16px wide, top at y)
+let HAT = null;
+function setHat(k) { HAT = k; }
+function drawHat(k, x, y) {
+  const o = PAL.ink;
+  if (k === 'santa') {
+    r(x + 3, y - 4, 10, 4, o); r(x + 4, y - 3, 8, 3, '#e43b44'); r(x + 7, y - 6, 6, 3, o); r(x + 8, y - 5, 4, 2, '#e43b44'); r(x + 11, y - 7, 4, 3, o); r(x + 12, y - 6, 2, 2, '#ffffff');
+    r(x + 1, y - 1, 14, 3, o); r(x + 2, y, 12, 1, '#ffffff'); r(x + 2, y - 1, 12, 1, '#e8e8f0');
+  } else if (k === 'witch') {
+    r(x - 1, y, 18, 3, o); r(x, y + 1, 16, 1, '#3b2a5a');
+    r(x + 4, y - 4, 8, 5, o); r(x + 5, y - 3, 6, 3, '#3b2a5a'); r(x + 5, y - 1, 6, 1, '#feae34');
+    r(x + 7, y - 8, 4, 5, o); r(x + 8, y - 7, 2, 4, '#3b2a5a'); r(x + 10, y - 9, 3, 2, o); r(x + 11, y - 9, 1, 1, '#3b2a5a');
+  } else if (k === 'party') {
+    r(x + 5, y - 2, 6, 3, o); r(x + 6, y - 1, 4, 1, '#ff6ec7'); r(x + 6, y, 4, 1, '#2ce8f5');
+    r(x + 6, y - 5, 4, 3, o); r(x + 7, y - 4, 2, 1, '#ffd84d'); r(x + 7, y - 3, 2, 1, '#ff6ec7');
+    r(x + 7, y - 7, 2, 2, '#ffd84d');
+  } else if (k === 'straw') {
+    r(x - 2, y, 20, 3, o); r(x - 1, y + 1, 18, 1, '#e8c170');
+    r(x + 3, y - 4, 10, 5, o); r(x + 4, y - 3, 8, 3, '#e8c170'); r(x + 4, y - 1, 8, 1, '#e43b44');
+    for (let i = 0; i < 4; i++) r(x + 4 + i * 2, y - 3, 1, 1, '#c99a4a');
+  }
 }
 
 // Person seated with their back to us, facing the monitor.
@@ -733,7 +759,7 @@ function aiIconEl(id, color) {
 
 window.Art = {
   aiIcon, aiIconEl, portrait, drawArcade, drawDiagramBoard, drawNeon, drawPoster, drawServerRack, drawDuck, drawSideMonitor, drawStickies, drawBeanSack, drawPizza, drawCupStack,
-  PAL, SKIN, HAIR, SHIRT, SCREEN_GLOW, hash, shade, look, setCtx, r, sprite, blit,
+  PAL, SKIN, HAIR, SHIRT, SCREEN_GLOW, hash, shade, look, setLookSeeds, setHat, setCtx, r, sprite, blit,
   drawSeatedBack, drawFront, drawStanding, drawSleeping, drawChairBack, drawChairBase, drawCat, bubble, drawScreen,
   drawPlant, drawCertificate, drawLamp, drawWhiteboard, drawCork, drawClock, skyFor, drawWindow, drawSofa, drawCoffeeMachine,
   drawCooler, drawRug, drawFloor, applyLight, LEGS_SIT,

package/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="2" y="0" width="12" height="1" fill="#1b1622"/><rect x="1" y="1" width="1" height="1" fill="#1b1622"/><rect x="2" y="1" width="12" height="1" fill="#f4dfc6"/><rect x="14" y="1" width="1" height="1" fill="#1b1622"/><rect x="0" y="2" width="1" height="1" fill="#1b1622"/><rect x="1" y="2" width="2" height="1" fill="#f4dfc6"/><rect x="3" y="2" width="10" height="1" fill="#1b1622"/><rect x="13" y="2" width="2" height="1" fill="#f4dfc6"/><rect x="15" y="2" width="1" height="1" fill="#1b1622"/><rect x="0" y="3" width="1" height="1" fill="#1b1622"/><rect x="1" y="3" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="3" width="1" height="1" fill="#1b1622"/><rect x="3" y="3" width="10" height="1" fill="#2b2336"/><rect x="13" y="3" width="1" height="1" fill="#1b1622"/><rect x="14" y="3" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="3" width="1" height="1" fill="#1b1622"/><rect x="0" y="4" width="1" height="1" fill="#1b1622"/><rect x="1" y="4" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="4" width="1" height="1" fill="#1b1622"/><rect x="3" y="4" width="3" height="1" fill="#2b2336"/><rect x="6" y="4" width="1" height="1" fill="#2ce8f5"/><rect x="7" y="4" width="2" height="1" fill="#2b2336"/><rect x="9" y="4" width="1" height="1" fill="#ff5fd2"/><rect x="10" y="4" width="3" height="1" fill="#2b2336"/><rect x="13" y="4" width="1" height="1" fill="#1b1622"/><rect x="14" y="4" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="4" width="1" height="1" fill="#1b1622"/><rect x="0" y="5" width="1" height="1" fill="#1b1622"/><rect x="1" y="5" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="5" width="1" height="1" fill="#1b1622"/><rect x="3" y="5" width="2" height="1" fill="#2b2336"/><rect x="5" y="5" width="1" height="1" fill="#2ce8f5"/><rect x="6" y="5" width="4" height="1" fill="#2b2336"/><rect x="10" y="5" width="1" height="1" fill="#ff5fd2"/><rect x="11" y="5" width="2" height="1" fill="#2b2336"/><rect x="13" y="5" width="1" height="1" fill="#1b1622"/><rect x="14" y="5" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="5" width="1" height="1" fill="#1b1622"/><rect x="0" y="6" width="1" height="1" fill="#1b1622"/><rect x="1" y="6" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="6" width="1" height="1" fill="#1b1622"/><rect x="3" y="6" width="1" height="1" fill="#2b2336"/><rect x="4" y="6" width="1" height="1" fill="#2ce8f5"/><rect x="5" y="6" width="6" height="1" fill="#2b2336"/><rect x="11" y="6" width="1" height="1" fill="#ff5fd2"/><rect x="12" y="6" width="1" height="1" fill="#2b2336"/><rect x="13" y="6" width="1" height="1" fill="#1b1622"/><rect x="14" y="6" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="6" width="1" height="1" fill="#1b1622"/><rect x="0" y="7" width="1" height="1" fill="#1b1622"/><rect x="1" y="7" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="7" width="1" height="1" fill="#1b1622"/><rect x="3" y="7" width="2" height="1" fill="#2b2336"/><rect x="5" y="7" width="1" height="1" fill="#2ce8f5"/><rect x="6" y="7" width="4" height="1" fill="#2b2336"/><rect x="10" y="7" width="1" height="1" fill="#ff5fd2"/><rect x="11" y="7" width="2" height="1" fill="#2b2336"/><rect x="13" y="7" width="1" height="1" fill="#1b1622"/><rect x="14" y="7" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="7" width="1" height="1" fill="#1b1622"/><rect x="0" y="8" width="1" height="1" fill="#1b1622"/><rect x="1" y="8" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="8" width="1" height="1" fill="#1b1622"/><rect x="3" y="8" width="3" height="1" fill="#2b2336"/><rect x="6" y="8" width="1" height="1" fill="#2ce8f5"/><rect x="7" y="8" width="2" height="1" fill="#2b2336"/><rect x="9" y="8" width="1" height="1" fill="#ff5fd2"/><rect x="10" y="8" width="3" height="1" fill="#2b2336"/><rect x="13" y="8" width="1" height="1" fill="#1b1622"/><rect x="14" y="8" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="8" width="1" height="1" fill="#1b1622"/><rect x="0" y="9" width="1" height="1" fill="#1b1622"/><rect x="1" y="9" width="1" height="1" fill="#f4dfc6"/><rect x="2" y="9" width="1" height="1" fill="#1b1622"/><rect x="3" y="9" width="10" height="1" fill="#2b2336"/><rect x="13" y="9" width="1" height="1" fill="#1b1622"/><rect x="14" y="9" width="1" height="1" fill="#f4dfc6"/><rect x="15" y="9" width="1" height="1" fill="#1b1622"/><rect x="0" y="10" width="1" height="1" fill="#1b1622"/><rect x="1" y="10" width="2" height="1" fill="#f4dfc6"/><rect x="3" y="10" width="10" height="1" fill="#1b1622"/><rect x="13" y="10" width="2" height="1" fill="#f4dfc6"/><rect x="15" y="10" width="1" height="1" fill="#1b1622"/><rect x="1" y="11" width="1" height="1" fill="#1b1622"/><rect x="2" y="11" width="12" height="1" fill="#f4dfc6"/><rect x="14" y="11" width="1" height="1" fill="#1b1622"/><rect x="2" y="12" width="2" height="1" fill="#1b1622"/><rect x="4" y="12" width="2" height="1" fill="#f4dfc6"/><rect x="6" y="12" width="8" height="1" fill="#1b1622"/><rect x="3" y="13" width="1" height="1" fill="#1b1622"/><rect x="4" y="13" width="1" height="1" fill="#f4dfc6"/><rect x="5" y="13" width="1" height="1" fill="#1b1622"/><rect x="3" y="14" width="2" height="1" fill="#1b1622"/></svg>

package/public/index.html

@@ -4,9 +4,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>coworking-agents</title>
-<link rel="icon" href="favicon.ico?v=3" sizes="any">
-<link rel="icon" href="favicon.png?v=3" type="image/png" sizes="64x64">
-<link rel="icon" href="logo.svg?v=3" type="image/svg+xml">
+<link rel="icon" href="favicon.ico?v=4" sizes="any">
+<link rel="icon" href="favicon.png?v=4" type="image/png" sizes="64x64">
+<link rel="icon" href="favicon.svg?v=4" type="image/svg+xml">
 <link rel="apple-touch-icon" href="apple-touch-icon.png?v=3">
 <link rel="stylesheet" href="style.css">
 </head>
@@ -20,11 +20,19 @@
   <div class="counts" id="counts"></div>
   </div>
   <div class="tools">
+    <button id="btn-menu" class="icon-btn menu" aria-expanded="false" aria-controls="tools-menu"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M2 3h12v2H2zM2 7h12v2H2zM2 11h12v2H2z"/></svg><span class="sr"></span><i class="menu-dot" hidden></i></button>
+    <div id="tools-menu" class="tools-menu" hidden>
     <button id="btn-notify" class="icon-btn" aria-pressed="false"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M7 1h2v1h2v1h1v5h1v2h1v2H2v-2h1V8h1V3h1V2h2zM6 13h4v1H9v1H7v-1H6z"/></svg><span class="sr"></span></button>
     <button id="btn-sound" class="icon-btn" aria-pressed="false"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M2 6h3l4-4h1v12H9l-4-4H2zM12 5h1v1h1v4h-1v1h-1V5z"/></svg><span class="sr"></span></button>
+    <button id="btn-focus" class="icon-btn" aria-pressed="false"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M6 1h4v1h2v1h1v2h1v6h-1v2h-1v1h-2v1H6v-1H4v-1H3v-2H2V5h1V3h1V2h2zm0 3v1H5v1H4v4h1v1h1v1h4v-1h1v-1h1V6h-1V5h-1V4zm1 2h2v1h1v2H9v1H7V9H6V7h1z"/></svg><span class="sr"></span><em class="focus-left" hidden></em></button>
+    <button id="btn-walk" class="icon-btn" aria-pressed="true"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M7 1h2v3H7zM5 5h6v5h-1v5H8v-4H8v4H6v-5H5z"/></svg><span class="sr"></span></button>
+    <button id="btn-radio" class="icon-btn" aria-pressed="false"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M11 1h2v2h-2v2h3v10H2V5h7V3h2zM4 7v6h4V7zm6 1v1h2V8zm0 3v1h2v-1z"/></svg><span class="sr"></span></button>
     <button id="btn-replay" class="icon-btn"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M6 1h4v1h2v1h1v2h1v6h-1v2h-1v1h-2v1H6v-1H4v-1H3v-2H2V9h2v2h1v1h1v1h4v-1h1v-1h1V5h-1V4h-1V3H6v1H5v1H4v1h2v2H1V3h2v1h1V3h1V2h1zM7 5h2v3h2v2H7z"/></svg><span class="sr"></span></button>
     <button id="btn-search" class="icon-btn"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M5 1h4v1h1v1h1v4h-1v1H9v1H5V8H4V7H3V3h1V2h1zm0 2v4h4V3zM10 9h1v1h1v1h1v1h1v1h-1v1h-1v-1h-1v-1h-1v-1H9v-1h1z"/></svg><span class="sr"></span></button>
+    <button id="btn-photo" class="icon-btn"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M5 2h6v2h3v10H2V4h3zm3 4H7v1H6v3h1v1h2v-1h1V7H9V6z"/></svg><span class="sr"></span></button>
+    <button id="btn-office" class="icon-btn"><svg viewBox="0 0 16 16" shape-rendering="crispEdges" aria-hidden="true"><path fill="currentColor" d="M7 1h2v2h2v1h2v2h-1v2h1v2h-2v2h-1v1H9v2H7v-2H5v-1H4v-2H3V8h1V6H3V4h2V3h2zm0 5v1H6v2h1v1h2V9h1V7H9V6z"/></svg><span class="sr"></span></button>
     <button id="btn-lang" class="icon-btn lang"></button>
+    </div>
   </div>
 </header>
 <div id="clashes" class="clashes" hidden></div>
@@ -42,6 +50,7 @@
 <div id="offline" class="offline" hidden></div>
 <script src="art.js"></script>
 <script src="js/i18n.js"></script>
+<script src="js/progress.js"></script>
 <script src="js/palette.js"></script>
 <script src="js/floorplan.js"></script>
 <script src="js/building.js"></script>
@@ -57,6 +66,14 @@
 <script src="js/topbar.js"></script>
 <script src="js/replay.js"></script>
 <script src="js/keys.js"></script>
+<script src="js/achievements.js"></script>
+<script src="js/fun.js"></script>
+<script src="js/ambient.js"></script>
+<script src="js/life.js"></script>
+<script src="js/collection.js"></script>
+<script src="js/personal.js"></script>
+<script src="js/rooms.js"></script>
+<script src="js/player.js"></script>
 <script src="js/main.js"></script>
 </body>
 </html>