feat: complete Nexus mission-control workflows

frontend/src/views/AgentDetailView.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, onUnmounted, ref, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft, Bot, Loader2, AlertCircle, Activity } from '@lucide/vue'
+import { ArrowLeft, Bot, Loader2, AlertCircle, Activity, RefreshCw } from '@lucide/vue'
 import { apiFetch } from '../services/api'
 import type { AgentDetail } from '../types'
 import ConfigTabs from '../components/config/ConfigTabs.vue'
 import ConfigEditor from '../components/config/ConfigEditor.vue'
+import { openDashboardLiveStream } from '../services/live'
 
 const route = useRoute()
 const router = useRouter()
@@ -18,6 +19,19 @@ const configFiles = ref<ConfigFileInfo[]>([])
 const activeTab = ref(0)
 const configsLoading = ref(false)
 const configsError = ref('')
+const activityItems = ref<AgentActivityItem[]>([])
+const activityLoading = ref(false)
+const activityError = ref('')
+const summaryLoading = ref(false)
+const summaryError = ref('')
+const summary = ref<AgentSummary | null>(null)
+const liveConnected = ref(false)
+const liveUnavailable = ref(false)
+let liveAbort: AbortController | null = null
+let activityReloadTimer: ReturnType<typeof setTimeout> | null = null
+let liveReconnectTimer: ReturnType<typeof setTimeout> | null = null
+let liveStreamStopped = false
+let lastLiveSequence = 0
 
 const initLoading = ref(true)
 
@@ -28,6 +42,9 @@ interface EditorState {
   dirty: boolean
   saveStatus: 'idle' | 'saved' | 'error'
   saveMessage: string
+  backupStatus: string
+  reloadStatus: string
+  reloadMessage: string
 }
 
 interface ConfigFileInfo {
@@ -40,6 +57,46 @@ interface ConfigFileDetail extends ConfigFileInfo {
   content: string
 }
 
+interface AgentActivityItem {
+  id: number | null
+  type: string
+  message: string
+  at: string
+  source: string
+  relativeTime?: string | null
+}
+
+interface AgentSummary {
+  now: AgentSummaryItem
+  today: AgentSummaryItem
+  generatedAt: string
+}
+
+interface AgentSummaryItem {
+  text: string
+  source: string
+  timestamp?: string | null
+}
+
+interface SaveConfigResult {
+  fileName: string
+  size: number
+  modifiedAt: string
+  validation: {
+    status: string
+    fileKind: string
+    errors: string[]
+  }
+  backup: {
+    status: string
+    backupCreated: boolean
+  }
+  reloadCheck: {
+    status: string
+    message: string
+  }
+}
+
 const editorState = ref<EditorState>({
   content: '',
   savedContent: '',
@@ -47,6 +104,9 @@ const editorState = ref<EditorState>({
   dirty: false,
   saveStatus: 'idle',
   saveMessage: '',
+  backupStatus: 'not_applicable',
+  reloadStatus: 'not_supported',
+  reloadMessage: '',
 })
 
 const agentId = route.params.id as string
@@ -99,6 +159,22 @@ function formatLastSeen(dateStr?: string): string {
   })
 }
 
+function formatActivityTime(item: AgentActivityItem): string {
+  if (item.relativeTime) return item.relativeTime
+  const d = new Date(item.at)
+  return d.toLocaleDateString('de-DE', {
+    month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
+
+function activityTypeLabel(type: string): string {
+  if (type === 'thinking') return 'Thinking'
+  if (type === 'handoff') return 'Handoff'
+  if (type === 'task') return 'Task'
+  return 'Activity'
+}
+
 async function loadAgent() {
   loading.value = true
   error.value = ''
@@ -113,6 +189,110 @@ async function loadAgent() {
   }
 }
 
+async function loadActivity() {
+  activityLoading.value = true
+  activityError.value = ''
+  try {
+    const response = await apiFetch(`/api/v1/agents/${agentId}/activity`)
+    if (!response.ok) throw new Error('Failed to load activity')
+    activityItems.value = await response.json()
+  } catch (e) {
+    activityError.value = e instanceof Error ? e.message : 'Failed to load activity'
+  } finally {
+    activityLoading.value = false
+  }
+}
+
+async function loadSummary() {
+  summaryLoading.value = true
+  summaryError.value = ''
+  try {
+    const response = await apiFetch(`/api/v1/agents/${agentId}/summary`)
+    if (!response.ok) throw new Error('Failed to load summary')
+    summary.value = await response.json()
+  } catch (e) {
+    summaryError.value = e instanceof Error ? e.message : 'Failed to load summary'
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+function scheduleActivityReload() {
+  if (activityReloadTimer) return
+  activityReloadTimer = setTimeout(async () => {
+    activityReloadTimer = null
+    await loadActivity()
+    await loadSummary()
+  }, 250)
+}
+
+function formatSummaryTimestamp(value?: string | null): string {
+  if (!value) return 'No timestamp'
+  const d = new Date(value)
+  return d.toLocaleDateString('de-DE', {
+    month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
+
+function summarySourceLabel(source: string): string {
+  switch (source) {
+    case 'nexus-activity': return 'Nexus activity'
+    case 'gateway-session-history': return 'Gateway history'
+    case 'derived-mixed': return 'Derived from mixed feed'
+    case 'none': return 'No data'
+    default: return source
+  }
+}
+
+function scheduleStreamReconnect() {
+  if (liveStreamStopped || liveReconnectTimer) return
+  liveReconnectTimer = setTimeout(() => {
+    liveReconnectTimer = null
+    void connectActivityStream()
+  }, 1500)
+}
+
+async function connectActivityStream() {
+  liveAbort?.abort()
+  liveAbort = new AbortController()
+
+  try {
+    const stream = await openDashboardLiveStream((event, data) => {
+      const cursor = (data as any)?.cursor
+      if (typeof cursor?.sequence === 'number') lastLiveSequence = cursor.sequence
+
+      if (event === 'snapshot') {
+        liveConnected.value = true
+        liveUnavailable.value = false
+        return
+      }
+
+      if (event !== 'update') return
+      const envelope = (data as any)?.envelope
+      if (envelope?.type !== 'activity.created') return
+
+      const agentIds = Array.isArray(envelope?.payload?.agentIds)
+        ? envelope.payload.agentIds.map((id: unknown) => String(id).toLowerCase())
+        : []
+
+      if (agentIds.includes(agentId.toLowerCase())) {
+        scheduleActivityReload()
+      }
+    }, { signal: liveAbort.signal, afterSequence: lastLiveSequence || null })
+
+    await stream.closed
+    if (!liveStreamStopped) {
+      liveConnected.value = false
+      scheduleStreamReconnect()
+    }
+  } catch {
+    liveConnected.value = false
+    liveUnavailable.value = true
+    if (!liveStreamStopped) scheduleStreamReconnect()
+  }
+}
+
 async function loadConfigFiles() {
   configsLoading.value = true
   configsError.value = ''
@@ -147,6 +327,9 @@ async function loadFileContent(fileName: string) {
       dirty: false,
       saveStatus: 'idle',
       saveMessage: '',
+      backupStatus: 'not_applicable',
+      reloadStatus: 'not_supported',
+      reloadMessage: '',
     }
   } catch (e) {
     editorState.value = {
@@ -156,6 +339,9 @@ async function loadFileContent(fileName: string) {
       dirty: false,
       saveStatus: 'error',
       saveMessage: e instanceof Error ? e.message : `Failed to load ${fileName}`,
+      backupStatus: 'not_applicable',
+      reloadStatus: 'not_supported',
+      reloadMessage: '',
     }
   }
 }
@@ -180,6 +366,9 @@ async function saveFile() {
   editorState.value.saving = true
   editorState.value.saveStatus = 'idle'
   editorState.value.saveMessage = ''
+  editorState.value.backupStatus = 'not_applicable'
+  editorState.value.reloadStatus = 'not_supported'
+  editorState.value.reloadMessage = ''
 
   try {
     const response = await apiFetch(`/api/v1/agents/${agentId}/config/${encodeURIComponent(fileName)}`, {
@@ -190,14 +379,21 @@ async function saveFile() {
 
     if (!response.ok) {
       const err = await response.json().catch(() => ({}))
-      throw new Error((err as any).error || 'Failed to save file')
+      const problem = err as { error?: string; errors?: Record<string, string[]> }
+      const detail = problem.error
+        || Object.values(problem.errors ?? {}).flat().join(' ')
+        || 'Failed to save file'
+      throw new Error(detail)
     }
 
-    const result: { fileName: string; size: number; modifiedAt: string } = await response.json()
+    const result: SaveConfigResult = await response.json()
     editorState.value.savedContent = editorState.value.content
     editorState.value.dirty = false
     editorState.value.saveStatus = 'saved'
-    editorState.value.saveMessage = 'Gespeichert'
+    editorState.value.saveMessage = `Gespeichert · Backup ${result.backup.status}`
+    editorState.value.backupStatus = result.backup.status
+    editorState.value.reloadStatus = result.reloadCheck.status
+    editorState.value.reloadMessage = result.reloadCheck.message
 
     const idx = configFiles.value.findIndex(f => f.fileName === fileName)
     if (idx >= 0) {
@@ -213,19 +409,33 @@ async function saveFile() {
   } catch (e) {
     editorState.value.saveStatus = 'error'
     editorState.value.saveMessage = e instanceof Error ? e.message : 'Failed to save file'
+    editorState.value.backupStatus = 'not_applicable'
+    editorState.value.reloadStatus = 'not_supported'
   } finally {
     editorState.value.saving = false
   }
 }
 
 onMounted(async () => {
+  liveStreamStopped = false
   initLoading.value = true
   await Promise.allSettled([
     loadAgent(),
     loadConfigFiles(),
+    loadActivity(),
+    loadSummary(),
   ])
+  connectActivityStream()
   initLoading.value = false
 })
+
+onUnmounted(() => {
+  liveStreamStopped = true
+  liveAbort?.abort()
+  liveAbort = null
+  if (activityReloadTimer) clearTimeout(activityReloadTimer)
+  if (liveReconnectTimer) clearTimeout(liveReconnectTimer)
+})
 </script>
 
 <template>
@@ -269,6 +479,85 @@ onMounted(async () => {
         </div>
       </div>
 
+      <section class="thinking-section">
+        <header class="section-head">
+          <div>
+            <span class="eyebrow">LIVE</span>
+            <h2>Thinking <span :class="['live-dot', { on: liveConnected }]"></span></h2>
+            <p class="section-note">
+              Nexus activity streams live. Gateway session history remains read-only fallback and refreshes when related Nexus events arrive or on manual reload.
+            </p>
+          </div>
+          <button class="icon-button" :disabled="activityLoading || summaryLoading" @click="Promise.allSettled([loadActivity(), loadSummary()])">
+            <RefreshCw :size="14" :class="{ spin: activityLoading }" />
+          </button>
+        </header>
+
+        <div v-if="summaryLoading && !summary" class="status-message compact">
+          <Loader2 :size="16" class="spin" />
+          Loading summaries...
+        </div>
+
+        <div v-else-if="summaryError && !summary" class="status-message compact error">
+          <AlertCircle :size="16" />
+          {{ summaryError }}
+        </div>
+
+        <div v-else-if="summary" class="summary-row">
+          <div class="summary-card">
+            <span>Now</span>
+            <p>{{ summary.now.text }}</p>
+            <small>{{ summarySourceLabel(summary.now.source) }} · {{ formatSummaryTimestamp(summary.now.timestamp) }}</small>
+          </div>
+          <div class="summary-card">
+            <span>Today</span>
+            <p>{{ summary.today.text }}</p>
+            <small>{{ summarySourceLabel(summary.today.source) }} · {{ formatSummaryTimestamp(summary.today.timestamp) }}</small>
+          </div>
+        </div>
+
+        <div v-else class="status-message compact">
+          No summary available.
+        </div>
+
+        <div v-if="summaryError && summary" class="status-message compact error summary-inline-error">
+          <AlertCircle :size="14" />
+          {{ summaryError }}
+        </div>
+
+        <div v-if="liveUnavailable" class="status-message compact">
+          Live stream reconnecting…
+        </div>
+
+        <div v-if="activityLoading && !activityItems.length" class="status-message compact">
+          <Loader2 :size="16" class="spin" />
+          Loading activity...
+        </div>
+
+        <div v-else-if="activityError" class="status-message compact error">
+          <AlertCircle :size="16" />
+          {{ activityError }}
+        </div>
+
+        <div v-else-if="activityItems.length" class="thinking-list">
+          <article
+            v-for="item in activityItems"
+            :key="`${item.source}-${item.id ?? item.at}-${item.message}`"
+            class="thinking-item"
+          >
+            <div class="thinking-meta">
+              <span class="type-pill">{{ activityTypeLabel(item.type) }}</span>
+              <span>{{ formatActivityTime(item) }}</span>
+            </div>
+            <p>{{ item.message }}</p>
+          </article>
+        </div>
+
+        <div v-else class="status-message compact">
+          No recent activity.
+        </div>
+      </section>
+
       <!-- Config section -->
       <div class="config-section">
         <div v-if="configsLoading" class="status-message">
@@ -297,6 +586,9 @@ onMounted(async () => {
             :saving="editorState.saving"
             :save-status="editorState.saveStatus"
             :save-message="editorState.saveMessage"
+            :backup-status="editorState.backupStatus"
+            :reload-status="editorState.reloadStatus"
+            :reload-message="editorState.reloadMessage"
             @update-content="onContentChange"
             @save="saveFile"
           />
@@ -343,6 +635,9 @@ onMounted(async () => {
 .status-message.error {
   color: #e16e75;
 }
+.status-message.compact {
+  padding: 20px;
+}
 .spin {
   animation: spin 1s linear infinite;
 }
@@ -416,9 +711,144 @@ onMounted(async () => {
 .status-label.mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; }
 .status-sep { color: #3d4152; font-size: 11px; }
 
+.thinking-section {
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+}
+.section-head .eyebrow {
+  display: block;
+  font-size: 8.5px;
+  font-weight: 700;
+  letter-spacing: .12em;
+  color: var(--accent, #7b6ef2);
+}
+.section-head h2 {
+  margin: 2px 0 0;
+  color: #e8eaf0;
+  font-size: 13px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.section-note {
+  margin: 6px 0 0;
+  color: #6f788b;
+  font-size: 10px;
+  line-height: 1.45;
+  max-width: 560px;
+}
+.live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #6b7385;
+}
+.live-dot.on {
+  background: #51d49a;
+}
+.icon-button {
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: rgba(255,255,255,.03);
+  color: #9ba3b5;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.icon-button:disabled {
+  opacity: .65;
+  cursor: default;
+}
+.thinking-list {
+  display: grid;
+}
+.summary-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: rgba(255,255,255,.05);
+  border-bottom: 1px solid var(--line);
+}
+.summary-row > div {
+  background: var(--panel);
+  padding: 12px 16px;
+}
+.summary-card small {
+  display: block;
+  margin-top: 7px;
+  color: #6f788b;
+  font-size: 9.5px;
+  line-height: 1.4;
+}
+.summary-row span {
+  display: block;
+  color: #6f788b;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-bottom: 5px;
+}
+.summary-row p {
+  margin: 0;
+  color: #cbd0dc;
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+.thinking-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(255,255,255,.05);
+}
+.thinking-item:last-child {
+  border-bottom: 0;
+}
+.thinking-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  color: #6f788b;
+  font-size: 10px;
+}
+.type-pill {
+  padding: 2px 6px;
+  border-radius: 999px;
+  border: 1px solid rgba(123,110,242,.24);
+  color: #aaa1ff;
+  background: rgba(123,110,242,.08);
+  font-size: 9px;
+}
+.thinking-item p {
+  margin: 0;
+  color: #cbd0dc;
+  font-size: 11px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+.summary-inline-error {
+  border-bottom: 1px solid var(--line);
+}
+
 @media (max-width: 640px) {
   .detail-page {
     max-width: 100%;
   }
+  .summary-row {
+    grid-template-columns: 1fr;
+  }
 }
 </style>