feat(v2): live sidebar counts, /dashboard = V2 default route, remove V1 dead code
This commit is contained in:
@@ -40,7 +40,7 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<RouterView v-if="route.name === 'Login' || route.name === 'DashboardV2'" />
|
<RouterView v-if="route.name === 'Login' || route.name === 'Dashboard'" />
|
||||||
<div v-else class="shell">
|
<div v-else class="shell">
|
||||||
<AppSidebar
|
<AppSidebar
|
||||||
:active-view="activeView"
|
:active-view="activeView"
|
||||||
|
|||||||
@@ -1,201 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { Clock } from '@lucide/vue'
|
|
||||||
|
|
||||||
type InitiativeStatus = 'healthy' | 'attention' | 'blocked' | 'paused' | 'completed'
|
|
||||||
|
|
||||||
interface Initiative {
|
|
||||||
title: string
|
|
||||||
progress: number
|
|
||||||
openTasks: number
|
|
||||||
blockers: number
|
|
||||||
status: InitiativeStatus
|
|
||||||
lastActivity: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const initiatives = ref<Initiative[]>([
|
|
||||||
{ title: 'OpenClaw Companion', progress: 55, openTasks: 7, blockers: 2, status: 'healthy', lastActivity: 'vor 8 Minuten' },
|
|
||||||
{ title: '2D Idle Game', progress: 42, openTasks: 4, blockers: 0, status: 'healthy', lastActivity: 'vor 2 Stunden' },
|
|
||||||
{ title: 'Deutsch B2', progress: 73, openTasks: 3, blockers: 0, status: 'attention', lastActivity: 'vor 1 Stunde' },
|
|
||||||
{ title: 'Nexus Dashboard', progress: 60, openTasks: 3, blockers: 0, status: 'healthy', lastActivity: 'vor 5 Minuten' },
|
|
||||||
])
|
|
||||||
|
|
||||||
const statusMeta: Record<InitiativeStatus, { label: string; color: string; bg: string }> = {
|
|
||||||
healthy: { label: 'Healthy', color: '#22c55e', bg: 'rgba(34,197,94,0.1)' },
|
|
||||||
attention: { label: 'Needs Attention', color: '#eab308', bg: 'rgba(234,179,8,0.1)' },
|
|
||||||
blocked: { label: 'Blocked', color: '#ef4444', bg: 'rgba(239,68,68,0.1)' },
|
|
||||||
paused: { label: 'Paused', color: '#6b7280', bg: 'rgba(107,114,128,0.1)' },
|
|
||||||
completed: { label: 'Completed', color: '#3b82f6', bg: 'rgba(59,130,246,0.1)' },
|
|
||||||
}
|
|
||||||
|
|
||||||
function onInitiativeClick(title: string) {
|
|
||||||
console.log('[Dashboard] Open initiative:', title)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="initiatives-section">
|
|
||||||
<h2>Active Initiatives</h2>
|
|
||||||
<div class="initiatives-grid">
|
|
||||||
<div
|
|
||||||
v-for="(init, idx) in initiatives"
|
|
||||||
:key="idx"
|
|
||||||
:class="['initiative-card', 'status-' + init.status]"
|
|
||||||
@click="onInitiativeClick(init.title)"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
@keyup.enter="onInitiativeClick(init.title)"
|
|
||||||
>
|
|
||||||
<div class="init-head">
|
|
||||||
<h3>{{ init.title }}</h3>
|
|
||||||
<span
|
|
||||||
class="status-badge"
|
|
||||||
:style="{
|
|
||||||
color: statusMeta[init.status].color,
|
|
||||||
background: statusMeta[init.status].bg,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ statusMeta[init.status].label }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="progress-bar">
|
|
||||||
<div
|
|
||||||
class="progress-fill"
|
|
||||||
:style="{ width: init.progress + '%' }"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<div class="progress-label">{{ init.progress }}%</div>
|
|
||||||
<div class="init-stats">
|
|
||||||
<span>{{ init.openTasks }} offene Aufgaben</span>
|
|
||||||
<span v-if="init.blockers">· {{ init.blockers }} Blocker</span>
|
|
||||||
</div>
|
|
||||||
<div class="init-meta">
|
|
||||||
<Clock :size="11" />
|
|
||||||
<span>Letzte Aktivität {{ init.lastActivity }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.initiatives-section {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 18px;
|
|
||||||
background: rgba(22, 27, 34, 0.8);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.12);
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 4px 24px rgba(0,0,0,0.3);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.initiatives-section:hover {
|
|
||||||
border-color: rgba(139, 124, 246, 0.18);
|
|
||||||
}
|
|
||||||
.initiatives-section h2 {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.initiatives-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.initiative-card {
|
|
||||||
background: rgba(13, 17, 23, 0.5);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.initiative-card:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
border-color: rgba(139, 124, 246, 0.2);
|
|
||||||
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
.initiative-card:focus-visible {
|
|
||||||
outline: 2px solid #a78bfa;
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
.init-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.init-head h3 {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.status-badge {
|
|
||||||
font-size: 8px;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 2px 7px;
|
|
||||||
border-radius: 12px;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex-shrink: 0;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
.progress-bar {
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(139, 124, 246, 0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: linear-gradient(90deg, #a78bfa, #8b5cf6);
|
|
||||||
transition: width 0.5s ease;
|
|
||||||
}
|
|
||||||
.initiative-card.status-attention .progress-fill {
|
|
||||||
background: linear-gradient(90deg, #eab308, #f59e0b);
|
|
||||||
}
|
|
||||||
.initiative-card.status-blocked .progress-fill {
|
|
||||||
background: linear-gradient(90deg, #ef4444, #dc2626);
|
|
||||||
}
|
|
||||||
.progress-label {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #6b7385;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
.init-stats {
|
|
||||||
font-size: 9px;
|
|
||||||
color: #6b7385;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.init-meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
font-size: 9px;
|
|
||||||
color: #6b7385;
|
|
||||||
}
|
|
||||||
.init-meta svg {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.initiatives-grid {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.initiatives-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,229 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted } from 'vue'
|
|
||||||
import { CheckCircle2, Circle, AlertTriangle } from '@lucide/vue'
|
|
||||||
|
|
||||||
interface AgendaItem {
|
|
||||||
text: string
|
|
||||||
time?: string
|
|
||||||
done?: boolean
|
|
||||||
overdue?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const STORAGE_KEY = 'nexus-agenda-done'
|
|
||||||
|
|
||||||
const agendaToday = ref<AgendaItem[]>([
|
|
||||||
{ text: 'Teammeeting', time: '14:00' },
|
|
||||||
{ text: 'Deutsch lernen', time: '18:00' },
|
|
||||||
{ text: 'Steuerunterlagen prüfen' },
|
|
||||||
{ text: 'Dungeon-Balance abschließen' },
|
|
||||||
])
|
|
||||||
|
|
||||||
const agendaTomorrow = ref<AgendaItem[]>([
|
|
||||||
{ text: 'GitHub Issue #23' },
|
|
||||||
{ text: 'Backup überprüfen' },
|
|
||||||
])
|
|
||||||
|
|
||||||
const agendaOverdue = ref<AgendaItem[]>([
|
|
||||||
{ text: 'Hangfire konfigurieren', overdue: true },
|
|
||||||
])
|
|
||||||
|
|
||||||
function loadDoneStates() {
|
|
||||||
try {
|
|
||||||
const raw = localStorage.getItem(STORAGE_KEY)
|
|
||||||
if (!raw) return
|
|
||||||
const keys: string[] = JSON.parse(raw)
|
|
||||||
const set = new Set(keys)
|
|
||||||
const sections = [
|
|
||||||
{ items: agendaToday.value, prefix: 'today' },
|
|
||||||
{ items: agendaTomorrow.value, prefix: 'tomorrow' },
|
|
||||||
{ items: agendaOverdue.value, prefix: 'overdue' },
|
|
||||||
]
|
|
||||||
for (const { items, prefix } of sections) {
|
|
||||||
items.forEach((item, i) => {
|
|
||||||
if (set.has(`${prefix}-${i}`)) item.done = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} catch { /* ignore malformed storage */ }
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveDoneStates() {
|
|
||||||
const keys: string[] = []
|
|
||||||
const sections = [
|
|
||||||
{ items: agendaToday.value, prefix: 'today' },
|
|
||||||
{ items: agendaTomorrow.value, prefix: 'tomorrow' },
|
|
||||||
{ items: agendaOverdue.value, prefix: 'overdue' },
|
|
||||||
]
|
|
||||||
for (const { items, prefix } of sections) {
|
|
||||||
items.forEach((item, i) => {
|
|
||||||
if (item.done) keys.push(`${prefix}-${i}`)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(keys))
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleAgendaItem(item: AgendaItem) {
|
|
||||||
item.done = !item.done
|
|
||||||
saveDoneStates()
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
loadDoneStates()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="agenda-panel">
|
|
||||||
<h2>Agenda</h2>
|
|
||||||
|
|
||||||
<div class="agenda-section">
|
|
||||||
<h3>Heute</h3>
|
|
||||||
<div
|
|
||||||
v-for="(item, idx) in agendaToday"
|
|
||||||
:key="'today-' + idx"
|
|
||||||
:class="['agenda-item', { done: item.done }]"
|
|
||||||
@click="toggleAgendaItem(item)"
|
|
||||||
>
|
|
||||||
<button class="agenda-check">
|
|
||||||
<CheckCircle2 v-if="item.done" :size="14" class="checked" />
|
|
||||||
<Circle v-else :size="14" />
|
|
||||||
</button>
|
|
||||||
<span class="agenda-text">{{ item.text }}</span>
|
|
||||||
<span v-if="item.time" class="agenda-time">{{ item.time }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="agenda-section">
|
|
||||||
<h3>Morgen</h3>
|
|
||||||
<div
|
|
||||||
v-for="(item, idx) in agendaTomorrow"
|
|
||||||
:key="'tomorrow-' + idx"
|
|
||||||
:class="['agenda-item', { done: item.done }]"
|
|
||||||
@click="toggleAgendaItem(item)"
|
|
||||||
>
|
|
||||||
<button class="agenda-check">
|
|
||||||
<CheckCircle2 v-if="item.done" :size="14" class="checked" />
|
|
||||||
<Circle v-else :size="14" />
|
|
||||||
</button>
|
|
||||||
<span class="agenda-text">{{ item.text }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="agenda-section">
|
|
||||||
<h3 class="overdue-heading">
|
|
||||||
<AlertTriangle :size="12" />
|
|
||||||
Überfällig
|
|
||||||
</h3>
|
|
||||||
<div
|
|
||||||
v-for="(item, idx) in agendaOverdue"
|
|
||||||
:key="'overdue-' + idx"
|
|
||||||
class="agenda-item overdue"
|
|
||||||
>
|
|
||||||
<button class="agenda-check">
|
|
||||||
<AlertTriangle :size="14" class="overdue-icon" />
|
|
||||||
</button>
|
|
||||||
<span class="agenda-text">{{ item.text }}</span>
|
|
||||||
<span class="agenda-sub">seit 2 Tagen</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.agenda-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 18px;
|
|
||||||
background: rgba(22, 27, 34, 0.8);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.12);
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 4px 24px rgba(0,0,0,0.3);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.agenda-panel:hover {
|
|
||||||
border-color: rgba(139, 124, 246, 0.18);
|
|
||||||
}
|
|
||||||
.agenda-panel h2 {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.agenda-section h3 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #6b7385;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
margin: 0 0 4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
border-bottom: 1px solid rgba(139, 124, 246, 0.06);
|
|
||||||
}
|
|
||||||
.overdue-heading {
|
|
||||||
color: #ef4444 !important;
|
|
||||||
border-bottom-color: rgba(239, 68, 68, 0.15) !important;
|
|
||||||
}
|
|
||||||
.agenda-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 7px;
|
|
||||||
padding: 5px 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
.agenda-item:hover {
|
|
||||||
background: rgba(139, 124, 246, 0.04);
|
|
||||||
}
|
|
||||||
.agenda-item.done {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
.agenda-item.done .agenda-text {
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
.agenda-check {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: #6b7385;
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.agenda-check .checked {
|
|
||||||
color: #22c55e;
|
|
||||||
}
|
|
||||||
.overdue .overdue-icon {
|
|
||||||
color: #ef4444;
|
|
||||||
}
|
|
||||||
.agenda-text {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 10.5px;
|
|
||||||
color: #7e8799;
|
|
||||||
}
|
|
||||||
.agenda-time {
|
|
||||||
font-size: 9px;
|
|
||||||
color: #6b7385;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.agenda-sub {
|
|
||||||
font-size: 8px;
|
|
||||||
color: #ef4444;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.agenda-item.overdue {
|
|
||||||
background: rgba(239, 68, 68, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.agenda-panel {
|
|
||||||
order: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,536 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted } from 'vue'
|
|
||||||
import { X, ExternalLink } from '@lucide/vue'
|
|
||||||
import type { AgentNodeData } from '../../composables/useDashboardData'
|
|
||||||
import { useToast } from '../../composables/useToast'
|
|
||||||
import Button from '@/components/ui/button/Button.vue'
|
|
||||||
import Badge from '@/components/ui/Badge.vue'
|
|
||||||
import Select from '@/components/ui/Select.vue'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
agent: AgentNodeData
|
|
||||||
runtime: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
close: []
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const toast = useToast()
|
|
||||||
|
|
||||||
interface ModelOption {
|
|
||||||
id: string
|
|
||||||
name: string
|
|
||||||
provider: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ActivityEntry {
|
|
||||||
time: string
|
|
||||||
text: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const availableModels = ref<ModelOption[]>([])
|
|
||||||
const selectedModel = ref('')
|
|
||||||
const currentModel = ref('')
|
|
||||||
const saving = ref(false)
|
|
||||||
|
|
||||||
const activityEntries = ref<ActivityEntry[]>([])
|
|
||||||
const activityLoaded = ref(false)
|
|
||||||
|
|
||||||
async function loadModels() {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/api/dashboard/models', { credentials: 'include' })
|
|
||||||
if (res.ok) {
|
|
||||||
availableModels.value = await res.json()
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// silent
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadCurrentModel() {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/dashboard/agents/${props.agent.id}/model`, { credentials: 'include' })
|
|
||||||
if (res.ok) {
|
|
||||||
const data = await res.json()
|
|
||||||
selectedModel.value = data.model
|
|
||||||
currentModel.value = data.model
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// silent
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveModel() {
|
|
||||||
saving.value = true
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/dashboard/agents/${props.agent.id}/model`, {
|
|
||||||
method: 'PUT',
|
|
||||||
credentials: 'include',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ model: selectedModel.value }),
|
|
||||||
})
|
|
||||||
if (res.ok) {
|
|
||||||
currentModel.value = selectedModel.value
|
|
||||||
toast.success('Model updated successfully')
|
|
||||||
} else {
|
|
||||||
toast.error('Failed to update model')
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
toast.error('Connection error')
|
|
||||||
} finally {
|
|
||||||
saving.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadActivity() {
|
|
||||||
try {
|
|
||||||
const res = await fetch(`/api/dashboard/agents/${props.agent.id}/activity?limit=5`, { credentials: 'include' })
|
|
||||||
if (res.ok) {
|
|
||||||
activityEntries.value = await res.json()
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// silent — fallback to empty
|
|
||||||
} finally {
|
|
||||||
activityLoaded.value = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await loadModels()
|
|
||||||
await loadCurrentModel()
|
|
||||||
await loadActivity()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Teleport to="body">
|
|
||||||
<div class="modal-overlay" @click.self="$emit('close')">
|
|
||||||
<div class="modal-card" :style="{ '--agent-color': agent.color }">
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="modal-header">
|
|
||||||
<div class="modal-title-row">
|
|
||||||
<div class="modal-avatar" :style="{ background: `${agent.color}18`, color: agent.color }">
|
|
||||||
<span class="avatar-letter">{{ agent.name.charAt(0) }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2>{{ agent.name }}</h2>
|
|
||||||
<span class="modal-role">{{ agent.role }}</span>
|
|
||||||
<a :href="`/agents/${agent.id}`" class="agent-link-btn" title="Open agent config">
|
|
||||||
<ExternalLink :size="12" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button variant="ghost" size="icon" class="h-8 w-8" @click="$emit('close')" aria-label="Close">
|
|
||||||
<X :size="16" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Status -->
|
|
||||||
<section class="modal-section">
|
|
||||||
<h3 class="section-label">Status</h3>
|
|
||||||
<div class="status-row">
|
|
||||||
<Badge
|
|
||||||
:variant="agent.active ? 'default' : 'secondary'"
|
|
||||||
:class="agent.active ? 'bg-[rgba(81,212,154,0.1)] text-[#51d49a] border-[rgba(81,212,154,0.3)]' : 'bg-[rgba(107,115,133,0.08)] text-[#6b7385] border-[rgba(107,115,133,0.2)]'"
|
|
||||||
>
|
|
||||||
<span class="status-dot" :class="{ active: agent.active }" />
|
|
||||||
{{ agent.active ? 'Active' : 'Idle' }}
|
|
||||||
</Badge>
|
|
||||||
<span v-if="agent.active" class="footer-badge">Runtime: {{ runtime }}</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Description -->
|
|
||||||
<p class="modal-desc">{{ agent.description }}</p>
|
|
||||||
|
|
||||||
<!-- Tags -->
|
|
||||||
<section class="modal-section">
|
|
||||||
<h3 class="section-label">Tags</h3>
|
|
||||||
<div class="modal-tags-row">
|
|
||||||
<Badge
|
|
||||||
v-for="tag in agent.tags"
|
|
||||||
:key="tag"
|
|
||||||
variant="outline"
|
|
||||||
:style="{ background: `${agent.color}18`, color: agent.color, borderColor: `${agent.color}30` }"
|
|
||||||
>
|
|
||||||
{{ tag }}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Current Task -->
|
|
||||||
<section class="modal-section">
|
|
||||||
<h3 class="section-label">
|
|
||||||
Current Task
|
|
||||||
<span v-if="agent.active" class="thinking-indicator">
|
|
||||||
<span class="thinking-dots-inline">
|
|
||||||
<span class="tdot"></span>
|
|
||||||
<span class="tdot"></span>
|
|
||||||
<span class="tdot"></span>
|
|
||||||
</span>
|
|
||||||
Thinking…
|
|
||||||
</span>
|
|
||||||
</h3>
|
|
||||||
<p class="section-value">
|
|
||||||
{{ agent.currentTask }}
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Recent Activity -->
|
|
||||||
<section class="modal-section">
|
|
||||||
<h3 class="section-label">Recent Activity</h3>
|
|
||||||
<div v-if="!activityLoaded" class="activity-placeholder">Loading…</div>
|
|
||||||
<div v-else-if="activityEntries.length === 0" class="activity-placeholder">No recent activity</div>
|
|
||||||
<div v-else class="activity-list">
|
|
||||||
<div v-for="(entry, idx) in activityEntries" :key="idx" class="activity-item">
|
|
||||||
<span class="activity-time">{{ entry.time }}</span>
|
|
||||||
<span class="activity-text">{{ entry.text.length > 100 ? entry.text.slice(0, 100) + '…' : entry.text }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Goal + Progress -->
|
|
||||||
<section class="modal-section">
|
|
||||||
<h3 class="section-label">Goal</h3>
|
|
||||||
<p class="section-value">{{ agent.goal }}</p>
|
|
||||||
<div class="progress-row">
|
|
||||||
<span class="progress-pct">{{ agent.progress }}%</span>
|
|
||||||
<div class="progress-track">
|
|
||||||
<div class="progress-fill" :style="{ width: `${agent.progress}%` }"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Model -->
|
|
||||||
<section class="modal-section">
|
|
||||||
<h3 class="section-label">Model</h3>
|
|
||||||
<div class="model-select-row">
|
|
||||||
<Select v-model="selectedModel" class="flex-1 text-xs border-[#a78bfa]">
|
|
||||||
<option v-for="m in availableModels" :key="m.id" :value="m.id">
|
|
||||||
{{ m.name }} ({{ m.provider }})
|
|
||||||
</option>
|
|
||||||
</Select>
|
|
||||||
<Button
|
|
||||||
variant="default"
|
|
||||||
size="sm"
|
|
||||||
class="bg-[#a78bfa] hover:bg-[#c4b5fd]"
|
|
||||||
:disabled="saving || selectedModel === currentModel"
|
|
||||||
@click="saveModel"
|
|
||||||
>
|
|
||||||
{{ saving ? 'Saving...' : 'Save' }}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Footer Stats -->
|
|
||||||
<div class="modal-footer">
|
|
||||||
<Badge :class="agent.active ? 'bg-[rgba(81,212,154,0.06)] text-[#51d49a] border-[rgba(81,212,154,0.25)]' : 'bg-[rgba(107,115,133,0.04)] text-[#6b7385] border-[rgba(107,115,133,0.15)]'">
|
|
||||||
{{ agent.active ? '● Active' : '○ Idle' }}
|
|
||||||
</Badge>
|
|
||||||
<span v-if="agent.active" class="footer-badge">{{ runtime }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
padding: 24px;
|
|
||||||
background: rgba(0, 0, 0, 0.55);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
animation: overlay-in 0.2s ease;
|
|
||||||
}
|
|
||||||
@keyframes overlay-in {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-card {
|
|
||||||
width: min(480px, 100%);
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 24px;
|
|
||||||
background: rgba(18, 22, 30, 0.96);
|
|
||||||
border: 1px solid color-mix(in srgb, var(--agent-color) 25%, transparent);
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
|
|
||||||
animation: card-in 0.25s ease;
|
|
||||||
backdrop-filter: blur(16px);
|
|
||||||
-webkit-backdrop-filter: blur(16px);
|
|
||||||
}
|
|
||||||
@keyframes card-in {
|
|
||||||
from { opacity: 0; transform: translateY(12px) scale(0.98); }
|
|
||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
||||||
}
|
|
||||||
.modal-card::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
}
|
|
||||||
.modal-card::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.modal-card::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(139, 124, 246, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.modal-title-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 14px;
|
|
||||||
}
|
|
||||||
.modal-avatar {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
border-radius: 12px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.avatar-letter {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.modal-title-row h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.modal-role {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #6b7385;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.agent-link-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-left: 4px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: transparent;
|
|
||||||
color: #6b7385;
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
text-decoration: none;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.agent-link-btn:hover {
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--agent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-desc {
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 1.55;
|
|
||||||
color: #7e8799;
|
|
||||||
margin: 0 0 18px;
|
|
||||||
padding-bottom: 14px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-section {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.section-label {
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
color: #6b7385;
|
|
||||||
margin: 0 0 6px;
|
|
||||||
}
|
|
||||||
.section-value {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #e8eaf0;
|
|
||||||
line-height: 1.4;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Status */
|
|
||||||
.status-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.status-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #6b7385;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.status-dot.active {
|
|
||||||
background: #51d49a;
|
|
||||||
box-shadow: 0 0 8px rgba(81, 212, 154, 0.6);
|
|
||||||
animation: pulse-dot 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes pulse-dot {
|
|
||||||
0%, 100% { opacity: 1; transform: scale(1); }
|
|
||||||
50% { opacity: 0.6; transform: scale(1.2); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tags */
|
|
||||||
.modal-tags-row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Progress */
|
|
||||||
.progress-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
.progress-pct {
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #7e8799;
|
|
||||||
flex-shrink: 0;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
.progress-track {
|
|
||||||
flex: 1;
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(255, 255, 255, 0.06);
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.progress-fill {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: var(--agent-color);
|
|
||||||
transition: width 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Thinking Indicator */
|
|
||||||
.thinking-indicator {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: none;
|
|
||||||
letter-spacing: normal;
|
|
||||||
color: #a78bfa;
|
|
||||||
margin-left: 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.thinking-dots-inline {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.thinking-dots-inline .tdot {
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #a78bfa;
|
|
||||||
animation: thinking-bounce 1.2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
.thinking-dots-inline .tdot:nth-child(2) {
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
}
|
|
||||||
.thinking-dots-inline .tdot:nth-child(3) {
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
@keyframes thinking-bounce {
|
|
||||||
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
|
||||||
40% { transform: scale(1); opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Recent Activity */
|
|
||||||
.activity-placeholder {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #6b7385;
|
|
||||||
font-style: italic;
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
.activity-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
max-height: 160px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.activity-list::-webkit-scrollbar {
|
|
||||||
width: 4px;
|
|
||||||
}
|
|
||||||
.activity-list::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.activity-list::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(139, 124, 246, 0.15);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
.activity-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
padding: 6px 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.04);
|
|
||||||
}
|
|
||||||
.activity-time {
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #6b7385;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
.activity-text {
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 1.45;
|
|
||||||
color: #c4c8d4;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
.modal-footer {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
padding-top: 14px;
|
|
||||||
margin-top: 6px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
}
|
|
||||||
.footer-badge {
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
color: #7e8799;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Model Selector */
|
|
||||||
.model-select-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { Bot } from '@lucide/vue'
|
|
||||||
import type { ChatMessage } from '../../composables/useDashboardData'
|
|
||||||
import { renderMarkdown } from '../../utils/markdown'
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
messages: ChatMessage[]
|
|
||||||
irisBusy: boolean
|
|
||||||
elapsedSeconds: number
|
|
||||||
}>()
|
|
||||||
|
|
||||||
function formatTime(ts: number): string {
|
|
||||||
const d = new Date(ts)
|
|
||||||
return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex flex-col gap-2.5">
|
|
||||||
<div
|
|
||||||
v-for="msg in messages"
|
|
||||||
:key="msg.id"
|
|
||||||
:class="['flex gap-2', msg.sender === 'user' ? 'justify-end' : '']"
|
|
||||||
>
|
|
||||||
<div v-if="msg.sender === 'iris'" class="flex-shrink-0 self-end w-6 h-6 grid place-items-center rounded-lg bg-[rgba(167,139,250,0.15)] text-[#a78bfa]">
|
|
||||||
<Bot :size="12" />
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'px-3 py-2 rounded-lg text-[10.5px] leading-[1.45] max-w-[85%]',
|
|
||||||
msg.sender === 'iris'
|
|
||||||
? 'bg-[rgba(167,139,250,0.08)] border border-[rgba(167,139,250,0.1)] text-[#d4d8e0]'
|
|
||||||
: 'bg-[rgba(59,130,246,0.12)] border border-[rgba(59,130,246,0.15)] text-[#e8eaf0]',
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<div v-if="msg.sender === 'iris'" v-html="renderMarkdown(msg.text)" class="msg-md"></div>
|
|
||||||
<p v-else class="m-0">{{ msg.text }}</p>
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'text-[8px] mt-1 opacity-50',
|
|
||||||
msg.sender === 'user' ? 'text-right' : 'text-left',
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
{{ formatTime(msg.timestamp) }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Busy Bubble -->
|
|
||||||
<div v-if="irisBusy" class="flex gap-2 max-w-[75%]">
|
|
||||||
<div class="flex-shrink-0 self-end w-6 h-6 grid place-items-center rounded-lg bg-[rgba(167,139,250,0.15)] text-[#a78bfa]">
|
|
||||||
<Bot :size="12" />
|
|
||||||
</div>
|
|
||||||
<div class="px-3 py-2 rounded-lg text-[10.5px] bg-[rgba(167,139,250,0.08)] border border-[rgba(167,139,250,0.18)] text-[#c4c8d4]">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<span class="w-[7px] h-[7px] rounded-full bg-[#a78bfa] animate-pulse flex-shrink-0" />
|
|
||||||
<span>Denkt nach...</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-[8px] mt-1 opacity-50">läuft seit {{ elapsedSeconds }}s</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="messages.length === 0" class="flex-1 grid place-items-center text-center py-8">
|
|
||||||
<p class="text-[10px] text-[#6b7385] max-w-[180px] leading-[1.4] m-0">
|
|
||||||
No messages yet. Start a conversation with Iris.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.msg-md { line-height: 1.55; }
|
|
||||||
.msg-md :deep(p) { margin: 0 0 6px 0; }
|
|
||||||
.msg-md :deep(p:last-child) { margin-bottom: 0; }
|
|
||||||
.msg-md :deep(strong) { color: #e8eaf0; font-weight: 700; }
|
|
||||||
.msg-md :deep(em) { font-style: italic; color: #c4c8d4; }
|
|
||||||
.msg-md :deep(code) { background: rgba(0,0,0,0.3); padding: 1px 5px; border-radius: 4px; font-family: 'JetBrains Mono','Fira Code',monospace; font-size: 10px; color: #f472b6; }
|
|
||||||
.msg-md :deep(pre) { background: rgba(0,0,0,0.35); padding: 8px 10px; border-radius: 8px; overflow-x: auto; margin: 6px 0; border: 1px solid rgba(255,255,255,0.04); }
|
|
||||||
.msg-md :deep(pre code) { background: none; padding: 0; font-size: 10px; color: #d4d8e0; }
|
|
||||||
.msg-md :deep(a) { color: #a78bfa; text-decoration: underline; text-underline-offset: 2px; }
|
|
||||||
.msg-md :deep(a:hover) { color: #c4b5fd; }
|
|
||||||
.msg-md :deep(ul) { margin: 4px 0; padding-left: 16px; }
|
|
||||||
.msg-md :deep(li) { margin: 2px 0; }
|
|
||||||
.msg-md :deep(h1), .msg-md :deep(h2), .msg-md :deep(h3), .msg-md :deep(h4), .msg-md :deep(h5), .msg-md :deep(h6) { margin: 8px 0 4px 0; color: #e8eaf0; font-weight: 700; line-height: 1.3; }
|
|
||||||
.msg-md :deep(h1) { font-size: 13px; }
|
|
||||||
.msg-md :deep(h2) { font-size: 12px; }
|
|
||||||
.msg-md :deep(h3) { font-size: 11px; }
|
|
||||||
.msg-md :deep(h4), .msg-md :deep(h5), .msg-md :deep(h6) { font-size: 10.5px; }
|
|
||||||
.msg-md :deep(hr) { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }
|
|
||||||
</style>
|
|
||||||
@@ -1,291 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, nextTick, watch, onUnmounted } from 'vue'
|
|
||||||
import { Bot, Send, Maximize2 } from '@lucide/vue'
|
|
||||||
import type { ChatMessage } from '../../composables/useDashboardData'
|
|
||||||
import { useDashboardData } from '../../composables/useDashboardData'
|
|
||||||
import Button from '@/components/ui/button/Button.vue'
|
|
||||||
import Textarea from '@/components/ui/Textarea.vue'
|
|
||||||
import Dialog from '@/components/ui/Dialog.vue'
|
|
||||||
import DialogHeader from '@/components/ui/DialogHeader.vue'
|
|
||||||
import DialogTitle from '@/components/ui/DialogTitle.vue'
|
|
||||||
import ChatMessageList from './ChatMessageList.vue'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
messages: ChatMessage[]
|
|
||||||
irisBusy: boolean
|
|
||||||
irisFocus: string
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const { sendChatMessage, busySince } = useDashboardData()
|
|
||||||
|
|
||||||
const elapsedSeconds = ref(0)
|
|
||||||
let elapsedInterval: ReturnType<typeof setInterval> | null = null
|
|
||||||
|
|
||||||
function startElapsedTimer(): void {
|
|
||||||
stopElapsedTimer()
|
|
||||||
const update = () => {
|
|
||||||
if (busySince.value > 0) {
|
|
||||||
elapsedSeconds.value = Math.floor((Date.now() - busySince.value) / 1000)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
update()
|
|
||||||
elapsedInterval = setInterval(update, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopElapsedTimer(): void {
|
|
||||||
if (elapsedInterval) {
|
|
||||||
clearInterval(elapsedInterval)
|
|
||||||
elapsedInterval = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(() => props.irisBusy, (busy) => {
|
|
||||||
if (busy) {
|
|
||||||
startElapsedTimer()
|
|
||||||
} else {
|
|
||||||
stopElapsedTimer()
|
|
||||||
elapsedSeconds.value = 0
|
|
||||||
}
|
|
||||||
}, { immediate: true })
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
stopElapsedTimer()
|
|
||||||
})
|
|
||||||
|
|
||||||
const inputText = ref('')
|
|
||||||
const chatListRef = ref<HTMLElement | null>(null)
|
|
||||||
const chatModalListRef = ref<HTMLElement | null>(null)
|
|
||||||
const dialogOpen = ref(false)
|
|
||||||
|
|
||||||
function sendMessage(): void {
|
|
||||||
if (!inputText.value.trim()) return
|
|
||||||
sendChatMessage(inputText.value)
|
|
||||||
inputText.value = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.messages.length,
|
|
||||||
async () => {
|
|
||||||
await nextTick()
|
|
||||||
const el = dialogOpen.value ? chatModalListRef.value : chatListRef.value
|
|
||||||
if (el) {
|
|
||||||
el.scrollTop = el.scrollHeight
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- Inline Chat Panel -->
|
|
||||||
<div class="chat-panel">
|
|
||||||
<div class="chat-header">
|
|
||||||
<div class="chat-header-left">
|
|
||||||
<Bot :size="16" class="text-[#a78bfa]" />
|
|
||||||
<h2>Iris Chat</h2>
|
|
||||||
</div>
|
|
||||||
<Button variant="ghost" size="icon" class="h-7 w-7" @click="dialogOpen = true" title="Open larger chat">
|
|
||||||
<Maximize2 :size="14" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Focus Bar -->
|
|
||||||
<div v-if="irisBusy && irisFocus" class="focus-bar">
|
|
||||||
<span class="focus-label">Current Focus</span>
|
|
||||||
<span class="focus-text">{{ irisFocus }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Messages -->
|
|
||||||
<div ref="chatListRef" class="chat-messages">
|
|
||||||
<ChatMessageList
|
|
||||||
:messages="messages"
|
|
||||||
:iris-busy="irisBusy"
|
|
||||||
:elapsed-seconds="elapsedSeconds"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Input -->
|
|
||||||
<div class="chat-input-row">
|
|
||||||
<Textarea
|
|
||||||
v-model="inputText"
|
|
||||||
rows="1"
|
|
||||||
placeholder="Type a message..."
|
|
||||||
class="min-h-0 h-9 resize-none text-xs bg-black/30 border-[rgba(255,255,255,0.08)] text-[#e8eaf0] placeholder:text-[#6b7385] text-[10px]"
|
|
||||||
@keyup.enter.exact="sendMessage"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
size="icon"
|
|
||||||
class="h-8 w-8 bg-[#a78bfa] hover:bg-[#c4b5fd] flex-shrink-0"
|
|
||||||
:disabled="!inputText.trim()"
|
|
||||||
@click="sendMessage"
|
|
||||||
aria-label="Send"
|
|
||||||
>
|
|
||||||
<Send :size="14" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Expanded Chat Dialog -->
|
|
||||||
<Dialog :open="dialogOpen" class="sm:max-w-[820px] sm:h-[78vh] p-0 gap-0" @update:open="dialogOpen = $event">
|
|
||||||
<template #default>
|
|
||||||
<DialogHeader class="flex-row items-center justify-between px-5 py-4 border-b border-[rgba(255,255,255,0.06)]">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<Bot :size="18" class="text-[#a78bfa]" />
|
|
||||||
<DialogTitle>Iris Chat</DialogTitle>
|
|
||||||
</div>
|
|
||||||
<Button variant="ghost" size="icon" class="h-7 w-7" @click="dialogOpen = false" aria-label="Close">
|
|
||||||
<span class="text-lg leading-none">×</span>
|
|
||||||
</Button>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div v-if="irisBusy && irisFocus" class="focus-bar !px-5">
|
|
||||||
<span class="focus-label">Current Focus</span>
|
|
||||||
<span class="focus-text">{{ irisFocus }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ref="chatModalListRef" class="flex-1 overflow-y-auto px-5 py-4">
|
|
||||||
<ChatMessageList
|
|
||||||
:messages="messages"
|
|
||||||
:iris-busy="irisBusy"
|
|
||||||
:elapsed-seconds="elapsedSeconds"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-2 px-4 py-3 border-t border-[rgba(255,255,255,0.06)]">
|
|
||||||
<Textarea
|
|
||||||
v-model="inputText"
|
|
||||||
rows="1"
|
|
||||||
placeholder="Type a message..."
|
|
||||||
class="min-h-0 h-10 resize-none text-sm bg-black/30 border-[rgba(255,255,255,0.08)] text-[#e8eaf0] placeholder:text-[#6b7385]"
|
|
||||||
@keyup.enter.exact="sendMessage"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
size="icon"
|
|
||||||
class="h-10 w-10 bg-[#a78bfa] hover:bg-[#c4b5fd] flex-shrink-0"
|
|
||||||
:disabled="!inputText.trim()"
|
|
||||||
@click="sendMessage"
|
|
||||||
aria-label="Send"
|
|
||||||
>
|
|
||||||
<Send :size="18" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chat-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
min-height: 360px;
|
|
||||||
max-height: 480px;
|
|
||||||
background: rgba(22, 27, 34, 0.75);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.12);
|
|
||||||
border-radius: 16px;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
|
||||||
transition: border-color 0.2s ease;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.chat-panel:hover {
|
|
||||||
border-color: rgba(139, 124, 246, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 14px 16px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
}
|
|
||||||
.chat-header-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.chat-header h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Focus Bar */
|
|
||||||
.focus-bar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 3px;
|
|
||||||
padding: 8px 16px;
|
|
||||||
background: rgba(234, 179, 8, 0.04);
|
|
||||||
border-bottom: 1px solid rgba(234, 179, 8, 0.08);
|
|
||||||
}
|
|
||||||
.focus-label {
|
|
||||||
font-size: 8px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
color: #eab308;
|
|
||||||
}
|
|
||||||
.focus-text {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #7e8799;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Messages */
|
|
||||||
.chat-messages {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
.chat-messages::-webkit-scrollbar {
|
|
||||||
width: 5px;
|
|
||||||
}
|
|
||||||
.chat-messages::-webkit-scrollbar-track {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.chat-messages::-webkit-scrollbar-thumb {
|
|
||||||
background: rgba(139, 124, 246, 0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Input */
|
|
||||||
.chat-input-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Mobile: compact mode ── */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.chat-panel {
|
|
||||||
min-height: 280px;
|
|
||||||
max-height: 360px;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
.chat-header {
|
|
||||||
padding: 10px 12px;
|
|
||||||
}
|
|
||||||
.chat-header h2 {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.chat-messages {
|
|
||||||
padding: 8px 12px;
|
|
||||||
}
|
|
||||||
.chat-input-row {
|
|
||||||
padding: 8px 10px;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.focus-bar {
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
.focus-label {
|
|
||||||
font-size: 7px;
|
|
||||||
}
|
|
||||||
.focus-text {
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,260 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import { ChevronLeft, ChevronRight, X } from '@lucide/vue'
|
|
||||||
import type { FeedEntry } from '../../composables/useDashboardData'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
entries: FeedEntry[]
|
|
||||||
modelValue: boolean
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
'update:modelValue': [value: boolean]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const selectedDayOffset = ref(0) // 0 = today, -1 = yesterday, etc.
|
|
||||||
|
|
||||||
function close() {
|
|
||||||
emit('update:modelValue', false)
|
|
||||||
}
|
|
||||||
|
|
||||||
function dayLabel(offset: number): string {
|
|
||||||
if (offset === 0) return 'Heute'
|
|
||||||
if (offset === -1) return 'Gestern'
|
|
||||||
if (offset === -2) return 'Vorgestern'
|
|
||||||
const d = new Date()
|
|
||||||
d.setDate(d.getDate() + offset)
|
|
||||||
return d.toLocaleDateString('de-DE', { weekday: 'long', day: 'numeric', month: 'long' })
|
|
||||||
}
|
|
||||||
|
|
||||||
function navigateDay(dir: -1 | 1) {
|
|
||||||
const next = selectedDayOffset.value + dir
|
|
||||||
if (next >= -6 && next <= 0) {
|
|
||||||
selectedDayOffset.value = next
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredEntries = computed(() => {
|
|
||||||
const targetDate = new Date()
|
|
||||||
targetDate.setDate(targetDate.getDate() + selectedDayOffset.value)
|
|
||||||
const targetStr = targetDate.toISOString().slice(0, 10)
|
|
||||||
return props.entries.filter(e => e.timestamp.slice(0, 10) === targetStr)
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Teleport to="body">
|
|
||||||
<div v-if="modelValue" class="feed-modal-overlay" @click.self="close">
|
|
||||||
<div class="feed-modal-card">
|
|
||||||
<div class="feed-modal-header">
|
|
||||||
<h2 class="feed-modal-title">Operations Log</h2>
|
|
||||||
<button class="feed-modal-close-btn" @click="close" aria-label="Close">
|
|
||||||
<X :size="16" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feed-modal-nav">
|
|
||||||
<button
|
|
||||||
class="feed-nav-btn"
|
|
||||||
:disabled="selectedDayOffset <= -6"
|
|
||||||
@click="navigateDay(-1)"
|
|
||||||
aria-label="Previous day"
|
|
||||||
>
|
|
||||||
<ChevronLeft :size="14" />
|
|
||||||
</button>
|
|
||||||
<span class="feed-nav-label">{{ dayLabel(selectedDayOffset) }}</span>
|
|
||||||
<button
|
|
||||||
class="feed-nav-btn"
|
|
||||||
:disabled="selectedDayOffset >= 0"
|
|
||||||
@click="navigateDay(1)"
|
|
||||||
aria-label="Next day"
|
|
||||||
>
|
|
||||||
<ChevronRight :size="14" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feed-modal-entries">
|
|
||||||
<div v-if="filteredEntries.length === 0" class="feed-modal-empty">
|
|
||||||
Keine Einträge für diesen Tag.
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="(entry, idx) in filteredEntries"
|
|
||||||
:key="entry.timestamp + '-' + idx"
|
|
||||||
class="feed-modal-entry"
|
|
||||||
>
|
|
||||||
<span class="feed-time">{{ entry.time }}</span>
|
|
||||||
<span class="feed-bullet">·</span>
|
|
||||||
<span class="feed-agent" :class="'agent-' + entry.agent.toLowerCase()">
|
|
||||||
{{ entry.agent }}
|
|
||||||
</span>
|
|
||||||
<span class="feed-action">{{ entry.action }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.feed-modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
padding: 20px;
|
|
||||||
animation: feed-overlay-in 0.2s ease;
|
|
||||||
}
|
|
||||||
@keyframes feed-overlay-in {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-modal-card {
|
|
||||||
background: #161b22;
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.15);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 24px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 520px;
|
|
||||||
max-height: 80vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
|
|
||||||
animation: feed-card-in 0.25s ease;
|
|
||||||
}
|
|
||||||
@keyframes feed-card-in {
|
|
||||||
from { opacity: 0; transform: translateY(12px) scale(0.98); }
|
|
||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-modal-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.feed-modal-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.feed-modal-close-btn {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
border: none;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #7e8799;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
.feed-modal-close-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-modal-nav {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.feed-nav-btn {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.15);
|
|
||||||
background: rgba(139, 124, 246, 0.08);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: #a78bfa;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
.feed-nav-btn:hover:not(:disabled) {
|
|
||||||
background: rgba(139, 124, 246, 0.16);
|
|
||||||
border-color: rgba(139, 124, 246, 0.3);
|
|
||||||
}
|
|
||||||
.feed-nav-btn:disabled {
|
|
||||||
opacity: 0.3;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
.feed-nav-label {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #d1d5db;
|
|
||||||
min-width: 100px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-modal-entries {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
overflow-y: auto;
|
|
||||||
max-height: 50vh;
|
|
||||||
padding-right: 4px;
|
|
||||||
}
|
|
||||||
.feed-modal-empty {
|
|
||||||
text-align: center;
|
|
||||||
padding: 24px 0;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #6b7385;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-modal-entry {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 5px 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 9.5px;
|
|
||||||
line-height: 1.3;
|
|
||||||
transition: background 0.15s;
|
|
||||||
}
|
|
||||||
.feed-modal-entry:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-time {
|
|
||||||
color: #6b7385;
|
|
||||||
flex-shrink: 0;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
.feed-bullet {
|
|
||||||
color: #6b7385;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.feed-agent {
|
|
||||||
font-weight: 600;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.agent-iris {
|
|
||||||
color: #a78bfa;
|
|
||||||
}
|
|
||||||
.agent-developer {
|
|
||||||
color: #3b82f6;
|
|
||||||
}
|
|
||||||
.agent-devops {
|
|
||||||
color: #eab308;
|
|
||||||
}
|
|
||||||
.agent-researcher {
|
|
||||||
color: #22c55e;
|
|
||||||
}
|
|
||||||
.agent-reviewer {
|
|
||||||
color: #a855f7;
|
|
||||||
}
|
|
||||||
.feed-action {
|
|
||||||
color: #7e8799;
|
|
||||||
white-space: normal;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,323 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref } from 'vue'
|
|
||||||
import { Bot, Sparkles, MessageSquareText, ListTodo, Zap, FileText, Send, Lightbulb } from '@lucide/vue'
|
|
||||||
import { useTime } from '../../composables/useTime'
|
|
||||||
import { useOperationsStore } from '../../stores/operations'
|
|
||||||
|
|
||||||
interface Suggestion {
|
|
||||||
text: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const { greeting } = useTime()
|
|
||||||
const store = useOperationsStore()
|
|
||||||
|
|
||||||
const chatInput = ref('')
|
|
||||||
|
|
||||||
const meters = computed(() => {
|
|
||||||
const tasks = store.snapshot.tasks
|
|
||||||
return {
|
|
||||||
openTasks: store.snapshot.metrics.queuedTasks,
|
|
||||||
blocked: store.snapshot.metrics.incidents,
|
|
||||||
critical: tasks.filter(t => t.state === 'Blocked').length,
|
|
||||||
active: tasks.filter(t => t.state === 'In progress').length,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const suggestions = ref<Suggestion[]>([
|
|
||||||
{ text: 'Du solltest zuerst das Dungeon-System abschließen.' },
|
|
||||||
{ text: 'Die Dokumentation wurde seit 3 Tagen nicht aktualisiert.' },
|
|
||||||
{ text: 'Das Projekt OpenClaw benötigt Aufmerksamkeit.' },
|
|
||||||
])
|
|
||||||
|
|
||||||
function sendChat() {
|
|
||||||
if (!chatInput.value.trim()) return
|
|
||||||
console.log('[Iris] Chat received:', chatInput.value)
|
|
||||||
chatInput.value = ''
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<aside class="iris-panel">
|
|
||||||
<div class="iris-profile">
|
|
||||||
<div class="iris-avatar">
|
|
||||||
<Bot :size="32" />
|
|
||||||
</div>
|
|
||||||
<div class="iris-name-block">
|
|
||||||
<h2>Iris</h2>
|
|
||||||
<span class="iris-role">Chief of Staff</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="iris-greeting">{{ greeting }} Bao.</p>
|
|
||||||
<p class="iris-status">Du hast heute <strong>4 wichtige Punkte.</strong></p>
|
|
||||||
|
|
||||||
<div class="meters">
|
|
||||||
<div class="meter-item">
|
|
||||||
<span class="meter-value">{{ meters.openTasks }}</span>
|
|
||||||
<span class="meter-label">Offene Aufgaben</span>
|
|
||||||
</div>
|
|
||||||
<div class="meter-item">
|
|
||||||
<span class="meter-value meter-blocked">{{ meters.blocked }}</span>
|
|
||||||
<span class="meter-label">Blockiert</span>
|
|
||||||
</div>
|
|
||||||
<div class="meter-item">
|
|
||||||
<span class="meter-value meter-critical">{{ meters.critical }}</span>
|
|
||||||
<span class="meter-label">Kritisch</span>
|
|
||||||
</div>
|
|
||||||
<div class="meter-item">
|
|
||||||
<span class="meter-value meter-active">{{ meters.active }}</span>
|
|
||||||
<span class="meter-label">Aktiv</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="suggestions">
|
|
||||||
<h3><Sparkles :size="14" /> Vorschläge</h3>
|
|
||||||
<div
|
|
||||||
v-for="(s, idx) in suggestions"
|
|
||||||
:key="idx"
|
|
||||||
class="suggestion-card"
|
|
||||||
>
|
|
||||||
<Lightbulb :size="14" class="bulb" />
|
|
||||||
<span>{{ s.text }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="quick-actions">
|
|
||||||
<button class="qa-btn">
|
|
||||||
<MessageSquareText :size="14" /> Chat öffnen
|
|
||||||
</button>
|
|
||||||
<button class="qa-btn">
|
|
||||||
<ListTodo :size="14" /> Tagesplanung
|
|
||||||
</button>
|
|
||||||
<button class="qa-btn">
|
|
||||||
<Zap :size="14" /> Prioritäten setzen
|
|
||||||
</button>
|
|
||||||
<button class="qa-btn">
|
|
||||||
<FileText :size="14" /> Zusammenfassung
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="chat-box">
|
|
||||||
<div class="chat-input-row">
|
|
||||||
<input
|
|
||||||
v-model="chatInput"
|
|
||||||
type="text"
|
|
||||||
placeholder="Frag Iris etwas..."
|
|
||||||
@keyup.enter="sendChat"
|
|
||||||
/>
|
|
||||||
<button class="chat-send" @click="sendChat">
|
|
||||||
<Send :size="14" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.iris-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 18px;
|
|
||||||
background: rgba(22, 27, 34, 0.8);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.12);
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 4px 24px rgba(0,0,0,0.3);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.iris-panel:hover {
|
|
||||||
border-color: rgba(139, 124, 246, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.iris-profile {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.iris-avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 14px;
|
|
||||||
background: rgba(167, 139, 250, 0.15);
|
|
||||||
color: #a78bfa;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.iris-name-block h2 {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.2;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.iris-role {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #a78bfa;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
}
|
|
||||||
.iris-greeting {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.iris-status {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #7e8799;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.iris-status strong {
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Meters */
|
|
||||||
.meters {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
.meter-item {
|
|
||||||
background: rgba(139, 124, 246, 0.06);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.08);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 8px;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.meter-item:hover {
|
|
||||||
border-color: rgba(139, 124, 246, 0.18);
|
|
||||||
background: rgba(139, 124, 246, 0.1);
|
|
||||||
}
|
|
||||||
.meter-value {
|
|
||||||
display: block;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.meter-blocked { color: #eab308; }
|
|
||||||
.meter-critical { color: #ef4444; }
|
|
||||||
.meter-active { color: #3b82f6; }
|
|
||||||
.meter-label {
|
|
||||||
display: block;
|
|
||||||
font-size: 8px;
|
|
||||||
color: #6b7385;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.06em;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Suggestions */
|
|
||||||
.suggestions h3 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #a78bfa;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
margin: 0 0 6px;
|
|
||||||
}
|
|
||||||
.suggestion-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 7px;
|
|
||||||
padding: 7px 8px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: default;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.suggestion-card:hover {
|
|
||||||
background: rgba(139, 124, 246, 0.08);
|
|
||||||
}
|
|
||||||
.suggestion-card .bulb {
|
|
||||||
color: #eab308;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
.suggestion-card span {
|
|
||||||
font-size: 10.5px;
|
|
||||||
line-height: 1.4;
|
|
||||||
color: #7e8799;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Quick Actions */
|
|
||||||
.quick-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.qa-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 7px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(139, 124, 246, 0.04);
|
|
||||||
color: #7e8799;
|
|
||||||
font-size: 10.5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.qa-btn:hover {
|
|
||||||
background: rgba(139, 124, 246, 0.12);
|
|
||||||
border-color: rgba(139, 124, 246, 0.2);
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Chat Box */
|
|
||||||
.chat-box {
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
.chat-input-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
.chat-input-row input {
|
|
||||||
flex: 1;
|
|
||||||
padding: 7px 10px;
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.12);
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(13, 17, 23, 0.6);
|
|
||||||
color: #e8eaf0;
|
|
||||||
font-size: 10.5px;
|
|
||||||
font-family: inherit;
|
|
||||||
outline: none;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
.chat-input-row input:focus {
|
|
||||||
border-color: #a78bfa;
|
|
||||||
}
|
|
||||||
.chat-input-row input::placeholder {
|
|
||||||
color: #6b7385;
|
|
||||||
}
|
|
||||||
.chat-send {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: #a78bfa;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
.chat-send:hover {
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.iris-panel {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,196 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import { Activity } from '@lucide/vue'
|
|
||||||
import type { FeedEntry } from '../../composables/useDashboardData'
|
|
||||||
import FeedDetailModal from './FeedDetailModal.vue'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
entries: FeedEntry[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
// ── Compact feed (5 items) ──
|
|
||||||
const compactEntries = computed(() => props.entries.slice(0, 5))
|
|
||||||
|
|
||||||
// ── Feed Detail Modal ──
|
|
||||||
const showDetailModal = ref(false)
|
|
||||||
|
|
||||||
function openDetailModal() {
|
|
||||||
showDetailModal.value = true
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="feed-panel">
|
|
||||||
<div class="feed-header">
|
|
||||||
<Activity :size="14" class="feed-icon" />
|
|
||||||
<h2>Operations Feed</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feed-list">
|
|
||||||
<TransitionGroup name="feed">
|
|
||||||
<div
|
|
||||||
v-for="(entry, idx) in compactEntries"
|
|
||||||
:key="entry.timestamp + '-' + idx"
|
|
||||||
class="feed-entry"
|
|
||||||
>
|
|
||||||
<span class="feed-time">{{ entry.time }}</span>
|
|
||||||
<span class="feed-bullet">·</span>
|
|
||||||
<span class="feed-agent" :class="'agent-' + entry.agent.toLowerCase()">
|
|
||||||
{{ entry.agent }}
|
|
||||||
</span>
|
|
||||||
<span class="feed-action">{{ entry.action }}</span>
|
|
||||||
</div>
|
|
||||||
</TransitionGroup>
|
|
||||||
|
|
||||||
<div v-if="entries.length === 0" class="feed-empty">
|
|
||||||
<span>No operations recorded yet.</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button v-if="entries.length > 5" class="feed-more-btn" @click="openDetailModal">
|
|
||||||
Mehr anzeigen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<FeedDetailModal
|
|
||||||
:entries="entries"
|
|
||||||
:model-value="showDetailModal"
|
|
||||||
@update:model-value="showDetailModal = $event"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.feed-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 14px;
|
|
||||||
background: rgba(22, 27, 34, 0.65);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
transition: border-color 0.2s ease;
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
-webkit-backdrop-filter: blur(6px);
|
|
||||||
}
|
|
||||||
.feed-panel:hover {
|
|
||||||
border-color: rgba(139, 124, 246, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
.feed-icon {
|
|
||||||
color: #a78bfa;
|
|
||||||
}
|
|
||||||
.feed-header h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-entry {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 5px 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 9.5px;
|
|
||||||
line-height: 1.3;
|
|
||||||
transition: background 0.15s;
|
|
||||||
}
|
|
||||||
.feed-entry:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-time {
|
|
||||||
color: #6b7385;
|
|
||||||
flex-shrink: 0;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
.feed-bullet {
|
|
||||||
color: #6b7385;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.feed-agent {
|
|
||||||
font-weight: 600;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.agent-iris {
|
|
||||||
color: #a78bfa;
|
|
||||||
}
|
|
||||||
.agent-developer {
|
|
||||||
color: #3b82f6;
|
|
||||||
}
|
|
||||||
.agent-devops {
|
|
||||||
color: #eab308;
|
|
||||||
}
|
|
||||||
.agent-researcher {
|
|
||||||
color: #22c55e;
|
|
||||||
}
|
|
||||||
.agent-reviewer {
|
|
||||||
color: #a855f7;
|
|
||||||
}
|
|
||||||
.feed-action {
|
|
||||||
color: #7e8799;
|
|
||||||
white-space: normal;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-empty {
|
|
||||||
text-align: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #6b7385;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-more-btn {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px;
|
|
||||||
margin-top: 4px;
|
|
||||||
background: rgba(139, 124, 246, 0.08);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.12);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: #a78bfa;
|
|
||||||
font-size: 9.5px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.feed-more-btn:hover {
|
|
||||||
background: rgba(139, 124, 246, 0.14);
|
|
||||||
border-color: rgba(139, 124, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TransitionGroup */
|
|
||||||
.feed-enter-active {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.feed-leave-active {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.feed-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
.feed-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
.feed-move {
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,293 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import {
|
|
||||||
ListTodo,
|
|
||||||
ChevronUp,
|
|
||||||
ChevronDown,
|
|
||||||
ArrowUp,
|
|
||||||
ArrowDown,
|
|
||||||
Trash2,
|
|
||||||
Zap,
|
|
||||||
RefreshCw,
|
|
||||||
} from '@lucide/vue'
|
|
||||||
import type { QueueItem } from '../../composables/useDashboardData'
|
|
||||||
import Button from '@/components/ui/button/Button.vue'
|
|
||||||
import Badge from '@/components/ui/Badge.vue'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
items: QueueItem[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
remove: [id: string]
|
|
||||||
moveUp: [id: string]
|
|
||||||
moveDown: [id: string]
|
|
||||||
changePriority: [id: string, priority: QueueItem['priority']]
|
|
||||||
executeNow: [id: string]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const expanded = ref(true)
|
|
||||||
|
|
||||||
const priorityColor: Record<string, string> = {
|
|
||||||
high: '#ef4444',
|
|
||||||
medium: '#eab308',
|
|
||||||
low: '#6b7385',
|
|
||||||
}
|
|
||||||
|
|
||||||
const dragIndex = ref<number | null>(null)
|
|
||||||
const dragOverIndex = ref<number | null>(null)
|
|
||||||
|
|
||||||
function onDragStart(idx: number): void {
|
|
||||||
dragIndex.value = idx
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDragOver(e: DragEvent, idx: number): void {
|
|
||||||
e.preventDefault()
|
|
||||||
dragOverIndex.value = idx
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDrop(): void {
|
|
||||||
if (dragIndex.value !== null && dragOverIndex.value !== null && dragIndex.value !== dragOverIndex.value) {
|
|
||||||
const id = props.items[dragIndex.value]?.id
|
|
||||||
if (id) {
|
|
||||||
const targetId = props.items[dragOverIndex.value]?.id
|
|
||||||
if (targetId) {
|
|
||||||
if (dragIndex.value < dragOverIndex.value) {
|
|
||||||
for (let i = dragIndex.value; i < dragOverIndex.value; i++) {
|
|
||||||
emit('moveDown', props.items[i]!.id)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (let i = dragIndex.value; i > dragOverIndex.value; i--) {
|
|
||||||
emit('moveUp', props.items[i]!.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dragIndex.value = null
|
|
||||||
dragOverIndex.value = null
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDragEnd(): void {
|
|
||||||
dragIndex.value = null
|
|
||||||
dragOverIndex.value = null
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="queue-panel">
|
|
||||||
<div class="queue-header" @click="expanded = !expanded" role="button" tabindex="0" :aria-expanded="expanded" @keyup.enter="expanded = !expanded">
|
|
||||||
<div class="queue-header-left">
|
|
||||||
<ListTodo :size="14" class="text-[#a78bfa]" />
|
|
||||||
<h2>Chat Queue</h2>
|
|
||||||
<Badge variant="outline" class="text-[10px] font-bold text-[#a78bfa] bg-[rgba(167,139,250,0.1)] border-0 rounded-full px-2">
|
|
||||||
{{ items.length }}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<Button variant="ghost" size="icon" class="h-6 w-6" :aria-label="expanded ? 'Collapse' : 'Expand'">
|
|
||||||
<ChevronUp v-if="expanded" :size="14" />
|
|
||||||
<ChevronDown v-else :size="14" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Transition name="queue-expand">
|
|
||||||
<div v-if="expanded" class="queue-list">
|
|
||||||
<div
|
|
||||||
v-for="(item, idx) in items"
|
|
||||||
:key="item.id"
|
|
||||||
class="queue-item"
|
|
||||||
:class="{
|
|
||||||
'drag-source': dragIndex === idx,
|
|
||||||
'drag-over': dragOverIndex === idx && dragIndex !== idx,
|
|
||||||
}"
|
|
||||||
draggable="true"
|
|
||||||
@dragstart="onDragStart(idx)"
|
|
||||||
@dragover="onDragOver($event, idx)"
|
|
||||||
@drop="onDrop"
|
|
||||||
@dragend="onDragEnd"
|
|
||||||
>
|
|
||||||
<div class="queue-item-body">
|
|
||||||
<div class="queue-item-head">
|
|
||||||
<span class="queue-source-badge" :class="item.source">{{ item.source }}</span>
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
class="text-[7px] font-bold uppercase tracking-wider py-0 px-1.5 border"
|
|
||||||
:style="{
|
|
||||||
color: priorityColor[item.priority],
|
|
||||||
borderColor: `${priorityColor[item.priority]}30`,
|
|
||||||
background: `${priorityColor[item.priority]}10`,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ item.priority }}
|
|
||||||
</Badge>
|
|
||||||
<span class="queue-wait">{{ item.waitTime }}</span>
|
|
||||||
</div>
|
|
||||||
<p class="queue-text">{{ item.text }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="queue-actions">
|
|
||||||
<Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Cycle priority" @click.stop="emit('changePriority', item.id, item.priority === 'high' ? 'medium' : item.priority === 'medium' ? 'low' : 'high')">
|
|
||||||
<RefreshCw :size="12" />
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Move up" :disabled="idx === 0" @click.stop="emit('moveUp', item.id)">
|
|
||||||
<ArrowUp :size="12" />
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#e8eaf0]" title="Move down" :disabled="idx === items.length - 1" @click.stop="emit('moveDown', item.id)">
|
|
||||||
<ArrowDown :size="12" />
|
|
||||||
</Button>
|
|
||||||
<Button variant="ghost" size="icon" class="h-5 w-5 text-[#6b7385] hover:text-[#ef4444] hover:bg-[rgba(239,68,68,0.1)]" title="Remove" @click.stop="emit('remove', item.id)">
|
|
||||||
<Trash2 :size="12" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="items.length === 0" class="queue-empty">
|
|
||||||
<p>Queue is empty</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Transition>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.queue-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background: rgba(22, 27, 34, 0.75);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.12);
|
|
||||||
border-radius: 16px;
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
|
||||||
transition: border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
.queue-panel:hover {
|
|
||||||
border-color: rgba(139, 124, 246, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.queue-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 12px 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.queue-header-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 7px;
|
|
||||||
}
|
|
||||||
.queue-header h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.queue-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0 10px 10px;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.queue-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: background 0.15s, opacity 0.15s;
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
.queue-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
}
|
|
||||||
.queue-item:active {
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
.drag-source {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
.drag-over {
|
|
||||||
background: rgba(167, 139, 250, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.queue-item-body {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.queue-item-head {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
.queue-wait {
|
|
||||||
font-size: 8px;
|
|
||||||
color: #6b7385;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
.queue-text {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 9.5px;
|
|
||||||
color: #7e8799;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Actions */
|
|
||||||
.queue-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.15s;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
.queue-item:hover .queue-actions {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.queue-empty {
|
|
||||||
text-align: center;
|
|
||||||
padding: 16px 0;
|
|
||||||
}
|
|
||||||
.queue-empty p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #6b7385;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Source badge */
|
|
||||||
.queue-source-badge {
|
|
||||||
font-size: 7px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
padding: 0 4px;
|
|
||||||
border-radius: 3px;
|
|
||||||
line-height: 14px;
|
|
||||||
}
|
|
||||||
.queue-source-badge.cron {
|
|
||||||
color: #22c55e;
|
|
||||||
background: rgba(34, 197, 94, 0.1);
|
|
||||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
|
||||||
}
|
|
||||||
.queue-source-badge.task {
|
|
||||||
color: #a78bfa;
|
|
||||||
background: rgba(167, 139, 250, 0.1);
|
|
||||||
border: 1px solid rgba(167, 139, 250, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Transition */
|
|
||||||
.queue-expand-enter-active,
|
|
||||||
.queue-expand-leave-active {
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.queue-expand-enter-from,
|
|
||||||
.queue-expand-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-8px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,92 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const recentlyFinished = ref([
|
|
||||||
'Docker Image gebaut',
|
|
||||||
'Memory Compression',
|
|
||||||
'Enemy AI verbessert',
|
|
||||||
'Daily Backup',
|
|
||||||
'TeamView deployt',
|
|
||||||
'Config-Editor live',
|
|
||||||
])
|
|
||||||
|
|
||||||
function onChipClick(item: string) {
|
|
||||||
console.log('[Dashboard] Recently finished:', item)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="finished-section">
|
|
||||||
<h3>Recently Finished</h3>
|
|
||||||
<div class="finished-scroll">
|
|
||||||
<span
|
|
||||||
v-for="(item, idx) in recentlyFinished"
|
|
||||||
:key="idx"
|
|
||||||
class="finished-chip"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
@click="onChipClick(item)"
|
|
||||||
@keyup.enter="onChipClick(item)"
|
|
||||||
>
|
|
||||||
{{ item }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.finished-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.finished-section h3 {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #7e8799;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.finished-scroll {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
overflow-x: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
-ms-overflow-style: none;
|
|
||||||
padding-bottom: 2px;
|
|
||||||
}
|
|
||||||
.finished-scroll::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.finished-chip {
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 5px 12px;
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.1);
|
|
||||||
border-radius: 20px;
|
|
||||||
background: rgba(139, 124, 246, 0.06);
|
|
||||||
color: #7e8799;
|
|
||||||
font-size: 9.5px;
|
|
||||||
cursor: pointer;
|
|
||||||
white-space: nowrap;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
.finished-chip:hover {
|
|
||||||
background: rgba(139, 124, 246, 0.12);
|
|
||||||
border-color: rgba(139, 124, 246, 0.2);
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.finished-chip:focus-visible {
|
|
||||||
outline: 2px solid #a78bfa;
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.finished-section {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,219 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { Plus, Circle, ChevronRight } from '@lucide/vue'
|
|
||||||
import type { OpenTask } from '../../composables/useDashboardData'
|
|
||||||
import Button from '@/components/ui/button/Button.vue'
|
|
||||||
import Badge from '@/components/ui/Badge.vue'
|
|
||||||
|
|
||||||
defineProps<{
|
|
||||||
tasks: OpenTask[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
newTask: []
|
|
||||||
'go-board': []
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const expandedId = ref<string | null>(null)
|
|
||||||
|
|
||||||
function toggleExpand(id: string) {
|
|
||||||
expandedId.value = expandedId.value === id ? null : id
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="task-card-panel">
|
|
||||||
<div class="task-header">
|
|
||||||
<h2 class="task-title">Offene Aufgaben</h2>
|
|
||||||
<Button variant="outline" size="sm" class="h-7 text-[9px] gap-1 border-[rgba(139,124,246,0.2)] bg-[rgba(139,124,246,0.12)] text-[#a78bfa] hover:bg-[rgba(139,124,246,0.2)]" @click="emit('newTask')">
|
|
||||||
<Plus :size="12" />
|
|
||||||
<span>New Task</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="task-list">
|
|
||||||
<div v-if="tasks.length === 0" class="task-empty">
|
|
||||||
Keine offenen Aufgaben. Erstelle eine mit + New Task.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TransitionGroup name="task">
|
|
||||||
<div
|
|
||||||
v-for="task in tasks"
|
|
||||||
:key="task.id"
|
|
||||||
class="task-item"
|
|
||||||
:class="{ expanded: expandedId === task.id }"
|
|
||||||
@click="toggleExpand(task.id)"
|
|
||||||
>
|
|
||||||
<div class="task-main">
|
|
||||||
<Circle
|
|
||||||
:size="8"
|
|
||||||
class="task-source-dot"
|
|
||||||
:class="task.source === 'iris' ? 'dot-iris' : 'dot-bao'"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<div class="task-content">
|
|
||||||
<div class="task-title-row">
|
|
||||||
<span class="task-name">{{ task.title }}</span>
|
|
||||||
<span class="task-time">{{ task.createdAt }}</span>
|
|
||||||
</div>
|
|
||||||
<Badge
|
|
||||||
variant="outline"
|
|
||||||
:class="task.source === 'iris'
|
|
||||||
? 'bg-[rgba(167,139,250,0.15)] text-[#a78bfa] border-0 text-[8px] py-0 px-1.5'
|
|
||||||
: 'bg-[rgba(59,130,246,0.15)] text-[#3b82f6] border-0 text-[8px] py-0 px-1.5'"
|
|
||||||
>
|
|
||||||
{{ task.source === 'iris' ? 'Iris' : 'Bao' }}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="expandedId === task.id" class="task-detail">
|
|
||||||
{{ task.detail }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TransitionGroup>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button variant="ghost" class="w-full mt-3 h-9 gap-1.5 text-[10px] border border-[rgba(139,124,246,0.15)] bg-[rgba(139,124,246,0.08)] text-[#a78bfa] hover:bg-[rgba(139,124,246,0.15)]" @click="emit('go-board')">
|
|
||||||
<span>Zum Task Board</span>
|
|
||||||
<ChevronRight :size="14" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.task-card-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 14px;
|
|
||||||
background: rgba(22, 27, 34, 0.65);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
transition: border-color 0.2s ease;
|
|
||||||
backdrop-filter: blur(6px);
|
|
||||||
-webkit-backdrop-filter: blur(6px);
|
|
||||||
}
|
|
||||||
.task-card-panel:hover {
|
|
||||||
border-color: rgba(139, 124, 246, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.task-title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.15s;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
.task-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border-color: rgba(139, 124, 246, 0.08);
|
|
||||||
}
|
|
||||||
.task-item.expanded {
|
|
||||||
background: rgba(139, 124, 246, 0.04);
|
|
||||||
border-color: rgba(139, 124, 246, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-main {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-source-dot {
|
|
||||||
margin-top: 4px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.dot-iris {
|
|
||||||
color: #a78bfa;
|
|
||||||
}
|
|
||||||
.dot-bao {
|
|
||||||
color: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-content {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 3px;
|
|
||||||
}
|
|
||||||
.task-title-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.task-name {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #d1d5db;
|
|
||||||
line-height: 1.35;
|
|
||||||
}
|
|
||||||
.task-time {
|
|
||||||
font-size: 8.5px;
|
|
||||||
color: #6b7385;
|
|
||||||
flex-shrink: 0;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-detail {
|
|
||||||
padding: 6px 10px;
|
|
||||||
margin: 0 0 2px 16px;
|
|
||||||
font-size: 9.5px;
|
|
||||||
color: #7e8799;
|
|
||||||
line-height: 1.45;
|
|
||||||
background: rgba(0, 0, 0, 0.15);
|
|
||||||
border-radius: 6px;
|
|
||||||
border-left: 2px solid rgba(139, 124, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-empty {
|
|
||||||
text-align: center;
|
|
||||||
padding: 16px 8px;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #6b7385;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TransitionGroup */
|
|
||||||
.task-enter-active {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.task-leave-active {
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.task-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-6px);
|
|
||||||
}
|
|
||||||
.task-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(6px);
|
|
||||||
}
|
|
||||||
.task-move {
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,541 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, toRef, onMounted, onUnmounted } from 'vue'
|
|
||||||
import { Bot, Code2, Server, Shield, Search, Terminal } from '@lucide/vue'
|
|
||||||
import type { AgentNodeData } from '../../composables/useDashboardData'
|
|
||||||
import { useTeamNetworkSvg } from '../../composables/useTeamNetworkSvg'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
agents: AgentNodeData[]
|
|
||||||
heroId?: string
|
|
||||||
activeAgents?: string[]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
select: [id: string]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
// ── Network ref ──
|
|
||||||
const networkRef = ref<HTMLDivElement | null>(null)
|
|
||||||
|
|
||||||
// ── Computed data ──
|
|
||||||
const heroId = computed(() => props.heroId ?? props.agents[0]?.id ?? '')
|
|
||||||
|
|
||||||
function isActive(id: string): boolean {
|
|
||||||
return props.activeAgents?.includes(id) ?? false
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── SVG composable ──
|
|
||||||
const {
|
|
||||||
svgWidth,
|
|
||||||
svgHeight,
|
|
||||||
childAgents,
|
|
||||||
connectionPaths,
|
|
||||||
storePathRef,
|
|
||||||
storePulseRef,
|
|
||||||
storePulseRef2,
|
|
||||||
} = useTeamNetworkSvg(networkRef, toRef(props, 'agents'), heroId, isActive)
|
|
||||||
|
|
||||||
// ── Icon resolver ──
|
|
||||||
function resolveIcon(iconName: string) {
|
|
||||||
switch (iconName) {
|
|
||||||
case 'bot': return Bot
|
|
||||||
case 'code': return Code2
|
|
||||||
case 'server': return Server
|
|
||||||
case 'shield': return Shield
|
|
||||||
case 'search': return Search
|
|
||||||
case 'terminal': return Terminal
|
|
||||||
default: return Bot
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Runtime formatter ──
|
|
||||||
function formatRuntime(seconds: number): string {
|
|
||||||
const m = Math.floor(seconds / 60)
|
|
||||||
const s = seconds % 60
|
|
||||||
return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Model formatter ──
|
|
||||||
function formatModel(model: string): string {
|
|
||||||
const parts = model.split('/')
|
|
||||||
const name = parts[parts.length - 1]
|
|
||||||
return name.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Mobile media query ──
|
|
||||||
const isMobile = ref(false)
|
|
||||||
let mq: MediaQueryList | null = null
|
|
||||||
|
|
||||||
function onMqChange(e: MediaQueryListEvent) {
|
|
||||||
isMobile.value = e.matches
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
mq = window.matchMedia('(max-width: 600px)')
|
|
||||||
isMobile.value = mq.matches
|
|
||||||
mq.addEventListener('change', onMqChange)
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (mq) {
|
|
||||||
mq.removeEventListener('change', onMqChange)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
function visibleTags(tags: string[]) {
|
|
||||||
if (!isMobile.value || tags.length <= 4) {
|
|
||||||
return { shown: tags, overflow: 0 }
|
|
||||||
}
|
|
||||||
return { shown: tags.slice(0, 4), overflow: tags.length - 4 }
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Hero computed ──
|
|
||||||
const hero = computed(() => props.agents.find(a => a.id === heroId.value) ?? props.agents[0])
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div ref="networkRef" class="ai-team-network">
|
|
||||||
<!-- SVG Connection Layer -->
|
|
||||||
<svg
|
|
||||||
v-if="svgWidth > 0 && svgHeight > 0"
|
|
||||||
class="network-svg"
|
|
||||||
:width="svgWidth"
|
|
||||||
:height="svgHeight"
|
|
||||||
:viewBox="`0 0 ${svgWidth} ${svgHeight}`"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<filter
|
|
||||||
v-for="agent in childAgents"
|
|
||||||
:key="`glow-${agent.id}`"
|
|
||||||
:id="`glow-${agent.id}`"
|
|
||||||
x="-30%" y="-30%" width="160%" height="160%"
|
|
||||||
>
|
|
||||||
<feGaussianBlur stdDeviation="4" result="blur" />
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode in="blur" />
|
|
||||||
<feMergeNode in="blur" />
|
|
||||||
<feMergeNode in="SourceGraphic" />
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- Connection lines for each agent -->
|
|
||||||
<template v-for="agent in childAgents" :key="agent.id">
|
|
||||||
<!-- Base line -->
|
|
||||||
<path
|
|
||||||
v-if="connectionPaths[agent.id]"
|
|
||||||
:ref="storePathRef(agent.id)"
|
|
||||||
:d="connectionPaths[agent.id]!.d"
|
|
||||||
:stroke="agent.color"
|
|
||||||
:stroke-width="isActive(agent.id) ? 2.5 : 1.5"
|
|
||||||
fill="none"
|
|
||||||
:opacity="isActive(agent.id) ? 0.7 : 0.25"
|
|
||||||
stroke-linecap="round"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Glow line for active agent -->
|
|
||||||
<path
|
|
||||||
v-if="isActive(agent.id) && connectionPaths[agent.id]"
|
|
||||||
:d="connectionPaths[agent.id]!.d"
|
|
||||||
:stroke="agent.color"
|
|
||||||
stroke-width="4"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
:filter="`url(#glow-${agent.id})`"
|
|
||||||
opacity="0.5"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Pulse line 1 (white dashed segment moving along) -->
|
|
||||||
<path
|
|
||||||
v-if="connectionPaths[agent.id]"
|
|
||||||
:ref="storePulseRef(agent.id)"
|
|
||||||
:d="connectionPaths[agent.id]!.d"
|
|
||||||
stroke="white"
|
|
||||||
stroke-width="3"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
:opacity="isActive(agent.id) ? 1 : 0.4"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Pulse line 2 (offset by half cycle) -->
|
|
||||||
<path
|
|
||||||
v-if="connectionPaths[agent.id]"
|
|
||||||
:ref="storePulseRef2(agent.id)"
|
|
||||||
:d="connectionPaths[agent.id]!.d"
|
|
||||||
stroke="white"
|
|
||||||
stroke-width="3"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
:opacity="isActive(agent.id) ? 0.8 : 0.3"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<!-- Cards Layer (above SVG) -->
|
|
||||||
<div class="cards-layer">
|
|
||||||
<!-- Hero: Iris centered top -->
|
|
||||||
<div class="hero-slot" :data-agent-id="hero.id">
|
|
||||||
<article
|
|
||||||
class="agent-card hero-card"
|
|
||||||
:style="{
|
|
||||||
'--card-color': hero.color,
|
|
||||||
...(isActive(hero.id) ? {
|
|
||||||
boxShadow: `0 0 20px ${hero.color}44`,
|
|
||||||
borderColor: hero.color
|
|
||||||
} : {})
|
|
||||||
}"
|
|
||||||
@click="emit('select', hero.id)"
|
|
||||||
>
|
|
||||||
<div class="card-main">
|
|
||||||
<div class="card-icon-wrap" :style="{ background: `${hero.color}18`, color: hero.color }">
|
|
||||||
<component :is="resolveIcon(hero.icon)" :size="20" />
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="card-name-row">
|
|
||||||
<h3 class="card-name">{{ hero.name }}</h3>
|
|
||||||
<span class="card-role-tag" :style="{ background: `${hero.color}18`, color: hero.color, borderColor: `${hero.color}30` }">{{ hero.role }}</span>
|
|
||||||
</div>
|
|
||||||
<p class="card-desc">{{ hero.description }}</p>
|
|
||||||
<div v-if="hero.currentTask" class="task-row">
|
|
||||||
<span class="node-task">
|
|
||||||
<span class="node-task-dot" :style="{ color: hero.color }">●</span>
|
|
||||||
{{ hero.currentTask }}
|
|
||||||
</span>
|
|
||||||
<span class="node-runtime">{{ formatRuntime(hero.runtimeSeconds) }}</span>
|
|
||||||
<span v-if="hero.model" class="node-model">{{ formatModel(hero.model) }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-else class="idle-row">
|
|
||||||
<span class="idle-badge">Idle</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-tags">
|
|
||||||
<template v-for="(tag, idx) in visibleTags(hero.tags).shown" :key="tag">
|
|
||||||
<span class="card-tag" :style="{ background: `${hero.color}18`, color: hero.color }">{{ tag }}</span>
|
|
||||||
</template>
|
|
||||||
<span v-if="visibleTags(hero.tags).overflow > 0" class="card-tag tag-overflow" :style="{ background: `${hero.color}18`, color: hero.color }">+{{ visibleTags(hero.tags).overflow }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-arrow">
|
|
||||||
<span class="arrow-icon">→</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Agent Grid: 2 columns x 2 rows -->
|
|
||||||
<div class="agent-grid">
|
|
||||||
<div
|
|
||||||
v-for="agent in childAgents"
|
|
||||||
:key="agent.id"
|
|
||||||
:data-agent-id="agent.id"
|
|
||||||
class="agent-slot"
|
|
||||||
>
|
|
||||||
<article
|
|
||||||
class="agent-card"
|
|
||||||
:style="{
|
|
||||||
'--card-color': agent.color,
|
|
||||||
...(isActive(agent.id) ? {
|
|
||||||
boxShadow: `0 0 14px ${agent.color}55, 0 0 30px ${agent.color}22`,
|
|
||||||
borderColor: agent.color
|
|
||||||
} : {})
|
|
||||||
}"
|
|
||||||
@click="emit('select', agent.id)"
|
|
||||||
>
|
|
||||||
<div class="card-main">
|
|
||||||
<div class="card-icon-wrap" :style="{ background: `${agent.color}18`, color: agent.color }">
|
|
||||||
<component :is="resolveIcon(agent.icon)" :size="18" />
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="card-name-row">
|
|
||||||
<h3 class="card-name">{{ agent.name }}</h3>
|
|
||||||
<span class="card-role-tag" :style="{ background: `${agent.color}18`, color: agent.color, borderColor: `${agent.color}30` }">{{ agent.role }}</span>
|
|
||||||
</div>
|
|
||||||
<p class="card-desc">{{ agent.description }}</p>
|
|
||||||
<div v-if="agent.currentTask" class="task-row">
|
|
||||||
<span class="node-task">
|
|
||||||
<span class="node-task-dot" :style="{ color: agent.color }">●</span>
|
|
||||||
{{ agent.currentTask }}
|
|
||||||
</span>
|
|
||||||
<span class="node-runtime">{{ formatRuntime(agent.runtimeSeconds) }}</span>
|
|
||||||
<span v-if="agent.model" class="node-model">{{ formatModel(agent.model) }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-else class="idle-row">
|
|
||||||
<span class="idle-badge">Idle</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-tags">
|
|
||||||
<template v-for="(tag, idx) in visibleTags(agent.tags).shown" :key="tag">
|
|
||||||
<span class="card-tag" :style="{ background: `${agent.color}18`, color: agent.color }">{{ tag }}</span>
|
|
||||||
</template>
|
|
||||||
<span v-if="visibleTags(agent.tags).overflow > 0" class="card-tag tag-overflow" :style="{ background: `${agent.color}18`, color: agent.color }">+{{ visibleTags(agent.tags).overflow }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-arrow">
|
|
||||||
<span class="arrow-icon">→</span>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.ai-team-network {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.network-svg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cards-layer {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-slot {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 520px;
|
|
||||||
transition: border-color 0.3s, box-shadow 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 16px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 820px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-slot {
|
|
||||||
width: 100%;
|
|
||||||
transition: border-color 0.3s, box-shadow 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Agent Card ── */
|
|
||||||
.agent-card {
|
|
||||||
background: rgba(18, 22, 30, 0.45);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 18px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.agent-card:hover {
|
|
||||||
background: rgba(18, 22, 30, 0.65);
|
|
||||||
border-color: var(--card-color, #8b7cf6);
|
|
||||||
box-shadow: 0 0 16px color-mix(in srgb, var(--card-color, #8b7cf6) 10%, transparent);
|
|
||||||
}
|
|
||||||
.hero-card {
|
|
||||||
background: rgba(18, 22, 30, 0.45);
|
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
|
||||||
box-shadow: 0 0 20px rgba(139, 124, 246, 0.06);
|
|
||||||
}
|
|
||||||
.hero-card:hover {
|
|
||||||
background: rgba(18, 22, 30, 0.65);
|
|
||||||
border-color: #8b7cf6;
|
|
||||||
box-shadow: 0 0 24px rgba(139, 124, 246, 0.12);
|
|
||||||
}
|
|
||||||
.card-main {
|
|
||||||
display: flex;
|
|
||||||
gap: 14px;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
.card-icon-wrap {
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
border-radius: 10px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.card-body {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.card-name-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.card-name {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e8eaf0;
|
|
||||||
}
|
|
||||||
.card-role-tag {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 8.5px;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 5px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.card-desc {
|
|
||||||
font-size: 10.5px;
|
|
||||||
color: #7e8799;
|
|
||||||
line-height: 1.5;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Task + Runtime Row ── */
|
|
||||||
.task-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.node-task {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #9ea5b3;
|
|
||||||
line-height: 1.4;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.node-task-dot {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 4px;
|
|
||||||
font-size: 8px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.node-runtime {
|
|
||||||
font-size: 9px;
|
|
||||||
color: #6b7385;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.node-model {
|
|
||||||
font-size: 8.5px;
|
|
||||||
color: #6b7385;
|
|
||||||
font-weight: 500;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Idle Row ── */
|
|
||||||
.idle-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.idle-badge {
|
|
||||||
font-size: 9px;
|
|
||||||
color: #6b7385;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: rgba(107, 115, 133, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Tags ── */
|
|
||||||
.card-tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.card-tag {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 5px;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
.tag-overflow {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Hover Arrow ── */
|
|
||||||
.card-arrow {
|
|
||||||
position: absolute;
|
|
||||||
right: 12px;
|
|
||||||
bottom: 12px;
|
|
||||||
color: #6b7385;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-6px);
|
|
||||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
||||||
}
|
|
||||||
.agent-card:hover .card-arrow {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
.arrow-icon {
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Tablet ── */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.agent-grid {
|
|
||||||
max-width: 100%;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
.hero-slot {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.card-name {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
.card-desc {
|
|
||||||
font-size: 9.5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Mobile ── */
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.agent-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.agent-card {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
.card-icon-wrap {
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
}
|
|
||||||
.card-name {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.card-role-tag {
|
|
||||||
font-size: 7.5px;
|
|
||||||
}
|
|
||||||
.card-desc {
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
.card-tag {
|
|
||||||
font-size: 8px;
|
|
||||||
padding: 1px 6px;
|
|
||||||
}
|
|
||||||
.cards-layer {
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -2,11 +2,16 @@
|
|||||||
import { computed } from 'vue'
|
import { computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { useAuthStore } from '../../stores/auth'
|
import { useAuthStore } from '../../stores/auth'
|
||||||
|
import { useAgentStore } from '../../stores/agents'
|
||||||
|
import { useTaskStore } from '../../stores/tasks'
|
||||||
import { navigation, icons } from '../../composables/icons'
|
import { navigation, icons } from '../../composables/icons'
|
||||||
|
import type { NavGroupDef } from '../../composables/icons'
|
||||||
import NavGroup from './NavGroup.vue'
|
import NavGroup from './NavGroup.vue'
|
||||||
|
|
||||||
const auth = useAuthStore()
|
const auth = useAuthStore()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const agentStore = useAgentStore()
|
||||||
|
const taskStore = useTaskStore()
|
||||||
|
|
||||||
const ownerInitials = computed(() =>
|
const ownerInitials = computed(() =>
|
||||||
auth.user?.displayName?.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase()
|
auth.user?.displayName?.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase()
|
||||||
@@ -17,6 +22,44 @@ function logout() {
|
|||||||
auth.logout()
|
auth.logout()
|
||||||
router.replace('/login')
|
router.replace('/login')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dynamische Nav-Item-Counts aus den Stores.
|
||||||
|
* Überschreibt die hartcodierten `count`-Werte im navigation-Array.
|
||||||
|
*/
|
||||||
|
const dynamicNavigation = computed<NavGroupDef[]>(() => {
|
||||||
|
// Deep-clone: Jede Gruppe und jedes Item neu erstellen
|
||||||
|
return navigation.map(group => ({
|
||||||
|
...group,
|
||||||
|
items: group.items.map(item => {
|
||||||
|
let dynamicCount: string | undefined
|
||||||
|
|
||||||
|
switch (item.label) {
|
||||||
|
case 'Agenten':
|
||||||
|
case 'Hosts · OpenClaw':
|
||||||
|
dynamicCount = String(agentStore.agentList.length)
|
||||||
|
break
|
||||||
|
case 'Task Board':
|
||||||
|
dynamicCount = String(taskStore.taskList.length)
|
||||||
|
break
|
||||||
|
case 'Kosten & Tokens':
|
||||||
|
dynamicCount = agentStore.todayCost
|
||||||
|
break
|
||||||
|
case 'Docs & .md':
|
||||||
|
dynamicCount = '0'
|
||||||
|
break
|
||||||
|
case 'Incidents':
|
||||||
|
dynamicCount = '0'
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
count: dynamicCount ?? item.count,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
}))
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -33,7 +76,7 @@ function logout() {
|
|||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
<nav class="nav">
|
<nav class="nav">
|
||||||
<NavGroup
|
<NavGroup
|
||||||
v-for="(group, idx) in navigation"
|
v-for="(group, idx) in dynamicNavigation"
|
||||||
:key="idx"
|
:key="idx"
|
||||||
:label="group.group"
|
:label="group.group"
|
||||||
:items="group.items"
|
:items="group.items"
|
||||||
|
|||||||
@@ -56,9 +56,9 @@ export const navigation: NavGroupDef[] = [
|
|||||||
{
|
{
|
||||||
group: 'Operations',
|
group: 'Operations',
|
||||||
items: [
|
items: [
|
||||||
{ icon: 'grid', label: 'Dashboard', route: '/dashboard/v2', active: true },
|
{ icon: 'grid', label: 'Dashboard', route: '/dashboard', active: true },
|
||||||
{ icon: 'cpu', label: 'Agenten', route: '/agents', count: '6' },
|
{ icon: 'cpu', label: 'Agenten', route: '/agents' },
|
||||||
{ icon: 'list', label: 'Task Board', route: '/tasks', count: '7' },
|
{ icon: 'list', label: 'Task Board', route: '/tasks' },
|
||||||
{ icon: 'flow', label: 'Orchestrierung', route: '/orchestration' },
|
{ icon: 'flow', label: 'Orchestrierung', route: '/orchestration' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@@ -66,14 +66,14 @@ export const navigation: NavGroupDef[] = [
|
|||||||
group: 'Knowledge',
|
group: 'Knowledge',
|
||||||
items: [
|
items: [
|
||||||
{ icon: 'brain', label: 'Memory', route: '/memory' },
|
{ icon: 'brain', label: 'Memory', route: '/memory' },
|
||||||
{ icon: 'doc', label: 'Docs & .md', route: '/docs', count: '12' },
|
{ icon: 'doc', label: 'Docs & .md', route: '/docs' },
|
||||||
{ icon: 'search', label: 'Research', route: '/research' },
|
{ icon: 'search', label: 'Research', route: '/research' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
group: 'Infrastructure',
|
group: 'Infrastructure',
|
||||||
items: [
|
items: [
|
||||||
{ icon: 'server', label: 'Hosts · OpenClaw', route: '/hosts', count: '1' },
|
{ icon: 'server', label: 'Hosts · OpenClaw', route: '/hosts' },
|
||||||
{ icon: 'model', label: 'Modelle', route: '/models' },
|
{ icon: 'model', label: 'Modelle', route: '/models' },
|
||||||
{ icon: 'activity', label: 'Activity Log', route: '/activity' },
|
{ icon: 'activity', label: 'Activity Log', route: '/activity' },
|
||||||
],
|
],
|
||||||
@@ -83,7 +83,7 @@ export const navigation: NavGroupDef[] = [
|
|||||||
items: [
|
items: [
|
||||||
{ icon: 'coin', label: 'Kosten & Tokens', route: '/costs' },
|
{ icon: 'coin', label: 'Kosten & Tokens', route: '/costs' },
|
||||||
{ icon: 'shield', label: 'Security', route: '/security' },
|
{ icon: 'shield', label: 'Security', route: '/security' },
|
||||||
{ icon: 'alert', label: 'Incidents', route: '/incidents', count: '1' },
|
{ icon: 'alert', label: 'Incidents', route: '/incidents' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -1,621 +0,0 @@
|
|||||||
import { ref, computed } from 'vue'
|
|
||||||
|
|
||||||
// ── Shared State (singleton: same state regardless of how many times useDashboardData() is called) ──
|
|
||||||
const sessionStart = Date.now()
|
|
||||||
|
|
||||||
// Intervals registry for cleanup
|
|
||||||
const intervals: ReturnType<typeof setInterval>[] = []
|
|
||||||
let cleanupRegistered = false
|
|
||||||
|
|
||||||
// ── Interfaces (exported for components) ──
|
|
||||||
|
|
||||||
export interface AgentNodeData {
|
|
||||||
id: string
|
|
||||||
name: string
|
|
||||||
role: string
|
|
||||||
description: string
|
|
||||||
tags: string[]
|
|
||||||
color: string
|
|
||||||
icon: string
|
|
||||||
model?: string
|
|
||||||
hero?: boolean
|
|
||||||
currentTask: string
|
|
||||||
goal: string
|
|
||||||
progress: number
|
|
||||||
workload: number // 0-100
|
|
||||||
active: boolean
|
|
||||||
runtimeSeconds: number
|
|
||||||
workingFeed: Array<{ time: string; text: string }>
|
|
||||||
thinkingStream?: Array<{ time: string; text: string }>
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface OpenTask {
|
|
||||||
id: string
|
|
||||||
title: string
|
|
||||||
detail: string
|
|
||||||
source: 'bao' | 'iris'
|
|
||||||
createdAt: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface FeedEntry {
|
|
||||||
time: string
|
|
||||||
agent: string
|
|
||||||
action: string
|
|
||||||
timestamp: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ChatMessage {
|
|
||||||
id: string
|
|
||||||
sender: 'user' | 'iris'
|
|
||||||
text: string
|
|
||||||
timestamp: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface QueueItem {
|
|
||||||
id: string
|
|
||||||
text: string
|
|
||||||
priority: 'high' | 'medium' | 'low'
|
|
||||||
waitTime: string
|
|
||||||
source: 'cron' | 'task'
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── API Response Interfaces ──
|
|
||||||
|
|
||||||
interface DashboardStatusResponse {
|
|
||||||
gatewayOk: boolean
|
|
||||||
irisStatus: string
|
|
||||||
activeAgents: number
|
|
||||||
pendingTasks: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DashboardAgentInfo {
|
|
||||||
id: string
|
|
||||||
name: string
|
|
||||||
role: string
|
|
||||||
model: string
|
|
||||||
isActive: boolean
|
|
||||||
currentTask: string
|
|
||||||
description?: string
|
|
||||||
tags?: string[]
|
|
||||||
progress?: number
|
|
||||||
workload?: number
|
|
||||||
goal?: string | null
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DashboardOperationEntry {
|
|
||||||
agent: string
|
|
||||||
action: string
|
|
||||||
timestamp: string
|
|
||||||
time: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DashboardChatMessage {
|
|
||||||
role: 'user' | 'assistant'
|
|
||||||
content: string
|
|
||||||
timestamp: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DashboardSendResponse {
|
|
||||||
ok: boolean
|
|
||||||
reply?: string
|
|
||||||
error?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DashboardQueueItem {
|
|
||||||
id: string
|
|
||||||
name: string
|
|
||||||
status: string
|
|
||||||
priority: string
|
|
||||||
source: string
|
|
||||||
waitTime: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DashboardTaskResponse {
|
|
||||||
id: string
|
|
||||||
title: string
|
|
||||||
detail: string | null
|
|
||||||
source: string
|
|
||||||
state: string
|
|
||||||
priority: string
|
|
||||||
assignedTo: string | null
|
|
||||||
createdAt: string
|
|
||||||
updatedAt: string
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Agent Catalog (static enrichment) ──
|
|
||||||
|
|
||||||
const AGENT_CATALOG: Record<string, Partial<AgentNodeData>> = {
|
|
||||||
iris: {
|
|
||||||
description: 'Zentrale operative Führungsinstanz. Strukturiert Aufgaben, bewertet Risiken, steuert spezialisierte Agenten und eskaliert kritische Entscheidungen.',
|
|
||||||
tags: ['Orchestration', 'Delegation', 'Approval', 'Risk Management'],
|
|
||||||
color: '#8b7cf6',
|
|
||||||
icon: 'bot',
|
|
||||||
hero: true,
|
|
||||||
goal: 'Mission Control — maximale Autonomie bei kontrolliertem Risiko',
|
|
||||||
progress: 90,
|
|
||||||
workload: 60,
|
|
||||||
workingFeed: [],
|
|
||||||
thinkingStream: [],
|
|
||||||
},
|
|
||||||
developer: {
|
|
||||||
description: 'Primärer Entwicklungsagent. Implementiert Features, behebt Bugs und schreibt Code im gesamten Stack — autonom im Rahmen seines Scopes.',
|
|
||||||
tags: ['Full-Stack', 'TypeScript', 'C#', 'Vue', '.NET', 'Builds'],
|
|
||||||
color: '#3b82f6',
|
|
||||||
icon: 'code',
|
|
||||||
goal: 'Nexus Dashboard & Dungeon System',
|
|
||||||
progress: 70,
|
|
||||||
workload: 65,
|
|
||||||
workingFeed: [],
|
|
||||||
thinkingStream: [],
|
|
||||||
},
|
|
||||||
architekt: {
|
|
||||||
description: 'Verwaltet die gesamte Server-Infrastruktur. Deployt Services, konfiguriert Docker, Nginx und Firewall. Stellt sicher, dass die Produktivumgebung stabil und sicher läuft.',
|
|
||||||
tags: ['Docker', 'Nginx', 'CI/CD', 'Firewall', 'VPS'],
|
|
||||||
color: '#eab308',
|
|
||||||
icon: 'server',
|
|
||||||
goal: 'Stabile Zero-Downtime-Deployments',
|
|
||||||
progress: 60,
|
|
||||||
workload: 45,
|
|
||||||
workingFeed: [],
|
|
||||||
thinkingStream: [],
|
|
||||||
},
|
|
||||||
researcher: {
|
|
||||||
description: 'Spezialisierter Recherche-Agent. Sucht online, prüft Quellen, analysiert Inhalte (inkl. YouTube-Videos) und übergibt strukturierte Erkenntnisse. Ausschließlich Lese- und Analyse-Rechte.',
|
|
||||||
tags: ['Research', 'Quellenprüfung', 'Analyse', 'Docs'],
|
|
||||||
color: '#22c55e',
|
|
||||||
icon: 'search',
|
|
||||||
goal: 'Verifizierte, strukturierte Recherche-Ergebnisse',
|
|
||||||
progress: 40,
|
|
||||||
workload: 30,
|
|
||||||
workingFeed: [],
|
|
||||||
thinkingStream: [],
|
|
||||||
},
|
|
||||||
reviewer: {
|
|
||||||
description: 'Code-Qualitätskontrolle. Prüft Diffs auf Bugs, Regressionen, Sicherheitslücken und Wartbarkeit. Berichtet Findings strukturiert und knapp.',
|
|
||||||
tags: ['Code Review', 'Testing', 'Security', 'Quality'],
|
|
||||||
color: '#a855f7',
|
|
||||||
icon: 'shield',
|
|
||||||
goal: 'Zero critical findings before merge',
|
|
||||||
progress: 85,
|
|
||||||
workload: 55,
|
|
||||||
workingFeed: [],
|
|
||||||
thinkingStream: [],
|
|
||||||
},
|
|
||||||
executor: {
|
|
||||||
description: 'Einziger Agent mit Host-Exec-Rechten. Führt Docker- und Shell-Befehle auf dem VPS aus — ausschließlich im Auftrag von Iris. Handelt niemals eigeninitiativ.',
|
|
||||||
tags: ['Docker', 'Shell', 'Host', 'Deployment'],
|
|
||||||
color: '#f59e0b',
|
|
||||||
icon: 'server',
|
|
||||||
goal: 'Sichere Host-Execution im Allowlist-Rahmen',
|
|
||||||
progress: 95,
|
|
||||||
workload: 20,
|
|
||||||
workingFeed: [],
|
|
||||||
thinkingStream: [],
|
|
||||||
},
|
|
||||||
// Alias: API sends "programmer" but AGENT_CATALOG uses "developer" as canonical key
|
|
||||||
programmer: {
|
|
||||||
description: 'Primärer Entwicklungsagent. Implementiert Features, behebt Bugs und schreibt Code im gesamten Stack — autonom im Rahmen seines Scopes.',
|
|
||||||
tags: ['Full-Stack', 'TypeScript', 'C#', 'Vue', '.NET', 'Builds'],
|
|
||||||
color: '#3b82f6',
|
|
||||||
icon: 'code',
|
|
||||||
goal: 'Nexus Dashboard & Dungeon System',
|
|
||||||
progress: 70,
|
|
||||||
workload: 65,
|
|
||||||
workingFeed: [],
|
|
||||||
thinkingStream: [],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
function enrichAgent(api: DashboardAgentInfo): AgentNodeData {
|
|
||||||
const catalog = AGENT_CATALOG[api.id] ?? AGENT_CATALOG['reviewer']
|
|
||||||
return {
|
|
||||||
id: api.id,
|
|
||||||
name: api.name,
|
|
||||||
role: api.role,
|
|
||||||
model: api.model,
|
|
||||||
currentTask: api.currentTask ?? 'Idle',
|
|
||||||
active: api.isActive,
|
|
||||||
description: api.description ?? catalog.description ?? '',
|
|
||||||
tags: api.tags ?? catalog.tags ?? [],
|
|
||||||
color: catalog.color ?? '#6b7385',
|
|
||||||
icon: catalog.icon ?? 'bot',
|
|
||||||
hero: catalog.hero ?? false,
|
|
||||||
// Use API-provided values with catalog fallback for metrics
|
|
||||||
goal: api.goal ?? catalog.goal ?? 'No goal set',
|
|
||||||
progress: api.progress ?? catalog.progress ?? 0,
|
|
||||||
workload: api.workload ?? catalog.workload ?? 0,
|
|
||||||
runtimeSeconds: 0,
|
|
||||||
workingFeed: catalog.workingFeed ?? [],
|
|
||||||
thinkingStream: catalog.thinkingStream ?? [],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Helper: API Fetch with auth ──
|
|
||||||
|
|
||||||
async function apiFetch(path: string, init: RequestInit = {}): Promise<Response> {
|
|
||||||
const base = '' // same-origin proxy
|
|
||||||
return fetch(`${base}${path}`, {
|
|
||||||
...init,
|
|
||||||
credentials: 'include',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
...(init.headers as Record<string, string> ?? {}),
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── State ──
|
|
||||||
|
|
||||||
// Status
|
|
||||||
const gatewayOk = ref(true)
|
|
||||||
const irisStatus = ref('Active')
|
|
||||||
const activeAgents = ref(0)
|
|
||||||
const pendingTasks = ref(0)
|
|
||||||
|
|
||||||
// Agents
|
|
||||||
const agents = ref<AgentNodeData[]>([])
|
|
||||||
|
|
||||||
// Chat
|
|
||||||
const chatMessages = ref<ChatMessage[]>([])
|
|
||||||
const irisBusy = ref(false)
|
|
||||||
const irisFocus = ref('')
|
|
||||||
const busySince = ref(0)
|
|
||||||
|
|
||||||
// Operations Feed
|
|
||||||
const feedEntries = ref<FeedEntry[]>([])
|
|
||||||
|
|
||||||
// Open Tasks (fetched from API)
|
|
||||||
const openTasks = ref<OpenTask[]>([])
|
|
||||||
|
|
||||||
// Queue
|
|
||||||
const queue = ref<QueueItem[]>([])
|
|
||||||
|
|
||||||
// Runtime
|
|
||||||
const runtimeSeconds = ref(0)
|
|
||||||
let runtimeInterval: ReturnType<typeof setInterval> | null = null
|
|
||||||
|
|
||||||
// ── Fetch Functions ──
|
|
||||||
|
|
||||||
async function fetchStatus(): Promise<void> {
|
|
||||||
try {
|
|
||||||
const res = await apiFetch('/api/dashboard/status')
|
|
||||||
if (!res.ok) return
|
|
||||||
const data: DashboardStatusResponse = await res.json()
|
|
||||||
gatewayOk.value = data.gatewayOk
|
|
||||||
irisStatus.value = data.irisStatus
|
|
||||||
activeAgents.value = data.activeAgents
|
|
||||||
pendingTasks.value = data.pendingTasks
|
|
||||||
} catch {
|
|
||||||
// API unreachable – keep current values
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchAgents(): Promise<void> {
|
|
||||||
try {
|
|
||||||
const res = await apiFetch('/api/dashboard/agents')
|
|
||||||
if (!res.ok) return
|
|
||||||
const data: DashboardAgentInfo[] = await res.json()
|
|
||||||
agents.value = data.map(enrichAgent)
|
|
||||||
} catch {
|
|
||||||
// API unreachable – keep current values
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchOperations(): Promise<void> {
|
|
||||||
try {
|
|
||||||
const res = await apiFetch('/api/dashboard/operations?limit=20')
|
|
||||||
if (!res.ok) return
|
|
||||||
const data: DashboardOperationEntry[] = await res.json()
|
|
||||||
feedEntries.value = data.map((entry) => ({
|
|
||||||
time: entry.time,
|
|
||||||
agent: entry.agent,
|
|
||||||
action: entry.action,
|
|
||||||
timestamp: entry.timestamp,
|
|
||||||
}))
|
|
||||||
} catch {
|
|
||||||
// API unreachable – keep current values
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchChatMessages(): Promise<void> {
|
|
||||||
try {
|
|
||||||
const res = await apiFetch('/api/dashboard/chat/messages?limit=50')
|
|
||||||
if (!res.ok) return
|
|
||||||
const data: DashboardChatMessage[] = await res.json()
|
|
||||||
// Merge instead of replace — only add messages not already present
|
|
||||||
const existingTexts = new Set(chatMessages.value.map(m => m.text))
|
|
||||||
const existingTimestamps = new Set(chatMessages.value.map(m => m.timestamp))
|
|
||||||
for (const msg of data) {
|
|
||||||
const msgTime = new Date(msg.timestamp).getTime()
|
|
||||||
if (existingTexts.has(msg.content) && existingTimestamps.has(msgTime)) continue
|
|
||||||
chatMessages.value.push({
|
|
||||||
id: `msg-${msgTime}-${msg.role}`,
|
|
||||||
sender: msg.role === 'assistant' ? 'iris' : 'user',
|
|
||||||
text: msg.content,
|
|
||||||
timestamp: msgTime,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// API unreachable – keep current values
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchQueue(): Promise<void> {
|
|
||||||
try {
|
|
||||||
const res = await apiFetch('/api/dashboard/queue')
|
|
||||||
if (!res.ok) return
|
|
||||||
const data: DashboardQueueItem[] = await res.json()
|
|
||||||
queue.value = data.map((item) => ({
|
|
||||||
id: item.id,
|
|
||||||
text: item.name,
|
|
||||||
priority: (item.priority === 'high' || item.priority === 'medium' || item.priority === 'low')
|
|
||||||
? item.priority as 'high' | 'medium' | 'low'
|
|
||||||
: 'medium',
|
|
||||||
waitTime: item.waitTime || '--',
|
|
||||||
source: (item.source === 'cron' || item.source === 'task') ? item.source as 'cron' | 'task' : 'cron',
|
|
||||||
}))
|
|
||||||
} catch {
|
|
||||||
// API unreachable – keep current values
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchTasks(): Promise<void> {
|
|
||||||
try {
|
|
||||||
const res = await apiFetch('/api/dashboard/tasks')
|
|
||||||
if (!res.ok) return
|
|
||||||
const data: DashboardTaskResponse[] = await res.json()
|
|
||||||
openTasks.value = data.map(mapTaskResponse)
|
|
||||||
} catch {
|
|
||||||
// API unreachable – keep current values
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function mapTaskResponse(t: DashboardTaskResponse): OpenTask {
|
|
||||||
const source: OpenTask['source'] = t.source === 'iris' ? 'iris' : 'bao'
|
|
||||||
// Format createdAt as relative time string (like "22:30")
|
|
||||||
const created = new Date(t.createdAt)
|
|
||||||
const now = new Date()
|
|
||||||
const diffMs = now.getTime() - created.getTime()
|
|
||||||
const diffMins = Math.floor(diffMs / 60000)
|
|
||||||
|
|
||||||
let createdAt: string
|
|
||||||
if (diffMins < 1) {
|
|
||||||
createdAt = 'just now'
|
|
||||||
} else if (diffMins < 60) {
|
|
||||||
createdAt = `${diffMins}m`
|
|
||||||
} else if (diffMins < 1440) {
|
|
||||||
createdAt = `${Math.floor(diffMins / 60)}h`
|
|
||||||
} else {
|
|
||||||
createdAt = created.toLocaleDateString('de-DE', { month: 'short', day: 'numeric' })
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: t.id,
|
|
||||||
title: t.title,
|
|
||||||
detail: t.detail ?? '',
|
|
||||||
source,
|
|
||||||
createdAt,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Chat Send ──
|
|
||||||
|
|
||||||
async function sendChatMessage(text: string): Promise<void> {
|
|
||||||
if (!text.trim()) return
|
|
||||||
|
|
||||||
// Optimistic add
|
|
||||||
chatMessages.value.push({
|
|
||||||
id: `user-${Date.now()}`,
|
|
||||||
sender: 'user',
|
|
||||||
text: text.trim(),
|
|
||||||
timestamp: Date.now(),
|
|
||||||
})
|
|
||||||
|
|
||||||
irisBusy.value = true
|
|
||||||
busySince.value = Date.now()
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await apiFetch('/api/dashboard/chat/send', {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify({ message: text.trim() }),
|
|
||||||
})
|
|
||||||
const data: DashboardSendResponse = await res.json()
|
|
||||||
|
|
||||||
if (data.ok && data.reply) {
|
|
||||||
chatMessages.value.push({
|
|
||||||
id: `iris-${Date.now()}`,
|
|
||||||
sender: 'iris',
|
|
||||||
text: data.reply,
|
|
||||||
timestamp: Date.now(),
|
|
||||||
})
|
|
||||||
} else if (data.error) {
|
|
||||||
chatMessages.value.push({
|
|
||||||
id: `error-${Date.now()}`,
|
|
||||||
sender: 'iris',
|
|
||||||
text: `⚠️ ${data.error}`,
|
|
||||||
timestamp: Date.now(),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
chatMessages.value.push({
|
|
||||||
id: `error-${Date.now()}`,
|
|
||||||
sender: 'iris',
|
|
||||||
text: '⚠️ Connection error. Please try again.',
|
|
||||||
timestamp: Date.now(),
|
|
||||||
})
|
|
||||||
} finally {
|
|
||||||
irisBusy.value = false
|
|
||||||
busySince.value = 0
|
|
||||||
irisFocus.value = text.trim()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Queue Operations ──
|
|
||||||
|
|
||||||
async function removeQueueItem(id: string): Promise<void> {
|
|
||||||
const item = queue.value.find(q => q.id === id)
|
|
||||||
if (!item) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await apiFetch(`/api/dashboard/queue/${encodeURIComponent(id)}?source=${item.source}`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
})
|
|
||||||
if (!res.ok) {
|
|
||||||
console.warn('[Dashboard] Failed to remove queue item', id, res.status)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// Remove from local state on success
|
|
||||||
const idx = queue.value.findIndex(q => q.id === id)
|
|
||||||
if (idx !== -1) queue.value.splice(idx, 1)
|
|
||||||
} catch {
|
|
||||||
console.warn('[Dashboard] Error removing queue item', id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveQueueItem(fromIdx: number, toIdx: number): void {
|
|
||||||
if (toIdx < 0 || toIdx >= queue.value.length) return
|
|
||||||
const [item] = queue.value.splice(fromIdx, 1)
|
|
||||||
queue.value.splice(toIdx, 0, item)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function changeQueuePriority(id: string, priority: QueueItem['priority']): Promise<void> {
|
|
||||||
const item = queue.value.find(q => q.id === id)
|
|
||||||
if (!item) return
|
|
||||||
|
|
||||||
// For cron jobs, just update locally (gateway manages its own priorities)
|
|
||||||
if (item.source === 'cron') {
|
|
||||||
item.priority = priority
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await apiFetch(`/api/dashboard/queue/${encodeURIComponent(id)}/priority`, {
|
|
||||||
method: 'PUT',
|
|
||||||
})
|
|
||||||
if (!res.ok) {
|
|
||||||
console.warn('[Dashboard] Failed to change priority', id, res.status)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// Update priority from API response
|
|
||||||
const data = await res.json()
|
|
||||||
if (data.priority) {
|
|
||||||
const normalized = data.priority.toLowerCase()
|
|
||||||
if (normalized === 'high' || normalized === 'medium' || normalized === 'low') {
|
|
||||||
item.priority = normalized as 'high' | 'medium' | 'low'
|
|
||||||
} else {
|
|
||||||
// Fallback: cycle locally
|
|
||||||
item.priority = priority
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
item.priority = priority
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
console.warn('[Dashboard] Error changing priority', id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Runtime ──
|
|
||||||
|
|
||||||
function startRuntime(): void {
|
|
||||||
const startTs = sessionStart
|
|
||||||
runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000)
|
|
||||||
runtimeInterval = setInterval(() => {
|
|
||||||
runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000)
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopRuntime(): void {
|
|
||||||
if (runtimeInterval) {
|
|
||||||
clearInterval(runtimeInterval)
|
|
||||||
runtimeInterval = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatRuntime = (seconds: number): string => {
|
|
||||||
const m = Math.floor(seconds / 60)
|
|
||||||
const s = seconds % 60
|
|
||||||
return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const irisRuntime = computed(() => formatRuntime(runtimeSeconds.value))
|
|
||||||
|
|
||||||
const getAgentRuntime = (_id: string): string => {
|
|
||||||
// Could be extended to track per-agent runtimes from API
|
|
||||||
return formatRuntime(runtimeSeconds.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Polling starten (nur einmal) ──
|
|
||||||
|
|
||||||
function startPolling(): void {
|
|
||||||
if (cleanupRegistered) return
|
|
||||||
cleanupRegistered = true
|
|
||||||
|
|
||||||
// Initial fetches
|
|
||||||
fetchStatus()
|
|
||||||
fetchAgents()
|
|
||||||
fetchOperations()
|
|
||||||
fetchChatMessages()
|
|
||||||
fetchQueue()
|
|
||||||
fetchTasks()
|
|
||||||
|
|
||||||
// Polling intervals
|
|
||||||
intervals.push(setInterval(fetchStatus, 5000))
|
|
||||||
intervals.push(setInterval(fetchAgents, 10000))
|
|
||||||
intervals.push(setInterval(fetchOperations, 10000))
|
|
||||||
intervals.push(setInterval(fetchChatMessages, 3000))
|
|
||||||
intervals.push(setInterval(fetchQueue, 10000))
|
|
||||||
intervals.push(setInterval(fetchTasks, 15000))
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopPolling(): void {
|
|
||||||
for (const interval of intervals) {
|
|
||||||
clearInterval(interval)
|
|
||||||
}
|
|
||||||
intervals.length = 0
|
|
||||||
cleanupRegistered = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Composable Export ──
|
|
||||||
|
|
||||||
export function useDashboardData() {
|
|
||||||
// Start polling on first call
|
|
||||||
startPolling()
|
|
||||||
|
|
||||||
return {
|
|
||||||
// State
|
|
||||||
agents,
|
|
||||||
openTasks,
|
|
||||||
feedEntries,
|
|
||||||
chatMessages,
|
|
||||||
irisBusy,
|
|
||||||
irisFocus,
|
|
||||||
busySince,
|
|
||||||
irisRuntime,
|
|
||||||
queue,
|
|
||||||
gatewayOk,
|
|
||||||
irisStatus,
|
|
||||||
pendingTasks,
|
|
||||||
activeAgents,
|
|
||||||
|
|
||||||
// Runtime
|
|
||||||
runtimeSeconds,
|
|
||||||
getAgentRuntime,
|
|
||||||
startRuntime,
|
|
||||||
stopRuntime,
|
|
||||||
formatRuntime,
|
|
||||||
|
|
||||||
// Actions
|
|
||||||
sendChatMessage,
|
|
||||||
removeQueueItem,
|
|
||||||
moveQueueItem,
|
|
||||||
changeQueuePriority,
|
|
||||||
|
|
||||||
// Fetch (for manual refresh)
|
|
||||||
fetchStatus,
|
|
||||||
fetchAgents,
|
|
||||||
fetchOperations,
|
|
||||||
fetchChatMessages,
|
|
||||||
fetchQueue,
|
|
||||||
fetchTasks,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,266 +0,0 @@
|
|||||||
import { ref, computed, onMounted, onUnmounted, nextTick, type Ref } from 'vue'
|
|
||||||
import type { AgentNodeData } from './useDashboardData'
|
|
||||||
|
|
||||||
export interface CardBox {
|
|
||||||
left: number
|
|
||||||
right: number
|
|
||||||
top: number
|
|
||||||
bottom: number
|
|
||||||
cx: number
|
|
||||||
cy: number
|
|
||||||
width: number
|
|
||||||
height: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ConnectionPath {
|
|
||||||
d: string
|
|
||||||
length: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useTeamNetworkSvg(
|
|
||||||
networkRef: Ref<HTMLElement | null>,
|
|
||||||
agents: Ref<AgentNodeData[]>,
|
|
||||||
heroId: Ref<string>,
|
|
||||||
isActive: (id: string) => boolean,
|
|
||||||
) {
|
|
||||||
// ── Layout ──
|
|
||||||
const cardPositions = ref<Record<string, CardBox>>({})
|
|
||||||
const svgWidth = ref(0)
|
|
||||||
const svgHeight = ref(0)
|
|
||||||
|
|
||||||
const childAgents = computed(() => agents.value.filter(a => a.id !== heroId.value))
|
|
||||||
|
|
||||||
function updatePositions() {
|
|
||||||
const el = networkRef.value
|
|
||||||
if (!el) return
|
|
||||||
const rect = el.getBoundingClientRect()
|
|
||||||
svgWidth.value = rect.width
|
|
||||||
svgHeight.value = rect.height
|
|
||||||
|
|
||||||
const cards = el.querySelectorAll('[data-agent-id]')
|
|
||||||
const positions: Record<string, CardBox> = {}
|
|
||||||
cards.forEach(card => {
|
|
||||||
const id = card.getAttribute('data-agent-id')
|
|
||||||
if (!id) return
|
|
||||||
const r = card.getBoundingClientRect()
|
|
||||||
positions[id] = {
|
|
||||||
left: r.left - rect.left,
|
|
||||||
right: r.left + r.width - rect.left,
|
|
||||||
top: r.top - rect.top,
|
|
||||||
bottom: r.top + r.height - rect.top,
|
|
||||||
cx: r.left + r.width / 2 - rect.left,
|
|
||||||
cy: r.top + r.height / 2 - rect.top,
|
|
||||||
width: r.width,
|
|
||||||
height: r.height,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
cardPositions.value = positions
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Connection paths ──
|
|
||||||
const connectionPaths = computed<Record<string, ConnectionPath | null>>(() => {
|
|
||||||
const result: Record<string, ConnectionPath | null> = {}
|
|
||||||
const pos = cardPositions.value
|
|
||||||
const iris = pos[heroId.value]
|
|
||||||
if (!iris) return result
|
|
||||||
|
|
||||||
const children = childAgents.value
|
|
||||||
const total = children.length
|
|
||||||
if (total === 0) return result
|
|
||||||
|
|
||||||
for (let idx = 0; idx < total; idx++) {
|
|
||||||
const agent = children[idx]
|
|
||||||
const agentPos = pos[agent.id]
|
|
||||||
if (!agentPos) {
|
|
||||||
result[agent.id] = null
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
// Spread start points across Iris bottom edge (30%-70% range)
|
|
||||||
const t = total > 1 ? idx / (total - 1) : 0.5
|
|
||||||
const startX = iris.left + iris.width * (0.38 + t * 0.24)
|
|
||||||
const startY = iris.bottom - 1
|
|
||||||
|
|
||||||
// Determine column: left or right of Iris center
|
|
||||||
const isLeftColumn = agentPos.cx < iris.cx
|
|
||||||
|
|
||||||
// End point: approach from side, 8px before card edge
|
|
||||||
const endX = isLeftColumn ? agentPos.right - 8 : agentPos.left + 8
|
|
||||||
const endY = agentPos.cy
|
|
||||||
|
|
||||||
// Bézier control points
|
|
||||||
const cp1x = startX
|
|
||||||
const cp1y = startY + 70
|
|
||||||
const cp2x = endX + (isLeftColumn ? 35 : -35)
|
|
||||||
const cp2y = endY - 10
|
|
||||||
|
|
||||||
const d = `M ${startX} ${startY} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX} ${endY}`
|
|
||||||
result[agent.id] = { d, length: 0 }
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
})
|
|
||||||
|
|
||||||
// ── Path refs (template ref functions) ──
|
|
||||||
const pathElements = ref<Record<string, SVGPathElement | null>>({})
|
|
||||||
const pulseElements = ref<Record<string, SVGPathElement | null>>({})
|
|
||||||
const pulseElements2 = ref<Record<string, SVGPathElement | null>>({})
|
|
||||||
const pulseOffsets = ref<Record<string, number>>({})
|
|
||||||
const pulseOffsets2 = ref<Record<string, number>>({})
|
|
||||||
|
|
||||||
function storePathRef(id: string) {
|
|
||||||
return (el: SVGPathElement | null) => {
|
|
||||||
pathElements.value[id] = el
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function storePulseRef(id: string) {
|
|
||||||
return (el: SVGPathElement | null) => {
|
|
||||||
pulseElements.value[id] = el
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function storePulseRef2(id: string) {
|
|
||||||
return (el: SVGPathElement | null) => {
|
|
||||||
pulseElements2.value[id] = el
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Pulse animation ──
|
|
||||||
let animFrameId: number | null = null
|
|
||||||
let lastAnimTime = 0
|
|
||||||
const speeds: Record<string, number> = {}
|
|
||||||
|
|
||||||
function refreshPathLengths() {
|
|
||||||
for (const id of childAgents.value.map(a => a.id)) {
|
|
||||||
const pathEl = pathElements.value[id]
|
|
||||||
const pulseEl = pulseElements.value[id]
|
|
||||||
const p = connectionPaths.value[id]
|
|
||||||
if (pathEl && p) {
|
|
||||||
p.length = pathEl.getTotalLength()
|
|
||||||
}
|
|
||||||
if (pulseEl && p && p.length > 0) {
|
|
||||||
if (pulseOffsets.value[id] === undefined) {
|
|
||||||
pulseOffsets.value[id] = 0
|
|
||||||
}
|
|
||||||
pulseEl.setAttribute('stroke-dasharray', `40 ${p.length}`)
|
|
||||||
pulseEl.setAttribute('stroke-dashoffset', String(-pulseOffsets.value[id]))
|
|
||||||
}
|
|
||||||
const pulseEl2 = pulseElements2.value[id]
|
|
||||||
if (pulseEl2 && p && p.length > 0) {
|
|
||||||
if (pulseOffsets2.value[id] === undefined) {
|
|
||||||
pulseOffsets2.value[id] = 0
|
|
||||||
}
|
|
||||||
pulseEl2.setAttribute('stroke-dasharray', `40 ${p.length}`)
|
|
||||||
pulseEl2.setAttribute('stroke-dashoffset', String(-pulseOffsets2.value[id]))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startPulseAnimation() {
|
|
||||||
refreshPathLengths()
|
|
||||||
|
|
||||||
for (const id of childAgents.value.map(a => a.id)) {
|
|
||||||
const p = connectionPaths.value[id]
|
|
||||||
if (p && p.length > 0) {
|
|
||||||
speeds[id] = p.length / 3000
|
|
||||||
if (pulseOffsets.value[id] === undefined) pulseOffsets.value[id] = 0
|
|
||||||
if (pulseOffsets2.value[id] === undefined) pulseOffsets2.value[id] = 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
lastAnimTime = performance.now()
|
|
||||||
|
|
||||||
function tick(now: number) {
|
|
||||||
const dt = now - lastAnimTime
|
|
||||||
lastAnimTime = now
|
|
||||||
|
|
||||||
const children = childAgents.value
|
|
||||||
for (let i = 0; i < children.length; i++) {
|
|
||||||
const id = children[i].id
|
|
||||||
const pathEl = pathElements.value[id]
|
|
||||||
const pulseEl = pulseElements.value[id]
|
|
||||||
const pulseEl2 = pulseElements2.value[id]
|
|
||||||
const p = connectionPaths.value[id]
|
|
||||||
if (!pathEl || !pulseEl || !p) continue
|
|
||||||
|
|
||||||
const len = p.length
|
|
||||||
if (len <= 0) continue
|
|
||||||
|
|
||||||
const speed = speeds[id] ?? len / 3000
|
|
||||||
const cycleLen = len + 40
|
|
||||||
|
|
||||||
// Pulse 1
|
|
||||||
const currentOffset = pulseOffsets.value[id] ?? 0
|
|
||||||
const newOffset = currentOffset + speed * dt
|
|
||||||
pulseOffsets.value[id] = newOffset > cycleLen ? newOffset % cycleLen : newOffset
|
|
||||||
pulseEl.setAttribute('stroke-dashoffset', String(-pulseOffsets.value[id]))
|
|
||||||
|
|
||||||
// Pulse 2 (offset by half cycle)
|
|
||||||
if (pulseEl2) {
|
|
||||||
const offset2 = (pulseOffsets.value[id] + cycleLen / 2) % cycleLen
|
|
||||||
pulseOffsets2.value[id] = offset2
|
|
||||||
pulseEl2.setAttribute('stroke-dashoffset', String(-offset2))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
animFrameId = requestAnimationFrame(tick)
|
|
||||||
}
|
|
||||||
|
|
||||||
animFrameId = requestAnimationFrame(tick)
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopPulseAnimation() {
|
|
||||||
if (animFrameId !== null) {
|
|
||||||
cancelAnimationFrame(animFrameId)
|
|
||||||
animFrameId = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ── Lifecycle ──
|
|
||||||
let resizeObserver: ResizeObserver | null = null
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await nextTick()
|
|
||||||
updatePositions()
|
|
||||||
|
|
||||||
// Wait for SVG to render so path refs are populated
|
|
||||||
await nextTick()
|
|
||||||
updatePositions()
|
|
||||||
refreshPathLengths()
|
|
||||||
|
|
||||||
startPulseAnimation()
|
|
||||||
|
|
||||||
resizeObserver = new ResizeObserver(() => {
|
|
||||||
updatePositions()
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
refreshPathLengths()
|
|
||||||
})
|
|
||||||
})
|
|
||||||
if (networkRef.value) {
|
|
||||||
resizeObserver.observe(networkRef.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
stopPulseAnimation()
|
|
||||||
resizeObserver?.disconnect()
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
cardPositions,
|
|
||||||
svgWidth,
|
|
||||||
svgHeight,
|
|
||||||
childAgents,
|
|
||||||
connectionPaths,
|
|
||||||
pathElements,
|
|
||||||
pulseElements,
|
|
||||||
pulseElements2,
|
|
||||||
pulseOffsets,
|
|
||||||
pulseOffsets2,
|
|
||||||
storePathRef,
|
|
||||||
storePulseRef,
|
|
||||||
storePulseRef2,
|
|
||||||
updatePositions,
|
|
||||||
refreshPathLengths,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -9,7 +9,6 @@ import AgentsIndexView from './views/AgentsIndexView.vue'
|
|||||||
import SecurityView from './views/SecurityView.vue'
|
import SecurityView from './views/SecurityView.vue'
|
||||||
import IncidentsView from './views/IncidentsView.vue'
|
import IncidentsView from './views/IncidentsView.vue'
|
||||||
import CalendarView from './views/CalendarView.vue'
|
import CalendarView from './views/CalendarView.vue'
|
||||||
import DashboardView from './views/DashboardView.vue'
|
|
||||||
import NexusLayout from './layouts/NexusLayout.vue'
|
import NexusLayout from './layouts/NexusLayout.vue'
|
||||||
import FlowBoard from './views/Dashboard/FlowBoard.vue'
|
import FlowBoard from './views/Dashboard/FlowBoard.vue'
|
||||||
|
|
||||||
@@ -17,15 +16,12 @@ const routes = [
|
|||||||
{ path: '/login', name: 'Login', component: LoginView, meta: { public: true } },
|
{ path: '/login', name: 'Login', component: LoginView, meta: { public: true } },
|
||||||
{ path: '/', redirect: '/dashboard' },
|
{ path: '/', redirect: '/dashboard' },
|
||||||
|
|
||||||
// V1 Dashboard (altes Layout – bleibt erhalten)
|
// V2 Dashboard (neues NexusLayout + FlowBoard)
|
||||||
{ path: '/dashboard', name: 'Dashboard', component: DashboardView },
|
|
||||||
|
|
||||||
// V2 Dashboard (neues NexusLayout)
|
|
||||||
{
|
{
|
||||||
path: '/dashboard/v2',
|
path: '/dashboard',
|
||||||
component: NexusLayout,
|
component: NexusLayout,
|
||||||
children: [
|
children: [
|
||||||
{ path: '', name: 'DashboardV2', component: FlowBoard },
|
{ path: '', name: 'Dashboard', component: FlowBoard },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -1,243 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, onUnmounted, ref } from 'vue'
|
|
||||||
import TaskCard from '../components/dashboard/TaskCard.vue'
|
|
||||||
import OperationsFeed from '../components/dashboard/OperationsFeed.vue'
|
|
||||||
import TeamNetwork from '../components/dashboard/TeamNetwork.vue'
|
|
||||||
import ChatPanel from '../components/dashboard/ChatPanel.vue'
|
|
||||||
import QueuePanel from '../components/dashboard/QueuePanel.vue'
|
|
||||||
import AgentModal from '../components/dashboard/AgentModal.vue'
|
|
||||||
import { useDashboardData } from '../composables/useDashboardData'
|
|
||||||
import type { AgentNodeData } from '../composables/useDashboardData'
|
|
||||||
|
|
||||||
const {
|
|
||||||
agents, openTasks, feedEntries, chatMessages,
|
|
||||||
irisBusy, irisFocus, queue,
|
|
||||||
getAgentRuntime, startRuntime, stopRuntime,
|
|
||||||
sendChatMessage, removeQueueItem, moveQueueItem, changeQueuePriority,
|
|
||||||
} = useDashboardData()
|
|
||||||
|
|
||||||
const selectedAgent = ref<AgentNodeData | null>(null)
|
|
||||||
|
|
||||||
function onAgentSelect(id: string) {
|
|
||||||
const agent = agents.value.find(a => a.id === id)
|
|
||||||
if (agent) selectedAgent.value = agent
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(startRuntime)
|
|
||||||
onUnmounted(stopRuntime)
|
|
||||||
|
|
||||||
function onQueueMoveUp(id: string): void {
|
|
||||||
const idx = queue.value.findIndex(q => q.id === id)
|
|
||||||
if (idx > 0) moveQueueItem(idx, idx - 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
function onQueueMoveDown(id: string): void {
|
|
||||||
const idx = queue.value.findIndex(q => q.id === id)
|
|
||||||
if (idx < queue.value.length - 1) moveQueueItem(idx, idx + 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
function onQueueExecuteNow(id: string): void {
|
|
||||||
const item = queue.value.find(q => q.id === id)
|
|
||||||
if (item) console.log('[Dashboard] Execute now:', item.text)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="dashboard">
|
|
||||||
<div class="col-left">
|
|
||||||
<section class="missions-section">
|
|
||||||
<TaskCard :tasks="openTasks" @new-task="console.log('New task requested')" @go-board="console.log('Go to Task Board')" />
|
|
||||||
</section>
|
|
||||||
<OperationsFeed :entries="feedEntries" />
|
|
||||||
</div>
|
|
||||||
<div class="col-center">
|
|
||||||
<!-- Quote Pill -->
|
|
||||||
<div class="quote-pill">
|
|
||||||
<span class="quote-text">"An autonomous organization of AI agents that does work for me and produces value 24/7"</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="team-header">
|
|
||||||
<h1 class="team-title">AI Team Network</h1>
|
|
||||||
<p class="team-subtitle">{{ agents.length }} AI agents, connected in real-time.</p>
|
|
||||||
<p class="team-description">Mission Control orchestriert ein Team spezialisierter Agenten — jeder mit eigener Identität, eigenem Workspace und klaren Verantwortlichkeiten. Die Pulse zeigen aktive Kommunikationsflüsse.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<TeamNetwork
|
|
||||||
hero-id="iris"
|
|
||||||
:agents="agents"
|
|
||||||
@select="onAgentSelect"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Legend -->
|
|
||||||
<div class="legend-row">
|
|
||||||
<div class="legend-item">
|
|
||||||
<span class="legend-dot active-pulse"></span>
|
|
||||||
<span>Aktive Verbindung</span>
|
|
||||||
</div>
|
|
||||||
<div class="legend-item">
|
|
||||||
<span class="legend-dot idle-pulse"></span>
|
|
||||||
<span>Idle</span>
|
|
||||||
</div>
|
|
||||||
<div class="legend-item">
|
|
||||||
<span class="legend-dot pulse-dot"></span>
|
|
||||||
<span>Datenfluss (Pulse)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-right">
|
|
||||||
<ChatPanel :messages="chatMessages" :iris-busy="irisBusy" :iris-focus="irisFocus" />
|
|
||||||
<QueuePanel :items="queue" @remove="removeQueueItem" @move-up="onQueueMoveUp" @move-down="onQueueMoveDown" @change-priority="changeQueuePriority" @execute-now="onQueueExecuteNow" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AgentModal
|
|
||||||
v-if="selectedAgent"
|
|
||||||
:agent="selectedAgent"
|
|
||||||
:runtime="getAgentRuntime(selectedAgent.id)"
|
|
||||||
@close="selectedAgent = null"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.dashboard {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 280px 1fr 320px;
|
|
||||||
gap: 14px;
|
|
||||||
height: 100%; min-height: 0;
|
|
||||||
animation: fade-in 0.35s ease-out;
|
|
||||||
}
|
|
||||||
@keyframes fade-in {
|
|
||||||
from { opacity: 0; transform: translateY(8px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
.dashboard ::-webkit-scrollbar { width: 5px; height: 5px; }
|
|
||||||
.dashboard ::-webkit-scrollbar-track { background: transparent; }
|
|
||||||
.dashboard ::-webkit-scrollbar-thumb { background: rgba(139,124,246,0.2); border-radius: 3px; }
|
|
||||||
.dashboard ::-webkit-scrollbar-thumb:hover { background: rgba(139,124,246,0.35); }
|
|
||||||
.col-left { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-right: 4px; }
|
|
||||||
.col-center { overflow-y: auto; padding: 0 4px; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
|
|
||||||
|
|
||||||
/* Quote Pill */
|
|
||||||
.quote-pill {
|
|
||||||
background: var(--nx-panel);
|
|
||||||
border: 1px solid rgba(139, 124, 246, 0.25);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 14px 22px;
|
|
||||||
box-shadow: 0 0 18px rgba(139, 124, 246, 0.06), inset 0 0 18px rgba(139, 124, 246, 0.03);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.quote-text {
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #9ea5b3;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Team Header */
|
|
||||||
.team-header {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.team-title {
|
|
||||||
font-size: 26px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e8eaf0;
|
|
||||||
margin: 0 0 6px;
|
|
||||||
}
|
|
||||||
.team-subtitle {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #7e8799;
|
|
||||||
margin: 0 0 4px;
|
|
||||||
}
|
|
||||||
.team-description {
|
|
||||||
font-size: 10.5px;
|
|
||||||
color: #6b7385;
|
|
||||||
margin: 0;
|
|
||||||
max-width: 560px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Legend */
|
|
||||||
.legend-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 24px;
|
|
||||||
padding: 12px 20px;
|
|
||||||
background: var(--nx-panel);
|
|
||||||
border: 1px solid var(--nx-line);
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
.legend-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #7e8799;
|
|
||||||
}
|
|
||||||
.legend-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.active-pulse {
|
|
||||||
background: #51d49a;
|
|
||||||
box-shadow: 0 0 6px rgba(81, 212, 154, 0.6);
|
|
||||||
}
|
|
||||||
.idle-pulse {
|
|
||||||
background: #3a3f4b;
|
|
||||||
}
|
|
||||||
.pulse-dot {
|
|
||||||
background: white;
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
animation: legend-pulse 1.5s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes legend-pulse {
|
|
||||||
0%, 100% { opacity: 0.3; transform: scale(0.8); }
|
|
||||||
50% { opacity: 1; transform: scale(1.2); }
|
|
||||||
}
|
|
||||||
.col-right { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding-left: 4px; }
|
|
||||||
.missions-section { display: flex; flex-direction: column; gap: 8px; }
|
|
||||||
.column-title { margin: 0; font-size: 13px; font-weight: 600; color: #e8eaf0; letter-spacing: 0.01em; }
|
|
||||||
/* Tablet: 2 columns — left+center together, right column alongside */
|
|
||||||
@media (max-width: 1100px) {
|
|
||||||
.dashboard {
|
|
||||||
grid-template-columns: 1fr 320px;
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
}
|
|
||||||
.col-left {
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 1;
|
|
||||||
}
|
|
||||||
.col-center {
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: 2;
|
|
||||||
}
|
|
||||||
.col-right {
|
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 1 / 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile: 1 column, everything stacked */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.dashboard {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.col-left, .col-center, .col-right {
|
|
||||||
grid-column: 1;
|
|
||||||
grid-row: auto;
|
|
||||||
overflow: visible;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.quote-pill { padding: 10px 14px; }
|
|
||||||
.quote-text { font-size: 10px; }
|
|
||||||
.team-title { font-size: 20px; }
|
|
||||||
.legend-row { gap: 12px; padding: 8px 12px; flex-wrap: wrap; }
|
|
||||||
.legend-item { font-size: 8px; gap: 4px; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user