@truefoundry/trueforge-ui 0.3.0-rc.0 → 0.3.0-rc.10

package/dist/AgentSessionEventTimeline-GRGIQTRE.js

@@ -0,0 +1,88 @@
+"use client";
+import {
+  SESSION_EVENT_TYPES,
+  getSessionEventColor,
+  useSlot,
+  useThemeMode
+} from "./chunk-GG23N2GW.js";
+import "./chunk-T6QQV5LK.js";
+import "./chunk-3ZW74FHC.js";
+import "./chunk-2GIZY3JJ.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-CG75X77Q.js";
+import {
+  cn
+} from "./chunk-JCL3Q7RW.js";
+
+// src/atoms/agent-details/AgentSessionEventTimeline.tsx
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AgentSessionEventTimeline({ turns, segments, onSelectTurn }) {
+  const AgentSessionEventTimelineChart = useSlot("AgentSessionEventTimelineChart");
+  const isDark = useThemeMode() === "dark";
+  const [hiddenTypes, setHiddenTypes] = useState(() => /* @__PURE__ */ new Set());
+  const availableEventTypes = useMemo(() => {
+    const available = new Set(segments.map((segment) => segment.type));
+    return SESSION_EVENT_TYPES.filter((eventType) => available.has(eventType.id));
+  }, [segments]);
+  const handleToggleType = useCallback((type) => {
+    setHiddenTypes((previous) => {
+      const next = new Set(previous);
+      if (next.has(type)) next.delete(type);
+      else next.add(type);
+      return next;
+    });
+  }, []);
+  if (segments.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", "data-slot": "agent-session-event-timeline", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex flex-wrap items-center gap-2 border-b border-border px-3 py-2",
+        "data-slot": "agent-session-event-types",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase text-text-secondary", children: "Event types" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1", children: availableEventTypes.map((eventType) => {
+            const isVisible = !hiddenTypes.has(eventType.id);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": isVisible,
+                className: cn(
+                  "flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium",
+                  isVisible ? "border-border text-text-primary" : "border-transparent text-text-secondary opacity-80"
+                ),
+                onClick: () => handleToggleType(eventType.id),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "size-2 rounded-sm",
+                      style: { backgroundColor: getSessionEventColor(eventType.id, isDark) }
+                    }
+                  ),
+                  eventType.label
+                ]
+              },
+              eventType.id
+            );
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "w-full p-2", children: /* @__PURE__ */ jsx(
+      AgentSessionEventTimelineChart,
+      {
+        turns,
+        segments,
+        hiddenTypes,
+        onSelectTurn
+      }
+    ) })
+  ] });
+}
+export {
+  AgentSessionEventTimeline
+};
+//# sourceMappingURL=AgentSessionEventTimeline-GRGIQTRE.js.map

package/dist/AgentSessionEventTimeline-GRGIQTRE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentSessionEventTimeline.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState, type ComponentType } from 'react';\n\nimport { useSlot, useThemeMode } from '../../theme/SlotsProvider.js';\nimport { getSessionEventColor, SESSION_EVENT_TYPES, type SessionEventType } from '../../utils/sessionEventTimeline.js';\nimport { cn } from '../lib/cn.js';\nimport type { AgentSessionEventTimelineProps } from './types.js';\n\nexport function AgentSessionEventTimeline({ turns, segments, onSelectTurn }: AgentSessionEventTimelineProps) {\n  const AgentSessionEventTimelineChart = useSlot('AgentSessionEventTimelineChart');\n  const isDark = useThemeMode() === 'dark';\n  const [hiddenTypes, setHiddenTypes] = useState<Set<SessionEventType>>(() => new Set());\n\n  const availableEventTypes = useMemo(() => {\n    const available = new Set(segments.map(segment => segment.type));\n    return SESSION_EVENT_TYPES.filter(eventType => available.has(eventType.id));\n  }, [segments]);\n\n  const handleToggleType = useCallback((type: SessionEventType) => {\n    setHiddenTypes(previous => {\n      const next = new Set(previous);\n      if (next.has(type)) next.delete(type);\n      else next.add(type);\n      return next;\n    });\n  }, []);\n\n  if (segments.length === 0) return null;\n\n  return (\n    <div className=\"w-full\" data-slot=\"agent-session-event-timeline\">\n      <div\n        className=\"flex flex-wrap items-center gap-2 border-b border-border px-3 py-2\"\n        data-slot=\"agent-session-event-types\"\n      >\n        <span className=\"text-xs font-medium uppercase text-text-secondary\">Event types</span>\n        <div className=\"flex flex-wrap items-center gap-1\">\n          {availableEventTypes.map(eventType => {\n            const isVisible = !hiddenTypes.has(eventType.id);\n            return (\n              <button\n                key={eventType.id}\n                type=\"button\"\n                aria-pressed={isVisible}\n                className={cn(\n                  'flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',\n                  isVisible ? 'border-border text-text-primary' : 'border-transparent text-text-secondary opacity-80',\n                )}\n                onClick={() => handleToggleType(eventType.id)}\n              >\n                <span\n                  className=\"size-2 rounded-sm\"\n                  style={{ backgroundColor: getSessionEventColor(eventType.id, isDark) }}\n                />\n                {eventType.label}\n              </button>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"w-full p-2\">\n        <AgentSessionEventTimelineChart\n          turns={turns}\n          segments={segments}\n          hiddenTypes={hiddenTypes}\n          onSelectTurn={onSelectTurn}\n        />\n      </div>\n    </div>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentSessionEventTimeline: ComponentType<AgentSessionEventTimelineProps>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA,SAAS,aAAa,SAAS,gBAAoC;AAkC3D,cAKM,YALN;AA3BD,SAAS,0BAA0B,EAAE,OAAO,UAAU,aAAa,GAAmC;AAC3G,QAAM,iCAAiC,QAAQ,gCAAgC;AAC/E,QAAM,SAAS,aAAa,MAAM;AAClC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,MAAM,oBAAI,IAAI,CAAC;AAErF,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,YAAY,IAAI,IAAI,SAAS,IAAI,aAAW,QAAQ,IAAI,CAAC;AAC/D,WAAO,oBAAoB,OAAO,eAAa,UAAU,IAAI,UAAU,EAAE,CAAC;AAAA,EAC5E,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,mBAAmB,YAAY,CAAC,SAA2B;AAC/D,mBAAe,cAAY;AACzB,YAAM,OAAO,IAAI,IAAI,QAAQ;AAC7B,UAAI,KAAK,IAAI,IAAI,EAAG,MAAK,OAAO,IAAI;AAAA,UAC/B,MAAK,IAAI,IAAI;AAClB,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,MAAI,SAAS,WAAW,EAAG,QAAO;AAElC,SACE,qBAAC,SAAI,WAAU,UAAS,aAAU,gCAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,aAAU;AAAA,QAEV;AAAA,8BAAC,UAAK,WAAU,qDAAoD,yBAAW;AAAA,UAC/E,oBAAC,SAAI,WAAU,qCACZ,8BAAoB,IAAI,eAAa;AACpC,kBAAM,YAAY,CAAC,YAAY,IAAI,UAAU,EAAE;AAC/C,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY,oCAAoC;AAAA,gBAClD;AAAA,gBACA,SAAS,MAAM,iBAAiB,UAAU,EAAE;AAAA,gBAE5C;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO,EAAE,iBAAiB,qBAAqB,UAAU,IAAI,MAAM,EAAE;AAAA;AAAA,kBACvE;AAAA,kBACC,UAAU;AAAA;AAAA;AAAA,cAbN,UAAU;AAAA,YAcjB;AAAA,UAEJ,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,SAAI,WAAU,cACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}