privateboard 0.1.38 → 0.1.41

package/public/home-3d-mock.js

@@ -32,22 +32,21 @@
    with the moderator chair as the bottom-row anchor. 7 seats total
    fills the ring without empty arcs. */
 const CAST = [
-  { id: "chair",           name: "Chair",          avatarPath: "/avatars/chair.svg",            roleKind: "chair" },
-  { id: "socrates",        name: "Socrates",       avatarPath: "/avatars/socrates.svg",         roleKind: "director" },
-  { id: "first-principles", name: "First Principles", avatarPath: "/avatars/first-principles.svg", roleKind: "director" },
-  { id: "value-investor",  name: "Value Investor", avatarPath: "/avatars/value-investor.svg",   roleKind: "director" },
-  { id: "user-empathy",    name: "User-Empathy",   avatarPath: "/avatars/user-empathy.svg",     roleKind: "director" },
-  { id: "long-horizon",    name: "Long Horizon",   avatarPath: "/avatars/long-horizon.svg",     roleKind: "director" },
-  { id: "phenomenologist", name: "Phenomenologist", avatarPath: "/avatars/phenomenologist.svg", roleKind: "director" },
+  { id: "chair",           name: "Chair",          avatarPath: "/avatars/3d/chair.png",            roleKind: "chair" },
+  { id: "socrates",        name: "Socrates",       avatarPath: "/avatars/3d/socrates.png",         roleKind: "director" },
+  { id: "first-principles", name: "First Principles", avatarPath: "/avatars/3d/first-principles.png", roleKind: "director" },
+  { id: "value-investor",  name: "Value Investor", avatarPath: "/avatars/3d/value-investor.png",   roleKind: "director" },
+  { id: "user-empathy",    name: "User-Empathy",   avatarPath: "/avatars/3d/user-empathy.png",     roleKind: "director" },
+  { id: "long-horizon",    name: "Long Horizon",   avatarPath: "/avatars/3d/long-horizon.png",     roleKind: "director" },
+  { id: "phenomenologist", name: "Phenomenologist", avatarPath: "/avatars/3d/phenomenologist.png", roleKind: "director" },
 ];
 
-/* The 5 tone-keyed wall variants in voice-3d.js. "brainstorm" gives
-   us the red-brick + stone-band + moss painted mural — the most
-   characterful of the five, and the one the user explicitly asked
-   for as the homepage scene. Painted brick reads warm against the
-   page's dark theme, the moss + plants ground the room visually,
-   and the green floor (#5E6B47) gives the table a planted feel
-   instead of the cleaner library look "research" had. */
+/* Which of the five tone-keyed rooms (voice-3d.js) the homepage hero
+   shows. This is the FINAL homepage scene · "brainstorm" — the cozy
+   modern interior (daylight windows + framed art on cream walls, a real
+   3D oak chest + sage sofa) on the warm-oak plank floor (set on
+   `.hero-3d-stage` in home.html). All five rooms were redesigned +
+   signed off; brainstorm is the one we showcase here. */
 const DEFAULT_MODE = "brainstorm";
 
 /* Director rotation cadence. Long enough for the eye to register
@@ -123,6 +122,18 @@ export function startMockDriver() {
   const VS3D = window.VoiceStage3D;
   if (!VS3D || typeof VS3D.update !== "function") return () => {};
 
+  // Decorate CAST with the canonical avatar3d configs · without this
+  // the chair + directors render as RNG-drawn random faces instead of
+  // the seeded looks the user sees in the in-app voice room. Source:
+  // window.PB_CORE_AVATARS (public/core-avatars.js, loaded by home.html
+  // before this driver). Idempotent · re-walks on every driver start.
+  if (window.PB_CORE_AVATARS) {
+    for (const m of CAST) {
+      const cfg = window.PB_CORE_AVATARS[m.id];
+      if (cfg && !m.avatar3d) m.avatar3d = cfg;
+    }
+  }
+
   const positions = computeSeatPositions(CAST);
   // Director ids only · the chair never speaks in this rotation
   // (chairs in the real app intervene at round boundaries; the

package/public/home.html

@@ -1382,8 +1382,13 @@
        the brainstorm vars directly onto the stage host here. SVG
        data URI is copied verbatim from
        index.html:8674 (brainstorm tile). */
-    --floor-bg: #5E6B47;
-    --floor-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128' shape-rendering='crispEdges'><rect width='128' height='128' fill='%235E6B47'/><rect x='0' y='8' width='20' height='16' fill='%234F5C3D'/><rect x='104' y='20' width='20' height='20' fill='%234F5C3D'/><rect x='88' y='64' width='24' height='16' fill='%234F5C3D'/><rect x='0' y='64' width='12' height='20' fill='%234F5C3D'/><rect x='44' y='64' width='16' height='8' fill='%234F5C3D'/><rect x='72' y='8' width='12' height='8' fill='%236E7A52'/><rect x='120' y='80' width='8' height='12' fill='%236E7A52'/><rect x='48' y='84' width='8' height='8' fill='%236E7A52'/><rect x='48' y='24' width='32' height='32' fill='%235C4838'/><rect x='44' y='28' width='4' height='24' fill='%235C4838'/><rect x='80' y='28' width='4' height='24' fill='%235C4838'/><rect x='52' y='20' width='24' height='4' fill='%235C4838'/><rect x='52' y='56' width='20' height='4' fill='%235C4838'/><rect x='56' y='16' width='12' height='4' fill='%235C4838'/><rect x='56' y='32' width='8' height='8' fill='%234A3A28'/><rect x='68' y='40' width='4' height='8' fill='%234A3A28'/><rect x='60' y='24' width='4' height='4' fill='%236E5A48'/><rect x='68' y='48' width='4' height='4' fill='%236E5A48'/><rect x='58' y='44' width='2' height='2' fill='%236B6258'/><rect x='72' y='32' width='2' height='2' fill='%236B6258'/><rect x='50' y='38' width='2' height='2' fill='%236B6258'/><rect x='16' y='96' width='24' height='20' fill='%235C4838'/><rect x='12' y='100' width='4' height='12' fill='%235C4838'/><rect x='40' y='100' width='4' height='12' fill='%235C4838'/><rect x='20' y='92' width='16' height='4' fill='%235C4838'/><rect x='22' y='104' width='8' height='4' fill='%234A3A28'/><rect x='20' y='100' width='4' height='4' fill='%236E5A48'/><rect x='24' y='108' width='2' height='2' fill='%236B6258'/><rect x='32' y='98' width='2' height='2' fill='%236B6258'/><rect x='8' y='40' width='1' height='2' fill='%238FA068'/><rect x='24' y='72' width='1' height='2' fill='%238FA068'/><rect x='104' y='56' width='1' height='2' fill='%238FA068'/><rect x='120' y='104' width='1' height='2' fill='%238FA068'/><rect x='88' y='44' width='1' height='2' fill='%238FA068'/><rect x='4' y='88' width='1' height='2' fill='%238FA068'/><rect x='64' y='88' width='1' height='2' fill='%238FA068'/><rect x='92' y='24' width='1' height='2' fill='%238FA068'/><rect x='44' y='62' width='1' height='2' fill='%238FA068'/><rect x='80' y='120' width='1' height='2' fill='%238FA068'/><rect x='12' y='12' width='1' height='2' fill='%238FA068'/><rect x='112' y='60' width='1' height='2' fill='%238FA068'/></svg>");
+    /* FINAL · matched to DEFAULT_MODE "brainstorm" in home-3d-mock.js.
+       The warm-oak plank floor (mirrors index.html's
+       `.roundtable-stage[data-floor="brainstorm"]`) under the cozy
+       modern-interior walls — directors in a warm furnished lounge.
+       This is the homepage's showcase scene. */
+    --floor-bg: #C8A877;
+    --floor-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='64' shape-rendering='crispEdges'><rect width='128' height='64' fill='%23C8A877'/><rect y='16' width='128' height='16' fill='%23BE9E6C'/><rect y='48' width='128' height='16' fill='%23BE9E6C'/><rect y='0' width='128' height='1' fill='%23D8BC8C'/><rect y='16' width='128' height='1' fill='%23D8BC8C'/><rect y='32' width='128' height='1' fill='%23D8BC8C'/><rect y='48' width='128' height='1' fill='%23D8BC8C'/><rect y='15' width='128' height='1' fill='%239C7E50'/><rect y='31' width='128' height='1' fill='%239C7E50'/><rect y='47' width='128' height='1' fill='%239C7E50'/><rect y='63' width='128' height='1' fill='%239C7E50'/><rect x='40' y='0' width='1' height='16' fill='%239C7E50'/><rect x='96' y='16' width='1' height='16' fill='%239C7E50'/><rect x='20' y='32' width='1' height='16' fill='%239C7E50'/><rect x='72' y='48' width='1' height='16' fill='%239C7E50'/><rect x='10' y='6' width='14' height='1' fill='%23B8945E'/><rect x='60' y='22' width='18' height='1' fill='%23B8945E'/><rect x='100' y='40' width='14' height='1' fill='%23B8945E'/><rect x='30' y='56' width='16' height='1' fill='%23B8945E'/></svg>");
   }
   .hero-3d-stage canvas {
     width: 100% !important;
@@ -1414,12 +1419,55 @@
   }
   .hero-3d-hint.is-visible { opacity: 0.85; }
 
+  /* Loading veil · covers the stage while the 3D bundle downloads +
+     mounts. The static poster is the intended cover for that gap, but
+     when it's absent the section would sit blank during the ~500KB
+     download — so the veil fills it with a spinner + caption. Revealed
+     + torn down by home-3d-loader.js; only shown on devices that
+     actually load 3D (no perpetual spinner on skip). z-index above the
+     poster/stage so it covers both until `[data-mounted]` fades it. */
+  .hero-3d-loading {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 14px;
+    background: var(--panel-2);
+    transition: opacity 0.4s ease-out;
+  }
+  .hero-3d-loading[hidden] { display: none; }
+  .hero-3d[data-mounted] .hero-3d-loading {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .hero-3d-spinner {
+    width: 26px;
+    height: 26px;
+    border: 2px solid var(--line-bright);
+    border-top-color: var(--lime);
+    border-radius: 50%;
+    animation: hero-3d-spin 0.8s linear infinite;
+  }
+  @keyframes hero-3d-spin { to { transform: rotate(360deg); } }
+  .hero-3d-loading-label {
+    font-family: var(--mono, "Inter", system-ui, sans-serif);
+    font-size: 10px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--text-faint);
+  }
+
   /* `prefers-reduced-motion` · the loader honours this and never
      mounts the scene · the poster stays. Skip CSS transitions too so
      nothing animates if the loader fails halfway and toggles classes. */
   @media (prefers-reduced-motion: reduce) {
     .hero-3d-poster,
-    .hero-3d-hint { transition: none; }
+    .hero-3d-hint,
+    .hero-3d-loading { transition: none; }
+    .hero-3d-spinner { animation: none; }
   }
 
   /* Narrow viewports (phone) · the round table compresses into a
@@ -1622,7 +1670,7 @@
 
       <div class="hero-actions">
         <a href="#install" class="big-btn primary">[ ◆ Convene a Room ]</a>
-        <a href="https://github.com/kaysaith1900/privateboard/releases/download/v0.1.37/PrivateBoard-0.1.37-arm64.dmg"
+        <a href="https://github.com/kaysaith1900/privateboard/releases/download/v0.1.41/PrivateBoard-0.1.41-arm64.dmg"
            class="big-btn secondary"
            download
            aria-label="Download PrivateBoard for macOS (Apple Silicon)"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3v12"/><polyline points="6 11 12 17 18 11"/><path d="M5 21h14"/></svg> Download for Mac</a>
@@ -1636,7 +1684,7 @@
         <div class="cast-card" data-agent="socrates">
           <div class="cast-card-frame">
             <span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
-            <img src="avatars/socrates.svg" alt="Socrates">
+            <img src="avatars/3d/socrates.png" alt="Socrates">
           </div>
           <div class="cast-card-name">Socrates</div>
           <div class="cast-card-tag">// skeptic</div>
@@ -1644,7 +1692,7 @@
         <div class="cast-card" data-agent="first-principles">
           <div class="cast-card-frame">
             <span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
-            <img src="avatars/first-principles.svg" alt="First Principles">
+            <img src="avatars/3d/first-principles.png" alt="First Principles">
           </div>
           <div class="cast-card-name">First Principles</div>
           <div class="cast-card-tag">// physicist</div>
@@ -1652,7 +1700,7 @@
         <div class="cast-card" data-agent="value-investor">
           <div class="cast-card-frame">
             <span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
-            <img src="avatars/value-investor.svg" alt="Value Investor">
+            <img src="avatars/3d/value-investor.png" alt="Value Investor">
           </div>
           <div class="cast-card-name">Value Investor</div>
           <div class="cast-card-tag">// patterns</div>
@@ -1660,7 +1708,7 @@
         <div class="cast-card" data-agent="user-empathy">
           <div class="cast-card-frame">
             <span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
-            <img src="avatars/user-empathy.svg" alt="User-Empathy">
+            <img src="avatars/3d/user-empathy.png" alt="User-Empathy">
           </div>
           <div class="cast-card-name">User-Empathy</div>
           <div class="cast-card-tag">// advocate</div>
@@ -1668,7 +1716,7 @@
         <div class="cast-card" data-agent="long-horizon">
           <div class="cast-card-frame">
             <span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
-            <img src="avatars/long-horizon.svg" alt="Long Horizon">
+            <img src="avatars/3d/long-horizon.png" alt="Long Horizon">
           </div>
           <div class="cast-card-name">Long Horizon</div>
           <div class="cast-card-tag">// strategist</div>
@@ -1676,7 +1724,7 @@
         <div class="cast-card" data-agent="phenomenologist">
           <div class="cast-card-frame">
             <span class="cc-corner cc-tl"></span><span class="cc-corner cc-br"></span>
-            <img src="avatars/phenomenologist.svg" alt="Phenomenologist">
+            <img src="avatars/3d/phenomenologist.png" alt="Phenomenologist">
           </div>
           <div class="cast-card-name">Phenomenologist</div>
           <div class="cast-card-tag">// observer</div>
@@ -1816,6 +1864,14 @@
       </picture>
       <div class="hero-3d-stage" data-hero-3d-stage hidden></div>
       <div class="hero-3d-hint" data-hero-3d-hint hidden>drag to look around</div>
+      <!-- Loading veil · home-3d-loader.js reveals this the moment it
+           commits to downloading the 3D bundle (~500KB three.js +
+           voice-3d) and tears it down on mount / failure. Hidden by
+           default so devices that skip 3D never see a spinner. -->
+      <div class="hero-3d-loading" data-hero-3d-loading hidden aria-hidden="true">
+        <span class="hero-3d-spinner"></span>
+        <span class="hero-3d-loading-label">Rendering the round table…</span>
+      </div>
     </div>
   </section>
 
@@ -1833,42 +1889,42 @@
       <!-- LEFT · the standing six in a 3×2 grid (display-only) -->
       <div class="cast-directors">
         <div class="bento-cell bento-director" data-agent="socrates">
-          <img class="bento-director-img" src="avatars/socrates.svg" alt="Socrates">
+          <img class="bento-director-img" src="avatars/3d/socrates.png" alt="Socrates">
           <div class="bento-director-tag">// skeptic</div>
           <div class="bento-director-name">Socrates</div>
           <div class="bento-director-desc">Three layers deep on every assumption.</div>
           <div class="bento-director-model">claude-opus-4.7</div>
         </div>
         <div class="bento-cell bento-director" data-agent="first-principles">
-          <img class="bento-director-img" src="avatars/first-principles.svg" alt="First Principles">
+          <img class="bento-director-img" src="avatars/3d/first-principles.png" alt="First Principles">
           <div class="bento-director-tag">// physicist</div>
           <div class="bento-director-name">First Principles</div>
           <div class="bento-director-desc">Strips problems to their primitives.</div>
           <div class="bento-director-model">gpt-5.5-pro</div>
         </div>
         <div class="bento-cell bento-director" data-agent="value-investor">
-          <img class="bento-director-img" src="avatars/value-investor.svg" alt="Value Investor">
+          <img class="bento-director-img" src="avatars/3d/value-investor.png" alt="Value Investor">
           <div class="bento-director-tag">// patterns</div>
           <div class="bento-director-name">Value Investor</div>
           <div class="bento-director-desc">Reads every judgment through a ten-year lens.</div>
           <div class="bento-director-model">gemini-3.1-pro</div>
         </div>
         <div class="bento-cell bento-director" data-agent="user-empathy">
-          <img class="bento-director-img" src="avatars/user-empathy.svg" alt="User-Empathy">
+          <img class="bento-director-img" src="avatars/3d/user-empathy.png" alt="User-Empathy">
           <div class="bento-director-tag">// advocate</div>
           <div class="bento-director-name">User-Empathy</div>
           <div class="bento-director-desc">Asks why anyone would actually use this.</div>
           <div class="bento-director-model">grok-4.3</div>
         </div>
         <div class="bento-cell bento-director" data-agent="long-horizon">
-          <img class="bento-director-img" src="avatars/long-horizon.svg" alt="Long Horizon">
+          <img class="bento-director-img" src="avatars/3d/long-horizon.png" alt="Long Horizon">
           <div class="bento-director-tag">// strategist</div>
           <div class="bento-director-name">Long Horizon</div>
           <div class="bento-director-desc">Reads everything on a hundred-year scale.</div>
           <div class="bento-director-model">deepseek-v4-pro</div>
         </div>
         <div class="bento-cell bento-director" data-agent="phenomenologist">
-          <img class="bento-director-img" src="avatars/phenomenologist.svg" alt="Phenomenologist">
+          <img class="bento-director-img" src="avatars/3d/phenomenologist.png" alt="Phenomenologist">
           <div class="bento-director-tag">// observer</div>
           <div class="bento-director-name">Phenomenologist</div>
           <div class="bento-director-desc">Begins from experience itself.</div>
@@ -2226,6 +2282,12 @@
      `voice-3d.js` (which downloads three.module.min.js + OrbitControls,
      ~488 KB total). Visitors who can't or shouldn't run WebGL stay on
      the poster and never download the 3D bundle. -->
+<!-- Canonical chair + director avatar3d configs · populated onto
+     window.PB_CORE_AVATARS so the dynamically-imported home-3d-mock.js
+     can decorate its CAST with the same look the in-app voice room
+     and `src/seed/*.ts` ship. Classic-script defer · evaluates before
+     the ESM home-3d-loader's `import('/home-3d-mock.js')` resolves. -->
+<script src="core-avatars.js" defer></script>
 <script type="module" src="home-3d-loader.js" defer></script>
 
 </body>

package/public/i18n.js

@@ -675,6 +675,7 @@
       head_record_label: "Record meeting",
       head_record_stop_tip: "Stop recording · save .mp4",
       head_record_stop_label: "Stop recording",
+      head_replay_stop_label: "Stop",
       rec_pill_label: "REC",
       rec_error_toast: "Couldn't start the meeting recording. Check screen-capture permission and try again.",
       rec_exit_class: "recording · choose",
@@ -1260,7 +1261,7 @@ When the room ___, raise an objection.`,
       us_user_tag: "▸ User",
       us_user_deck: "how the boardroom addresses you and what it knows about your context.",
       us_avatar: "Avatar",
-      us_regen_avatar: "generate 8-bit avatar",
+      us_avatar3d: "3D avatar",
       us_name: "Name",
       us_about: "About you",
       us_intro_ph: "A line or two about your role, what you tend to think about, what you're working on. Directors will keep this in mind across rooms.",
@@ -2046,6 +2047,7 @@ When the room ___, raise an objection.`,
       head_record_label: "录制会议",
       head_record_stop_tip: "停止录制 · 保存 .mp4",
       head_record_stop_label: "停止录制",
+      head_replay_stop_label: "停止",
       rec_pill_label: "录制中",
       rec_error_toast: "无法开始会议录制。请检查屏幕录制权限后重试。",
       rec_exit_class: "录制中 · 请选择",
@@ -2611,7 +2613,7 @@ When the room ___, raise an objection.`,
       us_user_tag: "▸ 用户",
       us_user_deck: "董事会如何称呼你，以及它需要知道的背景。",
       us_avatar: "头像",
-      us_regen_avatar: "生成 8-bit 头像",
+      us_avatar3d: "3D 形象",
       us_name: "姓名",
       us_about: "关于你",
       us_intro_ph: "一两句话写下你的角色、常思考的问题、手头项目。董事在每场会议里都会参考。",
@@ -3247,6 +3249,7 @@ When the room ___, raise an objection.`,
       head_record_label: "ミーティングを録画",
       head_record_stop_tip: "録画を停止 · .mp4 を保存",
       head_record_stop_label: "録画を停止",
+      head_replay_stop_label: "停止",
       rec_pill_label: "録画中",
       rec_error_toast: "ミーティングの録画を開始できませんでした。画面録画の権限を確認してください。",
       rec_exit_class: "録画中 · 選択",
@@ -3594,7 +3597,7 @@ When the room ___, raise an objection.`,
       us_user_tag: "▸ ユーザー",
       us_user_deck: "ボードルームでの呼称と、文脈として保持される情報。",
       us_avatar: "アバター",
-      us_regen_avatar: "8 ビットアバターを生成",
+      us_avatar3d: "3Dアバター",
       us_name: "名前",
       us_about: "あなたについて",
       us_intro_ph: "あなたの役割、考えていること、取り組んでいることを一文か二文。ディレクターはこれを会議室全体で意識します。",
@@ -4195,6 +4198,7 @@ When the room ___, raise an objection.`,
       head_record_label: "Grabar reunión",
       head_record_stop_tip: "Detener grabación · guardar .mp4",
       head_record_stop_label: "Detener grabación",
+      head_replay_stop_label: "Detener",
       rec_pill_label: "GRAB.",
       rec_error_toast: "No se pudo iniciar la grabación. Revisa el permiso de captura de pantalla e inténtalo de nuevo.",
       rec_exit_class: "grabando · elige",
@@ -4542,7 +4546,7 @@ When the room ___, raise an objection.`,
       us_user_tag: "▸ Usuario",
       us_user_deck: "cómo te llama la sala y qué sabe sobre tu contexto.",
       us_avatar: "Avatar",
-      us_regen_avatar: "generar avatar 8-bit",
+      us_avatar3d: "avatar 3D",
       us_name: "Nombre",
       us_about: "Sobre ti",
       us_intro_ph: "Una línea o dos sobre tu rol, en qué piensas, en qué trabajas. Los directores lo tendrán presente en todas las salas.",