From e3f4c8a39bd970d20b82bd3b7af66f6e721554c7 Mon Sep 17 00:00:00 2001
From: Emilio Balda <me@emilio-balda.com>
Date: Wed, 2 Sep 2026 13:03:45 +0300
Subject: [PATCH 1/4] chore: remove graph layout selector

---
 src/App.jsx   | 15 ---------------
 src/Graph.jsx |  8 ++++----
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 34cbbb3..e6d7619 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,7 +24,6 @@ const Graph = lazy(() => import("./Graph.jsx").then((module) => ({ default: modu
 export function App({ bundle }) {
   const [search, setSearch] = useState("");
   const [typeFilter, setTypeFilter] = useState("");
-  const [layout, setLayout] = useState("cose");
   const [selectedId, setSelectedId] = useState(bundle.nodes[0]?.data.id || null);
   const [resetSignal, setResetSignal] = useState(0);
   const [sidebarOpen, setSidebarOpen] = useState(
@@ -115,19 +114,6 @@ export function App({ bundle }) {
               </option>
             ))}
           </select>
-          <select
-            aria-label="Graph layout"
-            id="graph-layout"
-            name="graph-layout"
-            value={layout}
-            onChange={(event) => setLayout(event.target.value)}
-          >
-            <option value="cose">cose (force)</option>
-            <option value="concentric">concentric</option>
-            <option value="breadthfirst">breadth-first</option>
-            <option value="circle">circle</option>
-            <option value="grid">grid</option>
-          </select>
           <button type="button" onClick={resetView}>
             Reset view
           </button>
@@ -186,7 +172,6 @@ export function App({ bundle }) {
         <Suspense fallback={<section className="graph loading-panel muted">Loading graph…</section>}>
           <Graph
             bundle={bundle}
-            layout={layout}
             matchingIds={matchingIds}
             selectedId={selectedId}
             resetSignal={resetSignal}
diff --git a/src/Graph.jsx b/src/Graph.jsx
index 60fd35f..af99992 100644
--- a/src/Graph.jsx
+++ b/src/Graph.jsx
@@ -93,7 +93,7 @@ function graphStyle(theme) {
   ];
 }
 
-export function Graph({ bundle, layout, matchingIds, selectedId, resetSignal, theme, onSelect }) {
+export function Graph({ bundle, matchingIds, selectedId, resetSignal, theme, onSelect }) {
   const containerRef = useRef(null);
   const graphRef = useRef(null);
 
@@ -102,7 +102,7 @@ export function Graph({ bundle, layout, matchingIds, selectedId, resetSignal, th
       container: containerRef.current,
       elements: [...bundle.nodes, ...buildUndirectedEdges(bundle.edges)],
       style: graphStyle(theme),
-      layout: { name: layout, animate: false, padding: 30 },
+      layout: { name: "cose", animate: false, padding: 30 },
       minZoom: 0.2,
       maxZoom: 2,
     });
@@ -133,8 +133,8 @@ export function Graph({ bundle, layout, matchingIds, selectedId, resetSignal, th
     if (!graph) {
       return;
     }
-    graph.layout({ name: layout, animate: false, padding: 30 }).run();
-  }, [layout, bundle]);
+    graph.layout({ name: "cose", animate: false, padding: 30 }).run();
+  }, [bundle]);
 
   useEffect(() => {
     const graph = graphRef.current;

From 1664173f2135a3ce616345a33806faa0306a20ee Mon Sep 17 00:00:00 2001
From: Emilio Balda <me@emilio-balda.com>
Date: Wed, 2 Sep 2026 13:10:10 +0300
Subject: [PATCH 2/4] Migrate inline SVG icons to lucide-react

Replaces hand-drawn sidebar toggle, theme, and search icons with
lucide-react components for consistency and easier maintenance.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 package-lock.json | 10 ++++++++++
 package.json      |  1 +
 src/App.jsx       | 17 ++++-------------
 src/Sidebar.jsx   | 13 ++-----------
 4 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index dd72970..254e187 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "cytoscape": "^3.34.2",
+        "lucide-react": "^1.39.0",
         "markdown-to-jsx": "^7.7.17",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
@@ -844,6 +845,15 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "1.39.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.39.0.tgz",
+      "integrity": "sha512-y8nXoEwvqqIsF927NBWXODa4bfMrcUeEb/9sgpwFqg0gUjgn3j5Hznk+v7STmPgZ2iQ11JKlbQGdFRuTOwvYkA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
diff --git a/package.json b/package.json
index 6bd4833..4f7614c 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "cytoscape": "^3.34.2",
+    "lucide-react": "^1.39.0",
     "markdown-to-jsx": "^7.7.17",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
diff --git a/src/App.jsx b/src/App.jsx
index e6d7619..09e0a8e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
+import { Moon, PanelLeft, Sun } from "lucide-react";
 
 import { filterConceptIds } from "./navigation.js";
 import { Sidebar } from "./Sidebar.jsx";
@@ -87,12 +88,7 @@ export function App({ bundle }) {
             aria-label={sidebarOpen ? "Hide file sidebar" : "Show file sidebar"}
             onClick={() => setSidebarOpen((open) => !open)}
           >
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-              <rect x="2.25" y="2.75" width="11.5" height="10.5" rx="1.5" stroke="currentColor" strokeWidth="1.25" />
-              <path d="M5.75 3v10" stroke="currentColor" strokeWidth="1.25" />
-              <path d="M3.5 5.25h1" stroke="currentColor" strokeWidth="1.25" />
-              <path d="M3.5 7.75h1" stroke="currentColor" strokeWidth="1.25" />
-            </svg>
+            <PanelLeft size={16} strokeWidth={1.25} aria-hidden="true" />
           </button>
           <div className="title">
             <strong>{bundle.name}</strong>
@@ -125,14 +121,9 @@ export function App({ bundle }) {
             onClick={toggleTheme}
           >
             {theme === "dark" ? (
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-                <circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.25" />
-                <path d="M8 1.75v1.5M8 12.75v1.5M1.75 8h1.5M12.75 8h1.5M3.6 3.6l1.05 1.05M11.35 11.35l1.05 1.05M12.4 3.6l-1.05 1.05M4.65 11.35 3.6 12.4" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
-              </svg>
+              <Sun size={16} strokeWidth={1.25} aria-hidden="true" />
             ) : (
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-                <path d="M12.9 10.2A5.2 5.2 0 0 1 5.8 3.1 5.25 5.25 0 1 0 12.9 10.2Z" stroke="currentColor" strokeWidth="1.25" strokeLinejoin="round" />
-              </svg>
+              <Moon size={16} strokeWidth={1.25} aria-hidden="true" />
             )}
           </button>
         </div>
diff --git a/src/Sidebar.jsx b/src/Sidebar.jsx
index a52fa28..4892309 100644
--- a/src/Sidebar.jsx
+++ b/src/Sidebar.jsx
@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { Search } from "lucide-react";
 import { useMemo } from "react";
 
 import { buildFolderTree } from "./navigation.js";
@@ -96,17 +97,7 @@ export function Sidebar({
   return (
     <nav className="sidebar" aria-label="Bundle files">
       <div className="sidebar-search-wrap">
-        <svg
-          className="sidebar-search-icon"
-          width="15"
-          height="15"
-          viewBox="0 0 16 16"
-          fill="none"
-          aria-hidden="true"
-        >
-          <circle cx="7" cy="7" r="4.25" stroke="currentColor" strokeWidth="1.4" />
-          <path d="m10.2 10.2 3 3" stroke="currentColor" strokeWidth="1.4" />
-        </svg>
+        <Search className="sidebar-search-icon" size={15} strokeWidth={1.4} aria-hidden="true" />
         <input
           aria-label="Search bundle files"
           id="concept-search"

From cbcd5a69ae49bf82262c54391a1d9589fa47021a Mon Sep 17 00:00:00 2001
From: Emilio Balda <me@emilio-balda.com>
Date: Wed, 2 Sep 2026 13:19:51 +0300
Subject: [PATCH 3/4] Fix type filter dropdown padding and text clipping

Replace the native select arrow with a custom chevron so the gap
between the label and arrow is consistent, and add ellipsis/max-width
safeguards so the label never hard-clips under tight layouts.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/styles.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/styles.css b/src/styles.css
index 2ebd280..2869444 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -185,6 +185,19 @@ select {
   box-shadow: var(--shadow-sm);
 }
 
+.controls select {
+  max-width: 160px;
+  padding-right: 24px;
+  overflow: hidden;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23767b87' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--space-8) center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
 .controls select:hover,
 .controls button:hover,
 .icon-button:hover {

From 47d120a7793f5f41d927005d1c3163d957c5b597 Mon Sep 17 00:00:00 2001
From: Emilio Balda <me@emilio-balda.com>
Date: Wed, 2 Sep 2026 13:20:43 +0300
Subject: [PATCH 4/4] Increase theme toggle icon stroke weight for better
 visibility

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/App.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 09e0a8e..9769276 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -121,9 +121,9 @@ export function App({ bundle }) {
             onClick={toggleTheme}
           >
             {theme === "dark" ? (
-              <Sun size={16} strokeWidth={1.25} aria-hidden="true" />
+              <Sun size={16} strokeWidth={1.5} aria-hidden="true" />
             ) : (
-              <Moon size={16} strokeWidth={1.25} aria-hidden="true" />
+              <Moon size={16} strokeWidth={1.5} aria-hidden="true" />
             )}
           </button>
         </div>