feat: Introducing Tabs! fix: resolve multiple UI/UX issues in panel editor and dashboard management

  - Fix infinite re-render loop in panel configuration (#21)
    - Fixed DebouncedInput component circular dependency causing infinite updates
    - Removed unnecessary refreshTrigger from config changes
    - Fixed ECharts disposal issues by separating initialization from updates
    - Added proper memoization to prevent unnecessary re-renders

  - Implement live preview updates in panel editor (#21)
    - Panel preview now updates instantly when changing configuration
    - Unit, decimals, and other settings update without re-running queries
    - Smooth real-time feedback for better user experience

  - Fix chart spacing and formatting issues (#21)
    - Added proper spacing between Y-axis values and units (e.g., '100.0 temperature' instead of '100.0temperature')
    - Fixed chart margins with consistent padding
    - Improved overall chart layout and readability

  - Preserve panel dimensions when duplicating (#23)
    - Duplicated panels now maintain original width and height settings
    - Enhanced duplicatePanel function to copy layout information
    - Updated addPanelAtom to accept custom dimensions

  - Enhance tab management (#11)
    - Fixed tab isolation issues
    - Improved dynamic schema fetching
    - Better error handling for tab operations

  Fixes #11, #21, #23

Author: caioricciuti

bun.lock

@@ -1,6 +1,6 @@
 {
   "name": "gigapi-ui",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "type": "module",
   "description": "UI interface for GigAPI: The Infinite Timeseries Lakehouse. GigAPI UI provides a slick web interface to query time-series using GigAPI Catalog Metadata + DuckDB",
   "scripts": {
@@ -16,7 +16,7 @@
   "author": "",
   "license": "AGPL-3.0",
   "dependencies": {
-    "@hookform/resolvers": "^5.1.1",
+    "@hookform/resolvers": "^5.2.0",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-dialog": "^1.1.14",
@@ -33,44 +33,44 @@
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
     "@types/react-grid-layout": "^1.3.5",
-    "axios": "^1.10.0",
+    "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "^5.6.0",
     "jotai": "^2.12.5",
-    "lucide-react": "^0.525.0",
+    "lucide-react": "^0.533.0",
     "pako": "^2.1.0",
-    "react": "^19.1.0",
-    "react-day-picker": "^9.8.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-day-picker": "^9.8.1",
+    "react-dom": "^19.1.1",
     "react-grid-layout": "^1.5.2",
-    "react-hook-form": "^7.60.0",
+    "react-hook-form": "^7.61.1",
     "react-markdown": "^10.1.0",
     "react-resizable": "^3.0.5",
     "react-resizable-panels": "^3.0.3",
-    "react-router-dom": "^7.6.3",
+    "react-router-dom": "^7.7.1",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "uuid": "^11.1.0",
-    "vite": "^7.0.4",
-    "zod": "^4.0.5"
+    "vite": "^7.0.6",
+    "zod": "^4.0.11"
   },
   "devDependencies": {
-    "@types/node": "^24.0.13",
+    "@types/node": "^24.1.0",
     "@types/pako": "^2.0.3",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/recharts": "^2.0.1",
-    "@vitejs/plugin-react": "^4.6.0",
-    "knip": "^5.61.3",
+    "@vitejs/plugin-react": "^4.7.0",
+    "knip": "^5.62.0",
     "tailwindcss": "^4.1.11",
-    "tw-animate-css": "^1.3.5"
+    "tw-animate-css": "^1.3.6"
   }
 }

package.json

@@ -14,6 +14,8 @@ import { SchemaContextBuilder } from "@/lib/schema-context-builder";
 import { ConversationAnalyzer } from "@/lib/conversation-analyzer";
 import { StorageUtils } from "@/lib/storage-utils";
 import { schemaCacheAtom, loadAndCacheTableSchemaAtom } from "./database-atoms";
+import { apiUrlAtom } from "./connection-atoms";
+import { getCurrentTabData } from "./tab-atoms";
 import type {
   ChatSession,
   AIConnection,
@@ -511,10 +513,11 @@ export const sendMessageAtom = atom(
         console.warn("⚠️ No schema cache found");
       }
 
-      // Get time context from query interface
-      const timeRange = localStorage.getItem("gigapi_time_range");
-      const selectedDb = localStorage.getItem("gigapi_selected_db");
-      const selectedTable = localStorage.getItem("gigapi_selected_table");
+      // Get time context from current tab
+      const currentTab = getCurrentTabData();
+      const timeRange = currentTab?.timeRange ? JSON.stringify(currentTab.timeRange) : null;
+      const selectedDb = currentTab?.database || "";
+      const selectedTable = currentTab?.table || "";
 
       // Build query context for artifact intelligence
       // Convert schema cache to proper format
@@ -906,10 +909,11 @@ export const regenerateFromMessageAtom = atom(
       const globalInstructions = get(globalInstructionsAtom);
       let schemaCache = get(schemaCacheAtom);
 
-      // Get time context from query interface
-      const timeRange = localStorage.getItem("gigapi_time_range");
-      const selectedDb = localStorage.getItem("gigapi_selected_db");
-      const selectedTable = localStorage.getItem("gigapi_selected_table");
+      // Get time context from current tab
+      const currentTab = getCurrentTabData();
+      const timeRange = currentTab?.timeRange ? JSON.stringify(currentTab.timeRange) : null;
+      const selectedDb = currentTab?.database || "";
+      const selectedTable = currentTab?.table || "";
 
       // Build query context for artifact intelligence
       const schemaContext = convertSchemaCacheToContext(schemaCache);
@@ -1313,7 +1317,7 @@ Example: When user asks "show me sales by month", respond with:
     const conversationContext =
       ConversationAnalyzer.analyzeConversation(messages);
 
-    const schemaContextString = SchemaContextBuilder.getSchemaContext(
+    const schemaContextString = await SchemaContextBuilder.getSchemaContext(
       messages,
       schemaContext,
       {
@@ -1322,6 +1326,10 @@ Example: When user asks "show me sales by month", respond with:
         summaryOnly: false,
         includeRecentContext: true, // Always include recent context for better continuity
         isAgentic, // Pass agentic mode flag
+        // Enhanced with sample data
+        includeSampleData: true,
+        sampleDataLimit: 5,
+        apiUrl: queryContext.apiUrl || "http://localhost:7971/query",
       }
     );
 

src/atoms/chat-atoms.ts

@@ -322,17 +322,25 @@ export const addPanelAtom = atom(
 
       // Calculate position for new panel in grid
       const existingPanels = dashboard.layout?.panels || [];
+      
+      // Use provided layout dimensions or defaults
+      const layoutFromPanelData = (panelData as any).layout;
+      const width = layoutFromPanelData?.w || 6; // Half width default
+      const height = layoutFromPanelData?.h || 8; // Default height (8 * 60 = 480px)
+      const minWidth = layoutFromPanelData?.minW || 2;
+      const minHeight = layoutFromPanelData?.minH || 2;
+      
       const newPanelLayout = {
         panelId: panelWithId.id,
         x: 0,
         y:
           existingPanels.length > 0
             ? Math.max(...existingPanels.map((p) => p.y + p.h))
             : 0,
-        w: 6, // Half width
-        h: 8, // Default height (8 * 60 = 480px)
-        minW: 2,
-        minH: 2,
+        w: width,
+        h: height,
+        minW: minWidth,
+        minH: minHeight,
       };
 
       updatedDashboards[dashboardIndex] = {
@@ -615,13 +623,32 @@ export function useDashboard() {
     const panelToDuplicate = panels.find((p) => p.id === panelId);
     if (!panelToDuplicate) return;
 
+    // Find the layout information for the panel being duplicated
+    const originalLayout = currentDashboard.layout?.panels?.find(
+      (layout) => layout.panelId === panelId
+    );
+
+    const newPanelId = uuidv4();
     const newPanel = {
       ...panelToDuplicate,
-      id: uuidv4(),
+      id: newPanelId,
       title: `${panelToDuplicate.title} (Copy)`,
     };
 
-    await addPanel({ panelData: newPanel, dashboardId: currentDashboard.id });
+    // Include layout information if available
+    const panelDataWithLayout = originalLayout
+      ? {
+          ...newPanel,
+          layout: {
+            w: originalLayout.w,
+            h: originalLayout.h,
+            minW: originalLayout.minW,
+            minH: originalLayout.minH,
+          },
+        }
+      : newPanel;
+
+    await addPanel({ panelData: panelDataWithLayout, dashboardId: currentDashboard.id });
   };
 
   const isPanelLoading = (panelId: string) =>