2822796c7a
- Tauri 2.0 + SvelteKit Projekt aufgesetzt - Basis-UI mit 3 Panels (Chat, Aktivität, Präsentation) - Roter STOPP-Button Footer - Autonomes Gedächtnis-System (memory.rs) - Änderungs-Log / Audit Trail (audit.rs) - Multi-Agent-View Komponenten - NixOS Entwicklungsumgebung (shell.nix) Phase 1 abgeschlossen, Claude SDK Integration folgt. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
96 lines
1.8 KiB
Svelte
96 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import ChatPanel from '$lib/components/ChatPanel.svelte';
|
|
import ActivityPanel from '$lib/components/ActivityPanel.svelte';
|
|
import AgentView from '$lib/components/AgentView.svelte';
|
|
</script>
|
|
|
|
<div class="panels">
|
|
<!-- Linkes Panel: Chat -->
|
|
<section class="panel panel-chat">
|
|
<ChatPanel />
|
|
</section>
|
|
|
|
<!-- Mittleres Panel: Aktivität + Agents -->
|
|
<section class="panel panel-activity">
|
|
<div class="panel-tabs">
|
|
<button class="tab active">📋 Aktivität</button>
|
|
<button class="tab">🤖 Agents</button>
|
|
</div>
|
|
<div class="panel-content">
|
|
<ActivityPanel />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Rechtes Panel: Agent-Details / Präsentation -->
|
|
<section class="panel panel-details">
|
|
<AgentView />
|
|
</section>
|
|
</div>
|
|
|
|
<style>
|
|
.panels {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 1px;
|
|
height: 100%;
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-tabs {
|
|
display: flex;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--bg-tertiary);
|
|
}
|
|
|
|
.tab {
|
|
flex: 1;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tab:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.tab.active {
|
|
color: var(--accent);
|
|
border-bottom: 2px solid var(--accent);
|
|
}
|
|
|
|
.panel-content {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* Responsive: Auf kleineren Bildschirmen stapeln */
|
|
@media (max-width: 1200px) {
|
|
.panels {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.panel-details {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.panels {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.panel-activity {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|