feat: [US-045] - Supabase Realtime channel and connection management

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

src/components/editor/Toolbar.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import type { ConnectionState } from '@/lib/collaboration/realtime'
+
 type ToolbarProps = {
   onAddDialogue: () => void
   onAddChoice: () => void
@@ -8,6 +10,21 @@ type ToolbarProps = {
   onExport: () => void
   onImport: () => void
   onProjectSettings: () => void
+  connectionState?: ConnectionState
+}
+
+const connectionLabel: Record<ConnectionState, string> = {
+  connecting: 'Connecting…',
+  connected: 'Connected',
+  disconnected: 'Disconnected',
+  reconnecting: 'Reconnecting…',
+}
+
+const connectionColor: Record<ConnectionState, string> = {
+  connecting: 'bg-yellow-400',
+  connected: 'bg-green-400',
+  disconnected: 'bg-red-400',
+  reconnecting: 'bg-yellow-400',
 }
 
 export default function Toolbar({
@@ -18,6 +35,7 @@ export default function Toolbar({
   onExport,
   onImport,
   onProjectSettings,
+  connectionState,
 }: ToolbarProps) {
   return (
     <div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800">
@@ -46,6 +64,14 @@ export default function Toolbar({
       </div>
 
       <div className="flex items-center gap-2">
+        {connectionState && (
+          <div className="flex items-center gap-1.5 mr-2" title={connectionLabel[connectionState]}>
+            <span className={`inline-block h-2.5 w-2.5 rounded-full ${connectionColor[connectionState]}${connectionState === 'reconnecting' ? ' animate-pulse' : ''}`} />
+            <span className="text-xs text-zinc-500 dark:text-zinc-400">
+              {connectionLabel[connectionState]}
+            </span>
+          </div>
+        )}
         <button
           onClick={onProjectSettings}
           className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"