From 49b9778872c6ea58cf44497cf91db3d29237cde4 Mon Sep 17 00:00:00 2001 From: Developer Date: Wed, 10 Jun 2026 00:38:50 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Dashboard=20Frontend=20=E2=80=93=20Echt?= =?UTF-8?q?e=20API-Integration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useDashboardData: Mock-Daten durch API-Calls ersetzt - fetchStatus/Agents/Operations/ChatMessages/Queue via /api/dashboard/* - sendChatMessage via POST /api/dashboard/chat/send - Polling: Status 5s, Chat 3s, Agents/Queue 10s - Agent Catalog mit static Fields + API-Daten - ChatPanel direkt mit sendChatMessage verdrahtet - Build: 0 errors, vue-tsc + vite ✅ --- .../src/components/dashboard/ChatPanel.vue | 7 +- frontend/src/composables/useDashboardData.ts | 620 +++++++++++------- frontend/src/views/DashboardView.vue | 6 +- 3 files changed, 393 insertions(+), 240 deletions(-) diff --git a/frontend/src/components/dashboard/ChatPanel.vue b/frontend/src/components/dashboard/ChatPanel.vue index 72ebde1..a34a16b 100644 --- a/frontend/src/components/dashboard/ChatPanel.vue +++ b/frontend/src/components/dashboard/ChatPanel.vue @@ -2,6 +2,7 @@ import { ref, nextTick, watch } from 'vue' import { Bot, Send, LoaderCircle, Maximize2, X } from '@lucide/vue' import type { ChatMessage } from '../../composables/useDashboardData' +import { useDashboardData } from '../../composables/useDashboardData' const props = defineProps<{ messages: ChatMessage[] @@ -9,9 +10,7 @@ const props = defineProps<{ irisFocus: string }>() -const emit = defineEmits<{ - send: [text: string] -}>() +const { sendChatMessage } = useDashboardData() const inputText = ref('') const chatListRef = ref(null) @@ -20,7 +19,7 @@ const chatModalOpen = ref(false) function sendMessage(): void { if (!inputText.value.trim()) return - emit('send', inputText.value) + sendChatMessage(inputText.value) inputText.value = '' } diff --git a/frontend/src/composables/useDashboardData.ts b/frontend/src/composables/useDashboardData.ts index 0a162d3..bdf7cbc 100644 --- a/frontend/src/composables/useDashboardData.ts +++ b/frontend/src/composables/useDashboardData.ts @@ -1,4 +1,13 @@ -import { ref, reactive, computed } from 'vue' +import { ref, computed } from 'vue' + +// ── Shared State (singleton: same state regardless of how many times useDashboardData() is called) ── +const sessionStart = Date.now() + +// Intervals registry for cleanup +const intervals: ReturnType[] = [] +let cleanupRegistered = false + +// ── Interfaces (exported for components) ── export interface AgentNodeData { id: string @@ -49,260 +58,392 @@ export interface QueueItem { waitTime: string } -const now = Date.now() +// ── API Response Interfaces ── -export function useDashboardData() { - const sessionStart = Date.now() +interface DashboardStatusResponse { + gatewayOk: boolean + irisStatus: string + activeAgents: number + pendingTasks: number +} - // Runtime counter - const runtimeSeconds = ref(0) - let runtimeInterval: ReturnType | null = null +interface DashboardAgentInfo { + id: string + name: string + role: string + model: string + isActive: boolean + currentTask: string +} - function startRuntime() { - const startTs = sessionStart - runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000) - runtimeInterval = setInterval(() => { - runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000) - }, 1000) +interface DashboardOperationEntry { + agent: string + action: string + timestamp: string + time: string +} + +interface DashboardChatMessage { + role: 'user' | 'assistant' + content: string + timestamp: string +} + +interface DashboardSendResponse { + ok: boolean + reply?: string + error?: string +} + +interface DashboardQueueItem { + id: string + name: string + status: string +} + +// ── Agent Catalog (static enrichment) ── + +const AGENT_CATALOG: Record> = { + iris: { + description: 'Koordiniert, delegiert, hält das Team tight. Die erste Anlaufstelle zwischen Boss und Maschine.', + tags: ['Orchestration', 'Delegation', 'Approval'], + color: '#8b7cf6', + icon: 'bot', + hero: true, + goal: 'Complete Mission Control v3', + progress: 85, + workload: 55, + workingFeed: [], + thinkingStream: [], + }, + developer: { + description: 'Implements features across the stack with TypeScript, C#, and Vue.', + tags: ['Coding', 'Development', 'Builds'], + color: '#3b82f6', + icon: 'code', + goal: 'Complete Dungeon CRUD + room generation', + progress: 62, + workload: 65, + workingFeed: [], + thinkingStream: [], + }, + devops: { + description: 'Manages Docker, deployment pipelines, and system reliability.', + tags: ['Deployment', 'Docker', 'CI/CD'], + color: '#eab308', + icon: 'server', + goal: 'Reduce build times by 40%', + progress: 45, + workload: 40, + workingFeed: [], + thinkingStream: [], + }, + researcher: { + description: 'Researches APIs, patterns, and best practices. Maintains docs.', + tags: ['Research', 'Analysis', 'Docs'], + color: '#22c55e', + icon: 'search', + goal: 'Recommend real-time communication strategy', + progress: 30, + workload: 25, + workingFeed: [], + thinkingStream: [], + }, + reviewer: { + description: 'Reviews pull requests, enforces standards, runs test suites.', + tags: ['Code Review', 'Testing', 'Quality'], + color: '#a855f7', + icon: 'shield', + goal: 'Zero critical findings before merge', + progress: 80, + workload: 50, + workingFeed: [], + thinkingStream: [], + }, +} + +function enrichAgent(api: DashboardAgentInfo): AgentNodeData { + const catalog = AGENT_CATALOG[api.id] ?? AGENT_CATALOG['developer'] + return { + id: api.id, + name: api.name, + role: api.role, + model: api.model, + currentTask: api.currentTask ?? 'Idle', + active: api.isActive, + description: catalog.description ?? '', + tags: catalog.tags ?? [], + color: catalog.color ?? '#6b7385', + icon: catalog.icon ?? 'bot', + hero: catalog.hero ?? false, + goal: catalog.goal ?? 'No goal set', + progress: catalog.progress ?? 0, + workload: catalog.workload ?? 0, + runtimeSeconds: 0, + workingFeed: catalog.workingFeed ?? [], + thinkingStream: catalog.thinkingStream ?? [], } +} - function stopRuntime() { - if (runtimeInterval) { - clearInterval(runtimeInterval) - runtimeInterval = null - } +// ── Helper: API Fetch with auth ── + +async function apiFetch(path: string, init: RequestInit = {}): Promise { + const base = '' // same-origin proxy + return fetch(`${base}${path}`, { + ...init, + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + ...(init.headers as Record ?? {}), + }, + }) +} + +// ── State ── + +// Status +const gatewayOk = ref(true) +const irisStatus = ref('Active') +const activeAgents = ref(0) +const pendingTasks = ref(0) + +// Agents +const agents = ref([]) + +// Chat +const chatMessages = ref([]) +const irisBusy = ref(false) +const irisFocus = ref('') + +// Operations Feed +const feedEntries = ref([]) + +// Open Tasks (mock only – no API endpoint) +const openTasks = ref([ + { id: 't1', title: 'Agent Thinking Panel visualisieren', detail: 'Live-Animation der Denkprozesse im AgentModal', source: 'iris', createdAt: '22:30' }, + { id: 't2', title: 'CI/CD Pipeline Monitoring Dashboard', detail: 'Echtzeit-Status der Gitea Actions im Dashboard', source: 'iris', createdAt: '21:15' }, + { id: 't3', title: 'Dungeon System Dokumentation', detail: 'API-Doku für Room-Generation-Endpunkte schreiben', source: 'bao', createdAt: '20:00' }, +]) + +// Queue +const queue = ref([]) + +// Runtime +const runtimeSeconds = ref(0) +let runtimeInterval: ReturnType | null = null + +// ── Fetch Functions ── + +async function fetchStatus(): Promise { + try { + const res = await apiFetch('/api/dashboard/status') + if (!res.ok) return + const data: DashboardStatusResponse = await res.json() + gatewayOk.value = data.gatewayOk + irisStatus.value = data.irisStatus + activeAgents.value = data.activeAgents + pendingTasks.value = data.pendingTasks + } catch { + // API unreachable – keep current values } +} - const formatRuntime = (seconds: number): string => { - const m = Math.floor(seconds / 60) - const s = seconds % 60 - return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` +async function fetchAgents(): Promise { + try { + const res = await apiFetch('/api/dashboard/agents') + if (!res.ok) return + const data: DashboardAgentInfo[] = await res.json() + agents.value = data.map(enrichAgent) + } catch { + // API unreachable – keep current values } +} - const irisRuntime = computed(() => formatRuntime(runtimeSeconds.value)) +async function fetchOperations(): Promise { + try { + const res = await apiFetch('/api/dashboard/operations?limit=20') + if (!res.ok) return + const data: DashboardOperationEntry[] = await res.json() + feedEntries.value = data.map((entry) => ({ + time: entry.time, + agent: entry.agent, + action: entry.action, + timestamp: entry.timestamp, + })) + } catch { + // API unreachable – keep current values + } +} - // Agent runtimes (simulated) - const agentStartTimes = reactive>({ - iris: now - 28800000, - developer: now - 3600000, - devops: now - 1800000, - researcher: now - 2700000, - reviewer: now - 900000, +async function fetchChatMessages(): Promise { + try { + const res = await apiFetch('/api/dashboard/chat/messages?limit=50') + if (!res.ok) return + const data: DashboardChatMessage[] = await res.json() + chatMessages.value = data.map((msg, idx) => ({ + id: `msg-${idx}`, + sender: msg.role === 'assistant' ? 'iris' : 'user', + text: msg.content, + timestamp: new Date(msg.timestamp).getTime(), + })) + } catch { + // API unreachable – keep current values + } +} + +async function fetchQueue(): Promise { + try { + const res = await apiFetch('/api/dashboard/queue') + if (!res.ok) return + const data: DashboardQueueItem[] = await res.json() + queue.value = data.map((item) => ({ + id: item.id, + text: item.name, + priority: (item.status === 'high' || item.status === 'medium' || item.status === 'low') + ? item.status as 'high' | 'medium' | 'low' + : 'medium', + waitTime: '--', + })) + } catch { + // API unreachable – keep current values + } +} + +// ── Chat Send ── + +async function sendChatMessage(text: string): Promise { + if (!text.trim()) return + + // Optimistic add + chatMessages.value.push({ + id: `user-${Date.now()}`, + sender: 'user', + text: text.trim(), + timestamp: Date.now(), }) - const getAgentRuntime = (id: string): string => { - const start = agentStartTimes[id] - if (!start) return '00:00' - const secs = Math.floor((now - start) / 1000) - const m = Math.floor(secs / 60) - const s = secs % 60 - return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` - } + irisBusy.value = true - // Agents - const agents = ref([ - { - id: 'iris', - name: 'Iris', - role: 'Chief of Staff', - description: 'Koordiniert, delegiert, hält das Team tight. Die erste Anlaufstelle zwischen Boss und Maschine.', - tags: ['Orchestration', 'Delegation', 'Approval'], - color: '#8b7cf6', - icon: 'bot', - hero: true, - currentTask: 'Orchestrating Nexus Dashboard redesign', - goal: 'Complete Mission Control v3', - progress: 85, - workload: 55, - active: true, - runtimeSeconds: 28800, - model: 'GPT-5.4', - workingFeed: [ - { time: '22:38', text: 'Analyzed user feedback on Dashboard' }, - { time: '22:36', text: 'Delegated card redesign to Developer' }, - { time: '22:34', text: 'Verifying full-width layout deployment' }, - { time: '22:32', text: 'Reviewing AgentModal integration' }, - ], - thinkingStream: [ - { time: '22:24', text: 'Analysing constraint: full-width layout' }, - { time: '22:25', text: 'Removing max-width from global CSS' }, - { time: '22:26', text: 'Verifying Dashboard grid reflow' }, - ], - }, - { - id: 'developer', - name: 'Developer', - role: 'Backend & Frontend', - description: 'Implements features across the stack with TypeScript, C#, and Vue.', - tags: ['Coding', 'Development', 'Builds'], - color: '#3b82f6', - icon: 'code', - currentTask: 'Building Dungeon System API endpoints', - goal: 'Complete Dungeon CRUD + room generation', - progress: 62, - workload: 65, - active: true, - runtimeSeconds: 3600, - workingFeed: [ - { time: '22:30', text: 'Created DungeonController' }, - { time: '22:28', text: 'Defined dungeon schema' }, - { time: '22:26', text: 'Implementing room generation algorithm' }, - { time: '22:24', text: 'Writing unit tests for RoomFactory' }, - ], - thinkingStream: [ - { time: '22:22', text: 'Parsing dungeon spec from Iris' }, - { time: '22:23', text: 'Designing RoomFactory interface' }, - { time: '22:24', text: 'Implementing corridor connection logic' }, - ], - model: 'DeepSeek V4 Flash', - }, - { - id: 'devops', - name: 'DevOps', - role: 'Infrastructure & CI/CD', - description: 'Manages Docker, deployment pipelines, and system reliability.', - tags: ['Deployment', 'Docker', 'CI/CD'], - color: '#eab308', - icon: 'server', - currentTask: 'Optimizing Docker Compose caching', - goal: 'Reduce build times by 40%', - progress: 45, - workload: 40, - active: false, - runtimeSeconds: 1800, - workingFeed: [ - { time: '22:20', text: 'Analyzed Docker layer cache' }, - { time: '22:18', text: 'Optimized COPY order in Dockerfile' }, - { time: '22:16', text: 'Added .dockerignore for node_modules' }, - { time: '22:14', text: 'Testing incremental builds' }, - ], - thinkingStream: [ - { time: '22:20', text: 'Checking build cache hit rates' }, - { time: '22:21', text: 'Benchmarking multi-stage vs single-stage' }, - { time: '22:22', text: 'Calculating potential speedup from caching' }, - ], - model: 'DeepSeek V4 Pro', - }, - { - id: 'researcher', - name: 'Researcher', - role: 'Analysis & Documentation', - description: 'Researches APIs, patterns, and best practices. Maintains docs.', - tags: ['Research', 'Analysis', 'Docs'], - color: '#22c55e', - icon: 'search', - currentTask: 'Analyzing WebSocket alternatives', - goal: 'Recommend real-time communication strategy', - progress: 30, - workload: 25, - active: true, - runtimeSeconds: 2700, - workingFeed: [ - { time: '22:18', text: 'Evaluated WebSocket vs SSE vs WebRTC' }, - { time: '22:17', text: 'Documented SignalR limitations' }, - { time: '22:16', text: 'Prototyping WebSocket fallback' }, - ], - thinkingStream: [ - { time: '22:18', text: 'Cross-referencing WebSocket latency benchmarks' }, - { time: '22:19', text: 'Checking SSE browser support matrix' }, - { time: '22:20', text: 'Drafting recommendation summary' }, - ], - model: 'DeepSeek V4 Pro', - }, - { - id: 'reviewer', - name: 'Reviewer', - role: 'Code Quality & Testing', - description: 'Reviews pull requests, enforces standards, runs test suites.', - tags: ['Code Review', 'Testing', 'Quality'], - color: '#a855f7', - icon: 'shield', - currentTask: 'Reviewing Dungeon System PR', - goal: 'Zero critical findings before merge', - progress: 80, - workload: 50, - active: false, - runtimeSeconds: 900, - workingFeed: [ - { time: '22:15', text: 'Reviewed DungeonController.cs' }, - { time: '22:14', text: 'Found 3 minor style issues' }, - { time: '22:13', text: 'Approved RoomValidator' }, - { time: '22:12', text: 'Running integration tests' }, - ], - thinkingStream: [ - { time: '22:15', text: 'Analyzing DungeonController PR diff' }, - { time: '22:16', text: 'Checking RoomValidator edge cases' }, - { time: '22:17', text: 'Verifying integration test coverage' }, - ], - model: 'DeepSeek V4 Pro', - }, - ]) + try { + const res = await apiFetch('/api/dashboard/chat/send', { + method: 'POST', + body: JSON.stringify({ message: text.trim() }), + }) + const data: DashboardSendResponse = await res.json() - // Open Tasks - const openTasks = ref([ - { id: 't1', title: 'Agent Thinking Panel visualisieren', detail: 'Live-Animation der Denkprozesse im AgentModal', source: 'iris', createdAt: '22:30' }, - { id: 't2', title: 'CI/CD Pipeline Monitoring Dashboard', detail: 'Echtzeit-Status der Gitea Actions im Dashboard', source: 'iris', createdAt: '21:15' }, - { id: 't3', title: 'Dungeon System Dokumentation', detail: 'API-Doku für Room-Generation-Endpunkte schreiben', source: 'bao', createdAt: '20:00' }, - ]) - - // Feed - const ts = (offset: number) => new Date(now + offset).toISOString() - const feedEntries = ref([ - { time: '22:50', agent: 'Developer', action: 'Created DungeonController endpoints', timestamp: ts(-120000) }, - { time: '22:46', agent: 'DevOps', action: 'Optimized Docker COPY order for layer caching', timestamp: ts(-360000) }, - { time: '22:42', agent: 'Iris', action: 'Delegated room generation to Developer with spec', timestamp: ts(-600000) }, - { time: '22:35', agent: 'Researcher', action: 'Documented WebSocket vs SSE analysis results', timestamp: ts(-960000) }, - { time: '22:28', agent: 'Reviewer', action: 'Approved RoomValidator PR with minor fixes', timestamp: ts(-1200000) }, - { time: '22:18', agent: 'DevOps', action: 'Added .dockerignore for node_modules and build artifacts', timestamp: ts(-1500000) }, - { time: '22:08', agent: 'Iris', action: 'Broke down Dungeon System tasks into sub-tasks', timestamp: ts(-1800000) }, - { time: '21:55', agent: 'Developer', action: 'Defined dungeon schema models with validation', timestamp: ts(-2400000) }, - ]) - - // Chat - const chatMessages = ref([ - { id: 'm1', sender: 'iris', text: 'Guten Abend, Bao. Ready to continue the Dungeon System?', timestamp: now - 600000 }, - { id: 'm2', sender: 'user', text: "Yes, what's the status?", timestamp: now - 540000 }, - { id: 'm3', sender: 'iris', text: "Developer is at 62% on room generation. Reviewer approved the schema. I'd recommend focusing on the room connection logic next.", timestamp: now - 480000 }, - ]) - - const irisBusy = ref(true) - const irisFocus = ref('Breaking down Dungeon System for DevOps and Developer') - - // Queue - const queue = ref([ - { id: 'q1', text: 'Deploy latest dashboard build to preview', priority: 'high', waitTime: '2 min' }, - { id: 'q2', text: 'Review infrastructure cost analysis', priority: 'medium', waitTime: '8 min' }, - { id: 'q3', text: 'Schedule B2 German lesson review', priority: 'low', waitTime: '15 min' }, - { id: 'q4', text: 'Update project roadmap document', priority: 'medium', waitTime: '12 min' }, - ]) - - function sendChat(text: string): void { - if (!text.trim()) return + if (data.ok && data.reply) { + chatMessages.value.push({ + id: `iris-${Date.now()}`, + sender: 'iris', + text: data.reply, + timestamp: Date.now(), + }) + } else if (data.error) { + chatMessages.value.push({ + id: `error-${Date.now()}`, + sender: 'iris', + text: `⚠️ ${data.error}`, + timestamp: Date.now(), + }) + } + } catch { chatMessages.value.push({ - id: `user-${Date.now()}`, - sender: 'user', - text: text.trim(), + id: `error-${Date.now()}`, + sender: 'iris', + text: '⚠️ Connection error. Please try again.', timestamp: Date.now(), }) + } finally { + irisBusy.value = false + irisFocus.value = text.trim() } +} - function removeQueueItem(id: string): void { - const idx = queue.value.findIndex(q => q.id === id) - if (idx !== -1) queue.value.splice(idx, 1) - } +// ── Queue Operations ── - function moveQueueItem(fromIdx: number, toIdx: number): void { - if (toIdx < 0 || toIdx >= queue.value.length) return - const [item] = queue.value.splice(fromIdx, 1) - queue.value.splice(toIdx, 0, item) - } +function removeQueueItem(id: string): void { + const idx = queue.value.findIndex(q => q.id === id) + if (idx !== -1) queue.value.splice(idx, 1) +} - function changeQueuePriority(id: string, priority: QueueItem['priority']): void { - const item = queue.value.find(q => q.id === id) - if (item) item.priority = priority +function moveQueueItem(fromIdx: number, toIdx: number): void { + if (toIdx < 0 || toIdx >= queue.value.length) return + const [item] = queue.value.splice(fromIdx, 1) + queue.value.splice(toIdx, 0, item) +} + +function changeQueuePriority(id: string, priority: QueueItem['priority']): void { + const item = queue.value.find(q => q.id === id) + if (item) item.priority = priority +} + +// ── Runtime ── + +function startRuntime(): void { + const startTs = sessionStart + runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000) + runtimeInterval = setInterval(() => { + runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000) + }, 1000) +} + +function stopRuntime(): void { + if (runtimeInterval) { + clearInterval(runtimeInterval) + runtimeInterval = null } +} + +const formatRuntime = (seconds: number): string => { + const m = Math.floor(seconds / 60) + const s = seconds % 60 + return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` +} + +const irisRuntime = computed(() => formatRuntime(runtimeSeconds.value)) + +const getAgentRuntime = (_id: string): string => { + // Could be extended to track per-agent runtimes from API + return formatRuntime(runtimeSeconds.value) +} + +// ── Polling starten (nur einmal) ── + +function startPolling(): void { + if (cleanupRegistered) return + cleanupRegistered = true + + // Initial fetches + fetchStatus() + fetchAgents() + fetchOperations() + fetchChatMessages() + fetchQueue() + + // Polling intervals + intervals.push(setInterval(fetchStatus, 5000)) + intervals.push(setInterval(fetchAgents, 10000)) + intervals.push(setInterval(fetchOperations, 10000)) + intervals.push(setInterval(fetchChatMessages, 3000)) + intervals.push(setInterval(fetchQueue, 10000)) +} + +function stopPolling(): void { + for (const interval of intervals) { + clearInterval(interval) + } + intervals.length = 0 + cleanupRegistered = false +} + +// ── Composable Export ── + +export function useDashboardData() { + // Start polling on first call + startPolling() return { + // State agents, openTasks, feedEntries, @@ -311,14 +452,29 @@ export function useDashboardData() { irisFocus, irisRuntime, queue, + gatewayOk, + irisStatus, + pendingTasks, + activeAgents, + + // Runtime runtimeSeconds, getAgentRuntime, startRuntime, stopRuntime, formatRuntime, - sendChat, + + // Actions + sendChatMessage, removeQueueItem, moveQueueItem, changeQueuePriority, + + // Fetch (for manual refresh) + fetchStatus, + fetchAgents, + fetchOperations, + fetchChatMessages, + fetchQueue, } } diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue index 696fd29..f9ed5b6 100644 --- a/frontend/src/views/DashboardView.vue +++ b/frontend/src/views/DashboardView.vue @@ -13,7 +13,7 @@ const { agents, openTasks, feedEntries, chatMessages, irisBusy, irisFocus, queue, getAgentRuntime, startRuntime, stopRuntime, - sendChat, removeQueueItem, moveQueueItem, changeQueuePriority, + sendChatMessage, removeQueueItem, moveQueueItem, changeQueuePriority, } = useDashboardData() const selectedAgent = ref(null) @@ -26,8 +26,6 @@ function onAgentSelect(id: string) { 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) @@ -88,7 +86,7 @@ function onQueueExecuteNow(id: string): void {
- +