feat(ops): /operations endpoint + page — live jobs, queue depth, failures

GET /api/v1/operations aggregates active deployments, per-service
deploy-queue depth via Queue.Snapshot(), 24h deployment failures,
cron runs and backups scoped to the caller's projects (admins see all).

Frontend /operations page (Operate nav) shows in-flight count, queued
depth, failures and backup stats with live refetch while deploys are
active. CLI `containr operations` + MCP containr_operations_get.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app/frontend/src/features/operations/pages/OperationsPage.tsx

@@ -0,0 +1,218 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { getOperations, type OperationsView } from '@/lib/api-client';
+import { useDemoMode } from '@/lib/demo-mode';
+import { formatRelative } from '@/lib/time';
+import { DemoRestricted } from '@/shared/components';
+import { Activity, AlertTriangle, Clock, Database, Loader2, Timer } from 'lucide-react';
+
+function statusClass(status: string): string {
+  switch (status) {
+    case 'deployed':
+    case 'completed':
+    case 'success':
+      return 'text-[var(--success)]';
+    case 'failed':
+    case 'cancelled':
+    case 'rolled_back':
+      return 'text-[var(--error)]';
+    case 'building':
+    case 'deploying':
+    case 'in_progress':
+    case 'running':
+      return 'text-[var(--accent-primary)]';
+    default:
+      return 'text-[var(--warning)]';
+  }
+}
+
+function Section({ title, icon: Icon, count, children }: {
+  title: string;
+  icon: typeof Activity;
+  count: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="panel p-5">
+      <div className="flex items-center gap-2 mb-4">
+        <Icon size={16} className="text-[var(--accent-primary)]" />
+        <h2 className="text-sm font-semibold text-[var(--text-primary)]">{title}</h2>
+        <span className="text-xs text-[var(--text-muted)] mono">({count})</span>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function EmptyLine({ text }: { text: string }) {
+  return <p className="text-xs text-[var(--text-muted)]">{text}</p>;
+}
+
+export function OperationsPage() {
+  const isDemoMode = useDemoMode();
+  const navigate = useNavigate();
+
+  const opsQuery = useQuery({
+    queryKey: ['operations'],
+    queryFn: getOperations,
+    enabled: !isDemoMode,
+    refetchInterval: (query) =>
+      (query.state.data?.active_deployments?.length ?? 0) > 0 ? 3000 : 15000,
+  });
+
+  if (isDemoMode) {
+    return <DemoRestricted feature="Operations" />;
+  }
+
+  const ops: OperationsView | undefined = opsQuery.data;
+  const active = ops?.active_deployments ?? [];
+  const failed = ops?.recent_failures ?? [];
+  const cron = ops?.cron_runs ?? [];
+  const backups = ops?.backups ?? [];
+  const queue = ops?.deploy_queue ?? [];
+  const queuedTotal = queue.reduce((sum, q) => sum + q.queued, 0);
+
+  return (
+    <div className="min-h-screen">
+      <div className="border-b border-[var(--border-subtle)]">
+        <div className="w-full px-8 py-5">
+          <h1 className="v-title">Operations<span className="v-cursor">_</span></h1>
+          <p className="v-mono mt-1.5 text-[11px] text-[var(--text-tertiary)]">
+            Live view of deploys, queues, cron runs, and backups
+          </p>
+        </div>
+      </div>
+
+      {opsQuery.isLoading ? (
+        <div className="w-full px-8 py-12 flex justify-center">
+          <Loader2 size={20} className="animate-spin text-[var(--text-muted)]" />
+        </div>
+      ) : (
+        <div className="w-full px-8 py-6 space-y-6">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="panel-soft p-4">
+              <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">In flight</p>
+              <p className="mt-1 text-2xl font-semibold text-[var(--accent-primary)]">{active.length}</p>
+            </div>
+            <div className="panel-soft p-4">
+              <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Queued</p>
+              <p className="mt-1 text-2xl font-semibold text-[var(--warning)]">{queuedTotal}</p>
+            </div>
+            <div className="panel-soft p-4">
+              <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Failed 24h</p>
+              <p className="mt-1 text-2xl font-semibold text-[var(--error)]">{failed.length}</p>
+            </div>
+            <div className="panel-soft p-4">
+              <p className="text-xs uppercase tracking-wider text-[var(--text-muted)]">Backups 24h</p>
+              <p className="mt-1 text-2xl font-semibold text-[var(--text-secondary)]">{backups.length}</p>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+            <Section title="Active deployments" icon={Activity} count={active.length}>
+              {active.length === 0 ? (
+                <EmptyLine text="Nothing deploying right now." />
+              ) : (
+                <div className="space-y-2">
+                  {active.map((d) => (
+                    <button
+                      key={d.id}
+                      onClick={() => navigate(`/services/${d.service_id}`)}
+                      className="w-full flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] hover:bg-[var(--surface-muted)] text-left transition-colors"
+                    >
+                      <Loader2 size={13} className="animate-spin text-[var(--accent-primary)] shrink-0" />
+                      <div className="min-w-0 flex-1">
+                        <span className="text-sm text-[var(--text-primary)]">{d.service_name}</span>
+                        <span className="text-xs text-[var(--text-muted)]"> · {d.project_name}</span>
+                      </div>
+                      <span className={`text-xs mono ${statusClass(d.status)}`}>{d.status}</span>
+                      <span className="text-xs text-[var(--text-muted)]">{formatRelative(d.created_at)}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </Section>
+
+            <Section title="Failed — last 24h" icon={AlertTriangle} count={failed.length}>
+              {failed.length === 0 ? (
+                <EmptyLine text="No recent failures." />
+              ) : (
+                <div className="space-y-2">
+                  {failed.map((d) => (
+                    <button
+                      key={d.id}
+                      onClick={() => navigate(`/services/${d.service_id}`)}
+                      className="w-full flex items-center gap-3 px-3 py-2 rounded-[var(--radius-md)] hover:bg-[var(--surface-muted)] text-left transition-colors"
+                    >
+                      <AlertTriangle size={13} className="text-[var(--error)] shrink-0" />
+                      <div className="min-w-0 flex-1">
+                        <span className="text-sm text-[var(--text-primary)]">{d.service_name}</span>
+                        <span className="text-xs text-[var(--text-muted)]"> · {d.project_name}</span>
+                        {d.error && (
+                          <p className="text-[11px] text-[var(--error)]/80 truncate">{d.error}</p>
+                        )}
+                      </div>
+                      <span className={`text-xs mono ${statusClass(d.status)}`}>{d.status}</span>
+                      <span className="text-xs text-[var(--text-muted)]">{formatRelative(d.created_at)}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </Section>
+
+            <Section title="Cron — last 24h" icon={Timer} count={cron.length}>
+              {cron.length === 0 ? (
+                <EmptyLine text="No cron runs in the last day." />
+              ) : (
+                <div className="space-y-1.5">
+                  {cron.map((r) => (
+                    <div key={r.id} className="flex items-center gap-3 px-3 py-1.5 text-xs">
+                      <span className={`mono ${statusClass(r.status)}`}>{r.status}</span>
+                      <span className="text-[var(--text-primary)]">{r.job_name}</span>
+                      <span className="mono text-[var(--text-muted)]">{r.schedule}</span>
+                      {r.error && <span className="text-[var(--error)]/80 truncate">{r.error}</span>}
+                      <span className="ml-auto text-[var(--text-muted)]">{formatRelative(r.started_at)}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Section>
+
+            <Section title="Backups — last 24h" icon={Database} count={backups.length}>
+              {backups.length === 0 ? (
+                <EmptyLine text="No backups in the last day." />
+              ) : (
+                <div className="space-y-1.5">
+                  {backups.map((b) => (
+                    <div key={b.id} className="flex items-center gap-3 px-3 py-1.5 text-xs">
+                      <span className={`mono ${statusClass(b.status)}`}>{b.status}</span>
+                      <span className="text-[var(--text-primary)]">{b.database_name}</span>
+                      <span className="text-[var(--text-muted)]">{b.size}</span>
+                      <span className="ml-auto text-[var(--text-muted)]">{formatRelative(b.created_at)}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </Section>
+          </div>
+
+          {queue.length > 0 && (
+            <Section title="Deploy queue depth" icon={Clock} count={queue.length}>
+              <div className="space-y-1.5">
+                {queue.map((q) => (
+                  <div key={q.service_id} className="flex items-center gap-3 px-3 py-1.5 text-xs mono">
+                    <span className="text-[var(--text-secondary)]">{q.service_id.slice(0, 8)}</span>
+                    <span className={q.running ? 'text-[var(--accent-primary)]' : 'text-[var(--text-muted)]'}>
+                      {q.running ? 'running' : 'idle'}
+                    </span>
+                    <span className="text-[var(--warning)]">{q.queued} queued</span>
+                  </div>
+                ))}
+              </div>
+            </Section>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}