diff --git a/package-lock.json b/package-lock.json
index c07de6c..8f7d671 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,13 @@
         "chart.js": "^4.5.0",
         "chartjs-plugin-zoom": "^2.2.0",
         "lucide-react": "^0.522.0",
+        "lz-string": "^1.5.0",
         "postcss": "^8.5.6",
         "react": "^19.1.0",
         "react-chartjs-2": "^5.3.0",
         "react-dom": "^19.1.0",
-        "tailwindcss": "^3.4.4"
+        "tailwindcss": "^3.4.4",
+        "zustand": "^5.0.7"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
@@ -1839,7 +1841,7 @@
       "version": "19.1.8",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.8.tgz",
       "integrity": "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -2558,7 +2560,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -3988,9 +3990,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
-      "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "lz-string": "bin/bin.js"
       }
@@ -7029,6 +7029,35 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.7.tgz",
+      "integrity": "sha512-Ot6uqHDW/O2VdYsKLLU8GQu8sCOM1LcoE8RwvLv9uuRT9s6SOHCKs0ZEOhxg+I1Ld+A1Q5lwx+UlKXXUoCZITg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index b8b0f28..5134ab7 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,13 @@
     "chart.js": "^4.5.0",
     "chartjs-plugin-zoom": "^2.2.0",
     "lucide-react": "^0.522.0",
+    "lz-string": "^1.5.0",
     "postcss": "^8.5.6",
     "react": "^19.1.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^3.4.4",
+    "zustand": "^5.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
diff --git a/src/App.jsx b/src/App.jsx
index fce2a15..5b6c6da 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,132 +1,52 @@
 import React, { useState, useCallback, useEffect } from 'react';
+import { useStore } from './store';
+import { deserializeStateFromURL } from './utils/sharing';
 import { FileUpload } from './components/FileUpload';
 import { RegexControls } from './components/RegexControls';
 import { FileList } from './components/FileList';
 import ChartContainer from './components/ChartContainer';
 import { ComparisonControls } from './components/ComparisonControls';
-import { Header } from './components/Header';
 import { FileConfigModal } from './components/FileConfigModal';
 import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
-import { mergeFilesWithReplacement } from './utils/mergeFiles.js';
 
 function App() {
-  const [uploadedFiles, setUploadedFiles] = useState([]);
+  const {
+    uploadedFiles,
+    globalParsingConfig,
+    compareMode,
+    relativeBaseline,
+    absoluteBaseline,
+    configModalOpen,
+    configFile,
+    xRange,
+    maxStep,
+    sidebarVisible,
+    handleFilesUploaded,
+    processGlobalFiles,
+    handleFileRemove,
+    handleFileToggle,
+    handleFileConfig,
+    handleConfigSave,
+    handleConfigClose,
+    handleGlobalParsingConfigChange,
+    setCompareMode,
+    setRelativeBaseline,
+    setAbsoluteBaseline,
+    setXRange,
+    setMaxStep,
+    setSidebarVisible,
+  } = useStore();
   
-  // 全局解析配置状态
-  const [globalParsingConfig, setGlobalParsingConfig] = useState({
-    metrics: [
-      {
-        name: 'Loss',
-        mode: 'keyword', // 'keyword' | 'regex'
-        keyword: 'loss:',
-        regex: 'loss:\\s*([\\d.eE+-]+)'
-      },
-      {
-        name: 'Grad Norm',
-        mode: 'keyword',
-        keyword: 'norm:',
-        regex: 'grad[\\s_]norm:\\s*([\\d.eE+-]+)'
-      }
-    ]
-  });
-  
-  const [compareMode, setCompareMode] = useState('normal');
-  const [relativeBaseline, setRelativeBaseline] = useState(0.002);
-  const [absoluteBaseline, setAbsoluteBaseline] = useState(0.005);
-  const [configModalOpen, setConfigModalOpen] = useState(false);
-  const [configFile, setConfigFile] = useState(null);
   const [globalDragOver, setGlobalDragOver] = useState(false);
-  const [, setDragCounter] = useState(0);
-  const [xRange, setXRange] = useState({ min: undefined, max: undefined });
-  const [maxStep, setMaxStep] = useState(0);
-  const [sidebarVisible, setSidebarVisible] = useState(true);
-
-  const handleFilesUploaded = useCallback((files) => {
-    const filesWithDefaults = files.map(file => ({
-      ...file,
-      enabled: true,
-      config: {
-        // 使用全局解析配置作为默认值
-        metrics: globalParsingConfig.metrics.map(m => ({ ...m })),
-        dataRange: {
-          start: 0,        // 默认从第一个数据点开始
-          end: undefined,  // 默认到最后一个数据点
-          useRange: false  // 保留这个字段用于向后兼容，但默认不启用
-        }
-      }
-    }));
-    setUploadedFiles(prev => mergeFilesWithReplacement(prev, filesWithDefaults));
-  }, [globalParsingConfig]);
-
-  // 全局文件处理函数
-  const processGlobalFiles = useCallback((files) => {
-    const fileArray = Array.from(files);
-
-    if (fileArray.length === 0) return;
+  const [dragCounter, setDragCounter] = useState(0);
 
-    const processedFiles = fileArray.map(file => ({
-      file,
-      name: file.name,
-      id: Math.random().toString(36).substr(2, 9),
-      data: null,
-      content: null
-    }));
-
-    // Read file contents
-    Promise.all(
-      processedFiles.map(fileObj => 
-        new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            fileObj.content = e.target.result;
-            resolve(fileObj);
-          };
-          reader.readAsText(fileObj.file);
-        })
-      )
-    ).then(files => {
-      handleFilesUploaded(files);
-    });
-  }, [handleFilesUploaded]);
-
-  const handleFileRemove = useCallback((index) => {
-    setUploadedFiles(prev => prev.filter((_, i) => i !== index));
-  }, []);
-
-  const handleFileToggle = useCallback((index, enabled) => {
-    setUploadedFiles(prev => prev.map((file, i) => 
-      i === index ? { ...file, enabled } : file
-    ));
-  }, []);
-
-  const handleFileConfig = useCallback((file) => {
-    setConfigFile(file);
-    setConfigModalOpen(true);
-  }, []);
-
-  const handleConfigSave = useCallback((fileId, config) => {
-    setUploadedFiles(prev => prev.map(file => 
-      file.id === fileId ? { ...file, config } : file
-    ));
-  }, []);
-
-  const handleConfigClose = useCallback(() => {
-    setConfigModalOpen(false);
-    setConfigFile(null);
-  }, []);
-
-  // 全局解析配置变更处理
-  const handleGlobalParsingConfigChange = useCallback((newConfig) => {
-    setGlobalParsingConfig(newConfig);
-
-    // 同步所有文件的解析配置
-    setUploadedFiles(prev => prev.map(file => ({
-      ...file,
-      config: {
-        ...file.config,
-        metrics: newConfig.metrics.map(m => ({ ...m }))
-      }
-    })));
+  useEffect(() => {
+    const sharedState = deserializeStateFromURL();
+    if (sharedState) {
+      useStore.setState(sharedState);
+      // Clear the hash to avoid re-loading the shared state on every refresh
+      window.location.hash = '';
+    }
   }, []);
 
   // 全局拖拽事件处理
@@ -134,7 +54,6 @@ function App() {
     e.preventDefault();
     setDragCounter(prev => prev + 1);
     
-    // 检查是否包含文件
     if (e.dataTransfer.types.includes('Files')) {
       setGlobalDragOver(true);
     }
@@ -142,7 +61,6 @@ function App() {
 
   const handleGlobalDragOver = useCallback((e) => {
     e.preventDefault();
-    // 设置拖拽效果
     e.dataTransfer.dropEffect = 'copy';
   }, []);
 
diff --git a/src/components/ChartContainer.jsx b/src/components/ChartContainer.jsx
index b10f0f5..4731333 100644
--- a/src/components/ChartContainer.jsx
+++ b/src/components/ChartContainer.jsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import { Line } from 'react-chartjs-2';
 import { ResizablePanel } from './ResizablePanel';
+import { movingAverage } from '../utils/smoothing.js';
 import {
   Chart as ChartJS,
   Chart,
@@ -60,16 +61,20 @@ const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover })
   );
 };
 
-export default function ChartContainer({
-  files,
-  metrics = [],
-  compareMode,
-  relativeBaseline = 0.002,
-  absoluteBaseline = 0.005,
-  xRange = { min: undefined, max: undefined },
-  onXRangeChange,
-  onMaxStepChange
-}) {
+import { useStore } from '../store';
+
+export default function ChartContainer() {
+  const files = useStore(state => state.uploadedFiles);
+  const metrics = useStore(state => state.globalParsingConfig.metrics);
+  const compareMode = useStore(state => state.compareMode);
+  const relativeBaseline = useStore(state => state.relativeBaseline);
+  const absoluteBaseline = useStore(state => state.absoluteBaseline);
+  const xRange = useStore(state => state.xRange);
+  const onXRangeChange = useStore(state => state.setXRange);
+  const onMaxStepChange = useStore(state => state.setMaxStep);
+  const smoothingEnabled = useStore(state => state.smoothingEnabled);
+  const smoothingWindow = useStore(state => state.smoothingWindow);
+
   const chartRefs = useRef(new Map());
   const registerChart = useCallback((id, inst) => {
     chartRefs.current.set(id, inst);
@@ -153,9 +158,16 @@ export default function ChartContainer({
         });
       }
 
+      // Apply smoothing if enabled
+      if (smoothingEnabled && smoothingWindow > 1) {
+        Object.keys(metricsData).forEach(key => {
+          metricsData[key] = movingAverage(metricsData[key], smoothingWindow);
+        });
+      }
+
       return { ...file, metricsData };
     });
-  }, [files, metrics]);
+  }, [files, metrics, smoothingEnabled, smoothingWindow]);
 
   useEffect(() => {
     const maxStep = parsedData.reduce((m, f) => {
@@ -176,10 +188,9 @@ export default function ChartContainer({
     }
   }, [parsedData, onXRangeChange]);
 
-  const colors = ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#f97316'];
   const createChartData = dataArray => ({
     datasets: dataArray.map((item, index) => {
-      const color = colors[index % colors.length];
+      const color = item.color || '#000000'; // Fallback to black
       return {
         label: item.name?.replace(/\.(log|txt)$/i, '') || `File ${index + 1}`,
         data: item.data,
diff --git a/src/components/ComparisonControls.jsx b/src/components/ComparisonControls.jsx
index d844575..86ddb25 100644
--- a/src/components/ComparisonControls.jsx
+++ b/src/components/ComparisonControls.jsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import { BarChart2 } from 'lucide-react';
+import { useStore } from '../store';
+
+export function ComparisonControls() {
+  const {
+    compareMode,
+    onCompareModeChange
+  } = useStore(state => ({
+    compareMode: state.compareMode,
+    onCompareModeChange: state.setCompareMode
+  }));
 
-export function ComparisonControls({ 
-  compareMode, 
-  onCompareModeChange
-}) {
   const modes = [
     { value: 'normal', label: '📊 平均误差 (normal)', description: '未取绝对值的平均误差' },
     { value: 'absolute', label: '📈 平均误差 (absolute)', description: '绝对值差值的平均' },
diff --git a/src/components/FileConfigModal.jsx b/src/components/FileConfigModal.jsx
index 6428b20..ab55031 100644
--- a/src/components/FileConfigModal.jsx
+++ b/src/components/FileConfigModal.jsx
@@ -34,22 +34,37 @@ function getMetricTitle(metric, index) {
   return `Metric ${index + 1}`;
 }
 
-export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingConfig }) {
+import { useStore } from '../store';
+
+export function FileConfigModal() {
+  const {
+    file,
+    isOpen,
+    onClose,
+    onSave,
+    globalParsingConfig
+  } = useStore(state => ({
+    file: state.configFile,
+    isOpen: state.configModalOpen,
+    onClose: state.handleConfigClose,
+    onSave: state.handleConfigSave,
+    globalParsingConfig: state.globalParsingConfig
+  }));
+
   const [config, setConfig] = useState({
     metrics: [],
     dataRange: {
-      start: 0,        // 起始位置，默认为0（第一个数据点）
-      end: undefined,  // 结束位置，默认为undefined（最后一个数据点）
-      useRange: false  // 保留用于向后兼容
+      start: 0,
+      end: undefined,
+      useRange: false
     }
   });
 
   useEffect(() => {
     if (file && isOpen) {
-      // 如果文件有配置，使用文件配置，否则使用全局配置
       const fileConfig = file.config || {};
       setConfig({
-        metrics: fileConfig.metrics || globalParsingConfig.metrics,
+        metrics: fileConfig.metrics || globalParsingConfig.metrics.map(m => ({...m})),
         dataRange: fileConfig.dataRange || {
           start: 0,
           end: undefined,
diff --git a/src/components/FileList.jsx b/src/components/FileList.jsx
index 37fb183..ee460ac 100644
--- a/src/components/FileList.jsx
+++ b/src/components/FileList.jsx
@@ -1,7 +1,14 @@
 import React from 'react';
 import { FileText, X, Settings } from 'lucide-react';
+import { useStore } from '../store';
+
+export function FileList() {
+  const files = useStore(state => state.uploadedFiles);
+  const onFileRemove = useStore(state => state.handleFileRemove);
+  const onFileToggle = useStore(state => state.handleFileToggle);
+  const onFileConfig = useStore(state => state.handleFileConfig);
+  const setFileColor = useStore(state => state.setFileColor);
 
-export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
   if (files.length === 0) {
     return (
       <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="file-list-heading">
@@ -43,10 +50,12 @@ export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
                     className="rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                     aria-describedby={`file-status-${file.id}`}
                   />
-                  <FileText 
-                    size={14} 
-                    className={`${file.enabled !== false ? 'text-blue-600' : 'text-gray-400'}`}
-                    aria-hidden="true"
+                  <input
+                    type="color"
+                    value={file.color || '#000000'}
+                    onChange={(e) => setFileColor(file.id, e.target.value)}
+                    className="w-5 h-5 p-0 border-none rounded cursor-pointer"
+                    title="Change line color"
                   />
                   <span 
                     className={`text-xs font-medium truncate ${
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
index e437d3d..0c452a0 100644
--- a/src/components/FileUpload.jsx
+++ b/src/components/FileUpload.jsx
@@ -1,36 +1,10 @@
 import React, { useCallback, useState } from 'react';
-import { Upload, FileText } from 'lucide-react';
+import { Upload } from 'lucide-react';
+import { useStore } from '../store';
 
-export function FileUpload({ onFilesUploaded }) {
+export function FileUpload() {
   const [isDragOver, setIsDragOver] = useState(false);
-
-  const processFiles = useCallback((files) => {
-    const fileArray = Array.from(files);
-
-    const processedFiles = fileArray.map(file => ({
-      file,
-      name: file.name,
-      id: Math.random().toString(36).substr(2, 9),
-      data: null,
-      content: null
-    }));
-
-    // Read file contents
-    Promise.all(
-      processedFiles.map(fileObj => 
-        new Promise((resolve) => {
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            fileObj.content = e.target.result;
-            resolve(fileObj);
-          };
-          reader.readAsText(fileObj.file);
-        })
-      )
-    ).then(files => {
-      onFilesUploaded(files);
-    });
-  }, [onFilesUploaded]);
+  const processGlobalFiles = useStore(state => state.processGlobalFiles);
 
   const handleDragEnter = useCallback((e) => {
     e.preventDefault();
@@ -54,13 +28,13 @@ export function FileUpload({ onFilesUploaded }) {
     e.preventDefault();
     e.stopPropagation(); // 阻止事件冒泡到全局处理器
     setIsDragOver(false);
-    processFiles(e.dataTransfer.files);
-  }, [processFiles]);
+    processGlobalFiles(e.dataTransfer.files);
+  }, [processGlobalFiles]);
 
   const handleFileSelect = useCallback((e) => {
-    processFiles(e.target.files);
+    processGlobalFiles(e.target.files);
     e.target.value = '';
-  }, [processFiles]);
+  }, [processGlobalFiles]);
 
   return (
     <div className="bg-white rounded-lg shadow-md p-3">
diff --git a/src/components/RegexControls.jsx b/src/components/RegexControls.jsx
index 971cce9..79a6eaf 100644
--- a/src/components/RegexControls.jsx
+++ b/src/components/RegexControls.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Settings, Zap, Eye, ChevronDown, ChevronUp, Target, Code, ZoomIn } from 'lucide-react';
+import { Settings, Zap, Eye, Share2, Check, ChevronDown, ChevronUp, Target, Code, ZoomIn } from 'lucide-react';
 import { METRIC_PRESETS } from '../metricPresets.js';
+import { serializeStateForURL } from '../utils/sharing.js';
 
 // 匹配模式枚举
 const MATCH_MODES = {
@@ -196,16 +197,52 @@ export class ValueExtractor {
   }
 }
 
-export function RegexControls({
-  globalParsingConfig,
-  onGlobalParsingConfigChange,
-  uploadedFiles = [],
-  xRange,
-  onXRangeChange,
-  maxStep
-}) {
+import { useStore } from '../store';
+
+export function RegexControls() {
+  const {
+    globalParsingConfig,
+    handleGlobalParsingConfigChange: onGlobalParsingConfigChange,
+    uploadedFiles,
+    xRange,
+    setXRange: onXRangeChange,
+    maxStep
+  } = useStore(state => ({
+    globalParsingConfig: state.globalParsingConfig,
+    handleGlobalParsingConfigChange: state.handleGlobalParsingConfigChange,
+    uploadedFiles: state.uploadedFiles,
+    xRange: state.xRange,
+    setXRange: state.setXRange,
+    maxStep: state.maxStep,
+    smoothingEnabled: state.smoothingEnabled,
+    setSmoothingEnabled: state.setSmoothingEnabled,
+    smoothingWindow: state.smoothingWindow,
+    setSmoothingWindow: state.setSmoothingWindow,
+  }));
+  const store = useStore();
   const [showPreview, setShowPreview] = useState(false);
   const [previewResults, setPreviewResults] = useState({});
+  const [copied, setCopied] = useState(false);
+
+  const handleShare = useCallback(() => {
+    const stateToShare = {
+      uploadedFiles: store.getState().uploadedFiles,
+      globalParsingConfig: store.getState().globalParsingConfig,
+      compareMode: store.getState().compareMode,
+      relativeBaseline: store.getState().relativeBaseline,
+      absoluteBaseline: store.getState().absoluteBaseline,
+      xRange: store.getState().xRange,
+      smoothingEnabled: store.getState().smoothingEnabled,
+      smoothingWindow: store.getState().smoothingWindow,
+    };
+    const serializedState = serializeStateForURL(stateToShare);
+    const url = `${window.location.origin}${window.location.pathname}#s=${serializedState}`;
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [store]);
+
 
   // 提取数值的通用函数
   const extractValues = useCallback((content, mode, config) => {
@@ -445,6 +482,14 @@ export function RegexControls({
           >
             <Eye size={14} />
           </button>
+          <button
+            onClick={handleShare}
+            className="p-1 text-green-600 hover:bg-green-50 rounded transition-colors"
+            title="分享会话"
+            disabled={copied}
+          >
+            {copied ? <Check size={14} /> : <Share2 size={14} />}
+          </button>
         </div>
       </div>
       
@@ -474,8 +519,41 @@ export function RegexControls({
 
         <div className="border rounded-lg p-3">
             <div className="flex items-center gap-2 mb-2">
-                <ZoomIn 
-                    size={16} 
+                <h4 className="text-base font-semibold text-gray-800">
+                    Display Options
+                </h4>
+            </div>
+            <div className="space-y-2">
+                <label className="flex items-center gap-2 text-xs font-medium text-gray-700">
+                    <input
+                        type="checkbox"
+                        checked={smoothingEnabled}
+                        onChange={(e) => setSmoothingEnabled(e.target.checked)}
+                        className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                    />
+                    Enable Smoothing
+                </label>
+                {smoothingEnabled && (
+                    <div>
+                        <label className="block text-xs font-medium text-gray-700 mb-1">
+                            Smoothing Window
+                        </label>
+                        <input
+                            type="number"
+                            min="2"
+                            value={smoothingWindow}
+                            onChange={(e) => setSmoothingWindow(Number(e.target.value))}
+                            className="w-full px-2 py-1 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none"
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+
+        <div className="border rounded-lg p-3">
+            <div className="flex items-center gap-2 mb-2">
+                <ZoomIn
+                    size={16}
                     className="text-gray-600" 
                     aria-hidden="true"
                 />
diff --git a/src/components/__tests__/ChartContainer.test.jsx b/src/components/__tests__/ChartContainer.test.jsx
index 26543e1..d41f5a6 100644
--- a/src/components/__tests__/ChartContainer.test.jsx
+++ b/src/components/__tests__/ChartContainer.test.jsx
@@ -1,76 +1,88 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { vi, expect, describe, it } from 'vitest';
+import { vi, expect, describe, it, beforeEach } from 'vitest';
 import '@testing-library/jest-dom/vitest';
+import { useStore } from '../../store';
+import ChartContainer from '../ChartContainer.jsx';
 
-// Mock react-chartjs-2 Line component
+// Mocks
 vi.mock('react-chartjs-2', () => ({
-  Line: () => <div data-testid="chart" />
+  Line: ({ options }) => {
+    // Mock call to onHover to test sync
+    if (options.onHover) {
+      options.onHover({}, [{ index: 0 }]);
+      options.onHover({}, []);
+    }
+    return <div data-testid="chart" />;
+  }
 }));
 
-// Mock chart.js to avoid heavy setup
-vi.mock('chart.js', () => {
-  const Chart = { register: vi.fn(), defaults: { plugins: { legend: { labels: { generateLabels: () => [] } } } } };
-  return {
-    ChartJS: Chart,
-    Chart,
-    CategoryScale: {},
-    LinearScale: {},
-    PointElement: {},
-    LineElement: {},
-    Title: {},
-    Tooltip: {},
-    Legend: {}
-  };
-});
-
+vi.mock('chart.js', () => ({
+  Chart: { register: vi.fn(), defaults: { plugins: { legend: { labels: { generateLabels: () => [] } } } } },
+  ChartJS: { register: vi.fn() },
+  CategoryScale: vi.fn(), LinearScale: vi.fn(), PointElement: vi.fn(), LineElement: vi.fn(), Title: vi.fn(), Tooltip: vi.fn(), Legend: vi.fn()
+}));
 vi.mock('chartjs-plugin-zoom', () => ({ default: {} }));
 
-import ChartContainer from '../ChartContainer.jsx';
+const mockSetXRange = vi.fn();
+const mockSetMaxStep = vi.fn();
+vi.mock('../../store', () => ({
+  useStore: vi.fn(),
+}));
+const mockUseStore = useStore;
 
 const sampleFile = {
-  name: 'test.log',
-  id: '1',
-  content: 'loss: 1\nloss: 2',
+  name: 'test.log', id: '1', content: 'loss: 1\nloss: 2', enabled: true,
+  config: { metrics: [{ name: 'loss', mode: 'keyword', keyword: 'loss:' }] }
 };
-
 const metric = { name: 'loss', mode: 'keyword', keyword: 'loss:' };
 
-function renderComponent(props = {}) {
-  const onXRangeChange = vi.fn();
-  const onMaxStepChange = vi.fn();
-  const result = render(
-    <ChartContainer
-      files={[]}
-      metrics={[]}
-      compareMode="normal"
-      onXRangeChange={onXRangeChange}
-      onMaxStepChange={onMaxStepChange}
-      {...props}
-    />
-  );
-  return { ...result, onXRangeChange, onMaxStepChange };
-}
+const initialStoreState = {
+  uploadedFiles: [],
+  globalParsingConfig: { metrics: [] },
+  compareMode: 'normal',
+  relativeBaseline: 0.002,
+  absoluteBaseline: 0.005,
+  xRange: { min: undefined, max: undefined },
+  setXRange: mockSetXRange,
+  setMaxStep: mockSetMaxStep,
+};
+
+// Helper to setup mock store
+const setupStore = (state) => {
+  mockUseStore.mockImplementation(selector => selector({ ...initialStoreState, ...state }));
+};
 
 describe('ChartContainer', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   it('shows empty message when no files', () => {
-    renderComponent();
+    setupStore({ uploadedFiles: [] });
+    render(<ChartContainer />);
     expect(screen.getByText('📊 暂无数据')).toBeInTheDocument();
   });
 
   it('shows metric selection message when no metrics', () => {
-    renderComponent({ files: [sampleFile] });
+    setupStore({ uploadedFiles: [sampleFile], globalParsingConfig: { metrics: [] } });
+    render(<ChartContainer />);
     expect(screen.getByText('🎯 请选择要显示的图表')).toBeInTheDocument();
   });
 
   it('renders charts and triggers callbacks', async () => {
-    const { onXRangeChange, onMaxStepChange } = renderComponent({ files: [sampleFile], metrics: [metric] });
-    expect(await screen.findByText('📊 loss')).toBeInTheDocument();
+    setupStore({ uploadedFiles: [sampleFile], globalParsingConfig: { metrics: [metric] }, xRange: {min: 0, max: 1} });
+    render(<ChartContainer />);
+
+    // Check for the resizable panel title using a regex to be more flexible
+    expect(await screen.findByText(new RegExp(metric.name, "i"))).toBeInTheDocument();
+
     await waitFor(() => {
-      expect(onMaxStepChange).toHaveBeenCalledWith(1);
-      expect(onXRangeChange).toHaveBeenCalled();
+      expect(mockSetMaxStep).toHaveBeenCalledWith(1);
+      expect(mockSetXRange).toHaveBeenCalled();
     });
-    const cb = onXRangeChange.mock.calls[0][0];
-    expect(cb({})).toEqual({ min: 0, max: 1 });
+
+    const cb = mockSetXRange.mock.calls[0][0];
+    expect(cb({ min: 0, max: 1 })).toEqual({ min: 0, max: 1 });
   });
 });
diff --git a/src/components/__tests__/FileList.test.jsx b/src/components/__tests__/FileList.test.jsx
index 73a78bd..fa518bb 100644
--- a/src/components/__tests__/FileList.test.jsx
+++ b/src/components/__tests__/FileList.test.jsx
@@ -1,45 +1,72 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { vi, expect, afterEach, describe, it } from 'vitest';
+import { vi, expect, describe, it, beforeEach } from 'vitest';
 import '@testing-library/jest-dom/vitest';
-
+import { useStore } from '../../store';
 import { FileList } from '../FileList.jsx';
 
-afterEach(() => {
-  vi.restoreAllMocks();
-});
+// Mock the store
+const mockHandleFileRemove = vi.fn();
+const mockHandleFileToggle = vi.fn();
+const mockHandleFileConfig = vi.fn();
+
+vi.mock('../../store', () => ({
+  useStore: vi.fn(),
+}));
+
+const mockUseStore = useStore;
 
 describe('FileList', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
   it('shows empty state when no files', () => {
-    render(<FileList files={[]} onFileRemove={vi.fn()} onFileToggle={vi.fn()} onFileConfig={vi.fn()} />);
+    mockUseStore.mockImplementation(selector => selector({
+      uploadedFiles: [],
+      handleFileRemove: mockHandleFileRemove,
+      handleFileToggle: mockHandleFileToggle,
+      handleFileConfig: mockHandleFileConfig,
+    }));
+    render(<FileList />);
     expect(screen.getByText('📂 暂无文件')).toBeInTheDocument();
   });
 
   it('renders file and triggers actions', async () => {
     const user = userEvent.setup();
     const file = { id: '1', name: 'test.log', enabled: true };
-    const onFileRemove = vi.fn();
-    const onFileToggle = vi.fn();
-    const onFileConfig = vi.fn();
-    render(<FileList files={[file]} onFileRemove={onFileRemove} onFileToggle={onFileToggle} onFileConfig={onFileConfig} />);
+    mockUseStore.mockImplementation(selector => selector({
+      uploadedFiles: [file],
+      handleFileRemove: mockHandleFileRemove,
+      handleFileToggle: mockHandleFileToggle,
+      handleFileConfig: mockHandleFileConfig,
+    }));
+
+    render(<FileList />);
 
     const checkbox = screen.getByRole('checkbox');
     await user.click(checkbox);
-    expect(onFileToggle).toHaveBeenCalledWith(0, false);
+    expect(mockHandleFileToggle).toHaveBeenCalledWith(0, false);
 
     const configButton = screen.getByRole('button', { name: `配置文件 ${file.name}` });
     await user.click(configButton);
-    expect(onFileConfig).toHaveBeenCalledWith(file);
+    expect(mockHandleFileConfig).toHaveBeenCalledWith(file);
 
     const removeButton = screen.getByRole('button', { name: `删除文件 ${file.name}` });
     await user.click(removeButton);
-    expect(onFileRemove).toHaveBeenCalledWith(0);
+    expect(mockHandleFileRemove).toHaveBeenCalledWith(0);
   });
 
   it('disables config when file disabled', () => {
     const file = { id: '2', name: 'off.log', enabled: false };
-    render(<FileList files={[file]} onFileRemove={vi.fn()} onFileToggle={vi.fn()} onFileConfig={vi.fn()} />);
+    mockUseStore.mockImplementation(selector => selector({
+      uploadedFiles: [file],
+      handleFileRemove: mockHandleFileRemove,
+      handleFileToggle: mockHandleFileToggle,
+      handleFileConfig: mockHandleFileConfig,
+    }));
+    render(<FileList />);
     const configButton = screen.getByRole('button', { name: `配置文件 ${file.name}` });
     expect(configButton).toBeDisabled();
   });
diff --git a/src/components/__tests__/FileUpload.test.jsx b/src/components/__tests__/FileUpload.test.jsx
index f8d1ec8..9efc760 100644
--- a/src/components/__tests__/FileUpload.test.jsx
+++ b/src/components/__tests__/FileUpload.test.jsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { vi, expect, afterEach, describe, it } from 'vitest';
+import { vi, expect, afterEach, describe, it, beforeEach } from 'vitest';
 import '@testing-library/jest-dom/vitest';
-
+import { useStore } from '../../store';
 import { FileUpload } from '../FileUpload.jsx';
 
+// Mock the store
+const processGlobalFiles = vi.fn();
+vi.mock('../../store', () => ({
+  useStore: vi.fn(selector => selector({ processGlobalFiles })),
+}));
+
 function mockFileReader(text) {
   const onload = vi.fn();
   const readAsText = vi.fn(function () {
@@ -13,23 +19,24 @@ function mockFileReader(text) {
   globalThis.FileReader = vi.fn(() => ({ onload, readAsText }));
 }
 
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
 describe('FileUpload', () => {
-  it('uploads files and calls callback', async () => {
-    const onFilesUploaded = vi.fn();
+  beforeEach(() => {
+    vi.clearAllMocks();
     mockFileReader('content');
+  });
+
+  it('uploads files and calls the store action', async () => {
     const file = new File(['content'], 'test.log', { type: 'text/plain' });
-    render(<FileUpload onFilesUploaded={onFilesUploaded} />);
+    render(<FileUpload />);
 
     const input = screen.getByLabelText('选择日志文件，支持所有文本格式');
     await fireEvent.change(input, { target: { files: [file] } });
 
-    await waitFor(() => expect(onFilesUploaded).toHaveBeenCalled());
-    const uploaded = onFilesUploaded.mock.calls[0][0][0];
-    expect(uploaded.name).toBe('test.log');
-    expect(uploaded.content).toBe('content');
+    await waitFor(() => {
+      expect(processGlobalFiles).toHaveBeenCalledOnce();
+    });
+
+    const calledWith = processGlobalFiles.mock.calls[0][0];
+    expect(calledWith[0]).toBe(file);
   });
 });
diff --git a/src/store.js b/src/store.js
new file mode 100644
index 0000000..7f94481
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,122 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { mergeFilesWithReplacement } from './utils/mergeFiles.js';
+
+export const useStore = create(
+  persist(
+    (set, get) => ({
+      // State
+      uploadedFiles: [],
+  globalParsingConfig: {
+    metrics: [
+      { name: 'Loss', mode: 'keyword', keyword: 'loss:', regex: 'loss:\\s*([\\d.eE+-]+)' },
+      { name: 'Grad Norm', mode: 'keyword', keyword: 'norm:', regex: 'grad[\\s_]norm:\\s*([\\d.eE+-]+)' }
+    ]
+  },
+  compareMode: 'normal',
+  relativeBaseline: 0.002,
+  absoluteBaseline: 0.005,
+  configModalOpen: false,
+  configFile: null,
+  xRange: { min: undefined, max: undefined },
+  maxStep: 0,
+  sidebarVisible: true,
+
+  // Actions
+  handleFilesUploaded: (files) => {
+    const { globalParsingConfig, uploadedFiles } = get();
+    const colors = ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#f97316'];
+    const existingFilesCount = uploadedFiles.length;
+
+    const filesWithDefaults = files.map((file, index) => ({
+      ...file,
+      enabled: true,
+      color: colors[(existingFilesCount + index) % colors.length],
+      config: {
+        metrics: globalParsingConfig.metrics.map(m => ({ ...m })),
+        dataRange: { start: 0, end: undefined, useRange: false }
+      }
+    }));
+    set(state => ({ uploadedFiles: mergeFilesWithReplacement(state.uploadedFiles, filesWithDefaults) }));
+  },
+
+  setFileColor: (fileId, color) => set(state => ({
+    uploadedFiles: state.uploadedFiles.map(file =>
+      file.id === fileId ? { ...file, color } : file
+    )
+  })),
+
+  processGlobalFiles: (files) => {
+    const fileArray = Array.from(files);
+    if (fileArray.length === 0) return;
+
+    // Vite-specific worker instantiation
+    const worker = new (require('./worker.js?worker').default)();
+
+    worker.onmessage = (event) => {
+      const processedFiles = event.data;
+      if (processedFiles && processedFiles.length > 0) {
+        get().handleFilesUploaded(processedFiles);
+      }
+      worker.terminate(); // Clean up the worker
+    };
+
+    worker.onerror = (error) => {
+      console.error("Worker error:", error);
+      worker.terminate();
+    };
+
+    worker.postMessage(fileArray);
+  },
+
+  handleFileRemove: (index) => set(state => ({
+    uploadedFiles: state.uploadedFiles.filter((_, i) => i !== index)
+  })),
+
+  handleFileToggle: (index, enabled) => set(state => ({
+    uploadedFiles: state.uploadedFiles.map((file, i) =>
+      i === index ? { ...file, enabled } : file
+    )
+  })),
+
+  handleFileConfig: (file) => set({ configFile: file, configModalOpen: true }),
+
+  handleConfigSave: (fileId, config) => set(state => ({
+    uploadedFiles: state.uploadedFiles.map(file =>
+      file.id === fileId ? { ...file, config } : file
+    )
+  })),
+
+  handleConfigClose: () => set({ configModalOpen: false, configFile: null }),
+
+  handleGlobalParsingConfigChange: (newConfig) => set(state => ({
+    globalParsingConfig: newConfig,
+    uploadedFiles: state.uploadedFiles.map(file => ({
+      ...file,
+      config: {
+        ...file.config,
+        metrics: newConfig.metrics.map(m => ({ ...m }))
+      }
+    }))
+  })),
+
+  setCompareMode: (mode) => set({ compareMode: mode }),
+  setRelativeBaseline: (value) => set({ relativeBaseline: value }),
+  setAbsoluteBaseline: (value) => set({ absoluteBaseline: value }),
+  setXRange: (range) => set({ xRange: range }),
+  setMaxStep: (step) => set({ maxStep: step }),
+  setSidebarVisible: (visible) => set({ sidebarVisible: visible }),
+  smoothingEnabled: false,
+  smoothingWindow: 10,
+  setSmoothingEnabled: (enabled) => set({ smoothingEnabled: enabled }),
+  setSmoothingWindow: (window) => set({ smoothingWindow: window }),
+    }),
+    {
+      name: 'ml-log-analyzer-session', // name of the item in the storage (must be unique)
+      partialize: (state) =>
+        Object.fromEntries(
+          Object.entries(state).filter(([key]) => !['configFile', 'configModalOpen', 'sidebarVisible', 'smoothingEnabled', 'smoothingWindow'].includes(key))
+        ),
+    }
+  )
+);
diff --git a/src/utils/__tests__/sharing.test.js b/src/utils/__tests__/sharing.test.js
new file mode 100644
index 0000000..bd98704
--- /dev/null
+++ b/src/utils/__tests__/sharing.test.js
@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
+import { serializeStateForURL, deserializeStateFromURL } from '../sharing.js';
+import LZString from 'lz-string';
+
+// Mock lz-string to make tests deterministic
+vi.mock('lz-string', () => ({
+  default: {
+    compressToEncodedURIComponent: vi.fn(str => `compressed_${str}`),
+    decompressFromEncodedURIComponent: vi.fn(str => str.replace('compressed_', '')),
+  }
+}));
+
+describe('sharing utilities', () => {
+  const mockState = { a: 1, b: 'test' };
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    window.location.hash = '';
+  });
+
+  describe('serializeStateForURL', () => {
+    it('should serialize and compress state', () => {
+      const result = serializeStateForURL(mockState);
+      const expectedJSON = JSON.stringify(mockState);
+      expect(LZString.compressToEncodedURIComponent).toHaveBeenCalledWith(expectedJSON);
+      expect(result).toBe(`compressed_${expectedJSON}`);
+    });
+
+    it('should return an empty string on serialization error', () => {
+      const circularState = {};
+      circularState.a = circularState;
+      const result = serializeStateForURL(circularState);
+      expect(result).toBe('');
+    });
+  });
+
+  describe('deserializeStateFromURL', () => {
+    it('should deserialize and decompress state from URL hash', () => {
+      const json = JSON.stringify(mockState);
+      window.location.hash = `#s=compressed_${json}`;
+      const result = deserializeStateFromURL();
+      expect(LZString.decompressFromEncodedURIComponent).toHaveBeenCalledWith(`compressed_${json}`);
+      expect(result).toEqual(mockState);
+    });
+
+    it('should return null if no hash is present', () => {
+      expect(deserializeStateFromURL()).toBeNull();
+    });
+
+    it('should return null if share param "s" is not present', () => {
+      window.location.hash = '#other=value';
+      expect(deserializeStateFromURL()).toBeNull();
+    });
+
+    it('should return null on decompression failure', () => {
+      LZString.decompressFromEncodedURIComponent.mockReturnValueOnce(null);
+      window.location.hash = '#s=invalid_data';
+      expect(deserializeStateFromURL()).toBeNull();
+    });
+
+    it('should return null on JSON parsing error', () => {
+      window.location.hash = '#s=compressed_invalid_json';
+      expect(deserializeStateFromURL()).toBeNull();
+    });
+  });
+});
diff --git a/src/utils/__tests__/smoothing.test.js b/src/utils/__tests__/smoothing.test.js
new file mode 100644
index 0000000..b7ca44b
--- /dev/null
+++ b/src/utils/__tests__/smoothing.test.js
@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { movingAverage } from '../smoothing.js';
+
+describe('movingAverage', () => {
+  it('should not smooth data if window size is 1 or less', () => {
+    const data = [{ x: 0, y: 10 }, { x: 1, y: 20 }];
+    expect(movingAverage(data, 1)).toEqual(data);
+    expect(movingAverage(data, 0)).toEqual(data);
+  });
+
+  it('should not smooth data if data length is less than window size', () => {
+    const data = [{ x: 0, y: 10 }, { x: 1, y: 20 }];
+    expect(movingAverage(data, 3)).toEqual(data);
+  });
+
+  it('should calculate moving average correctly', () => {
+    const data = [
+      { x: 0, y: 10 },
+      { x: 1, y: 20 },
+      { x: 2, y: 30 },
+      { x: 3, y: 40 },
+      { x: 4, y: 50 },
+    ];
+    const expected = [
+      { x: 0, y: 20 },
+      { x: 1, y: 20 },
+      { x: 2, y: 20 },
+      { x: 3, y: 30 },
+      { x: 4, y: 40 },
+    ];
+    const result = movingAverage(data, 3);
+    // Rounding to handle potential floating point inaccuracies
+    result.forEach(p => p.y = Math.round(p.y));
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle an empty array', () => {
+    expect(movingAverage([], 5)).toEqual([]);
+  });
+});
diff --git a/src/utils/sharing.js b/src/utils/sharing.js
new file mode 100644
index 0000000..05d86ac
--- /dev/null
+++ b/src/utils/sharing.js
@@ -0,0 +1,40 @@
+import LZString from 'lz-string';
+
+/**
+ * Serializes the application state into a compressed, URL-safe string.
+ * @param {object} state The application state to serialize.
+ * @returns {string} The compressed state string.
+ */
+export function serializeStateForURL(state) {
+  try {
+    const jsonString = JSON.stringify(state);
+    return LZString.compressToEncodedURIComponent(jsonString);
+  } catch (error) {
+    console.error("Failed to serialize state:", error);
+    return '';
+  }
+}
+
+/**
+ * Deserializes the application state from a URL hash.
+ * @returns {object|null} The deserialized state object, or null if not present or invalid.
+ */
+export function deserializeStateFromURL() {
+  try {
+    const hash = window.location.hash.slice(1);
+    if (!hash) return null;
+
+    const params = new URLSearchParams(hash);
+    const compressedState = params.get('s');
+
+    if (!compressedState) return null;
+
+    const jsonString = LZString.decompressFromEncodedURIComponent(compressedState);
+    if (!jsonString) return null;
+
+    return JSON.parse(jsonString);
+  } catch (error) {
+    console.error("Failed to deserialize state:", error);
+    return null;
+  }
+}
diff --git a/src/utils/smoothing.js b/src/utils/smoothing.js
new file mode 100644
index 0000000..c871556
--- /dev/null
+++ b/src/utils/smoothing.js
@@ -0,0 +1,30 @@
+/**
+ * Calculates the moving average of a series of data points.
+ * @param {Array<{x: number, y: number}>} data The input data points.
+ * @param {number} windowSize The size of the moving average window.
+ * @returns {Array<{x: number, y: number}>} The smoothed data points.
+ */
+export function movingAverage(data, windowSize) {
+  if (windowSize <= 1 || data.length < windowSize) {
+    return data;
+  }
+
+  const smoothedData = [];
+  let sum = 0;
+
+  for (let i = 0; i < data.length; i++) {
+    sum += data[i].y;
+
+    if (i >= windowSize) {
+      sum -= data[i - windowSize].y;
+      smoothedData.push({ x: data[i].x, y: sum / windowSize });
+    } else if (i === windowSize - 1) {
+      // Handle the first full window
+      for (let j = 0; j < windowSize; j++) {
+        smoothedData.push({ x: data[j].x, y: sum / windowSize });
+      }
+    }
+  }
+
+  return smoothedData;
+}
diff --git a/src/worker.js b/src/worker.js
new file mode 100644
index 0000000..7099e2f
--- /dev/null
+++ b/src/worker.js
@@ -0,0 +1,41 @@
+self.onmessage = (event) => {
+  const files = event.data;
+  const fileArray = Array.from(files);
+
+  if (fileArray.length === 0) {
+    self.postMessage([]);
+    return;
+  }
+
+  const processedFiles = fileArray.map(file => ({
+    file,
+    name: file.name,
+    id: Math.random().toString(36).substr(2, 9),
+    data: null,
+    content: null,
+  }));
+
+  Promise.all(
+    processedFiles.map(fileObj =>
+      new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          fileObj.content = e.target.result;
+          // Don't send the raw file object back
+          delete fileObj.file;
+          resolve(fileObj);
+        };
+        reader.onerror = (e) => {
+          // Handle potential errors
+          console.error("FileReader error:", e);
+          fileObj.content = "Error reading file";
+          delete fileObj.file;
+          resolve(fileObj);
+        }
+        reader.readAsText(fileObj.file);
+      })
+    )
+  ).then(filesWithContent => {
+    self.postMessage(filesWithContent);
+  });
+};
diff --git a/vite.config.js b/vite.config.js
index 1ce2a28..fdaf841 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,6 +8,9 @@ export default defineConfig({
   // Use a relative base path for GitHub Pages.
   // Switch to absolute path when deploying on Vercel.
   base: process.env.VERCEL ? '/' : './',
+  optimizeDeps: {
+    include: ['lz-string'],
+  },
   plugins: [react()],
   build: {
     outDir: 'dist',