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

package/dist/{chunk-H6WTY5PM.js → chunk-Q6TCT7ZJ.js}

@@ -1,10 +1,11 @@
 import {
+  getErrorMessage,
   useOptionalServer
-} from "./chunk-FQK2XVVE.js";
+} from "./chunk-PT4EENB3.js";
 import {
   ThemeContext,
   cn
-} from "./chunk-BWHOZFIV.js";
+} from "./chunk-LXJMINS6.js";
 
 // src/icons/Icon.tsx
 import { createElement, isValidElement, useContext } from "react";
@@ -26,6 +27,7 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronsUpDown,
   CircleAlert,
   CircleCheck,
   CircleX,
@@ -33,6 +35,7 @@ import {
   Code2,
   Copy,
   Cpu,
+  DollarSign,
   Download,
   Ellipsis,
   EllipsisVertical,
@@ -142,10 +145,12 @@ var defaults = {
   "chevron-down": ChevronDown,
   "chevron-left": ChevronLeft,
   "chevron-right": ChevronRight,
+  "chevrons-up-down": ChevronsUpDown,
   loader: Loader2,
   file: File,
   clone: Copy,
   copy: Copy,
+  "dollar-sign": DollarSign,
   bars: Menu,
   "panel-left-close": PanelLeftClose,
   "panel-left-open": PanelLeftOpen,
@@ -283,7 +288,7 @@ var baseClasses = "inline-flex cursor-pointer items-center justify-center whites
 var sidebarButtonRadiusClassName = "rounded-[0.75rem]";
 var sidebarRailButtonClassName = cn(
   sidebarButtonRadiusClassName,
-  "h-[3.375rem] w-[3.625rem] shrink-0 flex-col gap-1 whitespace-normal px-0.5 text-[0.625rem] font-normal leading-tight !justify-center shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text [&_svg]:size-3.5"
+  "h-[3.375rem] w-[4rem] shrink-0 flex-col gap-1 whitespace-normal px-0.5 text-[0.625rem] font-normal leading-tight !justify-center shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text [&_svg]:size-3.5"
 );
 function auiButtonClass({
   variant = "primary",
@@ -293,143 +298,6 @@ function auiButtonClass({
   return cn(baseClasses, variantClasses[variant], sizeClasses[size], className);
 }
 
-// src/utils/getErrorMessage.ts
-function isRecord(value) {
-  return value != null && typeof value === "object";
-}
-function readNonEmptyString(value) {
-  return typeof value === "string" && value.trim() !== "" ? value : void 0;
-}
-var LITERAL_ESCAPE_PATTERN = /\\(?:[nrtbfv0'"\\]|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{2})/;
-var REAL_CONTROL_PATTERN = /[\n\t\b\f\v]/;
-function decodeLiteralEscapes(text) {
-  let out = "";
-  for (let i = 0; i < text.length; i += 1) {
-    const char = text[i];
-    if (char !== "\\" || i + 1 >= text.length) {
-      out += char;
-      continue;
-    }
-    const next = text[i + 1];
-    switch (next) {
-      case "n":
-        out += "\n";
-        i += 1;
-        break;
-      case "t":
-        out += "	";
-        i += 1;
-        break;
-      case "r":
-        out += "\r";
-        i += 1;
-        break;
-      case "b":
-        out += "\b";
-        i += 1;
-        break;
-      case "f":
-        out += "\f";
-        i += 1;
-        break;
-      case "v":
-        out += "\v";
-        i += 1;
-        break;
-      case "0":
-        out += "\0";
-        i += 1;
-        break;
-      case "\\":
-        out += "\\";
-        i += 1;
-        break;
-      case '"':
-        out += '"';
-        i += 1;
-        break;
-      case "'":
-        out += "'";
-        i += 1;
-        break;
-      case "u": {
-        const hex = text.slice(i + 2, i + 6);
-        if (/^[0-9a-fA-F]{4}$/.test(hex)) {
-          out += String.fromCharCode(Number.parseInt(hex, 16));
-          i += 5;
-        } else {
-          out += char;
-        }
-        break;
-      }
-      case "x": {
-        const hex = text.slice(i + 2, i + 4);
-        if (/^[0-9a-fA-F]{2}$/.test(hex)) {
-          out += String.fromCharCode(Number.parseInt(hex, 16));
-          i += 3;
-        } else {
-          out += char;
-        }
-        break;
-      }
-      default:
-        out += char;
-        break;
-    }
-  }
-  return out;
-}
-function decodeErrorMessageEscapes(text) {
-  const normalized = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-  if (REAL_CONTROL_PATTERN.test(normalized) || !LITERAL_ESCAPE_PATTERN.test(normalized)) {
-    return normalized;
-  }
-  return decodeLiteralEscapes(normalized).replace(/\r\n/g, "\n").replace(/\r/g, "\n");
-}
-function messageFromErrorShaped(value) {
-  if (!isRecord(value)) return void 0;
-  const direct = readNonEmptyString(value.message);
-  if (direct != null) return direct;
-  if (isRecord(value.error)) {
-    return readNonEmptyString(value.error.message);
-  }
-  return void 0;
-}
-function stringifyError(error) {
-  if (typeof error === "string") return error;
-  if (isRecord(error)) {
-    try {
-      return JSON.stringify(error);
-    } catch {
-      return Object.prototype.toString.call(error);
-    }
-  }
-  return String(error);
-}
-function getErrorMessage(error, fallback) {
-  if (typeof error === "string") {
-    const trimmed = error.trim();
-    if (trimmed !== "") return decodeErrorMessageEscapes(error);
-    return fallback != null ? decodeErrorMessageEscapes(fallback) : decodeErrorMessageEscapes(error);
-  }
-  if (isRecord(error) && "body" in error) {
-    const fromBody = messageFromErrorShaped(error.body);
-    if (fromBody != null) return decodeErrorMessageEscapes(fromBody);
-    if (error.body != null) {
-      if (typeof error.body === "string") {
-        const trimmed = error.body.trim();
-        if (trimmed !== "") return decodeErrorMessageEscapes(error.body);
-      } else {
-        return stringifyError(error.body);
-      }
-    }
-  }
-  const fromShape = messageFromErrorShaped(error);
-  if (fromShape != null) return decodeErrorMessageEscapes(fromShape);
-  if (fallback != null) return decodeErrorMessageEscapes(fallback);
-  return stringifyError(error);
-}
-
 // src/atoms/PageHeader.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var pageHeaderTitleClassName = "text-text-primary min-w-0 truncate text-md font-semibold";
@@ -437,10 +305,7 @@ function PageHeader({ title, start, end, children, className }) {
   return /* @__PURE__ */ jsxs2(
     "header",
     {
-      className: cn(
-        "flex min-h-14 shrink-0 flex-wrap items-center gap-2 border-b border-border px-4 md:px-6",
-        className
-      ),
+      className: cn("flex min-h-14 shrink-0 flex-wrap items-center gap-2 border-b border-border px-4", className),
       children: [
         start,
         typeof title === "string" ? /* @__PURE__ */ jsx4("h1", { className: pageHeaderTitleClassName, children: title }) : title,
@@ -463,9 +328,8 @@ function useCompactLayout() {
 }
 
 // src/atoms/draft/DraftCatalogProvider.tsx
-import { createContext as createContext2, useCallback, useContext as useContext3, useEffect, useMemo, useRef, useState } from "react";
+import { createContext as createContext2, useCallback, useContext as useContext3, useEffect, useMemo, useState } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var MCP_CONNECTORS_PAGE_SIZE = 50;
 var DraftCatalogContext = createContext2(null);
 var IDLE_ENSURE = () => void 0;
 var IDLE_REFRESH = async () => void 0;
@@ -477,28 +341,6 @@ function toConnectorLogos(entries) {
   }
   return logos;
 }
-function appendConnectors({
-  previous,
-  next
-}) {
-  if (next.length === 0) return previous;
-  const seen = new Set(previous.map((connector) => connector.id));
-  const appended = next.filter((connector) => !seen.has(connector.id));
-  return appended.length === 0 ? previous : [...previous, ...appended];
-}
-async function fetchMcpPage({
-  server,
-  pageToken
-}) {
-  if (server.listMcp != null) {
-    return server.listMcp({
-      limit: MCP_CONNECTORS_PAGE_SIZE,
-      ...pageToken === void 0 ? {} : { pageToken }
-    });
-  }
-  const data = await server.getMcp();
-  return { data };
-}
 function DraftCatalogProvider({ children }) {
   const server = useOptionalServer();
   const existing = useContext3(DraftCatalogContext);
@@ -513,74 +355,37 @@ function DraftCatalogStore({ server, children }) {
   const [skills, setSkills] = useState([]);
   const [connectors, setConnectors] = useState([]);
   const [connectorLogos, setConnectorLogos] = useState(EMPTY_LOGOS);
-  const [connectorsNextPageToken, setConnectorsNextPageToken] = useState(void 0);
-  const [connectorsLoadMoreFailed, setConnectorsLoadMoreFailed] = useState(false);
-  const [connectorsLoadingMore, setConnectorsLoadingMore] = useState(false);
   const [completedEpoch, setCompletedEpoch] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const connectorsNextPageTokenRef = useRef(connectorsNextPageToken);
-  const connectorsLoadingMoreRef = useRef(connectorsLoadingMore);
-  const loadMoreFailedRef = useRef(false);
-  connectorsNextPageTokenRef.current = connectorsNextPageToken;
-  connectorsLoadingMoreRef.current = connectorsLoadingMore;
   const ensureLoaded = useCallback(() => {
     setRequestEpoch((current) => current ?? 0);
   }, []);
   const refresh = useCallback(() => {
-    loadMoreFailedRef.current = false;
-    setConnectorsLoadMoreFailed(false);
     setRequestEpoch((current) => (current ?? -1) + 1);
   }, []);
   const refreshConnectors = useCallback(async () => {
     if (!server) return;
     setLoading(true);
     setError(null);
-    loadMoreFailedRef.current = false;
-    setConnectorsLoadMoreFailed(false);
     try {
-      const page = await fetchMcpPage({ server });
-      setConnectors(page.data);
-      setConnectorsNextPageToken(page.nextPageToken);
+      setConnectors(await server.getMcp());
     } catch (reason) {
       setError(getErrorMessage(reason, "Failed to load connectors."));
     } finally {
       setLoading(false);
     }
   }, [server]);
-  const loadMoreConnectors = useCallback(() => {
-    if (!server) return;
-    const pageToken = connectorsNextPageTokenRef.current;
-    if (pageToken == null || pageToken.length === 0 || connectorsLoadingMoreRef.current) return;
-    setConnectorsLoadMoreFailed(false);
-    setConnectorsLoadingMore(true);
-    void fetchMcpPage({ server, pageToken }).then((page) => {
-      setConnectors((previous) => appendConnectors({ previous, next: page.data }));
-      setConnectorsNextPageToken(page.nextPageToken);
-      if (loadMoreFailedRef.current) {
-        loadMoreFailedRef.current = false;
-        setError(null);
-      }
-    }).catch((reason) => {
-      loadMoreFailedRef.current = true;
-      setConnectorsLoadMoreFailed(true);
-      setError(getErrorMessage(reason, "Failed to load more connectors."));
-    }).finally(() => {
-      setConnectorsLoadingMore(false);
-    });
-  }, [server]);
   useEffect(() => {
     if (requestEpoch === null || !server) return;
     let cancelled = false;
     setLoading(true);
     setError(null);
-    loadMoreFailedRef.current = false;
-    setConnectorsLoadMoreFailed(false);
     const connectorCatalog = server.catalog?.connectorCatalog;
     void Promise.allSettled([
       server.getModels(),
       server.getSkills(),
-      fetchMcpPage({ server }),
+      server.getMcp(),
       connectorCatalog ? connectorCatalog.getConnectorCatalog() : Promise.resolve([])
     ]).then(([modelsResult, skillsResult, mcpResult, catalogResult]) => {
       if (cancelled) return;
@@ -597,8 +402,7 @@ function DraftCatalogStore({ server, children }) {
         errors.push(getErrorMessage(skillsResult.reason, "Failed to load skills."));
       }
       if (mcpResult.status === "fulfilled") {
-        setConnectors(mcpResult.value.data);
-        setConnectorsNextPageToken(mcpResult.value.nextPageToken);
+        setConnectors(mcpResult.value);
       } else {
         errors.push(getErrorMessage(mcpResult.reason, "Failed to load connectors."));
       }
@@ -610,7 +414,6 @@ function DraftCatalogStore({ server, children }) {
       cancelled = true;
     };
   }, [requestEpoch, server]);
-  const connectorsHasMore = connectorsNextPageToken != null && connectorsNextPageToken.length > 0;
   const loaded = requestEpoch !== null && completedEpoch === requestEpoch;
   const value = useMemo(
     () => ({
@@ -619,16 +422,12 @@ function DraftCatalogStore({ server, children }) {
       skills,
       connectors,
       connectorLogos,
-      connectorsHasMore,
-      connectorsLoadMoreFailed,
-      connectorsLoadingMore,
       loaded,
       loading,
       error,
       ensureLoaded,
       refresh,
-      refreshConnectors,
-      loadMoreConnectors
+      refreshConnectors
     }),
     [
       server,
@@ -636,16 +435,12 @@ function DraftCatalogStore({ server, children }) {
       skills,
       connectors,
       connectorLogos,
-      connectorsHasMore,
-      connectorsLoadMoreFailed,
-      connectorsLoadingMore,
       loaded,
       loading,
       error,
       ensureLoaded,
       refresh,
-      refreshConnectors,
-      loadMoreConnectors
+      refreshConnectors
     ]
   );
   return /* @__PURE__ */ jsx6(DraftCatalogContext.Provider, { value, children });
@@ -658,16 +453,12 @@ function useDraftCatalog() {
       skills: [],
       connectors: [],
       connectorLogos: EMPTY_LOGOS,
-      connectorsHasMore: false,
-      connectorsLoadMoreFailed: false,
-      connectorsLoadingMore: false,
       loaded: false,
       loading: false,
       error: null,
       ensureLoaded: IDLE_ENSURE,
       refresh: IDLE_ENSURE,
-      refreshConnectors: IDLE_REFRESH,
-      loadMoreConnectors: IDLE_ENSURE
+      refreshConnectors: IDLE_REFRESH
     };
   }
   return ctx;
@@ -680,7 +471,6 @@ export {
   sidebarButtonRadiusClassName,
   sidebarRailButtonClassName,
   auiButtonClass,
-  getErrorMessage,
   pageHeaderTitleClassName,
   PageHeader,
   CompactLayoutProvider,
@@ -688,4 +478,4 @@ export {
   DraftCatalogProvider,
   useDraftCatalog
 };
-//# sourceMappingURL=chunk-H6WTY5PM.js.map
+//# sourceMappingURL=chunk-Q6TCT7ZJ.js.map

package/dist/chunk-Q6TCT7ZJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/icons/Icon.tsx","../src/icons/IconRegistry.tsx","../src/atoms/primitives/Spinner.tsx","../src/atoms/lib/buttonClasses.ts","../src/atoms/PageHeader.tsx","../src/atoms/lib/CompactLayoutContext.tsx","../src/atoms/draft/DraftCatalogProvider.tsx"],"sourcesContent":["import { createElement, isValidElement, useContext, type CSSProperties, type ReactNode } from 'react';\n\nimport { cn } from '../atoms/lib/cn.js';\nimport { ThemeContext } from '../theme/ThemeProvider.js';\nimport type { IconComponent, IconEntry, IconProps as ThemeIconProps } from '../theme/types.js';\nimport { lookupIcon, resolveIconName } from './IconRegistry.js';\n\nexport type IconProps = ThemeIconProps & {\n  name: string | readonly string[];\n};\n\ntype IconRenderProps = {\n  className?: string;\n  style?: CSSProperties;\n  size?: string | number;\n  width?: string | number;\n  height?: string | number;\n  role?: string;\n} & Pick<IconProps, 'aria-hidden' | 'aria-label' | 'data-testid'>;\n\nfunction isComponent(entry: IconEntry): entry is IconComponent {\n  if (typeof entry === 'function') return true;\n  // Lucide (and other) icons are forwardRef objects, not functions\n  return (\n    typeof entry === 'object' &&\n    entry !== null &&\n    !isValidElement(entry) &&\n    !Array.isArray(entry) &&\n    '$$typeof' in entry\n  );\n}\n\nfunction renderEntry(entry: IconEntry, props: IconRenderProps): ReactNode {\n  if (isComponent(entry)) {\n    const { size, className, style, ...aria } = props;\n    return createElement(entry, {\n      className: cn('inline-block shrink-0', className),\n      style,\n      size,\n      width: size,\n      height: size,\n      'aria-hidden': aria['aria-label'] ? undefined : (aria['aria-hidden'] ?? true),\n      'aria-label': aria['aria-label'],\n      ...(aria['data-testid'] === undefined ? {} : { 'data-testid': aria['data-testid'] }),\n      role: aria['aria-label'] ? 'img' : undefined,\n    });\n  }\n  return entry;\n}\n\nexport function Icon({ name, className, style, size = '1em', ...aria }: IconProps) {\n  const themeIcons = useContext(ThemeContext)?.icons;\n  const resolved = resolveIconName(name);\n  const entry = lookupIcon(resolved, themeIcons);\n  if (!entry) return null;\n  return <>{renderEntry(entry, { className, style, size, ...aria })}</>;\n}\n\nexport function useIcon(name: string | readonly string[]): IconEntry | undefined {\n  const themeIcons = useContext(ThemeContext)?.icons;\n  return lookupIcon(resolveIconName(name), themeIcons);\n}\n","import {\n  Archive,\n  ArrowDown,\n  ArrowLeft,\n  ArrowUp,\n  BookOpen,\n  Bot,\n  Box,\n  Brain,\n  Calendar,\n  CalendarClock,\n  CalendarPlus,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsUpDown,\n  CircleAlert,\n  CircleCheck,\n  CircleX,\n  Clock,\n  Code2,\n  Copy,\n  Cpu,\n  DollarSign,\n  Download,\n  Ellipsis,\n  EllipsisVertical,\n  ExternalLink,\n  File,\n  Github,\n  GripVertical,\n  History,\n  Info,\n  LibraryBig,\n  Lightbulb,\n  LineChart,\n  Link2,\n  ListChecks,\n  ListFilter,\n  ListOrdered,\n  Loader2,\n  Lock,\n  LogOut,\n  Maximize2,\n  Menu,\n  MessageSquareText,\n  Minimize2,\n  Moon,\n  PanelLeftClose,\n  PanelLeftOpen,\n  Paperclip,\n  Pause,\n  Pencil,\n  Play,\n  Plug,\n  Plus,\n  RotateCw,\n  Save,\n  Search,\n  Settings,\n  SlidersHorizontal,\n  Sparkle,\n  SquareArrowOutUpRight,\n  SquarePen,\n  Sun,\n  Terminal,\n  Trash2,\n  TriangleAlert,\n  Wrench,\n  X,\n} from 'lucide-react';\nimport type { SVGProps } from 'react';\n\nimport type { IconEntry, IconMap } from '../theme/types.js';\n\n/** Lucide `broom` (https://lucide.dev/icons/broom) — not in lucide-react 0.x. */\nfunction Broom({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: string | number }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={size}\n      height={size}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...props}\n    >\n      <path d=\"M13.5 10.5 22 2\" />\n      <path d=\"M14.734 13.841a2 2 0 00-.314-2.42L12.58 9.58a2 2 0 00-2.421-.314l-7.657 4.461A1 1 0 002.3 15.3l6.403 6.403a1 1 0 001.571-.204z\" />\n      <path d=\"m5 18 2-2\" />\n      <path d=\"m7.699 10.7 5.602 5.601\" />\n    </svg>\n  );\n}\n\nconst registry = new Map<string, IconEntry>();\n\nexport function registerIcon(name: string, icon: IconEntry): void {\n  registry.set(name, icon);\n}\n\nexport function registerIcons(icons: IconMap): void {\n  for (const [name, icon] of Object.entries(icons)) {\n    registry.set(name, icon);\n  }\n}\n\nexport function getIcon(name: string): IconEntry | undefined {\n  return registry.get(name);\n}\n\nexport function resolveIconName(icon: string | readonly string[]): string {\n  if (typeof icon === 'string') return icon;\n  // e.g. [\"far\", \"clone\"] → \"clone\"\n  return icon[icon.length - 1] ?? '';\n}\n\nconst defaults: Record<string, IconEntry> = {\n  paperclip: Paperclip,\n  'arrow-up': ArrowUp,\n  'arrow-down': ArrowDown,\n  'arrow-left': ArrowLeft,\n  xmark: X,\n  check: Check,\n  pencil: Pencil,\n  play: Play,\n  pause: Pause,\n  calendar: Calendar,\n  'calendar-clock': CalendarClock,\n  'calendar-plus': CalendarPlus,\n  'grip-vertical': GripVertical,\n  'square-pen': SquarePen,\n  'rotate-right': RotateCw,\n  broom: Broom,\n  ellipsis: Ellipsis,\n  'ellipsis-vertical': EllipsisVertical,\n  trash: Trash2,\n  'box-archive': Archive,\n  'clock-rotate-left': History,\n  'circle-exclamation': CircleAlert,\n  info: Info,\n  'triangle-exclamation': TriangleAlert,\n  'chevron-down': ChevronDown,\n  'chevron-left': ChevronLeft,\n  'chevron-right': ChevronRight,\n  'chevrons-up-down': ChevronsUpDown,\n  loader: Loader2,\n  file: File,\n  clone: Copy,\n  copy: Copy,\n  'dollar-sign': DollarSign,\n  bars: Menu,\n  'panel-left-close': PanelLeftClose,\n  'panel-left-open': PanelLeftOpen,\n  plus: Plus,\n  sun: Sun,\n  moon: Moon,\n  settings: Settings,\n  sliders: SlidersHorizontal,\n  'log-out': LogOut,\n  search: Search,\n  clock: Clock,\n  'circle-check': CircleCheck,\n  'circle-xmark': CircleX,\n  'oauth-success': CircleCheck,\n  'oauth-error': CircleX,\n  'oauth-loading': Loader2,\n  'welcome-sparkle': Sparkle,\n  robot: Bot,\n  bot: Bot,\n  'library-big': LibraryBig,\n  'message-square-text': MessageSquareText,\n  'book-open': BookOpen,\n  funnel: ListFilter,\n  plug: Plug,\n  'list-check': ListChecks,\n  lock: Lock,\n  lightbulb: Lightbulb,\n  link: Link2,\n  wrench: Wrench,\n  cpu: Cpu,\n  cube: Box,\n  'list-ol': ListOrdered,\n  download: Download,\n  save: Save,\n  brain: Brain,\n  terminal: Terminal,\n  code: Code2,\n  chart: LineChart,\n  expand: Maximize2,\n  'expand-alt': Maximize2,\n  compress: Minimize2,\n  'external-link': ExternalLink,\n  'square-arrow-out-up-right': SquareArrowOutUpRight,\n  github: Github,\n};\n\nfor (const [name, icon] of Object.entries(defaults)) {\n  registry.set(name, icon);\n}\n\n/** Merge host `theme.icons` over the registry for a single lookup (does not mutate). */\nexport function lookupIcon(name: string, themeIcons?: IconMap): IconEntry | undefined {\n  if (themeIcons && name in themeIcons) {\n    return themeIcons[name];\n  }\n  return registry.get(name);\n}\n","import React from 'react';\n\nimport { cn } from '../lib/cn.js';\n\nexport type SpinnerProps = React.SVGProps<SVGSVGElement> & {\n  size?: number;\n};\n\nexport function Spinner({ size = 16, className, ...props }: SpinnerProps) {\n  const r = (size / 2) * 0.75;\n  const cx = size / 2;\n  const circumference = 2 * Math.PI * r;\n\n  return (\n    <svg\n      role=\"status\"\n      aria-label=\"Loading\"\n      width={size}\n      height={size}\n      viewBox={`0 0 ${size} ${size}`}\n      fill=\"none\"\n      className={cn('animate-spin', className)}\n      {...props}\n    >\n      <circle\n        cx={cx}\n        cy={cx}\n        r={r}\n        stroke=\"currentColor\"\n        strokeWidth={2}\n        strokeLinecap=\"round\"\n        strokeDasharray={`${circumference * 0.75} ${circumference * 0.25}`}\n        opacity={0.8}\n      />\n    </svg>\n  );\n}\n","import { cn } from './cn.js';\n\nexport type AuiButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';\nexport type AuiButtonSize = 'large' | 'small' | 'icon';\n\nconst variantClasses: Record<AuiButtonVariant, string> = {\n  primary: 'bg-primary-button-bg text-primary-button-text shadow hover:bg-primary-button-hover',\n  secondary:\n    'border border-input-border bg-secondary-button-bg text-secondary-button-text hover:bg-secondary-button-hover',\n  ghost: 'bg-ghost-button-bg text-ghost-button-text hover:bg-ghost-button-hover',\n  destructive: 'bg-failure-bg text-failure-text shadow-sm hover:bg-failure-bg/90',\n};\n\n/** Glyph sizes match the shared design-system Button (`iconSizeMap`: large 0.875rem, small 0.75rem). */\nconst sizeClasses: Record<AuiButtonSize, string> = {\n  large: 'h-8 gap-2 px-2.5 text-sm [&_svg]:size-3.5',\n  small: 'h-6 gap-1 px-1.5 text-xs [&_svg]:size-3',\n  icon: 'h-8 w-8 shrink-0 gap-0 p-0 [&_svg]:size-3.5',\n};\n\nconst baseClasses =\n  'inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50';\n\n/** Sidebar / rail nav control corner radius: 12px. */\nexport const sidebarButtonRadiusClassName = 'rounded-[0.75rem]';\n\n/** Compact sidebar rail control: 66×54px → 4.125rem × 3.375rem. */\nexport const sidebarRailButtonClassName = cn(\n  sidebarButtonRadiusClassName,\n  'h-[3.375rem] w-[4rem] shrink-0 flex-col gap-1 whitespace-normal px-0.5 text-[0.625rem] font-normal leading-tight !justify-center shadow-none hover:bg-secondary-button-hover hover:text-ghost-button-text [&_svg]:size-3.5',\n);\n\n/** Shared Button / native `<button>` className helper (SDK utilities are layered). */\nexport function auiButtonClass({\n  variant = 'primary',\n  size = 'large',\n  className,\n}: {\n  variant?: AuiButtonVariant;\n  size?: AuiButtonSize;\n  className?: string;\n} = {}): string {\n  return cn(baseClasses, variantClasses[variant], sizeClasses[size], className);\n}\n","'use client';\n\nimport type { ReactNode } from 'react';\n\nimport { cn } from './lib/cn.js';\n\n/** Shared title styles for page / chat chrome headers. */\nexport const pageHeaderTitleClassName = 'text-text-primary min-w-0 truncate text-md font-semibold';\n\nexport type PageHeaderProps = {\n  /** Page name, or a custom title node (e.g. `NamedAgentHeaderLabel`). Strings use the shared h1 styles. */\n  title?: ReactNode;\n  /** Leading chrome (back / menu). */\n  start?: ReactNode;\n  /** Trailing actions; pushed to the end. */\n  end?: ReactNode;\n  /** Extra content between title and end (prefer `start` / `end` when possible). */\n  children?: ReactNode;\n  className?: string;\n};\n\n/** Shared shell/page header bar used by chat chrome and list pages.\n * `min-h-14` keeps a single-row bar aligned with Agent Config; wrapping end actions can grow the bar.\n */\nexport function PageHeader({ title, start, end, children, className }: PageHeaderProps) {\n  return (\n    <header\n      className={cn('flex min-h-14 shrink-0 flex-wrap items-center gap-2 border-b border-border px-4', className)}\n    >\n      {start}\n      {typeof title === 'string' ? <h1 className={pageHeaderTitleClassName}>{title}</h1> : title}\n      {children}\n      {end != null ? <div className=\"ml-auto flex min-w-0 flex-wrap items-center gap-2\">{end}</div> : null}\n    </header>\n  );\n}\n","'use client';\n\nimport { createContext, useContext, type ReactNode } from 'react';\n\nconst CompactLayoutContext = createContext(false);\n\nexport function CompactLayoutProvider({ children }: { children: ReactNode }) {\n  return <CompactLayoutContext.Provider value>{children}</CompactLayoutContext.Provider>;\n}\n\nexport function useCompactLayout() {\n  return useContext(CompactLayoutContext);\n}\n","'use client';\n\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';\n\nimport { useOptionalServer } from '../../server/ServerContext.js';\nimport type {\n  AgentSkill,\n  AgentUIServer,\n  ConnectorCatalogEntry,\n  ConnectorState,\n  ModelSelection,\n} from '../../server/types.js';\nimport { getErrorMessage } from '../../utils/getErrorMessage.js';\n\ntype DraftCatalogValue = {\n  models: ModelSelection[];\n  skills: AgentSkill[];\n  connectors: ConnectorState[];\n  /** Connector logo URL keyed by connector name, sourced from the discovery catalog. */\n  connectorLogos: Record<string, string>;\n  loaded: boolean;\n  loading: boolean;\n  error: string | null;\n  /** Kick off catalog fetch (idempotent). Call when a picker opens. */\n  ensureLoaded: () => void;\n  /** Reload all collections after settings mutate catalog-backed configuration. */\n  refresh: () => void;\n  /** Refresh connector auth state without reloading unrelated catalogs. */\n  refreshConnectors: () => Promise<void>;\n};\n\ntype DraftCatalogContextValue = DraftCatalogValue & {\n  server: AgentUIServer | null;\n};\n\nconst DraftCatalogContext = createContext<DraftCatalogContextValue | null>(null);\n\nconst IDLE_ENSURE = () => undefined;\nconst IDLE_REFRESH = async () => undefined;\nconst EMPTY_LOGOS: Record<string, string> = {};\n\nfunction toConnectorLogos(entries: ConnectorCatalogEntry[]): Record<string, string> {\n  const logos: Record<string, string> = {};\n  for (const entry of entries) {\n    if (entry.logo) logos[entry.name] = entry.logo;\n  }\n  return logos;\n}\n\nexport function DraftCatalogProvider({ children }: { children: ReactNode }) {\n  const server = useOptionalServer();\n  const existing = useContext(DraftCatalogContext);\n  if (existing?.server === server) {\n    return children;\n  }\n  return <DraftCatalogStore server={server}>{children}</DraftCatalogStore>;\n}\n\nfunction DraftCatalogStore({ server, children }: { server: AgentUIServer | null; children: ReactNode }) {\n  const [requestEpoch, setRequestEpoch] = useState<number | null>(null);\n  const [models, setModels] = useState<ModelSelection[]>([]);\n  const [skills, setSkills] = useState<AgentSkill[]>([]);\n  const [connectors, setConnectors] = useState<ConnectorState[]>([]);\n  const [connectorLogos, setConnectorLogos] = useState<Record<string, string>>(EMPTY_LOGOS);\n  const [completedEpoch, setCompletedEpoch] = useState<number | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const ensureLoaded = useCallback(() => {\n    setRequestEpoch(current => current ?? 0);\n  }, []);\n\n  const refresh = useCallback(() => {\n    setRequestEpoch(current => (current ?? -1) + 1);\n  }, []);\n\n  const refreshConnectors = useCallback(async () => {\n    if (!server) return;\n    setLoading(true);\n    setError(null);\n    try {\n      setConnectors(await server.getMcp());\n    } catch (reason: unknown) {\n      setError(getErrorMessage(reason, 'Failed to load connectors.'));\n    } finally {\n      setLoading(false);\n    }\n  }, [server]);\n\n  useEffect(() => {\n    if (requestEpoch === null || !server) return;\n    let cancelled = false;\n    setLoading(true);\n    setError(null);\n    // Settle each list alone so one failing picker does not blank the others.\n    // Logos are cosmetic: a missing catalog port or a failed fetch just falls back to icons.\n    const connectorCatalog = server.catalog?.connectorCatalog;\n    void Promise.allSettled([\n      server.getModels(),\n      server.getSkills(),\n      server.getMcp(),\n      connectorCatalog ? connectorCatalog.getConnectorCatalog() : Promise.resolve([]),\n    ]).then(([modelsResult, skillsResult, mcpResult, catalogResult]) => {\n      if (cancelled) return;\n      setConnectorLogos(catalogResult.status === 'fulfilled' ? toConnectorLogos(catalogResult.value) : EMPTY_LOGOS);\n      const errors: string[] = [];\n      if (modelsResult.status === 'fulfilled') {\n        setModels(modelsResult.value);\n      } else {\n        errors.push(getErrorMessage(modelsResult.reason, 'Failed to load models.'));\n      }\n      if (skillsResult.status === 'fulfilled') {\n        setSkills(skillsResult.value);\n      } else {\n        errors.push(getErrorMessage(skillsResult.reason, 'Failed to load skills.'));\n      }\n      if (mcpResult.status === 'fulfilled') {\n        setConnectors(mcpResult.value);\n      } else {\n        errors.push(getErrorMessage(mcpResult.reason, 'Failed to load connectors.'));\n      }\n      setError(errors[0] ?? null);\n      setCompletedEpoch(requestEpoch);\n      setLoading(false);\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [requestEpoch, server]);\n\n  const loaded = requestEpoch !== null && completedEpoch === requestEpoch;\n  const value = useMemo(\n    () => ({\n      server,\n      models,\n      skills,\n      connectors,\n      connectorLogos,\n      loaded,\n      loading,\n      error,\n      ensureLoaded,\n      refresh,\n      refreshConnectors,\n    }),\n    [\n      server,\n      models,\n      skills,\n      connectors,\n      connectorLogos,\n      loaded,\n      loading,\n      error,\n      ensureLoaded,\n      refresh,\n      refreshConnectors,\n    ],\n  );\n\n  return <DraftCatalogContext.Provider value={value}>{children}</DraftCatalogContext.Provider>;\n}\n\nexport function useDraftCatalog(): DraftCatalogValue {\n  const ctx = useContext(DraftCatalogContext);\n  if (ctx == null) {\n    return {\n      models: [],\n      skills: [],\n      connectors: [],\n      connectorLogos: EMPTY_LOGOS,\n      loaded: false,\n      loading: false,\n      error: null,\n      ensureLoaded: IDLE_ENSURE,\n      refresh: IDLE_ENSURE,\n      refreshConnectors: IDLE_REFRESH,\n    };\n  }\n  return ctx;\n}\n"],"mappings":"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","names":["jsx","jsx","jsx","jsxs","useContext","jsx","createContext","useContext","jsx","createContext","useContext"]}

package/dist/{chunk-5I2COQNL.js → chunk-XLFOXQKZ.js}

@@ -2,7 +2,7 @@ import {
   formatCostUsd,
   formatDurationMs,
   useThemeMode
-} from "./chunk-YQO2NMJ3.js";
+} from "./chunk-2O5EJ6QS.js";
 
 // src/atoms/agent-details/AgentMetricChart.tsx
 import {
@@ -18,8 +18,8 @@ import { useMemo } from "react";
 import { Line } from "react-chartjs-2";
 import { jsx, jsxs } from "react/jsx-runtime";
 ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Legend, Tooltip);
-var LIGHT_COLORS = ["#2563eb", "#16a34a", "#9333ea", "#ea580c", "#0891b2"];
-var DARK_COLORS = ["#60a5fa", "#4ade80", "#c084fc", "#fb923c", "#22d3ee"];
+var LIGHT_COLORS = ["#6366F1", "#2563eb", "#0EA5E9"];
+var DARK_COLORS = ["#6366F1", "#60a5fa", "#38BDF8"];
 var numberFormatter = new Intl.NumberFormat(void 0, { maximumFractionDigits: 4 });
 var timestampFormatter = new Intl.DateTimeFormat(void 0, {
   month: "short",
@@ -36,10 +36,10 @@ function formatTimestamp(timestamp) {
   const date = new Date(timestamp);
   return Number.isNaN(date.getTime()) ? timestamp : timestampFormatter.format(date);
 }
-function AgentMetricChart({ graph, definition, error }) {
+function AgentMetricChart({ graph, definition, error, colorIndex = 0 }) {
   const mode = useThemeMode();
   const colors = mode === "dark" ? DARK_COLORS : LIGHT_COLORS;
-  const axisColor = mode === "dark" ? "#a1a1aa" : "#71717a";
+  const axisColor = mode === "dark" ? "#71717a" : "#a1a1aa";
   const gridColor = mode === "dark" ? "#27272a" : "#e4e4e7";
   const labels = useMemo(
     () => graph == null ? [] : [...new Set(graph.graphLines.flatMap((line) => line.values.map((point) => point.timestamp)))].sort(),
@@ -50,21 +50,23 @@ function AgentMetricChart({ graph, definition, error }) {
       labels: labels.map(formatTimestamp),
       datasets: graph?.graphLines.map((line, index) => {
         const valuesByTimestamp = new Map(line.values.map((point) => [point.timestamp, point.value]));
-        const color = colors[index % colors.length];
+        const color = colors[(colorIndex + index) % colors.length];
         return {
           label: line.name,
           data: labels.map((timestamp) => valuesByTimestamp.get(timestamp) ?? null),
           borderColor: color,
           backgroundColor: color,
-          pointRadius: 2,
-          pointHoverRadius: 4,
+          pointRadius: 0,
+          pointHoverRadius: 0,
           borderWidth: 2,
-          tension: 0.25,
+          borderCapStyle: "butt",
+          borderJoinStyle: "miter",
+          tension: 0,
           spanGaps: true
         };
       }) ?? []
     }),
-    [colors, graph, labels]
+    [colorIndex, colors, graph, labels]
   );
   const options = useMemo(
     () => ({
@@ -116,4 +118,4 @@ function AgentMetricChart({ graph, definition, error }) {
 export {
   AgentMetricChart
 };
-//# sourceMappingURL=chunk-5I2COQNL.js.map
+//# sourceMappingURL=chunk-XLFOXQKZ.js.map

package/dist/chunk-XLFOXQKZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/agent-details/AgentMetricChart.tsx"],"sourcesContent":["'use client';\n\nimport {\n  CategoryScale,\n  Chart as ChartJS,\n  Legend,\n  LinearScale,\n  LineElement,\n  PointElement,\n  Tooltip,\n  type ChartData,\n  type ChartOptions,\n} from 'chart.js';\nimport { useMemo, type ComponentType } from 'react';\nimport { Line } from 'react-chartjs-2';\n\nimport { useThemeMode } from '../../theme/SlotsProvider.js';\nimport { formatCostUsd, formatDurationMs } from '../../utils/sessionDisplayFormat.js';\nimport type { AgentMetricChartProps } from './types.js';\n\nChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Legend, Tooltip);\n\nconst LIGHT_COLORS = ['#6366F1', '#2563eb', '#0EA5E9'];\nconst DARK_COLORS = ['#6366F1', '#60a5fa', '#38BDF8'];\nconst numberFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 4 });\nconst timestampFormatter = new Intl.DateTimeFormat(undefined, {\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: '2-digit',\n});\n\nfunction formatValue(value: number, unit: string): string {\n  if (unit === '$') return formatCostUsd(value);\n  if (unit === 'ms') return formatDurationMs(value);\n  return `${numberFormatter.format(value)}${unit === 'count' || unit.length === 0 ? '' : ` ${unit}`}`;\n}\n\nfunction formatTimestamp(timestamp: string): string {\n  const date = new Date(timestamp);\n  return Number.isNaN(date.getTime()) ? timestamp : timestampFormatter.format(date);\n}\n\nexport function AgentMetricChart({ graph, definition, error, colorIndex = 0 }: AgentMetricChartProps) {\n  const mode = useThemeMode();\n  const colors = mode === 'dark' ? DARK_COLORS : LIGHT_COLORS;\n  const axisColor = mode === 'dark' ? '#71717a' : '#a1a1aa';\n  const gridColor = mode === 'dark' ? '#27272a' : '#e4e4e7';\n  const labels = useMemo(\n    () =>\n      graph == null\n        ? []\n        : [...new Set(graph.graphLines.flatMap(line => line.values.map(point => point.timestamp)))].sort(),\n    [graph],\n  );\n  const data = useMemo<ChartData<'line', Array<number | null>, string>>(\n    () => ({\n      labels: labels.map(formatTimestamp),\n      datasets:\n        graph?.graphLines.map((line, index) => {\n          const valuesByTimestamp = new Map(line.values.map(point => [point.timestamp, point.value]));\n          const color = colors[(colorIndex + index) % colors.length];\n          return {\n            label: line.name,\n            data: labels.map(timestamp => valuesByTimestamp.get(timestamp) ?? null),\n            borderColor: color,\n            backgroundColor: color,\n            pointRadius: 0,\n            pointHoverRadius: 0,\n            borderWidth: 2,\n            borderCapStyle: 'butt',\n            borderJoinStyle: 'miter',\n            tension: 0,\n            spanGaps: true,\n          };\n        }) ?? [],\n    }),\n    [colorIndex, colors, graph, labels],\n  );\n  const options = useMemo<ChartOptions<'line'>>(\n    () => ({\n      responsive: true,\n      maintainAspectRatio: false,\n      animation: false,\n      interaction: { intersect: false, mode: 'index' },\n      plugins: {\n        legend: {\n          display: (graph?.graphLines.length ?? 0) > 1,\n          labels: { color: axisColor, boxWidth: 10, boxHeight: 2 },\n        },\n        tooltip: {\n          callbacks: {\n            label: context => {\n              const value = context.parsed.y;\n              return `${context.dataset.label ?? ''}: ${value == null ? '—' : formatValue(value, graph?.unit ?? '')}`;\n            },\n          },\n        },\n      },\n      scales: {\n        x: {\n          grid: { display: false },\n          border: { color: gridColor },\n          ticks: { color: axisColor, maxRotation: 0, autoSkip: true, maxTicksLimit: 8 },\n        },\n        y: {\n          beginAtZero: true,\n          grid: { color: gridColor },\n          border: { display: false },\n          ticks: {\n            color: axisColor,\n            callback: value => formatValue(Number(value), graph?.unit ?? ''),\n          },\n        },\n      },\n    }),\n    [axisColor, graph, gridColor],\n  );\n  const hasData = graph?.graphLines.some(line => line.values.length > 0) === true;\n\n  return (\n    <section className=\"min-w-0 rounded-lg border border-border bg-card-bg p-4\" data-slot=\"agent-metric-chart\">\n      <h3 className=\"text-sm font-semibold text-text-primary\">{graph?.displayName ?? definition.displayName}</h3>\n      <p className=\"mt-1 text-xs text-text-secondary\">{graph?.description ?? definition.description}</p>\n      <div className=\"mt-4 h-64\">\n        {error != null ? (\n          <div className=\"flex h-full items-center justify-center text-sm text-failure-bg\">{error}</div>\n        ) : hasData ? (\n          <Line data={data} options={options} />\n        ) : (\n          <div className=\"flex h-full items-center justify-center text-sm text-text-secondary\">No data</div>\n        )}\n      </div>\n    </section>\n  );\n}\n\ndeclare module '../../theme/SlotsProvider.js' {\n  interface AtomSlots {\n    AgentMetricChart: ComponentType<AgentMetricChartProps>;\n  }\n}\n"],"mappings":"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","names":[]}