@tangle-network/ui 11.51.7 → 11.51.9

package/dist/utils/format.d.ts

@@ -1,5 +1,3 @@
-/** Format a duration in milliseconds to a human-readable string. */
-export declare function formatDuration(ms: number): string;
 /**
  * Markdown read as plain text, for a one-line preview: code fences, emphasis,
  * headings, list and quote markers, and link syntax are removed, so a preview
@@ -8,19 +6,23 @@ export declare function formatDuration(ms: number): string;
 export declare function plainTextFromMarkdown(text: string): string;
 /** Truncate text to `max` characters, appending "..." if truncated. */
 export declare function truncateText(text: string, max: number): string;
-/**
- * Format an uptime duration in milliseconds with progressive
- * granularity, so short-lived sandboxes don't render as "0d 0h".
- *  - < 60s        → "Ns"
- *  - < 60m        → "Nm Ss"
- *  - < 24h        → "Nh Mm"
- *  - otherwise    → "Nd Hh"
- */
-export declare function formatUptime(ms: number): string;
 /**
  * Format a byte count using binary units (KiB/MiB/GiB, surfaced as
  * "KB/MB/GB" for readability). KB and MB use one decimal below 10 and
  * round above; GB keeps two decimals below 10 so half-GB changes stay
  * visible on memory dashboards, and drops to one decimal above.
  */
-export declare function formatBytes(bytes: number): string;
+export declare function formatBytes(bytes: number): string;
+export declare function formatAxisDuration(ms: number): string;
+export declare const formatCompact: (value: number | null | undefined) => string;
+/** Span milliseconds, tenths below ten seconds, then seconds/minutes; days stay compact. */
+export declare function formatSpanDuration(ms: number): string;
+/** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
+export declare function formatCost(usd: number): string;
+/** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
+export declare function formatCount(n: number): string;
+/** Elapsed clock at millisecond precision, so zoomed axis ticks keep distinct labels. */
+export declare function formatClock(ms: number): string;
+/** Normalize labels to UTC without rewriting the source timestamp. */
+export declare function formatUtcTime(value: string | Date, includeDate?: boolean): string;
+export { formatSpanDuration as formatDuration, formatSpanDuration as formatUptime };

package/dist/utils/format.js

@@ -1,13 +1,4 @@
 // src/utils/format.ts
-/** Format a duration in milliseconds to a human-readable string. */
-function formatDuration(ms) {
-	if (ms < 1e3) return "<1s";
-	const seconds = Math.floor(ms / 1e3);
-	if (seconds < 60) return `${seconds}s`;
-	const minutes = Math.floor(seconds / 60);
-	const remaining = seconds % 60;
-	return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
-}
 /**
 * Markdown read as plain text, for a one-line preview: code fences, emphasis,
 * headings, list and quote markers, and link syntax are removed, so a preview
@@ -23,26 +14,6 @@ function truncateText(text, max) {
 	return cleaned.slice(0, max).trim() + "...";
 }
 /**
-* Format an uptime duration in milliseconds with progressive
-* granularity, so short-lived sandboxes don't render as "0d 0h".
-*  - < 60s        → "Ns"
-*  - < 60m        → "Nm Ss"
-*  - < 24h        → "Nh Mm"
-*  - otherwise    → "Nd Hh"
-*/
-function formatUptime(ms) {
-	if (!Number.isFinite(ms) || ms < 0) return "—";
-	const totalSeconds = Math.floor(ms / 1e3);
-	if (totalSeconds < 60) return `${totalSeconds}s`;
-	const minutes = Math.floor(totalSeconds / 60);
-	const seconds = totalSeconds % 60;
-	if (minutes < 60) return `${minutes}m ${seconds}s`;
-	const hours = Math.floor(minutes / 60);
-	const remMinutes = minutes % 60;
-	if (hours < 24) return `${hours}h ${remMinutes}m`;
-	return `${Math.floor(hours / 24)}d ${hours % 24}h`;
-}
-/**
 * Format a byte count using binary units (KiB/MiB/GiB, surfaced as
 * "KB/MB/GB" for readability). KB and MB use one decimal below 10 and
 * round above; GB keeps two decimals below 10 so half-GB changes stay
@@ -58,4 +29,53 @@ function formatBytes(bytes) {
 	const gb = mb / 1024;
 	return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
 }
-export { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText };
+function formatAxisDuration(ms) {
+	if (ms >= 864e5) {
+		const days = Math.floor(ms / 864e5), hours = Math.floor(ms % 864e5 / 36e5);
+		return `${days}d${hours ? ` ${hours}h` : ""}`;
+	}
+	const s = ms / 1e3;
+	if (s < 60) return `${Math.round(s)} s`;
+	if (s < 3600) return `${(s / 60).toFixed(1)} min`;
+	return `${(s / 3600).toFixed(1)} h`;
+}
+const formatCompact = (value) => value === null || value === void 0 || !Number.isFinite(value) ? "—" : new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumFractionDigits: 1
+}).format(value);
+/** Span milliseconds, tenths below ten seconds, then seconds/minutes; days stay compact. */
+function formatSpanDuration(ms) {
+	if (!Number.isFinite(ms) || ms < 0) return "—";
+	const precision = ms < 1e4 ? 100 : ms < 36e5 ? 1e3 : 6e4;
+	return ms >= 864e5 ? formatAxisDuration(ms) : ms < 1e3 ? `${Math.round(ms)}ms` : formatClock(Math.round(ms / precision) * precision);
+}
+/** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
+function formatCost(usd) {
+	if (!Number.isFinite(usd) || usd < 0) return "—";
+	if (usd === 0) return "$0.00";
+	if (usd < .01) return `$${usd.toPrecision(1)}`;
+	return `$${usd.toFixed(2)}`;
+}
+/** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
+function formatCount(n) {
+	return !Number.isSafeInteger(n) || n < 0 ? "—" : formatCompact(n);
+}
+/** Elapsed clock at millisecond precision, so zoomed axis ticks keep distinct labels. */
+function formatClock(ms) {
+	if (!Number.isFinite(ms) || ms < 0) return "—";
+	const seconds = Math.round(ms) / 1e3;
+	const hours = Math.floor(seconds / 3600), minutes = Math.floor(seconds % 3600 / 60), rest = Number((seconds % 60).toFixed(3));
+	return [
+		hours ? `${hours}h` : "",
+		minutes ? `${minutes}m` : "",
+		rest ? `${rest}s` : ""
+	].filter(Boolean).join(" ") || "0s";
+}
+/** Normalize labels to UTC without rewriting the source timestamp. */
+function formatUtcTime(value, includeDate = false) {
+	const date = typeof value === "string" ? new Date(value) : value;
+	if (!Number.isFinite(date.valueOf())) return "Unknown time";
+	const iso = date.toISOString();
+	return `${includeDate ? iso.slice(0, 19).replace("T", " ") : iso.slice(11, 19)} UTC`;
+}
+export { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, plainTextFromMarkdown, truncateText };

package/dist/utils.d.ts

@@ -1,8 +1,8 @@
 import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { copyText } from "./utils/copy-text.js";
-import { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
+import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration as formatSpanDuration, formatUtcTime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { timeAgo } from "./utils/time-ago.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
 import { cn } from "./lib/utils.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/dist/utils.js

@@ -1,8 +1,8 @@
 import { ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline } from "./lib/interaction.js";
 import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
 import { cn } from "./lib/utils.js";
+import { formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatDuration as formatSpanDuration, formatUtcTime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
-import { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from "./utils/format.js";
 import { copyText } from "./utils/copy-text.js";
 import { timeAgo } from "./utils/time-ago.js";
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatAxisDuration, formatBytes, formatClock, formatCompact, formatCost, formatCount, formatSpanDuration as formatDuration, formatSpanDuration, formatSpanDuration as formatUptime, formatUtcTime, getToolCategory, getToolDisplayMetadata, getToolErrorText, ixControl, ixControlAfter, ixControlSoft, ixField, ixRow, ixSelected, ixTabUnderline, plainTextFromMarkdown, timeAgo, truncateText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.7",
+  "version": "11.51.9",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -165,6 +165,16 @@
       "types": "./dist/hooks/use-follow-tail.d.ts",
       "import": "./dist/hooks/use-follow-tail.js",
       "default": "./dist/hooks/use-follow-tail.js"
+    },
+    "./utils/format": {
+      "types": "./dist/utils/format.d.ts",
+      "import": "./dist/utils/format.js",
+      "default": "./dist/utils/format.js"
+    },
+    "./primitives/hover-card": {
+      "types": "./dist/primitives/hover-card.d.ts",
+      "import": "./dist/primitives/hover-card.js",
+      "default": "./dist/primitives/hover-card.js"
     }
   },
   "dependencies": {
@@ -177,7 +187,6 @@
     "@radix-ui/react-context-menu": "^2.4.1",
     "@radix-ui/react-dialog": "^1.3.1",
     "@radix-ui/react-dropdown-menu": "^2.2.1",
-    "@radix-ui/react-hover-card": "^1.2.1",
     "@radix-ui/react-label": "^2.1.17",
     "@radix-ui/react-popover": "^1.3.1",
     "@radix-ui/react-progress": "^1.2.1",

package/src/chat/chat-message.tsx

@@ -1,3 +1,4 @@
+import { formatUtcTime } from "../utils/format";
 /**
  * ChatMessage — one message in the conversation.
  *
@@ -84,7 +85,7 @@ export function ChatMessage({
           )}
           {timestamp && (
             <span className="text-muted-foreground text-xs">
-              {formatTime(timestamp)}
+              {formatUtcTime(timestamp)}
             </span>
           )}
         </div>
@@ -122,9 +123,3 @@ export function ChatMessage({
   );
 }
 
-function formatTime(date: Date): string {
-  return date.toLocaleTimeString(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-  });
-}

package/src/chat/user-message.tsx

@@ -1,3 +1,4 @@
+import { formatUtcTime } from "../utils/format";
 import { TRANSCRIPT_TEXT } from "./transcript-text";
 import { memo, useLayoutEffect, useRef, useState, type ReactNode } from "react";
 import type { ChatAuthor, SessionMessage } from "../types/message";
@@ -30,9 +31,6 @@ export interface UserMessageProps {
   collapsedLines?: number;
 }
 
-function formatTime(date: Date): string {
-  return Number.isFinite(date.valueOf()) ? date.toISOString().slice(11, 16) + " UTC" : "Invalid Date";
-}
 
 function MessageActions({ children, align = "end" }: { children: ReactNode; align?: "start" | "end" }) {
   return (
@@ -104,7 +102,7 @@ function UserBubble({ text, timestamp, actions, lines }: {
               data-user-message-time=""
               className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-sm text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
             >
-              {formatTime(timestamp)}
+              {formatUtcTime(timestamp)}
             </span>
           ) : null}
           <BubbleText text={text} lines={lines} />
@@ -138,7 +136,7 @@ function OtherPersonBubble({ text, timestamp, actions, author, lines }: {
               data-user-message-time=""
               className="pointer-events-none absolute left-full top-1/2 ml-3 -translate-y-1/2 whitespace-nowrap text-sm text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
             >
-              {formatTime(timestamp)}
+              {formatUtcTime(timestamp)}
             </span>
           ) : null}
           <BubbleText text={text} lines={lines} />

package/src/editor/source-markdown-editor.test.tsx

@@ -1,6 +1,6 @@
 import { act, render, waitFor } from "@testing-library/react";
 import type { Editor } from "@tiptap/react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { MarkdownDocumentEditor } from "./markdown-document-editor";
 import { CALL_SHEET, KITCHEN_SINK } from "./source-markdown.fixtures";
 
@@ -10,12 +10,12 @@ const PEERS_LOADED = { timeout: 15_000 };
 const LOADS_PEERS = 30_000;
 
 async function openEditor(value: string) {
-  const onChange = vi.fn<(markdown: string) => void>();
+  const changes: string[] = [];
   let editor: Editor | null = null;
   const view = render(
     <MarkdownDocumentEditor
       value={value}
-      onChange={(markdown) => onChange(markdown)}
+      onChange={(markdown) => changes.push(markdown)}
       onReady={(ready) => {
         editor = ready;
       }}
@@ -32,9 +32,9 @@ async function openEditor(value: string) {
     get editor() {
       return editor! as Editor;
     },
-    onChange,
+    changes,
     /** The Markdown the editor last reported, or the value it opened. */
-    saved: () => onChange.mock.calls.at(-1)?.[0] ?? value,
+    saved: () => changes.at(-1) ?? value,
   };
 }
 
@@ -63,13 +63,13 @@ function tableRows(markdown: string) {
 
 describe("MarkdownDocumentEditor source preservation", () => {
   it("opens every Markdown construct without reporting a change", async () => {
-    const { editor, onChange, view } = await openEditor(KITCHEN_SINK);
+    const { editor, changes, view } = await openEditor(KITCHEN_SINK);
     act(() => {
       editor.commands.setTextSelection(1);
       editor.setEditable(false);
       editor.setEditable(true);
     });
-    expect(onChange).not.toHaveBeenCalled();
+    expect(changes).toHaveLength(0);
     // The table is shown as a table, read-only, instead of a run-on paragraph.
     const table = view.container.querySelector('[data-md-kind="table"] table');
     expect(table?.querySelectorAll("tbody tr")).toHaveLength(1);

package/src/files/file-tree.tsx

@@ -1,3 +1,4 @@
+import { formatBytes } from "../utils/format";
 /**
  * FileTree — directory browser with file type icons.
  *
@@ -179,7 +180,7 @@ function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }: Tree
         <span className="truncate">{node.name}</span>
         {node.size !== undefined && !isDir && (
           <span className="text-muted-foreground text-xs ml-auto tabular-nums">
-            {formatSize(node.size)}
+            {formatBytes(node.size)}
           </span>
         )}
       </button>
@@ -206,12 +207,6 @@ function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }: Tree
   );
 }
 
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes}B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}K`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
-}
-
 export function FileTree({
   root,
   selectedPath,

package/src/primitives/hover-card.tsx

@@ -1,89 +1,79 @@
 import { cn } from "../lib/utils";
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover";
 
-/**
- * A rich hover preview: the face of a person, product, or record that appears
- * when you pause on its trigger. Radix HoverCard under the hood, styled on the
- * md3 surface ladder — the card sits on `--md3-surface-container-highest`
- * (L4, the overlay plane) so it reads as a floating layer above the page.
- *
- * ```tsx
- * <HoverCard>
- *   <HoverCardTrigger>@noa</HoverCardTrigger>
- *   <HoverCardContent>
- *     <HoverCardHeader>
- *       <HoverCardTitle>Noa</HoverCardTitle>
- *       <HoverCardDescription>Housekeeping · es</HoverCardDescription>
- *     </HoverCardHeader>
- *     <p>3 rooms today · 1 pending</p>
- *   </HoverCardContent>
- * </HoverCard>
- * ```
- *
- * The content is **lazy** — it mounts only when hovered, so a page of 50
- * triggers costs nothing until the person pauses on one.
- */
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+const HoverIntent = React.createContext({ enter: (_target: Element) => {}, leave: () => {}, restore: () => {} });
+type HoverCardProps = React.ComponentProps<typeof Popover> & {
+  /** Existing DOM trigger for delegated canvas or virtual-list previews. */
+  anchor?: HTMLElement | { getBoundingClientRect: () => DOMRect; contextElement: HTMLElement } | null;
+  openDelay?: number;
+  closeDelay?: number;
+};
 
-const HoverCard = HoverCardPrimitive.Root;
+/** One hover policy and Popover's keyboard/focus behavior; delays follow the trigger's fast token. */
+export function HoverCard({ anchor, open: controlled, defaultOpen = false, onOpenChange, openDelay, closeDelay, children, ...props }: HoverCardProps) {
+  const element = anchor && ("contextElement" in anchor ? anchor.contextElement : anchor);
+  const [own, setOwn] = React.useState({ anchor: element, open: defaultOpen });
+  const intent = React.useRef<{ timer?: ReturnType<typeof setTimeout>; target?: Element; restoring?: boolean }>({});
+  if (element) intent.current.target = element;
+  const change = React.useCallback((next: boolean) => { clearTimeout(intent.current.timer); if (controlled === undefined) setOwn({ anchor: element, open: next }); onOpenChange?.(next); }, [controlled, onOpenChange, element]);
+  const delay = (target: Element | null | undefined) => {
+    if (typeof document === "undefined") return 0;
+    const value = getComputedStyle(target ?? document.documentElement).getPropertyValue("--duration-fast").trim();
+    return (parseFloat(value) || 0) * (value.endsWith("ms") ? 1 : 1000);
+  };
+  const enter = React.useCallback((target: Element) => { if (intent.current.restoring) return; if (!target.closest("[data-hover-card]")) intent.current.target = target; clearTimeout(intent.current.timer); intent.current.timer = setTimeout(() => change(true), openDelay ?? delay(target)); }, [change, openDelay]);
+  const leave = React.useCallback(() => { clearTimeout(intent.current.timer); intent.current.timer = setTimeout(() => change(false), closeDelay ?? delay(element ?? intent.current.target)); }, [change, closeDelay, element]);
+  React.useEffect(() => {
+    if (!element) return () => clearTimeout(intent.current.timer);
+    const show = () => enter(element), blur = (event: FocusEvent) => { if (!(event.relatedTarget instanceof Element && event.relatedTarget.closest("[data-hover-card]"))) leave(); };
+    element.addEventListener("pointerenter", show); element.addEventListener("pointerleave", leave); element.addEventListener("focusin", show); element.addEventListener("focusout", blur);
+    return () => { clearTimeout(intent.current.timer); element.removeEventListener("pointerenter", show); element.removeEventListener("pointerleave", leave); element.removeEventListener("focusin", show); element.removeEventListener("focusout", blur); };
+  }, [anchor, element, enter, leave]);
+  const restore = () => {
+    intent.current.restoring = true;
+    if (document.activeElement === document.body && intent.current.target instanceof HTMLElement) intent.current.target.focus({ preventScroll: true });
+    queueMicrotask(() => { intent.current.restoring = false; });
+  };
+  return <HoverIntent.Provider value={{ enter, leave, restore }}><Popover {...props} open={anchor === null ? false : controlled ?? (own.anchor === element && own.open)} onOpenChange={change}>
+    {anchor && <PopoverAnchor virtualRef={{ current: anchor }} />}{children}
+  </Popover></HoverIntent.Provider>;
+}
 
-const HoverCardTrigger = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <HoverCardPrimitive.Trigger
-    ref={ref}
-    className={cn("cursor-pointer underline-offset-4 hover:underline", className)}
-    {...props}
-  />
-));
-HoverCardTrigger.displayName = HoverCardPrimitive.Trigger.displayName;
+export const HoverCardTrigger = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement> & { asChild?: boolean }>(
+  ({ className, onPointerEnter, onPointerLeave, onFocus, onBlur, asChild, ...props }, ref) => {
+    const intent = React.useContext(HoverIntent);
+    const Trigger = asChild ? Slot : "a";
+    return <PopoverTrigger asChild><Trigger ref={ref} tabIndex={0} className={cn("cursor-pointer underline-offset-4 hover:underline", className)}
+      onPointerEnter={event => { onPointerEnter?.(event); if (!event.defaultPrevented) intent.enter(event.currentTarget); }}
+      onPointerLeave={event => { onPointerLeave?.(event); if (!event.defaultPrevented) intent.leave(); }}
+      onFocus={event => { onFocus?.(event); if (!event.defaultPrevented) intent.enter(event.currentTarget); }}
+      onBlur={event => { onBlur?.(event); if (!event.defaultPrevented && !(event.relatedTarget instanceof Element && event.relatedTarget.closest("[data-hover-card]"))) intent.leave(); }} {...props} /></PopoverTrigger>;
+  },
+);
+HoverCardTrigger.displayName = "HoverCardTrigger";
 
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> & {
-    /** Which edge the card prefers. Defaults to bottom. */
-    side?: "top" | "right" | "bottom" | "left";
-    /** Pixel gap from the trigger. Defaults to 6. */
-    alignOffset?: number;
-  }
->(({ className, side = "bottom", alignOffset = 6, ...props }, ref) => (
-  <HoverCardPrimitive.Portal>
-    <HoverCardPrimitive.Content
-      ref={ref}
-      side={side}
-      alignOffset={alignOffset}
-      sideOffset={6}
-      className={cn(
-        "z-50 w-64 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        className
-      )}
-      {...props}
-    />
-  </HoverCardPrimitive.Portal>
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+export const HoverCardContent = React.forwardRef<React.ElementRef<typeof PopoverContent>, React.ComponentPropsWithoutRef<typeof PopoverContent>>(
+  ({ className, onPointerEnter, onPointerLeave, onOpenAutoFocus, onCloseAutoFocus, ...props }, ref) => {
+    const intent = React.useContext(HoverIntent);
+    return <PopoverContent ref={ref} data-hover-card className={cn("w-64", className)}
+      onOpenAutoFocus={event => { onOpenAutoFocus?.(event); event.preventDefault(); }}
+      onCloseAutoFocus={event => { onCloseAutoFocus?.(event); if (!event.defaultPrevented) { event.preventDefault(); intent.restore(); } }}
+      onPointerEnter={event => { onPointerEnter?.(event); if (!event.defaultPrevented) intent.enter(event.currentTarget); }}
+      onPointerLeave={event => { onPointerLeave?.(event); if (!event.defaultPrevented) intent.leave(); }} {...props} />;
+  },
+);
+HoverCardContent.displayName = "HoverCardContent";
 
-function HoverCardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+export function HoverCardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("flex flex-col gap-1 pb-2", className)} {...props} />;
 }
 
-function HoverCardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+export function HoverCardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
   return <h4 className={cn("text-sm font-semibold leading-none", className)} {...props} />;
 }
 
-function HoverCardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+export function HoverCardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
   return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
 }
-
-export {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-  HoverCardHeader,
-  HoverCardTitle,
-  HoverCardDescription,
-};

package/src/primitives/popover.tsx

@@ -21,9 +21,9 @@ const PopoverClose = PopoverPrimitive.Close;
  */
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, asChild, children, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { container?: HTMLElement | null }
+>(({ className, align = "center", sideOffset = 4, asChild, children, container, ...props }, ref) => (
+  <PopoverPrimitive.Portal container={container}>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}

package/src/primitives/upload-progress.tsx

@@ -1,3 +1,4 @@
+import { formatBytes } from "../utils/format";
 /**
  * UploadProgress — file upload status indicators.
  *
@@ -25,12 +26,6 @@ export interface UploadProgressProps {
   className?: string;
 }
 
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes}B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
-}
-
 export function UploadProgress({ files, onRemove, onRetry, className }: UploadProgressProps) {
   if (files.length === 0) return null;
 
@@ -66,7 +61,7 @@ export function UploadProgress({ files, onRemove, onRetry, className }: UploadPr
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
               <span className="truncate font-medium text-foreground">{file.name}</span>
-              <span className="shrink-0 text-[length:var(--font-size-help,0.75rem)] text-muted-foreground">{formatSize(file.size)}</span>
+              <span className="shrink-0 text-[length:var(--font-size-help,0.75rem)] text-muted-foreground">{formatBytes(file.size)}</span>
             </div>
             {/* Progress bar */}
             {file.status === "uploading" && file.progress !== undefined && (

package/src/utils/format.ts

@@ -1,13 +1,3 @@
-/** Format a duration in milliseconds to a human-readable string. */
-export function formatDuration(ms: number): string {
-  if (ms < 1000) return "<1s";
-  const seconds = Math.floor(ms / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  const remaining = seconds % 60;
-  return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
-}
-
 /**
  * Markdown read as plain text, for a one-line preview: code fences, emphasis,
  * headings, list and quote markers, and link syntax are removed, so a preview
@@ -32,29 +22,6 @@ export function truncateText(text: string, max: number): string {
   return cleaned.slice(0, max).trim() + "...";
 }
 
-/**
- * Format an uptime duration in milliseconds with progressive
- * granularity, so short-lived sandboxes don't render as "0d 0h".
- *  - < 60s        → "Ns"
- *  - < 60m        → "Nm Ss"
- *  - < 24h        → "Nh Mm"
- *  - otherwise    → "Nd Hh"
- */
-export function formatUptime(ms: number): string {
-  if (!Number.isFinite(ms) || ms < 0) return "—";
-  const totalSeconds = Math.floor(ms / 1000);
-  if (totalSeconds < 60) return `${totalSeconds}s`;
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  if (minutes < 60) return `${minutes}m ${seconds}s`;
-  const hours = Math.floor(minutes / 60);
-  const remMinutes = minutes % 60;
-  if (hours < 24) return `${hours}h ${remMinutes}m`;
-  const days = Math.floor(hours / 24);
-  const remHours = hours % 24;
-  return `${days}d ${remHours}h`;
-}
-
 /**
  * Format a byte count using binary units (KiB/MiB/GiB, surfaced as
  * "KB/MB/GB" for readability). KB and MB use one decimal below 10 and
@@ -71,3 +38,53 @@ export function formatBytes(bytes: number): string {
   const gb = mb / 1024;
   return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
 }
+
+export function formatAxisDuration(ms: number): string {
+  if (ms >= 86_400_000) { const days = Math.floor(ms / 86_400_000), hours = Math.floor(ms % 86_400_000 / 3_600_000); return `${days}d${hours ? ` ${hours}h` : ''}`; }
+  const s = ms / 1000;
+  if (s < 60) return `${Math.round(s)} s`;
+  if (s < 3600) return `${(s / 60).toFixed(1)} min`;
+  return `${(s / 3600).toFixed(1)} h`;
+}
+
+export const formatCompact = (value: number | null | undefined) =>
+  value === null || value === undefined || !Number.isFinite(value) ? '—' : new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 }).format(value)
+
+/** Span milliseconds, tenths below ten seconds, then seconds/minutes; days stay compact. */
+export function formatSpanDuration(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '—'
+  const precision = ms < 10_000 ? 100 : ms < 3_600_000 ? 1000 : 60_000
+  return ms >= 86_400_000 ? formatAxisDuration(ms) : ms < 1000 ? `${Math.round(ms)}ms` : formatClock(Math.round(ms / precision) * precision)
+}
+
+/** $0.12, $0.005, $12.40; never rounds a recorded nonzero cost to $0.00. */
+export function formatCost(usd: number): string {
+  if (!Number.isFinite(usd) || usd < 0) return '—'
+  if (usd === 0) return '$0.00'
+  if (usd < 0.01) return `$${usd.toPrecision(1)}`
+  return `$${usd.toFixed(2)}`
+}
+
+/** 9.8k, 754.4k, 1.2M with the exact count left to a title. */
+export function formatCount(n: number): string {
+  return !Number.isSafeInteger(n) || n < 0 ? '—' : formatCompact(n)
+}
+
+/** Elapsed clock at millisecond precision, so zoomed axis ticks keep distinct labels. */
+export function formatClock(ms: number): string {
+  if (!Number.isFinite(ms) || ms < 0) return '—'
+  const seconds = Math.round(ms) / 1000
+  const hours = Math.floor(seconds / 3600), minutes = Math.floor(seconds % 3600 / 60), rest = Number((seconds % 60).toFixed(3))
+  return [hours ? `${hours}h` : '', minutes ? `${minutes}m` : '', rest ? `${rest}s` : ''].filter(Boolean).join(' ') || '0s'
+}
+
+/** Normalize labels to UTC without rewriting the source timestamp. */
+export function formatUtcTime(value: string | Date, includeDate = false) {
+  const date = typeof value === "string" ? new Date(value) : value
+  if (!Number.isFinite(date.valueOf())) return 'Unknown time'
+  const iso = date.toISOString()
+  return `${includeDate ? iso.slice(0, 19).replace('T', ' ') : iso.slice(11, 19)} UTC`
+}
+
+// Existing names share the canonical duration implementation.
+export { formatSpanDuration as formatDuration, formatSpanDuration as formatUptime };

package/src/utils/index.ts

@@ -1,5 +1,5 @@
 export { copyText } from './copy-text';
-export { formatBytes, formatDuration, formatUptime, plainTextFromMarkdown, truncateText } from './format';
+export * from './format';
 export { timeAgo } from './time-ago';
 export {
   getToolCategory,