From 0fddc9660320e55546e2b3b887ca4cc4edf6589e Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sat, 9 Nov 2024 19:04:13 +0000
Subject: [PATCH] feat: disable VS Code button until runtime is ready

- Add disabled state when AgentState is INIT or LOADING
- Show grayed out button with not-allowed cursor when disabled
- Keep standard blue styling when enabled
---
 .../src/components/file-explorer/FileExplorer.tsx    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/file-explorer/FileExplorer.tsx b/frontend/src/components/file-explorer/FileExplorer.tsx
index af1a93757629..f13f0b8cf23a 100644
--- a/frontend/src/components/file-explorer/FileExplorer.tsx
+++ b/frontend/src/components/file-explorer/FileExplorer.tsx
@@ -278,7 +278,17 @@ function FileExplorer({ error, isOpen, onToggle }: FileExplorerProps) {
             <button
               type="button"
               onClick={handleVSCodeClick}
-              className="mt-auto mb-2 w-full h-10 bg-[#4465DB] hover:bg-[#3451C7] text-white rounded flex items-center justify-center gap-2 transition-colors"
+              disabled={
+                curAgentState === AgentState.INIT ||
+                curAgentState === AgentState.LOADING
+              }
+              className={twMerge(
+                "mt-auto mb-2 w-full h-10 text-white rounded flex items-center justify-center gap-2 transition-colors",
+                curAgentState === AgentState.INIT ||
+                  curAgentState === AgentState.LOADING
+                  ? "bg-neutral-600 cursor-not-allowed"
+                  : "bg-[#4465DB] hover:bg-[#3451C7]",
+              )}
               aria-label="Open in VS Code"
             >
               <VSCodeIcon width={20} height={20} />