Duplicate Button for Agents, MCP Servers, and Workflows

[jezweb]

Overview

Add a "Duplicate" button to Agents, MCP Servers, and Workflows that allows users to quickly create copies of their existing configurations. This feature would be positioned between the Edit and Delete icons in the action buttons area.

Visual Reference:

• Screenshot 1: Agent card showing proposed duplicate button placement

Motivation

User Pain Points

• Iterative Development: Users often want to create variations of existing agents/workflows without starting from scratch
• Template Reuse: Common configurations could be duplicated and modified rather than recreated
• Safe Experimentation: Duplicating allows testing changes without risking the original configuration
• Time Savings: Manually recreating complex configurations is time-consuming and error-prone

Current Workaround

Users must manually:

1. Open the original item
2. Copy all settings/configuration details
3. Create a new item from scratch
4. Manually paste/recreate all fields
5. Risk missing important configuration details

User Stories

1. As a power user, I want to duplicate my working agent configuration so I can experiment with different instruction sets without losing the original.

2. As a developer, I want to duplicate an MCP server configuration so I can create similar setups for different projects.

3. As a workflow designer, I want to duplicate complex workflows so I can create variations for different use cases.

4. As a team collaborator, I want to duplicate my own successful configurations to create new versions for different scenarios.

Proposed Solution

Design Specifications

UI/UX Design

• Button Placement: Between Edit and Delete icons (as shown in screenshots)
• Icon: Use Copy icon from lucide-react library
• Interaction:
  • Single click triggers duplication
  • Loading spinner during operation
  • Success toast notification: "Agent duplicated successfully" / "MCP Server duplicated" / "Workflow duplicated"
  • Error toast if duplication fails
• Tooltip: "Duplicate" on hover

Naming Convention

• Duplicated items automatically append " (Copy)" to the original name
• Examples:
  • "My Agent" → "My Agent (Copy)"
  • "Weather API" → "Weather API (Copy)"
  • "Data Pipeline" → "Data Pipeline (Copy)"

Visibility Settings

• Preserve Original: Duplicate inherits the same visibility setting as the original
  • Public → Public
  • Private → Private
  • Readonly → Readonly

Permissions

• Owner-Only Duplication: Users can only duplicate items they own
• The duplicate becomes owned by the current user
• Cannot duplicate public items from other users (feature scope limited to own items)

Technical Implementation

Based on investigation of the codebase architecture:

Architecture Assessment

✅ Feasible - The codebase architecture fully supports this feature:

• PostgreSQL + Drizzle ORM with clear CRUD patterns
• RESTful API structure with existing patterns to follow
• Repository pattern for database operations
• Existing UI components can be extended
• SWR for state management and cache invalidation

Required Changes

1. UI Components

File: src/components/shareable-actions.tsx

• Add duplicate button alongside edit/delete actions
• Add loading state for duplication operation
• Add click handler that calls duplicate API

// Pseudo-code structure
<Tooltip>
  <TooltipTrigger asChild>
    <Button
      variant="ghost"
      size="icon"
      className="size-8 text-muted-foreground hover:text-foreground"
      disabled={isAnyLoading}
      onClick={handleDuplicate}
    >
      {isDuplicating ? <Loader2 className="size-4 animate-spin" /> : <Copy className="size-4" />}
    </Button>
  </TooltipTrigger>
  <TooltipContent>Duplicate</TooltipContent>
</Tooltip>

2. List Components

Files to modify:

• src/components/agent/agents-list.tsx
• src/components/workflow/workflow-list-page.tsx
• src/components/mcp-dashboard.tsx / src/components/mcp-card.tsx

Add duplicate handler:

const duplicateAgent = async (agentId: string) => {
  safe(() => setDuplicatingLoading(agentId))
    .map(() => fetcher(`/api/agent/${agentId}/duplicate`, { method: "POST" }))
    .ifOk(() => {
      mutateAgents(); // Refresh list
      toast.success(t("Agent.duplicated"));
    })
    .ifFail((e) => toast.error(e.message))
    .watch(() => setDuplicatingLoading(null));
};

3. API Endpoints (New)

Files to create:

• src/app/api/agent/[id]/duplicate/route.ts
• src/app/api/mcp/[id]/duplicate/route.ts
• src/app/api/workflow/[id]/duplicate/route.ts

Example structure for agent duplication:

export async function POST(
  req: Request,
  { params }: { params: { id: string } }
) {
  const session = await getSession();
  if (!session?.user?.id) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // 1. Fetch original agent
  const original = await agentRepository.selectAgentById(params.id);

  // 2. Check ownership
  if (original.userId !== session.user.id) {
    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
  }

  // 3. Create duplicate with new ID
  const duplicate = {
    ...original,
    id: generateUUID(),
    name: `${original.name} (Copy)`,
    userId: session.user.id,
    createdAt: new Date(),
    updatedAt: new Date(),
  };

  // 4. Insert into database
  const newAgent = await agentRepository.insertAgent(duplicate);

  return NextResponse.json(newAgent, { status: 201 });
}

4. Database Operations

Files: Existing repository files (no changes needed)

• src/lib/db/pg/repositories/agent-repository.pg.ts
• src/lib/db/pg/repositories/mcp-repository.pg.ts
• src/lib/db/pg/repositories/workflow-repository.pg.ts

Existing methods can be reused:

• selectAgentById() - Fetch original
• insertAgent() - Insert duplicate

5. Special Consideration: Workflows

Workflows are more complex due to relational data:

• WorkflowTable (main workflow record)
• WorkflowNodeDataTable (nodes in the workflow)
• WorkflowEdgeTable (connections between nodes)

Duplication logic must:

1. Duplicate the workflow record
2. Duplicate all associated nodes (with new IDs)
3. Duplicate all edges (with new node ID references)
4. Maintain the graph structure integrity

// Workflow duplication pseudo-code
const duplicateWorkflow = async (workflowId, userId) => {
  // 1. Fetch workflow + nodes + edges
  const original = await workflowRepository.getWorkflowWithStructure(workflowId);

  // 2. Create ID mappings (old node ID → new node ID)
  const nodeIdMap = new Map();

  // 3. Duplicate workflow
  const newWorkflow = { ...original, id: newUUID(), name: `${original.name} (Copy)` };

  // 4. Duplicate nodes with new IDs
  const newNodes = original.nodes.map(node => {
    const newId = newUUID();
    nodeIdMap.set(node.id, newId);
    return { ...node, id: newId, workflowId: newWorkflow.id };
  });

  // 5. Duplicate edges with updated node references
  const newEdges = original.edges.map(edge => ({
    ...edge,
    id: newUUID(),
    workflowId: newWorkflow.id,
    source: nodeIdMap.get(edge.source),
    target: nodeIdMap.get(edge.target),
  }));

  // 6. Insert all in transaction
  await db.transaction(async (tx) => {
    await tx.insert(workflowTable).values(newWorkflow);
    await tx.insert(workflowNodeTable).values(newNodes);
    await tx.insert(workflowEdgeTable).values(newEdges);
  });

  return newWorkflow;
};

Implementation Roadmap

Phase 1: Agents (Simplest)

• ✅ Single table, no relations
• Add duplicate button to UI
• Create API endpoint
• Add client-side handler
• Test and validate

Estimated effort: 2-3 hours

Phase 2: MCP Servers

• ✅ Single table, JSON config field
• Similar pattern to agents
• Consider config validation after duplication

Estimated effort: 2-3 hours

Phase 3: Workflows (Most Complex)

• ⚠️ Multi-table with relations
• Requires transaction handling
• Need ID mapping logic for edges
• Thorough testing needed

Estimated effort: 4-6 hours

Phase 4: Polish & Testing

• Internationalization (i18n keys)
• Error handling edge cases
• Loading states
• Accessibility (keyboard navigation, screen readers)
• E2E tests

Estimated effort: 2-3 hours

Total estimated effort: 10-15 hours

Edge Cases & Considerations

Name Conflicts

Issue: Duplicating "My Agent (Copy)" results in "My Agent (Copy) (Copy)"
Solution:

• Simple approach: Allow multiple "(Copy)" suffixes
• Advanced: Check for existing names and use counter: "My Agent (Copy 2)"

Large Workflows

Issue: Workflows with 100+ nodes could cause timeouts
Solution:

• Set reasonable timeout limits
• Consider background job processing for very large workflows
• Add progress indicator for long operations

Permissions

Issue: Users might expect to duplicate public items from others
Solution:

• Currently scoped to owner-only duplication
• Future enhancement: Add "Duplicate public item" with proper attribution

Visibility Propagation

Issue: Duplicating a public item might unintentionally create another public item
Decision: Preserve visibility (as specified)
Alternative: Could add user confirmation dialog for public duplicates

Database Constraints

Issue: Unique constraints on names could cause failures
Solution: Database schema doesn't enforce unique names, so no issue

Concurrent Duplications

Issue: User rapidly clicking duplicate button
Solution: Disable button during operation (loading state)

Testing Strategy

Unit Tests

• Test duplicate API endpoints with valid/invalid inputs
• Test permission checks (owner vs non-owner)
• Test name generation logic
• Test workflow ID mapping logic

Integration Tests

• Test end-to-end duplication flow
• Test database transaction rollback on errors
• Test cache invalidation after duplication

Manual Testing Checklist

• Duplicate agent with various visibility settings
• Duplicate MCP server with complex config
• Duplicate workflow with multiple nodes/edges
• Test permission denial for non-owners
• Verify toast notifications appear correctly
• Test loading states and button disabling
• Verify SWR cache updates correctly
• Test keyboard accessibility
• Test with slow network (loading states)

Open Questions for Maintainer

1. Naming strategy: Should we implement smart numbering ("Copy 1", "Copy 2") or keep simple suffix?

2. Visibility default: Should duplicates of public items remain public or default to private?

3. Future scope: Should we eventually allow duplicating public items from other users?

4. Workflow complexity: Is there a maximum workflow size where we should warn users before duplicating?

5. Internationalization: What i18n keys should be added? (e.g., "Agent.duplicated", "Agent.duplicateFailed", etc.)

6. Analytics: Should duplication events be tracked for usage metrics?

Technical Debt & Future Enhancements

Potential Improvements

• Batch duplication (select multiple items and duplicate all)
• "Duplicate as template" (strips personal data, resets to defaults)
• Duplication history/lineage tracking
• "Duplicate with modifications" dialog (change name/visibility before creating)

Code Quality

• Extract common duplication logic into shared utility
• Add comprehensive TypeScript types for duplication responses
• Consider using server actions instead of API routes for consistency

Conclusion

This feature provides significant UX improvements with minimal architectural changes. The codebase is well-structured to support this addition, and the implementation can be phased to deliver value incrementally (Agents first, then MCP, then Workflows).

The duplicate button addresses a common user workflow and aligns with standard UI patterns found in similar applications (Notion, Figma, etc.).