Add monitoring service and database schema

- Implement monitoring service with heartbeat, lease tasks, resume tasks, and task result handling.
- Create monitoring time utilities for business date calculations.
- Add unit tests for date window resolution and business day handling.
- Define database schema for monitoring-related tables including quotas, daily reports, and task management.
- Establish migration scripts for creating and dropping monitoring tables.

apps/browser-extension/entrypoints/background.ts

@@ -1,12 +1,18 @@
+import type { MonitoringCycleKickoffResponse } from "@geo/shared-types";
 import { browser } from "wxt/browser";
 import { defineBackground } from "wxt/utils/define-background";
 
+import {
+  patchDoubaoMonitoringRuntimeState,
+  readDoubaoMonitoringRuntimePatchFromRequestUrl,
+} from "../src/monitoring-adapters/doubao-state";
+import { handleMonitoringAction, runMonitoringCycle, type MonitoringCycleMode } from "../src/monitoring-runtime";
 import { handlePublisherAction } from "../src/runtime";
-import { getExtensionState } from "../src/storage";
+import { getExtensionState, type ExtensionStorageState } from "../src/storage";
 
 type BackgroundSuccessResponse = {
   ok: true;
-  data: Awaited<ReturnType<typeof handlePublisherAction>>;
+  data: unknown;
 };
 
 type BackgroundErrorResponse = {
@@ -14,42 +20,236 @@ type BackgroundErrorResponse = {
   error: string;
 };
 
+const PUBLISHER_HEARTBEAT_ALARM = "geo.publisher.background-heartbeat";
+const MONITORING_HEARTBEAT_ALARM = "geo.monitoring.background-heartbeat";
+const MONITORING_QUEUE_ALARM = "geo.monitoring.queue-heartbeat";
+const MONITORING_WARMUP_INTERVAL_MS = 10 * 60 * 1000;
+const MONITORING_HEARTBEAT_INTERVAL_MINUTES = 15;
+const MONITORING_HEARTBEAT_START_JITTER_MS = 3 * 60 * 1000;
+const DOUBAO_COMPLETION_REQUEST_FILTER = {
+  urls: ["https://www.doubao.com/chat/completion*", "https://doubao.com/chat/completion*"],
+};
+
+let monitoringCycleInFlight: Promise<unknown> | null = null;
+
+function randomMonitoringHeartbeatStartDelayMs(): number {
+  return Math.floor(Math.random() * (MONITORING_HEARTBEAT_START_JITTER_MS + 1));
+}
+
+async function ensureBackgroundAlarms(): Promise<void> {
+  browser.alarms.create(PUBLISHER_HEARTBEAT_ALARM, {
+    periodInMinutes: 60,
+  });
+  browser.alarms.create(MONITORING_HEARTBEAT_ALARM, {
+    when: Date.now() + randomMonitoringHeartbeatStartDelayMs(),
+    periodInMinutes: MONITORING_HEARTBEAT_INTERVAL_MINUTES,
+  });
+}
+
+function shouldWarmupMonitoring(state: ExtensionStorageState): boolean {
+  if (!state.plugin_installation_id || !state.installation_token || !state.api_base_url) {
+    return false;
+  }
+
+  if (!state.monitoring_last_heartbeat_at) {
+    return true;
+  }
+
+  const lastHeartbeatAt = new Date(state.monitoring_last_heartbeat_at).getTime();
+  if (Number.isNaN(lastHeartbeatAt)) {
+    return true;
+  }
+
+  return Date.now() - lastHeartbeatAt >= MONITORING_WARMUP_INTERVAL_MS;
+}
+
+function registerMonitoringRuntimeCapture(): void {
+  if (!browser.webRequest?.onBeforeRequest) {
+    return;
+  }
+
+  browser.webRequest.onBeforeRequest.addListener(
+    (details) => {
+      const patch = readDoubaoMonitoringRuntimePatchFromRequestUrl(details.url);
+      if (!patch) {
+        return undefined;
+      }
+      void patchDoubaoMonitoringRuntimeState(patch).catch((error) => {
+        console.warn("[geo-monitoring] failed to persist doubao runtime patch", error);
+      });
+      return undefined;
+    },
+    DOUBAO_COMPLETION_REQUEST_FILTER,
+  );
+}
+
+async function warmupMonitoringRuntime(): Promise<void> {
+  const state = await getExtensionState();
+  if (!shouldWarmupMonitoring(state)) {
+    return;
+  }
+
+  await runMonitoringCycleSingleFlight("automatic");
+}
+
+async function syncMonitoringQueueAlarm(): Promise<void> {
+  const state = await getExtensionState();
+  const nextExecuteAt = state.monitoring_task_queue.reduce<number | null>((earliest, task) => {
+    const timestamp = new Date(task.next_execute_at).getTime();
+    if (Number.isNaN(timestamp)) {
+      return earliest;
+    }
+    if (earliest == null) {
+      return timestamp;
+    }
+    return Math.min(earliest, timestamp);
+  }, null);
+
+  await browser.alarms.clear(MONITORING_QUEUE_ALARM);
+  if (nextExecuteAt == null) {
+    return;
+  }
+
+  browser.alarms.create(MONITORING_QUEUE_ALARM, {
+    when: Math.max(Date.now() + 1000, nextExecuteAt),
+  });
+}
+
+function runMonitoringCycleSingleFlight(mode: MonitoringCycleMode): Promise<unknown> {
+  if (monitoringCycleInFlight) {
+    return monitoringCycleInFlight;
+  }
+
+  monitoringCycleInFlight = runMonitoringCycle(mode).finally(() => {
+    monitoringCycleInFlight = null;
+    void syncMonitoringQueueAlarm().catch((error) => {
+      console.warn("[geo-monitoring] failed to sync queue alarm", error);
+    });
+  });
+  return monitoringCycleInFlight;
+}
+
+function kickoffMonitoringCycle(): MonitoringCycleKickoffResponse {
+  if (monitoringCycleInFlight) {
+    return {
+      accepted: true,
+      status: "already_running",
+      message: "monitoring cycle is already running in background",
+    };
+  }
+
+  void runMonitoringCycleSingleFlight("manual").catch((error) => {
+    console.warn("[geo-monitoring] background cycle failed", error);
+  });
+
+  return {
+    accepted: true,
+    status: "started",
+    message: "monitoring cycle started in background",
+  };
+}
+
 export default defineBackground(() => {
   void getExtensionState();
+  void ensureBackgroundAlarms();
+  registerMonitoringRuntimeCapture();
+  void warmupMonitoringRuntime().catch((error) => {
+    console.warn("[geo-monitoring] warmup cycle failed", error);
+  });
+  void syncMonitoringQueueAlarm();
 
   browser.runtime.onInstalled.addListener(() => {
     void getExtensionState();
-    browser.alarms.create("geo.publisher.background-heartbeat", {
-      periodInMinutes: 60,
+    void ensureBackgroundAlarms();
+    void warmupMonitoringRuntime().catch((error) => {
+      console.warn("[geo-monitoring] install warmup cycle failed", error);
     });
+    void syncMonitoringQueueAlarm();
+  });
+
+  browser.runtime.onStartup.addListener(() => {
+    void getExtensionState();
+    void ensureBackgroundAlarms();
+    void warmupMonitoringRuntime().catch((error) => {
+      console.warn("[geo-monitoring] startup warmup cycle failed", error);
+    });
+    void syncMonitoringQueueAlarm();
   });
 
   browser.alarms.onAlarm.addListener(async (alarm) => {
-    if (alarm.name !== "geo.publisher.background-heartbeat") {
+    if (alarm.name === PUBLISHER_HEARTBEAT_ALARM) {
+      await getExtensionState();
       return;
     }
-    await getExtensionState();
+
+    if (alarm.name === MONITORING_HEARTBEAT_ALARM) {
+      try {
+        await runMonitoringCycleSingleFlight("automatic");
+      } catch (error) {
+        console.warn("[geo-monitoring] cycle failed", error);
+      }
+      return;
+    }
+
+    if (alarm.name === MONITORING_QUEUE_ALARM) {
+      try {
+        await runMonitoringCycleSingleFlight("automatic");
+      } catch (error) {
+        console.warn("[geo-monitoring] queue cycle failed", error);
+      }
+    }
   });
 
   chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
-    if (!message || message.type !== "geo.publisher.request") {
+    if (!message) {
       return undefined;
     }
 
-    void handlePublisherAction(message.action, message.payload)
-      .then((data) => {
+    if (message.type === "geo.publisher.request") {
+      void handlePublisherAction(message.action, message.payload)
+        .then((data) => {
+          sendResponse({
+            ok: true,
+            data,
+          } satisfies BackgroundSuccessResponse);
+        })
+        .catch((error: unknown) => {
+          sendResponse({
+            ok: false,
+            error: error instanceof Error ? error.message : "publisher_plugin_unknown_error",
+          } satisfies BackgroundErrorResponse);
+        });
+
+      return true;
+    }
+
+    if (message.type === "geo.monitoring.request") {
+      if (message.action === "kickoffCycle") {
         sendResponse({
           ok: true,
-          data,
+          data: kickoffMonitoringCycle(),
         } satisfies BackgroundSuccessResponse);
-      })
-      .catch((error: unknown) => {
-        sendResponse({
-          ok: false,
-          error: error instanceof Error ? error.message : "publisher_plugin_unknown_error",
-        } satisfies BackgroundErrorResponse);
-      });
+        return true;
+      }
 
-    return true;
+      const action = message.action === "runCycle" ? runMonitoringCycleSingleFlight("manual") : handleMonitoringAction(message.action);
+      void action
+        .then((data) => {
+          sendResponse({
+            ok: true,
+            data,
+          } satisfies BackgroundSuccessResponse);
+        })
+        .catch((error: unknown) => {
+          sendResponse({
+            ok: false,
+            error: error instanceof Error ? error.message : "monitoring_plugin_unknown_error",
+          } satisfies BackgroundErrorResponse);
+        });
+
+      return true;
+    }
+
+    return undefined;
   });
 });

apps/browser-extension/entrypoints/content.ts

@@ -1,6 +1,8 @@
 import { browser } from "wxt/browser";
 import { defineContentScript } from "wxt/utils/define-content-script";
 
+import { syncDoubaoMonitoringRuntimeStateFromPage } from "../src/monitoring-adapters/doubao-state";
+
 type PublisherRequestMessage = {
   source: "geo-admin";
   type: "geo.publisher.request";
@@ -9,6 +11,13 @@ type PublisherRequestMessage = {
   payload?: unknown;
 };
 
+type MonitoringRequestMessage = {
+  source: "geo-admin";
+  type: "geo.monitoring.request";
+  requestId: string;
+  action: "ping" | "detectPlatforms" | "syncHeartbeat" | "runCycle" | "kickoffCycle" | "getState";
+};
+
 type BackgroundSuccessResponse = {
   ok: true;
   data: unknown;
@@ -19,26 +28,95 @@ type BackgroundErrorResponse = {
   error?: string;
 };
 
+type RuntimeSyncMessage = {
+  type: "geo.monitoring.runtime.sync";
+  platform: "doubao";
+};
+
+function isExtensionContextInvalidatedError(error: unknown): boolean {
+  const message =
+    typeof error === "string"
+      ? error
+      : typeof error === "object" && error !== null && "message" in error && typeof error.message === "string"
+        ? error.message
+        : String(error ?? "");
+
+  const normalized = message.toLowerCase();
+  return normalized.includes("extension context invalidated") || normalized.includes("context invalidated");
+}
+
 function isBackgroundResponse(value: unknown): value is BackgroundSuccessResponse | BackgroundErrorResponse {
   return typeof value === "object" && value !== null && "ok" in value;
 }
 
+function registerDoubaoRuntimeSync(): void {
+  const hostname = window.location.hostname;
+  if (hostname !== "doubao.com" && hostname !== "www.doubao.com" && !hostname.endsWith(".doubao.com")) {
+    return;
+  }
+
+  const sync = () => {
+    void syncDoubaoMonitoringRuntimeStateFromPage().catch((error) => {
+      if (isExtensionContextInvalidatedError(error)) {
+        return;
+      }
+      console.warn("[geo-monitoring] failed to sync doubao runtime state", error);
+    });
+  };
+
+  sync();
+
+  window.addEventListener("pageshow", sync);
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) {
+      sync();
+    }
+  });
+  window.setInterval(sync, 15000);
+}
+
 export default defineContentScript({
   matches: ["http://*/*", "https://*/*"],
   main() {
-    window.addEventListener("message", async (event: MessageEvent<PublisherRequestMessage>) => {
-      if (event.source !== window || !event.data || event.data.type !== "geo.publisher.request") {
+    registerDoubaoRuntimeSync();
+
+    browser.runtime.onMessage.addListener((message: RuntimeSyncMessage, _sender, sendResponse) => {
+      if (!message || message.type !== "geo.monitoring.runtime.sync" || message.platform !== "doubao") {
+        return undefined;
+      }
+
+      void syncDoubaoMonitoringRuntimeStateFromPage()
+        .then(() => {
+          sendResponse({ ok: true });
+        })
+        .catch((error) => {
+          sendResponse({
+            ok: false,
+            error: error instanceof Error ? error.message : "monitoring_runtime_sync_failed",
+          });
+        });
+
+      return true;
+    });
+
+    window.addEventListener("message", async (event: MessageEvent<PublisherRequestMessage | MonitoringRequestMessage>) => {
+      if (
+        event.source !== window ||
+        !event.data ||
+        (event.data.type !== "geo.publisher.request" && event.data.type !== "geo.monitoring.request")
+      ) {
         return;
       }
       if (event.data.source !== "geo-admin") {
         return;
       }
 
-      const { requestId, action, payload } = event.data;
+      const { requestId, action } = event.data;
+      const payload = "payload" in event.data ? event.data.payload : undefined;
 
       try {
         const response = await browser.runtime.sendMessage({
-          type: "geo.publisher.request",
+          type: event.data.type,
           action,
           payload,
         });
@@ -59,7 +137,7 @@ export default defineContentScript({
         window.postMessage(
           {
             source: "geo-extension",
-            type: "geo.publisher.response",
+            type: event.data.type === "geo.publisher.request" ? "geo.publisher.response" : "geo.monitoring.response",
             requestId,
             success: true,
             data,
@@ -70,7 +148,7 @@ export default defineContentScript({
         window.postMessage(
           {
             source: "geo-extension",
-            type: "geo.publisher.response",
+            type: event.data.type === "geo.publisher.request" ? "geo.publisher.response" : "geo.monitoring.response",
             requestId,
             success: false,
             error: error instanceof Error ? error.message : "publisher_plugin_unknown_error",

apps/browser-extension/entrypoints/popup/App.vue

@@ -4,6 +4,7 @@ import { browser } from "wxt/browser";
 
 import { normalizeRemoteUrl } from "../../src/adapters/common";
 import { getExtensionState } from "../../src/storage";
+import type { StoredMonitoringPlatformState } from "../../src/monitoring-platforms";
 import type { StoredPlatformState } from "../../src/platforms";
 
 type BackgroundSuccessResponse = {
@@ -18,13 +19,27 @@ type BackgroundErrorResponse = {
 
 const loading = ref(true);
 const refreshing = ref(false);
+const monitoringRefreshing = ref(false);
+const monitoringHeartbeating = ref(false);
+const monitoringCycling = ref(false);
 
 const installationKey = ref("");
 const installationId = ref<number | null>(null);
 const apiBaseUrl = ref<string | null>(null);
 const platforms = ref<StoredPlatformState[]>([]);
+const monitoringPlatforms = ref<StoredMonitoringPlatformState[]>([]);
+const monitoringLastHeartbeatAt = ref<string | null>(null);
+const monitoringLastHeartbeatStatus = ref<string | null>(null);
+const monitoringLastCycleAt = ref<string | null>(null);
+const monitoringLastCycleStatus = ref<string | null>(null);
+const popupError = ref<string | null>(null);
+const monitoringMessage = ref<string | null>(null);
 
 const connectedCount = computed(() => platforms.value.filter((item) => item.connected).length);
+const monitoringAccessibleCount = computed(() => monitoringPlatforms.value.filter((item) => item.accessible).length);
+const monitoringBusy = computed(
+  () => loading.value || monitoringRefreshing.value || monitoringHeartbeating.value || monitoringCycling.value,
+);
 
 const statusText = computed(() => {
   if (loading.value || refreshing.value) {
@@ -41,6 +56,10 @@ function clonePlatforms(items: StoredPlatformState[]): StoredPlatformState[] {
   return items.map((platform) => ({ ...platform }));
 }
 
+function cloneMonitoringPlatforms(items: StoredMonitoringPlatformState[]): StoredMonitoringPlatformState[] {
+  return items.map((platform) => ({ ...platform }));
+}
+
 function isBackgroundResponse(value: unknown): value is BackgroundSuccessResponse | BackgroundErrorResponse {
   return typeof value === "object" && value !== null && "ok" in value;
 }
@@ -48,11 +67,7 @@ function isBackgroundResponse(value: unknown): value is BackgroundSuccessRespons
 async function loadState(): Promise<void> {
   loading.value = true;
   try {
-    const state = await getExtensionState();
-    installationKey.value = state.installation_key;
-    installationId.value = state.plugin_installation_id;
-    apiBaseUrl.value = state.api_base_url;
-    platforms.value = clonePlatforms(state.platforms);
+    await syncStateFromStorage();
   } finally {
     loading.value = false;
   }
@@ -61,12 +76,25 @@ async function loadState(): Promise<void> {
 async function initializePopup(): Promise<void> {
   try {
     await loadState();
-    await refreshDetectedPlatforms();
+    await Promise.allSettled([refreshDetectedPlatforms(), refreshMonitoringPlatforms()]);
   } finally {
     loading.value = false;
   }
 }
 
+async function syncStateFromStorage(): Promise<void> {
+  const state = await getExtensionState();
+  installationKey.value = state.installation_key;
+  installationId.value = state.plugin_installation_id;
+  apiBaseUrl.value = state.api_base_url;
+  platforms.value = clonePlatforms(state.platforms);
+  monitoringPlatforms.value = cloneMonitoringPlatforms(state.monitoring_platforms);
+  monitoringLastHeartbeatAt.value = state.monitoring_last_heartbeat_at;
+  monitoringLastHeartbeatStatus.value = state.monitoring_last_heartbeat_status;
+  monitoringLastCycleAt.value = state.monitoring_last_cycle_at;
+  monitoringLastCycleStatus.value = state.monitoring_last_cycle_status;
+}
+
 function titleFor(platform: StoredPlatformState): string {
   return platform.nickname?.trim() || platform.platform_name;
 }
@@ -113,6 +141,7 @@ async function simulateDetect(): Promise<void> {
 
 async function refreshDetectedPlatforms(): Promise<void> {
   refreshing.value = true;
+  popupError.value = null;
   try {
     const response = await browser.runtime.sendMessage({
       type: "geo.publisher.request",
@@ -121,14 +150,170 @@ async function refreshDetectedPlatforms(): Promise<void> {
     if (isBackgroundResponse(response) && !response.ok) {
       throw new Error(response.error || "publisher_plugin_unknown_error");
     }
-    const state = await getExtensionState();
-    installationId.value = state.plugin_installation_id;
-    apiBaseUrl.value = state.api_base_url;
-    platforms.value = clonePlatforms(state.platforms);
+    await syncStateFromStorage();
+  } catch (error) {
+    popupError.value = error instanceof Error ? error.message : "publisher_plugin_unknown_error";
   } finally {
     refreshing.value = false;
   }
 }
+
+function monitoringStatusLabel(platform: StoredMonitoringPlatformState): string {
+  if (platform.reason_code === "runtime_sync_pending") {
+    return "待同步";
+  }
+  if (platform.accessible) {
+    return "可采集";
+  }
+  if (platform.reason_code === "not_logged_in") {
+    return "需登录";
+  }
+  return "不可用";
+}
+
+function monitoringTone(platform: StoredMonitoringPlatformState): "success" | "danger" | "pending" {
+  if (monitoringBusy.value) {
+    return "pending";
+  }
+  if (platform.reason_code === "runtime_sync_pending") {
+    return "pending";
+  }
+  return platform.accessible ? "success" : "danger";
+}
+
+function monitoringHeartbeatSummary(): string {
+  if (!monitoringLastHeartbeatAt.value) {
+    return `可采集 ${monitoringAccessibleCount.value}/${monitoringPlatforms.value.length} 个平台`;
+  }
+  return `可采集 ${monitoringAccessibleCount.value}/${monitoringPlatforms.value.length} 个平台 · 最近心跳 ${formatDateTime(monitoringLastHeartbeatAt.value)}`;
+}
+
+function formatDateTime(value?: string | null): string {
+  if (!value) {
+    return "--";
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  return date.toLocaleString("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function monitoringHeartbeatStatusText(): string {
+  switch (monitoringLastHeartbeatStatus.value) {
+    case "success":
+      return `心跳在线 ${formatDateTime(monitoringLastHeartbeatAt.value)}`;
+    case "failed":
+      return `心跳失败 ${formatDateTime(monitoringLastHeartbeatAt.value)}`;
+    case "local_only":
+      return "插件尚未绑定到 SaaS";
+    default:
+      return "尚未同步心跳";
+  }
+}
+
+function monitoringCycleStatusText(): string {
+  switch (monitoringLastCycleStatus.value) {
+    case "success":
+      return `巡检完成 ${formatDateTime(monitoringLastCycleAt.value)}`;
+    case "partial_failed":
+      return `巡检部分失败 ${formatDateTime(monitoringLastCycleAt.value)}`;
+    case "skipped":
+      return `巡检已跳过 ${formatDateTime(monitoringLastCycleAt.value)}`;
+    case "idle":
+      return `巡检空闲 ${formatDateTime(monitoringLastCycleAt.value)}`;
+    case "no_query_capable_platforms":
+      return "已在线，采集适配器待接入";
+    case "not_configured":
+      return "插件尚未绑定到 SaaS";
+    case "heartbeat_failed":
+      return `巡检前心跳失败 ${formatDateTime(monitoringLastCycleAt.value)}`;
+    default:
+      return "尚未执行巡检";
+  }
+}
+
+function monitoringStatusPillTone(): "success" | "danger" | "pending" {
+  if (monitoringBusy.value) {
+    return "pending";
+  }
+  if (monitoringAccessibleCount.value > 0 && monitoringLastHeartbeatStatus.value === "success") {
+    return "success";
+  }
+  return "danger";
+}
+
+async function openMonitoringLoginPage(platform: StoredMonitoringPlatformState): Promise<void> {
+  if (!platform.login_url || monitoringBusy.value) {
+    return;
+  }
+  await browser.tabs.create({ url: platform.login_url });
+}
+
+async function refreshMonitoringPlatforms(): Promise<void> {
+  monitoringRefreshing.value = true;
+  monitoringMessage.value = null;
+  try {
+    const response = await browser.runtime.sendMessage({
+      type: "geo.monitoring.request",
+      action: "detectPlatforms",
+    });
+    if (isBackgroundResponse(response) && !response.ok) {
+      throw new Error(response.error || "monitoring_plugin_unknown_error");
+    }
+    await syncStateFromStorage();
+    monitoringMessage.value = "已刷新本地监测平台状态";
+  } catch (error) {
+    monitoringMessage.value = error instanceof Error ? error.message : "monitoring_plugin_unknown_error";
+  } finally {
+    monitoringRefreshing.value = false;
+  }
+}
+
+async function syncMonitoringHeartbeat(): Promise<void> {
+  monitoringHeartbeating.value = true;
+  monitoringMessage.value = null;
+  try {
+    const response = await browser.runtime.sendMessage({
+      type: "geo.monitoring.request",
+      action: "syncHeartbeat",
+    });
+    if (isBackgroundResponse(response) && !response.ok) {
+      throw new Error(response.error || "monitoring_plugin_unknown_error");
+    }
+    await syncStateFromStorage();
+    monitoringMessage.value = "已同步 monitoring heartbeat";
+  } catch (error) {
+    monitoringMessage.value = error instanceof Error ? error.message : "monitoring_plugin_unknown_error";
+  } finally {
+    monitoringHeartbeating.value = false;
+  }
+}
+
+async function runMonitoringCycle(): Promise<void> {
+  monitoringCycling.value = true;
+  monitoringMessage.value = null;
+  try {
+    const response = await browser.runtime.sendMessage({
+      type: "geo.monitoring.request",
+      action: "runCycle",
+    });
+    if (isBackgroundResponse(response) && !response.ok) {
+      throw new Error(response.error || "monitoring_plugin_unknown_error");
+    }
+    await syncStateFromStorage();
+    monitoringMessage.value = "已执行一轮 monitoring 巡检";
+  } catch (error) {
+    monitoringMessage.value = error instanceof Error ? error.message : "monitoring_plugin_unknown_error";
+  } finally {
+    monitoringCycling.value = false;
+  }
+}
 </script>
 
 <template>
@@ -196,6 +381,81 @@ async function refreshDetectedPlatforms(): Promise<void> {
         </article>
 
         <p class="popup-status">{{ statusText }}</p>
+        <p v-if="popupError" class="popup-status popup-status--error">{{ popupError }}</p>
+
+        <section class="popup-monitoring">
+          <div class="popup-monitoring__header">
+            <div>
+              <h3>AI 监测平台</h3>
+              <p>{{ monitoringHeartbeatSummary() }}</p>
+            </div>
+            <span class="popup-monitoring__pill" :class="`is-${monitoringStatusPillTone()}`">
+              {{ monitoringAccessibleCount }}/{{ monitoringPlatforms.length }} 可采集
+            </span>
+          </div>
+
+          <div class="popup-monitoring__stats">
+            <div class="popup-monitoring__stat">
+              <span>Heartbeat</span>
+              <strong>{{ monitoringHeartbeatStatusText() }}</strong>
+            </div>
+            <div class="popup-monitoring__stat">
+              <span>Cycle</span>
+              <strong>{{ monitoringCycleStatusText() }}</strong>
+            </div>
+          </div>
+
+          <div class="popup-monitoring__actions">
+            <button type="button" :disabled="monitoringBusy" @click="refreshMonitoringPlatforms">
+              {{ monitoringRefreshing ? "检测中" : "检测" }}
+            </button>
+            <button type="button" :disabled="monitoringBusy" @click="syncMonitoringHeartbeat">
+              {{ monitoringHeartbeating ? "同步中" : "心跳" }}
+            </button>
+            <button type="button" :disabled="monitoringBusy" @click="runMonitoringCycle">
+              {{ monitoringCycling ? "巡检中" : "巡检" }}
+            </button>
+          </div>
+
+          <p v-if="monitoringMessage" class="popup-monitoring__message">
+            {{ monitoringMessage }}
+          </p>
+
+          <div class="popup-monitoring__list">
+            <article
+              v-for="platform in monitoringPlatforms"
+              :key="platform.ai_platform_id"
+              class="popup-monitoring__item"
+              :class="`is-${monitoringTone(platform)}`"
+              :style="{ '--monitoring-accent': platform.accent_color }"
+            >
+              <div class="popup-monitoring__identity">
+                <div class="popup-monitoring__logo">
+                  <span>{{ platform.short_name }}</span>
+                </div>
+                <div class="popup-monitoring__copy">
+                  <strong>{{ platform.platform_name }}</strong>
+                  <span>{{ platform.access_requirement === "login_required" ? "登录后可采集" : "可匿名采集" }}</span>
+                </div>
+              </div>
+
+              <div class="popup-monitoring__meta">
+                <em>{{ monitoringStatusLabel(platform) }}</em>
+                <small>{{ platform.reason_message || formatDateTime(platform.detected_at) }}</small>
+              </div>
+
+              <button
+                v-if="platform.access_requirement === 'login_required' && !platform.connected && platform.login_url"
+                type="button"
+                class="popup-monitoring__login"
+                :disabled="monitoringBusy"
+                @click.stop="openMonitoringLoginPage(platform)"
+              >
+                去登录
+              </button>
+            </article>
+          </div>
+        </section>
 
         <details class="popup-debug">
           <summary>调试信息</summary>
@@ -212,6 +472,14 @@ async function refreshDetectedPlatforms(): Promise<void> {
               <dt>Installation Key</dt>
               <dd>{{ installationKey }}</dd>
             </div>
+            <div>
+              <dt>Monitoring Heartbeat</dt>
+              <dd>{{ monitoringLastHeartbeatStatus || "--" }}</dd>
+            </div>
+            <div>
+              <dt>Monitoring Cycle</dt>
+              <dd>{{ monitoringLastCycleStatus || "--" }}</dd>
+            </div>
           </dl>
         </details>
       </section>
@@ -573,6 +841,242 @@ async function refreshDetectedPlatforms(): Promise<void> {
   text-align: center;
 }
 
+.popup-status--error {
+  color: #c84545;
+}
+
+.popup-monitoring {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 14px;
+  padding: 14px;
+  border: 1px solid rgba(216, 225, 238, 0.95);
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 255, 0.94));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
+}
+
+.popup-monitoring__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.popup-monitoring__header h3 {
+  margin: 0;
+  color: #213247;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.popup-monitoring__header p {
+  margin: 4px 0 0;
+  color: #7d8ca0;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.popup-monitoring__pill {
+  flex-shrink: 0;
+  padding: 6px 10px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.popup-monitoring__pill.is-success {
+  color: #167a61;
+  background: rgba(37, 182, 135, 0.12);
+  border-color: rgba(37, 182, 135, 0.18);
+}
+
+.popup-monitoring__pill.is-danger {
+  color: #b64d4d;
+  background: rgba(224, 95, 95, 0.12);
+  border-color: rgba(224, 95, 95, 0.18);
+}
+
+.popup-monitoring__pill.is-pending {
+  color: #8d6b17;
+  background: rgba(243, 190, 68, 0.15);
+  border-color: rgba(243, 190, 68, 0.22);
+}
+
+.popup-monitoring__stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.popup-monitoring__stat {
+  padding: 10px 12px;
+  border: 1px solid rgba(223, 230, 240, 0.92);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.popup-monitoring__stat span {
+  display: block;
+  margin-bottom: 6px;
+  color: #8a96a7;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.popup-monitoring__stat strong {
+  display: block;
+  color: #324459;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.popup-monitoring__actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.popup-monitoring__actions button,
+.popup-monitoring__login {
+  appearance: none;
+  min-height: 36px;
+  padding: 0 10px;
+  border: 1px solid rgba(76, 114, 255, 0.18);
+  border-radius: 12px;
+  background: #ffffff;
+  color: #3351b8;
+  font-size: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  transition:
+    transform 150ms ease,
+    opacity 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.popup-monitoring__actions button:hover:not(:disabled),
+.popup-monitoring__login:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 14px rgba(56, 91, 205, 0.12);
+}
+
+.popup-monitoring__actions button:disabled,
+.popup-monitoring__login:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  transform: none;
+  box-shadow: none;
+}
+
+.popup-monitoring__message {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: rgba(67, 102, 215, 0.08);
+  color: #4d6180;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.popup-monitoring__list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.popup-monitoring__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid rgba(223, 230, 240, 0.92);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.88);
+}
+
+.popup-monitoring__item.is-success {
+  border-color: rgba(56, 176, 142, 0.22);
+}
+
+.popup-monitoring__item.is-danger {
+  border-color: rgba(226, 104, 104, 0.2);
+}
+
+.popup-monitoring__item.is-pending {
+  border-color: rgba(232, 188, 73, 0.2);
+}
+
+.popup-monitoring__identity {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.popup-monitoring__logo {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--monitoring-accent) 12%, white);
+  color: var(--monitoring-accent);
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.popup-monitoring__copy {
+  min-width: 0;
+}
+
+.popup-monitoring__copy strong,
+.popup-monitoring__copy span,
+.popup-monitoring__meta em,
+.popup-monitoring__meta small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.popup-monitoring__copy strong {
+  color: #223244;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.popup-monitoring__copy span {
+  margin-top: 3px;
+  color: #7c8a9c;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.popup-monitoring__meta {
+  min-width: 0;
+  text-align: right;
+}
+
+.popup-monitoring__meta em {
+  color: #2a405e;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.popup-monitoring__meta small {
+  margin-top: 4px;
+  color: #8895a6;
+  font-size: 11px;
+  font-weight: 600;
+}
+
 .popup-debug {
   margin-top: 12px;
   border: 1px solid rgba(216, 225, 238, 0.95);