From 166c9f905180cf64116a5353ee004204f0713cfc Mon Sep 17 00:00:00 2001
From: Developer <developer@noveria.net>
Date: Fri, 12 Jun 2026 00:48:13 +0200
Subject: [PATCH] feat(v2): IrisChat + TaskStrip components, mock data
 integration

---
 .../src/components/dashboard/v2/IrisChat.vue  | 439 ++++++++++++++++++
 .../src/components/dashboard/v2/TaskStrip.vue | 172 +++++++
 frontend/src/components/dashboard/v2/types.ts |  19 +
 frontend/src/views/Dashboard/FlowBoard.vue    | 286 +++++++++---
 4 files changed, 848 insertions(+), 68 deletions(-)
 create mode 100644 frontend/src/components/dashboard/v2/IrisChat.vue
 create mode 100644 frontend/src/components/dashboard/v2/TaskStrip.vue
 create mode 100644 frontend/src/components/dashboard/v2/types.ts

diff --git a/frontend/src/components/dashboard/v2/IrisChat.vue b/frontend/src/components/dashboard/v2/IrisChat.vue
new file mode 100644
index 0000000..8c13e9d
--- /dev/null
+++ b/frontend/src/components/dashboard/v2/IrisChat.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+/**
+ * IrisChat — Rechte Seitenleiste (Rail) im V2 Dashboard
+ *
+ * Container: 368px breit, border-left 1px var(--line), flex column
+ *
+ * Props:
+ *   messages   – ChatMessage[]
+ *   isThinking – zeigt "thinking…" Indicator an
+ *
+ * Emits:
+ *   send(text) – Nachricht absenden
+ */
+
+import { ref, nextTick, watch } from 'vue'
+import { icons } from '../../../composables/icons'
+import type { ChatMessage } from './types'
+
+const props = defineProps<{
+  messages: ChatMessage[]
+  isThinking: boolean
+}>()
+
+const emit = defineEmits<{
+  send: [text: string]
+}>()
+
+/* ── Input ────────────────────────────────────────── */
+const inputText = ref('')
+const msgContainer = ref<HTMLElement | null>(null)
+
+function handleSend() {
+  const text = inputText.value.trim()
+  if (!text) return
+  emit('send', text)
+  inputText.value = ''
+  // Focus bleibt im Input
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleSend()
+  }
+}
+
+/* ── Auto-scroll nach unten ───────────────────────── */
+watch(
+  () => props.messages.length,
+  () => {
+    nextTick(() => {
+      if (msgContainer.value) {
+        msgContainer.value.scrollTop = msgContainer.value.scrollHeight
+      }
+    })
+  }
+)
+
+/* ── Format timestamp ─────────────────────────────── */
+function formatTs(ts: string): string {
+  // Expects "HH:MM" or "HH:MM:SS"
+  return ts
+}
+</script>
+
+<template>
+  <div class="irischat">
+    <!-- Header -->
+    <div class="chat-header">
+      <div class="chat-header-left">
+        <span class="header-icon" v-html="icons.bot || ''"></span>
+        <div class="header-text">
+          <span class="header-title">Live-Orchestrierung</span>
+          <span class="header-subtitle">Iris Chat</span>
+        </div>
+      </div>
+      <button class="ask-btn" type="button">
+        <span class="ask-icon" v-html="icons.spark || ''"></span>
+        Ask Iris
+      </button>
+    </div>
+
+    <!-- Messages (flex column-reverse — neueste unten) -->
+    <div ref="msgContainer" class="messages">
+      <!-- Thinking Indicator -->
+      <div v-if="isThinking" class="thinking-indicator">
+        <span class="thinking-dots">
+          <span class="dot-1">●</span>
+          <span class="dot-2">●</span>
+          <span class="dot-3">●</span>
+        </span>
+        <span class="thinking-text">thinking…</span>
+      </div>
+
+      <!-- Messages (reverse order → neueste zuerst) -->
+      <template v-for="(msg, i) in [...messages].reverse()" :key="i">
+        <!-- Iris Bubble -->
+        <div v-if="msg.sender === 'iris'" class="bubble iris-bubble">
+          <div class="bubble-text">{{ msg.text }}</div>
+          <!-- Tool-Call-Indikator -->
+          <div v-if="msg.tool" class="tool-indicator">
+            <span class="tool-icon" v-html="icons.search || ''"></span>
+            <span class="tool-label">{{ msg.tool }}</span>
+          </div>
+          <div class="bubble-meta">{{ formatTs(msg.ts) }}</div>
+        </div>
+
+        <!-- User Bubble -->
+        <div v-else class="bubble user-bubble">
+          <div class="bubble-text">{{ msg.text }}</div>
+          <div class="bubble-meta">{{ formatTs(msg.ts) }}</div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Input Area -->
+    <div class="chat-input-area">
+      <div class="input-wrap">
+        <input
+          v-model="inputText"
+          class="chat-input"
+          type="text"
+          placeholder="Nachricht an Iris…"
+          @keydown="onKeydown"
+        />
+        <button
+          class="send-btn"
+          type="button"
+          :disabled="!inputText.trim()"
+          @click="handleSend"
+          :aria-label="'Send message'"
+        >
+          <span v-html="icons.send || ''"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.irischat {
+  width: 368px;
+  flex: 0 0 368px;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(14, 12, 32, 0.92), rgba(8, 6, 20, 0.92));
+  overflow: hidden;
+}
+
+/* ── Header ───────────────────────────────────────── */
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+  flex: 0 0 auto;
+}
+
+.chat-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.header-icon :deep(svg) {
+  width: 20px;
+  height: 20px;
+  color: var(--a-mid);
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.header-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 600;
+  font-size: 14.5px;
+  color: var(--tx);
+  line-height: 1.3;
+}
+
+.header-subtitle {
+  font-family: 'Space Grotesk', sans-serif;
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--tx-3);
+  line-height: 1.3;
+}
+
+.ask-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 29px;
+  padding: 0 14px;
+  border-radius: 8px;
+  border: none;
+  background: var(--grad);
+  color: #fff;
+  font-family: 'Manrope', sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: filter 0.15s;
+  white-space: nowrap;
+}
+
+.ask-btn:hover {
+  filter: brightness(1.1);
+}
+
+.ask-icon :deep(svg) {
+  width: 14px;
+  height: 14px;
+}
+
+/* ── Messages ─────────────────────────────────────── */
+.messages {
+  flex: 1;
+  display: flex;
+  flex-direction: column-reverse;
+  overflow-y: auto;
+  padding: 12px;
+  gap: 10px;
+  min-height: 0;
+}
+
+.messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.messages::-webkit-scrollbar-thumb {
+  background: rgba(124, 108, 255, 0.22);
+  border-radius: 6px;
+  border: 1px solid transparent;
+  background-clip: padding-box;
+}
+
+.messages::-webkit-scrollbar-thumb:hover {
+  background: rgba(124, 108, 255, 0.4);
+  background-clip: padding-box;
+}
+
+.messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ── Bubbles ──────────────────────────────────────── */
+.bubble {
+  padding: 10px 13px;
+  max-width: 86%;
+  animation: bubble-in 0.2s ease-out;
+}
+
+@keyframes bubble-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.iris-bubble {
+  align-self: flex-start;
+  background: rgba(124, 108, 255, 0.14);
+  border-left: 2px solid var(--a-mid);
+  border-radius: 0 10px 10px 10px;
+}
+
+.user-bubble {
+  align-self: flex-end;
+  background: rgba(255, 255, 255, 0.06);
+  border-right: 2px solid var(--tx-3);
+  border-radius: 10px 0 10px 10px;
+}
+
+.bubble-text {
+  font-family: 'Manrope', sans-serif;
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--tx);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.bubble-meta {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  color: var(--tx-3);
+  margin-top: 4px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Tool-Call-Indikator ──────────────────────────── */
+.tool-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  padding: 3px 9px;
+  border-radius: 6px;
+  background: rgba(52, 214, 245, 0.10);
+  border: 1px solid rgba(52, 214, 245, 0.18);
+}
+
+.tool-icon :deep(svg) {
+  width: 11px;
+  height: 11px;
+  color: var(--st-think);
+  flex: 0 0 auto;
+}
+
+.tool-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--st-think);
+}
+
+/* ── Thinking Indicator ────────────────────────────── */
+.thinking-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.thinking-dots {
+  display: flex;
+  gap: 2px;
+  font-size: 6px;
+  color: var(--a-mid);
+}
+
+.thinking-dots span {
+  animation: think-pop 1.2s ease-in-out infinite;
+}
+
+.thinking-dots .dot-2 {
+  animation-delay: 0.2s;
+}
+
+.thinking-dots .dot-3 {
+  animation-delay: 0.4s;
+}
+
+@keyframes think-pop {
+  0%, 80%, 100% {
+    opacity: 0.3;
+    transform: scale(0.7);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.thinking-text {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--tx-3);
+  font-style: italic;
+}
+
+/* ── Input Area ───────────────────────────────────── */
+.chat-input-area {
+  flex: 0 0 auto;
+  padding: 10px 12px 12px;
+  border-top: 1px solid var(--line);
+}
+
+.input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 8px 0 13px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.input-wrap:focus-within {
+  border-color: var(--line-3);
+  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.12);
+}
+
+.chat-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-family: 'Manrope', sans-serif;
+  font-size: 12px;
+  color: var(--tx);
+  line-height: 1.4;
+}
+
+.chat-input::placeholder {
+  color: var(--tx-3);
+}
+
+.send-btn {
+  flex: 0 0 32px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 8px;
+  background: var(--grad);
+  color: #fff;
+  cursor: pointer;
+  transition: filter 0.15s, opacity 0.15s;
+}
+
+.send-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.send-btn:not(:disabled):hover {
+  filter: brightness(1.1);
+}
+
+.send-btn :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+</style>
diff --git a/frontend/src/components/dashboard/v2/TaskStrip.vue b/frontend/src/components/dashboard/v2/TaskStrip.vue
new file mode 100644
index 0000000..865549e
--- /dev/null
+++ b/frontend/src/components/dashboard/v2/TaskStrip.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+/**
+ * TaskStrip — Untere Leiste im V2 Dashboard Stage
+ *
+ * Props:
+ *   tasks     – TaskItem[]
+ */
+
+import type { TaskItem } from './types'
+
+defineProps<{
+  tasks: TaskItem[]
+}>()
+</script>
+
+<template>
+  <div class="taskstrip v2-scroll">
+    <div
+      v-for="task in tasks"
+      :key="task.id"
+      class="taskcard"
+      :class="`task-${task.status}`"
+    >
+      <!-- Priority Badge -->
+      <span class="prio-badge" :class="`prio-${task.priority}`">
+        {{ task.priority === 'high' ? 'P0' : task.priority === 'medium' ? 'P1' : 'P2' }}
+      </span>
+
+      <!-- Title -->
+      <div class="task-title">{{ task.title }}</div>
+
+      <!-- Agent -->
+      <div class="task-agent">{{ task.agent }}</div>
+
+      <!-- Progress Bar -->
+      <div class="task-progress">
+        <div class="bar-track">
+          <div
+            class="bar-fill"
+            :style="{ width: task.progress + '%' }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.taskstrip {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding: 0 16px 14px;
+  overflow-x: auto;
+  min-height: 0;
+  flex: 0 0 auto;
+}
+
+/* ── Task Card ────────────────────────────────────── */
+.taskcard {
+  min-width: 196px;
+  max-width: 220px;
+  flex: 0 0 auto;
+  background: var(--glass);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  padding: 12px 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+/* ── Status Variants ──────────────────────────────── */
+.task-active {
+  border-left: 2px solid var(--st-work);
+  background: rgba(61, 220, 151, 0.04);
+}
+
+.task-pending {
+  border-left: 2px solid var(--st-think);
+  background: rgba(52, 214, 245, 0.04);
+}
+
+.task-blocked {
+  border-left: 2px solid var(--st-block);
+  background: rgba(255, 106, 106, 0.04);
+}
+
+/* ── Priority Badge ───────────────────────────────── */
+.prio-badge {
+  display: inline-block;
+  align-self: flex-start;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  font-weight: 600;
+  padding: 1px 7px;
+  border-radius: 20px;
+  line-height: 1.5;
+}
+
+.prio-high {
+  background: rgba(255, 106, 106, 0.18);
+  color: var(--st-block);
+}
+
+.prio-medium {
+  background: rgba(124, 108, 255, 0.14);
+  color: var(--a-mid);
+}
+
+.prio-low {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--tx-3);
+}
+
+/* ── Title ─────────────────────────────────────────── */
+.task-title {
+  font-family: 'Manrope', sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--tx);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ── Agent ─────────────────────────────────────────── */
+.task-agent {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  color: var(--tx-3);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Progress Bar ──────────────────────────────────── */
+.task-progress {
+  margin-top: 2px;
+}
+
+.bar-track {
+  height: 3px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative;
+}
+
+.bar-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 0.4s ease;
+}
+
+/* Status-specific bar colors */
+.task-active .bar-fill {
+  background: var(--grad);
+}
+
+.task-pending .bar-fill {
+  background: var(--grad);
+  opacity: 0.45;
+}
+
+.task-blocked .bar-fill {
+  background: var(--st-block);
+  opacity: 0.55;
+}
+</style>
diff --git a/frontend/src/components/dashboard/v2/types.ts b/frontend/src/components/dashboard/v2/types.ts
new file mode 100644
index 0000000..a4c9298
--- /dev/null
+++ b/frontend/src/components/dashboard/v2/types.ts
@@ -0,0 +1,19 @@
+/**
+ * Shared types for V2 Dashboard components
+ */
+
+export interface ChatMessage {
+  sender: 'iris' | 'user'
+  text: string
+  ts: string
+  tool?: string
+}
+
+export interface TaskItem {
+  id: string
+  title: string
+  agent: string
+  priority: 'high' | 'medium' | 'low'
+  status: 'active' | 'pending' | 'blocked'
+  progress: number  // 0–100
+}
diff --git a/frontend/src/views/Dashboard/FlowBoard.vue b/frontend/src/views/Dashboard/FlowBoard.vue
index 26720ee..d3f1b47 100644
--- a/frontend/src/views/Dashboard/FlowBoard.vue
+++ b/frontend/src/views/Dashboard/FlowBoard.vue
@@ -1,46 +1,228 @@
 <script setup lang="ts">
 /**
  * FlowBoard – Das neue V2 Dashboard
- * Main content area rendered inside NexusLayout.
+ *
+ * Layout:
+ *   Stage (AlertBar + FlowCanvas) + Rail (IrisChat) + TaskStrip (unten)
+ *
+ * Integriert V2-Komponenten: AlertBar, FlowCanvas, IrisChat, TaskStrip
+ * mit Mock-Daten aus useFlowLayout / agents.js.
  */
-import { useOperationsStore } from '../../stores/operations'
+import { ref, computed } from 'vue'
+import AlertBar from '../../components/dashboard/v2/AlertBar.vue'
+import FlowCanvas from '../../components/dashboard/v2/FlowCanvas.vue'
+import IrisChat from '../../components/dashboard/v2/IrisChat.vue'
+import type { ChatMessage } from '../../components/dashboard/v2/types'
+import TaskStrip from '../../components/dashboard/v2/TaskStrip.vue'
+import type { TaskItem } from '../../components/dashboard/v2/types'
+import { mockAgents, extraAgentPool } from '../../composables/useFlowLayout'
+import type { AgentNodeData } from '../../composables/useFlowLayout'
 
-const store = useOperationsStore()
+/* ── Agent State ───────────────────────────────────── */
+const agents = ref<AgentNodeData[]>(mockAgents)
+const agentPositions = ref<Record<string, { x: number; y: number }>>({})
+const enteringIds = ref<string[]>([])
+
+const agentPool = ref<AgentNodeData[]>(extraAgentPool)
+
+function handleSelect(id: string) {
+  console.log('[FlowBoard] selected agent:', id)
+}
+
+function handleAdd() {
+  const pool = agentPool.value
+  if (pool.length === 0) return
+  const next = pool.shift()!
+  enteringIds.value.push(next.id)
+  agents.value.push(next)
+
+  // Remove "entering" after animation settles
+  setTimeout(() => {
+    const idx = enteringIds.value.indexOf(next.id)
+    if (idx !== -1) enteringIds.value.splice(idx, 1)
+  }, 600)
+}
+
+function handleResetLayout() {
+  agentPositions.value = {}
+}
+
+function handleUpdatePositions(pos: Record<string, { x: number; y: number }>) {
+  agentPositions.value = { ...pos }
+}
+
+/* ── AlertBar computed props ──────────────────────── */
+const activeCount = computed(() => agents.value.filter(a => a.status === 'work').length)
+const thinkCount = computed(() => agents.value.filter(a => a.status === 'think').length)
+const idleCount = computed(() => agents.value.filter(a => a.status === 'idle').length)
+const blockerCount = computed(() => agents.value.filter(a => a.status === 'block').length)
+const todayCost = computed(() => {
+  const total = agents.value.reduce((s, a) => s + parseFloat(a.cost || '0'), 0)
+  return '$' + total.toFixed(2)
+})
+const todayTokens = computed(() => {
+  const total = agents.value.reduce((s, a) => {
+    const v = a.tokens?.replace(/[^0-9.]/g, '')
+    return v ? s + parseFloat(v) : s
+  }, 0)
+  return total >= 1000 ? Math.round(total / 1000) + 'k' : Math.round(total) + ''
+})
+
+function handleBlockerClick() {
+  console.log('[FlowBoard] blocker clicked')
+}
+
+/* ── IrisChat Mock Data ────────────────────────────── */
+const chatMessages = ref<ChatMessage[]>([
+  {
+    sender: 'iris',
+    text: 'Guten Morgen. Status: 4 Agents aktiv, 1 Blocker. Der Healthcheck auf staging schlägt seit dem letzten Deploy fehl — ich habe das dem Executor mit P0 zugewiesen.',
+    ts: '12:48',
+  },
+  {
+    sender: 'user',
+    text: 'Was ist die Ursache?',
+    ts: '12:49',
+  },
+  {
+    sender: 'iris',
+    text: 'Reviewer hat in PR #142 eine fehlende Rate-Limit-Prüfung gefunden, die den /health Endpoint blockiert. Developer arbeitet bereits am Fix (72%).',
+    ts: '12:49',
+    tool: 'gelesen: reviews/pr-142.md',
+  },
+  {
+    sender: 'user',
+    text: 'Gut. Halte mich beim Deploy auf dem Laufenden.',
+    ts: '12:51',
+  },
+  {
+    sender: 'iris',
+    text: 'Verstanden. Ich melde mich, sobald der Executor den Healthcheck verifiziert hat. Geschätzte Fertigstellung: ~6 Min.',
+    ts: '12:51',
+  },
+])
+
+const isThinking = ref(false)
+
+function handleChatSend(text: string) {
+  // Add user message
+  chatMessages.value.push({
+    sender: 'user',
+    text,
+    ts: new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }),
+  })
+
+  // Simulate thinking + Iris response
+  isThinking.value = true
+  setTimeout(() => {
+    isThinking.value = false
+    chatMessages.value.push({
+      sender: 'iris',
+      text: `👍 Ich habe Deine Anfrage erhalten: "${text}". Ich arbeite daran und melde mich mit Ergebnissen.`,
+      ts: new Date().toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }),
+    })
+  }, 1200)
+}
+
+/* ── TaskStrip Mock Data ──────────────────────────── */
+const tasks = ref<TaskItem[]>([
+  {
+    id: 't1',
+    title: 'Healthcheck schlägt auf staging fehl',
+    agent: 'Executor',
+    priority: 'high',
+    status: 'active',
+    progress: 88,
+  },
+  {
+    id: 't2',
+    title: 'Review PR #142 — Auth-Refactor',
+    agent: 'Reviewer',
+    priority: 'high',
+    status: 'active',
+    progress: 35,
+  },
+  {
+    id: 't3',
+    title: 'JWT-Rotation: Unit-Tests',
+    agent: 'Developer',
+    priority: 'high',
+    status: 'pending',
+    progress: 0,
+  },
+  {
+    id: 't4',
+    title: 'Terraform-Plan VPS-Skalierung',
+    agent: 'Architekt',
+    priority: 'medium',
+    status: 'pending',
+    progress: 0,
+  },
+  {
+    id: 't5',
+    title: 'Standup-Report generieren',
+    agent: 'Iris',
+    priority: 'medium',
+    status: 'pending',
+    progress: 0,
+  },
+  {
+    id: 't6',
+    title: 'LLM-Cost-Benchmark',
+    agent: 'Researcher',
+    priority: 'low',
+    status: 'pending',
+    progress: 0,
+  },
+])
 </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>
+    <!-- Stage + Rail row -->
+    <div class="board-body">
+      <!-- Stage: AlertBar + FlowCanvas + TaskStrip -->
+      <div class="stage">
+        <AlertBar
+          :active-count="activeCount"
+          :think-count="thinkCount"
+          :idle-count="idleCount"
+          :blocker-count="blockerCount"
+          :today-cost="todayCost"
+          :today-tokens="todayTokens"
+          @blocker-click="handleBlockerClick"
+        />
 
-    <!-- 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>
+        <FlowCanvas
+          :agents="agents"
+          :positions="agentPositions"
+          :entering-ids="enteringIds"
+          @select="handleSelect"
+          @add="handleAdd"
+          @reset-layout="handleResetLayout"
+          @update-positions="handleUpdatePositions"
+        />
+
+        <TaskStrip :tasks="tasks" />
       </div>
+
+      <!-- Rail: IrisChat -->
+      <IrisChat
+        :messages="chatMessages"
+        :is-thinking="isThinking"
+        @send="handleChatSend"
+      />
     </div>
   </div>
 </template>
 
 <style scoped>
 .flow-board {
-  animation: fade-in 0.35s ease-out;
   height: 100%;
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  min-height: 0;
+  animation: fade-in 0.35s ease-out;
 }
 
 @keyframes fade-in {
@@ -48,53 +230,21 @@ const store = useOperationsStore()
   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 {
+.board-body {
   flex: 1;
-  background: var(--glass);
-  border: 1px solid var(--line);
-  border-radius: var(--r);
-  backdrop-filter: blur(12px);
-  padding: 16px 18px;
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  min-height: 0;
 }
 
-.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;
+.stage {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 0 18px 0 0;
+  min-height: 0;
+  min-width: 0;
 }
 </style>