chore: directory migration - gateway→server, web→client/electron

client/electron/src/components/ConnectionIndicator.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { onSSEStatus, type SSEStatus } from '../api/sse';
+
+/**
+ * SSE 连接状态指示器。
+ *
+ * 实时性是 Agent 协作的核心体验：断线后用户以为系统正常，实际上通知已经停了。
+ * 一个小小的绿/黄/红点就能避免「Agent 没在动」的误判。
+ *
+ * 不做成弹窗或横幅 —— 那会打断正在进行的对话。一个点足够了：
+ * 会看它的人自然会看，不会看的人不需要被打扰。
+ */
+export function ConnectionIndicator() {
+  const [status, setStatus] = useState<SSEStatus>('connecting');
+
+  useEffect(() => {
+    const unsub = onSSEStatus(setStatus);
+    return unsub;
+  }, []);
+
+  const map: Record<SSEStatus, { color: string; title: string }> = {
+    connecting: { color: 'bg-yellow-400', title: '正在连接…' },
+    connected: { color: 'bg-green-500', title: '已连接' },
+    reconnecting: { color: 'bg-orange-400', title: '重连中…' },
+    disconnected: { color: 'bg-red-400', title: '已断开' },
+  };
+
+  const { color, title } = map[status] || map.disconnected;
+
+  return (
+    <div
+      className={`w-2 h-2 rounded-full ${color} shrink-0 transition-colors duration-300`}
+      title={title}
+      aria-label={title}
+    />
+  );
+}