@phren/cli 0.0.10 → 0.0.12

package/mcp/dist/memory-ui-graph.js

@@ -27,11 +27,20 @@ export function renderGraphScript() {
   /* ── colour & size maps ─────────────────────────────────────────────── */
   /* Fixed colors for non-finding node types — phren purple/cyan palette */
   var COLORS = {
-    project: '#7B68AE',
-    'task-active': '#10b981', 'task-queue': '#5B4B8A',
-    entity: '#3a7bae', reference: '#6b8e7a',
+    project: '#9B7FD4',
+    'task-active': '#10b981', 'task-queue': '#7B68AE',
+    entity: '#D4892E', reference: '#6b8e7a',
     other: '#B8A0D6'
   };
+
+  /* Finding topic slug -> semantic color for visual hierarchy */
+  var FINDING_TOPIC_COLORS = {
+    architecture: '#3B82F6', debugging: '#EF4444', security: '#EF4444',
+    performance: '#F59E0B', testing: '#10B981', devops: '#10B981',
+    tooling: '#3B82F6', api: '#3B82F6', database: '#3B82F6',
+    frontend: '#8B5CF6', auth: '#EF4444', data: '#6B7280',
+    mobile: '#06B6D4', ai_ml: '#8B5CF6', general: '#6B7280'
+  };
   var RADII = {
     project: 18,
     'task-active': 7, 'task-queue': 7,
@@ -53,7 +62,8 @@ export function renderGraphScript() {
     waypointIdx: 0,        /* current waypoint index */
     tripDist: 0,           /* total distance of current trip (for ease-in-out) */
     tripProgress: 0,       /* distance traveled so far this trip */
-    targetNodeId: null     /* id of destination node (set in phrenMoveTo) */
+    targetNodeId: null,    /* id of destination node (set in phrenMoveTo) */
+    targetNodeRef: null    /* live reference to destination node object */
   };
 
   /* ── phren sprite image ─────────────────────────────────────────────── */
@@ -92,6 +102,14 @@ export function renderGraphScript() {
   }
 
   /* find shortest edge path from nearest node to target node via BFS */
+  /* look up a visible node by id — used to resolve live positions */
+  function phrenNodeById(id) {
+    for (var i = 0; i < visibleNodes.length; i++) {
+      if (visibleNodes[i].id === id) return visibleNodes[i];
+    }
+    return null;
+  }
+
   function phrenFindEdgePath(targetNode) {
     if (!targetNode || visibleNodes.length === 0) return [];
     /* find nearest visible node to phren's current position */
@@ -134,14 +152,11 @@ export function renderGraphScript() {
       }
     }
     if (!found) return [];
-    /* reconstruct path */
+    /* reconstruct path — store node IDs so positions are resolved live */
     var path = [];
-    var nodeById = {};
-    for (var i = 0; i < visibleNodes.length; i++) nodeById[visibleNodes[i].id] = visibleNodes[i];
     var cur = targetId;
     while (cur !== undefined && cur !== startId) {
-      var nd = nodeById[cur];
-      if (nd) path.unshift({ x: nd.x, y: nd.y });
+      path.unshift(cur);
       cur = prev[cur];
     }
     /* cap path length to avoid very long walks */
@@ -160,9 +175,10 @@ export function renderGraphScript() {
     phren.tripDist = Math.sqrt(tdx * tdx + tdy * tdy);
     phren.tripProgress = 0;
     /* try edge-walking if a target node is given */
-    phren.waypoints = targetNode ? phrenFindEdgePath(targetNode) : [];
+    phren.waypoints = targetNode ? phrenFindEdgePath(targetNode) : []; /* array of node IDs */
     phren.waypointIdx = 0;
     phren.targetNodeId = targetNode ? targetNode.id : null;
+    phren.targetNodeRef = targetNode || null; /* live reference for position tracking */
     /* ensure animation loop is running so phren movement renders */
     if (!animFrame) animFrame = requestAnimationFrame(tick);
   }
@@ -183,11 +199,18 @@ export function renderGraphScript() {
   function phrenUpdate(dt) {
     phren.idlePhase += dt;
     if (phren.moving) {
+      /* keep target coordinates synced with live node position (force layout moves nodes) */
+      if (phren.targetNodeRef && typeof phren.targetNodeRef.x === 'number') {
+        phren.targetX = phren.targetNodeRef.x;
+        phren.targetY = phren.targetNodeRef.y;
+      }
       /* determine current move target: next waypoint or final destination */
       var wx, wy;
       if (phren.waypoints.length > 0 && phren.waypointIdx < phren.waypoints.length) {
-        wx = phren.waypoints[phren.waypointIdx].x;
-        wy = phren.waypoints[phren.waypointIdx].y;
+        /* waypoints are node IDs — resolve to live positions */
+        var wpNode = phrenNodeById(phren.waypoints[phren.waypointIdx]);
+        if (wpNode) { wx = wpNode.x; wy = wpNode.y; }
+        else { wx = phren.targetX; wy = phren.targetY; phren.waypointIdx = phren.waypoints.length; }
       } else {
         wx = phren.targetX;
         wy = phren.targetY;
@@ -333,9 +356,11 @@ export function renderGraphScript() {
   }
 
   function topicGroupColor(group) {
-    /* group is 'topic:<slug>' for findings */
+    /* group is 'topic:<slug>' for findings — use semantic color if available */
     if (typeof group === 'string' && group.indexOf('topic:') === 0) {
-      return topicSlugToColor(group.slice(6));
+      var slug = group.slice(6);
+      if (FINDING_TOPIC_COLORS[slug]) return FINDING_TOPIC_COLORS[slug];
+      return topicSlugToColor(slug);
     }
     return COLORS[group] || COLORS.other;
   }
@@ -371,9 +396,13 @@ export function renderGraphScript() {
   function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; }
 
   function nodeRadius(n) {
-    if (n.group === 'entity') return Math.min(6 + (n.refCount || 0), 16);
-    if (typeof n.group === 'string' && n.group.indexOf('topic:') === 0) return RADII.other;
-    return RADII[n.group] || RADII.other;
+    var base;
+    if (n.group === 'entity') base = Math.min(6 + (n.refCount || 0), 16);
+    else if (typeof n.group === 'string' && n.group.indexOf('topic:') === 0) base = RADII.other;
+    else base = RADII[n.group] || RADII.other;
+    /* size boost by connection count */
+    var conns = n._connectionCount || 0;
+    return base + Math.min(conns * 0.5, 6);
   }
 
   function nodeColor(n) { return topicGroupColor(n.group); }
@@ -865,6 +894,14 @@ export function renderGraphScript() {
       }
     }
 
+    /* compute connection count per node for size scaling */
+    for (var i = 0; i < visibleNodes.length; i++) visibleNodes[i]._connectionCount = 0;
+    for (var i = 0; i < visibleLinks.length; i++) {
+      var lk = visibleLinks[i];
+      if (lk._source) lk._source._connectionCount = (lk._source._connectionCount || 0) + 1;
+      if (lk._target) lk._target._connectionCount = (lk._target._connectionCount || 0) + 1;
+    }
+
     updateLegend();
     /* only restart simulation if node count changed significantly */
     var oldCount = _prevVisibleCount || 0;
@@ -940,14 +977,26 @@ export function renderGraphScript() {
         var sMatch = ((lk._source.label || '').toLowerCase().indexOf(_sq) !== -1 || (lk._source.fullLabel || '').toLowerCase().indexOf(_sq) !== -1);
         var tMatch = ((lk._target.label || '').toLowerCase().indexOf(_sq) !== -1 || (lk._target.fullLabel || '').toLowerCase().indexOf(_sq) !== -1);
         ctx.beginPath();
-        ctx.strokeStyle = (sMatch || tMatch) ? 'rgba(150,150,150,0.11)' : 'rgba(150,150,150,0.035)';
+        ctx.strokeStyle = (sMatch || tMatch) ? 'rgba(255,255,255,0.20)' : 'rgba(255,255,255,0.04)';
+        ctx.moveTo(lk._source.x, lk._source.y);
+        ctx.lineTo(lk._target.x, lk._target.y);
+        ctx.stroke();
+      }
+    } else if (selectedNode) {
+      /* When a node is selected, highlight connected edges */
+      for (var i = 0; i < links.length; i++) {
+        var lk = links[i];
+        if (!lk._source || !lk._target) continue;
+        var isConnected = (lk._source === selectedNode || lk._target === selectedNode);
+        ctx.beginPath();
+        ctx.strokeStyle = isConnected ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.08)';
         ctx.moveTo(lk._source.x, lk._source.y);
         ctx.lineTo(lk._target.x, lk._target.y);
         ctx.stroke();
       }
     } else {
       ctx.beginPath();
-      ctx.strokeStyle = 'rgba(150,150,150,0.10)';
+      ctx.strokeStyle = 'rgba(255,255,255,0.08)';
       for (var i = 0; i < links.length; i++) {
         var lk = links[i];
         if (!lk._source || !lk._target) continue;
@@ -1052,35 +1101,69 @@ export function renderGraphScript() {
       ctx.setLineDash([]);
     }
 
-    /* 3. nodes (batch by fill colour, apply opacity) */
-    var fillBuckets = {};
+    /* 3. nodes with glow, selection dimming, and visual hierarchy */
+    /* Build set of nodes connected to selected node for dimming */
+    var _connectedToSelected = null;
+    if (selectedNode) {
+      _connectedToSelected = {};
+      _connectedToSelected[selectedNode.id] = true;
+      for (var i = 0; i < links.length; i++) {
+        var lk = links[i];
+        if (!lk._source || !lk._target) continue;
+        if (lk._source === selectedNode) _connectedToSelected[lk._target.id] = true;
+        if (lk._target === selectedNode) _connectedToSelected[lk._source.id] = true;
+      }
+    }
+
     for (var i = 0; i < nodes.length; i++) {
-      var c = nodeColor(nodes[i]);
-      if (!fillBuckets[c]) fillBuckets[c] = [];
-      fillBuckets[c].push(nodes[i]);
-    }
-    var fillColors = Object.keys(fillBuckets);
-    for (var ci = 0; ci < fillColors.length; ci++) {
-      var col = fillColors[ci];
-      var bucket = fillBuckets[col];
-      for (var i = 0; i < bucket.length; i++) {
-        var nd = bucket[i];
-        var mult = qualityMultiplier(nd);
-        var opacity = 0.3 + (mult - 0.2) * (0.7 / 1.3);
-        opacity = clamp(opacity, 0.3, 1.0);
-        /* dim non-matching nodes when search is active */
-        if (searchQuery) {
-          var sq = searchQuery.toLowerCase();
-          var sl = (nd.label || '').toLowerCase();
-          var sf = (nd.fullLabel || '').toLowerCase();
-          if (sl.indexOf(sq) === -1 && sf.indexOf(sq) === -1) opacity = 0.1;
-        }
-        ctx.globalAlpha = opacity;
-        ctx.beginPath();
-        ctx.arc(nd.x, nd.y, nodeRadius(nd), 0, Math.PI * 2);
-        ctx.fillStyle = col;
-        ctx.fill();
+      var nd = nodes[i];
+      var col = nodeColor(nd);
+      var r = nodeRadius(nd);
+      var mult = qualityMultiplier(nd);
+      var opacity = 0.3 + (mult - 0.2) * (0.7 / 1.3);
+      opacity = clamp(opacity, 0.3, 1.0);
+
+      /* dim non-matching nodes when search is active */
+      if (searchQuery) {
+        var sq = searchQuery.toLowerCase();
+        var sl = (nd.label || '').toLowerCase();
+        var sf = (nd.fullLabel || '').toLowerCase();
+        if (sl.indexOf(sq) === -1 && sf.indexOf(sq) === -1) opacity = 0.1;
+      }
+
+      /* dim non-connected nodes when a node is selected */
+      if (_connectedToSelected && !_connectedToSelected[nd.id]) {
+        opacity *= 0.4;
+      }
+
+      ctx.globalAlpha = opacity;
+
+      /* node glow based on type */
+      var glowBlur = 0;
+      if (nd === selectedNode) {
+        glowBlur = 30;
+        ctx.shadowColor = 'rgba(255,255,255,0.6)';
+      } else if (nd.group === 'project') {
+        glowBlur = 20;
+        ctx.shadowColor = colorWithAlpha(col, 0.5);
+      } else if (nd.group === 'entity') {
+        glowBlur = 12;
+        ctx.shadowColor = 'rgba(212,137,46,0.4)';
+      } else if (typeof nd.group === 'string' && nd.group.indexOf('topic:') === 0) {
+        glowBlur = 6;
+        ctx.shadowColor = colorWithAlpha(col, 0.25);
       }
+      if (glowBlur > 0) {
+        ctx.shadowBlur = glowBlur / scale;
+      }
+
+      ctx.beginPath();
+      ctx.arc(nd.x, nd.y, r, 0, Math.PI * 2);
+      ctx.fillStyle = col;
+      ctx.fill();
+
+      ctx.shadowBlur = 0;
+      ctx.shadowColor = 'transparent';
     }
     ctx.globalAlpha = 1.0;
 
@@ -1155,13 +1238,17 @@ export function renderGraphScript() {
       }
     }
 
-    /* 6. selection highlight */
+    /* 6. selection highlight with bloom */
     if (selectedNode) {
+      ctx.save();
+      ctx.shadowColor = 'rgba(255,255,255,0.5)';
+      ctx.shadowBlur = 30 / scale;
       ctx.beginPath();
       ctx.arc(selectedNode.x, selectedNode.y, nodeRadius(selectedNode) + 5, 0, Math.PI * 2);
-      ctx.strokeStyle = '#7B68AE';
+      ctx.strokeStyle = 'rgba(255,255,255,0.7)';
       ctx.lineWidth = 2.5 / scale;
       ctx.stroke();
+      ctx.restore();
     }
 
     /* 6c. phren character */
@@ -1407,17 +1494,22 @@ export function renderGraphScript() {
 
   /* ── interaction ────────────────────────────────────────────────────── */
   function setupInteraction() {
+    var _mouseDownX = 0, _mouseDownY = 0, _mouseDownHit = null;
+    var CLICK_THRESHOLD = 5; /* px — distinguish click from drag */
+
     canvas.addEventListener('mousedown', function(e) {
       var rect = canvas.getBoundingClientRect();
       var mx = e.clientX - rect.left;
       var my = e.clientY - rect.top;
+      _mouseDownX = mx;
+      _mouseDownY = my;
       var hit = hitTest(mx, my);
+      _mouseDownHit = hit;
       if (hit) {
         dragging = hit;
         dragPullDepths = collectConnectedDepths(hit, 2);
         dragOffX = (mx - panX) / scale - hit.x;
         dragOffY = (my - panY) / scale - hit.y;
-        renderGraphDetails(hit);
       } else {
         panning = true;
         panStartX = mx - panX;
@@ -1465,14 +1557,24 @@ export function renderGraphScript() {
       }
     });
 
-    canvas.addEventListener('mouseup', function() {
+    canvas.addEventListener('mouseup', function(e) {
+      var rect = canvas.getBoundingClientRect();
+      var mx = e.clientX - rect.left;
+      var my = e.clientY - rect.top;
+      var dragDist = Math.sqrt((_mouseDownX - mx) * (_mouseDownX - mx) + (_mouseDownY - my) * (_mouseDownY - my));
       if (dragging) {
+        var clickedNode = dragging;
         dragging = null;
         dragPullDepths = null;
         /* restart simulation so gravity pulls nodes back into place */
         alpha = Math.max(alpha, 0.3);
+        /* only select + walk phren if this was a click, not a drag */
+        if (dragDist < CLICK_THRESHOLD && _mouseDownHit && clickedNode === _mouseDownHit) {
+          renderGraphDetails(_mouseDownHit);
+        }
       }
       panning = false;
+      _mouseDownHit = null;
     });
 
     canvas.addEventListener('mouseleave', function() {

package/mcp/dist/memory-ui-page.js

@@ -2,7 +2,7 @@ import { WEB_UI_STYLES, renderWebUiScript } from "./memory-ui-assets.js";
 import { renderGraphScript } from "./memory-ui-graph.js";
 import { readSyncSnapshot } from "./memory-ui-data.js";
 import { PROJECT_REFERENCE_UI_STYLES, SETTINGS_TAB_UI_STYLES, TASK_UI_STYLES } from "./memory-ui-styles.js";
-import { renderSkillUiEnhancementScript, renderProjectReferenceEnhancementScript, renderReviewQueueEditSyncScript, renderTasksAndSettingsScript, renderSearchScript, renderEventWiringScript, } from "./memory-ui-scripts.js";
+import { renderSharedWebUiHelpers, renderSkillUiEnhancementScript, renderProjectReferenceEnhancementScript, renderReviewQueueEditSyncScript, renderTasksAndSettingsScript, renderSearchScript, renderEventWiringScript, } from "./memory-ui-scripts.js";
 function h(s) {
     return s
         .replace(/&/g, "&")
@@ -21,7 +21,6 @@ export function renderWebUiPage(phrenPath, authToken, nonce) {
   <link rel="preconnect" href="https://fonts.bunny.net" />
   <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />
   <title>phren</title>
-  <script${nonceAttr} src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
   <style>
 ${WEB_UI_STYLES}
 ${PROJECT_REFERENCE_UI_STYLES}
@@ -104,9 +103,9 @@ ${TASK_UI_STYLES}
         <dt>What is the Review Queue?</dt>
         <dd>Fragments flagged by governance for human review. Items accumulate here when <code>phren maintain govern</code> is run.</dd>
         <dt>Can I approve, reject, or edit items here?</dt>
-        <dd>No. The web UI review queue is read-only and exists for inspection only.</dd>
+        <dd>Yes. Each review card has <strong>Approve</strong>, <strong>Reject</strong>, and <strong>Edit</strong> buttons. Approve accepts the fragment, Reject removes it, and Edit lets you revise the text before accepting. You can also use batch actions to approve or reject multiple items at once.</dd>
         <dt>How do I clear items?</dt>
-        <dd>Use maintenance flows such as <code>phren maintain prune</code>, or update the underlying findings/tasks directly.</dd>
+        <dd>Approve or reject items directly in the UI, or use maintenance flows such as <code>phren maintain prune</code>.</dd>
         <dt>Is this automatic?</dt>
         <dd>No. Agents do not auto-accept review-queue items.</dd>
         <dt>How do items get here?</dt>
@@ -116,7 +115,7 @@ ${TASK_UI_STYLES}
       </dl>
     </details>
 
-    <p style="font-size:var(--text-sm);color:var(--muted);margin-bottom:12px;letter-spacing:-0.01em">Fragments flagged for review. Inspect them here; the web UI does not mutate queue items.</p>
+    <p style="font-size:var(--text-sm);color:var(--muted);margin-bottom:12px;letter-spacing:-0.01em">Fragments flagged for review. Approve, reject, or edit items directly from this tab.</p>
 
     <div id="review-summary-banner" style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center"></div>
 
@@ -267,6 +266,17 @@ ${TASK_UI_STYLES}
   <div id="tab-settings" class="tab-content">
     <div class="settings-shell">
       <div id="settings-status-inline" class="settings-status-inline" aria-live="polite"></div>
+      <section class="settings-section" style="border-top:3px solid color-mix(in srgb, var(--cyan) 45%, var(--border))">
+        <div class="settings-section-header" style="display:flex;align-items:center;justify-content:space-between;gap:16px">
+          <span>Scope</span>
+          <select id="settings-project-select" style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;background:var(--surface);color:var(--ink);font-size:var(--text-sm);font-family:var(--font)">
+            <option value="">Global (all projects)</option>
+          </select>
+        </div>
+        <div class="settings-section-body" style="padding:12px 18px">
+          <div id="settings-scope-note" style="font-size:var(--text-sm);color:var(--muted)">Showing global settings. Select a project to view and edit per-project overrides.</div>
+        </div>
+      </section>
       <section class="settings-section settings-section-findings">
         <div class="settings-section-header">Findings</div>
         <div class="settings-section-body">
@@ -279,6 +289,18 @@ ${TASK_UI_STYLES}
           <div id="settings-behavior" style="color:var(--muted)">Loading...</div>
         </div>
       </section>
+      <section class="settings-section" style="border-top:3px solid color-mix(in srgb, var(--warning) 45%, var(--border))">
+        <div class="settings-section-header">Retention Policy</div>
+        <div class="settings-section-body">
+          <div id="settings-retention" style="color:var(--muted)">Loading...</div>
+        </div>
+      </section>
+      <section class="settings-section" style="border-top:3px solid color-mix(in srgb, var(--success) 45%, var(--border))">
+        <div class="settings-section-header">Workflow Policy</div>
+        <div class="settings-section-body">
+          <div id="settings-workflow" style="color:var(--muted)">Loading...</div>
+        </div>
+      </section>
       <section class="settings-section settings-section-integrations">
         <div class="settings-section-header">Integrations</div>
         <div class="settings-section-body">
@@ -308,6 +330,9 @@ ${renderGraphScript()}
 ${renderReviewQueueEditSyncScript()}
 </script>
 <script${nonceAttr}>
+${renderSharedWebUiHelpers(h(authToken || ""))}
+</script>
+<script${nonceAttr}>
 ${renderSkillUiEnhancementScript(h(authToken || ""))}
 </script>
 <script${nonceAttr}>