@fitchmultz/pi-subagents 0.0.0-stage → 0.44.4

package/src/pi-intercom/types.ts

@@ -0,0 +1,271 @@
+export interface SessionInfo {
+  id: string;
+  name?: string;
+  cwd: string;
+  model: string;
+  /** Opaque same-repository/worktree identity used for ambient peer awareness. */
+  projectId?: string;
+  status?: string;
+  /** Last time the broker observed any activity from this session (liveness). */
+  lastSeen?: number;
+  /** Last time this session exchanged an intercom message (send/receive). */
+  lastIntercomActivity?: number;
+  /** Number of inbound asks this session still owes a reply to. */
+  pendingAsks?: number;
+  /** Whether this session is currently willing/able to answer asks. */
+  acceptsAsks?: boolean;
+  subscriptions?: TopicSubscription[];
+  topics?: TopicUpdate[];
+}
+
+export interface TopicSubscription { topic: string; awaitRelease?: boolean }
+export interface TopicUpdate {
+  topic: string;
+  text: string;
+  event: "update" | "blocker" | "decision" | "release";
+  resource?: string;
+  ownership?: "held" | "released";
+  revision: number;
+  updatedAt: number;
+}
+
+export function isTopicSubscription(value: unknown): value is TopicSubscription {
+  if (!value || typeof value !== "object") return false;
+  const item = value as Record<string, unknown>;
+  return typeof item.topic === "string" && safeLabel(item.topic.trim()) && (item.awaitRelease === undefined || typeof item.awaitRelease === "boolean");
+}
+export function isTopicUpdate(value: unknown): value is TopicUpdate {
+  if (!value || typeof value !== "object") return false;
+  const item = value as Record<string, unknown>;
+  return typeof item.topic === "string" && safeLabel(item.topic.trim()) && typeof item.text === "string" && safeText(item.text)
+    && ["update", "blocker", "decision", "release"].includes(String(item.event))
+    && typeof item.revision === "number" && Number.isSafeInteger(item.revision) && item.revision > 0
+    && typeof item.updatedAt === "number" && Number.isFinite(item.updatedAt)
+    && (item.ownership !== "released" || item.event === "release")
+    && (item.resource === undefined || typeof item.resource === "string" && safeLabel(item.resource))
+    && (item.ownership === undefined || typeof item.resource === "string" && (item.ownership === "held" || item.ownership === "released"));
+}
+
+export type MessageDelivery = "queue" | "steer" | "passive";
+export type QueueMode = "stack" | "replace";
+
+export interface HumanMessageOrigin {
+  ownerSessionId: string;
+  runId: string;
+  index: number;
+}
+
+export function isHumanMessageOrigin(value: unknown): value is HumanMessageOrigin {
+  if (!value || typeof value !== "object") return false;
+  const origin = value as Record<string, unknown>;
+  return typeof origin.ownerSessionId === "string" && /^[a-zA-Z0-9_-]+$/.test(origin.ownerSessionId)
+    && typeof origin.runId === "string" && /^[a-zA-Z0-9_-]+$/.test(origin.runId)
+    && typeof origin.index === "number" && Number.isSafeInteger(origin.index) && origin.index >= 0;
+}
+
+export interface Message {
+  id: string;
+  timestamp: number;
+  replyTo?: string;
+  expectsReply?: boolean;
+  /** Only the owning parent's human UI sets this; recipients verify ownership before elevating it. */
+  human?: HumanMessageOrigin;
+  topic?: TopicUpdate;
+  /** Active-recipient behavior. Omitted delivery defaults to steer unless expectsReply is true. */
+  delivery?: MessageDelivery;
+  /** For delivery="queue": stack normally, or replace older undelivered messages in the same thread. */
+  queueMode?: QueueMode;
+  /** Stable topic key for queueMode="replace". */
+  threadId?: string;
+  /** If true, render without waking the recipient model. Discouraged for agent-to-agent messages. */
+  passive?: boolean;
+  content: {
+    text: string;
+    attachments?: Attachment[];
+  };
+}
+
+const UNSAFE_TEXT_CONTROLS = /[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/;
+const UNSAFE_LABEL_CONTROLS = /[\u0000-\u001f\u007f-\u009f]/;
+
+function safeText(value: string): boolean {
+  return !UNSAFE_TEXT_CONTROLS.test(value);
+}
+
+function safeLabel(value: string): boolean {
+  return value.length > 0 && !UNSAFE_LABEL_CONTROLS.test(value);
+}
+
+export interface Attachment {
+  type: "file" | "snippet" | "context";
+  name: string;
+  content: string;
+  language?: string;
+}
+
+export function isAttachment(value: unknown): value is Attachment {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+
+  const attachment = value as Record<string, unknown>;
+
+  if (
+    attachment.type !== "file"
+    && attachment.type !== "snippet"
+    && attachment.type !== "context"
+  ) {
+    return false;
+  }
+
+  if (typeof attachment.name !== "string" || !safeLabel(attachment.name) || typeof attachment.content !== "string" || !safeText(attachment.content)) return false;
+  return attachment.language === undefined || (typeof attachment.language === "string" && safeLabel(attachment.language));
+}
+
+export function normalizeSessionInfo(value: unknown): SessionInfo | null {
+  if (typeof value !== "object" || value === null || typeof (value as { id?: unknown }).id !== "string") return null;
+  if (isSessionRegistration(value)) return value as SessionInfo;
+  if (!("projectId" in value)) return null;
+  const { projectId: _projectId, ...withoutProjectId } = value as Record<string, unknown>;
+  return isSessionRegistration(withoutProjectId) ? withoutProjectId as unknown as SessionInfo : null;
+}
+
+export function isMessage(value: unknown): value is Message {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+
+  const message = value as Record<string, unknown>;
+
+  if (typeof message.id !== "string" || !safeLabel(message.id) || typeof message.timestamp !== "number" || !Number.isFinite(message.timestamp)) {
+    return false;
+  }
+
+  if (message.replyTo !== undefined && (typeof message.replyTo !== "string" || !safeLabel(message.replyTo))) {
+    return false;
+  }
+
+  if (message.human !== undefined && !isHumanMessageOrigin(message.human)) return false;
+  if (message.topic !== undefined && (!isTopicUpdate(message.topic) || message.human !== undefined || message.expectsReply || message.replyTo)) return false;
+
+  if (message.expectsReply !== undefined && typeof message.expectsReply !== "boolean") {
+    return false;
+  }
+
+  if (message.passive !== undefined && typeof message.passive !== "boolean") {
+    return false;
+  }
+
+  if (
+    message.delivery !== undefined
+    && message.delivery !== "queue"
+    && message.delivery !== "steer"
+    && message.delivery !== "passive"
+  ) {
+    return false;
+  }
+
+  if (
+    message.queueMode !== undefined
+    && message.queueMode !== "stack"
+    && message.queueMode !== "replace"
+  ) {
+    return false;
+  }
+
+  if (message.threadId !== undefined && (typeof message.threadId !== "string" || !safeLabel(message.threadId.trim()))) {
+    return false;
+  }
+
+  if (message.passive === true && message.delivery !== undefined && message.delivery !== "passive") {
+    return false;
+  }
+
+  if ((message.passive === true || message.delivery === "passive") && message.expectsReply === true) {
+    return false;
+  }
+
+  if (message.queueMode !== undefined && message.delivery !== "queue") {
+    return false;
+  }
+
+  if (message.queueMode === "replace" && typeof message.threadId !== "string") {
+    return false;
+  }
+
+  if (message.threadId !== undefined && message.queueMode !== "replace") {
+    return false;
+  }
+
+  if (typeof message.content !== "object" || message.content === null) {
+    return false;
+  }
+
+  const content = message.content as Record<string, unknown>;
+  if (typeof content.text !== "string" || !safeText(content.text)) {
+    return false;
+  }
+
+  return content.attachments === undefined
+    || (Array.isArray(content.attachments) && content.attachments.every(isAttachment));
+}
+
+export function isSessionRegistration(value: unknown): value is Omit<SessionInfo, "id"> {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const session = value as Record<string, unknown>;
+  if (typeof session.cwd !== "string" || !safeLabel(session.cwd) || typeof session.model !== "string" || !safeLabel(session.model)) return false;
+  if (session.name !== undefined && (typeof session.name !== "string" || !safeLabel(session.name))) return false;
+  if (session.projectId !== undefined && (typeof session.projectId !== "string" || !/^[a-f0-9]{64}$/.test(session.projectId))) return false;
+  if (session.status !== undefined && (typeof session.status !== "string" || !safeLabel(session.status))) return false;
+  if (session.lastSeen !== undefined && (typeof session.lastSeen !== "number" || !Number.isFinite(session.lastSeen))) return false;
+  if (session.lastIntercomActivity !== undefined && (typeof session.lastIntercomActivity !== "number" || !Number.isFinite(session.lastIntercomActivity))) return false;
+  if (session.pendingAsks !== undefined && (typeof session.pendingAsks !== "number" || !Number.isInteger(session.pendingAsks) || session.pendingAsks < 0)) return false;
+  if (session.subscriptions !== undefined && (!Array.isArray(session.subscriptions) || !session.subscriptions.every(isTopicSubscription))) return false;
+  if (session.topics !== undefined && (!Array.isArray(session.topics) || !session.topics.every(isTopicUpdate))) return false;
+  return session.acceptsAsks === undefined || typeof session.acceptsAsks === "boolean";
+}
+
+export interface SendResult {
+  id: string;
+  accepted: boolean;
+  delivered: boolean;
+  queued?: boolean;
+  reason?: string;
+}
+
+export type TopicChange =
+  | { action: "publish" | "restore"; topic: TopicUpdate }
+  | { action: "subscribe" | "restore"; subscription: TopicSubscription }
+  | { action: "unsubscribe"; topic: string };
+export interface SessionSnapshot {
+  sessions: SessionInfo[];
+  receipts: Array<SendResult & { to: string }>;
+}
+
+/** Topic text and the standard coalescing key need only one copy on the wire. */
+export function compactTopicMessage(message: Message) {
+  if (!message.topic) return message;
+  return { ...message,
+    topic: message.topic.text === message.content.text ? { ...message.topic, text: undefined } : message.topic,
+    threadId: message.queueMode === "replace" && message.threadId === `topic:${message.topic.topic}` ? undefined : message.threadId,
+  };
+}
+
+export function normalizeMessage(value: unknown): Message | null {
+  if (isMessage(value)) return value;
+  if (!value || typeof value !== "object") return null;
+  const message = value as Partial<Message>;
+  if (!message.topic || typeof message.topic !== "object" || !message.content) return null;
+  const restored = { ...message, topic: { ...message.topic, text: message.topic.text === undefined ? message.content.text : message.topic.text },
+    ...(message.queueMode === "replace" && message.threadId === undefined ? { threadId: `topic:${message.topic.topic}` } : {}) };
+  return isMessage(restored) ? restored : null;
+}
+
+export type BrokerMessage =
+  | { type: "registered"; sessionId: string; topicsSupported?: true; topicFrames?: true }
+  | { type: "sessions"; requestId: string; sessions: Array<Partial<SessionInfo> & Pick<SessionInfo, "id">>; more?: boolean; receipts?: SessionSnapshot["receipts"]; error?: string }
+  | { type: "message"; from: SessionInfo; message: Message | ReturnType<typeof compactTopicMessage> }
+  | { type: "session_left"; sessionId: string }
+  | { type: "delivered"; messageId: string }
+  | { type: "delivery_queued"; messageId: string; reason: string }
+  | { type: "delivery_failed"; messageId: string; reason: string };

package/src/pi-intercom/ui/compose.ts

@@ -0,0 +1,289 @@
+import type { TUI, TuiMouseEvent } from "@earendil-works/pi-tui";
+import { Box, Container, Text, sliceByColumn, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { actionHints } from "../../tui/action-hints.ts";
+import type { KeybindingsManager, Theme } from "@earendil-works/pi-coding-agent";
+import type { IntercomClient } from "../broker/client.ts";
+import type { SessionInfo } from "../types.ts";
+
+const BRACKETED_PASTE_START = "\x1b[200~";
+const BRACKETED_PASTE_END = "\x1b[201~";
+const MAX_PASTE_CHARS = 1_000_000;
+const INCOMPLETE_PASTE_IDLE_MS = 200;
+const PASTE_RENDER_TAIL_CHARS = 8192;
+
+export interface ComposeResult {
+  sent: boolean;
+  messageId?: string;
+  text?: string;
+  expectsReply?: boolean;
+}
+
+export class ComposeOverlay extends Container {
+  private tui: TUI;
+  private theme: Theme;
+  private keybindings: KeybindingsManager;
+  private target: SessionInfo;
+  private targetLabel: string;
+  private client: IntercomClient;
+  private done: (result: ComposeResult) => void;
+  private inputBuffer: string = "";
+  private mode: "send" | "ask" = "send";
+  private completed = false;
+  private sending: boolean = false;
+  private error: string | null = null;
+  private pasteBuffer: string | null = null;
+  private pasteStartPrefix = "";
+  private pasteIdleTimer: NodeJS.Timeout | null = null;
+
+  constructor(
+    tui: TUI,
+    theme: Theme,
+    keybindings: KeybindingsManager,
+    target: SessionInfo,
+    targetLabel: string,
+    client: IntercomClient,
+    done: (result: ComposeResult) => void,
+  ) {
+    super();
+    this.tui = tui;
+    this.theme = theme;
+    this.keybindings = keybindings;
+    this.target = target;
+    this.targetLabel = targetLabel;
+    this.client = client;
+    this.done = done;
+  }
+
+  dispose(): void {
+    this.completed = true;
+    if (this.pasteIdleTimer) clearTimeout(this.pasteIdleTimer);
+    this.pasteIdleTimer = null;
+  }
+
+  handleMouse(event: TuiMouseEvent) {
+    const width = Math.min(event.width, 72);
+    if (this.sending || this.completed || this.pasteBuffer !== null || this.pasteStartPrefix || event.x >= width) return;
+    return super.handleMouse({ ...event, width });
+  }
+
+  private act(action: "close" | "mode" | "send"): void {
+    if (this.sending || this.completed || this.pasteBuffer !== null || this.pasteStartPrefix) return;
+    if (action === "close") this.finish({ sent: false });
+    else if (action === "mode") { this.mode = this.mode === "send" ? "ask" : "send"; this.error = null; }
+    else if (this.inputBuffer.trim()) void this.sendMessage();
+    this.tui.requestRender();
+  }
+
+  private finish(result: ComposeResult): void {
+    if (this.completed) return;
+    this.dispose();
+    this.done(result);
+  }
+
+  private scheduleIncompletePasteFlush(): void {
+    if (this.pasteIdleTimer) clearTimeout(this.pasteIdleTimer);
+    this.pasteIdleTimer = setTimeout(() => {
+      this.pasteIdleTimer = null;
+      if (this.pasteBuffer === null || this.completed) return;
+      const data = this.pasteBuffer.replace(/\r\n?/g, "\n");
+      this.pasteBuffer = null;
+      const printable = [...data].filter((character) => character >= " " || character === "\n" || character === "\t").join("");
+      if (printable) this.inputBuffer += printable;
+      this.error = null;
+      this.tui.requestRender();
+    }, INCOMPLETE_PASTE_IDLE_MS);
+    this.pasteIdleTimer.unref?.();
+  }
+
+  handleInput(data: string): void {
+    if (this.sending || this.completed || !data) return;
+
+    let pasted = false;
+    if (this.pasteBuffer !== null) {
+      this.pasteBuffer += data;
+      const end = this.pasteBuffer.indexOf(BRACKETED_PASTE_END);
+      if (end === -1 && this.pasteBuffer.length <= MAX_PASTE_CHARS) {
+        this.scheduleIncompletePasteFlush();
+        this.tui.requestRender();
+        return;
+      }
+      data = end === -1
+        ? this.pasteBuffer
+        : this.pasteBuffer.slice(0, end) + this.pasteBuffer.slice(end + BRACKETED_PASTE_END.length);
+      this.pasteBuffer = null;
+      if (this.pasteIdleTimer) clearTimeout(this.pasteIdleTimer);
+      this.pasteIdleTimer = null;
+      data = data.replace(/\r\n?/g, "\n");
+      pasted = true;
+    } else {
+      if (this.pasteStartPrefix) {
+        if (this.pasteIdleTimer) clearTimeout(this.pasteIdleTimer);
+        this.pasteIdleTimer = null;
+        data = this.pasteStartPrefix + data;
+        this.pasteStartPrefix = "";
+      }
+      if (data !== BRACKETED_PASTE_START && BRACKETED_PASTE_START.startsWith(data)) {
+        this.pasteStartPrefix = data;
+        this.pasteIdleTimer = setTimeout(() => {
+          this.pasteIdleTimer = null;
+          const pendingPrefix = this.pasteStartPrefix;
+          this.pasteStartPrefix = "";
+          if (pendingPrefix === "\x1b" && this.keybindings.matches(pendingPrefix, "tui.select.cancel")) this.finish({ sent: false });
+        }, INCOMPLETE_PASTE_IDLE_MS);
+        this.pasteIdleTimer.unref?.();
+        return;
+      }
+    }
+    if (!pasted && data.startsWith(BRACKETED_PASTE_START)) {
+      const body = data.slice(BRACKETED_PASTE_START.length);
+      const end = body.indexOf(BRACKETED_PASTE_END);
+      if (end === -1 && body.length <= MAX_PASTE_CHARS) {
+        this.pasteBuffer = body;
+        this.scheduleIncompletePasteFlush();
+        this.tui.requestRender();
+        return;
+      }
+      data = end === -1 ? body : body.slice(0, end) + body.slice(end + BRACKETED_PASTE_END.length);
+      data = data.replace(/\r\n?/g, "\n");
+      pasted = true;
+    }
+    if (!pasted && data.includes(BRACKETED_PASTE_END)) data = data.replaceAll(BRACKETED_PASTE_END, "");
+    if (!data) return;
+
+    if (!pasted && this.keybindings.matches(data, "tui.select.cancel")) {
+      this.act("close");
+      return;
+    }
+
+    if (!pasted && data === "\t") {
+      this.act("mode");
+      return;
+    }
+
+    if (!pasted && this.keybindings.matches(data, "tui.select.confirm")) {
+      this.act("send");
+      return;
+    }
+
+    if (!pasted && data.startsWith("\x1b")) {
+      return;
+    }
+
+    if (!pasted && this.keybindings.matches(data, "tui.editor.deleteCharBackward")) {
+      this.inputBuffer = [...this.inputBuffer].slice(0, -1).join("");
+      this.error = null;
+      this.tui.requestRender();
+      return;
+    }
+
+    const printable = [...data].filter(c => c >= " " || c === "\n" || c === "\t").join("");
+    if (printable) {
+      this.inputBuffer += printable;
+      this.error = null;
+      this.tui.requestRender();
+    }
+  }
+
+  private async sendMessage(): Promise<void> {
+    this.sending = true;
+    this.error = null;
+    this.tui.requestRender();
+
+    try {
+      const expectsReply = this.mode === "ask";
+      const text = this.inputBuffer;
+      const result = await this.client.send(this.target.id, {
+        text,
+        expectsReply,
+      });
+
+      if (!result.accepted) {
+        this.error = result.reason ?? "Message not delivered. Session may not exist or has disconnected.";
+        this.sending = false;
+        this.tui.requestRender();
+        return;
+      }
+
+      this.finish({
+        sent: true,
+        messageId: result.id,
+        text,
+        expectsReply,
+      });
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error);
+      this.sending = false;
+      this.tui.requestRender();
+    }
+  }
+
+  private renderInputLines(row: (text?: string) => string, lines: string[], contentWidth: number): void {
+    const pendingPaste = this.pasteBuffer === null
+      ? ""
+      : [...this.pasteBuffer.slice(-PASTE_RENDER_TAIL_CHARS)].filter((character) => character >= " " || character === "\n" || character === "\t").join("");
+    const rawLines = `${this.inputBuffer.slice(-PASTE_RENDER_TAIL_CHARS)}${pendingPaste}`.split("\n");
+    const visibleLines = rawLines.slice(-8);
+    visibleLines.forEach((line, index) => {
+      const isLast = index === visibleLines.length - 1;
+      const prefix = index === 0 ? " > " : "   ";
+      if (isLast) {
+        const graphemes = [...line];
+        const budget = Math.max(1, contentWidth - prefix.length - 1);
+        let used = 0;
+        let start = graphemes.length;
+        while (start > 0) {
+          const width = visibleWidth(graphemes[start - 1]!);
+          if (used + width > budget) break;
+          used += width;
+          start--;
+        }
+        line = graphemes.slice(start).join("");
+      }
+      lines.push(row(`${prefix}${line}${isLast ? "█" : ""}`));
+    });
+  }
+
+  render(width: number): string[] {
+    this.clear();
+    if (width < 3) return [truncateToWidth("Intercom", width)];
+    const innerWidth = Math.min(width, 72);
+    const contentWidth = Math.max(1, innerWidth - 2);
+    const send = [this.keybindings.getKeys("tui.select.confirm").join("/"), this.mode === "ask" ? "Request reply" : "Send"].filter(Boolean).join(": ");
+    const mode = `Tab: ${this.mode === "ask" ? "Send mode" : "Request-reply mode"}`;
+    const close = [this.keybindings.getKeys("tui.select.cancel").join("/"), "Close"].filter(Boolean).join(": ");
+    const footer = this.sending ? ["Sending…"] : this.pasteBuffer !== null || this.pasteStartPrefix ? ["Pasting…"] : [
+      { text: send, run: () => this.act("send") }, " • ", { text: mode, run: () => this.act("mode") }, " • ", { text: close, run: () => this.act("close") },
+    ];
+    const border = (text: string) => this.theme.fg("accent", text);
+    const row = (text = "") => {
+      const clipped = truncateToWidth(text, contentWidth, "…", true);
+      return `${border("│")}${clipped}${" ".repeat(Math.max(0, contentWidth - visibleWidth(clipped)))}${border("│")}`;
+    };
+
+    const lines: string[] = [];
+    lines.push(border(`╭${"─".repeat(contentWidth)}╮`));
+    lines.push(row(this.theme.bold(` ${this.mode === "ask" ? "Request reply" : "Send"} to: ${this.targetLabel}`)));
+    lines.push(row(this.theme.fg("dim", ` Native session cwd: ${this.target.cwd} • ${this.target.model}`)));
+    lines.push(border(`├${"─".repeat(contentWidth)}┤`));
+    lines.push(row());
+
+    if (this.sending) {
+      lines.push(row(this.theme.fg("dim", " Sending...")));
+    } else if (this.error) {
+      lines.push(row(this.theme.fg("error", ` Error: ${this.error}`)));
+      lines.push(row());
+      this.renderInputLines(row, lines, contentWidth);
+    } else {
+      this.renderInputLines(row, lines, contentWidth);
+    }
+
+    lines.push(row());
+    lines.push(border(`├${"─".repeat(contentWidth)}┤`));
+    this.addChild(new Text(lines.join("\n"), 0, 0));
+    const controls = new Box(1, 0, (line) => row(sliceByColumn(line, 1, contentWidth)));
+    controls.addChild(actionHints([" ", ...footer], (text) => this.theme.fg("dim", text), "…"));
+    this.addChild(controls);
+    this.addChild(new Text(border(`╰${"─".repeat(contentWidth)}╯`), 0, 0));
+    return super.render(innerWidth);
+  }
+}

package/src/pi-intercom/ui/inline-message.ts

@@ -0,0 +1,92 @@
+import type { Component } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { keyText, type Theme } from "@earendil-works/pi-coding-agent";
+import type { SessionInfo, Message } from "../types.ts";
+
+export class InlineMessageComponent implements Component {
+  private from: SessionInfo;
+  private message: Message;
+  private theme: Theme;
+  private replyCommand?: string;
+  private bodyText?: string;
+  private expanded: boolean;
+  private cachedWidth?: number;
+  private cachedLines?: string[];
+
+  constructor(from: SessionInfo, message: Message, theme: Theme, replyCommand?: string, bodyText?: string, expanded = true) {
+    this.from = from;
+    this.message = message;
+    this.theme = theme;
+    this.replyCommand = replyCommand;
+    this.bodyText = bodyText;
+    this.expanded = expanded;
+  }
+
+  invalidate(): void {
+    this.cachedWidth = undefined;
+    this.cachedLines = undefined;
+  }
+
+  render(width: number): string[] {
+    if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
+
+    const lines: string[] = [];
+    const borderChar = "─";
+    if (width < 3) {
+      this.cachedWidth = width;
+      this.cachedLines = [truncateToWidth(`From ${this.from.name || this.from.id.slice(0, 8)}`, width)];
+      return this.cachedLines;
+    }
+    const bodyWidth = Math.max(1, width - 2);
+
+    const senderName = this.from.name || this.from.id.slice(0, 8);
+    const header = ` 📨 From: ${senderName} (Native session cwd: ${this.from.cwd}) `;
+    const headerText = truncateToWidth(header, bodyWidth, "");
+    const headerPadding = Math.max(0, bodyWidth - visibleWidth(headerText));
+    lines.push(this.theme.fg("accent", `╭${headerText}${borderChar.repeat(headerPadding)}╮`));
+
+    const body = this.bodyText || this.message.content.text;
+    // Grouped subagent results start with run, mode, status and child counts after the title.
+    const contentLines = this.expanded ? wrapTextWithAnsi(body, bodyWidth) : body.split("\n").slice(2, 6);
+    if (!this.expanded) contentLines.push(this.theme.fg("dim", `${keyText("app.tools.expand")} full response`));
+    for (const line of contentLines) {
+      const text = truncateToWidth(line, bodyWidth, "");
+      const padding = Math.max(0, bodyWidth - visibleWidth(text));
+      lines.push(this.theme.fg("accent", `│${text}${" ".repeat(padding)}│`));
+    }
+
+    if (this.replyCommand) {
+      lines.push(this.theme.fg("accent", `│${" ".repeat(bodyWidth)}│`));
+      const replyLines = wrapTextWithAnsi(this.theme.fg("dim", ` ↩ To reply: ${this.replyCommand}`), bodyWidth);
+      for (const line of replyLines) {
+        const text = truncateToWidth(line, bodyWidth, "");
+        const padding = Math.max(0, bodyWidth - visibleWidth(text));
+        lines.push(this.theme.fg("accent", `│${text}${" ".repeat(padding)}│`));
+      }
+    }
+
+    if (this.message.content.attachments?.length && !this.bodyText) {
+      lines.push(this.theme.fg("accent", `│${" ".repeat(bodyWidth)}│`));
+      for (const att of this.message.content.attachments) {
+        const label = this.theme.fg("dim", ` 📎 ${att.name}`);
+        const text = truncateToWidth(label, bodyWidth, "");
+        const padding = Math.max(0, bodyWidth - visibleWidth(text));
+        lines.push(this.theme.fg("accent", `│${text}${" ".repeat(padding)}│`));
+      }
+    }
+
+    if (this.message.replyTo && !this.message.expectsReply) {
+      lines.push(this.theme.fg("accent", `│${" ".repeat(bodyWidth)}│`));
+      const reply = this.theme.fg("dim", ` ↳ Reply to ${this.message.replyTo.slice(0, 8)}`);
+      const text = truncateToWidth(reply, bodyWidth, "");
+      const padding = Math.max(0, bodyWidth - visibleWidth(text));
+      lines.push(this.theme.fg("accent", `│${text}${" ".repeat(padding)}│`));
+    }
+
+    lines.push(this.theme.fg("accent", `╰${borderChar.repeat(bodyWidth)}╯`));
+
+    this.cachedWidth = width;
+    this.cachedLines = lines;
+    return lines;
+  }
+}