diff --git a/web/.storybook/main.ts b/web/.storybook/main.ts
index e656115ceb..57abae42ab 100644
--- a/web/.storybook/main.ts
+++ b/web/.storybook/main.ts
@@ -1,9 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs'
 import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
 
 const config: StorybookConfig = {
   stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
diff --git a/web/app/components/base/auto-height-textarea/index.stories.tsx b/web/app/components/base/auto-height-textarea/index.stories.tsx
index f083e4f56d..dcbcb253c6 100644
--- a/web/app/components/base/auto-height-textarea/index.stories.tsx
+++ b/web/app/components/base/auto-height-textarea/index.stories.tsx
@@ -23,6 +23,10 @@ const meta = {
       control: 'text',
       description: 'Textarea value',
     },
+    onChange: {
+      action: 'changed',
+      description: 'Change handler',
+    },
     minHeight: {
       control: 'number',
       description: 'Minimum height in pixels',
@@ -44,6 +48,11 @@ const meta = {
       description: 'Wrapper CSS classes',
     },
   },
+  args: {
+    onChange: (e) => {
+      console.log('Text changed:', e.target.value)
+    },
+  },
 } satisfies Meta<typeof AutoHeightTextarea>
 
 export default meta
diff --git a/web/app/components/base/chat/chat/answer/index.stories.tsx b/web/app/components/base/chat/chat/answer/index.stories.tsx
index a83c0fea61..02d0f015b5 100644
--- a/web/app/components/base/chat/chat/answer/index.stories.tsx
+++ b/web/app/components/base/chat/chat/answer/index.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs'
+import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import type { ChatItem } from '../../types'
 import { markdownContent } from './__mocks__/markdownContent'
 import { markdownContentSVG } from './__mocks__/markdownContentSVG'
@@ -33,7 +34,7 @@ const mockedBaseChatItem = {
 } satisfies ChatItem
 
 const mockedWorkflowProcess = {
-  status: 'succeeded',
+  status: WorkflowRunningStatus.Succeeded,
   tracing: [],
 }
 
diff --git a/web/app/components/base/confirm/index.stories.tsx b/web/app/components/base/confirm/index.stories.tsx
index dfbe00f293..a524137b79 100644
--- a/web/app/components/base/confirm/index.stories.tsx
+++ b/web/app/components/base/confirm/index.stories.tsx
@@ -62,6 +62,14 @@ const meta = {
       description: 'Whether clicking mask closes dialog',
     },
   },
+  args: {
+    onConfirm: () => {
+      console.log('✅ User clicked confirm')
+    },
+    onCancel: () => {
+      console.log('❌ User clicked cancel')
+    },
+  },
 } satisfies Meta<typeof Confirm>
 
 export default meta
@@ -99,6 +107,7 @@ export const WarningDialog: Story = {
     type: 'warning',
     title: 'Delete Confirmation',
     content: 'Are you sure you want to delete this project? This action cannot be undone.',
+    isShow: false,
   },
 }
 
@@ -109,6 +118,7 @@ export const InfoDialog: Story = {
     type: 'info',
     title: 'Notice',
     content: 'Your changes have been saved. Do you want to proceed to the next step?',
+    isShow: false,
   },
 }
 
@@ -121,6 +131,7 @@ export const CustomButtonText: Story = {
     content: 'You have unsaved changes. Are you sure you want to exit?',
     confirmText: 'Discard Changes',
     cancelText: 'Continue Editing',
+    isShow: false,
   },
 }
 
@@ -132,6 +143,7 @@ export const LoadingState: Story = {
     title: 'Deleting...',
     content: 'Please wait while we delete the file...',
     isLoading: true,
+    isShow: false,
   },
 }
 
@@ -143,6 +155,7 @@ export const DisabledState: Story = {
     title: 'Verification Required',
     content: 'Please complete email verification before proceeding.',
     isDisabled: true,
+    isShow: false,
   },
 }
 
@@ -155,6 +168,7 @@ export const AlertStyle: Story = {
     content: 'Your settings have been updated!',
     showCancel: false,
     confirmText: 'Got it',
+    isShow: false,
   },
 }
 
@@ -167,6 +181,7 @@ export const DangerousAction: Story = {
     content: 'This action will permanently delete your account and all associated data, including: all projects and files, collaboration history, and personal settings. This action cannot be reversed!',
     confirmText: 'Delete My Account',
     cancelText: 'Keep My Account',
+    isShow: false,
   },
 }
 
@@ -178,6 +193,7 @@ export const NotMaskClosable: Story = {
     title: 'Important Action',
     content: 'This action requires your explicit choice. Clicking outside will not close this dialog.',
     maskClosable: false,
+    isShow: false,
   },
 }
 
@@ -195,5 +211,6 @@ export const Playground: Story = {
     showConfirm: true,
     showCancel: true,
     maskClosable: true,
+    isShow: false,
   },
 }
diff --git a/web/app/components/base/input-number/index.stories.tsx b/web/app/components/base/input-number/index.stories.tsx
index 0fca2e52f9..9bb3ec1f8c 100644
--- a/web/app/components/base/input-number/index.stories.tsx
+++ b/web/app/components/base/input-number/index.stories.tsx
@@ -49,6 +49,11 @@ const meta = {
       description: 'Default value when undefined',
     },
   },
+  args: {
+    onChange: (value) => {
+      console.log('Value changed:', value)
+    },
+  },
 } satisfies Meta<typeof InputNumber>
 
 export default meta
@@ -196,7 +201,8 @@ const SizeComparisonDemo = () => {
 
 export const SizeComparison: Story = {
   render: () => <SizeComparisonDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Font size picker
 const FontSizePickerDemo = () => {
@@ -228,7 +234,8 @@ const FontSizePickerDemo = () => {
 
 export const FontSizePicker: Story = {
   render: () => <FontSizePickerDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Quantity selector
 const QuantitySelectorDemo = () => {
@@ -268,7 +275,8 @@ const QuantitySelectorDemo = () => {
 
 export const QuantitySelector: Story = {
   render: () => <QuantitySelectorDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Timer settings
 const TimerSettingsDemo = () => {
@@ -324,7 +332,8 @@ const TimerSettingsDemo = () => {
 
 export const TimerSettings: Story = {
   render: () => <TimerSettingsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Animation settings
 const AnimationSettingsDemo = () => {
@@ -380,7 +389,8 @@ const AnimationSettingsDemo = () => {
 
 export const AnimationSettings: Story = {
   render: () => <AnimationSettingsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Temperature control
 const TemperatureControlDemo = () => {
@@ -420,7 +430,8 @@ const TemperatureControlDemo = () => {
 
 export const TemperatureControl: Story = {
   render: () => <TemperatureControlDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Interactive playground
 export const Playground: Story = {
diff --git a/web/app/components/base/radio-card/index.stories.tsx b/web/app/components/base/radio-card/index.stories.tsx
index 81c89fca24..e129cd7033 100644
--- a/web/app/components/base/radio-card/index.stories.tsx
+++ b/web/app/components/base/radio-card/index.stories.tsx
@@ -138,7 +138,8 @@ const WithConfigurationDemo = () => {
 
 export const WithConfiguration: Story = {
   render: () => <WithConfigurationDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Multiple cards selection
 const MultipleCardsDemo = () => {
@@ -190,7 +191,8 @@ const MultipleCardsDemo = () => {
 
 export const MultipleCards: Story = {
   render: () => <MultipleCardsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Cloud provider selection
 const CloudProviderSelectionDemo = () => {
@@ -247,7 +249,8 @@ const CloudProviderSelectionDemo = () => {
 
 export const CloudProviderSelection: Story = {
   render: () => <CloudProviderSelectionDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Deployment strategy
 const DeploymentStrategyDemo = () => {
@@ -313,7 +316,8 @@ const DeploymentStrategyDemo = () => {
 
 export const DeploymentStrategy: Story = {
   render: () => <DeploymentStrategyDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Storage options
 const StorageOptionsDemo = () => {
@@ -388,7 +392,8 @@ const StorageOptionsDemo = () => {
 
 export const StorageOptions: Story = {
   render: () => <StorageOptionsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - API authentication method
 const APIAuthMethodDemo = () => {
@@ -458,7 +463,8 @@ const APIAuthMethodDemo = () => {
 
 export const APIAuthMethod: Story = {
   render: () => <APIAuthMethodDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Interactive playground
 const PlaygroundDemo = () => {
@@ -501,4 +507,5 @@ const PlaygroundDemo = () => {
 
 export const Playground: Story = {
   render: () => <PlaygroundDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
diff --git a/web/app/components/base/search-input/index.stories.tsx b/web/app/components/base/search-input/index.stories.tsx
index 53d1fc5218..99d60d52ff 100644
--- a/web/app/components/base/search-input/index.stories.tsx
+++ b/web/app/components/base/search-input/index.stories.tsx
@@ -19,6 +19,10 @@ const meta = {
       control: 'text',
       description: 'Search input value',
     },
+    onChange: {
+      action: 'changed',
+      description: 'Change handler',
+    },
     placeholder: {
       control: 'text',
       description: 'Placeholder text',
@@ -32,6 +36,11 @@ const meta = {
       description: 'Additional CSS classes',
     },
   },
+  args: {
+    onChange: (v) => {
+      console.log('Search value changed:', v)
+    },
+  },
 } satisfies Meta<typeof SearchInput>
 
 export default meta
@@ -66,6 +75,10 @@ export const Default: Story = {
   args: {
     placeholder: 'Search...',
     white: false,
+    value: '',
+    onChange: (v) => {
+      console.log('Search value changed:', v)
+    },
   },
 }
 
@@ -75,6 +88,7 @@ export const WhiteBackground: Story = {
   args: {
     placeholder: 'Search...',
     white: true,
+    value: '',
   },
 }
 
@@ -94,6 +108,7 @@ export const CustomPlaceholder: Story = {
   args: {
     placeholder: 'Search documents, files, and more...',
     white: false,
+    value: '',
   },
 }
 
@@ -156,7 +171,8 @@ const UserListSearchDemo = () => {
 
 export const UserListSearch: Story = {
   render: () => <UserListSearchDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Product search
 const ProductSearchDemo = () => {
@@ -209,7 +225,8 @@ const ProductSearchDemo = () => {
 
 export const ProductSearch: Story = {
   render: () => <ProductSearchDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Documentation search
 const DocumentationSearchDemo = () => {
@@ -271,7 +288,8 @@ const DocumentationSearchDemo = () => {
 
 export const DocumentationSearch: Story = {
   render: () => <DocumentationSearchDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Command palette
 const CommandPaletteDemo = () => {
@@ -330,7 +348,8 @@ const CommandPaletteDemo = () => {
 
 export const CommandPalette: Story = {
   render: () => <CommandPaletteDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Live search with results count
 const LiveSearchWithCountDemo = () => {
@@ -384,7 +403,8 @@ const LiveSearchWithCountDemo = () => {
 
 export const LiveSearchWithCount: Story = {
   render: () => <LiveSearchWithCountDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Size variations
 const SizeVariationsDemo = () => {
@@ -422,7 +442,8 @@ const SizeVariationsDemo = () => {
 
 export const SizeVariations: Story = {
   render: () => <SizeVariationsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Interactive playground
 export const Playground: Story = {
diff --git a/web/app/components/base/select/index.stories.tsx b/web/app/components/base/select/index.stories.tsx
index a54476cc0a..2a107155a5 100644
--- a/web/app/components/base/select/index.stories.tsx
+++ b/web/app/components/base/select/index.stories.tsx
@@ -33,6 +33,11 @@ const meta = {
       description: 'Hide check icon on selected item',
     },
   },
+  args: {
+    onSelect: (item) => {
+      console.log('Selected:', item)
+    },
+  },
 } satisfies Meta<typeof SimpleSelect>
 
 export default meta
@@ -87,6 +92,7 @@ export const Default: Story = {
   args: {
     placeholder: 'Select a fruit...',
     defaultValue: 'apple',
+    items: [],
   },
 }
 
@@ -96,6 +102,7 @@ export const WithPlaceholder: Story = {
   args: {
     placeholder: 'Choose an option...',
     defaultValue: '',
+    items: [],
   },
 }
 
@@ -106,6 +113,7 @@ export const Disabled: Story = {
     placeholder: 'Select a fruit...',
     defaultValue: 'banana',
     disabled: true,
+    items: [],
   },
 }
 
@@ -116,6 +124,7 @@ export const NotClearable: Story = {
     placeholder: 'Select a fruit...',
     defaultValue: 'cherry',
     notClearable: true,
+    items: [],
   },
 }
 
@@ -126,6 +135,7 @@ export const HideChecked: Story = {
     placeholder: 'Select a fruit...',
     defaultValue: 'apple',
     hideChecked: true,
+    items: [],
   },
 }
 
@@ -153,7 +163,8 @@ const WithSearchDemo = () => {
 
 export const WithSearch: Story = {
   render: () => <WithSearchDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // PortalSelect
 const PortalSelectVariantDemo = () => {
@@ -179,7 +190,8 @@ const PortalSelectVariantDemo = () => {
 
 export const PortalSelectVariant: Story = {
   render: () => <PortalSelectVariantDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Custom render option
 const CustomRenderOptionDemo = () => {
@@ -215,7 +227,8 @@ const CustomRenderOptionDemo = () => {
 
 export const CustomRenderOption: Story = {
   render: () => <CustomRenderOptionDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Loading state
 export const LoadingState: Story = {
@@ -232,7 +245,8 @@ export const LoadingState: Story = {
       </div>
     )
   },
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Form field
 const FormFieldDemo = () => {
@@ -297,7 +311,8 @@ const FormFieldDemo = () => {
 
 export const FormField: Story = {
   render: () => <FormFieldDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Filter selector
 const FilterSelectorDemo = () => {
@@ -359,7 +374,8 @@ const FilterSelectorDemo = () => {
 
 export const FilterSelector: Story = {
   render: () => <FilterSelectorDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Version selector with badge
 const VersionSelectorDemo = () => {
@@ -398,7 +414,8 @@ const VersionSelectorDemo = () => {
 
 export const VersionSelector: Story = {
   render: () => <VersionSelectorDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Settings dropdown
 const SettingsDropdownDemo = () => {
@@ -447,7 +464,8 @@ const SettingsDropdownDemo = () => {
 
 export const SettingsDropdown: Story = {
   render: () => <SettingsDropdownDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Comparison of variants
 const VariantComparisonDemo = () => {
@@ -504,7 +522,8 @@ const VariantComparisonDemo = () => {
 
 export const VariantComparison: Story = {
   render: () => <VariantComparisonDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Interactive playground
 const PlaygroundDemo = () => {
@@ -524,4 +543,5 @@ const PlaygroundDemo = () => {
 
 export const Playground: Story = {
   render: () => <PlaygroundDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
diff --git a/web/app/components/base/slider/index.stories.tsx b/web/app/components/base/slider/index.stories.tsx
index de4258b3ac..d350877d18 100644
--- a/web/app/components/base/slider/index.stories.tsx
+++ b/web/app/components/base/slider/index.stories.tsx
@@ -36,6 +36,11 @@ const meta = {
       description: 'Disabled state',
     },
   },
+  args: {
+    onChange: (value) => {
+      console.log('Slider value:', value)
+    },
+  },
 } satisfies Meta<typeof Slider>
 
 export default meta
@@ -157,7 +162,8 @@ const VolumeControlDemo = () => {
 
 export const VolumeControl: Story = {
   render: () => <VolumeControlDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Brightness control
 const BrightnessControlDemo = () => {
@@ -187,7 +193,8 @@ const BrightnessControlDemo = () => {
 
 export const BrightnessControl: Story = {
   render: () => <BrightnessControlDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Price range filter
 const PriceRangeFilterDemo = () => {
@@ -239,7 +246,8 @@ const PriceRangeFilterDemo = () => {
 
 export const PriceRangeFilter: Story = {
   render: () => <PriceRangeFilterDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Temperature selector
 const TemperatureSelectorDemo = () => {
@@ -279,7 +287,8 @@ const TemperatureSelectorDemo = () => {
 
 export const TemperatureSelector: Story = {
   render: () => <TemperatureSelectorDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Progress/completion slider
 const ProgressSliderDemo = () => {
@@ -325,7 +334,8 @@ const ProgressSliderDemo = () => {
 
 export const ProgressSlider: Story = {
   render: () => <ProgressSliderDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Zoom control
 const ZoomControlDemo = () => {
@@ -371,7 +381,8 @@ const ZoomControlDemo = () => {
 
 export const ZoomControl: Story = {
   render: () => <ZoomControlDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - AI model parameters
 const AIModelParametersDemo = () => {
@@ -445,7 +456,8 @@ const AIModelParametersDemo = () => {
 
 export const AIModelParameters: Story = {
   render: () => <AIModelParametersDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Image quality selector
 const ImageQualitySelectorDemo = () => {
@@ -488,7 +500,8 @@ const ImageQualitySelectorDemo = () => {
 
 export const ImageQualitySelector: Story = {
   render: () => <ImageQualitySelectorDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Multiple sliders
 const MultipleSlidersDemo = () => {
@@ -545,7 +558,8 @@ const MultipleSlidersDemo = () => {
 
 export const MultipleSliders: Story = {
   render: () => <MultipleSlidersDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Interactive playground
 export const Playground: Story = {
diff --git a/web/app/components/base/tag-input/index.stories.tsx b/web/app/components/base/tag-input/index.stories.tsx
index 8b5a33201e..dacb222c8c 100644
--- a/web/app/components/base/tag-input/index.stories.tsx
+++ b/web/app/components/base/tag-input/index.stories.tsx
@@ -19,6 +19,10 @@ const meta = {
       control: 'object',
       description: 'Array of tag strings',
     },
+    onChange: {
+      action: 'changed',
+      description: 'Change handler',
+    },
     disableAdd: {
       control: 'boolean',
       description: 'Disable adding new tags',
@@ -41,6 +45,11 @@ const meta = {
       description: 'Require non-empty tags',
     },
   },
+  args: {
+    onChange: (items) => {
+      console.log('Tags updated:', items)
+    },
+  },
 } satisfies Meta<typeof TagInput>
 
 export default meta
@@ -155,7 +164,8 @@ const SkillTagsDemo = () => {
 
 export const SkillTags: Story = {
   render: () => <SkillTagsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Email tags
 const EmailTagsDemo = () => {
@@ -192,7 +202,8 @@ const EmailTagsDemo = () => {
 
 export const EmailTags: Story = {
   render: () => <EmailTagsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Search filters
 const SearchFiltersDemo = () => {
@@ -246,7 +257,8 @@ const SearchFiltersDemo = () => {
 
 export const SearchFilters: Story = {
   render: () => <SearchFiltersDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Product categories
 const ProductCategoriesDemo = () => {
@@ -292,7 +304,8 @@ const ProductCategoriesDemo = () => {
 
 export const ProductCategories: Story = {
   render: () => <ProductCategoriesDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Keyword extraction
 const KeywordExtractionDemo = () => {
@@ -328,7 +341,8 @@ const KeywordExtractionDemo = () => {
 
 export const KeywordExtraction: Story = {
   render: () => <KeywordExtractionDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Tags with suggestions
 const TagsWithSuggestionsDemo = () => {
@@ -371,7 +385,8 @@ const TagsWithSuggestionsDemo = () => {
 
 export const TagsWithSuggestions: Story = {
   render: () => <TagsWithSuggestionsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Stop sequences (Tab mode)
 const StopSequencesDemo = () => {
@@ -425,7 +440,8 @@ const StopSequencesDemo = () => {
 
 export const StopSequences: Story = {
   render: () => <StopSequencesDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Multi-language tags
 const MultiLanguageTagsDemo = () => {
@@ -461,7 +477,8 @@ const MultiLanguageTagsDemo = () => {
 
 export const MultiLanguageTags: Story = {
   render: () => <MultiLanguageTagsDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Validation showcase
 const ValidationShowcaseDemo = () => {
@@ -500,7 +517,8 @@ const ValidationShowcaseDemo = () => {
 
 export const ValidationShowcase: Story = {
   render: () => <ValidationShowcaseDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Interactive playground
 export const Playground: Story = {
diff --git a/web/app/components/base/textarea/index.stories.tsx b/web/app/components/base/textarea/index.stories.tsx
index 095420ce17..d03b3decb7 100644
--- a/web/app/components/base/textarea/index.stories.tsx
+++ b/web/app/components/base/textarea/index.stories.tsx
@@ -76,6 +76,7 @@ export const Default: Story = {
     size: 'regular',
     placeholder: 'Enter text...',
     rows: 4,
+    value: '',
   },
 }
 
@@ -86,6 +87,7 @@ export const SmallSize: Story = {
     size: 'small',
     placeholder: 'Small textarea...',
     rows: 3,
+    value: '',
   },
 }
 
@@ -96,6 +98,7 @@ export const LargeSize: Story = {
     size: 'large',
     placeholder: 'Large textarea...',
     rows: 5,
+    value: '',
   },
 }
 
@@ -175,7 +178,8 @@ const SizeComparisonDemo = () => {
 
 export const SizeComparison: Story = {
   render: () => <SizeComparisonDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // State comparison
 const StateComparisonDemo = () => {
@@ -216,7 +220,8 @@ const StateComparisonDemo = () => {
 
 export const StateComparison: Story = {
   render: () => <StateComparisonDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Comment form
 const CommentFormDemo = () => {
@@ -250,7 +255,8 @@ const CommentFormDemo = () => {
 
 export const CommentForm: Story = {
   render: () => <CommentFormDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Feedback form
 const FeedbackFormDemo = () => {
@@ -291,7 +297,8 @@ const FeedbackFormDemo = () => {
 
 export const FeedbackForm: Story = {
   render: () => <FeedbackFormDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Code snippet
 const CodeSnippetDemo = () => {
@@ -322,7 +329,8 @@ const CodeSnippetDemo = () => {
 
 export const CodeSnippet: Story = {
   render: () => <CodeSnippetDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Message composer
 const MessageComposerDemo = () => {
@@ -372,7 +380,8 @@ const MessageComposerDemo = () => {
 
 export const MessageComposer: Story = {
   render: () => <MessageComposerDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Bio editor
 const BioEditorDemo = () => {
@@ -408,7 +417,8 @@ const BioEditorDemo = () => {
 
 export const BioEditor: Story = {
   render: () => <BioEditorDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - JSON editor
 const JSONEditorDemo = () => {
@@ -472,7 +482,8 @@ const JSONEditorDemo = () => {
 
 export const JSONEditor: Story = {
   render: () => <JSONEditorDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Real-world example - Task description
 const TaskDescriptionDemo = () => {
@@ -520,7 +531,8 @@ const TaskDescriptionDemo = () => {
 
 export const TaskDescription: Story = {
   render: () => <TaskDescriptionDemo />,
-}
+  parameters: { controls: { disable: true } },
+} as unknown as Story
 
 // Interactive playground
 export const Playground: Story = {
@@ -531,5 +543,6 @@ export const Playground: Story = {
     rows: 4,
     disabled: false,
     destructive: false,
+    value: '',
   },
 }
diff --git a/web/app/components/base/voice-input/index.stories.tsx b/web/app/components/base/voice-input/index.stories.tsx
index 8cfbed434b..8d92f587c4 100644
--- a/web/app/components/base/voice-input/index.stories.tsx
+++ b/web/app/components/base/voice-input/index.stories.tsx
@@ -29,7 +29,7 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
       <div className="absolute inset-[1.5px] flex items-center overflow-hidden rounded-[10.5px] bg-primary-25 py-[14px] pl-[14.5px] pr-[6.5px]">
         {/* Waveform visualization placeholder */}
         <div className="absolute bottom-0 left-0 flex h-4 w-full items-end gap-[3px] px-2">
-          {new Array(40).fill().map((_, i) => (
+          {new Array(40).fill(0).map((_, i) => (
             <div
               key={i}
               className="w-[2px] rounded-t bg-blue-200"