@monoes/monomindcli 1.10.56 → 1.11.0

package/dist/src/ui/dashboard.html

@@ -280,7 +280,7 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .oi-chip.live { background: oklch(65% 0.15 150 / 0.12); color: var(--green); }
 
 /* detail pane */
-#org-detail-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+#org-detail-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; }
 #org-detail-pane.empty-state { align-items: center; justify-content: center; }
 .orgs-no-sel { color: var(--text-lo); font-size: 13px; text-align: center; }
 .orgs-no-sel-ico { font-size: 28px; margin-bottom: 10px; opacity: 0.3; }
@@ -304,6 +304,61 @@ html, body { height: 100%; background: var(--bg); color: var(--text-hi); font-fa
 .odt-pane { display: none; }
 .odt-pane.active { display: block; }
 
+/* agent detail drawer (slides in from right within the org detail pane) */
+#org-agent-drawer {
+  position: absolute; top: 0; right: 0; height: 100%;
+  width: min(420px, 82%);
+  background: var(--surface); border-left: 1px solid var(--border);
+  box-shadow: -16px 0 44px -14px oklch(0% 0 0 / 0.5);
+  transform: translateX(101%);
+  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex; flex-direction: column; z-index: 40; min-width: 0;
+}
+#org-agent-drawer.open { transform: translateX(0); }
+@media (prefers-reduced-motion: reduce) { #org-agent-drawer { transition: none; } }
+#oad-head { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+.oad-avatar { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: var(--surface-hi); object-fit: cover; }
+.oad-id { flex: 1; min-width: 0; }
+.oad-name { font-size: 15px; font-weight: 600; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oad-pills { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
+.oad-pill { font-size: 10px; padding: 2px 7px; border-radius: 7px; background: var(--surface-hi); color: var(--text-lo); }
+.oad-pill.model { color: var(--accent); background: oklch(72% 0.18 75 / 0.1); }
+.oad-close { background: none; border: none; color: var(--text-lo); font-size: 14px; cursor: pointer; padding: 4px 7px; border-radius: 6px; line-height: 1; flex-shrink: 0; }
+.oad-close:hover { color: var(--text-hi); background: var(--surface-hi); }
+#oad-body { flex: 1; overflow-y: auto; padding: 16px; }
+#oad-body::-webkit-scrollbar { width: 3px; }
+#oad-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+.oad-loading, .oad-empty { color: var(--text-lo); font-size: 12px; padding: 6px 0; line-height: 1.5; }
+.oad-empty code, .oad-doc code { background: var(--surface-hi); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); font-size: 0.92em; }
+.oad-desc { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; margin-bottom: 16px; }
+.oad-sec { margin-bottom: 18px; }
+.oad-sec-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-lo); margin-bottom: 9px; display: flex; align-items: baseline; gap: 8px; }
+.oad-file { text-transform: none; letter-spacing: 0; opacity: 0.55; font-size: 10px; font-family: var(--mono); }
+.oad-chars { display: flex; flex-direction: column; gap: 7px; }
+.oad-char { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 12px; align-items: start; }
+.oad-char-k { color: var(--text-lo); }
+.oad-char-v { color: var(--text-hi); }
+.oad-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+.oad-chip { font-size: 11px; padding: 3px 9px; border-radius: 9px; background: oklch(65% 0.12 240 / 0.13); color: oklch(74% 0.1 240); }
+.oad-chip.alt { background: oklch(65% 0.15 150 / 0.11); color: oklch(72% 0.13 150); }
+.oad-list { margin: 0; padding-left: 17px; }
+.oad-list li { font-size: 12px; color: var(--text-mid); line-height: 1.5; margin-bottom: 3px; }
+.oad-doc { font-size: 12.5px; color: var(--text-mid); line-height: 1.55; }
+.oad-doc h1, .oad-doc h2, .oad-doc h3, .oad-doc h4, .oad-doc h5, .oad-doc h6 { color: var(--text-hi); margin: 15px 0 7px; line-height: 1.3; }
+.oad-doc h1 { font-size: 15px; } .oad-doc h2 { font-size: 13.5px; } .oad-doc h3 { font-size: 12.5px; } .oad-doc h4 { font-size: 12px; }
+.oad-doc p { margin: 0 0 9px; }
+.oad-doc ul, .oad-doc ol { margin: 0 0 9px; padding-left: 18px; }
+.oad-doc li { margin-bottom: 3px; }
+.oad-doc strong { color: var(--text-hi); font-weight: 600; }
+.oad-doc pre { background: var(--surface-hi); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0 0 10px; }
+.oad-doc pre code { background: none; padding: 0; font-size: 11.5px; color: var(--text-mid); }
+/* clickable org chart nodes + role cards */
+.v2oc-node { cursor: pointer; }
+.v2oc-node.selected > circle { stroke-width: 3.4 !important; }
+.role-v2 { cursor: pointer; transition: border-color 0.12s, transform 0.12s; }
+.role-v2:hover { transform: translateY(-1px); }
+.rv2-more { margin-top: 9px; font-size: 10.5px; color: var(--accent); opacity: 0.85; }
+
 /* org meta strip */
 .org-meta-strip { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
 .oms-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; }
@@ -1690,34 +1745,12 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
           </div>
           <div id="org-detail-tabs">
             <button class="odt-btn active" data-tab="chart" onclick="v2SwitchOrgTab('chart')">Chart</button>
-            <button class="odt-btn" data-tab="roles" onclick="v2SwitchOrgTab('roles')">Roles</button>
             <button class="odt-btn" data-tab="activity" onclick="v2SwitchOrgTab('activity')">Activity</button>
             <button class="odt-btn" data-tab="health" onclick="v2SwitchOrgTab('health')">Health</button>
-            <button class="odt-btn" data-tab="heartbeats" onclick="v2SwitchOrgTab('heartbeats')">Heartbeats</button>
-            <button class="odt-btn" data-tab="tasks" onclick="v2SwitchOrgTab('tasks')">Tasks</button>
-            <button class="odt-btn" data-tab="costs" onclick="v2SwitchOrgTab('costs')">Costs</button>
-            <button class="odt-btn" data-tab="members" onclick="v2SwitchOrgTab('members')">Members</button>
-            <button class="odt-btn" data-tab="goals"     onclick="v2SwitchOrgTab('goals')">Goals</button>
-            <button class="odt-btn" data-tab="board"     onclick="v2SwitchOrgTab('board')">Board</button>
-            <button class="odt-btn" data-tab="live"      onclick="v2SwitchOrgTab('live')">Live</button>
             <button class="odt-btn" data-tab="approvals" onclick="v2SwitchOrgTab('approvals')">Approvals</button>
-            <button class="odt-btn" data-tab="secrets"   onclick="v2SwitchOrgTab('secrets')">Secrets</button>
-            <button class="odt-btn" data-tab="settings"  onclick="v2SwitchOrgTab('settings')">Settings</button>
-            <button class="odt-btn" data-tab="routines"  onclick="v2SwitchOrgTab('routines')">Routines</button>
-            <button class="odt-btn" data-tab="myissues"  onclick="v2SwitchOrgTab('myissues')">My Issues</button>
             <button class="odt-btn" data-tab="budgets"   onclick="v2SwitchOrgTab('budgets')">Budgets</button>
-            <button class="odt-btn" data-tab="plugins"   onclick="v2SwitchOrgTab('plugins')">Plugins</button>
             <button class="odt-btn" data-tab="charts"       onclick="v2SwitchOrgTab('charts')">Charts</button>
-            <button class="odt-btn" data-tab="projects"     onclick="v2SwitchOrgTab('projects')">Projects</button>
             <button class="odt-btn" data-tab="skills"       onclick="v2SwitchOrgTab('skills')">Skills</button>
-            <button class="odt-btn" data-tab="workspaces"   onclick="v2SwitchOrgTab('workspaces')">Workspaces</button>
-            <button class="odt-btn" data-tab="invites"      onclick="v2SwitchOrgTab('invites')">Invites</button>
-            <button class="odt-btn" data-tab="agents-full"  onclick="v2SwitchOrgTab('agents-full')">Agents</button>
-            <button class="odt-btn" data-tab="environments" onclick="v2SwitchOrgTab('environments')">Environments</button>
-            <button class="odt-btn" data-tab="access"       onclick="v2SwitchOrgTab('access')">Access</button>
-            <button class="odt-btn" data-tab="issues-full"  onclick="v2SwitchOrgTab('issues-full')">Issues</button>
-            <button class="odt-btn" data-tab="join-requests" onclick="v2SwitchOrgTab('join-requests')">Join Queue</button>
-            <button class="odt-btn" data-tab="threads"      onclick="v2SwitchOrgTab('threads')">Threads</button>
           </div>
           <div id="org-detail-body">
             <div class="odt-pane active" id="odt-chart"></div>
@@ -1751,6 +1784,11 @@ textarea.sess-note-input:focus { border-color:var(--accent); }
             <div class="odt-pane" id="odt-threads"></div>
           </div>
         </div>
+        <!-- agent detail drawer (node-click / role-card-click) -->
+        <div id="org-agent-drawer" aria-hidden="true">
+          <div id="oad-head"></div>
+          <div id="oad-body"></div>
+        </div>
       </div>
     </div>
 
@@ -4544,6 +4582,7 @@ function v2RenderOrgList() {
 
 async function v2SelectOrg(name) {
   _v2SelOrg = name;
+  if (typeof v2CloseAgent === 'function') v2CloseAgent();
   const requested = name;
   const requestedDir = DIR;
   document.querySelectorAll('.org-item').forEach(el => {
@@ -4586,6 +4625,7 @@ async function v2SelectOrg(name) {
     _v2OrgData._agents  = Array.isArray(agentsR)  ? agentsR  : (agentsR?.agents  || []);
     _v2OrgData._budgets = budgetsR;
     _v2OrgData._members = Array.isArray(membersR) ? membersR : (membersR?.members || []);
+    _v2OrgData._joinRequests = (membersR && membersR.join_requests) || [];
     _v2OrgData._issues  = Array.isArray(issuesR)  ? issuesR  : (issuesR?.issues   || []);
   } catch (_) {
     if (_v2SelOrg !== requested || DIR !== requestedDir) return;
@@ -4865,8 +4905,8 @@ function v2RenderOrgChart() {
     const nameY = subType ? (R * 0.55 + 2).toFixed(0) : (R * 0.55 + 8).toFixed(0);
     const avR = Math.round(R * 0.52);
     const avatarSrc = v2RoleAvatar(role);
-    nodesHTML += `<g class="v2oc-node" transform="translate(${p.x.toFixed(1)},${p.y.toFixed(1)})">
-      <title>${esc(displayName)}${subType ? ` · ${esc(subType)}` : ''}</title>
+    nodesHTML += `<g class="v2oc-node" data-role="${esc(role.id)}" onclick="v2OpenAgent('${String(role.id).replace(/['\\]/g,'\\$&')}')" transform="translate(${p.x.toFixed(1)},${p.y.toFixed(1)})">
+      <title>${esc(displayName)}${subType ? ` · ${esc(subType)}` : ''} — click for details</title>
       ${outerRing}
       <circle r="${R}" fill="oklch(12% 0.008 55)" stroke="${color}" stroke-width="${leader ? 2.5 : 1.8}" filter="url(#v2glow)"/>
       <image href="${avatarSrc}" x="${-avR}" y="${-R + 2}" width="${avR * 2}" height="${avR * 2}" clip-path="url(#${nodeClipIds[i]})" preserveAspectRatio="xMidYMid meet" onerror="this.setAttribute('href','data/avatars/coder.svg')"/>
@@ -5007,7 +5047,7 @@ function v2RenderOrgRoles() {
     const displayName = r.name || r.title || r.id;
     const roleType = r.type || r.agent_type || '';
     const avatarSrc = v2RoleAvatar(r);
-    return `<div class="role-v2" style="border-top:2px solid ${color}">
+    return `<div class="role-v2" style="border-top:2px solid ${color}" onclick="v2OpenAgent('${String(r.id).replace(/['\\]/g,'\\$&')}')" title="View agent characteristics, skills & instructions">
       <div class="rv2-head">
         <img class="rv2-avatar" src="${avatarSrc}" alt="${esc(displayName)}" loading="lazy" onerror="this.src='data/avatars/coder.svg'"/>
         <div class="rv2-info">
@@ -5018,10 +5058,127 @@ function v2RenderOrgRoles() {
       <div class="rv2-id">${esc(r.id)}</div>
       ${r.reports_to ? `<div class="rv2-reports">reports to <span>${esc(r.reports_to)}</span></div>` : ''}
       ${resps.length ? `<div class="rv2-resps">${resps.map(s=>`<div class="rv2-resp">${esc(s)}</div>`).join('')}</div>` : ''}
+      <div class="rv2-more">View characteristics, skills &amp; instructions →</div>
     </div>`;
   }).join('')}</div>`;
 }
 
+// ── agent detail drawer ──────────────────────
+function v2HighlightAgentNode(roleId) {
+  document.querySelectorAll('#v2oc-nodes .v2oc-node').forEach(n =>
+    n.classList.toggle('selected', !!roleId && n.getAttribute('data-role') === roleId));
+}
+function v2CloseAgent() {
+  const drawer = document.getElementById('org-agent-drawer');
+  if (drawer) { drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); }
+  v2HighlightAgentNode(null);
+}
+async function v2OpenAgent(roleId) {
+  if (!_v2SelOrg || !roleId) return;
+  const drawer = document.getElementById('org-agent-drawer');
+  const bodyEl = document.getElementById('oad-body');
+  const headEl = document.getElementById('oad-head');
+  if (!drawer || !bodyEl || !headEl) return;
+  drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false');
+  v2HighlightAgentNode(roleId);
+  headEl.innerHTML = '<button class="oad-close" onclick="v2CloseAgent()" aria-label="Close">✕</button>';
+  bodyEl.innerHTML = '<div class="oad-loading">Loading agent…</div>';
+  try {
+    const r = await fetch(`/api/org/${encodeURIComponent(_v2SelOrg)}/agent/${encodeURIComponent(roleId)}${DIR ? '?dir=' + encodeURIComponent(DIR) : ''}`);
+    if (!r.ok) throw new Error('not found');
+    v2RenderAgentDrawer(await r.json());
+  } catch (_) {
+    bodyEl.innerHTML = '<div class="oad-loading">Could not load agent detail.</div>';
+  }
+}
+function v2RenderAgentDrawer(data) {
+  const role = (data && data.role) || {};
+  const def = (data && data.definition) || { found: false };
+  const cap = def.capability || {};
+  const headEl = document.getElementById('oad-head');
+  const bodyEl = document.getElementById('oad-body');
+  if (!headEl || !bodyEl) return;
+  const name = role.name || role.title || role.id || 'Agent';
+  const type = role.agent_type || role.type || '';
+  const model = (role.adapter_config && role.adapter_config.model) || cap.model_preference || '';
+  const avatar = v2RoleAvatar(role);
+
+  headEl.innerHTML = `
+    <img class="oad-avatar" src="${avatar}" alt="${esc(name)}" onerror="this.src='data/avatars/coder.svg'"/>
+    <div class="oad-id">
+      <div class="oad-name">${esc(name)}</div>
+      <div class="oad-pills">
+        ${type ? `<span class="oad-pill">${esc(type)}</span>` : ''}
+        ${model ? `<span class="oad-pill model">${esc(model)}</span>` : ''}
+      </div>
+    </div>
+    <button class="oad-close" onclick="v2CloseAgent()" aria-label="Close">✕</button>`;
+
+  const chars = [];
+  if (cap.goal) chars.push(['Goal', cap.goal]);
+  if (role.reports_to) chars.push(['Reports to', role.reports_to]);
+  if (model) chars.push(['Model', model]);
+  if (role.adapter_config && role.adapter_config.max_tokens) chars.push(['Max tokens', String(role.adapter_config.max_tokens)]);
+  if (cap.input_type) chars.push(['Input', cap.input_type]);
+  if (cap.output_type) chars.push(['Output', cap.output_type]);
+  if (cap.termination) chars.push(['Done when', cap.termination]);
+  if (cap.version) chars.push(['Version', cap.version]);
+
+  const skills = [];
+  (Array.isArray(role.skills) ? role.skills : []).forEach(s => { if (s && !skills.includes(s)) skills.push(s); });
+  (Array.isArray(cap.expertise) ? cap.expertise : []).forEach(s => { if (s && !skills.includes(s)) skills.push(s); });
+  const taskTypes = Array.isArray(cap.task_types) ? cap.task_types : [];
+  const resps = Array.isArray(role.responsibilities) ? role.responsibilities : [];
+
+  let html = '';
+  if (def.description) html += `<div class="oad-desc">${esc(def.description)}</div>`;
+  if (chars.length) html += `<div class="oad-sec"><div class="oad-sec-h">Characteristics</div><div class="oad-chars">${chars.map(([k, v]) => `<div class="oad-char"><span class="oad-char-k">${esc(k)}</span><span class="oad-char-v">${esc(v)}</span></div>`).join('')}</div></div>`;
+  if (skills.length) html += `<div class="oad-sec"><div class="oad-sec-h">Skills &amp; expertise</div><div class="oad-chips">${skills.map(s => `<span class="oad-chip">${esc(s)}</span>`).join('')}</div></div>`;
+  if (resps.length) html += `<div class="oad-sec"><div class="oad-sec-h">Responsibilities</div><ul class="oad-list">${resps.map(s => `<li>${esc(s)}</li>`).join('')}</ul></div>`;
+  if (taskTypes.length) html += `<div class="oad-sec"><div class="oad-sec-h">Task types</div><div class="oad-chips">${taskTypes.map(s => `<span class="oad-chip alt">${esc(s)}</span>`).join('')}</div></div>`;
+  if (def.found && def.document) {
+    html += `<div class="oad-sec"><div class="oad-sec-h">Instructions &amp; document${def.file ? ` <span class="oad-file">${esc(def.file)}</span>` : ''}</div><div class="oad-doc">${v2RenderMarkdown(def.document)}</div></div>`;
+  } else {
+    html += `<div class="oad-sec"><div class="oad-empty">No instruction document is defined for agent type <code>${esc(type || '?')}</code>. Showing org-configured details only.</div></div>`;
+  }
+  bodyEl.innerHTML = html;
+  bodyEl.scrollTop = 0;
+}
+// Minimal, XSS-safe markdown → HTML (headings, lists, code, bold/italic, inline code).
+function v2RenderMarkdown(md) {
+  if (!md) return '';
+  const escHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const blocks = [];
+  let src = String(md).replace(/```(\w*)\n([\s\S]*?)```/g, (_m, _lang, code) => {
+    blocks.push('<pre><code>' + escHtml(code.replace(/\n$/, '')) + '</code></pre>');
+    return ' B' + (blocks.length - 1) + ' ';
+  });
+  src = escHtml(src);
+  src = src.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>')
+           .replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>')
+           .replace(/^####\s+(.+)$/gm, '<h4>$1</h4>')
+           .replace(/^###\s+(.+)$/gm, '<h3>$1</h3>')
+           .replace(/^##\s+(.+)$/gm, '<h2>$1</h2>')
+           .replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
+  src = src.replace(/`([^`]+)`/g, '<code>$1</code>');
+  src = src.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>').replace(/(^|[^*])\*([^*\n]+)\*/g, '$1<em>$2</em>');
+  let html = '', inUl = false, inOl = false;
+  const closeLists = () => { if (inUl) { html += '</ul>'; inUl = false; } if (inOl) { html += '</ol>'; inOl = false; } };
+  for (const ln of src.split('\n')) {
+    const ul = ln.match(/^\s*[-*]\s+(.+)$/);
+    const ol = ln.match(/^\s*\d+\.\s+(.+)$/);
+    if (ul) { if (inOl) { html += '</ol>'; inOl = false; } if (!inUl) { html += '<ul>'; inUl = true; } html += '<li>' + ul[1] + '</li>'; continue; }
+    if (ol) { if (inUl) { html += '</ul>'; inUl = false; } if (!inOl) { html += '<ol>'; inOl = true; } html += '<li>' + ol[1] + '</li>'; continue; }
+    closeLists();
+    if (/^<h[1-6]>/.test(ln) || /^ B\d+ $/.test(ln.trim())) { html += ln; continue; }
+    if (ln.trim() === '') continue;
+    html += '<p>' + ln + '</p>';
+  }
+  closeLists();
+  html = html.replace(/<p>( B\d+ )<\/p>/g, '$1').replace(/ B(\d+) /g, (_m, i) => blocks[+i] || '');
+  return html;
+}
+
 // ── org activity ────────────────────────────
 function v2RenderOrgActivity() {
   if (!_v2SelOrg) return;
@@ -5070,13 +5227,22 @@ function v2RenderOrgHeartbeats() {
   if (!_v2SelOrg) return;
   const pane = document.getElementById('odt-heartbeats');
   if (!pane) return;
-  const hb = Array.isArray(_v2OrgData?.heartbeats) ? _v2OrgData.heartbeats : [];
-  if (!hb.length) { pane.innerHTML = '<div class="empty">No heartbeat data</div>'; return; }
-  pane.innerHTML = `<div class="m-group-title">Heartbeats</div>` +
-    hb.slice(0, 30).map(h => `<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px">
-      <span style="color:var(--text-hi);font-family:monospace">${esc(h.agent || '—')}</span>
-      <span style="color:var(--text-lo)">${relTime(h.ts)}</span>
-      <span class="ss-pill ${h.ok !== false ? 'on' : 'warn'}">${h.ok !== false ? 'OK' : 'WARN'}</span>
+  // Derive from the agent roster — each agent carries status + lastHeartbeat
+  let hb = Array.isArray(_v2OrgData?.heartbeats) ? _v2OrgData.heartbeats : [];
+  if (!hb.length && Array.isArray(_v2OrgData?._agents)) {
+    hb = _v2OrgData._agents.map(a => ({
+      agent: a.title || a.id || '—',
+      ts: a.lastHeartbeat ?? a.last_heartbeat ?? a.ts ?? null,
+      status: a.status || 'idle',
+    }));
+  }
+  if (!hb.length) { pane.innerHTML = '<div class="empty">No agents to report</div>'; return; }
+  const cls = (st) => (st === 'active' || st === 'running') ? 'on' : ((st === 'error' || st === 'failed') ? 'warn' : '');
+  pane.innerHTML = `<div class="m-group-title">Agent Heartbeats</div>` +
+    hb.slice(0, 50).map(h => `<div style="display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px">
+      <span style="color:var(--text-hi);font-family:var(--mono);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(h.agent || '—')}</span>
+      <span style="color:var(--text-lo);white-space:nowrap">${h.ts ? relTime(h.ts) : 'never'}</span>
+      <span class="ss-pill ${cls(h.status)}">${esc(String(h.status || 'idle').toUpperCase())}</span>
     </div>`).join('');
 }
 
@@ -5085,13 +5251,24 @@ function v2RenderOrgTasks() {
   if (!_v2SelOrg) return;
   const pane = document.getElementById('odt-tasks');
   if (!pane) return;
-  const tasks = Array.isArray(_v2OrgData?.tasks) ? _v2OrgData.tasks : [];
+  // Normalize: API returns {todo:[],doing:[],done:[]} (columns) or a flat array
+  const raw = _v2OrgData?.tasks;
+  let tasks = [];
+  if (Array.isArray(raw)) tasks = raw.slice();
+  else if (raw && typeof raw === 'object') {
+    for (const [col, items] of Object.entries(raw)) {
+      (Array.isArray(items) ? items : []).forEach(t => tasks.push({ ...t, status: t.status || col }));
+    }
+  }
   if (!tasks.length) { pane.innerHTML = '<div class="empty">No tasks</div>'; return; }
-  pane.innerHTML = `<div class="m-group-title">Tasks</div>` +
-    tasks.slice(0, 50).map(t => `<div style="display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px">
-      <span class="ss-pill ${t.status === 'done' ? 'on' : t.status === 'running' ? 'warn' : ''}">${esc(t.status || '?')}</span>
-      <span style="flex:1;color:var(--text-hi);font-family:monospace;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(t.description || t.id || '—')}</span>
-      <span style="color:var(--text-lo);white-space:nowrap">${relTime(t.ts || t.created_at)}</span>
+  const rank = { running: 0, doing: 0, todo: 1, pending: 1, done: 2 };
+  tasks.sort((a, b) => (rank[a.status] ?? 1) - (rank[b.status] ?? 1));
+  const pill = (st) => st === 'done' ? 'on' : (st === 'running' || st === 'doing' ? 'warn' : '');
+  pane.innerHTML = `<div class="m-group-title">Tasks (${tasks.length})</div>` +
+    tasks.slice(0, 80).map(t => `<div style="display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px">
+      <span class="ss-pill ${pill(t.status)}">${esc(t.status || '?')}</span>
+      <span style="flex:1;color:var(--text-hi);font-family:var(--mono);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(t.description || t.title || t.id || '—')}</span>
+      <span style="color:var(--text-lo);white-space:nowrap">${relTime(t.ts || t.created_at || t.updated_at)}</span>
     </div>`).join('');
 }
 
@@ -5100,14 +5277,38 @@ function v2RenderOrgCosts() {
   if (!_v2SelOrg) return;
   const pane = document.getElementById('odt-costs');
   if (!pane) return;
-  const costs = _v2OrgData?.costs;
-  if (!costs) { pane.innerHTML = '<div class="empty">No cost data</div>'; return; }
-  const rows = Array.isArray(costs) ? costs : Object.entries(costs).map(([k, v]) => ({ label: k, value: v }));
-  pane.innerHTML = `<div class="m-group-title">Cost Breakdown</div>` +
-    rows.slice(0, 20).map(r => `<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px">
-      <span style="color:var(--text-hi)">${esc(String(r.label ?? r.name ?? '—'))}</span>
-      <span style="color:var(--accent);font-family:monospace">$${Number(r.value ?? r.cost ?? 0).toFixed(4)}</span>
-    </div>`).join('');
+  // Primary source: per-agent cost rollup from the org budgets endpoint (already loaded)
+  const b = _v2OrgData?._budgets;
+  let rows = (b && Array.isArray(b.agents)) ? b.agents.map(a => ({
+    label: a.title || a.id || '—',
+    cost: Number(a.total_cost_usd ?? a.cost ?? 0),
+    tin: Number(a.tokens_in ?? a.tokensIn ?? 0),
+    tout: Number(a.tokens_out ?? a.tokensOut ?? 0),
+  })) : [];
+  // Fallback to legacy _v2OrgData.costs if ever present
+  if (!rows.length && _v2OrgData?.costs) {
+    const c = _v2OrgData.costs;
+    rows = Array.isArray(c)
+      ? c.map(r => ({ label: r.label ?? r.name ?? '—', cost: Number(r.value ?? r.cost ?? 0), tin: 0, tout: 0 }))
+      : Object.entries(c).map(([k, v]) => ({ label: k, cost: Number(v) || 0, tin: 0, tout: 0 }));
+  }
+  if (!rows.length) { pane.innerHTML = '<div class="empty">No cost data</div>'; return; }
+  const cur = (b && b.currency) || 'USD';
+  const period = (b && b.period) || '';
+  const total = rows.reduce((s, r) => s + r.cost, 0);
+  const totIn = rows.reduce((s, r) => s + r.tin, 0), totOut = rows.reduce((s, r) => s + r.tout, 0);
+  rows.sort((a, c) => c.cost - a.cost);
+  pane.innerHTML = `<div class="m-group-title">Cost Breakdown${period ? ` · ${esc(period)}` : ''}</div>
+    <div style="display:flex;justify-content:space-between;align-items:baseline;padding:8px 0 10px;border-bottom:1px solid var(--border);margin-bottom:6px">
+      <span style="color:var(--text-lo);font-size:11px">Total (${esc(cur)})</span>
+      <span style="color:var(--accent);font-family:var(--mono);font-size:15px;font-weight:600">$${total.toFixed(4)}</span>
+    </div>` +
+    rows.map(r => `<div style="display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px">
+      <span style="color:var(--text-hi);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(String(r.label))}</span>
+      <span style="color:var(--text-lo);font-family:var(--mono);font-size:10px;white-space:nowrap">${(r.tin + r.tout).toLocaleString()} tok</span>
+      <span style="color:var(--accent);font-family:var(--mono);white-space:nowrap">$${r.cost.toFixed(4)}</span>
+    </div>`).join('') +
+    `<div style="color:var(--text-lo);font-size:10px;margin-top:10px">${totIn.toLocaleString()} in · ${totOut.toLocaleString()} out · sourced from org budgets</div>`;
 }
 
 // ── org members tab ────────────────────────────────────────
@@ -5115,17 +5316,25 @@ function v2RenderOrgMembers() {
   if (!_v2SelOrg) return;
   const pane = document.getElementById('odt-members');
   if (!pane) return;
+  // Prefer actual joined members from the members endpoint; fall back to defined roles
+  const members = Array.isArray(_v2OrgData?._members) ? _v2OrgData._members : [];
   const roles = Array.isArray(_v2OrgData?.roles) ? _v2OrgData.roles : [];
-  if (!roles.length) { pane.innerHTML = '<div class="empty">No members</div>'; return; }
-  pane.innerHTML = `<div class="m-group-title">Members (${roles.length})</div>` +
-    roles.map(r => `<div style="display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px">
+  const list = members.length ? members : roles;
+  const joinReqs = Array.isArray(_v2OrgData?._joinRequests) ? _v2OrgData._joinRequests : [];
+  if (!list.length) { pane.innerHTML = '<div class="empty">No members</div>'; return; }
+  const src = members.length ? 'joined members' : 'defined roles';
+  const active = (r) => r.running || r.active || r.status === 'active';
+  pane.innerHTML = `<div class="m-group-title">Members (${list.length}) · ${src}</div>` +
+    list.map(r => `<div style="display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px">
       <span style="width:28px;height:28px;border-radius:50%;background:var(--surface-hi);display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0">◈</span>
       <div style="flex:1;min-width:0">
-        <div style="color:var(--text-hi);font-family:monospace;font-size:12px">${esc(r.id || r.name || '—')}</div>
-        <div style="color:var(--text-lo);font-size:10px">${esc(r.type || r.role || '')}</div>
+        <div style="color:var(--text-hi);font-family:var(--mono);font-size:12px">${esc(r.name || r.id || r.user || '—')}</div>
+        <div style="color:var(--text-lo);font-size:10px">${esc(r.title || r.type || r.role || '')}</div>
       </div>
-      <span class="ss-pill ${r.running || r.active ? 'on' : ''}">${r.running || r.active ? 'ACTIVE' : 'IDLE'}</span>
-    </div>`).join('');
+      <span class="ss-pill ${active(r) ? 'on' : ''}">${active(r) ? 'ACTIVE' : 'IDLE'}</span>
+    </div>`).join('') +
+    (joinReqs.length ? `<div class="m-group-title" style="margin-top:14px">Join Requests (${joinReqs.length})</div>` +
+      joinReqs.map(j => `<div style="display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px"><span style="color:var(--text-hi)">${esc(j.user || j.name || j.id || '—')}</span><span style="color:var(--text-lo)">${esc(j.status || 'pending')}</span></div>`).join('') : '');
 }
 
 // ── GOALS ──────────────────────────────────────────────────
@@ -5283,6 +5492,9 @@ function v2RenderOrgSettings() {
   const d = _v2OrgData;
   const topos = ['hierarchical', 'mesh', 'hierarchical-mesh', 'adaptive', 'centralized', 'hybrid'];
   const govs  = ['auto', 'board', 'strict'];
+  // governance may be a string or an object {policy,...}; budget lives under run_config
+  const govVal = (d.governance && typeof d.governance === 'object') ? (d.governance.policy || '') : (d.governance || '');
+  const budgetVal = d.run_config?.budget_tokens ?? d.budget_tokens ?? d.budgetTokens ?? '';
   el.innerHTML = `
     <div style="font-size:11px;color:var(--text-lo);margin-bottom:14px">Changes generate a CLI command — no direct writes from UI.</div>
     <div style="display:flex;flex-direction:column;gap:12px;max-width:380px">
@@ -5294,10 +5506,10 @@ function v2RenderOrgSettings() {
       </div>
       <div><div class="le-lbl">Governance</div>
         <select id="os-gov" class="filter-input" style="cursor:pointer">
-          ${govs.map(g => `<option ${d.governance === g ? 'selected' : ''}>${esc(g)}</option>`).join('')}
+          ${govs.map(g => `<option ${govVal === g ? 'selected' : ''}>${esc(g)}</option>`).join('')}
         </select>
       </div>
-      <div><div class="le-lbl">Budget (tokens)</div><input id="os-budget" class="filter-input" type="number" value="${esc(String(d.budgetTokens || d.budget_tokens || ''))}"></div>
+      <div><div class="le-lbl">Budget (tokens)</div><input id="os-budget" class="filter-input" type="number" value="${esc(String(budgetVal || ''))}"></div>
       <button class="btn" style="width:fit-content;color:var(--accent);border-color:var(--accent)" onclick="generateOrgSettingsCmd()">Generate CLI Command</button>
       <div id="os-cmd-out" style="display:none;font-family:var(--mono);font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px;word-break:break-all;cursor:pointer;color:var(--text-hi)" title="Click to copy" onclick="navigator.clipboard.writeText(this.textContent).then(()=>showToast('Copied','','ok'))"></div>
     </div>`;
@@ -5519,32 +5731,38 @@ async function v2RenderOrgProjects() {
 }
 
 // ── SKILLS ─────────────────────────────────────────────────
-function v2RenderOrgSkills() {
+async function v2RenderOrgSkills() {
   const el = document.getElementById('odt-skills');
   if (!el || !_v2OrgData) return;
   const roles = Array.isArray(_v2OrgData.roles) ? _v2OrgData.roles : [];
-  if (!roles.length) { el.innerHTML = '<div class="empty">No roles with skills defined</div>'; return; }
-
-  // Build role→skills matrix
-  const allSkills = [...new Set(roles.flatMap(r => Array.isArray(r.skills) ? r.skills : []))];
-  if (!allSkills.length) {
-    // Flat skill list per role
-    el.innerHTML = roles.map(r => `<div style="padding:8px 0;border-bottom:1px solid var(--border)">
-      <div style="font-size:13px;font-weight:600;color:var(--text-hi);margin-bottom:4px">${esc(r.id || r.name || '—')}</div>
-      <div style="font-size:12px;color:var(--text-lo)">${esc((r.description || r.goal || 'No skills listed'))}</div>
-    </div>`).join('');
-    return;
-  }
-  el.innerHTML = `<div style="overflow-x:auto"><table style="width:100%;border-collapse:collapse;font-size:11px">
-    <thead><tr style="color:var(--text-xs);text-align:left">
-      <th style="padding:5px 8px;min-width:100px">Role</th>
-      ${allSkills.slice(0,10).map(s => `<th style="padding:5px 4px;font-family:var(--mono);white-space:nowrap">${esc(s.slice(0,16))}</th>`).join('')}
-    </tr></thead>
-    <tbody>${roles.map(r => `<tr style="border-top:1px solid var(--border)">
-      <td style="padding:5px 8px;color:var(--text-hi);font-weight:500">${esc(r.id || r.name || '—')}</td>
-      ${allSkills.slice(0,10).map(s => `<td style="padding:5px 4px;text-align:center">${(r.skills||[]).includes(s)?'<span style="color:var(--green)">✓</span>':'<span style="color:var(--border)">·</span>'}</td>`).join('')}
-    </tr>`).join('')}</tbody>
-  </table></div>`;
+  if (!roles.length) { el.innerHTML = '<div class="empty">No roles defined</div>'; return; }
+  el.innerHTML = '<div class="empty">Loading skills…</div>';
+  const org = _v2SelOrg, dirq = DIR ? '?dir=' + encodeURIComponent(DIR) : '';
+  // Enrich each role with expertise + task types from its agent definition (same source as the detail drawer)
+  const enriched = await Promise.all(roles.map(async r => {
+    const expertise = Array.isArray(r.skills) ? r.skills.slice() : [];
+    let taskTypes = [];
+    try {
+      const j = await fetch(`/api/org/${encodeURIComponent(org)}/agent/${encodeURIComponent(r.id)}${dirq}`).then(x => x.ok ? x.json() : null);
+      const cap = j && j.definition && j.definition.capability;
+      if (cap) {
+        (cap.expertise || []).forEach(s => { if (s && !expertise.includes(s)) expertise.push(s); });
+        taskTypes = cap.task_types || [];
+      }
+    } catch (_) {}
+    return { name: r.name || r.title || r.id, type: r.type || r.agent_type || '', expertise, taskTypes };
+  }));
+  if (_v2SelOrg !== org) return; // org switched while fetching
+  el.innerHTML = enriched.map(e => `<div style="padding:10px 0;border-bottom:1px solid var(--border)">
+    <div style="display:flex;align-items:baseline;gap:8px;margin-bottom:6px">
+      <span style="font-size:13px;font-weight:600;color:var(--text-hi)">${esc(e.name)}</span>
+      ${e.type ? `<span style="font-size:10px;color:var(--text-lo)">${esc(e.type)}</span>` : ''}
+    </div>
+    ${e.expertise.length
+      ? `<div style="display:flex;flex-wrap:wrap;gap:5px;${e.taskTypes.length ? 'margin-bottom:6px' : ''}">${e.expertise.map(s => `<span class="oad-chip">${esc(s)}</span>`).join('')}</div>`
+      : '<div style="font-size:11px;color:var(--text-lo)">No skills listed</div>'}
+    ${e.taskTypes.length ? `<div style="display:flex;flex-wrap:wrap;gap:5px">${e.taskTypes.map(s => `<span class="oad-chip alt">${esc(s)}</span>`).join('')}</div>` : ''}
+  </div>`).join('');
 }
 
 // ── WORKSPACES ─────────────────────────────────────────────
@@ -8719,10 +8937,11 @@ async function loadMemoriesTab() {
     const detail = document.getElementById('mem-detail-pane');
     if (!_memFiles.length && detail) {
       detail.innerHTML = '<div style="color:var(--text-lo);font-size:12px;padding:16px 0;line-height:1.7">'
-        + '<div style="font-size:13px;color:var(--text-hi);margin-bottom:8px">No auto-memory files yet</div>'
-        + 'Auto-memory files are created automatically during Claude Code sessions<br>'
-        + 'at: <span style="font-family:var(--mono);font-size:11px;color:var(--accent)">' + esc(data.memDir || '') + '</span><br><br>'
-        + 'Use <span style="font-family:var(--mono);color:var(--accent)">/memory save</span> or complete tasks to populate.'
+        + '<div style="font-size:13px;color:var(--text-hi);margin-bottom:8px">No memories yet</div>'
+        + 'Memories are <strong>curated</strong> — saved as Markdown files in:<br>'
+        + '<span style="font-family:var(--mono);font-size:11px;color:var(--accent)">' + esc(data.memDir || '') + '</span><br><br>'
+        + 'Ask Claude to remember something, or click <span style="font-family:var(--mono);color:var(--accent)">+ New Memory</span> below.<br>'
+        + 'Entries recorded to the backend memory store also appear here automatically.'
         + '</div>';
     }
     _renderMemList();
@@ -8769,15 +8988,21 @@ function selectMem(filename) {
     .replace(/\*\*(.+?)\*\*/g, (_, g) => '<strong>' + esc(g) + '</strong>')
     .replace(/^#{1,3} (.+)/gm, (_, g) => '<div style="font-weight:600;color:var(--text-hi);margin:6px 0 2px">' + esc(g) + '</div>')
     .replace(/^- (.+)/gm, (_, g) => '<div style="padding-left:12px">• ' + esc(g) + '</div>');
+  const srcBadge = f.source === 'backend'
+    ? '<span class="mem-badge" style="background:var(--text-lo)22;color:var(--text-lo);margin-left:6px" title="Stored in the AgentDB backend store, not as a file">backend</span>'
+    : '';
+  const actions = (f.readonly || f.source === 'backend')
+    ? '<div class="mem-actions"><span style="font-size:11px;color:var(--text-lo)">Read-only — stored in the backend memory store (not a file)</span></div>'
+    : '<div class="mem-actions">' +
+        '<button class="btn" onclick="openEditMemModal(' + JSON.stringify(filename) + ')">&#x270E; Edit</button>' +
+        '<button class="btn" style="color:var(--red);border-color:var(--red)" onclick="deleteMem(' + JSON.stringify(filename) + ')">&#x2715; Delete</button>' +
+      '</div>';
   detail.innerHTML =
-    '<span class="mem-badge" style="background:' + col + '22;color:' + col + '">' + esc(f.type || '?') + '</span>' +
+    '<span class="mem-badge" style="background:' + col + '22;color:' + col + '">' + esc(f.type || '?') + '</span>' + srcBadge +
     '<div style="font-size:15px;font-weight:600;color:var(--text-hi);margin-bottom:4px">' + esc(f.name || filename.replace('.md','')) + '</div>' +
     (f.description ? '<div style="font-size:12px;color:var(--text-lo);margin-bottom:12px">' + esc(f.description) + '</div>' : '') +
     '<div class="mem-body-render">' + bodyHtml + '</div>' +
-    '<div class="mem-actions">' +
-    '<button class="btn" onclick="openEditMemModal(' + JSON.stringify(filename) + ')">&#x270E; Edit</button>' +
-    '<button class="btn" style="color:var(--red);border-color:var(--red)" onclick="deleteMem(' + JSON.stringify(filename) + ')">&#x2715; Delete</button>' +
-    '</div>';
+    actions;
 }
 
 async function openEditMemModal(filename) {