@elevasis/ui 1.20.1 → 1.22.0

package/dist/features/operations/index.js

@@ -1,15 +1,17 @@
-import { ResourceDefinitionSection, CommandQueueTaskRow, getIcon, ActionModal, CommandViewGraph, WorkflowExecutionLogs, AgentExecutionLogs } from '../../chunk-JIABC3AE.js';
-import { SubshellLoader, SubshellSidebarSection, PageContainer } from '../../chunk-JFRG2JJE.js';
-import { ResourceHealthPanel } from '../../chunk-4SY4EQSK.js';
+import { ChatHeader, ChatSidebar } from '../../chunk-ROSMICXG.js';
+import { ResourceDefinitionSection, CommandQueueTaskRow, getIcon, ActionModal, CommandViewGraph, WorkflowExecutionLogs, AgentExecutionLogs, ResourceFilter, getExecutionStatusConfig, SessionMemory } from '../../chunk-WAEKXBP3.js';
+import { SubshellLoader, SubshellSidebarSection, PageContainer, CollapsibleSidebarGroup, SidebarListItem } from '../../chunk-AWT255UH.js';
+import { ResourceHealthPanel } from '../../chunk-5266RV46.js';
 import { ConfirmationModal, CustomModal } from '../../chunk-GBMNCNHX.js';
-import { ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline } from '../../chunk-C7AD6N23.js';
-import { useCyberColors, CyberDonut } from '../../chunk-ERVB3QJQ.js';
-import { PageTitleCaption, TabCountBadge, ResourceCard, ContextViewer, JsonViewer, APIErrorAlert, EmptyState } from '../../chunk-AWMZCYKH.js';
+import { ExecutionStats, UnifiedWorkflowGraph, WorkflowExecutionTimeline, AgentExecutionVisualizer, AgentExecutionTimeline } from '../../chunk-DLI3F5IV.js';
+import { useCyberColors, CyberDonut } from '../../chunk-N5SDJP44.js';
+import { PageTitleCaption, TabCountBadge, ResourceCard, ContextViewer, JsonViewer, APIErrorAlert, EmptyState, CardHeader } from '../../chunk-IAZT3VO6.js';
+import '../../chunk-3KMDHCAR.js';
 import '../../chunk-NNKKBSJN.js';
 import { AppShellLoader } from '../../chunk-WWEMNIHW.js';
-import '../../chunk-QJ2S46NI.js';
-import { useStatusFilter, useResourceSearch, useResourcesDomainFilters, filterByDomainFilters, useCommandViewDomainFilters, showApiErrorNotification } from '../../chunk-XOTN3X3Z.js';
-import { usePaginationState, useResources, useRecentExecutionsByResource, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueueTotals, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStore, useCommandViewStats, useResourceExecutions, useCheckpointTasks, useExecutionPanelState, useExecution } from '../../chunk-AQ5MQDSS.js';
+import { topbarHeight } from '../../chunk-QJ2S46NI.js';
+import { useStatusFilter, useResourceSearch, useResourcesDomainFilters, filterByDomainFilters, useCommandViewDomainFilters } from '../../chunk-FATKFO7X.js';
+import { usePaginationState, useResources, useRecentExecutionsByResource, useResourceDefinition, isSessionCapable, useDeleteTask, useCommandQueueTotals, useCommandQueue, useSubmitAction, useCommandViewData, useCommandViewStore, useCommandViewStats, useCalibrationProjects, useCalibrationProject, useAllCalibrationProjects, useResourceExecutions, useCheckpointTasks, useCalibrationSSE, useCalibrationRunFull, useExecuteRun, useGradeRun, useCalibrationRuns, useExecutionPanelState, useExecution, useDeleteSession, useCreateSession, useSessions, useSessionExecutions, useSession, calibrationKeys, useDeleteProject, useCreateProject } from '../../chunk-EDAYKRPJ.js';
 import '../../chunk-NJJ3NQ7B.js';
 import '../../chunk-LXHZYSMQ.js';
 import '../../chunk-MHW43EOH.js';
@@ -19,11 +21,10 @@ import { ResourceStatusColors } from '../../chunk-ELJIFLCB.js';
 import '../../chunk-L4XXM55J.js';
 import '../../chunk-SLVC5OJ2.js';
 import '../../chunk-RNP5R5I3.js';
-import '../../chunk-VLTVZXP6.js';
-import '../../chunk-R3R367QY.js';
+import '../../chunk-QZS5FOIR.js';
 import '../../chunk-SZHARWKU.js';
-import '../../chunk-OFAXUZPZ.js';
-import '../../chunk-3DIU726S.js';
+import '../../chunk-AJPFSMEH.js';
+import '../../chunk-NVSKJG3L.js';
 import '../../chunk-R7WLWGPO.js';
 import '../../chunk-NVOCKXUQ.js';
 import '../../chunk-V7XHGJQZ.js';
@@ -33,19 +34,19 @@ import '../../chunk-RWQIFKMJ.js';
 import '../../chunk-ALA56RGZ.js';
 import { useInitialization } from '../../chunk-TUXTSEAF.js';
 import { useOrganization } from '../../chunk-DD3CCMCZ.js';
-import { useElevasisServices } from '../../chunk-QEPXAWE2.js';
+import '../../chunk-QEPXAWE2.js';
 import '../../chunk-BRJ3QZ4E.js';
 import '../../chunk-Q7DJKLEN.js';
-import { Stack, Card, Text, Button, Tabs, Group, Pagination, useMantineTheme, Box, Center, Loader, UnstyledButton, TextInput, Divider, Paper, Badge, ActionIcon, Title, SimpleGrid, CopyButton, SegmentedControl, ThemeIcon, Alert, Switch, Space, Collapse, Tooltip, Menu, Modal, Textarea, Table, Progress } from '@mantine/core';
-import { IconApps, IconRoute, IconBrain, IconRefresh, IconAdjustmentsHorizontal, IconSearch, IconChevronDown, IconCircleX, IconCircleCheck, IconCircleDashed, IconTrash, IconArrowLeft, IconClock, IconCheck, IconCopy, IconExternalLink, IconPlayerPlay, IconAlertCircle, IconPlus, IconAdjustments, IconSitemap, IconSettings, IconReportAnalytics, IconX, IconCoin, IconChevronRight, IconInfoCircle, IconMessage, IconFlask, IconDotsVertical } from '@tabler/icons-react';
+import { Stack, Card, Text, Button, Tabs, Group, Pagination, useMantineTheme, Box, Center, Loader, UnstyledButton, TextInput, Divider, Paper, Badge, ActionIcon, Title, SimpleGrid, CopyButton, SegmentedControl, ThemeIcon, Alert, Switch, Space, Progress, Timeline, Collapse, ScrollArea, Tooltip, Textarea, Menu, Modal, Table } from '@mantine/core';
+import { IconApps, IconRoute, IconBrain, IconRefresh, IconAdjustmentsHorizontal, IconSearch, IconChevronDown, IconCircleX, IconCircleCheck, IconCircleDashed, IconTrash, IconArrowLeft, IconClock, IconCheck, IconCopy, IconExternalLink, IconPlayerPlay, IconAlertCircle, IconPlus, IconAdjustments, IconSitemap, IconSettings, IconX, IconChartBar, IconReportAnalytics, IconCoin, IconChevronRight, IconFlask, IconInfoCircle, IconMessage, IconAlertTriangle, IconRobot, IconLayoutSidebarRightExpand, IconNote, IconArchive, IconDownload, IconTimeline, IconDotsVertical } from '@tabler/icons-react';
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useClipboard } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { Link, useNavigate } from '@tanstack/react-router';
-import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 import { useForm } from '@mantine/form';
 import { formatDistanceToNow } from 'date-fns';
+import { useQueryClient } from '@tanstack/react-query';
 
 // ../core/src/platform/utils/debounce.ts
 function debounce(fn, wait) {
@@ -1447,99 +1448,6 @@ function CommandViewPage({ timeRange }) {
     }
   );
 }
-
-// src/hooks/operations/calibration/queryKeys.ts
-var calibrationKeys = {
-  all: ["calibration"],
-  // Projects
-  projects: (org) => [...calibrationKeys.all, "projects", org],
-  projectsByResource: (org, resourceId, resourceType) => [...calibrationKeys.all, "projects", org, resourceId, resourceType],
-  project: (org, projectId) => [...calibrationKeys.all, "project", org, projectId],
-  // Runs
-  runs: (org, projectId) => [...calibrationKeys.all, "runs", org, projectId],
-  run: (org, runId) => [...calibrationKeys.all, "run", org, runId],
-  runFull: (org, runId) => [...calibrationKeys.all, "run-full", org, runId]
-};
-
-// src/hooks/operations/calibration/useCalibrationProjects.ts
-function useAllCalibrationProjects() {
-  const { apiRequest, organizationId, isReady } = useElevasisServices();
-  return useQuery({
-    queryKey: calibrationKeys.projects(organizationId ?? "none"),
-    queryFn: async () => {
-      const response = await apiRequest("/calibration/projects");
-      return response.projects;
-    },
-    enabled: isReady && !!organizationId
-  });
-}
-function useCalibrationProjects(resourceId, resourceType) {
-  const { apiRequest, organizationId, isReady } = useElevasisServices();
-  return useQuery({
-    queryKey: calibrationKeys.projectsByResource(organizationId ?? "none", resourceId, resourceType),
-    queryFn: async () => {
-      const response = await apiRequest(
-        `/calibration/projects?resourceId=${resourceId}&resourceType=${resourceType}`
-      );
-      return response.projects;
-    },
-    enabled: isReady && !!resourceId && !!resourceType && !!organizationId
-  });
-}
-function useCalibrationProject(projectId) {
-  const { apiRequest, organizationId, isReady } = useElevasisServices();
-  return useQuery({
-    queryKey: calibrationKeys.project(organizationId ?? "none", projectId),
-    queryFn: async () => {
-      const response = await apiRequest(`/calibration/projects/${projectId}`);
-      return response.project;
-    },
-    enabled: isReady && !!projectId && !!organizationId
-  });
-}
-function useCreateProject() {
-  const { apiRequest, organizationId } = useElevasisServices();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async (input) => {
-      const response = await apiRequest("/calibration/projects", {
-        method: "POST",
-        body: JSON.stringify(input)
-      });
-      return response.project;
-    },
-    onSuccess: (data) => {
-      queryClient.invalidateQueries({
-        queryKey: calibrationKeys.projects(organizationId ?? "none")
-      });
-      queryClient.invalidateQueries({
-        queryKey: calibrationKeys.projectsByResource(organizationId ?? "none", data.resourceId, data.resourceType)
-      });
-    },
-    onError: (error) => {
-      showApiErrorNotification(error);
-    }
-  });
-}
-function useDeleteProject() {
-  const { apiRequest } = useElevasisServices();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async (id) => {
-      await apiRequest(`/calibration/projects/${id}`, {
-        method: "DELETE"
-      });
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: calibrationKeys.all
-      });
-    },
-    onError: (error) => {
-      showApiErrorNotification(error);
-    }
-  });
-}
 function ProjectCard({ project, onNavigate }) {
   const deleteProject = useDeleteProject();
   const handleClick = () => {
@@ -2071,63 +1979,6 @@ function CommandViewSidebarContent({ timeRange }) {
     }
   );
 }
-function useCalibrationRunFull(runId) {
-  const { apiRequest, organizationId, isReady } = useElevasisServices();
-  return useQuery({
-    queryKey: calibrationKeys.runFull(organizationId ?? "none", runId),
-    queryFn: async () => {
-      const response = await apiRequest(`/calibration/runs/${runId}/full`);
-      return response;
-    },
-    enabled: isReady && !!runId && !!organizationId
-  });
-}
-function useExecuteRun() {
-  const { apiRequest, organizationId } = useElevasisServices();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async (runId) => {
-      await apiRequest(`/calibration/runs/${runId}/execute`, {
-        method: "POST"
-      });
-    },
-    onSuccess: (_, runId) => {
-      queryClient.invalidateQueries({
-        queryKey: calibrationKeys.run(organizationId ?? "none", runId)
-      });
-    },
-    onError: (error) => {
-      showApiErrorNotification(error);
-    }
-  });
-}
-function useGradeRun() {
-  const { apiRequest, organizationId } = useElevasisServices();
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: async ({
-      runId,
-      rubric,
-      graderModel
-    }) => {
-      await apiRequest(`/calibration/runs/${runId}/grade`, {
-        method: "POST",
-        body: JSON.stringify({ rubric, graderModel })
-      });
-    },
-    onSuccess: (_, { runId }) => {
-      queryClient.invalidateQueries({
-        queryKey: calibrationKeys.run(organizationId ?? "none", runId)
-      });
-      queryClient.invalidateQueries({
-        queryKey: calibrationKeys.runFull(organizationId ?? "none", runId)
-      });
-    },
-    onError: (error) => {
-      showApiErrorNotification(error);
-    }
-  });
-}
 function ComparisonTable({ run, logs, metrics }) {
   if (run.results.length === 0) {
     return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", ta: "center", children: "No results yet. Execute the calibration run to see comparisons." }) });
@@ -2320,6 +2171,142 @@ function GradingPanel({ run, rubric }) {
     ] })
   ] });
 }
+function CalibrationProgress({ runId, manager, apiUrl }) {
+  const { connected, events, summary, isComplete, error } = useCalibrationSSE({
+    runId,
+    manager,
+    apiUrl,
+    enabled: true
+  });
+  const executionStarted = events.filter((e) => e.type === "execution-started" || e.type === "session-started").length;
+  const executionCompleted = events.filter(
+    (e) => e.type === "execution-completed" || e.type === "session-completed"
+  ).length;
+  const executionFailed = events.filter((e) => e.type === "execution-failed").length;
+  const gradingCompleted = events.filter((e) => e.type === "grading-completed").length;
+  const progressPercent = summary ? (summary.completed + summary.failed) / summary.total * 100 : executionStarted > 0 ? executionCompleted / executionStarted * 100 : 0;
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+      connected ? /* @__PURE__ */ jsx(Badge, { color: "green", leftSection: /* @__PURE__ */ jsx(Loader, { size: 10 }), children: "Live" }) : /* @__PURE__ */ jsx(Badge, { color: "gray", children: "Connecting..." }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: isComplete ? "Calibration complete" : "Calibration in progress..." })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "xs", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: "Progress" }),
+        /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", children: [
+          executionCompleted,
+          "/",
+          executionStarted || "?",
+          " executions"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Progress,
+        {
+          value: progressPercent,
+          color: error ? "red" : isComplete ? "green" : void 0,
+          animated: !isComplete
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Group, { gap: "xl", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Completed" }),
+        /* @__PURE__ */ jsx(Text, { size: "lg", fw: 500, c: "green", children: executionCompleted })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Failed" }),
+        /* @__PURE__ */ jsx(Text, { size: "lg", fw: 500, c: "red", children: executionFailed })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Graded" }),
+        /* @__PURE__ */ jsx(Text, { size: "lg", fw: 500, children: gradingCompleted })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, mb: "xs", children: "Recent Activity" }),
+      /* @__PURE__ */ jsx(Timeline, { active: events.length, bulletSize: 20, lineWidth: 2, children: events.slice(-5).map((event, index) => /* @__PURE__ */ jsx(Timeline.Item, { bullet: getEventBullet(event), title: getEventTitle(event), children: /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "xs", children: getEventDescription(event) }) }, index)) })
+    ] }),
+    error && /* @__PURE__ */ jsxs(Text, { c: "red", size: "sm", children: [
+      "Error: ",
+      error
+    ] })
+  ] }) });
+}
+function getEventBullet(event) {
+  const iconSize = 12;
+  switch (event.type) {
+    case "execution-started":
+    case "session-started":
+    case "turn-started":
+      return /* @__PURE__ */ jsx(ThemeIcon, { size: 20, radius: "xl", children: /* @__PURE__ */ jsx(IconPlayerPlay, { size: iconSize }) });
+    case "execution-completed":
+    case "session-completed":
+    case "turn-completed":
+      return /* @__PURE__ */ jsx(ThemeIcon, { size: 20, color: "green", radius: "xl", children: /* @__PURE__ */ jsx(IconCheck, { size: iconSize }) });
+    case "execution-failed":
+      return /* @__PURE__ */ jsx(ThemeIcon, { size: 20, color: "red", radius: "xl", children: /* @__PURE__ */ jsx(IconX, { size: iconSize }) });
+    case "grading-started":
+    case "grading-completed":
+      return /* @__PURE__ */ jsx(ThemeIcon, { size: 20, color: "violet", radius: "xl", children: /* @__PURE__ */ jsx(IconChartBar, { size: iconSize }) });
+    case "grading-failed":
+      return /* @__PURE__ */ jsx(ThemeIcon, { size: 20, color: "red", radius: "xl", children: /* @__PURE__ */ jsx(IconX, { size: iconSize }) });
+    default:
+      return /* @__PURE__ */ jsx(ThemeIcon, { size: 20, color: "gray", radius: "xl", children: /* @__PURE__ */ jsx(IconClock, { size: iconSize }) });
+  }
+}
+function getEventTitle(event) {
+  switch (event.type) {
+    case "connected":
+      return "Connected";
+    case "execution-started":
+      return `Started: ${event.variantName}`;
+    case "execution-completed":
+      return `Completed: ${event.variantName}`;
+    case "execution-failed":
+      return `Failed: ${event.variantName}`;
+    case "session-started":
+      return `Session started: ${event.variantName}`;
+    case "session-completed":
+      return `Session completed: ${event.variantName}`;
+    case "turn-started":
+      return `Turn ${event.turnNumber}: ${event.variantName}`;
+    case "turn-completed":
+      return `Turn ${event.turnNumber} done: ${event.variantName}`;
+    case "grading-started":
+      return `Grading: ${event.variantName}`;
+    case "grading-completed":
+      return `Graded: ${event.variantName} (${(event.score * 100).toFixed(0)}%)`;
+    case "grading-failed":
+      return `Grading failed: ${event.variantName}`;
+    case "calibration-completed":
+      return "Calibration complete";
+    case "calibration-failed":
+      return "Calibration failed";
+    default:
+      return "Unknown event";
+  }
+}
+function getEventDescription(event) {
+  switch (event.type) {
+    case "execution-started":
+      return `Input #${(event.inputIndex ?? 0) + 1}`;
+    case "execution-completed":
+      return `Input #${(event.inputIndex ?? 0) + 1}`;
+    case "execution-failed":
+      return event.error;
+    case "session-completed":
+      return `${event.turnCount} turns`;
+    case "grading-failed":
+      return event.error;
+    case "calibration-completed":
+      return `${event.summary.completed}/${event.summary.total} succeeded`;
+    case "calibration-failed":
+      return event.error;
+    default:
+      return "";
+  }
+}
 var STATUS_COLORS = {
   pending: "gray",
   running: "blue",
@@ -2331,7 +2318,8 @@ function CalibrationRunDetailPage({
   runId,
   onNavigateToProject,
   renderSessionComparison,
-  renderProgressPanel
+  manager,
+  apiUrl
 }) {
   const { organizationReady } = useInitialization();
   const { data: fullData, isLoading, error, refetch } = useCalibrationRunFull(runId);
@@ -2457,7 +2445,7 @@ function CalibrationRunDetailPage({
         ] }, index)) }) })
       ] })
     ] }),
-    run.status === "running" && renderProgressPanel?.({ runId }),
+    run.status === "running" && /* @__PURE__ */ jsx(CalibrationProgress, { runId, manager, apiUrl }),
     /* @__PURE__ */ jsxs(Tabs, { defaultValue: "comparison", children: [
       /* @__PURE__ */ jsxs(Tabs.List, { children: [
         /* @__PURE__ */ jsx(Tabs.Tab, { value: "comparison", children: "Results" }),
@@ -2468,6 +2456,100 @@ function CalibrationRunDetailPage({
     ] })
   ] });
 }
+function CalibrationSidebar({
+  currentProjectId,
+  currentRunId,
+  currentPath,
+  onProjectClick,
+  onRunClick
+}) {
+  const theme = useMantineTheme();
+  const queryClient = useQueryClient();
+  const { organizationReady } = useInitialization();
+  const { data: projects, isLoading: isProjectsLoading } = useAllCalibrationProjects();
+  const [expandedProjects, setExpandedProjects] = useState(() => {
+    if (currentProjectId) {
+      return { [currentProjectId]: true };
+    }
+    return {};
+  });
+  const toggleProject = (projectId) => {
+    setExpandedProjects((prev) => ({
+      ...prev,
+      [projectId]: !prev[projectId]
+    }));
+  };
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({ queryKey: [...calibrationKeys.all, "projects"] });
+  };
+  const hasData = projects && projects.length > 0;
+  const isInitialLoading = !organizationReady || isProjectsLoading && !hasData;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        flex: 1,
+        minHeight: 0,
+        padding: theme.spacing.sm,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: "md", mt: "-4", pt: "0", style: { flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", children: "Projects" }),
+          /* @__PURE__ */ jsx(UnstyledButton, { title: "Refresh projects", onClick: handleRefresh, children: /* @__PURE__ */ jsx(IconRefresh, { size: 14, style: { opacity: 0.6 } }) })
+        ] }),
+        /* @__PURE__ */ jsx(ScrollArea, { style: { flex: 1, minHeight: 0 }, scrollbarSize: 8, children: isInitialLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : projects && projects.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: "xs", children: projects.map((project) => /* @__PURE__ */ jsx(
+          ProjectGroup,
+          {
+            project,
+            isExpanded: expandedProjects[project.id] || false,
+            currentPath,
+            currentRunId,
+            onToggle: () => toggleProject(project.id),
+            onProjectClick,
+            onRunClick
+          },
+          project.id
+        )) }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", style: { padding: "6px 8px" }, children: "No projects yet" }) })
+      ]
+    }
+  );
+}
+function ProjectGroup({
+  project,
+  isExpanded,
+  currentPath,
+  currentRunId,
+  onToggle,
+  onProjectClick,
+  onRunClick
+}) {
+  const { data: runs, isLoading: isRunsLoading } = useCalibrationRuns(isExpanded ? project.id : "");
+  const isProjectActive = currentPath.includes(`/project/${project.id}`);
+  const hasActiveRun = runs?.some((run) => run.id === currentRunId) || false;
+  const isActive = isProjectActive || hasActiveRun;
+  return /* @__PURE__ */ jsx(
+    CollapsibleSidebarGroup,
+    {
+      icon: IconFlask,
+      label: project.name,
+      isExpanded,
+      onToggle,
+      isActive,
+      onLabelClick: () => onProjectClick(project.id),
+      isEmpty: !runs || runs.length === 0,
+      emptyMessage: "No runs yet",
+      isLoading: isRunsLoading,
+      loadingComponent: /* @__PURE__ */ jsx(Center, { p: "xs", children: /* @__PURE__ */ jsx(Loader, { size: "xs" }) }),
+      children: runs?.map((run) => /* @__PURE__ */ jsx(RunItem, { run, isActive: currentRunId === run.id, onRunClick }, run.id))
+    }
+  );
+}
+function RunItem({ run, isActive, onRunClick }) {
+  return /* @__PURE__ */ jsx(SidebarListItem, { icon: IconPlayerPlay, label: run.name, isActive, onClick: () => onRunClick(run.id) });
+}
 function WorkflowExecutionPanel({
   resourceId,
   resourceDefinition,
@@ -2642,5 +2724,868 @@ function ExecutionPanel({
       return isWorkflowDefinition(resourceDefinition) ? /* @__PURE__ */ jsx(WorkflowExecutionPanel, { ...diProps, resourceDefinition }) : /* @__PURE__ */ jsx(ResourceDefinitionError, { resourceId, resourceType, resourceName });
   }
 }
+function SessionListItem({ session, onClick, isSelected = false, onDeleted }) {
+  const deleteSession = useDeleteSession();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const handleClick = () => {
+    onClick(session.sessionId);
+  };
+  const handleDeleteClick = (e) => {
+    e.stopPropagation();
+    setShowConfirmation(true);
+  };
+  const handleConfirmDelete = async () => {
+    if (isDeleting) return;
+    setIsDeleting(true);
+    try {
+      await deleteSession.mutateAsync(session.sessionId);
+      setShowConfirmation(false);
+      onDeleted?.(session.sessionId);
+    } catch (error) {
+      console.error("Failed to delete session:", error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  const formatLastActivity = (date) => {
+    try {
+      return formatRelativeTime(date);
+    } catch {
+      return "unknown";
+    }
+  };
+  const titleColor = isSelected ? "var(--color-primary)" : "var(--color-text)";
+  const descriptionColor = isSelected ? "var(--color-text)" : "var(--color-text-subtle)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Card,
+      {
+        p: "xs",
+        withBorder: isSelected,
+        style: {
+          cursor: "pointer",
+          backgroundColor: isSelected ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "transparent",
+          border: "none",
+          boxShadow: "none",
+          transition: "all var(--duration-fast) var(--easing)",
+          opacity: isDeleting ? 0.5 : 1
+        },
+        onClick: handleClick,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", children: [
+            /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+              /* @__PURE__ */ jsx(IconMessage, { color: titleColor, size: 14 }),
+              /* @__PURE__ */ jsxs(Text, { size: "xs", fw: 500, c: titleColor, children: [
+                session.turnCount,
+                " turns"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                size: "sm",
+                variant: "subtle",
+                color: "red",
+                onClick: handleDeleteClick,
+                loading: isDeleting,
+                disabled: isDeleting,
+                children: /* @__PURE__ */ jsx(IconTrash, { size: 16 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: descriptionColor, children: formatLastActivity(session.updatedAt) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmationModal,
+      {
+        opened: showConfirmation,
+        onClose: () => setShowConfirmation(false),
+        icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+        title: "Delete Session",
+        text: "Are you sure you want to delete this session? This action cannot be undone.",
+        buttonText: "Delete",
+        buttonColor: "red",
+        confirmationHandler: handleConfirmDelete,
+        loading: isDeleting
+      }
+    )
+  ] });
+}
+function SessionsPage({
+  isReady,
+  agentParam,
+  buildSessionDetailUrl,
+  buildSessionListUrl,
+  onNavigate
+}) {
+  const { data: resourcesData, isLoading: isResourcesLoading } = useResources();
+  const createSession = useCreateSession();
+  const [statusFilter, setStatusFilter] = useState("all");
+  const allAgents = (resourcesData?.agents || []).filter((agent) => agent.sessionCapable === true);
+  const filteredAgents = statusFilter === "all" ? allAgents : allAgents.filter((agent) => agent.status === statusFilter);
+  const selectedAgent = agentParam ? allAgents.find((a) => a.resourceId === agentParam) : void 0;
+  const { data: sessionsData } = useSessions({
+    resourceId: agentParam
+  });
+  const agentSessions = Array.isArray(sessionsData) ? sessionsData : [];
+  const handleCreateSession = async () => {
+    if (!selectedAgent) return;
+    try {
+      const result = await createSession.mutateAsync(selectedAgent.resourceId);
+      onNavigate(buildSessionDetailUrl(result.sessionId));
+    } catch (error) {
+      console.error("Failed to create session:", error);
+    }
+  };
+  const hasResourcesData = allAgents.length > 0;
+  if (!isReady || isResourcesLoading && !hasResourcesData) return /* @__PURE__ */ jsx(SubshellLoader, {});
+  return /* @__PURE__ */ jsxs(Stack, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ jsx(
+      PageTitleCaption,
+      {
+        title: "Sessions",
+        caption: "Create and manage multi-turn agent conversations",
+        rightSection: !selectedAgent ? /* @__PURE__ */ jsx(ResourceFilter, { value: statusFilter, onChange: setStatusFilter }) : void 0
+      }
+    ),
+    selectedAgent ? /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        CardHeader,
+        {
+          icon: /* @__PURE__ */ jsx(IconRobot, { size: 18 }),
+          title: selectedAgent.name,
+          subtitle: selectedAgent.description || "Simplest possible agent using GPT-5-mini",
+          rightSection: /* @__PURE__ */ jsx(
+            Button,
+            {
+              leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 16 }),
+              onClick: handleCreateSession,
+              loading: createSession.isPending,
+              children: "New Session"
+            }
+          )
+        }
+      ),
+      agentSessions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Existing Sessions" }),
+          agentSessions.map((session) => /* @__PURE__ */ jsx(
+            SessionListItem,
+            {
+              session,
+              onClick: (sessionId) => onNavigate(buildSessionDetailUrl(sessionId))
+            },
+            session.sessionId
+          ))
+        ] })
+      ] })
+    ] }) }) : /* @__PURE__ */ jsx(Stack, { children: filteredAgents.length > 0 ? /* @__PURE__ */ jsx(SimpleGrid, { cols: { base: 1, sm: 2, lg: 3 }, spacing: "sm", children: filteredAgents.map((agent) => /* @__PURE__ */ jsx(
+      ResourceCard,
+      {
+        resource: { ...agent, type: "agent" },
+        onClick: () => {
+          onNavigate(buildSessionListUrl(agent.resourceId));
+        }
+      },
+      agent.resourceId
+    )) }) : /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { align: "center", py: "xl", children: [
+      /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "No agents available" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Register agents to start conversation sessions" })
+    ] }) }) })
+  ] });
+}
+function SessionHeader({
+  session: _session,
+  connectionState,
+  onToggleSidebar,
+  isSidebarOpen,
+  tokenUsage
+}) {
+  const mockTokenUsage = tokenUsage || { used: 45e3, total: 128e3 };
+  return /* @__PURE__ */ jsx(
+    ChatHeader,
+    {
+      title: "Session Chat",
+      status: {
+        label: connectionState.isConnected ? "Connected" : "Disconnected",
+        color: connectionState.isConnected ? "green" : "gray"
+      },
+      contextUsage: mockTokenUsage,
+      sidebarIcon: /* @__PURE__ */ jsx(IconLayoutSidebarRightExpand, { size: 20 }),
+      onToggleSidebar,
+      isSidebarOpen,
+      sidebarTooltip: isSidebarOpen ? "Close details" : "Show details"
+    }
+  );
+}
+function SessionChatInterface({
+  sessionId,
+  onConnectionStateChange,
+  renderConversationView
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: renderConversationView({
+    sessionId,
+    onConnectionStateChange,
+    emptyStateText: "No messages yet",
+    emptyStateSubtext: "Send a message to start the conversation",
+    placeholder: "Message the agent..."
+  }) });
+}
+function SessionDetailsSidebar({
+  session,
+  isOpen,
+  onClose,
+  organizationName,
+  onDeleted
+}) {
+  const deleteSession = useDeleteSession();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [copiedResource, setCopiedResource] = useState(false);
+  const [copiedSessionId, setCopiedSessionId] = useState(false);
+  const { data: executionsData } = useSessionExecutions(session.sessionId);
+  const [instructions, setInstructions] = useState(session.metadata?.instructions || "");
+  const [isSavingInstructions, setIsSavingInstructions] = useState(false);
+  const { data: resourcesData } = useResources();
+  const agent = resourcesData?.agents.find((a) => a.resourceId === session.resourceId);
+  const { data: agentDefinition } = useResourceDefinition(session.resourceId);
+  const agentInfo = {
+    name: agent?.name || session.resourceId,
+    description: agent?.description || "No description available",
+    resourceId: session.resourceId
+  };
+  const metrics = {
+    totalDuration: 0,
+    avgTurnTime: 0,
+    successRate: 0,
+    completedTurns: 0,
+    failedTurns: 0
+  };
+  if (executionsData?.executions) {
+    const executions = executionsData.executions;
+    metrics.totalDuration = executions.reduce((sum, ex) => sum + (ex.duration || 0), 0);
+    metrics.avgTurnTime = executions.length > 0 ? metrics.totalDuration / executions.length : 0;
+    metrics.completedTurns = executions.filter((ex) => ex.status === "completed" || ex.status === "warning").length;
+    metrics.failedTurns = executions.filter((ex) => ex.status === "failed").length;
+    metrics.successRate = executions.length > 0 ? metrics.completedTurns / executions.length * 100 : 0;
+  }
+  const handleConfirmDelete = async () => {
+    if (isDeleting) return;
+    setIsDeleting(true);
+    try {
+      await deleteSession.mutateAsync(session.sessionId);
+      setShowConfirmation(false);
+      onClose();
+      onDeleted?.();
+    } catch (error) {
+      console.error("Failed to delete session:", error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+  const handleArchive = () => {
+    console.log("Archive session:", session.sessionId);
+  };
+  const handleExport = () => {
+    console.log("Export session:", session.sessionId);
+  };
+  const handleSaveInstructions = async () => {
+    setIsSavingInstructions(true);
+    try {
+      console.log("Saving instructions:", instructions);
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    } finally {
+      setIsSavingInstructions(false);
+    }
+  };
+  const handleCopyResource = async () => {
+    const resourcePath = `${organizationName}/${session.resourceId}`;
+    await navigator.clipboard.writeText(resourcePath);
+    setCopiedResource(true);
+    setTimeout(() => setCopiedResource(false), 2e3);
+  };
+  const handleCopySessionId = async () => {
+    await navigator.clipboard.writeText(session.sessionId);
+    setCopiedSessionId(true);
+    setTimeout(() => setCopiedSessionId(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(ChatSidebar, { isOpen, title: "Session Details", children: [
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: /* @__PURE__ */ jsxs(Stack, { p: "sm", children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(Group, { gap: 4, mb: 4, justify: "space-between", children: [
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Resource (CLI)" }),
+              /* @__PURE__ */ jsx(Tooltip, { label: copiedResource ? "Copied!" : "Copy resource path", position: "right", children: /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  variant: "subtle",
+                  color: copiedResource ? "green" : "gray",
+                  onClick: handleCopyResource,
+                  size: "xs",
+                  children: copiedResource ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs(Text, { size: "sm", ff: "monospace", style: { wordBreak: "break-all" }, children: [
+              organizationName,
+              "/",
+              session.resourceId
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(Group, { gap: 4, mb: 4, justify: "space-between", children: [
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Session ID" }),
+              /* @__PURE__ */ jsx(Tooltip, { label: copiedSessionId ? "Copied!" : "Copy session ID", position: "right", children: /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  variant: "subtle",
+                  color: copiedSessionId ? "green" : "gray",
+                  onClick: handleCopySessionId,
+                  size: "xs",
+                  children: copiedSessionId ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 })
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", style: { wordBreak: "break-all" }, children: session.sessionId })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", mb: 8, children: "Agent" }),
+          /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, children: agentInfo.name }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", lineClamp: 3, children: agentInfo.description }),
+            agentDefinition && "modelConfig" in agentDefinition && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Divider, { my: "xs" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fw: 600, mb: 4, children: "Model Configuration" }),
+                /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+                  agentDefinition.modelConfig.model && /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Model" }),
+                    /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: agentDefinition.modelConfig.model })
+                  ] }),
+                  agentDefinition.modelConfig.temperature !== void 0 && /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Temperature" }),
+                    /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: agentDefinition.modelConfig.temperature })
+                  ] }),
+                  agentDefinition.modelConfig.maxOutputTokens && /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+                    /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Max Tokens" }),
+                    /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: agentDefinition.modelConfig.maxOutputTokens })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            agentDefinition && "tools" in agentDefinition && agentDefinition.tools.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Divider, { my: "sm" }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", fw: 600, mb: 4, children: [
+                  "Tools (",
+                  agentDefinition.tools.length,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsx(Stack, { gap: 4, children: agentDefinition.tools.map(
+                  (tool, index) => {
+                    const toolName = typeof tool === "string" ? tool : tool.name;
+                    const toolKey = typeof tool === "string" ? tool : `${tool.name}-${index}`;
+                    return /* @__PURE__ */ jsxs(Text, { size: "sm", ff: "monospace", c: "dimmed", children: [
+                      "\u2022 ",
+                      toolName
+                    ] }, toolKey);
+                  }
+                ) })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(Group, { justify: "space-between", mb: 8, children: [
+            /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+              /* @__PURE__ */ jsx(IconNote, { size: 14, color: "var(--color-text-subtle)" }),
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", children: "Session Instructions" })
+            ] }),
+            isSavingInstructions && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { fontStyle: "italic" }, children: "Saving..." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              placeholder: "Add custom instructions to append to the system prompt...",
+              value: instructions,
+              onChange: (e) => setInstructions(e.target.value),
+              onBlur: handleSaveInstructions,
+              autosize: true,
+              minRows: 4,
+              maxRows: 8,
+              size: "sm",
+              styles: {
+                input: {
+                  fontSize: "var(--mantine-font-size-sm)"
+                }
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", mb: 8, children: "Timestamps" }),
+          /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+            /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Created" }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: new Date(session.createdAt).toLocaleString() })
+            ] }),
+            /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Last Updated" }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: new Date(session.updatedAt).toLocaleString() })
+            ] }),
+            session.endedAt && /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+              /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Ended" }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: new Date(session.endedAt).toLocaleString() })
+            ] })
+          ] })
+        ] }),
+        (() => {
+          const modelConfig = session.metadata?.modelConfig;
+          if (!modelConfig) return null;
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", mb: 4, children: "Model Configuration" }),
+              /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+                modelConfig.model && /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Model" }),
+                  /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: modelConfig.model })
+                ] }),
+                modelConfig.temperature !== void 0 && /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Temperature" }),
+                  /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: modelConfig.temperature })
+                ] }),
+                modelConfig.maxOutputTokens && /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Max Tokens" }),
+                  /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: modelConfig.maxOutputTokens })
+                ] })
+              ] })
+            ] })
+          ] });
+        })(),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fw: 600, tt: "uppercase", mb: 8, children: "Actions" }),
+          /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "sm",
+                variant: "light",
+                leftSection: /* @__PURE__ */ jsx(IconArchive, { size: 16 }),
+                onClick: handleArchive,
+                fullWidth: true,
+                children: [
+                  session.isEnded ? "Reopen" : "End",
+                  " Session"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: "light",
+                leftSection: /* @__PURE__ */ jsx(IconDownload, { size: 16 }),
+                onClick: handleExport,
+                fullWidth: true,
+                children: "Export Session"
+              }
+            )
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--color-border)", padding: "var(--mantine-spacing-md)" }, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          fullWidth: true,
+          color: "red",
+          variant: "light",
+          leftSection: /* @__PURE__ */ jsx(IconTrash, { size: 16 }),
+          onClick: () => setShowConfirmation(true),
+          loading: isDeleting,
+          disabled: isDeleting,
+          children: "Delete Session"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ConfirmationModal,
+      {
+        opened: showConfirmation,
+        onClose: () => setShowConfirmation(false),
+        icon: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+        title: "Delete Session",
+        text: "Are you sure you want to delete this session? All messages and execution history will be permanently removed. This action cannot be undone.",
+        buttonText: "Delete Session",
+        buttonColor: "red",
+        confirmationHandler: handleConfirmDelete,
+        loading: isDeleting
+      }
+    )
+  ] });
+}
+function SessionChatArea({
+  sessionId,
+  session,
+  organizationName,
+  onDeleted,
+  renderConversationView
+}) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const [connectionState, setConnectionState] = useState({
+    isConnected: false,
+    isProcessing: false,
+    error: null
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        height: `calc(100vh - ${topbarHeight}px)`,
+        flexShrink: 0,
+        overflowX: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              gap: "16px",
+              transition: "margin-right var(--duration-normal) var(--easing)",
+              marginRight: isSidebarOpen ? "320px" : "0",
+              overflow: "hidden",
+              borderRadius: "var(--mantine-radius-md)",
+              position: "relative",
+              padding: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                SessionHeader,
+                {
+                  session,
+                  connectionState,
+                  onToggleSidebar: () => setIsSidebarOpen(!isSidebarOpen),
+                  isSidebarOpen
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx(
+                SessionChatInterface,
+                {
+                  sessionId,
+                  onConnectionStateChange: setConnectionState,
+                  renderConversationView
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SessionDetailsSidebar,
+          {
+            session,
+            isOpen: isSidebarOpen,
+            onClose: () => setIsSidebarOpen(false),
+            organizationName,
+            onDeleted
+          }
+        )
+      ]
+    }
+  );
+}
+function SessionExecutionLogs({ sessionId, session, buildExecutionUrl }) {
+  const { data: executions, isLoading } = useSessionExecutions(sessionId);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(IconTimeline, { size: 20 }),
+        /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Execution Logs" })
+      ] }),
+      /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) })
+    ] });
+  }
+  if (!executions || executions.executions.length === 0) {
+    return /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(IconTimeline, { size: 20 }),
+          /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Execution Logs" })
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", children: "0 turns" })
+      ] }),
+      /* @__PURE__ */ jsx(EmptyState, { icon: IconTimeline, title: "No execution logs yet" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(IconTimeline, { size: 20 }),
+        /* @__PURE__ */ jsx(Text, { fw: 600, size: "sm", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Execution Logs" })
+      ] }),
+      /* @__PURE__ */ jsxs(Badge, { size: "sm", variant: "light", children: [
+        executions.executions.length,
+        " ",
+        executions.executions.length === 1 ? "turn" : "turns"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { children: executions.executions.map((execution) => /* @__PURE__ */ jsx(
+      ExecutionItem,
+      {
+        execution,
+        session,
+        buildExecutionUrl
+      },
+      execution.executionId
+    )) })
+  ] });
+}
+function ExecutionItem({ execution, session: _session, buildExecutionUrl }) {
+  const statusConfig = getExecutionStatusConfig(execution.status);
+  const handleClick = () => {
+    const url = buildExecutionUrl(execution.executionId);
+    window.open(url, "_blank", "noopener,noreferrer");
+  };
+  return /* @__PURE__ */ jsx(
+    Paper,
+    {
+      p: "sm",
+      style: {
+        cursor: "pointer",
+        transition: "all var(--duration-fast) var(--easing)",
+        ":hover": {
+          backgroundColor: "var(--mantine-color-gray-0)"
+        }
+      },
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
+            "Turn ",
+            execution.turnNumber
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: statusConfig.color, children: statusConfig.label }),
+          execution.duration && /* @__PURE__ */ jsxs(Badge, { size: "xs", variant: "light", children: [
+            (execution.duration / 1e3).toFixed(2),
+            "s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatRelativeTime(execution.startedAt) }),
+          /* @__PURE__ */ jsx(IconExternalLink, { size: 16 })
+        ] })
+      ] })
+    }
+  );
+}
+function AgentChatOuterSubshellContainer({ children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        overflow: "auto",
+        minWidth: 0,
+        minHeight: `calc(100vh - ${topbarHeight}px)`,
+        paddingTop: `${topbarHeight}px`
+      },
+      children
+    }
+  );
+}
+function SessionChatPage({
+  sessionId,
+  isReady,
+  renderConversationView,
+  buildExecutionUrl,
+  buildSessionListUrl: _buildSessionListUrl,
+  organizationName
+}) {
+  const { data: session, isLoading: isSessionLoading } = useSession(sessionId);
+  if (!isReady || isSessionLoading) {
+    return /* @__PURE__ */ jsx(SubshellLoader, {});
+  }
+  if (!session) {
+    return /* @__PURE__ */ jsxs(Stack, { style: { flex: 1 }, children: [
+      /* @__PURE__ */ jsx(PageTitleCaption, { title: "Session Not Found", caption: `Session ${sessionId} not found` }),
+      /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "This session may have been deleted or does not exist." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    SessionChatPageContent,
+    {
+      sessionId,
+      session,
+      renderConversationView,
+      buildExecutionUrl,
+      organizationName
+    }
+  );
+}
+function SessionChatPageContent({
+  sessionId,
+  session,
+  renderConversationView,
+  buildExecutionUrl,
+  organizationName
+}) {
+  const { data: resourceDefinition } = useResourceDefinition(session.resourceId);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(AgentChatOuterSubshellContainer, { children: /* @__PURE__ */ jsxs(PageContainer, { children: [
+    /* @__PURE__ */ jsx(
+      SessionChatArea,
+      {
+        sessionId,
+        session,
+        organizationName,
+        renderConversationView
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { padding: "8px", display: "flex", flexDirection: "column", gap: "8px" }, children: /* @__PURE__ */ jsxs(Stack, { style: { flex: 1, height: "100%" }, children: [
+      resourceDefinition && /* @__PURE__ */ jsx(ResourceDefinitionSection, { resourceDefinition }),
+      /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { children: [
+        /* @__PURE__ */ jsx(SessionMemory, { memory: session.memorySnapshot }),
+        /* @__PURE__ */ jsx(SessionExecutionLogs, { sessionId, session, buildExecutionUrl })
+      ] }) })
+    ] }) })
+  ] }) }) });
+}
+function AgentSessionGroup({
+  group,
+  onAgentClick,
+  onSessionClick,
+  selectedSessionId,
+  onSessionDeleted
+}) {
+  const [isExpanded, setIsExpanded] = useState(group.isExpanded);
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const handleAgentClick = (e) => {
+    onAgentClick(group.resourceId);
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", style: { cursor: "pointer", userSelect: "none" }, children: [
+      /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "sm", onClick: toggleExpanded, children: isExpanded ? /* @__PURE__ */ jsx(IconChevronDown, { size: 16 }) : /* @__PURE__ */ jsx(IconChevronRight, { size: 16 }) }),
+      /* @__PURE__ */ jsxs(
+        Group,
+        {
+          gap: "xs",
+          onClick: handleAgentClick,
+          style: {
+            flex: 1,
+            padding: "4px 8px",
+            borderRadius: "var(--mantine-radius-default)",
+            transition: "background-color var(--duration-fast)"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = "var(--mantine-color-default-hover)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          },
+          children: [
+            /* @__PURE__ */ jsx(IconBrain, { size: 16, color: "var(--color-primary)" }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, style: { flex: 1, fontFamily: "var(--elevasis-font-family-subtitle)" }, children: group.agentName }),
+            group.sessions.length > 0 && /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "light", circle: true, children: group.sessions.length })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, children: /* @__PURE__ */ jsx(Stack, { gap: "xs", pl: "xs", children: group.sessions.length > 0 ? group.sessions.map((session) => /* @__PURE__ */ jsx(
+      SessionListItem,
+      {
+        session,
+        onClick: onSessionClick,
+        isSelected: selectedSessionId === session.sessionId,
+        onDeleted: onSessionDeleted
+      },
+      session.sessionId
+    )) : /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", fs: "italic", py: "sm", children: "No sessions" }) }) })
+  ] });
+}
+function SessionsSidebar({
+  isReady,
+  onAgentClick,
+  buildSessionDetailUrl,
+  sessionId,
+  agentParam
+}) {
+  const theme = useMantineTheme();
+  const { organizationReady } = useInitialization();
+  const { data: resourcesData, isLoading: isResourcesLoading } = useResources();
+  const agents = resourcesData?.agents || [];
+  const isSessionView = !!sessionId;
+  const { data: currentSession, isLoading: isCurrentSessionLoading } = useSession(sessionId || "");
+  const currentAgentResourceId = currentSession?.resourceId;
+  const { data: sessionsData, isLoading: isSessionsLoading } = useSessions(
+    currentAgentResourceId ? { resourceId: currentAgentResourceId } : void 0,
+    { enabled: !!currentAgentResourceId }
+  );
+  const agentSessions = isSessionView && currentAgentResourceId ? Array.isArray(sessionsData) ? sessionsData : [] : [];
+  const hasResourcesData = agents.length > 0;
+  const hasSessionsData = agentSessions.length > 0;
+  const isInitialLoading = !isReady || !organizationReady || isResourcesLoading && !hasResourcesData || isSessionView && (isCurrentSessionLoading || isSessionsLoading) && !hasSessionsData;
+  return /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minHeight: 0, padding: theme.spacing.sm }, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "dimmed", tt: "uppercase", mb: "md", children: isSessionView ? "Sessions" : "Agents" }),
+    /* @__PURE__ */ jsx(ScrollArea, { style: { height: "100%" }, scrollbarSize: 8, children: isInitialLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : isSessionView ? agentSessions.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: "xs", children: agentSessions.map((session) => /* @__PURE__ */ jsx(
+      SessionListItem,
+      {
+        session,
+        onClick: (id) => window.location.assign(buildSessionDetailUrl(id)),
+        isSelected: sessionId === session.sessionId
+      },
+      session.sessionId
+    )) }) : /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No sessions found" }) }) : agents.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: "xs", children: agents.map((agent) => /* @__PURE__ */ jsx(
+      AgentListItem,
+      {
+        agent,
+        isSelected: agentParam === agent.resourceId,
+        onAgentClick
+      },
+      agent.resourceId
+    )) }) : /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No agents found" }) }) })
+  ] });
+}
+function AgentListItem({ agent, isSelected, onAgentClick }) {
+  const theme = useMantineTheme();
+  const titleColor = isSelected ? "var(--color-primary)" : "var(--color-text)";
+  const descriptionColor = isSelected ? "var(--color-text)" : "var(--color-text-subtle)";
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      p: "sm",
+      style: {
+        cursor: "pointer",
+        backgroundColor: isSelected ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "transparent",
+        boxShadow: "none",
+        border: "none",
+        transition: "all var(--duration-fast) var(--easing)"
+      },
+      onClick: () => onAgentClick(agent.resourceId),
+      children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
+        /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(IconBrain, { size: 16, color: theme.colors[theme.primaryColor][6] }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: titleColor, children: agent.name })
+        ] }),
+        agent.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: descriptionColor, lineClamp: 2, children: agent.description })
+      ] })
+    }
+  );
+}
 
-export { AgentExecutionPanel, CalibrationPage, CalibrationProjectDetailPage, CalibrationProjectsPage, CalibrationRunDetailPage, CommandQueueDetailPage, CommandQueuePage, CommandViewPage, CommandViewSidebarContent, ExecutionPanel, ResourceDetailPage, ResourcesPage, ResourcesSidebar, WorkflowExecutionPanel };
+export { AgentExecutionPanel, AgentSessionGroup, CalibrationPage, CalibrationProgress, CalibrationProjectDetailPage, CalibrationProjectsPage, CalibrationRunDetailPage, CalibrationSidebar, CommandQueueDetailPage, CommandQueuePage, CommandViewPage, CommandViewSidebarContent, ExecutionPanel, ResourceDetailPage, ResourcesPage, ResourcesSidebar, SessionChatArea, SessionChatInterface, SessionChatPage, SessionDetailsSidebar, SessionExecutionLogs, SessionHeader, SessionListItem, SessionsPage, SessionsSidebar, WorkflowExecutionPanel };