clay-server 5.4.0 → 5.5.0-beta.1

package/lib/public/css/agent-behavior.css

@@ -0,0 +1,101 @@
+/* Personal > Agent behavior: one scrolling page with a subordinate section
+   list. Shared settings-ui primitives supply headings, hints, buttons and
+   status; this sheet only places the page-specific pieces. */
+#user-settings .us-section[data-section="us-agent"] { max-width: none; }
+#us-agent-behavior { min-width: 0; }
+#us-agent-behavior .ab-feedback { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+#us-agent-behavior .ab-feedback .settings-status { margin: 0; }
+#us-agent-behavior .ab-feedback[hidden] { display: none; }
+
+.ab-note { margin: 4px 0 20px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-alt); }
+.ab-note p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, var(--text-muted)); }
+.ab-note p + p { margin-top: 4px; }
+
+.ab-layout { display: block; }
+/* Section links under the active item of the shell's left navigation (desktop) */
+.settings-shell-nav .ab-nav { margin: 2px 0 6px 12px; padding-left: 8px; border-left: 1px solid var(--border-subtle); }
+.ab-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
+.ab-nav-link {
+  display: flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 8px;
+  font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--text-muted); text-decoration: none;
+}
+.ab-nav-link:hover { background: rgba(var(--overlay-rgb), .05); color: var(--text); }
+.ab-nav-link.active { background: rgba(var(--overlay-rgb), .08); color: var(--text); }
+.ab-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+
+.ab-sections { min-width: 0; max-width: 760px; }
+.ab-section { scroll-margin-top: 4px; padding-bottom: 8px; }
+.ab-section + .ab-section { margin-top: 28px; }
+#user-settings .ab-section .ab-section-title { margin: 0 0 2px; font-size: 15px; }
+#user-settings .ab-section .ab-section-title:focus { outline: none; }
+#user-settings .ab-section .ab-section-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
+.ab-section-desc { margin: 0 0 4px; }
+
+.ab-setting { padding: 12px 0; border-top: 1px solid var(--border-subtle); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
+.ab-setting > .ab-label, .ab-setting > .ab-desc { grid-column: 1; }
+.ab-setting > .ab-control-row { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-content: flex-end; flex-wrap: wrap; }
+.ab-setting > .ab-control-row .ab-status { order: -1; }
+.ab-setting > .ab-consequence, .ab-setting > .ab-example, .ab-setting > .ab-nested { grid-column: 1 / -1; }
+.ab-section-desc + .ab-setting { margin-top: 10px; }
+#user-settings .ab-setting .ab-label { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); }
+#user-settings .ab-setting .ab-desc { margin: 2px 0 0; }
+.ab-control-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; min-height: 32px; }
+.ab-status { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-muted); }
+.ab-status:empty { display: none; }
+.ab-status[data-state="saving"]::before { content: ""; width: 10px; height: 10px; flex: none; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ab-spin .8s linear infinite; }
+.ab-status[data-state="saved"] { color: var(--text); }
+.ab-status[data-state="saved"]::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--success, #3fb950); }
+.ab-status[data-state="error"] { color: var(--error); }
+.ab-status-text { overflow-wrap: anywhere; }
+#user-settings .ab-retry { height: 28px; padding: 0 10px; flex: none; }
+@keyframes ab-spin { to { transform: rotate(360deg); } }
+
+/* Inline segmented control (radiogroup) */
+.ab-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); }
+.ab-seg-opt {
+  min-width: 64px; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: none;
+  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
+}
+.ab-seg-opt:hover { color: var(--text); }
+.ab-seg-opt.selected { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
+.ab-seg-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+.ab-consequence { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text); }
+.ab-example { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
+.ab-example-label { display: inline-block; margin-right: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-dimmer); }
+
+/* Dependent checkbox nested under Sticky Notes */
+.ab-nested { display: block; margin: 12px 0 0 4px; padding: 2px 0 2px 14px; border-top: 0; border-left: 2px solid var(--border-subtle); }
+.ab-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); cursor: pointer; }
+.ab-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
+.ab-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+#user-settings .ab-nested .ab-desc { margin: 2px 0 0 24px; }
+.ab-nested .ab-control-row { margin-top: 4px; min-height: 0; margin-left: 24px; }
+.ab-nested .ab-consequence, .ab-nested .ab-example { margin-left: 24px; }
+.ab-nested .ab-consequence { margin-top: 8px; }
+.ab-inactive { margin: 8px 0 0 24px; padding: 6px 10px; border-radius: 6px; background: rgba(var(--overlay-rgb), .05); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, var(--text-muted)); }
+.ab-inactive[hidden] { display: none; }
+.ab-inactive-setting .ab-check, .ab-inactive-setting .ab-consequence, .ab-inactive-setting .ab-example { opacity: .62; }
+
+/* Narrow: the section list becomes a compact sticky row above the content */
+.ab-layout.ab-narrow { display: block; }
+.ab-layout.ab-narrow .ab-nav {
+  margin-left: -14px; border-left: 0;
+  position: sticky; top: -18px; z-index: 3; margin: 0 -14px 12px; padding: 8px 14px 8px; background: var(--bg);
+  border-bottom: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none;
+}
+.ab-layout.ab-narrow .ab-nav::-webkit-scrollbar { display: none; }
+.ab-layout.ab-narrow .ab-nav-list { flex-direction: row; gap: 6px; width: max-content; }
+.ab-layout.ab-narrow .ab-nav-link { min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); white-space: nowrap; }
+.ab-layout.ab-narrow .ab-nav-link.active { border-color: var(--accent); background: var(--accent-12); }
+.ab-layout.ab-narrow .ab-section { scroll-margin-top: 60px; }
+.ab-layout.ab-narrow .ab-setting { display: block; }
+.ab-layout.ab-narrow .ab-setting > .ab-control-row { margin-top: 10px; justify-content: flex-start; }
+.ab-layout.ab-narrow .ab-setting > .ab-control-row .ab-status { order: 0; }
+.ab-layout.ab-narrow .ab-seg { display: flex; width: 100%; }
+.ab-layout.ab-narrow .ab-seg-opt { flex: 1 1 0; min-width: 0; height: 36px; padding: 0 6px; }
+.ab-layout.ab-narrow .ab-nested { margin-left: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ab-status[data-state="saving"]::before { animation: none; }
+}

package/lib/public/modules/agent-behavior-nav.js

@@ -0,0 +1,90 @@
+// agent-behavior-nav.js - section links for the single scrolling Agent
+// behavior page: smooth anchor scrolling, scroll-derived active state and the
+// narrow (horizontal sticky row) layout flag.
+var NARROW_QUERY = '(max-width: 800px)';
+var SCROLL_KEYS = ['PageUp', 'PageDown', 'Home', 'End', ' '];
+
+// opts: { layout, nav, scroller, sections: [{ id, el, heading }] }
+export function attachSectionNav(opts) {
+  var layout = opts.layout; var nav = opts.nav; var scroller = opts.scroller;
+  var sections = opts.sections;
+  var links = Array.prototype.slice.call(nav.querySelectorAll('a[data-section]'));
+  var active = null; var locked = false; var frame = 0;
+  var narrowMq = window.matchMedia ? window.matchMedia(NARROW_QUERY) : null;
+
+  function applyNarrow() {
+    layout.classList.toggle('ab-narrow', !!(narrowMq && narrowMq.matches));
+    if (opts.onPlace) opts.onPlace(isNarrow());
+  }
+  function isNarrow() { return layout.classList.contains('ab-narrow'); }
+
+  function setActive(id) {
+    if (id === active) return;
+    active = id;
+    links.forEach(function (link) {
+      var on = link.dataset.section === id;
+      link.classList.toggle('active', on);
+      if (on) link.setAttribute('aria-current', 'location'); else link.removeAttribute('aria-current');
+      if (on && isNarrow() && nav.scrollWidth > nav.clientWidth) {
+        nav.scrollLeft = Math.max(0, link.offsetLeft - (nav.clientWidth - link.offsetWidth) / 2);
+      }
+    });
+  }
+
+  function compute() {
+    frame = 0;
+    if (locked || !sections.length) return;
+    var offset = (isNarrow() ? nav.offsetHeight : 0) + 24;
+    var line = scroller.getBoundingClientRect().top + offset;
+    var current = sections[0].id;
+    sections.forEach(function (section) { if (section.el.getBoundingClientRect().top <= line) current = section.id; });
+    if (scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2 && scroller.scrollTop > 0) current = sections[sections.length - 1].id;
+    setActive(current);
+  }
+  function schedule() { if (!frame) frame = requestAnimationFrame(compute); }
+  function unlock() { locked = false; schedule(); }
+  function onKey(event) { if (SCROLL_KEYS.indexOf(event.key) >= 0 && !nav.contains(event.target)) unlock(); }
+
+  function onPointer(event) { if (event.target === scroller) unlock(); }
+
+  function go(id) {
+    var section = sections.filter(function (item) { return item.id === id; })[0];
+    if (!section) return;
+    locked = true; setActive(id);
+    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    section.el.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
+    if (section.heading) section.heading.focus({ preventScroll: true });
+  }
+  function onClick(event) {
+    var link = event.target.closest ? event.target.closest('a[data-section]') : null;
+    if (!link || !nav.contains(link)) return;
+    event.preventDefault();
+    go(link.dataset.section);
+  }
+
+  nav.addEventListener('click', onClick);
+  scroller.addEventListener('scroll', schedule, { passive: true });
+  scroller.addEventListener('wheel', unlock, { passive: true });
+  scroller.addEventListener('touchstart', unlock, { passive: true });
+  scroller.addEventListener('keydown', onKey);
+  scroller.addEventListener('pointerdown', onPointer);
+  if (narrowMq && narrowMq.addEventListener) narrowMq.addEventListener('change', applyNarrow);
+  window.addEventListener('resize', schedule);
+  applyNarrow();
+  compute();
+
+  return {
+    go: go, refresh: compute, active: function () { return active; },
+    destroy: function () {
+      nav.removeEventListener('click', onClick);
+      scroller.removeEventListener('scroll', schedule);
+      scroller.removeEventListener('wheel', unlock);
+      scroller.removeEventListener('touchstart', unlock);
+      scroller.removeEventListener('keydown', onKey);
+      scroller.removeEventListener('pointerdown', onPointer);
+      if (narrowMq && narrowMq.removeEventListener) narrowMq.removeEventListener('change', applyNarrow);
+      window.removeEventListener('resize', schedule);
+      if (frame) cancelAnimationFrame(frame);
+    }
+  };
+}

package/lib/public/modules/agent-behavior-view.js

@@ -0,0 +1,235 @@
+// agent-behavior-view.js - DOM for the Personal "Agent behavior" page. Built
+// from the server catalog; later store changes update the existing nodes in
+// place so focus, scroll position and the live status regions are stable.
+import { store } from './store.js';
+import {
+  getAgentBehavior, loadAgentBehavior, chooseValue, retryValue, displayedValue, statusFor, checkboxStatus
+} from './agent-behavior.js';
+import { attachSectionNav } from './agent-behavior-nav.js';
+import { setPageSubnav } from './settings-shell-view.js';
+
+var NOTE = 'Choices apply to your own Driver conversations and take effect from your next message in each conversation.';
+var host = null; var unsubscribe = null; var built = null; var nav = null;
+
+function make(tag, className, text) {
+  var node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+function setText(node, text) { if (node && node.textContent !== text) node.textContent = text; }
+
+function statusBox(id) {
+  var box = make('div', 'ab-status'); box.dataset.status = id;
+  box.setAttribute('role', 'status'); box.setAttribute('aria-live', 'polite');
+  return box;
+}
+
+function buildMode(setting, state) {
+  var id = setting.id;
+  var wrap = make('div', 'ab-setting'); wrap.dataset.setting = id;
+  var label = make('h4', 'ab-label', setting.label); label.id = 'ab-l-' + id;
+  var desc = make('p', 'settings-hint ab-desc', setting.description); desc.id = 'ab-d-' + id;
+  var row = make('div', 'ab-control-row');
+  var group = make('div', 'ab-seg'); group.setAttribute('role', 'radiogroup');
+  group.setAttribute('aria-labelledby', 'ab-l-' + id);
+  group.setAttribute('aria-describedby', 'ab-d-' + id + ' ab-c-' + id);
+  state.catalog.modes.forEach(function (mode) {
+    var radio = make('button', 'ab-seg-opt', mode.label); radio.type = 'button';
+    radio.setAttribute('role', 'radio'); radio.dataset.value = mode.id;
+    group.appendChild(radio);
+  });
+  group.addEventListener('click', function (event) {
+    var radio = event.target.closest('[role="radio"]');
+    if (radio) chooseValue(id, radio.dataset.value);
+  });
+  group.addEventListener('keydown', function (event) { onRadioKey(event, group, id); });
+  row.appendChild(group); row.appendChild(statusBox(id));
+  var consequence = make('p', 'ab-consequence'); consequence.id = 'ab-c-' + id;
+  var example = make('p', 'ab-example');
+  example.appendChild(make('span', 'ab-example-label', 'Example'));
+  example.appendChild(make('span', 'ab-example-text'));
+  [label, desc, row, consequence, example].forEach(function (node) { wrap.appendChild(node); });
+  return wrap;
+}
+
+function onRadioKey(event, group, id) {
+  var keys = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 };
+  var radios = Array.prototype.slice.call(group.querySelectorAll('[role="radio"]'));
+  var index = radios.indexOf(document.activeElement);
+  if (index < 0) return;
+  var next = -1;
+  if (keys[event.key]) next = (index + keys[event.key] + radios.length) % radios.length;
+  else if (event.key === 'Home') next = 0;
+  else if (event.key === 'End') next = radios.length - 1;
+  if (next < 0) return;
+  event.preventDefault();
+  radios[next].focus();
+  chooseValue(id, radios[next].dataset.value);
+}
+
+function buildCheckbox(setting) {
+  var id = setting.id;
+  var wrap = make('div', 'ab-setting ab-nested'); wrap.dataset.setting = id;
+  var label = make('label', 'ab-check');
+  var input = document.createElement('input'); input.type = 'checkbox'; input.id = 'ab-i-' + id;
+  input.setAttribute('aria-describedby', 'ab-d-' + id + ' ab-c-' + id + ' ab-n-' + id);
+  input.addEventListener('change', function () { chooseValue(id, input.checked); });
+  label.appendChild(input); label.appendChild(make('span', 'ab-check-text', setting.label));
+  var desc = make('p', 'settings-hint ab-desc', setting.description); desc.id = 'ab-d-' + id;
+  var inactive = make('p', 'ab-inactive'); inactive.id = 'ab-n-' + id;
+  var row = make('div', 'ab-control-row'); row.appendChild(statusBox(id));
+  var consequence = make('p', 'ab-consequence'); consequence.id = 'ab-c-' + id;
+  var example = make('p', 'ab-example');
+  example.appendChild(make('span', 'ab-example-label', 'Example'));
+  example.appendChild(make('span', 'ab-example-text', setting.example));
+  [label, desc, inactive, row, consequence, example].forEach(function (node) { wrap.appendChild(node); });
+  return wrap;
+}
+
+function buildStatic(state, scroller) {
+  var frag = make('div', 'ab-ready');
+  var note = make('div', 'ab-note');
+  note.appendChild(make('p', '', NOTE));
+  var layout = make('div', 'ab-layout');
+  var navEl = make('nav', 'ab-nav'); navEl.setAttribute('aria-label', 'Agent behavior sections');
+  var list = make('ul', 'ab-nav-list');
+  var main = make('div', 'ab-sections');
+  var sections = [];
+  state.catalog.sections.forEach(function (section) {
+    var item = make('li'); var link = make('a', 'ab-nav-link', section.label);
+    link.href = '#ab-sec-' + section.id; link.dataset.section = section.id; item.appendChild(link); list.appendChild(item);
+    var el = make('section', 'ab-section'); el.id = 'ab-sec-' + section.id;
+    var heading = make('h3', 'ab-section-title', section.label); heading.id = 'ab-h-' + section.id; heading.tabIndex = -1;
+    el.setAttribute('aria-labelledby', heading.id);
+    el.appendChild(heading); el.appendChild(make('p', 'settings-hint ab-section-desc', section.description));
+    state.catalog.settings.forEach(function (setting) {
+      if (setting.section !== section.id || setting.type !== 'mode') return;
+      var block = buildMode(setting, state); el.appendChild(block);
+      state.catalog.settings.forEach(function (child) {
+        if (child.type === 'checkbox' && child.parent === setting.id) block.appendChild(buildCheckbox(child));
+      });
+    });
+    main.appendChild(el); sections.push({ id: section.id, el: el, heading: heading });
+  });
+  navEl.appendChild(list); layout.appendChild(main);
+  frag.appendChild(note); frag.appendChild(layout);
+  return { root: frag, layout: layout, nav: navEl, sections: sections, catalog: state.catalog, scroller: scroller };
+}
+
+// Desktop: the section links sit under the active page in the shell's left
+// navigation. Narrow: they become a sticky row at the top of the content.
+function placeNav(narrow) {
+  if (!built) return;
+  if (narrow) { setPageSubnav(null, null); built.layout.insertBefore(built.nav, built.layout.firstChild); }
+  else setPageSubnav('us-agent', built.nav);
+}
+
+function syncStatus(box, id, state, input) {
+  var status = statusFor(state, id);
+  box.dataset.state = status.kind;
+  if (status.kind === 'error') {
+    if (box.dataset.shown !== status.text) {
+      box.replaceChildren();
+      box.appendChild(make('span', 'ab-status-text', status.text));
+      var retry = make('button', 'us-btn us-btn-secondary ab-retry', 'Retry'); retry.type = 'button';
+      retry.addEventListener('click', function () {
+        retryValue(id);
+        var target = input || host.querySelector('[data-setting="' + id + '"] [role="radio"][tabindex="0"]');
+        if (target) target.focus();
+      });
+      box.appendChild(retry);
+    }
+    box.dataset.shown = status.text;
+    return;
+  }
+  delete box.dataset.shown;
+  if (box.querySelector('.ab-retry')) box.replaceChildren();
+  setText(box, status.text);
+}
+
+function syncMode(setting, state) {
+  var wrap = built.root.querySelector('[data-setting="' + setting.id + '"]');
+  var value = displayedValue(state, setting.id);
+  wrap.querySelectorAll('[role="radio"]').forEach(function (radio) {
+    var on = radio.dataset.value === value;
+    radio.setAttribute('aria-checked', on ? 'true' : 'false');
+    radio.tabIndex = on ? 0 : -1;
+    radio.classList.toggle('selected', on);
+  });
+  var copy = setting.modes[value] || { consequence: '', example: '' };
+  setText(wrap.querySelector('.ab-consequence'), copy.consequence);
+  setText(wrap.querySelector('.ab-example-text'), copy.example);
+  syncStatus(wrap.querySelector(':scope > .ab-control-row > .ab-status'), setting.id, state, null);
+}
+
+function syncCheckbox(setting, state) {
+  var wrap = built.root.querySelector('[data-setting="' + setting.id + '"]');
+  var info = checkboxStatus(state, setting);
+  var input = wrap.querySelector('input');
+  if (input.checked !== info.checked) input.checked = info.checked;
+  wrap.classList.toggle('ab-inactive-setting', info.inactive);
+  setText(wrap.querySelector('.ab-consequence'), info.checked ? setting.checked : setting.unchecked);
+  var note = wrap.querySelector('.ab-inactive');
+  setText(note, info.reason); note.hidden = !info.reason;
+  syncStatus(wrap.querySelector('.ab-status'), setting.id, state, input);
+}
+
+function sync(state) {
+  if (!host) return;
+  var box;
+  if (state.status === 'ready') {
+    if (!built || built.catalog !== state.catalog) {
+      if (nav) { nav.destroy(); nav = null; }
+      host.replaceChildren(make('div', 'ab-feedback')); host.appendChild((built = buildStatic(state, host.closest('.settings-shell-content') || host.parentElement)).root);
+      built.scroller.scrollTop = 0;
+      nav = attachSectionNav({ layout: built.layout, nav: built.nav, scroller: built.scroller, sections: built.sections, onPlace: placeNav });
+    }
+    delete host.dataset.abShown;
+    host.querySelector('.ab-feedback').hidden = true;
+    state.catalog.settings.forEach(function (setting) {
+      if (setting.type === 'mode') syncMode(setting, state); else syncCheckbox(setting, state);
+    });
+    return;
+  }
+  // Keep an already rendered loading or error state (and its Retry control).
+  var key = state.status + '|' + (state.error || '');
+  if (!built && host.dataset.abShown === key && host.firstChild) return;
+  host.dataset.abShown = key;
+  if (nav) { nav.destroy(); nav = null; }
+  setPageSubnav(null, null);
+  built = null; host.replaceChildren(); box = make('div', 'ab-feedback'); host.appendChild(box);
+  if (state.status === 'loading' || state.status === 'idle') {
+    box.appendChild(make('p', 'settings-status ab-loading', 'Loading agent behavior...'));
+    box.firstChild.dataset.state = 'loading'; box.firstChild.setAttribute('role', 'status');
+  } else {
+    box.appendChild(make('p', 'settings-status ab-load-error', state.error || 'Could not load agent behavior.'));
+    box.firstChild.dataset.state = 'error'; box.firstChild.setAttribute('role', 'alert');
+    var retry = make('button', 'us-btn us-btn-secondary ab-retry', 'Retry'); retry.type = 'button';
+    retry.addEventListener('click', function () { loadAgentBehavior(); });
+    box.appendChild(retry);
+  }
+}
+
+// Mounts into the page container and loads (every entry re-fetches).
+export function mountAgentBehavior(container) {
+  // The shell may re-activate the page it is already showing (for example after
+  // it refreshes permissions). Keep the mounted view and its in-flight or
+  // finished load instead of rebuilding it, which would detach live controls.
+  if (host === container && unsubscribe) { sync(getAgentBehavior()); return Promise.resolve(); }
+  unmountAgentBehavior();
+  host = container; built = null;
+  unsubscribe = store.subscribe(function (state, prev) { if (state.agentBehavior !== prev.agentBehavior) sync(getAgentBehavior()); });
+  sync(getAgentBehavior());
+  return loadAgentBehavior();
+}
+
+export function unmountAgentBehavior() {
+  if (unsubscribe) { unsubscribe(); unsubscribe = null; }
+  setPageSubnav(null, null);
+  if (nav) { nav.destroy(); nav = null; }
+  if (host) { host.replaceChildren(); delete host.dataset.abShown; }
+  host = null; built = null;
+}
+
+export function agentBehaviorNav() { return nav; }

package/lib/public/modules/agent-behavior.js

@@ -0,0 +1,200 @@
+// agent-behavior.js - state, REST and save correlation for the Personal
+// "Agent behavior" page. The catalog (labels, consequences, examples) always
+// comes from the server; this module only decides what is acknowledged.
+//
+// Saving contract: a choice is shown as "Saving" until the PUT answers 200.
+// A failed save reverts the displayed value to the last acknowledged server
+// value and keeps the failed choice so Retry can resend it. Requests are
+// serialized per setting (newest choice wins) and only the changed key of a
+// reply is merged, so a late reply cannot overwrite a newer choice.
+import { store } from './store.js';
+
+var ROUTE = '/api/user/agent-behavior';
+var SAVED_MS = 3500;
+var inflight = {};
+var loadToken = 0;
+var requestCounter = 0;
+var sendSeq = 0;
+
+function emptyState() {
+  return { status: 'idle', error: '', catalog: null, policy: null, effective: null, edits: {}, saved: {} };
+}
+
+export function getAgentBehavior() { return store.get('agentBehavior') || emptyState(); }
+function patch(values) { store.set({ agentBehavior: Object.assign({}, getAgentBehavior(), values) }); }
+
+export function findSetting(state, id) {
+  var list = state && state.catalog ? state.catalog.settings : [];
+  for (var i = 0; i < list.length; i++) if (list[i].id === id) return list[i];
+  return null;
+}
+
+export function modeLabel(state, value) {
+  var modes = state && state.catalog ? state.catalog.modes : [];
+  for (var i = 0; i < modes.length; i++) if (modes[i].id === value) return modes[i].label;
+  return String(value);
+}
+
+// The value the control shows: a pending choice while saving, otherwise the
+// last acknowledged value (a failed choice is never displayed as selected).
+export function displayedValue(state, id) {
+  var edit = state.edits[id];
+  if (edit && edit.state === 'saving') return edit.value;
+  return state.policy ? state.policy[id] : undefined;
+}
+
+export function hasPendingEdits(state) {
+  return Object.keys(state.edits).some(function (id) { return state.edits[id].state === 'saving'; });
+}
+
+// Status line for one setting: { kind: '' | 'saving' | 'saved' | 'error', text }.
+export function statusFor(state, id) {
+  var edit = state.edits[id];
+  if (edit && edit.state === 'saving') return { kind: 'saving', text: 'Saving...' };
+  if (edit && edit.state === 'failed') return { kind: 'error', text: edit.message };
+  if (state.saved[id]) return { kind: 'saved', text: 'Saved' };
+  return { kind: '', text: '' };
+}
+
+// The linked-note checkbox keeps its saved choice but is inactive unless Sticky
+// Notes is Auto and Issues is not Off. Reasons use the displayed values.
+export function checkboxStatus(state, setting) {
+  var parent = setting.parent || 'notes';
+  var notes = displayedValue(state, parent);
+  var issues = displayedValue(state, 'issues');
+  var reasons = [];
+  if (notes !== 'auto') reasons.push('Sticky Notes is ' + modeLabel(state, notes) + ' (it must be Auto)');
+  if (issues === 'off') reasons.push('Issues is Off');
+  var checked = displayedValue(state, setting.id) === true;
+  if (!reasons.length && checked && !hasPendingEdits(state) && state.effective && state.effective.issueLinkedNotes === false) {
+    reasons.push('your account does not currently apply it');
+  }
+  return {
+    checked: checked, inactive: reasons.length > 0,
+    reason: reasons.length ? 'Not in effect: ' + reasons.join(' and ') + '. Your choice is kept.' : ''
+  };
+}
+
+function validPayload(data) {
+  return !!(data && data.ok === true && data.policy && typeof data.policy === 'object' && data.catalog &&
+    Array.isArray(data.catalog.settings) && Array.isArray(data.catalog.modes) && Array.isArray(data.catalog.sections));
+}
+
+function errorText(response, data, fallback) {
+  var message = data && typeof data.error === 'string' && data.error ? data.error : '';
+  if (response && response.status === 401) return 'You are signed out. Sign in again to continue.';
+  return message || fallback;
+}
+
+export function loadAgentBehavior() {
+  var token = ++loadToken;
+  inflight = {};
+  patch({ status: 'loading', error: '', edits: {}, saved: {} });
+  return fetch(ROUTE, { headers: { Accept: 'application/json' }, cache: 'no-store' }).then(function (response) {
+    return response.json().catch(function () { return null; }).then(function (data) { return { response: response, data: data }; });
+  }).then(function (result) {
+    if (token !== loadToken) return;
+    if (!result.response.ok || !validPayload(result.data)) {
+      patch({ status: 'error', error: errorText(result.response, result.data, 'Could not load agent behavior.') });
+      return;
+    }
+    patch({ status: 'ready', error: '', catalog: result.data.catalog, policy: result.data.policy, effective: result.data.effective || null });
+  }).catch(function () {
+    if (token === loadToken) patch({ status: 'error', error: 'Could not reach the server. Check your connection and try again.' });
+  });
+}
+
+export function resetAgentBehavior() {
+  loadToken++;
+  inflight = {};
+  store.set({ agentBehavior: emptyState() });
+}
+
+function setEdit(id, edit) {
+  var state = getAgentBehavior();
+  var edits = Object.assign({}, state.edits);
+  if (edit) edits[id] = edit; else delete edits[id];
+  patch({ edits: edits });
+}
+
+function markSaved(id) {
+  var state = getAgentBehavior();
+  var saved = Object.assign({}, state.saved); saved[id] = true;
+  patch({ saved: saved });
+  var token = loadToken;
+  var timer = setTimeout(function () {
+    if (token !== loadToken) return;
+    var current = getAgentBehavior();
+    if (!current.saved[id]) return;
+    var next = Object.assign({}, current.saved); delete next[id];
+    patch({ saved: next });
+  }, SAVED_MS);
+  if (timer && timer.unref) timer.unref();
+}
+
+function flush(id) {
+  if (inflight[id]) return;
+  var state = getAgentBehavior();
+  var edit = state.edits[id];
+  if (!edit || edit.state !== 'saving') return;
+  if (state.policy && state.policy[id] === edit.value) { setEdit(id, null); return; }
+  var token = loadToken;
+  var sent = edit.value;
+  var requestId = 'ab-' + (++requestCounter) + '-' + Math.random().toString(36).slice(2, 8);
+  var seq = ++sendSeq;
+  inflight[id] = requestId;
+  var changes = {}; changes[id] = sent;
+  fetch(ROUTE, {
+    method: 'PUT', headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+    body: JSON.stringify({ changes: changes, requestId: requestId })
+  }).then(function (response) {
+    return response.json().catch(function () { return null; }).then(function (data) { return { response: response, data: data }; });
+  }).then(function (result) {
+    var good = result.response.ok && validPayload(result.data) && (!result.data.requestId || result.data.requestId === requestId) &&
+      result.data.policy[id] === sent;
+    if (!good) throw new Error(errorText(result.response, result.data, 'Could not save this setting.'));
+    return result.data;
+  }).then(function (data) {
+    if (token !== loadToken) return;
+    delete inflight[id];
+    var current = getAgentBehavior();
+    var policy = Object.assign({}, current.policy); policy[id] = data.policy[id];
+    var values = { policy: policy };
+    // The server's effective flag is trusted only from the newest request when
+    // nothing else is in flight; otherwise it is unknown until the next load.
+    values.effective = seq === sendSeq && !Object.keys(inflight).length && data.effective ? data.effective : null;
+    patch(values);
+    var latest = getAgentBehavior().edits[id];
+    if (latest && latest.state === 'saving' && latest.value !== sent) { flush(id); return; }
+    setEdit(id, null);
+    markSaved(id);
+  }).catch(function (error) {
+    if (token !== loadToken) return;
+    delete inflight[id];
+    var latest = getAgentBehavior().edits[id];
+    if (latest && latest.state === 'saving' && latest.value !== sent) { flush(id); return; }
+    setEdit(id, { state: 'failed', value: sent, message: (error && error.message ? error.message : 'Could not save this setting.') });
+  });
+}
+
+// Choose a value for one setting. Returns false when it was ignored.
+export function chooseValue(id, value) {
+  var state = getAgentBehavior();
+  var setting = findSetting(state, id);
+  if (state.status !== 'ready' || !setting) return false;
+  if (displayedValue(state, id) === value && !(state.edits[id] && state.edits[id].state === 'failed')) return false;
+  if (state.policy[id] === value && !inflight[id]) { setEdit(id, null); return false; }
+  var saved = Object.assign({}, state.saved); delete saved[id];
+  var edits = Object.assign({}, state.edits); edits[id] = { state: 'saving', value: value };
+  patch({ edits: edits, saved: saved });
+  flush(id);
+  return true;
+}
+
+export function retryValue(id) {
+  var edit = getAgentBehavior().edits[id];
+  if (!edit || edit.state !== 'failed') return false;
+  setEdit(id, { state: 'saving', value: edit.value });
+  flush(id);
+  return true;
+}

package/lib/public/modules/settings-shell-registry.js

@@ -11,7 +11,7 @@ export var SETTINGS_SCOPES = [
 export var PERSONAL_PAGES = [
   { id: 'us-account', label: 'Account' }, { id: 'us-appearance', label: 'Appearance' },
   { id: 'us-chat', label: 'Conversation' }, { id: 'us-notifications', label: 'Notifications' },
-  { id: 'us-ai', label: 'AI preferences' }, { id: 'us-integrations', label: 'Integrations' }
+  { id: 'us-ai', label: 'AI preferences' }, { id: 'us-agent', label: 'Agent behavior' }, { id: 'us-integrations', label: 'Integrations' }
 ];
 
 export var PROJECT_PAGES = [