pi-one-ui 0.1.1

package/extensions/shell/completion-menu.ts

@@ -0,0 +1,186 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+export type CompletionRowsOptions = {
+  lines: string[];
+  width: number;
+  theme: Theme;
+  selectedPrefix: string;
+  ownedBackground: boolean;
+};
+
+export type CompletionPaletteOptions = {
+  lines: string[];
+  width: number;
+  theme: Theme;
+  renderSeparator: (text: string) => string;
+  ownedBackground: boolean;
+};
+
+const SGR_SEQUENCE = /(?:\x1b\[|\u009b)([0-9:;]*)m/g;
+
+function normalizeC1Csi(content: string): string {
+  return content.replace(/\u009b([0-?]*[ -/]*[@-~])/g, "\x1b[$1");
+}
+
+function sgrBackgroundAction(parameters: string): "reset" | "set" | undefined {
+  let action: "reset" | "set" | undefined;
+  const values = (parameters || "0").split(";");
+  for (let index = 0; index < values.length; index++) {
+    const parameter = values[index] ?? "";
+    const primary =
+      parameter === ""
+        ? 0
+        : Number.parseInt(parameter.split(":", 1)[0] ?? "", 10);
+    if (primary === 38 || primary === 48 || primary === 58) {
+      if (primary === 48) action = "set";
+      if (!parameter.includes(":")) {
+        const mode = Number.parseInt(values[index + 1] ?? "", 10);
+        if (mode === 5) index += 2;
+        else if (mode === 2) index += 4;
+      }
+      continue;
+    }
+    if (primary === 0 || primary === 49) action = "reset";
+    else if (
+      (primary >= 40 && primary <= 47) ||
+      (primary >= 100 && primary <= 107)
+    )
+      action = "set";
+  }
+  return action;
+}
+
+function restoresOwnedBackground(sequence: string): boolean {
+  const parameters = sequence.slice(sequence.startsWith("\u009b") ? 1 : 2, -1);
+  return sgrBackgroundAction(parameters) === "reset";
+}
+
+function truncateTerminalLine(content: string, width: number): string {
+  const safeWidth = Math.max(0, width);
+  const normalized = normalizeC1Csi(content);
+  return visibleWidth(normalized) <= safeWidth
+    ? content
+    : truncateToWidth(normalized, safeWidth, "");
+}
+
+export function fillTerminalLine(content: string, width: number): string {
+  const truncated = truncateTerminalLine(content, width);
+  const renderedWidth = visibleWidth(normalizeC1Csi(truncated));
+  return `${truncated}${" ".repeat(Math.max(0, width - renderedWidth))}`;
+}
+
+export function applyOwnedSurfaceBackground(
+  theme: Theme,
+  text: string,
+): string {
+  try {
+    const background = theme.getBgAnsi("userMessageBg");
+    const restored = text.replace(SGR_SEQUENCE, (sequence) =>
+      restoresOwnedBackground(sequence) ? `${sequence}${background}` : sequence,
+    );
+    return `${background}${restored}\x1b[49m`;
+  } catch {
+    try {
+      let cursor = 0;
+      let rendered = "";
+      for (const match of text.matchAll(SGR_SEQUENCE)) {
+        if (!restoresOwnedBackground(match[0])) continue;
+        const before = text.slice(cursor, match.index);
+        if (before) rendered += theme.bg("userMessageBg", before);
+        rendered += match[0];
+        cursor = (match.index ?? 0) + match[0].length;
+      }
+      const trailing = text.slice(cursor);
+      if (trailing) rendered += theme.bg("userMessageBg", trailing);
+      return rendered || theme.bg("userMessageBg", text);
+    } catch {
+      return text;
+    }
+  }
+}
+
+export function replaceNativeSelectedPrefix(
+  line: string,
+  replacement: string,
+): string {
+  const selectedPrefix = /^((?:(?:\x1b\[|\u009b)[0-9:;]*m)*)→ /;
+  const match = line.match(selectedPrefix);
+  if (!match) return line;
+  return `${replacement}${match[1]}${line.slice(match[0].length)}`;
+}
+
+export function isNativeCompletionCountRow(line: string): boolean {
+  const withoutSgr = line.replace(/(?:\x1b\[|\u009b)[0-?]*[ -/]*m/g, "");
+  return /^\s*\(\d+\/\d+\)\s*$/.test(withoutSgr);
+}
+
+export function omitTrailingNativeCompletionCountRow(
+  lines: string[],
+): string[] {
+  return lines.length > 0 && isNativeCompletionCountRow(lines.at(-1) ?? "")
+    ? lines.slice(0, -1)
+    : lines;
+}
+
+export function renderCompletionRows({
+  lines,
+  width,
+  theme,
+  selectedPrefix,
+  ownedBackground,
+}: CompletionRowsOptions): string[] {
+  return lines.map((line) => {
+    const content = fillTerminalLine(
+      replaceNativeSelectedPrefix(line, selectedPrefix),
+      width,
+    );
+    const surfaced = ownedBackground
+      ? applyOwnedSurfaceBackground(theme, content)
+      : content;
+    return truncateTerminalLine(surfaced, width);
+  });
+}
+
+function helpLabel(width: number): string {
+  const labels = [
+    " ↑↓ Navigate   Enter Use   Esc Close",
+    " ↑↓ Nav   Enter Use   Esc",
+    " ↑↓   Enter   Esc",
+  ];
+  return (
+    labels.find((label) => visibleWidth(label) <= width) ?? labels.at(-1) ?? ""
+  );
+}
+
+/** Full-width, provenance-preserving completion shell for Opencode editor styles. */
+export function renderCompletionPalette({
+  lines,
+  width,
+  theme,
+  renderSeparator,
+  ownedBackground,
+}: CompletionPaletteOptions): string[] {
+  const resultLines = omitTrailingNativeCompletionCountRow(lines);
+  if (resultLines.length === 0) return [];
+  const safeWidth = Math.max(0, width);
+  const rows = renderCompletionRows({
+    lines: resultLines,
+    width: safeWidth,
+    theme,
+    selectedPrefix: "  ",
+    ownedBackground,
+  });
+  const separator = renderSeparator("─".repeat(safeWidth));
+  if (safeWidth < 3)
+    return [...rows, truncateToWidth(separator, safeWidth, "")];
+  const helpText = fillTerminalLine(helpLabel(safeWidth), safeWidth);
+  const help = ownedBackground
+    ? applyOwnedSurfaceBackground(theme, helpText)
+    : helpText;
+  return [
+    ...rows,
+    truncateToWidth(separator, safeWidth, ""),
+    truncateToWidth(help, safeWidth, ""),
+  ];
+}

package/extensions/shell/editor-metadata-format.ts

@@ -0,0 +1,287 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { ZentuiConfig } from "../app/config/shell.ts";
+import { type FormatToken, parseFooterFormat } from "./footer-format.ts";
+import {
+  EDITOR_ACCENT_FALLBACK,
+  renderStyleForSourceOrFallback,
+  safeThemeFg,
+} from "./style.ts";
+
+export type EditorMetadataValues = {
+  model: string;
+  modelId: string;
+  modelName: string;
+  provider: string;
+  thinking: string;
+  sessionName: string;
+};
+
+type RenderedTokens = {
+  styled: string;
+  hasDynamic: boolean;
+  hasNonEmptyDynamic: boolean;
+};
+
+const ESC = 0x1b;
+const BEL = 0x07;
+const CAN = 0x18;
+const SUB = 0x1a;
+const C1_DCS = 0x90;
+const C1_CSI = 0x9b;
+const C1_ST = 0x9c;
+const C1_OSC = 0x9d;
+const C1_SOS = 0x98;
+const C1_PM = 0x9e;
+const C1_APC = 0x9f;
+
+function consumeCsi(value: string, start: number): number {
+  for (let index = start; index < value.length; index++) {
+    const code = value.charCodeAt(index);
+    if (code === CAN || code === SUB) return index + 1;
+    if (code >= 0x40 && code <= 0x7e) return index + 1;
+  }
+  return value.length;
+}
+
+function consumeControlString(
+  value: string,
+  start: number,
+  allowBel: boolean,
+): number {
+  for (let index = start; index < value.length; index++) {
+    const code = value.charCodeAt(index);
+    if (code === CAN || code === SUB) return index + 1;
+    if (allowBel && code === BEL) return index + 1;
+    if (code === C1_ST) return index + 1;
+    if (code === ESC && value.charCodeAt(index + 1) === 0x5c) return index + 2;
+  }
+  return value.length;
+}
+
+function consumeEscape(value: string, start: number): number {
+  if (start + 1 >= value.length) return value.length;
+  const next = value.charCodeAt(start + 1);
+  if (next === 0x5b) return consumeCsi(value, start + 2);
+  if (next === 0x5d) return consumeControlString(value, start + 2, true);
+  if (next === 0x50 || next === 0x58 || next === 0x5e || next === 0x5f) {
+    return consumeControlString(value, start + 2, false);
+  }
+
+  let index = start + 1;
+  while (index < value.length) {
+    const code = value.charCodeAt(index);
+    if (code >= 0x20 && code <= 0x2f) {
+      index += 1;
+      continue;
+    }
+    return code >= 0x30 && code <= 0x7e ? index + 1 : index;
+  }
+  return value.length;
+}
+
+function isNormalizedWhitespace(code: number): boolean {
+  return (
+    code === 0x09 ||
+    code === 0x0a ||
+    code === 0x0b ||
+    code === 0x0c ||
+    code === 0x0d ||
+    code === 0x85 ||
+    code === 0x2028 ||
+    code === 0x2029
+  );
+}
+
+export function sanitizeEditorMetadataText(value: string): string {
+  let sanitized = "";
+  for (let index = 0; index < value.length; ) {
+    const code = value.charCodeAt(index);
+    if (code === ESC) {
+      index = consumeEscape(value, index);
+      continue;
+    }
+    if (code === C1_CSI) {
+      index = consumeCsi(value, index + 1);
+      continue;
+    }
+    if (code === C1_OSC) {
+      index = consumeControlString(value, index + 1, true);
+      continue;
+    }
+    if (
+      code === C1_DCS ||
+      code === C1_SOS ||
+      code === C1_PM ||
+      code === C1_APC
+    ) {
+      index = consumeControlString(value, index + 1, false);
+      continue;
+    }
+    if (isNormalizedWhitespace(code)) {
+      sanitized += " ";
+      do index += 1;
+      while (
+        index < value.length &&
+        isNormalizedWhitespace(value.charCodeAt(index))
+      );
+      continue;
+    }
+    if (code < 0x20 || (code >= 0x7f && code <= 0x9f)) {
+      index += 1;
+      continue;
+    }
+    sanitized += value[index];
+    index += 1;
+  }
+  return sanitized;
+}
+
+function editorThinkingStyle(
+  config: ZentuiConfig,
+  level: string,
+): string | undefined {
+  switch (level.toLowerCase()) {
+    case "minimal":
+      return (
+        config.colors.editorThinkingMinimal ?? config.colors.editorThinking
+      );
+    case "low":
+      return config.colors.editorThinkingLow ?? config.colors.editorThinking;
+    case "medium":
+      return config.colors.editorThinkingMedium ?? config.colors.editorThinking;
+    case "high":
+      return config.colors.editorThinkingHigh ?? config.colors.editorThinking;
+    case "xhigh":
+      return config.colors.editorThinkingXhigh ?? config.colors.editorThinking;
+    case "max":
+      return (
+        config.colors.editorThinkingMax ??
+        config.colors.editorThinkingXhigh ??
+        config.colors.editorThinking
+      );
+    default:
+      return config.colors.editorThinking;
+  }
+}
+
+function renderVariable(
+  name: string,
+  values: EditorMetadataValues,
+  uiTheme: Theme,
+  config: ZentuiConfig,
+): { plain: string; styled: string } {
+  const colorSource = config.components.editor.colorSource;
+  const thinking =
+    values.thinking.toLowerCase() === "off" ? "" : values.thinking;
+  const raw =
+    name === "model"
+      ? values.model
+      : name === "model_id"
+        ? values.modelId
+        : name === "model_name"
+          ? values.modelName
+          : name === "provider"
+            ? values.provider
+            : name === "thinking"
+              ? thinking
+              : name === "session_name"
+                ? values.sessionName
+                : "";
+  const plain = sanitizeEditorMetadataText(raw);
+  if (!plain) return { plain: "", styled: "" };
+
+  if (name === "model" || name === "model_id" || name === "model_name") {
+    return {
+      plain,
+      styled: renderStyleForSourceOrFallback(
+        uiTheme,
+        colorSource,
+        config.colors.editorModel,
+        EDITOR_ACCENT_FALLBACK,
+        plain,
+      ),
+    };
+  }
+  if (name === "provider") {
+    return {
+      plain,
+      styled: renderStyleForSourceOrFallback(
+        uiTheme,
+        colorSource,
+        config.colors.editorProvider,
+        "text",
+        plain,
+      ),
+    };
+  }
+  if (name === "thinking") {
+    return {
+      plain,
+      styled: renderStyleForSourceOrFallback(
+        uiTheme,
+        colorSource,
+        editorThinkingStyle(config, plain),
+        "muted",
+        plain,
+      ),
+    };
+  }
+  if (name === "session_name") {
+    return { plain, styled: safeThemeFg(uiTheme, "border", plain) };
+  }
+  return { plain: "", styled: "" };
+}
+
+function renderTokens(
+  tokens: FormatToken[],
+  values: EditorMetadataValues,
+  uiTheme: Theme,
+  config: ZentuiConfig,
+): RenderedTokens {
+  let styled = "";
+  let hasDynamic = false;
+  let hasNonEmptyDynamic = false;
+
+  for (const token of tokens) {
+    if (token.kind === "text") {
+      const plain = sanitizeEditorMetadataText(token.value);
+      if (plain) styled += safeThemeFg(uiTheme, "border", plain);
+      continue;
+    }
+    if (token.kind === "fill") {
+      hasDynamic = true;
+      continue;
+    }
+    if (token.kind === "var") {
+      hasDynamic = true;
+      const rendered = renderVariable(token.name, values, uiTheme, config);
+      styled += rendered.styled;
+      if (rendered.plain) hasNonEmptyDynamic = true;
+      continue;
+    }
+
+    const rendered = renderTokens(token.tokens, values, uiTheme, config);
+    const visible = !rendered.hasDynamic || rendered.hasNonEmptyDynamic;
+    hasDynamic = true;
+    if (visible) {
+      styled += rendered.styled;
+      hasNonEmptyDynamic = true;
+    }
+  }
+
+  return { styled, hasDynamic, hasNonEmptyDynamic };
+}
+
+export function renderEditorMetadataFormat(
+  format: string,
+  values: EditorMetadataValues,
+  uiTheme: Theme,
+  config: ZentuiConfig,
+): string {
+  return renderTokens(
+    parseFooterFormat(sanitizeEditorMetadataText(format)),
+    values,
+    uiTheme,
+    config,
+  ).styled;
+}

package/extensions/shell/editor-transfer.ts

@@ -0,0 +1,73 @@
+export type EditorComponentFactory = (...args: never[]) => unknown;
+
+export type EditorTransferUi<Factory = EditorComponentFactory> = {
+  getEditorText?: () => unknown;
+  setEditorText?: (text: string) => void;
+  setEditorComponent?: (factory: Factory | undefined) => void;
+  getEditorComponent?: () => Factory | undefined;
+};
+
+export type EditorTransferFailureReason =
+  | "unsupported-transfer-api"
+  | "editor-factory-snapshot-failed"
+  | "editor-text-snapshot-failed"
+  | "editor-text-preparation-failed"
+  | "editor-replacement-failed-with-rollback"
+  | "editor-replacement-rollback-failed";
+
+export type EditorTransferResult =
+  | { ok: true }
+  | { ok: false; reason: EditorTransferFailureReason };
+
+/**
+ * Prepare the active editor's public expanded text before Pi replaces its factory.
+ * This intentionally transfers prompt contents only; editor-private state is never inspected.
+ */
+export function replaceEditorComponentWithExpandedText<Factory>(
+  ui: EditorTransferUi<Factory>,
+  factory: Factory | undefined,
+): EditorTransferResult {
+  if (
+    typeof ui.getEditorText !== "function" ||
+    typeof ui.setEditorText !== "function" ||
+    typeof ui.setEditorComponent !== "function" ||
+    typeof ui.getEditorComponent !== "function"
+  ) {
+    return { ok: false, reason: "unsupported-transfer-api" };
+  }
+
+  let previousFactory: Factory | undefined;
+  try {
+    previousFactory = ui.getEditorComponent();
+  } catch {
+    return { ok: false, reason: "editor-factory-snapshot-failed" };
+  }
+
+  let expandedText: unknown;
+  try {
+    expandedText = ui.getEditorText();
+  } catch {
+    return { ok: false, reason: "editor-text-snapshot-failed" };
+  }
+  if (typeof expandedText !== "string") {
+    return { ok: false, reason: "editor-text-snapshot-failed" };
+  }
+
+  try {
+    ui.setEditorText(expandedText);
+  } catch {
+    return { ok: false, reason: "editor-text-preparation-failed" };
+  }
+
+  try {
+    ui.setEditorComponent(factory);
+  } catch {
+    try {
+      ui.setEditorComponent(previousFactory);
+      return { ok: false, reason: "editor-replacement-failed-with-rollback" };
+    } catch {
+      return { ok: false, reason: "editor-replacement-rollback-failed" };
+    }
+  }
+  return { ok: true };
+}

package/extensions/shell/extension-status.ts

@@ -0,0 +1,102 @@
+import { stripVTControlCharacters } from "node:util";
+import type {
+  ExtensionStatusColorMode,
+  ExtensionStatusPlacement,
+  ZentuiConfig,
+} from "../app/config/shell.ts";
+import {
+  getExtensionStatusColorMode,
+  getExtensionStatusPlacement,
+  isExtensionStatusPlacement,
+} from "../app/config/shell.ts";
+
+export type ExtensionStatusSegment = {
+  key: string;
+  text: string;
+  placement: ExtensionStatusPlacement;
+  colorMode: ExtensionStatusColorMode;
+};
+
+export type ExtensionStatusSegmentsByPlacement = {
+  left: ExtensionStatusSegment[];
+  middle: ExtensionStatusSegment[];
+  right: ExtensionStatusSegment[];
+};
+
+const safeSgrPattern = /\x1b\[[0-9;:]*m/g;
+const sgrPlaceholderPattern = /__ZENTUI_SGR_(\d+)__/g;
+
+function compareKeys(
+  a: ExtensionStatusSegment,
+  b: ExtensionStatusSegment,
+): number {
+  return a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
+}
+
+function normalizeStatusWhitespace(value: string): string {
+  return value
+    .replace(/[\r\n\t\f\v]+/g, " ")
+    .replace(/[\u0000-\u001f\u007f-\u009f]/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+export function sanitizeExtensionStatusText(value: string): string {
+  return normalizeStatusWhitespace(stripVTControlCharacters(value));
+}
+
+function hasVisibleStatusText(value: string): boolean {
+  return sanitizeExtensionStatusText(value).length > 0;
+}
+
+export function sanitizeExtensionStatusOriginalText(value: string): string {
+  const safeSequences: string[] = [];
+  const protectedValue = value.replace(safeSgrPattern, (sequence) => {
+    const index = safeSequences.push(sequence) - 1;
+    return `__ZENTUI_SGR_${index}__`;
+  });
+  const cleaned = normalizeStatusWhitespace(
+    stripVTControlCharacters(protectedValue),
+  );
+  const restored = cleaned.replace(
+    sgrPlaceholderPattern,
+    (_match, indexText: string) => {
+      const index = Number.parseInt(indexText, 10);
+      return safeSequences[index] ?? "";
+    },
+  );
+
+  return hasVisibleStatusText(restored) ? restored : "";
+}
+
+export function collectExtensionStatusSegments(
+  statuses: ReadonlyMap<string, string>,
+  config: ZentuiConfig,
+): ExtensionStatusSegmentsByPlacement {
+  const segments: ExtensionStatusSegmentsByPlacement = {
+    left: [],
+    middle: [],
+    right: [],
+  };
+
+  for (const [key, value] of statuses.entries()) {
+    const placement = getExtensionStatusPlacement(config, key);
+    if (placement === "off" || !isExtensionStatusPlacement(placement)) continue;
+    if (placement !== "left" && placement !== "middle" && placement !== "right")
+      continue;
+
+    const colorMode = getExtensionStatusColorMode(config, key);
+    const text =
+      colorMode === "original"
+        ? sanitizeExtensionStatusOriginalText(value)
+        : sanitizeExtensionStatusText(value);
+    if (!text) continue;
+
+    segments[placement].push({ key, text, placement, colorMode });
+  }
+
+  segments.left.sort(compareKeys);
+  segments.middle.sort(compareKeys);
+  segments.right.sort(compareKeys);
+  return segments;
+}