@songsid/agend 2.3.3 → 2.3.4-beta.10

package/dist/ui/fleet-office-skin.js

@@ -1,9 +1,10 @@
 // The Office view's art (fleet-office.js draws with it on a <canvas>). A skin draws a layout that fleet-office-model.js
-// (desks) or fleet-office-zones.js (zones) made. Three skins are built in. Two draw everything procedurally — little
+// (desks) or fleet-office-zones.js (zones) made. Five skins are built in. Two draw everything procedurally — little
 // pixel people, desks, lamps: "pixel" (the desks layout: a room per team, a desk per instance) and "studio" (the zones
 // layout: work desks, a lounge, an alert corner and a nap corner; people walk to the area for their state). The third,
 // "cozy" (#2631), is the zones layout on one picture shipped with the page (a warm pixel-art office), the same built-in
-// people in it. Every drawing call goes through the OfficeSkin interface below, so a skin pack (pictures from an artist,
+// people in it; "guild" and "school" (#2947) are two more such pictures on the cozy's arrangement. Every drawing call
+// goes through the OfficeSkin interface below, so a skin pack (pictures from an artist,
 // format v1 in fleet-office-pack.js) can replace any part; a part a pack does not supply falls back to the built-in
 // drawing. An admin uploads a pack (#2513, the host keeps it: src/web-office-skins.ts); loadPackSkin() reads it back —
 // its manifest checked here again (checkSkinPack), its pictures by their content ids — and spriteSkin() draws it.
@@ -243,13 +244,21 @@ function drawDeskFront(ctx, d, look, env) {
   if (look.match) { ctx.save(); ctx.strokeStyle = pal.focus; ctx.lineWidth = 2; ctx.strokeRect(d.x + 2, d.y + 2, d.w - 4, d.h - 6); ctx.restore(); }
 }
 
-const Q = 2;                                             // a prop's art pixel
+const Q = 2;                                             // a prop's art pixel, before PROP_SCALE
+/**
+ * #2946: the built-in props are drawn this much larger than their 16 px art (a pack's own `props` keep their size). In
+ * the scene's units, so they scale with the room as its people do (zoom, a phone, an All offices tile).
+ */
+export const PROP_SCALE = 1.75;
 function drawProp(ctx, it, ms, env) {
-  const c = env.pal.fx[it.hue] || env.pal.fx.send, x0 = it.x - 8, y0 = it.y - 8 - Math.sin(Math.PI * it.t) * 10;
-  const b = (c2, r, w, h, col) => px(ctx, x0 + c2 * Q, y0 + r * Q, w * Q, h * Q, col);
+  const c = env.pal.fx[it.hue] || env.pal.fx.send, lift = Math.sin(Math.PI * it.t) * 10;
+  const b = (c2, r, w, h, col) => px(ctx, -8 + c2 * Q, -8 + r * Q, w * Q, h * Q, col);
   ctx.save();
+  ctx.translate(it.x, it.y);
+  ctx.scale(PROP_SCALE, PROP_SCALE);
   ctx.fillStyle = "rgba(0, 0, 0, 0.18)";
-  ctx.beginPath(); ctx.ellipse(it.x, it.y + 4, 7, 2.5, 0, 0, Math.PI * 2); ctx.fill();
+  ctx.beginPath(); ctx.ellipse(0, 4, 7, 2.5, 0, 0, Math.PI * 2); ctx.fill();
+  ctx.translate(0, -lift);
   if (it.hue === "task") { b(0, 0, 4, 2, c); b(0, 1, 8, 6, c); b(0, 2, 8, 1, "rgba(255, 255, 255, 0.35)"); }
   else if (it.hue === "report") { b(1, 0, 6, 8, "#fbfbfb"); b(1, 0, 6, 1, c); b(2, 4, 1, 1, c); b(3, 5, 1, 1, c); b(4, 4, 1, 1, c); b(5, 3, 1, 1, c); }
   else if (it.hue === "broadcast") { b(0, 3, 2, 2, c); b(2, 2, 2, 4, c); b(4, 1, 2, 6, c); if (frameAt(ms, 2, 6)) { b(7, 1, 1, 2, c); b(7, 5, 1, 2, c); } else b(7, 3, 1, 2, c); }
@@ -645,28 +654,112 @@ export const COZY_PACK = {
   stateZones: { working: "desks", idle: "lounge", needs: "alert", crashed: "alert", stuck: "alert", paused: "nap", stopped: "nap", default: "lounge" },
   characters: {}, byInstance: {}, props: {}, bubbles: {},
 };
-/** Until its picture is in (loadCozySkin): the studio's floors under the cozy's areas. */
-const cozyBare = spriteSkin(COZY_PACK, new Map(), studioSkin);
-let cozyJob = null;
+// The cozy's zones on every picture-backed built-in: work, lounge, the alert corner, the nap corner.
+const PICTURE_ZONES = { working: "desks", idle: "lounge", needs: "alert", crashed: "alert", stuck: "alert", paused: "nap", stopped: "nap", default: "lounge" };
+const wps = (list) => list.map(([id, x, y]) => ({ id, x, y }));
+
+// ── #2947: two more on the cozy's arrangement — work top-left, the lounge top-right, the nap corner bottom-left, the
+// alert corner bottom-right, one straight aisle up the middle from a bottom-centre door ──
+
+/** The guild: a fantasy adventurers' guild hall (src/ui/shared/office/guild.png). */
+export const GUILD_BACKGROUND = "/assets/office-guild.png";
+// Seats: the chairs at the six map desks, the tavern bench, the stools round the table, the bar; the inn beds (a sleeper's
+// middle); in front of the quest board.
+const GUILD_AREAS = {
+  desks: { name: "desks", rect: { x: 130, y: 190, w: 400, h: 160 }, seats: pts([180, 200], [320, 200], [450, 200], [180, 315], [320, 315], [450, 315]) },
+  lounge: { name: "lounge", rect: { x: 780, y: 190, w: 440, h: 150 }, seats: pts([840, 200], [900, 200], [810, 290], [935, 290], [870, 325], [1040, 300]) },
+  alert: { name: "alert", rect: { x: 860, y: 560, w: 260, h: 50 }, seats: pts([900, 590], [1000, 590], [1090, 590]) },
+  nap: { name: "nap", rect: { x: 110, y: 540, w: 380, h: 80 }, seats: pts([160, 560], [285, 560], [405, 560]) },
+};
+const GUILD_WAYPOINTS = wps([
+  ["door", 640, 650], ["low", 640, 615], ["hall", 640, 345], ["top", 640, 130],
+  // the desks: the aisle under the second row (y 345), the one between the rows (y 225), the column beside them (x 540)
+  ["d-east", 540, 345], ["d2-3", 450, 345], ["d2-2", 320, 345], ["d2-1", 180, 345],
+  ["d-up", 540, 225], ["d1-3", 450, 225], ["d1-2", 320, 225], ["d1-1", 180, 225],
+  // the beds and the quest board: the aisle along the bottom (y 615)
+  ["n-x", 500, 615], ["n-3", 405, 615], ["n-2", 285, 615], ["n-1", 160, 615],
+  ["a-1", 900, 615], ["a-2", 1000, 615], ["a-3", 1090, 615],
+  // the tavern: under the round table (y 345), up the bench's west end (x 770) to in front of it (y 215)
+  ["l-hall", 770, 345], ["l-tw", 810, 345], ["l-ts", 870, 345], ["l-te", 935, 345], ["l-bar", 1040, 345],
+  ["l-up", 770, 215], ["l-b1", 840, 215], ["l-b2", 900, 215],
+]);
+const GUILD_EDGES = [
+  ["door", "low"], ["low", "hall"], ["hall", "top"],
+  ["hall", "d-east"], ["d-east", "d2-3"], ["d2-3", "d2-2"], ["d2-2", "d2-1"], ["d-east", "d-up"], ["d-up", "d1-3"], ["d1-3", "d1-2"], ["d1-2", "d1-1"],
+  ["low", "n-x"], ["n-x", "n-3"], ["n-3", "n-2"], ["n-2", "n-1"], ["low", "a-1"], ["a-1", "a-2"], ["a-2", "a-3"],
+  ["hall", "l-hall"], ["l-hall", "l-tw"], ["l-tw", "l-ts"], ["l-ts", "l-te"], ["l-te", "l-bar"], ["l-hall", "l-up"], ["l-up", "l-b1"], ["l-b1", "l-b2"],
+];
+export const GUILD_PACK = {
+  format: 1, id: "guild", scale: 1, background: GUILD_BACKGROUND, areas: GUILD_AREAS, door: { x: 640, y: 690 },
+  waypoints: GUILD_WAYPOINTS, edges: GUILD_EDGES, straight: true, furniture: [], stateZones: PICTURE_ZONES,
+  characters: {}, byInstance: {}, props: {}, bubbles: {},
+};
+
+/** The school: a classroom (src/ui/shared/office/school.png). */
+export const SCHOOL_BACKGROUND = "/assets/office-school.png";
+// Seats: the chairs at the six student desks; the sofa, the two stools, the vending machine; the nurse's beds; in front
+// of the chalkboard.
+const SCHOOL_AREAS = {
+  desks: { name: "desks", rect: { x: 130, y: 205, w: 400, h: 140 }, seats: pts([190, 215], [325, 215], [455, 215], [170, 320], [315, 320], [450, 320]) },
+  lounge: { name: "lounge", rect: { x: 770, y: 125, w: 420, h: 110 }, seats: pts([850, 135], [925, 135], [1000, 135], [810, 225], [1035, 225], [1145, 185]) },
+  alert: { name: "alert", rect: { x: 840, y: 560, w: 260, h: 50 }, seats: pts([880, 590], [965, 590], [1050, 590]) },
+  nap: { name: "nap", rect: { x: 110, y: 540, w: 380, h: 80 }, seats: pts([160, 555], [295, 555], [400, 555]) },
+};
+const SCHOOL_WAYPOINTS = wps([
+  ["door", 640, 660], ["low", 640, 625], ["hall", 640, 335], ["mid", 640, 280], ["top", 640, 100],
+  // the desks: the aisle under the second row (y 335), the one between the rows (y 232), the column beside them (x 540)
+  ["d-east", 540, 335], ["d2-3", 450, 335], ["d2-2", 315, 335], ["d2-1", 170, 335],
+  ["d-up", 540, 232], ["d1-3", 455, 232], ["d1-2", 325, 232], ["d1-1", 190, 232],
+  // the beds and the chalkboard: the aisle along the bottom (y 625)
+  ["n-x", 520, 625], ["n-3", 400, 625], ["n-2", 295, 625], ["n-1", 160, 625],
+  ["a-1", 880, 625], ["a-2", 965, 625], ["a-3", 1050, 625],
+  // the lounge: under the rug (y 280) to the stools and the machine, up its west edge (x 760) to in front of the sofa (y 150)
+  ["l-hall", 760, 280], ["l-w", 810, 280], ["l-e", 1035, 280], ["l-vend", 1145, 280],
+  ["l-up", 760, 150], ["l-s1", 850, 150], ["l-s2", 925, 150], ["l-s3", 1000, 150],
+]);
+const SCHOOL_EDGES = [
+  ["door", "low"], ["low", "hall"], ["hall", "mid"], ["mid", "top"],
+  ["hall", "d-east"], ["d-east", "d2-3"], ["d2-3", "d2-2"], ["d2-2", "d2-1"], ["d-east", "d-up"], ["d-up", "d1-3"], ["d1-3", "d1-2"], ["d1-2", "d1-1"],
+  ["low", "n-x"], ["n-x", "n-3"], ["n-3", "n-2"], ["n-2", "n-1"], ["low", "a-1"], ["a-1", "a-2"], ["a-2", "a-3"],
+  ["mid", "l-hall"], ["l-hall", "l-w"], ["l-w", "l-e"], ["l-e", "l-vend"], ["l-hall", "l-up"], ["l-up", "l-s1"], ["l-s1", "l-s2"], ["l-s2", "l-s3"],
+];
+export const SCHOOL_PACK = {
+  format: 1, id: "school", scale: 1, background: SCHOOL_BACKGROUND, areas: SCHOOL_AREAS, door: { x: 640, y: 700 },
+  waypoints: SCHOOL_WAYPOINTS, edges: SCHOOL_EDGES, straight: true, furniture: [], stateZones: PICTURE_ZONES,
+  characters: {}, byInstance: {}, props: {}, bubbles: {},
+};
+
+/**
+ * The built-ins drawn from one picture shipped with the page (#2631 cozy, #2947 guild and school): each one's pack, and
+ * until its picture is in, the studio's floors under its areas (the bare skin); `job` is the picture's load in flight.
+ */
+const PICTURES = new Map([COZY_PACK, GUILD_PACK, SCHOOL_PACK].map((pack) => [pack.id, { pack, bare: spriteSkin(pack, new Map(), studioSkin), job: null }]));
+/** Their ids: a style naming one loads its picture (loadBuiltInSkin). */
+export const PICTURE_SKINS = [...PICTURES.keys()];
 
 /** The skins built into this page; an uploaded pack is loaded by loadPackSkin. */
-export const SKINS = new Map([["pixel", pixelSkin], ["studio", studioSkin], ["cozy", cozyBare]]);
-export const BUILT_IN_SKINS = ["pixel", "studio", "cozy"];
+export const SKINS = new Map([["pixel", pixelSkin], ["studio", studioSkin], ...[...PICTURES].map(([id, p]) => [id, p.bare])]);
+export const BUILT_IN_SKINS = ["pixel", "studio", ...PICTURE_SKINS];
 /**
- * #2631: the cozy's picture, loaded once; the skin drawn from it then takes the cozy's place in SKINS (skinFor). The
- * skin, or null while it cannot load (the bare one stays; tried again next time).
+ * #2631/#2947: a picture-backed built-in's picture, loaded once; the skin drawn from it then takes the bare one's place
+ * in SKINS (skinFor). The skin, or null while it cannot load (the bare one stays; tried again next time); null for an id
+ * that is not one of them.
  */
-export function loadCozySkin({ image = defaultImage } = {}) {
-  if (SKINS.get("cozy") !== cozyBare) return Promise.resolve(SKINS.get("cozy"));
-  cozyJob ??= image(COZY_BACKGROUND).then((im) => {
-    cozyJob = null;
+export function loadBuiltInSkin(id, { image = defaultImage } = {}) {
+  const p = PICTURES.get(id);
+  if (!p) return Promise.resolve(null);
+  if (SKINS.get(id) !== p.bare) return Promise.resolve(SKINS.get(id));
+  p.job ??= image(p.pack.background).then((im) => {
+    p.job = null;
     if (!im) return null;
-    const sk = spriteSkin(COZY_PACK, new Map([[COZY_BACKGROUND, im]]), studioSkin);
-    SKINS.set("cozy", sk);
+    const sk = spriteSkin(p.pack, new Map([[p.pack.background, im]]), studioSkin);
+    SKINS.set(id, sk);
     return sk;
-  }, () => { cozyJob = null; return null; });
-  return cozyJob;
+  }, () => { p.job = null; return null; });
+  return p.job;
 }
+/** #2631: the cozy's picture (loadBuiltInSkin for "cozy"). */
+export const loadCozySkin = (opts = {}) => loadBuiltInSkin("cozy", opts);
 /** A skin by id: a built-in one, else a pack loaded here (`packs`: id → skin), else the default (pixel). */
 export const skinFor = (id, packs = null) => SKINS.get(id) || (packs && packs.get(id)) || pixelSkin;
 

package/dist/ui/fleet-office-store.js

@@ -19,6 +19,8 @@ import { levelsOk } from "./fleet-office-levels.js";
 const CHOICE_KEY = "agend_org_office", FILTER_KEY = "agend_org_office_filter", SKIN_KEY = "agend_org_office_skin", ASLEEP_KEY = "agend_org_office_hide_asleep", NIGHT_KEY = "agend_org_office_night";
 /** #2554: "0" when All offices leaves the lobby tile out (default: shown). */
 const LOBBY_KEY = "agend_org_office_lobby";
+/** #2946: whether the key to the items in the air is open here (default: folded). */
+const KEY_OPEN_KEY = "agend_org_office_key";
 /** #2540: { "<office>@<style>": [k, cx, cy] (and a 1 after them: a fit) } — the last VIEWS_MAX views, the most recent last. */
 const VIEW_KEY = "agend_org_office_view", VIEWS_MAX = 32;
 /** #2540: { "<office>@<style>": "cover" } — the offices whose fit fills the panel (the rest: "contain"), the last VIEWS_MAX. */
@@ -195,6 +197,9 @@ export function createOfficeStore({ fetch: get = globalThis.fetch, storage } = {
     saveNightOn: (v) => write(NIGHT_KEY, v ? "1" : "0"),
     /** #2554: whether All offices shows the lobby tile (the instances in no stored office) here (default: shown). */
     lobbyTile: () => read(LOBBY_KEY) !== "0",
+    /** #2946: whether the key to the items carried between desks is open here (default: folded). */
+    keyOpen: () => read(KEY_OPEN_KEY) === "1",
+    saveKeyOpen: (v) => write(KEY_OPEN_KEY, v ? "1" : "0"),
     saveLobbyTile: (v) => write(LOBBY_KEY, v ? "1" : "0"),
     /** The view kept for `key` (an office and its style): { k, cx, cy } (fleet-office-view.js savedOf), or null. */
     view: (key) => {

package/dist/ui/fleet-office-zones.js

@@ -3,7 +3,7 @@
 // changes it walks (along the pack's waypoints) to the new area. Pure — fleet-office.js draws it. Also here: what a
 // character says in its speech bubble, and which furniture is active.
 import { LOGICAL, own } from "./fleet-office-pack.js";
-import { FLIGHT, nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
+import { flightMs, nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
 import { hue } from "./fleet-traffic.js";
 
 /** The area for a state: the pack's own, else its "default", else its first area. */
@@ -281,7 +281,7 @@ export function createMail({ max = MAIL.MAX } = {}) {
         if (!drop) continue;                                          // nowhere off the seats: not delivered here
         const pts = [{ x: L.door.x, y: L.door.y }, drop];
         letters.push({ id: it.id, from: it.from, to: it.to, kind: it.kind, hue: hue(it.kind), start: now, drop, pts,
-          ms: Math.min(FLIGHT.MAX_MS, Math.max(FLIGHT.MIN_MS, pathLength(pts) / FLIGHT.SPEED)) });
+          ms: flightMs(pathLength(pts)) });
         started++;
       }
       if (letters.length > max) letters = letters.slice(letters.length - max);

package/dist/ui/fleet-office.js

@@ -64,7 +64,7 @@ import { nodeText, stateWords } from "./fleet-org.js";
 import { hits, needle } from "./fleet-canvas-layout.js";
 import { AUTO_ID, LOBBY, autoLayout, backingScale, coatOf, createFlights, customLayout, deskAt, desksOf, filterOk, lampOf, layoutOk, lightOf, membersOf,
   officePose, officeRooms, signOf, workOn } from "./fleet-office-model.js";
-import { BUILT_IN_SKINS, CHAR_DEPTH, DEFAULT_PAL, bubbleBox, loadCozySkin, loadPackSkin, modeOf, skinFor, tagBox, tagFootprint } from "./fleet-office-skin.js";
+import { BUILT_IN_SKINS, CHAR_DEPTH, DEFAULT_PAL, PICTURE_SKINS, bubbleBox, pixelSkin, loadBuiltInSkin, loadPackSkin, modeOf, skinFor, tagBox, tagFootprint } from "./fleet-office-skin.js";
 import { CALLING, activeFurniture, bubbleAt, hiddenBy, bubbleRank, NIGHT, WANDER, createMail, createWalkers, isNight, linesFor, npcKey, personAt, placeBubbles, thinBubbles, walkTargets, zonesLayout } from "./fleet-office-zones.js";
 import { actsOk, createOfficeStore } from "./fleet-office-store.js";
 import { badgeOf, fixedOf } from "./fleet-office-levels.js";
@@ -86,7 +86,7 @@ register("orgo", {
     people: "People", peopleN: "People ({0})", findPerson: "Find a person", everyone: "Show everyone", nobody: "No one here matches this filter.",
     unseated: "{0} without a seat", skinUnknown: "Its style “{0}” is not available here: drawn as Desks.", closed: "Closed", desks: "Desks", tapAgain: "Tap again to open the chat",
     capWorking: "Typing away", capIdle: "Tea break", capPaused: "Asleep", capNeeds: "Calling for you", capAway: "Desk empty", capStarting: "Just arriving", capQueued: "Waiting to start",
-    styleLabel: "Style", style_pixel: "Desks", style_studio: "Studio", style_cozy: "Cozy", cozyNotice: "Add your skin", area_desks: "Work", area_lounge: "Lounge", area_alert: "Help desk", area_nap: "Nap corner",
+    styleLabel: "Style", style_pixel: "Desks", style_studio: "Studio", style_cozy: "Cozy", style_guild: "Guild", style_school: "School", cozyNotice: "Add your skin", area_desks: "Work", area_lounge: "Lounge", area_alert: "Help desk", area_nap: "Nap corner",
     b_working: "On it.|Typing…|Almost there|In the zone|One more test", b_idle: "Tea time|Ready when you are|Stretching|Anything for me?",
     b_paused: "Zzz…|Back later", b_stopped: "Off duty|Zzz…", b_needs: "Need you!|A question for you|Over here!",
     b_crashed: "Ouch, crashed|Help!", b_stuck: "Hmm, stuck?|Still thinking…",
@@ -96,6 +96,8 @@ register("orgo", {
     fit: "Fit the office", overview: "Overview: click to move there", fullscreen: "Fullscreen", exitFullscreen: "Exit fullscreen",
     fill: "Fill", fillTitle: "Fill the panel (the scene's overflow is cropped; drag to see it)", zoomLevel: "Zoom {0}",
     allOffices: "All offices", labelAll: "All offices: each office is a tile, drawn in its own style. Drag to pan; the wheel, a pinch, + and − zoom, 0 fits, F is fullscreen. Double-click a tile to open that office.",
+    key: "Key", keyTitle: "What the items carried between desks are", keyLabel: "Carried between desks",
+    keyTask: "Folder: a task", keySend: "Envelope: a message", keyReport: "Paper: a report", keyBroadcast: "Horn: a broadcast",
     tileLabel: "{0} ({1})", openOffice: "Open the office {0}", lobbyTile: "Lobby tile (in no office)", lobbyEveryone: "Everyone is in an office", overviewNoEdit: "Pick one office to edit offices or a layout",
   },
   "zh-TW": {
@@ -104,7 +106,7 @@ register("orgo", {
     people: "成員", peopleN: "成員（{0}）", findPerson: "尋找成員", everyone: "顯示全部", nobody: "沒有符合這個篩選的成員。",
     unseated: "{0} 位沒有座位", skinUnknown: "這裡沒有它的風格「{0}」：以辦公桌顯示。", closed: "休息中", desks: "桌子", tapAgain: "再點一下開啟聊天",
     capWorking: "埋頭打字中", capIdle: "喝茶休息", capPaused: "睡著了", capNeeds: "在呼叫你", capAway: "空位", capStarting: "剛到座位", capQueued: "等待啟動",
-    styleLabel: "風格", style_pixel: "辦公桌", style_studio: "工作室", style_cozy: "溫馨", cozyNotice: "換上你的外觀包", area_desks: "工作區", area_lounge: "休息區", area_alert: "求救區", area_nap: "午睡角",
+    styleLabel: "風格", style_pixel: "辦公桌", style_studio: "工作室", style_cozy: "溫馨", style_guild: "冒險者公會", style_school: "學校", cozyNotice: "換上你的外觀包", area_desks: "工作區", area_lounge: "休息區", area_alert: "求救區", area_nap: "午睡角",
     b_working: "處理中|打字中…|快好了|專心中|再測一次", b_idle: "喝茶中|隨時可以開工|伸個懶腰|有事找我嗎？",
     b_paused: "Zzz…|晚點回來", b_stopped: "下班了|Zzz…", b_needs: "需要你！|有個問題|在這裡！",
     b_crashed: "糟糕，當掉了|救命！", b_stuck: "嗯，卡住了？|還在想…",
@@ -114,6 +116,8 @@ register("orgo", {
     fit: "顯示整個辦公室", overview: "總覽：點一下移到那裡", fullscreen: "全螢幕", exitFullscreen: "結束全螢幕",
     fill: "填滿", fillTitle: "填滿整個面板（超出的部分會被裁切，拖曳即可看到）", zoomLevel: "縮放 {0}",
     allOffices: "所有辦公室", labelAll: "所有辦公室：每間辦公室是一格，以它自己的風格顯示。拖曳平移；滾輪、雙指、+ 和 − 縮放，0 顯示全部，F 切換全螢幕。雙擊一格即可開啟那間辦公室。",
+    key: "圖例", keyTitle: "桌子之間傳遞的物品代表什麼", keyLabel: "桌子之間傳遞的物品",
+    keyTask: "資料夾：任務", keySend: "信封：訊息", keyReport: "紙張：回報", keyBroadcast: "喇叭：廣播",
     tileLabel: "{0}（{1}）", openOffice: "開啟辦公室「{0}」", lobbyTile: "大廳格（不在任何辦公室）", lobbyEveryone: "每個成員都已在某間辦公室", overviewNoEdit: "請先選一間辦公室，再編輯辦公室或配置",
   },
 });
@@ -584,6 +588,28 @@ function People({ nodes, pinned, onChange }) {
   </div>`;
 }
 
+/** #2946: the key's rows — each kind's item as the scene draws it (the built-in prop, in the theme's colour), and its words. */
+export const KEY_KINDS = [["task", "keyTask"], ["send", "keySend"], ["report", "keyReport"], ["broadcast", "keyBroadcast"]];
+const KEY_PX = 32;
+/**
+ * #2946 (hxhsandy): the key to the items carried between desks — a strip under the Office's bar (never over the scene),
+ * opened by its Key toggle. The shapes are drawn by the built-in skin, so they are the ones in the air, at their size.
+ */
+export function OfficeKey({ pal }) {
+  const paint = (hue) => (cv) => {
+    const g = cv && typeof cv.getContext === "function" ? cv.getContext("2d") : null;
+    if (!g) return;
+    const r = Math.max(1, Math.round(globalThis.devicePixelRatio || 1));
+    if (cv.width !== KEY_PX * r) { cv.width = KEY_PX * r; cv.height = KEY_PX * r; }
+    g.setTransform(r, 0, 0, r, 0, 0); g.clearRect(0, 0, KEY_PX, KEY_PX);
+    try { pixelSkin.drawProp(g, { hue, kind: hue, x: KEY_PX / 2, y: KEY_PX / 2 + 4, t: 0 }, 0, { pal }); } catch { /* left blank */ }
+  };
+  return html`<div class="oo-key" role="region" aria-label=${to("keyLabel")}>
+    <ul class="oo-key-rows">${KEY_KINDS.map(([hue, k]) => html`<li key=${hue} class="oo-key-row" data-kind=${hue}>
+      <canvas class="oo-key-icon" width=${KEY_PX} height=${KEY_PX} aria-hidden="true" ref=${paint(hue)}></canvas><span>${to(k)}</span></li>`)}</ul>
+  </div>`;
+}
+
 /**
  * The view: `view` buildOrgView's answer; `traffic` the live items (null: Live is off); `q` the Find box's needle;
  * `lease` the tab's (its reads); `onOpen(name)` what a desk opens (the canvas's: the chat; none: a desk opens nothing,
@@ -609,13 +635,14 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   const [hideAsleep, setHideAsleep] = useState(() => store.hideAsleep());
   // Bedtime (#2568), when it is on here: the idle sleep from NIGHT.FROM to NIGHT.TO on this device's clock (read every NIGHT.TICK).
   const [nightOn, setNightOn] = useState(() => store.nightOn());
+  const [keyOpen, setKeyOpen] = useState(() => store.keyOpen());
   const [nightNow, setNightNow] = useState(() => isNight());
   useEffect(() => { if (!nightOn) return undefined; setNightNow(isNight()); const h = setInterval(() => setNightNow(isNight()), NIGHT.TICK); return () => clearInterval(h); }, [nightOn]);
   const night = nightOn && nightNow;
   const [lobbyOn, setLobbyOn] = useState(() => store.lobbyTile());       // #2554: All offices' lobby tile
   const [packs, setPacks] = useState([]);                             // the skin packs the host keeps: [{ id, name, sha }]
   const [packSkins, setPackSkins] = useState(() => new Map());        // id@sha → a loaded skin, or null (not a pack)
-  const [cozyRev, setCozyRev] = useState(0);                          // #2631: the cozy's picture came in (skinFor has it)
+  const [cozyRev, setCozyRev] = useState(0);                          // #2631/#2947: a built-in's picture came in (skinFor has it)
   // Edit layout's session while it is open: { id, officeId, skin, pack (the style's identity), base (the pack as kept),
   // start, draft, rev, list (the offices and rev read when it opened — what Save sends) }; null when closed.
   const [layout, setLayout] = useState(null);
@@ -801,14 +828,16 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
   }, [neededKey]);
   const loading = !!packInfo && !packSkins.has(packKey);
   const baseSkin = packInfo ? packSkins.get(packKey) || skinFor("pixel") : skinFor(STYLES.includes(wanted) ? wanted : custom ? wanted : "pixel");
-  // #2631: the cozy's picture, once, when this office (or a tile, or the lobby tile) is drawn in it; until then its bare floors.
-  const cozyWanted = (overview ? [...stored.map((o) => o.skin), ...(lobbyOn ? [style] : [])] : [wanted]).includes("cozy");
+  // #2631/#2947: a picture-backed built-in's picture (cozy, guild, school), once, when this office (or a tile, or the lobby
+  // tile) is drawn in it and no kept pack has its id; until then its bare floors.
+  const picturesWanted = [...new Set((overview ? [...stored.map((o) => o.skin), ...(lobbyOn ? [style] : [])] : [wanted])
+    .filter((id) => PICTURE_SKINS.includes(id) && !packOf(id)))].sort().join(",");
   useEffect(() => {
-    if (!cozyWanted) return undefined;
+    if (!picturesWanted) return undefined;
     let live = true;
-    loadCozySkin().then((sk) => { if (live && sk && sk !== baseSkin) setCozyRev((n) => n + 1); });
+    for (const id of picturesWanted.split(",")) loadBuiltInSkin(id).then((sk) => { if (live && sk) setCozyRev((n) => n + 1); });
     return () => { live = false; };
-  }, [cozyWanted]);
+  }, [picturesWanted]);
   const zones = !!(baseSkin.pack && baseSkin.pack.stateZones);
   /** The style's identity: a pack's id and sha (a pack replaced is another), or the built-in skin's id. */
   const styleKey = packKey || baseSkin.id;
@@ -1456,6 +1485,8 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
       ${custom && baseSkin.id !== custom.skin && !loading ? html`<span class="muted oo-note">${to("skinUnknown", styleName(custom.skin))}</span>` : null}
       ${placed.ignored ? html`<span class="muted oo-note">${to("layoutIgnored")}</span>` : null}
       ${styleErr && auto ? html`<span class="note oo-note oo-style-err" role="status">${styleErr}</span>` : null}
+      ${traffic ? html`<button type="button" class=${`btn btn-sm oo-key-btn${keyOpen ? " on" : ""}`} aria-expanded=${keyOpen ? "true" : "false"} title=${to("keyTitle")}
+        onClick=${() => { const v = !keyOpen; store.saveKeyOpen(v); setKeyOpen(v); }}>${to("key")}</button>` : null}
       ${L.unseated ? html`<span class="muted oo-note">${to("unseated", L.unseated)}</span>` : null}
       ${canEdit && storedRev !== null ? html`<button type="button" class="btn btn-sm oo-edit" onClick=${() => { if (!overview) setEditing(true); }} disabled=${!!layout || overview}
         title=${overview ? to("overviewNoEdit") : undefined}>${t("orge.edit")}</button>` : null}
@@ -1463,6 +1494,7 @@ export function Office({ view, traffic, q = "", lease, onOpen, assetUrl, assetIm
       ${canShare ? html`<${ShareButton} offices=${stored} current=${overview ? "all" : custom ? custom.id : null} disabled=${!!layout}
         get=${lease ? (path, o) => lease.fetch(path, o) : undefined} />` : null}
     </div>
+    ${traffic && keyOpen ? html`<${OfficeKey} pal=${pal} />` : null}
     ${editing && !overview ? html`<${OfficeEditor} offices=${stored} rev=${storedRev} view=${view} store=${store} packs=${packs}
       ask=${ask} current=${() => shown.current} onSaved=${adopt} onClose=${() => setEditing(false)} />` : null}
     ${overview || people.length || L.rooms.length ? null : html`<p class="note oo-empty">${to("nobody")} ${auto && (f.team || f.pinned.length) ? html`<button type="button" class="btn btn-sm" onClick=${() => setF({ team: "", pinned: [] })}>${to("everyone")}</button>` : null}</p>`}

package/dist/ui/fleet-usage.js

@@ -14,11 +14,20 @@ register("fusage", {
   en: {
     range: "Range", today: "Today", r7d: "7 days", month: "This month", all: "All", custom: "Custom", from: "From", to: "To", apply: "Apply",
     group: "Group by", g_instance: "Agent", g_backend: "Backend", g_model: "Model", g_profile: "Credential profile", g_team: "Team (as configured now)",
-    csv: "Download CSV", basis: "API-equivalent at list price (checked {0}) — not money spent. Subscriptions are not billed per token.",
+    csv: "Download CSV", basis: "API-equivalent at list price ({0}) — not money spent.", basisMore: "Subscriptions are not billed per token.",
     amount: "API-equivalent", input: "Input", output: "Output", reasoning: "Reasoning", read: "Cache read", write: "Cache write", total: "Total tokens", requests: "Requests", messages: "Messages",
     notPriced: "not priced", partial: "partial", noTeam: "(no team)", unknown: "unknown",
-    f_cache_write_not_reported: "cache writes not reported (Codex, Muse) — an estimate", f_not_priced: "not priced: {0}", f_source_unknown: "read before backend and profile were recorded",
-    f_estimated: "estimated from text size — Kiro records no token counts", f_includes_estimates: "includes estimates (Kiro)", f_cost_reported: "amount as the CLI reported it (no list price for this model)", estimatedPart: "of which estimated: {0}",
+    // #3066 §3: what a row's numbers are, said once each as a small mark with its tooltip (never a pill per row).
+    t_not_priced: "Not priced: {0}", t_partial: "Part of this row's models have no price", t_write_unreported: "Codex/Muse don't report cache writes",
+    t_cost_reported: "Amount as the CLI reported it", t_estimated: "Estimated from text size (Kiro records no token counts)", t_reasoning_none: "Not reported by this CLI",
+    sourceNote: "Some hours were read before AgEnD recorded their backend and profile.", profileUnrecorded: "profile not recorded",
+    l_partial: "◐ partly priced", l_cost_reported: "† amount from the CLI", l_estimated: "≈ estimated",
+    // #3066 §2: output speed (Claude after the first token, Codex over the response window).
+    speed: "Speed", speedUnit: "{0} tok/s", speedCoverage: "{0} of {1} requests timed", speedSpread: "p10–p90: {0}–{1} tok/s",
+    speedNone: "no timing in its transcripts", speedByModel: "Speed by model",
+    speedBasis: "Output tokens ÷ the model's own response time (tool time excluded); method after tokdash.",
+   
+    f_includes_estimates: "includes estimates (Kiro)", estimatedPart: "of which estimated: {0}",
     scanning: "Scanning — totals may still grow.", updated: "Updated {0} · read every 10 min", since: "Collected since {0}", notYet: "Not collected yet",
     refresh: "Refresh",
     notMeasured: "Not measured", nm_credit_billed: "Kiro is credit-billed and records no tokens", nm_unsupported: "AgEnD can't read this CLI's usage yet", nm_no_data: "nothing read yet",
@@ -42,11 +51,18 @@ register("fusage", {
   "zh-TW": {
     range: "期間", today: "今天", r7d: "7 天", month: "本月", all: "全部", custom: "自訂", from: "從", to: "到", apply: "套用",
     group: "分組", g_instance: "Agent", g_backend: "Backend", g_model: "模型", g_profile: "憑證 profile", g_team: "Team（依目前設定）",
-    csv: "下載 CSV", basis: "依牌價換算的 API 等值（查證日期 {0}）——不是實際花費。訂閱方案不按 token 計費。",
+    csv: "下載 CSV", basis: "依牌價換算的 API 等值（{0}）——不是實際花費。", basisMore: "訂閱方案不按 token 計費。",
     amount: "API 等值", input: "輸入", output: "輸出", reasoning: "推理", read: "快取讀取", write: "快取寫入", total: "token 總計", requests: "請求數", messages: "訊息數",
     notPriced: "未定價", partial: "部分", noTeam: "（不屬於任何 team）", unknown: "未知",
-    f_cache_write_not_reported: "未回報快取寫入（Codex、Muse）——是估算", f_not_priced: "未定價：{0}", f_source_unknown: "讀取時尚未記錄 backend 與 profile",
-    f_estimated: "依文字長度估算——Kiro 不記錄 token 數", f_includes_estimates: "含估算值（Kiro）", f_cost_reported: "金額為 CLI 自行回報（價目表沒有此模型）", estimatedPart: "其中估算：{0}",
+    t_not_priced: "未定價：{0}", t_partial: "這一列有部分模型沒有價格", t_write_unreported: "Codex／Muse 不回報快取寫入",
+    t_cost_reported: "金額為 CLI 自行回報", t_estimated: "依文字長度估算（Kiro 不記錄 token 數）", t_reasoning_none: "這個 CLI 不回報",
+    sourceNote: "部分時段在 AgEnD 記錄 backend 與 profile 之前就已讀取。", profileUnrecorded: "未記錄 profile",
+    l_partial: "◐ 部分定價", l_cost_reported: "† 金額由 CLI 回報", l_estimated: "≈ 估算值",
+    speed: "速度", speedUnit: "{0} token/秒", speedCoverage: "{1} 個請求中有 {0} 個可計時", speedSpread: "p10–p90：{0}–{1} token/秒",
+    speedNone: "transcript 沒有計時資訊", speedByModel: "各模型速度",
+    speedBasis: "輸出 token ÷ 模型本身的回應時間（不含工具執行時間）；方法參考 tokdash。",
+   
+    f_includes_estimates: "含估算值（Kiro）", estimatedPart: "其中估算：{0}",
     scanning: "掃描中——總數可能還會增加。", updated: "更新於 {0} · 每 10 分鐘讀取一次", since: "自 {0} 起收集", notYet: "尚未收集",
     refresh: "重新整理",
     notMeasured: "未量測", nm_credit_billed: "Kiro 以 credit 計費，不記錄 token", nm_unsupported: "AgEnD 目前還讀不到這個 CLI 的用量", nm_no_data: "尚未讀到任何資料",
@@ -95,10 +111,6 @@ export function keyText(group, key) {
   return key;
 }
 const writes = (r) => (r.cacheWrite5m || 0) + (r.cacheWrite1h || 0) + (r.cacheWrite || 0);
-function flagText(f, r) {
-  if (f === "not_priced") return tu("f_not_priced", (r.unpriced || []).join(", "));
-  return ["cache_write_not_reported", "source_unknown", "estimated", "includes_estimates", "cost_reported"].includes(f) ? tu(`f_${f}`) : f;
-}
 
 // ── CSV (design §4): the daily rows of this same answer; messages on their own rows (they are per agent, not per model).
 const CSV_COLUMNS = ["date", "zone", "instance", "backend", "model", "tier", "profile", "input", "output", "reasoning", "cache_read", "cache_write_5m", "cache_write_1h", "cache_write", "requests", "messages", "amount", "basis", "flags", "estimated"];
@@ -318,25 +330,73 @@ function Heatmap({ report, dates }) {
   </section>`;
 }
 
-function Row({ r, group, max, measure }) {
+/**
+ * A mark with what it means: shown as its sign, said (title, and aria-label for readers) as words. role="img" makes it
+ * nameable (#3067 review, Prism P3: aria-label is not allowed on a generic span).
+ */
+const mark = (sign, words, cls = "us-mark") => html`<span class=${cls} role="img" title=${words} aria-label=${words}>${sign}</span>`;
+/** "—" that says why there is no number (nameable the same way). */
+const dash = (words) => html`<span class="us-none" role="img" title=${words} aria-label=${words}>—</span>`;
+/** The marks a row's numbers carry (#3066 §3): ◐ partly priced, † the CLI's own amount, ≈ estimated. */
+export function rowMarks(r) {
+  const flags = r.flags || [];
+  return { partial: r.priced === "partial", cost: flags.includes("cost_reported"), est: flags.includes("estimated") || r.estimated === true,
+    writeUnreported: flags.includes("cache_write_not_reported") && writes(r) === 0, unpriced: r.amount === null || r.amount === undefined };
+}
+/** A profile as shown: Codex's older hours were never tagged with one. */
+const profileText = (p) => (p === "unrecorded" ? tu("profileUnrecorded") : p);
+
+function Row({ r, group, max, measure, cols }) {
   const share = max > 0 ? Math.max(0.01, measure(r) / max) : 0;
-  const meta = [r.backends.join(", "), r.models.join(", "), r.profiles.join(", ")].filter(Boolean).join(" · ");
+  const meta = [r.backends.join(", "), r.models.join(", "), r.profiles.map(profileText).join(", ")].filter(Boolean).join(" · ");
+  const m = rowMarks(r);
+  // Estimated rows (Kiro): every number is an estimate — "≈" before each, the reason in its tooltip.
+  const num = (text) => (m.est ? html`${mark("≈", tu("t_estimated"), "us-mark us-approx")}${text}` : text);
+  const key = group === "profile" ? profileText(keyText(group, r.key)) : keyText(group, r.key);
   return html`<tr class="us-row">
-    <th scope="row" class="us-name"><span class="mono">${keyText(group, r.key)}</span>
+    <th scope="row" class="us-name"><span class="mono">${key}</span>
       <svg class="us-bar" aria-hidden="true"><rect class="us-bar-bg" width="100%" height="6" rx="3" /><rect class="us-bar-fg" width=${`${Math.round(share * 100)}%`} height="6" rx="3" /></svg>
-      ${group !== "instance" || meta ? html`<span class="us-meta">${meta}</span>` : null}
-      ${r.flags.length ? html`<span class="us-flags">${r.flags.map((f) => html`<span key=${f} class="ch-tag">${flagText(f, r)}</span>`)}</span>` : null}</th>
-    <td data-label=${tu("amount")} class=${`num${r.amount === null ? " muted" : ""}`}>${amountText(r)}</td>
-    <td data-label=${tu("input")} class="num">${tokens(r.input)}</td>
-    <td data-label=${tu("output")} class="num">${tokens(r.output)}</td>
-    <td data-label=${tu("reasoning")} class="num">${r.reasoningReported === false ? "—" : tokens(r.reasoning || 0)}</td>
-    <td data-label=${tu("read")} class="num">${tokens(r.cacheRead)}</td>
-    <td data-label=${tu("write")} class="num">${r.flags.includes("cache_write_not_reported") && writes(r) === 0 ? "—" : tokens(writes(r))}</td>
-    <td data-label=${tu("total")} class="num">${tokens(r.total)}</td>
+      ${group !== "instance" || meta ? html`<span class="us-meta">${meta}</span>` : null}</th>
+    <td data-label=${tu("amount")} class=${`num${m.unpriced ? " muted" : ""}`}>${m.unpriced ? dash(tu("t_not_priced", (r.unpriced || []).join(", "))) : html`${num(money(r.amount))}${m.partial ? mark("◐", tu("t_partial")) : null}${m.cost ? mark("†", tu("t_cost_reported")) : null}`}</td>
+    <td data-label=${tu("input")} class="num">${num(tokens(r.input))}</td>
+    <td data-label=${tu("output")} class="num">${num(tokens(r.output))}</td>
+    ${cols.reasoning ? html`<td data-label=${tu("reasoning")} class="num">${r.reasoningReported === false ? dash(tu("t_reasoning_none")) : num(tokens(r.reasoning || 0))}</td>` : null}
+    <td data-label=${tu("read")} class="num">${num(tokens(r.cacheRead))}</td>
+    <td data-label=${tu("write")} class="num">${m.writeUnreported ? dash(tu("t_write_unreported")) : num(tokens(writes(r)))}</td>
+    <td data-label=${tu("total")} class="num">${num(tokens(r.total))}</td>
     <td data-label=${tu("requests")} class="num">${n(r.requests)}</td>
-    <td data-label=${tu("messages")} class="num">${r.messages === null ? "—" : n(r.messages)}</td>
+    ${cols.messages ? html`<td data-label=${tu("messages")} class="num">${r.messages === null ? "—" : n(r.messages)}</td>` : null}
+    ${cols.speed ? html`<td data-label=${tu("speed")} class="num">${r.speed ? speedText(r.speed) : dash(tu("speedNone"))}</td>` : null}
   </tr>`;
 }
+/** #3066 §2: a rate as shown — whole tok/s, one decimal below 10. */
+export const speedText = (s) => tu("speedUnit", s.tokPerSec >= 10 ? Math.round(s.tokPerSec).toLocaleString("en-US") : s.tokPerSec.toFixed(1));
+/** Columns worth a place (#3066 §3): Reasoning only when some row reports it; Messages only when some row has them; Speed (§2) only when some response was timed. */
+export function usageColumns(rows) {
+  return { reasoning: rows.some((r) => r.reasoningReported !== false), messages: rows.some((r) => r.messages !== null && r.messages !== undefined),
+    speed: rows.some((r) => !!r.speed) };
+}
+/** #3066 §2: each model's speed — rate · requests timed (coverage) · p10–p90 from 30 timed. */
+function SpeedCard({ report }) {
+  const list = report.speedByModel || [];
+  if (!list.length) return null;
+  return html`<section class="us-speed card" aria-labelledby="us-speed-h">
+    <h3 id="us-speed-h">${tu("speedByModel")}</h3>
+    <ul class="rows">${list.map((m) => html`<li key=${m.model} class="row-item"><span class="grow strong mono">${m.model}</span>
+      <span class="num">${speedText(m.speed)}</span>
+      <span class="muted">${[m.requests > 0 ? tu("speedCoverage", n(m.speed.timedRequests), n(m.requests)) : null,
+        m.speed.p10 !== null && m.speed.p90 !== null ? tu("speedSpread", Math.round(m.speed.p10), Math.round(m.speed.p90)) : null].filter(Boolean).join(" · ")}</span></li>`)}</ul>
+    <p class="note">${tu("speedBasis")}</p>
+  </section>`;
+}
+/** The legend under the table: only the marks that appear, and the one footnote when an hour's source was not recorded. */
+function Legend({ rows }) {
+  const marks = rows.map(rowMarks);
+  const parts = [marks.some((m) => m.partial) && tu("l_partial"), marks.some((m) => m.cost) && tu("l_cost_reported"), marks.some((m) => m.est) && tu("l_estimated")].filter(Boolean);
+  const source = rows.some((r) => (r.flags || []).includes("source_unknown"));
+  if (!parts.length && !source) return null;
+  return html`<p class="note us-key">${parts.join(" · ")}${parts.length && source ? html`<br />` : null}${source ? tu("sourceNote") : null}</p>`;
+}
 
 /** The tab's body for one answer of GET /ui/usage-report. */
 export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
@@ -355,6 +415,7 @@ export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
   const zones = zonesChanged(report);
   const csvFrom = report.dailyTruncated ? report.dailyFrom : report.range.kind === "all" ? "all" : report.range.from;
   const rows = report.rows.filter((r) => r.total > 0 || (r.messages || 0) > 0);
+  const cols = usageColumns(rows);
   const anyAmount = rows.some((r) => r.amount !== null && r.amount > 0);
   const measure = (r) => (anyAmount ? r.amount || 0 : r.total);
   const max = Math.max(0, ...rows.map(measure));
@@ -375,7 +436,7 @@ export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
       <label>${tu("from")} <input type="date" value=${draft.from} max=${draft.to} onInput=${(e) => setDraft({ ...draft, from: e.target.value })} /></label>
       <label>${tu("to")} <input type="date" value=${draft.to} min=${draft.from} onInput=${(e) => setDraft({ ...draft, to: e.target.value })} /></label>
       <button type="submit" class="btn btn-sm">${tu("apply")}</button></form>` : null}
-    <p class="us-basis" role="note">${tu("basis", report.pricesChecked)}</p>
+    <p class="us-basis" role="note" title=${tu("basisMore")}>${tu("basis", report.pricesChecked)}</p>
     ${noDaily ? html`<p class="us-partial" role="status">${tu("noDaily")}</p>` : report.dailyTruncated ? html`<p class="us-partial" role="status">${tu("partialDays", report.dailyFrom)}</p>` : null}
     ${zones ? html`<p class="us-partial" role="status">${tu("zoneChanged", zones.join(", "), report.zone)}</p>` : null}
     <p class="note us-fresh">${tu("updated", new Date(fetchedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }))} · ${Number.isFinite(since) ? tu("since", new Date(since).toLocaleDateString()) : tu("notYet")} · ${tu("zoneNote", report.zone)}${group === "team" ? ` ${tu("teamsNote")}` : ""}
@@ -389,10 +450,12 @@ export function UsageReport({ report, choice, setChoice, refresh, fetchedAt }) {
         <div class="ch-metric"><dt>${tu("messages")}</dt><dd>${report.totals.messages === null ? "—" : n(report.totals.messages)}</dd></div>
       </dl>
       ${rows.length ? html`<table class="us-table"><thead><tr><th scope="col">${tu(`g_${group}`)}</th><th scope="col" class="num">${tu("amount")}</th>
-        <th scope="col" class="num">${tu("input")}</th><th scope="col" class="num">${tu("output")}</th><th scope="col" class="num">${tu("reasoning")}</th><th scope="col" class="num">${tu("read")}</th><th scope="col" class="num">${tu("write")}</th>
-        <th scope="col" class="num">${tu("total")}</th><th scope="col" class="num">${tu("requests")}</th><th scope="col" class="num">${tu("messages")}</th></tr></thead>
-        <tbody>${rows.map((r) => html`<${Row} key=${r.key} r=${r} group=${group} max=${max} measure=${measure} />`)}</tbody></table>`
+        <th scope="col" class="num">${tu("input")}</th><th scope="col" class="num">${tu("output")}</th>${cols.reasoning ? html`<th scope="col" class="num">${tu("reasoning")}</th>` : null}<th scope="col" class="num">${tu("read")}</th><th scope="col" class="num">${tu("write")}</th>
+        <th scope="col" class="num">${tu("total")}</th><th scope="col" class="num">${tu("requests")}</th>${cols.messages ? html`<th scope="col" class="num">${tu("messages")}</th>` : null}${cols.speed ? html`<th scope="col" class="num">${tu("speed")}</th>` : null}</tr></thead>
+        <tbody>${rows.map((r) => html`<${Row} key=${r.key} r=${r} group=${group} max=${max} measure=${measure} cols=${cols} />`)}</tbody></table>
+        <${Legend} rows=${rows} />`
         : html`<p class="note">${tu("noRows")}</p>`}
+      <${SpeedCard} report=${report} />
       <${Trend} report=${report} dates=${dates} />
       <${Heatmap} report=${report} dates=${dates} />`}
     ${report.notMeasured.length || report.shared.length ? html`<section class="us-rest" aria-labelledby="us-rest-h"><h3 id="us-rest-h">${tu("notMeasured")}</h3>