feat(v2): IrisChat + TaskStrip components, mock data integration
This commit is contained in:
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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
|
||||||
|
}
|
||||||
@@ -1,46 +1,228 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
/**
|
/**
|
||||||
* FlowBoard – Das neue V2 Dashboard
|
* 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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flow-board">
|
<div class="flow-board">
|
||||||
<!-- Placeholder: V2 Dashboard Content -->
|
<!-- Stage + Rail row -->
|
||||||
<div class="board-hero">
|
<div class="board-body">
|
||||||
<h2 class="board-title">Flow Board</h2>
|
<!-- Stage: AlertBar + FlowCanvas + TaskStrip -->
|
||||||
<p class="board-subtitle">Real-time Agent Operations Dashboard</p>
|
<div class="stage">
|
||||||
</div>
|
<AlertBar
|
||||||
|
:active-count="activeCount"
|
||||||
|
:think-count="thinkCount"
|
||||||
|
:idle-count="idleCount"
|
||||||
|
:blocker-count="blockerCount"
|
||||||
|
:today-cost="todayCost"
|
||||||
|
:today-tokens="todayTokens"
|
||||||
|
@blocker-click="handleBlockerClick"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Metrics Row -->
|
<FlowCanvas
|
||||||
<div class="metrics-row">
|
:agents="agents"
|
||||||
<div class="metric-card">
|
:positions="agentPositions"
|
||||||
<span class="metric-label">Connected Agents</span>
|
:entering-ids="enteringIds"
|
||||||
<strong class="metric-value">{{ store.snapshot.metrics.runningAgents ?? 0 }}</strong>
|
@select="handleSelect"
|
||||||
</div>
|
@add="handleAdd"
|
||||||
<div class="metric-card">
|
@reset-layout="handleResetLayout"
|
||||||
<span class="metric-label">Queued Tasks</span>
|
@update-positions="handleUpdatePositions"
|
||||||
<strong class="metric-value">{{ store.snapshot.metrics.queuedTasks ?? 0 }}</strong>
|
/>
|
||||||
</div>
|
|
||||||
<div class="metric-card">
|
<TaskStrip :tasks="tasks" />
|
||||||
<span class="metric-label">Incidents</span>
|
|
||||||
<strong class="metric-value">{{ store.snapshot.metrics.incidents ?? 0 }}</strong>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Rail: IrisChat -->
|
||||||
|
<IrisChat
|
||||||
|
:messages="chatMessages"
|
||||||
|
:is-thinking="isThinking"
|
||||||
|
@send="handleChatSend"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.flow-board {
|
.flow-board {
|
||||||
animation: fade-in 0.35s ease-out;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 18px;
|
min-height: 0;
|
||||||
|
animation: fade-in 0.35s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fade-in {
|
@keyframes fade-in {
|
||||||
@@ -48,53 +230,21 @@ const store = useOperationsStore()
|
|||||||
to { opacity: 1; transform: translateY(0); }
|
to { opacity: 1; transform: translateY(0); }
|
||||||
}
|
}
|
||||||
|
|
||||||
.board-hero {
|
.board-body {
|
||||||
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;
|
flex: 1;
|
||||||
background: var(--glass);
|
display: flex;
|
||||||
border: 1px solid var(--line);
|
flex-direction: row;
|
||||||
border-radius: var(--r);
|
gap: 0;
|
||||||
backdrop-filter: blur(12px);
|
min-height: 0;
|
||||||
padding: 16px 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.metric-label {
|
.stage {
|
||||||
display: block;
|
flex: 1;
|
||||||
font-size: 10px;
|
display: flex;
|
||||||
font-weight: 600;
|
flex-direction: column;
|
||||||
letter-spacing: .08em;
|
gap: 14px;
|
||||||
color: var(--tx-3);
|
padding: 0 18px 0 0;
|
||||||
text-transform: uppercase;
|
min-height: 0;
|
||||||
margin-bottom: 6px;
|
min-width: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.metric-value {
|
|
||||||
font-family: 'JetBrains Mono', monospace;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--tx);
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user