@sooneocean/claude-hud 0.1.0

package/src/render/colors.ts

@@ -0,0 +1,145 @@
+import type { HudColorName, HudColorValue, HudColorOverrides } from '../config.js';
+
+export const RESET = '\x1b[0m';
+
+export const BAR_CHARS = {
+  classic: { filled: '█', empty: '░' },
+  modern: { filled: '▰', empty: '▱' },
+} as const;
+
+const DIM = '\x1b[2m';
+const RED = '\x1b[31m';
+const GREEN = '\x1b[32m';
+const YELLOW = '\x1b[33m';
+const MAGENTA = '\x1b[35m';
+const CYAN = '\x1b[36m';
+const BRIGHT_BLUE = '\x1b[94m';
+const BRIGHT_MAGENTA = '\x1b[95m';
+const CLAUDE_ORANGE = '\x1b[38;5;208m';
+
+const ANSI_BY_NAME: Record<HudColorName, string> = {
+  red: RED,
+  green: GREEN,
+  yellow: YELLOW,
+  magenta: MAGENTA,
+  cyan: CYAN,
+  brightBlue: BRIGHT_BLUE,
+  brightMagenta: BRIGHT_MAGENTA,
+};
+
+/** Convert a hex color string (#rrggbb) to a truecolor ANSI escape sequence. */
+function hexToAnsi(hex: string): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+/**
+ * Resolve a color value to an ANSI escape sequence.
+ * Accepts named presets, 256-color indices (0-255), or hex strings (#rrggbb).
+ */
+function resolveAnsi(value: HudColorValue | undefined, fallback: string): string {
+  if (value === undefined || value === null) {
+    return fallback;
+  }
+  if (typeof value === 'number') {
+    return `\x1b[38;5;${value}m`;
+  }
+  if (typeof value === 'string' && value.startsWith('#') && value.length === 7) {
+    return hexToAnsi(value);
+  }
+  return ANSI_BY_NAME[value as HudColorName] ?? fallback;
+}
+
+export function colorize(text: string, color: string): string {
+  return `${color}${text}${RESET}`;
+}
+
+export function green(text: string): string {
+  return colorize(text, GREEN);
+}
+
+export function yellow(text: string): string {
+  return colorize(text, YELLOW);
+}
+
+export function red(text: string): string {
+  return colorize(text, RED);
+}
+
+export function cyan(text: string): string {
+  return colorize(text, CYAN);
+}
+
+export function magenta(text: string): string {
+  return colorize(text, MAGENTA);
+}
+
+export function dim(text: string): string {
+  return colorize(text, DIM);
+}
+
+export function claudeOrange(text: string): string {
+  return colorize(text, CLAUDE_ORANGE);
+}
+
+export function warning(text: string, colors?: Partial<HudColorOverrides>): string {
+  return colorize(text, resolveAnsi(colors?.warning, YELLOW));
+}
+
+export function critical(text: string, colors?: Partial<HudColorOverrides>): string {
+  return colorize(text, resolveAnsi(colors?.critical, RED));
+}
+
+export function getContextColor(
+  percent: number,
+  colors?: Partial<HudColorOverrides>,
+  thresholds?: { warningThreshold: number; criticalThreshold: number },
+): string {
+  if (percent >= (thresholds?.criticalThreshold ?? 85)) return resolveAnsi(colors?.critical, RED);
+  if (percent >= (thresholds?.warningThreshold ?? 70)) return resolveAnsi(colors?.warning, YELLOW);
+  return resolveAnsi(colors?.context, GREEN);
+}
+
+export function getQuotaColor(
+  percent: number,
+  colors?: Partial<HudColorOverrides>,
+  thresholds?: { warningThreshold: number; criticalThreshold: number },
+): string {
+  if (percent >= (thresholds?.criticalThreshold ?? 90)) return resolveAnsi(colors?.critical, RED);
+  if (percent >= (thresholds?.warningThreshold ?? 75)) return resolveAnsi(colors?.usageWarning, BRIGHT_MAGENTA);
+  return resolveAnsi(colors?.usage, BRIGHT_BLUE);
+}
+
+export function quotaBar(
+  percent: number,
+  width: number = 10,
+  colors?: Partial<HudColorOverrides>,
+  barStyle: 'classic' | 'modern' = 'classic',
+  thresholds?: { warningThreshold: number; criticalThreshold: number },
+): string {
+  const safeWidth = Number.isFinite(width) ? Math.max(0, Math.round(width)) : 0;
+  const safePercent = Number.isFinite(percent) ? Math.min(100, Math.max(0, percent)) : 0;
+  const filled = Math.round((safePercent / 100) * safeWidth);
+  const empty = safeWidth - filled;
+  const color = getQuotaColor(safePercent, colors, thresholds);
+  const chars = BAR_CHARS[barStyle];
+  return `${color}${chars.filled.repeat(filled)}${DIM}${chars.empty.repeat(empty)}${RESET}`;
+}
+
+export function coloredBar(
+  percent: number,
+  width: number = 10,
+  colors?: Partial<HudColorOverrides>,
+  barStyle: 'classic' | 'modern' = 'classic',
+  thresholds?: { warningThreshold: number; criticalThreshold: number },
+): string {
+  const safeWidth = Number.isFinite(width) ? Math.max(0, Math.round(width)) : 0;
+  const safePercent = Number.isFinite(percent) ? Math.min(100, Math.max(0, percent)) : 0;
+  const filled = Math.round((safePercent / 100) * safeWidth);
+  const empty = safeWidth - filled;
+  const color = getContextColor(safePercent, colors, thresholds);
+  const chars = BAR_CHARS[barStyle];
+  return `${color}${chars.filled.repeat(filled)}${DIM}${chars.empty.repeat(empty)}${RESET}`;
+}

package/src/render/framework-line.ts

@@ -0,0 +1,34 @@
+import type { FrameworkStatus } from '../types.js';
+import { colorize, claudeOrange, green, dim } from './colors.js';
+
+const STATUS_ICONS: Record<string, string> = {
+  running: claudeOrange('⟳'),
+  completed: green('✓'),
+  error: colorize('✘', '\x1b[31m'),
+  waiting: dim('⏳'),
+};
+
+export function renderFrameworkLine(statuses: FrameworkStatus[]): string | null {
+  if (statuses.length === 0) return null;
+  const parts: string[] = [];
+
+  for (const status of statuses) {
+    if (status.provider === 'AGW') {
+      for (const entry of status.entries) {
+        const icon = STATUS_ICONS[entry.status] || dim('?');
+        const progress = entry.progress ? dim(` (${entry.progress})`) : '';
+        parts.push(`${icon} AGW: ${entry.label}${progress}`);
+      }
+    } else if (status.provider === 'Teams') {
+      const agentParts = status.entries.map(e => {
+        const icon = e.status === 'completed' ? green('✓') :
+                     e.status === 'running' ? claudeOrange('◐') :
+                     e.status === 'error' ? colorize('✘', '\x1b[31m') : dim('⏳');
+        return `${e.label}${icon}`;
+      }).join(' ');
+      parts.push(`${green('⬡')} Teams: ${agentParts}`);
+    }
+  }
+
+  return parts.length > 0 ? parts.join(` ${dim('│')} `) : null;
+}

package/src/render/index.ts

@@ -0,0 +1,512 @@
+import type { HudElement } from '../config.js';
+import { DEFAULT_ELEMENT_ORDER } from '../config.js';
+import type { RenderContext } from '../types.js';
+import { renderSessionLine } from './session-line.js';
+import { renderToolsLine } from './tools-line.js';
+import { renderAgentsLine } from './agents-line.js';
+import { renderTodosLine } from './todos-line.js';
+import { renderFrameworkLine } from './framework-line.js';
+import { renderAlertLine } from './alert-line.js';
+import {
+  renderIdentityLine,
+  renderProjectLine,
+  renderEnvironmentLine,
+  renderUsageLine,
+} from './lines/index.js';
+import { dim, RESET } from './colors.js';
+import { getTerminalWidth } from '../utils/terminal.js';
+
+// eslint-disable-next-line no-control-regex
+const ANSI_ESCAPE_PATTERN = /^\x1b\[[0-9;]*m/;
+const ANSI_ESCAPE_GLOBAL = /\x1b\[[0-9;]*m/g;
+const GRAPHEME_SEGMENTER = typeof Intl.Segmenter === 'function'
+  ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+  : null;
+
+function stripAnsi(str: string): string {
+  return str.replace(ANSI_ESCAPE_GLOBAL, '');
+}
+
+function splitAnsiTokens(str: string): Array<{ type: 'ansi' | 'text'; value: string }> {
+  const tokens: Array<{ type: 'ansi' | 'text'; value: string }> = [];
+  let i = 0;
+
+  while (i < str.length) {
+    const ansiMatch = ANSI_ESCAPE_PATTERN.exec(str.slice(i));
+    if (ansiMatch) {
+      tokens.push({ type: 'ansi', value: ansiMatch[0] });
+      i += ansiMatch[0].length;
+      continue;
+    }
+
+    let j = i;
+    while (j < str.length) {
+      const nextAnsi = ANSI_ESCAPE_PATTERN.exec(str.slice(j));
+      if (nextAnsi) {
+        break;
+      }
+      j += 1;
+    }
+    tokens.push({ type: 'text', value: str.slice(i, j) });
+    i = j;
+  }
+
+  return tokens;
+}
+
+function segmentGraphemes(text: string): string[] {
+  if (!text) {
+    return [];
+  }
+  if (!GRAPHEME_SEGMENTER) {
+    return Array.from(text);
+  }
+  return Array.from(GRAPHEME_SEGMENTER.segment(text), segment => segment.segment);
+}
+
+function isWideCodePoint(codePoint: number): boolean {
+  return codePoint >= 0x1100 && (
+    codePoint <= 0x115F || // Hangul Jamo
+    codePoint === 0x2329 ||
+    codePoint === 0x232A ||
+    (codePoint >= 0x2E80 && codePoint <= 0xA4CF && codePoint !== 0x303F) ||
+    (codePoint >= 0xAC00 && codePoint <= 0xD7A3) ||
+    (codePoint >= 0xF900 && codePoint <= 0xFAFF) ||
+    (codePoint >= 0xFE10 && codePoint <= 0xFE19) ||
+    (codePoint >= 0xFE30 && codePoint <= 0xFE6F) ||
+    (codePoint >= 0xFF00 && codePoint <= 0xFF60) ||
+    (codePoint >= 0xFFE0 && codePoint <= 0xFFE6) ||
+    (codePoint >= 0x1F300 && codePoint <= 0x1FAFF) ||
+    (codePoint >= 0x20000 && codePoint <= 0x3FFFD)
+  );
+}
+
+function graphemeWidth(grapheme: string): number {
+  if (!grapheme || /^\p{Control}$/u.test(grapheme)) {
+    return 0;
+  }
+
+  // Emoji glyphs and ZWJ sequences generally render as double-width.
+  if (/\p{Extended_Pictographic}/u.test(grapheme)) {
+    return 2;
+  }
+
+  let hasVisibleBase = false;
+  let width = 0;
+  for (const char of Array.from(grapheme)) {
+    if (/^\p{Mark}$/u.test(char) || char === '\u200D' || char === '\uFE0F') {
+      continue;
+    }
+    hasVisibleBase = true;
+    const codePoint = char.codePointAt(0);
+    if (codePoint !== undefined && isWideCodePoint(codePoint)) {
+      width = Math.max(width, 2);
+    } else {
+      width = Math.max(width, 1);
+    }
+  }
+
+  return hasVisibleBase ? width : 0;
+}
+
+function visualLength(str: string): number {
+  let width = 0;
+  for (const token of splitAnsiTokens(str)) {
+    if (token.type === 'ansi') {
+      continue;
+    }
+    for (const grapheme of segmentGraphemes(token.value)) {
+      width += graphemeWidth(grapheme);
+    }
+  }
+  return width;
+}
+
+function sliceVisible(str: string, maxVisible: number): string {
+  if (maxVisible <= 0) {
+    return '';
+  }
+
+  let result = '';
+  let visibleWidth = 0;
+  let done = false;
+  let i = 0;
+
+  while (i < str.length && !done) {
+    const ansiMatch = ANSI_ESCAPE_PATTERN.exec(str.slice(i));
+    if (ansiMatch) {
+      result += ansiMatch[0];
+      i += ansiMatch[0].length;
+      continue;
+    }
+
+    let j = i;
+    while (j < str.length) {
+      const nextAnsi = ANSI_ESCAPE_PATTERN.exec(str.slice(j));
+      if (nextAnsi) {
+        break;
+      }
+      j += 1;
+    }
+
+    const plainChunk = str.slice(i, j);
+    for (const grapheme of segmentGraphemes(plainChunk)) {
+      const graphemeCellWidth = graphemeWidth(grapheme);
+      if (visibleWidth + graphemeCellWidth > maxVisible) {
+        done = true;
+        break;
+      }
+      result += grapheme;
+      visibleWidth += graphemeCellWidth;
+    }
+
+    i = j;
+  }
+
+  return result;
+}
+
+function truncateToWidth(str: string, maxWidth: number): string {
+  if (maxWidth <= 0 || visualLength(str) <= maxWidth) {
+    return str;
+  }
+
+  const suffix = maxWidth >= 3 ? '...' : '.'.repeat(maxWidth);
+  const keep = Math.max(0, maxWidth - suffix.length);
+  return `${sliceVisible(str, keep)}${suffix}${RESET}`;
+}
+
+function splitLineBySeparators(line: string): { segments: string[]; separators: string[] } {
+  const segments: string[] = [];
+  const separators: string[] = [];
+  let currentStart = 0;
+  let i = 0;
+
+  while (i < line.length) {
+    const ansiMatch = ANSI_ESCAPE_PATTERN.exec(line.slice(i));
+    if (ansiMatch) {
+      i += ansiMatch[0].length;
+      continue;
+    }
+
+    const separator = line.startsWith(' | ', i)
+      ? ' | '
+      : (line.startsWith(' │ ', i) ? ' │ ' : null);
+
+    if (separator) {
+      segments.push(line.slice(currentStart, i));
+      separators.push(separator);
+      i += separator.length;
+      currentStart = i;
+      continue;
+    }
+
+    i += 1;
+  }
+
+  segments.push(line.slice(currentStart));
+  return { segments, separators };
+}
+
+function splitWrapParts(line: string): Array<{ separator: string; segment: string }> {
+  const { segments, separators } = splitLineBySeparators(line);
+  if (segments.length === 0) {
+    return [];
+  }
+
+  let parts: Array<{ separator: string; segment: string }> = [{
+    separator: '',
+    segment: segments[0],
+  }];
+  for (let segmentIndex = 1; segmentIndex < segments.length; segmentIndex += 1) {
+    parts.push({
+      separator: separators[segmentIndex - 1] ?? ' | ',
+      segment: segments[segmentIndex],
+    });
+  }
+
+  // Keep the leading [model | provider] block together.
+  // This avoids splitting inside the model badge while still splitting
+  // separators elsewhere in the line.
+  const firstVisible = stripAnsi(parts[0].segment).trimStart();
+  const firstHasOpeningBracket = firstVisible.startsWith('[');
+  const firstHasClosingBracket = stripAnsi(parts[0].segment).includes(']');
+  if (firstHasOpeningBracket && !firstHasClosingBracket && parts.length > 1) {
+    let mergedSegment = parts[0].segment;
+    let consumeIndex = 1;
+    while (consumeIndex < parts.length) {
+      const nextPart = parts[consumeIndex];
+      mergedSegment += `${nextPart.separator}${nextPart.segment}`;
+      consumeIndex += 1;
+      if (stripAnsi(nextPart.segment).includes(']')) {
+        break;
+      }
+    }
+    parts = [
+      { separator: '', segment: mergedSegment },
+      ...parts.slice(consumeIndex),
+    ];
+  }
+
+  return parts;
+}
+
+function wrapSingleSegment(str: string, maxWidth: number): string[] {
+  const lines: string[] = [];
+  let remaining = str;
+  while (visualLength(remaining) > maxWidth) {
+    const sliced = sliceVisible(remaining, maxWidth);
+    lines.push(sliced + RESET);
+    remaining = remaining.slice(sliced.length);
+    // Skip any leading ANSI escape at the boundary so color continuity is preserved
+    let ansiMatch = ANSI_ESCAPE_PATTERN.exec(remaining);
+    while (ansiMatch && remaining.startsWith(ansiMatch[0])) {
+      remaining = remaining.slice(ansiMatch[0].length);
+      ansiMatch = ANSI_ESCAPE_PATTERN.exec(remaining);
+    }
+  }
+  if (remaining) {
+    lines.push(remaining);
+  }
+  return lines.length > 0 ? lines : [str];
+}
+
+function wrapLineToWidth(line: string, maxWidth: number): string[] {
+  if (maxWidth <= 0 || visualLength(line) <= maxWidth) {
+    return [line];
+  }
+
+  const parts = splitWrapParts(line);
+  if (parts.length <= 1) {
+    // Single segment — wrap at character level instead of truncating
+    return wrapSingleSegment(line, maxWidth);
+  }
+
+  const wrapped: string[] = [];
+  let current = parts[0].segment;
+
+  for (const part of parts.slice(1)) {
+    const candidate = `${current}${part.separator}${part.segment}`;
+    if (visualLength(candidate) <= maxWidth) {
+      current = candidate;
+      continue;
+    }
+
+    // Push current line, wrapping if still too wide
+    if (visualLength(current) > maxWidth) {
+      wrapped.push(...wrapSingleSegment(current, maxWidth));
+    } else {
+      wrapped.push(current);
+    }
+    current = part.segment;
+  }
+
+  if (current) {
+    if (visualLength(current) > maxWidth) {
+      wrapped.push(...wrapSingleSegment(current, maxWidth));
+    } else {
+      wrapped.push(current);
+    }
+  }
+
+  return wrapped;
+}
+
+function makeSeparator(length: number): string {
+  return dim('─'.repeat(Math.max(length, 1)));
+}
+
+function addTreePrefixes(lines: string[], useTree: boolean): string[] {
+  if (!useTree || lines.length === 0) return lines;
+  return lines.map((line, i) => {
+    const prefix = i === lines.length - 1 ? dim('└─ ') : dim('├─ ');
+    return prefix + line;
+  });
+}
+
+const ACTIVITY_ELEMENTS = new Set<HudElement>(['tools', 'agents', 'todos']);
+
+function collectActivityLines(ctx: RenderContext): string[] {
+  const activityLines: string[] = [];
+  const display = ctx.config?.display;
+
+  if (display?.showTools !== false) {
+    const toolsLine = renderToolsLine(ctx);
+    if (toolsLine) {
+      activityLines.push(toolsLine);
+    }
+  }
+
+  if (display?.showAgents !== false) {
+    const agentsLine = renderAgentsLine(ctx);
+    if (agentsLine) {
+      activityLines.push(agentsLine);
+    }
+  }
+
+  if (display?.showTodos !== false) {
+    const todosLine = renderTodosLine(ctx);
+    if (todosLine) {
+      activityLines.push(todosLine);
+    }
+  }
+
+  return activityLines;
+}
+
+function renderElementLine(ctx: RenderContext, element: HudElement): string | null {
+  const display = ctx.config?.display;
+
+  switch (element) {
+    case 'project':
+      return renderProjectLine(ctx);
+    case 'context':
+      return renderIdentityLine(ctx);
+    case 'usage':
+      return renderUsageLine(ctx);
+    case 'environment':
+      return renderEnvironmentLine(ctx);
+    case 'tools':
+      return display?.showTools === false ? null : renderToolsLine(ctx);
+    case 'agents':
+      return display?.showAgents === false ? null : renderAgentsLine(ctx);
+    case 'todos':
+      return display?.showTodos === false ? null : renderTodosLine(ctx);
+    case 'framework':
+      if (ctx.config.display.showFrameworks && ctx.frameworkStatus.length > 0) {
+        const line = renderFrameworkLine(ctx.frameworkStatus);
+        if (line) return line;
+      }
+      return null;
+    case 'alert':
+      if (ctx.config.display.showAlerts && ctx.alerts.length > 0) {
+        const line = renderAlertLine(ctx.alerts);
+        if (line) return line;
+      }
+      return null;
+  }
+}
+
+function renderCompact(ctx: RenderContext): string[] {
+  const lines: string[] = [];
+
+  const sessionLine = renderSessionLine(ctx);
+  if (sessionLine) {
+    lines.push(sessionLine);
+  }
+
+  return lines;
+}
+
+function renderExpanded(ctx: RenderContext): Array<{ line: string; isActivity: boolean }> {
+  const elementOrder = ctx.config?.elementOrder ?? DEFAULT_ELEMENT_ORDER;
+  const seen = new Set<HudElement>();
+  const lines: Array<{ line: string; isActivity: boolean }> = [];
+
+  for (let index = 0; index < elementOrder.length; index += 1) {
+    const element = elementOrder[index];
+    if (seen.has(element)) {
+      continue;
+    }
+
+    const nextElement = elementOrder[index + 1];
+    if (
+      (element === 'context' && nextElement === 'usage' && !seen.has('usage'))
+      || (element === 'usage' && nextElement === 'context' && !seen.has('context'))
+    ) {
+      seen.add(element);
+      seen.add(nextElement);
+
+      const firstLine = renderElementLine(ctx, element);
+      const secondLine = renderElementLine(ctx, nextElement);
+
+      if (firstLine && secondLine) {
+        lines.push({ line: `${firstLine} │ ${secondLine}`, isActivity: false });
+      } else if (firstLine) {
+        lines.push({ line: firstLine, isActivity: false });
+      } else if (secondLine) {
+        lines.push({ line: secondLine, isActivity: false });
+      }
+
+      continue;
+    }
+
+    seen.add(element);
+
+    const line = renderElementLine(ctx, element);
+    if (!line) {
+      continue;
+    }
+
+    lines.push({
+      line,
+      isActivity: ACTIVITY_ELEMENTS.has(element),
+    });
+  }
+
+  return lines;
+}
+
+export function render(ctx: RenderContext): void {
+  const lineLayout = ctx.config?.lineLayout ?? 'expanded';
+  const showSeparators = ctx.config?.showSeparators ?? false;
+  const terminalWidth = getTerminalWidth();
+
+  let lines: string[];
+
+  if (lineLayout === 'expanded') {
+    const renderedLines = renderExpanded(ctx);
+    const useTree = ctx.config?.display?.treePrefixes ?? false;
+
+    const firstActivityIndex = renderedLines.findIndex(({ isActivity }) => isActivity);
+    const activityLineStrings = renderedLines
+      .filter(({ isActivity }) => isActivity)
+      .map(({ line }) => line);
+    const prefixedActivityLines = addTreePrefixes(activityLineStrings, useTree);
+
+    let prefixCursor = 0;
+    lines = renderedLines.map(({ line, isActivity }) => {
+      if (isActivity) {
+        return prefixedActivityLines[prefixCursor++] ?? line;
+      }
+      return line;
+    });
+
+    if (showSeparators) {
+      if (firstActivityIndex > 0) {
+        const separatorBaseWidth = Math.max(
+          ...renderedLines
+            .slice(0, firstActivityIndex)
+            .map(({ line }) => visualLength(line)),
+          20
+        );
+        const separatorWidth = terminalWidth
+          ? Math.min(separatorBaseWidth, terminalWidth)
+          : separatorBaseWidth;
+        lines.splice(firstActivityIndex, 0, makeSeparator(separatorWidth));
+      }
+    }
+  } else {
+    const headerLines = renderCompact(ctx);
+    const activityLines = collectActivityLines(ctx);
+    lines = [...headerLines];
+
+    if (showSeparators && activityLines.length > 0) {
+      const maxWidth = Math.max(...headerLines.map(visualLength), 20);
+      const separatorWidth = terminalWidth ? Math.min(maxWidth, terminalWidth) : maxWidth;
+      lines.push(makeSeparator(separatorWidth));
+    }
+
+    lines.push(...activityLines);
+  }
+
+  const physicalLines = lines.flatMap(line => line.split('\n'));
+  const visibleLines = terminalWidth
+    ? physicalLines.flatMap(line => wrapLineToWidth(line, terminalWidth))
+    : physicalLines;
+
+  for (const line of visibleLines) {
+    const outputLine = `${RESET}${line}`;
+    console.log(outputLine);
+  }
+}