@optifye/dashboard-core 4.1.1 → 4.1.2

package/dist/index.mjs

@@ -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",
@@ -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();
@@ -28739,12 +28968,85 @@ var AIAgentView = () => {
   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);
@@ -28767,7 +29069,7 @@ var AIAgentView = () => {
   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}`;
-  useEffect(() => {
+  useLayoutEffect(() => {
     const savedThreadId = localStorage.getItem(ACTIVE_THREAD_STORAGE_KEY);
     if (savedThreadId && savedThreadId !== "undefined") {
       setActiveThreadId(savedThreadId);
@@ -28780,6 +29082,27 @@ var AIAgentView = () => {
       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";
@@ -28830,9 +29153,20 @@ var AIAgentView = () => {
     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();
@@ -28863,6 +29197,7 @@ 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(() => {
@@ -29270,18 +29605,11 @@ var AIAgentView = () => {
         {
           ref: containerRef,
           className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
-          children: displayMessages.length === 0 && !isTransitioning ? (
+          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("div", { className: "w-24 h-24 rounded-xl overflow-hidden shadow-sm", children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: axelProfilePng,
-                    alt: "Axel - AI Manufacturing Expert",
-                    className: "w-full h-full object-cover"
-                  }
-                ) }) }),
+                /* @__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: "|" })
@@ -29306,8 +29634,30 @@ var AIAgentView = () => {
                       {
                         ref: textareaRef,
                         value: inputValue,
-                        onChange: (e) => setInputValue(e.target.value),
+                        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,
@@ -29342,14 +29692,7 @@ var AIAgentView = () => {
                 {
                   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",
-                      {
-                        src: axelProfilePng,
-                        alt: "Axel",
-                        className: "w-full h-full object-cover"
-                      }
-                    ) }) }),
+                    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",
                       {
@@ -29362,17 +29705,10 @@ var AIAgentView = () => {
                     ) })
                   ]
                 },
-                message.id === -1 ? `streaming-${currentStreaming.message.length}` : `${message.id}-${index}`
+                message.id === -1 ? "streaming-message" : `${message.id}-${index}`
               )),
               /* @__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(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" }),
@@ -29391,14 +29727,7 @@ var AIAgentView = () => {
                 {
                   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",
-                      {
-                        src: axelProfilePng,
-                        alt: "Axel",
-                        className: "w-full h-full object-cover"
-                      }
-                    ) }) }),
+                    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",
@@ -29435,7 +29764,7 @@ var AIAgentView = () => {
                     ] })
                   ]
                 },
-                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" }) }) }),
@@ -29452,14 +29781,7 @@ 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(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" }),
@@ -29500,8 +29822,30 @@ var AIAgentView = () => {
                   {
                     ref: textareaRef,
                     value: inputValue,
-                    onChange: (e) => setInputValue(e.target.value),
+                    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,
@@ -31415,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) => ({
@@ -31424,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);
@@ -31442,7 +31788,8 @@ var formatBreaks = (breaks) => {
   return {
     breaks: breaks.map((breakItem) => ({
       start: breakItem.startTime,
-      end: breakItem.endTime
+      end: breakItem.endTime,
+      remarks: breakItem.remarks || ""
     }))
   };
 };
@@ -31452,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"
       }
     ) }),
@@ -31468,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"
       }
     ) }),
@@ -31475,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",
       {
@@ -31591,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(
@@ -31807,7 +32167,8 @@ var ShiftsView = ({
         const newBreak = {
           startTime: dayShift.startTime,
           endTime: dayShift.startTime,
-          duration: 0
+          duration: 0,
+          remarks: ""
         };
         return {
           ...typedConfig,
@@ -31848,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: {
@@ -31874,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: {