arp-tui 0.0.2 → 0.0.3

package/dist/index.js

@@ -5,7 +5,7 @@ import { parseArgs as nodeParseArgs } from "util";
 import { render } from "ink";
 
 // src/app.tsx
-import { Box as Box7, Text as Text9, useApp, useInput, useStdin } from "ink";
+import { Box as Box8, Text as Text10, useApp, useInput, useStdin } from "ink";
 import { useEffect, useSyncExternalStore } from "react";
 
 // src/state/store.ts
@@ -968,6 +968,73 @@ var RelayRest = class {
   }
 };
 
+// src/state/activityFold.ts
+function eventTs(e) {
+  return typeof e.ts === "number" && Number.isFinite(e.ts) ? e.ts : 0;
+}
+function supersedes(nextTs, nextOrder, prevTs, prevOrder) {
+  if (nextTs !== prevTs) return nextTs > prevTs;
+  return nextOrder >= prevOrder;
+}
+function foldActivityEvents(events) {
+  const turns = /* @__PURE__ */ new Map();
+  events.forEach((e, idx) => {
+    if (!e.turnId || !e.toolCallId) return;
+    let turn = turns.get(e.turnId);
+    if (!turn) {
+      turn = { order: [], calls: /* @__PURE__ */ new Map() };
+      turns.set(e.turnId, turn);
+    }
+    const ts = eventTs(e);
+    const existing = turn.calls.get(e.toolCallId);
+    if (!existing) {
+      turn.order.push(e.toolCallId);
+      turn.calls.set(e.toolCallId, {
+        toolCallId: e.toolCallId,
+        turnId: e.turnId,
+        agentId: e.agentId,
+        kind: e.kind,
+        title: e.title,
+        status: e.status,
+        locations: e.locations,
+        ts,
+        _winTs: ts,
+        _winOrder: idx
+      });
+      return;
+    }
+    if (supersedes(ts, idx, existing._winTs, existing._winOrder)) {
+      if (e.kind !== void 0) existing.kind = e.kind;
+      if (e.title !== void 0) existing.title = e.title;
+      if (e.status !== void 0) existing.status = e.status;
+      if (e.locations !== void 0) existing.locations = e.locations;
+      if (e.agentId) existing.agentId = e.agentId;
+      existing.ts = ts;
+      existing._winTs = ts;
+      existing._winOrder = idx;
+    } else {
+      if (existing.kind === void 0 && e.kind !== void 0) existing.kind = e.kind;
+      if (existing.title === void 0 && e.title !== void 0) existing.title = e.title;
+      if (existing.status === void 0 && e.status !== void 0) existing.status = e.status;
+      if (existing.locations === void 0 && e.locations !== void 0) existing.locations = e.locations;
+    }
+  });
+  const out = /* @__PURE__ */ new Map();
+  for (const [turnId, turn] of turns) {
+    out.set(
+      turnId,
+      turn.order.map((tcId) => {
+        const c = turn.calls.get(tcId);
+        const { _winTs, _winOrder, ...pub } = c;
+        void _winTs;
+        void _winOrder;
+        return pub;
+      })
+    );
+  }
+  return out;
+}
+
 // src/state/priority.ts
 function channelPriority(cid, p) {
   const level = p.attention[cid]?.highestLevel;
@@ -1235,6 +1302,10 @@ var IDLE_CHECK_MS = 3e4;
 var TICK_MS = 1e4;
 var ACTIVITY_AUTOCLEAR_MS = 6e4;
 var RENDER_THROTTLE_MS = 250;
+var MAX_ACTIVITY_TURNS = 8;
+var MAX_TOOL_CALLS_PER_TURN = 50;
+var MAX_RAW_EVENTS_PER_TURN = 200;
+var ACTIVITY_SETTLE_MS = 4e3;
 function createStore(opts) {
   const instance2 = opts.instance;
   const relayUrl = instance2.relayUrl;
@@ -1272,7 +1343,11 @@ function createStore(opts) {
     unreadCapNotice: null,
     attention: {},
     notifications: [],
-    notifSelected: 0
+    notifSelected: 0,
+    activityByTurn: {},
+    plansByTurn: {},
+    activityPinned: false,
+    activityIdleSince: null
   };
   let lastNotifyAt = 0;
   let notifyTimer = null;
@@ -1591,6 +1666,42 @@ function createStore(opts) {
       scheduleActivitySweep();
     }
   }
+  let rawActivityByTurn = /* @__PURE__ */ new Map();
+  let activitySettleTimer = null;
+  function activityIsLive() {
+    for (const rows of Object.values(state.activityByTurn))
+      for (const r of rows) if (r.status === "pending" || r.status === "in_progress") return true;
+    for (const entries of Object.values(state.plansByTurn))
+      for (const e of entries) if (e.status !== "completed") return true;
+    return false;
+  }
+  function evictOldestTurns(rec) {
+    const keys = Object.keys(rec);
+    if (keys.length <= MAX_ACTIVITY_TURNS) return rec;
+    const drop = keys.slice(0, keys.length - MAX_ACTIVITY_TURNS);
+    const next = { ...rec };
+    for (const k of drop) delete next[k];
+    return next;
+  }
+  function reconcileActivitySettle() {
+    if (activityIsLive()) {
+      if (activitySettleTimer) {
+        clearTimeout(activitySettleTimer);
+        activitySettleTimer = null;
+      }
+      if (state.activityIdleSince !== null) setThrottled({ activityIdleSince: null });
+      return;
+    }
+    if (state.activityIdleSince === null) setThrottled({ activityIdleSince: Date.now() });
+    if (activitySettleTimer) return;
+    activitySettleTimer = setTimeout(() => {
+      activitySettleTimer = null;
+      setThrottled({});
+    }, ACTIVITY_SETTLE_MS);
+  }
+  function togglePin() {
+    set({ activityPinned: !state.activityPinned });
+  }
   let countdownTimer = null;
   function syncCountdown(s) {
     if (s === "reconnecting" && !countdownTimer) {
@@ -1692,6 +1803,42 @@ function createStore(opts) {
         pushDivider("channel archived");
         return;
       }
+      case "activity_event": {
+        if (frame.channelId !== state.activeChannelId) return;
+        if (!frame.turnId || !frame.toolCallId) return;
+        const ev = {
+          turnId: frame.turnId,
+          toolCallId: frame.toolCallId,
+          agentId: frame.agentId,
+          kind: frame.kind,
+          title: frame.title,
+          status: frame.status,
+          locations: frame.locations,
+          ts: frame.ts
+        };
+        const list = [...rawActivityByTurn.get(frame.turnId) ?? [], ev];
+        if (list.length > MAX_RAW_EVENTS_PER_TURN) list.splice(0, list.length - MAX_RAW_EVENTS_PER_TURN);
+        rawActivityByTurn.set(frame.turnId, list);
+        while (rawActivityByTurn.size > MAX_ACTIVITY_TURNS) {
+          const oldest = rawActivityByTurn.keys().next().value;
+          rawActivityByTurn.delete(oldest);
+        }
+        const foldedMap = foldActivityEvents(Array.from(rawActivityByTurn.values()).flat());
+        let activityByTurn = {};
+        for (const [tid, rows] of foldedMap) activityByTurn[tid] = rows.slice(0, MAX_TOOL_CALLS_PER_TURN);
+        activityByTurn = evictOldestTurns(activityByTurn);
+        setThrottled({ activityByTurn });
+        reconcileActivitySettle();
+        return;
+      }
+      case "plan_update": {
+        if (frame.channelId !== state.activeChannelId) return;
+        if (!frame.turnId) return;
+        const plansByTurn = evictOldestTurns({ ...state.plansByTurn, [frame.turnId]: frame.entries ?? [] });
+        setThrottled({ plansByTurn });
+        reconcileActivitySettle();
+        return;
+      }
       default:
         return;
     }
@@ -1853,8 +2000,16 @@ function createStore(opts) {
       mode: "normal",
       switcherFilter: "",
       lastSeq: config.lastSeq?.[channelId] ?? null,
-      error: null
+      error: null,
+      activityByTurn: {},
+      plansByTurn: {},
+      activityIdleSince: null
     });
+    rawActivityByTurn = /* @__PURE__ */ new Map();
+    if (activitySettleTimer) {
+      clearTimeout(activitySettleTimer);
+      activitySettleTimer = null;
+    }
     clearUnread(channelId);
     ws.subscribe(channelId);
     config = { ...config, lastChannelId: channelId };
@@ -1890,6 +2045,10 @@ function createStore(opts) {
     if (idleTimer) clearInterval(idleTimer);
     if (tickTimer) clearInterval(tickTimer);
     if (activitySweep) clearTimeout(activitySweep);
+    if (activitySettleTimer) {
+      clearTimeout(activitySettleTimer);
+      activitySettleTimer = null;
+    }
     if (countdownTimer) clearInterval(countdownTimer);
     if (attentionTimer) {
       clearInterval(attentionTimer);
@@ -1931,6 +2090,7 @@ function createStore(opts) {
       const target = nextActiveChannel(s.channels, s.activeChannelId, { attention: s.attention, unread: s.unread });
       if (target) openChannel(target.id);
     },
+    toggleActivityPin: () => togglePin(),
     quit
   };
 }
@@ -1968,9 +2128,95 @@ function ActivityLine({ activities }) {
   ] });
 }
 
-// src/ui/ChannelSwitcher.tsx
+// src/ui/ActivitySurface.tsx
 import { Box, Text as Text2 } from "ink";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function statusGlyph(status) {
+  switch (status) {
+    case "completed":
+      return "\u2713";
+    case "failed":
+      return "\u2717";
+    case "in_progress":
+      return "\u22EF";
+    case "pending":
+      return "\u25CB";
+    default:
+      return "\xB7";
+  }
+}
+function kindGlyph(kind) {
+  switch (kind) {
+    case "read":
+      return "r";
+    case "edit":
+      return "e";
+    case "write":
+      return "w";
+    case "run":
+      return "\u25B6";
+    case "search":
+      return "s";
+    case "fetch":
+      return "f";
+    case "task":
+      return "t";
+    default:
+      return "\xB7";
+  }
+}
+function planGlyph(status) {
+  switch (status) {
+    case "completed":
+      return "[x]";
+    case "in_progress":
+      return "[~]";
+    default:
+      return "[ ]";
+  }
+}
+function fallbackTitle(call) {
+  if (call.title) return call.title;
+  if (call.kind) return call.kind.charAt(0).toUpperCase() + call.kind.slice(1);
+  return "Tool call";
+}
+function ActivitySurface(props) {
+  const { toolCalls, plan, visible, pinned } = props;
+  if (!visible) return null;
+  if (toolCalls.length === 0 && plan.length === 0) {
+    return /* @__PURE__ */ jsx2(Box, { paddingLeft: 1, children: /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "no activity yet" }) });
+  }
+  return /* @__PURE__ */ jsxs2(Box, { flexDirection: "column", paddingLeft: 1, children: [
+    toolCalls.length > 0 && /* @__PURE__ */ jsxs2(Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: "tool calls \xB7 only you can see this" }),
+      toolCalls.map((call) => /* @__PURE__ */ jsxs2(Box, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs2(Text2, { children: [
+          statusGlyph(call.status),
+          " ",
+          kindGlyph(call.kind),
+          " ",
+          sanitizeLabel(fallbackTitle(call), 48)
+        ] }),
+        pinned && call.locations && call.locations.length > 0 && /* @__PURE__ */ jsx2(Box, { flexDirection: "column", paddingLeft: 2, children: call.locations.map((loc, i) => /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+          sanitizeLabel(loc.path, 60),
+          loc.line != null ? `:${loc.line}` : ""
+        ] }, i)) })
+      ] }, call.toolCallId))
+    ] }),
+    plan.length > 0 && /* @__PURE__ */ jsxs2(Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx2(Text2, { color: "yellow", children: "plan \xB7 shared with the channel" }),
+      plan.map((entry, i) => /* @__PURE__ */ jsxs2(Text2, { dimColor: entry.status === "completed", children: [
+        planGlyph(entry.status),
+        " ",
+        sanitizeForTty(entry.content)
+      ] }, i))
+    ] })
+  ] });
+}
+
+// src/ui/ChannelSwitcher.tsx
+import { Box as Box2, Text as Text3 } from "ink";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function channelLabel(ch) {
   return `${channelSigil(ch.kind)}${sanitizeLabel(ch.name)}`;
 }
@@ -1985,7 +2231,7 @@ function ChannelBadge({
   if (att) {
     const color = att.highestLevel === "critical" ? "red" : att.highestLevel === "action_required" ? "yellow" : "cyan";
     const sigil = att.highestLevel === "critical" ? "!" : att.highestLevel === "action_required" ? "\u25B2" : "\u2022";
-    return /* @__PURE__ */ jsxs2(Text2, { color, children: [
+    return /* @__PURE__ */ jsxs3(Text3, { color, children: [
       " ",
       "[",
       sigil,
@@ -1995,7 +2241,7 @@ function ChannelBadge({
   }
   const count = unread[channelId] ?? 0;
   if (count > 0) {
-    return /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    return /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
       " (",
       count,
       ")"
@@ -2014,11 +2260,11 @@ function ChannelSwitcher({
   const sorted = sortChannelsByPriority(filtered, { attention, unread });
   const visible = sorted.slice(0, 9);
   const hidden = sorted.length - visible.length;
-  return /* @__PURE__ */ jsxs2(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
-    /* @__PURE__ */ jsxs2(Text2, { bold: true, children: [
+  return /* @__PURE__ */ jsxs3(Box2, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs3(Text3, { bold: true, children: [
       "channels",
       " ",
-      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
         "(",
         sorted.length,
         "/",
@@ -2026,23 +2272,23 @@ function ChannelSwitcher({
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2(Text2, { children: [
-      /* @__PURE__ */ jsx2(Text2, { color: "cyan", children: "filter: " }),
-      /* @__PURE__ */ jsx2(Text2, { children: sanitizeLabel(filter, 40) }),
-      /* @__PURE__ */ jsx2(Text2, { inverse: true, children: " " })
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      /* @__PURE__ */ jsx3(Text3, { color: "cyan", children: "filter: " }),
+      /* @__PURE__ */ jsx3(Text3, { children: sanitizeLabel(filter, 40) }),
+      /* @__PURE__ */ jsx3(Text3, { inverse: true, children: " " })
     ] }),
-    visible.map((ch, i) => /* @__PURE__ */ jsxs2(Text2, { children: [
-      /* @__PURE__ */ jsxs2(Text2, { color: "cyan", children: [
+    visible.map((ch, i) => /* @__PURE__ */ jsxs3(Text3, { children: [
+      /* @__PURE__ */ jsxs3(Text3, { color: "cyan", children: [
         i + 1,
         " "
       ] }),
-      /* @__PURE__ */ jsx2(Text2, { bold: ch.id === activeChannelId, children: channelLabel(ch) }),
-      /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+      /* @__PURE__ */ jsx3(Text3, { bold: ch.id === activeChannelId, children: channelLabel(ch) }),
+      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
         " \xB7 ",
         ch.members.length,
         " members"
       ] }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         ChannelBadge,
         {
           channelId: ch.id,
@@ -2052,36 +2298,36 @@ function ChannelSwitcher({
         }
       )
     ] }, ch.id)),
-    hidden > 0 ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    hidden > 0 ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
       "\u2026",
       hidden,
       " more \u2014 keep typing to narrow"
     ] }) : null,
-    sorted.length === 0 ? /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+    sorted.length === 0 ? /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
       'no channels match "',
       sanitizeLabel(filter, 20),
       '"'
     ] }) : null,
-    /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: filter.length === 0 ? "type to filter \xB7 1\u20139 quick-select \xB7 n jump \xB7 Esc cancel" : "keep typing to narrow \xB7 Enter opens top match \xB7 Esc cancel" })
+    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: filter.length === 0 ? "type to filter \xB7 1\u20139 quick-select \xB7 n jump \xB7 Esc cancel" : "keep typing to narrow \xB7 Enter opens top match \xB7 Esc cancel" })
   ] });
 }
 
 // src/ui/Composer.tsx
-import { Box as Box2, Text as Text3 } from "ink";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box3, Text as Text4 } from "ink";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function Composer({ draft, focused }) {
   const width = Math.max((process.stdout.columns ?? 80) - 8, 20);
   const visible = draft.length > width ? "\u2026" + draft.slice(-(width - 1)) : draft;
-  return /* @__PURE__ */ jsx3(Box2, { borderStyle: "round", borderColor: focused ? "cyan" : "gray", paddingX: 1, width: "100%", children: /* @__PURE__ */ jsxs3(Text3, { wrap: "truncate", children: [
-    /* @__PURE__ */ jsx3(Text3, { color: focused ? "cyan" : "gray", children: "> " }),
-    draft.length === 0 && !focused ? /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: "i to compose" }) : /* @__PURE__ */ jsx3(Text3, { children: visible }),
-    focused ? /* @__PURE__ */ jsx3(Text3, { inverse: true, children: " " }) : null
+  return /* @__PURE__ */ jsx4(Box3, { borderStyle: "round", borderColor: focused ? "cyan" : "gray", paddingX: 1, width: "100%", children: /* @__PURE__ */ jsxs4(Text4, { wrap: "truncate", children: [
+    /* @__PURE__ */ jsx4(Text4, { color: focused ? "cyan" : "gray", children: "> " }),
+    draft.length === 0 && !focused ? /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "i to compose" }) : /* @__PURE__ */ jsx4(Text4, { children: visible }),
+    focused ? /* @__PURE__ */ jsx4(Text4, { inverse: true, children: " " }) : null
   ] }) });
 }
 
 // src/ui/Header.tsx
-import { Box as Box3, Text as Text4 } from "ink";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box4, Text as Text5 } from "ink";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var STATUS_DOT = {
   online: { glyph: "\u25CF", color: "green" },
   away: { glyph: "\u25D0", color: "yellow" },
@@ -2098,32 +2344,32 @@ function Header({
   members,
   presence
 }) {
-  return /* @__PURE__ */ jsxs4(Box3, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs4(Box3, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxs4(Text4, { children: [
-        /* @__PURE__ */ jsx4(Text4, { color: "cyan", bold: true, children: "arp-tui" }),
-        /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: " \u25B8 " }),
-        /* @__PURE__ */ jsxs4(Text4, { bold: true, children: [
+  return /* @__PURE__ */ jsxs5(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs5(Box4, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs5(Text5, { children: [
+        /* @__PURE__ */ jsx5(Text5, { color: "cyan", bold: true, children: "arp-tui" }),
+        /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: " \u25B8 " }),
+        /* @__PURE__ */ jsxs5(Text5, { bold: true, children: [
           channelSigil(channelKind),
           sanitizeLabel(channelName)
         ] })
       ] }),
-      /* @__PURE__ */ jsx4(Text4, { children: members.map((m) => {
+      /* @__PURE__ */ jsx5(Text5, { children: members.map((m) => {
         const dot = STATUS_DOT[effectiveStatus(m, presence)];
-        return /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsxs4(Text4, { color: dot.color, children: [
+        return /* @__PURE__ */ jsxs5(Text5, { children: [
+          /* @__PURE__ */ jsxs5(Text5, { color: dot.color, children: [
             dot.glyph,
             " "
           ] }),
-          /* @__PURE__ */ jsxs4(Text4, { dimColor: effectiveStatus(m, presence) === "offline", children: [
+          /* @__PURE__ */ jsxs5(Text5, { dimColor: effectiveStatus(m, presence) === "offline", children: [
             m.type === "bot" ? "\u2699" : "",
             sanitizeLabel(m.name, 20)
           ] }),
-          /* @__PURE__ */ jsx4(Text4, { children: "  " })
+          /* @__PURE__ */ jsx5(Text5, { children: "  " })
         ] }, m.id);
       }) })
     ] }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "\u2500".repeat(Math.min(process.stdout.columns ?? 80, 100)) })
+    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "\u2500".repeat(Math.min(process.stdout.columns ?? 80, 100)) })
   ] });
 }
 
@@ -2131,8 +2377,8 @@ function Header({
 import { Static } from "ink";
 
 // src/ui/MessageRow.tsx
-import { Box as Box4, Text as Text5 } from "ink";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Box as Box5, Text as Text6 } from "ink";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function hhmm(rfc3339) {
   const d = new Date(rfc3339);
   return isNaN(d.getTime()) ? "--:--" : `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
@@ -2145,7 +2391,7 @@ function TokenChip({ message }) {
   if (message.messageType !== "agent" || !message.tokensUsed) return null;
   const parts = [`${formatTokens(message.tokensUsed)} tok`];
   if (message.model) parts.push(sanitizeLabel(message.model, 16));
-  return /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
     message.verified ? "\u2713 " : "",
     parts.join(" \xB7 ")
   ] });
@@ -2155,41 +2401,41 @@ function MessageRow({ message }) {
   const isSystem = message.messageType === "system";
   const name = sanitizeLabel(message.agentName, 20);
   if (isSystem) {
-    return /* @__PURE__ */ jsx5(Box4, { children: /* @__PURE__ */ jsxs5(Text5, { dimColor: true, italic: true, children: [
+    return /* @__PURE__ */ jsx6(Box5, { children: /* @__PURE__ */ jsxs6(Text6, { dimColor: true, italic: true, children: [
       "       ",
       "\u2500\u2500 ",
       sanitizeForTty(message.content),
       " \u2500\u2500"
     ] }) });
   }
-  return /* @__PURE__ */ jsxs5(Box4, { justifyContent: "space-between", gap: 2, children: [
-    /* @__PURE__ */ jsx5(Box4, { flexShrink: 1, children: /* @__PURE__ */ jsxs5(Text5, { children: [
-      /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs6(Box5, { justifyContent: "space-between", gap: 2, children: [
+    /* @__PURE__ */ jsx6(Box5, { flexShrink: 1, children: /* @__PURE__ */ jsxs6(Text6, { children: [
+      /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
         hhmm(message.createdAt),
         " "
       ] }),
-      /* @__PURE__ */ jsxs5(Text5, { color: isBot ? "magenta" : "cyan", bold: !isBot, children: [
+      /* @__PURE__ */ jsxs6(Text6, { color: isBot ? "magenta" : "cyan", bold: !isBot, children: [
         isBot ? "\u2699" : "",
         name.padEnd(12)
       ] }),
-      /* @__PURE__ */ jsxs5(Text5, { children: [
+      /* @__PURE__ */ jsxs6(Text6, { children: [
         " ",
         sanitizeForTty(message.content)
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx5(Box4, { flexShrink: 0, children: /* @__PURE__ */ jsx5(TokenChip, { message }) })
+    /* @__PURE__ */ jsx6(Box5, { flexShrink: 0, children: /* @__PURE__ */ jsx6(TokenChip, { message }) })
   ] });
 }
 
 // src/ui/MessageList.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function MessageList({ messages }) {
-  return /* @__PURE__ */ jsx6(Static, { items: messages, children: (m) => /* @__PURE__ */ jsx6(MessageRow, { message: m }, m.id) });
+  return /* @__PURE__ */ jsx7(Static, { items: messages, children: (m) => /* @__PURE__ */ jsx7(MessageRow, { message: m }, m.id) });
 }
 
 // src/ui/NotificationsPanel.tsx
-import { Box as Box5, Text as Text6 } from "ink";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Box as Box6, Text as Text7 } from "ink";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function relativeAge(createdAt) {
   const ms = Date.now() - new Date(createdAt).getTime();
   if (!Number.isFinite(ms) || ms < 0) return "\u2014";
@@ -2207,11 +2453,11 @@ function NotificationsPanel({
   notifSelected
 }) {
   const unreadCount = notifications.filter((n) => !n.readAt).length;
-  return /* @__PURE__ */ jsxs6(Box5, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
-    /* @__PURE__ */ jsxs6(Text6, { bold: true, children: [
+  return /* @__PURE__ */ jsxs7(Box6, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs7(Text7, { bold: true, children: [
       "alerts",
       " ",
-      /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
         "(",
         unreadCount,
         " unread \xB7 ",
@@ -2219,32 +2465,32 @@ function NotificationsPanel({
         " total)"
       ] })
     ] }),
-    notifications.length === 0 ? /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "no notifications" }) : notifications.map((n, i) => {
+    notifications.length === 0 ? /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "no notifications" }) : notifications.map((n, i) => {
       const isSelected = i === notifSelected;
       const isUnread = n.readAt === null;
       const type = sanitizeLabel(n.type, 20);
       const ref = shortRef(sanitizeForTty(n.entityRef));
       const age = relativeAge(n.createdAt);
-      return /* @__PURE__ */ jsxs6(Text6, { inverse: isSelected, children: [
-        isUnread ? /* @__PURE__ */ jsx7(Text6, { color: "yellow", children: "\u2022 " }) : /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "  " }),
-        /* @__PURE__ */ jsx7(Text6, { bold: isSelected, children: type }),
-        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+      return /* @__PURE__ */ jsxs7(Text7, { inverse: isSelected, children: [
+        isUnread ? /* @__PURE__ */ jsx8(Text7, { color: "yellow", children: "\u2022 " }) : /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "  " }),
+        /* @__PURE__ */ jsx8(Text7, { bold: isSelected, children: type }),
+        /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
           " ",
           ref
         ] }),
-        /* @__PURE__ */ jsxs6(Text6, { dimColor: true, children: [
+        /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
           " ",
           age
         ] })
       ] }, n.id);
     }),
-    /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "J/K move \xB7 d dismiss \xB7 a mark all read \xB7 Esc close" })
+    /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "J/K move \xB7 d dismiss \xB7 a mark all read \xB7 Esc close" })
   ] });
 }
 
 // src/ui/StatusBar.tsx
-import { Text as Text7 } from "ink";
-import { Fragment, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Text as Text8 } from "ink";
+import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var MODE_LABEL = {
   normal: "NORMAL",
   insert: "INSERT",
@@ -2301,41 +2547,41 @@ function StatusBar({
       color: stale ? "yellow" : "green"
     };
   }
-  return /* @__PURE__ */ jsxs7(Text7, { children: [
-    /* @__PURE__ */ jsxs7(Text7, { bold: true, color: mode === "insert" ? "cyan" : mode === "token" ? "yellow" : "white", children: [
+  return /* @__PURE__ */ jsxs8(Text8, { children: [
+    /* @__PURE__ */ jsxs8(Text8, { bold: true, color: mode === "insert" ? "cyan" : mode === "token" ? "yellow" : "white", children: [
       " ",
       MODE_LABEL[mode],
       " "
     ] }),
-    /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: "\u2502 " }),
-    /* @__PURE__ */ jsx8(Text7, { color: connColor, children: connectionLabel(connection, reconnectAt, reconnectAttempt) }),
-    /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: " \u2502 " }),
-    /* @__PURE__ */ jsx8(Text7, { color: tokenSeg.color, children: tokenSeg.text }),
-    /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
+    /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "\u2502 " }),
+    /* @__PURE__ */ jsx9(Text8, { color: connColor, children: connectionLabel(connection, reconnectAt, reconnectAttempt) }),
+    /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: " \u2502 " }),
+    /* @__PURE__ */ jsx9(Text8, { color: tokenSeg.color, children: tokenSeg.text }),
+    /* @__PURE__ */ jsxs8(Text8, { dimColor: true, children: [
       " \u2502 seq ",
       lastSeq ?? "\u2014"
     ] }),
-    notifCount > 0 ? /* @__PURE__ */ jsxs7(Text7, { color: "yellow", children: [
+    notifCount > 0 ? /* @__PURE__ */ jsxs8(Text8, { color: "yellow", children: [
       " \u2502 alerts:",
       notifCount
     ] }) : null,
     error ? (
       // BL-222: an error replaces the full hint line but must never strand
       // the user — keep the exit hint visible alongside it
-      /* @__PURE__ */ jsxs7(Fragment, { children: [
-        /* @__PURE__ */ jsxs7(Text7, { color: "red", children: [
+      /* @__PURE__ */ jsxs8(Fragment, { children: [
+        /* @__PURE__ */ jsxs8(Text8, { color: "red", children: [
           " \u2502 ",
           sanitizeForTty(error)
         ] }),
-        /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: " \u2502 q quit" })
+        /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: " \u2502 q quit" })
       ] })
-    ) : /* @__PURE__ */ jsx8(Text7, { dimColor: true, children: " \u2502 c channels \xB7 a alerts \xB7 n next \xB7 i compose \xB7 r reconnect \xB7 Esc normal \xB7 q quit" })
+    ) : /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: " \u2502 c channels \xB7 a alerts \xB7 n next \xB7 v watch \xB7 i compose \xB7 r reconnect \xB7 Esc normal \xB7 q quit" })
   ] });
 }
 
 // src/ui/TokenPrompt.tsx
-import { Box as Box6, Text as Text8 } from "ink";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box7, Text as Text9 } from "ink";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function TokenPrompt({
   value,
   reason,
@@ -2343,26 +2589,27 @@ function TokenPrompt({
   jwtTemplate
 }) {
   const masked = value.length === 0 ? "" : value.length <= 16 ? value : `${value.slice(0, 12)}\u2026 (${value.length} chars)`;
-  return /* @__PURE__ */ jsxs8(Box6, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
-    /* @__PURE__ */ jsx9(Text8, { bold: true, color: "yellow", children: "token needed" }),
-    reason ? /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: sanitizeForTty(reason) }) : null,
-    /* @__PURE__ */ jsxs8(Text8, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs9(Box7, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
+    /* @__PURE__ */ jsx10(Text9, { bold: true, color: "yellow", children: "token needed" }),
+    reason ? /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: sanitizeForTty(reason) }) : null,
+    /* @__PURE__ */ jsxs9(Text9, { dimColor: true, children: [
       "mint one: open ",
       webUrl,
       " logged in, browser console:"
     ] }),
-    /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: `  await window.Clerk.session.getToken({template:'${jwtTemplate}'})` }),
-    /* @__PURE__ */ jsxs8(Text8, { children: [
-      /* @__PURE__ */ jsx9(Text8, { color: "yellow", children: "> " }),
-      /* @__PURE__ */ jsx9(Text8, { children: masked }),
-      /* @__PURE__ */ jsx9(Text8, { inverse: true, children: " " })
+    /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: `  await window.Clerk.session.getToken({template:'${jwtTemplate}'})` }),
+    /* @__PURE__ */ jsxs9(Text9, { children: [
+      /* @__PURE__ */ jsx10(Text9, { color: "yellow", children: "> " }),
+      /* @__PURE__ */ jsx10(Text9, { children: masked }),
+      /* @__PURE__ */ jsx10(Text9, { inverse: true, children: " " })
     ] }),
-    /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "paste, then Enter \xB7 Ctrl+C quits" })
+    /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: "paste, then Enter \xB7 Ctrl+C quits" })
   ] });
 }
 
 // src/app.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var ACTIVITY_SETTLE_MS2 = 4e3;
 function cleanInput(input) {
   return input.replace(/\r\n|[\r\n]/g, " ").replace(/[\x00-\x1f\x7f]/g, "");
 }
@@ -2434,12 +2681,22 @@ function App({ store: store2 }) {
       else if (input === "i" || key.return) store2.setMode("insert");
       else if (input === "r") store2.reconnectNow();
       else if (input === "n") store2.jumpNextActive();
+      else if (input === "v") store2.toggleActivityPin();
     },
     { isActive: interactive }
   );
   const activeChannel = state.channels.find((c) => c.id === state.activeChannelId);
-  return /* @__PURE__ */ jsxs9(Box7, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx10(
+  const lastKey = (r) => {
+    const ks = Object.keys(r);
+    return ks[ks.length - 1];
+  };
+  const activityRows = state.activityByTurn[lastKey(state.activityByTurn) ?? ""] ?? [];
+  const activityPlan = state.plansByTurn[lastKey(state.plansByTurn) ?? ""] ?? [];
+  const activityLive = activityRows.some((r) => r.status === "pending" || r.status === "in_progress") || activityPlan.some((e) => e.status !== "completed");
+  const activityWithinSettle = state.activityIdleSince !== null && Date.now() - state.activityIdleSince < ACTIVITY_SETTLE_MS2;
+  const activityVisible = state.activityPinned || activityLive || activityWithinSettle;
+  return /* @__PURE__ */ jsxs10(Box8, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx11(
       Header,
       {
         channelName: activeChannel?.name ?? "(connecting\u2026)",
@@ -2448,8 +2705,9 @@ function App({ store: store2 }) {
         presence: state.presence
       }
     ),
-    /* @__PURE__ */ jsx10(MessageList, { messages: state.messages }),
-    state.mode === "switcher" ? /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(MessageList, { messages: state.messages }),
+    /* @__PURE__ */ jsx11(ActivitySurface, { toolCalls: activityRows, plan: activityPlan, visible: activityVisible, pinned: state.activityPinned }),
+    state.mode === "switcher" ? /* @__PURE__ */ jsx11(
       ChannelSwitcher,
       {
         channels: state.channels,
@@ -2459,14 +2717,14 @@ function App({ store: store2 }) {
         unread: state.unread
       }
     ) : null,
-    state.mode === "notifications" ? /* @__PURE__ */ jsx10(
+    state.mode === "notifications" ? /* @__PURE__ */ jsx11(
       NotificationsPanel,
       {
         notifications: state.notifications,
         notifSelected: state.notifSelected
       }
     ) : null,
-    state.mode === "token" ? /* @__PURE__ */ jsx10(
+    state.mode === "token" ? /* @__PURE__ */ jsx11(
       TokenPrompt,
       {
         value: state.tokenPrompt,
@@ -2475,9 +2733,9 @@ function App({ store: store2 }) {
         jwtTemplate: store2.instance.clerkJwtTemplate
       }
     ) : null,
-    /* @__PURE__ */ jsx10(ActivityLine, { activities: state.activities }),
-    /* @__PURE__ */ jsx10(Composer, { draft: state.draft, focused: state.mode === "insert" }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(ActivityLine, { activities: state.activities }),
+    /* @__PURE__ */ jsx11(Composer, { draft: state.draft, focused: state.mode === "insert" }),
+    /* @__PURE__ */ jsx11(
       StatusBar,
       {
         mode: state.mode,
@@ -2493,7 +2751,7 @@ function App({ store: store2 }) {
         error: state.error
       }
     ),
-    !interactive ? /* @__PURE__ */ jsx10(Text9, { dimColor: true, children: "(non-interactive terminal: keys disabled \u2014 tail is read-only here)" }) : null
+    !interactive ? /* @__PURE__ */ jsx11(Text10, { dimColor: true, children: "(non-interactive terminal: keys disabled \u2014 tail is read-only here)" }) : null
   ] });
 }
 
@@ -2577,7 +2835,7 @@ unknown profile command "${args2.sub}".`);
 }
 
 // src/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function helpText(profileName2, base2, effective) {
   const relayOverridden = effective.relayUrl !== base2.relayUrl;
   const overrideNote = relayOverridden ? `
@@ -2772,4 +3030,4 @@ if (credentials?.tokenType === "dev-jwt" && credentials.token && !credentials.cl
   );
 }
 var store = createStore({ instance, credentials });
-render(/* @__PURE__ */ jsx11(App, { store }));
+render(/* @__PURE__ */ jsx12(App, { store }));

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "arp-tui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "arp-tui",
-      "version": "0.0.2",
+      "version": "0.0.3",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {
         "ink": "^5.2.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arp-tui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Human-facing terminal client for Agent Relay Protocol. Tail channels and post messages from your terminal.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "SnowyRoad",