@rozenite/vite-plugin 1.12.0 → 1.13.0

package/src/dev-host/App.tsx

@@ -0,0 +1,567 @@
+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 type {
+  DevHostFlowEntry,
+  DevHostPanelEntry,
+  DevHostPresetEntry,
+  DevHostState,
+  MessageEntry,
+  ResizeHandleId,
+  ResizeSession,
+} from './types.js';
+import { useFlowRunner } from './flow-runtime.js';
+import {
+  clamp,
+  createMessageEntry,
+  formatPayloadForCommandInput,
+  getInitialPanel,
+  isPluginMessage,
+} from './utils.js';
+import { DispatchForm } from './components/DispatchForm.js';
+import {
+  MessageDetailsPane,
+  getDispatcherValuesFromMessage,
+} 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>;
+
+type AppProps = DevHostState & {
+  flows: DevHostFlowEntry[];
+  presets: DevHostPresetEntry[];
+};
+
+type MobileDevtoolsTab = 'log' | 'actions';
+
+const getViewportMatch = () => {
+  return window.matchMedia('(max-width: 960px)').matches;
+};
+
+export const App = ({ packageName, packageDescription, panels, flows, presets }: AppProps) => {
+  const [activePanel, setActivePanel] = useState<DevHostPanelEntry | null>(() => {
+    return 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 activeSource = activePanel?.source ?? '';
+  const activeLabel = activePanel?.label ?? '';
+  const emptyState = panels.length === 0;
+  const selectedMessage = messages.find((message) => message.id === selectedMessageId) ?? null;
+  const trimmedCommandType = commandType.trim();
+  const trimmedCommandPayload = commandPayload.trim();
+  const hasCommandType = trimmedCommandType.length > 0;
+  const hasValidCommandPayload = (() => {
+    if (!trimmedCommandPayload) {
+      return false;
+    }
+
+    try {
+      JSON.parse(commandPayload);
+      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`;
+  }, [packageName]);
+
+  useEffect(() => {
+    if (iframeLoadNonce === 0) {
+      return;
+    }
+
+    if (lastAutoRunLoadRef.current === iframeLoadNonce) {
+      return;
+    }
+
+    lastAutoRunLoadRef.current = iframeLoadNonce;
+
+    flows.forEach((flow) => {
+      if (flow.autoRun) {
+        runFlow(flow, { autoRun: true });
+      }
+    });
+  }, [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) {
+        return;
+      }
+
+      if (
+        typeof event.data !== 'object' ||
+        event.data === null ||
+        !('type' in event.data) ||
+        event.data.type !== 'rozenite-message' ||
+        !('payload' in event.data)
+      ) {
+        return;
+      }
+
+      const payload = event.data.payload;
+
+      if (!isPluginMessage(payload)) {
+        return;
+      }
+
+      appendMessage({
+        direction: 'out',
+        type: payload.type,
+        payload: payload.payload,
+      });
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  const resetForm = () => {
+    setCommandType('');
+    setCommandPayload('');
+  };
+
+  const applyPreset = (preset: DevHostPresetEntry) => {
+    setCommandType(preset.type);
+    setCommandPayload(formatPayloadForCommandInput(preset.payload));
+  };
+
+  const clearMessages = () => {
+    resetMessages();
+    setMessages([]);
+    setSelectedMessageId(null);
+    setIsDetailsOpen(false);
+    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 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 resizeDetailsPane = (event: PointerEvent) => {
+    const logWorkspace = logWorkspaceRef.current;
+    if (!logWorkspace || !isDetailsVisible || isNarrowViewport) {
+      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 handleMessageSelect = (messageId: string) => {
+    setSelectedMessageId(messageId);
+    setIsDetailsOpen(true);
+
+    if (isNarrowViewport) {
+      setActiveMobileTab('log');
+    }
+  };
+
+  const handleDetailsClose = () => {
+    setIsDetailsOpen(false);
+
+    if (isNarrowViewport) {
+      setActiveMobileTab('log');
+    }
+  };
+
+  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 }, '*');
+
+    appendMessage({ direction: 'in', type, payload });
+
+    resetForm();
+  };
+
+  return (
+    <div className="rz-shell">
+      <header className="rz-topbar">
+        <div className="rz-topbar-brand" aria-label="Rozenite">
+          <RozeniteLogo />
+        </div>
+
+        <div className="rz-topbar-panel-picker" title={panelDescription || undefined}>
+          <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>
+          ) : (
+              <iframe
+                key={activeSource}
+                ref={iframeRef}
+                title={activeLabel || 'Rozenite panel preview'}
+                src={activeSource}
+                className="rz-iframe"
+                data-resizing={activeResizeHandle === 'devtools-height'}
+                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>
+  );
+};