@motiadev/workbench 0.9.2-beta.147 → 0.9.4-beta.149

package/dist/motia-plugin/hmr.js

@@ -60,10 +60,6 @@ function shouldInvalidatePlugins(file, plugins) {
 function handlePluginHotUpdate(ctx, plugins, printer) {
     const { file, server, timestamp } = ctx;
     printer.printPluginLog(`HMR: File changed: ${(0, utils_1.normalizePath)(file)}`);
-    // Check if this change affects plugins
-    if (!shouldInvalidatePlugins(file, plugins)) {
-        return; // Let Vite handle it normally
-    }
     if (isConfigFile(file)) {
         printer.printPluginLog('HMR: Config file changed, triggering full page reload');
         printer.printPluginWarn('Configuration changes require a server restart for full effect. Please restart the dev server to apply all changes.');
@@ -73,11 +69,14 @@ function handlePluginHotUpdate(ctx, plugins, printer) {
         });
         return;
     }
+    if (!shouldInvalidatePlugins(file, plugins)) {
+        printer.printPluginLog('HMR: Change outside plugin scope, delegating to Vite default handling');
+        return;
+    }
     printer.printPluginLog('HMR: Plugin change detected, invalidating virtual module');
-    // Find the virtual module
     const virtualModule = server.moduleGraph.getModuleById(types_1.CONSTANTS.RESOLVED_VIRTUAL_MODULE_ID);
     if (!virtualModule) {
-        printer.printPluginWarn('HMR: Virtual module not found, triggering full reload');
+        printer.printPluginWarn('HMR: Virtual module not found, triggering full reload as fallback');
         server.ws.send({
             type: 'full-reload',
             path: '*',
@@ -86,31 +85,16 @@ function handlePluginHotUpdate(ctx, plugins, printer) {
     }
     server.moduleGraph.invalidateModule(virtualModule, new Set(), timestamp);
     printer.printPluginLog('HMR: Virtual module invalidated');
-    const modulesToUpdate = [virtualModule];
+    const modulesToUpdateSet = new Set([virtualModule]);
     const processedModules = new Set([virtualModule]);
-    // Recursively add all importers
-    const addImporters = (module) => {
-        for (const importer of module.importers) {
-            if (!processedModules.has(importer)) {
-                processedModules.add(importer);
-                modulesToUpdate.push(importer);
-                server.moduleGraph.invalidateModule(importer, new Set(), timestamp);
-                addImporters(importer);
-            }
+    for (const importer of virtualModule.importers) {
+        if (!processedModules.has(importer)) {
+            processedModules.add(importer);
+            modulesToUpdateSet.add(importer);
+            server.moduleGraph.invalidateModule(importer, new Set(), timestamp);
         }
-    };
-    addImporters(virtualModule);
-    server.ws.send({
-        type: 'update',
-        updates: modulesToUpdate
-            .filter((m) => m.url)
-            .map((m) => ({
-            type: m.type === 'css' ? 'css-update' : 'js-update',
-            path: m.url,
-            acceptedPath: m.url,
-            timestamp,
-        })),
-    });
+    }
+    const modulesToUpdate = Array.from(modulesToUpdateSet);
     printer.printPluginLog(`HMR: Updated ${modulesToUpdate.length} module(s)`);
     return modulesToUpdate;
 }

package/dist/motia-plugin/index.js

@@ -141,8 +141,9 @@ function motiaPluginsPlugin(plugins) {
             }
             const modulesToUpdate = (0, hmr_1.handlePluginHotUpdate)(ctx, plugins, printer);
             if (modulesToUpdate && modulesToUpdate.length > 0) {
-                printer.printPluginLog(`HMR: Successfully updated ${modulesToUpdate.length} module(s)`);
-                return modulesToUpdate;
+                const merged = Array.from(new Set([...(ctx.modules || []), ...modulesToUpdate]));
+                printer.printPluginLog(`HMR: Successfully updated ${merged.length} module(s)`);
+                return merged;
             }
         },
         buildEnd() {

package/dist/src/App.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import { FlowPage } from './components/flow/flow-page';
 import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
 import { registerPluginTabs } from './lib/plugins';
@@ -18,7 +18,7 @@ const topTabs = [
         content: FlowPage,
     },
 ];
-export const App = () => {
+export const App = memo(() => {
     const setTabs = useAppTabsStore((state) => state.setTabs);
     const addTab = useAppTabsStore((state) => state.addTab);
     useEffect(() => {
@@ -31,4 +31,5 @@ export const App = () => {
     const viewMode = useMemo(getViewModeFromURL, []);
     const ViewComponent = viewMode === 'project' ? ProjectViewMode : SystemViewMode;
     return _jsx(ViewComponent, {});
-};
+});
+App.displayName = 'App';

package/dist/src/components/bottom-panel.d.ts

@@ -0,0 +1 @@
+export declare const BottomPanel: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/src/components/bottom-panel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
+import { memo, useId } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store';
+import { useTabsStore } from '../stores/use-tabs-store';
+const bottomTabsSelector = (state) => state.tabs[TabLocation.BOTTOM];
+export const BottomPanel = memo(() => {
+    const defaultTab = useTabsStore((state) => state.tab.bottom);
+    const setBottomTab = useTabsStore((state) => state.setBottomTab);
+    const tabs = useAppTabsStore(useShallow(bottomTabsSelector));
+    const bottomPanelId = useId();
+    return (_jsx(CollapsiblePanel, { id: bottomPanelId, variant: 'tabs', defaultTab: defaultTab, onTabChange: setBottomTab, header: _jsx(TabsList, { children: tabs.map(({ id, tabLabel: Label }) => (_jsx(TabsTrigger, { value: id, "data-testid": `${id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(Label, {}) }, id))) }), children: tabs.map(({ id, content: Element }) => (_jsx(TabsContent, { value: id, className: "h-full", children: _jsx(Element, {}) }, id))) }));
+});
+BottomPanel.displayName = 'BottomPanel';

package/dist/src/components/flow/flow-page.d.ts

@@ -1 +1 @@
-export declare const FlowPage: () => import("react/jsx-runtime").JSX.Element;
+export declare const FlowPage: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/src/components/flow/flow-page.js

@@ -1,21 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useStreamItem } from '@motiadev/stream-client-react';
 import { ReactFlowProvider } from '@xyflow/react';
+import { memo, useMemo } from 'react';
 import { useFlowStore } from '@/stores/use-flow-store';
 import { FlowView } from './flow-view';
-export const FlowPage = () => {
+export const FlowPage = memo(() => {
     const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
-    const { data: flow } = useStreamItem({
-        streamName: '__motia.flows',
-        groupId: 'default',
-        id: selectedFlowId ?? '',
-    });
-    const { data: flowConfig } = useStreamItem({
-        streamName: '__motia.flowsConfig',
-        groupId: 'default',
-        id: selectedFlowId ?? '',
-    });
+    const streamItemArgs = useMemo(() => ({ streamName: '__motia.flows', groupId: 'default', id: selectedFlowId ?? '' }), [selectedFlowId]);
+    const { data: flow } = useStreamItem(streamItemArgs);
+    const streamItemArgsConfig = useMemo(() => ({ streamName: '__motia.flowsConfig', groupId: 'default', id: selectedFlowId ?? '' }), [selectedFlowId]);
+    const { data: flowConfig } = useStreamItem(streamItemArgsConfig);
     if (!flow || flow.error)
         return (_jsx("div", { className: "w-full h-full bg-background flex flex-col items-center justify-center", children: _jsx("p", { children: flow?.error }) }));
     return (_jsx(ReactFlowProvider, { children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
-};
+});
+FlowPage.displayName = 'FlowPage';

package/dist/src/components/flow/flow-tab-menu-item.js

@@ -17,5 +17,5 @@ export const FlowTabMenuItem = () => {
         selectFlowId(flowId);
         motiaAnalytics.track('flow_selected', { flow: flowId });
     };
-    return (_jsxs("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), selectedFlowId ?? 'No flow selected', _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { "data-testid": "flows-dropdown-trigger", className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: _jsx(ChevronsUpDown, { className: "size-4" }) }) }), _jsx(DropdownMenuContent, { className: "bg-background text-foreground flows-dropdown", children: flows.map((item) => (_jsx(DropdownMenuItem, { "data-testid": `dropdown-${item}`, className: "cursor-pointer gap-2 flow-link", onClick: () => handleFlowSelect(item), children: item }, `dropdown-${item}`))) })] })] }));
+    return (_jsxs("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: [_jsx(Workflow, {}), selectedFlowId ?? 'No flow selected', _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { className: "flex flex-row justify-center items-center gap-2 cursor-pointer", children: _jsx(ChevronsUpDown, { className: "size-4", "data-testid": "flows-dropdown-trigger" }) }) }), _jsx(DropdownMenuContent, { className: "bg-background text-foreground flows-dropdown", children: flows.map((item) => (_jsx(DropdownMenuItem, { "data-testid": `dropdown-${item}`, className: "cursor-pointer gap-2 flow-link", onClick: () => handleFlowSelect(item), children: item }, `dropdown-${item}`))) })] })] }));
 };

package/dist/src/components/header/header.js

@@ -1,25 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useThemeStore } from '@motiadev/ui';
-import { useEffect, useState } from 'react';
+import { memo, useEffect } from 'react';
 import motiaLogoDark from '@/assets/motia-dark.png';
 import motiaLogoLight from '@/assets/motia-light.png';
+import { useMotiaConfigStore } from '@/stores/use-motia-config-store';
 import { Tutorial } from '../tutorial/tutorial';
 import { TutorialButton } from '../tutorial/tutorial-button';
 import { ThemeToggle } from '../ui/theme-toggle';
 import { DeployButton } from './deploy-button';
-export const Header = () => {
-    const [isDevMode, setIsDevMode] = useState(false);
-    const [isTutorialDisabled, setIsTutorialDisabled] = useState(true);
+export const Header = memo(() => {
     const theme = useThemeStore((state) => state.theme);
     const logo = theme === 'light' ? motiaLogoLight : motiaLogoDark;
+    const config = useMotiaConfigStore((state) => state.config);
+    const fetchConfig = useMotiaConfigStore((state) => state.fetchConfig);
     useEffect(() => {
-        fetch('/__motia')
-            .then((res) => res.json())
-            .then((data) => {
-            setIsDevMode(data.isDev);
-            setIsTutorialDisabled(data.isTutorialDisabled);
-        })
-            .catch((err) => console.error(err));
+        fetchConfig();
     }, []);
+    const isDevMode = config?.isDev ?? false;
+    const isTutorialDisabled = config?.isTutorialDisabled ?? true;
     return (_jsxs("header", { className: "min-h-16 px-4 gap-4 flex items-center bg-default text-default-foreground border-b", children: [_jsx("img", { src: logo, className: "h-5", id: "logo-icon", "data-testid": "logo-icon" }), _jsx("div", { className: "flex-1" }), _jsx(ThemeToggle, {}), isDevMode && !isTutorialDisabled && _jsx(TutorialButton, {}), isDevMode && _jsx(DeployButton, {}), !isTutorialDisabled && _jsx(Tutorial, {})] }));
-};
+});
+Header.displayName = 'Header';

package/dist/src/components/root-motia.d.ts

@@ -1,3 +1,2 @@
-import type React from 'react';
 import type { PropsWithChildren } from 'react';
 export declare const RootMotia: React.FC<PropsWithChildren>;

package/dist/src/components/root-motia.js

@@ -1,5 +1,7 @@
+import { memo } from 'react';
 import { useAnalytics } from '@/lib/motia-analytics';
-export const RootMotia = ({ children }) => {
+export const RootMotia = memo(({ children }) => {
     useAnalytics();
     return children;
-};
+});
+RootMotia.displayName = 'RootMotia';

package/dist/src/components/top-panel.d.ts

@@ -0,0 +1 @@
+export declare const TopPanel: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/src/components/top-panel.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CollapsiblePanel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
+import { memo, useId } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { TabLocation, useAppTabsStore } from '../stores/use-app-tabs-store';
+import { useTabsStore } from '../stores/use-tabs-store';
+const topTabsSelector = (state) => state.tabs[TabLocation.TOP];
+export const TopPanel = memo(() => {
+    const defaultTab = useTabsStore((state) => state.tab.top);
+    const setTopTab = useTabsStore((state) => state.setTopTab);
+    const tabs = useAppTabsStore(useShallow(topTabsSelector));
+    const topPanelId = useId();
+    return (_jsx(CollapsiblePanel, { id: topPanelId, variant: 'tabs', defaultTab: defaultTab, onTabChange: setTopTab, header: _jsx(TabsList, { children: tabs.map(({ id, tabLabel: Label }) => (_jsx(TabsTrigger, { value: id, "data-testid": `${id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(Label, {}) }, id))) }), children: tabs.map(({ id, content: Element }) => (_jsx(TabsContent, { value: id, className: "h-full", children: _jsx(Element, {}) }, id))) }));
+});
+TopPanel.displayName = 'TopPanel';

package/dist/src/hooks/use-fetch-flows.js

@@ -1,14 +1,12 @@
 import { useStreamGroup } from '@motiadev/stream-client-react';
 import { useEffect } from 'react';
 import { useFlowStore } from '@/stores/use-flow-store';
+const streamGroupArgs = { streamName: '__motia.flows', groupId: 'default' };
 export const useFetchFlows = () => {
     const setFlows = useFlowStore((state) => state.setFlows);
     const selectFlowId = useFlowStore((state) => state.selectFlowId);
     const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
-    const { data: flows } = useStreamGroup({
-        streamName: '__motia.flows',
-        groupId: 'default',
-    });
+    const { data: flows } = useStreamGroup(streamGroupArgs);
     useEffect(() => {
         if (flows)
             setFlows(flows.map((flow) => flow.id));
@@ -18,5 +16,5 @@ export const useFetchFlows = () => {
             (selectedFlowId && flows.length > 0 && !flows.find((flow) => flow.id === selectedFlowId))) {
             selectFlowId(flows[0].id);
         }
-    }, [flows, selectedFlowId, selectFlowId, selectedFlowId]);
+    }, [flows, selectedFlowId, selectFlowId]);
 };

package/dist/src/lib/plugins.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { plugins } from 'virtual:motia-plugins';
 import { DynamicIcon, dynamicIconImports } from 'lucide-react/dynamic';
 import { memo } from 'react';
-import { TabLocation } from '@/stores/use-app-tabs-store';
+import { TabLocation, useAppTabsStore } from '@/stores/use-app-tabs-store';
 import { isValidTabLocation } from './utils';
 export const registerPluginTabs = (addTab) => {
     if (!Array.isArray(plugins)) {
@@ -53,3 +53,53 @@ export const registerPluginTabs = (addTab) => {
         }
     });
 };
+const refreshPluginTabs = (nextPlugins) => {
+    try {
+        const state = useAppTabsStore.getState();
+        const { removeTab, addTab } = state;
+        const idsToRefresh = new Set(nextPlugins.map((p) => (p.label || '').toLowerCase()));
+        idsToRefresh.forEach((id) => {
+            removeTab(TabLocation.TOP, id);
+            removeTab(TabLocation.BOTTOM, id);
+        });
+        nextPlugins.forEach((plugin, index) => {
+            try {
+                if (!plugin.label || !plugin.component)
+                    return;
+                const position = plugin.position || 'top';
+                const tabLocation = isValidTabLocation(position) ? position : TabLocation.TOP;
+                const PluginTabLabel = memo(() => {
+                    const hasIcon = Object.keys(dynamicIconImports).includes(plugin.labelIcon);
+                    const iconName = hasIcon ? plugin.labelIcon : 'toy-brick';
+                    return (_jsxs(_Fragment, { children: [_jsx(DynamicIcon, { name: iconName }), _jsx("span", { children: plugin.label })] }));
+                });
+                PluginTabLabel.displayName = `${plugin.label}TabLabel_HMR_${index}`;
+                const PluginContent = memo(() => {
+                    const Component = plugin.component;
+                    const props = plugin.props || {};
+                    if (!Component)
+                        return _jsx("div", { children: "Error: Plugin component not found" });
+                    return _jsx(Component, { ...props });
+                });
+                PluginContent.displayName = `${plugin.label}Content_HMR_${index}`;
+                addTab(tabLocation, {
+                    id: plugin.label.toLowerCase(),
+                    tabLabel: PluginTabLabel,
+                    content: PluginContent,
+                });
+            }
+            catch (error) {
+                console.error(`[Motia] Error refreshing plugin "${plugin.label}":`, error);
+            }
+        });
+    }
+    catch (err) {
+        console.error('[Motia] Failed to refresh plugin tabs via HMR:', err);
+    }
+};
+if (import.meta.hot) {
+    import.meta.hot.accept('virtual:motia-plugins', (mod) => {
+        const next = mod?.plugins || [];
+        refreshPluginTabs(next);
+    });
+}

package/dist/src/project-view-mode.d.ts

@@ -1 +1 @@
-export declare const ProjectViewMode: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProjectViewMode: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/src/project-view-mode.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { APP_SIDEBAR_CONTAINER_ID, Panel } from '@motiadev/ui';
+import { memo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { TabLocation, useAppTabsStore } from './stores/use-app-tabs-store';
 const topTabs = (state) => state.tabs[TabLocation.TOP];
-export const ProjectViewMode = () => {
+export const ProjectViewMode = memo(() => {
     const tabs = useAppTabsStore(useShallow(topTabs));
-    return (_jsxs("div", { className: "grid grid-rows-1 grid-cols-[1fr_auto] bg-background text-foreground h-screen ", children: [_jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsx(Panel, { contentClassName: 'p-0', tabs: tabs.map((tab) => {
+    return (_jsxs("div", { className: "grid grid-rows-1 grid-cols-[1fr_auto] bg-background text-foreground h-screen ", children: [_jsx("main", { className: "m-2 overflow-hidden", children: _jsx(Panel, { contentClassName: 'p-0', tabs: tabs.map((tab) => {
                         const Element = tab.content;
                         const LabelComponent = tab.tabLabel;
                         return {
@@ -15,4 +16,5 @@ export const ProjectViewMode = () => {
                             'data-testid': tab.id,
                         };
                     }) }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
-};
+});
+ProjectViewMode.displayName = 'ProjectViewMode';

package/dist/src/stores/use-motia-config-store.d.ts

@@ -0,0 +1,12 @@
+interface MotiaConfig {
+    isDev: boolean;
+    isTutorialDisabled: boolean;
+}
+interface MotiaConfigState {
+    config: MotiaConfig | null;
+    isLoading: boolean;
+    error: Error | null;
+    fetchConfig: () => Promise<void>;
+}
+export declare const useMotiaConfigStore: import("zustand").UseBoundStore<import("zustand").StoreApi<MotiaConfigState>>;
+export {};

package/dist/src/stores/use-motia-config-store.js

@@ -0,0 +1,24 @@
+import { create } from 'zustand';
+export const useMotiaConfigStore = create((set, get) => ({
+    config: null,
+    isLoading: false,
+    error: null,
+    fetchConfig: async () => {
+        const { config, isLoading } = get();
+        if (isLoading || config)
+            return;
+        set({ isLoading: true, error: null });
+        try {
+            const response = await fetch('/__motia');
+            if (!response.ok) {
+                throw new Error(`Failed to fetch Motia config: ${response.statusText}`);
+            }
+            const data = await response.json();
+            set({ config: data, isLoading: false });
+        }
+        catch (error) {
+            console.error('Failed to fetch Motia config:', error);
+            set({ error: error, isLoading: false });
+        }
+    },
+}));

package/dist/src/stores/use-tabs-store.js

@@ -1,14 +1,21 @@
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
-export const useTabsStore = create(persist((set) => ({
+import { motiaAnalytics } from '@/lib/motia-analytics';
+export const useTabsStore = create(persist((set, get) => ({
     tab: {
         top: 'flow',
         bottom: 'tracing',
     },
     setTopTab: (tab) => {
+        const currentTab = get().tab;
+        motiaAnalytics.track('Top panel tab changed', { 'new.top': tab, tab: currentTab });
         set((state) => ({ tab: { ...state.tab, top: tab } }));
     },
-    setBottomTab: (tab) => set((state) => ({ tab: { ...state.tab, bottom: tab } })),
+    setBottomTab: (tab) => {
+        const currentTab = get().tab;
+        motiaAnalytics.track('Bottom panel tab changed', { 'new.bottom': tab, tab: currentTab });
+        set((state) => ({ tab: { ...state.tab, bottom: tab } }));
+    },
 }), {
     name: 'motia-tabs-storage',
     storage: createJSONStorage(() => localStorage),

package/dist/src/system-view-mode.d.ts

@@ -1 +1 @@
-export declare const SystemViewMode: () => import("react/jsx-runtime").JSX.Element;
+export declare const SystemViewMode: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

package/dist/src/system-view-mode.js

@@ -1,36 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { APP_SIDEBAR_CONTAINER_ID, CollapsiblePanel, CollapsiblePanelGroup, TabsContent, TabsList, TabsTrigger, } from '@motiadev/ui';
-import { useCallback, useMemo } from 'react';
-import { useShallow } from 'zustand/react/shallow';
+import { APP_SIDEBAR_CONTAINER_ID, CollapsiblePanelGroup } from '@motiadev/ui';
+import { memo } from 'react';
+import { BottomPanel } from './components/bottom-panel';
 import { Header } from './components/header/header';
-import { motiaAnalytics } from './lib/motia-analytics';
-import { TabLocation, useAppTabsStore } from './stores/use-app-tabs-store';
-import { useTabsStore } from './stores/use-tabs-store';
-const topTabs = (state) => state.tabs;
-export const SystemViewMode = () => {
-    const tab = useTabsStore((state) => state.tab);
-    const setTopTab = useTabsStore((state) => state.setTopTab);
-    const setBottomTab = useTabsStore((state) => state.setBottomTab);
-    const tabs = useAppTabsStore(useShallow(topTabs));
-    const tabChangeCallbacks = useMemo(() => ({
-        [TabLocation.TOP]: setTopTab,
-        [TabLocation.BOTTOM]: setBottomTab,
-    }), [setTopTab, setBottomTab]);
-    const onTabChange = useCallback((location) => (newTab) => {
-        motiaAnalytics.track(`${location} tab changed`, { [`new.${location}`]: newTab, tab });
-        tabChangeCallbacks[location](newTab);
-    }, [tabChangeCallbacks, tab]);
-    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", role: "main", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsx(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsx(TabsList, { children: tabs[TabLocation.TOP].map((tab) => {
-                                    const LabelComponent = tab.tabLabel;
-                                    return (_jsx(TabsTrigger, { value: tab.id, "data-testid": `${tab.id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(LabelComponent, {}) }, tab.id));
-                                }) }), children: tabs[TabLocation.TOP].map((tab) => {
-                                const Element = tab.content;
-                                return (_jsx(TabsContent, { value: tab.id, className: "h-full", children: _jsx(Element, {}) }, tab.id));
-                            }) }), _jsx(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsx(TabsList, { children: tabs[TabLocation.BOTTOM].map((tab) => {
-                                    const LabelComponent = tab.tabLabel;
-                                    return (_jsx(TabsTrigger, { value: tab.id, "data-testid": `${tab.id.toLowerCase()}-link`, className: "cursor-pointer", children: _jsx(LabelComponent, {}) }, tab.id));
-                                }) }), children: tabs[TabLocation.BOTTOM].map((tab) => {
-                                const Element = tab.content;
-                                return (_jsx(TabsContent, { value: tab.id, className: "h-full", children: _jsx(Element, {}) }, tab.id));
-                            }) })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
-};
+import { TopPanel } from './components/top-panel';
+export const SystemViewMode = memo(() => {
+    return (_jsxs("div", { className: "grid grid-rows-[auto_1fr] grid-cols-[1fr_auto] bg-background text-foreground h-screen", children: [_jsx("div", { className: "col-span-2", children: _jsx(Header, {}) }), _jsx("main", { className: "m-2 overflow-hidden", children: _jsxs(CollapsiblePanelGroup, { autoSaveId: "app-panel", direction: "vertical", className: "gap-1 h-full", "aria-label": "Workbench panels", children: [_jsx(TopPanel, {}), _jsx(BottomPanel, {})] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+});
+SystemViewMode.displayName = 'SystemViewMode';