From 3630a32dee9c1e73280aecd5dd8acfad935b96a7 Mon Sep 17 00:00:00 2001
From: Lucy Batten <lucyb0207@icloud.com>
Date: Fri, 1 May 2026 22:48:51 +0100
Subject: [PATCH] feat: add open in vscode button Co-authored-by: lucyb0207
 lucyb0207@icloud.com Co-authored-by: xyzyzyz-del avamitchells1@outlook.com

---
 frontend/src/pages/Analyze.tsx | 46 ++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/frontend/src/pages/Analyze.tsx b/frontend/src/pages/Analyze.tsx
index 95aa4f1..0cb26dd 100644
--- a/frontend/src/pages/Analyze.tsx
+++ b/frontend/src/pages/Analyze.tsx
@@ -17,6 +17,8 @@ export default function App() {
   const [focusMode, setFocusMode] = useState(true);
   const [depth, setDepth] = useState(2);
   const [loading, setLoading] = useState(false);
+  const [repoUrl, setRepoUrl] = useState<string>("");
+
   const API = import.meta.env.DEV
     ? "http://localhost:8080"
     : "https://codeatlas-production-e4f8.up.railway.app";
@@ -29,6 +31,31 @@ export default function App() {
     setTimeout(() => setCopied(false), 1500);
   }, [selectedFile]);
 
+  const handleOpenInGitHub = useCallback((): void => {
+    if (!selectedFile || !repoUrl) return;
+
+    const cleanRepoUrl = repoUrl.replace(/\.git$/, "");
+    const branch = "main";
+
+    const url = `${cleanRepoUrl}/blob/${branch}/${selectedFile}`;
+
+    window.open(url, "_blank");
+  }, [selectedFile, repoUrl]);
+
+  const handleOpenInVSCode = useCallback((): void => {
+    if (!selectedFile || !repoUrl) return;
+
+    const cleanRepoUrl = repoUrl.replace(/\.git$/, "");
+    const vscodeUrl = `vscode://file/${selectedFile}`;
+    const githubUrl = `${cleanRepoUrl}/blob/main/${selectedFile}`;
+
+    window.location.href = vscodeUrl;
+
+    setTimeout(() => {
+      window.open(githubUrl, "_blank");
+    }, 500);
+  }, [selectedFile, repoUrl]);
+
 
   const displayData = useMemo(() => {
     if (!graphData) return null;
@@ -77,6 +104,7 @@ export default function App() {
         })),
         backLinks: graph.backLinks || {},
       });
+      setRepoUrl(url);
     } catch (err) {
       console.error("Analyze error:", err);
       setGraphData(null);
@@ -187,6 +215,24 @@ export default function App() {
                   >
                     {copied ? "✓" : "Copy"}
                   </button>
+                  <div className="ca-copy"> | </div>
+                  <button
+                    onClick={handleOpenInGitHub}
+                    className="ca-copy"
+                    title="Open in GitHub"
+                    disabled={!selectedFile}
+                  >
+                 GitHub
+                  </button>
+                  <div className="ca-copy"> | </div>
+                  <button
+                    onClick={handleOpenInVSCode}
+                    className="ca-copy"
+                    title="Open in VS Code"
+                    disabled={!selectedFile}
+                  >
+                    VSCode
+                  </button>
                 </div>
 
                 <div className="ca-label">Imports</div>