@kylecheng3146/agent-ops 0.7.2 → 0.8.0

package/dist/runtime/src/office/page.js

@@ -1,280 +1,95 @@
+import { ROOM_PALETTE, avatarColors, notePosition, personSprites, roomSprites } from "./art.js";
+import { findPath, officeLayout, walkGrid } from "./layout.js";
 import { sceneModel } from "./scene.js";
-/** Warm cream, oak and sage colors, kept to a single 16-color pixel palette. */
-export const PALETTE = ["#2b241f", "#355a4b", "#6d9275", "#b7c7a3", "#8a5033", "#729ead", "#d9aa72", "#ead8b8",
-    "#8e7561", "#6b5d50", "#adc39a", "#f2e5c9", "#e8c99c", "#c86f4a", "#f2c95c", "#fff7e6"];
-/** Each person has a fixed 16-color palette, independent of the room colors. */
-export function avatarPalette(identity, viewer = false) {
-    let hash = 0;
-    for (const character of identity)
-        hash = (Math.imul(hash, 31) + character.charCodeAt(0)) >>> 0;
-    const hair = viewer ? ["#302c3b", "#514757", "#756575"] : [
-        ["#302c3b", "#514757", "#756575"], ["#51372f", "#80533d", "#b47c51"], ["#745338", "#a37c4f", "#d1ad72"]
-    ][hash % 3];
-    const skin = viewer ? ["#bf8264", "#e6ae87", "#f5cda4"] : [
-        ["#bf8264", "#e6ae87", "#f5cda4"], ["#9b624b", "#c08762", "#e0ae82"], ["#654039", "#96624e", "#bf8c68"]
-    ][Math.floor(hash / 9) % 3];
-    const clothes = viewer ? ["#bb893b", "#e3b64f", "#f7d878"] : [
-        ["#37596d", "#5687a1", "#87b3c7"], ["#934d49", "#c57060", "#e6a087"],
-        ["#3b6658", "#61947b", "#92bea1"], ["#625776", "#8c7da4", "#b7a9ca"]
-    ][Math.floor(hash / 27) % 4];
-    return ["#292633", ...hair, ...skin, ...clothes, "#404958", "#707a8b", "#2e3443", "#626e7f", "#fff1db", "#d58c76"];
-}
-/** Original 32×48 pixel people. Self-contained so the inline client uses this same art. */
-export function avatarSprite(identity, direction = "down", pose = 0, viewer = false) {
-    let hash = 0;
-    for (const character of identity)
-        hash = (Math.imul(hash, 31) + character.charCodeAt(0)) >>> 0;
-    const hair = "2", hairLight = "3";
-    const style = viewer ? 0 : Math.floor(hash / 3) % 3;
-    const skin = "5", skinLight = "6", skinShade = "4", outfit = ["8", "7", "9"];
-    const grid = Array.from({ length: 48 }, () => Array(32).fill("."));
-    const rect = (x, y, width, height, color) => {
-        for (let row = y; row < y + height; row++)
-            for (let column = x; column < x + width; column++) {
-                if (row >= 0 && row < 48 && column >= 0 && column < 32)
-                    grid[row][column] = color;
-            }
-    };
-    const stride = pose === 1 ? -1 : pose === 3 ? 1 : 0;
-    const side = direction === "left" || direction === "right";
-    // Slim trousers, cuffs and shaded shoes; opposite feet alternate during a walk.
-    for (let leg = 0; leg < 2; leg++) {
-        const x = side ? 12 + leg * 4 : 10 + leg * 7, lift = leg ? -stride : stride;
-        rect(x, 35 + lift, 5, 10, "0");
-        rect(x + 1, 36 + lift, 3, 7, "a");
-        rect(x + 1, 37 + lift, 1, 5, "b");
-        rect(x + 1, 43 + lift, 3, 1, "e");
-        rect(x - 1, 44 + lift, 6, 3, "c");
-        rect(x, 44 + lift, 4, 1, "d");
-        rect(x, 46 + lift, 4, 1, "e");
-    }
-    const bodyX = side ? 11 : 8, bodyW = side ? 11 : 16;
-    rect(bodyX + 2, 23, bodyW - 4, 1, "0");
-    rect(bodyX, 24, bodyW, 12, "0");
-    rect(bodyX + 1, 25, bodyW - 2, 10, outfit[0]);
-    rect(bodyX + 1, 33, bodyW - 2, 2, outfit[1]);
-    rect(bodyX + bodyW - 3, 27, 2, 6, outfit[1]);
-    rect(bodyX + 2, 27, 2, 4, outfit[2]);
-    rect(bodyX + 3, 26, bodyW - 6, 1, outfit[2]);
-    if (direction !== "up") {
-        rect(side ? 18 : 13, 22, side ? 3 : 6, 3, skinShade);
-        rect(side ? 18 : 13, 22, side ? 2 : 5, 2, skin);
-        rect(side ? 18 : 12, 25, side ? 2 : 8, 1, outfit[1]);
-        rect(side ? 18 : 13, 25, side ? 1 : 6, 1, outfit[2]);
-        if (!side) {
-            rect(18, 29, 3, 3, outfit[1]);
-            rect(18, 29, 3, 1, outfit[2]);
-        }
-    }
-    const arms = side ? [12] : [5, 24];
-    arms.forEach((x, index) => {
-        const swing = stride * (index ? -1 : 1);
-        rect(x, 25 + swing, 3, 10, "0");
-        rect(x + 1, 26 + swing, 2, 4, outfit[0]);
-        rect(x + 1, 29 + swing, 2, 1, outfit[1]);
-        rect(x + 1, 30 + swing, 2, 4, skinShade);
-        rect(x + 1, 30 + swing, 1, 3, skinLight);
-    });
-    // Rounded jaw and small dark eyes, with warm skin shading instead of white face blocks.
-    rect(9, 9, 14, 1, "0");
-    rect(7, 10, 18, 9, "0");
-    rect(8, 19, 16, 2, "0");
-    rect(10, 21, 12, 1, "0");
-    rect(9, 10, 14, 11, skin);
-    rect(8, 12, 16, 7, skin);
-    rect(22, 13, 2, 6, skinShade);
-    rect(19, 20, 3, 1, skinShade);
-    rect(10, 13, 3, 1, skinLight);
-    rect(6, 15, 2, 4, "0");
-    rect(24, 15, 2, 4, "0");
-    rect(7, 15, 1, 3, skin);
-    rect(24, 15, 1, 3, skin);
-    if (side) {
-        rect(23, 14, 3, 4, "0");
-        rect(23, 15, 2, 2, skin);
-        rect(21, 15, 2, 2, "0");
-        rect(21, 15, 1, 1, "e");
-        rect(23, 19, 1, 1, skinShade);
-    }
-    else if (direction === "down") {
-        rect(10, 14, 3, 1, hairLight);
-        rect(19, 14, 3, 1, hairLight);
-        rect(11, 15, 2, 2, "0");
-        rect(19, 15, 2, 2, "0");
-        rect(11, 15, 1, 1, "e");
-        rect(19, 15, 1, 1, "e");
-        rect(9, 18, 2, 1, skinShade);
-        rect(21, 18, 2, 1, skinShade);
-        rect(15, 19, 2, 1, skinShade);
-    }
-    const crown = ["00000000", "00HHHHHHHH00", "0HHHHHHHHHHHH0", "0HHHHHHHHHHHHHH0", "0HHHHhhHHHHHHHHHH0",
-        "0HHHhhhhhHHHHHHHHH0", "0HHHHHHhhhhhHHHHHHH0", "0HHHHHHHHHHHHHHHHHH0", "0HHHHHHHHHHHHHHHHHH0"];
-    crown.forEach((row, y) => [...row].forEach((pixel, x) => rect(Math.floor((32 - row.length) / 2) + x, y + 2, 1, 1, pixel === "H" ? hair : pixel === "h" ? hairLight : pixel)));
-    rect(5, 11, side ? 10 : 4, 5, hair);
-    rect(7, 11, side ? 9 : 7, 2, hair);
-    rect(11, 12, 2, 2, hair);
-    rect(14, 11, 2, 1, hair);
-    rect(6, 11, 1, 3, hairLight);
-    if (direction === "up") {
-        rect(6, 10, 20, 8, hair);
-        rect(8, 18, 16, 2, hair);
-        rect(10, 20, 12, 1, "0");
-        rect(7, 12, 1, 4, hairLight);
-        rect(22, 16, 2, 1, hairLight);
-        rect(11, 19, 10, 1, hairLight);
-    }
-    else if (!side) {
-        rect(23, 11, 3, 5, hair);
-        rect(21, 11, 4, 2, hair);
-        rect(20, 12, 2, 1, hair);
-    }
-    if (style === 1) { // Bob: longer sides and a low back, distinct from the short cut.
-        rect(5, 14, side ? 9 : 4, 8, hair);
-        if (!side)
-            rect(23, 14, 3, 8, hair);
-        if (direction === "up")
-            rect(8, 18, 16, 5, hair);
-        rect(6, 16, 1, 4, hairLight);
-    }
-    else if (style === 2) { // Curly outline with a raised crown and uneven fringe.
-        rect(8, 1, 3, 3, hair);
-        rect(14, 1, 3, 3, hair);
-        rect(21, 2, 3, 3, hair);
-        rect(5, 6, 2, 2, hairLight);
-        rect(14, 11, 2, 2, hair);
-        rect(19, 10, 2, 2, hair);
-    }
-    return grid.map(row => (direction === "left" ? row.reverse() : row).join(""));
-}
-/** Every sprite is a character matrix: one hex digit per palette index. */
-export const SPRITES = {
-    person: [
-        "..................", "....8888888888....", "...888888888888...", "..888cccccc8888...",
-        "..88c0cccc0c88....", "..88cccccccc88....", "...88cccccc88.....", "....cccccccc......",
-        "...cSSSSSSSSSc....", "..cSSSSSSSSSSSc...", "..cSSSSSSSSSSSc...", "...SSSSSSSSSSSS...",
-        "....SSSSSSSSSS....", "....ccSSSScc......", ".....999999.......", "....99999999......",
-        "....99....99......", "...999....999.....", "...999....999.....", "..9999....9999...."
-    ],
-    step: [
-        "..................", "....8888888888....", "...888888888888...", "..888cccccc8888...",
-        "..88c0cccc0c88....", "..88cccccccc88....", "...88cccccc88.....", "....cccccccc......",
-        "...cSSSSSSSSSc....", "..cSSSSSSSSSSSc...", "..cSSSSSSSSSSSc...", "...SSSSSSSSSSSS...",
-        "....SSSSSSSSSS....", "....ccSSSScc......", ".....999999.......", "....99999999......",
-        ".....99999........", "....999999........", "...999....999.....", "..9999....9999...."
-    ],
-    desk: [
-        "..........88888888..............", "..........81111118..............", "..........81bb1b18..............",
-        "..........81111118..............", "..........88888888..............", ".............8888...............",
-        "00000000000000000000000000000000", "0eeeeeeeeeeeeeeeeeeeeeeeeeeeeee0", "06666666666666666666666666666660",
-        "06666666666666666666666666666660", "00000000000000000000000000000000", "060..........................060",
-        "060..........................060", "060..........................060", "060..........................060", "000..........................000"
-    ],
-    whiteboard: [
-        "00000000000000000000000000000000", "0ffffffffffffffffffffffffffffff0", "0ff11f1111fffff44f4fffff22fffff0",
-        "0ffffffffffffffffffffffffffffff0", "0ff1111f11ff44444fffff2222fffff0", "0ffffffffffffffffffffffffffffff0",
-        "0ff11111ffff444fffff22fffffffff0", "0ffffffffffffffffffffffffffffff0", "0ffffffffffffffffffffffffffffff0",
-        "00000000000000000000000000000000", "0777777777777777777777777777777.", "..............0880..............",
-        "..............0880..............", "..............0880..............", "..............0880..............", "............00000000............"
-    ],
-    bench: [
-        "......b.........a.........d.....", ".....0b0.......0a0.......0d0....", ".....0b0.......0a0.......0d0....",
-        "....0bbb0.....0aaa0.....0ddd0...", "...0bbbbb0...0aaaaa0...0ddddd0..", "...0000000...0000000...0000000..",
-        "00000000000000000000000000000000", "0ffffffffffffffffffffffffffffff0", "07777777777777777777777777777770",
-        "00000000000000000000000000000000", "070888888888888888888888888880.0", "070..........................070",
-        "070..........................070", "070..........................070", "070..........................070", "000..........................000"
-    ],
-    table: [
-        "................................", "....000000000000000000000000....", "..0066666666666666666666666600..",
-        ".06666666666666666666666666666..", "0666666ffff666666666ffff6666660.", "0666666ffff666666666ffff6666660.",
-        "0666666666666666666666666666660.", ".066666666666666666666666666660.", "..0066666666666666666666666600..",
-        "....000000000000000000000000....", "......060..............060......", "......060..............060......",
-        "......060..............060......", "......060..............060......", "......000..............000......", "................................"
-    ],
-    rug: [
-        "000000000000000000000000", "0aaaaaaaaaaaaaaaaaaaaaa0", "0a22222222222222222222a0", "0a22222222222222222222a0",
-        "0a22222222222222222222a0", "0a22222222222222222222a0", "0a22222222222222222222a0", "0a22222222222222222222a0",
-        "0a22222222222222222222a0", "0a22222222222222222222a0", "0a22222222222222222222a0", "0a22222222222222222222a0",
-        "0a22222222222222222222a0", "0a22222222222222222222a0", "0aaaaaaaaaaaaaaaaaaaaaa0", "000000000000000000000000"
-    ],
-    chair: [
-        "....000000....", "...06666660...", "...06666660...", "...06666660...", "....000000....", "....066660....",
-        "....066660....", "....066660....", "....000000....", "...000..000...", "...060..060...", "...060..060...",
-        "..0000..0000..", ".............."
-    ],
-    window: [
-        "000000000000000000000000", "0bbbbbbbbbbbbbbbbbbbbbb0", "0bffffffffffffffffffffb0", "0bffffffff0000ffffffffb0",
-        "0bffffffff0000ffffffffb0", "0bffffffffffffffffffffb0", "0bffffffffffffffffffffb0", "000000000000000000000000"
-    ],
-    door: [
-        "0000000000000000", "0666666666666660", "0644444444444460", "0646666664666460", "0646666664666460",
-        "0646666664666460", "0644444444444460", "0646666664666460", "0646666664666460", "06466666646ee460",
-        "06466666646ee460", "0646666664666460", "0644444444444460", "0646666664666460", "0646666664666460",
-        "0646666664666460", "0646666664666460", "0644444444444460", "0646666664666460", "0646666664666460",
-        "0646666664666460", "0644444444444460", "0666666666666660", "0000000000000000", "0aaaaaaaaaaaaaa0",
-        "0a2a2a2a2a2a2aa0", "0aaaaaaaaaaaaaa0", "0000000000000000"
-    ],
-    shelf: [
-        "00000000000000000000000000000000", "06666666666666666666666666666660", "06............................60",
-        "06............................60", "06............................60", "06............................60", "06............................60",
-        "06............................60", "06............................60", "06666666666666666666666666666660", "06............................60",
-        "06............................60", "06............................60", "06............................60", "06............................60",
-        "06............................60", "06............................60", "06666666666666666666666666666660", "00000000000000000000000000000000"
-    ],
-    book: ["SSS", "SfS", "SSS", "SSS", "SSS", "SSS", "SSS"],
-    clock: [
-        ".....000000.....", "...00ffffff00...", "..0ffff0ffff0...", ".0fffffffffff0..", ".0fffffffffff0..",
-        "0ffffffffffffff0", "0f0ffffffffff0f0", "0ffffffffffffff0", "0ffffffffffffff0", ".0fffffffffff0..",
-        ".0fffffffffff0..", "..0ffff0ffff0...", "...00ffffff00...", ".....000000.....", "................", "................"
-    ],
-    plant: [
-        "......a..a......", "...a..aa.a..a...", "....aa2aa2aa....", "..a.2aa22aa2.a..", "...aa2a22a2aa...",
-        "....2aa22aa2....", ".....2a22a2.....", "......2222......", ".....000000.....", ".....066660.....",
-        ".....064460.....", "......0660......", "......0660......", "......0000......", "................", "................"
-    ],
-    paper: ["000000", "0ffff0", "000000"],
-    alert: [".00.", "0ee0", "0ee0", "0ee0", "0ee0", ".00.", "0ee0", ".00."],
-    floor: [
-        "7777777777777777", "6666666666666666", "666666b666666666", "66666666666b6666", "7777777777777777",
-        "6666666666666666", "6666b66666666666", "6666666666666666", "7777777777777777", "6666666666666666",
-        "6666666666666b66", "6666666666666666", "7777777777777777", "666666b666666666", "6666666666666666",
-        "6666666666666666"
-    ],
-    wall: [
-        "7777777777777777", "7777777777777777", "7777777777777777", "7777777777777777", "7777777777777777",
-        "7777777777777777", "7777777777777777", "7777777777777777", "7777777777777777", "7777777777777777",
-        "7777777777777777", "7777777777777777", "7777777777777777", "7777777777777777", "7777777777777777",
-        "7777777777777777"
-    ],
-    baseboard: ["bbbbbbbbbbbbbbbb", "0000000000000000"]
-};
 const STYLE = String.raw `
 :root{color-scheme:light}
 *{box-sizing:border-box}
 html,body{width:100%;height:100%;overflow:hidden}
-body{margin:0;background:#2b241f;color:#2b241f;font:clamp(12px,1.25vw,18px)/1.25 "Courier New",monospace}
+body{margin:0;background:#2b241f;color:#2b241f;font:14px/1.45 system-ui,-apple-system,sans-serif}
 button{font:inherit;color:inherit}
 #app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#ead8b8}
 #header{min-height:54px;display:flex;align-items:center;gap:12px;padding:8px 18px;background:#2b241f;color:#fff7e6;border-bottom:4px solid #8a5033;white-space:nowrap}
-#brand{font-weight:bold;font-size:clamp(16px,2vw,26px);letter-spacing:.02em}
+#brand{font:bold clamp(16px,1.4vw,22px)/1.25 "Courier New",monospace;letter-spacing:.02em}
 #crumb{flex:1;overflow:hidden;text-overflow:ellipsis;color:#f2e5c9}
-#header button{border:2px solid #f2e5c9;background:#6d9275;color:#fff7e6;padding:5px 9px;cursor:pointer;box-shadow:2px 2px 0 #000}
+#header button{border:2px solid #f2e5c9;background:#355a4b;color:#fff7e6;padding:5px 9px;cursor:pointer;box-shadow:2px 2px 0 #000}
 #header button:hover,#header button:focus-visible{background:#adc39a;color:#2b241f;outline:3px solid #f2c95c;outline-offset:2px}
 #header button[hidden],#header select[hidden]{display:none}
 #header select{border:2px solid #f2e5c9;background:#355a4b;color:#fff7e6;padding:4px 6px;font:inherit;box-shadow:2px 2px 0 #000}
 #header select:focus-visible{outline:3px solid #f2c95c;outline-offset:2px}
 #live{color:#adc39a}
-#wrap{min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;padding:4px 8px;overflow:hidden;background:#ead8b8}
-#office{display:block;max-width:100%;max-height:none;width:auto;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid #6b5d50;box-shadow:6px 6px 0 #8a5033;outline:none;cursor:pointer}
+#panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
+#panel-toggle{flex:none;border:2px solid #2b241f;background:#d9aa72;padding:2px 8px;font-size:13px;cursor:pointer;box-shadow:2px 2px 0 #8a5033}
+#panel-toggle:hover,#panel-toggle:focus-visible{background:#f2c95c;outline:3px solid #355a4b;outline-offset:2px}
+#workspace.collapsed{grid-template-columns:minmax(0,1fr) 46px}
+#workspace.collapsed #work-panel{padding:6px 4px;align-items:center}
+#workspace.collapsed #work-heading,#workspace.collapsed #work-summary,#workspace.collapsed #work-list{display:none}
+#workspace.collapsed #panel-head{flex:1}
+#workspace.collapsed #panel-toggle{writing-mode:vertical-rl;padding:10px 4px;letter-spacing:.1em}
+#workspace.collapsed #wrap{overflow:hidden}
+#workspace{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,28vw,400px);gap:12px;padding:10px}
+#wrap{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;background:#ead8b8}
+#overview{display:flex;flex-direction:column;gap:18px;padding:4px 8px 16px;outline:none}
+#overview[hidden],#room-view[hidden]{display:none}
+.repo-head{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;padding:4px 10px;font-size:16px;background:#2b241f;color:#fff7e6;border-left:6px solid #6d9275}
+.repo-alert{color:#f2c95c;font-size:14px}
+.cards{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start}
+.card{position:relative;display:block;max-width:100%;padding:0;border:0;background:transparent;text-align:left;cursor:pointer}
+.card-caption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;padding:3px 10px;background:rgba(43,36,31,.85);border:2px solid #2b241f;pointer-events:none}
+.card canvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid #6b5d50;box-shadow:4px 4px 0 #8a5033}
+.card:hover canvas,.card:focus-visible canvas{border-color:#355a4b;outline:3px solid #f2c95c;outline-offset:2px}
+.card:focus-visible{outline:none}
+.card-title{font-weight:bold;color:#fff7e6;overflow-wrap:anywhere}
+.card-meta{font-size:13px;color:#f2e5c9}
+.empty-room{cursor:default}
+.page-grid{display:grid;justify-content:center;gap:14px}
+#overview.paged{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;padding:0;gap:0}
+#overview.paged::-webkit-scrollbar{display:none}
+.page{scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;padding:8px 16px}
+#room-view{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 8px}
+#hud{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%;padding:6px 10px;background:#fff7e6;border:2px solid #8a5033}
+.hud-title{font-size:15px;margin-right:4px;overflow-wrap:anywhere}
+.hud-bar{display:inline-block;width:110px;height:10px;background:#e2cda6;border:2px solid #2b241f}
+.hud-bar i{display:block;height:100%;background:#6d9a5a}
+.hud-count{font-variant-numeric:tabular-nums}
+.badge{padding:0 6px;font-size:12px;border:2px solid #6b5d50;background:#f2e5c9}
+.badge.good{border-color:#3f6b4e;color:#3f6b4e}
+.badge.bad{border-color:#c86f4a;color:#a2502f}
+.badge.alert{background:#c86f4a;border-color:#2b241f;color:#fff7e6;cursor:pointer}
+#stage{position:relative}
+#office{display:block;image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid #6b5d50;box-shadow:6px 6px 0 #8a5033;outline:none;cursor:pointer;box-sizing:content-box}
 #office:focus-visible{outline:4px solid #f2c95c;outline-offset:4px}
-#dialogue{width:100%;min-height:2.25em;padding:6px 12px;background:#fff7e6;border:2px solid #8a5033;color:#2b241f;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-#room-nav{width:100%;display:flex;justify-content:center;align-items:center;gap:5px;min-height:28px;overflow:hidden}
-#room-nav button{max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:2px solid #8a5033;background:#f2e5c9;padding:3px 7px;cursor:pointer}
-#room-nav button[aria-current=true]{background:#6d9275;color:#fff7e6;border-color:#2b241f}
-#room-nav button:focus-visible{outline:3px solid #f2c95c;outline-offset:2px}
+#labels{position:absolute;left:4px;top:4px;pointer-events:none}
+#labels span{position:absolute;white-space:nowrap;font-size:12px;line-height:1.3}
+#labels span[hidden]{display:none}
+.zone-label{padding:0 6px;background:rgba(43,36,31,.82);color:#fff7e6;font-weight:bold}
+.nameplate{transform:translateX(-50%);padding:0 4px;background:#fff7e6;border:1px solid #6b5d50;color:#2b241f}
+.nameplate.alert{border-color:#c86f4a;color:#a2502f;font-weight:bold}
+.nameplate.viewer{background:#f2c95c}
+.overflow{padding:0 5px;background:#355a4b;color:#fff7e6;font-weight:bold}
+.speech{transform:translate(-50%,-100%);max-width:260px;white-space:normal!important;padding:4px 8px;background:#fff7e6;border:2px solid #2b241f;box-shadow:2px 2px 0 #8a5033;color:#2b241f}
+#work-panel{min-width:0;min-height:0;display:flex;flex-direction:column;padding:12px;background:#fff7e6;border:3px solid #6b5d50;box-shadow:4px 4px 0 #8a5033}
+#work-heading{margin:0;font-size:18px;color:#355a4b}
+#work-summary{margin:4px 0 10px;font-size:13px}
+#work-list{min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:2px 4px 4px 0}
+.work-card{flex-shrink:0;padding:10px;border:2px solid #b7c7a3;background:#f2e5c9;overflow-wrap:anywhere}
+.work-card.attention{border-color:#8a5033;border-left-width:5px}
+.work-card button{display:block;width:100%;text-align:left;white-space:normal;overflow-wrap:anywhere;border:0;background:transparent;padding:0;cursor:pointer}
+.work-name{font-weight:bold;font-size:14px;text-decoration:underline;text-underline-offset:3px;color:#355a4b}
+.work-card p{margin:4px 0 0}
+.criterion{border-left-width:5px}
+.criterion.pass{border-color:#6d9275}
+.criterion.fail{border-color:#c86f4a}
+.criterion.unknown{border-color:#6b5d50}
+.criterion.pending{border-color:#d9aa72}
+.work-section{margin:6px 0 0;font-size:14px;color:#355a4b}
+.work-command{display:block;padding:4px 6px;background:#f2e5c9;font:12px/1.4 monospace;overflow-wrap:anywhere}
+.work-meta,.work-proof{font-size:13px;color:#4b4035}
+.work-action,.work-reason{font-size:13px;font-weight:600;color:#8a5033}
+.work-card button:focus-visible{outline:3px solid #355a4b;outline-offset:3px}
 #status{position:fixed;z-index:4;inset:6dvh 50% auto auto;transform:translateX(50%);width:min(92vw,680px);max-height:88dvh;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:16px;background:#fff7e6;border:4px solid #6b5d50;box-shadow:8px 8px 0 #2b241f;color:#2b241f}
 #status[hidden]{display:none}
-#status h2{margin:0 0 8px;color:#355a4b;font-size:1.25em}
-#status .dialog-body{min-height:0;overflow:hidden}
+#status h2{margin:0 0 8px;color:#355a4b;font-size:1.25em;overflow-wrap:anywhere}
+#status .dialog-body{min-height:0;overflow:auto}
 #status p{margin:5px 0;overflow-wrap:anywhere;white-space:pre-wrap}
 #status ul{margin:5px 0;padding-left:22px}
 #status li{overflow-wrap:anywhere}
@@ -284,29 +99,72 @@ button{font:inherit;color:inherit}
 #status .dialog-pager{border-top:2px solid #d9aa72;padding-top:6px}
 #status button{border:2px solid #2b241f;background:#d9aa72;padding:5px 10px;cursor:pointer}
 #status button:focus-visible{outline:3px solid #f2c95c;outline-offset:2px}
+#status.panel h2{font-family:"Courier New",monospace}
+.panel-heading{margin:10px 0 4px;font-size:14px;color:#355a4b}
+.panel-meta{font-size:13px;color:#4b4035}
+.panel-phases{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none}
+.panel-phases li{padding:2px 8px;border:2px solid #6b5d50;background:#f2e5c9;font-size:13px}
+.panel-phases li.now{background:#355a4b;color:#fff7e6;border-color:#2b241f}
+.panel-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
+.panel-column{display:flex;flex-direction:column;gap:6px;min-width:0}
+.note{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border:2px solid #2b241f;font-size:13px;box-shadow:2px 2px 0 rgba(43,36,31,.35);overflow-wrap:anywhere}
+.note.todo{background:#f2c95c}.note.fail{background:#f3c2b4;border-color:#c86f4a}.note.pass{background:#cfe0a4}
+.panel-question{padding:6px 8px;border:2px solid #c86f4a;background:#fdeee8}
+#status.panel-task{border-color:#9c8d7d;background:#fffdf7}
+#status.panel-diff{background:#2f3f4f;color:#e8eef0;border-color:#2b241f}
+#status.panel-diff h2,#status.panel-diff .panel-meta{color:#a9d3d8}
+.panel-files{margin:6px 0;padding-left:18px;font:13px/1.5 monospace}
+.panel-files li.recent{color:#f2c95c}
+#status.panel-verify{background:#2b241f;color:#fff7e6;border-color:#2f3f4f}
+#status.panel-verify h2,#status.panel-verify .panel-meta{color:#a8c46a}
+.panel-leds{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:8px}
+.led-row{display:flex;flex-direction:column;gap:2px;padding:6px 8px 6px 14px;border-left:6px solid #6b5d50;background:#3a2f28}
+.led-row.pass{border-color:#a8c46a}.led-row.fail,.led-row.unknown{border-color:#c86f4a}
+.panel-output{margin:4px 0 0;padding:6px 8px;max-height:220px;overflow:auto;background:#1f1a16;color:#f2e5c9;font:12px/1.4 monospace;white-space:pre-wrap;overflow-wrap:anywhere}
+#status.panel-verify code,#status.panel-diff code{background:#1f1a16;color:#fff7e6}
+#status.panel-review{background:#f0cf93;border-color:#2b241f}
+.stamp{display:inline-block;margin:0 0 6px;padding:2px 10px;border:3px solid currentColor;font:bold 16px "Courier New",monospace;transform:rotate(-4deg)}
+.stamp.pass{color:#3f6b4e}.stamp.fail{color:#a2502f}.stamp.not_run{color:#6b5d50}
+.round{margin:8px 0;padding:8px 10px;background:#fff7e6;border:2px solid #b8743f}
+.panel-findings{margin:6px 0 0;padding-left:18px}
+.panel-findings li{margin:4px 0}.panel-findings li.blocking strong{color:#a2502f}
+.panel-findings .advice{color:#355a4b}
+#status.panel-integration{background:#e8c38c;border-color:#2b241f}
+.panel-facts{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:0;padding:8px;background:#fff7e6;border:2px solid #2b241f}
+.panel-facts dt{font-weight:bold}.panel-facts dd{margin:0;font-family:monospace;overflow-wrap:anywhere}
+.panel-steps{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
+.panel-steps li{padding:2px 10px;border:2px solid #6b5d50;background:#fff7e6;font-size:13px}
+.panel-steps li.done{border-color:#3f6b4e;color:#3f6b4e}.panel-steps li.failed{border-color:#c86f4a;color:#a2502f}
+@media(max-width:640px){.panel-notes{grid-template-columns:1fr}}
 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+@media(max-width:1000px){#workspace{grid-template-columns:1fr;grid-template-rows:minmax(240px,1fr) minmax(180px,.8fr);gap:8px;padding:6px}#workspace.collapsed{grid-template-columns:1fr;grid-template-rows:1fr auto}#workspace.collapsed #panel-toggle{writing-mode:horizontal-tb;padding:2px 8px}#work-panel{padding:8px}#work-heading{font-size:16px}}
 @media(max-width:760px){#header{flex-wrap:wrap;gap:6px;padding:6px 8px}#brand{font-size:16px}#header button{order:1;font-size:12px;padding:3px 5px}#crumb{min-width:70px}#live{font-size:12px}}
 @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
 `;
 const CLIENT = String.raw `
-var PALETTE = __PALETTE__, SPRITES = __SPRITES__, T = 8, S = 2, U = 1, dpr = 1;
-var sceneModel = __SCENE__;
-var avatarSprite = __AVATAR__, avatarPalette = __AVATAR_COLORS__, avatarImages = {};
-var canvas = document.getElementById("office"), ctx = canvas.getContext("2d"), app = document.getElementById("app");
+var PALETTE = __PALETTE__, SPRITES = __SPRITES__, PEOPLE = __PEOPLE__, LAYOUT = __LAYOUT__;
+var sceneModel = __SCENE__, avatarColors = __AVATAR_COLORS__, walkGrid = __WALK__, findPath = __PATH__, notePosition = __NOTE_POS__;
+var GRID = walkGrid(LAYOUT), ROOM_W = LAYOUT.width, ROOM_H = LAYOUT.height, BOARD_SLOTS = 12;
+var ROOM_OF = {planning:"planning", implementing:"implementing", verifying:"verifying", reviewing:"reviewing", integrating:"integrating"};
+var app = document.getElementById("app"), canvas = document.getElementById("office"), ctx = canvas.getContext("2d");
 ctx.imageSmoothingEnabled = false;
-var dialogueBox = document.getElementById("dialogue"), statusBox = document.getElementById("status"), roomNav = document.getElementById("room-nav"), wrap = document.getElementById("wrap");
+var wrap = document.getElementById("wrap"), overviewBox = document.getElementById("overview"), roomView = document.getElementById("room-view"), hud = document.getElementById("hud"), labels = document.getElementById("labels");
+var statusBox = document.getElementById("status");
+// The right-hand list can fold away so the office takes the whole width; the choice is a per-viewer convenience.
+var workspace = document.getElementById("workspace"), panelToggle = document.getElementById("panel-toggle"), panelCollapsed = readCollapsed();
+function readCollapsed(){ try { return localStorage.getItem("agent-office-list") === "collapsed"; } catch (_) { return false; } }
+var workList=document.getElementById('work-list'),workHeading=document.getElementById('work-heading'),workSummary=document.getElementById('work-summary'),workSignature='';
 var crumb = document.getElementById("crumb"), backButton = document.getElementById("back"), recentButton = document.getElementById("recent");
 var languageButton = document.getElementById("language"), live = document.getElementById("live"), repoSelect = document.getElementById("repo-filter"), repoFilter = "", repoSignature = "";
-var snapshot = null, model = null, positions = {}, roomCanvases = {}, frame = 0, lineIndex = 0, typed = 0, offline = false;
+var snapshot = null, model = null, frame = 0, offline = false, scale = 1, scaleY = 1;
 var mode = "overview", selectedKey = null, showRecent = false, detailPage = 0, dialogClose = null, detailPreviousFocus = null, detailTarget = null;
 var detailSignature = "";
-var navPage = 0, navSignature = "", NAV_PAGE_SIZE = 8;
-var supervisor = {x:43, y:19, targetX:43, targetY:19}, supervisorReady = false, hallwayReturn = null;
-var roomSupervisor = {x:32, y:34, targetX:32, targetY:34};
+var people = {}, staffMemory = {}, viewer = spawnViewer(), doorFrames = {}, images = {}, bases = {}, roomCanvases = {}, overviewSignature = "", hudSignature = "", labelNodes = {}, lastFigures = [], stageCanvas = null;
 var reducedMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function spawnViewer(){ return {x: Math.round(LAYOUT.spawn.x / 2) * 2, y: Math.round(LAYOUT.spawn.y / 2) * 2, path: [], dir: "up", step: 0}; }
 var STRINGS = {
-  en: {viewer:"You", overview:"Office overview", rooms:"rooms", people:"people", recent:"Recently completed", recentOn:"Hide completed", repos:"Repository", allRepos:"All repositories", noTask:"No task", noTaskHint:"Nothing to verify or review", back:"Back to overview", connected:"● Connected", offline:"○ Reconnecting", quiet:"The office is quiet. No agent is at work.", waiting:"waiting for your answer", enter:"Enter room", close:"Close", previous:"Previous", next:"Next", page:"Page", details:"Details", progress:"Progress", verify:"Verify", review:"Review", pending:"Awaiting answer", task:"Task", status:"Status", phase:"Phase", host:"Host", now:"Now", owner:"Owner", currentWork:"Current work", question:"Pending question", questions:"Questions", workList:"Work list", clickWork:"Click for work", keyboardWork:"Press L for work list", keyboardPhase:"Press 1-5 for phase work", keyboardQuestions:"Press Q for questions", noPeople:"No known work is in this phase", noQuestions:"No pending questions", files:"Changed files", commands:"Commands", copy:"Copy", copied:"Copied", unknown:"unknown", unassigned:"unassigned", phases:{planning:"Planning", implementing:"Implementing", verifying:"Verifying", reviewing:"Reviewing", integrating:"Integrating", unknown:"Unassigned"}, statuses:{active:"active", idle:"idle", running:"running", reviewing:"reviewing", verifying:"verifying", blocked:"blocked", delivered:"delivered", complete:"complete", unknown:"unknown", unassigned:"unassigned", pending:"pending"}},
-  zh: {viewer:"你", overview:"辦公室總覽", rooms:"個房間", people:"位成員", recent:"最近完成", recentOn:"隱藏已完成", repos:"專案", allRepos:"所有專案", noTask:"無任務", noTaskHint:"沒有需要驗證或審查的工作", back:"返回總覽", connected:"● 已連線", offline:"○ 重新連線中", quiet:"辦公室很安靜，目前沒有成員工作。", waiting:"等待你的回覆", enter:"進入房間", close:"關閉", previous:"上一頁", next:"下一頁", page:"頁", details:"詳細資料", progress:"進度", verify:"驗證", review:"審查", pending:"待回覆", task:"任務", status:"狀態", phase:"階段", host:"主機", now:"目前", owner:"負責人", currentWork:"目前工作", question:"待回覆問題", questions:"問題", workList:"工作清單", clickWork:"點擊查看工作", keyboardWork:"按 L 開啟工作清單", keyboardPhase:"按 1-5 查看階段工作", keyboardQuestions:"按 Q 查看問題", noPeople:"此階段目前沒有已知工作", noQuestions:"目前沒有待回覆問題", files:"變更檔案", commands:"指令", copy:"複製", copied:"已複製", unknown:"未知", unassigned:"未分配", phases:{planning:"規劃", implementing:"開發", verifying:"驗證", reviewing:"審查", integrating:"整合", unknown:"未分配"}, statuses:{active:"進行中", idle:"閒置", running:"工作中", reviewing:"審查中", verifying:"驗證中", blocked:"受阻", delivered:"已交付", complete:"已完成", unknown:"未知", unassigned:"未分配", pending:"待回覆"}}
+  en: {copyFailed:"Copy manually", copyHint:"Clipboard unavailable; select the command and copy it manually.", checks:"Acceptance checks", unfinished:"Not complete", sessionEnded:"Session ended", attention:"Needs attention", verifyFailed:"Verification failed", reviewFailed:"Review failed", blockedUnknown:"Blocked; reason not provided", openQuestion:"View questions and commands", detailsAction:"Details and commands", stale:"Reconnecting; showing last known state", viewer:"You", overview:"Office overview", rooms:"rooms", people:"people", recent:"Recently completed", recentOn:"Hide completed", repos:"Repository", allRepos:"All repositories", noTask:"No task", noTaskHint:"Nothing to verify or review", panel_task:"Whiteboard", panel_diff:"Screen", panel_verify:"QA board", panel_review:"Review desk", panel_integration:"Sorting table", noChanges:"No changed files yet.", filesCount:"files", notReviewed:"Not reviewed yet.", firstRound:"Round 1", recheck:"Re-check", blocking:"blocking", refutedYes:"The re-check overturned round 1.", refutedNo:"The re-check upheld round 1.", worktree:"Worktree", branch:"Branch", base:"Base", ahead:"Commits ahead", commitStep:"Commit", finishStep:"worktree finish (merge)", hideList:"Hide list »", showList:"« Work list", moveHint:"Arrow keys or WASD walk; Enter talks to the nearest person; Esc returns.", critPass:"PASS", critFail:"FAIL", critUnknown:"Undetermined", critPending:"Not verified yet", noCriteria:"This room has no acceptance criteria.", back:"Back to overview", connected:"● Connected", offline:"○ Reconnecting", quiet:"The office is quiet. No agent is at work.", integrator:"Integrator", staff_verify:"Running verification", staff_review:"Reviewing", staff_wait:"Waiting for the other round", staff_finish:"Merging the worktree", staff_rest:"Resting in the lobby", waiting:"waiting for your answer", enter:"Enter room", close:"Close", previous:"Previous", next:"Next", page:"Page", details:"Details", progress:"Progress", verify:"Verify", review:"Review", pending:"Awaiting answer", task:"Task", status:"Status", phase:"Phase", host:"Host", now:"Now", owner:"Owner", currentWork:"Current work", question:"Pending question", questions:"Questions", workList:"Work list", clickWork:"Click for work", keyboardWork:"Press L for work list", keyboardPhase:"Press 1-5 for phase work", keyboardQuestions:"Press Q for questions", noPeople:"No known work is in this phase", noQuestions:"No pending questions", files:"Changed files", commands:"Commands", copy:"Copy", copied:"Copied", unknown:"unknown", unassigned:"unassigned", phases:{planning:"Planning", implementing:"Implementing", verifying:"Verifying", reviewing:"Reviewing", integrating:"Integrating", lobby:"Lobby", unknown:"Unassigned"}, statuses:{active:"active", idle:"idle", running:"running", reviewing:"reviewing", verifying:"verifying", blocked:"blocked", delivered:"delivered", complete:"complete", unknown:"unknown", unassigned:"unassigned", pending:"pending"}},
+  zh: {copyFailed:"手動複製", copyHint:"無法存取剪貼簿；請選取指令後手動複製。", checks:"驗收條件", unfinished:"尚未完成", sessionEnded:"工作階段已結束", attention:"需要介入", verifyFailed:"驗證未通過", reviewFailed:"審查未通過", blockedUnknown:"受阻；尚無原因資料", openQuestion:"查看問題與指令", detailsAction:"詳情與指令", stale:"重新連線中；顯示最後已知狀態", viewer:"你", overview:"辦公室總覽", rooms:"個房間", people:"位成員", recent:"最近完成", recentOn:"隱藏已完成", repos:"專案", allRepos:"所有專案", noTask:"無任務", noTaskHint:"沒有需要驗證或審查的工作", panel_task:"白板", panel_diff:"隔間螢幕", panel_verify:"QA 狀態看板", panel_review:"主管桌", panel_integration:"分信桌", noChanges:"目前沒有變更的檔案。", filesCount:"個檔案", notReviewed:"尚未審查。", firstRound:"第 1 輪", recheck:"對抗複查", blocking:"阻擋", refutedYes:"對抗複查推翻了第 1 輪。", refutedNo:"對抗複查維持第 1 輪的結論。", worktree:"Worktree", branch:"分支", base:"基準", ahead:"領先 commit", commitStep:"commit", finishStep:"worktree finish（合併）", hideList:"收合 »", showList:"« 工作清單", moveHint:"方向鍵或 WASD 走動；Enter 和最近的人對話；Esc 返回。", critPass:"通過", critFail:"未通過", critUnknown:"無法判定", critPending:"還沒驗證", noCriteria:"這間房沒有驗收條件。", back:"返回總覽", connected:"● 已連線", offline:"○ 重新連線中", quiet:"辦公室很安靜，目前沒有成員工作。", integrator:"整合", staff_verify:"執行驗證中", staff_review:"審查中", staff_wait:"等待另一輪審查", staff_finish:"合併 worktree 中", staff_rest:"在大廳休息", waiting:"等待你的回覆", enter:"進入房間", close:"關閉", previous:"上一頁", next:"下一頁", page:"頁", details:"詳細資料", progress:"進度", verify:"驗證", review:"審查", pending:"待回覆", task:"任務", status:"狀態", phase:"階段", host:"主機", now:"目前", owner:"負責人", currentWork:"目前工作", question:"待回覆問題", questions:"問題", workList:"工作清單", clickWork:"點擊查看工作", keyboardWork:"按 L 開啟工作清單", keyboardPhase:"按 1-5 查看階段工作", keyboardQuestions:"按 Q 查看問題", noPeople:"此階段目前沒有已知工作", noQuestions:"目前沒有待回覆問題", files:"變更檔案", commands:"指令", copy:"複製", copied:"已複製", unknown:"未知", unassigned:"未分配", phases:{planning:"規劃", implementing:"開發", verifying:"驗證", reviewing:"審查", integrating:"整合", lobby:"大廳", unknown:"未分配"}, statuses:{active:"進行中", idle:"閒置", running:"工作中", reviewing:"審查中", verifying:"驗證中", blocked:"受阻", delivered:"已交付", complete:"已完成", unknown:"未知", unassigned:"未分配", pending:"待回覆"}}
 };
 function getLanguage(){
   try { var cookie = document.cookie.split(";").map(function(part){ return part.trim().split("="); }).find(function(pair){ return pair[0] === "agent-office-language"; }); if (cookie && (cookie[1] === "en" || cookie[1] === "zh")) return cookie[1]; } catch (_) {}
@@ -332,56 +190,10 @@ function localizeText(value){
 function saveLanguage(){ try { localStorage.setItem("agent-office-language", lang); } catch (_) {} try { document.cookie = "agent-office-language=" + lang + "; Max-Age=31536000; Path=/; SameSite=Strict"; } catch (_) {} }
 function safeText(value, fallback){ return typeof value === "string" && value.length ? value : (fallback || t("unknown")); }
 function short(value, limit){ value = safeText(value); limit = limit || 22; return value.length > limit ? value.slice(0, limit - 1) + "…" : value; }
-function draw(name, x, y, shirt){
-  var rows = SPRITES[name]; if (!rows) return;
-  var scale = name === "floor" || name === "wall" || name === "baseboard" ? 1 : S;
-  for (var r = 0; r < rows.length; r++) for (var c = 0; c < rows[r].length; c++) {
-    var ch = rows[r][c]; if (ch === ".") continue;
-    ctx.fillStyle = ch === "S" ? shirt : PALETTE[parseInt(ch, 16)]; ctx.fillRect(x + c * scale, y + r * scale, scale, scale);
-  }
-}
-function avatarScale(surface){return Math.max(1,Math.round(Math.min(surface.width/(model.roomCols*T),surface.height/(model.roomRows*T))*T/9));}
-function advanceAvatar(state, tx, ty, speed){
-  var dx=tx-state.x,dy=ty-state.y;
-  if(Math.abs(dx)>.05||Math.abs(dy)>.05)state.direction=Math.abs(dx)>Math.abs(dy)?(dx<0?'left':'right'):(dy<0?'up':'down');
-  if(reducedMotion){state.x=tx;state.y=ty;}else{state.x+=Math.max(-speed,Math.min(speed,dx));state.y+=Math.max(-speed,Math.min(speed,dy));}
-  state.walking=!reducedMotion&&(Math.abs(state.x-tx)>.05||Math.abs(state.y-ty)>.05);
-}
-function drawAvatar(identity, state, x, y, scale, viewer){
-  var pose=state.walking&&!reducedMotion?Math.floor(frame/7)%4:0,direction=state.direction||'down',key=JSON.stringify([identity,direction,pose,!!viewer]);
-  var image=avatarImages[key];
-  if(!image){
-    image=document.createElement('canvas');image.width=32;image.height=48;var paint=image.getContext('2d'),rows=avatarSprite(identity,direction,pose,!!viewer),colors=avatarPalette(identity,!!viewer);
-    for(var row=0;row<rows.length;row++)for(var col=0;col<rows[row].length;col++){var pixel=rows[row][col];if(pixel!=='.'){paint.fillStyle=colors[parseInt(pixel,16)];paint.fillRect(col,row,1,1);}}
-    avatarImages[key]=image;
-  }
-  x=Math.round(x);y=Math.round(y);
-  ctx.fillStyle='rgba(43,36,31,.18)';ctx.fillRect(x+8*scale,y+46*scale,17*scale,2*scale);
-  ctx.drawImage(image,x,y,32*scale,48*scale);
-}
-function propSize(kind){ var s = SPRITES[kind] || [""]; return {w:s[0].length * S, h:s.length * S}; }
-function roomMetrics(width,height){var rx=width/model.roomCols,ry=height/model.roomRows;return {rx:rx,ry:ry,unit:Math.max(.5,Math.min(rx,ry)/8)};}
-function propGeometry(prop,width,height){
-  var metrics=roomMetrics(width,height),rawX=prop.x*metrics.rx,rawY=prop.y*metrics.ry;
-  // layout sizes keep the existing scale decisions; visual sizes follow the
-  // actual rounded pixel art drawn by furniture() so clicks never drift away.
-  var layoutWidths={window:58,plant:32,shelf:28,door:24},visualWidths={desk:75,bench:75,table:65,window:58,plant:32,shelf:28,door:24,whiteboard:65,chair:21},heights={desk:45,bench:45,table:54,window:31,whiteboard:49,shelf:61,plant:31,chair:32,door:46};
-  var visualHeights={desk:45,bench:49,table:54,window:34,plant:34,shelf:61,door:46,whiteboard:49,chair:32},visualXOffsets={window:-3},visualYOffsets={bench:-4,window:-3,plant:-3};
-  var layoutWidth=layoutWidths[prop.kind]||75,visualWidth=visualWidths[prop.kind]||layoutWidth,artHeight=heights[prop.kind]||45;
-  var rawScale=Math.max(.3,Math.min(metrics.unit*1.85,(height-rawY-2*metrics.unit)/artHeight,(width-rawX-2*metrics.unit)/layoutWidth)),scale=Math.max(1,Math.round(rawScale)),visualHeight=visualHeights[prop.kind]||artHeight,visualY=Math.round(rawY+(visualYOffsets[prop.kind]||0)*scale);
-  return {x:Math.round(rawX+(visualXOffsets[prop.kind]||0)*scale),y:visualY,rawX:rawX,rawY:rawY,width:visualWidth*scale,height:visualHeight*scale,scale:scale,rawScale:rawScale,unit:metrics.unit};
-}
-function phaseAreaGeometry(area,width,height){var metrics=roomMetrics(width,height);return {x:area.x*metrics.rx,y:area.y*metrics.ry,width:area.width*metrics.rx,height:area.height*metrics.ry,rx:metrics.rx,ry:metrics.ry,unit:metrics.unit};}
-function progressBoardGeometry(width,height){var metrics=roomMetrics(width,height);return {x:24*metrics.rx,y:metrics.ry,width:27*metrics.rx,height:Math.max(7*metrics.ry,66*metrics.unit),unit:metrics.unit};}
-function pendingBoardGeometry(width,height){var board=progressBoardGeometry(width,height),inset=4*board.unit;return {x:board.x+inset,y:board.y+50*board.unit,width:Math.max(0,board.width-inset*2),height:Math.max(0,Math.min(15*board.unit,board.height-50*board.unit)),unit:board.unit};}
-function surfaceForFloor(floor){if(mode==='room')return {x:0,y:0,width:canvas.width,height:canvas.height};var box=roomBox(floor);return {x:Math.round(box.x*T),y:Math.round(box.y*T),width:Math.round(box.width*T),height:Math.round(box.height*T)};}
-function canvasPoint(event){var rect=canvas.getBoundingClientRect();return {x:(event.clientX-rect.left)*canvas.width/rect.width,y:(event.clientY-rect.top)*canvas.height/rect.height};}
-function inside(point,rect){return point.x>=rect.x&&point.x<rect.x+rect.width&&point.y>=rect.y&&point.y<rect.y+rect.height;}
-function fillText(value, x, y, size, color){ ctx.fillStyle = color || PALETTE[0]; ctx.font = "bold " + Math.max(5, Math.round((size || 10) * U)) + "px monospace"; ctx.textBaseline = "top"; ctx.fillText(short(value, 36), x, y); }
+function shortName(value,limit){value=safeText(value);return value.length>limit?value.slice(0,limit-6)+'…'+value.slice(-5):value;}
 function roomByKey(key){ if (!model) return null; for (var i = 0; i < model.floors.length; i++) if (model.floors[i].key === key) return model.floors[i]; return null; }
 function visibleRooms(){ if (!model) return []; return model.floors.filter(function(f){ return (showRecent || !f.completedAt) && (!repoFilter || f.repo === repoFilter); }); }
 function repoNames(){ var names = []; if (model) model.floors.forEach(function(f){ if (f.repo && names.indexOf(f.repo) < 0) names.push(f.repo); }); return names; }
-function repoColor(name){ var hash = 0; for (var i = 0; i < name.length; i++) hash = (hash * 31 + name.charCodeAt(i)) >>> 0; return PALETTE[[1, 4, 9, 13, 0, 8][hash % 6]] || PALETTE[1]; }
 function renderRepoFilter(){
   var names = repoNames(); if (repoFilter && names.indexOf(repoFilter) < 0) repoFilter = "";
   repoSelect.hidden = names.length < 2; repoSelect.setAttribute("aria-label", t("repos"));
@@ -390,271 +202,472 @@ function renderRepoFilter(){
 }
 function activeRoom(){ return selectedKey ? roomByKey(selectedKey) : null; }
 function hasRecent(){ return !!(model && model.floors.some(function(f){ return !!f.completedAt; })); }
-function setCanvasSize(width, height){
-  width = Math.max(1, Math.round(width)); height = Math.max(1, Math.round(height));
-  if (canvas.width !== width) canvas.width = width;
-  if (canvas.height !== height) canvas.height = height;
-  ctx.imageSmoothingEnabled = false;
+// ---- art: sprites become small canvases once; the canvas world draws no text ----
+function mirror(rows){ return rows.map(function(row){ return row.split("").reverse().join(""); }); }
+function rasterize(rows, colours){
+  var image = document.createElement("canvas"); image.width = rows[0].length; image.height = rows.length;
+  var g = image.getContext("2d"); g.imageSmoothingEnabled = false;
+  for (var y = 0; y < rows.length; y++) {
+    var row = rows[y], x = 0;
+    while (x < row.length) { var key = row[x], end = x + 1; while (end < row.length && row[end] === key) end++; if (key !== "." && colours[key]) { g.fillStyle = colours[key]; g.fillRect(x, y, end - x, 1); } x = end; }
+  }
+  return image;
+}
+function spriteImage(name){ if (!images[name]) images[name] = rasterize(SPRITES[name], PALETTE); return images[name]; }
+function personImage(id, role, pose){
+  var key = JSON.stringify([id, role, pose]);
+  if (!images[key]) images[key] = rasterize(pose.indexOf("left") === 0 ? mirror(PEOPLE["right" + pose.slice(4)]) : (PEOPLE[pose] || PEOPLE.down0), avatarColors(id, role));
+  return images[key];
+}
+function makeCanvas(){ var c = document.createElement("canvas"); c.width = ROOM_W; c.height = ROOM_H; c.getContext("2d").imageSmoothingEnabled = false; return c; }
+function fill(g, key, r){ g.fillStyle = PALETTE[key]; g.fillRect(r.x, r.y, r.w, r.h); }
+function tile(g, name, r){
+  var image = spriteImage(name), w = SPRITES[name][0].length, h = SPRITES[name].length;
+  g.save(); g.beginPath(); g.rect(r.x, r.y, r.w, r.h); g.clip();
+  for (var y = r.y; y < r.y + r.h; y += h) for (var x = r.x; x < r.x + r.w; x += w) g.drawImage(image, x, y);
+  g.restore();
+}
+function verifyFails(floor){ return floor.board.verify === "FAIL"; }
+function variantName(name, variant, floor){ return variant ? name + (verifyFails(floor) ? "Fail" : "Pass") : name; }
+/** Floors, walls and wall decor: drawn once per room and verification state. */
+function roomBase(floor){
+  var key = floor.key + "|" + verifyFails(floor);
+  if (bases[key]) return bases[key];
+  var base = makeCanvas(), g = base.getContext("2d");
+  fill(g, "2", {x: 0, y: 0, w: ROOM_W, h: ROOM_H});
+  LAYOUT.rooms.forEach(function(room){ tile(g, room.floor, room); });
+  LAYOUT.rugs.forEach(function(rug){ fill(g, rug.border, rug); fill(g, rug.fill, {x: rug.x + 3, y: rug.y + 3, w: rug.w - 6, h: rug.h - 6}); });
+  tile(g, "wall", LAYOUT.walls.back); tile(g, "wall", LAYOUT.walls.middle);
+  LAYOUT.walls.vertical.forEach(function(v){ fill(g, "1", v); fill(g, "2", {x: v.x + 1, y: v.y, w: 6, h: v.h}); fill(g, "3", {x: v.x + 1, y: v.y, w: 2, h: v.h}); fill(g, "4", {x: v.x + 1, y: v.y, w: 1, h: v.h}); });
+  LAYOUT.walls.sides.concat([LAYOUT.walls.bottom]).forEach(function(r){ fill(g, "2", r); });
+  var door = LAYOUT.entrance; fill(g, "7", door); fill(g, "b", {x: door.x + 2, y: door.y - 8, w: door.w - 4, h: 8}); fill(g, "c", {x: door.x + 4, y: door.y - 6, w: door.w - 8, h: 4});
+  LAYOUT.decor.forEach(function(d){ g.drawImage(spriteImage(variantName(d.sprite, d.variant, floor)), d.x, d.y); });
+  bases[key] = base;
+  return base;
+}
+
+// ---- people: a slot in the room of their phase; they walk only when the phase changes ----
+/** Engineers plan and build; once the work is with QA, the reviewers or the integrator, they stay at their cubicle. */
+function roomFor(actor){ var room = ROOM_OF[actor.phase] || "lobby"; return room === "verifying" || room === "reviewing" || room === "integrating" ? "implementing" : room; }
+// ---- resident staff: they rest in the lobby and walk to their station while their real process runs ----
+var STAFF_ROLES = ["qa", "reviewerA", "reviewerB", "integrator"], STAFF_FADE = 600;
+function activityOf(floor, kind){ var list = floor.activities || []; for (var i = 0; i < list.length; i++) if (list[i].kind === kind) return list[i]; return null; }
+/** Reviewer nameplates: the running review's targets, else the newest report's rounds, else A and B. */
+function reviewerNames(floor){
+  var review = activityOf(floor, "review"), source = sourceFor(floor), report = source && source.review, names = ["A", "B"];
+  if (review && review.targets.length === 2) names = review.targets.slice();
+  else if (report && report.rounds && report.rounds.length === 2) names = report.rounds.map(function(round){ return safeText(round.target); });
+  return names[0] === names[1] ? [names[0] + " 1", names[1] + " 2"] : names;
+}
+function staffResult(floor, kind){
+  var value = kind === "verify" ? floor.board.verify : kind === "review" ? floor.board.review : floor.completedAt ? "PASS" : "FAIL";
+  return value === "PASS" ? "pass" : value === "FAIL" ? "fail" : null;
+}
+function staffOf(floor){
+  var names = reviewerNames(floor), review = activityOf(floor, "review"), second = !!(review && review.round === 2), at = LAYOUT.staff.stations;
+  var plans = {qa: ["verify", "QA", "qa", at.qa, "verify"], reviewerA: ["review", names[0], "reviewer", second ? at.armchair : at.desk, "review"],
+    reviewerB: ["review", names[1], "reviewer", second ? at.desk : at.armchair, "review"], integrator: ["finish", t("integrator"), "integrator", at.integrator, "integration"]};
+  return STAFF_ROLES.map(function(role, index){
+    var plan = plans[role], busy = !!activityOf(floor, plan[0]), slot = busy ? plan[3] : LAYOUT.staff.rest[index];
+    var narration = !busy ? t("staff_rest") : plan[0] !== "review" ? t("staff_" + plan[0]) : slot === at.desk ? t("staff_review") : t("staff_wait");
+    return {key: floor.key + "|staff:" + role, id: plan[1], kind: plan[2], staff: role, activity: plan[0], panel: plan[4], busy: busy, slot: slot,
+      target: slot.feet.x + "," + slot.feet.y, narration: narration, questionCount: 0, status: busy ? "running" : "idle"};
+  });
+}
+/** Sends one person towards a slot; they walk only when the target changes, and jump under reduced motion. */
+function moveTo(key, slot, target, hidden){
+  var state = people[key];
+  if (!state) { people[key] = {x: slot.feet.x, y: slot.feet.y, path: [], dir: "down", step: 0, target: target, slot: slot, hidden: hidden}; return; }
+  state.hidden = hidden;
+  if (state.target === target) return;
+  state.target = target; state.slot = slot;
+  var path = reducedMotion ? null : findPath(GRID, {x: state.x, y: state.y}, slot.feet);
+  if (path && path.length > 1) state.path = path.slice(1);
+  else { state.path = []; state.x = slot.feet.x; state.y = slot.feet.y; }
+}
+function layoutRoom(id){ for (var i = 0; i < LAYOUT.rooms.length; i++) if (LAYOUT.rooms[i].id === id) return LAYOUT.rooms[i]; return LAYOUT.rooms[LAYOUT.rooms.length - 1]; }
+function placements(floor){
+  var counts = {}, byActor = {};
+  floor.actors.slice().sort(function(a, b){ return a.key < b.key ? -1 : a.key > b.key ? 1 : 0; }).forEach(function(actor){
+    var room = roomFor(actor), index = counts[room] || 0; counts[room] = index + 1; byActor[actor.key] = {room: room, index: index};
+  });
+  return {byActor: byActor, counts: counts};
+}
+function syncPeople(){
+  if (!model) return;
+  var seen = {};
+  model.floors.forEach(function(floor){
+    var place = placements(floor).byActor;
+    floor.actors.forEach(function(actor){
+      var p = place[actor.key], room = layoutRoom(p.room);
+      seen[actor.key] = true;
+      moveTo(actor.key, room.slots[Math.min(p.index, room.slots.length - 1)], p.room + ":" + p.index, p.index >= room.slots.length);
+    });
+    staffOf(floor).forEach(function(member){
+      var memory = staffMemory[member.key];
+      // A finished process leaves its result in a bubble for a while.
+      var result = member.busy ? null : memory && memory.busy ? {value: staffResult(floor, member.activity), until: frame + STAFF_FADE} : memory ? memory.result : null;
+      staffMemory[member.key] = {busy: member.busy, result: result};
+      seen[member.key] = true;
+      moveTo(member.key, member.slot, member.target, false);
+    });
+  });
+  Object.keys(people).forEach(function(key){ if (!seen[key]) delete people[key]; });
+  Object.keys(staffMemory).forEach(function(key){ if (!seen[key]) delete staffMemory[key]; });
+}
+function stepAlong(state){
+  if (!state.path.length) return;
+  var next = state.path.shift(), dx = next.x - state.x, dy = next.y - state.y;
+  state.dir = Math.abs(dx) > Math.abs(dy) ? (dx < 0 ? "left" : "right") : (dy < 0 ? "up" : "down");
+  state.x = next.x; state.y = next.y; state.step++;
+}
+/** People cover two grid cells a frame, the viewer three. */
+function advance(){ Object.keys(people).forEach(function(key){ stepAlong(people[key]); stepAlong(people[key]); }); stepAlong(viewer); stepAlong(viewer); stepAlong(viewer); }
+function walkPose(state){ return state.dir + ["1", "0", "2", "0"][(state.step >> 3) % 4]; }
+/** Everyone drawn in a room: sprite top-left, draw depth, pose and feet. */
+function figures(floor){
+  var out = [];
+  floor.actors.concat(staffOf(floor)).forEach(function(actor){
+    var state = people[actor.key];
+    if (!state || state.hidden) return;
+    var walking = state.path.length > 0, slot = state.slot;
+    if (walking) out.push({actor: actor, x: state.x - 17, y: state.y - 49, z: state.y, pose: walkPose(state), walking: true, feet: {x: state.x, y: state.y}});
+    else out.push({actor: actor, x: slot.x, y: slot.y, z: slot.z, pose: actor.questionCount > 0 ? "hand" : slot.pose, walking: false, feet: {x: state.x, y: state.y}});
+  });
+  return out;
+}
+/** A door opens while someone walks through it: closed, ajar, open. */
+function doorFrame(door, walkers){
+  var cx = door.gap.x + door.gap.w / 2, cy = door.gap.y + door.gap.h / 2, near = Infinity;
+  walkers.forEach(function(p){ near = Math.min(near, Math.abs(p.x - cx) + Math.abs(p.y - cy)); });
+  return near < 20 ? 2 : near < 36 ? 1 : 0;
+}
+function noteName(status){ return status === "PASS" ? "notePass" : status === "FAIL" ? "noteFail" : status === "UNKNOWN" ? "noteUnknown" : "notePending"; }
+/** The planning whiteboard carries one sticky note per acceptance criterion. */
+function drawNotes(floor, g){
+  var criteria = floor.criteria || [], shown = criteria.length > BOARD_SLOTS ? criteria.slice(0, BOARD_SLOTS - 1) : criteria;
+  shown.forEach(function(criterion, index){ var p = notePosition(index); g.drawImage(spriteImage(noteName(criterion.status)), LAYOUT.board.x + p.x, LAYOUT.board.y + p.y); });
+  if (criteria.length > BOARD_SLOTS) { var last = notePosition(BOARD_SLOTS - 1); g.drawImage(spriteImage("notePlus"), LAYOUT.board.x + last.x, LAYOUT.board.y + last.y); }
+}
+function staffBubble(actor){ var memory = staffMemory[actor.key], result = memory && memory.result; return result && result.value && frame < result.until ? result : null; }
+function iconFor(floor, actor){
+  if (actor.staff) { var shown = staffBubble(actor); return actor.busy ? (reducedMotion || (frame >> 5) % 2 === 0 ? "bubbleBusy" : null) : shown ? (shown.value === "pass" ? "bubbleDone" : "bubbleFail") : null; }
+  if (actor.questionCount > 0) return "bubbleAlert";
+  if (floor.completedAt || actor.status === "complete") return "bubbleDone";
+  if (actor.phase === "implementing" && (reducedMotion || (frame >> 5) % 2 === 0)) return "bubbleBusy";
+  return null;
+}
+/** Draws one room at 1 art pixel per pixel; returns the people drawn. */
+function renderRoom(floor, g){
+  g.imageSmoothingEnabled = false;
+  g.drawImage(roomBase(floor), 0, 0);
+  var figs = figures(floor), here = mode === "room" && activeRoom() === floor, walkers = figs.filter(function(f){ return f.walking; }).map(function(f){ return f.feet; }), list = [];
+  if (here) walkers.push({x: viewer.x, y: viewer.y});
+  LAYOUT.items.forEach(function(item){ list.push({z: item.z, x: item.x, y: item.y, image: spriteImage(variantName(item.sprite, item.variant, floor)), board: item.sprite === "board"}); });
+  LAYOUT.doors.forEach(function(door){
+    var f = doorFrame(door, walkers); doorFrames[floor.key + "|" + door.id] = f;
+    list.push({z: door.kind === "side" ? door.y + 34 : LAYOUT.walls.middle.y + LAYOUT.walls.middle.h, x: door.x, y: door.y, image: spriteImage((door.kind === "side" ? "sideDoor" : "frontDoor") + f)});
+  });
+  figs.forEach(function(f){ list.push({z: f.z, x: f.x, y: f.y, image: personImage(f.actor.id, f.actor.kind, f.pose)}); });
+  if (here) list.push({z: viewer.y, x: viewer.x - 17, y: viewer.y - 49, image: personImage("viewer", "viewer", viewer.path.length ? walkPose(viewer) : viewer.dir + "0")});
+  list.sort(function(a, b){ return a.z - b.z; }).forEach(function(entry){ g.drawImage(entry.image, entry.x, entry.y); if (entry.board) drawNotes(floor, g); });
+  figs.forEach(function(f){
+    var icon = iconFor(floor, f.actor), shown = f.actor.staff && staffBubble(f.actor), left = shown ? shown.until - frame : Infinity;
+    if (!icon) return;
+    // Result bubbles fade over their last second, unless motion is reduced.
+    g.globalAlpha = reducedMotion || left >= 60 ? 1 : left / 60;
+    g.drawImage(spriteImage(icon), f.x + 11, f.y - 15 - (icon === "bubbleAlert" && !reducedMotion && (frame >> 4) % 2 ? 1 : 0));
+    g.globalAlpha = 1;
+  });
+  return figs;
+}
+
+// ---- overview: one section per repository, equal cards at one whole-number scale ----
+function roomRank(floor){
+  if (floor.questions.length || floor.actors.some(function(a){ return a.questionCount > 0; })) return 0;
+  return !floor.completedAt && floor.status !== "idle" && floor.status !== "complete" ? 1 : 2;
+}
+function overviewGroups(){
+  var groups = {};
+  visibleRooms().forEach(function(floor){ var repo = floor.repo || ""; (groups[repo] = groups[repo] || []).push(floor); });
+  return Object.keys(groups).sort().map(function(repo){
+    var rooms = groups[repo].map(function(floor, index){ return {floor: floor, index: index}; })
+      .sort(function(a, b){ return roomRank(a.floor) - roomRank(b.floor) || a.index - b.index; }).map(function(entry){ return entry.floor; });
+    return {repo: repo, rooms: rooms, questions: rooms.reduce(function(n, f){ return n + f.questions.length; }, 0)};
+  });
 }
-function drawBackdrop(cols, rows, room){
-  if (!room) setCanvasSize(cols * T, rows * T);
-  var width = canvas.width, height = canvas.height, unit = Math.max(1, Math.min(width / 576, height / 320)), wallHeight = Math.round(height * .18);
-  ctx.fillStyle = PALETTE[15]; ctx.fillRect(0, 0, width, wallHeight);
-  ctx.fillStyle = PALETTE[12]; ctx.fillRect(0, wallHeight, width, height - wallHeight);
-  var plankH = 12 * unit, plankW = 64 * unit;
-  for (var row = 0, y = wallHeight; y < height; row++, y += plankH) {
-    ctx.fillStyle = row % 3 === 0 ? PALETTE[7] : PALETTE[12]; ctx.fillRect(0, y, width, plankH - unit);
-    for (var x = -(row % 2) * plankW / 2; x < width; x += plankW) {
-      ctx.fillStyle = PALETTE[6]; ctx.fillRect(x, y, unit, plankH);
-      ctx.fillStyle = PALETTE[7]; ctx.fillRect(x + 8 * unit, y + 4 * unit, 24 * unit, unit);
+function orderedRooms(){ return overviewGroups().reduce(function(all, group){ return all.concat(group.rooms); }, []); }
+var CARD_GAP = 14, CARD_BORDER = 8;
+/** As many columns as fit at 1x or more; the leftover width is shared so the row reaches the right edge. */
+function overviewScale(){
+  var width = ((wrap && wrap.clientWidth) || window.innerWidth) - 32, columns = Math.max(1, Math.floor((width + CARD_GAP) / (ROOM_W + CARD_GAP)));
+  return Math.max(1, (width - (columns - 1) * CARD_GAP - columns * CARD_BORDER) / columns / ROOM_W);
+}
+function summaryFor(floor){
+  var criteria = floor.criteria || [], passed = criteria.filter(function(c){ return c.status === "PASS"; }).length;
+  return phaseLabel(floor.phase) + " · " + (criteria.length ? t("checks") + " " + passed + "/" + criteria.length : statusText(floor.status)) + (floor.questions.length ? " · ! " + floor.questions.length : "");
+}
+var PAGE_SIZE = 4;
+/** How far a folded card may stretch from the room's 9:5 to fill the page. */
+var MAX_STRETCH = 1.18;
+/**
+ * Folded list: rooms come in pages of up to four, each page one viewport tall
+ * in a scroller that snaps page by page. Each page takes the column count that
+ * gives its cards the most area (four rooms form a 2x2 grid, two split the page
+ * in halves, one fills it), and cards stretch to fill their cell while their
+ * shape stays within MAX_STRETCH of 9:5.
+ */
+function pageHeight(){ return Math.max(160, Math.floor((wrap && wrap.clientHeight) || window.innerHeight - 70)); }
+function pageLayout(count, inset){
+  var width = ((wrap && wrap.clientWidth) || window.innerWidth) - 32, height = pageHeight() - 16 - (inset || 0), best = {columns: 1, sx: 0.5, sy: 0.5};
+  for (var columns = 1; columns <= Math.max(1, count); columns++) {
+    var rows = Math.ceil(Math.max(1, count) / columns);
+    var sx = (width - (columns - 1) * CARD_GAP - columns * CARD_BORDER) / columns / ROOM_W, sy = (height - (rows - 1) * CARD_GAP - rows * CARD_BORDER) / rows / ROOM_H;
+    if (sx > sy * MAX_STRETCH) sx = sy * MAX_STRETCH; else if (sy > sx * MAX_STRETCH) sy = sx * MAX_STRETCH;
+    if (sx * sy > best.sx * best.sy) best = {columns: columns, sx: sx, sy: sy};
+  }
+  return best;
+}
+function pageCount(){ return Math.max(1, Math.ceil(orderedRooms().length / PAGE_SIZE)); }
+function pageInView(){ return Math.max(0, Math.min(pageCount() - 1, Math.round((overviewBox.scrollTop || 0) / pageHeight()))); }
+function pageRooms(page){ return orderedRooms().slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE); }
+function roomCard(floor, number, sx, sy){
+  var card = document.createElement("button"), view = makeCanvas();
+  card.type = "button"; card.className = "card"; card.setAttribute("data-key", floor.key); card.setAttribute("aria-label", t("enter") + ": " + floor.title);
+  view.style.width = Math.floor(ROOM_W * sx) + "px"; view.style.height = Math.floor(ROOM_H * (sy || sx)) + "px";
+  card.appendChild(view);
+  var caption = document.createElement("span"); caption.className = "card-caption";
+  caption.appendChild(panelText("span", "card-title", (number <= 9 ? number + ". " : "") + floor.title));
+  caption.appendChild(panelText("span", "card-meta", summaryFor(floor)));
+  card.appendChild(caption);
+  card.addEventListener("click", function(){ enterRoom(floor.key); });
+  roomCanvases[floor.key] = view;
+  return card;
+}
+/** Nobody at work: the office still shows one empty room. */
+var EMPTY_FLOOR = {key: "__empty", title: "", kind: "desk", actors: [], questions: [], criteria: [], phase: "unknown", status: "idle", completedAt: null, repo: null,
+  board: {passed: 0, total: 0, verify: "pending", review: "pending", pending: 0, status: "idle", taskId: "unassigned"}};
+function emptyCard(){
+  var layout = pageLayout(1, panelCollapsed ? 0 : 24), card = el("div", "card empty-room"), view = makeCanvas();
+  view.style.width = Math.floor(ROOM_W * layout.sx) + "px"; view.style.height = Math.floor(ROOM_H * layout.sy) + "px";
+  card.appendChild(view);
+  var caption = el("span", "card-caption"); caption.appendChild(el("span", "card-title", t("quiet"))); card.appendChild(caption);
+  roomCanvases[EMPTY_FLOOR.key] = view;
+  // The open overview pads itself; leave that room so a lone card never scrolls.
+  var sheet = el("section", "page"); sheet.style.height = (pageHeight() - (panelCollapsed ? 0 : 24)) + "px"; sheet.appendChild(card);
+  return sheet;
+}
+function drawCards(){ Object.keys(roomCanvases).forEach(function(key){ var floor = key === EMPTY_FLOOR.key ? EMPTY_FLOOR : roomByKey(key); if (floor) renderRoom(floor, roomCanvases[key].getContext("2d")); }); }
+function renderOverviewPages(){
+  var pages = pageCount(), height = pageHeight();
+  var signature = JSON.stringify(["pages", lang, height, (wrap && wrap.clientWidth) || window.innerWidth, orderedRooms().map(function(f){ return [f.key, f.title, f.status, f.phase, f.completedAt, f.questions.length, (f.criteria || []).map(function(c){ return c.status; })]; })]);
+  if (signature !== overviewSignature) {
+    overviewSignature = signature; overviewBox.textContent = ""; roomCanvases = {};
+    if (!orderedRooms().length) overviewBox.appendChild(emptyCard());
+    for (var page = 0; page < pages && orderedRooms().length; page++) {
+      var rooms = pageRooms(page), layout = pageLayout(rooms.length), sheet = document.createElement("section"), grid = document.createElement("div");
+      sheet.className = "page"; sheet.setAttribute("data-page", String(page + 1)); sheet.style.height = height + "px";
+      grid.className = "cards page-grid"; grid.style.gridTemplateColumns = "repeat(" + layout.columns + ", max-content)";
+      rooms.forEach(function(floor, index){ grid.appendChild(roomCard(floor, index + 1, layout.sx, layout.sy)); });
+      sheet.appendChild(grid); overviewBox.appendChild(sheet);
     }
   }
-  ctx.fillStyle = PALETTE[6]; ctx.fillRect(0, wallHeight - 3 * unit, width, 3 * unit);
-  ctx.fillStyle = 'rgba(43,36,31,.12)'; ctx.fillRect(0, wallHeight, width, 4 * unit);
-  ctx.fillStyle = PALETTE[9]; ctx.fillRect(0, height - 2 * unit, width, 2 * unit);
-}
-// Furniture stays square-pixeled while its placement follows the room size.
-function furniture(kind, x, y, unit){
-  ctx.save(); ctx.translate(Math.round(x), Math.round(y)); unit=Math.max(1,Math.round(unit));ctx.scale(unit, unit);
-  function r(x,y,w,h,c){ctx.fillStyle=PALETTE[c];ctx.fillRect(x,y,w,h);}
-  function monitor(x,y){r(x,y,22,16,9);r(x+1,y+1,20,13,0);r(x+3,y+3,16,9,5);for(var i=0;i<3;i++){r(x+4,y+4+i*2,4+i*3,1,i%2?14:3);}r(x+10,y+16,2,3,9);r(x+6,y+19,10,1,9);}
-  function cup(x,y){r(x,y,5,6,15);r(x+1,y,3,1,4);r(x+5,y+1,2,3,8);}
-  function drawer(x,y){r(x,y,17,19,9);r(x+1,y+1,15,7,8);r(x+1,y+10,15,7,8);r(x+6,y+3,5,1,15);r(x+6,y+12,5,1,15);}
-  if(kind==='desk'||kind==='bench'){
-    r(2,31,72,5,8);drawer(4,28);drawer(52,28);r(1,17,74,13,4);r(2,17,72,9,6);r(2,17,72,2,7);r(25,30,3,15,9);r(70,30,3,15,9);
-    monitor(8,0);monitor(34,1);r(15,23,23,3,9);for(var k=0;k<6;k++)r(17+k*3,24,2,1,15);cup(61,19);
-    r(43,20,11,5,15);r(45,21,7,1,8);r(45,23,6,1,8);r(66,7,6,9,9);r(67,8,4,6,3);
-    if(kind==='bench'){r(2,-4,72,3,9);for(var j=0;j<7;j++){r(5+j*9,-1,2,8,8);r(4+j*9,1,4,3,j%2?14:5);}r(59,0,10,16,9);r(61,2,6,5,3);r(61,9,6,4,5);}
-  } else if(kind==='table'){
-    r(6,0,47,12,1);r(8,1,43,9,2);r(2,12,63,30,4);r(3,12,61,26,6);r(3,12,61,2,7);r(7,42,3,12,9);r(55,42,3,12,9);
-    r(10,19,14,12,15);r(30,22,13,12,15);for(var l=0;l<4;l++){r(12,21+l*2,10,1,8);r(32,24+l*2,9,1,8);}cup(51,19);monitor(41,0);
-  } else if(kind==='window'){
-    r(0,0,52,28,8);r(2,2,48,23,5);r(4,4,44,19,3);r(4,4,44,13,5);r(8,6,15,2,15);r(30,9,10,2,15);r(3,24,48,4,6);r(24,2,3,23,15);r(2,2,48,2,15);r(2,12,48,2,15);
-    r(-2,-3,56,4,9);r(0,-2,52,2,7);r(-3,27,58,4,4);r(-2,27,56,2,6);r(36,20,7,7,4);r(35,17,9,5,2);r(39,14,4,6,1);
-  } else if(kind==='whiteboard'){
-    r(0,0,65,38,9);r(2,2,61,33,15);r(4,4,57,1,7);r(5,38,3,9,9);r(57,38,3,9,9);r(2,47,9,2,9);r(54,47,9,2,9);
-    for(var n=0;n<6;n++){var bx=7+n%3*18,by=9+Math.floor(n/3)*16;r(bx,by,12,9,n%2?3:14);r(bx+2,by+2,8,1,8);r(bx+2,by+5,6,1,8);if(n<5){r(bx+13,by+5,4,1,8);}}
-  } else if(kind==='shelf'){
-    r(0,0,28,58,4);r(2,2,24,54,9);for(var shelf=0;shelf<3;shelf++){r(2,17+shelf*18,24,2,6);for(var book=0;book<5;book++){r(4+book*4,4+shelf*18+(book%2)*2,3,12-(book%2)*2,[2,5,13,7,3][book]);r(5+book*4,6+shelf*18,1,6,15);}}
-    r(0,58,28,3,8);r(3,44,9,11,6);r(14,44,10,11,6);r(6,46,4,1,15);r(17,46,4,1,15);
-  } else if(kind==='plant'){
-    r(9,18,16,13,8);r(10,18,14,3,6);r(11,21,12,9,7);r(14,4,3,15,1);r(5,7,11,5,2);r(1,5,9,4,3);r(17,3,12,5,2);r(23,0,8,5,3);r(14,-3,5,10,2);r(6,-2,9,5,1);r(20,10,10,5,1);r(3,13,10,4,2);r(11,11,11,5,3);
-  } else if(kind==='chair'){
-    r(2,0,18,13,1);r(3,1,16,10,2);r(2,13,18,9,2);r(3,14,16,5,3);r(10,22,2,8,9);r(3,29,18,2,9);r(2,28,3,4,9);r(18,28,3,4,9);
-  } else if(kind==='door'){
-    r(0,0,24,46,8);r(2,2,20,42,4);r(4,4,16,38,6);r(5,5,14,13,7);r(5,22,14,18,7);r(15,21,3,2,14);r(5,28,14,8,1);r(8,31,8,2,15);r(13,29,2,6,15);
+  drawCards();
+}
+function renderOverview(){
+  overviewBox.className = panelCollapsed ? "paged" : "";
+  if (panelCollapsed) return renderOverviewPages();
+  var groups = overviewGroups(), size = overviewScale();
+  var signature = JSON.stringify([lang, size, groups.map(function(group){ return [group.repo, group.questions, group.rooms.map(function(f){ return [f.key, f.title, f.status, f.phase, f.completedAt, f.questions.length, (f.criteria || []).map(function(c){ return c.status; })]; })]; })]);
+  if (signature !== overviewSignature) {
+    overviewSignature = signature; overviewBox.textContent = ""; roomCanvases = {};
+    if (!groups.length) overviewBox.appendChild(emptyCard());
+    var number = 0;
+    groups.forEach(function(group){
+      var section = document.createElement("section"); section.className = "repo-section"; section.setAttribute("data-repo", group.repo);
+      var head = document.createElement("h2"); head.className = "repo-head";
+      head.appendChild(panelText("span", "repo-name", group.repo || t("overview")));
+      head.appendChild(panelText("span", "repo-alert", group.questions ? "! " + group.questions : ""));
+      section.appendChild(head);
+      var cards = document.createElement("div"); cards.className = "cards";
+      group.rooms.forEach(function(floor){ number++; cards.appendChild(roomCard(floor, number, size)); });
+      section.appendChild(cards); overviewBox.appendChild(section);
+    });
+  }
+  drawCards();
+}
+
+// ---- room view: the pixel-exact room layer stretched to fill the space, text in HTML over it ----
+/** The room view fills the space, stretching at most MAX_STRETCH from 9:5. */
+function roomScales(){
+  var width = ((wrap && wrap.clientWidth) || window.innerWidth) - 32, height = ((wrap && wrap.clientHeight) || window.innerHeight) - ((hud && hud.offsetHeight) || 44) - 40;
+  var sx = Math.max(0.5, width / ROOM_W), sy = Math.max(0.5, height / ROOM_H);
+  if (sx > sy * MAX_STRETCH) sx = sy * MAX_STRETCH; else if (sy > sx * MAX_STRETCH) sy = sx * MAX_STRETCH;
+  return {x: sx, y: sy};
+}
+function renderRoomView(){
+  var floor = activeRoom(); if (!floor) return;
+  var scales = roomScales(); scale = scales.x; scaleY = scales.y;
+  // The CSS box fills the space; the backing store follows the device pixels so nearest-neighbour stays sharp.
+  var cssW = Math.round(ROOM_W * scale), cssH = Math.round(ROOM_H * scaleY), dpr = Math.max(1, Math.min(3, window.devicePixelRatio || 1));
+  var backW = Math.round(cssW * dpr), backH = Math.round(cssH * dpr);
+  if (canvas.width !== backW) canvas.width = backW;
+  if (canvas.height !== backH) canvas.height = backH;
+  canvas.style.width = cssW + "px"; canvas.style.height = cssH + "px";
+  labels.style.width = canvas.style.width; labels.style.height = canvas.style.height;
+  if (!stageCanvas) stageCanvas = makeCanvas();
+  lastFigures = renderRoom(floor, stageCanvas.getContext("2d"));
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(stageCanvas, 0, 0, backW, backH);
+  renderHud(floor); renderLabels(floor, lastFigures);
+}
+function renderHud(floor){
+  var criteria = floor.criteria || [], passed = criteria.filter(function(c){ return c.status === "PASS"; }).length, questions = floor.questions.length;
+  var signature = JSON.stringify([lang, floor.key, floor.title, passed, criteria.length, floor.board.verify, floor.board.review, questions]);
+  if (signature === hudSignature) return;
+  hudSignature = signature; hud.textContent = "";
+  hud.appendChild(panelText("strong", "hud-title", floor.title));
+  var bar = document.createElement("span"), done = document.createElement("i");
+  bar.className = "hud-bar"; bar.setAttribute("role", "img"); bar.setAttribute("aria-label", t("checks") + " " + passed + "/" + criteria.length);
+  done.style.width = (criteria.length ? Math.round(passed * 100 / criteria.length) : 0) + "%"; bar.appendChild(done); hud.appendChild(bar);
+  hud.appendChild(panelText("span", "hud-count", passed + "/" + criteria.length));
+  var tone = function(value){ return value === "FAIL" ? " bad" : value === "PASS" ? " good" : ""; };
+  hud.appendChild(panelText("span", "badge" + tone(floor.board.verify), t("verify") + " " + outcomeText(floor.board.verify)));
+  hud.appendChild(panelText("span", "badge" + tone(floor.board.review), t("review") + " " + outcomeText(floor.board.review)));
+  if (questions) {
+    var ask = document.createElement("button"); ask.type = "button"; ask.className = "badge alert"; ask.textContent = "! " + questions + " " + t("pending");
+    ask.addEventListener("click", function(){ openQuestionList(floor); }); hud.appendChild(ask);
   }
-  ctx.restore();
-}
-function drawRoomBase(floor){
-  drawBackdrop(model.roomCols, model.roomRows, floor);
-  var metrics=roomMetrics(canvas.width,canvas.height),rx=metrics.rx,ry=metrics.ry,unit=metrics.unit,labelUnit = Math.min(U, Math.max(1, unit * 1.25));
-  var savedU = U; U = labelUnit;
-  // Sage rugs and oak furniture give each phase a real place in the room.
-  floor.phaseAreas.forEach(function(a){
-    var area=phaseAreaGeometry(a,canvas.width,canvas.height);
-    if(a.phase==='implementing'||a.phase==='reviewing'){
-      var x=area.x,y=area.y+area.ry,w=area.width,h=area.height-area.ry;
-      ctx.fillStyle=PALETTE[3];ctx.fillRect(x,y,w,h);ctx.strokeStyle=PALETTE[2];ctx.lineWidth=2*unit;ctx.strokeRect(x+3*unit,y+3*unit,w-6*unit,h-6*unit);
+}
+function label(key, className, text, x, y){
+  var node = labelNodes[key];
+  if (!node) { node = document.createElement("span"); labelNodes[key] = node; labels.appendChild(node); }
+  node.className = className; if (node.textContent !== text) node.textContent = text;
+  node.style.left = x * scale + "px"; node.style.top = y * scaleY + "px"; node.hidden = false;
+  return node;
+}
+function resetLabels(){ labels.textContent = ""; labelNodes = {}; hudSignature = ""; }
+function nearestActor(figs){
+  var best = null, distance = 30;
+  figs.forEach(function(f){ var d = Math.abs(f.feet.x - viewer.x) + Math.abs(f.feet.y - viewer.y); if (d < distance) { distance = d; best = f; } });
+  return best;
+}
+function renderLabels(floor, figs){
+  Object.keys(labelNodes).forEach(function(key){ labelNodes[key].hidden = true; });
+  LAYOUT.rooms.forEach(function(room){ label("zone:" + room.id, "zone-label", phaseLabel(room.id), room.x + 4, room.y + 2); });
+  var counts = placements(floor).counts;
+  LAYOUT.rooms.forEach(function(room){
+    var extra = (counts[room.id] || 0) - room.slots.length;
+    if (extra > 0) { var last = room.slots[room.slots.length - 1]; label("more:" + room.id, "overflow", "+" + extra, last.x + 30, last.y); }
+  });
+  figs.forEach(function(f){ label("name:" + f.actor.key, "nameplate" + (f.actor.questionCount ? " alert" : ""), shortName(f.actor.id, 14), f.x + 17, f.y + 50); });
+  label("name:viewer", "nameplate viewer", t("viewer"), viewer.x, viewer.y + 1);
+  var near = nearestActor(figs);
+  if (near) label("speech", "speech", shortName(near.actor.id, 14) + ": " + localizeText(near.actor.narration), near.x + 17, near.y - 6);
+}
+function render(){ if (!model) return; if (mode === "room") renderRoomView(); else renderOverview(); }
+function tick(){ frame++; if (!reducedMotion) advance(); render(); }
+function attentionFor(actor){
+  if(actor.questionCount)return t('waiting')+' ('+actor.questionCount+')';
+  if(actor.progress&&actor.progress.verify==='FAIL')return t('verifyFailed');
+  if(actor.progress&&actor.progress.review==='FAIL')return t('reviewFailed');
+  return actor.status==='blocked'?t('blockedUnknown'):'';
+}
+function completionText(floor,actor){
+  if(actor.status==='complete')return statusText(actor.status);
+  if(floor.completedAt)return t('sessionEnded');
+  if(actor.taskId==='unassigned'&&!actor.progress)return t('noTask');
+  return statusText(actor.status)+' · '+t('unfinished');
+}
+function renderWorkPanel(){
+  if(!model||!workList)return;
+  var rooms=mode==='room'&&activeRoom()?[activeRoom()]:visibleRooms();
+  var signature=JSON.stringify([lang,offline,mode,rooms.map(function(f){return [f.key,f.title,f.status,f.phase,f.completedAt,f.actors,f.questions,f.criteria];})]);
+  if(signature===workSignature)return;workSignature=signature;
+  if(mode==='room'&&activeRoom()){renderRoomPanel(activeRoom());return;}
+  var focusKey=document.activeElement&&document.activeElement.getAttribute?document.activeElement.getAttribute('data-work-key'):null,restoreFocus=null,entries=[];
+  rooms.forEach(function(floor){floor.actors.forEach(function(actor){entries.push({floor:floor,actor:actor,attention:attentionFor(actor)});});});
+  entries.sort(function(a,b){return Number(!!b.attention)-Number(!!a.attention);});
+  workHeading.textContent=t('workList')+' · '+entries.length;
+  workSummary.textContent=offline?t('stale'):t('attention')+' '+entries.filter(function(entry){return !!entry.attention;}).length+' · '+t('detailsAction');
+  workList.textContent='';
+  if(!entries.length){var empty=document.createElement('p');empty.textContent=t('quiet');workList.appendChild(empty);}
+  entries.forEach(function(entry){
+    var floor=entry.floor,actor=entry.actor,card=document.createElement('article'),button=document.createElement('button');
+    card.className='work-card'+(entry.attention?' attention':'');
+    button.type='button';button.className='work-name';button.textContent=actor.id+' ↗';button.title=t('detailsAction');
+    button.setAttribute('aria-label',actor.id+' · '+t('detailsAction'));button.setAttribute('data-work-key',actor.key+':details');
+    button.addEventListener('click',function(){openActorDetail(floor,actor);});card.appendChild(button);
+    if(focusKey===actor.key+':details')restoreFocus=button;
+    var meta=document.createElement('p');meta.className='work-meta';meta.textContent=(floor.repo?floor.repo+' · ':'')+roleText(actor.kind)+' · '+phaseLabel(actor.phase)+' · '+completionText(floor,actor);card.appendChild(meta);
+    var work=document.createElement('p');work.textContent=localizeText(actor.narration);card.appendChild(work);
+    var proof=document.createElement('p');proof.className='work-proof';proof.textContent=actor.taskId==='unassigned'&&!actor.progress?t('noTaskHint'):progressText(actor.progress);card.appendChild(proof);
+    if(entry.attention){var reason=document.createElement('p');reason.className='work-reason';reason.textContent='! '+entry.attention;card.appendChild(reason);}
+    if(actor.questionCount){
+      var question=document.createElement('p');question.textContent=floor.questions[0]?floor.questions[0].prompt:t('unknown');card.appendChild(question);
+      var answer=document.createElement('button');answer.type='button';answer.className='work-action';answer.textContent=t('openQuestion')+' →';answer.setAttribute('data-work-key',actor.key+':questions');answer.addEventListener('click',function(){openQuestionList(floor);});card.appendChild(answer);
+      if(focusKey===actor.key+':questions')restoreFocus=answer;
     }
+    workList.appendChild(card);
   });
-  floor.props.filter(function(p){return p.kind!=='rug'&&p.kind!=='clock';}).forEach(function(p){
-    var geometry=propGeometry(p,canvas.width,canvas.height),px=geometry.rawX,py=geometry.rawY,artUnit=geometry.rawScale;
-    if(p.kind!=='window'){ctx.fillStyle='rgba(43,36,31,.14)';ctx.fillRect(px+4*unit,py+28*unit,45*unit,6*unit);}
-    furniture(p.kind,px,py,artUnit);
-    if(p.kind==='shelf')for(var book=0;book<Math.min(5,floor.books.lit);book++){ctx.fillStyle=PALETTE[14];ctx.fillRect(px+(4+book*4)*Math.round(artUnit),py+4*Math.round(artUnit),3*Math.round(artUnit),2*Math.round(artUnit));}
-    if(p.kind==='desk')for(var paper=0;paper<Math.min(4,floor.papers[p.key]||0);paper++){ctx.fillStyle=PALETTE[15];ctx.fillRect(px+44*artUnit,py+(20-paper)*artUnit,9*artUnit,2*artUnit);}
+  if(focusKey&&statusBox.hidden)(restoreFocus||canvas).focus();
+}
+function criterionStatusText(status){return status==='PASS'?t('critPass'):status==='FAIL'?t('critFail'):status==='UNKNOWN'?t('critUnknown'):t('critPending');}
+function panelText(tag,className,text){var node=document.createElement(tag);if(className)node.className=className;node.textContent=text;return node;}
+// Room mode: the right column lists this room's acceptance criteria, questions and commands. Task text is data, so textContent only.
+function renderRoomPanel(floor){
+  var criteria=floor.criteria||[],passed=criteria.filter(function(c){return c.status==='PASS';}).length;
+  workHeading.textContent=t('checks')+' · '+passed+'/'+criteria.length;
+  workSummary.textContent=offline?t('stale'):floor.title;
+  workList.textContent='';
+  if(!criteria.length)workList.appendChild(panelText('p','',t('noCriteria')));
+  criteria.forEach(function(c){
+    var card=document.createElement('article');card.className='work-card criterion '+(c.status?c.status.toLowerCase():'pending');card.setAttribute('data-criterion',c.id);
+    card.appendChild(panelText('p','work-name',c.id+' · '+criterionStatusText(c.status)));
+    card.appendChild(panelText('p','',c.description));
+    var meta=[];if(c.status&&c.status!=='PASS'){if(c.failureClass)meta.push(c.failureClass);if(c.exitCode!==null&&c.exitCode!==undefined)meta.push('exit '+c.exitCode);}
+    if(c.finishedAt)meta.push(c.finishedAt.replace('T',' ').slice(0,16));
+    if(meta.length)card.appendChild(panelText('p','work-meta',meta.join(' · ')));
+    workList.appendChild(card);
   });
-  floor.phaseAreas.forEach(function(a){var area=phaseAreaGeometry(a,canvas.width,canvas.height),ax=area.x,ay=area.y;ctx.fillStyle=PALETTE[15];ctx.fillRect(ax,ay,Math.min(area.width,72*labelUnit),13*labelUnit);fillText(phaseLabel(a.phase),ax+4*labelUnit,ay+2*labelUnit,9,PALETTE[1]);});
-  var titleX=2*rx,titleY=ry,w=19*rx;
-  ctx.fillStyle=PALETTE[4];ctx.fillRect(titleX,titleY,w,4*ry);ctx.fillStyle=PALETTE[6];ctx.fillRect(titleX+2*unit,titleY+2*unit,w-4*unit,4*ry-4*unit);
-  fillText(short(floor.title,20),titleX+6*unit,titleY+6*unit,11);fillText(statusText(floor.status),titleX+6*unit,titleY+22*unit,8,PALETTE[4]);
-  var b=floor.board,board=progressBoardGeometry(canvas.width,canvas.height),bx=board.x,by=board.y,bw=board.width,bh=board.height;
-  ctx.fillStyle=PALETTE[9];ctx.fillRect(bx,by,bw,bh);ctx.fillStyle=PALETTE[15];ctx.fillRect(bx+2*unit,by+2*unit,bw-4*unit,bh-4*unit);
-  fillText('▣ '+t('clickWork'),bx+6*unit,by+5*unit,8,PALETTE[1]);
-  // A room without a task has nothing to verify or review; saying "pending" would claim unfinished work.
-  if(b.taskId==='unassigned'&&!b.total){fillText(t('noTask'),bx+6*unit,by+16*unit,10,PALETTE[1]);fillText(t('noTaskHint'),bx+6*unit,by+40*unit,8,PALETTE[4]);}
-  else{fillText(t('progress')+'  '+b.passed+'/'+(b.total||'?'),bx+6*unit,by+16*unit,10,PALETTE[1]);
-  ctx.fillStyle=PALETTE[3];ctx.fillRect(bx+6*unit,by+29*unit,bw-12*unit,5*unit);ctx.fillStyle=PALETTE[2];ctx.fillRect(bx+6*unit,by+29*unit,(bw-12*unit)*Math.min(1,b.total?b.passed/b.total:0),5*unit);
-  fillText(t('verify')+' '+outcomeText(b.verify)+'  '+t('review')+' '+outcomeText(b.review),bx+6*unit,by+40*unit,8,PALETTE[4]);}
-  var pendingRow=pendingBoardGeometry(canvas.width,canvas.height);
-  if(b.pending)fillText('! '+t('pending')+' '+b.pending,pendingRow.x+2*unit,pendingRow.y+3*unit,8,PALETTE[13]);
-  var oldS=S;S=Math.max(1,Math.round(unit));var cx=52*rx,cy=ry;draw('clock',cx,cy);
-  ctx.strokeStyle=PALETTE[13];ctx.lineWidth=2*S;ctx.beginPath();ctx.moveTo(cx+8*S,cy+7*S);var angle=-Math.PI/2+2*Math.PI*floor.clock;ctx.lineTo(cx+8*S+Math.cos(angle)*5*S,cy+7*S+Math.sin(angle)*5*S);ctx.stroke();S=oldS;
-  U=savedU;
-  ctx.strokeStyle=PALETTE[9];ctx.lineWidth=3*unit;ctx.strokeRect(unit,unit,canvas.width-2*unit,canvas.height-2*unit);
-}
-function drawActor(floor, actor, surface){
-  var tx=actor.x*T,ty=actor.y*T,pos=positions[actor.key]||{x:tx,y:ty};
-  advanceAvatar(pos,tx,ty,T/5);positions[actor.key]=pos;
-  surface=surface||{x:0,y:0,width:canvas.width,height:canvas.height};
-  var box=actorBox(actor,surface),oldS=S,oldU=U;S=box.scale;U=box.unit;
-  var px=box.x,py=box.y;
-  drawAvatar(actor.id,pos,px,py,S,false);
-  if(!pos.walking&&!reducedMotion&&Math.floor(frame/30)%2===0){ctx.fillStyle=PALETTE[15];ctx.fillRect(px+12*S,py+30*S,8*S,4*S);}
-  var text=short(actor.label,10)+' · '+roleText(actor.kind)+' · '+short(statusText(actor.status),8),font=9*U;
-  ctx.font='bold '+font+'px monospace';var labelWidth=Math.min(surface.width-8*U,(ctx.measureText?ctx.measureText(text).width:text.length*font*.62)+8*U),labelX=Math.max(surface.x+4*U,Math.min(surface.x+surface.width-labelWidth-4*U,px-3*U)),labelY=Math.min(surface.y+surface.height-16*U,py+49*S);
-  ctx.fillStyle=PALETTE[15];ctx.fillRect(labelX,labelY,labelWidth,14*U);ctx.strokeStyle=PALETTE[8];ctx.lineWidth=U;ctx.strokeRect(labelX,labelY,labelWidth,14*U);fillText(text,labelX+3*U,labelY+2*U,9,actor.alert?PALETTE[13]:PALETTE[0]);
-  var alert=alertGeometry(actor,surface);
-  if(actor.alert)draw('alert',alert.x,alert.y);
-  S=oldS;U=oldU;
-}
-function actorBox(actor,surface){
-  var pos=positions[actor.key]||{x:actor.x*T,y:actor.y*T},scale=avatarScale(surface),unit=Math.max(dpr,Math.min(U,scale));
-  return {scale:scale,unit:unit,x:Math.round(Math.max(surface.x,Math.min(surface.x+surface.width-32*scale,surface.x+pos.x/(model.roomCols*T)*surface.width))),y:Math.round(Math.max(surface.y,Math.min(surface.y+surface.height-48*scale-16*unit,surface.y+pos.y/(model.roomRows*T)*surface.height)))};
-}
-function alertGeometry(actor,surface){var box=actorBox(actor,surface);return {x:box.x+14*box.scale,y:box.y-9*box.scale,width:4*box.scale,height:8*box.scale,scale:box.scale};}
-function fitCanvas(){
-  var wrapW = wrap && wrap.clientWidth ? wrap.clientWidth : window.innerWidth;
-  var wrapH = wrap && wrap.clientHeight ? wrap.clientHeight : window.innerHeight - 54;
-  var reserved = (dialogueBox && dialogueBox.offsetHeight || 36) + (roomNav && roomNav.offsetHeight || 30) + 24;
-  var maxW = Math.max(220, wrapW - 18), maxH = Math.max(160, wrapH - reserved);
-  var ratio = Math.min(maxW / canvas.width, maxH / canvas.height);
-  canvas.style.width = Math.max(1, Math.floor(canvas.width * ratio)) + "px"; canvas.style.height = Math.max(1, Math.floor(canvas.height * ratio)) + "px";
-}
-function chooseRenderScale(){
-  if(!model)return;
-  var wrapW=wrap&&wrap.clientWidth?wrap.clientWidth:window.innerWidth,wrapH=wrap&&wrap.clientHeight?wrap.clientHeight:window.innerHeight-54;
-  var reserved=(dialogueBox&&dialogueBox.offsetHeight||36)+(roomNav&&roomNav.offsetHeight||30)+24;
-  var maxW=Math.max(220,wrapW-18),maxH=Math.max(160,wrapH-reserved),nextDpr=Math.max(1,Math.min(3,window.devicePixelRatio||1)),oldT=T;
-  model.cols=model.rows*maxW/maxH;
-  T=Math.max(4,maxH/model.rows*nextDpr);S=T/4;U=T/8;dpr=nextDpr;
-  if(oldT!==T){Object.keys(positions).forEach(function(key){positions[key].x*=T/oldT;positions[key].y*=T/oldT;});roomCanvases={};}
-}
-function overviewLayout(rooms){
-  var count=rooms.length,gap=.6,result=[];if(!count)return result;
-  if(count===1)return [{x:gap,y:gap,width:model.cols-6-gap,height:model.rows-gap*2}];
-  var hallW=6,left=(model.cols-hallW)/2,right=left,teamIndex=rooms.findIndex(function(f){return f.kind==='run';});
-  if(teamIndex>=0&&count<=6){
-    left=(model.cols-hallW)*.58;right=model.cols-hallW-left;
-    result[teamIndex]={x:gap,y:gap,width:left-gap,height:model.rows-gap*2};
-    var others=rooms.filter(function(_,i){return i!==teamIndex;}),height=(model.rows-gap*(others.length+1))/Math.max(1,others.length);
-    others.forEach(function(f,i){result[rooms.indexOf(f)]={x:left+hallW,y:gap+i*(height+gap),width:right-gap,height:height};});
-    return result;
+  if(floor.questions.length){
+    workList.appendChild(panelText('h3','work-section',t('questions')+' · '+floor.questions.length));
+    floor.questions.forEach(function(question){
+      var card=document.createElement('article');card.className='work-card attention';card.appendChild(panelText('p','',question.prompt));
+      var answer=document.createElement('button');answer.type='button';answer.className='work-action';answer.textContent=t('openQuestion')+' →';answer.addEventListener('click',function(){openQuestionList(floor);});card.appendChild(answer);
+      workList.appendChild(card);
+    });
+  }
+  var source=sourceFor(floor);
+  if(source&&source.commands&&source.commands.length){
+    workList.appendChild(panelText('h3','work-section',t('commands')));
+    source.commands.forEach(function(command){workList.appendChild(panelText('code','work-command',command));});
   }
-  var leftCount=Math.ceil(count/2),rightCount=Math.floor(count/2);
-  rooms.forEach(function(f,i){var side=i%2,n=side?rightCount:leftCount,row=Math.floor(i/2),height=(model.rows-gap*(n+1))/n;result[i]={x:side?left+hallW:gap,y:gap+row*(height+gap),width:(side?right:left)-gap,height:height};});
-  return result;
-}
-function roomBox(floor){var rooms=visibleRooms(),index=rooms.indexOf(floor);return overviewLayout(rooms)[index]||floor.overview;}
-function hallwayBounds(){
-  var rooms=visibleRooms(),layout=overviewLayout(rooms),left=layout.find(function(box){return box.x<model.cols/2-3;});
-  return {x:left?left.x+left.width:model.cols/2-3,width:6,y:.6,height:model.rows-1.2};
-}
-function ensureSupervisor(){
-  if (supervisorReady || !model) return;
-  var hall = hallwayBounds(); supervisor.x = supervisor.targetX = hall.x + hall.width / 2; supervisor.y = supervisor.targetY = model.rows - 5; supervisorReady = true;
-}
-function roomEntrances(){
-  var hall=hallwayBounds();return visibleRooms().map(function(floor){var box=roomBox(floor),left=box.x<hall.x;return {floor:floor,x:left?hall.x+.35:hall.x+hall.width-.35,y:box.y+box.height/2,height:box.height};});
-}
-function supervisorBounds(){var hall=hallwayBounds();return {minX:hall.x+.2,maxX:hall.x+hall.width-.2,minY:1,maxY:model.rows-3};}
-function drawHallway(){
-  var hall = hallwayBounds(), x = hall.x * T, y = hall.y * T, w = hall.width * T, h = hall.height * T;
-  ctx.fillStyle = "rgba(183,199,163,.55)"; ctx.fillRect(x, y, w, h);
-  ctx.strokeStyle = PALETTE[3]; ctx.lineWidth = Math.max(1, 2 * U); ctx.strokeRect(x, y, w, h);
-  for (var line = y + 14 * U; line < y + h; line += 28 * U) { ctx.strokeStyle = "rgba(138,80,51,.28)"; ctx.beginPath(); ctx.moveTo(x + 3 * U, line); ctx.lineTo(x + w - 3 * U, line); ctx.stroke(); }
-  var oldS=S;S=T/8;draw('plant',x+T,y+T,PALETTE[2]);draw('plant',x+T,y+h-4*T,PALETTE[2]);S=oldS;
-  roomEntrances().forEach(function(entry){ var ex = entry.x * T, ey = entry.y * T; ctx.fillStyle = PALETTE[6]; ctx.fillRect(ex - 5 * U, ey - 14 * U, 10 * U, 28 * U); ctx.strokeStyle = PALETTE[4]; ctx.strokeRect(ex - 5 * U, ey - 14 * U, 10 * U, 28 * U); });
-}
-function drawSupervisor(){
-  ensureSupervisor(); if (!model) return;
-  advanceAvatar(supervisor,supervisor.targetX,supervisor.targetY,.7);
-  var moving=supervisor.walking,scale=Math.max(1,...visibleRooms().map(function(floor){var b=roomBox(floor);return avatarScale({width:b.width*T,height:b.height*T});}));
-  var px=supervisor.x*T-16*scale,py=Math.min(canvas.height-48*scale,supervisor.y*T);drawAvatar('viewer',supervisor,px,py,scale,true);
-  drawViewerBadge(supervisor.x*T,py,7);
-  var entry=roomEntrances().sort(function(a,b){return Math.hypot(a.x-supervisor.x,a.y-supervisor.y)-Math.hypot(b.x-supervisor.x,b.y-supervisor.y);})[0]; if(entry&&(Math.abs(entry.x-supervisor.x)>1.25||Math.abs(entry.y-supervisor.y)>Math.min(1.6,entry.height*.35)))entry=null;
-  if (!moving && mode === "overview" && entry) { selectedKey = entry.floor.key; hallwayReturn = {x:supervisor.x, y:supervisor.y}; enterRoomFromHallway(entry.floor); }
-}
-function enterRoomFromHallway(floor){
-  if (!floor) return;
-  detailTarget=null;detailPage=0;
-  roomSupervisor.x = roomSupervisor.targetX = floor.kind === "run" ? model.roomCols - 7 : 6;
-  roomSupervisor.y = roomSupervisor.targetY = Math.max(8, Math.min(model.roomRows - 6, Math.round(model.roomRows / 2)));
-  mode = "room"; lineIndex = 0; typed = 0; updateHeader(); canvas.focus();
-}
-function drawRoomSupervisor(){
-  if (!model) return;
-  advanceAvatar(roomSupervisor,roomSupervisor.targetX,roomSupervisor.targetY,.7);
-  var scale=avatarScale({width:canvas.width,height:canvas.height});
-  var px=roomSupervisor.x/model.roomCols*canvas.width-16*scale,py=Math.min(canvas.height-48*scale,roomSupervisor.y/model.roomRows*canvas.height);drawAvatar('viewer',roomSupervisor,px,py,scale,true);
-  drawViewerBadge(px+16*scale,py,8);
-}
-function drawViewerBadge(center,top,size){
-  var text=t("viewer"),font=Math.max(5,Math.round(size*U)),pad=Math.max(2,3*U);ctx.font="bold "+font+"px monospace";
-  var width=ctx.measureText(text).width+pad*2,height=Math.max(13*U,font+pad*2),x=Math.max(pad,Math.min(canvas.width-width-pad,center-width/2)),y=Math.max(pad,top-height-3*U);
-  ctx.fillStyle=PALETTE[15];ctx.fillRect(x,y,width,height);ctx.strokeStyle=PALETTE[1];ctx.strokeRect(x,y,width,height);fillText(text,x+pad,y+pad,size,PALETTE[1]);
-}
-function moveSupervisor(dx, dy){
-  if (!model || !statusBox.hidden) return;
-  var state=mode==='room'?roomSupervisor:supervisor;state.direction=dx?(dx<0?'left':'right'):(dy<0?'up':'down');
-  var step = mode === "room" ? 1 : Math.min(1.25,(model.rows-2)/Math.max(1,Math.ceil(visibleRooms().length/2))/3);
-  if (mode === "room") { roomSupervisor.targetX = Math.max(2, Math.min(model.roomCols - 5, roomSupervisor.targetX + dx * step)); roomSupervisor.targetY = Math.max(7, Math.min(model.roomRows - 7, roomSupervisor.targetY + dy * step)); if (reducedMotion) { roomSupervisor.x = roomSupervisor.targetX; roomSupervisor.y = roomSupervisor.targetY; } render(); return; }
-  ensureSupervisor(); var bounds = supervisorBounds(); supervisor.targetX = Math.max(bounds.minX, Math.min(bounds.maxX, supervisor.targetX + dx * step)); supervisor.targetY = Math.max(bounds.minY, Math.min(bounds.maxY, supervisor.targetY + dy * step)); if (reducedMotion) { supervisor.x = supervisor.targetX; supervisor.y = supervisor.targetY; } render();
-}
-function renderRoomImage(floor, width, height){
-  width=Math.round(width);height=Math.round(height);
-  var signature=lang+'|'+T+'|'+width+'x'+height+'|'+JSON.stringify([floor.title,floor.status,floor.board,floor.props,floor.papers,floor.books,floor.clock]);
-  var cached=roomCanvases[floor.key];if(cached&&cached.signature===signature)return cached.canvas;
-  var roomCanvas=cached?cached.canvas:document.createElement('canvas');
-  if(typeof roomCanvas.getContext!=='function')return null;
-  roomCanvas.width=width;roomCanvas.height=height;var roomCtx=roomCanvas.getContext('2d');if(!roomCtx)return null;
-  var oldCanvas=canvas,oldCtx=ctx;canvas=roomCanvas;ctx=roomCtx;ctx.imageSmoothingEnabled=false;drawRoomBase(floor);canvas=oldCanvas;ctx=oldCtx;
-  roomCanvases[floor.key]={canvas:roomCanvas,signature:signature};return roomCanvas;
-}
-function drawOverviewRoom(floor){
-  var surface=surfaceForFloor(floor);
-  ctx.save();ctx.beginPath();ctx.rect(surface.x,surface.y,surface.width,surface.height);ctx.clip();
-  var image=renderRoomImage(floor,surface.width,surface.height);if(image)ctx.drawImage(image,surface.x,surface.y);
-  floor.actors.forEach(function(actor){drawActor(floor,actor,surface);});
-  if(floor.completedAt){ctx.fillStyle='rgba(53,90,75,.18)';ctx.fillRect(surface.x,surface.y,surface.width,surface.height);}
-  if(floor.repo){var plate=short(floor.repo,16),plateWidth=(plate.length*6+8)*U;ctx.fillStyle=repoColor(floor.repo);ctx.fillRect(surface.x+2*U,surface.y+2*U,plateWidth,13*U);ctx.strokeStyle=PALETTE[0];ctx.lineWidth=U;ctx.strokeRect(surface.x+2*U,surface.y+2*U,plateWidth,13*U);fillText(plate,surface.x+6*U,surface.y+4*U,8,PALETTE[15]);}
-  ctx.restore();
-}
-function render(){
-  if(!model)return;chooseRenderScale();var floor=activeRoom();
-  if(mode==='room'&&floor){
-    setCanvasSize(model.cols*T,model.rows*T);var image=renderRoomImage(floor,canvas.width,canvas.height);if(image)ctx.drawImage(image,0,0);else drawRoomBase(floor);
-    floor.actors.forEach(function(actor){drawActor(floor,actor);});drawRoomSupervisor();
-  }else{drawBackdrop(model.cols,model.rows,null);drawHallway();visibleRooms().forEach(drawOverviewRoom);drawSupervisor();if(!visibleRooms().length)fillText(t('quiet'),4*T,18*T,12);}
-  fitCanvas();
-}
-function renderRoomNav(rooms){
-  NAV_PAGE_SIZE=Math.max(1,Math.min(8,Math.floor((window.innerWidth-160)/120)));
-  if (mode !== "overview") { if (navSignature !== lang + "|room") { roomNav.textContent = ""; navSignature = lang + "|room"; } return; }
-  var pages = Math.max(1, Math.ceil(rooms.length / NAV_PAGE_SIZE));
-  navPage = Math.max(0, Math.min(navPage, pages - 1));
-  var signature = lang + "|overview|" + (showRecent ? "recent" : "active") + "|" + selectedKey + "|" + navPage + "|" + rooms.map(function(f){ return f.key; }).join(",");
-  if (signature === navSignature) return;
-  navSignature = signature; roomNav.textContent = "";
-  if (pages > 1) { var previous = document.createElement("button"); previous.type = "button"; previous.textContent = "‹ " + t("previous"); previous.disabled = navPage === 0; previous.addEventListener("click", function(){ navPage--; updateHeader(); }); roomNav.appendChild(previous); }
-  rooms.slice(navPage * NAV_PAGE_SIZE, navPage * NAV_PAGE_SIZE + NAV_PAGE_SIZE).forEach(function(floor, offset){ var button = document.createElement("button"); button.type = "button"; button.textContent = (navPage * NAV_PAGE_SIZE + offset + 1) + ". " + short(floor.title, 18); button.title = t("enter") + ": " + floor.title; button.setAttribute("aria-current", floor.key === selectedKey ? "true" : "false"); button.addEventListener("click", function(){ selectedKey = floor.key; enterRoom(); }); roomNav.appendChild(button); });
-  if (pages > 1) { var next = document.createElement("button"); next.type = "button"; next.textContent = t("next") + " ›"; next.disabled = navPage === pages - 1; next.addEventListener("click", function(){ navPage++; updateHeader(); }); roomNav.appendChild(next); }
 }
 function updateHeader(){
   if(document.documentElement)document.documentElement.lang=lang==='zh'?'zh-Hant':'en';
-  canvas.setAttribute('aria-label',(lang==='zh'?'方向鍵或 WASD 移動 Supervisor；Enter 進入房間或查看細節；Esc 返回。':'Arrow keys or WASD move Supervisor; Enter opens rooms or details; Escape returns.')+' '+t('keyboardWork')+'；'+t('keyboardPhase')+'；'+t('keyboardQuestions'));
+  canvas.setAttribute('aria-label',t('moveHint')+' '+t('keyboardWork')+'；'+t('keyboardQuestions'));
   renderRepoFilter();
-  var rooms = visibleRooms(), people = rooms.reduce(function(n, f){ return n + f.actors.length; }, 0);
-  crumb.textContent = mode === "room" && activeRoom() ? activeRoom().title : t("overview") + " · " + rooms.length + " " + t("rooms") + " · " + people + " " + t("people");
+  var rooms = visibleRooms(), count = rooms.reduce(function(n, f){ return n + f.actors.length; }, 0);
+  crumb.textContent = mode === "room" && activeRoom() ? activeRoom().title : t("overview") + " · " + rooms.length + " " + t("rooms") + " · " + count + " " + t("people");
   backButton.hidden = mode !== "room"; backButton.textContent = "← " + t("back"); recentButton.textContent = (showRecent ? "✓ " + t("recentOn") : "▣ " + t("recent")) + (hasRecent() ? " (" + model.floors.filter(function(f){ return !!f.completedAt; }).length + ")" : "");
   languageButton.textContent = lang === "zh" ? "繁中 / EN" : "EN / 繁中"; live.textContent = offline ? t("offline") : t("connected");
-  renderRoomNav(rooms);
-}
-function tickDialogue(){
-  if (!model) return;
-  var floors = mode === "room" && activeRoom() ? [activeRoom()] : visibleRooms(), lines = [];
-  floors.forEach(function(floor){ floor.actors.forEach(function(actor){ lines.push(floor.title + ": " + actor.label + " · " + localizeText(actor.narration)); }); if (floor.questions.length) lines.push(floor.title + ": " + t("waiting")); });
-  if (!lines.length) lines = [t("quiet")];
-  var line = offline ? t("offline") : localizeText(lines[lineIndex % Math.max(1, lines.length)]);
-  typed = Math.min(line.length, typed + 2); dialogueBox.textContent = line.slice(0, typed);
-  if (typed === line.length && frame % 180 === 0) { lineIndex++; typed = 0; }
-}
-function enterRoom(){ if (!selectedKey && visibleRooms()[0]) selectedKey = visibleRooms()[0].key; var floor = activeRoom(); if (!floor) return; enterRoomFromHallway(floor); render(); }
-function goOverview(){ mode = "overview"; var hall = hallwayBounds(); supervisor.x = supervisor.targetX = hall.x + hall.width / 2; supervisor.y = supervisor.targetY = hall.y + hall.height - 5; hallwayReturn = null; updateHeader(); render(); canvas.focus(); }
-function changeLanguage(){ lang = lang === "zh" ? "en" : "zh"; saveLanguage(); updateHeader(); render(); }
+  overviewBox.hidden = mode !== "overview"; roomView.hidden = mode !== "room";
+  workspace.className = panelCollapsed ? "collapsed" : ""; panelToggle.textContent = panelCollapsed ? t("showList") : t("hideList"); panelToggle.setAttribute("aria-expanded", panelCollapsed ? "false" : "true");
+  renderWorkPanel();
+}
+function enterRoom(key){
+  if (key) selectedKey = key;
+  if (!selectedKey && visibleRooms()[0]) selectedKey = visibleRooms()[0].key;
+  if (!activeRoom()) return;
+  mode = "room"; viewer = spawnViewer(); resetLabels(); workSignature = "";
+  updateHeader(); render(); canvas.focus();
+}
+function goOverview(){ mode = "overview"; resetLabels(); overviewSignature = ""; workSignature = ""; updateHeader(); render(); if (overviewBox.focus) overviewBox.focus(); }
+function changeLanguage(){ lang = lang === "zh" ? "en" : "zh"; saveLanguage(); hudSignature = ""; updateHeader(); render(); }
 function showDialog(title, fill){
   if (statusBox.hidden) detailPreviousFocus = document.activeElement || canvas;
+  statusBox.className = "";
   statusBox.textContent = ""; var heading = document.createElement("h2"); heading.id = "status-title"; heading.textContent = title; statusBox.appendChild(heading);
   var body = document.createElement("div"); body.className = "dialog-body"; statusBox.appendChild(body); fill(body);
   var actions = document.createElement("div"); actions.className = "actions";
@@ -663,12 +676,14 @@ function showDialog(title, fill){
   if (app) { app.inert = true; app.setAttribute("aria-hidden", "true"); }
   close.focus();
 }
-function closeDialog(){ statusBox.hidden = true; if (app) { app.inert = false; app.removeAttribute("aria-hidden"); } var previous = detailPreviousFocus || canvas; if (!previous || previous.isConnected === false || !previous.focus) previous = canvas; dialogClose = null; detailPreviousFocus = null; if (previous && previous.focus) previous.focus(); }
+function closeDialog(){ statusBox.hidden = true; if (app) { app.inert = false; app.removeAttribute("aria-hidden"); } var previous = detailPreviousFocus || canvas; if(previous.isConnected===false&&workList&&previous.getAttribute){var key=previous.getAttribute('data-work-key');previous=Array.prototype.slice.call(workList.querySelectorAll('button')).find(function(button){return button.getAttribute('data-work-key')===key;})||canvas;} if (!previous || previous.isConnected === false || !previous.focus) previous = canvas; dialogClose = null; detailPreviousFocus = null; if (previous && previous.focus) previous.focus(); }
 function addLine(box, label, value){ var p = document.createElement("p"); p.textContent = label + ": " + safeText(value); box.appendChild(p); }
 function addCommand(box, value, copyValue){
   var row = document.createElement("p"), code = document.createElement("code"), button = document.createElement("button");
   code.textContent = value; button.type = "button"; button.textContent = t("copy"); button.addEventListener("click", function(){
-    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(copyValue || value).then(function(){ button.textContent = t("copied"); }, function(){});
+    function failed(){button.textContent=t('copyFailed');button.title=t('copyHint');button.setAttribute('aria-label',t('copyHint'));}
+    if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(copyValue || value).then(function(){ button.textContent = t("copied");button.removeAttribute('aria-label'); }, failed);
+    else failed();
   }); row.appendChild(code); row.appendChild(button); box.appendChild(row);
 }
 function pageItems(items, box, renderItem){
@@ -682,7 +697,7 @@ function pageItems(items, box, renderItem){
 }
 function sourceFor(floor){
   if (!snapshot) return null;
-  if (floor.kind === "run") return snapshot.runs.find(function(r){ return r.runId === floor.key; }) || null;
+  if (floor.kind === "run") return floor.sourceIndex === null ? null : snapshot.runs[floor.sourceIndex] || null;
   if (floor.kind === "desk") return floor.sourceIndex === null ? null : snapshot.lobby[floor.sourceIndex] || null;
   if (floor.kind === "review") return floor.sourceIndex === null ? null : snapshot.reviews[floor.sourceIndex] || null;
   return null;
@@ -694,8 +709,8 @@ function renderDetailItem(item, box){
   if (item.kind === "heading") { var heading = document.createElement("p"); heading.textContent = item.value; box.appendChild(heading); return; }
   addLine(box, item.label, item.value);
 }
-function progressText(progress){return progress ? progress.passed+'/'+(progress.total||'?')+' · '+t('verify')+' '+outcomeText(progress.verify||'pending')+' · '+t('review')+' '+outcomeText(progress.review||'pending') : t('unknown');}
-function workItemForActor(floor,actor){return {kind:'work',floorKey:floor.key,actorKey:actor.key,label:t('owner')+': '+actor.label+' · '+roleText(actor.kind),value:t('currentWork')+': '+localizeText(actor.narration)+' · '+t('phase')+': '+phaseLabel(actor.phase)+' · '+t('status')+': '+statusText(actor.status)+' · '+t('progress')+': '+progressText(actor.progress)+' · '+t('pending')+': '+actor.questionCount};}
+function progressText(progress){return progress ? t('checks')+' '+progress.passed+'/'+(progress.total||'?')+' · '+t('verify')+' '+outcomeText(progress.verify||'pending')+' · '+t('review')+' '+outcomeText(progress.review||'pending') : t('checks')+' '+t('unknown');}
+function workItemForActor(floor,actor){return {kind:'work',floorKey:floor.key,actorKey:actor.key,label:t('owner')+': '+actor.id+' · '+roleText(actor.kind),value:t('currentWork')+': '+localizeText(actor.narration)+' · '+t('phase')+': '+phaseLabel(actor.phase)+' · '+t('status')+': '+completionText(floor,actor)+' · '+progressText(actor.progress)+' · '+t('pending')+': '+actor.questionCount};}
 function workItemsFor(floor){
   var items=[
     {kind:'line',label:t('task'),value:floor.board.taskId==='unassigned'?t('unassigned'):floor.board.taskId},
@@ -747,6 +762,7 @@ function openQuestionList(floor){
   showDialog(floor.title+' · '+t('questions'),function(box){pageItems(questionItemsFor(floor),box,renderDetailItem);});
 }
 function openActorDetail(floor, actor){
+  if (actor.panel) return openPanel(actor.panel, floor);
   var source = sourceFor(floor), items = [], entries = [];
   if (source && actor.kind !== "reviewer" && floor.kind === "run") { var found = source.agents.find(function(a){ return a.id === actor.id; }); if (found && found.diff) items = found.diff.paths || []; }
   if (source && floor.kind === "desk" && source.diff) items = source.diff.paths || [];
@@ -755,15 +771,15 @@ function openActorDetail(floor, actor){
   if (!detailTarget || detailTarget.floorKey !== floor.key || detailTarget.actorKey !== actor.key) detailPage = 0;
   var detailItems = [
     {kind:"line", label:lang==='zh'?'職責':'Role', value:roleText(actor.kind)},
-    {kind:"line", label:t("status"), value:statusText(actor.status)}, {kind:"line", label:t("phase"), value:phaseLabel(actor.phase)},
+    {kind:"line", label:t("status"), value:completionText(floor,actor)}, {kind:"line", label:t("phase"), value:phaseLabel(actor.phase)},
     {kind:"line", label:t("task"), value:actor.taskId === "unassigned" ? t("unassigned") : actor.taskId},
     {kind:"line", label:t("host"), value:localizeText(actor.host)}, {kind:"line", label:t("now"), value:localizeText(actor.narration)}
   ];
   if (actor.questionCount) detailItems.push({kind:"line", label:t("pending"), value:String(actor.questionCount)});
-  if (actor.progress) detailItems.push({kind:"line", label:t("progress"), value:actor.progress.passed + "/" + actor.progress.total + "  " + t("verify") + " " + outcomeText(actor.progress.verify || "-") + "  " + t("review") + " " + outcomeText(actor.progress.review || "-")});
+  if (actor.progress) detailItems.push({kind:"line", label:t("checks"), value:progressText(actor.progress)});
   if (actor.questionCount && floor.questions.length) floor.questions.forEach(function(question){ detailItems.push({kind:"line", label:"! " + question.questionId, value:question.prompt}); });
   if (entries.length) { detailItems.push({kind:"heading", value:t("files") + " / " + t("commands") + ":"}); entries.forEach(function(entry){ detailItems.push(entry); }); }
-  detailSignature=sourceSignature(floor); detailTarget = {floorKey: floor.key, actorKey: actor.key, view:'actor'}; showDialog(actor.label, function(box){ pageItems(detailItems, box, renderDetailItem); });
+  detailSignature=sourceSignature(floor); detailTarget = {floorKey: floor.key, actorKey: actor.key, view:'actor'}; showDialog(actor.id, function(box){ pageItems(detailItems, box, renderDetailItem); });
 }
 function openRoomDetail(floor){
   if (!detailTarget || detailTarget.floorKey !== floor.key || detailTarget.actorKey !== null) detailPage = 0;
@@ -773,7 +789,7 @@ function openRoomDetail(floor){
   var detailItems = [
     {kind:"line", label:t("status"), value:statusText(floor.status)}, {kind:"line", label:t("phase"), value:phaseLabel(floor.phase)},
     {kind:"line", label:t("task"), value:floor.board.taskId === "unassigned" ? t("unassigned") : floor.board.taskId},
-    {kind:"line", label:t("progress"), value:floor.board.passed + "/" + (floor.board.total || "?")},
+    {kind:"line", label:t("checks"), value:floor.board.passed + "/" + (floor.board.total || "?")},
     {kind:"line", label:t("verify"), value:outcomeText(floor.board.verify)}, {kind:"line", label:t("review"), value:outcomeText(floor.board.review)},
     {kind:"line", label:t("pending"), value:String(floor.board.pending)}
   ];
@@ -786,83 +802,172 @@ function openSelectedDetail(){
   if (target && target.view === 'work') return openWorkList(floor);
   if (target && target.view === 'phase') return openPhaseWorkList(floor,target.phase);
   if (target && target.view === 'questions') return openQuestionList(floor);
+  if (target && target.view === 'panel') return openPanel(target.kind, floor);
   if (target && target.actorKey) { var actor = floor.actors.find(function(a){ return a.key === target.actorKey; }); if (actor) return openActorDetail(floor, actor); }
   return openRoomDetail(floor);
 }
-function hitOverview(event){
-  var point=canvasPoint(event),x=point.x/T,y=point.y/T;
-  return visibleRooms().find(function(f){ var b = roomBox(f); return x >= b.x && x < b.x + b.width && y >= b.y && y < b.y + b.height; }) || null;
-}
-function hitActor(event, floor, surface){
-  var point=canvasPoint(event);surface=surface||{x:0,y:0,width:canvas.width,height:canvas.height};
-  for (var i = floor.actors.length - 1; i >= 0; i--) { var a=floor.actors[i],box=actorBox(a,surface);if(inside(point,{x:box.x,y:box.y,width:32*box.scale,height:48*box.scale}))return a; }
+// ---- prop panels: the whiteboard, cubicle screens, QA board, reviewer's desk and sorting table ----
+function hitHotspot(point){
+  for (var i = 0; i < LAYOUT.hotspots.length; i++) { var spot = LAYOUT.hotspots[i]; for (var j = 0; j < spot.rects.length; j++) { var r = spot.rects[j]; if (point.x >= r.x && point.x < r.x + r.w && point.y >= r.y && point.y < r.y + r.h) return spot.kind; } }
   return null;
 }
-function surfaceRect(rect,surface){return {x:rect.x+surface.x,y:rect.y+surface.y,width:rect.width,height:rect.height};}
-function hitQuestionBadge(event,floor,surface){
-  var point=canvasPoint(event);surface=surface||{x:0,y:0,width:canvas.width,height:canvas.height};
-  for(var i=floor.actors.length-1;i>=0;i--){var actor=floor.actors[i];if(actor.questionCount>0&&inside(point,alertGeometry(actor,surface)))return actor;}
+/** The prop the viewer stands next to: within reach of the bottom edge of one of its rectangles. */
+function nearHotspot(){
+  for (var i = 0; i < LAYOUT.hotspots.length; i++) { var spot = LAYOUT.hotspots[i]; for (var j = 0; j < spot.rects.length; j++) { var r = spot.rects[j]; var dx = Math.max(r.x - viewer.x, 0, viewer.x - (r.x + r.w)), dy = Math.max(r.y - viewer.y, 0, viewer.y - (r.y + r.h + 24)); if (dx + dy < 18) return spot.kind; } }
   return null;
 }
-function actorForProp(floor,prop){
-  var prefix=floor.key+':desk:';
-  if(prop.kind!=='desk'||prop.key.indexOf(prefix)!==0)return null;
-  var id=prop.key.slice(prefix.length);
-  return floor.actors.find(function(actor){return actor.id===id;})||null;
-}
-function hitWorkBoard(event,floor,surface){
-  var point=canvasPoint(event),board=progressBoardGeometry(surface.width,surface.height);
-  board.x+=surface.x;board.y+=surface.y;
-  if(floor.board.pending>0){var pending=pendingBoardGeometry(surface.width,surface.height);pending.x+=surface.x;pending.y+=surface.y;if(inside(point,pending))return 'questions';}
-  if(inside(point,board))return 'progress';
-  var whiteboard=floor.props.find(function(prop){return prop.kind==='whiteboard';});
-  if(whiteboard){var rect=surfaceRect(propGeometry(whiteboard,surface.width,surface.height),surface);if(inside(point,rect))return 'whiteboard';}
-  return null;
+function el(tag, className, text){ var node = document.createElement(tag); if (className) node.className = className; if (text !== undefined) node.textContent = text; return node; }
+function taskIdOf(floor, source){ var id = source && typeof source.taskId === "string" ? source.taskId : floor.board.taskId; return id && id !== "unassigned" ? id : null; }
+function addCommands(box, commands){ if (!commands.length) return; box.appendChild(el("h3", "panel-heading", t("commands"))); commands.forEach(function(command){ addCommand(box, command); }); }
+function panelTask(floor, source, box){
+  var phases = el("ol", "panel-phases");
+  ["planning", "implementing", "verifying", "reviewing", "integrating"].forEach(function(phase){ var step = el("li", phase === floor.phase ? "now" : "", phaseLabel(phase)); if (phase === floor.phase) step.setAttribute("aria-current", "step"); phases.appendChild(step); });
+  box.appendChild(phases);
+  var criteria = floor.criteria || [], groups = [["todo", t("critPending"), function(c){ return c.status === null; }], ["fail", t("critFail"), function(c){ return c.status === "FAIL" || c.status === "UNKNOWN"; }], ["pass", t("critPass"), function(c){ return c.status === "PASS"; }]];
+  if (!criteria.length) box.appendChild(el("p", "", t("noCriteria")));
+  else {
+    var columns = el("div", "panel-notes");
+    groups.forEach(function(group){
+      var items = criteria.filter(group[2]), column = el("div", "panel-column");
+      column.appendChild(el("h3", "panel-heading", group[1] + " · " + items.length));
+      items.forEach(function(c){ var note = el("div", "note " + group[0]); note.appendChild(el("strong", "", c.id)); note.appendChild(el("span", "", c.description)); column.appendChild(note); });
+      columns.appendChild(column);
+    });
+    box.appendChild(columns);
+  }
+  floor.questions.forEach(function(question){ box.appendChild(el("p", "panel-question", "! " + question.prompt)); });
+  addCommands(box, source && source.commands ? source.commands : []);
+}
+function panelDiff(floor, source, box){
+  var diff = source && source.diff ? source.diff : null;
+  if (!diff || !diff.files) { box.appendChild(el("p", "", t("noChanges"))); return; }
+  box.appendChild(el("p", "panel-meta", (source.branch ? source.branch + " · " : "") + diff.files + " " + t("filesCount") + " · +" + diff.insertions + " −" + diff.deletions));
+  var list = el("ul", "panel-files");
+  diff.paths.slice(0, 60).forEach(function(path){ list.appendChild(el("li", path === diff.recent ? "recent" : "", (path === diff.recent ? "▶ " : "") + path)); });
+  box.appendChild(list);
+  if (diff.paths.length > 60) box.appendChild(el("p", "panel-meta", "+" + (diff.paths.length - 60)));
+}
+function panelVerify(floor, source, box){
+  var criteria = floor.criteria || [], taskId = taskIdOf(floor, source);
+  box.appendChild(el("p", "panel-meta", t("verify") + " " + outcomeText(floor.board.verify)));
+  if (!criteria.length) box.appendChild(el("p", "", t("noCriteria")));
+  var list = el("ul", "panel-leds");
+  criteria.forEach(function(c){
+    var row = el("li", "led-row " + (c.status ? c.status.toLowerCase() : "pending"));
+    row.appendChild(el("strong", "", c.id + " · " + criterionStatusText(c.status)));
+    row.appendChild(el("span", "", c.description));
+    var meta = []; if (c.failureClass && c.status !== "PASS") meta.push(c.failureClass); if (c.exitCode !== null && c.exitCode !== undefined && c.status !== "PASS") meta.push("exit " + c.exitCode); if (c.finishedAt) meta.push(c.finishedAt.replace("T", " ").slice(0, 16));
+    if (meta.length) row.appendChild(el("small", "", meta.join(" · ")));
+    if (c.output) row.appendChild(el("pre", "panel-output", c.output));
+    list.appendChild(row);
+  });
+  box.appendChild(list);
+  if (taskId) addCommands(box, ["agent-ops verify --task " + taskId]);
+}
+function panelReview(floor, source, box){
+  var review = source && source.review ? source.review : null, taskId = taskIdOf(floor, source);
+  if (!review) box.appendChild(el("p", "", t("notReviewed")));
+  else {
+    box.appendChild(el("p", "stamp " + review.status.toLowerCase(), review.status));
+    box.appendChild(el("p", "panel-meta", review.createdAt.replace("T", " ").slice(0, 16) + (review.reason ? " · " + review.reason : "")));
+    review.rounds.forEach(function(round, index){
+      var part = el("section", "round");
+      part.appendChild(el("h3", "panel-heading", (index === 0 ? t("firstRound") : t("recheck")) + " · " + round.target));
+      if (round.summary) part.appendChild(el("p", "", round.summary));
+      if (round.findings.length) {
+        var findings = el("ul", "panel-findings");
+        round.findings.forEach(function(f){ var item = el("li", f.blocking ? "blocking" : ""); item.appendChild(el("strong", "", "[" + f.severity + (f.blocking ? " · " + t("blocking") : "") + "] " + f.title)); if (f.details) item.appendChild(el("p", "", f.details)); if (f.recommendation) item.appendChild(el("p", "advice", "→ " + f.recommendation)); findings.appendChild(item); });
+        part.appendChild(findings);
+      }
+      box.appendChild(part);
+    });
+    if (review.refuted !== null) box.appendChild(el("p", "panel-meta", review.refuted ? t("refutedYes") : t("refutedNo")));
+  }
+  if (taskId) addCommands(box, ["agent-ops review --task " + taskId + " --yes"]);
+}
+function panelIntegration(floor, source, box){
+  var facts = el("dl", "panel-facts"), add = function(label, value){ facts.appendChild(el("dt", "", label)); facts.appendChild(el("dd", "", value)); };
+  add(t("worktree"), source && source.name ? source.name : t("unknown"));
+  add(t("branch"), source && source.branch ? source.branch : t("unknown"));
+  add(t("base"), source && source.base ? source.base : t("unknown"));
+  add(t("ahead"), source && typeof source.ahead === "number" ? String(source.ahead) : t("unknown"));
+  add(t("files"), source && source.diff ? String(source.diff.files) : "0");
+  box.appendChild(facts);
+  var verify = floor.board.verify, review = floor.board.review, steps = el("ol", "panel-steps");
+  [[t("commitStep"), source && source.ahead > 0 ? "done" : "pending"], [t("verify"), verify === "PASS" ? "done" : verify === "FAIL" ? "failed" : "pending"],
+   [t("review"), review === "PASS" ? "done" : review === "FAIL" ? "failed" : "pending"], [t("finishStep"), floor.completedAt ? "done" : "pending"]]
+    .forEach(function(step){ var item = el("li", step[1], (step[1] === "done" ? "✓ " : step[1] === "failed" ? "✗ " : "○ ") + step[0]); item.setAttribute("data-state", step[1]); steps.appendChild(item); });
+  box.appendChild(steps);
+  if (source && source.name && source.branch && source.branch !== "(no worktree)") addCommands(box, ["agent-ops worktree finish " + source.name]);
+}
+var PANELS = {task: panelTask, diff: panelDiff, verify: panelVerify, review: panelReview, integration: panelIntegration};
+function openPanel(kind, floor){
+  var source = sourceFor(floor);
+  detailSignature = sourceSignature(floor); detailTarget = {floorKey: floor.key, actorKey: null, view: "panel", kind: kind};
+  showDialog(t("panel_" + kind) + " · " + floor.title, function(box){ PANELS[kind](floor, source, box); });
+  statusBox.className = "panel panel-" + kind;
+}
+// ---- input: the viewer walks inside a room; walls and furniture stop them ----
+function freeAt(p){
+  var cx = Math.round(p.x / 2), cy = Math.round(p.y / 2);
+  return cx >= 0 && cy >= 0 && cx < GRID.cols && cy < GRID.rows && GRID.free[cy * GRID.cols + cx] === 1;
+}
+function moveViewer(dx, dy){
+  viewer.dir = dx ? (dx < 0 ? "left" : "right") : (dy < 0 ? "up" : "down"); viewer.path = [];
+  for (var i = 0; i < 4; i++) {
+    var next = {x: viewer.x + dx * 2, y: viewer.y + dy * 2};
+    if (!freeAt(next)) break;
+    viewer.x = next.x; viewer.y = next.y; viewer.step += 2;
+  }
+  render();
+}
+function walkTo(point){
+  var path = findPath(GRID, {x: viewer.x, y: viewer.y}, point);
+  if (!path) return false;
+  if (reducedMotion) { var end = path[path.length - 1]; viewer.x = end.x; viewer.y = end.y; viewer.path = []; }
+  else viewer.path = path.slice(1);
+  render(); return true;
 }
-function hitWorkTarget(event,floor,surface){
-  var point=canvasPoint(event),props=floor.props;
-  for(var i=props.length-1;i>=0;i--){var prop=props[i];if(prop.kind!=='desk'&&prop.kind!=='bench'&&prop.kind!=='table')continue;var rect=surfaceRect(propGeometry(prop,surface.width,surface.height),surface);if(inside(point,rect))return {kind:'prop',phase:prop.phase,prop:prop,actor:actorForProp(floor,prop)};}
-  for(var j=floor.phaseAreas.length-1;j>=0;j--){var area=phaseAreaGeometry(floor.phaseAreas[j],surface.width,surface.height);if(inside(point,surfaceRect(area,surface)))return {kind:'phase',phase:floor.phaseAreas[j].phase,prop:null,actor:null};}
+function canvasPoint(event){
+  var rect = canvas.getBoundingClientRect(), w = rect.width || canvas.width || ROOM_W, h = rect.height || canvas.height || ROOM_H;
+  return {x: Math.floor((event.clientX - rect.left) * ROOM_W / w), y: Math.floor((event.clientY - rect.top) * ROOM_H / h)};
+}
+function hitFigure(point){
+  for (var i = lastFigures.length - 1; i >= 0; i--) { var f = lastFigures[i]; if (point.x >= f.x + 6 && point.x < f.x + 28 && point.y >= f.y && point.y < f.y + 50) return f; }
   return null;
 }
 canvas.addEventListener("click", function(event){
-  if (!model) return;
-  if (mode === "overview") {
-    var floor = hitOverview(event); if (!floor) return; selectedKey=floor.key;var surface=surfaceForFloor(floor),actor=hitActor(event,floor,surface);
-    if(actor){enterRoom();openActorDetail(activeRoom()||floor,actor);return;}
-    var badge=hitQuestionBadge(event,floor,surface);if(badge){openQuestionList(floor);return;}
-    var boardHit=hitWorkBoard(event,floor,surface);if(boardHit==='questions'){openQuestionList(floor);return;}if(boardHit){openWorkList(floor);return;}
-    var work=hitWorkTarget(event,floor,surface);if(work){if(work.actor)openActorDetail(floor,work.actor);else if(work.phase)openPhaseWorkList(floor,work.phase);return;}
-    enterRoom();return;
-  }
-  var room = activeRoom(); if (!room) return; var roomSurface=surfaceForFloor(room), actor = hitActor(event, room, roomSurface); if (actor) openActorDetail(room, actor); else {
-    var roomBadge=hitQuestionBadge(event,room,roomSurface);if(roomBadge){openQuestionList(room);return;}
-    var roomBoard=hitWorkBoard(event,room,roomSurface);if(roomBoard==='questions'){openQuestionList(room);return;}if(roomBoard){openWorkList(room);return;}
-    var roomWork=hitWorkTarget(event,room,roomSurface);if(roomWork){if(roomWork.actor)openActorDetail(room,roomWork.actor);else if(roomWork.phase)openPhaseWorkList(room,roomWork.phase);else openRoomDetail(room);return;}
-    openRoomDetail(room);
-  }
+  var floor = activeRoom(); if (mode !== "room" || !floor) return;
+  // Props first: people sitting at a desk or screen must not hide its panel.
+  var point = canvasPoint(event), spot = hitHotspot(point), figure = hitFigure(point);
+  if (spot) { openPanel(spot, floor); return; }
+  if (figure) { openActorDetail(floor, figure.actor); return; }
+  walkTo({x: Math.round(point.x / 2) * 2, y: Math.round(point.y / 2) * 2});
 });
+function keyboardFloor(){ return activeRoom() || roomByKey(selectedKey) || orderedRooms()[0]; }
+function sharedKeys(event){
+  if (event.key === "Escape" || event.key === "Backspace") { event.preventDefault(); if (!statusBox.hidden) closeDialog(); else if (mode === "room") goOverview(); return true; }
+  var floor = keyboardFloor();
+  if ((event.key === "l" || event.key === "L") && floor) { event.preventDefault(); openWorkList(floor); return true; }
+  if ((event.key === "q" || event.key === "Q") && floor) { event.preventDefault(); openQuestionList(floor); return true; }
+  return false;
+}
 canvas.addEventListener("keydown", function(event){
-  if (event.ctrlKey || event.metaKey || event.altKey) return;
-  if (event.key === "Escape" || event.key === "Backspace") { event.preventDefault(); if (!statusBox.hidden) closeDialog(); else if (mode === "room") goOverview(); return; }
-  var keyboardFloor=activeRoom()||roomByKey(selectedKey)||visibleRooms()[0];
-  if (event.key === "l" || event.key === "L") { if (keyboardFloor) { event.preventDefault(); openWorkList(keyboardFloor); return; } }
-  if (event.key === "q" || event.key === "Q") { if (keyboardFloor) { event.preventDefault(); openQuestionList(keyboardFloor); return; } }
-  var phaseKeys={"1":"planning","2":"implementing","3":"verifying","4":"reviewing","5":"integrating"};
-  if (phaseKeys[event.key] && keyboardFloor) { event.preventDefault(); openPhaseWorkList(keyboardFloor,phaseKeys[event.key]); return; }
-  if (mode === "overview" || mode === "room") {
-    var move = {ArrowLeft:[-1,0], ArrowRight:[1,0], ArrowUp:[0,-1], ArrowDown:[0,1], a:[-1,0], d:[1,0], w:[0,-1], s:[0,1], A:[-1,0], D:[1,0], W:[0,-1], S:[0,1]}[event.key];
-    if (move) { event.preventDefault(); moveSupervisor(move[0], move[1]); return; }
-  }
-  var rooms = visibleRooms(); if (!rooms.length) return;
-  var index = Math.max(0, rooms.findIndex(function(f){ return f.key === selectedKey; }));
-  if (event.key === "ArrowRight" || event.key === "ArrowDown") { event.preventDefault(); selectedKey = rooms[(index + 1) % rooms.length].key; updateHeader(); render(); }
-  if (event.key === "ArrowLeft" || event.key === "ArrowUp") { event.preventDefault(); selectedKey = rooms[(index - 1 + rooms.length) % rooms.length].key; updateHeader(); render(); }
-  if (event.key === "Enter" && mode === "overview") { event.preventDefault(); enterRoom(); }
-  if (event.key === "Enter" && mode === "room") { event.preventDefault(); openSelectedDetail(); }
+  if (event.ctrlKey || event.metaKey || event.altKey || sharedKeys(event)) return;
+  var floor = activeRoom(); if (mode !== "room" || !floor) return;
+  var phaseKeys = {"1": "planning", "2": "implementing", "3": "verifying", "4": "reviewing", "5": "integrating"};
+  if (phaseKeys[event.key]) { event.preventDefault(); openPhaseWorkList(floor, phaseKeys[event.key]); return; }
+  var move = {ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1], a: [-1, 0], d: [1, 0], w: [0, -1], s: [0, 1], A: [-1, 0], D: [1, 0], W: [0, -1], S: [0, 1]}[event.key];
+  if (move) { event.preventDefault(); moveViewer(move[0], move[1]); return; }
+  if (event.key === "Enter") { event.preventDefault(); var near = nearestActor(lastFigures), prop = nearHotspot(); if (near) openActorDetail(floor, near.actor); else if (prop) openPanel(prop, floor); else openRoomDetail(floor); }
 });
-repoSelect.addEventListener("change", function(){ repoFilter = repoSelect.value; navPage = 0; if (activeRoom() && repoFilter && activeRoom().repo !== repoFilter) mode = "overview"; if (!selectedKey || visibleRooms().every(function(f){ return f.key !== selectedKey; })) selectedKey = visibleRooms()[0] && visibleRooms()[0].key; updateHeader(); render(); });
-backButton.addEventListener("click", goOverview); recentButton.addEventListener("click", function(){ showRecent = !showRecent; if (!showRecent && activeRoom() && activeRoom().completedAt) mode = "overview"; updateHeader(); render(); });
+overviewBox.addEventListener("keydown", function(event){
+  if (event.ctrlKey || event.metaKey || event.altKey || sharedKeys(event)) return;
+  if (/^[1-9]$/u.test(event.key)) { var floor = (panelCollapsed ? pageRooms(pageInView()) : orderedRooms())[Number(event.key) - 1]; if (floor) { event.preventDefault(); enterRoom(floor.key); } }
+});
+repoSelect.addEventListener("change", function(){ repoFilter = repoSelect.value; if (activeRoom() && repoFilter && activeRoom().repo !== repoFilter) mode = "overview"; if (!selectedKey || visibleRooms().every(function(f){ return f.key !== selectedKey; })) selectedKey = visibleRooms()[0] && visibleRooms()[0].key; updateHeader(); render(); });
+backButton.addEventListener("click", goOverview);
+panelToggle.addEventListener("click", function(){ panelCollapsed = !panelCollapsed; try { localStorage.setItem("agent-office-list", panelCollapsed ? "collapsed" : "open"); } catch (_) {} updateHeader(); render(); }); recentButton.addEventListener("click", function(){ showRecent = !showRecent; if (!showRecent && activeRoom() && activeRoom().completedAt) mode = "overview"; updateHeader(); render(); });
 languageButton.addEventListener("click", changeLanguage); statusBox.addEventListener("keydown", function(event){
   if (event.key === "Escape") { event.preventDefault(); closeDialog(); return; }
   if (event.key !== "Tab") return;
@@ -872,18 +977,28 @@ languageButton.addEventListener("click", changeLanguage); statusBox.addEventList
   if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
   else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
 });
-function poll(){ fetch("snapshot.json" + location.search, {cache:"no-store"}).then(function(r){ if (!r.ok) throw new Error(String(r.status)); return r.json(); }).then(function(s){ snapshot = s; model = sceneModel(s); offline = false; var selectedMissing=mode==='room'&&!!selectedKey&&!roomByKey(selectedKey),dialogMissing=!statusBox.hidden&&!!detailTarget&&!roomByKey(detailTarget.floorKey); if(selectedMissing||dialogMissing){if(dialogMissing)detailPreviousFocus=canvas;if(!statusBox.hidden)closeDialog();detailTarget=null;detailPage=0;detailSignature="";mode='overview';} if (!selectedKey || !roomByKey(selectedKey)) selectedKey = visibleRooms()[0] && visibleRooms()[0].key; updateHeader(); render(); if (!statusBox.hidden && detailTarget && roomByKey(detailTarget.floorKey)) { var signature=sourceSignature(roomByKey(detailTarget.floorKey)); if(signature!==detailSignature){detailSignature=signature;openSelectedDetail();} } }, function(){ offline = true; updateHeader(); }); }
-function loop(){ frame++; render(); tickDialogue(); requestAnimationFrame(loop); }
-updateHeader(); poll(); setInterval(poll, 2000); window.addEventListener("resize", render); requestAnimationFrame(loop);
+function poll(){ fetch("snapshot.json" + location.search, {cache:"no-store"}).then(function(r){ if (!r.ok) throw new Error(String(r.status)); return r.json(); }).then(function(s){ snapshot = s; model = sceneModel(s); syncPeople(); offline = false; var selectedMissing=mode==='room'&&!!selectedKey&&!roomByKey(selectedKey),dialogMissing=!statusBox.hidden&&!!detailTarget&&!roomByKey(detailTarget.floorKey); if(selectedMissing||dialogMissing){if(dialogMissing)detailPreviousFocus=canvas;if(!statusBox.hidden)closeDialog();detailTarget=null;detailPage=0;detailSignature="";mode='overview';resetLabels();} if (!selectedKey || !roomByKey(selectedKey)) selectedKey = visibleRooms()[0] && visibleRooms()[0].key; updateHeader(); render(); if (!statusBox.hidden && detailTarget && roomByKey(detailTarget.floorKey)) { var signature=sourceSignature(roomByKey(detailTarget.floorKey)); if(signature!==detailSignature){detailSignature=signature;openSelectedDetail();} } }, function(){ offline = true; updateHeader(); }); }
+function loop(){ tick(); requestAnimationFrame(loop); }
+updateHeader(); poll(); setInterval(poll, 2000); window.addEventListener("resize", function(){updateHeader();render();}); requestAnimationFrame(loop);
 `;
+let data = null;
+/** Art, layout and the shared pure functions, serialised once for every page. */
+function pageData() {
+    data ??= {
+        __PALETTE__: JSON.stringify(ROOM_PALETTE), __SPRITES__: JSON.stringify(roomSprites()), __PEOPLE__: JSON.stringify(personSprites()),
+        __LAYOUT__: JSON.stringify(officeLayout()), __SCENE__: sceneModel.toString(), __AVATAR_COLORS__: avatarColors.toString(),
+        __WALK__: walkGrid.toString(), __PATH__: findPath.toString(), __NOTE_POS__: notePosition.toString()
+    };
+    return data;
+}
 /** One inline page; the nonce binds its only script and style under the server's CSP. */
 export function officePage(nonce) {
-    const script = CLIENT.replace("__PALETTE__", () => JSON.stringify(PALETTE)).replace("__SPRITES__", () => JSON.stringify(SPRITES))
-        .replace("__SCENE__", () => sceneModel.toString()).replace("__AVATAR__", () => avatarSprite.toString()).replace("__AVATAR_COLORS__", () => avatarPalette.toString());
+    const values = pageData();
+    const script = Object.keys(values).reduce((text, key) => text.replace(key, () => values[key]), CLIENT);
     return `<!doctype html>
 <html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
 <meta name="referrer" content="no-referrer"><title>agent-ops Office · Preview</title><style nonce="${nonce}">${STYLE}</style></head>
 <body><div id="app"><header id="header"><div id="brand">agent-ops Office · Preview</div><div id="crumb">Office overview</div><button id="back" type="button" hidden>← Back to overview</button><button id="recent" type="button">▣ Recently completed</button><select id="repo-filter" hidden></select><button id="language" type="button">繁中 / EN</button><span id="live" aria-live="polite">● Connected</span></header>
-<main id="wrap"><canvas id="office" tabindex="0" width="576" height="304" aria-label="Office rooms; use arrow keys and Enter to explore"></canvas><div id="dialogue" role="status" aria-live="polite"></div><nav id="room-nav" aria-label="Office rooms"></nav></main></div>
+<main id="workspace"><section id="wrap" aria-label="Pixel office"><div id="overview" tabindex="-1"></div><div id="room-view" hidden><div id="hud"></div><div id="stage"><canvas id="office" tabindex="0" width="576" height="320" aria-label="Office room"></canvas><div id="labels"></div></div></div></section><aside id="work-panel" aria-labelledby="work-heading"><div id="panel-head"><h2 id="work-heading">Work list</h2><button id="panel-toggle" type="button" aria-controls="work-list" aria-expanded="true">Hide list »</button></div><p id="work-summary"></p><div id="work-list"></div></aside></main></div>
 <section id="status" role="dialog" aria-modal="true" aria-labelledby="status-title" tabindex="-1" hidden></section><script nonce="${nonce}">${script}</script></body></html>`;
 }