@bongos/core 1.19.487 → 1.19.489

package/modules/hall-ui/public/profile.html

@@ -35,103 +35,147 @@
       </div>
 
       <main id="hall-main">
-        <!-- Standing — avatar, name, rank badge, member-since. Filled by profile.js. -->
-        <section class="scroll" id="standing-scroll" aria-labelledby="standing-h">
-          <h2 id="standing-h" class="sr-only">Standing</h2>
-          <div class="profile profile--ident" id="profile-head">
-            <div class="profile__placeholder">…</div>
-          </div>
-        </section>
+        <!-- Three screens behind a section rail (task 1003489): the settings
+             idiom, OTBKit.makeSectionRail in switch mode. profile.js wires the
+             rail and the #key deep links; profile.css shows one group at a
+             time (.profile-groups[data-active]) and a section's own [hidden]
+             still wins, so the hub-only reveals below are untouched. -->
+        <div class="profile-layout" id="profile-layout">
+          <nav class="section-rail" id="profile-rail" aria-label="Profile sections"></nav>
 
-        <!-- By the numbers — credits, karma, works shipped. -->
-        <section class="scroll" id="numbers-scroll" aria-labelledby="numbers-h">
-          <h2 id="numbers-h" class="scroll__h">By the numbers</h2>
-          <div class="stat-row" id="numbers-body">
-            <div class="stat-tile"><span class="stat-tile__label">Loading…</span></div>
-          </div>
-        </section>
-
-        <!-- Cross-project record — hub-only (ADR 0171). profile.js reveals this
-             only when the profile response carries a cross_project key; on a
-             vanilla instance the key is absent and the section never renders. -->
-        <section class="scroll" id="xp-scroll" aria-labelledby="xp-h" hidden>
-          <h2 id="xp-h" class="scroll__h">Cross-project record</h2>
-          <div id="xp-body"></div>
-        </section>
-
-        <!-- Achievements — the builder's earned shelf. -->
-        <section class="scroll scroll--bare" id="ach-scroll" aria-labelledby="ach-h">
-          <h2 id="ach-h" class="scroll__h">Achievements</h2>
-          <div class="ach-grid" id="ach-grid">
-            <div class="profile__placeholder">…</div>
-          </div>
-        </section>
-
-        <!-- Recent works — the last few shipped tasks. -->
-        <section class="scroll" id="works-scroll" aria-labelledby="works-h">
-          <h2 id="works-h" class="scroll__h">Recent works</h2>
-          <p class="scroll__lede" id="works-lede">The most recent works this builder has shipped.</p>
-          <table class="ledger" id="works-table">
-            <thead>
-              <tr>
-                <th class="ledger__num">#</th>
-                <th>Work</th>
-                <th class="ledger__drachmae">Reward</th>
-                <th class="ledger__date">Shipped</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr><td colspan="4">…</td></tr>
-            </tbody>
-          </table>
-        </section>
-
-        <!-- Activity, by craft — task 1003281, goal 1000072 / criterion
-             legibility-activity-by-role. A view per role over the same record:
-             the tasks this builder completed, the goals they created, and (in
-             the ideator view) every idea they filed with what became of it.
-             All three ledgers page server-side; profile.js fills them. -->
-        <section class="scroll" id="activity-scroll" aria-labelledby="activity-h">
-          <h2 id="activity-h" class="scroll__h">Activity, by craft</h2>
-          <p class="scroll__lede" id="activity-lede">What this builder has done, seen one craft at a time.</p>
-          <div id="activity-tabs"></div>
-          <div id="activity-body">
-            <div class="profile__placeholder" id="activity-placeholder">…</div>
-
-            <div id="activity-tasks-panel" hidden>
-              <h3 class="profile-act__h">Works completed</h3>
-              <div id="activity-tasks"></div>
-            </div>
-
-            <div id="activity-goals-panel" hidden>
-              <h3 class="profile-act__h">Goals created</h3>
-              <div id="activity-goals"></div>
-            </div>
-
-            <!-- The idea trail. Revealed only in the craft views where filing an
-                 idea is the work being shown (all + ideator) — see profile.js. -->
-            <div id="activity-ideas-panel" hidden>
-              <h3 class="profile-act__h">Ideas filed, and what became of them</h3>
-              <p class="scroll__lede">Every idea this builder captured — promoted, discarded, merged, or still open.</p>
-              <div id="activity-ideas"></div>
-            </div>
+          <div class="profile-groups" id="profile-groups" data-active="overview">
+
+            <!-- ============ overview: the portfolio, one screen ============ -->
+
+            <!-- Standing — avatar, name, rank badge, member-since. Filled by profile.js. -->
+            <section class="scroll" id="standing-scroll" aria-labelledby="standing-h" data-group="overview">
+              <h2 id="standing-h" class="sr-only">Standing</h2>
+              <div class="profile profile--ident" id="profile-head">
+                <div class="profile__placeholder">…</div>
+              </div>
+            </section>
+
+            <!-- By the numbers — credits, karma, works shipped. -->
+            <section class="scroll" id="numbers-scroll" aria-labelledby="numbers-h" data-group="overview">
+              <h2 id="numbers-h" class="scroll__h">By the numbers</h2>
+              <div class="stat-row" id="numbers-body">
+                <div class="stat-tile"><span class="stat-tile__label">Loading…</span></div>
+              </div>
+            </section>
+
+            <!-- Over time — the figures above, seen as a record (task 1003489).
+                 profile-charts.js fills the grid: works shipped and drachmae
+                 earned as cumulative step-lines, the craft mix as bars, and on
+                 the viewer's own profile their pace by week. Every chart has a
+                 table twin; signed out, the grid is one line saying why. -->
+            <section class="scroll" id="charts-scroll" aria-labelledby="charts-h" data-group="overview">
+              <h2 id="charts-h" class="scroll__h">Over time</h2>
+              <!-- The lookback control (task 1003489, owner request) — one filter
+                   row above the grid, scoping every chart (dataviz "date range
+                   first"). profile-charts.js fills it and re-draws on change. -->
+              <div id="charts-controls"></div>
+              <div class="pcharts" id="charts-grid">
+                <p class="pchart__note">…</p>
+              </div>
+            </section>
+
+            <!-- Achievements — the builder's earned shelf. -->
+            <section class="scroll scroll--bare" id="ach-scroll" aria-labelledby="ach-h" data-group="overview">
+              <h2 id="ach-h" class="scroll__h">Achievements</h2>
+              <div class="ach-grid" id="ach-grid">
+                <div class="profile__placeholder">…</div>
+              </div>
+            </section>
+
+            <!-- Cross-project record — hub-only (ADR 0171). profile.js reveals this
+                 only when the profile response carries a cross_project key; on a
+                 vanilla instance the key is absent and the section never renders. -->
+            <section class="scroll" id="xp-scroll" aria-labelledby="xp-h" data-group="overview" hidden>
+              <h2 id="xp-h" class="scroll__h">Cross-project record</h2>
+              <div id="xp-body"></div>
+            </section>
+
+            <!-- ============ works: the full shipped-works ledger ============ -->
+
+            <!-- Works — the full, server-paged ledger of everything this builder
+                 shipped (the owner's confirmed key; the old Overview "recent
+                 works" strip folded in here). A signed-in viewer gets the paged
+                 record; signed out, the page's public recent_ships stand in with
+                 a sign-in line. Activity (next key) is the SAME works seen one
+                 craft at a time, with goals and the idea trail. -->
+            <section class="scroll" id="works-scroll" aria-labelledby="works-h" data-group="works">
+              <h2 id="works-h" class="scroll__h">Works</h2>
+              <p class="scroll__lede" id="works-lede">Everything this builder has shipped. Seen one craft at a time, with goals and ideas, under <a href="#activity">activity</a>.</p>
+              <table class="ledger" id="works-table">
+                <thead>
+                  <tr>
+                    <th class="ledger__num">#</th>
+                    <th>Work</th>
+                    <th class="ledger__drachmae">Reward</th>
+                    <th class="ledger__date">Shipped</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr><td colspan="4">…</td></tr>
+                </tbody>
+              </table>
+              <div id="works-pager"></div>
+            </section>
+
+            <!-- ============ activity: the record, by craft ============ -->
+
+            <!-- Activity, by craft — task 1003281, goal 1000072 / criterion
+                 legibility-activity-by-role. A view per role over the same record:
+                 the tasks this builder completed, the goals they created, and (in
+                 the ideator view) every idea they filed with what became of it.
+                 All three ledgers page server-side; profile.js fills them. -->
+            <section class="scroll" id="activity-scroll" aria-labelledby="activity-h" data-group="activity">
+              <h2 id="activity-h" class="scroll__h">Activity, by craft</h2>
+              <p class="scroll__lede" id="activity-lede">What this builder has done, seen one craft at a time.</p>
+              <div id="activity-tabs"></div>
+              <div id="activity-body">
+                <div class="profile__placeholder" id="activity-placeholder">…</div>
+
+                <div id="activity-tasks-panel" hidden>
+                  <h3 class="profile-act__h">Works completed</h3>
+                  <div id="activity-tasks"></div>
+                </div>
+
+                <div id="activity-goals-panel" hidden>
+                  <h3 class="profile-act__h">Goals created</h3>
+                  <div id="activity-goals"></div>
+                </div>
+
+                <!-- The idea trail. Revealed only in the craft views where filing an
+                     idea is the work being shown (all + ideator) — see profile.js. -->
+                <div id="activity-ideas-panel" hidden>
+                  <h3 class="profile-act__h">Ideas filed, and what became of them</h3>
+                  <p class="scroll__lede">Every idea this builder captured — promoted, discarded, merged, or still open.</p>
+                  <div id="activity-ideas"></div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ============ connections: hub-only ============ -->
+
+            <!-- Connections — section 6 of the profile-page spec (R20, task
+                 1002296; ADR 0202). Hub-only, like the cross-project record:
+                 profile-connections.js reveals it only when the hub's connections
+                 API answers, so on an instance without platform-identity the
+                 routes are absent and the section never renders — and its rail
+                 key with it (profile.js watches this section's hidden attribute). -->
+            <section class="scroll" id="conn-scroll" aria-labelledby="conn-h" data-group="connections" hidden>
+              <h2 id="conn-h" class="scroll__h">Connections</h2>
+              <div id="conn-body"></div>
+            </section>
+
+            <!-- Reserved slots — connections, guilds, and actions (profile-page
+                 spec sections 6–8) mount here in later phases; keeping the order
+                 fixed now means the page is not re-laid-out twice (Decision 5).
+                 Section 6 landed above (task 1002296) as the connections key;
+                 7 and 8 are still to come, each as its own rail key. -->
           </div>
-        </section>
-
-        <!-- Connections — section 6 of the profile-page spec (R20, task
-             1002296; ADR 0202). Hub-only, like the cross-project record:
-             profile-connections.js reveals it only when the hub's connections
-             API answers, so on an instance without platform-identity the
-             routes are absent and the section never renders. -->
-        <section class="scroll" id="conn-scroll" aria-labelledby="conn-h" hidden>
-          <h2 id="conn-h" class="scroll__h">Connections</h2>
-          <div id="conn-body"></div>
-        </section>
-
-        <!-- Reserved slots — connections, guilds, and actions (profile-page
-             spec sections 6–8) mount here in later phases; keeping the order
-             fixed now means the page is not re-laid-out twice (Decision 5).
-             Section 6 landed above (task 1002296); 7 and 8 are still to come. -->
+        </div>
       </main>
 
       <footer class="app-foot" id="app-foot"></footer>
@@ -150,7 +194,8 @@
 <script src="/builders/dom-utils.js?v=2026-06-14-domutils"></script>
 <script src="/builders/brand-apply.js?v=2026-06-27-r75"></script>
 <!-- hall-kit (window.OTBKit) — profile.js renders ship-time task visuals through
-     its shared thumbnail helper (task 1003109), so it must load first. -->
+     its shared thumbnail helper (task 1003109) and builds the section rail with
+     it (task 1003489), so it must load first. -->
 <script src="/builders/hall-kit.js?v=2026-08-27-activity"></script>
 <!-- Connections (section 6). Loaded BEFORE profile.js so window.OTBConnections
      exists by the time renderProfile runs; profile.js guards on it anyway, so a
@@ -160,6 +205,10 @@
      window.OTBCanonical exists when renderProfile runs; profile.js guards on it,
      so a page that omits this script simply declares no canonical. -->
 <script src="/builders/profile-canonical.js?v=2026-08-29-p08"></script>
-<script src="/builders/profile.js?v=2026-08-27-activity"></script>
+<!-- The charts (task 1003489). Loaded BEFORE profile.js so window.OTBProfileCharts
+     exists when renderProfile runs; profile.js guards on it, so a page that
+     omits this script simply has no charts section content. -->
+<script src="/builders/profile-charts.js?v=2026-09-02-charts"></script>
+<script src="/builders/profile.js?v=2026-09-02-rail"></script>
 </body>
 </html>

package/modules/hall-ui/public/profile.js

@@ -1,6 +1,13 @@
 // modules/hall-ui/public/profile.js — the viewable builder profile page
 // (/builders/profile, task 1467, goal 25 "bx-identity").
 //
+// Since task 1003489 the page is three screens behind a section rail (the
+// settings idiom, OTBKit.makeSectionRail in switch mode): overview — identity,
+// figures, the charts (profile-charts.js), shelf, latest works, cross-project;
+// activity — the craft ledgers and the idea trail; connections — hub-only,
+// its rail key following the section's own reveal. Deep links are the key
+// (/profile?id=95#activity); the "#/…" overlay namespace passes through.
+//
 // A PUBLIC, shareable portfolio for one builder: rank, works shipped, standing
 // (drachmae + karma), achievements, and recent works. Reads the public route
 // GET /api/bongos/builders/:id/profile — every field it shows is already
@@ -125,45 +132,93 @@
     }).join('');
   }
 
-  // ---- render: recent works -----------------------------------------------
-
-  function renderWorks(ships) {
+  // ---- render: the Works ledger -------------------------------------------
+  //
+  // The owner's confirmed composition (task 1003489) made Works its own rail
+  // key: the full, server-paged ledger of everything this builder shipped, with
+  // the old Overview "recent works" strip folded in. A signed-in viewer pages
+  // the whole record from the activity route (any viewer, any builder); signed
+  // out, the page's PUBLIC recent_ships stand in with a sign-in line, so a
+  // stranger still sees the last few. Activity (the next key) is the SAME works
+  // seen one craft at a time, with goals and the idea trail — a different
+  // question, which is why it is a second key and not a duplicate.
+  const worksReward = (s) => window.OTBBranding?.taskCreditValue?.(s) ?? s.credits_reward;
+  function worksRowHtml(s) {
+    const summary = s.value_summary
+      ? `<span style="display:block;margin-top:2px;font-size:12px;color:var(--ink-faint)">${escapeHtml(s.value_summary)}</span>`
+      : '';
+    const visual = window.OTBKit && window.OTBKit.shipVisualThumbHtml ? window.OTBKit.shipVisualThumbHtml(s) : '';
+    return `<tr>
+        <td class="ledger__num">#${escapeHtml(String(s.id))}</td>
+        <td><a href="${taskHref(s.id)}">${escapeHtml(s.title || `Task ${s.id}`)}</a>${summary}${visual ? `<span style="display:block;margin-top:6px">${visual}</span>` : ''}</td>
+        <td class="ledger__drachmae">${fmtNum(worksReward(s))}</td>
+        <td class="ledger__date">${fmtDate(s.shipped_at)}</td>
+      </tr>`;
+  }
+  let worksBuilt = false;
+  function buildWorksLedger(builderId, signedIn, recentShips) {
     const tbody = $('#works-table tbody');
-    const lede = $('#works-lede');
     if (!tbody) return;
-    // Every row here is a shipped task, so one header serves them all — but on a
-    // cost-plus-only instance the figure is still an unpaid estimate, so the
-    // label must keep its "Est." qualifier (ADR 0146).
+    // One header serves every row, but the figure stays an estimate on a
+    // cost-plus instance, so the label keeps its "Est." qualifier (ADR 0146).
     const rewardTh = $('#works-table thead .ledger__drachmae');
     if (rewardTh) {
       rewardTh.textContent = window.OTBBranding?.taskCreditLabel?.({ status: 'shipped' }, { caps: true })
         ?? (curLabel(true) + ' Est.');
     }
-    const list = Array.isArray(ships) ? ships : [];
-    if (!list.length) {
-      tbody.innerHTML = `<tr><td colspan="4" class="ledger__empty">Nothing shipped yet.</td></tr>`;
-      if (lede) lede.hidden = true;
+    const empty = (msg) => { tbody.innerHTML = `<tr><td colspan="4" class="ledger__empty">${escapeHtml(msg)}</td></tr>`; };
+    const pagerMount = $('#works-pager');
+
+    // Signed out: no activity route, so the public recent_ships ARE the ledger,
+    // with a line pointing at the full record behind sign-in.
+    if (!signedIn) {
+      if (pagerMount) pagerMount.innerHTML = '';
+      const list = Array.isArray(recentShips) ? recentShips : [];
+      if (!list.length) { empty('Nothing shipped yet.'); return; }
+      tbody.innerHTML = list.map(worksRowHtml).join('')
+        + `<tr><td colspan="4" class="ledger__empty"><a href="${API}/auth/web/start">Sign in</a> to see the full record.</td></tr>`;
       return;
     }
-    tbody.innerHTML = list.map((s) => {
-      const reward = window.OTBBranding?.taskCreditValue?.(s) ?? s.credits_reward;
-      const summary = s.value_summary
-        ? `<span style="display:block;margin-top:2px;font-size:12px;color:var(--ink-faint)">${escapeHtml(s.value_summary)}</span>`
-        : '';
-      // task 1003109: the optional ship-time visual, as a thumbnail beside the
-      // summary it restates. '' when the task has none — which is most of them,
-      // and never reads as an omission.
-      const visual = window.OTBKit && window.OTBKit.shipVisualThumbHtml
-        ? window.OTBKit.shipVisualThumbHtml(s)
-        : '';
-      return `
-        <tr>
-          <td class="ledger__num">#${escapeHtml(String(s.id))}</td>
-          <td><a href="/task/${encodeURIComponent(s.id)}">${escapeHtml(s.title || `Task ${s.id}`)}</a>${summary}${visual ? `<span style="display:block;margin-top:6px">${visual}</span>` : ''}</td>
-          <td class="ledger__drachmae">${fmtNum(reward)}</td>
-          <td class="ledger__date">${fmtDate(s.shipped_at)}</td>
-        </tr>`;
-    }).join('');
+
+    if (worksBuilt) return;
+    worksBuilt = true;
+    const kit = window.OTBKit;
+    // Without the kit's pager helpers a single unpaged page beats nothing (the
+    // page still works if hall-kit failed to load, or an older kit lacks the
+    // server-pager helpers), the same graceful-degrade the charts take.
+    if (!kit || typeof kit.pagerBarHtml !== 'function' || !pagerMount) {
+      (async () => {
+        try {
+          const res = await api.request('GET', `${API}/builders/${encodeURIComponent(builderId)}/activity?section=tasks&limit=20&offset=0`);
+          const rows = (res.ok && res.data.rows) || [];
+          if (!rows.length) { empty('Nothing shipped yet.'); return; }
+          tbody.innerHTML = rows.map(worksRowHtml).join('');
+        } catch (err) { console.error('[profile] works ledger failed', err); empty('Could not load the works.'); }
+      })();
+      return;
+    }
+    pagerMount.innerHTML = kit.pagerBarHtml('works', { label: 'works' });
+    const pager = kit.makePager('works', 'otb.profile.worksPerPage', { defaultPerPage: 10, minPerPage: 10 });
+    let inFlight = 0;
+    async function load() {
+      const seq = ++inFlight;
+      try {
+        const res = await api.request('GET', `${API}/builders/${encodeURIComponent(builderId)}/activity`
+          + `?section=tasks&limit=${pager.perPage}&offset=${kit.pageOffset(pager)}`);
+        if (seq !== inFlight) return;
+        if (!res.ok) throw new Error(`works → ${res.status}`);
+        const rows = res.data.rows || [];
+        const total = Number(res.data.total) || 0;
+        if (kit.renderServerPage(pager, total, rows.length)) { load(); return; }
+        tbody.innerHTML = rows.length ? rows.map(worksRowHtml).join('') : `<tr><td colspan="4" class="ledger__empty">Nothing shipped yet.</td></tr>`;
+      } catch (err) {
+        if (seq !== inFlight) return;
+        console.error('[profile] works ledger failed', err);
+        empty('Could not load the works.');
+      }
+    }
+    kit.wirePager(pager, load);
+    load();
   }
 
   // ---- render: cross-project record (hub-only, ADR 0171 / task 1002280) ----
@@ -514,6 +569,76 @@
     activity.show(activity.active());
   }
 
+  // ---- the section rail (task 1003489) ------------------------------------------
+  //
+  // Settings' idiom, borrowed whole (settings.js wireRail): one group of
+  // sections shows at a time behind a left rail in switch mode; the sheet does
+  // the showing (.profile-groups[data-active]) and a section's own [hidden]
+  // still wins, so the cross-project and connections reveal logic is
+  // untouched. The connections KEY follows the section: the rail lists it only
+  // while #conn-scroll is revealed, so an instance without the hub never shows
+  // a key that opens an empty screen.
+  const RAIL_ITEMS = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'works', label: 'Works' },
+    { id: 'activity', label: 'Activity' },
+    { id: 'connections', label: 'Connections' },
+  ];
+  const RAIL_GROUPS = RAIL_ITEMS.map((i) => i.id);
+  let rail = null;
+
+  function railItems() {
+    const conn = $('#conn-scroll');
+    return RAIL_ITEMS.filter((i) => i.id !== 'connections' || (conn && !conn.hidden));
+  }
+
+  function activateGroup(group, opts) {
+    if (!RAIL_GROUPS.includes(group)) return;
+    const groups = $('#profile-groups');
+    if (!groups) return;
+    groups.dataset.active = group;
+    rail?.activate(group);
+    if (!opts || opts.scroll !== false) window.scrollTo({ top: 0 });
+  }
+
+  // The hash is a key (#activity) or nothing of ours; "#/…" is the overlay
+  // namespace and passes through. A key whose section is hidden (connections
+  // without the hub) lands on the overview rather than an empty screen.
+  function applyHash() {
+    const id = String(window.location.hash || '').replace(/^#/, '');
+    if (!id || id.startsWith('/')) return;
+    const open = railItems().some((i) => i.id === id);
+    activateGroup(open ? id : 'overview', { scroll: false });
+  }
+
+  function wireRail() {
+    const mount = $('#profile-rail');
+    if (!mount || !window.OTBKit || !window.OTBKit.makeSectionRail) return;
+    rail = window.OTBKit.makeSectionRail({
+      mount,
+      items: railItems(),
+      mode: 'switch',
+      onSwitch: (key) => {
+        activateGroup(key);
+        // Reflect the key in the URL so the screen is shareable; replaceState
+        // keeps Back for leaving the page, not retracing rail clicks.
+        history.replaceState(null, '', window.location.pathname + window.location.search + `#${key}`);
+      },
+    });
+    rail.activate('overview');
+    applyHash();
+    window.addEventListener('hashchange', applyHash);
+    // profile-connections.js reveals #conn-scroll on its own schedule (a hub
+    // read); the key appears when the section does.
+    const conn = $('#conn-scroll');
+    if (conn && typeof MutationObserver === 'function') {
+      new MutationObserver(() => {
+        rail.refresh(railItems());
+        rail.activate($('#profile-groups')?.dataset.active || 'overview');
+      }).observe(conn, { attributes: true, attributeFilter: ['hidden'] });
+    }
+  }
+
   // ---- states -------------------------------------------------------------
 
   function showMessage(text) {
@@ -528,9 +653,12 @@
     showMessage(`${name} — ${rankLabel(normalizeRank(builder.rank))} · ${fmtNum(shipped)} work${shipped === 1 ? '' : 's'} shipped`);
     renderHead(builder);
     renderNumbers(data.shipped_count, data.achievements);
+    // The charts (task 1003489) read the activity route, so they need the same
+    // session the ledgers do; on the viewer's own profile they add the pace.
+    if (window.OTBProfileCharts) window.OTBProfileCharts.render({ api, API, builderId: builder.id, selfId, signedIn: selfId != null });
     renderCrossProject(data, selfId);
     renderAchievements(data.achievements);
-    renderWorks(data.recent_ships);
+    buildWorksLedger(builder.id, selfId != null, data.recent_ships);
     // The activity log needs a session (private goals + the idea trail), so it
     // keys off whether /me resolved — the same signal the self-detect uses.
     renderActivity(builder.id, selfId != null);
@@ -567,6 +695,9 @@
     const xp = $('#xp-scroll'); if (xp) xp.hidden = true;
     const act = $('#activity-scroll'); if (act) act.hidden = true;
     const conn = $('#conn-scroll'); if (conn) conn.hidden = true;
+    const charts = $('#charts-scroll'); if (charts) charts.hidden = true;
+    const railEl = $('#profile-rail'); if (railEl) railEl.hidden = true;
+    activateGroup('overview', { scroll: false });
   }
 
   async function fetchProfile(id, selfId) {
@@ -576,6 +707,7 @@
       // There is no builder, so there is no activity to log — hide the section
       // rather than leaving its loading dots on a page about nobody.
       const act = $('#activity-scroll'); if (act) act.hidden = true;
+      const charts = $('#charts-scroll'); if (charts) charts.hidden = true;
       return;
     }
     if (!res.ok) throw new Error(`profile → ${res.status}`);
@@ -598,6 +730,7 @@
   }
 
   async function load() {
+    wireRail();
     const idParam = new URLSearchParams(location.search).get('id');
     try {
       if (idParam) {