diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx
index a5cbff3398..9ce5016616 100644
--- a/frontend/app/tab/tabbar.tsx
+++ b/frontend/app/tab/tabbar.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Tooltip } from "@/app/element/tooltip";
-import { modalsModel } from "@/app/store/modalmodel";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
 import { useWaveEnv } from "@/app/waveenv/waveenv";
 import { WorkspaceLayoutModel } from "@/app/workspace/workspace-layout-model";
@@ -71,68 +70,6 @@ const WaveAIButton = memo(({ divRef }: { divRef?: React.RefObject<HTMLDivElement
 });
 WaveAIButton.displayName = "WaveAIButton";
 
-const ConfigErrorMessage = () => {
-    const env = useWaveEnv<TabBarEnv>();
-    const fullConfig = useAtomValue(env.atoms.fullConfigAtom);
-
-    if (fullConfig?.configerrors == null || fullConfig?.configerrors.length == 0) {
-        return (
-            <div className="max-w-[500px] p-5">
-                <h3 className="font-bold text-base mb-2.5">Configuration Clean</h3>
-                <p>There are no longer any errors detected in your config.</p>
-            </div>
-        );
-    }
-    if (fullConfig?.configerrors.length == 1) {
-        const singleError = fullConfig.configerrors[0];
-        return (
-            <div className="max-w-[500px] p-5">
-                <h3 className="font-bold text-base mb-2.5">Configuration Error</h3>
-                <div>
-                    {singleError.file}: {singleError.err}
-                </div>
-            </div>
-        );
-    }
-    return (
-        <div className="max-w-[500px] p-5">
-            <h3 className="font-bold text-base mb-2.5">Configuration Error</h3>
-            <ul>
-                {fullConfig.configerrors.map((error, index) => (
-                    <li key={index}>
-                        {error.file}: {error.err}
-                    </li>
-                ))}
-            </ul>
-        </div>
-    );
-};
-
-const ConfigErrorIcon = () => {
-    const env = useWaveEnv<TabBarEnv>();
-    const hasConfigErrors = useAtomValue(env.atoms.hasConfigErrors);
-
-    const handleClick = useCallback(() => {
-        modalsModel.pushModal("MessageModal", { children: <ConfigErrorMessage /> });
-    }, []);
-
-    if (!hasConfigErrors) {
-        return null;
-    }
-    return (
-        <Tooltip
-            content="Configuration Error"
-            placement="bottom"
-            hideOnClick
-            divClassName="flex h-[22px] px-2 mb-1 items-center rounded-md box-border cursor-pointer hover:bg-hoverbg transition-colors text-[12px] text-error"
-            divStyle={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
-            divOnClick={handleClick}
-        >
-            <i className="fa fa-solid fa-triangle-exclamation" />
-        </Tooltip>
-    );
-};
-
 function strArrayIsEqual(a: string[], b: string[]) {
     // null check
     if (a == null && b == null) {
@@ -192,7 +129,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     const confirmClose = useAtomValue(env.getSettingsKeyAtom("tab:confirmclose")) ?? false;
     const hideAiButton = useAtomValue(env.getSettingsKeyAtom("app:hideaibutton"));
     const appUpdateStatus = useAtomValue(env.atoms.updaterStatusAtom);
-    const hasConfigErrors = useAtomValue(env.atoms.hasConfigErrors);
 
     let prevDelta: number;
     let prevDragDirection: string;
@@ -330,7 +266,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         };
     }, [handleResizeTabs]);
 
-    // update layout on changed tabIds, tabsLoaded, newTabId, hideAiButton, appUpdateStatus, hasConfigErrors, or zoomFactor
+    // update layout on changed tabIds, tabsLoaded, newTabId, hideAiButton, appUpdateStatus, or zoomFactor
     useEffect(() => {
         // Check if all tabs are loaded
         const allLoaded = tabIds.length > 0 && tabIds.every((id) => tabsLoaded[id]);
@@ -348,7 +284,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
         saveTabsPosition,
         hideAiButton,
         appUpdateStatus,
-        hasConfigErrors,
         zoomFactor,
         showMenuBar,
     ]);
@@ -715,7 +650,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
             <div className="flex-1" />
             <div ref={rightContainerRef} className="flex flex-row gap-1 items-end">
                 <UpdateStatusBanner />
-                <ConfigErrorIcon />
                 <div
                     className="h-full shrink-0 z-window-drag"
                     style={{ width: windowDragRightWidth, WebkitAppRegion: "drag" } as any}
@@ -725,4 +659,4 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
     );
 });
 
-export { ConfigErrorIcon, ConfigErrorMessage, TabBar, WaveAIButton };
+export { TabBar, WaveAIButton };
diff --git a/frontend/app/view/waveconfig/waveconfig-model.ts b/frontend/app/view/waveconfig/waveconfig-model.ts
index f41a39eccd..94cd114440 100644
--- a/frontend/app/view/waveconfig/waveconfig-model.ts
+++ b/frontend/app/view/waveconfig/waveconfig-model.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { BlockNodeModel } from "@/app/block/blocktypes";
-import { getApi, getBlockMetaKeyAtom, WOS } from "@/app/store/global";
+import { atoms, getApi, getBlockMetaKeyAtom, WOS } from "@/app/store/global";
 import { globalStore } from "@/app/store/jotaiStore";
 import type { TabModel } from "@/app/store/tab-model";
 import { RpcApi } from "@/app/store/wshclientapi";
@@ -11,7 +11,7 @@ import { SecretsContent } from "@/app/view/waveconfig/secretscontent";
 import { WaveConfigView } from "@/app/view/waveconfig/waveconfig";
 import { isWindows } from "@/util/platformutil";
 import { base64ToString, stringToBase64 } from "@/util/util";
-import { atom, type PrimitiveAtom } from "jotai";
+import { atom, type Atom, type PrimitiveAtom } from "jotai";
 import type * as MonacoTypes from "monaco-editor";
 import * as React from "react";
 
@@ -156,6 +156,7 @@ export class WaveConfigViewModel implements ViewModel {
     isMenuOpenAtom: PrimitiveAtom<boolean>;
     presetsJsonExistsAtom: PrimitiveAtom<boolean>;
     activeTabAtom: PrimitiveAtom<"visual" | "json">;
+    configErrorFilesAtom: Atom<Set<string>>;
     configDir: string;
     saveShortcut: string;
     editorRef: React.RefObject<MonacoTypes.editor.IStandaloneCodeEditor>;
@@ -189,6 +190,14 @@ export class WaveConfigViewModel implements ViewModel {
         this.isMenuOpenAtom = atom(false);
         this.presetsJsonExistsAtom = atom(false);
         this.activeTabAtom = atom<"visual" | "json">("visual");
+        this.configErrorFilesAtom = atom((get) => {
+            const fullConfig = get(atoms.fullConfigAtom);
+            const errorSet = new Set<string>();
+            for (const cerr of fullConfig?.configerrors ?? []) {
+                errorSet.add(cerr.file);
+            }
+            return errorSet;
+        });
         this.editorRef = React.createRef();
 
         this.secretNamesAtom = atom<string[]>([]);
diff --git a/frontend/app/view/waveconfig/waveconfig.tsx b/frontend/app/view/waveconfig/waveconfig.tsx
index 4e515466f4..00747ff3c1 100644
--- a/frontend/app/view/waveconfig/waveconfig.tsx
+++ b/frontend/app/view/waveconfig/waveconfig.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Tooltip } from "@/app/element/tooltip";
+import { atoms } from "@/app/store/global";
 import { globalStore } from "@/app/store/jotaiStore";
 import { tryReinjectKey } from "@/app/store/keymodel";
 import { CodeEditor } from "@/app/view/codeeditor/codeeditor";
@@ -21,6 +22,7 @@ const ConfigSidebar = memo(({ model }: ConfigSidebarProps) => {
     const [isMenuOpen, setIsMenuOpen] = useAtom(model.isMenuOpenAtom);
     const configFiles = model.getConfigFiles();
     const deprecatedConfigFiles = model.getDeprecatedConfigFiles();
+    const configErrorFiles = useAtomValue(model.configErrorFilesAtom);
 
     const handleFileSelect = (file: ConfigFile) => {
         model.loadFile(file);
@@ -46,7 +48,12 @@ const ConfigSidebar = memo(({ model }: ConfigSidebarProps) => {
                         selectedFile?.path === file.path ? "bg-accentbg text-primary" : "hover:bg-secondary/50"
                     }`}
                 >
-                    <div className="whitespace-nowrap overflow-hidden text-ellipsis">{file.name}</div>
+                    <div className="flex items-center gap-1">
+                        <div className="whitespace-nowrap overflow-hidden text-ellipsis flex-1">{file.name}</div>
+                        {configErrorFiles.has(file.path) && (
+                            <i className="fa fa-solid fa-circle-exclamation text-error text-[14px] shrink-0" />
+                        )}
+                    </div>
                     {file.description && (
                         <div className="text-xs text-muted mt-0.5 whitespace-nowrap overflow-hidden text-ellipsis">
                             {file.description}
@@ -75,6 +82,9 @@ const ConfigSidebar = memo(({ model }: ConfigSidebarProps) => {
                                 >
                                     deprecated
                                 </span>
+                                {configErrorFiles.has(file.path) && (
+                                    <i className="fa fa-solid fa-circle-exclamation text-error text-[14px] ml-auto shrink-0" />
+                                )}
                             </div>
                         </div>
                     ))}
@@ -96,6 +106,8 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
     const [isMenuOpen, setIsMenuOpen] = useAtom(model.isMenuOpenAtom);
     const hasChanges = useAtomValue(model.hasEditedAtom);
     const [activeTab, setActiveTab] = useAtom(model.activeTabAtom);
+    const fullConfig = useAtomValue(atoms.fullConfigAtom);
+    const configErrors = fullConfig?.configerrors;
 
     const handleContentChange = useCallback(
         (newContent: string) => {
@@ -148,7 +160,8 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
     const saveTooltip = `Save (${model.saveShortcut})`;
 
     return (
-        <div className="@container flex flex-row w-full h-full">
+        <div className="@container flex flex-col w-full h-full">
+            <div className="flex flex-row flex-1 min-h-0">
             {isMenuOpen && (
                 <div className="absolute inset-0 bg-black/50 z-5 @w600:hidden" onClick={() => setIsMenuOpen(false)} />
             )}
@@ -284,6 +297,17 @@ const WaveConfigView = memo(({ blockId, model }: ViewComponentProps<WaveConfigVi
                     </>
                 )}
             </div>
+            </div>
+            {configErrors?.length > 0 && (
+                <div className="bg-error text-primary px-4 py-1 max-h-12 overflow-y-auto border-t border-error/50 shrink-0">
+                    {configErrors.map((cerr, i) => (
+                        <div key={i} className="text-sm">
+                            <span className="font-semibold">Config Error: </span>
+                            {cerr.file}: {cerr.err}
+                        </div>
+                    ))}
+                </div>
+            )}
         </div>
     );
 });
diff --git a/frontend/app/workspace/widgets.tsx b/frontend/app/workspace/widgets.tsx
index 2ec171953e..f3043e6d98 100644
--- a/frontend/app/workspace/widgets.tsx
+++ b/frontend/app/workspace/widgets.tsx
@@ -1,4 +1,4 @@
-// Copyright 2025, Command Line Inc.
+// Copyright 2026, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
 import { Tooltip } from "@/app/element/tooltip";
@@ -30,6 +30,7 @@ export type WidgetsEnv = WaveEnvSubset<{
     };
     atoms: {
         fullConfigAtom: WaveEnv["atoms"]["fullConfigAtom"];
+        hasConfigErrors: WaveEnv["atoms"]["hasConfigErrors"];
         workspaceId: WaveEnv["atoms"]["workspaceId"];
         hasCustomAIPresetsAtom: WaveEnv["atoms"]["hasCustomAIPresetsAtom"];
     };
@@ -107,10 +108,26 @@ function calculateGridSize(appCount: number): number {
     return 6;
 }
 
+function SettingsTooltipContent({ hasConfigErrors }: { hasConfigErrors: boolean }) {
+    if (!hasConfigErrors) {
+        return "Settings & Help";
+    }
+    return (
+        <div className="flex flex-col p-1">
+            <div className="mb-1">Settings &amp; Help</div>
+            <div className="flex items-center gap-1 mt-0.5 text-error">
+                <i className="fa fa-solid fa-circle-exclamation"></i>
+                <span>Config Errors</span>
+            </div>
+        </div>
+    );
+}
+
 type FloatingWindowPropsType = {
     isOpen: boolean;
     onClose: () => void;
     referenceElement: HTMLElement;
+    hasConfigErrors?: boolean;
 };
 
 const AppsFloatingWindow = memo(({ isOpen, onClose, referenceElement }: FloatingWindowPropsType) => {
@@ -236,118 +253,125 @@ const AppsFloatingWindow = memo(({ isOpen, onClose, referenceElement }: Floating
     );
 });
 
-const SettingsFloatingWindow = memo(({ isOpen, onClose, referenceElement }: FloatingWindowPropsType) => {
-    const env = useWaveEnv<WidgetsEnv>();
-    const { refs, floatingStyles, context } = useFloating({
-        open: isOpen,
-        onOpenChange: onClose,
-        placement: "left-start",
-        middleware: [offset(-2), shift({ padding: 12 })],
-        whileElementsMounted: autoUpdate,
-        elements: {
-            reference: referenceElement,
-        },
-    });
+const SettingsFloatingWindow = memo(
+    ({ isOpen, onClose, referenceElement, hasConfigErrors }: FloatingWindowPropsType) => {
+        const env = useWaveEnv<WidgetsEnv>();
+        const { refs, floatingStyles, context } = useFloating({
+            open: isOpen,
+            onOpenChange: onClose,
+            placement: "left-start",
+            middleware: [offset(-2), shift({ padding: 12 })],
+            whileElementsMounted: autoUpdate,
+            elements: {
+                reference: referenceElement,
+            },
+        });
 
-    const dismiss = useDismiss(context);
-    const { getFloatingProps } = useInteractions([dismiss]);
+        const dismiss = useDismiss(context);
+        const { getFloatingProps } = useInteractions([dismiss]);
 
-    if (!isOpen) return null;
+        if (!isOpen) return null;
 
-    const menuItems = [
-        {
-            icon: "gear",
-            label: "Settings",
-            onClick: () => {
-                const blockDef: BlockDef = {
-                    meta: {
-                        view: "waveconfig",
-                    },
-                };
-                env.createBlock(blockDef, false, true);
-                onClose();
+        const menuItems = [
+            {
+                icon: "gear",
+                label: "Settings",
+                hasError: hasConfigErrors,
+                onClick: () => {
+                    const blockDef: BlockDef = {
+                        meta: {
+                            view: "waveconfig",
+                        },
+                    };
+                    env.createBlock(blockDef, false, true);
+                    onClose();
+                },
             },
-        },
-        {
-            icon: "lightbulb",
-            label: "Tips",
-            onClick: () => {
-                const blockDef: BlockDef = {
-                    meta: {
-                        view: "tips",
-                    },
-                };
-                env.createBlock(blockDef, true, true);
-                onClose();
+            {
+                icon: "lightbulb",
+                label: "Tips",
+                onClick: () => {
+                    const blockDef: BlockDef = {
+                        meta: {
+                            view: "tips",
+                        },
+                    };
+                    env.createBlock(blockDef, true, true);
+                    onClose();
+                },
             },
-        },
-        {
-            icon: "lock",
-            label: "Secrets",
-            onClick: () => {
-                const blockDef: BlockDef = {
-                    meta: {
-                        view: "waveconfig",
-                        file: "secrets",
-                    },
-                };
-                env.createBlock(blockDef, false, true);
-                onClose();
+            {
+                icon: "lock",
+                label: "Secrets",
+                onClick: () => {
+                    const blockDef: BlockDef = {
+                        meta: {
+                            view: "waveconfig",
+                            file: "secrets",
+                        },
+                    };
+                    env.createBlock(blockDef, false, true);
+                    onClose();
+                },
             },
-        },
-        {
-            icon: "book-open",
-            label: "Release Notes",
-            onClick: () => {
-                modalsModel.pushModal("UpgradeOnboardingPatch", { isReleaseNotes: true });
-                onClose();
+            {
+                icon: "book-open",
+                label: "Release Notes",
+                onClick: () => {
+                    modalsModel.pushModal("UpgradeOnboardingPatch", { isReleaseNotes: true });
+                    onClose();
+                },
             },
-        },
-        {
-            icon: "circle-question",
-            label: "Help",
-            onClick: () => {
-                const blockDef: BlockDef = {
-                    meta: {
-                        view: "help",
-                    },
-                };
-                env.createBlock(blockDef);
-                onClose();
+            {
+                icon: "circle-question",
+                label: "Help",
+                onClick: () => {
+                    const blockDef: BlockDef = {
+                        meta: {
+                            view: "help",
+                        },
+                    };
+                    env.createBlock(blockDef);
+                    onClose();
+                },
             },
-        },
-    ];
+        ];
 
-    return (
-        <FloatingPortal>
-            <div
-                ref={refs.setFloating}
-                style={floatingStyles}
-                {...getFloatingProps()}
-                className="bg-modalbg border border-border rounded-lg shadow-xl p-2 z-50"
-            >
-                {menuItems.map((item, idx) => (
-                    <div
-                        key={idx}
-                        className="flex items-center gap-3 px-3 py-2 rounded hover:bg-hoverbg cursor-pointer transition-colors text-secondary hover:text-white"
-                        onClick={item.onClick}
-                    >
-                        <div className="text-lg w-5 flex justify-center">
-                            <i className={makeIconClass(item.icon, false)}></i>
+        return (
+            <FloatingPortal>
+                <div
+                    ref={refs.setFloating}
+                    style={floatingStyles}
+                    {...getFloatingProps()}
+                    className="bg-modalbg border border-border rounded-lg shadow-xl p-2 z-50"
+                >
+                    {menuItems.map((item, idx) => (
+                        <div
+                            key={idx}
+                            className="flex items-center gap-3 px-3 py-2 rounded hover:bg-hoverbg cursor-pointer transition-colors text-secondary hover:text-white"
+                            onClick={item.onClick}
+                        >
+                            <div className="text-lg w-5 flex justify-center">
+                                <i className={makeIconClass(item.icon, false)}></i>
+                            </div>
+                            <div className="text-sm whitespace-nowrap">{item.label}</div>
+                            {item.hasError && (
+                                <i className="fa fa-solid fa-circle-exclamation text-error text-[14px] ml-auto"></i>
+                            )}
                         </div>
-                        <div className="text-sm whitespace-nowrap">{item.label}</div>
-                    </div>
-                ))}
-            </div>
-        </FloatingPortal>
-    );
-});
+                    ))}
+                </div>
+            </FloatingPortal>
+        );
+    }
+);
 
 SettingsFloatingWindow.displayName = "SettingsFloatingWindow";
 
 const Widgets = memo(() => {
     const env = useWaveEnv<WidgetsEnv>();
     const fullConfig = useAtomValue(env.atoms.fullConfigAtom);
+    const hasConfigErrors = useAtomValue(env.atoms.hasConfigErrors);
     const workspaceId = useAtomValue(env.atoms.workspaceId);
     const hasCustomAIPresets = useAtomValue(env.atoms.hasCustomAIPresetsAtom);
     const [mode, setMode] = useState<"normal" | "compact" | "supercompact">("normal");
@@ -471,9 +495,16 @@ const Widgets = memo(() => {
                                 className="flex flex-col justify-center items-center w-full py-1.5 pr-0.5 text-secondary text-sm overflow-hidden rounded-sm hover:bg-hoverbg hover:text-white cursor-pointer"
                                 onClick={() => setIsSettingsOpen(!isSettingsOpen)}
                             >
-                                <Tooltip content="Settings & Help" placement="left" disable={isSettingsOpen}>
-                                    <div>
+                                <Tooltip
+                                    content={<SettingsTooltipContent hasConfigErrors={hasConfigErrors} />}
+                                    placement="left"
+                                    disable={isSettingsOpen}
+                                >
+                                    <div className="relative">
                                         <i className={makeIconClass("gear", true)}></i>
+                                        {hasConfigErrors && (
+                                            <i className="fa fa-solid fa-circle-exclamation text-error absolute top-0 right-0 text-[10px] pointer-events-none"></i>
+                                        )}
                                     </div>
                                 </Tooltip>
                             </div>
@@ -510,9 +541,25 @@ const Widgets = memo(() => {
                             className="flex flex-col justify-center items-center w-full py-1.5 pr-0.5 text-secondary text-lg overflow-hidden rounded-sm hover:bg-hoverbg hover:text-white cursor-pointer"
                             onClick={() => setIsSettingsOpen(!isSettingsOpen)}
                         >
-                            <Tooltip content="Settings & Help" placement="left" disable={isSettingsOpen}>
-                                <div>
-                                    <i className={makeIconClass("gear", true)}></i>
+                            <Tooltip
+                                content={<SettingsTooltipContent hasConfigErrors={hasConfigErrors} />}
+                                placement="left"
+                                disable={isSettingsOpen}
+                            >
+                                <div className="flex flex-col items-center w-full">
+                                    <div className="relative">
+                                        <i className={makeIconClass("gear", true)}></i>
+                                        {hasConfigErrors && (
+                                            <i
+                                                className={`fa fa-solid fa-circle-exclamation text-error absolute top-0 right-[-4px] pointer-events-none ${mode === "normal" ? "text-[14px]" : "text-[12px]"}`}
+                                            ></i>
+                                        )}
+                                    </div>
+                                    {mode === "normal" && (
+                                        <div className="text-xxs mt-0.5 w-full px-0.5 text-center whitespace-nowrap overflow-hidden text-ellipsis">
+                                            settings
+                                        </div>
+                                    )}
                                 </div>
                             </Tooltip>
                         </div>
@@ -539,6 +586,7 @@ const Widgets = memo(() => {
                     isOpen={isSettingsOpen}
                     onClose={() => setIsSettingsOpen(false)}
                     referenceElement={settingsButtonRef.current}
+                    hasConfigErrors={hasConfigErrors}
                 />
             )}
 
diff --git a/frontend/preview/previews/widgets.preview.tsx b/frontend/preview/previews/widgets.preview.tsx
index 144cace174..440ae03a6a 100644
--- a/frontend/preview/previews/widgets.preview.tsx
+++ b/frontend/preview/previews/widgets.preview.tsx
@@ -3,11 +3,14 @@
 
 import { useWaveEnv, WaveEnv, WaveEnvContext } from "@/app/waveenv/waveenv";
 import { Widgets } from "@/app/workspace/widgets";
-import { atom, useAtom } from "jotai";
+import { atom, useAtom, useAtomValue } from "jotai";
 import { useRef } from "react";
 import { applyMockEnvOverrides } from "../mock/mockwaveenv";
 
 const resizableHeightAtom = atom(250);
+const hasConfigErrorsAtom = atom(false);
+const isDevAtom = atom(true);
+const mockVersionAtom = atom(0);
 
 function makeMockApp(name: string, icon: string, iconcolor: string): AppInfo {
     return {
@@ -84,13 +87,20 @@ const mockWidgets: { [key: string]: WidgetConfigType } = {
 
 const fullConfigAtom = atom<FullConfigType>({ settings: {}, widgets: mockWidgets } as unknown as FullConfigType);
 
-function makeWidgetsEnv(baseEnv: WaveEnv, isDev: boolean, hasCustomAIPresets: boolean, apps?: AppInfo[]) {
+function makeWidgetsEnv(
+    baseEnv: WaveEnv,
+    isDev: boolean,
+    hasCustomAIPresets: boolean,
+    apps?: AppInfo[],
+    atomOverrides?: Partial<GlobalAtomsType>
+) {
     return applyMockEnvOverrides(baseEnv, {
         isDev,
         rpc: { ListAllAppsCommand: () => Promise.resolve(apps ?? []) },
         atoms: {
             fullConfigAtom,
             hasCustomAIPresetsAtom: atom(hasCustomAIPresets),
+            ...atomOverrides,
         },
     });
 }
@@ -111,7 +121,9 @@ function WidgetsScenario({
     const baseEnv = useWaveEnv();
     const envRef = useRef<WaveEnv>(null);
     if (envRef.current == null) {
-        envRef.current = makeWidgetsEnv(baseEnv, isDev, hasCustomAIPresets, apps);
+        envRef.current = makeWidgetsEnv(baseEnv, isDev, hasCustomAIPresets, apps, {
+            hasConfigErrors: hasConfigErrorsAtom,
+        });
     }
 
     return (
@@ -132,18 +144,18 @@ function WidgetsScenario({
     );
 }
 
-function WidgetsResizable() {
+function WidgetsResizable({ isDev }: { isDev: boolean }) {
     const [height, setHeight] = useAtom(resizableHeightAtom);
     const baseEnv = useWaveEnv();
     const envRef = useRef<WaveEnv>(null);
     if (envRef.current == null) {
-        envRef.current = makeWidgetsEnv(baseEnv, true, true, mockApps);
+        envRef.current = makeWidgetsEnv(baseEnv, isDev, true, mockApps, { hasConfigErrors: hasConfigErrorsAtom });
     }
 
     return (
         <div className="flex flex-col gap-2 items-start">
             <div className="flex items-center gap-2 text-xs text-muted font-mono">
-                <span>compact/supercompact — resizable (dev mode, height: {height}px)</span>
+                <span>compact/supercompact — resizable (height: {height}px)</span>
                 <input
                     type="range"
                     min={80}
@@ -168,16 +180,57 @@ function WidgetsResizable() {
     );
 }
 
+function PreviewControls() {
+    const [hasConfigErrors, setHasConfigErrors] = useAtom(hasConfigErrorsAtom);
+    const [isDev, setIsDev] = useAtom(isDevAtom);
+    const [, setMockVersion] = useAtom(mockVersionAtom);
+
+    function applyAndBump(fn: () => void) {
+        fn();
+        setMockVersion((v) => v + 1);
+    }
+
+    return (
+        <div className="flex items-center gap-4 text-xs text-muted font-mono">
+            <span className="font-semibold">preview controls:</span>
+            <label className="flex items-center gap-1 cursor-pointer select-none">
+                <input
+                    type="checkbox"
+                    checked={hasConfigErrors}
+                    onChange={(e) => applyAndBump(() => setHasConfigErrors(e.target.checked))}
+                    className="cursor-pointer"
+                />
+                hasConfigErrors
+            </label>
+            <label className="flex items-center gap-1 cursor-pointer select-none">
+                <input
+                    type="checkbox"
+                    checked={isDev}
+                    onChange={(e) => applyAndBump(() => setIsDev(e.target.checked))}
+                    className="cursor-pointer"
+                />
+                isDev
+            </label>
+        </div>
+    );
+}
+
 export function WidgetsPreview() {
+    const isDev = useAtomValue(isDevAtom);
+    const mockVersion = useAtomValue(mockVersionAtom);
+
     return (
         <div className="flex flex-col gap-8 p-6">
-            <div className="flex flex-row gap-8 items-start flex-wrap">
-                <WidgetsScenario label="normal (with AI presets)" height={550} />
-                <WidgetsScenario label="no custom AI presets" hasCustomAIPresets={false} />
-                <WidgetsScenario label="dev mode (apps button)" isDev={true} apps={mockApps} />
-                <WidgetsScenario label="compact (200px)" height={200} isDev={true} apps={mockApps} />
+            <PreviewControls />
+            <div key={mockVersion} className="flex flex-col gap-8">
+                <div className="flex flex-row gap-8 items-start flex-wrap">
+                    <WidgetsScenario label="normal (with AI presets)" height={550} isDev={isDev} />
+                    <WidgetsScenario label="no custom AI presets" hasCustomAIPresets={false} height={550} isDev={isDev} />
+                    <WidgetsScenario label="dev mode (apps button)" height={550} isDev={isDev} apps={mockApps} />
+                    <WidgetsScenario label="compact (200px)" height={200} isDev={isDev} apps={mockApps} />
+                </div>
+                <WidgetsResizable isDev={isDev} />
             </div>
-            <WidgetsResizable />
         </div>
     );
 }