Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f037aa2eeb | |||
| e6520fc26d | |||
| c9d8852609 | |||
| 11e9a257a1 | |||
| ead202ad8b | |||
| effc86e15b |
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Plus, Circle } from '@lucide/vue'
|
||||
import { Plus, Circle, ChevronRight } from '@lucide/vue'
|
||||
import type { OpenTask } from '../../composables/useDashboardData'
|
||||
|
||||
defineProps<{
|
||||
@@ -9,6 +9,7 @@ defineProps<{
|
||||
|
||||
const emit = defineEmits<{
|
||||
newTask: []
|
||||
'go-board': []
|
||||
}>()
|
||||
|
||||
const expandedId = ref<string | null>(null)
|
||||
@@ -67,6 +68,11 @@ function toggleExpand(id: string) {
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
|
||||
<button class="task-board-btn" @click="emit('go-board')">
|
||||
<span>Zum Task Board</span>
|
||||
<ChevronRight :size="14" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -223,6 +229,20 @@ function toggleExpand(id: string) {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.task-board-btn {
|
||||
width: 100%; margin-top: 12px; padding: 10px;
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
background: rgba(139, 124, 246, 0.08);
|
||||
border: 1px solid rgba(139, 124, 246, 0.15);
|
||||
border-radius: 10px; color: #a78bfa;
|
||||
font-size: 10px; font-weight: 600; cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.task-board-btn:hover {
|
||||
background: rgba(139, 124, 246, 0.15);
|
||||
border-color: rgba(139, 124, 246, 0.3);
|
||||
}
|
||||
|
||||
/* TransitionGroup */
|
||||
.task-enter-active {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@@ -76,7 +76,7 @@ function onDragEnd(): void {
|
||||
<div class="queue-header" @click="expanded = !expanded">
|
||||
<div class="queue-header-left">
|
||||
<ListTodo :size="14" class="queue-icon" />
|
||||
<h2>Queue</h2>
|
||||
<h2>Chat Queue</h2>
|
||||
<span class="queue-count">{{ items.length }}</span>
|
||||
</div>
|
||||
<button class="queue-toggle" aria-label="Toggle">
|
||||
|
||||
@@ -13,6 +13,7 @@ interface AgentData {
|
||||
hero?: boolean
|
||||
task?: string
|
||||
runtime?: string
|
||||
model?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -172,9 +173,17 @@ function refreshPathLengths() {
|
||||
if (pulseOffsets.value[id] === undefined) {
|
||||
pulseOffsets.value[id] = 0
|
||||
}
|
||||
pulseEl.setAttribute('stroke-dasharray', `10 ${p.length}`)
|
||||
pulseEl.setAttribute('stroke-dasharray', `40 ${p.length}`)
|
||||
pulseEl.setAttribute('stroke-dashoffset', String(-pulseOffsets.value[id]))
|
||||
}
|
||||
const pulseEl2 = pulseElements2.value[id]
|
||||
if (pulseEl2 && p && p.length > 0) {
|
||||
if (pulseOffsets2.value[id] === undefined) {
|
||||
pulseOffsets2.value[id] = 0
|
||||
}
|
||||
pulseEl2.setAttribute('stroke-dasharray', `40 ${p.length}`)
|
||||
pulseEl2.setAttribute('stroke-dashoffset', String(-pulseOffsets2.value[id]))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -190,6 +199,9 @@ function startPulseAnimation() {
|
||||
if (pulseOffsets.value[id] === undefined) {
|
||||
pulseOffsets.value[id] = 0
|
||||
}
|
||||
if (pulseOffsets2.value[id] === undefined) {
|
||||
pulseOffsets2.value[id] = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -204,18 +216,28 @@ function startPulseAnimation() {
|
||||
const id = children[i].id
|
||||
const pathEl = pathElements.value[id]
|
||||
const pulseEl = pulseElements.value[id]
|
||||
const pulseEl2 = pulseElements2.value[id]
|
||||
const p = connectionPaths.value[id]
|
||||
if (!pathEl || !pulseEl || !p) continue
|
||||
|
||||
const len = p.length
|
||||
if (len <= 0) continue
|
||||
|
||||
const currentOffset = pulseOffsets.value[id] ?? 0
|
||||
const newOffset = currentOffset + (speeds[id] ?? len / 3000) * dt
|
||||
const cycleLen = len + 10
|
||||
pulseOffsets.value[id] = newOffset > cycleLen ? newOffset % cycleLen : newOffset
|
||||
const speed = speeds[id] ?? len / 3000
|
||||
const cycleLen = len + 40
|
||||
|
||||
// Pulse 1
|
||||
const currentOffset = pulseOffsets.value[id] ?? 0
|
||||
const newOffset = currentOffset + speed * dt
|
||||
pulseOffsets.value[id] = newOffset > cycleLen ? newOffset % cycleLen : newOffset
|
||||
pulseEl.setAttribute('stroke-dashoffset', String(-pulseOffsets.value[id]))
|
||||
|
||||
// Pulse 2 (offset by half cycle)
|
||||
if (pulseEl2) {
|
||||
const offset2 = (pulseOffsets.value[id] + cycleLen / 2) % cycleLen
|
||||
pulseOffsets2.value[id] = offset2
|
||||
pulseEl2.setAttribute('stroke-dashoffset', String(-offset2))
|
||||
}
|
||||
}
|
||||
|
||||
animFrameId = requestAnimationFrame(tick)
|
||||
@@ -316,7 +338,7 @@ onUnmounted(() => {
|
||||
opacity="0.5"
|
||||
/>
|
||||
|
||||
<!-- Pulse line (white dashed segment moving along) -->
|
||||
<!-- Pulse line 1 (white dashed segment moving along) -->
|
||||
<path
|
||||
v-if="connectionPaths[agent.id]"
|
||||
:ref="storePulseRef(agent.id)"
|
||||
@@ -328,6 +350,19 @@ onUnmounted(() => {
|
||||
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>
|
||||
|
||||
@@ -362,6 +397,7 @@ onUnmounted(() => {
|
||||
{{ hero.task }}
|
||||
</span>
|
||||
<span v-if="hero.runtime" class="node-runtime">{{ hero.runtime }}</span>
|
||||
<span v-if="hero.model" class="node-model">{{ hero.model }}</span>
|
||||
</div>
|
||||
<div class="card-tags">
|
||||
<span v-for="tag in hero.tags" :key="tag" class="card-tag" :style="{ background: `${hero.color}18`, color: hero.color }">{{ tag }}</span>
|
||||
@@ -409,6 +445,7 @@ onUnmounted(() => {
|
||||
{{ agent.task }}
|
||||
</span>
|
||||
<span v-if="agent.runtime" class="node-runtime">{{ agent.runtime }}</span>
|
||||
<span v-if="agent.model" class="node-model">{{ agent.model }}</span>
|
||||
</div>
|
||||
<div class="card-tags">
|
||||
<span v-for="tag in agent.tags" :key="tag" class="card-tag" :style="{ background: `${agent.color}18`, color: agent.color }">{{ tag }}</span>
|
||||
@@ -471,24 +508,31 @@ onUnmounted(() => {
|
||||
|
||||
/* ── Agent Card (inlined from old AgentCard.vue) ── */
|
||||
.agent-card {
|
||||
background: var(--panel, #11141b);
|
||||
border: 1px solid var(--line, #1f2330);
|
||||
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;
|
||||
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 {
|
||||
border-color: rgba(139, 124, 246, 0.2);
|
||||
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);
|
||||
}
|
||||
@@ -567,6 +611,13 @@ onUnmounted(() => {
|
||||
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;
|
||||
}
|
||||
|
||||
/* ── Tags ── */
|
||||
.card-tags {
|
||||
|
||||
@@ -5,8 +5,13 @@ export interface AgentNodeData {
|
||||
name: string
|
||||
role: string
|
||||
description: string
|
||||
tags: string[]
|
||||
color: string
|
||||
icon: string
|
||||
task: string
|
||||
runtime: string
|
||||
model?: string
|
||||
hero?: boolean
|
||||
currentTask: string
|
||||
goal: string
|
||||
progress: number
|
||||
@@ -103,14 +108,19 @@ export function useDashboardData() {
|
||||
name: 'Iris',
|
||||
role: 'Chief of Staff',
|
||||
description: 'Koordiniert, delegiert, hält das Team tight. Die erste Anlaufstelle zwischen Boss und Maschine.',
|
||||
tags: ['Orchestration', 'Delegation', 'Approval'],
|
||||
color: '#8b7cf6',
|
||||
icon: 'bot',
|
||||
hero: true,
|
||||
task: 'Orchestrating Nexus Dashboard redesign',
|
||||
runtime: '14:23',
|
||||
currentTask: 'Orchestrating Nexus Dashboard redesign',
|
||||
goal: 'Complete Mission Control v3',
|
||||
progress: 85,
|
||||
workload: 55,
|
||||
active: true,
|
||||
runtimeSeconds: 28800,
|
||||
model: 'GPT-5.4',
|
||||
workingFeed: [
|
||||
{ time: '22:38', text: 'Analyzed user feedback on Dashboard' },
|
||||
{ time: '22:36', text: 'Delegated card redesign to Developer' },
|
||||
@@ -128,8 +138,11 @@ export function useDashboardData() {
|
||||
name: 'Developer',
|
||||
role: 'Backend & Frontend',
|
||||
description: 'Implements features across the stack with TypeScript, C#, and Vue.',
|
||||
tags: ['Coding', 'Development', 'Builds'],
|
||||
color: '#3b82f6',
|
||||
icon: 'code',
|
||||
task: 'Building Dungeon System API endpoints',
|
||||
runtime: '01:00',
|
||||
currentTask: 'Building Dungeon System API endpoints',
|
||||
goal: 'Complete Dungeon CRUD + room generation',
|
||||
progress: 62,
|
||||
@@ -147,14 +160,18 @@ export function useDashboardData() {
|
||||
{ time: '22:23', text: 'Designing RoomFactory interface' },
|
||||
{ time: '22:24', text: 'Implementing corridor connection logic' },
|
||||
],
|
||||
model: 'DeepSeek V4 Flash',
|
||||
},
|
||||
{
|
||||
id: 'devops',
|
||||
name: 'DevOps',
|
||||
role: 'Infrastructure & CI/CD',
|
||||
description: 'Manages Docker, deployment pipelines, and system reliability.',
|
||||
tags: ['Deployment', 'Docker', 'CI/CD'],
|
||||
color: '#eab308',
|
||||
icon: 'server',
|
||||
task: 'Optimizing Docker Compose caching',
|
||||
runtime: '00:30',
|
||||
currentTask: 'Optimizing Docker Compose caching',
|
||||
goal: 'Reduce build times by 40%',
|
||||
progress: 45,
|
||||
@@ -172,14 +189,18 @@ export function useDashboardData() {
|
||||
{ time: '22:21', text: 'Benchmarking multi-stage vs single-stage' },
|
||||
{ time: '22:22', text: 'Calculating potential speedup from caching' },
|
||||
],
|
||||
model: 'DeepSeek V4 Pro',
|
||||
},
|
||||
{
|
||||
id: 'researcher',
|
||||
name: 'Researcher',
|
||||
role: 'Analysis & Documentation',
|
||||
description: 'Researches APIs, patterns, and best practices. Maintains docs.',
|
||||
tags: ['Research', 'Analysis', 'Docs'],
|
||||
color: '#22c55e',
|
||||
icon: 'search',
|
||||
task: 'Analyzing WebSocket alternatives',
|
||||
runtime: '00:45',
|
||||
currentTask: 'Analyzing WebSocket alternatives',
|
||||
goal: 'Recommend real-time communication strategy',
|
||||
progress: 30,
|
||||
@@ -196,14 +217,18 @@ export function useDashboardData() {
|
||||
{ time: '22:19', text: 'Checking SSE browser support matrix' },
|
||||
{ time: '22:20', text: 'Drafting recommendation summary' },
|
||||
],
|
||||
model: 'DeepSeek V4 Pro',
|
||||
},
|
||||
{
|
||||
id: 'reviewer',
|
||||
name: 'Reviewer',
|
||||
role: 'Code Quality & Testing',
|
||||
description: 'Reviews pull requests, enforces standards, runs test suites.',
|
||||
tags: ['Code Review', 'Testing', 'Quality'],
|
||||
color: '#a855f7',
|
||||
icon: 'shield',
|
||||
task: 'Reviewing Dungeon System PR',
|
||||
runtime: '00:15',
|
||||
currentTask: 'Reviewing Dungeon System PR',
|
||||
goal: 'Zero critical findings before merge',
|
||||
progress: 80,
|
||||
@@ -221,6 +246,7 @@ export function useDashboardData() {
|
||||
{ time: '22:16', text: 'Checking RoomValidator edge cases' },
|
||||
{ time: '22:17', text: 'Verifying integration test coverage' },
|
||||
],
|
||||
model: 'DeepSeek V4 Pro',
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ function onQueueExecuteNow(id: string): void {
|
||||
<div class="dashboard">
|
||||
<div class="col-left">
|
||||
<section class="missions-section">
|
||||
<TaskCard :tasks="openTasks" @new-task="console.log('New task requested')" />
|
||||
<TaskCard :tasks="openTasks" @new-task="console.log('New task requested')" @go-board="console.log('Go to Task Board')" />
|
||||
</section>
|
||||
<OperationsFeed :entries="feedEntries" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user