Refactor TabBar component to filter unique tabs and prevent duplicate entries in the useSandbox hook

Author: TKassis

web/src/components/file-preview-panel.tsx

@@ -157,15 +157,24 @@ function TabBar({
     activeEl?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
   }, [activeTabPath]);
 
-  if (tabs.length === 0) return null;
+  const uniqueTabs = useMemo(() => {
+    const seen = new Set<string>();
+    return tabs.filter((t) => {
+      if (seen.has(t.path)) return false;
+      seen.add(t.path);
+      return true;
+    });
+  }, [tabs]);
+
+  if (uniqueTabs.length === 0) return null;
 
   return (
     <div
       ref={scrollRef}
       className="flex overflow-x-auto border-b bg-muted/20 shrink-0"
       style={{ scrollbarWidth: "none" }}
     >
-      {tabs.map((tab) => {
+      {uniqueTabs.map((tab) => {
         const name = tab.path.split("/").pop() ?? tab.path;
         const isActive = tab.path === activeTabPath;
         const mode = tabModes[tab.path] ?? "view";

web/src/lib/use-sandbox.ts

@@ -106,6 +106,7 @@ export function useSandbox(isActive = false) {
 
     const newTab: Tab = { path, content: null, loading: true };
     setTabs((prev) => {
+      if (prev.some((t) => t.path === path)) return prev;
       const next = [...prev, newTab];
       tabsRef.current = next;
       return next;