improvment: expose auto output flag (#5652)

## 📝 Summary

Followup to #5647 

<img width="614" height="166" alt="image"
src="https://github.com/user-attachments/assets/ff053c5b-b70f-4f9f-ba46-a683977d301a"
/>


Adds options for auto download to UI

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: dmadisetti

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

@@ -44,6 +44,7 @@ import { saveUserConfig } from "@/core/network/requests";
 import { isWasm } from "@/core/wasm/utils";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import { THEMES } from "@/theme/useTheme";
+import { arrayToggle } from "@/utils/arrays";
 import { cn } from "@/utils/cn";
 import { keyboardShortcutsAtom } from "../editor/controls/keyboard-shortcuts";
 import { Badge } from "../ui/badge";
@@ -975,6 +976,66 @@ export const UserConfigForm: React.FC = () => {
                 </div>
               )}
             />
+            <FormField
+              control={form.control}
+              name="runtime.default_auto_download"
+              render={({ field }) => (
+                <div className="flex flex-col gap-y-1">
+                  <FormItem className={formItemClasses}>
+                    <FormLabel>Auto output formats</FormLabel>
+                    <FormControl>
+                      <div className="flex gap-4">
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="html-checkbox"
+                            checked={
+                              Array.isArray(field.value) &&
+                              field.value.includes("html")
+                            }
+                            onCheckedChange={() => {
+                              const currentValue = Array.isArray(field.value)
+                                ? field.value
+                                : [];
+                              field.onChange(arrayToggle(currentValue, "html"));
+                            }}
+                          />
+                          <FormLabel htmlFor="html-checkbox">HTML</FormLabel>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            id="ipynb-checkbox"
+                            checked={
+                              Array.isArray(field.value) &&
+                              field.value.includes("ipynb")
+                            }
+                            onCheckedChange={() => {
+                              const currentValue = Array.isArray(field.value)
+                                ? field.value
+                                : [];
+                              field.onChange(
+                                arrayToggle(currentValue, "ipynb"),
+                              );
+                            }}
+                          />
+                          <FormLabel htmlFor="ipynb-checkbox">IPYNB</FormLabel>
+                        </div>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                    <IsOverridden
+                      userConfig={config}
+                      name="runtime.default_auto_download"
+                    />
+                  </FormItem>
+                  <FormDescription>
+                    When enabled, marimo will periodically save notebooks in
+                    your selected formats (HTML, IPYNB) to a folder named{" "}
+                    <Kbd className="inline">__marimo__</Kbd> next to your
+                    notebook file.
+                  </FormDescription>
+                </div>
+              )}
+            />
             <FormField
               control={form.control}
               name="runtime.auto_instantiate"

frontend/src/core/config/__tests__/config-schema.test.ts

@@ -75,6 +75,7 @@ test("default UserConfig - empty", () => {
       "runtime": {
         "auto_instantiate": true,
         "auto_reload": "off",
+        "default_auto_download": [],
         "default_sql_output": "auto",
         "on_cell_change": "autorun",
         "watcher_on_save": "lazy",
@@ -133,6 +134,7 @@ test("default UserConfig - one level", () => {
       "runtime": {
         "auto_instantiate": true,
         "auto_reload": "off",
+        "default_auto_download": [],
         "default_sql_output": "auto",
         "on_cell_change": "autorun",
         "watcher_on_save": "lazy",

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

@@ -37,6 +37,11 @@ const VALID_SQL_OUTPUT_FORMATS = [
 ] as const;
 export type SqlOutputType = (typeof VALID_SQL_OUTPUT_FORMATS)[number];
 
+/**
+ * Export types for auto download
+ */
+const AUTO_DOWNLOAD_FORMATS = ["html", "markdown", "ipynb"] as const;
+
 export const UserConfigSchema = z
   .object({
     completion: z
@@ -92,6 +97,9 @@ export const UserConfigSchema = z
         auto_reload: z.enum(["off", "lazy", "autorun"]).default("off"),
         watcher_on_save: z.enum(["lazy", "autorun"]).default("lazy"),
         default_sql_output: z.enum(VALID_SQL_OUTPUT_FORMATS).default("auto"),
+        default_auto_download: z
+          .array(z.enum(AUTO_DOWNLOAD_FORMATS))
+          .default([]),
       })
       .passthrough()
       .default({}),
@@ -214,7 +222,7 @@ export const AppConfigSchema = z
     app_title: AppTitleSchema.nullish(),
     css_file: z.string().nullish(),
     html_head_file: z.string().nullish(),
-    auto_download: z.array(z.enum(["html", "markdown", "ipynb"])).default([]),
+    auto_download: z.array(z.enum(AUTO_DOWNLOAD_FORMATS)).default([]),
     sql_output: SqlOutputSchema,
   })
   .default({ width: "medium", auto_download: [] });