From 28a78beb97b2d0835b5fb9a3c03f197b81779e3a Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Mon, 14 Sep 2026 08:46:07 +0300
Subject: [PATCH] =?UTF-8?q?Graph-view=20round=201=20(owner):=20full-bleed?=
 =?UTF-8?q?=20canvas=20=E2=80=94=20no=20padding,=20under=20the=20floating?=
 =?UTF-8?q?=20chrome?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The home graph view had breathing room on every side (main px-4 py-2,
the composer docked below in flow, the header above). Per the owner:

- The canvas now owns the whole column — absolute inset-0, from the
  sidebar to the right edge of the screen, bottom to top, zero padding.
- The header floats over the graph (pointer-events-none except the
  sidebar toggle, so the canvas stays draggable around it).
- The new-session blob + stats bar dock OVER the graph at the bottom,
  no gradient scrims anywhere — the graph runs clean under everything
  to the very edges.
- The renderer itself is untouched: same canvas, same data, same fit
  logic — only its container grew. The composer keeps chat's DOCK
  geometry (max-w-[46rem] px-4) so nothing shifts when a session starts.

Verified live in headless chromium (1280×800, sidebar open): canvas
spans x 288→1280 (sidebar edge → right edge), y 0→800 (bottom to top);
the header overlays the top; the dock overlays the bottom with its
content ending 16px above the viewport edge.
---
 components/home.tsx | 38 +++++++++++++++++++++++---------------
 package-lock.json   |  2 ++
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/components/home.tsx b/components/home.tsx
index a5d1846..189451f 100644
--- a/components/home.tsx
+++ b/components/home.tsx
@@ -9,9 +9,10 @@ import { StatsBar } from "@/components/stats-bar";
 import type { ChatSettings, TurnUsage } from "@/src/core";
 
 /**
- * Home — the knowledge graph is the main view (placeholder until the graph
- * pipeline lands), with the new-session blob docked below it. Sessions live
- * in the toggleable sidebar.
+ * Home — the knowledge graph is the main view, full-bleed edge to edge
+ * (owner, graph-view round 1): the canvas owns the whole column, running
+ * under the header and the new-session dock, both of which float over it
+ * with no gradient scrims. Sessions live in the toggleable sidebar.
  */
 export function Home() {
 	const router = useRouter();
@@ -48,21 +49,28 @@ export function Home() {
 	};
 
 	return (
-		<div className="flex h-dvh flex-col">
-			<header className="flex items-center gap-2 px-3 py-2">
-				<SidebarToggle />
-			</header>
-
-			{/* Graph — the main view (W4: sigma.js render of the derived graph). */}
-			<main className="min-h-0 flex-1 px-4 py-2">
+		<div className="relative h-dvh">
+			{/* Graph — the main view, full-bleed (owner, graph-view round 1): no
+			    padding on any side; the canvas runs from the sidebar to the right
+			    edge and from the bottom to the top, under everything else. */}
+			<main className="absolute inset-0">
 				<GraphView />
 			</main>
 
-			{/* New session — same floating blob as the chat composer. */}
-			<div className="pb-4">
-				{/* Matches chat.tsx's DOCK geometry (max-w-[46rem] px-4) so nothing
-			    shifts when a session starts (owner). */}
-			<div className="mx-auto w-full max-w-[46rem] px-4">
+			{/* Header floats over the graph — pointer-events-none except the
+			    toggle, so the canvas stays draggable/hoverable around it. */}
+			<header className="pointer-events-none absolute inset-x-0 top-0 flex items-center gap-2 px-3 py-2">
+				<div className="pointer-events-auto">
+					<SidebarToggle />
+				</div>
+			</header>
+
+			{/* New session — same floating blob as the chat composer, docked
+			    OVER the graph (no gradient: the graph runs clean under it to the
+			    bottom edge). Matches chat.tsx's DOCK geometry (max-w-[46rem]
+			    px-4) so nothing shifts when a session starts (owner). */}
+			<div className="pointer-events-none absolute inset-x-0 bottom-0 pb-4">
+				<div className="pointer-events-auto mx-auto w-full max-w-[46rem] px-4">
 					<form
 						className="flex items-end gap-1.5 rounded-2xl border bg-card p-1.5 shadow-lg"
 					onSubmit={(e) => {
diff --git a/package-lock.json b/package-lock.json
index d6c41f0..a2771ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,9 @@
 				"cmdk": "^1.1.1",
 				"d3-force": "^3.0.0",
 				"d3-selection": "^3.0.0",
+				"d3-shape": "^3.2.0",
 				"d3-zoom": "^3.0.0",
+				"dagre-d3-es": "7.0.14",
 				"embla-carousel-react": "^8.6.0",
 				"katex": "^0.16.47",
 				"linkedom": "^0.18.13",