feat: Mission Control Dashboard – AI Team Network, Chat, Queue
- 3-Spalten-Layout: Missions/Feed | Team Network | Chat/Queue - AI Team Network (Herzstück): Iris + 4 Agenten mit SVG-Linien - AgentNode: Workload-Ring, Pulse-Animation, Farbcodierung - AgentModal: Task, Goal, Progress, Working Feed - MissionCard: Glass-Morphism, Progress-Bar, Status-Badges - ChatPanel: Iris Chat mit Focus-Banner, Auto-Scroll - QueuePanel: Drag&Drop, Prioritäten, Force-Execute - Composables: useTimer, useDashboardData
This commit is contained in:
@@ -1,116 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import IrisPanel from '../components/dashboard/IrisPanel.vue'
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import MissionCard from '../components/dashboard/MissionCard.vue'
|
||||
import OperationsFeed from '../components/dashboard/OperationsFeed.vue'
|
||||
import AgendaPanel from '../components/dashboard/AgendaPanel.vue'
|
||||
import ActiveInitiatives from '../components/dashboard/ActiveInitiatives.vue'
|
||||
import RecentlyFinished from '../components/dashboard/RecentlyFinished.vue'
|
||||
import TeamNetwork from '../components/dashboard/TeamNetwork.vue'
|
||||
import ChatPanel from '../components/dashboard/ChatPanel.vue'
|
||||
import QueuePanel from '../components/dashboard/QueuePanel.vue'
|
||||
import { useDashboardData } from '../composables/useDashboardData'
|
||||
|
||||
const {
|
||||
agents, missions, feedEntries, chatMessages,
|
||||
irisBusy, irisFocus, irisRuntime, queue,
|
||||
getAgentRuntime, startRuntime, stopRuntime,
|
||||
sendChat, removeQueueItem, moveQueueItem, changeQueuePriority,
|
||||
} = useDashboardData()
|
||||
|
||||
onMounted(startRuntime)
|
||||
onUnmounted(stopRuntime)
|
||||
|
||||
function onChatSend(text: string): void { sendChat(text) }
|
||||
|
||||
function onQueueMoveUp(id: string): void {
|
||||
const idx = queue.value.findIndex(q => q.id === id)
|
||||
if (idx > 0) moveQueueItem(idx, idx - 1)
|
||||
}
|
||||
|
||||
function onQueueMoveDown(id: string): void {
|
||||
const idx = queue.value.findIndex(q => q.id === id)
|
||||
if (idx < queue.value.length - 1) moveQueueItem(idx, idx + 1)
|
||||
}
|
||||
|
||||
function onQueueExecuteNow(id: string): void {
|
||||
const item = queue.value.find(q => q.id === id)
|
||||
if (item) console.log('[Dashboard] Execute now:', item.text)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<!-- Top Bar -->
|
||||
<div class="topbar">
|
||||
<span class="eyebrow">MISSION CONTROL</span>
|
||||
<h1>Übersicht</h1>
|
||||
<div class="col-left">
|
||||
<section class="missions-section">
|
||||
<h2 class="column-title">Active Missions</h2>
|
||||
<MissionCard v-for="m in missions" :key="m.id" :mission="m" />
|
||||
</section>
|
||||
<OperationsFeed :entries="feedEntries" />
|
||||
</div>
|
||||
|
||||
<!-- Three-column row -->
|
||||
<div class="columns">
|
||||
<IrisPanel />
|
||||
<OperationsFeed />
|
||||
<AgendaPanel />
|
||||
<div class="col-center">
|
||||
<TeamNetwork
|
||||
:agents="agents"
|
||||
:iris-runtime="irisRuntime"
|
||||
:get-agent-runtime="getAgentRuntime"
|
||||
:iris-focus="irisFocus"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
<ChatPanel :messages="chatMessages" :iris-busy="irisBusy" :iris-focus="irisFocus" @send="onChatSend" />
|
||||
<QueuePanel :items="queue" @remove="removeQueueItem" @move-up="onQueueMoveUp" @move-down="onQueueMoveDown" @change-priority="changeQueuePriority" @execute-now="onQueueExecuteNow" />
|
||||
</div>
|
||||
|
||||
<!-- Bottom sections -->
|
||||
<ActiveInitiatives />
|
||||
<RecentlyFinished />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
--panel-bg: rgba(22, 27, 34, 0.8);
|
||||
--panel-border: rgba(139, 124, 246, 0.12);
|
||||
--text-primary: #e8eaf0;
|
||||
--text-secondary: #7e8799;
|
||||
--text-muted: #6b7385;
|
||||
--iris-accent: #a78bfa;
|
||||
--blue: #3b82f6;
|
||||
--green: #22c55e;
|
||||
--yellow: #eab308;
|
||||
--red: #ef4444;
|
||||
--gray: #6b7280;
|
||||
--bg-base: #0d1117;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
color: var(--text-primary);
|
||||
|
||||
animation: dashboard-fade-in 0.4s ease-out;
|
||||
display: grid; grid-template-columns: 280px 1fr 320px; gap: 14px;
|
||||
height: 100%; min-height: 0;
|
||||
animation: fade-in 0.35s ease-out;
|
||||
}
|
||||
|
||||
@keyframes dashboard-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
.dashboard ::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
.dashboard ::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.dashboard ::-webkit-scrollbar-thumb {
|
||||
background: rgba(139, 124, 246, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.dashboard ::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(139, 124, 246, 0.35);
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--iris-accent);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 260px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.columns {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.dashboard ::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
.dashboard ::-webkit-scrollbar-track { background: transparent; }
|
||||
.dashboard ::-webkit-scrollbar-thumb { background: rgba(139,124,246,0.2); border-radius: 3px; }
|
||||
.dashboard ::-webkit-scrollbar-thumb:hover { background: rgba(139,124,246,0.35); }
|
||||
.col-left { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-right: 4px; }
|
||||
.col-center { overflow-y: auto; padding: 0 4px; min-height: 0; }
|
||||
.col-right { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px; }
|
||||
.missions-section { display: flex; flex-direction: column; gap: 8px; }
|
||||
.column-title { margin: 0; font-size: 13px; font-weight: 600; color: #e8eaf0; letter-spacing: 0.01em; }
|
||||
@media (max-width: 1100px) {
|
||||
.dashboard { grid-template-columns: 1fr; }
|
||||
.col-left, .col-center, .col-right { overflow: visible; padding: 0; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user