@marimo-team/frontend 0.19.8-dev8 → 0.19.8

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -21,8 +21,6 @@ import { atomWithStorage } from "jotai/utils";
 import {
   ChevronsUpDown,
   DatabaseIcon,
-  Loader2Icon,
-  SendHorizontal,
   SparklesIcon,
   XIcon,
 } from "lucide-react";
@@ -30,9 +28,18 @@ import { useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { z } from "zod";
 import { AIModelDropdown } from "@/components/ai/ai-model-dropdown";
+import {
+  AddContextButton,
+  AttachFileButton,
+  FileAttachmentPill,
+  SendButton,
+} from "@/components/chat/chat-components";
 import {
   buildCompletionRequestBody,
+  convertToFileUIPart,
   handleToolCall,
+  PROVIDERS_THAT_SUPPORT_ATTACHMENTS,
+  useFileState,
 } from "@/components/chat/chat-utils";
 import { Button } from "@/components/ui/button";
 import {
@@ -43,10 +50,13 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { toast } from "@/components/ui/use-toast";
+import { AiModelId } from "@/core/ai/ids/ids";
 import { stagedAICellsAtom, useStagedCells } from "@/core/ai/staged-cells";
 import type { ToolNotebookContext } from "@/core/ai/tools/base";
 import { useCellActions } from "@/core/cells/cells";
 import { resourceExtension } from "@/core/codemirror/ai/resources";
+import { aiAtom } from "@/core/config/config";
+import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
 import { useRequestClient } from "@/core/network/requests";
 import type { AiCompletionRequest } from "@/core/network/types";
 import { useRuntimeManager } from "@/core/runtime/config";
@@ -57,7 +67,11 @@ import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import { ZodLocalStorage } from "@/utils/storage/typed";
 import { PythonIcon } from "../cell/code/icons";
 import { createAiCompletionOnKeydown } from "./completion-handlers";
-import { CONTEXT_TRIGGER, mentionsCompletionSource } from "./completion-utils";
+import {
+  addContextCompletion,
+  CONTEXT_TRIGGER,
+  mentionsCompletionSource,
+} from "./completion-utils";
 import { StreamingChunkTransport } from "./transport/chat-transport";
 
 // Persist across sessions
@@ -89,6 +103,10 @@ export const AddCellWithAI: React.FC<{
   const stagedAICells = useAtomValue(stagedAICellsAtom);
   const inputRef = useRef<ReactCodeMirrorRef>(null);
 
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { files, addFiles, removeFile } = useFileState();
+  const aiConfig = useAtomValue(aiAtom);
+
   const { createNewCell, prepareForRun } = useCellActions();
   const toolContext: ToolNotebookContext = {
     store,
@@ -149,14 +167,21 @@ export const AddCellWithAI: React.FC<{
   const isLoading = status === "streaming" || status === "submitted";
   const hasCompletion = stagedAICells.size > 0;
 
-  const submit = () => {
+  const currentModel = aiConfig?.models?.edit_model || DEFAULT_AI_MODEL;
+  const currentProvider = AiModelId.parse(currentModel).providerId;
+  const isAttachmentSupported =
+    PROVIDERS_THAT_SUPPORT_ATTACHMENTS.has(currentProvider);
+
+  const submit = async () => {
     if (!isLoading) {
       if (inputRef.current?.view) {
         storePrompt(inputRef.current.view);
       }
       // TODO: When we have conversations, don't delete existing cells
       deleteAllStagedCells();
-      sendMessage({ text: input });
+
+      const fileParts = files ? await convertToFileUIPart(files) : undefined;
+      sendMessage({ text: input, files: fileParts });
     }
   };
 
@@ -176,19 +201,17 @@ export const AddCellWithAI: React.FC<{
 
   const languageDropdown = (
     <DropdownMenu modal={false}>
-      <DropdownMenuTrigger asChild={true}>
-        <Button
-          variant="text"
-          className="ml-2"
-          size="xs"
-          data-testid="language-button"
-        >
-          {language === "python" ? pythonIcon : sqlIcon}
-          <ChevronsUpDown className="ml-1 h-3.5 w-3.5 text-muted-foreground/70" />
-        </Button>
+      <DropdownMenuTrigger
+        className="flex items-center justify-between h-7 text-xs px-2 py-0.5 border rounded-md hover:text-accent-foreground"
+        data-testid="language-button"
+      >
+        {language === "python" ? pythonIcon : sqlIcon}
+        <ChevronsUpDown className="ml-1 h-3.5 w-3.5 text-muted-foreground/70" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="center">
-        <div className="px-2 py-1 font-semibold">Select language</div>
+        <div className="px-2 py-1 text-sm text-muted-foreground">
+          Select language
+        </div>
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={() => setLanguage("python")}>
           {pythonIcon}
@@ -230,54 +253,63 @@ export const AddCellWithAI: React.FC<{
           hasCompletion,
         })}
       />
-      {isLoading && (
-        <Button
-          data-testid="stop-completion-button"
-          variant="text"
-          size="sm"
-          className="mb-0"
-          onClick={stop}
-        >
-          <Loader2Icon className="animate-spin mr-1" size={14} />
-          Stop
-        </Button>
-      )}
-      <Button variant="text" size="sm" onClick={submit} title="Submit">
-        <SendHorizontal className="size-4" />
-      </Button>
       <Button variant="text" size="sm" className="mb-0 px-1" onClick={onClose}>
         <XIcon className="size-4" />
       </Button>
     </div>
   );
 
-  return (
-    <div className={cn("flex flex-col w-full py-2")}>
-      {inputComponent}
-      <div className="flex flex-row justify-between -mt-1 ml-1 mr-3">
-        {!hasCompletion && (
-          <span className="text-xs text-muted-foreground px-3 flex flex-col gap-1 mt-2">
-            <span>
-              You can mention{" "}
-              <span className="text-(--cyan-11)">@dataframe</span> or{" "}
-              <span className="text-(--cyan-11)">@sql_table</span> to pull
-              additional context such as column names. Code from other cells is
-              automatically included.
-            </span>
-          </span>
+  const footerComponent = (
+    <div className="px-3 pt-1 flex flex-row items-center justify-between">
+      <div className="flex items-center gap-2">
+        <AIModelDropdown
+          triggerClassName="h-7 text-xs max-w-64"
+          iconSize="small"
+          forRole="edit"
+          showAddCustomModelDocs={true}
+        />
+        {languageDropdown}
+      </div>
+      <div className="flex flex-row items-center">
+        {files.length > 0 && (
+          <div className="flex flex-row gap-1 flex-wrap pr-1">
+            {files?.map((file, index) => (
+              <FileAttachmentPill
+                file={file}
+                key={`${file.name}-${index}`}
+                onRemove={() => removeFile(file)}
+              />
+            ))}
+          </div>
         )}
-        <div className="ml-auto flex items-center gap-1">
-          {languageDropdown}
-          <AIModelDropdown
-            triggerClassName="h-7 text-xs max-w-64"
-            iconSize="small"
-            forRole="edit"
-            showAddCustomModelDocs={true}
+        <AddContextButton
+          handleAddContext={() => addContextCompletion(inputRef)}
+          isLoading={isLoading}
+        />
+        {isAttachmentSupported && (
+          <AttachFileButton
+            fileInputRef={fileInputRef}
+            isLoading={isLoading}
+            onAddFiles={addFiles}
           />
-        </div>
+        )}
+        <SendButton
+          isLoading={isLoading}
+          onStop={stop}
+          onSendClick={submit}
+          isEmpty={!input.trim()}
+          showStopLabel={true}
+        />
       </div>
     </div>
   );
+
+  return (
+    <div className={cn("flex flex-col w-full py-2")}>
+      {inputComponent}
+      {footerComponent}
+    </div>
+  );
 };
 
 export interface AdditionalCompletions {

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -3,10 +3,8 @@
 import { useCompletion } from "@ai-sdk/react";
 import { EditorView } from "@codemirror/view";
 import {
-  AtSignIcon,
   CircleCheckIcon,
   Loader2Icon,
-  SendIcon,
   SparklesIcon,
   XIcon,
 } from "lucide-react";
@@ -20,6 +18,10 @@ import { storePrompt } from "@marimo-team/codemirror-ai";
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import { useAtom, useAtomValue } from "jotai";
 import { AIModelDropdown } from "@/components/ai/ai-model-dropdown";
+import {
+  AddContextButton,
+  SendButton,
+} from "@/components/chat/chat-components";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
@@ -253,39 +255,6 @@ export const AiCompletionEditor: React.FC<Props> = ({
     }
   };
 
-  const loadingStopButton = (
-    <Button
-      data-testid="stop-completion-button"
-      variant="text"
-      size="xs"
-      className="mb-0"
-      onClick={stop}
-    >
-      <Loader2Icon className="animate-spin mr-1" size={14} />
-      Stop
-    </Button>
-  );
-
-  const submitButton = (
-    <Tooltip content="Submit">
-      <Button variant="text" size="icon" onClick={handleSubmit}>
-        <SendIcon className="h-3 w-3" />
-      </Button>
-    </Tooltip>
-  );
-
-  const contextButton = (
-    <Tooltip content="Add context">
-      <Button
-        variant="text"
-        size="icon"
-        onClick={() => addContextCompletion(inputRef)}
-      >
-        <AtSignIcon className="h-3 w-3" />
-      </Button>
-    </Tooltip>
-  );
-
   const completionButtons = (
     <>
       <AcceptCompletionButton
@@ -355,9 +324,17 @@ export const AiCompletionEditor: React.FC<Props> = ({
 
             <div className="-mr-1.5 py-1.5">
               <div className="flex flex-row items-center justify-end gap-0.5">
-                {isLoading && loadingStopButton}
-                {submitButton}
-                {contextButton}
+                <SendButton
+                  isLoading={isLoading}
+                  onStop={stop}
+                  onSendClick={handleSubmit}
+                  isEmpty={!input.trim()}
+                  showStopLabel={true}
+                />
+                <AddContextButton
+                  handleAddContext={() => addContextCompletion(inputRef)}
+                  isLoading={isLoading}
+                />
                 <AIModelDropdown
                   triggerClassName="h-7 text-xs"
                   iconSize="small"

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

@@ -12,6 +12,7 @@ import {
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
+import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
@@ -63,7 +64,7 @@ export const CreateCellButton = ({
     maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
     onClick?.({
       code: LanguageAdapters.markdown.defaultCode,
-      hideCode: true,
+      hideCode: MARKDOWN_INITIAL_HIDE_CODE,
     });
   };
 

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

@@ -19,6 +19,7 @@ import {
   reconfigureLanguageEffect,
   switchLanguage,
 } from "@/core/codemirror/language/extension";
+import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import {
   connectedDocAtom,
@@ -149,6 +150,17 @@ const CellEditorInternal = ({
       autoInstantiate,
       createNewCell: cellActions.createNewCell,
     });
+    // Code stays visible until the user blurs the cell
+    if (!cellConfig.hide_code && MARKDOWN_INITIAL_HIDE_CODE) {
+      void saveCellConfig({
+        configs: { [cellId]: { hide_code: MARKDOWN_INITIAL_HIDE_CODE } },
+      });
+      cellActions.updateCellConfig({
+        cellId,
+        config: { hide_code: MARKDOWN_INITIAL_HIDE_CODE },
+      });
+      cellActions.markUntouched({ cellId });
+    }
   });
 
   const aiEnabled = isAiEnabled(userConfig);

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -349,8 +349,9 @@ const PackagesList: React.FC<{
 
 const UpgradeButton: React.FC<{
   packageName: string;
+  tags?: { kind: string; value: string }[];
   onSuccess: () => void;
-}> = ({ packageName, onSuccess }) => {
+}> = ({ packageName, tags, onSuccess }) => {
   const [loading, setLoading] = React.useState(false);
   const { addPackage } = useRequestClient();
 
@@ -362,9 +363,11 @@ const UpgradeButton: React.FC<{
   const handleUpgradePackage = async () => {
     try {
       setLoading(true);
+      const group = tags?.find((tag) => tag.kind === "group")?.value;
       const response = await addPackage({
         package: packageName,
         upgrade: true,
+        group,
       });
       if (response.success) {
         onSuccess();
@@ -395,12 +398,10 @@ const RemoveButton: React.FC<{
   const handleRemovePackage = async () => {
     try {
       setLoading(true);
-      const isDev = tags?.some(
-        (tag) => tag.kind === "group" && tag.value === "dev",
-      );
+      const group = tags?.find((tag) => tag.kind === "group")?.value;
       const response = await removePackage({
         package: packageName,
-        dev: isDev,
+        group,
       });
       if (response.success) {
         onSuccess();
@@ -604,12 +605,14 @@ const DependencyTreeNode: React.FC<{
         {/* Actions for top-level packages */}
         {isTopLevel && (
           <div className="flex gap-1 invisible group-hover:visible">
-            <UpgradeButton packageName={node.name} onSuccess={onSuccess} />
+            <UpgradeButton
+              packageName={node.name}
+              tags={node.tags}
+              onSuccess={onSuccess}
+            />
+
             <RemoveButton
               packageName={node.name}
-              // FIXME: Backend types are wrong/outdated.
-              // tags actually have the shape: Array<{ kind: string; value: string }>
-              // @ts-expect-error — backend tag types do not match frontend expectations yet
               tags={node.tags}
               onSuccess={onSuccess}
             />

package/src/components/editor/database/__tests__/__snapshots__/as-code.test.ts.snap

@@ -461,6 +461,21 @@ engine = clickhouse_connect.get_client(
 )"
 `;
 
+exports[`generateDatabaseCode > edge cases > clickhouse with proxy_path 1`] = `
+"import clickhouse_connect
+import os
+
+_password = os.environ.get("CLICKHOUSE_PASSWORD", "pass")
+engine = clickhouse_connect.get_client(
+  host="localhost",
+  user="user",
+  secure=False,
+  port=8123,
+  password=_password,
+  proxy_path="/clickhouse",
+)"
+`;
+
 exports[`generateDatabaseCode > edge cases > duckdb with relative path 1`] = `
 "import sqlmodel
 

package/src/components/editor/database/__tests__/as-code.test.ts

@@ -532,6 +532,14 @@ describe("generateDatabaseCode", () => {
         },
         "clickhouse_connect",
       ],
+      [
+        "clickhouse with proxy_path",
+        {
+          ...clickhouseConnection,
+          proxy_path: "/clickhouse",
+        },
+        "clickhouse_connect",
+      ],
       [
         "timeplus with no port",
         {

package/src/components/editor/database/as-code.ts

@@ -412,6 +412,9 @@ class ClickHouseGenerator extends CodeGenerator<"clickhouse_connect"> {
         ? this.secrets.print("port", this.connection.port)
         : undefined,
       password: this.connection.password ? password : undefined,
+      proxy_path: this.connection.proxy_path
+        ? this.secrets.print("proxy_path", this.connection.proxy_path)
+        : undefined,
     };
 
     return dedent(`

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

@@ -267,6 +267,15 @@ export const ClickhouseConnectionSchema = z
       .boolean()
       .default(false)
       .describe(FieldOptions.of({ label: "Use HTTPs" })),
+    proxy_path: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Proxy Path",
+          placeholder: "/clickhouse",
+        }),
+      ),
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 

package/src/components/editor/renderers/cell-array.tsx

@@ -23,6 +23,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { SETUP_CELL_ID } from "@/core/cells/ids";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
+import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import { aiEnabledAtom } from "@/core/config/config";
 import { canInteractWithAppAtom } from "@/core/network/connection";
 import { useBoolean } from "@/hooks/useBoolean";
@@ -295,7 +296,7 @@ const AddCellButtons: React.FC<{
               cellId: { type: "__end__", columnId },
               before: false,
               code: LanguageAdapters.markdown.defaultCode,
-              hideCode: true,
+              hideCode: MARKDOWN_INITIAL_HIDE_CODE,
             });
           }}
         >

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -7,6 +7,7 @@ import {
   CodeIcon,
   FolderDownIcon,
   ImageIcon,
+  Loader2Icon,
   MoreHorizontalIcon,
 } from "lucide-react";
 import type React from "react";
@@ -32,6 +33,7 @@ import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/ma
 import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
 import type { OutputMessage } from "@/core/kernel/messages";
+import { kernelStateAtom } from "@/core/kernel/state";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { isErrorMime } from "@/core/mime";
 import { type AppMode, kioskModeAtom } from "@/core/mode";
@@ -63,6 +65,7 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
 }) => {
   const { invisible } = useDelayVisibility(cells.length, mode);
   const kioskMode = useAtomValue(kioskModeAtom);
+  const kernelState = useAtomValue(kernelStateAtom);
   const [userConfig] = useResolvedMarimoConfig();
   const showCodeInRunModePreference = useAtomValue(showCodeInRunModeAtom);
 
@@ -140,6 +143,15 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
     }
 
     if (cells.length === 0 && !invisible) {
+      // If kernel is not yet instantiated, show loading state
+      if (!kernelState.isInstantiated) {
+        return (
+          <div className="flex-1 flex flex-col items-center justify-center py-8">
+            <Loader2Icon className="w-8 h-8 animate-spin text-muted-foreground" />
+          </div>
+        );
+      }
+      // Kernel is ready but no cells - truly empty notebook
       return (
         <div className="flex-1 flex flex-col items-center justify-center py-8">
           <Alert variant="info">

package/src/components/pages/gallery-page.tsx

@@ -33,6 +33,15 @@ const tabTarget = (path: string): string => {
   return `${getSessionId()}-${encodeURIComponent(path)}`;
 };
 
+const isHttpsUrl = (value: string): boolean => {
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:";
+  } catch {
+    return false;
+  }
+};
+
 const SEARCH_THRESHOLD = 10;
 
 const GalleryPage: React.FC = () => {
@@ -43,10 +52,10 @@ const GalleryPage: React.FC = () => {
     [],
   );
   const workspace = response.data;
-  const files = workspace?.files ?? [];
-  const root = workspace?.root ?? "";
 
   const formattedFiles = useMemo(() => {
+    const files = workspace?.files ?? [];
+    const root = workspace?.root ?? "";
     return files
       .filter((file) => !file.isDirectory)
       .map((file) => {
@@ -54,17 +63,28 @@ const GalleryPage: React.FC = () => {
           root && Paths.isAbsolute(file.path) && file.path.startsWith(root)
             ? Paths.rest(file.path, root)
             : file.path;
-        const title = titleCase(Paths.basename(relativePath));
+        const title =
+          file.opengraph?.title ?? titleCase(Paths.basename(relativePath));
         const subtitle = titleCase(Paths.dirname(relativePath));
+        const description = file.opengraph?.description ?? "";
+        const opengraphImage = file.opengraph?.image;
+        const thumbnailUrl =
+          opengraphImage && isHttpsUrl(opengraphImage)
+            ? opengraphImage
+            : asURL(
+                `/og/thumbnail?file=${encodeURIComponent(relativePath)}`,
+              ).toString();
         return {
           ...file,
           relativePath,
           title,
           subtitle,
+          description,
+          thumbnailUrl,
         };
       })
       .sort((a, b) => a.relativePath.localeCompare(b.relativePath));
-  }, [files, root]);
+  }, [workspace?.files, workspace?.root]);
 
   const filteredFiles = useMemo(() => {
     if (!searchQuery) {
@@ -130,8 +150,14 @@ const GalleryPage: React.FC = () => {
                     target={tabTarget(file.path)}
                     className="no-underline"
                   >
-                    <Card className="h-full hover:bg-accent/20 transition-colors">
-                      <CardContent className="p-6">
+                    <Card className="h-full overflow-hidden hover:bg-accent/20 transition-colors">
+                      <img
+                        src={file.thumbnailUrl}
+                        alt={file.title}
+                        loading="lazy"
+                        className="w-full aspect-1200/630 object-cover border-b border-border/60"
+                      />
+                      <CardContent className="p-6 pt-4">
                         <div className="flex flex-col gap-1">
                           {file.subtitle && (
                             <div className="text-sm font-semibold text-muted-foreground">
@@ -141,6 +167,11 @@ const GalleryPage: React.FC = () => {
                           <div className="text-lg font-medium">
                             {file.title}
                           </div>
+                          {file.description && (
+                            <div className="text-sm text-muted-foreground line-clamp-3 mt-1">
+                              {file.description}
+                            </div>
+                          )}
                         </div>
                       </CardContent>
                     </Card>

package/src/core/MarimoApp.tsx

@@ -39,14 +39,18 @@ const LazyGalleryPage = reactLazyWithPreload(
 );
 
 export function preloadPage(mode: string) {
-  if (mode === "home") {
-    LazyHomePage.preload();
-  } else if (mode === "gallery") {
-    LazyGalleryPage.preload();
-  } else if (mode === "read") {
-    LazyRunPage.preload();
-  } else {
-    LazyEditPage.preload();
+  switch (mode) {
+    case "home":
+      LazyHomePage.preload();
+      break;
+    case "gallery":
+      LazyGalleryPage.preload();
+      break;
+    case "read":
+      LazyRunPage.preload();
+      break;
+    default:
+      LazyEditPage.preload();
   }
 }
 

package/src/core/ai/context/providers/file.ts

@@ -237,7 +237,7 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
                 fileDetails.contents as Base64String,
                 mimeType,
               );
-              blob = await deserializeBlob(dataURL);
+              blob = deserializeBlob(dataURL);
             } catch {
               // Fallback to treating as text
               blob = new Blob([fileDetails.contents], { type: mimeType });