@owloops/claude-powerline 1.24.4 → 1.25.1

package/src/tui/layouts.ts

@@ -0,0 +1,285 @@
+import type { RenderCtx } from "./types";
+
+import { formatCost } from "../utils/formatters";
+import {
+  contentRow,
+  divider,
+  spreadEven,
+  spreadTwo,
+  colorize,
+} from "./primitives";
+import {
+  collectMetricSegments,
+  collectActivityParts,
+  collectWorkspaceParts,
+  collectFooterParts,
+  formatBlockSegment,
+  formatWeeklySegment,
+  formatSessionSegment,
+  formatTodaySegment,
+} from "./sections";
+
+// --- Wide layout (80+ cols): metrics on 1 line, workspace+footer on 1 line ---
+
+export function renderWideMetrics(ctx: RenderCtx): void {
+  const {
+    lines,
+    data,
+    box,
+    contentWidth,
+    innerWidth,
+    sym,
+    config,
+    reset,
+    colors,
+  } = ctx;
+  const segments = collectMetricSegments(data, sym, config, reset, colors);
+  if (segments.length > 0) {
+    lines.push(contentRow(box, spreadEven(segments, contentWidth), innerWidth));
+  }
+}
+
+export function renderWideBottom(ctx: RenderCtx): void {
+  const {
+    lines,
+    data,
+    box,
+    contentWidth,
+    innerWidth,
+    sym,
+    config,
+    reset,
+    colors,
+  } = ctx;
+  const leftParts = collectWorkspaceParts(data, sym, reset, colors);
+  const rightParts = collectFooterParts(data, sym, config, reset, colors);
+
+  const leftStr = leftParts.join("  ");
+  const rightStr = rightParts.join(" · ");
+
+  if (leftStr || rightStr) {
+    lines.push(divider(box, innerWidth));
+    lines.push(
+      contentRow(box, spreadTwo(leftStr, rightStr, contentWidth), innerWidth),
+    );
+  }
+}
+
+// --- Medium layout (55-79 cols): metrics on 2 lines, workspace and footer separate ---
+
+export function renderMediumMetrics(ctx: RenderCtx): void {
+  const {
+    lines,
+    data,
+    box,
+    contentWidth,
+    innerWidth,
+    sym,
+    config,
+    reset,
+    colors,
+  } = ctx;
+  const line1Parts: string[] = [];
+  const line2Parts: string[] = [];
+
+  if (data.blockInfo) {
+    line1Parts.push(
+      colorize(
+        formatBlockSegment(data.blockInfo, sym, config),
+        colors.blockFg,
+        reset,
+      ),
+    );
+  }
+  const sevenDay = data.hookData.rate_limits?.seven_day;
+  if (sevenDay) {
+    line1Parts.push(
+      colorize(formatWeeklySegment(sevenDay, sym), colors.weeklyFg, reset),
+    );
+  }
+  if (data.todayInfo) {
+    line1Parts.push(
+      colorize(
+        formatTodaySegment(data.todayInfo, sym, config),
+        colors.todayFg,
+        reset,
+      ),
+    );
+  }
+
+  if (data.usageInfo) {
+    line2Parts.push(
+      colorize(
+        formatSessionSegment(data.usageInfo, sym, config),
+        colors.sessionFg,
+        reset,
+      ),
+    );
+  }
+  const activityParts = collectActivityParts(data, sym);
+  if (activityParts.length > 0) {
+    line2Parts.push(
+      colorize(activityParts.join(" · "), colors.metricsFg, reset),
+    );
+  }
+
+  if (line1Parts.length > 0) {
+    lines.push(
+      contentRow(box, spreadEven(line1Parts, contentWidth), innerWidth),
+    );
+  }
+  if (line2Parts.length > 0) {
+    lines.push(
+      contentRow(
+        box,
+        spreadTwo(line2Parts[0] ?? "", line2Parts[1] ?? "", contentWidth),
+        innerWidth,
+      ),
+    );
+  }
+}
+
+export function renderMediumBottom(ctx: RenderCtx): void {
+  const {
+    lines,
+    data,
+    box,
+    contentWidth,
+    innerWidth,
+    sym,
+    config,
+    reset,
+    colors,
+  } = ctx;
+  const workspaceParts = collectWorkspaceParts(data, sym, reset, colors);
+  if (workspaceParts.length > 0) {
+    lines.push(divider(box, innerWidth));
+    lines.push(
+      contentRow(
+        box,
+        spreadTwo(
+          workspaceParts[0] ?? "",
+          workspaceParts[1] ?? "",
+          contentWidth,
+        ),
+        innerWidth,
+      ),
+    );
+  }
+
+  const footerParts = collectFooterParts(data, sym, config, reset, colors);
+  if (footerParts.length > 0) {
+    lines.push(divider(box, innerWidth));
+    lines.push(contentRow(box, footerParts.join(" · "), innerWidth));
+  }
+}
+
+// --- Narrow layout (<55 cols): everything stacks ---
+
+export function renderNarrowMetrics(ctx: RenderCtx): void {
+  const {
+    lines,
+    data,
+    box,
+    contentWidth,
+    innerWidth,
+    sym,
+    config,
+    reset,
+    colors,
+  } = ctx;
+  if (data.blockInfo) {
+    lines.push(
+      contentRow(
+        box,
+        colorize(
+          formatBlockSegment(data.blockInfo, sym, config),
+          colors.blockFg,
+          reset,
+        ),
+        innerWidth,
+      ),
+    );
+  }
+  const narrowSevenDay = data.hookData.rate_limits?.seven_day;
+  if (narrowSevenDay) {
+    lines.push(
+      contentRow(
+        box,
+        colorize(
+          formatWeeklySegment(narrowSevenDay, sym),
+          colors.weeklyFg,
+          reset,
+        ),
+        innerWidth,
+      ),
+    );
+  }
+
+  const sessionAndToday: string[] = [];
+  if (data.usageInfo) {
+    sessionAndToday.push(
+      colorize(
+        `${sym.session_cost} ${formatCost(data.usageInfo.session.cost)}`,
+        colors.sessionFg,
+        reset,
+      ),
+    );
+  }
+  if (data.todayInfo) {
+    sessionAndToday.push(
+      colorize(
+        `${sym.today_cost} ${formatCost(data.todayInfo.cost)} today`,
+        colors.todayFg,
+        reset,
+      ),
+    );
+  }
+  if (sessionAndToday.length > 0) {
+    lines.push(
+      contentRow(
+        box,
+        spreadTwo(
+          sessionAndToday[0] ?? "",
+          sessionAndToday[1] ?? "",
+          contentWidth,
+        ),
+        innerWidth,
+      ),
+    );
+  }
+}
+
+export function renderNarrowBottom(ctx: RenderCtx): void {
+  const {
+    lines,
+    data,
+    box,
+    contentWidth,
+    innerWidth,
+    sym,
+    config,
+    reset,
+    colors,
+  } = ctx;
+  const workspaceParts = collectWorkspaceParts(data, sym, reset, colors);
+  if (workspaceParts.length > 0) {
+    lines.push(divider(box, innerWidth));
+    lines.push(
+      contentRow(
+        box,
+        spreadTwo(
+          workspaceParts[0] ?? "",
+          workspaceParts[1] ?? "",
+          contentWidth,
+        ),
+        innerWidth,
+      ),
+    );
+  }
+
+  const footerParts = collectFooterParts(data, sym, config, reset, colors);
+  if (footerParts.length > 0) {
+    lines.push(contentRow(box, footerParts.join(" · "), innerWidth));
+  }
+}

package/src/tui/primitives.ts

@@ -0,0 +1,175 @@
+import type { BoxChars } from "./types";
+
+import { visibleLength, stripAnsi, ESC, ANSI_SPLIT } from "../utils/terminal";
+
+export function colorize(text: string, fgColor: string, reset: string): string {
+  if (!fgColor) {
+    return text;
+  }
+  return `${fgColor}${text}${reset}`;
+}
+
+export function padRight(text: string, width: number): string {
+  const visible = visibleLength(text);
+  if (visible >= width) {
+    return text;
+  }
+  return text + " ".repeat(width - visible);
+}
+
+export function padLeft(text: string, width: number): string {
+  const visible = visibleLength(text);
+  if (visible >= width) {
+    return text;
+  }
+  return " ".repeat(width - visible) + text;
+}
+
+export function padCenter(text: string, width: number): string {
+  const visible = visibleLength(text);
+  if (visible >= width) {
+    return text;
+  }
+  const totalPad = width - visible;
+  const leftPad = Math.floor(totalPad / 2);
+  const rightPad = totalPad - leftPad;
+  return " ".repeat(leftPad) + text + " ".repeat(rightPad);
+}
+
+export function truncateAnsi(text: string, maxWidth: number): string {
+  if (stripAnsi(text).length <= maxWidth) {
+    return text;
+  }
+
+  let width = 0;
+  let result = "";
+  const parts = text.split(ANSI_SPLIT);
+  for (const part of parts) {
+    if (part.startsWith(ESC)) {
+      result += part;
+      continue;
+    }
+    for (const char of part) {
+      if (width >= maxWidth - 1) {
+        result += "…\x1b[0m";
+        return result;
+      }
+      result += char;
+      width++;
+    }
+  }
+  return result;
+}
+
+export function contentRow(
+  box: BoxChars,
+  content: string,
+  innerWidth: number,
+): string {
+  const maxContent = innerWidth - 2;
+  const truncated = truncateAnsi(content, maxContent);
+  const padded = padRight(truncated, maxContent);
+  return box.vertical + " " + padded + " " + box.vertical;
+}
+
+export function divider(box: BoxChars, innerWidth: number): string {
+  return box.teeLeft + box.horizontal.repeat(innerWidth) + box.teeRight;
+}
+
+export function bottomBorder(
+  box: BoxChars,
+  innerWidth: number,
+  leftText?: string,
+  rightText?: string,
+): string {
+  if (!leftText && !rightText) {
+    return box.bottomLeft + box.horizontal.repeat(innerWidth) + box.bottomRight;
+  }
+
+  let left = leftText ? ` ${leftText} ` : "";
+  let right = rightText ? ` ${rightText} ` : "";
+  let leftLen = visibleLength(left);
+  let rightLen = visibleLength(right);
+
+  // Truncate if combined text exceeds innerWidth
+  if (leftLen + rightLen > innerWidth) {
+    const maxLeft = Math.max(0, innerWidth - rightLen);
+    if (leftLen > maxLeft) {
+      left = truncateAnsi(left, maxLeft);
+      leftLen = visibleLength(left);
+    }
+    if (leftLen + rightLen > innerWidth) {
+      const maxRight = Math.max(0, innerWidth - leftLen);
+      right = truncateAnsi(right, maxRight);
+      rightLen = visibleLength(right);
+    }
+  }
+
+  const fillCount = innerWidth - leftLen - rightLen;
+
+  return (
+    box.bottomLeft +
+    left +
+    box.horizontal.repeat(Math.max(0, fillCount)) +
+    right +
+    box.bottomRight
+  );
+}
+
+export function spreadEven(parts: string[], totalWidth: number): string {
+  if (parts.length === 0) {
+    return "";
+  }
+  if (parts.length === 1) {
+    return parts[0] ?? "";
+  }
+
+  const widths = parts.map((p) => visibleLength(p));
+  const totalContentWidth = widths.reduce((sum, w) => sum + w, 0);
+  const totalGap = totalWidth - totalContentWidth;
+  const gapPerSlot = Math.max(2, Math.floor(totalGap / (parts.length - 1)));
+
+  const suffixWidths = Array.from<number>({ length: parts.length });
+  suffixWidths[parts.length - 1] = widths[parts.length - 1] ?? 0;
+  for (let i = parts.length - 2; i >= 0; i--) {
+    suffixWidths[i] = (suffixWidths[i + 1] ?? 0) + (widths[i] ?? 0);
+  }
+
+  let result = parts[0] ?? "";
+  let usedWidth = widths[0] ?? 0;
+  for (let i = 1; i < parts.length; i++) {
+    const remaining =
+      totalWidth -
+      usedWidth -
+      (suffixWidths[i] ?? 0) -
+      (parts.length - 1 - i) * 2;
+    const gap = Math.max(2, Math.min(gapPerSlot, remaining));
+    result += " ".repeat(gap) + (parts[i] ?? "");
+    usedWidth += gap + (widths[i] ?? 0);
+  }
+
+  return result;
+}
+
+export function spreadTwo(
+  left: string,
+  right: string,
+  totalWidth: number,
+): string {
+  if (!right) {
+    return left;
+  }
+  if (!left) {
+    return right;
+  }
+
+  const leftLen = visibleLength(left);
+  const rightLen = visibleLength(right);
+  const gap = totalWidth - leftLen - rightLen;
+
+  if (gap < 2) {
+    return `${left}  ${right}`;
+  }
+
+  return left + " ".repeat(gap) + right;
+}

package/src/tui/renderer.ts

@@ -0,0 +1,206 @@
+import type { PowerlineConfig } from "../config/loader";
+import type { TuiData, BoxChars, LayoutMode, RenderCtx } from "./types";
+
+import { SYMBOLS, TEXT_SYMBOLS, BOX_PRESETS } from "../utils/constants";
+import { contentRow, bottomBorder } from "./primitives";
+import {
+  buildTitleBar,
+  buildContextLine,
+  buildContextBar,
+  buildBlockBar,
+  buildWeeklyBar,
+  resolveSegments,
+  composeTemplate,
+  resolveTitleToken,
+} from "./sections";
+import {
+  renderWideMetrics,
+  renderWideBottom,
+  renderMediumMetrics,
+  renderMediumBottom,
+  renderNarrowMetrics,
+  renderNarrowBottom,
+} from "./layouts";
+import { renderGrid } from "./grid";
+
+// Synchronized Output (DEC mode 2026): prevents tearing on multi-line renders.
+// Terminals that don't support it silently ignore these sequences.
+const SYNC_START = "\x1b[?2026h";
+const SYNC_END = "\x1b[?2026l";
+
+// No-op ANSI reset prepended to each line to prevent leading whitespace stripping.
+// Claude Code's status line renderer strips leading spaces, but ANSI sequences at the
+// start of a line protect subsequent whitespace from being trimmed.
+const WS_GUARD = "\x1b[0m";
+
+const MIN_PANEL_WIDTH = 32;
+const WIDE_THRESHOLD = 80;
+const MEDIUM_THRESHOLD = 55;
+
+function getLayoutMode(panelWidth: number): LayoutMode {
+  if (panelWidth >= WIDE_THRESHOLD) {
+    return "wide";
+  }
+  if (panelWidth >= MEDIUM_THRESHOLD) {
+    return "medium";
+  }
+  return "narrow";
+}
+
+function calculatePanelWidth(terminalWidth: number | null): number {
+  if (terminalWidth && terminalWidth > 0) {
+    return Math.max(MIN_PANEL_WIDTH, terminalWidth);
+  }
+  return 80;
+}
+
+export interface TuiPanelOptions {
+  rawTerminalWidth?: number | null;
+}
+
+export async function renderTuiPanel(
+  data: TuiData,
+  box: BoxChars,
+  reset: string,
+  terminalWidth: number | null,
+  config: PowerlineConfig,
+  options?: TuiPanelOptions,
+): Promise<string> {
+  const sym =
+    (config.display.charset || "unicode") === "text" ? TEXT_SYMBOLS : SYMBOLS;
+  const colors = data.colors;
+
+  // Grid path: when display.tui grid config is present
+  if (config.display.tui) {
+    const gridConfig = config.display.tui;
+    const rawWidth =
+      gridConfig.terminalWidth ?? options?.rawTerminalWidth ?? 120;
+
+    // Merge box character overrides with charset defaults
+    // Resolve box preset name or merge partial overrides with charset defaults
+    let mergedBox: BoxChars;
+    if (typeof gridConfig.box === "string") {
+      mergedBox = BOX_PRESETS[gridConfig.box] ?? box;
+    } else {
+      mergedBox = gridConfig.box ? { ...box, ...gridConfig.box } : box;
+    }
+
+    // Estimate content width for initial segment resolution (grid will compute final widths)
+    const estPanelWidth = Math.max(
+      gridConfig.minWidth ?? MIN_PANEL_WIDTH,
+      rawWidth - (gridConfig.widthReserve ?? 45),
+    );
+    const estInnerWidth = estPanelWidth - 2;
+    const estContentWidth = estInnerWidth - 2;
+
+    const ctx: RenderCtx = {
+      lines: [],
+      data,
+      box: mergedBox,
+      contentWidth: estContentWidth,
+      innerWidth: estInnerWidth,
+      sym,
+      config,
+      reset,
+      colors,
+    };
+    const resolved = resolveSegments(data, ctx);
+    const resolvedData = resolved.data;
+    const templates = resolved.templates;
+
+    const pf = colors.partFg;
+    const lateResolve = (
+      segment: string,
+      cellWidth: number,
+    ): string | undefined => {
+      if (segment === "context") {
+        return buildContextLine(data, cellWidth, sym, reset, colors) ?? "";
+      }
+      if (segment === "context.bar") {
+        return buildContextBar(data, cellWidth, sym, reset, colors, pf);
+      }
+      if (segment === "block.bar") {
+        return buildBlockBar(data, cellWidth, sym, reset, colors, config, pf);
+      }
+      if (segment === "weekly.bar") {
+        return buildWeeklyBar(data, cellWidth, sym, reset, colors, pf);
+      }
+      const tmpl = templates[segment];
+      if (tmpl) {
+        return composeTemplate(tmpl.items, tmpl.gap, tmpl.justify, cellWidth);
+      }
+      return undefined;
+    };
+
+    const gridResult = renderGrid(
+      gridConfig,
+      resolvedData,
+      mergedBox,
+      rawWidth,
+      lateResolve,
+    );
+    const innerWidth = gridResult.panelWidth - 2;
+
+    const footerLeft = gridConfig.footer?.left
+      ? resolveTitleToken(gridConfig.footer.left, data, resolvedData)
+      : undefined;
+    const footerRight = gridConfig.footer?.right
+      ? resolveTitleToken(gridConfig.footer.right, data, resolvedData)
+      : undefined;
+
+    const lines: string[] = [];
+    lines.push(
+      buildTitleBar(
+        data,
+        mergedBox,
+        innerWidth,
+        gridConfig.title,
+        resolvedData,
+      ),
+    );
+    lines.push(...gridResult.lines);
+    lines.push(bottomBorder(mergedBox, innerWidth, footerLeft, footerRight));
+    return SYNC_START + lines.map((l) => WS_GUARD + l).join("\n") + SYNC_END;
+  }
+
+  // Hardcoded path: existing layout system
+  const panelWidth = calculatePanelWidth(terminalWidth);
+  const innerWidth = panelWidth - 2;
+  const contentWidth = innerWidth - 2;
+  const mode = getLayoutMode(panelWidth);
+
+  const lines: string[] = [];
+
+  lines.push(buildTitleBar(data, box, innerWidth));
+
+  const contextLine = buildContextLine(data, contentWidth, sym, reset, colors);
+  if (contextLine) {
+    lines.push(contentRow(box, contextLine, innerWidth));
+  }
+
+  const ctx: RenderCtx = {
+    lines,
+    data,
+    box,
+    contentWidth,
+    innerWidth,
+    sym,
+    config,
+    reset,
+    colors,
+  };
+
+  if (mode === "wide") {
+    renderWideMetrics(ctx);
+    renderWideBottom(ctx);
+  } else if (mode === "medium") {
+    renderMediumMetrics(ctx);
+    renderMediumBottom(ctx);
+  } else {
+    renderNarrowMetrics(ctx);
+    renderNarrowBottom(ctx);
+  }
+
+  lines.push(bottomBorder(box, innerWidth));
+  return SYNC_START + lines.map((l) => WS_GUARD + l).join("\n") + SYNC_END;
+}