From f6a12de6ef56e2c97fc93186c1078c9588fa474a Mon Sep 17 00:00:00 2001
From: Eddy <eddy@alles-watt-laeuft.de>
Date: Sat, 2 May 2026 22:42:31 +0200
Subject: [PATCH] fix: Panel als fester Teil des Layouts statt Overlay
 [appimage]

ToolDrawer ist jetzt 3. Spalte im Flex-Layout (Sidebar | Chat | Panel).
Kein position:fixed, kein Backdrop, kein Overlay. Panel bleibt fest offen
bis X-Button, Esc oder erneuter Sidebar-Klick. Chat wird schmaler.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/ToolDrawer.svelte | 72 ++++++++++++++++++++--------
 src/routes/+page.svelte              | 48 ++++++++++++-------
 2 files changed, 82 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/ToolDrawer.svelte b/src/lib/components/ToolDrawer.svelte
index 89c6444..b33a451 100644
--- a/src/lib/components/ToolDrawer.svelte
+++ b/src/lib/components/ToolDrawer.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	// Werkzeug-Drawer (Phase 9)
+	// Werkzeug-Panel (Phase 9.2 — fest im Layout, kein Overlay)
 	//
-	// Klick auf Sidebar-Nav oeffnet diesen Drawer von rechts. Pro Sektion
-	// werden mehrere Sub-Tabs gerendert (Sub-Tabs als <Tabs />-Bar oben).
+	// Wird als fester Teil des 3-spaltigen Layouts gerendert.
+	// Pro Sektion werden mehrere Sub-Tabs gerendert.
 	//
 	// Sektionen:
 	//   activity → ActivityPanel · MonitorPanel · PerformancePanel
@@ -10,7 +10,6 @@
 	//   tools    → ProgramsPanel · VoicePanel · AgentView · GuardRailsPanel · HooksPanel
 	//   settings → SettingsPanel · AuditLog
 
-	import Drawer from '$lib/ui/Drawer.svelte';
 	import Tabs from '$lib/ui/Tabs.svelte';
 	import type { DrawerSection } from './Sidebar.svelte';
 
@@ -92,24 +91,57 @@
 	}
 </script>
 
-<Drawer open={section !== null} {title} {onClose} width={420}>
-	{#if section}
-		<Tabs items={tabs} active={activeTab} onSelect={setActiveTab} />
-		<div class="content">
-			{#if activeTab}
-				{#await getPanel(activeTab)}
-					<div class="placeholder">Lade …</div>
-				{:then mod}
-					<svelte:component this={mod.default} />
-				{:catch err}
-					<div class="error">Fehler beim Laden: {err}</div>
-				{/await}
-			{/if}
-		</div>
-	{/if}
-</Drawer>
+{#if section}
+	<header class="head">
+		<span class="title">{title}</span>
+		<button class="close-btn" onclick={() => onClose()} title="Schliessen (Esc)">×</button>
+	</header>
+	<Tabs items={tabs} active={activeTab} onSelect={setActiveTab} />
+	<div class="content">
+		{#if activeTab}
+			{#await getPanel(activeTab)}
+				<div class="placeholder">Lade …</div>
+			{:then mod}
+				<svelte:component this={mod.default} />
+			{:catch err}
+				<div class="error">Fehler beim Laden: {err}</div>
+			{/await}
+		{/if}
+	</div>
+{/if}
 
 <style>
+	.head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--sp-2) var(--sp-3);
+		min-height: var(--titlebar-height, 40px);
+		border-bottom: 1px solid var(--border);
+		flex-shrink: 0;
+	}
+
+	.title {
+		font-size: var(--fs-lg);
+		font-weight: var(--fw-semi);
+		color: var(--text-heading);
+	}
+
+	.close-btn {
+		font-size: 18px;
+		line-height: 1;
+		padding: 0 var(--sp-2);
+		color: var(--text-secondary);
+		border-radius: var(--r-sm);
+		background: transparent;
+		border: 0;
+		cursor: pointer;
+	}
+	.close-btn:hover {
+		background: var(--bg-hover);
+		color: var(--text-primary);
+	}
+
 	.content {
 		flex: 1;
 		min-height: 0;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5a099d7..07fc08e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-	// Hauptfenster-Layout (Phase 9, Cursor-Stil 2-spaltig)
+	// Hauptfenster-Layout (Phase 9.2 — 3-spaltig mit festem Panel)
 	//
-	//   ┌──────────────────────────────────────────┐
-	//   │ Sidebar (240px)  │  Hauptbereich (flex)  │
-	//   │   - Suche        │    ChatPanel          │
-	//   │   - Sessions     │    (oder Detached     │
-	//   │   - Nav-Rail     │     Placeholder)      │
-	//   └──────────────────────────────────────────┘
-	// ToolDrawer wird ueber Sidebar-Nav getriggert und ueberlagert von rechts.
+	//   ┌─────────────────────────────────────────────────────┐
+	//   │ Sidebar (240px)  │  Chat (flex)  │  Panel (420px)  │
+	//   │   - Suche        │  ChatPanel    │  ToolDrawer     │
+	//   │   - Sessions     │               │  (optional)     │
+	//   │   - Nav-Rail     │               │                 │
+	//   └─────────────────────────────────────────────────────┘
+	// Panel ist fester Teil des Flex-Layouts, kein Overlay.
+	// Schließt nur per X-Button, Esc oder erneuten Sidebar-Klick.
 
 	import { invoke } from '@tauri-apps/api/core';
 	import { listen } from '@tauri-apps/api/event';
@@ -40,17 +41,16 @@
 				e.preventDefault();
 				showQuickActions = !showQuickActions;
 			}
-			// Esc schliesst Drawer
+			// Esc schliesst Panel
 			if (e.key === 'Escape' && activeDrawer) {
 				activeDrawer = null;
 			}
 		};
 		window.addEventListener('keydown', handler);
 
-		// Quick-Actions Navigation: Drawer-Sektion bei Sub-Tab-Wahl oeffnen
+		// Quick-Actions Navigation: Panel-Sektion bei Sub-Tab-Wahl oeffnen
 		await listen<{ panel: string; tab: string }>('navigate-tab', (event) => {
 			const t = event.payload.tab;
-			// Mappe Sub-Tab → Section
 			if (['activity', 'monitor', 'perf'].includes(t))                          activeDrawer = 'activity';
 			else if (['memory', 'knowledge', 'context'].includes(t))                  activeDrawer = 'memory';
 			else if (['programs', 'voice', 'agents', 'guards', 'hooks'].includes(t))  activeDrawer = 'tools';
@@ -62,8 +62,6 @@
 
 	function handleQuickAction(action: any) {
 		showQuickActions = false;
-		// Wenn die Action eine navigate-tab Anweisung war, oeffnet der Listener den Drawer
-		// Andere Actions werden vom ChatPanel verarbeitet (Slash-Commands etc.)
 		if (action?.invoke) {
 			invoke(action.invoke, action.invokeArgs ?? {}).catch((e) =>
 				console.error('Quick-Action invoke failed:', e)
@@ -91,12 +89,16 @@
 			</div>
 		{/if}
 	</div>
-</div>
 
-<ToolDrawer
-	section={activeDrawer}
-	onClose={() => (activeDrawer = null)}
-/>
+	{#if activeDrawer}
+		<div class="panel">
+			<ToolDrawer
+				section={activeDrawer}
+				onClose={() => (activeDrawer = null)}
+			/>
+		</div>
+	{/if}
+</div>
 
 <QuickActions bind:visible={showQuickActions} onExecute={handleQuickAction} />
 
@@ -117,6 +119,16 @@
 		background: var(--bg-primary);
 	}
 
+	.panel {
+		width: 420px;
+		flex-shrink: 0;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		border-left: 1px solid var(--border);
+		background: var(--bg-secondary);
+	}
+
 	.detached {
 		flex: 1;
 		display: flex;