fix(vscode): show dates on inline PR comments

.changeset/inline-pr-comment-dates.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Show relative dates on inline pull request review comments.

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 <View {...options} />", "}", ""],
@@ -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

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) {
         <Show when={props.open} fallback={<span class="am-pr-comment-preview">{preview(props.comment.body)}</span>}>
           <Show when={!props.inline && location()}>{(value) => <span class="am-pr-comment-file">{value()}</span>}</Show>
         </Show>
-        <Show when={props.comment.outdated}>
-          <span class="am-pr-comment-tag">{t("agentManager.pr.comment.outdated")}</span>
-        </Show>
-        <Show when={props.inline && props.resolved}>
-          <span class="am-pr-comment-tag">{t("agentManager.pr.comment.resolved")}</span>
-        </Show>
-        <Show when={props.sent}>
-          <span class="am-pr-comment-tag am-pr-comment-tag-sent">{t("agentManager.pr.comment.sent")}</span>
-        </Show>
+        <div class="am-pr-comment-tags">
+          <Show when={props.comment.outdated}>
+            <span class="am-pr-comment-tag">{t("agentManager.pr.comment.outdated")}</span>
+          </Show>
+          <Show when={props.inline && props.resolved}>
+            <span class="am-pr-comment-tag">{t("agentManager.pr.comment.resolved")}</span>
+          </Show>
+          <Show when={props.sent}>
+            <span class="am-pr-comment-tag am-pr-comment-tag-sent">{t("agentManager.pr.comment.sent")}</span>
+          </Show>
+          <PRCommentTime time={props.comment.createdAt} />
+        </div>
       </button>
 
       <Show when={props.open}>

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 (
+    <Show when={props.time}>
+      {(time) => <span class="am-pr-comment-time">{formatRelativeDate(new Date(time()).toISOString())}</span>}
+    </Show>
+  )
+}

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) {
           <Show when={props.sent}>
             <span class="am-pr-comment-tag am-pr-comment-tag-sent">{t("agentManager.pr.comment.sent")}</span>
           </Show>
-          <Show when={props.comment.createdAt}>
-            {(time) => <span class="am-pr-comment-time">{formatRelativeDate(new Date(time()).toISOString())}</span>}
-          </Show>
+          <PRCommentTime time={props.comment.createdAt} />
         </div>
       </button>
 

packages/kilo-vscode/webview-ui/src/stories/agent-manager.stories.tsx

@@ -1999,6 +1999,7 @@ const prComments: NonNullable<PRStatus["comments"]> = {
       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",