feat(v2): live sidebar counts, /dashboard = V2 default route, remove V1 dead code
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user