(rocketmq-dashboard) branch rocketmq-studio updated: fix(ai): render the composer context percent at the 14px minimum (#5230)

[li...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git


The following commit(s) were added to refs/heads/rocketmq-studio by this push:
     new fbd038b44 fix(ai): render the composer context percent at the 14px minimum (#5230)
fbd038b44 is described below

commit fbd038b448e62699fd92c695d9cc945e76ad1c95
Author: 0 <19...@qq.com>
AuthorDate: Fri Oct 9 11:31:04 2026 +0800

    fix(ai): render the composer context percent at the 14px minimum (#5230)
    
    The context-usage label in the composer was the one remaining 13px inline style, below the 14px
    minimum the rest of the UI holds, and it sits on the default path rather than in a hidden state.
    Bumped to 14 and pinned by a case that goes red if it is reverted. Two further `fontSize: 13`
    occurrences in `layouts/MainLayout.tsx` are the same class of violation and are left for a separate
    change.
---
 web/src/pages/ai/components/Composer.tsx                |  2 +-
 web/src/pages/ai/components/__tests__/Composer.test.tsx | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/ai/components/Composer.tsx b/web/src/pages/ai/components/Composer.tsx
index 6587878fb..3ea68e9bf 100644
--- a/web/src/pages/ai/components/Composer.tsx
+++ b/web/src/pages/ai/components/Composer.tsx
@@ -549,7 +549,7 @@ const Composer = ({
                         />
                         <span
                           style={{
-                            fontSize: 13,
+                            fontSize: 14,
                             color: token.colorTextSecondary,
                             fontVariantNumeric: 'tabular-nums',
                           }}
diff --git a/web/src/pages/ai/components/__tests__/Composer.test.tsx b/web/src/pages/ai/components/__tests__/Composer.test.tsx
index fd432eb7e..cc8dce226 100644
--- a/web/src/pages/ai/components/__tests__/Composer.test.tsx
+++ b/web/src/pages/ai/components/__tests__/Composer.test.tsx
@@ -300,4 +300,19 @@ describe('Composer', () => {
     expect(props.onOpenPromptTemplates).toHaveBeenCalledTimes(1);
     expect(props.onEnhanceChange).toHaveBeenCalledWith(true);
   });
+
+  // The 14px minimum is a project-wide review rule; the context-usage percent label regressed to
+  // 13px once (#4941). The bar only renders once usage reaches 1% of the window, so the fixture
+  // pushes the conversation past that threshold to make the label inspectable.
+  it('rendersTheContextPercentLabelAtThe14pxMinimumTest', () => {
+    const { container } = renderComposer({ contextTokens: 64000 });
+
+    expect(screen.getByTestId('ai-context-bar')).toBeInTheDocument();
+    expect(screen.getByText('50%')).toBeInTheDocument();
+
+    const tooSmall = Array.from(container.querySelectorAll<HTMLElement>('[style]')).filter(
+      (element) => element.style.fontSize === '13px',
+    );
+    expect(tooSmall).toHaveLength(0);
+  });
 });