Bug fix + fixed a couple rendering issues

backend/main.py

@@ -12,7 +12,8 @@ from fastapi.staticfiles import StaticFiles
 from routes.agent import router as agent_router
 from routes.auth import router as auth_router
 
-load_dotenv()
+# Load .env from project root (parent directory)
+load_dotenv(Path(__file__).parent.parent / ".env")
 
 # Configure logging
 logging.basicConfig(

backend/routes/agent.py

@@ -206,12 +206,17 @@ async def create_session(
     Returns 503 if the server or user has reached the session limit.
     """
     # Extract the user's HF token (Bearer header or HttpOnly cookie)
+    # In dev mode, fall back to environment variable if no token in request
     hf_token = None
     auth_header = request.headers.get("Authorization", "")
     if auth_header.startswith("Bearer "):
         hf_token = auth_header[7:]
     if not hf_token:
         hf_token = request.cookies.get("hf_access_token")
+    if not hf_token and user["user_id"] == "dev":
+        # Dev mode: use HF_TOKEN from environment
+        import os
+        hf_token = os.environ.get("HF_TOKEN")
 
     try:
         session_id = await session_manager.create_session(

frontend/package-lock.json

@@ -130,7 +130,6 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -447,7 +446,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -491,7 +489,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -1224,7 +1221,6 @@
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.5.0.tgz",
       "integrity": "sha512-yjvtXoFcrPLGtgKRxFaH6OQPtcLPhkloC0BML6rBG5UeldR0nPULR/2E2BfXdo5JNV7j7lOzrrLX2Qf/iSidow==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.26.0",
         "@mui/core-downloads-tracker": "^6.5.0",
@@ -1919,7 +1915,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz",
       "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -2005,7 +2000,6 @@
       "integrity": "sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.0",
         "@typescript-eslint/types": "8.53.0",
@@ -2272,7 +2266,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2421,7 +2414,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2774,7 +2766,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4673,7 +4664,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4771,7 +4761,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -4784,7 +4773,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -5269,7 +5257,6 @@
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5435,7 +5422,6 @@
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
       "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -5474,7 +5460,6 @@
       "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",

frontend/src/components/Chat/ToolCallGroup.tsx

@@ -397,7 +397,7 @@ function InlineApproval({
 // ---------------------------------------------------------------------------
 
 export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProps) {
-  const { setPanel, lockPanel, getJobUrl, getEditedScript } = useAgentStore();
+  const { setPanel, lockPanel, getJobUrl, getEditedScript, setJobStatus, getJobStatus, setToolError, getToolError } = useAgentStore();
   const researchSteps = useAgentStore(s => {
     const activeId = s.activeSessionId;
     return activeId ? (s.sessionStates[activeId]?.researchSteps) : undefined;
@@ -428,6 +428,35 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
     }
   }, [pendingTools, isSubmitting]);
 
+  // Clean up stale decisions for tools that are no longer pending
+  useEffect(() => {
+    const pendingIds = new Set(pendingTools.map(t => t.toolCallId));
+    const decisionIds = Object.keys(decisions);
+    const hasStale = decisionIds.some(id => !pendingIds.has(id));
+    if (hasStale) {
+      setDecisions(prev => {
+        const cleaned = { ...prev };
+        for (const id of decisionIds) {
+          if (!pendingIds.has(id)) delete cleaned[id];
+        }
+        return cleaned;
+      });
+    }
+  }, [pendingTools, decisions]);
+
+  // Persist error states when tools error
+  useEffect(() => {
+    for (const tool of tools) {
+      const currentlyHasError = tool.state === 'output-error';
+      const persistedError = getToolError(tool.toolCallId);
+
+      // Persist error state if we detect it and haven't already
+      if (currentlyHasError && !persistedError) {
+        setToolError(tool.toolCallId, true);
+      }
+    }
+  }, [tools, setToolError, getToolError]);
+
   const { scriptLabelMap, toolDisplayMap } = useMemo(() => {
     const hfJobs = tools.filter(t => t.toolName === 'hf_jobs' && (t.input as Record<string, unknown>)?.script);
     const scriptMap: Record<string, string> = {};
@@ -655,21 +684,37 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
           const localDecision = decisions[tool.toolCallId];
 
           const cancelled = isCancelledTool(tool);
+          const currentlyHasError = state === 'output-error';
+          const persistedError = getToolError(tool.toolCallId);
+
+          // Use persisted error OR current error (persisting happens in useEffect)
+          const hasError = persistedError || currentlyHasError;
+
           const displayState = isPending && localDecision
             ? (localDecision.approved ? 'input-available' : 'output-denied')
             : state;
-          const label = cancelled ? 'cancelled' : statusLabel(displayState as ToolPartState);
+          const label = cancelled ? 'cancelled'
+            : hasError ? 'error'
+            : statusLabel(displayState as ToolPartState);
 
           // Parse job metadata from hf_jobs output and store
           const jobUrlFromStore = tool.toolName === 'hf_jobs' ? getJobUrl(tool.toolCallId) : undefined;
-          const jobMetaFromOutput = tool.toolName === 'hf_jobs' && tool.state === 'output-available'
-            ? parseJobMeta(tool.output)
+          const jobStatusFromStore = tool.toolName === 'hf_jobs' ? getJobStatus(tool.toolCallId) : undefined;
+
+          const jobMetaFromOutput = tool.toolName === 'hf_jobs' && (tool.output || (tool as Record<string, unknown>).errorText)
+            ? parseJobMeta(tool.output ?? (tool as Record<string, unknown>).errorText)
             : {};
-          
-          // Combine job URL from store (available immediately) with output metadata (available at completion)
+
+          // Store job status if we just parsed it and don't have it stored yet
+          if (tool.toolName === 'hf_jobs' && jobMetaFromOutput.jobStatus && !jobStatusFromStore) {
+            setJobStatus(tool.toolCallId, jobMetaFromOutput.jobStatus);
+          }
+
+          // Combine job URL and status from store (persisted) with output metadata (freshly parsed)
+          // Prefer stored values to ensure they persist across renders
           const jobMeta = {
             jobUrl: jobUrlFromStore || jobMetaFromOutput.jobUrl,
-            jobStatus: jobMetaFromOutput.jobStatus,
+            jobStatus: jobStatusFromStore || jobMetaFromOutput.jobStatus,
           };
 
           return (
@@ -691,9 +736,11 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
                 <StatusIcon
                   cancelled={cancelled}
                   state={
-                    (tool.toolName === 'hf_jobs' && jobMeta.jobStatus && ['ERROR', 'FAILED', 'CANCELLED'].includes(jobMeta.jobStatus) && displayState === 'output-available')
+                    hasError
                       ? 'output-error'
-                      : displayState as ToolPartState
+                      : ((tool.toolName === 'hf_jobs' && jobMeta.jobStatus && ['ERROR', 'FAILED', 'CANCELLED'].includes(jobMeta.jobStatus))
+                        ? 'output-error'
+                        : displayState as ToolPartState)
                   }
                 />
 
@@ -724,10 +771,12 @@ export default function ToolCallGroup({ tools, approveTools }: ToolCallGroupProp
                       fontSize: '0.65rem',
                       fontWeight: 600,
                       bgcolor: cancelled ? 'rgba(255,255,255,0.05)'
-                        : displayState === 'output-error' ? 'rgba(224,90,79,0.12)'
+                        : hasError ? 'rgba(224,90,79,0.12)'
                         : displayState === 'output-denied' ? 'rgba(255,255,255,0.05)'
                         : 'var(--accent-yellow-weak)',
-                      color: cancelled ? 'var(--muted-text)' : statusColor(displayState as ToolPartState),
+                      color: cancelled ? 'var(--muted-text)'
+                        : hasError ? 'var(--accent-red)'
+                        : statusColor(displayState as ToolPartState),
                       letterSpacing: '0.03em',
                     }}
                   />

frontend/src/lib/sse-chat-transport.ts

@@ -277,7 +277,8 @@ export class SSEChatTransport implements ChatTransport<UIMessage> {
     this.sessionId = sessionId;
     this.sideChannel = sideChannel;
     // Mark as connected immediately — no persistent connection to establish
-    sideChannel.onConnectionChange(true);
+    // Defer to avoid setState during render
+    queueMicrotask(() => sideChannel.onConnectionChange(true));
   }
 
   updateSideChannel(sideChannel: SideChannelCallbacks): void {

frontend/src/store/agentStore.ts

@@ -101,6 +101,12 @@ interface AgentStore {
   // Job URLs (tool_call_id -> job URL) for HF jobs
   jobUrls: Record<string, string>;
 
+  // Job statuses (tool_call_id -> job status) for HF jobs
+  jobStatuses: Record<string, string>;
+
+  // Tool error states (tool_call_id -> true if errored) - persisted across renders
+  toolErrors: Record<string, boolean>;
+
   // ── Per-session actions ─────────────────────────────────────────────
 
   /** Update a session's state. If it's the active session, also update flat state. */
@@ -138,6 +144,12 @@ interface AgentStore {
 
   setJobUrl: (toolCallId: string, jobUrl: string) => void;
   getJobUrl: (toolCallId: string) => string | undefined;
+
+  setJobStatus: (toolCallId: string, status: string) => void;
+  getJobStatus: (toolCallId: string) => string | undefined;
+
+  setToolError: (toolCallId: string, hasError: boolean) => void;
+  getToolError: (toolCallId: string) => boolean | undefined;
 }
 
 /**
@@ -159,6 +171,25 @@ function syncSnapshot(
   };
 }
 
+// Load persisted tool errors from localStorage
+function loadToolErrors(): Record<string, boolean> {
+  try {
+    const stored = localStorage.getItem('hf-agent-tool-errors');
+    return stored ? JSON.parse(stored) : {};
+  } catch {
+    return {};
+  }
+}
+
+// Save tool errors to localStorage
+function saveToolErrors(errors: Record<string, boolean>): void {
+  try {
+    localStorage.setItem('hf-agent-tool-errors', JSON.stringify(errors));
+  } catch (e) {
+    console.warn('Failed to persist tool errors:', e);
+  }
+}
+
 export const useAgentStore = create<AgentStore>()((set, get) => ({
   sessionStates: {},
   activeSessionId: null,
@@ -178,6 +209,8 @@ export const useAgentStore = create<AgentStore>()((set, get) => ({
 
   editedScripts: {},
   jobUrls: {},
+  jobStatuses: {},
+  toolErrors: loadToolErrors(),
 
   // ── Per-session state management ──────────────────────────────────
 
@@ -349,4 +382,26 @@ export const useAgentStore = create<AgentStore>()((set, get) => ({
   },
 
   getJobUrl: (toolCallId) => get().jobUrls[toolCallId],
+
+  // ── Job Statuses ────────────────────────────────────────────────────
+
+  setJobStatus: (toolCallId, status) => {
+    set((state) => ({
+      jobStatuses: { ...state.jobStatuses, [toolCallId]: status },
+    }));
+  },
+
+  getJobStatus: (toolCallId) => get().jobStatuses[toolCallId],
+
+  // ── Tool Errors ─────────────────────────────────────────────────────
+
+  setToolError: (toolCallId, hasError) => {
+    set((state) => {
+      const updated = { ...state.toolErrors, [toolCallId]: hasError };
+      saveToolErrors(updated);
+      return { toolErrors: updated };
+    });
+  },
+
+  getToolError: (toolCallId) => get().toolErrors[toolCallId],
 }));