@truefoundry/trueforge-ui 0.3.0-rc.1 → 0.3.0-rc.11

package/dist/AgentOverview-3LJZ6MO7.js

@@ -0,0 +1,311 @@
+"use client";
+import {
+  TOOL_TAG_ALL,
+  Tooltip,
+  approvalSelectorsFromMount,
+  disableSelectorsFromMount,
+  editableMountsFromSpec,
+  enableSelectorsFromMount,
+  mcpToolKind,
+  namedToolRequiresApproval,
+  selectedToolNames,
+  useSlot
+} from "./chunk-OH357IHR.js";
+import "./chunk-T6QQV5LK.js";
+import {
+  Icon
+} from "./chunk-5N5V7YLO.js";
+import {
+  useOptionalServer
+} from "./chunk-2GIZY3JJ.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-SLMFEG7X.js";
+import {
+  cn
+} from "./chunk-GKXDRULM.js";
+
+// src/atoms/agent-details/AgentOverview.tsx
+import { useState as useState2 } from "react";
+
+// src/atoms/agent-details/AgentOverviewMcpServers.tsx
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var KIND_CLASSES = {
+  read: "border-border bg-secondary-bg text-text-secondary",
+  write: "border-border bg-secondary-bg text-text-primary",
+  destructive: "border-failure-bg/30 bg-failure-bg/10 text-failure-bg"
+};
+var KIND_ORDER = {
+  read: 0,
+  write: 1,
+  unknown: 2,
+  destructive: 3
+};
+function toolCountLabel(count) {
+  return count === 1 ? "1 tool" : `${count} tools`;
+}
+function toolSelectorLabel(enableSelectors) {
+  if (enableSelectors.includes(TOOL_TAG_ALL)) return "All tools";
+  return enableSelectors.filter((selector) => selector.startsWith("@")).join(" ");
+}
+function ApprovalCountBadge({ count }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "border-warning-bg/40 bg-warning-bg/10 text-warning-bg inline-flex shrink-0 items-center gap-1 rounded-full border px-1.5 py-0.5 text-[0.625rem] font-medium",
+      "aria-label": `${count} ${count === 1 ? "tool needs" : "tools need"} approval`,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "shield-check", className: "size-2.5" }),
+        count
+      ]
+    }
+  );
+}
+function ToolKindPill({ kind }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("shrink-0 rounded-full border px-1.5 py-0.5 text-[0.625rem] font-medium", KIND_CLASSES[kind]), children: kind });
+}
+function ApprovalIndicator({ approvalRequired, toolName }) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      content: approvalRequired ? "Asks for approval before running" : "Runs without asking for approval",
+      triggerClassName: "shrink-0",
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "img",
+          "aria-label": `${toolName} ${approvalRequired ? "requires approval" : "runs without approval"}`,
+          className: cn(
+            "flex size-5 items-center justify-center rounded-md border",
+            approvalRequired ? "border-warning-bg/50 bg-warning-bg/10 text-warning-bg" : "border-border text-text-secondary"
+          ),
+          children: /* @__PURE__ */ jsx(Icon, { name: approvalRequired ? "shield-check" : "shield", className: "size-3" })
+        }
+      )
+    }
+  );
+}
+function AgentOverviewMcpServers({ mcpServers }) {
+  const AgentOverviewCard = useSlot("AgentOverviewCard");
+  const server = useOptionalServer();
+  const getMcpTools = server?.getMcpTools;
+  const mounts = useMemo(() => editableMountsFromSpec(mcpServers), [mcpServers]);
+  const [toolsByServer, setToolsByServer] = useState({});
+  const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (getMcpTools === void 0) return;
+    let cancelled = false;
+    for (const mount of mounts) {
+      void getMcpTools({ connectorId: mount.name }).then(
+        (tools) => {
+          if (!cancelled) setToolsByServer((prev) => ({ ...prev, [mount.name]: tools }));
+        },
+        () => {
+        }
+      );
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [getMcpTools, mounts]);
+  if (mounts.length === 0) {
+    return /* @__PURE__ */ jsx(AgentOverviewCard, { title: "MCP Servers & Tools", icon: "plug", count: 0, children: /* @__PURE__ */ jsx("p", { className: "text-text-secondary text-xs", children: "No connectors attached." }) });
+  }
+  return /* @__PURE__ */ jsx(AgentOverviewCard, { title: "MCP Servers & Tools", icon: "plug", count: mounts.length, children: /* @__PURE__ */ jsx("ul", { className: "space-y-1.5", children: mounts.map((mount) => {
+    const tools = toolsByServer[mount.name] ?? [];
+    const selectors = approvalSelectorsFromMount(mount.value);
+    const enableSelectors = enableSelectorsFromMount(mount.value);
+    const enabled = selectedToolNames({
+      enableSelectors,
+      disableSelectors: disableSelectorsFromMount(mount.value),
+      tools
+    });
+    const toolNames = enabled.names.map((toolName) => {
+      const tool = tools.find((item) => item.name === toolName);
+      const kind = tool === void 0 ? void 0 : mcpToolKind(tool);
+      return {
+        toolName,
+        kind,
+        approvalRequired: namedToolRequiresApproval({ toolName, tools, selectors })
+      };
+    }).sort((left, right) => KIND_ORDER[left.kind ?? "unknown"] - KIND_ORDER[right.kind ?? "unknown"]);
+    const approvalCount = toolNames.filter((tool) => tool.approvalRequired).length;
+    const expanded = expandedIds.has(mount.id);
+    return /* @__PURE__ */ jsxs("li", { className: "overflow-hidden rounded-md border border-border", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": expanded,
+          disabled: toolNames.length === 0,
+          className: "flex w-full cursor-pointer items-center gap-2 bg-secondary-bg px-2.5 py-2 text-left text-xs hover:bg-ghost-button-hover disabled:cursor-default disabled:hover:bg-secondary-bg",
+          onClick: () => setExpandedIds((prev) => {
+            const next = new Set(prev);
+            if (expanded) next.delete(mount.id);
+            else next.add(mount.id);
+            return next;
+          }),
+          children: [
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "chevron-down",
+                className: cn(
+                  "size-3 shrink-0 text-text-secondary transition-transform",
+                  expanded ? void 0 : "-rotate-90",
+                  toolNames.length === 0 && "invisible"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: mount.name }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-text-secondary", children: enabled.resolved ? toolCountLabel(toolNames.length) : toolSelectorLabel(enableSelectors) }),
+            approvalCount > 0 ? /* @__PURE__ */ jsx(ApprovalCountBadge, { count: approvalCount }) : null
+          ]
+        }
+      ),
+      expanded ? /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border border-t border-border", children: toolNames.map(({ toolName, kind, approvalRequired }) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 px-2.5 py-1.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-[0.6875rem]", title: toolName, children: toolName }),
+        kind ? /* @__PURE__ */ jsx(ToolKindPill, { kind }) : null,
+        /* @__PURE__ */ jsx(ApprovalIndicator, { approvalRequired, toolName })
+      ] }, toolName)) }) : null
+    ] }, mount.id);
+  }) }) });
+}
+
+// src/atoms/agent-details/AgentOverview.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } 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 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] = useState2("markdown");
+  const [copied, setCopied] = useState2(false);
+  const spec = detail.agentSpec;
+  const skills = spec.skills ?? [];
+  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 description = detail.description?.trim() ? detail.description : 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__ */ jsx2("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-4 md:overflow-hidden", children: /* @__PURE__ */ jsxs2("div", { className: "grid min-h-0 flex-1 gap-3 md:grid-cols-[minmax(0,1fr)_22rem] md:overflow-hidden", children: [
+    /* @__PURE__ */ jsxs2("section", { className: "flex min-h-64 flex-col rounded-lg border border-border bg-card-bg p-4 text-text-primary", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "mb-3 flex shrink-0 items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs2("h2", { className: "flex items-center gap-1.5 text-sm font-semibold text-text-primary", children: [
+          /* @__PURE__ */ jsx2(Icon, { name: "book-open", className: "size-4 text-text-secondary" }),
+          "Instructions"
+        ] }),
+        instructions ? /* @__PURE__ */ jsxs2(
+          "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__ */ jsx2(
+                "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__ */ jsx2("span", { className: "w-px self-stretch bg-border", "aria-hidden": true }),
+              /* @__PURE__ */ jsx2(
+                "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__ */ jsx2(Icon, { name: copied ? "check" : "copy", size: 12 })
+                }
+              )
+            ]
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-auto", children: instructions ? instructionsView === "markdown" ? /* @__PURE__ */ jsx2(Markdown, { content: instructions, readOnly: true, className: "text-sm" }) : /* @__PURE__ */ jsx2("pre", { className: "whitespace-pre-wrap break-words font-mono text-sm text-text-primary", children: instructions }) : /* @__PURE__ */ jsx2("p", { className: "text-sm text-text-secondary", children: "No instructions for this agent." }) })
+    ] }),
+    /* @__PURE__ */ jsxs2("aside", { className: "flex min-h-0 min-w-0 flex-col gap-3 md:overflow-auto", children: [
+      description ? /* @__PURE__ */ jsx2(AgentOverviewCard, { title: "Description", icon: "file", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-text-secondary", children: description }) }) : null,
+      /* @__PURE__ */ jsx2(AgentOverviewCard, { title: "Model Configuration", icon: "cpu", children: /* @__PURE__ */ jsxs2("dl", { className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 text-xs", children: [
+        /* @__PURE__ */ jsx2("dt", { className: "text-text-secondary", children: "Model" }),
+        /* @__PURE__ */ jsx2("dd", { className: cn(valueClassName, "truncate"), title: spec.model.name, children: displayModelName(spec.model.name) }),
+        typeof maxTokens === "number" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2("dt", { className: "text-text-secondary", children: "Max tokens" }),
+          /* @__PURE__ */ jsx2("dd", { className: valueClassName, children: maxTokens })
+        ] }) : null,
+        spec.model.params?.reasoningEffort !== void 0 ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2("dt", { className: "text-text-secondary", children: "Reasoning" }),
+          /* @__PURE__ */ jsx2("dd", { className: valueClassName, children: spec.model.params.reasoningEffort })
+        ] }) : null,
+        typeof temperature === "number" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2("dt", { className: "text-text-secondary", children: "Temperature" }),
+          /* @__PURE__ */ jsx2("dd", { className: valueClassName, children: temperature })
+        ] }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx2(AgentOverviewMcpServers, { mcpServers: spec.mcpServers }),
+      /* @__PURE__ */ jsx2(AgentOverviewCard, { title: "Attached Skills", icon: "lightbulb", count: skills.length, children: skills.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-text-secondary", children: "No skills attached." }) : /* @__PURE__ */ jsx2("ul", { className: "space-y-1.5", children: skills.map((skill, index) => /* @__PURE__ */ jsx2(
+        "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__ */ jsx2(AgentOverviewCard, { title: "Execution", icon: "terminal", children: /* @__PURE__ */ jsx2("dl", { className: "space-y-1 text-xs", children: execution.map(([label, value]) => /* @__PURE__ */ jsxs2("div", { className: "flex justify-between gap-3", children: [
+        /* @__PURE__ */ jsx2("dt", { className: "text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx2("dd", { className: valueClassName, children: value })
+      ] }, label)) }) }) : null,
+      capabilities.length > 0 ? /* @__PURE__ */ jsx2(AgentOverviewCard, { title: "Capabilities", icon: "cube", children: /* @__PURE__ */ jsx2("dl", { className: "space-y-1 text-xs", children: capabilities.map(([label, enabled]) => /* @__PURE__ */ jsxs2("div", { className: "flex justify-between gap-3", children: [
+        /* @__PURE__ */ jsx2("dt", { className: "text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx2("dd", { className: valueClassName, children: enabled ? "Enabled" : "Disabled" })
+      ] }, label)) }) }) : null
+    ] })
+  ] }) });
+}
+export {
+  AgentOverview as default
+};
+//# sourceMappingURL=AgentOverview-3LJZ6MO7.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentOverview.tsx","../src/atoms/agent-details/AgentOverviewMcpServers.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 { AgentOverviewMcpServers } from './AgentOverviewMcpServers.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 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 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 description = detail.description?.trim() ? detail.description : 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=\"flex min-h-0 flex-1 flex-col gap-3 overflow-auto p-4 md:overflow-hidden\">\n      <div className=\"grid min-h-0 flex-1 gap-3 md:grid-cols-[minmax(0,1fr)_22rem] 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\">\n                  {instructions}\n                </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          {description ? (\n            <AgentOverviewCard title=\"Description\" icon=\"file\">\n              <p className=\"text-xs text-text-secondary\">{description}</p>\n            </AgentOverviewCard>\n          ) : null}\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          <AgentOverviewMcpServers mcpServers={spec.mcpServers} />\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    </div>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentOverview: ComponentType<AgentOverviewProps>;\n  }\n}\n","'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Icon } from '../../icons/Icon.js';\nimport { useOptionalServer } from '../../server/ServerContext.js';\nimport type { McpToolSelection } from '../../server/types.js';\nimport { useSlot } from '../../theme/SlotsProvider.js';\nimport {\n  approvalSelectorsFromMount,\n  disableSelectorsFromMount,\n  editableMountsFromSpec,\n  enableSelectorsFromMount,\n} from '../draft/agentConfigMounts.js';\nimport { namedToolRequiresApproval } from '../draft/mcpToolApprovals.js';\nimport { mcpToolKind, type McpToolKind } from '../draft/mcpToolSections.js';\nimport { selectedToolNames, TOOL_TAG_ALL } from '../draft/mcpToolSelectors.js';\nimport { cn } from '../lib/cn.js';\nimport { Tooltip } from '../primitives/Tooltip.js';\n\nconst KIND_CLASSES: Record<McpToolKind, string> = {\n  read: 'border-border bg-secondary-bg text-text-secondary',\n  write: 'border-border bg-secondary-bg text-text-primary',\n  destructive: 'border-failure-bg/30 bg-failure-bg/10 text-failure-bg',\n};\n\n/** Read-only tools first and destructive last, mirroring the tool picker's sections. */\nconst KIND_ORDER: Record<McpToolKind | 'unknown', number> = {\n  read: 0,\n  write: 1,\n  unknown: 2,\n  destructive: 3,\n};\n\nfunction toolCountLabel(count: number): string {\n  return count === 1 ? '1 tool' : `${count} tools`;\n}\n\n/** Shown while tags cannot be resolved: the selectors themselves are the best available answer. */\nfunction toolSelectorLabel(enableSelectors: readonly string[]): string {\n  if (enableSelectors.includes(TOOL_TAG_ALL)) return 'All tools';\n  return enableSelectors.filter(selector => selector.startsWith('@')).join(' ');\n}\n\nfunction ApprovalCountBadge({ count }: { count: number }) {\n  return (\n    <span\n      className=\"border-warning-bg/40 bg-warning-bg/10 text-warning-bg inline-flex shrink-0 items-center gap-1 rounded-full border px-1.5 py-0.5 text-[0.625rem] font-medium\"\n      aria-label={`${count} ${count === 1 ? 'tool needs' : 'tools need'} approval`}\n    >\n      <Icon name=\"shield-check\" className=\"size-2.5\" />\n      {count}\n    </span>\n  );\n}\n\nfunction ToolKindPill({ kind }: { kind: McpToolKind }) {\n  return (\n    <span className={cn('shrink-0 rounded-full border px-1.5 py-0.5 text-[0.625rem] font-medium', KIND_CLASSES[kind])}>\n      {kind}\n    </span>\n  );\n}\n\nfunction ApprovalIndicator({ approvalRequired, toolName }: { approvalRequired: boolean; toolName: string }) {\n  return (\n    <Tooltip\n      content={approvalRequired ? 'Asks for approval before running' : 'Runs without asking for approval'}\n      triggerClassName=\"shrink-0\"\n    >\n      <span\n        role=\"img\"\n        aria-label={`${toolName} ${approvalRequired ? 'requires approval' : 'runs without approval'}`}\n        className={cn(\n          'flex size-5 items-center justify-center rounded-md border',\n          approvalRequired\n            ? 'border-warning-bg/50 bg-warning-bg/10 text-warning-bg'\n            : 'border-border text-text-secondary',\n        )}\n      >\n        <Icon name={approvalRequired ? 'shield-check' : 'shield'} className=\"size-3\" />\n      </span>\n    </Tooltip>\n  );\n}\n\n/** Attached MCP servers, each expanding into the tools the agent can call. */\nexport function AgentOverviewMcpServers({ mcpServers }: { mcpServers: unknown }) {\n  const AgentOverviewCard = useSlot('AgentOverviewCard');\n  const server = useOptionalServer();\n  const getMcpTools = server?.getMcpTools;\n  const mounts = useMemo(() => editableMountsFromSpec(mcpServers), [mcpServers]);\n  const [toolsByServer, setToolsByServer] = useState<Record<string, McpToolSelection[]>>({});\n  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => new Set());\n\n  // Tool metadata drives the counts, kinds, and approval state; a failing server just shows less.\n  useEffect(() => {\n    if (getMcpTools === undefined) return;\n    let cancelled = false;\n    for (const mount of mounts) {\n      void getMcpTools({ connectorId: mount.name }).then(\n        tools => {\n          if (!cancelled) setToolsByServer(prev => ({ ...prev, [mount.name]: tools }));\n        },\n        () => {},\n      );\n    }\n    return () => {\n      cancelled = true;\n    };\n  }, [getMcpTools, mounts]);\n\n  if (mounts.length === 0) {\n    return (\n      <AgentOverviewCard title=\"MCP Servers & Tools\" icon=\"plug\" count={0}>\n        <p className=\"text-text-secondary text-xs\">No connectors attached.</p>\n      </AgentOverviewCard>\n    );\n  }\n\n  return (\n    <AgentOverviewCard title=\"MCP Servers & Tools\" icon=\"plug\" count={mounts.length}>\n      <ul className=\"space-y-1.5\">\n        {mounts.map(mount => {\n          const tools = toolsByServer[mount.name] ?? [];\n          const selectors = approvalSelectorsFromMount(mount.value);\n          const enableSelectors = enableSelectorsFromMount(mount.value);\n          const enabled = selectedToolNames({\n            enableSelectors,\n            disableSelectors: disableSelectorsFromMount(mount.value),\n            tools,\n          });\n          const toolNames = enabled.names\n            .map(toolName => {\n              const tool = tools.find(item => item.name === toolName);\n              const kind = tool === undefined ? undefined : mcpToolKind(tool);\n              return {\n                toolName,\n                kind,\n                approvalRequired: namedToolRequiresApproval({ toolName, tools, selectors }),\n              };\n            })\n            .sort((left, right) => KIND_ORDER[left.kind ?? 'unknown'] - KIND_ORDER[right.kind ?? 'unknown']);\n          const approvalCount = toolNames.filter(tool => tool.approvalRequired).length;\n          const expanded = expandedIds.has(mount.id);\n          return (\n            <li key={mount.id} className=\"overflow-hidden rounded-md border border-border\">\n              <button\n                type=\"button\"\n                aria-expanded={expanded}\n                disabled={toolNames.length === 0}\n                className=\"flex w-full cursor-pointer items-center gap-2 bg-secondary-bg px-2.5 py-2 text-left text-xs hover:bg-ghost-button-hover disabled:cursor-default disabled:hover:bg-secondary-bg\"\n                onClick={() =>\n                  setExpandedIds(prev => {\n                    const next = new Set(prev);\n                    if (expanded) next.delete(mount.id);\n                    else next.add(mount.id);\n                    return next;\n                  })\n                }\n              >\n                <Icon\n                  name=\"chevron-down\"\n                  className={cn(\n                    'size-3 shrink-0 text-text-secondary transition-transform',\n                    expanded ? undefined : '-rotate-90',\n                    toolNames.length === 0 && 'invisible',\n                  )}\n                />\n                <span className=\"min-w-0 flex-1 truncate font-medium\">{mount.name}</span>\n                <span className=\"shrink-0 text-text-secondary\">\n                  {enabled.resolved ? toolCountLabel(toolNames.length) : toolSelectorLabel(enableSelectors)}\n                </span>\n                {approvalCount > 0 ? <ApprovalCountBadge count={approvalCount} /> : null}\n              </button>\n              {expanded ? (\n                <ul className=\"divide-y divide-border border-t border-border\">\n                  {toolNames.map(({ toolName, kind, approvalRequired }) => (\n                    <li key={toolName} className=\"flex items-center gap-2 px-2.5 py-1.5\">\n                      <span className=\"min-w-0 flex-1 truncate font-mono text-[0.6875rem]\" title={toolName}>\n                        {toolName}\n                      </span>\n                      {kind ? <ToolKindPill kind={kind} /> : null}\n                      <ApprovalIndicator approvalRequired={approvalRequired} toolName={toolName} />\n                    </li>\n                  ))}\n                </ul>\n              ) : null}\n            </li>\n          );\n        })}\n      </ul>\n    </AgentOverviewCard>\n  );\n}\n"],"mappings":"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","names":["useState","jsx","jsxs","useState"]}

package/dist/{AgentSessionEventTimeline-26Z6IB3B.js → AgentSessionEventTimeline-5GOJKT7D.js}

@@ -1,22 +1,25 @@
 "use client";
 import {
   SESSION_EVENT_TYPES,
-  useSlot
-} from "./chunk-ZTMKFZQ3.js";
-import "./chunk-2XPPBEYF.js";
-import "./chunk-XAU7QFG3.js";
-import "./chunk-U7KURWW3.js";
+  getSessionEventColor,
+  useSlot,
+  useThemeMode
+} from "./chunk-OH357IHR.js";
+import "./chunk-T6QQV5LK.js";
+import "./chunk-5N5V7YLO.js";
+import "./chunk-2GIZY3JJ.js";
 import "./chunk-M6MHLVSO.js";
-import "./chunk-MPNSO7E6.js";
+import "./chunk-SLMFEG7X.js";
 import {
   cn
-} from "./chunk-7Z2C2K7F.js";
+} from "./chunk-GKXDRULM.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));
@@ -52,7 +55,13 @@ function AgentSessionEventTimeline({ turns, segments, onSelectTurn }) {
                 ),
                 onClick: () => handleToggleType(eventType.id),
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: "size-2 rounded-sm", style: { backgroundColor: eventType.color } }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "size-2 rounded-sm",
+                      style: { backgroundColor: getSessionEventColor(eventType.id, isDark) }
+                    }
+                  ),
                   eventType.label
                 ]
               },
@@ -62,7 +71,7 @@ function AgentSessionEventTimeline({ turns, segments, onSelectTurn }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "w-full py-2", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "w-full p-2", children: /* @__PURE__ */ jsx(
       AgentSessionEventTimelineChart,
       {
         turns,
@@ -76,4 +85,4 @@ function AgentSessionEventTimeline({ turns, segments, onSelectTurn }) {
 export {
   AgentSessionEventTimeline
 };
-//# sourceMappingURL=AgentSessionEventTimeline-26Z6IB3B.js.map
+//# sourceMappingURL=AgentSessionEventTimeline-5GOJKT7D.js.map

package/dist/AgentSessionEventTimeline-5GOJKT7D.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":[]}