4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T21a1,'use client'; import { Package, Trash2 } from 'lucide-react'; import { cn } from '@/registry/localmode/lib/utils'; /** * One cached model's info (mirrors the `ModelCacheInfo` snapshot the * LocalMode devtools bridge reports — hook output passes straight in). */ export interface ModelCacheEntryLike { /** Model identifier. */ modelId: string; /** Current status. */ status: 'loaded' | 'loading' | 'error'; /** Load duration in milliseconds. */ loadDurationMs: number; /** Last time the model was used (ISO timestamp). */ lastUsed: string; /** On-disk size in bytes, when known. */ sizeBytes?: number; } /** Props for {@link ModelCacheTable}. */ export interface ModelCacheTableProps { /** Cached-model entries, keyed by model ID. */ entries: Record; /** When provided, renders a per-row evict control invoking this callback. */ onEvict?: (modelId: string) => void; /** Additional class names merged onto the root element. */ className?: string; } /** Format a load duration for display (ms below 1s, seconds above). */ function formatDuration(ms: number) { if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`; return `${Math.round(ms)}ms`; } /** Human-readable byte size ("34.1 MB", "1.3 GB"). */ function formatBytes(bytes: number): string { if (bytes >= 1_073_741_824) return `${(bytes / 1_073_741_824).toFixed(1).replace(/\.0$/, '')} GB`; if (bytes >= 1_048_576) return `${(bytes / 1_048_576).toFixed(1).replace(/\.0$/, '')} MB`; if (bytes >= 1024) return `${Math.round(bytes / 1024)} KB`; return `${bytes} B`; } /** Relative time from an ISO timestamp ("3m ago"); null for unparseable input. */ function formatRelative(iso: string): string | null { const then = new Date(iso).getTime(); if (Number.isNaN(then)) return null; const seconds = Math.max(0, Math.round((Date.now() - then) / 1000)); if (seconds < 60) return 'just now'; const minutes = Math.round(seconds / 60); if (minutes < 60) return `${minutes}m ago`; const hours = Math.round(minutes / 60); if (hours < 24) return `${hours}h ago`; const days = Math.round(hours / 24); if (days < 30) return `${days}d ago`; const months = Math.round(days / 30); if (months < 12) return `${months}mo ago`; return `${Math.round(months / 12)}y ago`; } /** Badge tones per model status. */ const STATUS_STYLES: Record = { loaded: 'border-emerald-500/40 bg-emerald-500/5 text-emerald-600 dark:text-emerald-400', loading: 'border-amber-500/40 bg-amber-500/5 text-amber-600 dark:text-amber-400', error: 'border-destructive/40 bg-destructive/5 text-destructive', }; /** * Cached-model observability table: one row per model showing the model ID * (monospace, truncated with a full-ID tooltip), a status badge * (loaded / loading / error), the load duration (ms below one second, seconds * above), and a relative last-used time. A size column renders only when at * least one entry carries `sizeBytes` (human-formatted), and a per-row evict * control renders only when `onEvict` is provided. When no models are * present, an empty state explains that model loads are captured * automatically once devtools instrumentation is enabled. * * Works with any backend — pass whatever model-cache entries your app tracks. * Recommended data source: `useDevToolsModelCache` from * `@localmode/devtools/react` (its `Record` snapshot * passes straight into `entries` with no mapping layer). * * @example * ```tsx * * ``` */ export function ModelCacheTable({ entries, onEvict, className, }: ModelCacheTableProps) { const models = Object.values(entries); const showSize = models.some((m) => m.sizeBytes != null); if (models.length === 0) { return (

); } return (

{showSize && ( )} {onEvict && ( )} {models.map((m) => { const relative = formatRelative(m.lastUsed); return ( {showSize && ( )} {onEvict && ( )} ); })}

Cached models
Model	Status	Load	Last used	Size	Evict
{m.modelId}	{m.status === 'loading' && (	{m.status === 'loading' ? '-' : formatDuration(m.loadDurationMs)}	{relative ?? '-'}	{m.sizeBytes != null ? formatBytes(m.sizeBytes) : '-'}

); } export default ModelCacheTable; 4c:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4d",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/localmode/devtools/model-cache-table/model-cache-table.tsx","content":"$4f","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]