@motiadev/workbench 0.8.2-beta.140-246724 → 0.8.2-beta.140-516159

package/dist/middleware.d.ts

@@ -1,2 +1,9 @@
 import type { Express } from 'express';
-export declare const applyMiddleware: (app: Express, port: number, workbenchBase?: string) => Promise<void>;
+import { type WorkbenchPlugin } from './vite-plugin-motia-plugins';
+export type ApplyMiddlewareParams = {
+    app: Express;
+    port: number;
+    workbenchBase: string;
+    plugins: WorkbenchPlugin[];
+};
+export declare const applyMiddleware: ({ app, port, workbenchBase, plugins }: ApplyMiddlewareParams) => Promise<void>;

package/dist/middleware.js

@@ -4,10 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyMiddleware = void 0;
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const vite_1 = require("vite");
-const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+const vite_plugin_motia_plugins_1 = __importDefault(require("./vite-plugin-motia-plugins"));
 const processCwdPlugin = () => {
     return {
         name: 'html-transform',
@@ -35,7 +36,7 @@ const reoPlugin = () => {
         },
     };
 };
-const applyMiddleware = async (app, port, workbenchBase = '') => {
+const applyMiddleware = async ({ app, port, workbenchBase, plugins }) => {
     const vite = await (0, vite_1.createServer)({
         appType: 'spa',
         root: __dirname,
@@ -58,9 +59,10 @@ const applyMiddleware = async (app, port, workbenchBase = '') => {
             alias: {
                 '@': path_1.default.resolve(__dirname, './src'),
                 '@/assets': path_1.default.resolve(__dirname, './src/assets'),
+                // antd: path.join(process.cwd(), './node_modules/antd'),
             },
         },
-        plugins: [(0, plugin_react_1.default)(), processCwdPlugin(), reoPlugin()],
+        plugins: [(0, plugin_react_1.default)(), processCwdPlugin(), reoPlugin(), (0, vite_plugin_motia_plugins_1.default)(plugins)],
         assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif', '**/*.svg', '**/*.ico', '**/*.webp', '**/*.avif'],
     });
     app.use(workbenchBase, vite.middlewares);

package/dist/src/App.js

@@ -1,56 +1,49 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CollapsiblePanel, CollapsiblePanelGroup, Panel, TabsContent, TabsList, TabsTrigger } from '@motiadev/ui';
-import { analytics } from '@/lib/analytics';
-import { ReactFlowProvider } from '@xyflow/react';
-import { File, GanttChart, Link2, LogsIcon } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { FlowPage } from './components/flow/flow-page';
 import { FlowTabMenuItem } from './components/flow/flow-tab-menu-item';
-import { Header } from './components/header/header';
-import { LogsPage } from './components/logs/logs-page';
+import { TracingTabLabel } from './components/observability/trace-tab-label';
 import { TracesPage } from './components/observability/traces-page';
-import { APP_SIDEBAR_CONTAINER_ID } from '@motiadev/ui';
+import { StatesTabLabel } from './components/states/state-tab-label';
 import { StatesPage } from './components/states/states-page';
-import { useTabsStore } from './stores/use-tabs-store';
-import { EndpointsPage } from '@motiadev/plugin-endpoint';
-var TabLocation;
-(function (TabLocation) {
-    TabLocation["TOP"] = "top";
-    TabLocation["BOTTOM"] = "bottom";
-})(TabLocation || (TabLocation = {}));
+import { registerPluginTabs } from './lib/plugins';
+import { getViewModeFromURL } from './lib/utils';
+import { ProjectViewMode } from './project-view-mode';
+import { setAppTabs, TabLocation } from './stores/use-app-tabs-store';
+import { SystemViewMode } from './system-view-mode';
+const TAB_IDS = {
+    FLOW: 'flow',
+    TRACING: 'tracing',
+    LOGS: 'logs',
+    STATES: 'states',
+};
+const registerDefaultTabs = () => {
+    const topTabs = [
+        {
+            id: TAB_IDS.FLOW,
+            tabLabel: FlowTabMenuItem,
+            content: FlowPage,
+        },
+    ];
+    const bottomTabs = [
+        {
+            id: TAB_IDS.TRACING,
+            tabLabel: TracingTabLabel,
+            content: TracesPage,
+        },
+        {
+            id: TAB_IDS.STATES,
+            tabLabel: StatesTabLabel,
+            content: StatesPage,
+        },
+    ];
+    setAppTabs(TabLocation.TOP, topTabs);
+    setAppTabs(TabLocation.BOTTOM, bottomTabs);
+};
+registerDefaultTabs();
+registerPluginTabs();
 export const App = () => {
-    const tab = useTabsStore((state) => state.tab);
-    const setTopTab = useTabsStore((state) => state.setTopTab);
-    const setBottomTab = useTabsStore((state) => state.setBottomTab);
-    const [viewMode, setViewMode] = useState('system');
-    const tabChangeCallbacks = useMemo(() => ({
-        [TabLocation.TOP]: setTopTab,
-        [TabLocation.BOTTOM]: setBottomTab,
-    }), [setTopTab, setBottomTab]);
-    const onTabChange = useCallback((location) => (newTab) => {
-        analytics.track(`${location} tab changed`, { [`new.${location}`]: newTab, tab });
-        tabChangeCallbacks[location](newTab);
-    }, [tabChangeCallbacks, tab]);
-    useEffect(() => {
-        const url = new URL(window.location.href);
-        const viewMode = url.searchParams.get('view-mode');
-        if (viewMode) {
-            setViewMode(viewMode);
-        }
-    }, [setViewMode]);
-    if (viewMode === 'project') {
-        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, { tabs: [
-                            {
-                                label: 'Flow',
-                                labelComponent: _jsx(FlowTabMenuItem, {}),
-                                content: (_jsx(ReactFlowProvider, { children: _jsx("div", { className: "h-[calc(100vh-100px)] w-full", children: _jsx(FlowPage, {}) }) })),
-                            },
-                            {
-                                label: 'Endpoint',
-                                labelComponent: (_jsxs(_Fragment, { children: [_jsx(Link2, {}), "Endpoint"] })),
-                                content: _jsx(EndpointsPage, {}),
-                            },
-                        ] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
-    }
-    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: [_jsxs(CollapsiblePanel, { id: "top-panel", variant: 'tabs', defaultTab: tab.top, onTabChange: onTabChange(TabLocation.TOP), header: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "flow", "data-testid": "flows-link", children: _jsx(FlowTabMenuItem, {}) }), _jsxs(TabsTrigger, { value: "endpoint", "data-testid": "endpoints-link", className: "cursor-pointer", children: [_jsx(Link2, {}), "Endpoint"] })] }), children: [_jsx(TabsContent, { value: "flow", className: "h-full", asChild: true, children: _jsx(ReactFlowProvider, { children: _jsx(FlowPage, {}) }) }), _jsx(TabsContent, { value: "endpoint", asChild: true, children: _jsx(EndpointsPage, {}) })] }), _jsxs(CollapsiblePanel, { id: "bottom-panel", variant: 'tabs', defaultTab: tab.bottom, onTabChange: onTabChange(TabLocation.BOTTOM), header: _jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "tracing", "data-testid": "traces-link", className: "cursor-pointer", children: [_jsx(GanttChart, {}), " Tracing"] }), _jsxs(TabsTrigger, { value: "logs", "data-testid": "logs-link", className: "cursor-pointer", children: [_jsx(LogsIcon, {}), "Logs"] }), _jsxs(TabsTrigger, { value: "states", "data-testid": "states-link", className: "cursor-pointer", children: [_jsx(File, {}), "States"] })] }), children: [_jsx(TabsContent, { value: "tracing", className: "max-h-fit", asChild: true, children: _jsx(TracesPage, {}) }), _jsx(TabsContent, { value: "logs", asChild: true, children: _jsx(LogsPage, {}) }), _jsx(TabsContent, { value: "states", asChild: true, children: _jsx(StatesPage, {}) })] })] }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+    const viewMode = useMemo(getViewModeFromURL, []);
+    const ViewComponent = viewMode === 'project' ? ProjectViewMode : SystemViewMode;
+    return _jsx(ViewComponent, {});
 };

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useFlowStore } from '@/stores/use-flow-store';
 import { useStreamItem } from '@motiadev/stream-client-react';
 import { FlowView } from './flow-view';
+import { ReactFlowProvider } from '@xyflow/react';
 export const FlowPage = () => {
     const selectedFlowId = useFlowStore((state) => state.selectedFlowId);
     const { data: flow } = useStreamItem({
@@ -16,5 +17,5 @@ export const FlowPage = () => {
     });
     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(FlowView, { flow: flow, flowConfig: flowConfig });
+    return (_jsx(ReactFlowProvider, { children: _jsx(FlowView, { flow: flow, flowConfig: flowConfig }) }));
 };

package/dist/src/components/observability/events/trace-log-event.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogLevelDot } from '@/components/logs/log-level-dot';
+import { LevelDot } from '@motiadev/ui';
 export const TraceLogEvent = ({ event }) => {
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LogLevelDot, { level: event.level }), " ", event.message] }));
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LevelDot, { level: event.level }), " ", event.message] }));
 };

package/dist/src/components/observability/trace-tab-label.d.ts

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

package/dist/src/components/observability/trace-tab-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { GanttChart } from 'lucide-react';
+import { memo } from 'react';
+export const TracingTabLabel = memo(() => (_jsxs(_Fragment, { children: [_jsx(GanttChart, { "aria-hidden": "true" }), _jsx("span", { children: "Tracing" })] })));
+TracingTabLabel.displayName = 'TracingTabLabel';

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

@@ -1,7 +1,5 @@
 import { useAnalytics } from '@/lib/analytics';
-import { useLogListener } from '@/hooks/use-log-listener';
 export const RootMotia = ({ children }) => {
-    useLogListener();
     useAnalytics();
     return children;
 };

package/dist/src/components/states/state-tab-label.d.ts

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

package/dist/src/components/states/state-tab-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { File } from 'lucide-react';
+export const StatesTabLabel = memo(() => (_jsxs(_Fragment, { children: [_jsx(File, { "aria-hidden": "true" }), _jsx("span", { children: "States" })] })));
+StatesTabLabel.displayName = 'StatesTabLabel';

package/dist/src/index.css

@@ -1,4 +1,3 @@
-@import '@motiadev/plugin-endpoint/styles.css';
 @import '@motiadev/ui/styles.css';
 @import '@motiadev/ui/globals.css';
 

package/dist/src/lib/plugins.d.ts

@@ -0,0 +1 @@
+export declare const registerPluginTabs: () => void;

package/dist/src/lib/plugins.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { addAppTab, TabLocation } from '@/stores/use-app-tabs-store';
+import { DynamicIcon, dynamicIconImports } from 'lucide-react/dynamic';
+import { memo } from 'react';
+import { plugins } from 'virtual:motia-plugins';
+import { isValidTabLocation } from './utils';
+export const registerPluginTabs = () => {
+    if (!Array.isArray(plugins)) {
+        console.warn('[Motia] Invalid plugins configuration: expected array');
+        return;
+    }
+    plugins.forEach((plugin, index) => {
+        try {
+            if (!plugin.label) {
+                console.warn(`[Motia] Plugin at index ${index} missing label, skipping`);
+                return;
+            }
+            if (!plugin.component) {
+                console.warn(`[Motia] Plugin "${plugin.label}" missing component, skipping`);
+                return;
+            }
+            const position = plugin.position || 'top';
+            if (!isValidTabLocation(position)) {
+                console.warn(`[Motia] Plugin "${plugin.label}" has invalid position "${position}", defaulting to "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';
+                if (!hasIcon) {
+                    console.warn(`[Motia] Plugin "${plugin.label}" has invalid icon "${plugin.labelIcon}", defaulting to "toy-brick"`);
+                }
+                return (_jsxs(_Fragment, { children: [_jsx(DynamicIcon, { name: iconName }), _jsx("span", { children: plugin.label })] }));
+            });
+            PluginTabLabel.displayName = `${plugin.label}TabLabel`;
+            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`;
+            addAppTab(tabLocation, {
+                id: plugin.label,
+                tabLabel: PluginTabLabel,
+                content: PluginContent,
+            });
+        }
+        catch (error) {
+            console.error(`[Motia] Error registering plugin "${plugin.label}":`, error);
+        }
+    });
+};

package/dist/src/lib/utils.d.ts

@@ -1,2 +1,7 @@
+import { TabLocation } from '@/stores/use-app-tabs-store';
 export declare const formatDuration: (duration?: number) => string;
 export declare const formatTimestamp: (time: number) => string;
+export type ViewMode = 'project' | 'system';
+export declare const DEFAULT_VIEW_MODE: ViewMode;
+export declare const getViewModeFromURL: () => ViewMode;
+export declare const isValidTabLocation: (position: string) => position is TabLocation;

package/dist/src/lib/utils.js

@@ -1,3 +1,4 @@
+import { TabLocation } from '@/stores/use-app-tabs-store';
 export const formatDuration = (duration) => {
     if (duration === undefined || duration === null)
         return 'N/A';
@@ -13,3 +14,21 @@ export const formatTimestamp = (time) => {
     const date = new Date(Number(time));
     return `${date.toLocaleDateString('en-US', { year: undefined, month: 'short', day: '2-digit' })}, ${date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hourCycle: 'h24' })}.${date.getMilliseconds().toString().padStart(3, '0')}`;
 };
+export const DEFAULT_VIEW_MODE = 'system';
+export const getViewModeFromURL = () => {
+    try {
+        const url = new URL(window.location.href);
+        const viewMode = url.searchParams.get('view-mode');
+        if (viewMode === 'project' || viewMode === 'system') {
+            return viewMode;
+        }
+        return DEFAULT_VIEW_MODE;
+    }
+    catch (error) {
+        console.error('[Motia] Error parsing URL:', error);
+        return DEFAULT_VIEW_MODE;
+    }
+};
+export const isValidTabLocation = (position) => {
+    return Object.values(TabLocation).includes(position);
+};

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

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

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabLocation, useAppTabsStore } from './stores/use-app-tabs-store';
+import { APP_SIDEBAR_CONTAINER_ID, Panel } from '@motiadev/ui';
+import { useShallow } from 'zustand/react/shallow';
+const topTabs = (state) => state.tabs[TabLocation.TOP];
+export const ProjectViewMode = () => {
+    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) => {
+                        const Element = tab.content;
+                        const LabelComponent = tab.tabLabel;
+                        return {
+                            label: tab.id,
+                            labelComponent: _jsx(LabelComponent, {}),
+                            content: _jsx(Element, {}),
+                            'data-testid': tab.id,
+                        };
+                    }) }) }), _jsx("div", { id: APP_SIDEBAR_CONTAINER_ID })] }));
+};

package/dist/src/stores/use-app-tabs-store.d.ts

@@ -0,0 +1,18 @@
+export declare enum TabLocation {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export type AppTab = {
+    id: string;
+    tabLabel: React.ElementType;
+    content: React.ElementType;
+};
+export interface AppTabsState {
+    tabs: Record<TabLocation, AppTab[]>;
+    addTab: (position: TabLocation, tab: AppTab) => void;
+    setTabs: (position: TabLocation, tabs: AppTab[]) => void;
+    removeTab: (position: TabLocation, id: string) => void;
+}
+export declare const useAppTabsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AppTabsState>>;
+export declare const setAppTabs: (position: TabLocation, tabs: AppTab[]) => void;
+export declare const addAppTab: (position: TabLocation, tab: AppTab) => void;

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

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+export var TabLocation;
+(function (TabLocation) {
+    TabLocation["TOP"] = "top";
+    TabLocation["BOTTOM"] = "bottom";
+})(TabLocation || (TabLocation = {}));
+const defaultTabs = {
+    [TabLocation.TOP]: [],
+    [TabLocation.BOTTOM]: [],
+};
+export const useAppTabsStore = create((set) => ({
+    tabs: defaultTabs,
+    addTab: (position, tab) => set((state) => ({
+        tabs: {
+            ...state.tabs,
+            [position]: [...state.tabs[position], tab],
+        },
+    })),
+    setTabs: (position, tabs) => set((state) => ({
+        tabs: {
+            ...state.tabs,
+            [position]: tabs,
+        },
+    })),
+    removeTab: (position, id) => set((state) => ({
+        tabs: {
+            ...state.tabs,
+            [position]: state.tabs[position].filter((tab) => tab.id !== id),
+        },
+    })),
+}));
+export const setAppTabs = (position, tabs) => {
+    useAppTabsStore.getState().setTabs(position, tabs);
+};
+export const addAppTab = (position, tab) => {
+    useAppTabsStore.getState().addTab(position, tab);
+};

package/dist/src/stores/use-global-store.d.ts

@@ -7,8 +7,6 @@ type UseGlobalStore = {
     selectTraceId: (traceId?: string) => void;
     selectedStateId?: string;
     selectStateId: (stateId?: string) => void;
-    selectedLogId?: string;
-    selectLogId: (logId?: string) => void;
 };
 export declare const useGlobalStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<UseGlobalStore>, "setState" | "persist"> & {
     setState(partial: UseGlobalStore | Partial<UseGlobalStore> | ((state: UseGlobalStore) => UseGlobalStore | Partial<UseGlobalStore>), replace?: false | undefined): unknown;

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

@@ -12,8 +12,6 @@ export const useGlobalStore = create(persist((set) => ({
     selectTraceId: (traceId) => set(select(traceId, 'selectedTraceId')),
     selectedStateId: undefined,
     selectStateId: (stateId) => set(select(stateId, 'selectedStateId')),
-    selectedLogId: undefined,
-    selectLogId: (logId) => set(select(logId, 'selectedLogId')),
 }), {
     name: 'motia-global-storage',
     storage: createJSONStorage(() => localStorage),

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

@@ -1,11 +1,13 @@
-import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
 export const useTabsStore = create(persist((set) => ({
     tab: {
-        top: "flow",
-        bottom: "tracing",
+        top: 'flow',
+        bottom: 'tracing',
+    },
+    setTopTab: (tab) => {
+        set((state) => ({ tab: { ...state.tab, top: tab } }));
     },
-    setTopTab: (tab) => set((state) => ({ tab: { ...state.tab, top: tab } })),
     setBottomTab: (tab) => set((state) => ({ tab: { ...state.tab, bottom: tab } })),
 }), {
     name: 'motia-tabs-storage',

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

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

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

@@ -0,0 +1,36 @@
+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 { Header } from './components/header/header';
+import { analytics } from './lib/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) => {
+        analytics.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 })] }));
+};