From 9bee30aadeac7b87536dd7c7dec4ce01bed2573f Mon Sep 17 00:00:00 2001
From: Akhilesh Sudhakar <55130408+akhisud3195@users.noreply.github.com>
Date: Tue, 19 Aug 2025 21:35:03 +0800
Subject: [PATCH] Triggers revamp (#212)

* Simplify composio trigger name to be computed directly from Slug

* Show log and friendly name in composio trigger cards

* Standardize buttons in all trigger creation flows

* Update trigger cards look

* Remove extra ring around fields in trigger config form

* Add copilot welcome message

* Update copilot welcome message

* Fix @ mentions deletion glitch
---
 .../app/lib/components/input-field.tsx        |  8 +-
 .../app/lib/components/mentions_editor.tsx    | 64 +++++++++++----
 .../create-recurring-job-rule-form.tsx        | 10 +--
 .../components/recurring-job-rule-view.tsx    | 44 ++++-------
 .../components/recurring-job-rules-list.tsx   | 11 +--
 .../job-rules/components/triggers-tab.tsx     | 78 ++++++++-----------
 .../create-scheduled-job-rule-form.tsx        | 10 +--
 .../components/scheduled-job-rule-view.tsx    | 24 ++----
 .../components/scheduled-job-rules-list.tsx   | 11 +--
 .../components/ComposioTriggerTypesPanel.tsx  | 51 +++++++-----
 .../workflow/components/TriggerConfigForm.tsx |  9 ++-
 .../components/common/panel-common.tsx        | 42 +++++++++-
 12 files changed, 201 insertions(+), 161 deletions(-)

diff --git a/apps/rowboat/app/lib/components/input-field.tsx b/apps/rowboat/app/lib/components/input-field.tsx
index 42ef48a6..a2b96dac 100644
--- a/apps/rowboat/app/lib/components/input-field.tsx
+++ b/apps/rowboat/app/lib/components/input-field.tsx
@@ -251,7 +251,7 @@ function TextInputField({
                     <div className="w-full min-h-[300px]">
                         <MentionsEditor
                             atValues={mentionsAtValues}
-                            value={value}
+                            value={localValue}
                             placeholder={placeholder}
                             onValueChange={setLocalValue}
                             autoFocus
@@ -337,14 +337,14 @@ function TextInputField({
                     "whitespace-pre-wrap": multiline,
                     "flex items-center": !multiline,
                 })}>
-                    {value ? (
+                    {(mentions ? localValue : value) ? (
                         <>
                             {markdown ? (
                                 <div className={clsx("prose prose-sm max-w-none", {
                                     "max-h-[420px] overflow-y-auto": multiline
                                 })}>
                                     <MarkdownContent 
-                                        content={value} 
+                                        content={mentions ? localValue : value} 
                                         atValues={mentionsAtValues} 
                                         onMentionNavigate={handleMentionNavigate} 
                                     />
@@ -355,7 +355,7 @@ function TextInputField({
                                     "max-h-[420px] overflow-y-auto": multiline
                                 })}>
                                     <MarkdownContent 
-                                        content={value} 
+                                        content={mentions ? localValue : value} 
                                         atValues={mentionsAtValues} 
                                         onMentionNavigate={handleMentionNavigate} 
                                     />
diff --git a/apps/rowboat/app/lib/components/mentions_editor.tsx b/apps/rowboat/app/lib/components/mentions_editor.tsx
index 0f0bd72e..35b0aef3 100644
--- a/apps/rowboat/app/lib/components/mentions_editor.tsx
+++ b/apps/rowboat/app/lib/components/mentions_editor.tsx
@@ -97,13 +97,20 @@ export default function MentionEditor({
 }) {
     const containerRef = useRef<HTMLDivElement>(null);
     const quillRef = useRef<Quill | null>(null);
+    const atValuesRef = useRef<Match[]>(atValues);
+    const onValueChangeRef = useRef<typeof onValueChange>(onValueChange);
+    const externalValueRef = useRef<string>(value);
+    const isApplyingExternalRef = useRef<boolean>(false);
 
     function getMarkdown(): string {
         if (!quillRef.current) {
             return "";
         }
         // generate markdown representation of content
-        const markdown = quillRef.current.getContents().map((op) => {
+        const delta = quillRef.current.getContents() as unknown as Delta;
+        // Quill Delta has .ops
+        const ops: any[] = (delta as any).ops || [];
+        const markdown = ops.map((op) => {
             if (op.insert && typeof op.insert === 'object' && 'mention' in op.insert) {
                 const mentionOp = op.insert as { mention: Match };
                 return `[@${mentionOp.mention.id}](#mention)`;
@@ -120,6 +127,20 @@ export default function MentionEditor({
         navigator.clipboard.writeText(getMarkdown());
     }
 
+    // Keep refs up to date without re-initializing Quill
+    useEffect(() => {
+        atValuesRef.current = atValues;
+    }, [atValues]);
+
+    useEffect(() => {
+        onValueChangeRef.current = onValueChange;
+    }, [onValueChange]);
+
+    useEffect(() => {
+        externalValueRef.current = value;
+    }, [value]);
+
+    // Initialize Quill once
     useEffect(() => {
         if (!containerRef.current) {
             return;
@@ -140,15 +161,14 @@ export default function MentionEditor({
                         mentionDenotationChars: ["@"],
                         showDenotationChar: true,
                         source: async function (searchTerm: string, renderList: (values: Match[], searchTerm: string) => void) {
+                            const list = atValuesRef.current || [];
                             if (searchTerm.length === 0) {
-                                renderList(atValues, searchTerm);
+                                renderList(list, searchTerm);
                             } else {
-                                const matches = [];
-                                for (let i = 0; i < atValues.length; i++) {
-                                    if (
-                                        atValues[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1
-                                    ) {
-                                        matches.push(atValues[i]);
+                                const matches: Match[] = [];
+                                for (let i = 0; i < list.length; i++) {
+                                    if (list[i].value.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1) {
+                                        matches.push(list[i]);
                                     }
                                 }
                                 renderList(matches, searchTerm);
@@ -165,15 +185,18 @@ export default function MentionEditor({
             });
 
             // clear the quill contents
-            quill.setContents([]);
+            quill.setText('', Quill.sources.SILENT);
 
             // convert the markdown to parts
-            const parts = markdownToParts(value, atValues);
+            const parts = markdownToParts(externalValueRef.current, atValuesRef.current);
             insertPartsIntoQuill(quill, parts);
 
             quill.on(Quill.events.TEXT_CHANGE, (delta: Delta, oldDelta: Delta, source: string) => {
-                if (onValueChange) {
-                    onValueChange(getMarkdown());
+                if (isApplyingExternalRef.current) {
+                    return;
+                }
+                if (onValueChangeRef.current) {
+                    onValueChangeRef.current(getMarkdown());
                 }
             });
             quillRef.current = quill;
@@ -193,7 +216,22 @@ export default function MentionEditor({
                 quillRef.current.off(Quill.events.TEXT_CHANGE);
             }
         }
-    }, [atValues, onValueChange, placeholder, value, autoFocus]);
+        // Mount once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Sync external value into the editor without re-initializing
+    useEffect(() => {
+        if (!quillRef.current) return;
+        const current = getMarkdown();
+        if (value === current) return;
+        const quill = quillRef.current;
+        isApplyingExternalRef.current = true;
+        quill.setText('', Quill.sources.SILENT);
+        const parts = markdownToParts(value, atValuesRef.current);
+        insertPartsIntoQuill(quill, parts);
+        isApplyingExternalRef.current = false;
+    }, [value]);
 
     return <div className="relative">
         <button className="absolute top-2 right-2 z-10">
diff --git a/apps/rowboat/app/projects/[projectId]/job-rules/components/create-recurring-job-rule-form.tsx b/apps/rowboat/app/projects/[projectId]/job-rules/components/create-recurring-job-rule-form.tsx
index 465507c3..7f335d5b 100644
--- a/apps/rowboat/app/projects/[projectId]/job-rules/components/create-recurring-job-rule-form.tsx
+++ b/apps/rowboat/app/projects/[projectId]/job-rules/components/create-recurring-job-rule-form.tsx
@@ -103,8 +103,7 @@ export function CreateRecurringJobRuleForm({ projectId }: { projectId: string })
             title={
                 <div className="flex items-center gap-3">
                     <Link href={`/projects/${projectId}/job-rules`}>
-                        <Button variant="secondary" size="sm">
-                            <ArrowLeftIcon className="w-4 h-4 mr-2" />
+                        <Button variant="secondary" size="sm" startContent={<ArrowLeftIcon className="w-4 h-4" />} className="whitespace-nowrap">
                             Back
                         </Button>
                     </Link>
@@ -181,9 +180,9 @@ export function CreateRecurringJobRuleForm({ projectId }: { projectId: string })
                                     onClick={addMessage}
                                     variant="secondary"
                                     size="sm"
-                                    className="flex items-center gap-2"
+                                    startContent={<PlusIcon className="w-4 h-4" />}
+                                    className="whitespace-nowrap"
                                 >
-                                    <PlusIcon className="w-4 h-4" />
                                     Add Message
                                 </Button>
                             </div>
@@ -231,7 +230,8 @@ export function CreateRecurringJobRuleForm({ projectId }: { projectId: string })
                             <Button
                                 type="submit"
                                 disabled={loading}
-                                className="px-6 py-2"
+                                isLoading={loading}
+                                className="px-6 py-2 whitespace-nowrap"
                             >
                                 {loading ? "Creating..." : "Create Rule"}
                             </Button>
diff --git a/apps/rowboat/app/projects/[projectId]/job-rules/components/recurring-job-rule-view.tsx b/apps/rowboat/app/projects/[projectId]/job-rules/components/recurring-job-rule-view.tsx
index 18c672ff..890f13ff 100644
--- a/apps/rowboat/app/projects/[projectId]/job-rules/components/recurring-job-rule-view.tsx
+++ b/apps/rowboat/app/projects/[projectId]/job-rules/components/recurring-job-rule-view.tsx
@@ -134,8 +134,7 @@ export function RecurringJobRuleView({ projectId, ruleId }: { projectId: string;
                 title={
                     <div className="flex items-center gap-3">
                         <Link href={`/projects/${projectId}/job-rules`}>
-                            <Button variant="secondary" size="sm">
-                                <ArrowLeftIcon className="w-4 h-4 mr-2" />
+                            <Button variant="secondary" size="sm" startContent={<ArrowLeftIcon className="w-4 h-4" />} className="whitespace-nowrap">
                                 Back
                             </Button>
                         </Link>
@@ -149,31 +148,21 @@ export function RecurringJobRuleView({ projectId, ruleId }: { projectId: string;
                         <Button
                             onClick={handleToggleStatus}
                             disabled={updating}
-                            variant={rule.disabled ? "secondary" : "primary"}
+                            variant={rule.disabled ? "primary" : "secondary"}
                             size="sm"
-                            className="flex items-center gap-2"
+                            isLoading={updating}
+                            startContent={rule.disabled ? <PlayIcon className="w-4 h-4" /> : <PauseIcon className="w-4 h-4" />}
+                            className="whitespace-nowrap"
                         >
-                            {updating ? (
-                                <Spinner size="sm" />
-                            ) : rule.disabled ? (
-                                <>
-                                    <PlayIcon className="w-4 h-4" />
-                                    Enable
-                                </>
-                            ) : (
-                                <>
-                                    <PauseIcon className="w-4 h-4" />
-                                    Disable
-                                </>
-                            )}
+                            {rule.disabled ? 'Activate' : 'Pause'}
                         </Button>
                         <Button
                             onClick={() => setShowDeleteConfirm(true)}
                             variant="secondary"
                             size="sm"
-                            className="flex items-center gap-2 bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800"
+                            startContent={<Trash2Icon className="w-4 h-4" />}
+                            className="bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800 whitespace-nowrap"
                         >
-                            <Trash2Icon className="w-4 h-4" />
                             Delete
                         </Button>
                     </div>
@@ -297,6 +286,7 @@ export function RecurringJobRuleView({ projectId, ruleId }: { projectId: string;
                                 variant="secondary"
                                 onClick={() => setShowDeleteConfirm(false)}
                                 disabled={deleting}
+                                className="whitespace-nowrap"
                             >
                                 Cancel
                             </Button>
@@ -304,19 +294,11 @@ export function RecurringJobRuleView({ projectId, ruleId }: { projectId: string;
                                 variant="secondary"
                                 onClick={handleDelete}
                                 disabled={deleting}
-                                className="flex items-center gap-2 bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800"
+                                isLoading={deleting}
+                                startContent={<Trash2Icon className="w-4 h-4" />}
+                                className="bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800 whitespace-nowrap"
                             >
-                                {deleting ? (
-                                    <>
-                                        <Spinner size="sm" />
-                                        Deleting...
-                                    </>
-                                ) : (
-                                    <>
-                                        <Trash2Icon className="w-4 h-4" />
-                                        Delete
-                                    </>
-                                )}
+                                {deleting ? 'Deleting...' : 'Delete'}
                             </Button>
                         </div>
                     </div>
diff --git a/apps/rowboat/app/projects/[projectId]/job-rules/components/recurring-job-rules-list.tsx b/apps/rowboat/app/projects/[projectId]/job-rules/components/recurring-job-rules-list.tsx
index 008ae461..99e30593 100644
--- a/apps/rowboat/app/projects/[projectId]/job-rules/components/recurring-job-rules-list.tsx
+++ b/apps/rowboat/app/projects/[projectId]/job-rules/components/recurring-job-rules-list.tsx
@@ -220,15 +220,10 @@ export function RecurringJobRulesList({ projectId }: { projectId: string }) {
                                         disabled={loadingMore}
                                         variant="secondary"
                                         size="sm"
+                                        isLoading={loadingMore}
+                                        className="whitespace-nowrap"
                                     >
-                                        {loadingMore ? (
-                                            <>
-                                                <Spinner size="sm" />
-                                                Loading...
-                                            </>
-                                        ) : (
-                                            'Load More'
-                                        )}
+                                        {loadingMore ? 'Loading...' : 'Load More'}
                                     </Button>
                                 </div>
                             )}
diff --git a/apps/rowboat/app/projects/[projectId]/job-rules/components/triggers-tab.tsx b/apps/rowboat/app/projects/[projectId]/job-rules/components/triggers-tab.tsx
index a68594db..3fab04b3 100644
--- a/apps/rowboat/app/projects/[projectId]/job-rules/components/triggers-tab.tsx
+++ b/apps/rowboat/app/projects/[projectId]/job-rules/components/triggers-tab.tsx
@@ -4,12 +4,12 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Spinner, Link } from '@heroui/react';
 import { Button } from '@/components/ui/button';
 import { Panel } from '@/components/common/panel-common';
-import { Plus, Trash2, ZapIcon, ChevronDown, ChevronUp } from 'lucide-react';
+import { Plus, Trash2, ZapIcon, ChevronDown, ChevronUp, ArrowLeftIcon } from 'lucide-react';
 import { z } from 'zod';
 import { ComposioTriggerDeployment } from '@/src/entities/models/composio-trigger-deployment';
 import { ComposioTriggerType } from '@/src/entities/models/composio-trigger-type';
 import { isToday, isThisWeek, isThisMonth } from '@/lib/utils/date';
-import { listComposioTriggerDeployments, deleteComposioTriggerDeployment, createComposioTriggerDeployment, listComposioTriggerTypes } from '@/app/actions/composio.actions';
+import { listComposioTriggerDeployments, deleteComposioTriggerDeployment, createComposioTriggerDeployment } from '@/app/actions/composio.actions';
 import { SelectComposioToolkit } from '../../tools/components/SelectComposioToolkit';
 import { ComposioTriggerTypesPanel } from '../../workflow/components/ComposioTriggerTypesPanel';
 import { TriggerConfigForm } from '../../workflow/components/TriggerConfigForm';
@@ -20,6 +20,8 @@ import { fetchProject } from '@/app/actions/project.actions';
 
 type TriggerDeployment = z.infer<typeof ComposioTriggerDeployment>;
 
+// Removed friendly name computation; backend now provides friendly trigger name
+
 export function TriggersTab({ projectId }: { projectId: string }) {
   const [triggers, setTriggers] = useState<TriggerDeployment[]>([]);
   const [loading, setLoading] = useState(true);
@@ -31,7 +33,6 @@ export function TriggersTab({ projectId }: { projectId: string }) {
   const [isSubmittingTrigger, setIsSubmittingTrigger] = useState(false);
   const [deletingTrigger, setDeletingTrigger] = useState<string | null>(null);
   const [projectConfig, setProjectConfig] = useState<z.infer<typeof Project> | null>(null);
-  const [triggerTypeNames, setTriggerTypeNames] = useState<Record<string, string>>({});
   const [expandedTrigger, setExpandedTrigger] = useState<string | null>(null);
   const [cursor, setCursor] = useState<string | null>(null);
   const [hasMore, setHasMore] = useState<boolean>(false);
@@ -46,31 +47,6 @@ export function TriggersTab({ projectId }: { projectId: string }) {
     }
   }, [projectId]);
 
-  const loadTriggerTypeNames = useCallback(async () => {
-    try {
-      const names: Record<string, string> = {};
-      
-      // Get unique toolkit slugs from existing triggers
-      const uniqueToolkits = [...new Set(triggers.map(t => t.toolkitSlug))];
-      
-      // Fetch trigger types for each toolkit
-      for (const toolkitSlug of uniqueToolkits) {
-        try {
-          const response = await listComposioTriggerTypes(toolkitSlug);
-          response.items.forEach(triggerType => {
-            names[triggerType.slug] = triggerType.name;
-          });
-        } catch (err) {
-          console.error(`Error fetching trigger types for ${toolkitSlug}:`, err);
-        }
-      }
-      
-      setTriggerTypeNames(names);
-    } catch (err: any) {
-      console.error('Error loading trigger type names:', err);
-    }
-  }, [triggers]);
-
   const sections = useMemo(() => {
     const groups: Record<string, TriggerDeployment[]> = {
       Today: [],
@@ -225,10 +201,8 @@ export function TriggersTab({ projectId }: { projectId: string }) {
   }, [showCreateFlow, loadTriggers]);
 
   useEffect(() => {
-    if (triggers.length > 0) {
-      loadTriggerTypeNames();
-    }
-  }, [triggers, loadTriggerTypeNames]);
+    // No-op: trigger names are now derived from slug locally
+  }, [triggers]);
 
   const renderTriggerList = () => {
     if (loading) {
@@ -261,7 +235,7 @@ export function TriggersTab({ projectId }: { projectId: string }) {
             </div>
           }
           rightActions={
-            <Button variant="secondary" onClick={loadTriggers}>
+            <Button variant="secondary" onClick={loadTriggers} className="whitespace-nowrap">
               Try Again
             </Button>
           }
@@ -350,12 +324,25 @@ export function TriggersTab({ projectId }: { projectId: string }) {
                           <div className="flex items-start justify-between">
                             <div className="flex-1">
                               <a href={`/projects/${projectId}/job-rules/triggers/${trigger.id}`} className="block">
-                                <div className="flex items-center gap-3 mb-2">
-                                  <span className="text-sm font-medium text-green-600 dark:text-green-400">
-                                    Active
-                                  </span>
+                                <div className="flex items-center gap-3 mb-1">
+                                  {trigger.logo && (
+                                    <img
+                                      src={trigger.logo}
+                                      alt={`${trigger.toolkitSlug} logo`}
+                                      className="w-5 h-5 rounded"
+                                    />
+                                  )}
+                                  {trigger.toolkitSlug && (
+                                    <span className="text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400">
+                                      {trigger.toolkitSlug}
+                                    </span>
+                                  )}
+                                </div>
+                                <div className="h-2" />
+                                <div className="flex items-center gap-2 mb-2">
+                                  <span className="text-sm font-medium text-green-600 dark:text-green-400">Active</span>
                                   <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                                    {triggerTypeNames[trigger.triggerTypeSlug] || trigger.triggerTypeSlug}
+                                    {trigger.triggerTypeName}
                                   </span>
                                 </div>
                                 <div className="text-sm text-gray-500 dark:text-gray-400">
@@ -422,15 +409,10 @@ export function TriggersTab({ projectId }: { projectId: string }) {
                     disabled={loadingMore}
                     variant="secondary"
                     size="sm"
+                    isLoading={loadingMore}
+                    className="whitespace-nowrap"
                   >
-                    {loadingMore ? (
-                      <>
-                        <Spinner size="sm" />
-                        Loading...
-                      </>
-                    ) : (
-                      'Load More'
-                    )}
+                    {loadingMore ? 'Loading...' : 'Load More'}
                   </Button>
                 </div>
               )}
@@ -471,8 +453,10 @@ export function TriggersTab({ projectId }: { projectId: string }) {
             <Button
               variant="secondary"
               onClick={handleBackToList}
+              startContent={<ArrowLeftIcon className="w-4 h-4" />}
+              className="whitespace-nowrap"
             >
-              ← Back to Triggers
+              Back to Triggers
             </Button>
           </div>
 
diff --git a/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/create-scheduled-job-rule-form.tsx b/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/create-scheduled-job-rule-form.tsx
index 1fb4605e..f41aeb3c 100644
--- a/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/create-scheduled-job-rule-form.tsx
+++ b/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/create-scheduled-job-rule-form.tsx
@@ -106,8 +106,7 @@ export function CreateScheduledJobRuleForm({ projectId }: { projectId: string })
             title={
                 <div className="flex items-center gap-3">
                     <Link href={`/projects/${projectId}/job-rules`}>
-                        <Button variant="secondary" size="sm">
-                            <ArrowLeftIcon className="w-4 h-4 mr-2" />
+                        <Button variant="secondary" size="sm" startContent={<ArrowLeftIcon className="w-4 h-4" />} className="whitespace-nowrap">
                             Back
                         </Button>
                     </Link>
@@ -147,9 +146,9 @@ export function CreateScheduledJobRuleForm({ projectId }: { projectId: string })
                                     onClick={addMessage}
                                     variant="secondary"
                                     size="sm"
-                                    className="flex items-center gap-2"
+                                    startContent={<PlusIcon className="w-4 h-4" />}
+                                    className="whitespace-nowrap"
                                 >
-                                    <PlusIcon className="w-4 h-4" />
                                     Add Message
                                 </Button>
                             </div>
@@ -197,7 +196,8 @@ export function CreateScheduledJobRuleForm({ projectId }: { projectId: string })
                             <Button
                                 type="submit"
                                 disabled={loading}
-                                className="px-6 py-2"
+                                isLoading={loading}
+                                className="px-6 py-2 whitespace-nowrap"
                             >
                                 {loading ? "Creating..." : "Create Rule"}
                             </Button>
diff --git a/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/scheduled-job-rule-view.tsx b/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/scheduled-job-rule-view.tsx
index 73c07ae3..445a39de 100644
--- a/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/scheduled-job-rule-view.tsx
+++ b/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/scheduled-job-rule-view.tsx
@@ -81,8 +81,7 @@ export function ScheduledJobRuleView({ projectId, ruleId }: { projectId: string;
                 title={
                     <div className="flex items-center gap-3">
                         <Link href={`/projects/${projectId}/job-rules`}>
-                            <Button variant="secondary" size="sm">
-                                <ArrowLeftIcon className="w-4 h-4 mr-2" />
+                            <Button variant="secondary" size="sm" startContent={<ArrowLeftIcon className="w-4 h-4" />} className="whitespace-nowrap">
                                 Back
                             </Button>
                         </Link>
@@ -97,9 +96,9 @@ export function ScheduledJobRuleView({ projectId, ruleId }: { projectId: string;
                             onClick={() => setShowDeleteConfirm(true)}
                             variant="secondary"
                             size="sm"
-                            className="flex items-center gap-2 bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800"
+                            startContent={<Trash2Icon className="w-4 h-4" />}
+                            className="bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800 whitespace-nowrap"
                         >
-                            <Trash2Icon className="w-4 h-4" />
                             Delete
                         </Button>
                     </div>
@@ -204,6 +203,7 @@ export function ScheduledJobRuleView({ projectId, ruleId }: { projectId: string;
                                 variant="secondary"
                                 onClick={() => setShowDeleteConfirm(false)}
                                 disabled={deleting}
+                                className="whitespace-nowrap"
                             >
                                 Cancel
                             </Button>
@@ -211,19 +211,11 @@ export function ScheduledJobRuleView({ projectId, ruleId }: { projectId: string;
                                 variant="secondary"
                                 onClick={handleDelete}
                                 disabled={deleting}
-                                className="flex items-center gap-2 bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800"
+                                isLoading={deleting}
+                                startContent={<Trash2Icon className="w-4 h-4" />}
+                                className="bg-red-50 hover:bg-red-100 text-red-700 dark:bg-red-950 dark:hover:bg-red-900 dark:text-red-400 border border-red-200 dark:border-red-800 whitespace-nowrap"
                             >
-                                {deleting ? (
-                                    <>
-                                        <Spinner size="sm" />
-                                        Deleting...
-                                    </>
-                                ) : (
-                                    <>
-                                        <Trash2Icon className="w-4 h-4" />
-                                        Delete
-                                    </>
-                                )}
+                                {deleting ? 'Deleting...' : 'Delete'}
                             </Button>
                         </div>
                     </div>
diff --git a/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/scheduled-job-rules-list.tsx b/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/scheduled-job-rules-list.tsx
index da980452..69c1d33f 100644
--- a/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/scheduled-job-rules-list.tsx
+++ b/apps/rowboat/app/projects/[projectId]/job-rules/scheduled/components/scheduled-job-rules-list.tsx
@@ -190,15 +190,10 @@ export function ScheduledJobRulesList({ projectId }: { projectId: string }) {
                                         disabled={loadingMore}
                                         variant="secondary"
                                         size="sm"
+                                        isLoading={loadingMore}
+                                        className="whitespace-nowrap"
                                     >
-                                        {loadingMore ? (
-                                            <>
-                                                <Spinner size="sm" />
-                                                Loading...
-                                            </>
-                                        ) : (
-                                            'Load More'
-                                        )}
+                                        {loadingMore ? 'Loading...' : 'Load More'}
                                     </Button>
                                 </div>
                             )}
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/ComposioTriggerTypesPanel.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/ComposioTriggerTypesPanel.tsx
index 3e906be7..41426bf5 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/components/ComposioTriggerTypesPanel.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/components/ComposioTriggerTypesPanel.tsx
@@ -1,12 +1,13 @@
 'use client';
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { Button, Card, CardBody, CardHeader, Spinner } from '@heroui/react';
+import { Button, Card, CardBody, Spinner } from '@heroui/react';
 import { ChevronLeft, ChevronRight, ZapIcon, ArrowLeft } from 'lucide-react';
 import { z } from 'zod';
 import { ComposioTriggerType } from '@/src/entities/models/composio-trigger-type';
 import { listComposioTriggerTypes } from '@/app/actions/composio.actions';
 import { ZToolkit } from "@/src/application/lib/composio/types";
+import { PictureImg } from '@/components/ui/picture-img';
 
 interface ComposioTriggerTypesPanelProps {
   toolkit: z.infer<typeof ZToolkit>;
@@ -151,32 +152,42 @@ export function ComposioTriggerTypesPanel({
         </div>
       ) : (
         <div className="space-y-4">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
             {triggerTypes.map((triggerType) => (
-              <Card 
-                key={triggerType.slug} 
-                className="cursor-pointer hover:shadow-md transition-shadow"
+              <Card
+                key={triggerType.slug}
+                className="group p-6 rounded-xl transition-all duration-200 cursor-pointer bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-md dark:shadow-gray-900/20 hover:shadow-lg dark:hover:shadow-gray-900/30 hover:border-blue-300 dark:hover:border-blue-600 hover:bg-gray-50/50 hover:-translate-y-1 min-h-[200px] flex flex-col"
                 isPressable
                 onPress={() => handleTriggerTypeSelect(triggerType)}
               >
-                <CardHeader className="flex gap-3">
-                  <div className="flex items-center justify-center w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
-                    <ZapIcon className="w-6 h-6 text-blue-600 dark:text-blue-400" />
-                  </div>
-                  <div className="flex flex-col">
-                    <p className="text-base font-semibold text-gray-900 dark:text-gray-100">
+                <div className="flex items-start gap-3 mb-2">
+                  {toolkit.meta?.logo ? (
+                    <PictureImg
+                      src={toolkit.meta.logo}
+                      alt={`${toolkit.name} logo`}
+                      className="w-8 h-8 rounded-md object-cover flex-shrink-0"
+                    />
+                  ) : (
+                    <div className="flex items-center justify-center w-8 h-8 bg-blue-100 dark:bg-blue-900/30 rounded-md">
+                      <ZapIcon className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                    </div>
+                  )}
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 truncate text-left">
                       {triggerType.name}
+                    </h3>
+                  </div>
+                </div>
+                <CardBody className="pt-0 px-0 flex-1 flex flex-col">
+                  <div className="flex-1">
+                    <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-3">
+                      {triggerType.description}
                     </p>
                   </div>
-                </CardHeader>
-                <CardBody className="pt-0">
-                  <p className="text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
-                    {triggerType.description}
-                  </p>
-                  <div className="mt-3 flex justify-end">
-                    <Button 
-                      size="sm" 
-                      variant="flat" 
+                  <div className="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700 flex justify-end">
+                    <Button
+                      size="sm"
+                      variant="flat"
                       color="primary"
                       onPress={() => handleTriggerTypeSelect(triggerType)}
                     >
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/components/TriggerConfigForm.tsx b/apps/rowboat/app/projects/[projectId]/workflow/components/TriggerConfigForm.tsx
index 22f7dba6..29a32528 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/components/TriggerConfigForm.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/components/TriggerConfigForm.tsx
@@ -199,7 +199,9 @@ export function TriggerConfigForm({
                         onChange={(e) => handleFieldChange(fieldName, e.target.value)}
                         className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md
                           bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
-                          focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+                          focus:outline-none focus:ring-0 focus:ring-transparent focus:ring-offset-0
+                          focus:border-blue-500 dark:focus:border-blue-400
+                          transition-all duration-200"
                         required={isRequired}
                       >
                         <option value="">Select {property.title || fieldName}</option>
@@ -234,6 +236,11 @@ export function TriggerConfigForm({
                     description={property.description}
                     isInvalid={!!fieldError}
                     errorMessage={fieldError}
+                    classNames={{
+                      base: "ring-0 !ring-0 outline-none !outline-none shadow-none !shadow-none focus:ring-0 !focus:ring-0 focus:ring-transparent !focus:ring-transparent focus-visible:ring-0 !focus-visible:ring-0 focus-visible:outline-none !focus-visible:outline-none focus-within:ring-0 !focus-within:ring-0 focus-within:shadow-none !focus-within:shadow-none",
+                      mainWrapper: "ring-0 !ring-0 outline-none !outline-none shadow-none !shadow-none focus:ring-0 !focus:ring-0 focus:ring-transparent !focus:ring-transparent focus-visible:ring-0 !focus-visible:ring-0 focus-visible:outline-none !focus-visible:outline-none focus-within:ring-0 !focus-within:ring-0 focus-within:shadow-none !focus-within:shadow-none",
+                      inputWrapper: "ring-0 !ring-0 outline-none !outline-none shadow-none !shadow-none focus:ring-0 !focus:ring-0 focus:ring-transparent !focus:ring-transparent focus-visible:ring-0 !focus-visible:ring-0 focus-visible:outline-none !focus-visible:outline-none focus-within:ring-0 !focus-within:ring-0 focus-within:shadow-none !focus-within:shadow-none data-[focus=true]:ring-0 group-data-[focus=true]:ring-0 data-[focus=true]:shadow-none group-data-[focus=true]:shadow-none",
+                    }}
                   />
                 );
               })}
diff --git a/apps/rowboat/components/common/panel-common.tsx b/apps/rowboat/components/common/panel-common.tsx
index 87228150..1ceb8208 100644
--- a/apps/rowboat/components/common/panel-common.tsx
+++ b/apps/rowboat/components/common/panel-common.tsx
@@ -82,11 +82,47 @@ export function Panel({
         data-tour-target={tourTarget}
     >
         {variant === 'copilot' && showWelcome && (
-            <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none -mt-16">
+            <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none -mt-8">
                 {/* Replace Sparkles icon with mascot image */}
-                <Image src={mascot} alt="Rowboat Mascot" width={192} height={192} className="object-contain mb-2 animate-float" />
+                <Image src={mascot} alt="Rowboat Mascot" width={192} height={192} className="object-contain mb-4 animate-float" />
+                
+                {/* Welcome/Intro Section */}
+                <div className="text-center max-w-md px-6 mb-4">
+                                         <h3 className="text-xl font-semibold text-zinc-700 dark:text-zinc-300 mb-3 text-center">
+                         👋 Welcome to Rowboat!
+                     </h3>
+                                              <p className="text-base text-zinc-600 dark:text-zinc-400 mb-6 text-center">
+                             I&apos;m your copilot for building agents and adding tools to them.
+                         </p>
+                         <p className="text-base text-zinc-600 dark:text-zinc-400 mb-4 text-center">
+                             Here&apos;s what you can do in Rowboat:
+                         </p>
+                     <div className="space-y-3 max-w-2xl mx-auto text-left">
+                         <div className="flex items-start gap-3">
+                             <span className="text-lg">⚡</span>
+                             <span className="text-sm text-zinc-600 dark:text-zinc-400">Build AI agents instantly with natural language.</span>
+                         </div>
+                         <div className="flex items-start gap-3">
+                             <span className="text-lg">🔌</span>
+                             <span className="text-sm text-zinc-600 dark:text-zinc-400">Connect tools with one-click integrations.</span>
+                         </div>
+                         <div className="flex items-start gap-3">
+                             <span className="text-lg">📂</span>
+                             <span className="text-sm text-zinc-600 dark:text-zinc-400">Power with knowledge by adding documents for RAG.</span>
+                         </div>
+                         <div className="flex items-start gap-3">
+                             <span className="text-lg">🔄</span>
+                             <span className="text-sm text-zinc-600 dark:text-zinc-400">Automate workflows by setting up triggers and actions.</span>
+                         </div>
+                         <div className="flex items-start gap-3">
+                             <span className="text-lg">🚀</span>
+                             <span className="text-sm text-zinc-600 dark:text-zinc-400">Deploy anywhere via API or SDK.</span>
+                         </div>
+                     </div>
+                </div>
+                
                 {SHOW_COPILOT_MARQUEE && (
-                    <div className="relative mt-8 max-w-full px-8">
+                    <div className="relative mt-4 max-w-full px-8">
                         <div className="font-mono text-sm whitespace-nowrap text-blue-400/60 dark:text-blue-500/40 font-small inline-flex">
                             <div className="overflow-hidden w-0 animate-typing">What can I help you build?</div>
                             <div className="border-r-2 border-blue-400 dark:border-blue-500 animate-cursor">&nbsp;</div>