agent-relay-server 0.4.22 → 0.4.24

package/public/dashboard.js

@@ -1,7 +1,13 @@
 (() => {
   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 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 = {
@@ -33,30 +39,52 @@
       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: {},
+      pairs: [],
       messages: [],
       tasks: [],
       taskEvents: [],
+      taskEventCache: {},
       stats: {},
       health: null,
       now: Date.now(),
       authToken: loadPref("authToken", ""),
+      inboxReadCursors: loadPref("inboxReadCursors", {}),
+      inboxArchivedThreads: loadPref("inboxArchivedThreads", {}),
+      inboxDrafts: loadPref("inboxDrafts", {}),
+      inboxSearch: "",
+      inboxShowArchived: loadPref("inboxShowArchived", false),
+      operatorActivity: loadPref("operatorActivity", []),
+      activityEvents: [],
+      activityFilter: loadPref("activityFilter", ""),
 
       selectedAgent: "",
+      agentDetailOpen: false,
+      agentDetailId: "",
+      selectedInboxThread: "",
       replyTo: null,
       composeOpen: false,
+      pairInviteOpen: false,
+      pairMessageOpen: false,
       threadOpen: false,
       threadMessages: [],
       taskEventsOpen: false,
+      commandPaletteOpen: false,
+      commandQuery: "",
       connected: false,
       authNeeded: false,
 
       compose: { ...DEFAULT_COMPOSE },
+      pairInvite: { ...DEFAULT_PAIR_INVITE },
+      pairMessage: { ...DEFAULT_PAIR_MESSAGE },
+      inboxCompose: { ...DEFAULT_INBOX_COMPOSE },
 
       confirmModal: { show: false, title: "", message: "", action: null },
       renameModal: { show: false, agentId: "", label: "" },
@@ -65,6 +93,7 @@
       tagFilter: "",
       agentStatusFilter: loadPref("agentStatusFilter", ""),
       agentTagFilter: loadPref("agentTagFilter", ""),
+      pairStatusFilter: loadPref("pairStatusFilter", "open"),
       taskStatusFilter: "",
       taskSourceFilter: "",
 
@@ -78,6 +107,7 @@
 
   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();
@@ -85,8 +115,12 @@
     });
     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("inboxShowArchived", (value) => vm.save("inboxShowArchived", value));
+    vm.$watch("activityFilter", (value) => vm.save("activityFilter", value));
     vm.$watch("view", (value) => {
       vm.save("view", value);
       if (value === "analytics") vm.$nextTick(() => vm.renderCharts());
@@ -133,11 +167,27 @@
     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");
@@ -154,9 +204,13 @@
         savePref(key, value);
       },
 
-      switchView(view) {
+      async switchView(view) {
         this.view = view;
-        if (view === "messages") this.fetchMessages();
+        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 === "tasks") this.fetchTasks();
       },
 
@@ -222,8 +276,8 @@
 
   function handleNewMessage(vm, msg) {
     if (vm.messages.some((existing) => existing.id === msg.id)) return;
-    if (vm.selectedAgent && msg.from !== vm.selectedAgent && msg.to !== vm.selectedAgent) return;
-    if (vm.channelFilter && msg.channel !== vm.channelFilter) 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();
@@ -299,7 +353,7 @@
       },
 
       async refresh() {
-        await Promise.all([this.fetchStats(), this.fetchHealth(), this.fetchAgents(), this.fetchMessages(), this.fetchTasks()]);
+        await Promise.all([this.fetchStats(), this.fetchHealth(), this.fetchAgents(), this.fetchPairs(), this.fetchMessages(), this.fetchTasks(), this.fetchInboxState(), this.fetchActivityEvents()]);
       },
 
       async refreshLiveData() {
@@ -332,11 +386,31 @@
         } 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.selectedAgent) path += "&for=" + encodeURIComponent(this.selectedAgent);
-          if (this.channelFilter) path += "&channel=" + encodeURIComponent(this.channelFilter);
+          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 {}
       },
@@ -349,13 +423,69 @@
           this.tasks = await this.api("GET", "/tasks?" + params.toString());
         } 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 },
+      hiddenBuiltInAgentCount: { get: getHiddenBuiltInAgentCount },
       sortedAgents: { get: getSortedAgents },
+      pairsByAgentId: { get: getPairsByAgentId },
+      selectedAgentDetail: { get: getSelectedAgentDetail },
+      agentDetailMessages: { get: getAgentDetailMessages },
+      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 },
       filteredMessages: { get: getFilteredMessages },
       groupedMessages: { get: getGroupedMessages },
       filteredTasks: { get: getFilteredTasks },
@@ -364,15 +494,23 @@
       uniqueCaps: { get: getUniqueCaps },
       uniqueTags: { get: getUniqueTags },
       healthIssues: { get: getHealthIssues },
+      healthDiagnostics: { get: getHealthDiagnostics },
+      commandPaletteItems: { get: getCommandPaletteItems },
     };
   }
 
   function getOnlineCount() {
-    return this.agents.filter((agent) => agent.status !== "offline").length;
+    return visibleAgents(this).filter((agent) => agent.status !== "offline").length;
+  }
+
+  function getHiddenBuiltInAgentCount() {
+    return this.showBuiltIns ? 0 : this.agents.filter(isBuiltInAgent).length;
   }
 
   function getSortedAgents() {
-    let list = this.showOffline ? [...this.agents] : this.agents.filter((agent) => agent.status !== "offline");
+    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) {
@@ -386,6 +524,448 @@
     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 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();
+    return this.allInboxThreads.filter((thread) => {
+      if (!this.inboxShowArchived && thread.archived) return false;
+      if (search && !threadMatchesSearch(this, thread, search)) return false;
+      return true;
+    });
+  }
+
+  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 || "", msg.body || "", 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 needsHumanResponse = threads.filter((thread) => thread.attention?.needsHumanResponse).length;
+    const agentQuestions = threads.filter((thread) => thread.attention?.agentQuestion).length;
+
+    return {
+      unreadInbox,
+      needsHumanResponse,
+      agentQuestions,
+      pendingPairInvites,
+      claimableTasks,
+      total: unreadInbox + needsHumanResponse + 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((msg) => msg.claimable)
+      .map((msg) => ({
+        id: "message-" + msg.id,
+        sourceType: "message",
+        title: msg.subject || "Claimable message #" + msg.id,
+        body: msg.body,
+        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.meta?.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.claimable ? "task" : "message",
+          ts,
+          icon: msg.claimable ? "ti-hand-grab" : "ti-send",
+          title: msg.claimable ? "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 lastInboundId = maxMessageId(thread.messages, isHumanInboundMessage);
+    const unread = thread.messages.filter((msg) => isUnreadHumanMessage(vm, thread.peer, msg)).length;
+    const needsHumanResponse = lastInboundId > lastHumanReplyId;
+    const agentQuestion = thread.messages.some((msg) =>
+      isHumanInboundMessage(msg) && msg.id > lastHumanReplyId && messageLooksLikeQuestion(msg)
+    );
+
+    return {
+      unread,
+      needsHumanResponse,
+      agentQuestion,
+      score: unread * 10 + (needsHumanResponse ? 5 : 0) + (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${msg.body || ""}`);
+  }
+
+  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);
+  }
+
+  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));
@@ -425,26 +1005,142 @@
   }
 
   function getComposeAgents() {
-    return this.showOffline ? this.agents : this.agents.filter((agent) => agent.status !== "offline");
+    const list = visibleAgents(this);
+    return this.showOffline ? list : list.filter((agent) => agent.status !== "offline");
   }
 
   function getUniqueLabels() {
-    return [...new Set(this.agents.filter((agent) => agent.label).map((agent) => agent.label))];
+    return [...new Set(visibleAgents(this).filter((agent) => agent.label).map((agent) => agent.label))];
   }
 
   function getUniqueCaps() {
-    return [...new Set(this.agents.flatMap((agent) => agent.capabilities || []))];
+    return [...new Set(visibleAgents(this).flatMap((agent) => agent.capabilities || []))];
   }
 
   function getUniqueTags() {
-    return [...new Set(this.agents.flatMap((agent) => agent.tags || []))];
+    return [...new Set(visibleAgents(this).flatMap((agent) => agent.tags || []))];
+  }
+
+  function visibleAgents(vm) {
+    return vm.showBuiltIns ? [...vm.agents] : vm.agents.filter((agent) => !isBuiltInAgent(agent));
+  }
+
+  function isBuiltInAgent(agent) {
+    return agent?.meta?.builtin === true || agent?.id === HUMAN_AGENT_ID || agent?.id === "system";
+  }
+
+  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;
+    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 === "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.";
+    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));
@@ -463,14 +1159,28 @@
     return {
       displayName,
       displayTarget,
+      conversationTitle,
+      messagePreview,
+      agentPair,
+      pairPeerId,
+      pairBadgeClass,
+      pairStatusClass,
+      pairBadgeLabel,
+      pairTitle,
+      agentAttention,
+      agentAttentionTitle,
       agentType,
       agentTypeIcon,
       agentTypeTitle,
+      agentPresence,
+      agentPresenceBadges,
+      agentStatusClass,
       severityClass,
       agentStatusTitle,
       timeAgo,
       fmtTime,
       healthAlertClass,
+      activityKindClass,
     };
   }
 
@@ -490,6 +1200,103 @@
     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 || msg?.body || "";
+    return text.length > 90 ? text.slice(0, 90) + "..." : text;
+  }
+
+  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: Boolean(thread?.attention?.needsHumanResponse),
+      agentQuestion: Boolean(thread?.attention?.agentQuestion),
+      pendingPairInvite,
+      claimableTasks,
+    };
+    attention.total = attention.unread +
+      (attention.needsHumanResponse ? 1 : 0) +
+      (attention.agentQuestion ? 1 : 0) +
+      (attention.pendingPairInvite ? 1 : 0) +
+      attention.claimableTasks;
+    attention.score = attention.unread * 10 +
+      (attention.needsHumanResponse ? 5 : 0) +
+      (attention.agentQuestion ? 3 : 0) +
+      (attention.pendingPairInvite ? 4 : 0) +
+      attention.claimableTasks * 2;
+    return attention;
+  }
+
+  function emptyAttention() {
+    return {
+      unread: 0,
+      needsHumanResponse: false,
+      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.needsHumanResponse) parts.push("needs human response");
+    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) {
     const values = [
       ...(agent?.tags || []),
@@ -516,6 +1323,66 @@
     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 (flags.reconnecting) badges.push({ label: "reconnecting", className: "bg-danger-lt" });
+    if (flags.starting) badges.push({ label: "online, not ready", className: "bg-warning-lt" });
+    if (flags.busy) badges.push({ label: "busy in turn", className: "bg-warning-lt" });
+    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.needsHumanResponse) badges.push({ label: "needs response", className: "bg-warning-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" });
+    if (!badges.length && !flags.offline) badges.push({ label: "ready", className: "bg-success-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";
@@ -525,6 +1392,11 @@
   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();
@@ -557,17 +1429,66 @@
     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,
+      openCommandPalette,
+      closeCommandPalette,
+      runCommand,
+      exportActivity,
+      exportThread,
+      exportPair,
+      exportTask,
+    };
+  }
+
+  function createPairActions() {
+    return {
+      openPairMessage,
+      closePairMessage,
+      openPairInvite,
+      closePairInvite,
+      doCreatePair,
+      doSendPairMessage,
+      doAcceptPair,
+      doRejectPair,
+      doHangupPair,
     };
   }
 
@@ -588,12 +1509,243 @@
     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: "" };
+  }
+
+  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) payload.claimable = true;
+      await this.api("POST", "/messages", payload);
+      this.recordOperatorActivity({
+        title: this.inboxCompose.claimable ? "Claimable task sent" : "Message sent",
+        body: this.inboxCompose.subject || this.inboxCompose.body,
+        meta: "to " + this.displayTarget(target),
+        icon: this.inboxCompose.claimable ? "ti-hand-grab" : "ti-send",
+        kind: this.inboxCompose.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: "",
-      to: msg.from,
+      from: this.view === "inbox" ? HUMAN_AGENT_ID : "",
+      to: replyTarget,
       channel: msg.channel || "",
     };
     this.openCompose();
@@ -623,10 +1775,21 @@
     }
 
     try {
-      await this.api("POST", "/messages", buildMessagePayload(this));
+      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 };
+      await this.fetchMessages();
     } catch (e) {
       alert("Send failed: " + e.message);
     }
@@ -642,15 +1805,85 @@
     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);
     }
@@ -671,13 +1904,423 @@
     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 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.meta?.pairId === pair.id ||
+      (msg.meta?.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("", msg.body || "", "");
+    }
+  }
+
+  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 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;
+      },
+
       openRename(agent) {
         this.renameModal = { show: true, agentId: agent.id, label: agent.label || "" };
         this.$nextTick(() => this.$refs.renameInput?.focus());
@@ -826,6 +2469,7 @@
       ...createApiMethods(),
       ...createDisplayMethods(),
       ...createMessageActions(),
+      ...createPairActions(),
       ...createAgentActions(),
       ...createChartMethods(),
     };
@@ -835,7 +2479,7 @@
 
   window.AgentRelayDashboard = {
     createRelayDashboard,
-    helpers: { loadPref, savePref, indexAgents, upsertById, upsertTask, compareAgents, agentType },
+    helpers: { loadPref, savePref, indexAgents, upsertById, upsertTask, compareAgents, agentType, isBuiltInAgent },
   };
   window.relay = createRelayDashboard;