tt-help-cli-ycl 1.3.83 → 1.3.85

package/src/watch/data-store.js

@@ -152,6 +152,9 @@ function initUserDb(filePath) {
   if (!existingJobColumns.has("top_video_href")) {
     db.exec(`ALTER TABLE jobs ADD COLUMN top_video_href TEXT`);
   }
+  if (!existingJobColumns.has("user_create_time")) {
+    db.exec(`ALTER TABLE jobs ADD COLUMN user_create_time INTEGER`);
+  }
   db.exec(`
     CREATE TABLE IF NOT EXISTS jobs_base (
       unique_id TEXT PRIMARY KEY,
@@ -212,6 +215,9 @@ function initUserDb(filePath) {
   if (!existingJobBaseColumns.has("bio_link")) {
     db.exec(`ALTER TABLE jobs_base ADD COLUMN bio_link TEXT`);
   }
+  if (!existingJobBaseColumns.has("user_create_time")) {
+    db.exec(`ALTER TABLE jobs_base ADD COLUMN user_create_time INTEGER`);
+  }
   db.exec(`
     CREATE TABLE IF NOT EXISTS raw_jobs (
       unique_id TEXT PRIMARY KEY,
@@ -271,6 +277,9 @@ function initUserDb(filePath) {
   if (!existingRawJobColumns.has("bio_link")) {
     db.exec(`ALTER TABLE raw_jobs ADD COLUMN bio_link TEXT`);
   }
+  if (!existingRawJobColumns.has("user_create_time")) {
+    db.exec(`ALTER TABLE raw_jobs ADD COLUMN user_create_time INTEGER`);
+  }
   db.exec(`
     CREATE TABLE IF NOT EXISTS videos (
       id TEXT PRIMARY KEY,
@@ -384,6 +393,30 @@ function initUserDb(filePath) {
     db.exec(`ALTER TABLE videos ADD COLUMN create_time INTEGER`);
   }
 
+  // tags 表：标签发现与打分系统
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS tags (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      tag TEXT NOT NULL UNIQUE,
+      status TEXT NOT NULL DEFAULT 'new',
+      score REAL NOT NULL DEFAULT 0,
+      created_at TEXT NOT NULL DEFAULT (datetime('now')),
+      scored_at TEXT,
+      score_count INTEGER NOT NULL DEFAULT 0,
+      countries TEXT NOT NULL DEFAULT '[]',
+      matched_countries TEXT DEFAULT '[]',
+      total_posts INTEGER DEFAULT 0,
+      author_count INTEGER DEFAULT 0,
+      matched_authors INTEGER DEFAULT 0,
+      pushed_users INTEGER DEFAULT 0,
+      source TEXT NOT NULL DEFAULT 'llm',
+      user_prompt TEXT,
+      last_error TEXT
+    )
+  `);
+  db.exec(`CREATE INDEX IF NOT EXISTS idx_tags_status ON tags(status)`);
+  db.exec(`CREATE INDEX IF NOT EXISTS idx_tags_score ON tags(score DESC)`);
+
   const count = db.prepare("SELECT COUNT(*) as c FROM users").get().c;
   console.log(`[data-store] SQLite users 表初始化完成: ${count} 条`);
 }
@@ -956,7 +989,7 @@ function moveJobsToRawByCountry(scope, country) {
       guessed_location, location_created, follower_count,
       following_count, heart_count, refresh_time, processed,
       processed_at, created_at, updated_at, region, signature,
-      sec_uid, latest_video_time
+      sec_uid, latest_video_time, user_create_time
     `;
   } else if (normalizedScope === "userUpdate") {
     sourceTable = "jobs_base";
@@ -968,7 +1001,7 @@ function moveJobsToRawByCountry(scope, country) {
       guessed_location, location_created, follower_count,
       following_count, heart_count, refresh_time, processed,
       processed_at, created_at, updated_at, region, signature,
-      sec_uid, latest_video_time
+      sec_uid, latest_video_time, user_create_time
     `;
   } else {
     return {
@@ -1307,6 +1340,158 @@ function getRawJobsPageFromDb({
   };
 }
 
+// ====== Tag 发现与打分 CRUD ======
+
+function insertTag(tag, countries, source = "llm") {
+  if (!db) return { inserted: false, error: "db not ready" };
+  try {
+    const result = db
+      .prepare(
+        `
+      INSERT OR IGNORE INTO tags (tag, countries, source)
+      VALUES (?, ?, ?)
+    `,
+      )
+      .run(tag, JSON.stringify(countries), source);
+    return { inserted: result.changes > 0, tag };
+  } catch (e) {
+    return { inserted: false, error: e.message };
+  }
+}
+
+function getTagsByStatus(status, limit = 100) {
+  if (!db) return [];
+  const rows = db
+    .prepare(
+      `
+    SELECT * FROM tags WHERE status = ? ORDER BY score ASC, created_at ASC LIMIT ?
+  `,
+    )
+    .all(status, limit);
+  return rows.map((r) => ({
+    ...r,
+    countries: JSON.parse(r.countries || "[]"),
+    matched_countries: JSON.parse(r.matched_countries || "[]"),
+  }));
+}
+
+function getTagsByCountry(country, minScore = 0) {
+  if (!db) return [];
+  const rows = db
+    .prepare(
+      `
+    SELECT * FROM tags WHERE status != 'dead'
+    ORDER BY score DESC
+  `,
+    )
+    .all();
+  // Filter in JS since countries is JSON
+  return rows
+    .map((r) => ({
+      ...r,
+      countries: JSON.parse(r.countries || "[]"),
+      matched_countries: JSON.parse(r.matched_countries || "[]"),
+    }))
+    .filter((r) => r.countries.includes(country) && r.score >= minScore);
+}
+
+function getDeadTags(country) {
+  if (!db) return [];
+  const rows = db
+    .prepare(
+      `
+    SELECT * FROM tags WHERE status = 'dead' ORDER BY score ASC
+  `,
+    )
+    .all();
+  return rows
+    .map((r) => ({
+      ...r,
+      countries: JSON.parse(r.countries || "[]"),
+      matched_countries: JSON.parse(r.matched_countries || "[]"),
+    }))
+    .filter((r) => r.countries.includes(country));
+}
+
+function claimTag(tag) {
+  if (!db) return { ok: false, error: "db not ready" };
+  const row = db.prepare("SELECT status FROM tags WHERE tag = ?").get(tag);
+  if (!row) return { ok: false, error: "tag not found" };
+  if (row.status !== "new")
+    return { ok: false, error: `tag status is ${row.status}, not new` };
+  db.prepare("UPDATE tags SET status = 'scoring' WHERE tag = ?").run(tag);
+  return { ok: true, tag, previousStatus: row.status };
+}
+
+function reportTagScore(tag, fields) {
+  if (!db) return { ok: false, error: "db not ready" };
+  const {
+    score,
+    status,
+    totalPosts,
+    authorCount,
+    matchedAuthors,
+    matchedCountries,
+    pushedUsers,
+    error,
+  } = fields;
+  const matchedCountriesJson = matchedCountries
+    ? JSON.stringify(matchedCountries)
+    : null;
+  const now = new Date().toISOString();
+
+  try {
+    const result = db
+      .prepare(
+        `
+      UPDATE tags SET
+        score = COALESCE(?, score),
+        status = COALESCE(?, status),
+        total_posts = COALESCE(?, total_posts),
+        author_count = COALESCE(?, author_count),
+        matched_authors = COALESCE(?, matched_authors),
+        matched_countries = COALESCE(?, matched_countries),
+        pushed_users = COALESCE(?, pushed_users),
+        last_error = COALESCE(?, last_error),
+        scored_at = ?,
+        score_count = score_count + 1
+      WHERE tag = ?
+    `,
+      )
+      .run(
+        score ?? null,
+        status ?? null,
+        totalPosts ?? null,
+        authorCount ?? null,
+        matchedAuthors ?? null,
+        matchedCountriesJson,
+        pushedUsers ?? null,
+        error ?? null,
+        now,
+        tag,
+      );
+    return { ok: result.changes > 0, tag };
+  } catch (e) {
+    return { ok: false, error: e.message };
+  }
+}
+
+function getAllTags(limit = 200) {
+  if (!db) return [];
+  const rows = db
+    .prepare(
+      `
+    SELECT * FROM tags ORDER BY score DESC, created_at DESC LIMIT ?
+  `,
+    )
+    .all(limit);
+  return rows.map((r) => ({
+    ...r,
+    countries: JSON.parse(r.countries || "[]"),
+    matched_countries: JSON.parse(r.matched_countries || "[]"),
+  }));
+}
+
 // 调试接口：直接执行 SQL 查询，返回原始数据
 function rawQuery(sql, params = []) {
   if (!db) return { error: "db not ready" };
@@ -1668,6 +1853,7 @@ const writableJobColumns = new Set([
   "latest_video_time",
   "top_video_play_count",
   "top_video_href",
+  "user_create_time",
 ]);
 
 function normalizeJobValue(column, value) {
@@ -1761,8 +1947,9 @@ function updateJobInfo(uniqueId, info, incrementCount = true) {
     if (key === "uniqueId" || key === "unique_id") continue;
     if (value === undefined || value === "") continue;
     let column = camelToSnake(key);
-    // 字段别名：bio → signature
+    // 字段别名：bio → signature, createTime → user_create_time
     if (column === "bio") column = "signature";
+    if (column === "create_time") column = "user_create_time";
     if (!writableJobColumns.has(column)) continue;
     nextValues[column] = normalizeJobValue(column, value);
   }
@@ -1805,8 +1992,9 @@ function updateJobBaseInfo(uniqueId, info, incrementCount = true) {
     if (key === "uniqueId" || key === "unique_id") continue;
     if (value === undefined || value === "") continue;
     let column = camelToSnake(key);
-    // 字段别名：bio → signature
+    // 字段别名：bio → signature, createTime → user_create_time
     if (column === "bio") column = "signature";
+    if (column === "create_time") column = "user_create_time";
     if (!writableJobColumns.has(column)) continue;
     nextValues[column] = normalizeJobValue(column, value);
   }
@@ -1951,6 +2139,8 @@ export function createStore(filePath, options = {}) {
   let clientErrors = new Map();
   // 客户端登录状态：userId → boolean
   let clientLoginStatus = new Map();
+  // 活跃客户端追踪：clientId → { type, ip, port, userId, lastSeen }
+  let activeClients = new Map();
   // refill 锁：防止多个 claimNextJob 同时触发 LLM refill
   let refillLock = null; // Promise | null
   // LLM 采样偏移量记忆：按猜测国家记录上次查询位置，避免重复采样
@@ -2192,6 +2382,43 @@ export function createStore(filePath, options = {}) {
     }
   }
 
+  function addRawUsers(users) {
+    if (!Array.isArray(users)) return { added: 0, skipped: 0 };
+    const now = Date.now();
+    let added = 0;
+    let skipped = 0;
+
+    for (const u of users) {
+      const uniqueId = (u.uniqueId || "").replace(/^@/, "").trim();
+      if (!uniqueId) continue;
+      if (hasUser(uniqueId)) {
+        skipped++;
+        continue;
+      }
+      const userObj = {
+        uniqueId,
+        status: "pending",
+        sources: Array.isArray(u.sources)
+          ? u.sources
+          : u.sources
+            ? [u.sources]
+            : ["tag"],
+        guessedLocation: u.guessedLocation || u.locationCreated || null,
+        locationCreated: u.locationCreated || null,
+        createdAt: now,
+        updatedAt: now,
+      };
+      const writeTxn = db.transaction((job) => {
+        addUserToDb(job);
+        addJobBaseToDb(job);
+      });
+      writeTxn(userObj);
+      added++;
+    }
+
+    return { added, skipped };
+  }
+
   function getPendingUsers() {
     if (db) {
       return getAllJobs().filter((u) => u.status === "pending");
@@ -2408,7 +2635,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
 
     // 构建 WHERE 条件
     const conditions = [
-      "COALESCE(video_count, 0) > 0",
+      "COALESCE(video_count, 0) > 6",
       "COALESCE(follower_count, 0) > 0",
       "COALESCE(following_count, 0) > 0",
     ];
@@ -2494,7 +2721,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
               .prepare(
                 `
                 SELECT * FROM raw_jobs WHERE ${whereSql} AND guessed_location = ?
-                ORDER BY created_at DESC
+                ORDER BY COALESCE(video_count, 0) DESC, created_at DESC
                 LIMIT ? OFFSET ?
               `,
               )
@@ -2608,7 +2835,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
           guessed_location, location_created, confirmed_location,
           follower_count, following_count, heart_count,
           created_at, updated_at, region, signature, bio_link, sec_uid,
-          status_code, latest_video_time
+          status_code, latest_video_time, user_create_time
         )
         SELECT
           unique_id, nickname, 'pending', sources, pinned,
@@ -2616,10 +2843,10 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
           guessed_location, location_created, confirmed_location,
           follower_count, following_count, heart_count,
           created_at, updated_at, region, signature, bio_link, sec_uid,
-          status_code, latest_video_time
+          status_code, latest_video_time, user_create_time
         FROM raw_jobs
         WHERE ${whereSql}
-        ORDER BY created_at DESC
+        ORDER BY COALESCE(video_count, 0) DESC, created_at DESC
         LIMIT ?
       `,
       ).run(...args, safeLimit);
@@ -2631,7 +2858,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
         WHERE unique_id IN (
           SELECT unique_id FROM raw_jobs
           WHERE ${whereSql}
-          ORDER BY created_at DESC
+          ORDER BY COALESCE(video_count, 0) DESC, created_at DESC
           LIMIT ?
         )
       `,
@@ -3732,20 +3959,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
       const now = Date.now();
       const threshold = now - maxAgeSeconds * 1000;
       const defaultTime = new Date("2016-01-01T00:00:00Z").getTime();
-      const targetLocations = [
-        "CZ",
-        "GR",
-        "HU",
-        "PT",
-        "ES",
-        "PL",
-        "NL",
-        "BE",
-        "DE",
-        "FR",
-        "IT",
-        "IE",
-      ];
+      const targetLocations = DEFAULT_TARGET_LOCATIONS;
       const placeholders = targetLocations.map(() => "?").join(",");
       const row = db
         .prepare(
@@ -3756,7 +3970,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
             AND verified = 0
             AND location_created IN (${placeholders})
             AND COALESCE(refresh_time, ?) < ?
-          ORDER BY COALESCE(refresh_time, ?) ASC
+          ORDER BY COALESCE(pinned, 0) DESC, COALESCE(refresh_time, ?) ASC
           LIMIT 1
         `,
         )
@@ -3777,20 +3991,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
     const defaultTime = new Date("2016-01-01T00:00:00Z").getTime();
 
     // 筛选目标国家用户，按 refreshTime 升序取最远的（没有则默认 2016-01-01）
-    const targetLocations = [
-      "CZ",
-      "GR",
-      "HU",
-      "PT",
-      "ES",
-      "PL",
-      "NL",
-      "BE",
-      "DE",
-      "FR",
-      "IT",
-      "IE",
-    ];
+    const targetLocations = DEFAULT_TARGET_LOCATIONS;
     const targetUsers = data.filter(
       (u) =>
         u.ttSeller &&
@@ -3806,6 +4007,10 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
     if (recentEnough.length === 0) return null;
 
     recentEnough.sort((a, b) => {
+      // pinned 优先，其次按 refreshTime 升序
+      if ((a.pinned ? 1 : 0) !== (b.pinned ? 1 : 0)) {
+        return (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0);
+      }
       const ta = a.refreshTime || defaultTime;
       const tb = b.refreshTime || defaultTime;
       return ta - tb;
@@ -3928,6 +4133,38 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
     return Object.fromEntries(clientLoginStatus);
   }
 
+  function trackClient(clientId, info) {
+    const existing = activeClients.get(clientId);
+    if (existing) {
+      if (info.type) existing.type = info.type;
+      if (info.userId) existing.userId = info.userId;
+      if (info.ip) existing.ip = info.ip;
+      if (info.port !== undefined) existing.port = info.port;
+      existing.lastSeen = Date.now();
+    } else {
+      activeClients.set(clientId, {
+        ...info,
+        lastSeen: Date.now(),
+      });
+    }
+  }
+
+  function getActiveClients() {
+    const now = Date.now();
+    const stale = 2 * 60 * 1000;
+    for (const [id, info] of activeClients) {
+      if (now - info.lastSeen > stale) activeClients.delete(id);
+    }
+    return Array.from(activeClients.entries()).map(([clientId, info]) => ({
+      clientId,
+      type: info.type || "unknown",
+      ip: info.ip || "",
+      port: info.port || 0,
+      userId: info.userId || "",
+      lastSeen: info.lastSeen,
+    }));
+  }
+
   function getPendingUserUpdateTasks(limit, countries) {
     const targetCountries = countries
       ? countries.map((c) => String(c).trim().toUpperCase())
@@ -4067,7 +4304,8 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
           guessed_location, location_created, confirmed_location, modified_at,
           follower_count, following_count, heart_count, refresh_time,
           processed, processed_at, created_at, updated_at,
-          region, signature, bio_link, sec_uid, status_code, latest_video_time
+          region, signature, bio_link, sec_uid, status_code, latest_video_time,
+          user_create_time
         )
         SELECT
           unique_id, nickname, status, sources, claimed_by, claimed_at,
@@ -4076,7 +4314,8 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
           guessed_location, location_created, confirmed_location, modified_at,
           follower_count, following_count, heart_count, refresh_time,
           processed, processed_at, created_at, updated_at,
-          region, signature, bio_link, sec_uid, status_code, latest_video_time
+          region, signature, bio_link, sec_uid, status_code, latest_video_time,
+          user_create_time
         FROM jobs WHERE unique_id = ?
       `,
       ).run(safeId);
@@ -4115,11 +4354,12 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
             return;
           }
 
-          // 检查 tt_seller：商家移到 jobs，非商家移到 raw_jobs
+          // 检查 tt_seller：商家且视频数>0移到 jobs，否则移到 raw_jobs
           const row = getJobBaseRow(uniqueId);
           const ttSeller = row ? row.tt_seller : null;
-          if (ttSeller) {
-            // 商家：标记移动到 jobs
+          const videoCount = row ? row.video_count || 0 : 0;
+          if (ttSeller && videoCount > 0) {
+            // 商家且有视频：标记移动到 jobs
             results.push({
               uniqueId,
               ok: true,
@@ -4128,7 +4368,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
             });
             sellerMoveList.push(uniqueId);
           } else {
-            // 非商家：标记移动到 raw_jobs
+            // 非商家或无视频：标记移动到 raw_jobs
             results.push({
               uniqueId,
               ok: true,
@@ -4153,7 +4393,8 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
             guessed_location, location_created, confirmed_location, modified_at,
             follower_count, following_count, heart_count, refresh_time,
             processed, processed_at, created_at, updated_at,
-            region, signature, bio_link, sec_uid, status_code, latest_video_time
+            region, signature, bio_link, sec_uid, status_code, latest_video_time,
+            user_create_time
           )
           SELECT
             unique_id, nickname, status, sources, claimed_by, claimed_at,
@@ -4162,7 +4403,8 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
             guessed_location, location_created, confirmed_location, modified_at,
             follower_count, following_count, heart_count, refresh_time,
             processed, processed_at, created_at, updated_at,
-            region, signature, bio_link, sec_uid, status_code, latest_video_time
+            region, signature, bio_link, sec_uid, status_code, latest_video_time,
+            user_create_time
           FROM jobs_base WHERE unique_id IN (${placeholders})
         `,
         ).run(...sellerMoveList);
@@ -4184,7 +4426,8 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
             guessed_location, location_created, confirmed_location, modified_at,
             follower_count, following_count, heart_count, refresh_time,
             processed, processed_at, created_at, updated_at,
-            region, signature, bio_link, sec_uid, status_code, latest_video_time
+            region, signature, bio_link, sec_uid, status_code, latest_video_time,
+            user_create_time
           )
           SELECT
             unique_id, nickname, status, sources, claimed_by, claimed_at,
@@ -4193,7 +4436,8 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
             guessed_location, location_created, confirmed_location, modified_at,
             follower_count, following_count, heart_count, refresh_time,
             processed, processed_at, created_at, updated_at,
-            region, signature, bio_link, sec_uid, status_code, latest_video_time
+            region, signature, bio_link, sec_uid, status_code, latest_video_time,
+            user_create_time
           FROM jobs_base WHERE unique_id IN (${placeholders})
         `,
         ).run(...rawMoveList);
@@ -4449,6 +4693,7 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
     hasUser,
     userExists,
     addUser,
+    addRawUsers,
     getPendingUsers,
     getProcessedUsers,
     getAllUsers,
@@ -4493,6 +4738,8 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
     deleteClientError,
     getClientErrors,
     getClientLoginStatus,
+    trackClient,
+    getActiveClients,
     registerVideos,
     getVideo,
     getVideos,
@@ -4504,6 +4751,14 @@ Standards: 90-100=clear match, 70-89=likely, 50-69=possible, 20-49=low, 0-19=unl
     stopBackup,
     rawQuery,
     getLlmSampleOffsets, // 获取 LLM 采样偏移量状态
+    // Tag 发现与打分
+    insertTag,
+    getTagsByStatus,
+    getTagsByCountry,
+    getDeadTags,
+    claimTag,
+    reportTagScore,
+    getAllTags,
     data,
   };
 

package/src/watch/public/app.js

@@ -221,6 +221,7 @@ function renderStats() {
   renderCountryChart(d.countryStats);
   renderSourceChart(d.sourceStats);
   renderTargetLocationFilter(d.targetCountryStats);
+  renderActiveClients(d.activeClients || []);
 }
 
 function renderTargetLocationFilter(targetCountryStats) {
@@ -237,6 +238,100 @@ function renderTargetLocationFilter(targetCountryStats) {
       .join("");
 }
 
+function formatRelativeTime(ts) {
+  const diff = Math.max(0, Date.now() - ts);
+  if (diff < 5000) return "刚刚";
+  const s = Math.round(diff / 1000);
+  if (s < 60) return s + " 秒前";
+  const m = Math.round(s / 60);
+  if (m < 60) return m + " 分钟前";
+  return Math.round(m / 60) + " 小时前";
+}
+
+function renderActiveClients(clients) {
+  const section = document.getElementById("activeClientsSection");
+  const bar = document.getElementById("activeClientsBar");
+  const table = document.getElementById("activeClientsTable");
+  const tbody = document.getElementById("activeClientsBody");
+  if (!section || !bar) return;
+
+  const types = ["explore", "refresh", "attach", "comments"];
+  const labels = { explore: "Explore", refresh: "Refresh", attach: "Attach", comments: "Comments" };
+  const grouped = {};
+  for (const c of clients) {
+    if (!grouped[c.type]) grouped[c.type] = [];
+    grouped[c.type].push(c);
+  }
+
+  const counts = {};
+  for (const t of types) counts[t] = (grouped[t] || []).length;
+  const total = clients.length;
+
+  if (total === 0) {
+    section.style.display = "none";
+    return;
+  }
+  section.style.display = "";
+
+  // 清除之前的选择状态
+  let selectedType = bar.dataset.selectedType || "";
+
+  const parts = ['<span class="bar-label">活跃客户端</span>'];
+  for (const t of types) {
+    const count = counts[t] || 0;
+    const cls = count > 0 ? "active" : "inactive";
+    const dot = count > 0 ? '<span class="dot"></span>' : "";
+    const sel = t === selectedType ? " selected" : "";
+    parts.push(
+      `<span class="client-badge ${cls}${sel}" data-type="${t}" onclick="toggleClientDetail('${t}')">${dot}${labels[t]}: ${count}</span>`,
+    );
+  }
+  bar.innerHTML = parts.join("\n");
+
+  // 如果有选中类型，刷新明细
+  if (selectedType && grouped[selectedType]) {
+    showClientDetail(selectedType, grouped[selectedType]);
+  } else {
+    table.style.display = "none";
+  }
+}
+
+function toggleClientDetail(type) {
+  const bar = document.getElementById("activeClientsBar");
+  if (bar.dataset.selectedType === type) {
+    bar.dataset.selectedType = "";
+    document.getElementById("activeClientsTable").style.display = "none";
+  } else {
+    bar.dataset.selectedType = type;
+  }
+  if (currentStats) renderActiveClients(currentStats.activeClients || []);
+}
+
+function showClientDetail(type, clients) {
+  const table = document.getElementById("activeClientsTable");
+  const tbody = document.getElementById("activeClientsBody");
+  table.style.display = "";
+  tbody.innerHTML = clients
+    .map((c) => {
+      const cid = c.clientId ? c.clientId.substring(0, 8) : "-";
+      const ipPort = c.ip
+        ? c.ip + (c.port ? ":" + c.port : "")
+        : "-";
+      const userId = c.userId || "-";
+      const last = formatRelativeTime(c.lastSeen);
+      return `<tr>
+        <td class="client-id">${cid}</td>
+        <td class="ip-port">${ipPort}</td>
+        <td class="ip-port">${c.port || "-"}</td>
+        <td class="user-id">${userId}</td>
+        <td class="last-seen">${last}</td>
+      </tr>`;
+    })
+    .join("");
+}
+
+window.toggleClientDetail = toggleClientDetail;
+
 function renderCountryChart(countries) {
   const el = document.getElementById("countryChart");
   const filtered = countries.filter((c) => c.country !== "未知");