Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 702692cf0c | |||
| 51d1917a7b | |||
| 85f3400076 | |||
| a5cbe98f25 | |||
| 5b0e3a19f6 | |||
| e1d6b1eeb3 | |||
| afcbf941a9 | |||
| 49b9778872 |
@@ -95,11 +95,11 @@ public class DashboardController(OpenClawGatewayClient gateway, ILogger<Dashboar
|
|||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var sessionKey = string.IsNullOrWhiteSpace(request.SessionKey)
|
var agentId = string.IsNullOrWhiteSpace(request.AgentId)
|
||||||
? "iris"
|
? "iris"
|
||||||
: request.SessionKey.Trim();
|
: request.AgentId.Trim();
|
||||||
|
|
||||||
return await gateway.SendChatMessageAsync(sessionKey, request.Message.Trim());
|
return await gateway.SendChatMessageAsync(agentId, request.Message.Trim());
|
||||||
}
|
}
|
||||||
catch (Exception ex)
|
catch (Exception ex)
|
||||||
{
|
{
|
||||||
@@ -119,7 +119,7 @@ public class DashboardController(OpenClawGatewayClient gateway, ILogger<Dashboar
|
|||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var key = string.IsNullOrWhiteSpace(sessionKey) ? "iris" : sessionKey.Trim();
|
var key = string.IsNullOrWhiteSpace(sessionKey) ? "agent:iris:main" : sessionKey.Trim();
|
||||||
var messages = await gateway.GetSessionHistoryAsync(key, Math.Clamp(limit, 1, 200), Math.Max(0, offset));
|
var messages = await gateway.GetSessionHistoryAsync(key, Math.Clamp(limit, 1, 200), Math.Max(0, offset));
|
||||||
|
|
||||||
// Filter: only user and assistant messages (exclude tool/system)
|
// Filter: only user and assistant messages (exclude tool/system)
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ public sealed record MessageEntry(
|
|||||||
|
|
||||||
public sealed record ChatRequest(
|
public sealed record ChatRequest(
|
||||||
string Message,
|
string Message,
|
||||||
string? SessionKey
|
string? AgentId
|
||||||
);
|
);
|
||||||
|
|
||||||
public sealed record ChatResponse(
|
public sealed record ChatResponse(
|
||||||
|
|||||||
@@ -145,24 +145,49 @@ public sealed class OpenClawGatewayClient(HttpClient httpClient, IConfiguration
|
|||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var result = await InvokeToolAsync("sessions_history", new { sessionKey, limit, offset });
|
var result = await InvokeToolAsync("sessions_history", new {
|
||||||
|
sessionKey, limit, offset,
|
||||||
|
includeTools = false
|
||||||
|
});
|
||||||
if (result is null) return new List<MessageEntry>();
|
if (result is null) return new List<MessageEntry>();
|
||||||
|
|
||||||
var messages = new List<MessageEntry>();
|
// sessions_history returns { details: { messages: [...] } }
|
||||||
var array = result as JsonArray ?? result.AsArray();
|
var messageArray = result["details"]?["messages"] as JsonArray;
|
||||||
if (array is null) return messages;
|
if (messageArray is null) return new List<MessageEntry>();
|
||||||
|
|
||||||
foreach (var msg in array)
|
var messages = new List<MessageEntry>();
|
||||||
|
foreach (var msg in messageArray.Cast<JsonNode?>())
|
||||||
{
|
{
|
||||||
if (msg is null) continue;
|
if (msg is null) continue;
|
||||||
var role = msg["role"]?.GetValue<string>() ?? "";
|
var role = msg["role"]?.GetValue<string>() ?? "";
|
||||||
var content = msg["content"]?.GetValue<string>() ?? "";
|
// Skip non-user/assistant roles
|
||||||
|
if (role is not ("user" or "assistant")) continue;
|
||||||
|
|
||||||
|
// Content is an array of blocks: [{type: "text"/"thinking", text: "..."}]
|
||||||
|
// Extract only pure text blocks, skip thinking-only messages
|
||||||
|
var contentBlocks = msg["content"] as JsonArray;
|
||||||
|
if (contentBlocks is null) continue;
|
||||||
|
|
||||||
|
var visibleTexts = new List<string>();
|
||||||
|
foreach (var block in contentBlocks.Cast<JsonNode?>())
|
||||||
|
{
|
||||||
|
if (block is null) continue;
|
||||||
|
var type = block["type"]?.GetValue<string>() ?? "";
|
||||||
|
var text = block["text"]?.GetValue<string>() ?? "";
|
||||||
|
if (type == "text" && !string.IsNullOrWhiteSpace(text))
|
||||||
|
visibleTexts.Add(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
var visibleContent = string.Join(" ", visibleTexts).Trim();
|
||||||
|
if (string.IsNullOrWhiteSpace(visibleContent)) continue;
|
||||||
|
|
||||||
|
// Skip system-only replies
|
||||||
|
if (visibleContent is "REPLY_SKIP" or "ANNOUNCE_SKIP") continue;
|
||||||
|
|
||||||
var timestamp = msg["timestamp"]?.GetValue<string>()
|
var timestamp = msg["timestamp"]?.GetValue<string>()
|
||||||
?? msg["ts"]?.GetValue<string>()
|
|
||||||
?? msg["createdAt"]?.GetValue<string>()
|
|
||||||
?? DateTimeOffset.UtcNow.ToString("o");
|
?? DateTimeOffset.UtcNow.ToString("o");
|
||||||
|
|
||||||
messages.Add(new MessageEntry(role, content, timestamp));
|
messages.Add(new MessageEntry(role, visibleContent, timestamp));
|
||||||
}
|
}
|
||||||
|
|
||||||
return messages;
|
return messages;
|
||||||
@@ -173,18 +198,21 @@ public sealed class OpenClawGatewayClient(HttpClient httpClient, IConfiguration
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public async Task<ChatResponse> SendChatMessageAsync(string sessionKey, string message)
|
public async Task<ChatResponse> SendChatMessageAsync(string agentId, string message)
|
||||||
{
|
{
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
var result = await InvokeToolAsync("sessions_send", new { sessionKey, message });
|
var result = await InvokeToolAsync("sessions_send", new { agentId, message });
|
||||||
if (result is null) return new ChatResponse(false, null, "Gateway nicht erreichbar");
|
if (result is null) return new ChatResponse(false, null, "Gateway nicht erreichbar");
|
||||||
|
|
||||||
var ok = result["ok"]?.GetValue<bool>() ?? false;
|
// sessions_send reply is in details.reply or content[0].text
|
||||||
var reply = result["reply"]?.GetValue<string>()
|
var details = result["details"];
|
||||||
|
var ok = (details?["status"]?.GetValue<string>() ?? result["status"]?.GetValue<string>()) == "ok";
|
||||||
|
var reply = details?["reply"]?.GetValue<string>()
|
||||||
|
?? result["reply"]?.GetValue<string>()
|
||||||
?? result["response"]?.GetValue<string>()
|
?? result["response"]?.GetValue<string>()
|
||||||
?? result["content"]?[0]?["text"]?.GetValue<string>();
|
?? result["content"]?[0]?["text"]?.GetValue<string>();
|
||||||
var error = result["error"]?.GetValue<string>();
|
var error = details?["error"]?.GetValue<string>() ?? result["error"]?.GetValue<string>();
|
||||||
|
|
||||||
return new ChatResponse(ok, reply, error);
|
return new ChatResponse(ok, reply, error);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
import { ref, nextTick, watch } from 'vue'
|
import { ref, nextTick, watch } from 'vue'
|
||||||
import { Bot, Send, LoaderCircle, Maximize2, X } from '@lucide/vue'
|
import { Bot, Send, LoaderCircle, Maximize2, X } from '@lucide/vue'
|
||||||
import type { ChatMessage } from '../../composables/useDashboardData'
|
import type { ChatMessage } from '../../composables/useDashboardData'
|
||||||
|
import { useDashboardData } from '../../composables/useDashboardData'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
messages: ChatMessage[]
|
messages: ChatMessage[]
|
||||||
@@ -9,9 +10,7 @@ const props = defineProps<{
|
|||||||
irisFocus: string
|
irisFocus: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const { sendChatMessage } = useDashboardData()
|
||||||
send: [text: string]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const inputText = ref('')
|
const inputText = ref('')
|
||||||
const chatListRef = ref<HTMLElement | null>(null)
|
const chatListRef = ref<HTMLElement | null>(null)
|
||||||
@@ -20,7 +19,7 @@ const chatModalOpen = ref(false)
|
|||||||
|
|
||||||
function sendMessage(): void {
|
function sendMessage(): void {
|
||||||
if (!inputText.value.trim()) return
|
if (!inputText.value.trim()) return
|
||||||
emit('send', inputText.value)
|
sendChatMessage(inputText.value)
|
||||||
inputText.value = ''
|
inputText.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,13 @@
|
|||||||
import { ref, reactive, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
// ── Shared State (singleton: same state regardless of how many times useDashboardData() is called) ──
|
||||||
|
const sessionStart = Date.now()
|
||||||
|
|
||||||
|
// Intervals registry for cleanup
|
||||||
|
const intervals: ReturnType<typeof setInterval>[] = []
|
||||||
|
let cleanupRegistered = false
|
||||||
|
|
||||||
|
// ── Interfaces (exported for components) ──
|
||||||
|
|
||||||
export interface AgentNodeData {
|
export interface AgentNodeData {
|
||||||
id: string
|
id: string
|
||||||
@@ -49,260 +58,399 @@ export interface QueueItem {
|
|||||||
waitTime: string
|
waitTime: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const now = Date.now()
|
// ── API Response Interfaces ──
|
||||||
|
|
||||||
export function useDashboardData() {
|
interface DashboardStatusResponse {
|
||||||
const sessionStart = Date.now()
|
gatewayOk: boolean
|
||||||
|
irisStatus: string
|
||||||
|
activeAgents: number
|
||||||
|
pendingTasks: number
|
||||||
|
}
|
||||||
|
|
||||||
// Runtime counter
|
interface DashboardAgentInfo {
|
||||||
const runtimeSeconds = ref(0)
|
id: string
|
||||||
let runtimeInterval: ReturnType<typeof setInterval> | null = null
|
name: string
|
||||||
|
role: string
|
||||||
|
model: string
|
||||||
|
isActive: boolean
|
||||||
|
currentTask: string
|
||||||
|
}
|
||||||
|
|
||||||
function startRuntime() {
|
interface DashboardOperationEntry {
|
||||||
const startTs = sessionStart
|
agent: string
|
||||||
runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000)
|
action: string
|
||||||
runtimeInterval = setInterval(() => {
|
timestamp: string
|
||||||
runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000)
|
time: string
|
||||||
}, 1000)
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function stopRuntime() {
|
interface DashboardChatMessage {
|
||||||
if (runtimeInterval) {
|
role: 'user' | 'assistant'
|
||||||
clearInterval(runtimeInterval)
|
content: string
|
||||||
runtimeInterval = null
|
timestamp: string
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
const formatRuntime = (seconds: number): string => {
|
interface DashboardSendResponse {
|
||||||
const m = Math.floor(seconds / 60)
|
ok: boolean
|
||||||
const s = seconds % 60
|
reply?: string
|
||||||
return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
error?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const irisRuntime = computed(() => formatRuntime(runtimeSeconds.value))
|
interface DashboardQueueItem {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
status: string
|
||||||
|
}
|
||||||
|
|
||||||
// Agent runtimes (simulated)
|
// ── Agent Catalog (static enrichment) ──
|
||||||
const agentStartTimes = reactive<Record<string, number>>({
|
|
||||||
iris: now - 28800000,
|
|
||||||
developer: now - 3600000,
|
|
||||||
devops: now - 1800000,
|
|
||||||
researcher: now - 2700000,
|
|
||||||
reviewer: now - 900000,
|
|
||||||
})
|
|
||||||
|
|
||||||
const getAgentRuntime = (id: string): string => {
|
const AGENT_CATALOG: Record<string, Partial<AgentNodeData>> = {
|
||||||
const start = agentStartTimes[id]
|
iris: {
|
||||||
if (!start) return '00:00'
|
|
||||||
const secs = Math.floor((now - start) / 1000)
|
|
||||||
const m = Math.floor(secs / 60)
|
|
||||||
const s = secs % 60
|
|
||||||
return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// Agents
|
|
||||||
const agents = ref<AgentNodeData[]>([
|
|
||||||
{
|
|
||||||
id: 'iris',
|
|
||||||
name: 'Iris',
|
|
||||||
role: 'Chief of Staff',
|
|
||||||
description: 'Koordiniert, delegiert, hält das Team tight. Die erste Anlaufstelle zwischen Boss und Maschine.',
|
description: 'Koordiniert, delegiert, hält das Team tight. Die erste Anlaufstelle zwischen Boss und Maschine.',
|
||||||
tags: ['Orchestration', 'Delegation', 'Approval'],
|
tags: ['Orchestration', 'Delegation', 'Approval'],
|
||||||
color: '#8b7cf6',
|
color: '#8b7cf6',
|
||||||
icon: 'bot',
|
icon: 'bot',
|
||||||
hero: true,
|
hero: true,
|
||||||
currentTask: 'Orchestrating Nexus Dashboard redesign',
|
|
||||||
goal: 'Complete Mission Control v3',
|
goal: 'Complete Mission Control v3',
|
||||||
progress: 85,
|
progress: 85,
|
||||||
workload: 55,
|
workload: 55,
|
||||||
active: true,
|
workingFeed: [],
|
||||||
runtimeSeconds: 28800,
|
thinkingStream: [],
|
||||||
model: 'GPT-5.4',
|
|
||||||
workingFeed: [
|
|
||||||
{ time: '22:38', text: 'Analyzed user feedback on Dashboard' },
|
|
||||||
{ time: '22:36', text: 'Delegated card redesign to Developer' },
|
|
||||||
{ time: '22:34', text: 'Verifying full-width layout deployment' },
|
|
||||||
{ time: '22:32', text: 'Reviewing AgentModal integration' },
|
|
||||||
],
|
|
||||||
thinkingStream: [
|
|
||||||
{ time: '22:24', text: 'Analysing constraint: full-width layout' },
|
|
||||||
{ time: '22:25', text: 'Removing max-width from global CSS' },
|
|
||||||
{ time: '22:26', text: 'Verifying Dashboard grid reflow' },
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
developer: {
|
||||||
id: 'developer',
|
|
||||||
name: 'Developer',
|
|
||||||
role: 'Backend & Frontend',
|
|
||||||
description: 'Implements features across the stack with TypeScript, C#, and Vue.',
|
description: 'Implements features across the stack with TypeScript, C#, and Vue.',
|
||||||
tags: ['Coding', 'Development', 'Builds'],
|
tags: ['Coding', 'Development', 'Builds'],
|
||||||
color: '#3b82f6',
|
color: '#3b82f6',
|
||||||
icon: 'code',
|
icon: 'code',
|
||||||
currentTask: 'Building Dungeon System API endpoints',
|
|
||||||
goal: 'Complete Dungeon CRUD + room generation',
|
goal: 'Complete Dungeon CRUD + room generation',
|
||||||
progress: 62,
|
progress: 62,
|
||||||
workload: 65,
|
workload: 65,
|
||||||
active: true,
|
workingFeed: [],
|
||||||
runtimeSeconds: 3600,
|
thinkingStream: [],
|
||||||
workingFeed: [
|
|
||||||
{ time: '22:30', text: 'Created DungeonController' },
|
|
||||||
{ time: '22:28', text: 'Defined dungeon schema' },
|
|
||||||
{ time: '22:26', text: 'Implementing room generation algorithm' },
|
|
||||||
{ time: '22:24', text: 'Writing unit tests for RoomFactory' },
|
|
||||||
],
|
|
||||||
thinkingStream: [
|
|
||||||
{ time: '22:22', text: 'Parsing dungeon spec from Iris' },
|
|
||||||
{ time: '22:23', text: 'Designing RoomFactory interface' },
|
|
||||||
{ time: '22:24', text: 'Implementing corridor connection logic' },
|
|
||||||
],
|
|
||||||
model: 'DeepSeek V4 Flash',
|
|
||||||
},
|
},
|
||||||
{
|
devops: {
|
||||||
id: 'devops',
|
|
||||||
name: 'DevOps',
|
|
||||||
role: 'Infrastructure & CI/CD',
|
|
||||||
description: 'Manages Docker, deployment pipelines, and system reliability.',
|
description: 'Manages Docker, deployment pipelines, and system reliability.',
|
||||||
tags: ['Deployment', 'Docker', 'CI/CD'],
|
tags: ['Deployment', 'Docker', 'CI/CD'],
|
||||||
color: '#eab308',
|
color: '#eab308',
|
||||||
icon: 'server',
|
icon: 'server',
|
||||||
currentTask: 'Optimizing Docker Compose caching',
|
|
||||||
goal: 'Reduce build times by 40%',
|
goal: 'Reduce build times by 40%',
|
||||||
progress: 45,
|
progress: 45,
|
||||||
workload: 40,
|
workload: 40,
|
||||||
active: false,
|
workingFeed: [],
|
||||||
runtimeSeconds: 1800,
|
thinkingStream: [],
|
||||||
workingFeed: [
|
|
||||||
{ time: '22:20', text: 'Analyzed Docker layer cache' },
|
|
||||||
{ time: '22:18', text: 'Optimized COPY order in Dockerfile' },
|
|
||||||
{ time: '22:16', text: 'Added .dockerignore for node_modules' },
|
|
||||||
{ time: '22:14', text: 'Testing incremental builds' },
|
|
||||||
],
|
|
||||||
thinkingStream: [
|
|
||||||
{ time: '22:20', text: 'Checking build cache hit rates' },
|
|
||||||
{ time: '22:21', text: 'Benchmarking multi-stage vs single-stage' },
|
|
||||||
{ time: '22:22', text: 'Calculating potential speedup from caching' },
|
|
||||||
],
|
|
||||||
model: 'DeepSeek V4 Pro',
|
|
||||||
},
|
},
|
||||||
{
|
researcher: {
|
||||||
id: 'researcher',
|
|
||||||
name: 'Researcher',
|
|
||||||
role: 'Analysis & Documentation',
|
|
||||||
description: 'Researches APIs, patterns, and best practices. Maintains docs.',
|
description: 'Researches APIs, patterns, and best practices. Maintains docs.',
|
||||||
tags: ['Research', 'Analysis', 'Docs'],
|
tags: ['Research', 'Analysis', 'Docs'],
|
||||||
color: '#22c55e',
|
color: '#22c55e',
|
||||||
icon: 'search',
|
icon: 'search',
|
||||||
currentTask: 'Analyzing WebSocket alternatives',
|
|
||||||
goal: 'Recommend real-time communication strategy',
|
goal: 'Recommend real-time communication strategy',
|
||||||
progress: 30,
|
progress: 30,
|
||||||
workload: 25,
|
workload: 25,
|
||||||
active: true,
|
workingFeed: [],
|
||||||
runtimeSeconds: 2700,
|
thinkingStream: [],
|
||||||
workingFeed: [
|
|
||||||
{ time: '22:18', text: 'Evaluated WebSocket vs SSE vs WebRTC' },
|
|
||||||
{ time: '22:17', text: 'Documented SignalR limitations' },
|
|
||||||
{ time: '22:16', text: 'Prototyping WebSocket fallback' },
|
|
||||||
],
|
|
||||||
thinkingStream: [
|
|
||||||
{ time: '22:18', text: 'Cross-referencing WebSocket latency benchmarks' },
|
|
||||||
{ time: '22:19', text: 'Checking SSE browser support matrix' },
|
|
||||||
{ time: '22:20', text: 'Drafting recommendation summary' },
|
|
||||||
],
|
|
||||||
model: 'DeepSeek V4 Pro',
|
|
||||||
},
|
},
|
||||||
{
|
reviewer: {
|
||||||
id: 'reviewer',
|
|
||||||
name: 'Reviewer',
|
|
||||||
role: 'Code Quality & Testing',
|
|
||||||
description: 'Reviews pull requests, enforces standards, runs test suites.',
|
description: 'Reviews pull requests, enforces standards, runs test suites.',
|
||||||
tags: ['Code Review', 'Testing', 'Quality'],
|
tags: ['Code Review', 'Testing', 'Quality'],
|
||||||
color: '#a855f7',
|
color: '#a855f7',
|
||||||
icon: 'shield',
|
icon: 'shield',
|
||||||
currentTask: 'Reviewing Dungeon System PR',
|
|
||||||
goal: 'Zero critical findings before merge',
|
goal: 'Zero critical findings before merge',
|
||||||
progress: 80,
|
progress: 80,
|
||||||
workload: 50,
|
workload: 50,
|
||||||
active: false,
|
workingFeed: [],
|
||||||
runtimeSeconds: 900,
|
thinkingStream: [],
|
||||||
workingFeed: [
|
|
||||||
{ time: '22:15', text: 'Reviewed DungeonController.cs' },
|
|
||||||
{ time: '22:14', text: 'Found 3 minor style issues' },
|
|
||||||
{ time: '22:13', text: 'Approved RoomValidator' },
|
|
||||||
{ time: '22:12', text: 'Running integration tests' },
|
|
||||||
],
|
|
||||||
thinkingStream: [
|
|
||||||
{ time: '22:15', text: 'Analyzing DungeonController PR diff' },
|
|
||||||
{ time: '22:16', text: 'Checking RoomValidator edge cases' },
|
|
||||||
{ time: '22:17', text: 'Verifying integration test coverage' },
|
|
||||||
],
|
|
||||||
model: 'DeepSeek V4 Pro',
|
|
||||||
},
|
},
|
||||||
])
|
}
|
||||||
|
|
||||||
// Open Tasks
|
function enrichAgent(api: DashboardAgentInfo): AgentNodeData {
|
||||||
const openTasks = ref<OpenTask[]>([
|
const catalog = AGENT_CATALOG[api.id] ?? AGENT_CATALOG['developer']
|
||||||
|
return {
|
||||||
|
id: api.id,
|
||||||
|
name: api.name,
|
||||||
|
role: api.role,
|
||||||
|
model: api.model,
|
||||||
|
currentTask: api.currentTask ?? 'Idle',
|
||||||
|
active: api.isActive,
|
||||||
|
description: catalog.description ?? '',
|
||||||
|
tags: catalog.tags ?? [],
|
||||||
|
color: catalog.color ?? '#6b7385',
|
||||||
|
icon: catalog.icon ?? 'bot',
|
||||||
|
hero: catalog.hero ?? false,
|
||||||
|
goal: catalog.goal ?? 'No goal set',
|
||||||
|
progress: catalog.progress ?? 0,
|
||||||
|
workload: catalog.workload ?? 0,
|
||||||
|
runtimeSeconds: 0,
|
||||||
|
workingFeed: catalog.workingFeed ?? [],
|
||||||
|
thinkingStream: catalog.thinkingStream ?? [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Helper: API Fetch with auth ──
|
||||||
|
|
||||||
|
async function apiFetch(path: string, init: RequestInit = {}): Promise<Response> {
|
||||||
|
const base = '' // same-origin proxy
|
||||||
|
return fetch(`${base}${path}`, {
|
||||||
|
...init,
|
||||||
|
credentials: 'include',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(init.headers as Record<string, string> ?? {}),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── State ──
|
||||||
|
|
||||||
|
// Status
|
||||||
|
const gatewayOk = ref(true)
|
||||||
|
const irisStatus = ref('Active')
|
||||||
|
const activeAgents = ref(0)
|
||||||
|
const pendingTasks = ref(0)
|
||||||
|
|
||||||
|
// Agents
|
||||||
|
const agents = ref<AgentNodeData[]>([])
|
||||||
|
|
||||||
|
// Chat
|
||||||
|
const chatMessages = ref<ChatMessage[]>([])
|
||||||
|
const irisBusy = ref(false)
|
||||||
|
const irisFocus = ref('')
|
||||||
|
|
||||||
|
// Operations Feed
|
||||||
|
const feedEntries = ref<FeedEntry[]>([])
|
||||||
|
|
||||||
|
// Open Tasks (mock only – no API endpoint)
|
||||||
|
const openTasks = ref<OpenTask[]>([
|
||||||
{ id: 't1', title: 'Agent Thinking Panel visualisieren', detail: 'Live-Animation der Denkprozesse im AgentModal', source: 'iris', createdAt: '22:30' },
|
{ id: 't1', title: 'Agent Thinking Panel visualisieren', detail: 'Live-Animation der Denkprozesse im AgentModal', source: 'iris', createdAt: '22:30' },
|
||||||
{ id: 't2', title: 'CI/CD Pipeline Monitoring Dashboard', detail: 'Echtzeit-Status der Gitea Actions im Dashboard', source: 'iris', createdAt: '21:15' },
|
{ id: 't2', title: 'CI/CD Pipeline Monitoring Dashboard', detail: 'Echtzeit-Status der Gitea Actions im Dashboard', source: 'iris', createdAt: '21:15' },
|
||||||
{ id: 't3', title: 'Dungeon System Dokumentation', detail: 'API-Doku für Room-Generation-Endpunkte schreiben', source: 'bao', createdAt: '20:00' },
|
{ id: 't3', title: 'Dungeon System Dokumentation', detail: 'API-Doku für Room-Generation-Endpunkte schreiben', source: 'bao', createdAt: '20:00' },
|
||||||
])
|
])
|
||||||
|
|
||||||
// Feed
|
// Queue
|
||||||
const ts = (offset: number) => new Date(now + offset).toISOString()
|
const queue = ref<QueueItem[]>([])
|
||||||
const feedEntries = ref<FeedEntry[]>([
|
|
||||||
{ time: '22:50', agent: 'Developer', action: 'Created DungeonController endpoints', timestamp: ts(-120000) },
|
|
||||||
{ time: '22:46', agent: 'DevOps', action: 'Optimized Docker COPY order for layer caching', timestamp: ts(-360000) },
|
|
||||||
{ time: '22:42', agent: 'Iris', action: 'Delegated room generation to Developer with spec', timestamp: ts(-600000) },
|
|
||||||
{ time: '22:35', agent: 'Researcher', action: 'Documented WebSocket vs SSE analysis results', timestamp: ts(-960000) },
|
|
||||||
{ time: '22:28', agent: 'Reviewer', action: 'Approved RoomValidator PR with minor fixes', timestamp: ts(-1200000) },
|
|
||||||
{ time: '22:18', agent: 'DevOps', action: 'Added .dockerignore for node_modules and build artifacts', timestamp: ts(-1500000) },
|
|
||||||
{ time: '22:08', agent: 'Iris', action: 'Broke down Dungeon System tasks into sub-tasks', timestamp: ts(-1800000) },
|
|
||||||
{ time: '21:55', agent: 'Developer', action: 'Defined dungeon schema models with validation', timestamp: ts(-2400000) },
|
|
||||||
])
|
|
||||||
|
|
||||||
// Chat
|
// Runtime
|
||||||
const chatMessages = ref<ChatMessage[]>([
|
const runtimeSeconds = ref(0)
|
||||||
{ id: 'm1', sender: 'iris', text: 'Guten Abend, Bao. Ready to continue the Dungeon System?', timestamp: now - 600000 },
|
let runtimeInterval: ReturnType<typeof setInterval> | null = null
|
||||||
{ id: 'm2', sender: 'user', text: "Yes, what's the status?", timestamp: now - 540000 },
|
|
||||||
{ id: 'm3', sender: 'iris', text: "Developer is at 62% on room generation. Reviewer approved the schema. I'd recommend focusing on the room connection logic next.", timestamp: now - 480000 },
|
|
||||||
])
|
|
||||||
|
|
||||||
const irisBusy = ref(true)
|
// ── Fetch Functions ──
|
||||||
const irisFocus = ref('Breaking down Dungeon System for DevOps and Developer')
|
|
||||||
|
|
||||||
// Queue
|
async function fetchStatus(): Promise<void> {
|
||||||
const queue = ref<QueueItem[]>([
|
try {
|
||||||
{ id: 'q1', text: 'Deploy latest dashboard build to preview', priority: 'high', waitTime: '2 min' },
|
const res = await apiFetch('/api/dashboard/status')
|
||||||
{ id: 'q2', text: 'Review infrastructure cost analysis', priority: 'medium', waitTime: '8 min' },
|
if (!res.ok) return
|
||||||
{ id: 'q3', text: 'Schedule B2 German lesson review', priority: 'low', waitTime: '15 min' },
|
const data: DashboardStatusResponse = await res.json()
|
||||||
{ id: 'q4', text: 'Update project roadmap document', priority: 'medium', waitTime: '12 min' },
|
gatewayOk.value = data.gatewayOk
|
||||||
])
|
irisStatus.value = data.irisStatus
|
||||||
|
activeAgents.value = data.activeAgents
|
||||||
|
pendingTasks.value = data.pendingTasks
|
||||||
|
} catch {
|
||||||
|
// API unreachable – keep current values
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function sendChat(text: string): void {
|
async function fetchAgents(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const res = await apiFetch('/api/dashboard/agents')
|
||||||
|
if (!res.ok) return
|
||||||
|
const data: DashboardAgentInfo[] = await res.json()
|
||||||
|
agents.value = data.map(enrichAgent)
|
||||||
|
} catch {
|
||||||
|
// API unreachable – keep current values
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchOperations(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const res = await apiFetch('/api/dashboard/operations?limit=20')
|
||||||
|
if (!res.ok) return
|
||||||
|
const data: DashboardOperationEntry[] = await res.json()
|
||||||
|
feedEntries.value = data.map((entry) => ({
|
||||||
|
time: entry.time,
|
||||||
|
agent: entry.agent,
|
||||||
|
action: entry.action,
|
||||||
|
timestamp: entry.timestamp,
|
||||||
|
}))
|
||||||
|
} catch {
|
||||||
|
// API unreachable – keep current values
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchChatMessages(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const res = await apiFetch('/api/dashboard/chat/messages?limit=50')
|
||||||
|
if (!res.ok) return
|
||||||
|
const data: DashboardChatMessage[] = await res.json()
|
||||||
|
// Merge instead of replace — only add messages not already present
|
||||||
|
const existingTexts = new Set(chatMessages.value.map(m => m.text))
|
||||||
|
const existingTimestamps = new Set(chatMessages.value.map(m => m.timestamp))
|
||||||
|
for (const msg of data) {
|
||||||
|
const msgTime = new Date(msg.timestamp).getTime()
|
||||||
|
if (existingTexts.has(msg.content) && existingTimestamps.has(msgTime)) continue
|
||||||
|
chatMessages.value.push({
|
||||||
|
id: `msg-${msgTime}-${msg.role}`,
|
||||||
|
sender: msg.role === 'assistant' ? 'iris' : 'user',
|
||||||
|
text: msg.content,
|
||||||
|
timestamp: msgTime,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// API unreachable – keep current values
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchQueue(): Promise<void> {
|
||||||
|
try {
|
||||||
|
const res = await apiFetch('/api/dashboard/queue')
|
||||||
|
if (!res.ok) return
|
||||||
|
const data: DashboardQueueItem[] = await res.json()
|
||||||
|
queue.value = data.map((item) => ({
|
||||||
|
id: item.id,
|
||||||
|
text: item.name,
|
||||||
|
priority: (item.status === 'high' || item.status === 'medium' || item.status === 'low')
|
||||||
|
? item.status as 'high' | 'medium' | 'low'
|
||||||
|
: 'medium',
|
||||||
|
waitTime: '--',
|
||||||
|
}))
|
||||||
|
} catch {
|
||||||
|
// API unreachable – keep current values
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Chat Send ──
|
||||||
|
|
||||||
|
async function sendChatMessage(text: string): Promise<void> {
|
||||||
if (!text.trim()) return
|
if (!text.trim()) return
|
||||||
|
|
||||||
|
// Optimistic add
|
||||||
chatMessages.value.push({
|
chatMessages.value.push({
|
||||||
id: `user-${Date.now()}`,
|
id: `user-${Date.now()}`,
|
||||||
sender: 'user',
|
sender: 'user',
|
||||||
text: text.trim(),
|
text: text.trim(),
|
||||||
timestamp: Date.now(),
|
timestamp: Date.now(),
|
||||||
})
|
})
|
||||||
}
|
|
||||||
|
|
||||||
function removeQueueItem(id: string): void {
|
irisBusy.value = true
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await apiFetch('/api/dashboard/chat/send', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ message: text.trim() }),
|
||||||
|
})
|
||||||
|
const data: DashboardSendResponse = await res.json()
|
||||||
|
|
||||||
|
if (data.ok && data.reply) {
|
||||||
|
chatMessages.value.push({
|
||||||
|
id: `iris-${Date.now()}`,
|
||||||
|
sender: 'iris',
|
||||||
|
text: data.reply,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
})
|
||||||
|
} else if (data.error) {
|
||||||
|
chatMessages.value.push({
|
||||||
|
id: `error-${Date.now()}`,
|
||||||
|
sender: 'iris',
|
||||||
|
text: `⚠️ ${data.error}`,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
chatMessages.value.push({
|
||||||
|
id: `error-${Date.now()}`,
|
||||||
|
sender: 'iris',
|
||||||
|
text: '⚠️ Connection error. Please try again.',
|
||||||
|
timestamp: Date.now(),
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
irisBusy.value = false
|
||||||
|
irisFocus.value = text.trim()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Queue Operations ──
|
||||||
|
|
||||||
|
function removeQueueItem(id: string): void {
|
||||||
const idx = queue.value.findIndex(q => q.id === id)
|
const idx = queue.value.findIndex(q => q.id === id)
|
||||||
if (idx !== -1) queue.value.splice(idx, 1)
|
if (idx !== -1) queue.value.splice(idx, 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
function moveQueueItem(fromIdx: number, toIdx: number): void {
|
function moveQueueItem(fromIdx: number, toIdx: number): void {
|
||||||
if (toIdx < 0 || toIdx >= queue.value.length) return
|
if (toIdx < 0 || toIdx >= queue.value.length) return
|
||||||
const [item] = queue.value.splice(fromIdx, 1)
|
const [item] = queue.value.splice(fromIdx, 1)
|
||||||
queue.value.splice(toIdx, 0, item)
|
queue.value.splice(toIdx, 0, item)
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeQueuePriority(id: string, priority: QueueItem['priority']): void {
|
function changeQueuePriority(id: string, priority: QueueItem['priority']): void {
|
||||||
const item = queue.value.find(q => q.id === id)
|
const item = queue.value.find(q => q.id === id)
|
||||||
if (item) item.priority = priority
|
if (item) item.priority = priority
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Runtime ──
|
||||||
|
|
||||||
|
function startRuntime(): void {
|
||||||
|
const startTs = sessionStart
|
||||||
|
runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000)
|
||||||
|
runtimeInterval = setInterval(() => {
|
||||||
|
runtimeSeconds.value = Math.floor((Date.now() - startTs) / 1000)
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopRuntime(): void {
|
||||||
|
if (runtimeInterval) {
|
||||||
|
clearInterval(runtimeInterval)
|
||||||
|
runtimeInterval = null
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatRuntime = (seconds: number): string => {
|
||||||
|
const m = Math.floor(seconds / 60)
|
||||||
|
const s = seconds % 60
|
||||||
|
return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const irisRuntime = computed(() => formatRuntime(runtimeSeconds.value))
|
||||||
|
|
||||||
|
const getAgentRuntime = (_id: string): string => {
|
||||||
|
// Could be extended to track per-agent runtimes from API
|
||||||
|
return formatRuntime(runtimeSeconds.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Polling starten (nur einmal) ──
|
||||||
|
|
||||||
|
function startPolling(): void {
|
||||||
|
if (cleanupRegistered) return
|
||||||
|
cleanupRegistered = true
|
||||||
|
|
||||||
|
// Initial fetches
|
||||||
|
fetchStatus()
|
||||||
|
fetchAgents()
|
||||||
|
fetchOperations()
|
||||||
|
fetchChatMessages()
|
||||||
|
fetchQueue()
|
||||||
|
|
||||||
|
// Polling intervals
|
||||||
|
intervals.push(setInterval(fetchStatus, 5000))
|
||||||
|
intervals.push(setInterval(fetchAgents, 10000))
|
||||||
|
intervals.push(setInterval(fetchOperations, 10000))
|
||||||
|
intervals.push(setInterval(fetchChatMessages, 3000))
|
||||||
|
intervals.push(setInterval(fetchQueue, 10000))
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopPolling(): void {
|
||||||
|
for (const interval of intervals) {
|
||||||
|
clearInterval(interval)
|
||||||
|
}
|
||||||
|
intervals.length = 0
|
||||||
|
cleanupRegistered = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Composable Export ──
|
||||||
|
|
||||||
|
export function useDashboardData() {
|
||||||
|
// Start polling on first call
|
||||||
|
startPolling()
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
// State
|
||||||
agents,
|
agents,
|
||||||
openTasks,
|
openTasks,
|
||||||
feedEntries,
|
feedEntries,
|
||||||
@@ -311,14 +459,29 @@ export function useDashboardData() {
|
|||||||
irisFocus,
|
irisFocus,
|
||||||
irisRuntime,
|
irisRuntime,
|
||||||
queue,
|
queue,
|
||||||
|
gatewayOk,
|
||||||
|
irisStatus,
|
||||||
|
pendingTasks,
|
||||||
|
activeAgents,
|
||||||
|
|
||||||
|
// Runtime
|
||||||
runtimeSeconds,
|
runtimeSeconds,
|
||||||
getAgentRuntime,
|
getAgentRuntime,
|
||||||
startRuntime,
|
startRuntime,
|
||||||
stopRuntime,
|
stopRuntime,
|
||||||
formatRuntime,
|
formatRuntime,
|
||||||
sendChat,
|
|
||||||
|
// Actions
|
||||||
|
sendChatMessage,
|
||||||
removeQueueItem,
|
removeQueueItem,
|
||||||
moveQueueItem,
|
moveQueueItem,
|
||||||
changeQueuePriority,
|
changeQueuePriority,
|
||||||
|
|
||||||
|
// Fetch (for manual refresh)
|
||||||
|
fetchStatus,
|
||||||
|
fetchAgents,
|
||||||
|
fetchOperations,
|
||||||
|
fetchChatMessages,
|
||||||
|
fetchQueue,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ const {
|
|||||||
agents, openTasks, feedEntries, chatMessages,
|
agents, openTasks, feedEntries, chatMessages,
|
||||||
irisBusy, irisFocus, queue,
|
irisBusy, irisFocus, queue,
|
||||||
getAgentRuntime, startRuntime, stopRuntime,
|
getAgentRuntime, startRuntime, stopRuntime,
|
||||||
sendChat, removeQueueItem, moveQueueItem, changeQueuePriority,
|
sendChatMessage, removeQueueItem, moveQueueItem, changeQueuePriority,
|
||||||
} = useDashboardData()
|
} = useDashboardData()
|
||||||
|
|
||||||
const selectedAgent = ref<AgentNodeData | null>(null)
|
const selectedAgent = ref<AgentNodeData | null>(null)
|
||||||
@@ -26,8 +26,6 @@ function onAgentSelect(id: string) {
|
|||||||
onMounted(startRuntime)
|
onMounted(startRuntime)
|
||||||
onUnmounted(stopRuntime)
|
onUnmounted(stopRuntime)
|
||||||
|
|
||||||
function onChatSend(text: string): void { sendChat(text) }
|
|
||||||
|
|
||||||
function onQueueMoveUp(id: string): void {
|
function onQueueMoveUp(id: string): void {
|
||||||
const idx = queue.value.findIndex(q => q.id === id)
|
const idx = queue.value.findIndex(q => q.id === id)
|
||||||
if (idx > 0) moveQueueItem(idx, idx - 1)
|
if (idx > 0) moveQueueItem(idx, idx - 1)
|
||||||
@@ -88,7 +86,7 @@ function onQueueExecuteNow(id: string): void {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-right">
|
<div class="col-right">
|
||||||
<ChatPanel :messages="chatMessages" :iris-busy="irisBusy" :iris-focus="irisFocus" @send="onChatSend" />
|
<ChatPanel :messages="chatMessages" :iris-busy="irisBusy" :iris-focus="irisFocus" />
|
||||||
<QueuePanel :items="queue" @remove="removeQueueItem" @move-up="onQueueMoveUp" @move-down="onQueueMoveDown" @change-priority="changeQueuePriority" @execute-now="onQueueExecuteNow" />
|
<QueuePanel :items="queue" @remove="removeQueueItem" @move-up="onQueueMoveUp" @move-down="onQueueMoveDown" @change-priority="changeQueuePriority" @execute-now="onQueueExecuteNow" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user