@phren/cli 0.0.18 → 0.0.20

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 { renderSharedWebUiHelpers, renderSkillUiEnhancementScript, renderProjectReferenceEnhancementScript, renderReviewQueueEditSyncScript, renderTasksAndSettingsScript, renderSearchScript, renderEventWiringScript, } from "./memory-ui-scripts.js";
+import { renderSharedWebUiHelpers, renderSkillUiEnhancementScript, renderProjectReferenceEnhancementScript, renderReviewQueueEditSyncScript, renderTasksAndSettingsScript, renderSearchScript, renderEventWiringScript, renderGraphHostScript, } from "./memory-ui-scripts.js";
 function h(s) {
     return s
         .replace(/&/g, "&")
@@ -96,7 +96,7 @@ ${TASK_UI_STYLES}
       </label>
       <span id="review-filter-count" class="text-muted" style="font-size:var(--text-sm);margin-left:auto"></span>
       <label id="review-select-all" style="display:none;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--muted);cursor:pointer;user-select:none">
-        <input type="checkbox" onchange="toggleSelectAll(this.checked)" style="width:14px;height:14px;cursor:pointer;accent-color:var(--accent)" />
+        <input type="checkbox" id="review-select-all-cb" style="width:14px;height:14px;cursor:pointer;accent-color:var(--accent)" />
         Select all
       </label>
       <span id="review-sync-status" class="review-sync-dot" title="Sync status">
@@ -106,9 +106,9 @@ ${TASK_UI_STYLES}
 
     <div id="batch-bar" class="batch-bar">
       <span id="batch-count" class="batch-bar-count"></span>
-      <button class="btn btn-sm btn-approve" onclick="batchAction('approve')">Approve selected</button>
-      <button class="btn btn-sm btn-reject" onclick="batchAction('reject')">Reject selected</button>
-      <button class="btn btn-sm" onclick="clearBatchSelection()">Clear</button>
+      <button class="btn btn-sm btn-approve" data-batch-action="approve">Approve selected</button>
+      <button class="btn btn-sm btn-reject" data-batch-action="reject">Reject selected</button>
+      <button class="btn btn-sm" data-batch-action="clear">Clear</button>
     </div>
 
     <div class="review-cards" id="review-cards-list">
@@ -155,7 +155,7 @@ ${TASK_UI_STYLES}
   <!-- ── Graph Tab ─────────────────────────────────────────── -->
   <div id="tab-graph" class="tab-content">
     <div class="graph-container">
-      <canvas id="graph-canvas"></canvas>
+      <div id="graph-canvas" aria-label="Knowledge graph"></div>
       <div class="graph-tooltip" id="graph-tooltip"></div>
       <div class="graph-controls">
         <button id="graph-zoom-in" title="Zoom in">+</button>
@@ -167,15 +167,11 @@ ${TASK_UI_STYLES}
         <div class="graph-filter" id="graph-project-filter"></div>
         <div class="graph-filter" id="graph-limit-row" style="align-items:center;gap:8px"></div>
       </div>
-      <!-- legend removed: colors explained in Filters dropdown -->
-    </div>
-    <div id="graph-detail-panel" class="card" style="margin-top:16px">
-      <div class="card-header">
-        <h2>Selected Bubble</h2>
-        <span id="graph-detail-meta" class="text-muted" style="font-size:var(--text-sm)">Click a bubble to inspect it.</span>
-      </div>
-      <div class="card-body" id="graph-detail-body" style="display:flex;flex-direction:column;gap:12px">
-        <p class="text-muted" style="margin:0">Use the graph filters, then click a project or finding bubble to pin its details here.</p>
+      <div id="graph-node-popover" style="display:none;position:absolute;left:0;top:0;z-index:12;max-width:min(440px,calc(100% - 24px));pointer-events:none">
+        <div id="graph-node-popover-card" class="card" style="pointer-events:auto;position:relative;box-shadow:var(--shadow-lg);border:1px solid var(--border);background:color-mix(in srgb, var(--surface) 96%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)">
+          <button id="graph-node-close" type="button" aria-label="Close selected node" title="Close" style="position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:999px;border:1px solid var(--border);background:var(--surface-raised);color:var(--ink);cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center">×</button>
+          <div id="graph-node-content" style="padding:18px 18px 16px 18px"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -308,6 +304,9 @@ ${renderWebUiScript(authToken || "")}
 ${renderGraphScript()}
 </script>
 <script${nonceAttr}>
+${renderGraphHostScript()}
+</script>
+<script${nonceAttr}>
 ${renderReviewQueueEditSyncScript()}
 </script>
 <script${nonceAttr}>
@@ -320,10 +319,10 @@ ${renderSkillUiEnhancementScript(h(authToken || ""))}
 ${renderProjectReferenceEnhancementScript(h(authToken || ""))}
 </script>
 <script${nonceAttr}>
-${renderTasksAndSettingsScript(h(authToken || ""))}
+${renderTasksAndSettingsScript(authToken || "")}
 </script>
 <script${nonceAttr}>
-${renderSearchScript(h(authToken || ""))}
+${renderSearchScript(authToken || "")}
 </script>
 <script${nonceAttr}>
 ${renderEventWiringScript()}