@rozenite/vite-plugin 1.13.0 → 2.1.0

package/src/dev-host/components/DispatchForm.tsx

@@ -1,13 +1,8 @@
+import { Button, Input, Select, Tabs, Textarea } from '@rozenite/ui';
+import { RotateCcw, Send } from 'lucide-react';
 import { useState, type FormEvent } from 'react';
 import type { DevHostFlowEntry, DevHostFlowRunState, DevHostPresetEntry } from '../types.js';
-import { ClearIcon, PresetsIcon, SendIcon } from './icons.js';
 import { FlowList } from './FlowList.js';
-import { DropdownMenu, type DropdownMenuItem } from './ui/DropdownMenu.js';
-import { IconButton } from './ui/IconButton.js';
-import { Input } from './ui/Input.js';
-import { ScrollArea } from './ui/ScrollArea.js';
-import { Textarea } from './ui/Textarea.js';
-import { ToggleGroup } from './ui/ToggleGroup.js';
 
 type DispatchFormProps = {
   commandType: string;
@@ -43,127 +38,108 @@ export const DispatchForm = ({
   onSubmit,
 }: DispatchFormProps) => {
   const [activeTab, setActiveTab] = useState<'dispatch' | 'flows'>('dispatch');
-  const presetItems: DropdownMenuItem<DevHostPresetEntry>[] = presets.map((preset) => ({
-    id: preset.displayName,
-    label: preset.displayName,
-    item: preset,
-  }));
-  const presetButton = (
-    <IconButton
-      type="button"
-      variant="default"
-      aria-label={presets.length > 0 ? 'Open presets' : 'No presets available'}
-      title={presets.length > 0 ? 'Presets' : 'No presets available'}
-      disabled={presets.length === 0}
-      overrides={{
-        BaseButton: {
-          style: {
-            borderRadius: '6px',
-            backgroundColor: 'rgba(255, 255, 255, 0.04)',
-            color: 'rgba(255, 255, 255, 0.88)',
-          },
-        },
-      }}
-    >
-      <PresetsIcon />
-    </IconButton>
-  );
 
   return (
-    <div className="rz-pane">
-      <div className="rz-sidebar">
-        <div className="rz-sidebar-header">
-          <div className="rz-sidebar-title">Actions</div>
-        </div>
+    <section className="dev-host-pane">
+      <header className="dev-host-pane-header">
+        <h2 className="dev-host-pane-title">Actions</h2>
+      </header>
 
-        <ScrollArea className="rz-sidebar-scroll">
-          <div className="rz-action-tabs rz-command-form">
-            <div className="rz-action-tabs-header">
-              <ToggleGroup
-                aria-label="Action modes"
-                value={activeTab}
-                onChange={(value) => setActiveTab(value as 'dispatch' | 'flows')}
-                options={[
-                  { key: 'dispatch', label: 'Dispatch' },
-                  { key: 'flows', label: 'Flows' },
-                ]}
-              />
-
-              {activeTab === 'dispatch'
-                ? presets.length > 0
-                  ? <DropdownMenu items={presetItems} onSelect={onApplyPreset}>{presetButton}</DropdownMenu>
-                  : presetButton
-                : null}
-            </div>
+      <Tabs
+        className="flex min-h-0 flex-1 flex-col"
+        value={activeTab}
+        onValueChange={(value) => setActiveTab(value as 'dispatch' | 'flows')}
+      >
+        <div className="dev-host-tabs-header">
+          <Tabs.List aria-label="Action modes">
+            <Tabs.Tab value="dispatch">Dispatch</Tabs.Tab>
+            <Tabs.Tab value="flows">Flows</Tabs.Tab>
+          </Tabs.List>
 
-            {activeTab === 'dispatch' ? (
-              <div className="rz-action-tab-panel">
-                <form className="rz-action-form" onSubmit={onSubmit}>
-                  <div className="rz-field">
-                    <label className="rz-label" htmlFor="command-type">
-                      Command
-                    </label>
-                    <Input
-                      id="command-type"
-                      value={commandType}
-                      onChange={(event) => onCommandTypeChange(event.currentTarget.value)}
-                      placeholder="get-snapshot"
-                      spellCheck={false}
-                    />
-                  </div>
+          {activeTab === 'dispatch' ? (
+            <Select
+              value={null}
+              onValueChange={(value) => {
+                const preset = presets.find((item) => item.name === value);
+                if (preset) {
+                  onApplyPreset(preset);
+                }
+              }}
+            >
+              <Select.Trigger
+                className="w-auto"
+                aria-label={presets.length > 0 ? 'Open presets' : 'No presets available'}
+                disabled={presets.length === 0}
+                title={presets.length > 0 ? 'Presets' : 'No presets available'}
+              >
+                <Select.Value>Presets</Select.Value>
+              </Select.Trigger>
+              <Select.Content align="end">
+                {presets.map((preset) => (
+                  <Select.Item key={preset.name} value={preset.name}>
+                    {preset.displayName}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select>
+          ) : null}
+        </div>
 
-                  <div className="rz-field">
-                    <label className="rz-label" htmlFor="command-payload">
-                      Payload
-                    </label>
-                    <Textarea
-                      id="command-payload"
-                      value={commandPayload}
-                      onChange={(event) => onCommandPayloadChange(event.currentTarget.value)}
-                      placeholder='{"example": true}'
-                      spellCheck={false}
-                    />
-                  </div>
+        <Tabs.Panel value="dispatch" className="dev-host-tab-panel">
+          <form className="dev-host-form" onSubmit={onSubmit}>
+            <label className="dev-host-field">
+              <span className="dev-host-label">Command</span>
+              <Input
+                value={commandType}
+                onChange={(event) => onCommandTypeChange(event.currentTarget.value)}
+                placeholder="get-snapshot"
+                spellCheck={false}
+              />
+            </label>
 
-                  <div className="rz-button-row">
-                    <IconButton
-                      type="button"
-                      variant="default"
-                      aria-label="Reset dispatcher"
-                      title="Reset dispatcher"
-                      onClick={onReset}
-                    >
-                      <ClearIcon />
-                    </IconButton>
+            <label className="dev-host-field">
+              <span className="dev-host-label">Payload</span>
+              <Textarea
+                value={commandPayload}
+                onChange={(event) => onCommandPayloadChange(event.currentTarget.value)}
+                placeholder='{"example": true}'
+                spellCheck={false}
+              />
+            </label>
 
-                    <IconButton
-                      type="submit"
-                      variant="primary"
-                      aria-label="Dispatch message"
-                      title="Dispatch message"
-                      disabled={!canDispatch}
-                    >
-                      <SendIcon />
-                    </IconButton>
-                  </div>
-                </form>
-              </div>
-            ) : null}
+            <div className="dev-host-actions">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={onReset}
+                aria-label="Reset dispatcher"
+                title="Reset dispatcher"
+              >
+                <RotateCcw />
+              </Button>
+              <Button
+                type="submit"
+                size="icon"
+                disabled={!canDispatch}
+                aria-label="Dispatch message"
+                title="Dispatch message"
+              >
+                <Send />
+              </Button>
+            </div>
+          </form>
+        </Tabs.Panel>
 
-            {activeTab === 'flows' ? (
-              <div className="rz-action-tab-panel">
-                <FlowList
-                  flows={flows}
-                  flowRuns={flowRuns}
-                  hasRunningFlow={hasRunningFlow}
-                  onRunFlow={onRunFlow}
-                  onStopFlow={onStopFlow}
-                />
-              </div>
-            ) : null}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
+        <Tabs.Panel value="flows" className="dev-host-tab-panel">
+          <FlowList
+            flows={flows}
+            flowRuns={flowRuns}
+            hasRunningFlow={hasRunningFlow}
+            onRunFlow={onRunFlow}
+            onStopFlow={onStopFlow}
+          />
+        </Tabs.Panel>
+      </Tabs>
+    </section>
   );
 };

package/src/dev-host/components/FlowList.tsx

@@ -1,6 +1,7 @@
+import { Badge, Button, EmptyState } from '@rozenite/ui';
+import { Play, Square } from 'lucide-react';
 import { formatPayloadForCommandInput } from '../utils.js';
 import type { DevHostFlowEntry, DevHostFlowRunState } from '../types.js';
-import { Button } from './ui/Button.js';
 
 type FlowListProps = {
   flows: DevHostFlowEntry[];
@@ -11,129 +12,96 @@ type FlowListProps = {
 };
 
 const getStatusLabel = (status: DevHostFlowRunState['status']) => {
-  if (status === 'running') {
-    return 'Running';
+  switch (status) {
+    case 'running':
+      return 'Running';
+    case 'succeeded':
+      return 'Completed';
+    case 'failed':
+      return 'Failed';
+    case 'aborted':
+      return 'Stopped';
   }
-
-  if (status === 'succeeded') {
-    return 'Completed';
-  }
-
-  if (status === 'failed') {
-    return 'Failed';
-  }
-
-  if (status === 'aborted') {
-    return 'Stopped';
-  }
-
-  return status;
 };
 
-export const FlowList = ({ flows, flowRuns, hasRunningFlow, onRunFlow, onStopFlow }: FlowListProps) => {
+export const FlowList = ({
+  flows,
+  flowRuns,
+  hasRunningFlow,
+  onRunFlow,
+  onStopFlow,
+}: FlowListProps) => {
   if (flows.length === 0) {
-    return <div className="rz-flow-empty-state">No flows were configured for this plugin.</div>;
+    return (
+      <EmptyState
+        className="h-full"
+        title="No flows configured"
+        description="Add flows to rozenite.config.ts to run them here."
+      />
+    );
   }
 
-  const hasExecutionState = flowRuns.length > 0;
-
   return (
-    <div className="rz-flow-panel">
-      <div className="rz-field">
-        <div className="rz-label">Available flows</div>
-
-        <div className="rz-flow-list">
-          {flows.map((flow, index) => {
-            const isActive = hasRunningFlow(flow.name);
+    <div className="dev-host-flow-list">
+      <div className="dev-host-field">
+        <span className="dev-host-label">Available flows</span>
+        <div className="grid gap-2">
+          {flows.map((flow) => {
+            const isRunning = hasRunningFlow(flow.name);
 
             return (
               <Button
-                key={`${flow.name}-${index}`}
-                type="button"
+                key={flow.name}
+                variant={isRunning ? 'secondary' : 'outline'}
+                className="dev-host-flow-button"
                 onClick={() => onRunFlow(flow)}
-                variant="default"
-                isSelected={isActive}
-                title={`Run ${flow.displayName}`}
-                overrides={{
-                  BaseButton: {
-                    style: {
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'space-between',
-                      gap: '12px',
-                      width: '100%',
-                      borderRadius: '8px',
-                      backgroundColor: isActive ? 'rgba(130, 50, 255, 0.14)' : 'rgba(255, 255, 255, 0.03)',
-                      borderColor: isActive ? 'rgba(130, 50, 255, 0.45)' : 'rgba(255, 255, 255, 0.08)',
-                      color: 'rgba(255, 255, 255, 0.88)',
-                      paddingTop: '10px',
-                      paddingRight: '12px',
-                      paddingBottom: '10px',
-                      paddingLeft: '12px',
-                      textAlign: 'left',
-                    },
-                  },
-                }}
+                aria-label={`Run ${flow.displayName}`}
               >
-                <span className="rz-flow-list-name">
+                <span className="dev-host-flow-name">
+                  <Play />
                   {flow.displayName}
-                  {flow.autoRun ? <span className="rz-flow-list-badge">Auto</span> : null}
+                  {flow.autoRun ? <Badge variant="outline">Auto</Badge> : null}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {isRunning ? 'Running' : 'Run'}
                 </span>
-                <span className="rz-flow-list-action">{isActive ? 'Running' : 'Run'}</span>
               </Button>
             );
           })}
         </div>
       </div>
 
-      {hasExecutionState ? (
-        <div className="rz-field">
-          <div className="rz-label">Flow runs</div>
-
-          <div className="rz-flow-runs">
-            {flowRuns.map((flowRun) => {
-              const isRunning = flowRun.status === 'running';
-
-              return (
-                <div key={flowRun.id} className="rz-flow-state" data-status={flowRun.status}>
-                  <div className="rz-flow-state-header">
-                    <div className="rz-flow-state-title">
-                      {flowRun.flowDisplayName}
-                      {flowRun.autoRun ? <span className="rz-flow-state-badge">Auto</span> : null}
-                    </div>
-
-                    {isRunning ? (
-                      <Button
-                        type="button"
-                        variant="pill"
-                        onClick={() => onStopFlow(flowRun.id)}
-                        overrides={{
-                          BaseButton: {
-                            style: {
-                              flexShrink: 0,
-                            },
-                          },
-                        }}
-                      >
-                        Stop
-                      </Button>
-                    ) : null}
-                  </div>
-
-                  <div className="rz-flow-state-status">{getStatusLabel(flowRun.status)}</div>
-
-                  {flowRun.error ? (
-                    <div className="rz-flow-state-error">{flowRun.error}</div>
-                  ) : null}
-
-                  {flowRun.result != null ? (
-                    <pre className="rz-flow-state-result">
-                      {formatPayloadForCommandInput(flowRun.result)}
-                    </pre>
+      {flowRuns.length > 0 ? (
+        <div className="dev-host-field">
+          <span className="dev-host-label">Flow runs</span>
+          <div className="dev-host-flow-runs">
+            {flowRuns.map((flowRun) => (
+              <div key={flowRun.id} className="dev-host-flow-state" data-status={flowRun.status}>
+                <div className="dev-host-flow-state-header">
+                  <span className="dev-host-flow-title">
+                    {flowRun.flowDisplayName}
+                    {flowRun.autoRun ? <Badge variant="outline">Auto</Badge> : null}
+                  </span>
+                  {flowRun.status === 'running' ? (
+                    <Button variant="ghost" size="compact" onClick={() => onStopFlow(flowRun.id)}>
+                      <Square />
+                      Stop
+                    </Button>
                   ) : null}
                 </div>
-              );
-            })}
+                <span className="text-xs text-muted-foreground">
+                  {getStatusLabel(flowRun.status)}
+                </span>
+                {flowRun.error ? (
+                  <div className="dev-host-flow-state-error">{flowRun.error}</div>
+                ) : null}
+                {flowRun.result != null ? (
+                  <pre className="dev-host-flow-state-result">
+                    {formatPayloadForCommandInput(flowRun.result)}
+                  </pre>
+                ) : null}
+              </div>
+            ))}
           </div>
         </div>
       ) : null}

package/src/dev-host/components/MessageDetailsPane.tsx

@@ -1,103 +1,70 @@
-import type { PointerEvent as ReactPointerEvent } from 'react';
-import type { MessageEntry, ResizeHandleId } from '../types.js';
+import { Button, JsonInspector, ScrollArea } from '@rozenite/ui';
+import { Send, X } from 'lucide-react';
+import type { MessageEntry } from '../types.js';
 import { formatMessageDate, formatPayloadForCommandInput } from '../utils.js';
-import { MessagePayloadDetail } from './MessagePayloadDetail.js';
-import { ResizeHandle } from './ResizeHandle.js';
-import { ScrollArea } from './ui/ScrollArea.js';
-import { SendIcon } from './icons.js';
-import { IconButton } from './ui/IconButton.js';
 
 type MessageDetailsPaneProps = {
-  selectedMessage: MessageEntry | null;
-  isOpen: boolean;
-  isNarrowViewport: boolean;
-  activeResizeHandle: ResizeHandleId | null;
+  selectedMessage: MessageEntry;
   onClose: () => void;
   onUseMessage: (message: MessageEntry) => void;
-  onResizeStart: (event: ReactPointerEvent<HTMLDivElement>) => void;
 };
 
 export const MessageDetailsPane = ({
   selectedMessage,
-  isOpen,
-  isNarrowViewport,
-  activeResizeHandle,
   onClose,
   onUseMessage,
-  onResizeStart,
 }: MessageDetailsPaneProps) => {
-  const isHidden = !isOpen || !selectedMessage;
-
   return (
-    <>
-      {!isNarrowViewport ? (
-        <ResizeHandle
-          className="rz-column-resize-handle"
-          isDragging={activeResizeHandle === 'details-width'}
-          isHidden={isHidden}
-          orientation="vertical"
-          label="Resize message details"
-          onPointerDown={onResizeStart}
-        />
-      ) : null}
-
-      <div className="rz-pane" data-hidden={isHidden} aria-hidden={isHidden}>
-        <div className="rz-sidebar">
-          <div className="rz-sidebar-header">
-            <div className="rz-sidebar-title">Message Details</div>
-            <div className="rz-header-actions">
-              <IconButton
-                type="button"
-                aria-label="Use message in dispatcher"
-                title="Use message in dispatcher"
-                onClick={() => {
-                  if (selectedMessage) {
-                    onUseMessage(selectedMessage);
-                  }
-                }}
-              >
-                <SendIcon />
-              </IconButton>
+    <section className="dev-host-pane">
+      <header className="dev-host-pane-header">
+        <h2 className="dev-host-pane-title">Message Details</h2>
+        <div className="dev-host-pane-actions">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onUseMessage(selectedMessage)}
+            aria-label="Use message in dispatcher"
+            title="Use message in dispatcher"
+          >
+            <Send />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            aria-label="Close message details"
+            title="Close message details"
+          >
+            <X />
+          </Button>
+        </div>
+      </header>
 
-              <IconButton
-                type="button"
-                aria-label="Close message details"
-                onClick={onClose}
-              >
-                ×
-              </IconButton>
+      <ScrollArea className="dev-host-scroll">
+        <div className="dev-host-details">
+          <div className="dev-host-detail-section">
+            <span className="dev-host-label">Date</span>
+            <div className="dev-host-detail-value">{formatMessageDate(selectedMessage.date)}</div>
+          </div>
+          <div className="dev-host-detail-section">
+            <span className="dev-host-label">Type</span>
+            <div className="dev-host-detail-value">{selectedMessage.type}</div>
+          </div>
+          <div className="dev-host-detail-section">
+            <span className="dev-host-label">Payload</span>
+            <div className="dev-host-detail-payload">
+              {typeof selectedMessage.payload === 'object' && selectedMessage.payload !== null ? (
+                <JsonInspector data={selectedMessage.payload} defaultExpandedDepth={2} />
+              ) : (
+                <pre className="m-0 whitespace-pre-wrap break-words">
+                  {formatPayloadForCommandInput(selectedMessage.payload)}
+                </pre>
+              )}
             </div>
           </div>
-
-          <ScrollArea className="rz-sidebar-scroll">
-            {selectedMessage ? (
-              <div className="rz-message-detail">
-                <div className="rz-detail-section">
-                  <div className="rz-label">Date</div>
-                  <div className="rz-detail-value rz-detail-mono">
-                    {formatMessageDate(selectedMessage.date)}
-                  </div>
-                </div>
-
-                <div className="rz-detail-section">
-                  <div className="rz-label">Type</div>
-                  <div className="rz-detail-value rz-detail-mono">{selectedMessage.type}</div>
-                </div>
-
-                <div className="rz-detail-section">
-                  <div className="rz-label">Payload</div>
-                  <div className="rz-detail-payload">
-                    <MessagePayloadDetail payload={selectedMessage.payload} />
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="rz-empty-state">Select a message to inspect its details.</div>
-            )}
-          </ScrollArea>
         </div>
-      </div>
-    </>
+      </ScrollArea>
+    </section>
   );
 };