@thoth-agents/pi-thoth-theme 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thoth-agents/pi-thoth-theme",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "description": "Modular Thoth theme, status line, tool styling, and welcome header for Pi.",
   "license": "MIT",
@@ -16,7 +16,7 @@
   ],
   "pi": {
     "extensions": [
-      "./src/index.ts"
+      "./dist/index.ts"
     ],
     "themes": [
       "./themes"
@@ -31,8 +31,7 @@
     "access": "public"
   },
   "files": [
-    "src/**/*.ts",
-    "!src/**/*.test.ts",
+    "dist",
     "themes/**",
     "README.md",
     "LICENSE"
@@ -50,17 +49,16 @@
     "@earendil-works/pi-coding-agent": "1.0.2",
     "@earendil-works/pi-tui": "1.0.2",
     "@earendil-works/pi-ai": "1.0.2",
-    "@rolldown/binding-wasm32-wasi": "^1.2.4"
+    "@rolldown/binding-wasm32-wasi": "^1.2.4",
+    "@thoth-agents/pi-core": "^0.2.0"
   },
   "upstream": {
     "repository": "https://github.com/QuangThai/pi-omp-theme",
     "role": "primary source"
   },
-  "dependencies": {
-    "@thoth-agents/pi-core": "^0.1.0"
-  },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "build": "node ../../scripts/build-pi-extensions.mjs pi-thoth-theme"
   }
 }

package/src/index.ts

@@ -1,53 +0,0 @@
-import type { ExtensionAPI } from '@earendil-works/pi-coding-agent';
-import {
-  type RenderKitToken,
-  registerRenderKit,
-  withdrawRenderKit,
-} from '@thoth-agents/pi-core';
-import { createRenderKit } from './render-kit/index.ts';
-import { loadConfig } from './shared/config.ts';
-import { frames, icon } from './shared/icons.ts';
-import { registerStatusLine } from './status-line/index.ts';
-import { createToolRendererResolver, registerTools } from './tools/index.ts';
-import { registerWelcome } from './welcome/index.ts';
-
-export default function thothTheme(pi: ExtensionAPI): void {
-  const config = loadConfig();
-  const owner = {};
-  const cwd = process.cwd();
-  const resolveToolRenderers = config.tools.enabled
-    ? createToolRendererResolver(pi, config, cwd)
-    : undefined;
-  let kitToken: RenderKitToken | undefined;
-  if (resolveToolRenderers) {
-    registerTools(pi, config, cwd, owner, resolveToolRenderers);
-  }
-
-  pi.on('session_shutdown', (_event, ctx) => {
-    if (!ctx.hasUI || kitToken === undefined) return;
-    withdrawRenderKit(kitToken);
-    kitToken = undefined;
-  });
-
-  pi.on('session_start', (_event, ctx) => {
-    if (!ctx.hasUI) return;
-    if (config.tools.enabled) {
-      kitToken = registerRenderKit(
-        createRenderKit(owner, resolveToolRenderers, config.icons),
-        owner,
-      );
-    }
-    if (!ctx.ui) return;
-    if (config.statusLine.enabled) {
-      if (config.inputBox?.enabled !== false) {
-        ctx.ui.setWorkingIndicator?.({
-          frames: [...frames('workingFrames', config.icons)],
-          intervalMs: 200,
-        });
-        ctx.ui.setWorkingMessage?.(`working${icon('ellipsis', config.icons)}`);
-      }
-      registerStatusLine(pi, ctx, config);
-    }
-    if (config.welcome.enabled) registerWelcome(pi, ctx, config);
-  });
-}

package/src/input-box/decorate.ts

@@ -1,304 +0,0 @@
-import {
-  type TuiMouseEvent,
-  type TuiMouseEventResult,
-  truncateToWidth,
-  visibleWidth,
-} from '@earendil-works/pi-tui';
-import type { IconMode } from '../shared/config.ts';
-import {
-  type ActiveThemeLike,
-  formatBranchSegment,
-  formatContextSegments,
-  formatCwdSegments,
-  formatModelSegments,
-} from '../status-line/layout.ts';
-import type {
-  StatusSnapshot,
-  StatusSnapshotProvider,
-} from '../status-line/snapshot.ts';
-import {
-  inputLabelWidth,
-  renderInputBottom,
-  renderInputTop,
-  renderPlaceholder,
-  scrollLabel,
-  wrapContentRow,
-} from './frame.ts';
-import { type BreathingFrame, createBreathingFrame } from './gradient.ts';
-import type { WorkingState } from './state.ts';
-
-export const MIN_INPUT_BOX_WIDTH = 16;
-
-interface EditorLike {
-  render(width: number): string[];
-  renderTopBorder(width: number, hiddenLineCount: number): string;
-  renderBottomBorder(width: number, hiddenLineCount: number): string;
-  getText(): string;
-  getPaddingX(): number;
-  handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined;
-  borderColor(text: string): string;
-  workingStatusIndicator?: unknown;
-}
-
-export interface InputBoxDeps {
-  theme: ActiveThemeLike;
-  working: WorkingState;
-  /** Omission retains Unicode glyphs; may be a live getter. */
-  readonly iconMode?: IconMode;
-  /** Shared live data; optional for standalone decorator consumers. */
-  getStatusSnapshot?: StatusSnapshotProvider;
-}
-
-export interface EditorDecoration {
-  getStatusSnapshot(): Readonly<StatusSnapshot> | undefined;
-  dispose(): void;
-}
-
-const decoratedEditors = new WeakSet<object>();
-const decorations = new WeakMap<object, EditorDecoration>();
-const methodNames = [
-  'render',
-  'renderTopBorder',
-  'renderBottomBorder',
-  'getText',
-  'getPaddingX',
-  'handleMouse',
-  'borderColor',
-] as const;
-
-// Do not read editor.render: the background-task Proxy getter dynamically calls
-// target.render, which would recurse after replacing that same target method.
-function method<Name extends keyof EditorLike>(
-  editor: object,
-  name: Name,
-): EditorLike[Name] | undefined {
-  for (
-    let owner: object | null = editor;
-    owner;
-    owner = Reflect.getPrototypeOf(owner)
-  ) {
-    const descriptor = Reflect.getOwnPropertyDescriptor(owner, name);
-    if (descriptor)
-      return typeof descriptor.value === 'function'
-        ? descriptor.value
-        : undefined;
-  }
-  return undefined;
-}
-
-export function isEditorLike(editor: unknown): editor is EditorLike {
-  if (!editor || typeof editor !== 'object') return false;
-  if (decoratedEditors.has(editor)) return true;
-  try {
-    return methodNames.every((name) => method(editor, name) !== undefined);
-  } catch {
-    return false;
-  }
-}
-
-export function decorateEditor(
-  editor: unknown,
-  deps: InputBoxDeps,
-): EditorDecoration | undefined {
-  if (!isEditorLike(editor)) return undefined;
-  if (decoratedEditors.has(editor)) return decorations.get(editor);
-  const names = [
-    'render',
-    'renderTopBorder',
-    'renderBottomBorder',
-    'handleMouse',
-    'borderColor',
-  ] as const;
-  if (
-    !Reflect.isExtensible(editor) ||
-    names.some(
-      (name) =>
-        Reflect.getOwnPropertyDescriptor(editor, name)?.configurable === false,
-    )
-  )
-    return undefined;
-  const originals = Object.fromEntries(
-    methodNames.map((name) => [name, method(editor, name)]),
-  ) as unknown as EditorLike;
-  const descriptors = new Map(
-    names.map((name) => [name, Reflect.getOwnPropertyDescriptor(editor, name)]),
-  );
-  let active = true;
-  let outerWidth: number | undefined;
-  let fallback = false;
-  let top: string | undefined;
-  let bottom: string | undefined;
-  let renderFrame: BreathingFrame | undefined;
-  // Mouse hit-testing follows the last render's boxed or native geometry.
-  let boxRendered = false;
-  const muted = (text: string) => deps.theme.fg?.('muted', text) ?? text;
-
-  function nativeRender(receiver: EditorLike, width: number): string[] {
-    fallback = true;
-    try {
-      return originals.render.call(receiver, width);
-    } finally {
-      fallback = false;
-    }
-  }
-
-  const patches: PropertyDescriptorMap = {
-    render: {
-      configurable: true,
-      writable: true,
-      value(this: EditorLike, width: number): string[] {
-        boxRendered = false;
-        if (!active || width < MIN_INPUT_BOX_WIDTH)
-          return nativeRender(this, width);
-        const boxWidth = Math.floor(width);
-        const innerWidth = boxWidth - 2;
-        const maxPadding = Math.max(0, Math.floor((innerWidth - 1) / 2));
-        const paddingX = Math.min(originals.getPaddingX.call(this), maxPadding);
-        const contentWidth = Math.max(1, innerWidth - paddingX * 2);
-        const layoutWidth = Math.max(1, contentWidth - (paddingX ? 0 : 1));
-        // Native word wrapping recurses on a wide grapheme at width 1. Keep
-        // its original geometry when the box plus current padding is unsafe.
-        if (layoutWidth < 2) return nativeRender(this, width);
-        // Share one time/color sample with the native status and every border.
-        const frame = deps.working.isWorking
-          ? createBreathingFrame(Date.now())
-          : undefined;
-        renderFrame = frame;
-        outerWidth = boxWidth;
-        top = undefined;
-        bottom = undefined;
-        let lines: string[];
-        try {
-          lines = originals.render.call(this, outerWidth - 2);
-        } finally {
-          outerWidth = undefined;
-          renderFrame = undefined;
-        }
-        const bottomIndex =
-          bottom === undefined ? -1 : lines.indexOf(bottom, 1);
-        if (top === undefined || lines[0] !== top || bottomIndex < 2)
-          return nativeRender(this, width);
-        const text = originals.getText.call(this);
-        lines = lines.map((line, index) => {
-          if (index === 0 || index === bottomIndex) return line;
-          if (index > bottomIndex)
-            return ` ${truncateToWidth(line, width - 2, '', true)} `;
-          return wrapContentRow(
-            renderPlaceholder(line, width - 2, deps.theme, text),
-            width,
-            deps.theme,
-            frame,
-          );
-        });
-        boxRendered = true;
-        return lines;
-      },
-    },
-    renderTopBorder: {
-      configurable: true,
-      writable: true,
-      value(this: EditorLike, width: number, hidden: number): string {
-        if (
-          outerWidth === undefined ||
-          (hidden > 0 &&
-            visibleWidth(scrollLabel('up', hidden, deps.iconMode)) >
-              outerWidth - 6)
-        )
-          return originals.renderTopBorder.call(this, width, hidden);
-        const status = deps.working.status(
-          this.workingStatusIndicator,
-          inputLabelWidth(outerWidth, hidden, deps.iconMode),
-          muted,
-          renderFrame,
-          deps.iconMode,
-        );
-        const data = active ? deps.getStatusSnapshot?.() : undefined;
-        const options = { mode: deps.iconMode, theme: deps.theme };
-        top = renderInputTop(
-          outerWidth,
-          deps.theme,
-          {
-            left: [status, data ? formatBranchSegment(data, options) : ''],
-            right: data ? formatCwdSegments(data, options) : [],
-          },
-          hidden,
-          renderFrame,
-          deps.iconMode,
-        );
-        return top;
-      },
-    },
-    renderBottomBorder: {
-      configurable: true,
-      writable: true,
-      value(this: EditorLike, width: number, hidden: number): string {
-        if (
-          outerWidth === undefined ||
-          (hidden > 0 &&
-            visibleWidth(scrollLabel('down', hidden, deps.iconMode)) >
-              outerWidth - 6)
-        )
-          return originals.renderBottomBorder.call(this, width, hidden);
-        const data = active ? deps.getStatusSnapshot?.() : undefined;
-        const options = { mode: deps.iconMode, theme: deps.theme };
-        bottom = renderInputBottom(
-          outerWidth,
-          deps.theme,
-          {
-            left: data ? formatModelSegments(data, options) : [],
-            right: data ? formatContextSegments(data, options) : [],
-          },
-          hidden,
-          renderFrame,
-          deps.iconMode,
-        );
-        return bottom;
-      },
-    },
-    handleMouse: {
-      configurable: true,
-      writable: true,
-      value(
-        this: EditorLike,
-        event: TuiMouseEvent,
-      ): TuiMouseEventResult | undefined {
-        const translated =
-          active && boxRendered
-            ? { ...event, x: event.x - 1, width: event.width - 2 }
-            : event;
-        return originals.handleMouse.call(this, translated);
-      },
-    },
-    borderColor: {
-      configurable: true,
-      get: () => (fallback ? originals.borderColor : muted),
-      set: () => {},
-    },
-  };
-  Object.defineProperties(editor, patches);
-  const decoration: EditorDecoration = {
-    getStatusSnapshot: () => (active ? deps.getStatusSnapshot?.() : undefined),
-    dispose() {
-      if (!active) return;
-      active = false;
-      for (const name of names) {
-        const current = Reflect.getOwnPropertyDescriptor(editor, name);
-        const patch = patches[name];
-        if (
-          current?.value !== patch.value ||
-          current?.get !== patch.get ||
-          current?.set !== patch.set
-        )
-          continue;
-        const descriptor = descriptors.get(name);
-        if (descriptor) Object.defineProperty(editor, name, descriptor);
-        else Reflect.deleteProperty(editor, name);
-      }
-      decoratedEditors.delete(editor);
-      decorations.delete(editor);
-    },
-  };
-  decoratedEditors.add(editor);
-  decorations.set(editor, decoration);
-  return decoration;
-}

package/src/input-box/frame.ts

@@ -1,182 +0,0 @@
-import { truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
-import type { IconMode } from '../shared/config.ts';
-import { icon } from '../shared/icons.ts';
-import type { ActiveThemeLike } from '../status-line/layout.ts';
-import { type BreathingFrame, colorBreathingBorder } from './gradient.ts';
-
-function muted(theme: ActiveThemeLike, text: string): string {
-  return theme.fg?.('muted', text) ?? text;
-}
-
-function colorBorder(
-  theme: ActiveThemeLike,
-  text: string,
-  frame?: BreathingFrame,
-): string {
-  return frame ? colorBreathingBorder(text, frame) : muted(theme, text);
-}
-
-/** Editor scroll indicator, `↑/↓ N more` or `^/v N more` by icon mode. */
-export function scrollLabel(
-  direction: 'up' | 'down',
-  hiddenLineCount: number,
-  mode: IconMode = 'nerd',
-): string {
-  const arrow = icon(direction === 'up' ? 'scrollUp' : 'scrollDown', mode);
-  return `${arrow} ${hiddenLineCount} more`;
-}
-
-export function inputLabelWidth(
-  width: number,
-  hiddenLineCount = 0,
-  mode: IconMode = 'nerd',
-): number {
-  const overflowWidth =
-    hiddenLineCount > 0
-      ? visibleWidth(scrollLabel('up', hiddenLineCount, mode)) + 3
-      : 0;
-  return Math.max(0, Math.floor(width) - 6 - overflowWidth);
-}
-
-/** Left pieces keep priority first; right variants run richest to most compact. */
-export interface BorderRegions {
-  left?: readonly string[];
-  right?: readonly string[];
-}
-
-// `╭─ ` + left + ` ─…─ ` + right + ` ─╮`: the rule keeps at least one cell.
-const LEFT_ONLY_OVERHEAD = 6;
-const LEFT_RIGHT_OVERHEAD = 9;
-const RIGHT_ONLY_OVERHEAD = 6;
-
-function renderBorder(
-  width: number,
-  theme: ActiveThemeLike,
-  regions: BorderRegions,
-  overflow: string,
-  capLeft: string,
-  capRight: string,
-  frame?: BreathingFrame,
-): string {
-  width = Math.max(0, Math.floor(width));
-  const border = (text: string) => colorBorder(theme, text, frame);
-  const pieces = (regions.left ?? []).filter((piece) => visibleWidth(piece));
-  const rights = (regions.right ?? []).filter((piece) => visibleWidth(piece));
-  const plain = () =>
-    truncateToWidth(
-      border(`${capLeft}${'─'.repeat(Math.max(0, width - 2))}${capRight}`),
-      width,
-      '',
-    );
-  if (width <= 5 || (!pieces.length && !overflow && !rights.length))
-    return plain();
-
-  const withOverflow = (text: string) =>
-    !overflow
-      ? text
-      : !text
-        ? muted(theme, overflow)
-        : frame
-          ? `${text}${border(' ─ ')}${muted(theme, overflow)}`
-          : `${text}${muted(theme, ` ─ ${overflow}`)}`;
-  const leftWith = (count: number) =>
-    withOverflow(pieces.slice(0, count).join(' '));
-
-  // Degrade right first (compact, then drop), then left secondaries.
-  const full = leftWith(pieces.length);
-  const fullWidth = visibleWidth(full);
-  for (const right of rights) {
-    const rightWidth = visibleWidth(right);
-    if (!full) {
-      if (rightWidth > width - RIGHT_ONLY_OVERHEAD) continue;
-      const dashes = width - 5 - rightWidth;
-      return `${border(`${capLeft}${'─'.repeat(dashes)} `)}${right}${border(` ─${capRight}`)}`;
-    }
-    if (fullWidth + rightWidth > width - LEFT_RIGHT_OVERHEAD) continue;
-    const dashes = width - 8 - fullWidth - rightWidth;
-    return `${border(`${capLeft}─ `)}${full}${border(` ${'─'.repeat(dashes)} `)}${right}${border(` ─${capRight}`)}`;
-  }
-  if (!full) return plain();
-
-  const labelWidth = width - LEFT_ONLY_OVERHEAD;
-  let label: string | undefined;
-  for (let count = pieces.length; count >= 1; count--) {
-    const candidate = leftWith(count);
-    if (visibleWidth(candidate) <= labelWidth) {
-      label = candidate;
-      break;
-    }
-  }
-  if (label === undefined) {
-    if (overflow) {
-      const statusWidth = labelWidth - visibleWidth(overflow) - 3;
-      const status =
-        statusWidth > 0 && pieces.length
-          ? truncateToWidth(pieces[0], statusWidth, '')
-          : '';
-      label = withOverflow(visibleWidth(status) ? status : '');
-    } else {
-      label = truncateToWidth(pieces[0], labelWidth, '');
-    }
-  }
-  const fitted = truncateToWidth(label, labelWidth, '');
-  const dashes = width - visibleWidth(fitted) - 5;
-  return `${border(`${capLeft}─ `)}${fitted}${border(` ${'─'.repeat(dashes)}${capRight}`)}`;
-}
-
-export function renderInputTop(
-  width: number,
-  theme: ActiveThemeLike,
-  regions: BorderRegions,
-  hiddenLineCount = 0,
-  frame?: BreathingFrame,
-  mode: IconMode = 'nerd',
-): string {
-  const overflow =
-    hiddenLineCount > 0 ? scrollLabel('up', hiddenLineCount, mode) : '';
-  return renderBorder(width, theme, regions, overflow, '╭', '╮', frame);
-}
-
-export function renderInputBottom(
-  width: number,
-  theme: ActiveThemeLike,
-  regions: BorderRegions,
-  hiddenLineCount = 0,
-  frame?: BreathingFrame,
-  mode: IconMode = 'nerd',
-): string {
-  const overflow =
-    hiddenLineCount > 0 ? scrollLabel('down', hiddenLineCount, mode) : '';
-  return renderBorder(width, theme, regions, overflow, '╰', '╯', frame);
-}
-
-export function wrapContentRow(
-  line: string,
-  width: number,
-  theme: ActiveThemeLike,
-  frame?: BreathingFrame,
-): string {
-  width = Math.max(0, Math.floor(width));
-  if (width < 2)
-    return truncateToWidth(colorBorder(theme, '││', frame), width, '');
-  const content = truncateToWidth(line, width - 2, '', true);
-  const side = colorBorder(theme, '│', frame);
-  return `${side}${content}${side}`;
-}
-
-export function renderPlaceholder(
-  line: string,
-  width: number,
-  theme: ActiveThemeLike,
-  text: string,
-): string {
-  if (text !== '') return line;
-  const cursor = '\x1b[7m \x1b[0m';
-  const cursorStart = line.indexOf(cursor);
-  if (cursorStart < 0) return line;
-  const prefix = line.slice(0, cursorStart + cursor.length);
-  const available = Math.max(0, width - visibleWidth(prefix));
-  const placeholder = truncateToWidth('type or / for commands', available, '');
-  const padding = ' '.repeat(available - visibleWidth(placeholder));
-  return prefix + (theme.fg?.('dim', placeholder) ?? placeholder) + padding;
-}

package/src/input-box/gradient.ts

@@ -1,92 +0,0 @@
-import {
-  foregroundAnsi,
-  getTerminalColorMode,
-  mixColors,
-  parseColor,
-  stripTerminalSequences,
-  styleText,
-  type TerminalColorMode,
-} from '@earendil-works/pi-tui';
-import { frames } from '../shared/icons.ts';
-
-const GOLD = parseColor('#D4AF37');
-const BRIGHT_GOLD = parseColor('#F2C94C');
-const DIM = parseColor('#736850');
-const MUTED = parseColor('#A89A78');
-const BREATHING_CYCLE_MS = 2400;
-const SHIMMER_LAP_MS = 2400;
-const SHIMMER_BAND_CELLS = 3;
-
-export interface BreathingFrame {
-  now: number;
-  foreground: string;
-  mode: TerminalColorMode;
-}
-
-export function createBreathingFrame(
-  now: number,
-  mode = getTerminalColorMode(),
-): BreathingFrame {
-  const phase = ((now % BREATHING_CYCLE_MS) / BREATHING_CYCLE_MS) * 2 * Math.PI;
-  const intensity = (1 - Math.cos(phase)) / 2;
-  const color =
-    intensity <= 0.5
-      ? mixColors(DIM, GOLD, intensity * 2, 'srgb')
-      : mixColors(GOLD, BRIGHT_GOLD, (intensity - 0.5) * 2, 'srgb');
-  return { now, foreground: foregroundAnsi(color, mode), mode };
-}
-
-// Only call with generated border segments, never label or editor content.
-export function colorBreathingBorder(
-  text: string,
-  frame: BreathingFrame,
-): string {
-  return `${frame.foreground}${text}\x1b[39m`;
-}
-
-export function renderWorkingIndicator(
-  native: string,
-  frame: BreathingFrame,
-  styleMuted: (text: string) => string,
-  glyphs: readonly string[] = frames('workingFrames', 'nerd'),
-): string {
-  const plain = stripTerminalSequences(native);
-  const glyph = glyphs.find(
-    (candidate) =>
-      plain.startsWith(candidate) &&
-      (plain.length === candidate.length ||
-        /^\s/u.test(plain.slice(candidate.length))),
-  );
-  const spacing =
-    glyph === undefined
-      ? ''
-      : (/^\s*/u.exec(plain.slice(glyph.length))?.[0] ?? '');
-  const prefix =
-    glyph === undefined ? '' : `${frame.foreground}${glyph}${spacing}`;
-  const letters = Array.from(
-    plain.slice(glyph === undefined ? 0 : glyph.length + spacing.length),
-  );
-  const head =
-    ((frame.now % SHIMMER_LAP_MS) / SHIMMER_LAP_MS) *
-      (letters.length + SHIMMER_BAND_CELLS * 2) -
-    SHIMMER_BAND_CELLS;
-  const label = letters
-    .map((letter, index) => {
-      const intensity = Math.max(
-        0,
-        1 - Math.abs(index - head) / SHIMMER_BAND_CELLS,
-      );
-      return intensity === 0
-        ? styleMuted(letter)
-        : styleText(
-            letter,
-            {
-              fg: mixColors(MUTED, BRIGHT_GOLD, intensity, 'srgb'),
-              bold: intensity >= 0.65,
-            },
-            frame.mode,
-          );
-    })
-    .join('');
-  return prefix + label;
-}