diff --git a/CHANGELOG.md b/CHANGELOG.md index 78453f3..580d6ed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,113 +1,103 @@ -# [1.4.0-develop.8](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.7...v1.4.0-develop.8) (2026-03-08) +# [1.4.0-develop.9](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.8...v1.4.0-develop.9) (2026-04-14) + +### Features +- add class-validator dependency and update page styles ([#81](https://github.com/betterbugs/dev-tools/issues/81)) ([67f1aeb](https://github.com/betterbugs/dev-tools/commit/67f1aeb5a82cad25f2c8bb3dcdc67e453b62cee2)) + +# [1.4.0-develop.8](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.7...v1.4.0-develop.8) (2026-03-08) ### Features -* Added URL parser & Query Editor Tool ([c9933ba](https://github.com/betterbugs/dev-tools/commit/c9933bae3cfbeb65c210f6877abf367c3cb0f46e)), closes [#51](https://github.com/betterbugs/dev-tools/issues/51) +- Added URL parser & Query Editor Tool ([c9933ba](https://github.com/betterbugs/dev-tools/commit/c9933bae3cfbeb65c210f6877abf367c3cb0f46e)), closes [#51](https://github.com/betterbugs/dev-tools/issues/51) # [1.4.0-develop.7](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.6...v1.4.0-develop.7) (2026-03-08) - ### Features -* **tools:** add Unix Timestamp Converter to development tools list ([3fedf57](https://github.com/betterbugs/dev-tools/commit/3fedf57f4036f7081b37c8ca1b3c585ea1e62045)) +- **tools:** add Unix Timestamp Converter to development tools list ([3fedf57](https://github.com/betterbugs/dev-tools/commit/3fedf57f4036f7081b37c8ca1b3c585ea1e62045)) # [1.4.0-develop.6](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.5...v1.4.0-develop.6) (2026-03-08) - ### Features -* Add Unix Timestamp (Epoch) Converter Utility ([f277272](https://github.com/betterbugs/dev-tools/commit/f27727267639f54e4ffaa80919b1d0836621ac7d)), closes [#16](https://github.com/betterbugs/dev-tools/issues/16) +- Add Unix Timestamp (Epoch) Converter Utility ([f277272](https://github.com/betterbugs/dev-tools/commit/f27727267639f54e4ffaa80919b1d0836621ac7d)), closes [#16](https://github.com/betterbugs/dev-tools/issues/16) # [1.4.0-develop.5](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.4...v1.4.0-develop.5) (2026-03-05) - ### Bug Fixes -* **release:** update GITHUB_TOKEN to use RELEASE_TOKEN for semantic release ([be3a012](https://github.com/betterbugs/dev-tools/commit/be3a012c6d7df84ab5826ce03268ec8aad402c15)) - +- **release:** update GITHUB_TOKEN to use RELEASE_TOKEN for semantic release ([be3a012](https://github.com/betterbugs/dev-tools/commit/be3a012c6d7df84ab5826ce03268ec8aad402c15)) ### Features -* **tools:** add SVG to React/CSS utility ([218ccad](https://github.com/betterbugs/dev-tools/commit/218ccad3c5eb7121a9bd7319147520eb39713695)), closes [#50](https://github.com/betterbugs/dev-tools/issues/50) +- **tools:** add SVG to React/CSS utility ([218ccad](https://github.com/betterbugs/dev-tools/commit/218ccad3c5eb7121a9bd7319147520eb39713695)), closes [#50](https://github.com/betterbugs/dev-tools/issues/50) # [1.4.0-develop.4](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.3...v1.4.0-develop.4) (2026-03-03) - ### Features -* Add lockfile guard workflow to prevent unintended lockfile changes ([aa20fb5](https://github.com/betterbugs/dev-tools/commit/aa20fb5422aae56e9d80f7472a6f974624431572)) +- Add lockfile guard workflow to prevent unintended lockfile changes ([aa20fb5](https://github.com/betterbugs/dev-tools/commit/aa20fb5422aae56e9d80f7472a6f974624431572)) # [1.4.0-develop.3](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.2...v1.4.0-develop.3) (2026-03-03) - ### Features -* Add IPv4 Subnet Calculator Tool ([ad1c03f](https://github.com/betterbugs/dev-tools/commit/ad1c03fd0065f0cfce409b72882188dc7de630d0)), closes [#33](https://github.com/betterbugs/dev-tools/issues/33) -* Add Smart Repair feature to JSON Validator ([#41](https://github.com/betterbugs/dev-tools/issues/41)) ([7a3c7a5](https://github.com/betterbugs/dev-tools/commit/7a3c7a5008d4236d954e1c20482635b0a0da5ef0)), closes [#38](https://github.com/betterbugs/dev-tools/issues/38) +- Add IPv4 Subnet Calculator Tool ([ad1c03f](https://github.com/betterbugs/dev-tools/commit/ad1c03fd0065f0cfce409b72882188dc7de630d0)), closes [#33](https://github.com/betterbugs/dev-tools/issues/33) +- Add Smart Repair feature to JSON Validator ([#41](https://github.com/betterbugs/dev-tools/issues/41)) ([7a3c7a5](https://github.com/betterbugs/dev-tools/commit/7a3c7a5008d4236d954e1c20482635b0a0da5ef0)), closes [#38](https://github.com/betterbugs/dev-tools/issues/38) # [1.4.0-develop.2](https://github.com/betterbugs/dev-tools/compare/v1.4.0-develop.1...v1.4.0-develop.2) (2026-02-28) - ### Bug Fixes -* **tools:** implement proper bcrypt generator ([94d19be](https://github.com/betterbugs/dev-tools/commit/94d19be7e4b8d9256557e7668898ec4d6c3ca15c)), closes [#23](https://github.com/betterbugs/dev-tools/issues/23) [#13](https://github.com/betterbugs/dev-tools/issues/13) +- **tools:** implement proper bcrypt generator ([94d19be](https://github.com/betterbugs/dev-tools/commit/94d19be7e4b8d9256557e7668898ec4d6c3ca15c)), closes [#23](https://github.com/betterbugs/dev-tools/issues/23) [#13](https://github.com/betterbugs/dev-tools/issues/13) # [1.4.0-develop.1](https://github.com/betterbugs/dev-tools/compare/v1.3.2...v1.4.0-develop.1) (2026-02-28) - ### Features -* **ui:** add reusable CopyButton and refactor wordCounter and jsonToTxt ([d5b9e83](https://github.com/betterbugs/dev-tools/commit/d5b9e8333673c5254cf39529a90869b1b741e385)), closes [#17](https://github.com/betterbugs/dev-tools/issues/17) +- **ui:** add reusable CopyButton and refactor wordCounter and jsonToTxt ([d5b9e83](https://github.com/betterbugs/dev-tools/commit/d5b9e8333673c5254cf39529a90869b1b741e385)), closes [#17](https://github.com/betterbugs/dev-tools/issues/17) ## [1.3.2](https://github.com/betterbugs/dev-tools/compare/v1.3.1...v1.3.2) (2026-02-16) - ### Bug Fixes -* update basePath and assetPrefix to use conditional logic for production ([b487fef](https://github.com/betterbugs/dev-tools/commit/b487fefbc8de696953ef4ba5cb1c3e55eda7fe7a)) +- update basePath and assetPrefix to use conditional logic for production ([b487fef](https://github.com/betterbugs/dev-tools/commit/b487fefbc8de696953ef4ba5cb1c3e55eda7fe7a)) ## [1.3.2-develop.1](https://github.com/betterbugs/dev-tools/compare/v1.3.1...v1.3.2-develop.1) (2026-02-16) - ### Bug Fixes -* update basePath and assetPrefix to use conditional logic for production ([b487fef](https://github.com/betterbugs/dev-tools/commit/b487fefbc8de696953ef4ba5cb1c3e55eda7fe7a)) +- update basePath and assetPrefix to use conditional logic for production ([b487fef](https://github.com/betterbugs/dev-tools/commit/b487fefbc8de696953ef4ba5cb1c3e55eda7fe7a)) ## [1.3.1](https://github.com/betterbugs/dev-tools/compare/v1.3.0...v1.3.1) (2026-02-10) - ### Bug Fixes -* correct spelling and update descriptions for color conversion tools ([70f373c](https://github.com/betterbugs/dev-tools/commit/70f373ca663401bfb176b13160c88b3326307acf)) +- correct spelling and update descriptions for color conversion tools ([70f373c](https://github.com/betterbugs/dev-tools/commit/70f373ca663401bfb176b13160c88b3326307acf)) # [1.3.0](https://github.com/betterbugs/dev-tools/compare/v1.2.0...v1.3.0) (2026-02-09) - ### Features -* add development tools API and enhance header components ([8aaad6a](https://github.com/betterbugs/dev-tools/commit/8aaad6a6e901d578924a8964addf697462a258f7)) +- add development tools API and enhance header components ([8aaad6a](https://github.com/betterbugs/dev-tools/commit/8aaad6a6e901d578924a8964addf697462a258f7)) # [1.2.0](https://github.com/betterbugs/dev-tools/compare/v1.1.0...v1.2.0) (2026-02-07) - ### Features -* enhance Discord notifications with author details and profile links ([098aaeb](https://github.com/betterbugs/dev-tools/commit/098aaeb9c576398260432f0c2c3175236248eb95)) +- enhance Discord notifications with author details and profile links ([098aaeb](https://github.com/betterbugs/dev-tools/commit/098aaeb9c576398260432f0c2c3175236248eb95)) # [1.1.0](https://github.com/betterbugs/dev-tools/compare/v1.0.0...v1.1.0) (2026-02-07) - ### Features -* add Discord notifications workflow for various GitHub events ([66ad9ba](https://github.com/betterbugs/dev-tools/commit/66ad9ba91f21e59678ecbd2a4cc58c7737d492d9)) +- add Discord notifications workflow for various GitHub events ([66ad9ba](https://github.com/betterbugs/dev-tools/commit/66ad9ba91f21e59678ecbd2a4cc58c7737d492d9)) # 1.0.0 (2026-02-07) - ### Bug Fixes -* **ci:** update Node.js to 20 for semantic-release compatibility ([34092b6](https://github.com/betterbugs/dev-tools/commit/34092b673e15c212520ba439889ef11078b62dc7)) +- **ci:** update Node.js to 20 for semantic-release compatibility ([34092b6](https://github.com/betterbugs/dev-tools/commit/34092b673e15c212520ba439889ef11078b62dc7)) # Changelog diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx index b77333d..3dd074d 100644 --- a/app/[slug]/page.tsx +++ b/app/[slug]/page.tsx @@ -1,32 +1,34 @@ -"use client"; -import React, { useEffect, useState } from "react"; -import { DEVELOPMENTTOOLS } from "@/app/libs/developmentToolsConstant"; -import Link from "next/link"; -import { Button } from "antd"; -import Image from "next/image"; -import StarGardientIcon from "@/app/components/theme/Icon/starGradientIcon"; +'use client'; +import React, { useEffect, useState } from 'react'; +import { DEVELOPMENTTOOLS } from '@/app/libs/developmentToolsConstant'; +import Link from 'next/link'; +import { Button } from 'antd'; +import Image from 'next/image'; +import StarGardientIcon from '@/app/components/theme/Icon/starGradientIcon'; import { developmentToolsRoutes, Extension_URL, integrationTools, -} from "@/app/libs/constants"; -import PlayIcon from "@/app/components/theme/Icon/playIcon"; -import LogsGradientIcon from "@/app/components/theme/Icon/logsGradientIcon"; -import ShareGradientIcon from "@/app/components/theme/Icon/shareGradientIcon"; -import PowerCircleIcon from "@/app/components/theme/Icon/powerCircleIcon"; -import ComparisonsStyles from "../components/comparisonsComponent/comparisonsStyles.module.scss"; -import DevelopmentToolsStyles from "../developmentToolsStyles.module.scss"; -import { usePathname } from "next/navigation"; -import RecorderGradientIcon from "@/app/components/theme/Icon/recorderGradientIcon"; -import SEOComponent from "@/app/components/theme/SEOComponent/SEOComponent"; -import { detectBrowser } from "@/app/libs/helpers"; -import EdgeIcon from "@/app/components/theme/Icon/edgeIcon"; -import { useTheme } from "@/app/contexts/themeContext"; +} from '@/app/libs/constants'; +import PlayIcon from '@/app/components/theme/Icon/playIcon'; +import LogsGradientIcon from '@/app/components/theme/Icon/logsGradientIcon'; +import ShareGradientIcon from '@/app/components/theme/Icon/shareGradientIcon'; +import PowerCircleIcon from '@/app/components/theme/Icon/powerCircleIcon'; +import ComparisonsStyles from '../components/comparisonsComponent/comparisonsStyles.module.scss'; +import DevelopmentToolsStyles from '../developmentToolsStyles.module.scss'; +import { usePathname } from 'next/navigation'; +import RecorderGradientIcon from '@/app/components/theme/Icon/recorderGradientIcon'; +import SEOComponent from '@/app/components/theme/SEOComponent/SEOComponent'; +import { detectBrowser } from '@/app/libs/helpers'; +import EdgeIcon from '@/app/components/theme/Icon/edgeIcon'; +import { useTheme } from '@/app/contexts/themeContext'; const Page = ({ params: { slug } }: { params: { slug: string } }) => { - const [browser, setBrowser] = useState("chrome"); + const [browser, setBrowser] = useState('chrome'); const { isLightTheme } = useTheme(); - const logoSrc = isLightTheme ? "/images/bb-logo-light.svg" : "/images/bb-logo.svg"; + const logoSrc = isLightTheme + ? '/images/bb-logo-light.svg' + : '/images/bb-logo.svg'; useEffect(() => { setBrowser(detectBrowser()); @@ -59,11 +61,15 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { ogDescription={meta_data?.og_description} ogImage={meta_data?.og_image} /> -
+
{/*Hero cta section */}
-
+
{/* Left Section */}
@@ -76,7 +82,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { />

- The essential AI{" "} + The essential AI{' '} companion every QA needs

@@ -92,7 +98,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
-
+
{/* Heading section */} {hero_section && (
@@ -184,7 +192,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {

{hero_section?.description - ?.split("BetterBugs.io") + ?.split('BetterBugs.io') .map((part: any, index: any, arr: any) => ( {part} @@ -216,7 +224,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {

-

+

Other Tools

@@ -288,14 +296,14 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { (exampleItem: any, exampleIndex: number) => { const isExampleHeading = exampleItem?.example_input?.startsWith( - "Example" + 'Example' ); const isInputOrOutput = - exampleItem?.example_input === "Input" || - exampleItem?.example_input === "Output"; + exampleItem?.example_input === 'Input' || + exampleItem?.example_input === 'Output'; const isStringOutput = typeof exampleItem?.example_output === - "string"; + 'string'; const isArrayOutput = Array.isArray( exampleItem?.example_output ); @@ -303,7 +311,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { return (
0 ? "mt-3" : ""} + className={exampleIndex > 0 ? 'mt-3' : ''} > {isExampleHeading && ( <> @@ -350,8 +358,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { } // Handle regular description text - const descriptions = desc?.description || ""; - const splitDescriptions = descriptions.split(/(".*?")/); // Split quoted and unquoted text + const descriptions = desc?.description || ''; + const splitDescriptions = + descriptions.split(/((['"]).*?\2)/); // Split quoted and unquoted text return (

{ {splitDescriptions.map( (text: any, subIndex: any) => { const isQuoted = - text.startsWith("") && text.endsWith(""); + typeof text === 'string' && + /^(['"]).*\1$/.test(text); const containsBetterBugs = - text.includes("BetterBugs.io"); + text.includes('BetterBugs.io'); if (containsBetterBugs) { // Split the text around 'BetterBugs.io' to wrap it in a link - const parts = text.split("BetterBugs.io"); + const parts = text.split('BetterBugs.io'); return ( - {parts[0]} + + {parts[0]} + { > BetterBugs.io - {parts[1]} + + {parts[1]} + ); } @@ -388,7 +414,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { return ( {text} @@ -429,13 +457,15 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {

)} {development_tools_user_agent_info?.example_string && ( -

+

{development_tools_user_agent_info?.example_string}

)} {development_tools_user_agent_info?.example_string_description && ( -

- {development_tools_user_agent_info?.example_string_description} +

+ { + development_tools_user_agent_info?.example_string_description + }

)} {development_tools_user_agent_info?.info_items && ( @@ -448,7 +478,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { className="text-base" > - {item?.part}{" "} + {item?.part}{' '} {item?.description} @@ -473,7 +503,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { {development_tools_steps_guide?.guide_description ?.split(/(".*?")/g) ?.map((parts: any, i: any) => - parts?.startsWith("") && parts?.endsWith("") ? ( + parts?.startsWith('') && parts?.endsWith('') ? ( {parts} @@ -500,10 +530,11 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { {/* Primary Flex Layout for Step Key, Title, and Description */}
{guide?.step_key} @@ -525,9 +556,12 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => { {p?.steps_points_description ?.split(/(".*?")/) .map( - (part: string, i: number) => - part.startsWith("") && - part.endsWith("") ? ( + ( + part: string, + i: number + ) => + part.startsWith('') && + part.endsWith('') ? ( { j: number ) => sub.startsWith( - "//" + '//' ) && - sub.endsWith( - "//" - ) ? ( + sub.endsWith( + '//' + ) ? ( { i: number ) => part.startsWith( - "" + '' ) && - part.endsWith( - "" - ) ? ( + part.endsWith( + '' + ) ? ( { j: number ) => sub.startsWith( - "//" + '//' ) && - sub.endsWith( - "//" - ) ? ( + sub.endsWith( + '//' + ) ? ( { )} {parts?.map((part: any, i: any) => - part.startsWith("") && - part.endsWith("") ? ( + part.startsWith('') && + part.endsWith('') ? ( <> { {description2 && desParts?.length > 0 && (
{desParts?.map((part: any, i: any) => - part.startsWith("") && - part.endsWith("") ? ( + part.startsWith('') && + part.endsWith('') ? ( { {development_tool_example?.example_input?.title}

)} - {development_tool_example?.example_input?.json_data && ( - 
+                          {development_tool_example?.example_input
+                            ?.json_data && (
+                            
                               
-                                {development_tool_example?.example_input?.json_data}
+                                {
+                                  development_tool_example?.example_input
+                                    ?.json_data
+                                }
                               
                             

                           )}
@@ -735,7 +775,10 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                           )}
                           {development_tool_example?.example_outputs?.outputs?.map(
                             (output: any, index: number) => (
-                              

+                              

                                 {output?.mode && (
                                   

                                     {output?.mode}
@@ -747,7 +790,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                                   

                                 )}
                                 {output?.content && (
-                                  
+                                  
                                     
                                       {output?.content}
                                     
@@ -767,74 +812,88 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                       {/* JavaScript example section (optional) */}
                       {development_tool_example?.javascript_example && (
                         

-                          {development_tool_example?.javascript_example?.title && (
+                          {development_tool_example?.javascript_example
+                            ?.title && (
                             

-                              {development_tool_example?.javascript_example?.title}
+                              {
+                                development_tool_example?.javascript_example
+                                  ?.title
+                              }
                             

                           )}
-                          {development_tool_example?.javascript_example?.description && (
+                          {development_tool_example?.javascript_example
+                            ?.description && (
                             

-                              {development_tool_example?.javascript_example?.description}
+                              {
+                                development_tool_example?.javascript_example
+                                  ?.description
+                              }
                             

                           )}
 
-                          {development_tool_example?.javascript_example?.methods?.length >
-                            0 && (
-                              

-                                
    
-                                  {development_tool_example?.javascript_example?.methods?.map(
-                                    (method: any, index: number) => (
-                                      
  • 
-                                        {method?.name && (
-                                          
-                                            {method?.name}{" "}
-                                          
-                                        )}
-                                        {method?.description && (
-                                          
-                                            {method?.description}
-                                          
-                                        )}
-                                      
    • 
-                                    )
-                                  )}
-                                

-                              

-                            )}
-
-                          {development_tool_example?.javascript_example?.examples?.length >
-                            0 && (
-                              

-                                {development_tool_example?.javascript_example?.examples?.map(
-                                  (example: any, index: number) => (
-                                    
 0 && (
+                            

+                              
    
+                                {development_tool_example?.javascript_example?.methods?.map(
+                                  (method: any, index: number) => (
+                                    
  • 
-                                      {example?.title && (
-                                        
    
-                                          {example?.title}
-                                        
    
+                                      {method?.name && (
+                                        
+                                          {method?.name}{' '}
+                                        
                                       )}
-                                      {example?.code && (
-                                        
    -                                          
-                                            {example?.code}
-                                          
-                                        
    
+                                      {method?.description && (
+                                        
+                                          {method?.description}
+                                        
                                       )}
-                                    

+                                    
                                   )
                                 )}
-                              

-                            )}
+                              
+                            

+                          )}
 
-                          {development_tool_example?.javascript_example?.note && (
+                          {development_tool_example?.javascript_example
+                            ?.examples?.length > 0 && (
+                            

+                              {development_tool_example?.javascript_example?.examples?.map(
+                                (example: any, index: number) => (
+                                  

+                                    {example?.title && (
+                                      

+                                        {example?.title}
+                                      

+                                    )}
+                                    {example?.code && (
+                                      
+                                        
+                                          {example?.code}
+                                        
+                                      

+                                    )}
+                                  

+                                )
+                              )}
+                            

+                          )}
+
+                          {development_tool_example?.javascript_example
+                            ?.note && (
                             

-                              {development_tool_example?.javascript_example?.note}
+                              {
+                                development_tool_example?.javascript_example
+                                  ?.note
+                              }
                             

                           )}
                         

@@ -864,15 +923,15 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                               {splitDescriptions.map(
                                 (text: any, subIndex: any) => {
                                   const isQuoted =
-                                    text.startsWith("") && text.endsWith("");
+                                    text.startsWith('') && text.endsWith('');
 
                                   return (
                                     
                                       {text}
@@ -907,18 +966,20 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                               how?.heading ? (
                                 

                                   {how?.heading}
                                 

                               ) : (
                                 
  • 
                                   <>
                                     
@@ -965,7 +1026,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
 
             {/* cta section */}
             
    
-              
    
+              
    
                 
    
                   {/* Left Section */}
                   
    
@@ -978,7 +1041,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                     />
                     
    
                       
    
-                        The essential AI{" "}
+                        The essential AI{' '}
                         companion every QA needs
                       
    
                       
@@ -994,7 +1057,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                         
    
@@ -1038,7 +1105,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                       >
                         
                         
    
-                          Use AI{" "}
+                          Use AI{' '}
                           to reproduce and fix bugs
                         
    
                       
    
@@ -1049,8 +1116,8 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                         
    
                           
                             Screen Recording
-                          {" "}
-                          with{" "}
+                          {' '}
+                          with{' '}
                           
                             Rewind (Upto 2-min)
                           
@@ -1061,9 +1128,9 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                       >
                         
                         
    
-                          Capture{" "}
+                          Capture{' '}
                           
-                            {" "}
+                            {' '}
                             backend logs
                           
                           with every bug report
@@ -1074,7 +1141,7 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                       >
                         
                         
    
-                          Assign bugs and{" "}
+                          Assign bugs and{' '}
                           share at
                           single click
                         
    
@@ -1099,14 +1166,16 @@ const Page = ({ params: { slug } }: { params: { slug: string } }) => {
                         
                           
    
                             
                               {tool?.icon}
                             
                             
    
                               {tool?.name}
                             
    
diff --git a/app/components/developmentToolsComponent/harFileViewer.tsx b/app/components/developmentToolsComponent/harFileViewer.tsx
new file mode 100644
index 0000000..a68c691
--- /dev/null
+++ b/app/components/developmentToolsComponent/harFileViewer.tsx
@@ -0,0 +1,656 @@
+"use client";
+
+import React, { useMemo, useRef, useState } from "react";
+import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+
+type HarNameValue = { name: string; value: string };
+
+type HarEntry = {
+  startedDateTime?: string;
+  time?: number;
+  request?: {
+    method?: string;
+    url?: string;
+    httpVersion?: string;
+    headers?: HarNameValue[];
+    queryString?: HarNameValue[];
+    postData?: { mimeType?: string; text?: string };
+    headersSize?: number;
+    bodySize?: number;
+  };
+  response?: {
+    status?: number;
+    statusText?: string;
+    httpVersion?: string;
+    headers?: HarNameValue[];
+    content?: { size?: number; mimeType?: string; text?: string; encoding?: string };
+    headersSize?: number;
+    bodySize?: number;
+    redirectURL?: string;
+  };
+  cache?: any;
+  timings?: Record;
+  serverIPAddress?: string;
+  connection?: string;
+  _error?: string;
+};
+
+type ParsedHar = {
+  entries: HarEntry[];
+  pageTitle?: string;
+  creator?: string;
+  browser?: string;
+};
+
+type EntryType = "all" | "xhr" | "js" | "css" | "img" | "media" | "other" | "errors";
+
+const isObject = (v: unknown): v is Record => typeof v === "object" && v !== null;
+
+const safeJsonParse = (text: string): { data: unknown; error: string } => {
+  try {
+    return { data: JSON.parse(text), error: "" };
+  } catch {
+    return { data: null, error: "Invalid JSON. Please upload a valid .har/.json file." };
+  }
+};
+
+const parseHarLike = (raw: unknown): { har: ParsedHar | null; error: string } => {
+  if (!raw) return { har: null, error: "No data found in file." };
+
+  // Standard HAR shape
+  if (isObject(raw) && isObject(raw.log) && Array.isArray(raw.log.entries)) {
+    const log = raw.log as any;
+    const entries = (log.entries as any[]).filter(Boolean) as HarEntry[];
+    const pageTitle =
+      Array.isArray(log.pages) && log.pages[0]?.title ? String(log.pages[0].title) : undefined;
+    const creator = log.creator?.name ? String(log.creator.name) : undefined;
+    const browser = log.browser?.name ? String(log.browser.name) : undefined;
+    return { har: { entries, pageTitle, creator, browser }, error: "" };
+  }
+
+  // Some exports are just { entries: [...] }
+  if (isObject(raw) && Array.isArray((raw as any).entries)) {
+    return { har: { entries: (raw as any).entries as HarEntry[] }, error: "" };
+  }
+
+  // Or an array of entries
+  if (Array.isArray(raw)) {
+    return { har: { entries: raw as HarEntry[] }, error: "" };
+  }
+
+  return { har: null, error: "Unsupported HAR format. Expected { log: { entries: [...] } }." };
+};
+
+const hostFromUrl = (url: string) => {
+  try {
+    return new URL(url).host;
+  } catch {
+    return "";
+  }
+};
+
+const pathFromUrl = (url: string) => {
+  try {
+    const u = new URL(url);
+    return `${u.pathname}${u.search}`;
+  } catch {
+    return url;
+  }
+};
+
+const formatBytes = (n?: number) => {
+  if (!Number.isFinite(n)) return "—";
+  const v = Number(n);
+  const units = ["B", "KB", "MB", "GB"];
+  let i = 0;
+  let x = Math.abs(v);
+  while (x >= 1024 && i < units.length - 1) {
+    x /= 1024;
+    i += 1;
+  }
+  const sign = v < 0 ? "-" : "";
+  return `${sign}${x.toFixed(i === 0 ? 0 : 2)} ${units[i]}`;
+};
+
+const normalizeHeaders = (h?: HarNameValue[]) =>
+  Array.isArray(h) ? h.map((x) => ({ name: String(x.name ?? ""), value: String(x.value ?? "") })) : [];
+
+const guessEntryType = (en: HarEntry): Exclude => {
+  const mime =
+    String(en.response?.content?.mimeType ?? en.request?.postData?.mimeType ?? "").toLowerCase();
+  const url = String(en.request?.url ?? "").toLowerCase();
+
+  if (mime.includes("javascript") || url.endsWith(".js") || url.includes(".js?")) return "js";
+  if (mime.includes("css") || url.endsWith(".css") || url.includes(".css?")) return "css";
+  if (
+    mime.startsWith("image/") ||
+    /\.(png|jpe?g|gif|webp|svg|ico)(\?|#|$)/.test(url)
+  )
+    return "img";
+  if (
+    mime.startsWith("video/") ||
+    mime.startsWith("audio/") ||
+    /\.(mp4|webm|mp3|wav|m4a|mov)(\?|#|$)/.test(url)
+  )
+    return "media";
+
+  // Heuristic: XHR/fetch often has JSON or is not a static file
+  if (mime.includes("json") || mime.includes("xml") || mime.includes("graphql")) return "xhr";
+  return "other";
+};
+
+const clampTiming = (n: unknown) => {
+  const v = Number(n);
+  if (!Number.isFinite(v) || v < 0) return 0;
+  return v;
+};
+
+const timingSegments = (en: HarEntry) => {
+  const t = en.timings ?? {};
+  const dns = clampTiming(t.dns);
+  const connect = clampTiming(t.connect);
+  const ssl = clampTiming(t.ssl);
+  const wait = clampTiming(t.wait);
+  const receive = clampTiming(t.receive);
+  const send = clampTiming(t.send);
+  const blocked = clampTiming(t.blocked);
+  return [
+    { key: "blocked", label: "Blocked", ms: blocked, color: "#6b7280" },
+    { key: "dns", label: "DNS", ms: dns, color: "#60a5fa" },
+    { key: "connect", label: "Connect", ms: connect, color: "#34d399" },
+    { key: "ssl", label: "SSL", ms: ssl, color: "#c084fc" },
+    { key: "send", label: "Send", ms: send, color: "#93c5fd" },
+    { key: "wait", label: "Waiting", ms: wait, color: "#fbbf24" },
+    { key: "receive", label: "Content Download", ms: receive, color: "#22c55e" },
+  ].filter((s) => s.ms > 0);
+};
+
+const HarFileViewer = () => {
+  const [rawText, setRawText] = useState("");
+  const [har, setHar] = useState(null);
+  const [error, setError] = useState("");
+  const [activeId, setActiveId] = useState(-1);
+  const [search, setSearch] = useState("");
+  const [typeFilter, setTypeFilter] = useState("all");
+
+  const fileInputRef = useRef(null);
+  const dropRef = useRef(null);
+
+  const reset = () => {
+    setRawText("");
+    setHar(null);
+    setError("");
+    setActiveId(-1);
+    setSearch("");
+    setTypeFilter("all");
+  };
+
+  const loadText = (text: string) => {
+    setRawText(text);
+    const parsed = safeJsonParse(text);
+    if (parsed.error) {
+      setHar(null);
+      setError(parsed.error);
+      return;
+    }
+    const res = parseHarLike(parsed.data);
+    setHar(res.har);
+    setError(res.error);
+    setActiveId(-1);
+  };
+
+  const onPickFile = () => fileInputRef.current?.click();
+
+  const onFileChange: React.ChangeEventHandler = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    try {
+      const text = await file.text();
+      loadText(text);
+    } finally {
+      e.target.value = "";
+    }
+  };
+
+  const onDrop: React.DragEventHandler = async (e) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files?.[0];
+    if (!file) return;
+    const text = await file.text();
+    loadText(text);
+  };
+
+  const onDragOver: React.DragEventHandler = (e) => {
+    e.preventDefault();
+  };
+
+  const entries = useMemo(() => har?.entries ?? [], [har]);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return entries
+      .map((en, idx) => ({ en, idx }))
+      .filter(({ en }) => {
+        const url = String(en.request?.url ?? "");
+        const status = Number(en.response?.status ?? 0);
+        const host = hostFromUrl(url);
+        const path = pathFromUrl(url);
+
+        const matchesText =
+          !q ||
+          url.toLowerCase().includes(q) ||
+          host.toLowerCase().includes(q) ||
+          path.toLowerCase().includes(q) ||
+          String(en.response?.statusText ?? "").toLowerCase().includes(q);
+
+        const isError = status >= 400;
+        const type = guessEntryType(en);
+        const matchesType =
+          typeFilter === "all"
+            ? true
+            : typeFilter === "errors"
+              ? isError
+              : type === typeFilter;
+
+        return matchesText && matchesType;
+      });
+  }, [entries, search, typeFilter]);
+
+  const summary = useMemo(() => {
+    const total = entries.length;
+    let success = 0;
+    let redirect = 0;
+    let err = 0;
+    let totalTime = 0;
+    for (const e of entries) {
+      const st = Number(e.response?.status ?? 0);
+      if (st >= 200 && st < 300) success += 1;
+      else if (st >= 300 && st < 400) redirect += 1;
+      else if (st >= 400) err += 1;
+      totalTime += Number(e.time ?? 0) || 0;
+    }
+    const avgTime = total ? totalTime / total : 0;
+    return { total, success, redirect, err, avgTime };
+  }, [entries]);
+
+  const timelineMaxMs = useMemo(() => {
+    let max = 0;
+    for (const { en } of filtered) {
+      const t = Number(en.time ?? 0) || 0;
+      if (t > max) max = t;
+    }
+    return Math.max(100, Math.ceil(max / 100) * 100);
+  }, [filtered]);
+
+  const copy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      // ignore
+    }
+  };
+
+  const downloadJson = () => {
+    if (!rawText) return;
+    const blob = new Blob([rawText], { type: "application/json;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "network.har.json";
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+  };
+
+  const formatJson = (v: any) => {
+    try {
+      return JSON.stringify(v, null, 2);
+    } catch {
+      return String(v ?? "");
+    }
+  };
+
+  return (
+    
    
+      
    
+        
    
+          
    
+            
    
+              
    
+                
    
+                  
    
+                    
    Drop your .har or .json file here
    
+                    
    
+                      Runs locally in your browser — nothing is uploaded.
+                    
    
+                  
    
+                  
    
+                    
+                    
+                    
+                    
+                  
    
+                
    
+                {error && 
    {error}
    }
+                {har && (
+                  
    
+                    Loaded {summary.total} entries ·{" "}
+                    {summary.success} success ·{" "}
+                    {summary.redirect} redirects ·{" "}
+                    {summary.err} errors · avg{" "}
+                    {Math.round(summary.avgTime)}ms
+                    {har.pageTitle ? (
+                      <>
+                        {" "}
+                        · page {har.pageTitle}
+                      
+                    ) : null}
+                    {har.creator ? (
+                      <>
+                        {" "}
+                        · creator {har.creator}
+                      
+                    ) : null}
+                    {har.browser ? (
+                      <>
+                        {" "}
+                        · browser {har.browser}
+                      
+                    ) : null}
+                  
    
+                )}
+              
    
+
+              {/* Search + type chips */}
+              
    
+                 setSearch(e.target.value)}
+                  placeholder="Search in URL, headers, requests, and responses…"
+                  className="w-full bg-black/40 border border-[#222222] rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary/60"
+                  aria-label="Search entries"
+                />
+
+                
    
+                  {(
+                    [
+                      ["all", "All"],
+                      ["xhr", "XHR"],
+                      ["js", "JS"],
+                      ["css", "CSS"],
+                      ["img", "Img"],
+                      ["media", "Media"],
+                      ["other", "Other"],
+                      ["errors", "Errors"],
+                    ] as const
+                  ).map(([key, label]) => (
+                    
+                  ))}
+
+                  
    
+                    Showing {filtered.length} /{" "}
+                    {entries.length}
+                  
    
+                
    
+              
    
+
+              {/* Table + details */}
+              
    
+                {/* Header */}
+                
    
+                  
    Status
    
+                  
    Type
    
+                  
    Request
    
+                  
    Timeline range: {timelineMaxMs}ms
    
+                
    
+
+                {/* Rows */}
+                
    
+                  {filtered.length === 0 ? (
+                    
    No matching entries.
    
+                  ) : (
+                    
      
+                      {filtered.slice(0, 2000).map(({ en, idx }) => {
+                        const method = String(en.request?.method ?? "").toUpperCase() || "—";
+                        const url = String(en.request?.url ?? "");
+                        const status = Number(en.response?.status ?? 0) || 0;
+                        const totalMs = Math.max(0, Number(en.time ?? 0) || 0);
+                        const selected = idx === activeId;
+                        const statusColor =
+                          status >= 200 && status < 300
+                            ? "text-green-300"
+                            : status >= 300 && status < 400
+                              ? "text-yellow-300"
+                              : status >= 400
+                                ? "text-red-300"
+                                : "text-white/60";
+
+                        const typ = guessEntryType(en);
+                        const typeLabel =
+                          typ === "xhr" ? "XHR" : typ === "js" ? "JS" : typ === "css" ? "CSS" : typ === "img" ? "Img" : typ === "media" ? "Media" : "Other";
+
+                        const segs = timingSegments(en);
+                        const segTotal = segs.reduce((a, s) => a + s.ms, 0) || totalMs || 1;
+                        const max = timelineMaxMs || 1;
+                        const barW = Math.max(2, Math.min(100, (totalMs / max) * 100));
+
+                        const reqHeaders = normalizeHeaders(en.request?.headers);
+                        const resHeaders = normalizeHeaders(en.response?.headers);
+
+                        return (
+                          
    • 
+                            
+
+                            {selected && (
+                              
      
+                                
      
+                                  
      
+                                    
      
+                                      {method} {pathFromUrl(url)}
+                                    
      
+                                    
      
+                                      {hostFromUrl(url) || "—"}
+                                      {" · "}Status {status || "—"}
+                                      {" · "}Total {Math.round(totalMs)}ms
+                                    
      
+
+                                    
      
+                                      
      
+                                        
      Type
      
+                                        
      {typeLabel.toUpperCase()}
      
+                                      
      
+                                      
      
+                                        
      Started
      
+                                        
      
+                                          {en.startedDateTime ? new Date(en.startedDateTime).toLocaleString() : "—"}
+                                        
      
+                                      
      
+                                      
      
+                                        
      MIME
      
+                                        
      
+                                          {en.response?.content?.mimeType ?? "—"}
+                                        
      
+                                      
      
+                                      
      
+                                        
      Size
      
+                                        
      
+                                          {formatBytes(Number(en.response?.content?.size ?? en.response?.bodySize ?? 0) || 0)}
+                                        
      
+                                      
      
+                                    
      
+
+                                    
      
+                                      
      Timing breakdown
      
+                                      
      
+                                        {timingSegments(en).length === 0 ? (
+                                          
      —
      
+                                        ) : (
+                                          timingSegments(en).map((s) => (
+                                            
      
+                                              
+                                              {s.label}
+                                              {Math.round(s.ms)}ms
+                                            
      
+                                          ))
+                                        )}
+                                      
      
+                                    
      
+                                  
      
+
+                                  
      
+                                    
      
+                                      
+                                    
      
+
+                                    
      
+                                      
+                                        Response headers
+                                      
+                                      
      
+                                        {resHeaders.length === 0 ? (
+                                          
      —
      
+                                        ) : (
+                                          
      +                                            {resHeaders.map((h) => `${h.name}: ${h.value}`).join("\n")}
+                                          
      
+                                        )}
+                                      
      
+                                    
      
+
+                                    
      
+                                      
+                                        Response content
+                                      
+                                      
      
+                                        
      
+                                          MIME:{" "}
+                                          {en.response?.content?.mimeType ?? "—"}
+                                          {" · "}
+                                          Encoding:{" "}
+                                          {en.response?.content?.encoding ?? "—"}
+                                        
      
+                                        
      +                                          {en.response?.content?.text ? String(en.response.content.text) : "—"}
+                                        
      
+                                      
      
+                                    
      
+
+                                    {reqHeaders.length > 0 && (
+                                      
      
+                                        
+                                          Request headers
+                                        
+                                        
      
+                                          
      +                                            {reqHeaders.map((h) => `${h.name}: ${h.value}`).join("\n")}
+                                          
      
+                                        
      
+                                      
      
+                                    )}
+                                  
      
+                                
      
+                              
      
+                            )}
+                          
      • 
+                        );
+                      })}
+                    
    
+                  )}
+                
    
+              
    
+            
    
+          
    
+        
    
+      
    
+    
    
+  );
+};
+
+export default HarFileViewer;
+
diff --git a/app/components/developmentToolsComponent/htmlViewer.tsx b/app/components/developmentToolsComponent/htmlViewer.tsx
index dba28d2..10f552f 100644
--- a/app/components/developmentToolsComponent/htmlViewer.tsx
+++ b/app/components/developmentToolsComponent/htmlViewer.tsx
@@ -1,22 +1,58 @@
 "use client";
-import React, { useState } from "react";
+
+import React, { useRef, useState } from "react";
+import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+
+const DEFAULT_HTML =
+  "
    Hello, HTML Viewer
    \n
    Edit the HTML to see updates here.
    ";
+const DEFAULT_CSS =
+  "body{font-family:system-ui;padding:16px}\niframe, img{max-width:100%}";
+const DEFAULT_JS = "console.log('Viewer ready');";
 
 const HtmlViewer: React.FC = () => {
   const [activeTab, setActiveTab] = useState<"html" | "css" | "js">("html");
-  const [html, setHtml] = useState("
    Hello, Html Viewer
    \n
    Edit the HTML to see updates here.
    ");
-  const [css, setCss] = useState("body{font-family:system-ui;padding:16px}\niframe, img{max-width:100%}");
-  const [js, setJs] = useState("console.log('Viewer ready');");
+  const [html, setHtml] = useState(DEFAULT_HTML);
+  const [css, setCss] = useState(DEFAULT_CSS);
+  const [js, setJs] = useState(DEFAULT_JS);
+
+  const fileInputRef = useRef(null);
+
+  const editorValue =
+    activeTab === "html" ? html : activeTab === "css" ? css : js;
+  const setEditorValue =
+    activeTab === "html" ? setHtml : activeTab === "css" ? setCss : setJs;
+
+  const tabLabel =
+    activeTab === "html"
+      ? "HTML"
+      : activeTab === "css"
+        ? "CSS"
+        : "JavaScript";
+
+  const fileAccept =
+    activeTab === "html" ? ".html,.htm,.txt,text/html" : "text/plain,.css,.js";
+
+  const buildDocument = () => {
+    return `\nPreview${html}',
+      example_string_description:
+        'If you preview untrusted SVGs, always treat them like HTML: sanitize before rendering. This SVG Viewer removes common unsafe elements before previewing.',
+      info_items: [
+        {
+          part: 'Scripts:',
+          description:
+            'Script tags can run code in some contexts and should be removed.',
+        },
+        {
+          part: 'Event handlers:',
+          description:
+            'Attributes like onload/onclick can execute JavaScript and should be stripped.',
+        },
+        {
+          part: 'foreignObject:',
+          description:
+            'foreignObject can embed HTML inside SVG, which increases XSS risk when rendering untrusted content.',
+        },
+      ],
+    },
+    development_tools_what: {
+      about_title: 'What does the SVG Viewer do?',
+      what_description: [
+        {
+          descriptions:
+            'The SVG Viewer lets you paste SVG markup or upload an SVG file and instantly see a live preview in your browser.',
+        },
+        {
+          descriptions:
+            'It detects and displays common SVG attributes like width, height, and viewBox to help you troubleshoot sizing, alignment, and cropping issues.',
+        },
+        {
+          descriptions:
+            'For safer previews, the tool sanitizes the SVG before rendering by removing scripts and foreignObject content and stripping inline event handlers.',
+        },
+      ],
+    },
+    development_tools_steps_guide: {
+      guide_title: 'How to use the SVG Viewer?',
+      guide_description: 'Follow these steps:',
+      steps: [
+        {
+          step_key: 'Step 1:',
+          step_title: 'Paste or upload:',
+          step_description:
+            'Paste SVG markup into the editor or upload an .svg file to load its content.',
+        },
+        {
+          step_key: 'Step 2:',
+          step_title: 'Preview:',
+          step_description:
+            'See the rendered SVG immediately in the preview panel (scripts and foreignObject are removed).',
+        },
+        {
+          step_key: 'Step 3:',
+          step_title: 'Inspect attributes:',
+          step_description:
+            'Copy basic info such as width, height, and viewBox to debug scaling issues.',
+        },
+        {
+          step_key: 'Step 4:',
+          step_title: 'Copy or download:',
+          step_description:
+            'Copy the sanitized SVG markup or download it as a .svg file.',
+        },
+      ],
+    },
+    development_tools_how_use: {
+      how_use_title: 'Common use cases for SVG Viewer',
+      how_use_description: 'Popular reasons to use this tool:',
+      point: [
+        {
+          title: 'Debugging scaling and alignment',
+          description:
+            'Quickly check viewBox/size attributes when an SVG looks stretched, clipped, or misaligned in a UI.',
+        },
+        {
+          title: 'Previewing icons from tickets/PRs',
+          description:
+            'Paste SVG markup shared in chats or issues to confirm it renders correctly before merging.',
+        },
+        {
+          title: 'Sanitizing for sharing',
+          description:
+            'Remove scripts and foreignObject content from untrusted SVGs before sharing them with teammates.',
+        },
+        {
+          title: 'Asset handoff',
+          description:
+            'Download a cleaned SVG file after minor tweaks or after confirming the exported asset looks right.',
+        },
+      ],
+    },
+    development_tools_Comparison: {
+      title: 'SVG Viewer vs SVG Converter: which one should you use?',
+      description: [
+        {
+          desc: 'Use SVG Viewer when you want to preview SVG markup, inspect basic attributes, and verify how an icon renders.',
+        },
+        {
+          desc: 'Use SVG to React/CSS Utility when you want code output such as React components, CSS Data URIs, or CSS masks.',
+        },
+      ],
+    },
+    development_tool_example: {
+      example_title: 'SVG Viewer example',
+      example_description:
+        'Here is a simple SVG you can paste into the tool to preview. It includes a viewBox so it scales correctly.',
+      example_input: {
+        title: 'Example SVG markup',
+        json_data:
+          '\\n  \\n  \\n  \\n  \\n',
+      },
+      example_outputs: {
+        intro:
+          'After pasting, you can copy the detected attributes and the sanitized SVG output.',
+        outputs: [
+          {
+            mode: 'Detected attributes',
+            title: 'What you should see',
+            content:
+              '{\\n  "width": "120",\\n  "height": "120",\\n  "viewBox": "0 0 120 120"\\n}',
+          },
+          {
+            mode: 'Sanitized SVG (copy)',
+            title: 'What the tool provides',
+            content:
+              'A cleaned SVG string suitable for previewing and sharing (scripts/foreignObject removed, inline on* handlers stripped).',
+          },
+        ],
+      },
+    },
+    meta_data: {
+      meta_title: 'SVG Viewer Online – Preview & Inspect SVG Markup',
+      meta_description:
+        'Preview SVG markup instantly. Upload or paste SVG, inspect width/height/viewBox, copy sanitized SVG, and download .svg files.',
+      og_title: 'SVG Viewer – Free Online Tool',
+      og_description:
+        'Paste or upload SVG markup to preview it safely, inspect attributes, and copy/download the sanitized SVG output.',
+      og_image: '/images/og-images/Cover.png',
+    },
+  },
+  [`har-file-viewer`]: {
+    hero_section: {
+      title: 'HAR File Viewer',
+      description:
+        'Upload a HAR (HTTP Archive) file and inspect network requests, responses, headers, payloads, and timings in a clean viewer with search, type filters, and an inline waterfall timeline.',
+    },
+    development_tools_list: [
+      { tool: 'URL Parser & Query String Editor', url: PATHS.URL_PARSER },
+      { tool: 'JSON Prettifier', url: PATHS.JSON_PRETTIFIER },
+      { tool: 'HTML Viewer', url: PATHS.HTML_VIEWER },
+      { tool: 'Curl to Code Converter', url: PATHS.CURL_TO_CODE_CONVERTER },
+    ],
+    development_tools_about_details: {
+      about_title: 'What is a HAR File Viewer?',
+      about_description: [
+        {
+          description:
+            'A HAR (HTTP Archive) file is a JSON log exported from browser DevTools that contains every network request made during a browsing session.',
+        },
+        {
+          description:
+            'This HAR File Viewer helps you debug slow page loads, failed requests, redirects, and API errors by letting you search and inspect entries (URLs, status codes, headers, request payloads, response bodies, and timing breakdowns).',
+        },
+      ],
+    },
+    development_tools_user_agent_info: {
+      info_title: 'Privacy & security notes for HAR files',
+      intro_text:
+        'HAR files can contain sensitive data (cookies, authorization headers, query params, and request/response bodies). Treat a HAR like a password: share only with trusted people and redact secrets before uploading to any third‑party service.',
+      example_string:
+        'Authorization: Bearer \\nCookie: session=\\nPOST /login { "email": "user@company.com", "password": "••••••" }',
+      example_string_description:
+        'This viewer runs locally in your browser and does not upload your HAR to a server. Still, consider removing tokens and personal data before sharing the file externally.',
+      info_items: [
+        {
+          part: 'May include secrets:',
+          description:
+            'Cookies, API keys, bearer tokens, and personal data can appear in headers, URLs, and bodies.',
+        },
+        {
+          part: 'Redact before sharing:',
+          description:
+            'Replace tokens and credentials with placeholders before attaching HAR files to tickets.',
+        },
+        {
+          part: 'Local processing:',
+          description:
+            'Your file is parsed and displayed in the browser; the tool does not send it to an external API.',
+        },
+      ],
+    },
+    development_tools_what: {
+      about_title: 'What can you do with this HAR viewer?',
+      what_description: [
+        {
+          descriptions:
+            'Upload a .har or .json file and instantly browse the captured requests in a searchable list.',
+        },
+        {
+          descriptions:
+            'Use quick type filters like "XHR", "JS", "CSS", "Img", "Media", and "Errors" to narrow down what you’re investigating.',
+        },
+        {
+          descriptions:
+            'Click any row to expand details directly below it, including headers, response content, and a timing breakdown.',
+        },
+        {
+          descriptions:
+            'Use the waterfall timeline to visually compare which requests are slow and which stage (DNS/connect/wait/download) is taking the time.',
+        },
+      ],
+    },
+    development_tools_steps_guide: {
+      guide_title: 'How to use the HAR File Viewer',
+      guide_description: 'Simple steps:',
+      steps: [
+        {
+          step_key: 'Step 1:',
+          step_title: 'Export a HAR file:',
+          step_description:
+            'Open browser DevTools → Network tab → reproduce the issue → export/save HAR (keep “Preserve log” enabled if needed).',
+        },
+        {
+          step_key: 'Step 2:',
+          step_title: 'Upload or drop the file:',
+          step_description:
+            'Drag and drop your .har/.json file into the viewer (or use Upload).',
+        },
+        {
+          step_key: 'Step 3:',
+          step_title: 'Search & filter:',
+          step_description:
+            'Use the search box and type chips (XHR/JS/CSS/Img/Media/Errors) to narrow down to a specific request.',
+        },
+        {
+          step_key: 'Step 4:',
+          step_title: 'Inspect details:',
+          step_description:
+            'Click a request row to expand its details below and review response headers/content and timing breakdown.',
+        },
+      ],
+    },
+    development_tools_how_use: {
+      how_use_title: 'Common use cases for HAR files',
+      how_use_description: 'Teams use HAR files for:',
+      point: [
+        {
+          title: 'Debugging failed API requests',
+          description:
+            'Find 4xx/5xx responses quickly and inspect headers and response bodies for error messages.',
+        },
+        {
+          title: 'Performance analysis',
+          description:
+            'Compare request durations, spot slow endpoints, and review timing breakdowns to identify bottlenecks.',
+        },
+        {
+          title: 'Redirect and caching issues',
+          description:
+            'Track 3xx chains and review cache-related headers to diagnose unexpected behavior.',
+        },
+        {
+          title: 'Sharing reproducible evidence',
+          description:
+            'Attach a HAR to tickets so engineers can inspect the exact network activity behind a bug.',
+        },
+      ],
+    },
+    development_tools_Comparison: {
+      title: 'HAR File Viewer vs DevTools Network tab',
+      description: [
+        {
+          desc: 'Use DevTools Network when you can reproduce the issue live and want real-time throttling, replay, and debugging.',
+        },
+        {
+          desc: 'Use a HAR viewer when you’re analyzing a captured session from a teammate/customer and need to search, filter, and share findings quickly.',
+        },
+      ],
+    },
+    development_tool_example: {
+      example_title: 'Example: what to look for in a HAR',
+      example_description:
+        'After uploading, use the Errors filter to find failing requests and expand one row to inspect details.',
+      example_outputs: {
+        intro: 'Typical workflow:',
+        outputs: [
+          {
+            mode: 'Filter',
+            title: 'Show errors only',
+            content:
+              'Click the "Errors" chip and search for your API host or endpoint path.',
+          },
+          {
+            mode: 'Inspect',
+            title: 'Open the failing request',
+            content:
+              'Expand the row and check response headers/content, then review request headers to confirm auth/cookies were sent.',
+          },
+          {
+            mode: 'Timings',
+            title: 'Review performance',
+            content:
+              'Use the waterfall bar and timing breakdown to identify whether the time is spent on DNS/connect/wait/download.',
+          },
+        ],
+      },
+    },
+    meta_data: {
+      meta_title: 'HAR File Viewer Online – Analyze HTTP Archive Files',
+      meta_description:
+        'Upload and analyze HAR files online. Inspect requests, responses, headers, payloads, status codes, redirects, and timings to debug network issues faster.',
+      og_title: 'HAR File Viewer – Free Online Tool',
+      og_description:
+        'View and analyze HAR (HTTP Archive) files. Search entries, inspect headers/payloads/responses, and review timings for performance debugging.',
+      og_image: '/images/og-images/Cover.png',
+    },
+  },
   [`what-is-my-local-ip-address`]: {
     hero_section: {
       title: 'What Is My Local IP Address',
@@ -17702,7 +18656,8 @@ console.log(encoded);   // "SGVsbG8gV29ybGQh"`,
       ],
     },
     meta_data: {
-      meta_title: 'cURL to Code Converter — JavaScript, Python, Go | BetterBugs.io',
+      meta_title:
+        'cURL to Code Converter — JavaScript, Python, Go | BetterBugs.io',
       meta_description:
         'Convert cURL commands to JavaScript Fetch, Axios, Python Requests, Go, or Node.js code instantly. Free online tool on BetterBugs.io.',
       og_title: 'cURL to Code Converter — BetterBugs.io',
@@ -17760,8 +18715,7 @@ console.log(encoded);   // "SGVsbG8gV29ybGQh"`,
     },
     development_tools_how_use: {
       how_use_title: 'Common Use Cases:',
-      how_use_description:
-        'The Unix Timestamp Converter is useful for:',
+      how_use_description: 'The Unix Timestamp Converter is useful for:',
       point: [
         {
           title: 'Debugging Logs',
@@ -17770,13 +18724,11 @@ console.log(encoded);   // "SGVsbG8gV29ybGQh"`,
         },
         {
           title: 'Database Management',
-          description:
-            'Verify and interpret timestamp columns in databases.',
+          description: 'Verify and interpret timestamp columns in databases.',
         },
         {
           title: 'API Development',
-          description:
-            'Validate timestamp formats exchanged between services.',
+          description: 'Validate timestamp formats exchanged between services.',
         },
         {
           title: 'Time Calculation',
diff --git a/app/page.tsx b/app/page.tsx
index 2413337..09e17c6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -304,7 +304,7 @@ const Page = () => {
         
    
           {/* Sidebar */}