@brainpilot/web 0.0.3 → 0.0.5

package/src/contexts/PreferencesContext.tsx

@@ -0,0 +1,125 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { setActiveLocale } from "../i18n/translate";
+
+type ThemePreference = "light" | "dark" | "system";
+
+interface PreferencesState {
+  theme: ThemePreference;
+  resolvedTheme: "light" | "dark";
+  language: "zh-CN" | "en-US";
+  security: {
+    confirmDangerousActions: boolean;
+    rememberSession: boolean;
+  };
+  notifications: {
+    agentDone: boolean;
+    errors: boolean;
+  };
+}
+
+interface PreferencesContextValue extends PreferencesState {
+  setTheme: (theme: ThemePreference) => void;
+  setLanguage: (language: PreferencesState["language"]) => void;
+  setSecurity: (security: PreferencesState["security"]) => void;
+  setNotifications: (notifications: PreferencesState["notifications"]) => void;
+}
+
+const STORAGE_KEY = "new-ui-preferences";
+
+const defaultPreferences: PreferencesState = {
+  theme: "light",
+  resolvedTheme: "light",
+  language: "zh-CN",
+  security: {
+    confirmDangerousActions: true,
+    rememberSession: true,
+  },
+  notifications: {
+    agentDone: true,
+    errors: true,
+  },
+};
+
+const PreferencesContext = createContext<PreferencesContextValue | null>(null);
+
+function loadPreferences(): PreferencesState {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (!stored) {
+    return defaultPreferences;
+  }
+  try {
+    const parsed = JSON.parse(stored) as Partial<PreferencesState>;
+    return {
+      ...defaultPreferences,
+      ...parsed,
+      security: { ...defaultPreferences.security, ...parsed.security },
+      notifications: { ...defaultPreferences.notifications, ...parsed.notifications },
+      resolvedTheme: defaultPreferences.resolvedTheme,
+    };
+  } catch {
+    return defaultPreferences;
+  }
+}
+
+function resolveTheme(theme: ThemePreference): "light" | "dark" {
+  if (theme === "system") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return theme;
+}
+
+export function PreferencesProvider({ children }: { children: ReactNode }) {
+  const [preferences, setPreferences] = useState<PreferencesState>(() => {
+    const loaded = loadPreferences();
+    return { ...loaded, resolvedTheme: resolveTheme(loaded.theme) };
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.dataset.theme = preferences.resolvedTheme;
+    root.lang = preferences.language;
+    setActiveLocale(preferences.language);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ ...preferences, resolvedTheme: undefined }));
+  }, [preferences]);
+
+  useEffect(() => {
+    if (preferences.theme !== "system") {
+      return;
+    }
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const listener = () => setPreferences((current) => ({ ...current, resolvedTheme: resolveTheme(current.theme) }));
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [preferences.theme]);
+
+  const setTheme = useCallback((theme: ThemePreference) => {
+    setPreferences((current) => ({ ...current, theme, resolvedTheme: resolveTheme(theme) }));
+  }, []);
+
+  const setLanguage = useCallback((language: PreferencesState["language"]) => {
+    setPreferences((current) => ({ ...current, language }));
+  }, []);
+
+  const setSecurity = useCallback((security: PreferencesState["security"]) => {
+    setPreferences((current) => ({ ...current, security }));
+  }, []);
+
+  const setNotifications = useCallback((notifications: PreferencesState["notifications"]) => {
+    setPreferences((current) => ({ ...current, notifications }));
+  }, []);
+
+  const value = useMemo(
+    () => ({ ...preferences, setTheme, setLanguage, setSecurity, setNotifications }),
+    [preferences, setTheme, setLanguage, setSecurity, setNotifications],
+  );
+
+  return <PreferencesContext.Provider value={value}>{children}</PreferencesContext.Provider>;
+}
+
+export function usePreferences() {
+  const value = useContext(PreferencesContext);
+  if (!value) {
+    throw new Error("usePreferences must be used within PreferencesProvider");
+  }
+  return value;
+}

package/src/contexts/SSEContext.tsx

@@ -0,0 +1,175 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { runtimeConfig } from "../config";
+import { WebSocketEvent, normalizeWebSocketEvent } from "../contracts/backend";
+import { getSSEUrl } from "../utils/api";
+import { tg } from "../i18n/translate";
+import { useAuth } from "./AuthContext";
+import { useSandbox } from "./SandboxContext";
+
+type ConnectionStatus = "idle" | "connecting" | "open" | "error";
+
+interface SSEContextValue {
+  /** Open (or reuse) an SSE stream for a session. */
+  connectSession: (sessionId: string) => void;
+  /** Close the SSE stream for a session. */
+  disconnectSession: (sessionId: string) => void;
+  /** Pending event queue per session (drained by consumer). */
+  queueRef: React.RefObject<Map<string, WebSocketEvent[]>>;
+  /** Tick counter — increments when new events arrive. */
+  tick: number;
+  /** Connection status per session. */
+  connections: Map<string, ConnectionStatus>;
+}
+
+const SSEContext = createContext<SSEContextValue | null>(null);
+
+const RECONNECT_BASE_MS = 3000;
+const RECONNECT_MAX_MS = 30000;
+
+interface SessionConn {
+  source: EventSource;
+  reconnectAttempt: number;
+  reconnectTimer: number | null;
+  /** Whether disconnectSession was called — disable auto-reconnect. */
+  manuallyClosed: boolean;
+}
+
+export function SSEProvider({ children }: { children: ReactNode }) {
+  const { isAuthReady } = useAuth();
+  const { currentSandbox } = useSandbox();
+  const connsRef = useRef<Map<string, SessionConn>>(new Map());
+  const queueRef = useRef<Map<string, WebSocketEvent[]>>(new Map());
+  const [tick, setTick] = useState(0);
+  const [connections, setConnections] = useState<Map<string, ConnectionStatus>>(new Map());
+
+  const setStatus = useCallback((sessionId: string, status: ConnectionStatus) => {
+    setConnections((prev) => {
+      const next = new Map(prev);
+      next.set(sessionId, status);
+      return next;
+    });
+  }, []);
+
+  const openConnection = useCallback((sessionId: string) => {
+    if (runtimeConfig.useMockBackend) {
+      setStatus(sessionId, "open");
+      return;
+    }
+    const conn = connsRef.current.get(sessionId);
+    if (conn && !conn.manuallyClosed && conn.source.readyState !== EventSource.CLOSED) {
+      // Already connecting/open — nothing to do.
+      return;
+    }
+
+    console.log(`[SSE] openConnection: ${sessionId}`);
+    setStatus(sessionId, "connecting");
+    const source = new EventSource(getSSEUrl(sessionId));
+
+    const entry: SessionConn = {
+      source,
+      reconnectAttempt: 0,
+      reconnectTimer: null,
+      manuallyClosed: false,
+    };
+    connsRef.current.set(sessionId, entry);
+
+    source.onopen = () => {
+      entry.reconnectAttempt = 0;
+      console.log(`[SSE] onopen: ${sessionId}`);
+      setStatus(sessionId, "open");
+    };
+
+    source.onmessage = (ev) => {
+      try {
+        const parsed = JSON.parse(ev.data);
+        const normalized = normalizeWebSocketEvent(parsed);
+        // Drop heartbeats — they exist only to keep the connection alive.
+        if (normalized.type === "PING" || normalized.type === "ping") return;
+        console.log(`[SSE] onmessage: ${sessionId} type=${normalized.type}`, normalized);
+        const queue = queueRef.current.get(sessionId) || [];
+        queue.push(normalized);
+        queueRef.current.set(sessionId, queue);
+        setTick((t) => t + 1);
+      } catch {
+        console.error(`[SSE] onmessage: ${sessionId} 解析失败`, ev.data);
+        // Malformed payload — surface as a synthetic error event for the UI.
+        const queue = queueRef.current.get(sessionId) || [];
+        queue.push({
+          type: "error",
+          sessionId,
+          data: { error: { message: tg("ctx.sse.parseError") } },
+        });
+        queueRef.current.set(sessionId, queue);
+        setTick((t) => t + 1);
+      }
+    };
+
+    source.onerror = () => {
+      console.error(`[SSE] onerror: ${sessionId}, reconnectAttempt=${entry.reconnectAttempt + 1}`);
+      setStatus(sessionId, "error");
+      source.close();
+      if (entry.manuallyClosed) return;
+      // Exponential backoff for auto-reconnect.
+      entry.reconnectAttempt += 1;
+      const delay = Math.min(
+        RECONNECT_BASE_MS * Math.pow(2, entry.reconnectAttempt - 1),
+        RECONNECT_MAX_MS,
+      );
+      console.log(`[SSE] reconnect: ${sessionId} in ${delay}ms`);
+      entry.reconnectTimer = window.setTimeout(() => {
+        entry.reconnectTimer = null;
+        openConnection(sessionId);
+      }, delay);
+    };
+  }, [setStatus]);
+
+  const connectSession = useCallback((sessionId: string) => {
+    console.log(`[SSE] connectSession: ${sessionId}, authReady=${isAuthReady}, sandbox=${currentSandbox?.status}`);
+    if (!isAuthReady) return;
+    if (!runtimeConfig.useMockBackend && currentSandbox?.status !== "running") return;
+    openConnection(sessionId);
+  }, [isAuthReady, currentSandbox?.status, openConnection]);
+
+  const disconnectSession = useCallback((sessionId: string) => {
+    console.log(`[SSE] disconnectSession: ${sessionId}`);
+    const entry = connsRef.current.get(sessionId);
+    if (!entry) return;
+    entry.manuallyClosed = true;
+    if (entry.reconnectTimer !== null) {
+      window.clearTimeout(entry.reconnectTimer);
+      entry.reconnectTimer = null;
+    }
+    entry.source.close();
+    connsRef.current.delete(sessionId);
+    setStatus(sessionId, "idle");
+  }, [setStatus]);
+
+  // On unmount or auth/sandbox change, tear down every connection.
+  useEffect(() => {
+    return () => {
+      for (const [, entry] of connsRef.current) {
+        entry.manuallyClosed = true;
+        if (entry.reconnectTimer !== null) {
+          window.clearTimeout(entry.reconnectTimer);
+        }
+        entry.source.close();
+      }
+      connsRef.current.clear();
+    };
+  }, [isAuthReady, currentSandbox?.status]);
+
+  const value = useMemo<SSEContextValue>(
+    () => ({ connectSession, disconnectSession, queueRef, tick, connections }),
+    [connectSession, disconnectSession, tick, connections],
+  );
+
+  return <SSEContext.Provider value={value}>{children}</SSEContext.Provider>;
+}
+
+export function useSSE() {
+  const value = useContext(SSEContext);
+  if (!value) {
+    throw new Error("useSSE must be used within SSEProvider");
+  }
+  return value;
+}

package/src/contexts/SandboxContext.tsx

@@ -0,0 +1,310 @@
+import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Sandbox, SandboxStats } from "../contracts/backend";
+import { api } from "../utils/api";
+import { tg } from "../i18n/translate";
+import { useAuth } from "./AuthContext";
+import { runtimeConfig } from "../config";
+
+export type SandboxOperation = "idle" | "loading" | "creating" | "rebuilding" | "destroying";
+
+interface SandboxContextValue {
+  sandboxes: Sandbox[];
+  currentSandbox: Sandbox | null;
+  stats: SandboxStats | null;
+  status: string;
+  operation: SandboxOperation;
+  error: string | null;
+  logs: string;
+  refresh: () => Promise<void>;
+  refreshStats: () => Promise<void>;
+  createSandbox: () => Promise<void>;
+  rebuildSandbox: () => Promise<void>;
+  destroySandbox: () => Promise<void>;
+  reloadConfig: () => Promise<void>;
+}
+
+const SandboxContext = createContext<SandboxContextValue | null>(null);
+
+function selectSandbox(sandboxes: Sandbox[]): Sandbox | null {
+  // Skip "error" rows: they're stale corpses from a previous container that
+  // the backend's _sync_running_status conservatively flipped to ERROR only
+  // after confirming the container was not_found / exited / dead / removing.
+  // Treating them as currentSandbox would block auto-create and leave the
+  // user stuck on "沙盒状态异常" until they manually clicked Build.
+  const live = sandboxes.filter((sandbox) => sandbox.status !== "error");
+  return live.find((sandbox) => sandbox.status === "running") ?? live[0] ?? null;
+}
+
+export function SandboxProvider({ children }: { children: ReactNode }) {
+  // Single-user local mode: there is no container lifecycle. The runtime
+  // launched by `brainpilot up` is always the sandbox, addressed per-session by
+  // the file routes. We expose a static "running" sandbox so the composer and
+  // file panels work, and never call /api/sandbox/* lifecycle endpoints (which
+  // the local backend does not implement). File operations resolve the real
+  // workspace by the active session id inside the file components themselves.
+  if (runtimeConfig.localMode) {
+    return <LocalSandboxProvider>{children}</LocalSandboxProvider>;
+  }
+  return <RemoteSandboxProvider>{children}</RemoteSandboxProvider>;
+}
+
+const LOCAL_SANDBOX: Sandbox = {
+  id: "local",
+  name: "local",
+  status: "running",
+  port: null,
+  userId: "local",
+  createdAt: new Date(0).toISOString(),
+};
+
+function LocalSandboxProvider({ children }: { children: ReactNode }) {
+  const noop = useCallback(async () => {}, []);
+  const value = useMemo<SandboxContextValue>(
+    () => ({
+      sandboxes: [LOCAL_SANDBOX],
+      currentSandbox: LOCAL_SANDBOX,
+      stats: null,
+      status: "running",
+      operation: "idle",
+      error: null,
+      logs: "",
+      refresh: noop,
+      refreshStats: noop,
+      createSandbox: noop,
+      rebuildSandbox: noop,
+      destroySandbox: noop,
+      reloadConfig: noop,
+    }),
+    [noop],
+  );
+  return <SandboxContext.Provider value={value}>{children}</SandboxContext.Provider>;
+}
+
+function RemoteSandboxProvider({ children }: { children: ReactNode }) {
+  const { isAuthReady } = useAuth();
+  const [sandboxes, setSandboxes] = useState<Sandbox[]>([]);
+  const [currentSandbox, setCurrentSandbox] = useState<Sandbox | null>(null);
+  const [stats, setStats] = useState<SandboxStats | null>(null);
+  const [operation, setOperation] = useState<SandboxOperation>("idle");
+  const [error, setError] = useState<string | null>(null);
+  const [logs, setLogs] = useState<string>("");
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const shouldAutoStartRef = useRef(true);
+
+  const refresh = useCallback(async () => {
+    if (!isAuthReady) {
+      setSandboxes([]);
+      setCurrentSandbox(null);
+      setStats(null);
+      return;
+    }
+
+    setOperation((current) => (current === "idle" ? "loading" : current));
+    setError(null);
+    try {
+      const nextSandboxes = await api.sandbox.list();
+      setSandboxes(nextSandboxes);
+      setCurrentSandbox(selectSandbox(nextSandboxes));
+      setHasLoaded(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : tg("ctx.sandbox.loadFailed"));
+    } finally {
+      setOperation((current) => (current === "loading" ? "idle" : current));
+    }
+  }, [isAuthReady]);
+
+  const refreshStats = useCallback(async () => {
+    if (!currentSandbox || (currentSandbox.status !== "running" && currentSandbox.status !== "quota_exceeded")) {
+      setStats(null);
+      return;
+    }
+
+    try {
+      setStats(await api.sandbox.stats(currentSandbox.id));
+    } catch {
+      setStats(null);
+      // 如果 stats 获取失败（容器可能已不存在），刷新列表以同步真实状态
+      if (currentSandbox?.status === "running" || currentSandbox?.status === "quota_exceeded") {
+        void refresh();
+      }
+    }
+  }, [currentSandbox, refresh]);
+
+  const fetchLogs = useCallback(async () => {
+    if (!currentSandbox?.id) return;
+    try {
+      setLogs(await api.sandbox.logs(currentSandbox.id));
+    } catch {
+      // 日志获取失败也可能是容器已停止的信号，刷新列表同步状态
+      if (currentSandbox?.status === "running") {
+        void refresh();
+      }
+    }
+  }, [currentSandbox?.id, refresh]);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  // Reset auto-start flag once auth becomes ready.
+  useEffect(() => {
+    shouldAutoStartRef.current = true;
+    setHasLoaded(false);
+  }, [isAuthReady]);
+
+  useEffect(() => {
+    void refreshStats();
+    if (!currentSandbox || (currentSandbox.status !== "running" && currentSandbox.status !== "quota_exceeded")) {
+      return;
+    }
+    const timer = window.setInterval(() => void refreshStats(), 8000);
+    return () => window.clearInterval(timer);
+  }, [currentSandbox, refreshStats]);
+
+  // Poll logs every 3s when running or quota_exceeded
+  useEffect(() => {
+    void fetchLogs();
+    if (!currentSandbox || (currentSandbox.status !== "running" && currentSandbox.status !== "quota_exceeded")) {
+      return;
+    }
+    const timer = window.setInterval(() => void fetchLogs(), 3000);
+    return () => window.clearInterval(timer);
+  }, [currentSandbox, fetchLogs]);
+
+  const createSandbox = useCallback(async () => {
+    setOperation("creating");
+    setError(null);
+    try {
+      const sandbox = await api.sandbox.create("default");
+      setSandboxes((current) => [sandbox, ...current.filter((item) => item.id !== sandbox.id)]);
+      setCurrentSandbox(sandbox);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : tg("ctx.sandbox.createFailed"));
+      throw err;
+    } finally {
+      setOperation("idle");
+    }
+  }, []);
+
+  const rebuildSandbox = useCallback(async () => {
+    if (!currentSandbox) {
+      return;
+    }
+    setOperation("rebuilding");
+    setError(null);
+    try {
+      const sandbox = await api.sandbox.rebuild(currentSandbox.id);
+      setSandboxes((current) => current.map((item) => (item.id === sandbox.id ? sandbox : item)));
+      setCurrentSandbox(sandbox);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : tg("ctx.sandbox.rebuildFailed"));
+      throw err;
+    } finally {
+      setOperation("idle");
+    }
+  }, [currentSandbox]);
+
+  const destroySandbox = useCallback(async () => {
+    if (!currentSandbox) {
+      return;
+    }
+    setOperation("destroying");
+    setError(null);
+    try {
+      await api.sandbox.destroy(currentSandbox.id);
+      const remaining = sandboxes.filter((item) => item.id !== currentSandbox.id);
+      setSandboxes(remaining);
+      setCurrentSandbox(selectSandbox(remaining));
+      setStats(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : tg("ctx.sandbox.deleteFailed"));
+      throw err;
+    } finally {
+      setOperation("idle");
+    }
+  }, [currentSandbox, sandboxes]);
+
+  // Reload sandbox config (hot-update) - from master
+  const reloadConfig = useCallback(async () => {
+    if (!currentSandbox) return;
+    try {
+      await api.sandbox.reloadConfig(currentSandbox.id);
+    } catch (err: any) {
+      setError(err instanceof Error ? err.message : tg("ctx.sandbox.reloadFailed"));
+    }
+  }, [currentSandbox]);
+
+  // Auto-create only when the user truly has no sandbox. Never auto-rebuild on
+  // page mount: an existing container is almost always still alive — the row
+  // may merely have been flipped to error by a transient Docker hiccup during
+  // a previous /api/sandbox/list. If it really did die, SandboxStatus shows
+  // "沙盒状态异常" + a manual Rebuild button. Creating / rebuilding are
+  // transient backend states and naturally need no action.
+  //
+  // hasLoaded gate: on initial mount the auto-start effect fires *before* the
+  // first refresh() completes (refresh's setOperation('loading') is an async
+  // state update, but the effect already runs in the same batch as the
+  // auth-ready change). Without this gate currentSandbox is null on first render and we
+  // mistakenly call createSandbox() → force-removes the same-named live
+  // container. Wait until at least one /api/sandbox/list has returned before
+  // making the call.
+  useEffect(() => {
+    if (!isAuthReady) return;
+    if (!hasLoaded) return;
+    if (operation !== "idle") return;
+    if (!shouldAutoStartRef.current) return;
+
+    shouldAutoStartRef.current = false;
+    if (!currentSandbox) {
+      void createSandbox();
+    }
+  }, [isAuthReady, hasLoaded, operation, currentSandbox, createSandbox]);
+
+  const value = useMemo(
+    () => ({
+      sandboxes,
+      currentSandbox,
+      stats,
+      status:
+        currentSandbox?.status ??
+        (operation === "creating"
+          ? "creating"
+          : operation === "loading"
+          ? "loading"
+          : "missing"),
+      operation,
+      error,
+      logs,
+      refresh,
+      refreshStats,
+      createSandbox,
+      rebuildSandbox,
+      destroySandbox,
+      reloadConfig,
+    }),
+    [
+      sandboxes,
+      currentSandbox,
+      stats,
+      operation,
+      error,
+      logs,
+      refresh,
+      refreshStats,
+      createSandbox,
+      rebuildSandbox,
+      destroySandbox,
+      reloadConfig,
+    ],
+  );
+
+  return <SandboxContext.Provider value={value}>{children}</SandboxContext.Provider>;
+}
+
+export function useSandbox() {
+  const value = useContext(SandboxContext);
+  if (!value) {
+    throw new Error("useSandbox must be used within SandboxProvider");
+  }
+  return value;
+}