feat: add Sheet component for bottom sheet UI with drag-to-dismiss and snap points

test: implement DialogStyleContext tests for preference management and style recommendations

test: create tests for useAutoSelection hook, including countdown and pause functionality

feat: implement useAutoSelection hook for enhanced auto-selection with sound notifications

feat: create Zustand store for managing issue submission wizard state

feat: add Zod validation schemas for issue-related API requests

feat: implement issue service for CRUD operations and validation handling

feat: define TypeScript types for issue submission and management

ccw/frontend/src/components/layout/A2UIButton.tsx

@@ -0,0 +1,53 @@
+// ========================================
+// A2UI Button Component
+// ========================================
+// Quick action button for A2UI dialog in toolbar
+
+import { useIntl } from 'react-intl';
+import { MessageSquare } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { useDialogStyleContext } from '@/contexts/DialogStyleContext';
+import { cn } from '@/lib/utils';
+
+interface A2UIButtonProps {
+  className?: string;
+  compact?: boolean;
+}
+
+export function A2UIButton({ className, compact = false }: A2UIButtonProps) {
+  const { formatMessage } = useIntl();
+  const { preferences } = useDialogStyleContext();
+
+  // Don't render if hidden in preferences
+  if (!preferences.showA2UIButtonInToolbar) {
+    return null;
+  }
+
+  const handleClick = () => {
+    // Trigger A2UI quick action - this would typically open a dialog
+    // For now, we'll just log the action
+    console.log('[A2UIButton] Quick action triggered');
+  };
+
+  return (
+    <Button
+      variant="default"
+      size={compact ? 'icon' : 'sm'}
+      onClick={handleClick}
+      className={cn(
+        'gap-2 bg-primary text-primary-foreground hover:bg-primary/90',
+        className
+      )}
+      title={formatMessage({ id: 'toolbar.a2ui.quickAction', defaultMessage: 'A2UI Quick Action' })}
+    >
+      <MessageSquare className="h-4 w-4" />
+      {!compact && (
+        <span className="hidden sm:inline">
+          {formatMessage({ id: 'toolbar.a2ui.button', defaultMessage: 'A2UI' })}
+        </span>
+      )}
+    </Button>
+  );
+}
+
+export default A2UIButton;

ccw/frontend/src/components/layout/Header.tsx

@@ -25,6 +25,7 @@ import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { useTheme } from '@/hooks';
 import { WorkspaceSelector } from '@/components/workspace/WorkspaceSelector';
+import { A2UIButton } from '@/components/layout/A2UIButton';
 import { useCliStreamStore, selectActiveExecutionCount } from '@/stores/cliStreamStore';
 import { useNotificationStore } from '@/stores';
 import { useTerminalPanelStore, selectTerminalCount } from '@/stores/terminalPanelStore';
@@ -78,6 +79,9 @@ export function Header({
           <span className="hidden sm:inline">{formatMessage({ id: 'navigation.header.brand' })}</span>
           <span className="sm:hidden">{formatMessage({ id: 'navigation.header.brandShort' })}</span>
         </Link>
+
+        {/* A2UI Quick Action Button */}
+        <A2UIButton />
       </div>
 
       {/* Right side - Actions */}

ccw/frontend/src/components/layout/index.ts

@@ -9,6 +9,8 @@ export type { AppShellProps } from './AppShell';
 export { Header } from './Header';
 export type { HeaderProps } from './Header';
 
+export { A2UIButton } from './A2UIButton';
+
 export { Sidebar } from './Sidebar';
 export type { SidebarProps } from './Sidebar';