@marimo-team/islands 0.19.8-dev3 → 0.19.8-dev31

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

@@ -9,7 +9,11 @@ import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
 import {
   AtSignIcon,
   BotMessageSquareIcon,
+  HatGlasses,
   Loader2,
+  type LucideIcon,
+  MessageCircleIcon,
+  NotebookText,
   PaperclipIcon,
   PlusIcon,
   SendIcon,
@@ -45,7 +49,6 @@ import {
 import { useCellActions } from "@/core/cells/cells";
 import { aiAtom, aiEnabledAtom } from "@/core/config/config";
 import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
-import { FeatureFlagged } from "@/core/config/feature-flag";
 import { useRequestClient } from "@/core/network/requests";
 import { useRuntimeManager } from "@/core/runtime/config";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
@@ -238,58 +241,72 @@ const ChatInputFooter: React.FC<ChatInputFooterProps> = memo(
       value: CopilotMode;
       label: string;
       subtitle: string;
+      Icon: LucideIcon;
     }[] = [
+      {
+        value: "manual",
+        label: "Manual",
+        subtitle: "Pure chat, no tool usage",
+        Icon: MessageCircleIcon,
+      },
       {
         value: "ask",
         label: "Ask",
         subtitle:
           "Use AI with access to read-only tools like documentation search",
-      },
-      {
-        value: "manual",
-        label: "Manual",
-        subtitle: "Pure chat, no tool usage",
+        Icon: NotebookText,
       },
       {
         value: "agent",
         label: "Agent (beta)",
         subtitle: "Use AI with access to read and write tools",
+        Icon: HatGlasses,
       },
     ];
 
     const isAttachmentSupported =
       PROVIDERS_THAT_SUPPORT_ATTACHMENTS.has(currentProvider);
 
+    const CurrentModeIcon = modeOptions.find(
+      (o) => o.value === currentMode,
+    )?.Icon;
+
     return (
       <TooltipProvider>
         <div className="px-3 py-2 border-t border-border/20 flex flex-row flex-wrap items-center justify-between gap-1">
           <div className="flex items-center gap-2">
-            <FeatureFlagged feature="chat_modes">
-              <Select value={currentMode} onValueChange={saveModeChange}>
-                <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1 capitalize">
-                  {currentMode}
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectLabel>AI Mode</SelectLabel>
-                    {modeOptions.map((option) => (
-                      <SelectItem
-                        key={option.value}
-                        value={option.value}
-                        className="text-xs"
-                      >
-                        <div className="flex flex-col">
-                          {option.label}
-                          <div className="text-muted-foreground text-xs pt-1 block">
+            <Select value={currentMode} onValueChange={saveModeChange}>
+              <SelectTrigger className="h-6 text-xs border-border shadow-none! ring-0! bg-muted hover:bg-muted/30 py-0 px-2 gap-1.5">
+                {CurrentModeIcon && <CurrentModeIcon className="h-3 w-3" />}
+                <span className="capitalize">{currentMode}</span>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectLabel className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">
+                    AI Mode
+                  </SelectLabel>
+                  {modeOptions.map((option) => (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value}
+                      className="text-xs py-1"
+                    >
+                      <div className="flex items-start gap-2.5">
+                        <span className="mt-1 text-muted-foreground">
+                          <option.Icon className="h-3 w-3" />
+                        </span>
+                        <div className="flex flex-col gap-0.5">
+                          <span className="font-semibold">{option.label}</span>
+                          <span className="text-muted-foreground">
                             {option.subtitle}
-                          </div>
+                          </span>
                         </div>
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            </FeatureFlagged>
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
             <AIModelDropdown
               placeholder="Model"
               triggerClassName="h-6 text-xs shadow-none! ring-0! bg-muted hover:bg-muted/30 rounded-sm"

package/src/components/data-table/__tests__/data-table.test.tsx

@@ -1,6 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import type { ColumnDef, RowSelectionState } from "@tanstack/react-table";
-import { render, screen } from "@testing-library/react";
+import type {
+  ColumnDef,
+  PaginationState,
+  RowSelectionState,
+  SortingState,
+} from "@tanstack/react-table";
+import { render, screen, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { DataTable } from "../data-table";
@@ -95,4 +100,91 @@ describe("DataTable", () => {
     expect(rows[1]).toHaveAttribute("title", "Michael Scott");
     expect(rows[2]).toHaveAttribute("title", "Jim Halpert");
   });
+
+  it("should display updated data after rerender with manual sorting and pagination", () => {
+    // Simulates the bug from issue #8023:
+    // When a user sorts a table, rows that moved from page 2 to page 1
+    // don't visually refresh after the underlying data is updated.
+
+    interface RowData {
+      id: number;
+      status: string;
+      value: number;
+    }
+
+    // Initial data: 4 rows, page_size=3
+    const initialData: RowData[] = [
+      { id: 4, status: "pending", value: 40 },
+      { id: 3, status: "pending", value: 30 },
+      { id: 2, status: "pending", value: 20 },
+    ];
+
+    const columns: ColumnDef<RowData>[] = [
+      { id: "id", accessorFn: (row) => row.id, header: "id" },
+      { id: "status", accessorFn: (row) => row.status, header: "status" },
+      { id: "value", accessorFn: (row) => row.value, header: "value" },
+    ];
+
+    // Simulate sorted state (value descending) - manual sorting means
+    // data comes pre-sorted from backend
+    const sorting: SortingState = [{ id: "value", desc: true }];
+    const setSorting = vi.fn();
+
+    const paginationState: PaginationState = { pageIndex: 0, pageSize: 3 };
+    const setPaginationState = vi.fn();
+
+    const commonProps = {
+      columns,
+      selection: null as "single" | "multi" | null,
+      totalRows: 4,
+      totalColumns: 3,
+      pagination: true,
+      manualPagination: true,
+      paginationState,
+      setPaginationState,
+      manualSorting: true,
+      sorting,
+      setSorting,
+    };
+
+    const { rerender } = render(
+      <TooltipProvider>
+        <DataTable {...commonProps} data={initialData} />
+      </TooltipProvider>,
+    );
+
+    // Verify initial data is displayed - look for "pending" in cells
+    const rows = screen.getAllByRole("row");
+    // Row 0 is header, rows 1-3 are data rows
+    expect(rows).toHaveLength(4); // 1 header + 3 data rows
+    // All rows should show "pending"
+    expect(within(rows[1]).getByText("pending")).toBeTruthy();
+    expect(within(rows[2]).getByText("pending")).toBeTruthy();
+    expect(within(rows[3]).getByText("pending")).toBeTruthy();
+
+    // Now simulate data update: row with id=4 is now "approved"
+    // Backend returns sorted data with the update applied
+    const updatedData: RowData[] = [
+      { id: 4, status: "approved", value: 40 },
+      { id: 3, status: "pending", value: 30 },
+      { id: 2, status: "pending", value: 20 },
+    ];
+
+    // Rerender with updated data (same sorting, same pagination)
+    rerender(
+      <TooltipProvider>
+        <DataTable {...commonProps} data={updatedData} />
+      </TooltipProvider>,
+    );
+
+    // BUG: The row should show "approved" but might show stale "pending"
+    const updatedRows = screen.getAllByRole("row");
+    expect(updatedRows).toHaveLength(4);
+
+    // The first data row (id=4) should now show "approved"
+    expect(within(updatedRows[1]).getByText("approved")).toBeTruthy();
+    // Other rows should still show "pending"
+    expect(within(updatedRows[2]).getByText("pending")).toBeTruthy();
+    expect(within(updatedRows[3]).getByText("pending")).toBeTruthy();
+  });
 });

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

@@ -43,6 +43,7 @@ import type { CellData } from "@/core/cells/types";
 import { formatEditorViews } from "@/core/codemirror/format";
 import { toggleToLanguage } from "@/core/codemirror/language/commands";
 import { switchLanguage } from "@/core/codemirror/language/extension";
+import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
   aiEnabledAtom,
   appWidthAtom,
@@ -85,6 +86,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
     sendToBottom,
     addColumnBreakpoint,
     clearCellOutput,
+    markUntouched,
   } = useCellActions();
   const splitCell = useSplitCellCallback();
   const runCell = useRunCell(cell?.cellId);
@@ -209,7 +211,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
         icon: <MarkdownIcon />,
         label: "Convert to Markdown",
         hotkey: "cell.viewAsMarkdown",
-        handle: () => {
+        handle: async () => {
           const editorView = getEditorView();
           if (!editorView) {
             return;
@@ -219,6 +221,17 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
             language: "markdown",
             keepCodeAsIs: false,
           });
+          // Code stays visible until the user blurs the cell
+          if (!config.hide_code && MARKDOWN_INITIAL_HIDE_CODE) {
+            await saveCellConfig({
+              configs: { [cellId]: { hide_code: MARKDOWN_INITIAL_HIDE_CODE } },
+            });
+            updateCellConfig({
+              cellId,
+              config: { hide_code: MARKDOWN_INITIAL_HIDE_CODE },
+            });
+            markUntouched({ cellId });
+          }
         },
         hidden: isSetupCell,
       },

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/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 });

package/src/core/cells/__tests__/cells.test.ts

@@ -2561,6 +2561,126 @@ describe("cell reducer", () => {
       expect(state.untouchedNewCells.has(newCellId)).toBe(false);
       expect(exportedForTesting.isCellCodeHidden(state, newCellId)).toBe(true);
     });
+
+    it("can mark an existing cell as untouched", () => {
+      // Create a cell without hideCode (not in untouchedNewCells)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark it as untouched
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched is idempotent", () => {
+      // Create a cell without hideCode
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched multiple times
+      actions.markUntouched({ cellId: newCellId });
+      actions.markUntouched({ cellId: newCellId });
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched does not affect already untouched cells", () => {
+      // Create a cell with hideCode (already in untouchedNewCells)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: true,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+
+      // Calling markUntouched should not change anything
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markTouched and markUntouched can toggle cell state", () => {
+      // Create a cell without hideCode
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+
+      // Initially not untouched
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched
+      actions.markUntouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+
+      // Mark as touched
+      actions.markTouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched again
+      actions.markUntouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched works for markdown cell conversion scenario", () => {
+      // Simulates converting a Python cell to Markdown
+      // 1. Create a regular cell (no hideCode)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const cellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+
+      // Cell starts without hide_code and not in untouchedNewCells
+      expect(state.cellData[cellId].config.hide_code).toBe(false);
+      expect(state.untouchedNewCells.has(cellId)).toBe(false);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(false);
+
+      // 2. Convert to markdown: set hide_code and mark as untouched
+      actions.updateCellConfig({
+        cellId,
+        config: { hide_code: true },
+      });
+      actions.markUntouched({ cellId });
+
+      // Code should NOT be hidden because cell is untouched (user can edit)
+      expect(state.cellData[cellId].config.hide_code).toBe(true);
+      expect(state.untouchedNewCells.has(cellId)).toBe(true);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(false);
+
+      // 3. User blurs the cell (markTouched)
+      actions.markTouched({ cellId });
+
+      // Now code should be hidden
+      expect(state.untouchedNewCells.has(cellId)).toBe(false);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(true);
+    });
   });
 
   describe("releaseCellAtoms", () => {

package/src/core/cells/cells.ts

@@ -1033,6 +1033,20 @@ const {
 
     return state;
   },
+  markUntouched: (state, action: { cellId: CellId }) => {
+    const { cellId } = action;
+
+    if (!state.untouchedNewCells.has(cellId)) {
+      const nextUntouchedNewCells = new Set(state.untouchedNewCells);
+      nextUntouchedNewCells.add(cellId);
+      return {
+        ...state,
+        untouchedNewCells: nextUntouchedNewCells,
+      };
+    }
+
+    return state;
+  },
   scrollToTarget: (state) => {
     // Scroll to the specified cell and clear the scroll key.
     const scrollKey = state.scrollKey;

package/src/core/codemirror/language/languages/markdown.ts

@@ -28,6 +28,13 @@ import type { LanguageAdapter } from "../types";
 
 export type MarkdownLanguageAdapterMetadata = MarkdownMetadata;
 
+/**
+ * Default hide_code setting for markdown cells.
+ * When true, the markdown code is hidden after the cell is blurred,
+ * showing only the rendered output.
+ */
+export const MARKDOWN_INITIAL_HIDE_CODE = true;
+
 /**
  * Language adapter for Markdown.
  */