Add ops task overview, chart ahead window, and WebCRT lifecycle status.

Unify live runners in /audit/tasks (including UME sync and connect tests), extend port-traffic compare past now via ahead_hours, and distinguish WebCRT connecting/ready/detached.

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/pages/AuditPage.tsx

@@ -55,7 +55,7 @@ export function AuditPage() {
     <div className="page-stack system-page">
       <section className="panel">
         <div className="panel__toolbar">
-          <h2>{t("auth.auditTitle")}</h2>
+          <h2>{t("audit.logsTitle")}</h2>
         </div>
         <p className="panel__hint">{isAdmin ? t("auth.auditHintAdmin") : t("auth.auditHintUser")}</p>
 

web/src/pages/audit/AuditLayout.tsx

@@ -0,0 +1,32 @@
+import { NavLink, Outlet } from "react-router-dom";
+import { AUDIT_NAV } from "../../config/auditNav";
+import { useI18n } from "../../i18n";
+
+export function AuditLayout() {
+  const { t } = useI18n();
+
+  return (
+    <div className="network-shell audit-shell">
+      <aside className="network-nav" aria-label={t("audit.title")}>
+        <div className="network-nav__brand">{t("audit.title")}</div>
+        <nav className="network-nav__scroll">
+          <ul className="network-nav__list network-nav__list--flat">
+            {AUDIT_NAV.map((item) => (
+              <li key={item.id}>
+                <NavLink
+                  to={item.path}
+                  className={({ isActive }) => `network-nav__link${isActive ? " is-active" : ""}`}
+                >
+                  {t(item.labelKey)}
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </aside>
+      <div className="network-main">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

web/src/pages/audit/TaskOverviewPage.tsx

@@ -0,0 +1,149 @@
+import { useMemo } from "react";
+import { Link } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { useI18n } from "../../i18n";
+import { fetchOpsTasks } from "../../services/api";
+import { formatSystemTime } from "../../utils/time";
+
+const POLL_MS = 4000;
+
+function statusTone(status: string): string {
+  const s = status.toLowerCase();
+  if (s === "collecting" || s === "running" || s === "connecting" || s === "testing") return "running";
+  if (s === "ready") return "ok";
+  if (s === "paused" || s === "pending" || s === "detached") return "paused";
+  if (s === "failed" || s === "error") return "stopped";
+  return "other";
+}
+
+function kindLabel(kind: string, t: (k: string) => string): string {
+  const key = `audit.tasks.kind.${kind}`;
+  const tr = t(key);
+  return tr === key ? kind : tr;
+}
+
+function statusLabel(status: string, t: (k: string) => string): string {
+  const key = `audit.tasks.status.${status}`;
+  const tr = t(key);
+  return tr === key ? status : tr;
+}
+
+export function TaskOverviewPage() {
+  const { t } = useI18n();
+  const query = useQuery({
+    queryKey: ["opsTasks"],
+    queryFn: fetchOpsTasks,
+    refetchInterval: POLL_MS,
+    staleTime: 1500,
+  });
+
+  const data = query.data;
+  const items = useMemo(() => data?.items || [], [data]);
+  const byKind = data?.by_kind || {};
+  const byStatus = data?.by_status || {};
+
+  return (
+    <div className="page-stack system-page">
+      <section className="panel">
+        <div className="panel__toolbar">
+          <h2>{t("audit.tasks.title")}</h2>
+          <button type="button" onClick={() => void query.refetch()} disabled={query.isFetching}>
+            {query.isFetching ? t("common.refreshing") : t("common.refresh")}
+          </button>
+        </div>
+        <p className="panel__hint">{t("audit.tasks.hint")}</p>
+
+        <div className="pt-list-kpis">
+          <div className="pt-list-kpi pt-list-kpi--live">
+            <div className="pt-list-kpi__label">{t("audit.tasks.kpiActive")}</div>
+            <div className="pt-list-kpi__value">{data?.active ?? "—"}</div>
+          </div>
+          <div className="pt-list-kpi">
+            <div className="pt-list-kpi__label">{t("audit.tasks.kpiTotal")}</div>
+            <div className="pt-list-kpi__value">{data?.total ?? "—"}</div>
+          </div>
+          <div className="pt-list-kpi">
+            <div className="pt-list-kpi__label">{t("audit.tasks.kpiKinds")}</div>
+            <div className="pt-list-kpi__value" style={{ fontSize: 13, fontWeight: 500 }}>
+              {Object.keys(byKind).length
+                ? Object.entries(byKind)
+                    .map(([k, n]) => `${kindLabel(k, t)} ${n}`)
+                    .join(" · ")
+                : "—"}
+            </div>
+          </div>
+          <div className="pt-list-kpi">
+            <div className="pt-list-kpi__label">{t("audit.tasks.kpiStatuses")}</div>
+            <div className="pt-list-kpi__value" style={{ fontSize: 13, fontWeight: 500 }}>
+              {Object.keys(byStatus).length
+                ? Object.entries(byStatus)
+                    .map(([k, n]) => `${statusLabel(k, t)} ${n}`)
+                    .join(" · ")
+                : "—"}
+            </div>
+          </div>
+        </div>
+
+        {query.isLoading ? <p className="muted">{t("common.refreshing")}</p> : null}
+
+        {!items.length && !query.isLoading ? (
+          <div className="pt-list-empty">
+            <p>{t("audit.tasks.empty")}</p>
+          </div>
+        ) : (
+          <div className="pt-list-table-wrap">
+            <table className="data-table pt-list-table">
+              <thead>
+                <tr>
+                  <th>{t("audit.tasks.colKind")}</th>
+                  <th>{t("audit.tasks.colTitle")}</th>
+                  <th>{t("audit.tasks.colStatus")}</th>
+                  <th>{t("audit.tasks.colActor")}</th>
+                  <th>{t("audit.tasks.colTrigger")}</th>
+                  <th>{t("audit.tasks.colProgress")}</th>
+                  <th>{t("audit.tasks.colStarted")}</th>
+                  <th>{t("audit.tasks.colUpdated")}</th>
+                  <th>{t("audit.tasks.colLink")}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((row) => (
+                  <tr key={`${row.kind}:${row.id}`} title={row.detail || undefined}>
+                    <td>{kindLabel(row.kind, t)}</td>
+                    <td>
+                      <div className="pt-list-task-name">{row.title}</div>
+                      {row.detail ? (
+                        <div className="muted" style={{ fontSize: 12 }}>
+                          {row.detail}
+                        </div>
+                      ) : null}
+                    </td>
+                    <td>
+                      <span className={`pt-list-status pt-list-status--${statusTone(row.status)}`}>
+                        {statusLabel(row.status, t)}
+                      </span>
+                    </td>
+                    <td>{row.actor || "—"}</td>
+                    <td>{row.trigger || "—"}</td>
+                    <td className="pt-list-num">{row.progress || "—"}</td>
+                    <td className="pt-list-time">{formatSystemTime(row.started_at) || "—"}</td>
+                    <td className="pt-list-time">{formatSystemTime(row.updated_at) || "—"}</td>
+                    <td>
+                      {row.href ? (
+                        <Link to={row.href} className="link-btn">
+                          {t("audit.tasks.open")}
+                        </Link>
+                      ) : (
+                        "—"
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

web/src/pages/network/PortTrafficBoardPanelCell.tsx

@@ -29,6 +29,10 @@ export function PortTrafficBoardPanelCell({
 }: Props) {
   const { t } = useI18n();
   const baseline = panel.baseline || "off";
+  const aheadHours =
+    baseline === "off" && !panel.baseline_target_id
+      ? 0
+      : Math.max(0, Number(panel.ahead_hours ?? 1) || 0);
   const compareQuery = useQuery({
     queryKey: [
       ...queryKeys.portTrafficCompare(
@@ -37,6 +41,7 @@ export function PortTrafficBoardPanelCell({
         baseline,
         baseline === "custom" ? panel.offset_hours : 0,
         panel.baseline_target_id || "",
+        aheadHours,
       ),
       boardId,
       panel.id,
@@ -47,6 +52,7 @@ export function PortTrafficBoardPanelCell({
         rangeHours: panel.range_hours,
         baseline,
         offsetHours: baseline === "custom" ? panel.offset_hours : undefined,
+        aheadHours: aheadHours || undefined,
         baselineTargetId: panel.baseline_target_id || undefined,
       }),
     enabled: Boolean(panel.target_id) && !panel.stale,

web/src/pages/network/PortTrafficWallPage.tsx

@@ -41,6 +41,7 @@ function panelToIn(p: PortTrafficBoardPanel): PortTrafficBoardPanelIn {
     range_hours: p.range_hours,
     baseline: p.baseline || "off",
     offset_hours: p.offset_hours || 0,
+    ahead_hours: p.ahead_hours ?? 1,
     baseline_target_id: p.baseline_target_id || "",
     y_mode: p.y_mode || "auto",
     ord: p.ord,
@@ -49,6 +50,10 @@ function panelToIn(p: PortTrafficBoardPanel): PortTrafficBoardPanelIn {
   };
 }
 
+function normalizePanel(p: PortTrafficBoardPanel): PortTrafficBoardPanel {
+  return { ...p, ahead_hours: p.ahead_hours ?? 1 };
+}
+
 /** Dedicated board wall tab at `/port-traffic/wall/:boardId` (outside Network shell). */
 export function PortTrafficWallPage() {
   const { t } = useI18n();
@@ -136,7 +141,7 @@ export function PortTrafficWallPage() {
 
   useEffect(() => {
     if (!board || editing) return;
-    setDraftPanels(board.panels || []);
+    setDraftPanels((board.panels || []).map(normalizePanel));
     setDraftName(board.name || "");
     setDraftCols(board.cols || 2);
   }, [board, editing]);
@@ -188,7 +193,7 @@ export function PortTrafficWallPage() {
 
   const startEdit = () => {
     if (!board) return;
-    setDraftPanels([...(board.panels || [])]);
+    setDraftPanels((board.panels || []).map(normalizePanel));
     setDraftName(board.name || "");
     setDraftCols(board.cols || 2);
     setEditing(true);
@@ -201,7 +206,7 @@ export function PortTrafficWallPage() {
     setDirty(false);
     closePanelSettings();
     if (board) {
-      setDraftPanels(board.panels || []);
+      setDraftPanels((board.panels || []).map(normalizePanel));
       setDraftName(board.name || "");
       setDraftCols(board.cols || 2);
     }
@@ -249,6 +254,7 @@ export function PortTrafficWallPage() {
       range_hours: 24,
       baseline: "off",
       offset_hours: 0,
+      ahead_hours: 1,
       baseline_target_id: "",
       y_mode: "auto",
       ord: draftPanels.length,
@@ -571,9 +577,15 @@ export function PortTrafficWallPage() {
                 {t("portTraffic.compare")}
                 <select
                   value={editPanel.baseline}
-                  onChange={(e) =>
-                    updatePanel(editPanel.id, { baseline: e.target.value as BaselineMode })
-                  }
+                  onChange={(e) => {
+                    const next = e.target.value as BaselineMode;
+                    updatePanel(editPanel.id, {
+                      baseline: next,
+                      ...(next !== "off" && !(editPanel.ahead_hours > 0)
+                        ? { ahead_hours: 1 }
+                        : {}),
+                    });
+                  }}
                 >
                   <option value="off">{t("portTraffic.compareOff")}</option>
                   <option value="day">{t("portTraffic.compareDay")}</option>
@@ -660,6 +672,7 @@ export function PortTrafficWallPage() {
                     updatePanel(editPanel.id, {
                       baseline_target_id: tid,
                       baseline_target: tgt,
+                      ...(tid && !(editPanel.ahead_hours > 0) ? { ahead_hours: 1 } : {}),
                     });
                   }}
                 >
@@ -671,12 +684,35 @@ export function PortTrafficWallPage() {
                   ))}
                 </select>
               </label>
+              {editPanel.baseline !== "off" || editPanel.baseline_target_id ? (
+                <label>
+                  {t("portTraffic.aheadHours")}
+                  <input
+                    type="number"
+                    min={0}
+                    max={24}
+                    step={1}
+                    title={t("portTraffic.aheadHoursHint")}
+                    value={editPanel.ahead_hours ?? 1}
+                    onChange={(e) =>
+                      updatePanel(editPanel.id, {
+                        ahead_hours: Math.max(0, Math.min(24, Number(e.target.value) || 0)),
+                      })
+                    }
+                  />
+                </label>
+              ) : null}
             </div>
             {editPanel.baseline === "week" ? (
               <p className="muted" style={{ marginTop: 10 }}>
                 {t("portTraffic.retentionHint")}
               </p>
             ) : null}
+            {editPanel.baseline_target_id ? (
+              <p className="muted" style={{ marginTop: 10 }}>
+                {t("portTraffic.mapBaselineHint")}
+              </p>
+            ) : null}
             <div className="modal__actions">
               <button type="button" className="btn-primary" onClick={closePanelSettings}>
                 {t("portTraffic.logClose")}