Merge pull request #224 from GCWing/gcwing/dev

Merge gcwing/dev to main

Author: GCWing

src/web-ui/src/app/components/NavPanel/NavPanel.scss

@@ -1375,6 +1375,9 @@ $_section-header-height: 24px;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: $size-gap-1;
   min-width: 140px;
   padding: $size-gap-1;
   background: var(--color-bg-elevated, #1e1e22);
@@ -1393,7 +1396,7 @@ $_section-header-height: 24px;
   gap: $size-gap-2;
   width: 100%;
   padding: 0 $size-gap-2;
-  height: 30px;
+  height: 24px;
   border: none;
   border-radius: $size-radius-sm;
   background: transparent;
@@ -1449,27 +1452,6 @@ $_section-header-height: 24px;
   white-space: nowrap;
 }
 
-.bitfun-nav-panel__footer-multimodal-item-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: var(--color-primary);
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-// Active dot badge on main Layers button
-.bitfun-nav-panel__footer-multimodal-dot {
-  position: absolute;
-  bottom: 5px;
-  right: 5px;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: var(--color-primary);
-  pointer-events: none;
-}
-
 // Hover-open subtle glow on the main button
 .bitfun-nav-panel__footer-btn--icon.is-hover-open {
   color: var(--color-text-primary);

src/web-ui/src/app/components/NavPanel/components/PersistentFooterActions.tsx

@@ -270,9 +270,6 @@ const PersistentFooterActions: React.FC = () => {
                     aria-haspopup="menu"
                   >
                     <Layers size={15} />
-                    {isAnyActive && (
-                      <span className="bitfun-nav-panel__footer-multimodal-dot" aria-hidden />
-                    )}
                   </button>
                 </Tooltip>
 
@@ -291,7 +288,6 @@ const PersistentFooterActions: React.FC = () => {
                     >
                       <Globe size={13} className="bitfun-nav-panel__footer-multimodal-item-icon" />
                       <span className="bitfun-nav-panel__footer-multimodal-item-label">{t('scenes.browser')}</span>
-                      {isBrowserActive && <span className="bitfun-nav-panel__footer-multimodal-item-dot" aria-hidden />}
                     </button>
 
                     <button
@@ -303,7 +299,6 @@ const PersistentFooterActions: React.FC = () => {
                     >
                       <Network size={13} className="bitfun-nav-panel__footer-multimodal-item-icon" />
                       <span className="bitfun-nav-panel__footer-multimodal-item-label">{t('scenes.mermaidEditor')}</span>
-                      {isMermaidActive && <span className="bitfun-nav-panel__footer-multimodal-item-dot" aria-hidden />}
                     </button>
                   </div>
                 )}

src/web-ui/src/flow_chat/components/CodePreview.scss

@@ -6,6 +6,8 @@
 @use '../../component-library/styles/_extended-mixins' as mixins;
 
 .code-preview {
+  --markdown-font-mono: "Fira Code", "JetBrains Mono", Consolas, "Courier New", monospace;
+
   position: relative;
   width: 100%;
   background: transparent;
@@ -29,6 +31,13 @@
         white-space: pre-wrap !important;
         word-break: break-word !important;
         cursor: text;
+        font-family: var(--markdown-font-mono, "Fira Code", "JetBrains Mono", Consolas, "Courier New", monospace) !important;
+        font-weight: 400 !important;
+
+        // Prism themes mark many tokens bold; match markdown body / code blocks (regular weight).
+        span[style] {
+          font-weight: 400 !important;
+        }
 
         > span[style] {
           &:hover {
@@ -113,5 +122,9 @@
     .linenumber {
       color: var(--color-text-muted, #94a3b8) !important;
     }
+
+    pre code > span[style]:hover {
+      background-color: rgba(0, 0, 0, 0.06) !important;
+    }
   }
 }

src/web-ui/src/flow_chat/components/CodePreview.tsx

@@ -13,8 +13,9 @@
 
 import React, { useMemo, memo, useRef, useEffect, useState, useCallback } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { getPrismLanguage } from '@/infrastructure/language-detection';
+import { useTheme } from '@/infrastructure/theme';
+import { buildCodePreviewPrismStyle, CODE_PREVIEW_FONT_FAMILY } from './codePreviewPrismTheme';
 import './CodePreview.scss';
 
 export interface CodePreviewProps {
@@ -46,29 +47,6 @@ function detectLanguageFromPath(filePath: string): string {
   return getPrismLanguage(filePath);
 }
 
-/**
- * Custom theme derived from vscDarkPlus with project-specific tweaks.
- */
-const customStyle = {
-  ...vscDarkPlus,
-  'pre[class*="language-"]': {
-    ...vscDarkPlus['pre[class*="language-"]'],
-    margin: 0,
-    padding: 0,
-    background: 'transparent',
-    fontSize: '12px',
-    lineHeight: '1.6',
-    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace",
-  },
-  'code[class*="language-"]': {
-    ...vscDarkPlus['code[class*="language-"]'],
-    background: 'transparent',
-    fontSize: '12px',
-    lineHeight: '1.6',
-    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace",
-  },
-};
-
 /**
  * CodePreview component with streaming-friendly syntax highlighting.
  */
@@ -83,6 +61,9 @@ export const CodePreview: React.FC<CodePreviewProps> = memo(({
   maxHeight = 400,
   onLineClick,
 }) => {
+  const { isLight } = useTheme();
+  const prismStyle = useMemo(() => buildCodePreviewPrismStyle(isLight), [isLight]);
+
   const containerRef = useRef<HTMLDivElement>(null);
   const prevContentLengthRef = useRef(0);
 
@@ -151,7 +132,7 @@ export const CodePreview: React.FC<CodePreviewProps> = memo(({
       >
         <SyntaxHighlighter
           language={detectedLanguage}
-          style={customStyle}
+          style={prismStyle}
           showLineNumbers={showLineNumbers}
           wrapLines={true}
           wrapLongLines={true}
@@ -164,9 +145,10 @@ export const CodePreview: React.FC<CodePreviewProps> = memo(({
           }}
           codeTagProps={{
             style: {
-              fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace",
+              fontFamily: CODE_PREVIEW_FONT_FAMILY,
               fontSize: '12px',
               lineHeight: '1.6',
+              fontWeight: 400,
             }
           }}
           lineNumberStyle={{
@@ -175,7 +157,7 @@ export const CodePreview: React.FC<CodePreviewProps> = memo(({
             textAlign: 'right',
             userSelect: 'none',
             color: 'var(--color-text-muted, #666)',
-            opacity: 0.6,
+            opacity: isLight ? 0.88 : 0.6,
           }}
         >
           {content}

src/web-ui/src/flow_chat/components/InlineDiffPreview.scss

@@ -4,11 +4,14 @@
  */
 
 .inline-diff-preview {
+  --markdown-font-mono: "Fira Code", "JetBrains Mono", Consolas, "Courier New", monospace;
+
   position: relative;
   width: 100%;
   background: transparent;
-  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-family: var(--markdown-font-mono, "Fira Code", "JetBrains Mono", Consolas, "Courier New", monospace);
   font-size: 12px;
+  font-weight: 400;
 
   &__content {
     overflow-y: auto;
@@ -200,6 +203,10 @@
       display: inline !important;
       font-size: inherit !important;
     }
+
+    code span[style] {
+      font-weight: 400 !important;
+    }
   }
 }
 

src/web-ui/src/flow_chat/components/InlineDiffPreview.tsx

@@ -12,10 +12,11 @@
 
 import React, { useMemo, memo, useRef, useCallback, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { diffLines, Change } from 'diff';
 import { getPrismLanguage } from '@/infrastructure/language-detection';
+import { useTheme } from '@/infrastructure/theme';
 import { createLogger } from '@/shared/utils/logger';
+import { buildCodePreviewPrismStyle, CODE_PREVIEW_FONT_FAMILY } from './codePreviewPrismTheme';
 import './InlineDiffPreview.scss';
 
 const log = createLogger('InlineDiffPreview');
@@ -168,29 +169,6 @@ function applyContextCollapsing(diffLines: DiffLine[], contextLines: number): Di
   return result;
 }
 
-/**
- * Custom theme styles (kept in sync with CodePreview).
- */
-const customStyle = {
-  ...vscDarkPlus,
-  'pre[class*="language-"]': {
-    ...vscDarkPlus['pre[class*="language-"]'],
-    margin: 0,
-    padding: 0,
-    background: 'transparent',
-    fontSize: '12px',
-    lineHeight: '1.6',
-    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace",
-  },
-  'code[class*="language-"]': {
-    ...vscDarkPlus['code[class*="language-"]'],
-    background: 'transparent',
-    fontSize: '12px',
-    lineHeight: '1.6',
-    fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace",
-  },
-};
-
 /**
  * InlineDiffPreview component.
  */
@@ -207,6 +185,9 @@ export const InlineDiffPreview: React.FC<InlineDiffPreviewProps> = memo(({
   contextLines = 3,
   onLineClick,
 }) => {
+  const { isLight } = useTheme();
+  const prismStyle = useMemo(() => buildCodePreviewPrismStyle(isLight), [isLight]);
+
   const containerRef = useRef<HTMLDivElement>(null);
   const [highlightedLine, setHighlightedLine] = useState<number | null>(null);
 
@@ -285,7 +266,7 @@ export const InlineDiffPreview: React.FC<InlineDiffPreviewProps> = memo(({
         <span className="diff-line__content">
           <SyntaxHighlighter
             language={detectedLanguage}
-            style={customStyle}
+            style={prismStyle}
             customStyle={{
               margin: 0,
               padding: 0,
@@ -294,8 +275,9 @@ export const InlineDiffPreview: React.FC<InlineDiffPreviewProps> = memo(({
             }}
             codeTagProps={{
               style: {
-                fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'Monaco', 'Courier New', monospace",
+                fontFamily: CODE_PREVIEW_FONT_FAMILY,
                 fontSize: '12px',
+                fontWeight: 400,
               }
             }}
             PreTag="span"
@@ -305,7 +287,7 @@ export const InlineDiffPreview: React.FC<InlineDiffPreviewProps> = memo(({
         </span>
       </div>
     );
-  }, [detectedLanguage, showLineNumbers, lineNumberMode, showPrefix, highlightedLine, handleLineClick]);
+  }, [detectedLanguage, prismStyle, showLineNumbers, lineNumberMode, showPrefix, highlightedLine, handleLineClick]);
 
   if (!originalContent && !modifiedContent) {
     return (

src/web-ui/src/flow_chat/components/codePreviewPrismTheme.ts

@@ -0,0 +1,38 @@
+/**
+ * Prism themes for Flow Chat embedded code previews.
+ * vscDarkPlus is for dark surfaces; oneLight matches light card backgrounds.
+ */
+import type { CSSProperties } from 'react';
+import { oneLight, vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+/** Match `.markdown-renderer` code blocks (`Markdown.scss` --markdown-font-mono). */
+export const CODE_PREVIEW_FONT_FAMILY =
+  'var(--markdown-font-mono, "Fira Code", "JetBrains Mono", Consolas, "Courier New", monospace)';
+
+const PRE_KEY = 'pre[class*="language-"]' as const;
+const CODE_KEY = 'code[class*="language-"]' as const;
+
+export function buildCodePreviewPrismStyle(isLight: boolean): Record<string, CSSProperties> {
+  const base = isLight ? oneLight : vscDarkPlus;
+  return {
+    ...base,
+    [PRE_KEY]: {
+      ...base[PRE_KEY],
+      margin: 0,
+      padding: 0,
+      background: 'transparent',
+      fontSize: '12px',
+      lineHeight: '1.6',
+      fontFamily: CODE_PREVIEW_FONT_FAMILY,
+      fontWeight: 400,
+    },
+    [CODE_KEY]: {
+      ...base[CODE_KEY],
+      background: 'transparent',
+      fontSize: '12px',
+      lineHeight: '1.6',
+      fontFamily: CODE_PREVIEW_FONT_FAMILY,
+      fontWeight: 400,
+    },
+  };
+}