@brainpilot/web 0.0.4 → 0.0.6

package/src/components/shell/TerminalDrawer.tsx

@@ -0,0 +1,387 @@
+import { useEffect, useRef, useState } from "react";
+import { Minus, Plus, RefreshCw, Trash2, X } from "lucide-react";
+import { runtimeConfig } from "../../config";
+import { useAuth } from "../../contexts/AuthContext";
+import { useSandbox } from "../../contexts/SandboxContext";
+import { mockInitialTerminalOutput, mockTerminalResponse } from "../../mocks/backend";
+import { getTerminalWsUrl } from "../../utils/api";
+import { useT } from "../../i18n/useT";
+import { tg } from "../../i18n/translate";
+
+export type TerminalTab = {
+  id: string;
+  title: string;
+  cwd: string;
+};
+
+type TerminalDrawerProps = {
+  activeTabId: string | null;
+  isMinimized: boolean;
+  onActivateTab: (terminalId: string) => void;
+  onCloseTab: (terminalId: string) => void;
+  onMinimize: () => void;
+  onNewTab: () => void;
+  tabs: TerminalTab[];
+};
+
+const MIN_TERMINAL_HEIGHT = 220;
+const DEFAULT_TERMINAL_HEIGHT = 320;
+const TERMINAL_CHAR_WIDTH = 8;
+const TERMINAL_LINE_HEIGHT = 21;
+
+type TerminalConnectionState = "idle" | "connecting" | "connected" | "error" | "closed";
+
+const terminalConnectionLabel: Record<TerminalConnectionState, string> = {
+  idle: "Idle",
+  connecting: "Connecting",
+  connected: "Connected",
+  error: "Error",
+  closed: "Closed",
+};
+
+export function TerminalDrawer({
+  activeTabId,
+  isMinimized,
+  onActivateTab,
+  onCloseTab,
+  onMinimize,
+  onNewTab,
+  tabs,
+}: TerminalDrawerProps) {
+  const t = useT();
+  const { isAuthReady } = useAuth();
+  const { currentSandbox } = useSandbox();
+  const [height, setHeight] = useState(DEFAULT_TERMINAL_HEIGHT);
+  const [loadingIds, setLoadingIds] = useState<Set<string>>(new Set());
+  const [isDragging, setIsDragging] = useState(false);
+  const [outputByTab, setOutputByTab] = useState<Record<string, string>>({});
+  const [connectionByTab, setConnectionByTab] = useState<Record<string, TerminalConnectionState>>({});
+  const [reconnectKey, setReconnectKey] = useState(0);
+  const [input, setInput] = useState("");
+  const [terminalError, setTerminalError] = useState<string | null>(null);
+  const knownTabIdsRef = useRef<Set<string>>(new Set());
+  const dragStartRef = useRef<{ height: number; y: number } | null>(null);
+  const terminalScreenRef = useRef<HTMLPreElement | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    tabs.forEach((tab) => {
+      if (knownTabIdsRef.current.has(tab.id)) {
+        return;
+      }
+
+      knownTabIdsRef.current.add(tab.id);
+      setLoadingIds((current) => new Set(current).add(tab.id));
+
+      window.setTimeout(() => {
+        setLoadingIds((current) => {
+          const next = new Set(current);
+          next.delete(tab.id);
+          return next;
+        });
+      }, 700);
+    });
+  }, [tabs]);
+
+  useEffect(() => {
+    if (!isDragging) {
+      return;
+    }
+
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!dragStartRef.current) {
+        return;
+      }
+
+      const maxTerminalHeight = Math.min(window.innerHeight * 0.72, 720);
+      const nextHeight = dragStartRef.current.height + (dragStartRef.current.y - event.clientY);
+      setHeight(Math.max(MIN_TERMINAL_HEIGHT, Math.min(maxTerminalHeight, nextHeight)));
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      dragStartRef.current = null;
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging]);
+
+  const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];
+  const isOpen = tabs.length > 0 && !isMinimized;
+  const isLoading = activeTab ? loadingIds.has(activeTab.id) : false;
+  const isReady = !!activeTab && isAuthReady && currentSandbox?.status === "running";
+  const activeConnection = activeTab ? (connectionByTab[activeTab.id] ?? "idle") : "idle";
+
+  const getTerminalSize = () => {
+    const rect = terminalScreenRef.current?.getBoundingClientRect();
+    const width = rect?.width ?? 640;
+    const screenHeight = rect?.height ?? Math.max(160, height - 86);
+    return {
+      cols: Math.max(40, Math.floor((width - 24) / TERMINAL_CHAR_WIDTH)),
+      rows: Math.max(8, Math.floor((screenHeight - 24) / TERMINAL_LINE_HEIGHT)),
+    };
+  };
+
+  const sendTerminalResize = () => {
+    if (runtimeConfig.useMockBackend || wsRef.current?.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    wsRef.current.send(JSON.stringify({ type: "resize", ...getTerminalSize() }));
+  };
+
+  useEffect(() => {
+    if (!isOpen || !activeTab || !isAuthReady || !currentSandbox || currentSandbox.status !== "running") {
+      wsRef.current?.close();
+      wsRef.current = null;
+      return;
+    }
+
+    if (runtimeConfig.useMockBackend) {
+      setTerminalError(null);
+      setConnectionByTab((current) => ({ ...current, [activeTab.id]: "connected" }));
+      setLoadingIds((current) => {
+        const next = new Set(current);
+        next.delete(activeTab.id);
+        return next;
+      });
+      setOutputByTab((current) => ({
+        ...current,
+        [activeTab.id]: current[activeTab.id] || mockInitialTerminalOutput(),
+      }));
+      return;
+    }
+
+    setTerminalError(null);
+    setConnectionByTab((current) => ({ ...current, [activeTab.id]: "connecting" }));
+    setLoadingIds((current) => new Set(current).add(activeTab.id));
+    const { cols, rows } = getTerminalSize();
+    const ws = new WebSocket(getTerminalWsUrl(currentSandbox.id, cols, rows));
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      setConnectionByTab((current) => ({ ...current, [activeTab.id]: "connected" }));
+      setLoadingIds((current) => {
+        const next = new Set(current);
+        next.delete(activeTab.id);
+        return next;
+      });
+      setOutputByTab((current) => ({
+        ...current,
+        [activeTab.id]: current[activeTab.id] || "$ ",
+      }));
+    };
+
+    ws.onmessage = async (event) => {
+      let text = "";
+      if (event.data instanceof Blob) {
+        text = await event.data.text();
+      } else if (typeof event.data === "string") {
+        try {
+          const parsed = JSON.parse(event.data) as { message?: string };
+          text = parsed.message ? `\n${parsed.message}\n` : event.data;
+        } catch {
+          text = event.data;
+        }
+      }
+      setOutputByTab((current) => ({
+        ...current,
+        [activeTab.id]: `${current[activeTab.id] || ""}${text}`,
+      }));
+    };
+
+    ws.onerror = () => {
+      setConnectionByTab((current) => ({ ...current, [activeTab.id]: "error" }));
+      setTerminalError(tg("terminal.connectFailed"));
+    };
+
+    ws.onclose = () => {
+      setConnectionByTab((current) => ({ ...current, [activeTab.id]: current[activeTab.id] === "error" ? "error" : "closed" }));
+      setLoadingIds((current) => {
+        const next = new Set(current);
+        next.delete(activeTab.id);
+        return next;
+      });
+    };
+
+    return () => {
+      ws.close();
+      if (wsRef.current === ws) {
+        wsRef.current = null;
+      }
+    };
+  }, [activeTab, currentSandbox, isOpen, reconnectKey, isAuthReady]);
+
+  useEffect(() => {
+    if (!isOpen || !activeTab || activeConnection !== "connected") {
+      return;
+    }
+    sendTerminalResize();
+  }, [activeConnection, activeTab?.id, height, isOpen]);
+
+  useEffect(() => {
+    const handleResize = () => sendTerminalResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const clearTerminal = () => {
+    if (!activeTab) {
+      return;
+    }
+    setOutputByTab((current) => ({ ...current, [activeTab.id]: "$ " }));
+  };
+
+  const reconnectTerminal = () => {
+    if (!activeTab) {
+      return;
+    }
+    if (runtimeConfig.useMockBackend) {
+      setOutputByTab((current) => ({
+        ...current,
+        [activeTab.id]: `${current[activeTab.id] || ""}\nMock terminal reconnected.\n$ `,
+      }));
+      setConnectionByTab((current) => ({ ...current, [activeTab.id]: "connected" }));
+      return;
+    }
+    wsRef.current?.close();
+    setReconnectKey((current) => current + 1);
+  };
+
+  const sendTerminalInput = () => {
+    if (!input || !activeTab) {
+      return;
+    }
+    if (runtimeConfig.useMockBackend) {
+      setOutputByTab((current) => ({
+        ...current,
+        [activeTab.id]: `${current[activeTab.id] || ""}${input}\n${mockTerminalResponse(input)}`,
+      }));
+      setInput("");
+      return;
+    }
+    if (wsRef.current?.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    wsRef.current.send(`${input}\n`);
+    setOutputByTab((current) => ({
+      ...current,
+      [activeTab.id]: `${current[activeTab.id] || ""}${input}\n`,
+    }));
+    setInput("");
+  };
+
+  return (
+    <section
+      aria-hidden={!isOpen}
+      aria-label={t("terminal.aria.drawer")}
+      className={`terminal-drawer ${isOpen ? "is-open" : ""} ${isDragging ? "is-resizing" : ""}`}
+      style={{ height }}
+    >
+      <div
+        aria-label={t("terminal.aria.resize")}
+        className="terminal-drawer__resize-handle"
+        onMouseDown={(event) => {
+          dragStartRef.current = { height, y: event.clientY };
+          setIsDragging(true);
+        }}
+        role="separator"
+      />
+
+      <div className="terminal-drawer__tabs">
+        <div className="terminal-drawer__tab-strip" role="tablist">
+          {tabs.map((tab) => {
+            const tabIsActive = tab.id === activeTab?.id;
+            const tabIsLoading = loadingIds.has(tab.id);
+            const tabConnection = connectionByTab[tab.id] ?? "idle";
+
+            return (
+              <div className={`terminal-tab ${tabIsActive ? "is-active" : ""}`} key={tab.id}>
+                <button
+                  aria-selected={tabIsActive}
+                  className="terminal-tab__select"
+                  onClick={() => onActivateTab(tab.id)}
+                  role="tab"
+                  type="button"
+                >
+                  <span
+                    className={`terminal-tab__status ${
+                      tabIsLoading || tabConnection === "connecting"
+                        ? "is-loading"
+                        : tabConnection === "error"
+                          ? "is-error"
+                          : tabConnection === "connected"
+                            ? "is-connected"
+                            : ""
+                    }`}
+                  />
+                  <span>{tab.title}</span>
+                </button>
+                <button
+                  aria-label={`Close ${tab.title}`}
+                  className="terminal-tab__close"
+                  onClick={() => onCloseTab(tab.id)}
+                  type="button"
+                >
+                  <X size={13} />
+                </button>
+              </div>
+            );
+          })}
+          <button aria-label={t("terminal.aria.newTab")} className="terminal-tab-add" onClick={onNewTab} type="button">
+            <Plus size={14} />
+          </button>
+        </div>
+        <div className="terminal-drawer__tools">
+          <button aria-label={t("terminal.aria.clear")} onClick={clearTerminal} type="button">
+            <Trash2 size={14} />
+          </button>
+          <button aria-label={t("terminal.aria.reconnect")} onClick={reconnectTerminal} type="button">
+            <RefreshCw size={14} />
+          </button>
+          <button aria-label={t("terminal.aria.minimize")} onClick={onMinimize} type="button">
+            <Minus size={15} />
+          </button>
+        </div>
+      </div>
+
+      <div className="terminal-drawer__body">
+        {isLoading || !activeTab ? (
+          <div className="terminal-loading">
+            <span className="terminal-loading__dot" />
+            <span>Connecting to sandbox terminal...</span>
+          </div>
+        ) : !isReady ? (
+          <div className="terminal-loading">
+            <span className="terminal-loading__dot" />
+            <span>Start a running sandbox to open the terminal.</span>
+          </div>
+        ) : (
+          <>
+            <div className="terminal-statusbar">
+              <span>{activeTab.cwd}</span>
+              <span>{terminalConnectionLabel[activeConnection]}</span>
+            </div>
+            <pre className="terminal-screen" aria-label={`${activeTab.title} output`} ref={terminalScreenRef}>
+              <code>{terminalError ? `${terminalError}\n` : outputByTab[activeTab.id] || "$ "}</code>
+            </pre>
+            <form
+              className="terminal-input"
+              onSubmit={(event) => {
+                event.preventDefault();
+                sendTerminalInput();
+              }}
+            >
+              <span>$</span>
+              <input value={input} onChange={(event) => setInput(event.target.value)} spellCheck={false} />
+            </form>
+          </>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/components/sidebar/Sidebar.tsx

@@ -0,0 +1,191 @@
+import {
+  Check,
+  MessageCircle,
+  MessageSquarePlus,
+  MonitorPlay,
+  PanelLeft,
+  PenLine,
+  Search,
+  Settings,
+  Trash2,
+  X,
+} from "lucide-react";
+import { FormEvent, useState } from "react";
+import { useSessions } from "../../contexts/SessionContext";
+import { useT } from "../../i18n/useT";
+import { IconButton } from "../primitives/IconButton";
+
+type SidebarProps = {
+  isCollapsed: boolean;
+  activePage: "workspace" | "demo";
+  onOpenDemo: () => void;
+  onGoWorkspace: () => void;
+  onOpenSettings: () => void;
+  onOpenSearch: () => void;
+  onResizeStart: (pointerX: number) => void;
+  onToggle: () => void;
+};
+
+export function Sidebar({ isCollapsed, activePage, onOpenDemo, onGoWorkspace, onOpenSettings, onOpenSearch, onResizeStart, onToggle }: SidebarProps) {
+  const {
+    sessions,
+    currentSession,
+    isLoading,
+    startDraftSession,
+    selectSession,
+    updateSessionTitle,
+    deleteSession,
+  } = useSessions();
+  const t = useT();
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingTitle, setEditingTitle] = useState("");
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+
+  const submitRename = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!editingId || !editingTitle.trim()) {
+      setEditingId(null);
+      return;
+    }
+    await updateSessionTitle(editingId, editingTitle.trim());
+    setEditingId(null);
+  };
+
+  return (
+    <aside className="sidebar" aria-label={t("sidebar.aria.nav")}>
+      <div
+        aria-label={t("sidebar.aria.resize")}
+        className="sidebar__resize-handle"
+        onPointerDown={(event) => {
+          event.preventDefault();
+          onResizeStart(event.clientX);
+        }}
+        role="separator"
+      />
+
+      <div className="sidebar__topbar">
+        <IconButton
+          aria-expanded={!isCollapsed}
+          label={isCollapsed ? t("sidebar.aria.expand") : t("sidebar.aria.collapse")}
+          onClick={onToggle}
+        >
+          <PanelLeft size={16} />
+        </IconButton>
+      </div>
+
+      <nav className="sidebar__nav" aria-label={t("sidebar.aria.primary")}>
+        <button className="nav-item nav-item--strong" onClick={() => { onGoWorkspace(); startDraftSession(); }} type="button">
+          <PenLine size={16} />
+          <span>{t("sidebar.newChat")}</span>
+        </button>
+        {/*
+          issue #44: 插件 / 自动化 have no view yet — as clickable no-op buttons
+          they read as broken navigation. Hidden until the views exist; the
+          i18n keys (sidebar.plugins / sidebar.automations) are kept. Re-add the
+          Plug / Clock3 lucide imports when restoring these.
+        <button className="nav-item" type="button">
+          <Plug size={16} />
+          <span>{t("sidebar.plugins")}</span>
+        </button>
+        <button className="nav-item" type="button">
+          <Clock3 size={16} />
+          <span>{t("sidebar.automations")}</span>
+        </button>
+        */}
+        <button
+          className={`nav-item ${activePage === "demo" ? "is-active" : ""}`}
+          onClick={onOpenDemo}
+          type="button"
+        >
+          <MonitorPlay size={16} />
+          <span>{t("sidebar.demo")}</span>
+        </button>
+      </nav>
+
+      <section className="sidebar-section sidebar-section--conversations" aria-labelledby="conversations-heading">
+        <div className="section-heading">
+          <h2 id="conversations-heading">{t("sidebar.conversations")}</h2>
+          <div className="section-heading__actions">
+            <IconButton label={t("sidebar.aria.newConversation")} onClick={() => { onGoWorkspace(); startDraftSession(); }}>
+              <MessageSquarePlus size={13} />
+            </IconButton>
+          </div>
+        </div>
+
+        <div className="conversation-stack">
+          <button className="conversation-search-trigger" onClick={onOpenSearch} type="button">
+            <Search size={14} />
+            <span>{t("sidebar.search")}</span>
+          </button>
+          <p className="muted-label">{isLoading ? t("sidebar.loading") : t("sidebar.sessionCount", { count: sessions.length })}</p>
+          {sessions.length === 0 && !isLoading ? <p className="sidebar-empty">{t("sidebar.empty")}</p> : null}
+          {sessions.map((session) => {
+            const isEditing = editingId === session.id;
+            const isConfirming = confirmDeleteId === session.id;
+            return (
+              <div className={`conversation-item ${currentSession?.id === session.id ? "is-active" : ""}`} key={session.id}>
+                {isEditing ? (
+                  <form className="conversation-edit" onSubmit={submitRename}>
+                    <input
+                      autoFocus
+                      onChange={(event) => setEditingTitle(event.target.value)}
+                      value={editingTitle}
+                    />
+                    <IconButton label={t("sidebar.aria.saveTitle")} type="submit">
+                      <Check size={14} />
+                    </IconButton>
+                    <IconButton label={t("sidebar.aria.cancelRename")} onClick={() => setEditingId(null)}>
+                      <X size={14} />
+                    </IconButton>
+                  </form>
+                ) : (
+                  <>
+                    <button className="conversation-row" onClick={() => { onGoWorkspace(); selectSession(session.id); }} type="button">
+                      <MessageCircle size={16} />
+                      <span>{session.title}</span>
+                      <small>{new Date(session.updatedAt).toLocaleDateString()}</small>
+                    </button>
+                    <div className="conversation-actions">
+                      {isConfirming ? (
+                        <>
+                          <IconButton label={t("sidebar.aria.confirmDelete")} onClick={() => void deleteSession(session.id)}>
+                            <Check size={14} />
+                          </IconButton>
+                          <IconButton label={t("sidebar.aria.cancelDelete")} onClick={() => setConfirmDeleteId(null)}>
+                            <X size={14} />
+                          </IconButton>
+                        </>
+                      ) : (
+                        <>
+                          <IconButton
+                            label={t("sidebar.aria.rename")}
+                            onClick={() => {
+                              setEditingId(session.id);
+                              setEditingTitle(session.title);
+                            }}
+                          >
+                            <PenLine size={14} />
+                          </IconButton>
+                          <IconButton label={t("sidebar.aria.delete")} onClick={() => setConfirmDeleteId(session.id)}>
+                            <Trash2 size={14} />
+                          </IconButton>
+                        </>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      <div className="sidebar__footer">
+        <button className="nav-item" onClick={onOpenSettings} type="button">
+          <Settings size={16} />
+          <span>{t("sidebar.settings")}</span>
+        </button>
+      </div>
+    </aside>
+  );
+}

package/src/config.ts

@@ -0,0 +1,10 @@
+export const runtimeConfig = {
+  useMockBackend: import.meta.env.VITE_USE_MOCK_BACKEND === "1",
+  // Local single-user mode is ON by default: there is no container lifecycle to
+  // manage — the runtime launched by `brainpilot up` IS the sandbox, and the
+  // active session id addresses its workspace. Sandbox list/create/rebuild/
+  // destroy/stats/logs are skipped. A downstream multi-user deployment with a
+  // real per-user sandbox orchestrator opts out by building with
+  // VITE_LOCAL_MODE=0.
+  localMode: import.meta.env.VITE_LOCAL_MODE !== "0",
+};

package/src/contexts/AppProviders.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { AuthProvider } from "./AuthContext";
+import { PreferencesProvider } from "./PreferencesContext";
+import { SandboxProvider } from "./SandboxContext";
+import { SessionProvider } from "./SessionContext";
+import { SSEProvider } from "./SSEContext";
+
+export function AppProviders({ children }: { children: ReactNode }) {
+  return (
+    <PreferencesProvider>
+      <AuthProvider>
+        <SandboxProvider>
+          <SSEProvider>
+            <SessionProvider>{children}</SessionProvider>
+          </SSEProvider>
+        </SandboxProvider>
+      </AuthProvider>
+    </PreferencesProvider>
+  );
+}

package/src/contexts/AuthContext.tsx

@@ -0,0 +1,61 @@
+import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from "react";
+import { User } from "../contracts/backend";
+import { api } from "../utils/api";
+
+interface AuthContextValue {
+  /** The current identity, resolved from the upstream gateway via GET /api/auth/me. */
+  user: User | null;
+  /** True once the identity bootstrap has settled (success or redirect-in-flight). */
+  isAuthReady: boolean;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+/**
+ * Trust-front auth: the open-source frontend does NOT authenticate. The hosted
+ * gateway owns auth and carries identity via an httpOnly cookie. We only read the
+ * resolved identity (GET /api/auth/me) for display. There is no login/register/
+ * logout UI here.
+ */
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isAuthReady, setIsAuthReady] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function bootstrap() {
+      try {
+        const currentUser = await api.auth.me();
+        if (!cancelled) {
+          setUser(currentUser);
+          setIsAuthReady(true);
+        }
+      } catch {
+        if (cancelled) return;
+        // No identity resolved. In self-hosted `bp --up` there is no hosted
+        // gateway/login to hand off to, so redirecting here would loop (#38).
+        // Fall back to a local anonymous identity and let the app render.
+        setUser({ id: "local", username: "local", createdAt: new Date(0).toISOString() });
+        setIsAuthReady(true);
+      }
+    }
+
+    void bootstrap();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const value = useMemo<AuthContextValue>(() => ({ user, isAuthReady }), [user, isAuthReady]);
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const value = useContext(AuthContext);
+  if (!value) {
+    throw new Error("useAuth must be used within AuthProvider");
+  }
+  return value;
+}