@marimo-team/frontend 0.23.6-dev8 → 0.23.6

package/src/components/slides/slide-form.tsx

@@ -8,6 +8,7 @@ import {
   CookieIcon,
   PanelRightCloseIcon,
   PanelRightOpenIcon,
+  KeyboardIcon,
 } from "lucide-react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
@@ -28,6 +29,7 @@ import type {
 import { useState } from "react";
 import { Tooltip } from "../ui/tooltip";
 import { Button } from "../ui/button";
+import { Kbd } from "../ui/kbd";
 import type { RuntimeCell } from "@/core/cells/types";
 
 export const DEFAULT_SLIDE_TYPE: SlideType = "slide";
@@ -132,10 +134,51 @@ const SlidesForm = ({
       <TabsContent value="deck" className="mt-0 flex-1">
         <DeckConfigForm layout={layout} setLayout={setLayout} />
       </TabsContent>
+      <hr />
+      <KeyboardTips />
     </Tabs>
   );
 };
 
+const KEYBOARD_TIPS: { keys: string[]; description: string }[] = [
+  { keys: ["F"], description: "Enter fullscreen" },
+  { keys: ["C"], description: "Toggle code editor" },
+];
+
+const KEYBOARD_SHORTCUTS_URL =
+  "https://vlaaad.github.io/reveal/keyboard-shortcuts";
+
+const KeyboardTips = () => {
+  return (
+    <div className="flex flex-col gap-2 text-xs text-muted-foreground">
+      <div className="flex items-center gap-1.5 font-medium text-foreground/80">
+        <KeyboardIcon className="h-3.5 w-3.5" />
+        <span>Shortcuts</span>
+      </div>
+      <ul className="flex flex-col gap-1.5">
+        {KEYBOARD_TIPS.map(({ keys, description }) => (
+          <li key={description} className="flex items-center justify-between">
+            <span>{description}</span>
+            <span className="flex gap-1">
+              {keys.map((key) => (
+                <Kbd key={key}>{key}</Kbd>
+              ))}
+            </span>
+          </li>
+        ))}
+      </ul>
+      <a
+        href={KEYBOARD_SHORTCUTS_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-link hover:underline"
+      >
+        See all shortcuts
+      </a>
+    </div>
+  );
+};
+
 const SlideConfigForm = ({
   layout,
   setLayout,

package/src/components/terminal/terminal.tsx

@@ -270,6 +270,22 @@ const TerminalComponent: React.FC<TerminalComponentProps> = ({
 
         const handleOpen = () => {
           updateReadyState();
+          // Send initial dimensions: the mount-time fit() may have fired
+          // before the WS was OPEN, dropping the resize message and leaving
+          // the PTY at its default 0x0 winsize.
+          fitAddon.fit();
+          if (terminal.cols > 0 && terminal.rows > 0) {
+            socket.send(
+              JSON.stringify({
+                type: "resize",
+                cols: terminal.cols,
+                rows: terminal.rows,
+              }),
+            );
+            // The fit() above may have triggered onResize → scheduled a
+            // debounced send. Cancel it; we just sent the same dims.
+            handleBackendResizeDebounced.cancel();
+          }
         };
 
         const handleDisconnect = () => {

package/src/components/ui/links.tsx

@@ -15,7 +15,8 @@ export const ExternalLink = ({
     | `https://marimo.io/${string}`
     | `https://links.marimo.app/${string}`
     | `https://wandb.ai/${string}`
-    | `https://portal.azure.com/${string}`;
+    | `https://portal.azure.com/${string}`
+    | `https://opencode.ai/${string}`;
   children: React.ReactNode;
 }) => {
   return (

package/src/core/ai/ids/ids.ts

@@ -13,6 +13,7 @@ export const KNOWN_PROVIDERS = [
   "github",
   "openrouter",
   "wandb",
+  "opencode-go",
   "marimo",
 ] as const;
 export type KnownProviderId = (typeof KNOWN_PROVIDERS)[number];

package/src/core/cells/__tests__/apply-transaction.test.ts

@@ -469,10 +469,34 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: b, column: 1 },
-      { type: "set-config", cellId: c, column: 0 },
-      { type: "set-config", cellId: d, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: b,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: d,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     // a and c in col0; b and d in col1. Order within each column follows
     // the reorder-cells order.
@@ -487,7 +511,15 @@ describe("applyTransactionChanges column rebuild", () => {
   it("set-config without reorder-cells moves the cell to the new column", () => {
     setup("a", "b", "c");
     const [, b] = state.cellIds.inOrderIds;
-    apply([{ type: "set-config", cellId: b, column: 1 }]);
+    apply([
+      {
+        type: "set-config",
+        cellId: b,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
+    ]);
     // Without reorder-cells, the flat order comes from the current tree.
     // b gets explicit col=1; a and c stay with default null → follow the
     // previous cell's column (a → col0 because prev=0; c → col1 because
@@ -503,7 +535,15 @@ describe("applyTransactionChanges column rebuild", () => {
   it("no column change: set-config only touching other fields does not repartition", () => {
     setup("a", "b", "c");
     const [, b] = state.cellIds.inOrderIds;
-    apply([{ type: "set-config", cellId: b, hideCode: true }]);
+    apply([
+      {
+        type: "set-config",
+        cellId: b,
+        column: null,
+        disabled: false,
+        hideCode: true,
+      },
+    ]);
     // All three cells remain in a single column. No rebuild triggered.
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -525,8 +565,20 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: b, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: b,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -550,8 +602,20 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -562,8 +626,20 @@ describe("applyTransactionChanges column rebuild", () => {
     // Now merge everything back to col 0.
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: c, column: 0 },
-      { type: "set-config", cellId: d, column: 0 },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: d,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -609,8 +685,20 @@ describe("applyTransactionChanges column rebuild", () => {
       { type: "reorder-cells", cellIds: [a, b, c] },
       { type: "set-code", cellId: a, code: "x = 1" },
       { type: "set-name", cellId: b, name: "middle" },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: b, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: b,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -658,8 +746,20 @@ describe("applyTransactionChanges column rebuild", () => {
     // Split into two columns. Only a and c are anchors.
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -670,7 +770,13 @@ describe("applyTransactionChanges column rebuild", () => {
     // Move the c anchor to col 0. d has no explicit column so it follows c.
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: c, column: 0 },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -686,9 +792,27 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
-      { type: "set-config", cellId: d, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: d,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -700,7 +824,13 @@ describe("applyTransactionChanges column rebuild", () => {
     // does NOT follow c.
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: c, column: 0 },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "
@@ -719,8 +849,20 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       // set-config appears FIRST in the transaction.
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
       // reorder-cells comes afterwards.
       { type: "reorder-cells", cellIds: [a, b, c, d] },
     ]);
@@ -741,9 +883,21 @@ describe("applyTransactionChanges column rebuild", () => {
     setup("a", "b", "c", "d");
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
-      { type: "set-config", cellId: a, column: 0 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
       { type: "set-code", cellId: a, code: "x = 1" },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
       { type: "reorder-cells", cellIds: [a, b, c, d] },
       { type: "set-name", cellId: d, name: "last" },
     ]);
@@ -769,8 +923,20 @@ describe("applyTransactionChanges column rebuild", () => {
     const [a, b, c, d] = state.cellIds.inOrderIds;
     apply([
       { type: "reorder-cells", cellIds: [a, b, c, d] },
-      { type: "set-config", cellId: a, column: 0 },
-      { type: "set-config", cellId: c, column: 1 },
+      {
+        type: "set-config",
+        cellId: a,
+        column: 0,
+        disabled: false,
+        hideCode: false,
+      },
+      {
+        type: "set-config",
+        cellId: c,
+        column: 1,
+        disabled: false,
+        hideCode: false,
+      },
     ]);
     expect(prettyColumns(state)).toMatchInlineSnapshot(`
       "

package/src/core/cells/__tests__/document-changes.test.ts

@@ -203,6 +203,8 @@ describe("toDocumentChanges", () => {
         [
           {
             "cellId": "0",
+            "column": null,
+            "disabled": false,
             "hideCode": true,
             "type": "set-config",
           },
@@ -246,6 +248,8 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -273,11 +277,15 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
             "cellId": "2",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -310,11 +318,15 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 0,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
             "cellId": "2",
             "column": 0,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {
@@ -358,6 +370,8 @@ describe("toDocumentChanges", () => {
           {
             "cellId": "1",
             "column": 1,
+            "disabled": false,
+            "hideCode": false,
             "type": "set-config",
           },
           {

package/src/core/cells/document-changes.ts

@@ -156,10 +156,13 @@ function columnChanges(
   for (const [cellId, newCol] of newColumns) {
     const prevCol = prevColumns.get(cellId);
     if (prevCol !== newCol) {
+      const cell = getCell(cellId, newState);
       changes.push({
         type: "set-config",
         cellId: cellId,
         column: newCol,
+        disabled: cell?.config.disabled ?? false,
+        hideCode: cell?.config.hide_code ?? false,
       });
     }
   }
@@ -257,18 +260,21 @@ export function toDocumentChanges(
     }
 
     // updateCellConfig → set-config
-    // Maps CellConfig's snake_case hide_code to the change's camelCase hideCode.
-    // Only includes fields that were actually specified in the partial config
-    // (from the action payload, not the full cell config).
+    // SetConfig is full-replacement: emit the cell's complete config from
+    // newState (which already merged the action's partial payload).
     case "updateCellConfig": {
-      const { cellId, config } = action.payload;
+      const { cellId } = action.payload;
+      const cell = getCell(cellId, newState);
+      if (!cell) {
+        return [];
+      }
       return [
         {
           type: "set-config",
           cellId: cellId,
-          ...(config.hide_code != null && { hideCode: config.hide_code }),
-          ...(config.disabled != null && { disabled: config.disabled }),
-          ...(config.column != null && { column: config.column }),
+          column: cell.config.column ?? null,
+          disabled: cell.config.disabled ?? false,
+          hideCode: cell.config.hide_code ?? false,
         },
       ];
     }
@@ -538,18 +544,15 @@ export function fromDocumentChanges(
         break;
 
       // set-config → updateCellConfig
-      // Maps the change's camelCase hideCode back to CellConfig's snake_case
-      // hide_code. Only includes fields that are non-null (null means
-      // "not specified" on the wire, not "clear the value").
       case "set-config":
         actions.push({
           type: "updateCellConfig",
           payload: {
             cellId: change.cellId,
             config: {
-              ...(change.hideCode != null && { hide_code: change.hideCode }),
-              ...(change.disabled != null && { disabled: change.disabled }),
-              ...(change.column != null && { column: change.column }),
+              column: change.column,
+              disabled: change.disabled,
+              hide_code: change.hideCode,
             },
           },
         });
@@ -650,7 +653,7 @@ export function applyTransactionChanges(
     ) {
       continue;
     }
-    if (change.type === "set-config" && change.column != null) {
+    if (change.type === "set-config") {
       hasColumnChange = true;
     }
     if (change.type === "create-cell" && change.config?.column != null) {

package/src/core/codemirror/markdown/__tests__/commands.test.ts

@@ -385,6 +385,42 @@ describe("insertImage", () => {
     );
   });
 
+  test("normalizes Windows backslash paths to forward slashes in image URL", async () => {
+    view = createEditor("Hello, world!");
+    view.dispatch({
+      selection: { anchor: 7, head: 7 },
+    });
+
+    vi.spyOn(store, "get").mockImplementation((atom) => {
+      if (atom === filenameAtom) {
+        return "C:\\Users\\user\\project\\notebook.py";
+      }
+      if (atom === requestClientAtom) {
+        return mockRequestClient;
+      }
+    });
+
+    mockRequestClient.sendCreateFileOrFolder.mockResolvedValueOnce({
+      success: true,
+      message: null,
+      info: {
+        path: "C:\\Users\\user\\project\\public\\hello.png",
+        name: "hello.png",
+        children: [],
+        id: "",
+        isDirectory: false,
+        isMarimoFile: false,
+        lastModified: null,
+      },
+    });
+
+    await insertImage(view, mockPngFile());
+
+    expect(view.state.doc.toString()).toMatchInlineSnapshot(
+      `"Hello, ![alt](public/hello.png)world!"`,
+    );
+  });
+
   test("saves image as file different extension", async () => {
     view = createEditor("Hello, world!");
     view.dispatch({

package/src/core/codemirror/markdown/commands.ts

@@ -360,7 +360,10 @@ export async function insertImage(view: EditorView, file: File) {
             notebookDir &&
             savedFilePath.startsWith(notebookDir)
           ) {
-            savedFilePath = Paths.rest(savedFilePath, notebookDir);
+            savedFilePath = Paths.rest(savedFilePath, notebookDir).replaceAll(
+              "\\",
+              "/",
+            );
           }
 
           toast({

package/src/core/config/config-schema.ts

@@ -166,6 +166,7 @@ export const UserConfigSchema = z
         ollama: AiConfigSchema.optional(),
         openrouter: AiConfigSchema.optional(),
         wandb: AiConfigSchema.optional(),
+        opencode_go: AiConfigSchema.optional(),
         open_ai_compatible: AiConfigSchema.optional(),
         azure: AiConfigSchema.optional(),
         bedrock: z

package/src/core/edit-app.tsx

@@ -137,6 +137,7 @@ export const EditApp: React.FC<AppProps> = ({
       mode={viewState.mode}
       userConfig={userConfig}
       appConfig={appConfig}
+      hideControls={hideControls}
     />
   );
 

package/src/core/run-app.tsx

@@ -10,7 +10,11 @@ import { buttonVariants } from "@/components/ui/button";
 import { DelayMount } from "@/components/utils/delay-mount";
 import { cn } from "@/utils/cn";
 import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
-import { notebookIsRunningAtom, useCellActions } from "./cells/cells";
+import {
+  hasCellsAtom,
+  notebookIsRunningAtom,
+  useCellActions,
+} from "./cells/cells";
 import type { AppConfig } from "./config/config-schema";
 import { RuntimeState } from "./kernel/RuntimeState";
 import { getSessionId } from "./kernel/session";
@@ -42,10 +46,13 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
 
   const isRunning = useAtomValue(notebookIsRunningAtom);
   const isConnecting = isAppConnecting(connection.state);
+  // Skip the "Connecting..." gate when we already have cells to show — from
+  // an embedded snapshot or a prior connection.
+  const hasExistingCells = useAtomValue(hasCellsAtom);
 
   const renderCells = () => {
     // If we are connecting for more than 2 seconds, show a spinner
-    if (isConnecting) {
+    if (isConnecting && !hasExistingCells) {
       return (
         <DelayMount milliseconds={2000} fallback={null}>
           <Spinner className="mx-auto" />

package/src/core/runtime/runtime.ts

@@ -5,6 +5,7 @@ import { Logger } from "@/utils/Logger";
 import { KnownQueryParams } from "../constants";
 import { isIslands } from "../islands/utils";
 import { getSessionId, type SessionId } from "../kernel/session";
+import { isStaticNotebook } from "../static/static-state";
 import { isWasm } from "../wasm/utils";
 import type { RuntimeConfig } from "./types";
 
@@ -178,8 +179,8 @@ export class RuntimeManager {
   }
 
   async isHealthy(): Promise<boolean> {
-    // Always healthy if WASM
-    if (isWasm() || isIslands()) {
+    // Always healthy if WASM, Islands, or a static notebook (no server)
+    if (isWasm() || isIslands() || isStaticNotebook()) {
       return true;
     }