fix(ui): deployment ui slight fixes; will need deeper cleaning

app/w/components/control-bar/components/notification-dropdown-item.tsx

@@ -37,12 +37,10 @@ export function NotificationDropdownItem({
   type,
   message,
   timestamp,
-  options,
 }: NotificationDropdownItemProps) {
-  const { removeNotification } = useNotificationStore()
+  const { showNotification } = useNotificationStore()
   const Icon = NotificationIcon[type]
   const [, forceUpdate] = useState({})
-  const [copied, setCopied] = useState(false)
 
   // Update the time display every minute
   useEffect(() => {
@@ -52,58 +50,18 @@ export function NotificationDropdownItem({
 
   const timeAgo = formatDistanceToNow(timestamp, { addSuffix: true })
 
-  const handleCopy = async () => {
-    if (options?.copyableContent) {
-      await navigator.clipboard.writeText(options.copyableContent)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    }
-  }
-
   return (
     <DropdownMenuItem
-      className="flex items-start gap-2 p-3 cursor-default"
-      onSelect={(e) => e.preventDefault()}
+      className="flex items-start gap-2 p-3 cursor-pointer"
+      onClick={() => showNotification(id)}
     >
-      <Icon className={cn('h-4 w-4 mt-1', NotificationColors[type])} />
-      <div className="flex flex-col gap-1 flex-1">
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2">
-            <span className="text-xs font-medium">
-              {type === 'error' ? 'Error' : type === 'api' ? 'API' : 'Console'}
-            </span>
-            <span className="text-xs text-muted-foreground">{timeAgo}</span>
-          </div>
-          {options?.isPersistent && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-4 w-4 hover:bg-transparent hover:text-destructive"
-              onClick={() => removeNotification(id)}
-            >
-              <X className="h-3 w-3" />
-            </Button>
-          )}
+      <Icon className={cn('h-4 w-4', NotificationColors[type])} />
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium">{type === 'error' ? 'Error' : 'Console'}</span>
+          <span className="text-xs text-muted-foreground">{timeAgo}</span>
         </div>
-        <p className="text-sm text-foreground whitespace-pre-wrap">{message}</p>
-        {options?.copyableContent && (
-          <div className="mt-2 relative">
-            <pre className="bg-muted rounded-md p-2 text-xs font-mono">
-              {options.copyableContent}
-            </pre>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute top-2 right-2 h-6 w-6 hover:bg-muted-foreground/20"
-              onClick={handleCopy}
-            >
-              <Copy className="h-3 w-3" />
-            </Button>
-            {copied && (
-              <span className="absolute top-2 right-9 text-xs text-muted-foreground">Copied!</span>
-            )}
-          </div>
-        )}
+        <p className="text-sm text-foreground">{message}</p>
       </div>
     </DropdownMenuItem>
   )

app/w/components/control-bar/control-bar.tsx

@@ -128,6 +128,7 @@ export function ControlBar() {
     checkStatus()
   }, [activeWorkflowId])
 
+  // Deploy the workflow
   const handleDeploy = async () => {
     if (!activeWorkflowId) return
     try {

app/w/components/notifications/notifications.tsx

@@ -87,16 +87,16 @@ export function NotificationList() {
               NotificationColors[notification.type]
             )}
           >
-            <div className="flex items-start gap-2 w-full">
+            <div className="flex items-start gap-4 py-1">
               <Icon
-                className={cn('h-4 w-4 mt-1', {
+                className={cn('h-4 w-4', {
                   '!text-red-500': notification.type === 'error',
                   'text-foreground': notification.type === 'console',
                   '!text-green-500': notification.type === 'api',
                 })}
               />
-              <div className="flex-1">
-                <AlertTitle className="flex items-center justify-between">
+              <div className="flex-1 space-y-2">
+                <AlertTitle className="flex items-center justify-between -mt-0.5">
                   <span>
                     {notification.type === 'error'
                       ? 'Error'
@@ -108,26 +108,28 @@ export function NotificationList() {
                     <Button
                       variant="ghost"
                       size="icon"
-                      className="h-4 w-4 hover:bg-transparent hover:text-destructive -mt-1"
+                      className="h-6 w-6 hover:bg-transparent hover:text-destructive"
                       onClick={() => hideNotification(notification.id)}
                     >
-                      <X className="h-3 w-3" />
+                      <X className="h-4 w-4" />
                     </Button>
                   )}
                 </AlertTitle>
-                <AlertDescription>
-                  <p className="mb-4">{notification.message}</p>
+                <AlertDescription className="space-y-4">
+                  <p>{notification.message}</p>
                   {notification.options?.sections?.map((section, index) => (
-                    <div key={index} className="mt-4">
-                      <div className="text-xs font-medium mb-2">{section.label}</div>
+                    <div key={index} className="space-y-1.5">
+                      <div className="text-xs font-medium text-muted-foreground">
+                        {section.label}
+                      </div>
                       <div
                         className="relative group cursor-pointer"
                         onClick={() => handleCopy(notification.id, index, section.content)}
                       >
-                        <pre className="bg-muted rounded-md p-2 pr-20 text-xs font-mono whitespace-pre-wrap transition-colors hover:bg-muted/80">
+                        <pre className="bg-muted rounded-md p-3 text-xs font-mono whitespace-pre-wrap transition-colors hover:bg-muted/80">
                           {section.content}
                         </pre>
-                        <div className="absolute top-2 right-2 text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">
+                        <div className="absolute top-3 right-3 text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">
                           {copiedMap[`${notification.id}-${index}`] ? 'Copied!' : 'Click to copy'}
                         </div>
                       </div>