@vvedantb/native-ui 0.3.17 → 0.5.0

package/src/StackPageHeader.tsx

@@ -0,0 +1,100 @@
+import { useState, type ReactNode } from "react";
+import { Text, View } from "react-native";
+import { IconChevronLeft } from "@tabler/icons-react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { cn } from "./cn";
+import { PAGE_HEADER_HEIGHT, sizeStyle, textStyle } from "./controlStyles";
+import { HeaderIconButton } from "./HeaderIconButton";
+import { PageTitle } from "./PageTitle";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+export type StackPageHeaderProps = {
+  title: string;
+  /** Muted line under the title, up to two lines. */
+  description?: string;
+  /** Shows a back `HeaderIconButton` at the start that calls this. No button without it. */
+  onBack?: () => void;
+  /** Names the back button. Default "Back". */
+  backLabel?: string;
+  /** Actions at the end, such as a `HeaderIconButton`. */
+  headerRight?: ReactNode;
+  backTestID?: string;
+  /**
+   * Pad the top by the safe-area inset. Default `true`. Pass `false` under a
+   * native header or inside a view that already pads the inset.
+   */
+  safeTop?: boolean;
+  testID?: string;
+  className?: string;
+};
+
+/**
+ * A stack screen header with no fill, for a screen over `AmbientBackground`:
+ * a back chevron `HeaderIconButton` at the start, `headerRight` at the end and
+ * a centred `PageTitle` (Instrument Sans 600 at 20 / 25) with an optional
+ * muted description. The two sides are the same width, the wider of the back
+ * button and `headerRight`, so the title stays centred on the screen and a
+ * long one is cut off before it reaches them. The row is at least 56 high
+ * below the top inset, as `PageHeader`, with the `px-4` screen padding.
+ */
+export function StackPageHeader({
+  title,
+  description,
+  onBack,
+  backLabel = "Back",
+  headerRight,
+  backTestID,
+  safeTop = true,
+  testID,
+  className,
+}: StackPageHeaderProps) {
+  const insets = useSafeAreaInsets();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const [rightWidth, setRightWidth] = useState(0);
+  const top = safeTop ? insets.top : 0;
+  // `HeaderIconButton` is 48 across (56 with larger text).
+  const backWidth = onBack ? (largerText ? 56 : 48) : 0;
+  const side = { minWidth: Math.max(backWidth, headerRight != null ? rightWidth : 0) };
+  const descriptionSize = largerText ? "text-base" : "text-sm";
+
+  return (
+    <View
+      testID={testID}
+      className={cn("flex-row items-center gap-2 px-4", className)}
+      style={{ paddingTop: top, minHeight: top + PAGE_HEADER_HEIGHT }}
+    >
+      <View className="flex-1 flex-row items-center justify-start" style={side}>
+        {onBack ? (
+          <HeaderIconButton label={backLabel} testID={backTestID} onPress={onBack}>
+            <IconChevronLeft size={largerText ? 26 : 22} color={tokens.color.foreground[scheme]} />
+          </HeaderIconButton>
+        ) : null}
+      </View>
+      <View className="min-w-0 shrink items-center py-2">
+        <PageTitle className="text-center">{title}</PageTitle>
+        {description ? (
+          <Text
+            numberOfLines={2}
+            className={cn("text-center font-instrument-sans", descriptionSize)}
+            style={[textStyle("muted", scheme), sizeStyle(descriptionSize)]}
+          >
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      <View className="flex-1 flex-row items-center justify-end" style={side}>
+        {headerRight != null ? (
+          <View
+            className="flex-row items-center gap-2"
+            onLayout={(event) => setRightWidth(event.nativeEvent.layout.width)}
+          >
+            {headerRight}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/StatGrid.tsx

@@ -0,0 +1,80 @@
+import { Text, View } from "react-native";
+import { cn } from "./cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+export type StatGridItem = { label: string; value: string; testID?: string };
+
+export type StatGridProps = {
+  items: StatGridItem[];
+  /** Tiles per row. Default 2. */
+  columns?: 2 | 3;
+  testID?: string;
+};
+
+/** `items` in rows of `columns`. The last row is padded with `null`, so every tile has the same width. */
+export function statGridRows<T>(items: T[], columns: number): (T | null)[][] {
+  const rows: (T | null)[][] = [];
+  for (let start = 0; start < items.length; start += columns) {
+    const row: (T | null)[] = items.slice(start, start + columns);
+    while (row.length < columns) row.push(null);
+    rows.push(row);
+  }
+  return rows;
+}
+
+/**
+ * Label and value tiles in rows of 2 or 3, each the flat web card
+ * (`cardStyle`: `surfaceCard` fill, radius 16, no shadow) with the web
+ * `Surface` padding (`p-4`). The label is muted `text-sm`; the value is
+ * semibold `text-xl` in the foreground, with tabular figures. VoiceOver and
+ * TalkBack read each tile as one element: "Steps, 8,432".
+ */
+export function StatGrid({ items, columns = 2, testID }: StatGridProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  if (items.length === 0) return null;
+  const labelSize = largerText ? "text-base" : "text-sm";
+  const valueSize = largerText ? "text-2xl" : "text-xl";
+  return (
+    <View testID={testID} className="gap-3">
+      {statGridRows(items, columns).map((row, rowIndex) => (
+        <View key={rowIndex} className="flex-row gap-3">
+          {row.map((item, index) =>
+            item ? (
+              <View
+                key={index}
+                testID={item.testID}
+                accessible
+                accessibilityLabel={`${item.label}, ${item.value}`}
+                className="min-w-0 flex-1 gap-1 p-4"
+                style={cardStyle(scheme)}
+              >
+                <Text
+                  className={cn("font-instrument-sans", labelSize)}
+                  style={[textStyle("muted", scheme), sizeStyle(labelSize)]}
+                >
+                  {item.label}
+                </Text>
+                <Text
+                  className={cn("font-instrument-sans-semibold", valueSize)}
+                  style={[
+                    textStyle("foreground", scheme),
+                    sizeStyle(valueSize, "tight"),
+                    typeStyle("semibold"),
+                    { fontVariant: ["tabular-nums"] },
+                  ]}
+                >
+                  {item.value}
+                </Text>
+              </View>
+            ) : (
+              <View key={index} className="flex-1" />
+            ),
+          )}
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/StatusDot.tsx

@@ -4,7 +4,10 @@ import { palette, withAlpha } from "./palette";
 import { tokens } from "./tokens";
 import { useScheme } from "./useScheme";
 
-/** The web `StatusTone`s. */
+/**
+ * The web `StatusTone`s, and `info` (native only, from 0.5.0): neutral news
+ * such as "synced" or "new", in blue.
+ */
 export type StatusTone =
   | "progress"
   | "business-review"
@@ -13,6 +16,7 @@ export type StatusTone =
   | "cancelled"
   | "active"
   | "critical"
+  | "info"
   | "neutral";
 
 export type StatusDotProps = ViewProps & {
@@ -22,6 +26,13 @@ export type StatusDotProps = ViewProps & {
   className?: string;
 };
 
+/**
+ * The `info` blue: Tailwind `blue-500` in light and the lighter `blue-400` in
+ * dark. Local to the dot: `tokens.css` has no `--info`, so it is not a
+ * `palette` key.
+ */
+const INFO = { light: "#3b82f6", dark: "#60a5fa" } as const;
+
 function toneColor(tone: StatusTone, scheme: "light" | "dark") {
   switch (tone) {
     case "progress":
@@ -37,6 +48,8 @@ function toneColor(tone: StatusTone, scheme: "light" | "dark") {
       return withAlpha(tokens.color.muted[scheme], 0.4);
     case "critical":
       return palette.danger[scheme];
+    case "info":
+      return INFO[scheme];
     default:
       return withAlpha(tokens.color.muted[scheme], 0.6);
   }

package/src/ThemeToggle.tsx

@@ -9,6 +9,10 @@ export type ThemeToggleProps = {
   testID?: string;
 };
 
+/** Logged when NativeWind's `setColorScheme` throws. */
+const DARK_MODE_CLASS_HINT =
+  'ThemeToggle could not set the colour scheme. NativeWind throws while Tailwind darkMode is "media" (the default): set darkMode: "class" in tailwind.config.js. See the @vvedantb/native-ui README, Theme.';
+
 /**
  * A `HeaderIconButton` that switches between light and dark with NativeWind's
  * `setColorScheme`, the scheme `useScheme` reads. It shows and names the
@@ -16,6 +20,10 @@ export type ThemeToggleProps = {
  * "Switch to light mode" in dark. The choice lasts only as long as NativeWind
  * keeps it; an app that restores it on the next launch stores
  * `useColorScheme().colorScheme` itself.
+ *
+ * `setColorScheme` throws unless the app sets Tailwind `darkMode: "class"`.
+ * The press then logs that fix with `console.error` and leaves the scheme as
+ * it is, instead of throwing from the press handler.
  */
 export function ThemeToggle({ testID }: ThemeToggleProps) {
   const { setColorScheme } = useColorScheme();
@@ -24,12 +32,16 @@ export function ThemeToggle({ testID }: ThemeToggleProps) {
   const next = scheme === "dark" ? "light" : "dark";
   const Icon = next === "dark" ? IconMoon : IconSun;
 
+  const toggle = () => {
+    try {
+      setColorScheme(next);
+    } catch (error) {
+      console.error(DARK_MODE_CLASS_HINT, error);
+    }
+  };
+
   return (
-    <HeaderIconButton
-      label={`Switch to ${next} mode`}
-      testID={testID}
-      onPress={() => setColorScheme(next)}
-    >
+    <HeaderIconButton label={`Switch to ${next} mode`} testID={testID} onPress={toggle}>
       <Icon size={largerText ? 26 : 22} color={tokens.color.foreground[scheme]} />
     </HeaderIconButton>
   );

package/src/ai/activity-step.tsx

@@ -0,0 +1,57 @@
+import type { ComponentType } from "react";
+import { IconAlertTriangle, IconCheck, type IconProps } from "@tabler/icons-react-native";
+import { Spinner } from "../Spinner";
+import { useLargerText } from "../theme";
+import { AgentTraceDescription, AgentTraceIcon, AgentTraceLine, AgentTraceTitle } from "./trace";
+
+export type ActivityStepStatus = "running" | "complete" | "error";
+
+export type ActivityStepProps = {
+  /** What the AI is doing, such as "Searching the web" or "Reading 3 files". */
+  label: string;
+  /** The tool's icon. Without one, the line shows the status icon only. */
+  icon?: ComponentType<IconProps>;
+  /** `running` pulses the label and shows a spinner; `complete` a check; `error` a warning in the danger colour. Default `complete`. */
+  status?: ActivityStepStatus;
+  /** Faded detail after the label, such as "Worked for 12s" (see `formatElapsed`). */
+  description?: string;
+  testID?: string;
+};
+
+/**
+ * One tool or activity step as a single trace line: icon, label, status and
+ * an optional description. A light stand-in for the web `ActivityTasks`, built
+ * on the `AgentTrace` parts. Its accessibility label reads the label, the
+ * status and the description.
+ */
+export function ActivityStep({
+  label,
+  icon,
+  status = "complete",
+  description,
+  testID,
+}: ActivityStepProps) {
+  const largerText = useLargerText();
+  const running = status === "running";
+  const state = running ? "in progress" : status === "error" ? "failed" : "done";
+  return (
+    <AgentTraceLine
+      testID={testID}
+      status={status === "error" ? "error" : undefined}
+      accessible
+      accessibilityLabel={[label, state, description].filter(Boolean).join(", ")}
+      accessibilityState={{ busy: running }}
+    >
+      {icon ? <AgentTraceIcon icon={icon} /> : null}
+      <AgentTraceTitle shimmer={running}>{label}</AgentTraceTitle>
+      {description ? <AgentTraceDescription>{description}</AgentTraceDescription> : null}
+      {running ? (
+        <AgentTraceIcon>
+          <Spinner size={largerText ? "md" : "sm"} decorative />
+        </AgentTraceIcon>
+      ) : (
+        <AgentTraceIcon icon={status === "error" ? IconAlertTriangle : IconCheck} />
+      )}
+    </AgentTraceLine>
+  );
+}

package/src/ai/attachments.tsx

@@ -0,0 +1,153 @@
+import { createContext, useContext, type ComponentType } from "react";
+import { Image, Pressable, View, type ViewProps } from "react-native";
+import {
+  IconFileText,
+  IconMusic,
+  IconPaperclip,
+  IconPhoto,
+  IconVideo,
+  IconWorld,
+  IconX,
+  type IconProps,
+} from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { touchSlop } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { ResponseText } from "./response-text";
+
+/**
+ * A file or source attached to a prompt or message. The fields the web reads
+ * from the `ai` SDK `FileUIPart` and `SourceDocumentUIPart`, without the SDK.
+ */
+export type AttachmentData = {
+  id: string;
+  /** `"source-document"` for a referenced source. Default a file. */
+  type?: "file" | "source-document";
+  filename?: string;
+  /** MIME type, such as `image/png`. */
+  mediaType?: string;
+  /** A local or remote URI. An image with one shows a thumbnail. */
+  url?: string;
+  /** A source document's title. */
+  title?: string;
+};
+
+export type AttachmentMediaCategory = "image" | "video" | "audio" | "document" | "source" | "unknown";
+
+const MEDIA_ICONS: Record<AttachmentMediaCategory, ComponentType<IconProps>> = {
+  audio: IconMusic,
+  document: IconFileText,
+  image: IconPhoto,
+  source: IconWorld,
+  unknown: IconPaperclip,
+  video: IconVideo,
+};
+
+/** The kind of attachment, from its type and MIME type, as on the web. */
+export function getMediaCategory(data: AttachmentData): AttachmentMediaCategory {
+  if (data.type === "source-document") return "source";
+  const mediaType = data.mediaType ?? "";
+  if (mediaType.startsWith("image/")) return "image";
+  if (mediaType.startsWith("video/")) return "video";
+  if (mediaType.startsWith("audio/")) return "audio";
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) return "document";
+  return "unknown";
+}
+
+/** The name to show and read, as on the web: the title or file name, else "Source", "Image" or "Attachment". */
+export function getAttachmentLabel(data: AttachmentData): string {
+  if (data.type === "source-document") return data.title || data.filename || "Source";
+  return data.filename || (getMediaCategory(data) === "image" ? "Image" : "Attachment");
+}
+
+/** `inline` (default) wraps chips in rows; `list` stacks them full width. The web `grid` previews are not ported. */
+export type AttachmentVariant = "inline" | "list";
+
+const AttachmentsContext = createContext<AttachmentVariant>("inline");
+
+export type AttachmentsProps = ViewProps & {
+  variant?: AttachmentVariant;
+  className?: string;
+};
+
+/** The attachments of a prompt or message. */
+export function Attachments({ variant = "inline", className, ...props }: AttachmentsProps) {
+  return (
+    <AttachmentsContext.Provider value={variant}>
+      <View
+        className={cn(variant === "list" ? "gap-2" : "flex-row flex-wrap items-start gap-2", className)}
+        {...props}
+      />
+    </AttachmentsContext.Provider>
+  );
+}
+
+export type AttachmentProps = {
+  data: AttachmentData;
+  /** Shows a remove button, labelled "Remove" and the attachment name. */
+  onRemove?: () => void;
+  testID?: string;
+};
+
+/** A remove cross of 20 in a 32 row: the slop brings it to 44. */
+const REMOVE_SIZE = 20;
+
+/**
+ * One attachment as a chip: a 20 thumbnail for an image with a `url`, else
+ * its media icon, then the name and an optional remove button. Flat, on the
+ * web `flatPanelSubtle` fill (`bg-surface-secondary`). No hover card.
+ */
+export function Attachment({ data, onRemove, testID }: AttachmentProps) {
+  const variant = useContext(AttachmentsContext);
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const category = getMediaCategory(data);
+  const label = getAttachmentLabel(data);
+  const Icon = MEDIA_ICONS[category];
+  const iconSize = largerText ? 20 : 16;
+  const muted = tokens.color.muted[scheme];
+  return (
+    <View
+      testID={testID}
+      className={cn(
+        "min-w-0 flex-row items-center gap-1.5 px-2",
+        largerText ? "min-h-11" : "min-h-8",
+        variant === "list" ? "w-full" : "max-w-full",
+      )}
+      style={{ borderRadius: tokens.radius.sm, backgroundColor: tokens.color.surfaceSecondary[scheme] }}
+    >
+      {category === "image" && data.url ? (
+        <Image
+          source={{ uri: data.url }}
+          resizeMode="cover"
+          style={{ width: 20, height: 20, borderRadius: 4 }}
+        />
+      ) : (
+        <Icon size={iconSize} color={muted} />
+      )}
+      <ResponseText
+        size="small"
+        selectable={false}
+        numberOfLines={1}
+        ellipsizeMode="middle"
+        className={variant === "list" ? "flex-1" : "shrink"}
+      >
+        {label}
+      </ResponseText>
+      {onRemove ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${label}`}
+          hitSlop={touchSlop(REMOVE_SIZE)}
+          onPress={onRemove}
+          className="items-center justify-center rounded-full active:opacity-70"
+          style={{ width: REMOVE_SIZE, height: REMOVE_SIZE }}
+        >
+          <IconX size={largerText ? 16 : 14} color={muted} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/ai/chain-of-thought.tsx

@@ -0,0 +1,143 @@
+import type { ComponentType, ReactNode } from "react";
+import { Text, View, type ViewProps } from "react-native";
+import { IconBrain, IconPointFilled, type IconProps } from "@tabler/icons-react-native";
+import { badgeColors, Badge } from "../Badge";
+import { cn } from "../cn";
+import { sizeStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useCollapsible,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+} from "./collapsible";
+import { ResponseText } from "./response-text";
+
+// The web `ChainOfThought`, simplified: a fold of steps with search-result
+// chips. `ChainOfThoughtImage` and the step enter animation are not ported.
+
+/** Holds its open state (default closed), or takes `open` and `onOpenChange`. */
+export function ChainOfThought({ className, ...props }: CollapsibleProps) {
+  return <Collapsible className={cn("w-full gap-4", className)} {...props} />;
+}
+
+export type ChainOfThoughtHeaderProps = Omit<CollapsibleTriggerProps, "children"> & {
+  /** Default "Chain of Thought". A string, as it is also the accessibility label. */
+  children?: string;
+  icon?: ComponentType<IconProps>;
+};
+
+/** Brain icon, title and chevron: toggles the steps. */
+export function ChainOfThoughtHeader({
+  children = "Chain of Thought",
+  icon: Icon = IconBrain,
+  className,
+  ...props
+}: ChainOfThoughtHeaderProps) {
+  const { open } = useCollapsible();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const muted = tokens.color.muted[scheme];
+  const iconSize = largerText ? 20 : 16;
+  return (
+    <CollapsibleTrigger
+      accessibilityLabel={children}
+      className={cn("w-full flex-row items-center gap-2", className)}
+      {...props}
+    >
+      <Icon size={iconSize} color={muted} />
+      <ResponseText size="small" tone="muted" selectable={false} className="flex-1">
+        {children}
+      </ResponseText>
+      <CollapsibleChevron open={open} size={iconSize} color={muted} />
+    </CollapsibleTrigger>
+  );
+}
+
+/** The steps, shown while open. */
+export function ChainOfThoughtContent({ className, ...props }: ViewProps & { className?: string }) {
+  return <CollapsibleContent className={cn("gap-3", className)} {...props} />;
+}
+
+export type ChainOfThoughtStepStatus = "complete" | "active" | "pending";
+
+export type ChainOfThoughtStepProps = ViewProps & {
+  icon?: ComponentType<IconProps>;
+  label: string;
+  description?: string;
+  /** `active` is the foreground, `complete` muted, `pending` muted at half opacity, as on the web. Default `complete`. */
+  status?: ChainOfThoughtStepStatus;
+  className?: string;
+  children?: ReactNode;
+};
+
+/** One step: icon with a rail under it to the next step, label, description and any children (such as search results). */
+export function ChainOfThoughtStep({
+  icon: Icon = IconPointFilled,
+  label,
+  description,
+  status = "complete",
+  className,
+  style,
+  children,
+  ...props
+}: ChainOfThoughtStepProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const tone = status === "active" ? "foreground" : "muted";
+  return (
+    <View
+      className={cn("flex-row gap-2", className)}
+      style={[status === "pending" ? { opacity: 0.5 } : null, style]}
+      {...props}
+    >
+      <View className="mt-0.5 items-center">
+        <Icon size={largerText ? 20 : 16} color={tokens.color[tone][scheme]} />
+        <View
+          className="mt-2 w-px flex-1"
+          style={{ backgroundColor: tokens.color.separator[scheme] }}
+        />
+      </View>
+      <View className="min-w-0 flex-1 gap-2">
+        <ResponseText size="small" tone={tone}>
+          {label}
+        </ResponseText>
+        {description ? (
+          <ResponseText size="caption" tone="muted">
+            {description}
+          </ResponseText>
+        ) : null}
+        {children}
+      </View>
+    </View>
+  );
+}
+
+/** A wrapping row of `ChainOfThoughtSearchResult` chips. */
+export function ChainOfThoughtSearchResults({ className, ...props }: ViewProps & { className?: string }) {
+  return <View className={cn("flex-row flex-wrap items-center gap-2", className)} {...props} />;
+}
+
+/** One search result: a `secondary` `Badge` with regular `text-xs` type, as the web `font-normal text-xs`. */
+export function ChainOfThoughtSearchResult({ children, className }: { children: string; className?: string }) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("caption", largerText);
+  return (
+    <Badge variant="secondary" className={cn("px-2 py-0.5", className)}>
+      <Text
+        numberOfLines={1}
+        className={cn(size, "font-instrument-sans")}
+        style={[sizeStyle(size), { color: badgeColors("secondary", scheme).color }]}
+      >
+        {children}
+      </Text>
+    </Badge>
+  );
+}

package/src/ai/chat-text.ts

@@ -0,0 +1,35 @@
+/** Type and copy shared by the AI chat parts. */
+import { Platform } from "react-native";
+import type { TextSize } from "../controlStyles";
+
+export type ChatTextKind = "body" | "small" | "caption";
+
+/**
+ * `body` is message text: `text-base` (16 / 24), the phone body size (the web
+ * `MessageContent` is `text-sm`, but the web composer is 16 on phones).
+ * `small` is the secondary text of triggers, trace lines and sources:
+ * `text-sm` (14 / 20; the web sources trigger is `text-xs`). `caption` is
+ * `text-xs` (12 / 16): step descriptions, file chips and code headers. Larger
+ * text steps each up, as `Textarea` does.
+ */
+export function chatTextSize(kind: ChatTextKind, largerText: boolean): TextSize {
+  if (kind === "body") return largerText ? "text-xl" : "text-base";
+  if (kind === "small") return largerText ? "text-lg" : "text-sm";
+  return largerText ? "text-base" : "text-xs";
+}
+
+/** The system monospace face, for code and reasoning text (web `font-mono`). */
+export const MONO_FONT = Platform.select({ ios: "Menlo", default: "monospace" });
+
+/**
+ * Elapsed time for "Thought for 12s" and "Worked for 1m 5s": whole seconds
+ * under a minute, minutes and seconds above. Negative and fractional values
+ * round to whole seconds, from 0.
+ */
+export function formatElapsed(seconds: number): string {
+  const total = Math.max(0, Math.round(seconds));
+  if (total < 60) return `${total}s`;
+  const minutes = Math.floor(total / 60);
+  const rest = total % 60;
+  return rest === 0 ? `${minutes}m` : `${minutes}m ${rest}s`;
+}