51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2ccc,import { Box, Text } from "ink"; import React, { useState } from "react"; import type { ReactNode } from "react"; import { useInterval } from "@/hooks/use-interval"; import { useUnicode } from "@/hooks/use-unicode"; export interface UsageMonitorProps { refreshInterval?: number; separatorChar?: string; children: ReactNode; isActive?: boolean; "aria-label"?: string; } export interface UsageMonitorHeaderProps { title: string; titleColor?: string; decorator?: string; separatorChar?: string; separatorColor?: string; } export interface UsageMonitorTagsProps { items: string[]; bracketColor?: string; separatorColor?: string; } export interface UsageMonitorSectionProps { icon?: string; title?: string; subtitle?: string; children: ReactNode; } export interface UsageMonitorMetricProps { icon?: string; label: string; value: number; max: number; percent: number; status: "green" | "yellow" | "red" | "blue"; format: "number" | "currency" | "duration" | "percent" | "custom"; formatFn?: (v: number, max: number) => string; barWidth?: number; barFillChar?: string; barEmptyChar?: string; barColor?: string; maxDim?: boolean; showMax?: boolean; } export interface UsageMonitorDistributionMetricProps { icon?: string; label: string; segments: { label: string; percent: number; color?: string }[]; barWidth?: number; } export interface UsageMonitorStatRowProps { icon?: string; label: string; value: string; valueSuffix?: string; valueColor?: string; } export interface UsageMonitorPredictionProps { label: string; value: string; valueColor?: string; } export interface UsageMonitorStatusBarProps { clock?: boolean; clockColor?: string; sessionLabel?: string; sessionColor?: string; exitHint?: string; statusDot?: "green" | "yellow" | "red"; separator?: string; } const formatValue = ( value: number, max: number, format: UsageMonitorMetricProps["format"], formatFn?: (v: number, max: number) => string ): { current: string; maxStr: string } => { if (format === "custom" && formatFn) { const result = formatFn(value, max); return { current: result, maxStr: "" }; } switch (format) { case "currency": { return { current: `$${value.toFixed(2)}`, maxStr: `$${max.toFixed(2)}` }; } case "duration": { const h = Math.floor(value / 60); const m = value % 60; const maxH = Math.floor(max / 60); const maxM = max % 60; return { current: h > 0 ? `${h}h ${m}m` : `${m}m`, maxStr: maxH > 0 ? `${maxH}h ${maxM}m` : `${maxM}m`, }; } case "percent": { return { current: `${value.toFixed(1)}%`, maxStr: `${max.toFixed(1)}%` }; } case "number": { return { current: value.toLocaleString(), maxStr: max.toLocaleString(), }; } default: { return { current: String(value), maxStr: String(max) }; } } }; const statusDotChar = ( status: "green" | "yellow" | "red", unicode: boolean ): { char: string; color: string; } => { switch (status) { case "green": { return { char: unicode ? "●" : "o", color: "green" }; } case "yellow": { return { char: unicode ? "◕" : "!", color: "yellow" }; } case "red": { return { char: unicode ? "○" : "x", color: "red" }; } default: { return { char: unicode ? "●" : "o", color: "green" }; } } }; const UsageMonitorRoot = ({ refreshInterval = 1000, separatorChar, children, isActive = true, "aria-label": ariaLabel = "Usage monitor", }: UsageMonitorProps) => { const unicode = useUnicode(); const resolvedSeparatorChar = separatorChar ?? (unicode ? "─" : "-"); const [, setTick] = useState(0); useInterval(() => setTick((t) => t + 1), refreshInterval, { isActive }); return ( {""} {React.Children.map(children, (child, i) => ( {child} {i < React.Children.count(children) - 1 && React.isValidElement(child) && (child.type as unknown as { displayName?: string }).displayName !== "UsageMonitor.StatusBar" && ( {resolvedSeparatorChar.repeat(44)} )} ))} ); }; const UsageMonitorHeader = ({ title, titleColor = "cyan", decorator, separatorChar, separatorColor, }: UsageMonitorHeaderProps) => { const unicode = useUnicode(); const resolvedDecorator = decorator ?? (unicode ? "◆ ✦ ◆ ✦" : "* + * +"); const resolvedSeparatorChar = separatorChar ?? (unicode ? "═" : "="); return ( {`${resolvedDecorator} `} {title} {` ${resolvedDecorator}`} {resolvedSeparatorChar.repeat(44)} ); }; UsageMonitorHeader.displayName = "UsageMonitor.Header"; const UsageMonitorTags = ({ items, bracketColor, separatorColor, }: UsageMonitorTagsProps) => ( {"[ "} {items.map((item, i) => ( {item} {i < items.length - 1 && ( {" | "} )} ))} {" ]"} ); const UsageMonitorSection = ({ icon, title, subtitle, children, }: UsageMonitorSectionProps) => ( {(icon || title) && ( {icon && {icon}} {title && {title}} )} {subtitle && {` ${subtitle}`}} {children} ); const UsageMonitorMetric = ({ icon, label, value, max, percent, status, format, formatFn, barWidth = 22, barFillChar, barEmptyChar, barColor = "white", maxDim = false, showMax = true, }: UsageMonitorMetricProps) => { const unicode = useUnicode(); const resolvedBarFillChar = barFillChar ?? (unicode ? "█" : "#"); const resolvedBarEmptyChar = barEmptyChar ?? (unicode ? "░" : "."); const normalizedPercent = Math.max(0, Math.min(100, percent)); const filled = Math.round((normalizedPercent / 100) * barWidth); const empty = barWidth - filled; const bar = resolvedBarFillChar.repeat(filled) + resolvedBarEmptyChar.repeat(empty); const dot = statusDotChar(status as "green" | "yellow" | "red", unicode); const { current, maxStr } = formatValue(value, max, format, formatFn); return ( {icon && {icon}} {label.padEnd(16)} {dot.char} {`[${bar}]`} {` ${normalizedPercent.toFixed(1)}%`} {` ${current}`} {showMax && maxStr && {`/ ${maxStr}`}} ); }; const UsageMonitorDistributionMetric = ({ icon, label, segments, barWidth = 22, }: UsageMonitorDistributionMetricProps) => { const unicode = useUnicode(); const bars = segments.map((seg) => { const count = Math.round((seg.percent / 100) * barWidth); return { ...seg, count }; }); return ( `${segment.label} ${segment.percent}%`).join(", ")}`} > {icon && {icon}} {label.padEnd(16)} [ {bars.map((seg, i) => ( {(unicode ? "█" : "#").repeat(seg.count)} ))} ] {segments.map((seg, i) => ( {`${seg.label} ${seg.percent}%`} {i < segments.length - 1 ? " | " : ""} ))} ); }; const UsageMonitorStats = ({ children }: { children: ReactNode }) => ( {children} ); const UsageMonitorStatRow = ({ icon, label, value, valueSuffix, valueColor = "white", }: UsageMonitorStatRowProps) => ( {icon && {icon}} {label.padEnd(16)} {value} {valueSuffix && {` ${valueSuffix}`}} ); const UsageMonitorPredictions = ({ children }: { children: ReactNode }) => { const unicode = useUnicode(); return ( {unicode ? "🔮 Predictions:" : "Predictions:"} {children} ); }; const UsageMonitorPrediction = ({ label, value, valueColor = "yellow", }: UsageMonitorPredictionProps) => ( {label.padEnd(24)} {value} ); const UsageMonitorStatusBar = ({ clock = false, clockColor, sessionLabel, sessionColor = "green", exitHint, statusDot: dot = "green", separator = " | ", }: UsageMonitorStatusBarProps) => { const unicode = useUnicode(); const [time, setTime] = useState(() => new Date().toTimeString().slice(0, 8)); useInterval(() => setTime(new Date().toTimeString().slice(0, 8)), 1000); const dotInfo = statusDotChar(dot, unicode); return ( {clock && ( {unicode ? `⏰ ${time}` : `time ${time}`} )} {sessionLabel && ( {unicode ? `${separator}📄 ${sessionLabel}` : `${separator}session ${sessionLabel}`} )} {exitHint && {`${separator}${exitHint}`}} {`${separator}${dotInfo.char}`} ); }; UsageMonitorStatusBar.displayName = "UsageMonitor.StatusBar"; export const UsageMonitor = Object.assign(UsageMonitorRoot, { DistributionMetric: UsageMonitorDistributionMetric, Header: UsageMonitorHeader, Metric: UsageMonitorMetric, Prediction: UsageMonitorPrediction, Predictions: UsageMonitorPredictions, Section: UsageMonitorSection, StatRow: UsageMonitorStatRow, Stats: UsageMonitorStats, StatusBar: UsageMonitorStatusBar, Tags: UsageMonitorTags, }); 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","ink",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/ink","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"ink"}]]}]}]]}],["$","$L51",null,{"namespace":"@termcn","registryDependencies":["https://termcn.dev/r/ink/use-interval.json","https://termcn.dev/r/ink/use-unicode.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/usage-monitor.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]