@optifye/dashboard-core 4.1.0 → 4.1.2

package/dist/index.mjs

@@ -12,7 +12,7 @@ import { noop, warning, invariant, progress, secondsToMilliseconds, milliseconds
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, Bar, Cell, LabelList, PieChart, Pie, Legend, LineChart as LineChart$1, Line } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
-import { Camera, Map as Map$1, Video, ChevronDown, ChevronUp, Check, X, Clock, Coffee, Plus, Minus, ArrowDown, ArrowUp, Search, CheckCircle, AlertTriangle, Info, Share2, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, Menu, ArrowLeft, Copy, RefreshCw, Send, Edit2, UserCheck, Save, LogOut, Calendar, Clock8, AlarmClock, Settings, LifeBuoy, Loader2, ArrowLeftIcon as ArrowLeftIcon$1, Settings2, CheckCircle2, Zap, UserCircle } from 'lucide-react';
+import { Camera, Map as Map$1, Video, ChevronDown, ChevronUp, Check, X, Clock, Coffee, Plus, Minus, ArrowDown, ArrowUp, Search, CheckCircle, AlertTriangle, Info, Share2, Download, User, XCircle, ChevronLeft, ChevronRight, AlertCircle, Sun, Moon, MessageSquare, Trash2, ArrowLeft, Menu, RefreshCw, Send, Copy, Edit2, UserCheck, Save, LogOut, Calendar, Clock8, AlarmClock, Settings, LifeBuoy, Loader2, ArrowLeftIcon as ArrowLeftIcon$1, Settings2, CheckCircle2, Zap, UserCircle } from 'lucide-react';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
@@ -25308,6 +25308,32 @@ var S3ClipsService = class {
       return null;
     }
   }
+  /**
+   * Fetches full metadata including timestamps
+   */
+  async getFullMetadata(playlistUri) {
+    try {
+      const metadataUri = playlistUri.replace(/playlist\.m3u8$/, "metadata.json");
+      const url = new URL(metadataUri);
+      const bucket = url.hostname;
+      const key = url.pathname.substring(1);
+      const command = new GetObjectCommand({
+        Bucket: bucket,
+        Key: key
+      });
+      const response = await this.s3Client.send(command);
+      if (!response.Body) {
+        console.warn(`Empty response body for metadata file: ${key}`);
+        return null;
+      }
+      const metadataContent = await response.Body.transformToString();
+      const metadata = JSON.parse(metadataContent);
+      return metadata;
+    } catch (error) {
+      console.error(`Error fetching or parsing metadata:`, error);
+      return null;
+    }
+  }
   /**
    * Converts S3 URI to CloudFront URL
    * Uses streaming proxy for localhost development to handle CORS
@@ -25320,15 +25346,22 @@ var S3ClipsService = class {
   /**
    * Processes a single video completely
    */
-  async processFullVideo(uri, index, workspaceId, date, shiftId, includeCycleTime) {
+  async processFullVideo(uri, index, workspaceId, date, shiftId, includeCycleTime, includeMetadata = false) {
     const parsedInfo = parseS3Uri(uri);
     if (!parsedInfo) {
       console.warn(`Skipping URI due to parsing failure: ${uri}`);
       return null;
     }
     let cycleTimeSeconds = null;
-    if (includeCycleTime && (parsedInfo.type === "bottleneck" && parsedInfo.description.toLowerCase().includes("cycle time") || parsedInfo.type === "best_cycle_time" || parsedInfo.type === "worst_cycle_time")) {
-      cycleTimeSeconds = await this.getMetadataCycleTime(uri);
+    let creationTimestamp = void 0;
+    if (includeMetadata || includeCycleTime && (parsedInfo.type === "bottleneck" && parsedInfo.description.toLowerCase().includes("cycle time") || parsedInfo.type === "best_cycle_time" || parsedInfo.type === "worst_cycle_time")) {
+      const metadata = await this.getFullMetadata(uri);
+      if (metadata) {
+        if (metadata.original_task_metadata?.cycle_time) {
+          cycleTimeSeconds = metadata.original_task_metadata.cycle_time;
+        }
+        creationTimestamp = metadata.upload_timestamp || metadata.original_task_metadata?.timestamp || metadata.creation_timestamp || metadata[""];
+      }
     }
     const cloudfrontPlaylistUrl = this.s3UriToCloudfront(uri);
     const { type: videoType, timestamp: videoTimestamp } = parsedInfo;
@@ -25337,7 +25370,8 @@ var S3ClipsService = class {
       src: cloudfrontPlaylistUrl,
       // Direct CloudFront playlist URL
       ...parsedInfo,
-      cycle_time_seconds: cycleTimeSeconds || void 0
+      cycle_time_seconds: cycleTimeSeconds || void 0,
+      creation_timestamp: creationTimestamp
     };
   }
   /**
@@ -25399,7 +25433,7 @@ var S3ClipsService = class {
    * Main method to fetch clips based on parameters
    */
   async fetchClips(params) {
-    const { workspaceId, date: inputDate, shift, category, limit, mode, includeCycleTime } = params;
+    const { workspaceId, date: inputDate, shift, category, limit, mode, includeCycleTime, includeMetadata, timestampStart, timestampEnd } = params;
     if (!workspaceId) {
       throw new Error("Valid Workspace ID is required");
     }
@@ -25504,7 +25538,7 @@ var S3ClipsService = class {
       const batch = filteredUris.slice(i, i + concurrencyLimit);
       const batchPromises = batch.map(async (uri, batchIndex) => {
         const index = i + batchIndex;
-        const result = await this.processFullVideo(uri, index, workspaceId, date, shiftId, includeCycleTime || false);
+        const result = await this.processFullVideo(uri, index, workspaceId, date, shiftId, includeCycleTime || false, includeMetadata || (!!timestampStart || !!timestampEnd));
         processedCount++;
         if (processedCount % 10 === 0) {
           console.log(`S3ClipsService: Processed ${processedCount}/${filteredUris.length} videos for category '${category || "all"}'...`);
@@ -25514,7 +25548,26 @@ var S3ClipsService = class {
       const batchResults = await Promise.all(batchPromises);
       videoResults.push(...batchResults);
     }
-    const videos = videoResults.filter((v) => v !== null);
+    let videos = videoResults.filter((v) => v !== null);
+    if (timestampStart || timestampEnd) {
+      videos = videos.filter((video) => {
+        if (!video.creation_timestamp) return false;
+        const videoTimestamp = new Date(video.creation_timestamp).getTime();
+        if (timestampStart && timestampEnd) {
+          const start = new Date(timestampStart).getTime();
+          const end = new Date(timestampEnd).getTime();
+          return videoTimestamp >= start && videoTimestamp <= end;
+        } else if (timestampStart) {
+          const start = new Date(timestampStart).getTime();
+          return videoTimestamp >= start;
+        } else if (timestampEnd) {
+          const end = new Date(timestampEnd).getTime();
+          return videoTimestamp <= end;
+        }
+        return true;
+      });
+      console.log(`S3ClipsService: Filtered by timestamp - ${videos.length} videos remain after filtering`);
+    }
     console.log(`S3ClipsService: Successfully processed ${videos.length} out of ${filteredUris.length} video clips for category '${category || "all"}' (limit: ${limitPerCategory} per category).`);
     const typeCounts = videos.reduce((acc, video) => {
       acc[video.type] = (acc[video.type] || 0) + 1;
@@ -25559,6 +25612,7 @@ var BottlenecksContent = ({
   const dashboardConfig = useDashboardConfig();
   const videoRef = useRef(null);
   const fullscreenContainerRef = useRef(null);
+  const timestampFilterRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
@@ -25568,6 +25622,22 @@ var BottlenecksContent = ({
   const [allVideos, setAllVideos] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
+  const [showTimestampFilter, setShowTimestampFilter] = useState(false);
+  const [timestampStart, setTimestampStart] = useState("");
+  const [timestampEnd, setTimestampEnd] = useState("");
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (timestampFilterRef.current && !timestampFilterRef.current.contains(event.target)) {
+        setShowTimestampFilter(false);
+      }
+    };
+    if (showTimestampFilter) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showTimestampFilter]);
   const s3ClipsService = useMemo(() => {
     if (!dashboardConfig?.s3Config) {
       console.warn("S3 configuration not found in dashboard config");
@@ -25580,13 +25650,26 @@ var BottlenecksContent = ({
     setIsLoading(true);
     setError(null);
     try {
+      const operationalDate = date || getOperationalDate();
+      let timestampStartFull;
+      let timestampEndFull;
+      if (timestampStart) {
+        timestampStartFull = `${operationalDate}T${timestampStart}:00`;
+      }
+      if (timestampEnd) {
+        timestampEndFull = `${operationalDate}T${timestampEnd}:00`;
+      }
       const videos = await s3ClipsService.fetchClips({
         workspaceId,
-        date: date || getOperationalDate(),
+        date: operationalDate,
         mode: "full",
         includeCycleTime: true,
-        limit: 50
+        includeMetadata: true,
+        // Always include metadata for timestamp info
+        limit: 50,
         // Reasonable limit for UI performance
+        timestampStart: timestampStartFull,
+        timestampEnd: timestampEndFull
       });
       if (Array.isArray(videos) && videos.length > 0) {
         preloadVideoUrl2(videos[0].src);
@@ -25614,7 +25697,7 @@ var BottlenecksContent = ({
     } finally {
       setIsLoading(false);
     }
-  }, [workspaceId, date, s3ClipsService]);
+  }, [workspaceId, date, s3ClipsService, timestampStart, timestampEnd]);
   useEffect(() => {
     if (s3ClipsService) {
       fetchClips();
@@ -25983,6 +26066,43 @@ var BottlenecksContent = ({
         return "Bottleneck";
     }
   };
+  const formatTimestamp = (timestamp) => {
+    if (!timestamp) return "";
+    try {
+      const date2 = new Date(timestamp);
+      const today = /* @__PURE__ */ new Date();
+      const isToday = date2.toDateString() === today.toDateString();
+      if (isToday) {
+        return date2.toLocaleString("en-US", {
+          hour: "numeric",
+          minute: "2-digit",
+          hour12: true
+        });
+      } else {
+        return date2.toLocaleString("en-US", {
+          month: "short",
+          day: "numeric",
+          hour: "numeric",
+          minute: "2-digit",
+          hour12: true
+        });
+      }
+    } catch {
+      return "";
+    }
+  };
+  const formatTimeOnly = (time2) => {
+    if (!time2) return "";
+    try {
+      const [hours, minutes] = time2.split(":");
+      const hour = parseInt(hours);
+      const ampm = hour >= 12 ? "PM" : "AM";
+      const displayHour = hour % 12 || 12;
+      return `${displayHour}:${minutes} ${ampm}`;
+    } catch {
+      return time2;
+    }
+  };
   if (!dashboardConfig?.s3Config) {
     return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
       /* @__PURE__ */ jsx(XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
@@ -26091,6 +26211,74 @@ var BottlenecksContent = ({
       /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-gray-100", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
         /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-800", children: activeFilter === "low_value" ? `Low Value Moments (${clipCounts.lowValue})` : activeFilter === "best_cycle_time" ? `Best Cycle Times (${clipCounts.bestCycleTimes})` : activeFilter === "worst_cycle_time" ? `Worst Cycle Times (${clipCounts.worstCycleTimes})` : activeFilter === "long_cycle_time" ? `Long Cycle Time (${clipCounts.longCycleTimes})` : `All Clips (${clipCounts.total})` }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", ref: timestampFilterRef, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setShowTimestampFilter(!showTimestampFilter),
+                className: `p-2 rounded-lg transition-all ${timestampStart || timestampEnd ? "bg-blue-50 text-blue-600 hover:bg-blue-100" : "text-gray-600 hover:bg-gray-100"}`,
+                "aria-label": "Filter by time",
+                title: "Filter by time",
+                children: /* @__PURE__ */ jsx(Clock, { className: "h-5 w-5" })
+              }
+            ),
+            showTimestampFilter && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border border-gray-200 p-4 z-20", children: [
+              /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Filter by Time" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: "timestamp-start", className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Time" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: "timestamp-start",
+                      type: "time",
+                      value: timestampStart,
+                      onChange: (e) => setTimestampStart(e.target.value),
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: "timestamp-end", className: "block text-xs font-medium text-gray-600 mb-1", children: "End Time" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: "timestamp-end",
+                      type: "time",
+                      value: timestampEnd,
+                      onChange: (e) => setTimestampEnd(e.target.value),
+                      className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-between pt-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setTimestampStart("");
+                        setTimestampEnd("");
+                        setShowTimestampFilter(false);
+                      },
+                      className: "px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 transition-colors",
+                      children: "Clear"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setShowTimestampFilter(false);
+                        fetchClips();
+                      },
+                      className: "px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors",
+                      children: "Apply Filter"
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ] }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -26114,6 +26302,29 @@ var BottlenecksContent = ({
           )
         ] })
       ] }) }),
+      (timestampStart || timestampEnd) && /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-blue-50 border-b border-blue-100 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 text-sm text-blue-700", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Filtered by time: ",
+            timestampStart ? formatTimeOnly(timestampStart) : "Any",
+            " - ",
+            timestampEnd ? formatTimeOnly(timestampEnd) : "Any"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setTimestampStart("");
+              setTimestampEnd("");
+              fetchClips();
+            },
+            className: "text-sm text-blue-600 hover:text-blue-800 transition-colors",
+            children: "Clear filter"
+          }
+        )
+      ] }),
       isLoading && allVideos.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsx(LoadingSpinner2, { size: "md", message: "Loading clips..." }) }) : allVideos.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-4rem)]", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
         /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
         /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
@@ -26173,6 +26384,7 @@ var BottlenecksContent = ({
             /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
           ] }) })
         ),
+        currentVideo.creation_timestamp && /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-3 z-10 bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-white shadow-sm text-xs", children: /* @__PURE__ */ jsx("span", { className: "opacity-80", children: formatTimestamp(currentVideo.creation_timestamp) }) }),
         /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
           /* @__PURE__ */ jsx(
             "button",
@@ -28093,9 +28305,9 @@ var SideNavBar = memo(({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-auto", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-10 h-px bg-gray-200 my-4" }),
-      /* @__PURE__ */ jsx("div", { className: "pb-2 w-full", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { className: "mt-auto mb-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-10 h-px bg-gray-200 my-3" }),
+      /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
         "button",
         {
           onClick: handleProfileClick,
@@ -28677,7 +28889,7 @@ var ThreadSidebar = ({
   if (error) {
     return /* @__PURE__ */ jsx("div", { className: `p-4 text-red-600 text-sm ${className}`, children: "Failed to load conversations" });
   }
-  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col h-full bg-gray-50 border-r border-gray-200 ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col h-screen bg-gray-50 border-r border-gray-200 ${className}`, children: [
     /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 p-4 border-b border-gray-200", children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -28689,7 +28901,7 @@ var ThreadSidebar = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex justify-center p-8", children: /* @__PURE__ */ jsx(LoadingSpinner_default, { size: "sm" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-gray-500 text-sm", children: "No conversations yet" }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: threads.map((thread) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto min-h-0", children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex justify-center p-8", children: /* @__PURE__ */ jsx(LoadingSpinner_default, { size: "sm" }) }) : threads.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-gray-500 text-sm", children: "No conversations yet" }) : /* @__PURE__ */ jsx("div", { className: "py-2", children: threads.map((thread) => /* @__PURE__ */ jsxs(
       "div",
       {
         onClick: () => onSelectThread(thread.id),
@@ -28721,6 +28933,23 @@ var ThreadSidebar = ({
   ] });
 };
 var axelProfilePng = "/axel-profile.png";
+var ProfilePicture = React46__default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: axelProfilePng,
+      alt,
+      className: "w-full h-full object-cover",
+      loading: "eager",
+      decoding: "async"
+    }
+  ) }) });
+});
+ProfilePicture.displayName = "ProfilePicture";
+var preloadImage = (src) => {
+  const img = new Image();
+  img.src = src;
+};
 var AIAgentView = () => {
   const { navigate, pathname } = useNavigation();
   const config = useDashboardConfig();
@@ -28732,16 +28961,92 @@ var AIAgentView = () => {
   const [lastError, setLastError] = useState(null);
   const [copiedMessageId, setCopiedMessageId] = useState(null);
   const [activeThreadId, setActiveThreadId] = useState(void 0);
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [streamingStates, setStreamingStates] = useState(/* @__PURE__ */ new Map());
   const [userId, setUserId] = useState(null);
   const [pendingThreadId, setPendingThreadId] = useState(null);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [typedText, setTypedText] = useState("");
+  const [newChatCount, setNewChatCount] = useState(0);
+  const [hasStartedTyping, setHasStartedTyping] = useState(false);
+  const [typingStartTime, setTypingStartTime] = useState(null);
+  const [lastTypingTime, setLastTypingTime] = useState(null);
+  const [characterCount, setCharacterCount] = useState(0);
+  const typingTimeoutRef = useRef(null);
   const isThreadLoading = (threadId) => {
     return threadId ? loadingThreads.has(threadId) : false;
   };
   const getStreamingState = (threadId) => {
     return threadId ? streamingStates.get(threadId) || { message: "", reasoning: "" } : { message: "", reasoning: "" };
   };
+  const trackTypingStart = () => {
+    if (!hasStartedTyping) {
+      const now2 = Date.now();
+      setHasStartedTyping(true);
+      setTypingStartTime(now2);
+      setLastTypingTime(now2);
+      trackCoreEvent("AI Agent Input Started", {
+        line_id: lineId,
+        company_id: companyId,
+        shift_id: shiftId,
+        active_thread_id: activeThreadId,
+        has_existing_messages: messages.length > 0,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    }
+  };
+  const trackTypingProgress = (newValue) => {
+    const now2 = Date.now();
+    setLastTypingTime(now2);
+    setCharacterCount(newValue.length);
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+    }
+    typingTimeoutRef.current = setTimeout(() => {
+      if (hasStartedTyping && typingStartTime && newValue.length > 0) {
+        const typingDuration = now2 - typingStartTime;
+        trackCoreEvent("AI Agent Input Typing Progress", {
+          line_id: lineId,
+          company_id: companyId,
+          shift_id: shiftId,
+          active_thread_id: activeThreadId,
+          character_count: newValue.length,
+          typing_duration_ms: typingDuration,
+          has_existing_messages: messages.length > 0,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        });
+      }
+    }, 2e3);
+  };
+  const trackMessageSent = (messageContent) => {
+    if (hasStartedTyping && typingStartTime) {
+      const now2 = Date.now();
+      const totalTypingDuration = now2 - typingStartTime;
+      trackCoreEvent("AI Agent Message Sent", {
+        line_id: lineId,
+        company_id: companyId,
+        shift_id: shiftId,
+        active_thread_id: activeThreadId,
+        message_length: messageContent.length,
+        character_count: messageContent.length,
+        typing_duration_ms: totalTypingDuration,
+        has_existing_messages: messages.length > 0,
+        is_new_conversation: !activeThreadId,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+    }
+    resetTypingState();
+  };
+  const resetTypingState = () => {
+    setHasStartedTyping(false);
+    setTypingStartTime(null);
+    setLastTypingTime(null);
+    setCharacterCount(0);
+    if (typingTimeoutRef.current) {
+      clearTimeout(typingTimeoutRef.current);
+      typingTimeoutRef.current = null;
+    }
+  };
   const textareaRef = useRef(null);
   const messagesEndRef = useRef(null);
   const containerRef = useRef(null);
@@ -28763,6 +29068,41 @@ var AIAgentView = () => {
   const lineId = getLineIdFromPath();
   const { shiftId } = getCurrentShift(dateTimeConfig.defaultTimezone || "Asia/Kolkata", shiftConfig);
   const companyId = entityConfig.companyId || "default-company-id";
+  const ACTIVE_THREAD_STORAGE_KEY = `ai-agent-active-thread-${lineId}`;
+  useLayoutEffect(() => {
+    const savedThreadId = localStorage.getItem(ACTIVE_THREAD_STORAGE_KEY);
+    if (savedThreadId && savedThreadId !== "undefined") {
+      setActiveThreadId(savedThreadId);
+    }
+  }, [ACTIVE_THREAD_STORAGE_KEY]);
+  useEffect(() => {
+    if (activeThreadId) {
+      localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+    } else {
+      localStorage.removeItem(ACTIVE_THREAD_STORAGE_KEY);
+    }
+  }, [activeThreadId, ACTIVE_THREAD_STORAGE_KEY]);
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden" && activeThreadId) {
+        localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+      }
+    };
+    const handleBeforeUnload = () => {
+      if (activeThreadId) {
+        localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+      if (activeThreadId) {
+        localStorage.setItem(ACTIVE_THREAD_STORAGE_KEY, activeThreadId);
+      }
+    };
+  }, [activeThreadId, ACTIVE_THREAD_STORAGE_KEY]);
   useEffect(() => {
     if (textareaRef.current) {
       textareaRef.current.style.height = "auto";
@@ -28777,6 +29117,27 @@ var AIAgentView = () => {
       setTimeout(scrollToBottom, 100);
     }
   }, [activeThreadId]);
+  useEffect(() => {
+    if (messages.length === 0 && !isTransitioning) {
+      const fullText = "Hi, I'm Axel - Your AI Supervisor";
+      let index = 0;
+      setTypedText("");
+      const typeInterval = setInterval(() => {
+        if (index < fullText.length) {
+          setTypedText(fullText.substring(0, index + 1));
+          index++;
+        } else {
+          clearInterval(typeInterval);
+        }
+      }, 50);
+      return () => clearInterval(typeInterval);
+    }
+  }, [messages.length, isTransitioning]);
+  useEffect(() => {
+    if (isSidebarOpen) {
+      setNewChatCount(0);
+    }
+  }, [isSidebarOpen]);
   const copyToClipboard = async (text, messageId) => {
     try {
       await navigator.clipboard.writeText(text);
@@ -28791,8 +29152,21 @@ var AIAgentView = () => {
     setMessages([]);
     setInputValue("");
     setPendingThreadId(null);
+    setTypedText("");
+    resetTypingState();
+    localStorage.removeItem(ACTIVE_THREAD_STORAGE_KEY);
     textareaRef.current?.focus();
   };
+  useEffect(() => {
+    preloadImage(axelProfilePng);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (typingTimeoutRef.current) {
+        clearTimeout(typingTimeoutRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     const checkAuth = async () => {
       const supabase2 = _getSupabaseInstance();
@@ -28823,6 +29197,13 @@ var AIAgentView = () => {
     let currentThreadId = activeThreadId || `temp-${Date.now()}`;
     if (isThreadLoading(currentThreadId)) return;
     const userMessage = inputValue.trim();
+    trackMessageSent(userMessage);
+    if (displayMessages.length === 0) {
+      setIsTransitioning(true);
+      setTimeout(() => {
+        setIsTransitioning(false);
+      }, 800);
+    }
     setInputValue("");
     setLoadingThreads((prev) => new Set(prev).add(currentThreadId));
     setLastError(null);
@@ -28866,6 +29247,9 @@ var AIAgentView = () => {
               currentThreadId = threadId;
               setActiveThreadId(threadId);
               setPendingThreadId(null);
+              if (!isSidebarOpen) {
+                setNewChatCount((prev) => prev + 1);
+              }
               setLoadingThreads((prev) => {
                 const newSet = new Set(prev);
                 if (newSet.has(oldThreadId)) {
@@ -28964,7 +29348,9 @@ var AIAgentView = () => {
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
-      handleSubmit(e);
+      if (!isCurrentThreadLoading) {
+        handleSubmit(e);
+      }
     }
   };
   const formatMessage = (content) => {
@@ -28973,7 +29359,81 @@ var AIAgentView = () => {
       text = text.replace(/`([^`]+)`/g, '<code class="bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800">$1</code>');
       return text;
     };
-    const lines = content.split("\n");
+    const parseTableFromText = (lines2, startIndex) => {
+      const tableLines = [];
+      let i = startIndex;
+      while (i < lines2.length) {
+        const line = lines2[i].trim();
+        if (!line) {
+          i++;
+          break;
+        }
+        if (line.includes("|") || line.match(/^[-|=\s]+$/)) {
+          tableLines.push(line);
+          i++;
+        } else {
+          break;
+        }
+      }
+      if (tableLines.length === 0) return { html: "", endIndex: startIndex };
+      const dataLines = tableLines.filter((line) => !line.match(/^[-|=\s]+$/));
+      if (dataLines.length === 0) return { html: "", endIndex: i };
+      let headerRow = [];
+      let dataRows = [];
+      const firstLine = dataLines[0];
+      if (firstLine.includes("|")) {
+        const cells = firstLine.split("|").map((cell) => cell.trim()).filter((cell) => cell.length > 0);
+        if (cells.length >= 2) {
+          headerRow = cells;
+          for (let j = 1; j < dataLines.length; j++) {
+            const row = dataLines[j];
+            if (row.includes("|")) {
+              const rowCells = row.split("|").map((cell) => cell.trim()).filter((cell) => cell.length > 0);
+              while (rowCells.length < headerRow.length) rowCells.push("");
+              if (rowCells.length > headerRow.length) rowCells.splice(headerRow.length);
+              dataRows.push(rowCells);
+            }
+          }
+        }
+      }
+      if (headerRow.length === 0) {
+        for (const line of dataLines) {
+          if (line.includes("|")) {
+            const rowCells = line.split("|").map((cell) => cell.trim()).filter((cell) => cell.length > 0);
+            if (rowCells.length >= 2) {
+              dataRows.push(rowCells);
+            }
+          }
+        }
+        if (dataRows.length > 0 && dataRows[0].length > 0) {
+          headerRow = dataRows[0].map((_, index) => `Column ${index + 1}`);
+        }
+      }
+      if (headerRow.length > 0 && dataRows.length > 0) {
+        let tableHtml = '<div class="overflow-x-auto my-4"><table class="min-w-full border-collapse border border-gray-300 rounded-lg shadow-sm">';
+        tableHtml += '<thead class="bg-gray-50">';
+        tableHtml += "<tr>";
+        headerRow.forEach((header) => {
+          tableHtml += `<th class="border border-gray-300 px-4 py-2 text-left font-semibold text-gray-900">${processInlineFormatting(header)}</th>`;
+        });
+        tableHtml += "</tr>";
+        tableHtml += "</thead>";
+        tableHtml += '<tbody class="bg-white">';
+        dataRows.forEach((row, rowIndex) => {
+          tableHtml += `<tr class="${rowIndex % 2 === 0 ? "bg-white" : "bg-gray-50"}">`;
+          row.forEach((cell) => {
+            tableHtml += `<td class="border border-gray-300 px-4 py-2 text-gray-800">${processInlineFormatting(cell)}</td>`;
+          });
+          tableHtml += "</tr>";
+        });
+        tableHtml += "</tbody>";
+        tableHtml += "</table></div>";
+        return { html: tableHtml, endIndex: i };
+      }
+      return { html: "", endIndex: startIndex };
+    };
+    const processedContent = content;
+    const lines = processedContent.split("\n");
     const formattedLines = [];
     let inList = false;
     for (let i = 0; i < lines.length; i++) {
@@ -28987,6 +29447,18 @@ var AIAgentView = () => {
         formattedLines.push("<br/>");
         continue;
       }
+      if (trimmedLine.includes("|") && (trimmedLine.match(/\|/g) || []).length >= 1) {
+        if (inList) {
+          formattedLines.push("</ul>");
+          inList = false;
+        }
+        const tableResult = parseTableFromText(lines, i);
+        if (tableResult.html) {
+          formattedLines.push(tableResult.html);
+          i = tableResult.endIndex - 1;
+          continue;
+        }
+      }
       if (trimmedLine.startsWith("###")) {
         if (inList) {
           formattedLines.push("</ul>");
@@ -29070,100 +29542,200 @@ var AIAgentView = () => {
       position: messages.length
     });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen bg-white", children: [
-    /* @__PURE__ */ jsx("div", { className: `${isSidebarOpen ? "w-80" : "w-0"} transition-all duration-300 overflow-hidden flex-shrink-0`, children: /* @__PURE__ */ jsx(
-      ThreadSidebar,
+  const renderAssistantContent = (content) => {
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        activeThreadId,
-        onSelectThread: setActiveThreadId,
-        onNewThread: handleNewThread,
-        className: "h-full"
+        className: "formatted-content",
+        dangerouslySetInnerHTML: { __html: formatMessage(content) }
       }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col", children: [
-      /* @__PURE__ */ jsx("header", { className: "flex-shrink-0 bg-white border-b border-gray-200", children: /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setIsSidebarOpen(!isSidebarOpen),
-              className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
-              "aria-label": "Toggle sidebar",
-              children: isSidebarOpen ? /* @__PURE__ */ jsx(X, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(Menu, { className: "w-5 h-5" })
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen bg-white", children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: {
+      __html: `
+          @keyframes slideDown {
+            0% {
+              transform: translateY(-40vh);
+              opacity: 1;
             }
-          ),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => navigate("/"),
-              className: "flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
-              "aria-label": "Go back",
-              children: [
-                /* @__PURE__ */ jsx(ArrowLeft, { className: "w-5 h-5" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Back" })
-              ]
+            100% {
+              transform: translateY(0);
+              opacity: 1;
             }
-          )
-        ] }),
+          }
+        `
+    } }),
+    /* @__PURE__ */ jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
+      /* @__PURE__ */ jsx("header", { className: "flex-shrink-0 bg-white border-b border-gray-200 sticky top-0 z-10", children: /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => navigate("/"),
+            className: "flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors",
+            "aria-label": "Go back",
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "w-5 h-5" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Back" })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx("h1", { className: "text-xl sm:text-2xl md:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: "Axel - AI Manufacturing Expert" }),
+            /* @__PURE__ */ jsx("h1", { className: "text-xl sm:text-2xl md:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: "Chat with Axel" }),
             /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-blue-500 animate-pulse ring-2 ring-blue-500/30" })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex items-center mt-1", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-500", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-24" })
+        /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setIsSidebarOpen(!isSidebarOpen),
+            className: "relative p-2 hover:bg-gray-100 rounded-lg transition-colors",
+            "aria-label": "Toggle sidebar",
+            children: [
+              isSidebarOpen ? /* @__PURE__ */ jsx(X, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(Menu, { className: "w-5 h-5" }),
+              !isSidebarOpen && newChatCount > 0 && /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center font-medium", children: newChatCount })
+            ]
+          }
+        ) })
       ] }) }) }),
       /* @__PURE__ */ jsx(
         "main",
         {
           ref: containerRef,
-          className: "flex-1 overflow-y-auto bg-gray-50/50 min-h-0",
-          children: /* @__PURE__ */ jsxs("div", { className: "max-w-5xl mx-auto p-4 sm:p-6 md:p-8", children: [
-            displayMessages.length === 0 && /* @__PURE__ */ jsx("div", { className: "mb-8 bg-white border border-gray-200/80 shadow-sm rounded-2xl p-6 sm:p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-xl overflow-hidden shadow-sm flex-shrink-0", children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: axelProfilePng,
-                  alt: "Axel - AI Manufacturing Expert",
-                  className: "w-full h-full object-cover"
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-1", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Hi, I'm Axel - Your AI Supervisor" }),
-                /* @__PURE__ */ jsx("p", { className: "text-gray-600 leading-relaxed", children: "Ask me anything about your shop-floor. I'll remember our conversation and help you optimize your manufacturing processes." })
+          className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
+          children: !activeThreadId && displayMessages.length === 0 && !isTransitioning ? (
+            /* Centered welcome and input for new chat */
+            /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl mx-auto px-4 sm:px-6 flex flex-col items-center justify-center space-y-12 -mt-16", children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-24 h-24" }) }),
+                /* @__PURE__ */ jsxs("h2", { className: "text-3xl font-semibold text-gray-900", children: [
+                  typedText,
+                  typedText.length < "Hi, I'm Axel - Your AI Supervisor".length && /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "|" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "w-full max-w-2xl", children: [
+                activeThreadId && messages.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handleNewThread,
+                    className: "inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors",
+                    children: [
+                      /* @__PURE__ */ jsx(RefreshCw, { className: "w-3.5 h-3.5" }),
+                      "New conversation"
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+                  /* @__PURE__ */ jsx("div", { className: "relative bg-white rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200", children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        ref: textareaRef,
+                        value: inputValue,
+                        onChange: (e) => {
+                          const newValue = e.target.value;
+                          setInputValue(newValue);
+                          if (newValue.length > 0 && !hasStartedTyping) {
+                            trackTypingStart();
+                          }
+                          if (newValue.length > 0) {
+                            trackTypingProgress(newValue);
+                          }
+                          if (newValue.length === 0) {
+                            resetTypingState();
+                          }
+                        },
+                        onKeyDown: handleKeyDown,
+                        onFocus: () => {
+                          trackCoreEvent("AI Agent Input Focused", {
+                            line_id: lineId,
+                            company_id: companyId,
+                            shift_id: shiftId,
+                            active_thread_id: activeThreadId,
+                            has_existing_messages: messages.length > 0,
+                            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+                          });
+                        },
+                        placeholder: "Ask me about production optimization, quality metrics, or any manufacturing challenge...",
+                        className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
+                        rows: 1,
+                        style: { minHeight: "24px", maxHeight: "120px" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "submit",
+                        disabled: !inputValue.trim() || isCurrentThreadLoading,
+                        className: "inline-flex items-center justify-center w-8 h-8 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
+                        children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
+                      }
+                    ) })
+                  ] }) }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
+                    /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
+                      /* @__PURE__ */ jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
+                      /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
+                    ] })
+                  ] })
+                ] })
               ] })
-            ] }) }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            ] })
+          ) : isTransitioning ? (
+            /* Transition state - show user message first, then thinking */
+            /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
               displayMessages.map((message, index) => /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
                   children: [
-                    message.role === "assistant" && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-xl overflow-hidden shadow-sm", children: /* @__PURE__ */ jsx(
-                      "img",
+                    message.role === "assistant" && /* @__PURE__ */ jsx(ProfilePicture, {}),
+                    /* @__PURE__ */ jsx("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: /* @__PURE__ */ jsx(
+                      "div",
                       {
-                        src: axelProfilePng,
-                        alt: "Axel",
-                        className: "w-full h-full object-cover"
+                        className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
+                        children: /* @__PURE__ */ jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
+                          message.role === "assistant" ? renderAssistantContent(message.content) : /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap leading-relaxed", children: message.content }),
+                          message.id === -1 && /* @__PURE__ */ jsx("span", { className: "inline-block w-0.5 h-4 bg-gray-400 animate-pulse ml-0.5" })
+                        ] })
                       }
-                    ) }) }),
-                    /* @__PURE__ */ jsxs("div", { className: `max-w-[75%] group ${message.role === "user" ? "order-1" : ""}`, children: [
+                    ) })
+                  ]
+                },
+                message.id === -1 ? "streaming-message" : `${message.id}-${index}`
+              )),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-4 justify-start", children: [
+                /* @__PURE__ */ jsx(ProfilePicture, {}),
+                /* @__PURE__ */ jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex space-x-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce" }),
+                    /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.1s" } }),
+                    /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.2s" } })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-600 text-sm", children: "Axel is thinking..." })
+                ] }) })
+              ] })
+            ] }) })
+          ) : (
+            /* Regular chat view with messages */
+            /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+              displayMessages.map((message, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
+                  children: [
+                    message.role === "assistant" && /* @__PURE__ */ jsx(ProfilePicture, {}),
+                    /* @__PURE__ */ jsxs("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: [
                       /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white" : "bg-white border border-gray-200/80"}`,
+                          className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
                           children: [
                             /* @__PURE__ */ jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
-                              message.role === "assistant" ? /* @__PURE__ */ jsx(
-                                "div",
-                                {
-                                  className: "formatted-content",
-                                  dangerouslySetInnerHTML: {
-                                    __html: formatMessage(message.content)
-                                  }
-                                }
-                              ) : /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap leading-relaxed", children: message.content }),
+                              message.role === "assistant" ? renderAssistantContent(message.content) : /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap leading-relaxed", children: message.content }),
                               message.id === -1 && /* @__PURE__ */ jsx("span", { className: "inline-block w-0.5 h-4 bg-gray-400 animate-pulse ml-0.5" })
                             ] }),
                             message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsx(
@@ -29189,15 +29761,14 @@ var AIAgentView = () => {
                           /* @__PURE__ */ jsx("span", { children: "Axel" })
                         ] })
                       ] })
-                    ] }),
-                    message.role === "user" && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-10 h-10 bg-gray-700 text-white rounded-xl flex items-center justify-center text-sm font-semibold", children: entityConfig.companyId?.charAt(0).toUpperCase() || "U" }) })
+                    ] })
                   ]
                 },
-                message.id === -1 ? `streaming-${currentStreaming.message.length}` : `${message.id}-${index}`
+                message.id === -1 ? "streaming-message" : `${message.id}-${index}`
               )),
               lastError && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 justify-start", children: [
                 /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsx(AlertCircle, { className: "w-6 h-6 text-red-600" }) }) }),
-                /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 px-5 py-4 rounded-2xl shadow-sm max-w-[75%]", children: [
+                /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: [
                   /* @__PURE__ */ jsx("p", { className: "text-red-800 text-sm", children: lastError }),
                   /* @__PURE__ */ jsx(
                     "button",
@@ -29210,29 +29781,22 @@ var AIAgentView = () => {
                 ] })
               ] }),
               isCurrentThreadLoading && !currentStreaming.message && /* @__PURE__ */ jsxs("div", { className: "flex gap-4 justify-start", children: [
-                /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-xl overflow-hidden shadow-sm", children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: axelProfilePng,
-                    alt: "Axel",
-                    className: "w-full h-full object-cover"
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-[75%]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(ProfilePicture, {}),
+                /* @__PURE__ */ jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex space-x-1", children: [
                     /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce" }),
                     /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.1s" } }),
                     /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.2s" } })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: "text-gray-600 text-sm", children: "Axel is analyzing your request..." })
+                  /* @__PURE__ */ jsx("span", { className: "text-gray-600 text-sm", children: "Axel is thinking..." })
                 ] }) })
               ] }),
               /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
-            ] })
-          ] })
+            ] }) })
+          )
         }
       ),
-      /* @__PURE__ */ jsx("footer", { className: "flex-shrink-0 border-t border-gray-200 bg-white sticky bottom-0", children: /* @__PURE__ */ jsxs("div", { className: "max-w-5xl mx-auto p-4 sm:p-6", children: [
+      (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsx("footer", { className: "fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-50/50 to-transparent pointer-events-none", children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto p-4 sm:p-6 pointer-events-auto", children: [
         activeThreadId && messages.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxs(
           "button",
           {
@@ -29244,48 +29808,81 @@ var AIAgentView = () => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-end", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  ref: textareaRef,
-                  value: inputValue,
-                  onChange: (e) => setInputValue(e.target.value),
-                  onKeyDown: handleKeyDown,
-                  placeholder: "Ask me about production optimization, quality metrics, or any manufacturing challenge...",
-                  className: "w-full resize-none rounded-xl border border-gray-300 px-4 py-3.5 pr-16 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 bg-white placeholder-gray-500 text-gray-900 text-sm leading-relaxed shadow-sm transition-all duration-200",
-                  rows: 1,
-                  disabled: isCurrentThreadLoading,
-                  style: { minHeight: "48px", maxHeight: "120px" }
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 right-3 flex items-center gap-2", children: inputValue.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 font-mono", children: inputValue.length }) })
-            ] }),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "submit",
-                disabled: !inputValue.trim() || isCurrentThreadLoading,
-                className: "inline-flex items-center justify-center gap-2 h-12 px-5 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all duration-200 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:ring-offset-2 shadow-sm hover:shadow-md disabled:hover:shadow-sm",
-                children: [
-                  /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" }),
-                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Send" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-gray-400", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx("span", { children: "Press Enter to send \u2022 Shift+Enter for new line" }) }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-green-500 rounded-full" }),
-              /* @__PURE__ */ jsx("span", { children: "Connected" })
-            ] }) })
+        /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `relative bg-white rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200 ${isTransitioning ? "animate-slide-down" : ""}`,
+              style: isTransitioning ? {
+                animation: "slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards"
+              } : {},
+              children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ref: textareaRef,
+                    value: inputValue,
+                    onChange: (e) => {
+                      const newValue = e.target.value;
+                      setInputValue(newValue);
+                      if (newValue.length > 0 && !hasStartedTyping) {
+                        trackTypingStart();
+                      }
+                      if (newValue.length > 0) {
+                        trackTypingProgress(newValue);
+                      }
+                      if (newValue.length === 0) {
+                        resetTypingState();
+                      }
+                    },
+                    onKeyDown: handleKeyDown,
+                    onFocus: () => {
+                      trackCoreEvent("AI Agent Input Focused", {
+                        line_id: lineId,
+                        company_id: companyId,
+                        shift_id: shiftId,
+                        active_thread_id: activeThreadId,
+                        has_existing_messages: messages.length > 0,
+                        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+                      });
+                    },
+                    placeholder: "Ask me about production optimization, quality metrics, or any manufacturing challenge...",
+                    className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
+                    rows: 1,
+                    style: { minHeight: "24px", maxHeight: "120px" }
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: !inputValue.trim() || isCurrentThreadLoading,
+                    className: "inline-flex items-center justify-center w-8 h-8 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
+                    children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
+                  }
+                ) })
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
+            /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
+              /* @__PURE__ */ jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
+              /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
+            ] })
           ] })
         ] })
       ] }) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: `${isSidebarOpen ? "w-80" : "w-0"} transition-all duration-300 overflow-hidden flex-shrink-0 border-l border-gray-200 h-screen fixed right-0 top-0 z-20`, children: /* @__PURE__ */ jsx(
+      ThreadSidebar,
+      {
+        activeThreadId,
+        onSelectThread: setActiveThreadId,
+        onNewThread: handleNewThread,
+        className: "h-full"
+      }
+    ) })
   ] });
 };
 var AIAgentView_default = AIAgentView;
@@ -31162,7 +31759,8 @@ var parseBreaksFromDB = (dbBreaks) => {
       duration: calculateBreakDuration(
         breakItem.start || breakItem.startTime || "00:00",
         breakItem.end || breakItem.endTime || "00:00"
-      )
+      ),
+      remarks: breakItem.remarks || breakItem.name || ""
     }));
   } else if (dbBreaks.breaks && Array.isArray(dbBreaks.breaks)) {
     return dbBreaks.breaks.map((breakItem) => ({
@@ -31171,7 +31769,8 @@ var parseBreaksFromDB = (dbBreaks) => {
       duration: calculateBreakDuration(
         breakItem.start || breakItem.startTime || "00:00",
         breakItem.end || breakItem.endTime || "00:00"
-      )
+      ),
+      remarks: breakItem.remarks || breakItem.name || ""
     }));
   } else {
     console.warn("Unexpected breaks format:", dbBreaks);
@@ -31189,7 +31788,8 @@ var formatBreaks = (breaks) => {
   return {
     breaks: breaks.map((breakItem) => ({
       start: breakItem.startTime,
-      end: breakItem.endTime
+      end: breakItem.endTime,
+      remarks: breakItem.remarks || ""
     }))
   };
 };
@@ -31199,13 +31799,14 @@ var BreakRow = memo(({
   onRemove,
   index
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-9 gap-2 sm:gap-4 items-center w-full bg-white hover:bg-gray-50 rounded-md transition-all duration-200 p-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 sm:gap-4 items-center w-full bg-white hover:bg-gray-50 rounded-md transition-all duration-200 p-2", children: [
     /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
       "input",
       {
         type: "time",
         value: breakItem.startTime,
         onChange: (e) => onUpdate(index, "startTime", e.target.value),
+        step: "60",
         className: "w-full px-2 sm:px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       }
     ) }),
@@ -31215,6 +31816,7 @@ var BreakRow = memo(({
         type: "time",
         value: breakItem.endTime,
         onChange: (e) => onUpdate(index, "endTime", e.target.value),
+        step: "60",
         className: "w-full px-2 sm:px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       }
     ) }),
@@ -31222,6 +31824,16 @@ var BreakRow = memo(({
       breakItem.duration,
       " min"
     ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: breakItem.remarks || "",
+        onChange: (e) => onUpdate(index, "remarks", e.target.value),
+        placeholder: "Break remarks",
+        className: "w-full px-2 sm:px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+      }
+    ) }),
     /* @__PURE__ */ jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsx(
       "button",
       {
@@ -31338,10 +31950,11 @@ var ShiftPanel = memo(({
           "Breaks"
         ] }) }),
         /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4 w-full", children: breaks.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-9 gap-2 sm:gap-4 text-xs font-medium text-gray-500 mb-1 w-full px-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 sm:gap-4 text-xs font-medium text-gray-500 mb-1 w-full px-2", children: [
             /* @__PURE__ */ jsx("div", { className: "col-span-3", children: "Break Start" }),
             /* @__PURE__ */ jsx("div", { className: "col-span-3", children: "Break End" }),
             /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Duration" }),
+            /* @__PURE__ */ jsx("div", { className: "col-span-3", children: "Remarks" }),
             /* @__PURE__ */ jsx("div", { className: "col-span-1" })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "bg-gray-50/80 p-2 rounded-md", children: breaks.map((breakItem, index) => /* @__PURE__ */ jsx(
@@ -31554,7 +32167,8 @@ var ShiftsView = ({
         const newBreak = {
           startTime: dayShift.startTime,
           endTime: dayShift.startTime,
-          duration: 0
+          duration: 0,
+          remarks: ""
         };
         return {
           ...typedConfig,
@@ -31595,14 +32209,16 @@ var ShiftsView = ({
         const dayShift = { ...typedConfig.dayShift };
         const newBreaks = [...dayShift.breaks];
         newBreaks[index] = { ...newBreaks[index], [field]: value };
-        const startParts = newBreaks[index].startTime.split(":").map(Number);
-        const endParts = newBreaks[index].endTime.split(":").map(Number);
-        let startMinutes = startParts[0] * 60 + startParts[1];
-        let endMinutes = endParts[0] * 60 + endParts[1];
-        if (endMinutes < startMinutes) {
-          endMinutes += 24 * 60;
-        }
-        newBreaks[index].duration = endMinutes - startMinutes;
+        if (field === "startTime" || field === "endTime") {
+          const startParts = newBreaks[index].startTime.split(":").map(Number);
+          const endParts = newBreaks[index].endTime.split(":").map(Number);
+          let startMinutes = startParts[0] * 60 + startParts[1];
+          let endMinutes = endParts[0] * 60 + endParts[1];
+          if (endMinutes < startMinutes) {
+            endMinutes += 24 * 60;
+          }
+          newBreaks[index].duration = endMinutes - startMinutes;
+        }
         return {
           ...typedConfig,
           dayShift: {
@@ -31621,14 +32237,16 @@ var ShiftsView = ({
         const nightShift = { ...typedConfig.nightShift };
         const newBreaks = [...nightShift.breaks];
         newBreaks[index] = { ...newBreaks[index], [field]: value };
-        const startParts = newBreaks[index].startTime.split(":").map(Number);
-        const endParts = newBreaks[index].endTime.split(":").map(Number);
-        let startMinutes = startParts[0] * 60 + startParts[1];
-        let endMinutes = endParts[0] * 60 + endParts[1];
-        if (endMinutes < startMinutes) {
-          endMinutes += 24 * 60;
-        }
-        newBreaks[index].duration = endMinutes - startMinutes;
+        if (field === "startTime" || field === "endTime") {
+          const startParts = newBreaks[index].startTime.split(":").map(Number);
+          const endParts = newBreaks[index].endTime.split(":").map(Number);
+          let startMinutes = startParts[0] * 60 + startParts[1];
+          let endMinutes = endParts[0] * 60 + endParts[1];
+          if (endMinutes < startMinutes) {
+            endMinutes += 24 * 60;
+          }
+          newBreaks[index].duration = endMinutes - startMinutes;
+        }
         return {
           ...typedConfig,
           nightShift: {