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

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # Changelog
 
+## 0.3.0-rc.2
+
+### Minor Changes
+
+- 04d2ee6: Add a `sidebarText` semantic token for sidebar nav labels, refresh trueforge sidebar colors, set trueforge base `radius` to `0.375rem` (6px), and set sidebar / thread-list control corners to `0.75rem` (12px).
+
+  Expose design-system `Button` (`Button.Primary` / `.Secondary` / `.Ghost` / `.Destructive`). `ButtonVariant` is now `primary | secondary | ghost | destructive` (`default` renamed to `primary`; `outline` removed — use `secondary`). Button sizes are `large` (default) and `small` (`icon` for icon-only).
+
+### Patch Changes
+
+- 2a0ae4c: Show connector catalog logos in the composer Tools picker, matching the Connectors settings page.
+- 2a0ae4c: Align AttachmentCard with assistant-ui's default square thumbnail, filename tooltip, and overlay remove control.
+- fe6a14b: Improve session timelines with sub-agent wait states, grouped point-event markers, clean linear ticks, and readable summary durations.
+- d5b479d: Clamp optional sessions/schedules chrome and unregister `/sessions`, `/schedules`, and `/library/:agentId` when those server ports are omitted, matching the Settings Lego gate.
+- 5d72138: Keep `npx @truefoundry/trueforge` working on native Windows: import Kysely migrations with `pathToFileURL`, and keep sandbox guest paths POSIX. Source development stays Unix/WSL; CI also runs unit and SQLite store tests on Windows.
+- Updated dependencies [a000b47]
+- Updated dependencies [0ec8dc6]
+- Updated dependencies [11865b4]
+  - @truefoundry/trueforge-sdk@0.1.4-rc.2
+
+## 0.3.0-rc.1
+
+### Minor Changes
+
+- d269b01: Add a live advanced agent configuration drawer with shared model, runtime, MCP tool, skill, and Save Agent editors.
+- e74e953: Keep agent configuration visible on the left in full-width builder layouts, add a responsive instructions and initial-messages drawer with explicit save, make mobile config overlays closable, save the current instruction draft, align builder chrome, and preserve open widgets across chat runtime changes.
+- a189482: Add routed agent detail pages with lazy Overview, Sessions, and Use In Code tabs backed by the optional AgentSessionsServer port and built-in TrueForge adapter.
+- 8491843: Add a slot-driven agent Metrics tab with aggregate cards, time-range filtering, and Harness-backed line charts.
+- a189482: Add the agent library Sessions tab and an all-user Sessions sidebar page (including drafts) with agent and time filters, shareable query params, and the same two-pane timeline. Library agent details keep the active tab in `?tab=` so opening an agent lands on Overview.
+- bc11131: MCP selectors (composer + agent config) infinite-scroll through `listMcp` pages via DraftCatalogProvider.
+- 860e322: Split New Chat vs New Agent: simple chat keeps the Connectors/Skills picker; New Agent keeps Agent Config + Save Agent. Session metadata `is_create_agent` drives resume from the sessions browser.
+- 0cc59f8: Wire schedule test runs and show last five run status chips on the schedules table. Bump `@truefoundry/assistant-ui-runtime` to `0.1.25`.
+- 0cc59f8: Add global Schedules page at `/schedules` with listing, popover-based filters, and create/edit drawer wired to the schedule API. New schedules save as paused, open a Test Schedule review with MCP connect status, and support Activate Anyway. List schedules uses server token pagination and multi-agent filters. Agents shows a Schedules count column (warning when any are paused) loaded via a batched list for on-screen agents. Add Table primitives with client-side and token pagination plus portal DropdownMenu so row actions are not clipped by overflow. Export a reusable popover select with single- and multi-select modes.
+- 788636d: Sidebar layout is a permanent icon+label nav rail (no expand/collapse). Recent chats are hidden from the sidebar and mobile drawer; the drawer shows nav actions only.
+- 8f1a2dc: Add a TrueFoundry-managed model registry. When `TRUEFOUNDRY_SERVICEFOUNDRY_SERVER_URL` is set, models are listed from the TrueFoundry ServiceFoundry server and turns are routed through the tenant's default AI Gateway with the caller's token. Mutually exclusive with OIDC. Supports internal mutual TLS to the ServiceFoundry server via `TRUEFOUNDRY_MTLS_ENABLED`/`TRUEFOUNDRY_MTLS_CERTS_DIR`.
+
+### Patch Changes
+
+- 347a7e7: Refresh composer and composer-trigger styling: 0.75rem composer corners with a light-theme primary-token gradient hairline (faded top → solid bottom) and a neutral hairline in dark, an icon-only tools trigger in place of the "Tools" caption and count badge, the shared `agent-2` glyph on the agents-library trigger, and squared-off chrome-action geometry on the save-agent trigger. Also fixes `agent-2.svg` to use `currentColor` so it is legible in dark mode.
+- a189482: Load agent Use In Code snippets through `client.internal.agents.getCodeSnippets` instead of a raw `client.fetch`.
+- c4ee138: Agent list and details overflow menu: Edit, Clone (`{name}-copy` via saveAgent), Manage Schedules, and Delete (wired through harness `deleteAgent`).
+- c4ee138: AgentSessions list pane uses a quieter surface, and the resize grip stays gray until hover, press, or focus.
+- c4ee138: Agent Code (`SyntaxHighlighter` / `AgentCodeBlock`) copy control uses the bordered secondary button, and a trailing source newline no longer paints an empty last line while Copy still keeps the exact source.
+- c4ee138: Agents, Sessions, and Schedules empty states use a shared centered empty-box screen with title and supporting copy.
+- 0cc59f8: Use Google Sans as the default `trueforge` theme font and load it from Google Fonts when styles are injected.
+- 64ca089: Hide Clear chat while the thread is fresh (New Chat, New Agent, and Try Agent) since there is nothing to clear.
+- 64ca089: Add a book-icon preload toggle and dashed add button to Agent Config MCP server pills.
+- d269b01: Improve MCP and skill selectors with consistent search sizing, explicit MCP selection controls, grouped tool summaries, and removable MCP chips.
+- 64ca089: Revamp the MCP tools selector modal with focus rows, connect empty state, and grouped selected-tools summary.
+- bc11131: New Chat enables sandbox on the live draft agent config when capabilities report sandbox as available.
+- c4ee138: Resume Chat / Resume Agent building opens in a new tab when routed (`/sessions/:id` + square-arrow-out-up-right); without a router it keeps the in-shell resume fallback.
+- 788636d: Open the create schedule drawer when Agents "+ Schedule" navigates with `isNew=true`, then clear the flag from the URL.
+- 333230d: Improve Agent Sessions with a resizable divider, accurate turn grouping, optional cost display, and reliable timeline tooltips with sub-agent details. Simplify schedule recurrence and default new schedules to the local timezone.
+- c4ee138: Unregister the `/settings` route when Settings chrome is unavailable (no catalog or `capabilities.settings.enabled` is false), matching the sidebar Settings button gate.
+- c4ee138: Split New Chat and New Agent draft preference stores. New Chat remembers only model (+ reasoning), skills, and MCP; New Agent keeps the full seed including runtime config.
+- 4c1260e: Wire TrueFoundry MCP authorize, status, and delete through ServiceFoundry; stub list auth_status; gate oauth2 invoke mid-turn with authRequired; paginate MCP server lists. UI treats SFY consent `code`/`error` on the FE landing like local DCR success/failure.
+- c4ee138: Per-turn Tokens in Agent Sessions shows a keyboard-accessible Input / Output / Cached tooltip (Input is uncached).
+- bc11131: Share a single `PageHeader` across chat and list chrome so title size/height stay consistent, and drop decorative title icons.
+- Updated dependencies [648273b]
+- Updated dependencies [648273b]
+- Updated dependencies [2dcb3a0]
+- Updated dependencies [52987a7]
+- Updated dependencies [38ce068]
+- Updated dependencies [b654052]
+- Updated dependencies [4c1260e]
+- Updated dependencies [f175245]
+  - @truefoundry/trueforge-sdk@0.1.4-rc.1
+
 ## 0.3.0-rc.0
 
 ### Minor Changes

package/README.md

@@ -400,12 +400,14 @@ show the title text (see [Custom layouts](#custom-layouts)).
 
 | Mode                                   | Layout chrome                   | Agent selection / New Chat                                |
 | -------------------------------------- | ------------------------------- | --------------------------------------------------------- |
-| `AgentLibraryWithComposer` _(default)_ | Agents Library + draft builder  | New Chat opens draft; library picks a named agent         |
+| `AgentLibraryWithComposer` _(default)_ | Agents + draft builder          | New Chat opens draft; library picks a named agent         |
 | `SingleAgent`                          | Named-only, plain composer      | Locked to `name`; New Chat / Clear Chat = new thread      |
-| `AgentLibrary`                         | Agents Library only (no draft)  | Empty until pick; no New Chat; Clear Chat after selection |
+| `AgentLibrary`                         | Agents only (no draft)          | Empty until pick; no New Chat; Clear Chat after selection |
 | `AgentComposer`                        | Draft builder only (no library) | Always draft; New Chat / Clear Chat = fresh draft         |
 
-In library modes, picking an agent from the Agents Library switches to a named chat for that agent **and remounts the runtime** so the new agent starts from a clean conversation. Draft chats can be promoted via **Save agent** (`server.saveAgent` on the resolved `AgentUIServer`). **Clear Chat** (thread header) resets the current named or draft session.
+In library modes, picking an agent from Agents switches to a named chat for that agent **and remounts the runtime** so the new agent starts from a clean conversation. Draft chats can be promoted via **Save agent** (`server.saveAgent` on the resolved `AgentUIServer`). **Clear Chat** (thread header) resets the current named or draft session.
+
+Mutable composers expose **Agent Config** for live model parameters, instructions, runtime behavior, per-connector MCP tools, and skills. The compact Tools picker contains only Connectors and Skills. The Save Agent dialog keeps a local editable copy of the same configuration and shares the same selector dialogs; cancelling it leaves the active draft unchanged. Model context and output limits render when the server supplies that optional catalog metadata.
 
 ```tsx
 {
@@ -436,7 +438,7 @@ In library modes, picking an agent from the Agents Library switches to a named c
 />;
 ```
 
-> _Screenshot: Agents Library open; selecting an agent resets the thread._
+> _Screenshot: Agents open; selecting an agent resets the thread._
 
 ---
 
@@ -515,7 +517,7 @@ function MyBubble({ children, error, actionBar, className }: AssistantMessageBub
 />;
 ```
 
-Overridable slots include composer pieces (`ComposerShell`, `ComposerLeftSection`, `ComposerRightSection`, `ComposerSendButton`), messages (`AssistantMessageBubble`, `UserMessageBubble`, `UserMessageEdit`), `Markdown`, `WelcomeScreen`, thread-list atoms, and tool/prompt cards (`ToolCallCard`, `ToolApprovalBar`, `ToolGroupCard`, `SubAgentCard`, `SandboxToolCallCard`, `AgentStepsCard`, `ReasoningCard`, `AskUserPrompt`, `McpAuthPrompt`, and more).
+Overridable slots include composer pieces (`ComposerShell`, `ComposerLeftSection`, `ComposerRightSection`, `ComposerSendButton`), messages (`AssistantMessageBubble`, `UserMessageBubble`, `UserMessageEdit`), `Markdown`, `WelcomeScreen`, thread-list atoms, agent metrics (`AgentMetrics`, `AgentMetricsView`, `AgentMetricsTimeRangeFilter`, `AgentMetricCard`, `AgentMetricChart`), and tool/prompt cards (`ToolCallCard`, `ToolApprovalBar`, `ToolGroupCard`, `SubAgentCard`, `SandboxToolCallCard`, `AgentStepsCard`, `ReasoningCard`, `AskUserPrompt`, `McpAuthPrompt`, and more).
 
 See [docs/customization.md](./docs/customization.md) for the full slot list.
 
@@ -543,13 +545,26 @@ type TrueForgeServerConfig =
     }
   | AgentUIServer;
 
-type AgentUIServer = AgentChatServer & AgentBuilderServer & { catalog?: CatalogServer };
+type AgentUIServer = AgentChatServer &
+  AgentBuilderServer & {
+    catalog?: CatalogServer;
+    sessions?: AgentSessionsServer;
+    metrics?: AgentMetricsServer;
+    schedules?: ScheduleServer;
+  };
 ```
 
 | Port                 | Responsibility                                                      |
 | -------------------- | ------------------------------------------------------------------- |
 | `AgentChatServer`    | Sessions, turns, streaming, draft `AgentSpec` sync                  |
 | `AgentBuilderServer` | `getModels` / `getSkills` / `getMcp` / `searchAgents` / `saveAgent` |
+| `catalog`            | Settings CRUD (models / connectors / optional skills & sandbox)     |
+| `sessions`           | Agent details + sessions browser (`/sessions`, `/library/:agentId`) |
+| `schedules`          | Schedules page (`/schedules`)                                       |
+| `AgentMetricsServer` | Agent meter aggregates, chart definitions, and chart data           |
+
+Omit an optional port to hide its chrome and unregister its routes (same gate as the
+Settings button for `catalog`).
 
 **Zero-config TrueFoundry** — see [Getting started](#getting-started). The SDK calls `createTrueFoundryAgentUIServer` for you.
 

package/dist/AgentCodeSnippets-637HQUXD.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  useSlot
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import {
+  Icon
+} from "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-VJ7BZGAF.js";
+import {
+  cn
+} from "./chunk-BWHOZFIV.js";
+
+// src/atoms/agent-details/AgentCodeSnippets.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AgentCodeSnippets({ snippets }) {
+  const AgentCodeBlock = useSlot("AgentCodeBlock");
+  const [selectedLanguage, setSelectedLanguage] = useState(snippets[0]?.language);
+  const [mode, setMode] = useState("stream");
+  useEffect(() => {
+    setSelectedLanguage(snippets[0]?.language);
+    setMode("stream");
+  }, [snippets]);
+  const selected = snippets.find((snippet) => snippet.language === selectedLanguage) ?? snippets[0];
+  if (selected === void 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-64 items-center justify-center px-6 text-sm text-text-secondary", children: "No code samples for this agent." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-3 p-3 md:flex-row", children: [
+    /* @__PURE__ */ jsx("nav", { "aria-label": "Code sample languages", className: "flex shrink-0 gap-1 overflow-auto md:w-44 md:flex-col", children: snippets.map((snippet) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-current": selected.language === snippet.language ? "page" : void 0,
+        className: cn(
+          "flex h-9 shrink-0 cursor-pointer items-center gap-2 rounded-md px-2.5 text-left text-xs text-text-secondary",
+          "hover:bg-ghost-button-hover hover:text-text-primary",
+          selected.language === snippet.language && "bg-primary-button-bg/10 font-medium text-primary-button-bg"
+        ),
+        onClick: () => setSelectedLanguage(snippet.language),
+        children: [
+          snippet.icon ? /* @__PURE__ */ jsx("img", { src: snippet.icon, alt: "", className: "size-4 shrink-0 object-contain" }) : /* @__PURE__ */ jsx(Icon, { name: "code", className: "size-4 shrink-0" }),
+          snippet.labelName
+        ]
+      },
+      snippet.language
+    )) }),
+    /* @__PURE__ */ jsxs("section", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-border bg-card-bg", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex h-10 shrink-0 items-end gap-1 border-b border-border px-3", children: [
+        ["stream", "Stream"],
+        ["nonStream", "Non-stream"]
+      ].map(([id, label]) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "relative h-10 cursor-pointer px-3 text-xs font-medium text-text-secondary",
+            mode === id && "text-primary-button-bg after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary-button-bg"
+          ),
+          onClick: () => setMode(id),
+          children: label
+        },
+        id
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx(AgentCodeBlock, { code: selected.sampleCode[mode], language: selected.language }) })
+    ] })
+  ] });
+}
+export {
+  AgentCodeSnippets as default
+};
+//# sourceMappingURL=AgentCodeSnippets-637HQUXD.js.map

package/dist/AgentCodeSnippets-637HQUXD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentCodeSnippets.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState, type ComponentType } from 'react';\nimport { Icon } from '../../icons/Icon.js';\nimport { useSlot } from '../../theme/SlotsProvider.js';\nimport { cn } from '../lib/cn.js';\nimport type { AgentCodeSnippetsProps } from './types.js';\n\ntype SnippetMode = 'stream' | 'nonStream';\n\nexport default function AgentCodeSnippets({ snippets }: AgentCodeSnippetsProps) {\n  const AgentCodeBlock = useSlot('AgentCodeBlock');\n  const [selectedLanguage, setSelectedLanguage] = useState(snippets[0]?.language);\n  const [mode, setMode] = useState<SnippetMode>('stream');\n\n  useEffect(() => {\n    setSelectedLanguage(snippets[0]?.language);\n    setMode('stream');\n  }, [snippets]);\n\n  const selected = snippets.find(snippet => snippet.language === selectedLanguage) ?? snippets[0];\n\n  if (selected === undefined) {\n    return (\n      <div className=\"flex h-full min-h-64 items-center justify-center px-6 text-sm text-text-secondary\">\n        No code samples for this agent.\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col gap-3 p-3 md:flex-row\">\n      <nav aria-label=\"Code sample languages\" className=\"flex shrink-0 gap-1 overflow-auto md:w-44 md:flex-col\">\n        {snippets.map(snippet => (\n          <button\n            key={snippet.language}\n            type=\"button\"\n            aria-current={selected.language === snippet.language ? 'page' : undefined}\n            className={cn(\n              'flex h-9 shrink-0 cursor-pointer items-center gap-2 rounded-md px-2.5 text-left text-xs text-text-secondary',\n              'hover:bg-ghost-button-hover hover:text-text-primary',\n              selected.language === snippet.language && 'bg-primary-button-bg/10 font-medium text-primary-button-bg',\n            )}\n            onClick={() => setSelectedLanguage(snippet.language)}\n          >\n            {snippet.icon ? (\n              <img src={snippet.icon} alt=\"\" className=\"size-4 shrink-0 object-contain\" />\n            ) : (\n              <Icon name=\"code\" className=\"size-4 shrink-0\" />\n            )}\n            {snippet.labelName}\n          </button>\n        ))}\n      </nav>\n\n      <section className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-lg border border-border bg-card-bg\">\n        <div className=\"flex h-10 shrink-0 items-end gap-1 border-b border-border px-3\">\n          {(\n            [\n              ['stream', 'Stream'],\n              ['nonStream', 'Non-stream'],\n            ] satisfies Array<[SnippetMode, string]>\n          ).map(([id, label]) => (\n            <button\n              key={id}\n              type=\"button\"\n              className={cn(\n                'relative h-10 cursor-pointer px-3 text-xs font-medium text-text-secondary',\n                mode === id &&\n                  'text-primary-button-bg after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-primary-button-bg',\n              )}\n              onClick={() => setMode(id)}\n            >\n              {label}\n            </button>\n          ))}\n        </div>\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          <AgentCodeBlock code={selected.sampleCode[mode]} language={selected.language} />\n        </div>\n      </section>\n    </div>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentCodeSnippets: ComponentType<AgentCodeSnippetsProps>;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAEA,SAAS,WAAW,gBAAoC;AAsBlD,cAUI,YAVJ;AAdS,SAAR,kBAAmC,EAAE,SAAS,GAA2B;AAC9E,QAAM,iBAAiB,QAAQ,gBAAgB;AAC/C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,SAAS,CAAC,GAAG,QAAQ;AAC9E,QAAM,CAAC,MAAM,OAAO,IAAI,SAAsB,QAAQ;AAEtD,YAAU,MAAM;AACd,wBAAoB,SAAS,CAAC,GAAG,QAAQ;AACzC,YAAQ,QAAQ;AAAA,EAClB,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,WAAW,SAAS,KAAK,aAAW,QAAQ,aAAa,gBAAgB,KAAK,SAAS,CAAC;AAE9F,MAAI,aAAa,QAAW;AAC1B,WACE,oBAAC,SAAI,WAAU,qFAAoF,6CAEnG;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,sDACb;AAAA,wBAAC,SAAI,cAAW,yBAAwB,WAAU,yDAC/C,mBAAS,IAAI,aACZ;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,gBAAc,SAAS,aAAa,QAAQ,WAAW,SAAS;AAAA,QAChE,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,SAAS,aAAa,QAAQ,YAAY;AAAA,QAC5C;AAAA,QACA,SAAS,MAAM,oBAAoB,QAAQ,QAAQ;AAAA,QAElD;AAAA,kBAAQ,OACP,oBAAC,SAAI,KAAK,QAAQ,MAAM,KAAI,IAAG,WAAU,kCAAiC,IAE1E,oBAAC,QAAK,MAAK,QAAO,WAAU,mBAAkB;AAAA,UAE/C,QAAQ;AAAA;AAAA;AAAA,MAfJ,QAAQ;AAAA,IAgBf,CACD,GACH;AAAA,IAEA,qBAAC,aAAQ,WAAU,mGACjB;AAAA,0BAAC,SAAI,WAAU,kEAEX;AAAA,QACE,CAAC,UAAU,QAAQ;AAAA,QACnB,CAAC,aAAa,YAAY;AAAA,MAC5B,EACA,IAAI,CAAC,CAAC,IAAI,KAAK,MACf;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,WAAW;AAAA,YACT;AAAA,YACA,SAAS,MACP;AAAA,UACJ;AAAA,UACA,SAAS,MAAM,QAAQ,EAAE;AAAA,UAExB;AAAA;AAAA,QATI;AAAA,MAUP,CACD,GACH;AAAA,MACA,oBAAC,SAAI,WAAU,gCACb,8BAAC,kBAAe,MAAM,SAAS,WAAW,IAAI,GAAG,UAAU,SAAS,UAAU,GAChF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/AgentMetricChart-4FYECRIN.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  AgentMetricChart
+} from "./chunk-5I2COQNL.js";
+import "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-VJ7BZGAF.js";
+import "./chunk-BWHOZFIV.js";
+export {
+  AgentMetricChart
+};
+//# sourceMappingURL=AgentMetricChart-4FYECRIN.js.map

package/dist/AgentOverview-3FJ5EE6N.js

@@ -0,0 +1,167 @@
+"use client";
+import {
+  useSlot
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import {
+  Icon
+} from "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-VJ7BZGAF.js";
+import {
+  cn
+} from "./chunk-BWHOZFIV.js";
+
+// src/atoms/agent-details/AgentOverview.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var valueClassName = "text-right font-mono text-primary-button-bg";
+function isRecord(value) {
+  return typeof value === "object" && value != null;
+}
+function readName(value) {
+  if (!("name" in value) || typeof value.name !== "string") return null;
+  return value.name;
+}
+function readRecordValue(record, ...keys) {
+  for (const key of keys) {
+    const value = record?.[key];
+    if (value !== void 0) return value;
+  }
+  return void 0;
+}
+function hasAllTools(value) {
+  if (!isRecord(value)) return false;
+  const tools = readRecordValue(value, "enableTools", "enable_tools");
+  return tools === void 0 || Array.isArray(tools) && tools.includes("@all");
+}
+function displayModelName(name) {
+  const slash = name.lastIndexOf("/");
+  return slash >= 0 ? name.slice(slash + 1) : name;
+}
+function AgentOverview({ detail }) {
+  const Markdown = useSlot("Markdown");
+  const AgentOverviewCard = useSlot("AgentOverviewCard");
+  const [instructionsView, setInstructionsView] = useState("markdown");
+  const [copied, setCopied] = useState(false);
+  const spec = detail.agentSpec;
+  const skills = spec.skills ?? [];
+  const connectors = spec.mcpServers ?? [];
+  const modelParams = isRecord(spec.model.params) ? spec.model.params : null;
+  const maxTokens = readRecordValue(modelParams, "maxTokens", "max_tokens");
+  const temperature = readRecordValue(modelParams, "temperature");
+  const config = isRecord(spec.config) ? spec.config : null;
+  const sandbox = isRecord(config?.sandbox) ? config.sandbox : null;
+  const instructions = spec.instructions?.trim() ? spec.instructions : null;
+  const execution = [
+    ["Sandbox", typeof sandbox?.enabled === "boolean" ? sandbox.enabled ? "Enabled" : "Disabled" : void 0],
+    ["Iteration limit", readRecordValue(config, "iterationLimit", "iteration_limit")],
+    ["Response format", readRecordValue(config, "responseFormat", "response_format")]
+  ].filter((entry) => {
+    return typeof entry[1] === "string" || typeof entry[1] === "number";
+  });
+  const capabilities = [
+    ["Generative UI", spec.config?.generativeUi?.enabled],
+    ["Dynamic sub-agents", spec.config?.dynamicSubAgents?.enabled],
+    ["Ask user questions", spec.config?.askUserQuestions?.enabled]
+  ].filter((entry) => typeof entry[1] === "boolean");
+  const toggleLabel = instructionsView === "markdown" ? "Raw" : "Markdown";
+  return /* @__PURE__ */ jsxs("div", { className: "grid min-h-0 flex-1 gap-3 overflow-auto p-4 md:grid-cols-[minmax(0,1fr)_18rem] md:overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("section", { className: "flex min-h-64 flex-col rounded-lg border border-border bg-card-bg p-4 text-text-primary", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex shrink-0 items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("h2", { className: "flex items-center gap-1.5 text-sm font-semibold text-text-primary", children: [
+          /* @__PURE__ */ jsx(Icon, { name: "book-open", className: "size-4 text-text-secondary" }),
+          "Instructions"
+        ] }),
+        instructions ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "inline-flex h-7 items-stretch overflow-hidden rounded-md border border-border bg-primary-bg text-xs font-medium text-text-secondary",
+            role: "group",
+            "aria-label": "Instructions actions",
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Show ${toggleLabel}`,
+                  onClick: () => setInstructionsView((view) => view === "markdown" ? "raw" : "markdown"),
+                  className: "cursor-pointer px-2.5 transition-colors hover:bg-ghost-button-hover hover:text-text-primary",
+                  children: toggleLabel
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "w-px self-stretch bg-border", "aria-hidden": true }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  title: copied ? "Copied!" : "Copy",
+                  "aria-label": copied ? "Copied!" : "Copy",
+                  onClick: () => {
+                    void navigator.clipboard.writeText(instructions).then(() => {
+                      setCopied(true);
+                      setTimeout(() => setCopied(false), 2e3);
+                    });
+                  },
+                  className: "inline-flex cursor-pointer items-center justify-center px-2 transition-colors hover:bg-ghost-button-hover hover:text-text-primary",
+                  children: /* @__PURE__ */ jsx(Icon, { name: copied ? "check" : "copy", size: 12 })
+                }
+              )
+            ]
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: instructions ? instructionsView === "markdown" ? /* @__PURE__ */ jsx(Markdown, { content: instructions, readOnly: true, className: "text-sm" }) : /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap break-words font-mono text-sm text-text-primary", children: instructions }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: "No instructions for this agent." }) })
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { className: "flex min-h-0 min-w-0 flex-col gap-3 md:overflow-auto", children: [
+      /* @__PURE__ */ jsx(AgentOverviewCard, { title: "Model Configuration", icon: "cpu", children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-text-secondary", children: "Model" }),
+        /* @__PURE__ */ jsx("dd", { className: cn(valueClassName, "truncate"), title: spec.model.name, children: displayModelName(spec.model.name) }),
+        typeof maxTokens === "number" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-text-secondary", children: "Max tokens" }),
+          /* @__PURE__ */ jsx("dd", { className: valueClassName, children: maxTokens })
+        ] }) : null,
+        spec.model.params?.reasoningEffort !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-text-secondary", children: "Reasoning" }),
+          /* @__PURE__ */ jsx("dd", { className: valueClassName, children: spec.model.params.reasoningEffort })
+        ] }) : null,
+        typeof temperature === "number" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("dt", { className: "text-text-secondary", children: "Temperature" }),
+          /* @__PURE__ */ jsx("dd", { className: valueClassName, children: temperature })
+        ] }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx(AgentOverviewCard, { title: "MCP Servers", icon: "plug", count: connectors.length, children: connectors.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: "No connectors attached." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: connectors.map((connector, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: "rounded-md bg-secondary-bg px-2 py-1.5 text-xs",
+          children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: readName(connector) ?? `Connector ${index + 1}` }),
+            hasAllTools(connector) ? /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-primary-button-bg/10 px-1.5 py-0.5 text-[10px] text-primary-button-bg", children: "All tools" }) : null
+          ] })
+        },
+        `${readName(connector) ?? "connector"}-${index}`
+      )) }) }),
+      /* @__PURE__ */ jsx(AgentOverviewCard, { title: "Attached Skills", icon: "lightbulb", count: skills.length, children: skills.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-text-secondary", children: "No skills attached." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: skills.map((skill, index) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          className: "rounded-md bg-secondary-bg px-2 py-1.5 text-xs",
+          children: readName(skill) ?? `Skill ${index + 1}`
+        },
+        `${readName(skill) ?? "skill"}-${index}`
+      )) }) }),
+      execution.length > 0 ? /* @__PURE__ */ jsx(AgentOverviewCard, { title: "Execution", icon: "terminal", children: /* @__PURE__ */ jsx("dl", { className: "space-y-1 text-xs", children: execution.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx("dd", { className: valueClassName, children: value })
+      ] }, label)) }) }) : null,
+      capabilities.length > 0 ? /* @__PURE__ */ jsx(AgentOverviewCard, { title: "Capabilities", icon: "cube", children: /* @__PURE__ */ jsx("dl", { className: "space-y-1 text-xs", children: capabilities.map(([label, enabled]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx("dd", { className: valueClassName, children: enabled ? "Enabled" : "Disabled" })
+      ] }, label)) }) }) : null
+    ] })
+  ] });
+}
+export {
+  AgentOverview as default
+};
+//# sourceMappingURL=AgentOverview-3FJ5EE6N.js.map

package/dist/AgentOverview-3FJ5EE6N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentOverview.tsx"],"sourcesContent":["'use client';\n\nimport { useState, type ComponentType } from 'react';\nimport { Icon } from '../../icons/Icon.js';\nimport { useSlot } from '../../theme/SlotsProvider.js';\nimport { cn } from '../lib/cn.js';\nimport type { AgentOverviewProps } from './types.js';\n\ntype InstructionsView = 'markdown' | 'raw';\n\nconst valueClassName = 'text-right font-mono text-primary-button-bg';\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === 'object' && value != null;\n}\n\nfunction readName(value: object): string | null {\n  if (!('name' in value) || typeof value.name !== 'string') return null;\n  return value.name;\n}\n\nfunction readRecordValue(record: Record<string, unknown> | null, ...keys: string[]): unknown {\n  for (const key of keys) {\n    const value = record?.[key];\n    if (value !== undefined) return value;\n  }\n  return undefined;\n}\n\nfunction hasAllTools(value: object): boolean {\n  if (!isRecord(value)) return false;\n  const tools = readRecordValue(value, 'enableTools', 'enable_tools');\n  return tools === undefined || (Array.isArray(tools) && tools.includes('@all'));\n}\n\nfunction displayModelName(name: string): string {\n  const slash = name.lastIndexOf('/');\n  return slash >= 0 ? name.slice(slash + 1) : name;\n}\n\nexport default function AgentOverview({ detail }: AgentOverviewProps) {\n  const Markdown = useSlot('Markdown');\n  const AgentOverviewCard = useSlot('AgentOverviewCard');\n  const [instructionsView, setInstructionsView] = useState<InstructionsView>('markdown');\n  const [copied, setCopied] = useState(false);\n  const spec = detail.agentSpec;\n  const skills = spec.skills ?? [];\n  const connectors = spec.mcpServers ?? [];\n  const modelParams = isRecord(spec.model.params) ? spec.model.params : null;\n  const maxTokens = readRecordValue(modelParams, 'maxTokens', 'max_tokens');\n  const temperature = readRecordValue(modelParams, 'temperature');\n  const config = isRecord(spec.config) ? spec.config : null;\n  const sandbox = isRecord(config?.sandbox) ? config.sandbox : null;\n  const instructions = spec.instructions?.trim() ? spec.instructions : null;\n  const execution = [\n    ['Sandbox', typeof sandbox?.enabled === 'boolean' ? (sandbox.enabled ? 'Enabled' : 'Disabled') : undefined],\n    ['Iteration limit', readRecordValue(config, 'iterationLimit', 'iteration_limit')],\n    ['Response format', readRecordValue(config, 'responseFormat', 'response_format')],\n  ].filter((entry): entry is [string, string | number] => {\n    return typeof entry[1] === 'string' || typeof entry[1] === 'number';\n  });\n  const capabilities = [\n    ['Generative UI', spec.config?.generativeUi?.enabled],\n    ['Dynamic sub-agents', spec.config?.dynamicSubAgents?.enabled],\n    ['Ask user questions', spec.config?.askUserQuestions?.enabled],\n  ].filter((entry): entry is [string, boolean] => typeof entry[1] === 'boolean');\n  const toggleLabel = instructionsView === 'markdown' ? 'Raw' : 'Markdown';\n\n  return (\n    <div className=\"grid min-h-0 flex-1 gap-3 overflow-auto p-4 md:grid-cols-[minmax(0,1fr)_18rem] md:overflow-hidden\">\n      <section className=\"flex min-h-64 flex-col rounded-lg border border-border bg-card-bg p-4 text-text-primary\">\n        <div className=\"mb-3 flex shrink-0 items-center justify-between gap-2\">\n          <h2 className=\"flex items-center gap-1.5 text-sm font-semibold text-text-primary\">\n            <Icon name=\"book-open\" className=\"size-4 text-text-secondary\" />\n            Instructions\n          </h2>\n          {instructions ? (\n            <div\n              className=\"inline-flex h-7 items-stretch overflow-hidden rounded-md border border-border bg-primary-bg text-xs font-medium text-text-secondary\"\n              role=\"group\"\n              aria-label=\"Instructions actions\"\n            >\n              <button\n                type=\"button\"\n                aria-label={`Show ${toggleLabel}`}\n                onClick={() => setInstructionsView(view => (view === 'markdown' ? 'raw' : 'markdown'))}\n                className=\"cursor-pointer px-2.5 transition-colors hover:bg-ghost-button-hover hover:text-text-primary\"\n              >\n                {toggleLabel}\n              </button>\n              <span className=\"w-px self-stretch bg-border\" aria-hidden />\n              <button\n                type=\"button\"\n                title={copied ? 'Copied!' : 'Copy'}\n                aria-label={copied ? 'Copied!' : 'Copy'}\n                onClick={() => {\n                  void navigator.clipboard.writeText(instructions).then(() => {\n                    setCopied(true);\n                    setTimeout(() => setCopied(false), 2000);\n                  });\n                }}\n                className=\"inline-flex cursor-pointer items-center justify-center px-2 transition-colors hover:bg-ghost-button-hover hover:text-text-primary\"\n              >\n                <Icon name={copied ? 'check' : 'copy'} size={12} />\n              </button>\n            </div>\n          ) : null}\n        </div>\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          {instructions ? (\n            instructionsView === 'markdown' ? (\n              <Markdown content={instructions} readOnly className=\"text-sm\" />\n            ) : (\n              <pre className=\"whitespace-pre-wrap break-words font-mono text-sm text-text-primary\">{instructions}</pre>\n            )\n          ) : (\n            <p className=\"text-sm text-text-secondary\">No instructions for this agent.</p>\n          )}\n        </div>\n      </section>\n\n      <aside className=\"flex min-h-0 min-w-0 flex-col gap-3 md:overflow-auto\">\n        <AgentOverviewCard title=\"Model Configuration\" icon=\"cpu\">\n          <dl className=\"grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs\">\n            <dt className=\"text-text-secondary\">Model</dt>\n            <dd className={cn(valueClassName, 'truncate')} title={spec.model.name}>\n              {displayModelName(spec.model.name)}\n            </dd>\n            {typeof maxTokens === 'number' ? (\n              <>\n                <dt className=\"text-text-secondary\">Max tokens</dt>\n                <dd className={valueClassName}>{maxTokens}</dd>\n              </>\n            ) : null}\n            {spec.model.params?.reasoningEffort !== undefined ? (\n              <>\n                <dt className=\"text-text-secondary\">Reasoning</dt>\n                <dd className={valueClassName}>{spec.model.params.reasoningEffort}</dd>\n              </>\n            ) : null}\n            {typeof temperature === 'number' ? (\n              <>\n                <dt className=\"text-text-secondary\">Temperature</dt>\n                <dd className={valueClassName}>{temperature}</dd>\n              </>\n            ) : null}\n          </dl>\n        </AgentOverviewCard>\n        <AgentOverviewCard title=\"MCP Servers\" icon=\"plug\" count={connectors.length}>\n          {connectors.length === 0 ? (\n            <p className=\"text-xs text-text-secondary\">No connectors attached.</p>\n          ) : (\n            <ul className=\"space-y-1.5\">\n              {connectors.map((connector, index) => (\n                <li\n                  key={`${readName(connector) ?? 'connector'}-${index}`}\n                  className=\"rounded-md bg-secondary-bg px-2 py-1.5 text-xs\"\n                >\n                  <span className=\"flex items-center justify-between gap-2\">\n                    <span className=\"truncate\">{readName(connector) ?? `Connector ${index + 1}`}</span>\n                    {hasAllTools(connector) ? (\n                      <span className=\"shrink-0 rounded-full bg-primary-button-bg/10 px-1.5 py-0.5 text-[10px] text-primary-button-bg\">\n                        All tools\n                      </span>\n                    ) : null}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          )}\n        </AgentOverviewCard>\n\n        <AgentOverviewCard title=\"Attached Skills\" icon=\"lightbulb\" count={skills.length}>\n          {skills.length === 0 ? (\n            <p className=\"text-xs text-text-secondary\">No skills attached.</p>\n          ) : (\n            <ul className=\"space-y-1.5\">\n              {skills.map((skill, index) => (\n                <li\n                  key={`${readName(skill) ?? 'skill'}-${index}`}\n                  className=\"rounded-md bg-secondary-bg px-2 py-1.5 text-xs\"\n                >\n                  {readName(skill) ?? `Skill ${index + 1}`}\n                </li>\n              ))}\n            </ul>\n          )}\n        </AgentOverviewCard>\n\n        {execution.length > 0 ? (\n          <AgentOverviewCard title=\"Execution\" icon=\"terminal\">\n            <dl className=\"space-y-1 text-xs\">\n              {execution.map(([label, value]) => (\n                <div key={label} className=\"flex justify-between gap-3\">\n                  <dt className=\"text-text-secondary\">{label}</dt>\n                  <dd className={valueClassName}>{value}</dd>\n                </div>\n              ))}\n            </dl>\n          </AgentOverviewCard>\n        ) : null}\n\n        {capabilities.length > 0 ? (\n          <AgentOverviewCard title=\"Capabilities\" icon=\"cube\">\n            <dl className=\"space-y-1 text-xs\">\n              {capabilities.map(([label, enabled]) => (\n                <div key={label} className=\"flex justify-between gap-3\">\n                  <dt className=\"text-text-secondary\">{label}</dt>\n                  <dd className={valueClassName}>{enabled ? 'Enabled' : 'Disabled'}</dd>\n                </div>\n              ))}\n            </dl>\n          </AgentOverviewCard>\n        ) : null}\n      </aside>\n    </div>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentOverview: ComponentType<AgentOverviewProps>;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/AgentSessionEventTimeline-VELWUYPR.js

@@ -0,0 +1,88 @@
+"use client";
+import {
+  SESSION_EVENT_TYPES,
+  getSessionEventColor,
+  useSlot,
+  useThemeMode
+} from "./chunk-YQO2NMJ3.js";
+import "./chunk-NHHSZB5N.js";
+import "./chunk-H6WTY5PM.js";
+import "./chunk-FQK2XVVE.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-VJ7BZGAF.js";
+import {
+  cn
+} from "./chunk-BWHOZFIV.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 py-2", children: /* @__PURE__ */ jsx(
+      AgentSessionEventTimelineChart,
+      {
+        turns,
+        segments,
+        hiddenTypes,
+        onSelectTurn
+      }
+    ) })
+  ] });
+}
+export {
+  AgentSessionEventTimeline
+};
+//# sourceMappingURL=AgentSessionEventTimeline-VELWUYPR.js.map

package/dist/AgentSessionEventTimeline-VELWUYPR.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 py-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,eACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}