@hanzlaa/rcode 4.1.2 → 4.3.0

package/server/lib/html/client/store.js

@@ -14,9 +14,19 @@ import { useState, useEffect } from './preact.js';
 const _seed = (typeof window !== 'undefined' && window.__S__) || {};
 
 let _state = {
+  // First-run signal — false only when the server scanned and found no .rcode.
+  initialized:      _seed.initialized      !== false,
+  // Redesign dashboard contract slices (DATA-CONTRACT.md) — read by the Overview
+  // slot components. Derived server-side by scanner.buildDashboard.
+  project:          _seed.project          || null,
+  progress:         _seed.progress         || null,
+  timeline:         _seed.timeline         || null,
+  tasks:            _seed.tasks            || null,
+  health:           _seed.health           || null,
   // Fields injected by client.js / window.__S__
   phases:           _seed.phases           || [],
   milestone:        _seed.milestone        || '',
+  // currentPhase is now the contract object { name, status, milestones[] }.
   currentPhase:     _seed.currentPhase     || null,
   currentSprint:    _seed.currentSprint    || null,
   decisions:        _seed.decisions        || [],
@@ -37,9 +47,26 @@ let _state = {
   refreshing:       false,
   offline:          false,
   lastRefresh:      null,
+  // state.json parse failure message (or null). Surfaced as a dismissible
+  // banner in App.js; parseErrorDismissed is session-local UI state.
+  rawParseError:        _seed.rawParseError || null,
+  parseErrorDismissed:  false,
   // Live orchestrator sessions (populated by startSessionsPoll in orchestrator.js)
   activeSessions:   [],
-  // File jump bridge: AgentsView sets this to a slug so FilesView opens it.
+  // Derived join map: storyId → running session. Recomputed automatically by
+  // setState whenever activeSessions is written, so views can join tasks to
+  // live runs without scanning the array (TasksView, Kanban, Overview).
+  runningByStory:   {},
+  // Persisted past runs (populated by startSessionsPoll → fetchHistory)
+  history:          [],
+  // Orchestrator reachability: null = unknown (before first poll),
+  // true = reachable, false = unreachable. Written by the 4s session poll.
+  orchOnline:       null,
+  // Persistent blocked-session alerts (written by notify.js trackBlocked).
+  // [{ storyId, cmd }] — rendered as clickable toasts by NotifyCenter.js.
+  blockedAlerts:    [],
+  // File jump bridge: the agent drawer's "View file in Files" sets this to a
+  // project-relative .md path; FilesView opens it on arrival and clears it.
   requestedFile:    null,
   // xterm terminal panel state (driven by orchestrator.js / XtermPanel.js)
   // { open, storyId, title, minimized, fullscreen }
@@ -47,6 +74,9 @@ let _state = {
   // Orchestrator side-panel state (driven by orchestrator.js / OrchPanel.js)
   // { open, storyId }
   orchPanel:        null,
+  // Runner-picker popover state (driven by components/RunnerPicker.js)
+  // { open, x, y, run: { kind: 'session'|'command', storyId?, cmd, title? } }
+  runnerPicker:     null,
 };
 
 /** Registered subscriber functions. */
@@ -57,11 +87,25 @@ export function getState() {
   return { ..._state };
 }
 
+/** Build the storyId → session map for LIVE sessions. A 'blocked' session is
+ * a live PTY waiting for input, so it counts as live alongside 'running'. */
+function deriveRunningByStory(sessions) {
+  const map = {};
+  for (const s of sessions || []) {
+    if (s && s.storyId && (s.status === 'running' || s.status === 'blocked')) map[s.storyId] = s;
+  }
+  return map;
+}
+
 /**
  * Shallow-merge `patch` into state, then notify all subscribers.
  * Only notifies if at least one key actually changed value.
+ * Writing activeSessions also refreshes the derived runningByStory map.
  */
 export function setState(patch) {
+  if ('activeSessions' in patch) {
+    patch = { ...patch, runningByStory: deriveRunningByStory(patch.activeSessions) };
+  }
   let changed = false;
   for (const key of Object.keys(patch)) {
     if (_state[key] !== patch[key]) {
@@ -107,14 +151,34 @@ export function refresh() {
 
 /**
  * Preact hook. Subscribes the calling component to the store and
- * returns the current state. The component re-renders on every setState().
+ * returns the current state (or the selected slice).
+ *
+ * Without a selector the component re-renders on every setState().
+ * With a selector it re-renders only when the selected value changes
+ * (Object.is), so slice subscribers skip unrelated store traffic:
+ *
+ *   const project = useStore(s => s.project);
+ *
+ * The selector must be pure and is captured on mount — pass a stable
+ * function (module-level or inline reading fixed keys), not one that
+ * closes over changing props.
  */
-export function useStore() {
-  const [state, setLocalState] = useState(getState);
+export function useStore(selector) {
+  const [state, setLocalState] = useState(
+    () => (selector ? selector(_state) : getState())
+  );
   useEffect(() => {
+    const update = (newState) => {
+      if (selector) {
+        const next = selector(newState);
+        setLocalState(prev => (Object.is(prev, next) ? prev : next));
+      } else {
+        setLocalState({ ...newState });
+      }
+    };
     // Resync on mount in case setState was called before mount.
-    setLocalState(getState());
-    const unsub = subscribe(newState => setLocalState({ ...newState }));
+    update(_state);
+    const unsub = subscribe(update);
     return unsub;
   }, []);
   return state;

package/server/lib/html/client/util.js

@@ -33,6 +33,29 @@ export function humanDate(s) {
   }
 }
 
+/**
+ * Display name for the store's `currentPhase`, which may be the contract
+ * object { id, name, status, milestones[] }, a legacy plain string/number
+ * (raw state.json current_phase), or null. Returns '' when absent —
+ * never "[object Object]".
+ */
+export function currentPhaseName(cp) {
+  if (cp == null) return '';
+  if (typeof cp === 'object') return cp.name || (cp.id != null ? String(cp.id) : '');
+  return String(cp);
+}
+
+/**
+ * Identifier for the store's `currentPhase` (same shapes as currentPhaseName).
+ * Prefers the phase id (what commands and phase-card comparisons use);
+ * falls back to the name. Returns '' when absent.
+ */
+export function currentPhaseId(cp) {
+  if (cp == null) return '';
+  if (typeof cp === 'object') return cp.id != null ? String(cp.id) : (cp.name || '');
+  return String(cp);
+}
+
 /**
  * Flatten all sprints across phases.
  * @param {Array} phases — the phases array from the store.
@@ -75,6 +98,27 @@ export function chip(status) {
   return { cls, label: status };
 }
 
+/**
+ * Props for a clickable card row that navigates to a hash route.
+ * Spread onto a list row (`<li ...${rowLink('tasks')}>`) to make it act like
+ * a link: pointer + keyboard activation and an accessible role. Pair with the
+ * `ovr-link` class for the hover/focus affordance.
+ *
+ * @param {string} hash — target hash route without the leading '#'.
+ * @returns {object} Preact props (role, tabindex, onClick, onKeyDown).
+ */
+export function rowLink(hash) {
+  const go = () => { location.hash = hash; };
+  return {
+    role: 'link',
+    tabindex: 0,
+    onClick: go,
+    onKeyDown: (e) => {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(); }
+    },
+  };
+}
+
 /**
  * Human-readable elapsed time since an ISO timestamp.
  * Ported from _orchElapsed() in client-main.js.
@@ -176,3 +220,37 @@ export function phaseHints(p) {
     ];
   }
 }
+
+// ---- Markdown helpers (moved from FilesView so AgentsView can share) ----
+
+/** Strip a leading YAML frontmatter block from a markdown string. */
+export function stripFrontmatter(md) {
+  if (!md.startsWith('---')) return md;
+  const end = md.indexOf('\n---', 3);
+  return end === -1 ? md : md.slice(end + 4).trimStart();
+}
+
+/**
+ * Minimal HTML sanitizer for rendered markdown. No DOMPurify dependency on
+ * the client, so we strip the dangerous primitives via regex after marked
+ * emits HTML: script/iframe/object/embed tags, inline event handlers, and
+ * javascript:/data: URLs in href/src. Markdown content comes from the project
+ * dir (semi-trusted) but may include attacker-controlled text checked into a
+ * repo, so we cannot trust raw HTML passthrough.
+ */
+export function sanitizeHtml(html) {
+  return String(html)
+    .replace(/<\s*(script|iframe|object|embed|link|meta|style)\b[^>]*>[\s\S]*?<\s*\/\s*\1\s*>/gi, '')
+    .replace(/<\s*(script|iframe|object|embed|link|meta|style)\b[^>]*\/?>/gi, '')
+    .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+    .replace(/(href|src|xlink:href)\s*=\s*(["'])\s*(?:javascript|data|vbscript):[^"']*\2/gi, '$1=$2#blocked$2');
+}
+
+/** Render markdown to sanitized HTML via the global `marked` CDN lib. */
+export function renderMd(md) {
+  const clean = stripFrontmatter(md);
+  if (typeof marked === 'undefined') {
+    return '<pre>' + clean.replace(/</g, '&lt;') + '</pre>';
+  }
+  return sanitizeHtml(marked.parse(clean));
+}

package/server/lib/html/client/vendor/htm.js

@@ -0,0 +1 @@
+var n=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a)}return e},t=new Map;export default function(s){var r=t.get(this);return r||(r=new Map,t.set(this,r)),(r=n(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e=""},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0])}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}

package/server/lib/html/client/vendor/preact-hooks.js

@@ -0,0 +1,2 @@
+import{options as n}from"./preact.js";var t,r,u,i,o=0,f=[],c=n,e=c.__b,a=c.__r,v=c.diffed,l=c.__c,m=c.unmount,s=c.__;function d(n,t){c.__h&&c.__h(r,n,o||t),o=0;var u=r.__H||(r.__H={__:[],__h:[]});return n>=u.__.length&&u.__.push({}),u.__[n]}function h(n){return o=1,p(D,n)}function p(n,u,i){var o=d(t++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):D(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}))}],o.__c=r,!r.u)){var f=function(n,t,r){if(!o.__c.__H)return!0;var u=o.__c.__H.__.filter(function(n){return!!n.__c});if(u.every(function(n){return!n.__N}))return!c||c.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0)}}),!(!i&&o.__c.props===n)&&(!c||c.call(this,n,t,r))};r.u=!0;var c=r.shouldComponentUpdate,e=r.componentWillUpdate;r.componentWillUpdate=function(n,t,r){if(this.__e){var u=c;c=void 0,f(n,t,r),c=u}e&&e.call(this,n,t,r)},r.shouldComponentUpdate=f}return o.__N||o.__}function y(n,u){var i=d(t++,3);!c.__s&&C(i.__H,u)&&(i.__=n,i.i=u,r.__H.__h.push(i))}function _(n,u){var i=d(t++,4);!c.__s&&C(i.__H,u)&&(i.__=n,i.i=u,r.__h.push(i))}function A(n){return o=5,T(function(){return{current:n}},[])}function F(n,t,r){o=6,_(function(){return"function"==typeof n?(n(t()),function(){return n(null)}):n?(n.current=t(),function(){return n.current=null}):void 0},null==r?r:r.concat(n))}function T(n,r){var u=d(t++,7);return C(u.__H,r)&&(u.__=n(),u.__H=r,u.__h=n),u.__}function q(n,t){return o=8,T(function(){return n},t)}function x(n){var u=r.context[n.__c],i=d(t++,9);return i.c=n,u?(null==i.__&&(i.__=!0,u.sub(r)),u.props.value):n.__}function P(n,t){c.useDebugValue&&c.useDebugValue(t?t(n):n)}function b(n){var u=d(t++,10),i=h();return u.__=n,r.componentDidCatch||(r.componentDidCatch=function(n,t){u.__&&u.__(n,t),i[1](n)}),[i[0],function(){i[1](void 0)}]}function g(){var n=d(t++,11);if(!n.__){for(var u=r.__v;null!==u&&!u.__m&&null!==u.__;)u=u.__;var i=u.__m||(u.__m=[0,0]);n.__="P"+i[0]+"-"+i[1]++}return n.__}function j(){for(var n;n=f.shift();)if(n.__P&&n.__H)try{n.__H.__h.forEach(z),n.__H.__h.forEach(B),n.__H.__h=[]}catch(t){n.__H.__h=[],c.__e(t,n.__v)}}c.__b=function(n){r=null,e&&e(n)},c.__=function(n,t){n&&t.__k&&t.__k.__m&&(n.__m=t.__k.__m),s&&s(n,t)},c.__r=function(n){a&&a(n),t=0;var i=(r=n.__c).__H;i&&(u===r?(i.__h=[],r.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.i=n.__N=void 0})):(i.__h.forEach(z),i.__h.forEach(B),i.__h=[],t=0)),u=r},c.diffed=function(n){v&&v(n);var t=n.__c;t&&t.__H&&(t.__H.__h.length&&(1!==f.push(t)&&i===c.requestAnimationFrame||((i=c.requestAnimationFrame)||w)(j)),t.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.i=void 0})),u=r=null},c.__c=function(n,t){t.some(function(n){try{n.__h.forEach(z),n.__h=n.__h.filter(function(n){return!n.__||B(n)})}catch(r){t.some(function(n){n.__h&&(n.__h=[])}),t=[],c.__e(r,n.__v)}}),l&&l(n,t)},c.unmount=function(n){m&&m(n);var t,r=n.__c;r&&r.__H&&(r.__H.__.forEach(function(n){try{z(n)}catch(n){t=n}}),r.__H=void 0,t&&c.__e(t,r.__v))};var k="function"==typeof requestAnimationFrame;function w(n){var t,r=function(){clearTimeout(u),k&&cancelAnimationFrame(t),setTimeout(n)},u=setTimeout(r,100);k&&(t=requestAnimationFrame(r))}function z(n){var t=r,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r=t}function B(n){var t=r;n.__c=n.__(),r=t}function C(n,t){return!n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function D(n,t){return"function"==typeof t?t(n):t}export{q as useCallback,x as useContext,P as useDebugValue,y as useEffect,b as useErrorBoundary,g as useId,F as useImperativeHandle,_ as useLayoutEffect,T as useMemo,p as useReducer,A as useRef,h as useState};
+

package/server/lib/html/client/vendor/preact.js

@@ -0,0 +1,2 @@
+var n,l,u,t,i,o,r,f,e,c,s,a,h={},v=[],p=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,y=Array.isArray;function d(n,l){for(var u in l)n[u]=l[u];return n}function w(n){n&&n.parentNode&&n.parentNode.removeChild(n)}function _(l,u,t){var i,o,r,f={};for(r in u)"key"==r?i=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n.call(arguments,2):t),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return g(l,f,i,o,null)}function g(n,t,i,o,r){var f={type:n,props:t,key:i,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,constructor:void 0,__v:null==r?++u:r,__i:-1,__u:0};return null==r&&null!=l.vnode&&l.vnode(f),f}function m(){return{current:null}}function b(n){return n.children}function k(n,l){this.props=n,this.context=l}function x(n,l){if(null==l)return n.__?x(n.__,n.__i+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return"function"==typeof n.type?x(n):null}function C(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return C(n)}}function S(n){(!n.__d&&(n.__d=!0)&&i.push(n)&&!M.__r++||o!==l.debounceRendering)&&((o=l.debounceRendering)||r)(M)}function M(){var n,u,t,o,r,e,c,s;for(i.sort(f);n=i.shift();)n.__d&&(u=i.length,o=void 0,e=(r=(t=n).__v).__e,c=[],s=[],t.__P&&((o=d({},r)).__v=r.__v+1,l.vnode&&l.vnode(o),O(t.__P,o,r,t.__n,t.__P.namespaceURI,32&r.__u?[e]:null,c,null==e?x(r):e,!!(32&r.__u),s),o.__v=r.__v,o.__.__k[o.__i]=o,j(c,o,s),o.__e!=e&&C(o)),i.length>u&&i.sort(f));M.__r=0}function P(n,l,u,t,i,o,r,f,e,c,s){var a,p,y,d,w,_=t&&t.__k||v,g=l.length;for(u.__d=e,$(u,l,_),e=u.__d,a=0;a<g;a++)null!=(y=u.__k[a])&&(p=-1===y.__i?h:_[y.__i]||h,y.__i=a,O(n,y,p,i,o,r,f,e,c,s),d=y.__e,y.ref&&p.ref!=y.ref&&(p.ref&&N(p.ref,null,y),s.push(y.ref,y.__c||d,y)),null==w&&null!=d&&(w=d),65536&y.__u||p.__k===y.__k?e=I(y,e,n):"function"==typeof y.type&&void 0!==y.__d?e=y.__d:d&&(e=d.nextSibling),y.__d=void 0,y.__u&=-196609);u.__d=e,u.__e=w}function $(n,l,u){var t,i,o,r,f,e=l.length,c=u.length,s=c,a=0;for(n.__k=[],t=0;t<e;t++)null!=(i=l[t])&&"boolean"!=typeof i&&"function"!=typeof i?(r=t+a,(i=n.__k[t]="string"==typeof i||"number"==typeof i||"bigint"==typeof i||i.constructor==String?g(null,i,null,null,null):y(i)?g(b,{children:i},null,null,null):void 0===i.constructor&&i.__b>0?g(i.type,i.props,i.key,i.ref?i.ref:null,i.__v):i).__=n,i.__b=n.__b+1,o=null,-1!==(f=i.__i=L(i,u,r,s))&&(s--,(o=u[f])&&(o.__u|=131072)),null==o||null===o.__v?(-1==f&&a--,"function"!=typeof i.type&&(i.__u|=65536)):f!==r&&(f==r-1?a--:f==r+1?a++:(f>r?a--:a++,i.__u|=65536))):i=n.__k[t]=null;if(s)for(t=0;t<c;t++)null!=(o=u[t])&&0==(131072&o.__u)&&(o.__e==n.__d&&(n.__d=x(o)),V(o,o))}function I(n,l,u){var t,i;if("function"==typeof n.type){for(t=n.__k,i=0;t&&i<t.length;i++)t[i]&&(t[i].__=n,l=I(t[i],l,u));return l}n.__e!=l&&(l&&n.type&&!u.contains(l)&&(l=x(n)),u.insertBefore(n.__e,l||null),l=n.__e);do{l=l&&l.nextSibling}while(null!=l&&8===l.nodeType);return l}function H(n,l){return l=l||[],null==n||"boolean"==typeof n||(y(n)?n.some(function(n){H(n,l)}):l.push(n)),l}function L(n,l,u,t){var i=n.key,o=n.type,r=u-1,f=u+1,e=l[u];if(null===e||e&&i==e.key&&o===e.type&&0==(131072&e.__u))return u;if(t>(null!=e&&0==(131072&e.__u)?1:0))for(;r>=0||f<l.length;){if(r>=0){if((e=l[r])&&0==(131072&e.__u)&&i==e.key&&o===e.type)return r;r--}if(f<l.length){if((e=l[f])&&0==(131072&e.__u)&&i==e.key&&o===e.type)return f;f++}}return-1}function T(n,l,u){"-"===l[0]?n.setProperty(l,null==u?"":u):n[l]=null==u?"":"number"!=typeof u||p.test(l)?u:u+"px"}function A(n,l,u,t,i){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else{if("string"==typeof t&&(n.style.cssText=t=""),t)for(l in t)u&&l in u||T(n.style,l,"");if(u)for(l in u)t&&u[l]===t[l]||T(n.style,l,u[l])}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/(PointerCapture)$|Capture$/i,"$1")),l=l.toLowerCase()in n||"onFocusOut"===l||"onFocusIn"===l?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?t?u.u=t.u:(u.u=e,n.addEventListener(l,o?s:c,o)):n.removeEventListener(l,o?s:c,o);else{if("http://www.w3.org/2000/svg"==i)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=l&&"height"!=l&&"href"!=l&&"list"!=l&&"form"!=l&&"tabIndex"!=l&&"download"!=l&&"rowSpan"!=l&&"colSpan"!=l&&"role"!=l&&"popover"!=l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&"-"!==l[4]?n.removeAttribute(l):n.setAttribute(l,"popover"==l&&1==u?"":u))}}function F(n){return function(u){if(this.l){var t=this.l[u.type+n];if(null==u.t)u.t=e++;else if(u.t<t.u)return;return t(l.event?l.event(u):u)}}}function O(n,u,t,i,o,r,f,e,c,s){var a,h,v,p,w,_,g,m,x,C,S,M,$,I,H,L,T=u.type;if(void 0!==u.constructor)return null;128&t.__u&&(c=!!(32&t.__u),r=[e=u.__e=t.__e]),(a=l.__b)&&a(u);n:if("function"==typeof T)try{if(m=u.props,x="prototype"in T&&T.prototype.render,C=(a=T.contextType)&&i[a.__c],S=a?C?C.props.value:a.__:i,t.__c?g=(h=u.__c=t.__c).__=h.__E:(x?u.__c=h=new T(m,S):(u.__c=h=new k(m,S),h.constructor=T,h.render=q),C&&C.sub(h),h.props=m,h.state||(h.state={}),h.context=S,h.__n=i,v=h.__d=!0,h.__h=[],h._sb=[]),x&&null==h.__s&&(h.__s=h.state),x&&null!=T.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=d({},h.__s)),d(h.__s,T.getDerivedStateFromProps(m,h.__s))),p=h.props,w=h.state,h.__v=u,v)x&&null==T.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),x&&null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else{if(x&&null==T.getDerivedStateFromProps&&m!==p&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(m,S),!h.__e&&(null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(m,h.__s,S)||u.__v===t.__v)){for(u.__v!==t.__v&&(h.props=m,h.state=h.__s,h.__d=!1),u.__e=t.__e,u.__k=t.__k,u.__k.some(function(n){n&&(n.__=u)}),M=0;M<h._sb.length;M++)h.__h.push(h._sb[M]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(m,h.__s,S),x&&null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(p,w,_)})}if(h.context=S,h.props=m,h.__P=n,h.__e=!1,$=l.__r,I=0,x){for(h.state=h.__s,h.__d=!1,$&&$(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[]}else do{h.__d=!1,$&&$(u),a=h.render(h.props,h.state,h.context),h.state=h.__s}while(h.__d&&++I<25);h.state=h.__s,null!=h.getChildContext&&(i=d(d({},i),h.getChildContext())),x&&!v&&null!=h.getSnapshotBeforeUpdate&&(_=h.getSnapshotBeforeUpdate(p,w)),P(n,y(L=null!=a&&a.type===b&&null==a.key?a.props.children:a)?L:[L],u,t,i,o,r,f,e,c,s),h.base=u.__e,u.__u&=-161,h.__h.length&&f.push(h),g&&(h.__E=h.__=null)}catch(n){if(u.__v=null,c||null!=r){for(u.__u|=c?160:128;e&&8===e.nodeType&&e.nextSibling;)e=e.nextSibling;r[r.indexOf(e)]=null,u.__e=e}else u.__e=t.__e,u.__k=t.__k;l.__e(n,u,t)}else null==r&&u.__v===t.__v?(u.__k=t.__k,u.__e=t.__e):u.__e=z(t.__e,u,t,i,o,r,f,c,s);(a=l.diffed)&&a(u)}function j(n,u,t){u.__d=void 0;for(var i=0;i<t.length;i++)N(t[i],t[++i],t[++i]);l.__c&&l.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u)})}catch(n){l.__e(n,u.__v)}})}function z(u,t,i,o,r,f,e,c,s){var a,v,p,d,_,g,m,b=i.props,k=t.props,C=t.type;if("svg"===C?r="http://www.w3.org/2000/svg":"math"===C?r="http://www.w3.org/1998/Math/MathML":r||(r="http://www.w3.org/1999/xhtml"),null!=f)for(a=0;a<f.length;a++)if((_=f[a])&&"setAttribute"in _==!!C&&(C?_.localName===C:3===_.nodeType)){u=_,f[a]=null;break}if(null==u){if(null===C)return document.createTextNode(k);u=document.createElementNS(r,C,k.is&&k),c&&(l.__m&&l.__m(t,f),c=!1),f=null}if(null===C)b===k||c&&u.data===k||(u.data=k);else{if(f=f&&n.call(u.childNodes),b=i.props||h,!c&&null!=f)for(b={},a=0;a<u.attributes.length;a++)b[(_=u.attributes[a]).name]=_.value;for(a in b)if(_=b[a],"children"==a);else if("dangerouslySetInnerHTML"==a)p=_;else if(!(a in k)){if("value"==a&&"defaultValue"in k||"checked"==a&&"defaultChecked"in k)continue;A(u,a,null,_,r)}for(a in k)_=k[a],"children"==a?d=_:"dangerouslySetInnerHTML"==a?v=_:"value"==a?g=_:"checked"==a?m=_:c&&"function"!=typeof _||b[a]===_||A(u,a,_,b[a],r);if(v)c||p&&(v.__html===p.__html||v.__html===u.innerHTML)||(u.innerHTML=v.__html),t.__k=[];else if(p&&(u.innerHTML=""),P(u,y(d)?d:[d],t,i,o,"foreignObject"===C?"http://www.w3.org/1999/xhtml":r,f,e,f?f[0]:i.__k&&x(i,0),c,s),null!=f)for(a=f.length;a--;)w(f[a]);c||(a="value","progress"===C&&null==g?u.removeAttribute("value"):void 0!==g&&(g!==u[a]||"progress"===C&&!g||"option"===C&&g!==b[a])&&A(u,a,g,b[a],r),a="checked",void 0!==m&&m!==u[a]&&A(u,a,m,b[a],r))}return u}function N(n,u,t){try{if("function"==typeof n){var i="function"==typeof n.__u;i&&n.__u(),i&&null==u||(n.__u=n(u))}else n.current=u}catch(n){l.__e(n,t)}}function V(n,u,t){var i,o;if(l.unmount&&l.unmount(n),(i=n.ref)&&(i.current&&i.current!==n.__e||N(i,null,u)),null!=(i=n.__c)){if(i.componentWillUnmount)try{i.componentWillUnmount()}catch(n){l.__e(n,u)}i.base=i.__P=null}if(i=n.__k)for(o=0;o<i.length;o++)i[o]&&V(i[o],u,t||"function"!=typeof n.type);t||w(n.__e),n.__c=n.__=n.__e=n.__d=void 0}function q(n,l,u){return this.constructor(n,u)}function B(u,t,i){var o,r,f,e;l.__&&l.__(u,t),r=(o="function"==typeof i)?null:i&&i.__k||t.__k,f=[],e=[],O(t,u=(!o&&i||t).__k=_(b,null,[u]),r||h,h,t.namespaceURI,!o&&i?[i]:r?null:t.firstChild?n.call(t.childNodes):null,f,!o&&i?i:r?r.__e:t.firstChild,o,e),j(f,u,e)}function D(n,l){B(n,l,D)}function E(l,u,t){var i,o,r,f,e=d({},l.props);for(r in l.type&&l.type.defaultProps&&(f=l.type.defaultProps),u)"key"==r?i=u[r]:"ref"==r?o=u[r]:e[r]=void 0===u[r]&&void 0!==f?f[r]:u[r];return arguments.length>2&&(e.children=arguments.length>3?n.call(arguments,2):t),g(l.type,e,i||l.key,o||l.ref,null)}function G(n,l){var u={__c:l="__cC"+a++,__:n,Consumer:function(n,l){return n.children(l)},Provider:function(n){var u,t;return this.getChildContext||(u=new Set,(t={})[l]=this,this.getChildContext=function(){return t},this.componentWillUnmount=function(){u=null},this.shouldComponentUpdate=function(n){this.props.value!==n.value&&u.forEach(function(n){n.__e=!0,S(n)})},this.sub=function(n){u.add(n);var l=n.componentWillUnmount;n.componentWillUnmount=function(){u&&u.delete(n),l&&l.call(n)}}),n.children}};return u.Provider.__=u.Consumer.contextType=u}n=v.slice,l={__e:function(n,l,u,t){for(var i,o,r;l=l.__;)if((i=l.__c)&&!i.__)try{if((o=i.constructor)&&null!=o.getDerivedStateFromError&&(i.setState(o.getDerivedStateFromError(n)),r=i.__d),null!=i.componentDidCatch&&(i.componentDidCatch(n,t||{}),r=i.__d),r)return i.__E=i}catch(l){n=l}throw n}},u=0,t=function(n){return null!=n&&null==n.constructor},k.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=d({},this.state),"function"==typeof n&&(n=n(d({},u),this.props)),n&&d(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),S(this))},k.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),S(this))},k.prototype.render=b,i=[],r="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,f=function(n,l){return n.__v.__b-l.__v.__b},M.__r=0,e=0,c=F(!1),s=F(!0),a=0;export{k as Component,b as Fragment,E as cloneElement,G as createContext,_ as createElement,m as createRef,_ as h,D as hydrate,t as isValidElement,l as options,B as render,H as toChildArray};
+

package/server/lib/html/client/views/AgentsView.js

@@ -1,83 +1,176 @@
 /**
- * AgentsView — Preact port of the #view-agents markup from shell.js.
+ * AgentsView — Team roster: category sections of rich agent cards plus an
+ * agent detail drawer (components/AgentCard.js).
  *
- * Renders Team (real agents) and AI Agents groups from the AGENTS roster
- * that was moved client-side into agents-data.js.
+ * Cards render from the client-side AGENTS roster (agents-data.js) plus a
+ * one-shot /api/agents call that returns frontmatter metadata (description,
+ * model, tools) per agent definition — small payload, so cards can show
+ * summaries and chips without touching prompt bodies.
  *
- * Clicking an agent sets store.requestedFile = skillSlug and navigates to
- * the Files view, replacing the legacy viewAgentSkill() setTimeout+DOM-poll
- * hack in shell.js. FilesView watches requestedFile and pre-fills the filter.
+ * Clicking a card opens the drawer with the agent's FULL prompt: the actual
+ * rcode/agents/<file> body fetched lazily through the existing /api/file
+ * handler and rendered as markdown. Prompts are fetched one at a time on
+ * click (never all at once) and cached per file for the session.
  */
 
-import { html, useState } from '../preact.js';
-import { setState } from '../store.js';
+import { html, useState, useEffect, useCallback, useMemo } from '../preact.js';
+import { AgentCard, AgentDrawer } from '../components/AgentCard.js';
 import { AGENTS } from '../agents-data.js';
 
-const REAL_AGENTS = AGENTS.filter(a => a.real);
-const AI_AGENTS   = AGENTS.filter(a => !a.real);
+// Category sections in display order. Roster `type` values not listed here
+// fall into Specialists so a future type can't silently drop agents.
+const SECTIONS = [
+  { label: 'Leadership',  types: ['leadership'] },
+  { label: 'Engineering', types: ['engineering'] },
+  { label: 'Product',     types: ['product'] },
+  { label: 'Design',      types: ['design'] },
+  { label: 'Quality',     types: ['quality'] },
+  { label: 'Specialists', types: ['support', 'system'] },
+];
+const KNOWN_TYPES = SECTIONS.flatMap(s => s.types);
 
-// ---- Single agent card ----
-function AgentCard({ agent }) {
-  const skillSlug = agent.name.split(' ')[0].toLowerCase();
-
-  function handleClick() {
-    // Navigate to Files view and pre-fill search with the agent's skill slug.
-    // FilesView watches requestedFile in the store and responds via useEffect.
-    setState({ requestedFile: skillSlug });
-    window.location.hash = 'files';
-  }
+function agentsForSection(section) {
+  return AGENTS.filter(a =>
+    section.types.includes(a.type) ||
+    (section.label === 'Specialists' && !KNOWN_TYPES.includes(a.type))
+  );
+}
 
-  return html`
-    <div
-      class="agent-card"
-      onClick=${handleClick}
-      style="cursor:pointer;"
-    >
-      <div class="name">
-        ${agent.name}
-        ${agent.real ? html` <span class="real-badge">real</span>` : null}
-        ${' '}<span class="type-badge">${agent.type}</span>
-      </div>
-      <div class="arabic">${agent.arabic}</div>
-      <div class="role">${agent.role}</div>
-    </div>
-  `;
+function matchesFilter(agent, meta, filter) {
+  if (!filter) return true;
+  const haystack = [
+    agent.name, agent.role, agent.arabic, agent.type,
+    meta && meta.model, meta && meta.description, meta && (meta.tools || []).join(' '),
+  ].filter(Boolean).join(' ');
+  return haystack.toLowerCase().includes(filter.toLowerCase());
 }
 
-// ---- Agent group ----
-function AgentGroup({ label, agents, filter }) {
-  const visible = agents.filter(a => {
-    if (!filter) return true;
-    const q = filter.toLowerCase();
-    return (a.name + ' ' + a.role + ' ' + a.arabic + ' ' + a.type).toLowerCase().includes(q);
-  });
-  if (!visible.length) return null;
+// Session-local prompt cache: file name -> raw markdown. Re-opening a card
+// renders from here instead of refetching.
+const promptCache = new Map();
+
+// ---- Section: sticky header + card grid ----
+function AgentSection({ section, agents, metaByFile, onOpen }) {
+  if (!agents.length) return null;
   return html`
-    <div class="memory-group-header">${label} (${visible.length})</div>
-    <div class="agent-list">
-      ${visible.map(a => html`<${AgentCard} key=${a.name} agent=${a} />`)}
+    <div class="agent-section">
+      <div class="agent-section-head">
+        ${section.label}
+        <span class="agent-section-count">${agents.length}</span>
+      </div>
+      <div class="agent-grid">
+        ${agents.map(a => html`
+          <${AgentCard}
+            key=${a.name}
+            agent=${a}
+            meta=${a.file ? metaByFile[a.file] : null}
+            onOpen=${onOpen}
+          />
+        `)}
+      </div>
     </div>
   `;
 }
 
 // ---- Root AgentsView ----
 export function AgentsView() {
-  const [filter, setFilter] = useState('');
+  const [filter, setFilter]         = useState('');
+  const [metaByFile, setMetaByFile] = useState({});
+  const [selected, setSelected]     = useState(null);
+  const [prompt, setPrompt]         = useState({ loading: false, error: null, text: null });
+
+  // One-shot roster metadata fetch — frontmatter summaries only, no bodies.
+  useEffect(() => {
+    fetch('/api/agents')
+      .then(r => r.json())
+      .then(list => {
+        const map = {};
+        for (const a of (Array.isArray(list) ? list : [])) map[a.file] = a;
+        setMetaByFile(map);
+      })
+      .catch(() => { /* chips/summaries are progressive enhancement — cards still render */ });
+  }, []);
+
+  const openAgent = useCallback(async (agent) => {
+    setSelected(agent);
+    if (!agent.file) {
+      setPrompt({ loading: false, error: null, text: null });
+      return;
+    }
+    if (promptCache.has(agent.file)) {
+      setPrompt({ loading: false, error: null, text: promptCache.get(agent.file) });
+      return;
+    }
+    setPrompt({ loading: true, error: null, text: null });
+    try {
+      const resp = await fetch('/api/file?path=' + encodeURIComponent('rcode/agents/' + agent.file));
+      if (!resp.ok) {
+        const msg = resp.status === 404
+          ? 'Prompt file not found: rcode/agents/' + agent.file
+          : 'Failed to load prompt (HTTP ' + resp.status + ').';
+        setPrompt({ loading: false, error: msg, text: null });
+        return;
+      }
+      const text = await resp.text();
+      promptCache.set(agent.file, text);
+      setPrompt({ loading: false, error: null, text });
+    } catch {
+      setPrompt({ loading: false, error: 'Network error.', text: null });
+    }
+  }, []);
+
+  const closeDrawer = useCallback(() => setSelected(null), []);
+
+  // Escape closes the drawer while it is open.
+  useEffect(() => {
+    if (!selected) return;
+    const onKey = (e) => { if (e.key === 'Escape') closeDrawer(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [selected, closeDrawer]);
+
+  const sections = useMemo(() =>
+    SECTIONS.map(s => ({
+      section: s,
+      agents: agentsForSection(s).filter(a =>
+        matchesFilter(a, a.file ? metaByFile[a.file] : null, filter)),
+    })),
+  [filter, metaByFile]);
+
+  const visibleCount = sections.reduce((n, s) => n + s.agents.length, 0);
 
   return html`
     <div class="view active" id="view-agents">
       <div class="view-title">Team</div>
-      <div class="filter-bar">
+      <div class="filter-bar agent-filter-bar">
         <input
           class="filter-input"
           type="text"
-          placeholder="Filter agents…"
+          placeholder="Search agents by name, role, model, or tool…"
           value=${filter}
           onInput=${e => setFilter(e.target.value)}
         />
+        <span class="agent-count">${visibleCount} agent${visibleCount === 1 ? '' : 's'}</span>
       </div>
-      <${AgentGroup} label="Team" agents=${REAL_AGENTS} filter=${filter} />
-      <${AgentGroup} label="AI Agents" agents=${AI_AGENTS} filter=${filter} />
+      ${visibleCount === 0
+        ? html`<div class="empty">No agents match “${filter}”.</div>`
+        : sections.map(({ section, agents }) => html`
+            <${AgentSection}
+              key=${section.label}
+              section=${section}
+              agents=${agents}
+              metaByFile=${metaByFile}
+              onOpen=${openAgent}
+            />
+          `)}
+      ${selected ? html`
+        <${AgentDrawer}
+          agent=${selected}
+          meta=${selected.file ? metaByFile[selected.file] : null}
+          prompt=${prompt}
+          onClose=${closeDrawer}
+        />
+      ` : null}
     </div>
   `;
 }