feat(comment): redesign deployment comments with rich HTML table#320
feat(comment): redesign deployment comments with rich HTML table#320
Conversation
Add track for improving GitHub deployment comments with rich HTML table format. Includes spec, plan with 8 tasks, and linked issue #319.
Replace plain-text deployment comments with a structured HTML table format showing project name, status, preview URL, commit SHA, alias domains, and inspect URL. Custom string templates remain supported for backward compatibility. Closes #319
|
Deploy preview for team-scope-test ready! ✅ Preview Built with commit dafd38c. |
|
Deploy preview for express-basic-auth ready! ✅ Preview Built with commit dafd38c. |
|
Deploy preview for zeit-now-deployment-action-example-angular ready! ✅ Preview Built with commit dafd38c. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request replaces the plain-text GitHub deployment comments with a structured HTML table format, including project name, status, preview URL, commit SHA, and optional alias and inspection links. The feedback highlights a logic error where the inspection link is skipped if a project name is manually configured, and identifies a need for HTML escaping of dynamic values to prevent layout breakage or potential injection vulnerabilities.
- Add escapeHtml() to prevent XSS in HTML table comments - Always run vercelInspect to get inspectUrl even when project name is set - Trim parsed CLI output to handle trailing whitespace/CRLF
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 15 files
Requires human review: Significant redesign of deployment comments and internal data structures across 15 files. Requires human review of the new HTML rendering and CLI parsing logic.
Architecture diagram
sequenceDiagram
participant Index as Action Entry (index.ts)
participant Vercel as Vercel Client (CLI/API)
participant GHC as GitHub Comments
participant Utils as Utils (Comment Builder)
participant GH as GitHub API (Octokit)
Note over Index,Vercel: Deployment Phase
Index->>Vercel: vercelDeploy()
Vercel-->>Index: deploymentUrl
Note over Index,Vercel: CHANGED: Metadata Extraction
Index->>Vercel: CHANGED: inspect(deploymentUrl)
Vercel->>Vercel: Parse name and inspectorUrl
Vercel-->>Index: NEW: InspectResult { name, inspectUrl }
Note over Index,GH: Commenting Phase
Index->>GHC: handleComments(..., inspectUrl)
GHC->>Utils: buildCommentBody(..., inspectUrl)
alt github-comment input is 'true'
Utils->>Utils: NEW: buildHtmlTableComment()
Note right of Utils: Generates HTML <table> with<br/>status, preview, and inspect links
else github-comment is custom string
Utils->>Utils: Process custom template variables
end
Utils-->>GHC: commentBody (HTML or Plaintext)
GHC->>GH: findPreviousComment()
GH-->>GHC: commentId (if exists)
alt Comment exists
GHC->>GH: updateComment(commentId, commentBody)
else No comment exists
GHC->>GH: createComment(commentBody)
end
GH-->>GHC: Success
GHC-->>Index: Done
The defaultTemplate parameter is no longer used in buildCommentBody() since HTML table is now the default format. Prefix with underscore to satisfy TypeScript strict unused variable checks during ncc compilation.
There was a problem hiding this comment.
Pull request overview
This PR redesigns the default GitHub deployment comment to render as a rich HTML <table> (Cloudflare/Vercel-bot style) and threads an optional Vercel “inspect” URL through the deployment/comment pipeline while keeping custom string templates working.
Changes:
- Add
InspectResultand update Vercel inspect implementations (CLI/API) to return{ name, inspectUrl }. - Generate HTML table comments (with HTML escaping, alias rows, and optional inspect link) when
github-comment: true. - Wire
inspectUrlthroughindex.ts→github-comments.ts→buildCommentBody(), and update tests/docs accordingly.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types.ts | Introduces InspectResult and updates VercelClient.inspect() return type. |
| src/vercel.ts | Updates vercelInspect() to return InspectResult. |
| src/vercel-cli.ts | Parses name + inspectorUrl from vercel inspect output into InspectResult. |
| src/vercel-api.ts | Returns { name, inspectUrl } from /v13/deployments/:id. |
| src/utils.ts | Adds escapeHtml() + buildHtmlTableComment() and switches default comment rendering to HTML table. |
| src/index.ts | Plumbs inspectUrl through outputs/comments; always runs inspect currently. |
| src/github-comments.ts | Passes inspectUrl into buildCommentBody() for commit/PR comments. |
| src/tests/vercel.test.ts | Updates inspect unit tests for the new return shape + inspector URL parsing. |
| src/tests/utils.test.ts | Adds coverage for HTML escaping/table output and updated comment body behavior. |
| src/tests/github-comments.test.ts | Updates expectations for table-based comment rendering. |
| src/integration/vercel-api.test.ts | Updates integration assertions to use result.name. |
| .please/docs/tracks/index.md | Adds the new track entry. |
| .please/docs/tracks/active/improve-github-comment-20260329/* | Adds spec/plan/metadata for the feature track. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
0 issues found across 1 file (changes from recent commits).
Requires human review: This PR modifies core deployment logic and internal interfaces to redesign GitHub comments using HTML tables. These structural changes and the introduction of new HTML-based formatting warrant human审.
Guard vercelInspect call when deploymentUrl is empty to avoid unnecessary CLI/API calls with invalid input.
|
Summary
InspectResultreturn type from Vercel inspectChanges
src/types.ts— NewInspectResultinterfacesrc/utils.ts— NewbuildHtmlTableComment(), updatedbuildCommentBody()src/github-comments.ts— PassinspectUrlthrough comment functionssrc/index.ts— Wire inspect URL from deployment flowsrc/vercel-cli.ts/src/vercel-api.ts— ReturnInspectResultfrom inspectTest plan
pnpm test)Closes #319
Summary by cubic
Redesigned GitHub deployment comments to a rich HTML table that shows project, status, preview URL, commit, aliases, and an Inspect link. Keeps custom templates working and adds safer, more robust inspect handling. Closes #319.
New Features
github-comment: true) now renders a structured HTML table.InspectResult; included in comments when available.Bug Fixes
vercelInspectwhendeploymentUrlis empty.nameandinspectUrl.Written for commit dafd38c. Summary will update on new commits.