From 5e26390ad269a0392c055efff6499b1655cb5f83 Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Mon, 10 Aug 2026 14:55:43 +0300
Subject: [PATCH] fix: make the composer caret more visible

Thickens the CodeMirror cursor to 2px
Adds a slight vertical scale so the caret stands out above glyphs
Covers the new cursor styling with a test
---
 .../chat/composer/editor/__tests__/theme.test.ts          | 8 ++++++++
 packages/ui/src/components/chat/composer/editor/theme.ts  | 8 +++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/chat/composer/editor/__tests__/theme.test.ts b/packages/ui/src/components/chat/composer/editor/__tests__/theme.test.ts
index 9dfddf86..bf2c86bb 100644
--- a/packages/ui/src/components/chat/composer/editor/__tests__/theme.test.ts
+++ b/packages/ui/src/components/chat/composer/editor/__tests__/theme.test.ts
@@ -46,6 +46,14 @@ describe('composerEditorTheme', () => {
         expect(rule.borderLeftColor.startsWith('var(--')).toBe(true);
     });
 
+    test('the drawn caret is wide enough to remain prominent', () => {
+        const cursorRule = selectors.find((selector) => selector.includes('.cm-cursor'));
+        const rule = (COMPOSER_EDITOR_THEME_SPEC as Record<string, Record<string, string>>)[cursorRule!];
+        expect(rule.borderLeftWidth).toBe('2px');
+        expect(rule.transform).toBe('scaleY(1.15)');
+        expect(rule.transformOrigin).toBe('center');
+    });
+
     /**
      * CodeMirror's own `.cm-cursor` rule and its `&dark` override are one and
      * two classes deep respectively; a bare `.cm-cursor` selector loses to the
diff --git a/packages/ui/src/components/chat/composer/editor/theme.ts b/packages/ui/src/components/chat/composer/editor/theme.ts
index 0b685c96..18ff9236 100644
--- a/packages/ui/src/components/chat/composer/editor/theme.ts
+++ b/packages/ui/src/components/chat/composer/editor/theme.ts
@@ -30,7 +30,10 @@ export const COMPOSER_EDITOR_THEME_SPEC = {
     // `caret-color: transparent !important` at the highest precedence and
     // draws its own `.cm-cursor` element, whose base style is a hard-coded
     // `border-left: 1.2px solid black`. Styling `caret-color` here therefore
-    // does nothing at all — the border is what has to be coloured.
+    // does nothing at all — the border is what has to be coloured. A 2px
+    // stroke makes the insertion point remain visible against every composer
+    // surface without relying on a fixed colour. A slight vertical scale makes
+    // it extend beyond the glyphs without changing CodeMirror's line geometry.
     //
     // CodeMirror recolours it for dark editors through `&dark .cm-cursor`,
     // which needs the theme to declare itself dark. OpenChamber themes are not
@@ -43,6 +46,9 @@ export const COMPOSER_EDITOR_THEME_SPEC = {
     // moment this module is imported.
     '&.cm-editor .cm-cursor, &.cm-editor .cm-dropCursor': {
         borderLeftColor: 'var(--surface-foreground)',
+        borderLeftWidth: '2px',
+        transform: 'scaleY(1.15)',
+        transformOrigin: 'center',
     },
     '.cm-line': { padding: '0' },
     '.cm-scroller': {