@marimo-team/frontend 0.16.4 → 0.16.5

package/src/components/chat/chat-panel.tsx

@@ -9,7 +9,6 @@ import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
   AtSignIcon,
   BotMessageSquareIcon,
-  ClockIcon,
   Loader2,
   PaperclipIcon,
   PlusIcon,
@@ -17,16 +16,9 @@ import {
   SettingsIcon,
   SquareIcon,
 } from "lucide-react";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
-import { useLocale } from "react-aria";
+import { memo, useEffect, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -52,8 +44,8 @@ import { useRequestClient } from "@/core/network/requests";
 import { useRuntimeManager } from "@/core/runtime/config";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
-import { timeAgo } from "@/utils/dates";
 import { Logger } from "@/utils/Logger";
+
 import { AIModelDropdown } from "../ai/ai-model-dropdown";
 import { useOpenSettingsToTab } from "../app-config/state";
 import { PromptInput } from "../editor/ai/add-cell-with-ai";
@@ -63,10 +55,12 @@ import {
 } from "../editor/ai/completion-utils";
 import { PanelEmptyState } from "../editor/chrome/panels/empty-state";
 import { CopyClipboardIcon } from "../icons/copy-icon";
+import { MCPStatusIndicator } from "../mcp/mcp-status-indicator";
 import { Input } from "../ui/input";
 import { Tooltip, TooltipProvider } from "../ui/tooltip";
 import { toast } from "../ui/use-toast";
 import { AttachmentRenderer, FileAttachmentPill } from "./chat-components";
+import { ChatHistoryPopover } from "./chat-history-popover";
 import {
   buildCompletionRequestBody,
   convertToFileUIPart,
@@ -104,13 +98,6 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   setActiveChat,
 }) => {
   const { handleClick } = useOpenSettingsToTab();
-  const chatState = useAtomValue(chatStateAtom);
-  const { locale } = useLocale();
-  const chats = useMemo(() => {
-    return [...chatState.chats.values()].sort(
-      (a, b) => b.updatedAt - a.updatedAt,
-    );
-  }, [chatState.chats]);
 
   return (
     <div className="flex border-b px-2 py-1 justify-between shrink-0 items-center">
@@ -120,6 +107,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
         </Button>
       </Tooltip>
       <div className="flex items-center gap-2">
+        <MCPStatusIndicator />
         <Tooltip content="AI Settings">
           <Button
             variant="text"
@@ -130,46 +118,10 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
             <SettingsIcon className="h-4 w-4" />
           </Button>
         </Tooltip>
-        <Popover>
-          <Tooltip content="Previous chats">
-            <PopoverTrigger asChild={true}>
-              <Button variant="text" size="icon">
-                <ClockIcon className="h-4 w-4" />
-              </Button>
-            </PopoverTrigger>
-          </Tooltip>
-          <PopoverContent className="w-[520px] p-0" align="start" side="right">
-            <ScrollArea className="h-[500px] p-4">
-              <div className="space-y-4">
-                {chats.length === 0 && (
-                  <PanelEmptyState
-                    title="No chats yet"
-                    description="Start a new chat to get started"
-                    icon={<BotMessageSquareIcon />}
-                  />
-                )}
-                {chats.map((chat) => (
-                  <button
-                    key={chat.id}
-                    className={cn(
-                      "w-full p-3 rounded-md cursor-pointer hover:bg-accent text-left",
-                      chat.id === activeChatId && "bg-accent",
-                    )}
-                    onClick={() => {
-                      setActiveChat(chat.id);
-                    }}
-                    type="button"
-                  >
-                    <div className="font-medium">{chat.title}</div>
-                    <div className="text-sm text-muted-foreground">
-                      {timeAgo(chat.updatedAt, locale)}
-                    </div>
-                  </button>
-                ))}
-              </div>
-            </ScrollArea>
-          </PopoverContent>
-        </Popover>
+        <ChatHistoryPopover
+          activeChatId={activeChatId}
+          setActiveChat={setActiveChat}
+        />
       </div>
     </div>
   );

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -12,7 +12,7 @@ import type { UserConfig } from "@/core/config/config-schema";
 import type { OutputMessage } from "@/core/kernel/messages";
 import type { AppMode } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
-import { Cell } from "../Cell";
+import { Cell } from "../notebook-cell";
 import { OutputArea } from "../Output";
 
 function createTestWrapper() {

package/src/components/editor/actions/useNotebookActions.tsx

@@ -102,7 +102,7 @@ export function useNotebookActions() {
     updateCellConfig,
     undoDeleteCell,
     clearAllCellOutputs,
-    upsertSetupCell,
+    addSetupCellIfDoesntExist,
     collapseAllCells,
     expandAllCells,
   } = useCellActions();
@@ -401,9 +401,7 @@ export function useNotebookActions() {
       icon: <DiamondPlusIcon size={14} strokeWidth={1.5} />,
       label: "Add setup cell",
       handle: () => {
-        upsertSetupCell({
-          code: "# Initialization code that runs before all other cells",
-        });
+        addSetupCellIfDoesntExist({});
       },
     },
     {

package/src/components/editor/ai/__tests__/completion-utils.test.ts

@@ -55,15 +55,13 @@ describe("getAICompletionBody", () => {
     expect(result).toMatchInlineSnapshot(`
       {
         "context": {
-          "plainText": "<data name="dataset1" source="unknown">
-      Columns:
-        - col1: number
-        - col2: string</data>
-
-      <data name="dataset2" source="unknown">
-      Columns:
-        - col3: boolean
-        - col4: date</data>",
+          "plainText": "<data name="dataset1" source="unknown">Columns:
+        col1 (number)
+        col2 (string)</data>
+
+      <data name="dataset2" source="unknown">Columns:
+        col3 (boolean)
+        col4 (date)</data>",
           "schema": [],
           "variables": [],
         },
@@ -108,10 +106,9 @@ describe("getAICompletionBody", () => {
     expect(result).toMatchInlineSnapshot(`
       {
         "context": {
-          "plainText": "<data name="existingDataset" source="unknown">
-      Columns:
-        - col1: number
-        - col2: string</data>",
+          "plainText": "<data name="existingDataset" source="unknown">Columns:
+        col1 (number)
+        col2 (string)</data>",
           "schema": [],
           "variables": [],
         },
@@ -144,14 +141,12 @@ describe("getAICompletionBody", () => {
     expect(result).toMatchInlineSnapshot(`
       {
         "context": {
-          "plainText": "<data name="dataset.with.dots" source="unknown">
-      Columns:
-        - col1: number
-        - col2: string</data>
-
-      <data name="regular_dataset" source="unknown">
-      Columns:
-        - col3: boolean</data>",
+          "plainText": "<data name="dataset.with.dots" source="unknown">Columns:
+        col1 (number)
+        col2 (string)</data>
+
+      <data name="regular_dataset" source="unknown">Columns:
+        col3 (boolean)</data>",
           "schema": [],
           "variables": [],
         },
@@ -198,9 +193,8 @@ describe("getAICompletionBody", () => {
     expect(result).toMatchInlineSnapshot(`
       {
         "context": {
-          "plainText": "<data name="table1" source="unknown">
-      Columns:
-        - col1: number</data>",
+          "plainText": "<data name="table1" source="unknown">Columns:
+        col1 (number)</data>",
           "schema": [],
           "variables": [],
         },
@@ -276,10 +270,9 @@ describe("getAICompletionBody", () => {
     expect(result).toMatchInlineSnapshot(`
       {
         "context": {
-          "plainText": "<data name="dataset1" source="unknown">
-      Columns:
-        - col1: number
-        - col2: string</data>
+          "plainText": "<data name="dataset1" source="unknown">Columns:
+        col1 (number)
+        col2 (string)</data>
 
       <variable name="var1" dataType="string">"string value"</variable>",
           "schema": [],
@@ -346,9 +339,8 @@ describe("getAICompletionBody", () => {
     expect(result).toMatchInlineSnapshot(`
       {
         "context": {
-          "plainText": "<data name="conflict" source="unknown">
-      Columns:
-        - col1: number</data>",
+          "plainText": "<data name="conflict" source="unknown">Columns:
+        col1 (number)</data>",
           "schema": [],
           "variables": [],
         },

package/src/components/editor/cell/CreateCellButton.tsx

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { DatabaseIcon, PlusIcon } from "lucide-react";
+import { DatabaseIcon, DiamondPlusIcon, PlusIcon } from "lucide-react";
 import { Button } from "@/components/editor/inputs/Inputs";
 import {
   ContextMenu,
@@ -69,7 +69,7 @@ const CreateCellButtonContextMenu = (props: {
   children: React.ReactNode;
 }) => {
   const { children, onClick } = props;
-  const { createNewCell } = useCellActions();
+  const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
 
   if (!onClick) {
     return children;
@@ -125,6 +125,18 @@ const CreateCellButtonContextMenu = (props: {
           </div>
           SQL cell
         </ContextMenuItem>
+        <ContextMenuItem
+          key="setup"
+          onSelect={(evt) => {
+            evt.stopPropagation();
+            addSetupCellIfDoesntExist({});
+          }}
+        >
+          <div className="mr-3 text-muted-foreground">
+            <DiamondPlusIcon size={13} strokeWidth={1.5} />
+          </div>
+          Setup cell
+        </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenu>
   );

package/src/components/editor/cell/code/cell-editor.tsx

@@ -187,6 +187,7 @@ const CellEditorInternal = ({
       hotkeys: new OverridingHotkeyProvider(userConfig.keymap.overrides ?? {}),
       diagnosticsConfig: userConfig.diagnostics,
       displayConfig: userConfig.display,
+      inlineAiTooltip: userConfig.ai?.inline_tooltip ?? false,
     });
 
     extensions.push(

package/src/components/editor/database/schemas.ts

@@ -18,11 +18,7 @@ function passwordField() {
 
 function tokenField(label?: string, required?: boolean) {
   let field: z.ZodString | z.ZodOptional<z.ZodString> = z.string();
-  if (required) {
-    field = field.nonempty();
-  } else {
-    field = field.optional();
-  }
+  field = required ? field.nonempty() : field.optional();
 
   field = field.describe(
     FieldOptions.of({
@@ -50,11 +46,7 @@ function warehouseNameField() {
 
 function uriField(label?: string, required?: boolean) {
   let field: z.ZodString | z.ZodOptional<z.ZodString> = z.string();
-  if (required) {
-    field = field.nonempty();
-  } else {
-    field = field.optional();
-  }
+  field = required ? field.nonempty() : field.optional();
 
   return field.describe(
     FieldOptions.of({ label: label || "URI", optionRegex: ".*uri.*" }),

package/src/components/editor/{Cell.tsx → notebook-cell.tsx}

@@ -1051,12 +1051,16 @@ const SetupCellComponent = ({
           data-status={cellRuntime.status}
           ref={cellRef}
           {...mergeProps(navigationProps, {
-            className,
+            className: cn(
+              className,
+              "focus:ring-1 focus:ring-(--blue-7) focus:ring-offset-0",
+            ),
             onBlur: closeCompletionHandler,
             onKeyDown: resumeCompletionHandler,
           })}
           {...cellDomProps(cellId, cellData.name)}
           title={renderCellTitle()}
+          tabIndex={-1}
           data-setup-cell={true}
         >
           <div className={cn("tray")} data-hidden={!isCellCodeShown}>

package/src/components/editor/output/MarimoErrorOutput.tsx

@@ -1,10 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import {
-  InfoIcon,
-  NotebookPenIcon,
-  SquareArrowOutUpRightIcon,
-} from "lucide-react";
+import { NotebookPenIcon, SquareArrowOutUpRightIcon } from "lucide-react";
 import { Fragment, type JSX } from "react";
 import {
   Accordion,
@@ -499,37 +495,11 @@ export const MarimoErrorOutput = ({
       messages.push(
         <div key="sql-errors">
           {sqlErrors.map((error, idx) => {
-            const line =
-              error.sql_line == null ? null : Math.trunc(error?.sql_line) + 1;
-            const col =
-              error.sql_col == null ? null : Math.trunc(error?.sql_col) + 1;
             return (
               <div key={`sql-error-${idx}`} className="space-y-2 mt-2">
-                <p className="text-muted-foreground font-medium">{error.msg}</p>
-                {error.hint && (
-                  <div className="flex items-start gap-2">
-                    <InfoIcon
-                      size={11}
-                      className="text-muted-foreground mt-1 flex-shrink-0"
-                    />
-                    <p className="whitespace-pre-wrap text-sm text-muted-foreground">
-                      {error.hint}
-                    </p>
-                  </div>
-                )}
-                {error.sql_statement && (
-                  <pre
-                    lang="sql"
-                    className="text-xs bg-muted/80 rounded whitespace-pre-wrap p-3.5"
-                  >
-                    {error.sql_statement.trim()}
-                  </pre>
-                )}
-                {line !== null && col !== null && (
-                  <p className="text-xs text-muted-foreground">
-                    Error at line {line}, column {col}
-                  </p>
-                )}
+                <p className="text-muted-foreground whitespace-pre-wrap">
+                  {error.msg}
+                </p>
               </div>
             );
           })}

package/src/components/editor/renderers/{CellArray.tsx → cell-array.tsx}

@@ -14,7 +14,7 @@ import {
 } from "lucide-react";
 import { useEffect } from "react";
 import { StartupLogsAlert } from "@/components/editor/alerts/startup-logs-alert";
-import { Cell } from "@/components/editor/Cell";
+import { Cell } from "@/components/editor/notebook-cell";
 import { PackageAlert } from "@/components/editor/package-alert";
 import { SortableCellsProvider } from "@/components/sort/SortableCellsProvider";
 import { Button } from "@/components/ui/button";

package/src/components/forms/__tests__/form-utils.test.ts

@@ -191,7 +191,7 @@ describe("getDefaults", () => {
     });
     const result = getDefaults(schema) as { map: Map<string, number> };
     expect(result.map instanceof Map).toBe(true);
-    expect(Array.from(result.map.entries())).toEqual([["a", 1]]);
+    expect([...result.map.entries()]).toEqual([["a", 1]]);
   });
 
   it("should handle ZodSet with default", () => {
@@ -200,7 +200,7 @@ describe("getDefaults", () => {
     });
     const result = getDefaults(schema) as { set: Set<string> };
     expect(result.set instanceof Set).toBe(true);
-    expect(Array.from(result.set)).toEqual(["a", "b"]);
+    expect([...result.set]).toEqual(["a", "b"]);
   });
 
   it("should handle deeply nested defaults", () => {

package/src/components/mcp/hooks.ts

@@ -0,0 +1,48 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { components } from "@marimo-team/marimo-api";
+import { useState } from "react";
+import { API } from "@/core/network/api";
+import { useAsyncData } from "@/hooks/useAsyncData";
+import { toast } from "../ui/use-toast";
+
+export type MCPStatus = components["schemas"]["MCPStatusResponse"];
+export type MCPRefreshResponse = components["schemas"]["MCPRefreshResponse"];
+
+/**
+ * Hook to fetch MCP server status
+ */
+export function useMCPStatus() {
+  return useAsyncData<MCPStatus>(async () => {
+    return API.get<MCPStatus>("/ai/mcp/status");
+  }, []);
+}
+
+/**
+ * Hook to refresh MCP server configuration
+ */
+export function useMCPRefresh() {
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const refresh = async () => {
+    setIsRefreshing(true);
+    try {
+      await API.post<object, MCPRefreshResponse>("/ai/mcp/refresh", {});
+      toast({
+        title: "MCP refreshed",
+        description: "MCP server configuration has been refreshed successfully",
+      });
+    } catch (error) {
+      toast({
+        title: "Refresh failed",
+        description:
+          error instanceof Error ? error.message : "Failed to refresh MCP",
+        variant: "danger",
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  return { refresh, isRefreshing };
+}

package/src/components/mcp/mcp-status-indicator.tsx

@@ -0,0 +1,144 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { Loader2, PlugIcon, RefreshCwIcon } from "lucide-react";
+import { API } from "@/core/network/api";
+import { cn } from "@/utils/cn";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Tooltip } from "../ui/tooltip";
+import { toast } from "../ui/use-toast";
+import { useMCPStatus } from "./hooks";
+
+/**
+ * MCP Status indicator component
+ * Shows a small icon with status color and a popover with detailed information
+ */
+export const MCPStatusIndicator: React.FC = () => {
+  const { data: status, refetch, isFetching } = useMCPStatus();
+
+  const handleRefresh = async () => {
+    try {
+      await API.post<object, { success: boolean }>("/ai/mcp/refresh", {});
+      toast({
+        title: "MCP refreshed",
+        description: "MCP server configuration has been refreshed",
+      });
+      refetch();
+    } catch (error) {
+      toast({
+        title: "Refresh failed",
+        description:
+          error instanceof Error ? error.message : "Failed to refresh MCP",
+        variant: "danger",
+      });
+    }
+  };
+
+  const servers = status?.servers || {};
+  const hasServers = Object.keys(servers).length > 0;
+
+  return (
+    <Popover>
+      <Tooltip content="MCP Status">
+        <PopoverTrigger asChild={true}>
+          <Button variant="text" size="icon">
+            <PlugIcon
+              className={cn(
+                "h-4 w-4",
+                status?.status === "ok" && "text-green-500",
+                status?.status === "partial" && "text-yellow-500",
+                status?.status === "error" && hasServers && "text-red-500",
+              )}
+            />
+          </Button>
+        </PopoverTrigger>
+      </Tooltip>
+      <PopoverContent className="w-[320px]" align="start" side="right">
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h4 className="font-medium text-sm">MCP Server Status</h4>
+            <Button
+              variant="ghost"
+              size="xs"
+              onClick={handleRefresh}
+              disabled={isFetching}
+            >
+              {isFetching ? (
+                <Loader2 className="h-3 w-3 animate-spin" />
+              ) : (
+                <RefreshCwIcon className="h-3 w-3" />
+              )}
+            </Button>
+          </div>
+          {status && (
+            <div className="text-xs space-y-2">
+              {hasServers && (
+                <div className="flex justify-between items-center">
+                  <span className="text-muted-foreground">Overall:</span>
+                  <McpStatusText status={status.status} />
+                </div>
+              )}
+              {status.error && (
+                <div className="text-xs text-red-500 bg-red-50 dark:bg-red-950/20 p-2 rounded">
+                  {status.error}
+                </div>
+              )}
+              {hasServers && (
+                <div className="space-y-1">
+                  <div className="text-muted-foreground font-medium">
+                    Servers:
+                  </div>
+                  {Object.entries(servers).map(([name, serverStatus]) => (
+                    <div
+                      key={name}
+                      className="flex justify-between items-center pl-2"
+                    >
+                      <span className="text-muted-foreground truncate max-w-[180px]">
+                        {name}
+                      </span>
+                      <McpStatusText status={serverStatus} />
+                    </div>
+                  ))}
+                </div>
+              )}
+              {!hasServers && (
+                <div className="text-muted-foreground text-center py-2">
+                  No MCP servers configured. <br /> Configure under{" "}
+                  <b>Settings &gt; AI &gt; MCP</b>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const McpStatusText: React.FC<{
+  status:
+    | "ok"
+    | "partial"
+    | "error"
+    | "failed"
+    | "disconnected"
+    | "pending"
+    | "connected";
+}> = ({ status }) => {
+  return (
+    <span
+      className={cn(
+        "text-xs font-medium",
+        status === "ok" && "text-green-500",
+        status === "partial" && "text-yellow-500",
+        status === "error" && "text-red-500",
+        status === "failed" && "text-red-500",
+        status === "disconnected" && "text-gray-500",
+        status === "pending" && "text-yellow-500",
+        status === "connected" && "text-green-500",
+      )}
+    >
+      {status}
+    </span>
+  );
+};

package/src/components/ui/number-field.tsx

@@ -7,8 +7,10 @@ import {
   Button,
   type ButtonProps,
   Input as RACInput,
+  useLocale,
 } from "react-aria-components";
 import { cn } from "@/utils/cn";
+import { maxFractionalDigits } from "@/utils/numbers";
 
 export interface NumberFieldProps extends AriaNumberFieldProps {
   placeholder?: string;
@@ -17,12 +19,13 @@ export interface NumberFieldProps extends AriaNumberFieldProps {
 
 export const NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>(
   ({ placeholder, variant = "default", ...props }, ref) => {
+    const { locale } = useLocale();
     return (
       <AriaNumberField
         {...props}
         formatOptions={{
           minimumFractionDigits: 0,
-          maximumFractionDigits: 100,
+          maximumFractionDigits: maxFractionalDigits(locale),
         }}
       >
         <div