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/components/TopNav.vue

@@ -6,7 +6,8 @@
         <span class="fc-brand__text">FabledCurator</span>
       </RouterLink>
       <RouterLink
-        :to="{ name: 'system' }" class="fc-health" :title="health.label"
+        :to="{ name: 'settings', query: { tab: 'system' } }"
+        class="fc-health" :title="health.label"
         :aria-label="`System health: ${health.label}`"
       >
         <v-icon size="x-small" :color="health.color">{{ health.icon }}</v-icon>
@@ -282,9 +283,9 @@ onUnmounted(() => { if (healthTimer) clearInterval(healthTimer) })
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  /* A RouterLink since milestone 365 — it is the path to /system, not just an
-     indicator. Reset the anchor so turning a span into a link changed nothing
-     about how the nav reads. */
+  /* A RouterLink since milestone 365 — it is the path to the Settings System
+     tab, not just an indicator. Reset the anchor so turning a span into a
+     link changed nothing about how the nav reads. */
   text-decoration: none;
   color: inherit;
   border-radius: 50%;

frontend/src/components/settings/SystemHealthTab.vue

@@ -0,0 +1,128 @@
+<template>
+  <!-- A Settings tab, not a page of its own (operator 2026-09-02): the first
+       cut hung this off the health dot alone, which is a target you have to
+       already suspect something to look for. Settings is where someone goes
+       to ask the instance about itself, so it lives beside Activity. -->
+  <div>
+    <div class="d-flex align-center mb-1">
+      <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>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+
+import { useSystemHealthStore } from '../../stores/systemHealth.js'
+import { formatRelative } from '../../utils/date.js'
+
+const store = useSystemHealthStore()
+
+function kindLabel(kind) {
+  if (kind === 'celery') return 'background worker'
+  if (kind === 'agent') return 'GPU agent'
+  if (kind === 'datastore') return 'datastore'
+  return kind
+}
+
+// No timer of its own. TopNav already polls this same pinia store every 15s
+// for the health dot, and it is mounted on every route this tab is reachable
+// from — a second interval here would just double the request rate for a 5s
+// freshness gain. v-window keeps a visited item MOUNTED (hidden, not
+// destroyed), so a local timer would also have kept firing behind Maintenance.
+// One refresh on open, so arriving at the tab doesn't wait out the nav's tick.
+onMounted(() => { store.refresh() })
+</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>