Improvement/chat panel lag

app/config/settings.json

@@ -19,7 +19,7 @@
     "openai": "",
     "anthropic": "",
     "google": "",
-    "byteplus": "6aa60576-c6ef-4835-a77a-f7e51d0637ef"
+    "byteplus": ""
   },
   "endpoints": {
     "remote_model_url": "",
@@ -64,5 +64,11 @@
   "browser": {
     "port": 7926,
     "startup_ui": false
+  },
+  "api_keys_configured": {
+    "openai": false,
+    "anthropic": false,
+    "google": true,
+    "byteplus": true
   }
 }

app/ui_layer/browser/frontend/package.json

@@ -10,6 +10,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.10.0",
     "lucide-react": "^0.344.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

app/ui_layer/browser/frontend/src/components/layout/TopBar.tsx

@@ -4,6 +4,7 @@ import { IconButton } from '../ui'
 import { useTheme } from '../../contexts/ThemeContext'
 import { useWebSocket } from '../../contexts/WebSocketContext'
 import { StatusIndicator } from '../ui/StatusIndicator'
+import { useDerivedAgentStatus } from '../../hooks'
 import styles from './TopBar.module.css'
 
 // Simple Discord icon component since lucide-react doesn't have it
@@ -18,7 +19,14 @@ function DiscordIcon() {
 
 export function TopBar() {
   const { theme, toggleTheme } = useTheme()
-  const { connected, status } = useWebSocket()
+  const { connected, actions, messages } = useWebSocket()
+
+  // Derive agent status from actions and messages
+  const derivedStatus = useDerivedAgentStatus({
+    actions,
+    messages,
+    connected,
+  })
 
   return (
     <header className={styles.topBar}>
@@ -32,12 +40,12 @@ export function TopBar() {
         </div>
         <div className={styles.status}>
           <StatusIndicator
-            status={connected ? status.state : 'error'}
+            status={derivedStatus.state}
             size="sm"
             variant="dot"
           />
           <span className={styles.statusText}>
-            {connected ? status.message : 'Disconnected'}
+            {derivedStatus.message}
           </span>
         </div>
       </div>

app/ui_layer/browser/frontend/src/components/ui/MarkdownContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
@@ -9,12 +9,12 @@ interface MarkdownContentProps {
   className?: string
 }
 
-export function MarkdownContent({ content, className = '' }: MarkdownContentProps) {
+export const MarkdownContent = memo(function MarkdownContent({ content, className = '' }: MarkdownContentProps) {
   return (
     <div className={`${styles.markdown} ${className}`}>
       <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
         {content}
       </ReactMarkdown>
     </div>
   )
-}
+})

app/ui_layer/browser/frontend/src/components/ui/StatusIndicator.module.css

@@ -85,7 +85,7 @@
 .dot_working,
 .dot_thinking,
 .dot_running {
-  background: var(#ff4f18, #ff9878);
+  background: #ff4f18;
 }
 
 .dot_error,

app/ui_layer/browser/frontend/src/contexts/WebSocketContext.tsx

@@ -27,6 +27,8 @@ interface WebSocketState {
   onboardingStep: OnboardingStep | null
   onboardingError: string | null
   onboardingLoading: boolean
+  // Unread message tracking
+  lastSeenMessageId: string | null
 }
 
 interface WebSocketContextType extends WebSocketState {
@@ -42,6 +44,17 @@ interface WebSocketContextType extends WebSocketState {
   submitOnboardingStep: (value: string | string[]) => void
   skipOnboardingStep: () => void
   goBackOnboardingStep: () => void
+  // Unread message tracking
+  markMessagesAsSeen: () => void
+}
+
+// Initialize lastSeenMessageId from localStorage
+const getInitialLastSeenMessageId = (): string | null => {
+  try {
+    return localStorage.getItem('lastSeenMessageId')
+  } catch {
+    return null
+  }
 }
 
 const defaultState: WebSocketState = {
@@ -71,6 +84,8 @@ const defaultState: WebSocketState = {
   onboardingStep: null,
   onboardingError: null,
   onboardingLoading: false,
+  // Unread message tracking
+  lastSeenMessageId: getInitialLastSeenMessageId(),
 }
 
 const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined)
@@ -524,6 +539,24 @@ export function WebSocketProvider({ children }: { children: ReactNode }) {
     }
   }, [])
 
+  // Mark all current messages as seen
+  const markMessagesAsSeen = useCallback(() => {
+    setState(prev => {
+      if (prev.messages.length > 0) {
+        const lastId = prev.messages[prev.messages.length - 1].messageId
+        if (lastId && lastId !== prev.lastSeenMessageId) {
+          try {
+            localStorage.setItem('lastSeenMessageId', lastId)
+          } catch {
+            // localStorage may be unavailable
+          }
+          return { ...prev, lastSeenMessageId: lastId }
+        }
+      }
+      return prev
+    })
+  }, [])
+
   return (
     <WebSocketContext.Provider
       value={{
@@ -539,6 +572,7 @@ export function WebSocketProvider({ children }: { children: ReactNode }) {
         submitOnboardingStep,
         skipOnboardingStep,
         goBackOnboardingStep,
+        markMessagesAsSeen,
       }}
     >
       {children}

app/ui_layer/browser/frontend/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useConfirmModal } from './useConfirmModal'
 export type { ConfirmModalState, ConfirmOptions } from './useConfirmModal'
+export { useDerivedAgentStatus } from './useDerivedAgentStatus'