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

package/CHANGELOG.md

@@ -1,5 +1,90 @@
 # Changelog
 
+## 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
+
+- 3539da2: Add `brand.mode` (`icon-title` | `icon-only` | `logo`) so hosts pick chrome look first; `name` always labels the mark, and `resolveBrandChrome` maps mode to layout chrome.
+- 16feb29: Add `customActionRenderers` so hosts can pause the composer on client-side tools with their own UI and resume via `onSubmit(content)`.
+- 0297727: Add context-management compaction triggers with model-aware defaults and migrate persisted legacy token thresholds.
+
+### Patch Changes
+
+- b11cfc3: Wire remote chat session deletion and improve the history delete action styling.
+- 3ca4e2e: fixed the button component icon and padding, delete conflicting local prettier.json in trueforge-ui package
+- a655537: Update published dependency ranges (AI SDK, Hono, MCP SDK, Redis, assistant-ui, and related packages).
+- aa4be44: Open markdown links in assistant messages in a new tab
+- d7015fd: show mcp server tool name on tool approval
+- Updated dependencies [648273b]
+  - @truefoundry/trueforge-sdk@0.1.4-rc.0
+
+## Unreleased
+
+### Minor Changes
+
+- **`brand.mode`** — explicit chrome look. Set `mode`, then pass the fields it requires.
+  `name` always labels the mark (`alt` / `aria-label`):
+  - **`'icon-title'`** — `name` + optional `icon` (title shown in expanded chrome)
+  - **`'icon-only'`** — `name` + `icon` (alt kept, no title text)
+  - **`'logo'`** — `name` + `icon` + `logo` (wordmark in expanded chrome; `name` is alt only)
+  - **Default** — omit `brand` for the TrueForge wordmark / square mark
+- **`resolveBrandChrome()`** — maps `brand.mode` to
+  `{ expandedVariant, collapsedVariant, showTitle }`. `SidebarLayout` uses it; custom
+  layouts should too.
+
+### Changed
+
+- **`BrandConfig`** — discriminated on `mode` (`BrandMode`). Removed `showTitle` from
+  config; visible title follows the mode.
+
 ## 0.2.4
 
 ### Patch Changes

package/README.md

@@ -19,8 +19,6 @@ Powered by [assistant-ui](https://www.assistant-ui.com/), it follows the familia
 
 Bring your own **brand, colors, layout, components, and server**—the Agent SDK wires up the rest.
 
-### Checkout the Demo [here](./example/)
-
 ---
 
 ## Table of contents
@@ -209,7 +207,7 @@ export default function App() {
   }}
   theme={{
     preset: 'claude',
-    brand: { name: 'Acme', logo: '/logo.svg' },
+    brand: { mode: 'icon-title', name: 'Acme', icon: '/icon.svg' },
   }}
   overrides={{/* slot overrides */}}
   className="h-full"
@@ -321,7 +319,15 @@ package). Host CSS on `.aui-markdown` / `.aui-syntax-highlighter` / `.aui-openui
 
 ## Brand / logo
 
-**Base layouts** — pass `theme.brand` and the SDK positions the mark + name in the default slots:
+Set `brand.mode`, then pass the fields that mode requires. `name` always labels the
+mark (`alt` / `aria-label`).
+
+| Look         | `mode`         | Required                   | Expanded chrome           | Collapsed / compact |
+| ------------ | -------------- | -------------------------- | ------------------------- | ------------------- |
+| Default      | omit `brand`   | —                          | TrueForge wordmark        | TrueForge square    |
+| Icon + title | `'icon-title'` | `name` (+ optional `icon`) | square + title text       | square              |
+| Icon only    | `'icon-only'`  | `name`, `icon`             | square (no title text)    | square              |
+| Wide logo    | `'logo'`       | `name`, `icon`, `logo`     | wide logo (no title text) | square              |
 
 ```tsx
 <TrueForgeUI
@@ -329,15 +335,28 @@ package). Host CSS on `.aui-markdown` / `.aui-syntax-highlighter` / `.aui-openui
   layout="sidebar"
   theme={{
     brand: {
+      mode: 'icon-title',
       name: 'Acme',
-      logo: '/brand/logo.svg',
+      icon: '/brand/icon.svg',
     },
   }}
 />
 ```
 
-**Light / dark marks** — pass `light` / `dark` sources instead and the SDK picks the one matching
-the resolved mode. `href` wraps the logo in a same-tab link:
+Icon-only chrome (`name` kept for alt):
+
+```tsx
+theme={{
+  brand: {
+    mode: 'icon-only',
+    name: 'Acme',
+    icon: '/brand/icon.svg',
+  },
+}}
+```
+
+Wide logo for expanded chrome. A square `icon` is required because collapsed chrome,
+the welcome screen, and the widget button continue to use the square asset:
 
 ```tsx
 <TrueForgeUI
@@ -345,14 +364,19 @@ the resolved mode. `href` wraps the logo in a same-tab link:
   layout="sidebar"
   theme={{
     brand: {
+      mode: 'logo',
       name: 'Acme',
-      logo: { light: '/brand/logo-light.svg', dark: '/brand/logo-dark.svg', href: '/' },
+      icon: '/brand/icon.svg',
+      logo: '/brand/wordmark.svg',
+      href: '/',
     },
   }}
 />
 ```
 
-Set only one mode and it is used for both. `name` labels the image, so no `alt` is needed.
+Both `icon` and `logo` accept `{ src, light, dark }`. The SDK picks the source matching the
+resolved theme mode; setting only one light/dark source uses it for both. `href` wraps
+configured images in a same-tab link.
 
 **Component marks** — `theme.brand` takes image URLs only. To render an inline SVG or a custom
 component, override the `BrandLogo` slot, the same way you replace any other atom:
@@ -361,7 +385,10 @@ component, override the `BrandLogo` slot, the same way you replace any other ato
 <TrueForgeUI server={server} layout="sidebar" overrides={{ BrandLogo: MyMark }} />
 ```
 
-**Custom layouts** — import `BrandLogo` and place it anywhere; pair it with `useBrandName()` when you also want the name as text (see [Custom layouts](#custom-layouts)).
+**Custom layouts** — import `BrandLogo` and use `variant="icon"` for compact surfaces or
+`variant="logo"` for expanded chrome. Prefer `resolveBrandChrome(useBrand())` so expanded
+vs collapsed choices match the base layouts. Pair with `useBrandName()` when chrome should
+show the title text (see [Custom layouts](#custom-layouts)).
 
 > _Screenshot: external brand mark rendered in the base layout header._
 
@@ -373,12 +400,14 @@ component, override the `BrandLogo` slot, the same way you replace any other ato
 
 | 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
 {
@@ -409,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._
 
 ---
 
@@ -424,8 +453,6 @@ Built-in `layout` values:
 | `dock`    | Fixed-width right panel; list XOR thread stack           |
 | `widget`  | Same stack as `dock`, opened from a bottom-right FAB     |
 
-The [example app](./example/) switches between these four modes.
-
 ---
 
 ## Custom layouts
@@ -433,17 +460,15 @@ The [example app](./example/) switches between these four modes.
 For full control, pass a React component as `layout`. The SDK still wires server, shell mode, slots, and runtime behind it.
 
 ```tsx
-import { Thread, ThreadListContainer, BrandLogo, useBrandName, useTheme } from '@truefoundry/trueforge-ui';
+import { Thread, ThreadListContainer, BrandLogo, useTheme } from '@truefoundry/trueforge-ui';
 
 function Layout({ className }: { className?: string }) {
   const { mode, setTheme } = useTheme();
-  const brandName = useBrandName();
 
   return (
     <div className={className} style={{ display: 'flex', height: '100%' }}>
       <aside style={{ width: 256 }}>
-        <BrandLogo className="size-6" />
-        <span>{brandName}</span>
+        <BrandLogo variant="logo" className="h-6 w-auto max-w-40" />
         <ThreadListContainer />
       </aside>
       <main style={{ flex: 1, minWidth: 0 }}>
@@ -492,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.
 
@@ -520,13 +545,19 @@ type TrueForgeServerConfig =
     }
   | AgentUIServer;
 
-type AgentUIServer = AgentChatServer & AgentBuilderServer & { catalog?: CatalogServer };
+type AgentUIServer = AgentChatServer &
+  AgentBuilderServer & {
+    catalog?: CatalogServer;
+    sessions?: AgentSessionsServer;
+    metrics?: AgentMetricsServer;
+  };
 ```
 
 | Port                 | Responsibility                                                      |
 | -------------------- | ------------------------------------------------------------------- |
 | `AgentChatServer`    | Sessions, turns, streaming, draft `AgentSpec` sync                  |
 | `AgentBuilderServer` | `getModels` / `getSkills` / `getMcp` / `searchAgents` / `saveAgent` |
+| `AgentMetricsServer` | Agent meter aggregates, chart definitions, and chart data           |
 
 **Zero-config TrueFoundry** — see [Getting started](#getting-started). The SDK calls `createTrueFoundryAgentUIServer` for you.
 
@@ -591,6 +622,7 @@ See [docs/server.md](./docs/server.md) for the full method list and BYO guidance
 | `TrueForgeServerConfig`                                            | Type       | `server` prop: `truefoundry` / `trueforge` / `AgentUIServer` |
 | `createTrueFoundryServer`                                          | Function   | Compose chat + builder into `AgentUIServer`                  |
 | `Thread`, `ThreadListContainer`, `BrandLogo`                       | Components | Layout primitives for custom layouts                         |
+| `resolveBrandChrome`, `useBrandName`, `useBrand`                   | Helpers    | Brand chrome look + name for custom layouts                  |
 | Composer / message / tool atoms                                    | Components | Overridable, themeable building blocks                       |
 | `SlotsProvider`, `useSlot`, `useTheme`                             | API        | Overrides + theme mode                                       |
 | `AgentUIServer`, `AgentChatServer`, `AgentBuilderServer`           | Types      | Resolved server contract                                     |
@@ -630,7 +662,7 @@ pnpm --filter @truefoundry/trueforge-ui test
 pnpm --filter @truefoundry/trueforge-ui build
 ```
 
-Local demo: see [example/](./example/). Publishing: see [RELEASING.md](../../RELEASING.md#releasing-truefoundrytrueforge-ui).
+Publishing: see [RELEASING.md](../../RELEASING.md#releasing-truefoundrytrueforge-ui).
 
 ---
 

package/dist/AgentCodeSnippets-NZOFJE57.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  useSlot
+} from "./chunk-ZTMKFZQ3.js";
+import "./chunk-2XPPBEYF.js";
+import {
+  Icon
+} from "./chunk-XAU7QFG3.js";
+import "./chunk-U7KURWW3.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-MPNSO7E6.js";
+import {
+  cn
+} from "./chunk-7Z2C2K7F.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-NZOFJE57.js.map

package/dist/AgentCodeSnippets-NZOFJE57.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-JPU3MFQ2.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  AgentMetricChart
+} from "./chunk-ZKNUMH2M.js";
+import "./chunk-ZTMKFZQ3.js";
+import "./chunk-2XPPBEYF.js";
+import "./chunk-XAU7QFG3.js";
+import "./chunk-U7KURWW3.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-MPNSO7E6.js";
+import "./chunk-7Z2C2K7F.js";
+export {
+  AgentMetricChart
+};
+//# sourceMappingURL=AgentMetricChart-JPU3MFQ2.js.map

package/dist/AgentOverview-EEBHJC32.js

@@ -0,0 +1,167 @@
+"use client";
+import {
+  useSlot
+} from "./chunk-ZTMKFZQ3.js";
+import "./chunk-2XPPBEYF.js";
+import {
+  Icon
+} from "./chunk-XAU7QFG3.js";
+import "./chunk-U7KURWW3.js";
+import "./chunk-M6MHLVSO.js";
+import "./chunk-MPNSO7E6.js";
+import {
+  cn
+} from "./chunk-7Z2C2K7F.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-EEBHJC32.js.map

package/dist/AgentOverview-EEBHJC32.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":[]}