@marimo-team/frontend 0.21.2-dev5 → 0.21.2-dev53

package/src/components/data-table/utils.ts

@@ -1,8 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import type { Table } from "@tanstack/react-table";
 import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
+import { getMimeValues } from "./mime-cell";
 import { INDEX_COLUMN_NAME } from "./types";
 
 /**
@@ -32,6 +34,21 @@ export async function loadTableData<T = object>(
   return tableData;
 }
 
+/**
+ * Load both table and raw table data. Raw table data is typically when
+ * there is formatting applied to the table data.
+ */
+export async function loadTableAndRawData<T>(
+  tableData: TableData<T>,
+  rawTableData?: TableData<T> | null,
+): Promise<[T[], T[] | undefined]> {
+  if (rawTableData) {
+    return Promise.all([loadTableData(tableData), loadTableData(rawTableData)]);
+  }
+
+  return [await loadTableData(tableData), undefined];
+}
+
 /**
  * Get the stable row ID for a row.
  *
@@ -87,3 +104,73 @@ export function stringifyUnknownValue(opts: {
   }
   return String(value);
 }
+
+function stripHtml(html: string): string {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  const text = (div.textContent || div.innerText || "").trim();
+  return text || html;
+}
+
+const HTML_MIMETYPES = new Set(["text/html", "text/markdown"]);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+
+/**
+ * Get clipboard-ready text and optional HTML for a cell.
+ *
+ * @param rawValue - The raw (unformatted) value, or undefined if not available.
+ * @param displayedValue - The displayed value (may be a mime bundle).
+ */
+export function getClipboardContent(
+  rawValue: unknown,
+  displayedValue: unknown,
+): { text: string; html?: string } {
+  const mimeValues =
+    typeof displayedValue === "object" && displayedValue !== null
+      ? getMimeValues(displayedValue)
+      : undefined;
+
+  let html: string | undefined;
+  if (mimeValues) {
+    // text/markdown from mo.md() contains rendered HTML
+    const htmlParts = mimeValues
+      .filter((v) => HTML_MIMETYPES.has(v.mimetype))
+      .map((v) => v.data);
+    html = htmlParts.length > 0 ? htmlParts.join("") : undefined;
+  }
+
+  let text: string;
+  if (rawValue !== undefined && rawValue !== displayedValue) {
+    text = stringifyUnknownValue({ value: rawValue });
+  } else if (mimeValues) {
+    text = mimeValues
+      .map((v) => (HTML_MIMETYPES.has(v.mimetype) ? stripHtml(v.data) : v.data))
+      .join(", ");
+  } else {
+    text = stringifyUnknownValue({ value: displayedValue });
+  }
+
+  return { text, html };
+}
+
+/**
+ * Get the raw (unformatted) value for a row/column from the table,
+ * or undefined if raw data is not available.
+ */
+export function getRawValue<TData>(
+  table: Table<TData>,
+  rowIndex: number,
+  columnId: string,
+): unknown {
+  const rawData = table.options.meta?.rawData;
+  if (rawData) {
+    const rawRow = rawData[rowIndex];
+    if (isRecord(rawRow)) {
+      return rawRow[columnId];
+    }
+  }
+  return undefined;
+}

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

@@ -5,9 +5,9 @@ import { beforeAll, describe, expect, it } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
+import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
 import { createCellRuntimeState } from "@/core/cells/types";
 import type { UserConfig } from "@/core/config/config-schema";
 import type { OutputMessage } from "@/core/kernel/messages";
@@ -39,7 +39,7 @@ describe("Cell data attributes", () => {
     "present",
   ])("should render cell with data-cell-id and data-cell-name in %s mode", (mode) => {
     const { store, wrapper } = createTestWrapper();
-    const cellId = "test" as CellId;
+    const cid = cellId("test");
     const cellName = "test_cell";
 
     const userConfig: UserConfig = {
@@ -83,7 +83,7 @@ describe("Cell data attributes", () => {
 
     const notebook = MockNotebook.notebookState({
       cellData: {
-        [cellId]: {
+        [cid]: {
           code: "",
           name: cellName,
           edited: false,
@@ -97,7 +97,7 @@ describe("Cell data attributes", () => {
       },
     });
 
-    notebook.cellRuntime[cellId] = createCellRuntimeState({
+    notebook.cellRuntime[cid] = createCellRuntimeState({
       status: "idle",
       output: null,
       consoleOutputs: [],
@@ -117,7 +117,7 @@ describe("Cell data attributes", () => {
     const { container } = render(
       <TooltipProvider>
         <Cell
-          cellId={cellId}
+          cellId={cid}
           mode={mode as AppMode}
           canDelete={true}
           userConfig={userConfig}
@@ -131,7 +131,7 @@ describe("Cell data attributes", () => {
       { wrapper },
     );
 
-    const cellElement = container.querySelector(`[data-cell-id="${cellId}"]`);
+    const cellElement = container.querySelector(`[data-cell-id="${cid}"]`);
     expect(cellElement).toBeTruthy();
     expect(cellElement?.getAttribute("data-cell-name")).toBe(cellName);
   });
@@ -139,7 +139,7 @@ describe("Cell data attributes", () => {
 
 describe("Output data attributes", () => {
   it("should render output with data-cell-role", () => {
-    const cellId = "test" as CellId;
+    const cid = cellId("test");
     const output: OutputMessage = {
       channel: "output",
       mimetype: "text/plain",
@@ -151,7 +151,7 @@ describe("Output data attributes", () => {
       <TooltipProvider>
         <OutputArea
           output={output}
-          cellId={cellId}
+          cellId={cid}
           stale={false}
           loading={false}
           allowExpand={true}

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

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+import { variableName } from "@/__tests__/branded";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import { dataSourceConnectionsAtom } from "@/core/datasets/data-source-connections";
 import { DUCKDB_ENGINE } from "@/core/datasets/engines";
@@ -7,7 +8,6 @@ import { datasetsAtom } from "@/core/datasets/state";
 import type { DatasetsState } from "@/core/datasets/types";
 import { store } from "@/core/state/jotai";
 import { variablesAtom } from "@/core/variables/state";
-import type { Variable, VariableName } from "@/core/variables/types";
 import { codeToCells, getAICompletionBody } from "../completion-utils";
 
 // Mock getCodes function
@@ -205,16 +205,16 @@ describe("getAICompletionBody", () => {
 
   it("should return the correct completion body with mentioned variables", () => {
     // Set up test data in the Jotai store
-    const testVariables: Record<VariableName, Variable> = {
-      ["var1" as VariableName]: {
-        name: "var1" as VariableName,
+    const testVariables = {
+      [variableName("var1")]: {
+        name: variableName("var1"),
         value: "string value",
         dataType: "string",
         declaredBy: [],
         usedBy: [],
       },
-      ["var2" as VariableName]: {
-        name: "var2" as VariableName,
+      [variableName("var2")]: {
+        name: variableName("var2"),
         value: "42",
         dataType: "number",
         declaredBy: [],
@@ -253,9 +253,9 @@ describe("getAICompletionBody", () => {
     ];
     store.set(datasetsAtom, { tables: testDatasets } as DatasetsState);
 
-    const testVariables: Record<VariableName, Variable> = {
-      ["var1" as VariableName]: {
-        name: "var1" as VariableName,
+    const testVariables = {
+      [variableName("var1")]: {
+        name: variableName("var1"),
         value: "string value",
         dataType: "string",
         declaredBy: [],
@@ -285,9 +285,9 @@ describe("getAICompletionBody", () => {
 
   it("should handle non-existent variables", () => {
     // Set up test data in the Jotai store
-    const testVariables: Record<VariableName, Variable> = {
-      ["existingVar" as VariableName]: {
-        name: "existingVar" as VariableName,
+    const testVariables = {
+      [variableName("existingVar")]: {
+        name: variableName("existingVar"),
         value: "string value",
         dataType: "string",
         declaredBy: [],
@@ -322,9 +322,9 @@ describe("getAICompletionBody", () => {
     ];
     store.set(datasetsAtom, { tables: testDatasets } as DatasetsState);
 
-    const testVariables: Record<VariableName, Variable> = {
-      ["conflict" as VariableName]: {
-        name: "conflict" as VariableName,
+    const testVariables = {
+      [variableName("conflict")]: {
+        name: variableName("conflict"),
         value: "string value",
         dataType: "string",
         declaredBy: [],

package/src/components/editor/navigation/__tests__/clipboard.test.ts

@@ -4,8 +4,8 @@
 import { act, renderHook } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { asMock, MockModules, Mocks, SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
 import type { CellActions, NotebookState } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
 import { useCellClipboard } from "../clipboard";
 
 // Mock dependencies
@@ -179,7 +179,7 @@ describe("useCellClipboard", () => {
     });
 
     it("should filter out non-existent cells", async () => {
-      const nonExistentCellId = "non-existent" as CellId;
+      const nonExistentCellId = cellId("non-existent");
 
       const { result } = renderHook(() => useCellClipboard());
 

package/src/components/editor/navigation/__tests__/selection.test.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
+
 import { beforeEach, describe, expect, it } from "vitest";
-import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 import { MultiColumn } from "@/utils/id-tree";
 import type { CellSelectionState } from "../selection";
 import { exportedForTesting } from "../selection";
@@ -8,11 +9,11 @@ import { exportedForTesting } from "../selection";
 const { initialState, reducer, createActions } = exportedForTesting;
 
 const CellIds = {
-  a: "a" as CellId,
-  b: "b" as CellId,
-  c: "c" as CellId,
-  d: "d" as CellId,
-  e: "e" as CellId,
+  a: cellId("a"),
+  b: cellId("b"),
+  c: cellId("c"),
+  d: cellId("d"),
+  e: cellId("e"),
 };
 
 describe("cell selection reducer", () => {

package/src/components/editor/navigation/__tests__/state.test.ts

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import { type CellId, HTMLCellId } from "@/core/cells/ids";
 
 const mockScrollCellIntoView = vi.fn();
@@ -14,12 +15,12 @@ vi.mock("../focus-utils", () => ({
 type TemporarilyShownCodeState = Set<CellId>;
 
 describe("temporarilyShownCodeActions", () => {
-  const cellId = "cell-1" as CellId;
+  const cid = cellId("cell-1");
   let cellElement: HTMLElement;
 
   beforeEach(() => {
     cellElement = document.createElement("div");
-    cellElement.id = HTMLCellId.create(cellId);
+    cellElement.id = HTMLCellId.create(cid);
     document.body.append(cellElement);
     cellElement.focus();
 
@@ -37,17 +38,17 @@ describe("temporarilyShownCodeActions", () => {
   });
 
   it("should scroll cell into view when removing cell causes layout shift", () => {
-    const state = new Set<CellId>([cellId]);
-    removeCell(state, cellId);
+    const state = new Set<CellId>([cid]);
+    removeCell(state, cid);
 
-    expect(mockScrollCellIntoView).toHaveBeenCalledWith(cellId);
+    expect(mockScrollCellIntoView).toHaveBeenCalledWith(cid);
   });
 
   it("should not scroll when focused cell is not found", () => {
     vi.spyOn(HTMLCellId, "findElementThroughShadowDOMs").mockReturnValue(null);
 
-    const state = new Set<CellId>([cellId]);
-    removeCell(state, cellId);
+    const state = new Set<CellId>([cid]);
+    removeCell(state, cid);
 
     expect(mockScrollCellIntoView).not.toHaveBeenCalled();
   });

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

@@ -316,7 +316,7 @@ export const MarimoErrorOutput = ({
               <ul className="list-disc">
                 {error.cells.map((cid, cidIdx) => (
                   <li className={liStyle} key={`cell-${cidIdx}`}>
-                    <CellLinkError cellId={cid as CellId} />
+                    <CellLinkError cellId={cid} />
                   </li>
                 ))}
               </ul>
@@ -491,7 +491,7 @@ export const MarimoErrorOutput = ({
                 ) : (
                   <div>
                     {processTextForUrls(error.msg, `exception-${idx}`)}
-                    <CellLinkError cellId={error.raising_cell as CellId} />
+                    <CellLinkError cellId={error.raising_cell} />
                   </div>
                 )}
               </li>
@@ -518,7 +518,7 @@ export const MarimoErrorOutput = ({
               ) : (
                 <div>
                   {error.msg}
-                  <CellLinkError cellId={error.blamed_cell as CellId} />
+                  <CellLinkError cellId={error.blamed_cell} />
                 </div>
               )}
             </li>
@@ -554,13 +554,13 @@ export const MarimoErrorOutput = ({
               {error.msg}
               {error.blamed_cell == null ? (
                 <span>
-                  (<CellLinkError cellId={error.raising_cell as CellId} />)
+                  (<CellLinkError cellId={error.raising_cell} />)
                 </span>
               ) : (
                 <span>
-                  (<CellLinkError cellId={error.raising_cell as CellId} />
+                  (<CellLinkError cellId={error.raising_cell} />
                   &nbsp;blames&nbsp;
-                  <CellLinkError cellId={error.blamed_cell as CellId} />)
+                  <CellLinkError cellId={error.blamed_cell} />)
                 </span>
               )}
             </div>
@@ -578,7 +578,7 @@ export const MarimoErrorOutput = ({
           {ancestorStoppedErrors.map((error, idx) => (
             <div key={`ancestor-stopped-${idx}`}>
               {error.msg}
-              <CellLinkError cellId={error.raising_cell as CellId} />
+              <CellLinkError cellId={error.raising_cell} />
             </div>
           ))}
           {cellId && (

package/src/components/editor/output/__tests__/traceback.test.tsx

@@ -3,8 +3,8 @@
 import { render } from "@testing-library/react";
 import { beforeAll, beforeEach, describe, expect, test, vi } from "vitest";
 import { Tracebacks } from "@/__mocks__/tracebacks";
+import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import type { CellId } from "@/core/cells/ids";
 import { initialModeAtom } from "@/core/mode";
 import { store } from "@/core/state/jotai";
 import { renderHTML } from "@/plugins/core/RenderHTML";
@@ -14,7 +14,7 @@ import {
   replaceTracebackPrefix,
 } from "../MarimoTracebackOutput";
 
-const cellId = "1" as CellId;
+const cid = cellId("1");
 
 describe("traceback component", () => {
   beforeEach(() => {
@@ -25,7 +25,7 @@ describe("traceback component", () => {
   test("extracts cell-link", () => {
     const traceback = (
       <TooltipProvider>
-        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cellId} />
+        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
       </TooltipProvider>
     );
     const { unmount, getAllByRole } = render(traceback);
@@ -45,7 +45,7 @@ describe("traceback component", () => {
   test("renames File to Cell for relevant lines", () => {
     const traceback = (
       <TooltipProvider>
-        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cellId} />
+        <MarimoTracebackOutput traceback={Tracebacks.raw} cellId={cid} />
       </TooltipProvider>
     );
     const { unmount, container } = render(traceback);

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -3,8 +3,8 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import type { CellId } from "@/core/cells/ids";
 import type { WithResponse } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { CONSOLE_CLEAR_DEBOUNCE_MS, ConsoleOutput } from "../ConsoleOutput";
@@ -24,7 +24,7 @@ describe("ConsoleOutput integration", () => {
   });
 
   const defaultProps = {
-    cellId: "cell-1" as CellId,
+    cellId: cellId("cell-1"),
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,
@@ -55,7 +55,7 @@ describe("ConsoleOutput integration", () => {
 
 describe("ConsoleOutput pdb history", () => {
   const defaultProps = {
-    cellId: "cell-1" as CellId,
+    cellId: cellId("cell-1"),
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,
@@ -215,7 +215,7 @@ describe("ConsoleOutput debounced clearing", () => {
   });
 
   const defaultProps = {
-    cellId: "cell-1" as CellId,
+    cellId: cellId("cell-1"),
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,

package/src/components/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -91,7 +91,7 @@ function focusCellByName(cellName: string) {
 
       // Look for an editor to focus
       const { cellHandles } = getNotebook();
-      const cellId = cellElement.dataset.cellId as CellId | undefined;
+      const cellId = extractCellIdFromDomElement(cellElement);
 
       if (!cellId) {
         Logger.error(`Missing cellId for cell with name ${cellName}`);
@@ -111,3 +111,10 @@ function focusCellByName(cellName: string) {
     focusFirstEditor();
   }
 }
+
+function extractCellIdFromDomElement(
+  cellElement: HTMLElement,
+): CellId | undefined {
+  const cellIdStr = cellElement.dataset.cellId ?? undefined;
+  return cellIdStr as CellId | undefined;
+}

package/src/components/storage/storage-file-viewer.tsx

@@ -4,27 +4,32 @@ import { FileIcon, LoaderCircle, RefreshCwIcon } from "lucide-react";
 import type React from "react";
 import { useCallback } from "react";
 import { useLocale } from "react-aria";
+import { useAddCodeToNewCell } from "@/components/editor/cell/useAddCell";
 import { FilePreviewHeader } from "@/components/editor/file-tree/file-header";
 import { renderFileIcon } from "@/components/editor/file-tree/file-icons";
 import {
   FileContentRenderer,
   isMediaMime,
 } from "@/components/editor/file-tree/renderers";
+import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
 import { DownloadStorage } from "@/core/storage/request-registry";
-import type { StorageEntry } from "@/core/storage/types";
+import type { StorageEntry, StorageNamespace } from "@/core/storage/types";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { downloadByURL } from "@/utils/download";
 import { formatBytes } from "@/utils/formatting";
 import { Logger } from "@/utils/Logger";
 import { CopyClipboardIcon } from "../icons/copy-icon";
 import { Button } from "../ui/button";
+import { STORAGE_SNIPPETS } from "./storage-snippets";
 
 const MAX_MEDIA_PREVIEW_SIZE = 100 * 1024 * 1024; // 100 MB
 
 interface Props {
   entry: StorageEntry;
   namespace: string;
+  protocol: string;
+  backendType: StorageNamespace["backendType"];
   onBack: () => void;
 }
 
@@ -41,9 +46,12 @@ type PreviewData =
 export const StorageFileViewer: React.FC<Props> = ({
   entry,
   namespace,
+  protocol,
+  backendType,
   onBack,
 }) => {
   const { locale } = useLocale();
+  const addCodeToNewCell = useAddCodeToNewCell();
   const name = displayName(entry.path);
   const mime = entry.mimeType || "text/plain";
   const isMedia = isMediaMime(mime);
@@ -111,12 +119,38 @@ export const StorageFileViewer: React.FC<Props> = ({
     }
   }, [namespace, entry.path, name]);
 
+  const snippetActions = STORAGE_SNIPPETS.map((snippet) => {
+    const code = snippet.getCode({
+      variableName: namespace,
+      protocol,
+      entry,
+      backendType,
+    });
+    if (code === null) {
+      return null;
+    }
+    const Icon = snippet.icon;
+    return (
+      <Tooltip key={snippet.id} content={snippet.label}>
+        <Button
+          variant="text"
+          size="xs"
+          onClick={() => addCodeToNewCell(code)}
+          aria-label={snippet.label}
+        >
+          <Icon className="h-3.5 w-3.5" />
+        </Button>
+      </Tooltip>
+    );
+  });
+
   const header = (
     <FilePreviewHeader
       filename={name}
       filenameIcon={renderFileIcon(name)}
       onBack={onBack}
       onDownload={handleDownload}
+      actions={snippetActions}
     />
   );
 

package/src/components/storage/storage-inspector.tsx

@@ -50,7 +50,6 @@ import type {
   StoragePathKey,
 } from "@/core/storage/types";
 import { storagePathKey } from "@/core/storage/types";
-import type { VariableName } from "@/core/variables/types";
 import { cn } from "@/utils/cn";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
@@ -65,6 +64,8 @@ import { STORAGE_SNIPPETS } from "./storage-snippets";
 interface OpenFileInfo {
   entry: StorageEntry;
   namespace: string;
+  protocol: string;
+  backendType: StorageNamespace["backendType"];
 }
 
 // Pixels per depth level. Applied as paddingLeft on each full-width item
@@ -316,7 +317,7 @@ const StorageEntryRow: React.FC<{
           if (isDir) {
             setIsExpanded(!effectiveExpanded);
           } else {
-            onOpenFile({ entry, namespace });
+            onOpenFile({ entry, namespace, protocol, backendType });
           }
         }}
       >
@@ -362,7 +363,9 @@ const StorageEntryRow: React.FC<{
             >
               {!isDir && (
                 <DropdownMenuItem
-                  onSelect={() => onOpenFile({ entry, namespace })}
+                  onSelect={() =>
+                    onOpenFile({ entry, namespace, protocol, backendType })
+                  }
                 >
                   <ViewIcon className={MENU_ITEM_ICON_CLASS} />
                   View
@@ -474,7 +477,7 @@ const StorageNamespaceSection: React.FC<{
         <span>{namespace.displayName}</span>
         {namespace.name && (
           <span className="text-xs text-muted-foreground font-normal">
-            (<EngineVariable variableName={namespace.name as VariableName} />)
+            (<EngineVariable variableName={namespace.name} />)
           </span>
         )}
         <RefreshIconButton
@@ -586,6 +589,8 @@ export const StorageInspector: React.FC = () => {
         <StorageFileViewer
           entry={openFile.entry}
           namespace={openFile.namespace}
+          protocol={openFile.protocol}
+          backendType={openFile.backendType}
           onBack={() => setOpenFile(null)}
         />
       )}

package/src/components/storage/storage-snippets.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { LucideIcon } from "lucide-react";
-import { BookOpenIcon, LinkIcon } from "lucide-react";
+import { BookPlusIcon, FileSymlink } from "lucide-react";
 import type { StorageEntry, StorageNamespace } from "@/core/storage/types";
 
 type BackendType = StorageNamespace["backendType"];
@@ -31,7 +31,7 @@ export const STORAGE_SNIPPETS: StorageSnippet[] = [
   {
     id: "read-file",
     label: "Insert read snippet",
-    icon: BookOpenIcon,
+    icon: BookPlusIcon,
     getCode: (ctx) => {
       if (ctx.entry.kind === "directory") {
         return null;
@@ -46,7 +46,7 @@ export const STORAGE_SNIPPETS: StorageSnippet[] = [
   {
     id: "download-file",
     label: "Insert download snippet",
-    icon: LinkIcon,
+    icon: FileSymlink,
     getCode: (ctx) => {
       if (ctx.entry.kind === "directory") {
         return null;

package/src/components/tracing/tracing.tsx

@@ -243,7 +243,9 @@ const TraceBlockBody: React.FC<{
         signalName: VEGA_HOVER_SIGNAL,
         handler: (_name: string, value: unknown) => {
           const signalValue = value as VegaHoverCellSignal;
-          const hoveredCell = signalValue.cell?.[0] as CellId | undefined;
+          const hoveredCell = (signalValue.cell?.[0] ?? undefined) as
+            | CellId
+            | undefined;
           setHoveredCellId(hoveredCell ?? null);
         },
       },