feat(v2): NexusLayout, Sidebar, NavGroup, NavItem, Topbar, FlowBoard placeholder

2026-06-12 00:20:27 +02:00
parent f378d7aed4
commit 3672e56994
9 changed files with 725 additions and 1 deletions
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * FlowBoard – Das neue V2 Dashboard
+ * Main content area rendered inside NexusLayout.
+ */
+import { useOperationsStore } from '../../stores/operations'
+
+const store = useOperationsStore()
+</script>
+
+<template>
+  <div class="flow-board">
+    <!-- Placeholder: V2 Dashboard Content -->
+    <div class="board-hero">
+      <h2 class="board-title">Flow Board</h2>
+      <p class="board-subtitle">Real-time Agent Operations Dashboard</p>
+    </div>
+
+    <!-- Metrics Row -->
+    <div class="metrics-row">
+      <div class="metric-card">
+        <span class="metric-label">Connected Agents</span>
+        <strong class="metric-value">{{ store.snapshot.metrics.runningAgents ?? 0 }}</strong>
+      </div>
+      <div class="metric-card">
+        <span class="metric-label">Queued Tasks</span>
+        <strong class="metric-value">{{ store.snapshot.metrics.queuedTasks ?? 0 }}</strong>
+      </div>
+      <div class="metric-card">
+        <span class="metric-label">Incidents</span>
+        <strong class="metric-value">{{ store.snapshot.metrics.incidents ?? 0 }}</strong>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flow-board {
+  animation: fade-in 0.35s ease-out;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.board-hero {
+  padding-bottom: 8px;
+}
+
+.board-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 600;
+  font-size: 24px;
+  margin: 0;
+  color: var(--tx);
+}
+
+.board-subtitle {
+  font-size: 13px;
+  color: var(--tx-3);
+  margin: 4px 0 0;
+}
+
+.metrics-row {
+  display: flex;
+  gap: 14px;
+}
+
+.metric-card {
+  flex: 1;
+  background: var(--glass);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  backdrop-filter: blur(12px);
+  padding: 16px 18px;
+}
+
+.metric-label {
+  display: block;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: .08em;
+  color: var(--tx-3);
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.metric-value {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--tx);
+  font-variant-numeric: tabular-nums;
+}
+</style>