@vadimcomanescu/nadicode-design-system 4.0.10 → 5.0.0

package/dist/chunk-KA44DDCB.js

@@ -0,0 +1,42 @@
+import { m, motionSpring } from './chunk-PD2YEH3H.js';
+import { ArrowRightIcon } from './chunk-T7H53CK2.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useReducedMotion } from 'motion/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AgentChip = ({ agent }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  agent.avatar && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: agent.avatar }),
+  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: agent.name })
+] });
+function HandoffIndicator({ className, fromAgent, toAgent, reason, ref, ...props }) {
+  const prefersReduced = useReducedMotion();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex flex-col items-center gap-1.5 rounded-lg border border-border glass-panel p-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(AgentChip, { agent: fromAgent }),
+          /* @__PURE__ */ jsx(
+            m.div,
+            {
+              initial: prefersReduced ? void 0 : { x: -6, opacity: 0 },
+              animate: prefersReduced ? void 0 : { x: 0, opacity: 1 },
+              transition: prefersReduced ? void 0 : motionSpring.snappy,
+              children: /* @__PURE__ */ jsx(ArrowRightIcon, { size: 18, className: "text-accent" })
+            }
+          ),
+          /* @__PURE__ */ jsx(AgentChip, { agent: toAgent })
+        ] }),
+        !!reason && /* @__PURE__ */ jsx("span", { className: "text-xs text-text-tertiary", children: reason })
+      ]
+    }
+  );
+}
+
+export { HandoffIndicator };

package/dist/chunk-KANK5FAG.js

@@ -0,0 +1,150 @@
+import { Typography } from './chunk-Q7PCHHVJ.js';
+import { Textarea } from './chunk-4OBE2FS2.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WH62BE24.js';
+import { Heading } from './chunk-UXX6HHPS.js';
+import { FieldSet, Field, FieldLabel, FieldDescription, FieldError } from './chunk-RX5EUODB.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-7UY24UWL.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var EMPTY_SECTIONS = [];
+var ALERT_CLASS = "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive";
+function renderFieldInput(field, emit) {
+  const disabled = field.disabled === true || field.readOnly === true;
+  if (field.type === "textarea") {
+    return /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        id: field.id,
+        value: field.value,
+        placeholder: field.placeholder ?? void 0,
+        disabled,
+        readOnly: field.readOnly ?? void 0,
+        onChange: () => emit("fieldChange")
+      }
+    );
+  }
+  if (field.type === "select") {
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: field.value,
+        disabled,
+        onValueChange: () => emit("fieldChange"),
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { id: field.id, "aria-label": field.label, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: field.placeholder ?? "Select value" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: (field.options ?? []).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id: field.id,
+      type: field.type ?? "text",
+      value: field.value,
+      placeholder: field.placeholder ?? void 0,
+      disabled,
+      readOnly: field.readOnly ?? void 0,
+      onChange: () => emit("fieldChange")
+    }
+  );
+}
+function FormFieldBlock({
+  props,
+  emit
+}) {
+  const title = props.title;
+  const description = props.description;
+  const state = props.state ?? "pristine";
+  const sections = props.sections ?? EMPTY_SECTIONS;
+  const validationMessage = props.validationMessage;
+  const fatalErrorMessage = props.fatalErrorMessage;
+  const savedMessage = props.savedMessage ?? "Changes saved.";
+  const actionLabels = props.actionLabels;
+  const className = props.className;
+  const isBusy = state === "submitting" || state === "validating";
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    title || description ? /* @__PURE__ */ jsxs("header", { className: "space-y-1", children: [
+      title ? /* @__PURE__ */ jsx(Heading, { level: 3, children: title }) : null,
+      description ? /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      state === "dirty" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Unsaved changes" }) : null,
+      state === "validating" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Validating" }) : null,
+      state === "submitting" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Saving" }) : null,
+      state === "saved" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Saved" }) : null
+    ] }),
+    state === "validation-error" ? /* @__PURE__ */ jsx("div", { role: "alert", className: ALERT_CLASS, children: validationMessage ?? "Validation failed. Resolve field errors and retry." }) : null,
+    state === "fatal-error" ? /* @__PURE__ */ jsx("div", { role: "alert", className: ALERT_CLASS, children: fatalErrorMessage ?? "The form failed to load. Retry or contact support." }) : null,
+    state === "saved" ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-success", children: savedMessage }) : null,
+    /* @__PURE__ */ jsx("div", { className: "grid gap-4", children: sections.map((section) => /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { children: section.title }),
+          section.optional === true ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Optional" }) : null
+        ] }),
+        section.description ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "small",
+            className: "text-text-secondary",
+            children: section.description
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: section.fields && section.fields.length > 0 ? /* @__PURE__ */ jsx(FieldSet, { children: section.fields.map((field) => /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: field.id, children: [
+          field.label,
+          field.required === true ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" }) : null
+        ] }),
+        renderFieldInput(field, emit),
+        field.description ? /* @__PURE__ */ jsx(FieldDescription, { children: field.description }) : null,
+        field.errorMessage ? /* @__PURE__ */ jsx(FieldError, { children: field.errorMessage }) : null
+      ] }, field.id)) }) : null })
+    ] }, section.id)) }),
+    actionLabels ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+      actionLabels.secondary ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          onClick: () => emit("secondaryAction"),
+          disabled: isBusy,
+          children: actionLabels.secondary
+        }
+      ) : null,
+      actionLabels.tertiary ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => emit("tertiaryAction"),
+          disabled: isBusy,
+          children: actionLabels.tertiary
+        }
+      ) : null,
+      actionLabels.destructive ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "destructive",
+          onClick: () => emit("destructiveAction"),
+          disabled: isBusy,
+          children: actionLabels.destructive
+        }
+      ) : null,
+      actionLabels.primary ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => emit("primaryAction"),
+          disabled: isBusy,
+          children: actionLabels.primary
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+
+export { FormFieldBlock };

package/dist/chunk-KKBTPNXT.js

@@ -0,0 +1,110 @@
+import { LanguageSwitcher } from './chunk-SEMWC3IT.js';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from './chunk-KHLMOBAU.js';
+import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
+import { UsersIcon } from './chunk-WUO7OONN.js';
+import { SettingsIcon } from './chunk-OITJWGFV.js';
+import { PaletteIcon } from './chunk-M7YSMMAC.js';
+import { LockIcon } from './chunk-RYOTIXZO.js';
+import { GlobeIcon } from './chunk-JL4MVVFH.js';
+import { CreditCardIcon } from './chunk-JHQTKMKG.js';
+import { BellIcon } from './chunk-JBK2LA6U.js';
+import { UserIcon } from './chunk-UHXGBV5N.js';
+import { cn } from './chunk-QYZT24TS.js';
+import React from 'react';
+import { AnimatePresence } from 'motion/react';
+import { useTranslations } from 'next-intl';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultSettingsTabs = [
+  { id: "general", icon: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 }) },
+  { id: "profile", icon: /* @__PURE__ */ jsx(UserIcon, { size: 16 }) },
+  { id: "team", icon: /* @__PURE__ */ jsx(UsersIcon, { size: 16 }) },
+  { id: "notifications", icon: /* @__PURE__ */ jsx(BellIcon, { size: 16 }) },
+  { id: "security", icon: /* @__PURE__ */ jsx(LockIcon, { size: 16 }) },
+  { id: "billing", icon: /* @__PURE__ */ jsx(CreditCardIcon, { size: 16 }) },
+  { id: "appearance", icon: /* @__PURE__ */ jsx(PaletteIcon, { size: 16 }) },
+  { id: "language", icon: /* @__PURE__ */ jsx(GlobeIcon, { size: 16 }) }
+];
+function DefaultTabContent({ tab }) {
+  const t = useTranslations("pages.settings");
+  if (tab === "language") {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-text-primary", children: t("language") }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary mt-1", children: t("description") })
+      ] }),
+      /* @__PURE__ */ jsx(LanguageSwitcher, { className: "w-48" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex h-[400px] items-center justify-center rounded-lg border border-dashed border-border", children: /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-text-primary", children: t(tab) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: t("underConstruction") })
+  ] }) });
+}
+function SettingsModal({
+  open = false,
+  onOpenChange,
+  defaultTab = "profile",
+  tabs = defaultSettingsTabs,
+  renderContent,
+  ContentComponent
+}) {
+  const t = useTranslations("pages.settings");
+  const motionConfig = useMotionConfig();
+  const [activeTab, setActiveTab] = React.useState(defaultTab);
+  const [prevDefaultTab, setPrevDefaultTab] = React.useState(defaultTab);
+  if (prevDefaultTab !== defaultTab) {
+    setPrevDefaultTab(defaultTab);
+    setActiveTab(defaultTab);
+  }
+  let content;
+  if (renderContent) {
+    content = renderContent(activeTab);
+  } else if (ContentComponent) {
+    content = /* @__PURE__ */ jsx(ContentComponent, { tab: activeTab });
+  } else {
+    content = /* @__PURE__ */ jsx(DefaultTabContent, { tab: activeTab });
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-4xl p-0 gap-0 h-[600px] max-h-[85dvh] overflow-hidden", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: t("title") }),
+    /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: t("description") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+      /* @__PURE__ */ jsx(
+        "nav",
+        {
+          "aria-label": t("settingsNavigation"),
+          className: "w-52 shrink-0 border-r border-border/50 p-4 flex flex-col items-center justify-center gap-1",
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveTab(tab.id),
+              className: cn(
+                "flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
+                activeTab === tab.id ? "bg-primary/10 text-primary" : "text-text-secondary hover:text-text-primary hover:bg-surface-hover"
+              ),
+              children: [
+                tab.icon,
+                /* @__PURE__ */ jsx("span", { children: tab.label ?? t(tab.id) })
+              ]
+            },
+            tab.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          initial: { opacity: 0, y: 8 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -8 },
+          transition: { ...motionSpring.snappy, ...motionConfig },
+          children: content
+        },
+        activeTab
+      ) }) })
+    ] })
+  ] }) });
+}
+
+export { SettingsModal, defaultSettingsTabs };

package/dist/chunk-KL43KGCK.js

@@ -0,0 +1,106 @@
+import { BellIcon } from './chunk-JBK2LA6U.js';
+import { XIcon } from './chunk-UIUMTURU.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { useTranslations } from 'next-intl';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var notificationVariants = cva(
+  "flex gap-4 rounded-lg border p-4 transition-all",
+  {
+    variants: {
+      type: {
+        default: "border-border bg-surface",
+        info: "border-info/20 bg-info/5",
+        success: "border-success/20 bg-success/5",
+        warning: "border-warning/20 bg-warning/5",
+        error: "border-destructive/20 bg-destructive/5"
+      }
+    },
+    defaultVariants: {
+      type: "default"
+    }
+  }
+);
+function NotificationCenter({
+  className,
+  notifications,
+  onDismiss,
+  onNotificationClick,
+  emptyMessage,
+  ref,
+  ...props
+}) {
+  const t = useTranslations("components.notificationCenter");
+  const resolvedEmptyMessage = emptyMessage ?? t("noNotifications");
+  const unreadCount = React.useMemo(() => notifications.filter((n) => !n.read).length, [notifications]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col rounded-xl border border-border bg-surface", className),
+      role: "region",
+      "aria-label": "Notification center",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-border px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(BellIcon, { size: 16, className: "text-text-secondary" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: t("notifications") }),
+          unreadCount > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[10px] font-semibold text-accent-foreground",
+              "aria-label": t("unreadNotifications", { count: unreadCount }),
+              children: unreadCount
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border overflow-y-auto max-h-[400px]", "aria-live": "polite", "aria-relevant": "additions", children: notifications.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8 text-sm text-text-tertiary", children: resolvedEmptyMessage }) : notifications.map((notification) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              notificationVariants({ type: notification.type }),
+              "m-2 cursor-pointer hover:bg-surface-hover",
+              !notification.read && "ring-1 ring-accent/10"
+            ),
+            onClick: () => onNotificationClick?.(notification),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onNotificationClick?.(notification);
+              }
+            },
+            tabIndex: 0,
+            role: "article",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: cn(
+                  "text-sm",
+                  notification.read ? "text-text-secondary" : "font-medium text-text-primary"
+                ), children: notification.title }),
+                notification.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-text-tertiary mt-0.5 line-clamp-2", children: notification.description }),
+                notification.timestamp && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-text-tertiary mt-1.5", children: notification.timestamp })
+              ] }),
+              !!onDismiss && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDismiss(notification.id);
+                  },
+                  className: "shrink-0 flex h-9 w-9 items-center justify-center rounded text-text-tertiary hover:text-text-primary hover:bg-surface-hover transition-colors touch-target-44",
+                  "aria-label": t("dismiss", { title: notification.title }),
+                  children: /* @__PURE__ */ jsx(XIcon, { size: 14 })
+                }
+              )
+            ]
+          },
+          notification.id
+        )) })
+      ]
+    }
+  );
+}
+
+export { NotificationCenter, notificationVariants };

package/dist/chunk-KMTLCN6S.js

@@ -0,0 +1,134 @@
+import { Typography } from './chunk-Q7PCHHVJ.js';
+import { WorkflowGraph } from './chunk-CPSTGXWC.js';
+import { Heading } from './chunk-UXX6HHPS.js';
+import { ContextMeter } from './chunk-S2WSXZ7Y.js';
+import { AgentMetricsCard } from './chunk-OCQB4IU7.js';
+import { AgentTeamPanel } from './chunk-J3QL5UQ7.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultAgents = [
+  {
+    id: "orchestrator",
+    name: "Orchestrator",
+    role: "planner",
+    status: "active",
+    model: "Claude Opus 4",
+    currentAction: "Coordinating the next tool run",
+    tokenCount: 24800,
+    cost: 0.124,
+    elapsedMs: 312e3,
+    stepsCompleted: 4,
+    stepsTotal: 7,
+    toolCalls: [
+      { name: "dispatch_task", status: "done" },
+      { name: "plan_next", status: "running" }
+    ]
+  },
+  {
+    id: "coder",
+    name: "Coder",
+    role: "developer",
+    status: "active",
+    model: "Claude Sonnet 4",
+    currentAction: "Editing workflow graph routing",
+    tokenCount: 12450,
+    cost: 0.042,
+    elapsedMs: 154e3,
+    stepsCompleted: 3,
+    stepsTotal: 7,
+    toolCalls: [
+      { name: "search_web", status: "done" },
+      { name: "edit_file", status: "running" }
+    ]
+  },
+  {
+    id: "reviewer",
+    name: "Reviewer",
+    role: "qa",
+    status: "idle"
+  }
+];
+var defaultMetrics = [
+  { label: "Active Agents", value: 2, trend: "flat" },
+  { label: "Tool Calls", value: 12, trend: "up" },
+  { label: "Latency", value: "1.2", unit: "s", trend: "down" },
+  { label: "Cost", value: "$0.18", trend: "down" }
+];
+var defaultContext = {
+  used: 85e3,
+  total: 128e3,
+  breakdown: { system: 15, user: 35, assistant: 50 }
+};
+var defaultWorkflow = {
+  title: "Execution graph",
+  nodes: [
+    { id: "plan", label: "Planner", status: "done", type: "llm", duration: 2500 },
+    { id: "search", label: "Web Search", status: "done", type: "tool", duration: 1200 },
+    { id: "code", label: "Coder", status: "active", type: "llm" },
+    { id: "review", label: "Guardrail", status: "pending", type: "conditional" },
+    { id: "deploy", label: "Operator", status: "pending", type: "human" }
+  ],
+  edges: [
+    { from: "plan", to: "search", label: "queries" },
+    { from: "plan", to: "code" },
+    { from: "search", to: "code", label: "context" },
+    { from: "code", to: "review" },
+    { from: "review", to: "deploy", label: "approved" }
+  ]
+};
+function AgentRunOverviewBlock({ props }) {
+  const title = props.title ?? "Runtime overview";
+  const description = props.description ?? "A compact operator view of team health, context pressure, and workflow state.";
+  const teamTitle = props.teamTitle ?? "Team";
+  const metricsTitle = props.metricsTitle ?? "Run metrics";
+  const contextTitle = props.contextTitle ?? "Context window";
+  const workflow = props.workflow ?? defaultWorkflow;
+  const agents = props.agents ?? defaultAgents;
+  const metrics = props.metrics ?? defaultMetrics;
+  const context = props.context ?? defaultContext;
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "surface-solid rounded-lg p-4", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-4", children: teamTitle }),
+          /* @__PURE__ */ jsx(AgentTeamPanel, { agents })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "surface-solid rounded-lg p-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", children: contextTitle }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-tertiary", children: [
+              context.used.toLocaleString(),
+              " / ",
+              context.total.toLocaleString()
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ContextMeter,
+            {
+              used: context.used,
+              total: context.total,
+              breakdown: context.breakdown,
+              size: "expanded"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "surface-solid rounded-lg p-4", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-4", children: metricsTitle }),
+          /* @__PURE__ */ jsx(AgentMetricsCard, { metrics })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "surface-solid rounded-lg p-4", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-4", children: workflow.title ?? defaultWorkflow.title }),
+          /* @__PURE__ */ jsx(WorkflowGraph, { nodes: workflow.nodes, edges: workflow.edges })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+export { AgentRunOverviewBlock };

package/dist/{chunk-HOWTYZL5.js → chunk-KPO4PD6C.js}

@@ -1,4 +1,6 @@
 import { hasChildWithDisplayName } from './chunk-6FOHUNXR.js';
+import { useReducedMotion } from './chunk-KRBLVZII.js';
+import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
 import { XIcon } from './chunk-UIUMTURU.js';
 import { cn } from './chunk-QYZT24TS.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -43,35 +45,99 @@ var sheetVariants = cva(
     }
   }
 );
+var slideVariants = {
+  right: {
+    initial: { x: 300 },
+    animate: { x: 0 },
+    exit: { x: 300 }
+  },
+  left: {
+    initial: { x: -300 },
+    animate: { x: 0 },
+    exit: { x: -300 }
+  },
+  top: {
+    initial: { y: -300 },
+    animate: { y: 0 },
+    exit: { y: -300 }
+  },
+  bottom: {
+    initial: { y: 300 },
+    animate: { y: 0 },
+    exit: { y: 300 }
+  }
+};
 function SheetContent({
   side = "right",
   className,
   children,
+  onClose,
   ref,
   ...props
 }) {
   const t = useTranslations("common");
+  const reducedMotion = useReducedMotion();
+  const motionConfig = useMotionConfig();
   const hasTitle = hasChildWithDisplayName(children, "SheetTitle");
   const hasDescription = hasChildWithDisplayName(children, "SheetDescription");
+  const closeButton = /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-11 w-11 items-center justify-center rounded-md text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+    /* @__PURE__ */ jsx(XIcon, { size: 16 }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("close") })
+  ] });
+  const titleFallback = !hasTitle && /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Sheet content" });
+  const descriptionFallback = !hasDescription && /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Sheet content" });
+  if (reducedMotion) {
+    return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+      /* @__PURE__ */ jsx(SheetOverlay, {}),
+      /* @__PURE__ */ jsxs(
+        DialogPrimitive.Content,
+        {
+          ref,
+          className: cn(sheetVariants({ side }), className),
+          ...props,
+          children: [
+            titleFallback,
+            descriptionFallback,
+            children,
+            closeButton
+          ]
+        }
+      )
+    ] });
+  }
+  const isHorizontal = side === "left" || side === "right";
+  const supportsDrag = isHorizontal && typeof window !== "undefined" && typeof window.HTMLElement?.prototype?.setPointerCapture === "function";
+  const variant = slideVariants[side];
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
+    /* @__PURE__ */ jsx(DialogPrimitive.Content, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsxs(
+      m.div,
       {
-        ref,
-        className: cn(sheetVariants({ side }), className),
-        ...props,
+        className: cn("fixed z-50 gap-4 overflow-y-auto glass-panel p-6 shadow-lg", sheetVariants({ side }), className),
+        initial: variant.initial,
+        animate: variant.animate,
+        exit: variant.exit,
+        transition: { ...motionSpring.gentle, ...motionConfig },
+        drag: supportsDrag ? "x" : void 0,
+        dragConstraints: supportsDrag ? { left: 0, right: 0 } : void 0,
+        dragElastic: supportsDrag ? 0.2 : void 0,
+        onDragEnd: (_e, info) => {
+          if (isHorizontal) {
+            const threshold = 100;
+            const shouldClose = side === "right" ? info.offset.x > threshold : info.offset.x < -threshold;
+            if (shouldClose) {
+              onClose?.();
+            }
+          }
+        },
         children: [
-          !hasTitle && /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Sheet content" }),
-          !hasDescription && /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Sheet content" }),
+          titleFallback,
+          descriptionFallback,
           children,
-          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-2 top-2 flex h-11 w-11 items-center justify-center rounded-md text-text-tertiary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-            /* @__PURE__ */ jsx(XIcon, { size: 16 }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("close") })
-          ] })
+          closeButton
         ]
       }
-    )
+    ) })
   ] });
 }
 var SheetHeader = ({