@henryz2004/agency 1.0.0 → 1.0.2

package/README.md

@@ -12,7 +12,7 @@ the payroll you'd be paying humans to match it.
 
 Nothing leaves your machine — unless you explicitly opt into the [leaderboard](#leaderboard-opt-in). No dependencies.
 
-![Agency](docs/screenshot.png)
+![Agency — a living pixel-art office of your AI agents](https://cdn.jsdelivr.net/npm/@henryz2004/agency/docs/agency.gif)
 
 ## Run it
 

package/lib/install.js

@@ -0,0 +1,48 @@
+// install.js — when this machine first ran Agency.
+//
+// The leaderboard ranks engineer-years shipped SINCE you joined Agency, not your
+// whole Claude history, so everyone starts from zero on install. We persist the
+// timestamp once, on the first run that records it — for an `npx` user that's
+// the download. We deliberately do NOT backfill from the data dir's birthtime:
+// an existing ~/.agency (from an earlier, pre-leaderboard build) would otherwise
+// sweep months of pre-join usage into the "since install" slice.
+//
+// Fail-soft like every adapter: a read/write error never throws — worst case we
+// recompute the anchor next process start.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { DATA_DIR } from './paths.js';
+
+const FILE = path.join(DATA_DIR, 'install.json');
+
+let cached = null;
+
+// { at: epoch-ms, day: 'YYYY-MM-DD' (local, matches usage.js day buckets) }
+export function installInfo() {
+  if (cached) return cached;
+
+  // Already recorded? Trust it.
+  try {
+    const j = JSON.parse(fs.readFileSync(FILE, 'utf8'));
+    if (j && typeof j.installedAt === 'number' && j.installedAt > 0) {
+      return (cached = { at: j.installedAt, day: dayOf(j.installedAt) });
+    }
+  } catch { /* not written yet */ }
+
+  // First run: anchor at now (see header — no birthtime backfill).
+  const at = Date.now();
+
+  try {
+    fs.mkdirSync(DATA_DIR, { recursive: true });
+    fs.writeFileSync(FILE, JSON.stringify({ installedAt: at }, null, 2));
+  } catch { /* read-only data dir — keep the in-memory anchor for this process */ }
+
+  return (cached = { at, day: dayOf(at) });
+}
+
+// Local-tz YYYY-MM-DD — usage.js keys day buckets with the same en-CA local date,
+// so the leaderboard slice can compare bucket.date >= installedDay lexically.
+function dayOf(ms) {
+  return new Date(ms).toLocaleDateString('en-CA');
+}

package/lib/live.js

@@ -168,30 +168,28 @@ function readSessionMeta(file) {
   return meta;
 }
 
-// Resolve a session's transcript file (named <sessionId>.jsonl under the
-// projects dir) and return its meta, cached by mtime.
-function sessionMetaFor(sessionId, cwd) {
-  // Prefer the project dir derived from cwd (Claude encodes path with dashes).
-  const candidates = [];
+// Resolve a session's transcript file (named <sessionId>.jsonl under the projects
+// dir), or null if it has none yet. Prefer the project dir derived from cwd
+// (Claude encodes the path with dashes); else scan the projects dirs.
+function transcriptFile(sessionId, cwd) {
   if (cwd) {
-    const encoded = cwd.replace(/[/.]/g, '-');
-    candidates.push(path.join(PROJECTS_DIR, encoded, `${sessionId}.jsonl`));
+    const f = path.join(PROJECTS_DIR, cwd.replace(/[/.]/g, '-'), `${sessionId}.jsonl`);
+    if (fs.existsSync(f)) return f;
   }
-
-  let file = candidates.find((f) => fs.existsSync(f));
-  if (!file) {
-    try {
-      for (const dir of fs.readdirSync(PROJECTS_DIR)) {
-        const f = path.join(PROJECTS_DIR, dir, `${sessionId}.jsonl`);
-        if (fs.existsSync(f)) {
-          file = f;
-          break;
-        }
-      }
-    } catch {
-      /* ignore */
+  try {
+    for (const dir of fs.readdirSync(PROJECTS_DIR)) {
+      const f = path.join(PROJECTS_DIR, dir, `${sessionId}.jsonl`);
+      if (fs.existsSync(f)) return f;
     }
+  } catch {
+    /* ignore */
   }
+  return null;
+}
+
+// A session's transcript meta, cached by mtime. No transcript yet → empty meta.
+function sessionMetaFor(sessionId, cwd) {
+  const file = transcriptFile(sessionId, cwd);
   if (!file) return emptyMeta();
 
   let mtime = 0;
@@ -477,7 +475,15 @@ export function getLive() {
       if (!r) return false;
       if (isDoneState(r.state)) return false; // done/failed/stopped → off the floor
       if (r.state === 'blocked') return true; // needs-you bg agent — keep even pid-less
-      return r.pid && isAlive(r.pid);
+      if (!(r.pid && isAlive(r.pid))) return false; // dead pid → not live
+      // Drop interactive sessions that never wrote a transcript: a `claude` opened
+      // at a prompt and abandoned is a live process with zero conversation, so it
+      // would otherwise linger as an empty named worker. The first message creates
+      // the transcript and it reappears on the next poll. Background agents carry a
+      // task and always have a transcript, so this gates interactive only.
+      const interactive = r.kind !== 'background' && r.kind !== 'bg';
+      if (interactive && r.sessionId && !transcriptFile(r.sessionId, r.cwd)) return false;
+      return true;
     })
     .map((r) => buildAgent(r, now));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@henryz2004/agency",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "description": "A live pixel-art office sim of your Claude Code, Codex, and opencode workforce.",
   "license": "MIT",
@@ -12,11 +12,12 @@
     "lib/",
     "public/",
     "scripts/",
-    "README.md"
+    "README.md",
+    "docs/agency.gif"
   ],
   "scripts": {
     "start": "node server.js",
-    "check": "node --check server.js && node --check lib/live.js && node --check lib/usage.js && node --check lib/opencode.js && node --check lib/codex.js && node --check lib/roster.js && node --check lib/transcript.js && node --check lib/control.js && node --check lib/paths.js && node --check public/app.js && node --check public/chat-panel.js && node --check public/office.js && node --check public/sprites.js && node --check public/avatar.js && node --check public/ui.js && node --check public/sound.js && node --check public/audio-controls.js && node --check public/mock.js && node --check public/mock-agents.js && node --check public/metric.js && node --check public/leaderboard.js && node --check worker/index.js && node --check scripts/install-hook.mjs && node --check scripts/_pixpng.mjs && node --check scripts/charsheet.mjs && node --check scripts/animsheet.mjs",
+    "check": "node --check server.js && node --check lib/live.js && node --check lib/usage.js && node --check lib/opencode.js && node --check lib/codex.js && node --check lib/roster.js && node --check lib/transcript.js && node --check lib/control.js && node --check lib/paths.js && node --check lib/install.js && node --check public/app.js && node --check public/chat-panel.js && node --check public/office.js && node --check public/sprites.js && node --check public/avatar.js && node --check public/ui.js && node --check public/sound.js && node --check public/audio-controls.js && node --check public/mock.js && node --check public/mock-agents.js && node --check public/metric.js && node --check public/leaderboard.js && node --check worker/index.js && node --check scripts/install-hook.mjs && node --check scripts/_pixpng.mjs && node --check scripts/charsheet.mjs && node --check scripts/animsheet.mjs",
     "install-hook": "node scripts/install-hook.mjs",
     "charsheet": "node scripts/charsheet.mjs",
     "animsheet": "node scripts/animsheet.mjs"

package/public/chat-panel.css

@@ -345,31 +345,49 @@
   opacity: 0.6;
   cursor: default;
 }
-/* hide: a small icon toggle (👁 / 🙈) — quiet, square-ish, sits beside Save */
-.cp-cust-hide {
+/* rename + hide actions: quiet ghost-text buttons in the collapsed strip. Rename
+   expands to the input + Save in place; Hide toggles here. */
+.cp-cust-act {
   flex: 0 0 auto;
-  font-size: 12px;
-  line-height: 1;
+  font-family: var(--term);
+  font-size: var(--t-sub);
   color: var(--muted);
   background: transparent;
   border: 1px solid var(--line2);
   border-radius: 4px;
-  padding: 0 8px;
+  padding: 4px 9px;
   cursor: pointer;
 }
-.cp-cust-hide:hover {
+.cp-cust-act:hover {
   color: var(--ink);
   border-color: var(--line);
   background: rgba(255, 255, 255, 0.04);
 }
-.cp-cust-hide.ok {
+.cp-cust-act.ok {
   color: var(--green);
   border-color: var(--green);
 }
-.cp-cust-hide:disabled {
+.cp-cust-act:disabled {
   opacity: 0.6;
   cursor: default;
 }
+/* cancel (✕) on the expanded rename strip — dismiss back to the collapsed row */
+.cp-cust-cancel {
+  flex: 0 0 auto;
+  font-size: var(--t-sub);
+  line-height: 1;
+  color: var(--muted);
+  background: transparent;
+  border: 1px solid var(--line2);
+  border-radius: 4px;
+  padding: 0 8px;
+  cursor: pointer;
+}
+.cp-cust-cancel:hover {
+  color: var(--ink);
+  border-color: var(--line);
+  background: rgba(255, 255, 255, 0.04);
+}
 
 /* "needs you" HUD pill (Control Phase-1): a non-intrusive topbar chip counting
    agents paused on a Stop hook. Lives here (not style.css) to keep the control

package/public/chat-panel.js

@@ -312,50 +312,70 @@ function customizeControls(a) {
   // Gate: only render for a selectable real agent carrying a sessionId.
   if (!a || !a.sessionId) return null;
 
-  // One compact row: a slim rename field + Save, then a small hide toggle.
   const wrap = document.createElement('div');
   wrap.className = 'cp-customize cp-cust-row';
 
-  // --- rename: input pre-filled with the current name + a Save button. Saving
-  // an empty input clears the custom name (server resets to the minted name). ---
-  const input = document.createElement('input');
-  input.type = 'text';
-  input.className = 'cp-cust-input';
-  input.value = a.name || '';
-  input.placeholder = 'Rename…';
-  input.title = 'Rename this agent (clear to reset to its minted name)';
-  const save = document.createElement('button');
-  save.type = 'button';
-  save.className = 'cp-cust-save';
-  save.textContent = 'Save';
-  save.title = 'Save the new name';
-  const submitName = () => postOverride(save, { sessionId: a.sessionId, name: input.value.trim() }, 'Save');
-  save.addEventListener('click', submitName);
-  // Enter in the field saves too (blur is left alone so tabbing away is quiet).
-  input.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') { e.preventDefault(); submitName(); }
-  });
-  wrap.appendChild(input);
-  wrap.appendChild(save);
-
-  // --- hide: a small icon toggle reflecting agent.hidden. Optimistically flips
-  // its own glyph/label; the next /api/state poll reflects the real state. ---
+  // --- hide: a quiet text toggle reflecting agent.hidden (no uncanny eyeball).
+  // Optimistically flips its own label; the next /api/state poll reconciles. ---
   const hide = document.createElement('button');
   hide.type = 'button';
-  hide.className = 'cp-cust-hide';
-  const labelFor = (hidden) => (hidden ? '🙈' : '👁');
-  const titleFor = (hidden) => (hidden ? 'Unhide — show on the floor again' : 'Hide this agent from the office floor');
-  hide.textContent = labelFor(a.hidden);
-  hide.title = titleFor(a.hidden);
+  hide.className = 'cp-cust-act';
+  const hideLabel = (hidden) => (hidden ? 'Unhide' : 'Hide');
+  const hideTitle = (hidden) => (hidden ? 'Show on the floor again' : 'Hide this agent from the office floor');
+  hide.textContent = hideLabel(a.hidden);
+  hide.title = hideTitle(a.hidden);
   hide.addEventListener('click', () => {
     const next = !a.hidden;
     a.hidden = next; // optimistic; office.js reconciles on the next poll
-    const prev = labelFor(next);
-    hide.title = titleFor(next);
-    postOverride(hide, { sessionId: a.sessionId, hidden: next }, prev);
+    hide.title = hideTitle(next);
+    postOverride(hide, { sessionId: a.sessionId, hidden: next }, hideLabel(next));
   });
-  wrap.appendChild(hide);
 
+  // --- rename: collapsed to a quiet button so the field isn't always live.
+  // Clicking expands the strip in place to an input + Save + cancel. ---
+  const rename = document.createElement('button');
+  rename.type = 'button';
+  rename.className = 'cp-cust-act';
+  rename.textContent = '✎ Rename';
+  rename.title = 'Rename this agent';
+  rename.addEventListener('click', openRename);
+
+  const collapse = () => { wrap.innerHTML = ''; wrap.append(rename, hide); };
+
+  function openRename() {
+    wrap.innerHTML = '';
+    // Input pre-filled with the current name; saving an empty value clears the
+    // custom name (server resets to the minted roster name).
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.className = 'cp-cust-input';
+    input.value = a.name || '';
+    input.placeholder = 'Rename…';
+    input.title = 'Rename this agent (clear to reset to its minted name)';
+    const save = document.createElement('button');
+    save.type = 'button';
+    save.className = 'cp-cust-save';
+    save.textContent = 'Save';
+    save.title = 'Save the new name';
+    const cancel = document.createElement('button');
+    cancel.type = 'button';
+    cancel.className = 'cp-cust-cancel';
+    cancel.textContent = '✕';
+    cancel.title = 'Cancel rename';
+    const submitName = () => postOverride(save, { sessionId: a.sessionId, name: input.value.trim() }, 'Save');
+    save.addEventListener('click', submitName);
+    cancel.addEventListener('click', collapse);
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); submitName(); }
+      // Esc collapses the field; stopPropagation so it doesn't also close the panel.
+      else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); collapse(); }
+    });
+    wrap.append(input, save, cancel);
+    input.focus();
+    input.select();
+  }
+
+  collapse();
   return wrap;
 }
 

package/public/index.html

@@ -43,6 +43,8 @@
       <div class="topctrls">
         <div class="live-pill"><span class="rec"></span> LIVE</div>
         <button id="leaderboardBtn" class="panel-toggle" type="button" title="Leaderboard" hidden>🏆</button>
+        <a id="feedbackBtn" class="panel-toggle" title="Send feedback (opens a GitHub issue)" target="_blank" rel="noopener"
+           href="https://github.com/henryz2004/agency/issues/new?title=Feedback%3A%20&body=**What%20were%20you%20doing%20in%20Agency%3F**%0A%0A%0A**What%20happened%2C%20or%20what%20would%20you%20change%3F**%0A%0A%0A---%0A_Agency%20version%20%2F%20OS%20%2F%20browser%20(helps%20a%20lot)%3A_%0A">💬</a>
         <button id="panelToggle" class="panel-toggle" type="button" title="Toggle stats panel">📊</button>
       </div>
     </div>
@@ -184,6 +186,7 @@
     </div>
   </div>
 
+  <script src="/env.js"></script><!-- runtime config (LEADERBOARD_API) before the deferred modules -->
   <script type="module" src="/app.js"></script>
   <script type="module" src="/leaderboard.js"></script>
 </body>

package/public/leaderboard.js

@@ -8,13 +8,22 @@
 // Set LEADERBOARD_API to your deployed Worker URL (see worker/README.md). While
 // it's empty, the whole feature stays hidden and the dashboard is unchanged.
 
-import { standardEngYears } from './metric.js';
+import { standardEngYears, fmtEngTime } from './metric.js';
 
-const LEADERBOARD_API = 'https://agency-leaderboard.henryz2004.workers.dev';
+// Backend URL is injected by the server via /env.js (window.AGENCY_LEADERBOARD_API),
+// driven by the LEADERBOARD_API env var — `LEADERBOARD_API=http://localhost:8787 npm
+// start` for local/staging, else the production board. The hardcoded fallback only
+// applies if /env.js didn't load. (We no longer read a sticky localStorage override:
+// a stale value silently broke the prod board with a confusing "Failed to fetch".)
+const LEADERBOARD_API =
+  (typeof window !== 'undefined' && window.AGENCY_LEADERBOARD_API) ||
+  'https://agency-leaderboard.henryz2004.workers.dev';
 
 const KNOWN_SOURCES = ['claude', 'codex', 'opencode'];
 const LS = { id: 'agency.lb.installId', handle: 'agency.lb.handle', opted: 'agency.lb.optedIn' };
 const $ = (id) => document.getElementById(id);
+const RESYNC_MS = 5 * 60 * 1000; // leaderboard auto-resync cadence (declared up here:
+                                 // init() runs at load and reaches startAutoSync synchronously).
 
 if (LEADERBOARD_API) init();
 
@@ -30,6 +39,27 @@ function init() {
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && $('lbOverlay') && !$('lbOverlay').classList.contains('hidden')) close();
   });
+  startAutoSync();
+}
+
+// Keep your score current without a manual "update" — re-submit on load and on a
+// slow interval while Agency is open. Silent: a failed sync (offline, or a legacy
+// duplicate name) just leaves the last score standing. ponytail: fixed 5-min
+// cadence; tie it to token deltas only if D1 writes ever become a concern.
+function startAutoSync() {
+  const tick = async () => {
+    if (localStorage.getItem(LS.opted) !== '1') return;
+    const handle = localStorage.getItem(LS.handle);
+    if (!handle) return;
+    const res = await submitScore(handle, await localStats());
+    if (res && res.ok && $('lbYouRank')) { // modal open → refresh what's visible
+      refreshRank();
+      const list = document.querySelector('.lb-list');
+      if (list) loadList(list);
+    }
+  };
+  tick();
+  setInterval(tick, RESYNC_MS);
 }
 
 function open() { $('lbOverlay').classList.remove('hidden'); render(); }
@@ -50,8 +80,11 @@ function installId() {
 async function fetchJSON(url, opts) {
   try {
     const res = await fetch(url, opts);
-    if (!res.ok) return { _error: `HTTP ${res.status}` };
-    return await res.json();
+    const data = await res.json().catch(() => ({}));
+    // On non-2xx, surface the server's { error } (e.g. "handle taken") so callers
+    // can react to it, not just a bare status code.
+    if (!res.ok) return { _error: data.error || `HTTP ${res.status}`, ...data };
+    return data;
   } catch (e) {
     return { _error: String((e && e.message) || e) };
   }
@@ -61,13 +94,18 @@ async function fetchJSON(url, opts) {
 // app's own read-only endpoint. Used only at submit time.
 async function localStats() {
   const state = await fetchJSON('/api/state');
-  const out = (state && state.usage && state.usage.lifetime && state.usage.lifetime.out) || 0;
+  const u = (state && state.usage) || {};
+  // Rank by output SINCE this machine installed Agency (a level field for all),
+  // not lifetime Claude history. Presence-check sinceInstall so a legit 0 (brand
+  // new install) submits as 0; only fall back to lifetime on an older server.
+  const out = (u.sinceInstall && typeof u.sinceInstall.out === 'number')
+    ? u.sinceInstall.out
+    : ((u.lifetime && u.lifetime.out) || 0);
   const agents = (state && state.live && state.live.agents) || [];
   const sources = [...new Set(agents.map((a) => a && a.source).filter((s) => KNOWN_SOURCES.includes(s)))];
   return { out, sources };
 }
 
-const fmtEY = (n) => (n >= 10 ? Math.round(n).toString() : n.toFixed(n >= 1 ? 1 : 2));
 const fmtTok = (n) => (n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? Math.round(n / 1e3) + 'k' : String(n));
 
 async function render() {
@@ -97,7 +135,7 @@ function refreshRank() {
   fetchJSON(LEADERBOARD_API + '/api/rank?installId=' + encodeURIComponent(installId())).then((r) => {
     const el = $('lbYouRank');
     if (!el) return;
-    if (r && typeof r.rank === 'number') el.textContent = `#${r.rank} of ${r.total} · ${fmtEY(r.engYears)} eng-yrs`;
+    if (r && typeof r.rank === 'number') el.textContent = `#${r.rank} of ${r.total} · ${fmtEngTime(r.engYears)}`;
     else el.textContent = 'not ranked yet';
   });
 }
@@ -106,15 +144,15 @@ function optInBlock(stats) {
   const wrap = document.createElement('div');
   wrap.className = 'lb-optin';
   wrap.innerHTML = `
-    <p class="lb-note">Share your standardized <b>engineer-years</b> on a public leaderboard.
-    Only a display name + that one number are sent — <b>never</b> your code, transcripts, or repo names.</p>
-    <p class="lb-preview">Your standardized score right now: <b></b> eng-yrs</p>
+    <p class="lb-note">Share your standardized <b>engineer-years</b> — counted <b>since you installed Agency</b> —
+    on a public leaderboard. Only a display name + that one number are sent; <b>never</b> your code, transcripts, or repo names.</p>
+    <p class="lb-preview">Your standardized score since install: <b></b></p>
     <div class="lb-form">
       <input id="lbHandle" type="text" maxlength="32" placeholder="display name" autocomplete="off" />
       <button id="lbJoin" type="button">Join</button>
     </div>
     <div id="lbMsg" class="lb-msg"></div>`;
-  wrap.querySelector('.lb-preview b').textContent = fmtEY(standardEngYears(stats.out));
+  wrap.querySelector('.lb-preview b').textContent = fmtEngTime(standardEngYears(stats.out));
   const input = wrap.querySelector('#lbHandle');
   input.value = localStorage.getItem(LS.handle) || '';
   const join = wrap.querySelector('#lbJoin');
@@ -129,6 +167,8 @@ function optInBlock(stats) {
       localStorage.setItem(LS.handle, handle);
       localStorage.setItem(LS.opted, '1');
       render();
+    } else if (res && res.error === 'handle taken') {
+      msg.textContent = 'That name is taken — try another.';
     } else {
       msg.textContent = 'Could not submit' + (res && res._error ? ` (${res._error})` : '') + '.';
     }
@@ -150,30 +190,14 @@ function statusBlock(stats) {
       <div class="lb-you-rank" id="lbYouRank">—</div>
     </div>
     <div class="lb-actions">
-      <button id="lbUpdate" type="button">Update my score</button>
       <button id="lbForget" type="button" class="lb-danger">Stop sharing</button>
     </div>
-    <div id="lbMsg" class="lb-msg"></div>`;
+    <div id="lbMsg" class="lb-msg">Your score syncs automatically while Agency is open.</div>`;
   wrap.querySelector('.lb-you-handle').textContent = handle || 'you'; // display only; textContent = no injection
   const msg = wrap.querySelector('#lbMsg');
 
   refreshRank();
 
-  wrap.querySelector('#lbUpdate').addEventListener('click', async (e) => {
-    if (!handle) { msg.textContent = 'Re-join to set a display name first.'; return; }
-    e.target.disabled = true; msg.textContent = 'Updating…';
-    const res = await submitScore(handle, await localStats()); // re-fetch for freshness
-    e.target.disabled = false;
-    if (res && res.ok) {
-      msg.textContent = 'Updated.';
-      refreshRank();
-      const list = document.querySelector('.lb-list');
-      if (list) loadList(list);
-    } else {
-      msg.textContent = 'Update failed' + (res && res._error ? ` (${res._error})` : '') + '.';
-    }
-  });
-
   wrap.querySelector('#lbForget').addEventListener('click', async (e) => {
     e.target.disabled = true; msg.textContent = 'Removing…';
     const res = await fetchJSON(LEADERBOARD_API + '/api/forget', {
@@ -214,7 +238,7 @@ async function loadList(list) {
     const rank = document.createElement('span'); rank.className = 'lb-rank'; rank.textContent = `#${row.rank}`;
     const name = document.createElement('span'); name.className = 'lb-name'; name.textContent = row.handle;
     const val = document.createElement('span'); val.className = 'lb-val';
-    val.textContent = `${fmtEY(row.engYears)} eng-yrs`;
+    val.textContent = fmtEngTime(row.engYears);
     val.title = `${fmtTok(row.outputTokens)} output tokens` + (row.sources && row.sources.length ? ` · ${row.sources.join(', ')}` : '');
     r.append(rank, name, val);
     list.appendChild(r);

package/public/metric.js

@@ -22,6 +22,30 @@ export function standardEngYears(lifetimeOutputTokens) {
   return (Number(lifetimeOutputTokens) || 0) / TOKENS_PER_ENG_YEAR;
 }
 
+// Engineer-years expressed in eng-years per unit, from the SAME locked constants:
+// 1 eng-yr = 230 eng-days, 1 eng-day = 8 eng-hrs; an eng-month is 1/12 eng-yr.
+const EY_PER = {
+  yr: 1,
+  mo: 1 / 12,
+  day: 1 / STANDARD.daysPerYear,
+  hr: 1 / (STANDARD.daysPerYear * STANDARD.hrsPerDay),
+};
+
+// Format an engineer-years value in the largest unit where it reads naturally,
+// so a tiny score shows as "6.3 eng-hrs" not "0.003 eng-yrs". Returns a display
+// string: "8.7 eng-yrs" · "4.8 eng-mos" · "12 eng-days" · "6.3 eng-hrs" (singular
+// at exactly 1: "1 eng-yr"). Ranking stays in eng-years; only display adapts.
+export function fmtEngTime(engYears) {
+  const ey = Number(engYears) || 0;
+  let value, unit;
+  if (ey >= EY_PER.yr) { value = ey; unit = 'yr'; }
+  else if (ey >= EY_PER.mo) { value = ey / EY_PER.mo; unit = 'mo'; }
+  else if (ey >= EY_PER.day) { value = ey / EY_PER.day; unit = 'day'; }
+  else { value = ey / EY_PER.hr; unit = 'hr'; }
+  const v = value >= 10 ? Math.round(value).toString() : (Math.round(value * 10) / 10).toString();
+  return `${v} eng-${unit}${v === '1' ? '' : 's'}`;
+}
+
 // --- self-check: `node public/metric.js` -----------------------------------
 if (typeof process !== 'undefined' && process.argv[1] && process.argv[1].endsWith('metric.js')) {
   const assert = (c, m) => { if (!c) { console.error('FAIL:', m); process.exit(1); } };
@@ -30,5 +54,14 @@ if (typeof process !== 'undefined' && process.argv[1] && process.argv[1].endsWit
   assert(standardEngYears(0) === 0, 'zero tokens != 0');
   assert(standardEngYears(null) === 0 && standardEngYears(undefined) === 0, 'nullish != 0');
   assert(standardEngYears('11040000') === 2, 'string coercion / 2 eng-years failed');
+  // dynamic unit picker
+  assert(fmtEngTime(8.7) === '8.7 eng-yrs', `years fmt: ${fmtEngTime(8.7)}`);
+  assert(fmtEngTime(1) === '1 eng-yr', `singular year: ${fmtEngTime(1)}`);
+  assert(fmtEngTime(12) === '12 eng-yrs', `int years: ${fmtEngTime(12)}`);
+  assert(fmtEngTime(0.4).endsWith(' eng-mos'), `months unit: ${fmtEngTime(0.4)}`);
+  assert(fmtEngTime(0.01).endsWith(' eng-days'), `days unit: ${fmtEngTime(0.01)}`);
+  assert(fmtEngTime(1 / 230) === '1 eng-day', `singular day: ${fmtEngTime(1 / 230)}`);
+  assert(fmtEngTime(0.001).endsWith(' eng-hrs'), `hours unit: ${fmtEngTime(0.001)}`);
+  assert(fmtEngTime(0) === '0 eng-hrs', `zero: ${fmtEngTime(0)}`);
   console.log('metric.js self-check OK');
 }

package/public/office.js

@@ -31,6 +31,7 @@ let avatar = null;                  // the player (created in initOffice, off by
 let lastT = 0;                      // last loop timestamp → real dt for motion
 let walkBtn = null, walkHint = null; // on-screen walk-mode affordances (built in JS)
 let nameBtn = null;                  // on-screen nametag-visibility toggle
+let menuBtn = null, menuPanel = null; // ☰ floor-controls menu (holds the toggles)
 let labelsHidden = false;            // hide all agent name chips when true ('n' / button)
 // roaming pet: dir +1 faces right; sit→sleep when it rests a while; `petted` is
 // set while the walking avatar is right next to it (→ wakes + hearts in drawCat).
@@ -572,34 +573,24 @@ function syncLabels() {
   syncHiddenChip();
 }
 
-// A small floor control showing how many desks the user has hidden, toggling
-// them back into view. The hidden STATE is owned by app.js (agent.hidden); proc
-// just collapses them by default and offers a local reveal (no poll needed —
-// rebuild() re-filters lastAll). Anchored to the floor-frame, not the scaled
-// label layer, so it stays a crisp, fixed-size control.
+// The "show hidden desks" control is a row INSIDE the ☰ floor menu (built in
+// ensureWalkUI). The hidden STATE is owned by app.js (agent.hidden); proc just
+// collapses them by default and offers a local reveal (no poll needed —
+// rebuild() re-filters lastAll). This just shows/labels the row by hiddenCount.
 let hiddenChip = null;
 function syncHiddenChip() {
-  const host = world && world.parentElement;
-  if (!host) return;
-  if (!hiddenChip) {
-    hiddenChip = document.createElement('button');
-    hiddenChip.type = 'button';
-    hiddenChip.style.cssText =
-      'position:absolute;left:12px;top:12px;z-index:8;cursor:pointer;' +
-      'appearance:none;-webkit-appearance:none;outline:none;' +
-      'padding:3px 9px;border-radius:11px;white-space:nowrap;' +
-      'background:rgba(14,20,32,0.9);border:1px solid rgba(255,255,255,0.22);' +
-      "font:11px 'IBM Plex Mono', ui-monospace, monospace;color:#cdd8ea;letter-spacing:.3px;";
-    hiddenChip.addEventListener('click', () => { showHidden = !showHidden; rebuild(); });
-    host.appendChild(hiddenChip);
-  }
+  if (!hiddenChip) return; // built lazily in ensureWalkUI
   // count emptied → also drop the reveal flag, else a future hide would stay
-  // visible with no chip to re-collapse it (the chip is gone at count 0).
-  if (!hiddenCount) { showHidden = false; hiddenChip.style.display = 'none'; return; }
-  hiddenChip.style.display = 'inline-block';
+  // revealed with no way to re-collapse it; hide the row when nothing's hidden.
+  if (!hiddenCount) {
+    showHidden = false;
+    hiddenChip.style.display = 'none';
+    return;
+  }
+  hiddenChip.style.display = 'block';
   hiddenChip.textContent = showHidden
-    ? `▾ hide ${hiddenCount} hidden`
-    : `▸ ${hiddenCount} away · show`;
+    ? `▾ Hide ${hiddenCount} hidden`
+    : `▸ Show ${hiddenCount} hidden`;
 }
 
 // ---- camera: pan / zoom / click-to-select -----------------------------------
@@ -1057,7 +1048,7 @@ function updateWalkUI() {
   const on = !!(avatar && avatar.enabled);
   if (walkBtn) {
     walkBtn.textContent = on ? '🚶 walking · G to exit' : '🚶 walk (G)';
-    walkBtn.style.borderColor = on ? '#ff2e88' : 'rgba(255,255,255,0.14)';
+    walkBtn.style.borderColor = on ? '#ff2e88' : 'transparent'; // a menu row: framed only when active
     walkBtn.style.color = on ? '#ff8fc4' : '#cdd6e6';
   }
   if (walkHint) walkHint.style.display = on ? 'block' : 'none';
@@ -1076,41 +1067,89 @@ function updateLabelBtn() {
   nameBtn.style.opacity = labelsHidden ? '0.6' : '1';
 }
 
-// Build the small walk affordances (a toggle button + a hint) over the floor
-// frame, styled inline (index.html / style.css aren't in this lane).
+// Build the floor controls over the floor frame, styled inline (index.html /
+// style.css aren't in this lane). A ☰ button top-left opens a small dropdown
+// holding the toggles (name tags, walk mode, show-hidden) so they don't clutter
+// the floor corners. The walk HINT stays a free-floating strip while walking.
 function ensureWalkUI() {
   const host = world && world.parentElement; // .floor-frame
-  if (!host || walkBtn) return;
-  walkBtn = document.createElement('button');
-  walkBtn.type = 'button';
-  walkBtn.id = 'walkToggle';
-  Object.assign(walkBtn.style, {
-    position: 'absolute', left: '12px', bottom: '12px', zIndex: '6',
-    font: '11px ui-monospace, monospace', background: 'rgba(16,20,28,0.82)',
-    border: '1px solid rgba(255,255,255,0.14)', borderRadius: '6px',
-    padding: '5px 9px', cursor: 'pointer',
+  if (!host || menuBtn) return;
+
+  // ☰ hamburger — toggles the dropdown.
+  menuBtn = document.createElement('button');
+  menuBtn.type = 'button';
+  menuBtn.id = 'floorMenu';
+  menuBtn.textContent = '☰';
+  menuBtn.title = 'Floor controls';
+  menuBtn.setAttribute('aria-label', 'Floor controls');
+  Object.assign(menuBtn.style, {
+    position: 'absolute', left: '12px', top: '12px', zIndex: '8',
+    font: '13px ui-monospace, monospace', lineHeight: '1', color: '#cdd6e6',
+    background: 'rgba(16,20,28,0.82)', border: '1px solid rgba(255,255,255,0.14)',
+    borderRadius: '6px', padding: '6px 9px', cursor: 'pointer',
   });
-  walkBtn.addEventListener('click', () => toggleWalk());
-  host.appendChild(walkBtn);
-  // nametag-visibility toggle (top-left, clear of the bottom controls)
-  nameBtn = document.createElement('button');
-  nameBtn.type = 'button';
-  nameBtn.id = 'nameToggle';
-  nameBtn.title = 'Show / hide agent name tags (N)';
-  Object.assign(nameBtn.style, {
-    // sits just below the top-left "N away · show" hidden-agents chip (which also
-    // anchors top-left), so the two stack instead of overlapping.
-    position: 'absolute', left: '12px', top: '40px', zIndex: '6',
-    font: '11px ui-monospace, monospace', background: 'rgba(16,20,28,0.82)',
-    border: '1px solid rgba(255,255,255,0.14)', borderRadius: '6px',
-    padding: '5px 9px', cursor: 'pointer', color: '#cdd6e6',
+  host.appendChild(menuBtn);
+
+  // Dropdown panel (hidden until ☰ clicked).
+  menuPanel = document.createElement('div');
+  Object.assign(menuPanel.style, {
+    position: 'absolute', left: '12px', top: '44px', zIndex: '8',
+    display: 'none', flexDirection: 'column', gap: '2px', minWidth: '150px',
+    background: 'rgba(14,20,32,0.96)', border: '1px solid rgba(255,255,255,0.16)',
+    borderRadius: '8px', padding: '5px', boxShadow: '0 8px 24px rgba(0,0,0,0.45)',
   });
+  host.appendChild(menuPanel);
+
+  const isOpen = () => menuPanel.style.display !== 'none';
+  const setOpen = (on) => {
+    menuPanel.style.display = on ? 'flex' : 'none';
+    menuBtn.style.borderColor = on ? 'rgba(255,255,255,0.34)' : 'rgba(255,255,255,0.14)';
+  };
+  menuBtn.addEventListener('click', (e) => { e.stopPropagation(); setOpen(!isOpen()); });
+  // Click-outside / Esc dismisses the menu (added once; ensureWalkUI is idempotent).
+  document.addEventListener('click', (e) => {
+    if (isOpen() && e.target !== menuBtn && !menuPanel.contains(e.target)) setOpen(false);
+  });
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && isOpen()) setOpen(false); });
+
+  // A menu row button: full-width, left-aligned, subtle hover. The per-control
+  // update fns (updateLabelBtn / updateWalkUI / syncHiddenChip) own text + active
+  // color; hover only touches background, so they don't fight.
+  const makeRow = (id) => {
+    const b = document.createElement('button');
+    b.type = 'button';
+    if (id) b.id = id;
+    Object.assign(b.style, {
+      font: '11px ui-monospace, monospace', textAlign: 'left', width: '100%',
+      color: '#cdd6e6', background: 'transparent', border: '1px solid transparent',
+      borderRadius: '5px', padding: '6px 8px', cursor: 'pointer', whiteSpace: 'nowrap',
+    });
+    b.addEventListener('mouseenter', () => { b.style.background = 'rgba(255,255,255,0.06)'; });
+    b.addEventListener('mouseleave', () => { b.style.background = 'transparent'; });
+    menuPanel.appendChild(b);
+    return b;
+  };
+
+  // Name-tags toggle.
+  nameBtn = makeRow('nameToggle');
+  nameBtn.title = 'Show / hide agent name tags (N)';
   nameBtn.addEventListener('click', () => toggleLabels());
-  host.appendChild(nameBtn);
   updateLabelBtn();
+
+  // Walk-mode toggle.
+  walkBtn = makeRow('walkToggle');
+  walkBtn.addEventListener('click', () => toggleWalk());
+
+  // Show-hidden toggle — syncHiddenChip shows/labels it only when desks are hidden.
+  hiddenChip = makeRow();
+  hiddenChip.addEventListener('click', () => { showHidden = !showHidden; rebuild(); });
+  syncHiddenChip();
+
+  // Walk hint — a free-floating strip bottom-left, shown only while walking.
   walkHint = document.createElement('div');
   Object.assign(walkHint.style, {
-    position: 'absolute', left: '12px', bottom: '40px', zIndex: '6',
+    // bottom:48 clears the #recenter button (bottom:12) when both show while walking.
+    position: 'absolute', left: '12px', bottom: '48px', zIndex: '6',
     font: '11px ui-monospace, monospace', color: '#9aa6ba',
     background: 'rgba(16,20,28,0.82)', border: '1px solid rgba(255,255,255,0.10)',
     borderRadius: '6px', padding: '4px 8px', display: 'none', maxWidth: '250px',

package/public/style.css

@@ -260,11 +260,13 @@ html, body {
 /* top-bar panel toggle + edge reopen handle */
 .panel-toggle {
   font-size: 16px; line-height: 1; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
   width: 38px; height: 34px; padding: 0; margin-left: 4px;
   border: 1px solid var(--line); border-radius: 4px;
   background: #0c111b; color: var(--ink);
   transition: border-color .15s, box-shadow .15s, transform .05s;
 }
+.panel-toggle[hidden] { display: none; }
 .panel-toggle:hover { border-color: var(--cyan); }
 .panel-toggle:active { transform: translateY(1px); }
 .panel-toggle.active { border-color: var(--cyan); box-shadow: 0 0 10px rgba(92,208,255,.3); }

package/server.js

@@ -10,6 +10,7 @@ import { execFile } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import { getUsage } from './lib/usage.js';
 import { getLive } from './lib/live.js';
+import { installInfo } from './lib/install.js';
 import { identityFor, overrideFor, setOverride } from './lib/roster.js';
 import { getTranscript } from './lib/transcript.js';
 import * as control from './lib/control.js';
@@ -18,6 +19,11 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const PUBLIC = path.join(__dirname, 'public');
 const PORT = process.env.PORT ? Number(process.env.PORT) : 4313;
 const HOST = process.env.HOST || '127.0.0.1';
+// Which leaderboard backend the dashboard talks to. Override per-run for
+// local/staging (LEADERBOARD_API=http://localhost:8787 npm start); defaults to
+// the production Worker. Injected into the page via /env.js — replaces the old
+// sticky localStorage override (a stale value silently broke the prod board).
+const LEADERBOARD_API = process.env.LEADERBOARD_API || 'https://agency-leaderboard.henryz2004.workers.dev';
 
 const MIME = {
   '.html': 'text/html; charset=utf-8',
@@ -65,13 +71,29 @@ function buildState() {
     return { ...a, ...ident, ...ctrl, name: ov.name || ident.name, hidden: ov.hidden };
   });
 
+  // Leaderboard ranks output SINCE you joined Agency, not your whole Claude
+  // history — so surface a per-install slice alongside the lifetime totals.
+  const { day: installedDay } = installInfo();
+  const sinceInstall = sumSince(usage.daily, installedDay);
+
   return {
     generatedAt: Date.now(),
     live: { agents, teams: live.teams, now: live.now },
-    usage,
+    usage: { ...usage, installedDay, sinceInstall },
   };
 }
 
+// Sum output tokens (+ active days) on or after the install day. Daily bucket
+// dates are local YYYY-MM-DD (en-CA), so a lexical >= compares correctly.
+function sumSince(daily, day) {
+  let out = 0;
+  let days = 0;
+  for (const d of daily || []) {
+    if (d.date >= day) { out += d.out || 0; days += 1; }
+  }
+  return { out, days };
+}
+
 function sendJSON(res, code, obj) {
   const body = JSON.stringify(obj);
   res.writeHead(code, {
@@ -336,6 +358,13 @@ const server = http.createServer((req, res) => {
       });
       return;
     }
+    // Runtime config for the frontend (classic script → runs before the deferred
+    // leaderboard module). Lets server-side env reach the browser with no build step.
+    if (pathname === '/env.js') {
+      res.writeHead(200, { 'Content-Type': 'text/javascript; charset=utf-8', 'Cache-Control': 'no-store' });
+      res.end(`window.AGENCY_LEADERBOARD_API=${JSON.stringify(LEADERBOARD_API)};`);
+      return;
+    }
     serveStatic(req, res);
   } catch (err) {
     sendJSON(res, 500, { error: String(err && err.message ? err.message : err) });