improvement(ui): deploy modal, terminal (#3167)

* improvement(deploy-modal): error and warning ui

* fix(ui): terminal top border render

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx

@@ -28,7 +28,6 @@ interface ApiDeployProps {
   deploymentInfo: WorkflowDeploymentInfo | null
   isLoading: boolean
   needsRedeployment: boolean
-  apiDeployError: string | null
   getInputFormatExample: (includeStreaming?: boolean) => string
   selectedStreamingOutputs: string[]
   onSelectedStreamingOutputsChange: (outputs: string[]) => void
@@ -63,7 +62,6 @@ export function ApiDeploy({
   deploymentInfo,
   isLoading,
   needsRedeployment,
-  apiDeployError,
   getInputFormatExample,
   selectedStreamingOutputs,
   onSelectedStreamingOutputsChange,
@@ -419,12 +417,6 @@ console.log(limits);`
   if (isLoading || !info) {
     return (
       <div className='space-y-[16px]'>
-        {apiDeployError && (
-          <div className='rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
-            <div className='font-semibold'>API Deployment Error</div>
-            <div>{apiDeployError}</div>
-          </div>
-        )}
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[62px]' />
           <Skeleton className='h-[28px] w-[260px] rounded-[4px]' />
@@ -443,13 +435,6 @@ console.log(limits);`
 
   return (
     <div className='space-y-[16px]'>
-      {apiDeployError && (
-        <div className='rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
-          <div className='font-semibold'>API Deployment Error</div>
-          <div>{apiDeployError}</div>
-        </div>
-      )}
-
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
           <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx

@@ -94,8 +94,8 @@ export function DeployModal({
   const workflowWorkspaceId = workflowMetadata?.workspaceId ?? null
   const [activeTab, setActiveTab] = useState<TabView>('general')
   const [chatSubmitting, setChatSubmitting] = useState(false)
-  const [apiDeployError, setApiDeployError] = useState<string | null>(null)
-  const [apiDeployWarnings, setApiDeployWarnings] = useState<string[]>([])
+  const [deployError, setDeployError] = useState<string | null>(null)
+  const [deployWarnings, setDeployWarnings] = useState<string[]>([])
   const [isChatFormValid, setIsChatFormValid] = useState(false)
   const [selectedStreamingOutputs, setSelectedStreamingOutputs] = useState<string[]>([])
 
@@ -225,8 +225,8 @@ export function DeployModal({
   useEffect(() => {
     if (open && workflowId) {
       setActiveTab('general')
-      setApiDeployError(null)
-      setApiDeployWarnings([])
+      setDeployError(null)
+      setDeployWarnings([])
     }
   }, [open, workflowId])
 
@@ -281,19 +281,19 @@ export function DeployModal({
   const onDeploy = useCallback(async () => {
     if (!workflowId) return
 
-    setApiDeployError(null)
-    setApiDeployWarnings([])
+    setDeployError(null)
+    setDeployWarnings([])
 
     try {
       const result = await deployMutation.mutateAsync({ workflowId, deployChatEnabled: false })
       if (result.warnings && result.warnings.length > 0) {
-        setApiDeployWarnings(result.warnings)
+        setDeployWarnings(result.warnings)
       }
       await refetchDeployedState()
     } catch (error: unknown) {
       logger.error('Error deploying workflow:', { error })
       const errorMessage = error instanceof Error ? error.message : 'Failed to deploy workflow'
-      setApiDeployError(errorMessage)
+      setDeployError(errorMessage)
     }
   }, [workflowId, deployMutation, refetchDeployedState])
 
@@ -301,12 +301,12 @@ export function DeployModal({
     async (version: number) => {
       if (!workflowId) return
 
-      setApiDeployWarnings([])
+      setDeployWarnings([])
 
       try {
         const result = await activateVersionMutation.mutateAsync({ workflowId, version })
         if (result.warnings && result.warnings.length > 0) {
-          setApiDeployWarnings(result.warnings)
+          setDeployWarnings(result.warnings)
         }
         await refetchDeployedState()
       } catch (error) {
@@ -332,26 +332,26 @@ export function DeployModal({
   const handleRedeploy = useCallback(async () => {
     if (!workflowId) return
 
-    setApiDeployError(null)
-    setApiDeployWarnings([])
+    setDeployError(null)
+    setDeployWarnings([])
 
     try {
       const result = await deployMutation.mutateAsync({ workflowId, deployChatEnabled: false })
       if (result.warnings && result.warnings.length > 0) {
-        setApiDeployWarnings(result.warnings)
+        setDeployWarnings(result.warnings)
       }
       await refetchDeployedState()
     } catch (error: unknown) {
       logger.error('Error redeploying workflow:', { error })
       const errorMessage = error instanceof Error ? error.message : 'Failed to redeploy workflow'
-      setApiDeployError(errorMessage)
+      setDeployError(errorMessage)
     }
   }, [workflowId, deployMutation, refetchDeployedState])
 
   const handleCloseModal = useCallback(() => {
     setChatSubmitting(false)
-    setApiDeployError(null)
-    setApiDeployWarnings([])
+    setDeployError(null)
+    setDeployWarnings([])
     onOpenChange(false)
   }, [onOpenChange])
 
@@ -483,17 +483,23 @@ export function DeployModal({
             </ModalTabsList>
 
             <ModalBody className='min-h-0 flex-1'>
-              {apiDeployError && (
-                <div className='mb-3 rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
-                  <div className='font-semibold'>Deployment Error</div>
-                  <div>{apiDeployError}</div>
-                </div>
-              )}
-              {apiDeployWarnings.length > 0 && (
-                <div className='mb-3 rounded-[4px] border border-amber-500/30 bg-amber-500/10 p-3 text-amber-700 text-sm dark:text-amber-400'>
-                  <div className='font-semibold'>Deployment Warning</div>
-                  {apiDeployWarnings.map((warning, index) => (
-                    <div key={index}>{warning}</div>
+              {(deployError || deployWarnings.length > 0) && (
+                <div className='mb-3 flex flex-col gap-2'>
+                  {deployError && (
+                    <Badge variant='red' size='lg' dot className='max-w-full truncate'>
+                      {deployError}
+                    </Badge>
+                  )}
+                  {deployWarnings.map((warning, index) => (
+                    <Badge
+                      key={index}
+                      variant='amber'
+                      size='lg'
+                      dot
+                      className='max-w-full truncate'
+                    >
+                      {warning}
+                    </Badge>
                   ))}
                 </div>
               )}
@@ -515,7 +521,6 @@ export function DeployModal({
                   deploymentInfo={deploymentInfo}
                   isLoading={isLoadingDeploymentInfo}
                   needsRedeployment={needsRedeployment}
-                  apiDeployError={apiDeployError}
                   getInputFormatExample={getInputFormatExample}
                   selectedStreamingOutputs={selectedStreamingOutputs}
                   onSelectedStreamingOutputsChange={setSelectedStreamingOutputs}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx

@@ -1151,7 +1151,7 @@ export const Terminal = memo(function Terminal() {
       <aside
         ref={terminalRef}
         className={clsx(
-          'terminal-container fixed right-[var(--panel-width)] bottom-0 left-[var(--sidebar-width)] z-10 overflow-hidden bg-[var(--surface-1)]',
+          'terminal-container fixed right-[var(--panel-width)] bottom-0 left-[var(--sidebar-width)] z-10 overflow-hidden border-[var(--border)] border-t bg-[var(--surface-1)]',
           isToggling && 'transition-[height] duration-100 ease-out'
         )}
         onTransitionEnd={handleTransitionEnd}
@@ -1160,7 +1160,7 @@ export const Terminal = memo(function Terminal() {
         tabIndex={-1}
         aria-label='Terminal'
       >
-        <div className='relative flex h-full border-[var(--border)] border-t'>
+        <div className='relative flex h-full'>
           {/* Left Section - Logs */}
           <div
             className={clsx('flex flex-col', !selectedEntry && 'flex-1')}