Modsofthenation · cursor · Aug 15, 2026 · Aug 15, 2026 · Aug 15, 2026 · Aug 15, 2026
diff --git a/src/loadpath/static/assets/index-DASg3n-q.js b/src/loadpath/static/assets/index-DASg3n-q.js
diff --git a/...loadpath/static/assets/index-DA_Qg5fM.css → ...loadpath/static/assets/index-DDj-QTuJ.css b/...loadpath/static/assets/index-DA_Qg5fM.css → ...loadpath/static/assets/index-DDj-QTuJ.css
diff --git a/src/loadpath/static/assets/index-DKfAmZh8.js b/src/loadpath/static/assets/index-DKfAmZh8.js
diff --git a/src/loadpath/static/index.html b/src/loadpath/static/index.html
@@ -17,8 +17,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <script type="module" crossorigin src="./assets/index-DASg3n-q.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DA_Qg5fM.css">
+    <script type="module" crossorigin src="./assets/index-DKfAmZh8.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-DDj-QTuJ.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/tests/e2e/test_ui_flows.py b/tests/e2e/test_ui_flows.py
@@ -113,6 +113,19 @@ def test_ui_index_review_graph_copy_and_workspace(live_app, browser_page):
     inspector = page.get_by_test_id("graph-inspector")
     inspector.wait_for(timeout=10_000)
     assert inspector.inner_text().strip()
+    overflow = inspector.evaluate(
+        """el => {
+            const pane = el.parentElement;
+            const box = el.getBoundingClientRect();
+            const paneBox = pane.getBoundingClientRect();
+            return {
+                content: el.scrollWidth <= el.clientWidth + 1,
+                in_pane: box.right <= paneBox.right + 1 && box.left >= paneBox.left - 1,
+            };
+        }"""
+    )
+    assert overflow["content"], "selected-node inspector overflows horizontally"
+    assert overflow["in_pane"], "selected-node inspector extends outside the graph pane"
 
     page.get_by_test_id("graph-mode-architecture").click()
     assert page.get_by_test_id("graph-mode-architecture").get_attribute("aria-pressed") == "true"

diff --git a/ui/src/ImpactGraph.tsx b/ui/src/ImpactGraph.tsx
@@ -10,7 +10,7 @@ import {
   type NodeMouseHandler,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { typeLabel } from "./format";
+import { typeLabel, wrapHint } from "./format";
 import { layoutNodes, type GraphEdge, type GraphNode } from "./types";
 
 const WEIGHT_COLOR: Record<string, string> = {
@@ -23,7 +23,9 @@ function LoadNode({ data, selected }: { data: { name: string; type: string }; se
   return (
     <div className={selected ? "lp-node selected" : "lp-node"}>
       <div className="t">{typeLabel(data.type)}</div>
-      <div className="n">{data.name}</div>
+      <div className="n" title={data.name}>
+        {data.name}
+      </div>
     </div>
   );
 }
@@ -109,15 +111,16 @@ export function ImpactGraph({ nodes, edges }: { nodes: GraphNode[]; edges: Graph
       {selected ? (
         <aside className="inspector" data-testid="graph-inspector">
           <div className="t">{typeLabel(selected.type)}</div>
-          <div className="n">{selected.name}</div>
-          {selected.context ? <div className="muted">{selected.context}</div> : null}
+          <div className="n">{wrapHint(selected.name)}</div>
+          {selected.context ? <div className="muted">{wrapHint(selected.context)}</div> : null}
           {selected.file_path ? (
             <div className="file">
-              {selected.file_path}
-              {selected.start_line ? `:${selected.start_line}` : ""}
+              {wrapHint(
+                `${selected.file_path}${selected.start_line ? `:${selected.start_line}` : ""}`,
+              )}
             </div>
           ) : null}
-          <div className="muted">{selected.qualified_name}</div>
+          <div className="muted">{wrapHint(selected.qualified_name)}</div>
         </aside>
       ) : null}
     </div>

diff --git a/ui/src/format.test.ts b/ui/src/format.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { formatWhen, kindLabel, repoName, typeLabel } from "./format";
+import { formatWhen, kindLabel, repoName, typeLabel, wrapHint } from "./format";
 
 describe("display helpers", () => {
   it("humanizes kinds and types", () => {
@@ -13,4 +13,10 @@ describe("display helpers", () => {
     expect(formatWhen()).toBe("");
     expect(formatWhen("2026-08-14T00:00:00Z")).toMatch(/2026/);
   });
+
+  it("inserts wrap hints after identifier separators", () => {
+    expect(wrapHint("tests/unit/test_django_extractors.py")).toBe(
+      "tests/\u200bunit/\u200btest_\u200bdjango_\u200bextractors.\u200bpy",
+    );
+  });
 });
diff --git a/ui/src/format.ts b/ui/src/format.ts
@@ -16,3 +16,8 @@ export function formatWhen(iso?: string | null): string {
 export function repoName(path: string): string {
   return path.split(/[\\/]/).filter(Boolean).pop() || path;
 }
+
+/** Soft wrap opportunities after path/identifier separators. */
+export function wrapHint(text: string): string {
+  return text.replace(/([/\\._:@-])/g, "$1\u200b");
+}
diff --git a/ui/src/styles.css b/ui/src/styles.css
@@ -885,27 +885,42 @@ h2 { font-size: 13px; margin: 0; font-weight: 600; }
   right: 12px;
   z-index: 5;
   width: 260px;
+  max-width: calc(100% - 24px);
+  overflow-x: hidden;
+  overflow-wrap: break-word;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius-lg);
   padding: 10px 12px;
   box-shadow: 0 8px 24px var(--shadow);
 }
 .inspector .t { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
+.inspector .n,
+.inspector .file,
+.inspector .muted {
+  overflow-wrap: break-word;
+}
 .inspector .n { font-weight: 600; margin: 4px 0; }
 .lp-node {
   padding: 8px 10px;
   border-radius: var(--radius);
   border: 1px solid var(--node-line);
   background: var(--node-bg);
   width: 180px;
+  max-width: 100%;
   height: 56px;
   box-sizing: border-box;
   box-shadow: 0 0 0 1px var(--shadow);
   overflow: hidden;
 }
 .lp-node .t { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
-.lp-node .n { font-size: 13px; font-weight: 600; }
+.lp-node .n {
+  font-size: 13px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .lp-node.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
 .type-table {
   width: 100%;

diff --git a/ui/src/styles.test.ts b/ui/src/styles.test.ts
@@ -0,0 +1,40 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { afterEach, describe, expect, it } from "vitest";
+
+const css = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "styles.css"), "utf8");
+
+function mount(html: string) {
+  const style = document.createElement("style");
+  style.textContent = css;
+  document.head.appendChild(style);
+  document.body.innerHTML = html;
+}
+
+describe("graph selected-node overflow", () => {
+  afterEach(() => {
+    document.head.replaceChildren();
+    document.body.replaceChildren();
+  });
+
+  it("wraps long identifiers in the selected-node inspector", () => {
+    mount(
+      `<aside class="inspector"><div class="n">test_index_summary_includes_contexts_and_more</div><div class="file">tests/e2e/test_index_architecture_flow.py</div></aside>`,
+    );
+    const inspector = document.querySelector(".inspector") as HTMLElement;
+    const name = document.querySelector(".inspector .n") as HTMLElement;
+    expect(getComputedStyle(inspector).overflowWrap).toBe("break-word");
+    expect(getComputedStyle(inspector).overflowX).toBe("hidden");
+    expect(getComputedStyle(inspector).maxWidth).not.toBe("none");
+    expect(getComputedStyle(name).overflowWrap).toBe("break-word");
+  });
+
+  it("ellipsizes long titles inside graph nodes", () => {
+    mount(`<div class="lp-node"><div class="n">test_index_summary_includes_contexts_and_more</div></div>`);
+    const name = document.querySelector(".lp-node .n") as HTMLElement;
+    expect(getComputedStyle(name).textOverflow).toBe("ellipsis");
+    expect(getComputedStyle(name).overflow).toBe("hidden");
+    expect(getComputedStyle(name).whiteSpace).toBe("nowrap");
+  });
+});
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
@@ -17,5 +17,6 @@
     "noFallthroughCasesInSwitch": true,
     "types": ["vite/client"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts"]
 }