From 9b63e5368eea260359d85bb4589a735e0443c575 Mon Sep 17 00:00:00 2001 From: Developer Date: Tue, 9 Jun 2026 22:27:53 +0200 Subject: [PATCH] feat: Live Thinking Panel im AgentModal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Scrollbarer Thinking-Stream (slide-in von links) - Pulsierender Rahmen mit Glow-Effekt - Blau+Violett Dots rotieren im Uhrzeigersinn - thinkingStream in AgentNodeData + Beispieldaten für alle 5 Agenten --- .../src/components/dashboard/AgentModal.vue | 110 ++++++++++++++++++ frontend/src/composables/useDashboardData.ts | 26 +++++ 2 files changed, 136 insertions(+) diff --git a/frontend/src/components/dashboard/AgentModal.vue b/frontend/src/components/dashboard/AgentModal.vue index c1a7a7b..7d40c00 100644 --- a/frontend/src/components/dashboard/AgentModal.vue +++ b/frontend/src/components/dashboard/AgentModal.vue @@ -71,6 +71,31 @@ defineEmits<{ + +
+

Live Thinking

+
+
+ + +
+
+
+ {{ msg.time }} + {{ msg.text }} +
+
+ Waiting for thought stream... +
+
+
+
+
Runtime: {{ runtime }} @@ -241,6 +266,91 @@ defineEmits<{ transition: width 0.5s ease; } +/* Live Thinking */ +.thinking-panel { + position: relative; + border: 1px solid rgba(139, 124, 246, 0.2); + border-radius: 12px; + padding: 14px; + background: rgba(12, 16, 22, 0.6); + overflow: hidden; + animation: panel-pulse 2.5s ease-in-out infinite; +} +@keyframes panel-pulse { + 0%, 100% { border-color: rgba(139, 124, 246, 0.2); box-shadow: 0 0 8px rgba(139,124,246,0.05); } + 50% { border-color: rgba(139, 124, 246, 0.35); box-shadow: 0 0 16px rgba(139,124,246,0.1); } +} + +.thinking-orbiter { + position: absolute; + inset: -8px; + pointer-events: none; + z-index: 0; + animation: spin-orbiter 4s linear infinite; +} +@keyframes spin-orbiter { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} +.orbiter-dot { + position: absolute; + width: 10px; + height: 10px; + border-radius: 50%; + filter: blur(1px); +} +.dot-blue { + top: 0; + left: 50%; + transform: translate(-50%, -50%); + background: #3b82f6; + box-shadow: 0 0 10px #3b82f6, 0 0 20px rgba(59,130,246,0.5); +} +.dot-violet { + bottom: 0; + left: 50%; + transform: translate(-50%, 50%); + background: #8b7cf6; + box-shadow: 0 0 10px #8b7cf6, 0 0 20px rgba(139,124,246,0.5); +} + +.thinking-stream { + max-height: 160px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 6px; + position: relative; + z-index: 1; +} +.thinking-entry { + display: flex; + gap: 10px; + align-items: baseline; + animation: slide-in-right 0.3s ease-out both; + font-size: 10px; +} +@keyframes slide-in-right { + from { opacity: 0; transform: translateX(-16px); } + to { opacity: 1; transform: translateX(0); } +} +.entry-time { + font-size: 8.5px; + color: #6b7385; + flex-shrink: 0; + font-variant-numeric: tabular-nums; + min-width: 42px; +} +.entry-text { + color: #9ea5b3; + line-height: 1.4; +} +.thinking-placeholder { + font-size: 10px; + color: #4a5160; + font-style: italic; +} + /* Working Feed */ .work-feed { display: flex; diff --git a/frontend/src/composables/useDashboardData.ts b/frontend/src/composables/useDashboardData.ts index 8fd9978..4a60d58 100644 --- a/frontend/src/composables/useDashboardData.ts +++ b/frontend/src/composables/useDashboardData.ts @@ -14,6 +14,7 @@ export interface AgentNodeData { active: boolean runtimeSeconds: number workingFeed: string[] + thinkingStream?: Array<{ time: string; text: string }> } export interface MissionData { @@ -118,6 +119,11 @@ export function useDashboardData() { 'Verifying full-width layout deployment', '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' }, + ], }, { id: 'developer', @@ -138,6 +144,11 @@ export function useDashboardData() { 'Implementing room generation algorithm', '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' }, + ], }, { id: 'devops', @@ -158,6 +169,11 @@ export function useDashboardData() { 'Added .dockerignore for node_modules', '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' }, + ], }, { id: 'researcher', @@ -177,6 +193,11 @@ export function useDashboardData() { 'Documented SignalR limitations', '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' }, + ], }, { id: 'reviewer', @@ -197,6 +218,11 @@ export function useDashboardData() { 'Approved RoomValidator', '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' }, + ], }, ])