chore(automation): enhance chat layout and add custom scrollbar styles

Author: Marfuen

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/chat.tsx

@@ -259,7 +259,7 @@ export function Chat({ className, orgId, taskId, taskName }: Props) {
       ) : (
         <div className="flex flex-col h-full relative z-20">
           <Conversation className="flex-1 min-h-0">
-            <ConversationContent className="space-y-4">
+            <ConversationContent className="space-y-4 chat-scrollbar">
               {messages.map((message) => (
                 <Message
                   key={message.id}

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/components/AutomationPageClient.tsx

@@ -7,7 +7,6 @@ import { useTaskAutomationStore } from '../lib/task-automation-store';
 import { ScriptInitializer } from '../script-initializer';
 import { AutomationTester } from './automation/AutomationTester';
 import { ChatUIMessage } from './chat/types';
-import { Horizontal } from './layout/panels';
 import { TabContent, TabItem } from './tabs';
 import { WorkflowVisualizerSimple as WorkflowVisualizer } from './workflow/workflow-visualizer-simple';
 
@@ -48,15 +47,27 @@ export function AutomationPageClient({ orgId, taskId, taskName }: Props) {
       </div>
 
       {/* Desktop layout: Chat on left, Workflow on right OR Chat full-screen */}
-      <div className="hidden flex-1 w-full min-h-0 overflow-hidden md:flex">
-        {scriptUrl || hasMessages ? (
-          <Horizontal
-            left={<Chat className="h-full" orgId={orgId} taskId={taskId} taskName={taskName} />}
-            right={<WorkflowVisualizer className="h-full" />}
-          />
-        ) : (
+      <div className="hidden flex-1 w-full min-h-0 overflow-hidden md:flex transition-all duration-500 ease-out">
+        <div
+          className={`transition-all duration-500 ease-out ${
+            scriptUrl || hasMessages ? 'w-1/2' : 'w-full'
+          }`}
+        >
           <Chat className="h-full w-full" orgId={orgId} taskId={taskId} taskName={taskName} />
-        )}
+        </div>
+
+        {/* Workflow panel - slides in from right */}
+        <div
+          className={`transition-all duration-500 ease-out overflow-hidden ${
+            scriptUrl || hasMessages ? 'w-1/2 opacity-100' : 'w-0 opacity-0'
+          }`}
+        >
+          {(scriptUrl || hasMessages) && (
+            <div className="w-full h-full ml-2">
+              <WorkflowVisualizer className="h-full" />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

apps/app/src/app/(app)/[orgId]/tasks/[taskId]/automation/components/workflow/components/UnifiedWorkflowCard.tsx

@@ -42,36 +42,6 @@ export function UnifiedWorkflowCard({ steps, title, onTest }: Props) {
   }, [steps.length]);
   return (
     <Card className="w-full min-w-md max-w-md mx-auto bg-background border border-border shadow-md rounded-2xl overflow-hidden flex flex-col flex-1 animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out">
-      <style jsx>{`
-        @keyframes reveal-step {
-          from {
-            opacity: 0;
-            transform: translateY(16px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-
-        @keyframes zoom-icon {
-          from {
-            transform: scale(0);
-          }
-          to {
-            transform: scale(1);
-          }
-        }
-
-        @keyframes expand-height {
-          from {
-            max-height: 0;
-          }
-          to {
-            max-height: var(--final-height);
-          }
-        }
-      `}</style>
       {/* Header with integration icons */}
       <CardHeader className="p-4">
         <div className="flex items-center gap-2 mb-4">

apps/app/src/styles/globals.css

@@ -50,3 +50,57 @@ body {
   background-color: hsl(var(--primary));
   color: white;
 }
+
+/* Custom thin scrollbar for chat */
+.chat-scrollbar::-webkit-scrollbar {
+  width: 3px;
+}
+
+.chat-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-scrollbar::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.15);
+  border-radius: 2px;
+}
+
+.chat-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.25);
+}
+
+/* Firefox scrollbar */
+.chat-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.15) transparent;
+}
+
+/* Workflow card animations */
+@keyframes reveal-step {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes zoom-icon {
+  from {
+    transform: scale(0);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes expand-height {
+  from {
+    max-height: 0;
+  }
+  to {
+    max-height: var(--final-height);
+  }
+}