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

@@ -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
+	// Wird als fester Teil des 3-spaltigen Layouts gerendert.
-	// werden mehrere Sub-Tabs gerendert (Sub-Tabs als <Tabs />-Bar oben).
+	// 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,8 +91,11 @@
 	}
 </script>
 
-<Drawer open={section !== null} {title} {onClose} width={420}>
+{#if section}
-	{#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}
@@ -106,10 +108,40 @@
 			{/await}
 		{/if}
 	</div>
-	{/if}
+{/if}
-</Drawer>
 
 <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;

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)  │
+	//   │ Sidebar (240px)  │  Chat (flex)  │  Panel (420px)  │
-	//   │   - Suche        │    ChatPanel          │
+	//   │   - Suche        │  ChatPanel    │  ToolDrawer     │
-	//   │   - Sessions     │    (oder Detached     │
+	//   │   - Sessions     │               │  (optional)     │
-	//   │   - Nav-Rail     │     Placeholder)      │
+	//   │   - Nav-Rail     │               │                 │
-	//   └──────────────────────────────────────────┘
+	//   └─────────────────────────────────────────────────────┘
-	// ToolDrawer wird ueber Sidebar-Nav getriggert und ueberlagert von rechts.
+	// 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
+	{#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;