Merge pull request #495 from Mng-dev-ai/fix/frontend-claude-md-compliance

Fix frontend CLAUDE.md rule violations

Author: Mng-dev-ai

frontend/src/App.tsx

@@ -9,7 +9,8 @@ import { useResolvedTheme } from '@/hooks/useResolvedTheme';
 import { useCurrentUserQuery } from '@/hooks/queries/useAuthQueries';
 import { useInfiniteChatsQuery } from '@/hooks/queries/useChatQueries';
 import { LoadingScreen } from '@/components/ui/LoadingScreen';
-import { useGlobalStream, useStreamRestoration } from '@/hooks/useChatStreaming';
+import { useGlobalStream } from '@/hooks/useGlobalStream';
+import { useStreamRestoration } from '@/hooks/useStreamRestoration';
 import { authService } from '@/services/authService';
 import { toasterConfig } from '@/config/toaster';
 import { AuthRoute } from '@/components/routes/AuthRoute';

frontend/src/components/chat/sub-threads/CreateSubThreadDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { GitBranch, Brain, Shield } from 'lucide-react';
 import toast from 'react-hot-toast';
@@ -90,11 +90,14 @@ export function CreateSubThreadDialog({ parentChat, onClose }: CreateSubThreadDi
     agentKind,
   });
 
-  useEffect(() => {
+  // Select first model when models load — ref-based check avoids extra render cycle
+  const prevModelsRef = useRef(models);
+  if (prevModelsRef.current !== models) {
+    prevModelsRef.current = models;
     if (!selectedModelId && models.length > 0) {
       setSelectedModelId(models[0].model_id);
     }
-  }, [models, selectedModelId]);
+  }
 
   const createSubThread = useCreateSubThreadMutation(parentChat.id);
 

frontend/src/components/chat/workspace-selector/WorkspaceSelector.tsx

@@ -370,6 +370,8 @@ export function WorkspaceSelector({
   const [repoSearchQuery, setRepoSearchQuery] = useState('');
   const [debouncedRepoQuery, setDebouncedRepoQuery] = useState('');
   const [showUrlInput, setShowUrlInput] = useState(false);
+  // Form state initialization from server settings — useEffect is correct here
+  // because sandboxProvider is user-editable form state that diverges from the source
   useEffect(() => {
     if (defaultProvider) {
       setSandboxProvider(defaultProvider);

frontend/src/components/editor/editor-view/Content.tsx

@@ -1,8 +1,9 @@
-import { memo } from 'react';
-import Editor from '@monaco-editor/react';
+import { memo, lazy, Suspense } from 'react';
 import type * as monaco from 'monaco-editor';
 import { MONACO_FONT_FAMILY } from '@/config/constants';
 
+const Editor = lazy(() => import('@monaco-editor/react'));
+
 const EDITOR_OPTIONS = {
   minimap: { enabled: false },
   scrollBeyondLastLine: false,
@@ -59,29 +60,41 @@ export const Content = memo(function Content({
   onMount,
   theme,
 }: ContentProps) {
+  const loadingFallback = (
+    <div
+      className={`flex h-full items-center justify-center text-xs text-text-quaternary ${theme === 'custom-light' ? 'bg-surface-secondary' : 'bg-surface-dark-secondary'}`}
+    >
+      <div className="animate-pulse">Loading editor...</div>
+    </div>
+  );
+
   return (
     <div className="h-full">
-      <Editor
-        height="100%"
-        language={language}
-        path={`file://${language}`}
-        value={content}
-        onChange={onChange}
-        theme={theme}
-        options={{
-          ...EDITOR_OPTIONS,
-          readOnly: isReadOnly,
-        }}
-        onMount={onMount}
-        loading={
-          <div
-            className={`flex h-full items-center justify-center text-xs text-text-quaternary ${theme === 'custom-light' ? 'bg-surface-secondary' : 'bg-surface-dark-secondary'}`}
-          >
-            <div className="animate-pulse">Loading editor...</div>
-          </div>
-        }
-        className={theme === 'custom-light' ? 'bg-surface-secondary' : 'bg-surface-dark-secondary'}
-      />
+      <Suspense fallback={loadingFallback}>
+        <Editor
+          height="100%"
+          language={language}
+          path={`file://${language}`}
+          value={content}
+          onChange={onChange}
+          theme={theme}
+          options={{
+            ...EDITOR_OPTIONS,
+            readOnly: isReadOnly,
+          }}
+          onMount={onMount}
+          loading={
+            <div
+              className={`flex h-full items-center justify-center text-xs text-text-quaternary ${theme === 'custom-light' ? 'bg-surface-secondary' : 'bg-surface-dark-secondary'}`}
+            >
+              <div className="animate-pulse">Loading editor...</div>
+            </div>
+          }
+          className={
+            theme === 'custom-light' ? 'bg-surface-secondary' : 'bg-surface-dark-secondary'
+          }
+        />
+      </Suspense>
     </div>
   );
 });

frontend/src/components/layout/TitleBar.tsx

@@ -38,7 +38,7 @@ export function TrafficLights() {
         type="button"
         variant="unstyled"
         onClick={handleClose}
-        className="group flex h-3 w-3 items-center justify-center rounded-full bg-[#ff5f57] transition-opacity hover:opacity-90"
+        className="group flex h-3 w-3 items-center justify-center rounded-full bg-traffic-close transition-opacity hover:opacity-90"
         aria-label="Close window"
       >
         {isHovered && (
@@ -56,7 +56,7 @@ export function TrafficLights() {
         type="button"
         variant="unstyled"
         onClick={handleMinimize}
-        className="group flex h-3 w-3 items-center justify-center rounded-full bg-[#febc2e] transition-opacity hover:opacity-90"
+        className="group flex h-3 w-3 items-center justify-center rounded-full bg-traffic-minimize transition-opacity hover:opacity-90"
         aria-label="Minimize window"
       >
         {isHovered && (
@@ -69,7 +69,7 @@ export function TrafficLights() {
         type="button"
         variant="unstyled"
         onClick={handleMaximize}
-        className="group flex h-3 w-3 items-center justify-center rounded-full bg-[#28c840] transition-opacity hover:opacity-90"
+        className="group flex h-3 w-3 items-center justify-center rounded-full bg-traffic-maximize transition-opacity hover:opacity-90"
         aria-label="Maximize window"
       >
         {isHovered && (

frontend/src/hooks/useChatStreaming.ts

@@ -15,9 +15,6 @@ import { useClipboard } from '@/hooks/useClipboard';
 import { useStreamCallbacks } from '@/hooks/useStreamCallbacks';
 import { useStreamReconnect } from '@/hooks/useStreamReconnect';
 
-export { useStreamRestoration } from './useStreamRestoration';
-export { useGlobalStream } from './useGlobalStream';
-
 interface UseChatStreamingParams {
   chatId: string | undefined;
   currentChat: Chat | undefined;

frontend/tailwind.config.js

@@ -107,6 +107,11 @@ export default {
           },
         },
 
+        // macOS traffic light colors
+        'traffic-close': '#ff5f57',
+        'traffic-minimize': '#febc2e',
+        'traffic-maximize': '#28c840',
+
         // Text colors
         text: {
           primary: '#0f172a',