refactor: reduce complexity in agent.py, App.tsx, TopologyView.tsx

- research/agent.py: split tool-creation functions into individual builders
- App.tsx: fix S6754, S2681, S6848, extract helper
- TopologyView.tsx: extract applyElkLayout to module level

Author: johannhartmann

apps/web/src/App.tsx

@@ -512,7 +512,8 @@ function App() {
   const [editCollectionLoading, setEditCollectionLoading] = useState(false)
 
   // Sources state
-  const [_sources, setSources] = useState<Source[]>([])
+  const [sources, setSources] = useState<Source[]>([])
+  void sources // used via setSources; value read by child components via collectionSources
   const [newSourceType, setNewSourceType] = useState<'github' | 'web'>('github')
   const [newSourceUrl, setNewSourceUrl] = useState('')
   const [newSourceEnabled, setNewSourceEnabled] = useState(true)
@@ -1836,17 +1837,19 @@ function App() {
                 </div>
               )}
 
-              {collectionsLoading ? (
+              {collectionsLoading && (
                 <p className="loading-text">Loading collections...</p>
-              ) : collections.length === 0 ? (
+              )}
+              {!collectionsLoading && collections.length === 0 && (
                 <div className="empty-state">
                   <p>No collections yet</p>
                   <p className="note">Collections organize your documentation and code sources.</p>
                   <button className="create-button" onClick={() => setSelectedCollection({ id: 'new' } as Collection)}>
                     Create Your First Collection
                   </button>
                 </div>
-              ) : (
+              )}
+              {!collectionsLoading && collections.length > 0 && (
                 <div className="collections-list">
                   {collections.map((collection) => {
                     const isExpanded = expandedCollections.has(collection.id)
@@ -1859,7 +1862,7 @@ function App() {
                     return (
                       <div key={collection.id} className={`collection-row ${isExpanded ? 'expanded' : ''}`}>
                         {/* Collection Header Row */}
-                        <div className="collection-header-row" role="button" tabIndex={0} onClick={(e) => { if (!(e.target as HTMLElement).closest('form, [role="toolbar"]')) { handleToggleExpand(collection) } }} onKeyDown={e => { if (e.key === 'Enter') { handleToggleExpand(collection) } }}>
+                        <div className="collection-header-row" role="button" tabIndex={0} aria-label={`Toggle collection ${collection.name}`} onClick={(e) => { if (!(e.target as HTMLElement).closest('form, [role="toolbar"]')) { handleToggleExpand(collection) } }} onKeyDown={e => { if (e.key === 'Enter') { handleToggleExpand(collection) } }}>
                           <button className="expand-toggle" aria-label={isExpanded ? 'Collapse' : 'Expand'}>
                             {isExpanded ? '▼' : '▶'}
                           </button>
@@ -1958,7 +1961,7 @@ function App() {
 
                         {/* Share Popover */}
                         {sharePopoverCollection?.id === collection.id && (
-                          <div className="share-popover" role="dialog" onClick={e => e.stopPropagation()} onKeyDown={e => e.stopPropagation()}>
+                          <dialog open className="share-popover" aria-label={`Share ${collection.name}`}>
                             <div className="popover-header">
                               <h4>Share "{collection.name}"</h4>
                               <button className="close-btn" onClick={handleCloseSharePopover}>×</button>
@@ -1992,7 +1995,7 @@ function App() {
                               </form>
                               {shareError && <p className="share-error-mini">{shareError}</p>}
                             </div>
-                          </div>
+                          </dialog>
                         )}
 
                         {/* Expanded Sources Section */}

apps/web/src/cockpit/views/TopologyView.tsx

@@ -11,18 +11,21 @@ import ReactFlow, {
 import ViewShell from '../components/ViewShell'
 import { runElkLayout, runGridLayout, type LayoutEngine } from '../layout/layoutCore'
 
+interface ElkLayoutParams {
+  nodes: Array<{ id: string }>
+  edges: Array<{ source: string; target: string }>
+  engine: LayoutEngine
+  columns: number
+  cancelled: { current: boolean }
+  startedAt: number
+  onPositions: (positions: Record<string, { x: number; y: number }>) => void
+  onCompleted: (engine: LayoutEngine, durationMs: number, nodeCount: number) => void
+  onFinish: () => void
+}
+
 /** Run ELK layout (in-thread or via worker), calling back with positions on completion. */
-async function applyElkLayout(
-  nodes: Array<{ id: string }>,
-  edges: Array<{ source: string; target: string }>,
-  engine: LayoutEngine,
-  columns: number,
-  cancelled: { current: boolean },
-  startedAt: number,
-  onPositions: (positions: Record<string, { x: number; y: number }>) => void,
-  onCompleted: (engine: LayoutEngine, durationMs: number, nodeCount: number) => void,
-  onFinish: () => void,
-): Promise<void> {
+async function applyElkLayout(params: Readonly<ElkLayoutParams>): Promise<void> {
+  const { nodes, edges, engine, columns, cancelled, startedAt, onPositions, onCompleted, onFinish } = params
   try {
     if (nodes.length > 1000) {
       const worker = new Worker(new URL('../layout/layoutWorker.ts', import.meta.url), {
@@ -88,6 +91,35 @@ function overlayColorForNode(overlay: OverlayState, naturalKey: string, fallback
   return '#1d4ed8'
 }
 
+function buildRFNode(
+  node: TwinGraphResponse['nodes'][number],
+  index: number,
+  overlay: OverlayState,
+  selectedNodeId: string,
+  layoutPositions: Record<string, { x: number; y: number }>,
+  columns: number,
+  showLabels: boolean,
+): RFNode {
+  const runtime = overlay.runtimeByNodeKey[node.natural_key] || overlay.runtimeByNodeKey[node.name]
+  const isSelected = selectedNodeId === node.id
+  const position = layoutPositions[node.id] || { x: (index % columns) * 260, y: Math.floor(index / columns) * 130 }
+  const nodeOpacity = overlay.mode === 'runtime' && runtime?.error_rate === undefined ? 0.84 : 1
+  return {
+    id: node.id,
+    data: { label: showLabels ? node.name : '' },
+    position,
+    style: {
+      width: 210,
+      fontSize: 11,
+      borderRadius: 10,
+      border: isSelected ? '2px solid #f59e0b' : `1px solid ${overlayColorForNode(overlay, node.natural_key, node.name)}`,
+      background: '#ffffff',
+      boxShadow: isSelected ? '0 0 0 3px rgba(245, 158, 11, 0.22)' : 'none',
+      opacity: nodeOpacity,
+    },
+  }
+}
+
 export default function TopologyView({
   graph,
   state,
@@ -134,44 +166,24 @@ export default function TopologyView({
     }
 
     const cancelRef = { current: false }
-    applyElkLayout(
-      graph.nodes.map((node) => ({ id: node.id })),
-      graph.edges.map((edge) => ({ source: edge.source_node_id, target: edge.target_node_id })),
-      preferredEngine,
+    applyElkLayout({
+      nodes: graph.nodes.map((node) => ({ id: node.id })),
+      edges: graph.edges.map((edge) => ({ source: edge.source_node_id, target: edge.target_node_id })),
+      engine: preferredEngine,
       columns,
-      cancelRef,
-      performance.now(),
-      setLayoutPositions,
-      onLayoutCompleted,
-      () => setLayoutStatus('refined'),
-    )
+      cancelled: cancelRef,
+      startedAt: performance.now(),
+      onPositions: setLayoutPositions,
+      onCompleted: onLayoutCompleted,
+      onFinish: () => setLayoutStatus('refined'),
+    })
     return () => {
       cancelRef.current = true
     }
   }, [graph.edges, graph.nodes, columns, preferredEngine, onLayoutCompleted])
 
   const nodes = useMemo<RFNode[]>(() => {
-    return graph.nodes.map((node, index) => {
-      const runtime = overlay.runtimeByNodeKey[node.natural_key] || overlay.runtimeByNodeKey[node.name]
-      const isSelected = selectedNodeId === node.id
-      const position = layoutPositions[node.id] || { x: (index % columns) * 260, y: Math.floor(index / columns) * 130 }
-      return {
-        id: node.id,
-        data: {
-          label: showLabels ? node.name : '',
-        },
-        position,
-        style: {
-          width: 210,
-          fontSize: 11,
-          borderRadius: 10,
-          border: isSelected ? '2px solid #f59e0b' : `1px solid ${overlayColorForNode(overlay, node.natural_key, node.name)}`,
-          background: '#ffffff',
-          boxShadow: isSelected ? '0 0 0 3px rgba(245, 158, 11, 0.22)' : 'none',
-          opacity: overlay.mode === 'runtime' && runtime?.error_rate === undefined ? 0.84 : 1,
-        },
-      }
-    })
+    return graph.nodes.map((node, index) => buildRFNode(node, index, overlay, selectedNodeId, layoutPositions, columns, showLabels))
   }, [graph.nodes, showLabels, layoutPositions, columns, overlay, selectedNodeId])
 
   const edges = useMemo<RFEdge[]>(() => {