<!-- source-hash: a6c222ce8e1ab58308ac9ed1a6a4776e -->
A scrollable log viewer component that renders a list of `LogEntry` items with severity indicators, timestamps, and optional tool icons, connected by visual timeline connectors.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `LogsList` | `React.ForwardRefExoticComponent` | Main container that renders a scrollable, bordered list of log entries |
| `LogCard` | `React.FC` (internal) | Individual log row with severity dot, title, formatted timestamp, and optional tool icon |
| `formatTimestamp` | `function` (internal) | Formats a `string \| Date` into `YYYY/MM/DD,HH:mm` display format |

### `LogsList` Props (`LogsListProps`)

| Prop | Default | Description |
|------|---------|-------------|
| `logs` | — | Array of `LogEntry` items to display |
| `maxHeight` | `'400px'` | Container max height; use `'100%'` for full-height flex layout |
| `showConnector` | `true` | Renders vertical timeline connector lines between entries |
| `onLogClick` | — | Callback fired with the clicked `LogEntry` |
| `loading` | `false` | Shows a loading state placeholder |
| `emptyMessage` | `'No logs to display'` | Message shown when `logs` is empty |
| `className` | — | Additional Tailwind classes for the container |

## Usage Example

```typescript
import { LogsList } from './components/logs-list'
import { LogEntry } from './types/logs.types'

const logs: LogEntry[] = [
  {
    id: '1',
    title: 'Agent task completed successfully',
    severity: 'info',
    timestamp: new Date(),
    toolType: 'bash',
  },
  {
    id: '2',
    title: 'Connection timeout detected',
    severity: 'warning',
    timestamp: '2024-01-15T10:30:00Z',
  },
]

export default function LogsPanel() {
  return (
    <LogsList
      logs={logs}
      maxHeight="500px"
      showConnector={true}
      onLogClick={(log) => console.log('Selected:', log.id)}
    />
  )
}
```