@rozenite/vite-plugin 1.13.0 → 2.1.0

package/src/dev-host/App.tsx

@@ -1,34 +1,14 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type FormEvent,
-  type PointerEvent as ReactPointerEvent,
-} from 'react';
-import {
-  DEFAULT_COMMAND_WIDTH,
-  DEFAULT_DEVTOOLS_HEIGHT,
-  DETAILS_PANEL_WIDTH,
-  MIN_COMMAND_WIDTH,
-  MIN_DETAILS_WIDTH,
-  MIN_DEVTOOLS_HEIGHT,
-  MIN_IFRAME_HEIGHT,
-  MIN_NARROW_IFRAME_HEIGHT,
-  SPLITTER_SIZE,
-} from './constants.js';
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import { PluginHeader, PluginShell, Split, Tabs } from '@rozenite/ui';
 import type {
   DevHostFlowEntry,
   DevHostPanelEntry,
   DevHostPresetEntry,
   DevHostState,
   MessageEntry,
-  ResizeHandleId,
-  ResizeSession,
 } from './types.js';
 import { useFlowRunner } from './flow-runtime.js';
 import {
-  clamp,
   createMessageEntry,
   formatPayloadForCommandInput,
   getInitialPanel,
@@ -41,11 +21,7 @@ import {
 } from './components/MessageDetailsPane.js';
 import { MessageLogPane } from './components/MessageLogPane.js';
 import { PanelTabs } from './components/PanelTabs.js';
-import { ResizeHandle } from './components/ResizeHandle.js';
-import { ToggleGroup } from './components/ui/ToggleGroup.js';
-import { RozeniteLogo } from './components/icons.js';
-
-type CSSVariables = CSSProperties & Record<`--${string}`, string>;
+import './styles.css';
 
 type AppProps = DevHostState & {
   flows: DevHostFlowEntry[];
@@ -54,74 +30,67 @@ type AppProps = DevHostState & {
 
 type MobileDevtoolsTab = 'log' | 'actions';
 
-const getViewportMatch = () => {
-  return window.matchMedia('(max-width: 960px)').matches;
+const useNarrowViewport = () => {
+  const [isNarrow, setIsNarrow] = useState(() => window.matchMedia('(max-width: 960px)').matches);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(max-width: 960px)');
+    const handleChange = (event: MediaQueryListEvent) => {
+      setIsNarrow(event.matches);
+    };
+
+    setIsNarrow(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  return isNarrow;
 };
 
 export const App = ({ packageName, packageDescription, panels, flows, presets }: AppProps) => {
-  const [activePanel, setActivePanel] = useState<DevHostPanelEntry | null>(() => {
-    return getInitialPanel(panels);
-  });
+  const [activePanel, setActivePanel] = useState<DevHostPanelEntry | null>(() =>
+    getInitialPanel(panels),
+  );
   const [commandType, setCommandType] = useState('');
   const [commandPayload, setCommandPayload] = useState('');
   const [messages, setMessages] = useState<MessageEntry[]>([]);
   const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [devToolsHeight, setDevToolsHeight] = useState(DEFAULT_DEVTOOLS_HEIGHT);
-  const [commandWidth, setCommandWidth] = useState(DEFAULT_COMMAND_WIDTH);
-  const [detailsWidth, setDetailsWidth] = useState(DETAILS_PANEL_WIDTH);
-  const [activeResizeHandle, setActiveResizeHandle] = useState<ResizeHandleId | null>(null);
-  const [isNarrowViewport, setIsNarrowViewport] = useState(getViewportMatch);
   const [activeMobileTab, setActiveMobileTab] = useState<MobileDevtoolsTab>('log');
   const [iframeLoadNonce, setIframeLoadNonce] = useState(0);
-  const workspaceRef = useRef<HTMLElement | null>(null);
-  const logWorkspaceRef = useRef<HTMLDivElement | null>(null);
-  const devtoolsRef = useRef<HTMLElement | null>(null);
-  const resizeSessionRef = useRef<ResizeSession | null>(null);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const lastAutoRunLoadRef = useRef(0);
-  const { flowRuns, runFlow, stopFlow, hasRunningFlow, registerMessage, resetMessages } = useFlowRunner({
-    sendMessage: (type, payload) => {
-      iframeRef.current?.contentWindow?.postMessage(
-        {
-          pluginId: packageName,
-          type,
-          payload,
-        },
-        '*',
-      );
-
-      appendMessage({
-        direction: 'in',
-        type,
-        payload,
-      });
-    },
-  });
+  const isNarrowViewport = useNarrowViewport();
+  const { flowRuns, runFlow, stopFlow, hasRunningFlow, registerMessage, resetMessages } =
+    useFlowRunner({
+      sendMessage: (type, payload) => {
+        iframeRef.current?.contentWindow?.postMessage(
+          { pluginId: packageName, type, payload },
+          '*',
+        );
+        appendMessage({ direction: 'in', type, payload });
+      },
+    });
 
   const activeSource = activePanel?.source ?? '';
   const activeLabel = activePanel?.label ?? '';
-  const emptyState = panels.length === 0;
   const selectedMessage = messages.find((message) => message.id === selectedMessageId) ?? null;
+  const panelDescription = packageDescription.trim();
   const trimmedCommandType = commandType.trim();
   const trimmedCommandPayload = commandPayload.trim();
-  const hasCommandType = trimmedCommandType.length > 0;
-  const hasValidCommandPayload = (() => {
-    if (!trimmedCommandPayload) {
+  const canDispatch = (() => {
+    if (!trimmedCommandType || !trimmedCommandPayload) {
       return false;
     }
 
     try {
-      JSON.parse(commandPayload);
+      JSON.parse(trimmedCommandPayload);
       return true;
     } catch {
       return false;
     }
   })();
-  const canDispatch = hasCommandType && hasValidCommandPayload;
-  const panelDescription = packageDescription.trim();
-  const isDetailsVisible = isDetailsOpen && selectedMessage !== null;
-  const iframeMinHeight = isNarrowViewport ? MIN_NARROW_IFRAME_HEIGHT : MIN_IFRAME_HEIGHT;
 
   useEffect(() => {
     document.title = `${packageName} Dev Host`;
@@ -145,106 +114,6 @@ export const App = ({ packageName, packageDescription, panels, flows, presets }:
     });
   }, [flows, iframeLoadNonce, runFlow]);
 
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(max-width: 960px)');
-
-    const handleChange = (event: MediaQueryListEvent) => {
-      setIsNarrowViewport(event.matches);
-    };
-
-    setIsNarrowViewport(mediaQuery.matches);
-    mediaQuery.addEventListener('change', handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener('change', handleChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    const workspace = workspaceRef.current;
-    if (!workspace) {
-      return;
-    }
-
-    const bounds = workspace.getBoundingClientRect();
-    const maxHeight = Math.max(MIN_DEVTOOLS_HEIGHT, bounds.height - iframeMinHeight - 12);
-
-    setDevToolsHeight((current) => clamp(current, MIN_DEVTOOLS_HEIGHT, maxHeight));
-  }, [iframeMinHeight]);
-
-  useEffect(() => {
-    if (!isNarrowViewport) {
-      return;
-    }
-
-    setActiveMobileTab('log');
-  }, [isNarrowViewport]);
-
-  const selectPanel = (value: string) => {
-    const nextPanel = panels.find((panel) => panel.source === value);
-    if (!nextPanel) {
-      return;
-    }
-
-    setActivePanel(nextPanel);
-    const nextUrl = new URL(window.location.href);
-    nextUrl.searchParams.set('panel', nextPanel.label);
-    window.history.replaceState(null, '', nextUrl);
-  };
-
-  const appendMessage = (input: Omit<MessageEntry, 'id' | 'date'>) => {
-    const nextEntry = createMessageEntry(input);
-
-    registerMessage(nextEntry);
-    setMessages((current) => [nextEntry, ...current]);
-  };
-
-  useEffect(() => {
-    const handlePointerMove = (event: PointerEvent) => {
-      resizeSessionRef.current?.onMove(event);
-    };
-
-    const stopDragging = () => {
-      const session = resizeSessionRef.current;
-      if (!session) {
-        return;
-      }
-
-      if (session.element.hasPointerCapture(session.pointerId)) {
-        session.element.releasePointerCapture(session.pointerId);
-      }
-
-      resizeSessionRef.current = null;
-      setActiveResizeHandle(null);
-    };
-
-    window.addEventListener('pointermove', handlePointerMove);
-    window.addEventListener('pointerup', stopDragging);
-    window.addEventListener('pointercancel', stopDragging);
-
-    return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
-      window.removeEventListener('pointerup', stopDragging);
-      window.removeEventListener('pointercancel', stopDragging);
-    };
-  }, []);
-
-  const startResize = (
-    handleId: ResizeHandleId,
-    event: ReactPointerEvent<HTMLDivElement>,
-    onMove: (event: PointerEvent) => void,
-  ) => {
-    event.preventDefault();
-    event.currentTarget.setPointerCapture(event.pointerId);
-    resizeSessionRef.current = {
-      handleId,
-      pointerId: event.pointerId,
-      element: event.currentTarget,
-      onMove,
-    };
-    setActiveResizeHandle(handleId);
-  };
-
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       if (event.source !== iframeRef.current?.contentWindow) {
@@ -254,19 +123,14 @@ export const App = ({ packageName, packageDescription, panels, flows, presets }:
       if (
         typeof event.data !== 'object' ||
         event.data === null ||
-        !('type' in event.data) ||
         event.data.type !== 'rozenite-message' ||
-        !('payload' in event.data)
+        !('payload' in event.data) ||
+        !isPluginMessage(event.data.payload)
       ) {
         return;
       }
 
       const payload = event.data.payload;
-
-      if (!isPluginMessage(payload)) {
-        return;
-      }
-
       appendMessage({
         direction: 'out',
         type: payload.type,
@@ -275,20 +139,25 @@ export const App = ({ packageName, packageDescription, panels, flows, presets }:
     };
 
     window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
+    return () => window.removeEventListener('message', handleMessage);
   }, []);
 
-  const resetForm = () => {
-    setCommandType('');
-    setCommandPayload('');
+  const appendMessage = (input: Omit<MessageEntry, 'id' | 'date'>) => {
+    const nextEntry = createMessageEntry(input);
+    registerMessage(nextEntry);
+    setMessages((current) => [nextEntry, ...current]);
   };
 
-  const applyPreset = (preset: DevHostPresetEntry) => {
-    setCommandType(preset.type);
-    setCommandPayload(formatPayloadForCommandInput(preset.payload));
+  const selectPanel = (value: string) => {
+    const nextPanel = panels.find((panel) => panel.source === value);
+    if (!nextPanel) {
+      return;
+    }
+
+    setActivePanel(nextPanel);
+    const nextUrl = new URL(window.location.href);
+    nextUrl.searchParams.set('panel', nextPanel.label);
+    window.history.replaceState(null, '', nextUrl);
   };
 
   const clearMessages = () => {
@@ -299,269 +168,170 @@ export const App = ({ packageName, packageDescription, panels, flows, presets }:
     setActiveMobileTab('log');
   };
 
-  const resizeDevtoolsHeight = (event: PointerEvent) => {
-    const workspace = workspaceRef.current;
-    if (!workspace) {
-      return;
-    }
-
-    const bounds = workspace.getBoundingClientRect();
-    const nextHeight = bounds.bottom - event.clientY;
-    const maxHeight = Math.max(MIN_DEVTOOLS_HEIGHT, bounds.height - iframeMinHeight - 12);
-
-    setDevToolsHeight(clamp(nextHeight, MIN_DEVTOOLS_HEIGHT, maxHeight));
+  const resetForm = () => {
+    setCommandType('');
+    setCommandPayload('');
   };
 
-  const resizeCommandPane = (event: PointerEvent) => {
-    const devtools = devtoolsRef.current;
-    if (!devtools) {
-      return;
-    }
-
-    const bounds = devtools.getBoundingClientRect();
-    const nextWidth = bounds.right - event.clientX;
-    const maxWidth = Math.max(MIN_COMMAND_WIDTH, bounds.width - 280);
-
-    setCommandWidth(clamp(nextWidth, MIN_COMMAND_WIDTH, maxWidth));
+  const applyPreset = (preset: DevHostPresetEntry) => {
+    setCommandType(preset.type);
+    setCommandPayload(formatPayloadForCommandInput(preset.payload));
   };
 
-  const resizeDetailsPane = (event: PointerEvent) => {
-    const logWorkspace = logWorkspaceRef.current;
-    if (!logWorkspace || !isDetailsVisible || isNarrowViewport) {
+  const handleDispatch = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!canDispatch) {
       return;
     }
 
-    const bounds = logWorkspace.getBoundingClientRect();
-    const nextWidth = bounds.right - event.clientX;
-    const maxWidth = Math.max(MIN_DETAILS_WIDTH, bounds.width - 280 - SPLITTER_SIZE);
-
-    setDetailsWidth(clamp(nextWidth, MIN_DETAILS_WIDTH, maxWidth));
+    const payload = JSON.parse(trimmedCommandPayload) as unknown;
+    iframeRef.current?.contentWindow?.postMessage(
+      { pluginId: packageName, type: trimmedCommandType, payload },
+      '*',
+    );
+    appendMessage({
+      direction: 'in',
+      type: trimmedCommandType,
+      payload,
+    });
+    resetForm();
   };
 
   const handleMessageSelect = (messageId: string) => {
     setSelectedMessageId(messageId);
     setIsDetailsOpen(true);
-
     if (isNarrowViewport) {
       setActiveMobileTab('log');
     }
   };
 
-  const handleDetailsClose = () => {
+  const useMessage = (message: MessageEntry) => {
+    const nextValues = getDispatcherValuesFromMessage(message);
+    setCommandType(nextValues.commandType);
+    setCommandPayload(nextValues.commandPayload);
     setIsDetailsOpen(false);
-
     if (isNarrowViewport) {
-      setActiveMobileTab('log');
+      setActiveMobileTab('actions');
     }
   };
 
-  const handleMobileTabChange = (value: string) => {
-    const nextTab = value as MobileDevtoolsTab;
-    setActiveMobileTab(nextTab);
-  };
-
-  const handleDispatch = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!canDispatch) {
-      return;
-    }
-
-    const type = trimmedCommandType;
-
-    let payload: unknown;
-
-    try {
-      payload = JSON.parse(commandPayload);
-    } catch (error) {
-      window.alert(
-        error instanceof Error
-          ? `Payload must be valid JSON. ${error.message}`
-          : 'Payload must be valid JSON.',
-      );
-      return;
-    }
-
-    iframeRef.current?.contentWindow?.postMessage({ pluginId: packageName, type, payload }, '*');
+  const messageLog = (
+    <MessageLogPane
+      messages={messages}
+      onSelectMessage={handleMessageSelect}
+      onClearMessages={clearMessages}
+    />
+  );
 
-    appendMessage({ direction: 'in', type, payload });
+  const actions = (
+    <DispatchForm
+      commandType={commandType}
+      commandPayload={commandPayload}
+      flows={flows}
+      flowRuns={flowRuns}
+      hasRunningFlow={hasRunningFlow}
+      presets={presets}
+      canDispatch={canDispatch}
+      onRunFlow={runFlow}
+      onStopFlow={stopFlow}
+      onCommandTypeChange={setCommandType}
+      onCommandPayloadChange={setCommandPayload}
+      onApplyPreset={applyPreset}
+      onReset={resetForm}
+      onSubmit={handleDispatch}
+    />
+  );
 
-    resetForm();
-  };
+  const devtools = isNarrowViewport ? (
+    <Tabs
+      className="dev-host-mobile-tabs"
+      value={activeMobileTab}
+      onValueChange={(value) => setActiveMobileTab(value as MobileDevtoolsTab)}
+    >
+      <Tabs.List className="dev-host-mobile-tab-list" aria-label="DevTools sections">
+        <Tabs.Tab value="log">Log</Tabs.Tab>
+        <Tabs.Tab value="actions">Actions</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="log" className="dev-host-mobile-tab-panel">
+        {isDetailsOpen && selectedMessage ? (
+          <MessageDetailsPane
+            selectedMessage={selectedMessage}
+            onClose={() => setIsDetailsOpen(false)}
+            onUseMessage={useMessage}
+          />
+        ) : (
+          messageLog
+        )}
+      </Tabs.Panel>
+      <Tabs.Panel value="actions" className="dev-host-mobile-tab-panel">
+        {actions}
+      </Tabs.Panel>
+    </Tabs>
+  ) : (
+    <Split direction="horizontal" className="dev-host-devtools">
+      <Split.Pane minSize={35}>
+        {isDetailsOpen && selectedMessage ? (
+          <Split direction="horizontal">
+            <Split.Pane minSize={55}>{messageLog}</Split.Pane>
+            <Split.Handle />
+            <Split.Pane defaultSize={30} minSize={20}>
+              <MessageDetailsPane
+                selectedMessage={selectedMessage}
+                onClose={() => setIsDetailsOpen(false)}
+                onUseMessage={useMessage}
+              />
+            </Split.Pane>
+          </Split>
+        ) : (
+          messageLog
+        )}
+      </Split.Pane>
+      <Split.Handle />
+      <Split.Pane defaultSize={28} minSize={20}>
+        {actions}
+      </Split.Pane>
+    </Split>
+  );
 
   return (
-    <div className="rz-shell">
-      <header className="rz-topbar">
-        <div className="rz-topbar-brand" aria-label="Rozenite">
-          <RozeniteLogo />
+    <PluginShell className="dev-host">
+      <PluginHeader className="dev-host-header">
+        <div className="dev-host-header-title">
+          <PluginHeader.Title>Rozenite Dev Host</PluginHeader.Title>
+          <PluginHeader.Subtitle className="dev-host-header-subtitle" title={panelDescription}>
+            {packageName}
+          </PluginHeader.Subtitle>
         </div>
-
-        <div className="rz-topbar-panel-picker" title={panelDescription || undefined}>
+        <PluginHeader.Actions>
+          <PluginHeader.ThemeSwitcher />
           <PanelTabs panels={panels} activeSource={activeSource} onValueChange={selectPanel} />
-        </div>
-      </header>
-
-      <main
-        ref={workspaceRef}
-        className="rz-workspace"
-        style={{ '--rz-devtools-height': `${devToolsHeight}px` } as CSSVariables}
-      >
-        <section className="rz-card">
-          {emptyState ? (
-            <div className="rz-empty-state">No panels were defined in rozenite.config.ts.</div>
-          ) : (
+        </PluginHeader.Actions>
+      </PluginHeader>
+
+      <PluginShell.Body className="dev-host-body">
+        <Split direction="vertical" className="dev-host-main-split" autoSaveId="dev-host">
+          <Split.Pane defaultSize={64} minSize={30} className="dev-host-preview">
+            {panels.length === 0 ? (
+              <div className="flex h-full items-center justify-center p-8 text-center text-sm text-muted-foreground">
+                No panels were defined in rozenite.config.ts.
+              </div>
+            ) : (
               <iframe
                 key={activeSource}
                 ref={iframeRef}
                 title={activeLabel || 'Rozenite panel preview'}
                 src={activeSource}
-                className="rz-iframe"
-                data-resizing={activeResizeHandle === 'devtools-height'}
+                className="dev-host-iframe"
                 onLoad={() => setIframeLoadNonce((value) => value + 1)}
               />
-          )}
-        </section>
-
-        <ResizeHandle
-          className="rz-resize-handle"
-          isDragging={activeResizeHandle === 'devtools-height'}
-          orientation="horizontal"
-          label="Resize DevTools"
-          onPointerDown={(event) => startResize('devtools-height', event, resizeDevtoolsHeight)}
-        />
-
-        {isNarrowViewport ? (
-          <section ref={devtoolsRef} className="rz-devtools-mobile">
-            <div className="rz-devtools-mobile-tabs">
-              <div className="rz-devtools-mobile-toggle">
-                <ToggleGroup
-                  aria-label="DevTools sections"
-                  value={activeMobileTab}
-                  onChange={handleMobileTabChange}
-                  options={[
-                    { key: 'log', label: 'Log' },
-                    { key: 'actions', label: 'Actions' },
-                  ]}
-                />
-              </div>
-
-              <div className="rz-devtools-mobile-panel">
-                {activeMobileTab === 'log' ? (
-                  isDetailsVisible ? (
-                    <MessageDetailsPane
-                      selectedMessage={selectedMessage}
-                      isOpen={true}
-                      isNarrowViewport={true}
-                      activeResizeHandle={activeResizeHandle}
-                      onClose={handleDetailsClose}
-                      onUseMessage={(message) => {
-                        const nextValues = getDispatcherValuesFromMessage(message);
-                        setCommandType(nextValues.commandType);
-                        setCommandPayload(nextValues.commandPayload);
-                        setIsDetailsOpen(false);
-                        setActiveMobileTab('actions');
-                      }}
-                      onResizeStart={(event) => startResize('details-width', event, resizeDetailsPane)}
-                    />
-                  ) : (
-                    <MessageLogPane
-                      messages={messages}
-                      selectedMessageId={selectedMessageId}
-                      onSelectMessage={handleMessageSelect}
-                      onClearMessages={clearMessages}
-                    />
-                  )
-                ) : (
-                  <DispatchForm
-                    commandType={commandType}
-                    commandPayload={commandPayload}
-                    flows={flows}
-                    flowRuns={flowRuns}
-                    hasRunningFlow={hasRunningFlow}
-                    presets={presets}
-                    canDispatch={canDispatch}
-                    onRunFlow={runFlow}
-                    onStopFlow={stopFlow}
-                    onCommandTypeChange={setCommandType}
-                    onCommandPayloadChange={setCommandPayload}
-                    onApplyPreset={applyPreset}
-                    onReset={resetForm}
-                    onSubmit={handleDispatch}
-                  />
-                )}
-              </div>
-            </div>
-          </section>
-        ) : (
-          <section
-            ref={devtoolsRef}
-            className="rz-devtools"
-            style={
-              {
-                '--rz-command-width': `${commandWidth}px`,
-                '--rz-command-splitter-width': `${SPLITTER_SIZE}px`,
-              } as CSSVariables
-            }
-          >
-            <div
-              ref={logWorkspaceRef}
-              className="rz-log-workspace"
-              style={
-                {
-                  '--rz-details-width': isDetailsVisible ? `${detailsWidth}px` : '0px',
-                  '--rz-details-splitter-width': isDetailsVisible ? `${SPLITTER_SIZE}px` : '0px',
-                } as CSSVariables
-              }
-            >
-              <MessageLogPane
-                messages={messages}
-                selectedMessageId={selectedMessageId}
-                onSelectMessage={handleMessageSelect}
-                onClearMessages={clearMessages}
-              />
-
-              <MessageDetailsPane
-                selectedMessage={selectedMessage}
-                isOpen={isDetailsOpen}
-                isNarrowViewport={false}
-                activeResizeHandle={activeResizeHandle}
-                onClose={handleDetailsClose}
-                onUseMessage={(message) => {
-                  const nextValues = getDispatcherValuesFromMessage(message);
-                  setCommandType(nextValues.commandType);
-                  setCommandPayload(nextValues.commandPayload);
-                }}
-                onResizeStart={(event) => startResize('details-width', event, resizeDetailsPane)}
-              />
-            </div>
-
-            <ResizeHandle
-              className="rz-column-resize-handle"
-              isDragging={activeResizeHandle === 'command-width'}
-              orientation="vertical"
-              label="Resize command dispatcher"
-              onPointerDown={(event) => startResize('command-width', event, resizeCommandPane)}
-            />
-
-            <DispatchForm
-              commandType={commandType}
-              commandPayload={commandPayload}
-              flows={flows}
-              flowRuns={flowRuns}
-              hasRunningFlow={hasRunningFlow}
-              presets={presets}
-              canDispatch={canDispatch}
-              onRunFlow={runFlow}
-              onStopFlow={stopFlow}
-              onCommandTypeChange={setCommandType}
-              onCommandPayloadChange={setCommandPayload}
-              onApplyPreset={applyPreset}
-              onReset={resetForm}
-              onSubmit={handleDispatch}
-            />
-          </section>
-        )}
-      </main>
-    </div>
+            )}
+          </Split.Pane>
+          <Split.Handle />
+          <Split.Pane defaultSize={36} minSize={25}>
+            {devtools}
+          </Split.Pane>
+        </Split>
+      </PluginShell.Body>
+    </PluginShell>
   );
 };