@usetheo/ui 0.9.0-next.0 → 0.11.0-next.0

package/dist/chunk-X5L62PXY.js

@@ -0,0 +1,112 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Sparkles, Wrench, CalendarDays, Eye, GitBranch, Image } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var formatTokens = (n) => {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(0)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(0)}k`;
+  return `${n}`;
+};
+var formatUsd = (n) => n >= 100 ? `$${n.toFixed(0)}` : n >= 1 ? `$${n.toFixed(2)}` : `$${n.toFixed(3)}`;
+var ModelCard = forwardRef(
+  ({ className, model, selected, onSelect, ...props }, ref) => {
+    const Tag = onSelect ? "button" : "article";
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        ref,
+        type: onSelect ? "button" : void 0,
+        onClick: onSelect ? () => onSelect(model.id) : void 0,
+        className: cn(
+          "grid gap-3 rounded-xl border bg-card p-4 text-left",
+          "transition-[border-color,box-shadow] duration-base ease-out-soft",
+          selected ? "border-primary shadow-glow" : onSelect ? "hover:border-primary/40 hover:shadow-sm" : "",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        "aria-pressed": onSelect ? !!selected : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h4", { className: "font-display text-title-md tracking-tight", children: model.name }),
+              /* @__PURE__ */ jsx("p", { className: "font-mono text-label-caps text-muted-foreground uppercase tracking-wider", children: model.vendor })
+            ] }),
+            model.tag ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase", children: [
+              typeof model.tag === "string" && model.tag.toLowerCase() === "smart" ? /* @__PURE__ */ jsx(Sparkles, { className: "size-3" }) : null,
+              model.tag
+            ] }) : null
+          ] }),
+          model.description ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: model.description }) : null,
+          /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-2 gap-3 border-border/30 border-t pt-3 font-mono", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-label-caps text-muted-foreground uppercase tracking-wider", children: "Context" }),
+              /* @__PURE__ */ jsxs("dd", { className: "font-medium text-body-sm tabular-nums", children: [
+                formatTokens(model.contextWindow),
+                " tok"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-label-caps text-muted-foreground uppercase tracking-wider", children: "Max output" }),
+              /* @__PURE__ */ jsxs("dd", { className: "font-medium text-body-sm tabular-nums", children: [
+                formatTokens(model.maxOutput),
+                " tok"
+              ] })
+            ] }),
+            model.pricePerMInput !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-label-caps text-muted-foreground uppercase tracking-wider", children: "Input" }),
+              /* @__PURE__ */ jsxs("dd", { className: "font-medium text-body-sm tabular-nums", children: [
+                formatUsd(model.pricePerMInput),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/M" })
+              ] })
+            ] }) : null,
+            model.pricePerMOutput !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-label-caps text-muted-foreground uppercase tracking-wider", children: "Output" }),
+              /* @__PURE__ */ jsxs("dd", { className: "font-medium text-body-sm tabular-nums", children: [
+                formatUsd(model.pricePerMOutput),
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/M" })
+              ] })
+            ] }) : null
+          ] }),
+          model.capabilities && model.capabilities.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: model.capabilities.map((cap) => {
+            const Icon = cap.icon ?? Wrench;
+            return /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: cn(
+                  "inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-label",
+                  cap.enabled ? "bg-success/15 text-success" : "bg-muted text-muted-foreground line-through"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { className: "size-3", "aria-hidden": "true" }),
+                  cap.label
+                ]
+              },
+              cap.id
+            );
+          }) }) : null,
+          model.cutoff ? /* @__PURE__ */ jsxs("p", { className: "inline-flex items-center gap-1 font-mono text-label text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(CalendarDays, { className: "size-3", "aria-hidden": "true" }),
+            " Knowledge cutoff \xB7 ",
+            model.cutoff
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+ModelCard.displayName = "ModelCard";
+var modelCapabilityPresets = {
+  vision: { id: "vision", label: "Vision", icon: Image },
+  tools: { id: "tools", label: "Tool use", icon: Wrench },
+  reasoning: { id: "reasoning", label: "Reasoning", icon: Sparkles },
+  fineTuning: { id: "ft", label: "Fine-tuning", icon: GitBranch },
+  multimodal: { id: "multimodal", label: "Multimodal", icon: Eye }
+};
+
+export { ModelCard, modelCapabilityPresets };
+//# sourceMappingURL=chunk-X5L62PXY.js.map
+//# sourceMappingURL=chunk-X5L62PXY.js.map

package/dist/chunk-X5L62PXY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/model-card/model-card.tsx"],"names":[],"mappings":"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","file":"chunk-X5L62PXY.js","sourcesContent":["import { CalendarDays, Eye, GitBranch, Image, Sparkles, Wrench } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\n\nexport interface ModelCapabilityFlag {\n  id: string;\n  label: string;\n  icon?: IconComponent;\n  enabled: boolean;\n}\n\nexport interface ModelInfo {\n  id: string;\n  /** Display name (e.g. \"Opus 4.7\"). */\n  name: string;\n  /** Vendor (Anthropic, OpenAI, …). */\n  vendor: string;\n  /** Optional tag (default, fast, smart, beta). */\n  tag?: ReactNode;\n  /** Total context window in tokens. */\n  contextWindow: number;\n  /** Max output tokens per turn. */\n  maxOutput: number;\n  /** USD per million input tokens. */\n  pricePerMInput?: number;\n  /** USD per million output tokens. */\n  pricePerMOutput?: number;\n  /** Knowledge cutoff date label (e.g. \"Jan 2026\"). */\n  cutoff?: string;\n  /** Capability flags shown as chips. */\n  capabilities?: ModelCapabilityFlag[];\n  /** Short description / positioning. */\n  description?: ReactNode;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;\n  return `${n}`;\n};\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 1 ? `$${n.toFixed(2)}` : `$${n.toFixed(3)}`;\n\ninterface ModelCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  model: ModelInfo;\n  /** Render as the currently-selected variant (violet ring). */\n  selected?: boolean;\n  /** Fires when user clicks to select. */\n  onSelect?: (id: string) => void;\n}\n\n/**\n * ModelCard — full info on a model: vendor, context, output cap, pricing,\n * capabilities, knowledge cutoff. Used in the \"switch model\" surface.\n */\nconst ModelCard = forwardRef<HTMLElement, ModelCardProps>(\n  ({ className, model, selected, onSelect, ...props }, ref) => {\n    const Tag = onSelect ? \"button\" : \"article\";\n    return (\n      <Tag\n        ref={ref as never}\n        type={onSelect ? \"button\" : undefined}\n        onClick={onSelect ? () => onSelect(model.id) : undefined}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4 text-left\",\n          \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n          selected\n            ? \"border-primary shadow-glow\"\n            : onSelect\n              ? \"hover:border-primary/40 hover:shadow-sm\"\n              : \"\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          className,\n        )}\n        aria-pressed={onSelect ? !!selected : undefined}\n        {...(props as HTMLAttributes<HTMLElement>)}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h4 className=\"font-display text-title-md tracking-tight\">{model.name}</h4>\n            <p className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {model.vendor}\n            </p>\n          </div>\n          {model.tag ? (\n            <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n              {typeof model.tag === \"string\" && model.tag.toLowerCase() === \"smart\" ? (\n                <Sparkles className=\"size-3\" />\n              ) : null}\n              {model.tag}\n            </span>\n          ) : null}\n        </header>\n\n        {model.description ? (\n          <p className=\"text-body-sm text-muted-foreground\">{model.description}</p>\n        ) : null}\n\n        <dl className=\"grid grid-cols-2 gap-3 border-border/30 border-t pt-3 font-mono\">\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Context\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.contextWindow)} tok\n            </dd>\n          </div>\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Max output\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.maxOutput)} tok\n            </dd>\n          </div>\n          {model.pricePerMInput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Input\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMInput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n          {model.pricePerMOutput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Output\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMOutput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n        </dl>\n\n        {model.capabilities && model.capabilities.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {model.capabilities.map((cap) => {\n              const Icon = cap.icon ?? Wrench;\n              return (\n                <span\n                  key={cap.id}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-label\",\n                    cap.enabled\n                      ? \"bg-success/15 text-success\"\n                      : \"bg-muted text-muted-foreground line-through\",\n                  )}\n                >\n                  <Icon className=\"size-3\" aria-hidden=\"true\" />\n                  {cap.label}\n                </span>\n              );\n            })}\n          </div>\n        ) : null}\n\n        {model.cutoff ? (\n          <p className=\"inline-flex items-center gap-1 font-mono text-label text-muted-foreground\">\n            <CalendarDays className=\"size-3\" aria-hidden=\"true\" /> Knowledge cutoff · {model.cutoff}\n          </p>\n        ) : null}\n      </Tag>\n    );\n  },\n);\nModelCard.displayName = \"ModelCard\";\n\n/** Pre-canned capability flags. */\nexport const modelCapabilityPresets = {\n  vision: { id: \"vision\", label: \"Vision\", icon: Image as IconComponent } as const,\n  tools: { id: \"tools\", label: \"Tool use\", icon: Wrench } as const,\n  reasoning: { id: \"reasoning\", label: \"Reasoning\", icon: Sparkles } as const,\n  fineTuning: { id: \"ft\", label: \"Fine-tuning\", icon: GitBranch } as const,\n  multimodal: { id: \"multimodal\", label: \"Multimodal\", icon: Eye } as const,\n};\n\nexport { ModelCard };\n"]}

package/dist/chunk-XGCV5E6W.js

@@ -0,0 +1,133 @@
+import { useInLiveRegion } from './chunk-UGKI466V.js';
+import { cn } from './chunk-ZSRJCIWF.js';
+import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var levelClasses = {
+  info: "text-foreground",
+  warn: "text-warning",
+  error: "text-destructive",
+  success: "text-success",
+  debug: "text-muted-foreground"
+};
+var levelLabels = {
+  info: "INFO",
+  warn: "WARN",
+  error: "ERROR",
+  success: " OK ",
+  debug: "DBG "
+};
+var ALL_LEVELS = ["info", "warn", "error", "success", "debug"];
+var BuildLogStream = forwardRef(
+  ({
+    className,
+    lines,
+    filterable = true,
+    visibleLevels,
+    onVisibleLevelsChange,
+    height = "320px",
+    maxLines = 2e3,
+    live = "off",
+    ...props
+  }, ref) => {
+    const inLiveRegion = useInLiveRegion();
+    const effectiveLive = inLiveRegion ? "off" : live;
+    const [internalLevels, setInternalLevels] = useState(/* @__PURE__ */ new Set());
+    const levels = visibleLevels ?? internalLevels;
+    const updateLevels = onVisibleLevelsChange ?? setInternalLevels;
+    const wasControlled = useRef(null);
+    useEffect(() => {
+      if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+      const isControlled = visibleLevels !== void 0;
+      if (wasControlled.current === null) {
+        wasControlled.current = isControlled;
+        return;
+      }
+      if (wasControlled.current !== isControlled) {
+        console.warn(
+          `[@usetheo/ui] BuildLogStream: \`visibleLevels\` prop switched between ${wasControlled.current ? "controlled" : "uncontrolled"} and ${isControlled ? "controlled" : "uncontrolled"} between renders. Pick one mode and keep it consistent.`
+        );
+        wasControlled.current = isControlled;
+      }
+    }, [visibleLevels]);
+    const filtered = useMemo(() => {
+      if (levels.size === 0) return lines;
+      return lines.filter((l) => levels.has(l.level));
+    }, [lines, levels]);
+    const truncated = filtered.length > maxLines;
+    const visible = truncated ? filtered.slice(filtered.length - maxLines) : filtered;
+    const hiddenCount = truncated ? filtered.length - maxLines : 0;
+    const toggle = (level) => {
+      const next = new Set(levels);
+      if (next.has(level)) next.delete(level);
+      else next.add(level);
+      updateLevels(next);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col gap-2", className), ...props, children: [
+      filterable ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: ALL_LEVELS.map((level) => {
+        const active = levels.size === 0 || levels.has(level);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggle(level),
+            "aria-pressed": active,
+            className: cn(
+              "rounded-md border px-2 py-1 font-mono text-label uppercase tracking-wider",
+              "transition-colors duration-base ease-out-soft",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              active ? cn("border-border/60 bg-muted", levelClasses[level]) : "border-border/30 text-muted-foreground/50 hover:text-muted-foreground"
+            ),
+            children: level
+          },
+          level
+        );
+      }) }) : null,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("overflow-y-auto rounded-lg border bg-card", "font-mono text-code-sm"),
+          style: { height },
+          children: [
+            truncated ? /* @__PURE__ */ jsxs("output", { className: "block border-border/30 border-b bg-muted/40 px-4 py-1.5 text-label text-muted-foreground", children: [
+              "Showing last ",
+              maxLines.toLocaleString(),
+              " of ",
+              filtered.length.toLocaleString(),
+              " lines (",
+              hiddenCount.toLocaleString(),
+              " earlier lines hidden)"
+            ] }) : null,
+            visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-3 text-muted-foreground", children: "No log lines." }) : /* @__PURE__ */ jsx("ol", { className: "divide-y divide-border/30", "aria-live": effectiveLive, "aria-atomic": "false", children: visible.map((line) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "grid grid-cols-[auto_auto_1fr] gap-3 px-4 py-1.5 leading-relaxed hover:bg-muted/30",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "select-none text-muted-foreground", children: line.timestamp }),
+                  /* @__PURE__ */ jsxs("span", { className: cn("select-none font-bold", levelClasses[line.level]), children: [
+                    "[",
+                    levelLabels[line.level],
+                    "]"
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: levelClasses[line.level], children: [
+                    line.source ? /* @__PURE__ */ jsxs("span", { className: "mr-2 text-muted-foreground", children: [
+                      line.source,
+                      ":"
+                    ] }) : null,
+                    line.message
+                  ] })
+                ]
+              },
+              line.id
+            )) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+BuildLogStream.displayName = "BuildLogStream";
+
+export { BuildLogStream };
+//# sourceMappingURL=chunk-XGCV5E6W.js.map
+//# sourceMappingURL=chunk-XGCV5E6W.js.map

package/dist/chunk-XGCV5E6W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/build-log-stream/build-log-stream.tsx"],"names":[],"mappings":"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","file":"chunk-XGCV5E6W.js","sourcesContent":["import { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport { useInLiveRegion } from \"../../../lib/live-region-context.js\";\n\nexport type LogLevel = \"info\" | \"warn\" | \"error\" | \"success\" | \"debug\";\n\nexport interface LogLine {\n  id: string;\n  timestamp: string;\n  level: LogLevel;\n  message: string;\n  source?: string;\n}\n\nconst levelClasses: Record<LogLevel, string> = {\n  info: \"text-foreground\",\n  warn: \"text-warning\",\n  error: \"text-destructive\",\n  success: \"text-success\",\n  debug: \"text-muted-foreground\",\n};\n\nconst levelLabels: Record<LogLevel, string> = {\n  info: \"INFO\",\n  warn: \"WARN\",\n  error: \"ERROR\",\n  success: \" OK \",\n  debug: \"DBG \",\n};\n\ninterface BuildLogStreamProps extends HTMLAttributes<HTMLDivElement> {\n  lines: LogLine[];\n  /**\n   * If true, shows level filter chips above the stream.\n   */\n  filterable?: boolean;\n  /**\n   * Controlled filter — which levels are visible. Empty Set = show all.\n   *\n   * Pick one mode: either always pass `visibleLevels` + `onVisibleLevelsChange`\n   * (controlled), or never (uncontrolled). Mixing the two between renders is\n   * not supported and may produce surprising state.\n   */\n  visibleLevels?: Set<LogLevel>;\n  onVisibleLevelsChange?: (levels: Set<LogLevel>) => void;\n  /**\n   * Height of the scrollable region.\n   */\n  height?: string | number;\n  /**\n   * Maximum number of lines rendered. When exceeded, only the tail is shown\n   * and a banner indicates truncation. Defaults to 2000 — set higher with\n   * caution; React reconciliation cost scales linearly.\n   */\n  maxLines?: number;\n  /**\n   * Screen-reader live-region politeness for newly appended lines. Defaults\n   * to `\"off\"` because build-log streams can be high-volume; opt into\n   * `\"polite\"` only when running the build in the foreground.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst ALL_LEVELS: LogLevel[] = [\"info\", \"warn\", \"error\", \"success\", \"debug\"];\n\n/**\n * BuildLogStream — terminal-like log viewer with timestamps + level coloring.\n *\n * Used in Code workspace and PaaS deployment views. Geist Mono throughout.\n * Lines fade in via animate-fade-in-up on mount; new lines (when prepended/appended)\n * are not animated to avoid feedback noise (consumer's responsibility to render\n * incrementally if needed).\n */\nconst BuildLogStream = forwardRef<HTMLDivElement, BuildLogStreamProps>(\n  (\n    {\n      className,\n      lines,\n      filterable = true,\n      visibleLevels,\n      onVisibleLevelsChange,\n      height = \"320px\",\n      maxLines = 2000,\n      live = \"off\",\n      ...props\n    },\n    ref,\n  ) => {\n    // T4.1 (MF-4): suppress own aria-live when nested in container live region.\n    const inLiveRegion = useInLiveRegion();\n    const effectiveLive = inLiveRegion ? \"off\" : live;\n    const [internalLevels, setInternalLevels] = useState<Set<LogLevel>>(new Set());\n    const levels = visibleLevels ?? internalLevels;\n    const updateLevels = onVisibleLevelsChange ?? setInternalLevels;\n\n    // MEDIUM-002 / T6.5: warn (dev-only) when a consumer flips between\n    // controlled and uncontrolled — React's own warning handles `value`/\n    // `defaultValue` on form inputs but doesn't see our custom prop pair.\n    const wasControlled = useRef<boolean | null>(null);\n    useEffect(() => {\n      if (typeof process === \"undefined\" || process.env.NODE_ENV === \"production\") return;\n      const isControlled = visibleLevels !== undefined;\n      if (wasControlled.current === null) {\n        wasControlled.current = isControlled;\n        return;\n      }\n      if (wasControlled.current !== isControlled) {\n        // biome-ignore lint/suspicious/noConsole: dev-only diagnostic (MEDIUM-002)\n        console.warn(\n          `[@usetheo/ui] BuildLogStream: \\`visibleLevels\\` prop switched between ${\n            wasControlled.current ? \"controlled\" : \"uncontrolled\"\n          } and ${isControlled ? \"controlled\" : \"uncontrolled\"} between renders. Pick one mode and keep it consistent.`,\n        );\n        wasControlled.current = isControlled;\n      }\n    }, [visibleLevels]);\n\n    const filtered = useMemo(() => {\n      if (levels.size === 0) return lines;\n      return lines.filter((l) => levels.has(l.level));\n    }, [lines, levels]);\n\n    const truncated = filtered.length > maxLines;\n    const visible = truncated ? filtered.slice(filtered.length - maxLines) : filtered;\n    const hiddenCount = truncated ? filtered.length - maxLines : 0;\n\n    const toggle = (level: LogLevel) => {\n      const next = new Set(levels);\n      if (next.has(level)) next.delete(level);\n      else next.add(level);\n      updateLevels(next);\n    };\n\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-2\", className)} {...props}>\n        {filterable ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {ALL_LEVELS.map((level) => {\n              const active = levels.size === 0 || levels.has(level);\n              return (\n                <button\n                  key={level}\n                  type=\"button\"\n                  onClick={() => toggle(level)}\n                  aria-pressed={active}\n                  className={cn(\n                    \"rounded-md border px-2 py-1 font-mono text-label uppercase tracking-wider\",\n                    \"transition-colors duration-base ease-out-soft\",\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n                    active\n                      ? cn(\"border-border/60 bg-muted\", levelClasses[level])\n                      : \"border-border/30 text-muted-foreground/50 hover:text-muted-foreground\",\n                  )}\n                >\n                  {level}\n                </button>\n              );\n            })}\n          </div>\n        ) : null}\n        <div\n          className={cn(\"overflow-y-auto rounded-lg border bg-card\", \"font-mono text-code-sm\")}\n          style={{ height }}\n        >\n          {truncated ? (\n            <output className=\"block border-border/30 border-b bg-muted/40 px-4 py-1.5 text-label text-muted-foreground\">\n              Showing last {maxLines.toLocaleString()} of {filtered.length.toLocaleString()} lines (\n              {hiddenCount.toLocaleString()} earlier lines hidden)\n            </output>\n          ) : null}\n          {visible.length === 0 ? (\n            <p className=\"px-4 py-3 text-muted-foreground\">No log lines.</p>\n          ) : (\n            <ol className=\"divide-y divide-border/30\" aria-live={effectiveLive} aria-atomic=\"false\">\n              {visible.map((line) => (\n                <li\n                  key={line.id}\n                  className=\"grid grid-cols-[auto_auto_1fr] gap-3 px-4 py-1.5 leading-relaxed hover:bg-muted/30\"\n                >\n                  <span className=\"select-none text-muted-foreground\">{line.timestamp}</span>\n                  <span className={cn(\"select-none font-bold\", levelClasses[line.level])}>\n                    [{levelLabels[line.level]}]\n                  </span>\n                  <span className={levelClasses[line.level]}>\n                    {line.source ? (\n                      <span className=\"mr-2 text-muted-foreground\">{line.source}:</span>\n                    ) : null}\n                    {line.message}\n                  </span>\n                </li>\n              ))}\n            </ol>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nBuildLogStream.displayName = \"BuildLogStream\";\n\nexport { BuildLogStream };\n"]}

package/dist/chunk-XRKIEL5M.js

@@ -0,0 +1,72 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Minus, TrendingDown, TrendingUp, ArrowUpRight } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var TREND = {
+  up: { icon: TrendingUp, color: "text-success" },
+  down: { icon: TrendingDown, color: "text-destructive" },
+  flat: { icon: Minus, color: "text-muted-foreground" }
+};
+var StatTile = forwardRef(
+  ({ className, value, label, icon: Icon, delta, onClick, children: _children, ...props }, ref) => {
+    const isInteractive = onClick !== void 0;
+    const TrendIcon = delta !== void 0 ? TREND[delta.trend].icon : null;
+    const trendColor = delta !== void 0 ? TREND[delta.trend].color : "";
+    const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      (Icon !== void 0 || isInteractive) && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+        Icon !== void 0 ? /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40", children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }) }) : /* @__PURE__ */ jsx("div", {}),
+        isInteractive ? /* @__PURE__ */ jsx(
+          ArrowUpRight,
+          {
+            "aria-hidden": "true",
+            className: "size-3.5 text-muted-foreground transition-colors group-hover:text-foreground"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight", children: value }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1 font-sans text-body-sm text-muted-foreground", children: label }),
+      delta !== void 0 && TrendIcon !== null ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("mt-2 inline-flex items-center gap-1 font-mono text-label", trendColor),
+          children: [
+            /* @__PURE__ */ jsx(TrendIcon, { "aria-hidden": "true", className: "size-3" }),
+            /* @__PURE__ */ jsx("span", { children: delta.value })
+          ]
+        }
+      ) : null
+    ] });
+    if (isInteractive) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          onClick,
+          className: cn(
+            "group block w-full rounded-xl border border-border/40 bg-card p-5 text-left",
+            "cursor-pointer transition-colors hover:border-primary/30",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            className
+          ),
+          ...props,
+          children: inner
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("rounded-xl border border-border/40 bg-card p-5", className),
+        children: inner
+      }
+    );
+  }
+);
+StatTile.displayName = "StatTile";
+
+export { StatTile };
+//# sourceMappingURL=chunk-XRKIEL5M.js.map
+//# sourceMappingURL=chunk-XRKIEL5M.js.map

package/dist/chunk-XRKIEL5M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/stat-tile/stat-tile.tsx"],"names":[],"mappings":"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","file":"chunk-XRKIEL5M.js","sourcesContent":["import { ArrowUpRight, Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\n/**\n * StatTile — big number + label + optional delta + optional icon.\n *\n * Dual mode based on `onClick`:\n *   - With onClick → renders as `<button>` with hover state + trailing\n *     ArrowUpRight chevron (navigation affordance).\n *   - Without onClick → renders as static `<div>`.\n *\n * Delta trend drives icon + color: up=success/TrendingUp, down=destructive/\n * TrendingDown, flat=muted/Minus. Big value uses font-display + tabular-nums.\n *\n * @example\n *   <StatTile value=\"42\" label=\"Projects\" />\n *   <StatTile value=\"$1,234\" label=\"MRR\" icon={DollarSign}\n *             delta={{ value: \"+12%\", trend: \"up\" }} onClick={openBilling} />\n */\nexport interface StatTileProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"value\"> {\n  value: ReactNode;\n  label: ReactNode;\n  icon?: ElementType;\n  delta?: { value: ReactNode; trend: \"up\" | \"down\" | \"flat\" };\n}\n\nconst TREND: Record<\"up\" | \"down\" | \"flat\", { icon: ElementType; color: string }> = {\n  up: { icon: TrendingUp, color: \"text-success\" },\n  down: { icon: TrendingDown, color: \"text-destructive\" },\n  flat: { icon: Minus, color: \"text-muted-foreground\" },\n};\n\nconst StatTile = forwardRef<HTMLElement, StatTileProps>(\n  ({ className, value, label, icon: Icon, delta, onClick, children: _children, ...props }, ref) => {\n    const isInteractive = onClick !== undefined;\n    const TrendIcon = delta !== undefined ? TREND[delta.trend].icon : null;\n    const trendColor = delta !== undefined ? TREND[delta.trend].color : \"\";\n\n    const inner = (\n      <>\n        {(Icon !== undefined || isInteractive) && (\n          <div className=\"mb-3 flex items-center justify-between\">\n            {Icon !== undefined ? (\n              <div className=\"flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40\">\n                <Icon aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n              </div>\n            ) : (\n              <div />\n            )}\n            {isInteractive ? (\n              <ArrowUpRight\n                aria-hidden=\"true\"\n                className=\"size-3.5 text-muted-foreground transition-colors group-hover:text-foreground\"\n              />\n            ) : null}\n          </div>\n        )}\n        <div className=\"whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight\">\n          {value}\n        </div>\n        <div className=\"mt-1 font-sans text-body-sm text-muted-foreground\">{label}</div>\n        {delta !== undefined && TrendIcon !== null ? (\n          <div\n            className={cn(\"mt-2 inline-flex items-center gap-1 font-mono text-label\", trendColor)}\n          >\n            <TrendIcon aria-hidden=\"true\" className=\"size-3\" />\n            <span>{delta.value}</span>\n          </div>\n        ) : null}\n      </>\n    );\n\n    if (isInteractive) {\n      return (\n        <button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          onClick={onClick}\n          className={cn(\n            \"group block w-full rounded-xl border border-border/40 bg-card p-5 text-left\",\n            \"cursor-pointer transition-colors hover:border-primary/30\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n            className,\n          )}\n          {...props}\n        >\n          {inner}\n        </button>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(\"rounded-xl border border-border/40 bg-card p-5\", className)}\n      >\n        {inner}\n      </div>\n    );\n  },\n);\nStatTile.displayName = \"StatTile\";\n\nexport { StatTile };\n"]}

package/dist/chunk-XUJYEADU.js

@@ -0,0 +1,80 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { CircleX, Circle, CheckCircle2, Loader2, CircleDashed } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var STATUS_ICON = {
+  pending: CircleDashed,
+  running: Loader2,
+  done: CheckCircle2,
+  skipped: Circle,
+  failed: CircleX
+};
+var STATUS_COLOR = {
+  pending: "text-muted-foreground",
+  running: "text-primary",
+  done: "text-success",
+  skipped: "text-muted-foreground/60",
+  failed: "text-destructive"
+};
+var LABEL_STYLE = {
+  pending: "text-foreground",
+  running: "text-foreground",
+  done: "text-foreground line-through decoration-muted-foreground/40",
+  skipped: "text-muted-foreground line-through",
+  failed: "text-destructive"
+};
+var TaskNode = forwardRef(
+  ({ className, node, depth = 0, ...props }, ref) => {
+    const Icon = STATUS_ICON[node.status];
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        className: cn("grid gap-1", className),
+        style: { marginLeft: `${depth * 1.25}rem` },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[auto_1fr] items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "mt-0.5 size-3.5 shrink-0",
+                  STATUS_COLOR[node.status],
+                  node.status === "running" && "animate-spin"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: cn("text-body-sm", LABEL_STYLE[node.status]), children: node.label }),
+              node.detail ? /* @__PURE__ */ jsx("p", { className: "text-body-sm text-muted-foreground", children: node.detail }) : null
+            ] })
+          ] }),
+          node.children && node.children.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "grid gap-1 border-border/30 border-l pl-2", children: node.children.map((child) => /* @__PURE__ */ jsx(TaskNode, { node: child, depth: depth + 1 }, child.id)) }) : null
+        ]
+      }
+    );
+  }
+);
+TaskNode.displayName = "TaskNode";
+var TaskPlan = forwardRef(
+  ({ className, nodes, title = "Plan", summary, ...props }, ref) => {
+    const auto = nodes.length;
+    const done = nodes.filter((n) => n.status === "done").length;
+    const computedSummary = summary ?? (auto > 0 ? `${done} of ${auto} done` : "no steps");
+    return /* @__PURE__ */ jsxs("section", { ref, className: cn("rounded-xl border bg-card p-4", className), ...props, children: [
+      /* @__PURE__ */ jsxs("header", { className: "mb-3 flex items-baseline justify-between gap-3", children: [
+        title ? /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }) : /* @__PURE__ */ jsx("span", {}),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-label text-muted-foreground tabular-nums", children: computedSummary })
+      ] }),
+      /* @__PURE__ */ jsx("ul", { className: "grid gap-1.5", children: nodes.map((node) => /* @__PURE__ */ jsx(TaskNode, { node }, node.id)) })
+    ] });
+  }
+);
+TaskPlan.displayName = "TaskPlan";
+
+export { TaskNode, TaskPlan };
+//# sourceMappingURL=chunk-XUJYEADU.js.map
+//# sourceMappingURL=chunk-XUJYEADU.js.map

package/dist/chunk-XUJYEADU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/task-plan/task-plan.tsx"],"names":[],"mappings":"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","file":"chunk-XUJYEADU.js","sourcesContent":["import { CheckCircle2, Circle, CircleDashed, CircleX, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport type PlanNodeStatus = \"pending\" | \"running\" | \"done\" | \"skipped\" | \"failed\";\n\nexport interface PlanNode {\n  id: string;\n  label: string;\n  status: PlanNodeStatus;\n  /** Optional details / sub-explanation. */\n  detail?: string;\n  /** Sub-nodes (rendered indented). */\n  children?: PlanNode[];\n}\n\nconst STATUS_ICON = {\n  pending: CircleDashed,\n  running: Loader2,\n  done: CheckCircle2,\n  skipped: Circle,\n  failed: CircleX,\n} as const;\n\nconst STATUS_COLOR: Record<PlanNodeStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  done: \"text-success\",\n  skipped: \"text-muted-foreground/60\",\n  failed: \"text-destructive\",\n};\n\nconst LABEL_STYLE: Record<PlanNodeStatus, string> = {\n  pending: \"text-foreground\",\n  running: \"text-foreground\",\n  done: \"text-foreground line-through decoration-muted-foreground/40\",\n  skipped: \"text-muted-foreground line-through\",\n  failed: \"text-destructive\",\n};\n\ninterface TaskNodeProps extends HTMLAttributes<HTMLLIElement> {\n  node: PlanNode;\n  depth?: number;\n}\n\n/**\n * TaskNode — single row in a task plan. Renders its own children recursively\n * with increasing indentation.\n */\nconst TaskNode = forwardRef<HTMLLIElement, TaskNodeProps>(\n  ({ className, node, depth = 0, ...props }, ref) => {\n    const Icon = STATUS_ICON[node.status];\n    return (\n      <li\n        ref={ref}\n        className={cn(\"grid gap-1\", className)}\n        style={{ marginLeft: `${depth * 1.25}rem` }}\n        {...props}\n      >\n        <div className=\"grid grid-cols-[auto_1fr] items-baseline gap-2\">\n          <Icon\n            aria-hidden=\"true\"\n            className={cn(\n              \"mt-0.5 size-3.5 shrink-0\",\n              STATUS_COLOR[node.status],\n              node.status === \"running\" && \"animate-spin\",\n            )}\n          />\n          <div className=\"min-w-0\">\n            <p className={cn(\"text-body-sm\", LABEL_STYLE[node.status])}>{node.label}</p>\n            {node.detail ? (\n              <p className=\"text-body-sm text-muted-foreground\">{node.detail}</p>\n            ) : null}\n          </div>\n        </div>\n        {node.children && node.children.length > 0 ? (\n          <ul className=\"grid gap-1 border-border/30 border-l pl-2\">\n            {node.children.map((child) => (\n              <TaskNode key={child.id} node={child} depth={depth + 1} />\n            ))}\n          </ul>\n        ) : null}\n      </li>\n    );\n  },\n);\nTaskNode.displayName = \"TaskNode\";\n\ninterface TaskPlanProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  nodes: PlanNode[];\n  /** Header title. */\n  title?: ReactNode;\n  /** Summary line shown next to the title (e.g. \"3 of 7 done\"). */\n  summary?: ReactNode;\n}\n\n/**\n * TaskPlan — hierarchical task plan, à la Claude \"plan mode\".\n *\n * The agent emits a structured plan; the user sees each step progress from\n * pending → running → done (or failed/skipped). Children render with one\n * extra indent level and a left border to suggest hierarchy.\n */\nconst TaskPlan = forwardRef<HTMLElement, TaskPlanProps>(\n  ({ className, nodes, title = \"Plan\", summary, ...props }, ref) => {\n    const auto = nodes.length;\n    const done = nodes.filter((n) => n.status === \"done\").length;\n    const computedSummary = summary ?? (auto > 0 ? `${done} of ${auto} done` : \"no steps\");\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card p-4\", className)} {...props}>\n        <header className=\"mb-3 flex items-baseline justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n            {computedSummary}\n          </span>\n        </header>\n        <ul className=\"grid gap-1.5\">\n          {nodes.map((node) => (\n            <TaskNode key={node.id} node={node} />\n          ))}\n        </ul>\n      </section>\n    );\n  },\n);\nTaskPlan.displayName = \"TaskPlan\";\n\nexport { TaskNode, TaskPlan };\n"]}

package/dist/chunk-XVYNSIQC.js

@@ -0,0 +1,116 @@
+import { cn } from './chunk-ZSRJCIWF.js';
+import { Clock, Sparkles, Coins, MessageSquare, ChevronRight } from 'lucide-react';
+import { forwardRef } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var STATUS_CLASS = {
+  active: "border-primary/40 bg-primary/15 text-primary",
+  completed: "border-success/40 bg-success/15 text-success",
+  failed: "border-destructive/40 bg-destructive/15 text-destructive",
+  aborted: "border-border/40 bg-muted text-muted-foreground"
+};
+var STATUS_LABEL = {
+  active: "Active",
+  completed: "Completed",
+  failed: "Failed",
+  aborted: "Aborted"
+};
+var SessionTimeline = forwardRef(
+  ({ className, sessions, title = "Recent sessions", onOpen, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn("rounded-xl border bg-card", className),
+      "aria-label": "Session history",
+      ...props,
+      children: [
+        title ? /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between border-border/40 border-b px-4 py-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-display text-title-md tracking-tight", children: title }),
+          /* @__PURE__ */ jsxs("span", { className: "font-mono text-label text-muted-foreground", children: [
+            sessions.length,
+            " ",
+            sessions.length === 1 ? "session" : "sessions"
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("ul", { className: "divide-y divide-border/30", children: [
+          sessions.map((s) => {
+            const RowTag = onOpen ? "button" : "div";
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              RowTag,
+              {
+                type: onOpen ? "button" : void 0,
+                onClick: onOpen ? () => onOpen(s.id) : void 0,
+                className: cn(
+                  "grid w-full grid-cols-[1fr_auto] items-center gap-3 px-4 py-3 text-left",
+                  onOpen && "hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:outline-none"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("p", { className: "truncate font-medium text-body-sm text-foreground", children: s.title }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "inline-flex shrink-0 items-center rounded-full border px-2 py-0.5",
+                            "font-mono text-label uppercase tracking-wider",
+                            STATUS_CLASS[s.status]
+                          ),
+                          children: STATUS_LABEL[s.status]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-3 font-mono text-label text-muted-foreground", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "size-3", "aria-hidden": "true" }),
+                        " ",
+                        s.startedAt,
+                        s.duration ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          " \xB7 ",
+                          s.duration
+                        ] }) : null
+                      ] }),
+                      s.model ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(Sparkles, { className: "size-3", "aria-hidden": "true" }),
+                        " ",
+                        s.model
+                      ] }) : null,
+                      s.tokens ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(Coins, { className: "size-3", "aria-hidden": "true" }),
+                        " ",
+                        s.tokens,
+                        " tok"
+                      ] }) : null,
+                      s.cost !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+                        "$",
+                        s.cost.toFixed(2)
+                      ] }) : null,
+                      s.messageCount !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(MessageSquare, { className: "size-3", "aria-hidden": "true" }),
+                        " ",
+                        s.messageCount
+                      ] }) : null
+                    ] })
+                  ] }),
+                  onOpen ? /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      className: "size-4 shrink-0 text-muted-foreground",
+                      "aria-hidden": "true"
+                    }
+                  ) : null
+                ]
+              }
+            ) }, s.id);
+          }),
+          sessions.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-4 py-8 text-center font-sans text-body-sm text-muted-foreground", children: "No sessions yet." }) : null
+        ] })
+      ]
+    }
+  )
+);
+SessionTimeline.displayName = "SessionTimeline";
+
+export { SessionTimeline };
+//# sourceMappingURL=chunk-XVYNSIQC.js.map
+//# sourceMappingURL=chunk-XVYNSIQC.js.map

package/dist/chunk-XVYNSIQC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/session-timeline/session-timeline.tsx"],"names":[],"mappings":"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","file":"chunk-XVYNSIQC.js","sourcesContent":["import { ChevronRight, Clock, Coins, MessageSquare, Sparkles } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\n\nexport type SessionStatus = \"active\" | \"completed\" | \"failed\" | \"aborted\";\n\nexport interface SessionSummary {\n  id: string;\n  /** Friendly title (often the first user message). */\n  title: string;\n  /** ISO timestamp / friendly date label. */\n  startedAt: string;\n  duration?: string;\n  status: SessionStatus;\n  /** Agent/model that ran the session. */\n  model?: string;\n  /** Total tokens consumed (formatted, e.g. \"35.7k\"). */\n  tokens?: string;\n  /** Total cost (USD). */\n  cost?: number;\n  /** Number of messages in the session. */\n  messageCount?: number;\n}\n\ninterface SessionTimelineProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  sessions: SessionSummary[];\n  /** Title above the list. */\n  title?: ReactNode;\n  /** Fires when a row is clicked. */\n  onOpen?: (id: string) => void;\n}\n\nconst STATUS_CLASS: Record<SessionStatus, string> = {\n  active: \"border-primary/40 bg-primary/15 text-primary\",\n  completed: \"border-success/40 bg-success/15 text-success\",\n  failed: \"border-destructive/40 bg-destructive/15 text-destructive\",\n  aborted: \"border-border/40 bg-muted text-muted-foreground\",\n};\n\nconst STATUS_LABEL: Record<SessionStatus, string> = {\n  active: \"Active\",\n  completed: \"Completed\",\n  failed: \"Failed\",\n  aborted: \"Aborted\",\n};\n\n/**\n * SessionTimeline — historical view of past agent sessions with per-row\n * tokens / cost / duration / status. Click a row to open the full session.\n */\nconst SessionTimeline = forwardRef<HTMLDivElement, SessionTimelineProps>(\n  ({ className, sessions, title = \"Recent sessions\", onOpen, ...props }, ref) => (\n    <section\n      ref={ref}\n      className={cn(\"rounded-xl border bg-card\", className)}\n      aria-label=\"Session history\"\n      {...props}\n    >\n      {title ? (\n        <header className=\"flex items-baseline justify-between border-border/40 border-b px-4 py-3\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {sessions.length} {sessions.length === 1 ? \"session\" : \"sessions\"}\n          </span>\n        </header>\n      ) : null}\n      <ul className=\"divide-y divide-border/30\">\n        {sessions.map((s) => {\n          const RowTag = onOpen ? \"button\" : \"div\";\n          return (\n            <li key={s.id}>\n              <RowTag\n                type={onOpen ? \"button\" : undefined}\n                onClick={onOpen ? () => onOpen(s.id) : undefined}\n                className={cn(\n                  \"grid w-full grid-cols-[1fr_auto] items-center gap-3 px-4 py-3 text-left\",\n                  onOpen &&\n                    \"hover:bg-muted/40 focus-visible:bg-muted/40 focus-visible:outline-none\",\n                )}\n              >\n                <div className=\"min-w-0\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <p className=\"truncate font-medium text-body-sm text-foreground\">{s.title}</p>\n                    <span\n                      className={cn(\n                        \"inline-flex shrink-0 items-center rounded-full border px-2 py-0.5\",\n                        \"font-mono text-label uppercase tracking-wider\",\n                        STATUS_CLASS[s.status],\n                      )}\n                    >\n                      {STATUS_LABEL[s.status]}\n                    </span>\n                  </div>\n                  <div className=\"mt-1 flex flex-wrap items-center gap-3 font-mono text-label text-muted-foreground\">\n                    <span className=\"inline-flex items-center gap-1\">\n                      <Clock className=\"size-3\" aria-hidden=\"true\" /> {s.startedAt}\n                      {s.duration ? <> · {s.duration}</> : null}\n                    </span>\n                    {s.model ? (\n                      <span className=\"inline-flex items-center gap-1\">\n                        <Sparkles className=\"size-3\" aria-hidden=\"true\" /> {s.model}\n                      </span>\n                    ) : null}\n                    {s.tokens ? (\n                      <span className=\"inline-flex items-center gap-1\">\n                        <Coins className=\"size-3\" aria-hidden=\"true\" /> {s.tokens} tok\n                      </span>\n                    ) : null}\n                    {s.cost !== undefined ? (\n                      <span className=\"tabular-nums\">${s.cost.toFixed(2)}</span>\n                    ) : null}\n                    {s.messageCount !== undefined ? (\n                      <span className=\"inline-flex items-center gap-1\">\n                        <MessageSquare className=\"size-3\" aria-hidden=\"true\" /> {s.messageCount}\n                      </span>\n                    ) : null}\n                  </div>\n                </div>\n                {onOpen ? (\n                  <ChevronRight\n                    className=\"size-4 shrink-0 text-muted-foreground\"\n                    aria-hidden=\"true\"\n                  />\n                ) : null}\n              </RowTag>\n            </li>\n          );\n        })}\n        {sessions.length === 0 ? (\n          <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No sessions yet.\n          </li>\n        ) : null}\n      </ul>\n    </section>\n  ),\n);\nSessionTimeline.displayName = \"SessionTimeline\";\n\nexport { SessionTimeline };\n"]}