3

frontend/src/layout/AppHeader.tsx

@@ -7,6 +7,25 @@ import NotificationDropdown from "../components/header/NotificationDropdown";
 import UserDropdown from "../components/header/UserDropdown";
 import { HeaderMetrics } from "../components/header/HeaderMetrics";
 import ResourceDebugToggle from "../components/debug/ResourceDebugToggle";
+import { useOnboardingStore } from "../store/onboardingStore";
+import Button from "../components/ui/button/Button";
+import { BoltIcon } from "../icons";
+
+const ShowGuideButton: React.FC = () => {
+  const { toggleGuide, isGuideVisible } = useOnboardingStore();
+  
+  return (
+    <Button
+      variant="primary"
+      size="sm"
+      onClick={toggleGuide}
+      className="bg-orange-500 hover:bg-orange-600 text-white border-orange-500 hover:border-orange-600"
+    >
+      <BoltIcon className="w-4 h-4 mr-2" />
+      {isGuideVisible ? 'Hide Guide' : 'Show Guide'}
+    </Button>
+  );
+};
 
 const AppHeader: React.FC = () => {
   const [isApplicationMenuOpen, setApplicationMenuOpen] = useState(false);
@@ -161,6 +180,8 @@ const AppHeader: React.FC = () => {
           <div className="flex items-center gap-2 2xsm:gap-3">
             {/* <!-- Header Metrics (conditional) --> */}
             <HeaderMetrics />
+            {/* <!-- Show Guide Button (Orange) --> */}
+            <ShowGuideButton />
             {/* <!-- Dark Mode Toggler --> */}
             <ThemeToggleButton />
             {/* <!-- Resource Debug Toggle (Admin only) --> */}