From f8bbb2e9939de292be1d2efec18609743798453d Mon Sep 17 00:00:00 2001
From: Viktor Barzin <viktorbarzin@meta.com>
Date: Mon, 23 Mar 2026 00:37:24 +0200
Subject: [PATCH] add fullscreen toggle to graph visualization

Expand/collapse button in bottom-right corner lets the graph fill the
entire viewport for better exploration. Escape key exits fullscreen.
Category filters overlay in top-left when fullscreen.
---
 src/claude_memory/ui/static/css/app.css | 54 +++++++++++++++++++++++++
 src/claude_memory/ui/static/index.html  | 16 ++++++++
 src/claude_memory/ui/static/js/graph.js | 19 +++++++++
 3 files changed, 89 insertions(+)

diff --git a/src/claude_memory/ui/static/css/app.css b/src/claude_memory/ui/static/css/app.css
index 907095c..ab46abe 100644
--- a/src/claude_memory/ui/static/css/app.css
+++ b/src/claude_memory/ui/static/css/app.css
@@ -289,6 +289,60 @@ textarea.input-field {
   height: 100%;
 }
 
+/* Fullscreen toggle button */
+.fullscreen-toggle-btn {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 11;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.5rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fullscreen-toggle-btn:hover {
+  color: var(--accent);
+  border-color: var(--border-accent);
+  box-shadow: 0 0 12px var(--accent-glow);
+}
+
+/* Graph fullscreen mode */
+.graph-fullscreen {
+  position: fixed !important;
+  inset: 0 !important;
+  z-index: 50 !important;
+  background: var(--bg-primary) !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+}
+
+.graph-fullscreen .graph-container {
+  height: 100vh !important;
+  border-radius: 0;
+  border: none;
+}
+
+.graph-fullscreen .flex.flex-wrap.gap-2.mb-4 {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  z-index: 11;
+  background: var(--bg-primary);
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  opacity: 0.9;
+}
+
 /* Node detail panel */
 .node-detail {
   background: var(--bg-secondary);
diff --git a/src/claude_memory/ui/static/index.html b/src/claude_memory/ui/static/index.html
index 9d99b8c..4b22f40 100644
--- a/src/claude_memory/ui/static/index.html
+++ b/src/claude_memory/ui/static/index.html
@@ -488,6 +488,22 @@
         <div class="relative">
           <div class="graph-container" x-ref="graphContainer"></div>
 
+          <!-- Fullscreen toggle button -->
+          <button class="fullscreen-toggle-btn" @click="toggleFullscreen()" :title="isFullscreen ? 'Exit fullscreen' : 'Fullscreen'">
+            <template x-if="!isFullscreen">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline>
+                <line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line>
+              </svg>
+            </template>
+            <template x-if="isFullscreen">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline>
+                <line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line>
+              </svg>
+            </template>
+          </button>
+
           <template x-if="selectedNode">
             <div class="node-detail" style="position:absolute; top:1rem; right:1rem; width:20rem; z-index:10;">
               <div class="flex items-center gap-2 mb-2">
diff --git a/src/claude_memory/ui/static/js/graph.js b/src/claude_memory/ui/static/js/graph.js
index e1ea1fa..d52b1de 100644
--- a/src/claude_memory/ui/static/js/graph.js
+++ b/src/claude_memory/ui/static/js/graph.js
@@ -7,6 +7,7 @@ function graphComponent() {
     loading: false,
     selectedNode: null,
     simulation: null,
+    isFullscreen: false,
 
     async init() {
       this.loading = true;
@@ -194,6 +195,24 @@ function graphComponent() {
       });
     },
 
+    toggleFullscreen() {
+      this.isFullscreen = !this.isFullscreen;
+      const wrapper = this.$el.closest('[x-show="$store.app.activeTab === \'graph\'"]');
+      if (wrapper) {
+        wrapper.classList.toggle('graph-fullscreen', this.isFullscreen);
+      }
+      if (this.isFullscreen) {
+        this._escHandler = (e) => { if (e.key === 'Escape') this.toggleFullscreen(); };
+        document.addEventListener('keydown', this._escHandler);
+      } else {
+        if (this._escHandler) {
+          document.removeEventListener('keydown', this._escHandler);
+          this._escHandler = null;
+        }
+      }
+      setTimeout(() => this.render(), 50);
+    },
+
     preview(content, len = 200) {
       if (!content) return '';
       return content.length > len ? content.substring(0, len) + '...' : content;