feat(v2): live sidebar counts, /dashboard = V2 default route, remove V1 dead code
This commit is contained in:
@@ -40,7 +40,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterView v-if="route.name === 'Login' || route.name === 'DashboardV2'" />
|
||||
<RouterView v-if="route.name === 'Login' || route.name === 'Dashboard'" />
|
||||
<div v-else class="shell">
|
||||
<AppSidebar
|
||||
: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 { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
import { useAgentStore } from '../../stores/agents'
|
||||
import { useTaskStore } from '../../stores/tasks'
|
||||
import { navigation, icons } from '../../composables/icons'
|
||||
import type { NavGroupDef } from '../../composables/icons'
|
||||
import NavGroup from './NavGroup.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const router = useRouter()
|
||||
const agentStore = useAgentStore()
|
||||
const taskStore = useTaskStore()
|
||||
|
||||
const ownerInitials = computed(() =>
|
||||
auth.user?.displayName?.split(' ').map(p => p[0]).join('').slice(0, 2).toUpperCase()
|
||||
@@ -17,6 +22,44 @@ function logout() {
|
||||
auth.logout()
|
||||
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>
|
||||
|
||||
<template>
|
||||
@@ -33,7 +76,7 @@ function logout() {
|
||||
<!-- Navigation -->
|
||||
<nav class="nav">
|
||||
<NavGroup
|
||||
v-for="(group, idx) in navigation"
|
||||
v-for="(group, idx) in dynamicNavigation"
|
||||
:key="idx"
|
||||
:label="group.group"
|
||||
:items="group.items"
|
||||
|
||||
@@ -56,9 +56,9 @@ export const navigation: NavGroupDef[] = [
|
||||
{
|
||||
group: 'Operations',
|
||||
items: [
|
||||
{ icon: 'grid', label: 'Dashboard', route: '/dashboard/v2', active: true },
|
||||
{ icon: 'cpu', label: 'Agenten', route: '/agents', count: '6' },
|
||||
{ icon: 'list', label: 'Task Board', route: '/tasks', count: '7' },
|
||||
{ icon: 'grid', label: 'Dashboard', route: '/dashboard', active: true },
|
||||
{ icon: 'cpu', label: 'Agenten', route: '/agents' },
|
||||
{ icon: 'list', label: 'Task Board', route: '/tasks' },
|
||||
{ icon: 'flow', label: 'Orchestrierung', route: '/orchestration' },
|
||||
],
|
||||
},
|
||||
@@ -66,14 +66,14 @@ export const navigation: NavGroupDef[] = [
|
||||
group: 'Knowledge',
|
||||
items: [
|
||||
{ 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
group: 'Infrastructure',
|
||||
items: [
|
||||
{ icon: 'server', label: 'Hosts · OpenClaw', route: '/hosts', count: '1' },
|
||||
{ icon: 'server', label: 'Hosts · OpenClaw', route: '/hosts' },
|
||||
{ icon: 'model', label: 'Modelle', route: '/models' },
|
||||
{ icon: 'activity', label: 'Activity Log', route: '/activity' },
|
||||
],
|
||||
@@ -83,7 +83,7 @@ export const navigation: NavGroupDef[] = [
|
||||
items: [
|
||||
{ icon: 'coin', label: 'Kosten & Tokens', route: '/costs' },
|
||||
{ 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 IncidentsView from './views/IncidentsView.vue'
|
||||
import CalendarView from './views/CalendarView.vue'
|
||||
import DashboardView from './views/DashboardView.vue'
|
||||
import NexusLayout from './layouts/NexusLayout.vue'
|
||||
import FlowBoard from './views/Dashboard/FlowBoard.vue'
|
||||
|
||||
@@ -17,15 +16,12 @@ const routes = [
|
||||
{ path: '/login', name: 'Login', component: LoginView, meta: { public: true } },
|
||||
{ path: '/', redirect: '/dashboard' },
|
||||
|
||||
// V1 Dashboard (altes Layout – bleibt erhalten)
|
||||
{ path: '/dashboard', name: 'Dashboard', component: DashboardView },
|
||||
|
||||
// V2 Dashboard (neues NexusLayout)
|
||||
// V2 Dashboard (neues NexusLayout + FlowBoard)
|
||||
{
|
||||
path: '/dashboard/v2',
|
||||
path: '/dashboard',
|
||||
component: NexusLayout,
|
||||
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