@marimo-team/islands 0.18.2 → 0.18.4

package/dist/{types-Dunk85GC.js → types-DclGb0Yh.js}

@@ -15,7 +15,7 @@ import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { t as require_react_dom } from "./react-dom-BZdwbVNI.js";
 import { m as useEvent_default } from "./useTheme-ByTGDerd.js";
 import { t as toString_default } from "./toString-DBXBHXIe.js";
-import { r as debounce_default, t as Constants } from "./constants-DWBOe162.js";
+import { i as debounce_default, n as Constants } from "./constants-D_G8vnDk.js";
 import { t as memoizeLastValue } from "./once-DjP4Kbhy.js";
 var ChevronRight = createLucideIcon("chevron-right", [["path", {
   d: "m9 18 6-6-6-6",

package/dist/{vega-component-kU4hFYYJ.js → vega-component-BFcH2SqR.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-BSzAiXXz.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CNX0xYDF.js";
 import "./Combination-DnWHe36P.js";
-import { C as CircleQuestionMark, h as asRemoteURL, i as Alert, n as useDeepCompareMemoize, o as AlertTitle, s as isValid, t as arrow } from "./formats-7RSCCoSI.js";
+import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as useDeepCompareMemoize, o as isValid, r as Alert, t as arrow } from "./formats-Bi_tbdwB.js";
 import "./clsx-D2KVTYnW.js";
 import { l as Events } from "./button-XnD6ylpt.js";
 import { o as Objects, s as Logger } from "./hotkeys-CwkyZ6ZF.js";
@@ -18,7 +18,7 @@ import "./_baseUniq-CPOFUArp.js";
 import "./_baseIsEqual-CwglS7T6.js";
 import "./merge-DPdZQMPt.js";
 import "./now-BA1FgVte.js";
-import { r as debounce_default } from "./constants-DWBOe162.js";
+import { i as debounce_default } from "./constants-D_G8vnDk.js";
 import { a as tooltipHandler, n as vegaLoadData } from "./loader-ZngagiXO.js";
 import { t as uniq_default } from "./uniq-CCIhWjDg.js";
 import "./zod-Bvx56F8M.js";
@@ -509,8 +509,8 @@ async function resolveVegaSpecData(e) {
     } catch {
       return e2;
     }
-    let O = await vegaLoadData(E2.href, e2.data.format);
-    return w[E2.pathname] = O, {
+    let D = await vegaLoadData(E2.href, e2.data.format);
+    return w[E2.pathname] = D, {
       ...e2,
       data: { name: E2.pathname }
     };
@@ -540,17 +540,17 @@ var VegaComponent = (e) => {
     spec: P,
     embedOptions: A
   }), w[5] = D, w[6] = A, w[7] = O, w[8] = P, w[9] = E, w[10] = T, w[11] = I) : I = w[11], I;
-}, LoadedVegaComponent = ({ value: e, setValue: w, chartSelection: T, fieldSelection: D, spec: M, embedOptions: N }) => {
+}, LoadedVegaComponent = ({ value: e, setValue: w, chartSelection: T, fieldSelection: O, spec: A, embedOptions: N }) => {
   let { theme: L } = useTheme(), R = (0, import_react.useRef)(null), z = (0, import_react.useRef)(void 0), [B, V] = (0, import_react.useState)(), H = (0, import_react.useMemo)(() => N && "actions" in N ? N.actions : {
     source: false,
     compiled: false
-  }, [N]), U = useDeepCompareMemoize(M), W = (0, import_react.useMemo)(() => makeSelectable(fixRelativeUrl(U), {
+  }, [N]), U = useDeepCompareMemoize(A), W = (0, import_react.useMemo)(() => makeSelectable(fixRelativeUrl(U), {
     chartSelection: T,
-    fieldSelection: D
+    fieldSelection: O
   }), [
     U,
     T,
-    D
+    O
   ]), G = (0, import_react.useMemo)(() => getSelectionParamNames(W), [W]), K = useEvent_default((T2) => {
     w({
       ...e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/app-config/user-config-form.tsx

@@ -41,6 +41,7 @@ import {
 } from "@/core/config/config-schema";
 import { getAppWidths } from "@/core/config/widths";
 import { marimoVersionAtom } from "@/core/meta/state";
+import { viewStateAtom } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";
 import { isWasm } from "@/core/wasm/utils";
 import { useDebouncedCallback } from "@/hooks/useDebounce";
@@ -119,7 +120,19 @@ export const UserConfigForm: React.FC = () => {
   const [activeCategory, setActiveCategory] = useAtom(
     activeUserConfigCategoryAtom,
   );
-  const capabilities = useAtomValue(capabilitiesAtom);
+
+  let capabilities = useAtomValue(capabilitiesAtom);
+  const isHome = useAtomValue(viewStateAtom).mode === "home";
+  // The home page does not fetch kernel capabilities, so we just turn them all on
+  if (isHome) {
+    capabilities = {
+      terminal: true,
+      pylsp: true,
+      ty: true,
+      basedpyright: true,
+    };
+  }
+
   const marimoVersion = useAtomValue(marimoVersionAtom);
   const { locale } = useLocale();
   const { saveUserConfig } = useRequestClient();

package/src/components/data-table/context-menu.tsx

@@ -95,11 +95,11 @@ export const CellContextMenu = <TData,>({
   const column = cell.column;
   const canFilter = column.getCanFilter() && column.columnDef.meta?.filterType;
 
-  const handleFilterCell = () => {
+  const handleFilterCell = (operator: "in" | "not_in") => {
     column.setFilterValue(
       Filter.select({
         options: [cell.getValue()],
-        operator: "in",
+        operator,
       }),
     );
   };
@@ -119,10 +119,14 @@ export const CellContextMenu = <TData,>({
       {canFilter && (
         <>
           <ContextMenuSeparator />
-          <ContextMenuItem onClick={handleFilterCell}>
+          <ContextMenuItem onClick={() => handleFilterCell("in")}>
             <FilterIcon className="mo-dropdown-icon h-3 w-3" />
             Filter by this value
           </ContextMenuItem>
+          <ContextMenuItem onClick={() => handleFilterCell("not_in")}>
+            <FilterIcon className="mo-dropdown-icon h-3 w-3" />
+            Remove rows with this value
+          </ContextMenuItem>
         </>
       )}
     </ContextMenuContent>

package/src/components/data-table/filter-pills.tsx

@@ -96,7 +96,8 @@ function formatValue(value: ColumnFilterValue, timeFormatter: DateFormatter) {
     const stringifiedOptions = value.options.map((o) =>
       stringifyUnknownValue({ value: o }),
     );
-    return `is in [${stringifiedOptions.join(", ")}]`;
+    const operator = value.operator === "in" ? "is in" : "not in";
+    return `${operator} [${stringifiedOptions.join(", ")}]`;
   }
   if (value.type === "text") {
     return `contains "${value.text}"`;

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

@@ -7,6 +7,7 @@ import type { ConditionType } from "@/plugins/impl/data-frames/schema";
 import type { ColumnId } from "@/plugins/impl/data-frames/types";
 import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
 import { assertNever } from "@/utils/assertNever";
+import { Logger } from "@/utils/Logger";
 
 declare module "@tanstack/react-table" {
   //allows us to define custom properties for our columns
@@ -192,12 +193,20 @@ export function filterToFilterCondition(
       }
 
       return [];
-    case "select":
+    case "select": {
+      let operator = filter.operator;
+      if (filter.operator !== "in" && filter.operator !== "not_in") {
+        Logger.warn("Invalid operator for select filter", {
+          operator: filter.operator,
+        });
+        operator = "in"; // default to in operator
+      }
       return {
         column_id: columnId,
-        operator: "in",
+        operator,
         value: filter.options,
       };
+    }
 
     default:
       assertNever(filter);

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

@@ -46,7 +46,7 @@ export const CreateCellButton = ({
       <div>{baseTooltipContent}</div>
       <div className="text-xs text-muted-foreground font-medium pt-1 -mt-2 border-t border-border">
         {<MinimalHotkeys shortcut={shortcut} className="inline" />}{" "}
-        <span>to auto insert a cell</span>
+        <span>for other cell types</span>
       </div>
     </div>
   );
@@ -81,7 +81,9 @@ export const CreateCellButton = ({
   };
 
   const handleButtonClick = (e: React.MouseEvent) => {
-    if (oneClickShortcut === "shift" ? e.shiftKey : e.metaKey || e.ctrlKey) {
+    const hasModifier =
+      oneClickShortcut === "shift" ? e.shiftKey : e.metaKey || e.ctrlKey;
+    if (!hasModifier) {
       e.preventDefault();
       e.stopPropagation();
       addPythonCell();
@@ -123,7 +125,7 @@ export const CreateCellButton = ({
         >
           <Tooltip content={finalTooltipContent}>
             <PlusIcon
-              strokeWidth={4}
+              strokeWidth={3}
               size={14}
               className="opacity-60 hover:opacity-90"
             />

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

@@ -44,9 +44,9 @@ export const CollapseToggle: React.FC<Props> = (props) => {
 
 const Arrow = ({ isCollapsed }: { isCollapsed: boolean }) => {
   return isCollapsed ? (
-    <ChevronRightIcon className="w-5 h-5 shrink-0" />
+    <ChevronRightIcon className="w-5 h-5 shrink-0 opacity-60" strokeWidth={2} />
   ) : (
-    <ChevronDownIcon className="w-5 h-5 shrink-0" />
+    <ChevronDownIcon className="w-5 h-5 shrink-0 opacity-60" strokeWidth={2} />
   );
 };
 

package/src/components/editor/chrome/components/contribute-snippet-button.tsx

@@ -1,8 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import { EditorView } from "@codemirror/view";
 import { Slot } from "@radix-ui/react-slot";
-import React, { type PropsWithChildren, useState } from "react";
+import React, { type PropsWithChildren } from "react";
 import { useImperativeModal } from "@/components/modal/ImperativeModal";
 import { Button } from "@/components/ui/button";
 import {
@@ -12,12 +11,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { toast } from "@/components/ui/use-toast";
 import { Constants } from "@/core/constants";
-import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
-import { useTheme } from "@/theme/useTheme";
 
 export const ContributeSnippetButton: React.FC<PropsWithChildren> = ({
   children,
@@ -33,106 +27,31 @@ export const ContributeSnippetButton: React.FC<PropsWithChildren> = ({
   );
 };
 
-const extensions = [EditorView.lineWrapping];
-
 const ContributeSnippetModal: React.FC<{
   onClose: () => void;
 }> = ({ onClose }) => {
-  const [code, setCode] = useState("");
-  const { theme } = useTheme();
-
   return (
-    <DialogContent className="w-fit">
-      <form
-        onSubmit={async (e) => {
-          e.preventDefault();
-
-          const formData = new FormData(e.target as HTMLFormElement);
-          const title = formData.get("title");
-          const description = formData.get("description");
-          const code = formData.get("code");
-
-          // Fire-and-forget we don't care about the response
-          void fetch("https://marimo.io/api/suggest-snippet", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              title,
-              description,
-              code,
-            }),
-          });
-          onClose();
-          toast({
-            title: "Snippet Submitted",
-            description:
-              "Thank you for contributing! We will review your snippet shortly.",
-          });
-        }}
-      >
-        <DialogHeader>
-          <DialogTitle>Contribute a Snippet</DialogTitle>
-          <DialogDescription>
-            Have a useful snippet you want to share with the community? Submit
-            it here or make a pull request{" "}
-            <a
-              href={Constants.githubPage}
-              target="_blank"
-              className="underline"
-            >
-              on GitHub
-            </a>
-            .
-          </DialogDescription>
-        </DialogHeader>
-        <div className="flex flex-col gap-6 py-4">
-          <Input
-            id="title"
-            name="title"
-            autoFocus={true}
-            placeholder="Title"
-            required={true}
-            autoComplete="off"
-          />
-          <Textarea
-            id="description"
-            name="description"
-            autoFocus={true}
-            placeholder="Description"
-            rows={5}
-            required={true}
-            autoComplete="off"
-          />
-          <input type="hidden" name="code" value={code} />
-          <LazyAnyLanguageCodeMirror
-            theme={theme === "dark" ? "dark" : "light"}
-            language="python"
-            className="cm border rounded overflow-hidden"
-            extensions={extensions}
-            value={code}
-            onChange={setCode}
-          />
-        </div>
-        <DialogFooter>
-          <Button
-            data-testid="snippet-cancel-button"
-            variant="secondary"
-            onClick={onClose}
-          >
-            Cancel
-          </Button>
-          <Button
-            data-testid="snippet-send-button"
-            aria-label="Save"
-            variant="default"
-            type="submit"
-          >
-            Send
-          </Button>
-        </DialogFooter>
-      </form>
+    <DialogContent className="max-w-md">
+      <DialogHeader>
+        <DialogTitle>Contribute a Snippet</DialogTitle>
+        <DialogDescription>
+          Have a useful snippet you want to share with the community? Make a
+          pull request{" "}
+          <a href={Constants.githubPage} target="_blank" className="underline">
+            on GitHub
+          </a>
+          .
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <Button
+          data-testid="snippet-close-button"
+          variant="default"
+          onClick={onClose}
+        >
+          Close
+        </Button>
+      </DialogFooter>
     </DialogContent>
   );
 };

package/src/components/editor/controls/duplicate-shortcut-banner.tsx

@@ -0,0 +1,50 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { AlertTriangleIcon } from "lucide-react";
+import { KeyboardHotkeys } from "@/components/shortcuts/renderShortcut";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import type { DuplicateGroup } from "@/hooks/useDuplicateShortcuts";
+
+interface DuplicateShortcutBannerProps {
+  duplicates: DuplicateGroup[];
+}
+
+/**
+ * Banner component that warns about duplicate keyboard shortcuts.
+ * Displays a warning when multiple actions share the same key binding.
+ */
+export const DuplicateShortcutBanner: React.FC<
+  DuplicateShortcutBannerProps
+> = ({ duplicates }) => {
+  // Don't render if no duplicates
+  if (duplicates.length === 0) {
+    return null;
+  }
+
+  return (
+    <Alert variant="warning" className="mb-4">
+      <AlertTriangleIcon className="h-4 w-4" />
+      <AlertTitle>Duplicate shortcuts</AlertTitle>
+      <AlertDescription>
+        <p className="mb-2">
+          Multiple actions are assigned to the same keyboard shortcut:
+        </p>
+        <ul className="space-y-2">
+          {duplicates.map(({ key, actions }) => (
+            <li key={key} className="text-xs">
+              <div className="flex items-center gap-2 mb-1">
+                <KeyboardHotkeys shortcut={key} />
+                <span className="font-semibold">is used by:</span>
+              </div>
+              <ul className="ml-6 list-disc">
+                {actions.map(({ action, name }) => (
+                  <li key={action}>{name}</li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      </AlertDescription>
+    </Alert>
+  );
+};

package/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { atom, useAtom, useAtomValue } from "jotai";
-import { EditIcon, XIcon } from "lucide-react";
+import { AlertTriangleIcon, EditIcon, XIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -15,6 +15,7 @@ import {
 } from "@/core/hotkeys/hotkeys";
 import { isPlatformMac } from "@/core/hotkeys/shortcuts";
 import { useRequestClient } from "@/core/network/requests";
+import { useDuplicateShortcuts } from "../../../hooks/useDuplicateShortcuts";
 import { useHotkey } from "../../../hooks/useHotkey";
 import { KeyboardHotkeys } from "../../shortcuts/renderShortcut";
 import {
@@ -25,6 +26,7 @@ import {
   DialogPortal,
   DialogTitle,
 } from "../../ui/dialog";
+import { DuplicateShortcutBanner } from "./duplicate-shortcut-banner";
 
 export const keyboardShortcutsAtom = atom(false);
 
@@ -37,6 +39,10 @@ export const KeyboardShortcuts: React.FC = () => {
   const [config, setConfig] = useResolvedMarimoConfig();
   const hotkeys = useAtomValue(hotkeysAtom);
   const { saveUserConfig } = useRequestClient();
+  const { duplicates, hasDuplicate, getDuplicatesFor } = useDuplicateShortcuts(
+    hotkeys,
+    "Markdown",
+  );
 
   useHotkey("global.showHelp", () => setIsOpen((v) => !v));
 
@@ -214,6 +220,9 @@ export const KeyboardShortcuts: React.FC = () => {
       );
     }
 
+    const isDuplicate = hasDuplicate(action);
+    const duplicateActions = isDuplicate ? getDuplicatesFor(action) : [];
+
     return (
       <div
         key={action}
@@ -231,7 +240,20 @@ export const KeyboardShortcuts: React.FC = () => {
           <div className="w-3 h-3" />
         )}
         <KeyboardHotkeys className="justify-end" shortcut={hotkey.key} />
-        <span>{hotkey.name.toLowerCase()}</span>
+        <div className="flex items-center gap-1">
+          <span>{hotkey.name.toLowerCase()}</span>
+          {isDuplicate && (
+            <div className="group relative inline-flex">
+              <AlertTriangleIcon className="w-3 h-3 text-(--yellow-11)" />
+              <div className="invisible group-hover:visible absolute left-0 top-5 z-10 w-max max-w-xs rounded-md bg-(--yellow-2) border border-(--yellow-7) p-2 text-xs text-(--yellow-11) shadow-md">
+                Also used by:{" "}
+                {duplicateActions
+                  .map((a) => hotkeys.getHotkey(a).name.toLowerCase())
+                  .join(", ")}
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     );
   };
@@ -279,6 +301,7 @@ export const KeyboardShortcuts: React.FC = () => {
           <DialogHeader>
             <DialogTitle>Shortcuts</DialogTitle>
           </DialogHeader>
+          <DuplicateShortcutBanner duplicates={duplicates} />
           <div className="flex flex-row gap-3">
             <div className="w-1/2">
               {renderGroup("Editing")}

package/src/components/editor/notebook-banner.tsx

@@ -26,7 +26,7 @@ export const NotebookBanner: React.FC<Props> = ({ width }) => {
     <div
       className={cn(
         "flex flex-col gap-4 mb-5 print:hidden",
-        width === "columns" && "sticky left-12 w-full max-w-[80vw]",
+        width === "columns" && "w-full max-w-[80vw]",
       )}
     >
       {banners.map((banner) => (

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

@@ -29,6 +29,7 @@ import { outputIsLoading, outputIsStale } from "@/core/cells/cell";
 import { isOutputEmpty } from "@/core/cells/outputs";
 import { autocompletionKeymap } from "@/core/codemirror/cm";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
+import { CSSClasses } from "@/core/constants";
 import { canCollapseOutline } from "@/core/dom/outline";
 import { isErrorMime } from "@/core/mime";
 import type { AppMode } from "@/core/mode";
@@ -349,7 +350,7 @@ const ReadonlyCellComponent = forwardRef(
         <OutputArea
           allowExpand={false}
           forceExpand={true}
-          className="output-area"
+          className={CSSClasses.outputArea}
           cellId={cellId}
           output={cellRuntime.output}
           stale={outputIsStale(cellRuntime, cellData.edited)}
@@ -508,7 +509,7 @@ const EditableCellComponent = ({
         allowExpand={true}
         // Force expand when markdown is hidden
         forceExpand={isMarkdownCodeHidden}
-        className="output-area"
+        className={CSSClasses.outputArea}
         cellId={cellId}
         output={cellRuntime.output}
         stale={isStaleCell}
@@ -1168,7 +1169,7 @@ const SetupCellComponent = ({
             <OutputArea
               allowExpand={true}
               forceExpand={true}
-              className="output-area"
+              className={CSSClasses.outputArea}
               cellId={cellId}
               output={cellRuntime.output}
               stale={false}

package/src/components/editor/output/__tests__/ansi-reduce.test.ts

@@ -534,13 +534,13 @@ describe("AnsiReducer streaming with append()", () => {
 describe("AnsiReducer color preservation", () => {
   const CASES = [
     // SGR sequences
-    "\u001b[34mBlue text\u001b[m normal text\u001b[31mRed text\u001b[0m",
+    "\u001B[34mBlue text\u001B[m normal text\u001B[31mRed text\u001B[0m",
     // Complex SGR with parameters
-    "\u001b[1;31mBold Red\u001b[0m \u001b[48;5;240mGray bg\u001b[0m",
+    "\u001B[1;31mBold Red\u001B[0m \u001B[48;5;240mGray bg\u001B[0m",
     // Character set selection
-    "Text\u001b(BMore\u001b(0Graphics\u001b(B",
+    "Text\u001B(BMore\u001B(0Graphics\u001B(B",
     // Complex case
-    "\u001b[34m[D 251201 15:32:24 cell_runner:695]\u001b(B\u001b[m Running post_execution hooks in context\n\u001b[34m[D 251201 15:32:24 hooks_post_execution:65]\u001b(B\u001b[m Acquiring graph lock to update cell import workspace\n\u001b[34m[D 251201 15:32:24 hooks_post_execution:67]\u001b(B\u001b[m Acquired graph lock to update import workspace.\n",
+    "\u001B[34m[D 251201 15:32:24 cell_runner:695]\u001B(B\u001B[m Running post_execution hooks in context\n\u001B[34m[D 251201 15:32:24 hooks_post_execution:65]\u001B(B\u001B[m Acquiring graph lock to update cell import workspace\n\u001B[34m[D 251201 15:32:24 hooks_post_execution:67]\u001B(B\u001B[m Acquired graph lock to update import workspace.\n",
   ];
 
   test.each(CASES)("preserves ANSI color codes", (input) => {
@@ -554,12 +554,12 @@ describe("AnsiReducer color preservation", () => {
     // Test that color codes work alongside cursor movements
     // Note: when cursor moves up, lines below are discarded (tqdm behavior)
     const result = reducer.reduce(
-      "Line1\n\u001b[31mRed\u001b[0m\u001b[1A\u001b[32mGreen\u001b[0m",
+      "Line1\n\u001B[31mRed\u001B[0m\u001B[1A\u001B[32mGreen\u001B[0m",
     );
     // After moving up from row 1 to row 0, row 1 is discarded
     // Green is written at the end of row 0
     expect(result).toMatchInlineSnapshot(
-      `"Line1       \u001b[32mGreen\u001b[0m"`,
+      `"Line1       \u001B[32mGreen\u001B[0m"`,
     );
   });
 });

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

@@ -29,7 +29,7 @@ import { isOutputEmpty } from "@/core/cells/outputs";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { useResolvedMarimoConfig } from "@/core/config/config";
-import { KnownQueryParams } from "@/core/constants";
+import { CSSClasses, KnownQueryParams } from "@/core/constants";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { isErrorMime } from "@/core/mime";
@@ -339,7 +339,7 @@ const VerticalCell = memo(
         <OutputArea
           allowExpand={true}
           output={output}
-          className="output-area"
+          className={CSSClasses.outputArea}
           cellId={cellId}
           stale={outputStale}
           loading={loading}
@@ -394,7 +394,7 @@ const VerticalCell = memo(
         <OutputArea
           allowExpand={mode === "edit"}
           output={output}
-          className="output-area"
+          className={CSSClasses.outputArea}
           cellId={cellId}
           stale={outputStale}
           loading={loading}

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

@@ -169,6 +169,12 @@ const WorkspaceNotebooks: React.FC = () => {
   return (
     <WorkspaceRootContext value={workspace.root}>
       <div className="flex flex-col gap-2">
+        {workspace.hasMore && (
+          <Banner kind="warn" className="rounded p-4">
+            Showing first {workspace.fileCount} files. Your workspace has more
+            files.
+          </Banner>
+        )}
         <Header
           Icon={BookTextIcon}
           control={

package/src/components/scratchpad/scratchpad.tsx

@@ -17,6 +17,7 @@ import { HTMLCellId, SCRATCH_CELL_ID } from "@/core/cells/ids";
 import { DEFAULT_CELL_NAME } from "@/core/cells/names";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import { useResolvedMarimoConfig } from "@/core/config/config";
+import { CSSClasses } from "@/core/constants";
 import { useRequestClient } from "@/core/network/requests";
 import type { CellConfig } from "@/core/network/types";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
@@ -149,7 +150,7 @@ export const ScratchPad: React.FC = () => {
           <OutputArea
             allowExpand={false}
             output={output}
-            className="output-area"
+            className={CSSClasses.outputArea}
             cellId={cellId}
             stale={false}
             loading={false}

package/src/core/constants.ts

@@ -50,3 +50,13 @@ export const KnownQueryParams = {
    */
   showChrome: "show-chrome",
 };
+
+/**
+ * CSS class names used throughout the application
+ */
+export const CSSClasses = {
+  /**
+   * Class name for cell output areas
+   */
+  outputArea: "output-area",
+};