@jhizzard/termdeck 0.9.0 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhizzard/termdeck",
-  "version": "0.9.0",
+  "version": "0.10.2",
   "description": "Browser-based terminal multiplexer with metadata overlays, panel flashback memory recall, and AI-aware session management",
   "bin": {
     "termdeck": "./packages/cli/src/index.js"

package/packages/client/public/app.js

@@ -237,6 +237,9 @@
             case 'meta':
               updatePanelMeta(id, msg.session.meta);
               break;
+            case 'proactive_memory':
+              showProactiveToast(id, msg.hit);
+              break;
             case 'exit':
               updatePanelMeta(id, {
                 status: 'exited',
@@ -1245,6 +1248,9 @@
             case 'meta':
               updatePanelMeta(id, msg.session.meta);
               break;
+            case 'proactive_memory':
+              showProactiveToast(id, msg.hit);
+              break;
             case 'exit':
               updatePanelMeta(id, { status: 'exited', statusDetail: `Exited (${msg.exitCode})` });
               const p = document.getElementById(`panel-${id}`);
@@ -1253,6 +1259,17 @@
             case 'status_broadcast':
               updateGlobalStats(msg.sessions);
               break;
+            case 'config_changed':
+              // Sprint 40 T1: parity with the main panel WS handler. The
+              // server broadcasts config_changed to ALL ws clients, including
+              // reconnected sessions; previously the reconnect path silently
+              // dropped these. Idempotent — safe to re-receive.
+              if (msg.config) {
+                state.config = { ...state.config, ...msg.config };
+                if (typeof renderSettingsPanel === 'function') renderSettingsPanel();
+                if (typeof updateRagIndicator === 'function') updateRagIndicator();
+              }
+              break;
           }
         } catch (err) { console.error('[client] reconnect ws message failed:', err); }
       };
@@ -2509,12 +2526,29 @@
       {
         targets: ['#btn-status', '#btn-config'],
         title: 'Status and config',
-        body: `<strong>status</strong> opens a global-metrics modal (session counts by state, RAG mode, memory bridge). <strong>config</strong> shows your loaded project list and theme defaults. Both are in the polish queue for Sprint 3 — buttons are visible but unwired right now.`,
+        body: `<strong>status</strong> opens a global-metrics modal (session counts by state, RAG mode, memory bridge). <strong>config</strong> shows your loaded project list and theme defaults — plus a live RAG-mode toggle (Sprint 36) that flips Flashback on/off without a server restart.`,
+      },
+      {
+        targets: ['#btn-sprint', '#btn-graph'],
+        title: 'Sprint runner and knowledge graph',
+        body: `<strong>sprint</strong> opens the in-dashboard 4+1 sprint runner (Sprint 37): name the sprint, define T1–T4 lane goals, click kick off — TermDeck spawns four panels and injects boot prompts via the two-stage submit pattern automatically. Optional <strong>--isolation=worktree</strong> creates a git worktree per lane so concurrent edits can't stomp. <strong>graph</strong> opens the D3.js force-directed knowledge graph (Sprint 38) of your memory_items + memory_relationships in a new tab — click any node to open its memory in a drawer, filter by relationship type, search, zoom/pan.`,
       },
       {
         targets: ['#btn-how', '#btn-help'],
         title: 'How this works and help',
-        body: `Click <strong>how this works</strong> any time to replay this tour. <strong>help</strong> opens the full TermDeck documentation in a new tab.`,
+        body: `Click <strong>how this works</strong> any time to replay this tour. <strong>help</strong> opens the full TermDeck documentation in a new tab. The <strong>📖 Guide</strong> tab on the right edge of the screen — also opens with the <kbd>g</kbd> keyboard shortcut — is the always-on Orchestrator Guide (Sprint 37): nine sections covering the 4+1 sprint pattern, inject mandate, CLAUDE.md hierarchy, memory-first discipline, sprint discipline, restart-prompt rituals, scaffolding files, channel inject patterns. Search built in.`,
+      },
+      {
+        target: '#guideRail',
+        title: 'Right-rail Orchestrator Guide',
+        body: `The <strong>📖 Guide</strong> rail is your orchestration cheat-sheet — collapsed by default, one click (or <kbd>g</kbd>) to expand. It auto-scrolls to the relevant section based on what you're focused on: clicking a terminal panel jumps the Guide to the 4+1 pattern; opening the project drawer jumps to CLAUDE.md hierarchy. Useful when you forget exactly how the two-stage submit pattern works at 2 AM in the middle of a sprint inject.`,
+        fallback: '#btn-how',
+      },
+      {
+        target: '#btnPreviewProject',
+        title: 'Orchestration preview',
+        body: `The <strong>preview</strong> button next to the project + button (Sprint 37) shows you exactly what <code>termdeck init --project &lt;name&gt;</code> would create for the selected project — file tree, contents per file, expand-on-click. Read-only by default; optional generate button writes the scaffolding (CLAUDE.md, CONTRADICTIONS.md, project_facts.md, .claude/settings.json, docs/orchestration/, RESTART-PROMPT.md template). Lets you see-before-commit instead of running the CLI blind.`,
+        fallback: '#btn-how',
       },
       {
         target: '.panel-header',
@@ -2553,10 +2587,15 @@
         title: 'Prompt bar',
         body: `Type any command here to launch it as a new terminal — <kbd>claude code ~/myproject</kbd>, <kbd>python3 manage.py runserver</kbd>, <kbd>npm run dev</kbd>. Pick a project from the dropdown to auto-cd into its path and apply its default theme. <kbd>Ctrl+Shift+N</kbd> focuses this bar from anywhere.`,
       },
+      {
+        target: null,
+        title: 'Knowledge graph + memory inference',
+        body: `Sprint 38 brought your <strong>memory_relationships</strong> table to life. The <strong>graph</strong> button (top toolbar) renders your memories as a force-directed network — supersedes / relates_to / contradicts / elaborates / caused_by / blocks / inspired_by / cross_project_link edges, color-coded, filterable. The Mnestra MCP server now exposes four new tools: <code>memory_link</code>, <code>memory_unlink</code>, <code>memory_related</code>, and <code>memory_recall_graph</code> — Claude Code can connect related memories explicitly, traverse N-hop neighborhoods, and recall via graph-aware re-ranking (vector_score × edge_weight × recency). Edges populate automatically from Joshua's private rag-system classifier; a nightly cron in Sprint 39+ will surface cross-project connections.`,
+      },
       {
         target: null,
         title: 'You are ready.',
-        body: `That's every major surface. Click <strong>how this works</strong> in the top toolbar to replay this walkthrough. <strong>help</strong> opens the full docs. Questions, bugs, feedback: <a href="https://github.com/jhizzard/termdeck/issues" target="_blank" style="color:var(--tg-accent)">github.com/jhizzard/termdeck/issues</a>. Now launch something.`,
+        body: `That's every major surface. Click <strong>how this works</strong> in the top toolbar to replay this walkthrough. <strong>help</strong> opens the full docs. Press <kbd>g</kbd> any time to crack open the Orchestrator Guide. Questions, bugs, feedback: <a href="https://github.com/jhizzard/termdeck/issues" target="_blank" style="color:var(--tg-accent)">github.com/jhizzard/termdeck/issues</a>. Now launch something.`,
       },
     ];
 

package/packages/client/public/graph.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TermDeck · Knowledge Graph</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body class="graph-page">
+
+  <header class="graph-topbar" id="graphTopbar">
+    <div class="graph-tb-left">
+      <a class="graph-tb-back" href="/" title="Back to dashboard" aria-label="Back to dashboard">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        TermDeck
+      </a>
+      <span class="graph-tb-divider">/</span>
+      <span class="graph-tb-title">Knowledge Graph</span>
+    </div>
+
+    <div class="graph-tb-controls">
+      <label class="graph-tb-control">
+        <span>Project</span>
+        <select id="graphProject"></select>
+      </label>
+      <label class="graph-tb-control graph-tb-search-wrap">
+        <span>Search</span>
+        <input type="search" id="graphSearch" placeholder="content, category…" autocomplete="off" spellcheck="false">
+      </label>
+      <button type="button" class="graph-tb-btn" id="graphReheat" title="Re-heat the simulation">re-heat</button>
+      <button type="button" class="graph-tb-btn" id="graphFit" title="Frame the full graph">fit</button>
+    </div>
+
+    <div class="graph-tb-right">
+      <span class="graph-tb-stat" id="graphStatNodes">— nodes</span>
+      <span class="graph-tb-stat" id="graphStatEdges">— edges</span>
+      <span class="graph-tb-stat" id="graphStatProject">project</span>
+    </div>
+  </header>
+
+  <div class="graph-filters" id="graphFilters" role="toolbar" aria-label="Edge type filters"></div>
+
+  <main class="graph-stage" id="graphStage">
+    <div class="graph-loading" id="graphLoading">
+      <div class="graph-loading-spinner" aria-hidden="true"></div>
+      <p id="graphLoadingMsg">Loading graph…</p>
+    </div>
+
+    <div class="graph-empty" id="graphEmpty" hidden>
+      <h3 id="graphEmptyTitle">No memories yet</h3>
+      <p id="graphEmptyBody">This project has no <code>memory_items</code> rows. Run a Claude Code session in this project; the session-end hook will populate Mnestra and edges will be inferred on the next nightly cron.</p>
+    </div>
+
+    <svg class="graph-svg" id="graphSvg" role="img" aria-label="Force-directed knowledge graph">
+      <defs>
+        <radialGradient id="graphBgGrad" cx="50%" cy="50%" r="75%">
+          <stop offset="0%" stop-color="#1a1f2e" />
+          <stop offset="100%" stop-color="#0a0c12" />
+        </radialGradient>
+        <filter id="nodeGlow" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="2.5" result="blur"/>
+          <feMerge>
+            <feMergeNode in="blur"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+      <rect class="graph-bg" width="100%" height="100%" fill="url(#graphBgGrad)" />
+      <g class="graph-zoom-root" id="graphZoomRoot">
+        <g class="graph-edges" id="graphEdgesLayer"></g>
+        <g class="graph-nodes" id="graphNodesLayer"></g>
+        <g class="graph-labels" id="graphLabelsLayer"></g>
+      </g>
+    </svg>
+
+    <aside class="graph-drawer" id="graphDrawer" hidden aria-label="Memory detail">
+      <header class="graph-drawer-header">
+        <div class="gd-h-meta">
+          <span class="gd-project" id="gdProject">project</span>
+          <span class="gd-source-type" id="gdSourceType">fact</span>
+          <span class="gd-created" id="gdCreated">—</span>
+        </div>
+        <button type="button" class="graph-drawer-close" id="gdClose" aria-label="Close">×</button>
+      </header>
+      <div class="graph-drawer-body">
+        <pre class="gd-content" id="gdContent">—</pre>
+        <h4 class="gd-section">Neighbors</h4>
+        <div class="gd-neighbors" id="gdNeighbors">—</div>
+      </div>
+      <footer class="graph-drawer-footer">
+        <button type="button" class="graph-drawer-action" id="gdExpand" title="Center the graph on this memory">focus</button>
+        <button type="button" class="graph-drawer-action" id="gdCopyId" title="Copy the memory id">copy id</button>
+      </footer>
+    </aside>
+
+    <div class="graph-tooltip" id="graphTooltip" hidden></div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+  <script src="graph.js" defer></script>
+</body>
+</html>