@ctliz/agent-intercom-pi 0.11.0-connect.2

package/ui/inline-message.ts

@@ -0,0 +1,126 @@
+import type { Component } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { SessionInfo, Message } from "../types.ts";
+import { formatSessionDisplayName, sanitizeDisplayText } from "./session-identity.ts";
+import { formatMessageTiming } from "./timestamps.ts";
+
+export class InlineMessageComponent implements Component {
+  private from: SessionInfo;
+  private message: Message;
+  private theme: Theme;
+  private replyCommand?: string;
+  private bodyText?: string;
+  private collapsed: boolean;
+  private receivedAt?: number;
+  private readAt?: number;
+
+  constructor(
+    from: SessionInfo,
+    message: Message,
+    theme: Theme,
+    replyCommand?: string,
+    bodyText?: string,
+    collapsed = false,
+    receivedAt?: number,
+    readAt?: number,
+  ) {
+    this.from = from;
+    this.message = message;
+    this.theme = theme;
+    this.replyCommand = replyCommand;
+    this.bodyText = bodyText;
+    this.collapsed = collapsed;
+    this.receivedAt = receivedAt;
+    this.readAt = readAt;
+  }
+
+  invalidate(): void {}
+
+  render(width: number): string[] {
+    const lines: string[] = [];
+    const borderChar = "─";
+    const senderName = formatSessionDisplayName(this.from, "Unknown sender");
+    const senderCwd = sanitizeDisplayText(this.from.cwd, "Unknown path");
+    if (width < 3) {
+      return [truncateToWidth(`From ${senderName}`, width)];
+    }
+    const bodyWidth = Math.max(1, width - 2);
+
+    const header = ` 📨 From: ${senderName} (${senderCwd}) `;
+    const headerText = truncateToWidth(this.collapsed ? `${header} Ctrl+O expands ` : header, bodyWidth, "");
+    const headerPadding = Math.max(0, bodyWidth - visibleWidth(headerText));
+    lines.push(this.theme.fg("accent", `╭${headerText}${borderChar.repeat(headerPadding)}╮`));
+
+    if (this.collapsed) {
+      const preview = (this.bodyText || this.message.content.text).replace(/\s+/g, " ").trim();
+      const previewText = truncateToWidth(preview, bodyWidth, "");
+      const previewPadding = Math.max(0, bodyWidth - visibleWidth(previewText));
+      lines.push(this.theme.fg("accent", `│${previewText}${" ".repeat(previewPadding)}│`));
+
+      const meta: string[] = [];
+      const timing = formatMessageTiming({ sentAt: this.message.timestamp, receivedAt: this.receivedAt, readAt: this.readAt });
+      if (timing) meta.push(timing);
+      if (this.replyCommand) meta.push(`↩ To reply: ${this.replyCommand}`);
+      if (this.message.content.attachments?.length) {
+        const count = this.message.content.attachments.length;
+        meta.push(`📎 ${count} attachment${count === 1 ? "" : "s"}`);
+      }
+      if (this.message.replyTo && !this.message.expectsReply) meta.push(`↳ Reply to ${this.message.replyTo.slice(0, 8)}`);
+      meta.push("Ctrl+O to expand");
+
+      const metaText = truncateToWidth(this.theme.fg("dim", ` ${meta.join(" · ")}`), bodyWidth, "");
+      const metaPadding = Math.max(0, bodyWidth - visibleWidth(metaText));
+      lines.push(this.theme.fg("accent", `│${metaText}${" ".repeat(metaPadding)}│`));
+      lines.push(this.theme.fg("accent", `╰${borderChar.repeat(bodyWidth)}╯`));
+      return lines;
+    }
+
+    const contentLines = wrapTextWithAnsi(this.bodyText || this.message.content.text, bodyWidth);
+    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) {
+      lines.push(this.theme.fg("accent", `│${" ".repeat(bodyWidth)}│`));
+      for (const att of this.message.content.attachments) {
+        const label = this.theme.fg("dim", ` 📎 ${sanitizeDisplayText(att.name, "Unnamed attachment")}`);
+        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)}│`));
+    }
+
+    const timing = formatMessageTiming({ sentAt: this.message.timestamp, receivedAt: this.receivedAt, readAt: this.readAt });
+    if (timing) {
+      lines.push(this.theme.fg("accent", `│${" ".repeat(bodyWidth)}│`));
+      const timingText = truncateToWidth(this.theme.fg("dim", ` ${timing}`), bodyWidth, "");
+      const timingPadding = Math.max(0, bodyWidth - visibleWidth(timingText));
+      lines.push(this.theme.fg("accent", `│${timingText}${" ".repeat(timingPadding)}│`));
+    }
+
+    lines.push(this.theme.fg("accent", `╰${borderChar.repeat(bodyWidth)}╯`));
+
+    return lines;
+  }
+}

package/ui/session-identity.ts

@@ -0,0 +1,55 @@
+import type { SessionInfo } from "../types.ts";
+
+const ANSI_SEQUENCE = /[\u001b\u009b](?:\][^\u0007]*(?:\u0007|\u001b\\)|\[[0-?]*[ -/]*[@-~]|[@-_])/g;
+const CONTROL_CHARACTER = /[\u0000-\u001f\u007f-\u009f]/g;
+
+/** Make untrusted presence metadata safe to place directly in a terminal UI. */
+export function sanitizeDisplayText(value: string | undefined, fallback = ""): string {
+  const sanitized = (value ?? "")
+    .replace(ANSI_SEQUENCE, "")
+    .replace(CONTROL_CHARACTER, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  return sanitized || fallback;
+}
+
+/**
+ * Return the shortest prefix which distinguishes every ID in the collection.
+ * A small floor keeps isolated IDs useful to humans while still expanding
+ * automatically when UUIDv7 values share a long timestamp prefix.
+ */
+export function shortestUniqueIdPrefixes(ids: readonly string[], minimumLength = 4): Map<string, string> {
+  const uniqueIds = [...new Set(ids)];
+  const result = new Map<string, string>();
+
+  for (const id of uniqueIds) {
+    let length = Math.min(Math.max(1, minimumLength), id.length);
+    while (
+      length < id.length
+      && uniqueIds.some(other => other !== id && other.startsWith(id.slice(0, length)))
+    ) {
+      length += 1;
+    }
+    result.set(id, id.slice(0, length));
+  }
+
+  return result;
+}
+
+export function sessionOriginLabel(session: SessionInfo): string | undefined {
+  if (session.origin !== "remote") return undefined;
+  return `remote:${sanitizeDisplayText(session.remoteHostId, "unknown-host")}`;
+}
+
+export function formatSessionDisplayName(session: SessionInfo, fallback?: string): string {
+  const name = sanitizeDisplayText(session.name, fallback ?? sanitizeDisplayText(session.id.slice(0, 8), "Unknown session"));
+  const origin = sessionOriginLabel(session);
+  return origin ? `${name} [${origin}]` : name;
+}
+
+export function searchableSessionText(session: SessionInfo): string {
+  return [session.name, session.id, session.cwd, session.model, session.status, session.origin, session.remoteHostId, session.parentSessionId, session.rootSessionId]
+    .filter((value): value is string => typeof value === "string")
+    .join("\n")
+    .toLocaleLowerCase();
+}

package/ui/session-list.ts

@@ -0,0 +1,205 @@
+import type { Component } from "@earendil-works/pi-tui";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import type { KeybindingsManager, Theme } from "@earendil-works/pi-coding-agent";
+import type { SessionInfo } from "../types.ts";
+import { sanitizeDisplayText, searchableSessionText, sessionOriginLabel, shortestUniqueIdPrefixes } from "./session-identity.ts";
+
+function middleTruncate(text: string, maxWidth: number): string {
+  if (visibleWidth(text) <= maxWidth) {
+    return text;
+  }
+  if (maxWidth <= 3) {
+    return truncateToWidth(text, maxWidth, "");
+  }
+
+  const chars = [...text];
+  const targetSideWidth = Math.max(1, Math.floor((maxWidth - 1) / 2));
+
+  let left = "";
+  for (const char of chars) {
+    if (visibleWidth(left + char) > targetSideWidth) break;
+    left += char;
+  }
+
+  let right = "";
+  for (const char of chars.slice().reverse()) {
+    if (visibleWidth(char + right) > targetSideWidth) break;
+    right = char + right;
+  }
+
+  return truncateToWidth(`${left}…${right}`, maxWidth, "");
+}
+
+function sessionTitle(
+  session: SessionInfo,
+  idPrefix: string,
+  options?: { self?: boolean; sameCwd?: boolean },
+): string {
+  const name = sanitizeDisplayText(session.name, "Unnamed session");
+  const tags = [options?.self ? "self" : undefined, options?.sameCwd ? "same cwd" : undefined, sessionOriginLabel(session)]
+    .filter((tag): tag is string => Boolean(tag));
+  const suffix = tags.length ? ` [${tags.join(", ")}]` : "";
+  return `${name} (${sanitizeDisplayText(idPrefix, "unknown")})${suffix}`;
+}
+
+export class SessionListOverlay implements Component {
+  private theme: Theme;
+  private keybindings: KeybindingsManager;
+  private currentSession: SessionInfo;
+  private done: (result: SessionInfo | undefined) => void;
+  private sessions: SessionInfo[];
+  private selectedIndex = 0;
+  private maxVisible = 8;
+  private query = "";
+  private idPrefixes: Map<string, string>;
+
+  constructor(
+    theme: Theme,
+    keybindings: KeybindingsManager,
+    currentSession: SessionInfo,
+    sessions: SessionInfo[],
+    done: (result: SessionInfo | undefined) => void,
+  ) {
+    this.theme = theme;
+    this.keybindings = keybindings;
+    this.currentSession = currentSession;
+    this.sessions = sessions;
+    this.done = done;
+    this.idPrefixes = shortestUniqueIdPrefixes([currentSession.id, ...sessions.map(session => session.id)]);
+  }
+
+  private get filteredSessions(): SessionInfo[] {
+    const query = this.query.trim().toLocaleLowerCase();
+    if (!query) return this.sessions;
+    return this.sessions.filter(session => searchableSessionText(session).includes(query));
+  }
+
+  private onSessionSelect(sessionId: string, sessions: SessionInfo[]): void {
+    const session = sessions.find(s => s.id === sessionId);
+    if (!session) return;
+    this.done(session);
+  }
+
+  invalidate(): void {}
+
+  handleInput(data: string): void {
+    if (this.keybindings.matches(data, "tui.select.cancel")) {
+      this.done(undefined);
+      return;
+    }
+
+    const sessions = this.filteredSessions;
+
+    if (this.keybindings.matches(data, "tui.select.up")) {
+      if (sessions.length === 0) return;
+      this.selectedIndex = this.selectedIndex === 0 ? sessions.length - 1 : this.selectedIndex - 1;
+      return;
+    }
+
+    if (this.keybindings.matches(data, "tui.select.down")) {
+      if (sessions.length === 0) return;
+      this.selectedIndex = this.selectedIndex === sessions.length - 1 ? 0 : this.selectedIndex + 1;
+      return;
+    }
+
+    if (this.keybindings.matches(data, "tui.select.confirm")) {
+      const session = sessions[this.selectedIndex];
+      if (session) {
+        this.onSessionSelect(session.id, sessions);
+      }
+      return;
+    }
+
+    if (this.keybindings.matches(data, "tui.editor.deleteCharBackward")) {
+      this.query = [...this.query].slice(0, -1).join("");
+      this.selectedIndex = 0;
+      return;
+    }
+
+    if (!data.startsWith("\x1b")) {
+      const printable = [...data].filter(character => {
+        const code = character.charCodeAt(0);
+        return code >= 32 && code !== 127 && !(code >= 128 && code <= 159);
+      }).join("");
+      if (printable) {
+        this.query += printable;
+        this.selectedIndex = 0;
+      }
+    }
+  }
+
+  render(width: number): string[] {
+    const innerWidth = Math.max(1, Math.min(width, 88));
+    if (innerWidth === 1) {
+      return [this.theme.fg("accent", "│")];
+    }
+
+    const contentWidth = Math.max(0, innerWidth - 2);
+    const footer = `Type: Filter • ${this.keybindings.getKeys("tui.select.confirm").join("/")}: Message • ${this.keybindings.getKeys("tui.select.cancel").join("/")}: 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[] = [];
+    const sessions = this.filteredSessions;
+    if (this.selectedIndex >= sessions.length) this.selectedIndex = Math.max(0, sessions.length - 1);
+    const currentIdPrefix = this.idPrefixes.get(this.currentSession.id) ?? this.currentSession.id;
+    const currentCwd = sanitizeDisplayText(this.currentSession.cwd, "Unknown path");
+    const currentModel = sanitizeDisplayText(this.currentSession.model, "Unknown model");
+    lines.push(border(`╭${"─".repeat(contentWidth)}╮`));
+    lines.push(row(this.theme.bold(" Current Session")));
+    lines.push(border(`├${"─".repeat(contentWidth)}┤`));
+    lines.push(row());
+    lines.push(row(`  ${this.theme.fg("dim", sessionTitle(this.currentSession, currentIdPrefix, { self: true }))}`));
+    lines.push(row(`  ${this.theme.fg("dim", `${middleTruncate(currentCwd, Math.max(8, contentWidth - 4))} • ${currentModel}`)}`));
+    lines.push(row());
+    lines.push(border(`├${"─".repeat(contentWidth)}┤`));
+    lines.push(row(this.theme.bold(" Other Sessions")));
+    lines.push(row(this.theme.fg("dim", ` Search: ${sanitizeDisplayText(this.query)}█`)));
+    lines.push(row());
+
+    if (sessions.length === 0) {
+      lines.push(row(this.theme.fg("dim", this.sessions.length === 0
+        ? " No other intercom-connected sessions"
+        : ` No sessions match “${sanitizeDisplayText(this.query)}”`)));
+    } else {
+      const startIndex = Math.max(
+        0,
+        Math.min(this.selectedIndex - Math.floor(this.maxVisible / 2), sessions.length - this.maxVisible),
+      );
+      const endIndex = Math.min(startIndex + this.maxVisible, sessions.length);
+
+      for (let index = startIndex; index < endIndex; index += 1) {
+        const session = sessions[index];
+        const isSelected = index === this.selectedIndex;
+        const sameCwd = session.cwd === this.currentSession.cwd;
+        const prefix = isSelected ? this.theme.fg("accent", "→ ") : "  ";
+        const idPrefix = this.idPrefixes.get(session.id) ?? session.id;
+        const title = sessionTitle(session, idPrefix, { sameCwd });
+        const cwd = sanitizeDisplayText(session.cwd, "Unknown path");
+        const model = sanitizeDisplayText(session.model, "Unknown model");
+        const pathText = `${middleTruncate(cwd, Math.max(8, contentWidth - 4))} • ${model}`;
+
+        lines.push(row(`${prefix}${isSelected ? this.theme.fg("accent", title) : title}`));
+        lines.push(row(`  ${this.theme.fg("dim", pathText)}`));
+        if (index < endIndex - 1) {
+          lines.push(row());
+        }
+      }
+
+      if (startIndex > 0 || endIndex < sessions.length) {
+        lines.push(row());
+        lines.push(row(this.theme.fg("dim", ` ${this.selectedIndex + 1}/${sessions.length}`)));
+      }
+    }
+
+    lines.push(row());
+    lines.push(border(`├${"─".repeat(contentWidth)}┤`));
+    lines.push(row(this.theme.fg("dim", ` ${footer}`)));
+    lines.push(border(`╰${"─".repeat(contentWidth)}╯`));
+
+    return lines;
+  }
+}

package/ui/timestamps.ts

@@ -0,0 +1,50 @@
+export interface MessageTiming {
+  sentAt?: number;
+  receivedAt?: number;
+  readAt?: number;
+  deliveredAt?: number;
+}
+
+function validTimestamp(value: number | undefined): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+/** Format a timestamp in the user's local timezone for compact TUI rows. */
+export function formatClockTime(timestamp: number): string {
+  const date = new Date(timestamp);
+  const pad = (value: number, width = 2) => String(value).padStart(width, "0");
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(date.getMilliseconds(), 3)}`;
+}
+
+/** Format a signed elapsed duration without hiding clock skew. */
+export function formatTimeDelta(durationMs: number): string {
+  const sign = durationMs < 0 ? "−" : "+";
+  const absolute = Math.abs(durationMs);
+  if (absolute < 1000) return `${sign}${Math.round(absolute)}ms`;
+  if (absolute < 60_000) return `${sign}${(absolute / 1000).toFixed(absolute < 10_000 ? 2 : 1)}s`;
+  const minutes = Math.floor(absolute / 60_000);
+  const seconds = Math.floor((absolute % 60_000) / 1000);
+  return `${sign}${minutes}m${String(seconds).padStart(2, "0")}s`;
+}
+
+/**
+ * Build compact message timing text. Each parenthesized delta is measured from
+ * the immediately preceding timestamp.
+ */
+export function formatMessageTiming(timing: MessageTiming): string {
+  const parts: string[] = [];
+  let previous: number | undefined;
+
+  const add = (label: string, timestamp: number | undefined) => {
+    if (!validTimestamp(timestamp)) return;
+    const delta = previous === undefined ? "" : ` (${formatTimeDelta(timestamp - previous)})`;
+    parts.push(`${label} ${formatClockTime(timestamp)}${delta}`);
+    previous = timestamp;
+  };
+
+  add("sent", timing.sentAt);
+  add("received", timing.receivedAt);
+  add("delivered", timing.deliveredAt);
+  add("read", timing.readAt);
+  return parts.join(" · ");
+}