feat: improvements

frontend/src/routes/BrowseView.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Graph } from "@cosmos.gl/graph";
 import { fetchBrowseNodes, fetchRemotePage, type NetworkNode } from "@/api/client";
 import { renderMicron } from "@/components/editor/micronRenderer";
+import axisMundiUrl from "@/assets/axis-mundi.min.svg";
 
 // ---------------------------------------------------------------------------
 // Theme color maps — hex values matching index.css OKLCH definitions
@@ -166,7 +167,8 @@ export default function BrowseView() {
       setThemeId(id);
       const graph = graphRef.current;
       if (graph) {
-        applyThemeToGraph(graph, nodesRef.current, THEME_COLORS[id] ?? THEME_COLORS.dark);
+        const c = THEME_COLORS[id] ?? THEME_COLORS.dark;
+        applyThemeToGraph(graph, nodesRef.current, c);
       }
     });
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
@@ -180,7 +182,7 @@ export default function BrowseView() {
     const graph = new Graph(containerRef.current, {
       backgroundColor: [0, 0, 0, 0],
       pointDefaultColor: colors.primary,
-      pointDefaultSize: 8,
+      pointDefaultSize: 12,
       linkDefaultColor: colors.border,
       linkDefaultWidth: 1,
       linkOpacity: 0.5,
@@ -202,6 +204,11 @@ export default function BrowseView() {
         const node = nodesRef.current[index];
         if (node) handleNodeClick(node);
       },
+      onClick: () => {
+        setSelectedNode(null);
+        setPageHtml(null);
+        setPageError(null);
+      },
       onSimulationTick: () => updateLabels(),
       onZoom: () => updateLabels(),
     });
@@ -332,7 +339,7 @@ export default function BrowseView() {
               className="absolute text-[10px] font-mono pointer-events-none select-none whitespace-nowrap"
               style={{
                 left: lp.x,
-                top: lp.y - 12,
+                top: lp.y - (node.is_self ? 24 : 12),
                 transform: "translate(-50%, -100%)",
                 color: node.is_self ? colors.primary : colors.muted,
               }}
@@ -355,8 +362,8 @@ export default function BrowseView() {
       </div>
 
       {/* Page viewer */}
-      <div className="flex-1 min-h-0 border-t-2 border-border overflow-auto">
-        <div className="flex items-center px-4 py-2 border-b border-border sticky top-0 bg-background z-10">
+      <div className="flex-1 min-h-0 border-t-2 border-border flex flex-col">
+        <div className="flex items-center px-4 py-2 border-b border-border bg-background shrink-0">
           <span className="text-xs font-semibold flex-1 truncate">
             {selectedNode ? (
               <>
@@ -371,11 +378,19 @@ export default function BrowseView() {
           </span>
         </div>
 
-        <div className="p-3">
-          {!selectedNode && (
-            <span className="text-muted-foreground text-xs">
-              Click a node to view its page
-            </span>
+        <div className="flex-1 min-h-0 overflow-auto p-3">
+          {!selectedNode && !pageLoading && (
+            <div className="flex flex-col items-center justify-center h-full gap-2 text-muted-foreground">
+              <div
+                className="w-80 h-64"
+                style={{
+                  backgroundColor: colors.primary,
+                  mask: `url(${axisMundiUrl}) center/contain no-repeat`,
+                  WebkitMask: `url(${axisMundiUrl}) center/contain no-repeat`,
+                }}
+              />
+              <span className="text-xs">Click a node to view its page</span>
+            </div>
           )}
           {pageLoading && (
             <span className="text-muted-foreground text-xs animate-pulse">