theme edit and tool display fix

frontend/src/components/SessionSidebar/SessionSidebar.tsx

@@ -130,7 +130,7 @@ export default function SessionSidebar({ onClose }: SessionSidebarProps) {
             fontSize: '0.7rem',
             py: 0.25,
             '& .MuiAlert-message': { py: 0 },
-            borderColor: '#C7A500',
+            borderColor: '#FF9D00',
             color: 'var(--text)',
           }}
         >
@@ -296,7 +296,7 @@ export default function SessionSidebar({ onClose }: SessionSidebarProps) {
             py: 1.25,
             border: 'none',
             borderRadius: '10px',
-            bgcolor: '#C7A500',
+            bgcolor: '#FF9D00',
             color: '#000',
             fontSize: '0.85rem',
             fontWeight: 700,

frontend/src/components/WelcomeScreen/WelcomeScreen.tsx

@@ -12,8 +12,8 @@ import { useAgentStore } from '@/store/agentStore';
 import { apiFetch } from '@/utils/api';
 import { isInIframe, triggerLogin } from '@/hooks/useAuth';
 
-/** HF brand gold */
-const HF_ORANGE = '#C7A500';
+/** HF brand orange */
+const HF_ORANGE = '#FF9D00';
 
 export default function WelcomeScreen() {
   const { createSession } = useSessionStore();
@@ -149,11 +149,11 @@ export default function WelcomeScreen() {
             borderRadius: '12px',
             bgcolor: HF_ORANGE,
             color: '#000',
-            boxShadow: '0 4px 24px rgba(199, 165, 0, 0.3)',
+            boxShadow: '0 4px 24px rgba(255, 157, 0, 0.3)',
             textDecoration: 'none',
             '&:hover': {
               bgcolor: '#FFB340',
-              boxShadow: '0 6px 32px rgba(199, 165, 0, 0.45)',
+              boxShadow: '0 6px 32px rgba(255, 157, 0, 0.45)',
             },
           }}
         >
@@ -174,10 +174,10 @@ export default function WelcomeScreen() {
             borderRadius: '12px',
             bgcolor: HF_ORANGE,
             color: '#000',
-            boxShadow: '0 4px 24px rgba(199, 165, 0, 0.3)',
+            boxShadow: '0 4px 24px rgba(255, 157, 0, 0.3)',
             '&:hover': {
               bgcolor: '#FFB340',
-              boxShadow: '0 6px 32px rgba(199, 165, 0, 0.45)',
+              boxShadow: '0 6px 32px rgba(255, 157, 0, 0.45)',
             },
           }}
         >
@@ -202,13 +202,13 @@ export default function WelcomeScreen() {
             borderRadius: '12px',
             bgcolor: HF_ORANGE,
             color: '#000',
-            boxShadow: '0 4px 24px rgba(199, 165, 0, 0.3)',
+            boxShadow: '0 4px 24px rgba(255, 157, 0, 0.3)',
             '&:hover': {
               bgcolor: '#FFB340',
-              boxShadow: '0 6px 32px rgba(199, 165, 0, 0.45)',
+              boxShadow: '0 6px 32px rgba(255, 157, 0, 0.45)',
             },
             '&.Mui-disabled': {
-              bgcolor: 'rgba(199, 165, 0, 0.35)',
+              bgcolor: 'rgba(255, 157, 0, 0.35)',
               color: 'rgba(0,0,0,0.45)',
             },
           }}

frontend/src/store/agentStore.ts

@@ -253,22 +253,44 @@ export const useAgentStore = create<AgentStore>()(
     const latestTools = state.traceLogs.length > 0 ? [...state.traceLogs] : undefined;
     if (!latestTools) return;
 
+    // Build a lookup of the latest state for each tool by id
+    const toolById = new Map(latestTools.map(t => [t.id, t]));
+
     const updatedMessages = currentMessages.map((msg) => {
       if (msg.id !== state.currentTurnMessageId) return msg;
 
       const segments = msg.segments ? [...msg.segments] : [];
-      const lastToolsIdx = segments.map((s) => s.type).lastIndexOf('tools');
-
-      if (lastToolsIdx >= 0 && lastToolsIdx === segments.length - 1) {
-        // Last segment IS a tools segment — update it in place
-        segments[lastToolsIdx] = { type: 'tools', tools: latestTools };
-      } else if (lastToolsIdx >= 0) {
-        // A tools segment exists but is NOT last (text came after it).
-        // Append a NEW tools segment at the end.
-        segments.push({ type: 'tools', tools: latestTools });
-      } else {
-        // No tools segment at all — create one at the end.
-        segments.push({ type: 'tools', tools: latestTools });
+
+      // First pass: update existing tools in their original segments
+      const placedToolIds = new Set<string>();
+      for (let i = 0; i < segments.length; i++) {
+        if (segments[i].type === 'tools' && segments[i].tools) {
+          segments[i] = {
+            ...segments[i],
+            tools: segments[i].tools!.map(t => {
+              placedToolIds.add(t.id);
+              return toolById.get(t.id) || t;
+            }),
+          };
+        }
+      }
+
+      // Collect only genuinely new tools (not yet in any segment)
+      const newTools = latestTools.filter(t => !placedToolIds.has(t.id));
+
+      if (newTools.length > 0) {
+        const lastToolsIdx = segments.map((s) => s.type).lastIndexOf('tools');
+
+        if (lastToolsIdx >= 0 && lastToolsIdx === segments.length - 1) {
+          // Last segment is tools — append new tools to it
+          segments[lastToolsIdx] = {
+            ...segments[lastToolsIdx],
+            tools: [...(segments[lastToolsIdx].tools || []), ...newTools],
+          };
+        } else {
+          // Text came after previous tools — create a new segment with only new tools
+          segments.push({ type: 'tools', tools: newTools });
+        }
       }
 
       return { ...msg, segments };

frontend/src/theme.ts

@@ -38,14 +38,14 @@ const darkVars = {
   '--surface': '#121416',
   '--text': '#E6EEF8',
   '--muted-text': '#98A0AA',
-  '--accent-yellow': '#C7A500',
-  '--accent-yellow-weak': 'rgba(199,165,0,0.08)',
+  '--accent-yellow': '#FF9D00',
+  '--accent-yellow-weak': 'rgba(255,157,0,0.08)',
   '--accent-green': '#2FCC71',
   '--accent-red': '#E05A4F',
   '--shadow-1': '0 6px 18px rgba(2,6,12,0.55)',
   '--radius-lg': '20px',
   '--radius-md': '12px',
-  '--focus': '0 0 0 3px rgba(199,165,0,0.12)',
+  '--focus': '0 0 0 3px rgba(255,157,0,0.12)',
   '--border': 'rgba(255,255,255,0.03)',
   '--border-hover': 'rgba(255,255,255,0.1)',
   '--code-bg': 'rgba(0,0,0,0.5)',
@@ -75,14 +75,14 @@ const lightVars = {
   '--surface': '#F0F1F3',
   '--text': '#1A1A2E',
   '--muted-text': '#6B7280',
-  '--accent-yellow': '#C7A500',
-  '--accent-yellow-weak': 'rgba(199,165,0,0.08)',
+  '--accent-yellow': '#FF9D00',
+  '--accent-yellow-weak': 'rgba(255,157,0,0.08)',
   '--accent-green': '#16A34A',
   '--accent-red': '#DC2626',
   '--shadow-1': '0 4px 12px rgba(0,0,0,0.08)',
   '--radius-lg': '20px',
   '--radius-md': '12px',
-  '--focus': '0 0 0 3px rgba(199,165,0,0.15)',
+  '--focus': '0 0 0 3px rgba(255,157,0,0.15)',
   '--border': 'rgba(0,0,0,0.08)',
   '--border-hover': 'rgba(0,0,0,0.15)',
   '--code-bg': 'rgba(0,0,0,0.04)',
@@ -93,7 +93,7 @@ const lightVars = {
   '--msg-gradient': 'linear-gradient(180deg, rgba(0,0,0,0.01), transparent)',
   '--body-gradient': 'linear-gradient(180deg, #FFFFFF, #F7F8FA)',
   '--scrollbar-thumb': '#C4C8CC',
-  '--success-icon': '#C7A500',
+  '--success-icon': '#FF9D00',
   '--error-icon': '#DC2626',
   '--clickable-text': 'rgba(0, 0, 0, 0.85)',
   '--clickable-underline': 'rgba(0,0,0,0.25)',
@@ -176,14 +176,14 @@ function makeTextField() {
 export const darkTheme = createTheme({
   palette: {
     mode: 'dark',
-    primary: { main: '#C7A500' },
-    secondary: { main: '#C7A500' },
+    primary: { main: '#FF9D00', light: '#FFB740', dark: '#E08C00', contrastText: '#fff' },
+    secondary: { main: '#FF9D00' },
     background: { default: '#0B0D10', paper: '#0F1316' },
     text: { primary: '#E6EEF8', secondary: '#98A0AA' },
     divider: 'rgba(255,255,255,0.03)',
     success: { main: '#2FCC71' },
     error: { main: '#E05A4F' },
-    warning: { main: '#C7A500' },
+    warning: { main: '#FF9D00' },
     info: { main: '#58A6FF' },
   },
   typography: sharedTypography,
@@ -199,14 +199,14 @@ export const darkTheme = createTheme({
 export const lightTheme = createTheme({
   palette: {
     mode: 'light',
-    primary: { main: '#C7A500' },
-    secondary: { main: '#B8960A' },
+    primary: { main: '#FF9D00', light: '#FFB740', dark: '#E08C00', contrastText: '#fff' },
+    secondary: { main: '#E08C00' },
     background: { default: '#FFFFFF', paper: '#F7F8FA' },
     text: { primary: '#1A1A2E', secondary: '#6B7280' },
     divider: 'rgba(0,0,0,0.08)',
     success: { main: '#16A34A' },
     error: { main: '#DC2626' },
-    warning: { main: '#C7A500' },
+    warning: { main: '#FF9D00' },
     info: { main: '#2563EB' },
   },
   typography: sharedTypography,