@yuulabs/ytrace-ui 0.0.2

package/dist/lib/components/ConversationFlow.d.ts

@@ -0,0 +1,12 @@
+import type { Span } from "../types";
+export interface ConversationFlowProps {
+    spans: Span[];
+}
+/**
+ * Waterfall-style conversation flow.
+ *
+ * Renders each span as an LlmCard or ToolCard depending on its name,
+ * ordered by start time.
+ */
+export declare function ConversationFlow({ spans }: ConversationFlowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConversationFlow.d.ts.map

package/dist/lib/components/ConversationFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationFlow.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,IAAI,EAAE,MAAM,UAAU,CAAC;AAShD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,qBAAqB,2CA4ChE"}

package/dist/lib/components/ConversationList.d.ts

@@ -0,0 +1,8 @@
+import type { ConversationSummary } from "../types";
+export interface ConversationListProps {
+    conversations: ConversationSummary[];
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+}
+export declare function ConversationList({ conversations, selectedId, onSelect, }: ConversationListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConversationList.d.ts.map

package/dist/lib/components/ConversationList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,mBAAmB,EAAE,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAUD,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,UAAU,EACV,QAAQ,GACT,EAAE,qBAAqB,2CAmDvB"}

package/dist/lib/components/CostSummary.d.ts

@@ -0,0 +1,9 @@
+import type { CostEvent } from "../types";
+export interface CostSummaryProps {
+    costs: CostEvent[];
+}
+/**
+ * Cost summary panel — groups costs by category and shows totals.
+ */
+export declare function CostSummary({ costs }: CostSummaryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CostSummary.d.ts.map

package/dist/lib/components/CostSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CostSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CostSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAwDtD"}

package/dist/lib/components/LlmCard.d.ts

@@ -0,0 +1,8 @@
+import type { CostEvent, LlmUsageEvent, Span } from "../types";
+export interface LlmCardProps {
+    span: Span;
+    usage?: LlmUsageEvent;
+    cost?: CostEvent;
+}
+export declare function LlmCard({ span, usage, cost }: LlmCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=LlmCard.d.ts.map

package/dist/lib/components/LlmCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LlmCard.d.ts","sourceRoot":"","sources":["../../../src/components/LlmCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAE/D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAOD,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,2CA6D1D"}

package/dist/lib/components/SpanTimeline.d.ts

@@ -0,0 +1,9 @@
+import type { Span } from "../types";
+export interface SpanTimelineProps {
+    spans: Span[];
+}
+/**
+ * Horizontal Gantt-chart style timeline of spans.
+ */
+export declare function SpanTimeline({ spans }: SpanTimelineProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SpanTimeline.d.ts.map

package/dist/lib/components/SpanTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpanTimeline.d.ts","sourceRoot":"","sources":["../../../src/components/SpanTimeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,EAAE,iBAAiB,kDA0DxD"}

package/dist/lib/components/ToolCard.d.ts

@@ -0,0 +1,8 @@
+import type { CostEvent, Span, ToolUsageEvent } from "../types";
+export interface ToolCardProps {
+    span: Span;
+    usage?: ToolUsageEvent;
+    cost?: CostEvent;
+}
+export declare function ToolCard({ span, usage, cost }: ToolCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolCard.d.ts.map

package/dist/lib/components/ToolCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCard.d.ts","sourceRoot":"","sources":["../../../src/components/ToolCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEhE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,aAAa,2CAoC5D"}

package/dist/lib/components/UsageSummary.d.ts

@@ -0,0 +1,9 @@
+import type { LlmUsageEvent } from "../types";
+export interface UsageSummaryProps {
+    usages: LlmUsageEvent[];
+}
+/**
+ * Usage summary panel — groups token usage by model.
+ */
+export declare function UsageSummary({ usages }: UsageSummaryProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UsageSummary.d.ts.map

package/dist/lib/components/UsageSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageSummary.d.ts","sourceRoot":"","sources":["../../../src/components/UsageSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,aAAa,EAAE,CAAC;CACzB;AAkBD;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAoFzD"}

package/dist/lib/index.d.ts

@@ -0,0 +1,17 @@
+export type { Conversation, ConversationSummary, CostEvent, LlmUsageEvent, Span, SpanEvent, ToolUsageEvent, } from "./types";
+export { ConversationList } from "./components/ConversationList";
+export type { ConversationListProps } from "./components/ConversationList";
+export { ConversationFlow } from "./components/ConversationFlow";
+export type { ConversationFlowProps } from "./components/ConversationFlow";
+export { LlmCard } from "./components/LlmCard";
+export type { LlmCardProps } from "./components/LlmCard";
+export { ToolCard } from "./components/ToolCard";
+export type { ToolCardProps } from "./components/ToolCard";
+export { CostSummary } from "./components/CostSummary";
+export type { CostSummaryProps } from "./components/CostSummary";
+export { UsageSummary } from "./components/UsageSummary";
+export type { UsageSummaryProps } from "./components/UsageSummary";
+export { SpanTimeline } from "./components/SpanTimeline";
+export type { SpanTimelineProps } from "./components/SpanTimeline";
+export { extractCostEvents, extractLlmUsageEvents, extractToolUsageEvents, parseConversation, } from "./utils/parse";
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAOA,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,SAAS,EACT,aAAa,EACb,IAAI,EACJ,SAAS,EACT,cAAc,GACf,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAE3E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAGnE,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,eAAe,CAAC"}

package/dist/lib/index.js

@@ -0,0 +1,878 @@
+import { jsxs as i, jsx as n, Fragment as w } from "react/jsx-runtime";
+import { useState as L } from "react";
+function F(t) {
+  return new Date(t / 1e6).toLocaleString();
+}
+function C(t) {
+  return `$${t.toFixed(4)}`;
+}
+function j({
+  conversations: t,
+  selectedId: e,
+  onSelect: l
+}) {
+  const [d, o] = L(""), r = t.filter((a) => {
+    const p = d.toLowerCase();
+    return a.agent.toLowerCase().includes(p) || a.id.toLowerCase().includes(p) || (a.model ?? "").toLowerCase().includes(p);
+  });
+  return /* @__PURE__ */ i("div", { style: m.container, children: [
+    /* @__PURE__ */ i("div", { style: m.header, children: [
+      /* @__PURE__ */ n("h2", { style: m.title, children: "Conversations" }),
+      /* @__PURE__ */ n(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search...",
+          value: d,
+          onChange: (a) => o(a.target.value),
+          style: m.search
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i("div", { style: m.list, children: [
+      r.length === 0 && /* @__PURE__ */ n("div", { style: m.empty, children: "No conversations found" }),
+      r.map((a) => /* @__PURE__ */ i(
+        "div",
+        {
+          onClick: () => l == null ? void 0 : l(a.id),
+          style: {
+            ...m.item,
+            ...a.id === e ? m.itemSelected : {}
+          },
+          children: [
+            /* @__PURE__ */ i("div", { style: m.itemHeader, children: [
+              /* @__PURE__ */ n("span", { style: m.agent, children: a.agent }),
+              /* @__PURE__ */ n("span", { style: m.cost, children: C(a.total_cost) })
+            ] }),
+            /* @__PURE__ */ i("div", { style: m.itemMeta, children: [
+              a.model && /* @__PURE__ */ n("span", { style: m.model, children: a.model }),
+              /* @__PURE__ */ i("span", { style: m.spanCount, children: [
+                a.span_count,
+                " spans"
+              ] })
+            ] }),
+            /* @__PURE__ */ n("div", { style: m.time, children: F(a.start_time) })
+          ]
+        },
+        a.id
+      ))
+    ] })
+  ] });
+}
+const m = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    borderRight: "1px solid #2d333b",
+    background: "#161b22",
+    minWidth: 280
+  },
+  header: {
+    padding: "16px",
+    borderBottom: "1px solid #2d333b"
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: 600,
+    marginBottom: 8,
+    color: "#e1e4e8"
+  },
+  search: {
+    width: "100%",
+    padding: "6px 10px",
+    borderRadius: 6,
+    border: "1px solid #3d444d",
+    background: "#0d1117",
+    color: "#e1e4e8",
+    fontSize: 13,
+    outline: "none"
+  },
+  list: {
+    flex: 1,
+    overflowY: "auto"
+  },
+  empty: {
+    padding: 16,
+    color: "#8b949e",
+    textAlign: "center",
+    fontSize: 13
+  },
+  item: {
+    padding: "10px 16px",
+    borderBottom: "1px solid #21262d",
+    cursor: "pointer",
+    transition: "background 0.15s"
+  },
+  itemSelected: {
+    background: "#1f2937",
+    borderLeft: "3px solid #58a6ff"
+  },
+  itemHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  agent: {
+    fontWeight: 600,
+    fontSize: 14,
+    color: "#e1e4e8"
+  },
+  cost: {
+    fontSize: 12,
+    color: "#3fb950",
+    fontFamily: "monospace"
+  },
+  itemMeta: {
+    display: "flex",
+    gap: 8,
+    marginBottom: 2
+  },
+  model: {
+    fontSize: 12,
+    color: "#8b949e",
+    background: "#21262d",
+    padding: "1px 6px",
+    borderRadius: 4
+  },
+  spanCount: {
+    fontSize: 12,
+    color: "#8b949e"
+  },
+  time: {
+    fontSize: 11,
+    color: "#6e7681"
+  }
+};
+function R(t) {
+  const e = t.attributes, l = e["yuu.cost.amount"];
+  return l == null ? null : {
+    category: e["yuu.cost.category"] ?? "llm",
+    currency: e["yuu.cost.currency"] ?? "USD",
+    amount: Number(l),
+    source: e["yuu.cost.source"],
+    pricingId: e["yuu.cost.pricing_id"],
+    llmProvider: e["yuu.llm.provider"],
+    llmModel: e["yuu.llm.model"],
+    llmRequestId: e["yuu.llm.request_id"],
+    toolName: e["yuu.tool.name"],
+    toolCallId: e["yuu.tool.call_id"]
+  };
+}
+function W(t) {
+  const e = t.attributes, l = e["yuu.llm.provider"];
+  return l == null ? null : {
+    provider: String(l),
+    model: String(e["yuu.llm.model"] ?? ""),
+    requestId: e["yuu.llm.request_id"],
+    inputTokens: Number(e["yuu.llm.usage.input_tokens"] ?? 0),
+    outputTokens: Number(e["yuu.llm.usage.output_tokens"] ?? 0),
+    cacheReadTokens: Number(e["yuu.llm.usage.cache_read_tokens"] ?? 0),
+    cacheWriteTokens: Number(e["yuu.llm.usage.cache_write_tokens"] ?? 0),
+    totalTokens: e["yuu.llm.usage.total_tokens"] != null ? Number(e["yuu.llm.usage.total_tokens"]) : void 0
+  };
+}
+function I(t) {
+  const e = t.attributes, l = e["yuu.tool.name"];
+  return l == null ? null : {
+    name: String(l),
+    callId: e["yuu.tool.call_id"],
+    unit: String(e["yuu.tool.usage.unit"] ?? ""),
+    quantity: Number(e["yuu.tool.usage.quantity"] ?? 0)
+  };
+}
+function v(t) {
+  return t.events.filter((e) => e.name === "yuu.cost").map(R).filter((e) => e !== null);
+}
+function k(t) {
+  return t.events.filter((e) => e.name === "yuu.llm.usage").map(W).filter((e) => e !== null);
+}
+function _(t) {
+  return t.events.filter((e) => e.name === "yuu.tool.usage").map(I).filter((e) => e !== null);
+}
+function D(t) {
+  const e = [], l = [], d = [];
+  for (const o of t)
+    e.push(...v(o)), l.push(...k(o)), d.push(..._(o));
+  return { costs: e, usages: l, toolUsages: d };
+}
+function $(t) {
+  return t >= 1e3 ? `${(t / 1e3).toFixed(1)}k` : String(t);
+}
+function M({ span: t, usage: e, cost: l }) {
+  const d = (t.end_time_unix_nano - t.start_time_unix_nano) / 1e6;
+  return /* @__PURE__ */ i("div", { style: u.card, children: [
+    /* @__PURE__ */ i("div", { style: u.header, children: [
+      /* @__PURE__ */ i("div", { style: u.headerLeft, children: [
+        /* @__PURE__ */ n("span", { style: u.icon, children: "🤖" }),
+        /* @__PURE__ */ n("span", { style: u.name, children: t.name })
+      ] }),
+      /* @__PURE__ */ i("div", { style: u.headerRight, children: [
+        l && /* @__PURE__ */ i("span", { style: u.cost, children: [
+          "$",
+          l.amount.toFixed(4)
+        ] }),
+        /* @__PURE__ */ i("span", { style: u.duration, children: [
+          d.toFixed(0),
+          "ms"
+        ] })
+      ] })
+    ] }),
+    e && /* @__PURE__ */ i("div", { style: u.body, children: [
+      /* @__PURE__ */ i("div", { style: u.modelLine, children: [
+        /* @__PURE__ */ n("span", { style: u.provider, children: e.provider }),
+        /* @__PURE__ */ n("span", { style: u.model, children: e.model })
+      ] }),
+      /* @__PURE__ */ i("div", { style: u.tokens, children: [
+        /* @__PURE__ */ n(b, { label: "in", value: e.inputTokens, color: "#58a6ff" }),
+        /* @__PURE__ */ n(b, { label: "out", value: e.outputTokens, color: "#d2a8ff" }),
+        e.cacheReadTokens > 0 && /* @__PURE__ */ n(
+          b,
+          {
+            label: "cache↓",
+            value: e.cacheReadTokens,
+            color: "#3fb950"
+          }
+        ),
+        e.cacheWriteTokens > 0 && /* @__PURE__ */ n(
+          b,
+          {
+            label: "cache↑",
+            value: e.cacheWriteTokens,
+            color: "#f0883e"
+          }
+        ),
+        e.totalTokens != null && /* @__PURE__ */ n(
+          b,
+          {
+            label: "total",
+            value: e.totalTokens,
+            color: "#8b949e"
+          }
+        )
+      ] }),
+      e.requestId && /* @__PURE__ */ i("div", { style: u.requestId, children: [
+        "req: ",
+        e.requestId
+      ] })
+    ] }),
+    t.status_code === 2 && /* @__PURE__ */ n("div", { style: u.error, children: "⚠ Error" })
+  ] });
+}
+function b({
+  label: t,
+  value: e,
+  color: l
+}) {
+  return /* @__PURE__ */ i("span", { style: { ...u.badge, borderColor: l }, children: [
+    /* @__PURE__ */ n("span", { style: { color: "#8b949e", fontSize: 10 }, children: t }),
+    " ",
+    /* @__PURE__ */ n("span", { style: { color: l, fontWeight: 600 }, children: $(e) })
+  ] });
+}
+const u = {
+  card: {
+    background: "#161b22",
+    border: "1px solid #1f3a5f",
+    borderRadius: 8,
+    padding: "12px 16px",
+    borderLeft: "3px solid #58a6ff"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  headerLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  headerRight: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10
+  },
+  icon: {
+    fontSize: 16
+  },
+  name: {
+    fontWeight: 600,
+    fontSize: 14,
+    color: "#e1e4e8"
+  },
+  cost: {
+    fontSize: 13,
+    color: "#3fb950",
+    fontFamily: "monospace",
+    fontWeight: 600
+  },
+  duration: {
+    fontSize: 12,
+    color: "#8b949e",
+    fontFamily: "monospace"
+  },
+  body: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6
+  },
+  modelLine: {
+    display: "flex",
+    gap: 8,
+    alignItems: "center"
+  },
+  provider: {
+    fontSize: 12,
+    color: "#8b949e"
+  },
+  model: {
+    fontSize: 12,
+    color: "#d2a8ff",
+    background: "#21262d",
+    padding: "1px 6px",
+    borderRadius: 4,
+    fontFamily: "monospace"
+  },
+  tokens: {
+    display: "flex",
+    gap: 6,
+    flexWrap: "wrap"
+  },
+  badge: {
+    display: "inline-flex",
+    gap: 4,
+    alignItems: "center",
+    fontSize: 12,
+    fontFamily: "monospace",
+    padding: "2px 8px",
+    borderRadius: 4,
+    border: "1px solid",
+    background: "#0d1117"
+  },
+  requestId: {
+    fontSize: 11,
+    color: "#6e7681",
+    fontFamily: "monospace"
+  },
+  error: {
+    marginTop: 6,
+    fontSize: 12,
+    color: "#f85149",
+    fontWeight: 600
+  }
+};
+function q({ span: t, usage: e, cost: l }) {
+  const d = (t.end_time_unix_nano - t.start_time_unix_nano) / 1e6, o = (e == null ? void 0 : e.name) ?? t.attributes["yuu.tool.name"] ?? t.name;
+  return /* @__PURE__ */ i("div", { style: f.card, children: [
+    /* @__PURE__ */ i("div", { style: f.header, children: [
+      /* @__PURE__ */ i("div", { style: f.headerLeft, children: [
+        /* @__PURE__ */ n("span", { style: f.icon, children: "🔧" }),
+        /* @__PURE__ */ n("span", { style: f.name, children: o })
+      ] }),
+      /* @__PURE__ */ i("div", { style: f.headerRight, children: [
+        l && /* @__PURE__ */ i("span", { style: f.cost, children: [
+          "$",
+          l.amount.toFixed(4)
+        ] }),
+        /* @__PURE__ */ i("span", { style: f.duration, children: [
+          d.toFixed(0),
+          "ms"
+        ] })
+      ] })
+    ] }),
+    e && /* @__PURE__ */ n("div", { style: f.body, children: /* @__PURE__ */ i("span", { style: f.usageLine, children: [
+      e.quantity,
+      " ",
+      e.unit
+    ] }) }),
+    t.status_code === 2 && /* @__PURE__ */ n("div", { style: f.error, children: "⚠ Error" })
+  ] });
+}
+const f = {
+  card: {
+    background: "#161b22",
+    border: "1px solid #2d4a2d",
+    borderRadius: 8,
+    padding: "12px 16px",
+    borderLeft: "3px solid #3fb950"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  headerLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  headerRight: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10
+  },
+  icon: {
+    fontSize: 16
+  },
+  name: {
+    fontWeight: 600,
+    fontSize: 14,
+    color: "#e1e4e8"
+  },
+  cost: {
+    fontSize: 13,
+    color: "#3fb950",
+    fontFamily: "monospace",
+    fontWeight: 600
+  },
+  duration: {
+    fontSize: 12,
+    color: "#8b949e",
+    fontFamily: "monospace"
+  },
+  body: {
+    marginTop: 6
+  },
+  usageLine: {
+    fontSize: 12,
+    color: "#8b949e",
+    fontFamily: "monospace"
+  },
+  error: {
+    marginTop: 6,
+    fontSize: 12,
+    color: "#f85149",
+    fontWeight: 600
+  }
+};
+function E({ spans: t }) {
+  const e = [...t].sort(
+    (l, d) => l.start_time_unix_nano - d.start_time_unix_nano
+  );
+  return /* @__PURE__ */ n("div", { style: g.container, children: e.map((l) => {
+    const d = v(l), o = l.name === "llm_gen" || l.name.startsWith("llm"), r = l.name === "tools" || l.name.startsWith("tool:");
+    if (o) {
+      const a = k(l), p = d.find((h) => h.category === "llm");
+      return /* @__PURE__ */ n(
+        M,
+        {
+          span: l,
+          usage: a[0],
+          cost: p
+        },
+        l.span_id
+      );
+    }
+    if (r) {
+      const a = _(l), p = d.find((h) => h.category === "tool");
+      return /* @__PURE__ */ n(
+        q,
+        {
+          span: l,
+          usage: a[0],
+          cost: p
+        },
+        l.span_id
+      );
+    }
+    return /* @__PURE__ */ n(B, { span: l, costs: d }, l.span_id);
+  }) });
+}
+function B({ span: t, costs: e }) {
+  const l = e.reduce((o, r) => o + r.amount, 0), d = (t.end_time_unix_nano - t.start_time_unix_nano) / 1e6;
+  return /* @__PURE__ */ i("div", { style: g.card, children: [
+    /* @__PURE__ */ i("div", { style: g.cardHeader, children: [
+      /* @__PURE__ */ n("span", { style: g.spanName, children: t.name }),
+      /* @__PURE__ */ i("span", { style: g.duration, children: [
+        d.toFixed(0),
+        "ms"
+      ] })
+    ] }),
+    l > 0 && /* @__PURE__ */ i("div", { style: g.costLine, children: [
+      "Total: $",
+      l.toFixed(4)
+    ] })
+  ] });
+}
+const g = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    padding: 16
+  },
+  card: {
+    background: "#161b22",
+    border: "1px solid #2d333b",
+    borderRadius: 8,
+    padding: "12px 16px"
+  },
+  cardHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  spanName: {
+    fontWeight: 600,
+    fontSize: 14,
+    color: "#e1e4e8"
+  },
+  duration: {
+    fontSize: 12,
+    color: "#8b949e",
+    fontFamily: "monospace"
+  },
+  costLine: {
+    marginTop: 4,
+    fontSize: 12,
+    color: "#3fb950",
+    fontFamily: "monospace"
+  }
+};
+function H({ costs: t }) {
+  if (t.length === 0)
+    return /* @__PURE__ */ i("div", { style: c.container, children: [
+      /* @__PURE__ */ n("h3", { style: c.title, children: "Cost" }),
+      /* @__PURE__ */ n("div", { style: c.empty, children: "No cost data" })
+    ] });
+  const e = t.reduce((o, r) => o + r.amount, 0), l = /* @__PURE__ */ new Map();
+  for (const o of t)
+    l.set(o.category, (l.get(o.category) ?? 0) + o.amount);
+  const d = /* @__PURE__ */ new Map();
+  for (const o of t)
+    o.category === "llm" && o.llmModel && d.set(o.llmModel, (d.get(o.llmModel) ?? 0) + o.amount);
+  return /* @__PURE__ */ i("div", { style: c.container, children: [
+    /* @__PURE__ */ n("h3", { style: c.title, children: "Cost" }),
+    /* @__PURE__ */ i("div", { style: c.total, children: [
+      /* @__PURE__ */ n("span", { children: "Total" }),
+      /* @__PURE__ */ i("span", { style: c.amount, children: [
+        "$",
+        e.toFixed(4)
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { style: c.divider }),
+    Array.from(l.entries()).map(([o, r]) => /* @__PURE__ */ i("div", { style: c.row, children: [
+      /* @__PURE__ */ n("span", { style: c.label, children: o === "llm" ? "🤖 LLM" : "🔧 Tool" }),
+      /* @__PURE__ */ i("span", { style: c.value, children: [
+        "$",
+        r.toFixed(4)
+      ] })
+    ] }, o)),
+    d.size > 0 && /* @__PURE__ */ i(w, { children: [
+      /* @__PURE__ */ n("div", { style: c.divider }),
+      /* @__PURE__ */ n("div", { style: c.sectionTitle, children: "By Model" }),
+      Array.from(d.entries()).map(([o, r]) => /* @__PURE__ */ i("div", { style: c.row, children: [
+        /* @__PURE__ */ n("span", { style: c.modelLabel, children: o }),
+        /* @__PURE__ */ i("span", { style: c.value, children: [
+          "$",
+          r.toFixed(4)
+        ] })
+      ] }, o))
+    ] })
+  ] });
+}
+const c = {
+  container: {
+    background: "#161b22",
+    border: "1px solid #2d333b",
+    borderRadius: 8,
+    padding: 16
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#e1e4e8",
+    marginBottom: 12
+  },
+  empty: {
+    fontSize: 13,
+    color: "#8b949e"
+  },
+  total: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    fontSize: 14,
+    color: "#e1e4e8",
+    fontWeight: 600
+  },
+  amount: {
+    color: "#3fb950",
+    fontFamily: "monospace",
+    fontSize: 16
+  },
+  divider: {
+    height: 1,
+    background: "#2d333b",
+    margin: "10px 0"
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "3px 0"
+  },
+  label: {
+    fontSize: 13,
+    color: "#e1e4e8"
+  },
+  value: {
+    fontSize: 13,
+    color: "#3fb950",
+    fontFamily: "monospace"
+  },
+  sectionTitle: {
+    fontSize: 12,
+    color: "#8b949e",
+    fontWeight: 600,
+    marginBottom: 4
+  },
+  modelLabel: {
+    fontSize: 12,
+    color: "#d2a8ff",
+    fontFamily: "monospace"
+  }
+};
+function x(t) {
+  return t >= 1e6 ? `${(t / 1e6).toFixed(2)}M` : t >= 1e3 ? `${(t / 1e3).toFixed(1)}k` : String(t);
+}
+function A({ usages: t }) {
+  if (t.length === 0)
+    return /* @__PURE__ */ i("div", { style: s.container, children: [
+      /* @__PURE__ */ n("h3", { style: s.title, children: "Usage" }),
+      /* @__PURE__ */ n("div", { style: s.empty, children: "No usage data" })
+    ] });
+  const e = /* @__PURE__ */ new Map();
+  for (const o of t) {
+    const r = `${o.provider}/${o.model}`, a = e.get(r);
+    a ? (a.inputTokens += o.inputTokens, a.outputTokens += o.outputTokens, a.cacheReadTokens += o.cacheReadTokens, a.cacheWriteTokens += o.cacheWriteTokens, a.requests += 1) : e.set(r, {
+      model: o.model,
+      provider: o.provider,
+      inputTokens: o.inputTokens,
+      outputTokens: o.outputTokens,
+      cacheReadTokens: o.cacheReadTokens,
+      cacheWriteTokens: o.cacheWriteTokens,
+      requests: 1
+    });
+  }
+  const l = t.reduce((o, r) => o + r.inputTokens, 0), d = t.reduce((o, r) => o + r.outputTokens, 0);
+  return /* @__PURE__ */ i("div", { style: s.container, children: [
+    /* @__PURE__ */ n("h3", { style: s.title, children: "Usage" }),
+    /* @__PURE__ */ i("div", { style: s.totalRow, children: [
+      /* @__PURE__ */ i("div", { style: s.totalItem, children: [
+        /* @__PURE__ */ n("span", { style: s.totalLabel, children: "Input" }),
+        /* @__PURE__ */ n("span", { style: s.totalValue, children: x(l) })
+      ] }),
+      /* @__PURE__ */ i("div", { style: s.totalItem, children: [
+        /* @__PURE__ */ n("span", { style: s.totalLabel, children: "Output" }),
+        /* @__PURE__ */ n("span", { style: s.totalValue, children: x(d) })
+      ] }),
+      /* @__PURE__ */ i("div", { style: s.totalItem, children: [
+        /* @__PURE__ */ n("span", { style: s.totalLabel, children: "Requests" }),
+        /* @__PURE__ */ n("span", { style: s.totalValue, children: t.length })
+      ] })
+    ] }),
+    /* @__PURE__ */ n("div", { style: s.divider }),
+    Array.from(e.values()).map((o) => /* @__PURE__ */ i("div", { style: s.modelBlock, children: [
+      /* @__PURE__ */ i("div", { style: s.modelHeader, children: [
+        /* @__PURE__ */ n("span", { style: s.modelName, children: o.model }),
+        /* @__PURE__ */ n("span", { style: s.provider, children: o.provider })
+      ] }),
+      /* @__PURE__ */ i("div", { style: s.tokenRow, children: [
+        /* @__PURE__ */ i("span", { style: s.tokenLabel, children: [
+          "in: ",
+          /* @__PURE__ */ n("b", { children: x(o.inputTokens) })
+        ] }),
+        /* @__PURE__ */ i("span", { style: s.tokenLabel, children: [
+          "out: ",
+          /* @__PURE__ */ n("b", { children: x(o.outputTokens) })
+        ] }),
+        o.cacheReadTokens > 0 && /* @__PURE__ */ i("span", { style: s.tokenLabel, children: [
+          "cache↓: ",
+          /* @__PURE__ */ n("b", { children: x(o.cacheReadTokens) })
+        ] }),
+        /* @__PURE__ */ i("span", { style: s.tokenLabel, children: [
+          "×",
+          o.requests
+        ] })
+      ] })
+    ] }, `${o.provider}/${o.model}`))
+  ] });
+}
+const s = {
+  container: {
+    background: "#161b22",
+    border: "1px solid #2d333b",
+    borderRadius: 8,
+    padding: 16
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#e1e4e8",
+    marginBottom: 12
+  },
+  empty: {
+    fontSize: 13,
+    color: "#8b949e"
+  },
+  totalRow: {
+    display: "flex",
+    gap: 16
+  },
+  totalItem: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  },
+  totalLabel: {
+    fontSize: 11,
+    color: "#8b949e",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  },
+  totalValue: {
+    fontSize: 16,
+    fontWeight: 600,
+    color: "#e1e4e8",
+    fontFamily: "monospace"
+  },
+  divider: {
+    height: 1,
+    background: "#2d333b",
+    margin: "12px 0"
+  },
+  modelBlock: {
+    marginBottom: 10
+  },
+  modelHeader: {
+    display: "flex",
+    gap: 8,
+    alignItems: "center",
+    marginBottom: 4
+  },
+  modelName: {
+    fontSize: 13,
+    color: "#d2a8ff",
+    fontFamily: "monospace",
+    fontWeight: 600
+  },
+  provider: {
+    fontSize: 11,
+    color: "#8b949e"
+  },
+  tokenRow: {
+    display: "flex",
+    gap: 10,
+    flexWrap: "wrap"
+  },
+  tokenLabel: {
+    fontSize: 12,
+    color: "#8b949e",
+    fontFamily: "monospace"
+  }
+};
+function V({ spans: t }) {
+  if (t.length === 0) return null;
+  const e = Math.min(...t.map((r) => r.start_time_unix_nano)), d = Math.max(...t.map((r) => r.end_time_unix_nano)) - e || 1, o = [...t].sort(
+    (r, a) => r.start_time_unix_nano - a.start_time_unix_nano
+  );
+  return /* @__PURE__ */ i("div", { style: y.container, children: [
+    /* @__PURE__ */ n("h3", { style: y.title, children: "Timeline" }),
+    /* @__PURE__ */ n("div", { style: y.chart, children: o.map((r) => {
+      const a = (r.start_time_unix_nano - e) / d * 100, p = (r.end_time_unix_nano - r.start_time_unix_nano) / d * 100, h = (r.end_time_unix_nano - r.start_time_unix_nano) / 1e6, S = r.name === "llm_gen" || r.name.startsWith("llm"), T = r.name === "tools" || r.name.startsWith("tool:"), z = S ? "#58a6ff" : T ? "#3fb950" : "#8b949e";
+      return /* @__PURE__ */ i("div", { style: y.row, children: [
+        /* @__PURE__ */ n("div", { style: y.label, title: r.name, children: r.name }),
+        /* @__PURE__ */ n("div", { style: y.track, children: /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              ...y.bar,
+              left: `${a}%`,
+              width: `${Math.max(p, 0.5)}%`,
+              background: z
+            },
+            title: `${h.toFixed(0)}ms`
+          }
+        ) }),
+        /* @__PURE__ */ i("div", { style: y.duration, children: [
+          h.toFixed(0),
+          "ms"
+        ] })
+      ] }, r.span_id);
+    }) })
+  ] });
+}
+const y = {
+  container: {
+    background: "#161b22",
+    border: "1px solid #2d333b",
+    borderRadius: 8,
+    padding: 16
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#e1e4e8",
+    marginBottom: 12
+  },
+  chart: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    height: 24
+  },
+  label: {
+    width: 100,
+    fontSize: 12,
+    color: "#8b949e",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flexShrink: 0
+  },
+  track: {
+    flex: 1,
+    position: "relative",
+    height: 16,
+    background: "#0d1117",
+    borderRadius: 3
+  },
+  bar: {
+    position: "absolute",
+    top: 0,
+    height: "100%",
+    borderRadius: 3,
+    minWidth: 2,
+    opacity: 0.85
+  },
+  duration: {
+    width: 60,
+    fontSize: 11,
+    color: "#6e7681",
+    fontFamily: "monospace",
+    textAlign: "right",
+    flexShrink: 0
+  }
+};
+export {
+  E as ConversationFlow,
+  j as ConversationList,
+  H as CostSummary,
+  M as LlmCard,
+  V as SpanTimeline,
+  q as ToolCard,
+  A as UsageSummary,
+  v as extractCostEvents,
+  k as extractLlmUsageEvents,
+  _ as extractToolUsageEvents,
+  D as parseConversation
+};

package/dist/lib/types.d.ts

@@ -0,0 +1,71 @@
+/** Summary of a conversation for list views. */
+export interface ConversationSummary {
+    id: string;
+    agent: string;
+    model?: string;
+    span_count: number;
+    total_cost: number;
+    start_time: number;
+    end_time: number;
+}
+/** Full conversation with all spans. */
+export interface Conversation {
+    id: string;
+    agent: string;
+    model?: string;
+    tags?: string[];
+    spans: Span[];
+    total_cost?: number;
+    start_time: number;
+    end_time: number;
+}
+/** A single OTEL span. */
+export interface Span {
+    trace_id: string;
+    span_id: string;
+    parent_span_id?: string | null;
+    name: string;
+    start_time_unix_nano: number;
+    end_time_unix_nano: number;
+    status_code: number;
+    attributes: Record<string, unknown>;
+    events: SpanEvent[];
+}
+/** A single OTEL span event. */
+export interface SpanEvent {
+    name: string;
+    time_unix_nano: number;
+    attributes: Record<string, unknown>;
+}
+/** Parsed cost event from yuu.cost event attributes. */
+export interface CostEvent {
+    category: "llm" | "tool";
+    currency: string;
+    amount: number;
+    source?: string;
+    pricingId?: string;
+    llmProvider?: string;
+    llmModel?: string;
+    llmRequestId?: string;
+    toolName?: string;
+    toolCallId?: string;
+}
+/** Parsed LLM usage event from yuu.llm.usage event attributes. */
+export interface LlmUsageEvent {
+    provider: string;
+    model: string;
+    requestId?: string;
+    inputTokens: number;
+    outputTokens: number;
+    cacheReadTokens: number;
+    cacheWriteTokens: number;
+    totalTokens?: number;
+}
+/** Parsed tool usage event from yuu.tool.usage event attributes. */
+export interface ToolUsageEvent {
+    name: string;
+    callId?: string;
+    unit: string;
+    quantity: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAIA,gDAAgD;AAChD,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,0BAA0B;AAC1B,MAAM,WAAW,IAAI;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,oBAAoB,EAAE,MAAM,CAAC;IAC7B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,gCAAgC;AAChC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC;AAED,wDAAwD;AACxD,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,kEAAkE;AAClE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,oEAAoE;AACpE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB"}

package/dist/lib/utils/parse.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Attribute key extraction utilities.
+ *
+ * This is the ONLY place in the frontend that references yuu.* magic strings.
+ * All keys correspond to Python-side otel.py constants.
+ */
+import type { CostEvent, LlmUsageEvent, Span, ToolUsageEvent } from "../types";
+/** Extract all cost events from a span's events. */
+export declare function extractCostEvents(span: Span): CostEvent[];
+/** Extract all LLM usage events from a span's events. */
+export declare function extractLlmUsageEvents(span: Span): LlmUsageEvent[];
+/** Extract all tool usage events from a span's events. */
+export declare function extractToolUsageEvents(span: Span): ToolUsageEvent[];
+/** Parse all typed events from a list of spans. */
+export declare function parseConversation(spans: Span[]): {
+    costs: CostEvent[];
+    usages: LlmUsageEvent[];
+    toolUsages: ToolUsageEvent[];
+};
+//# sourceMappingURL=parse.d.ts.map

package/dist/lib/utils/parse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse.d.ts","sourceRoot":"","sources":["../../../src/utils/parse.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,IAAI,EAEJ,cAAc,EACf,MAAM,UAAU,CAAC;AA2DlB,oDAAoD;AACpD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,EAAE,CAKzD;AAED,yDAAyD;AACzD,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,IAAI,GAAG,aAAa,EAAE,CAKjE;AAED,0DAA0D;AAC1D,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,IAAI,GAAG,cAAc,EAAE,CAKnE;AAMD,mDAAmD;AACnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG;IAChD,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,UAAU,EAAE,cAAc,EAAE,CAAC;CAC9B,CAYA"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@yuulabs/ytrace-ui",
+  "version": "0.0.2",
+  "description": "React components for LLM trace visualization",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "dist/lib"
+  ],
+  "main": "./dist/lib/index.js",
+  "module": "./dist/lib/index.js",
+  "types": "./dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/lib/index.js",
+      "types": "./dist/lib/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:app": "vite build --config vite.config.ts",
+    "build:lib": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json --emitDeclarationOnly",
+    "build": "npm run build:app && npm run build:lib",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.4.1",
+    "typescript": "^5.8.0",
+    "vite": "^6.3.0"
+  }
+}