- {/* Stats bar */}
- {stats && (
-
- {t("kg.stats.entities", { count: stats.entity_count })}
- {t("kg.stats.relations", { count: stats.relation_count })}
- {Object.entries(stats.entity_types).map(([type, count]) => (
- {type}: {count}
- ))}
-
- )}
-
- {/* Search + actions */}
-
+ {/* Search + stats + actions — single compact row */}
+
setSearchQuery(e.target.value)}
onKeyDown={handleKeyDown}
placeholder={t("kg.search.placeholder")}
- className="max-w-sm"
+ className="max-w-[220px] h-8 text-xs"
/>
-
-
diff --git a/ui/web/src/pages/memory/kg-graph-view.tsx b/ui/web/src/pages/memory/kg-graph-view.tsx
index 54001b8c..0700f857 100644
--- a/ui/web/src/pages/memory/kg-graph-view.tsx
+++ b/ui/web/src/pages/memory/kg-graph-view.tsx
@@ -1,8 +1,10 @@
import { useMemo, useEffect, useCallback, useRef } from "react";
import {
ReactFlow,
+ ReactFlowProvider,
useNodesState,
useEdgesState,
+ useReactFlow,
Background,
Controls,
MiniMap,
@@ -88,6 +90,7 @@ function applyForceLayout(
nodes: Node[],
edges: Edge[],
onUpdate: (positioned: Node[]) => void,
+ onSettled?: () => void,
) {
if (nodes.length === 0) return () => {};
@@ -113,6 +116,8 @@ function applyForceLayout(
onUpdate(positioned);
});
+ simulation.on("end", () => onSettled?.());
+
// Run fast to settle
simulation.alpha(1).restart();
@@ -125,8 +130,17 @@ interface KGGraphViewProps {
onEntityClick?: (entity: KGEntity) => void;
}
-export function KGGraphView({ entities, relations, onEntityClick }: KGGraphViewProps) {
+export function KGGraphView(props: KGGraphViewProps) {
+ return (
+
+
+
+ );
+}
+
+function KGGraphViewInner({ entities, relations, onEntityClick }: KGGraphViewProps) {
const { t } = useTranslation("memory");
+ const { fitView } = useReactFlow();
const { nodes: initialNodes, edges: initialEdges } = useMemo(
() => buildGraph(entities, relations),
[entities, relations],
@@ -136,13 +150,18 @@ export function KGGraphView({ entities, relations, onEntityClick }: KGGraphViewP
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const simRef = useRef<(() => void) | null>(null);
+ // Fit view after simulation settles so the graph covers the viewport
+ const handleSettled = useCallback(() => {
+ requestAnimationFrame(() => fitView({ padding: 0.15, duration: 300 }));
+ }, [fitView]);
+
// Run force layout when data changes
useEffect(() => {
setEdges(initialEdges);
simRef.current?.();
- simRef.current = applyForceLayout(initialNodes, initialEdges, setNodes);
+ simRef.current = applyForceLayout(initialNodes, initialEdges, setNodes, handleSettled);
return () => simRef.current?.();
- }, [initialNodes, initialEdges, setNodes, setEdges]);
+ }, [initialNodes, initialEdges, setNodes, setEdges, handleSettled]);
const handleNodeClick = useCallback(
(_: React.MouseEvent, node: Node) => {
@@ -171,8 +190,8 @@ export function KGGraphView({ entities, relations, onEntityClick }: KGGraphViewP
onNodeClick={handleNodeClick}
nodeTypes={nodeTypes}
fitView
- minZoom={0.2}
- maxZoom={2}
+ minZoom={0.1}
+ maxZoom={3}
proOptions={{ hideAttribution: true }}
>
diff --git a/ui/web/src/pages/memory/memory-page.tsx b/ui/web/src/pages/memory/memory-page.tsx
index 9f65acaf..56977dae 100644
--- a/ui/web/src/pages/memory/memory-page.tsx
+++ b/ui/web/src/pages/memory/memory-page.tsx
@@ -1,6 +1,6 @@
import { useState, useMemo } from "react";
import { useTranslation } from "react-i18next";
-import { Brain, Plus, RefreshCw, Search, Database, Trash2, RotateCw, Network } from "lucide-react";
+import { Brain, Plus, RefreshCw, Search, Database, Trash2, RotateCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Label } from "@/components/ui/label";
@@ -14,7 +14,6 @@ import { useMemoryDocuments } from "./hooks/use-memory";
import { MemoryDocumentDialog } from "./memory-document-dialog";
import { MemoryCreateDialog } from "./memory-create-dialog";
import { MemorySearchDialog } from "./memory-search-dialog";
-import { KGEntitiesTab } from "./kg-entities-tab";
import { useMinLoading } from "@/hooks/use-min-loading";
import { useDeferredLoading } from "@/hooks/use-deferred-loading";
import type { MemoryDocument } from "@/types/memory";
@@ -31,7 +30,6 @@ export function MemoryPage() {
const [deleteLoading, setDeleteLoading] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
const [indexAllLoading, setIndexAllLoading] = useState(false);
- const [activeTab, setActiveTab] = useState<"documents" | "kg">("documents");
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(20);
@@ -172,33 +170,8 @@ export function MemoryPage() {
)}