@phren/cli 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
1
  import { WEB_UI_STYLES, renderWebUiScript } from "./memory-ui-assets.js";
2
2
  import { renderGraphScript } from "./memory-ui-graph.js";
3
3
  import { readSyncSnapshot } from "./memory-ui-data.js";
4
- import { PROJECT_REFERENCE_UI_STYLES, SETTINGS_TAB_UI_STYLES, TASK_UI_STYLES } from "./memory-ui-styles.js";
5
- import { renderSharedWebUiHelpers, renderSkillUiEnhancementScript, renderProjectReferenceEnhancementScript, renderReviewQueueEditSyncScript, renderTasksAndSettingsScript, renderSearchScript, renderEventWiringScript, } from "./memory-ui-scripts.js";
4
+ import { PROJECT_REFERENCE_UI_STYLES, REVIEW_UI_STYLES, SETTINGS_TAB_UI_STYLES, TASK_UI_STYLES } from "./memory-ui-styles.js";
5
+ import { renderSharedWebUiHelpers, renderSkillUiEnhancementScript, renderProjectReferenceEnhancementScript, renderTasksAndSettingsScript, renderSearchScript, renderEventWiringScript, renderGraphHostScript, } from "./memory-ui-scripts.js";
6
6
  function h(s) {
7
7
  return s
8
8
  .replace(/&/g, "&")
@@ -26,35 +26,80 @@ ${WEB_UI_STYLES}
26
26
  ${PROJECT_REFERENCE_UI_STYLES}
27
27
  ${SETTINGS_TAB_UI_STYLES}
28
28
  ${TASK_UI_STYLES}
29
+ ${REVIEW_UI_STYLES}
29
30
  </style>
30
31
  </head>
31
32
  <body>
32
33
 
33
34
  <div class="header">
34
35
  <div class="header-brand">
35
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
36
- <defs>
37
- <radialGradient id="hdr-brain" cx="45%" cy="40%" r="55%">
38
- <stop offset="0%" stop-color="#9B8BC4"/>
39
- <stop offset="50%" stop-color="#7B68AE"/>
40
- <stop offset="100%" stop-color="#5B4B8A"/>
41
- </radialGradient>
42
- </defs>
43
- <!-- brain body -->
44
- <ellipse cx="12" cy="12" rx="8" ry="7.5" fill="url(#hdr-brain)"/>
45
- <!-- brain folds -->
46
- <path d="M8 9.5c1.5-1 3-0.5 4 0s2.5 0.8 3.5-0.2" stroke="#5B4B8A" stroke-width="0.7" fill="none" stroke-linecap="round"/>
47
- <path d="M7.5 12c2 0.8 3.5 0.2 5-0.5s3 0 4 0.8" stroke="#5B4B8A" stroke-width="0.6" fill="none" stroke-linecap="round"/>
48
- <!-- eyes (dark diamonds) -->
49
- <path d="M9 11l0.8-0.8 0.8 0.8-0.8 0.8z" fill="#2D2255"/>
50
- <path d="M13.4 11l0.8-0.8 0.8 0.8-0.8 0.8z" fill="#2D2255"/>
51
- <!-- smile -->
52
- <path d="M10.5 13.5c0.5 0.4 1.2 0.5 2 0.1" stroke="#2D2255" stroke-width="0.5" fill="none" stroke-linecap="round"/>
53
- <!-- legs -->
54
- <rect x="9.5" y="18.5" width="1.5" height="2" rx="0.5" fill="#5B4B8A"/>
55
- <rect x="13" y="18.5" width="1.5" height="2" rx="0.5" fill="#5B4B8A"/>
56
- <!-- cyan sparkle -->
57
- <path d="M18 4l0.5 1.5L20 6l-1.5 0.5L18 8l-0.5-1.5L16 6l1.5-0.5z" fill="#00E5FF"/>
36
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" style="image-rendering:pixelated">
37
+ <circle cx="32" cy="32" r="32" fill="#12122a"/>
38
+ <g fill="rgb(103,226,248)"><rect x="44" y="12" width="4" height="4"/></g>
39
+ <g fill="rgb(138,127,236)"><rect x="20" y="16" width="4" height="4"/></g>
40
+ <g fill="rgb(150,144,247)"><rect x="24" y="16" width="4" height="4"/></g>
41
+ <g fill="rgb(102,74,242)"><rect x="28" y="16" width="4" height="4"/></g>
42
+ <g fill="rgb(168,165,249)"><rect x="32" y="16" width="4" height="4"/></g>
43
+ <g fill="rgb(144,147,247)"><rect x="36" y="16" width="4" height="4"/></g>
44
+ <g fill="rgb(119,108,251)"><rect x="40" y="16" width="4" height="4"/></g>
45
+ <g fill="rgb(102,80,247)"><rect x="20" y="20" width="4" height="4"/></g>
46
+ <g fill="rgb(105,77,249)"><rect x="24" y="20" width="4" height="4"/></g>
47
+ <g fill="rgb(197,195,252)"><rect x="28" y="20" width="4" height="4"/></g>
48
+ <g fill="rgb(154,148,247)"><rect x="32" y="20" width="4" height="4"/></g>
49
+ <g fill="rgb(152,131,250)"><rect x="36" y="20" width="4" height="4"/></g>
50
+ <g fill="rgb(151,145,249)"><rect x="40" y="20" width="4" height="4"/></g>
51
+ <g fill="rgb(37,37,143)"><rect x="44" y="20" width="4" height="4"/></g>
52
+ <g fill="rgb(84,63,227)"><rect x="16" y="24" width="4" height="4"/></g>
53
+ <g fill="rgb(153,132,251)"><rect x="20" y="24" width="4" height="4"/></g>
54
+ <g fill="rgb(154,143,249)"><rect x="24" y="24" width="4" height="4"/></g>
55
+ <g fill="rgb(159,147,249)"><rect x="28" y="24" width="4" height="4"/></g>
56
+ <g fill="rgb(93,76,236)"><rect x="32" y="24" width="4" height="4"/></g>
57
+ <g fill="rgb(156,134,251)"><rect x="36" y="24" width="4" height="4"/></g>
58
+ <g fill="rgb(154,137,248)"><rect x="40" y="24" width="4" height="4"/></g>
59
+ <g fill="rgb(149,130,251)"><rect x="44" y="24" width="4" height="4"/></g>
60
+ <g fill="rgb(34,37,124)"><rect x="12" y="28" width="4" height="4"/></g>
61
+ <g fill="rgb(144,124,251)"><rect x="16" y="28" width="4" height="4"/></g>
62
+ <g fill="rgb(150,132,250)"><rect x="20" y="28" width="4" height="4"/></g>
63
+ <g fill="rgb(149,130,250)"><rect x="24" y="28" width="4" height="4"/></g>
64
+ <g fill="rgb(153,137,252)"><rect x="28" y="28" width="4" height="4"/></g>
65
+ <g fill="rgb(154,136,250)"><rect x="32" y="28" width="4" height="4"/></g>
66
+ <g fill="rgb(154,138,250)"><rect x="36" y="28" width="4" height="4"/></g>
67
+ <g fill="rgb(157,141,249)"><rect x="40" y="28" width="4" height="4"/></g>
68
+ <g fill="rgb(82,62,230)"><rect x="44" y="28" width="4" height="4"/></g>
69
+ <g fill="rgb(29,34,113)"><rect x="12" y="32" width="4" height="4"/></g>
70
+ <g fill="rgb(21,32,104)"><rect x="16" y="32" width="4" height="4"/></g>
71
+ <g fill="rgb(146,127,251)"><rect x="20" y="32" width="4" height="4"/></g>
72
+ <g fill="rgb(157,145,248)"><rect x="24" y="32" width="4" height="4"/></g>
73
+ <g fill="rgb(20,31,101)"><rect x="28" y="32" width="4" height="4"/></g>
74
+ <g fill="rgb(152,138,249)"><rect x="32" y="32" width="4" height="4"/></g>
75
+ <g fill="rgb(154,141,248)"><rect x="36" y="32" width="4" height="4"/></g>
76
+ <g fill="rgb(78,62,218)"><rect x="40" y="32" width="4" height="4"/></g>
77
+ <g fill="rgb(124,107,250)"><rect x="44" y="32" width="4" height="4"/></g>
78
+ <g fill="rgb(38,41,148)"><rect x="48" y="32" width="4" height="4"/></g>
79
+ <g fill="rgb(147,129,252)"><rect x="16" y="36" width="4" height="4"/></g>
80
+ <g fill="rgb(147,125,251)"><rect x="20" y="36" width="4" height="4"/></g>
81
+ <g fill="rgb(147,127,251)"><rect x="24" y="36" width="4" height="4"/></g>
82
+ <g fill="rgb(149,131,251)"><rect x="28" y="36" width="4" height="4"/></g>
83
+ <g fill="rgb(120,104,251)"><rect x="32" y="36" width="4" height="4"/></g>
84
+ <g fill="rgb(121,109,252)"><rect x="36" y="36" width="4" height="4"/></g>
85
+ <g fill="rgb(109,90,247)"><rect x="40" y="36" width="4" height="4"/></g>
86
+ <g fill="rgb(113,92,249)"><rect x="44" y="36" width="4" height="4"/></g>
87
+ <g fill="rgb(97,88,247)"><rect x="20" y="40" width="4" height="4"/></g>
88
+ <g fill="rgb(96,85,243)"><rect x="24" y="40" width="4" height="4"/></g>
89
+ <g fill="rgb(71,58,216)"><rect x="28" y="40" width="4" height="4"/></g>
90
+ <g fill="rgb(90,71,238)"><rect x="32" y="40" width="4" height="4"/></g>
91
+ <g fill="rgb(115,103,249)"><rect x="36" y="40" width="4" height="4"/></g>
92
+ <g fill="rgb(80,61,228)"><rect x="40" y="40" width="4" height="4"/></g>
93
+ <g fill="rgb(16,18,94)"><rect x="44" y="40" width="4" height="4"/></g>
94
+ <g fill="rgb(69,52,218)"><rect x="24" y="44" width="4" height="4"/></g>
95
+ <g fill="rgb(17,28,102)"><rect x="32" y="44" width="4" height="4"/></g>
96
+ <g fill="rgb(20,31,99)"><rect x="36" y="44" width="4" height="4"/></g>
97
+ <g fill="rgb(160,163,251)"><rect x="20" y="48" width="4" height="4"/></g>
98
+ <g fill="rgb(34,34,140)"><rect x="24" y="48" width="4" height="4"/></g>
99
+ <g fill="rgb(159,159,250)"><rect x="28" y="48" width="4" height="4"/></g>
100
+ <g fill="rgb(26,36,133)"><rect x="32" y="48" width="4" height="4"/></g>
101
+ <g fill="rgb(26,41,132)"><rect x="36" y="48" width="4" height="4"/></g>
102
+ <g fill="rgb(159,165,249)"><rect x="40" y="48" width="4" height="4"/></g>
58
103
  </svg>
59
104
  <span style="letter-spacing:0.04em;font-weight:500">phren</span>
60
105
  </div>
@@ -64,7 +109,6 @@ ${TASK_UI_STYLES}
64
109
  <button class="nav-item" data-tab="search">Search</button>
65
110
  <button class="nav-item" data-tab="graph">Graph</button>
66
111
  <button class="nav-item" data-tab="tasks">Tasks</button>
67
- <button class="nav-item" data-tab="sessions">Sessions</button>
68
112
  <button class="nav-item" data-tab="skills">Skills</button>
69
113
  <button class="nav-item" data-tab="hooks">Hooks</button>
70
114
  <button class="nav-item" data-tab="settings">Settings</button>
@@ -155,7 +199,7 @@ ${TASK_UI_STYLES}
155
199
  <!-- ── Graph Tab ─────────────────────────────────────────── -->
156
200
  <div id="tab-graph" class="tab-content">
157
201
  <div class="graph-container">
158
- <canvas id="graph-canvas"></canvas>
202
+ <div id="graph-canvas" aria-label="Knowledge graph"></div>
159
203
  <div class="graph-tooltip" id="graph-tooltip"></div>
160
204
  <div class="graph-controls">
161
205
  <button id="graph-zoom-in" title="Zoom in">+</button>
@@ -167,15 +211,11 @@ ${TASK_UI_STYLES}
167
211
  <div class="graph-filter" id="graph-project-filter"></div>
168
212
  <div class="graph-filter" id="graph-limit-row" style="align-items:center;gap:8px"></div>
169
213
  </div>
170
- <!-- legend removed: colors explained in Filters dropdown -->
171
- </div>
172
- <div id="graph-detail-panel" class="card" style="margin-top:16px">
173
- <div class="card-header">
174
- <h2>Selected Bubble</h2>
175
- <span id="graph-detail-meta" class="text-muted" style="font-size:var(--text-sm)">Click a bubble to inspect it.</span>
176
- </div>
177
- <div class="card-body" id="graph-detail-body" style="display:flex;flex-direction:column;gap:12px">
178
- <p class="text-muted" style="margin:0">Use the graph filters, then click a project or finding bubble to pin its details here.</p>
214
+ <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">
215
+ <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)">
216
+ <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>
217
+ <div id="graph-node-content" style="padding:18px 18px 16px 18px"></div>
218
+ </div>
179
219
  </div>
180
220
  </div>
181
221
  </div>
@@ -219,22 +259,8 @@ ${TASK_UI_STYLES}
219
259
  <span id="tasks-count" class="task-count-label"></span>
220
260
  </div>
221
261
  <div id="tasks-list">
222
- <div class="task-empty-state"><svg viewBox="0 0 48 48" width="64" height="64" style="display:block;margin:0 auto 16px"><ellipse cx="24" cy="24" rx="16" ry="15" fill="#7B68AE" opacity="0.25"/><ellipse cx="24" cy="24" rx="12" ry="11.5" fill="#7B68AE" opacity="0.4"/><circle cx="19" cy="22" r="1.5" fill="#2D2255"/><circle cx="29" cy="22" r="1.5" fill="#2D2255"/><path d="M21 28c1 1.2 2.5 1.5 3.5 1.3 1-.2 2-1 2.5-1.3" stroke="#2D2255" stroke-width="1" fill="none" stroke-linecap="round"/></svg><div style="font-size:var(--text-md);font-weight:600;color:var(--ink)">Loading tasks...</div></div>
223
- </div>
224
- </div>
225
-
226
- <!-- ── Sessions Tab ──────────────────────────────────────── -->
227
- <div id="tab-sessions" class="tab-content">
228
- <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
229
- <select id="sessions-filter-project" 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)">
230
- <option value="">All projects</option>
231
- </select>
232
- <span id="sessions-count" class="text-muted" style="font-size:var(--text-sm);margin-left:auto"></span>
233
- </div>
234
- <div id="sessions-list">
235
- <div style="padding:40px;color:var(--muted);text-align:center"><svg viewBox="0 0 32 32" width="32" height="32" style="display:block;margin:0 auto 12px"><ellipse cx="16" cy="16" rx="10" ry="9.5" fill="#7B68AE" opacity="0.5"/><path d="M12 15l1-1 1 1-1 1z" fill="#2D2255"/><path d="M18 15l1-1 1 1-1 1z" fill="#2D2255"/><path d="M14 18c0.7 0.5 1.6 0.6 2.6 0.1" stroke="#2D2255" stroke-width="0.6" fill="none"/></svg>Loading sessions...</div>
262
+ <div class="task-empty-state"><svg viewBox="0 0 48 48" width="48" height="48" style="display:block;margin:0 auto 12px"><ellipse cx="24" cy="24" rx="16" ry="15" fill="#7B68AE" opacity="0.25"/><ellipse cx="24" cy="24" rx="12" ry="11.5" fill="#7B68AE" opacity="0.4"/><circle cx="19" cy="22" r="1.5" fill="#2D2255"/><circle cx="29" cy="22" r="1.5" fill="#2D2255"/><path d="M21 28c1 1.2 2.5 1.5 3.5 1.3 1-.2 2-1 2.5-1.3" stroke="#2D2255" stroke-width="1" fill="none" stroke-linecap="round"/></svg><div style="font-size:var(--text-md);font-weight:600;color:var(--ink)">Loading tasks...</div></div>
236
263
  </div>
237
- <div id="session-detail" style="display:none"></div>
238
264
  </div>
239
265
 
240
266
  <!-- ── Settings Tab ───────────────────────────────────────── -->
@@ -308,7 +334,7 @@ ${renderWebUiScript(authToken || "")}
308
334
  ${renderGraphScript()}
309
335
  </script>
310
336
  <script${nonceAttr}>
311
- ${renderReviewQueueEditSyncScript()}
337
+ ${renderGraphHostScript()}
312
338
  </script>
313
339
  <script${nonceAttr}>
314
340
  ${renderSharedWebUiHelpers(authToken || "")}