Show jobs view for composio triggers (external) similar to recurring jobs view

apps/rowboat/app/actions/composio.actions.ts

@@ -13,6 +13,7 @@ import { ICreateComposioTriggerDeploymentController } from "@/src/interface-adap
 import { IListComposioTriggerDeploymentsController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/list-composio-trigger-deployments.controller";
 import { IDeleteComposioTriggerDeploymentController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/delete-composio-trigger-deployment.controller";
 import { IListComposioTriggerTypesController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/list-composio-trigger-types.controller";
+import { IFetchComposioTriggerDeploymentController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/fetch-composio-trigger-deployment.controller";
 import { IDeleteComposioConnectedAccountController } from "@/src/interface-adapters/controllers/projects/delete-composio-connected-account.controller";
 import { authCheck } from "./auth.actions";
 import { ICreateComposioManagedConnectedAccountController } from "@/src/interface-adapters/controllers/projects/create-composio-managed-connected-account.controller";
@@ -26,6 +27,7 @@ const createComposioTriggerDeploymentController = container.resolve<ICreateCompo
 const listComposioTriggerDeploymentsController = container.resolve<IListComposioTriggerDeploymentsController>("listComposioTriggerDeploymentsController");
 const deleteComposioTriggerDeploymentController = container.resolve<IDeleteComposioTriggerDeploymentController>("deleteComposioTriggerDeploymentController");
 const listComposioTriggerTypesController = container.resolve<IListComposioTriggerTypesController>("listComposioTriggerTypesController");
+const fetchComposioTriggerDeploymentController = container.resolve<IFetchComposioTriggerDeploymentController>("fetchComposioTriggerDeploymentController");
 const deleteComposioConnectedAccountController = container.resolve<IDeleteComposioConnectedAccountController>("deleteComposioConnectedAccountController");
 const createComposioManagedConnectedAccountController = container.resolve<ICreateComposioManagedConnectedAccountController>("createComposioManagedConnectedAccountController");
 const createCustomConnectedAccountController = container.resolve<ICreateCustomConnectedAccountController>("createCustomConnectedAccountController");
@@ -182,4 +184,13 @@ export async function deleteComposioTriggerDeployment(request: {
         projectId: request.projectId,
         deploymentId: request.deploymentId,
     });
+}
+
+export async function fetchComposioTriggerDeployment(request: { deploymentId: string }) {
+    const user = await authCheck();
+    return await fetchComposioTriggerDeploymentController.execute({
+        caller: 'user',
+        userId: user._id,
+        deploymentId: request.deploymentId,
+    });
 }

apps/rowboat/app/projects/[projectId]/job-rules/components/composio-trigger-deployment-view.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { useEffect, useMemo, useState } from "react";
+import Link from "next/link";
+import { Spinner } from "@heroui/react";
+import { Panel } from "@/components/common/panel-common";
+import { Button } from "@/components/ui/button";
+import { ArrowLeftIcon, Trash2Icon } from "lucide-react";
+import { z } from "zod";
+import { ComposioTriggerDeployment } from "@/src/entities/models/composio-trigger-deployment";
+import { deleteComposioTriggerDeployment, fetchComposioTriggerDeployment } from "@/app/actions/composio.actions";
+import { JobsList } from "@/app/projects/[projectId]/jobs/components/jobs-list";
+import { JobFiltersSchema } from "@/src/application/repositories/jobs.repository.interface";
+
+export function ComposioTriggerDeploymentView({ projectId, deploymentId }: { projectId: string; deploymentId: string; }) {
+    const [deployment, setDeployment] = useState<z.infer<typeof ComposioTriggerDeployment> | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [deleting, setDeleting] = useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+    const jobsFilters = useMemo(() => ({ composioTriggerDeploymentId: deploymentId } satisfies z.infer<typeof JobFiltersSchema>), [deploymentId]);
+
+    useEffect(() => {
+        let ignore = false;
+        (async () => {
+            setLoading(true);
+            try {
+                const res = await fetchComposioTriggerDeployment({ deploymentId });
+                if (ignore) return;
+                setDeployment(res);
+            } finally {
+                if (!ignore) setLoading(false);
+            }
+        })();
+        return () => { ignore = true; };
+    }, [deploymentId]);
+
+    const title = useMemo(() => {
+        if (!deployment) return 'External Trigger';
+        return `External Trigger ${deployment.id}`;
+    }, [deployment]);
+
+    const formatDate = (iso: string) => new Date(iso).toLocaleString();
+
+    const handleDelete = async () => {
+        if (!deployment) return;
+        setDeleting(true);
+        try {
+            await deleteComposioTriggerDeployment({ projectId, deploymentId: deployment.id });
+            window.location.href = `/projects/${projectId}/job-rules`;
+        } catch (e) {
+            console.error(e);
+            alert('Failed to delete trigger');
+        } finally {
+            setDeleting(false);
+            setShowDeleteConfirm(false);
+        }
+    };
+
+    return (
+        <>
+            <Panel
+                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" />
+                                Back
+                            </Button>
+                        </Link>
+                        <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{title}</div>
+                    </div>
+                }
+                rightActions={
+                    <div className="flex items-center gap-3">
+                        <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"
+                        >
+                            <Trash2Icon className="w-4 h-4" />
+                            Delete
+                        </Button>
+                    </div>
+                }
+            >
+                <div className="h-full overflow-auto px-4 py-4">
+                    <div className="max-w-[1024px] mx-auto">
+                        {loading && (
+                            <div className="flex items-center gap-2">
+                                <Spinner size="sm" />
+                                <div>Loading...</div>
+                            </div>
+                        )}
+                        {!loading && deployment && (
+                            <div className="flex flex-col gap-6">
+                                <div className="bg-gray-50 dark:bg-gray-800/50 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+                                    <div className="grid grid-cols-2 gap-4 text-sm">
+                                        <div>
+                                            <span className="font-semibold text-gray-700 dark:text-gray-300">Deployment ID:</span>
+                                            <span className="ml-2 font-mono text-gray-600 dark:text-gray-400">{deployment.id}</span>
+                                        </div>
+                                        <div>
+                                            <span className="font-semibold text-gray-700 dark:text-gray-300">Trigger Type:</span>
+                                            <span className="ml-2 font-mono text-gray-600 dark:text-gray-400">{deployment.triggerTypeSlug}</span>
+                                        </div>
+                                        <div>
+                                            <span className="font-semibold text-gray-700 dark:text-gray-300">Toolkit:</span>
+                                            <span className="ml-2 font-mono text-gray-600 dark:text-gray-400">{deployment.toolkitSlug}</span>
+                                        </div>
+                                        <div>
+                                            <span className="font-semibold text-gray-700 dark:text-gray-300">Connected Account:</span>
+                                            <span className="ml-2 font-mono text-gray-600 dark:text-gray-400">{deployment.connectedAccountId}</span>
+                                        </div>
+                                        <div>
+                                            <span className="font-semibold text-gray-700 dark:text-gray-300">Created:</span>
+                                            <span className="ml-2 font-mono text-gray-600 dark:text-gray-400">{formatDate(deployment.createdAt)}</span>
+                                        </div>
+                                        <div>
+                                            <span className="font-semibold text-gray-700 dark:text-gray-300">Updated:</span>
+                                            <span className="ml-2 font-mono text-gray-600 dark:text-gray-400">{formatDate(deployment.updatedAt)}</span>
+                                        </div>
+                                        <div className="col-span-2">
+                                            <span className="font-semibold text-gray-700 dark:text-gray-300">Trigger Config:</span>
+                                            <pre className="mt-2 bg-gray-100 dark:bg-gray-900 p-3 rounded text-xs overflow-x-auto border border-gray-200 dark:border-gray-700 font-mono">
+{JSON.stringify(deployment.triggerConfig, null, 2)}
+                                            </pre>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+                                    <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">Jobs Created by This Trigger</h3>
+                                    <JobsList projectId={projectId} filters={jobsFilters} showTitle={false} />
+                                </div>
+                            </div>
+                        )}
+                        {!loading && !deployment && (
+                            <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                                <div className="text-sm font-mono">Trigger deployment not found.</div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </Panel>
+
+            {showDeleteConfirm && (
+                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+                    <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md mx-4">
+                        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Delete External Trigger</h3>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">Are you sure you want to delete this external trigger? This will remove the linked webhook in Composio and delete this deployment.</p>
+                        <div className="flex gap-3 justify-end">
+                            <Button variant="secondary" onClick={() => setShowDeleteConfirm(false)} disabled={deleting}>Cancel</Button>
+                            <Button
+                                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"
+                            >
+                                {deleting ? (<><Spinner size="sm" /> Deleting...</>) : (<><Trash2Icon className="w-4 h-4" /> Delete</>)}
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}
+
+

apps/rowboat/app/projects/[projectId]/job-rules/components/triggers-tab.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Spinner } from '@heroui/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';
@@ -350,22 +350,24 @@ export function TriggersTab({ projectId }: { projectId: string }) {
                         >
                           <div className="flex items-start justify-between">
                             <div className="flex-1">
-                              <div className="flex items-center gap-3 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}
-                                </span>
-                              </div>
-                              <div className="text-sm text-gray-500 dark:text-gray-400">
-                                Created: {new Date(trigger.createdAt).toLocaleDateString()}
-                              </div>
-                              {Object.keys(trigger.triggerConfig).length > 0 && (
-                                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                                  Configuration: {Object.keys(trigger.triggerConfig).length} settings
+                              <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>
+                                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                                    {triggerTypeNames[trigger.triggerTypeSlug] || trigger.triggerTypeSlug}
+                                  </span>
                                 </div>
-                              )}
+                                <div className="text-sm text-gray-500 dark:text-gray-400">
+                                  Created: {new Date(trigger.createdAt).toLocaleDateString()}
+                                </div>
+                                {Object.keys(trigger.triggerConfig).length > 0 && (
+                                  <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                                    Configuration: {Object.keys(trigger.triggerConfig).length} settings
+                                  </div>
+                                )}
+                              </a>
                             </div>
                             <Button
                               variant="tertiary"
@@ -403,6 +405,7 @@ export function TriggersTab({ projectId }: { projectId: string }) {
                                 <div className="text-xs text-gray-600 dark:text-gray-400">
                                   <span className="font-medium">Connected Account:</span> {trigger.connectedAccountId}
                                 </div>
+                                
                               </div>
                             )}
                           </div>

apps/rowboat/app/projects/[projectId]/job-rules/triggers/[deploymentId]/page.tsx

@@ -0,0 +1,19 @@
+import { Metadata } from "next";
+import { requireActiveBillingSubscription } from '@/app/lib/billing';
+import { ComposioTriggerDeploymentView } from "../../components/composio-trigger-deployment-view";
+
+export const metadata: Metadata = {
+    title: "External Trigger",
+};
+
+export default async function Page(
+    props: {
+        params: Promise<{ projectId: string; deploymentId: string }>
+    }
+) {
+    const params = await props.params;
+    await requireActiveBillingSubscription();
+    return <ComposioTriggerDeploymentView projectId={params.projectId} deploymentId={params.deploymentId} />;
+}
+
+

apps/rowboat/app/projects/[projectId]/jobs/components/job-view.tsx

@@ -55,7 +55,7 @@ export function JobView({ projectId, jobId }: { projectId: string; jobId: string
                     'Deployment ID': reason.triggerDeploymentId,
                 },
                 payload: reason.payload,
-                link: null
+                link: reason.triggerDeploymentId ? `/projects/${projectId}/job-rules/triggers/${reason.triggerDeploymentId}` : null
             };
         }
         if (reason.type === 'scheduled_job_rule') {

apps/rowboat/app/projects/[projectId]/jobs/components/jobs-list.tsx

@@ -99,7 +99,7 @@ export function JobsList({ projectId, filters, showTitle = true, customTitle }:
             return {
                 type: 'Composio Trigger',
                 display: `Composio: ${reason.triggerTypeSlug}`,
-                link: null
+                link: reason.triggerDeploymentId ? `/projects/${projectId}/job-rules/triggers/${reason.triggerDeploymentId}` : null
             };
         }
         if (reason.type === 'scheduled_job_rule') {

apps/rowboat/di/container.ts

@@ -23,6 +23,7 @@ import { MongodbProjectsRepository } from "@/src/infrastructure/repositories/mon
 import { MongodbComposioTriggerDeploymentsRepository } from "@/src/infrastructure/repositories/mongodb.composio-trigger-deployments.repository";
 import { CreateComposioTriggerDeploymentUseCase } from "@/src/application/use-cases/composio-trigger-deployments/create-composio-trigger-deployment.use-case";
 import { ListComposioTriggerDeploymentsUseCase } from "@/src/application/use-cases/composio-trigger-deployments/list-composio-trigger-deployments.use-case";
+import { FetchComposioTriggerDeploymentUseCase } from "@/src/application/use-cases/composio-trigger-deployments/fetch-composio-trigger-deployment.use-case";
 import { DeleteComposioTriggerDeploymentUseCase } from "@/src/application/use-cases/composio-trigger-deployments/delete-composio-trigger-deployment.use-case";
 import { ListComposioTriggerTypesUseCase } from "@/src/application/use-cases/composio-trigger-deployments/list-composio-trigger-types.use-case";
 import { HandleCompsioWebhookRequestUseCase } from "@/src/application/use-cases/composio/webhook/handle-composio-webhook-request.use-case";
@@ -30,6 +31,7 @@ import { MongoDBJobsRepository } from "@/src/infrastructure/repositories/mongodb
 import { CreateComposioTriggerDeploymentController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/create-composio-trigger-deployment.controller";
 import { DeleteComposioTriggerDeploymentController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/delete-composio-trigger-deployment.controller";
 import { ListComposioTriggerDeploymentsController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/list-composio-trigger-deployments.controller";
+import { FetchComposioTriggerDeploymentController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/fetch-composio-trigger-deployment.controller";
 import { ListComposioTriggerTypesController } from "@/src/interface-adapters/controllers/composio-trigger-deployments/list-composio-trigger-types.controller";
 import { HandleComposioWebhookRequestController } from "@/src/interface-adapters/controllers/composio/webhook/handle-composio-webhook-request.controller";
 import { JobsWorker } from "@/src/application/workers/jobs.worker";
@@ -299,10 +301,12 @@ container.register({
     listComposioTriggerTypesUseCase: asClass(ListComposioTriggerTypesUseCase).singleton(),
     createComposioTriggerDeploymentUseCase: asClass(CreateComposioTriggerDeploymentUseCase).singleton(),
     listComposioTriggerDeploymentsUseCase: asClass(ListComposioTriggerDeploymentsUseCase).singleton(),
+    fetchComposioTriggerDeploymentUseCase: asClass(FetchComposioTriggerDeploymentUseCase).singleton(),
     deleteComposioTriggerDeploymentUseCase: asClass(DeleteComposioTriggerDeploymentUseCase).singleton(),
     createComposioTriggerDeploymentController: asClass(CreateComposioTriggerDeploymentController).singleton(),
     deleteComposioTriggerDeploymentController: asClass(DeleteComposioTriggerDeploymentController).singleton(),
     listComposioTriggerDeploymentsController: asClass(ListComposioTriggerDeploymentsController).singleton(),
+    fetchComposioTriggerDeploymentController: asClass(FetchComposioTriggerDeploymentController).singleton(),
     listComposioTriggerTypesController: asClass(ListComposioTriggerTypesController).singleton(),
 
     // conversations

apps/rowboat/src/application/use-cases/composio-trigger-deployments/fetch-composio-trigger-deployment.use-case.ts

@@ -0,0 +1,62 @@
+import { NotFoundError } from '@/src/entities/errors/common';
+import { z } from "zod";
+import { IUsageQuotaPolicy } from '../../policies/usage-quota.policy.interface';
+import { IProjectActionAuthorizationPolicy } from '../../policies/project-action-authorization.policy';
+import { IComposioTriggerDeploymentsRepository } from '../../repositories/composio-trigger-deployments.repository.interface';
+import { ComposioTriggerDeployment } from '@/src/entities/models/composio-trigger-deployment';
+
+const inputSchema = z.object({
+    caller: z.enum(["user", "api"]),
+    userId: z.string().optional(),
+    apiKey: z.string().optional(),
+    deploymentId: z.string(),
+});
+
+export interface IFetchComposioTriggerDeploymentUseCase {
+    execute(request: z.infer<typeof inputSchema>): Promise<z.infer<typeof ComposioTriggerDeployment>>;
+}
+
+export class FetchComposioTriggerDeploymentUseCase implements IFetchComposioTriggerDeploymentUseCase {
+    private readonly composioTriggerDeploymentsRepository: IComposioTriggerDeploymentsRepository;   
+    private readonly usageQuotaPolicy: IUsageQuotaPolicy;
+    private readonly projectActionAuthorizationPolicy: IProjectActionAuthorizationPolicy;
+
+    constructor({
+        composioTriggerDeploymentsRepository,
+        usageQuotaPolicy,
+        projectActionAuthorizationPolicy,
+    }: {
+        composioTriggerDeploymentsRepository: IComposioTriggerDeploymentsRepository,
+        usageQuotaPolicy: IUsageQuotaPolicy,
+        projectActionAuthorizationPolicy: IProjectActionAuthorizationPolicy,
+    }) {
+        this.composioTriggerDeploymentsRepository = composioTriggerDeploymentsRepository;
+        this.usageQuotaPolicy = usageQuotaPolicy;
+        this.projectActionAuthorizationPolicy = projectActionAuthorizationPolicy;
+    }
+
+    async execute(request: z.infer<typeof inputSchema>): Promise<z.infer<typeof ComposioTriggerDeployment>> {
+        // fetch deployment first to get projectId
+        const deployment = await this.composioTriggerDeploymentsRepository.fetch(request.deploymentId);
+        if (!deployment) {
+            throw new NotFoundError(`Composio trigger deployment ${request.deploymentId} not found`);
+        }
+
+        const { projectId } = deployment;
+
+        // authz check
+        await this.projectActionAuthorizationPolicy.authorize({
+            caller: request.caller,
+            userId: request.userId,
+            apiKey: request.apiKey,
+            projectId,
+        });
+
+        // assert and consume quota
+        await this.usageQuotaPolicy.assertAndConsume(projectId);
+
+        return deployment;
+    }
+}
+
+

apps/rowboat/src/interface-adapters/controllers/composio-trigger-deployments/fetch-composio-trigger-deployment.controller.ts

@@ -0,0 +1,44 @@
+import { BadRequestError } from "@/src/entities/errors/common";
+import z from "zod";
+import { IFetchComposioTriggerDeploymentUseCase } from "@/src/application/use-cases/composio-trigger-deployments/fetch-composio-trigger-deployment.use-case";
+import { ComposioTriggerDeployment } from "@/src/entities/models/composio-trigger-deployment";
+
+const inputSchema = z.object({
+    caller: z.enum(["user", "api"]),
+    userId: z.string().optional(),
+    apiKey: z.string().optional(),
+    deploymentId: z.string(),
+});
+
+export interface IFetchComposioTriggerDeploymentController {
+    execute(request: z.infer<typeof inputSchema>): Promise<z.infer<typeof ComposioTriggerDeployment>>;
+}
+
+export class FetchComposioTriggerDeploymentController implements IFetchComposioTriggerDeploymentController {
+    private readonly fetchComposioTriggerDeploymentUseCase: IFetchComposioTriggerDeploymentUseCase;
+    
+    constructor({
+        fetchComposioTriggerDeploymentUseCase,
+    }: {
+        fetchComposioTriggerDeploymentUseCase: IFetchComposioTriggerDeploymentUseCase,
+    }) {
+        this.fetchComposioTriggerDeploymentUseCase = fetchComposioTriggerDeploymentUseCase;
+    }
+
+    async execute(request: z.infer<typeof inputSchema>): Promise<z.infer<typeof ComposioTriggerDeployment>> {
+        const result = inputSchema.safeParse(request);
+        if (!result.success) {
+            throw new BadRequestError(`Invalid request: ${JSON.stringify(result.error)}`);
+        }
+        const { caller, userId, apiKey, deploymentId } = result.data;
+
+        return await this.fetchComposioTriggerDeploymentUseCase.execute({
+            caller,
+            userId,
+            apiKey,
+            deploymentId,
+        });
+    }
+}
+
+