@schlessera/brain-ui-react 0.34.0 → 0.35.0

package/src/components/activity/activity-page.tsx

@@ -1,51 +1,27 @@
-import { Fragment, useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   Activity as ActivityIcon,
   AlertTriangle,
-  ArrowLeft,
-  Bot,
-  ChevronRight,
-  Clock,
   RefreshCw,
   Timer,
 } from "lucide-react";
-import { useShallow } from "zustand/react/shallow";
-import { isFailureOutcome } from "@schlessera/brain-ui-sdk/protocol";
 import type { ActivitySpan } from "@schlessera/brain-ui-sdk/protocol";
 
 import {
   api,
   type ActivityIntent,
   type ActivityRollups,
-  type ActivityRunRollup,
   type ActivityRunSummary,
 } from "../../lib/api-client.js";
 import { sendClientMessage } from "../../hooks/use-websocket.js";
-import { useNow } from "../../hooks/use-now.js";
-import {
-  useActivityStore,
-  narrativeEventsFor,
-  runEvents,
-  runSpans,
-} from "../../stores/activity-store.js";
+import { useActivityStore } from "../../stores/activity-store.js";
 import { useChatStore } from "../../stores/chat-store.js";
 import { useUIStore } from "../../stores/ui-store.js";
 import { cn } from "../../lib/utils.js";
-import {
-  formatDuration,
-  formatRelativeTime,
-  formatTokenCount,
-} from "../chat/tool-views.js";
-import {
-  SpanEventBlock,
-  SpanPayload,
-  SpanStatusDot,
-  formatAggregateCost,
-  formatEffectiveCost,
-  formatSpanUsage,
-  runCostText,
-  spanToolLabel,
-} from "./span-bits.js";
+import { formatRelativeTime } from "../chat/tool-views.js";
+import { RollupCards } from "./activity-rollups.js";
+import { LiveRow, RunRow } from "./activity-run-list.js";
+import { RunDetail } from "./activity-run-detail.js";
 import { PushToggle } from "./push-toggle.js";
 import { SettingsPanel } from "../settings/settings-panel.js";
 
@@ -321,450 +297,3 @@ export function ActivityPage() {
     </div>
   );
 }
-
-/** Today's key in the server's configured zone (mirrors its day formatter). */
-function todayKey(timeZone: string): string {
-  let fmt: Intl.DateTimeFormat;
-  try {
-    fmt = new Intl.DateTimeFormat("en-CA", { timeZone, dateStyle: "short" });
-  } catch {
-    fmt = new Intl.DateTimeFormat("en-CA", { timeZone: "UTC", dateStyle: "short" });
-  }
-  return fmt.format(new Date());
-}
-
-function RollupCards({ rollups }: { rollups: ActivityRollups }) {
-  // days[0] is merely the newest day WITH runs — on a quiet day that is
-  // yesterday, so look today up by its actual key (0 when absent).
-  const today = rollups.days.find((d) => d.day === todayKey(rollups.timeZone));
-  const week = rollups.days.reduce(
-    (acc, d) => ({
-      runs: acc.runs + d.runs,
-      failures: acc.failures + d.failures,
-      costUsd: acc.costUsd + d.costUsd,
-      effectiveCostUsd: acc.effectiveCostUsd + (d.effectiveCostUsd ?? 0),
-      unpricedRuns: acc.unpricedRuns + (d.unpricedRuns ?? 0),
-      tokens: acc.tokens + d.inputTokens + d.outputTokens,
-    }),
-    { runs: 0, failures: 0, costUsd: 0, effectiveCostUsd: 0, unpricedRuns: 0, tokens: 0 }
-  );
-  // A server that predates pricing omits the effective fields entirely; the
-  // card then keeps its single list-price number instead of claiming an
-  // effective $0.00 it never computed.
-  const hasEffective = rollups.days.some((d) => d.effectiveCostUsd !== undefined);
-  return (
-    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-      <StatCard label="Runs today" value={String(today?.runs ?? 0)} />
-      <StatCard
-        label="Failures (7d)"
-        value={String(week.failures)}
-        alert={week.failures > 0}
-      />
-      <StatCard
-        label="Spend (7d)"
-        value={
-          hasEffective
-            ? formatAggregateCost(week.effectiveCostUsd, week.unpricedRuns)
-            : `$${week.costUsd.toFixed(2)}`
-        }
-        secondary={
-          hasEffective && (
-            <>
-              list ${week.costUsd.toFixed(2)}
-              {week.unpricedRuns > 0 && (
-                <>
-                  {/* Two cards per row below `sm`: the qualifier compacts. */}
-                  <span className="hidden sm:inline"> · {week.unpricedRuns} unpriced</span>
-                  <span className="sm:hidden"> · {week.unpricedRuns}?</span>
-                </>
-              )}
-            </>
-          )
-        }
-      />
-      <StatCard label="Tokens (7d)" value={formatTokenCount(week.tokens)} />
-    </div>
-  );
-}
-
-function StatCard({
-  label,
-  value,
-  secondary,
-  alert,
-}: {
-  label: string;
-  value: string;
-  /** Muted small line between the value and the label (e.g. the list-cost qualifier). */
-  secondary?: ReactNode;
-  alert?: boolean;
-}) {
-  return (
-    <div className="rounded-lg border border-border-subtle bg-surface p-3">
-      <div className={cn("text-lg font-semibold", alert && "text-destructive")}>{value}</div>
-      {secondary && (
-        <div className="truncate text-[10px] text-muted-foreground/70">{secondary}</div>
-      )}
-      <div className="text-[11px] text-muted-foreground">{label}</div>
-    </div>
-  );
-}
-
-function LiveRow({
-  span,
-  onOpen,
-}: {
-  span: ActivitySpan;
-  onOpen: (row: { runId: string; origin: string; sessionId?: string | null }) => void;
-}) {
-  const children = useActivityStore(
-    useShallow((s) => Object.values(s.spans[span.runId] ?? {}).filter((x) => x.parentSpanId))
-  );
-  const now = useNow();
-  const current = children.filter((c) => c.outcome === undefined).at(-1);
-  const currentLabel = current ? spanToolLabel(current) : null;
-  return (
-    <button
-      type="button"
-      onClick={() => onOpen({ runId: span.runId, origin: span.origin, sessionId: span.sessionId })}
-      className="flex w-full items-center gap-2 rounded-lg border border-border-subtle bg-surface px-3 py-2 text-left text-xs transition-colors hover:bg-surface-raised"
-    >
-      <span className="h-2 w-2 shrink-0 animate-pulse rounded-full bg-primary" />
-      {span.origin === "cron" ? (
-        <Clock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-      ) : (
-        <Bot className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-      )}
-      <span className="truncate font-medium">
-        {span.jobName ?? span.name}
-      </span>
-      {/* A span-only run (plain cron job) has no current step — name+elapsed
-          is its whole live story. */}
-      {currentLabel && (
-        <span className="truncate text-muted-foreground">· {currentLabel}</span>
-      )}
-      <span className="ml-auto shrink-0 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/60">
-        {formatDuration(now - span.startedAt)}
-      </span>
-    </button>
-  );
-}
-
-function RunRow({
-  run,
-  onOpen,
-}: {
-  run: ActivityRunSummary;
-  onOpen: (row: ActivityRunSummary) => void;
-}) {
-  const failed = isFailureOutcome(run.outcome);
-  // Effective cost only — list price lives on the Spend card and the detail
-  // view. "—" is unknown, never $0.00 (AE3); a pre-pricing server that never
-  // sent the field keeps the original list-cost span instead (see runCostText).
-  const cost = runCostText(run);
-  return (
-    <button
-      type="button"
-      onClick={() => onOpen(run)}
-      className={cn(
-        "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors hover:bg-surface-raised",
-        failed && "border border-destructive/30 bg-destructive/5"
-      )}
-    >
-      {run.origin === "cron" ? (
-        <Clock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-      ) : (
-        <Bot className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-      )}
-      <span className="truncate">{run.jobName ?? run.name}</span>
-      {failed && <AlertTriangle className="h-3 w-3 shrink-0 text-destructive" />}
-      {run.outcome && run.outcome !== "success" && (
-        <span className={cn("text-[10px] uppercase", failed ? "text-destructive" : "text-muted-foreground")}>
-          {run.outcome}
-        </span>
-      )}
-      <span className="ml-auto flex shrink-0 items-center gap-2 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/60">
-        {cost !== null && <span>{cost}</span>}
-        {run.durationMs !== null && (
-          <span className="flex items-center gap-0.5">
-            <Timer className="h-3 w-3" />
-            {formatDuration(run.durationMs)}
-          </span>
-        )}
-        <span>{formatRelativeTime(run.startedAt)}</span>
-      </span>
-    </button>
-  );
-}
-
-/**
- * Chat-less run detail (cron runs; pruned runs show their rollup) — the full
- * view of one run: its rollup header, the span tree with per-span usage,
- * attributes and recorded events, and a raw-trace escape hatch for anything
- * the rendered view does not have an opinion about.
- */
-function RunDetail({ runId, onBack }: { runId: string; onBack: () => void }) {
-  const streamed = useActivityStore(useShallow((s) => runSpans(s, runId)));
-  const events = useActivityStore(useShallow((s) => runEvents(s, runId)));
-  const applySnapshot = useActivityStore((s) => s.applySnapshot);
-  const [pruned, setPruned] = useState<object | null>(null);
-  const [rollup, setRollup] = useState<ActivityRunRollup | null>(null);
-  const [missing, setMissing] = useState(false);
-  const [rawOpen, setRawOpen] = useState(false);
-
-  useEffect(() => {
-    api
-      // Payload bodies are excluded from run detail by default; this view's
-      // rows expand to them, so opt in.
-      .activityRun(runId, { includePayloads: true })
-      .then((detail) => {
-        if (detail.rollup) setRollup(detail.rollup);
-        if (detail.detailPruned) {
-          setPruned(detail.rollup ?? {});
-        } else if (detail.spans) {
-          applySnapshot({
-            type: "activity_snapshot",
-            view: "run",
-            runId,
-            spans: detail.spans,
-            events: detail.events ?? [],
-            highWaterSeq: { [runId]: detail.highWaterSeq ?? 0 },
-          });
-        }
-      })
-      .catch(() => setMissing(true));
-  }, [runId, applySnapshot]);
-
-  const root = streamed.find((s) => !s.parentSpanId);
-  const title = rollup?.jobName ?? rollup?.name ?? (root ? spanToolLabel(root) : runId);
-  // The root carries the run's usage for backend-recorded turns; a run whose
-  // usage only exists on children (the span-sink shape) sums them instead.
-  // Never both, so nothing is double-counted.
-  const totalUsage = useMemo(() => {
-    if (root?.usage) return formatSpanUsage(root);
-    const children = streamed.filter((s) => s.parentSpanId && s.usage);
-    if (children.length === 0) return null;
-    const sum = children.reduce(
-      (acc, s) => ({
-        inputTokens: acc.inputTokens + (s.usage?.inputTokens ?? 0),
-        outputTokens: acc.outputTokens + (s.usage?.outputTokens ?? 0),
-        cacheReadTokens: acc.cacheReadTokens + (s.usage?.cacheReadTokens ?? 0),
-        cacheCreationTokens: acc.cacheCreationTokens + (s.usage?.cacheCreationTokens ?? 0),
-      }),
-      { inputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheCreationTokens: 0 }
-    );
-    return formatSpanUsage({ ...children[0]!, usage: { ...sum, model: undefined } });
-  }, [root, streamed]);
-
-  return (
-    <div className="flex h-full flex-col overflow-y-auto">
-      <div className="flex items-center gap-2 border-b border-border-subtle px-4 py-3">
-        <button
-          type="button"
-          onClick={onBack}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground"
-          aria-label="Back"
-        >
-          <ArrowLeft className="h-4 w-4" />
-        </button>
-        <div className="min-w-0 flex-1">
-          <h1 className="truncate text-sm font-medium">{title}</h1>
-          <p className="truncate font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/60">
-            {runId}
-          </p>
-        </div>
-      </div>
-      <div className="mx-auto w-full max-w-3xl space-y-1 p-4">
-        {missing && <p className="text-xs text-muted-foreground">Unknown run.</p>}
-        {rollup && (
-          <div className="mb-2 flex flex-wrap items-center gap-x-3 gap-y-0.5 rounded-lg border border-border-subtle bg-surface px-3 py-2 text-[11px] text-muted-foreground">
-            <span className="text-foreground/80">{rollup.origin}</span>
-            {rollup.outcome && (
-              <span className={cn(isFailureOutcome(rollup.outcome) && "text-destructive")}>
-                {rollup.outcome}
-              </span>
-            )}
-            <span>{formatRelativeTime(rollup.startedAt)}</span>
-            {rollup.durationMs !== null && <span>{formatDuration(rollup.durationMs)}</span>}
-            <span>
-              list{" "}
-              <span className="font-[family-name:var(--font-mono)] text-foreground/80">
-                {formatEffectiveCost(rollup.costUsd)}
-              </span>
-            </span>
-            <span>
-              effective{" "}
-              <span className="font-[family-name:var(--font-mono)] text-foreground/80">
-                {formatEffectiveCost(
-                  rollup.effectiveCostUsd,
-                  rollup.pricingEstimate,
-                  rollup.billingMode
-                )}
-              </span>
-            </span>
-            {rollup.billingMode && (
-              <span>{rollup.billingMode === "api" ? "API billed" : "subscription billed"}</span>
-            )}
-            {rollup.pricingEstimate && <span>~ estimated rates</span>}
-            {totalUsage && (
-              <span className="font-[family-name:var(--font-mono)] text-foreground/80">
-                {totalUsage}
-              </span>
-            )}
-            {rollup.failureReason && (
-              <span className="w-full whitespace-pre-wrap break-words pt-1 text-destructive/80">
-                {rollup.failureReason}
-              </span>
-            )}
-          </div>
-        )}
-        {pruned && (
-          <div className="rounded-lg border border-border-subtle bg-surface p-3 text-xs text-muted-foreground">
-            Detail pruned — only the rollup remains.
-            <pre className="mt-2 overflow-x-auto text-[11px]">{JSON.stringify(pruned, null, 2)}</pre>
-          </div>
-        )}
-        {streamed.map((span) => (
-          <DetailSpanRow key={span.spanId} span={span} depth={depthOf(span, streamed)} />
-        ))}
-        {!pruned && !missing && streamed.length === 0 && (
-          <p className="text-xs text-muted-foreground">No spans recorded for this run.</p>
-        )}
-        {/* The escape hatch: whatever the rendered tree has no opinion about
-            is still readable here, so the view is never LESS than the trace. */}
-        {streamed.length > 0 && (
-          <div className="pt-3">
-            <button
-              type="button"
-              onClick={() => setRawOpen((v) => !v)}
-              className="flex items-center gap-1 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
-            >
-              <ChevronRight
-                className={cn("h-3 w-3 transition-transform", rawOpen && "rotate-90")}
-              />
-              Raw trace
-            </button>
-            {rawOpen && (
-              <pre className="mt-1 max-h-[60vh] overflow-auto rounded-lg border border-border-subtle bg-surface p-2 font-[family-name:var(--font-mono)] text-[10px] leading-relaxed text-muted-foreground">
-                {JSON.stringify({ runId, rollup, spans: streamed, events }, null, 2)}
-              </pre>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * One span tree row. EVERY span expands — a tool span to its recorded payload
- * (AE7), any span to its usage, attributes and recorded events. The uniform
- * affordance is the point: a cron root or a turn root used to be a dead dot
- * with a duration, which is strictly less than the trace it was summarizing.
- */
-function DetailSpanRow({ span, depth }: { span: ActivitySpan; depth: number }) {
-  const [expanded, setExpanded] = useState(false);
-  const usage = formatSpanUsage(span);
-  // Approval wait is not execution — same boundary the subagent drill-in uses.
-  const duration =
-    span.endedAt !== undefined
-      ? formatDuration(span.endedAt - (span.waitUntil ?? span.startedAt))
-      : "…";
-  return (
-    <div style={{ paddingLeft: `${depth * 16}px` }}>
-      <div
-        className="flex cursor-pointer items-center gap-2 text-xs text-muted-foreground hover:text-foreground"
-        onClick={() => setExpanded((v) => !v)}
-      >
-        <SpanStatusDot span={span} />
-        <span className="truncate font-[family-name:var(--font-mono)]">
-          {spanToolLabel(span)}
-        </span>
-        {span.kind !== "tool" && (
-          <span className="shrink-0 rounded bg-surface-raised px-1 text-[9px] uppercase text-muted-foreground/70">
-            {span.kind}
-          </span>
-        )}
-        {span.outcome && span.outcome !== "success" && (
-          <span className="text-[10px] uppercase">{span.outcome}</span>
-        )}
-        {span.outcomeReason && (
-          <span className="truncate text-[10px] text-muted-foreground/60">
-            {span.outcomeReason}
-          </span>
-        )}
-        <span className="ml-auto flex shrink-0 items-center gap-2 font-[family-name:var(--font-mono)] text-[10px] text-muted-foreground/50">
-          {usage && <span className="hidden sm:inline">{usage}</span>}
-          <span>{duration}</span>
-        </span>
-        <ChevronRight
-          className={cn("h-3 w-3 shrink-0 transition-transform", expanded && "rotate-90")}
-        />
-      </div>
-      {expanded && <DetailSpanBody span={span} usage={usage} />}
-    </div>
-  );
-}
-
-/** Everything recorded against one span, under its row. */
-function DetailSpanBody({ span, usage }: { span: ActivitySpan; usage: string | null }) {
-  const narrative = useActivityStore(useShallow((s) => narrativeEventsFor(s, span.spanId)));
-  const attrs = Object.entries(span.attrs ?? {});
-  return (
-    <div className="mb-1 ml-1 space-y-1.5 border-l border-border-subtle pl-2 pt-1">
-      <div className="flex flex-wrap gap-x-3 gap-y-0.5 px-2 text-[10px] text-muted-foreground/70">
-        <span>started {new Date(span.startedAt).toLocaleString()}</span>
-        {span.waitUntil !== undefined && (
-          <span>approval wait {formatDuration(span.waitUntil - span.startedAt)}</span>
-        )}
-        {usage && <span className="font-[family-name:var(--font-mono)]">{usage}</span>}
-        {span.usage?.costUsd !== undefined && (
-          <span className="font-[family-name:var(--font-mono)]">
-            {formatEffectiveCost(span.usage.costUsd)} list
-          </span>
-        )}
-      </div>
-      {span.subagent?.summary && (
-        <p className="px-2 text-[11px] text-muted-foreground">{span.subagent.summary}</p>
-      )}
-      {attrs.length > 0 && (
-        <dl className="grid grid-cols-[minmax(0,auto)_minmax(0,1fr)] gap-x-2 gap-y-0.5 px-2 text-[10px]">
-          {attrs.map(([key, value]) => (
-            <Fragment key={key}>
-              <dt className="truncate font-[family-name:var(--font-mono)] text-muted-foreground/60">
-                {key}
-              </dt>
-              <dd className="min-w-0 break-words font-[family-name:var(--font-mono)] text-muted-foreground">
-                {typeof value === "string" ? value : JSON.stringify(value)}
-              </dd>
-            </Fragment>
-          ))}
-        </dl>
-      )}
-      {narrative.length > 0 && (
-        <div className="space-y-1.5 px-2">
-          {narrative.map((event) => (
-            <SpanEventBlock key={`${event.spanId}:${event.eventIndex}`} event={event} />
-          ))}
-        </div>
-      )}
-      {span.kind === "tool" && <SpanPayload spanId={span.spanId} />}
-      {span.kind !== "tool" && narrative.length === 0 && attrs.length === 0 && (
-        <p className="px-2 text-[11px] text-muted-foreground/60">
-          Nothing else recorded for this step.
-        </p>
-      )}
-    </div>
-  );
-}
-
-function depthOf(span: ActivitySpan, all: ActivitySpan[]): number {
-  let depth = 0;
-  let current: ActivitySpan | undefined = span;
-  while (current?.parentSpanId) {
-    depth += 1;
-    current = all.find((s) => s.spanId === current!.parentSpanId);
-    if (depth > 6) break;
-  }
-  return depth;
-}

package/src/components/activity/activity-rollups.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode } from "react";
+
+import type { ActivityRollups } from "../../lib/api-client.js";
+import { cn } from "../../lib/utils.js";
+import { formatTokenCount } from "../chat/tool-views.js";
+import { formatAggregateCost } from "./span-bits.js";
+
+/** Today's key in the server's configured zone (mirrors its day formatter). */
+function todayKey(timeZone: string): string {
+  let fmt: Intl.DateTimeFormat;
+  try {
+    fmt = new Intl.DateTimeFormat("en-CA", { timeZone, dateStyle: "short" });
+  } catch {
+    fmt = new Intl.DateTimeFormat("en-CA", { timeZone: "UTC", dateStyle: "short" });
+  }
+  return fmt.format(new Date());
+}
+
+export function RollupCards({ rollups }: { rollups: ActivityRollups }) {
+  // days[0] is merely the newest day WITH runs — on a quiet day that is
+  // yesterday, so look today up by its actual key (0 when absent).
+  const today = rollups.days.find((d) => d.day === todayKey(rollups.timeZone));
+  const week = rollups.days.reduce(
+    (acc, d) => ({
+      runs: acc.runs + d.runs,
+      failures: acc.failures + d.failures,
+      costUsd: acc.costUsd + d.costUsd,
+      effectiveCostUsd: acc.effectiveCostUsd + (d.effectiveCostUsd ?? 0),
+      unpricedRuns: acc.unpricedRuns + (d.unpricedRuns ?? 0),
+      tokens: acc.tokens + d.inputTokens + d.outputTokens,
+    }),
+    { runs: 0, failures: 0, costUsd: 0, effectiveCostUsd: 0, unpricedRuns: 0, tokens: 0 }
+  );
+  // A server that predates pricing omits the effective fields entirely; the
+  // card then keeps its single list-price number instead of claiming an
+  // effective $0.00 it never computed.
+  const hasEffective = rollups.days.some((d) => d.effectiveCostUsd !== undefined);
+  return (
+    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+      <StatCard label="Runs today" value={String(today?.runs ?? 0)} />
+      <StatCard
+        label="Failures (7d)"
+        value={String(week.failures)}
+        alert={week.failures > 0}
+      />
+      <StatCard
+        label="Spend (7d)"
+        value={
+          hasEffective
+            ? formatAggregateCost(week.effectiveCostUsd, week.unpricedRuns)
+            : `$${week.costUsd.toFixed(2)}`
+        }
+        secondary={
+          hasEffective && (
+            <>
+              list ${week.costUsd.toFixed(2)}
+              {week.unpricedRuns > 0 && (
+                <>
+                  {/* Two cards per row below `sm`: the qualifier compacts. */}
+                  <span className="hidden sm:inline"> · {week.unpricedRuns} unpriced</span>
+                  <span className="sm:hidden"> · {week.unpricedRuns}?</span>
+                </>
+              )}
+            </>
+          )
+        }
+      />
+      <StatCard label="Tokens (7d)" value={formatTokenCount(week.tokens)} />
+    </div>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  secondary,
+  alert,
+}: {
+  label: string;
+  value: string;
+  /** Muted small line between the value and the label (e.g. the list-cost qualifier). */
+  secondary?: ReactNode;
+  alert?: boolean;
+}) {
+  return (
+    <div className="rounded-lg border border-border-subtle bg-surface p-3">
+      <div className={cn("text-lg font-semibold", alert && "text-destructive")}>{value}</div>
+      {secondary && (
+        <div className="truncate text-[10px] text-muted-foreground/70">{secondary}</div>
+      )}
+      <div className="text-[11px] text-muted-foreground">{label}</div>
+    </div>
+  );
+}