chore: improve storybooks (#27306)

web/.storybook/main.ts

@@ -1,5 +1,8 @@
 import type { StorybookConfig } from '@storybook/nextjs'
 import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const storybookDir = path.dirname(fileURLToPath(import.meta.url))
 
 const config: StorybookConfig = {
   stories: ['../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -32,9 +35,9 @@ const config: StorybookConfig = {
     config.resolve.alias = {
       ...config.resolve.alias,
       // Mock the plugin index files to avoid circular dependencies
-      [path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/context-block/index.tsx')]: path.resolve(__dirname, '__mocks__/context-block.tsx'),
+      [path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/context-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/context-block.tsx'),
-      [path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/history-block/index.tsx')]: path.resolve(__dirname, '__mocks__/history-block.tsx'),
+      [path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/history-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/history-block.tsx'),
-      [path.resolve(__dirname, '../app/components/base/prompt-editor/plugins/query-block/index.tsx')]: path.resolve(__dirname, '__mocks__/query-block.tsx'),
+      [path.resolve(storybookDir, '../app/components/base/prompt-editor/plugins/query-block/index.tsx')]: path.resolve(storybookDir, '__mocks__/query-block.tsx'),
     }
     return config
   },

web/.storybook/utils/audio-player-manager.mock.ts

@@ -0,0 +1,64 @@
+import { AudioPlayerManager } from '@/app/components/base/audio-btn/audio.player.manager'
+
+type PlayerCallback = ((event: string) => void) | null
+
+class MockAudioPlayer {
+  private callback: PlayerCallback = null
+  private finishTimer?: ReturnType<typeof setTimeout>
+
+  public setCallback(callback: PlayerCallback) {
+    this.callback = callback
+  }
+
+  public playAudio() {
+    this.clearTimer()
+    this.callback?.('play')
+    this.finishTimer = setTimeout(() => {
+      this.callback?.('ended')
+    }, 2000)
+  }
+
+  public pauseAudio() {
+    this.clearTimer()
+    this.callback?.('paused')
+  }
+
+  private clearTimer() {
+    if (this.finishTimer)
+      clearTimeout(this.finishTimer)
+  }
+}
+
+class MockAudioPlayerManager {
+  private readonly player = new MockAudioPlayer()
+
+  public getAudioPlayer(
+    _url: string,
+    _isPublic: boolean,
+    _id: string | undefined,
+    _msgContent: string | null | undefined,
+    _voice: string | undefined,
+    callback: PlayerCallback,
+  ) {
+    this.player.setCallback(callback)
+    return this.player
+  }
+
+  public resetMsgId() {
+    // No-op for the mock
+  }
+}
+
+export const ensureMockAudioManager = () => {
+  const managerAny = AudioPlayerManager as unknown as {
+    getInstance: () => AudioPlayerManager
+    __isStorybookMockInstalled?: boolean
+  }
+
+  if (managerAny.__isStorybookMockInstalled)
+    return
+
+  const mock = new MockAudioPlayerManager()
+  managerAny.getInstance = () => mock as unknown as AudioPlayerManager
+  managerAny.__isStorybookMockInstalled = true
+}

web/app/components/base/action-button/index.stories.tsx

@@ -3,7 +3,7 @@ import { RiAddLine, RiDeleteBinLine, RiEditLine, RiMore2Fill, RiSaveLine, RiShar
 import ActionButton, { ActionButtonState } from '.'
 
 const meta = {
-  title: 'Base/ActionButton',
+  title: 'Base/Button/ActionButton',
   component: ActionButton,
   parameters: {
     layout: 'centered',

web/app/components/base/audio-btn/index.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect } from 'react'
+import type { ComponentProps } from 'react'
+import AudioBtn from '.'
+import { ensureMockAudioManager } from '../../../../.storybook/utils/audio-player-manager.mock'
+
+ensureMockAudioManager()
+
+const StoryWrapper = (props: ComponentProps<typeof AudioBtn>) => {
+  useEffect(() => {
+    ensureMockAudioManager()
+  }, [])
+
+  return (
+    <div className="flex items-center justify-center space-x-3">
+      <AudioBtn {...props} />
+      <span className="text-xs text-gray-500">Click to toggle playback</span>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Button/AudioBtn',
+  component: AudioBtn,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Audio playback toggle that streams assistant responses. The story uses a mocked audio player so you can inspect loading and playback states without calling the real API.',
+      },
+    },
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/apps/demo-app/text-to-audio',
+        params: { appId: 'demo-app' },
+      },
+    },
+  },
+  argTypes: {
+    id: {
+      control: 'text',
+      description: 'Message identifier used to scope the audio stream.',
+    },
+    value: {
+      control: 'text',
+      description: 'Text content that would be converted to speech.',
+    },
+    voice: {
+      control: 'text',
+      description: 'Voice profile used for playback.',
+    },
+    isAudition: {
+      control: 'boolean',
+      description: 'Switches to the audition style with minimal padding.',
+    },
+    className: {
+      control: 'text',
+      description: 'Optional custom class for the wrapper.',
+    },
+  },
+} satisfies Meta<typeof AudioBtn>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => <StoryWrapper {...args} />,
+  args: {
+    id: 'message-1',
+    value: 'This is an audio preview for the current assistant response.',
+    voice: 'alloy',
+  },
+}

web/app/components/base/auto-height-textarea/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import AutoHeightTextarea from '.'
 
 const meta = {
-  title: 'Base/AutoHeightTextarea',
+  title: 'Base/Input/AutoHeightTextarea',
   component: AutoHeightTextarea,
   parameters: {
     layout: 'centered',

web/app/components/base/block-input/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import BlockInput from '.'
 
 const meta = {
-  title: 'Base/BlockInput',
+  title: 'Base/Input/BlockInput',
   component: BlockInput,
   parameters: {
     layout: 'centered',

web/app/components/base/button/add-button.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import AddButton from './add-button'
+
+const meta = {
+  title: 'Base/Button/AddButton',
+  component: AddButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Compact icon-only button used for inline “add” actions in lists, cards, and modals.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Extra classes appended to the clickable container.',
+    },
+    onClick: {
+      control: false,
+      description: 'Triggered when the add button is pressed.',
+    },
+  },
+  args: {
+    onClick: () => console.log('Add button clicked'),
+  },
+} satisfies Meta<typeof AddButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    className: 'bg-white/80 shadow-sm backdrop-blur-sm',
+  },
+}
+
+export const InToolbar: Story = {
+  render: args => (
+    <div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
+      <span className="text-xs text-text-tertiary">Attachments</span>
+      <div className="ml-auto flex items-center gap-2">
+        <AddButton {...args} />
+      </div>
+    </div>
+  ),
+  args: {
+    className: 'border border-dashed border-primary-200',
+  },
+}

web/app/components/base/button/index.stories.tsx

@@ -4,7 +4,7 @@ import { RocketLaunchIcon } from '@heroicons/react/20/solid'
 import { Button } from '.'
 
 const meta = {
-  title: 'Base/Button',
+  title: 'Base/Button/Button',
   component: Button,
   parameters: {
     layout: 'centered',

web/app/components/base/button/sync-button.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import SyncButton from './sync-button'
+
+const meta = {
+  title: 'Base/Button/SyncButton',
+  component: SyncButton,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Icon-only refresh button that surfaces a tooltip and is used for manual sync actions across the UI.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes appended to the clickable container.',
+    },
+    popupContent: {
+      control: 'text',
+      description: 'Tooltip text shown on hover.',
+    },
+    onClick: {
+      control: false,
+      description: 'Triggered when the sync button is pressed.',
+    },
+  },
+  args: {
+    popupContent: 'Sync now',
+    onClick: () => console.log('Sync button clicked'),
+  },
+} satisfies Meta<typeof SyncButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    className: 'bg-white/80 shadow-sm backdrop-blur-sm',
+  },
+}
+
+export const InHeader: Story = {
+  render: args => (
+    <div className="flex items-center gap-2 rounded-lg border border-divider-subtle bg-components-panel-bg p-3">
+      <span className="text-xs text-text-tertiary">Logs</span>
+      <div className="ml-auto flex items-center gap-2">
+        <SyncButton {...args} />
+      </div>
+    </div>
+  ),
+  args: {
+    popupContent: 'Refresh logs',
+  },
+}

web/app/components/base/chat/chat/answer/index.stories.tsx

@@ -6,7 +6,7 @@ import { markdownContentSVG } from './__mocks__/markdownContentSVG'
 import Answer from '.'
 
 const meta = {
-  title: 'Base/Chat Answer',
+  title: 'Base/Chat/Chat Answer',
   component: Answer,
   parameters: {
     layout: 'fullscreen',

web/app/components/base/chat/chat/question.stories.tsx

@@ -5,7 +5,7 @@ import Question from './question'
 import { User } from '@/app/components/base/icons/src/public/avatar'
 
 const meta = {
-  title: 'Base/Chat Question',
+  title: 'Base/Chat/Chat Question',
   component: Question,
   parameters: {
     layout: 'centered',

web/app/components/base/checkbox/index.stories.tsx

@@ -13,7 +13,7 @@ const createToggleItem = <T extends { id: string; checked: boolean }>(
 }
 
 const meta = {
-  title: 'Base/Checkbox',
+  title: 'Base/Input/Checkbox',
   component: Checkbox,
   parameters: {
     layout: 'centered',

web/app/components/base/confirm/index.stories.tsx

@@ -4,7 +4,7 @@ import Confirm from '.'
 import Button from '../button'
 
 const meta = {
-  title: 'Base/Confirm',
+  title: 'Base/Dialog/Confirm',
   component: Confirm,
   parameters: {
     layout: 'centered',

web/app/components/base/content-dialog/index.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import ContentDialog from '.'
+
+type Props = React.ComponentProps<typeof ContentDialog>
+
+const meta = {
+  title: 'Base/Dialog/ContentDialog',
+  component: ContentDialog,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Sliding panel overlay used in the app detail view. Includes dimmed backdrop and animated entrance/exit transitions.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes applied to the sliding panel container.',
+    },
+    show: {
+      control: 'boolean',
+      description: 'Controls visibility of the dialog.',
+    },
+    onClose: {
+      control: false,
+      description: 'Invoked when the overlay/backdrop is clicked.',
+    },
+  },
+  args: {
+    show: false,
+  },
+} satisfies Meta<typeof ContentDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DemoWrapper = (props: Props) => {
+  const [open, setOpen] = useState(props.show)
+
+  useEffect(() => {
+    setOpen(props.show)
+  }, [props.show])
+
+  return (
+    <div className="relative h-[480px] w-full overflow-hidden bg-gray-100">
+      <div className="flex h-full items-center justify-center">
+        <button
+          className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+          onClick={() => setOpen(true)}
+        >
+          Open dialog
+        </button>
+      </div>
+
+      <ContentDialog
+        {...props}
+        show={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="flex h-full flex-col space-y-4 bg-white p-6">
+          <h2 className="text-lg font-semibold text-gray-900">Plan summary</h2>
+          <p className="text-sm text-gray-600">
+            Use this area to present rich content for the selected run, configuration details, or
+            any supporting context.
+          </p>
+          <div className="flex-1 overflow-y-auto rounded-md border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            Scrollable placeholder content. Add domain-specific information, activity logs, or
+            editors in the real application.
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <button
+              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
+              onClick={() => setOpen(false)}
+            >
+              Cancel
+            </button>
+            <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+              Apply changes
+            </button>
+          </div>
+        </div>
+      </ContentDialog>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <DemoWrapper {...args} />,
+}
+
+export const NarrowPanel: Story = {
+  render: args => <DemoWrapper {...args} />,
+  args: {
+    className: 'max-w-[420px]',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies a custom width class to show the dialog as a narrower information panel.',
+      },
+    },
+  },
+}

web/app/components/base/dialog/index.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Dialog from '.'
+
+const meta = {
+  title: 'Base/Dialog/Dialog',
+  component: Dialog,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Modal dialog built on Headless UI. Provides animated overlay, title slot, and optional footer region.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional classes applied to the panel.',
+    },
+    titleClassName: {
+      control: 'text',
+      description: 'Extra classes for the title element.',
+    },
+    bodyClassName: {
+      control: 'text',
+      description: 'Extra classes for the content area.',
+    },
+    footerClassName: {
+      control: 'text',
+      description: 'Extra classes for the footer container.',
+    },
+    title: {
+      control: 'text',
+      description: 'Dialog title.',
+    },
+    show: {
+      control: 'boolean',
+      description: 'Controls visibility of the dialog.',
+    },
+    onClose: {
+      control: false,
+      description: 'Called when the dialog backdrop or close handler fires.',
+    },
+  },
+  args: {
+    title: 'Manage API Keys',
+    show: false,
+  },
+} satisfies Meta<typeof Dialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DialogDemo = (props: React.ComponentProps<typeof Dialog>) => {
+  const [open, setOpen] = useState(props.show)
+  useEffect(() => {
+    setOpen(props.show)
+  }, [props.show])
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show dialog
+      </button>
+
+      <Dialog
+        {...props}
+        show={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="space-y-4 text-sm text-gray-600">
+          <p>
+            Centralize API key management for collaborators. You can revoke, rotate, or generate new keys directly from this dialog.
+          </p>
+          <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            This placeholder area represents a form or table that would live inside the dialog body.
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    footer: (
+      <>
+        <button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
+          Cancel
+        </button>
+        <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+          Save changes
+        </button>
+      </>
+    ),
+  },
+}
+
+export const WithoutFooter: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    footer: undefined,
+    title: 'Read-only summary',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the dialog when no footer actions are provided.',
+      },
+    },
+  },
+}
+
+export const CustomStyling: Story = {
+  render: args => <DialogDemo {...args} />,
+  args: {
+    className: 'max-w-[560px] bg-white/95 backdrop-blur',
+    bodyClassName: 'bg-gray-50 rounded-xl p-5',
+    footerClassName: 'justify-between px-4 pb-4 pt-4',
+    titleClassName: 'text-lg text-primary-600',
+    footer: (
+      <>
+        <span className="text-xs text-gray-400">Last synced 2 minutes ago</span>
+        <div className="flex gap-2">
+          <button className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50">
+            Close
+          </button>
+          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+            Refresh data
+          </button>
+        </div>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies custom classes to the panel, body, title, and footer to match different surfaces.',
+      },
+    },
+  },
+}

web/app/components/base/input-number/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { InputNumber } from '.'
 
 const meta = {
-  title: 'Base/InputNumber',
+  title: 'Base/Input/InputNumber',
   component: InputNumber,
   parameters: {
     layout: 'centered',

web/app/components/base/input/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Input from '.'
 
 const meta = {
-  title: 'Base/Input',
+  title: 'Base/Input/Input',
   component: Input,
   parameters: {
     layout: 'centered',

web/app/components/base/modal-like-wrap/index.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import ModalLikeWrap from '.'
+
+const meta = {
+  title: 'Base/Dialog/ModalLikeWrap',
+  component: ModalLikeWrap,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Compact “modal-like” card used in wizards. Provides header actions, optional back slot, and confirm/cancel buttons.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Header title text.',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional classes on the wrapper.',
+    },
+    beforeHeader: {
+      control: false,
+      description: 'Slot rendered before the header (commonly a back link).',
+    },
+    hideCloseBtn: {
+      control: 'boolean',
+      description: 'Hides the top-right close icon when true.',
+    },
+    children: {
+      control: false,
+    },
+    onClose: {
+      control: false,
+    },
+    onConfirm: {
+      control: false,
+    },
+  },
+  args: {
+    title: 'Create dataset field',
+    hideCloseBtn: false,
+    onClose: () => console.log('close'),
+    onConfirm: () => console.log('confirm'),
+  },
+} satisfies Meta<typeof ModalLikeWrap>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const BaseContent = () => (
+  <div className="space-y-3 text-sm text-gray-600">
+    <p>
+      Describe the new field your dataset should collect. Provide a clear label and optional helper text.
+    </p>
+    <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+      Form inputs would be placed here in the real flow.
+    </div>
+  </div>
+)
+
+export const Default: Story = {
+  render: args => (
+    <ModalLikeWrap {...args}>
+      <BaseContent />
+    </ModalLikeWrap>
+  ),
+}
+
+export const WithBackLink: Story = {
+  render: args => (
+    <ModalLikeWrap
+      {...args}
+      hideCloseBtn
+      beforeHeader={(
+        <button
+          className="mb-1 flex items-center gap-1 text-xs font-medium uppercase text-text-accent"
+          onClick={() => console.log('back')}
+        >
+          <span className="bg-text-accent/10 inline-block h-4 w-4 rounded text-center text-[10px] leading-4 text-text-accent">{'<'}</span>
+          Back
+        </button>
+      )}
+    >
+      <BaseContent />
+    </ModalLikeWrap>
+  ),
+  args: {
+    title: 'Select metadata type',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates feeding content into `beforeHeader` while hiding the close button.',
+      },
+    },
+  },
+}
+
+export const CustomWidth: Story = {
+  render: args => (
+    <ModalLikeWrap
+      {...args}
+      className="w-[420px]"
+    >
+      <BaseContent />
+      <div className="mt-4 rounded-md bg-blue-50 p-3 text-xs text-blue-600">
+        Tip: metadata keys may only include letters, numbers, and underscores.
+      </div>
+    </ModalLikeWrap>
+  ),
+  args: {
+    title: 'Advanced configuration',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies extra width and helper messaging to emulate configuration panels.',
+      },
+    },
+  },
+}

web/app/components/base/modal/index.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Modal from '.'
+
+const meta = {
+  title: 'Base/Dialog/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Lightweight modal wrapper with optional header/description, close icon, and high-priority stacking for dropdown overlays.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Extra classes applied to the modal panel.',
+    },
+    wrapperClassName: {
+      control: 'text',
+      description: 'Additional wrapper classes for the dialog.',
+    },
+    isShow: {
+      control: 'boolean',
+      description: 'Controls whether the modal is visible.',
+    },
+    title: {
+      control: 'text',
+      description: 'Heading displayed at the top of the modal.',
+    },
+    description: {
+      control: 'text',
+      description: 'Secondary text beneath the title.',
+    },
+    closable: {
+      control: 'boolean',
+      description: 'Whether the close icon should be shown.',
+    },
+    overflowVisible: {
+      control: 'boolean',
+      description: 'Allows content to overflow the modal panel.',
+    },
+    highPriority: {
+      control: 'boolean',
+      description: 'Lifts the modal above other high z-index elements like dropdowns.',
+    },
+    onClose: {
+      control: false,
+      description: 'Callback invoked when the modal requests to close.',
+    },
+  },
+  args: {
+    isShow: false,
+    title: 'Create new API key',
+    description: 'Generate a scoped key for this workspace. You can revoke it at any time.',
+    closable: true,
+  },
+} satisfies Meta<typeof Modal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const ModalDemo = (props: React.ComponentProps<typeof Modal>) => {
+  const [open, setOpen] = useState(props.isShow)
+
+  useEffect(() => {
+    setOpen(props.isShow)
+  }, [props.isShow])
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show modal
+      </button>
+
+      <Modal
+        {...props}
+        isShow={open}
+        onClose={() => {
+          props.onClose?.()
+          setOpen(false)
+        }}
+      >
+        <div className="mt-6 space-y-4 text-sm text-gray-600">
+          <p>
+            Provide a descriptive name for this key so collaborators know its purpose. Restrict usage with scopes to limit access.
+          </p>
+          <div className="rounded-lg border border-dashed border-gray-200 bg-gray-50 p-4 text-xs text-gray-500">
+            Form fields and validation messaging would appear here. This placeholder keeps the story lightweight.
+          </div>
+        </div>
+        <div className="mt-8 flex justify-end gap-3">
+          <button
+            className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50"
+            onClick={() => setOpen(false)}
+          >
+            Cancel
+          </button>
+          <button className="rounded-md bg-primary-600 px-3 py-1.5 text-sm text-white hover:bg-primary-700">
+            Create key
+          </button>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <ModalDemo {...args} />,
+}
+
+export const HighPriorityOverflow: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    highPriority: true,
+    overflowVisible: true,
+    description: 'Demonstrates the modal configured to sit above dropdowns while letting the body content overflow.',
+    className: 'max-w-[540px]',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the modal with `highPriority` and `overflowVisible` enabled, useful when nested within complex surfaces.',
+      },
+    },
+  },
+}

web/app/components/base/modal/modal.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect, useState } from 'react'
+import Modal from './modal'
+
+const meta = {
+  title: 'Base/Dialog/RichModal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Full-featured modal with header, subtitle, customizable footer buttons, and optional extra action.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['sm', 'md'],
+      description: 'Defines the panel width.',
+    },
+    title: {
+      control: 'text',
+      description: 'Primary heading text.',
+    },
+    subTitle: {
+      control: 'text',
+      description: 'Secondary text below the title.',
+    },
+    confirmButtonText: {
+      control: 'text',
+      description: 'Label for the confirm button.',
+    },
+    cancelButtonText: {
+      control: 'text',
+      description: 'Label for the cancel button.',
+    },
+    showExtraButton: {
+      control: 'boolean',
+      description: 'Whether to render the extra button.',
+    },
+    extraButtonText: {
+      control: 'text',
+      description: 'Label for the extra button.',
+    },
+    extraButtonVariant: {
+      control: 'select',
+      options: ['primary', 'warning', 'secondary', 'secondary-accent', 'ghost', 'ghost-accent', 'tertiary'],
+      description: 'Visual style for the extra button.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables footer actions when true.',
+    },
+    footerSlot: {
+      control: false,
+    },
+    bottomSlot: {
+      control: false,
+    },
+    onClose: {
+      control: false,
+      description: 'Handler fired when the close icon or backdrop is clicked.',
+    },
+    onConfirm: {
+      control: false,
+      description: 'Handler fired when confirm is pressed.',
+    },
+    onCancel: {
+      control: false,
+      description: 'Handler fired when cancel is pressed.',
+    },
+    onExtraButtonClick: {
+      control: false,
+      description: 'Handler fired when the extra button is pressed.',
+    },
+    children: {
+      control: false,
+    },
+  },
+  args: {
+    size: 'sm',
+    title: 'Delete integration',
+    subTitle: 'Disabling this integration will revoke access tokens and webhooks.',
+    confirmButtonText: 'Delete integration',
+    cancelButtonText: 'Cancel',
+    showExtraButton: false,
+    extraButtonText: 'Disable temporarily',
+    extraButtonVariant: 'warning',
+    disabled: false,
+    onClose: () => console.log('Modal closed'),
+    onConfirm: () => console.log('Confirm pressed'),
+    onCancel: () => console.log('Cancel pressed'),
+    onExtraButtonClick: () => console.log('Extra button pressed'),
+  },
+} satisfies Meta<typeof Modal>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+type ModalProps = React.ComponentProps<typeof Modal>
+
+const ModalDemo = (props: ModalProps) => {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    if (props.disabled && open)
+      setOpen(false)
+  }, [props.disabled, open])
+
+  const {
+    onClose,
+    onConfirm,
+    onCancel,
+    onExtraButtonClick,
+    children,
+    ...rest
+  } = props
+
+  const handleClose = () => {
+    onClose?.()
+    setOpen(false)
+  }
+
+  const handleConfirm = () => {
+    onConfirm?.()
+    setOpen(false)
+  }
+
+  const handleCancel = () => {
+    onCancel?.()
+    setOpen(false)
+  }
+
+  const handleExtra = () => {
+    onExtraButtonClick?.()
+  }
+
+  return (
+    <div className="relative flex h-[480px] items-center justify-center bg-gray-100">
+      <button
+        className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+        onClick={() => setOpen(true)}
+      >
+        Show rich modal
+      </button>
+
+      {open && (
+        <Modal
+          {...rest}
+          onClose={handleClose}
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+          onExtraButtonClick={handleExtra}
+          children={children ?? (
+            <div className="space-y-4 text-sm text-gray-600">
+              <p>
+                Removing integrations immediately stops workflow automations related to this connection.
+                Make sure no scheduled jobs depend on this integration before proceeding.
+              </p>
+              <ul className="list-disc space-y-1 pl-4 text-xs text-gray-500">
+                <li>All API credentials issued by this integration will be revoked.</li>
+                <li>Historical logs remain accessible for auditing.</li>
+                <li>You can re-enable the integration later with fresh credentials.</li>
+              </ul>
+            </div>
+          )}
+        />
+      )}
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => <ModalDemo {...args} />,
+}
+
+export const WithExtraAction: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    showExtraButton: true,
+    extraButtonVariant: 'secondary',
+    extraButtonText: 'Disable only',
+    footerSlot: (
+      <span className="text-xs text-gray-400">Last synced 5 minutes ago</span>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Illustrates the optional extra button and footer slot for advanced workflows.',
+      },
+    },
+  },
+}
+
+export const MediumSized: Story = {
+  render: args => <ModalDemo {...args} />,
+  args: {
+    size: 'md',
+    subTitle: 'Use the larger width to surface forms with more fields or supporting descriptions.',
+    bottomSlot: (
+      <div className="border-t border-divider-subtle bg-components-panel-bg px-6 py-4 text-xs text-gray-500">
+        Need finer control? Configure automation rules in the integration settings page.
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows the medium sized panel and a populated `bottomSlot` for supplemental messaging.',
+      },
+    },
+  },
+}

web/app/components/base/new-audio-button/index.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useEffect } from 'react'
+import type { ComponentProps } from 'react'
+import AudioBtn from '.'
+import { ensureMockAudioManager } from '../../../../.storybook/utils/audio-player-manager.mock'
+
+ensureMockAudioManager()
+
+const StoryWrapper = (props: ComponentProps<typeof AudioBtn>) => {
+  useEffect(() => {
+    ensureMockAudioManager()
+  }, [])
+
+  return (
+    <div className="flex items-center justify-center space-x-3">
+      <AudioBtn {...props} />
+      <span className="text-xs text-gray-500">Audio toggle using ActionButton styling</span>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Button/NewAudioButton',
+  component: AudioBtn,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Updated audio playback trigger styled with `ActionButton`. Behaves like the legacy audio button but adopts the new button design system.',
+      },
+    },
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/apps/demo-app/text-to-audio',
+        params: { appId: 'demo-app' },
+      },
+    },
+  },
+  argTypes: {
+    id: {
+      control: 'text',
+      description: 'Message identifier used by the audio request.',
+    },
+    value: {
+      control: 'text',
+      description: 'Prompt or response text that will be converted to speech.',
+    },
+    voice: {
+      control: 'text',
+      description: 'Voice profile for the generated speech.',
+    },
+  },
+} satisfies Meta<typeof AudioBtn>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => <StoryWrapper {...args} />,
+  args: {
+    id: 'message-1',
+    value: 'Listen to the latest assistant message.',
+    voice: 'alloy',
+  },
+}

web/app/components/base/prompt-editor/index.stories.tsx

@@ -25,7 +25,7 @@ const PromptEditorMock = ({ value, onChange, placeholder, editable, compact, cla
 }
 
 const meta = {
-  title: 'Base/PromptEditor',
+  title: 'Base/Input/PromptEditor',
   component: PromptEditorMock,
   parameters: {
     layout: 'centered',

web/app/components/base/radio-card/index.stories.tsx

@@ -4,7 +4,7 @@ import { RiCloudLine, RiCpuLine, RiDatabase2Line, RiLightbulbLine, RiRocketLine,
 import RadioCard from '.'
 
 const meta = {
-  title: 'Base/RadioCard',
+  title: 'Base/Input/RadioCard',
   component: RadioCard,
   parameters: {
     layout: 'centered',

web/app/components/base/radio/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Radio from '.'
 
 const meta = {
-  title: 'Base/Radio',
+  title: 'Base/Input/Radio',
   component: Radio,
   parameters: {
     layout: 'centered',

web/app/components/base/search-input/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import SearchInput from '.'
 
 const meta = {
-  title: 'Base/SearchInput',
+  title: 'Base/Input/SearchInput',
   component: SearchInput,
   parameters: {
     layout: 'centered',

web/app/components/base/select/index.stories.tsx

@@ -4,7 +4,7 @@ import Select, { PortalSelect, SimpleSelect } from '.'
 import type { Item } from '.'
 
 const meta = {
-  title: 'Base/Select',
+  title: 'Base/Input/Select',
   component: SimpleSelect,
   parameters: {
     layout: 'centered',

web/app/components/base/slider/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Slider from '.'
 
 const meta = {
-  title: 'Base/Slider',
+  title: 'Base/Input/Slider',
   component: Slider,
   parameters: {
     layout: 'centered',

web/app/components/base/switch/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Switch from '.'
 
 const meta = {
-  title: 'Base/Switch',
+  title: 'Base/Input/Switch',
   component: Switch,
   parameters: {
     layout: 'centered',

web/app/components/base/tag-input/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import TagInput from '.'
 
 const meta = {
-  title: 'Base/TagInput',
+  title: 'Base/Input/TagInput',
   component: TagInput,
   parameters: {
     layout: 'centered',

web/app/components/base/textarea/index.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Textarea from '.'
 
 const meta = {
-  title: 'Base/Textarea',
+  title: 'Base/Input/Textarea',
   component: Textarea,
   parameters: {
     layout: 'centered',

web/app/components/base/voice-input/index.stories.tsx

@@ -81,7 +81,7 @@ const VoiceInputMock = ({ onConverted, onCancel }: any) => {
 }
 
 const meta = {
-  title: 'Base/VoiceInput',
+  title: 'Base/Input/VoiceInput',
   component: VoiceInputMock,
   parameters: {
     layout: 'centered',

web/app/components/base/with-input-validation/index.stories.tsx

@@ -63,7 +63,7 @@ const ValidatedUserCard = withValidation(UserCard, userSchema)
 const ValidatedProductCard = withValidation(ProductCard, productSchema)
 
 const meta = {
-  title: 'Base/WithInputValidation',
+  title: 'Base/Input/WithInputValidation',
   parameters: {
     layout: 'centered',
     docs: {