@cueloop/client 0.1.0-alpha.78 → 0.1.0-alpha.79

package/src/markdown-grid.ts

@@ -0,0 +1,203 @@
+/**
+ * Grid layout for the two block kinds the read-only thread renders as tables:
+ * a GFM table (bold header over a rule, columns aligned per the delimiter row,
+ * no vertical borders) and leading YAML
+ * frontmatter (a full-bordered key/value grid, bold nowrap keys, wrapped
+ * values). Both are pure: they turn a block's source text and a width into
+ * positioned, styled segments the renderer prints verbatim, so a char-frame
+ * test can assert the exact grid.
+ */
+
+import { wrapLines } from "./mark-runs";
+
+/** One painted piece of a grid line: its text plus whether it reads bold or dim (a border). */
+export interface GridSegment {
+  text: string;
+  bold: boolean;
+  dim: boolean;
+}
+
+/** A grid line is left-to-right segments; concatenating their text gives the row. */
+export type GridLine = GridSegment[];
+
+export type ColumnAlign = "left" | "right" | "center";
+
+export interface MarkdownTable {
+  aligns: ColumnAlign[];
+  header: string[];
+  rows: string[][];
+}
+
+/**
+ * Split a table row into trimmed cells on unescaped pipes, unescaping `\|` into a
+ * literal pipe, and dropping the empty cells an optional leading or trailing
+ * border pipe produces (an intentional blank cell keeps its surrounding spaces).
+ */
+function splitTableRow(line: string): string[] {
+  const trimmed = line.trim();
+  const parts: string[] = [];
+  let cell = "";
+
+  for (let index = 0; index < trimmed.length; index++) {
+    const char = trimmed[index]!;
+
+    if (char === "\\" && trimmed[index + 1] === "|") {
+      cell += "|";
+      index++;
+    } else if (char === "|") {
+      parts.push(cell);
+      cell = "";
+    } else {
+      cell += char;
+    }
+  }
+  parts.push(cell);
+  if (parts.length > 1 && parts[0] === "") parts.shift();
+  if (parts.length > 1 && parts[parts.length - 1] === "") parts.pop();
+
+  return parts.map((part) => part.trim());
+}
+
+/** Parse a GFM table block's verbatim source into header cells, column alignments, and body rows. */
+export function parseMarkdownTable(text: string): MarkdownTable {
+  const lines = text.split("\n").filter((line) => line.trim() !== "");
+  const header = splitTableRow(lines[0] ?? "");
+  const aligns: ColumnAlign[] = splitTableRow(lines[1] ?? "").map((cell) => {
+    const left = cell.startsWith(":");
+    const right = cell.endsWith(":");
+
+    return left && right ? "center" : right ? "right" : "left";
+  });
+  const rows = lines.slice(2).map(splitTableRow);
+
+  return { aligns, header, rows };
+}
+
+/** Pad `text` to `width` cells under an alignment. */
+function pad(text: string, width: number, align: ColumnAlign): string {
+  const slack = Math.max(0, width - text.length);
+
+  if (align === "right") return " ".repeat(slack) + text;
+  if (align === "center") {
+    const left = Math.floor(slack / 2);
+
+    return " ".repeat(left) + text + " ".repeat(slack - left);
+  }
+
+  return text + " ".repeat(slack);
+}
+
+/** Two spaces separate table columns; the read-only render draws no vertical rule. */
+const COLUMN_GAP = "  ";
+
+/**
+ * Lay out a GFM table: a bold header row, a dim rule spanning the table width,
+ * then the body rows, every column padded to its widest cell under its alignment.
+ */
+export function layoutMarkdownTable(table: MarkdownTable): GridLine[] {
+  const columnCount = Math.max(table.header.length, ...table.rows.map((row) => row.length), 1);
+  const alignOf = (column: number): ColumnAlign => table.aligns[column] ?? "left";
+  const cellAt = (cells: string[], column: number): string => cells[column] ?? "";
+  const widths = Array.from({ length: columnCount }, (_unused, column) =>
+    Math.max(
+      cellAt(table.header, column).length,
+      ...table.rows.map((row) => cellAt(row, column).length),
+      1,
+    ),
+  );
+  const rowText = (cells: string[]): string =>
+    widths
+      .map((width, column) => pad(cellAt(cells, column), width, alignOf(column)))
+      .join(COLUMN_GAP);
+  const totalWidth =
+    widths.reduce((sum, width) => sum + width, 0) + COLUMN_GAP.length * (columnCount - 1);
+  const lines: GridLine[] = [
+    [{ text: rowText(table.header), bold: true, dim: false }],
+    [{ text: "─".repeat(totalWidth), bold: false, dim: true }],
+  ];
+
+  for (const row of table.rows) lines.push([{ text: rowText(row), bold: false, dim: false }]);
+
+  return lines;
+}
+
+export interface FrontmatterRow {
+  key: string;
+  value: string;
+}
+
+/** Parse frontmatter YAML into top-level key/value rows; indented lines fold into the row above. */
+export function parseFrontmatterRows(text: string): FrontmatterRow[] {
+  const rows: FrontmatterRow[] = [];
+
+  for (const line of text.split("\n")) {
+    if (line.trim() === "") continue;
+    const match = /^([^:\s][^:]*):\s?(.*)$/.exec(line);
+
+    if (match) {
+      rows.push({ key: match[1]!.trim(), value: match[2]! });
+    } else if (rows.length > 0) {
+      const previous = rows[rows.length - 1]!;
+
+      previous.value = previous.value === "" ? line.trim() : `${previous.value}\n${line.trim()}`;
+    }
+  }
+
+  return rows;
+}
+
+/** The fixed cells a frontmatter grid row spends on borders and padding: `│ key │ value │`. */
+const FRONTMATTER_CHROME = 7;
+
+/** Wrap a cell value into lines no wider than `width`, honouring its own line breaks. */
+function wrapCell(value: string, width: number): string[] {
+  if (value === "") return [""];
+
+  return wrapLines(value, width).map((line) => value.slice(line.start, line.end));
+}
+
+/**
+ * Lay out leading frontmatter as a full-bordered key/value grid: bold nowrap
+ * keys on the left, values wrapped to the remaining width on the right, a rule
+ * between every row.
+ */
+export function layoutFrontmatterGrid(rows: FrontmatterRow[], maxWidth: number): GridLine[] {
+  if (rows.length === 0) return [];
+  const keyWidth = Math.max(3, ...rows.map((row) => row.key.length));
+  // size the value column to its content, capped at the width left after the key column and borders,
+  // so a short frontmatter table stays compact and a long value wraps instead of overflowing
+  const available = Math.max(3, maxWidth - keyWidth - FRONTMATTER_CHROME);
+  const naturalWidth = Math.max(
+    3,
+    ...rows.map((row) => Math.max(0, ...row.value.split("\n").map((line) => line.length))),
+  );
+  const valueWidth = Math.min(naturalWidth, available);
+  const rule = (left: string, mid: string, right: string): GridLine => [
+    {
+      text: left + "─".repeat(keyWidth + 2) + mid + "─".repeat(valueWidth + 2) + right,
+      bold: false,
+      dim: true,
+    },
+  ];
+  const lines: GridLine[] = [rule("┌", "┬", "┐")];
+
+  rows.forEach((row, rowIndex) => {
+    if (rowIndex > 0) lines.push(rule("├", "┼", "┤"));
+    const valueLines = wrapCell(row.value, valueWidth);
+
+    valueLines.forEach((valueLine, valueIndex) => {
+      const keyCell = valueIndex === 0 ? row.key.padEnd(keyWidth) : " ".repeat(keyWidth);
+
+      lines.push([
+        { text: "│ ", bold: false, dim: true },
+        { text: keyCell, bold: valueIndex === 0, dim: false },
+        { text: " │ ", bold: false, dim: true },
+        { text: valueLine.padEnd(valueWidth), bold: false, dim: false },
+        { text: " │", bold: false, dim: true },
+      ]);
+    });
+  });
+  lines.push(rule("└", "┴", "┘"));
+
+  return lines;
+}

package/src/markdown-highlight.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, test } from "bun:test";
+import { markdownHighlightRanges, type MarkdownHighlightGroup } from "./markdown-highlight";
+
+/** The substring a range covers, paired with its group, for readable assertions. */
+function painted(source: string): Array<{ text: string; group: MarkdownHighlightGroup }> {
+  return markdownHighlightRanges(source).map((range) => ({
+    text: source.slice(range.start, range.end),
+    group: range.group,
+  }));
+}
+
+describe("markdownHighlightRanges", () => {
+  test("a heading dims its marker and bolds the text without coloring it", () => {
+    expect(painted("## Rollout Plan")).toEqual([
+      { text: "## ", group: "marker" },
+      { text: "Rollout Plan", group: "heading" },
+    ]);
+  });
+
+  test("a plain link colors its brackets and href but leaves the label plain", () => {
+    const runs = painted("see [docs](https://x.dev)");
+
+    expect(runs).toContainEqual({ text: "[", group: "link" });
+    expect(runs).toContainEqual({ text: "](https://x.dev)", group: "link" });
+    expect(runs.some((run) => run.text.includes("docs"))).toBe(false);
+  });
+
+  test("an @-scope link label colors along with the brackets and href", () => {
+    expect(painted("[@pierre/diffs](https://npm/@pierre/diffs)")).toEqual([
+      { text: "[@pierre/diffs](https://npm/@pierre/diffs)", group: "link" },
+    ]);
+  });
+
+  test("inline code grays the whole backtick span", () => {
+    expect(painted("call `run()` now")).toContainEqual({ text: "`run()`", group: "code" });
+  });
+
+  test("a fenced code block grays the whole block", () => {
+    const source = "```ts\nconst a = 1;\n```";
+
+    expect(painted(source)).toEqual([{ text: source, group: "code" }]);
+  });
+
+  test("inline code inside a list item resolves against the whole source offset", () => {
+    const source = "- run `cueloop dev`";
+    const code = markdownHighlightRanges(source).find((range) => range.group === "code");
+
+    expect(code && source.slice(code.start, code.end)).toBe("`cueloop dev`");
+  });
+
+  test("bold, emphasis, list markers, quotes, and rules stay plain", () => {
+    expect(markdownHighlightRanges("ship **now** or _later_")).toEqual([]);
+    expect(markdownHighlightRanges("- a task")).toEqual([]);
+    expect(markdownHighlightRanges("> quoted line")).toEqual([]);
+    expect(markdownHighlightRanges("---")).toEqual([]);
+  });
+
+  test("plain prose yields no ranges", () => {
+    expect(markdownHighlightRanges("just words here")).toEqual([]);
+  });
+});

package/src/markdown-highlight.ts

@@ -0,0 +1,122 @@
+/**
+ * Scan raw markdown source into highlight ranges for the inline thread editor.
+ * The scheme is deliberately restrained, matching a plain markdown editor: a
+ * heading dims its `#` marker and bolds the title text (no color); links render
+ * in one link color; inline and fenced code gray out. Everything else - bold,
+ * emphasis, list and quote markers, rules - stays plain source. Block structure
+ * reuses the schema parser so a heading or code fence is defined in one place.
+ */
+
+import { parseBlocks, LEADING_BLOCK_MARKER, type Block } from "@cueloop/schema";
+
+/** Every markdown token class the editor paints; "marker" is the dimmed heading punctuation. */
+export const MARKDOWN_HIGHLIGHT_GROUPS = ["heading", "marker", "link", "code"] as const;
+
+/** A markdown token class the editor paints. */
+export type MarkdownHighlightGroup = (typeof MARKDOWN_HIGHLIGHT_GROUPS)[number];
+
+/** A char range in the raw markdown source to paint with one group's style; end is exclusive. */
+export interface MarkdownHighlightRange {
+  start: number;
+  end: number;
+  group: MarkdownHighlightGroup;
+}
+
+/** The absolute source offset where each 0-based line begins. */
+function lineStartOffsets(source: string): number[] {
+  const offsets = [0];
+  for (let index = 0; index < source.length; index++) {
+    if (source[index] === "\n") offsets.push(index + 1);
+  }
+
+  return offsets;
+}
+
+// gray a balanced backtick run and color a [text](href) link; bold and emphasis stay plain source
+const INLINE_TOKEN = /(`+)(?:.+?)\1|\[[^\]]+\]\([^)]+\)/g;
+
+/** Gray inline code and color links found in one text span; other inline markup stays plain. */
+function scanInlineTokens(text: string, base: number, into: MarkdownHighlightRange[]): void {
+  INLINE_TOKEN.lastIndex = 0;
+  let match: RegExpExecArray | null;
+  while ((match = INLINE_TOKEN.exec(text)) !== null) {
+    const token = match[0];
+    const start = base + match.index;
+    const end = start + token.length;
+
+    if (token.startsWith("`")) {
+      into.push({ start, end, group: "code" });
+      continue;
+    }
+    // a link colors its brackets and href; the [] label stays plain unless it is an @-scope, matching how a
+    // markdown source view paints links
+    const closeBracket = token.indexOf("]");
+
+    if (token.slice(1, closeBracket).startsWith("@")) {
+      into.push({ start, end, group: "link" });
+    } else {
+      into.push({ start, end: start + 1, group: "link" });
+      into.push({ start: start + closeBracket, end, group: "link" });
+    }
+  }
+}
+
+function isHeadingKind(kind: Block["kind"]): boolean {
+  return kind === "h1" || kind === "h2" || kind === "h3";
+}
+
+/** Dim a heading's `#` marker and bold the rest of the line (no color). */
+function scanHeadingBlock(
+  firstLineStart: number,
+  source: string,
+  lineStarts: number[],
+  block: Block,
+  into: MarkdownHighlightRange[],
+): void {
+  const lineText = source.slice(firstLineStart, lineStarts[block.lineStart + 1] ?? source.length);
+  const marker = lineText.match(LEADING_BLOCK_MARKER)?.[0] ?? "";
+
+  into.push({ start: firstLineStart, end: firstLineStart + marker.length, group: "marker" });
+  into.push({
+    start: firstLineStart + marker.length,
+    end: firstLineStart + lineText.trimEnd().length,
+    group: "heading",
+  });
+}
+
+/** Paint one block: heading marker and title, grayed code block, or inline code and links in prose. */
+function scanBlock(
+  block: Block,
+  source: string,
+  lineStarts: number[],
+  into: MarkdownHighlightRange[],
+): void {
+  const firstLineStart = lineStarts[block.lineStart] ?? 0;
+
+  if (isHeadingKind(block.kind)) {
+    scanHeadingBlock(firstLineStart, source, lineStarts, block, into);
+  } else if (block.kind === "code") {
+    into.push({
+      start: firstLineStart,
+      end: lineStarts[block.lineEnd + 1] ?? source.length,
+      group: "code",
+    });
+  } else if (block.kind !== "hr") {
+    for (let line = block.lineStart; line <= block.lineEnd; line++) {
+      const lineStart = lineStarts[line] ?? source.length;
+      const lineText = source.slice(lineStart, lineStarts[line + 1] ?? source.length);
+
+      scanInlineTokens(lineText.replace(/\r?\n$/, ""), lineStart, into);
+    }
+  }
+}
+
+/** Scan raw markdown source into highlight ranges over the source (markers included), for the inline editor. */
+export function markdownHighlightRanges(source: string): MarkdownHighlightRange[] {
+  const lineStarts = lineStartOffsets(source);
+  const ranges: MarkdownHighlightRange[] = [];
+
+  for (const block of parseBlocks(source)) scanBlock(block, source, lineStarts, ranges);
+
+  return ranges;
+}

package/src/prototype-browser.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test";
-import { cssBoxToCell, imageCellToCss } from "./prototype-browser";
+import { closePrototypeBrowser, cssBoxToCell, imageCellToCss } from "./prototype-browser";
 
 const IMAGE = { x: 1, y: 1, width: 80, height: 40 };
 const VIEWPORT = { width: 1280, height: 720 };
@@ -54,3 +54,11 @@ describe("cssBoxToCell", () => {
     expect(cell.rows).toBe(1);
   });
 });
+
+describe("closePrototypeBrowser", () => {
+  test("is a safe no-op when no prototype browser was ever launched", async () => {
+    // the shutdown path calls this on every quit; with no warm Chromium it must not throw or load puppeteer
+    await expect(closePrototypeBrowser()).resolves.toBeUndefined();
+    await expect(closePrototypeBrowser()).resolves.toBeUndefined();
+  });
+});

package/src/prototype-browser.ts

@@ -135,6 +135,28 @@ async function warmBrowser(executablePath: string | undefined): Promise<Puppetee
   return browser;
 }
 
+/**
+ * Close the warm Chromium so it never orphans when cueloop exits. Called from
+ * the shutdown path (the normal quit is not a signal, so puppeteer's own signal
+ * handlers do not fire). Idempotent.
+ */
+export async function closePrototypeBrowser(): Promise<void> {
+  const pending = sharedBrowser;
+
+  sharedBrowser = null;
+  if (!pending) return;
+  const browser = await pending.catch(() => null);
+
+  await browser?.close().catch(() => undefined);
+}
+
+/** Test-only: the warm browser's OS process id, or null when none is running. */
+export async function prototypeBrowserPidForTest(): Promise<number | null> {
+  const browser = sharedBrowser ? await sharedBrowser.catch(() => null) : null;
+
+  return browser?.process()?.pid ?? null;
+}
+
 export async function launchPrototypeRenderer(options: LaunchOptions): Promise<PrototypeRenderer> {
   const { pathToFileURL } = await import("node:url");
   const browser = await warmBrowser(options.executablePath);

package/src/run.ts

@@ -4,6 +4,7 @@ import React from "react";
 import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
 import { App } from "./App";
+import { closePrototypeBrowser } from "./prototype-browser";
 import type { Appearance } from "./theme-presets";
 import { loadConfig } from "./config";
 import { perfMark } from "./perf/perf-timings";
@@ -41,20 +42,21 @@ export async function runClient(options: RunClientOptions): Promise<number> {
   });
   return new Promise<number>((resolve) => {
     let exited = false;
-    const shutdown = (code: number): void => {
+    const shutdown = async (code: number): Promise<void> => {
       if (exited) return;
       exited = true;
       renderer.destroy();
+      // close the warm prototype Chromium before exit so it never orphans; the
+      // await also gives the renderer time to flush its terminal-restore bytes
+      await closePrototypeBrowser();
       resolve(code);
-      // one microtask between destroy and exit lets the renderer flush
-      // its terminal-restore sequences before the process dies
-      queueMicrotask(() => process.exit(code));
+      process.exit(code);
     };
 
     // a closed pane/terminal hangs up (or the parent kills us); exit instead of
     // lingering as an orphan whose pty read loop keeps burning CPU
-    process.once("SIGHUP", () => shutdown(0));
-    process.once("SIGTERM", () => shutdown(0));
+    process.once("SIGHUP", () => void shutdown(0));
+    process.once("SIGTERM", () => void shutdown(0));
 
     const root = createRoot(renderer);
     const renderApp = (appearance: Appearance): void => {

package/src/share.ts

@@ -41,6 +41,11 @@ export function shareIdFromLine(line: string): string | undefined {
   return line.match(/^ssh (\S+)@/)?.[1];
 }
 
+/** The paste line for a share id: `ssh p_…@host`. Used to copy an existing link. */
+export function formatShareLine(shareId: string, target: ShareTarget = {}): string {
+  return `ssh ${shareId}@${target.host ?? DEFAULT_SHARE_HOST}`;
+}
+
 /** Upload the session to the gateway and copy the resulting ssh line. */
 export async function publishShare(
   session: Thread,
@@ -108,7 +113,8 @@ export function mergeFromShare(remote: Thread): SharedMerge {
 export async function pushShare(
   shareId: string,
   annotations: Array<Omit<Annotation, "createdAt">>,
-  access?: ShareAccess,
+  // ShareAccess sets a private allowlist; "public" clears it (makes the link public); undefined leaves it
+  access?: ShareAccess | "public",
   target: ShareTarget = {},
 ): Promise<void> {
   const payload = access ? { shareId, annotations, access } : { shareId, annotations };
@@ -121,6 +127,14 @@ export async function pushShare(
   if (code !== 0) throw new Error(`gateway push failed: ${stderr.trim() || `ssh exited ${code}`}`);
 }
 
+/** Revoke a share: the gateway deletes the blob so its link stops resolving. Owner-gated; idempotent. */
+export async function revokeShare(shareId: string, target: ShareTarget = {}): Promise<void> {
+  const { stderr, code } = await runShareSsh("cueloop-revoke", Buffer.from(shareId), target);
+
+  if (code !== 0)
+    throw new Error(`gateway revoke failed: ${stderr.trim() || `ssh exited ${code}`}`);
+}
+
 export interface ShareWatchHandlers {
   /** The whole session record, each time the share changes. */
   onSession: (session: Thread) => void;

package/src/test-support.ts

@@ -157,6 +157,20 @@ export async function pressKey(
   await settle(setup);
 }
 
+/**
+ * Run a thread nav-mode command: esc drops the surface into nav mode, then a bare
+ * key acts (a letter, or a named key like "enter"/"backspace"). The caret and any
+ * held selection carry into nav, so the command lands where the caret is.
+ */
+export async function navCommand(setup: TestRendererSetup, key: string): Promise<void> {
+  await press(setup, "escape");
+  await new Promise((resolve) => setTimeout(resolve, 40));
+  await settle(setup);
+  // a single letter is a discrete keypress (nav command); named keys route through press
+  if (key.length === 1) await pressKey(setup, key);
+  else await press(setup, key);
+}
+
 /** A 0-based cell position within a captured char frame. */
 export interface FrameLocation {
   row: number;