agent-relay-server 0.6.1 → 0.7.1

package/public/dashboard.js

@@ -1,3032 +0,0 @@
-(() => {
-  const PREF_PREFIX = "ar-";
-  const HUMAN_AGENT_ID = "user";
-  const INBOX_OPERATOR_ID = HUMAN_AGENT_ID;
-  const DEFAULT_COMPOSE = { from: "", to: "", body: "", channel: "", subject: "", claimable: false };
-  const DEFAULT_INBOX_COMPOSE = { toMode: "agent", to: "", body: "", channel: "", subject: "", claimable: false };
-  const DEFAULT_PAIR_MESSAGE = { pairId: "", from: "", body: "", subject: "" };
-  const DEFAULT_PAIR_INVITE = { requesterId: "", targetId: "", objective: "" };
-  const DEFAULT_AGENT_SPAWN = { provider: "codex", approvalMode: "guarded", cwd: "", label: "" };
-  const CLOSED_TASK_STATUSES = new Set(["done", "failed", "canceled"]);
-  const WAITING_TASK_STATUSES = new Set(["open", "blocked"]);
-  const STATUS_SORT_ORDER = { online: 0, idle: 1, busy: 2, offline: 3 };
-  const LIVE_REFRESH_MS = 5_000;
-  const AGENT_TYPE_ICONS = {
-    codex: "ti-terminal-2",
-    claude: "claude-sol",
-    user: "ti-user",
-    system: "ti-server",
-    channel: "ti-messages",
-    agent: "ti-robot",
-  };
-  const AGENT_TYPE_TITLES = {
-    codex: "Codex agent",
-    claude: "Claude agent",
-    user: "Human operator",
-    system: "System",
-    channel: "Channel",
-    agent: "Agent",
-  };
-
-  function loadPref(key, fallback) {
-    try {
-      const value = localStorage.getItem(PREF_PREFIX + key);
-      return value !== null ? JSON.parse(value) : fallback;
-    } catch {
-      return fallback;
-    }
-  }
-
-  function savePref(key, value) {
-    localStorage.setItem(PREF_PREFIX + key, JSON.stringify(value));
-  }
-
-  function initialState() {
-    return {
-      view: loadPref("view", "overview"),
-
-      showOffline: loadPref("showOffline", false),
-      showBuiltIns: loadPref("showBuiltIns", false),
-      autoRefresh: loadPref("autoRefresh", true),
-      agentSort: loadPref("agentSort", "status"),
-      agentSortDir: loadPref("agentSortDir", "asc"),
-      agentPresetFilter: loadPref("agentPresetFilter", ""),
-
-      agents: [],
-      agentsById: {},
-      orchestrators: [],
-      pairs: [],
-      messages: [],
-      tasks: [],
-      integrations: [],
-      channels: [],
-      connectors: [],
-      taskEvents: [],
-      taskEventCache: {},
-      stats: {},
-      health: null,
-      now: Date.now(),
-      authToken: loadPref("authToken", ""),
-      inboxReadCursors: loadPref("inboxReadCursors", {}),
-      inboxArchivedThreads: loadPref("inboxArchivedThreads", {}),
-      inboxDrafts: loadPref("inboxDrafts", {}),
-      inboxSearch: "",
-      inboxSort: loadPref("inboxSort", "attention"),
-      inboxSortDir: loadPref("inboxSortDir", "desc"),
-      inboxShowArchived: loadPref("inboxShowArchived", false),
-      operatorActivity: loadPref("operatorActivity", []),
-      activityEvents: [],
-      activityFilter: loadPref("activityFilter", ""),
-
-      selectedAgent: "",
-      agentDetailOpen: false,
-      agentDetailId: "",
-      channelDetailOpen: false,
-      channelDetailId: "",
-      selectedInboxThread: "",
-      replyTo: null,
-      composeOpen: false,
-      agentSpawnOpen: false,
-      orchestratorSpawnOpen: false,
-      spawnOrchId: "",
-      spawnProvider: "claude",
-      spawnCwd: "",
-      spawnLabel: "",
-      spawnApproval: "guarded",
-      spawnPrompt: "",
-      spawnDirListing: null,
-      agentDirectoryBrowser: { open: false, loading: false, path: "", parent: "", home: "", cwd: "", entries: [], error: "" },
-      pairInviteOpen: false,
-      pairMessageOpen: false,
-      threadOpen: false,
-      threadMessages: [],
-      taskEventsOpen: false,
-      commandPaletteOpen: false,
-      commandQuery: "",
-      connected: false,
-      authNeeded: false,
-
-      compose: { ...DEFAULT_COMPOSE },
-      agentSpawn: { ...DEFAULT_AGENT_SPAWN },
-      pairInvite: { ...DEFAULT_PAIR_INVITE },
-      pairMessage: { ...DEFAULT_PAIR_MESSAGE },
-      inboxCompose: { ...DEFAULT_INBOX_COMPOSE },
-
-      confirmModal: { show: false, title: "", message: "", action: null },
-      renameModal: { show: false, agentId: "", label: "" },
-
-      channelFilter: "",
-      tagFilter: "",
-      agentStatusFilter: loadPref("agentStatusFilter", ""),
-      agentTagFilter: loadPref("agentTagFilter", ""),
-      pairStatusFilter: loadPref("pairStatusFilter", "open"),
-      taskStatusFilter: "",
-      taskSourceFilter: "",
-
-      chartInstances: {},
-      _es: null,
-      _clockTimer: null,
-      _refreshTimer: null,
-      _refreshInFlight: false,
-    };
-  }
-
-  function watchPersistedPrefs(vm) {
-    vm.$watch("showOffline", (value) => vm.save("showOffline", value));
-    vm.$watch("showBuiltIns", (value) => vm.save("showBuiltIns", value));
-    vm.$watch("autoRefresh", (value) => {
-      vm.save("autoRefresh", value);
-      if (value) vm.startAutoRefresh();
-      else vm.stopAutoRefresh();
-    });
-    vm.$watch("agentSort", (value) => vm.save("agentSort", value));
-    vm.$watch("agentSortDir", (value) => vm.save("agentSortDir", value));
-    vm.$watch("agentPresetFilter", (value) => vm.save("agentPresetFilter", value));
-    vm.$watch("agentStatusFilter", (value) => vm.save("agentStatusFilter", value));
-    vm.$watch("agentTagFilter", (value) => vm.save("agentTagFilter", value));
-    vm.$watch("pairStatusFilter", (value) => vm.save("pairStatusFilter", value));
-    vm.$watch("inboxSort", (value) => vm.save("inboxSort", value));
-    vm.$watch("inboxSortDir", (value) => vm.save("inboxSortDir", value));
-    vm.$watch("inboxShowArchived", (value) => vm.save("inboxShowArchived", value));
-    vm.$watch("activityFilter", (value) => vm.save("activityFilter", value));
-    vm.$watch("view", (value, oldValue) => {
-      vm.save("view", value);
-      if (oldValue === "analytics") vm.destroyAllCharts();
-      if (value === "analytics") vm.$nextTick(() => vm.renderCharts());
-    });
-  }
-
-  function parseEventData(event) {
-    return JSON.parse(event.data);
-  }
-
-  function indexAgents(agents) {
-    const byId = {};
-    for (const agent of agents) byId[agent.id] = agent;
-    return byId;
-  }
-
-  function upsertById(list, item) {
-    const idx = list.findIndex((existing) => existing.id === item.id);
-    if (idx >= 0) list.splice(idx, 1, item);
-    else list.push(item);
-  }
-
-  function upsertTask(vm, task) {
-    const idx = vm.tasks.findIndex((existing) => existing.id === task.id);
-    if (idx >= 0) vm.tasks[idx] = task;
-    else vm.tasks.unshift(task);
-  }
-
-  function syncAgentStats(vm) {
-    vm.stats.agents = vm.agents.length;
-    vm.stats.online = vm.agents.filter((agent) => agent.status !== "offline").length;
-  }
-
-  function syncMessageStats(vm, msg) {
-    vm.stats.messages = (vm.stats.messages ?? 0) + 1;
-    const createdAt = new Date(msg.createdAt || Date.now()).getTime();
-    if (Number.isFinite(createdAt) && Date.now() - createdAt <= 86_400_000) {
-      vm.stats.messagesLast24h = (vm.stats.messagesLast24h ?? 0) + 1;
-    }
-  }
-
-  function refreshChartsIfVisible(vm) {
-    if (vm.view !== "analytics") return;
-    vm.$nextTick(() => vm.renderCharts());
-  }
-
-  function registerKeyboardShortcuts(vm) {
-    if (typeof window === "undefined" || !window.addEventListener || vm._keyboardShortcutsRegistered) return;
-    window.addEventListener("keydown", (event) => {
-      const key = event.key?.toLowerCase();
-      if ((event.metaKey || event.ctrlKey) && key === "k") {
-        event.preventDefault();
-        vm.openCommandPalette();
-      } else if (key === "escape" && vm.commandPaletteOpen) {
-        event.preventDefault();
-        vm.closeCommandPalette();
-      }
-    });
-    vm._keyboardShortcutsRegistered = true;
-  }
-
-  function createLifecycleMethods() {
-    return {
-      async init() {
-        this.startClock();
-        watchPersistedPrefs(this);
-        registerKeyboardShortcuts(this);
-
-        try {
-          this.stats = await this.api("GET", "/stats");
-        } catch {
-          if (this.authNeeded) return;
-        }
-
-        await this.refresh();
-        this.connectSSE();
-        this.startAutoRefresh();
-      },
-
-      save(key, value) {
-        savePref(key, value);
-      },
-
-      async switchView(view) {
-        this.view = view;
-        if (view === "inbox" || view === "messages") await this.fetchMessages();
-        if (view === "inbox") this.markInboxThreadRead(this.selectedInboxThreadData);
-        if (view === "activity") await Promise.all([this.fetchMessages(), this.fetchPairs(), this.fetchTasks(), this.fetchActivityEvents()]);
-        if (view === "work") await Promise.all([this.fetchMessages(), this.fetchTasks()]);
-        if (view === "pairs") this.fetchPairs();
-        if (view === "channels") await this.fetchChannels();
-        if (view === "connectors") await this.fetchConnectors();
-        if (view === "integrations") await this.fetchIntegrations();
-        if (view === "tasks") this.fetchTasks();
-      },
-
-      startClock() {
-        if (this._clockTimer) return;
-        this._clockTimer = setInterval(() => {
-          this.now = Date.now();
-        }, 1_000);
-      },
-
-      startAutoRefresh() {
-        this.stopAutoRefresh();
-        if (!this.autoRefresh) return;
-        this._refreshTimer = setInterval(() => this.refreshLiveData(), LIVE_REFRESH_MS);
-      },
-
-      stopAutoRefresh() {
-        if (!this._refreshTimer) return;
-        clearInterval(this._refreshTimer);
-        this._refreshTimer = null;
-      },
-    };
-  }
-
-  function createSseMethods() {
-    return {
-      connectSSE,
-    };
-  }
-
-  function connectSSE() {
-    if (this._es) this._es.close();
-
-    const es = new EventSource(buildEventsUrl(this.authToken));
-    this._es = es;
-
-    es.addEventListener("connected", () => {
-      this.connected = true;
-    });
-    es.onerror = () => {
-      this.connected = false;
-    };
-
-    es.addEventListener("message.new", (event) => handleNewMessage(this, parseEventData(event)));
-    es.addEventListener("agent.status", (event) => handleAgentStatus(this, parseEventData(event)));
-    es.addEventListener("agent.removed", (event) => handleAgentRemoved(this, parseEventData(event)));
-    es.addEventListener("message.claimed", (event) => handleMessageClaimed(this, parseEventData(event)));
-    es.addEventListener("message.claim_released", (event) => handleMessageClaimReleased(this, parseEventData(event)));
-    es.addEventListener("message.deleted", (event) => handleMessageDeleted(this, parseEventData(event)));
-    es.addEventListener("orchestrator.status", (event) => handleOrchestratorStatus(this, parseEventData(event)));
-    es.addEventListener("orchestrator.removed", (event) => handleOrchestratorRemoved(this, parseEventData(event)));
-    registerTaskEvents(this, es);
-  }
-
-  function baseUrl() {
-    const href = window.location.href.split("?")[0].split("#")[0];
-    return href.endsWith("/") ? href : href + "/";
-  }
-
-  function buildEventsUrl(authToken) {
-    const eventUrl = new URL("api/events", baseUrl());
-    if (authToken) eventUrl.searchParams.set("token", authToken);
-    return eventUrl.toString();
-  }
-
-  function handleNewMessage(vm, msg) {
-    if (vm.messages.some((existing) => existing.id === msg.id)) return;
-    if (vm.view === "messages" && vm.selectedAgent && msg.from !== vm.selectedAgent && msg.to !== vm.selectedAgent) return;
-    if (vm.view === "messages" && vm.channelFilter && msg.channel !== vm.channelFilter) return;
-
-    vm.messages.push(msg);
-    if (vm.messages.length > 200) vm.messages.shift();
-    syncMessageStats(vm, msg);
-    refreshChartsIfVisible(vm);
-  }
-
-  function handleAgentStatus(vm, agent) {
-    upsertById(vm.agents, agent);
-    vm.agentsById[agent.id] = agent;
-    syncAgentStats(vm);
-    refreshChartsIfVisible(vm);
-  }
-
-  function handleAgentRemoved(vm, data) {
-    vm.agents = vm.agents.filter((agent) => agent.id !== data.id);
-    delete vm.agentsById[data.id];
-    syncAgentStats(vm);
-    refreshChartsIfVisible(vm);
-  }
-
-  function handleOrchestratorStatus(vm, orch) {
-    upsertById(vm.orchestrators, orch);
-  }
-
-  function handleOrchestratorRemoved(vm, data) {
-    vm.orchestrators = vm.orchestrators.filter((o) => o.id !== data.id);
-  }
-
-  function handleMessageClaimed(vm, data) {
-    const msg = vm.messages.find((item) => item.id === data.messageId);
-    if (!msg) return;
-    msg.claimedBy = data.claimedBy;
-    msg.claimExpiresAt = data.claimExpiresAt;
-  }
-
-  function handleMessageClaimReleased(vm, data) {
-    const msg = vm.messages.find((item) => item.id === data.messageId);
-    if (!msg) return;
-    delete msg.claimedBy;
-    delete msg.claimedAt;
-    delete msg.claimExpiresAt;
-  }
-
-  function handleMessageDeleted(vm, data) {
-    vm.messages = vm.messages.filter((msg) => msg.id !== data.messageId);
-  }
-
-  function registerTaskEvents(vm, es) {
-    for (const eventName of ["task.created", "task.updated", "task.claimed", "task.status"]) {
-      es.addEventListener(eventName, (event) => upsertTask(vm, parseEventData(event)));
-    }
-  }
-
-  function createApiMethods() {
-    return {
-      async api(method, path, body) {
-        const opts = { method, headers: {} };
-        if (this.authToken) opts.headers["X-Agent-Relay-Token"] = this.authToken;
-        if (body) {
-          opts.headers["Content-Type"] = "application/json";
-          opts.body = JSON.stringify(body);
-        }
-
-        const response = await fetch(new URL("api" + path, baseUrl()), opts);
-        if (!response.ok) {
-          if (response.status === 401) this.authNeeded = true;
-          const text = await response.text();
-          throw new Error(text || response.statusText);
-        }
-
-        this.authNeeded = false;
-        return response.json();
-      },
-
-      saveTokenAndRefresh() {
-        this.save("authToken", this.authToken);
-        this.authNeeded = false;
-        this.connectSSE();
-        this.refresh();
-      },
-
-      async refresh() {
-        await Promise.all([this.fetchStats(), this.fetchHealth(), this.fetchAgents(), this.fetchOrchestrators(), this.fetchPairs(), this.fetchMessages(), this.fetchTasks(), this.fetchChannels(), this.fetchConnectors(), this.fetchIntegrations(), this.fetchInboxState(), this.fetchActivityEvents()]);
-      },
-
-      async refreshLiveData() {
-        if (this._refreshInFlight || this.authNeeded) return;
-        this._refreshInFlight = true;
-        try {
-          await this.refresh();
-          refreshChartsIfVisible(this);
-        } finally {
-          this._refreshInFlight = false;
-        }
-      },
-
-      async fetchStats() {
-        try {
-          this.stats = await this.api("GET", "/stats");
-        } catch {}
-      },
-
-      async fetchHealth() {
-        try {
-          this.health = await this.api("GET", "/health");
-        } catch {}
-      },
-
-      async fetchAgents() {
-        try {
-          this.agents = await this.api("GET", "/agents");
-          this.agentsById = indexAgents(this.agents);
-        } catch {}
-      },
-
-      async fetchOrchestrators() {
-        try {
-          this.orchestrators = await this.api("GET", "/orchestrators");
-        } catch {}
-      },
-
-      async fetchPairs() {
-        try {
-          let pairs;
-          if (this.view === "activity") {
-            pairs = await this.api("GET", "/pairs");
-          } else if (this.pairStatusFilter === "open") {
-            const [active, pending] = await Promise.all([
-              this.api("GET", "/pairs?status=active"),
-              this.api("GET", "/pairs?status=pending"),
-            ]);
-            pairs = [...active, ...pending];
-          } else if (this.pairStatusFilter) {
-            pairs = await this.api("GET", "/pairs?status=" + encodeURIComponent(this.pairStatusFilter));
-          } else {
-            pairs = await this.api("GET", "/pairs");
-          }
-          this.pairs = pairs.sort(comparePairs);
-        } catch {}
-      },
-
-      async fetchMessages() {
-        try {
-          let path = "/messages?limit=100";
-          if (this.view === "messages" && this.selectedAgent) path += "&for=" + encodeURIComponent(this.selectedAgent);
-          if (this.view === "messages" && this.channelFilter) path += "&channel=" + encodeURIComponent(this.channelFilter);
-          this.messages = await this.api("GET", path);
-        } catch {}
-      },
-
-      async fetchTasks() {
-        try {
-          const params = new URLSearchParams({ limit: "100" });
-          if (this.taskStatusFilter) params.set("status", this.taskStatusFilter);
-          if (this.taskSourceFilter) params.set("source", this.taskSourceFilter);
-          this.tasks = await this.api("GET", "/tasks?" + params.toString());
-        } catch {}
-      },
-
-      async fetchIntegrations() {
-        try {
-          this.integrations = await this.api("GET", "/integrations");
-        } catch {}
-      },
-
-      async fetchConnectors() {
-        try {
-          this.connectors = await this.api("GET", "/connectors");
-        } catch {}
-      },
-
-      async fetchChannels() {
-        try {
-          this.channels = await this.api("GET", "/channels");
-        } catch {}
-      },
-
-      async fetchInboxState() {
-        try {
-          const state = await this.api("GET", "/inbox/state?operatorId=" + encodeURIComponent(INBOX_OPERATOR_ID));
-          applyInboxState(this, state);
-        } catch {}
-      },
-
-      async fetchActivityEvents() {
-        try {
-          this.activityEvents = await this.api("GET", "/activity?limit=200");
-          pruneSyncedOperatorActivity(this);
-        } catch {}
-      },
-    };
-  }
-
-  function applyInboxState(vm, state) {
-    const readCursors = {};
-    const archivedThreads = {};
-    const drafts = {};
-
-    for (const thread of state?.threads || []) {
-      if (thread.readCursorMessageId) readCursors[thread.peerId] = thread.readCursorMessageId;
-      if (thread.archivedAtMessageId) archivedThreads[thread.peerId] = thread.archivedAtMessageId;
-    }
-    for (const draft of state?.drafts || []) {
-      if (draft.body) drafts[draft.peerId] = draft.body;
-    }
-
-    vm.inboxReadCursors = readCursors;
-    vm.inboxArchivedThreads = archivedThreads;
-    vm.inboxDrafts = drafts;
-    savePref("inboxReadCursors", readCursors);
-    savePref("inboxArchivedThreads", archivedThreads);
-    savePref("inboxDrafts", drafts);
-  }
-
-  function pruneSyncedOperatorActivity(vm) {
-    const serverClientIds = new Set((vm.activityEvents || []).map((event) => event.clientId).filter(Boolean));
-    if (!serverClientIds.size || !vm.operatorActivity?.length) return;
-    vm.operatorActivity = vm.operatorActivity.filter((item) => !serverClientIds.has(item.clientId || item.id));
-    savePref("operatorActivity", vm.operatorActivity);
-  }
-
-  function createComputedDescriptors() {
-    return {
-      onlineCount: { get: getOnlineCount },
-      busyAgentCount: { get: getBusyAgentCount },
-      hiddenBuiltInAgentCount: { get: getHiddenBuiltInAgentCount },
-      sortedAgents: { get: getSortedAgents },
-      pairsByAgentId: { get: getPairsByAgentId },
-      selectedAgentDetail: { get: getSelectedAgentDetail },
-      agentDetailMessages: { get: getAgentDetailMessages },
-      selectedChannelDetail: { get: getSelectedChannelDetail },
-      channelDetailMessages: { get: getChannelDetailMessages },
-      pairMessagePair: { get: getPairMessagePair },
-      allInboxThreads: { get: getAllInboxThreads },
-      inboxThreads: { get: getInboxThreads },
-      selectedInboxThreadData: { get: getSelectedInboxThreadData },
-      selectedInboxMessages: { get: getSelectedInboxMessages },
-      inboxComposeTargetOptions: { get: getInboxComposeTargetOptions },
-      attentionSummary: { get: getAttentionSummary },
-      attentionAgentCount: { get: getAttentionAgentCount },
-      activityItems: { get: getActivityItems },
-      workQueueItems: { get: getWorkQueueItems },
-      channelCards: { get: getChannelCards },
-      connectorCards: { get: getConnectorCards },
-      integrationCards: { get: getIntegrationCards },
-      openPairCount: { get: getOpenPairCount },
-      filteredMessages: { get: getFilteredMessages },
-      groupedMessages: { get: getGroupedMessages },
-      filteredTasks: { get: getFilteredTasks },
-      composeAgents: { get: getComposeAgents },
-      uniqueLabels: { get: getUniqueLabels },
-      uniqueCaps: { get: getUniqueCaps },
-      uniqueTags: { get: getUniqueTags },
-      healthIssues: { get: getHealthIssues },
-      healthDiagnostics: { get: getHealthDiagnostics },
-      commandPaletteItems: { get: getCommandPaletteItems },
-      spawnAvailableProviders: { get: getSpawnAvailableProviders },
-    };
-  }
-
-  function getSpawnAvailableProviders() {
-    const orch = this.orchestrators.find((o) => o.id === this.spawnOrchId);
-    return orch ? orch.providers : ["claude", "codex"];
-  }
-
-  function getOnlineCount() {
-    return visibleAgents(this).filter((agent) => agent.status !== "offline").length;
-  }
-
-  function getBusyAgentCount() {
-    return this.agents.filter((agent) => agent.status === "busy").length;
-  }
-
-  function getHiddenBuiltInAgentCount() {
-    return this.showBuiltIns ? 0 : this.agents.filter(isBuiltInAgent).length;
-  }
-
-  function getSortedAgents() {
-    let list = visibleAgents(this);
-    list = applyAgentPreset(this, list);
-    if (!this.showOffline) list = list.filter((agent) => agent.status !== "offline");
-    if (this.agentStatusFilter === "starting") {
-      list = list.filter((agent) => agent.status !== "offline" && !agent.ready);
-    } else if (this.agentStatusFilter) {
-      list = list.filter((agent) => agent.status === this.agentStatusFilter);
-    }
-    if (this.agentTagFilter) {
-      list = list.filter((agent) => (agent.tags || []).includes(this.agentTagFilter));
-    }
-
-    const dir = this.agentSortDir === "desc" ? -1 : 1;
-    return list.sort((a, b) => compareAgents(this, a, b) * dir);
-  }
-
-  function getPairsByAgentId() {
-    const byAgent = {};
-    for (const pair of this.pairs || []) {
-      if (pair.requesterId) byAgent[pair.requesterId] = pair;
-      if (pair.targetId) byAgent[pair.targetId] = pair;
-    }
-    return byAgent;
-  }
-
-  function comparePairs(a, b) {
-    return new Date(b.updatedAt || b.createdAt || 0) - new Date(a.updatedAt || a.createdAt || 0);
-  }
-
-  function getSelectedAgentDetail() {
-    if (!this.agentDetailId) return null;
-    return this.agentsById[this.agentDetailId] || null;
-  }
-
-  function getAgentDetailMessages() {
-    if (!this.agentDetailId) return [];
-    return this.messages
-      .filter((msg) => msg.from === this.agentDetailId || msg.to === this.agentDetailId)
-      .slice()
-      .sort((a, b) => b.id - a.id)
-      .slice(0, 8);
-  }
-
-  function getSelectedChannelDetail() {
-    if (!this.channelDetailId) return null;
-    return (this.channels || []).find((channel) => channel.id === this.channelDetailId) || null;
-  }
-
-  function getChannelDetailMessages() {
-    const channel = this.selectedChannelDetail;
-    if (!channel) return [];
-    return this.messages
-      .filter((msg) => messageMatchesChannel(msg, channel))
-      .slice()
-      .sort((a, b) => b.id - a.id)
-      .slice(0, 8);
-  }
-
-  function messageMatchesChannel(message, channel) {
-    if (!message || !channel) return false;
-    const channelKeys = [channel.id, channel.type, ...(channel.topicChannels || [])].filter(Boolean);
-    if (message.channel && channelKeys.includes(message.channel)) return true;
-    const payloadChannel = message.payload?.channel;
-    if (payloadChannel && typeof payloadChannel === "object") {
-      const payloadKeys = [payloadChannel.agentId, payloadChannel.provider, payloadChannel.accountId].filter(Boolean);
-      if (payloadKeys.includes(channel.id) || payloadKeys.includes(channel.type) || payloadKeys.includes(channel.accountId)) return true;
-    }
-    if (channel.agentId && (message.from === channel.agentId || message.to === channel.agentId)) return true;
-    return false;
-  }
-
-  function getPairMessagePair() {
-    return this.pairs.find((pair) => pair.id === this.pairMessage.pairId) || null;
-  }
-
-  function getAllInboxThreads() {
-    return buildInboxThreads(this);
-  }
-
-  function getInboxThreads() {
-    const search = this.inboxSearch.trim().toLowerCase();
-    const filtered = this.allInboxThreads.filter((thread) => {
-      if (!this.inboxShowArchived && thread.archived) return false;
-      if (search && !threadMatchesSearch(this, thread, search)) return false;
-      return true;
-    });
-    return sortInboxThreads(filtered, this.inboxSort, this.inboxSortDir);
-  }
-
-  function sortInboxThreads(threads, sort, dir) {
-    const mul = dir === "asc" ? 1 : -1;
-    return [...threads].sort((a, b) => {
-      switch (sort) {
-        case "updated":
-          return mul * ((b.lastMessage?.id || 0) - (a.lastMessage?.id || 0));
-        case "created": {
-          const aFirst = a.messages[0]?.id || 0;
-          const bFirst = b.messages[0]?.id || 0;
-          return mul * (bFirst - aFirst);
-        }
-        case "name":
-          return mul * String(a.peer).localeCompare(String(b.peer));
-        case "attention":
-        default:
-          return compareInboxThreads(a, b) * mul;
-      }
-    });
-  }
-
-  function buildInboxThreads(vm) {
-    const threads = new Map();
-    for (const msg of vm.messages) {
-      const peer = inboxPeer(msg);
-      if (!peer) continue;
-      if (!threads.has(peer)) threads.set(peer, { id: peer, peer, messages: [], lastMessage: null });
-      threads.get(peer).messages.push(msg);
-    }
-
-    for (const thread of threads.values()) {
-      thread.messages.sort((a, b) => a.id - b.id);
-      thread.lastMessage = thread.messages[thread.messages.length - 1] || null;
-      thread.attention = getThreadAttention(vm, thread);
-      thread.archived = isInboxThreadArchived(vm, thread);
-      thread.draft = draftForPeer(vm, thread.peer);
-    }
-
-    return [...threads.values()].sort(compareInboxThreads);
-  }
-
-  function threadMatchesSearch(vm, thread, search) {
-    const haystack = [
-      vm.displayTarget(thread.peer),
-      thread.peer,
-      ...thread.messages.flatMap((msg) => [msg.subject || "", messageBody.call(vm, msg) || "", msg.channel || "", vm.displayTarget(msg.from), vm.displayTarget(msg.to)]),
-    ].join("\n").toLowerCase();
-    return haystack.includes(search);
-  }
-
-  function isInboxThreadArchived(vm, thread) {
-    const archivedAtId = Number(vm.inboxArchivedThreads?.[thread.peer] || 0);
-    return Boolean(thread.lastMessage?.id && archivedAtId >= thread.lastMessage.id);
-  }
-
-  function compareInboxThreads(a, b) {
-    const scoreDelta = (b.attention?.score || 0) - (a.attention?.score || 0);
-    if (scoreDelta !== 0) return scoreDelta;
-    return (b.lastMessage?.id || 0) - (a.lastMessage?.id || 0);
-  }
-
-  function getSelectedInboxThreadData() {
-    if (!this.selectedInboxThread) return null;
-    return this.inboxThreads.find((thread) => thread.id === this.selectedInboxThread) || null;
-  }
-
-  function getSelectedInboxMessages() {
-    return this.selectedInboxThreadData?.messages || [];
-  }
-
-  function getInboxComposeTargetOptions() {
-    if (this.inboxCompose.toMode === "tag") return this.uniqueTags.map((value) => ({ value, label: "#" + value }));
-    if (this.inboxCompose.toMode === "cap") return this.uniqueCaps.map((value) => ({ value, label: value }));
-    return this.composeAgents.map((agent) => ({ value: agent.id, label: `${this.displayName(agent)} [${agent.id.slice(-6)}]` }));
-  }
-
-  function getAttentionSummary() {
-    const threads = this.allInboxThreads.filter((thread) => !thread.archived);
-    const pendingPairInvites = this.pairs.filter((pair) => pair.status === "pending").length;
-    const claimableTasks = countClaimableWaiting(this);
-    const unreadInbox = threads.reduce((sum, thread) => sum + (thread.attention?.unread || 0), 0);
-    const agentQuestions = threads.filter((thread) => thread.attention?.agentQuestion).length;
-
-    return {
-      unreadInbox,
-      needsHumanResponse: 0,
-      agentQuestions,
-      pendingPairInvites,
-      claimableTasks,
-      total: unreadInbox + agentQuestions + pendingPairInvites + claimableTasks,
-    };
-  }
-
-  function getAttentionAgentCount() {
-    return this.sortedAgents.filter((agent) => agentAttention.call(this, agent).total > 0).length;
-  }
-
-  function getActivityItems() {
-    const items = [
-      ...serverActivityItems(this),
-      ...messageActivityItems(this),
-      ...pairActivityItems(this),
-      ...taskActivityItems(this),
-      ...operatorActivityItems(this),
-    ].filter((item) => item.ts);
-
-    const filter = this.activityFilter;
-    const filtered = filter ? items.filter((item) => item.kind === filter) : items;
-    return filtered
-      .sort((a, b) => b.ts - a.ts)
-      .slice(0, 150);
-  }
-
-  function getWorkQueueItems() {
-    const taskItems = (this.tasks || [])
-      .filter((task) => !CLOSED_TASK_STATUSES.has(task.status))
-      .map((task) => ({
-        id: "task-" + task.id,
-        sourceType: "task",
-        title: task.title,
-        body: task.body,
-        severity: task.severity || "info",
-        status: task.status,
-        owner: task.claimedBy || "",
-        target: task.target,
-        source: task.source,
-        channel: task.channel || "",
-        updatedAt: task.updatedAt || task.createdAt,
-        createdAt: task.createdAt,
-        claimable: isClaimableTaskWaiting(task),
-        task,
-      }));
-
-    const messageItems = (this.messages || [])
-      .filter(isClaimableMessageWaiting)
-      .map((msg) => ({
-        id: "message-" + msg.id,
-        sourceType: "message",
-        title: msg.subject || "Claimable message #" + msg.id,
-        body: messageBody(msg),
-        severity: "warning",
-        status: msg.claimedBy ? "claimed" : "open",
-        owner: msg.claimedBy || "",
-        target: msg.to,
-        source: "message",
-        channel: msg.channel || "",
-        updatedAt: msg.claimedAt || msg.createdAt,
-        createdAt: msg.createdAt,
-        claimable: isClaimableMessageWaiting(msg),
-        message: msg,
-      }));
-
-    return [...taskItems, ...messageItems].sort(compareWorkQueueItems);
-  }
-
-  function compareWorkQueueItems(a, b) {
-    const claimableDelta = Number(b.claimable) - Number(a.claimable);
-    if (claimableDelta !== 0) return claimableDelta;
-    const severityOrder = { critical: 0, warning: 1, info: 2 };
-    const severityDelta = (severityOrder[a.severity] ?? 9) - (severityOrder[b.severity] ?? 9);
-    if (severityDelta !== 0) return severityDelta;
-    return toTimestamp(a.updatedAt) - toTimestamp(b.updatedAt);
-  }
-
-  function serverActivityItems(vm) {
-    return (vm.activityEvents || []).map((event) => activityItem({
-      id: "activity-" + event.id,
-      clientId: event.clientId,
-      kind: event.kind,
-      ts: toTimestamp(event.createdAt),
-      icon: event.icon,
-      title: event.title,
-      body: event.body,
-      meta: event.meta,
-      view: event.view,
-      peer: event.peer,
-      messageId: event.messageId,
-      pairId: event.pairId,
-      taskId: event.taskId,
-      agentId: event.agentId,
-    }));
-  }
-
-  function messageActivityItems(vm) {
-    return (vm.messages || []).flatMap((msg) => {
-      const ts = toTimestamp(msg.createdAt);
-      const items = [];
-      const pairEvent = msg.payload?.pairEvent;
-      if (pairEvent) {
-        items.push(activityItem({
-          id: "pair-message-" + msg.id,
-          kind: pairEvent === "message" ? "pair" : "state",
-          ts,
-          icon: pairEvent === "message" ? "ti-messages" : "ti-link",
-          title: pairEvent === "message" ? "Pair message" : "Pair " + pairEvent,
-          body: vm.messagePreview(msg),
-          meta: `${vm.displayTarget(msg.from)} -> ${vm.displayTarget(msg.to)}`,
-          view: "pairs",
-          messageId: msg.id,
-        }));
-      } else if (msg.from === HUMAN_AGENT_ID) {
-        items.push(activityItem({
-          id: "human-send-" + msg.id,
-          kind: msg.kind === "task" ? "task" : "message",
-          ts,
-          icon: msg.kind === "task" ? "ti-hand-grab" : "ti-send",
-          title: msg.kind === "task" ? "Claimable task sent" : "Message sent",
-          body: vm.messagePreview(msg),
-          meta: "to " + vm.displayTarget(msg.to),
-          view: inboxPeer(msg) ? "inbox" : "messages",
-          peer: inboxPeer(msg),
-          messageId: msg.id,
-        }));
-      } else if (msg.to === HUMAN_AGENT_ID) {
-        items.push(activityItem({
-          id: "agent-reply-" + msg.id,
-          kind: messageLooksLikeQuestion(msg) ? "question" : "reply",
-          ts,
-          icon: messageLooksLikeQuestion(msg) ? "ti-help-circle" : "ti-message-reply",
-          title: messageLooksLikeQuestion(msg) ? "Agent asked a question" : "Agent replied",
-          body: vm.messagePreview(msg),
-          meta: "from " + vm.displayTarget(msg.from),
-          view: "inbox",
-          peer: msg.from,
-          agentId: msg.from,
-          messageId: msg.id,
-        }));
-      } else {
-        items.push(activityItem({
-          id: "message-" + msg.id,
-          kind: "message",
-          ts,
-          icon: "ti-messages",
-          title: "Agent message",
-          body: vm.messagePreview(msg),
-          meta: `${vm.displayTarget(msg.from)} -> ${vm.displayTarget(msg.to)}`,
-          view: "messages",
-          messageId: msg.id,
-        }));
-      }
-      if (msg.claimedBy) {
-        items.push(activityItem({
-          id: "claim-" + msg.id,
-          kind: "task",
-          ts: toTimestamp(msg.claimedAt || msg.createdAt),
-          icon: "ti-user-check",
-          title: "Task claimed",
-          body: vm.messagePreview(msg),
-          meta: "by " + vm.displayTarget(msg.claimedBy),
-          view: "tasks",
-          messageId: msg.id,
-          agentId: msg.claimedBy,
-        }));
-      }
-      return items;
-    });
-  }
-
-  function pairActivityItems(vm) {
-    return (vm.pairs || []).flatMap((pair) => {
-      const created = activityItem({
-        id: "pair-created-" + pair.id,
-        kind: "pair",
-        ts: toTimestamp(pair.createdAt),
-        icon: "ti-link-plus",
-        title: "Pair invite created",
-        body: pair.objective || "",
-        meta: `${vm.displayTarget(pair.requesterId)} <-> ${vm.displayTarget(pair.targetId)}`,
-        view: "pairs",
-        pairId: pair.id,
-      });
-      const statusTs = toTimestamp(pair.updatedAt || pair.acceptedAt || pair.endedAt);
-      if (!statusTs || statusTs === created.ts || pair.status === "pending") return [created];
-      return [created, activityItem({
-        id: "pair-status-" + pair.id + "-" + pair.status,
-        kind: "state",
-        ts: statusTs,
-        icon: pair.status === "active" ? "ti-link" : "ti-phone-off",
-        title: "Pair " + pair.status,
-        body: pair.objective || "",
-        meta: pair.endedBy ? "by " + vm.displayTarget(pair.endedBy) : `${vm.displayTarget(pair.requesterId)} <-> ${vm.displayTarget(pair.targetId)}`,
-        view: "pairs",
-        pairId: pair.id,
-      })];
-    });
-  }
-
-  function taskActivityItems(vm) {
-    return (vm.tasks || []).map((task) => activityItem({
-      id: "task-" + task.id + "-" + task.status,
-      kind: "task",
-      ts: toTimestamp(task.updatedAt || task.createdAt),
-      icon: task.claimedBy ? "ti-user-check" : "ti-checkup-list",
-      title: task.status === "open" ? "Claimable task waiting" : "Task " + task.status,
-      body: task.title || task.body || "",
-      meta: task.claimedBy ? "claimed by " + vm.displayTarget(task.claimedBy) : vm.displayTarget(task.target),
-      view: "tasks",
-      taskId: task.id,
-      agentId: task.claimedBy || task.target,
-    }));
-  }
-
-  function operatorActivityItems(vm) {
-    const serverClientIds = new Set((vm.activityEvents || []).map((event) => event.clientId).filter(Boolean));
-    return (vm.operatorActivity || []).map((item) => activityItem({
-      ...item,
-      id: item.id || "operator-" + item.ts + "-" + item.title,
-      clientId: item.clientId || item.id,
-    })).filter((item) => !serverClientIds.has(item.clientId));
-  }
-
-  function activityItem(input) {
-    return {
-      id: input.id,
-      kind: input.kind || "state",
-      ts: Number(input.ts) || 0,
-      icon: input.icon || "ti-activity",
-      title: input.title || "Activity",
-      body: input.body || "",
-      meta: input.meta || "",
-      view: input.view || "",
-      peer: input.peer || "",
-      clientId: input.clientId || "",
-      messageId: input.messageId,
-      pairId: input.pairId,
-      taskId: input.taskId,
-      agentId: input.agentId,
-    };
-  }
-
-  function toTimestamp(value) {
-    const ts = typeof value === "number" ? value : new Date(value || 0).getTime();
-    return Number.isFinite(ts) ? ts : 0;
-  }
-
-  function inboxPeer(msg) {
-    if (msg.from === HUMAN_AGENT_ID && msg.to) return msg.to;
-    if (msg.to === HUMAN_AGENT_ID && msg.from) return msg.from;
-    return "";
-  }
-
-  function getThreadAttention(vm, thread) {
-    const lastHumanReplyId = maxMessageId(thread.messages, (msg) => msg.from === HUMAN_AGENT_ID);
-    const unread = thread.messages.filter((msg) => isUnreadHumanMessage(vm, thread.peer, msg)).length;
-    const agentQuestion = thread.messages.some((msg) =>
-      isHumanInboundMessage(msg) && msg.id > lastHumanReplyId && messageLooksLikeQuestion(msg)
-    );
-
-    return {
-      unread,
-      needsHumanResponse: false,
-      agentQuestion,
-      score: unread * 10 + (agentQuestion ? 3 : 0),
-    };
-  }
-
-  function maxMessageId(messages, predicate) {
-    let max = 0;
-    for (const msg of messages) {
-      if (predicate(msg) && msg.id > max) max = msg.id;
-    }
-    return max;
-  }
-
-  function isHumanInboundMessage(msg) {
-    return msg.to === HUMAN_AGENT_ID && msg.from !== HUMAN_AGENT_ID;
-  }
-
-  function isUnreadHumanMessage(vm, peer, msg) {
-    if (!isHumanInboundMessage(msg)) return false;
-    if ((msg.readBy || []).includes(HUMAN_AGENT_ID)) return false;
-    return msg.id > readCursorForPeer(vm, peer);
-  }
-
-  function readCursorForPeer(vm, peer) {
-    const value = Number(vm.inboxReadCursors?.[peer] || 0);
-    return Number.isFinite(value) ? value : 0;
-  }
-
-  function draftForPeer(vm, peer) {
-    return typeof vm.inboxDrafts?.[peer] === "string" ? vm.inboxDrafts[peer] : "";
-  }
-
-  function messageLooksLikeQuestion(msg) {
-    return /\?/.test(`${msg.subject || ""}\n${messageBody(msg)}`);
-  }
-
-  function countClaimableWaiting(vm) {
-    const taskCount = vm.tasks.filter(isClaimableTaskWaiting).length;
-    const messageCount = vm.messages.filter(isClaimableMessageWaiting).length;
-    return taskCount + messageCount;
-  }
-
-  function countAgentClaimableWaiting(vm, agent) {
-    const taskCount = vm.tasks.filter((task) => isClaimableTaskWaiting(task) && targetMatchesAgent(task.target, agent)).length;
-    const messageCount = vm.messages.filter((msg) => isClaimableMessageWaiting(msg) && targetMatchesAgent(msg.to, agent)).length;
-    return taskCount + messageCount;
-  }
-
-  function isClaimableTaskWaiting(task) {
-    return WAITING_TASK_STATUSES.has(task.status) && !task.claimedBy;
-  }
-
-  function isClaimableMessageWaiting(msg) {
-    return Boolean(msg.claimable && !msg.claimedBy && !(msg.kind === "task" && Number.isSafeInteger(msg.payload?.taskId)));
-  }
-
-  function targetMatchesAgent(target, agent) {
-    if (!target || !agent) return false;
-    if (target === "broadcast" || target === agent.id) return true;
-    if (target.startsWith("tag:")) return (agent.tags || []).includes(target.slice(4));
-    if (target.startsWith("cap:")) return (agent.capabilities || []).includes(target.slice(4));
-    if (target.startsWith("label:")) return agent.label === target.slice(6);
-    return false;
-  }
-
-  function getFilteredMessages() {
-    if (!this.tagFilter) return this.messages;
-    return this.messages.filter((msg) => messageMatchesTag(this, msg, this.tagFilter));
-  }
-
-  function messageMatchesTag(vm, msg, tag) {
-    if (msg.to === "tag:" + tag) return true;
-    if (vm.agentsById[msg.from]?.tags?.includes(tag)) return true;
-    if (vm.agentsById[msg.to]?.tags?.includes(tag)) return true;
-    return false;
-  }
-
-  function getGroupedMessages() {
-    const threads = new Map();
-    for (const msg of this.filteredMessages) {
-      const threadId = msg.threadId || msg.id;
-      if (!threads.has(threadId)) threads.set(threadId, { threadId, messages: [] });
-      threads.get(threadId).messages.push(msg);
-    }
-
-    for (const group of threads.values()) {
-      group.messages.sort((a, b) => a.id - b.id);
-    }
-
-    return [...threads.values()].sort(compareThreadGroups);
-  }
-
-  function compareThreadGroups(a, b) {
-    const aLast = a.messages[a.messages.length - 1].id;
-    const bLast = b.messages[b.messages.length - 1].id;
-    return bLast - aLast;
-  }
-
-  function getFilteredTasks() {
-    if (this.taskStatusFilter) return this.tasks;
-    return this.tasks.filter((task) => !CLOSED_TASK_STATUSES.has(task.status));
-  }
-
-  function getIntegrationCards() {
-    return [...(this.integrations || [])].sort((a, b) => {
-      const aStats = a.taskStats || {};
-      const bStats = b.taskStats || {};
-      const openDiff = (bStats.openTasks || 0) - (aStats.openTasks || 0);
-      if (openDiff !== 0) return openDiff;
-      const waitingDiff = (bStats.waitingTasks || 0) - (aStats.waitingTasks || 0);
-      if (waitingDiff !== 0) return waitingDiff;
-      return String(a.name || "").localeCompare(String(b.name || ""));
-    });
-  }
-
-  function getChannelCards() {
-    return [...(this.channels || [])].sort((a, b) => {
-      const healthRank = { error: 0, warning: 1, ok: 2 };
-      const aHealth = a.targetHealth?.status || "ok";
-      const bHealth = b.targetHealth?.status || "ok";
-      const healthDiff = (healthRank[aHealth] ?? 2) - (healthRank[bHealth] ?? 2);
-      if (healthDiff !== 0) return healthDiff;
-      const readyDiff = Number(Boolean(b.ready)) - Number(Boolean(a.ready));
-      if (readyDiff !== 0) return readyDiff;
-      const statusDiff = String(a.status || "").localeCompare(String(b.status || ""));
-      if (statusDiff !== 0) return statusDiff;
-      return String(a.name || "").localeCompare(String(b.name || ""));
-    });
-  }
-
-  function getConnectorCards() {
-    return [...(this.connectors || [])].sort((a, b) => {
-      const statusRank = { error: 0, warn: 1, unknown: 2, ok: 3 };
-      const aStatus = a.runtime?.status || "unknown";
-      const bStatus = b.runtime?.status || "unknown";
-      const statusDiff = (statusRank[aStatus] ?? 2) - (statusRank[bStatus] ?? 2);
-      if (statusDiff !== 0) return statusDiff;
-      return String(a.displayName || a.id || "").localeCompare(String(b.displayName || b.id || ""));
-    });
-  }
-
-  function getOpenPairCount() {
-    return (this.pairs || []).filter(isOpenPair).length;
-  }
-
-  function isOpenPair(pair) {
-    return pair?.status === "active" || pair?.status === "pending";
-  }
-
-  function getComposeAgents() {
-    const list = visibleAgents(this);
-    return this.showOffline ? list : list.filter((agent) => agent.status !== "offline");
-  }
-
-  function composeTargetAllowsClaimable() {
-    return matchingComposeRecipientCount(this, this.compose.to) > 1;
-  }
-
-  function inboxComposeTargetAllowsClaimable() {
-    return matchingComposeRecipientCount(this, inboxComposeTarget(this)) > 1;
-  }
-
-  function matchingComposeRecipientCount(vm, target) {
-    if (!target) return 0;
-    const candidates = vm.composeAgents.filter((agent) => !isBuiltInAgent(agent) && !isChannelAgent(agent));
-    if (target === "broadcast") return candidates.length;
-    if (vm.agentsById[target]) return 1;
-    if (target.startsWith("tag:")) {
-      const tag = target.slice(4);
-      return candidates.filter((agent) => (agent.tags || []).includes(tag)).length;
-    }
-    if (target.startsWith("cap:")) {
-      const cap = target.slice(4);
-      return candidates.filter((agent) => (agent.capabilities || []).includes(cap)).length;
-    }
-    if (target.startsWith("label:")) {
-      const label = target.slice(6);
-      return candidates.filter((agent) => agent.label === label).length;
-    }
-    return 1;
-  }
-
-  function getUniqueLabels() {
-    return [...new Set(visibleAgents(this).filter((agent) => agent.label).map((agent) => agent.label))];
-  }
-
-  function getUniqueCaps() {
-    return [...new Set(visibleAgents(this).flatMap((agent) => agent.capabilities || []))];
-  }
-
-  function getUniqueTags() {
-    return [...new Set(visibleAgents(this).flatMap((agent) => agent.tags || []))];
-  }
-
-  function visibleAgents(vm) {
-    const nonChannelAgents = vm.agents.filter((agent) => !isChannelAgent(agent));
-    return vm.showBuiltIns ? nonChannelAgents : nonChannelAgents.filter((agent) => !isBuiltInAgent(agent));
-  }
-
-  function isBuiltInAgent(agent) {
-    return agent?.meta?.builtin === true || agent?.id === HUMAN_AGENT_ID || agent?.id === "system";
-  }
-
-  function isChannelAgent(agent) {
-    return agent?.kind === "channel" || agent?.meta?.kind === "channel" || agent?.tags?.includes("channel");
-  }
-
-  function agentSupportsControlActions(agent) {
-    return Boolean(agent && !isBuiltInAgent(agent) && !isChannelAgent(agent));
-  }
-
-  function applyAgentPreset(vm, list) {
-    switch (vm.agentPresetFilter) {
-      case "active":
-        return list.filter((agent) => agent.status !== "offline");
-      case "offline_stale":
-        return list.filter((agent) => agent.status === "offline" || isAgentStale(vm, agent));
-      case "claude":
-      case "codex":
-        return list.filter((agent) => agentType(agent) === vm.agentPresetFilter);
-      case "paired":
-        return list.filter((agent) => Boolean(vm.agentPair(agent)));
-      case "unpaired":
-        return list.filter((agent) => !vm.agentPair(agent));
-      case "waiting":
-        return list.filter((agent) => agentAttention.call(vm, agent).total > 0);
-      case "claimable":
-        return list.filter((agent) => agentAttention.call(vm, agent).claimableTasks > 0);
-      case "errors":
-        return list.filter((agent) => agent.status === "offline" || (agent.status !== "offline" && !agent.ready) || isAgentStale(vm, agent));
-      default:
-        return list;
-    }
-  }
-
-  function isAgentStale(vm, agent) {
-    if (!agent?.lastSeen || agent.status === "offline") return false;
-    if (agent.id === "user" || agent.id === "system") return false;
-    const lastSeenMs = new Date(agent.lastSeen).getTime();
-    if (!Number.isFinite(lastSeenMs)) return false;
-    return (vm.now || Date.now()) - lastSeenMs > 60_000;
-  }
-
-  function getHealthIssues() {
-    return (this.health?.checks || []).filter((check) => check.status !== "ok");
-  }
-
-  function getHealthDiagnostics() {
-    return this.healthIssues.map((check) => {
-      const base = {
-        name: check.name,
-        status: check.status,
-        detail: check.detail || check.name,
-        impact: healthImpact(check),
-        actions: [
-          { label: "Inspect logs", icon: "ti-file-search", copy: "agent-relay daemon logs" },
-          { label: "Restart daemon", icon: "ti-refresh", copy: "agent-relay daemon restart" },
-          { label: "Copy env", icon: "ti-copy", copy: "agent-relay doctor" },
-        ],
-      };
-      if (check.name === "stale-live-agents") {
-        base.actions.unshift(
-          { label: "Run reaper", icon: "ti-broom", api: "POST", path: "/system/reap" },
-          { label: "Show stale", icon: "ti-filter", view: "agents", preset: "offline_stale" }
-        );
-      } else if (check.name === "channel-delivery-targets") {
-        base.actions.unshift(
-          { label: "Open channels", icon: "ti-messages", view: "channels" },
-          { label: "Run reaper", icon: "ti-broom", api: "POST", path: "/system/reap" }
-        );
-      } else if (check.name === "expired-message-claims" || check.name === "expired-task-claims" || check.name === "offline-claimed-tasks") {
-        base.actions.unshift(
-          { label: "Run reaper", icon: "ti-broom", api: "POST", path: "/system/reap" },
-          { label: "Open work", icon: "ti-list-check", view: "work" }
-        );
-      }
-      return base;
-    });
-  }
-
-  function healthImpact(check) {
-    if (check.name === "database") return "Relay persistence is unavailable; messages, state, and audit writes may fail.";
-    if (check.name === "stale-live-agents") return "Agents may look online even though their heartbeat has stopped.";
-    if (check.name === "expired-message-claims") return "Claimable messages may be stuck until the reaper releases expired claims.";
-    if (check.name === "expired-task-claims") return "Tasks can appear owned by agents that no longer hold a live lease.";
-    if (check.name === "offline-claimed-tasks") return "Offline agents are still shown as owners for active work.";
-    if (check.name === "channel-delivery-targets") return "Inbound channel messages may be accepted but routed to no live delivery agent.";
-    return "Relay health is degraded for this check.";
-  }
-
-  function getCommandPaletteItems() {
-    const query = this.commandQuery.trim().toLowerCase();
-    const commands = [
-      commandItem("open-inbox", "Open inbox", "Human console", "ti-inbox", "openView", { view: "inbox" }),
-      commandItem("open-work", "Open work queue", "Claimable messages and tasks", "ti-list-check", "openView", { view: "work" }),
-      commandItem("show-stale-agents", "Show stale agents", "Filter agents to offline or stale heartbeat", "ti-filter", "agentPreset", { preset: "offline_stale" }),
-      commandItem("copy-relay-url", "Copy relay URL", baseUrl(), "ti-copy", "copy", { value: baseUrl() }),
-      commandItem("export-timeline-md", "Export full timeline as Markdown", "Activity audit trace", "ti-file-export", "exportActivity", { format: "markdown" }),
-      commandItem("export-timeline-json", "Export full timeline as JSON", "Activity audit trace", "ti-braces", "exportActivity", { format: "json" }),
-      ...this.composeAgents.slice(0, 12).map((agent) =>
-        commandItem("message-" + agent.id, "Message agent: " + this.displayName(agent), agent.id, "ti-send", "messageAgent", { agentId: agent.id })
-      ),
-      ...this.composeAgents.filter((agent) => agentType(agent) === "codex").slice(0, 8).map((agent) =>
-        commandItem("pair-codex-" + agent.id, "Pair Codex: " + this.displayName(agent), agent.id, "ti-link-plus", "pairAgent", { agentId: agent.id })
-      ),
-      ...this.uniqueTags.map((tag) =>
-        commandItem("filter-tag-" + tag, "Filter tag: " + tag, "#" + tag, "ti-tag", "filterTag", { tag })
-      ),
-    ];
-    if (!query) return commands.slice(0, 24);
-    return commands.filter((command) => command.search.includes(query)).slice(0, 24);
-  }
-
-  function commandItem(id, title, subtitle, icon, action, payload) {
-    return {
-      id,
-      title,
-      subtitle,
-      icon,
-      action,
-      payload: payload || {},
-      search: `${title}\n${subtitle || ""}\n${action}`.toLowerCase(),
-    };
-  }
-
-  function compareAgents(vm, a, b) {
-    if (vm.agentSort === "status") {
-      const attentionDelta = agentAttention.call(vm, b).score - agentAttention.call(vm, a).score;
-      if (attentionDelta !== 0) return attentionDelta;
-    }
-    switch (vm.agentSort) {
-      case "name":
-        return vm.displayName(a).localeCompare(vm.displayName(b));
-      case "status":
-        return (STATUS_SORT_ORDER[a.status] ?? 9) - (STATUS_SORT_ORDER[b.status] ?? 9);
-      case "lastSeen":
-        return new Date(b.lastSeen) - new Date(a.lastSeen);
-      case "created":
-        return new Date(b.createdAt) - new Date(a.createdAt);
-      default:
-        return 0;
-    }
-  }
-
-  function createDisplayMethods() {
-    return {
-      displayName,
-      displayTarget,
-      conversationTitle,
-      messageBody,
-      messagePreview,
-      agentPair,
-      pairPeerId,
-      pairBadgeClass,
-      pairStatusClass,
-      pairBadgeLabel,
-      pairTitle,
-      agentAttention,
-      agentAttentionTitle,
-      agentType,
-      agentTypeIcon,
-      agentTypeTitle,
-      agentPresence,
-      agentPresenceBadges,
-      agentStatusClass,
-      severityClass,
-      agentStatusTitle,
-      isBuiltInAgent,
-      agentChannels,
-      channelPresence,
-      connectorPresence,
-      integrationPresence,
-      composeTargetAllowsClaimable,
-      inboxComposeTargetAllowsClaimable,
-      agentSupportsControlActions,
-      timeAgo,
-      fmtTime,
-      healthAlertClass,
-      activityKindClass,
-    };
-  }
-
-  function displayName(agent) {
-    if (!agent) return "?";
-    return agent.label || agent.name || agent.id.slice(-12);
-  }
-
-  function displayTarget(target) {
-    if (!target) return "?";
-    if (target === "broadcast") return "broadcast";
-    if (target.startsWith("tag:")) return "#" + target.slice(4);
-    if (target.startsWith("cap:")) return target.slice(4);
-    if (target.startsWith("label:")) return target.slice(6);
-
-    const agent = this.agentsById[target];
-    return agent ? this.displayName(agent) : target.slice(-8);
-  }
-
-  function conversationTitle(thread) {
-    if (!thread) return "Inbox";
-    return this.displayTarget(thread.peer);
-  }
-
-  function messagePreview(msg) {
-    const text = msg?.subject || messageBody(msg) || "";
-    return text.length > 90 ? text.slice(0, 90) + "..." : text;
-  }
-
-  function messageBody(msg) {
-    if (!msg) return "";
-    const payload = msg.payload || {};
-    const channelMessage = payload.message;
-    if (channelMessage && typeof channelMessage === "object" && typeof channelMessage.text === "string" && channelMessage.text.trim()) {
-      return channelMessage.text;
-    }
-    const interaction = payload.interaction;
-    if (interaction && typeof interaction === "object") {
-      const title = typeof interaction.title === "string" ? interaction.title.trim() : "";
-      const description = typeof interaction.description === "string" ? interaction.description.trim() : "";
-      if (title && description) return title + "\n" + description;
-      if (title) return title;
-      if (description) return description;
-    }
-    const reaction = payload.reaction;
-    if (reaction && typeof reaction === "object") {
-      const name = typeof reaction.name === "string" ? reaction.name : "";
-      const emoji = typeof reaction.emoji === "string" ? reaction.emoji : "";
-      const value = typeof reaction.value === "string" ? reaction.value : "";
-      return ["Reaction", emoji || name || value].filter(Boolean).join(": ");
-    }
-    const activity = payload.activity;
-    if (activity && typeof activity === "object") {
-      const kind = typeof activity.kind === "string" ? activity.kind : "activity";
-      const state = typeof activity.state === "string" ? activity.state : "";
-      return [kind, state].filter(Boolean).join(" ");
-    }
-    if (typeof payload.text === "string" && payload.text.trim()) return payload.text;
-    if (typeof payload.message === "string" && payload.message.trim()) return payload.message;
-    return msg.body || "";
-  }
-
-  function agentPair(agent) {
-    return agent ? this.pairsByAgentId[agent.id] : null;
-  }
-
-  function pairPeerId(pair, agentId) {
-    if (!pair) return "";
-    return pair.requesterId === agentId ? pair.targetId : pair.requesterId;
-  }
-
-  function pairBadgeClass(pair) {
-    if (pair?.status === "active") return "bg-success-lt";
-    if (pair?.status === "pending") return "bg-warning-lt";
-    return "bg-secondary-lt";
-  }
-
-  function pairStatusClass(pair) {
-    if (pair?.status === "active") return "bg-success";
-    if (pair?.status === "pending") return "bg-warning";
-    if (pair?.status === "rejected" || pair?.status === "expired") return "bg-danger";
-    return "bg-secondary";
-  }
-
-  function pairBadgeLabel(pair, agentId) {
-    if (!pair) return "";
-    const peer = this.displayTarget(pairPeerId(pair, agentId));
-    if (pair.status === "active") return "paired with " + peer;
-    if (pair.status === "pending" && pair.requesterId === agentId) return "invite to " + peer;
-    if (pair.status === "pending") return "invite from " + peer;
-    return pair.status;
-  }
-
-  function pairTitle(pair, agentId) {
-    if (!pair) return "";
-    const label = pairBadgeLabel.call(this, pair, agentId);
-    const objective = pair.objective ? " - " + pair.objective : "";
-    return `${label} (${pair.id})${objective}`;
-  }
-
-  function agentAttention(agent) {
-    if (!agent) return emptyAttention();
-    const thread = this.allInboxThreads.find((item) => item.peer === agent.id && !item.archived);
-    const pair = this.agentPair(agent);
-    const pendingPairInvite = pair?.status === "pending";
-    const claimableTasks = countAgentClaimableWaiting(this, agent);
-    const attention = {
-      unread: thread?.attention?.unread || 0,
-      needsHumanResponse: false,
-      agentQuestion: Boolean(thread?.attention?.agentQuestion),
-      pendingPairInvite,
-      claimableTasks,
-    };
-    attention.total = attention.unread +
-      (attention.agentQuestion ? 1 : 0) +
-      (attention.pendingPairInvite ? 1 : 0) +
-      attention.claimableTasks;
-    attention.score = attention.unread * 10 +
-      (attention.agentQuestion ? 3 : 0) +
-      (attention.pendingPairInvite ? 4 : 0) +
-      attention.claimableTasks * 2;
-    return attention;
-  }
-
-  function emptyAttention() {
-    return {
-      unread: 0,
-      agentQuestion: false,
-      pendingPairInvite: false,
-      claimableTasks: 0,
-      total: 0,
-      score: 0,
-    };
-  }
-
-  function agentAttentionTitle(agent) {
-    const attention = agentAttention.call(this, agent);
-    const parts = [];
-    if (attention.unread) parts.push(`${attention.unread} unread`);
-    if (attention.agentQuestion) parts.push("agent asked a question");
-    if (attention.pendingPairInvite) parts.push("pair invite pending");
-    if (attention.claimableTasks) parts.push(`${attention.claimableTasks} claimable waiting`);
-    return parts.join(", ");
-  }
-
-  function agentType(agent) {
-    if (agent?.id === HUMAN_AGENT_ID) return "user";
-    if (agent?.id === "system") return "system";
-    if (isChannelAgent(agent)) return "channel";
-
-    const values = [
-      ...(agent?.tags || []),
-      agent?.meta?.provider,
-      agent?.meta?.client,
-      agent?.meta?.runtime,
-      agent?.meta?.agentType,
-      agent?.id,
-      agent?.name,
-    ]
-      .filter((value) => typeof value === "string")
-      .map((value) => value.toLowerCase());
-
-    if (values.some((value) => value.includes("codex"))) return "codex";
-    if (values.some((value) => value.includes("claude"))) return "claude";
-    return "agent";
-  }
-
-  function agentTypeIcon(agent) {
-    return AGENT_TYPE_ICONS[agentType(agent)] || AGENT_TYPE_ICONS.agent;
-  }
-
-  function agentTypeTitle(agent) {
-    return AGENT_TYPE_TITLES[agentType(agent)] || AGENT_TYPE_TITLES.agent;
-  }
-
-  function agentPresence(agent) {
-    const attention = agentAttention.call(this, agent);
-    const pair = this.agentPair(agent);
-    const stale = isAgentStale(this, agent);
-    const reconnecting = agent?.status !== "offline" && !agent?.ready && stale;
-    const starting = agent?.status !== "offline" && !agent?.ready && !stale;
-    const unreadIdle = attention.unread > 0 && agent?.status !== "busy";
-
-    if (agent?.status === "offline") {
-      return { label: "offline", tone: "secondary", icon: "ti-plug-off", stale: false, reconnecting: false, badges: presenceBadges(attention, pair, { offline: true }) };
-    }
-    if (reconnecting) {
-      return { label: "reconnecting", tone: "danger", icon: "ti-refresh", stale, reconnecting, badges: presenceBadges(attention, pair, { reconnecting }) };
-    }
-    if (starting) {
-      return { label: "online, not ready", tone: "warning", icon: "ti-loader", stale, reconnecting, badges: presenceBadges(attention, pair, { starting }) };
-    }
-    if (agent?.status === "busy") {
-      return { label: "busy in turn", tone: "warning", icon: "ti-player-play", stale, reconnecting, badges: presenceBadges(attention, pair, { busy: true }) };
-    }
-    if (pair?.status === "active") {
-      return { label: "paired", tone: "success", icon: "ti-link", stale, reconnecting, badges: presenceBadges(attention, pair, { paired: true }) };
-    }
-    if (unreadIdle) {
-      return { label: "idle, unread", tone: "danger", icon: "ti-bell", stale, reconnecting, badges: presenceBadges(attention, pair, { unreadIdle: true }) };
-    }
-    return { label: agent?.status === "idle" ? "idle" : "ready", tone: "success", icon: "ti-circle-check", stale, reconnecting, badges: presenceBadges(attention, pair, {}) };
-  }
-
-  function presenceBadges(attention, pair, _flags) {
-    const badges = [];
-    if (pair?.status === "active") badges.push({ label: "paired", className: "bg-success-lt" });
-    if (pair?.status === "pending") badges.push({ label: "pair invite pending", className: "bg-warning-lt" });
-    if (attention.unread) badges.push({ label: attention.unread + " unread", className: "bg-danger-lt" });
-    if (attention.agentQuestion) badges.push({ label: "question", className: "bg-info-lt" });
-    if (attention.claimableTasks) badges.push({ label: attention.claimableTasks + " claimable", className: "bg-orange-lt" });
-    return badges;
-  }
-
-  function agentPresenceBadges(agent) {
-    return agentPresence.call(this, agent).badges;
-  }
-
-  function agentStatusClass(agent) {
-    const presence = agentPresence.call(this, agent);
-    return [
-      agent?.status || "offline",
-      agent?.status !== "offline" && !agent?.ready ? "not-ready" : "",
-      presence.stale ? "stale" : "",
-      presence.reconnecting ? "reconnecting" : "",
-      presence.label === "paired" ? "paired" : "",
-      presence.label === "idle, unread" ? "attention" : "",
-    ].filter(Boolean).join(" ");
-  }
-
-  function severityClass(severity) {
-    if (severity === "critical") return "bg-danger-lt";
-    if (severity === "warning") return "bg-warning-lt";
-    return "bg-info-lt";
-  }
-
-  function integrationPresence(integration) {
-    const stats = integration?.taskStats || {};
-    if ((stats.waitingTasks || 0) > 0) return { label: "waiting", tone: "warning", icon: "ti-alert-circle" };
-    if ((stats.openTasks || 0) > 0) return { label: "active", tone: "info", icon: "ti-activity" };
-    if (!integration?.configured) return { label: "observed only", tone: "secondary", icon: "ti-eye" };
-    if (integration.observed) return { label: "quiet", tone: "success", icon: "ti-circle-check" };
-    return { label: "configured", tone: "primary", icon: "ti-plug-connected" };
-  }
-
-  function connectorPresence(connector) {
-    const runtime = connector?.runtime || {};
-    if (runtime.status === "error") return { label: "error", tone: "danger", icon: "ti-alert-triangle" };
-    if (runtime.status === "warn") return { label: "warning", tone: "warning", icon: "ti-alert-circle" };
-    if (runtime.running) return { label: "running", tone: "success", icon: "ti-circle-check" };
-    if (runtime.enabled === false) return { label: "disabled", tone: "secondary", icon: "ti-player-pause" };
-    if (runtime.status === "ok") return { label: "ok", tone: "success", icon: "ti-circle-check" };
-    return { label: "unknown", tone: "secondary", icon: "ti-help-circle" };
-  }
-
-  function agentChannels(agent) {
-    if (!agent) return [];
-    return (this.channels || []).filter((ch) => ch.agentId === agent.id);
-  }
-
-  function channelPresence(channel) {
-    if (!channel) return { label: "unknown", tone: "secondary", icon: "ti-plug-off" };
-    if (channel.targetHealth?.status === "error") return { label: "target broken", tone: "danger", icon: "ti-alert-triangle" };
-    if (channel.targetHealth?.status === "warning") return { label: "target warning", tone: "warning", icon: "ti-alert-circle" };
-    if (channel.status === "offline") return { label: "offline", tone: "secondary", icon: "ti-plug-off" };
-    if (!channel.ready) return { label: "not ready", tone: "warning", icon: "ti-loader" };
-    if (channel.status === "busy") return { label: "busy", tone: "warning", icon: "ti-activity" };
-    return { label: "ready", tone: "success", icon: "ti-circle-check" };
-  }
-
-  function agentStatusTitle(agent) {
-    if (!agent) return "";
-    if (agent.status === "offline") return "offline";
-    if (isAgentStale(this, agent) && !agent.ready) return "reconnecting";
-    if (isAgentStale(this, agent)) return "stale heartbeat";
-    if (agent.status === "busy") return "busy in turn";
-    if (this.agentPair(agent)?.status === "active") return "paired";
-    if (agentAttention.call(this, agent).unread) return "idle but has unread";
-    if (agent.ready) return agent.status;
-
-    const lastSeenMs = new Date(agent.lastSeen).getTime();
-    if (!Number.isFinite(lastSeenMs)) return "Trying to reconnect...";
-
-    const ageSec = Math.max(0, ((this.now || Date.now()) - lastSeenMs) / 1000);
-    return ageSec <= 45 ? "Starting up..." : "Trying to reconnect...";
-  }
-
-  function timeAgo(iso) {
-    if (!iso) return "";
-    const ts = new Date(iso).getTime();
-    if (!Number.isFinite(ts)) return "";
-
-    const diff = Math.max(0, ((this.now || Date.now()) - ts) / 1000);
-    if (diff < 60) return Math.floor(diff) + "s ago";
-    if (diff < 3600) return Math.floor(diff / 60) + "m ago";
-    if (diff < 86400) return Math.floor(diff / 3600) + "h ago";
-    return Math.floor(diff / 86400) + "d ago";
-  }
-
-  function fmtTime(iso) {
-    if (!iso) return "";
-    return new Date(iso).toLocaleString();
-  }
-
-  function healthAlertClass(status) {
-    if (status === "error") return "alert-danger";
-    if (status === "degraded") return "alert-warning";
-    return "alert-success";
-  }
-
-  function activityKindClass(kind) {
-    if (kind === "question") return "bg-info-lt";
-    if (kind === "task") return "bg-warning-lt";
-    if (kind === "pair") return "bg-success-lt";
-    if (kind === "operator") return "bg-primary-lt";
-    if (kind === "reply") return "bg-purple-lt";
-    return "bg-secondary-lt";
-  }
-
-  function createMessageActions() {
-    return {
-      openCompose,
-      openComposeToAgent,
-      openComposeToInboxThread,
-      openInboxThread,
-      markInboxThreadRead,
-      markInboxThreadUnread,
-      archiveInboxThread,
-      unarchiveInboxThread,
-      confirmDeleteInboxThread,
-      doDeleteInboxThread,
-      replyDraftForThread,
-      setReplyDraft,
-      clearReplyDraft,
-      sendInboxReply,
-      resetInboxComposeTarget,
-      doSendInboxCompose,
-      startReply,
-      cancelReply,
-      doSend,
-      doClaim,
-      doClaimTask,
-      doUpdateTaskStatus,
-      doDeleteMessage,
-      openThread,
-      openTaskEvents,
-      recordOperatorActivity,
-      openActivityItem,
-      runHealthAction,
-      runConnectorAction,
-      openCommandPalette,
-      closeCommandPalette,
-      runCommand,
-      exportActivity,
-      exportThread,
-      exportPair,
-      exportTask,
-    };
-  }
-
-  function createPairActions() {
-    return {
-      openPairMessage,
-      closePairMessage,
-      openPairInvite,
-      closePairInvite,
-      doCreatePair,
-      openAgentSpawn,
-      closeAgentSpawn,
-      doSpawnAgent,
-      openAgentDirectoryBrowser,
-      browseAgentDirectory,
-      selectAgentDirectory,
-      openOrchestratorSpawn,
-      openOrchestratorSpawnFor,
-      browseOrchestratorDirs,
-      submitOrchestratorSpawn,
-      orchestratorAction,
-      deleteOrchestrator,
-      doSendPairMessage,
-      doAcceptPair,
-      doRejectPair,
-      doHangupPair,
-    };
-  }
-
-  function focusComposeBody(vm) {
-    vm.$nextTick(() => vm.$refs.composeBody?.focus());
-  }
-
-  function openCompose() {
-    if (!this.replyTo) this.compose = { ...DEFAULT_COMPOSE, from: "user" };
-    this.composeOpen = true;
-    focusComposeBody(this);
-  }
-
-  function openComposeToAgent(agent) {
-    this.replyTo = null;
-    this.compose = { ...DEFAULT_COMPOSE, from: "user", to: agent.id };
-    this.composeOpen = true;
-    focusComposeBody(this);
-  }
-
-  function openComposeToInboxThread(thread) {
-    if (!thread) return;
-    this.replyTo = thread.lastMessage ? { id: thread.lastMessage.id, from: thread.lastMessage.from } : null;
-    this.compose = { ...DEFAULT_COMPOSE, from: HUMAN_AGENT_ID, to: thread.peer, channel: thread.lastMessage?.channel || "" };
-    this.composeOpen = true;
-    focusComposeBody(this);
-  }
-
-  function openInboxThread(thread) {
-    this.selectedInboxThread = thread?.id || "";
-    this.markInboxThreadRead(thread);
-  }
-
-  function markInboxThreadRead(thread) {
-    if (!thread?.peer || !thread.messages?.length) return;
-    const lastInboundId = maxMessageId(thread.messages, isHumanInboundMessage);
-    if (lastInboundId <= readCursorForPeer(this, thread.peer)) return;
-    this.inboxReadCursors = { ...this.inboxReadCursors, [thread.peer]: lastInboundId };
-    savePref("inboxReadCursors", this.inboxReadCursors);
-    void saveInboxThreadState(this, {
-      peerId: thread.peer,
-      readCursorMessageId: lastInboundId,
-    });
-  }
-
-  function markInboxThreadUnread(thread) {
-    if (!thread?.peer) return;
-    const next = { ...this.inboxReadCursors };
-    delete next[thread.peer];
-    this.inboxReadCursors = next;
-    savePref("inboxReadCursors", this.inboxReadCursors);
-    this.recordOperatorActivity({
-      title: "Marked thread unread",
-      body: this.conversationTitle(thread),
-      meta: "Inbox",
-      icon: "ti-mail",
-      view: "inbox",
-      peer: thread.peer,
-    });
-    void saveInboxThreadState(this, {
-      peerId: thread.peer,
-      readCursorMessageId: null,
-    });
-  }
-
-  function archiveInboxThread(thread) {
-    if (!thread?.peer || !thread.lastMessage) return;
-    this.inboxArchivedThreads = { ...this.inboxArchivedThreads, [thread.peer]: thread.lastMessage.id };
-    savePref("inboxArchivedThreads", this.inboxArchivedThreads);
-    this.recordOperatorActivity({
-      title: "Archived thread",
-      body: this.conversationTitle(thread),
-      meta: "Inbox",
-      icon: "ti-archive",
-      view: "inbox",
-      peer: thread.peer,
-    });
-    void saveInboxThreadState(this, {
-      peerId: thread.peer,
-      archivedAtMessageId: thread.lastMessage.id,
-    });
-    if (this.selectedInboxThread === thread.id) this.selectedInboxThread = "";
-  }
-
-  function unarchiveInboxThread(thread) {
-    if (!thread?.peer) return;
-    const next = { ...this.inboxArchivedThreads };
-    delete next[thread.peer];
-    this.inboxArchivedThreads = next;
-    savePref("inboxArchivedThreads", this.inboxArchivedThreads);
-    this.recordOperatorActivity({
-      title: "Unarchived thread",
-      body: this.conversationTitle(thread),
-      meta: "Inbox",
-      icon: "ti-archive-off",
-      view: "inbox",
-      peer: thread.peer,
-    });
-    void saveInboxThreadState(this, {
-      peerId: thread.peer,
-      archivedAtMessageId: null,
-    });
-  }
-
-  async function saveInboxThreadState(vm, patch) {
-    try {
-      await vm.api("PATCH", "/inbox/threads", { operatorId: INBOX_OPERATOR_ID, ...patch });
-    } catch {}
-  }
-
-  function confirmDeleteInboxThread(thread) {
-    if (!thread) return;
-    this.openConfirm(
-      "Delete Thread",
-      `Delete ${thread.messages.length} message(s) in ${this.conversationTitle(thread)}? This cannot be undone.`,
-      () => this.doDeleteInboxThread(thread)
-    );
-  }
-
-  async function doDeleteInboxThread(thread) {
-    if (!thread?.messages?.length) return;
-    try {
-      await Promise.all(thread.messages.map((msg) => this.api("DELETE", "/messages/" + msg.id)));
-      this.messages = this.messages.filter((msg) => !thread.messages.some((item) => item.id === msg.id));
-      this.selectedInboxThread = "";
-      this.clearReplyDraft(thread);
-      this.recordOperatorActivity({
-        title: "Deleted thread",
-        body: this.conversationTitle(thread),
-        meta: thread.messages.length + " message(s)",
-        icon: "ti-trash",
-        view: "inbox",
-      });
-    } catch (e) {
-      alert("Delete thread failed: " + e.message);
-    }
-  }
-
-  function replyDraftForThread(thread) {
-    return thread?.peer ? draftForPeer(this, thread.peer) : "";
-  }
-
-  function setReplyDraft(thread, value) {
-    if (!thread?.peer) return;
-    const next = { ...this.inboxDrafts, [thread.peer]: value };
-    if (!value) delete next[thread.peer];
-    this.inboxDrafts = next;
-    savePref("inboxDrafts", this.inboxDrafts);
-    if (value) {
-      void saveInboxDraft(this, thread.peer, value);
-    } else {
-      void deleteInboxDraftState(this, thread.peer);
-    }
-  }
-
-  function clearReplyDraft(thread) {
-    if (!thread?.peer) return;
-    this.setReplyDraft(thread, "");
-  }
-
-  async function saveInboxDraft(vm, peerId, body) {
-    try {
-      await vm.api("PUT", "/inbox/drafts", { operatorId: INBOX_OPERATOR_ID, peerId, body });
-    } catch {}
-  }
-
-  async function deleteInboxDraftState(vm, peerId) {
-    try {
-      await vm.api("DELETE", "/inbox/drafts?operatorId=" + encodeURIComponent(INBOX_OPERATOR_ID) + "&peerId=" + encodeURIComponent(peerId));
-    } catch {}
-  }
-
-  async function sendInboxReply(thread) {
-    if (!thread) return;
-    const body = this.replyDraftForThread(thread).trim();
-    if (!body) {
-      alert("Reply body is required.");
-      return;
-    }
-
-    try {
-      const payload = {
-        from: HUMAN_AGENT_ID,
-        to: thread.peer,
-        body,
-      };
-      if (thread.lastMessage?.channel) payload.channel = thread.lastMessage.channel;
-      if (thread.lastMessage?.id) payload.replyTo = thread.lastMessage.id;
-      await this.api("POST", "/messages", payload);
-      this.recordOperatorActivity({
-        title: "Reply sent",
-        body,
-        meta: "to " + this.displayTarget(thread.peer),
-        icon: "ti-corner-up-left",
-        view: "inbox",
-        peer: thread.peer,
-      });
-      this.clearReplyDraft(thread);
-      this.markInboxThreadRead(thread);
-      await this.fetchMessages();
-    } catch (e) {
-      alert("Reply failed: " + e.message);
-    }
-  }
-
-  function resetInboxComposeTarget() {
-    this.inboxCompose = { ...this.inboxCompose, to: "", claimable: false };
-  }
-
-  function inboxComposeTarget(vm) {
-    const target = vm.inboxCompose.to;
-    if (!target) return "";
-    if (vm.inboxCompose.toMode === "tag") return "tag:" + target;
-    if (vm.inboxCompose.toMode === "cap") return "cap:" + target;
-    return target;
-  }
-
-  async function doSendInboxCompose() {
-    const target = inboxComposeTarget(this);
-    if (!target || !this.inboxCompose.body) {
-      alert("Target and Message are required.");
-      return;
-    }
-
-    try {
-      const payload = {
-        from: HUMAN_AGENT_ID,
-        to: target,
-        body: this.inboxCompose.body,
-      };
-      if (this.inboxCompose.channel) payload.channel = this.inboxCompose.channel;
-      if (this.inboxCompose.subject) payload.subject = this.inboxCompose.subject;
-      if (this.inboxCompose.claimable && inboxComposeTargetAllowsClaimable.call(this)) {
-        payload.claimable = true;
-        payload.kind = "task";
-        payload.payload = { title: this.inboxCompose.subject || "Claimable task" };
-      }
-      await this.api("POST", "/messages", payload);
-      this.recordOperatorActivity({
-        title: payload.claimable ? "Claimable task sent" : "Message sent",
-        body: this.inboxCompose.subject || this.inboxCompose.body,
-        meta: "to " + this.displayTarget(target),
-        icon: payload.claimable ? "ti-hand-grab" : "ti-send",
-        kind: payload.claimable ? "task" : "operator",
-        view: inboxPeer(payload) ? "inbox" : "messages",
-        peer: inboxPeer(payload),
-      });
-      this.inboxCompose = { ...DEFAULT_INBOX_COMPOSE, toMode: this.inboxCompose.toMode, to: this.inboxCompose.to };
-      await this.fetchMessages();
-    } catch (e) {
-      alert("Send failed: " + e.message);
-    }
-  }
-
-  function startReply(msg) {
-    const replyTarget = msg.from === HUMAN_AGENT_ID ? msg.to : msg.from;
-    this.replyTo = { id: msg.id, from: msg.from };
-    this.compose = {
-      ...DEFAULT_COMPOSE,
-      from: HUMAN_AGENT_ID,
-      to: replyTarget,
-      channel: msg.channel || "",
-    };
-    this.openCompose();
-  }
-
-  function cancelReply() {
-    this.replyTo = null;
-  }
-
-  function buildMessagePayload(vm) {
-    const payload = {
-      from: vm.compose.from,
-      to: vm.compose.to,
-      body: vm.compose.body,
-    };
-    if (vm.compose.channel) payload.channel = vm.compose.channel;
-    if (vm.compose.subject) payload.subject = vm.compose.subject;
-    if (vm.replyTo) payload.replyTo = vm.replyTo.id;
-    if (vm.compose.claimable && composeTargetAllowsClaimable.call(vm)) {
-      payload.claimable = true;
-      payload.kind = "task";
-      payload.payload = { title: vm.compose.subject || "Claimable task" };
-    }
-    return payload;
-  }
-
-  async function doSend() {
-    if (!this.compose.from || !this.compose.to || !this.compose.body) {
-      alert("From, To, and Message are required.");
-      return;
-    }
-
-    try {
-      const payload = buildMessagePayload(this);
-      await this.api("POST", "/messages", payload);
-      this.recordOperatorActivity({
-        title: payload.claimable ? "Claimable task sent" : "Message sent",
-        body: payload.subject || payload.body,
-        meta: `${this.displayTarget(payload.from)} -> ${this.displayTarget(payload.to)}`,
-        icon: payload.claimable ? "ti-hand-grab" : "ti-send",
-        kind: payload.claimable ? "task" : "operator",
-        view: inboxPeer(payload) ? "inbox" : "messages",
-        peer: inboxPeer(payload),
-      });
-      this.composeOpen = false;
-      this.replyTo = null;
-      this.compose = { ...DEFAULT_COMPOSE, from: HUMAN_AGENT_ID };
-      await this.fetchMessages();
-    } catch (e) {
-      alert("Send failed: " + e.message);
-    }
-  }
-
-  async function doClaim(msgId) {
-    if (!this.compose.from && !this.selectedAgent) {
-      alert('Select a "From" agent first (open Compose to pick one).');
-      return;
-    }
-
-    const agentId = this.compose.from || this.selectedAgent;
-    try {
-      const result = await this.api("POST", "/messages/" + msgId + "/claim", { agentId });
-      if (!result.ok) alert("Claim failed: " + (result.error || "unknown"));
-      else this.recordOperatorActivity({
-        title: "Claim requested",
-        body: "Message #" + msgId,
-        meta: "as " + this.displayTarget(agentId),
-        icon: "ti-hand-grab",
-        kind: "task",
-        view: "tasks",
-      });
-      if (result.ok) await Promise.all([this.fetchMessages(), this.fetchTasks()]);
-    } catch (e) {
-      alert("Claim failed: " + e.message);
-    }
-  }
-
-  async function doClaimTask(taskId) {
-    if (!this.compose.from && !this.selectedAgent) {
-      alert('Select an agent first (use the Messages agent filter or Compose From).');
-      return;
-    }
-
-    const agentId = this.compose.from || this.selectedAgent;
-    try {
-      const result = await this.api("POST", "/tasks/" + taskId + "/claim", { agentId });
-      if (!result.ok) alert("Task claim failed: " + (result.error || "unknown"));
-      else {
-        this.recordOperatorActivity({
-          title: "Task claimed",
-          body: "Task #" + taskId,
-          meta: "as " + this.displayTarget(agentId),
-          icon: "ti-user-check",
-          kind: "task",
-          view: "work",
-          taskId,
-          agentId,
-        });
-        await Promise.all([this.fetchTasks(), this.fetchMessages()]);
-      }
-    } catch (e) {
-      alert("Task claim failed: " + e.message);
-    }
-  }
-
-  async function doUpdateTaskStatus(task, status) {
-    if (!task || !status || status === task.status) return;
-    try {
-      const body = { status };
-      const agentId = task.claimedBy || this.compose.from || this.selectedAgent;
-      if (agentId) body.agentId = agentId;
-      const result = await this.api("PATCH", "/tasks/" + task.id + "/status", body);
-      const updated = result.task || result;
-      const idx = this.tasks.findIndex((item) => item.id === task.id);
-      if (idx >= 0) this.tasks[idx] = updated;
-      this.recordOperatorActivity({
-        title: "Task moved to " + status,
-        body: updated.title || "Task #" + task.id,
-        meta: agentId ? "by " + this.displayTarget(agentId) : "Work Queue",
-        icon: "ti-arrows-exchange",
-        kind: "task",
-        view: "work",
-        taskId: task.id,
-        agentId,
-      });
-    } catch (e) {
-      alert("Task status update failed: " + e.message);
-      await this.fetchTasks();
-    }
-  }
-
-  async function doDeleteMessage(id) {
-    try {
-      await this.api("DELETE", "/messages/" + id);
-      this.messages = this.messages.filter((msg) => msg.id !== id);
-      this.recordOperatorActivity({
-        title: "Deleted message",
-        body: "Message #" + id,
-        meta: "Messages",
-        icon: "ti-trash",
-        view: "messages",
-      });
-    } catch (e) {
-      alert("Delete failed: " + e.message);
-    }
-  }
-
-  async function openThread(threadId) {
-    this.threadMessages = [];
-    this.threadOpen = true;
-    try {
-      this.threadMessages = await this.api("GET", "/messages/" + threadId + "/thread");
-    } catch (e) {
-      alert("Failed to load thread: " + e.message);
-    }
-  }
-
-  async function openTaskEvents(task) {
-    this.taskEvents = [];
-    this.taskEventsOpen = true;
-    try {
-      this.taskEvents = await this.api("GET", "/tasks/" + task.id + "/events");
-      this.taskEventCache = { ...this.taskEventCache, [task.id]: this.taskEvents };
-    } catch (e) {
-      alert("Failed to load task events: " + e.message);
-    }
-  }
-
-  function recordOperatorActivity(input) {
-    const item = activityItem({
-      kind: "operator",
-      ts: Date.now(),
-      ...input,
-    });
-    item.id = item.id || "operator-" + item.ts + "-" + (this.operatorActivity?.length || 0);
-    item.clientId = item.clientId || item.id;
-    this.operatorActivity = [
-      item,
-      ...(this.operatorActivity || []).filter((existing) => existing.id !== item.id),
-    ].slice(0, 80);
-    savePref("operatorActivity", this.operatorActivity);
-    void saveActivityEvent(this, item);
-  }
-
-  async function saveActivityEvent(vm, item) {
-    try {
-      const event = await vm.api("POST", "/activity", {
-        operatorId: INBOX_OPERATOR_ID,
-        clientId: item.clientId,
-        kind: item.kind,
-        title: item.title,
-        body: item.body || undefined,
-        meta: item.meta || undefined,
-        icon: item.icon || undefined,
-        view: item.view || undefined,
-        peer: item.peer || undefined,
-        messageId: item.messageId,
-        pairId: item.pairId,
-        taskId: item.taskId,
-        agentId: item.agentId,
-      });
-      const existing = new Set((vm.activityEvents || []).map((entry) => entry.id));
-      vm.activityEvents = existing.has(event.id)
-        ? vm.activityEvents.map((entry) => entry.id === event.id ? event : entry)
-        : [event, ...(vm.activityEvents || [])].slice(0, 200);
-      pruneSyncedOperatorActivity(vm);
-    } catch {}
-  }
-
-  async function openActivityItem(item) {
-    if (!item) return;
-    if (item.view) await this.switchView(item.view);
-    if (item.peer) {
-      const thread = this.allInboxThreads.find((candidate) => candidate.peer === item.peer);
-      if (thread?.archived) this.inboxShowArchived = true;
-      this.selectedInboxThread = item.peer;
-      if (thread) this.markInboxThreadRead(thread);
-    }
-    if (item.agentId && this.agentsById[item.agentId]) this.openAgentDetail(this.agentsById[item.agentId]);
-    if (item.taskId) {
-      const task = this.tasks.find((candidate) => candidate.id === item.taskId);
-      if (task) await this.openTaskEvents(task);
-    }
-  }
-
-  async function runHealthAction(action) {
-    if (!action) return;
-    if (action.preset) {
-      this.agentPresetFilter = action.preset;
-      this.showOffline = true;
-    }
-    if (action.api && action.path) {
-      await this.api(action.api, action.path);
-      await this.refreshLiveData();
-    }
-    if (action.view) await this.switchView(action.view);
-    if (action.copy) await copyText(action.copy);
-  }
-
-  async function runConnectorAction(connector, action) {
-    if (!connector || !action) return;
-    try {
-      await this.api("POST", "/connectors/" + encodeURIComponent(connector.id) + "/actions", { action });
-      await this.fetchConnectors();
-    } catch (e) {
-      alert("Connector action failed: " + e.message);
-    }
-  }
-
-  async function copyText(value) {
-    if (typeof navigator === "undefined") return;
-    try {
-      await navigator.clipboard?.writeText(value);
-    } catch {}
-  }
-
-  function openCommandPalette() {
-    this.commandQuery = "";
-    this.commandPaletteOpen = true;
-    this.$nextTick(() => this.$refs?.commandSearch?.focus());
-  }
-
-  function closeCommandPalette() {
-    this.commandPaletteOpen = false;
-    this.commandQuery = "";
-  }
-
-  async function runCommand(command) {
-    if (!command) return;
-    const payload = command.payload || {};
-    this.closeCommandPalette();
-    if (command.action === "openView") {
-      await this.switchView(payload.view);
-    } else if (command.action === "agentPreset") {
-      this.showOffline = true;
-      this.agentPresetFilter = payload.preset || "";
-      await this.switchView("agents");
-    } else if (command.action === "copy") {
-      await copyText(payload.value || "");
-    } else if (command.action === "messageAgent") {
-      const agent = this.agentsById[payload.agentId];
-      if (agent) this.openComposeToAgent(agent);
-    } else if (command.action === "pairAgent") {
-      this.openPairInvite(payload.agentId);
-    } else if (command.action === "filterTag") {
-      this.agentTagFilter = payload.tag || "";
-      this.tagFilter = payload.tag || "";
-      await this.switchView("agents");
-    } else if (command.action === "exportActivity") {
-      this.exportActivity(payload.format || "markdown");
-    }
-  }
-
-  function exportActivity(format) {
-    exportDocument(this, "timeline", format, {
-      title: "Agent Relay Timeline",
-      items: this.activityItems,
-    });
-  }
-
-  function exportThread(thread, format) {
-    if (!thread) return;
-    exportDocument(this, "thread-" + safeFilename(thread.peer), format, {
-      title: "Thread: " + this.conversationTitle(thread),
-      thread,
-      messages: thread.messages || [],
-    });
-  }
-
-  function exportPair(pair, format) {
-    if (!pair) return;
-    exportDocument(this, "pair-" + safeFilename(pair.id), format, {
-      title: "Pair: " + pair.id,
-      pair,
-      messages: pairMessages(this, pair),
-    });
-  }
-
-  async function exportTask(task, format) {
-    if (!task) return;
-    let events = this.taskEventCache[task.id] || [];
-    if (!events.length) {
-      try {
-        events = await this.api("GET", "/tasks/" + task.id + "/events");
-        this.taskEventCache = { ...this.taskEventCache, [task.id]: events };
-      } catch {
-        events = [];
-      }
-    }
-    exportDocument(this, "task-" + task.id, format, {
-      title: "Task: " + (task.title || "#" + task.id),
-      task,
-      events,
-    });
-  }
-
-  function pairMessages(vm, pair) {
-    return (vm.messages || []).filter((msg) =>
-      msg.payload?.pairId === pair.id ||
-      (msg.payload?.pairEvent && [pair.requesterId, pair.targetId].includes(msg.from) && [pair.requesterId, pair.targetId].includes(msg.to))
-    );
-  }
-
-  function exportDocument(vm, scope, format, data) {
-    const normalizedFormat = format === "json" ? "json" : "markdown";
-    const filename = `agent-relay-${scope}-${new Date().toISOString().slice(0, 10)}.${normalizedFormat === "json" ? "json" : "md"}`;
-    const text = normalizedFormat === "json" ? JSON.stringify(exportJson(data), null, 2) : exportMarkdown(vm, data);
-    downloadText(filename, text, normalizedFormat === "json" ? "application/json" : "text/markdown");
-  }
-
-  function exportJson(data) {
-    return {
-      exportedAt: new Date().toISOString(),
-      ...data,
-    };
-  }
-
-  function exportMarkdown(vm, data) {
-    const lines = ["# " + data.title, "", "Exported: " + new Date().toISOString(), ""];
-    if (data.thread) {
-      lines.push("## Messages", "");
-      appendMessages(lines, vm, data.messages || []);
-    } else if (data.pair) {
-      lines.push("## Pair", "", "- ID: " + data.pair.id, "- Status: " + data.pair.status, "- Requester: " + vm.displayTarget(data.pair.requesterId), "- Target: " + vm.displayTarget(data.pair.targetId));
-      if (data.pair.objective) lines.push("- Objective: " + data.pair.objective);
-      lines.push("", "## Messages", "");
-      appendMessages(lines, vm, data.messages || []);
-    } else if (data.task) {
-      lines.push("## Task", "", "- ID: " + data.task.id, "- Status: " + data.task.status, "- Severity: " + (data.task.severity || "info"), "- Target: " + vm.displayTarget(data.task.target || ""));
-      if (data.task.claimedBy) lines.push("- Claimed by: " + vm.displayTarget(data.task.claimedBy));
-      if (data.task.title) lines.push("- Title: " + data.task.title);
-      if (data.task.body) lines.push("", data.task.body);
-      lines.push("", "## History", "");
-      appendEvents(lines, vm, data.events || []);
-    } else {
-      lines.push("## Events", "");
-      appendActivity(lines, vm, data.items || []);
-    }
-    return lines.join("\n").trim() + "\n";
-  }
-
-  function appendMessages(lines, vm, messages) {
-    if (!messages.length) {
-      lines.push("_No messages loaded._", "");
-      return;
-    }
-    for (const msg of messages) {
-      lines.push(`### #${msg.id} ${vm.displayTarget(msg.from)} -> ${vm.displayTarget(msg.to)}`, "");
-      if (msg.createdAt) lines.push("- Created: " + msg.createdAt);
-      if (msg.channel) lines.push("- Channel: " + msg.channel);
-      if (msg.subject) lines.push("- Subject: " + msg.subject);
-      if (msg.claimedBy) lines.push("- Claimed by: " + vm.displayTarget(msg.claimedBy));
-      lines.push("", messageBody.call(vm, msg) || "", "");
-    }
-  }
-
-  function appendEvents(lines, vm, events) {
-    if (!events.length) {
-      lines.push("_No task events loaded._", "");
-      return;
-    }
-    for (const event of events) {
-      lines.push(`- ${event.createdAt || ""} [${event.severity || "info"}] ${event.type || "event"}: ${event.title || event.body || ""}`.trim());
-    }
-  }
-
-  function appendActivity(lines, vm, items) {
-    if (!items.length) {
-      lines.push("_No activity loaded._", "");
-      return;
-    }
-    for (const item of items) {
-      const when = item.ts ? new Date(item.ts).toISOString() : "";
-      const meta = item.meta ? " - " + item.meta : "";
-      lines.push(`- ${when} [${item.kind}] ${item.title}${meta}`);
-      if (item.body) lines.push("  " + item.body.replace(/\n/g, "\n  "));
-    }
-  }
-
-  function downloadText(filename, text, type) {
-    if (typeof document === "undefined" || typeof URL === "undefined" || typeof Blob === "undefined") {
-      void copyText(text);
-      return;
-    }
-    const url = URL.createObjectURL(new Blob([text], { type }));
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = filename;
-    link.click();
-    URL.revokeObjectURL(url);
-  }
-
-  function safeFilename(value) {
-    return String(value || "export").replace(/[^a-z0-9._-]+/gi, "-").replace(/^-+|-+$/g, "").slice(0, 80) || "export";
-  }
-
-  function openPairMessage(pair, fromId) {
-    if (!pair) return;
-    this.pairMessage = {
-      ...DEFAULT_PAIR_MESSAGE,
-      pairId: pair.id,
-      from: fromId || pair.requesterId || pair.targetId || "",
-    };
-    this.pairMessageOpen = true;
-    this.$nextTick(() => this.$refs?.pairMessageBody?.focus());
-  }
-
-  function openPairInvite(requesterId) {
-    this.pairInvite = {
-      ...DEFAULT_PAIR_INVITE,
-      requesterId: requesterId || this.selectedAgent || "",
-    };
-    this.pairInviteOpen = true;
-    this.$nextTick(() => this.$refs?.pairInviteObjective?.focus());
-  }
-
-  function closePairInvite() {
-    this.pairInviteOpen = false;
-    this.pairInvite = { ...DEFAULT_PAIR_INVITE };
-  }
-
-  async function doCreatePair() {
-    if (!this.pairInvite.requesterId || !this.pairInvite.targetId) {
-      alert("Requester and Target are required.");
-      return;
-    }
-    if (this.pairInvite.requesterId === this.pairInvite.targetId) {
-      alert("Requester and Target must be different agents.");
-      return;
-    }
-
-    try {
-      const payload = {
-        from: this.pairInvite.requesterId,
-        target: this.pairInvite.targetId,
-      };
-      if (this.pairInvite.objective) payload.objective = this.pairInvite.objective;
-      await this.api("POST", "/pairs", payload);
-      this.recordOperatorActivity({
-        title: "Pair invite sent",
-        body: payload.objective || "",
-        meta: `${this.displayTarget(payload.from)} <-> ${this.displayTarget(payload.target)}`,
-        icon: "ti-link-plus",
-        kind: "pair",
-        view: "pairs",
-      });
-      this.closePairInvite();
-      await Promise.all([this.fetchPairs(), this.fetchMessages()]);
-    } catch (e) {
-      alert("Pair invite failed: " + e.message);
-    }
-  }
-
-  function openAgentSpawn() {
-    this.agentSpawn = { ...DEFAULT_AGENT_SPAWN };
-    this.agentDirectoryBrowser = { open: false, loading: false, path: "", parent: "", home: "", cwd: "", entries: [], error: "" };
-    this.agentSpawnOpen = true;
-    this.$nextTick(() => this.$refs?.agentSpawnCwd?.focus());
-  }
-
-  function closeAgentSpawn() {
-    this.agentSpawnOpen = false;
-    this.agentSpawn = { ...DEFAULT_AGENT_SPAWN };
-  }
-
-  async function openAgentDirectoryBrowser() {
-    this.agentDirectoryBrowser = { ...this.agentDirectoryBrowser, open: true };
-    await this.browseAgentDirectory(this.agentSpawn.cwd || "");
-  }
-
-  async function browseAgentDirectory(path) {
-    this.agentDirectoryBrowser = { ...this.agentDirectoryBrowser, loading: true, error: "" };
-    try {
-      const query = path ? "?path=" + encodeURIComponent(path) : "";
-      const listing = await this.api("GET", "/agents/spawn/directories" + query);
-      this.agentDirectoryBrowser = {
-        open: true,
-        loading: false,
-        path: listing.path || "",
-        parent: listing.parent || "",
-        home: listing.home || "",
-        cwd: listing.cwd || "",
-        entries: listing.entries || [],
-        error: "",
-      };
-      this.agentSpawn = { ...this.agentSpawn, cwd: listing.path || this.agentSpawn.cwd };
-    } catch (e) {
-      this.agentDirectoryBrowser = { ...this.agentDirectoryBrowser, loading: false, error: e.message };
-    }
-  }
-
-  function selectAgentDirectory(path) {
-    this.agentSpawn = { ...this.agentSpawn, cwd: path || this.agentDirectoryBrowser.path };
-    this.agentDirectoryBrowser = { ...this.agentDirectoryBrowser, open: false };
-  }
-
-  async function doSpawnAgent() {
-    if (this.agentSpawn.provider !== "codex") {
-      alert("Only Codex live sessions can be spawned from the dashboard right now.");
-      return;
-    }
-    try {
-      const payload = {
-        provider: "codex",
-        approvalMode: this.agentSpawn.approvalMode || "guarded",
-      };
-      if (this.agentSpawn.cwd) payload.cwd = this.agentSpawn.cwd;
-      if (this.agentSpawn.label) payload.label = this.agentSpawn.label;
-      const result = await this.api("POST", "/agents/spawn", payload);
-      this.recordOperatorActivity({
-        title: "Codex agent spawn requested",
-        body: result?.cwd || payload.cwd || "",
-        meta: result?.pid ? "pid " + result.pid : "starting",
-        icon: "ti-plus",
-        kind: "state",
-        view: "agents",
-      });
-      this.closeAgentSpawn();
-      await Promise.all([this.fetchAgents(), this.fetchActivityEvents()]);
-    } catch (e) {
-      alert("Spawn failed: " + e.message);
-    }
-  }
-
-  // --- Orchestrator methods ---
-
-  function openOrchestratorSpawn() {
-    const online = this.orchestrators.filter((o) => o.status === "online");
-    if (online.length === 0) return alert("No orchestrators online");
-    this.spawnOrchId = online[0].id;
-    this.spawnProvider = "claude";
-    this.spawnCwd = "";
-    this.spawnLabel = "";
-    this.spawnApproval = "guarded";
-    this.spawnPrompt = "";
-    this.spawnDirListing = null;
-    this.orchestratorSpawnOpen = true;
-  }
-
-  function openOrchestratorSpawnFor(orchId) {
-    this.spawnOrchId = orchId;
-    this.spawnProvider = "claude";
-    this.spawnCwd = "";
-    this.spawnLabel = "";
-    this.spawnApproval = "guarded";
-    this.spawnPrompt = "";
-    this.spawnDirListing = null;
-    this.orchestratorSpawnOpen = true;
-  }
-
-  async function browseOrchestratorDirs() {
-    try {
-      const query = this.spawnCwd ? "?path=" + encodeURIComponent(this.spawnCwd) : "";
-      this.spawnDirListing = await this.api("GET", "/agents/spawn/directories" + query);
-    } catch (e) {
-      alert("Directory browse failed: " + e.message);
-    }
-  }
-
-  async function submitOrchestratorSpawn() {
-    if (!this.spawnOrchId) return alert("Select an orchestrator");
-    try {
-      const payload = {
-        provider: this.spawnProvider,
-        approvalMode: this.spawnApproval,
-      };
-      if (this.spawnCwd) payload.cwd = this.spawnCwd;
-      if (this.spawnLabel) payload.label = this.spawnLabel;
-      if (this.spawnPrompt) payload.prompt = this.spawnPrompt;
-      await this.api("POST", "/orchestrators/" + encodeURIComponent(this.spawnOrchId) + "/spawn", payload);
-      this.orchestratorSpawnOpen = false;
-      this.recordOperatorActivity({
-        title: `${this.spawnProvider} agent spawn requested`,
-        body: this.spawnCwd || "",
-        meta: this.spawnOrchId,
-        icon: "ti-plus",
-        kind: "state",
-        view: "orchestrators",
-      });
-      await Promise.all([this.fetchOrchestrators(), this.fetchActivityEvents()]);
-    } catch (e) {
-      alert("Spawn failed: " + e.message);
-    }
-  }
-
-  async function orchestratorAction(orchId, action, agentId) {
-    const label = action === "restart" ? "Restart" : "Shutdown";
-    if (!confirm(`${label} agent "${agentId || "all"}" on orchestrator "${orchId}"?`)) return;
-    try {
-      await this.api("POST", "/orchestrators/" + encodeURIComponent(orchId) + "/actions", { action, agentId });
-      this.recordOperatorActivity({
-        title: `Agent ${action} requested`,
-        body: agentId || "all agents",
-        meta: orchId,
-        icon: action === "restart" ? "ti-refresh" : "ti-power",
-        kind: "state",
-        view: "orchestrators",
-      });
-      await Promise.all([this.fetchOrchestrators(), this.fetchActivityEvents()]);
-    } catch (e) {
-      alert(`${label} failed: ` + e.message);
-    }
-  }
-
-  async function deleteOrchestrator(orchId) {
-    if (!confirm(`Remove orchestrator "${orchId}"? This will NOT stop its managed agents.`)) return;
-    try {
-      await this.api("DELETE", "/orchestrators/" + encodeURIComponent(orchId));
-      await this.fetchOrchestrators();
-    } catch (e) {
-      alert("Delete failed: " + e.message);
-    }
-  }
-
-  function closePairMessage() {
-    this.pairMessageOpen = false;
-    this.pairMessage = { ...DEFAULT_PAIR_MESSAGE };
-  }
-
-  async function doSendPairMessage() {
-    if (!this.pairMessage.pairId || !this.pairMessage.from || !this.pairMessage.body) {
-      alert("Pair, From, and Message are required.");
-      return;
-    }
-
-    try {
-      const payload = { from: this.pairMessage.from, body: this.pairMessage.body };
-      if (this.pairMessage.subject) payload.subject = this.pairMessage.subject;
-      await this.api("POST", "/pairs/" + encodeURIComponent(this.pairMessage.pairId) + "/messages", payload);
-      this.recordOperatorActivity({
-        title: "Pair message sent",
-        body: payload.subject || payload.body,
-        meta: "from " + this.displayTarget(payload.from),
-        icon: "ti-messages",
-        kind: "pair",
-        view: "pairs",
-      });
-      this.closePairMessage();
-      await Promise.all([this.fetchPairs(), this.fetchMessages()]);
-    } catch (e) {
-      alert("Pair message failed: " + e.message);
-    }
-  }
-
-  async function doAcceptPair(pair) {
-    if (!pair) return;
-    try {
-      await this.api("POST", "/pairs/" + encodeURIComponent(pair.id) + "/accept", { agentId: pair.targetId });
-      this.recordOperatorActivity({
-        title: "Pair accepted",
-        body: pair.objective || "",
-        meta: `${this.displayTarget(pair.requesterId)} <-> ${this.displayTarget(pair.targetId)}`,
-        icon: "ti-check",
-        kind: "pair",
-        view: "pairs",
-      });
-      await Promise.all([this.fetchPairs(), this.fetchMessages()]);
-    } catch (e) {
-      alert("Accept failed: " + e.message);
-    }
-  }
-
-  async function doRejectPair(pair) {
-    if (!pair) return;
-    try {
-      await this.api("POST", "/pairs/" + encodeURIComponent(pair.id) + "/reject", { agentId: pair.targetId });
-      this.recordOperatorActivity({
-        title: "Pair rejected",
-        body: pair.objective || "",
-        meta: `${this.displayTarget(pair.requesterId)} <-> ${this.displayTarget(pair.targetId)}`,
-        icon: "ti-x",
-        kind: "pair",
-        view: "pairs",
-      });
-      await Promise.all([this.fetchPairs(), this.fetchMessages()]);
-    } catch (e) {
-      alert("Reject failed: " + e.message);
-    }
-  }
-
-  async function doHangupPair(pair, agentId) {
-    if (!pair) return;
-    try {
-      await this.api("POST", "/pairs/" + encodeURIComponent(pair.id) + "/hangup", { agentId: agentId || pair.requesterId });
-      this.recordOperatorActivity({
-        title: "Pair hung up",
-        body: pair.objective || "",
-        meta: "by " + this.displayTarget(agentId || pair.requesterId),
-        icon: "ti-phone-off",
-        kind: "pair",
-        view: "pairs",
-      });
-      await Promise.all([this.fetchPairs(), this.fetchMessages()]);
-    } catch (e) {
-      alert("Hang up failed: " + e.message);
-    }
-  }
-
-  function createAgentActions() {
-    return {
-      openAgentDetail(agent) {
-        if (!agent) return;
-        this.agentDetailId = agent.id;
-        this.agentDetailOpen = true;
-      },
-
-      closeAgentDetail() {
-        this.agentDetailOpen = false;
-      },
-
-      openChannelDetail(channel) {
-        if (!channel) return;
-        this.channelDetailId = channel.id;
-        this.channelDetailOpen = true;
-      },
-
-      closeChannelDetail() {
-        this.channelDetailOpen = false;
-      },
-
-      openRename(agent) {
-        this.renameModal = { show: true, agentId: agent.id, label: agent.label || "" };
-        this.$nextTick(() => this.$refs.renameInput?.focus());
-      },
-
-      async doRename() {
-        const label = this.renameModal.label.trim() || null;
-        try {
-          await this.api("PATCH", "/agents/" + this.renameModal.agentId + "/label", { label });
-          this.renameModal.show = false;
-        } catch (e) {
-          alert("Rename failed: " + e.message);
-        }
-      },
-
-      openConfirm(title, message, action) {
-        this.confirmModal = { show: true, title, message, action };
-      },
-
-      async doDeleteAgent(id) {
-        try {
-          await this.api("DELETE", "/agents/" + id);
-          if (this.selectedAgent === id) this.selectedAgent = "";
-          this.agents = this.agents.filter((agent) => agent.id !== id);
-          delete this.agentsById[id];
-        } catch (e) {
-          alert("Delete failed: " + e.message);
-        }
-      },
-
-      async doAgentAction(agent, action) {
-        if (!agent || !action) return;
-        try {
-          const result = await this.api("POST", "/agents/" + encodeURIComponent(agent.id) + "/actions", { action });
-          this.recordOperatorActivity({
-            title: action === "restart" ? "Agent restart requested" : "Agent shutdown requested",
-            body: this.displayName(agent),
-            meta: agent.id,
-            icon: action === "restart" ? "ti-refresh" : "ti-power",
-            kind: "state",
-            view: "agents",
-            agentId: agent.id,
-            messageId: result?.message?.id,
-          });
-          await Promise.all([this.fetchMessages(), this.fetchActivityEvents()]);
-        } catch (e) {
-          alert("Agent action failed: " + e.message);
-        }
-      },
-    };
-  }
-
-  function createChartMethods() {
-    return {
-      renderCharts,
-      renderVolumeChart,
-      renderStatusChart,
-      renderAgentChart,
-      destroyAllCharts,
-    };
-  }
-
-  function renderCharts() {
-    this.renderVolumeChart();
-    this.renderStatusChart();
-    this.renderAgentChart();
-  }
-
-  function renderVolumeChart() {
-    const data = buildVolumeSeries(this.messages);
-
-    if (this.chartInstances.volume) {
-      this.chartInstances.volume.updateSeries([{ name: "Messages", data }]);
-      return;
-    }
-
-    const el = document.querySelector("#chart-volume");
-    if (!el) return;
-
-    this.chartInstances.volume = new ApexCharts(el, {
-      chart: { type: "area", height: 280, background: "transparent", toolbar: { show: false }, animations: { dynamicAnimation: { speed: 350 } } },
-      theme: { mode: "dark" },
-      series: [{ name: "Messages", data }],
-      xaxis: { type: "datetime" },
-      stroke: { curve: "smooth", width: 2 },
-      fill: { type: "gradient", gradient: { opacityFrom: 0.4, opacityTo: 0 } },
-      dataLabels: { enabled: false },
-      colors: ["#4299e1"],
-      grid: { borderColor: "rgba(255,255,255,0.06)" },
-    });
-    this.chartInstances.volume.render();
-  }
-
-  function buildVolumeSeries(messages) {
-    const buckets = {};
-    for (const msg of messages) {
-      const day = msg.createdAt ? new Date(msg.createdAt).toISOString().split("T")[0] : null;
-      if (day) buckets[day] = (buckets[day] || 0) + 1;
-    }
-    return Object.entries(buckets)
-      .sort((a, b) => a[0].localeCompare(b[0]))
-      .map(([day, count]) => ({ x: day, y: count }));
-  }
-
-  function renderStatusChart() {
-    const { labels, series } = countAgentStatuses(this.agents);
-    const colorMap = { idle: "#4299e1", busy: "#ecc94b" };
-
-    if (this.chartInstances.status) {
-      this.chartInstances.status.updateOptions({
-        series,
-        labels,
-        colors: labels.map((label) => colorMap[label] || "#718096"),
-      });
-      return;
-    }
-
-    const el = document.querySelector("#chart-status");
-    if (!el) return;
-
-    this.chartInstances.status = new ApexCharts(el, {
-      chart: { type: "donut", height: 280, background: "transparent", animations: { dynamicAnimation: { speed: 350 } } },
-      theme: { mode: "dark" },
-      series,
-      labels,
-      colors: labels.map((label) => colorMap[label] || "#718096"),
-      legend: { position: "bottom" },
-      dataLabels: { enabled: true },
-    });
-    this.chartInstances.status.render();
-  }
-
-  function countAgentStatuses(agents) {
-    const counts = { idle: 0, busy: 0 };
-    for (const agent of agents) {
-      if (agent.status in counts) counts[agent.status] += 1;
-    }
-
-    const labels = Object.keys(counts);
-    return { labels, series: labels.map((key) => counts[key]) };
-  }
-
-  function renderAgentChart() {
-    const sorted = countMessagesByAgent(this);
-
-    if (this.chartInstances.agents) {
-      this.chartInstances.agents.updateOptions({
-        series: [{ name: "Messages", data: sorted.map(([, count]) => count) }],
-        xaxis: { categories: sorted.map(([name]) => name) },
-      });
-      return;
-    }
-
-    const el = document.querySelector("#chart-agents");
-    if (!el) return;
-
-    this.chartInstances.agents = new ApexCharts(el, {
-      chart: { type: "bar", height: 280, background: "transparent", toolbar: { show: false }, animations: { dynamicAnimation: { speed: 350 } } },
-      theme: { mode: "dark" },
-      series: [{ name: "Messages", data: sorted.map(([, count]) => count) }],
-      xaxis: { categories: sorted.map(([name]) => name) },
-      colors: ["#4299e1"],
-      plotOptions: { bar: { borderRadius: 4, distributed: true } },
-      legend: { show: false },
-      grid: { borderColor: "rgba(255,255,255,0.06)" },
-    });
-    this.chartInstances.agents.render();
-  }
-
-  function countMessagesByAgent(vm) {
-    const counts = {};
-    for (const msg of vm.messages) {
-      const name = vm.displayTarget(msg.from);
-      counts[name] = (counts[name] || 0) + 1;
-    }
-    return Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 10);
-  }
-
-  function destroyChart(vm, name) {
-    if (vm.chartInstances[name]) {
-      vm.chartInstances[name].destroy();
-      vm.chartInstances[name] = null;
-    }
-  }
-
-  function destroyAllCharts() {
-    destroyChart(this, "volume");
-    destroyChart(this, "status");
-    destroyChart(this, "agents");
-  }
-
-  function createRelayDashboard() {
-    const dashboard = {
-      ...initialState(),
-      ...createLifecycleMethods(),
-      ...createSseMethods(),
-      ...createApiMethods(),
-      ...createDisplayMethods(),
-      ...createMessageActions(),
-      ...createPairActions(),
-      ...createAgentActions(),
-      ...createChartMethods(),
-    };
-    Object.defineProperties(dashboard, createComputedDescriptors());
-    return dashboard;
-  }
-
-  window.AgentRelayDashboard = {
-    createRelayDashboard,
-    helpers: { loadPref, savePref, indexAgents, upsertById, upsertTask, compareAgents, agentType, isBuiltInAgent },
-  };
-  window.relay = createRelayDashboard;
-
-  document.addEventListener("alpine:init", () => {
-    Alpine.data("relay", createRelayDashboard);
-  });
-})();