refactor: SOLID architecture — backend service layer + frontend V2 components
## Backend — Service Layer & Repository Refactoring ### Neue Services (21 neue Dateien) **Interfaces & Implementierungen:** - `IOpenClawGatewayClient` — Interface für OpenClawGatewayClient (DIP-Fix: DashboardController hing an konkreter Klasse) - `IAgentConfigService` / `AgentConfigService` — Agent-Config-File-I/O aus AgentsController extrahiert - `IProjectService` / `ProjectService` — Projekt-CRUD + Activity-Logging (SRP) - `ITaskService` / `TaskService` — Task-State-Machine, Approve/Reject, Dashboard-Operationen (eliminiert Duplikation zwischen TasksController und DashboardController) - `IDashboardService` / `DashboardService` — Queue-Aggregation, Priority-Normalisierung, Gateway-Delegation - `IOperationsService` / `OperationsService` — Metriken-Berechnung aus OperationsController - `ITeamService` / `TeamService` — IDENTITY.md-Lesen aus TeamController - `IMemoryService` / `MemoryService` — File-I/O aus MemoryController - `IIncidentService` / `IncidentService` — File-Parsing (Regex-Source-Generatoren) aus IncidentsController - `IDocService` / `DocService` — Directory-Scan aus DocsController - `ICalendarService` / `CalendarService` — Gateway-HTTP-Calls + Fallback-Daten aus CalendarController ### Repository-Fixes **IUserRepository / UserRepository:** - `SaveChangesAsync` entfernt (leaky abstraction — Caller sollten nie SaveChanges steuern) - `RevokeTokenAsync(tokenHash)` — atomares Token-Revoke inkl. SaveChanges - `RevokeFamilyAsync(familyId)` — Batch-Revoke einer Token-Familie inkl. SaveChanges - `RemoveExpiredTokensAsync` speichert jetzt selbst (war vorher dependent auf nachfolgenden Save) ### AuthService-Fixes - `GetUserAsync`: unnötiges `Task.Run` entfernt → direkt `_users.GetByIdAsync().AsTask()` - `RevokeAsync`: delegiert jetzt an `IUserRepository.RevokeTokenAsync` - `RefreshAsync`: Token-Reuse-Detection delegiert an `IUserRepository.RevokeFamilyAsync` ### Bug-Fix - `OpenClawGatewayClient.ReadAgentGoalAsync`: pre-existing `CS1656` behoben (`reader` war `using`-Variable und wurde neu zugewiesen — in `reader2` umbenannt) ### Controller (16 Stück — alle slim) Alle Controller reduziert auf: Input validieren → Service aufrufen → HTTP-Result zurückgeben. Kein Business-Logic, kein File-I/O, keine direkte Repository-Nutzung (außer AgentsController für Activity-Log). **Program.cs — neue Registrierungen:** - `AddHttpClient<IOpenClawGatewayClient, OpenClawGatewayClient>` (war vorher konkrete Klasse) - Scoped: IDashboardService, IProjectService, ITaskService, IOperationsService, ITeamService, ICalendarService - Singleton: IAgentConfigService, IMemoryService, IIncidentService, IDocService --- ## Frontend — Dashboard V2 Components **AgentDetailModal.vue, IrisChat.vue, TaskStrip.vue:** - V2 Design-System: Dark Space Theme, Glass-Panels, Gradient-Akzente - Stores (agents, chat, tasks) nutzen Service + Mapper-Pattern - NexusLayout, FlowBoard, Topbar — Layoutfixes für fullHeight-Route-Meta Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,18 +1,5 @@
|
||||
<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, computed, nextTick, watch } from 'vue'
|
||||
import { ref, nextTick, watch } from 'vue'
|
||||
import { icons } from '../../../composables/icons'
|
||||
import type { ChatMessage } from './types'
|
||||
|
||||
@@ -26,10 +13,8 @@ const emit = defineEmits<{
|
||||
send: [text: string]
|
||||
}>()
|
||||
|
||||
/* ── Input ────────────────────────────────────────── */
|
||||
const inputText = ref('')
|
||||
const msgContainer = ref<HTMLElement | null>(null)
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
const scrollEl = ref<HTMLElement | null>(null)
|
||||
|
||||
function handleSend() {
|
||||
const text = inputText.value.trim()
|
||||
@@ -45,439 +30,273 @@ function onKeydown(e: KeyboardEvent) {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Reversed messages (newest first in DOM for column-reverse) ── */
|
||||
const reversedMessages = computed(() => [...props.messages].reverse())
|
||||
|
||||
/* ── Auto-scroll: column-reverse means scrollTop=0 = bottom (newest) ── */
|
||||
watch(
|
||||
() => props.messages.length,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
if (msgContainer.value) {
|
||||
msgContainer.value.scrollTop = 0
|
||||
}
|
||||
if (scrollEl.value) scrollEl.value.scrollTop = scrollEl.value.scrollHeight
|
||||
})
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="irischat">
|
||||
<section class="iris-panel">
|
||||
<!-- 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 class="iris-head">
|
||||
<div class="iris-av" v-html="icons.bot || ''"></div>
|
||||
<div>
|
||||
<div class="iris-name">Iris</div>
|
||||
<div class="iris-sub">Chief of Staff · <span class="online">online</span></div>
|
||||
</div>
|
||||
<button class="ask-btn" type="button" @click="inputRef?.focus()">
|
||||
<span class="ask-icon" v-html="icons.spark || ''"></span>
|
||||
Ask Iris
|
||||
</button>
|
||||
<button class="expand-btn" type="button" v-html="icons.expand || ''"></button>
|
||||
</div>
|
||||
|
||||
<!-- Messages (flex column-reverse — neueste unten) -->
|
||||
<div ref="msgContainer" class="messages">
|
||||
<!-- Error Banner -->
|
||||
<div v-if="error" class="chat-error">
|
||||
<span class="error-icon">⚠</span>
|
||||
<span>Chat unavailable: {{ error }}</span>
|
||||
</div>
|
||||
<!-- Chat Scroll -->
|
||||
<div ref="scrollEl" class="chat-scroll">
|
||||
<div v-if="error" class="chat-msg-info error">⚠ {{ error }}</div>
|
||||
<div v-else-if="!messages.length && !isThinking" class="chat-msg-info">Noch keine Nachrichten.</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="!messages.length && !isThinking" class="chat-empty">
|
||||
<span class="empty-text">No messages yet. Ask Iris something.</span>
|
||||
</div>
|
||||
|
||||
<!-- Messages (reverse order → newest first in DOM, column-reverse flips) -->
|
||||
<template v-for="(msg, i) in reversedMessages" :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 v-for="(msg, i) in messages" :key="i" class="chat-row">
|
||||
<template v-if="msg.sender === 'iris'">
|
||||
<div class="bubble iris">{{ msg.text }}</div>
|
||||
<div v-if="msg.tool" class="tool">
|
||||
<span v-html="icons.doc || ''"></span>{{ msg.tool }}
|
||||
</div>
|
||||
<div class="bubble-meta">{{ msg.ts }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="bubble me">{{ msg.text }}</div>
|
||||
</div>
|
||||
|
||||
<!-- User Bubble -->
|
||||
<div v-else class="bubble user-bubble">
|
||||
<div class="bubble-text">{{ msg.text }}</div>
|
||||
<div class="bubble-meta">{{ msg.ts }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Input Area -->
|
||||
<div class="chat-input-area">
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
ref="inputRef"
|
||||
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 v-if="isThinking" class="chat-row">
|
||||
<div class="bubble iris"><span class="caret"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<div class="chat-in">
|
||||
<input
|
||||
v-model="inputText"
|
||||
type="text"
|
||||
placeholder="Nachricht an Iris…"
|
||||
@keydown="onKeydown"
|
||||
/>
|
||||
<button class="send" type="button" @click="handleSend" v-html="icons.send || ''"></button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.irischat {
|
||||
width: 368px;
|
||||
flex: 0 0 368px;
|
||||
align-self: stretch;
|
||||
.iris-panel {
|
||||
width: var(--rail-w, 360px);
|
||||
flex: 0 0 var(--rail-w, 360px);
|
||||
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));
|
||||
min-height: 0;
|
||||
background: linear-gradient(180deg, rgba(20,17,48,.6), rgba(12,10,30,.6));
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r);
|
||||
backdrop-filter: blur(12px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Header ───────────────────────────────────────── */
|
||||
.chat-header {
|
||||
/* ── Header ─────────────────────────────────── */
|
||||
.iris-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.chat-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
.iris-av {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
background: var(--grad);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
box-shadow: var(--glow-purple);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.header-icon :deep(svg) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--a-mid);
|
||||
.iris-av :deep(svg) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
.iris-name {
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14.5px;
|
||||
color: var(--tx);
|
||||
line-height: 1.3;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
/* ── Error Banner ─────────────────────────────────── */
|
||||
.chat-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 13px;
|
||||
background: rgba(251, 113, 133, 0.12);
|
||||
border: 1px solid rgba(251, 113, 133, 0.25);
|
||||
border-radius: 10px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
.iris-sub {
|
||||
font-size: 11px;
|
||||
color: #fda4b0;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
flex: 0 0 auto;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Empty State ──────────────────────────────────── */
|
||||
.chat-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.chat-empty .empty-text {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 12px;
|
||||
color: var(--tx-3);
|
||||
font-style: italic;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
/* ── Thinking Indicator ────────────────────────────── */
|
||||
.thinking-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
.online {
|
||||
color: var(--st-work);
|
||||
}
|
||||
|
||||
.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;
|
||||
.expand-btn {
|
||||
margin-left: auto;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 9px;
|
||||
border: none;
|
||||
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;
|
||||
color: var(--tx-2);
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s, opacity 0.15s;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
transition: background .15s, color .15s;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.send-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
.expand-btn:hover {
|
||||
background: rgba(124,108,255,.10);
|
||||
color: var(--tx);
|
||||
}
|
||||
|
||||
.send-btn:not(:disabled):hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.send-btn :deep(svg) {
|
||||
.expand-btn :deep(svg) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* ── Messages ────────────────────────────────── */
|
||||
.chat-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.chat-scroll::-webkit-scrollbar { width: 6px; }
|
||||
.chat-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(124,108,255,.22);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
.chat-msg-info {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 12px;
|
||||
color: var(--tx-3);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.chat-msg-info.error { color: #fda4b0; font-style: normal; }
|
||||
|
||||
.chat-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
max-width: 84%;
|
||||
padding: 10px 13px;
|
||||
border-radius: 14px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bubble.iris {
|
||||
background: rgba(124,108,255,.12);
|
||||
border: 1px solid var(--line-2);
|
||||
border-bottom-left-radius: 5px;
|
||||
color: var(--tx);
|
||||
}
|
||||
|
||||
.bubble.me {
|
||||
background: var(--grad);
|
||||
color: #fff;
|
||||
border-bottom-right-radius: 5px;
|
||||
margin-left: auto;
|
||||
box-shadow: var(--glow-purple);
|
||||
}
|
||||
|
||||
.tool {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: var(--st-think);
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.tool :deep(svg) {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.caret::after {
|
||||
content: '▍';
|
||||
animation: blink 1s steps(1) infinite;
|
||||
color: var(--st-think);
|
||||
}
|
||||
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
|
||||
/* ── Input ───────────────────────────────────── */
|
||||
.chat-in {
|
||||
padding: 12px;
|
||||
border-top: 1px solid var(--line);
|
||||
display: flex;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.chat-in input {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
border-radius: 11px;
|
||||
border: 1px solid var(--line-2);
|
||||
background: rgba(124,108,255,.06);
|
||||
color: var(--tx);
|
||||
padding: 0 14px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color .15s;
|
||||
}
|
||||
|
||||
.chat-in input::placeholder { color: var(--tx-3); }
|
||||
.chat-in input:focus { border-color: var(--line-3); }
|
||||
|
||||
.send {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 11px;
|
||||
border: none;
|
||||
background: var(--grad);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--glow-purple);
|
||||
flex: 0 0 auto;
|
||||
transition: filter .15s;
|
||||
}
|
||||
|
||||
.send:hover { filter: brightness(1.1); }
|
||||
|
||||
.send :deep(svg) {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
/**
|
||||
* TaskStrip — Untere Leiste im V2 Dashboard Stage
|
||||
*
|
||||
* Props:
|
||||
* tasks – TaskItem[]
|
||||
*/
|
||||
|
||||
import type { TaskItem } from './types'
|
||||
|
||||
defineProps<{
|
||||
@@ -13,213 +6,143 @@ defineProps<{
|
||||
loading?: boolean
|
||||
error?: string | null
|
||||
}>()
|
||||
|
||||
function prioLabel(p: TaskItem['priority']): string {
|
||||
return p === 'high' ? 'P0' : p === 'medium' ? 'P1' : 'P2'
|
||||
}
|
||||
|
||||
function prioColor(p: TaskItem['priority']): string {
|
||||
return p === 'high' ? '#fda4b0' : p === 'medium' ? '#fcd34d' : '#9db6ff'
|
||||
}
|
||||
|
||||
function dotClass(s: TaskItem['status']): string {
|
||||
return s === 'active' ? 'work' : s === 'blocked' ? 'block' : 'queue'
|
||||
}
|
||||
|
||||
function statusLabel(s: TaskItem['status']): string {
|
||||
return s === 'active' ? 'Läuft' : s === 'blocked' ? 'Blocker' : 'Queue'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="taskstrip v2-scroll">
|
||||
<!-- Loading skeleton -->
|
||||
<div class="tstrip">
|
||||
<template v-if="loading">
|
||||
<div v-for="n in 3" :key="'sk-' + n" class="taskcard skeleton" />
|
||||
<div v-for="n in 4" :key="n" class="tcard skeleton"></div>
|
||||
</template>
|
||||
|
||||
<!-- Error -->
|
||||
<div v-else-if="error" class="task-error">
|
||||
<span class="error-icon">⚠</span> {{ error }}
|
||||
</div>
|
||||
<div v-else-if="error" class="tstrip-msg">⚠ {{ error }}</div>
|
||||
<div v-else-if="!tasks.length" class="tstrip-msg">Keine aktiven Tasks</div>
|
||||
|
||||
<!-- Empty -->
|
||||
<div v-else-if="!tasks.length" class="task-empty">
|
||||
No active tasks
|
||||
</div>
|
||||
|
||||
<!-- Tasks -->
|
||||
<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>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="task in tasks.slice(0, 4)"
|
||||
:key="task.id"
|
||||
class="tcard"
|
||||
:class="{ block: task.status === 'blocked' }"
|
||||
>
|
||||
<div class="tcard-row">
|
||||
<span class="pr" :style="{ background: 'rgba(124,108,255,.14)', color: prioColor(task.priority) }">
|
||||
{{ prioLabel(task.priority) }}
|
||||
</span>
|
||||
<span class="dot" :class="dotClass(task.status)"></span>
|
||||
<span class="stl">{{ statusLabel(task.status) }}</span>
|
||||
</div>
|
||||
<div class="tt">{{ task.title }}</div>
|
||||
<div class="ow">{{ task.agent }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.taskstrip {
|
||||
.tstrip {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
padding: 0 16px 14px;
|
||||
overflow-x: auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* ── Task Card ────────────────────────────────────── */
|
||||
.taskcard {
|
||||
min-width: 196px;
|
||||
max-width: 220px;
|
||||
flex: 0 0 auto;
|
||||
.tcard {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 11px 13px;
|
||||
border-radius: 12px;
|
||||
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);
|
||||
.tcard.block {
|
||||
border-color: rgba(251,113,133,.35);
|
||||
background: rgba(251,113,133,.07);
|
||||
}
|
||||
|
||||
.task-pending {
|
||||
border-left: 2px solid var(--st-think);
|
||||
background: rgba(52, 214, 245, 0.04);
|
||||
.tcard-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.pr {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 1px 7px;
|
||||
border-radius: 20px;
|
||||
line-height: 1.5;
|
||||
padding: 1px 6px;
|
||||
border-radius: 5px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.prio-high {
|
||||
background: rgba(255, 106, 106, 0.18);
|
||||
color: var(--st-block);
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.prio-medium {
|
||||
background: rgba(124, 108, 255, 0.14);
|
||||
color: var(--a-mid);
|
||||
}
|
||||
.dot.work { background: var(--st-work); animation: pulse-work 1.8s infinite; }
|
||||
.dot.queue { background: var(--st-queue); }
|
||||
.dot.block { background: var(--st-block); animation: pulse-block 1.4s infinite; }
|
||||
.dot.idle { background: var(--st-idle); }
|
||||
|
||||
.prio-low {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
.stl {
|
||||
margin-left: auto;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: var(--tx-3);
|
||||
}
|
||||
|
||||
/* ── Title ─────────────────────────────────────────── */
|
||||
.task-title {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
.tt {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-top: 7px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
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;
|
||||
.ow {
|
||||
font-size: 10.5px;
|
||||
color: var(--tx-3);
|
||||
font-variant-numeric: tabular-nums;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* ── 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;
|
||||
}
|
||||
|
||||
/* ── Skeleton ─────────────────────────────────── */
|
||||
.taskcard.skeleton {
|
||||
height: 98px;
|
||||
.skeleton {
|
||||
height: 78px;
|
||||
background: var(--glass);
|
||||
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-pulse {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 0.8; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* ── Error ────────────────────────────────────── */
|
||||
.task-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
color: #fda4b0;
|
||||
padding: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.error-icon { flex: 0 0 auto; font-size: 14px; }
|
||||
|
||||
/* ── Empty ────────────────────────────────────── */
|
||||
.task-empty {
|
||||
.tstrip-msg {
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 11px;
|
||||
color: var(--tx-3);
|
||||
font-style: italic;
|
||||
padding: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -26,13 +26,24 @@ export interface ThinkingItem {
|
||||
ts: string
|
||||
}
|
||||
|
||||
/** Dashboard view-model for an agent detail modal (distinct from types/agent.ts AgentDetail) */
|
||||
/** Dashboard view-model for an agent detail modal */
|
||||
export interface AgentDetailData {
|
||||
id: string
|
||||
name: string
|
||||
role: string
|
||||
roleBadge: string
|
||||
model: string
|
||||
status: 'work' | 'think' | 'idle'
|
||||
statusLabel: string
|
||||
task: string | null
|
||||
goal: string | null
|
||||
progress: number
|
||||
elapsed: string
|
||||
next: string
|
||||
tokens: string
|
||||
cost: string
|
||||
think: string | null
|
||||
md?: string
|
||||
tokensToday: number
|
||||
costToday: number
|
||||
workload: number
|
||||
|
||||
@@ -20,7 +20,7 @@ defineProps<{
|
||||
<!-- Status Pill -->
|
||||
<span :class="['pill', connected ? 'live' : 'preview']">
|
||||
<span class="status-dot" :class="connected ? 'on' : 'off'"></span>
|
||||
{{ connected ? 'Verbunden' : 'Preview' }}
|
||||
{{ connected ? 'OpenClaw verbunden' : 'Preview' }}
|
||||
</span>
|
||||
|
||||
<!-- Ask Iris Button -->
|
||||
|
||||
@@ -5,9 +5,12 @@
|
||||
* Sidebar (248px) + Main (flex:1, flex-column)
|
||||
*/
|
||||
import { RouterView } from 'vue-router'
|
||||
import { useAgentStore } from '../stores/agents'
|
||||
import GalaxyBackground from '../components/background/GalaxyBackground.vue'
|
||||
import Sidebar from '../components/layout/Sidebar.vue'
|
||||
import Topbar from '../components/layout/Topbar.vue'
|
||||
|
||||
const agentStore = useAgentStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -15,7 +18,7 @@ import Topbar from '../components/layout/Topbar.vue'
|
||||
<GalaxyBackground />
|
||||
<Sidebar />
|
||||
<main class="nexus-main">
|
||||
<Topbar />
|
||||
<Topbar :connected="agentStore.isConnected" />
|
||||
<div class="nexus-content">
|
||||
<RouterView />
|
||||
</div>
|
||||
@@ -43,7 +46,7 @@ import Topbar from '../components/layout/Topbar.vue'
|
||||
|
||||
.nexus-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 18px 20px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -27,6 +27,11 @@ interface DashboardAgentInfo {
|
||||
progress?: number
|
||||
workload?: number
|
||||
goal?: string | null
|
||||
roleBadge?: string
|
||||
statusLabel?: string
|
||||
elapsed?: string | null
|
||||
think?: string | null
|
||||
next?: string | null
|
||||
}
|
||||
|
||||
interface ModelOption {
|
||||
@@ -35,25 +40,6 @@ interface ModelOption {
|
||||
provider: string
|
||||
}
|
||||
|
||||
/* ── Agent Catalog (static enrichment) ────────────── */
|
||||
|
||||
// Type-safe catalog for static AgentNodeData fields not provided by API
|
||||
interface AgentCatalogEntry {
|
||||
elapsed: string;
|
||||
think: string | null;
|
||||
next: string;
|
||||
}
|
||||
|
||||
const AGENT_CATALOG: Record<string, AgentCatalogEntry> = {
|
||||
iris: { elapsed: '--', think: null, next: 'Standby' },
|
||||
programmer: { elapsed: '--', think: null, next: 'Standby' },
|
||||
developer: { elapsed: '--', think: null, next: 'Standby' },
|
||||
architekt: { elapsed: '--', think: null, next: 'Standby' },
|
||||
reviewer: { elapsed: '--', think: null, next: 'Standby' },
|
||||
executor: { elapsed: '--', think: null, next: 'Standby' },
|
||||
researcher: { elapsed: '--', think: null, next: 'Standby' },
|
||||
}
|
||||
|
||||
/* ── Status Mapping ───────────────────────────────── */
|
||||
|
||||
function mapStatus(isActive: boolean, currentTask: string | null): AgentNodeData['status'] {
|
||||
@@ -78,24 +64,24 @@ function avatarFor(id: string, name: string): string {
|
||||
/* ── Enrich API Agent → AgentNodeData ─────────────── */
|
||||
|
||||
function enrichAgent(api: DashboardAgentInfo): AgentNodeData {
|
||||
const cat = AGENT_CATALOG[api.id] ?? AGENT_CATALOG['reviewer']!
|
||||
const status = mapStatus(api.isActive, api.currentTask)
|
||||
return {
|
||||
id: api.id,
|
||||
name: api.name,
|
||||
role: api.role,
|
||||
roleBadge: api.roleBadge ?? 'badge-slate',
|
||||
model: api.model,
|
||||
avatar: avatarFor(api.id, api.name),
|
||||
status,
|
||||
statusLabel: STATUS_LABELS[status],
|
||||
statusLabel: api.statusLabel ?? STATUS_LABELS[status],
|
||||
task: api.currentTask,
|
||||
goal: api.goal ?? null,
|
||||
progress: api.progress ?? 0,
|
||||
elapsed: cat.elapsed ?? '--',
|
||||
next: cat.next ?? 'Standby',
|
||||
elapsed: api.elapsed ?? '--',
|
||||
next: api.next ?? 'Standby',
|
||||
tokens: '0',
|
||||
cost: '0.00',
|
||||
think: cat.think ?? null,
|
||||
think: api.think ?? null,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,8 +128,19 @@ export function buildAgentDetail(data: AgentNodeData, models: { id: string; alia
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
role: data.role,
|
||||
roleBadge: data.roleBadge || 'badge-slate',
|
||||
model: displayModel,
|
||||
status: data.status === 'block' ? 'idle' : data.status,
|
||||
statusLabel: data.statusLabel,
|
||||
task: data.task,
|
||||
goal: data.goal,
|
||||
progress,
|
||||
elapsed: data.elapsed || '—',
|
||||
next: data.next || '—',
|
||||
tokens: data.tokens || '0',
|
||||
cost: data.cost || '0.00',
|
||||
think: data.think,
|
||||
md: data.md,
|
||||
tokensToday,
|
||||
costToday: costNum,
|
||||
workload: progress,
|
||||
@@ -163,6 +160,7 @@ export const useAgentStore = defineStore('agents', {
|
||||
error: null as string | null,
|
||||
selectedAgentId: null as string | null,
|
||||
refreshInterval: null as ReturnType<typeof setInterval> | null,
|
||||
isConnected: false,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
@@ -211,10 +209,12 @@ export const useAgentStore = defineStore('agents', {
|
||||
async fetchAgents() {
|
||||
try {
|
||||
const res = await apiFetch('/api/dashboard/agents')
|
||||
if (!res.ok) return
|
||||
if (!res.ok) { this.isConnected = false; return }
|
||||
const data: DashboardAgentInfo[] = await res.json()
|
||||
this.agents = data.map(enrichAgent)
|
||||
this.isConnected = true
|
||||
} catch (err) {
|
||||
this.isConnected = false
|
||||
console.warn('[AgentStore] fetchAgents failed', err)
|
||||
}
|
||||
},
|
||||
@@ -262,7 +262,7 @@ export const useAgentStore = defineStore('agents', {
|
||||
this.refreshInterval = setInterval(() => {
|
||||
this.fetchAgents()
|
||||
this.fetchModels()
|
||||
}, 30000)
|
||||
}, 15000)
|
||||
},
|
||||
|
||||
stopPolling() {
|
||||
|
||||
@@ -162,7 +162,9 @@ onUnmounted(() => {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
gap: 18px;
|
||||
padding: 18px 20px;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@@ -171,8 +173,8 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 0 18px 0 0;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user