feat(bd-b0c): Add WorkerDetail component to web frontend

- Create src/web/frontend/src/components/WorkerDetail.tsx as dedicated component
- Port TUI WorkerDetail functionality to React web frontend
- Features:
  - Worker ID and status with status icon
  - Activity statistics (event count, current tool)
  - Timing information (last seen)
  - Recent events list (last 10 events)
  - Collision warning with affected files
  - Close button to deselect worker
- Update App.tsx to use new WorkerDetail component
- Add comprehensive CSS styles for new component

Co-Authored-By: Claude Worker <noreply@anthropic.com>

src/web/frontend/src/App.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { LogEvent, WorkerInfo, WebSocketMessage } from './types';
 import WorkerGrid from './components/WorkerGrid';
 import ActivityStream from './components/ActivityStream';
+import WorkerDetail from './components/WorkerDetail';
 
 const App: React.FC = () => {
   const [workers, setWorkers] = useState<WorkerInfo[]>([]);
@@ -106,47 +107,11 @@ const App: React.FC = () => {
         />
 
         {selectedWorkerInfo && (
-          <aside className="worker-detail">
-            <h2>{selectedWorkerInfo.id}</h2>
-
-            <div className="detail-section">
-              <h3>Status</h3>
-              <div className="detail-row">
-                <span className="detail-label">State</span>
-                <span className={`detail-value worker-status ${selectedWorkerInfo.status}`}>
-                  {selectedWorkerInfo.status}
-                </span>
-              </div>
-              <div className="detail-row">
-                <span className="detail-label">Events</span>
-                <span className="detail-value">{selectedWorkerInfo.eventCount}</span>
-              </div>
-              <div className="detail-row">
-                <span className="detail-label">Current Tool</span>
-                <span className="detail-value">{selectedWorkerInfo.currentTool || '-'}</span>
-              </div>
-              <div className="detail-row">
-                <span className="detail-label">Last Seen</span>
-                <span className="detail-value">
-                  {new Date(selectedWorkerInfo.lastSeen).toLocaleTimeString()}
-                </span>
-              </div>
-            </div>
-
-            <div className="detail-section">
-              <h3>Recent Events</h3>
-              {selectedWorkerInfo.recentEvents.slice(-5).map((event, i) => (
-                <div key={i} className="detail-row">
-                  <span className={`detail-label event-level ${event.level}`}>
-                    {event.level}
-                  </span>
-                  <span className="detail-value" style={{ fontSize: '0.75rem', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                    {event.message.slice(0, 50)}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </aside>
+          <WorkerDetail
+            worker={selectedWorkerInfo}
+            onClose={() => setSelectedWorker(null)}
+            allWorkerEvents={selectedWorker ? filteredEvents : undefined}
+          />
         )}
       </main>
     </div>

src/web/frontend/src/components/WorkerDetail.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { WorkerInfo, LogEvent } from '../types';
+
+interface WorkerDetailProps {
+  /** The worker to display details for */
+  worker: WorkerInfo;
+
+  /** Callback when the detail panel should close */
+  onClose: () => void;
+
+  /** Optional: all events for this worker (if provided, shows more history) */
+  allWorkerEvents?: LogEvent[];
+}
+
+/**
+ * WorkerDetail Component
+ *
+ * Displays detailed information about a selected worker including:
+ * - Worker ID and status
+ * - Activity statistics (event count, current tool)
+ * - Timing information (last seen, uptime)
+ * - Recent events list
+ * - Collision information if applicable
+ */
+const WorkerDetail: React.FC<WorkerDetailProps> = ({
+  worker,
+  onClose,
+  allWorkerEvents,
+}) => {
+  const formatLastSeen = (timestamp: string): string => {
+    const diff = Date.now() - new Date(timestamp).getTime();
+    const seconds = Math.floor(diff / 1000);
+    if (seconds < 60) return `${seconds}s ago`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return `${hours}h ${mins}m ago`;
+  };
+
+  const formatTime = (timestamp: string): string => {
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  const getStatusIcon = (): string => {
+    switch (worker.status) {
+      case 'active':
+        return '●';
+      case 'idle':
+        return '○';
+      case 'error':
+        return '✗';
+      default:
+        return '?';
+    }
+  };
+
+  const eventsToShow = allWorkerEvents || worker.recentEvents || [];
+
+  return (
+    <aside className="worker-detail">
+      {/* Header with close button */}
+      <div className="worker-detail-header">
+        <h2>
+          <span className={`worker-status-icon ${worker.status}`}>
+            {getStatusIcon()}
+          </span>
+          {worker.id}
+        </h2>
+        <button
+          className="worker-detail-close"
+          onClick={onClose}
+          title="Close details"
+        >
+          ✕
+        </button>
+      </div>
+
+      {/* Collision warning if applicable */}
+      {worker.hasCollision && (
+        <div className="collision-alert">
+          <span className="collision-alert-icon">⚠️</span>
+          <span>File collision detected!</span>
+          {worker.activeFiles && worker.activeFiles.length > 0 && (
+            <div className="collision-files">
+              {worker.activeFiles.slice(0, 3).map((file, i) => (
+                <span key={i} className="collision-file" title={file}>
+                  {file.split('/').pop()}
+                </span>
+              ))}
+              {worker.activeFiles.length > 3 && (
+                <span className="collision-more">
+                  +{worker.activeFiles.length - 3} more
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Status Section */}
+      <div className="detail-section">
+        <h3>Status</h3>
+        <div className="detail-row">
+          <span className="detail-label">State</span>
+          <span className={`detail-value worker-status ${worker.status}`}>
+            {worker.status}
+          </span>
+        </div>
+        <div className="detail-row">
+          <span className="detail-label">Events</span>
+          <span className="detail-value">{worker.eventCount}</span>
+        </div>
+        <div className="detail-row">
+          <span className="detail-label">Current Tool</span>
+          <span className="detail-value tool-name">
+            {worker.currentTool || '-'}
+          </span>
+        </div>
+        <div className="detail-row">
+          <span className="detail-label">Last Seen</span>
+          <span className="detail-value" title={worker.lastSeen}>
+            {formatLastSeen(worker.lastSeen)}
+          </span>
+        </div>
+      </div>
+
+      {/* Recent Events Section */}
+      <div className="detail-section">
+        <h3>Recent Events ({eventsToShow.length})</h3>
+        {eventsToShow.length === 0 ? (
+          <div className="detail-empty">No events recorded</div>
+        ) : (
+          <div className="detail-events">
+            {eventsToShow.slice(-10).map((event, i) => (
+              <div key={i} className="detail-event-item">
+                <span className="detail-event-time">
+                  {formatTime(event.timestamp)}
+                </span>
+                <span className={`detail-event-level ${event.level}`}>
+                  {event.level.slice(0, 3).toUpperCase()}
+                </span>
+                <span className="detail-event-msg" title={event.message}>
+                  {event.message.length > 35
+                    ? event.message.slice(0, 35) + '...'
+                    : event.message}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Tool Activity Section */}
+      {worker.currentTool && (
+        <div className="detail-section">
+          <h3>Current Activity</h3>
+          <div className="tool-activity">
+            <span className="tool-name">{worker.currentTool}</span>
+          </div>
+        </div>
+      )}
+    </aside>
+  );
+};
+
+export default WorkerDetail;

src/web/frontend/src/index.css

@@ -262,11 +262,95 @@ body {
   border-left: 1px solid var(--bg-tertiary);
   padding: 1rem;
   overflow-y: auto;
+  min-width: 280px;
+  max-width: 350px;
 }
 
-.worker-detail h2 {
-  font-size: 1rem;
+.worker-detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--bg-tertiary);
+}
+
+.worker-detail-header h2 {
+  font-size: 1rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.worker-detail-close {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 1rem;
+  transition: all 0.2s;
+}
+
+.worker-detail-close:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.worker-status-icon {
+  font-size: 0.75rem;
+}
+
+.worker-status-icon.active {
+  color: var(--success);
+}
+
+.worker-status-icon.idle {
+  color: var(--warning);
+}
+
+.worker-status-icon.error {
+  color: var(--error);
+}
+
+.collision-alert {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(255, 152, 0, 0.1);
+  border: 1px solid rgba(255, 152, 0, 0.3);
+  border-radius: 6px;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+.collision-alert-icon {
+  margin-right: 0.25rem;
+}
+
+.collision-files {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.collision-file {
+  background: var(--bg-tertiary);
+  padding: 0.125rem 0.375rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+  font-family: 'SF Mono', Monaco, monospace;
+}
+
+.collision-more {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
 }
 
 .detail-section {
@@ -296,6 +380,73 @@ body {
   font-weight: 500;
 }
 
+.detail-value.tool-name {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.8125rem;
+  color: #00bcd4;
+}
+
+.detail-empty {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  text-align: center;
+  padding: 1rem;
+}
+
+.detail-events {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.75rem;
+}
+
+.detail-event-item {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  border-bottom: 1px solid var(--bg-tertiary);
+}
+
+.detail-event-item:last-child {
+  border-bottom: none;
+}
+
+.detail-event-time {
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  width: 60px;
+}
+
+.detail-event-level {
+  flex-shrink: 0;
+  width: 30px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.detail-event-level.debug { color: var(--text-secondary); }
+.detail-event-level.info { color: var(--info); }
+.detail-event-level.warn { color: var(--warning); }
+.detail-event-level.error { color: var(--error); }
+
+.detail-event-msg {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+}
+
+.tool-activity {
+  background: var(--bg-tertiary);
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+}
+
+.tool-activity .tool-name {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.875rem;
+  color: #00bcd4;
+}
+
 .empty-state {
   display: flex;
   flex-direction: column;