Phase 4: Tab-Switching, Markdown-Rendering, Guard-Rails UI

- +page.svelte: Echtes Tab-Switching (Aktivität/Gedächtnis/Historie + Agents/Guard-Rails)
- ChatPanel: Markdown-Rendering via marked, Auto-Scroll, verbessertes Layout
- GuardRailsPanel: Neue Komponente für Permission-Verwaltung (CRUD, blockierte Patterns)
- package.json: marked als Dependency

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@anthropic-ai/claude-code": "^0.2.0",
     "@tauri-apps/api": "^2.0.0",
-    "@tauri-apps/plugin-shell": "^2.0.0"
+    "@tauri-apps/plugin-shell": "^2.0.0",
+    "marked": "^18.0.0"
   }
 }

src/lib/components/ChatPanel.svelte

@@ -1,20 +1,47 @@
 <script lang="ts">
 	import { invoke } from '@tauri-apps/api/core';
 	import { messages, currentInput, isProcessing, addMessage } from '$lib/stores/app';
+	import { marked } from 'marked';
+	import { tick } from 'svelte';
+
+	// marked konfigurieren: kein sanitize nötig (lokale App, kein User-Input von extern)
+	marked.setOptions({
+		breaks: true,
+		gfm: true,
+	});
+
+	// Markdown zu HTML konvertieren
+	function renderMarkdown(text: string): string {
+		try {
+			return marked.parse(text) as string;
+		} catch {
+			return text;
+		}
+	}
+
+	// Auto-Scroll zum Ende
+	let messagesContainer: HTMLDivElement;
+
+	async function scrollToBottom() {
+		await tick();
+		if (messagesContainer) {
+			messagesContainer.scrollTop = messagesContainer.scrollHeight;
+		}
+	}
+
+	// Bei neuen Nachrichten scrollen
+	$: if ($messages.length) scrollToBottom();
 
 	async function sendMessage() {
 		const text = $currentInput.trim();
 		if (!text || $isProcessing) return;
 
-		// Nachricht hinzufügen
 		addMessage('user', text);
 		$currentInput = '';
 		$isProcessing = true;
 
 		try {
-			// An Claude senden via Tauri
 			await invoke('send_message', { message: text });
-			// Antwort kommt über Events (claude-text, agent-stopped)
 		} catch (err) {
 			console.error('Fehler beim Senden:', err);
 			addMessage('system', `Fehler: ${err}`);
@@ -33,13 +60,15 @@
 <div class="chat-panel">
 	<div class="chat-header">
 		<h2>💬 Chat</h2>
+		<span class="msg-count">{$messages.length} Nachrichten</span>
 	</div>
 
-	<div class="chat-messages">
+	<div class="chat-messages" bind:this={messagesContainer}>
 		{#if $messages.length === 0}
 			<div class="empty-state">
+				<div class="empty-icon">🤖</div>
 				<p>Starte eine Konversation mit Claude.</p>
-				<p class="hint">Drücke Enter zum Senden, Shift+Enter für neue Zeile.</p>
+				<p class="hint">Enter = Senden, Shift+Enter = Neue Zeile, Escape = Stopp</p>
 			</div>
 		{:else}
 			{#each $messages as message}
@@ -59,14 +88,18 @@
 						</span>
 					</div>
 					<div class="message-content">
-						{message.content}
+						{#if message.role === 'assistant'}
+							{@html renderMarkdown(message.content)}
+						{:else}
+							{message.content}
+						{/if}
 					</div>
 				</div>
 			{/each}
 		{/if}
 
 		{#if $isProcessing}
-			<div class="message assistant">
+			<div class="message assistant typing-msg">
 				<div class="message-header">
 					<span class="message-role">🤖 Claude</span>
 				</div>
@@ -92,7 +125,11 @@
 			on:click={sendMessage}
 			disabled={!$currentInput.trim() || $isProcessing}
 		>
-			Senden
+			{#if $isProcessing}
+				⏳
+			{:else}
+				➤
+			{/if}
 		</button>
 	</div>
 </div>
@@ -105,6 +142,9 @@
 	}
 
 	.chat-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 		padding: var(--spacing-sm) var(--spacing-md);
 		background: var(--bg-secondary);
 		border-bottom: 1px solid var(--bg-tertiary);
@@ -115,6 +155,11 @@
 		font-weight: 600;
 	}
 
+	.msg-count {
+		font-size: 0.625rem;
+		color: var(--text-secondary);
+	}
+
 	.chat-messages {
 		flex: 1;
 		overflow-y: auto;
@@ -134,29 +179,39 @@
 		text-align: center;
 	}
 
+	.empty-icon {
+		font-size: 3rem;
+		margin-bottom: var(--spacing-md);
+		opacity: 0.5;
+	}
+
 	.empty-state .hint {
 		font-size: 0.75rem;
 		margin-top: var(--spacing-sm);
+		color: var(--text-secondary);
+		opacity: 0.7;
 	}
 
 	.message {
 		padding: var(--spacing-sm) var(--spacing-md);
 		border-radius: var(--radius-md);
 		background: var(--bg-secondary);
+		max-width: 85%;
 	}
 
 	.message.user {
 		background: var(--bg-tertiary);
-		margin-left: var(--spacing-xl);
+		margin-left: auto;
 	}
 
 	.message.assistant {
-		margin-right: var(--spacing-xl);
+		margin-right: auto;
 	}
 
 	.message.system {
 		background: rgba(233, 69, 96, 0.1);
 		border-left: 3px solid var(--accent);
+		max-width: 100%;
 	}
 
 	.message-header {
@@ -167,19 +222,105 @@
 	}
 
 	.message-role {
-		font-size: 0.75rem;
+		font-size: 0.7rem;
 		font-weight: 600;
 	}
 
 	.message-time {
-		font-size: 0.625rem;
+		font-size: 0.6rem;
 		color: var(--text-secondary);
 	}
 
 	.message-content {
-		font-size: 0.875rem;
+		font-size: 0.85rem;
-		line-height: 1.5;
+		line-height: 1.6;
-		white-space: pre-wrap;
+	}
+
+	/* Markdown-Styles innerhalb von Nachrichten */
+	.message-content :global(p) {
+		margin: 0.3em 0;
+	}
+
+	.message-content :global(p:first-child) {
+		margin-top: 0;
+	}
+
+	.message-content :global(p:last-child) {
+		margin-bottom: 0;
+	}
+
+	.message-content :global(code) {
+		font-family: var(--font-mono);
+		font-size: 0.8rem;
+		padding: 0.1em 0.35em;
+		background: var(--bg-tertiary);
+		border-radius: var(--radius-sm);
+	}
+
+	.message-content :global(pre) {
+		margin: 0.5em 0;
+		padding: var(--spacing-sm) var(--spacing-md);
+		background: var(--bg-tertiary);
+		border-radius: var(--radius-md);
+		overflow-x: auto;
+		font-size: 0.75rem;
+		line-height: 1.4;
+	}
+
+	.message-content :global(pre code) {
+		padding: 0;
+		background: none;
+	}
+
+	.message-content :global(ul), .message-content :global(ol) {
+		margin: 0.3em 0;
+		padding-left: 1.5em;
+	}
+
+	.message-content :global(li) {
+		margin: 0.15em 0;
+	}
+
+	.message-content :global(strong) {
+		color: var(--text-primary);
+	}
+
+	.message-content :global(a) {
+		color: var(--accent);
+		text-decoration: none;
+	}
+
+	.message-content :global(a:hover) {
+		text-decoration: underline;
+	}
+
+	.message-content :global(blockquote) {
+		border-left: 3px solid var(--bg-tertiary);
+		padding-left: var(--spacing-sm);
+		margin: 0.3em 0;
+		color: var(--text-secondary);
+	}
+
+	.message-content :global(h1), .message-content :global(h2), .message-content :global(h3) {
+		margin: 0.5em 0 0.2em;
+		font-size: 0.9rem;
+	}
+
+	.message-content :global(table) {
+		border-collapse: collapse;
+		margin: 0.3em 0;
+		font-size: 0.75rem;
+		width: 100%;
+	}
+
+	.message-content :global(th), .message-content :global(td) {
+		border: 1px solid var(--bg-tertiary);
+		padding: 0.3em 0.5em;
+	}
+
+	.message-content :global(th) {
+		background: var(--bg-secondary);
+		font-weight: 600;
 	}
 
 	/* Typing-Animation */
@@ -208,7 +349,7 @@
 	.chat-input {
 		display: flex;
 		gap: var(--spacing-sm);
-		padding: var(--spacing-md);
+		padding: var(--spacing-sm) var(--spacing-md);
 		background: var(--bg-secondary);
 		border-top: 1px solid var(--bg-tertiary);
 	}
@@ -216,25 +357,34 @@
 	.chat-input textarea {
 		flex: 1;
 		resize: none;
-		font-size: 0.875rem;
+		font-size: 0.85rem;
+		line-height: 1.4;
 	}
 
 	.send-button {
-		padding: var(--spacing-sm) var(--spacing-md);
+		width: 48px;
+		height: 48px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		background: var(--accent);
 		color: white;
+		font-size: 1.2rem;
 		font-weight: 600;
 		border-radius: var(--radius-md);
 		transition: all 0.2s ease;
+		align-self: flex-end;
 	}
 
 	.send-button:hover:not(:disabled) {
 		background: var(--accent-hover);
+		transform: scale(1.05);
 	}
 
 	.send-button:disabled {
 		background: var(--bg-tertiary);
 		color: var(--text-secondary);
 		cursor: not-allowed;
+		transform: none;
 	}
 </style>

src/lib/components/GuardRailsPanel.svelte

@@ -0,0 +1,367 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { invoke } from '@tauri-apps/api/core';
+
+	interface Permission {
+		id: string;
+		pattern: string;
+		tool: string | null;
+		path_pattern: string | null;
+		permission_type: string;
+		action: string;
+		created_at: string;
+		use_count: number;
+		last_used: string | null;
+	}
+
+	let permissions: Permission[] = [];
+	let blockedPatterns: string[] = [];
+	let loading = true;
+	let showAddForm = false;
+
+	// Formular-State
+	let newPattern = '';
+	let newTool = '';
+	let newAction: 'allow' | 'deny' = 'allow';
+	let newType: 'session' | 'permanent' = 'permanent';
+
+	async function loadData() {
+		try {
+			permissions = await invoke('get_permissions');
+			blockedPatterns = await invoke('get_blocked_patterns');
+		} catch (err) {
+			console.error('Fehler beim Laden:', err);
+		}
+		loading = false;
+	}
+
+	onMount(() => {
+		loadData();
+	});
+
+	async function addPermission() {
+		if (!newPattern.trim()) return;
+		try {
+			await invoke('add_permission', {
+				pattern: newPattern,
+				tool: newTool || null,
+				pathPattern: null,
+				permissionType: newType,
+				action: newAction,
+			});
+			newPattern = '';
+			newTool = '';
+			showAddForm = false;
+			await loadData();
+		} catch (err) {
+			console.error('Fehler:', err);
+		}
+	}
+
+	async function removePermission(id: string) {
+		try {
+			await invoke('remove_permission', { id });
+			await loadData();
+		} catch (err) {
+			console.error('Fehler:', err);
+		}
+	}
+
+	async function checkAction() {
+		if (!newPattern.trim()) return;
+		try {
+			const result = await invoke('check_action', {
+				tool: newTool || 'Bash',
+				command: newPattern,
+				path: null,
+			});
+			console.log('Check-Ergebnis:', result);
+		} catch (err) {
+			console.error('Fehler:', err);
+		}
+	}
+</script>
+
+<div class="guard-panel">
+	<div class="panel-header">
+		<h2>🛡️ Guard-Rails</h2>
+		<button class="btn-add" on:click={() => showAddForm = !showAddForm}>
+			{showAddForm ? '✕' : '+ Regel'}
+		</button>
+	</div>
+
+	<!-- Neue Regel hinzufügen -->
+	{#if showAddForm}
+		<div class="add-form">
+			<div class="form-row">
+				<input
+					type="text"
+					bind:value={newPattern}
+					placeholder="Pattern (z.B. npm install *)"
+				/>
+			</div>
+			<div class="form-row">
+				<input
+					type="text"
+					bind:value={newTool}
+					placeholder="Tool (optional, z.B. Bash)"
+				/>
+				<select bind:value={newAction}>
+					<option value="allow">Erlauben</option>
+					<option value="deny">Verweigern</option>
+				</select>
+				<select bind:value={newType}>
+					<option value="permanent">Dauerhaft</option>
+					<option value="session">Session</option>
+				</select>
+			</div>
+			<div class="form-actions">
+				<button class="btn-save" on:click={addPermission}>Speichern</button>
+				<button class="btn-test" on:click={checkAction}>Testen</button>
+			</div>
+		</div>
+	{/if}
+
+	{#if loading}
+		<div class="loading-state">Lade...</div>
+	{:else}
+		<!-- Aktive Regeln -->
+		<div class="section">
+			<h3>Aktive Regeln ({permissions.length})</h3>
+			{#if permissions.length === 0}
+				<div class="empty-hint">Keine Regeln definiert</div>
+			{:else}
+				<div class="rules-list">
+					{#each permissions as perm}
+						<div class="rule-item" class:deny={perm.action === 'Deny'}>
+							<div class="rule-main">
+								<span class="rule-action" class:allow={perm.action === 'Allow'} class:deny={perm.action === 'Deny'}>
+									{perm.action === 'Allow' ? '✅' : '🚫'}
+								</span>
+								<code class="rule-pattern">{perm.pattern}</code>
+								{#if perm.tool}
+									<span class="rule-tool">{perm.tool}</span>
+								{/if}
+							</div>
+							<div class="rule-meta">
+								<span class="rule-type">
+									{perm.permission_type === 'Permanent' ? '💾' : '⏱️'}
+								</span>
+								<span class="rule-count">{perm.use_count}x</span>
+								<button class="btn-delete" on:click={() => removePermission(perm.id)}>🗑️</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Blockierte Patterns -->
+		<div class="section">
+			<h3>🚫 Immer blockiert ({blockedPatterns.length})</h3>
+			<div class="blocked-list">
+				{#each blockedPatterns as pattern}
+					<div class="blocked-item">
+						<code>{pattern}</code>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.guard-panel {
+		padding: var(--spacing-md);
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+	}
+
+	.panel-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: var(--spacing-md);
+	}
+
+	.panel-header h2 {
+		font-size: 1rem;
+		font-weight: 600;
+	}
+
+	.btn-add {
+		padding: var(--spacing-xs) var(--spacing-sm);
+		background: var(--accent);
+		color: white;
+		border-radius: var(--radius-sm);
+		font-size: 0.75rem;
+		font-weight: 600;
+	}
+
+	.btn-add:hover {
+		background: var(--accent-hover);
+	}
+
+	/* Formular */
+	.add-form {
+		padding: var(--spacing-md);
+		background: var(--bg-secondary);
+		border-radius: var(--radius-md);
+		margin-bottom: var(--spacing-md);
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+	}
+
+	.form-row {
+		display: flex;
+		gap: var(--spacing-sm);
+	}
+
+	.form-row input {
+		flex: 1;
+		font-size: 0.8rem;
+	}
+
+	.form-row select {
+		padding: var(--spacing-xs) var(--spacing-sm);
+		background: var(--bg-tertiary);
+		color: var(--text-primary);
+		border: none;
+		border-radius: var(--radius-sm);
+		font-size: 0.75rem;
+	}
+
+	.form-actions {
+		display: flex;
+		gap: var(--spacing-sm);
+	}
+
+	.form-actions button {
+		flex: 1;
+		padding: var(--spacing-sm);
+		border-radius: var(--radius-sm);
+		font-size: 0.75rem;
+		font-weight: 600;
+	}
+
+	.btn-save {
+		background: var(--success);
+		color: var(--bg-primary);
+	}
+
+	.btn-test {
+		background: var(--bg-tertiary);
+		color: var(--text-primary);
+	}
+
+	/* Sektionen */
+	.section {
+		margin-bottom: var(--spacing-md);
+	}
+
+	.section h3 {
+		font-size: 0.8rem;
+		color: var(--text-secondary);
+		margin-bottom: var(--spacing-sm);
+	}
+
+	.loading-state {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--text-secondary);
+	}
+
+	.empty-hint {
+		font-size: 0.75rem;
+		color: var(--text-secondary);
+		text-align: center;
+		padding: var(--spacing-md);
+	}
+
+	/* Regeln */
+	.rules-list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xs);
+	}
+
+	.rule-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--spacing-sm);
+		background: var(--bg-secondary);
+		border-radius: var(--radius-sm);
+		border-left: 3px solid var(--success);
+	}
+
+	.rule-item.deny {
+		border-left-color: var(--error);
+	}
+
+	.rule-main {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+		flex: 1;
+		min-width: 0;
+	}
+
+	.rule-pattern {
+		font-size: 0.75rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.rule-tool {
+		font-size: 0.625rem;
+		padding: 1px 4px;
+		background: var(--bg-tertiary);
+		border-radius: var(--radius-sm);
+		color: var(--text-secondary);
+	}
+
+	.rule-meta {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-xs);
+		font-size: 0.625rem;
+		color: var(--text-secondary);
+	}
+
+	.btn-delete {
+		font-size: 0.75rem;
+		padding: 2px;
+		opacity: 0.5;
+		transition: opacity 0.2s;
+	}
+
+	.btn-delete:hover {
+		opacity: 1;
+	}
+
+	/* Blockiert */
+	.blocked-list {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.blocked-item {
+		padding: var(--spacing-xs) var(--spacing-sm);
+		background: rgba(239, 68, 68, 0.1);
+		border-radius: var(--radius-sm);
+		font-size: 0.7rem;
+	}
+
+	.blocked-item code {
+		color: var(--error);
+		font-size: 0.7rem;
+	}
+</style>

src/routes/+page.svelte

@@ -2,6 +2,26 @@
 	import ChatPanel from '$lib/components/ChatPanel.svelte';
 	import ActivityPanel from '$lib/components/ActivityPanel.svelte';
 	import AgentView from '$lib/components/AgentView.svelte';
+	import MemoryPanel from '$lib/components/MemoryPanel.svelte';
+	import AuditLog from '$lib/components/AuditLog.svelte';
+	import GuardRailsPanel from '$lib/components/GuardRailsPanel.svelte';
+
+	// Tab-State für mittleres Panel
+	let activeMiddleTab = 'activity';
+
+	// Tab-State für rechtes Panel
+	let activeRightTab = 'agents';
+
+	const middleTabs = [
+		{ id: 'activity', label: 'Aktivität', icon: '📋' },
+		{ id: 'memory', label: 'Gedächtnis', icon: '🧠' },
+		{ id: 'audit', label: 'Historie', icon: '📝' },
+	];
+
+	const rightTabs = [
+		{ id: 'agents', label: 'Agents', icon: '🤖' },
+		{ id: 'guards', label: 'Guard-Rails', icon: '🛡️' },
+	];
 </script>
 
 <div class="panels">
@@ -10,20 +30,50 @@
 		<ChatPanel />
 	</section>
 
-	<!-- Mittleres Panel: Aktivität + Agents -->
+	<!-- Mittleres Panel: Aktivität / Memory / Audit -->
 	<section class="panel panel-activity">
 		<div class="panel-tabs">
-			<button class="tab active">📋 Aktivität</button>
+			{#each middleTabs as tab}
-			<button class="tab">🤖 Agents</button>
+				<button
+					class="tab"
+					class:active={activeMiddleTab === tab.id}
+					on:click={() => activeMiddleTab = tab.id}
+				>
+					{tab.icon} {tab.label}
+				</button>
+			{/each}
 		</div>
 		<div class="panel-content">
-			<ActivityPanel />
+			{#if activeMiddleTab === 'activity'}
+				<ActivityPanel />
+			{:else if activeMiddleTab === 'memory'}
+				<MemoryPanel />
+			{:else if activeMiddleTab === 'audit'}
+				<AuditLog />
+			{/if}
 		</div>
 	</section>
 
-	<!-- Rechtes Panel: Agent-Details / Präsentation -->
+	<!-- Rechtes Panel: Agents / Guard-Rails -->
 	<section class="panel panel-details">
-		<AgentView />
+		<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>
 
@@ -52,12 +102,14 @@
 	.tab {
 		flex: 1;
 		padding: var(--spacing-sm) var(--spacing-md);
-		font-size: 0.875rem;
+		font-size: 0.8rem;
 		color: var(--text-secondary);
 		background: transparent;
 		border: none;
+		border-bottom: 2px solid transparent;
 		cursor: pointer;
 		transition: all 0.2s ease;
+		white-space: nowrap;
 	}
 
 	.tab:hover {
@@ -67,7 +119,7 @@
 
 	.tab.active {
 		color: var(--accent);
-		border-bottom: 2px solid var(--accent);
+		border-bottom-color: var(--accent);
 	}
 
 	.panel-content {
@@ -75,7 +127,7 @@
 		overflow: auto;
 	}
 
-	/* Responsive: Auf kleineren Bildschirmen stapeln */
+	/* Responsive */
 	@media (max-width: 1200px) {
 		.panels {
 			grid-template-columns: 1fr 1fr;