Link deployments to preview urls; add more menu to view deployment

Author: ctate

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

@@ -14,6 +14,18 @@ function convertFeedbackUrlToDeploymentUrl(url: string): string {
   return url
 }
 
+// Helper function to generate Vercel inspector URL from details_url or check ID
+function getInspectorUrl(detailsUrl?: string): string | undefined {
+  if (!detailsUrl) return undefined
+
+  // If it's already a vercel.com URL, return it
+  if (detailsUrl.includes('vercel.com')) {
+    return detailsUrl
+  }
+
+  return undefined
+}
+
 export async function GET(request: NextRequest, { params }: { params: Promise<{ taskId: string }> }) {
   try {
     const session = await getServerSession()
@@ -50,6 +62,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         data: {
           hasDeployment: true,
           previewUrl,
+          inspectorUrl: undefined,
           cached: true,
         },
       })
@@ -187,11 +200,16 @@ 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 inspector URL from details_url
+            const detailsUrl = vercelDeploymentCheck?.details_url ?? vercelPreviewCheck?.details_url
+            const inspectorUrl = detailsUrl ? getInspectorUrl(detailsUrl) : undefined
+
             return NextResponse.json({
               success: true,
               data: {
                 hasDeployment: true,
                 previewUrl,
+                inspectorUrl,
                 checkId: vercelDeploymentCheck?.id || vercelPreviewCheck?.id,
                 createdAt: vercelDeploymentCheck?.completed_at || vercelPreviewCheck?.completed_at,
               },
@@ -244,6 +262,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
                       data: {
                         hasDeployment: true,
                         previewUrl,
+                        inspectorUrl: undefined,
                         deploymentId: deployment.id,
                         createdAt: deployment.created_at,
                       },
@@ -285,6 +304,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
               data: {
                 hasDeployment: true,
                 previewUrl,
+                inspectorUrl: getInspectorUrl(vercelStatus.target_url),
                 createdAt: vercelStatus.created_at,
               },
             })

components/task-chat.tsx

@@ -54,6 +54,7 @@ interface CheckRun {
 interface DeploymentInfo {
   hasDeployment: boolean
   previewUrl?: string
+  inspectorUrl?: 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.inspectorUrl && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                      >
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem asChild>
+                        <a
+                          href={deployment.inspectorUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="cursor-pointer"
+                        >
+                          View Deployment
+                        </a>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
             </div>
           )}
         </div>