pi-onlyne 2.1.0 → 2.3.0

package/src/activity.mjs

@@ -1,5 +1,7 @@
 /** The widget key shared with pi-surface. */
 export const WIDGET_KEY = "onlyne";
+/** The custom message type registered for visible inbound delivery cards. */
+export const ASSIGN_MESSAGE_TYPE = "onlyne_assign";
 /** Render budget below pi's own ten-line cap. */
 export const MAX_LINES = 8;
 /** Line budget that keeps the panel inside one terminal row. */
@@ -19,6 +21,21 @@ const MARKERS = {
   state: "..",
 };
 
+const EVENT_STYLES = {
+  in: { fg: "accent" },
+  dup: { fg: "dim" },
+  out: { fg: "success" },
+  warn: { fg: "warning" },
+  state: { fg: "muted" },
+};
+
+const CONNECTION_STYLES = {
+  connected: { fg: "success", status: "done" },
+  reconnecting: { fg: "warning", status: "running" },
+  detached: { fg: "muted", status: "cancelled" },
+  connecting: { fg: "accent", status: "pending" },
+};
+
 const clean = (value) => String(value ?? "").replace(/\s+/g, " ").trim();
 const points = (value) => Array.from(String(value ?? ""));
 
@@ -62,6 +79,237 @@ function eventLine(event) {
   return cut(`${timeOf(event.at)}  ${marker} ${event.text}${count}`, MAX_WIDTH);
 }
 
+function toneFg(theme, color, text) {
+  if (!theme || typeof theme.fg !== "function") return text;
+  try {
+    return theme.fg(color, text);
+  } catch {
+    return text;
+  }
+}
+
+function toneBold(theme, text) {
+  if (!theme || typeof theme.bold !== "function") return text;
+  try {
+    return theme.bold(text);
+  } catch {
+    return text;
+  }
+}
+
+function styledHeaderLine(state, theme, width) {
+  if (!theme || typeof theme.fg !== "function") return headerLine(state);
+  const role = clean(state.role);
+  const connection = clean(state.connection) || "connecting";
+  const connStyle = CONNECTION_STYLES[connection] ?? CONNECTION_STYLES.connecting;
+  const sep = toneFg(theme, "dim", " · ");
+  const head = role
+    ? `${toneBold(theme, toneFg(theme, "accent", "onlyne"))} ${toneBold(theme, cut(role, 16, false))}`
+    : toneBold(theme, toneFg(theme, "accent", "onlyne"));
+  const parts = [head, toneFg(theme, connStyle.fg, connection)];
+  if (state.generation !== undefined && state.generation !== null) {
+    parts.push(toneFg(theme, "muted", `gen ${state.generation}`));
+  }
+  const taskId = clean(state.taskId);
+  if (taskId) {
+    const phase = clean(state.phase);
+    const phaseTone = phase === "done"
+      ? "success"
+      : phase === "failed" || phase === "blocked"
+        ? "error"
+        : phase.includes("queued") || phase === "running"
+          ? "warning"
+          : "muted";
+    const taskPart = `${toneFg(theme, "muted", "task")} ${toneFg(theme, "accent", cut(taskId, 8, false))}${
+      phase ? ` ${toneFg(theme, phaseTone, phase)}` : ""
+    }`;
+    parts.push(taskPart);
+  }
+  return parts.join(sep);
+}
+
+function styledEventLine(event, theme, maxTextWidth) {
+  if (!theme || typeof theme.fg !== "function") return eventLine(event);
+  const marker = MARKERS[event.kind] ?? MARKERS.state;
+  const style = EVENT_STYLES[event.kind] ?? EVENT_STYLES.state;
+  const count = event.repeats > 0 ? toneFg(theme, "warning", ` ×${event.repeats + 1}`) : "";
+  const bodyBudget = Math.max(12, maxTextWidth - 14 - (event.repeats > 0 ? String(event.repeats + 1).length + 2 : 0));
+  const body = cut(event.text, bodyBudget);
+  const bodyStyled = event.kind === "warn"
+    ? toneFg(theme, "warning", body)
+    : event.kind === "dup"
+      ? toneFg(theme, "dim", body)
+      : body;
+  return `${toneFg(theme, "dim", timeOf(event.at))}  ${toneFg(theme, style.fg, marker)} ${bodyStyled}${count}`;
+}
+
+function describeHeaderSpans(state) {
+  const role = clean(state.role);
+  const connection = clean(state.connection) || "connecting";
+  const connStyle = CONNECTION_STYLES[connection] ?? CONNECTION_STYLES.connecting;
+  const spans = [{ t: "onlyne", s: "accent strong" }];
+  if (role) spans.push({ t: ` ${cut(role, 16, false)}`, s: "strong" });
+  spans.push({ t: " · ", s: "dim" }, { t: connection, s: connStyle.fg });
+  if (state.generation !== undefined && state.generation !== null) {
+    spans.push({ t: " · ", s: "dim" }, { t: `gen ${state.generation}`, s: "muted" });
+  }
+  const taskId = clean(state.taskId);
+  if (taskId) {
+    const phase = clean(state.phase);
+    const phaseTone = phase === "done"
+      ? "success"
+      : phase === "failed" || phase === "blocked"
+        ? "error"
+        : phase.includes("queued") || phase === "running"
+          ? "warning"
+          : "muted";
+    spans.push(
+      { t: " · ", s: "dim" },
+      { t: "task ", s: "muted" },
+      { t: cut(taskId, 8, false), s: "accent mono" },
+    );
+    if (phase) spans.push({ t: ` ${phase}`, s: phaseTone });
+  }
+  return spans;
+}
+
+function describeEventRow(event, index) {
+  const marker = MARKERS[event.kind] ?? MARKERS.state;
+  const style = EVENT_STYLES[event.kind] ?? EVENT_STYLES.state;
+  const bodyTone = event.kind === "warn" ? "warning" : event.kind === "dup" ? "dim" : undefined;
+  const spans = [
+    { t: timeOf(event.at), s: "dim mono" },
+    { t: `  ${marker} `, s: `${style.fg} mono strong` },
+    bodyTone ? { t: event.text, s: bodyTone } : { t: event.text },
+  ];
+  if (event.repeats > 0) {
+    spans.push({ t: ` ×${event.repeats + 1}`, s: "warning mono" });
+  }
+  return {
+    k: "text",
+    p: { spans, truncate: "end", role: `onlyne.event.${event.kind}` },
+    key: `ev-${index}`,
+  };
+}
+
+/**
+ * Build a TSP `NativeNode` card for Tern surfaces (`Component.describe()`).
+ */
+export function describeActivityNode(state, events, shown = SHOW_EVENTS, collapsed = false) {
+  const connection = clean(state.connection) || "connecting";
+  const connStyle = CONNECTION_STYLES[connection] ?? CONNECTION_STYLES.connecting;
+  const visible = events.slice(0, shown);
+  return {
+    k: "card",
+    p: {
+      role: "omp.widget.onlyne",
+      variant: "bare",
+      status: connStyle.status,
+      head: describeHeaderSpans(state),
+      collapsible: visible.length > 0,
+      collapsed: visible.length > 0 ? Boolean(collapsed) : false,
+    },
+    c: visible.map((ev, index) => describeEventRow(ev, index)),
+  };
+}
+
+/**
+ * Render an inbound Onlyne delivery (`customType: "onlyne_assign"`) as a
+ * framed transcript block on ANSI terminals and a native TSP card on Tern.
+ */
+export function createAssignMessageComponent(details, messageContent, theme, collapsed = false) {
+  const from = clean(details?.from) || "cluster";
+  const kind = clean(details?.kind) || "task";
+  const taskId = clean(details?.taskId);
+  const shortId = taskId ? cut(taskId, 8, false) : "";
+  const rawBody = clean(details?.bodyText)
+    || (typeof messageContent === "string"
+      ? messageContent
+      : Array.isArray(messageContent)
+        ? messageContent.filter((p) => p?.type === "text" && typeof p.text === "string").map((p) => p.text).join("\n")
+        : "");
+  const bodyLines = String(details?.bodyText ?? (typeof messageContent === "string" ? messageContent : rawBody))
+    .replace(/\r\n/g, "\n")
+    .split("\n");
+  const headLabel = `From ${from} · ${kind}${shortId ? ` · ${shortId}` : ""}`;
+  const kindTone = kind === "note" ? "info" : kind === "nudge" ? "warning" : "accent";
+  let cachedWidth = -1;
+  let cachedRows = null;
+  let cachedNode = null;
+  let isCollapsed = Boolean(collapsed);
+
+  const buildNode = () => {
+    const headSpans = [
+      { t: `From ${from}`, s: "accent strong" },
+      { t: " · ", s: "dim" },
+      { t: kind, s: `${kindTone} mono` },
+    ];
+    if (shortId) {
+      headSpans.push({ t: " · ", s: "dim" }, { t: shortId, s: "muted mono" });
+    }
+    const mdText = String(details?.bodyText ?? (typeof messageContent === "string" ? messageContent : rawBody)).trim();
+    return {
+      k: "card",
+      p: {
+        role: `omp.custom.onlyne.${kind}`,
+        tone: kind === "nudge" ? "warning" : "accent",
+        head: headSpans,
+        collapsible: true,
+        collapsed: isCollapsed,
+      },
+      c: mdText ? [{ k: "md", p: { text: mdText }, key: "body" }] : [],
+    };
+  };
+
+  const buildRows = (width = MAX_WIDTH) => {
+    const w = Math.max(16, Math.min(width, MAX_WIDTH));
+    const inner = Math.max(12, w - 4);
+    const topText = ` ${cut(headLabel, inner - 2)} `;
+    const topFill = "─".repeat(Math.max(0, w - 2 - points(topText).length));
+    const rows = [
+      `${toneFg(theme, "muted", "╭")}${toneBold(theme, toneFg(theme, "accent", topText))}${toneFg(theme, "muted", `${topFill}╮`)}`,
+    ];
+    const visibleBody = isCollapsed
+      ? [cut(clean(rawBody), inner)]
+      : bodyLines.flatMap((line) => {
+          const trimmed = line.replace(/\t/g, "  ");
+          return trimmed.length === 0 ? [""] : [cut(trimmed, inner)];
+        });
+    for (const line of visibleBody) {
+      const pad = " ".repeat(Math.max(0, inner - points(line).length));
+      rows.push(`${toneFg(theme, "muted", "│")} ${toneFg(theme, "text", line)}${pad} ${toneFg(theme, "muted", "│")}`);
+    }
+    rows.push(`${toneFg(theme, "muted", `╰${"─".repeat(Math.max(0, w - 2))}╯`)}`);
+    return rows;
+  };
+
+  return {
+    render(width = MAX_WIDTH) {
+      if (cachedRows && cachedWidth === width) return cachedRows;
+      cachedWidth = width;
+      cachedRows = buildRows(width);
+      return cachedRows;
+    },
+    describe() {
+      cachedNode ??= buildNode();
+      return cachedNode;
+    },
+    handleNativeEvent(event) {
+      if (event?.type === "toggle" && typeof event.collapsed === "boolean") {
+        isCollapsed = event.collapsed;
+        cachedRows = null;
+        cachedNode = null;
+      }
+    },
+    invalidate() {
+      cachedWidth = -1;
+      cachedRows = null;
+      cachedNode = null;
+    },
+    dispose() {},
+  };
+}
+
 /**
  * Activity is a pure panel model: header state plus newest-first event history.
  * `lines()` reads stored state only, so identical state gives identical output.
@@ -70,6 +318,7 @@ export function createActivity({ maxEvents = SHOW_EVENTS, clock = () => new Date
   const state = { connection: "connecting" };
   const events = [];
   const shown = Math.max(0, Math.min(Number(maxEvents) || 0, MAX_LINES - 1));
+  let collapsed = false;
   const api = {
     note(kind, text) {
       const next = noteText(text);
@@ -90,6 +339,51 @@ export function createActivity({ maxEvents = SHOW_EVENTS, clock = () => new Date
     lines() {
       return [headerLine(state), ...events.slice(0, shown).map(eventLine)].slice(0, MAX_LINES);
     },
+    ansiLines(theme, width = MAX_WIDTH) {
+      const padX = width >= 4 ? " " : "";
+      const innerWidth = Math.max(24, Math.min(MAX_WIDTH, width - padX.length * 2));
+      if (collapsed) {
+        return [`${padX}${styledHeaderLine(state, theme, innerWidth)}`];
+      }
+      return [
+        `${padX}${styledHeaderLine(state, theme, innerWidth)}`,
+        ...events.slice(0, shown).map((ev) => `${padX}${styledEventLine(ev, theme, innerWidth)}`),
+      ].slice(0, MAX_LINES);
+    },
+    describe() {
+      return describeActivityNode(state, events, shown, collapsed);
+    },
+    component(theme, tui = null) {
+      let cachedWidth = -1;
+      let cachedRows = null;
+      let cachedNode = null;
+      return {
+        render(width = MAX_WIDTH) {
+          if (cachedRows && cachedWidth === width) return cachedRows;
+          cachedWidth = width;
+          cachedRows = api.ansiLines(theme, width);
+          return cachedRows;
+        },
+        describe() {
+          cachedNode ??= api.describe();
+          return cachedNode;
+        },
+        handleNativeEvent(event) {
+          if (event?.type === "toggle" && typeof event.collapsed === "boolean") {
+            collapsed = event.collapsed;
+            cachedRows = null;
+            cachedNode = null;
+            tui?.requestRender?.();
+          }
+        },
+        invalidate() {
+          cachedWidth = -1;
+          cachedRows = null;
+          cachedNode = null;
+        },
+        dispose() {},
+      };
+    },
     events,
   };
   return api;

package/src/activity.test.mjs

@@ -1,7 +1,7 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
 
-import { createActivity, MAX_LINES, MAX_TEXT, MAX_WIDTH, SHOW_EVENTS } from "./activity.mjs";
+import { createActivity, createAssignMessageComponent, MAX_LINES, MAX_TEXT, MAX_WIDTH, SHOW_EVENTS } from "./activity.mjs";
 
 const clock = () => new Date("2026-09-13T09:08:07");
 
@@ -61,3 +61,71 @@ test("default render shows the newest SHOW_EVENTS events", () => {
   assert.match(lines[1], /event 9$/);
   assert.match(lines.at(-1), new RegExp(`event ${SHOW_EVENTS + 4 - SHOW_EVENTS}$`));
 });
+
+test("describe() produces a Tern TSP card node and component() supports toggle", () => {
+  const activity = createActivity({ clock }).set({
+    role: "dpdp",
+    connection: "connected",
+    generation: 1,
+    taskId: "abcdef012345",
+    phase: "running",
+  });
+  activity.note("state", "connected role=dpdp gen=1 host=probe,recycle");
+  activity.note("warn", "heartbeat refused").note("warn", "heartbeat refused");
+
+  const node = activity.describe();
+  assert.equal(node.k, "card");
+  assert.equal(node.p.role, "omp.widget.onlyne");
+  assert.equal(node.p.variant, "bare");
+  assert.equal(node.p.status, "done");
+  assert.equal(node.p.collapsible, true);
+  assert.equal(node.p.collapsed, false);
+  assert.equal(node.c.length, 2);
+  assert.equal(node.c[0].k, "text");
+  assert.equal(node.c[0].p.role, "onlyne.event.warn");
+  assert.ok(node.c[0].p.spans.some((s) => s.t === " ×2"));
+
+  const theme = {
+    fg: (color, text) => `<${color}>${text}</${color}>`,
+    bold: (text) => `<b>${text}</b>`,
+  };
+  let rendered = 0;
+  const comp = activity.component(theme, { requestRender: () => { rendered += 1; } });
+  const rows = comp.render(80);
+  assert.equal(rows.length, 3);
+  assert.ok(rows[0].startsWith(" <b><accent>onlyne</accent></b> <b>dpdp</b>"));
+  assert.equal(comp.render(80), rows, "same width returns cached rows reference");
+
+  comp.handleNativeEvent({ type: "toggle", collapsed: true });
+  assert.equal(rendered, 1);
+  assert.equal(comp.describe().p.collapsed, true);
+  assert.equal(comp.render(80).length, 1);
+});
+
+test("createAssignMessageComponent renders ANSI box and TSP card for onlyne_assign", () => {
+  const theme = {
+    fg: (color, text) => `<${color}>${text}</${color}>`,
+    bold: (text) => `<b>${text}</b>`,
+  };
+  const comp = createAssignMessageComponent(
+    {
+      role: "caerulea",
+      taskId: "97971b93-1111-2222-3333-444444444444",
+      kind: "note",
+      from: "role:_supervisor",
+      bodyText: "hello caerulea",
+    },
+    "From _supervisor:\n\nhello caerulea",
+    theme,
+    false,
+  );
+  const rows = comp.render(72);
+  assert.ok(rows[0].includes("From role:_supervisor · note · 97971b93"));
+  assert.ok(rows.some((r) => r.includes("hello caerulea")));
+
+  const node = comp.describe();
+  assert.equal(node.k, "card");
+  assert.equal(node.p.role, "omp.custom.onlyne.note");
+  assert.equal(node.c[0].k, "md");
+  assert.equal(node.c[0].p.text, "hello caerulea");
+});