@brainpilot/web 0.0.4 → 0.0.6

package/src/components/shell/DesktopShell.tsx

@@ -0,0 +1,261 @@
+import { useEffect, useRef, useState } from "react";
+import { Bot, FolderOpen, GitBranch, MessageSquare, RefreshCw } from "lucide-react";
+import { useAuth } from "../../contexts/AuthContext";
+import { useSandbox } from "../../contexts/SandboxContext";
+import { useSessions } from "../../contexts/SessionContext";
+import { useT } from "../../i18n/useT";
+import { runtimeConfig } from "../../config";
+import { PromptComposer } from "../chat/PromptComposer";
+import { DemoView } from "../demo/DemoView";
+import { FileSidebar } from "../files/FileSidebar";
+import { IconButton } from "../primitives/IconButton";
+import { SearchDialog } from "../search/SearchDialog";
+import { SettingsDialog } from "../settings/SettingsDialog";
+import { AgentsPanel, TracePanel } from "../session/AgentTraceViews";
+import { SandboxBuildingOverlay } from "./SandboxBuildingOverlay";
+import { SandboxStatus } from "./SandboxStatus";
+import { Sidebar } from "../sidebar/Sidebar";
+import { DiskQuotaWarningDialog } from "../quota/DiskQuotaWarningDialog";
+import { DiskQuotaCriticalDialog } from "../quota/DiskQuotaCriticalDialog";
+
+const MIN_SIDEBAR_WIDTH = 220;
+const MAX_SIDEBAR_WIDTH = 420;
+
+export function DesktopShell() {
+  const { isAuthReady } = useAuth();
+  const { currentSandbox, operation, error, stats } = useSandbox();
+  const { currentSession, currentView, isRefreshingMessages, refreshMessages, setCurrentView } = useSessions();
+  const t = useT();
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [activePage, setActivePage] = useState<"workspace" | "demo">("workspace");
+  // Bumped on every sidebar "Live Demo" click so DemoView returns to its
+  // session-selection landing even when the demo page is already open (#111).
+  const [demoResetSignal, setDemoResetSignal] = useState(0);
+  const [sidebarWidth, setSidebarWidth] = useState(268);
+  const [isSidebarResizing, setIsSidebarResizing] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isFilesOpen, setIsFilesOpen] = useState(false);
+  const [fileSidebarWidth, setFileSidebarWidth] = useState(420);
+  const [isFileSidebarResizing, setIsFileSidebarResizing] = useState(false);
+  const [sandboxOverlayDismissed, setSandboxOverlayDismissed] = useState(false);
+  const [isWarningOpen, setIsWarningOpen] = useState(false);
+  const hasWarnedRef = useRef(false);
+  const sidebarResizeRef = useRef<{ pointerX: number; width: number } | null>(null);
+
+  useEffect(() => {
+    if (operation === "creating" || operation === "rebuilding") {
+      setSandboxOverlayDismissed(false);
+    }
+  }, [operation]);
+
+  // Show warning dialog once per page session when disk usage is >= 90% but < 100%
+  useEffect(() => {
+    const percent = stats?.disk.percentOfQuota ?? 0;
+    if (percent >= 90 && percent < 100 && !hasWarnedRef.current) {
+      hasWarnedRef.current = true;
+      setIsWarningOpen(true);
+    }
+  }, [stats]);
+
+  const isCriticalOpen = stats ? stats.disk.percentOfQuota >= 100 : false;
+
+  useEffect(() => {
+    const handlePointerMove = (event: PointerEvent) => {
+      if (!sidebarResizeRef.current) {
+        return;
+      }
+
+      const delta = event.clientX - sidebarResizeRef.current.pointerX;
+      const nextWidth = Math.max(
+        MIN_SIDEBAR_WIDTH,
+        Math.min(MAX_SIDEBAR_WIDTH, sidebarResizeRef.current.width + delta),
+      );
+      setSidebarWidth(nextWidth);
+    };
+
+    const handlePointerUp = () => {
+      if (!sidebarResizeRef.current) {
+        return;
+      }
+
+      sidebarResizeRef.current = null;
+      setIsSidebarResizing(false);
+    };
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, []);
+
+  // Trust-front: while the upstream identity is resolving (GET /api/auth/me),
+  // show a lightweight splash. On failure AuthProvider redirects to the hosted
+  // login, so we never render the app for an unauthenticated request.
+  if (!isAuthReady) {
+    return (
+      <div className="app-bootstrapping" role="status" aria-live="polite">
+        <span className="sandbox-status__eyebrow">BrainPilot</span>
+        <p>{t("shell.bootstrapping")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`desktop-shell ${isSidebarCollapsed ? "desktop-shell--sidebar-collapsed" : ""} ${
+        isSidebarResizing ? "desktop-shell--resizing-sidebar" : ""
+      }`}
+      style={{ "--active-sidebar-width": `${sidebarWidth}px` } as React.CSSProperties}
+    >
+      <Sidebar
+        isCollapsed={isSidebarCollapsed}
+        activePage={activePage}
+        onOpenDemo={() => {
+          setActivePage("demo");
+          setDemoResetSignal((n) => n + 1);
+        }}
+        onGoWorkspace={() => setActivePage("workspace")}
+        onOpenSettings={() => setIsSettingsOpen(true)}
+        onOpenSearch={() => setIsSearchOpen(true)}
+        onResizeStart={(pointerX) => {
+          if (isSidebarCollapsed) {
+            return;
+          }
+
+          sidebarResizeRef.current = { pointerX, width: sidebarWidth };
+          setIsSidebarResizing(true);
+        }}
+        onToggle={() => setIsSidebarCollapsed((current) => !current)}
+      />
+
+      {activePage === "demo" ? (
+        <DemoView resetSignal={demoResetSignal} />
+      ) : (
+      <main
+        className={`workspace ${isFilesOpen ? "workspace--files-open" : ""} ${
+          isFileSidebarResizing ? "workspace--resizing-files" : ""
+        }`}
+        style={{ "--active-file-sidebar-width": `${fileSidebarWidth}px` } as React.CSSProperties}
+        aria-label={t("shell.aria.workspace")}
+      >
+        <header className="workspace-toolbar" aria-label={t("shell.aria.toolbarActions")}>
+          <div className="session-title" aria-label={t("shell.aria.activeSession")}>
+            {/* #105: foreground the human-readable session title (same source as
+                the sidebar). The id is debug-only metadata now — surfaced as a
+                hover tooltip + muted short id, never the primary label. Falls
+                back to `Session <id8>` when the title is missing. */}
+            <span
+              className="session-title__name"
+              title={currentSession?.id ?? undefined}
+            >
+              {currentSession?.title ||
+                (currentSession?.id
+                  ? `${t("shell.sessionLabel")} ${currentSession.id.slice(0, 8)}`
+                  : t("shell.defaultWorkspace"))}
+            </span>
+            {currentSession?.id ? (
+              <span className="session-title__id">{currentSession.id.slice(0, 8)}</span>
+            ) : null}
+          </div>
+          <div className="workspace-toolbar__actions">
+            {/* #104: icon-only nav. The label stays in the DOM (visually
+                hidden) so it remains the button's accessible name, and `title`
+                gives a hover/focus tooltip — no separate aria-label needed. */}
+            <div className="workspace-view-tabs workspace-view-tabs--icon-only" role="tablist" aria-label={t("shell.aria.viewTabs")}>
+              <button
+                aria-selected={currentView === "chat"}
+                className={currentView === "chat" ? "is-active" : ""}
+                onClick={() => setCurrentView("chat")}
+                role="tab"
+                title={t("shell.view.chat")}
+                type="button"
+              >
+                <MessageSquare size={14} />
+                <span className="sr-only">{t("shell.view.chat")}</span>
+              </button>
+              <button
+                aria-selected={currentView === "agents"}
+                className={currentView === "agents" ? "is-active" : ""}
+                onClick={() => setCurrentView("agents")}
+                role="tab"
+                title={t("shell.view.agents")}
+                type="button"
+              >
+                <Bot size={14} />
+                <span className="sr-only">{t("shell.view.agents")}</span>
+              </button>
+              <button
+                aria-selected={currentView === "trace"}
+                className={currentView === "trace" ? "is-active" : ""}
+                onClick={() => setCurrentView("trace")}
+                role="tab"
+                title={t("shell.view.trace")}
+                type="button"
+              >
+                <GitBranch size={14} />
+                <span className="sr-only">{t("shell.view.trace")}</span>
+              </button>
+            </div>
+            {currentView === "chat" ? (
+              <IconButton
+                className={isRefreshingMessages ? "is-active" : ""}
+                label={t("shell.aria.refreshMessages")}
+                onClick={() => void refreshMessages()}
+              >
+                <RefreshCw size={14} />
+              </IconButton>
+            ) : null}
+            {/* #100: in local single-user mode there is no Docker sandbox to
+                inspect — the runtime IS the workspace, so the Sandbox status
+                popover would only show empty container metrics and read like a
+                fault. Hide it here; downstream multi-user Docker builds set
+                VITE_LOCAL_MODE=0 and keep the real container UI. */}
+            {runtimeConfig.localMode ? null : <SandboxStatus />}
+            <IconButton
+              aria-pressed={isFilesOpen}
+              className={isFilesOpen ? "is-active" : ""}
+              label={isFilesOpen ? t("shell.files.close") : t("shell.files.open")}
+              onClick={() => setIsFilesOpen((current) => !current)}
+            >
+              <FolderOpen size={16} />
+            </IconButton>
+          </div>
+        </header>
+
+        {currentView === "chat" ? <PromptComposer /> : null}
+        {currentView === "agents" ? <AgentsPanel /> : null}
+        {currentView === "trace" ? <TracePanel /> : null}
+        <FileSidebar
+          isOpen={isFilesOpen}
+          onClose={() => setIsFilesOpen(false)}
+          onResize={setFileSidebarWidth}
+          onResizeEnd={() => setIsFileSidebarResizing(false)}
+          onResizeStart={() => setIsFileSidebarResizing(true)}
+          width={fileSidebarWidth}
+        />
+      </main>
+      )}
+
+      <SearchDialog isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
+      <SettingsDialog isOpen={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} />
+      {!sandboxOverlayDismissed && (operation === "creating" || operation === "rebuilding") ? (
+        <SandboxBuildingOverlay operation={operation} error={error} onDismiss={() => setSandboxOverlayDismissed(true)} />
+      ) : null}
+      <DiskQuotaWarningDialog
+        isOpen={isWarningOpen}
+        onClose={() => setIsWarningOpen(false)}
+        percentOfQuota={stats?.disk.percentOfQuota ?? 0}
+      />
+      <DiskQuotaCriticalDialog
+        isOpen={isCriticalOpen}
+        sandboxId={currentSandbox?.id ?? null}
+        workspaceUsedBytes={stats?.disk.workspaceUsedBytes ?? 0}
+        quotaBytes={stats?.disk.quotaBytes ?? 0}
+        percentOfQuota={stats?.disk.percentOfQuota ?? 0}
+      />
+    </div>
+  );
+}

package/src/components/shell/SandboxBuildingOverlay.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import type { SandboxOperation } from "../../contexts/SandboxContext";
+import { useT } from "../../i18n/useT";
+
+interface SandboxBuildingOverlayProps {
+  operation: SandboxOperation;
+  error: string | null;
+  onDismiss: () => void;
+}
+
+function getStatusKey(operation: SandboxOperation, timedOut: boolean) {
+  if (timedOut) {
+    return "sandbox.overlay.timeout";
+  }
+  switch (operation) {
+    case "creating":
+      return "sandbox.overlay.creating";
+    case "rebuilding":
+      return "sandbox.overlay.rebuilding";
+    default:
+      return "sandbox.overlay.preparing";
+  }
+}
+
+const TIMEOUT_MS = 30000;
+const DISMISS_DELAY_MS = 2500;
+
+export function SandboxBuildingOverlay({ operation, error, onDismiss }: SandboxBuildingOverlayProps) {
+  const t = useT();
+  const [timedOut, setTimedOut] = useState(false);
+
+  useEffect(() => {
+    setTimedOut(false);
+    const timeoutTimer = window.setTimeout(() => {
+      setTimedOut(true);
+    }, TIMEOUT_MS);
+    return () => window.clearTimeout(timeoutTimer);
+  }, [operation]);
+
+  useEffect(() => {
+    if (!timedOut) {
+      return;
+    }
+    const dismissTimer = window.setTimeout(() => {
+      onDismiss();
+    }, DISMISS_DELAY_MS);
+    return () => window.clearTimeout(dismissTimer);
+  }, [timedOut, onDismiss]);
+
+  return (
+    <div
+      className="sandbox-building-overlay"
+      role="dialog"
+      aria-live="polite"
+      aria-label={t("sandbox.overlay.aria")}
+    >
+      <div className="sandbox-building-panel">
+        {!timedOut ? (
+          <div className="sandbox-building__spinner" aria-hidden="true">
+            <span />
+            <span />
+            <span />
+          </div>
+        ) : null}
+        <h2 className="sandbox-building__title">{t("sandbox.overlay.title")}</h2>
+        <p className={`sandbox-building__status ${timedOut ? "is-timeout" : ""}`}>
+          {t(getStatusKey(operation, timedOut))}
+        </p>
+        {error ? <p className="sandbox-building__error">{error}</p> : null}
+      </div>
+    </div>
+  );
+}

package/src/components/shell/SandboxStatus.tsx

@@ -0,0 +1,287 @@
+import { useEffect, useRef, useState } from "react";
+import { useSandbox } from "../../contexts/SandboxContext";
+import { useSessions } from "../../contexts/SessionContext";
+import { useT } from "../../i18n/useT";
+import { api } from "../../utils/api";
+import { runtimeConfig } from "../../config";
+
+type SandboxConnectionState = "disconnected" | "connected" | "connecting" | "creating";
+
+const connectionLabelKey: Record<SandboxConnectionState, string> = {
+  disconnected: "sandbox.conn.disconnected",
+  connected: "sandbox.conn.connected",
+  connecting: "sandbox.conn.connecting",
+  creating: "sandbox.conn.creating",
+};
+
+function formatBytes(bytes?: number) {
+  if (!bytes) {
+    return "-";
+  }
+  const units = ["B", "KB", "MB", "GB"];
+  const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / 1024 ** index;
+  return `${value >= 10 ? value.toFixed(0) : value.toFixed(1)} ${units[index]}`;
+}
+
+function getConnectionState(status: string, isConnected: boolean): SandboxConnectionState {
+  if (status === "running" && isConnected) {
+    return "connected";
+  }
+  if (status === "running" && !isConnected) {
+    return "connecting";
+  }
+  if (status === "creating" || status === "rebuilding") {
+    return "creating";
+  }
+  if (status === "loading") {
+    return "connecting";
+  }
+  return "disconnected";
+}
+
+function getStatusKey(status: string, isConnected: boolean) {
+  switch (status) {
+    case "creating":
+      return { key: "sandbox.status.creating" };
+    case "rebuilding":
+      return { key: "sandbox.status.rebuilding" };
+    case "destroying":
+      return { key: "sandbox.status.destroying" };
+    case "missing":
+      return { key: "sandbox.status.missing" };
+    case "quota_exceeded":
+      return { key: "sandbox.status.quotaExceeded" };
+    case "error":
+      return { key: "sandbox.status.error" };
+    case "running":
+      return { key: isConnected ? "sandbox.status.running" : "sandbox.status.runningDisconnected" };
+    default:
+      return { key: "sandbox.status.fallback", vars: { status } };
+  }
+}
+
+export function SandboxStatus() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [logs, setLogs] = useState("");
+  const [health, setHealth] = useState<Record<string, unknown> | null>(null);
+  const [detailsLoading, setDetailsLoading] = useState(false);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const {
+    currentSandbox,
+    stats,
+    status,
+    operation,
+    error,
+    createSandbox,
+    rebuildSandbox,
+    destroySandbox,
+    refresh,
+  } = useSandbox();
+  const { isConnected } = useSessions();
+  const t = useT();
+  const effectiveStatus = operation === "idle" ? status : operation;
+  const connection = getConnectionState(effectiveStatus, isConnected);
+  const isLoading = operation !== "idle" && operation !== "loading";
+  const hasSandbox = !!currentSandbox;
+
+  const loadDetails = async () => {
+    if (!currentSandbox) {
+      return;
+    }
+    // Local single-user mode has no container logs/health endpoints — the
+    // runtime IS the sandbox. Skip the detail fetch (would hit nonexistent
+    // /api/sandbox/* routes and fall through to the SPA HTML fallback).
+    if (runtimeConfig.localMode) {
+      return;
+    }
+    setDetailsLoading(true);
+    try {
+      const [nextLogs, nextHealth] = await Promise.all([
+        api.sandbox.logs(currentSandbox.id, 80),
+        api.sandbox.health(currentSandbox.id),
+      ]);
+      setLogs(nextLogs);
+      setHealth(nextHealth);
+    } catch (detailError) {
+      setLogs(detailError instanceof Error ? detailError.message : t("sandbox.logs.failed"));
+      setHealth({ status: "error" });
+    } finally {
+      setDetailsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!rootRef.current || rootRef.current.contains(event.target as Node)) {
+        return;
+      }
+      setIsOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen || !currentSandbox) {
+      return;
+    }
+    void loadDetails();
+  }, [currentSandbox?.id, isOpen]);
+
+  return (
+    <div className="sandbox-status" ref={rootRef}>
+      <button
+        aria-controls="sandbox-status-popover"
+        aria-expanded={isOpen}
+        className={`sandbox-status__trigger sandbox-status__trigger--${connection}`}
+        onClick={() => setIsOpen((current) => !current)}
+        type="button"
+      >
+        <span className="sandbox-status__dot" aria-hidden="true" />
+        <span>Sandbox</span>
+      </button>
+
+      <div
+        aria-label={t("sandbox.aria.status")}
+        className={`sandbox-status__popover ${isOpen ? "is-open" : ""}`}
+        id="sandbox-status-popover"
+        role="dialog"
+      >
+        <div className="sandbox-status__header">
+          <span className="sandbox-status__eyebrow">Sandbox</span>
+          <strong>{t(connectionLabelKey[connection])}</strong>
+        </div>
+
+        <p className={`sandbox-status__notice ${isLoading ? "is-loading" : ""}`}>
+          {(() => {
+            const notice = getStatusKey(effectiveStatus, isConnected);
+            return t(notice.key, notice.vars);
+          })()}
+        </p>
+        {error ? <p className="sandbox-status__empty">{error}</p> : null}
+
+        {hasSandbox ? (
+          <>
+            <dl className="sandbox-status__grid">
+              <div>
+                <dt>{t("sandbox.label.name")}</dt>
+                <dd>{currentSandbox.name}</dd>
+              </div>
+              <div>
+                <dt>{t("sandbox.label.id")}</dt>
+                <dd>{currentSandbox.id}</dd>
+              </div>
+              <div>
+                <dt>{t("sandbox.label.container")}</dt>
+                <dd>{currentSandbox.containerName || "-"}</dd>
+              </div>
+              <div>
+                <dt>{t("sandbox.label.hostApi")}</dt>
+                <dd>{currentSandbox.hostApiUrl || "-"}</dd>
+              </div>
+              <div>
+                <dt>{t("sandbox.label.port")}</dt>
+                <dd>{currentSandbox.port ?? "-"}</dd>
+              </div>
+              <div>
+                <dt>{t("sandbox.label.created")}</dt>
+                <dd>{new Date(currentSandbox.createdAt).toLocaleString()}</dd>
+              </div>
+            </dl>
+
+            <div className="sandbox-status__metrics">
+              <div>
+                <span>{t("sandbox.label.memory")}</span>
+                <strong>
+                  {formatBytes(stats?.memory.usedBytes)} / {formatBytes(stats?.memory.limitBytes)}
+                </strong>
+                <small>{stats?.memory.percent ?? 0}%</small>
+              </div>
+              <div>
+                <span>{t("sandbox.label.cpu")}</span>
+                <strong>{t("sandbox.cpuUsed", { percent: stats?.cpu.usedPercent ?? 0 })}</strong>
+                <small>
+                  {t("sandbox.cpuQuota", { quota: stats?.cpu.quotaPercent ?? 0, cpus: stats?.cpu.onlineCpus ?? 0 })}
+                </small>
+              </div>
+              <div>
+                <span>{t("sandbox.label.pids")}</span>
+                <strong>
+                  {stats?.pids.current ?? 0} / {stats?.pids.limit ?? t("sandbox.unlimited")}
+                </strong>
+              </div>
+              <div>
+                <span>{t("sandbox.label.disk")}</span>
+                <strong>
+                  {formatBytes(stats?.disk.workspaceUsedBytes)} / {formatBytes(stats?.disk.quotaBytes)}
+                </strong>
+                <small>{stats?.disk.percentOfQuota ?? 0}%</small>
+              </div>
+            </div>
+
+            <div className="sandbox-status__health">
+              <div>
+                <span>{t("sandbox.label.health")}</span>
+                <strong>{String(health?.status ?? (detailsLoading ? t("sandbox.health.checking") : t("sandbox.health.unknown")))}</strong>
+              </div>
+              <div>
+                <span>{t("sandbox.label.runtime")}</span>
+                <strong>{health?.agent_runtime === false ? t("sandbox.health.offline") : health?.agent_runtime ? t("sandbox.health.online") : "-"}</strong>
+              </div>
+              <div>
+                <span>{t("sandbox.label.sse")}</span>
+                <strong>{isConnected ? t("sandbox.health.connected") : t("sandbox.health.offline")}</strong>
+              </div>
+              <div>
+                <span>{t("sandbox.label.checked")}</span>
+                <strong>{health?.checked_at ? new Date(String(health.checked_at)).toLocaleTimeString() : "-"}</strong>
+              </div>
+            </div>
+
+            <pre className="sandbox-status__logs">{detailsLoading ? t("sandbox.logs.loading") : logs || t("sandbox.logs.empty")}</pre>
+          </>
+        ) : (
+          <p className="sandbox-status__empty">{t("sandbox.empty")}</p>
+        )}
+
+        <div className="sandbox-status__actions">
+          {hasSandbox ? (
+            <>
+              <button disabled={isLoading} onClick={() => void rebuildSandbox()} type="button">
+                {t("sandbox.action.rebuild")}
+              </button>
+              <button disabled={isLoading} onClick={() => void refresh()} type="button">
+                {t("sandbox.action.refresh")}
+              </button>
+              <button disabled={detailsLoading} onClick={() => void loadDetails()} type="button">
+                {t("sandbox.action.logs")}
+              </button>
+              <button
+                className="sandbox-status__danger-action"
+                disabled={isLoading}
+                onClick={() => void destroySandbox()}
+                type="button"
+              >
+                {t("sandbox.action.delete")}
+              </button>
+            </>
+          ) : (
+            <button disabled={isLoading} onClick={() => void createSandbox()} type="button">
+              {t("sandbox.action.build")}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}