agent-relay-server 0.4.22 → 0.4.23

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 = {
@@ -39,6 +45,7 @@
 
       agents: [],
       agentsById: {},
+      pairs: [],
       messages: [],
       tasks: [],
       taskEvents: [],
@@ -46,10 +53,20 @@
       health: null,
       now: Date.now(),
       authToken: loadPref("authToken", ""),
+      inboxReadCursors: loadPref("inboxReadCursors", {}),
+      inboxArchivedThreads: loadPref("inboxArchivedThreads", {}),
+      inboxDrafts: loadPref("inboxDrafts", {}),
+      inboxSearch: "",
+      inboxShowArchived: loadPref("inboxShowArchived", false),
 
       selectedAgent: "",
+      agentDetailOpen: false,
+      agentDetailId: "",
+      selectedInboxThread: "",
       replyTo: null,
       composeOpen: false,
+      pairInviteOpen: false,
+      pairMessageOpen: false,
       threadOpen: false,
       threadMessages: [],
       taskEventsOpen: false,
@@ -57,6 +74,9 @@
       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 +85,7 @@
       tagFilter: "",
       agentStatusFilter: loadPref("agentStatusFilter", ""),
       agentTagFilter: loadPref("agentTagFilter", ""),
+      pairStatusFilter: loadPref("pairStatusFilter", "open"),
       taskStatusFilter: "",
       taskSourceFilter: "",
 
@@ -87,6 +108,8 @@
     vm.$watch("agentSortDir", (value) => vm.save("agentSortDir", 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("view", (value) => {
       vm.save("view", value);
       if (value === "analytics") vm.$nextTick(() => vm.renderCharts());
@@ -154,9 +177,11 @@
         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 === "pairs") this.fetchPairs();
         if (view === "tasks") this.fetchTasks();
       },
 
@@ -222,8 +247,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 +324,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()]);
       },
 
       async refreshLiveData() {
@@ -332,11 +357,29 @@
         } catch {}
       },
 
+      async fetchPairs() {
+        try {
+          let pairs;
+          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 +392,52 @@
           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 {}
+      },
     };
   }
 
+  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 createComputedDescriptors() {
     return {
       onlineCount: { get: getOnlineCount },
       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 },
       filteredMessages: { get: getFilteredMessages },
       groupedMessages: { get: getGroupedMessages },
       filteredTasks: { get: getFilteredTasks },
@@ -386,6 +468,210 @@
     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 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));
@@ -445,6 +731,10 @@
   }
 
   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,6 +753,16 @@
     return {
       displayName,
       displayTarget,
+      conversationTitle,
+      messagePreview,
+      agentPair,
+      pairPeerId,
+      pairBadgeClass,
+      pairStatusClass,
+      pairBadgeLabel,
+      pairTitle,
+      agentAttention,
+      agentAttentionTitle,
       agentType,
       agentTypeIcon,
       agentTypeTitle,
@@ -490,6 +790,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 || []),
@@ -561,6 +958,20 @@
     return {
       openCompose,
       openComposeToAgent,
+      openComposeToInboxThread,
+      openInboxThread,
+      markInboxThreadRead,
+      markInboxThreadUnread,
+      archiveInboxThread,
+      unarchiveInboxThread,
+      confirmDeleteInboxThread,
+      doDeleteInboxThread,
+      replyDraftForThread,
+      setReplyDraft,
+      clearReplyDraft,
+      sendInboxReply,
+      resetInboxComposeTarget,
+      doSendInboxCompose,
       startReply,
       cancelReply,
       doSend,
@@ -571,6 +982,20 @@
     };
   }
 
+  function createPairActions() {
+    return {
+      openPairMessage,
+      closePairMessage,
+      openPairInvite,
+      closePairInvite,
+      doCreatePair,
+      doSendPairMessage,
+      doAcceptPair,
+      doRejectPair,
+      doHangupPair,
+    };
+  }
+
   function focusComposeBody(vm) {
     vm.$nextTick(() => vm.$refs.composeBody?.focus());
   }
@@ -588,12 +1013,195 @@
     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);
+    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);
+    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);
+    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);
+    } 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.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.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();
@@ -627,6 +1235,7 @@
       this.composeOpen = false;
       this.replyTo = null;
       this.compose = { ...DEFAULT_COMPOSE };
+      await this.fetchMessages();
     } catch (e) {
       alert("Send failed: " + e.message);
     }
@@ -676,8 +1285,119 @@
     }
   }
 
+  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 = {
+        requesterId: this.pairInvite.requesterId,
+        targetId: this.pairInvite.targetId,
+      };
+      if (this.pairInvite.objective) payload.objective = this.pairInvite.objective;
+      await this.api("POST", "/pairs", payload);
+      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.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 });
+      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 });
+      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 });
+      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 +1546,7 @@
       ...createApiMethods(),
       ...createDisplayMethods(),
       ...createMessageActions(),
+      ...createPairActions(),
       ...createAgentActions(),
       ...createChartMethods(),
     };