Component Architecture

features/chat/
├── chat.tsx                      # Main orchestrator
├── chat-conversation.tsx         # Message list with virtualization
├── chat-header.tsx               # Title, theme toggle, clear button
├── chat-input-area.tsx           # Input controls and quick actions
├── chat-message.tsx              # Individual message renderer
├── chat-empty-state.tsx          # Welcome screen
├── chat-quick-actions.tsx        # Predefined prompts
├── chat-status-bar.tsx           # Status indicators
├── chat-message-skeleton.tsx     # Loading skeleton
├── cards/                        # Result card components
│   ├── checklist-result-card.tsx
│   └── summary-result-card.tsx
├── hooks/                        # Chat-specific hooks
│   ├── use-chat-actions.ts      # Regenerate, copy, clear
│   ├── use-chat-keyboard.ts     # Keyboard shortcuts
│   ├── use-chat-submit.ts       # Submit handling
│   ├── use-file-submission.ts   # File upload logic
│   └── use-image-analysis.ts    # Image analysis trigger
├── types/                        # Type definitions
└── utils.ts                      # Helper functions

interface ChatInputAreaProps {
  textareaRef: React.RefObject<HTMLTextAreaElement>;
  input: string;
  onInputChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  onSubmit: (data: { text: string; files: File[] }) => void;
  canSend: boolean;
  status: ChatStatus;
  isAnalyzingFile: boolean;
  onQuickAction: (prompt: string) => void;
  voiceProps: VoiceButtonProps;
}

<div className={cn('flex gap-3', message.role === 'user' ? 'justify-end' : 'justify-start')}>
  {message.role === 'assistant' && <Avatar>AI</Avatar>}
  
  <div className={cn('rounded-lg p-3', roleClasses)}>
    <MessageContent content={message.content} />
    <MessageActions onCopy={handleCopy} onRegenerate={handleRegenerate} />
  </div>
  
  {message.role === 'user' && <Avatar>U</Avatar>}
</div>

interface GeneratedChecklist {
  title: string;
  description: string;
  items: ChecklistItem[];
  estimatedDuration: string;
  requiredTools: string[];
  safetyNotes: string[];
}

interface ChecklistItem {
  step: number;
  task: string;
  category: 'inspection' | 'cleaning' | 'lubrication' | 'testing' | 'documentation';
  critical: boolean;
}

voice/
├── voice-button.tsx              # Recording toggle button
├── voice-command-mode.tsx        # Command-specific UI
├── audio-waveform.tsx            # Visual feedback
├── command-preview.tsx           # Command confirmation
├── command-status-indicator.tsx  # Status display
└── hooks/
    ├── use-voice-system.ts      # Core voice logic
    ├── use-voice-command-flow.ts # Command state machine
    └── use-voice-navigation.ts   # Keyboard shortcuts

<button
  onClick={toggleListening}
  className={cn(
    'rounded-full p-3 transition-colors',
    isListening && 'animate-pulse bg-red-500',
    isProcessing && 'bg-yellow-500',
    !isListening && !isProcessing && 'bg-blue-500 hover:bg-blue-600'
  )}
>
  {isListening ? <MicIcon /> : isProcessing ? <LoaderIcon /> : <MicOffIcon />}
</button>

// Card compound component
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content here
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

<DataTable
  data={items}
  renderRow={(item) => (
    <TableRow key={item.id}>
      <TableCell>{item.name}</TableCell>
    </TableRow>
  )}
/>

// In component
function ChatInput() {
  const { input, setInput, handleSubmit } = useChatSubmit();
  const { isListening, toggleListening } = useVoiceInput();
  
  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={toggleListening}>Voice</button>
    </form>
  );
}

// app/components/shared/error-boundary.tsx
export class ErrorBoundary extends React.Component {
  componentDidCatch(error: Error) {
    logger.error('Component error', error);
  }
  
  render() {
    if (this.state.hasError) {
      return <ErrorFallback />;
    }
    return this.props.children;
  }
}

<div className="flex flex-col gap-4 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-md">
  <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
    Title
  </h2>
  <p className="text-gray-600 dark:text-gray-400">
    Description
  </p>
</div>

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  /* ... */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... */
}

<div className="bg-background text-foreground">
  <button className="bg-primary text-primary-foreground">
    Themed Button
  </button>
</div>

import { render, screen } from '@testing-library/react';
import { Button } from '@/app/components/ui/button';

test('renders button with text', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

test('calls onClick when clicked', async () => {
  const onClick = vi.fn();
  render(<Button onClick={onClick}>Click</Button>);
  await userEvent.click(screen.getByText('Click'));
  expect(onClick).toHaveBeenCalledOnce();
});

test('sends message and receives response', async () => {
  render(<Chat />);
  
  const input = screen.getByRole('textbox');
  await userEvent.type(input, 'Hello');
  
  const sendButton = screen.getByRole('button', { name: /send/i });
  await userEvent.click(sendButton);
  
  expect(await screen.findByText(/Hola/i)).toBeInTheDocument();
});