@marimo-team/frontend 0.15.4 → 0.16.0-dev96986

package/src/components/terminal/terminal.tsx

@@ -1,35 +1,249 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { AttachAddon } from "@xterm/addon-attach";
+import { CanvasAddon } from "@xterm/addon-canvas";
 import { FitAddon } from "@xterm/addon-fit";
+import { SearchAddon } from "@xterm/addon-search";
+import { Unicode11Addon } from "@xterm/addon-unicode11";
+import { WebLinksAddon } from "@xterm/addon-web-links";
 import { Terminal } from "@xterm/xterm";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import "@xterm/xterm/css/xterm.css";
 import "./xterm.css";
+import {
+  ClipboardPasteIcon,
+  CopyIcon,
+  TextSelectionIcon,
+  Trash2Icon,
+} from "lucide-react";
+import useEvent from "react-use-event-hook";
 import { waitForConnectionOpen } from "@/core/network/connection";
 import { useRuntimeManager } from "@/core/runtime/config";
+import { useDebouncedCallback } from "@/hooks/useDebounce";
+import { cn } from "@/utils/cn";
+import { copyToClipboard } from "@/utils/copy";
 import { Logger } from "@/utils/Logger";
+import { MinimalHotkeys } from "../shortcuts/renderShortcut";
+import { useTerminalActions, useTerminalState } from "./state";
+import { createTerminalTheme } from "./theme";
 
-const TerminalComponent: React.FC<{
+interface TerminalButtonProps {
+  onClick: () => void;
+  disabled?: boolean;
+  icon: React.ComponentType<{ className?: string }>;
+  children: React.ReactNode;
+  keyboardShortcut?: string;
+}
+
+const TerminalButton: React.FC<TerminalButtonProps> = ({
+  onClick,
+  disabled = false,
+  icon: Icon,
+  children,
+  keyboardShortcut,
+}) => (
+  <button
+    className={cn(
+      "w-full text-left px-3 py-2 text-sm flex items-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-muted",
+    )}
+    type="button"
+    onClick={onClick}
+    disabled={disabled}
+  >
+    <Icon className="w-4 h-4" />
+    {children}
+    {keyboardShortcut && (
+      <MinimalHotkeys className="ml-auto" shortcut={keyboardShortcut} />
+    )}
+  </button>
+);
+
+interface TerminalComponentProps {
   visible: boolean;
   onClose: () => void;
-}> = ({ visible, onClose }) => {
+}
+
+interface Position {
+  x: number;
+  y: number;
+  placement: "bottom" | "top"; // Whether to place the menu above or below the cursor
+}
+
+// Keyboard shortcut handlers
+function createKeyboardHandler(terminal: Terminal, _searchAddon: SearchAddon) {
+  return (event: KeyboardEvent) => {
+    const { ctrlKey, metaKey, key } = event;
+    const modifier = ctrlKey || metaKey;
+
+    if (modifier) {
+      switch (key) {
+        case "c":
+          if (terminal.hasSelection()) {
+            event.preventDefault();
+            void copyToClipboard(terminal.getSelection());
+          }
+          break;
+        case "v":
+          event.preventDefault();
+          void navigator.clipboard.readText().then((text) => {
+            terminal.paste(text);
+          });
+          break;
+        case "a":
+          event.preventDefault();
+          terminal.selectAll();
+          break;
+        case "l":
+          event.preventDefault();
+          terminal.clear();
+          break;
+      }
+    }
+  };
+}
+
+// Context menu actions
+function createContextMenuActions(
+  terminal: Terminal,
+  setContextMenu: (menu: Position | null) => void,
+) {
+  const closeMenu = () => setContextMenu(null);
+
+  return {
+    handleCopy: () => {
+      if (terminal.hasSelection()) {
+        navigator.clipboard.writeText(terminal.getSelection());
+      }
+      closeMenu();
+    },
+    handlePaste: () => {
+      navigator.clipboard.readText().then((text) => {
+        terminal.paste(text);
+      });
+      closeMenu();
+    },
+    handleSelectAll: () => {
+      terminal.selectAll();
+      closeMenu();
+    },
+    handleClear: () => {
+      terminal.clear();
+      closeMenu();
+    },
+    closeMenu,
+  };
+}
+
+const RESIZE_DEBOUNCE_TIME = 100;
+
+const TerminalComponent: React.FC<TerminalComponentProps> = ({
+  visible,
+  onClose,
+}) => {
   const terminalRef = useRef<HTMLDivElement>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+
   // eslint-disable-next-line react/hook-use-state
-  const [{ terminal, fitAddon }] = useState(() => {
+  const [{ terminal, fitAddon, searchAddon }] = useState(() => {
     // Create a new terminal instance
     const term = new Terminal({
       fontFamily:
         "Menlo, DejaVu Sans Mono, Consolas, Lucida Console, monospace",
       fontSize: 14,
+      scrollback: 10_000,
+      cursorBlink: true,
+      cursorStyle: "block",
+      allowTransparency: false,
+      theme: createTerminalTheme("dark"),
+      rightClickSelectsWord: true,
+      wordSeparator: " \t\r\n\"'`(){}[]<>|&;",
+      allowProposedApi: true,
     });
+
+    // Load essential addons
     const fitAddon = new FitAddon();
+    const searchAddon = new SearchAddon();
+    const canvasAddon = new CanvasAddon();
+    const unicode11Addon = new Unicode11Addon();
+    const webLinksAddon = new WebLinksAddon();
+
     term.loadAddon(fitAddon);
-    return { terminal: term, fitAddon };
+    term.loadAddon(searchAddon);
+    term.loadAddon(canvasAddon);
+    term.loadAddon(unicode11Addon);
+    term.loadAddon(webLinksAddon);
+
+    // Set Unicode version
+    term.unicode.activeVersion = "11";
+
+    return { terminal: term, fitAddon, searchAddon };
   });
+
   const [initialized, setInitialized] = React.useState(false);
+  const [contextMenu, setContextMenu] = useState<Position | null>(null);
   const runtimeManager = useRuntimeManager();
 
+  // Terminal command state management
+  const terminalState = useTerminalState();
+  const { removeCommand, setReady } = useTerminalActions();
+
+  // Keyboard shortcuts handler
+  const handleKeyDown = useEvent(createKeyboardHandler(terminal, searchAddon));
+
+  // Context menu handler
+  const handleContextMenu = useEvent((event: MouseEvent) => {
+    event.preventDefault();
+
+    const menuHeight = 200; // Approximate height of the context menu
+    const viewportHeight = window.innerHeight;
+    const cursorY = event.clientY;
+
+    // Check if there's enough space below the cursor
+    const spaceBelow = viewportHeight - cursorY;
+    const shouldPlaceAbove = spaceBelow < menuHeight;
+
+    setContextMenu({
+      x: event.clientX,
+      y: event.clientY,
+      placement: shouldPlaceAbove ? "top" : "bottom",
+    });
+  });
+
+  // Close context menu on click outside
+  const handleClickOutside = useEvent((event: MouseEvent) => {
+    const target = event.target;
+    const isInsideContextMenu =
+      target &&
+      target instanceof HTMLElement &&
+      target.closest(".xterm-context-menu");
+    if (contextMenu && !isInsideContextMenu) {
+      setContextMenu(null);
+    }
+  });
+
+  const handleBackendResizeDebounced = useDebouncedCallback(
+    ({ cols, rows }: { cols: number; rows: number }) => {
+      if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+        Logger.debug("Sending resize to backend terminal", { cols, rows });
+        wsRef.current.send(JSON.stringify({ type: "resize", cols, rows }));
+      }
+    },
+    RESIZE_DEBOUNCE_TIME,
+  );
+
+  const handleResize = useEvent(() => {
+    if (!terminal || !fitAddon) {
+      return;
+    }
+    fitAddon.fit();
+  });
+
+  // Context menu actions
+  const { handleCopy, handlePaste, handleSelectAll, handleClear } = useMemo(
+    () => createContextMenuActions(terminal, setContextMenu),
+    [terminal],
+  );
+
   // Websocket Connection
   useEffect(() => {
     if (initialized) {
@@ -43,16 +257,37 @@ const TerminalComponent: React.FC<{
         const socket = new WebSocket(runtimeManager.getTerminalWsURL());
         const attachAddon = new AttachAddon(socket);
         terminal.loadAddon(attachAddon);
+        wsRef.current = socket;
+
+        // Terminal is ready when the websocket is open
+        const updateReadyState = () => {
+          setReady(socket.readyState === WebSocket.OPEN);
+        };
+
+        const handleError = () => {
+          updateReadyState();
+        };
+
+        const handleOpen = () => {
+          updateReadyState();
+        };
 
         const handleDisconnect = () => {
           onClose();
           // Reset
           attachAddon.dispose();
+          wsRef.current = null;
           terminal.clear();
           setInitialized(false);
+          setReady(false);
         };
 
+        socket.addEventListener("open", handleOpen);
         socket.addEventListener("close", handleDisconnect);
+        socket.addEventListener("error", handleError);
+
+        // Set initial ready state
+        updateReadyState();
         setInitialized(true);
       } catch (error) {
         Logger.error("Runtime health check failed for terminal", error);
@@ -68,6 +303,30 @@ const TerminalComponent: React.FC<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialized]);
 
+  // Process pending commands when terminal is ready
+  useEffect(() => {
+    if (!terminalState.isReady || terminalState.pendingCommands.length === 0) {
+      return;
+    }
+
+    // Process all pending commands
+    for (const command of terminalState.pendingCommands) {
+      if (terminal && wsRef.current?.readyState === WebSocket.OPEN) {
+        Logger.debug("Sending programmatic command to terminal", {
+          command: command.text,
+        });
+        terminal.input(command.text);
+        terminal.focus();
+        removeCommand(command.id);
+      }
+    }
+  }, [
+    terminal,
+    terminalState.isReady,
+    terminalState.pendingCommands,
+    removeCommand,
+  ]);
+
   // When visible
   useEffect(() => {
     if (visible) {
@@ -86,23 +345,85 @@ const TerminalComponent: React.FC<{
     }
 
     terminal.open(terminalRef.current);
-    fitAddon.fit();
-    terminal.focus();
-    // Handle resize
-    const handleResize = () => {
+
+    // Initial fit with delay to ensure DOM is ready
+    setTimeout(() => {
       fitAddon.fit();
-    };
-    window.addEventListener("resize", handleResize);
+    }, RESIZE_DEBOUNCE_TIME);
+
+    terminal.focus();
+
+    const abortController = new AbortController();
+
+    // Add event listeners
+    window.addEventListener("resize", handleResize, {
+      signal: abortController.signal,
+    });
+    terminalRef.current.addEventListener("keydown", handleKeyDown, {
+      signal: abortController.signal,
+    });
+    terminalRef.current.addEventListener("contextmenu", handleContextMenu, {
+      signal: abortController.signal,
+    });
+    terminal.onResize(handleBackendResizeDebounced);
+    document.addEventListener("click", handleClickOutside, {
+      signal: abortController.signal,
+    });
 
     return () => {
-      window.removeEventListener("resize", handleResize);
+      abortController.abort();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <div className="relative w-full h-[calc(100%-4px)] dark bg-(--slate-1)">
+    <div className={"relative w-full h-[calc(100%-4px)] bg-popover"}>
       <div className="w-full h-full" ref={terminalRef} />
+      {contextMenu && (
+        <div
+          className={
+            "xterm-context-menu fixed z-50 rounded-md shadow-lg py-1 min-w-[160px] border bg-popover"
+          }
+          style={{
+            left: contextMenu.x,
+            [contextMenu.placement === "top" ? "bottom" : "top"]:
+              contextMenu.placement === "top"
+                ? window.innerHeight - contextMenu.y
+                : contextMenu.y,
+          }}
+        >
+          <TerminalButton
+            onClick={handleCopy}
+            disabled={!terminal.hasSelection()}
+            icon={CopyIcon}
+            keyboardShortcut="mod-c"
+          >
+            Copy
+          </TerminalButton>
+          <TerminalButton
+            onClick={handlePaste}
+            icon={ClipboardPasteIcon}
+            keyboardShortcut="mod-v"
+          >
+            Paste
+          </TerminalButton>
+          <hr className={cn("my-1 border-border")} />
+          <TerminalButton
+            onClick={handleSelectAll}
+            icon={TextSelectionIcon}
+            keyboardShortcut="mod-a"
+          >
+            Select all
+          </TerminalButton>
+          <TerminalButton
+            onClick={handleClear}
+            icon={Trash2Icon}
+            keyboardShortcut="mod-l"
+          >
+            Clear terminal
+          </TerminalButton>
+        </div>
+      )}
     </div>
   );
 };

package/src/components/terminal/theme.tsx

@@ -0,0 +1,57 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import type { ResolvedTheme } from "@/theme/useTheme";
+
+// Terminal theme configuration
+export function createTerminalTheme(theme: ResolvedTheme) {
+  const baseTheme = {
+    cursor: "#ffffff",
+    cursorAccent: "#000000",
+  };
+
+  return theme === "dark"
+    ? {
+        ...baseTheme,
+        background: "#0f172a", // slate-900
+        foreground: "#f8fafc", // slate-50
+        black: "#0f172a",
+        red: "#ef4444",
+        green: "#22c55e",
+        yellow: "#eab308",
+        blue: "#3b82f6",
+        magenta: "#a855f7",
+        cyan: "#06b6d4",
+        white: "#f1f5f9",
+        brightBlack: "#475569",
+        brightRed: "#f87171",
+        brightGreen: "#4ade80",
+        brightYellow: "#facc15",
+        brightBlue: "#60a5fa",
+        brightMagenta: "#c084fc",
+        brightCyan: "#22d3ee",
+        brightWhite: "#ffffff",
+        selection: "rgba(148, 163, 184, 0.3)", // slate-400 with opacity
+      }
+    : {
+        ...baseTheme,
+        background: "#ffffff", // white
+        foreground: "#0f172a", // slate-900
+        cursor: "#0f172a",
+        black: "#0f172a",
+        red: "#dc2626",
+        green: "#16a34a",
+        yellow: "#ca8a04",
+        blue: "#2563eb",
+        magenta: "#9333ea",
+        cyan: "#0891b2",
+        white: "#e2e8f0",
+        brightBlack: "#64748b",
+        brightRed: "#ef4444",
+        brightGreen: "#22c55e",
+        brightYellow: "#eab308",
+        brightBlue: "#3b82f6",
+        brightMagenta: "#a855f7",
+        brightCyan: "#06b6d4",
+        brightWhite: "#ffffff",
+        selection: "rgba(71, 85, 105, 0.2)", // slate-600 with opacity
+      };
+}

package/src/components/tracing/tracing-spec.ts

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import type { TopLevelSpec } from "vega-lite";
+import type { TimeUnit } from "vega-lite/build/src/timeunit";
 import type { CellId } from "@/core/cells/ids";
 import type { CellRun } from "@/core/cells/runs";
 import type { ResolvedTheme } from "@/theme/useTheme";
@@ -30,6 +31,8 @@ export function createGanttBaseSpec(
   chartPosition: ChartPosition,
   theme: ResolvedTheme,
 ): Readonly<TopLevelSpec> {
+  // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
+  const timeUnit: TimeUnit = "hoursminutessecondsmilliseconds";
   return {
     $schema: "https://vega.github.io/schema/vega-lite/v5.json",
     background: theme === "dark" ? "black" : undefined,
@@ -76,15 +79,13 @@ export function createGanttBaseSpec(
         {
           field: startTimestampField,
           type: "temporal",
-          // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
-          timeUnit: "hoursminutessecondsmilliseconds",
+          timeUnit: timeUnit,
           title: "Start",
         },
         {
           field: endTimestampField,
           type: "temporal",
-          // @ts-expect-error - Supported by vega/vega-lite but invalid "TimeUnit" option from exported type
-          timeUnit: "hoursminutessecondsmilliseconds",
+          timeUnit: timeUnit,
           title: "End",
         },
       ],

package/src/components/ui/range-slider.tsx

@@ -3,6 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
@@ -20,6 +21,7 @@ const RangeSlider = React.forwardRef<
   }
 >(({ className, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
+  const { locale } = useLocale();
 
   return (
     <SliderPrimitive.Root
@@ -66,7 +68,7 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]))}
+                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>
@@ -87,7 +89,7 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[1]}>
-                {prettyScientificNumber(valueMap(props.value[1]))}
+                {prettyScientificNumber(valueMap(props.value[1]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>

package/src/components/ui/slider.tsx

@@ -3,6 +3,7 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import * as React from "react";
+import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
 import { prettyScientificNumber } from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
@@ -20,6 +21,7 @@ const Slider = React.forwardRef<
   }
 >(({ className, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
+  const { locale } = useLocale();
 
   return (
     <SliderPrimitive.Root
@@ -66,7 +68,7 @@ const Slider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 1 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]))}
+                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
               </TooltipContent>
             )}
           </TooltipPortal>

package/src/components/variables/variables-table.tsx

@@ -14,6 +14,7 @@ import {
 import { sortBy } from "lodash-es";
 import { SquareEqualIcon, WorkflowIcon } from "lucide-react";
 import React, { memo, useMemo } from "react";
+import { useLocale } from "react-aria";
 import { CellLink } from "@/components/editor/links/cell-link";
 import { getCellEditorView, useCellNames } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
@@ -233,6 +234,7 @@ export const VariableTable: React.FC<Props> = memo(
     const [sorting, setSorting] = React.useState<SortingState>([]);
     const [globalFilter, setGlobalFilter] = React.useState("");
     const cellNames = useCellNames();
+    const { locale } = useLocale();
 
     const resolvedVariables: ResolvedVariable[] = useMemo(() => {
       const getName = (id: CellId) => {
@@ -279,6 +281,7 @@ export const VariableTable: React.FC<Props> = memo(
       globalFilterFn: "auto",
       // sorting
       manualSorting: true,
+      locale: locale,
       onSortingChange: setSorting,
       getSortedRowModel: getSortedRowModel(),
       state: {

package/src/core/MarimoApp.tsx

@@ -15,6 +15,7 @@ import { ErrorBoundary } from "../components/editor/boundary/ErrorBoundary";
 import { ModalProvider } from "../components/modal/ImperativeModal";
 import { Toaster } from "../components/ui/toaster";
 import { TooltipProvider } from "../components/ui/tooltip";
+import { LocaleProvider } from "./i18n/locale-provider";
 import { slotsController } from "./slots/slots";
 
 // Force tailwind classnames
@@ -69,7 +70,7 @@ export const MarimoApp: React.FC = memo(() => {
       <CssVariables
         variables={{ "--marimo-code-editor-font-size": editorFontSize }}
       >
-        {renderBody()}
+        <LocaleProvider>{renderBody()}</LocaleProvider>
       </CssVariables>
     </Providers>
   );
@@ -85,11 +86,13 @@ const Providers = memo(({ children }: PropsWithChildren) => {
       <Suspense>
         <TooltipProvider>
           <SlotzProvider controller={slotsController}>
-            <ModalProvider>
-              {children}
-              <Toaster />
-              <TailwindIndicator />
-            </ModalProvider>
+            <LocaleProvider>
+              <ModalProvider>
+                {children}
+                <Toaster />
+                <TailwindIndicator />
+              </ModalProvider>
+            </LocaleProvider>
           </SlotzProvider>
         </TooltipProvider>
       </Suspense>