feat: complete Nexus mission-control workflows

frontend/src/views/AgentsIndexView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { Bot, Code2, Server, Shield, Search, Terminal, Users } from '@lucide/vue'
+import { Bot, Code2, Server, Shield, Search, Terminal, Users, Wifi, WifiOff } from '@lucide/vue'
+import { apiFetch } from '../services/api'
 
 const router = useRouter()
 
@@ -12,9 +14,27 @@ interface AgentCard {
   tags: string[]
   color: string
   icon: string
+  model?: string
+  statusLabel?: string
+  statusKind?: 'connected' | 'thinking' | 'blocked' | 'ready' | 'stale' | 'error' | 'unsupported'
+  statusDetail?: string | null
+  isActive?: boolean
+  progress?: number
+  currentTask?: string | null
 }
 
-const agents: AgentCard[] = [
+interface GatewayRuntimeInfo {
+  reachable: boolean
+  version?: string | null
+  requiredVersion?: string | null
+  versionPinned: boolean
+  versionMatches: boolean
+  versionStatus: 'matched' | 'drift' | 'missing' | 'unpinned' | 'unknown' | 'error'
+  message?: string | null
+  warning?: string | null
+}
+
+const fallbackAgents: AgentCard[] = [
   {
     id: 'iris',
     name: 'Iris',
@@ -71,6 +91,97 @@ const agents: AgentCard[] = [
   },
 ]
 
+const agents = ref<AgentCard[]>([])
+const gateway = ref<GatewayRuntimeInfo | null>(null)
+const loading = ref(false)
+const error = ref('')
+
+const agentCount = computed(() => agents.value.length)
+const hasAgents = computed(() => agents.value.length > 0)
+const gatewayWarning = computed(() => gateway.value?.warning || '')
+const gatewayLabel = computed(() => {
+  if (!gateway.value) return 'Gateway wird geprüft'
+  if (!gateway.value.reachable) return gateway.value.message || 'Gateway offline'
+  switch (gateway.value.versionStatus) {
+    case 'matched':
+      return `Pinned ${gateway.value.requiredVersion}`
+    case 'drift':
+      return 'Version drift'
+    case 'missing':
+      return 'Version fehlt'
+    case 'unknown':
+      return 'Version unbekannt'
+    case 'unpinned':
+      return gateway.value.version ? `Detected ${gateway.value.version}` : 'Unpinned'
+    default:
+      return gateway.value.message || 'Gateway online'
+  }
+})
+const gatewayChipClass = computed(() => {
+  if (!gateway.value) return 'neutral'
+  if (!gateway.value.reachable) return 'error'
+  if (gateway.value.warning) return 'warn'
+  return 'ok'
+})
+
+async function loadMissionControl() {
+  loading.value = true
+  error.value = ''
+  try {
+    const [agentsResponse, gatewayResponse] = await Promise.all([
+      apiFetch('/api/dashboard/agents'),
+      apiFetch('/api/dashboard/gateway'),
+    ])
+
+    if (agentsResponse.ok) {
+      const data = await agentsResponse.json()
+      agents.value = data.map((item: any) => enrichAgent(item))
+    } else {
+      error.value = await readErrorMessage(agentsResponse, 'Agenten konnten nicht geladen werden')
+    }
+
+    if (gatewayResponse.ok) {
+      gateway.value = await gatewayResponse.json()
+    } else {
+      const gatewayError = await readErrorMessage(gatewayResponse, 'Gateway-Status konnte nicht geladen werden')
+      error.value = error.value ? `${error.value} · ${gatewayError}` : gatewayError
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Mission Control konnte nicht geladen werden'
+  } finally {
+    loading.value = false
+  }
+}
+
+function enrichAgent(item: any): AgentCard {
+  const fallback = fallbackAgents.find(a => a.id === item.id)
+  return {
+    id: item.id,
+    name: item.name || fallback?.name || item.id,
+    role: item.role || fallback?.role || 'Agent',
+    description: item.description || fallback?.description || 'OpenClaw agent',
+    tags: item.tags?.length ? item.tags : fallback?.tags ?? [],
+    color: fallback?.color ?? '#7e8799',
+    icon: fallback?.icon ?? 'bot',
+    model: item.model,
+    statusLabel: item.statusLabel,
+    statusKind: item.statusKind,
+    statusDetail: item.statusDetail,
+    isActive: item.isActive,
+    progress: item.progress,
+    currentTask: item.currentTask,
+  }
+}
+
+async function readErrorMessage(response: Response, fallback: string) {
+  try {
+    const payload = await response.json()
+    return payload?.error || payload?.message || fallback
+  } catch {
+    return fallback
+  }
+}
+
 function goToAgent(id: string) {
   router.push(`/agents/${id}`)
 }
@@ -86,6 +197,34 @@ function resolveIcon(iconName: string) {
     default: return Bot
   }
 }
+
+function statusTone(agent: AgentCard) {
+  switch (agent.statusKind) {
+    case 'connected': return 'connected'
+    case 'thinking': return 'thinking'
+    case 'blocked': return 'blocked'
+    case 'stale': return 'stale'
+    case 'error': return 'error'
+    case 'unsupported': return 'unsupported'
+    default: return agent.isActive ? 'connected' : 'ready'
+  }
+}
+
+function statusCopy(agent: AgentCard) {
+  if (agent.statusDetail) return agent.statusDetail
+  if (agent.currentTask) return agent.currentTask
+  switch (agent.statusKind) {
+    case 'connected': return 'Session ist erreichbar.'
+    case 'thinking': return 'Agent plant den nächsten Schritt.'
+    case 'blocked': return 'Agent wartet auf Entblockung.'
+    case 'stale': return 'Es gab länger kein neues Signal.'
+    case 'error': return 'Gateway konnte den Session-Status nicht lesen.'
+    case 'unsupported': return 'Session meldet einen nicht unterstützten Zustand.'
+    default: return 'Keine aktive Aufgabe gemeldet.'
+  }
+}
+
+onMounted(loadMissionControl)
 </script>
 
 <template>
@@ -97,16 +236,28 @@ function resolveIcon(iconName: string) {
       </div>
       <div class="header-text">
         <h1>Agents</h1>
-        <p class="header-subtitle">{{ agents.length }} AI agents — each with a real role and a real personality.</p>
+        <p class="header-subtitle">{{ agentCount }} agents · {{ gatewayLabel }}</p>
+      </div>
+      <div class="gateway-chip" :class="gatewayChipClass">
+        <Wifi v-if="gateway?.reachable" :size="13" />
+        <WifiOff v-else :size="13" />
+        {{ gateway?.version || gatewayLabel }}
       </div>
     </div>
 
+    <div v-if="loading" class="load-error">Lade Gateway-Status...</div>
+    <div v-else-if="error" class="load-error">{{ error }}</div>
+    <div v-if="gatewayWarning" class="gateway-warning">
+      {{ gatewayWarning }}
+    </div>
+
     <!-- Agent grid -->
-    <div class="agents-grid">
+    <div v-if="hasAgents" class="agents-grid">
       <article
         v-for="agent in agents"
         :key="agent.id"
         class="agent-card"
+        :class="`status-${statusTone(agent)}`"
         :style="{ '--card-color': agent.color }"
         @click="goToAgent(agent.id)"
       >
@@ -122,6 +273,15 @@ function resolveIcon(iconName: string) {
             </div>
           </div>
           <p class="card-desc">{{ agent.description }}</p>
+          <div class="agent-runtime">
+            <span :class="['runtime-dot', statusTone(agent)]"></span>
+            <span>{{ agent.statusLabel || (agent.isActive ? 'Arbeitet' : 'Bereit') }}</span>
+            <span v-if="agent.model" class="runtime-model">{{ agent.model }}</span>
+          </div>
+          <p class="runtime-detail">{{ statusCopy(agent) }}</p>
+          <div class="progress-track">
+            <span :style="{ width: `${agent.progress ?? 0}%`, background: agent.color }"></span>
+          </div>
           <div class="card-tags">
             <span
               v-for="tag in agent.tags"
@@ -139,6 +299,10 @@ function resolveIcon(iconName: string) {
         </div>
       </article>
     </div>
+    <div v-else-if="!loading" class="empty-state">
+      <h3>Keine Agenten sichtbar</h3>
+      <p>Mission Control hat aktuell keine Agenten aus dem Backend erhalten. Prüfe Gateway-Erreichbarkeit und Agent-Konfiguration.</p>
+    </div>
   </div>
 </template>
 
@@ -177,6 +341,58 @@ function resolveIcon(iconName: string) {
   font-size: 11px;
   color: #7e8799;
 }
+.gateway-chip {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 9px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  color: #9ba3b5;
+  font-size: 10px;
+}
+.gateway-chip.ok {
+  color: #51d49a;
+  border-color: rgba(81, 212, 154, .25);
+}
+.gateway-chip.warn {
+  color: #e5b05e;
+  border-color: rgba(229, 176, 94, .28);
+}
+.gateway-chip.error {
+  color: #f29b9b;
+  border-color: rgba(242, 155, 155, .3);
+}
+.load-error {
+  margin-bottom: 14px;
+  color: #e5b05e;
+  font-size: 11px;
+}
+.gateway-warning,
+.empty-state {
+  margin-bottom: 16px;
+  padding: 14px 16px;
+  border-radius: 11px;
+  border: 1px solid rgba(229, 176, 94, .24);
+  background: rgba(229, 176, 94, .08);
+  color: #f1d7aa;
+  font-size: 11px;
+  line-height: 1.5;
+}
+.empty-state {
+  border-color: var(--line);
+  background: rgba(255,255,255,.03);
+  color: #aab2c3;
+}
+.empty-state h3 {
+  margin: 0 0 6px;
+  font-size: 14px;
+  color: #e8eaf0;
+}
+.empty-state p {
+  margin: 0;
+}
 
 /* Agent grid */
 .agents-grid {
@@ -201,6 +417,15 @@ function resolveIcon(iconName: string) {
   box-shadow: 0 0 20px color-mix(in srgb, var(--card-color) 10%, transparent);
   transform: translateY(-2px);
 }
+.agent-card.status-error {
+  border-color: rgba(242, 155, 155, .22);
+}
+.agent-card.status-unsupported {
+  border-color: rgba(229, 176, 94, .22);
+}
+.agent-card.status-stale {
+  border-color: rgba(244, 164, 96, .22);
+}
 
 .card-stripe {
   height: 3px;
@@ -256,6 +481,60 @@ function resolveIcon(iconName: string) {
   margin: 0 0 10px;
   flex: 1;
 }
+.agent-runtime {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  color: #8a92a5;
+  font-size: 9.5px;
+  min-width: 0;
+}
+.runtime-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #6b7385;
+  flex-shrink: 0;
+}
+.runtime-dot.on {
+  background: #51d49a;
+}
+.runtime-dot.connected { background: #51d49a; }
+.runtime-dot.thinking { background: #79aaff; }
+.runtime-dot.blocked { background: #f87171; }
+.runtime-dot.stale { background: #f59e0b; }
+.runtime-dot.error { background: #f29b9b; }
+.runtime-dot.unsupported { background: #e5b05e; }
+.runtime-dot.ready { background: #6b7385; }
+.runtime-model {
+  margin-left: auto;
+  max-width: 46%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+  color: #6f788b;
+}
+.runtime-detail {
+  margin: 0 0 10px;
+  min-height: 28px;
+  color: #7e8799;
+  font-size: 10px;
+  line-height: 1.4;
+}
+.progress-track {
+  height: 3px;
+  border-radius: 999px;
+  background: rgba(255,255,255,.06);
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+.progress-track span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+}
 
 .card-tags {
   display: flex;