npm - agim-cli - Versions diffs - 1.2.70 → 1.2.72 - Mend

agim-cli 1.2.70 → 1.2.72

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

package/dist/web/public/tasks.html DELETED Viewed

@@ -1,3724 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Agim — Tasks</title>
-  <!-- Shared utilities: theme manager applies before first paint, error
-       boundary surfaces silent script failures, i18n + api helpers are
-       used by the page-specific script below. -->
-  <script src="/_app.js"></script>
-  <script>
-    // Wrapped in an IIFE so `const T` / `LANGS` / `savedLang` / `browserLang`
-    // stay out of the global script scope. Without this, the second
-    // <script> tag below also declares `const T = window.__t`, and classic
-    // (non-module) `<script>` tags share the same top-level lexical scope —
-    // which made the page silently die with "Identifier 'T' has already
-    // been declared" before any tab labels / buttons could be filled.
-    (() => {
-    const LANGS = { en: 'English', zh: '中文' };
-    const savedLang = localStorage.getItem('im-hub-lang');
-    const browserLang = navigator.language.startsWith('zh') ? 'zh' : 'en';
-    window.__lang = savedLang && LANGS[savedLang] ? savedLang : browserLang;
-    document.documentElement.lang = window.__lang === 'zh' ? 'zh-CN' : 'en';
-    const T = {
-      en: {
-        title: 'Agim — Tasks',
-        h1: '🗂 Tasks & Schedules',
-        backToChat: '↩ Chat',
-        toReminders: 'Reminders',
-        toMemos: 'Memos',
-        toSettings: 'Settings',
-        tabsJobs: 'Jobs',
-        tabsBackground: 'Background',
-        tabsSubtasks: 'Subtasks',
-        tabsSchedules: 'Schedules',
-        tabsAudit: 'Audit',
-        tabsHealth: 'Health',
-        tabsApprovals: 'Approvals',
-        loading: 'Loading...',
-        // Health tab
-        healthBreaker: 'Breaker',
-        healthRate: 'Rate limit',
-        healthLatency: 'Latency',
-        healthInvocations: 'Invocations',
-        healthSuccessRate: 'Success rate',
-        healthCost: 'Cost',
-        healthCooldown: 'Cooldown',
-        healthEmpty: 'No agents registered yet.',
-        healthSparklineLabel: 'p95 latency over last 60 polls',
-        breakerClosed: 'Closed',
-        breakerOpen: 'Open',
-        breakerHalfOpen: 'Half-open',
-        // Approvals tab
-        approvalsEmpty: 'No pending approvals.',
-        approvalsCount: '{n} pending',
-        approvalsAge: 'Age',
-        approvalsTool: 'Tool',
-        approvalsThread: 'Thread',
-        approvalsAllow: 'Allow',
-        approvalsDeny: 'Deny',
-        approvalsAllowAll: 'Allow + auto',
-        approvalsResolveErr: 'Failed to resolve',
-        approvalsAutoMode: 'auto-allow grace mode',
-        statsTotal: 'Total',
-        statsPending: 'Pending',
-        statsRunning: 'Running',
-        statsCompleted: 'Completed',
-        statsFailed: 'Failed',
-        filterAll: 'All',
-        filterPending: 'Pending',
-        filterRunning: 'Running',
-        filterCompleted: 'Completed',
-        filterFailed: 'Failed',
-        filterCancelled: 'Cancelled',
-        refresh: 'Refresh',
-        autoRefresh: 'Auto-refresh',
-        newJob: 'New Job',
-        agent: 'Agent',
-        prompt: 'Prompt',
-        status: 'Status',
-        created: 'Created',
-        completed: 'Completed',
-        actions: 'Actions',
-        view: 'View',
-        run: 'Run',
-        cancel: 'Cancel',
-        details: 'Details',
-        result: 'Result',
-        error: 'Error',
-        close: 'Close',
-        empty: 'No tasks. Create one with /job create or via the New Job button.',
-        emptySchedules: 'No schedules. Create one in IM with /cron create.',
-        scheduleName: 'Name',
-        scheduleCron: 'Cron',
-        scheduleNext: 'Next run',
-        scheduleLast: 'Last run',
-        promptCreate: 'Prompt for the new job',
-        agentCreate: 'Agent (defaults to claude-code)',
-        bgRoot: 'Source',
-        bgName: 'Name',
-        bgStarted: 'Started',
-        bgEnded: 'Ended',
-        bgPid: 'PID',
-        bgExit: 'Exit',
-        bgRestart: 'Gen',
-        bgCommand: 'Command',
-        bgWorkdir: 'Workdir',
-        bgOutDir: 'Output',
-        bgLogTail: 'Log tail (last 200 lines)',
-        bgEmpty: 'No background jobs in this source. Use bgjob start to create one.',
-        subParent: 'Parent thread',
-        subAgent: 'Agent',
-        subPrompt: 'Prompt',
-        subCreated: 'Created',
-        subEmpty: 'No subtasks recorded. Use /job switch <id> in IM to spawn one.',
-        auditDays: 'Days',
-        auditTime: 'Time',
-        auditUser: 'User',
-        auditPlatform: 'Platform',
-        auditIntent: 'Intent',
-        auditDuration: 'Duration',
-        auditCost: 'Cost',
-        auditOk: 'OK',
-        auditError: 'Error',
-        auditEmpty: 'No invocations recorded yet for this filter.',
-        // Files tab — read-only browser of ~/.im-hub-workspaces/<agent>/
-        tabsFiles: 'Files',
-        filesAgent: 'Agent',
-        filesPath: 'Path',
-        filesEmpty: 'Empty directory.',
-        filesNoAgent: 'No agents registered yet.',
-        filesUp: '⬆ up',
-        filesRoot: '(root)',
-        filesSize: 'Size',
-        filesMtime: 'Modified',
-        filesBinary: 'Binary file — content shown as base64.',
-        filesTruncated: 'File too large — showing first 1 MiB.',
-        filesNotFound: 'Not found.',
-        filesLoad: 'Load',
-        filesEdit: 'Edit',
-        filesEditing: 'editing…',
-        filesSave: 'Save',
-        filesSaving: 'Saving…',
-        filesCancel: 'Cancel',
-        filesSaved: 'Saved.',
-        filesSaveFailed: 'Save failed',
-        // Jobs batch toolbar
-        jobsSelectAll: 'Select all',
-        jobsBatchCancel: 'Cancel selected',
-        jobsBatchRun: 'Run selected',
-        jobsBatchEmpty: 'No jobs selected.',
-        jobsBatchResult: 'Batch result: {ok} ok, {fail} failed',
-        // v1.1.2 / v1.1.3 — new tabs + columns
-        tabsOutbox: 'Outbox',
-        tabsA2A: 'A2A',
-        kindCol: 'Kind',
-        parentCol: 'Parent',
-        depthCol: 'Depth',
-        filterAllKinds: 'All kinds',
-        filterKindJob: 'job (explicit /job)',
-        filterKindInline: 'inline (auto-tracked)',
-        outboxEmpty: 'No outbox rows.',
-        outboxStatusPending: '⏳ Pending',
-        outboxStatusDelivered: '✅ Delivered',
-        outboxStatusGivingUp: '💀 Giving up',
-        outboxRetry: 'Retry',
-        outboxColPlatform: 'Platform',
-        outboxColKind: 'Kind',
-        outboxColPri: 'Pri',
-        outboxColAttempts: 'Attempts',
-        outboxColPayload: 'Payload',
-        outboxColError: 'Error',
-        outboxColCreated: 'Created',
-        a2aEmpty: 'No A2A calls yet.',
-        a2aRecent: 'Recent A2A calls',
-        a2aCallerCallee: 'Caller→Callee',
-        a2aTreeRoot: 'Call tree (root #{id})',
-        a2aTreeInputJob: 'job id for tree…',
-        a2aBtnTree: 'Tree',
-        a2aBtnViewParent: 'View parent tree',
-        a2aStatTotal: 'Total',
-        a2aStat24h: '24h',
-        a2aStatMaxDepth: 'Max depth',
-        a2aStatTop: 'Top:',
-        modalParent: 'Parent',
-        modalDepth: 'Depth',
-        modalThread: 'Thread',
-        modalReplaced: 'Replaced by',
-        modalLastOutbox: 'Last outbox',
-        modalArtifacts: 'Artifacts',
-        modalArtifactsInputs: 'Inputs:',
-        modalArtifactsOutputs: 'Outputs:',
-        modalDelivered: 'Delivered',
-        helpClose: 'Close',
-        // Help tooltips (concept glossary). Used by the (?) icons next to
-        // jargon. Keys are short ids; values are { title, body } in the
-        // 'help' namespace below.
-        help: {
-          outbox: {
-            title: 'Outbox · 投递队列',
-            body: 'Every outbound IM message is first written to a SQLite outbox, then a background worker drains it with exponential backoff. If the messenger glitches or the user is briefly offline, the row stays "pending" and gets retried (1s → 5s → 30s → 5min → 30min → 2h). After 6 failed attempts the row transitions to "giving_up" and stops retrying until you click Retry. Visible in: /tasks Outbox tab, IM command /outbox status.',
-          },
-          inline: {
-            title: 'Inline job · 内联任务',
-            body: 'An inline job is the row agim auto-creates for every inbound IM message that triggers an agent. It tracks the full lifecycle (pending → running → completed → delivered) so a crash or restart never loses work. Distinct from kind=job rows which come from explicit /job create. Retention: 24h (vs 30d for kind=job).',
-          },
-          a2a: {
-            title: 'A2A · Agent-to-Agent',
-            body: 'When the active agent calls another agent via mcp__imhub__call_agent (e.g. claude saying "用 codex 跑 git status"), agim spawns the callee as a fresh inline job whose parent_id points back at the caller. Guardrails enforced by agim: depth ceiling (default 3), self-call ban, workspace whitelist, shared per-user budget. The tree view shows the full caller→callee chain.',
-          },
-          artifacts: {
-            title: 'Artifacts · 共享文件',
-            body: 'A2A Layer 2 lets agents exchange files instead of cramming everything into prompts. Each A2A inline job gets a dedicated ~/.agim/artifacts/<jobId>/_agim-{input,output}/ directory. Caller drops files via `inputs[]`; callee writes results to _agim-output/; caller reads them through this UI or with the agent\'s native Read tool. Retention follows the inline job (24h).',
-          },
-          callDepth: {
-            title: 'Call depth · 调用深度',
-            body: 'How deep this row sits in an A2A chain. 0 = user-originated message. +1 per nested mcp__imhub__call_agent invocation. Configurable max via IMHUB_A2A_MAX_DEPTH (default 3) — exceeding it rejects the call before any tokens are spent.',
-          },
-          parent: {
-            title: 'Parent · 父任务',
-            body: 'For A2A callees, the inline-job id of the row that fired mcp__imhub__call_agent. NULL on user-originated rows. Click to open the parent\'s detail view.',
-          },
-          replacedBy: {
-            title: 'Replaced by · 已被替换为',
-            body: 'For interrupted inline jobs the user retried via "1 重发" after a restart, this points at the new replacement row that ran instead. The old row stays for audit purposes.',
-          },
-          givingUp: {
-            title: 'Giving up · 已放弃',
-            body: 'An outbox row enters this state after 6 failed delivery attempts (cumulative ~3h of backoff). It will no longer be retried automatically. Click "Retry" to put it back into the pending queue from scratch.',
-          },
-        },
-        // ── v1.2 Cost & Health tab ──
-        tabsCost: '💰 Cost & Health',
-        tabsMemory: '🧠 Memory',
-        tabsSkills: '🛠 Skills',
-        skillsH2: '🛠 Installed Skills',
-        skillsIntro: 'Read-only inventory of skills installed for claude-code / opencode on this host. Click a row for the full description. To install a new skill, send <code>/find-skills</code> in IM, or browse the skillhub.cn hot list below.',
-        skillsSearchPh: 'Search (name / description)',
-        skillsCatAll: 'All categories',
-        skillsRemoteH2: 'Hot on skillhub.cn',
-        skillsRemoteOpen: 'Open skillhub.cn ↗',
-        skillsRemoteIntro: 'Live top-50 hot downloads from skillhub.cn (5-min cache). Click any entry for the description + install instructions. agim never auto-runs installs — you copy the command and paste into shell or IM.',
-        skillsRemoteCached: 'cache hit',
-        skillsRemoteStale: 'upstream down, serving cached',
-        skillsCol: 'slug',
-        skillsName: 'name / description',
-        skillsStars: '⭐ stars',
-        skillsInstalls: '⬇ installs',
-        skillsHowInstall: 'Install (pick one; agim never auto-runs)',
-        skillsHostHint: 'The first two require skillhub CLI on the host. See docs/skills.md or skillhub.cn.',
-        costH2: '💰 Cost & Health',
-        costWindow: 'Window',
-        costDays1: '1 day',
-        costDays7: '7 days',
-        costDays30: '30 days',
-        costDays90: '90 days',
-        costRefresh: 'Refresh',
-        costDailyTrend: 'Daily trend',
-        costMetricCalls: 'Calls',
-        costMetricCost: 'Cost ($)',
-        costMetricErrors: 'Errors',
-        costMetricLatency: 'Avg latency (ms)',
-        costTopUser: 'Top by User',
-        costTopAgent: 'Top by Agent',
-        costTopPlatform: 'Top by Platform',
-        // ── v1.5/1.6 Memory tab ──
-        memoryH2: '🧠 Long-term memory',
-        memoryIntro: 'Facts auto-extracted from conversations + persona summary. Pick a user → view / edit / delete. All data lives in ~/.agim/memory.db locally; nothing is uploaded.',
-        memoryUser: 'User',
-        memoryUserLoading: '— loading —',
-        memoryReloadUsers: '🔄 Reload users',
-        memoryExportUser: '📦 Export user JSON',
-        memoryPersonaCard: 'Persona summary',
-        memoryPersonaPlaceholder: '(No persona for this user yet — will be auto-generated at next consolidation, or write one manually.)',
-        memoryPersonaSave: 'Save persona',
-        memoryPersonaDelete: 'Delete persona',
-        memoryPersonaConsolidate: '🔁 Rebuild persona now',
-        memoryFactsCard: 'Facts',
-        memoryFactsSearch: 'Search (FTS5)',
-        memoryFactsCatAll: 'All types',
-        memoryFactsQuery: 'Query',
-        memoryFactsSelectUser: '(Select a user)',
-        memoryFactsPrev: '← Prev',
-        memoryFactsNext: 'Next →',
-        memoryFactsClearLowConf: '🗑 Clear low-confidence',
-        memoryFactsClearAll: '⚠️ Clear all',
-        // ── v1.6 Vector card ──
-        vecTitle: '🔍 Vector retrieval',
-        vecSubtitle: '(optional enhancement · default off)',
-        vecWhyHeading: 'Why add vectors?',
-        vecWhyDefault: 'Default (FTS5 keyword): only literal hits — "Tencent" → facts containing "Tencent".',
-        vecWhyAdded: 'With vectors: also recall synonyms / cross-lingual / conceptual queries:',
-        vecWhyEx1: '▸ "investment preference" → recalls "user prefers low-drawdown, steady"',
-        vecWhyEx2: '▸ "Beijing" → recalls "user works in 北京"',
-        vecWhyEx3: '▸ "my son\'s birthday" → recalls "Tom born 2018-03-15"',
-        vecWhenHeading: 'When to enable',
-        vecWhenBody: '50+ facts stored AND agent often "forgets" what the user said. Stock install does not need it — FTS5 is enough.',
-        vecBackend: 'Backend',
-        vecBackendOff: 'Off (FTS5 only)',
-        vecBackendLocal: 'Local BGE (one-time download ~250MB)',
-        vecBackendOpenai: 'Remote OpenAI-compatible (baseUrl + key)',
-        vecLocalModel: 'Local model',
-        vecLocalSmall: 'Small (small, ~100MB, speed-first)',
-        vecLocalBase: 'Medium (base, ~250MB, recommended)',
-        vecLocalLarge: 'Large (large, ~500MB, accuracy-first)',
-        vecLocalCustom: 'Custom…',
-        vecLocalHint: 'All three presets are BGE Chinese-optimized models (open-sourced by BAAI; Xenova provides ONNX quantized builds on HuggingFace). First download goes to ~/.agim/cache/transformers.',
-        vecDownloadBtn: '📥 Download model (first time 5–10 min, WiFi recommended)',
-        vecOpenaiKey: 'API Key',
-        vecOpenaiReveal: '🔓 Reveal & edit',
-        vecOpenaiKeyHint: 'Masked by default; if you don\'t click reveal, save will not overwrite the existing value.',
-        vecTestBtn: '🧪 Test connection (10s timeout)',
-        vecSaveBtn: 'Save config',
-        vecBackfillBtn: '🔄 Backfill all',
-        vecClearBtn: '🗑 Clear vector index',
-        vecMemoryDisabled: '○ Memory not enabled (turn on in Settings → automation)',
-      },
-      zh: {
-        title: 'Agim — 任务',
-        h1: '🗂 任务与定时',
-        backToChat: '↩ 对话',
-        toReminders: '提醒',
-        toMemos: '备忘',
-        toSettings: '设置',
-        tabsAudit: '审计',
-        tabsJobs: '任务',
-        tabsBackground: '后台脚本',
-        tabsSubtasks: '子任务',
-        tabsSchedules: '定时',
-        tabsHealth: '健康',
-        tabsApprovals: '审批',
-        loading: '加载中...',
-        // Health tab
-        healthBreaker: '断路器',
-        healthRate: '限流',
-        healthLatency: '延迟',
-        healthInvocations: '调用次数',
-        healthSuccessRate: '成功率',
-        healthCost: '成本',
-        healthCooldown: '冷却',
-        healthEmpty: '尚未注册任何 Agent。',
-        healthSparklineLabel: '最近 60 次轮询的 p95 延迟',
-        breakerClosed: '正常',
-        breakerOpen: '熔断',
-        breakerHalfOpen: '半开',
-        // Approvals tab
-        approvalsEmpty: '当前无待审批请求。',
-        approvalsCount: '待审批 {n} 条',
-        approvalsAge: '等待',
-        approvalsTool: '工具',
-        approvalsThread: '会话',
-        approvalsAllow: '批准',
-        approvalsDeny: '拒绝',
-        approvalsAllowAll: '批准并自动放行',
-        approvalsResolveErr: '处理失败',
-        approvalsAutoMode: '自动放行宽限期',
-        statsTotal: '总计',
-        statsPending: '待执行',
-        statsRunning: '运行中',
-        statsCompleted: '已完成',
-        statsFailed: '失败',
-        filterAll: '全部',
-        filterPending: '待执行',
-        filterRunning: '运行中',
-        filterCompleted: '已完成',
-        filterFailed: '失败',
-        filterCancelled: '已取消',
-        refresh: '刷新',
-        autoRefresh: '自动刷新',
-        newJob: '新建任务',
-        agent: 'Agent',
-        prompt: '内容',
-        status: '状态',
-        created: '创建',
-        completed: '完成',
-        actions: '操作',
-        view: '查看',
-        run: '运行',
-        cancel: '取消',
-        details: '详情',
-        result: '结果',
-        error: '错误',
-        close: '关闭',
-        empty: '暂无任务。可在 IM 内 /job create 或点"新建任务"。',
-        emptySchedules: '暂无定时任务。在 IM 内 /cron create 创建。',
-        scheduleName: '名称',
-        scheduleCron: 'Cron',
-        scheduleNext: '下次',
-        scheduleLast: '上次',
-        promptCreate: '输入任务内容',
-        agentCreate: 'Agent (默认 claude-code)',
-        bgRoot: '来源',
-        bgName: '名称',
-        bgStarted: '启动',
-        bgEnded: '结束',
-        bgPid: 'PID',
-        bgExit: '退出码',
-        bgRestart: '代次',
-        bgCommand: '命令',
-        bgWorkdir: '工作目录',
-        bgOutDir: '输出目录',
-        bgLogTail: '日志尾部（最后 200 行）',
-        bgEmpty: '该来源下暂无后台任务。可在终端 bgjob start 启动。',
-        subParent: '所属会话',
-        subAgent: 'Agent',
-        subPrompt: '内容',
-        subCreated: '创建',
-        subEmpty: '暂无子任务。在 IM 内 /job switch <id> 可派生。',
-        auditDays: '天数',
-        auditTime: '时间',
-        auditUser: '用户',
-        auditPlatform: '平台',
-        auditIntent: '意图',
-        auditDuration: '耗时',
-        auditCost: '成本',
-        auditOk: '成功',
-        auditError: '错误',
-        auditEmpty: '当前过滤下暂无调用记录。',
-        // Files tab — read-only browser of ~/.im-hub-workspaces/<agent>/
-        tabsFiles: '工作区',
-        filesAgent: 'Agent',
-        filesPath: '路径',
-        filesEmpty: '空目录。',
-        filesNoAgent: '尚未注册任何 Agent。',
-        filesUp: '⬆ 上一级',
-        filesRoot: '(根)',
-        filesSize: '大小',
-        filesMtime: '修改时间',
-        filesBinary: '二进制文件 — 以 base64 显示。',
-        filesTruncated: '文件过大 — 仅显示前 1 MiB。',
-        filesNotFound: '未找到。',
-        filesLoad: '加载',
-        filesEdit: '编辑',
-        filesEditing: '编辑中…',
-        filesSave: '保存',
-        filesSaving: '保存中…',
-        filesCancel: '取消',
-        filesSaved: '已保存。',
-        filesSaveFailed: '保存失败',
-        // Jobs batch toolbar
-        jobsSelectAll: '全选',
-        jobsBatchCancel: '批量取消',
-        jobsBatchRun: '批量运行',
-        jobsBatchEmpty: '未选择任何任务。',
-        jobsBatchResult: '批量结果：成功 {ok}，失败 {fail}',
-        // v1.1.2 / v1.1.3 — 新 Tab 与列
-        tabsOutbox: '投递队列',
-        tabsA2A: 'A2A 调用',
-        kindCol: '类型',
-        parentCol: '父任务',
-        depthCol: '深度',
-        filterAllKinds: '全部类型',
-        filterKindJob: 'job（显式 /job 创建）',
-        filterKindInline: 'inline（自动跟踪）',
-        outboxEmpty: '投递队列为空。',
-        outboxStatusPending: '⏳ 待发',
-        outboxStatusDelivered: '✅ 已送达',
-        outboxStatusGivingUp: '💀 已放弃',
-        outboxRetry: '重试',
-        outboxColPlatform: '平台',
-        outboxColKind: '类型',
-        outboxColPri: '优先级',
-        outboxColAttempts: '尝试次数',
-        outboxColPayload: '消息内容',
-        outboxColError: '错误',
-        outboxColCreated: '创建时间',
-        a2aEmpty: '暂无 A2A 调用记录。',
-        a2aRecent: '最近 A2A 调用',
-        a2aCallerCallee: '调用方→被调方',
-        a2aTreeRoot: '调用链树（根 #{id}）',
-        a2aTreeInputJob: '输入 job id 看调用链…',
-        a2aBtnTree: '查看树',
-        a2aBtnViewParent: '查看父任务调用链',
-        a2aStatTotal: '总数',
-        a2aStat24h: '24小时',
-        a2aStatMaxDepth: '最大深度',
-        a2aStatTop: '热门:',
-        modalParent: '父任务',
-        modalDepth: '深度',
-        modalThread: '会话',
-        modalReplaced: '替换为',
-        modalLastOutbox: '最近投递',
-        modalArtifacts: '文件附件',
-        modalArtifactsInputs: '输入:',
-        modalArtifactsOutputs: '输出:',
-        modalDelivered: '送达时间',
-        helpClose: '关闭',
-        help: {
-          outbox: {
-            title: 'Outbox · 投递队列',
-            body: '每条要发到 IM 的消息都先写入 SQLite 投递队列，后台 worker 按指数退避节奏拉走真发：失败时 1s→5s→30s→5min→30min→2h 重试，连续 6 次失败转为「已放弃」直到你手动点重试。这样 IM 抖动 / 短暂断网都不会丢消息。可在 IM 内用 /outbox status 查询。',
-          },
-          inline: {
-            title: 'Inline 任务 · 自动跟踪',
-            body: '每条进入 agim 触发 Agent 的 IM 消息，会自动建一条 inline job 跟踪完整生命周期（待执行 → 运行中 → 已完成 → 已送达）。agim 崩溃 / 重启时绝不丢任务。区别于 kind=job 行（来自显式 /job create）。inline 保留 24 小时，job 保留 30 天。',
-          },
-          a2a: {
-            title: 'A2A · Agent 互调',
-            body: '当前 Agent 可以通过 mcp__imhub__call_agent 工具调用另一个 Agent（比如 claude 说"用 codex 跑 git status"）。agim 会为被调 Agent 建一条新 inline job，parent_id 指向调用方。护栏由 agim 强制：调用深度上限（默认 3）、禁止自调、工作区白名单、按人共享预算。调用树视图展示完整调用链。',
-          },
-          artifacts: {
-            title: 'Artifacts · 共享文件',
-            body: 'A2A Layer 2 让 Agent 之间传文件而非把内容塞进 prompt。每条 A2A 任务有独立工作目录 ~/.agim/artifacts/<jobId>/_agim-{input,output}/。调用方通过 inputs[] 放文件，被调方写到 _agim-output/，调用方在这里点击下载或用 Read 工具读。保留期跟 inline 任务一致（24 小时）。',
-          },
-          callDepth: {
-            title: '调用深度',
-            body: '该任务在 A2A 链中的层数。0 = 用户发起的消息，每多一层 mcp__imhub__call_agent 嵌套 +1。可由 IMHUB_A2A_MAX_DEPTH 配置最大值（默认 3），超过则在花费 token 前就拒绝调用。',
-          },
-          parent: {
-            title: '父任务',
-            body: 'A2A 被调方任务的 parent_id 指向触发此次调用的任务行。用户原发的任务为空。点击可打开父任务详情。',
-          },
-          replacedBy: {
-            title: '已被替换为',
-            body: '服务重启后被中断、用户回复"1 重发"重新发起的任务，其 replaced_by 字段指向新行 id。旧行保留用于审计。',
-          },
-          givingUp: {
-            title: '已放弃',
-            body: '投递队列中连续 6 次失败（累计退避约 3 小时）的行进入此状态，不再自动重试。点击"重试"会将其重新入队、退避计数清零。',
-          },
-        },
-        // ── v1.2 Cost & Health tab ──
-        tabsCost: '💰 成本与健康',
-        tabsMemory: '🧠 记忆',
-        tabsSkills: '🛠 技能',
-        skillsH2: '🛠 已安装的技能',
-        skillsIntro: '本机已安装的 claude / opencode skills 索引。点击行查看完整描述。要安装新 skill 请在 IM 里发 <code>/find-skills</code>，或浏览下方 skillhub.cn 热门榜。',
-        skillsSearchPh: '搜索（名称 / 描述）',
-        skillsCatAll: '所有类别',
-        skillsRemoteH2: 'skillhub.cn 热门',
-        skillsRemoteOpen: '前往 skillhub.cn ↗',
-        skillsRemoteIntro: '实时拉取 skillhub.cn top 50 热门下载（5 分钟缓存）。点击任意条目查看描述 + 安装命令。agim 不会自动跑安装——命令复制后由你贴去 shell 或 IM 触发。',
-        skillsRemoteCached: '缓存命中',
-        skillsRemoteStale: '上游不可达，用旧数据',
-        skillsCol: 'slug',
-        skillsName: '名称 / 描述',
-        skillsStars: '⭐ stars',
-        skillsInstalls: '⬇ installs',
-        skillsHowInstall: '安装方式（任选一个；agim 不会自动跑）',
-        skillsHostHint: '前两条要先在 host 上跑 skillhub install.sh。详见 docs/skills.md 或 skillhub.cn。',
-        costH2: '💰 成本与健康',
-        costWindow: '窗口',
-        costDays1: '1 天',
-        costDays7: '7 天',
-        costDays30: '30 天',
-        costDays90: '90 天',
-        costRefresh: '刷新',
-        costDailyTrend: '每日趋势',
-        costMetricCalls: '调用数',
-        costMetricCost: '成本($)',
-        costMetricErrors: '错误数',
-        costMetricLatency: '平均耗时(ms)',
-        costTopUser: '用户排行',
-        costTopAgent: 'Agent 排行',
-        costTopPlatform: '平台排行',
-        // ── v1.5/1.6 Memory tab ──
-        memoryH2: '🧠 长期记忆管理',
-        memoryIntro: 'agent 自动从对话中提取的事实 + 记忆画像（persona summary）。选用户 → 查看 / 编辑 / 删除。全部数据存在本机 ~/.agim/memory.db，不会上传到任何外部服务。',
-        memoryUser: '用户',
-        memoryUserLoading: '— 加载中 —',
-        memoryReloadUsers: '🔄 重载用户列表',
-        memoryExportUser: '📦 导出此用户 JSON',
-        memoryPersonaCard: '记忆画像',
-        memoryPersonaPlaceholder: '（此用户暂无记忆画像 — 等下次 consolidation 自动生成，或手动写入）',
-        memoryPersonaSave: '保存记忆画像',
-        memoryPersonaDelete: '删除记忆画像',
-        memoryPersonaConsolidate: '🔁 立刻重建画像',
-        memoryFactsCard: 'Facts',
-        memoryFactsSearch: '搜索（FTS5）',
-        memoryFactsCatAll: '所有类型',
-        memoryFactsQuery: '查询',
-        memoryFactsSelectUser: '（请选择用户）',
-        memoryFactsPrev: '← 上一页',
-        memoryFactsNext: '下一页 →',
-        memoryFactsClearLowConf: '🗑 清低置信度',
-        memoryFactsClearAll: '⚠️ 清空所有',
-        // ── v1.6 Vector card ──
-        vecTitle: '🔍 向量召回',
-        vecSubtitle: '（可选增强 · 默认关闭）',
-        vecWhyHeading: '为什么加向量？',
-        vecWhyDefault: '默认（FTS5 关键词）：只能命中字面 — 「腾讯」→ 含「腾讯」字样的事实。',
-        vecWhyAdded: '加向量后：召回同义 / 跨语言 / 概念性查询：',
-        vecWhyEx1: '▸ 「投资偏好」→ 召回「用户偏好低回撤、稳健」',
-        vecWhyEx2: '▸ 「Beijing」→ 召回「用户在北京工作」',
-        vecWhyEx3: '▸ 「我儿子生日」→ 召回「Tom 2018-03-15 出生」',
-        vecWhenHeading: '何时启用',
-        vecWhenBody: '积累 50+ 条事实、agent 经常"忘了用户说过 X"。初装不需要 — FTS5 已经够用。',
-        vecBackend: '后端',
-        vecBackendOff: '关闭（仅 FTS5）',
-        vecBackendLocal: '本地 BGE（一次性下载 ~250MB）',
-        vecBackendOpenai: '远程 OpenAI 兼容（baseUrl + key）',
-        vecLocalModel: '本地模型',
-        vecLocalSmall: '小（small，~100MB，速度优先）',
-        vecLocalBase: '中（base，~250MB，推荐）',
-        vecLocalLarge: '大（large，~500MB，精度优先）',
-        vecLocalCustom: '自定义…',
-        vecLocalHint: '三个预设都是 BGE 中文模型（智源研究院开源，HuggingFace 上 Xenova 提供 ONNX 量化版）。首次下载到 ~/.agim/cache/transformers',
-        vecDownloadBtn: '📥 下载模型（首次 5-10 min，建议 WiFi）',
-        vecOpenaiKey: 'API Key',
-        vecOpenaiReveal: '🔓 显示并编辑',
-        vecOpenaiKeyHint: '默认掩码显示；保存时如未点开「显示」，原值不会被覆盖。',
-        vecTestBtn: '🧪 测试连接（10s 超时）',
-        vecSaveBtn: '保存配置',
-        vecBackfillBtn: '🔄 回填全部',
-        vecClearBtn: '🗑 清空向量索引',
-        vecMemoryDisabled: '○ 记忆未启用（在 Settings → 自动化记忆开启）',
-      },
-    };
-    window.__t = T[window.__lang];
-    })();
-  </script>
-  <style>
-    /* Three-state theming. `:root` is the light default; explicit
-       data-theme="light"|"dark" forces a mode regardless of OS pref;
-       `prefers-color-scheme: dark` only applies when the attribute is
-       absent (i.e. mode === 'system' in _app.js). */
-    :root {
-      color-scheme: light dark;
-      --bg: #fafafa;
-      --fg: #222;
-      --muted: #666;
-      --border: #ddd;
-      --primary: #0066cc;
-      --success: #28a745;
-      --warning: #ffc107;
-      --danger: #dc3545;
-      --info: #17a2b8;
-      --card: #fff;
-    }
-    :root[data-theme="dark"] {
-      --bg: #0e0e10;
-      --fg: #e6e6e6;
-      --muted: #888;
-      --border: #2a2a2e;
-      --card: #1a1a1d;
-    }
-    @media (prefers-color-scheme: dark) {
-      :root:not([data-theme]) {
-        --bg: #0e0e10;
-        --fg: #e6e6e6;
-        --muted: #888;
-        --border: #2a2a2e;
-        --card: #1a1a1d;
-      }
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: var(--bg);
-      color: var(--fg);
-      font-size: 14px;
-    }
-    header {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 14px 24px;
-      border-bottom: 1px solid var(--border);
-      background: var(--card);
-    }
-    header h1 { margin: 0; font-size: 18px; flex: 1; }
-    header a, header button {
-      color: var(--primary);
-      text-decoration: none;
-      font-size: 14px;
-      background: none;
-      border: 1px solid var(--border);
-      padding: 6px 12px;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-    header a:hover, header button:hover { border-color: var(--primary); }
-    main { padding: 20px 24px; max-width: 1200px; margin: 0 auto; }
-    .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
-    .tab {
-      padding: 8px 16px;
-      cursor: pointer;
-      border: none;
-      background: none;
-      color: var(--muted);
-      font-size: 14px;
-      border-bottom: 2px solid transparent;
-    }
-    .tab.active { color: var(--fg); border-bottom-color: var(--primary); }
-    .stats {
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
-      gap: 12px;
-      margin-bottom: 16px;
-    }
-    .stat {
-      background: var(--card);
-      padding: 12px 16px;
-      border-radius: 6px;
-      border: 1px solid var(--border);
-    }
-    .stat-label { color: var(--muted); font-size: 12px; }
-    .stat-val { font-size: 22px; font-weight: 600; margin-top: 4px; }
-    .toolbar {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      margin-bottom: 12px;
-      flex-wrap: wrap;
-    }
-    .toolbar select, .toolbar button, .toolbar label {
-      font-size: 13px;
-      padding: 5px 10px;
-      border: 1px solid var(--border);
-      background: var(--card);
-      color: var(--fg);
-      border-radius: 4px;
-    }
-    .toolbar button { cursor: pointer; }
-    .toolbar button.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
-    .toolbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      background: var(--card);
-      border-radius: 6px;
-      overflow: hidden;
-      border: 1px solid var(--border);
-    }
-    th, td {
-      text-align: left;
-      padding: 10px 12px;
-      font-size: 13px;
-      border-bottom: 1px solid var(--border);
-    }
-    th {
-      background: var(--bg);
-      color: var(--muted);
-      font-weight: 500;
-      font-size: 12px;
-      text-transform: uppercase;
-    }
-    tbody tr:last-child td { border-bottom: none; }
-    .pill {
-      display: inline-block;
-      padding: 2px 8px;
-      border-radius: 999px;
-      font-size: 11px;
-      font-weight: 500;
-    }
-    .pill.pending { background: rgba(255, 193, 7, 0.18); color: #b89000; }
-    .pill.running { background: rgba(23, 162, 184, 0.18); color: #0d8898; }
-    .pill.completed { background: rgba(40, 167, 69, 0.18); color: #1e7c34; }
-    .pill.delivered { background: rgba(40, 167, 69, 0.28); color: #155724; font-weight: 500; }
-    .pill.failed { background: rgba(220, 53, 69, 0.18); color: #b32433; }
-    .pill.cancelled { background: rgba(108, 117, 125, 0.18); color: #5a6268; }
-    .pill.interrupted { background: rgba(255, 152, 0, 0.22); color: #b35900; }
-    .pill.replaced { background: rgba(94, 53, 177, 0.18); color: #4527a0; }
-    .pill.abandoned { background: rgba(96, 125, 139, 0.18); color: #455a64; }
-    .pill.kind-inline { background: rgba(63, 81, 181, 0.12); color: #3949ab; font-size: 11px; }
-    .pill.kind-job { background: rgba(141, 110, 99, 0.18); color: #5d4037; font-size: 11px; }
-    /* Mobile-friendly: wide tables (Jobs / Outbox / A2A / Audit) get a
-       horizontal scrollbar inside their pane instead of overflowing the
-       viewport. WeChat/Telegram in-app WebView is the common entry. */
-    #jobs-list, #outbox-list, #a2a-list, #audit-list, #subtasks-list, #bg-list, #schedules-list {
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-    #jobs-list table, #outbox-list table, #a2a-list table, #audit-list table {
-      min-width: 720px;  /* allow horizontal scroll instead of squishing cells */
-    }
-    /* Tab bar should also scroll horizontally on narrow screens rather
-       than wrapping (10 tabs don't fit on a phone otherwise). */
-    .tabs {
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-      white-space: nowrap;
-      flex-wrap: nowrap;
-    }
-    .tabs .tab { flex-shrink: 0; }
-    /* Help-tooltip button — small (?) next to jargon, opens centered modal */
-    .help-btn {
-      display: inline-flex; align-items: center; justify-content: center;
-      width: 18px; height: 18px; padding: 0; border-radius: 50%;
-      font-size: 11px; font-weight: 700; line-height: 1;
-      background: var(--surface-2, rgba(0,0,0,0.06)); color: var(--text-muted, #666);
-      border: 1px solid var(--border, rgba(0,0,0,0.12));
-      cursor: pointer; transition: all .15s;
-    }
-    .help-btn:hover { background: var(--primary, #3b82f6); color: #fff; border-color: var(--primary, #3b82f6); }
-    .help-modal h2 { margin: 0 0 .5em; font-size: 18px; }
-    .help-modal p { line-height: 1.7; color: var(--text, #333); white-space: pre-wrap; }
-    .row-actions button {
-      font-size: 12px;
-      padding: 3px 8px;
-      margin-right: 4px;
-      cursor: pointer;
-      border: 1px solid var(--border);
-      background: var(--card);
-      color: var(--fg);
-      border-radius: 4px;
-    }
-    .row-actions button:hover { border-color: var(--primary); color: var(--primary); }
-    .row-actions button.danger:hover { border-color: var(--danger); color: var(--danger); }
-    .empty { text-align: center; padding: 40px; color: var(--muted); }
-    .modal-bg {
-      position: fixed; inset: 0;
-      background: rgba(0,0,0,0.5);
-      display: none;
-      align-items: center;
-      justify-content: center;
-      z-index: 100;
-    }
-    .modal-bg.show { display: flex; }
-    .modal {
-      background: var(--card);
-      border-radius: 8px;
-      padding: 20px;
-      max-width: 720px;
-      width: 90%;
-      max-height: 80vh;
-      overflow-y: auto;
-    }
-    .modal h2 { margin-top: 0; }
-    .modal pre {
-      background: var(--bg);
-      padding: 12px;
-      border-radius: 6px;
-      overflow-x: auto;
-      max-height: 400px;
-      white-space: pre-wrap;
-      font-size: 12px;
-    }
-    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
-    .modal input, .modal textarea, .modal select {
-      width: 100%;
-      padding: 8px;
-      margin: 4px 0 12px;
-      background: var(--bg);
-      color: var(--fg);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      font: inherit;
-    }
-    .modal textarea { min-height: 100px; resize: vertical; }
-    code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; }
-    .truncate { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    /* PR-B: Health tab — per-agent operational card */
-    .health-card {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 14px 16px;
-      margin-bottom: 12px;
-    }
-    .health-head {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 12px;
-    }
-    .health-agent { font-size: 14px; font-weight: 600; }
-    .health-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-      gap: 12px 20px;
-    }
-    .health-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
-    .health-val { font-size: 13px; margin-top: 3px; font-variant-numeric: tabular-nums; }
-    .health-spark { margin-top: 3px; }
-    /* PR-B: Approvals tab — global pending list */
-    .approval-item {
-      background: var(--card);
-      border: 1px solid var(--border);
-      border-left: 3px solid var(--primary);
-      border-radius: 6px;
-      padding: 12px 14px;
-      margin-bottom: 10px;
-    }
-    .approval-head {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-bottom: 8px;
-    }
-    .approval-head code { font-size: 13px; font-weight: 600; }
-    .approval-meta {
-      margin-left: auto;
-      font-size: 12px;
-      color: var(--muted);
-    }
-    .approval-input {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 8px 10px;
-      font: 12px/1.5 'SF Mono', Menlo, Consolas, monospace;
-      max-height: 180px;
-      overflow: auto;
-      margin: 6px 0 10px;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-    .approval-actions { display: flex; gap: 8px; }
-    .approval-actions button {
-      border: 1px solid var(--border);
-      background: var(--card);
-      color: var(--fg);
-      padding: 5px 14px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 13px;
-    }
-    .approval-actions button:hover { border-color: var(--primary); }
-    .approval-actions button:disabled { opacity: 0.5; cursor: not-allowed; }
-    .approval-actions .btn-allow { background: var(--success); border-color: var(--success); color: #fff; }
-    .approval-actions .btn-deny { background: var(--danger); border-color: var(--danger); color: #fff; }
-  </style>
-</head>
-<body>
-  <header>
-    <h1 id="page-title"></h1>
-    <button id="theme-toggle" type="button" aria-label="Toggle color theme"></button>
-    <select id="langSelect" title="Language / 语言">
-      <option value="en">EN</option>
-      <option value="zh">中文</option>
-    </select>
-    <a href="/" id="lnk-chat"></a>
-    <a href="/reminders" id="lnk-reminders"></a>
-    <a href="/memos" id="lnk-memos"></a>
-    <a href="/settings" id="lnk-settings"></a>
-  </header>
-  <main>
-    <div class="tabs">
-      <button type="button" class="tab active" data-tab="jobs" id="tab-jobs"></button>
-      <button type="button" class="tab" data-tab="background" id="tab-background"></button>
-      <button type="button" class="tab" data-tab="subtasks" id="tab-subtasks"></button>
-      <button type="button" class="tab" data-tab="schedules" id="tab-schedules"></button>
-      <button type="button" class="tab" data-tab="approvals" id="tab-approvals"></button>
-      <button type="button" class="tab" data-tab="health" id="tab-health"></button>
-      <button type="button" class="tab" data-tab="files" id="tab-files"></button>
-      <button type="button" class="tab" data-tab="audit" id="tab-audit"></button>
-      <button type="button" class="tab" data-tab="outbox" id="tab-outbox">Outbox</button>
-      <button type="button" class="tab" data-tab="a2a" id="tab-a2a">A2A</button>
-      <button type="button" class="tab" data-tab="cost" id="tab-cost">💰 Cost &amp; Health</button>
-      <button type="button" class="tab" data-tab="memory" id="tab-memory">🧠 Memory</button>
-      <button type="button" class="tab" data-tab="skills" id="tab-skills">🛠 Skills</button>
-    </div>
-    <section id="jobs-pane">
-      <div class="stats" id="stats"></div>
-      <div class="toolbar">
-        <select id="filter-status">
-          <option value=""></option>
-          <option value="pending"></option>
-          <option value="running"></option>
-          <option value="completed"></option>
-          <option value="failed"></option>
-          <option value="cancelled"></option>
-          <option value="delivered">delivered</option>
-          <option value="interrupted">interrupted</option>
-          <option value="replaced">replaced</option>
-          <option value="abandoned">abandoned</option>
-        </select>
-        <select id="filter-kind" title="kind filter" data-i18n-attr="title:kindCol">
-          <option value="" data-i18n="filterAllKinds">All kinds</option>
-          <option value="job" data-i18n="filterKindJob">job (explicit /job)</option>
-          <option value="inline" data-i18n="filterKindInline">inline (auto-tracked)</option>
-        </select>
-        <select id="jobs-agent-filter" data-agent-filter>
-          <option value="">All agents</option>
-          <option value="claude-code">claude-code</option>
-          <option value="opencode">opencode</option>
-          <option value="codex">codex</option>
-        </select>
-        <button type="button" id="btn-refresh"></button>
-        <label><input type="checkbox" id="auto-refresh" checked> <span id="lbl-auto"></span></label>
-        <button type="button" id="btn-new" class="primary"></button>
-      </div>
-      <div class="toolbar" id="batch-toolbar" style="display:none">
-        <span id="batch-summary" style="color:var(--muted);font-size:13px"></span>
-        <button type="button" id="btn-batch-run"></button>
-        <button type="button" id="btn-batch-cancel" class="danger"></button>
-      </div>
-      <div id="jobs-list"></div>
-    </section>
-    <section id="background-pane" hidden>
-      <div class="toolbar">
-        <select id="bg-root-filter"></select>
-        <button type="button" id="btn-bg-refresh"></button>
-        <label><input type="checkbox" id="bg-auto-refresh" checked> <span id="lbl-bg-auto"></span></label>
-      </div>
-      <div id="bg-list"></div>
-    </section>
-    <section id="subtasks-pane" hidden>
-      <div class="toolbar">
-        <select id="subtasks-agent-filter" data-agent-filter>
-          <option value="">All agents</option>
-          <option value="claude-code">claude-code</option>
-          <option value="opencode">opencode</option>
-          <option value="codex">codex</option>
-        </select>
-        <button type="button" id="btn-sub-refresh"></button>
-      </div>
-      <div id="sub-list"></div>
-    </section>
-    <section id="schedules-pane" hidden>
-      <div class="toolbar">
-        <select id="schedules-agent-filter" data-agent-filter>
-          <option value="">All agents</option>
-          <option value="claude-code">claude-code</option>
-          <option value="opencode">opencode</option>
-          <option value="codex">codex</option>
-        </select>
-        <button type="button" id="btn-sched-refresh">Refresh</button>
-      </div>
-      <div id="schedules-list"></div>
-    </section>
-    <section id="approvals-pane" hidden>
-      <div class="toolbar">
-        <button type="button" id="btn-approvals-refresh">Refresh</button>
-        <label><input type="checkbox" id="approvals-auto-refresh" checked> <span id="lbl-approvals-auto"></span></label>
-        <span id="approvals-summary" style="margin-left:auto;color:var(--muted);font-size:13px"></span>
-      </div>
-      <div id="approvals-list"></div>
-    </section>
-    <section id="health-pane" hidden>
-      <div class="toolbar">
-        <button type="button" id="btn-health-refresh">Refresh</button>
-        <label><input type="checkbox" id="health-auto-refresh" checked> <span id="lbl-health-auto"></span></label>
-        <span id="health-uptime" style="margin-left:auto;color:var(--muted);font-size:13px"></span>
-      </div>
-      <div id="health-list"></div>
-    </section>
-    <section id="files-pane" hidden>
-      <div class="toolbar">
-        <label><span id="lbl-files-agent"></span>
-          <select id="files-agent" data-agent-filter></select>
-        </label>
-        <button type="button" id="btn-files-up"></button>
-        <code id="files-current" style="color:var(--muted);font-size:13px"></code>
-        <button type="button" id="btn-files-refresh" style="margin-left:auto"></button>
-      </div>
-      <div class="files-layout" style="display:flex;gap:12px;align-items:flex-start">
-        <div id="files-tree" style="flex:0 0 320px;max-height:60vh;overflow:auto"></div>
-        <div id="files-content" style="flex:1 1 auto;min-width:0"></div>
-      </div>
-    </section>
-    <section id="audit-pane" hidden>
-      <div class="toolbar">
-        <select id="audit-agent-filter" data-agent-filter>
-          <option value="">All agents</option>
-          <option value="claude-code">claude-code</option>
-          <option value="opencode">opencode</option>
-          <option value="codex">codex</option>
-        </select>
-        <select id="audit-days-filter">
-          <option value="1">1d</option>
-          <option value="7" selected>7d</option>
-          <option value="30">30d</option>
-          <option value="90">90d</option>
-        </select>
-        <input type="text" id="audit-user-filter" placeholder="user id (optional)" style="min-width:160px">
-        <button type="button" id="btn-audit-refresh">Refresh</button>
-      </div>
-      <div class="stats" id="audit-stats"></div>
-      <div id="audit-list"></div>
-    </section>
-    <!-- Outbox tab (v1.1.2) — persistent IM delivery queue -->
-    <section id="outbox-pane" hidden>
-      <h2 style="margin-top:0;display:flex;align-items:center;gap:.5em">
-        <span id="hdr-outbox">Outbox</span>
-        <button type="button" class="help-btn" data-help="outbox" title="?">?</button>
-      </h2>
-      <div class="toolbar">
-        <select id="outbox-status-filter">
-          <option value="" data-i18n="filterAll">All</option>
-          <option value="pending" data-i18n="outboxStatusPending">⏳ Pending</option>
-          <option value="delivered" data-i18n="outboxStatusDelivered">✅ Delivered</option>
-          <option value="giving_up" data-i18n="outboxStatusGivingUp">💀 Giving up</option>
-        </select>
-        <select id="outbox-limit">
-          <option value="20">20</option>
-          <option value="50" selected>50</option>
-          <option value="200">200</option>
-        </select>
-        <button type="button" id="btn-outbox-refresh" data-i18n="refresh">Refresh</button>
-      </div>
-      <div class="stats" id="outbox-stats"></div>
-      <div id="outbox-list"></div>
-    </section>
-    <!-- A2A tab (v1.1.3) — agent-to-agent call observability + artifacts viewer -->
-    <section id="a2a-pane" hidden>
-      <h2 style="margin-top:0;display:flex;align-items:center;gap:.5em">
-        <span id="hdr-a2a">A2A</span>
-        <button type="button" class="help-btn" data-help="a2a" title="?">?</button>
-        <button type="button" class="help-btn" data-help="artifacts" title="?" style="margin-left:-4px" id="hdr-a2a-art-help">📎?</button>
-      </h2>
-      <div class="toolbar">
-        <input type="number" id="a2a-tree-id" min="1" style="width:160px" data-i18n-attr="placeholder:a2aTreeInputJob">
-        <button type="button" id="btn-a2a-tree" data-i18n="a2aBtnTree">Tree</button>
-        <button type="button" id="btn-a2a-refresh" data-i18n="refresh">Refresh</button>
-      </div>
-      <div class="stats" id="a2a-stats"></div>
-      <div id="a2a-list"></div>
-      <div id="a2a-tree"></div>
-    </section>
-    <!-- v1.3 — Cost & Health: aggregated metrics from the audit-log -->
-    <section id="cost-pane" hidden>
-      <h2 style="margin-top:0" data-i18n="costH2">💰 Cost &amp; Health</h2>
-      <div class="toolbar" style="margin-bottom:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap">
-        <label><span data-i18n="costWindow">窗口</span>：
-          <select id="cost-days">
-            <option value="1" data-i18n="costDays1">1 天</option>
-            <option value="7" selected data-i18n="costDays7">7 天</option>
-            <option value="30" data-i18n="costDays30">30 天</option>
-            <option value="90" data-i18n="costDays90">90 天</option>
-          </select>
-        </label>
-        <button type="button" id="btn-cost-refresh" data-i18n="costRefresh">刷新</button>
-        <span class="muted" id="cost-range" style="font-size:12px"></span>
-      </div>
-      <!-- KPI cards -->
-      <div id="cost-kpi" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px"></div>
-      <!-- Daily trendline -->
-      <div style="border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px;margin-bottom:16px">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-          <strong data-i18n="costDailyTrend">每日趋势</strong>
-          <div style="font-size:12px" class="muted">
-            <label><input type="radio" name="cost-trend-metric" value="calls" checked> <span data-i18n="costMetricCalls">调用数</span></label>
-            <label style="margin-left:8px"><input type="radio" name="cost-trend-metric" value="cost"> <span data-i18n="costMetricCost">成本($)</span></label>
-            <label style="margin-left:8px"><input type="radio" name="cost-trend-metric" value="errors"> <span data-i18n="costMetricErrors">错误数</span></label>
-            <label style="margin-left:8px"><input type="radio" name="cost-trend-metric" value="avgLatencyMs"> <span data-i18n="costMetricLatency">平均耗时(ms)</span></label>
-          </div>
-        </div>
-        <div style="position:relative;height:280px"><canvas id="cost-trend"></canvas></div>
-      </div>
-      <!-- Top-N tables -->
-      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px">
-        <div style="border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px">
-          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-            <strong data-i18n="costTopUser">Top by User</strong>
-            <select class="cost-topn-by" data-target="user">
-              <option value="cost">cost</option>
-              <option value="calls" selected>calls</option>
-              <option value="errors">errors</option>
-              <option value="avg_latency">avg latency</option>
-            </select>
-          </div>
-          <div id="cost-topn-user"></div>
-        </div>
-        <div style="border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px">
-          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-            <strong data-i18n="costTopAgent">Top by Agent</strong>
-            <select class="cost-topn-by" data-target="agent">
-              <option value="cost">cost</option>
-              <option value="calls" selected>calls</option>
-              <option value="errors">errors</option>
-              <option value="avg_latency">avg latency</option>
-            </select>
-          </div>
-          <div id="cost-topn-agent"></div>
-        </div>
-        <div style="border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px">
-          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-            <strong data-i18n="costTopPlatform">Top by Platform</strong>
-            <select class="cost-topn-by" data-target="platform">
-              <option value="cost">cost</option>
-              <option value="calls" selected>calls</option>
-              <option value="errors">errors</option>
-              <option value="avg_latency">avg latency</option>
-            </select>
-          </div>
-          <div id="cost-topn-platform"></div>
-        </div>
-      </div>
-    </section>
-    <!-- v1.5 — Memory admin tab: per-user persona + facts inspection / edit -->
-    <section id="memory-pane" hidden>
-      <h2 style="margin-top:0" data-i18n="memoryH2">🧠 长期记忆管理</h2>
-      <p class="muted" style="margin-top:-4px;margin-bottom:12px;font-size:13px" data-i18n="memoryIntro">
-        agent 自动从对话中提取的事实 + 记忆画像（persona summary）。选用户 → 查看 / 编辑 / 删除。
-        全部数据存在本机 ~/.agim/memory.db，不会上传到任何外部服务。
-      </p>
-      <div class="toolbar" style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px">
-        <label><span data-i18n="memoryUser">用户</span>：
-          <select id="mem-user-select" style="min-width:280px">
-            <option value="" data-i18n="memoryUserLoading">— 加载中 —</option>
-          </select>
-        </label>
-        <button type="button" id="btn-mem-refresh-users" data-i18n="memoryReloadUsers">🔄 重载用户列表</button>
-        <a id="btn-mem-export" href="#" target="_blank" style="display:none" data-i18n="memoryExportUser">📦 导出此用户 JSON</a>
-      </div>
-      <!-- v1.6 — Vector retrieval (optional enhancement) -->
-      <div style="border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px;margin-bottom:16px">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-          <strong><span data-i18n="vecTitle">🔍 向量召回</span> <span class="muted" style="font-weight:400;font-size:12px" data-i18n="vecSubtitle">（可选增强 · 默认关闭）</span></strong>
-          <span class="muted" id="mem-vec-status-badge" style="font-size:12px">—</span>
-        </div>
-        <div style="background:var(--code,#f4f6f8);padding:10px;border-radius:6px;font-size:12px;color:var(--muted,#656d76);margin-bottom:10px;line-height:1.6">
-          <strong style="color:var(--fg,#1f2328)" data-i18n="vecWhyHeading">为什么加向量？</strong><br>
-          <span data-i18n="vecWhyDefault">默认（FTS5 关键词）：只能命中字面 — 「腾讯」→ 含「腾讯」字样的事实。</span><br>
-          <span data-i18n="vecWhyAdded">加向量后：召回同义 / 跨语言 / 概念性查询：</span><br>
-          <span data-i18n="vecWhyEx1">▸ 「投资偏好」→ 召回「用户偏好低回撤、稳健」</span><br>
-          <span data-i18n="vecWhyEx2">▸ 「Beijing」→ 召回「用户在北京工作」</span><br>
-          <span data-i18n="vecWhyEx3">▸ 「我儿子生日」→ 召回「Tom 2018-03-15 出生」</span><br>
-          <strong style="color:var(--fg,#1f2328)" data-i18n="vecWhenHeading">何时启用</strong>：<span data-i18n="vecWhenBody">积累 50+ 条事实、agent 经常"忘了用户说过 X"。初装不需要 — FTS5 已经够用。</span>
-        </div>
-        <label data-i18n="vecBackend">后端</label>
-        <select id="mem-vec-backend" style="max-width:280px">
-          <option value="off" data-i18n="vecBackendOff">关闭（仅 FTS5）</option>
-          <option value="local" data-i18n="vecBackendLocal">本地 BGE（一次性下载 ~250MB）</option>
-          <option value="openai" data-i18n="vecBackendOpenai">远程 OpenAI 兼容（baseUrl + key）</option>
-        </select>
-        <!-- Local config (shown when backend === 'local') -->
-        <div id="mem-vec-local-cfg" style="display:none;margin-top:10px;padding:10px;border:1px dashed var(--border,#d0d7de);border-radius:6px">
-          <label data-i18n="vecLocalModel">本地模型</label>
-          <select id="mem-vec-local-preset" style="max-width:400px">
-            <option value="Xenova/bge-small-zh-v1.5" data-i18n="vecLocalSmall">小（small，~100MB，速度优先）</option>
-            <option value="Xenova/bge-base-zh-v1.5" selected data-i18n="vecLocalBase">中（base，~250MB，推荐）</option>
-            <option value="Xenova/bge-large-zh-v1.5" data-i18n="vecLocalLarge">大（large，~500MB，精度优先）</option>
-            <option value="__custom__" data-i18n="vecLocalCustom">自定义…</option>
-          </select>
-          <input type="text" id="mem-vec-local-model" placeholder="Xenova/your-model" style="max-width:400px;margin-top:6px;display:none" />
-          <div class="muted" style="font-size:11px;margin-top:4px" data-i18n="vecLocalHint">三个预设都是 BGE 中文模型（智源研究院开源，HuggingFace 上 Xenova 提供 ONNX 量化版）。首次下载到 ~/.agim/cache/transformers</div>
-          <div style="margin-top:8px">
-            <button type="button" id="btn-mem-vec-download" class="btn" data-i18n="vecDownloadBtn">📥 下载模型（首次 5-10 min，建议 WiFi）</button>
-            <span id="mem-vec-download-progress" class="muted" style="font-size:12px;margin-left:8px"></span>
-          </div>
-        </div>
-        <!-- OpenAI config (shown when backend === 'openai') -->
-        <div id="mem-vec-openai-cfg" style="display:none;margin-top:10px;padding:10px;border:1px dashed var(--border,#d0d7de);border-radius:6px">
-          <label>Base URL</label>
-          <input type="text" id="mem-vec-openai-url" placeholder="https://api.openai.com/v1" style="max-width:400px" />
-          <label style="margin-top:6px">Model</label>
-          <input type="text" id="mem-vec-openai-model" placeholder="text-embedding-3-small" style="max-width:400px" />
-          <label style="margin-top:6px" data-i18n="vecOpenaiKey">API Key</label>
-          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
-            <input type="password" id="mem-vec-openai-key" placeholder="sk-..." style="max-width:400px;background:#f6f8fa;color:#57606a" autocomplete="off" readonly />
-            <button type="button" id="btn-mem-vec-openai-reveal" class="btn" style="font-size:12px;padding:2px 8px" data-i18n="vecOpenaiReveal">🔓 显示并编辑</button>
-          </div>
-          <div class="muted" style="font-size:11px;margin-top:4px" data-i18n="vecOpenaiKeyHint">默认掩码显示；保存时如未点开「显示」，原值不会被覆盖。</div>
-          <div style="margin-top:8px">
-            <button type="button" id="btn-mem-vec-test" class="btn" data-i18n="vecTestBtn">🧪 测试连接（10s 超时）</button>
-            <span id="mem-vec-test-result" class="muted" style="font-size:12px;margin-left:8px"></span>
-          </div>
-        </div>
-        <div class="actions" style="margin-top:10px;display:flex;gap:8px;flex-wrap:wrap">
-          <button type="button" id="btn-mem-vec-save" class="btn btn-primary" data-i18n="vecSaveBtn">保存配置</button>
-          <button type="button" id="btn-mem-vec-backfill" class="btn" data-i18n="vecBackfillBtn">🔄 回填全部</button>
-          <button type="button" id="btn-mem-vec-clear" class="btn" data-i18n="vecClearBtn">🗑 清空向量索引</button>
-        </div>
-        <p class="muted" id="mem-vec-status-detail" style="margin-top:8px;font-size:12px"></p>
-      </div>
-      <!-- 记忆画像 display + editor -->
-      <div style="border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px;margin-bottom:16px">
-        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
-          <strong data-i18n="memoryPersonaCard">记忆画像</strong>
-          <span class="muted" id="mem-persona-meta" style="font-size:12px"></span>
-        </div>
-        <textarea id="mem-persona-text" rows="6" style="width:100%;font-family:ui-monospace,monospace;font-size:13px;box-sizing:border-box" data-i18n-attr="placeholder:memoryPersonaPlaceholder" placeholder="（此用户暂无记忆画像 — 等下次 consolidation 自动生成，或手动写入）"></textarea>
-        <div class="actions" style="margin-top:8px;display:flex;gap:8px;flex-wrap:wrap">
-          <button type="button" id="btn-mem-persona-save" class="btn btn-primary" data-i18n="memoryPersonaSave">保存记忆画像</button>
-          <button type="button" id="btn-mem-persona-delete" class="btn" data-i18n="memoryPersonaDelete">删除记忆画像</button>
-          <button type="button" id="btn-mem-persona-consolidate" class="btn" title="立刻跑一次 consolidation 重建画像，不等 24h 周期" data-i18n="memoryPersonaConsolidate">🔁 立刻重建画像</button>
-        </div>
-        <p class="muted" id="mem-persona-status" style="margin-top:6px;font-size:12px"></p>
-      </div>
-      <!-- Facts table + filters -->
-      <div style="border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px;margin-bottom:16px">
-        <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px">
-          <strong><span data-i18n="memoryFactsCard">Facts</span> <span id="mem-facts-total" class="muted" style="font-weight:400;font-size:12px"></span></strong>
-          <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
-            <input type="text" id="mem-facts-query" data-i18n-attr="placeholder:memoryFactsSearch" placeholder="搜索（FTS5）" style="width:200px;font-size:12px" />
-            <select id="mem-facts-category" style="font-size:12px">
-              <option value="" data-i18n="memoryFactsCatAll">所有类型</option>
-              <option value="fact">fact</option>
-              <option value="preference">preference</option>
-              <option value="goal">goal</option>
-              <option value="history">history</option>
-              <option value="profile">profile</option>
-            </select>
-            <button type="button" id="btn-mem-facts-refresh" style="font-size:12px" data-i18n="memoryFactsQuery">查询</button>
-          </div>
-        </div>
-        <div id="mem-facts-list" data-i18n="memoryFactsSelectUser">（请选择用户）</div>
-        <div style="display:flex;justify-content:space-between;margin-top:8px;font-size:12px;align-items:center">
-          <div class="muted">
-            <button type="button" id="btn-mem-facts-prev" data-i18n="memoryFactsPrev">← 上一页</button>
-            <span id="mem-facts-pagelabel">—</span>
-            <button type="button" id="btn-mem-facts-next" data-i18n="memoryFactsNext">下一页 →</button>
-          </div>
-          <div>
-            <button type="button" id="btn-mem-facts-clear-lowconf" class="btn" title="删除 confidence ≤ 0.4 的所有事实" data-i18n="memoryFactsClearLowConf">🗑 清低置信度</button>
-            <button type="button" id="btn-mem-facts-clear-all" class="btn" style="color:#cf222e" title="慎用：清空此用户的所有事实" data-i18n="memoryFactsClearAll">⚠️ 清空所有</button>
-          </div>
-        </div>
-        <p class="muted" id="mem-facts-status" style="margin-top:6px;font-size:12px"></p>
-      </div>
-    </section>
-    <!-- v1.2.3 — Skills browser: read-only inventory of installed claude /
-         opencode skills + a remote "hot on skillhub.cn" panel. -->
-    <section id="skills-pane" hidden>
-      <h2 style="margin-top:0" data-i18n="skillsH2">🛠 已安装的 Skills</h2>
-      <p class="muted" style="margin-top:-4px;margin-bottom:12px;font-size:13px" data-i18n="skillsIntro">
-        本机已安装的 claude / opencode skills 索引。点击行查看完整描述。
-        要安装新 skill 请在 IM 里发 <code>/find-skills</code>，或浏览下方 skillhub.cn 热门榜。
-      </p>
-      <div class="toolbar" style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px">
-        <input type="text" id="skills-search" placeholder="搜索（名称 / 描述）" data-i18n-attr="placeholder:skillsSearchPh" style="width:240px;font-size:13px" />
-        <select id="skills-cat-filter" style="font-size:13px;min-width:160px">
-          <option value="" data-i18n="skillsCatAll">所有类别</option>
-        </select>
-        <button type="button" id="btn-skills-refresh" data-i18n="refresh">刷新</button>
-        <span id="skills-stats" class="muted" style="font-size:12px;margin-left:8px"></span>
-      </div>
-      <div id="skills-list">…</div>
-      <!-- Remote: skillhub.cn hot showcase -->
-      <div style="margin-top:32px;border-top:1px solid var(--border,#d0d7de);padding-top:16px">
-        <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:6px">
-          <h2 style="margin:0">🔥 <span data-i18n="skillsRemoteH2">skillhub.cn 热门</span>
-            <span id="skills-remote-meta" class="muted" style="font-weight:400;font-size:12px"></span>
-          </h2>
-          <div>
-            <a href="https://skillhub.cn" target="_blank" rel="noopener" class="btn" data-i18n="skillsRemoteOpen">前往 skillhub.cn ↗</a>
-            <button type="button" id="btn-skills-remote-refresh" class="btn" data-i18n="refresh" style="margin-left:6px">刷新</button>
-          </div>
-        </div>
-        <p class="muted" style="font-size:12px;margin:0 0 12px" data-i18n="skillsRemoteIntro">
-          实时拉取 skillhub.cn top 50 热门下载（5 分钟缓存）。点击任意条目查看描述。
-          安装提示见弹窗末端 — 用 skillhub CLI 或在 IM 里告诉 agent 通过 skillhub 安装。
-        </p>
-        <div id="skills-remote-list"><p class="muted">…</p></div>
-      </div>
-    </section>
-  </main>
-  <div class="modal-bg" id="modal-bg">
-    <div class="modal" id="modal"></div>
-  </div>
-  <script>
-    const T = window.__t;
-    // Theme toggle (light / dark / system). _app.js applied the theme
-    // synchronously in <head>; here we wire the button so clicks cycle
-    // and the label re-renders.
-    if (window.imhub) imhub.theme.bindToggle(document.getElementById('theme-toggle'));
-    // i18n string fills
-    document.title = T.title;
-    document.getElementById('page-title').textContent = T.h1;
-    document.getElementById('lnk-chat').textContent = T.backToChat;
-    document.getElementById('lnk-reminders').textContent = T.toReminders;
-    document.getElementById('lnk-memos').textContent = T.toMemos;
-    document.getElementById('lnk-settings').textContent = T.toSettings;
-    document.getElementById('tab-jobs').textContent = T.tabsJobs;
-    document.getElementById('tab-background').textContent = T.tabsBackground;
-    document.getElementById('tab-subtasks').textContent = T.tabsSubtasks;
-    document.getElementById('tab-schedules').textContent = T.tabsSchedules;
-    document.getElementById('tab-audit').textContent = T.tabsAudit;
-    document.getElementById('tab-approvals').textContent = T.tabsApprovals;
-    document.getElementById('tab-health').textContent = T.tabsHealth;
-    document.getElementById('tab-files').textContent = T.tabsFiles;
-    document.getElementById('tab-outbox').textContent = T.tabsOutbox;
-    document.getElementById('tab-a2a').textContent = T.tabsA2A;
-    if (T.tabsCost) document.getElementById('tab-cost').textContent = T.tabsCost;
-    if (T.tabsMemory) document.getElementById('tab-memory').textContent = T.tabsMemory;
-    if (T.tabsSkills) document.getElementById('tab-skills').textContent = T.tabsSkills;
-    document.getElementById('hdr-outbox').textContent = T.tabsOutbox;
-    document.getElementById('hdr-a2a').textContent = T.tabsA2A;
-    // data-i18n / data-i18n-attr — sweep static markers so placeholders +
-    // option labels pick up the active language. Same shape as _app.js's
-    // applyI18n but inline here (tasks.html runs before _app.js applies
-    // its sweep to the rest of the doc).
-    (function applyStaticI18n() {
-      document.querySelectorAll('[data-i18n]').forEach((el) => {
-        const k = el.getAttribute('data-i18n');
-        if (k && T[k] != null) el.textContent = T[k];
-      });
-      document.querySelectorAll('[data-i18n-attr]').forEach((el) => {
-        const spec = el.getAttribute('data-i18n-attr') || '';
-        for (const pair of spec.split(';')) {
-          const [attr, key] = pair.split(':').map(s => s && s.trim());
-          if (attr && key && T[key] != null) el.setAttribute(attr, T[key]);
-        }
-      });
-    })();
-    // Help-tooltip system — every (?) button opens a centered modal whose
-    // body comes from T.help[<key>]. Reuses the existing modal-bg overlay
-    // so a single Escape press dismisses everything.
-    document.addEventListener('click', (ev) => {
-      const btn = ev.target.closest && ev.target.closest('.help-btn');
-      if (!btn) return;
-      ev.preventDefault();
-      const key = btn.getAttribute('data-help');
-      const def = (T.help && T.help[key]) || null;
-      if (!def) { console.warn('no help def for', key); return; }
-      const m = document.getElementById('modal');
-      m.classList.add('help-modal');
-      m.innerHTML = `
-        <h2>${def.title}</h2>
-        <p>${def.body}</p>
-        <div class="modal-actions">
-          <button type="button" id="help-modal-close">${T.helpClose}</button>
-        </div>
-      `;
-      document.getElementById('modal-bg').classList.add('show');
-      document.getElementById('help-modal-close').onclick = () => {
-        document.getElementById('modal-bg').classList.remove('show');
-        m.classList.remove('help-modal');
-      };
-    });
-    // Language switcher: persist + reload so the IIFE in <head> reads the
-    // new preference and rebuilds T.
-    (function setupLangSwitcher() {
-      const sel = document.getElementById('langSelect');
-      if (!sel) return;
-      sel.value = window.__lang;
-      sel.addEventListener('change', () => {
-        const newLang = sel.value;
-        if (newLang === window.__lang) return;
-        localStorage.setItem('im-hub-lang', newLang);
-        window.location.reload();
-      });
-    })();
-    document.getElementById('btn-bg-refresh').textContent = T.refresh;
-    document.getElementById('btn-sub-refresh').textContent = T.refresh;
-    document.getElementById('btn-approvals-refresh').textContent = T.refresh;
-    document.getElementById('btn-health-refresh').textContent = T.refresh;
-    document.getElementById('lbl-bg-auto').textContent = T.autoRefresh;
-    document.getElementById('lbl-approvals-auto').textContent = T.autoRefresh;
-    document.getElementById('lbl-health-auto').textContent = T.autoRefresh;
-    document.getElementById('btn-refresh').textContent = T.refresh;
-    document.getElementById('btn-new').textContent = T.newJob;
-    document.getElementById('lbl-auto').textContent = T.autoRefresh;
-    document.getElementById('lbl-files-agent').textContent = T.filesAgent;
-    document.getElementById('btn-files-up').textContent = T.filesUp;
-    document.getElementById('btn-files-refresh').textContent = T.refresh;
-    document.getElementById('btn-batch-run').textContent = T.jobsBatchRun;
-    document.getElementById('btn-batch-cancel').textContent = T.jobsBatchCancel;
-    {
-      const fs = document.getElementById('filter-status');
-      fs.options[0].textContent = T.filterAll;
-      fs.options[1].textContent = T.filterPending;
-      fs.options[2].textContent = T.filterRunning;
-      fs.options[3].textContent = T.filterCompleted;
-      fs.options[4].textContent = T.filterFailed;
-      fs.options[5].textContent = T.filterCancelled;
-    }
-    // Tab switching
-    document.querySelectorAll('.tab').forEach(t => {
-      t.onclick = () => {
-        document.querySelectorAll('.tab').forEach(x => { x.classList.toggle('active', x === t); });
-        const tab = t.dataset.tab;
-        document.getElementById('jobs-pane').hidden = tab !== 'jobs';
-        document.getElementById('background-pane').hidden = tab !== 'background';
-        document.getElementById('subtasks-pane').hidden = tab !== 'subtasks';
-        document.getElementById('schedules-pane').hidden = tab !== 'schedules';
-        document.getElementById('audit-pane').hidden = tab !== 'audit';
-        document.getElementById('approvals-pane').hidden = tab !== 'approvals';
-        document.getElementById('health-pane').hidden = tab !== 'health';
-        document.getElementById('files-pane').hidden = tab !== 'files';
-        document.getElementById('outbox-pane').hidden = tab !== 'outbox';
-        document.getElementById('a2a-pane').hidden = tab !== 'a2a';
-        document.getElementById('cost-pane').hidden = tab !== 'cost';
-        document.getElementById('memory-pane').hidden = tab !== 'memory';
-        document.getElementById('skills-pane').hidden = tab !== 'skills';
-        // Lazy-load on first activation; auto-refresh hooks below kick in too.
-        if (tab === 'schedules') loadSchedules();
-        if (tab === 'background') { ensureBgRootsLoaded().then(loadBgjobs); }
-        if (tab === 'subtasks') loadSubtasks();
-        if (tab === 'audit') loadAudit();
-        if (tab === 'approvals') loadApprovals();
-        if (tab === 'health') loadHealth();
-        if (tab === 'files') ensureFilesAgentLoaded().then(() => loadFiles(filesPath));
-        if (tab === 'outbox') loadOutbox();
-        if (tab === 'a2a') loadA2A();
-        if (tab === 'cost') loadCost();
-        if (tab === 'memory') {
-          loadMemoryUsers();
-          // P1-9: only load vector card + poll status when memory is
-          // actually enabled. Otherwise the dashboard would burn requests
-          // and confuse users on a stock install where memory is off.
-          checkMemoryEnabledThen(() => { loadMemVecConfig(); loadMemVecStatus(); });
-        }
-        if (tab !== 'memory') stopMemVecPolling();
-        if (tab === 'skills') loadSkills();
-        // Pause/resume auto-refresh so hidden tabs don't poll.
-        setupBgAutoRefresh();
-        setupApprovalsAutoRefresh();
-        setupHealthAutoRefresh();
-      };
-    });
-    // API helper
-    async function api(path, init) {
-      const headers = { 'Content-Type': 'application/json', ...(init?.headers) };
-      const res = await fetch(path, { ...init, headers, credentials: 'same-origin' });
-      if (!res.ok) {
-        // v1.5 — attach status + try to surface server-provided error so
-        // callers can branch on `err.status === 404` etc. Falls back to a
-        // plain statusText when the body isn't JSON.
-        let msg = `${res.status} ${res.statusText}`;
-        try {
-          const j = await res.json();
-          if (j && j.error) msg = `${res.status} ${j.error}`;
-        } catch { /* not JSON; keep statusText */ }
-        const err = new Error(msg);
-        err.status = res.status;
-        throw err;
-      }
-      return res.json();
-    }
-    function fmtTime(s) {
-      if (!s) return '-';
-      // SQLite datetime('now') produces "2026-05-15 14:02:50" — space-separated
-      // and no zone. Safari + iOS WebView refuse that string (Invalid Date);
-      // Chrome happens to parse it. Normalize to RFC3339 by swapping space for
-      // T and forcing UTC. Also accept already-ISO strings unchanged.
-      let iso = String(s).trim();
-      if (iso && !iso.includes('T')) iso = iso.replace(' ', 'T');
-      if (iso && !/[Z+]/.test(iso.slice(-6))) iso = iso + 'Z';
-      const d = new Date(iso);
-      if (Number.isNaN(d.getTime())) return s;  // fall back to raw if still bad
-      return d.toLocaleString();
-    }
-    function statusPill(status) {
-      return `<span class="pill ${esc(status)}">${T[`filter${status.charAt(0).toUpperCase()}${status.slice(1)}`] || esc(status)}</span>`;
-    }
-    function renderStats(stats) {
-      const el = document.getElementById('stats');
-      const fields = [
-        ['Total', stats.total],
-        ['Pending', stats.pending],
-        ['Running', stats.running],
-        ['Completed', stats.completed],
-        ['Failed', stats.failed],
-      ];
-      el.innerHTML = fields.map(([k, v]) =>
-        `<div class="stat"><div class="stat-label">${T[`stats${k}`]}</div><div class="stat-val">${v}</div></div>`
-      ).join('');
-    }
-    // Selection state for batch ops. Lives outside renderJobs so a refresh
-    // after a successful batch run/cancel can reconcile against still-visible
-    // rows without forgetting the user's prior selection.
-    const jobSelection = new Set();
-    function renderJobs(jobs) {
-      const el = document.getElementById('jobs-list');
-      if (!jobs.length) {
-        el.innerHTML = `<div class="empty">${T.empty}</div>`;
-        updateBatchToolbar();
-        return;
-      }
-      // Drop ids that disappeared since last render so the toolbar count
-      // stays accurate even after the server sweeps completed jobs.
-      const visible = new Set(jobs.map(j => j.id));
-      for (const id of Array.from(jobSelection)) {
-        if (!visible.has(id)) jobSelection.delete(id);
-      }
-      const allSelected = jobs.length > 0 && jobs.every(j => jobSelection.has(j.id));
-      el.innerHTML = `
-        <table>
-          <thead>
-            <tr>
-              <th><input type="checkbox" id="job-select-all" ${allSelected ? 'checked' : ''} title="${T.jobsSelectAll}"></th>
-              <th>#</th>
-              <th>${T.kindCol} <button type="button" class="help-btn" data-help="inline" title="?">?</button></th>
-              <th>${T.agent}</th>
-              <th>${T.parentCol} <button type="button" class="help-btn" data-help="parent" title="?">?</button></th>
-              <th>${T.depthCol} <button type="button" class="help-btn" data-help="callDepth" title="?">?</button></th>
-              <th>${T.prompt}</th>
-              <th>${T.status}</th>
-              <th>${T.created}</th>
-              <th>${T.actions}</th>
-            </tr>
-          </thead>
-          <tbody>
-            ${jobs.map(j => {
-              const kind = j.kind || 'job';
-              const kindPill = `<span class="pill kind-${kind}">${esc(kind)}</span>`;
-              const parentLink = (j.parent_id != null && j.parent_id > 0)
-                ? `<a href="#" data-act="parent" data-pid="${j.parent_id}" title="View parent">#${j.parent_id}</a>` : '';
-              const depth = (typeof j.call_depth === 'number' && j.call_depth > 0)
-                ? `<span style="font-size:11px;opacity:0.8">↳${j.call_depth}</span>` : '';
-              return `
-              <tr data-id="${j.id}">
-                <td><input type="checkbox" data-sel="${j.id}" ${jobSelection.has(j.id) ? 'checked' : ''}></td>
-                <td>#${j.id}</td>
-                <td>${kindPill}</td>
-                <td><code>${esc(j.agent)}</code></td>
-                <td>${parentLink}</td>
-                <td>${depth}</td>
-                <td class="truncate">${esc(j.prompt)}</td>
-                <td>${statusPill(j.status)}</td>
-                <td>${fmtTime(j.created_at)}</td>
-                <td class="row-actions">
-                  <button type="button" data-act="view">${T.view}</button>
-                  ${j.status === 'pending' || j.status === 'completed' || j.status === 'failed'
-                    ? `<button type="button" data-act="run">${T.run}</button>` : ''}
-                  ${j.status === 'pending' || j.status === 'running'
-                    ? `<button type="button" data-act="cancel" class="danger">${T.cancel}</button>` : ''}
-                </td>
-              </tr>`;
-            }).join('')}
-          </tbody>
-        </table>
-      `;
-      el.querySelectorAll('tr[data-id]').forEach(tr => {
-        const id = parseInt(tr.dataset.id, 10);
-        tr.querySelector('[data-act="view"]')?.addEventListener('click', () => showJob(id));
-        tr.querySelector('[data-act="run"]')?.addEventListener('click', () => runJob(id));
-        tr.querySelector('[data-act="cancel"]')?.addEventListener('click', () => cancelJob(id));
-        tr.querySelector('[data-act="parent"]')?.addEventListener('click', (e) => {
-          e.preventDefault();
-          const pid = parseInt(e.currentTarget.getAttribute('data-pid'), 10);
-          if (pid > 0) showJob(pid);
-        });
-        tr.querySelector('[data-sel]')?.addEventListener('change', (e) => {
-          if (e.target.checked) jobSelection.add(id);
-          else jobSelection.delete(id);
-          updateBatchToolbar();
-        });
-      });
-      const sa = el.querySelector('#job-select-all');
-      if (sa) {
-        sa.addEventListener('change', () => {
-          if (sa.checked) for (const j of jobs) jobSelection.add(j.id);
-          else for (const j of jobs) jobSelection.delete(j.id);
-          renderJobs(jobs);
-        });
-      }
-      updateBatchToolbar();
-    }
-    function updateBatchToolbar() {
-      const bar = document.getElementById('batch-toolbar');
-      const summary = document.getElementById('batch-summary');
-      const n = jobSelection.size;
-      bar.style.display = n > 0 ? '' : 'none';
-      summary.textContent = n > 0 ? `${n} selected` : '';
-    }
-    async function batchRun() {
-      const ids = Array.from(jobSelection);
-      if (!ids.length) { alert(T.jobsBatchEmpty); return; }
-      const r = await api('/api/jobs/batch-run', { method: 'POST', body: JSON.stringify({ ids }) });
-      const ok = r.results.filter(x => x.ok).length;
-      const fail = r.results.length - ok;
-      alert(T.jobsBatchResult.replace('{ok}', ok).replace('{fail}', fail));
-      jobSelection.clear();
-      loadJobs();
-    }
-    async function batchCancel() {
-      const ids = Array.from(jobSelection);
-      if (!ids.length) { alert(T.jobsBatchEmpty); return; }
-      const r = await api('/api/jobs/batch-cancel', { method: 'POST', body: JSON.stringify({ ids }) });
-      const ok = r.results.filter(x => x.ok).length;
-      const fail = r.results.length - ok;
-      alert(T.jobsBatchResult.replace('{ok}', ok).replace('{fail}', fail));
-      jobSelection.clear();
-      loadJobs();
-    }
-    document.getElementById('btn-batch-run').onclick = batchRun;
-    document.getElementById('btn-batch-cancel').onclick = batchCancel;
-    function esc(s) {
-      return String(s).replace(/[&<>"']/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[c]));
-    }
-    async function loadJobs() {
-      const status = document.getElementById('filter-status').value;
-      const agent = document.getElementById('jobs-agent-filter').value;
-      const kind = document.getElementById('filter-kind')?.value || '';
-      const qs = new URLSearchParams({ limit: '100' });
-      if (status) qs.set('status', status);
-      if (agent) qs.set('agent', agent);
-      if (kind) qs.set('kind', kind);
-      try {
-        const { jobs, stats } = await api(`/api/jobs?${qs.toString()}`);
-        renderStats(stats);
-        renderJobs(jobs);
-      } catch (e) {
-        document.getElementById('jobs-list').innerHTML =
-          `<div class="empty">${T.error}: ${esc(e.message)}</div>`;
-      }
-    }
-    document.getElementById('filter-kind')?.addEventListener('change', loadJobs);
-    async function showJob(id) {
-      const { job } = await api(`/api/jobs/${id}`);
-      // Fetch artifacts in parallel — non-fatal if 404 / empty.
-      let arts = { inputs: [], outputs: [], totalBytes: 0 };
-      try {
-        const r = await fetch(`/api/artifacts/${id}`);
-        if (r.ok) arts = await r.json();
-      } catch { /* ignore — modal still renders */ }
-      const m = document.getElementById('modal');
-      const kind = job.kind || 'job';
-      const kindPill = `<span class="pill kind-${kind}">${esc(kind)}</span>`;
-      const parentLine = (job.parent_id != null && job.parent_id > 0)
-        ? `<p><strong>${T.modalParent}:</strong> <a href="#" data-act="modal-parent" data-pid="${job.parent_id}">#${job.parent_id}</a> · <strong>${T.modalDepth}:</strong> ${job.call_depth || 0}</p>` : '';
-      const threadLine = job.thread_key
-        ? `<p><strong>${T.modalThread}:</strong> <code>${esc(job.thread_key)}</code></p>` : '';
-      const replacedLine = (job.replaced_by != null && job.replaced_by > 0)
-        ? `<p><strong>${T.modalReplaced}:</strong> <a href="#" data-act="modal-parent" data-pid="${job.replaced_by}">#${job.replaced_by}</a></p>` : '';
-      const outboxLine = (job.last_outbox_id != null && job.last_outbox_id > 0)
-        ? `<p><strong>${T.modalLastOutbox}:</strong> #${job.last_outbox_id}</p>` : '';
-      const fmt = (n) => n < 1024 ? `${n} B` : n < 1024*1024 ? `${(n/1024).toFixed(1)} KB` : `${(n/1024/1024).toFixed(1)} MB`;
-      const artsBlock = (arts.outputs.length > 0 || arts.inputs.length > 0) ? `
-        <h3>📎 ${T.modalArtifacts} (${fmt(arts.totalBytes || 0)}) <button type="button" class="help-btn" data-help="artifacts" title="?">?</button></h3>
-        ${arts.inputs.length > 0 ? `<p style="font-size:13px;color:var(--muted)">${T.modalArtifactsInputs}</p><ul>${arts.inputs.map(f => `<li><a href="/api/artifacts/${id}/file/${encodeURIComponent(f.name)}" target="_blank">${esc(f.name)}</a> (${fmt(f.bytes)})</li>`).join('')}</ul>` : ''}
-        ${arts.outputs.length > 0 ? `<p style="font-size:13px;color:var(--muted)">${T.modalArtifactsOutputs}</p><ul>${arts.outputs.map(f => `<li><a href="/api/artifacts/${id}/file/${encodeURIComponent(f.name)}" target="_blank">${esc(f.name)}</a> (${fmt(f.bytes)})</li>`).join('')}</ul>` : ''}
-      ` : '';
-      m.innerHTML = `
-        <h2>${T.details} #${job.id} ${kindPill}</h2>
-        <p><strong>${T.agent}:</strong> <code>${esc(job.agent)}</code> · <strong>${T.status}:</strong> ${statusPill(job.status)}</p>
-        ${parentLine}
-        ${threadLine}
-        ${replacedLine}
-        ${outboxLine}
-        <p><strong>${T.created}:</strong> ${fmtTime(job.created_at)}${job.completed_at ? ` · <strong>${T.completed}:</strong> ${fmtTime(job.completed_at)}` : ''}${job.delivered_at ? ` · <strong>${T.modalDelivered}:</strong> ${fmtTime(job.delivered_at)}` : ''}</p>
-        <h3>${T.prompt}</h3>
-        <pre>${esc(job.prompt)}</pre>
-        ${job.result ? `<h3>${T.result}</h3><pre>${esc(job.result)}</pre>` : ''}
-        ${job.error ? `<h3>${T.error}</h3><pre>${esc(job.error)}</pre>` : ''}
-        ${artsBlock}
-        <div class="modal-actions">
-          <button type="button" id="modal-close">${T.close}</button>
-        </div>
-      `;
-      document.getElementById('modal-bg').classList.add('show');
-      document.getElementById('modal-close').onclick = () =>
-        document.getElementById('modal-bg').classList.remove('show');
-      m.querySelectorAll('[data-act="modal-parent"]').forEach((a) => {
-        a.addEventListener('click', (e) => {
-          e.preventDefault();
-          const pid = parseInt(e.currentTarget.getAttribute('data-pid'), 10);
-          if (pid > 0) showJob(pid);
-        });
-      });
-    }
-    async function runJob(id) {
-      await api(`/api/jobs/${id}/run`, { method: 'POST' });
-      loadJobs();
-    }
-    async function cancelJob(id) {
-      await api(`/api/jobs/${id}/cancel`, { method: 'POST' });
-      loadJobs();
-    }
-    // New job modal
-    document.getElementById('btn-new').onclick = async () => {
-      const agentsRes = await fetch('/api/agents/status', {
-        credentials: 'same-origin',
-      }).then(r => r.json());
-      const agents = Object.keys(agentsRes);
-      const m = document.getElementById('modal');
-      m.innerHTML = `
-        <h2>${T.newJob}</h2>
-        <label>${T.agentCreate}<select id="ji-agent">
-          ${agents.map(a => `<option value="${esc(a)}">${esc(a)}</option>`).join('')}
-        </select></label>
-        <label>${T.promptCreate}<textarea id="ji-prompt"></textarea></label>
-        <div class="modal-actions">
-          <button type="button" id="modal-close">${T.close}</button>
-          <button type="button" class="primary" id="modal-create" style="background:var(--primary);color:#fff;border-color:var(--primary);">${T.newJob}</button>
-        </div>
-      `;
-      document.getElementById('modal-bg').classList.add('show');
-      document.getElementById('modal-close').onclick = () =>
-        document.getElementById('modal-bg').classList.remove('show');
-      document.getElementById('modal-create').onclick = async () => {
-        const agent = document.getElementById('ji-agent').value;
-        const prompt = document.getElementById('ji-prompt').value.trim();
-        if (!prompt) return;
-        await api('/api/jobs', { method: 'POST', body: JSON.stringify({ agent, prompt }) });
-        document.getElementById('modal-bg').classList.remove('show');
-        loadJobs();
-      };
-    };
-    document.getElementById('btn-refresh').onclick = loadJobs;
-    document.getElementById('filter-status').onchange = loadJobs;
-    // Auto-refresh every 5s when checkbox is on
-    let timer = null;
-    function setupAutoRefresh() {
-      const on = document.getElementById('auto-refresh').checked;
-      if (timer) { clearInterval(timer); timer = null; }
-      if (on) timer = setInterval(loadJobs, 5000);
-    }
-    document.getElementById('auto-refresh').onchange = setupAutoRefresh;
-    setupAutoRefresh();
-    // Schedules tab
-    async function loadSchedules() {
-      const el = document.getElementById('schedules-list');
-      el.innerHTML = `<div class="empty">${T.loading}</div>`;
-      const agent = document.getElementById('schedules-agent-filter').value;
-      const qs = agent ? `?agent=${encodeURIComponent(agent)}` : '';
-      try {
-        const { schedules } = await api(`/api/schedules${qs}`);
-        if (!schedules.length) { el.innerHTML = `<div class="empty">${T.emptySchedules}</div>`; return; }
-        el.innerHTML = `
-          <table>
-            <thead><tr>
-              <th>#</th><th>${T.scheduleName}</th><th>${T.agent}</th><th>${T.scheduleCron}</th>
-              <th>${T.status}</th><th>${T.scheduleNext}</th><th>${T.scheduleLast}</th>
-            </tr></thead>
-            <tbody>
-              ${schedules.map(s => `
-                <tr>
-                  <td>#${s.id}</td>
-                  <td>${esc(s.name)}</td>
-                  <td><code>${esc(s.agent)}</code></td>
-                  <td><code>${esc(s.cron)}</code></td>
-                  <td>${s.enabled ? '✅' : '⏸️'}</td>
-                  <td>${fmtTime(s.next_run)}</td>
-                  <td>${fmtTime(s.last_run)}</td>
-                </tr>
-              `).join('')}
-            </tbody>
-          </table>
-        `;
-      } catch (e) {
-        el.innerHTML = `<div class="empty">${T.error}: ${esc(e.message)}</div>`;
-      }
-    }
-    // ============================================
-    // Background jobs (Claude / opencode / Codex bgjob)
-    // ============================================
-    let bgRoots = null; // [{id, label, path}]
-    async function ensureBgRootsLoaded() {
-      if (bgRoots) return bgRoots;
-      const res = await api('/api/bgjobs');
-      bgRoots = res.roots || [];
-      const sel = document.getElementById('bg-root-filter');
-      sel.innerHTML = bgRoots.map(r =>
-        `<option value="${esc(r.id)}">${esc(r.label)} (${esc(r.path)})</option>`
-      ).join('');
-      sel.onchange = loadBgjobs;
-      return bgRoots;
-    }
-    function bgStatusPill(status) {
-      // Reuse pill colors heuristically — running/completed/failed are common,
-      // bgjob also emits 'killed', 'unknown', etc. Anything we don't know
-      // becomes the muted 'cancelled' style.
-      const known = ['pending', 'running', 'completed', 'failed', 'cancelled'];
-      const cls = known.includes(status) ? status : 'cancelled';
-      return `<span class="pill ${cls}">${esc(status)}</span>`;
-    }
-    function shortId(id) { return String(id).slice(0, 24); }
-    async function loadBgjobs() {
-      await ensureBgRootsLoaded();
-      const sel = document.getElementById('bg-root-filter');
-      const rootId = sel.value || (bgRoots[0]?.id);
-      if (!rootId) {
-        document.getElementById('bg-list').innerHTML = `<div class="empty">${T.bgEmpty}</div>`;
-        return;
-      }
-      try {
-        const { jobs } = await api(`/api/bgjobs?root=${encodeURIComponent(rootId)}`);
-        const el = document.getElementById('bg-list');
-        if (!jobs.length) { el.innerHTML = `<div class="empty">${T.bgEmpty}</div>`; return; }
-        el.innerHTML = `
-          <table>
-            <thead>
-              <tr>
-                <th>${T.bgName}</th>
-                <th>ID</th>
-                <th>${T.status}</th>
-                <th>${T.bgPid}</th>
-                <th>${T.bgStarted}</th>
-                <th>${T.bgEnded}</th>
-                <th>${T.bgExit}</th>
-                <th>${T.actions}</th>
-              </tr>
-            </thead>
-            <tbody>
-              ${jobs.map(j => `
-                <tr data-id="${esc(j.id)}">
-                  <td>${esc(j.name)}</td>
-                  <td><code title="${esc(j.id)}">${esc(shortId(j.id))}</code></td>
-                  <td>${bgStatusPill(j.status)}</td>
-                  <td>${j.pid ?? '-'}</td>
-                  <td>${fmtTime(j.started_at)}</td>
-                  <td>${fmtTime(j.ended_at)}</td>
-                  <td>${j.exit_code === null || j.exit_code === undefined ? '-' : j.exit_code}</td>
-                  <td class="row-actions">
-                    <button type="button" data-act="bg-view">${T.view}</button>
-                  </td>
-                </tr>
-              `).join('')}
-            </tbody>
-          </table>
-        `;
-        el.querySelectorAll('tr[data-id]').forEach(tr => {
-          const id = tr.dataset.id;
-          tr.querySelector('[data-act="bg-view"]').addEventListener('click', () => showBgjob(rootId, id));
-        });
-      } catch (e) {
-        document.getElementById('bg-list').innerHTML =
-          `<div class="empty">${T.error}: ${esc(e.message)}</div>`;
-      }
-    }
-    async function showBgjob(rootId, id) {
-      try {
-        const { job } = await api(`/api/bgjobs/${encodeURIComponent(id)}?root=${encodeURIComponent(rootId)}&tail=200`);
-        const m = document.getElementById('modal');
-        m.innerHTML = `
-          <h2>${T.details}</h2>
-          <p><strong>${T.bgName}:</strong> <code>${esc(job.name)}</code> · <strong>${T.status}:</strong> ${bgStatusPill(job.status)}</p>
-          <p><strong>ID:</strong> <code>${esc(job.id)}</code></p>
-          <p><strong>${T.bgRoot}:</strong> <code>${esc(job.rootId)}</code> · <strong>${T.bgPid}:</strong> ${job.pid ?? '-'} · <strong>${T.bgRestart}:</strong> ${job.restart_generation}</p>
-          <p><strong>${T.bgStarted}:</strong> ${fmtTime(job.started_at)}${job.ended_at ? ` · <strong>${T.bgEnded}:</strong> ${fmtTime(job.ended_at)}` : ''}${job.exit_code !== null && job.exit_code !== undefined ? ` · <strong>${T.bgExit}:</strong> ${job.exit_code}` : ''}</p>
-          ${job.cmd?.length ? `<h3>${T.bgCommand}</h3><pre>${esc(job.cmd.join(' '))}</pre>` : ''}
-          ${job.workdir ? `<p><strong>${T.bgWorkdir}:</strong> <code>${esc(job.workdir)}</code></p>` : ''}
-          ${job.out_dir ? `<p><strong>${T.bgOutDir}:</strong> <code>${esc(job.out_dir)}</code></p>` : ''}
-          ${job.log_tail !== null && job.log_tail !== undefined
-            ? `<h3>${T.bgLogTail}</h3><pre>${esc(job.log_tail) || '(empty)'}</pre>`
-            : ''}
-          <div class="modal-actions">
-            <button type="button" id="modal-close">${T.close}</button>
-          </div>
-        `;
-        document.getElementById('modal-bg').classList.add('show');
-        document.getElementById('modal-close').onclick = () =>
-          document.getElementById('modal-bg').classList.remove('show');
-      } catch (e) {
-        alert(`${T.error}: ${e.message}`);
-      }
-    }
-    document.getElementById('btn-bg-refresh').onclick = loadBgjobs;
-    let bgTimer = null;
-    function setupBgAutoRefresh() {
-      const onTab = !document.getElementById('background-pane').hidden;
-      const enabled = document.getElementById('bg-auto-refresh').checked && onTab;
-      if (bgTimer) { clearInterval(bgTimer); bgTimer = null; }
-      if (enabled) bgTimer = setInterval(loadBgjobs, 5000);
-    }
-    document.getElementById('bg-auto-refresh').onchange = setupBgAutoRefresh;
-    // ============================================
-    // Subtasks (flattened from session.subtasks)
-    // ============================================
-    async function loadSubtasks() {
-      const el = document.getElementById('sub-list');
-      el.innerHTML = `<div class="empty">${T.loading}</div>`;
-      const agent = document.getElementById('subtasks-agent-filter').value;
-      const qs = agent ? `?agent=${encodeURIComponent(agent)}` : '';
-      try {
-        const { subtasks } = await api(`/api/subtasks${qs}`);
-        if (!subtasks.length) { el.innerHTML = `<div class="empty">${T.subEmpty}</div>`; return; }
-        el.innerHTML = `
-          <table>
-            <thead>
-              <tr>
-                <th>#</th>
-                <th>${T.subAgent}</th>
-                <th>${T.subPrompt}</th>
-                <th>${T.status}</th>
-                <th>${T.subParent}</th>
-                <th>${T.subCreated}</th>
-              </tr>
-            </thead>
-            <tbody>
-              ${subtasks.map(s => `
-                <tr>
-                  <td>#${s.id}</td>
-                  <td><code>${esc(s.agent || '')}</code></td>
-                  <td class="truncate">${esc(s.prompt || '')}</td>
-                  <td>${statusPill(s.status || 'pending')}</td>
-                  <td><code title="${esc(`${s.platform}:${s.channelId}:${s.threadId}`)}">${esc(s.platform)}/${esc(s.threadId).slice(0, 12)}</code></td>
-                  <td>${fmtTime(s.createdAt)}</td>
-                </tr>
-              `).join('')}
-            </tbody>
-          </table>
-        `;
-      } catch (e) {
-        el.innerHTML = `<div class="empty">${T.error}: ${esc(e.message)}</div>`;
-      }
-    }
-    document.getElementById('btn-sub-refresh').onclick = loadSubtasks;
-    // ============================================
-    // Audit tab — invocations history with agent / days / user filter
-    // ============================================
-    async function loadAudit() {
-      const el = document.getElementById('audit-list');
-      el.innerHTML = `<div class="empty">${T.loading}</div>`;
-      const agent = document.getElementById('audit-agent-filter').value;
-      const days = document.getElementById('audit-days-filter').value || '7';
-      const user = document.getElementById('audit-user-filter').value.trim();
-      const qs = new URLSearchParams({ days, limit: '200' });
-      if (agent) qs.set('agent', agent);
-      if (user) qs.set('user', user);
-      try {
-        const { invocations, stats } = await api(`/api/audit?${qs.toString()}`);
-        // Stats strip
-        const statsEl = document.getElementById('audit-stats');
-        if (stats && typeof stats.total === 'number') {
-          const top = Object.entries(stats.byAgent || {})
-            .sort((a, b) => b[1] - a[1]).slice(0, 4)
-            .map(([a, n]) => `${esc(a)}=${n}`).join(' · ');
-          statsEl.innerHTML = `Total: <strong>${stats.total}</strong> · ` +
-            `Cost: $${(stats.totalCost || 0).toFixed(4)} · By agent: ${top || '—'}`;
-        } else {
-          statsEl.innerHTML = '';
-        }
-        if (!invocations.length) {
-          el.innerHTML = `<div class="empty">${T.auditEmpty}</div>`;
-          return;
-        }
-        el.innerHTML = `
-          <table>
-            <thead><tr>
-              <th>${T.auditTime}</th>
-              <th>${T.agent}</th>
-              <th>${T.auditPlatform}</th>
-              <th>${T.auditUser}</th>
-              <th>${T.auditIntent}</th>
-              <th>${T.auditDuration}</th>
-              <th>${T.auditCost}</th>
-              <th>${T.status}</th>
-            </tr></thead>
-            <tbody>
-              ${invocations.map(r => `
-                <tr title="trace: ${esc(r.trace_id || '')}${r.error ? `\n${esc(r.error)}` : ''}">
-                  <td>${fmtTime(r.ts)}</td>
-                  <td><code>${esc(r.agent)}</code></td>
-                  <td>${esc(r.platform)}</td>
-                  <td><code>${esc(r.user_id || '-')}</code></td>
-                  <td>${esc(r.intent || '-')}</td>
-                  <td>${(r.duration_ms / 1000).toFixed(2)}s</td>
-                  <td>${r.cost ? `$${Number(r.cost).toFixed(4)}` : '-'}</td>
-                  <td>${r.success ? '✅' : '❌'}</td>
-                </tr>
-              `).join('')}
-            </tbody>
-          </table>
-        `;
-      } catch (e) {
-        el.innerHTML = `<div class="empty">${T.error}: ${esc(e.message)}</div>`;
-      }
-    }
-    // Agent-filter change handlers per tab. Each dropdown re-runs its tab's
-    // loader; tabs that haven't been opened yet still hold the selection.
-    document.getElementById('jobs-agent-filter').addEventListener('change', loadJobs);
-    document.getElementById('subtasks-agent-filter').addEventListener('change', loadSubtasks);
-    document.getElementById('schedules-agent-filter').addEventListener('change', loadSchedules);
-    document.getElementById('audit-agent-filter').addEventListener('change', loadAudit);
-    document.getElementById('audit-days-filter').addEventListener('change', loadAudit);
-    // User filter is debounced — refresh on blur / Enter, not on every keystroke.
-    document.getElementById('audit-user-filter').addEventListener('change', loadAudit);
-    document.getElementById('btn-audit-refresh').onclick = loadAudit;
-    // Schedules tab also gets an explicit refresh button now that it has a
-    // toolbar (was previously bare-list); keeps parity with other tabs.
-    const btnSchedRefresh = document.getElementById('btn-sched-refresh');
-    if (btnSchedRefresh) btnSchedRefresh.onclick = loadSchedules;
-    // ============================================================
-    // Health tab (PR-B)
-    // ============================================================
-    // Per-agent operational snapshot. Polled every 5 s when the tab is
-    // visible (auto-refresh checkbox controls). The sparkline buffer is
-    // kept client-side — each poll appends current p95 to a 60-sample
-    // ring per agent, rendered as a tiny inline SVG. Stays in memory
-    // only; no localStorage persistence.
-    const HEALTH_POLL_MS = 5_000;
-    const SPARKLINE_LEN = 60;
-    const sparkBuffers = new Map();   // agent → number[] (p95 history)
-    let healthTimer = null;
-    function pushSpark(agent, value) {
-      let buf = sparkBuffers.get(agent);
-      if (!buf) { buf = []; sparkBuffers.set(agent, buf); }
-      buf.push(Number(value) || 0);
-      while (buf.length > SPARKLINE_LEN) buf.shift();
-    }
-    function renderSparkline(values, w = 120, h = 28) {
-      if (!values.length) return '';
-      const max = Math.max(1, ...values);
-      const step = w / Math.max(1, SPARKLINE_LEN - 1);
-      const points = values.map((v, i) =>
-        `${(i * step).toFixed(1)},${(h - (v / max) * h * 0.92 - 1).toFixed(1)}`
-      ).join(' ');
-      const last = values[values.length - 1];
-      const dotX = ((values.length - 1) * step).toFixed(1);
-      const dotY = (h - (last / max) * h * 0.92 - 1).toFixed(1);
-      return `<svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <polyline fill="none" stroke="var(--primary)" stroke-width="1.5" points="${points}" />
-        <circle cx="${dotX}" cy="${dotY}" r="2" fill="var(--primary)" />
-      </svg>`;
-    }
-    function breakerPill(phase) {
-      const map = {
-        closed: { label: T.breakerClosed, bg: 'var(--success)' },
-        open: { label: T.breakerOpen, bg: 'var(--danger)' },
-        'half-open': { label: T.breakerHalfOpen, bg: 'var(--warning)' },
-      };
-      const o = map[phase] || { label: phase, bg: 'var(--muted)' };
-      return `<span style="display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;
-        background:${o.bg};color:#fff">${o.label}</span>`;
-    }
-    function renderHealth(payload) {
-      const list = document.getElementById('health-list');
-      const uptime = document.getElementById('health-uptime');
-      const days = Math.floor(payload.uptimeSec / 86400);
-      const hours = Math.floor((payload.uptimeSec % 86400) / 3600);
-      const mins = Math.floor((payload.uptimeSec % 3600) / 60);
-      uptime.textContent = `uptime ${days > 0 ? `${days}d ` : ''}${hours}h ${mins}m`;
-      if (!payload.agents.length) {
-        list.innerHTML = `<div class="empty">${T.healthEmpty}</div>`;
-        return;
-      }
-      list.innerHTML = payload.agents.map((a) => {
-        const inv = a.invocations;
-        const p95 = inv ? inv.p95Ms : 0;
-        pushSpark(a.agent, p95);
-        const buf = sparkBuffers.get(a.agent) || [];
-        const cooldownLine = a.breaker.phase !== 'closed'
-          ? `<div class="ac-row"><b>${T.healthCooldown}:</b> ${(a.breaker.cooldownRemainingMs / 1000).toFixed(0)}s</div>`
-          : '';
-        const successPct = inv && inv.total > 0 ? `${(inv.successRate * 100).toFixed(1)}%` : '—';
-        const cost = inv?.costSum ? `$${inv.costSum.toFixed(4)}` : '—';
-        return `
-          <div class="health-card">
-            <div class="health-head">
-              <code class="health-agent">${esc(a.agent)}</code>
-              ${breakerPill(a.breaker.phase)}
-            </div>
-            <div class="health-grid">
-              <div>
-                <div class="health-label">${T.healthBreaker}</div>
-                <div class="health-val">${esc(a.breaker.phase)}${a.breaker.failures > 0 ? ` · ${a.breaker.failures} fail` : ''}</div>
-              </div>
-              <div>
-                <div class="health-label">${T.healthRate}</div>
-                <div class="health-val">${a.rate.remaining}/${a.rate.rate}/${a.rate.intervalSec}s</div>
-              </div>
-              <div>
-                <div class="health-label">${T.healthLatency} p50/p95/p99</div>
-                <div class="health-val">${inv ? `${inv.p50Ms}/${inv.p95Ms}/${inv.p99Ms}ms` : '—'}</div>
-              </div>
-              <div>
-                <div class="health-label">${T.healthInvocations}</div>
-                <div class="health-val">${inv ? inv.total : 0} · ${T.healthSuccessRate} ${successPct}</div>
-              </div>
-              <div>
-                <div class="health-label">${T.healthCost}</div>
-                <div class="health-val">${cost}</div>
-              </div>
-              <div title="${T.healthSparklineLabel}">
-                <div class="health-label">p95 (${buf.length}/${SPARKLINE_LEN})</div>
-                <div class="health-spark">${renderSparkline(buf)}</div>
-              </div>
-            </div>
-            ${cooldownLine}
-          </div>
-        `;
-      }).join('');
-    }
-    async function loadHealth() {
-      try {
-        const data = await api('/api/agent-health');
-        renderHealth(data);
-      } catch (e) {
-        document.getElementById('health-list').innerHTML =
-          `<div class="empty">${T.error}: ${esc(e.message)}</div>`;
-      }
-    }
-    function setupHealthAutoRefresh() {
-      const isHealth = !document.getElementById('health-pane').hidden;
-      const on = document.getElementById('health-auto-refresh').checked && isHealth;
-      if (healthTimer) { clearInterval(healthTimer); healthTimer = null; }
-      if (on) healthTimer = setInterval(loadHealth, HEALTH_POLL_MS);
-    }
-    document.getElementById('btn-health-refresh').onclick = loadHealth;
-    document.getElementById('health-auto-refresh').onchange = setupHealthAutoRefresh;
-    // ============================================================
-    // Approvals tab (PR-B)
-    // ============================================================
-    // Global view of every currently-pending HITL approval. Operator can
-    // resolve from here without needing access to the original IM thread
-    // — useful when an approval lands while the requester is offline. The
-    // server validates the reqId still exists; if not (already resolved /
-    // timed out) we get a 404 + refresh.
-    const APPROVALS_POLL_MS = 3_000;
-    let approvalsTimer = null;
-    function fmtAge(ms) {
-      const s = Math.max(0, Math.floor(ms / 1000));
-      if (s < 60) return `${s}s`;
-      const m = Math.floor(s / 60);
-      if (m < 60) return `${m}m ${s % 60}s`;
-      const h = Math.floor(m / 60);
-      return `${h}h ${m % 60}m`;
-    }
-    function renderApprovals(payload) {
-      const list = document.getElementById('approvals-list');
-      const summary = document.getElementById('approvals-summary');
-      const pending = payload.pending || [];
-      summary.textContent = T.approvalsCount.replace('{n}', pending.length);
-      if (!pending.length) {
-        list.innerHTML = `<div class="empty">${T.approvalsEmpty}</div>`;
-        return;
-      }
-      list.innerHTML = pending.map((p) => {
-        let inputPreview = '';
-        try { inputPreview = JSON.stringify(p.input, null, 2); } catch { inputPreview = '(unserializable)'; }
-        if (inputPreview.length > 600) inputPreview = `${inputPreview.slice(0, 600)}\n...`;
-        const autoTag = p.autoAllow
-          ? `<span style="color:var(--warning);font-size:11px;margin-left:6px">⏱ ${T.approvalsAutoMode}</span>`
-          : '';
-        return `
-          <div class="approval-item" data-req-id="${esc(p.reqId)}">
-            <div class="approval-head">
-              <code>${esc(p.toolName)}</code>${autoTag}
-              <span class="approval-meta">${esc(p.platform)} · ${T.approvalsThread}: ${esc(String(p.threadId).slice(0, 24))} · ${T.approvalsAge}: ${fmtAge(p.ageMs)}</span>
-            </div>
-            <pre class="approval-input">${esc(inputPreview)}</pre>
-            <div class="approval-actions">
-              <button type="button" data-act="allow" class="btn-allow">${T.approvalsAllow}</button>
-              <button type="button" data-act="deny" class="btn-deny">${T.approvalsDeny}</button>
-              <button type="button" data-act="allowAll">${T.approvalsAllowAll}</button>
-            </div>
-          </div>
-        `;
-      }).join('');
-      list.querySelectorAll('.approval-item').forEach((item) => {
-        const reqId = item.dataset.reqId;
-        item.querySelector('[data-act="allow"]').onclick = () => resolveApproval(reqId, 'allow', false);
-        item.querySelector('[data-act="deny"]').onclick = () => resolveApproval(reqId, 'deny', false);
-        item.querySelector('[data-act="allowAll"]').onclick = () => resolveApproval(reqId, 'allow', true);
-      });
-    }
-    async function resolveApproval(reqId, behavior, autoAllowFurther) {
-      const item = document.querySelector(`.approval-item[data-req-id="${reqId}"]`);
-      if (item) item.querySelectorAll('button').forEach((b) => { b.disabled = true; });
-      try {
-        await api(`/api/approvals/${encodeURIComponent(reqId)}/resolve`, {
-          method: 'POST',
-          body: JSON.stringify({ behavior, autoAllowFurther }),
-        });
-        loadApprovals();
-      } catch (e) {
-        if (item) {
-          const err = document.createElement('div');
-          err.style.cssText = 'color:var(--danger);font-size:12px;margin-top:6px';
-          err.textContent = `${T.approvalsResolveErr}: ${e.message}`;
-          item.appendChild(err);
-          item.querySelectorAll('button').forEach((b) => { b.disabled = false; });
-        }
-      }
-    }
-    async function loadApprovals() {
-      try {
-        const data = await api('/api/approvals');
-        renderApprovals(data);
-      } catch (e) {
-        document.getElementById('approvals-list').innerHTML =
-          `<div class="empty">${T.error}: ${esc(e.message)}</div>`;
-      }
-    }
-    function setupApprovalsAutoRefresh() {
-      const isApprovals = !document.getElementById('approvals-pane').hidden;
-      const on = document.getElementById('approvals-auto-refresh').checked && isApprovals;
-      if (approvalsTimer) { clearInterval(approvalsTimer); approvalsTimer = null; }
-      if (on) approvalsTimer = setInterval(loadApprovals, APPROVALS_POLL_MS);
-    }
-    document.getElementById('btn-approvals-refresh').onclick = loadApprovals;
-    document.getElementById('approvals-auto-refresh').onchange = setupApprovalsAutoRefresh;
-    // ============================================================
-    // Files tab (PR-D) — read-only browser of ~/.im-hub-workspaces/<agent>/
-    // ============================================================
-    // Pure pull model: list directory or peek a file via /api/workspace-files.
-    // No write/edit affordances by design; ops use ssh.
-    let filesAgent = '';      // currently-selected agent
-    let filesPath = '';       // current relative path under that agent's root
-    let filesAgentsLoaded = false;
-    async function ensureFilesAgentLoaded() {
-      if (filesAgentsLoaded) return;
-      filesAgentsLoaded = true;
-      try {
-        const agentsRes = await fetch('/api/agents/status', {
-          credentials: 'same-origin',
-        }).then(r => r.json());
-        const names = Object.keys(agentsRes);
-        const sel = document.getElementById('files-agent');
-        sel.innerHTML = names.length
-          ? names.map(n => `<option value="${esc(n)}">${esc(n)}</option>`).join('')
-          : '';
-        if (!names.length) {
-          document.getElementById('files-tree').innerHTML = `<div class="empty">${T.filesNoAgent}</div>`;
-          return;
-        }
-        filesAgent = sel.value = names[0];
-      } catch {
-        filesAgentsLoaded = false; // allow retry next time
-      }
-    }
-    function fmtBytes(n) {
-      if (n == null) return '-';
-      if (n < 1024) return `${n} B`;
-      if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
-      return `${(n / (1024 * 1024)).toFixed(1)} MB`;
-    }
-    async function loadFiles(path) {
-      filesPath = path || '';
-      const tree = document.getElementById('files-tree');
-      const content = document.getElementById('files-content');
-      const cur = document.getElementById('files-current');
-      cur.textContent = filesPath || T.filesRoot;
-      if (!filesAgent) { tree.innerHTML = `<div class="empty">${T.filesNoAgent}</div>`; return; }
-      tree.innerHTML = `<div class="empty">${T.loading}</div>`;
-      try {
-        const qs = new URLSearchParams({ agent: filesAgent, path: filesPath });
-        const data = await api(`/api/workspace-files?${qs.toString()}`);
-        if (data.type === 'dir') {
-          if (!data.entries.length) {
-            tree.innerHTML = `<div class="empty">${T.filesEmpty}</div>`;
-          } else {
-            tree.innerHTML = `
-              <table>
-                <thead><tr><th>${T.filesPath}</th><th>${T.filesSize}</th><th>${T.filesMtime}</th></tr></thead>
-                <tbody>
-                  ${data.entries.map(e => `
-                    <tr data-name="${esc(e.name)}" data-isdir="${e.isDir ? '1' : '0'}" style="cursor:pointer">
-                      <td>${e.isDir ? '📁 ' : '📄 '}${esc(e.name)}${e.broken ? ' ⚠' : ''}</td>
-                      <td>${e.isDir ? '-' : fmtBytes(e.size)}</td>
-                      <td>${e.mtime ? fmtTime(e.mtime) : '-'}</td>
-                    </tr>
-                  `).join('')}
-                </tbody>
-              </table>
-            `;
-            tree.querySelectorAll('tr[data-name]').forEach(tr => {
-              tr.addEventListener('click', () => {
-                const name = tr.dataset.name;
-                const isDir = tr.dataset.isdir === '1';
-                const next = filesPath ? `${filesPath}/${name}` : name;
-                if (isDir) loadFiles(next);
-                else loadFiles(next); // file path → server returns type:'file'
-              });
-            });
-          }
-          content.innerHTML = '';
-        } else if (data.type === 'file') {
-          // Re-render directory listing for the parent so the user keeps
-          // context after clicking a file. Cheap: same path -1 segment.
-          const parent = filesPath.includes('/') ? filesPath.slice(0, filesPath.lastIndexOf('/')) : '';
-          // Don't recurse — load parent listing without overwriting filesPath.
-          await loadDirOnly(parent);
-          renderFileContent(data);
-        } else {
-          tree.innerHTML = `<div class="empty">${T.filesNotFound}</div>`;
-          content.innerHTML = '';
-        }
-      } catch (e) {
-        tree.innerHTML = `<div class="empty">${T.error}: ${esc(e.message)}</div>`;
-      }
-    }
-    // Load a parent dir listing into the tree without changing filesPath
-    // (which we want to stay on the file the user opened so the breadcrumb
-    // and the up-button still target the right place).
-    async function loadDirOnly(path) {
-      const tree = document.getElementById('files-tree');
-      try {
-        const qs = new URLSearchParams({ agent: filesAgent, path });
-        const data = await api(`/api/workspace-files?${qs.toString()}`);
-        if (data.type !== 'dir') return;
-        tree.innerHTML = `
-          <table>
-            <thead><tr><th>${T.filesPath}</th><th>${T.filesSize}</th><th>${T.filesMtime}</th></tr></thead>
-            <tbody>
-              ${data.entries.map(e => `
-                <tr data-name="${esc(e.name)}" data-isdir="${e.isDir ? '1' : '0'}" style="cursor:pointer">
-                  <td>${e.isDir ? '📁 ' : '📄 '}${esc(e.name)}${e.broken ? ' ⚠' : ''}</td>
-                  <td>${e.isDir ? '-' : fmtBytes(e.size)}</td>
-                  <td>${e.mtime ? fmtTime(e.mtime) : '-'}</td>
-                </tr>
-              `).join('')}
-            </tbody>
-          </table>
-        `;
-        tree.querySelectorAll('tr[data-name]').forEach(tr => {
-          tr.addEventListener('click', () => {
-            const name = tr.dataset.name;
-            const next = path ? `${path}/${name}` : name;
-            loadFiles(next);
-          });
-        });
-      } catch { /* keep prior tree */ }
-    }
-    function renderFileContent(data) {
-      const content = document.getElementById('files-content');
-      const banner = data.truncated ? `<div class="empty">${T.filesTruncated}</div>` : '';
-      const binary = data.encoding === 'base64' ? `<div class="empty">${T.filesBinary}</div>` : '';
-      // Editable iff text + not truncated (truncated edits would discard
-      // bytes past the 1 MiB cap, which is a footgun). Both checks here.
-      const canEdit = data.encoding === 'utf-8' && !data.truncated;
-      content.innerHTML = `
-        <div style="margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap">
-          <code>${esc(data.path)}</code>
-          <span style="color:var(--muted);font-size:12px"> · ${fmtBytes(data.size)} · ${fmtTime(data.mtime)}</span>
-          ${canEdit ? `<button type="button" class="primary" id="btn-file-edit" style="margin-left:auto;background:var(--primary);color:#fff;border-color:var(--primary)">${T.filesEdit}</button>` : ''}
-        </div>
-        ${banner}${binary}
-        <pre id="file-pre" style="max-height:55vh;overflow:auto;background:var(--card);border:1px solid var(--border);padding:8px;border-radius:6px">${esc(data.content)}</pre>
-      `;
-      if (canEdit) {
-        document.getElementById('btn-file-edit').onclick = () => enterFileEditMode(data);
-      }
-    }
-    function enterFileEditMode(data) {
-      const content = document.getElementById('files-content');
-      // Stash original so Cancel can roll back without re-fetching.
-      content.innerHTML = `
-        <div style="margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap">
-          <code>${esc(data.path)}</code>
-          <span style="color:var(--muted);font-size:12px"> · ${T.filesEditing}</span>
-          <span style="margin-left:auto;display:flex;gap:6px">
-            <button type="button" id="btn-file-cancel">${T.filesCancel}</button>
-            <button type="button" id="btn-file-save" class="primary" style="background:var(--primary);color:#fff;border-color:var(--primary)">${T.filesSave}</button>
-          </span>
-        </div>
-        <textarea id="file-editor" spellcheck="false"
-          style="width:100%;min-height:55vh;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:13px;background:var(--card);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:8px;outline:none;resize:vertical"></textarea>
-      `;
-      const ta = document.getElementById('file-editor');
-      ta.value = data.content;
-      ta.focus();
-      document.getElementById('btn-file-cancel').onclick = () => renderFileContent(data);
-      document.getElementById('btn-file-save').onclick = async () => {
-        const newContent = ta.value;
-        const saveBtn = document.getElementById('btn-file-save');
-        saveBtn.disabled = true;
-        saveBtn.textContent = T.filesSaving;
-        try {
-          // Bypass api() helper here so we can surface the server's
-          // structured error body (e.g. "Content exceeds 1 MiB cap")
-          // rather than just the HTTP statusText.
-          const qs = new URLSearchParams({ agent: data.agent, path: data.path });
-          const res = await fetch(`/api/workspace-files?${qs.toString()}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            credentials: 'same-origin',
-            body: JSON.stringify({ content: newContent }),
-          });
-          if (!res.ok) {
-            let msg = `${res.status} ${res.statusText}`;
-            try { const j = await res.json(); if (j?.error) msg = j.error; } catch {}
-            throw new Error(msg);
-          }
-          const r = await res.json();
-          // Re-render from the server's authoritative reply (size/mtime
-          // change on success) rather than trusting the local string.
-          renderFileContent({
-            ...data,
-            content: newContent,
-            size: r.size,
-            mtime: r.mtime,
-          });
-          alert(T.filesSaved);
-        } catch (e) {
-          saveBtn.disabled = false;
-          saveBtn.textContent = T.filesSave;
-          alert(`${T.filesSaveFailed}: ${e?.message ? e.message : e}`);
-        }
-      };
-    }
-    document.getElementById('files-agent').addEventListener('change', (e) => {
-      filesAgent = e.target.value;
-      filesPath = '';
-      loadFiles('');
-    });
-    document.getElementById('btn-files-refresh').onclick = () => loadFiles(filesPath);
-    document.getElementById('btn-files-up').onclick = () => {
-      if (!filesPath) return;
-      const parent = filesPath.includes('/') ? filesPath.slice(0, filesPath.lastIndexOf('/')) : '';
-      loadFiles(parent);
-    };
-    // ============================================================
-    // /events SSE consumer (PR-C)
-    // ============================================================
-    // Server pushes audit / approval / job / metrics events as they
-    // happen. The dashboard previously polled each tab independently
-    // every 3-5 s; now it just refreshes the visible tab when a relevant
-    // event arrives, and keeps a small "Live" status pill in the header.
-    //
-    // We intentionally KEEP the existing setInterval auto-refresh as a
-    // fallback: if SSE fails (proxy stripping, network blip, server
-    // restart), the page still updates eventually. SSE just makes the
-    // refresh near-instant when it works.
-    let evtSource = null;
-    function setupSSE() {
-      try {
-        if (evtSource) try { evtSource.close(); } catch {}
-        evtSource = new EventSource('/events', { withCredentials: true });
-      } catch (err) {
-        console.warn('[sse] init failed', err);
-        return;
-      }
-      evtSource.addEventListener('hello', () => {
-        console.debug?.('[sse] connected');
-      });
-      // When an audit lands and the Audit tab is visible, refresh it.
-      // Same for the other types — no point repainting hidden tabs.
-      const refreshIfVisible = (paneId, loader) => {
-        const pane = document.getElementById(paneId);
-        if (pane && !pane.hidden) loader();
-      };
-      evtSource.addEventListener('audit', () => {
-        refreshIfVisible('audit-pane', loadAudit);
-      });
-      evtSource.addEventListener('approval', (e) => {
-        refreshIfVisible('approvals-pane', loadApprovals);
-        // Approval count is also surfaced as a small badge on the tab
-        // (best-effort — silently skip if any field is missing).
-        try {
-          const data = JSON.parse(e.data);
-          if (data.phase === 'requested') flashTabBadge('tab-approvals');
-        } catch {}
-      });
-      evtSource.addEventListener('job', () => {
-        refreshIfVisible('jobs-pane', loadJobs);
-      });
-      evtSource.addEventListener('metrics', () => {
-        refreshIfVisible('health-pane', loadHealth);
-      });
-      evtSource.onerror = () => {
-        console.warn('[sse] connection error — EventSource will auto-reconnect');
-      };
-    }
-    /**
-     * Pulse a tab's text briefly to draw the eye to a new event there.
-     * Cheap CSS-class flash, auto-clears after ~1.2 s. Uses a
-     * dynamically-injected <style> on first call so we don't need to
-     * touch the page-level <style> block.
-     */
-    let _flashStyleInjected = false;
-    function flashTabBadge(tabId) {
-      const el = document.getElementById(tabId);
-      if (!el) return;
-      if (!_flashStyleInjected) {
-        const s = document.createElement('style');
-        s.textContent = `
-          @keyframes imhubFlash {
-            0%   { background: var(--primary); color: #fff; }
-            100% { background: transparent; color: inherit; }
-          }
-          .imhub-flash { animation: imhubFlash 1.2s ease-out; }
-        `;
-        document.head.appendChild(s);
-        _flashStyleInjected = true;
-      }
-      el.classList.remove('imhub-flash');
-      // Force reflow so the animation re-triggers on rapid events.
-      void el.offsetWidth;
-      el.classList.add('imhub-flash');
-    }
-    setupSSE();
-    // ============================================
-    // Outbox tab (v1.1.2)
-    // ============================================
-    function escapeHtml(s) {
-      return String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
-    }
-    async function loadOutbox() {
-      const statusEl = document.getElementById('outbox-status-filter');
-      const limitEl = document.getElementById('outbox-limit');
-      const statusFilter = statusEl ? statusEl.value : '';
-      const limit = limitEl ? limitEl.value : '50';
-      try {
-        const statsResp = await fetch('/api/outbox/stats');
-        const stats = await statsResp.json();
-        const statsEl = document.getElementById('outbox-stats');
-        if (statsEl) {
-          statsEl.innerHTML =
-            `<span class="stat">${T.outboxStatusPending} <b>${stats.pending ?? 0}</b></span>` +
-            `<span class="stat">${T.outboxStatusDelivered} <b>${stats.delivered ?? 0}</b></span>` +
-            `<span class="stat">${T.outboxStatusGivingUp} <b>${stats.giving_up ?? 0}</b></span> ` +
-            `<button type="button" class="help-btn" data-help="givingUp" title="?">?</button>`;
-        }
-        const qs = new URLSearchParams({ limit });
-        if (statusFilter) qs.set('status', statusFilter);
-        const listResp = await fetch('/api/outbox?' + qs);
-        const { rows = [] } = await listResp.json();
-        const listEl = document.getElementById('outbox-list');
-        if (!rows.length) { listEl.innerHTML = `<p style="color:var(--text-muted)">${T.outboxEmpty}</p>`; return; }
-        const html = ['<table class="data-table"><thead><tr>',
-          `<th>#</th><th>${T.status}</th><th>${T.outboxColPlatform}</th><th>${T.outboxColKind}</th><th>${T.outboxColPri}</th>`,
-          `<th>${T.outboxColAttempts}</th><th>${T.outboxColPayload}</th><th>${T.outboxColError}</th><th>${T.outboxColCreated}</th><th></th>`,
-          '</tr></thead><tbody>'];
-        for (const r of rows) {
-          const icon = r.status === 'delivered' ? '✅' : r.status === 'giving_up' ? '💀' : '⏳';
-          const preview = (r.payload || '').slice(0, 60).replace(/\n/g, ' ');
-          const errCell = r.last_error ? `<span title="${escapeHtml(r.last_error)}">${escapeHtml(r.last_error.slice(0, 40))}…</span>` : '';
-          const ts = fmtTime(r.created_at);
-          const retryBtn = r.status === 'giving_up'
-            ? `<button class="btn-link" data-retry="${r.id}">${T.outboxRetry}</button>` : '';
-          html.push(`<tr>
-            <td>#${r.id}</td>
-            <td>${icon} ${escapeHtml(r.status)}</td>
-            <td>${escapeHtml(r.platform)}</td>
-            <td>${escapeHtml(r.kind)}</td>
-            <td>${escapeHtml(r.priority)}</td>
-            <td>${r.attempts}</td>
-            <td title="${escapeHtml(r.payload || '')}">${escapeHtml(preview)}…</td>
-            <td>${errCell}</td>
-            <td>${ts}</td>
-            <td>${retryBtn}</td>
-          </tr>`);
-        }
-        html.push('</tbody></table>');
-        listEl.innerHTML = html.join('');
-        listEl.querySelectorAll('[data-retry]').forEach((btn) => {
-          btn.addEventListener('click', async () => {
-            const id = btn.getAttribute('data-retry');
-            const r = await fetch(`/api/outbox/${id}/retry`, { method: 'POST' });
-            const j = await r.json();
-            if (j.ok) { loadOutbox(); }
-            else alert('Retry failed: ' + (j.error || 'unknown'));
-          });
-        });
-      } catch (err) {
-        document.getElementById('outbox-list').innerHTML = `<p style="color:#d00">Failed: ${escapeHtml(String(err))}</p>`;
-      }
-    }
-    document.getElementById('btn-outbox-refresh')?.addEventListener('click', loadOutbox);
-    document.getElementById('outbox-status-filter')?.addEventListener('change', loadOutbox);
-    document.getElementById('outbox-limit')?.addEventListener('change', loadOutbox);
-    // ============================================
-    // A2A tab (v1.1.3)
-    // ============================================
-    async function loadA2A() {
-      try {
-        const [statsResp, recentResp] = await Promise.all([
-          fetch('/api/a2a/stats'),
-          fetch('/api/a2a/recent?limit=20'),
-        ]);
-        const stats = await statsResp.json();
-        const recent = (await recentResp.json()).rows || [];
-        const statsEl = document.getElementById('a2a-stats');
-        if (statsEl) {
-          const byStatus = (stats.byStatus || []).map(s => `${s.status}:${s.n}`).join(' · ');
-          const byAgent = (stats.byAgent || []).map(s => `${s.agent} <b>${s.n}</b>`).join(' / ');
-          statsEl.innerHTML =
-            `<span class="stat">${T.a2aStatTotal} <b>${stats.total ?? 0}</b></span>` +
-            `<span class="stat">${T.a2aStat24h} <b>${stats.recent24h ?? 0}</b></span>` +
-            `<span class="stat">${T.a2aStatMaxDepth} <b>${stats.maxDepth ?? 0}</b></span>` +
-            (byStatus ? `<span class="stat">${byStatus}</span>` : '') +
-            (byAgent ? `<span class="stat">${T.a2aStatTop} ${byAgent}</span>` : '');
-        }
-        const listEl = document.getElementById('a2a-list');
-        if (!recent.length) { listEl.innerHTML = `<p style="color:var(--text-muted)">${T.a2aEmpty}</p>`; return; }
-        const html = [`<h3 style="margin-top:1em">${T.a2aRecent}</h3>`,
-          '<table class="data-table"><thead><tr>',
-          `<th>#</th><th>${T.a2aCallerCallee}</th><th>${T.depthCol}</th><th>${T.status}</th>`,
-          `<th>${T.prompt}</th><th>${T.created}</th><th>${T.modalDelivered}</th><th></th>`,
-          '</tr></thead><tbody>'];
-        for (const r of recent) {
-          const icon = r.status === 'delivered' || r.status === 'completed' ? '✅'
-            : r.status === 'failed' ? '❌'
-            : r.status === 'running' ? '🔄' : '⏳';
-          const preview = (r.prompt || '').slice(0, 50).replace(/\n/g, ' ');
-          const started = fmtTime(r.started_at);
-          const done = fmtTime(r.completed_at || r.delivered_at);
-          html.push(`<tr>
-            <td>#${r.id}</td>
-            <td>←#${r.parent_id ?? '?'} → <b>${escapeHtml(r.agent)}</b></td>
-            <td>${r.call_depth}</td>
-            <td>${icon} ${escapeHtml(r.status)}</td>
-            <td title="${escapeHtml(r.prompt || '')}">${escapeHtml(preview)}…</td>
-            <td>${started}</td>
-            <td>${done}</td>
-            <td><button class="btn-link" data-tree="${r.parent_id}">${T.a2aBtnViewParent}</button></td>
-          </tr>`);
-        }
-        html.push('</tbody></table>');
-        listEl.innerHTML = html.join('');
-        listEl.querySelectorAll('[data-tree]').forEach((btn) => {
-          btn.addEventListener('click', () => {
-            const id = btn.getAttribute('data-tree');
-            if (!id || id === 'null') return;
-            document.getElementById('a2a-tree-id').value = id;
-            loadA2ATree(id);
-          });
-        });
-      } catch (err) {
-        document.getElementById('a2a-list').innerHTML = `<p style="color:#d00">Failed: ${escapeHtml(String(err))}</p>`;
-      }
-    }
-    async function loadA2ATree(rootId) {
-      const treeEl = document.getElementById('a2a-tree');
-      if (!rootId) return;
-      treeEl.innerHTML = `<p style="color:var(--text-muted)">${T.loading}</p>`;
-      try {
-        const resp = await fetch(`/api/a2a/tree/${rootId}`);
-        const j = await resp.json();
-        if (!resp.ok) { treeEl.innerHTML = `<p style="color:#d00">${escapeHtml(j.error || 'failed')}</p>`; return; }
-        const lines = [`<h3 style="margin-top:1em">🌳 ${T.a2aTreeRoot.replace('{id}', String(rootId))}</h3>`];
-        function render(node, depth) {
-          const indent = '&nbsp;'.repeat(depth * 4);
-          const icon = node.status === 'delivered' || node.status === 'completed' ? '✅'
-            : node.status === 'failed' ? '❌'
-            : node.status === 'running' ? '🔄' : '⏳';
-          const preview = (node.prompt || '').slice(0, 70).replace(/\n/g, ' ');
-          lines.push(`<div>${indent}${icon} <b>#${node.id}</b> ${escapeHtml(node.agent)} [${escapeHtml(node.status)}] ${escapeHtml(preview)}…</div>`);
-          for (const f of (node.outputs || [])) {
-            const fmt = (n) => n < 1024 ? `${n} B` : n < 1024*1024 ? `${(n/1024).toFixed(1)} KB` : `${(n/1024/1024).toFixed(1)} MB`;
-            lines.push(`<div>${indent}&nbsp;&nbsp;&nbsp;&nbsp;📎 <a href="/api/artifacts/${node.id}/file/${encodeURIComponent(f.name)}" target="_blank">${escapeHtml(f.name)}</a> (${fmt(f.bytes)})</div>`);
-          }
-          for (const c of (node.children || [])) render(c, depth + 1);
-        }
-        render(j.tree, 0);
-        treeEl.innerHTML = `<div style="font-family:monospace;font-size:13px;line-height:1.6">${lines.join('')}</div>`;
-      } catch (err) {
-        treeEl.innerHTML = `<p style="color:#d00">Tree failed: ${escapeHtml(String(err))}</p>`;
-      }
-    }
-    document.getElementById('btn-a2a-refresh')?.addEventListener('click', loadA2A);
-    document.getElementById('btn-a2a-tree')?.addEventListener('click', () => {
-      const id = document.getElementById('a2a-tree-id').value;
-      if (id) loadA2ATree(id);
-    });
-    // ─── v1.3 — Cost & Health tab ────────────────────────────────────
-    let costChart = null;
-    let costChartJsLoaded = null;
-    function ensureChartJs() {
-      if (window.Chart) return Promise.resolve();
-      if (costChartJsLoaded) return costChartJsLoaded;
-      // v1.2.3 — try the vendored copy first (no CDN dependency, works in
-      // CN where jsdelivr is often blocked). Fall back to jsdelivr if the
-      // vendor file is missing (e.g. dev hot-reload before build copied it).
-      const tryLoad = (src) => new Promise((resolve, reject) => {
-        const s = document.createElement('script');
-        s.src = src;
-        s.crossOrigin = 'anonymous';
-        s.onload = () => resolve();
-        s.onerror = () => reject(new Error('failed: ' + src));
-        document.head.appendChild(s);
-      });
-      costChartJsLoaded = tryLoad('/vendor/chart.umd.min.js')
-        .catch(() => tryLoad('https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js'));
-      return costChartJsLoaded;
-    }
-    function fmtCost(n) { return '$' + (Math.round(n * 10000) / 10000).toFixed(4); }
-    function fmtMs(n) {
-      if (n < 1000) return n + 'ms';
-      if (n < 60000) return (n / 1000).toFixed(1) + 's';
-      return (n / 60000).toFixed(1) + 'm';
-    }
-    function fmtPct(n) { return (n * 100).toFixed(2) + '%'; }
-    async function loadCost() {
-      const days = parseInt(document.getElementById('cost-days').value, 10) || 7;
-      try {
-        const data = await api('/api/health/summary?days=' + days);
-        renderCostKpis(data);
-        renderCostRange(data);
-        let chartLoadErr = null;
-        await ensureChartJs().catch((e) => { chartLoadErr = e; });
-        if (chartLoadErr) {
-          // Visible hint when both the vendored copy AND CDN fail
-          // (cached browser, blocked CDN, etc). Without this, the chart
-          // area is empty + silent.
-          const c = document.getElementById('cost-trend');
-          if (c && c.parentElement) {
-            c.parentElement.innerHTML = `<p style="color:#d00;font-size:12px">
-              chart.js 加载失败：${escapeHtmlSafe(String(chartLoadErr.message || chartLoadErr))}
-              （检查 /vendor/chart.umd.min.js 是否存在，或浏览器是否屏蔽了 jsdelivr）
-            </p>`;
-          }
-        } else {
-          renderCostTrend(data);
-        }
-      } catch (err) {
-        document.getElementById('cost-kpi').innerHTML = '<div class="error">加载失败: ' + (err.message || err) + '</div>';
-      }
-      // Load three top-N tables in parallel.
-      for (const dim of ['user', 'agent', 'platform']) {
-        const sel = document.querySelector('.cost-topn-by[data-target="' + dim + '"]');
-        loadTopN(dim, sel ? sel.value : 'calls');
-      }
-    }
-    function renderCostKpis(data) {
-      const t = data.totals;
-      const card = (label, value, sub) => `
-        <div style="border:1px solid var(--border,#d0d7de);border-radius:8px;padding:12px">
-          <div style="font-size:11px;color:var(--muted,#656d76);text-transform:uppercase;letter-spacing:.5px">${label}</div>
-          <div style="font-size:22px;font-weight:600;margin-top:4px">${value}</div>
-          ${sub ? '<div style="font-size:11px;color:var(--muted,#656d76);margin-top:2px">' + sub + '</div>' : ''}
-        </div>`;
-      document.getElementById('cost-kpi').innerHTML = [
-        card('调用数', t.calls.toLocaleString()),
-        card('成本', fmtCost(t.cost), '近 ' + data.days + ' 天'),
-        card('错误率', fmtPct(t.errorRate), t.errors + ' / ' + t.calls),
-        card('平均耗时', fmtMs(t.avgLatencyMs), 'p95: ' + fmtMs(t.p95LatencyMs)),
-      ].join('');
-    }
-    function renderCostRange(data) {
-      document.getElementById('cost-range').textContent = data.since + ' → ' + data.until;
-    }
-    function renderCostTrend(data) {
-      const canvas = document.getElementById('cost-trend');
-      if (!canvas || !window.Chart) return;
-      const metric = (document.querySelector('input[name="cost-trend-metric"]:checked')?.value) || 'calls';
-      const labels = data.byDay.map(d => d.date);
-      const values = data.byDay.map(d => d[metric]);
-      const labelMap = { calls: '调用数', cost: '成本($)', errors: '错误数', avgLatencyMs: '平均耗时(ms)' };
-      if (costChart) costChart.destroy();
-      costChart = new Chart(canvas, {
-        type: 'line',
-        data: {
-          labels,
-          datasets: [{
-            label: labelMap[metric] || metric,
-            data: values,
-            borderColor: '#2563eb',
-            backgroundColor: 'rgba(37,99,235,0.10)',
-            tension: 0.25,
-            fill: true,
-          }],
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          plugins: { legend: { display: false } },
-          scales: { y: { beginAtZero: true } },
-        },
-      });
-    }
-    async function loadTopN(dim, by) {
-      const wrap = document.getElementById('cost-topn-' + dim);
-      if (!wrap) return;
-      wrap.innerHTML = '<div class="muted">加载中…</div>';
-      const days = parseInt(document.getElementById('cost-days').value, 10) || 7;
-      try {
-        const data = await api('/api/health/topn?dim=' + dim + '&by=' + by + '&days=' + days + '&limit=10');
-        if (!data.items.length) { wrap.innerHTML = '<div class="muted">（无数据）</div>'; return; }
-        wrap.innerHTML = '<table style="width:100%;font-size:12px;border-collapse:collapse">' +
-          '<thead><tr style="border-bottom:1px solid var(--border,#d0d7de)">' +
-          '<th style="text-align:left;padding:4px 6px;font-weight:600">key</th>' +
-          '<th style="text-align:right;padding:4px 6px">calls</th>' +
-          '<th style="text-align:right;padding:4px 6px">cost</th>' +
-          '<th style="text-align:right;padding:4px 6px">err</th>' +
-          '<th style="text-align:right;padding:4px 6px">avg ms</th>' +
-          '</tr></thead><tbody>' +
-          data.items.map(it => `<tr style="border-bottom:1px solid var(--border,#d0d7de)">
-            <td style="padding:4px 6px;word-break:break-all;font-family:ui-monospace,monospace">${escapeHtmlSafe(it.key).slice(0, 50)}</td>
-            <td style="text-align:right;padding:4px 6px">${it.calls}</td>
-            <td style="text-align:right;padding:4px 6px">${fmtCost(it.cost)}</td>
-            <td style="text-align:right;padding:4px 6px">${it.errors}</td>
-            <td style="text-align:right;padding:4px 6px">${fmtMs(it.avgLatencyMs)}</td>
-          </tr>`).join('') + '</tbody></table>';
-      } catch (err) {
-        wrap.innerHTML = '<div class="error">加载失败: ' + (err.message || err) + '</div>';
-      }
-    }
-    function escapeHtmlSafe(s) {
-      return String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-    }
-    document.getElementById('btn-cost-refresh')?.addEventListener('click', loadCost);
-    document.getElementById('cost-days')?.addEventListener('change', loadCost);
-    document.querySelectorAll('input[name="cost-trend-metric"]').forEach(el => {
-      el.addEventListener('change', () => loadCost());
-    });
-    document.querySelectorAll('.cost-topn-by').forEach(el => {
-      el.addEventListener('change', () => loadTopN(el.dataset.target, el.value));
-    });
-    // ─── v1.5 — Memory admin tab ──────────────────────────────────────
-    let memCurrentUser = '';
-    let memFactsPage = { offset: 0, limit: 20, total: 0 };
-    function fmtMemDate(unix) {
-      if (!unix) return '—';
-      return new Date(unix * 1000).toISOString().slice(0, 19).replace('T', ' ');
-    }
-    // ─── v1.6 vector backend UI ────────────────────────────────────
-    let memVecPollTimer = null;
-    function showVecBackendCfg(backend) {
-      const local = document.getElementById('mem-vec-local-cfg');
-      const openai = document.getElementById('mem-vec-openai-cfg');
-      if (local) local.style.display = backend === 'local' ? 'block' : 'none';
-      if (openai) openai.style.display = backend === 'openai' ? 'block' : 'none';
-    }
-    async function loadMemVecStatus() {
-      try {
-        const data = await api('/api/memory/vector/status' + (memCurrentUser ? '?user_key=' + encodeURIComponent(memCurrentUser) : ''));
-        const s = data.status || {};
-        const cov = data.coverage || { total: 0, withEmbedding: 0 };
-        const badge = document.getElementById('mem-vec-status-badge');
-        if (badge) {
-          if (s.ready) {
-            badge.textContent = `✓ ${s.backend} · dim ${s.dims} · 索引 ${cov.withEmbedding}/${cov.total}`;
-            badge.style.color = '#16a34a';
-          } else if (s.downloaded) {
-            // Model files on disk but pipeline not loaded yet — happens
-            // after a service restart while the auto-warm finishes.
-            badge.textContent = `↻ ${s.backend} · 模型已下载，加载中…`;
-            badge.style.color = '#d97706';
-          } else {
-            badge.textContent = `○ ${s.backend} · 未就绪${s.lastError ? ' (' + s.lastError.slice(0, 60) + ')' : ''}`;
-            badge.style.color = 'var(--muted, #656d76)';
-          }
-        }
-        const detail = document.getElementById('mem-vec-status-detail');
-        if (detail) {
-          const lines = [];
-          if (s.detail && s.detail.progress) {
-            const p = s.detail.progress;
-            if (p.phase === 'downloading') {
-              const pct = p.bytesTotal > 0 ? Math.round(p.bytesDone / p.bytesTotal * 100) : 0;
-              lines.push(`📥 下载中：${p.filesDone}/${p.filesTotal} 文件，${(p.bytesDone / 1024 / 1024).toFixed(1)} / ${(p.bytesTotal / 1024 / 1024).toFixed(1)} MB (${pct}%)`);
-            } else if (p.phase === 'ready') {
-              lines.push(`✓ 模型就绪（耗时 ${((p.finishedAt - p.startedAt) / 1000).toFixed(1)}s）`);
-            } else if (p.phase === 'failed') {
-              lines.push(`❌ 下载失败：${escapeHtmlSafe(p.error || '未知错误')}`);
-            }
-          }
-          if (data.jobs && data.jobs.length > 0) {
-            data.jobs.forEach(j => {
-              const elapsed = ((j.finishedAt || Date.now()) - j.startedAt) / 1000;
-              // Note: lines already contain escaped fragments — joining
-              // raw avoids the double-escape that mangled `<`/`&` chars
-              // in error messages.
-              lines.push(`[${escapeHtmlSafe(j.kind)}] ${escapeHtmlSafe(j.phase)} · ${elapsed.toFixed(1)}s · ${escapeHtmlSafe(j.message)}`);
-            });
-          }
-          detail.innerHTML = lines.join('<br>') || '';
-        }
-        // Update download button if a job is in flight.
-        const dlBtn = document.getElementById('btn-mem-vec-download');
-        if (dlBtn) {
-          const hasDownloading = (data.jobs || []).some(j => j.kind === 'download' && j.phase === 'running');
-          dlBtn.disabled = hasDownloading || s.ready || s.downloaded;
-          if (s.ready) dlBtn.textContent = '✓ 已就绪';
-          else if (s.downloaded) dlBtn.textContent = '✓ 已下载（加载中）';
-          else if (hasDownloading) dlBtn.textContent = '⏳ 下载中…';
-          else dlBtn.textContent = '📥 下载模型（首次 5-10 min，建议 WiFi）';
-        }
-        return data;
-      } catch (err) {
-        const badge = document.getElementById('mem-vec-status-badge');
-        if (badge) badge.textContent = '状态加载失败: ' + (err.message || err);
-      }
-    }
-    function startMemVecPolling() {
-      stopMemVecPolling();
-      memVecPollTimer = setInterval(async () => {
-        const data = await loadMemVecStatus();
-        // P1-8: auto-stop once there's nothing to watch. Without this the
-        // 2 s poll keeps firing forever and floods the server log.
-        const s = (data && data.status) || {};
-        const running = ((data && data.jobs) || []).some(j => j.phase === 'running');
-        if (!running && s.ready) stopMemVecPolling();
-        if (!running && !s.ready && s.backend === 'off') stopMemVecPolling();
-      }, 2000);
-    }
-    function stopMemVecPolling() {
-      if (memVecPollTimer) { clearInterval(memVecPollTimer); memVecPollTimer = null; }
-    }
-    async function checkMemoryEnabledThen(fn) {
-      try {
-        const data = await api('/api/env');
-        const env = data.env || {};
-        const raw = String(env.IMHUB_MEMORY_ENABLED || '').toLowerCase();
-        const enabled = raw === '1' || raw === 'true' || raw === 'yes';
-        if (enabled) {
-          fn();
-          return;
-        }
-        // Render a disabled state in the vector card area so the user
-        // understands why nothing else loads.
-        const badge = document.getElementById('mem-vec-status-badge');
-        if (badge) {
-          badge.textContent = (T && T.vecMemoryDisabled) || '○ 记忆未启用（在 Settings → 自动化记忆开启）';
-          badge.style.color = 'var(--muted, #656d76)';
-        }
-      } catch { /* fall through silently */ }
-    }
-    async function loadMemVecConfig() {
-      try {
-        // P1-7: do NOT auto-reveal secrets on tab open. Load masked; user
-        // explicitly clicks 「🔓 显示」 to unmask the OpenAI key when they
-        // want to edit it.
-        const data = await api('/api/env');
-        const env = data.env || {};
-        const backend = (env['IMHUB_MEMORY_VECTOR_BACKEND'] || 'off').toLowerCase();
-        document.getElementById('mem-vec-backend').value = ['off', 'local', 'openai'].includes(backend) ? backend : 'off';
-        const lmPreset = document.getElementById('mem-vec-local-preset');
-        const lmInput = document.getElementById('mem-vec-local-model');
-        const presetVals = ['Xenova/bge-small-zh-v1.5','Xenova/bge-base-zh-v1.5','Xenova/bge-large-zh-v1.5'];
-        const customLm = (env['IMHUB_MEMORY_VECTOR_LOCAL_MODEL'] || '').trim();
-        if (customLm && presetVals.includes(customLm)) {
-          lmPreset.value = customLm;
-          lmInput.style.display = 'none';
-          lmInput.value = '';
-        } else if (customLm) {
-          lmPreset.value = '__custom__';
-          lmInput.value = customLm;
-          lmInput.style.display = 'block';
-        } else {
-          lmPreset.value = 'Xenova/bge-base-zh-v1.5';
-          lmInput.style.display = 'none';
-          lmInput.value = '';
-        }
-        document.getElementById('mem-vec-openai-url').value = env['IMHUB_MEMORY_VECTOR_OPENAI_BASE_URL'] || '';
-        document.getElementById('mem-vec-openai-model').value = env['IMHUB_MEMORY_VECTOR_OPENAI_MODEL'] || '';
-        document.getElementById('mem-vec-openai-key').value = env['IMHUB_MEMORY_VECTOR_OPENAI_API_KEY'] || '';
-        showVecBackendCfg(document.getElementById('mem-vec-backend').value);
-      } catch { /* ignore */ }
-    }
-    document.getElementById('mem-vec-backend')?.addEventListener('change', (e) => {
-      showVecBackendCfg(e.target.value);
-    });
-    document.getElementById('mem-vec-local-preset')?.addEventListener('change', (e) => {
-      const lm = document.getElementById('mem-vec-local-model');
-      if (e.target.value === '__custom__') {
-        lm.style.display = 'block';
-        lm.focus();
-      } else {
-        lm.style.display = 'none';
-      }
-    });
-    document.getElementById('btn-mem-vec-openai-reveal')?.addEventListener('click', async () => {
-      const input = document.getElementById('mem-vec-openai-key');
-      try {
-        const data = await api('/api/env?reveal=1');
-        input.value = (data.env && data.env['IMHUB_MEMORY_VECTOR_OPENAI_API_KEY']) || '';
-        input.readOnly = false;
-        input.style.background = '';
-        input.style.color = '';
-        input.type = 'text';
-        input.focus();
-        const btn = document.getElementById('btn-mem-vec-openai-reveal');
-        if (btn) btn.style.display = 'none';
-      } catch (err) {
-        alert('显示失败: ' + (err.message || err));
-      }
-    });
-    // True when the OpenAI key field holds the actual key (user clicked
-    // 「显示」). False when it's still the masked default — save handler
-    // omits the field in that case so the server doesn't overwrite.
-    function openAiKeyWasRevealed() {
-      const input = document.getElementById('mem-vec-openai-key');
-      return input && !input.readOnly;
-    }
-    function resolveLocalModel() {
-      const preset = document.getElementById('mem-vec-local-preset').value;
-      if (preset === '__custom__') {
-        return document.getElementById('mem-vec-local-model').value.trim() || null;
-      }
-      if (preset === 'Xenova/bge-base-zh-v1.5') return null; // default
-      return preset;
-    }
-    document.getElementById('btn-mem-vec-save')?.addEventListener('click', async () => {
-      const backend = document.getElementById('mem-vec-backend').value;
-      const updates = {
-        IMHUB_MEMORY_VECTOR_BACKEND: backend,
-        IMHUB_MEMORY_VECTOR_LOCAL_MODEL: resolveLocalModel(),
-        IMHUB_MEMORY_VECTOR_OPENAI_BASE_URL: document.getElementById('mem-vec-openai-url').value.trim() || null,
-        IMHUB_MEMORY_VECTOR_OPENAI_MODEL: document.getElementById('mem-vec-openai-model').value.trim() || null,
-      };
-      // Only send the API key when the user actually revealed + edited it.
-      // Otherwise the input still holds the masked value; the server-side
-      // guard would skip it anyway, but omitting client-side avoids the
-      // round-trip and makes intent explicit.
-      if (openAiKeyWasRevealed()) {
-        updates.IMHUB_MEMORY_VECTOR_OPENAI_API_KEY =
-          document.getElementById('mem-vec-openai-key').value.trim() || null;
-      }
-      const detail = document.getElementById('mem-vec-status-detail');
-      try {
-        await api('/api/env', { method: 'PUT', body: JSON.stringify({ updates }) });
-        if (detail) detail.innerHTML = '✓ 已保存。切换后端后注意：embedding 模型变了，旧的向量索引不可比，建议「清空向量索引」+「回填全部」。';
-        await loadMemVecStatus();
-      } catch (err) {
-        if (detail) detail.innerHTML = '保存失败: ' + escapeHtmlSafe(err.message || String(err));
-      }
-    });
-    // Auto-save the current dropdown selection to env before the action,
-    // so users who pick "local" / "openai" and immediately click download
-    // / test don't get a "backend is off" 400 from the previous saved state.
-    async function ensureVecBackendApplied(requiredBackend) {
-      const cur = document.getElementById('mem-vec-backend').value;
-      if (cur !== requiredBackend) {
-        document.getElementById('mem-vec-backend').value = requiredBackend;
-        showVecBackendCfg(requiredBackend);
-      }
-      const updates = {
-        IMHUB_MEMORY_VECTOR_BACKEND: requiredBackend,
-        IMHUB_MEMORY_VECTOR_LOCAL_MODEL: resolveLocalModel(),
-        IMHUB_MEMORY_VECTOR_OPENAI_BASE_URL: document.getElementById('mem-vec-openai-url').value.trim() || null,
-        IMHUB_MEMORY_VECTOR_OPENAI_MODEL: document.getElementById('mem-vec-openai-model').value.trim() || null,
-      };
-      if (openAiKeyWasRevealed()) {
-        updates.IMHUB_MEMORY_VECTOR_OPENAI_API_KEY =
-          document.getElementById('mem-vec-openai-key').value.trim() || null;
-      }
-      await api('/api/env', { method: 'PUT', body: JSON.stringify({ updates }) });
-    }
-    document.getElementById('btn-mem-vec-download')?.addEventListener('click', async () => {
-      try {
-        await ensureVecBackendApplied('local');
-        await api('/api/memory/vector/download', { method: 'POST' });
-        startMemVecPolling();
-      } catch (err) {
-        alert('启动下载失败: ' + (err.message || err));
-      }
-    });
-    document.getElementById('btn-mem-vec-test')?.addEventListener('click', async () => {
-      const resultEl = document.getElementById('mem-vec-test-result');
-      if (resultEl) resultEl.textContent = '⏳ 测试中…';
-      try {
-        await ensureVecBackendApplied('openai');
-        const r = await api('/api/memory/vector/test', { method: 'POST' });
-        if (r.ok) {
-          if (resultEl) resultEl.textContent = `✓ 通过 · dim ${r.dims} · ${r.latencyMs}ms`;
-        } else {
-          if (resultEl) resultEl.textContent = '❌ ' + (r.error || '未知错误');
-        }
-      } catch (err) {
-        if (resultEl) resultEl.textContent = '❌ ' + (err.message || err);
-      }
-    });
-    document.getElementById('btn-mem-vec-backfill')?.addEventListener('click', async () => {
-      if (!confirm('回填所有未索引事实的 embedding？（按当前后端模型）')) return;
-      try {
-        await api('/api/memory/vector/backfill' + (memCurrentUser ? '?user_key=' + encodeURIComponent(memCurrentUser) : ''), {
-          method: 'POST',
-          body: JSON.stringify({}),
-        });
-        startMemVecPolling();
-      } catch (err) {
-        alert('启动回填失败: ' + (err.message || err));
-      }
-    });
-    document.getElementById('btn-mem-vec-clear')?.addEventListener('click', async () => {
-      if (!confirm('清空所有 embedding？（不会删 fact 本身；下次回填可重建）')) return;
-      try {
-        const r = await api('/api/memory/vector/clear' + (memCurrentUser ? '?user_key=' + encodeURIComponent(memCurrentUser) : ''), {
-          method: 'POST',
-        });
-        alert(`已清空 ${r.cleared} 条 embedding`);
-        await loadMemVecStatus();
-      } catch (err) {
-        alert('失败: ' + (err.message || err));
-      }
-    });
-    async function loadMemoryUsers() {
-      const select = document.getElementById('mem-user-select');
-      if (!select) return;
-      try {
-        const data = await api('/api/memory/users');
-        const prev = memCurrentUser || select.value;
-        select.innerHTML = '<option value="">— 选择用户 —</option>' +
-          data.users.map(u =>
-            `<option value="${escapeHtmlSafe(u.user_key)}">${escapeHtmlSafe(u.user_key)} · ${u.fact_count} 条事实 · ${u.has_persona ? '✓ 记忆画像' : '无记忆画像'}</option>`
-          ).join('');
-        if (prev && data.users.some(u => u.user_key === prev)) {
-          select.value = prev;
-          memCurrentUser = prev;
-          loadMemoryUserDetail();
-        }
-      } catch (err) {
-        select.innerHTML = '<option value="">加载失败: ' + (err.message || err) + '</option>';
-      }
-    }
-    async function loadMemoryUserDetail() {
-      if (!memCurrentUser) return;
-      // Update export link
-      const exportLink = document.getElementById('btn-mem-export');
-      if (exportLink) {
-        exportLink.href = '/api/memory/export?user_key=' + encodeURIComponent(memCurrentUser);
-        exportLink.style.display = 'inline';
-      }
-      // Persona
-      const personaText = document.getElementById('mem-persona-text');
-      const personaMeta = document.getElementById('mem-persona-meta');
-      try {
-        const p = await api('/api/memory/persona?user_key=' + encodeURIComponent(memCurrentUser));
-        if (personaText) personaText.value = p.summary || '';
-        if (personaMeta) personaMeta.textContent = 'updated ' + fmtMemDate(p.updated_at);
-      } catch (err) {
-        if (err.status === 404) {
-          if (personaText) personaText.value = '';
-          if (personaMeta) personaMeta.textContent = '（暂无记忆画像）';
-        } else {
-          if (personaMeta) personaMeta.textContent = '加载失败: ' + (err.message || err);
-        }
-      }
-      // Facts
-      memFactsPage = { offset: 0, limit: 20, total: 0 };
-      await loadMemoryFacts();
-    }
-    async function loadMemoryFacts() {
-      if (!memCurrentUser) return;
-      const listEl = document.getElementById('mem-facts-list');
-      const totalEl = document.getElementById('mem-facts-total');
-      const pageLabel = document.getElementById('mem-facts-pagelabel');
-      if (listEl) listEl.innerHTML = '<span class="muted">加载中…</span>';
-      const query = document.getElementById('mem-facts-query')?.value?.trim() || '';
-      const category = document.getElementById('mem-facts-category')?.value || '';
-      const qs = new URLSearchParams({
-        user_key: memCurrentUser,
-        limit: String(memFactsPage.limit),
-        offset: String(memFactsPage.offset),
-      });
-      if (query) qs.append('query', query);
-      if (category) qs.append('category', category);
-      try {
-        const data = await api('/api/memory/facts?' + qs.toString());
-        memFactsPage.total = data.total;
-        if (totalEl) totalEl.textContent = `(共 ${data.total} 条)`;
-        if (pageLabel) {
-          const start = data.total === 0 ? 0 : data.offset + 1;
-          const end = Math.min(data.offset + data.limit, data.total);
-          pageLabel.textContent = `${start}-${end} / ${data.total}`;
-        }
-        if (data.facts.length === 0) {
-          listEl.innerHTML = '<div class="muted">（无匹配事实）</div>';
-          return;
-        }
-        listEl.innerHTML = '<table style="width:100%;font-size:12px;border-collapse:collapse">' +
-          '<thead><tr style="border-bottom:1px solid var(--border,#d0d7de)">' +
-          '<th style="text-align:left;padding:4px 6px;width:50px">id</th>' +
-          '<th style="text-align:left;padding:4px 6px">what</th>' +
-          '<th style="text-align:left;padding:4px 6px;width:90px">category</th>' +
-          '<th style="text-align:right;padding:4px 6px;width:60px">conf</th>' +
-          '<th style="text-align:left;padding:4px 6px;width:140px">created</th>' +
-          '<th style="text-align:center;padding:4px 6px;width:60px">删除</th>' +
-          '</tr></thead><tbody>' +
-          data.facts.map(f => `<tr style="border-bottom:1px solid var(--border,#d0d7de)" data-id="${f.id}">
-            <td style="padding:4px 6px;font-family:ui-monospace,monospace">${f.id}</td>
-            <td style="padding:4px 6px">${escapeHtmlSafe(f.what)}${f.who ? ' <span class="muted">(' + escapeHtmlSafe(f.who) + ')</span>' : ''}</td>
-            <td style="padding:4px 6px"><code>${escapeHtmlSafe(f.category)}</code></td>
-            <td style="text-align:right;padding:4px 6px">${(f.confidence * 100).toFixed(0)}%</td>
-            <td style="padding:4px 6px;font-size:11px">${escapeHtmlSafe(String(f.created_at).replace('T', ' ').slice(0, 19))}</td>
-            <td style="text-align:center;padding:4px 6px"><button type="button" class="btn-mem-del" data-id="${f.id}" style="font-size:11px;padding:2px 6px">🗑</button></td>
-          </tr>`).join('') +
-          '</tbody></table>';
-        // Wire delete buttons.
-        listEl.querySelectorAll('.btn-mem-del').forEach(b => {
-          b.addEventListener('click', async () => {
-            const id = parseInt(b.dataset.id, 10);
-            if (!confirm(`删除事实 #${id}？`)) return;
-            try {
-              await api('/api/memory/facts/' + id + '?user_key=' + encodeURIComponent(memCurrentUser), { method: 'DELETE' });
-              await loadMemoryFacts();
-            } catch (err) {
-              alert('删除失败: ' + (err.message || err));
-            }
-          });
-        });
-      } catch (err) {
-        listEl.innerHTML = '<div class="error">加载失败: ' + (err.message || err) + '</div>';
-      }
-    }
-    document.getElementById('mem-user-select')?.addEventListener('change', (e) => {
-      memCurrentUser = e.target.value;
-      if (memCurrentUser) loadMemoryUserDetail();
-    });
-    document.getElementById('btn-mem-refresh-users')?.addEventListener('click', loadMemoryUsers);
-    document.getElementById('btn-mem-facts-refresh')?.addEventListener('click', () => {
-      memFactsPage.offset = 0;
-      loadMemoryFacts();
-    });
-    document.getElementById('mem-facts-query')?.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter') { memFactsPage.offset = 0; loadMemoryFacts(); }
-    });
-    document.getElementById('mem-facts-category')?.addEventListener('change', () => {
-      memFactsPage.offset = 0;
-      loadMemoryFacts();
-    });
-    document.getElementById('btn-mem-facts-prev')?.addEventListener('click', () => {
-      if (memFactsPage.offset > 0) {
-        memFactsPage.offset = Math.max(0, memFactsPage.offset - memFactsPage.limit);
-        loadMemoryFacts();
-      }
-    });
-    document.getElementById('btn-mem-facts-next')?.addEventListener('click', () => {
-      if (memFactsPage.offset + memFactsPage.limit < memFactsPage.total) {
-        memFactsPage.offset += memFactsPage.limit;
-        loadMemoryFacts();
-      }
-    });
-    document.getElementById('btn-mem-persona-save')?.addEventListener('click', async () => {
-      if (!memCurrentUser) return;
-      const summary = document.getElementById('mem-persona-text')?.value?.trim() || '';
-      if (!summary) { alert('记忆画像内容不能为空（要删除请用"删除记忆画像"按钮）'); return; }
-      const status = document.getElementById('mem-persona-status');
-      try {
-        await api('/api/memory/persona?user_key=' + encodeURIComponent(memCurrentUser), {
-          method: 'PUT',
-          body: JSON.stringify({ summary }),
-        });
-        if (status) status.textContent = '✓ 已保存';
-        await loadMemoryUserDetail();
-      } catch (err) {
-        if (status) status.textContent = '保存失败: ' + (err.message || err);
-      }
-    });
-    document.getElementById('btn-mem-persona-delete')?.addEventListener('click', async () => {
-      if (!memCurrentUser) return;
-      if (!confirm('删除此用户的记忆画像？（事实保留，下次 consolidation 会重新生成）')) return;
-      const status = document.getElementById('mem-persona-status');
-      try {
-        await api('/api/memory/persona?user_key=' + encodeURIComponent(memCurrentUser), { method: 'DELETE' });
-        if (status) status.textContent = '✓ 已删除';
-        await loadMemoryUserDetail();
-      } catch (err) {
-        if (status) status.textContent = '删除失败: ' + (err.message || err);
-      }
-    });
-    document.getElementById('btn-mem-persona-consolidate')?.addEventListener('click', async () => {
-      const status = document.getElementById('mem-persona-status');
-      const btn = document.getElementById('btn-mem-persona-consolidate');
-      if (btn) btn.disabled = true;
-      if (status) status.textContent = '⏳ 已提交后台任务（每用户 1 次 LLM 调用，10–60 秒）…';
-      let pollTimer = null;
-      const stopPoll = () => { if (pollTimer) { clearInterval(pollTimer); pollTimer = null; } };
-      try {
-        // Async kickoff: server returns 202 + jobId immediately, then the
-        // LLM call runs in the background. Polling avoids cloudflare /
-        // nginx / browser fetch timeouts on long-held POSTs.
-        const r = await api('/api/memory/consolidate', { method: 'POST' });
-        const targetJobId = r.jobId;
-        if (!targetJobId) throw new Error('server did not return jobId');
-        const startedAt = Date.now();
-        pollTimer = setInterval(async () => {
-          try {
-            const s = await api('/api/memory/consolidate/status');
-            const job = (s.jobs || []).find(j => j.id === targetJobId);
-            if (!job) return;
-            const elapsed = ((Date.now() - startedAt) / 1000).toFixed(0);
-            if (job.phase === 'running') {
-              if (status) status.textContent = `⏳ 重建中 (${elapsed}s)…`;
-              return;
-            }
-            stopPoll();
-            if (btn) btn.disabled = false;
-            if (job.phase === 'done') {
-              const u = (job.result && job.result.updated) || 0;
-              const n = (job.result && job.result.users) || 0;
-              if (status) status.textContent = `✓ 完成 (${elapsed}s) · 处理 ${n} 个用户、更新 ${u} 个画像`;
-              await loadMemoryUserDetail();
-            } else {
-              const e = (job.result && job.result.error) || 'unknown error';
-              if (status) status.textContent = '失败: ' + e;
-            }
-          } catch (pollErr) {
-            // Poll failures are non-fatal; UI keeps trying. Stop after 5 min.
-            if (Date.now() - startedAt > 300_000) {
-              stopPoll();
-              if (btn) btn.disabled = false;
-              if (status) status.textContent = '轮询超时（>5min），请刷新查看实际结果';
-            }
-          }
-        }, 2000);
-      } catch (err) {
-        if (status) status.textContent = '失败: ' + (err.message || err);
-        if (btn) btn.disabled = false;
-        stopPoll();
-      }
-    });
-    document.getElementById('btn-mem-facts-clear-lowconf')?.addEventListener('click', async () => {
-      if (!memCurrentUser) return;
-      if (!confirm('删除 confidence ≤ 40% 的所有事实？')) return;
-      const status = document.getElementById('mem-facts-status');
-      try {
-        const r = await api('/api/memory/facts?user_key=' + encodeURIComponent(memCurrentUser), {
-          method: 'DELETE',
-          body: JSON.stringify({ max_confidence: 0.4 }),
-        });
-        if (status) status.textContent = `✓ 删除了 ${r.deleted} 条低置信度事实`;
-        await loadMemoryFacts();
-      } catch (err) {
-        if (status) status.textContent = '失败: ' + (err.message || err);
-      }
-    });
-    document.getElementById('btn-mem-facts-clear-all')?.addEventListener('click', async () => {
-      if (!memCurrentUser) return;
-      if (!confirm('⚠️ 真的要清空此用户的所有事实吗？此操作不可撤销。')) return;
-      if (!confirm('再次确认：所有事实将被永久删除（persona 不动）')) return;
-      const status = document.getElementById('mem-facts-status');
-      try {
-        const r = await api('/api/memory/facts?user_key=' + encodeURIComponent(memCurrentUser), {
-          method: 'DELETE',
-          body: JSON.stringify({ confirm_clear: true }),
-        });
-        if (status) status.textContent = `✓ 清空了 ${r.deleted} 条事实`;
-        await loadMemoryFacts();
-      } catch (err) {
-        if (status) status.textContent = '失败: ' + (err.message || err);
-      }
-    });
-    // ============================================
-    // v1.2.3 — Skills tab
-    // ============================================
-    let skillsCache = null;  // {total, byCategory, skills}
-    async function loadSkills() {
-      const listEl = document.getElementById('skills-list');
-      if (listEl) listEl.innerHTML = '<p class="muted">' + (T.loading || 'Loading…') + '</p>';
-      try {
-        const data = await api('/api/skills');
-        skillsCache = data;
-        renderSkillsCatFilter(data);
-        renderSkills();
-        const stats = document.getElementById('skills-stats');
-        if (stats) {
-          const cats = Object.keys(data.byCategory || {}).length;
-          stats.textContent = `· ${data.total} skills · ${cats} categories`;
-        }
-      } catch (err) {
-        if (listEl) listEl.innerHTML = '<p style="color:#d00">' + escapeHtmlSafe(String(err.message || err)) + '</p>';
-      }
-      // Kick off remote hot panel in parallel — fire-and-forget; its own
-      // error rendering is in loadSkillsRemote.
-      loadSkillsRemote();
-    }
-    function renderSkillsCatFilter(data) {
-      const sel = document.getElementById('skills-cat-filter');
-      if (!sel) return;
-      const prev = sel.value;
-      // Keep first option (all), append discovered categories
-      const allOpt = sel.options[0];
-      sel.innerHTML = '';
-      sel.appendChild(allOpt);
-      const cats = Object.keys(data.byCategory || {}).sort();
-      for (const c of cats) {
-        const o = document.createElement('option');
-        o.value = c;
-        o.textContent = `${c} (${data.byCategory[c]})`;
-        sel.appendChild(o);
-      }
-      sel.value = prev;
-    }
-    function renderSkills() {
-      if (!skillsCache) return;
-      const listEl = document.getElementById('skills-list');
-      if (!listEl) return;
-      const q = (document.getElementById('skills-search')?.value || '').toLowerCase().trim();
-      const cat = document.getElementById('skills-cat-filter')?.value || '';
-      const filtered = skillsCache.skills.filter(s => {
-        if (cat && s.category !== cat) return false;
-        if (!q) return true;
-        return s.slug.toLowerCase().includes(q)
-            || (s.name || '').toLowerCase().includes(q)
-            || (s.description || '').toLowerCase().includes(q);
-      });
-      if (filtered.length === 0) {
-        listEl.innerHTML = '<p class="muted">(no skills match)</p>';
-        return;
-      }
-      // Group by category for clearer scan
-      const byCat = {};
-      for (const s of filtered) {
-        if (!byCat[s.category]) byCat[s.category] = [];
-        byCat[s.category].push(s);
-      }
-      const html = [];
-      for (const cat of Object.keys(byCat).sort()) {
-        html.push(`<h3 style="margin:18px 0 8px;font-size:14px;color:var(--muted,#656d76)">${escapeHtmlSafe(cat)} <span style="font-weight:400">(${byCat[cat].length})</span></h3>`);
-        html.push('<table class="data-table"><tbody>');
-        for (const s of byCat[cat]) {
-          const agentBadge = s.agents.map(a => `<span style="display:inline-block;padding:1px 6px;margin-right:4px;border-radius:3px;background:${a==='claude'?'#fde68a':'#bfdbfe'};font-size:11px;color:#1f2328">${a}</span>`).join('');
-          const descPreview = (s.description || '').slice(0, 140) + ((s.description || '').length > 140 ? '…' : '');
-          html.push(`<tr style="cursor:pointer" data-skill="${escapeHtmlSafe(s.slug)}">
-            <td style="width:240px;vertical-align:top"><code>${escapeHtmlSafe(s.slug)}</code></td>
-            <td style="width:120px;vertical-align:top">${agentBadge}</td>
-            <td style="vertical-align:top;color:var(--muted,#656d76)">${escapeHtmlSafe(descPreview)}</td>
-          </tr>`);
-        }
-        html.push('</tbody></table>');
-      }
-      listEl.innerHTML = html.join('');
-      listEl.querySelectorAll('[data-skill]').forEach(tr => {
-        tr.addEventListener('click', () => openSkillModal(tr.getAttribute('data-skill')));
-      });
-    }
-    async function openSkillModal(slug) {
-      const m = document.getElementById('modal');
-      const bg = document.getElementById('modal-bg');
-      m.innerHTML = `<p class="muted">Loading ${escapeHtmlSafe(slug)}…</p>`;
-      bg.classList.add('show');
-      try {
-        const data = await api('/api/skills/' + encodeURIComponent(slug));
-        // Render the SKILL.md content. Strip the frontmatter block, then
-        // run through marked() if available, otherwise plain <pre>.
-        let body = data.content || '';
-        if (body.startsWith('---')) {
-          const end = body.indexOf('\n---', 3);
-          if (end >= 0) body = body.slice(end + 4).trimStart();
-        }
-        const rendered = (window.marked && typeof marked.parse === 'function')
-          ? marked.parse(body)
-          : `<pre style="white-space:pre-wrap;font-size:12px">${escapeHtmlSafe(body)}</pre>`;
-        const agentBadge = data.agents.map(a => `<span style="display:inline-block;padding:1px 6px;margin-right:4px;border-radius:3px;background:${a==='claude'?'#fde68a':'#bfdbfe'};font-size:11px;color:#1f2328">${a}</span>`).join('');
-        m.innerHTML = `
-          <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:8px">
-            <h2 style="margin:0"><code>${escapeHtmlSafe(data.slug)}</code></h2>
-            <button type="button" class="btn" onclick="document.getElementById('modal-bg').classList.remove('show')">${T.close || 'Close'}</button>
-          </div>
-          <p class="muted" style="font-size:12px;margin:0 0 8px">
-            ${agentBadge} · <strong>${escapeHtmlSafe(data.category)}</strong>
-            · <code style="font-size:11px">${escapeHtmlSafe(data.path)}</code>
-          </p>
-          <p style="margin:0 0 16px"><strong>${escapeHtmlSafe(data.name)}</strong> — ${escapeHtmlSafe(data.description)}</p>
-          <div class="markdown-body" style="border-top:1px solid var(--border,#d0d7de);padding-top:12px;max-height:60vh;overflow-y:auto">${rendered}</div>
-        `;
-      } catch (err) {
-        m.innerHTML = `<p style="color:#d00">${escapeHtmlSafe(String(err.message || err))}</p>
-          <button type="button" class="btn" onclick="document.getElementById('modal-bg').classList.remove('show')">${T.close || 'Close'}</button>`;
-      }
-    }
-    document.getElementById('skills-search')?.addEventListener('input', renderSkills);
-    document.getElementById('skills-cat-filter')?.addEventListener('change', renderSkills);
-    document.getElementById('btn-skills-refresh')?.addEventListener('click', loadSkills);
-    // ─── skillhub.cn remote hot ───
-    async function loadSkillsRemote() {
-      const listEl = document.getElementById('skills-remote-list');
-      const metaEl = document.getElementById('skills-remote-meta');
-      if (listEl) listEl.innerHTML = '<p class="muted">' + (T.loading || 'Loading…') + '</p>';
-      try {
-        const data = await api('/api/skills/remote/hot');
-        const skills = (data && data.skills) || [];
-        if (metaEl) {
-          const cacheStr = data.cached
-            ? ` · ${T.skillsRemoteCached || '缓存命中'}`
-            : '';
-          const staleStr = data.stale ? ` · ⚠️ ${T.skillsRemoteStale || '上游不可达，用旧数据'}` : '';
-          metaEl.textContent = `(${skills.length}${cacheStr}${staleStr})`;
-        }
-        const html = ['<table class="data-table"><thead><tr>',
-          `<th style="width:200px">${T.skillsCol || 'slug'}</th>`,
-          `<th>${T.skillsName || '名称 / 描述'}</th>`,
-          `<th style="width:100px;text-align:right">${T.skillsStars || '⭐ stars'}</th>`,
-          `<th style="width:110px;text-align:right">${T.skillsInstalls || '⬇ installs'}</th>`,
-          '</tr></thead><tbody>'];
-        for (const s of skills) {
-          const desc = (s.description || '').replace(/\n+/g, ' ').slice(0, 150);
-          const more = (s.description || '').length > 150 ? '…' : '';
-          html.push(`<tr style="cursor:pointer" data-remote-slug="${escapeHtmlSafe(s.slug)}">
-            <td style="vertical-align:top"><code>${escapeHtmlSafe(s.slug)}</code><div class="muted" style="font-size:11px">${escapeHtmlSafe(s.category||'')}</div></td>
-            <td style="vertical-align:top">
-              <div><strong>${escapeHtmlSafe(s.name||s.slug)}</strong> <span class="muted" style="font-size:11px">v${escapeHtmlSafe(s.version||'?')}</span></div>
-              <div class="muted" style="font-size:12px;margin-top:2px">${escapeHtmlSafe(desc)}${more}</div>
-            </td>
-            <td style="vertical-align:top;text-align:right">${(s.stars||0).toLocaleString()}</td>
-            <td style="vertical-align:top;text-align:right">${(s.installs||0).toLocaleString()}</td>
-          </tr>`);
-        }
-        html.push('</tbody></table>');
-        if (skills.length === 0) listEl.innerHTML = '<p class="muted">(empty)</p>';
-        else listEl.innerHTML = html.join('');
-        listEl.querySelectorAll('[data-remote-slug]').forEach(tr => {
-          tr.addEventListener('click', () => openRemoteSkillModal(tr.getAttribute('data-remote-slug'), skills));
-        });
-      } catch (err) {
-        if (listEl) listEl.innerHTML = '<p style="color:#d00">' + escapeHtmlSafe(String(err.message || err)) + '</p>';
-      }
-    }
-    function openRemoteSkillModal(slug, skills) {
-      const s = skills.find(x => x.slug === slug);
-      if (!s) return;
-      const m = document.getElementById('modal');
-      const bg = document.getElementById('modal-bg');
-      const desc = escapeHtmlSafe(s.description || '');
-      // Three install paths the user can pick. We never auto-execute —
-      // operator's choice to copy + paste into shell or forward to agent.
-      const installCmds = [
-        { label: 'CLI (host)', cmd: 'skillhub install ' + s.slug },
-        { label: 'CLI dry-run', cmd: 'skillhub search ' + s.slug },
-        { label: 'IM 让 agent 安装', cmd: '请用 skillhub 安装 ' + s.slug + ' 技能' },
-      ];
-      const cmdRows = installCmds.map(c =>
-        `<div style="margin-top:6px"><span class="muted" style="font-size:11px;display:inline-block;width:130px">${escapeHtmlSafe(c.label)}</span>
-          <code style="font-size:12px">${escapeHtmlSafe(c.cmd)}</code>
-          <button type="button" class="btn" style="font-size:11px;padding:1px 6px;margin-left:6px" onclick="navigator.clipboard.writeText('${c.cmd.replace(/'/g,"\\'")}').then(()=>{this.textContent='✓'; setTimeout(()=>{this.textContent='复制';},1500);})">复制</button>
-        </div>`).join('');
-      m.innerHTML = `
-        <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:8px">
-          <h2 style="margin:0">${escapeHtmlSafe(s.name || s.slug)} <span class="muted" style="font-size:13px;font-weight:400">v${escapeHtmlSafe(s.version || '?')}</span></h2>
-          <button type="button" class="btn" onclick="document.getElementById('modal-bg').classList.remove('show')">${T.close || 'Close'}</button>
-        </div>
-        <p class="muted" style="font-size:12px;margin:0 0 10px">
-          <code>${escapeHtmlSafe(s.slug)}</code>
-          ${s.category ? ' · ' + escapeHtmlSafe(s.category) : ''}
-          · ⭐ ${(s.stars||0).toLocaleString()}
-          · ⬇ ${(s.installs||0).toLocaleString()} installs
-          · ${(s.downloads||0).toLocaleString()} downloads
-        </p>
-        <div style="white-space:pre-wrap;border-top:1px solid var(--border,#d0d7de);padding-top:10px;font-size:13px">${desc}</div>
-        <div style="margin-top:14px;padding-top:10px;border-top:1px solid var(--border,#d0d7de)">
-          <strong style="font-size:13px">${T.skillsHowInstall || '安装方式（任选一个；agim 不会自动跑）'}</strong>
-          ${cmdRows}
-          <p class="muted" style="font-size:11px;margin-top:8px">
-            ${T.skillsHostHint || '前两条要先在 host 上跑 skillhub install.sh。详见 docs/memory-and-vector.md 或 skillhub.cn。'}
-          </p>
-        </div>
-      `;
-      bg.classList.add('show');
-    }
-    document.getElementById('btn-skills-remote-refresh')?.addEventListener('click', loadSkillsRemote);
-    // Initial load
-    loadJobs();
-  </script>
-</body>
-</html>