developer
3c95281119
- 3-Spalten-Layout: Missions/Feed | Team Network | Chat/Queue - AI Team Network (Herzstück): Iris + 4 Agenten mit SVG-Linien - AgentNode: Workload-Ring, Pulse-Animation, Farbcodierung - AgentModal: Task, Goal, Progress, Working Feed - MissionCard: Glass-Morphism, Progress-Bar, Status-Badges - ChatPanel: Iris Chat mit Focus-Banner, Auto-Scroll - QueuePanel: Drag&Drop, Prioritäten, Force-Execute - Composables: useTimer, useDashboardData
156 lines
2.8 KiB
Vue
156 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { Activity } from '@lucide/vue'
|
|
import type { FeedEntry } from '../../composables/useDashboardData'
|
|
|
|
defineProps<{
|
|
entries: FeedEntry[]
|
|
}>()
|
|
</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 entries.slice(0, 8)"
|
|
: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>
|
|
</div>
|
|
</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: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.feed-empty {
|
|
text-align: center;
|
|
padding: 12px 0;
|
|
font-size: 10px;
|
|
color: #6b7385;
|
|
}
|
|
|
|
/* 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>
|