diff --git a/.changeset/inline-pr-comment-dates.md b/.changeset/inline-pr-comment-dates.md new file mode 100644 index 000000000000..6be8cddfcf8f --- /dev/null +++ b/.changeset/inline-pr-comment-dates.md @@ -0,0 +1,5 @@ +--- +"kilo-code": patch +--- + +Show relative dates on inline pull request review comments. diff --git a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/pr-panel-comments-200-chromium-linux.png b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/pr-panel-comments-200-chromium-linux.png index 4561c5ae7d71..e6c44521b457 100644 --- a/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/pr-panel-comments-200-chromium-linux.png +++ b/packages/kilo-docs/public/img/screenshot-tests/kilo-vscode/visual-regression/agentmanager/pr-panel-comments-200-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5aa7b06400459672f99888f9562ea8dda390e5398cd212ad5f5d16821a57a32d -size 43335 +oid sha256:b472b5fe44069a16c6e8700c61345540a5ebae72ce43131f855fce16b799ba07 +size 44073 diff --git a/packages/kilo-vscode/tests/fixtures/pr-comments-render.tsx b/packages/kilo-vscode/tests/fixtures/pr-comments-render.tsx index 78f9765db5cc..89378e9a344a 100644 --- a/packages/kilo-vscode/tests/fixtures/pr-comments-render.tsx +++ b/packages/kilo-vscode/tests/fixtures/pr-comments-render.tsx @@ -84,6 +84,7 @@ const [comments, setComments] = createSignal({ line: 14, resolved: false, outdated: false, + createdAt: Date.now() - 5 * 60 * 1000, diffHunk: HUNK, // Read from the worktree by the extension: a hunk stops at the commented line. after: [" return ", "}", ""], @@ -128,6 +129,8 @@ const comment = shadow?.querySelector('[data-content] span[style*="--syntax-comm const code = shadow?.querySelectorAll("[data-content] [data-line]") assert.match(root.textContent ?? "", /comment body survives Pierre rendering/) assert.match(root.textContent ?? "", /reply body is visible/) +assert.equal(root.querySelector('[data-thread-id="PRRT_open"] .am-pr-comment-time')?.textContent, "5 min ago") +assert.equal(root.querySelector('[data-thread-id="PRRT_done"] .am-pr-comment-time'), null) assert.equal(root.querySelectorAll('[data-component="diff"]').length, 1) // Four hunk lines ending at the commented line, like the GitHub comment // snippet, then the worktree lines below it so a comment about what happens diff --git a/packages/kilo-vscode/webview-ui/agent-manager/pr/PRCommentCard.tsx b/packages/kilo-vscode/webview-ui/agent-manager/pr/PRCommentCard.tsx index e7cecb3aa7a7..aea2cd97551f 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/pr/PRCommentCard.tsx +++ b/packages/kilo-vscode/webview-ui/agent-manager/pr/PRCommentCard.tsx @@ -11,6 +11,7 @@ import { PRCommentDiff } from "../../diff-viewer/PRCommentDiff" import { CopyButton } from "./CopyButton" import { PRAvatar } from "./PRAvatar" import { prMarkdown, preview } from "./pr-comment-payload" +import { PRCommentTime } from "./PRCommentTime" import type { PRComment } from "./pr-types" interface Props { @@ -65,15 +66,18 @@ export function PRCommentCard(props: Props) { {preview(props.comment.body)}}> {(value) => {value()}} - - {t("agentManager.pr.comment.outdated")} - - - {t("agentManager.pr.comment.resolved")} - - - {t("agentManager.pr.comment.sent")} - +
+ + {t("agentManager.pr.comment.outdated")} + + + {t("agentManager.pr.comment.resolved")} + + + {t("agentManager.pr.comment.sent")} + + +
diff --git a/packages/kilo-vscode/webview-ui/agent-manager/pr/PRCommentTime.tsx b/packages/kilo-vscode/webview-ui/agent-manager/pr/PRCommentTime.tsx new file mode 100644 index 000000000000..c42221064b10 --- /dev/null +++ b/packages/kilo-vscode/webview-ui/agent-manager/pr/PRCommentTime.tsx @@ -0,0 +1,11 @@ +/** @jsxImportSource solid-js */ +import { Show } from "solid-js" +import { formatRelativeDate } from "../../src/utils/date" + +export function PRCommentTime(props: { time?: number }) { + return ( + + {(time) => {formatRelativeDate(new Date(time()).toISOString())}} + + ) +} diff --git a/packages/kilo-vscode/webview-ui/agent-manager/pr/PRConversation.tsx b/packages/kilo-vscode/webview-ui/agent-manager/pr/PRConversation.tsx index f74ea6711ac1..eae887db6e08 100644 --- a/packages/kilo-vscode/webview-ui/agent-manager/pr/PRConversation.tsx +++ b/packages/kilo-vscode/webview-ui/agent-manager/pr/PRConversation.tsx @@ -6,9 +6,9 @@ import { IconButton } from "@kilocode/kilo-ui/icon-button" import { Markdown } from "@kilocode/kilo-ui/markdown" import { Tooltip } from "@kilocode/kilo-ui/tooltip" import { useLanguage } from "../../src/context/language" -import { formatRelativeDate } from "../../src/utils/date" import { sendReviewComments } from "../../diff-viewer/review-annotations" import { CopyButton } from "./CopyButton" +import { PRCommentTime } from "./PRCommentTime" import { SectionHeading } from "./SectionHeading" import { commentState, patchCommentState } from "./pr-comment-state" import { githubUrl, prConversationMarkdown, prConversationPayload, preview, SEND_LIMIT } from "./pr-comment-payload" @@ -92,9 +92,7 @@ function PRConversationCard(props: CardProps) { {t("agentManager.pr.comment.sent")} - - {(time) => {formatRelativeDate(new Date(time()).toISOString())}} - + diff --git a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx index 548743b704b6..d1812b7b7285 100644 --- a/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx +++ b/packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx @@ -1999,6 +1999,7 @@ const prComments: NonNullable = { url: "https://github.com/org/repo/pull/8594#discussion_r1", resolved: false, outdated: false, + createdAt: Date.now() - 5 * 60 * 1000, diffHunk: '@@ -39,7 +39,7 @@ export function execGhRead(args: string[]) {\n- return execWithShellEnv("gh", args, options)\n+ return execWithShellEnv("gh", args, { ...options, env: env(options) })', side: "additions",