diff --git a/cli/index.ts b/cli/index.ts
index dceb2c1..24e63fc 100644
--- a/cli/index.ts
+++ b/cli/index.ts
@@ -3,8 +3,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { initDb } from '../src/db/client.js';
 import { repository } from '../src/db/repository.js';
-import type { Claim, Note } from '../src/lib/validation.js';
-import { escapeHtml } from '../src/lib/security.js';
+import type { Claim, Note } from '../src/lib/validation';
 
 const program = new Command();
 
@@ -146,7 +145,6 @@ async function exportSite(outDir: string) {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline';">
   <title>Knowledge Base</title>
   <style>
     body { font-family: system-ui, sans-serif; max-width: 800px; margin: 0 auto; padding: 2rem; line-height: 1.6; }
@@ -170,17 +168,17 @@ async function exportSite(outDir: string) {
     const safeId = entity.name.replace(/[^a-z0-9]/gi, '_').toLowerCase();
     
     html += `\n  <div class="entity" id="${safeId}">\n`;
-    html += `    <h2><a href="#${safeId}">${escapeHtml(entity.name)}</a></h2>\n`;
-    html += `    <span class="type">${escapeHtml(entity.type)}</span>\n`;
+    html += `    <h2><a href="#${safeId}">${entity.name}</a></h2>\n`;
+    html += `    <span class="type">${entity.type}</span>\n`;
     
     if (entity.description) {
-      html += `\n    <p>${escapeHtml(entity.description)}</p>\n`;
+      html += `\n    <p>${entity.description}</p>\n`;
     }
     
     if (claims.length > 0) {
       html += `\n    <h3>Claims</h3>\n`;
       for (const claim of claims) {
-        html += `    <div class="claim">${escapeHtml(claim.statement)}`;
+        html += `    <div class="claim">${claim.statement}`;
         if (claim.confidence !== 1) html += ` <em>(confidence: ${claim.confidence})</em>`;
         html += `</div>\n`;
       }
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 9be034d..17fbf10 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -18,7 +18,6 @@ import { MEDIA_QUERIES } from '../lib/constants';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { useEscapeKey } from '../hooks/useEscapeKey';
 
-const GraphControls = lazy(() => import('../features/graph/GraphControls'));
 const GraphView = lazy(() => import('../features/graph/GraphView'));
 const MindMapView = lazy(() => import('../features/mindmap/MindMapView'));
 const Chat = lazy(() => import('../features/chat/Chat'));
@@ -124,6 +123,12 @@ const AppContent: React.FC = () => {
                 <MindMapView
                   rootEntity={entities[0]}
                   relatedEntities={entities.slice(1, 10)}
+                  entities={entities}
+                  links={links}
+                  onEntityClick={(id) => {
+                    setGraphSelectedNode(id);
+                    setCurrentView('graph');
+                  }}
                 />
               )}
               {dbReady && currentView === 'mindmap' && entities.length === 0 && (
@@ -148,19 +153,6 @@ const AppContent: React.FC = () => {
           onSearchClick={() => setIsSearchOpen(true)}
           onClose={() => setIsMenuOpen(false)}
         />
-        {currentView === 'graph' && (
-          <div className="drawer-extra-controls">
-            <h3>Graph Controls</h3>
-            <Suspense fallback={<div>Loading controls...</div>}>
-              <GraphControls
-                focusMode={graphFocusMode}
-                setFocusMode={setGraphFocusMode}
-                hasSelection={!!graphSelectedNode}
-                selectedName={entities.find(e => e.id === graphSelectedNode)?.name}
-              />
-            </Suspense>
-          </div>
-        )}
       </MobileDrawer>
 
       {isSearchOpen && (
diff --git a/src/db/connection-pool.ts b/src/db/connection-pool.ts
index 420523a..a440de2 100644
--- a/src/db/connection-pool.ts
+++ b/src/db/connection-pool.ts
@@ -1,4 +1,4 @@
-import { logger } from '../lib/logger.js';
+import { logger } from '../lib/logger';
 
 export const DEFAULT_POOL_SIZE = 4;
 const DEFAULT_TIMEOUT_MS = 30000; // 30 seconds default timeout
diff --git a/src/db/repository.ts b/src/db/repository.ts
index 41eb348..fb306ae 100644
--- a/src/db/repository.ts
+++ b/src/db/repository.ts
@@ -1,7 +1,7 @@
-import { getDb, SQLiteDB } from './client.js';
-import { Entity, Claim, Note, Link, GraphSnapshot } from '../lib/validation.js';
-import { AppError } from '../lib/errors.js';
-import { logger } from '../lib/logger.js';
+import { getDb, SQLiteDB } from './client';
+import { Entity, Claim, Note, Link, GraphSnapshot } from '../lib/validation';
+import { AppError } from '../lib/errors';
+import { logger } from '../lib/logger';
 
 export interface GraphSnapshotDiff {
   added_nodes: string[];
diff --git a/src/features/graph/GraphControls.tsx b/src/features/graph/GraphControls.tsx
index 9764340..4b61f9e 100644
--- a/src/features/graph/GraphControls.tsx
+++ b/src/features/graph/GraphControls.tsx
@@ -1,7 +1,9 @@
 import React, { useState, useRef } from 'react';
-import { Focus, Camera, Clock } from 'lucide-react';
+import { Focus, Camera, Clock, X } from 'lucide-react';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { useEscapeKey } from '../../hooks/useEscapeKey';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
+import { MEDIA_QUERIES } from '../../lib/constants';
 
 interface GraphNode {
   id: string;
@@ -38,6 +40,7 @@ const GraphControls: React.FC<GraphControlsProps> = ({
   const [snapshotName, setSnapshotName] = useState('');
   const [snapshotDesc, setSnapshotDesc] = useState('');
   const modalRef = useRef<HTMLDivElement>(null);
+  const isMobile = useMediaQuery(MEDIA_QUERIES.MOBILE);
 
   useFocusTrap(modalRef, showSaveModal);
   useEscapeKey(() => setShowSaveModal(false), showSaveModal);
@@ -50,31 +53,36 @@ const GraphControls: React.FC<GraphControlsProps> = ({
     setSnapshotDesc('');
   };
 
-  return (
-    <>
-      <div className="viz-controls">
+  const controls = (
+    <div className={isMobile ? "viz-controls-mobile" : "viz-controls"}>
+      <button
+        onClick={() => setFocusMode(!focusMode)}
+        className={focusMode ? 'active' : ''}
+        disabled={!hasSelection}
+        aria-pressed={focusMode}
+        title={!hasSelection ? "Select a node first" : "Toggle Neighborhood Focus"}
+      >
+        <Focus size={16} /> {focusMode ? 'Show All' : 'Focus Neighborhood'}
+      </button>
+      {onSaveSnapshot && (
         <button
-          onClick={() => setFocusMode(!focusMode)}
-          className={focusMode ? 'active' : ''}
-          disabled={!hasSelection}
-          title={!hasSelection ? "Select a node first" : "Toggle Neighborhood Focus"}
+          onClick={() => setShowSaveModal(true)}
+          title="Save Graph Snapshot"
         >
-          <Focus size={16} /> {focusMode ? 'Show All' : 'Focus Neighborhood'}
+          <Camera size={16} /> Save Snapshot
         </button>
-        {onSaveSnapshot && (
-          <button
-            onClick={() => setShowSaveModal(true)}
-            title="Save Graph Snapshot"
-          >
-            <Camera size={16} /> Save Snapshot
-          </button>
-        )}
-        {hasSelection && (
-          <div className="selection-info">
-            Selected: <strong>{selectedName}</strong>
-          </div>
-        )}
-      </div>
+      )}
+      {hasSelection && !isMobile && (
+        <div className="selection-info">
+          Selected: <strong>{selectedName}</strong>
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      {controls}
 
       {showSaveModal && (
         <div className="modal-overlay" onClick={() => setShowSaveModal(false)}>
@@ -86,10 +94,17 @@ const GraphControls: React.FC<GraphControlsProps> = ({
             aria-modal="true"
             aria-labelledby="modal-title"
           >
-            <h3 id="modal-title"><Camera size={16} /> Save Graph Snapshot</h3>
-            <p className="modal-meta">
+            <div className="inspector-header" style={{ marginBottom: 'var(--space-4)', padding: 0, background: 'transparent', border: 0 }}>
+              <h3 id="modal-title"><Camera size={18} /> Save Graph Snapshot</h3>
+              <button className="close-button" onClick={() => setShowSaveModal(false)} aria-label="Close modal">
+                <X size={18} />
+              </button>
+            </div>
+
+            <p className="modal-meta" style={{ marginBottom: 'var(--space-4)', fontSize: '13px', color: 'var(--text-muted)' }}>
               <Clock size={14} /> {new Date().toLocaleString()} | {nodes.length} nodes, {edges.length} edges
             </p>
+
             <div className="form-group">
               <label htmlFor="snapshot-name">Snapshot Name *</label>
               <input
@@ -109,6 +124,7 @@ const GraphControls: React.FC<GraphControlsProps> = ({
                 onChange={(e) => setSnapshotDesc(e.target.value)}
                 placeholder="Optional notes about this snapshot..."
                 rows={2}
+                style={{ width: '100%', padding: 'var(--space-2)', borderRadius: 'var(--radius-base)', border: '1px solid var(--border-default)' }}
               />
             </div>
             <div className="modal-actions">
diff --git a/src/features/graph/GraphInspector.tsx b/src/features/graph/GraphInspector.tsx
new file mode 100644
index 0000000..705d5cb
--- /dev/null
+++ b/src/features/graph/GraphInspector.tsx
@@ -0,0 +1,101 @@
+import React, { useMemo } from 'react';
+import { X, ExternalLink, Info, ShieldCheck } from 'lucide-react';
+import { Entity, Claim, Link } from '../../lib/validation';
+
+interface GraphInspectorProps {
+  entity: Entity;
+  claims: Claim[];
+  links: Link[];
+  entities: Entity[];
+  onClose: () => void;
+}
+
+const GraphInspector: React.FC<GraphInspectorProps> = ({
+  entity,
+  claims,
+  links,
+  entities,
+  onClose
+}) => {
+  const outgoingLinks = useMemo(() =>
+    links.filter(l => l.source_id === entity.id),
+    [links, entity.id]
+  );
+
+  const incomingLinks = useMemo(() =>
+    links.filter(l => l.target_id === entity.id),
+    [links, entity.id]
+  );
+
+  const getEntityName = (id: string) =>
+    entities.find(e => e.id === id)?.name || 'Unknown Entity';
+
+  return (
+    <aside className="inspector-panel" aria-label={`Details for ${entity.name}`}>
+      <div className="inspector-header">
+        <h3>{entity.name}</h3>
+        <button className="close-button" onClick={onClose} aria-label="Close inspector">
+          <X size={18} />
+        </button>
+      </div>
+
+      <div className="inspector-content">
+        <div className="inspector-section">
+          <div className="result-type">{entity.type}</div>
+          {entity.description && (
+            <p className="result-description">{entity.description}</p>
+          )}
+        </div>
+
+        {claims.length > 0 && (
+          <div className="inspector-section">
+            <h4><ShieldCheck size={14} /> Claims</h4>
+            <ul className="results-list">
+              {claims.map(claim => (
+                <li key={claim.id} className="search-result-item">
+                  <div className="msg-text" style={{ fontSize: '13px' }}>{claim.statement}</div>
+                  {claim.evidence && (
+                    <div className="result-meta" style={{ marginTop: '4px' }}>
+                      <span className="provenance-tag">Evidence: {claim.evidence}</span>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {(outgoingLinks.length > 0 || incomingLinks.length > 0) && (
+          <div className="inspector-section">
+            <h4><ExternalLink size={14} /> Relationships</h4>
+            <ul className="results-list">
+              {outgoingLinks.map(link => (
+                <li key={link.id} className="search-result-item">
+                  <div style={{ fontSize: '13px' }}>
+                    <strong>{link.relation}</strong> → {getEntityName(link.target_id)}
+                  </div>
+                </li>
+              ))}
+              {incomingLinks.map(link => (
+                <li key={link.id} className="search-result-item">
+                  <div style={{ fontSize: '13px' }}>
+                    {getEntityName(link.source_id)} → <strong>{link.relation}</strong>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {claims.length === 0 && outgoingLinks.length === 0 && incomingLinks.length === 0 && (
+          <div className="no-results-state" style={{ padding: 'var(--space-4)' }}>
+            <Info size={24} className="no-results-icon" />
+            <p>No claims or links found for this entity.</p>
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+};
+
+export default GraphInspector;
diff --git a/src/features/graph/GraphView.tsx b/src/features/graph/GraphView.tsx
index 9d91d6d..dc45c6b 100644
--- a/src/features/graph/GraphView.tsx
+++ b/src/features/graph/GraphView.tsx
@@ -1,9 +1,12 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import Sigma from 'sigma';
 import Graph from 'graphology';
-import { Entity, Link } from '../../lib/validation';
+import { Entity, Link, Claim } from '../../lib/validation';
 import GraphControls from './GraphControls';
+import GraphInspector from './GraphInspector';
 import { jobCoordinator } from '../../lib/jobs';
+import { repository } from '../../db/repository';
+import { Filter } from 'lucide-react';
 
 interface Props {
   entities: Entity[];
@@ -22,42 +25,96 @@ const GraphView: React.FC<Props> = ({
   onFocusModeChange,
   selectedNode: propsSelectedNode,
   onSelectedNodeChange,
-  hideToolbar
+  hideToolbar: _hideToolbar
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const sigmaInstance = useRef<Sigma | null>(null);
 
   const [internalSelectedNode, setInternalSelectedNode] = useState<string | null>(null);
   const [internalFocusMode, setInternalFocusMode] = useState(false);
+  const [relationFilter, setRelationFilter] = useState<string>('all');
+  const [selectedEntityClaims, setSelectedEntityClaims] = useState<Claim[]>([]);
 
   const selectedNode = propsSelectedNode !== undefined ? propsSelectedNode : internalSelectedNode;
   const focusMode = propsFocusMode !== undefined ? propsFocusMode : internalFocusMode;
 
+  // Sync with URL search parameters
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const node = params.get('node');
+    const focus = params.get('focus') === 'true';
+
+    if (node && node !== selectedNode) {
+      if (onSelectedNodeChange) onSelectedNodeChange(node);
+      else setInternalSelectedNode(node);
+    }
+    if (focus !== focusMode) {
+      if (onFocusModeChange) onFocusModeChange(focus);
+      else setInternalFocusMode(focus);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const setSelectedNode = useCallback((node: string | null) => {
+    const params = new URLSearchParams(window.location.search);
+    if (node) params.set('node', node);
+    else params.delete('node');
+    window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
+
     if (onSelectedNodeChange) onSelectedNodeChange(node);
     else setInternalSelectedNode(node);
   }, [onSelectedNodeChange]);
 
   const setFocusMode = useCallback((focus: boolean) => {
+    const params = new URLSearchParams(window.location.search);
+    if (focus) params.set('focus', 'true');
+    else params.delete('focus');
+    window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
+
     if (onFocusModeChange) onFocusModeChange(focus);
     else setInternalFocusMode(focus);
   }, [onFocusModeChange]);
 
+  const uniqueRelations = useMemo(() => {
+    const relations = new Set(links.map(l => l.relation));
+    return ['all', ...Array.from(relations)];
+  }, [links]);
+
+  useEffect(() => {
+    if (selectedNode) {
+      repository.getClaimsByEntityId(selectedNode).then(setSelectedEntityClaims);
+    } else {
+      setSelectedEntityClaims([]);
+    }
+  }, [selectedNode]);
+
   const [filteredData, setFilteredData] = useState({ entities, links });
 
   useEffect(() => {
+    let currentEntities = entities;
+    let currentLinks = links;
+
+    if (relationFilter !== 'all') {
+      currentLinks = links.filter(l => l.relation === relationFilter);
+      const activeNodeIds = new Set([
+        ...currentLinks.map(l => l.source_id),
+        ...currentLinks.map(l => l.target_id)
+      ]);
+      currentEntities = entities.filter(e => activeNodeIds.has(e.id!));
+    }
+
     if (!focusMode || !selectedNode) {
-      setFilteredData({ entities, links });
+      setFilteredData({ entities: currentEntities, links: currentLinks });
       return;
     }
 
     jobCoordinator.enqueue('recompute-neighborhood', selectedNode, {
-      entities,
-      links,
+      entities: currentEntities,
+      links: currentLinks,
       selectedNode,
       focusMode
     });
-  }, [entities, links, selectedNode, focusMode]);
+  }, [entities, links, selectedNode, focusMode, relationFilter]);
 
   useEffect(() => {
     const handler = async (payload: unknown) => {
@@ -86,14 +143,26 @@ const GraphView: React.FC<Props> = ({
     const graph = new Graph();
 
     if (filteredData.entities.length === 0 && !focusMode) {
-      // Show default placeholder if no data
-      graph.addNode('1', { label: 'Knowledge Studio', size: 10, color: '#2563eb', x: 0, y: 0 });
+      graph.addNode('1', {
+        label: 'Knowledge Studio',
+        size: 15,
+        color: 'var(--viz-node-default)',
+        x: 0,
+        y: 0
+      });
     } else {
       filteredData.entities.forEach((e, i) => {
+        const isSelected = e.id === selectedNode;
+        let color = 'var(--viz-node-default)';
+        if (isSelected) color = 'var(--viz-node-selected)';
+        else if (e.type === 'concept') color = 'var(--viz-node-concept)';
+        else if (e.type === 'person') color = 'var(--viz-node-person)';
+        else if (e.type === 'project') color = 'var(--viz-node-project)';
+
         graph.addNode(e.id ?? String(i), {
           label: e.name,
-          size: e.id === selectedNode ? 20 : 10,
-          color: e.id === selectedNode ? '#ef4444' : '#2563eb',
+          size: isSelected ? 20 : 10,
+          color,
           x: Math.cos((i * 2 * Math.PI) / filteredData.entities.length),
           y: Math.sin((i * 2 * Math.PI) / filteredData.entities.length)
         });
@@ -103,7 +172,7 @@ const GraphView: React.FC<Props> = ({
           graph.addEdge(l.source_id, l.target_id, {
             label: l.relation,
             size: 2,
-            color: '#94a3b8'
+            color: 'var(--viz-edge-default)'
           });
         }
       });
@@ -115,7 +184,8 @@ const GraphView: React.FC<Props> = ({
 
     sigmaInstance.current = new Sigma(graph, containerRef.current, {
       renderEdgeLabels: true,
-      defaultEdgeType: 'arrow'
+      defaultEdgeType: 'arrow',
+      labelRenderedSizeThreshold: 10
     });
 
     sigmaInstance.current.on('clickNode', ({ node }) => {
@@ -133,19 +203,65 @@ const GraphView: React.FC<Props> = ({
     };
   }, [filteredData, selectedNode, focusMode, setFocusMode, setSelectedNode]);
 
+  const selectedEntity = useMemo(() =>
+    entities.find(e => e.id === selectedNode),
+    [entities, selectedNode]
+  );
+
   return (
     <div className="graph-container">
-      {!hideToolbar && (
-        <div className="viz-toolbar">
-          <GraphControls
-            focusMode={focusMode}
-            setFocusMode={setFocusMode}
-            hasSelection={!!selectedNode}
-            selectedName={entities.find(e => e.id === selectedNode)?.name}
-          />
+      <div className="viz-toolbar">
+        <GraphControls
+          focusMode={focusMode}
+          setFocusMode={setFocusMode}
+          hasSelection={!!selectedNode}
+          selectedName={selectedEntity?.name}
+        />
+
+        <div className="filter-group" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)', marginLeft: 'auto' }}>
+          <Filter size={16} className="text-muted" />
+          <select
+            value={relationFilter}
+            onChange={(e) => setRelationFilter(e.target.value)}
+            className="filter-chip"
+            style={{ minHeight: '32px', width: 'auto' }}
+            aria-label="Filter by relationship type"
+          >
+            {uniqueRelations.map(rel => (
+              <option key={rel} value={rel}>
+                {rel === 'all' ? 'All Relations' : rel}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="graph-layout">
+        <div className="viz-container" style={{ flex: 1 }}>
+          <div ref={containerRef} className="viz-canvas" />
+
+          {/* Accessible Summary */}
+          <div className="sr-only">
+            <h4>Graph Summary</h4>
+            <p>Showing {filteredData.entities.length} entities and {filteredData.links.length} relationships.</p>
+            <ul>
+              {filteredData.entities.map(e => (
+                <li key={e.id}>{e.name} ({e.type})</li>
+              ))}
+            </ul>
+          </div>
         </div>
-      )}
-      <div ref={containerRef} className="viz-container" style={{ height: '600px', width: '100%' }} />
+
+        {selectedEntity && (
+          <GraphInspector
+            entity={selectedEntity}
+            claims={selectedEntityClaims}
+            links={links}
+            entities={entities}
+            onClose={() => setSelectedNode(null)}
+          />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/features/mindmap/MindMapView.tsx b/src/features/mindmap/MindMapView.tsx
index 1673c6b..e94d685 100644
--- a/src/features/mindmap/MindMapView.tsx
+++ b/src/features/mindmap/MindMapView.tsx
@@ -1,39 +1,164 @@
-import React, { useEffect, useRef } from 'react';
-import MindElixir, { type Options } from 'mind-elixir';
-import { Entity } from '../../lib/validation';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import MindElixir, { type MindElixirData } from 'mind-elixir';
+import { Entity, Link } from '../../lib/validation';
+import { ChevronDown, Layers, Filter, Info } from 'lucide-react';
 
 interface Props {
   rootEntity: Entity;
   relatedEntities: Entity[];
+  entities: Entity[];
+  links: Link[];
+  onEntityClick?: (entityId: string) => void;
 }
 
-const MindMapView: React.FC<Props> = ({ rootEntity, relatedEntities }) => {
+const MindMapView: React.FC<Props> = ({
+  rootEntity: propsRootEntity,
+  relatedEntities: _relatedEntities,
+  entities,
+  links,
+  onEntityClick
+}) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mindInstance = useRef<any>(null);
+  const [rootId, setRootId] = useState<string>(propsRootEntity.id || '');
+  const [maxDepth, setMaxDepth] = useState(2);
+  const [relationFilter, setRelationFilter] = useState('all');
+
+  const rootEntity = useMemo(() =>
+    entities.find(e => e.id === rootId) || propsRootEntity,
+    [entities, rootId, propsRootEntity]
+  );
+
+  const uniqueRelations = useMemo(() => {
+    const relations = new Set(links.map(l => l.relation));
+    return ['all', ...Array.from(relations)];
+  }, [links]);
+
+  const treeData = useMemo(() => {
+    const buildTree = (currentId: string, depth: number): MindElixirData['nodeData'] | null => {
+      const entity = entities.find(e => e.id === currentId);
+      if (!entity || depth > maxDepth) return null;
+
+      const childrenLinks = links.filter(l =>
+        l.source_id === currentId &&
+        (relationFilter === 'all' || l.relation === relationFilter)
+      );
+
+      return {
+        id: entity.id || `node-${Math.random()}`,
+        topic: entity.name,
+        children: childrenLinks
+          .map(l => buildTree(l.target_id, depth + 1))
+          .filter((n): n is MindElixirData['nodeData'] => n !== null)
+      };
+    };
+
+    return buildTree(rootId, 0) || { id: 'root', topic: 'No data' };
+  }, [rootId, entities, links, maxDepth, relationFilter]);
 
   useEffect(() => {
-    if (!containerRef.current) return;
+    const currentContainer = containerRef.current;
+    if (!currentContainer) return;
 
-    const options: Options = {
+    const options = {
       el: containerRef.current,
       direction: 2, // SIDE
+      draggable: true,
+      contextMenu: true,
+      toolBar: true,
+      nodeMenu: true,
+      keypress: true,
     };
 
-    const mind = new MindElixir(options);
-
-    mind.init({
-      nodeData: {
-        id: rootEntity.id ?? 'root',
-        topic: rootEntity.name,
-        // root: true, // Type definition might not include this in some versions
-        children: relatedEntities.map(e => ({
-          id: e.id ?? Math.random().toString(),
-          topic: e.name
-        }))
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mindInstance.current = new (MindElixir as any)(options);
+    mindInstance.current.init({
+      nodeData: treeData
+    } as MindElixirData);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mindInstance.current.bus.addListener('selectNode', (node: any) => {
+      if (node.id && onEntityClick) {
+        onEntityClick(node.id);
       }
     });
-  }, [rootEntity, relatedEntities]);
 
-  return <div ref={containerRef} className="viz-container" />;
+    return () => {
+      if (mindInstance.current) {
+        // MindElixir doesn't have a clear kill method in some versions,
+        // but we can clear the container
+        if (currentContainer) currentContainer.innerHTML = '';
+      }
+    };
+  }, [treeData, onEntityClick]);
+
+  return (
+    <div className="graph-container">
+      <div className="viz-toolbar">
+        <div className="filter-group" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          <ChevronDown size={16} className="text-muted" />
+          <select
+            value={rootId}
+            onChange={(e) => setRootId(e.target.value)}
+            className="filter-chip"
+            style={{ width: 'auto' }}
+            aria-label="Select root entity"
+          >
+            {entities.map(e => (
+              <option key={e.id} value={e.id}>{e.name}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="filter-group" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          <Layers size={16} className="text-muted" />
+          <select
+            value={maxDepth}
+            onChange={(e) => setMaxDepth(Number(e.target.value))}
+            className="filter-chip"
+            style={{ width: 'auto' }}
+            aria-label="Set depth"
+          >
+            {[1, 2, 3, 4, 5].map(d => (
+              <option key={d} value={d}>Depth: {d}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="filter-group" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          <Filter size={16} className="text-muted" />
+          <select
+            value={relationFilter}
+            onChange={(e) => setRelationFilter(e.target.value)}
+            className="filter-chip"
+            style={{ width: 'auto' }}
+            aria-label="Filter relations"
+          >
+            {uniqueRelations.map(rel => (
+              <option key={rel} value={rel}>{rel === 'all' ? 'All Relations' : rel}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="viz-container" style={{ flex: 1, minHeight: '600px' }}>
+        <div ref={containerRef} className="viz-canvas" />
+
+        {/* Accessible Summary */}
+        <div className="sr-only">
+          <h4>Mind Map Summary</h4>
+          <p>Rooted at {rootEntity.name}. Depth: {maxDepth}.</p>
+          <p>This visualization shows a hierarchical view of entities based on their relationships.</p>
+        </div>
+      </div>
+
+      <div className="selection-info" style={{ padding: 'var(--space-2)', display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+        <Info size={14} />
+        <span>Click a node to view details or drag to explore.</span>
+      </div>
+    </div>
+  );
 };
 
 export default MindMapView;
diff --git a/src/lib/__tests__/security.test.ts b/src/lib/__tests__/security.test.ts
deleted file mode 100644
index 7e3a3c8..0000000
--- a/src/lib/__tests__/security.test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { escapeHtml } from '../security';
-
-describe('security utilities', () => {
-  describe('escapeHtml', () => {
-    it('should escape HTML special characters', () => {
-      const input = '<script>alert("XSS & attack")</script>\'';
-      const expected = '&lt;script&gt;alert(&quot;XSS &amp; attack&quot;)&lt;/script&gt;&#039;';
-      expect(escapeHtml(input)).toBe(expected);
-    });
-
-    it('should handle strings without special characters', () => {
-      const input = 'Hello World 123';
-      expect(escapeHtml(input)).toBe(input);
-    });
-
-    it('should escape repeated characters', () => {
-      const input = '<<<<';
-      const expected = '&lt;&lt;&lt;&lt;';
-      expect(escapeHtml(input)).toBe(expected);
-    });
-  });
-});
diff --git a/src/lib/security.ts b/src/lib/security.ts
deleted file mode 100644
index 5145451..0000000
--- a/src/lib/security.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Security utilities for the Knowledge Studio.
- */
-
-/**
- * Escapes HTML special characters to prevent XSS.
- */
-export function escapeHtml(unsafe: string): string {
-  return unsafe
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-}
diff --git a/src/styles/features.css b/src/styles/features.css
index cea36fe..b94b86c 100644
--- a/src/styles/features.css
+++ b/src/styles/features.css
@@ -133,6 +133,14 @@
   border: 1px solid var(--border-default);
   border-radius: var(--radius-md);
   background: var(--bg-surface);
+  position: relative;
+  overflow: hidden;
+}
+
+.viz-canvas {
+  width: 100%;
+  height: 100%;
+  background: var(--bg-surface);
 }
 
 .graph-container {
@@ -140,6 +148,64 @@
   flex-direction: column;
   gap: var(--space-4);
   height: 100%;
+  position: relative;
+}
+
+.graph-layout {
+  display: flex;
+  flex: 1;
+  gap: var(--space-4);
+  min-height: 0;
+}
+
+.inspector-panel {
+  width: 320px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.inspector-header {
+  padding: var(--space-4);
+  border-bottom: 1px solid var(--border-default);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--bg-base);
+}
+
+.inspector-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+.inspector-section {
+  margin-bottom: var(--space-6);
+}
+
+.inspector-section h4 {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-2);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }
 
 .viz-toolbar {
@@ -158,6 +224,16 @@
   color: var(--text-secondary);
 }
 
+.viz-controls-mobile {
+  display: flex;
+  gap: var(--space-2);
+  width: 100%;
+}
+
+.viz-controls-mobile button {
+  flex: 1;
+}
+
 .viz-toolbar button.active {
   background: #eff6ff;
   border-color: var(--interactive-primary);
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 9cdd44f..a65f511 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -64,6 +64,17 @@
   --search-sidebar-width: 300px;
   --header-height: 60px;
 
+  /* Visualization Tokens */
+  --viz-node-default: #2563eb;
+  --viz-node-selected: #ef4444;
+  --viz-node-concept: #3b82f6;
+  --viz-node-person: #10b981;
+  --viz-node-project: #f59e0b;
+  --viz-node-highlight: #6366f1;
+  --viz-edge-default: #94a3b8;
+  --viz-edge-highlight: #3b82f6;
+  --viz-edge-label: #64748b;
+
   /* Breakpoints */
   --breakpoint-mobile: 768px;
   --breakpoint-tablet: 1024px;
