@elevasis/ui 2.2.1 → 2.3.1

package/dist/components/index.js

@@ -1,32 +1,34 @@
 import { useBreadcrumbs } from '../chunk-MG3NF7QL.js';
 import '../chunk-SMJLS23U.js';
-import { NotificationList } from '../chunk-2JTCPVZX.js';
-export { ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, BusinessImpactCard, CostBreakdownCard, CostByModelTable, CostMetricsCard, ErrorAnalysisCard, ErrorBreakdownTable, ExecutionBreakdownTable, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, NotificationItem, NotificationList, monitoringManifest } from '../chunk-2JTCPVZX.js';
-export { CreateCredentialModal, CredentialList, CredentialSettings, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OrganizationMembershipsList, WebhookUrlDisplayModal, settingsManifest } from '../chunk-5KBVISVJ.js';
+import { NotificationList } from '../chunk-3MQKSLZ7.js';
+export { ActivityCard, ActivityFilters as ActivityFiltersBar, ActivityTable, BusinessImpactCard, CostBreakdownCard, CostByModelTable, CostMetricsCard, ErrorAnalysisCard, ErrorBreakdownTable, ExecutionBreakdownTable, ExecutionHealthCard, ExecutionLogsFilters as ExecutionLogsFilterBar, ExecutionLogsTable, NotificationItem, NotificationList, monitoringManifest } from '../chunk-3MQKSLZ7.js';
+export { CreateCredentialModal, CredentialList, CredentialSettings, MembershipFeaturePanel, MembershipStatusBadge, OAuthConnectModal, OrganizationMembershipsList, WebhookUrlDisplayModal, settingsManifest } from '../chunk-WN764MR7.js';
 import { FilterBar } from '../chunk-PDHTXPSF.js';
 export { FilterBar } from '../chunk-PDHTXPSF.js';
-import { ResourceExecuteDialog } from '../chunk-YOZEGIZA.js';
-export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, CommandViewEdge, CommandViewGraph, CommandViewNode, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecutionErrorSection, FormFieldRenderer, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, OperationsSidebar, OperationsSidebarMiddle, OperationsSidebarTop, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceNotFoundState, SessionMemory, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, operationsManifest, useNewKnowledgeMapLayout } from '../chunk-YOZEGIZA.js';
+import { ResourceExecuteDialog } from '../chunk-U2CEWNXK.js';
+export { ActionModal, AgentDefinitionDisplay, AgentExecutionLogs, BaseExecutionLogs, BaseExecutionLogsHeader, BaseExecutionLogsStates, CheckpointGroup, CollapsibleJsonSection, CommandQueueSidebar, CommandQueueSidebarMiddle, CommandQueueSidebarTop, CommandQueueTaskRow, ConfigCard, ContentSections, ContextUsageBadge, ContractDisplay, ExecutionErrorSection, FormFieldRenderer, LogEntry, LogGroup, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, OperationsSidebar, OperationsSidebarMiddle, OperationsSidebarTop, ResourceDefinitionSection, ResourceErrorState, ResourceFilter, ResourceHeader, ResourceNotFoundState, SessionMemory, ToolsListDisplay, WorkflowDefinitionDisplay, WorkflowExecutionLogs, getExecutionStatusConfig, getIcon, getLogLevelConfig, iconMap, operationsManifest, useNewKnowledgeMapLayout } from '../chunk-U2CEWNXK.js';
 import '../chunk-ROSMICXG.js';
 import { SubshellLoader, PageContainer, SubshellSidebarSection, SubshellNavItem, CollapsibleSidebarGroup } from '../chunk-OCP2MBTY.js';
-export { ResourceHealthPanel } from '../chunk-PFONCU6C.js';
+export { ResourceHealthPanel } from '../chunk-ZG7MLOBE.js';
 import { CustomModal } from '../chunk-GBMNCNHX.js';
 export { ConfirmationInputModal, ConfirmationModal, CustomModal } from '../chunk-GBMNCNHX.js';
-export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowExecutionTimeline, dashboardManifest, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme } from '../chunk-O6KZ46EJ.js';
+import { BaseNode, useGraphTheme, BaseEdge, GraphBackground, GraphLegend, GraphFitViewButton } from '../chunk-2VEXBZNO.js';
+export { AgentExecutionTimeline, AgentExecutionVisualizer, AgentIterationEdge, AgentIterationNode, BaseEdge, BaseNode, EmptyVisualizer, ExecutionStats, ExecutionStatusBadge, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, TimelineAxis, TimelineBar, TimelineContainer, TimelineRow, UnifiedWorkflowEdge, UnifiedWorkflowGraph, UnifiedWorkflowNode, VisualizerContainer, WorkflowExecutionTimeline, dashboardManifest, getGraphBackgroundStyles, useGraphBackgroundStyles, useGraphTheme } from '../chunk-2VEXBZNO.js';
 export { ResourceHealthChart, getHealthColor } from '../chunk-LGKLC5MG.js';
 import '../chunk-KFICYU6S.js';
 import { AppShellLoader } from '../chunk-YEX4MQSY.js';
-import '../chunk-M66JAN7R.js';
-import { useUpdateApiKey, useDeleteApiKey, useCreateApiKey, useListApiKeys, useActivateDeployment, useDeactivateDeployment, useDeleteDeployment, useListDeployments, useProjects } from '../chunk-JT3FN6TE.js';
-import { usePaginationState, useDeploymentDocs, useResources, useCreateSchedule, useListSchedules, usePauseSchedule, useResumeSchedule, useCancelSchedule, useDeleteSchedule, useDealNotes, useCreateDealNote, useDeals, useSyncDealStage, dealKeys, useDealTasksDue, useCreateDealTask, useDeleteDeal, useTableSort, sortData, useTableSelection, useDealDetail, showApiErrorNotification, acquisitionListKeys, showSuccessNotification, useListsTelemetry, useLists, useCreateList, useList, useListProgress, useListExecutions, useResourceDefinition, useCompanies, useDeleteCompanies, useContacts, useDeleteContacts, useDeleteProject, useMarkAllAsRead, useNotifications, showErrorNotification } from '../chunk-J5TBNCMD.js';
-export { showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification } from '../chunk-J5TBNCMD.js';
+import '../chunk-VNUOQQNY.js';
+import { useUpdateApiKey, useDeleteApiKey, useCreateApiKey, useListApiKeys, useActivateDeployment, useDeactivateDeployment, useDeleteDeployment, useListDeployments, useProjects, useProject, useProjectNotes, useDeleteProject as useDeleteProject$1, useUpdateMilestone, useCreateNote } from '../chunk-PEZ4WOPF.js';
+import { useCommandViewLayout, usePaginationState, useDeploymentDocs, useResources, useCreateSchedule, useListSchedules, usePauseSchedule, useResumeSchedule, useCancelSchedule, useDeleteSchedule, useDealNotes, useCreateDealNote, useDeals, useSyncDealStage, dealKeys, useDealTasksDue, useCreateDealTask, useDeleteDeal, useTableSort, sortData, useTableSelection, useDealDetail, showApiErrorNotification, acquisitionListKeys, showSuccessNotification, useListsTelemetry, useLists, useCreateList, useList, useListProgress, useListExecutions, useResourceDefinition, useCompanies, useDeleteCompanies, useContacts, useDeleteContacts, useDeleteProject, useMarkAllAsRead, useNotifications, showErrorNotification } from '../chunk-IPRMGSCV.js';
+export { showApiErrorNotification, showErrorNotification, showInfoNotification, showSuccessNotification, showWarningNotification } from '../chunk-IPRMGSCV.js';
 import '../chunk-LXHZYSMQ.js';
-export { Graph_module_css_default as graphStyles } from '../chunk-F6RBK7NJ.js';
+import { Graph_module_css_default, useDirectedChainHighlighting, useNodeSelection, GRAPH_CONSTANTS } from '../chunk-22UVE3RA.js';
+export { Graph_module_css_default as graphStyles } from '../chunk-22UVE3RA.js';
 export { CONTAINER_CONSTANTS, SHARED_VIZ_CONSTANTS } from '../chunk-XA34RETF.js';
-import '../chunk-LH7RCX4Y.js';
-import '../chunk-3WMJWXZY.js';
+import '../chunk-JT7WDIZI.js';
+import '../chunk-47YILFON.js';
 import '../chunk-CYXZHBP4.js';
-import '../chunk-MZPVNRPL.js';
+import '../chunk-ISHNN42L.js';
 import { SubshellContainer, SubshellSidebar, SubshellRightSideContainer, SubshellContentContainer } from '../chunk-RX4UWZZR.js';
 import { ListSkeleton, EmptyState, PageTitleCaption, StatCard, CenteredErrorState, CardHeader, ActivityTimeline, StatusBadge } from '../chunk-Y3D3WFJG.js';
 export { APIErrorAlert, ActivityTimeline, CardHeader, CenteredErrorState, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, ElevasisLoader, EmptyState, FeatureUnavailableState, GlowDot, JsonViewer, ListSkeleton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, StatusBadge, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-Y3D3WFJG.js';
@@ -40,21 +42,23 @@ import { useAppearance } from '../chunk-QJ2KCHKX.js';
 import '../chunk-DT3QYZVU.js';
 import '../chunk-SLVC5OJ2.js';
 import '../chunk-RNP5R5I3.js';
-import { formatDateTime, PAGE_SIZE_DEFAULT, formatTimeAgo } from '../chunk-IOKL7BKE.js';
+import { getResourceIcon, getResourceColor, formatDateTime, PAGE_SIZE_DEFAULT, formatTimeAgo, formatDate } from '../chunk-IOKL7BKE.js';
 import '../chunk-MTJ43R2E.js';
 import { useInitialization } from '../chunk-TUXTSEAF.js';
 import '../chunk-DD3CCMCZ.js';
 import { useElevasisServices } from '../chunk-QEPXAWE2.js';
 import '../chunk-BRJ3QZ4E.js';
 import { useRouterContext } from '../chunk-Q7DJKLEN.js';
-import { Table, Group, Text, Button, Stack, Title, TextInput, Alert, Tooltip, ActionIcon, Paper, Code, CopyButton, SimpleGrid, Badge, Loader, Pagination, useMantineTheme, Box, ScrollArea, Select, Center, Card, SegmentedControl, Switch, Textarea, Divider, Menu, Timeline, ThemeIcon, Tabs, Anchor, Breadcrumbs as Breadcrumbs$1, Drawer, UnstyledButton, Modal, Checkbox, Progress, RingProgress, Collapse, Popover, Indicator } from '@mantine/core';
-import { IconAddressBook, IconBriefcase, IconTarget, IconChevronUp, IconChevronDown, IconSelector, IconTrash, IconPencil, IconAlertCircle, IconKey, IconCalendar, IconClock, IconAlertTriangle, IconExclamationMark, IconShieldLock, IconCheck, IconCopy, IconPlus, IconRocket, IconRefresh, IconPower, IconPlayerPlay, IconCircleCheck, IconTag, IconBook2, IconFileOff, IconList, IconCalendarRepeat, IconCalendarEvent, IconCalendarTime, IconRobot, IconGitBranch, IconSettings, IconExternalLink, IconDotsVertical, IconPlayerPause, IconPlayerStop, IconCalendarDue, IconCalendarStats, IconCalendarOff, IconListCheck, IconTrophy, IconClockExclamation, IconUser, IconLayoutGrid, IconColumns, IconFileInvoice, IconChecklist, IconHistory, IconSearch, IconTargetArrow, IconArrowLeft, IconFileText, IconX, IconBuilding, IconMailCheck, IconArrowRight, IconQuestionMark, IconSparkles, IconClockHour4, IconBuildingFactory2, IconUsers, IconChartBar, IconTrendingUp, IconHeartbeat, IconFlag, IconInbox, IconLock, IconChevronRight, IconDownload, IconMessageCircle, IconBell, IconNotes, IconFolderOpen, IconFolder, IconCheckbox, IconMail, IconPhone, IconNote } from '@tabler/icons-react';
+import { Stack, Group, ThemeIcon, Text, Badge, Box, Table, Button, Title, TextInput, Alert, Tooltip, ActionIcon, Paper, Code, CopyButton, SimpleGrid, Loader, Pagination, useMantineTheme, ScrollArea, Select, Center, Card, SegmentedControl, Switch, Textarea, Divider, Menu, Timeline, Tabs, Breadcrumbs as Breadcrumbs$1, Drawer, UnstyledButton, Modal, Checkbox, Anchor, Progress, RingProgress, Collapse, Popover, Indicator } from '@mantine/core';
+import { IconBrain, IconDatabase, IconMessage, IconAlertCircle, IconCircleX, IconCircleCheck, IconBolt, IconHandClick, IconClock, IconWebhook, IconExternalLink, IconAddressBook, IconBriefcase, IconTarget, IconChevronUp, IconChevronDown, IconSelector, IconTrash, IconPencil, IconKey, IconCalendar, IconAlertTriangle, IconExclamationMark, IconShieldLock, IconCheck, IconCopy, IconPlus, IconRocket, IconRefresh, IconPower, IconPlayerPlay, IconTag, IconBook2, IconFileOff, IconList, IconCalendarRepeat, IconCalendarEvent, IconCalendarTime, IconRobot, IconGitBranch, IconSettings, IconDotsVertical, IconPlayerPause, IconPlayerStop, IconCalendarDue, IconCalendarStats, IconCalendarOff, IconListCheck, IconTrophy, IconClockExclamation, IconUser, IconLayoutGrid, IconColumns, IconFileInvoice, IconChecklist, IconHistory, IconSearch, IconTargetArrow, IconArrowLeft, IconFileText, IconX, IconBuilding, IconMailCheck, IconArrowRight, IconQuestionMark, IconSparkles, IconClockHour4, IconBuildingFactory2, IconUsers, IconChartBar, IconTrendingUp, IconHeartbeat, IconFlag, IconInbox, IconLock, IconChevronRight, IconDownload, IconMessageCircle, IconBell, IconNotes, IconFolderOpen, IconFolder, IconCheckbox, IconMail, IconPhone, IconNote } from '@tabler/icons-react';
 import * as runtime from 'react/jsx-runtime';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useDisclosure } from '@mantine/hooks';
 import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { memo, forwardRef, useMemo, useImperativeHandle, useState, useEffect, useCallback, useRef } from 'react';
 import { useForm } from '@mantine/form';
+import { useReactFlow, ReactFlow, ReactFlowProvider } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
 import { Link, RichTextEditor as RichTextEditor$1 } from '@mantine/tiptap';
 import { useEditor } from '@tiptap/react';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -1737,7 +1741,7 @@ function getStatusColor(status) {
       return "gray";
   }
 }
-function formatDate(date) {
+function formatDate2(date) {
   if (!date) return "N/A";
   const d = typeof date === "string" ? new Date(date) : date;
   return d.toLocaleString("en-US", {
@@ -1777,7 +1781,7 @@ function ScheduleConfigDetails({ schedule }) {
           ] }),
           config.endAt && /* @__PURE__ */ jsxs(Table.Tr, { children: [
             /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "Ends" }) }),
-            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { children: formatDate(config.endAt) }) })
+            /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { children: formatDate2(config.endAt) }) })
           ] }),
           /* @__PURE__ */ jsxs(Table.Tr, { children: [
             /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "Overdue" }) }),
@@ -1799,7 +1803,7 @@ function ScheduleConfigDetails({ schedule }) {
           /* @__PURE__ */ jsxs(Table.Tr, { children: [
             /* @__PURE__ */ jsx(Table.Td, { w: 120, children: /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "Anchor" }) }),
             /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Text, { children: [
-              formatDate(config.anchorAt),
+              formatDate2(config.anchorAt),
               config.anchorLabel && ` (${config.anchorLabel})`
             ] }) })
           ] }),
@@ -1820,7 +1824,7 @@ function ScheduleConfigDetails({ schedule }) {
         ] }),
         /* @__PURE__ */ jsx(Stack, { gap: 4, children: config.items.map((item, i) => /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
           /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: i === schedule.currentStep ? "blue" : "gray", children: i + 1 }),
-          /* @__PURE__ */ jsx(Text, { children: formatDate(item.runAt) }),
+          /* @__PURE__ */ jsx(Text, { children: formatDate2(item.runAt) }),
           item.label && /* @__PURE__ */ jsxs(Text, { c: "dimmed", children: [
             "\u2014 ",
             item.label
@@ -1873,14 +1877,14 @@ function ScheduleDetailModal({ opened, onClose, schedule, resourceStatus }) {
             /* @__PURE__ */ jsx(IconClock, { size: 12, color: "var(--color-text-subtle)" }),
             /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "Next Run" })
           ] }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { children: formatDate(schedule.nextRunAt) }) })
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { children: formatDate2(schedule.nextRunAt) }) })
         ] }),
         /* @__PURE__ */ jsxs(Table.Tr, { children: [
           /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
             /* @__PURE__ */ jsx(IconCalendar, { size: 12, color: "var(--color-text-subtle)" }),
             /* @__PURE__ */ jsx(Text, { c: "dimmed", children: "Last Run" })
           ] }) }),
-          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { children: formatDate(schedule.lastRunAt) }) })
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { children: formatDate2(schedule.lastRunAt) }) })
         ] }),
         /* @__PURE__ */ jsxs(Table.Tr, { children: [
           /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
@@ -1907,11 +1911,11 @@ function ScheduleDetailModal({ opened, onClose, schedule, resourceStatus }) {
       /* @__PURE__ */ jsxs(Group, { gap: "lg", children: [
         /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
           "Created ",
-          formatDate(schedule.createdAt)
+          formatDate2(schedule.createdAt)
         ] }),
         /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
           "Updated ",
-          formatDate(schedule.updatedAt)
+          formatDate2(schedule.updatedAt)
         ] })
       ] }),
       /* @__PURE__ */ jsx(
@@ -2423,6 +2427,392 @@ var TaskScheduler = () => {
     )
   ] });
 };
+var triggerTypeIcons = {
+  webhook: IconWebhook,
+  schedule: IconClock,
+  manual: IconHandClick,
+  event: IconBolt
+};
+var connectionStatusIcons = {
+  connected: IconCircleCheck,
+  disconnected: IconCircleX,
+  error: IconAlertCircle
+};
+var statBubbleBase = {
+  minWidth: 20,
+  height: 20,
+  borderRadius: 10,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: 11,
+  fontWeight: 600,
+  padding: "0 6px",
+  color: "white",
+  boxShadow: "0 2px 4px rgba(0,0,0,0.2)"
+};
+var CommandViewNode = memo(function CommandViewNode2({ data, selected }) {
+  const Icon = getResourceIcon(data.type);
+  const color = getResourceColor(data.type);
+  const successCount = (data.type === "agent" || data.type === "workflow") && data.stats ? data.stats.successCount : 0;
+  const failureCount = (data.type === "agent" || data.type === "workflow") && data.stats ? data.stats.failureCount : 0;
+  const warningCount = (data.type === "agent" || data.type === "workflow") && data.stats ? data.stats.warningCount : 0;
+  const pendingCount = data.type === "human" && data.stats ? data.stats.pendingCount : 0;
+  const showBubbles = successCount > 0 || failureCount > 0 || warningCount > 0 || pendingCount > 0;
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    showBubbles && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: -8,
+          right: -8,
+          display: "flex",
+          gap: 4,
+          zIndex: 10
+        },
+        children: [
+          successCount > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...statBubbleBase,
+                background: "linear-gradient(135deg, var(--mantine-color-green-5), var(--mantine-color-green-7))"
+              },
+              children: successCount
+            }
+          ),
+          warningCount > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...statBubbleBase,
+                background: "linear-gradient(135deg, var(--mantine-color-yellow-5), var(--mantine-color-yellow-7))"
+              },
+              children: warningCount
+            }
+          ),
+          failureCount > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...statBubbleBase,
+                background: "linear-gradient(135deg, var(--mantine-color-red-5), var(--mantine-color-red-7))"
+              },
+              children: failureCount
+            }
+          ),
+          pendingCount > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                ...statBubbleBase,
+                background: "linear-gradient(135deg, var(--mantine-color-orange-5), var(--mantine-color-orange-7))"
+              },
+              children: pendingCount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(BaseNode, { color, selected, highlighted: Boolean(data.highlighted), children: /* @__PURE__ */ jsxs(Stack, { gap: 8, children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+        /* @__PURE__ */ jsx(
+          ThemeIcon,
+          {
+            size: "md",
+            variant: "gradient",
+            gradient: { from: `${color}.4`, to: `${color}.6`, deg: 135 },
+            className: Graph_module_css_default.nodeIcon,
+            children: /* @__PURE__ */ jsx(Icon, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, truncate: true, style: { flex: 1, fontFamily: "var(--elevasis-font-family-subtitle)" }, children: data.name })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: data.description }),
+      /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "wrap", children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "gradient",
+            gradient: data.status === "prod" ? { from: "green.5", to: "green.7", deg: 135 } : { from: "blue.5", to: "blue.7", deg: 135 },
+            className: data.status === "prod" ? Graph_module_css_default.badgeProd : "",
+            style: {
+              textTransform: "uppercase",
+              letterSpacing: "0.5px"
+            },
+            children: data.status
+          }
+        ),
+        data.type === "agent" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              size: "xs",
+              variant: "outline",
+              color: "gray",
+              className: Graph_module_css_default.badge,
+              style: { backdropFilter: "blur(4px)" },
+              children: [
+                data.toolCount,
+                " tools"
+              ]
+            }
+          ),
+          data.hasKnowledgeMap && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "xs",
+              variant: "gradient",
+              gradient: { from: "grape.5", to: "grape.7", deg: 135 },
+              leftSection: /* @__PURE__ */ jsx(IconBrain, { size: 10 }),
+              className: Graph_module_css_default.badge,
+              children: "KM"
+            }
+          ),
+          data.hasMemory && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "xs",
+              variant: "gradient",
+              gradient: { from: "cyan.5", to: "cyan.7", deg: 135 },
+              leftSection: /* @__PURE__ */ jsx(IconDatabase, { size: 10 }),
+              className: Graph_module_css_default.badge,
+              children: "Mem"
+            }
+          ),
+          data.sessionCapable && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "xs",
+              variant: "gradient",
+              gradient: { from: "blue.5", to: "blue.7", deg: 135 },
+              leftSection: /* @__PURE__ */ jsx(IconMessage, { size: 10 }),
+              className: Graph_module_css_default.badge,
+              children: "Session"
+            }
+          )
+        ] }),
+        data.type === "workflow" && /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            size: "xs",
+            variant: "outline",
+            color: "gray",
+            className: Graph_module_css_default.badge,
+            style: { backdropFilter: "blur(4px)" },
+            children: [
+              data.stepCount,
+              " steps"
+            ]
+          }
+        ),
+        data.type === "integration" && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "gradient",
+            gradient: data.connectionStatus === "connected" ? { from: "green.5", to: "green.7", deg: 135 } : data.connectionStatus === "error" ? { from: "red.5", to: "red.7", deg: 135 } : { from: "gray.5", to: "gray.7", deg: 135 },
+            leftSection: (() => {
+              const StatusIcon = connectionStatusIcons[data.connectionStatus];
+              return /* @__PURE__ */ jsx(StatusIcon, { size: 10 });
+            })(),
+            className: Graph_module_css_default.badge,
+            children: data.connectionStatus
+          }
+        ),
+        data.type === "trigger" && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "outline",
+            color: "gray",
+            leftSection: (() => {
+              const TriggerIcon = triggerTypeIcons[data.triggerType] || IconBolt;
+              return /* @__PURE__ */ jsx(TriggerIcon, { size: 10 });
+            })(),
+            className: Graph_module_css_default.badge,
+            style: { backdropFilter: "blur(4px)" },
+            children: data.triggerType
+          }
+        ),
+        data.type === "external" && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "outline",
+            color: "gray",
+            leftSection: /* @__PURE__ */ jsx(IconExternalLink, { size: 10 }),
+            className: Graph_module_css_default.badge,
+            style: { backdropFilter: "blur(4px)" },
+            children: data.platform
+          }
+        ),
+        data.type === "human" && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            size: "xs",
+            variant: "gradient",
+            gradient: { from: "yellow.5", to: "orange.6", deg: 135 },
+            leftSection: /* @__PURE__ */ jsx(IconHandClick, { size: 10 }),
+            className: Graph_module_css_default.badge,
+            children: "Approval Required"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+});
+var relationshipColorMap = {
+  triggers: { color: "edgeTriggers", glow: "edgeTriggersGlow" },
+  uses: { color: "edgeUses", glow: "edgeUsesGlow" },
+  approval: { color: "edgeApproval", glow: "edgeApprovalGlow" }
+};
+function getEdgeColors(relationship, colors) {
+  const mapping = relationshipColorMap[relationship] ?? relationshipColorMap.approval;
+  return {
+    edgeColor: colors[mapping.color],
+    glowColor: colors[mapping.glow]
+  };
+}
+var CommandViewEdge = memo(function CommandViewEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  selected
+}) {
+  const colors = useGraphTheme();
+  const relationship = data?.relationship || "uses";
+  const { edgeColor, glowColor } = getEdgeColors(relationship, colors);
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      color: edgeColor,
+      glowColor,
+      label: data?.label || relationship,
+      animated: data?.animated ?? false,
+      selected,
+      dimmed: data?.dimmed,
+      edgeIndex: data?.edgeIndex,
+      totalEdges: data?.totalEdges
+    }
+  );
+});
+var nodeTypes = {
+  commandView: CommandViewNode
+};
+var edgeTypes = {
+  commandView: CommandViewEdge
+};
+var CommandViewGraphInner = forwardRef(function CommandViewGraphInner2({ graph, height, selectedNodeId, onNodeSelect }, ref) {
+  const { fitView } = useReactFlow();
+  const { nodes: layoutNodes, edges: layoutEdges } = useCommandViewLayout(graph);
+  const { nodes, edges, handleNodeMouseEnter, handleNodeMouseLeave } = useDirectedChainHighlighting(
+    layoutNodes,
+    layoutEdges,
+    { selectedNodeId }
+  );
+  const { handleNodeClick, handlePaneClick } = useNodeSelection(selectedNodeId ?? null, onNodeSelect ?? (() => {
+  }));
+  const nodesWithSelection = useMemo(
+    () => nodes.map((node) => ({
+      ...node,
+      selected: node.id === selectedNodeId
+    })),
+    [nodes, selectedNodeId]
+  );
+  useImperativeHandle(ref, () => ({
+    fitView: () => fitView({ padding: 0.15, duration: 300 })
+  }));
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: `elevasis-graph-root ${Graph_module_css_default.graphContainer}`,
+      style: {
+        width: "100%",
+        height,
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--mantine-radius-default)",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes: nodesWithSelection,
+          edges,
+          nodeTypes,
+          edgeTypes,
+          onNodeMouseEnter: handleNodeMouseEnter,
+          onNodeMouseLeave: handleNodeMouseLeave,
+          onNodeClick: onNodeSelect ? handleNodeClick : void 0,
+          onPaneClick: onNodeSelect ? handlePaneClick : void 0,
+          fitView: true,
+          fitViewOptions: { padding: 0.15 },
+          proOptions: { hideAttribution: true },
+          minZoom: GRAPH_CONSTANTS.MIN_ZOOM,
+          maxZoom: GRAPH_CONSTANTS.MAX_ZOOM,
+          nodesDraggable: false,
+          nodesConnectable: false,
+          elementsSelectable: !!onNodeSelect,
+          selectNodesOnDrag: false,
+          panOnDrag: true,
+          zoomOnScroll: true,
+          zoomOnPinch: true,
+          panOnScroll: false,
+          children: [
+            /* @__PURE__ */ jsx(GraphBackground, {}),
+            /* @__PURE__ */ jsx(
+              GraphLegend,
+              {
+                title: "",
+                position: "bottom-right",
+                items: [
+                  { color: "orange", label: "Triggers" },
+                  { color: "violet", label: "Agents" },
+                  { color: "blue", label: "Workflows" },
+                  { color: "teal", label: "Integrations" },
+                  { color: "yellow", label: "Human" },
+                  { color: "gray", label: "External" }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              GraphLegend,
+              {
+                title: "",
+                position: "bottom-left",
+                items: [
+                  { color: "blue", label: "Triggers", type: "line" },
+                  { color: "teal", label: "Uses", type: "line" },
+                  { color: "yellow", label: "Requires Approval", type: "line" }
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(GraphFitViewButton, { padding: 0.15, variant: "mantine", duration: 300 })
+          ]
+        }
+      )
+    }
+  );
+});
+var CommandViewGraph = forwardRef(
+  function CommandViewGraph2(props, ref) {
+    return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(CommandViewGraphInner, { ref, ...props }) });
+  }
+);
 var tokens = {
   cardBg: "rgba(16, 16, 20, 0.92)",
   cardBorder: "rgba(255, 255, 255, 0.06)",
@@ -3029,13 +3419,13 @@ var Breadcrumbs = ({ navItems }) => {
       return /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "var(--color-text)", children: item.label }, item.path || item.label);
     }
     return item.path ? /* @__PURE__ */ jsx(
-      Anchor,
+      Text,
       {
         component: Link4,
         to: item.path,
         size: "sm",
+        c: "var(--color-text-subtle)",
         style: {
-          color: "var(--color-text-subtle)",
           textDecoration: "none",
           fontWeight: 500
         },
@@ -3044,7 +3434,18 @@ var Breadcrumbs = ({ navItems }) => {
       item.path
     ) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-subtle)", children: item.label }, item.label);
   });
-  return /* @__PURE__ */ jsx(Breadcrumbs$1, { separator: "/", children: items });
+  return /* @__PURE__ */ jsx(
+    Breadcrumbs$1,
+    {
+      separator: "/",
+      styles: {
+        separator: {
+          color: "var(--color-text-subtle)"
+        }
+      },
+      children: items
+    }
+  );
 };
 function DealKanbanCard({ deal, config, onClick, onDragStart, onDragEnd }) {
   const contactFirstName = deal.contact?.first_name || "";
@@ -4556,7 +4957,7 @@ function LeadGenRouteShell({
     ] }) })
   ] }) }) });
 }
-function formatDate2(dateValue) {
+function formatDate3(dateValue) {
   const date = typeof dateValue === "string" ? new Date(dateValue) : dateValue;
   return date.toLocaleDateString("en-US", {
     month: "short",
@@ -4650,8 +5051,8 @@ function CompanyDetailModal({ company, onClose }) {
     ] }),
     /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
       "Created: ",
-      formatDate2(company.createdAt),
-      company.updatedAt && ` | Updated: ${formatDate2(company.updatedAt)}`
+      formatDate3(company.createdAt),
+      company.updatedAt && ` | Updated: ${formatDate3(company.updatedAt)}`
     ] })
   ] }) : null });
 }
@@ -4703,8 +5104,8 @@ function ContactDetailModal({ contact, onClose }) {
     ] }) : null,
     /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
       "Created: ",
-      formatDate2(contact.createdAt),
-      contact.updatedAt && ` | Updated: ${formatDate2(contact.updatedAt)}`
+      formatDate3(contact.createdAt),
+      contact.updatedAt && ` | Updated: ${formatDate3(contact.updatedAt)}`
     ] })
   ] }) : null });
 }
@@ -5503,7 +5904,7 @@ function LeadGenListsPage() {
               /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { fw: 500, children: list.name }) }),
               /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: list.description || "-" }) }),
               /* @__PURE__ */ jsx(Table.Td, { children: contactCountByListId.get(list.id) ?? 0 }),
-              /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDate2(list.createdAt) }) })
+              /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDate3(list.createdAt) }) })
             ]
           },
           list.id
@@ -6358,7 +6759,7 @@ function ringValue(completed, total) {
   if (total === 0) return 0;
   return Math.round(completed / total * 100);
 }
-function formatDate3(iso) {
+function formatDate4(iso) {
   return new Date(iso).toLocaleDateString();
 }
 function daysRelative(targetEndDate) {
@@ -6446,17 +6847,17 @@ function HealthStatusCard({
       ] }),
       /* @__PURE__ */ jsx(Stack, { gap: 2, children: startDate && targetEndDate ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
-          formatDate3(startDate),
+          formatDate4(startDate),
           " \u2192 ",
-          formatDate3(targetEndDate)
+          formatDate4(targetEndDate)
         ] }),
         timeInfo && /* @__PURE__ */ jsx(Text, { size: "xs", c: timeInfo.overdue ? "red" : "dimmed", children: timeInfo.label })
       ] }) : startDate ? /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
         "Started ",
-        formatDate3(startDate)
+        formatDate4(startDate)
       ] }) : targetEndDate ? /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
         "Due ",
-        formatDate3(targetEndDate)
+        formatDate4(targetEndDate)
       ] }) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "No dates set" }) })
     ] }) })
   ] });
@@ -6842,6 +7243,414 @@ function ProjectsListPage({ onProjectClick } = {}) {
     )
   ] });
 }
+var noteTypeOptions = [
+  { value: "call_note", label: "Call Note" },
+  { value: "status_update", label: "Status Update" },
+  { value: "issue", label: "Issue" },
+  { value: "blocker", label: "Blocker" }
+];
+function parseChecklist(milestone) {
+  const raw = milestone.checklist;
+  if (!Array.isArray(raw)) return [];
+  return raw;
+}
+function MilestoneChecklist({ milestone }) {
+  const items = parseChecklist(milestone);
+  const { mutate: updateMilestone } = useUpdateMilestone();
+  const [newItemLabel, setNewItemLabel] = useState("");
+  const [adding, setAdding] = useState(false);
+  function saveChecklist(updated) {
+    const allComplete = updated.length > 0 && updated.every((item) => item.completed);
+    const wasComplete = milestone.status === "completed";
+    const updates = {
+      checklist: updated
+    };
+    if (allComplete && !wasComplete) {
+      updates.status = "completed";
+      updates.completed_at = (/* @__PURE__ */ new Date()).toISOString();
+    } else if (!allComplete && wasComplete) {
+      updates.status = "in_progress";
+      updates.completed_at = null;
+    }
+    updateMilestone({ id: milestone.id, updates });
+  }
+  function toggleItem(itemId) {
+    const updated = items.map((item) => item.id === itemId ? { ...item, completed: !item.completed } : item);
+    saveChecklist(updated);
+  }
+  function addItem() {
+    const label = newItemLabel.trim();
+    if (!label) return;
+    const newItem = { id: crypto.randomUUID(), label, completed: false };
+    saveChecklist([...items, newItem]);
+    setNewItemLabel("");
+  }
+  function removeItem(itemId) {
+    saveChecklist(items.filter((item) => item.id !== itemId));
+  }
+  const completedCount = items.filter((item) => item.completed).length;
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", mt: "sm", children: [
+    items.length > 0 && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+      completedCount,
+      "/",
+      items.length,
+      " complete"
+    ] }),
+    items.map((item) => /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          size: "xs",
+          checked: item.completed,
+          onChange: () => toggleItem(item.id),
+          label: /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "sm",
+              td: item.completed ? "line-through" : void 0,
+              c: item.completed ? "dimmed" : "var(--color-text-subtle)",
+              children: item.label
+            }
+          ),
+          styles: { input: { cursor: "pointer" }, label: { cursor: "pointer" } }
+        }
+      ),
+      /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", size: "xs", onClick: () => removeItem(item.id), style: { opacity: 0.4 }, children: /* @__PURE__ */ jsx(IconX, { size: 12 }) })
+    ] }, item.id)),
+    adding ? /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        size: "xs",
+        placeholder: "Item label...",
+        value: newItemLabel,
+        onChange: (event) => setNewItemLabel(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            addItem();
+            setAdding(false);
+          }
+          if (event.key === "Escape") {
+            setNewItemLabel("");
+            setAdding(false);
+          }
+        },
+        onBlur: () => {
+          if (newItemLabel.trim()) addItem();
+          setAdding(false);
+        },
+        autoFocus: true,
+        style: { maxWidth: 250 }
+      }
+    ) : /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(Button, { variant: "subtle", size: "compact-xs", leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 12 }), onClick: () => setAdding(true), children: "Add item" }) })
+  ] });
+}
+function AddNoteModal({ opened, onClose, projectId }) {
+  const [noteType, setNoteType] = useState("call_note");
+  const [content, setContent] = useState("");
+  const [summary, setSummary] = useState("");
+  const { mutate: createNote, isPending } = useCreateNote();
+  function handleSubmit() {
+    if (!content.trim() || !noteType) return;
+    createNote(
+      {
+        project_id: projectId,
+        type: noteType,
+        content: content.trim(),
+        summary: summary.trim() || null
+      },
+      {
+        onSuccess: () => {
+          setContent("");
+          setSummary("");
+          setNoteType("call_note");
+          onClose();
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(CustomModal, { opened, onClose, size: "md", loading: isPending, children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+    /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Add Note" }),
+      /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", onClick: onClose, disabled: isPending, children: /* @__PURE__ */ jsx(IconX, { size: 18 }) })
+    ] }),
+    /* @__PURE__ */ jsx(Select, { label: "Type", data: noteTypeOptions, value: noteType, onChange: setNoteType, required: true }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Summary",
+        placeholder: "Brief summary (optional)",
+        value: summary,
+        onChange: (event) => setSummary(event.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        label: "Content",
+        placeholder: "Note content...",
+        minRows: 4,
+        value: content,
+        onChange: (event) => setContent(event.target.value),
+        required: true
+      }
+    ),
+    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "light", onClick: onClose, disabled: isPending, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, loading: isPending, disabled: !content.trim() || !noteType, children: "Add Note" })
+    ] })
+  ] }) });
+}
+function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
+  const { data: project, isLoading, error } = useProject(projectId);
+  const { data: notes } = useProjectNotes({ projectId });
+  const { mutate: deleteProject, isPending: isDeleting } = useDeleteProject$1();
+  const [addNoteOpen, setAddNoteOpen] = useState(false);
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsx(Center, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsx(Center, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Alert, { color: "red", children: "Error loading project" }) }) });
+  }
+  if (!project) {
+    return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsx(Center, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Alert, { color: "yellow", children: "Project not found" }) }) });
+  }
+  const milestones = project.milestones ?? [];
+  const tasks = project.tasks ?? [];
+  const totalMilestones = milestones.length;
+  const completedMilestones = milestones.filter((milestone) => milestone.status === "completed").length;
+  const totalTasks = tasks.length;
+  const approvedTasks = tasks.filter((task) => task.status === "approved").length;
+  const milestoneProgress = calculateProgress(completedMilestones, totalMilestones);
+  const taskProgress = calculateProgress(approvedTasks, totalTasks);
+  const companyName = project.company?.name ?? null;
+  return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsx(PageContainer, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsx(
+      PageTitleCaption,
+      {
+        title: project.name,
+        caption: [companyName, formatStatusLabel(project.status || "unknown")].filter(Boolean).join(" - "),
+        rightSection: /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(Button, { variant: "light", size: "sm", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }), onClick: onBack, children: backLabel }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(SimpleGrid, { cols: 4, children: [
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconHeartbeat,
+          value: formatStatusLabel(project.status || "unknown"),
+          label: "Status",
+          valueColor: `var(--mantine-color-${projectStatusColors[project.status || ""] || "gray"}-6)`
+        }
+      ),
+      /* @__PURE__ */ jsx(StatCard, { variant: "hero", icon: IconFlag, value: `${completedMilestones}/${totalMilestones}`, label: "Milestones", children: /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+        milestoneProgress,
+        "% complete"
+      ] }) }),
+      /* @__PURE__ */ jsx(StatCard, { variant: "hero", icon: IconChecklist, value: `${approvedTasks}/${totalTasks}`, label: "Tasks", children: /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+        taskProgress,
+        "% complete"
+      ] }) }),
+      /* @__PURE__ */ jsx(StatCard, { variant: "hero", icon: IconCalendar, value: project.start_date ? formatDate(project.start_date) : "-", label: "Timeline", children: project.target_end_date && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+        "to ",
+        formatDate(project.target_end_date)
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Paper,
+      {
+        p: "md",
+        style: {
+          border: "1px solid var(--color-border)",
+          borderRadius: "var(--mantine-radius-default)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+            /* @__PURE__ */ jsxs(Group, { justify: "space-between", wrap: "wrap", children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+                /* @__PURE__ */ jsx(Title, { order: 3, children: "Project Details" }),
+                /* @__PURE__ */ jsx(Badge, { variant: "light", color: projectStatusColors[project.status || ""] || "gray", children: formatStatusLabel(project.status || "unknown") })
+              ] }),
+              /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "var(--color-text-subtle)", children: project.id }),
+                /* @__PURE__ */ jsx(CopyButton, { value: project.id, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy ID", withArrow: true, children: /* @__PURE__ */ jsx(ActionIcon, { onClick: copy, variant: "subtle", size: "xs", color: copied ? "green" : "var(--color-text-subtle)", children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: 14 }) : /* @__PURE__ */ jsx(IconCopy, { size: 14 }) }) }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Group, { gap: "lg", children: [
+              project.start_date && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Started:" }),
+                /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(project.start_date) })
+              ] }),
+              project.target_end_date && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Target:" }),
+                /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(project.target_end_date) })
+              ] }),
+              project.contract_value != null && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Contract:" }),
+                /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+                  "$",
+                  project.contract_value.toLocaleString(),
+                  project.metadata && project.metadata.rate_type === "hourly" ? "/hr" : ""
+                ] })
+              ] }),
+              project.company && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Company:" }),
+                /* @__PURE__ */ jsx(Text, { size: "sm", children: project.company.name })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, { my: "md" }),
+          /* @__PURE__ */ jsxs(Tabs, { defaultValue: "status", children: [
+            /* @__PURE__ */ jsxs(Tabs.List, { children: [
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "status", children: "Status" }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "details", children: "Details" }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "notes", children: "Notes" }),
+              /* @__PURE__ */ jsx(Tabs.Tab, { value: "activity", children: "Activity" })
+            ] }),
+            /* @__PURE__ */ jsx(Tabs.Panel, { value: "status", pt: "md", children: milestones.length === 0 ? /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: "No milestones yet." }) : /* @__PURE__ */ jsx(
+              Timeline,
+              {
+                active: completedMilestones,
+                bulletSize: 20,
+                color: "var(--color-primary)",
+                styles: {
+                  itemBullet: {
+                    borderColor: "color-mix(in srgb, var(--color-primary) 40%, transparent)",
+                    backgroundColor: "var(--color-surface)"
+                  },
+                  item: {
+                    "--_item-border-color": "color-mix(in srgb, var(--color-primary) 25%, transparent)"
+                  },
+                  itemTitle: {
+                    color: "var(--color-text)"
+                  }
+                },
+                children: milestones.map((milestone) => {
+                  const milestoneTasks = tasks.filter((task) => task.milestone_id === milestone.id);
+                  return /* @__PURE__ */ jsxs(
+                    Timeline.Item,
+                    {
+                      bullet: milestone.status === "completed" ? /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            width: 12,
+                            height: 12,
+                            borderRadius: "50%",
+                            backgroundColor: "var(--color-primary)",
+                            boxShadow: "0 0 8px var(--color-primary), 0 0 16px color-mix(in srgb, var(--color-primary) 50%, transparent)"
+                          }
+                        }
+                      ) : void 0,
+                      title: /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                        /* @__PURE__ */ jsx(Text, { fw: 500, children: milestone.name }),
+                        /* @__PURE__ */ jsx(Badge, { variant: "light", color: milestoneStatusColors[milestone.status || ""] || "gray", size: "sm", children: formatStatusLabel(milestone.status || "unknown") }),
+                        milestone.due_date && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+                          "Due ",
+                          formatDate(milestone.due_date)
+                        ] })
+                      ] }),
+                      children: [
+                        milestone.description && /* @__PURE__ */ jsx(Text, { size: "sm", mt: "xs", children: milestone.description }),
+                        /* @__PURE__ */ jsx(MilestoneChecklist, { milestone }),
+                        milestoneTasks.length > 0 && /* @__PURE__ */ jsx(Stack, { gap: "xs", mt: "sm", children: milestoneTasks.map((task) => /* @__PURE__ */ jsx(Card, { withBorder: true, p: "xs", children: /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", children: [
+                          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: task.name }),
+                          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                            /* @__PURE__ */ jsx(Badge, { variant: "light", color: taskTypeColors[task.type || ""] || "gray", size: "xs", children: formatStatusLabel(task.type || "other") }),
+                            /* @__PURE__ */ jsx(Badge, { variant: "light", color: taskStatusColors[task.status || ""] || "gray", size: "xs", children: formatStatusLabel(task.status || "pending") })
+                          ] })
+                        ] }) }, task.id)) })
+                      ]
+                    },
+                    milestone.id
+                  );
+                })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Tabs.Panel, { value: "details", pt: "md", children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+              /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+                /* @__PURE__ */ jsx(Title, { order: 3, children: "Project Details" }),
+                project.description && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Description" }),
+                  /* @__PURE__ */ jsx(Text, { size: "sm", children: project.description })
+                ] }),
+                project.contract_value != null && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Contract Value" }),
+                  /* @__PURE__ */ jsxs(Text, { size: "sm", fw: 500, children: [
+                    "$",
+                    project.contract_value.toLocaleString()
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(SimpleGrid, { cols: 3, children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Start Date" }),
+                    /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(project.start_date) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Target End Date" }),
+                    /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(project.target_end_date) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Actual End Date" }),
+                    /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(project.actual_end_date) })
+                  ] })
+                ] })
+              ] }) }),
+              project.company && /* @__PURE__ */ jsx(Paper, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+                /* @__PURE__ */ jsx(Title, { order: 3, children: "Company" }),
+                /* @__PURE__ */ jsx(Text, { fw: 500, children: project.company.name }),
+                project.company.domain && /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: project.company.domain })
+              ] }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(Tabs.Panel, { value: "notes", pt: "md", children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+              /* @__PURE__ */ jsx(Group, { justify: "flex-end", children: /* @__PURE__ */ jsx(Button, { variant: "light", size: "sm", leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 16 }), onClick: () => setAddNoteOpen(true), children: "Add Note" }) }),
+              !notes?.length ? /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: "No notes yet." }) : /* @__PURE__ */ jsx(Stack, { gap: "sm", children: notes.map((note) => /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+                /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+                  /* @__PURE__ */ jsx(Badge, { variant: "light", color: noteTypeColors[note.type || ""] || "gray", size: "sm", children: formatStatusLabel(note.type || "note") }),
+                  /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: formatTimeAgo(note.occurred_at) })
+                ] }),
+                note.summary && /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: note.summary }),
+                /* @__PURE__ */ jsx(Text, { size: "sm", children: note.content })
+              ] }) }, note.id)) })
+            ] }) }),
+            /* @__PURE__ */ jsx(Tabs.Panel, { value: "activity", pt: "md", children: /* @__PURE__ */ jsx(Text, { c: "dimmed", size: "sm", children: "Activity feed coming soon." }) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AddNoteModal, { opened: addNoteOpen, onClose: () => setAddNoteOpen(false), projectId }),
+    /* @__PURE__ */ jsx(CustomModal, { opened: deleteModalOpen, onClose: () => setDeleteModalOpen(false), size: "sm", children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+      /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", children: [
+        /* @__PURE__ */ jsx(Title, { order: 4, children: "Delete project" }),
+        /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", onClick: () => setDeleteModalOpen(false), children: /* @__PURE__ */ jsx(IconX, { size: 18 }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+        "Are you sure you want to delete ",
+        /* @__PURE__ */ jsx("strong", { children: project.name }),
+        "? This cannot be undone."
+      ] }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "default", onClick: () => setDeleteModalOpen(false), disabled: isDeleting, children: "Cancel" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            color: "red",
+            loading: isDeleting,
+            onClick: () => deleteProject(project.id, {
+              onSuccess: () => {
+                setDeleteModalOpen(false);
+                onBack();
+              }
+            }),
+            children: "Delete project"
+          }
+        )
+      ] })
+    ] }) })
+  ] }) }) });
+}
 function NotificationPanel({ notifications, isLoading, onClose, onNavigate }) {
   const markAllAsRead = useMarkAllAsRead();
   const hasUnread = notifications.some((n) => !n.read);
@@ -6894,4 +7703,4 @@ function NotificationBell({ unreadCount, onNavigate }) {
   ] });
 }
 
-export { AbsoluteScheduleForm, ActivityFeedWidget, ApiKeyDisplayModal, ApiKeyList, ApiKeySettings, Breadcrumbs, CrashErrorFallback, CreateApiKeyModal, CreateScheduleModal, CrmOverview, CrmSidebar, CrmSidebarMiddle, CrmSidebarTop, DEAL_STAGES, DEFAULT_KANBAN_CONFIG, DealDetailPage, DealDrawer, DealKanbanCard, DealsListPage, DeleteScheduleModal, DeploymentDetailModal, DeploymentList, DeploymentSettings, DeploymentStatusBadge, DocTreeNav, EditApiKeyModal, ErrorReportCard, HealthStatusCard, KanbanBoard, KnowledgeBasePage, LEAD_GEN_ROUTE_LINKS, LIST_TEMPLATE_OPTIONS, LeadGenCompaniesPage, LeadGenContactsPage, LeadGenDeliverabilityPage, LeadGenListDetailPage, LeadGenListsPage, LeadGenOverviewPage, LeadGenRouteShell, LeadGenSidebar, LeadGenSidebarMiddle, LeadGenSidebarTop, MdxRenderer, MetricsStrip, MilestoneTimeline, MyTasksPanel, NotificationBell, NotificationPanel, PIPELINE_FUNNEL_ORDER, PipelineFunnelWidget, ProjectsListPage, ProjectsSidebar, ProjectsSidebarMiddle, ProjectsSidebarTop, QuickCreateActions, RecurringScheduleForm, RelativeScheduleForm, RichTextEditor, SAVED_VIEW_PRESETS, SEOSidebar, SEOSidebarMiddle, SEOSidebarTop, SavedViewsPanel, ScheduleCard, ScheduleDetailModal, ScheduleTypeSelector, SortableHeader, TableSelectionToolbar, TaskCard, TaskScheduler, TasksDueWidget, buildErrorReport, buildListConfig, calculateProgress, crmManifest, deliveryManifest, formatStatusLabel, getEnrichmentColor, getStatusColor3 as getStatusColor, leadGenManifest, mdxComponents, milestoneStatusColors, noteTypeColors, projectStatusColors, seoManifest, taskStatusColors, taskTypeColors, useCrmPipelineSummary, useCrmQuickMetrics, useDeleteLists, useRecentCrmActivity };
+export { AbsoluteScheduleForm, ActivityFeedWidget, ApiKeyDisplayModal, ApiKeyList, ApiKeySettings, Breadcrumbs, CommandViewEdge, CommandViewGraph, CommandViewNode, CrashErrorFallback, CreateApiKeyModal, CreateScheduleModal, CrmOverview, CrmSidebar, CrmSidebarMiddle, CrmSidebarTop, DEAL_STAGES, DEFAULT_KANBAN_CONFIG, DealDetailPage, DealDrawer, DealKanbanCard, DealsListPage, DeleteScheduleModal, DeploymentDetailModal, DeploymentList, DeploymentSettings, DeploymentStatusBadge, DocTreeNav, EditApiKeyModal, ErrorReportCard, HealthStatusCard, KanbanBoard, KnowledgeBasePage, LEAD_GEN_ROUTE_LINKS, LIST_TEMPLATE_OPTIONS, LeadGenCompaniesPage, LeadGenContactsPage, LeadGenDeliverabilityPage, LeadGenListDetailPage, LeadGenListsPage, LeadGenOverviewPage, LeadGenRouteShell, LeadGenSidebar, LeadGenSidebarMiddle, LeadGenSidebarTop, MdxRenderer, MetricsStrip, MilestoneTimeline, MyTasksPanel, NotificationBell, NotificationPanel, PIPELINE_FUNNEL_ORDER, PipelineFunnelWidget, ProjectDetailPage, ProjectsListPage, ProjectsSidebar, ProjectsSidebarMiddle, ProjectsSidebarTop, QuickCreateActions, RecurringScheduleForm, RelativeScheduleForm, RichTextEditor, SAVED_VIEW_PRESETS, SEOSidebar, SEOSidebarMiddle, SEOSidebarTop, SavedViewsPanel, ScheduleCard, ScheduleDetailModal, ScheduleTypeSelector, SortableHeader, TableSelectionToolbar, TaskCard, TaskScheduler, TasksDueWidget, buildErrorReport, buildListConfig, calculateProgress, crmManifest, deliveryManifest, formatStatusLabel, getEnrichmentColor, getStatusColor3 as getStatusColor, leadGenManifest, mdxComponents, milestoneStatusColors, noteTypeColors, projectStatusColors, seoManifest, taskStatusColors, taskTypeColors, useCrmPipelineSummary, useCrmQuickMetrics, useDeleteLists, useRecentCrmActivity };