feat(explore): AIC-117 — hide stale tools filter in FilterPanel

Author: letsgogeeky

components/graph/ExploreGraph.tsx

@@ -380,6 +380,7 @@ export default function ExploreGraph({
   const [viewMode, setViewMode] = useState<"grid" | "layers" | "3d">("3d");
   const [onlyMyTools, setOnlyMyTools] = useState(false);
   const [myToolIds, setMyToolIds] = useState<Set<string>>(new Set());
+  const [hideStale, setHideStale] = useState(false);
   const { user } = useUser();
 
   useEffect(() => {
@@ -450,8 +451,9 @@ export default function ExploreGraph({
     let result = tools;
     if (stackFilteredToolIds) result = result.filter((t) => stackFilteredToolIds.has(t.id));
     if (onlyMyTools && myToolIds.size > 0) result = result.filter((t) => myToolIds.has(t.id));
+    if (hideStale) result = result.filter((t) => !t.is_stale);
     return result;
-  }, [tools, stackFilteredToolIds, onlyMyTools, myToolIds]);
+  }, [tools, stackFilteredToolIds, onlyMyTools, myToolIds, hideStale]);
 
   const mergedHighlightedIds = useMemo(() => {
     if (initialStackIds.size > 0) return new Set([...highlightedIds, ...initialStackIds]);
@@ -503,6 +505,8 @@ export default function ExploreGraph({
             onlyMyTools={onlyMyTools}
             onToggleMyTools={() => setOnlyMyTools((v) => !v)}
             isAuthenticated={!!user}
+            hideStale={hideStale}
+            onToggleHideStale={() => setHideStale((v) => !v)}
           />
         </div>
 
@@ -751,6 +755,8 @@ export default function ExploreGraph({
           onlyMyTools={onlyMyTools}
           onToggleMyTools={() => setOnlyMyTools((v) => !v)}
           isAuthenticated={!!user}
+          hideStale={hideStale}
+          onToggleHideStale={() => setHideStale((v) => !v)}
         />
         <div className="px-4 pb-4 pt-2">
           <button

components/panels/FilterPanel.tsx

@@ -66,6 +66,8 @@ interface Props {
   onlyMyTools: boolean;
   onToggleMyTools: () => void;
   isAuthenticated: boolean;
+  hideStale: boolean;
+  onToggleHideStale: () => void;
 }
 
 const REL_TYPES: { id: RelationshipType; label: string; style: string }[] = [
@@ -111,6 +113,8 @@ export default function FilterPanel({
   onlyMyTools,
   onToggleMyTools,
   isAuthenticated,
+  hideStale,
+  onToggleHideStale,
 }: Props) {
   const { openSuggest } = useSuggestTool();
   const allOn = activeCategories.size === CATEGORIES.length;
@@ -214,6 +218,28 @@ export default function FilterPanel({
           </button>
         )}
 
+        {/* Health filter */}
+        <button
+          onClick={onToggleHideStale}
+          className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs transition-colors text-left"
+          style={
+            hideStale
+              ? {
+                  background: "#f39c1218",
+                  border: "1px solid #f39c1244",
+                  color: "#f39c12",
+                }
+              : {
+                  background: "var(--surface-2)",
+                  border: "1px solid var(--border)",
+                  color: "var(--text-muted)",
+                }
+          }
+        >
+          <span style={{ fontSize: 10 }}>{hideStale ? "●" : "○"}</span>
+          Hide stale tools
+        </button>
+
         {/* Stack Filter */}
         <div>
           <div className="w-full flex items-center gap-1.5 mb-1.5">