@sooneocean/claude-hud 0.1.0

package/src/render/lines/environment.ts

@@ -0,0 +1,41 @@
+import type { RenderContext } from '../../types.js';
+import { dim } from '../colors.js';
+
+export function renderEnvironmentLine(ctx: RenderContext): string | null {
+  const display = ctx.config?.display;
+
+  if (display?.showConfigCounts === false) {
+    return null;
+  }
+
+  const totalCounts = ctx.claudeMdCount + ctx.rulesCount + ctx.mcpCount + ctx.hooksCount;
+  const threshold = display?.environmentThreshold ?? 0;
+
+  if (totalCounts === 0 || totalCounts < threshold) {
+    return null;
+  }
+
+  const parts: string[] = [];
+
+  if (ctx.claudeMdCount > 0) {
+    parts.push(`${ctx.claudeMdCount} CLAUDE.md`);
+  }
+
+  if (ctx.rulesCount > 0) {
+    parts.push(`${ctx.rulesCount} rules`);
+  }
+
+  if (ctx.mcpCount > 0) {
+    parts.push(`${ctx.mcpCount} MCPs`);
+  }
+
+  if (ctx.hooksCount > 0) {
+    parts.push(`${ctx.hooksCount} hooks`);
+  }
+
+  if (parts.length === 0) {
+    return null;
+  }
+
+  return dim(parts.join(' | '));
+}

package/src/render/lines/identity.ts

@@ -0,0 +1,109 @@
+import type { RenderContext } from '../../types.js';
+import { getContextPercent, getBufferedPercent } from '../../stdin.js';
+import { coloredBar, dim, getContextColor, RESET, red, warning } from '../colors.js';
+import { getAdaptiveBarWidth, isNarrowTerminal, isVeryNarrowTerminal } from '../../utils/terminal.js';
+import { formatCost } from '../../cost-tracker.js';
+import { formatTokens, formatContextValue } from '../../utils/format.js';
+
+const DEBUG = process.env.DEBUG?.includes('claude-hud') || process.env.DEBUG === '*';
+
+const SPARK_CHARS = '▁▂▃▄▅▆▇█';
+
+function renderSparkline(values: number[]): string {
+  if (values.length < 2) return '';
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  return values.map(v => {
+    const idx = Math.round(((v - min) / range) * (SPARK_CHARS.length - 1));
+    return SPARK_CHARS[idx];
+  }).join('');
+}
+
+function ordinal(n: number): string {
+  if (n === 1) return '1st';
+  if (n === 2) return '2nd';
+  if (n === 3) return '3rd';
+  return `${n}th`;
+}
+
+export function renderIdentityLine(ctx: RenderContext): string {
+  const rawPercent = getContextPercent(ctx.stdin);
+  const bufferedPercent = getBufferedPercent(ctx.stdin);
+  const autocompactMode = ctx.config?.display?.autocompactBuffer ?? 'enabled';
+  const percent = autocompactMode === 'disabled' ? rawPercent : bufferedPercent;
+  const colors = ctx.config?.colors;
+
+  if (DEBUG && autocompactMode === 'disabled') {
+    console.error(`[claude-hud:context] autocompactBuffer=disabled, showing raw ${rawPercent}% (buffered would be ${bufferedPercent}%)`);
+  }
+
+  const display = ctx.config?.display;
+  const contextValueMode = display?.contextValue ?? 'percent';
+  const contextValue = formatContextValue(ctx, percent, contextValueMode);
+
+  const alertThresholds = ctx.config.alerts?.context
+    ? { warningThreshold: ctx.config.alerts.context.warningThreshold, criticalThreshold: ctx.config.alerts.context.criticalThreshold }
+    : undefined;
+
+  const contextValueDisplay = `${getContextColor(percent, colors, alertThresholds)}${contextValue}${RESET}`;
+
+  const barStyle = display?.barStyle ?? 'classic';
+  let line = display?.showContextBar !== false
+    ? `${dim('Context')} ${coloredBar(percent, getAdaptiveBarWidth(), colors, barStyle, alertThresholds)} ${contextValueDisplay}`
+    : `${dim('Context')} ${contextValueDisplay}`;
+
+  // Progressive content reduction based on terminal width
+  const tw = ctx.terminalWidth;
+  const isNarrow = isNarrowTerminal(tw);
+  const isVeryNarrow = isVeryNarrowTerminal(tw);
+
+  if (!isVeryNarrow && display?.showTokenBreakdown !== false && percent >= 85) {
+    const usage = ctx.stdin.context_window?.current_usage;
+    if (usage) {
+      const input = formatTokens(usage.input_tokens ?? 0);
+      const cache = formatTokens((usage.cache_creation_input_tokens ?? 0) + (usage.cache_read_input_tokens ?? 0));
+      line += dim(` (in: ${input}, cache: ${cache})`);
+    }
+  }
+
+  if (ctx.costEstimate && ctx.config.display.showCost) {
+    if (!isNarrow) {
+      line += ` ${dim('│')} ${dim(formatCost(ctx.costEstimate.sessionCost))}`;
+    }
+  }
+
+  if (!isNarrow && ctx.burnRate && ctx.config.display.showBurnRate) {
+    const formatted = ctx.burnRate.tokensPerMinute >= 1000
+      ? `${(ctx.burnRate.tokensPerMinute / 1000).toFixed(1)}k`
+      : `${ctx.burnRate.tokensPerMinute}`;
+    line += ` ${dim('│')} ${dim(`${formatted} tok/m`)}`;
+  }
+
+  if (!isNarrow && ctx.burnRate && ctx.burnRate.tokensPerMinute > 0 && percent >= (alertThresholds?.warningThreshold ?? 70)) {
+    const remaining = ctx.stdin.context_window?.context_window_size
+      ? ctx.stdin.context_window.context_window_size - (ctx.stdin.context_window?.current_usage?.input_tokens ?? 0)
+      : 0;
+    if (remaining > 0) {
+      const minsLeft = Math.round(remaining / ctx.burnRate.tokensPerMinute);
+      const timeStr = minsLeft >= 60 ? `${Math.floor(minsLeft / 60)}h ${minsLeft % 60}m` : `${minsLeft}m`;
+      line += dim(` ~${timeStr}`);
+    }
+  }
+
+  if (!isVeryNarrow && ctx.sessionStats.autocompactCount > 0) {
+    line += dim(` (${ordinal(ctx.sessionStats.autocompactCount)} compact)`);
+  }
+
+  if (!isNarrow && ctx.sparkline && ctx.sparkline.length >= 3) {
+    line += ` ${dim(renderSparkline(ctx.sparkline))}`;
+  }
+
+  if (!isNarrow && ctx.apiLatency !== null && ctx.apiLatency !== undefined && ctx.apiLatency > 0) {
+    const latencyColor = ctx.apiLatency > 5000 ? red : ctx.apiLatency > 2000 ? warning : dim;
+    line += ` ${latencyColor(`${ctx.apiLatency}ms`)}`;
+  }
+
+  return line;
+}
+

package/src/render/lines/index.ts

@@ -0,0 +1,4 @@
+export { renderIdentityLine } from './identity.js';
+export { renderProjectLine } from './project.js';
+export { renderEnvironmentLine } from './environment.js';
+export { renderUsageLine } from './usage.js';

package/src/render/lines/project.ts

@@ -0,0 +1,113 @@
+import type { RenderContext } from '../../types.js';
+import { getModelName, getProviderLabel } from '../../stdin.js';
+import { getOutputSpeed } from '../../speed-tracker.js';
+import { cyan, dim, magenta, yellow, red, claudeOrange, colorize, green } from '../colors.js';
+import { isNarrowTerminal } from '../../utils/terminal.js';
+
+export function renderProjectLine(ctx: RenderContext): string | null {
+  const display = ctx.config?.display;
+  const parts: string[] = [];
+
+  if (display?.activityIndicator) {
+    const hasRunning = ctx.transcript.tools.some(t => t.status === 'running');
+    const indicator = hasRunning ? colorize('◉', '\x1b[31m') : green('◉');
+    parts.unshift(indicator);
+  }
+
+  if (display?.showModel !== false) {
+    const model = getModelName(ctx.stdin);
+    const providerLabel = getProviderLabel(ctx.stdin);
+    const showUsage = display?.showUsage !== false;
+    const planName = showUsage ? ctx.usageData?.planName : undefined;
+    const hasApiKey = !!process.env.ANTHROPIC_API_KEY;
+    const billingLabel = showUsage ? (planName ?? (hasApiKey ? red('API') : undefined)) : undefined;
+    const planDisplay = providerLabel ?? billingLabel;
+    const modelDisplay = planDisplay ? `${model} | ${planDisplay}` : model;
+    parts.push(cyan(`[${modelDisplay}]`));
+  }
+
+  let projectPart: string | null = null;
+  if (display?.showProject !== false && ctx.stdin.cwd) {
+    const segments = ctx.stdin.cwd.split(/[/\\]/).filter(Boolean);
+    const pathLevels = ctx.config?.pathLevels ?? 1;
+    const projectPath = segments.length > 0 ? segments.slice(-pathLevels).join('/') : '/';
+    projectPart = yellow(projectPath);
+  }
+
+  let gitPart = '';
+  const gitConfig = ctx.config?.gitStatus;
+  const showGit = gitConfig?.enabled ?? true;
+
+  if (showGit && ctx.gitStatus) {
+    const gitParts: string[] = [ctx.gitStatus.branch];
+
+    if ((gitConfig?.showDirty ?? true) && ctx.gitStatus.isDirty) {
+      gitParts.push('*');
+    }
+
+    if (gitConfig?.showAheadBehind) {
+      if (ctx.gitStatus.ahead > 0) {
+        gitParts.push(` ↑${ctx.gitStatus.ahead}`);
+      }
+      if (ctx.gitStatus.behind > 0) {
+        gitParts.push(` ↓${ctx.gitStatus.behind}`);
+      }
+    }
+
+    if (gitConfig?.showFileStats && ctx.gitStatus.fileStats) {
+      const { modified, added, deleted, untracked } = ctx.gitStatus.fileStats;
+      const statParts: string[] = [];
+      if (modified > 0) statParts.push(`!${modified}`);
+      if (added > 0) statParts.push(`+${added}`);
+      if (deleted > 0) statParts.push(`✘${deleted}`);
+      if (untracked > 0) statParts.push(`?${untracked}`);
+      if (statParts.length > 0) {
+        gitParts.push(` ${statParts.join(' ')}`);
+      }
+    }
+
+    gitPart = `${magenta('git:(')}${cyan(gitParts.join(''))}${magenta(')')}`;
+  }
+
+  if (projectPart && gitPart) {
+    parts.push(`${projectPart} ${gitPart}`);
+  } else if (projectPart) {
+    parts.push(projectPart);
+  } else if (gitPart) {
+    parts.push(gitPart);
+  }
+
+  // Progressive content reduction based on terminal width
+  const tw = ctx.terminalWidth;
+  const isNarrow = isNarrowTerminal(tw);
+
+  if (!isNarrow && display?.showSessionName && ctx.transcript.sessionName) {
+    parts.push(dim(ctx.transcript.sessionName));
+  }
+
+  if (!isNarrow && ctx.extraLabel) {
+    parts.push(dim(ctx.extraLabel));
+  }
+
+  if (display?.showSpeed) {
+    const speed = getOutputSpeed(ctx.stdin);
+    if (speed !== null) {
+      parts.push(dim(`out: ${speed.toFixed(1)} tok/s`));
+    }
+  }
+
+  if (!isNarrow && display?.showDuration !== false && ctx.sessionDuration) {
+    parts.push(dim(`⏱️  ${ctx.sessionDuration}`));
+  }
+
+  const customLine = display?.customLine;
+  if (customLine) {
+    parts.push(claudeOrange(customLine));
+  }
+
+  if (parts.length === 0) {
+    return null;
+  }
+
+  return parts.join(' \u2502 ');
+}

package/src/render/lines/usage.ts

@@ -0,0 +1,79 @@
+import type { RenderContext } from '../../types.js';
+import { isLimitReached } from '../../types.js';
+import { getProviderLabel } from '../../stdin.js';
+import { critical, warning, dim, quotaBar } from '../colors.js';
+import { getAdaptiveBarWidth } from '../../utils/terminal.js';
+import { formatResetTime, formatUsageError, formatUsagePercent } from '../../utils/format.js';
+
+export function renderUsageLine(ctx: RenderContext): string | null {
+  const display = ctx.config?.display;
+  const colors = ctx.config?.colors;
+
+  if (display?.showUsage === false) {
+    return null;
+  }
+
+  if (!ctx.usageData?.planName) {
+    return null;
+  }
+
+  if (getProviderLabel(ctx.stdin)) {
+    return null;
+  }
+
+  const label = dim('Usage');
+
+  if (ctx.usageData.apiUnavailable) {
+    const errorHint = formatUsageError(ctx.usageData.apiError);
+    return `${label} ${warning(`⚠${errorHint}`, colors)}`;
+  }
+
+  if (isLimitReached(ctx.usageData)) {
+    const resetTime = ctx.usageData.fiveHour === 100
+      ? formatResetTime(ctx.usageData.fiveHourResetAt)
+      : formatResetTime(ctx.usageData.sevenDayResetAt);
+    return `${label} ${critical(`⚠ Limit reached${resetTime ? ` (resets ${resetTime})` : ''}`, colors)}`;
+  }
+
+  const threshold = display?.usageThreshold ?? 0;
+  const fiveHour = ctx.usageData.fiveHour;
+  const sevenDay = ctx.usageData.sevenDay;
+
+  const effectiveUsage = Math.max(fiveHour ?? 0, sevenDay ?? 0);
+  if (effectiveUsage < threshold) {
+    return null;
+  }
+
+  const fiveHourDisplay = formatUsagePercent(ctx.usageData.fiveHour, colors);
+  const fiveHourReset = formatResetTime(ctx.usageData.fiveHourResetAt);
+
+  const usageBarEnabled = display?.usageBarEnabled ?? true;
+  const barStyle = display?.barStyle ?? 'classic';
+  const fiveHourPart = usageBarEnabled
+    ? (fiveHourReset
+        ? `${quotaBar(fiveHour ?? 0, getAdaptiveBarWidth(), colors, barStyle)} ${fiveHourDisplay} (resets in ${fiveHourReset})`
+        : `${quotaBar(fiveHour ?? 0, getAdaptiveBarWidth(), colors, barStyle)} ${fiveHourDisplay}`)
+    : (fiveHourReset
+        ? `5h: ${fiveHourDisplay} (resets in ${fiveHourReset})`
+        : `5h: ${fiveHourDisplay}`);
+
+  const sevenDayThreshold = display?.sevenDayThreshold ?? 80;
+  const syncingSuffix = ctx.usageData.apiError === 'rate-limited'
+    ? ` ${dim('(syncing...)')}`
+    : '';
+  if (sevenDay !== null && sevenDay >= sevenDayThreshold) {
+    const sevenDayDisplay = formatUsagePercent(sevenDay, colors);
+    const sevenDayReset = formatResetTime(ctx.usageData.sevenDayResetAt);
+    const sevenDayPart = usageBarEnabled
+      ? (sevenDayReset
+          ? `${quotaBar(sevenDay, getAdaptiveBarWidth(), colors, barStyle)} ${sevenDayDisplay} (resets in ${sevenDayReset})`
+          : `${quotaBar(sevenDay, getAdaptiveBarWidth(), colors, barStyle)} ${sevenDayDisplay}`)
+      : (sevenDayReset
+          ? `7d: ${sevenDayDisplay} (resets in ${sevenDayReset})`
+          : `7d: ${sevenDayDisplay}`);
+    return `${label} ${fiveHourPart} ${dim('│')} ${sevenDayPart}${syncingSuffix}`;
+  }
+
+  return `${label} ${fiveHourPart}${syncingSuffix}`;
+}
+

package/src/render/session-line.ts

@@ -0,0 +1,253 @@
+import type { RenderContext } from '../types.js';
+import { isLimitReached } from '../types.js';
+import { getContextPercent, getBufferedPercent, getModelName, getProviderLabel } from '../stdin.js';
+import { getOutputSpeed } from '../speed-tracker.js';
+import { coloredBar, colorize, critical, cyan, dim, green, magenta, red, warning, yellow, getContextColor, quotaBar, claudeOrange, RESET } from './colors.js';
+import { getAdaptiveBarWidth } from '../utils/terminal.js';
+import { formatTokens, formatContextValue, formatResetTime, formatUsageError, formatUsagePercent } from '../utils/format.js';
+
+const DEBUG = process.env.DEBUG?.includes('claude-hud') || process.env.DEBUG === '*';
+
+/**
+ * Renders the full session line (model + context bar + project + git + counts + usage + duration).
+ * Used for compact layout mode.
+ */
+export function renderSessionLine(ctx: RenderContext): string {
+  const model = getModelName(ctx.stdin);
+
+  const rawPercent = getContextPercent(ctx.stdin);
+  const bufferedPercent = getBufferedPercent(ctx.stdin);
+  const autocompactMode = ctx.config?.display?.autocompactBuffer ?? 'enabled';
+  const percent = autocompactMode === 'disabled' ? rawPercent : bufferedPercent;
+
+  if (DEBUG && autocompactMode === 'disabled') {
+    console.error(`[claude-hud:context] autocompactBuffer=disabled, showing raw ${rawPercent}% (buffered would be ${bufferedPercent}%)`);
+  }
+
+  const colors = ctx.config?.colors;
+  const barWidth = getAdaptiveBarWidth();
+  const barStyle = ctx.config?.display?.barStyle ?? 'classic';
+  const bar = coloredBar(percent, barWidth, colors, barStyle);
+
+  const parts: string[] = [];
+  const display = ctx.config?.display;
+
+  const contextValueMode = display?.contextValue ?? 'percent';
+  const contextValue = formatContextValue(ctx, percent, contextValueMode);
+  const contextValueDisplay = `${getContextColor(percent, colors)}${contextValue}${RESET}`;
+
+  // Model and context bar (FIRST)
+  // Plan name only shows if showUsage is enabled (respects hybrid toggle)
+  const providerLabel = getProviderLabel(ctx.stdin);
+  const showUsage = display?.showUsage !== false;
+  const planName = showUsage ? ctx.usageData?.planName : undefined;
+  const hasApiKey = !!process.env.ANTHROPIC_API_KEY;
+  const billingLabel = showUsage ? (planName ?? (hasApiKey ? red('API') : undefined)) : undefined;
+  const planDisplay = providerLabel ?? billingLabel;
+  const modelDisplay = planDisplay ? `${model} | ${planDisplay}` : model;
+
+  if (display?.showModel !== false && display?.showContextBar !== false) {
+    parts.push(`${cyan(`[${modelDisplay}]`)} ${bar} ${contextValueDisplay}`);
+  } else if (display?.showModel !== false) {
+    parts.push(`${cyan(`[${modelDisplay}]`)} ${contextValueDisplay}`);
+  } else if (display?.showContextBar !== false) {
+    parts.push(`${bar} ${contextValueDisplay}`);
+  } else {
+    parts.push(contextValueDisplay);
+  }
+
+  if (display?.activityIndicator) {
+    const hasRunning = ctx.transcript.tools.some(t => t.status === 'running');
+    const indicator = hasRunning ? colorize('◉', '\x1b[31m') : green('◉');
+    parts.unshift(indicator);
+  }
+
+  if (ctx.burnRate && display?.showBurnRate) {
+    const formatted = ctx.burnRate.tokensPerMinute >= 1000
+      ? `${(ctx.burnRate.tokensPerMinute / 1000).toFixed(1)}k`
+      : `${ctx.burnRate.tokensPerMinute}`;
+    parts.push(dim(`${formatted} tok/m`));
+  }
+
+  // Project path + git status (SECOND)
+  let projectPart: string | null = null;
+  if (display?.showProject !== false && ctx.stdin.cwd) {
+    // Split by both Unix (/) and Windows (\) separators for cross-platform support
+    const segments = ctx.stdin.cwd.split(/[/\\]/).filter(Boolean);
+    const pathLevels = ctx.config?.pathLevels ?? 1;
+    // Always join with forward slash for consistent display
+    // Handle root path (/) which results in empty segments
+    const projectPath = segments.length > 0 ? segments.slice(-pathLevels).join('/') : '/';
+    projectPart = yellow(projectPath);
+  }
+
+  let gitPart = '';
+  const gitConfig = ctx.config?.gitStatus;
+  const showGit = gitConfig?.enabled ?? true;
+
+  if (showGit && ctx.gitStatus) {
+    const gitParts: string[] = [ctx.gitStatus.branch];
+
+    // Show dirty indicator
+    if ((gitConfig?.showDirty ?? true) && ctx.gitStatus.isDirty) {
+      gitParts.push('*');
+    }
+
+    // Show ahead/behind (with space separator for readability)
+    if (gitConfig?.showAheadBehind) {
+      if (ctx.gitStatus.ahead > 0) {
+        gitParts.push(` ↑${ctx.gitStatus.ahead}`);
+      }
+      if (ctx.gitStatus.behind > 0) {
+        gitParts.push(` ↓${ctx.gitStatus.behind}`);
+      }
+    }
+
+    // Show file stats in Starship-compatible format (!modified +added ✘deleted ?untracked)
+    if (gitConfig?.showFileStats && ctx.gitStatus.fileStats) {
+      const { modified, added, deleted, untracked } = ctx.gitStatus.fileStats;
+      const statParts: string[] = [];
+      if (modified > 0) statParts.push(`!${modified}`);
+      if (added > 0) statParts.push(`+${added}`);
+      if (deleted > 0) statParts.push(`✘${deleted}`);
+      if (untracked > 0) statParts.push(`?${untracked}`);
+      if (statParts.length > 0) {
+        gitParts.push(` ${statParts.join(' ')}`);
+      }
+    }
+
+    gitPart = `${magenta('git:(')}${cyan(gitParts.join(''))}${magenta(')')}`;
+  }
+
+  if (projectPart && gitPart) {
+    parts.push(`${projectPart} ${gitPart}`);
+  } else if (projectPart) {
+    parts.push(projectPart);
+  } else if (gitPart) {
+    parts.push(gitPart);
+  }
+
+  // Session name (custom title from /rename, or auto-generated slug)
+  if (display?.showSessionName && ctx.transcript.sessionName) {
+    parts.push(dim(ctx.transcript.sessionName));
+  }
+
+  // Config counts (respects environmentThreshold)
+  if (display?.showConfigCounts !== false) {
+    const totalCounts = ctx.claudeMdCount + ctx.rulesCount + ctx.mcpCount + ctx.hooksCount;
+    const envThreshold = display?.environmentThreshold ?? 0;
+
+    if (totalCounts > 0 && totalCounts >= envThreshold) {
+      if (ctx.claudeMdCount > 0) {
+        parts.push(dim(`${ctx.claudeMdCount} CLAUDE.md`));
+      }
+
+      if (ctx.rulesCount > 0) {
+        parts.push(dim(`${ctx.rulesCount} rules`));
+      }
+
+      if (ctx.mcpCount > 0) {
+        parts.push(dim(`${ctx.mcpCount} MCPs`));
+      }
+
+      if (ctx.hooksCount > 0) {
+        parts.push(dim(`${ctx.hooksCount} hooks`));
+      }
+    }
+  }
+
+  // Usage limits display (shown when enabled in config, respects usageThreshold)
+  if (display?.showUsage !== false && ctx.usageData?.planName && !providerLabel) {
+    if (ctx.usageData.apiUnavailable) {
+      const errorHint = formatUsageError(ctx.usageData.apiError);
+      parts.push(warning(`usage: ⚠${errorHint}`, colors));
+    } else if (isLimitReached(ctx.usageData)) {
+      const resetTime = ctx.usageData.fiveHour === 100
+        ? formatResetTime(ctx.usageData.fiveHourResetAt)
+        : formatResetTime(ctx.usageData.sevenDayResetAt);
+      parts.push(critical(`⚠ Limit reached${resetTime ? ` (resets ${resetTime})` : ''}`, colors));
+    } else {
+      const usageThreshold = display?.usageThreshold ?? 0;
+      const fiveHour = ctx.usageData.fiveHour;
+      const sevenDay = ctx.usageData.sevenDay;
+      const effectiveUsage = Math.max(fiveHour ?? 0, sevenDay ?? 0);
+
+      if (effectiveUsage >= usageThreshold) {
+        const syncingSuffix = ctx.usageData.apiError === 'rate-limited'
+          ? ` ${dim('(syncing...)')}`
+          : '';
+        const fiveHourDisplay = formatUsagePercent(fiveHour, colors);
+        const fiveHourReset = formatResetTime(ctx.usageData.fiveHourResetAt);
+
+        const usageBarEnabled = display?.usageBarEnabled ?? true;
+        const fiveHourPart = usageBarEnabled
+          ? (fiveHourReset
+              ? `${quotaBar(fiveHour ?? 0, barWidth, colors, barStyle)} ${fiveHourDisplay} (${fiveHourReset} / 5h)`
+              : `${quotaBar(fiveHour ?? 0, barWidth, colors, barStyle)} ${fiveHourDisplay}`)
+          : (fiveHourReset
+              ? `5h: ${fiveHourDisplay} (${fiveHourReset})`
+              : `5h: ${fiveHourDisplay}`);
+
+        const sevenDayThreshold = display?.sevenDayThreshold ?? 80;
+        if (sevenDay !== null && sevenDay >= sevenDayThreshold) {
+          const sevenDayDisplay = formatUsagePercent(sevenDay, colors);
+          const sevenDayReset = formatResetTime(ctx.usageData.sevenDayResetAt);
+          const sevenDayPart = usageBarEnabled
+            ? (sevenDayReset
+                ? `${quotaBar(sevenDay, barWidth, colors, barStyle)} ${sevenDayDisplay} (${sevenDayReset} / 7d)`
+                : `${quotaBar(sevenDay, barWidth, colors, barStyle)} ${sevenDayDisplay}`)
+            : (sevenDayReset
+                ? `7d: ${sevenDayDisplay} (${sevenDayReset})`
+                : `7d: ${sevenDayDisplay}`);
+          parts.push(`${fiveHourPart} ${dim('│')} ${sevenDayPart}${syncingSuffix}`);
+        } else {
+          parts.push(`${fiveHourPart}${syncingSuffix}`);
+        }
+      }
+    }
+  }
+
+  // Session duration
+  if (display?.showSpeed) {
+    const speed = getOutputSpeed(ctx.stdin);
+    if (speed !== null) {
+      parts.push(dim(`out: ${speed.toFixed(1)} tok/s`));
+    }
+  }
+
+  if (display?.showDuration !== false && ctx.sessionDuration) {
+    parts.push(dim(`⏱️  ${ctx.sessionDuration}`));
+  }
+
+  if (ctx.extraLabel) {
+    parts.push(dim(ctx.extraLabel));
+  }
+
+  // Custom line (static user-defined text)
+  const customLine = display?.customLine;
+  if (customLine) {
+    parts.push(claudeOrange(customLine));
+  }
+
+  if (ctx.alerts && ctx.alerts.length > 0) {
+    const criticalAlert = ctx.alerts.find(a => a.type.includes('critical'));
+    if (criticalAlert) {
+      parts.push(red(`⚠ ${criticalAlert.message}`));
+    }
+  }
+
+  let line = parts.join(' | ');
+
+  // Token breakdown at high context
+  if (display?.showTokenBreakdown !== false && percent >= 85) {
+    const usage = ctx.stdin.context_window?.current_usage;
+    if (usage) {
+      const input = formatTokens(usage.input_tokens ?? 0);
+      const cache = formatTokens((usage.cache_creation_input_tokens ?? 0) + (usage.cache_read_input_tokens ?? 0));
+      line += dim(` (in: ${input}, cache: ${cache})`);
+    }
+  }
+
+  return line;
+}
+

package/src/render/todos-line.ts

@@ -0,0 +1,35 @@
+import type { RenderContext } from '../types.js';
+import { yellow, green, dim, claudeOrange } from './colors.js';
+import { truncateString } from '../utils/format.js';
+
+export function renderTodosLine(ctx: RenderContext): string | null {
+  const { todos } = ctx.transcript;
+
+  if (!todos || todos.length === 0) {
+    return null;
+  }
+
+  const inProgress = todos.find((t) => t.status === 'in_progress');
+  const completed = todos.filter((t) => t.status === 'completed').length;
+  const total = todos.length;
+
+  if (!inProgress) {
+    if (completed === total && total > 0) {
+      return `${green('✓')} All todos complete ${dim(`(${completed}/${total})`)}`;
+    }
+    return null;
+  }
+
+  const content = truncateString(inProgress.content, 50);
+  const progress = dim(`(${completed}/${total})`);
+
+  const miniBar = ctx.transcript.todos.slice(0, 10).map(todo => {
+    if (todo.status === 'completed') return green('▪');
+    if (todo.status === 'in_progress') return claudeOrange('▪');
+    return dim('▪');
+  }).join('');
+  const suffix = ctx.transcript.todos.length > 10 ? dim('…') : '';
+
+  return `${yellow('▸')} ${content} ${progress} │ ${miniBar}${suffix}`;
+}
+