From 7188e22bdc320d91a879c70d4eb77960a72661df Mon Sep 17 00:00:00 2001
From: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
Date: Wed, 2 Sep 2026 15:18:46 +0800
Subject: [PATCH] fix(ui): use ghost comment cancel button (#46743)

---
 packages/session-ui/component-tests/line-comment-v2.spec.ts | 6 ++++++
 .../src/data-display/line-comment/line-comment.stories.tsx  | 2 +-
 packages/ui/src/data-display/line-comment/line-comment.tsx  | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 packages/session-ui/component-tests/line-comment-v2.spec.ts

diff --git a/packages/session-ui/component-tests/line-comment-v2.spec.ts b/packages/session-ui/component-tests/line-comment-v2.spec.ts
new file mode 100644
index 00000000000..887bdb3e90e
--- /dev/null
+++ b/packages/session-ui/component-tests/line-comment-v2.spec.ts
@@ -0,0 +1,6 @@
+import { expect, story } from "../../storybook/playwright/story"
+
+story("renders the line comment cancel action as a ghost button", async ({ mount }) => {
+  const root = await mount("ui-line-comment--editor-filled")
+  await expect(root.getByRole("button", { name: "Cancel" })).toHaveAttribute("data-variant", "ghost")
+})
diff --git a/packages/ui/src/data-display/line-comment/line-comment.stories.tsx b/packages/ui/src/data-display/line-comment/line-comment.stories.tsx
index cc1e3a5a917..5d3683bf212 100644
--- a/packages/ui/src/data-display/line-comment/line-comment.stories.tsx
+++ b/packages/ui/src/data-display/line-comment/line-comment.stories.tsx
@@ -3,7 +3,7 @@ import { createSignal } from "solid-js"
 import { LineCommentEditor, LineComment, LineCommentOverflowIcon } from "./line-comment"
 
 const docs = `### Overview
-Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`Button\` neutral + contrast actions).
+Line comment **display** and **editor** cards aligned with OpenCode line-comment specs (raised \`#FAFAFA\` surface, footer line context, \`Button\` ghost + contrast actions).
 
 ### Display
 - \`LineComment\`: column stack (body + meta) beside optional \`actions\` (overflow).
diff --git a/packages/ui/src/data-display/line-comment/line-comment.tsx b/packages/ui/src/data-display/line-comment/line-comment.tsx
index 7118897842d..6d176ccd64a 100644
--- a/packages/ui/src/data-display/line-comment/line-comment.tsx
+++ b/packages/ui/src/data-display/line-comment/line-comment.tsx
@@ -294,7 +294,7 @@ export function LineCommentEditor(props: LineCommentEditorProps) {
         <div data-slot="line-comment-v2-footer">
           <div data-slot="line-comment-v2-footer-meta">{local.selection}</div>
           <div data-slot="line-comment-v2-footer-actions">
-            <Button type="button" size="normal" variant="neutral" onClick={() => local.onCancel()}>
+            <Button type="button" size="normal" variant="ghost" onClick={() => local.onCancel()}>
               {local.cancelLabel ?? i18n.t("ui.lineComment.cancel")}
             </Button>
             <Button type="button" size="normal" variant="contrast" disabled={!canSubmit()} onClick={submit}>