@elevasis/ui 2.17.2 → 2.19.0

package/dist/{chunk-FNWWVX5N.js → chunk-5SCVXZPM.js}

@@ -5,18 +5,18 @@ import { SubshellNavItem } from './chunk-CEWTOKE7.js';
 import { SubshellSidebarSection } from './chunk-IIMU5YAJ.js';
 import { FilterBar } from './chunk-PDHTXPSF.js';
 import { CustomModal } from './chunk-GBMNCNHX.js';
-import { useProjectRealtime, useTableSort, sortData, usePaginationState, useTableSelection, useProjectActivities } from './chunk-R7GKX4HW.js';
-import { useCreateTask, useCreateMilestone, useProjectMilestones, useUpdateTask, useProjects, useDeleteProject, useProject, useProjectNotes, useUpdateMilestone, useCreateNote, showApiErrorNotification, projectKeys } from './chunk-GRGRBWIO.js';
+import { useProjectRealtime, useTableSort, sortData, usePaginationState, useTableSelection, useProjectActivities } from './chunk-UU6PJ4EJ.js';
+import { useCreateTask, useCreateMilestone, useProjectMilestones, useUpdateTask, useProjects, useDeleteProject, useProject, useProjectNotes, useUpdateMilestone, useCreateNote, showApiErrorNotification, projectKeys } from './chunk-M7W7CGPL.js';
 import { SubshellContentContainer } from './chunk-RX4UWZZR.js';
-import { StatusBadge, EmptyState, PageTitleCaption, CenteredErrorState, StatCard } from './chunk-TTP62HWW.js';
+import { StatusBadge, EmptyState, PageTitleCaption, CenteredErrorState, StatCard, CardHeader } from './chunk-BHR7IV72.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
-import { PAGE_SIZE_DEFAULT, formatTimeAgo, formatDate, formatRelativeTime } from './chunk-GCBWGGI6.js';
+import { PAGE_SIZE_DEFAULT, formatTimeAgo, formatDate, formatRelativeTime } from './chunk-OD7GWIZS.js';
 import { useElevasisServices } from './chunk-IRW7JMQ4.js';
 import { useState, useMemo, useCallback } from 'react';
-import { Stack, Text, Group, Checkbox, ActionIcon, TextInput, Button, Modal, Title, Textarea, Select, SimpleGrid, Card, ThemeIcon, RingProgress, Paper, Timeline, Badge, Collapse, Center, Loader, Table, Pagination, Alert, CopyButton, Tooltip, Divider, Tabs, Anchor, Chip } from '@mantine/core';
-import { IconNotes, IconBriefcase, IconChecklist, IconFlag, IconX, IconPlus, IconHeartbeat, IconFileText, IconCalendar, IconInbox, IconLock, IconAlertTriangle, IconCircleCheck, IconClock, IconChevronDown, IconChevronRight, IconDownload, IconListCheck, IconMessageCircle, IconSearch, IconArrowLeft, IconCheck, IconCopy, IconTerminal2, IconCurrencyDollar, IconBuilding } from '@tabler/icons-react';
+import { Stack, Text, Group, Checkbox, ActionIcon, TextInput, Button, Modal, Title, Textarea, Select, SimpleGrid, Card, ThemeIcon, RingProgress, Paper, Timeline, Badge, Collapse, Center, Loader, Table, Pagination, Alert, CopyButton, Tooltip, Space, Tabs, Divider, Anchor, Chip } from '@mantine/core';
+import { IconNotes, IconBriefcase, IconChecklist, IconFlag, IconX, IconPlus, IconHeartbeat, IconFileText, IconCalendar, IconInbox, IconLock, IconAlertTriangle, IconCircleCheck, IconClock, IconChevronDown, IconChevronRight, IconDownload, IconListCheck, IconMessageCircle, IconSearch, IconCheck, IconCopy, IconFileDescription, IconArrowLeft, IconCurrencyDollar, IconBuilding } from '@tabler/icons-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useDisclosure, useClipboard } from '@mantine/hooks';
+import { useDisclosure } from '@mantine/hooks';
 import { useQueryClient, useMutation } from '@tanstack/react-query';
 
 function Checklist({ items, onToggle, onAdd, onRemove }) {
@@ -349,7 +349,8 @@ var noteTypeColors = {
   call_note: "blue",
   status_update: "green",
   issue: "yellow",
-  blocker: "red"
+  blocker: "red",
+  agent_learning: "grape"
 };
 function formatStatusLabel(status) {
   return status.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
@@ -772,75 +773,92 @@ function ProjectsListPage({ onProjectClick } = {}) {
 function isResumeContext(val) {
   return !!val && typeof val === "object" && !Array.isArray(val);
 }
+function ContextRow({ label, value }) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: "xs",
+        ff: "monospace",
+        c: "var(--color-text-subtle)",
+        style: { textTransform: "uppercase", letterSpacing: "0.06em", opacity: 0.7 },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { size: "xs", c: "var(--color-text)", style: { lineHeight: 1.55 }, children: value })
+  ] });
+}
 function ResumeContextPreview({ tasks }) {
   const candidate = tasks.filter((t) => isResumeContext(t.resume_context)).sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())[0];
   if (!candidate) return null;
   const ctx = candidate.resume_context;
-  return /* @__PURE__ */ jsx(
+  const hasBody = ctx.current_state || ctx.next_steps;
+  return /* @__PURE__ */ jsxs(
     Paper,
     {
-      p: "sm",
+      p: "md",
       style: {
         border: "1px solid var(--color-border)",
         borderRadius: "var(--mantine-radius-default)",
-        backgroundColor: "color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))"
+        backgroundColor: "color-mix(in srgb, var(--color-primary) 4%, var(--color-surface))",
+        position: "relative",
+        overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsxs(Stack, { gap: 4, children: [
-        /* @__PURE__ */ jsx(Group, { gap: "xs", children: /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
-          "Last worked",
-          " ",
-          /* @__PURE__ */ jsx(Text, { component: "span", size: "xs", fw: 500, c: "var(--color-text)", children: formatRelativeTime(candidate.updated_at) }),
-          " ",
-          "on",
-          " ",
-          /* @__PURE__ */ jsx(Text, { component: "span", size: "xs", fw: 500, c: "var(--color-text)", children: candidate.name })
-        ] }) }),
-        ctx.current_state && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
-          "Current state:",
-          " ",
-          /* @__PURE__ */ jsx(Text, { component: "span", size: "xs", c: "var(--color-text-subtle)", children: ctx.current_state })
-        ] }),
-        ctx.next_steps && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
-          "Next:",
-          " ",
-          /* @__PURE__ */ jsx(Text, { component: "span", size: "xs", c: "var(--color-text-subtle)", children: ctx.next_steps })
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: "0 auto 0 0",
+              width: 3,
+              background: "linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 30%, transparent) 100%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(Stack, { gap: "sm", pl: 4, children: [
+          /* @__PURE__ */ jsxs(Group, { gap: 6, align: "baseline", wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Last worked" }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "var(--color-text)", children: formatRelativeTime(candidate.updated_at) }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "on" }),
+            /* @__PURE__ */ jsx(Text, { size: "xs", fw: 600, c: "var(--color-text)", children: candidate.name })
+          ] }),
+          hasBody && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, { opacity: 0.3 }),
+            /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+              ctx.current_state && /* @__PURE__ */ jsx(ContextRow, { label: "Current State", value: ctx.current_state }),
+              ctx.next_steps && /* @__PURE__ */ jsx(ContextRow, { label: "Next Steps", value: ctx.next_steps })
+            ] })
+          ] })
         ] })
-      ] })
+      ]
     }
   );
 }
-var buildBootstrapCommand = (projectId) => `/project work ${projectId}`;
 function QuickActionsRow({
   onCreateTask,
   onAddMilestone,
   onLogBlocker,
-  onResumeBootstrap
+  onBack,
+  backLabel = "Projects"
 }) {
-  return /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
-    /* @__PURE__ */ jsx(Button, { variant: "light", size: "compact-sm", leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 14 }), onClick: onCreateTask, children: "Create Task" }),
-    /* @__PURE__ */ jsx(Button, { variant: "light", size: "compact-sm", leftSection: /* @__PURE__ */ jsx(IconFlag, { size: 14 }), onClick: onAddMilestone, children: "Add Milestone" }),
-    /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "light",
-        size: "compact-sm",
-        color: "orange",
-        leftSection: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 14 }),
-        onClick: onLogBlocker,
-        children: "Log Blocker"
-      }
-    ),
-    /* @__PURE__ */ jsx(Tooltip, { label: "Copies bootstrap command to clipboard", children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "light",
-        size: "compact-sm",
-        color: "grape",
-        leftSection: /* @__PURE__ */ jsx(IconTerminal2, { size: 14 }),
-        onClick: onResumeBootstrap,
-        children: "Resume Bootstrap"
-      }
-    ) })
+  return /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", justify: "space-between", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "light", size: "compact-sm", leftSection: /* @__PURE__ */ jsx(IconPlus, { size: 14 }), onClick: onCreateTask, children: "Create Task" }),
+      /* @__PURE__ */ jsx(Button, { variant: "light", size: "compact-sm", leftSection: /* @__PURE__ */ jsx(IconFlag, { size: 14 }), onClick: onAddMilestone, children: "Add Milestone" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "light",
+          size: "compact-sm",
+          color: "orange",
+          leftSection: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 14 }),
+          onClick: onLogBlocker,
+          children: "Log Blocker"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Button, { variant: "light", size: "compact-sm", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 14 }), onClick: onBack, children: backLabel })
   ] });
 }
 function LinkedRecordChips({ dealId, clientCompanyId }) {
@@ -886,7 +904,8 @@ var NOTE_FILTER_OPTIONS = [
   { value: "call_note", label: "Call Notes" },
   { value: "status_update", label: "Status Updates" },
   { value: "issue", label: "Issues" },
-  { value: "blocker", label: "Blockers" }
+  { value: "blocker", label: "Blockers" },
+  { value: "agent_learning", label: "Agent Learning" }
 ];
 function isWithinLastWeek(dateStr) {
   if (!dateStr) return false;
@@ -1026,13 +1045,69 @@ var noteTypeOptions = [
   { value: "call_note", label: "Call Note" },
   { value: "status_update", label: "Status Update" },
   { value: "issue", label: "Issue" },
-  { value: "blocker", label: "Blocker" }
+  { value: "blocker", label: "Blocker" },
+  { value: "agent_learning", label: "Agent Learning" }
 ];
 function parseChecklist2(milestone) {
   const raw = milestone.checklist;
   if (!Array.isArray(raw)) return [];
   return raw;
 }
+function sortMilestonesForTimeline(milestones) {
+  return [...milestones].sort((a, b) => {
+    if (a.sequence !== b.sequence) return a.sequence - b.sequence;
+    const aCreated = a.created_at ? new Date(a.created_at).getTime() : 0;
+    const bCreated = b.created_at ? new Date(b.created_at).getTime() : 0;
+    if (aCreated !== bCreated) return aCreated - bCreated;
+    return a.name.localeCompare(b.name);
+  });
+}
+var bulletSize = 14;
+function renderMilestoneBullet(status) {
+  const normalizedStatus = status ?? "upcoming";
+  const isCompleted = normalizedStatus === "completed";
+  const isInProgress = normalizedStatus === "in_progress";
+  if (isCompleted) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: bulletSize,
+          height: bulletSize,
+          borderRadius: "50%",
+          backgroundColor: "var(--color-primary)",
+          boxShadow: "0 0 0 4px var(--color-surface)"
+        }
+      }
+    );
+  }
+  const fillColor = isInProgress ? "var(--color-primary)" : "color-mix(in srgb, var(--color-primary) 50%, transparent)";
+  const borderColor = isInProgress ? "var(--color-primary)" : "color-mix(in srgb, var(--color-primary) 20%, transparent)";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: bulletSize,
+        height: bulletSize,
+        borderRadius: "50%",
+        backgroundColor: fillColor,
+        border: `2px solid ${borderColor}`,
+        boxSizing: "border-box",
+        zIndex: 2,
+        boxShadow: "0 0 0 4px var(--color-surface)"
+      }
+    }
+  );
+}
+function getMilestoneSurfaceStyles(status) {
+  const normalizedStatus = status ?? "upcoming";
+  const accent = normalizedStatus === "completed" ? "var(--color-primary)" : normalizedStatus === "in_progress" ? "color-mix(in srgb, var(--color-primary) 72%, white)" : "color-mix(in srgb, var(--color-primary) 36%, var(--color-border))";
+  const background = normalizedStatus === "completed" ? "var(--color-primary)" : normalizedStatus === "in_progress" ? "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 3%, transparent) 0%, transparent 100%)" : "linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 1.5%, transparent) 0%, transparent 100%)";
+  return {
+    accent,
+    background
+  };
+}
 function MilestoneChecklist({ milestone }) {
   const items = parseChecklist2(milestone);
   const { mutate: updateMilestone } = useUpdateMilestone();
@@ -1185,7 +1260,6 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
   const [logBlockerOpen, { open: openLogBlocker, close: closeLogBlocker }] = useDisclosure(false);
   const [createTaskOpen, { open: openCreateTask, close: closeCreateTask }] = useDisclosure(false);
   const [addMilestoneOpen, { open: openAddMilestone, close: closeAddMilestone }] = useDisclosure(false);
-  const clipboard = useClipboard({ timeout: 2e3 });
   if (isLoading) {
     return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsx(Center, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Loader, {}) }) });
   }
@@ -1195,7 +1269,7 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
   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 milestones = sortMilestonesForTimeline(project.milestones ?? []);
   const tasks = project.tasks ?? [];
   const totalMilestones = milestones.length;
   const completedMilestones = milestones.filter((milestone) => milestone.status === "completed").length;
@@ -1204,25 +1278,26 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
   const milestoneProgress = calculateProgress(completedMilestones, totalMilestones);
   const taskProgress = calculateProgress(approvedTasks, totalTasks);
   const companyName = project.company?.name ?? null;
-  const isEmpty = milestones.length === 0 && tasks.length === 0 && !notes?.length;
-  const defaultTab = isEmpty ? "details" : "status";
+  const activeMilestoneIndex = milestones.reduce(
+    (lastIndex, milestone, index) => milestone.status !== "upcoming" ? index : lastIndex,
+    -1
+  );
   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 }) })
+        caption: [companyName, formatStatusLabel(project.status || "unknown")].filter(Boolean).join(" - ")
       }
     ),
     /* @__PURE__ */ jsx(
       QuickActionsRow,
       {
-        projectId,
         onCreateTask: openCreateTask,
         onAddMilestone: openAddMilestone,
         onLogBlocker: openLogBlocker,
-        onResumeBootstrap: () => clipboard.copy(buildBootstrapCommand(projectId))
+        onBack,
+        backLabel
       }
     ),
     /* @__PURE__ */ jsxs(SimpleGrid, { cols: 4, children: [
@@ -1267,7 +1342,6 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(ResumeContextPreview, { tasks }),
     /* @__PURE__ */ jsxs(
       Paper,
       {
@@ -1277,13 +1351,13 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
           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(Stack, { gap: "md", children: /* @__PURE__ */ jsx(
+            CardHeader,
+            {
+              icon: /* @__PURE__ */ jsx(IconFileDescription, { size: 18 }),
+              title: "Project Details",
+              rightSection: /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "wrap", justify: "flex-end", children: [
+                /* @__PURE__ */ jsx(Badge, { variant: "light", color: projectStatusColors[project.status || ""] || "gray", children: formatStatusLabel(project.status || "unknown") }),
                 /* @__PURE__ */ jsx(LinkedRecordChips, { dealId: project.deal_id, clientCompanyId: project.client_company_id }),
                 /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: "var(--color-text-subtle)", children: project.id }),
                 /* @__PURE__ */ jsx(CopyButton, { value: `/project work ${project.id}`, children: ({ copied, copy }) => /* @__PURE__ */ jsx(Tooltip, { label: copied ? "Copied!" : "Copy ID", withArrow: true, children: /* @__PURE__ */ jsx(
@@ -1297,161 +1371,257 @@ function ProjectDetailPage({ projectId, onBack, backLabel = "Projects" }) {
                   }
                 ) }) })
               ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Space, { my: "xs" }),
+          /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+            project.description && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Description" }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", children: project.description })
             ] }),
-            /* @__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__ */ jsxs(SimpleGrid, { cols: 4, 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) })
               ] }),
-              project.target_end_date && /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
-                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Target:" }),
+              /* @__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) })
               ] }),
-              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" : ""
-                ] })
+              /* @__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__ */ jsxs(Group, { gap: 4, children: [
-                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: "Company:" }),
-                /* @__PURE__ */ jsx(Text, { size: "sm", children: project.company.name })
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Contract Value" }),
+                /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: project.contract_value != null ? `$${project.contract_value.toLocaleString()}${project.metadata && project.metadata.rate_type === "hourly" ? "/hr" : ""}` : "-" })
               ] })
+            ] }),
+            project.company && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Company" }),
+              /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: project.company.name }),
+              project.company.domain && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: project.company.domain })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(Divider, { my: "md" }),
-          /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTab, children: [
+          /* @__PURE__ */ jsx(Space, { my: "xs" }),
+          /* @__PURE__ */ jsx(ResumeContextPreview, { tasks }),
+          /* @__PURE__ */ jsx(Space, { 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,
+                active: activeMilestoneIndex,
                 bulletSize: 20,
+                lineWidth: 3,
                 color: "var(--color-primary)",
                 styles: {
                   itemBullet: {
-                    borderColor: "color-mix(in srgb, var(--color-primary) 40%, transparent)",
-                    backgroundColor: "var(--color-surface)"
+                    borderColor: "transparent",
+                    backgroundColor: "transparent",
+                    padding: 0,
+                    zIndex: 3,
+                    overflow: "visible",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
                   },
                   item: {
-                    "--_item-border-color": "color-mix(in srgb, var(--color-primary) 25%, transparent)"
+                    "--_item-border-color": "color-mix(in srgb, var(--color-primary) 22%, transparent)",
+                    paddingBottom: "var(--mantine-spacing-xl)"
                   },
                   itemTitle: {
                     color: "var(--color-text)"
+                  },
+                  itemBody: {
+                    marginTop: 0
                   }
                 },
                 children: milestones.map((milestone) => {
                   const milestoneTasks = tasks.filter((task) => task.milestone_id === milestone.id);
-                  return /* @__PURE__ */ jsxs(
+                  const checklistItems = parseChecklist2(milestone);
+                  const completedChecklistItems = checklistItems.filter((item) => item.completed).length;
+                  const { accent, background } = getMilestoneSurfaceStyles(milestone.status);
+                  return /* @__PURE__ */ jsx(
                     Timeline.Item,
                     {
-                      bullet: milestone.status === "completed" ? /* @__PURE__ */ jsx(
-                        "div",
+                      bullet: renderMilestoneBullet(milestone.status),
+                      title: /* @__PURE__ */ jsx("div", {}),
+                      children: /* @__PURE__ */ jsxs(
+                        Paper,
                         {
+                          p: "lg",
+                          radius: "md",
                           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(Stack, { gap: "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")
+                            background,
+                            border: "none",
+                            borderTop: "1px solid var(--color-border)",
+                            borderRight: "1px solid var(--color-border)",
+                            borderBottom: "1px solid var(--color-border)",
+                            boxShadow: "none",
+                            position: "relative",
+                            overflow: "hidden"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                style: {
+                                  position: "absolute",
+                                  inset: "0 auto 0 0",
+                                  width: 3,
+                                  background: `linear-gradient(180deg, ${accent} 0%, color-mix(in srgb, ${accent} 30%, transparent) 100%)`
                                 }
-                              ),
-                              /* @__PURE__ */ jsx(
-                                Badge,
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+                              /* @__PURE__ */ jsxs(Group, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
+                                /* @__PURE__ */ jsxs(Stack, { gap: 6, style: { flex: 1, minWidth: 260 }, children: [
+                                  /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+                                    /* @__PURE__ */ jsx(
+                                      Text,
+                                      {
+                                        fw: 700,
+                                        size: "lg",
+                                        c: milestone.status === "completed" ? "var(--color-background)" : "var(--color-text)",
+                                        children: milestone.name
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(
+                                      Badge,
+                                      {
+                                        variant: "light",
+                                        color: milestoneStatusColors[milestone.status || ""] || "gray",
+                                        size: "sm",
+                                        styles: {
+                                          root: {
+                                            letterSpacing: "0.02em"
+                                          }
+                                        },
+                                        children: formatStatusLabel(milestone.status || "unknown")
+                                      }
+                                    )
+                                  ] }),
+                                  milestone.description && /* @__PURE__ */ jsx(
+                                    Text,
+                                    {
+                                      size: "sm",
+                                      c: milestone.status === "completed" ? "color-mix(in srgb, var(--color-background) 82%, transparent)" : "var(--color-text-dimmed)",
+                                      maw: 900,
+                                      children: milestone.description
+                                    }
+                                  )
+                                ] }),
+                                /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", children: [
+                                  milestone.due_date && /* @__PURE__ */ jsxs(
+                                    Badge,
+                                    {
+                                      variant: "outline",
+                                      size: "md",
+                                      styles: {
+                                        root: {
+                                          borderColor: "color-mix(in srgb, var(--color-primary) 18%, var(--color-border))",
+                                          backgroundColor: "color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))"
+                                        }
+                                      },
+                                      children: [
+                                        "Due ",
+                                        formatDate(milestone.due_date)
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs(
+                                    Badge,
+                                    {
+                                      variant: "outline",
+                                      size: "md",
+                                      styles: {
+                                        root: {
+                                          borderColor: "color-mix(in srgb, var(--color-primary) 16%, var(--color-border))",
+                                          backgroundColor: "var(--color-surface)"
+                                        }
+                                      },
+                                      children: [
+                                        completedChecklistItems,
+                                        "/",
+                                        checklistItems.length,
+                                        " complete"
+                                      ]
+                                    }
+                                  ),
+                                  milestoneTasks.length > 0 && /* @__PURE__ */ jsxs(
+                                    Badge,
+                                    {
+                                      variant: "outline",
+                                      size: "md",
+                                      styles: {
+                                        root: {
+                                          borderColor: "color-mix(in srgb, var(--color-primary) 16%, var(--color-border))",
+                                          backgroundColor: "var(--color-surface)"
+                                        }
+                                      },
+                                      children: [
+                                        milestoneTasks.length,
+                                        " tasks"
+                                      ]
+                                    }
+                                  )
+                                ] })
+                              ] }),
+                              /* @__PURE__ */ jsx(MilestoneChecklist, { milestone }),
+                              milestoneTasks.length > 0 && /* @__PURE__ */ jsx(Stack, { gap: "sm", children: milestoneTasks.map((task) => /* @__PURE__ */ jsx(
+                                Card,
                                 {
-                                  variant: "light",
-                                  color: taskStatusColors[task.status || ""] || "gray",
-                                  size: "xs",
-                                  children: formatStatusLabel(task.status || "pending")
-                                }
-                              )
+                                  p: "sm",
+                                  radius: "md",
+                                  style: {
+                                    border: "1px solid color-mix(in srgb, var(--color-primary) 12%, var(--color-border))",
+                                    backgroundColor: "color-mix(in srgb, var(--color-surface-hover) 70%, var(--color-surface))",
+                                    boxShadow: "var(--standard-box-shadow)"
+                                  },
+                                  children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+                                    /* @__PURE__ */ jsxs(Group, { gap: "xs", justify: "space-between", align: "flex-start", wrap: "wrap", children: [
+                                      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, c: "var(--color-text)", children: task.name }),
+                                      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "wrap", 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")
+                                          }
+                                        )
+                                      ] })
+                                    ] }),
+                                    /* @__PURE__ */ jsx(InlineResumeContextEditor, { task, projectId })
+                                  ] })
+                                },
+                                task.id
+                              )) })
                             ] })
-                          ] }),
-                          /* @__PURE__ */ jsx(InlineResumeContextEditor, { task, projectId })
-                        ] }) }, task.id)) })
-                      ]
+                          ]
+                        }
+                      )
                     },
                     milestone.id
                   );
                 })
               }
             ) }),
-            /* @__PURE__ */ jsx(Tabs.Panel, { value: "details", pt: "md", children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
-              isEmpty && /* @__PURE__ */ jsx(Alert, { color: "blue", title: "Get started", children: "This project has no milestones, tasks, or notes yet. Add a milestone or create a task to begin tracking progress." }),
-              /* @__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__ */ jsx(NotesTabContent, { notes, onAddNote: () => setAddNoteOpen(true) }) }),
             /* @__PURE__ */ jsx(Tabs.Panel, { value: "activity", pt: "md", children: /* @__PURE__ */ jsx(ProjectActivityTimeline, { projectId }) })
           ] })