From 46f02ab7c601582a68f5f52d95993f67c303ba21 Mon Sep 17 00:00:00 2001
From: Lum1104 <linyux1104@163.com>
Date: Sat, 14 Mar 2026 20:33:15 +0800
Subject: [PATCH] fix(dashboard): extract tour sort helper and use proper store
 selectors

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/dashboard/src/App.tsx                  |  6 ++++--
 .../dashboard/src/components/LearnPanel.tsx     |  8 +++++---
 packages/dashboard/src/store.ts                 | 17 ++++++++++++-----
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/dashboard/src/App.tsx b/packages/dashboard/src/App.tsx
index c633bb1..75fdbb1 100644
--- a/packages/dashboard/src/App.tsx
+++ b/packages/dashboard/src/App.tsx
@@ -13,6 +13,8 @@ function App() {
   const graph = useDashboardStore((s) => s.graph);
   const setGraph = useDashboardStore((s) => s.setGraph);
   const tourActive = useDashboardStore((s) => s.tourActive);
+  const startTour = useDashboardStore((s) => s.startTour);
+  const stopTour = useDashboardStore((s) => s.stopTour);
 
   useEffect(() => {
     fetch("/knowledge-graph.json")
@@ -75,7 +77,7 @@ function App() {
               <div className="flex bg-gray-800 rounded-t-lg border-b border-gray-700 shrink-0">
                 <button
                   onClick={() => {
-                    if (tourActive) useDashboardStore.getState().stopTour();
+                    if (tourActive) stopTour();
                   }}
                   className={`flex-1 text-xs font-medium py-1.5 px-3 transition-colors ${
                     !tourActive
@@ -87,7 +89,7 @@ function App() {
                 </button>
                 <button
                   onClick={() => {
-                    if (!tourActive) useDashboardStore.getState().startTour();
+                    if (!tourActive) startTour();
                   }}
                   className={`flex-1 text-xs font-medium py-1.5 px-3 transition-colors ${
                     tourActive
diff --git a/packages/dashboard/src/components/LearnPanel.tsx b/packages/dashboard/src/components/LearnPanel.tsx
index c1641bb..94ad20b 100644
--- a/packages/dashboard/src/components/LearnPanel.tsx
+++ b/packages/dashboard/src/components/LearnPanel.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import ReactMarkdown from "react-markdown";
 import { useDashboardStore } from "../store";
 
@@ -12,9 +13,10 @@ export default function LearnPanel() {
   const prevTourStep = useDashboardStore((s) => s.prevTourStep);
   const selectNode = useDashboardStore((s) => s.selectNode);
 
-  const tourSteps = graph?.tour
-    ? [...graph.tour].sort((a, b) => a.order - b.order)
-    : [];
+  const tourSteps = useMemo(
+    () => graph?.tour ? [...graph.tour].sort((a, b) => a.order - b.order) : [],
+    [graph?.tour]
+  );
   const hasTour = tourSteps.length > 0;
 
   // State 1: No tour available
diff --git a/packages/dashboard/src/store.ts b/packages/dashboard/src/store.ts
index c208f8f..af31e9e 100644
--- a/packages/dashboard/src/store.ts
+++ b/packages/dashboard/src/store.ts
@@ -2,7 +2,10 @@ import Anthropic from "@anthropic-ai/sdk";
 import { create } from "zustand";
 import { SearchEngine } from "@understand-anything/core/search";
 import type { SearchResult } from "@understand-anything/core/search";
-import type { KnowledgeGraph } from "@understand-anything/core/types";
+import type {
+  KnowledgeGraph,
+  TourStep,
+} from "@understand-anything/core/types";
 
 export interface ChatMessage {
   role: "user" | "assistant";
@@ -112,6 +115,10 @@ function buildSystemPrompt(
   return parts.join("\n");
 }
 
+function getSortedTour(graph: KnowledgeGraph): TourStep[] {
+  return [...graph.tour].sort((a, b) => a.order - b.order);
+}
+
 export const useDashboardStore = create<DashboardStore>()((set, get) => ({
   graph: null,
   selectedNodeId: null,
@@ -212,7 +219,7 @@ export const useDashboardStore = create<DashboardStore>()((set, get) => ({
   startTour: () => {
     const { graph } = get();
     if (!graph || graph.tour.length === 0) return;
-    const sorted = [...graph.tour].sort((a, b) => a.order - b.order);
+    const sorted = getSortedTour(graph);
     set({
       tourActive: true,
       currentTourStep: 0,
@@ -231,7 +238,7 @@ export const useDashboardStore = create<DashboardStore>()((set, get) => ({
   setTourStep: (step) => {
     const { graph } = get();
     if (!graph || graph.tour.length === 0) return;
-    const sorted = [...graph.tour].sort((a, b) => a.order - b.order);
+    const sorted = getSortedTour(graph);
     if (step < 0 || step >= sorted.length) return;
     set({
       currentTourStep: step,
@@ -242,7 +249,7 @@ export const useDashboardStore = create<DashboardStore>()((set, get) => ({
   nextTourStep: () => {
     const { graph, currentTourStep } = get();
     if (!graph || graph.tour.length === 0) return;
-    const sorted = [...graph.tour].sort((a, b) => a.order - b.order);
+    const sorted = getSortedTour(graph);
     if (currentTourStep < sorted.length - 1) {
       const next = currentTourStep + 1;
       set({
@@ -256,7 +263,7 @@ export const useDashboardStore = create<DashboardStore>()((set, get) => ({
     const { graph, currentTourStep } = get();
     if (!graph || graph.tour.length === 0) return;
     if (currentTourStep > 0) {
-      const sorted = [...graph.tour].sort((a, b) => a.order - b.order);
+      const sorted = getSortedTour(graph);
       const prev = currentTourStep - 1;
       set({
         currentTourStep: prev,