fix: system health is a Settings tab, not a page only the dot reached

The surface shipped at /system with no nav entry, reachable only by
clicking the health dot beside the brand — a target you have to already
suspect something is wrong to go looking for. Operator-flagged: it needs
a path someone can walk to.

Settings is where you go to ask the instance about itself, so the view
becomes a tab there, beside Activity — Activity answers "what is the
queue doing", System answers "is anything left to do it".

- SystemView.vue moves to components/settings/SystemHealthTab.vue; the
  content is unchanged apart from shedding its own container and h1.
- SettingsView adopts useTabQuery (the composable Browse and
  Subscriptions already use) so a tab can be linked TO. The health dot
  now points at ?tab=system, and /system redirects there so the previous
  build's link and any bookmark still land.
- The tab drops its own 10s poll. v-window keeps a visited item mounted
  rather than destroyed, so that timer would have gone on firing behind
  Maintenance — and TopNav already polls the same store every 15s for
  the dot.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TTjbZZ6JirCMSaJzQV1RhA

frontend/src/views/SettingsView.vue

@@ -14,6 +14,7 @@
       style="position: sticky; top: var(--fc-nav-h, 64px); z-index: 4;"
     >
       <v-tab value="overview">Overview</v-tab>
+      <v-tab value="system">System</v-tab>
       <v-tab value="activity">Activity</v-tab>
       <v-tab value="cleanup">Cleanup</v-tab>
       <v-tab value="maintenance">Maintenance</v-tab>
@@ -42,6 +43,13 @@
         </v-alert>
       </v-window-item>
 
+      <!-- Is every part of the stack still running (milestone 365). Sits
+           beside Activity deliberately: Activity answers "what is the queue
+           doing", this answers "is anything left to do it". -->
+      <v-window-item value="system">
+        <SystemHealthTab />
+      </v-window-item>
+
       <v-window-item value="activity">
         <SystemActivityTab @open-maintenance="tab = 'maintenance'" />
       </v-window-item>
@@ -73,18 +81,24 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { useSystemStore } from '../stores/system.js'
 import SystemStatsCards from '../components/settings/SystemStatsCards.vue'
 import SystemActivitySummary from '../components/settings/SystemActivitySummary.vue'
 import SystemActivityTab from '../components/settings/SystemActivityTab.vue'
+import SystemHealthTab from '../components/settings/SystemHealthTab.vue'
 import GpuActivityPanel from '../components/settings/GpuActivityPanel.vue'
 import DownloadsActivityPanel from '../components/settings/DownloadsActivityPanel.vue'
 import MaintenancePanel from '../components/settings/MaintenancePanel.vue'
 import CleanupView from './CleanupView.vue'
+import { useTabQuery } from '../composables/useTabQuery.js'
 import { useMLStore } from '../stores/ml.js'
 
-const tab = ref('overview')
+// ?tab= sync (the same composable Browse/Subscriptions use) so a tab can be
+// linked TO — the health dot beside the brand points at ?tab=system, and the
+// old /system path redirects there.
+const VALID_TABS = ['overview', 'system', 'activity', 'cleanup', 'maintenance']
+const { tab } = useTabQuery(VALID_TABS, 'overview')
 const system = useSystemStore()
 const mlStore = useMLStore()
 

frontend/src/views/SystemView.vue

@@ -1,129 +0,0 @@
-<template>
-  <v-container class="py-6" style="max-width: 900px">
-    <div class="d-flex align-center mb-1">
-      <h1 class="text-h5">System</h1>
-      <v-spacer />
-      <span class="fc-sys__checked">
-        {{ store.checkedAt ? `checked ${formatRelative(store.checkedAt)}` : 'checking…' }}
-      </span>
-    </div>
-
-    <p class="fc-sys__lede text-body-2 mb-5">
-      Every moving part of FabledCurator and whether it is still checking in.
-      Parts are learned as they appear, so anything that has run at least once
-      stays listed — that is what lets a stopped one be noticed rather than
-      simply vanishing.
-    </p>
-
-    <v-alert
-      v-if="store.lastError" type="error" variant="tonal" density="compact" class="mb-4"
-    >
-      Could not reach FabledCurator: {{ store.lastError }}
-    </v-alert>
-
-    <v-card v-else variant="flat" class="fc-sys__card">
-      <div v-if="!store.parts.length" class="pa-6 text-center fc-sys__muted">
-        Still gathering — this fills in on the first check.
-      </div>
-
-      <div
-        v-for="part in store.parts" :key="part.key"
-        class="fc-sys__row" :class="`fc-sys__row--${part.state}`"
-      >
-        <span class="fc-sys__dot" :class="`fc-sys__dot--${part.state}`" />
-
-        <div class="fc-sys__body">
-          <div class="fc-sys__name">
-            {{ part.name }}
-            <span class="fc-sys__kind">{{ kindLabel(part.kind) }}</span>
-          </div>
-          <!-- The sentence, not just a chip. At the moment someone is deciding
-               whether to go and open Portainer, "has not checked in for 6 min"
-               is the thing that answers them. -->
-          <div class="fc-sys__detail">{{ part.detail }}</div>
-        </div>
-
-        <div class="fc-sys__meta">
-          <div v-if="part.last_seen_at" :title="part.last_seen_at">
-            seen {{ formatRelative(part.last_seen_at) }}
-          </div>
-          <div v-if="part.latency_ms != null">{{ part.latency_ms }} ms</div>
-          <div v-if="part.queues?.length" class="fc-sys__queues">{{ part.queues.join(', ') }}</div>
-        </div>
-      </div>
-    </v-card>
-
-    <p v-if="store.thresholds" class="fc-sys__foot text-caption mt-4">
-      A part is called stale after
-      {{ Math.round(store.thresholds.stale_after_seconds / 60) }} min without a
-      check-in and treated as stopped after
-      {{ Math.round(store.thresholds.down_after_seconds / 60) }} min. The window
-      is deliberately wide: a rolling deploy briefly runs two of a service and
-      then neither, and an indicator that reddened on every update would stop
-      being read.
-    </p>
-  </v-container>
-</template>
-
-<script setup>
-import { onMounted, onUnmounted } from 'vue'
-
-import { useSystemHealthStore } from '../stores/systemHealth.js'
-import { formatRelative } from '../utils/date.js'
-
-const store = useSystemHealthStore()
-
-// Slower than the pipeline chip's 8s: liveness changes on the scale of
-// container restarts, not task starts, and this page is open while someone
-// watches it.
-const POLL_MS = 10_000
-let timer = null
-
-function kindLabel(kind) {
-  if (kind === 'celery') return 'background worker'
-  if (kind === 'agent') return 'GPU agent'
-  if (kind === 'datastore') return 'datastore'
-  return kind
-}
-
-onMounted(() => {
-  store.refresh()
-  timer = setInterval(() => { if (!document.hidden) store.refresh() }, POLL_MS)
-})
-onUnmounted(() => { if (timer) clearInterval(timer) })
-</script>
-
-<style scoped>
-.fc-sys__lede, .fc-sys__muted, .fc-sys__checked, .fc-sys__foot {
-  color: rgb(var(--v-theme-on-surface) / 0.66);
-}
-.fc-sys__checked { font-size: 0.78rem; }
-.fc-sys__card { background: rgb(var(--v-theme-on-surface) / 0.04); }
-
-.fc-sys__row {
-  display: flex; align-items: center; gap: 12px;
-  padding: 12px 16px;
-  border-bottom: 1px solid rgb(var(--v-theme-on-surface) / 0.08);
-}
-.fc-sys__row:last-child { border-bottom: 0; }
-
-.fc-sys__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
-.fc-sys__dot--ok      { background: rgb(var(--v-theme-success)); }
-.fc-sys__dot--stale   { background: rgb(var(--v-theme-warning)); }
-.fc-sys__dot--down    { background: rgb(var(--v-theme-error)); }
-.fc-sys__dot--unknown { background: rgb(var(--v-theme-on-surface) / 0.35); }
-
-.fc-sys__body { min-width: 0; flex: 1 1 auto; }
-.fc-sys__name { font-weight: 600; }
-.fc-sys__kind {
-  margin-left: 8px; font-weight: 400; font-size: 0.72rem; text-transform: uppercase;
-  letter-spacing: 0.04em; color: rgb(var(--v-theme-on-surface) / 0.5);
-}
-.fc-sys__detail { font-size: 0.82rem; color: rgb(var(--v-theme-on-surface) / 0.72); }
-
-.fc-sys__meta {
-  text-align: right; font-size: 0.75rem; flex: 0 0 auto;
-  font-variant-numeric: tabular-nums; color: rgb(var(--v-theme-on-surface) / 0.6);
-}
-.fc-sys__queues { opacity: 0.75; }
-</style>