Graph Viewer

The AutoMem Graph Viewer is a standalone web application that renders your memory graph as an interactive 3D force-directed layout. It connects to the AutoMem API to fetch graph snapshots and lets you visually explore memories, relationships, clusters, and temporal patterns.

The automem API exposes /viewer compatibility routes that redirect into the graph viewer, so users can access it directly from a running AutoMem instance.

Key Features

3D Force-Directed Graph

The core visualization uses 3d-force-graph to render memory nodes and relationship edges in a physics-based 3D layout. Nodes are colored and sized by memory type, importance, or custom attributes. Edges reflect relationship types (RELATES_TO, LEADS_TO, EVOLVED_INTO, etc.) with distinct visual styles.

Configuration options include:

Parameter	Description
Charge strength	Repulsion between nodes
Link distance	Preferred edge length
Center gravity	Pull toward origin
Collision radius	Minimum node spacing

Inspector Panel

Click any node to open the Inspector, which shows full memory details: content, type, confidence, tags, importance, timestamps, metadata, and all connected relationships. The panel is resizable via drag handles.

Search & Filtering

SearchBar — Full-text search across memory content with instant highlighting
FilterPanel — Filter by memory type, tags, importance range, date range, and relationship types
FilterChips — Active filters displayed as dismissible chips
TagCloud — Visual tag frequency display; click tags to filter

Timeline & Time Travel

The TimelineBar lets you scrub through your memory graph’s history. The useTimeTravel hook maintains temporal state so you can see how the graph evolved over time.

Pathfinding

Select two nodes and the PathfindingOverlay computes and highlights the shortest path between them through the relationship graph, using the usePathfinding hook.

Cluster Detection

The useClusterDetection hook identifies densely connected subgraphs and renders ClusterBoundaries around them. Useful for spotting topic groupings in your memory graph.

Full keyboard navigation support via useKeyboardNavigation:

Arrow keys to traverse nodes
Enter to select/inspect
/ to focus search
? to show the keyboard shortcuts help overlay

Bookmarks

Save and recall specific graph views (camera position, selected nodes, active filters) via the BookmarksPanel.

Experimental: Hand Tracking Controls

When VITE_ENABLE_HAND_CONTROLS=true, the viewer enables gesture-based interaction via webcam hand tracking:

Pinch to select nodes
Grab to pan/rotate the view
Two-hand gestures for zoom and rotation
iPhone hand tracking support via useIPhoneHandTracking

This feature is opt-in and experimental.

Architecture

src/
├── App.tsx                    # Main app shell, state orchestration
├── api/
│   └── client.ts              # AutoMem API client (auth, fetch)
├── components/                # UI components
│   ├── GraphCanvas.tsx        # 3D force graph renderer
│   ├── Inspector.tsx          # Node detail panel
│   ├── SearchBar.tsx          # Full-text search
│   ├── FilterPanel.tsx        # Type/tag/date filters
│   ├── TimelineBar.tsx        # Temporal scrubber
│   ├── PathfindingOverlay.tsx # Shortest-path visualization
│   ├── BookmarksPanel.tsx     # Saved views
│   ├── StatsBar.tsx           # Graph statistics
│   ├── MiniMap.tsx            # Overview minimap
│   ├── RadialMenu.tsx         # Context menu
│   └── settings/              # Force/display/cluster config
├── hooks/                     # React hooks (data, navigation, gestures)
│   ├── useGraphData.ts        # Fetches graph snapshots from API
│   ├── useAuth.ts             # Token management
│   ├── useForceLayout.ts      # Physics simulation config
│   ├── useTimeTravel.ts       # Temporal navigation
│   ├── usePathfinding.ts      # Shortest-path algorithm
│   └── ...
└── lib/
    ├── types.ts               # TypeScript type definitions
    ├── edgeStyles.ts          # Relationship visual styles
    └── sounds.ts              # UI sound effects

The app is a single-page React application built with Vite. All state lives in React hooks — there’s no external state management library. The API client handles authentication and communicates with the AutoMem REST API.