@dilipod/ui 0.4.8 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",

package/src/components/workflow-viewer.tsx

@@ -21,7 +21,11 @@ import {
   Copy, 
   PencilSimple, 
   Eye, 
-  TreeStructure 
+  TreeStructure,
+  DownloadSimple,
+  ArrowSquareOut,
+  ClockCounterClockwise,
+  ArrowsClockwise,
 } from '@phosphor-icons/react'
 
 // Lazy load the flow visualization to avoid SSR issues
@@ -117,11 +121,25 @@ export interface WorkflowViewerProps {
     pushToN8n?: (workerId: string) => Promise<{ success: boolean; error?: string }>
     /** Pull workflow from n8n */
     pullFromN8n?: (workflowDefId: string) => Promise<{ success: boolean; error?: string; descriptionSync?: { needsUpdate: boolean; reason?: string } }>
+    /** Export workflow from Sim Studio (backup) */
+    exportFromSim?: (workflowDefId: string) => Promise<{ success: boolean; error?: string; backup?: { id: string; version: number; exportedAt: string }; workflow?: { blocksCount: number; edgesCount: number } }>
+    /** Get backup history for Sim workflow */
+    getSimBackups?: (workflowDefId: string) => Promise<{ success: boolean; error?: string; backups?: Array<{ id: string; version: number; versionLabel?: string; workflowName: string; isDeployed: boolean; exportedAt: string }> }>
+    /** Push workflow to Sim Studio */
+    pushToSim?: (workflowDefId: string) => Promise<{ success: boolean; error?: string; workflowId?: string }>
+    /** Pull workflow from Sim Studio */
+    pullFromSim?: (workflowDefId: string) => Promise<{ success: boolean; error?: string; descriptionSync?: { needsUpdate: boolean; reason?: string } }>
     /** Create new workflow */
     createWorkflow?: (data: { agent_id: string; name: string; platform: 'n8n' | 'sim'; n8n_workflow?: N8nWorkflow | null; sim_workflow?: SimWorkflow | null; is_active: boolean; is_global: boolean }) => Promise<{ success: boolean; error?: string; workflow?: { id: string } }>
     /** Load workflow template */
     loadTemplate?: (type: string, workerId: string) => Promise<{ success: boolean; error?: string; workflow?: N8nWorkflow | SimWorkflow }>
+    /** Switch workflow platform (e.g., n8n to Sim) */
+    switchPlatform?: (workflowDefId: string, targetPlatform: 'n8n' | 'sim') => Promise<{ success: boolean; error?: string; simWorkflowId?: string }>
   }
+  /** Sim workflow ID (for Sim Studio integration) */
+  simWorkflowId?: string | null
+  /** Sim Studio base URL for external links */
+  simStudioUrl?: string
   /** Custom loading component */
   loadingComponent?: ReactNode
   /** Format distance function for timestamps */
@@ -430,8 +448,10 @@ export function WorkflowViewer({
   apiHandlers,
   loadingComponent,
   formatDistance = defaultFormatDistance,
+  simWorkflowId,
+  simStudioUrl,
 }: WorkflowViewerProps) {
-  const [viewMode, setViewMode] = useState<'summary' | 'flow' | 'json' | 'edit' | 'create'>('summary')
+  const [viewMode, setViewMode] = useState<'summary' | 'flow' | 'json' | 'edit' | 'create' | 'backups'>('summary')
   const [editedJson, setEditedJson] = useState('')
   const [jsonError, setJsonError] = useState<string | null>(null)
   const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
@@ -440,6 +460,12 @@ export function WorkflowViewer({
   const [pulling, setPulling] = useState(false)
   const [creating, setCreating] = useState(false)
   const [selectedTemplate, setSelectedTemplate] = useState<WorkflowTemplate>('blank')
+  const [exporting, setExporting] = useState(false)
+  const [backups, setBackups] = useState<Array<{ id: string; version: number; versionLabel?: string; workflowName: string; isDeployed: boolean; exportedAt: string }>>([])
+  const [loadingBackups, setLoadingBackups] = useState(false)
+  const [pushingToSim, setPushingToSim] = useState(false)
+  const [pullingFromSim, setPullingFromSim] = useState(false)
+  const [switchingPlatform, setSwitchingPlatform] = useState(false)
   
   const [localPlatform, setLocalPlatform] = useState<'n8n' | 'sim'>(platform)
   const [localIsActive, setLocalIsActive] = useState(isActive ?? true)
@@ -624,6 +650,133 @@ export function WorkflowViewer({
     }
   }
 
+  async function exportFromSim() {
+    if (!workflowDefinitionId || !simWorkflowId || !apiHandlers?.exportFromSim) {
+      setMessage({ type: 'error', text: 'Cannot export - no Sim workflow ID or API handler' })
+      return
+    }
+
+    setExporting(true)
+    setMessage(null)
+
+    try {
+      const result = await apiHandlers.exportFromSim(workflowDefinitionId)
+
+      if (result.success) {
+        const blocksCount = result.workflow?.blocksCount || 0
+        const edgesCount = result.workflow?.edgesCount || 0
+        setMessage({ 
+          type: 'success', 
+          text: `Exported from Sim Studio (v${result.backup?.version || 1}, ${blocksCount} blocks, ${edgesCount} edges)`
+        })
+        // Refresh backups list if viewing
+        if (viewMode === 'backups') {
+          loadBackups()
+        }
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Failed to export from Sim Studio' })
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to export from Sim Studio' })
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  async function loadBackups() {
+    if (!workflowDefinitionId || !apiHandlers?.getSimBackups) {
+      return
+    }
+
+    setLoadingBackups(true)
+
+    try {
+      const result = await apiHandlers.getSimBackups(workflowDefinitionId)
+      if (result.success && result.backups) {
+        setBackups(result.backups)
+      }
+    } catch {
+      console.error('Failed to load backups')
+    } finally {
+      setLoadingBackups(false)
+    }
+  }
+
+  function showBackups() {
+    setViewMode('backups')
+    loadBackups()
+  }
+
+  function openInSimStudio() {
+    if (simStudioUrl && simWorkflowId) {
+      window.open(`${simStudioUrl}/w/${simWorkflowId}`, '_blank')
+    }
+  }
+
+  async function pushToSim() {
+    if (!workflowDefinitionId || !apiHandlers?.pushToSim) {
+      setMessage({ type: 'error', text: 'Cannot push - no workflow definition ID or API handler' })
+      return
+    }
+
+    setPushingToSim(true)
+    setMessage(null)
+
+    try {
+      const result = await apiHandlers.pushToSim(workflowDefinitionId)
+
+      if (result.success) {
+        setMessage({ 
+          type: 'success', 
+          text: result.workflowId 
+            ? `Pushed to Sim Studio (workflow: ${result.workflowId})`
+            : 'Pushed to Sim Studio successfully'
+        })
+        // Reload to show updated state
+        setTimeout(() => window.location.reload(), 1500)
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Failed to push to Sim Studio' })
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to push to Sim Studio' })
+    } finally {
+      setPushingToSim(false)
+    }
+  }
+
+  async function pullFromSim() {
+    if (!workflowDefinitionId || !simWorkflowId || !apiHandlers?.pullFromSim) {
+      setMessage({ type: 'error', text: 'Cannot pull - no Sim workflow ID or API handler' })
+      return
+    }
+
+    setPullingFromSim(true)
+    setMessage(null)
+
+    try {
+      const result = await apiHandlers.pullFromSim(workflowDefinitionId)
+
+      if (result.success) {
+        if (result.descriptionSync?.needsUpdate) {
+          setMessage({ 
+            type: 'success', 
+            text: `Pulled from Sim Studio. Note: ${result.descriptionSync.reason || 'Worker description may need updating.'}` 
+          })
+        } else {
+          setMessage({ type: 'success', text: 'Pulled from Sim Studio successfully' })
+        }
+        // Reload to show updated state
+        setTimeout(() => window.location.reload(), 1500)
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Failed to pull from Sim Studio' })
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to pull from Sim Studio' })
+    } finally {
+      setPullingFromSim(false)
+    }
+  }
+
   function startCreating() {
     if (internalWorkerType) {
       setSelectedTemplate(internalWorkerType as WorkflowTemplate)
@@ -677,6 +830,37 @@ export function WorkflowViewer({
     }
   }
 
+  async function switchPlatform(targetPlatform: 'n8n' | 'sim') {
+    if (!workflowDefinitionId || !apiHandlers?.switchPlatform) {
+      setMessage({ type: 'error', text: 'Cannot switch platform - no workflow definition ID or API handler' })
+      return
+    }
+
+    setSwitchingPlatform(true)
+    setMessage(null)
+
+    try {
+      const result = await apiHandlers.switchPlatform(workflowDefinitionId, targetPlatform)
+
+      if (result.success) {
+        setMessage({ 
+          type: 'success', 
+          text: targetPlatform === 'sim' 
+            ? `Switched to Sim Studio${result.simWorkflowId ? ` (workflow: ${result.simWorkflowId})` : ''}`
+            : 'Switched to n8n'
+        })
+        // Reload to show updated state
+        setTimeout(() => window.location.reload(), 1500)
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Failed to switch platform' })
+      }
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to switch platform' })
+    } finally {
+      setSwitchingPlatform(false)
+    }
+  }
+
   async function loadTemplate() {
     if (!workerId || !workerName || !apiHandlers?.loadTemplate) {
       setJsonError('Worker information or API handler required to generate template.')
@@ -904,16 +1088,22 @@ export function WorkflowViewer({
           {lastSynced && (
             <span>Synced {formatDistance(new Date(lastSynced), { addSuffix: true })}</span>
           )}
-          {webhookUrl && (
+        </div>
+
+        {/* Webhook URL display */}
+        {webhookUrl && (
+          <div className="flex items-center gap-2 p-2 bg-muted/50 rounded border border-border">
+            <WebhooksLogo size={14} className="text-muted-foreground flex-shrink-0" />
+            <code className="text-xs font-mono text-foreground truncate flex-1">{webhookUrl}</code>
             <button
               onClick={() => copyToClipboard(webhookUrl, 'Webhook URL copied')}
-              className="flex items-center gap-1 hover:text-foreground"
+              className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground flex-shrink-0"
             >
               <Copy size={12} />
-              Copy webhook
+              Copy
             </button>
-          )}
-        </div>
+          </div>
+        )}
 
         {(allowPlatformChange || allowStatusChange) && workflowDefinitionId && hasUnsavedChanges && apiHandlers?.saveSettings && (
           <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg space-y-3">
@@ -966,8 +1156,9 @@ export function WorkflowViewer({
           </Alert>
         )}
 
+        {/* n8n sync buttons */}
         {editable && workerId && platform === 'n8n' && viewMode !== 'edit' && apiHandlers?.pushToN8n && (
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             <Button onClick={pushToN8n} disabled={syncing} variant="primary" size="sm" icon={<CloudArrowUp size={16} />}>
               {syncing ? 'Pushing...' : 'Push to n8n'}
             </Button>
@@ -976,6 +1167,80 @@ export function WorkflowViewer({
                 {pulling ? 'Pulling...' : 'Pull from n8n'}
               </Button>
             )}
+            {/* Switch to Sim Studio button */}
+            {workflowDefinitionId && apiHandlers?.switchPlatform && (
+              <Button 
+                onClick={() => switchPlatform('sim')} 
+                disabled={switchingPlatform} 
+                variant="outline" 
+                size="sm" 
+                icon={<ArrowsClockwise size={16} />}
+                className="border-purple-300 text-purple-700 hover:bg-purple-50 hover:border-purple-400"
+              >
+                {switchingPlatform ? 'Switching...' : 'Switch to Sim Studio'}
+              </Button>
+            )}
+          </div>
+        )}
+
+        {/* Sim Studio sync buttons */}
+        {platform === 'sim' && viewMode !== 'edit' && (
+          <div className="flex flex-wrap gap-2">
+            {/* Push/Pull buttons (require workflow definition) */}
+            {editable && workflowDefinitionId && apiHandlers?.pushToSim && (
+              <Button 
+                onClick={pushToSim} 
+                disabled={pushingToSim} 
+                variant="primary" 
+                size="sm" 
+                icon={<CloudArrowUp size={16} />}
+              >
+                {pushingToSim ? 'Pushing...' : 'Push to Sim'}
+              </Button>
+            )}
+            {simWorkflowId && apiHandlers?.pullFromSim && (
+              <Button 
+                onClick={pullFromSim} 
+                disabled={pullingFromSim} 
+                variant="outline" 
+                size="sm" 
+                icon={<CloudArrowDown size={16} />}
+              >
+                {pullingFromSim ? 'Pulling...' : 'Pull from Sim'}
+              </Button>
+            )}
+            {/* Export/Backup buttons (require sim workflow id) */}
+            {simWorkflowId && apiHandlers?.exportFromSim && (
+              <Button 
+                onClick={exportFromSim} 
+                disabled={exporting} 
+                variant="outline" 
+                size="sm" 
+                icon={<DownloadSimple size={16} />}
+              >
+                {exporting ? 'Exporting...' : 'Export Backup'}
+              </Button>
+            )}
+            {simWorkflowId && apiHandlers?.getSimBackups && (
+              <Button 
+                onClick={showBackups} 
+                variant="outline" 
+                size="sm" 
+                icon={<ClockCounterClockwise size={16} />}
+              >
+                History
+              </Button>
+            )}
+            {simStudioUrl && simWorkflowId && (
+              <Button 
+                onClick={openInSimStudio} 
+                variant="outline" 
+                size="sm" 
+                icon={<ArrowSquareOut size={16} />}
+              >
+                Open in Sim
+              </Button>
+            )}
           </div>
         )}
 
@@ -998,17 +1263,20 @@ export function WorkflowViewer({
               </p>
             </div>
           ) : viewMode === 'json' ? (
-            <div className="relative">
-              <Button
-                onClick={() => copyToClipboard(JSON.stringify(workflow, null, 2), 'JSON copied')}
-                variant="outline"
-                size="sm"
-                className="absolute top-2 right-2 z-10"
-                icon={<Copy size={14} />}
-              >
-                Copy
-              </Button>
-              <pre className="p-4 bg-slate-900 text-slate-100 rounded-lg text-xs overflow-auto max-h-[500px] font-mono">
+            <div className="relative rounded-sm overflow-hidden border border-border">
+              <div className="flex items-center justify-between px-4 py-2 bg-[var(--black)] border-b border-gray-800">
+                <span className="text-xs font-medium text-gray-400">JSON</span>
+                <Button
+                  onClick={() => copyToClipboard(JSON.stringify(workflow, null, 2), 'JSON copied')}
+                  variant="outline"
+                  size="sm"
+                  className="h-7 bg-transparent border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white hover:border-gray-500"
+                  icon={<Copy size={12} />}
+                >
+                  Copy
+                </Button>
+              </div>
+              <pre className="p-4 bg-[var(--black)] text-gray-100 text-xs overflow-auto max-h-[500px] font-mono">
                 {JSON.stringify(workflow, null, 2)}
               </pre>
             </div>
@@ -1018,6 +1286,54 @@ export function WorkflowViewer({
                 <WorkflowFlow workflow={workflow as any} height={380} />
               </Suspense>
             )
+          ) : viewMode === 'backups' ? (
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <h4 className="text-sm font-medium">Backup History</h4>
+                <Button 
+                  onClick={() => setViewMode('summary')} 
+                  variant="outline" 
+                  size="sm"
+                >
+                  Back to Summary
+                </Button>
+              </div>
+              {loadingBackups ? (
+                <div className="py-8 text-center text-muted-foreground">Loading backups...</div>
+              ) : backups.length === 0 ? (
+                <div className="py-8 text-center text-muted-foreground">
+                  <ClockCounterClockwise size={32} className="mx-auto mb-2 opacity-50" />
+                  <p>No backups yet</p>
+                  <p className="text-xs mt-1">Click &quot;Export from Sim&quot; to create a backup</p>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {backups.map((backup) => (
+                    <div 
+                      key={backup.id}
+                      className="flex items-center justify-between p-3 bg-muted/50 rounded border border-border"
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className="flex items-center justify-center w-8 h-8 rounded bg-primary/10 text-primary text-sm font-semibold">
+                          v{backup.version}
+                        </div>
+                        <div>
+                          <p className="text-sm font-medium">
+                            {backup.versionLabel || backup.workflowName}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {formatDistance(new Date(backup.exportedAt), { addSuffix: true })}
+                            {backup.isDeployed && (
+                              <Badge variant="success" size="sm" className="ml-2">Deployed</Badge>
+                            )}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
           ) : (
             platform === 'n8n' 
               ? <N8nWorkflowSummary workflow={workflow as N8nWorkflow} showFlow={false} />