♻️ refactor(web): consolidate design-system primitives and responsive data views

web/default/src/features/playground/components/chat/playground-empty-state.tsx

@@ -25,7 +25,7 @@ import {
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/design-system/button'
 
 type PlaygroundEmptyStateProps = {
   onSelectPrompt: (prompt: string) => void
@@ -67,7 +67,7 @@ export function PlaygroundEmptyState({
 
             return (
               <Button
-                className='h-auto min-h-11 justify-start gap-2 px-3 py-2.5 text-left whitespace-normal'
+                className='h-auto min-h-11 justify-start gap-2 px-3 py-2.5 text-left whitespace-normal sm:h-auto'
                 key={text}
                 onClick={() => onSelectPrompt(prompt)}
                 variant='outline'

web/default/src/features/playground/components/input/playground-parameter-panel.tsx

@@ -20,8 +20,8 @@ import { SlidersHorizontalIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 import { PromptInputButton } from '@/components/ai-elements/prompt-input'
-import { Badge } from '@/components/ui/badge'
-import { Input } from '@/components/ui/input'
+import { Input } from '@/components/design-system/input'
+import { StatusBadge } from '@/components/status-badge'
 import {
   Popover,
   PopoverContent,
@@ -123,12 +123,12 @@ function PlaygroundParameterContent({
                   >
                     {t(control.labelKey)}
                   </label>
-                  <Badge
-                    className='h-5 max-w-24 shrink-0 px-1.5 font-mono text-xs'
-                    variant='outline'
+                  <StatusBadge
+                    appearance='outline'
+                    className='max-w-24 shrink-0'
                   >
                     {t(getParameterControlValueText(control.key, value))}
-                  </Badge>
+                  </StatusBadge>
                 </div>
                 <p className='text-muted-foreground text-xs leading-4'>
                   {t(control.descriptionKey)}
@@ -249,7 +249,6 @@ export function PlaygroundParameterPanel(props: PlaygroundParameterPanelProps) {
       <PopoverContent
         align='start'
         className='w-[22rem] max-w-[calc(100vw-2rem)] gap-3 p-3'
-        collisionPadding={8}
         side='top'
         sideOffset={8}
       >

web/default/src/features/playground/components/message/message-action-button.tsx

@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import type { LucideIcon } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/design-system/button'
 import {
   Tooltip,
   TooltipContent,

web/default/src/features/playground/components/message/message-actions.tsx

@@ -29,7 +29,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/design-system/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -185,7 +185,7 @@ export function MessageActions({
             render={
               <Button
                 aria-label={t('Open menu')}
-                className='data-popup-open:bg-muted text-muted-foreground hover:text-foreground size-11'
+                className='data-popup-open:bg-muted text-muted-foreground hover:text-foreground'
                 size='icon'
                 variant='ghost'
               />

web/default/src/features/playground/components/message/message-error.tsx

@@ -20,8 +20,8 @@ For commercial licensing, please contact support@quantumnous.com
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { Button } from '@/components/design-system/button'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { Button } from '@/components/ui/button'
 import { useAuthStore } from '@/stores/auth-store'
 
 import {
@@ -70,7 +70,6 @@ export function MessageError({
           {errorState.showSettingsLink && (
             <Button
               variant='outline'
-              size='sm'
               onClick={() => window.open(MODEL_PRICING_SETTINGS_PATH, '_blank')}
             >
               <Settings className='mr-1 h-3.5 w-3.5' />

web/default/src/features/playground/components/message/playground-message-editor.tsx

@@ -20,7 +20,7 @@ import { Check, RotateCcw, Send, X } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 import { CodeBlockEditor } from '@/components/ai-elements/code-block'
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/design-system/button'
 
 import { getMessageEditorState } from '../../lib'
 import type { Message } from '../../types'