feat(webapp): show the external deployment id on deployments and runs

Deployments page: an always-visible External ID column after Deployed by, and an External ID row in the deployment inspector under Worker type, both showing an en dash when a deploy carried no id. The Vercel Linked column now renders before Git, still only when a Vercel integration is connected. Also corrects the blank-row colSpan, which was already off by one before this column existed.

Run inspector: an External deployment ID row between Version and SDK version, read from the run annotations, so an operator can see which id a run was pinned to - including a run that expired before its deployment ever arrived, where the locked version is empty but the id is the whole story. Buffered runs read the id from the same annotations rather than reporting none.

Long ids are head-truncated with the full value behind the copy button: a commit SHA is meaningful in its prefix, and the inspector panel can be narrowed to 250px, where an unbroken 40-character SHA would otherwise scroll the properties list sideways and push the copy button off-panel (TRI-12923, TRI-13000).

Author: 0ski

.server-changes/external-deployment-id-dashboard.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Deployments and runs now show the external ID they were deployed or pinned with, so you can trace a run back to the release of your app that triggered it.

apps/webapp/app/presenters/v3/DeploymentListPresenter.server.ts

@@ -153,6 +153,7 @@ export class DeploymentListPresenter {
         userDisplayName: string | null;
         userAvatarUrl: string | null;
         type: WorkerInstanceGroupType;
+        externalId: string | null;
         git: Prisma.JsonValue | null;
         integrationDeploymentId: string | null;
       }[]
@@ -173,6 +174,7 @@ export class DeploymentListPresenter {
   wd."builtAt",
   wd."deployedAt",
   wd."type",
+  wd."externalId",
   wd."git"
   ${vercelSelect}
 FROM
@@ -258,6 +260,7 @@ LIMIT ${pageSize} OFFSET ${pageSize * (page - 1)};`;
                 avatarUrl: deployment.userAvatarUrl,
               }
             : undefined,
+          externalId: deployment.externalId,
           git: processGitMetadata(deployment.git),
           vercelDeploymentUrl,
         };

apps/webapp/app/presenters/v3/DeploymentPresenter.server.ts

@@ -101,6 +101,7 @@ export class DeploymentPresenter {
         externalBuildData: true,
         projectId: true,
         type: true,
+        externalId: true,
         environment: {
           select: {
             id: true,
@@ -272,6 +273,7 @@ export class DeploymentPresenter {
         errorData: DeploymentPresenter.prepareErrorData(deployment.errorData),
         isBuilt: !!deployment.builtAt,
         type: deployment.type,
+        externalId: deployment.externalId,
         git: gitMetadata,
         triggeredVia: deployment.triggeredVia,
         vercelDeploymentUrl,

apps/webapp/app/presenters/v3/SpanPresenter.server.ts

@@ -1,3 +1,4 @@
+import { readExternalDeploymentIdAnnotation } from "@internal/run-engine";
 import {
   type MachinePreset,
   prettyPrintPacket,
@@ -399,6 +400,7 @@ export class SpanPresenter extends BasePresenter {
       ttl: run.ttl,
       taskIdentifier: run.taskIdentifier,
       version: lockedWorker?.lockedToVersion?.version,
+      externalDeploymentId: readExternalDeploymentIdAnnotation(run.annotations),
       sdkVersion: lockedWorker?.lockedToVersion?.sdkVersion,
       runtime: lockedWorker?.lockedToVersion?.runtime,
       runtimeVersion: lockedWorker?.lockedToVersion?.runtimeVersion,

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx

@@ -180,6 +180,21 @@ function getTriggeredViaDisplay(triggeredVia: string | null | undefined): {
   }
 }
 
+const EXTERNAL_ID_DISPLAY_LENGTH = 24;
+
+function ExternalIdValue({ externalId }: { externalId: string | null }) {
+  if (!externalId) {
+    return <>–</>;
+  }
+
+  const display =
+    externalId.length > EXTERNAL_ID_DISPLAY_LENGTH
+      ? `${externalId.slice(0, EXTERNAL_ID_DISPLAY_LENGTH)}…`
+      : externalId;
+
+  return <CopyableText value={display} copyValue={externalId} className="font-mono text-sm" />;
+}
+
 export default function Page() {
   const { deployment, eventStream } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
@@ -445,6 +460,12 @@ export default function Page() {
                 <Property.Label>Worker type</Property.Label>
                 <Property.Value>{capitalizeWord(deployment.type)}</Property.Value>
               </Property.Item>
+              <Property.Item>
+                <Property.Label>External ID</Property.Label>
+                <Property.Value>
+                  <ExternalIdValue externalId={deployment.externalId} />
+                </Property.Value>
+              </Property.Item>
               <Property.Item>
                 <Property.Label>Started at</Property.Label>
                 <Property.Value>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx

@@ -42,6 +42,7 @@ import {
   collapsibleHandleClassName,
 } from "~/components/primitives/Resizable";
 import {
+  CopyableTableCell,
   Table,
   TableBlankRow,
   TableBody,
@@ -256,8 +257,9 @@ export default function Page() {
                       <TableHeaderCell>Tasks</TableHeaderCell>
                       <TableHeaderCell>Deployed at</TableHeaderCell>
                       <TableHeaderCell>Deployed by</TableHeaderCell>
-                      <TableHeaderCell>Git</TableHeaderCell>
+                      <TableHeaderCell>External ID</TableHeaderCell>
                       {hasVercelIntegration && <TableHeaderCell>Linked</TableHeaderCell>}
+                      <TableHeaderCell>Git</TableHeaderCell>
                       <TableHeaderCell hiddenLabel>Go to page</TableHeaderCell>
                     </TableRow>
                   </TableHeader>
@@ -332,11 +334,11 @@ export default function Page() {
                                 "–"
                               )}
                             </TableCell>
-                            <TableCell isSelected={isSelected}>
-                              <div className="-ml-1 flex items-center">
-                                <GitMetadata git={deployment.git} />
-                              </div>
-                            </TableCell>
+                            <DeploymentExternalIdCell
+                              externalId={deployment.externalId}
+                              path={path}
+                              isSelected={isSelected}
+                            />
                             {hasVercelIntegration && (
                               <TableCell isSelected={isSelected}>
                                 {deployment.vercelDeploymentUrl ? (
@@ -353,6 +355,11 @@ export default function Page() {
                                 )}
                               </TableCell>
                             )}
+                            <TableCell isSelected={isSelected}>
+                              <div className="-ml-1 flex items-center">
+                                <GitMetadata git={deployment.git} />
+                              </div>
+                            </TableCell>
                             <DeploymentActionsCell
                               deployment={deployment}
                               path={path}
@@ -364,7 +371,7 @@ export default function Page() {
                         );
                       })
                     ) : (
-                      <TableBlankRow colSpan={hasVercelIntegration ? 9 : 8}>
+                      <TableBlankRow colSpan={hasVercelIntegration ? 11 : 10}>
                         <Paragraph className="flex items-center justify-center">
                           No deploys match your filters
                         </Paragraph>
@@ -602,6 +609,30 @@ function DeploymentActionsCell({
   );
 }
 
+function DeploymentExternalIdCell({
+  externalId,
+  path,
+  isSelected,
+}: {
+  externalId: string | null;
+  path: string;
+  isSelected: boolean;
+}) {
+  if (!externalId) {
+    return (
+      <TableCell to={path} isSelected={isSelected}>
+        –
+      </TableCell>
+    );
+  }
+
+  return (
+    <CopyableTableCell to={path} isSelected={isSelected} className="font-mono" value={externalId}>
+      {externalId.length > 12 ? `${externalId.slice(0, 12)}…` : externalId}
+    </CopyableTableCell>
+  );
+}
+
 type RollbackDeploymentDialogProps = {
   projectId: string;
   deploymentShortCode: string;

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -872,6 +872,12 @@ function RunBody({
                     )}
                   </Property.Value>
                 </Property.Item>
+                <Property.Item>
+                  <Property.Label>External deployment ID</Property.Label>
+                  <Property.Value>
+                    <ExternalDeploymentIdValue externalDeploymentId={run.externalDeploymentId} />
+                  </Property.Value>
+                </Property.Item>
                 <Property.Item>
                   <Property.Label>SDK version</Property.Label>
                   <Property.Value>
@@ -1274,6 +1280,27 @@ function MiniStat({
   );
 }
 
+const EXTERNAL_DEPLOYMENT_ID_DISPLAY_LENGTH = 24;
+
+function ExternalDeploymentIdValue({
+  externalDeploymentId,
+}: {
+  externalDeploymentId: string | undefined;
+}) {
+  if (!externalDeploymentId) {
+    return <>–</>;
+  }
+
+  const display =
+    externalDeploymentId.length > EXTERNAL_DEPLOYMENT_ID_DISPLAY_LENGTH
+      ? `${externalDeploymentId.slice(0, EXTERNAL_DEPLOYMENT_ID_DISPLAY_LENGTH)}…`
+      : externalDeploymentId;
+
+  return (
+    <CopyableText value={display} copyValue={externalDeploymentId} className="font-mono" asChild />
+  );
+}
+
 // A compact "mini queue" for a waiting run: the queue page's stat blocks + charts, scaled down.
 function WaitingInQueueBlock({
   queueName,

apps/webapp/app/v3/mollifier/syntheticSpanRun.server.ts

@@ -1,3 +1,4 @@
+import { readExternalDeploymentIdAnnotation } from "@internal/run-engine";
 import { prettyPrintPacket, RunAnnotations } from "@trigger.dev/core/v3";
 import { getMaxDuration } from "@trigger.dev/core/v3/isomorphic";
 import {
@@ -124,6 +125,7 @@ export async function buildSyntheticSpanRun(args: {
     ttl: run.ttl ?? null,
     taskIdentifier: run.taskIdentifier ?? "",
     version: undefined,
+    externalDeploymentId: readExternalDeploymentIdAnnotation(run.annotations),
     sdkVersion: undefined,
     runtime: undefined,
     runtimeVersion: undefined,

internal-packages/run-engine/src/index.ts

@@ -12,6 +12,7 @@ export type {
   PendingVersionRunIdLookupResult,
 } from "./engine/services/pendingVersionLookup.js";
 export { NoopPendingVersionRunIdLookup } from "./engine/services/pendingVersionLookup.js";
+export { readExternalDeploymentIdAnnotation } from "./engine/systems/pendingVersionSystem.js";
 export { PassthroughControlPlaneResolver } from "./engine/controlPlaneResolver.js";
 export type {
   ControlPlaneResolver,