sort tee nodes by status and add show disabled toggle

Sort nodes: active first, then enabled, then disabled.
Add checkbox to toggle visibility of disabled nodes,
defaulting to hidden when non-disabled nodes exist.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: balogh.adam@icloud.com

ui/opengradient/teeRegistry/TEENodesTable.tsx

@@ -191,6 +191,12 @@ const NodeRow = ({ node, typeNameMap, isLoading, onNodeClick }: {
   );
 };
 
+function statusOrder(node: TEENodeWithStatus): number {
+  if (node.isActive) return 0;
+  if (node.enabled) return 1;
+  return 2;
+}
+
 const TEENodesTable = ({ nodes, types, isLoading, onNodeClick }: Props) => {
   const typeNameMap = React.useMemo(() => {
     const map: Record<number, string> = {};
@@ -200,6 +206,10 @@ const TEENodesTable = ({ nodes, types, isLoading, onNodeClick }: Props) => {
     return map;
   }, [ types ]);
 
+  const sortedNodes = React.useMemo(() =>
+    [ ...nodes ].sort((a, b) => statusOrder(a) - statusOrder(b)),
+  [ nodes ]);
+
   return (
     <TableRoot>
       <TableHeaderSticky top={ 0 }>
@@ -214,7 +224,7 @@ const TEENodesTable = ({ nodes, types, isLoading, onNodeClick }: Props) => {
         </TableRow>
       </TableHeaderSticky>
       <TableBody>
-        { nodes.map((node) => (
+        { sortedNodes.map((node) => (
           <NodeRow
             key={ node.teeId }
             node={ node }

ui/pages/opengradient/TEERegistry.tsx

@@ -6,6 +6,7 @@ import { route } from 'nextjs-routes';
 
 import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY, TEE_REGISTRY_ADDRESS } from 'lib/opengradient/contracts/teeRegistry';
 import type { TEERegistryStats, TEETypeSummary, TEENodeWithStatus } from 'lib/opengradient/contracts/teeRegistry';
+import { Checkbox } from 'toolkit/chakra/checkbox';
 import { Heading } from 'toolkit/chakra/heading';
 import { Link, LinkBox } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -54,6 +55,32 @@ const TEERegistry = () => {
     return Object.values(nbt).flat();
   }, [ query.data?.nodesByType, selectedType ]);
 
+  const hasNonDisabledNodes = React.useMemo(
+    () => allNodes.some((n) => n.isActive || n.enabled),
+    [ allNodes ],
+  );
+
+  const [ showDisabled, setShowDisabled ] = React.useState<boolean | null>(null);
+
+  // Reset when allNodes changes (e.g. type filter changed)
+  React.useEffect(() => {
+    setShowDisabled(null);
+  }, [ selectedType ]);
+
+  const resolvedShowDisabled = showDisabled ?? !hasNonDisabledNodes;
+
+  const filteredNodes = React.useMemo(
+    () => resolvedShowDisabled ? allNodes : allNodes.filter((n) => n.isActive || n.enabled),
+    [ allNodes, resolvedShowDisabled ],
+  );
+
+  const handleToggleShowDisabled = React.useCallback(() => {
+    setShowDisabled((prev) => {
+      const current = prev ?? !hasNonDisabledNodes;
+      return !current;
+    });
+  }, [ hasNonDisabledNodes ]);
+
   const handleTypeClick = React.useCallback((typeId: number) => {
     setSelectedType((prev) => prev === typeId ? null : typeId);
   }, []);
@@ -440,35 +467,51 @@ const TEERegistry = () => {
 
       { /* Nodes Table */ }
       <Box>
-        <Flex alignItems="center" gap={ 2 } mb={ 4 }>
-          <Text
-            fontSize="11px"
-            fontWeight={ 500 }
-            letterSpacing="0.1em"
-            textTransform="uppercase"
-            color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
-          >
-            { selectedType !== null ?
-              `${ types.find((t) => t.typeId === selectedType)?.name ?? '' } Nodes` :
-              'All Nodes' }
-          </Text>
-          <Text
-            fontSize="11px"
-            fontWeight={ 400 }
-            color={{ _light: 'rgba(0, 0, 0, 0.3)', _dark: 'rgba(255, 255, 255, 0.3)' }}
-            fontFamily="system-ui, -apple-system, sans-serif"
+        <Flex alignItems="center" justifyContent="space-between" mb={ 4 }>
+          <Flex alignItems="center" gap={ 2 }>
+            <Text
+              fontSize="11px"
+              fontWeight={ 500 }
+              letterSpacing="0.1em"
+              textTransform="uppercase"
+              color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
+              fontFamily="system-ui, -apple-system, sans-serif"
+            >
+              { selectedType !== null ?
+                `${ types.find((t) => t.typeId === selectedType)?.name ?? '' } Nodes` :
+                'All Nodes' }
+            </Text>
+            <Text
+              fontSize="11px"
+              fontWeight={ 400 }
+              color={{ _light: 'rgba(0, 0, 0, 0.3)', _dark: 'rgba(255, 255, 255, 0.3)' }}
+              fontFamily="system-ui, -apple-system, sans-serif"
+            >
+              { filteredNodes.length > 0 ? `(${ filteredNodes.length })` : '' }
+            </Text>
+          </Flex>
+          <Checkbox
+            size="sm"
+            checked={ resolvedShowDisabled }
+            onCheckedChange={ handleToggleShowDisabled }
           >
-            { allNodes.length > 0 ? `(${ allNodes.length })` : '' }
-          </Text>
+            <Text
+              fontSize="11px"
+              fontWeight={ 400 }
+              color={{ _light: 'rgba(0, 0, 0, 0.4)', _dark: 'rgba(255, 255, 255, 0.4)' }}
+              fontFamily="system-ui, -apple-system, sans-serif"
+            >
+              Show disabled
+            </Text>
+          </Checkbox>
         </Flex>
         <TEENodesTable
-          nodes={ allNodes }
+          nodes={ filteredNodes }
           types={ types }
           isLoading={ query.isPlaceholderData }
           onNodeClick={ handleNodeClick }
         />
-        { !query.isPlaceholderData && allNodes.length === 0 && (
+        { !query.isPlaceholderData && filteredNodes.length === 0 && (
           <Flex
             justifyContent="center"
             alignItems="center"