@vybestack/llxprt-ui 0.7.0-nightly.251214.7c8736a50 → 0.7.0-nightly.251215.66bf0bc39

package/scripts/visual-header-demo.ts

@@ -0,0 +1,99 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createCliRenderer } from '@vybestack/opentui-core';
+import {
+  BoxRenderable,
+  ImageRenderable,
+  TextRenderable,
+} from '@vybestack/opentui-core';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+type CliRenderer = Awaited<ReturnType<typeof createCliRenderer>>;
+
+function formatError(err: unknown): string {
+  if (err instanceof Error) {
+    return err.stack ?? err.message;
+  }
+
+  return String(err);
+}
+
+async function main(): Promise<void> {
+  const logoPath = path.resolve(__dirname, '../llxprt.png');
+  let logo: Buffer;
+
+  try {
+    logo = readFileSync(logoPath);
+  } catch (err) {
+    throw new Error(`Failed to read logo: ${logoPath}\n${formatError(err)}`);
+  }
+
+  const bg = '#fafafa';
+  const border = '#2d7d46';
+  const fg = '#222222';
+
+  let renderer: CliRenderer | undefined;
+  try {
+    renderer = await createCliRenderer({
+      useAlternateScreen: false,
+      exitOnCtrlC: false,
+    });
+
+    const header = new BoxRenderable(renderer, {
+      id: 'header',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      border: true,
+      height: 3,
+      minHeight: 3,
+      maxHeight: 3,
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 1,
+      paddingRight: 1,
+      borderColor: border,
+      backgroundColor: bg,
+    });
+
+    const logoAspectRatio = 415 / 260;
+    const image = new ImageRenderable(renderer, {
+      id: 'logo',
+      src: logo,
+      height: 1,
+      aspectRatio: logoAspectRatio,
+      fit: 'contain',
+      backgroundColor: bg,
+    });
+
+    const title = new TextRenderable(renderer, {
+      id: 'title',
+      content: "LLxprt Code - I'm here to help",
+      marginLeft: 1,
+      fg,
+    });
+
+    header.add(image);
+    header.add(title);
+    renderer.root.add(header);
+
+    renderer.start();
+
+    // Give pixel resolution a moment to arrive and settle any re-layout.
+    await new Promise((r) => setTimeout(r, 1500));
+    renderer.pause();
+
+    // Keep the frame visible for capture.
+    await new Promise((r) => setTimeout(r, 6000));
+  } finally {
+    renderer?.destroy();
+  }
+}
+
+await main().catch((err: unknown) => {
+  process.stderr.write(`visual-header-demo failed:\n${formatError(err)}\n`);
+  process.exit(1);
+});

package/scripts/visual-regression.sh

@@ -0,0 +1,187 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+UNAME="$(uname)"
+if [[ "${UNAME}" != "Darwin" ]]; then
+  echo "Error: visual regression capture requires macOS." >&2
+  exit 2
+fi
+
+for cmd in osascript swift screencapture magick python3; do
+  if ! command -v "${cmd}" >/dev/null 2>&1; then
+    echo "Error: required command not found: ${cmd}" >&2
+    exit 2
+  fi
+done
+
+ITERM_APP_PATH="${LLXPRT_UI_ITERM_APP_PATH:-/Applications/iTerm2.app}"
+if [[ ! -d "${ITERM_APP_PATH}" ]]; then
+  echo "Error: iTerm2 is not installed at ${ITERM_APP_PATH}" >&2
+  echo "Install iTerm2 or set LLXPRT_UI_ITERM_APP_PATH to the correct path." >&2
+  exit 2
+fi
+
+ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/../../.." && pwd)"
+
+UPDATE_BASELINE=0
+if [[ "${1:-}" == "--update-baseline" ]]; then
+  UPDATE_BASELINE=1
+fi
+
+ARTIFACTS_DIR="${ROOT_DIR}/packages/ui/visual-artifacts"
+BASELINES_DIR="${ROOT_DIR}/packages/ui/visual-baselines"
+BASELINE_PATH="${BASELINES_DIR}/header.png"
+
+mkdir -p "${ARTIFACTS_DIR}"
+mkdir -p "${BASELINES_DIR}"
+
+RAW_PATH="${ARTIFACTS_DIR}/header-raw.png"
+CROP_PATH="${ARTIFACTS_DIR}/header-crop.png"
+DIFF_PATH="${ARTIFACTS_DIR}/header-diff.png"
+
+# Window size (in points as used by macOS UI scripting).
+WINDOW_SIZE="${LLXPRT_UI_VISUAL_WINDOW_SIZE:-1400,650}"
+# Crop within the captured window: y,height
+CROP_Y="${LLXPRT_UI_VISUAL_CROP_Y:-80}"
+CROP_H="${LLXPRT_UI_VISUAL_CROP_H:-220}"
+STARTUP_DELAY="${LLXPRT_UI_VISUAL_DELAY_SEC:-2}"
+
+IFS=',' read -r WIN_W WIN_H <<< "${WINDOW_SIZE}"
+
+if [[ -z "${WIN_W}" || -z "${WIN_H}" ]]; then
+  echo "Invalid LLXPRT_UI_VISUAL_WINDOW_SIZE: '${WINDOW_SIZE}'" >&2
+  exit 2
+fi
+
+COMMAND="cd ${ROOT_DIR} && bun run packages/ui/scripts/visual-header-demo.ts"
+
+WINDOW_ID="$(osascript <<APPLESCRIPT
+on run
+  set winW to ${WIN_W}
+  set winH to ${WIN_H}
+  set cmd to "${COMMAND}"
+
+  tell application "iTerm2"
+    activate
+    set demoWindow to (create window with default profile)
+    tell current session of demoWindow
+      write text cmd
+    end tell
+    set demoId to id of demoWindow
+  end tell
+
+  delay ${STARTUP_DELAY}
+
+  tell application "System Events"
+    tell process "iTerm2"
+      set frontmost to true
+      set size of front window to {winW, winH}
+    end tell
+  end tell
+
+  return demoId
+end run
+APPLESCRIPT
+)"
+
+cleanup() {
+  if [[ -n "${WINDOW_ID:-}" ]]; then
+    osascript -e "tell application \"iTerm2\" to close (first window whose id is ${WINDOW_ID})" >/dev/null 2>&1 || true
+  fi
+}
+trap cleanup EXIT
+
+if [[ -z "${WINDOW_ID}" ]]; then
+  echo "Failed to create iTerm2 window for visual capture." >&2
+  exit 2
+fi
+
+BOUNDS="$(swift - <<SWIFT
+import Foundation
+import CoreGraphics
+
+let target = ${WINDOW_ID}
+let options: CGWindowListOption = [.optionOnScreenOnly, .excludeDesktopElements]
+let infoList = CGWindowListCopyWindowInfo(options, kCGNullWindowID) as? [[String: Any]] ?? []
+
+for info in infoList {
+  let owner = info[kCGWindowOwnerName as String] as? String ?? ""
+  if owner != "iTerm" { continue }
+  guard let number = info[kCGWindowNumber as String] as? Int, number == target else { continue }
+  guard let bounds = info[kCGWindowBounds as String] as? [String: Any] else { continue }
+  let x = bounds["X"] as? Int ?? 0
+  let y = bounds["Y"] as? Int ?? 0
+  let w = bounds["Width"] as? Int ?? 0
+  let h = bounds["Height"] as? Int ?? 0
+  print("\\(x),\\(y),\\(w),\\(h)")
+  break
+}
+SWIFT
+)"
+
+if [[ -z "${BOUNDS}" ]]; then
+  echo "Failed to locate iTerm window bounds for window id ${WINDOW_ID}." >&2
+  echo "Make sure iTerm2 is running and Accessibility permissions are granted." >&2
+  exit 2
+fi
+
+IFS=',' read -r WIN_X WIN_Y WIN_W_FOUND WIN_H_FOUND <<< "${BOUNDS}"
+if [[ -z "${WIN_X}" || -z "${WIN_Y}" || -z "${WIN_W_FOUND}" || -z "${WIN_H_FOUND}" ]]; then
+  echo "Failed to parse window bounds: '${BOUNDS}'" >&2
+  exit 2
+fi
+
+# Capture the window region by coordinates (more reliable than -l on some setups).
+screencapture -x -R "${WIN_X},${WIN_Y},${WIN_W_FOUND},${WIN_H_FOUND}" "${RAW_PATH}"
+
+magick "${RAW_PATH}" -crop "${WIN_W_FOUND}x${CROP_H}+0+${CROP_Y}" +repage "${CROP_PATH}"
+
+# Sanity-check the capture contains the expected green border (avoid saving wallpaper/blank captures).
+GREEN_FRACTION="$(magick "${CROP_PATH}" -alpha off -fuzz 10% -fill white -opaque "#2d7d46" -fill black +opaque "#2d7d46" -colorspace Gray -format "%[fx:mean]" info:)"
+if [[ -z "${GREEN_FRACTION}" ]]; then
+  echo "Failed to compute capture sanity check metric" >&2
+  exit 2
+fi
+python3 - <<PY
+import sys
+fraction=float("${GREEN_FRACTION}")
+if fraction < 0.0005:
+  sys.stderr.write(f"Capture sanity check failed for ${CROP_PATH} (green border fraction={fraction}).\\n")
+  sys.stderr.write("This usually means macOS Screen Recording permission is missing for your terminal/shell.\\n")
+  sys.exit(2)
+PY
+
+if [[ "${UPDATE_BASELINE}" -eq 1 ]]; then
+  cp "${CROP_PATH}" "${BASELINE_PATH}"
+  echo "Updated baseline: ${BASELINE_PATH}"
+  trap - EXIT
+  cleanup
+  exit 0
+fi
+
+if [[ ! -f "${BASELINE_PATH}" ]]; then
+  echo "Baseline not found: ${BASELINE_PATH}" >&2
+  echo "Run: LLXPRT_UI_VISUAL_WINDOW_SIZE='${WINDOW_SIZE}' $(basename "${BASH_SOURCE[0]}") --update-baseline" >&2
+  exit 2
+fi
+
+set +e
+METRIC="$(magick compare -metric AE "${BASELINE_PATH}" "${CROP_PATH}" "${DIFF_PATH}" 2>&1)"
+STATUS=$?
+set -e
+
+if [[ "${STATUS}" -eq 0 ]]; then
+  echo "Visual regression passed"
+  trap - EXIT
+  cleanup
+  exit 0
+fi
+
+echo "Visual regression failed: ${METRIC} differing pixels"
+echo "Artifacts:"
+echo "  baseline: ${BASELINE_PATH}"
+echo "  current : ${CROP_PATH}"
+echo "  diff    : ${DIFF_PATH}"
+trap - EXIT
+cleanup
+exit 1

package/src/ui/components/HeaderBar.tsx

@@ -1,27 +1,12 @@
 import { existsSync } from 'node:fs';
-import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import React from 'react';
-import { useRenderer } from '@vybestack/opentui-react';
-import { useEffect, useState } from 'react';
 import type { ThemeDefinition } from '../../features/theme';
-import { getLogger } from '../../lib/logger';
 
-const logger = getLogger('nui:headerbar');
-
-// Get the directory of this source file, then navigate to the logo
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const LOGO_PATH = path.resolve(__dirname, '../../../llxprt.png');
-
-logger.debug('HeaderBar module loaded', {
-  __filename,
-  __dirname,
-  LOGO_PATH,
-  logoExists: existsSync(LOGO_PATH),
-});
-const LOGO_PX_WIDTH = 150;
-const LOGO_PX_HEIGHT = 90;
+const DEFAULT_LOGO_PATH = fileURLToPath(
+  new URL('../../../llxprt.png', import.meta.url),
+);
+const LOGO_ASPECT_RATIO = 415 / 260;
 
 interface HeaderBarProps {
   readonly text: string;
@@ -29,74 +14,13 @@ interface HeaderBarProps {
 }
 
 export function HeaderBar({ text, theme }: HeaderBarProps): React.ReactNode {
-  const renderer = useRenderer();
-
-  const caps = renderer.capabilities as {
-    pixelResolution?: { width: number; height: number };
-  } | null;
-  const resolution = caps?.pixelResolution ?? renderer.resolution ?? null;
-  const cellMetrics = renderer.getCellMetrics() ?? null;
-
-  // Log graphics support and resolution detection
-  logger.debug('HeaderBar render', {
-    graphicsSupport: renderer.graphicsSupport,
-    termProgram: process.env.TERM_PROGRAM,
-    term: process.env.TERM,
-    resolution,
-    cellMetrics,
-    rendererResolution: renderer.resolution,
-    terminalWidth: renderer.terminalWidth,
-    terminalHeight: renderer.terminalHeight,
-  });
-  const [, setTick] = useState(0);
-
-  useEffect(() => {
-    const refresh = () => setTick((t) => t + 1);
-    renderer.on('capabilities', refresh);
-    renderer.on('pixelResolution', refresh);
-    renderer.on('resize', refresh);
-    return () => {
-      renderer.off('capabilities', refresh);
-      renderer.off('pixelResolution', refresh);
-      renderer.off('resize', refresh);
-    };
-  }, [renderer]);
-
-  const pxPerCellX =
-    resolution && renderer.terminalWidth > 0
-      ? resolution.width / renderer.terminalWidth
-      : null;
-  const pxPerCellY =
-    resolution && renderer.terminalHeight > 0
-      ? resolution.height / renderer.terminalHeight
-      : null;
-  const desiredCellHeight = 2;
-  const scaleFactor = 0.9; // modest shrink to keep it inside the border
-  const fallbackPxPerCellX = 9;
-  const fallbackPxPerCellY = 20;
-  const scaledPixelHeight = Math.round(
-    pxPerCellY != null
-      ? Math.min(
-          LOGO_PX_HEIGHT * scaleFactor,
-          pxPerCellY * desiredCellHeight * scaleFactor,
-        )
-      : LOGO_PX_HEIGHT * scaleFactor,
-  );
-  const scaledPixelWidth = Math.max(
-    1,
-    Math.round((scaledPixelHeight * LOGO_PX_WIDTH) / LOGO_PX_HEIGHT),
-  );
-  const effPxPerCellX = pxPerCellX ?? fallbackPxPerCellX;
-  const effPxPerCellY = pxPerCellY ?? fallbackPxPerCellY;
-  const logoWidthCells = Math.max(
-    1,
-    Math.ceil(scaledPixelWidth / effPxPerCellX),
-  );
-  const logoHeightCells = Math.max(
-    1,
-    Math.ceil(scaledPixelHeight / effPxPerCellY),
+  const headerHeight = 3;
+  const themeLogoPath = fileURLToPath(
+    new URL(`../../../logos/${theme.slug}.png`, import.meta.url),
   );
-  const headerHeight = Math.max(logoHeightCells + 1, 3);
+  const logoPath = existsSync(themeLogoPath)
+    ? themeLogoPath
+    : DEFAULT_LOGO_PATH;
 
   return (
     <box
@@ -113,22 +37,20 @@ export function HeaderBar({ text, theme }: HeaderBarProps): React.ReactNode {
         backgroundColor: theme.colors.panel.headerBg ?? theme.colors.panel.bg,
         alignItems: 'center',
         flexDirection: 'row',
-        gap: 0,
         justifyContent: 'flex-start',
       }}
     >
       <image
-        src={LOGO_PATH}
+        src={logoPath}
         alt="LLxprt Code"
-        width={logoWidthCells}
-        height={logoHeightCells}
-        pixelWidth={scaledPixelWidth}
-        pixelHeight={scaledPixelHeight}
+        height={1}
+        aspectRatio={LOGO_ASPECT_RATIO}
+        backgroundColor={theme.colors.panel.headerBg ?? theme.colors.panel.bg}
         style={{ marginRight: 1 }}
       />
       <text
         fg={theme.colors.panel.headerFg ?? theme.colors.text.primary}
-        style={{ marginLeft: 1, alignSelf: 'center' }}
+        style={{ alignSelf: 'center' }}
       >
         {text}
       </text>