@brainpilot/web 0.0.3 → 0.0.5

package/src/components/files/filePreview.ts

@@ -0,0 +1,113 @@
+/**
+ * Pure helpers for classifying and describing workspace files. Shared by the
+ * live file preview panel (FileSidebar) and the demo player's embedded preview.
+ */
+
+export const ONE_MB = 1024 * 1024;
+
+/**
+ * Upper bound for previewing BINARY files (images/PDF) via a blob URL. Text
+ * files keep the smaller {@link ONE_MB} inline cap (they're held in memory as a
+ * string); binary previews are streamed to an <img>/<iframe>, so a larger cap
+ * is fine. Above this, the panel shows a "too large" notice + a download button.
+ */
+export const MAX_BINARY_PREVIEW = 50 * ONE_MB;
+
+export type PreviewKind = "text" | "image" | "pdf" | "download";
+
+export function getPreviewKind(fileName: string): PreviewKind {
+  if (/\.(png|jpg|jpeg|gif|webp|svg)$/i.test(fileName)) {
+    return "image";
+  }
+  if (/\.pdf$/i.test(fileName)) {
+    return "pdf";
+  }
+  if (/\.(md|txt|py|yaml|yml|csv|json|ts|tsx|js|jsx|css|html|xml|toml|ini|log)$/i.test(fileName)) {
+    return "text";
+  }
+  return "download";
+}
+
+export function isMarkdown(fileName: string): boolean {
+  return /\.(md|markdown)$/i.test(fileName);
+}
+
+/**
+ * highlight.js language id for a filename, for syntax-highlighted code preview.
+ * Returns "plaintext" for plain/unknown text so callers skip highlighting.
+ * Language ids are limited to those in highlight.js's "common" bundle.
+ */
+export function codeLanguage(fileName: string): string {
+  const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
+  const map: Record<string, string> = {
+    py: "python",
+    ts: "typescript",
+    tsx: "typescript",
+    js: "javascript",
+    jsx: "javascript",
+    json: "json",
+    yaml: "yaml",
+    yml: "yaml",
+    css: "css",
+    html: "xml",
+    xml: "xml",
+    toml: "ini",
+    ini: "ini",
+  };
+  return map[ext] ?? "plaintext";
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) {
+    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]}`;
+}
+
+export function formatModified(timestamp: number): string {
+  if (!timestamp) {
+    return "-";
+  }
+  return new Intl.DateTimeFormat("en", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(new Date(timestamp * 1000));
+}
+
+/** Best-effort MIME type from a file extension (used when embedding files). */
+export function mimeFromName(fileName: string): string {
+  const ext = fileName.split(".").pop()?.toLowerCase() ?? "";
+  const map: Record<string, string> = {
+    png: "image/png",
+    jpg: "image/jpeg",
+    jpeg: "image/jpeg",
+    gif: "image/gif",
+    webp: "image/webp",
+    svg: "image/svg+xml",
+    pdf: "application/pdf",
+    md: "text/markdown",
+    markdown: "text/markdown",
+    txt: "text/plain",
+    csv: "text/csv",
+    json: "application/json",
+    yaml: "text/yaml",
+    yml: "text/yaml",
+    py: "text/x-python",
+    ts: "text/typescript",
+    tsx: "text/typescript",
+    js: "text/javascript",
+    jsx: "text/javascript",
+    css: "text/css",
+    html: "text/html",
+    xml: "application/xml",
+    toml: "text/plain",
+    ini: "text/plain",
+    log: "text/plain",
+  };
+  return map[ext] ?? "application/octet-stream";
+}

package/src/components/primitives/CustomSelect.tsx

@@ -0,0 +1,200 @@
+import { Check, ChevronDown } from "lucide-react";
+import { CSSProperties, KeyboardEvent, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import type { ReactNode } from "react";
+
+export type CustomSelectOption = {
+  value: string;
+  label: string;
+  indicator?: ReactNode;
+};
+
+type CustomSelectProps = {
+  value: string;
+  options: CustomSelectOption[];
+  onChange: (value: string) => void;
+  ariaLabel: string;
+  className?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  title?: string;
+};
+
+export function CustomSelect({
+  value,
+  options,
+  onChange,
+  ariaLabel,
+  className = "",
+  disabled = false,
+  placeholder = "Select",
+  title,
+}: CustomSelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
+  const [placement, setPlacement] = useState<"top" | "bottom">("bottom");
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
+  const listboxId = useId();
+  const selectedIndex = options.findIndex((option) => option.value === value);
+  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : null;
+  const activeIndex = selectedIndex >= 0 ? selectedIndex : 0;
+  const activeOptionId = isOpen && options[activeIndex] ? `${listboxId}-${activeIndex}` : undefined;
+  const rootClassName = `custom-select ${isOpen ? "is-open" : ""} custom-select--${placement} ${disabled ? "is-disabled" : ""} ${className}`.trim();
+  const updateMenuPosition = useCallback(() => {
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const gap = 6;
+    const viewportPadding = 12;
+    const preferredMenuHeight = Math.min(220, Math.max(44, options.length * 34 + 8));
+    const availableBelow = window.innerHeight - rect.bottom - viewportPadding;
+    const availableAbove = rect.top - viewportPadding;
+    const nextPlacement = availableBelow < preferredMenuHeight && availableAbove > availableBelow ? "top" : "bottom";
+    const menuWidth = Math.max(rect.width, Math.min(280, window.innerWidth - viewportPadding * 2));
+    const left = Math.min(Math.max(viewportPadding, rect.right - menuWidth), window.innerWidth - menuWidth - viewportPadding);
+
+    setPlacement(nextPlacement);
+    setMenuStyle({
+      left,
+      minWidth: rect.width,
+      width: menuWidth,
+      ...(nextPlacement === "top"
+        ? { bottom: window.innerHeight - rect.top + gap, maxHeight: Math.max(120, availableAbove - gap) }
+        : { top: rect.bottom + gap, maxHeight: Math.max(120, availableBelow - gap) }),
+    });
+  }, [options.length]);
+
+  useLayoutEffect(() => {
+    if (isOpen) {
+      updateMenuPosition();
+    }
+  }, [isOpen, updateMenuPosition]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleReposition = () => updateMenuPosition();
+    document.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("resize", handleReposition);
+    window.addEventListener("scroll", handleReposition, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("resize", handleReposition);
+      window.removeEventListener("scroll", handleReposition, true);
+    };
+  }, [isOpen, updateMenuPosition]);
+
+  const normalizedOptions = useMemo(() => options, [options]);
+
+  const selectOption = (nextValue: string) => {
+    onChange(nextValue);
+    setIsOpen(false);
+  };
+
+  const moveSelection = (direction: 1 | -1) => {
+    if (normalizedOptions.length === 0) {
+      return;
+    }
+    const nextIndex = selectedIndex >= 0
+      ? (selectedIndex + direction + normalizedOptions.length) % normalizedOptions.length
+      : 0;
+    onChange(normalizedOptions[nextIndex].value);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "Escape") {
+      setIsOpen(false);
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
+      moveSelection(1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
+      moveSelection(-1);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setIsOpen((current) => !current);
+    }
+  };
+
+  const menu = isOpen ? createPortal(
+    <div
+      className={`custom-select__menu custom-select__menu--floating custom-select__menu--${placement}`}
+      id={listboxId}
+      ref={menuRef}
+      role="listbox"
+      style={menuStyle}
+    >
+      {normalizedOptions.map((option, index) => {
+        const isSelected = option.value === value;
+        return (
+          <button
+            aria-selected={isSelected}
+            className={`custom-select__option ${isSelected ? "is-selected" : ""}`.trim()}
+            id={`${listboxId}-${index}`}
+            key={option.value}
+            onClick={() => selectOption(option.value)}
+            role="option"
+            type="button"
+          >
+            <span className="custom-select__option-label">
+              {option.indicator ? <span className="custom-select__option-indicator">{option.indicator}</span> : null}
+              {option.label}
+            </span>
+            {isSelected ? <Check aria-hidden="true" size={14} /> : null}
+          </button>
+        );
+      })}
+    </div>,
+    document.body,
+  ) : null;
+
+  return (
+    <div className={rootClassName} ref={rootRef}>
+      <button
+        aria-activedescendant={activeOptionId}
+        aria-controls={listboxId}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        aria-label={ariaLabel}
+        className="custom-select__trigger"
+        disabled={disabled}
+        onClick={() => setIsOpen((current) => !current)}
+        onKeyDown={handleKeyDown}
+        title={title}
+        type="button"
+      >
+        <span className={`custom-select__value ${selectedOption ? "" : "is-placeholder"}`.trim()}>
+          {selectedOption?.indicator ? <span className="custom-select__value-indicator">{selectedOption.indicator}</span> : null}
+          {selectedOption?.label ?? placeholder}
+        </span>
+        <ChevronDown aria-hidden="true" size={14} />
+      </button>
+      {menu}
+    </div>
+  );
+}

package/src/components/primitives/IconButton.tsx

@@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  label: string;
+  children: ReactNode;
+  variant?: "ghost" | "soft" | "strong";
+};
+
+export function IconButton({
+  label,
+  children,
+  className = "",
+  variant = "ghost",
+  ...props
+}: IconButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      className={`icon-button icon-button--${variant} ${className}`.trim()}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/quota/DiskQuotaCriticalDialog.tsx

@@ -0,0 +1,56 @@
+import { AlertTriangle } from "lucide-react";
+import { QuotaFileManager } from "./QuotaFileManager";
+import { formatBytes } from "../../utils/format";
+import { useT } from "../../i18n/useT";
+
+type DiskQuotaCriticalDialogProps = {
+  isOpen: boolean;
+  sandboxId: string | null;
+  workspaceUsedBytes: number;
+  quotaBytes: number;
+  percentOfQuota: number;
+};
+
+export function DiskQuotaCriticalDialog({
+  isOpen,
+  sandboxId,
+  workspaceUsedBytes,
+  quotaBytes,
+  percentOfQuota,
+}: DiskQuotaCriticalDialogProps) {
+  const t = useT();
+  if (!isOpen) return null;
+
+  return (
+    <div className="quota-critical-modal" role="presentation">
+      <section
+        className="quota-critical-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="quota-critical-title"
+      >
+        <div className="quota-critical-dialog__header">
+          <h2 id="quota-critical-title">
+            <AlertTriangle size={16} style={{ marginRight: 8, verticalAlign: "-2px" }} />
+            {t("quota.critical.title")}
+          </h2>
+        </div>
+        <div className="quota-critical-dialog__body">
+          {sandboxId ? (
+            <QuotaFileManager sandboxId={sandboxId} />
+          ) : (
+            <p className="file-sidebar__empty">{t("quota.critical.unavailable")}</p>
+          )}
+        </div>
+        <div className="quota-critical-dialog__footer">
+          <span>
+            {t("quota.critical.used", { used: formatBytes(workspaceUsedBytes), limit: formatBytes(quotaBytes) })}
+          </span>
+          <span style={{ color: "var(--color-danger)", fontWeight: 600 }}>
+            {percentOfQuota.toFixed(0)}%
+          </span>
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/components/quota/DiskQuotaWarningDialog.tsx

@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import { AlertTriangle, X } from "lucide-react";
+import { useT } from "../../i18n/useT";
+import { IconButton } from "../primitives/IconButton";
+
+type DiskQuotaWarningDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  percentOfQuota: number;
+};
+
+export function DiskQuotaWarningDialog({ isOpen, onClose, percentOfQuota }: DiskQuotaWarningDialogProps) {
+  const t = useT();
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="quota-warning-modal"
+      onClick={onClose}
+      role="presentation"
+    >
+      <section
+        className="quota-warning-dialog"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="quota-warning-title"
+      >
+        <div className="quota-warning-dialog__header">
+          <h2 id="quota-warning-title">
+            <AlertTriangle size={16} style={{ marginRight: 8, verticalAlign: "-2px", color: "var(--color-warning)" }} />
+            {t("quota.warning.title")}
+          </h2>
+          <IconButton label={t("quota.warning.close")} onClick={onClose}>
+            <X size={16} />
+          </IconButton>
+        </div>
+        <div className="quota-warning-dialog__body">
+          <p>
+            {t("quota.warning.bodyPrefix")}<strong>{percentOfQuota.toFixed(0)}%</strong>{t("quota.warning.bodySuffix")}
+          </p>
+          <p style={{ marginTop: 8 }}>
+            {t("quota.warning.body2")}
+          </p>
+        </div>
+        <div className="quota-warning-dialog__actions">
+          <button onClick={onClose} type="button">
+            {t("quota.warning.ack")}
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}

package/src/components/quota/QuotaFileManager.tsx

@@ -0,0 +1,197 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ChevronRight, File, Folder, Trash2 } from "lucide-react";
+import { FileEntry } from "../../contracts/backend";
+import { useT } from "../../i18n/useT";
+import { api } from "../../utils/api";
+
+type FileNode = FileEntry & {
+  path: string;
+  children?: FileNode[];
+  loaded?: boolean;
+};
+
+type QuotaFileManagerProps = {
+  sandboxId: string;
+};
+
+const rootNode: FileNode = {
+  name: "workspace",
+  path: "/workspace",
+  type: "folder",
+  size: 0,
+  modified: 0,
+  permissions: "",
+};
+
+function joinPath(parent: string, name: string) {
+  return `${parent.replace(/\/$/, "")}/${name}`;
+}
+
+function formatBytes(bytes: number) {
+  if (bytes === 0) 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]}`;
+}
+
+export function QuotaFileManager({ sandboxId }: QuotaFileManagerProps) {
+  const t = useT();
+  const [tree, setTree] = useState<FileNode>({ ...rootNode });
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set(["/workspace"]));
+  const [isDeleting, setIsDeleting] = useState<Set<string>>(new Set());
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const loadDirectory = useCallback(
+    async (path: string) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const entries = await api.sandbox.listFiles(sandboxId, path);
+        const children = entries.map((e) => ({
+          ...e,
+          path: joinPath(path, e.name),
+        }));
+        setTree((current) => updateNodeChildren(current, path, children));
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t("quota.fm.loadFailed"));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [sandboxId, t]
+  );
+
+  useEffect(() => {
+    void loadDirectory("/workspace");
+  }, [loadDirectory]);
+
+  const toggleFolder = useCallback(
+    (node: FileNode) => {
+      setExpandedPaths((current) => {
+        const next = new Set(current);
+        if (next.has(node.path)) {
+          next.delete(node.path);
+        } else {
+          next.add(node.path);
+          if (!node.loaded) {
+            void loadDirectory(node.path);
+          }
+        }
+        return next;
+      });
+    },
+    [loadDirectory]
+  );
+
+  const handleDelete = useCallback(
+    async (node: FileNode) => {
+      if (!window.confirm(t("quota.fm.confirmDelete", { name: node.name }))) return;
+      setIsDeleting((current) => {
+        const next = new Set(current);
+        next.add(node.path);
+        return next;
+      });
+      setError(null);
+      try {
+        await api.sandbox.deleteFile(sandboxId, node.path);
+        setTree((current) => removeNode(current, node.path));
+        setExpandedPaths((current) => {
+          const next = new Set(current);
+          next.delete(node.path);
+          return next;
+        });
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t("quota.fm.deleteFailed"));
+      } finally {
+        setIsDeleting((current) => {
+          const next = new Set(current);
+          next.delete(node.path);
+          return next;
+        });
+      }
+    },
+    [sandboxId, t]
+  );
+
+  const renderNode = (node: FileNode, depth = 0): JSX.Element => {
+    const isFolder = node.type === "folder";
+    const isExpanded = expandedPaths.has(node.path);
+    const isRowDeleting = isDeleting.has(node.path);
+
+    return (
+      <div className="file-node" key={node.path}>
+        <div className="file-row file-row--deletable">
+          <button
+            className="file-row__open"
+            onClick={() => {
+              if (isFolder) {
+                toggleFolder(node);
+              }
+            }}
+            style={{ marginLeft: depth * 16 }}
+            type="button"
+          >
+            <span className={`file-row__chevron ${isFolder && isExpanded ? "is-expanded" : ""}`}>
+              {isFolder ? <ChevronRight size={14} /> : null}
+            </span>
+            {isFolder ? (
+              <Folder size={14} />
+            ) : (
+              <File size={14} />
+            )}
+            <span className="file-row__name">{node.name}</span>
+            <span className="file-row__size">{formatBytes(node.size)}</span>
+          </button>
+          <button
+            className="file-row__delete"
+            disabled={isRowDeleting}
+            onClick={() => void handleDelete(node)}
+            title={t("quota.fm.delete")}
+            type="button"
+          >
+            <Trash2 size={14} />
+          </button>
+        </div>
+        {isFolder && isExpanded
+          ? node.children?.map((child) => renderNode(child, depth + 1))
+          : null}
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      {error ? <p className="quota-file-manager__error">{error}</p> : null}
+      {isLoading && tree.children == null ? (
+        <p className="file-sidebar__empty">{t("quota.fm.loading")}</p>
+      ) : (
+        <div className="file-sidebar__tree">{renderNode(tree)}</div>
+      )}
+    </div>
+  );
+}
+
+function updateNodeChildren(root: FileNode, targetPath: string, children: FileNode[]): FileNode {
+  if (root.path === targetPath) {
+    return { ...root, children: [...children], loaded: true };
+  }
+  if (root.children) {
+    return {
+      ...root,
+      children: root.children.map((child) => updateNodeChildren(child, targetPath, children)),
+    };
+  }
+  return root;
+}
+
+function removeNode(root: FileNode, targetPath: string): FileNode {
+  if (root.children) {
+    const filtered = root.children
+      .filter((child) => child.path !== targetPath)
+      .map((child) => removeNode(child, targetPath));
+    return { ...root, children: filtered };
+  }
+  return root;
+}