pi-one-ui 0.1.1

package/extensions/shell/settings-previews.ts

@@ -0,0 +1,137 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+import { renderAccentRailEditorFrame } from "./accent-rail-editor.ts";
+import type { PolishedTuiConfig } from "../app/config/shell.ts";
+import { sanitizeEditorMetadataText } from "./editor-metadata-format.ts";
+import { renderMinimalistFrame } from "./minimalist-editor.ts";
+import { safeThemeFg } from "./style.ts";
+import { renderPolishedEditorFrame } from "./ui.ts";
+import { renderUserMessageStyle } from "./user-message-styles.ts";
+
+export const SETTINGS_PREVIEW_MAX_WIDTH = 72;
+export const SETTINGS_PREVIEW_MAX_ROWS = 10;
+export const EDITOR_PREVIEW_INPUT = "Explain this change safely.";
+export const USER_MESSAGE_PREVIEW_MARKDOWN =
+  "Please review **this change** safely.";
+
+function boundedRows(rows: string[], width: number): string[] {
+  const safeWidth = Math.max(0, Math.min(SETTINGS_PREVIEW_MAX_WIDTH, width));
+  if (safeWidth <= 0) return [];
+  const bounded = rows
+    .slice(0, SETTINGS_PREVIEW_MAX_ROWS)
+    .map((line) => truncateToWidth(line, safeWidth, ""));
+  while (bounded.length > 0 && visibleWidth(bounded.at(-1) ?? "") === 0)
+    bounded.pop();
+  return bounded;
+}
+
+function previewConfig(config: PolishedTuiConfig): PolishedTuiConfig {
+  const derived = structuredClone(config);
+  derived.icons = Object.fromEntries(
+    Object.entries(derived.icons).map(([key, value]) => [
+      key,
+      typeof value === "string" ? sanitizeEditorMetadataText(value) : value,
+    ]),
+  ) as typeof derived.icons;
+  return derived;
+}
+
+function adaptiveBorder(theme: Theme): (text: string) => string {
+  return (text) => safeThemeFg(theme, "thinkingHigh", text);
+}
+
+export function renderEditorSettingsPreview(
+  config: PolishedTuiConfig,
+  theme: Theme,
+  width: number,
+): string[] {
+  const previewWidth = Math.max(0, Math.min(SETTINGS_PREVIEW_MAX_WIDTH, width));
+  if (previewWidth <= 0) return [];
+  const safeConfig = previewConfig(config);
+  const editor = safeConfig.components.editor;
+  const borderColor = adaptiveBorder(theme);
+  const modelLabel = editor.modelLabel === "name" ? "Sonnet 4" : "sonnet-4";
+  const editorLines = [EDITOR_PREVIEW_INPUT];
+  const autocompleteLines = [
+    safeThemeFg(theme, "accent", "→ settings     Open settings"),
+    "  files        Search files",
+    safeThemeFg(theme, "muted", "  (1/47)"),
+  ];
+  const viewport = editor.viewportIndicators
+    ? { above: "2", below: "3" }
+    : undefined;
+  let frame: string[];
+  if (editor.style === "accent-rail") {
+    frame = renderAccentRailEditorFrame({
+      width: previewWidth,
+      editorLines,
+      autocompleteLines,
+      viewport,
+      uiTheme: theme,
+      config: safeConfig,
+    });
+  } else if (editor.style === "minimalist") {
+    frame = renderMinimalistFrame({
+      width: previewWidth,
+      editorLines,
+      viewport,
+      inputText: EDITOR_PREVIEW_INPUT,
+      metadata: {
+        cwd: "/workspace/zentui/src",
+        projectRoot: "/workspace/zentui",
+        branch: "feat/settings-previews",
+        dirty: true,
+        ahead: 2,
+        behind: 1,
+        costLabel: "$.12",
+        modelLabel,
+        thinkingLevel: "high",
+        contextPercent: 75,
+        contextWindow: 372_000,
+        sessionName: "Preview",
+        agentDurationMs: 12_000,
+        agentActive: true,
+      },
+      uiTheme: theme,
+      config: safeConfig,
+      borderColor,
+    });
+  } else {
+    frame = renderPolishedEditorFrame({
+      width: previewWidth,
+      editorLines,
+      autocompleteLines,
+      viewport,
+      uiTheme: theme,
+      config: safeConfig,
+      modelMeta: {
+        modelLabel,
+        modelId: "sonnet-4",
+        modelName: "Sonnet 4",
+        providerLabel: "Anthropic",
+        sessionName: "Preview",
+      },
+      thinkingLevel: "high",
+      borderColor,
+    });
+  }
+  return boundedRows(frame, previewWidth);
+}
+
+export function renderUserMessageSettingsPreview(
+  config: PolishedTuiConfig,
+  theme: Theme,
+  width: number,
+  text = USER_MESSAGE_PREVIEW_MARKDOWN,
+): string[] {
+  const previewWidth = Math.max(0, Math.min(SETTINGS_PREVIEW_MAX_WIDTH, width));
+  if (previewWidth <= 0) return [];
+  const safeConfig = previewConfig(config);
+  const frame = renderUserMessageStyle({
+    text,
+    width: previewWidth,
+    theme,
+    config: safeConfig,
+  });
+  return boundedRows(frame, previewWidth);
+}

package/extensions/shell/state.ts

@@ -0,0 +1,83 @@
+import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
+import type { ModelLabelSource } from "../app/config/shell.ts";
+import {
+  buildCacheReadLabel,
+  buildCacheWriteLabel,
+  buildContextLabel,
+  buildCostLabel,
+  buildTokenLabel,
+  formatProviderLabel,
+  getUsageTotals,
+} from "./format.ts";
+import type { GitStatusSummary } from "./git.ts";
+import type { PackageVersionResult } from "./package-version.ts";
+import type { RuntimeInfo } from "./runtime.ts";
+import type { FooterTelemetry } from "./telemetry.ts";
+
+export type FooterState = GitStatusSummary & {
+  modelLabel: string;
+  modelId: string;
+  modelName: string;
+  providerLabel: string;
+  contextLabel: string;
+  tokenLabel: string;
+  cacheReadLabel: string;
+  cacheWriteLabel: string;
+  costLabel: string;
+  subscription: boolean;
+  autoCompaction: boolean;
+  runtime?: RuntimeInfo;
+  packageVersion?: PackageVersionResult;
+  sessionStartEpoch?: number;
+};
+
+export function createInitialState(gitDefaults: GitStatusSummary): FooterState {
+  return {
+    modelLabel: "no-model",
+    modelId: "",
+    modelName: "",
+    providerLabel: "Unknown",
+    contextLabel: "--",
+    tokenLabel: "↑0 ↓0",
+    cacheReadLabel: "",
+    cacheWriteLabel: "",
+    costLabel: "$0.000",
+    subscription: false,
+    autoCompaction: false,
+    runtime: undefined,
+    packageVersion: undefined,
+    sessionStartEpoch: Date.now(),
+    ...gitDefaults,
+  };
+}
+
+export function modelLabelFor(
+  state: Pick<FooterState, "modelId" | "modelName">,
+  source: ModelLabelSource,
+): string {
+  return source === "name"
+    ? state.modelName || state.modelId || "no-model"
+    : state.modelId || "no-model";
+}
+
+export function syncState(
+  state: FooterState,
+  ctx: ExtensionContext,
+  cacheHitIcon: string,
+  telemetry: FooterTelemetry = {},
+): void {
+  const totals = getUsageTotals(ctx);
+  const m = ctx.model;
+  state.modelId = m?.id ?? "";
+  state.modelName = m?.name ?? "";
+  // Retained as a compatibility snapshot only; production surfaces format from raw fields.
+  state.modelLabel = modelLabelFor(state, "id");
+  state.providerLabel = formatProviderLabel(ctx.model?.provider);
+  state.contextLabel = buildContextLabel(ctx);
+  state.tokenLabel = buildTokenLabel(totals, cacheHitIcon);
+  state.cacheReadLabel = buildCacheReadLabel(totals.cacheRead);
+  state.cacheWriteLabel = buildCacheWriteLabel(totals.cacheWrite);
+  state.costLabel = buildCostLabel(totals);
+  state.subscription = telemetry.subscription === true;
+  state.autoCompaction = telemetry.autoCompaction === true;
+}

package/extensions/shell/style.ts

@@ -0,0 +1,480 @@
+import type { ThemeColor } from "@earendil-works/pi-coding-agent";
+import type { ColorSource, ColorSpec } from "../app/config/shell.ts";
+
+type ThemeLike = {
+  fg(color: string, text: string): string;
+  bold?: (text: string) => string;
+  italic?: (text: string) => string;
+  underline?: (text: string) => string;
+};
+
+export type { ThemeLike };
+
+export const EDITOR_ACCENT_STYLE = "blue";
+export const EDITOR_BORDER_STYLE = "bright-black";
+export const MAX_SAFE_SGR_PREFIX_CODE_UNITS = 96;
+export const MAX_SAFE_SGR_PREFIX_SEQUENCES = 4;
+
+export type SourceStyleFallback = {
+  theme: ColorSpec;
+  terminal: ColorSpec;
+};
+
+export const EDITOR_ACCENT_FALLBACK: SourceStyleFallback = {
+  theme: "accent",
+  terminal: EDITOR_ACCENT_STYLE,
+};
+
+export const EDITOR_BORDER_FALLBACK: SourceStyleFallback = {
+  theme: "borderMuted",
+  terminal: EDITOR_BORDER_STYLE,
+};
+
+function isHexColor(value: string): boolean {
+  return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value);
+}
+
+function expandHexColor(hex: string): string {
+  const body = hex.slice(1);
+  if (body.length === 3) {
+    return body
+      .split("")
+      .map((ch) => ch + ch)
+      .join("");
+  }
+  return body;
+}
+
+function hexToAnsi(hex: string, isBackground = false): string {
+  const normalized = expandHexColor(hex);
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  return `\x1b[${isBackground ? 48 : 38};2;${r};${g};${b}m`;
+}
+
+const terminalColorCodes = new Map([
+  ["black", 30],
+  ["red", 31],
+  ["green", 32],
+  ["yellow", 33],
+  ["blue", 34],
+  ["purple", 35],
+  ["cyan", 36],
+  ["white", 37],
+  ["bright-black", 90],
+  ["bright-red", 91],
+  ["bright-green", 92],
+  ["bright-yellow", 93],
+  ["bright-blue", 94],
+  ["bright-purple", 95],
+  ["bright-cyan", 96],
+  ["bright-white", 97],
+]);
+
+const terminalStyleModifiers = new Map([
+  ["bold", 1],
+  ["dim", 2],
+  ["dimmed", 2],
+  ["italic", 3],
+  ["underline", 4],
+]);
+
+const themeColorNameMap = new Map([
+  ["red", "error"],
+  ["bright-red", "error"],
+  ["green", "success"],
+  ["bright-green", "success"],
+  ["yellow", "warning"],
+  ["bright-yellow", "warning"],
+  ["blue", "syntaxFunction"],
+  ["bright-blue", "syntaxFunction"],
+  ["cyan", "syntaxFunction"],
+  ["bright-cyan", "syntaxFunction"],
+  ["purple", "syntaxKeyword"],
+  ["bright-purple", "syntaxKeyword"],
+  ["black", "muted"],
+  ["bright-black", "muted"],
+  ["white", "text"],
+  ["bright-white", "text"],
+]);
+
+const themeStyleModifiers = new Set(["bold", "italic", "underline"]);
+
+const themeColorTokens = new Set<ThemeColor>([
+  "accent",
+  "border",
+  "borderAccent",
+  "borderMuted",
+  "success",
+  "error",
+  "warning",
+  "muted",
+  "dim",
+  "text",
+  "thinkingText",
+  "userMessageText",
+  "customMessageText",
+  "customMessageLabel",
+  "toolTitle",
+  "toolOutput",
+  "mdHeading",
+  "mdLink",
+  "mdLinkUrl",
+  "mdCode",
+  "mdCodeBlock",
+  "mdCodeBlockBorder",
+  "mdQuote",
+  "mdQuoteBorder",
+  "mdHr",
+  "mdListBullet",
+  "toolDiffAdded",
+  "toolDiffRemoved",
+  "toolDiffContext",
+  "syntaxComment",
+  "syntaxKeyword",
+  "syntaxFunction",
+  "syntaxVariable",
+  "syntaxString",
+  "syntaxNumber",
+  "syntaxType",
+  "syntaxOperator",
+  "syntaxPunctuation",
+  "thinkingOff",
+  "thinkingMinimal",
+  "thinkingLow",
+  "thinkingMedium",
+  "thinkingHigh",
+  "thinkingXhigh",
+  "thinkingMax",
+  "bashMode",
+]);
+
+function terminalColorToAnsi(
+  color: string,
+  isBackground = false,
+): string | undefined {
+  const normalized = color.toLowerCase();
+  const colorCode = terminalColorCodes.get(normalized);
+  if (colorCode !== undefined)
+    return `${isBackground ? colorCode + 10 : colorCode}`;
+
+  if (/^(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(normalized)) {
+    return `${isBackground ? 48 : 38};5;${normalized}`;
+  }
+
+  if (isHexColor(normalized))
+    return hexToAnsi(normalized, isBackground).slice(2, -1);
+  return undefined;
+}
+
+function isExplicitTerminalColorToken(token: string): boolean {
+  const normalized = token.toLowerCase();
+  if (normalized.startsWith("fg:") || normalized.startsWith("bg:")) return true;
+  if (isHexColor(normalized)) return true;
+  return /^(?:[0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(
+    normalized,
+  );
+}
+
+function isSupportedStyleToken(token: string): boolean {
+  const normalized = token.toLowerCase();
+  if (terminalStyleModifiers.has(normalized)) return true;
+  if (terminalColorToAnsi(normalized) !== undefined) return true;
+
+  const isForeground = normalized.startsWith("fg:");
+  const isBackground = normalized.startsWith("bg:");
+  if (isForeground || isBackground) {
+    return terminalColorToAnsi(normalized.slice(3), isBackground) !== undefined;
+  }
+
+  return themeColorTokens.has(token as ThemeColor);
+}
+
+export function isSupportedColorSpec(style: ColorSpec): boolean {
+  const trimmed = style.trim();
+  if (trimmed === "") return true;
+  return trimmed.split(/\s+/).every(isSupportedStyleToken);
+}
+
+function applyThemeModifiers(
+  theme: ThemeLike,
+  styleTokens: string[],
+  text: string,
+): string {
+  let rendered = text;
+  for (const token of styleTokens) {
+    const normalized = token.toLowerCase();
+    if (normalized === "bold") rendered = theme.bold?.(rendered) ?? rendered;
+    if (normalized === "italic")
+      rendered = theme.italic?.(rendered) ?? rendered;
+    if (normalized === "underline")
+      rendered = theme.underline?.(rendered) ?? rendered;
+  }
+  return rendered;
+}
+
+export function safeThemeFg(
+  theme: ThemeLike,
+  color: string,
+  text: string,
+): string {
+  try {
+    return theme.fg(color, text);
+  } catch {
+    return text;
+  }
+}
+
+function mapThemeColor(styleTokens: string[]): string | undefined {
+  let fallback: string | undefined;
+  for (const token of styleTokens) {
+    const normalized = token.toLowerCase();
+    if (themeStyleModifiers.has(normalized)) continue;
+    if (normalized === "dim" || normalized === "dimmed") {
+      fallback = "muted";
+      continue;
+    }
+
+    const mapped = themeColorNameMap.get(normalized);
+    if (mapped) return mapped;
+    return token;
+  }
+  return fallback;
+}
+
+/**
+ * Colorize text using a theme color token or hex color.
+ * Non-hex values are passed directly to `theme.fg()`; invalid tokens fall back
+ * to unstyled text so a config typo does not break rendering.
+ */
+export function colorize(
+  theme: ThemeLike,
+  color: ColorSpec,
+  text: string,
+): string {
+  if (isHexColor(color)) {
+    return `${hexToAnsi(color)}${text}\x1b[39m`;
+  }
+  return safeThemeFg(theme, color, text);
+}
+
+/**
+ * Render text with Starship-style terminal styling strings (e.g. "bold red", "fg:202",
+ * "bg:blue", "underline bg:#bf5700").
+ */
+function isSafeSgrParameters(parameters: string): boolean {
+  const tokens = parameters.split(";");
+  if (tokens.some((token) => !/^\d+$/.test(token))) return false;
+  const values = tokens.map(Number);
+  for (let index = 0; index < values.length; index += 1) {
+    const value = values[index];
+    if (
+      value === 1 ||
+      value === 2 ||
+      value === 3 ||
+      value === 4 ||
+      (value !== undefined && value >= 30 && value <= 37) ||
+      (value !== undefined && value >= 40 && value <= 47) ||
+      (value !== undefined && value >= 90 && value <= 97) ||
+      (value !== undefined && value >= 100 && value <= 107)
+    ) {
+      continue;
+    }
+    if (value !== 38 && value !== 48) return false;
+    const mode = values[index + 1];
+    if (mode === 5) {
+      const color = values[index + 2];
+      if (color === undefined || color < 0 || color > 255) return false;
+      index += 2;
+      continue;
+    }
+    if (mode === 2) {
+      const channels = values.slice(index + 2, index + 5);
+      if (
+        channels.length !== 3 ||
+        channels.some((channel) => channel < 0 || channel > 255)
+      ) {
+        return false;
+      }
+      index += 4;
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+
+/** Accept only the bounded SGR subset emitted by Zentui's supported style tokens. */
+export function isSafeSgrStylePrefix(value: unknown): value is string {
+  if (
+    typeof value !== "string" ||
+    value.length === 0 ||
+    value.length > MAX_SAFE_SGR_PREFIX_CODE_UNITS
+  ) {
+    return false;
+  }
+  const sequence = /\x1b\[([0-9]+(?:;[0-9]+)*)m/g;
+  let offset = 0;
+  let count = 0;
+  for (const match of value.matchAll(sequence)) {
+    if (match.index !== offset || !isSafeSgrParameters(match[1] ?? ""))
+      return false;
+    offset = match.index + match[0].length;
+    count += 1;
+    if (count > MAX_SAFE_SGR_PREFIX_SEQUENCES) return false;
+  }
+  return count > 0 && offset === value.length;
+}
+
+export function renderTerminalStyle(style: string, text: string): string {
+  const codes: string[] = [];
+  for (const token of style.trim().split(/\s+/)) {
+    if (!token) continue;
+
+    const normalized = token.toLowerCase();
+    const modifier = terminalStyleModifiers.get(normalized);
+    if (modifier !== undefined) {
+      codes.push(`${modifier}`);
+      continue;
+    }
+
+    const isForeground = normalized.startsWith("fg:");
+    const isBackground = normalized.startsWith("bg:");
+    const colorName =
+      isForeground || isBackground ? normalized.slice(3) : normalized;
+    const color = terminalColorToAnsi(colorName, isBackground);
+    if (color) codes.push(color);
+  }
+
+  return codes.length ? `\x1b[${codes.join(";")}m${text}\x1b[0m` : text;
+}
+
+/**
+ * Apply Starship-style terminal styling first, falling back to Pi theme tokens for
+ * legacy config values such as "accent" or "syntaxKeyword".
+ */
+export function renderStyle(
+  theme: ThemeLike,
+  style: ColorSpec,
+  text: string,
+): string {
+  if (style.trim() === "") return text;
+  const styled = renderTerminalStyle(style, text);
+  return styled === text ? colorize(theme, style, text) : styled;
+}
+
+export function renderThemeStyle(
+  theme: ThemeLike,
+  style: ColorSpec,
+  text: string,
+): string {
+  const trimmed = style.trim();
+  if (trimmed === "") return text;
+
+  const tokens = trimmed.split(/\s+/).filter(Boolean);
+  if (tokens.some(isExplicitTerminalColorToken))
+    return renderTerminalStyle(style, text);
+
+  const color = mapThemeColor(tokens) ?? "text";
+  return safeThemeFg(theme, color, applyThemeModifiers(theme, tokens, text));
+}
+
+function renderStyleStrict(
+  theme: ThemeLike,
+  style: ColorSpec,
+  text: string,
+): string {
+  if (style.trim() === "") return text;
+  const styled = renderTerminalStyle(style, text);
+  return styled === text ? theme.fg(style, text) : styled;
+}
+
+function renderThemeStyleStrict(
+  theme: ThemeLike,
+  style: ColorSpec,
+  text: string,
+): string {
+  const trimmed = style.trim();
+  if (trimmed === "") return text;
+  const tokens = trimmed.split(/\s+/).filter(Boolean);
+  if (tokens.some(isExplicitTerminalColorToken))
+    return renderTerminalStyle(style, text);
+  const color = mapThemeColor(tokens) ?? "text";
+  return theme.fg(color, applyThemeModifiers(theme, tokens, text));
+}
+
+export function renderStyleForSource(
+  theme: ThemeLike,
+  source: ColorSource,
+  style: ColorSpec,
+  text: string,
+): string {
+  return source === "terminal"
+    ? renderStyle(theme, style, text)
+    : renderThemeStyle(theme, style, text);
+}
+
+export function renderStyleForSourceOrFallback(
+  theme: ThemeLike,
+  source: ColorSource,
+  style: ColorSpec | undefined,
+  fallback: ColorSpec | SourceStyleFallback,
+  text: string,
+): string {
+  const fallbackStyle =
+    typeof fallback === "string" ? fallback : fallback[source];
+  return renderStyleForSource(theme, source, style ?? fallbackStyle, text);
+}
+
+export function renderStyleForSourceOrFallbackStrict(
+  theme: ThemeLike,
+  source: ColorSource,
+  style: ColorSpec | undefined,
+  fallback: ColorSpec | SourceStyleFallback,
+  text: string,
+): string {
+  const fallbackStyle =
+    typeof fallback === "string" ? fallback : fallback[source];
+  const resolvedStyle = style ?? fallbackStyle;
+  return source === "terminal"
+    ? renderStyleStrict(theme, resolvedStyle, text)
+    : renderThemeStyleStrict(theme, resolvedStyle, text);
+}
+
+export function renderEditorAccent(text: string): string {
+  return renderTerminalStyle(EDITOR_ACCENT_STYLE, text);
+}
+
+export function renderEditorBorder(text: string): string {
+  return renderTerminalStyle(EDITOR_BORDER_STYLE, text);
+}
+
+export function renderAccentLine(
+  theme: ThemeLike,
+  source: ColorSource,
+  text: string,
+): string {
+  return renderStyleForSourceOrFallback(
+    theme,
+    source,
+    undefined,
+    EDITOR_ACCENT_FALLBACK,
+    text,
+  );
+}
+
+export function renderChromeBorder(
+  theme: ThemeLike,
+  source: ColorSource,
+  terminalFallbackStyle: ColorSpec,
+  text: string,
+): string {
+  return renderStyleForSourceOrFallback(
+    theme,
+    source,
+    undefined,
+    { theme: "borderMuted", terminal: terminalFallbackStyle },
+    text,
+  );
+}