@henryz2004/agency 1.0.0

package/public/style.css

@@ -0,0 +1,506 @@
+:root {
+  --bg: #0a0d14;
+  --bg2: #0e121c;
+  --card: #131927;
+  --card2: #0f1420;
+  --line: #222c40;
+  --line2: #1a2336;
+  --ink: #cfd9ea;
+  --muted: #6b7689;
+  --muted2: #4a5266;
+  --green: #39d98a;
+  --cyan: #5cd0ff;
+  --gold: #ffd166;
+  --pink: #ff5cba;
+  --pixel: 'Press Start 2P', ui-monospace, monospace;
+  --term: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
+  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
+
+  /* ---- type scale ---------------------------------------------------------
+     One mono ramp for body/labels, a few display sizes, and a small pixel set —
+     replaces the old ~18 ad-hoc px values. Press Start 2P renders ~1.4x larger
+     per px than the mono, so its sizes are intentionally the smaller numbers.
+     Keep the pixel font for ONLY: the wordmark, topbar stat numbers, section
+     caps/titles, and tiny chips. Everything else is mono. */
+  --t-fine: 11px;   /* captions / meta / fine print */
+  --t-sub:  12px;   /* secondary labels, hints, notes */
+  --t-body: 13px;   /* body, list rows (the default) */
+  --t-val:  15px;   /* emphasized inline values / info-card name */
+  --t-h:    20px;   /* small headline numbers */
+  --t-big:  28px;   /* stat numbers */
+  --t-hero: 44px;   /* hero numbers (headcount, payroll, burn) */
+  --p-chip: 8px;    /* pixel chips / badges / tier / lead */
+  --p-cap:  9px;    /* pixel section caps / card titles / toggles */
+  --p-num:  14px;   /* pixel display numbers */
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  background:
+    radial-gradient(1200px 600px at 70% -10%, #161d2e 0%, transparent 60%),
+    var(--bg);
+  color: var(--ink);
+  font-family: var(--term);
+  /* a calm 13px baseline so inherited text isn't the browser's silent 16px */
+  font-size: var(--t-body);
+  overflow: hidden;
+}
+
+/* ---- CRT scanlines + flicker overlay ----
+   The retro CRT effect belongs on the OFFICE FLOOR, not on the text panels. We
+   keep the z-index BELOW the side panel (z-30) and chat panel (z-200) so those
+   render on top of the scanlines and their text stays crisp; the floor (lower
+   z) still gets the full effect. Scanline contrast is also dialled back from the
+   old 0.16 so even where it does show, it never muddies type. */
+.scanlines {
+  position: fixed; inset: 0; pointer-events: none; z-index: 5;
+  background:
+    repeating-linear-gradient(0deg, rgba(0,0,0,0.09) 0 1px, transparent 1px 3px),
+    radial-gradient(140% 120% at 50% 50%, transparent 62%, rgba(0,0,0,0.4) 100%);
+  mix-blend-mode: multiply;
+  animation: flicker 6s infinite;
+}
+@keyframes flicker { 0%,97%,100% { opacity: 1; } 98% { opacity: 0.9; } 99% { opacity: 0.96; } }
+
+/* ---- top bar ---- */
+.topbar {
+  display: flex; align-items: center; justify-content: space-between;
+  height: 72px; padding: 0 20px;
+  background: linear-gradient(180deg, #121828, #0c111b);
+  border-bottom: 2px solid var(--line);
+}
+.brand { display: flex; align-items: center; gap: 14px; }
+.logo { font-size: 26px; filter: drop-shadow(0 0 8px rgba(57,217,138,0.4)); }
+.brand-name {
+  font-family: var(--pixel); font-size: 16px; letter-spacing: 2px;
+  color: #fff; text-shadow: 0 0 10px rgba(92,208,255,0.5), 2px 2px 0 #1b2740;
+}
+.brand-sub { font-size: var(--t-sub); color: var(--muted); margin-top: 3px; letter-spacing: 1px; }
+
+/* right side of the topbar: the live stats, then a divided controls cluster */
+.topright { display: flex; align-items: center; gap: 22px; }
+.topstats { display: flex; align-items: center; gap: 20px; }
+.topctrls {
+  display: flex; align-items: center; gap: 10px;
+  padding-left: 22px; border-left: 1px solid var(--line);
+}
+.tstat { text-align: center; }
+.tstat-val { font-family: var(--pixel); font-size: var(--p-num); line-height: 1.1; color: var(--green); text-shadow: 0 0 10px rgba(57,217,138,0.4); }
+/* labels use a readable mono (IBM Plex Mono); big topbar numbers use Press Start 2P
+   (pixel reads great at display size). Pixel identity = art + headers + numbers. */
+.tstat-lbl { font-family: var(--term); font-size: var(--t-fine); color: var(--muted); margin-top: 4px; letter-spacing: 0.5px; text-transform: uppercase; }
+/* burn unit ("tok/min") rides smaller next to the live number so the figure leads;
+   mono (not the blocky pixel) so it reads as a clean unit, not a second stat. */
+.tstat-unit { font-family: var(--term); font-size: var(--t-fine); color: var(--muted); text-shadow: none; letter-spacing: 0.5px; }
+.live-pill {
+  font-family: var(--pixel); font-size: var(--p-chip); color: var(--pink); letter-spacing: 2px;
+  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
+  border: 1px solid #3a2336; border-radius: 4px; background: #1a1018;
+}
+.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); animation: pulse 1.4s infinite; }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
+
+/* "just finished / unread" pill: a topbar chip counting agents that wrapped a
+   turn the user hasn't opened yet. Cyan = "new, for you" (distinct from the gold
+   "needs-you" waiting pill and the pink LIVE rec). Click jumps to the first. */
+.unread-pill {
+  font-family: var(--pixel); font-size: var(--p-chip); letter-spacing: 1px;
+  color: #04222e; background: var(--cyan); border: 1px solid var(--cyan);
+  border-radius: 999px; padding: 6px 11px; cursor: pointer; line-height: 1;
+  white-space: nowrap; box-shadow: 0 0 10px rgba(92,208,255,0.45);
+  animation: unread-pulse 1.8s ease-in-out infinite;
+}
+.unread-pill:hover { filter: brightness(1.1); }
+.unread-pill.hidden { display: none; }
+@keyframes unread-pulse { 0%,100% { box-shadow: 0 0 10px rgba(92,208,255,0.45); } 50% { box-shadow: 0 0 16px rgba(92,208,255,0.75); } }
+
+/* sound toggle */
+.sound-toggle {
+  font-size: 16px; line-height: 1; cursor: pointer;
+  width: 38px; height: 34px; padding: 0;
+  border: 1px solid var(--line); border-radius: 4px;
+  background: #0c111b; color: var(--ink);
+  transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s;
+}
+.sound-toggle:hover { border-color: var(--cyan); }
+.sound-toggle:active { transform: translateY(1px); }
+.sound-toggle.on { border-color: var(--green); box-shadow: 0 0 10px rgba(57,217,138,0.35); }
+
+/* ---- layout ---- */
+.layout { display: flex; height: calc(100% - 72px); position: relative; }
+.floor-col { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; padding: 16px; gap: 12px; }
+
+/* The floor is a fixed viewport; the office pans/zooms inside it via .world. */
+.floor-frame {
+  position: relative; flex: 1 1 auto; min-height: 0;
+  background: linear-gradient(180deg, #0b0f18, #0a0d14);
+  border-radius: 8px; overflow: hidden; padding: 0;
+  box-shadow: inset 0 0 0 2px var(--line), inset 0 0 60px rgba(0,0,0,0.6), 0 0 0 4px #0a0d14;
+  cursor: grab; touch-action: none;
+}
+.world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
+#office {
+  display: block;
+  image-rendering: pixelated; image-rendering: crisp-edges;
+}
+.label-layer { position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: 0 0; }
+
+/* recenter button — only appears once the camera has been moved */
+.recenter {
+  position: absolute; left: 12px; bottom: 12px; z-index: 20;
+  display: none; align-items: center; gap: 6px; cursor: pointer;
+  font-family: var(--term); font-size: var(--t-body); line-height: 1;
+  padding: 6px 11px; border: 1px solid var(--line); border-radius: 5px;
+  background: rgba(12,16,26,0.9); color: var(--ink);
+  transition: border-color .15s, color .15s, transform .05s;
+}
+.recenter.show { display: inline-flex; }
+.recenter:hover { border-color: var(--cyan); color: #fff; }
+.recenter:active { transform: translateY(1px); }
+
+/* one-time gesture hint, fades on its own */
+.floor-hint {
+  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
+  z-index: 18; pointer-events: none; white-space: nowrap;
+  font-size: var(--t-sub); color: var(--muted); letter-spacing: 0.5px;
+  background: rgba(8,11,18,0.6); padding: 4px 12px; border-radius: 20px;
+  animation: hintfade 1.2s ease 6s forwards;
+}
+@keyframes hintfade { to { opacity: 0; visibility: hidden; } }
+
+/* ---- in-world name tags (scale with the floor; can never overlap) ----
+   These ride inside the floor's scaled label layer, so their px values are in
+   BUFFER units (multiplied by the zoom) — they are deliberately NOT on the
+   screen-space type scale above. Leave them be. */
+.tag {
+  position: absolute; transform: translateX(-50%);
+  display: inline-flex; align-items: center; gap: 4px;
+  max-width: 70px; padding: 1px 5px; box-sizing: border-box;
+  background: rgba(8,11,18,0.78); border: 1px solid var(--line2);
+  border-radius: 4px; white-space: nowrap; pointer-events: none;
+}
+.tag-name { font-size: 13px; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
+.tag-chip { width: 6px; height: 6px; border-radius: 1px; flex: 0 0 auto; }
+/* gold "PM" pill on the lead's nameplate (matches the in-world crown) */
+.tag-lead {
+  font-family: var(--pixel); font-size: 6px; line-height: 1; letter-spacing: 1px;
+  color: #2a1f05; background: var(--gold); border-radius: 2px;
+  padding: 1px 2px; flex: 0 0 auto;
+}
+
+.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
+.dot.busy { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 1.1s infinite; }
+.dot.idle { background: #4a5568; }
+.dot.done { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
+.dot.shell { background: #ffb454; box-shadow: 0 0 6px #ffb454; animation: pulse 1.4s infinite; }
+
+/* ---- hover / selection info card (screen-space, always readable) ---- */
+.info-card {
+  position: absolute; z-index: 40; pointer-events: none;
+  transform: translate(-50%, -100%);
+  min-width: 150px; max-width: 250px; padding: 7px 10px 8px;
+  background: rgba(8,11,18,0.97); border: 1px solid var(--line);
+  border-radius: 6px; box-shadow: 0 8px 26px rgba(0,0,0,0.6);
+  margin-top: -8px;
+}
+.info-card.below { transform: translate(-50%, 0); margin-top: 8px; }
+.ic-head { display: flex; align-items: center; gap: 6px; }
+.ic-name { font-size: var(--t-val); color: var(--gold); line-height: 1; }
+.ic-tier { font-family: var(--pixel); font-size: var(--p-chip); letter-spacing: 1px; text-transform: uppercase; margin-left: auto; }
+/* role tags in the card head: PM gold, teammate cyan */
+.ic-lead, .ic-teammate {
+  font-family: var(--pixel); font-size: var(--p-chip); line-height: 1; letter-spacing: 1px;
+  border-radius: 2px; padding: 2px 3px;
+}
+.ic-lead { color: #2a1f05; background: var(--gold); }
+.ic-teammate { color: #06231f; background: var(--cyan); }
+/* push the model tier to the far right even with a role tag present */
+.ic-head .ic-lead, .ic-head .ic-teammate { margin-left: 4px; }
+.ic-head .ic-lead + .ic-tier, .ic-head .ic-teammate + .ic-tier { margin-left: 6px; }
+.ic-sub { font-size: var(--t-sub); color: var(--muted); margin-top: 3px; }
+.ic-sub .ic-dept { color: var(--cyan); }
+.ic-status { font-size: var(--t-sub); margin-top: 4px; color: var(--ink); }
+.ic-status.working { color: var(--green); }
+.ic-status.shell { color: #ffb454; }
+.ic-status.done { color: var(--cyan); }
+.ic-task { color: var(--gold); font-style: italic; }
+.ic-foot { font-size: var(--t-fine); color: var(--muted2); margin-top: 5px; display: flex; gap: 10px; flex-wrap: wrap; }
+.ic-foot .ic-sub-badge { color: #46d6cf; }
+.ic-foot .ic-oc { color: #ff9f43; }
+.ic-foot .ic-codex { color: #ff8a3d; }
+.ic-foot .ic-slug { color: #ffb27a; }
+
+.empty-banner {
+  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
+  background: rgba(8,11,18,0.95); border: 1px dashed var(--line);
+  padding: 14px 20px; border-radius: 6px; font-size: var(--t-val); color: var(--muted);
+}
+.empty-banner code { color: var(--green); background: #0c1119; padding: 1px 6px; border-radius: 3px; }
+.hidden { display: none; }
+
+/* ---- side panel (hovering overlay, collapsible) ---- */
+.panel {
+  position: absolute; top: 0; right: 0; z-index: 30;
+  width: 340px; max-width: 86vw; height: 100%; overflow-y: auto;
+  padding: 16px 16px 40px;
+  /* a touch more opaque than before so panel text reads cleanly over the floor
+     + scanlines (legibility pass) while keeping the glassy backdrop blur. */
+  background: rgba(12, 16, 26, 0.93);
+  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
+  border-left: 1px solid var(--line);
+  box-shadow: -10px 0 40px rgba(0,0,0,0.55);
+  display: flex; flex-direction: column; gap: 12px;
+  transition: transform 0.28s ease;
+}
+.panel.collapsed { transform: translateX(100%); }
+
+/* top-bar panel toggle + edge reopen handle */
+.panel-toggle {
+  font-size: 16px; line-height: 1; cursor: pointer;
+  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: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); }
+.panel-handle {
+  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
+  z-index: 25; cursor: pointer; display: none;
+  align-items: center; justify-content: center;
+  width: 22px; height: 66px; font-size: var(--t-sub);
+  background: rgba(12,16,26,0.92); color: var(--cyan);
+  border: 1px solid var(--line); border-right: none;
+  border-radius: 6px 0 0 6px; box-shadow: -6px 0 18px rgba(0,0,0,0.45);
+}
+.panel-handle:hover { color: #fff; border-color: var(--cyan); }
+.panel-handle.show { display: flex; }
+.panel::-webkit-scrollbar { width: 8px; }
+.panel::-webkit-scrollbar-thumb { background: #222c40; border-radius: 4px; }
+
+.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
+/* collapsible cards (Assumptions, All-time ledger) — these are set-once / static
+   panels that used to take up permanent room; folding them gives the office more
+   space while keeping them one click away. */
+.card-fold { padding: 0; }
+.card-fold > summary {
+  list-style: none; cursor: pointer; padding: 14px; user-select: none;
+  border-radius: 8px; position: relative; padding-right: 30px;
+}
+.card-fold > summary::-webkit-details-marker { display: none; }
+.card-fold > summary::after {
+  content: '▸'; position: absolute; right: 14px; top: 50%;
+  transform: translateY(-50%); color: var(--muted); font-size: var(--t-sub);
+  transition: transform .15s;
+}
+.card-fold[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
+.card-fold > summary:hover { background: rgba(255,255,255,0.025); }
+.card-fold > summary:hover::after { color: var(--cyan); }
+/* the folded body gets its own padding (summary already has 14px top) */
+.card-fold > :not(summary) { margin-left: 14px; margin-right: 14px; }
+.card-fold > :last-child { margin-bottom: 14px; }
+/* card titles keep Press Start 2P (the headline accent) but bright ink + spacing
+   so they read at a glance instead of straining the eye. */
+.card-title { font-family: var(--pixel); font-size: var(--p-cap); line-height: 1.4; letter-spacing: 1px; color: var(--cyan); text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
+.card-title-hint { font-family: var(--term); font-size: var(--t-sub); color: var(--muted); letter-spacing: 0; text-transform: none; }
+.card-note { font-size: var(--t-sub); color: var(--muted); margin-top: 2px; }
+
+/* ---- sidebar Now | Analytics view toggle ---- */
+.view-toggle {
+  display: flex; gap: 4px; padding: 4px;
+  background: #0c111b; border: 1px solid var(--line); border-radius: 8px;
+}
+.vt-btn {
+  flex: 1 1 0; cursor: pointer; padding: 8px 6px;
+  font-family: var(--pixel); font-size: var(--p-cap); letter-spacing: 1px; text-transform: uppercase;
+  color: var(--muted); background: transparent; border: none; border-radius: 5px;
+  transition: color .15s, background .15s, box-shadow .15s;
+}
+.vt-btn:hover { color: var(--ink); }
+.vt-btn.active {
+  color: #04222e; background: var(--cyan);
+  box-shadow: 0 0 10px rgba(92,208,255,0.35);
+}
+.view-now, .view-analytics { display: flex; flex-direction: column; gap: 12px; }
+.view-now.hidden, .view-analytics.hidden { display: none; }
+
+/* ---- "Now" view cards ---- */
+.now-card { background: linear-gradient(180deg, #102016, #0c1410); border-color: #1d5a3a; }
+.now-card #nowBurn { font-size: var(--t-hero); line-height: 0.95; color: #fff; text-shadow: 0 0 18px rgba(57,217,138,0.55); }
+/* live output-token rate sparkline (last ~30 min), drawn under the burn figure */
+.burnspark {
+  width: 100%; height: 46px; display: block; margin-top: 10px;
+  image-rendering: pixelated;
+}
+.now-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
+.now-stat { text-align: center; }
+.now-k { font-size: var(--t-big); line-height: 1; color: var(--green); }
+.now-stat:nth-child(2) .now-k { color: #ffb454; }
+.now-stat:nth-child(3) .now-k { color: var(--muted); }
+.now-l { font-size: var(--t-fine); color: var(--muted); margin-top: 3px; line-height: 1.1; }
+.now-bar {
+  display: flex; height: 10px; margin-top: 12px; border-radius: 5px; overflow: hidden;
+  background: #0c1119; border: 1px solid var(--line2);
+}
+.now-seg { height: 100%; }
+.now-seg-working { background: var(--green); }
+.now-seg-shell { background: #ffb454; }
+.now-seg-idle { background: #3a4358; }
+.now-foot { font-size: var(--t-sub); color: var(--muted); margin-top: 8px; }
+
+/* recent tool calls (Now view) */
+.nowtoollist { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.nowtool-head { display: flex; justify-content: space-between; font-size: var(--t-body); }
+.nowtool-name { color: var(--ink); }
+.nowtool-val { color: var(--gold); }
+.nowtool-bar { height: 7px; background: #0c1119; border-radius: 4px; overflow: hidden; margin-top: 3px; border: 1px solid var(--line2); }
+.nowtool-fill { height: 100%; background: linear-gradient(90deg, #2d8f6f, #39d98a); }
+
+/* TODAY card — the prominent "shipped like a team of N today" headline. Green
+   accent (same family as the live "Now" view) so it reads as today's fresh work,
+   distinct from the blue lifetime/recent headcount card below it. */
+.today-card { background: linear-gradient(180deg, #102016, #0c1410); border-color: #1d5a3a; }
+.today-line { font-size: var(--t-body); color: var(--ink); margin-top: 8px; }
+.today-card #tdTeam { font-size: var(--t-hero); line-height: 0.9; color: #fff; text-shadow: 0 0 18px rgba(57,217,138,0.55); }
+.today-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 10px; }
+.td-k { font-size: var(--t-h); color: var(--green); }
+.td-l { font-size: var(--t-fine); color: var(--muted); line-height: 1.1; margin-top: 1px; }
+
+/* headcount card */
+.headcount-card { background: linear-gradient(180deg, #16213a, #101627); border-color: #25406b; }
+.bignum { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
+#hcNum { font-size: var(--t-hero); line-height: 0.9; color: #fff; text-shadow: 0 0 18px rgba(92,208,255,0.55); }
+.bignum-unit { font-family: var(--pixel); font-size: var(--p-cap); color: var(--cyan); }
+/* live payroll-equivalent meter (odometer) */
+.payroll-meter {
+  margin-top: 12px; padding: 10px 12px;
+  background: linear-gradient(180deg, #1a1406, #120d04);
+  border: 1px solid #6e5410; border-radius: 6px;
+  box-shadow: inset 0 0 18px rgba(255,209,102,0.08);
+}
+.pm-label {
+  font-family: var(--pixel); font-size: var(--p-chip); line-height: 1.5; letter-spacing: 1px;
+  color: var(--gold); text-transform: uppercase;
+  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
+}
+.pm-rate { font-family: var(--term); font-size: var(--t-sub); letter-spacing: 0; text-transform: none; color: var(--green); }
+.pm-value {
+  /* 30px (not the 44px hero) so a 7–8 figure payroll fits the panel without
+     clipping at the card edge; still the boldest number in the card. */
+  margin-top: 6px; font-family: var(--term); font-size: 30px; line-height: 0.95;
+  color: var(--gold); letter-spacing: 0.5px; white-space: nowrap;
+  text-shadow: 0 0 14px rgba(255,209,102,0.5), 1px 1px 0 #5a4410;
+  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
+}
+.pm-cents { font-size: var(--t-h); color: #b9923a; }
+
+.heads { width: 100%; height: auto; image-rendering: pixelated; margin: 12px 0 6px; }
+.hc-compare { font-size: var(--t-body); color: var(--ink); }
+.hc-compare b { color: var(--gold); font-size: var(--t-h); }
+.hc-cap { font-size: var(--t-fine); color: var(--muted2); }
+.hc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; border-top: 1px solid var(--line2); padding-top: 10px; }
+.hc-k { font-size: var(--t-h); color: var(--green); }
+.hc-l { font-size: var(--t-fine); color: var(--muted); line-height: 1.1; }
+
+/* sliders */
+.slider { margin-top: 12px; }
+.slider label { display: flex; justify-content: space-between; font-size: var(--t-sub); color: var(--muted); }
+.slider label b { color: var(--ink); }
+.slider input[type=range] { width: 100%; margin-top: 5px; accent-color: var(--green); height: 4px; }
+
+/* model mix */
+.modelbar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; margin-top: 10px; background: #0c1119; border: 1px solid var(--line2); }
+.modelbar .seg { height: 100%; }
+.legend { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
+.legend-item { display: flex; align-items: center; gap: 8px; font-size: var(--t-body); }
+.swatch { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; }
+.lg-name { color: var(--ink); flex: 1 1 auto; }
+.lg-val { color: var(--muted); }
+
+/* departments */
+.deptlist { display: flex; flex-direction: column; gap: 11px; margin-top: 10px; }
+.dept-head { display: flex; justify-content: space-between; font-size: var(--t-body); }
+.dept-name { color: var(--ink); }
+.dept-val { color: var(--gold); }
+/* quiet "tok" unit suffix so the project value reads clearly as token output */
+.dept-unit { color: var(--muted); font-size: var(--t-fine); }
+.dept-bar { height: 7px; background: #0c1119; border-radius: 4px; overflow: hidden; margin: 3px 0; border: 1px solid var(--line2); }
+.dept-fill { height: 100%; background: linear-gradient(90deg, #2d6fb0, #5cd0ff); }
+.dept-meta { font-size: var(--t-fine); color: var(--muted2); }
+/* live "an agent is here now" dot before an active department's name */
+.dept-live { color: var(--green); font-size: var(--t-fine); margin-right: 5px; text-shadow: 0 0 6px var(--green); }
+.dept-more { font-size: var(--t-fine); color: var(--muted2); margin-top: 2px; }
+.dept-empty { font-size: var(--t-sub); color: var(--muted); }
+.dept-alltime { font-size: var(--t-fine); color: var(--muted2); font-style: italic; }
+
+/* daily */
+.daily { width: 100%; display: block; margin-top: 8px; }
+
+/* ledger */
+.ledger { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
+.ledger-row { display: flex; justify-content: space-between; font-size: var(--t-body); color: var(--muted); border-bottom: 1px dotted var(--line2); padding-bottom: 3px; }
+.ledger-row b { color: var(--ink); }
+
+@media (max-width: 1000px) {
+  .panel { width: 86vw; }
+}
+
+/* ===== Leaderboard (opt-in social layer) ===== */
+.lb-overlay {
+  position: fixed; inset: 0; z-index: 200;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(4, 6, 12, 0.72);
+  backdrop-filter: blur(3px);
+}
+.lb-overlay.hidden { display: none; } /* compound selector beats .hidden source-order */
+.lb-modal {
+  position: relative;
+  width: min(520px, 92vw); max-height: 86vh; overflow: hidden;
+  display: flex; flex-direction: column;
+  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
+  padding: 20px;
+}
+.lb-close {
+  position: absolute; top: 10px; right: 12px;
+  background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer;
+}
+.lb-close:hover { color: var(--ink); }
+.lb-head h2 { margin: 0 0 4px; font-family: var(--pixel); font-size: var(--p-cap); color: var(--gold); }
+.lb-sub { margin: 0 0 14px; color: var(--muted); font: 12px var(--mono); }
+.lb-body { overflow-y: auto; }
+.lb-note { color: var(--ink); font: 13px/1.5 var(--mono); margin: 0 0 12px; }
+.lb-note b { color: var(--gold); }
+.lb-preview { color: var(--cyan); font: 12px var(--mono); margin: 0 0 12px; }
+.lb-form { display: flex; gap: 8px; margin-bottom: 8px; }
+.lb-form input {
+  flex: 1; background: var(--card2); border: 1px solid var(--line); border-radius: 6px;
+  color: var(--ink); font: 13px var(--mono); padding: 8px 10px;
+}
+.lb-form input:focus { outline: none; border-color: var(--cyan); }
+.lb-body button {
+  background: var(--card2); border: 1px solid var(--line); border-radius: 6px;
+  color: var(--ink); font: 12px var(--mono); padding: 8px 14px; cursor: pointer;
+}
+.lb-body button:hover { border-color: var(--cyan); color: #fff; }
+.lb-body button:disabled { opacity: 0.5; cursor: default; }
+.lb-body button.lb-danger:hover { border-color: var(--pink); color: var(--pink); }
+.lb-msg { color: var(--muted); font: 11px var(--mono); min-height: 14px; margin-top: 6px; }
+.lb-you { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
+.lb-you-handle { color: var(--gold); font: 15px var(--mono); }
+.lb-you-rank { color: var(--ink); font: 13px var(--mono); }
+.lb-actions { display: flex; gap: 8px; margin-bottom: 6px; }
+.lb-list { margin-top: 14px; border-top: 1px solid var(--line2); padding-top: 10px; }
+.lb-row {
+  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px;
+  padding: 6px 8px; border-radius: 5px; font: 13px var(--mono); color: var(--ink);
+}
+.lb-row:nth-child(even) { background: var(--card2); }
+.lb-mine { outline: 1px solid var(--gold); background: rgba(255, 209, 102, 0.08) !important; }
+.lb-rank { color: var(--muted); }
+.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lb-val { color: var(--green); text-align: right; }

package/public/ui.js

@@ -0,0 +1,50 @@
+// ui.js — wires the stats DRAWER to the renderer. The office camera (pan / zoom /
+// recenter) is driven by gestures inside office.js.
+//
+// The stats panel is a DRAWER you summon, not a pinned rail: the office is always
+// full-bleed (we never reserve width for it), and opening the drawer overlays it
+// on the right. It starts CLOSED so the floor is the hero on load and nothing
+// auto-blocks the office. Per-agent detail lives in a floating card beside the
+// agent (chat-panel.js), not here.
+
+const $ = (id) => document.getElementById(id);
+
+export function initUI() {
+  const panel = document.querySelector('.panel');
+  const toggle = $('panelToggle');
+  const handle = $('panelHandle');
+
+  let open = loadOpen();
+
+  function apply() {
+    if (panel) panel.classList.toggle('collapsed', !open);
+    if (toggle) toggle.classList.toggle('active', open);
+    if (handle) handle.classList.toggle('show', !open);
+    // Office stays full-bleed: the drawer overlays it rather than shrinking it,
+    // so we never reserve width (no setReservedRight call).
+  }
+  function set(next) {
+    open = next;
+    try {
+      localStorage.setItem('agency.panelOpen', open ? '1' : '0');
+    } catch {
+      /* ignore */
+    }
+    apply();
+  }
+
+  if (toggle) toggle.addEventListener('click', () => set(!open));
+  if (handle) handle.addEventListener('click', () => set(true));
+
+  apply();
+}
+
+function loadOpen() {
+  try {
+    // Default CLOSED so the office is unobstructed on load; remembers the user's
+    // choice once they open it.
+    return localStorage.getItem('agency.panelOpen') === '1';
+  } catch {
+    return false;
+  }
+}

package/scripts/_pixpng.mjs

@@ -0,0 +1,104 @@
+// _pixpng.mjs — a tiny zero-dependency pixel canvas + PNG encoder, shared by the
+// charsheet / animsheet generators. The character & pet renderers in
+// public/sprites.js only use fillStyle + fillRect (+ save/translate/scale/restore
+// for the cat's flip), so this shim is enough to run them headlessly in Node and
+// dump the result to a PNG via stdlib zlib + a hand-rolled CRC32.
+import zlib from 'node:zlib';
+
+export function parseColor(s) {
+  if (s[0] === '#') {
+    let h = s.slice(1);
+    if (h.length === 3) h = h.replace(/./g, (c) => c + c);
+    const n = parseInt(h, 16);
+    return [(n >>> 16) & 255, (n >>> 8) & 255, n & 255, 255];
+  }
+  const m = (s.match(/[\d.]+/g) || [0, 0, 0, 0]).map(Number); // rgba(...)
+  return [m[0] | 0, m[1] | 0, m[2] | 0, Math.round((m[3] ?? 1) * 255)];
+}
+
+// Canvas2D-ish context backed by an RGBA buffer. Supports the subset sprites.js
+// uses: fillStyle, fillRect, and a scale+translate transform stack (enough for an
+// axis-aligned mirror — the cat's `scale(-1,1)` flip).
+export class Ctx {
+  constructor(w, h, bg) {
+    this.W = w; this.H = h; this.buf = new Uint8Array(w * h * 4); this._c = [0, 0, 0, 255];
+    this._t = { sx: 1, sy: 1, tx: 0, ty: 0 }; this._stack = [];
+    if (bg != null) { const [r, g, b] = parseColor(bg); for (let i = 0; i < this.buf.length; i += 4) { this.buf[i] = r; this.buf[i + 1] = g; this.buf[i + 2] = b; this.buf[i + 3] = 255; } }
+  }
+  set fillStyle(s) { this._c = parseColor(s); }
+  get fillStyle() { return this._c; }
+  save() { this._stack.push({ ...this._t }); }
+  restore() { if (this._stack.length) this._t = this._stack.pop(); }
+  translate(x, y) { this._t.tx += this._t.sx * x; this._t.ty += this._t.sy * y; }
+  scale(x, y) { this._t.sx *= x; this._t.sy *= y; }
+  fillRect(x, y, w, h) {
+    const [r, g, b, a] = this._c;
+    if (a === 0) return;
+    const T = this._t;
+    const x0 = T.sx * x + T.tx, y0 = T.sy * y + T.ty, x1 = T.sx * (x + w) + T.tx, y1 = T.sy * (y + h) + T.ty;
+    const rx = Math.round(Math.min(x0, x1)), ry = Math.round(Math.min(y0, y1));
+    const rw = Math.round(Math.abs(x1 - x0)), rh = Math.round(Math.abs(y1 - y0));
+    const X1 = Math.max(0, rx), Y1 = Math.max(0, ry), X2 = Math.min(this.W, rx + rw), Y2 = Math.min(this.H, ry + rh);
+    const ia = a / 255, na = 1 - ia;
+    for (let yy = Y1; yy < Y2; yy++) {
+      let o = (yy * this.W + X1) * 4;
+      for (let xx = X1; xx < X2; xx++, o += 4) {
+        if (a === 255) { this.buf[o] = r; this.buf[o + 1] = g; this.buf[o + 2] = b; }
+        else { this.buf[o] = r * ia + this.buf[o] * na; this.buf[o + 1] = g * ia + this.buf[o + 1] * na; this.buf[o + 2] = b * ia + this.buf[o + 2] * na; }
+        this.buf[o + 3] = 255;
+      }
+    }
+  }
+}
+
+export function upscale(buf, w, h, s) {
+  if (s === 1) return buf;
+  const OW = w * s, out = new Uint8Array(OW * h * s * 4);
+  for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
+    const o = (y * w + x) * 4;
+    for (let dy = 0; dy < s; dy++) { let oo = (((y * s + dy) * OW) + x * s) * 4; for (let dx = 0; dx < s; dx++, oo += 4) { out[oo] = buf[o]; out[oo + 1] = buf[o + 1]; out[oo + 2] = buf[o + 2]; out[oo + 3] = 255; } }
+  }
+  return out;
+}
+
+const CRC_TABLE = (() => {
+  const t = new Uint32Array(256);
+  for (let n = 0; n < 256; n++) { let c = n; for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1; t[n] = c >>> 0; }
+  return t;
+})();
+function crc32(buf) { let c = 0xffffffff; for (let i = 0; i < buf.length; i++) c = CRC_TABLE[(c ^ buf[i]) & 255] ^ (c >>> 8); return (c ^ 0xffffffff) >>> 0; }
+function chunk(type, data) {
+  const len = Buffer.alloc(4); len.writeUInt32BE(data.length, 0);
+  const body = Buffer.concat([Buffer.from(type, 'ascii'), data]);
+  const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(body), 0);
+  return Buffer.concat([len, body, crc]);
+}
+export function encodePNG(w, h, rgba) {
+  const sig = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(w, 0); ihdr.writeUInt32BE(h, 4);
+  ihdr[8] = 8; ihdr[9] = 6; // 8-bit, RGBA
+  const rowLen = w * 4, raw = Buffer.alloc(h * (1 + rowLen));
+  const src = Buffer.from(rgba.buffer, rgba.byteOffset, rgba.length);
+  for (let y = 0; y < h; y++) { raw[y * (1 + rowLen)] = 0; src.copy(raw, y * (1 + rowLen) + 1, y * rowLen, (y + 1) * rowLen); }
+  const idat = zlib.deflateSync(raw, { level: 9 });
+  return Buffer.concat([sig, chunk('IHDR', ihdr), chunk('IDAT', idat), chunk('IEND', Buffer.alloc(0))]);
+}
+
+// Structural self-check: shim fill + alpha blend + a valid PNG that round-trips.
+// Throws on any failure. Both generators call this before rendering.
+export function selfCheckPNG() {
+  const t = new Ctx(2, 1, '#ffffff');
+  const ok = (c, m) => { if (!c) throw new Error('pixpng self-check failed: ' + m); };
+  t.fillStyle = '#ff0000'; t.fillRect(0, 0, 1, 1);
+  ok(t.buf[0] === 255 && t.buf[1] === 0 && t.buf[2] === 0, 'opaque fill');
+  t.fillStyle = 'rgba(0,0,255,0.5)'; t.fillRect(1, 0, 1, 1);
+  ok(Math.abs(t.buf[4] - 128) <= 2 && t.buf[6] === 255, 'alpha blend');
+  t.save(); t.translate(12, 0); t.scale(-1, 1); t.fillStyle = '#00ff00'; t.fillRect(10, 0, 2, 1); t.restore(); // mirror → x∈[0,2)
+  ok(t.buf[1] === 255, 'mirror transform');
+  const png = encodePNG(2, 1, t.buf);
+  ok(png.slice(0, 8).equals(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])), 'png signature');
+  ok(png.readUInt32BE(16) === 2 && png.readUInt32BE(20) === 1, 'png dims');
+  const idat = png.slice(png.indexOf(Buffer.from('IDAT')) + 4, png.indexOf(Buffer.from('IEND')) - 8);
+  ok(zlib.inflateSync(idat).length === 1 * (1 + 2 * 4), 'idat round-trips');
+}