fraim-hub 2.0.340 → 2.0.341

package/public/ai-hub/pane-surfaces.js

@@ -0,0 +1,315 @@
+/*
+ * FRAIM Hub - main-pane surface host (issue #1911 R16).
+ *
+ * The Hub's main pane has grown a series of hand-wired, mutually exclusive
+ * siblings inside <main class="conversation">: the idle empty state, the hire
+ * strip, the active conversation, the A/B compare panel. Each one was added by
+ * hand and each one is toggled by hand. This module turns that into one slot
+ * with a registration API, so a future surface - a form, a report, a picker, a
+ * chart, any markup at all - mounts into the pane without editing the pane.
+ *
+ * It is deliberately feature-agnostic. Every application-specific selector is
+ * injected through configure(), and every piece of content comes from the
+ * surface's own render(). A test can drive this host with a surface that has
+ * nothing to do with any particular Hub feature.
+ *
+ * Surface definition:
+ *   {
+ *     id:      'my-surface',                    // required, unique
+ *     render:  (ctx) => Node | DocumentFragment | string,   // required
+ *     focusSelector: '#my-first-control',       // optional, else first focusable
+ *     onOpen:  (ctx) => void,                   // optional
+ *     onClose: (ctx) => void,                   // optional
+ *     onEscape:(ctx) => boolean,                // optional; true = handled, stay open
+ *     composer: {                               // optional; claims the composer
+ *       chipLabel:      (ctx) => string|null,
+ *       chipClearLabel: (ctx) => string,
+ *       placeholder:    (ctx) => string,
+ *       validate:       ({ text, context }) => { ok, message?, focus? },
+ *       submit:         ({ text, context }) => { ok, error?, keepOpen? } | Promise<...>,
+ *     },
+ *   }
+ */
+(function (global) {
+  'use strict';
+
+  var surfaces = new Map();
+  var config = null;
+  var active = null; // { id, def, context, trigger }
+  var submitting = false;
+
+  function query(selector) {
+    if (!selector) return null;
+    try {
+      return document.querySelector(selector);
+    } catch (err) {
+      return null;
+    }
+  }
+
+  function hostElement() { return query(config && config.hostSelector); }
+  function composerTextElement() { return query(config && config.composerTextSelector); }
+  function chipElement() { return query(config && config.chipSelector); }
+  function chipLabelElement() { return query(config && config.chipLabelSelector); }
+  function chipClearElement() { return query(config && config.chipClearSelector); }
+  function composerErrorElement() { return query(config && config.composerErrorSelector); }
+
+  function notifyChange() {
+    if (config && typeof config.onChange === 'function') config.onChange();
+  }
+
+  // Accepts whatever render() returned and puts it in the host, replacing any
+  // previous content. A string is treated as markup so a surface can be a
+  // template literal and nothing more.
+  function mount(host, content) {
+    host.innerHTML = '';
+    if (content == null) return;
+    if (typeof content === 'string') {
+      host.innerHTML = content;
+      return;
+    }
+    if (typeof content.nodeType === 'number') {
+      host.appendChild(content);
+      return;
+    }
+    if (typeof content.length === 'number') {
+      for (var i = 0; i < content.length; i += 1) host.appendChild(content[i]);
+    }
+  }
+
+  var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+  function focusInto(host, def) {
+    var target = def.focusSelector ? host.querySelector(def.focusSelector) : null;
+    if (!target) {
+      var candidates = host.querySelectorAll(FOCUSABLE);
+      for (var i = 0; i < candidates.length; i += 1) {
+        var el = candidates[i];
+        if (!el.disabled && !el.hidden && el.getClientRects().length) { target = el; break; }
+      }
+    }
+    if (target && typeof target.focus === 'function') target.focus();
+  }
+
+  function composerOf(def) {
+    return def && def.composer ? def.composer : null;
+  }
+
+  function callContract(fn, fallback) {
+    if (typeof fn !== 'function') return fallback;
+    try {
+      return fn(active ? active.context : null);
+    } catch (err) {
+      if (global.console && console.warn) console.warn('[pane-surfaces] contract call failed:', err);
+      return fallback;
+    }
+  }
+
+  function setComposerError(message) {
+    var el = composerErrorElement();
+    if (el) el.textContent = message || '';
+  }
+
+  // Paints the chip and the placeholder the active surface asked for. Called
+  // on open, on refresh, and by the host application whenever it re-syncs the
+  // composer, so the two never disagree about who owns the chip.
+  function renderComposerChrome() {
+    var chip = chipElement();
+    var label = chipLabelElement();
+    var clear = chipClearElement();
+    var text = composerTextElement();
+    if (!active || !composerOf(active.def)) return false;
+    var chipLabel = callContract(composerOf(active.def).chipLabel, null);
+    if (chip && label && chipLabel) {
+      label.textContent = chipLabel;
+      chip.hidden = false;
+      if (clear) clear.setAttribute('aria-label', callContract(composerOf(active.def).chipClearLabel, 'Cancel'));
+    }
+    if (text) {
+      var placeholder = callContract(composerOf(active.def).placeholder, null);
+      if (placeholder) text.placeholder = placeholder;
+    }
+    return true;
+  }
+
+  var api = {
+    /**
+     * Binds the host to its application. Every selector here is the
+     * application's, not this module's, which is what keeps this file free of
+     * feature knowledge.
+     */
+    configure: function (options) {
+      config = options || {};
+      return api;
+    },
+
+    register: function (def) {
+      if (!def || !def.id) throw new Error('pane-surfaces: a surface needs an id');
+      if (typeof def.render !== 'function') throw new Error('pane-surfaces: ' + def.id + ' needs a render()');
+      surfaces.set(def.id, def);
+      return api;
+    },
+
+    isRegistered: function (id) { return surfaces.has(id); },
+
+    activeId: function () { return active ? active.id : null; },
+
+    activeContext: function () { return active ? active.context : null; },
+
+    isOpen: function (id) { return !!active && (id === undefined || active.id === id); },
+
+    isSubmitting: function () { return submitting; },
+
+    /**
+     * Mounts a registered surface into the pane. Opening while another surface
+     * is open replaces it (closing the first properly) rather than stacking.
+     * Re-opening the surface that is already active re-renders it in place, so
+     * a double click on an entry point cannot duplicate anything.
+     */
+    open: function (id, context) {
+      var def = surfaces.get(id);
+      if (!def) throw new Error('pane-surfaces: no surface registered as "' + id + '"');
+      var host = hostElement();
+      if (!host) return null;
+      var trigger = document.activeElement;
+      if (active && active.id !== id) closeActive({ restoreFocus: false });
+      var reopening = !!active && active.id === id;
+      active = {
+        id: id,
+        def: def,
+        context: context === undefined ? (reopening ? active.context : null) : context,
+        trigger: reopening ? active.trigger : trigger,
+      };
+      setComposerError('');
+      // onOpen before render: a surface prepares its state there, and render()
+      // must draw the prepared state, not the state a previous open left behind.
+      if (!reopening && typeof def.onOpen === 'function') def.onOpen(active.context);
+      mount(host, def.render(active.context));
+      host.hidden = false;
+      host.dataset.surfaceId = id;
+      renderComposerChrome();
+      notifyChange();
+      focusInto(host, def);
+      return active.context;
+    },
+
+    /** Re-runs render() for the active surface without re-firing onOpen. */
+    refresh: function () {
+      if (!active) return false;
+      var host = hostElement();
+      if (!host) return false;
+      var focusedId = document.activeElement && document.activeElement.id;
+      var selectionStart = null;
+      var selectionEnd = null;
+      var focused = document.activeElement;
+      if (focused && typeof focused.selectionStart === 'number') {
+        selectionStart = focused.selectionStart;
+        selectionEnd = focused.selectionEnd;
+      }
+      mount(host, active.def.render(active.context));
+      renderComposerChrome();
+      if (focusedId) {
+        var again = host.querySelector('#' + (global.CSS && CSS.escape ? CSS.escape(focusedId) : focusedId));
+        if (again && typeof again.focus === 'function') {
+          again.focus();
+          if (selectionStart !== null && typeof again.setSelectionRange === 'function') {
+            try { again.setSelectionRange(selectionStart, selectionEnd); } catch (err) { /* not a text field */ }
+          }
+        }
+      }
+      return true;
+    },
+
+    close: function (options) { return closeActive(options); },
+
+    closeIfActive: function (id, options) {
+      if (!active || active.id !== id) return false;
+      return closeActive(options);
+    },
+
+    /** The composer contract of the active surface, or null when none claims it. */
+    composerContract: function () {
+      if (!active) return null;
+      return composerOf(active.def);
+    },
+
+    /** Paints chip + placeholder for the active surface. Returns false when no surface owns the composer. */
+    renderComposerChrome: renderComposerChrome,
+
+    setComposerError: setComposerError,
+
+    /**
+     * Routed from the application's Escape handling so there is exactly one
+     * keydown listener in the app. Returns true when this module consumed the key.
+     */
+    handleEscape: function () {
+      if (!active) return false;
+      if (typeof active.def.onEscape === 'function' && active.def.onEscape(active.context) === true) return true;
+      closeActive();
+      return true;
+    },
+
+    /**
+     * Routed from the application's send action. Returns false when no surface
+     * claims the composer, so the caller falls through to its own behavior.
+     */
+    submitFromComposer: async function (text) {
+      var contract = api.composerContract();
+      if (!contract || typeof contract.submit !== 'function') return false;
+      if (submitting) return true;
+      var input = { text: text == null ? '' : String(text), context: active.context };
+      setComposerError('');
+      if (typeof contract.validate === 'function') {
+        var verdict = contract.validate(input) || { ok: true };
+        if (!verdict.ok) {
+          setComposerError(verdict.message || '');
+          var focusTarget = typeof verdict.focus === 'string' ? query(verdict.focus) : verdict.focus;
+          if (focusTarget && typeof focusTarget.focus === 'function') focusTarget.focus();
+          return true;
+        }
+      }
+      submitting = true;
+      var result;
+      try {
+        result = await contract.submit(input);
+      } catch (err) {
+        result = { ok: false, error: (err && err.message) || 'Could not complete this action.' };
+      } finally {
+        submitting = false;
+      }
+      result = result || { ok: true };
+      if (result.ok === false) {
+        setComposerError(result.error || 'Could not complete this action.');
+        return true;
+      }
+      var composerText = composerTextElement();
+      if (composerText) composerText.value = '';
+      if (!result.keepOpen) closeActive({ restoreFocus: false });
+      else notifyChange();
+      return true;
+    },
+  };
+
+  function closeActive(options) {
+    if (!active) return false;
+    var opts = options || {};
+    var closing = active;
+    active = null;
+    var host = hostElement();
+    if (host) {
+      host.hidden = true;
+      host.innerHTML = '';
+      delete host.dataset.surfaceId;
+    }
+    setComposerError('');
+    if (typeof closing.def.onClose === 'function') closing.def.onClose(closing.context);
+    notifyChange();
+    if (opts.restoreFocus !== false && closing.trigger && closing.trigger.isConnected
+      && typeof closing.trigger.focus === 'function') {
+      closing.trigger.focus();
+    }
+    return true;
+  }
+
+  global.PaneSurfaces = api;
+}(typeof window !== 'undefined' ? window : globalThis));

package/public/ai-hub/review.css

@@ -232,6 +232,38 @@
   border-left: 3px solid var(--line);
   padding-left: 10px;
 }
+/* Issue #1857: a reopened claim. Built from the same tokens as .lp-example
+   directly above, because it is the same kind of thing, a quoted aside that
+   qualifies the lesson, and it should not read as a new visual language. The
+   accent separates it from the example rather than competing with it. */
+.learn-prop .lp-reopen {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--text);
+  border-left: 3px solid var(--warn, #b8860b);
+  background: color-mix(in srgb, var(--warn, #b8860b) 8%, transparent);
+  padding: 6px 10px;
+  border-radius: 3px;
+}
+
+/* Issue #1857 R7: claims suppressed because the manager already decided them.
+   Deliberately quieter than a card: this is a receipt, not a request. It sits
+   below the batch so the eye reaches the decisions first. */
+.learn-suppressed {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid var(--line);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--muted);
+}
+.learn-suppressed .ls-lead {
+  font-weight: 600;
+}
+.learn-suppressed .ls-row {
+  padding-left: 2px;
+}
+
 .learn-prop .lp-actions {
   display: flex;
   align-items: center;
@@ -887,6 +919,16 @@
   background: var(--bg);
 }
 
+/* Issue #1857 R19: the rejected section reuses the Archived section's shape
+   entirely, so a manager reads one collapsed list the same way in both places.
+   Only the card is dimmed, because a refusal is settled rather than pending. */
+.learn-rejected-section > .learn-prop {
+  opacity: 0.78;
+}
+.learn-rejected-section .lp-title {
+  text-decoration: none;
+}
+
 
 /* Issue #1755: entries are authored as short labelled lines (Takeaway / Why this
    matters / Example / What to do next). Collapsing them into one paragraph is