Add Hermes snapshot diff view

dashboard/web/src/components/hermes-ops-panel.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
 import { AlertTriangle, CheckCircle2, Cloud, Copy, DatabaseBackup, ExternalLink, Gauge, HardDrive, RefreshCw, ShieldCheck, Timer, Wifi, Activity, CalendarClock, Link2 } from 'lucide-react';
 import { Badge, Button } from '@/components/ui/Primitives';
@@ -105,14 +105,19 @@ function InstanceCard({ instance }: { instance: HermesOpsInstance }) {
 
 export function HermesOpsPanel() {
   const [snapshot, setSnapshot] = useState<HermesOpsSnapshot | null>(null);
+  const [previousSnapshot, setPreviousSnapshot] = useState<HermesOpsSnapshot | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const latestSnapshotRef = useRef<HermesOpsSnapshot | null>(null);
 
   const load = async () => {
     setLoading(true);
     setError(null);
     try {
-      setSnapshot(await api.getHermesOps());
+      const nextSnapshot = await api.getHermesOps();
+      setPreviousSnapshot(latestSnapshotRef.current);
+      latestSnapshotRef.current = nextSnapshot;
+      setSnapshot(nextSnapshot);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Unable to load Hermes operations status');
     } finally {
@@ -127,6 +132,33 @@ export function HermesOpsPanel() {
   }, []);
 
   const allHealthy = useMemo(() => snapshot ? snapshot.warnings.length === 0 : false, [snapshot]);
+  const snapshotDiff = useMemo(() => {
+    if (!snapshot || !previousSnapshot) return null;
+
+    const previousHealthyInstances = previousSnapshot.instances.filter((instance) =>
+      instance.gateway.active &&
+      instance.dashboard.active &&
+      instance.backup.timer.active &&
+      instance.backup.repo.clean &&
+      instance.google.workspaceToken
+    ).length;
+
+    const currentHealthyInstances = snapshot.instances.filter((instance) =>
+      instance.gateway.active &&
+      instance.dashboard.active &&
+      instance.backup.timer.active &&
+      instance.backup.repo.clean &&
+      instance.google.workspaceToken
+    ).length;
+
+    return {
+      healthyInstances: currentHealthyInstances - previousHealthyInstances,
+      warnings: snapshot.warnings.length - previousSnapshot.warnings.length,
+      activeSessions: snapshot.activeSessions.active - previousSnapshot.activeSessions.active,
+      activeDashboards: snapshot.instances.filter((instance) => instance.dashboard.active).length - previousSnapshot.instances.filter((instance) => instance.dashboard.active).length,
+      activeBackupTimers: snapshot.instances.filter((instance) => instance.backup.timer.active).length - previousSnapshot.instances.filter((instance) => instance.backup.timer.active).length,
+    };
+  }, [previousSnapshot, snapshot]);
   const healthyInstances = snapshot
     ? snapshot.instances.filter((instance) =>
       instance.gateway.active &&
@@ -161,6 +193,34 @@ export function HermesOpsPanel() {
 
       {snapshot ? (
         <div className="space-y-5">
+          {snapshotDiff ? (
+            <div className="rounded-2xl border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-4">
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <p className="text-sm font-medium text-[var(--bl-text-primary)]">Since previous refresh</p>
+                  <p className="text-xs text-[var(--bl-text-secondary)]">Snapshot movement compared with the last poll.</p>
+                </div>
+                <Badge variant="neutral">Delta view</Badge>
+              </div>
+              <div className="mt-3 grid gap-3 md:grid-cols-5">
+                {[
+                  { label: 'Healthy instances', value: snapshotDiff.healthyInstances },
+                  { label: 'Active dashboards', value: snapshotDiff.activeDashboards },
+                  { label: 'Active backups', value: snapshotDiff.activeBackupTimers },
+                  { label: 'Active sessions', value: snapshotDiff.activeSessions },
+                  { label: 'Warnings', value: snapshotDiff.warnings },
+                ].map((item) => (
+                  <div key={item.label} className="rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] p-3">
+                    <p className="text-xs uppercase tracking-[0.2em] text-[var(--bl-text-tertiary)]">{item.label}</p>
+                    <p className={`mt-2 text-2xl font-semibold ${item.value > 0 ? 'text-[var(--bl-success)]' : item.value < 0 ? 'text-[var(--bl-danger)]' : 'text-[var(--bl-text-primary)]'}`}>
+                      {item.value > 0 ? '+' : ''}{item.value}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
           <div className="grid gap-3 md:grid-cols-4">
             <div className="rounded-2xl border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-4">
               <div className="flex items-center gap-2 text-sm text-[var(--bl-text-secondary)]">

docs/hermes-operations.md

@@ -31,7 +31,7 @@ Observed on 2026-05-27:
 - Private dashboards:
   - Root: `http://100.87.53.10:9119/`, `hermes-root-dashboard.service`
   - Uma: `http://100.87.53.10:9120/`, `uma-hermes-dashboard.service`
-  - Live ops panel shows gateway state, active sessions, cron state, backup freshness, sanitized alerts, and runbook links for both instances.
+  - Live ops panel shows gateway state, active sessions, refresh delta, cron state, backup freshness, sanitized alerts, and runbook links for both instances.
 
 ## Safety guardrail: no public Hermes dashboard/API
 

docs/hermes_dashboard_roadmap.md

@@ -669,11 +669,10 @@ Known roadmap assumptions to handle safely during implementation:
 
 Potential follow-up work for Hermes Mission Control:
 
-- snapshot diff view that shows what changed since the last refresh
-- per-instance action row with copy-link and open-dashboard shortcuts
 - warning severity filters for the live ops panel
-- compact trend cards for recent alert volume and backup freshness
+- compact trend cards for recent alert volume and backup freshness over several refreshes
 - task-ledger deep links from the ops panel into the most recent Hermes work
+- per-instance action row improvements beyond copy-link/open-dashboard, such as open-runbook shortcuts
 - optional dark/light theme toggle if the broader dashboard shell eventually supports it
 
 ---