@bongos/core 1.24.26 → 1.24.28

package/modules/hall-ui/public/settings.css

@@ -157,138 +157,8 @@ select.voices__select { min-width: 140px; }
 .settings-btn--discord { background: #5865F2; border-color: #4853c4; color: #ffffff; }
 .settings-btn--discord:hover:not(:disabled) { background: #4853c4; border-color: #4853c4; color: #ffffff; }
 
-/* Specialities panel (task 1003855, ADR 0296). A speciality is a named bundle of
-   knowledge and terms under a craft; this styles the list, the train form and the
-   create form. Tokens only — no literal colours, so light/dark follow the page. */
-.speciality-craft {
-  font-size: 0.78rem;
-  text-transform: lowercase;
-  opacity: 0.72;
-  margin-left: 0.4rem;
-}
-.speciality-badge {
-  font-size: 0.7rem;
-  padding: 0.05rem 0.4rem;
-  border-radius: 0.5rem;
-  margin-left: 0.4rem;
-  border: 1px solid currentColor;
-}
-.speciality-counts { opacity: 0.82; }
-.speciality-card { flex-wrap: wrap; }
-.speciality-train,
-.speciality-create {
-  flex-basis: 100%;
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--rule, rgba(128, 128, 128, 0.25));
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-.speciality-create__h { margin: 0; font-size: 0.95rem; }
-.speciality-field { display: flex; flex-direction: column; gap: 0.25rem; }
-.speciality-field > span { font-size: 0.85rem; }
-.speciality-field small { display: block; opacity: 0.7; font-weight: normal; }
-.speciality-field input[type='text'],
-.speciality-field select,
-.speciality-field textarea {
-  width: 100%;
-  box-sizing: border-box;
-}
-/* The checkbox row reads as one sentence, so it runs inline rather than stacked. */
-.speciality-field--check { flex-direction: row; align-items: flex-start; gap: 0.5rem; }
-.speciality-field--check input { margin-top: 0.2rem; }
-.speciality-actions { display: flex; gap: 0.5rem; }
-/* What a speciality OFFERS (task 1004404): the owner's pick-list of this
-   instance's skills, each with its plain line. Sixty-odd rows, so the list
-   scrolls inside its own box rather than pushing the form's buttons off-screen;
-   the reading lines keep the measure. */
-.speciality-field input[type='search'] { width: 100%; box-sizing: border-box; }
-.speciality-offer,
-.speciality-offer-box { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
-.speciality-offer { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
-.speciality-offer > *, .speciality-offer-box > * { max-width: var(--measure); }
-.speciality-offer-box > summary { cursor: pointer; font-size: 0.85rem; min-height: 24px; padding-block: 2px; box-sizing: border-box; }
-.speciality-offer-box > summary small { opacity: 0.7; }
-.speciality-offer__choices, #speciality-create-skills { display: flex; flex-direction: column; gap: 0.6rem; }
-.speciality-offer__list {
-  list-style: none;
-  margin: 0;
-  padding: 0 0.25rem 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-height: 24rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-.speciality-offer__list li[hidden] { display: none; }
-.speciality-offer__list strong { font-family: var(--font-mono); font-weight: 600; }
-.speciality-offer__list .speciality-field--check > span { font-size: 0.85rem; line-height: 1.45; }
-/* The adopted contract, shown in full before "Use this" — another builder's prose
-   reaching your sessions is the one thing here that must never be folded away. */
-.speciality-contract { flex-basis: 100%; margin-top: 0.5rem; font-size: 0.85rem; }
-/* 24px tall: the panel was never revealed until task 1004073, so the kit had
-   never measured this toggle; it came back 21px. */
-.speciality-contract > summary { cursor: pointer; opacity: 0.85; min-height: 24px; padding-block: 2px; box-sizing: border-box; }
-.speciality-contract__body {
-  white-space: pre-wrap;
-  margin: 0.4rem 0 0;
-  padding: 0.5rem 0.65rem;
-  border-left: 2px solid var(--rule, rgba(128, 128, 128, 0.35));
-  border-radius: 0;
-  font-family: inherit;
-  opacity: 0.92;
-}
-/* The skills walkthrough (task 1004073, ADR 0310 §3): one offered skill at a
-   time, three answers as a definition list, then a decision. It sits inside the
-   card like the train form, so it inherits the card's ground in both modes. */
-.skill-walk {
-  flex-basis: 100%;
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--rule);
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-/* The measure caps the reading lines, never the section: a capped flex-basis
-   lets the section fit beside the card's actions instead of wrapping under them. */
-.skill-walk > * { max-width: var(--measure); }
-.skill-walk__progress { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
-.skill-walk__name { margin: 0; font-family: var(--font-mono); font-size: 1rem; color: var(--ink); }
-.skill-walk__facts { margin: 0; display: grid; gap: 0.2rem 0; }
-.skill-walk__facts dt { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.4rem; }
-.skill-walk__facts dt:first-child { margin-top: 0; }
-.skill-walk__facts dd { margin: 0; color: var(--ink); line-height: 1.5; }
-.skill-walk__note { font-size: 0.8rem; }
-/* "Leave it off" and "Turn it on" are the panel family's plain pill at EQUAL
-   weight: the default is off, so the page must not lean on the reader toward on.
-   Only "Save my choices" takes the accent. A decision already made reads through
-   aria-pressed when the person steps Back to it. */
-.skill-walk__actions { flex-wrap: wrap; }
-.skill-walk__actions .pbtn[aria-pressed="true"] { border-color: var(--ink-soft); }
-.skill-walk__recap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
-.skill-walk__recap li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
-.skill-walk__recap .prow__hint { flex-basis: 100%; margin: 0; }
-.skill-walk__recap strong { font-family: var(--font-mono); font-weight: 600; }
-/* "Finish later" is a way out, not a choice about a skill, so it reads as a quiet
-   link below the decision rather than a third button beside it. */
-.skill-walk__later {
-  align-self: flex-start;
-  background: none;
-  border: 0;
-  padding: 0 0.25rem;
-  margin-inline-start: -0.25rem;
-  min-height: 24px;
-  font: inherit;
-  font-size: 0.8rem;
-  color: var(--ink-soft);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  cursor: pointer;
-}
-.skill-walk__later:hover { color: var(--ink); }
+/* The specialities panel's rules moved to speciality-tools.css (task 1005052),
+   which Settings links right after this sheet and My agents links too. */
 
 /* ---- Software update (task 1004296) -------------------------------------- */
 /* A version is read digit by digit and compared against another, so it takes the mono

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

@@ -18,6 +18,8 @@
        has — the rail layout, the group head, the token ladder, the voices grid. -->
   <link rel="stylesheet" href="/builders/panel.css">
   <link rel="stylesheet" href="/builders/settings.css">
+  <!-- the speciality tools sheet (task 1005052), shared with My agents -->
+  <link rel="stylesheet" href="/builders/speciality-tools.css">
 </head>
 <body data-page="settings" data-page-title="Settings">
 
@@ -305,53 +307,9 @@
               <div id="speciality-suggestions"></div>
               <ul class="prows" id="specialities-rows"></ul>
 
-              <form id="speciality-create" class="speciality-create">
-                <h3 class="speciality-create__h">Create one</h3>
-                <label class="speciality-field">
-                  <span>Name</span>
-                  <input type="text" name="name" maxlength="80" required placeholder="Economics" />
-                </label>
-                <label class="speciality-field">
-                  <span>Role it sits under</span>
-                  <select name="discipline" required>
-                    <option value="">Pick one…</option>
-                    <option value="engineer">Engineer</option>
-                    <option value="ideator">Ideator</option>
-                    <option value="artist">Artist</option>
-                    <option value="ui">UI design</option>
-                  </select>
-                </label>
-                <label class="speciality-field">
-                  <span>Summary <small>(optional)</small></span>
-                  <input type="text" name="summary" maxlength="500" placeholder="Markets, incentives, and how to price them." />
-                </label>
-                <label class="speciality-field">
-                  <span>How Claude should engage you in it <small>(optional)</small></span>
-                  <textarea name="contract_md" rows="4" maxlength="4000" placeholder="Argue from mechanism, not vibes. Always name the assumption a number rests on."></textarea>
-                </label>
-                <label class="speciality-field">
-                  <span>Who can use it</span>
-                  <select name="visibility">
-                    <option value="private">Only me</option>
-                    <option value="project">Anyone in the owning project</option>
-                    <option value="public">Anyone on this instance</option>
-                  </select>
-                </label>
-                <label class="speciality-field speciality-field--check">
-                  <input type="checkbox" name="sellable" />
-                  <span>
-                    May be offered for sale later
-                    <small>Records your decision only — there is no marketplace yet, and nothing is listed anywhere.</small>
-                  </span>
-                </label>
-                <details id="speciality-create-offer" class="speciality-offer-box">
-                  <summary>Skills it offers <small>(optional)</small></summary>
-                  <div id="speciality-create-skills"><p class="hall-loading hall-loading--inline" role="status">Loading this project’s skills…</p></div>
-                </details>
-                <div class="speciality-actions">
-                  <button type="submit" class="btn">Create speciality</button>
-                </div>
-              </form>
+              <!-- The create form is rendered by speciality-tools.js (task 1005052), the
+                   one copy Settings and My agents share; this is only its host. -->
+              <form id="speciality-create" class="speciality-create"></form>
 
               <p class="settings-status" id="specialities-status" role="status" aria-live="polite"></p>
             </section>
@@ -475,9 +433,9 @@
             <!-- SOFTWARE UPDATE — this project's version, the newest release its update
                  channel allows, and what the versions between them carry (task 1004296).
                  Like a phone's Software Update screen: every builder reads it; the Update
-                 button is drawn only for those the upgrade door lets through, and it LEADS
-                 to that door (the two-step confirm and auto-rollback of ADR 0293) — the
-                 act never happens on this page. Rendered by settings-software-update.js
+                 button is drawn only for those the upgrade door lets through, and it runs
+                 the Update pill's in-place flow (update-pill.js, task 1005041): the act is
+                 still the door's, with its auto-rollback (ADR 0293). Rendered by settings-software-update.js
                  from GET /api/bongos/software-update, read only when this group opens:
                  an update's notes come out of a package download. -->
             <section class="scroll" id="software-update-scroll" aria-labelledby="software-update-h" data-group="update" hidden>
@@ -514,7 +472,7 @@
 <script src="/builders/dom-utils.js?v=2026-10-25-escape"></script>
 <script src="/builders/shell-trail.js?v=2026-10-08-city-tab"></script>
 <script src="/builders/craft-mode.js?v=2026-10-30-market-watch"></script>
-<script src="/builders/shell.js?v=2026-10-30-github-chip"></script>
+<script src="/builders/shell.js?v=2026-11-03-update-pill"></script>
 <!-- jump palette (Ctrl/Cmd-K). Optional by design: without it the shell's slot stays hidden. -->
 <script src="/builders/palette.js" defer></script>
 <!-- shared component kit (window.OTBKit) — section rail (task 2166). -->
@@ -534,13 +492,17 @@
      the same precedent and for the same reason — settings.js is against the
      1500-line ratchet, and this panel shares nothing with the rest of the page. -->
 <script src="/builders/settings-interaction.js?v=2026-10-17-laws"></script>
-<script src="/builders/settings-specialities.js?v=2026-09-17-specialities"></script>
+<!-- task 1005052: the speciality tools are ONE component Settings and My agents
+     both mount (it was settings-specialities.js). Task 1005044 removes this mount. -->
+<script src="/builders/speciality-tools.js?v=2026-11-03-shared"></script>
 <!-- task 1002518: the card-richness ladder. Own file on the same precedent —
      the panel grew from one switch to a rung picker with a derived default, and
      settings.js is against the 1500-line ratchet. -->
 <script src="/builders/settings-render.js?v=2026-09-16-render-levels"></script>
 <!-- task 1004296: Settings → Software update. Own file on the same precedent. -->
-<script src="/builders/settings-software-update.js?v=2026-10-18-history"></script>
+<!-- the Update pill's flow, which the panel's Update button runs in place (task 1005041) -->
+<script src="/builders/update-pill.js?v=2026-11-03-pill"></script>
+<script src="/builders/settings-software-update.js?v=2026-11-03-pill"></script>
 <!-- task 1004501: Settings → Your Autobongos runner. Own file on the same precedent. -->
 <script src="/builders/settings-autobongos.js?v=2026-10-01-autobongos"></script>
 <!-- task 1003793: Settings → Module install reports. Own file on the same precedent. -->

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

@@ -751,8 +751,11 @@
     history.replaceState(null, '', window.location.pathname + rest + window.location.hash);
   }
 
-  // task 1004045 — the core-update banner. The owner's ask: "a popup banner at the
-  // top of every owners builders hall that a core update has been released".
+  // task 1004045 → task 1005041 — the Update pill. The owner's first ask was a banner at the top
+  // of every owner's hall when a core update is released; the second (2026-11-03) was that it
+  // was "way too obstructing and not obvious what to do", and should feel like the Claude
+  // app's "restart to update". So the news is a quiet pill in the top bar now, and the
+  // update is taken in place from it: update-pill.js owns all of it, this only asks.
   //
   // WHY THE SERVER IS ASKED RATHER THAN TOLD. The version this box runs is known
   // here, but what is PUBLISHED is not, and the fact lives behind an outbound
@@ -764,6 +767,11 @@
   // ASKED ONCE PER PAGE LOAD. applyAccess runs on every settle (the /me probe, a
   // page's own report), and re-firing a network call on each would be a request per
   // nav interaction for a fact with a six-hour life on the server.
+  //
+  // SAID FROM AN ANSWER, OR FROM AN UPDATE ALREADY UNDER WAY. The pill script loads only
+  // when the answer has something to say (behind, held, or just moved), or when this
+  // browser remembers an update it started: mid-restart the read itself may fail, and the
+  // pill must still follow the owner from page to page.
   var coreUpdateAsked = false;
   function maybeRenderCoreUpdate() {
     if (coreUpdateAsked) return;
@@ -771,10 +779,20 @@
     if (!perms || perms['core.pin.move'] !== true) return;
     coreUpdateAsked = true;
     api.request('GET', '/api/bongos/core-update').then(function (res) {
-      if (!res || res.status !== 200 || !res.data) return;
-      if (res.data.update) renderCoreUpdateBanner(res.data.update, res.data.held);
-      if (res.data.moved) renderCoreMoveNotice(res.data.moved); // task 1004731: loads core-move-notice.js, which draws it
-    }, function () { /* fail-soft: no banner is the correct answer to no answer */ });
+      mountUpdatePill(res && res.status === 200 && res.data ? res.data : null);
+    }, function () { mountUpdatePill(null); });
+  }
+  function updateUnderWay() {
+    try { return !!(window.localStorage && window.localStorage.getItem('bongos.update.run')); } catch (e) { return false; }
+  }
+  function mountUpdatePill(data) {
+    var u = data && data.update;
+    var news = !!(u && u.reading === 'ok' && u.behind) || !!(data && data.held);
+    if (news || updateUnderWay()) {
+      var go = function () { if (window.OTBUpdatePill) window.OTBUpdatePill.mount(data, { api: api }); };
+      if (window.OTBUpdatePill) go(); else loadHallScript('update-pill.js', go);
+    }
+    if (data && data.moved) renderCoreMoveNotice(data.moved); // task 1004731: loads core-move-notice.js, which draws it
   }
   // One hall script on demand, stamped with the shell's own ?v= (task 1004996 made it one helper).
   function loadHallScript(file, onload, onerror) {
@@ -785,7 +803,7 @@
     head.appendChild(tag);
   }
   function renderCoreMoveNotice(moved) {
-    loadHallScript('core-move-notice.js', function () { if (window.CoreMoveNotice) window.CoreMoveNotice.render(moved, { api: api, href: SOFTWARE_UPDATE_HREF }); });
+    loadHallScript('core-move-notice.js', function () { if (window.CoreMoveNotice) window.CoreMoveNotice.render(moved, { api: api, href: '/settings#software-update' }); });
   }
   var githubChipAsked = false; // task 1004996: the Link GitHub chip (github-chip.js), asked once a page
   function loadGithubChip(builder) {
@@ -795,72 +813,6 @@
     loadHallScript('github-chip.js', function () { if (window.OTBGithubChip) window.OTBGithubChip.mount({ api: api, builder: builder, hub: hub }); });
   }
 
-  // Where the banner's Upgrade goes (task 1004296). The platform's hall runs the deploy
-  // door itself, so there it is /deploy. Every other hall — a hosted project, a
-  // self-hosted instance — takes its update from Settings → Software update, which says
-  // what the update carries and, on a hosted project, hands the owner to the hub's door
-  // for this project (ADR 0339 D3). The banner no longer links off-site itself.
-  var SOFTWARE_UPDATE_HREF = '/settings#software-update';
-
-  // SAY NOTHING WHEN THERE IS NOTHING TO SAY. `behind` is false both when the box
-  // is current AND when the registry could not be read; `reading` separates them,
-  // and neither renders. A banner is a claim about being out of date, and a wrong
-  // one on a project that is actually current is worse than silence.
-  function renderCoreUpdateBanner(update, held) {
-    if (!update || update.reading !== 'ok' || !update.behind || !update.latest) return;
-    // A dismissal is remembered PER VERSION, not forever: the next release is new
-    // news and must re-announce itself, or the surface is dead after one click.
-    // localStorage throws in a private window and is absent in the unit tests' bare
-    // vm context, so every touch is guarded and its loss only costs the memory.
-    try {
-      var seen = window.localStorage && window.localStorage.getItem('bongos.coreUpdate.dismissed');
-      if (seen && seen === update.latest) return;
-    } catch (e) { /* no storage: always show */ }
-    var topbar = document.getElementById('app-topbar');
-    if (!topbar) return;
-    var el = document.createElement('div');
-    el.className = 'core-update-notice';
-    el.id = 'core-update-notice';
-    el.setAttribute('role', 'status');
-    // The action goes where the update can actually be taken. The deploy door is the
-    // provisioning module's, and a hosted project does NOT run that module (probed:
-    // /api/bongos/provisioning/health is 404 on a tenant, 200 on the platform) — so on
-    // those it goes to Settings → Software update (SOFTWARE_UPDATE_HREF above).
-    // NOT A LINK TO THE PAGE YOU ARE ALREADY ON (task 1004145). This reads as the action
-    // button — it is labelled with the verb and styled like one — but it is a plain
-    // navigation to /deploy. On /deploy itself that is a no-op, and the owner who
-    // pressed it there reasonably reported "I clicked update, but I didn't see anything
-    // happen": nothing had, and nothing had been asked for. The control is on that page
-    // already, so on it the banner informs and points, and does not pretend to act.
-    // The same rule on Settings → Software update: that panel IS the control there.
-    var here = window.location ? String(window.location.pathname || '').replace(/\/+$/, '') : '';
-    var onDeploy = here === '/deploy';
-    var onUpdatePanel = here === '/settings' && String(window.location.hash || '') === '#software-update';
-    var action = moduleOn('provisioning')
-      ? (onDeploy
-        ? '<span class="core-update-notice__hint">Use the control below to take it.</span>'
-        : '<a class="core-update-notice__action" href="/deploy">Upgrade</a>')
-      : (onUpdatePanel
-        ? '<span class="core-update-notice__hint">Its details are below.</span>'
-        : '<a class="core-update-notice__action" href="' + SOFTWARE_UPDATE_HREF + '">Upgrade</a>');
-    // task 1004730: the newest version already failed here and was rolled back. Say so, never
-    // "available" with a button to take it again; Software update carries the full sentence.
-    var hold = held && held.version === update.latest ? held : null;
-    el.innerHTML = (hold
-      ? '<span>Core <strong>' + esc(hold.version) + '</strong> was tried on this project and rolled back. It is still on ' +
-        esc(hold.still_on) + ' and working.</span><a class="core-update-notice__action" href="' + SOFTWARE_UPDATE_HREF + '">Details</a>'
-      : '<span>Core <strong>' + esc(update.latest) + '</strong> is available — this project runs ' +
-        esc(update.running || 'an unknown version') + '.</span>' + action) +
-      '<button type="button" class="core-update-notice__close" aria-label="Dismiss">×</button>';
-    el.querySelector('.core-update-notice__close').addEventListener('click', function () {
-      try {
-        if (window.localStorage) window.localStorage.setItem('bongos.coreUpdate.dismissed', update.latest);
-      } catch (e) { /* dismissal is best-effort */ }
-      el.remove();
-    });
-    topbar.insertAdjacentElement('afterend', el);
-  }
-
   // task 1003303: the skip link, rendered once here rather than pasted into 27
   // heads. The hall had none, which is a platform floor (DESIGN.md
   // §Accessibility Floors) and, with the sidebar first in the DOM, meant a

package/modules/hall-ui/public/speciality-tools.css

@@ -0,0 +1,140 @@
+/* speciality-tools.css — the SPECIALITY TOOLS sheet (task 1005052): the structural
+   rules of the one component Settings and My agents both mount
+   (speciality-tools.js) — the card, the train, offer and create forms, the
+   instructions block and the skills walkthrough. Moved out of settings.css
+   verbatim, so Settings draws exactly as it did; each page sheet adds its own
+   look on top (Settings: panel.css, linked before this; My agents: the `.ma-know`
+   skin in my-agents.css, linked after). */
+
+/* Specialities panel (task 1003855, ADR 0296). A speciality is a named bundle of
+   knowledge and terms under a craft; this styles the list, the train form and the
+   create form. Tokens only — no literal colours, so light/dark follow the page. */
+.speciality-craft {
+  font-size: 0.78rem;
+  text-transform: lowercase;
+  opacity: 0.72;
+  margin-left: 0.4rem;
+}
+.speciality-badge {
+  font-size: 0.7rem;
+  padding: 0.05rem 0.4rem;
+  border-radius: 0.5rem;
+  margin-left: 0.4rem;
+  border: 1px solid currentColor;
+}
+.speciality-counts { opacity: 0.82; }
+.speciality-card { flex-wrap: wrap; }
+.speciality-train,
+.speciality-create {
+  flex-basis: 100%;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--rule, rgba(128, 128, 128, 0.25));
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.speciality-create__h { margin: 0; font-size: 0.95rem; }
+.speciality-field { display: flex; flex-direction: column; gap: 0.25rem; }
+.speciality-field > span { font-size: 0.85rem; }
+.speciality-field small { display: block; opacity: 0.7; font-weight: normal; }
+.speciality-field input[type='text'],
+.speciality-field select,
+.speciality-field textarea {
+  width: 100%;
+  box-sizing: border-box;
+}
+/* The checkbox row reads as one sentence, so it runs inline rather than stacked. */
+.speciality-field--check { flex-direction: row; align-items: flex-start; gap: 0.5rem; }
+.speciality-field--check input { margin-top: 0.2rem; }
+.speciality-actions { display: flex; gap: 0.5rem; }
+/* What a speciality OFFERS (task 1004404): the owner's pick-list of this
+   instance's skills, each with its plain line. Sixty-odd rows, so the list
+   scrolls inside its own box rather than pushing the form's buttons off-screen;
+   the reading lines keep the measure. */
+.speciality-field input[type='search'] { width: 100%; box-sizing: border-box; }
+.speciality-offer,
+.speciality-offer-box { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
+.speciality-offer { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
+.speciality-offer > *, .speciality-offer-box > * { max-width: var(--measure); }
+.speciality-offer-box > summary { cursor: pointer; font-size: 0.85rem; min-height: 24px; padding-block: 2px; box-sizing: border-box; }
+.speciality-offer-box > summary small { opacity: 0.7; }
+.speciality-offer__choices, #speciality-create-skills { display: flex; flex-direction: column; gap: 0.6rem; }
+.speciality-offer__list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0.25rem 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 24rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.speciality-offer__list li[hidden] { display: none; }
+.speciality-offer__list strong { font-family: var(--font-mono); font-weight: 600; }
+.speciality-offer__list .speciality-field--check > span { font-size: 0.85rem; line-height: 1.45; }
+/* The adopted contract, shown in full before "Use this" — another builder's prose
+   reaching your sessions is the one thing here that must never be folded away. */
+.speciality-contract { flex-basis: 100%; margin-top: 0.5rem; font-size: 0.85rem; }
+/* 24px tall: the panel was never revealed until task 1004073, so the kit had
+   never measured this toggle; it came back 21px. */
+.speciality-contract > summary { cursor: pointer; opacity: 0.85; min-height: 24px; padding-block: 2px; box-sizing: border-box; }
+.speciality-contract__body {
+  white-space: pre-wrap;
+  margin: 0.4rem 0 0;
+  padding: 0.5rem 0.65rem;
+  border-left: 2px solid var(--rule, rgba(128, 128, 128, 0.35));
+  border-radius: 0;
+  font-family: inherit;
+  opacity: 0.92;
+}
+/* The skills walkthrough (task 1004073, ADR 0310 §3): one offered skill at a
+   time, three answers as a definition list, then a decision. It sits inside the
+   card like the train form, so it inherits the card's ground in both modes. */
+.skill-walk {
+  flex-basis: 100%;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--rule);
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+/* The measure caps the reading lines, never the section: a capped flex-basis
+   lets the section fit beside the card's actions instead of wrapping under them. */
+.skill-walk > * { max-width: var(--measure); }
+.skill-walk__progress { margin: 0; font-size: 0.8rem; color: var(--ink-soft); }
+.skill-walk__name { margin: 0; font-family: var(--font-mono); font-size: 1rem; color: var(--ink); }
+.skill-walk__facts { margin: 0; display: grid; gap: 0.2rem 0; }
+.skill-walk__facts dt { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.4rem; }
+.skill-walk__facts dt:first-child { margin-top: 0; }
+.skill-walk__facts dd { margin: 0; color: var(--ink); line-height: 1.5; }
+.skill-walk__note { font-size: 0.8rem; }
+/* "Leave it off" and "Turn it on" are the panel family's plain pill at EQUAL
+   weight: the default is off, so the page must not lean on the reader toward on.
+   Only "Save my choices" takes the accent. A decision already made reads through
+   aria-pressed when the person steps Back to it. */
+.skill-walk__actions { flex-wrap: wrap; }
+.skill-walk__actions .pbtn[aria-pressed="true"] { border-color: var(--ink-soft); }
+.skill-walk__recap { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
+.skill-walk__recap li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
+.skill-walk__recap .prow__hint { flex-basis: 100%; margin: 0; }
+.skill-walk__recap strong { font-family: var(--font-mono); font-weight: 600; }
+/* "Finish later" is a way out, not a choice about a skill, so it reads as a quiet
+   link below the decision rather than a third button beside it. */
+.skill-walk__later {
+  align-self: flex-start;
+  background: none;
+  border: 0;
+  padding: 0 0.25rem;
+  margin-inline-start: -0.25rem;
+  min-height: 24px;
+  font: inherit;
+  font-size: 0.8rem;
+  color: var(--ink-soft);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.skill-walk__later:hover { color: var(--ink); }

package/modules/hall-ui/public/{settings-specialities.js → speciality-tools.js}

@@ -1,5 +1,6 @@
-// modules/hall-ui/public/settings-specialities.js — the "Your specialities" panel
-// on /builders/settings (task 1003855; ADR 0296).
+// modules/hall-ui/public/speciality-tools.js — THE SPECIALITY TOOLS, one component
+// mounted by two pages: Settings' "Your specialities" panel (task 1003855; ADR
+// 0296) and My agents' "What it knows" section (task 1005052).
 //
 // WHAT A SPECIALITY IS, for anyone reading this file first: a craft says HOW you
 // work (engineer / ideator / artist / ui); a speciality says what you work ON and
@@ -7,10 +8,21 @@
 // contract you write here is injected into every session where you hold a claim
 // in that craft.
 //
-// Its own file rather than more of settings.js, on the settings-interaction.js /
-// settings-sessions.js precedent and for the same stated reason: settings.js sits
-// against the 1500-line size ratchet. Self-contained — it shares nothing with the
-// rest of the page but `window.OTB` and the generated client, both loaded before it.
+// ONE COMPONENT, TWO MOUNTS (task 1005052). This was settings-specialities.js;
+// it was carved out so My agents gets every tool Settings has without a second
+// copy. A page mounts it by carrying the hosts, by id, inside one section:
+//   #specialities-scroll      the section (ships `hidden`; revealed by load())
+//   #speciality-suggestions   what the project suggests
+//   #specialities-rows        the catalogue, one card per speciality (a <ul>)
+//   #speciality-create        an EMPTY <form>: createFormHtml() below fills it,
+//                             so the create form's markup exists once, here
+//   #specialities-status      the status line
+// Nothing else is page-specific: each page's own sheet draws the same markup in
+// its own look (Settings through panel.css, My agents through my-agents.css's
+// `.ma-know` skin; the structural rules are speciality-tools.css). Task 1005044
+// removes the Settings mount (its section and this file's script tag); the code
+// stays. Self-contained — it shares nothing with either page but `window.OTB`,
+// loaded before it, and one DOM event it dispatches (changed(), below).
 //
 // TRAINING IS TWO-FOLD, and only half of it is visible here. Documents you add are
 // the half you drive; the other half accumulates on its own from learnings captured
@@ -33,6 +45,13 @@
   const el = (id) => document.getElementById(id);
   const statusLine = (msg) => { const s = el('specialities-status'); if (s) s.textContent = msg || ''; };
 
+  // What a session is sent just moved (an adopt, a stop, a skills save): say so,
+  // so a page that shows it can read it again. My agents' "What your agent reads
+  // first" listens (task 1005052); Settings does not, and nothing here waits on it.
+  function changed() {
+    if (typeof CustomEvent === 'function' && document.dispatchEvent) document.dispatchEvent(new CustomEvent('otb:specialities-changed'));
+  }
+
   async function call(method, path, body) {
     const res = await fetch(`${API}${path}`, {
       method,
@@ -203,6 +222,7 @@
         state.walk = null;
         toast(`Saved — ${enabled.length} of ${steps.length} skill${steps.length === 1 ? '' : 's'} on.`);
         await load();
+        changed();
         return;
       } catch (err) {
         w.saving = false;
@@ -458,6 +478,7 @@
         if (state.walk && state.walk.id === String(id)) state.walk = null;
       }
       await load();
+      if (action === 'adopt' || action === 'abandon') changed();
       // Adopting is the moment the ruling is about: a speciality that offers
       // skills opens straight into the walkthrough, with every one still off.
       if (action === 'adopt') {
@@ -585,8 +606,64 @@
     });
   }
 
+  // THE CREATE FORM, rendered into the page's empty `<form id="speciality-create">`
+  // (task 1005052). It lived in settings.html until a second page mounted these
+  // tools; here it is one copy both pages share, filled before wire() reads its
+  // fields. The markup is the one settings.html carried, unchanged.
+  function createFormHtml() {
+    return `
+                <h3 class="speciality-create__h">Create one</h3>
+                <label class="speciality-field">
+                  <span>Name</span>
+                  <input type="text" name="name" maxlength="80" required placeholder="Economics" />
+                </label>
+                <label class="speciality-field">
+                  <span>Role it sits under</span>
+                  <select name="discipline" required>
+                    <option value="">Pick one…</option>
+                    <option value="engineer">Engineer</option>
+                    <option value="ideator">Ideator</option>
+                    <option value="artist">Artist</option>
+                    <option value="ui">UI design</option>
+                  </select>
+                </label>
+                <label class="speciality-field">
+                  <span>Summary <small>(optional)</small></span>
+                  <input type="text" name="summary" maxlength="500" placeholder="Markets, incentives, and how to price them." />
+                </label>
+                <label class="speciality-field">
+                  <span>How Claude should engage you in it <small>(optional)</small></span>
+                  <textarea name="contract_md" rows="4" maxlength="4000" placeholder="Argue from mechanism, not vibes. Always name the assumption a number rests on."></textarea>
+                </label>
+                <label class="speciality-field">
+                  <span>Who can use it</span>
+                  <select name="visibility">
+                    <option value="private">Only me</option>
+                    <option value="project">Anyone in the owning project</option>
+                    <option value="public">Anyone on this instance</option>
+                  </select>
+                </label>
+                <label class="speciality-field speciality-field--check">
+                  <input type="checkbox" name="sellable" />
+                  <span>
+                    May be offered for sale later
+                    <small>Records your decision only — there is no marketplace yet, and nothing is listed anywhere.</small>
+                  </span>
+                </label>
+                <details id="speciality-create-offer" class="speciality-offer-box">
+                  <summary>Skills it offers <small>(optional)</small></summary>
+                  <div id="speciality-create-skills"><p class="hall-loading hall-loading--inline" role="status">Loading this project’s skills…</p></div>
+                </details>
+                <div class="speciality-actions">
+                  <button type="submit" class="btn">Create speciality</button>
+                </div>
+              `;
+  }
+
   function boot() {
     if (!el('specialities-rows')) return; // panel not on this page
+    const create = el('speciality-create');
+    if (create) create.innerHTML = createFormHtml();
     wire();
     load();
   }