@jungjaehoon/mama-server 1.4.3 → 1.4.5

package/README.md

@@ -179,6 +179,26 @@ curl -X POST http://127.0.0.1:3847/embed/batch \
 - **Automatic**: Starts with MCP server, no extra configuration needed
 - **Secure**: localhost only (127.0.0.1), no external access
 
+## Graph Viewer
+
+Interactive visualization of your reasoning graph.
+
+**Access:** `http://localhost:3847/viewer`
+
+**Features:**
+
+- Network graph with physics simulation
+- Checkpoint timeline sidebar
+- Draggable detail panel
+- Topic filtering and search
+
+## Environment Variables
+
+| Variable         | Default                    | Description                |
+| ---------------- | -------------------------- | -------------------------- |
+| `MAMA_DB_PATH`   | `~/.claude/mama-memory.db` | SQLite database location   |
+| `MAMA_HTTP_PORT` | `3847`                     | HTTP embedding server port |
+
 ## Technical Details
 
 - **Database:** SQLite + sqlite-vec extension

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jungjaehoon/mama-server",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "MAMA MCP Server - Memory-Augmented MCP Assistant for Claude Code & Desktop",
   "main": "src/server.js",
   "bin": {

package/src/viewer/graph-api.js

@@ -85,6 +85,39 @@ async function getAllEdges() {
   }));
 }
 
+/**
+ * Get all checkpoints
+ *
+ * @returns {Promise<Array>} Array of checkpoint objects
+ */
+async function getAllCheckpoints() {
+  const adapter = getAdapter();
+
+  const stmt = adapter.prepare(`
+    SELECT
+      id,
+      timestamp,
+      summary,
+      open_files,
+      next_steps,
+      status
+    FROM checkpoints
+    ORDER BY timestamp DESC
+    LIMIT 50
+  `);
+
+  const rows = stmt.all();
+
+  return rows.map((row) => ({
+    id: row.id,
+    timestamp: row.timestamp,
+    summary: row.summary,
+    open_files: row.open_files ? JSON.parse(row.open_files) : [],
+    next_steps: row.next_steps,
+    status: row.status,
+  }));
+}
+
 /**
  * Get unique topics from nodes
  *
@@ -455,6 +488,39 @@ async function handleSimilarRequest(req, res, params) {
   }
 }
 
+/**
+ * Handle GET /checkpoints request - list all checkpoints
+ *
+ * @param {Object} req - HTTP request
+ * @param {Object} res - HTTP response
+ */
+async function handleCheckpointsRequest(req, res) {
+  try {
+    // Ensure DB is initialized
+    await initDB();
+
+    const checkpoints = await getAllCheckpoints();
+
+    res.writeHead(200);
+    res.end(
+      JSON.stringify({
+        checkpoints,
+        count: checkpoints.length,
+      })
+    );
+  } catch (error) {
+    console.error(`[GraphAPI] Checkpoints error: ${error.message}`);
+    res.writeHead(500);
+    res.end(
+      JSON.stringify({
+        error: true,
+        code: 'CHECKPOINTS_FAILED',
+        message: error.message,
+      })
+    );
+  }
+}
+
 /**
  * Create route handler for graph API
  *
@@ -506,6 +572,12 @@ function createGraphHandler() {
       return true; // Request handled
     }
 
+    // Route: GET /checkpoints - list all checkpoints
+    if (pathname === '/checkpoints' && req.method === 'GET') {
+      await handleCheckpointsRequest(req, res);
+      return true; // Request handled
+    }
+
     return false; // Request not handled
   };
 }
@@ -515,6 +587,7 @@ module.exports = {
   // Exported for testing
   getAllNodes,
   getAllEdges,
+  getAllCheckpoints,
   getUniqueTopics,
   filterNodesByTopic,
   filterEdgesByNodes,

package/src/viewer/viewer.css

@@ -83,11 +83,11 @@ header h1 {
   position: relative;
 }
 
-/* Detail Panel */
+/* Detail Panel - draggable */
 #detail-panel {
   display: none;
   position: fixed;
-  right: 20px;
+  right: 340px;
   top: 80px;
   width: 350px;
   max-height: calc(100vh - 100px);
@@ -97,6 +97,7 @@ header h1 {
   padding: 16px;
   overflow-y: auto;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  z-index: 300;
 }
 
 #detail-panel.visible {
@@ -107,6 +108,8 @@ header h1 {
   color: #a0a0ff;
   margin-bottom: 12px;
   font-size: 14px;
+  cursor: move;
+  user-select: none;
 }
 
 #detail-panel .field {
@@ -426,3 +429,234 @@ header h1 {
 #legend-panel.collapsed + .legend-toggle {
   display: block;
 }
+
+/* Checkpoint Sidebar Panel */
+#checkpoint-panel {
+  position: fixed;
+  right: 0;
+  top: 50px;
+  width: 320px;
+  height: calc(100vh - 50px);
+  background: #16213e;
+  border-left: 1px solid #4a4a6a;
+  display: flex;
+  flex-direction: column;
+  z-index: 200;
+}
+
+#checkpoint-panel.hidden {
+  display: none;
+}
+
+.checkpoint-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #4a4a6a;
+}
+
+.checkpoint-header h4 {
+  color: #a0a0ff;
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.checkpoint-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+/* Custom scrollbar for dark theme */
+.checkpoint-list::-webkit-scrollbar,
+.checkpoint-section-content::-webkit-scrollbar,
+#detail-panel::-webkit-scrollbar,
+.reasoning-content::-webkit-scrollbar,
+.similar-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.checkpoint-list::-webkit-scrollbar-track,
+.checkpoint-section-content::-webkit-scrollbar-track,
+#detail-panel::-webkit-scrollbar-track,
+.reasoning-content::-webkit-scrollbar-track,
+.similar-list::-webkit-scrollbar-track {
+  background: #1a1a2e;
+  border-radius: 3px;
+}
+
+.checkpoint-list::-webkit-scrollbar-thumb,
+.checkpoint-section-content::-webkit-scrollbar-thumb,
+#detail-panel::-webkit-scrollbar-thumb,
+.reasoning-content::-webkit-scrollbar-thumb,
+.similar-list::-webkit-scrollbar-thumb {
+  background: #4a4a6a;
+  border-radius: 3px;
+}
+
+.checkpoint-list::-webkit-scrollbar-thumb:hover,
+.checkpoint-section-content::-webkit-scrollbar-thumb:hover,
+#detail-panel::-webkit-scrollbar-thumb:hover,
+.reasoning-content::-webkit-scrollbar-thumb:hover,
+.similar-list::-webkit-scrollbar-thumb:hover {
+  background: #5a5a7a;
+}
+
+/* Horizontal scrollbar (for graph container) */
+#graph-container::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+}
+
+#graph-container::-webkit-scrollbar-track {
+  background: #1a1a2e;
+}
+
+#graph-container::-webkit-scrollbar-thumb {
+  background: #4a4a6a;
+  border-radius: 3px;
+}
+
+#graph-container::-webkit-scrollbar-thumb:hover {
+  background: #5a5a7a;
+}
+
+/* Firefox scrollbar support */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #4a4a6a #1a1a2e;
+}
+
+.loading-checkpoints {
+  color: #666;
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+
+.checkpoint-item {
+  background: #1a1a2e;
+  border: 1px solid #3a3a5a;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.checkpoint-item:hover {
+  border-color: #a0a0ff;
+  background: #1e1e3e;
+}
+
+.checkpoint-item.expanded {
+  border-color: #a0a0ff;
+}
+
+.checkpoint-time {
+  font-size: 11px;
+  color: #888;
+  margin-bottom: 6px;
+}
+
+.checkpoint-summary {
+  font-size: 12px;
+  color: #e0e0e0;
+  line-height: 1.4;
+  max-height: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.checkpoint-item.expanded .checkpoint-summary {
+  max-height: none;
+}
+
+.checkpoint-details {
+  display: none;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #3a3a5a;
+}
+
+.checkpoint-item.expanded .checkpoint-details {
+  display: block;
+}
+
+.checkpoint-section {
+  margin-bottom: 8px;
+}
+
+.checkpoint-section-title {
+  font-size: 10px;
+  color: #888;
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+
+.checkpoint-section-content {
+  font-size: 11px;
+  color: #aaa;
+  white-space: pre-wrap;
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+.checkpoint-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.checkpoint-file {
+  font-size: 10px;
+  color: #6366f1;
+  background: #2a2a4e;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.checkpoint-related {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.checkpoint-related-link {
+  font-size: 10px;
+  color: #22c55e;
+  background: #1a3a2e;
+  padding: 2px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.checkpoint-related-link:hover {
+  background: #2a4a3e;
+}
+
+.checkpoint-toggle {
+  position: fixed;
+  right: 20px;
+  top: 60px;
+  background: #16213e;
+  border: 1px solid #4a4a6a;
+  border-radius: 4px;
+  padding: 8px 12px;
+  color: #a0a0ff;
+  cursor: pointer;
+  font-size: 12px;
+  z-index: 99;
+  display: none;
+}
+
+.checkpoint-toggle:hover {
+  background: #1a2a4e;
+}
+
+#checkpoint-panel.hidden ~ .checkpoint-toggle {
+  display: block;
+}

package/src/viewer/viewer.html

@@ -63,6 +63,18 @@
       </div>
     </div>
 
+    <!-- Checkpoint Sidebar Panel -->
+    <div id="checkpoint-panel">
+      <div class="checkpoint-header">
+        <h4>📋 Checkpoints</h4>
+        <button class="close-btn" onclick="toggleCheckpoints()">&times;</button>
+      </div>
+      <div class="checkpoint-list" id="checkpoint-list">
+        <div class="loading-checkpoints">Loading...</div>
+      </div>
+    </div>
+    <button class="checkpoint-toggle" id="checkpoint-toggle" onclick="toggleCheckpoints()">📋 Checkpoints</button>
+
     <!-- Legend Panel -->
     <div id="legend-panel">
       <button class="close-btn" onclick="toggleLegend()" style="position:absolute;top:8px;right:8px;">&times;</button>

package/src/viewer/viewer.js

@@ -822,8 +822,210 @@ document.addEventListener('keydown', (e) => {
   }
 });
 
+// Checkpoint Panel Functions
+let checkpointsData = [];
+
+// Toggle checkpoint panel visibility (called from HTML onclick)
+// eslint-disable-next-line no-unused-vars
+function toggleCheckpoints() {
+  const panel = document.getElementById('checkpoint-panel');
+  panel.classList.toggle('hidden');
+}
+
+// Fetch checkpoints from API
+async function fetchCheckpoints() {
+  try {
+    const response = await fetch('/checkpoints');
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+    const data = await response.json();
+    checkpointsData = data.checkpoints || [];
+    renderCheckpoints();
+  } catch (error) {
+    console.error('[MAMA] Failed to fetch checkpoints:', error);
+    document.getElementById('checkpoint-list').innerHTML =
+      `<div class="loading-checkpoints" style="color:#f66">Failed to load: ${error.message}</div>`;
+  }
+}
+
+// Render checkpoints list
+function renderCheckpoints() {
+  const container = document.getElementById('checkpoint-list');
+
+  if (checkpointsData.length === 0) {
+    container.innerHTML = '<div class="loading-checkpoints">No checkpoints found</div>';
+    return;
+  }
+
+  const html = checkpointsData
+    .map(
+      (cp, idx) => `
+    <div class="checkpoint-item" onclick="expandCheckpoint(${idx})">
+      <div class="checkpoint-time">${formatCheckpointTime(cp.timestamp)}</div>
+      <div class="checkpoint-summary">${escapeHtml(extractFirstLine(cp.summary))}</div>
+      <div class="checkpoint-details">
+        ${
+          cp.summary
+            ? `
+          <div class="checkpoint-section">
+            <div class="checkpoint-section-title">Summary</div>
+            <div class="checkpoint-section-content">${escapeHtml(cp.summary)}</div>
+          </div>
+        `
+            : ''
+        }
+        ${
+          cp.next_steps
+            ? `
+          <div class="checkpoint-section">
+            <div class="checkpoint-section-title">Next Steps</div>
+            <div class="checkpoint-section-content">${escapeHtml(cp.next_steps)}</div>
+          </div>
+        `
+            : ''
+        }
+        ${
+          cp.open_files && cp.open_files.length > 0
+            ? `
+          <div class="checkpoint-section">
+            <div class="checkpoint-section-title">Open Files</div>
+            <div class="checkpoint-files">
+              ${cp.open_files.map((f) => `<span class="checkpoint-file">${escapeHtml(f.split('/').pop())}</span>`).join('')}
+            </div>
+          </div>
+        `
+            : ''
+        }
+        ${renderRelatedDecisions(cp.summary)}
+      </div>
+    </div>
+  `
+    )
+    .join('');
+
+  container.innerHTML = html;
+}
+
+// Format checkpoint timestamp
+function formatCheckpointTime(timestamp) {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now - date;
+
+  if (diff < 3600000) {
+    const mins = Math.floor(diff / 60000);
+    return `${mins}m ago`;
+  }
+  if (diff < 86400000) {
+    const hours = Math.floor(diff / 3600000);
+    return `${hours}h ago`;
+  }
+
+  return (
+    date.toLocaleDateString() +
+    ' ' +
+    date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  );
+}
+
+// Extract first meaningful line from summary
+function extractFirstLine(summary) {
+  if (!summary) {
+    return 'No summary';
+  }
+  const lines = summary.split('\n').filter((l) => l.trim() && !l.startsWith('**'));
+  return lines[0] || summary.substring(0, 100);
+}
+
+// Extract and render related decisions from summary
+function renderRelatedDecisions(summary) {
+  if (!summary) {
+    return '';
+  }
+
+  // Match patterns like "decision_xxx" or "Related decisions: xxx, yyy"
+  const decisionPattern = /decision_[a-z0-9_]+/gi;
+  const matches = summary.match(decisionPattern);
+
+  if (!matches || matches.length === 0) {
+    return '';
+  }
+
+  const uniqueDecisions = [...new Set(matches)];
+
+  return `
+    <div class="checkpoint-section">
+      <div class="checkpoint-section-title">Related Decisions</div>
+      <div class="checkpoint-related">
+        ${uniqueDecisions.map((d) => `<span class="checkpoint-related-link" onclick="event.stopPropagation(); navigateToDecision('${d}')">${d.substring(9, 30)}...</span>`).join('')}
+      </div>
+    </div>
+  `;
+}
+
+// Expand/collapse checkpoint item
+// eslint-disable-next-line no-unused-vars
+function expandCheckpoint(idx) {
+  const items = document.querySelectorAll('.checkpoint-item');
+  items.forEach((item, i) => {
+    if (i === idx) {
+      item.classList.toggle('expanded');
+    } else {
+      item.classList.remove('expanded');
+    }
+  });
+}
+
+// Navigate to a decision in the graph (from checkpoint related link)
+// eslint-disable-next-line no-unused-vars
+function navigateToDecision(decisionId) {
+  // Close checkpoint panel
+  document.getElementById('checkpoint-panel').classList.remove('visible');
+
+  // Use existing navigateToNode function
+  navigateToNode(decisionId);
+}
+
+// Make detail panel draggable
+function initDraggablePanel() {
+  const panel = document.getElementById('detail-panel');
+  const header = panel.querySelector('h3');
+  let isDragging = false;
+  let offsetX, offsetY;
+
+  header.addEventListener('mousedown', (e) => {
+    isDragging = true;
+    offsetX = e.clientX - panel.offsetLeft;
+    offsetY = e.clientY - panel.offsetTop;
+    panel.style.transition = 'none';
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isDragging) {
+      return;
+    }
+    const x = Math.max(0, Math.min(e.clientX - offsetX, window.innerWidth - panel.offsetWidth));
+    const y = Math.max(50, Math.min(e.clientY - offsetY, window.innerHeight - panel.offsetHeight));
+    panel.style.left = x + 'px';
+    panel.style.top = y + 'px';
+    panel.style.right = 'auto';
+  });
+
+  document.addEventListener('mouseup', () => {
+    isDragging = false;
+    panel.style.transition = '';
+  });
+}
+
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', async () => {
+  // Initialize draggable panel
+  initDraggablePanel();
+
+  // Load checkpoints (panel is visible by default)
+  fetchCheckpoints();
+
   try {
     const data = await fetchGraphData();
     if (data.nodes.length === 0) {