Skip to content

improvement(ui): deploy modal, terminal #3167

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emir-karabeg merged 2 commits into from
Feb 8, 2026
Merged

improvement(ui): deploy modal, terminal #3167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a3ffbb
improvement(deploy-modal): error and warning ui
emir-karabeg Feb 8, 2026
befaab8
fix(ui): terminal top border render
emir-karabeg Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 0 additions & 15 deletions ...flowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -63,7 +62,6 @@ export function ApiDeploy({
deploymentInfo,
isLoading,
needsRedeployment,
apiDeployError,
getInputFormatExample,
selectedStreamingOutputs,
onSelectedStreamingOutputsChange,
Expand Down Expand Up @@ -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]' />
Expand All @@ -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)]'>
Expand Down
61 changes: 33 additions & 28 deletions .../[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[]>([])

Expand Down Expand Up @@ -225,8 +225,8 @@ export function DeployModal({
useEffect(() => {
if (open && workflowId) {
setActiveTab('general')
setApiDeployError(null)
setApiDeployWarnings([])
setDeployError(null)
setDeployWarnings([])
}
}, [open, workflowId])

Expand Down Expand Up @@ -281,32 +281,32 @@ 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])

const handlePromoteToLive = useCallback(
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) {
Expand All @@ -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])

Expand Down Expand Up @@ -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>
)}
Expand All @@ -515,7 +521,6 @@ export function DeployModal({
deploymentInfo={deploymentInfo}
isLoading={isLoadingDeploymentInfo}
needsRedeployment={needsRedeployment}
apiDeployError={apiDeployError}
getInputFormatExample={getInputFormatExample}
selectedStreamingOutputs={selectedStreamingOutputs}
onSelectedStreamingOutputsChange={setSelectedStreamingOutputs}
Expand Down
4 changes: 2 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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')}
Expand Down