Link deployments to preview url; add a more button with view deployment

Author: ctate

app/api/tasks/[taskId]/deployment/route.ts

@@ -50,6 +50,9 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         data: {
           hasDeployment: true,
           previewUrl,
+          deploymentUrl: task.previewUrl.includes('vercel.live/open-feedback/')
+            ? task.previewUrl
+            : `https://vercel.com/${previewUrl.split('://')[1]}`,
           cached: true,
         },
       })
@@ -187,11 +190,15 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
             // Store the preview URL in the database
             await db.update(tasks).set({ previewUrl }).where(eq(tasks.id, taskId))
 
+            // Get the deployment page URL from details_url if available
+            const deploymentUrl = vercelDeploymentCheck?.details_url || vercelPreviewCheck?.details_url || undefined
+
             return NextResponse.json({
               success: true,
               data: {
                 hasDeployment: true,
                 previewUrl,
+                deploymentUrl,
                 checkId: vercelDeploymentCheck?.id || vercelPreviewCheck?.id,
                 createdAt: vercelDeploymentCheck?.completed_at || vercelPreviewCheck?.completed_at,
               },
@@ -234,6 +241,8 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
                 if (status.state === 'success') {
                   let previewUrl = status.environment_url || status.target_url
                   if (previewUrl) {
+                    // Store original URL for deployment page link
+                    const deploymentUrl = previewUrl
                     // Convert feedback URL to actual deployment URL if needed
                     previewUrl = convertFeedbackUrlToDeploymentUrl(previewUrl)
                     // Store the preview URL in the database
@@ -244,6 +253,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
                       data: {
                         hasDeployment: true,
                         previewUrl,
+                        deploymentUrl,
                         deploymentId: deployment.id,
                         createdAt: deployment.created_at,
                       },
@@ -275,6 +285,8 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
           )
 
           if (vercelStatus && vercelStatus.target_url) {
+            // Store original URL for deployment page link
+            const deploymentUrl = vercelStatus.target_url
             // Convert feedback URL to actual deployment URL if needed
             const previewUrl = convertFeedbackUrlToDeploymentUrl(vercelStatus.target_url)
             // Store the preview URL in the database
@@ -285,6 +297,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
               data: {
                 hasDeployment: true,
                 previewUrl,
+                deploymentUrl,
                 createdAt: vercelStatus.created_at,
               },
             })

components/task-chat.tsx

@@ -54,6 +54,7 @@ interface CheckRun {
 interface DeploymentInfo {
   hasDeployment: boolean
   previewUrl?: string
+  deploymentUrl?: string
   message?: string
   createdAt?: string
 }
@@ -646,24 +647,51 @@ export function TaskChat({ taskId, task }: TaskChatProps) {
             </div>
           ) : (
             <div className="space-y-2 px-2">
-              <a
-                href={deployment.previewUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-3 p-2 rounded-md hover:bg-muted/50 transition-colors"
-              >
-                <svg className="w-4 h-4 flex-shrink-0" viewBox="0 0 76 65" fill="currentColor">
-                  <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
-                </svg>
-                <div className="flex-1 min-w-0">
-                  <div className="text-xs font-medium truncate">Vercel Preview</div>
-                  <div className="text-xs text-muted-foreground">
-                    {deployment.createdAt
-                      ? `Deployed ${new Date(deployment.createdAt).toLocaleString()}`
-                      : 'Preview deployment'}
+              <div className="flex items-center gap-2 p-2 rounded-md hover:bg-muted/50 transition-colors group">
+                <a
+                  href={deployment.previewUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center gap-3 flex-1 min-w-0"
+                >
+                  <svg className="w-4 h-4 flex-shrink-0" viewBox="0 0 76 65" fill="currentColor">
+                    <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" />
+                  </svg>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-xs font-medium truncate">Vercel Preview</div>
+                    <div className="text-xs text-muted-foreground">
+                      {deployment.createdAt
+                        ? `Deployed ${new Date(deployment.createdAt).toLocaleString()}`
+                        : 'Preview deployment'}
+                    </div>
                   </div>
-                </div>
-              </a>
+                </a>
+                {deployment.deploymentUrl && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 w-8 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                      >
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem asChild>
+                        <a
+                          href={deployment.deploymentUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="cursor-pointer"
+                        >
+                          View Deployment
+                        </a>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
             </div>
           )}
         </div>