agentic-ui-libs 1.2.0-beta.19 → 1.2.0-beta.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -106312,7 +106312,6 @@ class DetailPageService {
106312
106312
  * Observations are loaded separately per trace when user expands
106313
106313
  */
106314
106314
  async fetchSessionDetail(sessionId) {
106315
- var _a, _b;
106316
106315
  const sessionResponse = await this.apiService.fetchSessionById({
106317
106316
  sessionId,
106318
106317
  projectId: this.projectId
@@ -106327,10 +106326,6 @@ class DetailPageService {
106327
106326
  );
106328
106327
  traceDetails = traceResponses.map((trace) => this.transformToTraceDetailData(trace));
106329
106328
  }
106330
- const firstTraceForSource = (_a = sessionResponse.traces) == null ? void 0 : _a[0];
106331
- const sessionLevelSource = typeof sessionResponse.source === "string" && sessionResponse.source.length > 0 ? sessionResponse.source : void 0;
106332
- const firstTraceSource = firstTraceForSource && typeof firstTraceForSource.source === "string" && firstTraceForSource.source.length > 0 ? firstTraceForSource.source : void 0;
106333
- const resolvedSource = sessionLevelSource ?? firstTraceSource ?? ((_b = traceDetails[0]) == null ? void 0 : _b.source);
106334
106329
  return {
106335
106330
  id: sessionResponse.id,
106336
106331
  projectId: sessionResponse.projectId,
@@ -106338,8 +106333,7 @@ class DetailPageService {
106338
106333
  bookmarked: false,
106339
106334
  public: false,
106340
106335
  traces: traceDetails,
106341
- scores: [],
106342
- source: resolvedSource
106336
+ scores: []
106343
106337
  };
106344
106338
  }
106345
106339
  /**
@@ -106411,21 +106405,15 @@ class DetailPageService {
106411
106405
  * @param onRemainingTrace - Callback for each additional trace as it loads (updates skeleton)
106412
106406
  */
106413
106407
  async fetchSessionDetailProgressive(sessionId, onSessionMeta, onFirstTrace, onRemainingTrace) {
106414
- var _a, _b;
106415
106408
  const sessionResponse = await this.apiService.fetchSessionById({
106416
106409
  sessionId,
106417
106410
  projectId: this.projectId
106418
106411
  });
106419
106412
  const traceIds = (sessionResponse.traces || []).map((t2) => t2.id);
106420
- const firstTrace = (_a = sessionResponse.traces) == null ? void 0 : _a[0];
106421
- const firstTraceSource = firstTrace && typeof firstTrace.source === "string" && firstTrace.source.length > 0 ? firstTrace.source : void 0;
106422
- const sessionLevelSource = typeof sessionResponse.source === "string" && sessionResponse.source.length > 0 ? sessionResponse.source : void 0;
106423
- const resolvedSessionSource = sessionLevelSource ?? firstTraceSource;
106424
106413
  onSessionMeta({
106425
106414
  id: sessionResponse.id,
106426
106415
  traceCount: traceIds.length,
106427
- traceIds,
106428
- source: resolvedSessionSource
106416
+ traceIds
106429
106417
  });
106430
106418
  if (traceIds.length === 0) {
106431
106419
  return {
@@ -106435,8 +106423,7 @@ class DetailPageService {
106435
106423
  bookmarked: false,
106436
106424
  public: false,
106437
106425
  traces: [],
106438
- scores: [],
106439
- source: resolvedSessionSource
106426
+ scores: []
106440
106427
  };
106441
106428
  }
106442
106429
  const firstTraceId = traceIds[0];
@@ -106483,8 +106470,7 @@ class DetailPageService {
106483
106470
  bookmarked: false,
106484
106471
  public: false,
106485
106472
  traces: allTraces,
106486
- scores: [],
106487
- source: resolvedSessionSource ?? ((_b = allTraces[0]) == null ? void 0 : _b.source)
106473
+ scores: []
106488
106474
  };
106489
106475
  }
106490
106476
  // ============================================================================
@@ -106578,7 +106564,6 @@ class DetailPageService {
106578
106564
  totalCost: trace.totalCost || trace.calculatedTotalCost,
106579
106565
  totalTokens: trace.totalTokens,
106580
106566
  environment: trace.environment,
106581
- source: typeof trace.source === "string" && trace.source.length > 0 ? trace.source : void 0,
106582
106567
  observations: (trace.observations || []).map(
106583
106568
  (obs) => this.transformObservation(obs)
106584
106569
  ),
@@ -109306,521 +109291,6 @@ function NodeDetailPanel({
109306
109291
  )
109307
109292
  ] });
109308
109293
  }
109309
- const MicIcon = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { flexShrink: 0 }, children: [
109310
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109311
- "path",
109312
- {
109313
- d: "M8 2C7.60218 2 7.22064 2.15804 6.93934 2.43934C6.65804 2.72064 6.5 3.10218 6.5 3.5V6.5C6.5 6.89782 6.65804 7.27936 6.93934 7.56066C7.22064 7.84196 7.60218 8 8 8C8.39782 8 8.77936 7.84196 9.06066 7.56066C9.34196 7.27936 9.5 6.89782 9.5 6.5V3.5C9.5 3.10218 9.34196 2.72064 9.06066 2.43934C8.77936 2.15804 8.39782 2 8 2Z",
109314
- style: { fill: "#155EEF" }
109315
- }
109316
- ),
109317
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109318
- "path",
109319
- {
109320
- d: "M5.5 6V6.5C5.5 7.16304 5.76339 7.79893 6.23223 8.26777C6.70107 8.73661 7.33696 9 8 9C8.66304 9 9.29893 8.73661 9.76777 8.26777C10.2366 7.79893 10.5 7.16304 10.5 6.5V6",
109321
- style: { stroke: "#155EEF", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }
109322
- }
109323
- ),
109324
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109325
- "path",
109326
- {
109327
- d: "M8 9V11",
109328
- style: { stroke: "#155EEF", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }
109329
- }
109330
- ),
109331
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109332
- "path",
109333
- {
109334
- d: "M6.5 11H9.5",
109335
- style: { stroke: "#155EEF", strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" }
109336
- }
109337
- )
109338
- ] });
109339
- function VoiceEventLogsBanner({ onViewEventLogs }) {
109340
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between rounded-[8px] bg-[#FFFFFF] border border-[#D0D5DD] px-[12px] py-[8px] mb-[8px]", children: [
109341
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
109342
- /* @__PURE__ */ jsxRuntimeExports.jsx(MicIcon, {}),
109343
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-semibold text-[11px] leading-[14px] text-[#98A2B3] uppercase tracking-[0.04em]", children: "Voice-to-Voice Event Logs" })
109344
- ] }),
109345
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109346
- "button",
109347
- {
109348
- onClick: onViewEventLogs,
109349
- className: "text-[12px] font-medium text-[#155EEF] hover:text-[#344054] hover:underline transition-colors cursor-pointer bg-transparent border-none p-0",
109350
- "data-test-id": "view-event-logs-btn",
109351
- children: "View Event Logs"
109352
- }
109353
- )
109354
- ] });
109355
- }
109356
- function AlignLeftIcon({ className }) {
109357
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
109358
- "svg",
109359
- {
109360
- width: "16",
109361
- height: "16",
109362
- viewBox: "0 0 16 16",
109363
- fill: "none",
109364
- xmlns: "http://www.w3.org/2000/svg",
109365
- className,
109366
- "aria-hidden": "true",
109367
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
109368
- "path",
109369
- {
109370
- d: "M10.6667 6.66667H2M13.3333 4H2M13.3333 9.33333H2M10.6667 12H2",
109371
- stroke: "currentColor",
109372
- strokeWidth: "1.3",
109373
- strokeLinecap: "round",
109374
- strokeLinejoin: "round"
109375
- }
109376
- )
109377
- }
109378
- );
109379
- }
109380
- function JsonViewIcon({ className }) {
109381
- return /* @__PURE__ */ jsxRuntimeExports.jsx(
109382
- "svg",
109383
- {
109384
- width: "16",
109385
- height: "16",
109386
- viewBox: "0 0 16 16",
109387
- fill: "none",
109388
- xmlns: "http://www.w3.org/2000/svg",
109389
- className,
109390
- "aria-hidden": "true",
109391
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(
109392
- "path",
109393
- {
109394
- d: "M14 6.16602H8M14 2.66602H2M14 9.83268H8M14 13.3327H2M2.85333 5.70602L5.43111 7.63935C5.62411 7.78409 5.7206 7.85647 5.75511 7.94519C5.78533 8.02291 5.78533 8.10913 5.75511 8.18684C5.7206 8.27556 5.62411 8.34794 5.43111 8.49268L2.85333 10.426C2.57868 10.632 2.44135 10.735 2.3264 10.7326C2.22637 10.7305 2.13256 10.6836 2.07088 10.6048C2 10.5143 2 10.3427 2 9.99935V6.13268C2 5.78937 2 5.61771 2.07088 5.52718C2.13256 5.4484 2.22637 5.4015 2.3264 5.39942C2.44135 5.39703 2.57868 5.50003 2.85333 5.70602Z",
109395
- stroke: "currentColor",
109396
- strokeWidth: "1.3",
109397
- strokeLinecap: "round",
109398
- strokeLinejoin: "round"
109399
- }
109400
- )
109401
- }
109402
- );
109403
- }
109404
- function pickString(obj, keys2) {
109405
- for (const key of keys2) {
109406
- const value = obj[key];
109407
- if (typeof value === "string" && value.length > 0) return value;
109408
- if (typeof value === "number") return String(value);
109409
- }
109410
- return void 0;
109411
- }
109412
- function coerceDirection(raw) {
109413
- if (raw === "incoming" || raw === "server" || raw === "response") return "in";
109414
- return "out";
109415
- }
109416
- function normalizeEvent(raw, fallbackId, docTimestamp) {
109417
- if (!raw || typeof raw !== "object") {
109418
- return {
109419
- id: fallbackId,
109420
- timestamp: docTimestamp,
109421
- name: "event",
109422
- direction: "out",
109423
- payload: raw
109424
- };
109425
- }
109426
- const obj = raw;
109427
- const id = pickString(obj, ["event_id", "eventId", "_id", "id"]) ?? fallbackId;
109428
- const name = pickString(obj, ["type", "eventType", "event", "name"]) ?? "event";
109429
- const direction = coerceDirection(obj.direction);
109430
- return {
109431
- id,
109432
- timestamp: docTimestamp,
109433
- name,
109434
- direction,
109435
- payload: raw
109436
- };
109437
- }
109438
- function flattenEvents(data) {
109439
- if (data === null || data === void 0) return [];
109440
- const out = [];
109441
- const visitDoc = (doc2, docIdx) => {
109442
- if (!doc2 || typeof doc2 !== "object") return;
109443
- const docObj = doc2;
109444
- const docTimestamp = pickString(docObj, ["createdOn", "sT", "createdAt"]);
109445
- const events = docObj.events;
109446
- if (Array.isArray(events)) {
109447
- events.forEach((ev, evIdx) => {
109448
- out.push(normalizeEvent(ev, `${docIdx}-${evIdx}`, docTimestamp));
109449
- });
109450
- } else {
109451
- out.push(normalizeEvent(doc2, String(docIdx), docTimestamp));
109452
- }
109453
- };
109454
- if (Array.isArray(data)) {
109455
- data.forEach((doc2, docIdx) => visitDoc(doc2, docIdx));
109456
- return out;
109457
- }
109458
- if (typeof data === "object") {
109459
- const obj = data;
109460
- if (Array.isArray(obj.events)) {
109461
- visitDoc(obj, 0);
109462
- return out;
109463
- }
109464
- if (Array.isArray(obj.data)) {
109465
- return flattenEvents(obj.data);
109466
- }
109467
- }
109468
- return [];
109469
- }
109470
- function formatEventTime(iso) {
109471
- if (!iso) return "--:--:--:---";
109472
- const d3 = new Date(iso);
109473
- if (Number.isNaN(d3.getTime())) return "--:--:--:---";
109474
- const hh = String(d3.getHours()).padStart(2, "0");
109475
- const mm = String(d3.getMinutes()).padStart(2, "0");
109476
- const ss = String(d3.getSeconds()).padStart(2, "0");
109477
- const ms = String(d3.getMilliseconds()).padStart(3, "0");
109478
- return `${hh}:${mm}:${ss}:${ms}`;
109479
- }
109480
- function stringifyPayload(payload) {
109481
- if (payload === null || payload === void 0) return "";
109482
- if (typeof payload === "string") {
109483
- try {
109484
- return JSON.stringify(JSON.parse(payload), null, 2);
109485
- } catch {
109486
- return payload;
109487
- }
109488
- }
109489
- try {
109490
- return JSON.stringify(payload, null, 2);
109491
- } catch {
109492
- return String(payload);
109493
- }
109494
- }
109495
- function compactPayload(payload) {
109496
- if (payload === null || payload === void 0) return "";
109497
- if (typeof payload === "string") {
109498
- try {
109499
- return JSON.stringify(JSON.parse(payload));
109500
- } catch {
109501
- return payload;
109502
- }
109503
- }
109504
- try {
109505
- return JSON.stringify(payload);
109506
- } catch {
109507
- return String(payload);
109508
- }
109509
- }
109510
- function PayloadPanel({ payload, compactText }) {
109511
- const [viewMode, setViewMode] = useState("json");
109512
- const [fullscreen, setFullscreen] = useState(false);
109513
- const [copied, setCopied] = useState(false);
109514
- const displayText = viewMode === "json" ? payload : compactText;
109515
- const handleCopy = useCallback(async () => {
109516
- try {
109517
- await navigator.clipboard.writeText(displayText);
109518
- setCopied(true);
109519
- setTimeout(() => setCopied(false), 1500);
109520
- } catch {
109521
- }
109522
- }, [displayText]);
109523
- const toolbar = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[42px] px-[10px] border-b border-[#D0D5DD] flex items-center justify-between flex-shrink-0 bg-white", children: [
109524
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
109525
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109526
- "button",
109527
- {
109528
- type: "button",
109529
- onClick: () => setViewMode("json"),
109530
- className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "json" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
109531
- title: "Pretty JSON",
109532
- "aria-label": "Pretty JSON view",
109533
- "aria-pressed": viewMode === "json",
109534
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewIcon, { className: "w-[16px] h-[16px]" })
109535
- }
109536
- ),
109537
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109538
- "button",
109539
- {
109540
- type: "button",
109541
- onClick: () => setViewMode("text"),
109542
- className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "text" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
109543
- title: "Compact text",
109544
- "aria-label": "Compact text view",
109545
- "aria-pressed": viewMode === "text",
109546
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeftIcon, { className: "w-[16px] h-[16px]" })
109547
- }
109548
- )
109549
- ] }),
109550
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
109551
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109552
- "button",
109553
- {
109554
- type: "button",
109555
- onClick: () => setFullscreen((v) => !v),
109556
- className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
109557
- title: fullscreen ? "Exit fullscreen" : "Fullscreen",
109558
- "aria-label": fullscreen ? "Exit fullscreen" : "Fullscreen",
109559
- children: fullscreen ? /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { className: "w-[16px] h-[16px]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "w-[16px] h-[16px]" })
109560
- }
109561
- ),
109562
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109563
- "button",
109564
- {
109565
- type: "button",
109566
- onClick: () => void handleCopy(),
109567
- className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
109568
- title: "Copy to clipboard",
109569
- "aria-label": "Copy payload",
109570
- "data-test-id": "event-logs-row-copy",
109571
- children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[16px] h-[16px] text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-[16px] h-[16px]" })
109572
- }
109573
- )
109574
- ] })
109575
- ] });
109576
- if (fullscreen) {
109577
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[20000] flex flex-col bg-[#F9FAFB]", children: [
109578
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-[48px] px-[16px] border-b border-[#E4E7EC] flex items-center justify-between flex-shrink-0 bg-white", children: [
109579
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
109580
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109581
- "button",
109582
- {
109583
- type: "button",
109584
- onClick: () => setViewMode("json"),
109585
- className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "json" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
109586
- title: "Pretty JSON",
109587
- "aria-label": "Pretty JSON view",
109588
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(JsonViewIcon, { className: "w-[16px] h-[16px]" })
109589
- }
109590
- ),
109591
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109592
- "button",
109593
- {
109594
- type: "button",
109595
- onClick: () => setViewMode("text"),
109596
- className: `p-[5px] rounded-[4px] transition-colors ${viewMode === "text" ? "text-[#155EEF] bg-[#EFF4FF]" : "text-[#98A2B3] hover:bg-[#F2F4F7]"}`,
109597
- title: "Compact text",
109598
- "aria-label": "Compact text view",
109599
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeftIcon, { className: "w-[16px] h-[16px]" })
109600
- }
109601
- )
109602
- ] }),
109603
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
109604
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109605
- "button",
109606
- {
109607
- type: "button",
109608
- onClick: () => void handleCopy(),
109609
- className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
109610
- title: "Copy to clipboard",
109611
- "aria-label": "Copy payload",
109612
- children: copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[16px] h-[16px] text-[#12B76A]" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "w-[16px] h-[16px]" })
109613
- }
109614
- ),
109615
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109616
- "button",
109617
- {
109618
- type: "button",
109619
- onClick: () => setFullscreen(false),
109620
- className: "p-[5px] rounded-[4px] text-[#98A2B3] hover:bg-[#F2F4F7] transition-colors",
109621
- title: "Exit fullscreen",
109622
- "aria-label": "Exit fullscreen",
109623
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(Minimize2, { className: "w-[16px] h-[16px]" })
109624
- }
109625
- )
109626
- ] })
109627
- ] }),
109628
- /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "flex-1 overflow-auto m-0 p-[20px] text-[13px] leading-[20px] font-mono text-[#344054] whitespace-pre-wrap break-all", children: displayText })
109629
- ] }) });
109630
- }
109631
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-[10px] border border-[#D0D5DD] overflow-hidden mt-[12px]", children: [
109632
- toolbar,
109633
- /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "m-0 bg-[#F9FAFB] text-[#344054] p-[12px] text-[12px] leading-[18px] font-mono whitespace-pre-wrap break-all overflow-auto max-h-[360px]", children: displayText })
109634
- ] });
109635
- }
109636
- function EventRow({ event, isExpanded, onToggle }) {
109637
- const jsonText = useMemo(() => stringifyPayload(event.payload), [event.payload]);
109638
- const compactText = useMemo(() => compactPayload(event.payload), [event.payload]);
109639
- const hasPayload = jsonText.length > 0;
109640
- const isInput = event.direction === "in";
109641
- const DirectionIcon = isInput ? ArrowUp : ArrowDown;
109642
- const directionLabel = isInput ? "Input" : "Output";
109643
- const circleClasses = isInput ? "border-[#079455] text-[#079455]" : "border-[#D92D20] text-[#D92D20]";
109644
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex items-start gap-[12px]", "data-test-id": "event-logs-row", children: [
109645
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex-shrink-0 flex flex-col items-center w-[16px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
109646
- "div",
109647
- {
109648
- className: `relative z-10 w-[16px] h-[16px] rounded-full bg-white border flex items-center justify-center ${circleClasses}`,
109649
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(DirectionIcon, { className: "w-[8px] h-[8px]", strokeWidth: 2.5 })
109650
- }
109651
- ) }),
109652
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0 pb-[24px]", children: [
109653
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-[16px]", children: [
109654
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
109655
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[12px] leading-[16px] text-[#667085]", children: directionLabel }),
109656
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[14px] leading-[20px] font-medium text-[#344054] mt-[2px] break-all", children: event.name }),
109657
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109658
- "button",
109659
- {
109660
- type: "button",
109661
- onClick: onToggle,
109662
- className: "text-[13px] leading-[18px] text-[#155EEF] hover:underline mt-[4px] font-medium",
109663
- "data-test-id": "event-logs-view-details",
109664
- children: isExpanded ? "Hide details" : "View details"
109665
- }
109666
- )
109667
- ] }),
109668
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0 text-[12px] leading-[18px] text-[#344054] font-mono tabular-nums whitespace-nowrap pt-[2px]", children: formatEventTime(event.timestamp) })
109669
- ] }),
109670
- isExpanded && (hasPayload ? /* @__PURE__ */ jsxRuntimeExports.jsx(PayloadPanel, { payload: jsonText, compactText }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-[12px] text-[12px] text-[#667085] italic", children: "No payload recorded for this event." }))
109671
- ] })
109672
- ] });
109673
- }
109674
- function EventLogsSlideout({
109675
- isOpen,
109676
- onClose,
109677
- sessionId,
109678
- fetchEventLogs
109679
- }) {
109680
- const [rawData, setRawData] = useState(null);
109681
- const [loading, setLoading] = useState(false);
109682
- const [error, setError] = useState(null);
109683
- const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
109684
- useEffect(() => {
109685
- if (!isOpen || !sessionId || !fetchEventLogs) return;
109686
- let cancelled = false;
109687
- setLoading(true);
109688
- setError(null);
109689
- setRawData(null);
109690
- (async () => {
109691
- try {
109692
- const data = await fetchEventLogs(sessionId);
109693
- if (cancelled) return;
109694
- setRawData(data);
109695
- } catch (err) {
109696
- if (cancelled) return;
109697
- setError(err instanceof Error ? err.message : "Failed to fetch event logs");
109698
- } finally {
109699
- if (!cancelled) setLoading(false);
109700
- }
109701
- })();
109702
- return () => {
109703
- cancelled = true;
109704
- };
109705
- }, [isOpen, sessionId, fetchEventLogs]);
109706
- const events = useMemo(() => flattenEvents(rawData), [rawData]);
109707
- useEffect(() => {
109708
- if (!isOpen) return;
109709
- const handleKey = (e3) => {
109710
- if (e3.key === "Escape") onClose();
109711
- };
109712
- document.addEventListener("keydown", handleKey);
109713
- return () => document.removeEventListener("keydown", handleKey);
109714
- }, [isOpen, onClose]);
109715
- useEffect(() => {
109716
- if (!isOpen) {
109717
- setExpandedIds(/* @__PURE__ */ new Set());
109718
- setRawData(null);
109719
- setError(null);
109720
- }
109721
- }, [isOpen]);
109722
- const toggleRow = useCallback((id) => {
109723
- setExpandedIds((prev) => {
109724
- const next = new Set(prev);
109725
- if (next.has(id)) next.delete(id);
109726
- else next.add(id);
109727
- return next;
109728
- });
109729
- }, []);
109730
- const expandAll = useCallback(() => {
109731
- setExpandedIds(new Set(events.map((e3) => e3.id)));
109732
- }, [events]);
109733
- const collapseAll = useCallback(() => {
109734
- setExpandedIds(/* @__PURE__ */ new Set());
109735
- }, []);
109736
- if (!isOpen) return null;
109737
- const showToolbar = !loading && !error && events.length > 0;
109738
- const allExpanded = showToolbar && expandedIds.size === events.length;
109739
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "fixed inset-0 z-[10000]", children: [
109740
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109741
- "div",
109742
- {
109743
- className: "absolute inset-0 bg-black/40",
109744
- onClick: onClose,
109745
- "aria-hidden": "true"
109746
- }
109747
- ),
109748
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
109749
- "div",
109750
- {
109751
- className: "absolute top-0 right-0 bottom-0 bg-white shadow-2xl flex flex-col",
109752
- style: { width: "720px", maxWidth: "100vw" },
109753
- role: "dialog",
109754
- "aria-label": "Event Logs",
109755
- onClick: (e3) => e3.stopPropagation(),
109756
- children: [
109757
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between h-[56px] px-[20px] border-b border-[#E4E7EC] flex-shrink-0", children: [
109758
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
109759
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[16px] font-semibold text-[#101828]", children: "Event Logs" }),
109760
- !loading && !error && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] font-medium text-[#667085] bg-[#F2F4F7] rounded-[10px] px-[8px] py-[2px]", children: events.length })
109761
- ] }),
109762
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[4px]", children: [
109763
- showToolbar && /* @__PURE__ */ jsxRuntimeExports.jsx(
109764
- "button",
109765
- {
109766
- type: "button",
109767
- onClick: allExpanded ? collapseAll : expandAll,
109768
- className: "text-[13px] font-medium text-[#155EEF] hover:underline px-[8px] py-[6px] rounded-[6px] transition-colors",
109769
- "data-test-id": "event-logs-toggle-all",
109770
- children: allExpanded ? "Collapse all" : "Expand all"
109771
- }
109772
- ),
109773
- /* @__PURE__ */ jsxRuntimeExports.jsx(
109774
- "button",
109775
- {
109776
- type: "button",
109777
- onClick: onClose,
109778
- className: "p-[8px] rounded-[6px] hover:bg-[#F2F4F7] transition-colors",
109779
- title: "Close Event Logs",
109780
- "aria-label": "Close Event Logs",
109781
- "data-test-id": "event-logs-close-btn",
109782
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-[#344054]" })
109783
- }
109784
- )
109785
- ] })
109786
- ] }),
109787
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: loading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-[8px] text-[13px] text-[#667085]", children: [
109788
- /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "w-[20px] h-[20px] animate-spin text-[#155EEF]" }),
109789
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Loading event logs…" })
109790
- ] }) : error ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-[8px] text-[13px] text-[#B42318] px-[24px] text-center", children: [
109791
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: "Couldn't load event logs" }),
109792
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] text-[#667085]", children: error })
109793
- ] }) : events.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full flex items-center justify-center text-[13px] text-[#667085]", children: "No events recorded for this session yet." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative px-[24px] pt-[28px] pb-[8px]", children: [
109794
- events.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(
109795
- "div",
109796
- {
109797
- className: "absolute w-px bg-[#D0D5DD]",
109798
- style: { left: "32px", top: "36px", bottom: "28px" },
109799
- "aria-hidden": "true"
109800
- }
109801
- ),
109802
- events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(
109803
- EventRow,
109804
- {
109805
- event,
109806
- isExpanded: expandedIds.has(event.id),
109807
- onToggle: () => toggleRow(event.id)
109808
- },
109809
- event.id
109810
- ))
109811
- ] }) })
109812
- ]
109813
- }
109814
- )
109815
- ] }) });
109816
- }
109817
- const SESSION_SOURCES_WITH_EVENT_LOGS = /* @__PURE__ */ new Set(["AIS-CC", "XO"]);
109818
- function sessionSourceShowsEventLogs(source) {
109819
- if (source === void 0 || source === "") {
109820
- return false;
109821
- }
109822
- return SESSION_SOURCES_WITH_EVENT_LOGS.has(source);
109823
- }
109824
109294
  function DetailPage({
109825
109295
  mode: initialMode,
109826
109296
  sessionId: initialSessionId,
@@ -109833,9 +109303,7 @@ function DetailPage({
109833
109303
  batchSize = DEFAULT_BATCH_SIZE,
109834
109304
  initialTraceCount,
109835
109305
  initialSessionData,
109836
- runHeaderInputMode = "display",
109837
- onViewEventLogs,
109838
- fetchEventLogs
109306
+ runHeaderInputMode = "display"
109839
109307
  }) {
109840
109308
  const [currentMode, setCurrentMode] = useState(initialMode);
109841
109309
  const [currentSessionId, setCurrentSessionId] = useState(initialSessionId);
@@ -109845,7 +109313,6 @@ function DetailPage({
109845
109313
  const traceId = currentTraceId;
109846
109314
  const [selectedNode, setSelectedNode] = useState(null);
109847
109315
  const [copiedId, setCopiedId] = useState(false);
109848
- const [isEventLogsOpen, setIsEventLogsOpen] = useState(false);
109849
109316
  const minObservationLevel = "DEFAULT";
109850
109317
  const [hasAutoSelected, setHasAutoSelected] = useState(false);
109851
109318
  const hasInitialData = mode === "session" && initialSessionData;
@@ -109891,8 +109358,7 @@ function DetailPage({
109891
109358
  bookmarked: false,
109892
109359
  public: false,
109893
109360
  traces: [],
109894
- scores: [],
109895
- source: meta.source
109361
+ scores: []
109896
109362
  });
109897
109363
  setLoadingState("success");
109898
109364
  },
@@ -109900,8 +109366,7 @@ function DetailPage({
109900
109366
  (trace, observations) => {
109901
109367
  setSessionData((prev) => prev ? {
109902
109368
  ...prev,
109903
- traces: [trace],
109904
- source: prev.source ?? trace.source
109369
+ traces: [trace]
109905
109370
  } : prev);
109906
109371
  setTraceObservations((prev) => ({
109907
109372
  ...prev,
@@ -110077,10 +109542,6 @@ function DetailPage({
110077
109542
  } : null
110078
109543
  };
110079
109544
  }, [mode, sessionData, traceData, sessionId, traceId, initialSessionData]);
110080
- const sessionSourceForEventLogs = useMemo(() => {
110081
- return (initialSessionData == null ? void 0 : initialSessionData.source) ?? (sessionData == null ? void 0 : sessionData.source);
110082
- }, [initialSessionData == null ? void 0 : initialSessionData.source, sessionData == null ? void 0 : sessionData.source]);
110083
- const showEventLogsBanner = mode === "session" && sessionSourceShowsEventLogs(sessionSourceForEventLogs);
110084
109545
  const traces = useMemo(() => {
110085
109546
  if (mode === "session" && sessionData) {
110086
109547
  const sorted = [...sessionData.traces].sort((a4, b2) => {
@@ -110129,16 +109590,6 @@ function DetailPage({
110129
109590
  mode,
110130
109591
  traceData
110131
109592
  ]);
110132
- const handleViewEventLogs = useCallback(() => {
110133
- setIsEventLogsOpen(true);
110134
- if (onViewEventLogs && sessionId) {
110135
- const firstTraceId = traces.length > 0 ? traces[0].id : void 0;
110136
- onViewEventLogs(sessionId, firstTraceId);
110137
- }
110138
- }, [onViewEventLogs, sessionId, traces]);
110139
- const handleCloseEventLogs = useCallback(() => {
110140
- setIsEventLogsOpen(false);
110141
- }, []);
110142
109593
  const handleNodeSelect = useCallback((node) => {
110143
109594
  setSelectedNode(node);
110144
109595
  }, []);
@@ -110355,7 +109806,6 @@ function DetailPage({
110355
109806
  ] }),
110356
109807
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
110357
109808
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[480px] min-w-[400px] max-w-[600px] border-r border-[#E4E7EC] flex flex-col bg-[#F9FAFB] overflow-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 p-[16px]", children: [
110358
- showEventLogsBanner && /* @__PURE__ */ jsxRuntimeExports.jsx(VoiceEventLogsBanner, { onViewEventLogs: handleViewEventLogs }),
110359
109809
  traces.length === 0 && loadingState === "success" && progressiveState.traceCount === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[32px] text-center text-[13px] text-[#667085]", children: "No traces available" }),
110360
109810
  traces.map((trace, index) => {
110361
109811
  var _a, _b, _c, _d;
@@ -110405,16 +109855,7 @@ function DetailPage({
110405
109855
  generationSummaryInputOverride
110406
109856
  }
110407
109857
  )
110408
- ] }),
110409
- /* @__PURE__ */ jsxRuntimeExports.jsx(
110410
- EventLogsSlideout,
110411
- {
110412
- isOpen: isEventLogsOpen,
110413
- onClose: handleCloseEventLogs,
110414
- sessionId: sessionId ?? null,
110415
- fetchEventLogs
110416
- }
110417
- )
109858
+ ] })
110418
109859
  ] });
110419
109860
  }
110420
109861
  const trace1Observations = [
@@ -110828,7 +110269,7 @@ function EnvironmentNameCell$1({ envId }) {
110828
110269
  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-gray-600", title: envId || "-", children: displayName });
110829
110270
  }
110830
110271
  function SessionsListContent(props) {
110831
- const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId, onViewEventLogs, fetchEventLogs } = props;
110272
+ const { apiConfig, onSessionClick, className = "", defaultFilters = [], defaultTimeRange = "24 hours", initialSessionId } = props;
110832
110273
  const { environments, resolveEnvironmentName } = useEnvironment();
110833
110274
  const [selectedSessionId, setSelectedSessionId] = useState(() => initialSessionId ?? null);
110834
110275
  const [selectedSessionData, setSelectedSessionData] = useState(null);
@@ -111389,8 +110830,7 @@ function SessionsListContent(props) {
111389
110830
  totalCost: session.totalCost,
111390
110831
  totalTokens: session.totalTokens,
111391
110832
  sessionDuration: session.sessionDuration,
111392
- createdAt: session.createdAt,
111393
- source: session.source
110833
+ createdAt: session.createdAt
111394
110834
  });
111395
110835
  setIsModalOpen(true);
111396
110836
  if (onSessionClick) {
@@ -111500,9 +110940,7 @@ function SessionsListContent(props) {
111500
110940
  sessionId: selectedSessionId,
111501
110941
  apiConfig,
111502
110942
  onClose: handleModalClose,
111503
- initialSessionData: selectedSessionData || void 0,
111504
- onViewEventLogs,
111505
- fetchEventLogs
110943
+ initialSessionData: selectedSessionData || void 0
111506
110944
  }
111507
110945
  ) })
111508
110946
  ] });
@@ -144197,7 +143635,7 @@ const VariableMenu = ({
144197
143635
  setCurrentPath(parsedQuery.path);
144198
143636
  }
144199
143637
  }, [parsedQuery.category, parsedQuery.path, activeCategory]);
144200
- useEffect(() => {
143638
+ useLayoutEffect(() => {
144201
143639
  if (!menuRef.current) return;
144202
143640
  const menuRect = menuRef.current.getBoundingClientRect();
144203
143641
  const viewportWidth = window.innerWidth;
@@ -144218,7 +143656,7 @@ const VariableMenu = ({
144218
143656
  newTop = padding;
144219
143657
  }
144220
143658
  setAdjustedPosition({ top: newTop, left: newLeft });
144221
- }, [position]);
143659
+ }, [position, activeCategory, currentPath.length, query]);
144222
143660
  const categories = [
144223
143661
  { id: "env", label: "Environment Variables", icon: VariableIcon, variables: envVariables },
144224
143662
  { id: "memory", label: "Memory", icon: MemoryIcon, variables: memoryVariables },
@@ -144423,7 +143861,7 @@ const VariableMenu = ({
144423
143861
  )
144424
143862
  ] }) }),
144425
143863
  !activeCategory && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pt-[8px] pb-[4px] px-[12px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[12px] leading-[16px] font-normal text-[#667085]", children: "Type to search or choose from:" }) }),
144426
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto", children: items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[16px] text-center text-[#667085] text-[14px]", children: "No items found" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items.map((item, index) => {
143864
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: items.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-[16px] text-center text-[#667085] text-[14px]", children: "No items found" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items.map((item, index) => {
144427
143865
  var _a;
144428
143866
  const isCategory = "variables" in item;
144429
143867
  const Icon = isCategory ? item.icon : getIconForType(item.type);