fix: resolve graph edges rendering, fallback query search, community generation timeouts, query session persistence, and new chat functionality

backend/graphrag/services/community_detector.py

@@ -88,14 +88,31 @@ class CommunityDetector:
                 "relationship_count": relationship_count
             })
 
-        # 6. Generate LLM labels and summaries for each community
-        for comm in community_list:
-            label_summary = self._generate_community_label_summary(comm)
-            comm["label"] = label_summary.get("label", f"Community {comm['id']}")
-            comm["summary"] = label_summary.get("summary", "")
+        # 6. Cache the raw structure immediately (so fast requests get data right away)
+        cache.set(f"communities_{user_id}", community_list, COMMUNITY_CACHE_TTL)
 
+        # 7. Generate LLM labels and summaries for each community (may be slow)
+        for comm in community_list:
+            try:
+                label_summary = self._generate_community_label_summary(comm)
+                comm["label"] = label_summary.get("label", f"Community {comm['id']}")
+                comm["summary"] = label_summary.get("summary", "")
+            except Exception as e:
+                logger.warning("LLM label generation failed for community %s: %s", comm['id'], str(e))
+                comm["label"] = f"Community {comm['id']}"
+                comm["summary"] = ""
+
+        # 8. Cache final labeled result
         logger.info("Detected %d communities for user: %s", len(community_list), user_id)
         cache.set(f"communities_{user_id}", community_list, COMMUNITY_CACHE_TTL)
+
+        # 9. Generate and cache document summary
+        try:
+            doc_summary = self._build_doc_summary_from_communities(community_list)
+            cache.set(f"doc_summary_{user_id}", doc_summary, COMMUNITY_CACHE_TTL)
+        except Exception:
+            pass
+
         return community_list
 
     def _label_propagation(self, nodes: set, adjacency: dict, max_iterations: int = 20) -> Dict[int, set]:
@@ -214,15 +231,15 @@ class CommunityDetector:
         return None
 
     def get_all_communities(self, user_id: str) -> List[Dict]:
-        """Returns all communities, using cache if available."""
-        cached = cache.get(f"communities_{user_id}", [])
-        if not cached:
-            cached = self.detect_communities(user_id)
-        return cached
+        """Returns all communities from cache only. Caller must trigger detect_communities() separately."""
+        return cache.get(f"communities_{user_id}", [])
 
     def get_document_summary(self, user_id: str) -> str:
+        """Returns cached document summary (never blocks on LLM)."""
+        return cache.get(f"doc_summary_{user_id}", "")
+
+    def _build_doc_summary_from_communities(self, communities: List[Dict]) -> str:
         """Generate a document-level summary by combining all community summaries."""
-        communities = self.get_all_communities(user_id)
         if not communities:
             return ""
 
@@ -235,7 +252,7 @@ class CommunityDetector:
                 community_texts.append(f"**{label}** ({member_count} entities): {summary}")
 
         if not community_texts:
-            return ""
+            return f"Document contains {len(communities)} topic clusters."
 
         prompt = ChatPromptTemplate.from_messages([
             ("system", (

backend/graphrag/services/graph_retriever.py

@@ -39,15 +39,12 @@ class GraphRetriever:
         """
         Extracts entities from the query, traverses their Neo4j subgraphs,
         and returns a serialized text block representing the graph context.
+        Falls back to a keyword entity search if no exact entity match is found.
         """
         logger.info("Retrieving graph context for query: '%s' (User: %s, Docs: %s)", query, user_id, doc_names)
         
         # 1. Extract entities from query using LLM
         query_entities = self._extract_entities_from_query(query)
-        if not query_entities:
-            logger.info("No entities extracted from user query. Returning empty graph context.")
-            return ""
-
         logger.info("Extracted query entities: %s", query_entities)
 
         unique_nodes: Dict[str, dict] = {}
@@ -61,7 +58,65 @@ class GraphRetriever:
             except Exception as e:
                 logger.error("Failed to query subgraph for entity: %s. Error: %s", entity_name, str(e))
 
-        # 3. Serialize extracted graph information into a readable markdown string
+        # 3. FALLBACK: If no graph nodes found from entity extraction, try keyword search
+        # This handles broad queries like "list all persons" or "what companies are mentioned"
+        if not unique_nodes:
+            logger.info("No exact entity matches — falling back to keyword search across graph.")
+            try:
+                # Search across all entity names using the query words as keywords
+                keywords = [w for w in query.split() if len(w) > 3]
+                search_hits = []
+                for kw in keywords[:5]:  # Limit to 5 keywords
+                    results = self.neo4j_client.search_entities(kw, user_id, limit=10)
+                    search_hits.extend(results)
+                
+                # De-duplicate by name
+                seen = set()
+                for hit in search_hits:
+                    name = hit.get("name", "")
+                    if name and name not in seen:
+                        seen.add(name)
+                        unique_nodes[name] = {
+                            "type": hit.get("type", "Unknown"),
+                            "description": hit.get("description", "")
+                        }
+
+                # If still nothing, do a broad entity-type match (e.g., "person" → fetch all PERSON nodes)
+                if not unique_nodes:
+                    entity_type_map = {
+                        "person": "PERSON", "people": "PERSON", "persons": "PERSON",
+                        "company": "ORGANIZATION", "companies": "ORGANIZATION", "organizations": "ORGANIZATION",
+                        "product": "PRODUCT", "products": "PRODUCT",
+                        "technology": "TECHNOLOGY", "technologies": "TECHNOLOGY",
+                        "location": "LOCATION", "locations": "LOCATION",
+                        "event": "EVENT", "events": "EVENT",
+                        "concept": "CONCEPT", "concepts": "CONCEPT",
+                    }
+                    query_lower = query.lower()
+                    target_type = None
+                    for kw, etype in entity_type_map.items():
+                        if kw in query_lower:
+                            target_type = etype
+                            break
+                    
+                    if target_type:
+                        type_results = self.neo4j_client.execute_query(
+                            "MATCH (e:Entity {user_id: $user_id, type: $type}) "
+                            "RETURN e.name AS name, e.type AS type, e.description AS description "
+                            "LIMIT 30",
+                            {"user_id": str(user_id), "type": target_type}
+                        )
+                        for r in type_results:
+                            name = r.get("name", "")
+                            if name:
+                                unique_nodes[name] = {
+                                    "type": r.get("type", "Unknown"),
+                                    "description": r.get("description", "")
+                                }
+            except Exception as e:
+                logger.error("Keyword fallback search failed: %s", str(e))
+
+        # 4. Serialize extracted graph information into a readable markdown string
         if not unique_nodes:
             logger.info("No matching entities or paths found in the graph for query.")
             return ""
@@ -78,7 +133,7 @@ class GraphRetriever:
                 context_lines.append(f"* {rel}")
 
         serialized_context = "\n".join(context_lines)
-        logger.info("Generated graph context (%d characters).", len(serialized_context))
+        logger.info("Generated graph context (%d characters, %d entities).", len(serialized_context), len(unique_nodes))
         return serialized_context
 
     def get_graph_as_json(self, user_id: str, doc_ids: List[str] = None) -> Dict[str, Any]:

backend/graphrag/services/neo4j_client.py

@@ -270,12 +270,13 @@ class Neo4jClient:
                 "       e.source_doc AS source_doc, e.source_doc_id AS source_doc_id, e.page AS page "
                 "LIMIT 500"
             )
+            # Filter edges by checking that BOTH endpoint nodes belong to the filtered docs
             edges_query = (
                 "MATCH (s:Entity {user_id: $user_id})-[r]->(t:Entity {user_id: $user_id}) "
-                "WHERE r.source_doc_id IN $doc_ids "
+                "WHERE s.source_doc_id IN $doc_ids AND t.source_doc_id IN $doc_ids "
                 "RETURN s.name AS source, t.name AS target, "
                 "       type(r) AS relationship_type, r.description AS description, "
-                "       r.confidence AS confidence, r.source_doc AS source_doc, r.source_doc_id AS source_doc_id "
+                "       r.confidence AS confidence, r.source_doc AS source_doc "
                 "LIMIT 1000"
             )
             params = {"user_id": str(user_id), "doc_ids": [str(d) for d in doc_ids]}
@@ -286,11 +287,12 @@ class Neo4jClient:
                 "       e.source_doc AS source_doc, e.source_doc_id AS source_doc_id, e.page AS page "
                 "LIMIT 500"
             )
+            # No doc filter — return ALL edges between user's nodes
             edges_query = (
                 "MATCH (s:Entity {user_id: $user_id})-[r]->(t:Entity {user_id: $user_id}) "
                 "RETURN s.name AS source, t.name AS target, "
                 "       type(r) AS relationship_type, r.description AS description, "
-                "       r.confidence AS confidence, r.source_doc AS source_doc, r.source_doc_id AS source_doc_id "
+                "       r.confidence AS confidence, r.source_doc AS source_doc "
                 "LIMIT 1000"
             )
             params = {"user_id": str(user_id)}
@@ -298,6 +300,7 @@ class Neo4jClient:
         try:
             nodes = self.execute_query(nodes_query, params)
             edges = self.execute_query(edges_query, params)
+            logger.info("Graph data fetched: %d nodes, %d edges for user %s", len(nodes), len(edges), user_id)
             return {"nodes": nodes, "edges": edges}
         except Exception as e:
             logger.error("Failed to get all graph data: %s", str(e))

backend/graphrag/views.py

@@ -509,6 +509,7 @@ class QueryCompareView(APIView):
                 elapsed = time.time() - start
                 return mode, {
                     "answer": result.get("answer", ""),
+                    "context": result.get("context", ""),
                     "sources": result.get("sources", []),
                     "strategy": result.get("strategy", mode.upper()),
                     "response_time": round(elapsed, 3),
@@ -694,27 +695,55 @@ class CommunityListView(APIView):
 
     def get(self, request):
         try:
-            detector = CommunityDetector()
-            communities = detector.get_all_communities(request.user.id)
-            doc_summary = detector.get_document_summary(request.user.id)
+            from django.core.cache import cache
+            user_id = str(request.user.id)
+            cache_key = f"communities_{user_id}"
+
+            # Return cached communities immediately
+            cached = cache.get(cache_key, [])
+
+            if not cached:
+                # Cache is empty — trigger background detection and return loading state
+                def _detect_in_background():
+                    try:
+                        detector = CommunityDetector()
+                        detector.detect_communities(user_id)
+                    except Exception as bg_err:
+                        logger.error("Background community detection failed: %s", str(bg_err))
 
-            # Simplify response — don't send full member_details in list
+                bg_thread = threading.Thread(target=_detect_in_background, daemon=True)
+                bg_thread.start()
+
+                return Response({
+                    "communities": [],
+                    "count": 0,
+                    "document_summary": "",
+                    "loading": True,
+                    "message": "Communities are being generated. Please refresh in 30 seconds."
+                }, status=status.HTTP_200_OK)
+
+            # Build response from cache
             summary_list = []
-            for comm in communities:
+            for comm in cached:
                 summary_list.append({
-                    "id": comm["id"],
-                    "label": comm.get("label", ""),
+                    "id": comm.get("id", 0),
+                    "label": comm.get("label", f"Community {comm.get('id', '?')}"),
                     "summary": comm.get("summary", ""),
-                    "member_count": comm["member_count"],
+                    "member_count": comm.get("member_count", 0),
                     "relationship_count": comm.get("relationship_count", 0),
-                    "members": comm["members"]
+                    "members": comm.get("members", []),
                 })
 
+            # Get document summary from cache (fast — no LLM call)
+            doc_summary = cache.get(f"doc_summary_{user_id}", "")
+
             return Response({
                 "communities": summary_list,
                 "count": len(summary_list),
-                "document_summary": doc_summary
+                "document_summary": doc_summary,
+                "loading": False
             }, status=status.HTTP_200_OK)
+
         except Exception as e:
             logger.error("Error in CommunityListView: %s", str(e), exc_info=True)
             return Response(

frontend/src/components/communities/CommunityView.tsx

@@ -29,28 +29,50 @@ export function CommunityView() {
   const setHighlighted = useGraphStore((s) => s.setHighlighted);
 
   useEffect(() => {
-    setLoading(true);
-    api
-      .get('/graph/communities/')
-      .then(({ data }) => {
-        const c = data.communities || data.results || data;
-        if (Array.isArray(c) && c.length) {
-          setCommunities(
-            c.map((x: any) => ({
-              id: x.id,
-              label: x.label || `Community ${x.id}`,
-              entityCount: x.member_count ?? x.entity_count ?? x.entityCount ?? 0,
-              relationshipCount: x.relationship_count ?? x.relationshipCount ?? 0,
-              summary: x.summary || '',
-              keyEntities: x.members ?? x.key_entities ?? x.keyEntities ?? [],
-            }))
-          );
-          setDocSummary(data.document_summary || data.summary || '');
-        }
-        setFetchError(null);
-      })
-      .catch(() => setFetchError('Failed to load communities. Backend may be unavailable.'))
-      .finally(() => setLoading(false));
+    let pollTimer: ReturnType<typeof setTimeout>;
+
+    function fetchCommunities() {
+      setLoading(true);
+      api
+        .get('/graph/communities/')
+        .then(({ data }) => {
+          const isGenerating = data.loading === true;
+
+          if (isGenerating) {
+            // Backend is generating in background — poll again in 15s
+            setLoading(true);
+            pollTimer = setTimeout(fetchCommunities, 15000);
+            return;
+          }
+
+          const c = data.communities || data.results || data;
+          if (Array.isArray(c) && c.length) {
+            setCommunities(
+              c.map((x: any) => ({
+                id: x.id,
+                label: x.label || `Community ${x.id}`,
+                entityCount: x.member_count ?? x.entity_count ?? x.entityCount ?? 0,
+                relationshipCount: x.relationship_count ?? x.relationshipCount ?? 0,
+                summary: x.summary || '',
+                keyEntities: x.members ?? x.key_entities ?? x.keyEntities ?? [],
+              }))
+            );
+            setDocSummary(data.document_summary || data.summary || '');
+          }
+          setFetchError(null);
+          setLoading(false);
+        })
+        .catch(() => {
+          setFetchError('Failed to load communities. Backend may be unavailable.');
+          setLoading(false);
+        });
+    }
+
+    fetchCommunities();
+
+    return () => {
+      if (pollTimer) clearTimeout(pollTimer);
+    };
   }, []);
 
   function expand(id: number) {
@@ -95,7 +117,11 @@ export function CommunityView() {
 
       <TabsContent value="cards" className="mt-0 flex-1 overflow-y-auto scrollbar-thin">
         {loading ? (
-          <div className="flex items-center justify-center py-12 text-sm text-text-muted">Loading communities...</div>
+          <div className="flex flex-col items-center justify-center gap-3 py-12">
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-accent-violet border-t-transparent" />
+            <p className="text-sm text-text-muted">Generating communities from your knowledge graph…</p>
+            <p className="text-xs text-text-muted">This may take up to 30 seconds. Page will auto-refresh.</p>
+          </div>
         ) : communities.length === 0 ? (
           <div className="flex items-center justify-center py-12 text-sm text-text-muted">No communities found. Upload documents to generate communities.</div>
         ) : (

frontend/src/components/compare/ComparisonView.tsx

@@ -78,19 +78,19 @@ export function ComparisonView() {
             answer: comps.graph?.answer || '',
             confidence: Math.round((comps.graph?.confidence ?? 0) * 100),
             timeMs: Math.round((comps.graph?.response_time ?? 0) * 1000),
-            context: comps.graph?.strategy || 'GRAPH',
+            context: comps.graph?.context || comps.graph?.strategy || 'GRAPH',
           },
           vector: {
             answer: comps.vector?.answer || '',
             confidence: Math.round((comps.vector?.confidence ?? 0) * 100),
             timeMs: Math.round((comps.vector?.response_time ?? 0) * 1000),
-            context: comps.vector?.strategy || 'VECTOR',
+            context: comps.vector?.context || comps.vector?.strategy || 'VECTOR',
           },
           hybrid: {
             answer: comps.hybrid?.answer || '',
             confidence: Math.round((comps.hybrid?.confidence ?? 0) * 100),
             timeMs: Math.round((comps.hybrid?.response_time ?? 0) * 1000),
-            context: comps.hybrid?.strategy || 'HYBRID',
+            context: comps.hybrid?.context || comps.hybrid?.strategy || 'HYBRID',
           },
         },
         verdict: res.verdict || generateVerdict(comps),

frontend/src/components/dashboard/MainQueryView.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useGraphData } from '@/hooks/useGraphData';
 import { useGraphStore } from '@/store/graph';
 import { QueryPanel, QueryMode } from '@/components/query/QueryPanel';
@@ -10,10 +10,11 @@ import { SourceToggle } from '@/components/query/SourceToggle';
 import { QueryHistory } from '@/components/query/QueryHistory';
 import { EntityPanel } from '@/components/entities/EntityPanel';
 import { GraphVisualization } from '@/components/graph/GraphVisualization';
-import { Upload, Sparkles } from 'lucide-react';
+import { Upload, Sparkles, PlusCircle } from 'lucide-react';
 import Link from 'next/link';
 import api from '@/lib/axios';
 import { useDocumentsStore } from '@/store/documents';
+import { useHistoryStore, HistoryItem } from '@/store/history';
 
 interface QueryResult {
   answer: string;
@@ -26,40 +27,83 @@ interface QueryResult {
   context?: string;
 }
 
+// Persist last query session in localStorage
+const LAST_SESSION_KEY = 'graphrag-last-session';
+
+function loadLastSession(): { query: string; mode: QueryMode; result: QueryResult | null } | null {
+  try {
+    const raw = localStorage.getItem(LAST_SESSION_KEY);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+function saveLastSession(query: string, mode: QueryMode, result: QueryResult | null) {
+  try {
+    localStorage.setItem(LAST_SESSION_KEY, JSON.stringify({ query, mode, result }));
+  } catch {}
+}
+
+function clearLastSession() {
+  try {
+    localStorage.removeItem(LAST_SESSION_KEY);
+  } catch {}
+}
+
 export function MainQueryView() {
   useGraphData();
   const setHighlighted = useGraphStore((s) => s.setHighlighted);
   const selectEntity = useGraphStore((s) => s.selectEntity);
   const data = useGraphStore((s) => s.data);
-
   const selectedIds = useDocumentsStore((s) => s.selectedDocumentIds);
+  const addHistoryItem = useHistoryStore((s) => s.addItem);
 
+  // Restore last session state from localStorage
   const [query, setQuery] = useState('');
   const [mode, setMode] = useState<QueryMode>('hybrid');
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState<QueryResult | null>(null);
 
+  useEffect(() => {
+    const session = loadLastSession();
+    if (session) {
+      setQuery(session.query);
+      setMode(session.mode);
+      setResult(session.result);
+      if (session.result?.entities) {
+        setHighlighted(session.result.entities, session.result.paths || []);
+      }
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Persist session whenever result changes
+  useEffect(() => {
+    if (query || result) {
+      saveLastSession(query, mode, result);
+    }
+  }, [query, mode, result]);
+
   // Listen for right-click "Ask about entity" events from graph
   useEffect(() => {
     function handleAskEntity(e: Event) {
       const name = (e as CustomEvent).detail;
-      if (name) {
-        setQuery(name);
-      }
+      if (name) setQuery(name);
     }
     window.addEventListener('graphrag:ask-entity', handleAskEntity);
     return () => window.removeEventListener('graphrag:ask-entity', handleAskEntity);
   }, []);
 
-  async function runQuery() {
-    if (!query.trim()) return;
+  const runQuery = useCallback(async (overrideQuery?: string) => {
+    const q = overrideQuery ?? query;
+    if (!q.trim()) return;
     setLoading(true);
     setResult(null);
     try {
       const { data: res } = await api.post('/query/', {
-        query,
+        query: q,
         mode,
-        document_ids: selectedIds.length > 0 ? selectedIds : undefined
+        document_ids: selectedIds.length > 0 ? selectedIds : undefined,
       });
       const mapped: QueryResult = {
         answer: res.answer,
@@ -73,35 +117,83 @@ export function MainQueryView() {
       };
       setResult(mapped);
       setHighlighted(mapped.entities || [], mapped.paths || []);
-    } catch (err: any) {
-      const errorMsg = err.response?.data?.error || 'Failed to process query. Please check your API keys and Neo4j connection.';
-      setResult({
-        answer: `**Error:** ${errorMsg}`,
-        method: mode,
+
+      // Add to local history store immediately
+      addHistoryItem({
+        id: Date.now().toString(),
+        query_text: q,
+        retrieval_mode: (res.strategy || mode).toUpperCase(),
+        answer_text: res.answer || '',
+        response_time: res.response_time ?? 0,
+        created_at: new Date().toISOString(),
       });
+    } catch (err: any) {
+      const backendError = err.response?.data?.error;
+      let errorMsg = backendError || 'Failed to process query. Please check your API keys and Neo4j connection.';
+
+      // Friendly message for 401 (session expired)
+      if (err.response?.status === 401) {
+        errorMsg = 'Your session has expired. Please log in again.';
+      }
+      setResult({ answer: `**Error:** ${errorMsg}`, method: mode });
     } finally {
       setLoading(false);
     }
-  }
+  }, [query, mode, selectedIds, setHighlighted, addHistoryItem]);
+
+  // New Chat — clear everything
+  const handleNewChat = useCallback(() => {
+    setQuery('');
+    setResult(null);
+    setHighlighted([], []);
+    selectEntity(null);
+    clearLastSession();
+  }, [setHighlighted, selectEntity]);
+
+  // History item selected — restore query + answer
+  const handleHistorySelect = useCallback((queryText: string, item?: HistoryItem) => {
+    setQuery(queryText);
+    if (item?.answer_text) {
+      const modeFromItem = (item.retrieval_mode || 'hybrid').toLowerCase() as QueryMode;
+      setMode(modeFromItem);
+      setResult({
+        answer: item.answer_text,
+        method: item.retrieval_mode,
+        confidence: undefined,
+      });
+    }
+  }, []);
 
   function askEntity(name: string) {
     setQuery(name);
     selectEntity(null);
-    setTimeout(runQuery, 50);
+    setTimeout(() => runQuery(name), 50);
   }
 
   const empty = data.nodes.length === 0;
 
   return (
     <div className="flex h-full flex-col lg:flex-row">
+      {/* Left Panel: Query + Answer */}
       <div className="flex w-full flex-col border-b border-border lg:w-2/5 lg:border-b-0 lg:border-r">
+        {/* New Chat button */}
+        <div className="flex items-center justify-end border-b border-border px-4 py-2">
+          <button
+            onClick={handleNewChat}
+            className="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium text-text-muted hover:bg-bg-surface hover:text-text-primary transition-colors"
+          >
+            <PlusCircle className="h-3.5 w-3.5" />
+            New Chat
+          </button>
+        </div>
+
         <div className="flex-1 space-y-4 overflow-y-auto p-4 scrollbar-thin">
           <QueryPanel
             value={query}
             onChange={setQuery}
             mode={mode}
             onModeChange={setMode}
-            onSubmit={runQuery}
+            onSubmit={() => runQuery()}
             loading={loading}
           />
 
@@ -137,7 +229,7 @@ export function MainQueryView() {
           )}
         </div>
 
-        {!empty && <QueryHistory onSelect={setQuery} />}
+        {!empty && <QueryHistory onSelect={handleHistorySelect} />}
 
         {result && (
           <SourceToggle
@@ -149,6 +241,7 @@ export function MainQueryView() {
         )}
       </div>
 
+      {/* Right Panel: Graph */}
       <div className="relative w-full flex-1">
         {data.nodes.length > 0 ? (
           <GraphVisualization />

frontend/src/components/query/QueryHistory.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { History, RotateCcw, ChevronDown, ChevronUp } from 'lucide-react';
+import { History, RotateCcw, ChevronDown, ChevronUp, Clock } from 'lucide-react';
 import { useHistoryStore, HistoryItem } from '@/store/history';
 import api from '@/lib/axios';
+import { cn } from '@/lib/utils';
 
 interface QueryHistoryProps {
-  onSelect: (query: string) => void;
+  onSelect: (query: string, item?: HistoryItem) => void;
 }
 
 export function QueryHistory({ onSelect }: QueryHistoryProps) {
@@ -14,29 +15,31 @@ export function QueryHistory({ onSelect }: QueryHistoryProps) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
 
+  // Sync fresh history from backend on mount (but items from localStorage are already shown)
   useEffect(() => {
-    if (loaded) return;
     setLoading(true);
     api
       .get('/query/history/')
       .then(({ data }) => {
         const list = data.results || data || [];
         if (Array.isArray(list)) {
-          setItems(list.map((item: any) => ({
-            id: item.id,
-            query_text: item.query_text,
-            retrieval_mode: item.retrieval_mode,
-            answer_text: item.answer_text,
-            response_time: item.response_time,
-            created_at: item.created_at,
-          })));
+          setItems(
+            list.map((item: any) => ({
+              id: item.id,
+              query_text: item.query_text,
+              retrieval_mode: item.retrieval_mode,
+              answer_text: item.answer_text,
+              response_time: item.response_time,
+              created_at: item.created_at,
+            }))
+          );
         }
       })
       .catch(() => {})
       .finally(() => setLoading(false));
-  }, [loaded, setItems]);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  if (!loaded && !loading) return null;
+  if (items.length === 0 && !loading) return null;
 
   return (
     <div className="border-t border-border">
@@ -46,25 +49,41 @@ export function QueryHistory({ onSelect }: QueryHistoryProps) {
       >
         <History className="h-3.5 w-3.5" />
         Recent Queries ({items.length})
-        {open ? <ChevronDown className="ml-auto h-3.5 w-3.5" /> : <ChevronUp className="ml-auto h-3.5 w-3.5" />}
+        {open ? (
+          <ChevronUp className="ml-auto h-3.5 w-3.5" />
+        ) : (
+          <ChevronDown className="ml-auto h-3.5 w-3.5" />
+        )}
       </button>
+
       {open && (
-        <div className="max-h-48 overflow-y-auto border-t border-border scrollbar-thin">
+        <div className="max-h-56 overflow-y-auto border-t border-border scrollbar-thin">
           {items.length === 0 ? (
             <p className="px-4 py-3 text-xs text-text-muted">No queries yet.</p>
           ) : (
             items.map((item) => (
               <button
                 key={item.id}
-                onClick={() => { onSelect(item.query_text); setOpen(false); }}
-                className="flex w-full items-start gap-2 px-4 py-2 text-left hover:bg-bg-surface transition-colors"
+                onClick={() => { onSelect(item.query_text, item); setOpen(false); }}
+                className="flex w-full items-start gap-2 px-4 py-2.5 text-left hover:bg-bg-surface transition-colors group"
               >
-                <RotateCcw className="mt-0.5 h-3 w-3 shrink-0 text-text-muted" />
+                <RotateCcw className="mt-0.5 h-3 w-3 shrink-0 text-text-muted group-hover:text-accent-violet transition-colors" />
                 <div className="min-w-0 flex-1">
                   <p className="truncate text-xs font-medium text-text-primary">{item.query_text}</p>
-                  <p className="text-[10px] text-text-muted">
-                    {item.retrieval_mode} · {(item.response_time * 1000).toFixed(0)}ms
-                  </p>
+                  <div className="mt-0.5 flex items-center gap-2">
+                    <span className={cn(
+                      'rounded px-1 py-px text-[9px] font-semibold uppercase',
+                      item.retrieval_mode === 'HYBRID' ? 'bg-accent-violet/20 text-accent-violet' :
+                      item.retrieval_mode === 'GRAPH' ? 'bg-accent-cyan/20 text-accent-cyan' :
+                      'bg-emerald-500/20 text-emerald-400'
+                    )}>
+                      {item.retrieval_mode}
+                    </span>
+                    <span className="flex items-center gap-1 text-[10px] text-text-muted">
+                      <Clock className="h-2.5 w-2.5" />
+                      {(item.response_time * 1000).toFixed(0)}ms
+                    </span>
+                  </div>
                 </div>
               </button>
             ))

frontend/src/store/history.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 export interface HistoryItem {
   id: string;
@@ -15,13 +16,22 @@ interface HistoryState {
   setItems: (items: HistoryItem[]) => void;
   addItem: (item: HistoryItem) => void;
   clear: () => void;
+  resetLoaded: () => void;
 }
 
-export const useHistoryStore = create<HistoryState>((set) => ({
-  items: [],
-  loaded: false,
-  setItems: (items) => set({ items, loaded: true }),
-  addItem: (item) =>
-    set((state) => ({ items: [item, ...state.items].slice(0, 50) })),
-  clear: () => set({ items: [], loaded: false }),
-}));
+export const useHistoryStore = create<HistoryState>()(
+  persist(
+    (set) => ({
+      items: [],
+      loaded: false,
+      setItems: (items) => set({ items, loaded: true }),
+      addItem: (item) =>
+        set((state) => ({ items: [item, ...state.items].slice(0, 50), loaded: true })),
+      clear: () => set({ items: [], loaded: false }),
+      resetLoaded: () => set({ loaded: false }),
+    }),
+    {
+      name: 'graphrag-query-history',
+    }
+  )
+);