claude-code-memory-explorer 1.1.2 → 1.3.0

package/public/index.html

@@ -27,7 +27,7 @@
 <body>
 <script src="/vendor/claude-hub-sdk.js"></script>
   <div class="topbar">
-    <div class="topbar-logo">
+    <div class="topbar-logo" onclick="_goUserHome()" title="User home">
       <div class="logo-mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v4c0 1.66 4.03 3 9 3s9-1.34 9-3V5"/><path d="M3 9v4c0 1.66 4.03 3 9 3s9-1.34 9-3V9"/><path d="M3 13v4c0 1.66 4.03 3 9 3s9-1.34 9-3v-4"/></svg></div>
       <span class="logo-text">Memory Diagnoser</span>
     </div>
@@ -70,6 +70,8 @@
     </div>
   </div>
 
+  <div class="home-view" id="homeView"></div>
+
   <!-- Main layout -->
   <div class="main-layout">
     <div class="tree-panel" id="treePanel">

package/public/style.css

@@ -27,6 +27,8 @@
   --scope-memory: #c4a06a;
   --scope-agent-memory: #8aa8a3;
   --scope-policy: #b58a8a;
+  --scope-agent: #aab06a;
+  --scope-style: #c48aa8;
   --font-mono: 'IBM Plex Mono', monospace;
   --font-serif: 'Playfair Display', serif;
   --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -100,6 +102,7 @@ body {
   display: flex;
   align-items: center;
   gap: 10px;
+  cursor: pointer;
 }
 .logo-mark {
   width: 24px;
@@ -358,6 +361,469 @@ body.fp-mode .tree-item.fp-hit {
 }
 /* #endregion MAIN_LAYOUT */
 
+/* #region HOME */
+.home-view {
+  display: none;
+  flex: 1;
+  overflow-y: auto;
+}
+body.home-mode .home-view {
+  display: block;
+}
+body.home-mode .budget-bar,
+body.home-mode .main-layout,
+body.home-mode .summary-bar {
+  display: none;
+}
+.home-ic {
+  width: 1.1em;
+  height: 1.1em;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vertical-align: -2px;
+  margin-right: 5px;
+  flex-shrink: 0;
+}
+.tree-home-link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px 8px;
+  font-size: 12px;
+  min-width: 0;
+}
+.tree-home-crumb,
+.tree-home-all {
+  display: inline-flex;
+  align-items: center;
+  color: var(--accent-text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.tree-home-crumb:hover,
+.tree-home-all:hover {
+  text-decoration: underline;
+}
+.tree-home-sep {
+  color: var(--text-muted);
+}
+.tree-home-focus {
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tree-home-all {
+  margin-left: auto;
+  font-size: 11px;
+}
+.picker-user .picker-name::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--scope-user);
+  margin-right: 6px;
+}
+/* Home sizes are multiples of --px, which grows on wide screens: real font sizes, not zoom, so text stays crisp. */
+.home {
+  --px: 1px;
+  max-width: calc(1180 * var(--px));
+  margin: 0 auto;
+  padding: calc(20 * var(--px)) 16px calc(40 * var(--px));
+  font-size: calc(13 * var(--px));
+}
+.home h1 {
+  font-family: var(--font-serif);
+  font-size: calc(24 * var(--px));
+  margin: 0 0 calc(18 * var(--px));
+}
+.home-budget {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: calc(10 * var(--px));
+  padding: calc(14 * var(--px)) calc(16 * var(--px));
+  margin-bottom: calc(16 * var(--px));
+}
+.home-budget-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: calc(10 * var(--px));
+  gap: calc(12 * var(--px));
+  flex-wrap: wrap;
+}
+.home-budget-head .t {
+  font-weight: 600;
+}
+.home-budget-head .n {
+  font-family: var(--font-serif);
+  font-size: calc(30 * var(--px));
+  font-weight: 600;
+  line-height: 1;
+  font-variant-numeric: lining-nums tabular-nums;
+}
+.home-budget-head .n small {
+  font-family: var(--font-mono);
+  font-size: calc(12 * var(--px));
+  color: var(--text-muted);
+  font-weight: 400;
+  margin-left: calc(4 * var(--px));
+}
+.home-bar {
+  display: flex;
+  gap: 2px;
+  height: calc(12 * var(--px));
+  border-radius: calc(6 * var(--px));
+  overflow: hidden;
+  background: var(--bg-hover);
+}
+.home-bar span {
+  display: block;
+  height: 100%;
+  min-width: 3px;
+}
+.home-legend {
+  display: flex;
+  gap: calc(14 * var(--px));
+  flex-wrap: wrap;
+  margin-top: calc(10 * var(--px));
+  font-size: calc(12 * var(--px));
+  color: var(--text-tertiary);
+}
+.home-legend i {
+  display: inline-block;
+  width: calc(9 * var(--px));
+  height: calc(9 * var(--px));
+  border-radius: 2px;
+  margin-right: calc(5 * var(--px));
+  vertical-align: -1px;
+}
+.home-legend b {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-left: 2px;
+}
+.home-legend .home-unk,
+.home-legend .home-zero {
+  color: var(--text-muted);
+}
+.home-legend .home-unk {
+  font-style: italic;
+}
+.home-legend .home-zero i {
+  opacity: 0.35;
+}
+.home-legend .home-zero b {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+.home-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(12 * var(--px));
+}
+.home-card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--c, var(--border));
+  border-radius: calc(8 * var(--px));
+  padding: calc(12 * var(--px)) calc(14 * var(--px));
+  min-width: 0;
+  box-shadow: var(--shadow-1);
+}
+.home-card[onclick] {
+  cursor: pointer;
+  transition:
+    border-color 0.12s,
+    box-shadow 0.12s;
+}
+.home-card[onclick]:hover {
+  border-color: color-mix(in srgb, var(--c) 45%, var(--border));
+  border-left-color: var(--c);
+  box-shadow: var(--shadow-2);
+}
+.home-card[onclick]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.home-card.wide {
+  grid-column: span 2;
+}
+.home-card.full {
+  grid-column: 1 / -1;
+}
+.home-ch {
+  display: flex;
+  align-items: center;
+  gap: calc(8 * var(--px));
+  margin-bottom: calc(8 * var(--px));
+}
+.home-title {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+}
+.home-when {
+  margin-left: auto;
+  font-size: calc(10.5 * var(--px));
+  font-family: var(--font-mono);
+  padding: calc(2 * var(--px)) calc(6 * var(--px));
+  border-radius: calc(4 * var(--px));
+  background: var(--bg-surface);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60%;
+}
+.home-when.always {
+  background: var(--accent-dim);
+  color: var(--accent-text);
+}
+.home-path {
+  font-family: var(--font-mono);
+  font-size: calc(11 * var(--px));
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: calc(8 * var(--px));
+}
+.home-stats {
+  display: flex;
+  gap: calc(16 * var(--px));
+  font-family: var(--font-mono);
+  font-size: calc(12 * var(--px));
+}
+.home-stats b {
+  font-size: calc(16 * var(--px));
+  font-weight: 600;
+  display: block;
+}
+.home-stats span {
+  color: var(--text-muted);
+  font-size: calc(10.5 * var(--px));
+}
+.home-rows {
+  list-style: none;
+  margin: calc(8 * var(--px)) 0 0;
+  padding: 0;
+  font-size: calc(12 * var(--px));
+}
+.home-rows li {
+  display: flex;
+  gap: calc(8 * var(--px));
+  align-items: center;
+  padding: calc(4 * var(--px)) 0;
+  border-top: 1px dashed var(--border);
+  min-width: 0;
+}
+.home-rows li[onclick]:hover .home-nm,
+.home-card[onclick]:hover .home-more .home-nm {
+  color: var(--accent-text);
+}
+.home-plugins {
+  margin-top: calc(10 * var(--px));
+}
+.home-plugins .home-nm {
+  font-family: inherit;
+  color: var(--text-tertiary);
+}
+.home-more .home-nm {
+  color: var(--text-muted);
+  font-size: calc(12 * var(--px));
+}
+.home-nm {
+  font-family: var(--font-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.home-r {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+}
+.home-mini {
+  height: calc(5 * var(--px));
+  width: calc(60 * var(--px));
+  background: var(--bg-hover);
+  border-radius: 3px;
+  overflow: hidden;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.home-mini + .home-r {
+  margin-left: 0;
+}
+.home-mini span {
+  display: block;
+  height: 100%;
+  background: var(--c);
+}
+.home-mini span.warn {
+  background: var(--warning);
+}
+.home-pill {
+  font-size: calc(10.5 * var(--px));
+  padding: calc(1 * var(--px)) calc(6 * var(--px));
+  border-radius: 9px;
+  font-family: var(--font-mono);
+  white-space: nowrap;
+}
+.home-pill.warn {
+  background: var(--warning-dim);
+  color: var(--warning);
+}
+.home-pill.err {
+  background: var(--error-dim);
+  color: var(--error);
+}
+.home-pill.ok {
+  background: var(--success-dim);
+  color: var(--success);
+}
+.home-pill.mut {
+  background: var(--bg-surface);
+  color: var(--text-muted);
+}
+.home-cols {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: calc(14 * var(--px));
+}
+.home-cols > div {
+  min-width: 0;
+}
+.home-colh {
+  font-size: calc(11.5 * var(--px));
+  font-weight: 600;
+  color: var(--text-tertiary);
+  margin-bottom: calc(2 * var(--px));
+}
+.home-tree {
+  font-family: var(--font-mono);
+  font-size: calc(11.5 * var(--px));
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin-top: calc(6 * var(--px));
+}
+.home-tree > div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.home-tree > div:hover {
+  color: var(--accent-text);
+}
+.home-d {
+  color: var(--text-muted);
+}
+.home-kv {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: calc(3 * var(--px)) calc(12 * var(--px));
+  font-family: var(--font-mono);
+  font-size: calc(11.5 * var(--px));
+}
+.home-k {
+  color: var(--text-tertiary);
+}
+.home-from {
+  color: var(--text-muted);
+  font-size: calc(10.5 * var(--px));
+  margin-left: calc(6 * var(--px));
+}
+.home-empty {
+  color: var(--text-muted);
+  font-style: italic;
+  font-size: calc(12 * var(--px));
+}
+.home-recents {
+  margin-top: calc(22 * var(--px));
+}
+.home-recents h2 {
+  font-family: var(--font-serif);
+  font-size: calc(16 * var(--px));
+  color: var(--text-secondary);
+  margin: 0 0 calc(8 * var(--px));
+  font-weight: 600;
+}
+.home-chips {
+  display: flex;
+  gap: calc(8 * var(--px));
+  flex-wrap: wrap;
+}
+.home-chip {
+  display: flex;
+  align-items: center;
+  gap: calc(6 * var(--px));
+  padding: calc(6 * var(--px)) calc(10 * var(--px));
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: calc(6 * var(--px));
+  font-family: var(--font-mono);
+  font-size: calc(12 * var(--px));
+  cursor: pointer;
+}
+.home-chip:hover {
+  border-color: var(--accent);
+}
+.home-chip-add {
+  color: var(--text-muted);
+}
+.home-dot {
+  width: calc(7 * var(--px));
+  height: calc(7 * var(--px));
+  border-radius: 50%;
+  background: var(--scope-project);
+}
+@media (max-width: 960px) {
+  .home-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 620px) {
+  .home-grid,
+  .home-cols {
+    grid-template-columns: 1fr;
+  }
+  .home-card.wide {
+    grid-column: span 1;
+  }
+}
+@media (min-width: 1600px) {
+  .home {
+    --px: 1.08px;
+  }
+}
+@media (min-width: 1900px) {
+  .home {
+    --px: 1.15px;
+  }
+}
+@media (min-width: 2400px) {
+  .home {
+    --px: 1.25px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .home-card[onclick] {
+    transition: none;
+  }
+}
+/* #endregion HOME */
+
 /* #region TREE */
 /* filled sticky section bars — same depth language as the marketplace tree headers */
 .tree-group-header {

package/public/vendor/claude-hub-sdk.js

@@ -1,18 +1,51 @@
-// claude-hub-sdk 1.2.0 (sha256 62c7d9f477b2). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
-// Claude Code Hub SDK stub: what an app serves when no hub runs it. Under a hub, the hub hands the
-// app its real SDK (client.js) in place of this file. The API must match client.js; a test checks it.
-((root) => {
+// claude-hub-sdk 1.4.0 (sha256 7d559a8888ce). Copied by npm run sdk:sync in claude-code-hub. Do not edit.
+// Claude Code Hub SDK: the one rule that names a key press, shared by the hub page, client.js and
+// stub.js. The hub serves it to its page as /sdk/keys.js; mount() and sdk:sync put it in front of
+// client.js and stub.js, so an app still loads one file.
+// var, not const: the hub page and an app page each load it as a classic script, and a second
+// const declaration in the same page would throw.
+var ClaudeHubKeys = (() => {
   'use strict';
 
-  // A copy of client.js comboOf(); a test checks they match.
+  // Modifiers in ctrl, alt, shift, meta order, joined by '+' to the key. macOS composes
+  // Option+<key> into a character (Option+1 is '¡', Option+P is 'π') and holding Control does not
+  // undo it, so e.key alone cannot name these presses there. e.code is the physical key, which is
+  // wrong for non-US layouts, hence only as a fallback. No fallback under AltGraph: Chromium sets it
+  // when AltGr types a character, and that press is text. Takes a real KeyboardEvent or a forwarded
+  // {key, code} payload; a payload without code degrades to key. A payload needs no AltGraph: the
+  // SDK forwards only a press whose key already names a bound combo.
+  // Self-contained on purpose: cck puts its source text into a sandboxed frame.
   function comboOf(e) {
     const lower = typeof e.key === 'string' ? e.key.toLowerCase() : '';
-    const m = /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
+    const m = !e.getModifierState?.('AltGraph') && /^(?:Key|Digit)([A-Z1-9])$/.exec(e.code || '');
     const key = /^[a-z1-9]$/.test(lower) ? lower : m ? m[1].toLowerCase() : e.key;
     const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta'];
     return [...mods, key].filter(Boolean).join('+');
   }
 
+  // The keys of a combo as a help row shows them: ['Ctrl', 'Alt', 'P'], or ['⌃', '⌥', 'P'] on macOS.
+  // The {n} of a numbered combo reads 1…9.
+  function keyParts(combo, mac) {
+    const mods = mac
+      ? { ctrl: '⌃', alt: '⌥', shift: '⇧', meta: '⌘' }
+      : { ctrl: 'Ctrl', alt: 'Alt', shift: 'Shift', meta: 'Win' };
+    const named = { '{n}': '1…9', ArrowLeft: '←', ArrowRight: '→', ArrowUp: '↑', ArrowDown: '↓' };
+    return combo.split('+').map((k) => mods[k] ?? named[k] ?? (k.length === 1 ? k.toUpperCase() : k));
+  }
+
+  return { comboOf, keyParts };
+})();
+
+if (typeof module === 'object' && module.exports) module.exports = ClaudeHubKeys;
+
+// Claude Code Hub SDK stub: what an app serves when no hub runs it. Under a hub, the hub hands the
+// app its real SDK (client.js) in place of this file. The API must match client.js; a test checks it.
+((root) => {
+  'use strict';
+
+  // keys.js comes first in the synced file. Required as a module, stub.js loads it itself.
+  const { comboOf } = typeof ClaudeHubKeys === 'object' ? ClaudeHubKeys : require('./keys');
+
   function createClaudeHub(win) {
     let hub = null;
     const off = () => {};
@@ -43,6 +76,7 @@
         can: (action) => !!standaloneFn(action),
         forwards: () => false,
         forwardCombos: () => [],
+        keyLabel: () => null,
         closeGuard() {},
         openExternal(url) {
           win.open(url, '_blank', 'noopener');