feat(canvas): Custom extractor components, migrator, and MCP spec tools

Canvas Components:
- CustomExtractorNode.tsx: Node for custom Python extractors
- CustomExtractorPanel.tsx: Configuration panel for custom extractors
- ConnectionStatusIndicator.tsx: WebSocket status display
- atomizer-spec.ts: TypeScript types for AtomizerSpec v2.0

Config:
- migrator.py: Legacy config to AtomizerSpec v2.0 migration
- Updated __init__.py exports for config and extractors

MCP Tools:
- spec.ts: MCP tools for spec manipulation
- index.ts: Tool registration updates

atomizer-dashboard/frontend/src/components/canvas/ConnectionStatusIndicator.tsx

@@ -0,0 +1,49 @@
+/**
+ * ConnectionStatusIndicator - Visual indicator for WebSocket connection status.
+ */
+
+import { ConnectionStatus } from '../../hooks/useSpecWebSocket';
+
+interface ConnectionStatusIndicatorProps {
+  status: ConnectionStatus;
+  className?: string;
+}
+
+/**
+ * Visual indicator for WebSocket connection status.
+ * Can be used in the canvas UI to show sync state.
+ */
+export function ConnectionStatusIndicator({
+  status,
+  className = '',
+}: ConnectionStatusIndicatorProps) {
+  const statusConfig = {
+    disconnected: {
+      color: 'bg-gray-500',
+      label: 'Disconnected',
+    },
+    connecting: {
+      color: 'bg-yellow-500 animate-pulse',
+      label: 'Connecting...',
+    },
+    connected: {
+      color: 'bg-green-500',
+      label: 'Connected',
+    },
+    reconnecting: {
+      color: 'bg-yellow-500 animate-pulse',
+      label: 'Reconnecting...',
+    },
+  };
+
+  const config = statusConfig[status];
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <div className={`w-2 h-2 rounded-full ${config.color}`} />
+      <span className="text-xs text-dark-400">{config.label}</span>
+    </div>
+  );
+}
+
+export default ConnectionStatusIndicator;