fix(gui): resolve multiple UI issues

- Fix template description extraction to skip separator lines (=====)
- Make config editor template dropdown consistent with other buttons
- Make network topology viewer responsive using ResizeObserver
- Remove sparkles icon from Take a Tour button
- Fix white screen when viewing nested sub-modules like RL

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

Author: ryanmccann1024

frontend/src/components/topology/NetworkGraph.tsx

@@ -1,11 +1,9 @@
-import { useState, useRef, useCallback, useMemo } from 'react'
+import { useState, useRef, useCallback, useMemo, useEffect } from 'react'
 import type { TopologyNode, TopologyLink } from '@/api/types'
 
 interface NetworkGraphProps {
   nodes: TopologyNode[]
   links: TopologyLink[]
-  width?: number
-  height?: number
   onNodeClick?: (node: TopologyNode) => void
   onLinkClick?: (link: TopologyLink) => void
 }
@@ -30,12 +28,12 @@ function getUtilizationColor(utilization: number): string {
 export function NetworkGraph({
   nodes,
   links,
-  width = 800,
-  height = 600,
   onNodeClick,
   onLinkClick,
 }: NetworkGraphProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
   const svgRef = useRef<SVGSVGElement>(null)
+  const [dimensions, setDimensions] = useState({ width: 800, height: 600 })
   const [tooltip, setTooltip] = useState<TooltipState>({
     visible: false,
     x: 0,
@@ -46,6 +44,26 @@ export function NetworkGraph({
   const [isPanning, setIsPanning] = useState(false)
   const [panStart, setPanStart] = useState({ x: 0, y: 0 })
 
+  // Track container size for responsiveness
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const updateDimensions = () => {
+      setDimensions({
+        width: container.clientWidth,
+        height: container.clientHeight,
+      })
+    }
+
+    updateDimensions()
+
+    const resizeObserver = new ResizeObserver(updateDimensions)
+    resizeObserver.observe(container)
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
   // Create a map for quick node lookup
   const nodeMap = useMemo(() => {
     const map = new Map<string, TopologyNode>()
@@ -129,7 +147,7 @@ export function NetworkGraph({
   }, [])
 
   return (
-    <div className="relative">
+    <div ref={containerRef} className="relative h-full w-full">
       {/* Controls */}
       <div className="absolute right-2 top-2 z-10 flex gap-1">
         <button
@@ -168,10 +186,10 @@ export function NetworkGraph({
       {/* SVG Canvas */}
       <svg
         ref={svgRef}
-        width={width}
-        height={height}
+        width={dimensions.width}
+        height={dimensions.height}
         viewBox={`${viewBox.minX} ${viewBox.minY} ${viewBox.width} ${viewBox.height}`}
-        className="cursor-grab rounded-lg border border-gray-200 bg-white active:cursor-grabbing dark:border-gray-700 dark:bg-gray-800"
+        className="cursor-grab bg-white active:cursor-grabbing dark:bg-gray-800"
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}

frontend/src/pages/CodebaseExplorerPage.tsx

@@ -12,15 +12,10 @@ import {
   Database,
   Layers,
   Terminal,
-  Brain,
-  Shield,
   Cog,
   BookOpen,
-  Play,
   ArrowLeft,
-  ExternalLink,
   ChevronDown,
-  Sparkles,
 } from 'lucide-react'
 import Editor from '@monaco-editor/react'
 import { codebaseApi } from '@/api/client'
@@ -151,10 +146,31 @@ export function CodebaseExplorerPage() {
     enabled: !!selectedFile,
   })
 
-  // Get module node from tree
-  const getModuleNode = useCallback((moduleName: string): ModuleNode | null => {
+  // Get module node from tree - supports nested paths like "modules/rl"
+  const getModuleNode = useCallback((modulePath: string): ModuleNode | null => {
     if (!tree) return null
-    return tree.root.children.find(c => c.name === moduleName) || null
+
+    // Helper to recursively find a node by its full path
+    const findNode = (node: ModuleNode, targetPath: string): ModuleNode | null => {
+      const fullPath = node.path.replace('fusion/', '')
+      if (fullPath === targetPath) return node
+      for (const child of node.children) {
+        const found = findNode(child, targetPath)
+        if (found) return found
+      }
+      return null
+    }
+
+    // First try direct child lookup for top-level modules
+    const directChild = tree.root.children.find(c => c.name === modulePath)
+    if (directChild) return directChild
+
+    // Otherwise search recursively for nested paths
+    for (const child of tree.root.children) {
+      const found = findNode(child, modulePath)
+      if (found) return found
+    }
+    return null
   }, [tree])
 
   const selectedModuleNode = selectedModule ? getModuleNode(selectedModule) : null
@@ -289,7 +305,6 @@ export function CodebaseExplorerPage() {
               onClick={startTour}
               className="flex items-center gap-2 rounded-lg bg-fusion-600 px-4 py-2 text-sm font-medium text-white hover:bg-fusion-700"
             >
-              <Sparkles className="h-4 w-4" />
               Take a Tour
             </button>
           )}
@@ -437,29 +452,35 @@ export function CodebaseExplorerPage() {
         )}
 
         {/* Module View */}
-        {viewMode === 'module' && selectedModuleNode && moduleInfo && (
+        {viewMode === 'module' && selectedModuleNode && (
           <div>
             {/* Module Header Card */}
-            <div className={`mb-6 rounded-xl border-2 p-6 ${moduleInfo.bgColor}`}>
+            <div className={`mb-6 rounded-xl border-2 p-6 ${moduleInfo?.bgColor || 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700'}`}>
               <div className="flex items-start gap-4">
-                <moduleInfo.icon className={`h-12 w-12 ${moduleInfo.color}`} />
+                {moduleInfo ? (
+                  <moduleInfo.icon className={`h-12 w-12 ${moduleInfo.color}`} />
+                ) : (
+                  <Layers className="h-12 w-12 text-gray-600" />
+                )}
                 <div className="flex-1">
                   <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
-                    {selectedModule}
+                    {selectedModuleNode.name}
                   </h2>
                   <p className="mt-1 text-gray-600 dark:text-gray-300">
-                    {moduleInfo.description}
+                    {moduleInfo?.description || selectedModuleNode.description || `Explore the ${selectedModuleNode.name} module`}
                   </p>
-                  <div className="mt-3 flex flex-wrap gap-2">
-                    {moduleInfo.highlights.map((h) => (
-                      <span
-                        key={h}
-                        className="rounded-full bg-white/80 px-3 py-1 text-sm font-medium text-gray-700 dark:bg-gray-800/80 dark:text-gray-300"
-                      >
-                        {h}
-                      </span>
-                    ))}
-                  </div>
+                  {moduleInfo?.highlights && (
+                    <div className="mt-3 flex flex-wrap gap-2">
+                      {moduleInfo.highlights.map((h) => (
+                        <span
+                          key={h}
+                          className="rounded-full bg-white/80 px-3 py-1 text-sm font-medium text-gray-700 dark:bg-gray-800/80 dark:text-gray-300"
+                        >
+                          {h}
+                        </span>
+                      ))}
+                    </div>
+                  )}
                 </div>
               </div>
             </div>

frontend/src/pages/ConfigEditorPage.tsx

@@ -113,17 +113,10 @@ export function ConfigEditorPage() {
           <div className="relative" ref={dropdownRef}>
             <button
               onClick={() => setDropdownOpen(!dropdownOpen)}
-              className="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-left shadow-sm transition-all hover:border-gray-300 focus:border-fusion-500 focus:outline-none focus:ring-2 focus:ring-fusion-500/20 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"
+              className="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
             >
-              <FileCode className="h-5 w-5 text-fusion-500" />
-              <div className="min-w-[120px]">
-                <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                  {templateName}
-                </div>
-                <div className="text-xs text-gray-500 dark:text-gray-400">
-                  Template
-                </div>
-              </div>
+              <FileCode className="h-4 w-4 text-fusion-500" />
+              {templateName}
               <ChevronDown className={`h-4 w-4 text-gray-400 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
             </button>
 

frontend/src/pages/TopologyPage.tsx

@@ -133,8 +133,6 @@ export function TopologyPage() {
             <NetworkGraph
               nodes={topology.nodes}
               links={topology.links}
-              width={800}
-              height={550}
               onNodeClick={setSelectedNode}
               onLinkClick={setSelectedLink}
             />

fusion/api/routes/configs.py

@@ -37,13 +37,22 @@ def list_templates() -> TemplateListResponse:
 
     templates = []
     for path in sorted(templates_dir.glob("*.ini")):
-        # Extract description from first comment line if present
+        # Extract description from comment lines, skipping separator lines
         description = None
         try:
             with open(path) as f:
-                first_line = f.readline().strip()
-                if first_line.startswith(";") or first_line.startswith("#"):
-                    description = first_line.lstrip(";# ").strip()
+                for line in f:
+                    line = line.strip()
+                    if not line:
+                        continue
+                    if not (line.startswith(";") or line.startswith("#")):
+                        break
+                    # Strip comment markers and whitespace
+                    content = line.lstrip(";# ").strip()
+                    # Skip separator lines (all =, -, or similar)
+                    if content and not all(c in "=-~*#" for c in content):
+                        description = content
+                        break
         except OSError:
             pass
 
@@ -74,7 +83,7 @@ def get_template(name: str) -> dict:
     try:
         content = template_path.read_text()
     except OSError as e:
-        raise HTTPException(status_code=500, detail=f"Failed to read template: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to read template: {e}") from e
 
     return {"name": name, "content": content}