From e48519fff409df38f494d65c619f31d9505e29cb Mon Sep 17 00:00:00 2001
From: Eddy <eddy@alles-watt-laeuft.de>
Date: Mon, 13 Apr 2026 20:26:20 +0200
Subject: [PATCH] =?UTF-8?q?PaneForge=20statt=20eigener=20Resize-Logik=20?=
 =?UTF-8?q?=E2=80=94=20funktionierendes=20Drag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eigene Resize-Implementierung komplett ersetzt durch PaneForge Library:
- Getestet, Svelte 5 kompatibel, funktioniert in WebKitGTK
- autoSaveId für automatische Persistierung in localStorage
- minSize/maxSize pro Panel in Prozent
- Kein eigener Pointer-Event-Code mehr nötig

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 package.json            |   3 +-
 src/routes/+page.svelte | 263 ++++++++++++++--------------------------
 2 files changed, 95 insertions(+), 171 deletions(-)

diff --git a/package.json b/package.json
index 9ddd7e7..1c6a420 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@anthropic-ai/claude-code": "^0.2.0",
     "@tauri-apps/api": "^2.0.0",
     "@tauri-apps/plugin-shell": "^2.0.0",
-    "marked": "^18.0.0"
+    "marked": "^18.0.0",
+    "paneforge": "^1.0.2"
   }
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 387a8fd..b9255f2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { PaneGroup, Pane, PaneResizer } from 'paneforge';
 	import SessionList from '$lib/components/SessionList.svelte';
 	import ChatPanel from '$lib/components/ChatPanel.svelte';
 	import ActivityPanel from '$lib/components/ActivityPanel.svelte';
@@ -21,198 +21,121 @@
 		{ id: 'agents', label: 'Agents', icon: '🤖' },
 		{ id: 'guards', label: 'Guard-Rails', icon: '🛡️' },
 	];
-
-	// ============ Resizable Panels (Vanilla JS) ============
-
-	let panelWidths = [220, 400, 400, 380];
-	let gridEl: HTMLDivElement;
-	let handleEls: HTMLDivElement[] = [];
-
-	function applyWidths() {
-		if (!gridEl) return;
-		const available = gridEl.clientWidth - 24; // 3 Handles × 8px
-		const total = panelWidths[0] + panelWidths[1] + panelWidths[2] + panelWidths[3];
-
-		// Letztes Panel bekommt den Restplatz (mindestens 80px)
-		const lastWidth = Math.max(80, panelWidths[3] + (available - total));
-
-		const cols = `${panelWidths[0]}px 8px ${panelWidths[1]}px 8px ${panelWidths[2]}px 8px ${lastWidth}px`;
-		gridEl.style.gridTemplateColumns = cols;
-	}
-
-	onMount(() => {
-		// Gespeicherte Breiten laden
-		try {
-			const saved = localStorage.getItem('panel-widths');
-			if (saved) {
-				const parsed = JSON.parse(saved);
-				if (Array.isArray(parsed) && parsed.length === 4) panelWidths = parsed;
-			}
-		} catch {}
-
-		// An Fensterbreite anpassen
-		if (gridEl) {
-			const available = gridEl.parentElement?.clientWidth || window.innerWidth;
-			const total = panelWidths.reduce((a, b) => a + b, 0);
-			if (total > available || total < available * 0.5) {
-				const scale = available / total;
-				panelWidths = panelWidths.map(w => Math.max(80, Math.round(w * scale)));
-			}
-		}
-
-		applyWidths();
-
-		// Event-Handler per Vanilla JS an jedes Handle-Element binden
-		handleEls.forEach((el, idx) => {
-			if (!el) return;
-
-			el.addEventListener('pointerdown', (e: PointerEvent) => {
-				e.preventDefault();
-				e.stopPropagation();
-
-				const startX = e.clientX;
-				const startWidths = [...panelWidths];
-				const leftIdx = idx;
-				const rightIdx = idx + 1;
-
-				// Pointer capture — alle Events gehen an dieses Element
-				el.setPointerCapture(e.pointerId);
-				el.classList.add('active');
-
-				document.body.style.userSelect = 'none';
-				document.body.style.cursor = 'col-resize';
-				window.getSelection()?.removeAllRanges();
-
-				function onMove(ev: PointerEvent) {
-					ev.preventDefault();
-					const dx = ev.clientX - startX;
-					const min = 80;
-
-					let newL = startWidths[leftIdx] + dx;
-					let newR = startWidths[rightIdx] - dx;
-
-					if (newL < min) { newR -= (min - newL); newL = min; }
-					if (newR < min) { newL -= (min - newR); newR = min; }
-
-					panelWidths[leftIdx] = Math.max(min, newL);
-					panelWidths[rightIdx] = Math.max(min, newR);
-					applyWidths();
-				}
-
-				function onUp(ev: PointerEvent) {
-					el.releasePointerCapture(ev.pointerId);
-					el.classList.remove('active');
-					document.body.style.userSelect = '';
-					document.body.style.cursor = '';
-
-					el.removeEventListener('pointermove', onMove);
-					el.removeEventListener('pointerup', onUp);
-					el.removeEventListener('pointercancel', onUp);
-
-					try { localStorage.setItem('panel-widths', JSON.stringify(panelWidths)); } catch {}
-				}
-
-				el.addEventListener('pointermove', onMove);
-				el.addEventListener('pointerup', onUp);
-				el.addEventListener('pointercancel', onUp);
-			});
-		});
-	});
 </script>
 
-<div class="layout">
-	<div class="grid" bind:this={gridEl}>
-		<aside class="panel">
-			<SessionList />
-		</aside>
-		<div class="handle" bind:this={handleEls[0]}></div>
+<PaneGroup direction="horizontal" autoSaveId="claude-desktop-panels" class="pane-group">
+	<!-- Sessions -->
+	<Pane defaultSize={15} minSize={8} maxSize={30} class="panel">
+		<SessionList />
+	</Pane>
 
-		<section class="panel">
-			<ChatPanel />
-		</section>
-		<div class="handle" bind:this={handleEls[1]}></div>
+	<PaneResizer class="resizer">
+		<div class="resizer-line"></div>
+	</PaneResizer>
 
-		<section class="panel">
-			<div class="panel-tabs">
-				{#each middleTabs as tab}
-					<button
-						class="tab"
-						class:active={activeMiddleTab === tab.id}
-						on:click={() => activeMiddleTab = tab.id}
-					>
-						{tab.icon} {tab.label}
-					</button>
-				{/each}
-			</div>
-			<div class="panel-content">
-				{#if activeMiddleTab === 'activity'}
-					<ActivityPanel />
-				{:else if activeMiddleTab === 'memory'}
-					<MemoryPanel />
-				{:else if activeMiddleTab === 'audit'}
-					<AuditLog />
-				{/if}
-			</div>
-		</section>
-		<div class="handle" bind:this={handleEls[2]}></div>
+	<!-- Chat -->
+	<Pane defaultSize={35} minSize={15} class="panel">
+		<ChatPanel />
+	</Pane>
 
-		<section class="panel">
-			<div class="panel-tabs">
-				{#each rightTabs as tab}
-					<button
-						class="tab"
-						class:active={activeRightTab === tab.id}
-						on:click={() => activeRightTab = tab.id}
-					>
-						{tab.icon} {tab.label}
-					</button>
-				{/each}
-			</div>
-			<div class="panel-content">
-				{#if activeRightTab === 'agents'}
-					<AgentView />
-				{:else if activeRightTab === 'guards'}
-					<GuardRailsPanel />
-				{/if}
-			</div>
-		</section>
-	</div>
-</div>
+	<PaneResizer class="resizer">
+		<div class="resizer-line"></div>
+	</PaneResizer>
+
+	<!-- Aktivität / Memory / Audit -->
+	<Pane defaultSize={25} minSize={10} class="panel">
+		<div class="panel-tabs">
+			{#each middleTabs as tab}
+				<button
+					class="tab"
+					class:active={activeMiddleTab === tab.id}
+					on:click={() => activeMiddleTab = tab.id}
+				>
+					{tab.icon} {tab.label}
+				</button>
+			{/each}
+		</div>
+		<div class="panel-content">
+			{#if activeMiddleTab === 'activity'}
+				<ActivityPanel />
+			{:else if activeMiddleTab === 'memory'}
+				<MemoryPanel />
+			{:else if activeMiddleTab === 'audit'}
+				<AuditLog />
+			{/if}
+		</div>
+	</Pane>
+
+	<PaneResizer class="resizer">
+		<div class="resizer-line"></div>
+	</PaneResizer>
+
+	<!-- Agents / Guard-Rails -->
+	<Pane defaultSize={25} minSize={10} class="panel">
+		<div class="panel-tabs">
+			{#each rightTabs as tab}
+				<button
+					class="tab"
+					class:active={activeRightTab === tab.id}
+					on:click={() => activeRightTab = tab.id}
+				>
+					{tab.icon} {tab.label}
+				</button>
+			{/each}
+		</div>
+		<div class="panel-content">
+			{#if activeRightTab === 'agents'}
+				<AgentView />
+			{:else if activeRightTab === 'guards'}
+				<GuardRailsPanel />
+			{/if}
+		</div>
+	</Pane>
+</PaneGroup>
 
 <style>
-	.layout {
-		height: 100%;
-		overflow: hidden;
-	}
-
-	.grid {
-		display: grid;
-		grid-template-columns: 220px 8px 1fr 8px 1fr 8px 380px;
+	/* PaneForge Container */
+	:global(.pane-group) {
 		height: 100%;
 	}
 
-	.panel {
+	:global(.panel) {
 		display: flex;
 		flex-direction: column;
 		background: var(--bg-primary);
 		overflow: hidden;
-		min-width: 0;
 	}
 
-	/* Handle — eigene Grid-Spalte, Touch-Area */
-	.handle {
+	/* Resizer Handle */
+	:global(.resizer) {
 		width: 8px;
-		cursor: col-resize;
 		background: var(--border);
-		touch-action: none;       /* Wichtig für Pointer Events */
-		user-select: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: col-resize;
+		transition: background 0.15s ease;
 	}
 
-	.handle:hover,
-	.handle.active {
+	:global(.resizer:hover),
+	:global(.resizer[data-state="drag"]) {
 		background: var(--accent);
 	}
 
+	.resizer-line {
+		width: 2px;
+		height: 24px;
+		border-radius: 1px;
+		background: var(--text-secondary);
+		opacity: 0;
+		transition: opacity 0.15s;
+	}
+
+	:global(.resizer:hover) .resizer-line,
+	:global(.resizer[data-state="drag"]) .resizer-line {
+		opacity: 0.5;
+	}
+
 	/* Tabs */
 	.panel-tabs {
 		display: flex;