@optifye/dashboard-core 4.3.5 → 4.3.8

package/dist/index.js

@@ -463,6 +463,25 @@ var getTable2 = (dbConfig, tableName) => {
   return userValue ?? defaults2[tableName];
 };
 var dashboardService = {
+  /**
+   * Helper method to filter workspaces by line_id for disambiguation
+   * @param workspaces - Array of workspace metrics
+   * @param lineId - Line ID to filter by
+   * @returns Filtered workspace metrics
+   */
+  filterWorkspacesByLineId(workspaces, lineId) {
+    return workspaces.filter((workspace) => workspace.line_id === lineId);
+  },
+  /**
+   * Helper method to get workspace by composite key (line_id + workspace_name)
+   * @param workspaces - Array of workspace metrics
+   * @param workspaceName - Workspace name to search for
+   * @param lineId - Line ID to filter by
+   * @returns Matching workspace or undefined
+   */
+  getWorkspaceByLineIdAndName(workspaces, workspaceName, lineId) {
+    return workspaces.find((workspace) => workspace.workspace_name === workspaceName && workspace.line_id === lineId);
+  },
   // Example for getLineInfo:
   async getLineInfo(lineIdInput) {
     const supabase = _getSupabaseInstance();
@@ -623,6 +642,13 @@ var dashboardService = {
       metrics: metricsForReturn
     };
   },
+  /**
+   * Get workspace data with line_id-aware filtering
+   * @param lineIdInput - Specific line ID to filter by, or factory view ID
+   * @param dateProp - Date to query (optional)
+   * @param shiftProp - Shift ID to query (optional)
+   * @returns Array of workspace metrics with line_id context
+   */
   async getWorkspacesData(lineIdInput, dateProp, shiftProp) {
     const supabase = _getSupabaseInstance();
     const config = _getDashboardConfigInstance();
@@ -649,17 +675,20 @@ var dashboardService = {
         throw new Error("Factory View requires defaultLineId and secondaryLineId to be configured for workspace data.");
       }
       query = query.in("line_id", [defaultLineId, secondaryLineId]);
+      console.log(`[getWorkspacesData] Querying factory view with lines: ${defaultLineId}, ${secondaryLineId}`);
     } else {
       query = query.eq("line_id", lineId);
+      console.log(`[getWorkspacesData] Querying single line: ${lineId}`);
     }
     const { data, error } = await query;
     if (error) {
       console.error("Error in getWorkspacesData:", error);
       throw error;
     }
-    return (data || []).map((item) => ({
+    const workspaces = (data || []).map((item) => ({
       company_id: item.company_id,
       line_id: item.line_id,
+      // Ensure line_id is always included
       shift_id: item.shift_id,
       date: item.date,
       workspace_uuid: item.workspace_id,
@@ -673,6 +702,20 @@ var dashboardService = {
       efficiency: item.efficiency || 0,
       action_threshold: item.total_day_output || 0
     }));
+    console.log(`[getWorkspacesData] Retrieved ${workspaces.length} workspaces for line(s): ${lineId || "factory"}`);
+    console.log(
+      `[getWorkspacesData] Workspace line_id distribution:`,
+      workspaces.reduce((acc, ws) => {
+        acc[ws.line_id] = (acc[ws.line_id] || 0) + 1;
+        return acc;
+      }, {})
+    );
+    console.log(`[getWorkspacesData] Sample workspaces:`, workspaces.slice(0, 5).map((ws) => ({
+      workspace_name: ws.workspace_name,
+      line_id: ws.line_id,
+      efficiency: ws.efficiency
+    })));
+    return workspaces;
   },
   async getWorkspaceDetailedMetrics(workspaceUuid, dateProp, shiftIdProp) {
     const supabase = _getSupabaseInstance();
@@ -1905,8 +1948,8 @@ var SSEChatClient = class {
       user_id: userId,
       context
     });
-    const agnoApiUrl = this.baseUrl || "https://optifye-agent-production.up.railway.app";
-    const endpoint = `${agnoApiUrl}/api/chat`;
+    const agnoApiUrl = this.baseUrl || "https://fastapi-production-111f9.up.railway.app";
+    const endpoint = `${agnoApiUrl}/api/v2/chat`;
     console.log("[SSEClient] Posting directly to AGNO:", endpoint);
     const response = await fetch(endpoint, {
       method: "POST",
@@ -1964,7 +2007,7 @@ var SSEChatClient = class {
     const decoder = new TextDecoder();
     let buffer = "";
     try {
-      console.log("[SSEClient] Starting to read stream...");
+      console.log("[SSEClient] Starting to read enhanced stream...");
       while (true) {
         const { done, value } = await reader.read();
         if (done) {
@@ -1994,11 +2037,14 @@ var SSEChatClient = class {
                   case "message":
                     callbacks.onMessage?.(data.text);
                     break;
-                  case "reasoning":
-                    callbacks.onReasoning?.(data.text);
+                  case "tool_call":
+                    callbacks.onToolCall?.(data.tools);
+                    break;
+                  case "tool_result":
+                    callbacks.onToolResult?.(data.results);
                     break;
                   case "complete":
-                    callbacks.onComplete?.(data.message_id);
+                    callbacks.onComplete?.(data.message_id, data.metrics);
                     break;
                   case "error":
                     callbacks.onError?.(data.error);
@@ -2538,7 +2584,7 @@ var useMetrics = (tableName, options) => {
   };
   return { data, isLoading, error, refetch };
 };
-var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
+var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId, lineId) => {
   const entityConfig = useEntityConfig();
   const databaseConfig = useDatabaseConfig();
   const dateTimeConfig = useDateTimeConfig();
@@ -2566,14 +2612,32 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
       const currentShift = getCurrentShift(defaultTimezone, shiftConfig);
       const queryDate = date || currentShift.date;
       const queryShiftId = shiftId !== void 0 ? shiftId : currentShift.shiftId;
+      console.log("[useWorkspaceDetailedMetrics] Hook called with parameters:", {
+        workspaceId,
+        date,
+        shiftId,
+        lineId,
+        queryDate,
+        queryShiftId
+      });
       console.log("[useWorkspaceDetailedMetrics] Using shift ID:", queryShiftId, "from input shift:", shiftId);
       console.log("[useWorkspaceDetailedMetrics] Using date:", queryDate, "from input date:", date);
-      console.log(`[useWorkspaceDetailedMetrics] Querying ${metricsTable} for workspace: ${workspaceId}, date: ${queryDate}, shift: ${queryShiftId}`);
-      const { data, error: fetchError } = await supabase.from(metricsTable).select("*").eq("workspace_id", workspaceId).eq("date", queryDate).eq("shift_id", queryShiftId).maybeSingle();
+      console.log(`[useWorkspaceDetailedMetrics] Querying ${metricsTable} for workspace: ${workspaceId}, date: ${queryDate}, shift: ${queryShiftId}, line: ${lineId || "any"}`);
+      let query = supabase.from(metricsTable).select("*").eq("workspace_id", workspaceId).eq("date", queryDate).eq("shift_id", queryShiftId);
+      if (lineId) {
+        query = query.eq("line_id", lineId);
+        console.log(`[useWorkspaceDetailedMetrics] Filtering by line_id: ${lineId}`);
+      }
+      const { data, error: fetchError } = await query.maybeSingle();
       if (fetchError) throw fetchError;
       if (!data && !date && shiftId === void 0) {
         console.log("[useWorkspaceDetailedMetrics] No data found for current date/shift, attempting to find most recent data...");
-        const { data: recentData, error: recentError } = await supabase.from(metricsTable).select("*").eq("workspace_id", workspaceId).order("date", { ascending: false }).order("shift_id", { ascending: false }).limit(1).maybeSingle();
+        let recentQuery = supabase.from(metricsTable).select("*").eq("workspace_id", workspaceId);
+        if (lineId) {
+          recentQuery = recentQuery.eq("line_id", lineId);
+          console.log(`[useWorkspaceDetailedMetrics] Fallback query filtering by line_id: ${lineId}`);
+        }
+        const { data: recentData, error: recentError } = await recentQuery.order("date", { ascending: false }).order("shift_id", { ascending: false }).limit(1).maybeSingle();
         if (recentError) throw recentError;
         if (recentData) {
           console.log(`[useWorkspaceDetailedMetrics] Found fallback data from date: ${recentData.date}, shift: ${recentData.shift_id}`);
@@ -2791,7 +2855,7 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
       updateQueueRef.current = false;
       setIsLoading(false);
     }
-  }, [supabase, workspaceId, date, shiftId, metricsTable, defaultTimezone, shiftConfig, workspaceConfig, companyId]);
+  }, [supabase, workspaceId, date, shiftId, lineId, metricsTable, defaultTimezone, shiftConfig, workspaceConfig, companyId]);
   const queueUpdate = React14.useCallback(() => {
     if (!workspaceId || updateQueueRef.current) return;
     updateQueueRef.current = true;
@@ -2922,7 +2986,7 @@ var useWorkspaceDetailedMetrics = (workspaceId, date, shiftId) => {
         supabase.removeChannel(channelRef.current);
       }
     };
-  }, [supabase, workspaceId, date, shiftId, fetchMetrics, queueUpdate, setupSubscription, metricsTable, workspaceMetricsBaseTable, workspaceActionsTable, defaultTimezone, shiftConfig, schema, metricsTablePrefix]);
+  }, [supabase, workspaceId, date, shiftId, lineId, fetchMetrics, queueUpdate, setupSubscription, metricsTable, workspaceMetricsBaseTable, workspaceActionsTable, defaultTimezone, shiftConfig, schema, metricsTablePrefix]);
   return {
     metrics: metrics2,
     isLoading,
@@ -3384,6 +3448,7 @@ var setCache = (lineId, metrics2) => {
   }
 };
 var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
+  console.log("[useDashboardMetrics] Hook called with lineId:", lineId);
   const { supabaseUrl, supabaseKey } = useDashboardConfig();
   const entityConfig = useEntityConfig();
   const databaseConfig = useDatabaseConfig();
@@ -3427,14 +3492,33 @@ var useDashboardMetrics = ({ onLineMetricsUpdate, lineId }) => {
     try {
       const currentShiftDetails = getCurrentShift(defaultTimezone, shiftConfig);
       const operationalDate = getOperationalDate(defaultTimezone);
-      const targetLineIds = currentLineIdToUse === (entityConfig.factoryViewId || "factory") ? [entityConfig.defaultLineId, entityConfig.secondaryLineId].filter((id3) => !!id3) : [currentLineIdToUse];
+      const isFactoryView = currentLineIdToUse === (entityConfig.factoryViewId || "factory");
+      const targetLineIds = isFactoryView ? [entityConfig.defaultLineId, entityConfig.secondaryLineId].filter((id3) => !!id3) : [currentLineIdToUse];
+      console.log("[useDashboardMetrics] Target line IDs determined:", {
+        currentLineIdToUse,
+        isFactoryView,
+        factoryViewId: entityConfig.factoryViewId,
+        defaultLineId: entityConfig.defaultLineId,
+        secondaryLineId: entityConfig.secondaryLineId,
+        targetLineIds
+      });
       if (targetLineIds.length === 0 && currentLineIdToUse === (entityConfig.factoryViewId || "factory")) {
         throw new Error("Factory view selected, but defaultLineId and/or secondaryLineId are not configured in entityConfig.");
       }
       if (targetLineIds.length === 0) {
         throw new Error("No target line IDs available for fetching metrics.");
       }
+      console.log("[useDashboardMetrics] Executing workspace query with line IDs:", targetLineIds, "Date:", operationalDate, "ShiftID:", currentShiftDetails.shiftId, "Table:", companySpecificMetricsTable);
       const { data: workspaceData, error: workspaceError } = await supabase.from(companySpecificMetricsTable).select("company_id,line_id,shift_id,date,workspace_id,workspace_name,total_output,avg_pph,performance_score,avg_cycle_time,trend_score,ideal_output,efficiency,total_day_output").eq("date", operationalDate).eq("shift_id", currentShiftDetails.shiftId).in("line_id", targetLineIds);
+      console.log("[useDashboardMetrics] Workspace query result:", {
+        dataCount: workspaceData?.length || 0,
+        error: workspaceError,
+        sampleData: workspaceData?.slice(0, 3).map((w) => ({
+          workspace_name: w.workspace_name,
+          line_id: w.line_id,
+          efficiency: w.efficiency
+        }))
+      });
       if (workspaceError) {
         throw workspaceError;
       }
@@ -4806,12 +4890,16 @@ function getCurrentLineIds() {
   try {
     const config = _getDashboardConfigInstance();
     const entityConfig = config?.entityConfig;
+    console.log("\u{1F504} Dashboard config:", config);
+    console.log("\u{1F504} Entity config:", entityConfig);
     const lineIds = [];
     if (entityConfig?.defaultLineId) {
       lineIds.push(entityConfig.defaultLineId);
+      console.log("\u{1F504} Added defaultLineId:", entityConfig.defaultLineId);
     }
     if (entityConfig?.secondaryLineId) {
       lineIds.push(entityConfig.secondaryLineId);
+      console.log("\u{1F504} Added secondaryLineId:", entityConfig.secondaryLineId);
     }
     console.log("\u{1F504} Current line IDs from config:", lineIds);
     return lineIds;
@@ -4829,15 +4917,22 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
     let targetLineIds = [];
     if (explicitLineId) {
       targetLineIds = [explicitLineId];
+      console.log("\u{1F504} Using explicit lineId:", explicitLineId);
     } else {
       targetLineIds = getCurrentLineIds();
+      console.log("\u{1F504} Using line IDs from config:", targetLineIds);
     }
     console.log("\u{1F504} Target line IDs for workspace filtering:", targetLineIds);
     const allDisplayNamesMap = /* @__PURE__ */ new Map();
+    console.log("\u{1F504} About to fetch workspaces for lines:", targetLineIds);
     if (targetLineIds.length > 0) {
       for (const lineId of targetLineIds) {
         console.log(`\u{1F504} Fetching workspaces for line: ${lineId}`);
         const lineDisplayNamesMap = await workspaceService.getWorkspaceDisplayNames(void 0, lineId);
+        console.log(
+          `\u{1F504} Retrieved ${lineDisplayNamesMap.size} workspaces for line ${lineId}:`,
+          Array.from(lineDisplayNamesMap.entries()).slice(0, 5)
+        );
         lineDisplayNamesMap.forEach((displayName, workspaceId) => {
           allDisplayNamesMap.set(workspaceId, displayName);
         });
@@ -4849,6 +4944,7 @@ async function initializeWorkspaceDisplayNames(explicitLineId) {
         allDisplayNamesMap.set(workspaceId, displayName);
       });
     }
+    console.log("\u{1F504} Final combined display names map size:", allDisplayNamesMap.size);
     runtimeWorkspaceDisplayNames = {};
     allDisplayNamesMap.forEach((displayName, workspaceId) => {
       runtimeWorkspaceDisplayNames[workspaceId] = displayName;
@@ -4876,6 +4972,7 @@ var forceRefreshWorkspaceDisplayNames = async (lineId) => {
 };
 console.log("\u{1F504} Module loaded, will initialize lazily when first function is called");
 var getWorkspaceDisplayName = (workspaceId, lineId) => {
+  console.log(`\u{1F504} [DEBUG] getWorkspaceDisplayName called with:`, { workspaceId, lineId, isInitialized, isInitializing });
   if (!isInitialized && !isInitializing) {
     console.log(`\u{1F504} [DEBUG] getWorkspaceDisplayName(${workspaceId}) - Not initialized, triggering lazy init...`);
   } else if (isInitializing) {
@@ -4887,6 +4984,14 @@ var getWorkspaceDisplayName = (workspaceId, lineId) => {
       console.error("\u274C Lazy initialization failed:", error);
     });
   }
+  if (lineId) {
+    const lineSpecificKey = `${lineId}_${workspaceId}`;
+    const lineSpecificDisplayName = runtimeWorkspaceDisplayNames[lineSpecificKey];
+    if (lineSpecificDisplayName) {
+      console.log(`getWorkspaceDisplayName(${workspaceId}, ${lineId}) -> ${lineSpecificDisplayName} (line-specific from Supabase)`);
+      return lineSpecificDisplayName;
+    }
+  }
   const displayName = runtimeWorkspaceDisplayNames[workspaceId];
   if (displayName) {
     console.log(`getWorkspaceDisplayName(${workspaceId}) -> ${displayName} (from Supabase)`);
@@ -4907,6 +5012,14 @@ var getShortWorkspaceDisplayName = (workspaceId, lineId) => {
       console.error("\u274C Lazy initialization failed:", error);
     });
   }
+  if (lineId) {
+    const lineSpecificKey = `${lineId}_${workspaceId}`;
+    const lineSpecificDisplayName = runtimeWorkspaceDisplayNames[lineSpecificKey];
+    if (lineSpecificDisplayName) {
+      console.log(`getShortWorkspaceDisplayName(${workspaceId}, ${lineId}) -> ${lineSpecificDisplayName} (line-specific from Supabase)`);
+      return lineSpecificDisplayName;
+    }
+  }
   const displayName = runtimeWorkspaceDisplayNames[workspaceId];
   if (displayName) {
     console.log(`getShortWorkspaceDisplayName(${workspaceId}) -> ${displayName} (from Supabase)`);
@@ -7981,18 +8094,36 @@ function cn(...inputs) {
 }
 
 // src/lib/utils/urlMapping.ts
-var toUrlFriendlyName = (workspaceName) => {
+var toUrlFriendlyName = (workspaceName, lineId) => {
   if (!workspaceName) throw new Error("Workspace name is required");
-  return workspaceName.toLowerCase().replace(/\s+/g, "-");
+  const baseName = workspaceName.toLowerCase().replace(/\s+/g, "-");
+  return lineId ? `${lineId}-${baseName}` : baseName;
+};
+var fromUrlFriendlyName = (urlName) => {
+  const parts = urlName.split("-");
+  if (parts.length >= 2 && (parts[0].startsWith("line") || parts[0].length === 36)) {
+    return {
+      lineId: parts[0],
+      workspaceName: parts.slice(1).join("-").toUpperCase()
+    };
+  }
+  return { workspaceName: urlName.toUpperCase() };
 };
-var fromUrlFriendlyName = (urlName) => urlName.toUpperCase();
 var storeWorkspaceMapping = (mapping) => {
   const mappings = getStoredWorkspaceMappings();
-  mappings[mapping.urlName] = mapping;
+  const key = mapping.lineId ? `${mapping.lineId}_${mapping.urlName}` : mapping.urlName;
+  mappings[key] = mapping;
   sessionStorage.setItem("workspaceMappings", JSON.stringify(mappings));
 };
-var getWorkspaceFromUrl = (urlName) => {
+var getWorkspaceFromUrl = (urlName, lineId) => {
   const mappings = getStoredWorkspaceMappings();
+  if (lineId) {
+    const lineSpecificKey = `${lineId}_${urlName}`;
+    const lineSpecificMapping = mappings[lineSpecificKey];
+    if (lineSpecificMapping) {
+      return lineSpecificMapping;
+    }
+  }
   return mappings[urlName] || null;
 };
 var getStoredWorkspaceMappings = () => {
@@ -8003,6 +8134,26 @@ var getStoredWorkspaceMappings = () => {
     return {};
   }
 };
+var getWorkspaceMappingsForLine = (lineId) => {
+  const allMappings = getStoredWorkspaceMappings();
+  const lineMappings = {};
+  Object.entries(allMappings).forEach(([key, mapping]) => {
+    if (mapping.lineId === lineId) {
+      lineMappings[key] = mapping;
+    }
+  });
+  return lineMappings;
+};
+var clearWorkspaceMappingsForLine = (lineId) => {
+  const allMappings = getStoredWorkspaceMappings();
+  const filteredMappings = {};
+  Object.entries(allMappings).forEach(([key, mapping]) => {
+    if (mapping.lineId !== lineId) {
+      filteredMappings[key] = mapping;
+    }
+  });
+  sessionStorage.setItem("workspaceMappings", JSON.stringify(filteredMappings));
+};
 
 // src/lib/utils/workspacePreferences.ts
 var getDefaultTabForWorkspace = (workspaceId, displayName) => {
@@ -17497,6 +17648,7 @@ var VideoCard = React14__namespace.default.memo(({
 });
 VideoCard.displayName = "VideoCard";
 var DEFAULT_WORKSPACE_HLS_URLS = {
+  // Line-agnostic fallbacks
   "WS1": "https://dnh-hls.optifye.ai/cam1/index.m3u8",
   "WS2": "https://dnh-hls.optifye.ai/cam2/index.m3u8",
   "WS3": "https://dnh-hls.optifye.ai/cam3/index.m3u8",
@@ -17507,6 +17659,9 @@ var DEFAULT_WORKSPACE_HLS_URLS = {
   "WS04": "https://59.144.218.58:8443/camera4.m3u8",
   "WS05": "https://59.144.218.58:8443/camera1.m3u8",
   "WS06": "https://59.144.218.58:8443/camera5.m3u8"
+  // Line-specific mappings (line_id_workspaceName format)
+  // Example: '98a2287e-8d55-4020-b00d-b9940437e3e1_WS1': 'https://line1-hls.optifye.ai/cam1/index.m3u8',
+  // Example: 'd93997bb-ecac-4478-a4a6-008d536b724c_WS1': 'https://line2-hls.optifye.ai/cam1/index.m3u8',
 };
 var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
 var VideoGridView = React14__namespace.default.memo(({
@@ -17514,7 +17669,8 @@ var VideoGridView = React14__namespace.default.memo(({
   selectedLine,
   className = "",
   lineIdMapping = {},
-  videoSources = {}
+  videoSources = {},
+  targetLineId
 }) => {
   const router$1 = router.useRouter();
   const containerRef = React14.useRef(null);
@@ -17522,14 +17678,38 @@ var VideoGridView = React14__namespace.default.memo(({
   const [gridCols, setGridCols] = React14.useState(4);
   const [visibleWorkspaces, setVisibleWorkspaces] = React14.useState(/* @__PURE__ */ new Set());
   const videoConfig = useVideoConfig();
+  const entityConfig = useEntityConfig();
   const { cropping, canvasConfig } = videoConfig;
+  const defaultLineId = entityConfig.defaultLineId;
+  const secondaryLineId = entityConfig.secondaryLineId;
+  console.log("[VideoGridView] Line configuration:", {
+    defaultLineId,
+    secondaryLineId,
+    selectedLine,
+    targetLineId,
+    totalWorkspaces: workspaces.length
+  });
   const mergedVideoSources = {
     defaultHlsUrl: videoSources.defaultHlsUrl || DEFAULT_HLS_URL,
     workspaceHlsUrls: { ...DEFAULT_WORKSPACE_HLS_URLS, ...videoSources.workspaceHlsUrls }
   };
-  const getWorkspaceHlsUrl = React14.useCallback((workspaceName) => {
+  const getWorkspaceHlsUrl = React14.useCallback((workspaceName, lineId) => {
     const wsName = workspaceName.toUpperCase();
-    return mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl;
+    if (lineId) {
+      const lineSpecificKey = `${lineId}_${wsName}`;
+      const lineSpecificUrl = mergedVideoSources.workspaceHlsUrls[lineSpecificKey];
+      console.log(`[VideoGridView] HLS URL lookup for ${wsName} (line: ${lineId}):`, {
+        lineSpecificKey,
+        lineSpecificUrl,
+        fallbackUrl: mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl
+      });
+      if (lineSpecificUrl) {
+        return lineSpecificUrl;
+      }
+    }
+    const fallbackUrl = mergedVideoSources.workspaceHlsUrls[wsName] || mergedVideoSources.defaultHlsUrl;
+    console.log(`[VideoGridView] HLS URL fallback for ${wsName}:`, fallbackUrl);
+    return fallbackUrl;
   }, [mergedVideoSources]);
   const getWorkspaceCropping = React14.useCallback((workspaceName) => {
     if (!cropping) return void 0;
@@ -17544,26 +17724,70 @@ var VideoGridView = React14__namespace.default.memo(({
     );
   }, [workspaces]);
   const filteredWorkspaces = React14.useMemo(() => {
-    return selectedLine === 1 ? workspaces.filter((w) => {
-      if (w.workspace_name === "WS5-5") return true;
-      if (w.workspace_name === "WS32-5") return false;
-      try {
-        const wsNumber = parseInt(w.workspace_name.replace("WS", ""));
-        return wsNumber >= 1 && wsNumber <= 22;
-      } catch {
-        return true;
-      }
-    }) : selectedLine === 2 ? workspaces.filter((w) => {
-      if (w.workspace_name === "WS5-5") return false;
-      if (w.workspace_name === "WS32-5") return true;
-      try {
-        const wsNumber = parseInt(w.workspace_name.replace("WS", ""));
-        return wsNumber >= 23 && wsNumber <= 44;
-      } catch {
-        return false;
-      }
-    }) : workspaces;
-  }, [workspaces, selectedLine]);
+    const uniqueLineIds = [...new Set(workspaces.map((w) => w.line_id))];
+    console.log("[VideoGridView] Filtering workspaces:", {
+      totalWorkspaces: workspaces.length,
+      targetLineId,
+      selectedLine,
+      defaultLineId,
+      secondaryLineId,
+      uniqueLineIds,
+      workspacesByLine: workspaces.reduce((acc, w) => {
+        acc[w.line_id] = (acc[w.line_id] || 0) + 1;
+        return acc;
+      }, {})
+    });
+    console.log("[VideoGridView] Sample workspaces with line_id:", workspaces.slice(0, 5).map((w) => ({
+      workspace_name: w.workspace_name,
+      line_id: w.line_id,
+      workspace_uuid: w.workspace_uuid
+    })));
+    if (targetLineId) {
+      const filtered = workspaces.filter((w) => w.line_id === targetLineId);
+      console.log(`[VideoGridView] Filtered by targetLineId (${targetLineId}):`, filtered.length, "workspaces");
+      return filtered;
+    }
+    if (selectedLine === 1 && defaultLineId) {
+      const filtered = workspaces.filter((w) => w.line_id === defaultLineId);
+      console.log(`[VideoGridView] Filtered by selectedLine=1 (${defaultLineId}):`, filtered.length, "workspaces");
+      return filtered;
+    }
+    if (selectedLine === 2 && secondaryLineId) {
+      const filtered = workspaces.filter((w) => w.line_id === secondaryLineId);
+      console.log(`[VideoGridView] Filtered by selectedLine=2 (${secondaryLineId}):`, filtered.length, "workspaces");
+      return filtered;
+    }
+    if (selectedLine === 1) {
+      const filtered = workspaces.filter((w) => {
+        if (w.workspace_name === "WS5-5") return true;
+        if (w.workspace_name === "WS32-5") return false;
+        try {
+          const wsNumber = parseInt(w.workspace_name.replace("WS", ""));
+          return wsNumber >= 1 && wsNumber <= 22;
+        } catch {
+          return true;
+        }
+      });
+      console.log(`[VideoGridView] Legacy filtered by selectedLine=1 (WS1-WS22):`, filtered.length, "workspaces");
+      return filtered;
+    }
+    if (selectedLine === 2) {
+      const filtered = workspaces.filter((w) => {
+        if (w.workspace_name === "WS5-5") return false;
+        if (w.workspace_name === "WS32-5") return true;
+        try {
+          const wsNumber = parseInt(w.workspace_name.replace("WS", ""));
+          return wsNumber >= 23 && wsNumber <= 44;
+        } catch {
+          return false;
+        }
+      });
+      console.log(`[VideoGridView] Legacy filtered by selectedLine=2 (WS23-WS44):`, filtered.length, "workspaces");
+      return filtered;
+    }
+    console.log(`[VideoGridView] No filtering applied, returning all workspaces:`, workspaces.length);
+    return workspaces;
+  }, [workspaces, selectedLine, targetLineId, defaultLineId, secondaryLineId]);
   const calculateOptimalGrid = React14.useCallback(() => {
     if (!containerRef.current) return;
     const containerPadding = 16;
@@ -17640,6 +17864,12 @@ var VideoGridView = React14__namespace.default.memo(({
   }, [filteredWorkspaces]);
   const handleWorkspaceClick = React14.useCallback((workspace) => {
     const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
+    console.log("[VideoGridView] Workspace clicked:", {
+      workspace_name: workspace.workspace_name,
+      workspace_id: workspaceId,
+      line_id: workspace.line_id,
+      efficiency: workspace.efficiency
+    });
     trackCoreEvent("Workspace Detail Clicked", {
       workspace_name: workspace.workspace_name,
       workspace_id: workspaceId,
@@ -17648,8 +17878,15 @@ var VideoGridView = React14__namespace.default.memo(({
       efficiency: workspace.efficiency,
       action_count: workspace.action_count
     });
-    const displayName = getWorkspaceDisplayName(workspace.workspace_name);
+    const displayName = getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
     const navParams = getWorkspaceNavigationParams(workspaceId, displayName);
+    console.log("[VideoGridView] Navigation params:", {
+      workspaceId,
+      displayName,
+      line_id: workspace.line_id,
+      navParams,
+      finalUrl: `/workspace/${workspaceId}${navParams}`
+    });
     router$1.push(`/workspace/${workspaceId}${navParams}`);
   }, [router$1]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "h-full w-full p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -17662,15 +17899,22 @@ var VideoGridView = React14__namespace.default.memo(({
         minHeight: "100%"
       },
       children: filteredWorkspaces.sort((a, b) => {
-        const aNum = parseInt(a.workspace_name.slice(2));
-        const bNum = parseInt(b.workspace_name.slice(2));
-        if (!selectedLine) {
-          const aIsLine2 = a.line_id === lineIdMapping.line2;
-          const bIsLine2 = b.line_id === lineIdMapping.line2;
-          if (aIsLine2 !== bIsLine2) {
-            return aIsLine2 ? 1 : -1;
+        if (!targetLineId && !selectedLine) {
+          const aIsSecondaryLine = secondaryLineId && a.line_id === secondaryLineId;
+          const bIsSecondaryLine = secondaryLineId && b.line_id === secondaryLineId;
+          if (aIsSecondaryLine !== bIsSecondaryLine) {
+            return aIsSecondaryLine ? 1 : -1;
+          }
+          if (!secondaryLineId && lineIdMapping.line2) {
+            const aIsLine2 = a.line_id === lineIdMapping.line2;
+            const bIsLine2 = b.line_id === lineIdMapping.line2;
+            if (aIsLine2 !== bIsLine2) {
+              return aIsLine2 ? 1 : -1;
+            }
           }
         }
+        const aNum = parseInt(a.workspace_name.slice(2));
+        const bNum = parseInt(b.workspace_name.slice(2));
         return aNum - bNum;
       }).map((workspace) => {
         const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
@@ -17687,7 +17931,7 @@ var VideoGridView = React14__namespace.default.memo(({
               VideoCard,
               {
                 workspace,
-                hlsUrl: getWorkspaceHlsUrl(workspace.workspace_name),
+                hlsUrl: getWorkspaceHlsUrl(workspace.workspace_name, workspace.line_id),
                 shouldPlay: isVisible,
                 onClick: () => handleWorkspaceClick(workspace),
                 onFatalError: throttledReloadDashboard,
@@ -21331,6 +21575,14 @@ function parseS3Uri(s3Uri) {
         severity = "high";
         description = "Worst Cycle Time Performance";
         break;
+      case "cycle_completions":
+      case "cycle_completion":
+      case "completed_cycles":
+      case "completed_cycle":
+        type = "cycle_completions";
+        severity = "low";
+        description = "Cycle Completion";
+        break;
       case "medium_bottleneck":
         severity = "medium";
         description = "Medium Bottleneck Identified";
@@ -21357,6 +21609,10 @@ function parseS3Uri(s3Uri) {
           type = "bottleneck";
           severity = "high";
           description = "Long Cycle Time Detected";
+        } else if (normalizedViolationType.includes("cycle") && (normalizedViolationType.includes("completion") || normalizedViolationType.includes("complete"))) {
+          type = "cycle_completions";
+          severity = "low";
+          description = "Cycle Completion";
         } else {
           description = `Clip type: ${violationType.replace(/_/g, " ")}`;
           console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
@@ -21536,7 +21792,7 @@ var S3ClipsService = class {
     }
     let cycleTimeSeconds = null;
     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")) {
+    if (includeMetadata || includeCycleTime && (parsedInfo.type === "bottleneck" && parsedInfo.description.toLowerCase().includes("cycle time") || parsedInfo.type === "best_cycle_time" || parsedInfo.type === "worst_cycle_time" || parsedInfo.type === "cycle_completions")) {
       const metadata = await this.getFullMetadata(uri);
       if (metadata) {
         if (metadata.original_task_metadata?.cycle_time) {
@@ -21569,6 +21825,7 @@ var S3ClipsService = class {
       low_value: 0,
       long_cycle_time: 0,
       missing_quality_check: 0,
+      cycle_completions: 0,
       total: 0
     };
     const samples = {
@@ -21577,7 +21834,8 @@ var S3ClipsService = class {
       bottleneck: null,
       low_value: null,
       long_cycle_time: null,
-      missing_quality_check: null
+      missing_quality_check: null,
+      cycle_completions: null
     };
     for (const uri of s3Uris) {
       const parsedInfo = parseS3Uri(uri);
@@ -21865,6 +22123,7 @@ var BottlenecksContent = ({
         const firstBestCycle = videos.find((v) => v.type === "best_cycle_time");
         const firstWorstCycle = videos.find((v) => v.type === "worst_cycle_time");
         const firstSOPDeviation = videos.find((v) => v.type === "missing_quality_check");
+        const firstCycleCompletion = videos.find((v) => v.type === "cycle_completions");
         preloadVideosUrl2([
           firstHigh?.src,
           firstMed?.src,
@@ -21872,7 +22131,8 @@ var BottlenecksContent = ({
           firstLowValue?.src,
           firstBestCycle?.src,
           firstWorstCycle?.src,
-          firstSOPDeviation?.src
+          firstSOPDeviation?.src,
+          firstCycleCompletion?.src
         ].filter(Boolean));
       }
       setAllVideos(videos);
@@ -21896,6 +22156,7 @@ var BottlenecksContent = ({
       if (activeFilter === "sop_deviations") return video.type === "missing_quality_check";
       if (activeFilter === "best_cycle_time") return video.type === "best_cycle_time";
       if (activeFilter === "worst_cycle_time") return video.type === "worst_cycle_time";
+      if (activeFilter === "cycle_completions") return video.type === "cycle_completions";
       if (activeFilter === "long_cycle_time") {
         return video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time");
       }
@@ -21918,6 +22179,8 @@ var BottlenecksContent = ({
       filtered = allVideos.filter((video) => video.type === "best_cycle_time");
     } else if (activeFilter === "worst_cycle_time") {
       filtered = allVideos.filter((video) => video.type === "worst_cycle_time");
+    } else if (activeFilter === "cycle_completions") {
+      filtered = allVideos.filter((video) => video.type === "cycle_completions");
     } else if (activeFilter === "long_cycle_time") {
       filtered = allVideos.filter(
         (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
@@ -22212,6 +22475,7 @@ var BottlenecksContent = ({
       bestCycleTimes: 0,
       worstCycleTimes: 0,
       longCycleTimes: 0,
+      cycleCompletions: 0,
       total: 0
     };
     return {
@@ -22226,6 +22490,7 @@ var BottlenecksContent = ({
       longCycleTimes: allVideos.filter(
         (video) => video.type === "bottleneck" && video.description.toLowerCase().includes("cycle time")
       ).length,
+      cycleCompletions: allVideos.filter((video) => video.type === "cycle_completions").length,
       total: allVideos.length
     };
   }, [allVideos]);
@@ -22246,6 +22511,8 @@ var BottlenecksContent = ({
         return "Best Cycle Time";
       case "worst_cycle_time":
         return "Worst Cycle Time";
+      case "cycle_completions":
+        return "Cycle Completion";
       case "bottleneck":
       default:
         return "Bottleneck";
@@ -22281,7 +22548,7 @@ var BottlenecksContent = ({
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 h-[calc(100vh-12rem)]", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3 mb-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         Card2,
         {
@@ -22401,11 +22668,41 @@ var BottlenecksContent = ({
             ] }) })
           ]
         }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Card2,
+        {
+          onClick: () => {
+            setActiveFilter("cycle_completions");
+            trackCoreEvent("Cycle Completions Filter Clicked", {
+              workspaceId,
+              workspaceName,
+              date,
+              filterType: "cycle_completions",
+              clipCount: clipCounts.cycleCompletions
+            });
+          },
+          className: `bg-white shadow-sm cursor-pointer transition-all duration-200 hover:bg-gray-50 ${activeFilter === "cycle_completions" ? "bg-blue-50 shadow-md ring-1 ring-blue-200" : ""}`,
+          "aria-label": `Filter by Cycle Completions (${clipCounts.cycleCompletions} clips)`,
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => e.key === "Enter" && setActiveFilter("cycle_completions"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: `text-lg ${activeFilter === "cycle_completions" ? "text-blue-600" : ""}`, children: "Cycle Completions" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-bold text-blue-600", children: clipCounts.cycleCompletions }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 mt-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-blue-600 mr-1.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Completed production cycles" })
+              ] })
+            ] }) })
+          ]
+        }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden", style: { height: "calc(100% - 8.5rem)" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-800", children: activeFilter === "low_value" ? `Idle Moments (${clipCounts.lowValue})` : activeFilter === "best_cycle_time" ? `Best Cycle Time (${clipCounts.bestCycleTimes})` : activeFilter === "worst_cycle_time" ? `Worst Cycle Time (${clipCounts.worstCycleTimes})` : activeFilter === "long_cycle_time" ? `Long Cycle Time (${clipCounts.longCycleTimes})` : `All Clips (${clipCounts.total})` }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-800", children: activeFilter === "low_value" ? `Idle Moments (${clipCounts.lowValue})` : activeFilter === "best_cycle_time" ? `Best Cycle Time (${clipCounts.bestCycleTimes})` : activeFilter === "worst_cycle_time" ? `Worst Cycle Time (${clipCounts.worstCycleTimes})` : activeFilter === "long_cycle_time" ? `Long Cycle Time (${clipCounts.longCycleTimes})` : activeFilter === "cycle_completions" ? `Cycle Completions (${clipCounts.cycleCompletions})` : `All Clips (${clipCounts.total})` }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: timestampFilterRef, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -22560,9 +22857,9 @@ var BottlenecksContent = ({
             }
           )
         ] }) }),
-        (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "low_value" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" ? "bg-purple-400" : currentVideo.type === "best_cycle_time" ? "bg-green-600" : currentVideo.type === "worst_cycle_time" ? "bg-red-700" : "bg-red-500"} mr-2 animate-pulse` }),
-          (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-0.5 rounded", children: [
+        (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "cycle_completions" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "low_value" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 z-10 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white shadow-lg text-xs", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" ? "bg-purple-400" : currentVideo.type === "best_cycle_time" ? "bg-green-600" : currentVideo.type === "worst_cycle_time" ? "bg-red-700" : currentVideo.type === "cycle_completions" ? "bg-blue-600" : "bg-red-500"} mr-2 animate-pulse` }),
+          (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "cycle_completions" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-0.5 rounded", children: [
             "Cycle time: ",
             (currentVideo.cycle_time_seconds / 20).toFixed(1),
             "s"
@@ -22644,9 +22941,9 @@ var BottlenecksContent = ({
               children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
             }
           ),
-          (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "low_value" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4 z-[101] bg-black/60 backdrop-blur-sm px-4 py-2 rounded-lg text-white shadow-lg text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" ? "bg-purple-400" : currentVideo.type === "best_cycle_time" ? "bg-green-600" : currentVideo.type === "worst_cycle_time" ? "bg-red-700" : "bg-red-500"} mr-2` }),
-            (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-1 rounded", children: [
+          (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "cycle_completions" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds || currentVideo.type === "low_value" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4 z-[101] bg-black/60 backdrop-blur-sm px-4 py-2 rounded-lg text-white shadow-lg text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 h-2.5 w-2.5 rounded-full ${currentVideo.type === "low_value" ? "bg-purple-400" : currentVideo.type === "best_cycle_time" ? "bg-green-600" : currentVideo.type === "worst_cycle_time" ? "bg-red-700" : currentVideo.type === "cycle_completions" ? "bg-blue-600" : "bg-red-500"} mr-2` }),
+            (currentVideo.type === "best_cycle_time" || currentVideo.type === "worst_cycle_time" || currentVideo.type === "cycle_completions" || currentVideo.type === "bottleneck" && currentVideo.description.toLowerCase().includes("cycle time")) && currentVideo.cycle_time_seconds ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "opacity-90 font-mono bg-black/30 px-2 py-1 rounded", children: [
               "Cycle time: ",
               (currentVideo.cycle_time_seconds / 20).toFixed(1),
               "s"
@@ -24456,6 +24753,7 @@ var AIAgentView = () => {
   const entityConfig = useEntityConfig();
   const dateTimeConfig = useDateTimeConfig();
   const shiftConfig = useShiftConfig();
+  const { formatNumber } = useFormatNumber();
   const [inputValue, setInputValue] = React14.useState("");
   const [loadingThreads, setLoadingThreads] = React14.useState(/* @__PURE__ */ new Set());
   const [lastError, setLastError] = React14.useState(null);
@@ -25282,71 +25580,184 @@ var AIAgentView = () => {
     };
     const renderChart = (chartType, args, key) => {
       console.log(`[DEBUG] Attempting to render chart type: ${chartType}`, args);
+      const CHART_COLORS = {
+        primary: "#3b82f6",
+        // blue-500
+        secondary: "#10b981",
+        // green-500
+        accent: "#f59e0b",
+        // amber-500
+        danger: "#ef4444",
+        // red-500
+        violet: "#8b5cf6",
+        // violet-500
+        cyan: "#06b6d4",
+        // cyan-500
+        orange: "#f97316",
+        // orange-500
+        indigo: "#6366f1"
+        // indigo-500
+      };
+      const CHART_COLOR_PALETTE = Object.values(CHART_COLORS);
+      const CHART_STYLES = {
+        grid: {
+          strokeDasharray: "3 3",
+          stroke: "#e5e7eb"
+          // gray-300
+        },
+        axis: {
+          tick: { fontSize: 12, fill: "#4b5563" },
+          // gray-600
+          stroke: "#9ca3af"
+          // gray-400
+        },
+        margin: { top: 10, right: 30, left: 20, bottom: 40 },
+        barRadius: [4, 4, 0, 0]
+        // Top corners rounded
+      };
+      const CustomTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 mb-1", children: label }),
+            payload.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600", style: { color: entry.color }, children: [
+              entry.name,
+              ": ",
+              typeof entry.value === "number" ? formatNumber(entry.value) : entry.value,
+              args.unit || ""
+            ] }, index))
+          ] });
+        }
+        return null;
+      };
+      const DualAxisTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white px-4 py-3 shadow-lg rounded-lg border border-gray-200", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 mb-2", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: payload.map((entry, index) => {
+              const value = typeof entry.value === "number" ? formatNumber(entry.value) : entry.value;
+              const unit = entry.dataKey === args.left_y_field ? args.left_unit || "" : entry.dataKey === args.right_y_field ? args.right_unit || "" : "";
+              return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", style: { color: entry.color }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+                  entry.name,
+                  ":"
+                ] }),
+                " ",
+                value,
+                unit
+              ] }, index);
+            }) })
+          ] });
+        }
+        return null;
+      };
+      const formatXAxisTick = (value) => {
+        if (typeof value === "string") {
+          if (value.match(/^\d{2}\/\d{2}\s/)) {
+            return value;
+          }
+          if (value.length > 15) {
+            return value.substring(0, 12) + "...";
+          }
+        }
+        return value;
+      };
+      const ChartWrapper = ({ children, title }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 bg-white rounded-xl shadow-sm border border-gray-200 p-6", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-gray-900 mb-4", children: title }),
+        children
+      ] });
       switch (chartType) {
         case "create_gauge_chart":
           console.log("[DEBUG] Rendering gauge chart");
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-6 h-64 w-full flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
             GaugeChart,
             {
               value: args.value || 0,
               min: args.min_value || 0,
               max: args.max_value || 100,
               target: args.target,
-              label: args.title || "",
+              label: args.label || "",
               unit: args.unit || "",
               thresholds: args.thresholds,
               className: "w-full max-w-sm"
             }
-          ) }, `gauge-${key}`);
+          ) }) }, `gauge-${key}`);
         case "create_bar_chart":
           console.log("[DEBUG] Rendering bar chart");
           if (!args.data || !args.x_field || !args.y_field) {
             console.error("Bar chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", style: { maxWidth: args.max_width || "100%" }, children: [
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-64", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              BarChart,
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 60,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
               {
-                data: args.data,
-                bars: [{
-                  dataKey: args.y_field,
-                  fill: args.color || "#3b82f6",
-                  labelList: args.show_values
-                }],
-                xAxisDataKey: args.x_field,
-                className: "h-64",
-                showLegend: false
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
               }
             ),
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `bar-${key}`);
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                dataKey: args.y_field,
+                fill: args.color || CHART_COLORS.primary,
+                radius: CHART_STYLES.barRadius
+              }
+            )
+          ] }) }) }) }, `bar-${key}`);
         case "create_line_chart":
           console.log("[DEBUG] Rendering line chart");
           if (!args.data || !args.x_field || !args.y_field) {
             console.error("Line chart missing required parameters:", { data: !!args.data, x_field: !!args.x_field, y_field: !!args.y_field });
             return null;
           }
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", style: {
-            height: args.height || 256,
-            width: args.width || "100%"
-          }, children: [
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-64", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              LineChart,
+              recharts.XAxis,
               {
-                data: args.data,
-                lines: [{
-                  dataKey: args.y_field,
-                  stroke: "#3b82f6",
-                  strokeWidth: 2
-                }],
-                xAxisDataKey: args.x_field,
-                className: "h-full",
-                showLegend: false
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 60,
+                interval: 0,
+                tickFormatter: formatXAxisTick
               }
             ),
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `line-${key}`);
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                type: "monotone",
+                dataKey: args.y_field,
+                stroke: CHART_COLORS.primary,
+                strokeWidth: 2,
+                dot: { r: 4, fill: CHART_COLORS.primary },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `line-${key}`);
         case "create_pie_chart":
           console.log("[DEBUG] Rendering pie chart");
           if (!args.data || !args.label_field || !args.value_field) {
@@ -25359,16 +25770,14 @@ var AIAgentView = () => {
             value: item[args.value_field]
           }));
           console.log("[DEBUG] Pie chart data transformed:", pieData);
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full flex flex-col items-center", children: [
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
-              PieChart4,
-              {
-                data: pieData,
-                showPercentages: args.show_percentages || false
-              }
-            ) })
-          ] }, `pie-${key}`);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 w-full max-w-md mx-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+            PieChart4,
+            {
+              data: pieData,
+              showPercentages: args.show_percentages || false,
+              colors: CHART_COLOR_PALETTE
+            }
+          ) }) }, `pie-${key}`);
         case "create_comparison_table":
           console.log("[DEBUG] Rendering comparison table");
           if (!args.data) {
@@ -25385,27 +25794,24 @@ var AIAgentView = () => {
               return args.sort_descending === false ? comparison : -comparison;
             });
           }
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full overflow-x-auto", children: [
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-700 mb-2", children: args.title }),
-            /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-                "th",
-                {
-                  className: `px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
-                  children: col
-                },
-                col
-              )) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-                "td",
-                {
-                  className: `px-4 py-2 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
-                  children: row[col]
-                },
-                col
-              )) }, rowIdx)) })
-            ] })
-          ] }, `table-${key}`);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                className: `px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider ${col === args.highlight_column ? "bg-blue-50" : ""}`,
+                children: col
+              },
+              col
+            )) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sortedData.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: rowIdx % 2 === 0 ? "bg-white" : "bg-gray-50", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                className: `px-6 py-4 whitespace-nowrap text-sm ${col === args.highlight_column ? "font-medium text-blue-600 bg-blue-50" : "text-gray-900"}`,
+                children: typeof row[col] === "number" ? formatNumber(row[col]) : row[col]
+              },
+              col
+            )) }, rowIdx)) })
+          ] }) }) }, `table-${key}`);
         case "create_multi_line_chart":
           console.log("[DEBUG] Rendering multi-line chart");
           if (!args.data || !args.x_field || !args.y_fields || !args.legend) {
@@ -25417,30 +25823,49 @@ var AIAgentView = () => {
             });
             return null;
           }
-          const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-              args.y_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Line,
-                {
-                  type: "monotone",
-                  dataKey: field,
-                  stroke: colors[index % colors.length],
-                  strokeWidth: 2,
-                  name: args.legend[index] || field,
-                  dot: { r: 4 },
-                  activeDot: { r: 6 }
-                },
-                field
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `multi-line-${key}`);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 60,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            args.y_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                type: "monotone",
+                dataKey: field,
+                stroke: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
+                strokeWidth: 2,
+                name: args.legend[index] || field,
+                dot: { r: 4 },
+                activeDot: { r: 6 }
+              },
+              field
+            ))
+          ] }) }) }) }, `multi-line-${key}`);
         case "create_stacked_bar_chart":
           console.log("[DEBUG] Rendering stacked bar chart");
           if (!args.data || !args.x_field || !args.stack_fields) {
@@ -25451,27 +25876,47 @@ var AIAgentView = () => {
             });
             return null;
           }
-          const stackColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-              args.stack_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Bar,
-                {
-                  dataKey: field,
-                  stackId: "stack",
-                  fill: stackColors[index % stackColors.length],
-                  name: field
-                },
-                field
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `stacked-bar-${key}`);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: args.data, margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 60,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            args.stack_fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                dataKey: field,
+                stackId: "stack",
+                fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length],
+                name: field,
+                radius: index === args.stack_fields.length - 1 ? CHART_STYLES.barRadius : void 0
+              },
+              field
+            ))
+          ] }) }) }) }, `stacked-bar-${key}`);
         case "create_dual_axis_chart":
           console.log("[DEBUG] Rendering dual-axis chart");
           if (!args.data || !args.x_field || !args.left_y_field || !args.right_y_field) {
@@ -25483,19 +25928,82 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "left", orientation: "left", label: { value: args.left_label || "", angle: -90, position: "insideLeft" } }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "right", orientation: "right", label: { value: args.right_label || "", angle: 90, position: "insideRight" } }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { yAxisId: "left", dataKey: args.left_y_field, fill: "#3b82f6", name: args.left_label || args.left_y_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { yAxisId: "right", type: "monotone", dataKey: args.right_y_field, stroke: "#ef4444", strokeWidth: 2, name: args.right_label || args.right_y_field })
-            ] }) }),
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `dual-axis-${key}`);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: { ...CHART_STYLES.margin, bottom: 80 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 100,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "left",
+                orientation: "left",
+                label: {
+                  value: args.left_label || args.left_y_field,
+                  angle: -90,
+                  position: "insideLeft",
+                  style: { textAnchor: "middle", fill: "#4b5563" }
+                },
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => `${formatNumber(value)}${args.left_unit || ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                label: {
+                  value: args.right_label || args.right_y_field,
+                  angle: 90,
+                  position: "insideRight",
+                  style: { textAnchor: "middle", fill: "#4b5563" }
+                },
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => `${formatNumber(value)}${args.right_unit || ""}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(DualAxisTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                yAxisId: "left",
+                dataKey: args.left_y_field,
+                fill: CHART_COLORS.primary,
+                name: args.left_label || args.left_y_field,
+                radius: CHART_STYLES.barRadius
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                yAxisId: "right",
+                type: "monotone",
+                dataKey: args.right_y_field,
+                stroke: CHART_COLORS.danger,
+                strokeWidth: 3,
+                name: args.right_label || args.right_y_field,
+                dot: { r: 5, fill: CHART_COLORS.danger },
+                activeDot: { r: 7 }
+              }
+            )
+          ] }) }) }) }, `dual-axis-${key}`);
         case "create_scatter_plot":
           console.log("[DEBUG] Rendering scatter plot");
           if (!args.data || !args.x_field || !args.y_field || !args.group_field) {
@@ -25515,26 +26023,50 @@ var AIAgentView = () => {
             acc[group].push(item);
             return acc;
           }, {});
-          const scatterColors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#06b6d4", "#84cc16", "#f97316"];
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field, type: "number", name: args.x_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { dataKey: args.y_field, type: "number", name: args.y_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { cursor: { strokeDasharray: "3 3" } }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-              Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Scatter,
-                {
-                  name: group,
-                  data,
-                  fill: scatterColors[index % scatterColors.length]
-                },
-                group
-              ))
-            ] }) }),
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `scatter-${key}`);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin: CHART_STYLES.margin, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                type: "number",
+                name: args.x_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                dataKey: args.y_field,
+                type: "number",
+                name: args.y_field,
+                ...CHART_STYLES.axis
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Tooltip,
+              {
+                cursor: { strokeDasharray: "3 3" },
+                content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            Object.entries(groupedData).map(([group, data], index) => /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Scatter,
+              {
+                name: group,
+                data,
+                fill: CHART_COLOR_PALETTE[index % CHART_COLOR_PALETTE.length]
+              },
+              group
+            ))
+          ] }) }) }) }, `scatter-${key}`);
         case "create_combo_chart":
           console.log("[DEBUG] Rendering combo chart");
           if (!args.data || !args.x_field || !args.bar_field || !args.line_field) {
@@ -25546,19 +26078,70 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "left", orientation: "left" }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { yAxisId: "right", orientation: "right" }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { yAxisId: "left", dataKey: args.bar_field, fill: "#3b82f6", name: args.bar_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Line, { yAxisId: "right", type: "monotone", dataKey: args.line_field, stroke: "#ef4444", strokeWidth: 2, name: args.line_field })
-            ] }) }),
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `combo-${key}`);
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: { ...CHART_STYLES.margin, bottom: 80 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 100,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "left",
+                orientation: "left",
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { fill: "rgba(0, 0, 0, 0.05)" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Bar,
+              {
+                yAxisId: "left",
+                dataKey: args.bar_field,
+                fill: CHART_COLORS.primary,
+                name: args.bar_field,
+                radius: CHART_STYLES.barRadius
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Line,
+              {
+                yAxisId: "right",
+                type: "monotone",
+                dataKey: args.line_field,
+                stroke: CHART_COLORS.danger,
+                strokeWidth: 3,
+                name: args.line_field,
+                dot: { r: 5 },
+                activeDot: { r: 7 }
+              }
+            )
+          ] }) }) }) }, `combo-${key}`);
         case "create_area_chart":
           console.log("[DEBUG] Rendering area chart");
           if (!args.data || !args.x_field || !args.y_field) {
@@ -25569,27 +26152,53 @@ var AIAgentView = () => {
             });
             return null;
           }
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-6 w-full", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 400, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3" }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: args.x_field }),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Area,
-                {
-                  type: "monotone",
-                  dataKey: args.y_field,
-                  stroke: "#3b82f6",
-                  fill: args.fill ? "#3b82f6" : "none",
-                  fillOpacity: args.fill ? 0.6 : 0,
-                  name: args.y_field
-                }
-              )
+          return /* @__PURE__ */ jsxRuntime.jsx(ChartWrapper, { title: args.title, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-80", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ComposedChart, { data: args.data, margin: { ...CHART_STYLES.margin, bottom: 80 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "colorGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: CHART_COLORS.primary, stopOpacity: 0.8 }),
+              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: CHART_COLORS.primary, stopOpacity: 0.1 })
             ] }) }),
-            args.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-gray-600 mt-2", children: args.title })
-          ] }, `area-${key}`);
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { ...CHART_STYLES.grid }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.XAxis,
+              {
+                dataKey: args.x_field,
+                ...CHART_STYLES.axis,
+                angle: -45,
+                textAnchor: "end",
+                height: 100,
+                interval: 0,
+                tickFormatter: formatXAxisTick
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.YAxis,
+              {
+                ...CHART_STYLES.axis,
+                tickFormatter: (value) => formatNumber(value)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}), cursor: { strokeDasharray: "3 3" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Legend,
+              {
+                wrapperStyle: { paddingTop: "20px" },
+                formatter: (value) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Area,
+              {
+                type: "monotone",
+                dataKey: args.y_field,
+                stroke: CHART_COLORS.primary,
+                strokeWidth: 2,
+                fill: args.fill !== false ? "url(#colorGradient)" : "none",
+                name: args.y_field,
+                dot: { r: 4, fill: CHART_COLORS.primary },
+                activeDot: { r: 6 }
+              }
+            )
+          ] }) }) }) }, `area-${key}`);
         default:
           console.warn(`Unknown chart type: ${chartType}`);
           return null;
@@ -25620,6 +26229,31 @@ var AIAgentView = () => {
               opacity: 1;
             }
           }
+          
+          @keyframes waveLoad {
+            0% {
+              background-position: -200% 0;
+            }
+            100% {
+              background-position: 200% 0;
+            }
+          }
+          
+          .thinking-wave {
+            background: linear-gradient(
+              90deg,
+              #6b7280 0%,
+              #6b7280 40%,
+              #3b82f6 50%,
+              #6b7280 60%,
+              #6b7280 100%
+            );
+            background-size: 200% 100%;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: waveLoad 3s ease-in-out infinite;
+          }
         `
     } }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
@@ -25769,14 +26403,7 @@ var AIAgentView = () => {
               )),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-start", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.1s" } }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.2s" } })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 text-sm", children: "Axel is thinking..." })
-                ] }) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium thinking-wave", children: "Thinking" }) }) })
               ] })
             ] }) })
           ) : (
@@ -25842,14 +26469,7 @@ var AIAgentView = () => {
               ] }),
               isCurrentThreadLoading && !currentStreaming.message && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 justify-start", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex space-x-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.1s" } }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-blue-500 rounded-full animate-bounce", style: { animationDelay: "0.2s" } })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 text-sm", children: "Axel is thinking..." })
-                ] }) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white border border-gray-200/80 px-5 py-4 rounded-2xl shadow-sm max-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium thinking-wave", children: "Thinking" }) }) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
             ] }) })
@@ -26851,14 +27471,30 @@ function HomeView({
   factoryName = "Simba Beer - Line 1"
 }) {
   const [isHydrated, setIsHydrated] = React14.useState(false);
-  const [selectedLineId, setSelectedLineId] = React14.useState(defaultLineId);
+  const [selectedLineId, setSelectedLineId] = React14.useState(factoryViewId);
+  console.log("[HomeView] Component initialized with:", {
+    defaultLineId,
+    factoryViewId,
+    line1Uuid,
+    line2Uuid,
+    selectedLineId: factoryViewId
+  });
   const [isChangingFilter, setIsChangingFilter] = React14.useState(false);
   const [errorMessage, setErrorMessage] = React14.useState(null);
   const [displayNamesInitialized, setDisplayNamesInitialized] = React14.useState(false);
+  const metricsLineId = selectedLineId;
+  console.log("[HomeView] Using metrics line ID:", metricsLineId, "for selectedLineId:", selectedLineId);
   React14.useEffect(() => {
     const initDisplayNames = async () => {
       try {
-        await preInitializeWorkspaceDisplayNames(selectedLineId);
+        if (metricsLineId === factoryViewId) {
+          console.log("[HomeView] Initializing display names for factory view (both lines)");
+          await preInitializeWorkspaceDisplayNames(line1Uuid);
+          await preInitializeWorkspaceDisplayNames(line2Uuid);
+        } else {
+          console.log("[HomeView] Initializing display names for single line:", selectedLineId);
+          await preInitializeWorkspaceDisplayNames(selectedLineId);
+        }
         setDisplayNamesInitialized(true);
       } catch (error) {
         console.error("Failed to pre-initialize workspace display names:", error);
@@ -26866,12 +27502,13 @@ function HomeView({
       }
     };
     initDisplayNames();
-  }, [selectedLineId]);
+  }, [selectedLineId, metricsLineId, factoryViewId, line1Uuid, line2Uuid]);
+  const displayNamesLineId = metricsLineId === factoryViewId ? void 0 : selectedLineId;
   const {
     displayNames: workspaceDisplayNames,
     loading: displayNamesLoading,
     error: displayNamesError
-  } = useWorkspaceDisplayNames(void 0, selectedLineId);
+  } = useWorkspaceDisplayNames(void 0, displayNamesLineId);
   React14.useCallback(() => {
     console.log("Refetching KPIs after line metrics update");
   }, []);
@@ -26896,14 +27533,16 @@ function HomeView({
     error: metricsError,
     refetch: refetchMetrics
   } = useDashboardMetrics({
-    lineId: selectedLineId,
+    lineId: metricsLineId,
     onLineMetricsUpdate
   });
+  const breaksLineIds = metricsLineId === factoryViewId ? [line1Uuid, line2Uuid] : [selectedLineId];
+  console.log("[HomeView] Using breaks line IDs:", breaksLineIds);
   const {
     activeBreaks,
     isLoading: breaksLoading,
     error: breaksError
-  } = useActiveBreaks([selectedLineId]);
+  } = useActiveBreaks(breaksLineIds);
   const memoizedWorkspaceMetrics = React14.useMemo(() => workspaceMetrics, [
     // Only update reference if meaningful properties change
     workspaceMetrics.length,
@@ -27058,8 +27697,12 @@ var itemVariants = {
 };
 
 // src/lib/utils/navigation.ts
-function getWorkspaceNavigationParams2(workspaceUuid, displayName) {
-  return `?name=${encodeURIComponent(displayName || "")}`;
+function getWorkspaceNavigationParams2(workspaceUuid, displayName, lineId) {
+  const params = new URLSearchParams();
+  if (displayName) {
+    params.set("name", displayName);
+  }
+  return params.toString() ? `?${params.toString()}` : "";
 }
 var formatLocalDate = (date) => {
   const options = {
@@ -28251,6 +28894,13 @@ var LeaderboardDetailView = React14.memo(({
   line2Id = "",
   className = ""
 }) => {
+  console.log("[LeaderboardDetailView] Component initialized with:", {
+    lineId,
+    line1Id,
+    line2Id,
+    date,
+    shift
+  });
   const navigation = useNavigation();
   const [sortAscending, setSortAscending] = React14.useState(true);
   const handleSortToggle = React14.useCallback(() => {
@@ -28268,13 +28918,39 @@ var LeaderboardDetailView = React14.memo(({
     error: metricsError,
     refreshMetrics
   } = useRealtimeLineMetrics(realtimeMetricsParams);
+  const isFactoryView = React14.useMemo(() => {
+    const hasEssentialLineIds = Boolean(line1Id && line2Id);
+    const isFactoryLineId = lineId === "factory" || !lineId;
+    return hasEssentialLineIds && isFactoryLineId;
+  }, [lineId, line1Id, line2Id]);
   const memoizedLineId = React14.useMemo(() => lineId || "", [lineId]);
+  console.log("[LeaderboardDetailView] Factory view check:", {
+    isFactoryView,
+    lineId,
+    line1Id,
+    line2Id
+  });
+  const singleLineResult = useLineWorkspaceMetrics(isFactoryView ? "" : memoizedLineId);
+  const factoryResult = useDashboardMetrics({
+    lineId: isFactoryView ? "factory" : "",
+    onLineMetricsUpdate: void 0
+  });
   const {
     workspaces,
     loading: workspacesLoading,
     error: workspacesError,
     refreshWorkspaces
-  } = useLineWorkspaceMetrics(memoizedLineId);
+  } = isFactoryView ? {
+    workspaces: factoryResult.workspaceMetrics,
+    loading: factoryResult.isLoading,
+    error: factoryResult.error,
+    refreshWorkspaces: factoryResult.refetch
+  } : singleLineResult;
+  console.log("[LeaderboardDetailView] Workspace data:", {
+    workspaces: workspaces?.length || 0,
+    loading: workspacesLoading,
+    error: workspacesError
+  });
   const getShiftName = React14.useCallback((shiftId) => {
     if (shiftId === void 0) return "Day";
     return shiftId === 0 ? "Day" : "Night";
@@ -30205,6 +30881,12 @@ var TargetsView = ({
   userId,
   onSaveChanges
 }) => {
+  console.log("[TargetsView] Component initialized with:", {
+    lineIds,
+    lineNames,
+    companyId,
+    totalLines: lineIds.length
+  });
   const initialLineWorkspaces = React14.useMemo(() => {
     return lineIds.reduce((acc, lineId) => ({
       ...acc,
@@ -30516,7 +31198,9 @@ var TargetsView = ({
             continue;
           }
           try {
+            console.log(`[TargetsView] Fetching workspaces for line: ${lineId}`);
             const fetchedLineWorkspacesData = await workspaceService.getWorkspaces(lineId);
+            console.log(`[TargetsView] Retrieved ${fetchedLineWorkspacesData.length} workspaces for line ${lineId}`);
             const mappedWorkspaces = fetchedLineWorkspacesData.map((ws) => ({
               id: ws.id,
               name: ws.workspace_id,
@@ -31946,6 +32630,7 @@ exports.clearRateLimit = clearRateLimit2;
 exports.clearS3VideoCache = clearS3VideoCache;
 exports.clearS3VideoFromCache = clearS3VideoFromCache;
 exports.clearWorkspaceDisplayNamesCache = clearWorkspaceDisplayNamesCache;
+exports.clearWorkspaceMappingsForLine = clearWorkspaceMappingsForLine;
 exports.cn = cn;
 exports.createStreamProxyHandler = createStreamProxyHandler;
 exports.createSupabaseClient = createSupabaseClient;
@@ -31987,6 +32672,7 @@ exports.getWorkspaceDisplayName = getWorkspaceDisplayName;
 exports.getWorkspaceDisplayNameAsync = getWorkspaceDisplayNameAsync;
 exports.getWorkspaceDisplayNamesMap = getWorkspaceDisplayNamesMap;
 exports.getWorkspaceFromUrl = getWorkspaceFromUrl;
+exports.getWorkspaceMappingsForLine = getWorkspaceMappingsForLine;
 exports.getWorkspaceNavigationParams = getWorkspaceNavigationParams;
 exports.identifyCoreUser = identifyCoreUser;
 exports.initializeCoreMixpanel = initializeCoreMixpanel;