@diegopetrucci/pi-annotate-last-message 0.1.9 → 0.1.11

package/session.ts

@@ -1,112 +1,117 @@
 import type { SessionEntry, SessionMessageEntry } from "@earendil-works/pi-coding-agent";
 
-import type { LastAssistantMessageData, LastAssistantMessageLookupResult, LastAssistantMessageSection } from "./types.js";
+import type {
+  LastAssistantMessageData,
+  LastAssistantMessageLookupResult,
+  LastAssistantMessageSection,
+} from "./types.js";
 
 const SECTION_PREVIEW_LIMIT = 96;
 
 function truncatePreview(value: string, limit = SECTION_PREVIEW_LIMIT): string {
-	const normalized = value.replace(/\s+/g, " ").trim();
-	if (normalized.length <= limit) return normalized;
-	return `${normalized.slice(0, Math.max(0, limit - 1)).trimEnd()}…`;
+  const normalized = value.replace(/\s+/g, " ").trim();
+  if (normalized.length <= limit) return normalized;
+  return `${normalized.slice(0, Math.max(0, limit - 1)).trimEnd()}…`;
 }
 
 function assistantMessageText(
-	messageEntry: SessionMessageEntry,
+  messageEntry: SessionMessageEntry,
 ): { kind: "assistant"; text: string } | { kind: "incomplete"; stopReason: string } | null {
-	const { message } = messageEntry;
-	if (!("role" in message) || message.role !== "assistant") {
-		return null;
-	}
-	if (message.stopReason !== "stop") {
-		return { kind: "incomplete", stopReason: String(message.stopReason) };
-	}
-	if (!Array.isArray(message.content)) {
-		return { kind: "assistant", text: "" };
-	}
-	return {
-		kind: "assistant",
-		text: message.content
-			.filter((part): part is { type: "text"; text: string } => part.type === "text" && typeof part.text === "string")
-			.map((part) => part.text)
-			.join("\n")
-			.replace(/\r\n?/g, "\n"),
-	};
+  const { message } = messageEntry;
+  if (!("role" in message) || message.role !== "assistant") {
+    return null;
+  }
+  if (message.stopReason !== "stop") {
+    return { kind: "incomplete", stopReason: String(message.stopReason) };
+  }
+  if (!Array.isArray(message.content)) {
+    return { kind: "assistant", text: "" };
+  }
+  return {
+    kind: "assistant",
+    text: message.content
+      .filter(
+        (part): part is { type: "text"; text: string } =>
+          part.type === "text" && typeof part.text === "string",
+      )
+      .map((part) => part.text)
+      .join("\n")
+      .replace(/\r\n?/g, "\n"),
+  };
 }
 
 function buildSections(lines: string[]): LastAssistantMessageSection[] {
-	const sections: LastAssistantMessageSection[] = [];
-	let startIndex: number | null = null;
+  const sections: LastAssistantMessageSection[] = [];
+  let startIndex: number | null = null;
 
-	const flushSection = (endIndex: number): void => {
-		if (startIndex == null) return;
-		const sectionLines = lines.slice(startIndex, endIndex + 1);
-		const previewSource = sectionLines.find((line) => line.trim().length > 0) ?? "";
-		sections.push({
-			id: `section-${sections.length + 1}`,
-			index: sections.length + 1,
-			startLine: startIndex + 1,
-			endLine: endIndex + 1,
-			preview: truncatePreview(previewSource),
-			text: sectionLines.join("\n"),
-		});
-		startIndex = null;
-	};
+  const flushSection = (endIndex: number): void => {
+    if (startIndex == null) return;
+    const sectionLines = lines.slice(startIndex, endIndex + 1);
+    const previewSource = sectionLines.find((line) => line.trim().length > 0) ?? "";
+    sections.push({
+      id: `section-${sections.length + 1}`,
+      index: sections.length + 1,
+      startLine: startIndex + 1,
+      endLine: endIndex + 1,
+      preview: truncatePreview(previewSource),
+    });
+    startIndex = null;
+  };
 
-	for (let index = 0; index < lines.length; index += 1) {
-		const line = lines[index];
-		if (line.trim().length === 0) {
-			flushSection(index - 1);
-			continue;
-		}
-		if (startIndex == null) {
-			startIndex = index;
-		}
-	}
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    if (line.trim().length === 0) {
+      flushSection(index - 1);
+      continue;
+    }
+    if (startIndex == null) {
+      startIndex = index;
+    }
+  }
 
-	flushSection(lines.length - 1);
-	return sections;
+  flushSection(lines.length - 1);
+  return sections;
 }
 
 export function findLastAssistantMessage(branch: SessionEntry[]): LastAssistantMessageLookupResult {
-	for (let index = branch.length - 1; index >= 0; index -= 1) {
-		const entry = branch[index];
-		if (entry.type !== "message") {
-			continue;
-		}
-		const extracted = assistantMessageText(entry);
-		if (extracted == null) {
-			continue;
-		}
-		if (extracted.kind === "incomplete") {
-			return {
-				ok: false,
-				code: "incomplete",
-				message: `Latest assistant message is incomplete (${extracted.stopReason}). Wait for it to finish, then try again.`,
-			};
-		}
+  for (let index = branch.length - 1; index >= 0; index -= 1) {
+    const entry = branch[index];
+    if (entry.type !== "message") {
+      continue;
+    }
+    const extracted = assistantMessageText(entry);
+    if (extracted == null) {
+      continue;
+    }
+    if (extracted.kind === "incomplete") {
+      return {
+        ok: false,
+        code: "incomplete",
+        message: `Latest assistant message is incomplete (${extracted.stopReason}). Wait for it to finish, then try again.`,
+      };
+    }
 
-		const text = extracted.text;
-		const trimmed = text.trim();
-		if (trimmed.length === 0) {
-			return {
-				ok: false,
-				code: "empty",
-				message: "Latest assistant message has no text to annotate.",
-			};
-		}
+    const text = extracted.text;
+    const trimmed = text.trim();
+    if (trimmed.length === 0) {
+      return {
+        ok: false,
+        code: "empty",
+        message: "Latest assistant message has no text to annotate.",
+      };
+    }
 
-		const lines = text.split("\n");
-		const data: LastAssistantMessageData = {
-			text,
-			lines: lines.map((line, lineIndex) => ({ number: lineIndex + 1, text: line })),
-			sections: buildSections(lines),
-		};
-		return { ok: true, data };
-	}
+    const lines = text.split("\n");
+    const data: LastAssistantMessageData = {
+      lines: lines.map((line, lineIndex) => ({ number: lineIndex + 1, text: line })),
+      sections: buildSections(lines),
+    };
+    return { ok: true, data };
+  }
 
-	return {
-		ok: false,
-		code: "missing",
-		message: "No assistant messages found on the current session branch.",
-	};
+  return {
+    ok: false,
+    code: "missing",
+    message: "No assistant messages found on the current session branch.",
+  };
 }

package/theme.ts

@@ -0,0 +1,253 @@
+import type { Theme, ThemeBg, ThemeColor } from "@earendil-works/pi-coding-agent";
+
+/**
+ * The small public part of Pi's active theme used by the native annotation UI.
+ * The command passes ctx.ui.theme directly; no Pi theme singleton is imported.
+ */
+export type AnnotateTheme = Pick<Theme, "appearance" | "colors" | "fg" | "bg">;
+
+const DARK_FALLBACK: Readonly<Record<string, string>> = {
+  "--color-scheme": "dark",
+  "--bg": "#0d1117",
+  "--panel": "#151b23",
+  "--panel-hover": "#1f242c",
+  "--inset": "#0b1118",
+  "--border": "#30363d",
+  "--border-muted": "#21262d",
+  "--text": "#f0f6fc",
+  "--muted": "#8a8a8a",
+  "--dim": "#585858",
+  "--accent": "#f4c95d",
+  "--success": "#7ee787",
+  "--error": "#ffb3b3",
+  "--warning": "#f4c95d",
+  "--mdHeading": "#f4c95d",
+  "--mdLink": "#7dd3fc",
+  "--mdLinkUrl": "#8a8a8a",
+  "--mdCode": "#9b7bff",
+  "--mdCodeBlock": "inherit",
+  "--mdCodeBlockBorder": "#6f42c1",
+  "--mdQuote": "#8a8a8a",
+  "--mdQuoteBorder": "#6f42c1",
+  "--mdHr": "#585858",
+  "--mdListBullet": "#f4c95d",
+  "--mdBold": "inherit",
+  "--mdItalic": "inherit",
+};
+
+const LIGHT_FALLBACK: Readonly<Record<string, string>> = {
+  "--color-scheme": "light",
+  "--bg": "#f6f8fa",
+  "--panel": "#ffffff",
+  "--panel-hover": "#f3f4f6",
+  "--inset": "#f6f8fa",
+  "--border": "#d0d7de",
+  "--border-muted": "#afb8c1",
+  "--text": "#1f2328",
+  "--muted": "#57606a",
+  "--dim": "#6e7781",
+  "--accent": "#8250df",
+  "--success": "#1a7f37",
+  "--error": "#cf222e",
+  "--warning": "#9a6700",
+  "--mdHeading": "#9a6700",
+  "--mdLink": "#0969da",
+  "--mdLinkUrl": "#57606a",
+  "--mdCode": "#8250df",
+  "--mdCodeBlock": "#1a7f37",
+  "--mdCodeBlockBorder": "#6e7781",
+  "--mdQuote": "#57606a",
+  "--mdQuoteBorder": "#6e7781",
+  "--mdHr": "#8c959f",
+  "--mdListBullet": "#8250df",
+  "--mdBold": "inherit",
+  "--mdItalic": "inherit",
+};
+
+const BASIC_ANSI_COLORS: Readonly<Record<number, string>> = {
+  0: "#000000",
+  1: "#800000",
+  2: "#008000",
+  3: "#808000",
+  4: "#000080",
+  5: "#800080",
+  6: "#008080",
+  7: "#c0c0c0",
+  8: "#808080",
+  9: "#ff0000",
+  10: "#00ff00",
+  11: "#ffff00",
+  12: "#0000ff",
+  13: "#ff00ff",
+  14: "#00ffff",
+  15: "#ffffff",
+};
+
+const CUBE_LEVELS = [0, 95, 135, 175, 215, 255] as const;
+const SENTINEL = "X";
+
+const FOREGROUND_THEME_VARS: ReadonlyArray<{ token: ThemeColor; cssVar: string }> = [
+  { token: "text", cssVar: "--text" },
+  { token: "muted", cssVar: "--muted" },
+  { token: "dim", cssVar: "--dim" },
+  { token: "accent", cssVar: "--accent" },
+  { token: "success", cssVar: "--success" },
+  { token: "error", cssVar: "--error" },
+  { token: "warning", cssVar: "--warning" },
+  { token: "mdHeading", cssVar: "--mdHeading" },
+  { token: "mdLink", cssVar: "--mdLink" },
+  { token: "mdLinkUrl", cssVar: "--mdLinkUrl" },
+  { token: "mdCode", cssVar: "--mdCode" },
+  { token: "mdCodeBlock", cssVar: "--mdCodeBlock" },
+  { token: "mdCodeBlockBorder", cssVar: "--mdCodeBlockBorder" },
+  { token: "mdQuote", cssVar: "--mdQuote" },
+  { token: "mdQuoteBorder", cssVar: "--mdQuoteBorder" },
+  { token: "mdHr", cssVar: "--mdHr" },
+  { token: "mdListBullet", cssVar: "--mdListBullet" },
+  { token: "border", cssVar: "--border" },
+  { token: "borderMuted", cssVar: "--border-muted" },
+];
+
+const BACKGROUND_THEME_VARS: ReadonlyArray<{ token: ThemeBg; cssVar: string }> = [
+  { token: "customMessageBg", cssVar: "--panel" },
+  { token: "selectedBg", cssVar: "--panel-hover" },
+  { token: "toolPendingBg", cssVar: "--inset" },
+];
+
+function toHex(value: number): string {
+  const clamped = Math.min(255, Math.max(0, Math.round(value)));
+  return clamped.toString(16).padStart(2, "0");
+}
+
+function xterm256ToHex(index: number): string | null {
+  if (!Number.isInteger(index) || index < 0 || index > 255) return null;
+  if (index < 16) return BASIC_ANSI_COLORS[index] ?? null;
+  if (index >= 232) {
+    const value = 8 + (index - 232) * 10;
+    const hex = toHex(value);
+    return `#${hex}${hex}${hex}`;
+  }
+  const cubeIndex = index - 16;
+  const blue = cubeIndex % 6;
+  const green = Math.floor(cubeIndex / 6) % 6;
+  const red = Math.floor(cubeIndex / 36) % 6;
+  return `#${toHex(CUBE_LEVELS[red])}${toHex(CUBE_LEVELS[green])}${toHex(CUBE_LEVELS[blue])}`;
+}
+
+function colorValueToHex(value: unknown): string | null {
+  if (typeof value !== "object" || value == null) return null;
+  const color = value as { kind?: unknown; r?: unknown; g?: unknown; b?: unknown; index?: unknown };
+  if (color.kind === "rgb") {
+    const channels = [color.r, color.g, color.b];
+    if (
+      !channels.every(
+        (channel) =>
+          typeof channel === "number" && Number.isFinite(channel) && channel >= 0 && channel <= 255,
+      )
+    ) {
+      return null;
+    }
+    return `#${toHex(color.r as number)}${toHex(color.g as number)}${toHex(color.b as number)}`;
+  }
+  if (color.kind === "indexed" && typeof color.index === "number") {
+    return xterm256ToHex(color.index);
+  }
+  // OKLCH values are intentionally handled through theme.fg/theme.bg below.
+  // Those public helpers account for Pi's configured terminal color mode.
+  return null;
+}
+
+function ansiColorToHex(value: unknown, background: boolean): string | null {
+  if (typeof value !== "string") return null;
+  const match = new RegExp(`^\\u001b\\[([0-9;]+)m`).exec(value);
+  if (!match) return null;
+  const params = match[1].split(";").map(Number);
+  const [mode, kind, first, second, third] = params;
+  const expectedMode = background ? 48 : 38;
+  if (mode !== expectedMode) {
+    if (!background && ((mode >= 30 && mode <= 37) || (mode >= 90 && mode <= 97))) {
+      return xterm256ToHex(mode >= 90 ? mode - 82 : mode - 30);
+    }
+    if (background && ((mode >= 40 && mode <= 47) || (mode >= 100 && mode <= 107))) {
+      return xterm256ToHex(mode >= 100 ? mode - 92 : mode - 40);
+    }
+    return null;
+  }
+  if (kind === 2 && params.length >= 5) {
+    const channels = [first, second, third];
+    if (!channels.every((channel) => Number.isInteger(channel) && channel >= 0 && channel <= 255))
+      return null;
+    return `#${toHex(first)}${toHex(second)}${toHex(third)}`;
+  }
+  if (kind === 5 && params.length >= 3) return xterm256ToHex(first);
+  return null;
+}
+
+function readThemeColor(
+  theme: AnnotateTheme,
+  token: ThemeColor | ThemeBg,
+  background: boolean,
+): string | null {
+  let colors: Readonly<Record<string, unknown>> | undefined;
+  try {
+    colors = theme.colors as Readonly<Record<string, unknown>>;
+  } catch {
+    colors = undefined;
+  }
+
+  let colorValue: unknown;
+  try {
+    colorValue = colors?.[token];
+  } catch {
+    colorValue = undefined;
+  }
+  const fromColors = colorValueToHex(colorValue);
+  if (fromColors != null) return fromColors;
+
+  try {
+    const styled = background
+      ? theme.bg(token as ThemeBg, SENTINEL)
+      : theme.fg(token as ThemeColor, SENTINEL);
+    return ansiColorToHex(styled, background);
+  } catch {
+    return null;
+  }
+}
+
+function readAppearance(theme: AnnotateTheme | null | undefined): "dark" | "light" {
+  try {
+    return theme?.appearance === "light" ? "light" : "dark";
+  } catch {
+    return "dark";
+  }
+}
+
+/**
+ * Build safe CSS custom properties from the active Pi theme.
+ *
+ * Every value is either a local fallback or a validated hex color. Theme
+ * getters are isolated per token so one broken custom theme cannot make the
+ * native annotation window unreadable or prevent it from opening.
+ */
+export function getThemeCssVars(theme?: AnnotateTheme | null): Record<string, string> {
+  const vars: Record<string, string> = {
+    ...(readAppearance(theme) === "light" ? LIGHT_FALLBACK : DARK_FALLBACK),
+  };
+  if (theme == null) return vars;
+
+  for (const { token, cssVar } of FOREGROUND_THEME_VARS) {
+    const color = readThemeColor(theme, token, false);
+    if (color != null) vars[cssVar] = color;
+  }
+  for (const { token, cssVar } of BACKGROUND_THEME_VARS) {
+    const color = readThemeColor(theme, token, true);
+    if (color != null) vars[cssVar] = color;
+  }
+  return vars;
+}
+
+export const __testing = {
+  ansiColorToHex,
+  colorValueToHex,
+  xterm256ToHex,
+};

package/types.ts

@@ -1,46 +1,46 @@
 export interface LastAssistantMessageLine {
-	number: number;
-	text: string;
+  number: number;
+  text: string;
 }
 
 export interface LastAssistantMessageSection {
-	id: string;
-	index: number;
-	startLine: number;
-	endLine: number;
-	preview: string;
-	text: string;
+  id: string;
+  index: number;
+  startLine: number;
+  endLine: number;
+  preview: string;
 }
 
 export interface LastAssistantMessageData {
-	text: string;
-	lines: LastAssistantMessageLine[];
-	sections: LastAssistantMessageSection[];
+  lines: LastAssistantMessageLine[];
+  sections: LastAssistantMessageSection[];
 }
 
 export type LastAssistantMessageLookupResult =
-	| { ok: true; data: LastAssistantMessageData }
-	| { ok: false; code: "missing" | "incomplete" | "empty"; message: string };
+  | { ok: true; data: LastAssistantMessageData }
+  | { ok: false; code: "missing" | "incomplete" | "empty"; message: string };
 
 export interface AnnotateLastMessageInlineComment {
-	line: number;
-	body: string;
+  line: number;
+  body: string;
 }
 
 export interface AnnotateLastMessageSectionComment {
-	sectionId: string;
-	body: string;
+  sectionId: string;
+  body: string;
 }
 
 export interface AnnotateLastMessageSubmitPayload {
-	type: "submit";
-	overallComment: string;
-	inlineComments: AnnotateLastMessageInlineComment[];
-	sectionComments: AnnotateLastMessageSectionComment[];
+  type: "submit";
+  overallComment: string;
+  inlineComments: AnnotateLastMessageInlineComment[];
+  sectionComments: AnnotateLastMessageSectionComment[];
 }
 
 export interface AnnotateLastMessageCancelPayload {
-	type: "cancel";
+  type: "cancel";
 }
 
-export type AnnotateLastMessageWindowMessage = AnnotateLastMessageSubmitPayload | AnnotateLastMessageCancelPayload;
+export type AnnotateLastMessageWindowMessage =
+  | AnnotateLastMessageSubmitPayload
+  | AnnotateLastMessageCancelPayload;

package/ui.ts

@@ -2,22 +2,50 @@ import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
+import type { AnnotateTheme } from "./theme.js";
+import { getThemeCssVars } from "./theme.js";
 import type { LastAssistantMessageData } from "./types.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const webDir = join(__dirname, "web");
 
 function escapeForInlineScript(value: string): string {
-	return value.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
+  return value.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
 
 function escapeInlineScriptSource(value: string): string {
-	return value.replace(/<\/(script)/gi, "<\\/$1");
+  return value.replace(/<\/(script)/gi, "<\\/$1");
 }
 
-export function buildAnnotateLastMessageHtml(data: LastAssistantMessageData): string {
-	const templateHtml = readFileSync(join(webDir, "index.html"), "utf8");
-	const appJs = escapeInlineScriptSource(readFileSync(join(webDir, "app.js"), "utf8"));
-	const payload = escapeForInlineScript(JSON.stringify(data));
-	return templateHtml.replace('"__INLINE_DATA__"', payload).replace("__INLINE_JS__", appJs);
+function buildThemeCssBlock(vars: Record<string, string>): string {
+  const declarations = Object.entries(vars)
+    .map(([key, value]) => `  ${key}: ${value};`)
+    .join("\n");
+  return `:root {\n${declarations}\n}`;
+}
+
+export function buildAnnotateLastMessageHtml(
+  data: LastAssistantMessageData,
+  theme?: AnnotateTheme,
+): string {
+  const templateHtml = readFileSync(join(webDir, "index.html"), "utf8");
+  const mdRendererJs = escapeInlineScriptSource(
+    readFileSync(join(webDir, "md-renderer.js"), "utf8"),
+  );
+  const appJs = escapeInlineScriptSource(readFileSync(join(webDir, "app.js"), "utf8"));
+  const payload = escapeForInlineScript(JSON.stringify(data));
+  const themeBlock = buildThemeCssBlock(getThemeCssVars(theme));
+  const replacements = new Map([
+    ['"__INLINE_DATA__"', payload],
+    ["__INLINE_MD_RENDERER_JS__", mdRendererJs],
+    ["__INLINE_JS__", appJs],
+    ["__INLINE_THEME__", themeBlock],
+  ]);
+
+  // Replace the original template in one pass so marker-like message data,
+  // theme values, or runtime source is never scanned as another placeholder.
+  return templateHtml.replace(
+    /"__INLINE_DATA__"|__INLINE_MD_RENDERER_JS__|__INLINE_JS__|__INLINE_THEME__/g,
+    (marker) => replacements.get(marker) ?? marker,
+  );
 }