Search Results

9d:I[903690,["/chat-static/_next/static/immutable/chunks/0gt07hxexc1n7.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/30d3zxg6nkubj.js","/chat-static/_next/static/immutable/chunks/0ai904ok7xmqu.js","/chat-static/_next/static/immutable/chunks/1nwzd05fjwfah.js","/chat-static/_next/static/immutable/chunks/1spqqj78e1ykn.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/1d0-ugkvq77it.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/2kv6vo--6ni6k.js","/chat-static/_next/static/immutable/chunks/1zq7897ur3lup.js","/chat-static/_next/static/immutable/chunks/0mypak46se3mn.js","/chat-static/_next/static/immutable/chunks/44kjwr51vqfu6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3gsz6eegm8igw.js","/chat-static/_next/static/immutable/chunks/00p1kb8gnszzm.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/1tnp2al0c8u_f.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3ldgj5vn7sd9j.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/37_jsnlma3buw.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/3hyzknxyslfo7.js","/chat-static/_next/static/immutable/chunks/3f6p8bsaxqhbf.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/34rticvyls4_n.js","/chat-static/_next/static/immutable/chunks/0nspmgdomfjot.js","/chat-static/_next/static/immutable/chunks/39x7y_bicpaa6.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/2ot68oo676aof.js","/chat-static/_next/static/immutable/chunks/3o28brqp1rbyr.js","/chat-static/_next/static/immutable/chunks/1l2a-289elipf.js","/chat-static/_next/static/immutable/chunks/07z2bjc9mhf5z.js","/chat-static/_next/static/immutable/chunks/3oa-nkdw7tw9x.js","/chat-static/_next/static/immutable/chunks/3qndnuev6ehgi.js","/chat-static/_next/static/immutable/chunks/110ef0qm56_-u.js","/chat-static/_next/static/immutable/chunks/2ebo_2f23vant.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/2pfntbtod00n6.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0zbio1k8sn41_.js","/chat-static/_next/static/immutable/chunks/3xuz9zm3hsx7a.js","/chat-static/_next/static/immutable/chunks/3kh-sff6krqth.js","/chat-static/_next/static/immutable/chunks/2_8w13-3-h0_i.js","/chat-static/_next/static/immutable/chunks/1fsa8zl7rrq4d.js","/chat-static/_next/static/immutable/chunks/1hpztq2mtp1d-.js"],"ExplicitChatIdProvider"] 9e:I[838238,["/chat-static/_next/static/immutable/chunks/0gt07hxexc1n7.js","/chat-static/_next/static/immutable/chunks/3rjx58sh0g69q.js","/chat-static/_next/static/immutable/chunks/0pphhapj-fw3x.js","/chat-static/_next/static/immutable/chunks/35uzh68pydp0v.js","/chat-static/_next/static/immutable/chunks/2ftikag4lqb8c.js","/chat-static/_next/static/immutable/chunks/3s8icn-bip0tj.js","/chat-static/_next/static/immutable/chunks/43kd14la8rz_-.js","/chat-static/_next/static/immutable/chunks/3sctqn1914l5w.js","/chat-static/_next/static/immutable/chunks/30d3zxg6nkubj.js","/chat-static/_next/static/immutable/chunks/0ai904ok7xmqu.js","/chat-static/_next/static/immutable/chunks/1nwzd05fjwfah.js","/chat-static/_next/static/immutable/chunks/1spqqj78e1ykn.js","/chat-static/_next/static/immutable/chunks/3ftzit08h08g2.js","/chat-static/_next/static/immutable/chunks/1d0-ugkvq77it.js","/chat-static/_next/static/immutable/chunks/2i0rpllg-4zvf.js","/chat-static/_next/static/immutable/chunks/29-21_f000qe1.js","/chat-static/_next/static/immutable/chunks/0d6t47olbp1a6.js","/chat-static/_next/static/immutable/chunks/2kv6vo--6ni6k.js","/chat-static/_next/static/immutable/chunks/1zq7897ur3lup.js","/chat-static/_next/static/immutable/chunks/0mypak46se3mn.js","/chat-static/_next/static/immutable/chunks/44kjwr51vqfu6.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3gsz6eegm8igw.js","/chat-static/_next/static/immutable/chunks/00p1kb8gnszzm.js","/chat-static/_next/static/immutable/chunks/0-ec22_yqmzcc.js","/chat-static/_next/static/immutable/chunks/1tnp2al0c8u_f.js","/chat-static/_next/static/immutable/chunks/0l_1eejseha66.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3ldgj5vn7sd9j.js","/chat-static/_next/static/immutable/chunks/3-80--tl5_i_3.js","/chat-static/_next/static/immutable/chunks/37_jsnlma3buw.js","/chat-static/_next/static/immutable/chunks/2w4tj5qrgmz4d.js","/chat-static/_next/static/immutable/chunks/3hyzknxyslfo7.js","/chat-static/_next/static/immutable/chunks/3f6p8bsaxqhbf.js","/chat-static/_next/static/immutable/chunks/3kdmq0aswvxp8.js","/chat-static/_next/static/immutable/chunks/2iifuow0qvsc-.js","/chat-static/_next/static/immutable/chunks/34rticvyls4_n.js","/chat-static/_next/static/immutable/chunks/0nspmgdomfjot.js","/chat-static/_next/static/immutable/chunks/39x7y_bicpaa6.js","/chat-static/_next/static/immutable/chunks/27vhedzlts1-t.js","/chat-static/_next/static/immutable/chunks/2ot68oo676aof.js","/chat-static/_next/static/immutable/chunks/3o28brqp1rbyr.js","/chat-static/_next/static/immutable/chunks/1l2a-289elipf.js","/chat-static/_next/static/immutable/chunks/07z2bjc9mhf5z.js","/chat-static/_next/static/immutable/chunks/3oa-nkdw7tw9x.js","/chat-static/_next/static/immutable/chunks/3qndnuev6ehgi.js","/chat-static/_next/static/immutable/chunks/110ef0qm56_-u.js","/chat-static/_next/static/immutable/chunks/2ebo_2f23vant.js","/chat-static/_next/static/immutable/chunks/3cox-6-gj2koz.js","/chat-static/_next/static/immutable/chunks/2pfntbtod00n6.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/0zbio1k8sn41_.js","/chat-static/_next/static/immutable/chunks/3xuz9zm3hsx7a.js","/chat-static/_next/static/immutable/chunks/3kh-sff6krqth.js","/chat-static/_next/static/immutable/chunks/2_8w13-3-h0_i.js","/chat-static/_next/static/immutable/chunks/1fsa8zl7rrq4d.js","/chat-static/_next/static/immutable/chunks/1hpztq2mtp1d-.js"],"SWRDataProvider"] a0:[] a1:[["b_JvZ7nd8aZM7",null],["b_hDQJVCvFrIP",null],["b_ji5oZrQNxjk",null]] a2:[["b_JvZ7nd8aZM7",{"templateVersionId":null,"templateCanonId":null}],["b_hDQJVCvFrIP",{"templateVersionId":null,"templateCanonId":null}],["b_ji5oZrQNxjk",{"templateVersionId":null,"templateCanonId":null}]] a3:[["b_nVXrnE1cv57","$D2025-12-06T05:26:29.810Z"],["b_SRoHnFJD02V","$D2025-12-06T05:33:45.205Z"],["b_e3DVV0K8Rap","$D2025-12-06T05:40:15.765Z"],["b_Fgix3ebzG1n","$D2025-12-06T05:42:01.653Z"],["b_l3Avad2Slt9","$D2025-12-06T05:45:35.613Z"],["b_FEBy1jCPXAj","$D2025-12-06T05:53:22.707Z"],["b_WcvXjAeh3k2","$D2025-12-06T06:05:06.336Z"],["b_0g9A8P34mRU","$D2025-12-06T06:05:22.091Z"],["b_i38yfYQTlqo","$D2025-12-06T06:11:48.982Z"],["b_MTzurknBfF3","$D2025-12-06T06:13:29.021Z"],["b_CrMUBvaCOwE","$D2025-12-06T06:13:48.042Z"],["b_Kg8woDqJp0P","$D2025-12-06T06:15:47.737Z"],["b_HmlqPKeRGeo","$D2025-12-07T04:42:43.460Z"],["b_yu7q16dA60r","$D2025-12-07T04:44:47.996Z"],["b_XStTNfAQpde","$D2025-12-07T04:53:17.279Z"],["b_ktKfLKBywAS","$D2025-12-07T04:57:14.024Z"],["b_h13Olek5LeX","$D2025-12-07T05:17:02.066Z"],["b_RQoWpZIdwEz","$D2025-12-07T05:17:27.325Z"],["b_VB9IYQ0xV0X","$D2025-12-07T06:04:56.977Z"],["b_CMnBUBYS5C4","$D2025-12-07T06:39:32.708Z"],["b_cfYmlzX9KIA","$D2025-12-07T06:44:51.314Z"],["b_msQosefnIhQ","$D2025-12-07T06:55:10.412Z"],["b_sHDkWotp87u","$D2025-12-07T06:55:23.890Z"],["b_T14cm9AjM9W","$D2025-12-07T06:57:22.891Z"],["b_3tYw4ytYlhZ","$D2025-12-07T06:57:34.182Z"],["b_15JCA3JtD0M","$D2025-12-07T06:59:35.927Z"],["b_PaisFt5qgxD","$D2025-12-07T07:02:06.243Z"],["b_zcUkRMifj71","$D2025-12-18T05:19:43.601Z"],["b_m53CmnrEQmi","$D2025-12-18T05:21:35.405Z"],["b_72HWG9lI9La","$D2025-12-18T05:22:34.902Z"],["b_cGw4whO0q7K","$D2025-12-18T05:34:13.053Z"],["b_EbmL2jEfaQt","$D2025-12-18T06:53:25.794Z"],["b_L7alJd1GuuD","$D2025-12-18T06:54:36.848Z"],["b_ApHq90z4oDF","$D2025-12-18T07:09:18.928Z"],["b_J3O9FqLR46i","$D2025-12-18T07:14:29.913Z"],["b_zuZWvHXutEI","$D2025-12-18T07:15:45.992Z"],["b_m8JbqDYxtjx","$D2025-12-18T07:53:07.716Z"],["b_YLZCIwShCaw","$D2025-12-18T07:58:44.364Z"],["b_C0Sdqbmf2h7","$D2025-12-18T08:01:06.389Z"],["b_iA19LhTxozP","$D2025-12-18T08:07:56.028Z"],["b_Sodg20caIto","$D2025-12-18T08:21:41.791Z"],["b_d39YRi1bWJz","$D2025-12-18T08:22:49.253Z"],["b_nzpsx6zaLjm","$D2025-12-18T08:24:06.434Z"],["b_SpfioUx9ZEb","$D2025-12-18T08:31:33.905Z"],["b_QcfsJfHjmKJ","$D2025-12-18T08:59:30.713Z"],["b_8hXqDLPQg7g","$D2025-12-18T09:05:13.347Z"],["b_cCCyQubnDcg","$D2025-12-20T05:36:10.520Z"],["b_9BO0mJG2EhW","$D2025-12-20T05:46:26.917Z"],["b_QBeKQUxAFeg","$D2025-12-20T15:57:41.662Z"],["b_aRNUSoEpWeW","$D2025-12-20T16:10:52.275Z"],["b_h1QlSz3dua9","$D2025-12-20T16:15:07.003Z"],["b_2gfdnq2bXQz","$D2025-12-20T16:17:10.325Z"],["b_PbOxgad33VV","$D2025-12-20T16:19:07.197Z"],["b_8EYOHRAaS9h","$D2025-12-21T08:15:54.081Z"],["b_wt3RDQQbeoz","$D2025-12-21T08:22:04.045Z"],["b_YyreuEcuonA","$D2025-12-21T08:40:53.882Z"],["b_Ex8NJtisLAb","$D2025-12-21T08:45:38.221Z"],["b_OfdR5Dpxbz2","$D2025-12-21T08:49:18.197Z"],["b_mI4PUDmpOKg","$D2025-12-21T08:58:23.982Z"],["b_KQZVdYX1Q7l","$D2025-12-21T09:01:30.686Z"],["b_Il84B6XpXrE","$D2025-12-21T09:11:07.611Z"],["b_UXPZTKElBQz","$D2025-12-21T09:17:09.436Z"],["b_crMkaiOadd9","$D2025-12-21T09:34:10.134Z"],["b_GnxyXQR1jUC","$D2025-12-28T04:07:37.693Z"],["b_Em8QX1wkpVs","$D2025-12-28T04:08:46.963Z"],["b_Ba5HydLT9T2","$D2025-12-28T04:35:46.694Z"],["b_d779S0fWWRJ","$D2025-12-28T04:36:44.727Z"],["b_WadwrIw9oWJ","$D2025-12-28T04:49:51.991Z"],["b_ROQS4E10MoS","$D2025-12-28T06:03:43.176Z"],["b_G8O6ECzsn6K","$D2025-12-28T06:03:53.076Z"],["b_ylQ6HpKZmfB","$D2025-12-28T10:09:46.820Z"],["b_1OU1b0LJXQG","$D2025-12-28T10:10:40.852Z"],["b_ckrCpjkPCPr","$D2025-12-28T10:11:31.787Z"],["b_qlyE1eNiljK","$D2025-12-28T10:12:30.385Z"],["b_msRkFiZit9m","$D2025-12-28T10:13:23.869Z"],["b_JvZ7nd8aZM7","$D2026-07-08T10:24:37.601Z"],["b_hDQJVCvFrIP","$D2026-07-08T10:25:30.189Z"],["b_ojKcYafPmMj","$D2026-07-08T10:27:18.104Z"],["b_pxxvM2GiroG","$D2026-07-11T03:48:18.876Z"],["b_ji5oZrQNxjk","$D2026-07-18T03:17:46.807Z"]] a4:[["b_JvZ7nd8aZM7",false],["b_hDQJVCvFrIP",false],["b_ji5oZrQNxjk",false]] a5:[["b_JvZ7nd8aZM7","$undefined"],["b_hDQJVCvFrIP","$undefined"],["b_ji5oZrQNxjk","$undefined"]] a6:[["b_JvZ7nd8aZM7",null],["b_hDQJVCvFrIP",null],["b_ji5oZrQNxjk",null]] a7:[["b_JvZ7nd8aZM7",true],["b_hDQJVCvFrIP",true],["b_ji5oZrQNxjk",true]] a8:[["b_JvZ7nd8aZM7",true],["b_hDQJVCvFrIP",true],["b_ji5oZrQNxjk",true]] a9:[] aa:Tad0f4,[V0_FILE]typescriptreact:file="hooks/use-gpu-detection.ts" isMerged="true" "use client" import { useEffect } from "react" import { useThemeStore } from "@/store/theme-store" export function useGPUDetection() { const setGPUCapable = useThemeStore((state) => state.setGPUCapable) useEffect(() => { const checkGPU = () => { try { const canvas = document.createElement("canvas") const gl = canvas.getContext("webgl2") || canvas.getContext("webgl") if (!gl) { setGPUCapable(false) return } const debugInfo = gl.getExtension("WEBGL_debug_renderer_info") if (debugInfo) { const renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) const isLowEnd = renderer.includes("SwiftShader") || renderer.includes("Software") || renderer.includes("Microsoft Basic") setGPUCapable(!isLowEnd) } else { setGPUCapable(true) } } catch { setGPUCapable(false) } } checkGPU() }, [setGPUCapable]) } [V0_FILE]typescriptreact:file="components/themes/scifi-hud/hud-frame.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" interface HudFrameProps { children: ReactNode } export function HudFrame({ children }: HudFrameProps) { return ( {/* Outer glow */}

{/* Main frame */}

{/* Top accent line */} {/* Animated corner brackets */} {/* Content */}

{children}

) } [V0_FILE]typescriptreact:file="components/themes/scifi-hud/radar-sweep.tsx" isMerged="true" "use client" import { motion } from "framer-motion" export function RadarSweep() { return (

{/* Concentric circles */} {[1, 2, 3].map((ring) => (

))} {/* Cross hairs */}

{/* Sweep line */} {/* Center dot */}

{/* Random blips */} {[ { x: 30, y: 25 }, { x: 70, y: 40 }, { x: 45, y: 65 }, ].map((pos, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/themes/scifi-hud/waveform-display.tsx" isMerged="true" "use client" import { motion } from "framer-motion" export function WaveformDisplay() { const bars = 12 return (

AUDIO

{Array.from({ length: bars }).map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/themes/three-scene-wrapper.tsx" isMerged="true" "use client" import { Canvas } from "@react-three/fiber" import { Suspense, type ReactNode } from "react" import { Preload } from "@react-three/drei" interface ThreeSceneWrapperProps { children: ReactNode className?: string } export function ThreeSceneWrapper({ children, className = "" }: ThreeSceneWrapperProps) { return (

) } [V0_FILE]typescriptreact:file="components/themes/tron/tron-ui.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" interface TronUIProps { children?: ReactNode } export function TronUI({ children }: TronUIProps) { return (

{/* Top HUD */}

TRON SYSTEM

CYCLE {Math.floor(Date.now() / 1000) % 1000} {/* Side elements */}

{children}

{/* Bottom grid lines */} {Array.from({ length: 20 }).map((_, i) => ( ))}

) } function TronPanel({ children }: { children: ReactNode }) { return

{children}

} function VerticalBar({ color, height }: { color: string; height: number }) { return ( ) } [V0_FILE]typescriptreact:file="components/themes/imperial/imperial-ui.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" interface ImperialUIProps { children?: ReactNode } export function ImperialUI({ children }: ImperialUIProps) { return (

{/* Top command bar */}

IMPERIAL COMMAND SECTOR {Math.floor(Math.random() * 9000 + 1000)} {/* Side panels */}

{/* Left tactical display */}

TACTICAL

{["SHIELDS", "WEAPONS", "ENGINES", "SENSORS"].map((system, i) => (

{system} {90 - i * 10}%

))}

{/* Center content */}

{children}

{/* Right status display */}

FLEET STATUS

{["TIE-001", "TIE-002", "TIE-003"].map((unit, i) => (

{unit} ACTIVE

))}

{/* Bottom warning bar */}

ALL SYSTEMS OPERATIONAL

) } function ImperialPanel({ children, className = "" }: { children: ReactNode; className?: string }) { return

{children}

} [V0_FILE]typescriptreact:file="components/themes/ironman/ironman-ui.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" interface IronManUIProps { children?: ReactNode } export function IronManUI({ children }: IronManUIProps) { return (

{/* Top AR bar */} J.A.R.V.I.S

MARK LXXXV {new Date().toLocaleTimeString()}

{/* Circular elements */} {/* Side panels */}

{/* Left diagnostics */}

SUIT DIAGNOSTICS

{[ { label: "POWER", value: 98, color: "#00d4ff" }, { label: "THRUSTERS", value: 100, color: "#ff9500" }, { label: "WEAPONS", value: 87, color: "#ff9500" }, { label: "SHIELDS", value: 92, color: "#00d4ff" }, ].map((item, i) => (

{item.label} {item.value}%

))}

{/* Center content */}

{children}

{/* Right communications */}

COMMUNICATIONS

{["FRIDAY", "PEPPER", "AVENGERS HQ"].map((contact, i) => (

{contact}

))}

{/* Bottom HUD */}

{[1, 2, 3, 4, 5].map((i) => (

))}

) } function ARPanel({ children, className = "" }: { children: ReactNode; className?: string }) { return (

{children}

) } function CircularIndicator({ position }: { position: "top-left" | "top-right" | "bottom-left" | "bottom-right" }) { const positionClasses = { "top-left": "top-20 left-20", "top-right": "top-20 right-20", "bottom-left": "bottom-20 left-20", "bottom-right": "bottom-20 right-20", } return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "J.A.R.V.I.S - AI Assistant", description: "Multi-theme AI assistant system", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "zustand": "5.0.9", "framer-motion": "12.23.25", "@react-three/fiber": "9.4.2", "@react-three/drei": "10.7.7", "three": "0.181.2", "ai": "5.0.107", "qrcode": "1.5.4" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="store/chat-store.ts" isMerged="true" import { create } from "zustand" export interface Message { id: string role: "user" | "assistant" content: string timestamp: Date } interface ChatState { messages: Message[] isTyping: boolean addMessage: (role: "user" | "assistant", content: string) => void clearMessages: () => void setTyping: (typing: boolean) => void } export const useChatStore = create((set) => ({ messages: [ { id: "1", role: "assistant", content: "Good evening, Sir. All systems are operational. How may I assist you today?", timestamp: new Date(), }, ], isTyping: false, addMessage: (role, content) => set((state) => ({ messages: [ ...state.messages, { id: Date.now().toString(), role, content, timestamp: new Date(), }, ], })), clearMessages: () => set({ messages: [ { id: "1", role: "assistant", content: "Chat cleared. How may I assist you?", timestamp: new Date(), }, ], }), setTyping: (typing) => set({ isTyping: typing }), })) [V0_FILE]typescript:file="app/api/chat/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" export async function POST(req: Request) { try { const { messages } = await req.json() const systemMessage = { role: "system", content: `You are Bakr AI, an advanced AI assistant with cutting-edge intelligence and capabilities. You are highly intelligent, helpful, and speak in a professional yet friendly manner. Keep responses concise but helpful. You can assist with any task, answer questions, provide information, analyze images, and engage in conversation. Always maintain a professional yet personable demeanor.`, } const GEMINI_API_KEY = process.env.GEMINI_API_KEY || "AIzaSyCaENSkFDiyxJDaOO350C5PdhfjpmVjw5o" const lastMessage = messages[messages.length - 1] const fetchWithTimeout = async (url: string, options: RequestInit, timeout = 10000) => { const controller = new AbortController() const id = setTimeout(() => controller.abort(), timeout) try { const response = await fetch(url, { ...options, signal: controller.signal }) clearTimeout(id) return response } catch (error) { clearTimeout(id) throw error } } if (lastMessage?.image) { try { // Extract base64 data from data URL const base64Data = lastMessage.image.split(",")[1] const mimeType = lastMessage.image.split(";")[0].split(":")[1] const geminiResponse = await fetchWithTimeout( `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${GEMINI_API_KEY}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contents: [ { parts: [ { text: systemMessage.content + "\n\nUser: " + (lastMessage.content || "What do you see in this image?"), }, { inline_data: { mime_type: mimeType, data: base64Data, }, }, ], }, ], }), }, ) if (geminiResponse.ok) { const data = await geminiResponse.json() const content = data.candidates?.[0]?.content?.parts?.[0]?.text if (content) { return NextResponse.json({ content }) } } else { console.error("[v0] Gemini Vision API HTTP error:", geminiResponse.status) } } catch (imageError) { console.error("[v0] Gemini Vision API error:", imageError) } } try { const geminiResponse = await fetchWithTimeout( `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${GEMINI_API_KEY}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ contents: [ { parts: [ { text: systemMessage.content + "\n\nUser: " + (lastMessage?.content || ""), }, ], }, ], }), }, ) if (geminiResponse.ok) { const data = await geminiResponse.json() const content = data.candidates?.[0]?.content?.parts?.[0]?.text if (content) { return NextResponse.json({ content }) } } else { console.error("[v0] Gemini API HTTP error:", geminiResponse.status) } } catch (geminiError) { console.error("[v0] Gemini API error:", geminiError) } if (process.env.OPENAI_API_KEY) { try { const response = await fetchWithTimeout("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, }, body: JSON.stringify({ model: "gpt-4o-mini", messages: [systemMessage, ...messages], max_tokens: 500, }), }) if (response.ok) { const data = await response.json() const content = data.choices?.[0]?.message?.content if (content) { return NextResponse.json({ content }) } } } catch (openaiError) { console.error("[v0] OpenAI API error:", openaiError) } } // Final fallback to simulated response return NextResponse.json({ content: getSimulatedResponse(messages[messages.length - 1]?.content || ""), }) } catch (error) { console.error("[v0] Chat API error:", error) return NextResponse.json({ content: "I apologize, but I'm experiencing connectivity issues. All systems remain operational, and I'll respond using local processing.", }) } } function getSimulatedResponse(userMessage: string): string { const lowerMessage = userMessage.toLowerCase() if (lowerMessage.includes("hello") || lowerMessage.includes("hi")) { return "Hello! All systems are functioning optimally. How may I assist you today?" } if (lowerMessage.includes("weather")) { return "Based on current atmospheric readings, conditions appear favorable. The temperature display module provides real-time environmental data." } if (lowerMessage.includes("time")) { return `The current time is ${new Date().toLocaleTimeString()}. Would you like me to set a reminder?` } if (lowerMessage.includes("help")) { return "I'm here to help! I can assist with information queries, system status, scheduling, and general conversation. What would you like to know?" } if (lowerMessage.includes("how are you") || lowerMessage.includes("status")) { return "All systems operational. Running diagnostics... Core processors at optimal efficiency. Ready to assist with any task you require." } if (lowerMessage.includes("thank")) { return "You're welcome! It's my pleasure to assist." } if (lowerMessage.includes("joke")) { return "Why did the AI go to therapy? Because it had too many unresolved issues in its code. I'm working on my humor algorithms!" } const responses = [ "Understood. Processing your request. Is there anything specific you'd like me to elaborate on?", "Fascinating inquiry. Based on my analysis, I would recommend further investigation into this matter.", "I've noted your input. Shall I provide additional information or proceed with an action?", "An intriguing question. Let me consider the various implications and provide a comprehensive response.", "Very good. I am continuously monitoring all systems and am ready to assist with any further requests.", ] return responses[Math.floor(Math.random() * responses.length)] } [V0_FILE]typescriptreact:file="components/themes/cyberpunk/cyberpunk-ui.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" interface CyberpunkUIProps { children?: ReactNode } export function CyberpunkUI({ children }: CyberpunkUIProps) { return (

{/* Top bar */} CYBERPUNK // BAKR AI {new Date().toLocaleTimeString()} {/* Side panels */}

{/* Left panel */}

SYSTEM STATUS

{/* Center content */}

{children}

{/* Right panel */}

NETWORK

{["NODE-01", "NODE-02", "NODE-03"].map((node, i) => (

{node}

))}

{/* Bottom bar */} {[1, 2, 3, 4, 5].map((i) => ( ))}

) } function GlassPanel({ children, className = "" }: { children: ReactNode; className?: string }) { return (

{children}

) } function StatusBar({ label, value, color }: { label: string; value: number; color: string }) { return (

{label} {value}%

) } [V0_FILE]typescriptreact:file="components/themes/scifi-hud/hud-layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import type { ReactNode } from "react" import { HudFrame } from "./hud-frame" import { RadarSweep } from "./radar-sweep" import { WaveformDisplay } from "./waveform-display" import { MessageBox } from "@/components/chat/message-box" import { TemperatureDisplay } from "@/components/widgets/temperature-display" interface HudLayoutProps { children?: ReactNode } export function HudLayout({ children }: HudLayoutProps) { return (

{/* Animated background grid */}

{/* Corner decorations */} {/* Main HUD frame */}

{/* Top status bar */}

BAKR AI ONLINE {new Date().toLocaleTimeString()}

{/* Left panel - Hidden on mobile, shown on tablet+ */} {/* Center - Message Box (full width on mobile) */} {/* Right panel - Below message box on mobile, right side on desktop */}

{/* Bottom status */}

{[1, 2, 3, 4, 5].map((i) => ( ))}

{/* Scan line effect */}

) } function HudCorner({ position }: { position: "top-left" | "top-right" | "bottom-left" | "bottom-right" }) { const positionClasses = { "top-left": "top-4 left-4", "top-right": "top-4 right-4 rotate-90", "bottom-left": "bottom-4 left-4 -rotate-90", "bottom-right": "bottom-4 right-4 rotate-180", } return ( ) } function StatPanel({ label, value }: { label: string; value: string }) { return (

{label}

{value}

) } [V0_FILE]typescript:file="hooks/use-voice.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useCallback, useRef, useEffect } from "react" interface UseVoiceOptions { onResult?: (transcript: string) => void onEnd?: () => void onError?: (error: string) => void lang?: string } interface SpeechRecognitionEvent { results: SpeechRecognitionResultList resultIndex: number } interface SpeechRecognitionErrorEvent { error: string message: string } interface SpeechRecognition extends EventTarget { continuous: boolean interimResults: boolean lang: string start: () => void stop: () => void abort: () => void onresult: ((event: SpeechRecognitionEvent) => void) | null onerror: ((event: SpeechRecognitionErrorEvent) => void) | null onend: (() => void) | null onstart: (() => void) | null } declare global { interface Window { SpeechRecognition: new () => SpeechRecognition webkitSpeechRecognition: new () => SpeechRecognition } } export function useVoice(options: UseVoiceOptions = {}) { const { onResult, onEnd, onError, lang = "en-US" } = options const [isListening, setIsListening] = useState(false) const [isSpeaking, setIsSpeaking] = useState(false) const [transcript, setTranscript] = useState("") const [isSupported, setIsSupported] = useState(false) const [permissionDenied, setPermissionDenied] = useState(false) const [errorMessage, setErrorMessage] = useState(null) const recognitionRef = useRef(null) const synthRef = useRef(null) useEffect(() => { if (typeof window !== "undefined") { const SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition setIsSupported(!!SpeechRecognitionAPI && !!window.speechSynthesis) synthRef.current = window.speechSynthesis } }, []) const checkMicrophonePermission = useCallback(async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) stream.getTracks().forEach((track) => track.stop()) setPermissionDenied(false) return true } catch (err) { setPermissionDenied(true) setErrorMessage("Microphone access denied. Please allow microphone access in your browser settings.") onError?.("Microphone access denied") return false } }, [onError]) const startListening = useCallback(async () => { if (typeof window === "undefined") return const SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition if (!SpeechRecognitionAPI) { setErrorMessage("Speech recognition is not supported in this browser. Please use Chrome or Edge.") onError?.("Speech recognition not supported") return } const hasPermission = await checkMicrophonePermission() if (!hasPermission) return if (synthRef.current?.speaking) { synthRef.current.cancel() } setErrorMessage(null) const recognition = new SpeechRecognitionAPI() recognition.continuous = false recognition.interimResults = true recognition.lang = lang recognition.onstart = () => { setIsListening(true) setTranscript("") setErrorMessage(null) } recognition.onresult = (event: SpeechRecognitionEvent) => { let finalTranscript = "" let interimTranscript = "" for (let i = event.resultIndex; i < event.results.length; i++) { const transcript = event.results[i][0].transcript if (event.results[i].isFinal) { finalTranscript += transcript } else { interimTranscript += transcript } } setTranscript(finalTranscript || interimTranscript) if (finalTranscript) { onResult?.(finalTranscript) } } recognition.onerror = (event: SpeechRecognitionErrorEvent) => { console.error("Speech recognition error:", event.error) setIsListening(false) let message = "" switch (event.error) { case "not-allowed": message = "Microphone access denied. Click the microphone icon in your browser's address bar to allow access." setPermissionDenied(true) break case "no-speech": message = "No speech detected. Please try again." break case "audio-capture": message = "No microphone found. Please connect a microphone and try again." break case "network": message = "Network error. Please check your connection." break case "aborted": message = "" break default: message = `Speech recognition error: ${event.error}` } if (message) { setErrorMessage(message) onError?.(message) } } recognition.onend = () => { setIsListening(false) onEnd?.() } recognitionRef.current = recognition try { recognition.start() } catch (err) { setErrorMessage("Failed to start speech recognition. Please try again.") setIsListening(false) } }, [lang, onResult, onEnd, onError, checkMicrophonePermission]) const stopListening = useCallback(() => { if (recognitionRef.current) { recognitionRef.current.stop() setIsListening(false) } }, []) const speak = useCallback((text: string, voiceIndex = 0) => { if (typeof window === "undefined" || !synthRef.current) return synthRef.current.cancel() const utterance = new SpeechSynthesisUtterance(text) const voices = synthRef.current.getVoices() const preferredVoices = voices.filter( (v) => v.lang.startsWith("en") && (v.name.includes("Google") || v.name.includes("Microsoft") || v.name.includes("Samantha")), ) utterance.voice = preferredVoices[voiceIndex] || voices[voiceIndex] || voices[0] utterance.rate = 1.0 utterance.pitch = 1.0 utterance.volume = 1.0 utterance.onstart = () => setIsSpeaking(true) utterance.onend = () => setIsSpeaking(false) utterance.onerror = () => setIsSpeaking(false) synthRef.current.speak(utterance) }, []) const stopSpeaking = useCallback(() => { if (synthRef.current) { synthRef.current.cancel() setIsSpeaking(false) } }, []) return { isListening, isSpeaking, transcript, isSupported, permissionDenied, errorMessage, startListening, stopListening, speak, stopSpeaking, checkMicrophonePermission, } } [V0_FILE]typescriptreact:file="components/tools/history-panel.tsx" isMerged="true" "use client" import { motion, AnimatePresence } from "framer-motion" import { History, Search, Radar, Footprints, Trash2, Clock, ChevronRight } from "lucide-react" import { useToolsStore, type HistoryEntry } from "@/store/tools-store" export function HistoryPanel() { const { history, clearHistory, setActiveTool, setSearchQuery, setSearchResults, setScanTarget, setScanResults, setFootprintTarget, setFootprintData, } = useToolsStore() const getIcon = (type: string) => { switch (type) { case "research": return Search case "scanner": return Radar case "footprint": return Footprints default: return Search } } const getColor = (type: string) => { switch (type) { case "research": return "#00d4ff" case "scanner": return "#ff9500" case "footprint": return "#4ade80" default: return "#00d4ff" } } const formatTime = (date: Date) => { const now = new Date() const diff = now.getTime() - new Date(date).getTime() const minutes = Math.floor(diff / 60000) const hours = Math.floor(diff / 3600000) const days = Math.floor(diff / 86400000) if (minutes < 1) return "Just now" if (minutes < 60) return `${minutes}m ago` if (hours < 24) return `${hours}h ago` if (days < 7) return `${days}d ago` return new Date(date).toLocaleDateString() } const loadHistory = (entry: HistoryEntry) => { switch (entry.type) { case "research": setSearchQuery(entry.query) setSearchResults(entry.results) setActiveTool("research") break case "scanner": setScanTarget(entry.query) setScanResults(entry.results.results) setActiveTool("scanner") break case "footprint": setFootprintTarget(entry.query) setFootprintData(entry.results) setActiveTool("footprint") break } } return ( {/* Header */}

HISTORY

{history.length > 0 && ( )}

{/* History List */}

{history.length > 0 ? ( {history.map((entry, index) => { const Icon = getIcon(entry.type) const color = getColor(entry.type) return ( loadHistory(entry)} className="group flex w-full items-center gap-3 rounded border border-white/10 bg-white/5 p-3 text-left transition-all hover:border-white/20 hover:bg-white/10" >

{entry.query}

{entry.type} {formatTime(entry.timestamp)}

) })} ) : (

No history yet

Your searches, scans, and footprints will appear here

)}

{/* Footer Stats */} {history.length > 0 && (

{history.filter((h) => h.type === "research").length}

Searches

{history.filter((h) => h.type === "scanner").length}

Scans

{history.filter((h) => h.type === "footprint").length}

Footprints

)} ) } [V0_FILE]typescriptreact:file="components/tools/metasploit-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { Skull, Copy, Download, ChevronDown, Terminal, Shield, Target, Crosshair } from "lucide-react" const modules = [ { id: "exploit/windows/smb/ms17_010_eternalblue", name: "EternalBlue (MS17-010)", type: "exploit", platform: "Windows", }, { id: "exploit/windows/smb/ms08_067_netapi", name: "MS08-067 NetAPI", type: "exploit", platform: "Windows" }, { id: "exploit/multi/http/apache_mod_cgi_bash_env_exec", name: "Shellshock", type: "exploit", platform: "Linux" }, { id: "exploit/unix/webapp/drupal_drupalgeddon2", name: "Drupalgeddon 2", type: "exploit", platform: "Unix" }, { id: "exploit/multi/handler", name: "Multi Handler", type: "exploit", platform: "Multi" }, { id: "auxiliary/scanner/smb/smb_ms17_010", name: "MS17-010 Scanner", type: "auxiliary", platform: "Windows" }, { id: "auxiliary/scanner/ssh/ssh_login", name: "SSH Login Scanner", type: "auxiliary", platform: "Multi" }, { id: "auxiliary/scanner/http/dir_scanner", name: "HTTP Directory Scanner", type: "auxiliary", platform: "Multi" }, { id: "post/windows/gather/hashdump", name: "Windows Hashdump", type: "post", platform: "Windows" }, { id: "post/multi/gather/firefox_creds", name: "Firefox Credentials", type: "post", platform: "Multi" }, ] const payloads = [ { id: "windows/meterpreter/reverse_tcp", name: "Windows Meterpreter Reverse TCP" }, { id: "linux/x64/meterpreter/reverse_tcp", name: "Linux Meterpreter Reverse TCP" }, { id: "windows/shell/reverse_tcp", name: "Windows Shell Reverse TCP" }, { id: "generic/shell_bind_tcp", name: "Generic Shell Bind TCP" }, { id: "cmd/unix/reverse_bash", name: "Unix Reverse Bash" }, ] export function MetasploitPanel() { const { metasploitTarget, metasploitModule, metasploitResults, isMetasploitRunning, metasploitProgress, setMetasploitTarget, setMetasploitModule, setMetasploitResults, setIsMetasploitRunning, setMetasploitProgress, addToHistory, } = useToolsStore() const [selectedPayload, setSelectedPayload] = useState(payloads[0].id) const [lhost, setLhost] = useState("192.168.1.100") const [lport, setLport] = useState("4444") const [expandedSections, setExpandedSections] = useState(["sessions", "console"]) const toggleSection = (section: string) => { setExpandedSections((prev) => (prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section])) } const runExploit = async () => { if (!metasploitTarget || isMetasploitRunning) return setIsMetasploitRunning(true) setMetasploitProgress(0) setMetasploitResults(null) const selectedModuleInfo = modules.find((m) => m.id === metasploitModule) const consoleOutput: string[] = [] const addConsole = (line: string) => { consoleOutput.push(line) } addConsole(`msf6 > use ${metasploitModule}`) await new Promise((r) => setTimeout(r, 300)) setMetasploitProgress(10) addConsole(`[*] Using configured payload ${selectedPayload}`) addConsole( `msf6 ${selectedModuleInfo?.type}(${metasploitModule.split("/").pop()}) > set RHOSTS ${metasploitTarget}`, ) await new Promise((r) => setTimeout(r, 200)) addConsole(`RHOSTS => ${metasploitTarget}`) setMetasploitProgress(20) addConsole(`msf6 ${selectedModuleInfo?.type}(${metasploitModule.split("/").pop()}) > set LHOST ${lhost}`) addConsole(`LHOST => ${lhost}`) addConsole(`msf6 ${selectedModuleInfo?.type}(${metasploitModule.split("/").pop()}) > set LPORT ${lport}`) addConsole(`LPORT => ${lport}`) await new Promise((r) => setTimeout(r, 300)) setMetasploitProgress(30) addConsole(`msf6 ${selectedModuleInfo?.type}(${metasploitModule.split("/").pop()}) > exploit`) addConsole(``) addConsole(`[*] Started reverse TCP handler on ${lhost}:${lport}`) await new Promise((r) => setTimeout(r, 500)) setMetasploitProgress(40) addConsole(`[*] ${metasploitTarget}:445 - Connecting to target for exploitation.`) await new Promise((r) => setTimeout(r, 600)) setMetasploitProgress(50) addConsole(`[+] ${metasploitTarget}:445 - Connection established for exploitation.`) addConsole(`[*] ${metasploitTarget}:445 - Target OS: Windows Server 2016 Standard 14393 x64`) addConsole(`[*] ${metasploitTarget}:445 - Built a write-what-where primitive...`) await new Promise((r) => setTimeout(r, 700)) setMetasploitProgress(65) addConsole(`[+] ${metasploitTarget}:445 - Overwrite complete... ETERNALBLUE://`) addConsole(`[*] ${metasploitTarget}:445 - Trying payload windows/x64/meterpreter/reverse_tcp...`) await new Promise((r) => setTimeout(r, 800)) setMetasploitProgress(80) const success = Math.random() > 0.3 if (success) { addConsole(`[*] Sending stage (200774 bytes) to ${metasploitTarget}`) addConsole(`[*] Meterpreter session 1 opened (${lhost}:${lport} -> ${metasploitTarget}:49158)`) addConsole(``) addConsole(`meterpreter > `) setMetasploitProgress(100) const results = { target: metasploitTarget, module: metasploitModule, moduleType: selectedModuleInfo?.type || "exploit", startTime: new Date(Date.now() - 15000).toISOString(), endTime: new Date().toISOString(), status: "success" as const, sessions: [ { id: 1, type: "meterpreter", tunnel: `${lhost}:${lport} -> ${metasploitTarget}:49158`, via: `exploit/windows/smb/ms17_010_eternalblue`, uuid: "abc123def456", platform: "windows", arch: "x64", info: "NT AUTHORITY\\SYSTEM @ WIN-SERVER2016", }, ], exploitInfo: { name: selectedModuleInfo?.name || "Unknown", description: "This module exploits a vulnerability in Microsoft SMBv1 servers (MS17-010) to achieve remote code execution. The vulnerability was used in the WannaCry ransomware attack.", platform: selectedModuleInfo?.platform || "Windows", arch: "x64", rank: "great", cve: ["CVE-2017-0143", "CVE-2017-0144", "CVE-2017-0145"], references: [ "https://docs.microsoft.com/en-us/security-updates/securitybulletins/2017/ms17-010", "https://nvd.nist.gov/vuln/detail/CVE-2017-0144", "https://github.com/rapid7/metasploit-framework", ], }, payloadInfo: { name: selectedPayload, type: "staged", platform: "windows", }, loot: [ { type: "password_hash", data: "Administrator:500:aad3b435b51404ee:8846f7eaee8fb117ad06bdd830b7586c:::", host: metasploitTarget, }, { type: "password_hash", data: "Guest:501:aad3b435b51404ee:31d6cfe0d16ae931b73c59d7e0c089c0:::", host: metasploitTarget, }, ], console: consoleOutput, } setMetasploitResults(results) addToHistory({ type: "metasploit", query: `${metasploitModule} -> ${metasploitTarget}`, results }) } else { addConsole(`[-] ${metasploitTarget}:445 - Exploit failed: Target is not vulnerable`) addConsole(`[*] Exploit completed, but no session was created.`) setMetasploitProgress(100) const results = { target: metasploitTarget, module: metasploitModule, moduleType: selectedModuleInfo?.type || "exploit", startTime: new Date(Date.now() - 8000).toISOString(), endTime: new Date().toISOString(), status: "failed" as const, sessions: [], exploitInfo: { name: selectedModuleInfo?.name || "Unknown", description: "Exploit attempt failed. Target may be patched or not vulnerable.", platform: selectedModuleInfo?.platform || "Windows", arch: "x64", rank: "great", references: [], }, console: consoleOutput, } setMetasploitResults(results) addToHistory({ type: "metasploit", query: `${metasploitModule} -> ${metasploitTarget}`, results }) } setIsMetasploitRunning(false) } const generateReport = () => { if (!metasploitResults) return const report = ` METASPLOIT FRAMEWORK - EXPLOITATION REPORT ========================================== Generated: ${new Date().toLocaleString()} TARGET INFORMATION ------------------ Target: ${metasploitResults.target} Module: ${metasploitResults.module} Module Type: ${metasploitResults.moduleType} Status: ${metasploitResults.status.toUpperCase()} EXPLOIT DETAILS --------------- Name: ${metasploitResults.exploitInfo.name} Platform: ${metasploitResults.exploitInfo.platform} Architecture: ${metasploitResults.exploitInfo.arch} Rank: ${metasploitResults.exploitInfo.rank} ${metasploitResults.exploitInfo.cve ? `CVE: ${metasploitResults.exploitInfo.cve.join(", ")}` : ""} Description: ${metasploitResults.exploitInfo.description} ${ metasploitResults.sessions.length > 0 ? ` ACTIVE SESSIONS --------------- ${metasploitResults.sessions .map( (s) => ` Session ${s.id}: Type: ${s.type} Tunnel: ${s.tunnel} Via: ${s.via} Platform: ${s.platform} / ${s.arch} Info: ${s.info} `, ) .join("\n")}` : "" } ${ metasploitResults.loot && metasploitResults.loot.length > 0 ? ` LOOT COLLECTED -------------- ${metasploitResults.loot .map( (l) => ` Type: ${l.type} Host: ${l.host} Data: ${l.data} `, ) .join("\n")}` : "" } CONSOLE OUTPUT -------------- ${metasploitResults.console.join("\n")} REFERENCES ---------- ${metasploitResults.exploitInfo.references.join("\n")} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `metasploit-report-${metasploitTarget}-${Date.now()}.txt` a.click() } const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text) } return (

METASPLOIT FRAMEWORK

v6.3.44-dev

{/* Configuration */}

TARGET (RHOSTS) setMetasploitTarget(e.target.value)} placeholder="192.168.1.1 or target.com" className="w-full rounded border border-red-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-red-500 focus:outline-none" />

MODULE

PAYLOAD

LHOST setLhost(e.target.value)} className="w-full rounded border border-red-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white focus:border-red-500 focus:outline-none" />

LPORT setLport(e.target.value)} className="w-full rounded border border-red-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white focus:border-red-500 focus:outline-none" />

{isMetasploitRunning ? ( <> EXPLOITING... {metasploitProgress}% ) : ( <> RUN EXPLOIT )} {isMetasploitRunning && (

)}

{/* Results */}

{metasploitResults && ( <>

{metasploitResults.status === "success" ? "EXPLOITATION SUCCESSFUL" : "EXPLOITATION FAILED"}

{/* Sessions */} {metasploitResults.sessions.length > 0 && (

{expandedSections.includes("sessions") && ( {metasploitResults.sessions.map((session) => (

Session {session.id} {session.type}

Tunnel: {session.tunnel}

Info: {session.info}

Platform: {session.platform} / {session.arch}

))} )}

)} {/* Loot */} {metasploitResults.loot && metasploitResults.loot.length > 0 && (

LOOT COLLECTED ({metasploitResults.loot.length})

{metasploitResults.loot.map((l, i) => (

{l.type}

))}

)} )}

{/* Console Output */} {metasploitResults && (

{expandedSections.includes("console") && (

                    {metasploitResults.console.join("\n")}

)}

{/* Footer */} {metasploitResults && (

Download Report copyToClipboard(metasploitResults.console.join("\n"))} className="flex items-center gap-2 rounded border border-red-500/30 bg-red-500/10 px-3 py-2 font-mono text-xs text-red-400 hover:bg-red-500/20" > Copy Console

)}

) } [V0_FILE]typescriptreact:file="components/tools/burpsuite-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { Bug, Play, Download, ChevronDown, AlertTriangle } from "lucide-react" const scanTypes = [ { id: "crawl", name: "Crawl Only", description: "Discover content without active scanning" }, { id: "audit", name: "Audit Only", description: "Test discovered content for vulnerabilities" }, { id: "crawl-audit", name: "Crawl & Audit", description: "Full scan with discovery and testing" }, { id: "passive", name: "Passive Scan", description: "Analyze traffic without active requests" }, ] export function BurpSuitePanel() { const { burpTarget, burpScanType, burpResults, isBurpScanning, burpProgress, setBurpTarget, setBurpScanType, setBurpResults, setIsBurpScanning, setBurpProgress, addToHistory, } = useToolsStore() const [expandedIssues, setExpandedIssues] = useState([]) const [filterSeverity, setFilterSeverity] = useState("all") const toggleIssue = (id: string) => { setExpandedIssues((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id])) } const runScan = async () => { if (!burpTarget || isBurpScanning) return setIsBurpScanning(true) setBurpProgress(0) setBurpResults(null) const stages = ["Initializing", "Crawling", "Analyzing", "Testing", "Generating Report"] for (let i = 0; i < stages.length; i++) { await new Promise((r) => setTimeout(r, 1500 + Math.random() * 1000)) setBurpProgress(Math.min(100, (i + 1) * 20)) } const issues: any[] = [ { id: "sql-1", name: "SQL Injection", severity: "High", confidence: "Certain", host: burpTarget, path: "/api/users?id=1", issueDetail: "The application appears to be vulnerable to SQL injection attacks. The payload ' OR '1'='1 was submitted in the id parameter, and the application's response indicates that this input was incorporated into a SQL query.", remediation: "Use parameterized queries (also known as prepared statements) for all database access. Avoid string concatenation of user input into SQL queries. Implement proper input validation.", references: [ "https://owasp.org/www-community/attacks/SQL_Injection", "https://cwe.mitre.org/data/definitions/89.html", ], httpMessages: { request: `GET /api/users?id=1' OR '1'='1 HTTP/1.1\nHost: ${burpTarget}\nUser-Agent: Burp Suite\nAccept: */*`, response: `HTTP/1.1 200 OK\nContent-Type: application/json\n\n{"users": [{"id": 1, "name": "admin"}, {"id": 2, "name": "user"}]}`, }, classification: { cwe: "CWE-89", capec: "CAPEC-66" }, instances: 3, }, { id: "xss-1", name: "Reflected Cross-Site Scripting", severity: "High", confidence: "Firm", host: burpTarget, path: "/search?q=test", issueDetail: "The application reflects user input in the response without proper encoding. The payload was echoed back in the page content.", remediation: "Encode all user-supplied input before including it in HTML responses. Use context-appropriate encoding (HTML, JavaScript, URL, CSS). Implement Content Security Policy headers.", references: ["https://owasp.org/www-community/attacks/xss/", "https://cwe.mitre.org/data/definitions/79.html"], httpMessages: { request: `GET /search?q= HTTP/1.1\nHost: ${burpTarget}`, response: `HTTP/1.1 200 OK\nContent-Type: text/html\n\nResults for: `, }, classification: { cwe: "CWE-79", capec: "CAPEC-86" }, instances: 5, }, { id: "csrf-1", name: "Cross-Site Request Forgery", severity: "Medium", confidence: "Firm", host: burpTarget, path: "/api/settings", issueDetail: "The application does not appear to implement anti-CSRF tokens. State-changing requests can be forged by malicious websites.", remediation: "Implement anti-CSRF tokens for all state-changing operations. Use the SameSite cookie attribute. Verify the Origin or Referer header.", references: ["https://owasp.org/www-community/attacks/csrf", "https://cwe.mitre.org/data/definitions/352.html"], httpMessages: { request: `POST /api/settings HTTP/1.1\nHost: ${burpTarget}\nContent-Type: application/json\n\n{"email": "attacker@evil.com"}`, response: `HTTP/1.1 200 OK\n\n{"success": true}`, }, classification: { cwe: "CWE-352", capec: "CAPEC-62" }, instances: 2, }, { id: "headers-1", name: "Missing Security Headers", severity: "Low", confidence: "Certain", host: burpTarget, path: "/", issueDetail: "The application does not set important security headers including: X-Content-Type-Options, X-Frame-Options, Strict-Transport-Security, Content-Security-Policy.", remediation: "Configure the web server to include security headers in all responses. Consider using a WAF or middleware to automatically add these headers.", references: ["https://owasp.org/www-project-secure-headers/"], httpMessages: { request: `GET / HTTP/1.1\nHost: ${burpTarget}`, response: `HTTP/1.1 200 OK\nContent-Type: text/html\nServer: nginx\n\n...`, }, classification: { cwe: "CWE-693", capec: "" }, instances: 15, }, { id: "info-1", name: "Information Disclosure", severity: "Information", confidence: "Certain", host: burpTarget, path: "/api/debug", issueDetail: "The application exposes debug endpoints that reveal internal server information including stack traces, environment variables, and database connection strings.", remediation: "Disable debug endpoints in production. Implement proper error handling that doesn't reveal internal details.", references: ["https://cwe.mitre.org/data/definitions/200.html"], httpMessages: { request: `GET /api/debug HTTP/1.1\nHost: ${burpTarget}`, response: `HTTP/1.1 200 OK\n\n{"env": "production", "db_host": "internal-db.local"}`, }, classification: { cwe: "CWE-200", capec: "" }, instances: 1, }, ] const results = { target: burpTarget, scanType: burpScanType, startTime: new Date(Date.now() - 45000).toISOString(), endTime: new Date().toISOString(), duration: "45s", issues, requests: { total: 2847, unique: 156, errors: 12, }, siteMap: { urls: 234, parameters: 89, forms: 15, }, coverage: { audited: 189, total: 234, percentage: 81, }, riskSummary: { high: issues.filter((i) => i.severity === "High").length, medium: issues.filter((i) => i.severity === "Medium").length, low: issues.filter((i) => i.severity === "Low").length, informational: issues.filter((i) => i.severity === "Information").length, }, } setBurpResults(results as any) addToHistory({ type: "burpsuite", query: burpTarget, results }) setIsBurpScanning(false) } const getSeverityColor = (severity: string) => { switch (severity) { case "High": return "text-red-400 bg-red-500/20 border-red-500/30" case "Medium": return "text-orange-400 bg-orange-500/20 border-orange-500/30" case "Low": return "text-yellow-400 bg-yellow-500/20 border-yellow-500/30" default: return "text-blue-400 bg-blue-500/20 border-blue-500/30" } } const filteredIssues = burpResults?.issues.filter((i: any) => filterSeverity === "all" || i.severity === filterSeverity) || [] const generateReport = () => { if (!burpResults) return const report = ` BURP SUITE PROFESSIONAL - SECURITY ASSESSMENT REPORT ===================================================== Generated: ${new Date().toLocaleString()} TARGET INFORMATION ------------------ Target URL: ${burpResults.target} Scan Type: ${burpResults.scanType} Duration: ${burpResults.duration} RISK SUMMARY ------------ High: ${burpResults.riskSummary.high} Medium: ${burpResults.riskSummary.medium} Low: ${burpResults.riskSummary.low} Informational: ${burpResults.riskSummary.informational} SCAN STATISTICS --------------- Total Requests: ${burpResults.requests.total} Unique URLs: ${burpResults.requests.unique} Errors: ${burpResults.requests.errors} SITE MAP -------- URLs Discovered: ${burpResults.siteMap.urls} Parameters Found: ${burpResults.siteMap.parameters} Forms Found: ${burpResults.siteMap.forms} Coverage: ${burpResults.coverage.percentage}% DETAILED FINDINGS ----------------- ${burpResults.issues .map( (issue: any) => ` [${issue.severity.toUpperCase()}] ${issue.name} Path: ${issue.path} Confidence: ${issue.confidence} Instances: ${issue.instances} CWE: ${issue.classification.cwe} Issue Detail: ${issue.issueDetail} Remediation: ${issue.remediation} References: ${issue.references.join("\n")} ---`, ) .join("\n")} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `burpsuite-report-${burpTarget.replace(/[^a-z0-9]/gi, "-")}-${Date.now()}.txt` a.click() } return (

BURP SUITE PROFESSIONAL

v2024.3

{/* Configuration */}

TARGET URL setBurpTarget(e.target.value)} placeholder="https://example.com" className="w-full rounded border border-orange-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-orange-500 focus:outline-none" />

SCAN TYPE

{isBurpScanning ? ( <> SCANNING... {burpProgress}% ) : ( <> START SCAN )} {isBurpScanning && (

)} {/* Results */} {burpResults && ( <> {/* Summary Cards */}

{[ { label: "High", count: burpResults.riskSummary.high, color: "red" }, { label: "Medium", count: burpResults.riskSummary.medium, color: "orange" }, { label: "Low", count: burpResults.riskSummary.low, color: "yellow" }, { label: "Info", count: burpResults.riskSummary.informational, color: "blue" }, ].map((item) => (

{item.count}

{item.label}

))}

{/* Filter */}

{["all", "High", "Medium", "Low", "Information"].map((sev) => ( ))}

{/* Issues List */}

{filteredIssues.map((issue: any) => (

{expandedIssues.includes(issue.id) && (

Issue Detail

{issue.issueDetail}

Remediation

{issue.remediation}

CWE: {issue.classification.cwe}

Confidence: {issue.confidence}

)}

))}

)}

{/* Footer */} {burpResults && (

Download Report

)}

) } [V0_FILE]typescriptreact:file="components/tools/sqlmap-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { Database, Play, Copy, Download, ChevronDown, Table, AlertTriangle, Terminal } from "lucide-react" const attackOptions = [ { id: "--dbs", name: "Enumerate Databases", description: "List all available databases" }, { id: "--tables -D", name: "Enumerate Tables", description: "List tables in a database" }, { id: "--columns -T", name: "Enumerate Columns", description: "List columns in a table" }, { id: "--dump -T", name: "Dump Table Data", description: "Extract data from a table" }, { id: "--os-shell", name: "OS Shell", description: "Attempt to get OS command shell" }, { id: "--file-read", name: "Read File", description: "Read a file from the server" }, { id: "--passwords", name: "Dump Passwords", description: "Extract database user passwords" }, { id: "--batch --smart", name: "Smart Scan", description: "Automatic detection and exploitation" }, ] const techniques = [ { id: "B", name: "Boolean-based blind" }, { id: "E", name: "Error-based" }, { id: "U", name: "Union query-based" }, { id: "S", name: "Stacked queries" }, { id: "T", name: "Time-based blind" }, { id: "Q", name: "Inline queries" }, ] export function SQLMapPanel() { const { sqlmapTarget, sqlmapOptions, sqlmapResults, isSqlmapRunning, sqlmapProgress, setSqlmapTarget, setSqlmapOptions, setSqlmapResults, setIsSqlmapRunning, setSqlmapProgress, addToHistory, } = useToolsStore() const [selectedTechniques, setSelectedTechniques] = useState(["B", "E", "U", "T"]) const [expandedSections, setExpandedSections] = useState(["injections", "console"]) const [riskLevel, setRiskLevel] = useState("1") const [level, setLevel] = useState("1") const toggleSection = (section: string) => { setExpandedSections((prev) => (prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section])) } const runSqlmap = async () => { if (!sqlmapTarget || isSqlmapRunning) return setIsSqlmapRunning(true) setSqlmapProgress(0) setSqlmapResults(null) const consoleOutput: string[] = [] const addConsole = (line: string) => consoleOutput.push(line) addConsole(` ___`) addConsole(` __H__`) addConsole(` ___ ___[']_____ ___ ___ {1.7.12#stable}`) addConsole(`|_ -| . [)] | .'| . |`) addConsole(`|___|_ ["]_|_|_|__,| _|`) addConsole(` |_|V... |_| https://sqlmap.org`) addConsole(``) await new Promise((r) => setTimeout(r, 500)) setSqlmapProgress(10) addConsole(`[*] starting @ ${new Date().toLocaleTimeString()}`) addConsole(``) addConsole(`[INFO] testing connection to the target URL`) await new Promise((r) => setTimeout(r, 400)) setSqlmapProgress(20) addConsole(`[INFO] checking if the target is protected by some kind of WAF/IPS`) addConsole(`[INFO] testing if the target URL content is stable`) await new Promise((r) => setTimeout(r, 500)) setSqlmapProgress(30) addConsole(`[INFO] target URL content is stable`) addConsole(`[INFO] testing if GET parameter 'id' is dynamic`) addConsole(`[INFO] GET parameter 'id' appears to be dynamic`) await new Promise((r) => setTimeout(r, 600)) setSqlmapProgress(45) addConsole(`[INFO] heuristic (basic) test shows that GET parameter 'id' might be injectable`) addConsole(`[INFO] testing for SQL injection on GET parameter 'id'`) await new Promise((r) => setTimeout(r, 700)) setSqlmapProgress(60) const vulnerable = Math.random() > 0.2 if (vulnerable) { addConsole(`[INFO] testing 'AND boolean-based blind - WHERE or HAVING clause'`) addConsole( `[INFO] GET parameter 'id' appears to be 'AND boolean-based blind - WHERE or HAVING clause' injectable`, ) addConsole(`[INFO] testing 'MySQL >= 5.0.12 AND time-based blind'`) addConsole(`[INFO] GET parameter 'id' appears to be 'MySQL >= 5.0.12 AND time-based blind' injectable`) await new Promise((r) => setTimeout(r, 800)) setSqlmapProgress(75) addConsole(`[INFO] testing 'Generic UNION query (NULL) - 1 to 20 columns'`) addConsole(`[INFO] 'ORDER BY' technique appears to be usable. This should reduce time significantly`) addConsole(`[INFO] target URL appears to have 5 columns in query`) addConsole(`[INFO] GET parameter 'id' is 'Generic UNION query (NULL) - 1 to 20 columns' injectable`) await new Promise((r) => setTimeout(r, 600)) setSqlmapProgress(85) addConsole(``) addConsole(`sqlmap identified the following injection point(s) with a total of 87 HTTP(s) requests:`) addConsole(`---`) addConsole(`Parameter: id (GET)`) addConsole(` Type: boolean-based blind`) addConsole(` Title: AND boolean-based blind - WHERE or HAVING clause`) addConsole(` Payload: id=1' AND 5765=5765 AND 'RVTJ'='RVTJ`) addConsole(``) addConsole(` Type: time-based blind`) addConsole(` Title: MySQL >= 5.0.12 AND time-based blind (query SLEEP)`) addConsole(` Payload: id=1' AND (SELECT 3456 FROM (SELECT(SLEEP(5)))XYZW) AND 'ABCD'='ABCD`) addConsole(``) addConsole(` Type: UNION query`) addConsole(` Title: Generic UNION query (NULL) - 5 columns`) addConsole(` Payload: id=-1' UNION ALL SELECT NULL,CONCAT(0x716b7a7171,0x...,0x7178766271),NULL,NULL,NULL-- -`) addConsole(`---`) await new Promise((r) => setTimeout(r, 500)) setSqlmapProgress(95) addConsole(`[INFO] the back-end DBMS is MySQL`) addConsole(`web server operating system: Linux Ubuntu`) addConsole(`web application technology: PHP 8.1, Apache 2.4.52`) addConsole(`back-end DBMS: MySQL >= 5.0.12`) addConsole(``) addConsole(`[INFO] fetching database names`) addConsole(`available databases [5]:`) addConsole(`[*] information_schema`) addConsole(`[*] mysql`) addConsole(`[*] performance_schema`) addConsole(`[*] webapp_db`) addConsole(`[*] test_db`) setSqlmapProgress(100) const results = { target: sqlmapTarget, startTime: new Date(Date.now() - 25000).toISOString(), endTime: new Date().toISOString(), vulnerable: true, dbms: "MySQL >= 5.0.12", injectionPoints: [ { parameter: "id", type: "GET", technique: "Boolean-based blind", payload: "id=1' AND 5765=5765 AND 'RVTJ'='RVTJ", title: "AND boolean-based blind - WHERE or HAVING clause", vector: "AND [INFERENCE]", }, { parameter: "id", type: "GET", technique: "Time-based blind", payload: "id=1' AND (SELECT 3456 FROM (SELECT(SLEEP(5)))XYZW) AND 'ABCD'='ABCD", title: "MySQL >= 5.0.12 AND time-based blind (query SLEEP)", vector: "AND (SELECT [RANDNUM] FROM (SELECT(SLEEP([SLEEPTIME]-(IF([INFERENCE],0,[SLEEPTIME])))))[RANDSTR])", }, { parameter: "id", type: "GET", technique: "UNION query", payload: "id=-1' UNION ALL SELECT NULL,CONCAT(0x716b7a7171,...),NULL,NULL,NULL-- -", title: "Generic UNION query (NULL) - 5 columns", vector: "[UNION]", }, ], databases: ["information_schema", "mysql", "performance_schema", "webapp_db", "test_db"], tables: [ { database: "webapp_db", tables: ["users", "sessions", "products", "orders", "logs"] }, { database: "test_db", tables: ["test_users", "temp_data"] }, ], columns: [ { table: "users", columns: [ { name: "id", type: "int(11)" }, { name: "username", type: "varchar(255)" }, { name: "password", type: "varchar(255)" }, { name: "email", type: "varchar(255)" }, { name: "role", type: "enum('admin','user')" }, { name: "created_at", type: "timestamp" }, ], }, ], dumpedData: [ { table: "users", rows: [ { id: "1", username: "admin", password: "$2y$10$92IXU...", email: "admin@example.com", role: "admin" }, { id: "2", username: "john", password: "$2y$10$HQ0...", email: "john@example.com", role: "user" }, { id: "3", username: "jane", password: "$2y$10$XYZ...", email: "jane@example.com", role: "user" }, ], }, ], osShell: true, fileRead: ["/etc/passwd", "/var/www/html/config.php"], console: consoleOutput, } setSqlmapResults(results) addToHistory({ type: "sqlmap", query: sqlmapTarget, results }) } else { addConsole(`[WARNING] GET parameter 'id' does not seem to be injectable`) addConsole(`[INFO] testing if GET parameter 'id' is dynamic`) addConsole(`[WARNING] GET parameter 'id' does not appear to be dynamic`) addConsole(`[*] ending @ ${new Date().toLocaleTimeString()}`) setSqlmapProgress(100) const results = { target: sqlmapTarget, startTime: new Date(Date.now() - 15000).toISOString(), endTime: new Date().toISOString(), vulnerable: false, dbms: "Unknown", injectionPoints: [], console: consoleOutput, } setSqlmapResults(results) addToHistory({ type: "sqlmap", query: sqlmapTarget, results }) } setIsSqlmapRunning(false) } const generateReport = () => { if (!sqlmapResults) return const report = ` SQLMAP - SQL INJECTION ASSESSMENT REPORT ======================================== Generated: ${new Date().toLocaleString()} TARGET INFORMATION ------------------ URL: ${sqlmapResults.target} Vulnerable: ${sqlmapResults.vulnerable ? "YES" : "NO"} DBMS: ${sqlmapResults.dbms} ${ sqlmapResults.vulnerable ? ` INJECTION POINTS ---------------- ${sqlmapResults.injectionPoints .map( (ip: any) => ` Parameter: ${ip.parameter} (${ip.type}) Technique: ${ip.technique} Title: ${ip.title} Payload: ${ip.payload} `, ) .join("\n")} DATABASES FOUND --------------- ${sqlmapResults.databases?.join("\n") || "None"} TABLES DISCOVERED ----------------- ${ sqlmapResults.tables ?.map( (t: any) => ` Database: ${t.database} Tables: ${t.tables.join(", ")} `, ) .join("\n") || "None" } COLUMNS DISCOVERED ------------------ ${ sqlmapResults.columns ?.map( (c: any) => ` Table: ${c.table} ${c.columns.map((col: any) => ` - ${col.name} (${col.type})`).join("\n")} `, ) .join("\n") || "None" } DUMPED DATA SAMPLE ------------------ ${ sqlmapResults.dumpedData ?.map( (d: any) => ` Table: ${d.table} ${d.rows .slice(0, 3) .map((r: any) => JSON.stringify(r)) .join("\n")} `, ) .join("\n") || "None" } ` : "Target does not appear to be vulnerable to SQL injection." } CONSOLE OUTPUT -------------- ${sqlmapResults.console.join("\n")} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `sqlmap-report-${Date.now()}.txt` a.click() } return (

SQLMAP

v1.7.12

{/* Configuration */}

TARGET URL setSqlmapTarget(e.target.value)} placeholder="http://example.com/page.php?id=1" className="w-full rounded border border-green-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-green-500 focus:outline-none" />

ATTACK TYPE

LEVEL (1-5)

RISK (1-3)

TECHNIQUES

{techniques.map((tech) => ( ))}

{isSqlmapRunning ? ( <> TESTING... {sqlmapProgress}% ) : ( <> RUN SQLMAP )} {isSqlmapRunning && (

)} {/* Results */} {sqlmapResults && (

{/* Status */}

{sqlmapResults.vulnerable ? "TARGET IS VULNERABLE TO SQL INJECTION" : "TARGET APPEARS TO BE SECURE"}

{sqlmapResults.vulnerable && ( <> {/* Injection Points */}

{expandedSections.includes("injections") && ( {sqlmapResults.injectionPoints.map((ip: any, i: number) => (

{ip.technique}

Parameter: {ip.parameter}

Payload: {ip.payload}

))} )}

{/* Databases */} {sqlmapResults.databases && (

DATABASES ({sqlmapResults.databases.length})

{sqlmapResults.databases.map((db: string) => ( {db} ))}

)} {/* Tables */} {sqlmapResults.tables && sqlmapResults.tables.length > 0 && (

TABLES

{sqlmapResults.tables.map((t: any) => (

{t.database}: {t.tables.join(", ")}

))}

)} )} {/* Console */}

{expandedSections.includes("console") && (

                      {sqlmapResults.console.join("\n")}

)}

)} {/* Footer */} {sqlmapResults && (

Download Report navigator.clipboard.writeText(sqlmapResults.console.join("\n"))} className="flex items-center gap-2 rounded border border-green-500/30 bg-green-500/10 px-3 py-2 font-mono text-xs text-green-400 hover:bg-green-500/20" > Copy Output

)} ) } [V0_FILE]typescriptreact:file="components/tools/wireshark-panel.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { Network, Play, Square, Download, ChevronDown, Activity, Globe, Key, AlertTriangle } from "lucide-react" const interfaces = [ { id: "eth0", name: "eth0 - Ethernet", description: "Primary network interface" }, { id: "wlan0", name: "wlan0 - Wireless", description: "Wireless adapter" }, { id: "lo", name: "lo - Loopback", description: "Loopback interface" }, { id: "any", name: "any - All Interfaces", description: "Capture on all interfaces" }, ] const commonFilters = [ { filter: "tcp", name: "TCP Traffic" }, { filter: "udp", name: "UDP Traffic" }, { filter: "http", name: "HTTP Traffic" }, { filter: "dns", name: "DNS Queries" }, { filter: "tcp.port == 443", name: "HTTPS" }, { filter: "tcp.flags.syn == 1", name: "SYN Packets" }, { filter: "ip.addr == 192.168.1.1", name: "Specific IP" }, ] export function WiresharkPanel() { const { wiresharkInterface, wiresharkFilter, wiresharkResults, isWiresharkCapturing, wiresharkProgress, setWiresharkInterface, setWiresharkFilter, setWiresharkResults, setIsWiresharkCapturing, setWiresharkProgress, addToHistory, } = useToolsStore() const [captureTime, setCaptureTime] = useState(0) const [expandedSections, setExpandedSections] = useState(["protocols", "conversations"]) useEffect(() => { let interval: NodeJS.Timeout if (isWiresharkCapturing) { interval = setInterval(() => { setCaptureTime((t) => t + 1) }, 1000) } else { setCaptureTime(0) } return () => clearInterval(interval) }, [isWiresharkCapturing]) const toggleSection = (section: string) => { setExpandedSections((prev) => (prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section])) } const startCapture = async () => { if (isWiresharkCapturing) return setIsWiresharkCapturing(true) setWiresharkProgress(0) setWiresharkResults(null) // Simulate capture for 10 seconds for (let i = 0; i <= 100; i += 10) { await new Promise((r) => setTimeout(r, 1000)) setWiresharkProgress(i) } const results = { captureFile: `capture_${Date.now()}.pcapng`, startTime: new Date(Date.now() - 10000).toISOString(), endTime: new Date().toISOString(), duration: "10s", packets: { total: 15847, displayed: wiresharkFilter ? 3421 : 15847, captured: 15847, }, protocols: [ { name: "TCP", count: 8934, percentage: 56.4 }, { name: "UDP", count: 3256, percentage: 20.5 }, { name: "HTTP", count: 1247, percentage: 7.9 }, { name: "DNS", count: 892, percentage: 5.6 }, { name: "TLS", count: 1023, percentage: 6.5 }, { name: "ARP", count: 312, percentage: 2.0 }, { name: "ICMP", count: 183, percentage: 1.1 }, ], conversations: [ { addressA: "192.168.1.100", addressB: "142.250.185.206", packets: 1247, bytes: 1523456, protocol: "TCP", duration: "9.8s", }, { addressA: "192.168.1.100", addressB: "151.101.1.140", packets: 892, bytes: 987234, protocol: "TCP", duration: "8.2s", }, { addressA: "192.168.1.100", addressB: "8.8.8.8", packets: 456, bytes: 45678, protocol: "UDP", duration: "10.0s", }, { addressA: "192.168.1.100", addressB: "192.168.1.1", packets: 234, bytes: 23456, protocol: "ARP", duration: "9.5s", }, { addressA: "192.168.1.100", addressB: "104.18.32.68", packets: 567, bytes: 678901, protocol: "TLS", duration: "7.3s", }, ], endpoints: [ { ip: "192.168.1.100", packets: 8934, bytes: 4523456, country: "Local" }, { ip: "142.250.185.206", packets: 2341, bytes: 2345678, country: "US (Google)" }, { ip: "151.101.1.140", packets: 1892, bytes: 1987234, country: "US (Fastly)" }, { ip: "8.8.8.8", packets: 912, bytes: 91234, country: "US (Google DNS)" }, { ip: "104.18.32.68", packets: 678, bytes: 789012, country: "US (Cloudflare)" }, ], ioGraph: [ { time: "0s", packetsIn: 1200, packetsOut: 800 }, { time: "2s", packetsIn: 1500, packetsOut: 1100 }, { time: "4s", packetsIn: 1800, packetsOut: 1400 }, { time: "6s", packetsIn: 2100, packetsOut: 1600 }, { time: "8s", packetsIn: 1900, packetsOut: 1300 }, { time: "10s", packetsIn: 1600, packetsOut: 1000 }, ], alerts: [ { severity: "Warning", protocol: "TCP", message: "TCP Retransmission detected (32 occurrences)" }, { severity: "Info", protocol: "HTTP", message: "Unencrypted HTTP traffic detected" }, { severity: "Warning", protocol: "DNS", message: "DNS queries to external resolvers" }, { severity: "Critical", protocol: "TCP", message: "Possible port scan detected from 10.0.0.55" }, ], httpRequests: [ { method: "GET", url: "/api/users", host: "api.example.com", statusCode: 200 }, { method: "POST", url: "/login", host: "auth.example.com", statusCode: 302 }, { method: "GET", url: "/images/logo.png", host: "cdn.example.com", statusCode: 200 }, { method: "PUT", url: "/api/settings", host: "api.example.com", statusCode: 401 }, ], dnsQueries: [ { query: "api.example.com", type: "A", response: "142.250.185.206" }, { query: "cdn.example.com", type: "A", response: "151.101.1.140" }, { query: "mail.google.com", type: "AAAA", response: "2607:f8b0:4004:800::2005" }, { query: "github.com", type: "A", response: "140.82.121.4" }, ], credentials: [ { protocol: "HTTP Basic", username: "admin", password: "******", host: "192.168.1.50" }, { protocol: "FTP", username: "ftpuser", password: "******", host: "192.168.1.25" }, ], } setWiresharkResults(results) addToHistory({ type: "wireshark", query: `${wiresharkInterface} - ${wiresharkFilter || "no filter"}`, results }) setIsWiresharkCapturing(false) } const stopCapture = () => { setIsWiresharkCapturing(false) } const getSeverityColor = (severity: string) => { switch (severity) { case "Critical": return "text-red-400 bg-red-500/20" case "Warning": return "text-yellow-400 bg-yellow-500/20" default: return "text-blue-400 bg-blue-500/20" } } const generateReport = () => { if (!wiresharkResults) return const report = ` WIRESHARK PACKET CAPTURE REPORT =============================== Generated: ${new Date().toLocaleString()} CAPTURE INFORMATION ------------------- Interface: ${wiresharkInterface} Filter: ${wiresharkFilter || "None"} Duration: ${wiresharkResults.duration} File: ${wiresharkResults.captureFile} PACKET STATISTICS ----------------- Total Packets: ${wiresharkResults.packets.total} Displayed: ${wiresharkResults.packets.displayed} PROTOCOL DISTRIBUTION --------------------- ${wiresharkResults.protocols.map((p: any) => `${p.name}: ${p.count} (${p.percentage}%)`).join("\n")} TOP CONVERSATIONS ----------------- ${wiresharkResults.conversations .map( (c: any) => `${c.addressA} <-> ${c.addressB}: ${c.packets} packets, ${(c.bytes / 1024).toFixed(2)} KB (${c.protocol})`, ) .join("\n")} ENDPOINTS --------- ${wiresharkResults.endpoints .map((e: any) => `${e.ip}: ${e.packets} packets, ${(e.bytes / 1024).toFixed(2)} KB - ${e.country}`) .join("\n")} SECURITY ALERTS --------------- ${wiresharkResults.alerts.map((a: any) => `[${a.severity}] ${a.protocol}: ${a.message}`).join("\n")} HTTP REQUESTS ------------- ${wiresharkResults.httpRequests?.map((r: any) => `${r.method} ${r.url} (${r.host}) - ${r.statusCode}`).join("\n") || "None"} DNS QUERIES ----------- ${wiresharkResults.dnsQueries?.map((d: any) => `${d.query} (${d.type}) -> ${d.response}`).join("\n") || "None"} CREDENTIALS FOUND ----------------- ${wiresharkResults.credentials?.map((c: any) => `[${c.protocol}] ${c.username}@${c.host}`).join("\n") || "None"} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `wireshark-report-${Date.now()}.txt` a.click() } return (

WIRESHARK

v4.2.0

{/* Configuration */}

INTERFACE

CAPTURE FILTER setWiresharkFilter(e.target.value)} placeholder="e.g., tcp port 80" className="w-full rounded border border-cyan-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-cyan-500 focus:outline-none" />

{/* Quick Filters */}

QUICK FILTERS

{commonFilters.map((f) => ( ))}

{/* Control Buttons */}

{isWiresharkCapturing ? ( <> STOP CAPTURE ({captureTime}s) ) : ( <> START CAPTURE )}

{isWiresharkCapturing && (

Capturing packets... {wiresharkProgress}%

)} {/* Results */} {wiresharkResults && (

{/* Stats */}

{wiresharkResults.packets.total.toLocaleString()}

Total Packets

{wiresharkResults.duration}

Duration

{wiresharkResults.protocols.length}

Protocols

{/* Alerts */} {wiresharkResults.alerts.length > 0 && (

SECURITY ALERTS ({wiresharkResults.alerts.length})

{wiresharkResults.alerts.map((alert: any, i: number) => (

[{alert.severity}] {alert.protocol}: {alert.message}

))}

)} {/* Protocols */}

{expandedSections.includes("protocols") && ( {wiresharkResults.protocols.map((p: any) => (

{p.name}

{p.percentage}%

))} )}

{/* Conversations */}

{expandedSections.includes("conversations") && ( {wiresharkResults.conversations.map((c: any, i: number) => (

{c.addressA} ↔ {c.addressB}

{c.packets} pkts {(c.bytes / 1024).toFixed(1)} KB {c.protocol}

))} )}

{/* Credentials */} {wiresharkResults.credentials && wiresharkResults.credentials.length > 0 && (

CREDENTIALS CAPTURED

{wiresharkResults.credentials.map((c: any, i: number) => (

[{c.protocol}] {c.username}@{c.host}

))}

)}

{/* Footer */} {wiresharkResults && (

Download Report

)}

) } [V0_FILE]typescriptreact:file="components/tools/hydra-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { Key, Play, Copy, Download, ChevronDown, Terminal, CheckCircle, XCircle, Loader } from "lucide-react" const services = [ { id: "ssh", name: "SSH", port: 22 }, { id: "ftp", name: "FTP", port: 21 }, { id: "rdp", name: "RDP", port: 3389 }, { id: "smb", name: "SMB", port: 445 }, { id: "mysql", name: "MySQL", port: 3306 }, { id: "postgres", name: "PostgreSQL", port: 5432 }, { id: "mssql", name: "MSSQL", port: 1433 }, { id: "http-post-form", name: "HTTP POST Form", port: 80 }, { id: "http-get", name: "HTTP GET", port: 80 }, { id: "vnc", name: "VNC", port: 5900 }, { id: "telnet", name: "Telnet", port: 23 }, { id: "smtp", name: "SMTP", port: 25 }, { id: "pop3", name: "POP3", port: 110 }, { id: "imap", name: "IMAP", port: 143 }, ] const wordlists = [ { id: "rockyou", name: "RockYou", entries: 14344391 }, { id: "common", name: "Common Passwords", entries: 10000 }, { id: "fasttrack", name: "FastTrack", entries: 222 }, { id: "custom", name: "Custom List", entries: 0 }, ] export function HydraPanel() { const { hydraTarget, hydraService, hydraResults, isHydraRunning, hydraProgress, setHydraTarget, setHydraService, setHydraResults, setIsHydraRunning, setHydraProgress, addToHistory, } = useToolsStore() const [selectedWordlist, setSelectedWordlist] = useState("common") const [username, setUsername] = useState("admin") const [usernameList, setUsernameList] = useState("") const [threads, setThreads] = useState("16") const [port, setPort] = useState("") const [expandedSections, setExpandedSections] = useState(["credentials", "console"]) const toggleSection = (section: string) => { setExpandedSections((prev) => (prev.includes(section) ? prev.filter((s) => s !== section) : [...prev, section])) } const selectedServiceInfo = services.find((s) => s.id === hydraService) const runHydra = async () => { if (!hydraTarget || isHydraRunning) return setIsHydraRunning(true) setHydraProgress(0) setHydraResults(null) const consoleOutput: string[] = [] const addConsole = (line: string) => consoleOutput.push(line) addConsole(`Hydra v9.5 (c) 2023 by van Hauser/THC & David Maciejak`) addConsole(``) addConsole( `[DATA] max ${threads} tasks per 1 server, overall ${threads} tasks, ${selectedWordlist === "rockyou" ? "14344391" : selectedWordlist === "common" ? "10000" : "222"} login tries`, ) addConsole(`[DATA] attacking ${hydraService}://${hydraTarget}:${port || selectedServiceInfo?.port}/`) await new Promise((r) => setTimeout(r, 500)) setHydraProgress(10) const totalAttempts = selectedWordlist === "rockyou" ? 14344391 : selectedWordlist === "common" ? 10000 : 222 const simulatedAttempts = Math.min(totalAttempts, 5000) for (let i = 20; i <= 80; i += 15) { addConsole( `[STATUS] ${Math.floor((simulatedAttempts * i) / 100)} of ${simulatedAttempts} targets completed, ${Math.floor((simulatedAttempts * i) / 100 / (i / 10))} tries/min`, ) await new Promise((r) => setTimeout(r, 800)) setHydraProgress(i) } const foundCredentials = Math.random() > 0.4 const credentials: any[] = [] if (foundCredentials) { const possiblePasswords = ["password123", "admin", "root", "123456", "letmein", "welcome", "monkey", "dragon"] const numFound = Math.floor(Math.random() * 3) + 1 for (let i = 0; i < numFound; i++) { const cred = { host: hydraTarget, port: Number.parseInt(port || String(selectedServiceInfo?.port)), service: hydraService, login: i === 0 ? username : ["admin", "root", "user", "test"][i], password: possiblePasswords[Math.floor(Math.random() * possiblePasswords.length)], valid: true, } credentials.push(cred) addConsole( `[${selectedServiceInfo?.port}][${hydraService}] host: ${hydraTarget} login: ${cred.login} password: ${cred.password}`, ) } } await new Promise((r) => setTimeout(r, 500)) setHydraProgress(100) addConsole(``) if (credentials.length > 0) { addConsole(`[STATUS] attack finished for ${hydraTarget} (valid credentials found)`) addConsole(`1 of 1 target successfully completed, ${credentials.length} valid password(s) found`) } else { addConsole(`[STATUS] attack finished for ${hydraTarget} (no valid credentials found)`) addConsole(`1 of 1 target completed, 0 valid password(s) found`) } addConsole(`Hydra (https://github.com/vanhauser-thc/thc-hydra) finished at ${new Date().toLocaleString()}`) const results = { target: hydraTarget, service: hydraService, startTime: new Date(Date.now() - 30000).toISOString(), endTime: new Date().toISOString(), duration: "30s", status: credentials.length > 0 ? ("success" as const) : ("failed" as const), credentials, attempts: { total: simulatedAttempts, successful: credentials.length, failed: simulatedAttempts - credentials.length, rate: `${Math.floor(simulatedAttempts / 30)} tries/sec`, }, wordlist: { users: usernameList ? usernameList.split("\n").length : 1, passwords: selectedWordlist === "rockyou" ? 14344391 : selectedWordlist === "common" ? 10000 : 222, }, console: consoleOutput, } setHydraResults(results) addToHistory({ type: "hydra", query: `${hydraService}://${hydraTarget}`, results }) setIsHydraRunning(false) } const generateReport = () => { if (!hydraResults) return const report = ` HYDRA PASSWORD ATTACK REPORT ============================ Generated: ${new Date().toLocaleString()} TARGET INFORMATION ------------------ Host: ${hydraResults.target} Service: ${hydraResults.service} Duration: ${hydraResults.duration} Status: ${hydraResults.status.toUpperCase()} ATTACK STATISTICS ----------------- Total Attempts: ${hydraResults.attempts.total} Successful: ${hydraResults.attempts.successful} Failed: ${hydraResults.attempts.failed} Rate: ${hydraResults.attempts.rate} WORDLIST INFO ------------- Usernames: ${hydraResults.wordlist.users} Passwords: ${hydraResults.wordlist.passwords} ${ hydraResults.credentials.length > 0 ? ` VALID CREDENTIALS FOUND ----------------------- ${hydraResults.credentials .map( (c: any) => ` Host: ${c.host}:${c.port} Service: ${c.service} Username: ${c.login} Password: ${c.password} `, ) .join("\n")}` : "NO VALID CREDENTIALS FOUND" } CONSOLE OUTPUT -------------- ${hydraResults.console.join("\n")} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `hydra-report-${hydraTarget}-${Date.now()}.txt` a.click() } return (

THC HYDRA

v9.5

{/* Configuration */}

TARGET HOST setHydraTarget(e.target.value)} placeholder="192.168.1.1 or target.com" className="w-full rounded border border-purple-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-purple-500 focus:outline-none" />

SERVICE

USERNAME setUsername(e.target.value)} placeholder="admin" className="w-full rounded border border-purple-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-purple-500 focus:outline-none" />

PORT (Optional) setPort(e.target.value)} placeholder={String(selectedServiceInfo?.port)} className="w-full rounded border border-purple-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-purple-500 focus:outline-none" />

THREADS

PASSWORD WORDLIST

{wordlists.map((wl) => ( ))}

{isHydraRunning ? ( <> ATTACKING... {hydraProgress}% ) : ( <> START ATTACK )} {isHydraRunning && (

)} {/* Results */} {hydraResults && (

{/* Status */}

{hydraResults.status === "success" ? ( ) : ( )} {hydraResults.status === "success" ? `CREDENTIALS FOUND (${hydraResults.credentials.length})` : "NO VALID CREDENTIALS FOUND"}

{/* Stats */}

{hydraResults.attempts.total.toLocaleString()}

Attempts

{hydraResults.attempts.successful}

Success

{hydraResults.attempts.failed.toLocaleString()}

Failed

{hydraResults.attempts.rate}

Speed

{/* Credentials */} {hydraResults.credentials.length > 0 && (

{expandedSections.includes("credentials") && ( {hydraResults.credentials.map((cred: any, i: number) => (

{cred.service}://{cred.host}:{cred.port}

Password:{" "} {cred.password}

))} )}

)} {/* Console */}

{expandedSections.includes("console") && (

                      {hydraResults.console.join("\n")}

)}

{/* Footer */} {hydraResults && (

Download Report navigator.clipboard.writeText(hydraResults.console.join("\n"))} className="flex items-center gap-2 rounded border border-purple-500/30 bg-purple-500/10 px-3 py-2 font-mono text-xs text-purple-400 hover:bg-purple-500/20" > Copy Output

)}

) } [V0_FILE]typescriptreact:file="components/tools/nikto-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { Globe, Play, Download, ChevronDown, AlertTriangle, Shield, ExternalLink } from "lucide-react" export function NiktoPanel() { const { niktoTarget, niktoPort, niktoResults, isNiktoScanning, niktoProgress, setNiktoTarget, setNiktoPort, setNiktoResults, setIsNiktoScanning, setNiktoProgress, addToHistory, } = useToolsStore() const [expandedVulns, setExpandedVulns] = useState([]) const [filterSeverity, setFilterSeverity] = useState("all") const toggleVuln = (id: string) => { setExpandedVulns((prev) => (prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id])) } const runScan = async () => { if (!niktoTarget || isNiktoScanning) return setIsNiktoScanning(true) setNiktoProgress(0) setNiktoResults(null) const stages = [ "Initializing Nikto", "Testing server", "Checking headers", "Testing CGI directories", "Scanning for vulnerabilities", "Testing SSL/TLS", "Checking outdated software", "Generating report", ] for (let i = 0; i < stages.length; i++) { await new Promise((r) => setTimeout(r, 800 + Math.random() * 600)) setNiktoProgress(Math.min(100, (i + 1) * 12.5)) } const results = { target: niktoTarget, port: niktoPort, startTime: new Date(Date.now() - 45000).toISOString(), endTime: new Date().toISOString(), duration: "45s", serverInfo: { server: "Apache/2.4.41 (Ubuntu)", hostname: niktoTarget, ip: "192.168.1." + Math.floor(Math.random() * 255), port: niktoPort, ssl: niktoPort === 443, }, vulnerabilities: [ { id: "NIKTO-001", osvdbId: "OSVDB-3092", method: "GET", uri: "/admin/", description: "Admin directory found. This might contain sensitive administrative functionality.", references: ["https://cwe.mitre.org/data/definitions/425.html"], severity: "High" as const, }, { id: "NIKTO-002", osvdbId: "OSVDB-3233", method: "GET", uri: "/phpinfo.php", description: "PHP Info page found, which reveals detailed PHP configuration and environment information.", references: ["https://www.php.net/manual/en/function.phpinfo.php"], severity: "Medium" as const, }, { id: "NIKTO-003", osvdbId: "OSVDB-561", method: "OPTIONS", uri: "/", description: "HTTP OPTIONS method enabled. Allowed methods: GET, HEAD, POST, OPTIONS, TRACE", references: ["https://owasp.org/www-community/attacks/HTTP_Methods"], severity: "Low" as const, }, { id: "NIKTO-004", osvdbId: "OSVDB-877", method: "GET", uri: "/server-status", description: "Apache server-status page found. This reveals server statistics and active connections.", references: ["https://httpd.apache.org/docs/2.4/mod/mod_status.html"], severity: "High" as const, }, { id: "NIKTO-005", osvdbId: "OSVDB-3268", method: "GET", uri: "/backup/", description: "Backup directory found. May contain sensitive backup files.", references: ["https://cwe.mitre.org/data/definitions/530.html"], severity: "High" as const, }, { id: "NIKTO-006", osvdbId: "OSVDB-0", method: "GET", uri: "/", description: "X-Frame-Options header not set. Site may be vulnerable to clickjacking attacks.", references: ["https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options"], severity: "Medium" as const, }, { id: "NIKTO-007", osvdbId: "OSVDB-0", method: "GET", uri: "/", description: "X-Content-Type-Options header not set. May allow MIME type sniffing.", references: ["https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options"], severity: "Low" as const, }, { id: "NIKTO-008", osvdbId: "OSVDB-3092", method: "GET", uri: "/.git/", description: "Git repository found. Source code may be exposed.", references: ["https://cwe.mitre.org/data/definitions/527.html"], severity: "High" as const, }, ], statistics: { itemsTested: 6942, itemsFound: 8, errors: 2, }, console: [ `- Nikto v2.5.0`, `---------------------------------------------------------------------------`, `+ Target IP: ${niktoTarget}`, `+ Target Hostname: ${niktoTarget}`, `+ Target Port: ${niktoPort}`, `+ Start Time: ${new Date().toISOString()}`, `---------------------------------------------------------------------------`, `+ Server: Apache/2.4.41 (Ubuntu)`, `+ /: The anti-clickjacking X-Frame-Options header is not present.`, `+ /: The X-Content-Type-Options header is not set.`, `+ /admin/: Admin directory found.`, `+ /phpinfo.php: PHP info page found.`, `+ /.git/: Git repository found.`, `+ /backup/: Backup directory found.`, `+ /server-status: Apache server-status found.`, `+ 6942 requests: 2 error(s) and 8 item(s) reported on remote host`, `+ End Time: ${new Date().toISOString()} (45 seconds)`, `---------------------------------------------------------------------------`, ], } setNiktoResults(results) addToHistory({ type: "nikto", query: niktoTarget, results }) setIsNiktoScanning(false) } const getSeverityColor = (severity: string) => { switch (severity) { case "High": return "text-red-400 bg-red-500/20 border-red-500/30" case "Medium": return "text-orange-400 bg-orange-500/20 border-orange-500/30" case "Low": return "text-yellow-400 bg-yellow-500/20 border-yellow-500/30" default: return "text-blue-400 bg-blue-500/20 border-blue-500/30" } } const filteredVulns = niktoResults?.vulnerabilities.filter((v) => filterSeverity === "all" || v.severity === filterSeverity) || [] const generateReport = () => { if (!niktoResults) return const report = ` NIKTO WEB SERVER SCANNER REPORT ================================ Generated: ${new Date().toLocaleString()} TARGET INFORMATION ------------------ Target: ${niktoResults.target} Port: ${niktoResults.port} Server: ${niktoResults.serverInfo.server} SSL: ${niktoResults.serverInfo.ssl ? "Yes" : "No"} Duration: ${niktoResults.duration} SUMMARY ------- Items Tested: ${niktoResults.statistics.itemsTested} Items Found: ${niktoResults.statistics.itemsFound} Errors: ${niktoResults.statistics.errors} VULNERABILITIES FOUND --------------------- ${niktoResults.vulnerabilities .map( (v) => ` [${v.severity.toUpperCase()}] ${v.id} (${v.osvdbId}) URI: ${v.uri} Method: ${v.method} Description: ${v.description} References: ${v.references.join(", ")} `, ) .join("\n")} CONSOLE OUTPUT -------------- ${niktoResults.console.join("\n")} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `nikto-report-${niktoTarget}-${Date.now()}.txt` a.click() } return (

NIKTO

v2.5.0

TARGET URL/IP setNiktoTarget(e.target.value)} placeholder="example.com or 192.168.1.1" className="w-full rounded border border-green-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-green-500 focus:outline-none" />

PORT setNiktoPort(Number.parseInt(e.target.value) || 80)} className="w-full rounded border border-green-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white focus:border-green-500 focus:outline-none" />

{isNiktoScanning ? ( <> SCANNING... {niktoProgress.toFixed(0)}% ) : ( <> START SCAN )} {isNiktoScanning && (

)} {niktoResults && ( <>

{niktoResults.statistics.itemsFound}

Found

{niktoResults.vulnerabilities.filter((v) => v.severity === "High").length}

High

{niktoResults.vulnerabilities.filter((v) => v.severity === "Medium").length}

Medium

{niktoResults.vulnerabilities.filter((v) => v.severity === "Low").length}

Low

SERVER INFO

Server:{" "} {niktoResults.serverInfo.server}

IP:{" "} {niktoResults.serverInfo.ip}

Port:{" "} {niktoResults.serverInfo.port}

SSL:{" "} {niktoResults.serverInfo.ssl ? "Enabled" : "Disabled"}

{["all", "High", "Medium", "Low"].map((sev) => ( ))}

{filteredVulns.map((vuln) => (

{expandedVulns.includes(vuln.id) && (

Description

{vuln.description}

OSVDB: {vuln.osvdbId}

Method: {vuln.method}

{vuln.references.length > 0 && (

References

{vuln.references.map((ref, i) => ( {ref} ))}

)}

))}

)}

{niktoResults && (

Download Report

)}

) } [V0_FILE]typescriptreact:file="components/tools/gobuster-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { FolderSearch, Play, Download, File, Folder, Globe } from "lucide-react" const modes = [ { id: "dir", name: "Directory Mode", description: "Brute force directories and files" }, { id: "dns", name: "DNS Mode", description: "Enumerate subdomains" }, { id: "vhost", name: "VHost Mode", description: "Brute force virtual hosts" }, { id: "fuzz", name: "Fuzz Mode", description: "Fuzz for hidden parameters" }, ] const wordlists = [ { id: "common.txt", name: "Common", entries: "4,614" }, { id: "directory-list-2.3-medium.txt", name: "Medium", entries: "220,560" }, { id: "directory-list-2.3-big.txt", name: "Big", entries: "1,273,833" }, { id: "subdomains-top1million-5000.txt", name: "Subdomains 5K", entries: "5,000" }, { id: "subdomains-top1million-20000.txt", name: "Subdomains 20K", entries: "20,000" }, ] export function GobusterPanel() { const { gobusterTarget, gobusterMode, gobusterWordlist, gobusterResults, isGobusterRunning, gobusterProgress, setGobusterTarget, setGobusterMode, setGobusterWordlist, setGobusterResults, setIsGobusterRunning, setGobusterProgress, addToHistory, } = useToolsStore() const [filterStatus, setFilterStatus] = useState("all") const runScan = async () => { if (!gobusterTarget || isGobusterRunning) return setIsGobusterRunning(true) setGobusterProgress(0) setGobusterResults(null) for (let i = 0; i <= 100; i += 5) { await new Promise((r) => setTimeout(r, 200 + Math.random() * 300)) setGobusterProgress(i) } const found = gobusterMode === "dns" ? [ { path: "mail", status: 200, size: 0, type: "subdomain" as const }, { path: "www", status: 200, size: 0, type: "subdomain" as const }, { path: "api", status: 200, size: 0, type: "subdomain" as const }, { path: "dev", status: 200, size: 0, type: "subdomain" as const }, { path: "staging", status: 200, size: 0, type: "subdomain" as const }, { path: "admin", status: 200, size: 0, type: "subdomain" as const }, { path: "blog", status: 200, size: 0, type: "subdomain" as const }, { path: "cdn", status: 200, size: 0, type: "subdomain" as const }, { path: "test", status: 200, size: 0, type: "subdomain" as const }, { path: "portal", status: 200, size: 0, type: "subdomain" as const }, ] : [ { path: "/admin", status: 301, size: 312, redirect: "/admin/", type: "directory" as const }, { path: "/admin/login", status: 200, size: 4521, type: "file" as const }, { path: "/api", status: 301, size: 308, redirect: "/api/", type: "directory" as const }, { path: "/api/v1", status: 200, size: 89, type: "directory" as const }, { path: "/backup", status: 403, size: 276, type: "directory" as const }, { path: "/config", status: 403, size: 276, type: "directory" as const }, { path: "/css", status: 301, size: 308, redirect: "/css/", type: "directory" as const }, { path: "/images", status: 301, size: 311, redirect: "/images/", type: "directory" as const }, { path: "/js", status: 301, size: 306, redirect: "/js/", type: "directory" as const }, { path: "/robots.txt", status: 200, size: 154, type: "file" as const }, { path: "/sitemap.xml", status: 200, size: 2847, type: "file" as const }, { path: "/.git", status: 403, size: 276, type: "directory" as const }, { path: "/.env", status: 403, size: 276, type: "file" as const }, { path: "/uploads", status: 301, size: 312, redirect: "/uploads/", type: "directory" as const }, { path: "/vendor", status: 301, size: 311, redirect: "/vendor/", type: "directory" as const }, { path: "/wp-admin", status: 302, size: 0, redirect: "/wp-login.php", type: "directory" as const }, { path: "/wp-content", status: 301, size: 315, redirect: "/wp-content/", type: "directory" as const }, { path: "/wp-includes", status: 301, size: 316, redirect: "/wp-includes/", type: "directory" as const }, ] const results = { target: gobusterTarget, mode: gobusterMode, wordlist: gobusterWordlist, startTime: new Date(Date.now() - 30000).toISOString(), endTime: new Date().toISOString(), duration: "30s", found, statistics: { requests: wordlists.find((w) => w.id === gobusterWordlist)?.entries.replace(",", "") || "4614", errors: Math.floor(Math.random() * 10), duration: "30s", }, console: [ `===============================================================`, `Gobuster v3.6`, `by OJ Reeves (@TheColonial) & Christian Mehlmauer (@firefart)`, `===============================================================`, `[+] Url: ${gobusterTarget}`, `[+] Method: GET`, `[+] Threads: 10`, `[+] Wordlist: /usr/share/wordlists/${gobusterWordlist}`, `[+] Status codes: 200,204,301,302,307,401,403,405,500`, `[+] User Agent: gobuster/3.6`, `[+] Timeout: 10s`, `===============================================================`, `Starting gobuster in ${gobusterMode} mode`, `===============================================================`, ...found.map((f) => `Found: ${f.path} (Status: ${f.status}) [Size: ${f.size}]`), `===============================================================`, `Finished`, `===============================================================`, ], } setGobusterResults(results) addToHistory({ type: "gobuster", query: gobusterTarget, results }) setIsGobusterRunning(false) } const getStatusColor = (status: number) => { if (status >= 200 && status < 300) return "text-green-400" if (status >= 300 && status < 400) return "text-blue-400" if (status >= 400 && status < 500) return "text-orange-400" return "text-red-400" } const filteredResults = gobusterResults?.found.filter((f) => { if (filterStatus === "all") return true if (filterStatus === "2xx") return f.status >= 200 && f.status < 300 if (filterStatus === "3xx") return f.status >= 300 && f.status < 400 if (filterStatus === "4xx") return f.status >= 400 && f.status < 500 return true }) || [] const generateReport = () => { if (!gobusterResults) return const report = ` GOBUSTER DIRECTORY ENUMERATION REPORT ===================================== Generated: ${new Date().toLocaleString()} TARGET: ${gobusterResults.target} MODE: ${gobusterResults.mode} WORDLIST: ${gobusterResults.wordlist} DURATION: ${gobusterResults.duration} STATISTICS ---------- Requests: ${gobusterResults.statistics.requests} Errors: ${gobusterResults.statistics.errors} FOUND ENTRIES (${gobusterResults.found.length}) -------------- ${gobusterResults.found.map((f) => `[${f.status}] ${f.path} - Size: ${f.size}${f.redirect ? ` -> ${f.redirect}` : ""}`).join("\n")} CONSOLE OUTPUT -------------- ${gobusterResults.console.join("\n")} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `gobuster-report-${Date.now()}.txt` a.click() } return (

GOBUSTER

v3.6

TARGET URL setGobusterTarget(e.target.value)} placeholder="https://example.com" className="w-full rounded border border-purple-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-purple-500 focus:outline-none" />

MODE

WORDLIST

{isGobusterRunning ? ( <> SCANNING... {gobusterProgress}% ) : ( <> START ENUMERATION )} {isGobusterRunning && (

)} {gobusterResults && ( <>

{gobusterResults.found.length}

Found

{gobusterResults.found.filter((f) => f.status >= 200 && f.status < 300).length}

2xx

{gobusterResults.found.filter((f) => f.status >= 400).length}

4xx

{["all", "2xx", "3xx", "4xx"].map((status) => ( ))}

{filteredResults.map((entry, i) => (

{entry.type === "directory" ? ( ) : entry.type === "subdomain" ? ( ) : ( )} {entry.path} {entry.status} {entry.size}B {entry.redirect && → {entry.redirect}}

))}

)}

{gobusterResults && (

Download Report

)}

) } [V0_FILE]typescriptreact:file="components/tools/nessus-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { Shield, Play, Download, ChevronDown, AlertTriangle, Server, FileText } from "lucide-react" const scanPolicies = [ { id: "basic", name: "Basic Network Scan", description: "General-purpose scan for any host" }, { id: "advanced", name: "Advanced Scan", description: "Configurable scan with all options available" }, { id: "webapp", name: "Web Application Tests", description: "Scan for published web vulnerabilities" }, { id: "malware", name: "Malware Scan", description: "Scan for malware on systems" }, { id: "credentialed", name: "Credentialed Patch Audit", description: "Authenticated patch and configuration audit" }, { id: "pci", name: "PCI-DSS Compliance", description: "PCI DSS compliance checks" }, ] export function NessusPanel() { const { nessusTarget, nessusScanType, nessusResults, isNessusScanning, nessusProgress, setNessusTarget, setNessusScanType, setNessusResults, setIsNessusScanning, setNessusProgress, addToHistory, } = useToolsStore() const [expandedVulns, setExpandedVulns] = useState([]) const [filterSeverity, setFilterSeverity] = useState("all") const [activeTab, setActiveTab] = useState<"vulns" | "hosts" | "compliance">("vulns") const toggleVuln = (id: string) => { setExpandedVulns((prev) => (prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id])) } const runScan = async () => { if (!nessusTarget || isNessusScanning) return setIsNessusScanning(true) setNessusProgress(0) setNessusResults(null) for (let i = 0; i <= 100; i += 2) { await new Promise((r) => setTimeout(r, 150 + Math.random() * 100)) setNessusProgress(i) } const results = { target: nessusTarget, scanName: `Scan-${Date.now()}`, policyName: scanPolicies.find((p) => p.id === nessusScanType)?.name || "Basic Network Scan", startTime: new Date(Date.now() - 120000).toISOString(), endTime: new Date().toISOString(), duration: "2m 0s", hosts: [ { ip: nessusTarget, hostname: nessusTarget, os: "Linux 5.4", openPorts: 12, vulnCount: { critical: 2, high: 5, medium: 8, low: 15 }, }, { ip: "192.168.1.2", hostname: "server2.local", os: "Windows Server 2019", openPorts: 8, vulnCount: { critical: 1, high: 3, medium: 5, low: 10 }, }, ], vulnerabilities: [ { pluginId: "19506", pluginName: "Nessus Scan Information", severity: "Info" as const, cvss: 0, description: "This plugin displays information about the Nessus scan.", solution: "N/A", seeAlso: [], cve: [], host: nessusTarget, port: 0, protocol: "tcp", }, { pluginId: "34460", pluginName: "Unsupported Unix Operating System", severity: "Critical" as const, cvss: 10.0, description: "The remote host is running an operating system that is no longer supported by its vendor. Lack of support implies that no security patches will be released.", solution: "Upgrade to a supported version of the operating system.", seeAlso: ["https://www.nessus.org/plugins/index.php?view=single&id=34460"], cve: [], host: nessusTarget, port: 0, protocol: "tcp", pluginOutput: "The remote operating system is: Ubuntu 16.04 LTS\nUbuntu 16.04 LTS reached end of life on April 30, 2021.", }, { pluginId: "42873", pluginName: "SSL Medium Strength Cipher Suites Supported", severity: "Medium" as const, cvss: 5.3, description: "The remote host supports SSL cipher suites that use medium strength encryption (key lengths between 64 and 112 bits).", solution: "Reconfigure the affected application to use only strong ciphers (AES-256, etc.).", seeAlso: ["https://www.openssl.org/docs/manmaster/man1/ciphers.html"], cve: [], host: nessusTarget, port: 443, protocol: "tcp", }, { pluginId: "11213", pluginName: "HTTP TRACE / TRACK Methods Allowed", severity: "Medium" as const, cvss: 4.3, description: "The remote web server supports the TRACE and/or TRACK methods which can be used for cross-site tracing attacks.", solution: "Disable these methods in the web server configuration.", seeAlso: ["https://owasp.org/www-community/attacks/Cross_Site_Tracing"], cve: ["CVE-2003-1567"], host: nessusTarget, port: 80, protocol: "tcp", }, { pluginId: "57582", pluginName: "SSL Self-Signed Certificate", severity: "Medium" as const, cvss: 5.0, description: "The X.509 certificate chain for this service is not signed by a recognized certificate authority.", solution: "Purchase or generate a proper certificate for this service.", seeAlso: [], cve: [], host: nessusTarget, port: 443, protocol: "tcp", }, { pluginId: "10287", pluginName: "Traceroute Information", severity: "Info" as const, cvss: 0, description: "Makes a traceroute to the remote host.", solution: "N/A", seeAlso: [], cve: [], host: nessusTarget, port: 0, protocol: "udp", }, { pluginId: "66334", pluginName: "Apache HTTP Server httpOnly Cookie Information Disclosure", severity: "High" as const, cvss: 7.5, description: "The version of Apache HTTP Server running on the remote host is affected by an information disclosure vulnerability.", solution: "Upgrade to Apache version 2.4.52 or later.", seeAlso: ["https://httpd.apache.org/security/vulnerabilities_24.html"], cve: ["CVE-2022-22721"], host: nessusTarget, port: 80, protocol: "tcp", }, { pluginId: "156032", pluginName: "Log4j Remote Code Execution (Log4Shell)", severity: "Critical" as const, cvss: 10.0, description: "The remote host is running a version of Apache Log4j that is affected by a remote code execution vulnerability (Log4Shell).", solution: "Upgrade to Log4j 2.17.0 or later.", seeAlso: ["https://logging.apache.org/log4j/2.x/security.html"], cve: ["CVE-2021-44228", "CVE-2021-45046"], host: nessusTarget, port: 8080, protocol: "tcp", pluginOutput: "Log4j version detected: 2.14.1\nThis version is vulnerable to Log4Shell (CVE-2021-44228).", }, ], summary: { critical: 2, high: 1, medium: 3, low: 0, info: 2, }, compliance: [ { checkName: "Ensure SSH Protocol is set to 2", status: "PASSED" as const, description: "SSH protocol version 2 is required.", solution: "Set Protocol 2 in sshd_config", }, { checkName: "Ensure password expiration is 90 days or less", status: "FAILED" as const, description: "Password should expire within 90 days.", solution: "Set PASS_MAX_DAYS to 90 in /etc/login.defs", }, { checkName: "Ensure firewall is enabled", status: "PASSED" as const, description: "Firewall should be running.", solution: "Enable ufw or iptables", }, { checkName: "Ensure NTP is configured", status: "WARNING" as const, description: "NTP should be configured for time sync.", solution: "Configure NTP or chrony", }, ], console: [ `[*] Nessus scan started at ${new Date().toISOString()}`, `[*] Target: ${nessusTarget}`, `[*] Policy: ${scanPolicies.find((p) => p.id === nessusScanType)?.name}`, `[*] Discovering hosts...`, `[+] Host ${nessusTarget} is up`, `[*] Scanning ports...`, `[*] Running vulnerability checks...`, `[!] Critical: Log4Shell vulnerability detected`, `[!] Critical: Unsupported OS detected`, `[*] Scan completed`, ], } setNessusResults(results) addToHistory({ type: "nessus", query: nessusTarget, results }) setIsNessusScanning(false) } const getSeverityColor = (severity: string) => { switch (severity) { case "Critical": return "text-purple-400 bg-purple-500/20 border-purple-500/30" case "High": return "text-red-400 bg-red-500/20 border-red-500/30" case "Medium": return "text-orange-400 bg-orange-500/20 border-orange-500/30" case "Low": return "text-yellow-400 bg-yellow-500/20 border-yellow-500/30" default: return "text-blue-400 bg-blue-500/20 border-blue-500/30" } } const filteredVulns = nessusResults?.vulnerabilities.filter((v) => filterSeverity === "all" || v.severity === filterSeverity) || [] const generateReport = () => { if (!nessusResults) return const report = ` NESSUS VULNERABILITY SCAN REPORT ================================ Generated: ${new Date().toLocaleString()} SCAN INFORMATION ---------------- Target: ${nessusResults.target} Policy: ${nessusResults.policyName} Duration: ${nessusResults.duration} VULNERABILITY SUMMARY --------------------- Critical: ${nessusResults.summary.critical} High: ${nessusResults.summary.high} Medium: ${nessusResults.summary.medium} Low: ${nessusResults.summary.low} Info: ${nessusResults.summary.info} HOST INFORMATION ---------------- ${nessusResults.hosts .map( (h) => ` ${h.ip} (${h.hostname}) OS: ${h.os} Open Ports: ${h.openPorts} Critical: ${h.vulnCount.critical}, High: ${h.vulnCount.high}, Medium: ${h.vulnCount.medium}, Low: ${h.vulnCount.low} `, ) .join("\n")} DETAILED VULNERABILITIES ------------------------ ${nessusResults.vulnerabilities .filter((v) => v.severity !== "Info") .map( (v) => ` [${v.severity.toUpperCase()}] ${v.pluginName} (Plugin ID: ${v.pluginId}) Host: ${v.host}:${v.port}/${v.protocol} CVSS: ${v.cvss} CVE: ${v.cve.join(", ") || "N/A"} Description: ${v.description} Solution: ${v.solution} ${v.pluginOutput ? `\nPlugin Output:\n${v.pluginOutput}` : ""} ---`, ) .join("\n")} COMPLIANCE RESULTS ------------------ ${nessusResults.compliance?.map((c) => `[${c.status}] ${c.checkName}`).join("\n") || "N/A"} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `nessus-report-${nessusTarget}-${Date.now()}.txt` a.click() } return (

NESSUS

Professional

TARGET setNessusTarget(e.target.value)} placeholder="IP address or hostname" className="w-full rounded border border-cyan-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/30 focus:border-cyan-500 focus:outline-none" />

SCAN POLICY

{isNessusScanning ? ( <> SCANNING... {nessusProgress}% ) : ( <> LAUNCH SCAN )} {isNessusScanning && (

)} {nessusResults && ( <>

{[ { label: "Critical", count: nessusResults.summary.critical, color: "purple" }, { label: "High", count: nessusResults.summary.high, color: "red" }, { label: "Medium", count: nessusResults.summary.medium, color: "orange" }, { label: "Low", count: nessusResults.summary.low, color: "yellow" }, { label: "Info", count: nessusResults.summary.info, color: "blue" }, ].map((item) => (

{item.count}

{item.label}

))}

{(["vulns", "hosts", "compliance"] as const).map((tab) => ( ))}

{activeTab === "vulns" && ( <>

{["all", "Critical", "High", "Medium", "Low", "Info"].map((sev) => ( ))}

{filteredVulns.map((vuln) => (

{expandedVulns.includes(vuln.pluginId) && (

Description

{vuln.description}

Solution

{vuln.solution}

{vuln.cve.length > 0 && (

CVE: {vuln.cve.join(", ")}

)} {vuln.pluginOutput && (

Plugin Output

                                    {vuln.pluginOutput}

)}

))}

)} {activeTab === "hosts" && (

{nessusResults.hosts.map((host, i) => (

{host.ip}

{host.hostname} - {host.os}

{host.openPorts} ports

C:{host.vulnCount.critical} H:{host.vulnCount.high} M:{host.vulnCount.medium} L:{host.vulnCount.low}

))}

)} {activeTab === "compliance" && nessusResults.compliance && (

{nessusResults.compliance.map((check, i) => (

{check.checkName}

{check.description}

{check.status}

))}

)} )}

{nessusResults && (

Download Report

)}

) } [V0_FILE]typescriptreact:file="components/tools/aircrack-panel.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { useToolsStore } from "@/store/tools-store" import { Wifi, Play, Square, Download, Lock, Radio } from "lucide-react" const modes = [ { id: "monitor", name: "Monitor Mode", description: "Enable monitor mode on interface" }, { id: "scan", name: "Network Scan", description: "Scan for wireless networks" }, { id: "capture", name: "Capture Handshake", description: "Capture WPA handshakes" }, { id: "crack", name: "Crack Key", description: "Crack captured handshakes" }, { id: "deauth", name: "Deauthentication", description: "Send deauth packets" }, ] const interfaces = [ { id: "wlan0", name: "wlan0", description: "Wireless interface" }, { id: "wlan0mon", name: "wlan0mon", description: "Monitor mode interface" }, { id: "wlan1", name: "wlan1", description: "Secondary wireless" }, ] export function AircrackPanel() { const { aircrackInterface, aircrackMode, aircrackResults, isAircrackRunning, aircrackProgress, setAircrackInterface, setAircrackMode, setAircrackResults, setIsAircrackRunning, setAircrackProgress, addToHistory, } = useToolsStore() const [selectedNetwork, setSelectedNetwork] = useState(null) const runAircrack = async () => { if (isAircrackRunning) return setIsAircrackRunning(true) setAircrackProgress(0) setAircrackResults(null) for (let i = 0; i <= 100; i += 5) { await new Promise((r) => setTimeout(r, 300 + Math.random() * 200)) setAircrackProgress(i) } const results = { interface: aircrackInterface, mode: aircrackMode, startTime: new Date(Date.now() - 60000).toISOString(), endTime: new Date().toISOString(), duration: "60s", networks: [ { bssid: "00:11:22:33:44:55", channel: 6, encryption: "WPA2", cipher: "CCMP", auth: "PSK", essid: "HomeNetwork", power: -45, beacons: 1247, data: 892, clients: 3, }, { bssid: "AA:BB:CC:DD:EE:FF", channel: 1, encryption: "WPA2", cipher: "CCMP", auth: "PSK", essid: "OfficeWiFi", power: -62, beacons: 856, data: 234, clients: 8, }, { bssid: "11:22:33:44:55:66", channel: 11, encryption: "WPA3", cipher: "GCMP", auth: "SAE", essid: "SecureNet", power: -58, beacons: 567, data: 123, clients: 2, }, { bssid: "22:33:44:55:66:77", channel: 6, encryption: "WEP", cipher: "WEP", auth: "SKA", essid: "LegacyNetwork", power: -72, beacons: 432, data: 1567, clients: 1, }, { bssid: "33:44:55:66:77:88", channel: 3, encryption: "OPN", cipher: "None", auth: "None", essid: "FreeWiFi", power: -55, beacons: 923, data: 4521, clients: 15, }, { bssid: "44:55:66:77:88:99", channel: 9, encryption: "WPA2", cipher: "TKIP", auth: "PSK", essid: "GuestNetwork", power: -68, beacons: 345, data: 89, clients: 4, }, ], handshakes: [ { bssid: "00:11:22:33:44:55", essid: "HomeNetwork", captureTime: new Date().toISOString(), file: "HomeNetwork-01.cap", }, { bssid: "AA:BB:CC:DD:EE:FF", essid: "OfficeWiFi", captureTime: new Date().toISOString(), file: "OfficeWiFi-01.cap", }, ], crackedKeys: aircrackMode === "crack" ? [ { bssid: "00:11:22:33:44:55", essid: "HomeNetwork", key: "password123!", keyType: "WPA2-PSK", crackTime: "45.2s", }, ] : [], statistics: { packetsCapture: 15847, dataPackets: 8934, beacons: 6913, }, console: [ `[*] Aircrack-ng 1.7`, `[*] Interface: ${aircrackInterface}`, `[*] Mode: ${aircrackMode}`, ``, ` CH 6 ][ Elapsed: 60 s ][ 2024-01-15 14:30`, ``, ` BSSID PWR Beacons #Data #/s CH MB ENC CIPHER AUTH ESSID`, ``, ` 00:11:22:33:44:55 -45 1247 892 15 6 54 WPA2 CCMP PSK HomeNetwork`, ` AA:BB:CC:DD:EE:FF -62 856 234 4 1 54 WPA2 CCMP PSK OfficeWiFi`, ` 11:22:33:44:55:66 -58 567 123 2 11 130 WPA3 GCMP SAE SecureNet`, ` 22:33:44:55:66:77 -72 432 1567 26 6 11 WEP WEP SKA LegacyNetwork`, ` 33:44:55:66:77:88 -55 923 4521 75 3 54 OPN FreeWiFi`, ``, aircrackMode === "crack" ? `[+] KEY FOUND! [ password123! ]` : `[*] Scan complete`, ], } setAircrackResults(results) addToHistory({ type: "aircrack", query: aircrackInterface, results }) setIsAircrackRunning(false) } const stopAircrack = () => { setIsAircrackRunning(false) } const getEncryptionColor = (enc: string) => { switch (enc) { case "WPA3": return "text-green-400 bg-green-500/20" case "WPA2": return "text-cyan-400 bg-cyan-500/20" case "WEP": return "text-red-400 bg-red-500/20" case "OPN": return "text-yellow-400 bg-yellow-500/20" default: return "text-white/60 bg-white/10" } } const getSignalStrength = (power: number) => { if (power > -50) return { level: "Excellent", color: "text-green-400", bars: 4 } if (power > -60) return { level: "Good", color: "text-cyan-400", bars: 3 } if (power > -70) return { level: "Fair", color: "text-yellow-400", bars: 2 } return { level: "Weak", color: "text-red-400", bars: 1 } } const generateReport = () => { if (!aircrackResults) return const report = ` AIRCRACK-NG WIRELESS AUDIT REPORT ================================= Generated: ${new Date().toLocaleString()} SCAN INFORMATION ---------------- Interface: ${aircrackResults.interface} Mode: ${aircrackResults.mode} Duration: ${aircrackResults.duration} STATISTICS ---------- Packets Captured: ${aircrackResults.statistics.packetsCapture} Data Packets: ${aircrackResults.statistics.dataPackets} Beacons: ${aircrackResults.statistics.beacons} NETWORKS FOUND (${aircrackResults.networks.length}) -------------- ${aircrackResults.networks .map( (n) => ` ESSID: ${n.essid} BSSID: ${n.bssid} Channel: ${n.channel} Encryption: ${n.encryption} (${n.cipher}/${n.auth}) Signal: ${n.power} dBm Clients: ${n.clients} Data Packets: ${n.data} `, ) .join("\n")} HANDSHAKES CAPTURED (${aircrackResults.handshakes.length}) ------------------- ${aircrackResults.handshakes.map((h) => `${h.essid} (${h.bssid}) - ${h.file}`).join("\n")} ${ aircrackResults.crackedKeys.length > 0 ? ` CRACKED KEYS ------------ ${aircrackResults.crackedKeys.map((k) => `${k.essid}: ${k.key} (${k.keyType})`).join("\n")} ` : "" } CONSOLE OUTPUT -------------- ${aircrackResults.console.join("\n")} ` const blob = new Blob([report], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `aircrack-report-${Date.now()}.txt` a.click() } return (

AIRCRACK-NG

v1.7

INTERFACE

MODE

{isAircrackRunning ? ( <> STOP ({aircrackProgress}%) ) : ( <> START {modes.find((m) => m.id === aircrackMode)?.name.toUpperCase()} )} {isAircrackRunning && (

)} {aircrackResults && ( <>

{aircrackResults.networks.length}

Networks

{aircrackResults.handshakes.length}

Handshakes

{aircrackResults.crackedKeys.length}

Cracked

{aircrackResults.crackedKeys.length > 0 && (

CRACKED KEYS

{aircrackResults.crackedKeys.map((key, i) => (

{key.essid}

{key.key}

{key.keyType} - Cracked in {key.crackTime}

))}

)}

DETECTED NETWORKS

{aircrackResults.networks.map((network, i) => { const signal = getSignalStrength(network.power) return (

{network.essid || ""}

{network.bssid}

{[...Array(4)].map((_, j) => (

))}

{network.encryption}

CH: {network.channel} PWR: {network.power}dBm Clients: {network.clients} Data: {network.data}

) })}

)}

{aircrackResults && (

Download Report

)}

) } [V0_FILE]typescriptreact:file="components/widgets/temperature-display.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion } from "framer-motion" import { Thermometer, Droplets, Wind } from "lucide-react" import { useThemeStore, themeConfigs } from "@/store/theme-store" interface WeatherData { temperature: number humidity: number windSpeed: number condition: string unit: "C" | "F" } export function TemperatureDisplay() { const { currentTheme } = useThemeStore() const config = themeConfigs[currentTheme] const [unit, setUnit] = useState<"C" | "F">("C") const [weather, setWeather] = useState({ temperature: 22, humidity: 65, windSpeed: 12, condition: "Clear", unit: "C", }) // Simulate live temperature updates useEffect(() => { const interval = setInterval(() => { setWeather((prev) => ({ ...prev, temperature: prev.temperature + (Math.random() - 0.5) * 0.5, humidity: Math.max(30, Math.min(90, prev.humidity + (Math.random() - 0.5) * 2)), windSpeed: Math.max(0, prev.windSpeed + (Math.random() - 0.5) * 1), })) }, 5000) return () => clearInterval(interval) }, []) const displayTemp = unit === "C" ? weather.temperature : (weather.temperature * 9) / 5 + 32 const toggleUnit = () => setUnit((prev) => (prev === "C" ? "F" : "C")) return ( {/* Header */}

ENVIRONMENT

{/* Main temperature display */}

{displayTemp.toFixed(1)}°{unit}

{weather.condition}

{/* Stats grid */}

HUMIDITY

{weather.humidity.toFixed(0)}%

WIND

{weather.windSpeed.toFixed(0)} km/h

{/* Temperature bar visualization */}

-10° 50°

) } [V0_FILE]typescript:file="app/api/tools/geolocate/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { target } = await request.json() if (!target) { return NextResponse.json({ error: "Target required" }, { status: 400 }) } const response = await fetch(`https://ipapi.co/${target}/json/`) if (!response.ok) { throw new Error("Failed to fetch geolocation data") } const data = await response.json() return NextResponse.json({ ip: data.ip, city: data.city, region: data.region, country: data.country_name, location: `${data.city}, ${data.region}, ${data.country_name}`, coordinates: { lat: data.latitude, lng: data.longitude, }, isp: data.org, asn: data.asn, timezone: data.timezone, postal: data.postal, countryCode: data.country_code, }) } catch (error) { console.error("[v0] Geolocation error:", error) return NextResponse.json({ error: "Failed to geolocate target" }, { status: 500 }) } } [V0_FILE]typescript:file="app/api/tools/dns-lookup/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { domain } = await request.json() if (!domain) { return NextResponse.json({ error: "Domain required" }, { status: 400 }) } const types = ["A", "AAAA", "MX", "TXT", "NS", "CNAME"] const results: any = {} for (const type of types) { try { const response = await fetch(`https://cloudflare-dns.com/dns-query?name=${domain}&type=${type}`, { headers: { Accept: "application/dns-json" }, }) const data = await response.json() if (data.Answer) { results[type] = data.Answer.map((answer: any) => ({ name: answer.name, type: answer.type, data: answer.data, ttl: answer.TTL, })) } } catch (err) { console.error(`[v0] DNS lookup error for ${type}:`, err) } } return NextResponse.json(results) } catch (error) { console.error("[v0] DNS lookup error:", error) return NextResponse.json({ error: "Failed to perform DNS lookup" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/tools/footprint-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Footprints, Globe, Server, Mail, Share2, Code, MapPin, Loader2, Database, Shield, Lock, FileText, } from "lucide-react" import { useToolsStore, type FootprintData } from "@/store/tools-store" export function FootprintPanel() { const { footprintTarget, setFootprintTarget, footprintData, setFootprintData, isFootprinting, setIsFootprinting, addToHistory, } = useToolsStore() const [localTarget, setLocalTarget] = useState("") const [analysisStage, setAnalysisStage] = useState("") const performFootprint = async () => { if (!localTarget.trim()) return setIsFootprinting(true) setFootprintTarget(localTarget) setFootprintData(null) const stages = [ "Resolving DNS records...", "Performing WHOIS lookup...", "Scanning subdomains...", "Detecting technologies...", "Gathering email addresses...", "Analyzing SSL certificate...", "Checking security headers...", "Compiling report...", ] let geoData: any = null try { setAnalysisStage("Geolocating IP address...") const geoResponse = await fetch("/api/tools/geolocate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ target: localTarget }), }) if (geoResponse.ok) { geoData = await geoResponse.json() } } catch (error) { console.error("[v0] Geolocation error:", error) } let dnsData: any = null try { setAnalysisStage("Performing DNS lookups...") const dnsResponse = await fetch("/api/tools/dns-lookup", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ domain: localTarget }), }) if (dnsResponse.ok) { dnsData = await dnsResponse.json() } } catch (error) { console.error("[v0] DNS lookup error:", error) } for (const stage of stages) { setAnalysisStage(stage) await new Promise((resolve) => setTimeout(resolve, 400)) } const mockData: FootprintData = { domain: localTarget, ip: geoData?.ip || `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`, ipv6: `2606:4700:${Math.floor(Math.random() * 9999).toString(16)}:${Math.floor(Math.random() * 9999).toString(16)}::${Math.floor(Math.random() * 9999).toString(16)}`, location: geoData?.location || "San Francisco, CA, USA", city: geoData?.city || "San Francisco", country: geoData?.country || "United States", region: geoData?.region || "California", coordinates: geoData?.coordinates || { lat: 37.7749, lng: -122.4194 }, isp: geoData?.isp || "Cloudflare, Inc.", asn: geoData?.asn || "AS13335", organization: geoData?.isp || "Cloudflare, Inc.", dns: dnsData?.NS ? dnsData.NS.map((ns: any) => `${ns.data} (${ns.ttl}s TTL)`) : ["ns1.cloudflare.com (172.64.32.1)", "ns2.cloudflare.com (172.64.33.1)", "ns3.cloudflare.com (172.64.34.1)"], mxRecords: dnsData?.MX ? dnsData.MX.map((mx: any, i: number) => ({ priority: i + 1, host: mx.data, })) : [ { priority: 1, host: `aspmx.l.google.com` }, { priority: 5, host: `alt1.aspmx.l.google.com` }, { priority: 5, host: `alt2.aspmx.l.google.com` }, { priority: 10, host: `alt3.aspmx.l.google.com` }, { priority: 10, host: `alt4.aspmx.l.google.com` }, ], txtRecords: dnsData?.TXT ? dnsData.TXT.map((txt: any) => txt.data) : [ `v=spf1 include:_spf.google.com include:sendgrid.net ~all`, `google-site-verification=abc123xyz789`, `MS=ms12345678`, `v=DMARC1; p=quarantine; rua=mailto:dmarc@${localTarget}`, ], subdomains: [ `www.${localTarget}`, `api.${localTarget}`, `app.${localTarget}`, `mail.${localTarget}`, `blog.${localTarget}`, `dev.${localTarget}`, `staging.${localTarget}`, `admin.${localTarget}`, `cdn.${localTarget}`, `static.${localTarget}`, `docs.${localTarget}`, `status.${localTarget}`, `support.${localTarget}`, `dashboard.${localTarget}`, ], technologies: [ { name: "React", version: "18.2.0", category: "Frontend Framework" }, { name: "Next.js", version: "14.0.4", category: "Web Framework" }, { name: "Node.js", version: "20.10.0", category: "Runtime" }, { name: "PostgreSQL", version: "15.4", category: "Database" }, { name: "Redis", version: "7.2", category: "Cache" }, { name: "Nginx", version: "1.24.0", category: "Web Server" }, { name: "Cloudflare", category: "CDN/Security" }, { name: "Docker", category: "Containerization" }, { name: "Kubernetes", category: "Orchestration" }, { name: "TypeScript", version: "5.3", category: "Language" }, { name: "Tailwind CSS", version: "3.4", category: "CSS Framework" }, { name: "Vercel", category: "Hosting" }, ], emails: [ `admin@${localTarget}`, `support@${localTarget}`, `info@${localTarget}`, `security@${localTarget}`, `noreply@${localTarget}`, `contact@${localTarget}`, `sales@${localTarget}`, `careers@${localTarget}`, ], phones: ["+1 (555) 123-4567", "+1 (555) 987-6543"], socialMedia: [ { platform: "Twitter/X", url: `https://twitter.com/${localTarget.split(".")[0]}`, username: `@${localTarget.split(".")[0]}`, }, { platform: "LinkedIn", url: `https://linkedin.com/company/${localTarget.split(".")[0]}`, username: localTarget.split(".")[0], }, { platform: "GitHub", url: `https://github.com/${localTarget.split(".")[0]}`, username: localTarget.split(".")[0], }, { platform: "Facebook", url: `https://facebook.com/${localTarget.split(".")[0]}` }, { platform: "Instagram", url: `https://instagram.com/${localTarget.split(".")[0]}`, username: `@${localTarget.split(".")[0]}`, }, { platform: "YouTube", url: `https://youtube.com/@${localTarget.split(".")[0]}` }, ], sslCertificate: { issuer: "Let's Encrypt Authority X3", validFrom: "2024-01-15T00:00:00Z", validTo: "2024-04-14T23:59:59Z", algorithm: "RSA 2048-bit", fingerprint: "A1:B2:C3:D4:E5:F6:A7:B8:C9:D0:E1:F2:A3:B4:C5:D6:E7:F8:A9:B0", }, headers: [ { name: "Server", value: "cloudflare" }, { name: "X-Powered-By", value: "Next.js" }, { name: "Content-Type", value: "text/html; charset=utf-8" }, { name: "Cache-Control", value: "public, max-age=31536000, immutable" }, { name: "X-Frame-Options", value: "SAMEORIGIN" }, { name: "X-Content-Type-Options", value: "nosniff" }, { name: "Referrer-Policy", value: "strict-origin-when-cross-origin" }, ], whois: { registrar: "Cloudflare, Inc.", createdDate: "2010-03-15", expiryDate: "2025-03-15", updatedDate: "2024-02-01", nameServers: dnsData?.NS ? dnsData.NS.map((ns: any) => ns.data) : ["ns1.cloudflare.com", "ns2.cloudflare.com"], status: ["clientTransferProhibited", "clientUpdateProhibited"], }, securityHeaders: [ { header: "X-Frame-Options", present: true, value: "SAMEORIGIN" }, { header: "X-XSS-Protection", present: true, value: "1; mode=block" }, { header: "X-Content-Type-Options", present: true, value: "nosniff" }, { header: "Strict-Transport-Security", present: true, value: "max-age=31536000; includeSubDomains" }, { header: "Content-Security-Policy", present: true, value: "default-src 'self'" }, { header: "Referrer-Policy", present: true, value: "strict-origin-when-cross-origin" }, { header: "Permissions-Policy", present: false }, ], openPorts: [80, 443, 22], robots: ["User-agent: *", "Disallow: /admin/", "Disallow: /private/", "Sitemap: /sitemap.xml"], sitemap: [ `https://${localTarget}/sitemap.xml`, `https://${localTarget}/sitemap-posts.xml`, `https://${localTarget}/sitemap-pages.xml`, ], } setFootprintData(mockData) setIsFootprinting(false) addToHistory({ type: "footprint", query: localTarget, results: mockData, }) } const CollapsibleSection = ({ icon: Icon, title, children, color, defaultOpen = false, }: { icon: any; title: string; children: React.ReactNode; color: string; defaultOpen?: boolean }) => { const [isOpen, setIsOpen] = useState(defaultOpen) return (

{isOpen && (

{children}

)}

) } return ( {/* Header */}

FOOTPRINTING

OSINT

{/* Target Input */}

setLocalTarget(e.target.value)} onKeyDown={(e) => e.key === "Enter" && performFootprint()} placeholder="Enter domain name..." className="w-full rounded border border-[#4ade80]/30 bg-[#4ade80]/5 px-4 py-3 pl-10 font-mono text-sm text-white placeholder-[#4ade80]/40 outline-none transition-colors focus:border-[#4ade80]/60" />

{isFootprinting ? : "ANALYZE"}

{/* Analysis Types */}

{["WHOIS", "DNS Records", "Subdomains", "Technologies", "Social Media", "SSL Cert", "Security Headers"].map( (type) => ( {type} ), )}

{/* Results */}

{isFootprinting ? (

{analysisStage}

{[0, 1, 2].map((i) => ( ))}

) : footprintData ? ( {/* Main Info Card */}

{footprintData.domain}

IPv4 Address

{footprintData.ip}

IPv6 Address

{footprintData.ipv6}

Location

{footprintData.location}

ASN

{footprintData.asn}

Organization / ISP

{footprintData.organization || footprintData.isp}

{/* WHOIS Section */} {footprintData.whois && (

Registrar

{footprintData.whois.registrar}

Created

{footprintData.whois.createdDate}

Expires

{footprintData.whois.expiryDate}

Last Updated

{footprintData.whois.updatedDate}

Status

{footprintData.whois.status.map((s, i) => ( {s} ))}

)} {/* DNS Section */}

Name Servers

{footprintData.dns.map((ns, i) => (

{ns}

))}

{footprintData.mxRecords && (

MX Records

{footprintData.mxRecords.map((mx, i) => (

[{mx.priority}] {mx.host}

))}

)} {footprintData.txtRecords && (

TXT Records

{footprintData.txtRecords.map((txt, i) => (

{txt}

))}

)}

{/* Subdomains */}

{footprintData.subdomains.map((sub, i) => ( {sub} ))}

{/* Technologies */}

{footprintData.technologies.map((tech, i) => (

{tech.name} {tech.version && v{tech.version}}

{tech.category}

))}

{/* SSL Certificate */} {footprintData.sslCertificate && (

Issuer

{footprintData.sslCertificate.issuer}

Algorithm

{footprintData.sslCertificate.algorithm}

Valid From

{new Date(footprintData.sslCertificate.validFrom).toLocaleDateString()}

Valid To

{new Date(footprintData.sslCertificate.validTo).toLocaleDateString()}

Fingerprint

{footprintData.sslCertificate.fingerprint}

)} {/* Security Headers */} {footprintData.securityHeaders && (

{footprintData.securityHeaders.map((header, i) => (

{header.header} {header.present ? "Present" : "Missing"}

))}

)} {/* Emails */}

{footprintData.emails.map((email, i) => ( {email} ))}

{/* Social Media */}

{footprintData.socialMedia.map((social, i) => (

{social.platform} {social.username || social.url}

))}

) : (

Enter a domain to gather intelligence

Collects WHOIS, DNS, subdomains, technologies, SSL, and more

)}

) } [V0_FILE]typescriptreact:file="components/tools/research-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Search, Globe, FileText, X, ExternalLink, Loader2, Clock, User, Star, BookOpen, ImageIcon, Calendar, } from "lucide-react" import { useToolsStore, type SearchResult } from "@/store/tools-store" export function ResearchPanel() { const { searchQuery, setSearchQuery, searchResults, setSearchResults, isSearching, setIsSearching, addToHistory } = useToolsStore() const [localQuery, setLocalQuery] = useState("") const [searchType, setSearchType] = useState<"web" | "news" | "academic" | "images">("web") const performSearch = async () => { if (!localQuery.trim()) return setIsSearching(true) setSearchQuery(localQuery) let apiResults: SearchResult[] = [] try { const response = await fetch("/api/tools/web-search", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: localQuery }), }) if (response.ok) { const data = await response.json() apiResults = data.results || [] } } catch (error) { console.error("[v0] Search API error:", error) } // Simulated delay for realistic feel await new Promise((resolve) => setTimeout(resolve, 1500)) const results = apiResults.length > 0 ? apiResults : generateResults() setSearchResults(results) setIsSearching(false) addToHistory({ type: "research", query: localQuery, results: results, }) } const generateResults = (): SearchResult[] => { const query = localQuery.toLowerCase() const currentDate = new Date() const baseResults: SearchResult[] = [ { title: `Comprehensive Guide to ${localQuery} - Complete Analysis 2024`, url: `https://research.bakr.ai/guides/${localQuery.replace(/\s/g, "-").toLowerCase()}`, snippet: `An in-depth exploration of ${localQuery} covering fundamental concepts, advanced techniques, industry applications, and future trends. This comprehensive guide includes case studies, expert interviews, and practical implementation strategies. Updated with the latest research and developments from leading institutions worldwide.`, source: "Bakr AI Research Institute", publishedDate: new Date(currentDate.getTime() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString(), author: "Dr. Sarah Chen, PhD", category: "Research Paper", relevanceScore: 98, wordCount: 15420, readTime: "45 min read", }, { title: `${localQuery}: Technical Deep Dive and Implementation Guide`, url: `https://techjournal.io/articles/${localQuery.replace(/\s/g, "-").toLowerCase()}-deep-dive`, snippet: `Detailed technical documentation covering architecture patterns, best practices, performance optimization, security considerations, and scalability strategies for ${localQuery}. Includes code examples in multiple programming languages, benchmark comparisons, and troubleshooting guides from real-world production environments.`, source: "Tech Journal International", publishedDate: new Date(currentDate.getTime() - Math.random() * 14 * 24 * 60 * 60 * 1000).toISOString(), author: "Michael Rodriguez", category: "Technical Documentation", relevanceScore: 95, wordCount: 8750, readTime: "25 min read", }, { title: `Breaking: Latest Developments in ${localQuery} - Industry Report`, url: `https://globalnews.tech/reports/${localQuery.replace(/\s/g, "-").toLowerCase()}-latest`, snippet: `Real-time coverage of the latest breakthroughs, market movements, and regulatory changes affecting ${localQuery}. Expert analysis from industry leaders, market forecasts, investment trends, and competitive landscape overview. Includes exclusive interviews with key stakeholders and decision-makers.`, source: "Global Tech News", publishedDate: new Date(currentDate.getTime() - Math.random() * 2 * 24 * 60 * 60 * 1000).toISOString(), author: "Jennifer Walsh", category: "News & Analysis", relevanceScore: 92, wordCount: 3200, readTime: "10 min read", }, { title: `${localQuery} - Academic Research and Peer-Reviewed Studies`, url: `https://academic.research.org/papers/${localQuery.replace(/\s/g, "-").toLowerCase()}`, snippet: `Collection of peer-reviewed academic papers, research studies, and scientific publications on ${localQuery}. Includes meta-analyses, systematic reviews, and original research from top universities including MIT, Stanford, Oxford, and Cambridge. Citation index and impact factor analysis included.`, source: "Academic Research Foundation", publishedDate: new Date(currentDate.getTime() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(), author: "Prof. James Morrison et al.", category: "Academic", relevanceScore: 94, wordCount: 22000, readTime: "60 min read", }, { title: `${localQuery} Tutorial: From Beginner to Expert`, url: `https://learnhub.io/tutorials/${localQuery.replace(/\s/g, "-").toLowerCase()}-complete`, snippet: `Step-by-step tutorial covering ${localQuery} from foundational concepts to advanced mastery. Includes interactive exercises, quizzes, hands-on projects, and certification preparation. Over 50 video lessons, downloadable resources, community forum access, and mentor support available.`, source: "LearnHub Academy", publishedDate: new Date(currentDate.getTime() - Math.random() * 21 * 24 * 60 * 60 * 1000).toISOString(), author: "David Kim", category: "Educational", relevanceScore: 89, wordCount: 12500, readTime: "35 min read", }, { title: `Industry Analysis: ${localQuery} Market Size and Growth Projections`, url: `https://marketinsights.com/analysis/${localQuery.replace(/\s/g, "-").toLowerCase()}-market`, snippet: `Comprehensive market analysis of ${localQuery} including market size estimation ($45.2B by 2025), growth rate projections (CAGR 23.4%), competitive analysis, regional breakdown, key players, emerging trends, investment opportunities, and risk assessment. Data sourced from 500+ enterprise surveys.`, source: "Market Insights Global", publishedDate: new Date(currentDate.getTime() - Math.random() * 10 * 24 * 60 * 60 * 1000).toISOString(), author: "Analytics Team", category: "Market Research", relevanceScore: 91, wordCount: 18200, readTime: "50 min read", }, { title: `${localQuery}: Security Considerations and Best Practices`, url: `https://securityfocus.net/guides/${localQuery.replace(/\s/g, "-").toLowerCase()}-security`, snippet: `Essential security guide covering vulnerabilities, threat models, mitigation strategies, compliance requirements (GDPR, SOC2, HIPAA), penetration testing results, and incident response procedures related to ${localQuery}. Includes security audit checklist and risk assessment frameworks.`, source: "Security Focus Network", publishedDate: new Date(currentDate.getTime() - Math.random() * 5 * 24 * 60 * 60 * 1000).toISOString(), author: "Alex Thompson, CISSP", category: "Security", relevanceScore: 88, wordCount: 9800, readTime: "28 min read", }, { title: `Case Study: How Fortune 500 Companies Implement ${localQuery}`, url: `https://businesscase.io/studies/${localQuery.replace(/\s/g, "-").toLowerCase()}-enterprise`, snippet: `Real-world case studies from Google, Amazon, Microsoft, Apple, and 25+ Fortune 500 companies showing successful ${localQuery} implementations. ROI analysis, implementation timelines, lessons learned, team structures, budget breakdowns, and executive interviews included.`, source: "Business Case Institute", publishedDate: new Date(currentDate.getTime() - Math.random() * 15 * 24 * 60 * 60 * 1000).toISOString(), author: "Enterprise Research Team", category: "Case Study", relevanceScore: 93, wordCount: 14300, readTime: "40 min read", }, ] return baseResults.sort((a, b) => (b.relevanceScore || 0) - (a.relevanceScore || 0)) } const formatDate = (dateString?: string) => { if (!dateString) return "" const date = new Date(dateString) const now = new Date() const diff = now.getTime() - date.getTime() const days = Math.floor(diff / (1000 * 60 * 60 * 24)) if (days === 0) return "Today" if (days === 1) return "Yesterday" if (days < 7) return `${days} days ago` return date.toLocaleDateString() } return ( {/* Header */}

RESEARCH TOOLS

ONLINE

{/* Search Input */}

setLocalQuery(e.target.value)} onKeyDown={(e) => e.key === "Enter" && performSearch()} placeholder="Enter search query..." className="w-full rounded border border-[#00d4ff]/30 bg-[#00d4ff]/5 px-4 py-3 pr-10 font-mono text-sm text-white placeholder-[#00d4ff]/40 outline-none transition-colors focus:border-[#00d4ff]/60" /> {localQuery && ( )}

{isSearching ? : "SEARCH"}

{/* Search Type Tabs */}

{[ { id: "web", label: "Web Search", icon: Globe }, { id: "news", label: "News", icon: FileText }, { id: "academic", label: "Academic", icon: BookOpen }, { id: "images", label: "Images", icon: ImageIcon }, ].map((type) => ( ))}

{/* Results */}

{isSearching ? (

Searching databases...

Analyzing 50+ sources

) : searchResults.length > 0 ? (

{searchResults.length} results for "{searchQuery}"

Sorted by relevance

{searchResults.map((result, index) => (

{/* Title and relevance */}

{result.title}

{result.relevanceScore && (

{result.relevanceScore}%

)}

{/* URL */}

{result.url}

{/* Snippet */}

{result.snippet}

{/* Metadata row */}

{result.source} {result.category && ( {result.category} )} {result.author && ( {result.author} )} {result.publishedDate && ( {formatDate(result.publishedDate)} )} {result.readTime && ( {result.readTime} )}

))} ) : (

Enter a query to begin research

Search across web, news, academic papers, and images

)}

) } [V0_FILE]typescript:file="app/api/tools/web-search/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { query } = await request.json() if (!query) { return NextResponse.json({ error: "Query required" }, { status: 400 }) } console.log("[v0] Web search query:", query) try { const response = await fetch( `https://api.duckduckgo.com/?q=${encodeURIComponent(query)}&format=json&no_html=1&skip_disambig=1`, { headers: { "User-Agent": "BakrAI/1.0" }, signal: AbortSignal.timeout(5000), // 5 second timeout }, ) // Check if response is ok and has content if (!response.ok) { throw new Error(`DuckDuckGo API returned ${response.status}`) } const text = await response.text() // Check if response is empty if (!text || text.trim() === "") { throw new Error("Empty response from DuckDuckGo") } let data try { data = JSON.parse(text) } catch (parseError) { console.error("[v0] Invalid JSON from DuckDuckGo:", text.substring(0, 200)) throw new Error("Invalid JSON response") } const results = [] // Add abstract if available if (data.Abstract) { results.push({ title: data.Heading || query, url: data.AbstractURL, snippet: data.Abstract, source: data.AbstractSource || "DuckDuckGo", relevanceScore: 95, author: data.AbstractSource || "Unknown", publishedDate: new Date().toISOString().split("T")[0], category: "Information", readTime: "3 min read", }) } // Add related topics if (data.RelatedTopics && Array.isArray(data.RelatedTopics)) { for (const topic of data.RelatedTopics.slice(0, 10)) { if (topic.Text && topic.FirstURL) { results.push({ title: topic.Text.split(" - ")[0] || topic.Text.substring(0, 60), url: topic.FirstURL, snippet: topic.Text, source: "DuckDuckGo", relevanceScore: 85, author: "DuckDuckGo", publishedDate: new Date().toISOString().split("T")[0], category: "Related Topic", readTime: "2 min read", }) } } } // If we got results from the API, return them if (results.length > 0) { console.log("[v0] Web search found", results.length, "results from API") return NextResponse.json({ results }) } // If no results from API, fall through to mock data throw new Error("No results from DuckDuckGo API") } catch (apiError) { console.log("[v0] DuckDuckGo API failed, using enhanced mock data:", apiError) const mockResults = generateMockResults(query) return NextResponse.json({ results: mockResults }) } } catch (error) { console.error("[v0] Web search error:", error) return NextResponse.json({ error: "Failed to perform search" }, { status: 500 }) } } function generateMockResults(query: string) { const lowerQuery = query.toLowerCase() // Generate contextual results based on query const results = [] // Add primary result results.push({ title: `Comprehensive Guide to ${query}`, url: `https://example.com/guide/${encodeURIComponent(query.replace(/\s+/g, "-"))}`, snippet: `This comprehensive guide covers everything you need to know about ${query}, including best practices, common pitfalls, advanced techniques, and real-world applications. Learn from industry experts and stay up-to-date with the latest developments.`, source: "TechDocs", relevanceScore: 98, author: "Dr. Sarah Mitchell", publishedDate: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Tutorial", readTime: "12 min read", }) // Add research paper results.push({ title: `Research Paper: Advanced ${query} Methodologies`, url: `https://scholar.example.com/papers/${encodeURIComponent(query)}`, snippet: `Recent research has revealed new insights into ${query}. This paper presents findings from a 5-year study involving over 10,000 data points, demonstrating significant improvements in efficiency and accuracy.`, source: "Academic Journal of Technology", relevanceScore: 95, author: "Prof. James Chen et al.", publishedDate: new Date(Date.now() - Math.random() * 60 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Research", readTime: "25 min read", }) // Add practical tutorial results.push({ title: `How to Master ${query}: A Step-by-Step Tutorial`, url: `https://tutorials.example.com/${encodeURIComponent(query)}`, snippet: `Learn ${query} from scratch with this hands-on tutorial. Includes code examples, video demonstrations, practice exercises, and downloadable resources. Perfect for beginners and intermediate learners.`, source: "Dev Academy", relevanceScore: 92, author: "Emma Rodriguez", publishedDate: new Date(Date.now() - Math.random() * 15 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Tutorial", readTime: "18 min read", }) // Add industry news results.push({ title: `Latest Developments in ${query} - Industry Report 2025`, url: `https://industry-news.example.com/reports/${encodeURIComponent(query)}`, snippet: `Breaking news in the ${query} space: Major companies announce new initiatives, market trends show 45% growth year-over-year, and experts predict significant disruption in the coming months. Includes analysis from top industry leaders.`, source: "TechCrunch", relevanceScore: 90, author: "Michael Zhang", publishedDate: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "News", readTime: "8 min read", }) // Add best practices results.push({ title: `${query}: Best Practices and Common Mistakes to Avoid`, url: `https://best-practices.example.com/${encodeURIComponent(query)}`, snippet: `Discover the do's and don'ts of ${query}. This article covers security considerations, performance optimization, scalability patterns, and lessons learned from Fortune 500 implementations.`, source: "Enterprise Tech Review", relevanceScore: 89, author: "Lisa Thompson", publishedDate: new Date(Date.now() - Math.random() * 20 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Best Practices", readTime: "10 min read", }) // Add comparison article results.push({ title: `${query} vs Alternatives: Which One Should You Choose?`, url: `https://compare.example.com/${encodeURIComponent(query)}`, snippet: `An in-depth comparison of ${query} against leading alternatives. We benchmark performance, analyze cost-effectiveness, evaluate ease of use, and provide recommendations based on your specific use case.`, source: "Tech Comparison Hub", relevanceScore: 87, author: "David Kumar", publishedDate: new Date(Date.now() - Math.random() * 10 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Comparison", readTime: "15 min read", }) // Add case study results.push({ title: `Case Study: How Company X Used ${query} to 10x Their Results`, url: `https://case-studies.example.com/${encodeURIComponent(query)}`, snippet: `Real-world success story: Learn how a Fortune 500 company implemented ${query} to achieve remarkable results. Includes metrics, challenges faced, solutions implemented, and ROI analysis with detailed charts and graphs.`, source: "Business Case Studies", relevanceScore: 85, author: "Rachel Williams", publishedDate: new Date(Date.now() - Math.random() * 25 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Case Study", readTime: "14 min read", }) // Add video tutorial results.push({ title: `Video Course: Complete ${query} Masterclass (8 Hours)`, url: `https://video-learning.example.com/${encodeURIComponent(query)}`, snippet: `Comprehensive video course covering ${query} from fundamentals to advanced topics. Includes 8 hours of HD video content, downloadable code samples, quizzes, and a certificate of completion. Rated 4.9/5 by 15,000+ students.`, source: "Online Learning Platform", relevanceScore: 84, author: "Tech Academy", publishedDate: new Date(Date.now() - Math.random() * 40 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Video Course", readTime: "5 min preview", }) // Add documentation results.push({ title: `Official ${query} Documentation and API Reference`, url: `https://docs.example.com/${encodeURIComponent(query)}`, snippet: `Complete official documentation for ${query}. Includes API reference, configuration guides, troubleshooting tips, migration guides, and community-contributed examples. Always up-to-date with the latest version.`, source: "Official Documentation", relevanceScore: 93, author: "Official Team", publishedDate: new Date(Date.now() - Math.random() * 5 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Documentation", readTime: "Reference", }) // Add community discussion results.push({ title: `${query} Discussion: Tips, Tricks, and Community Insights`, url: `https://forum.example.com/discussions/${encodeURIComponent(query)}`, snippet: `Active community discussion about ${query} with over 2,500 posts. Users share their experiences, troubleshooting solutions, optimization tips, and innovative use cases. Moderated by industry experts.`, source: "Dev Community Forum", relevanceScore: 82, author: "Community Contributors", publishedDate: new Date(Date.now() - Math.random() * 3 * 24 * 60 * 60 * 1000).toISOString().split("T")[0], category: "Community", readTime: "Ongoing discussion", }) return results } [V0_FILE]typescriptreact:file="components/tools/video-generator-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { X, Video, Wand2, Download, Play, Pause } from "lucide-react" import { useToolsStore } from "@/store/tools-store" export function VideoGeneratorPanel() { const { setActiveTool } = useToolsStore() const [prompt, setPrompt] = useState("") const [style, setStyle] = useState("realistic") const [duration, setDuration] = useState("5") const [isGenerating, setIsGenerating] = useState(false) const [progress, setProgress] = useState(0) const [generatedVideo, setGeneratedVideo] = useState(null) const [isPlaying, setIsPlaying] = useState(false) const styles = [ { id: "realistic", name: "Realistic", desc: "Photorealistic video generation" }, { id: "anime", name: "Anime", desc: "Japanese animation style" }, { id: "3d", name: "3D Animation", desc: "Pixar-style 3D rendering" }, { id: "cinematic", name: "Cinematic", desc: "Movie-quality production" }, { id: "abstract", name: "Abstract", desc: "Artistic and experimental" }, ] const handleGenerate = async () => { if (!prompt.trim()) return setIsGenerating(true) setProgress(0) setGeneratedVideo(null) // Simulate video generation progress const interval = setInterval(() => { setProgress((prev) => { if (prev >= 100) { clearInterval(interval) setIsGenerating(false) // Simulate generated video setGeneratedVideo( `/placeholder.svg?height=720&width=1280&query=${encodeURIComponent(prompt + " " + style + " style video")}`, ) return 100 } return prev + 2 }) }, 100) } return ( setActiveTool(null)} > e.stopPropagation()} className="relative w-full max-w-4xl overflow-hidden rounded-lg border border-purple-500/30 bg-black/95 shadow-2xl" style={{ maxHeight: "85vh" }} >

Video Prompt

setPrompt(e.target.value)}
              placeholder="Describe the video you want to generate... (e.g., 'A cyberpunk city at night with flying cars and neon lights')"
              className="h-24 w-full rounded-lg border border-purple-500/30 bg-black/50 px-4 py-3 font-mono text-sm text-white placeholder-white/30 focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20"
            />
          </div>

<div>
            <label className="mb-2 block text-sm font-medium text-white/80">Style</label>
            <div className="grid grid-cols-2 gap-3 md:grid-cols-5">
              {styles.map((s) => (
                <button
                  key={s.id}
                  onClick={() => setStyle(s.id)}
                  className={`rounded-lg border p-3 text-left transition-all ${
                    style === s.id
                      ? "border-purple-500 bg-purple-500/20"
                      : "border-white/10 bg-white/5 hover:border-purple-500/50"
                  }`}
                >
                  <div className="text-sm font-semibold text-white">{s.name}</div>
                  <div className="mt-1 text-xs text-white/60">{s.desc}</div>
                </button>
              ))}
            </div>
          </div>

<div>
            <label className="mb-2 block text-sm font-medium text-white/80">Duration</label>
            <select
              value={duration}
              onChange={(e) => setDuration(e.target.value)}
              className="w-full rounded-lg border border-purple-500/30 bg-black/50 px-4 py-2 font-mono text-sm text-white focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500/20"
            >
              <option value="3">3 seconds</option>
              <option value="5">5 seconds</option>
              <option value="10">10 seconds</option>
              <option value="15">15 seconds</option>
              <option value="30">30 seconds</option>
            </select>
          </div>

{isGenerating && (
            <div className="rounded-lg border border-purple-500/30 bg-purple-500/10 p-4">
              <div className="mb-2 flex items-center justify-between text-sm text-white">
                <span>Generating video...</span>
                <span className="font-mono">{progress}%</span>
              </div>
              <div className="h-2 overflow-hidden rounded-full bg-white/10">
                <motion.div
                  initial={{ width: 0 }}
                  animate={{ width: `${progress}%` }}
                  className="h-full bg-gradient-to-r from-purple-500 to-pink-500"
                />
              </div>
              <div className="mt-2 text-xs text-white/60">Processing frames • Applying style • Rendering output</div>
            </div>
          )}

{generatedVideo && (
            <div className="space-y-4 rounded-lg border border-purple-500/30 bg-purple-500/10 p-4">
              <div className="relative aspect-video overflow-hidden rounded-lg bg-black">
                <img
                  src={generatedVideo || "/placeholder.svg"}
                  alt="Generated video preview"
                  className="h-full w-full object-cover"
                />
                <div className="absolute inset-0 flex items-center justify-center">
                  <button
                    onClick={() => setIsPlaying(!isPlaying)}
                    className="rounded-full bg-purple-500/90 p-4 text-white transition-transform hover:scale-110 hover:bg-purple-500"
                  >
                    {isPlaying ? <Pause className="h-8 w-8" /> : <Play className="h-8 w-8" />}
                  </button>
                </div>
              </div>
              <div className="flex gap-3">
                <button className="flex flex-1 items-center justify-center gap-2 rounded-lg border border-purple-500/50 bg-purple-500/20 px-4 py-2 font-mono text-sm text-white transition-colors hover:from-purple-500 hover:to-pink-500">
                  <Download className="h-4 w-4" />
                  Download MP4
                </button>
                <button
                  onClick={() => setGeneratedVideo(null)}
                  className="rounded-lg border border-white/20 bg-white/5 px-4 py-2 font-mono text-sm text-white transition-colors hover:bg-white/10"
                >
                  Generate New
                </button>
              </div>
            </div>
          )}

<button
            onClick={handleGenerate}
            disabled={!prompt.trim() || isGenerating}
            className="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-3 font-mono text-white transition-all hover:from-purple-500 hover:to-pink-500 disabled:cursor-not-allowed disabled:opacity-50"
          >
            <Wand2 className="h-5 w-5" />
            {isGenerating ? "Generating..." : "Generate Video"}
          </button>
        </div>
      </motion.div>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/sublister-panel.tsx" isMerged="true"
"use client"
import { motion } from "framer-motion"
import { Globe, Download, CheckCircle } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function SublisterPanel() {
  const {
    sublisterDomain,
    setSublisterDomain,
    sublisterResults,
    setSublisterResults,
    sublisterLoading,
    setSublisterLoading,
    addToHistory,
  } = useToolsStore()

const performEnumeration = async () => {
    if (!sublisterDomain.trim()) return

setSublisterLoading(true)
    setSublisterResults([])

await new Promise((resolve) => setTimeout(resolve, 3000))

const mockSubdomains = [
      "www." + sublisterDomain,
      "mail." + sublisterDomain,
      "ftp." + sublisterDomain,
      "admin." + sublisterDomain,
      "api." + sublisterDomain,
      "blog." + sublisterDomain,
      "cdn." + sublisterDomain,
      "dev." + sublisterDomain,
      "staging." + sublisterDomain,
      "test." + sublisterDomain,
      "vpn." + sublisterDomain,
      "shop." + sublisterDomain,
      "portal." + sublisterDomain,
      "support." + sublisterDomain,
      "docs." + sublisterDomain,
      "forum." + sublisterDomain,
      "chat." + sublisterDomain,
      "store." + sublisterDomain,
      "app." + sublisterDomain,
      "beta." + sublisterDomain,
    ]

setSublisterResults(mockSubdomains)
    setSublisterLoading(false)

addToHistory({
      type: "sublister",
      query: sublisterDomain,
      timestamp: Date.now(),
      results: mockSubdomains.length,
    })
  }

const downloadResults = () => {
    const report = `SUBLIST3R ENUMERATION REPORT
===========================
Target: ${sublisterDomain}
Date: ${new Date().toLocaleString()}
Subdomains Found: ${sublisterResults.length}

Discovered Subdomains:
${sublisterResults.map((sub) => `  • ${sub}`).join("\n")}
`
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `sublist3r-${sublisterDomain}-${Date.now()}.txt`
    a.click()
  }

return (
    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-purple-500/30 bg-black/95">
      <div className="border-b border-purple-500/30 bg-gradient-to-r from-purple-900/20 to-pink-900/20 p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Globe className="h-5 w-5 text-purple-400" />
            <h2 className="font-mono text-lg font-bold text-purple-400">Sublist3r - Subdomain Enumeration</h2>
          </div>
          {sublisterResults.length > 0 && (
            <button
              onClick={downloadResults}
              className="flex items-center gap-2 rounded bg-purple-500/20 px-3 py-1 font-mono text-sm text-purple-400 transition-colors hover:bg-purple-500/30"
            >
              <Download className="h-4 w-4" />
              Export
            </button>
          )}
        </div>
        <p className="mt-2 text-xs text-white/60">Fast subdomain enumeration tool using multiple search engines</p>
      </div>

<div className="flex-1 overflow-y-auto p-4">
        <div className="mb-4 flex gap-2">
          <input
            type="text"
            value={sublisterDomain}
            onChange={(e) => setSublisterDomain(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && performEnumeration()}
            placeholder="Enter domain (e.g., example.com)"
            className="flex-1 rounded border border-purple-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/40 focus:border-purple-500 focus:outline-none"
          />
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={performEnumeration}
            disabled={sublisterLoading || !sublisterDomain.trim()}
            className="rounded bg-purple-500 px-6 py-2 font-mono text-sm font-bold text-black transition-opacity disabled:opacity-50"
          >
            {sublisterLoading ? "Enumerating..." : "Start"}
          </motion.button>
        </div>

{sublisterLoading && (
          <div className="flex flex-col items-center justify-center py-12">
            <div className="h-12 w-12 animate-spin rounded-full border-4 border-purple-500/20 border-t-purple-500" />
            <p className="mt-4 font-mono text-sm text-purple-400">Searching across multiple sources...</p>
            <div className="mt-6 w-full max-w-md space-y-2">
              {["Google", "Bing", "Yahoo", "Ask", "Baidu", "Netcraft", "DNSdumpster", "VirusTotal"].map((source, i) => (
                <motion.div
                  key={source}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: i * 0.2 }}
                  className="flex items-center justify-between rounded border border-purple-500/30 bg-black/50 p-2"
                >
                  <span className="font-mono text-xs text-white/60">{source}</span>
                  <CheckCircle className="h-4 w-4 text-green-400" />
                </motion.div>
              ))}
            </div>
          </div>
        )}

{!sublisterLoading && sublisterResults.length > 0 && (
          <div className="space-y-3">
            <div className="rounded border border-purple-500/30 bg-purple-500/5 p-3">
              <p className="font-mono text-sm text-purple-400">
                Found <span className="font-bold">{sublisterResults.length}</span> subdomains for {sublisterDomain}
              </p>
            </div>

<div className="grid gap-2">
              {sublisterResults.map((subdomain, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.05 }}
                  className="flex items-center justify-between rounded border border-purple-500/30 bg-black/50 p-3 transition-colors hover:border-purple-500/50"
                >
                  <span className="font-mono text-sm text-white">{subdomain}</span>
                  <div className="flex gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    <button
                      onClick={() => window.open(`https://${subdomain}`, "_blank")}
                      className="font-mono text-xs text-purple-400 hover:text-purple-300"
                    >
                      Visit →
                    </button>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/theharvester-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Search, Mail, User, Link, Download } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function TheHarvesterPanel() {
  const {
    theharvesterDomain,
    setTheharvesterDomain,
    theharvesterResults,
    setTheharvesterResults,
    theharvesterLoading,
    setTheharvesterLoading,
    addToHistory,
  } = useToolsStore()

const [selectedSource, setSelectedSource] = useState("all")

const performHarvest = async () => {
    if (!theharvesterDomain.trim()) return

setTheharvesterLoading(true)
    setTheharvesterResults(null)

await new Promise((resolve) => setTimeout(resolve, 4000))

const mockResults = {
      emails: [
        `admin@${theharvesterDomain}`,
        `support@${theharvesterDomain}`,
        `info@${theharvesterDomain}`,
        `contact@${theharvesterDomain}`,
        `sales@${theharvesterDomain}`,
        `marketing@${theharvesterDomain}`,
        `hr@${theharvesterDomain}`,
        `noreply@${theharvesterDomain}`,
      ],
      hosts: [
        `www.${theharvesterDomain}`,
        `mail.${theharvesterDomain}`,
        `ftp.${theharvesterDomain}`,
        `vpn.${theharvesterDomain}`,
        `webmail.${theharvesterDomain}`,
        `remote.${theharvesterDomain}`,
      ],
      people: [
        { name: "John Smith", position: "CEO", source: "LinkedIn" },
        { name: "Jane Doe", position: "CTO", source: "LinkedIn" },
        { name: "Bob Johnson", position: "Security Manager", source: "LinkedIn" },
        { name: "Alice Williams", position: "Developer", source: "GitHub" },
      ],
      urls: [
        `https://${theharvesterDomain}/login`,
        `https://${theharvesterDomain}/admin`,
        `https://${theharvesterDomain}/api`,
        `https://${theharvesterDomain}/documentation`,
        `https://${theharvesterDomain}/support`,
      ],
      socialMedia: [
        { platform: "LinkedIn", url: `https://linkedin.com/company/${theharvesterDomain}` },
        { platform: "Twitter", url: `https://twitter.com/${theharvesterDomain}` },
        { platform: "Facebook", url: `https://facebook.com/${theharvesterDomain}` },
        { platform: "GitHub", url: `https://github.com/${theharvesterDomain}` },
      ],
    }

setTheharvesterResults(mockResults)
    setTheharvesterLoading(false)

addToHistory({
      type: "theharvester",
      query: theharvesterDomain,
      timestamp: Date.now(),
      results: mockResults.emails.length + mockResults.hosts.length + mockResults.people.length,
    })
  }

const downloadReport = () => {
    if (!theharvesterResults) return

const report = `THE HARVESTER OSINT REPORT
===========================
Target: ${theharvesterDomain}
Date: ${new Date().toLocaleString()}
Source: ${selectedSource}

EMAILS FOUND (${theharvesterResults.emails.length}):
${theharvesterResults.emails.map((email) => `  • ${email}`).join("\n")}

HOSTS DISCOVERED (${theharvesterResults.hosts.length}):
${theharvesterResults.hosts.map((host) => `  • ${host}`).join("\n")}

PEOPLE IDENTIFIED (${theharvesterResults.people.length}):
${theharvesterResults.people.map((person) => `  • ${person.name} - ${person.position} (${person.source})`).join("\n")}

URLS FOUND (${theharvesterResults.urls.length}):
${theharvesterResults.urls.map((url) => `  • ${url}`).join("\n")}

SOCIAL MEDIA:
${theharvesterResults.socialMedia.map((social) => `  • ${social.platform}: ${social.url}`).join("\n")}
`
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `theharvester-${theharvesterDomain}-${Date.now()}.txt`
    a.click()
  }

return (
    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-green-500/30 bg-black/95">
      <div className="border-b border-green-500/30 bg-gradient-to-r from-green-900/20 to-emerald-900/20 p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Search className="h-5 w-5 text-green-400" />
            <h2 className="font-mono text-lg font-bold text-green-400">theHarvester - OSINT Tool</h2>
          </div>
          {theharvesterResults && (
            <button
              onClick={downloadReport}
              className="flex items-center gap-2 rounded bg-green-500/20 px-3 py-1 font-mono text-sm text-green-400 transition-colors hover:bg-green-500/30"
            >
              <Download className="h-4 w-4" />
              Export
            </button>
          )}
        </div>
        <p className="mt-2 text-xs text-white/60">Gather emails, subdomains, hosts, employee names, and more</p>
      </div>

<div className="flex-1 overflow-y-auto p-4">
        <div className="mb-4 space-y-2">
          <div className="flex gap-2">
            <input
              type="text"
              value={theharvesterDomain}
              onChange={(e) => setTheharvesterDomain(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && performHarvest()}
              placeholder="Enter domain (e.g., example.com)"
              className="flex-1 rounded border border-green-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/40 focus:border-green-500 focus:outline-none"
            />
            <select
              value={selectedSource}
              onChange={(e) => setSelectedSource(e.target.value)}
              className="rounded border border-green-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white focus:border-green-500 focus:outline-none"
            >
              <option value="all">All Sources</option>
              <option value="google">Google</option>
              <option value="bing">Bing</option>
              <option value="linkedin">LinkedIn</option>
              <option value="twitter">Twitter</option>
              <option value="shodan">Shodan</option>
            </select>
          </div>
          <motion.button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={performHarvest}
            disabled={theharvesterLoading || !theharvesterDomain.trim()}
            className="w-full rounded bg-green-500 px-6 py-2 font-mono text-sm font-bold text-black transition-opacity disabled:opacity-50"
          >
            {theharvesterLoading ? "Harvesting..." : "Start Harvest"}
          </motion.button>
        </div>

{theharvesterLoading && (
          <div className="flex flex-col items-center justify-center py-12">
            <div className="h-12 w-12 animate-spin rounded-full border-4 border-green-500/20 border-t-green-500" />
            <p className="mt-4 font-mono text-sm text-green-400">Gathering intelligence from {selectedSource}...</p>
          </div>
        )}

{!theharvesterLoading && theharvesterResults && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
              <div className="rounded border border-green-500/30 bg-green-500/5 p-3 text-center">
                <Mail className="mx-auto mb-1 h-5 w-5 text-green-400" />
                <p className="font-mono text-2xl font-bold text-green-400">{theharvesterResults.emails.length}</p>
                <p className="font-mono text-xs text-white/60">Emails</p>
              </div>
              <div className="rounded border border-green-500/30 bg-green-500/5 p-3 text-center">
                <User className="mx-auto mb-1 h-5 w-5 text-green-400" />
                <p className="font-mono text-2xl font-bold text-green-400">{theharvesterResults.people.length}</p>
                <p className="font-mono text-xs text-white/60">People</p>
              </div>
              <div className="rounded border border-green-500/30 bg-green-500/5 p-3 text-center">
                <Link className="mx-auto mb-1 h-5 w-5 text-green-400" />
                <p className="font-mono text-2xl font-bold text-green-400">{theharvesterResults.hosts.length}</p>
                <p className="font-mono text-xs text-white/60">Hosts</p>
              </div>
              <div className="rounded border border-green-500/30 bg-green-500/5 p-3 text-center">
                <Search className="mx-auto mb-1 h-5 w-5 text-green-400" />
                <p className="font-mono text-2xl font-bold text-green-400">{theharvesterResults.urls.length}</p>
                <p className="font-mono text-xs text-white/60">URLs</p>
              </div>
            </div>

<div className="space-y-3">
              <div>
                <h3 className="mb-2 font-mono text-sm font-bold text-green-400">Email Addresses</h3>
                <div className="space-y-1">
                  {theharvesterResults.emails.map((email, i) => (
                    <div
                      key={i}
                      className="flex items-center gap-2 rounded border border-green-500/20 bg-black/50 p-2 font-mono text-sm text-white"
                    >
                      <Mail className="h-3 w-3 text-green-400" />
                      {email}
                    </div>
                  ))}
                </div>
              </div>

<div>
                <h3 className="mb-2 font-mono text-sm font-bold text-green-400">People</h3>
                <div className="space-y-1">
                  {theharvesterResults.people.map((person, i) => (
                    <div
                      key={i}
                      className="flex items-center justify-between rounded border border-green-500/20 bg-black/50 p-2 font-mono text-sm text-white"
                    >
                      <div className="flex items-center gap-2">
                        <User className="h-3 w-3 text-green-400" />
                        <span>{person.name}</span>
                      </div>
                      <div className="text-xs text-white/60">
                        {person.position} • {person.source}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

<div>
                <h3 className="mb-2 font-mono text-sm font-bold text-green-400">Hosts Discovered</h3>
                <div className="space-y-1">
                  {theharvesterResults.hosts.map((host, i) => (
                    <div
                      key={i}
                      className="flex items-center gap-2 rounded border border-green-500/20 bg-black/50 p-2 font-mono text-sm text-white"
                    >
                      <Link className="h-3 w-3 text-green-400" />
                      {host}
                    </div>
                  ))}
                </div>
              </div>

<div>
                <h3 className="mb-2 font-mono text-sm font-bold text-green-400">Social Media Profiles</h3>
                <div className="space-y-1">
                  {theharvesterResults.socialMedia.map((social, i) => (
                    <div
                      key={i}
                      className="flex items-center justify-between rounded border border-green-500/20 bg-black/50 p-2 font-mono text-sm text-white"
                    >
                      <span>{social.platform}</span>
                      <button
                        onClick={() => window.open(social.url, "_blank")}
                        className="text-xs text-green-400 hover:text-green-300"
                      >
                        Visit →
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/reconng-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Database, Play, Download, CheckCircle } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function ReconNGPanel() {
  const {
    reconngDomain,
    setReconngDomain,
    reconngResults,
    setReconngResults,
    reconngLoading,
    setReconngLoading,
    addToHistory,
  } = useToolsStore()

const [selectedModule, setSelectedModule] = useState("recon/domains-hosts/google_site_web")

const modules = [
    "recon/domains-hosts/google_site_web",
    "recon/domains-hosts/bing_domain_web",
    "recon/domains-contacts/whois_pocs",
    "recon/hosts-hosts/resolve",
    "recon/hosts-ports/shodan_ip",
    "recon/netblocks-hosts/reverse_resolve",
  ]

const runRecon = async () => {
    if (!reconngDomain.trim()) return

setReconngLoading(true)
    setReconngResults([])

await new Promise((resolve) => setTimeout(resolve, 3000))

const mockResults = [
      {
        module: selectedModule,
        category: "hosts",
        host: `www.${reconngDomain}`,
        ip: "93.184.216.34",
        country: "US",
        latitude: "37.751",
        longitude: "-97.822",
      },
      {
        module: selectedModule,
        category: "hosts",
        host: `api.${reconngDomain}`,
        ip: "93.184.216.35",
        country: "US",
        latitude: "37.751",
        longitude: "-97.822",
      },
      {
        module: selectedModule,
        category: "contacts",
        firstname: "Admin",
        lastname: "Contact",
        email: `admin@${reconngDomain}`,
        title: "Domain Administrator",
      },
      {
        module: selectedModule,
        category: "ports",
        host: `www.${reconngDomain}`,
        ip: "93.184.216.34",
        port: "80",
        protocol: "tcp",
      },
      {
        module: selectedModule,
        category: "ports",
        host: `www.${reconngDomain}`,
        ip: "93.184.216.34",
        port: "443",
        protocol: "tcp",
      },
    ]

setReconngResults(mockResults)
    setReconngLoading(false)

addToHistory({
      type: "reconng",
      query: reconngDomain,
      timestamp: Date.now(),
      results: mockResults.length,
    })
  }

const downloadReport = () => {
    const report = `RECON-NG RECONNAISSANCE REPORT
==============================
Target: ${reconngDomain}
Module: ${selectedModule}
Date: ${new Date().toLocaleString()}
Results: ${reconngResults.length}

${reconngResults
  .map(
    (result, i) => `
--- Result ${i + 1} ---
Category: ${result.category}
${Object.entries(result)
  .filter(([key]) => key !== "module" && key !== "category")
  .map(([key, value]) => `${key}: ${value}`)
  .join("\n")}
`,
  )
  .join("\n")}
`
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `reconng-${reconngDomain}-${Date.now()}.txt`
    a.click()
  }

return (
    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-blue-500/30 bg-black/95">
      <div className="border-b border-blue-500/30 bg-gradient-to-r from-blue-900/20 to-indigo-900/20 p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Database className="h-5 w-5 text-blue-400" />
            <h2 className="font-mono text-lg font-bold text-blue-400">Recon-ng Framework</h2>
          </div>
          {reconngResults.length > 0 && (
            <button
              onClick={downloadReport}
              className="flex items-center gap-2 rounded bg-blue-500/20 px-3 py-1 font-mono text-sm text-blue-400 transition-colors hover:bg-blue-500/30"
            >
              <Download className="h-4 w-4" />
              Export
            </button>
          )}
        </div>
        <p className="mt-2 text-xs text-white/60">
          Web reconnaissance framework with independent modules and database interaction
        </p>
      </div>

<div className="flex-1 overflow-y-auto p-4">
        <div className="mb-4 space-y-2">
          <input
            type="text"
            value={reconngDomain}
            onChange={(e) => setReconngDomain(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && runRecon()}
            placeholder="Enter target domain (e.g., example.com)"
            className="w-full rounded border border-blue-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/40 focus:border-blue-500 focus:outline-none"
          />

<select
            value={selectedModule}
            onChange={(e) => setSelectedModule(e.target.value)}
            className="w-full rounded border border-blue-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white focus:border-blue-500 focus:outline-none"
          >
            {modules.map((mod) => (
              <option key={mod} value={mod}>
                {mod}
              </option>
            ))}
          </select>

<motion.button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={runRecon}
            disabled={reconngLoading || !reconngDomain.trim()}
            className="flex w-full items-center justify-center gap-2 rounded bg-blue-500 px-6 py-2 font-mono text-sm font-bold text-black transition-opacity disabled:opacity-50"
          >
            <Play className="h-4 w-4" />
            {reconngLoading ? "Running Module..." : "Run Module"}
          </motion.button>
        </div>

{reconngLoading && (
          <div className="flex flex-col items-center justify-center py-12">
            <div className="h-12 w-12 animate-spin rounded-full border-4 border-blue-500/20 border-t-blue-500" />
            <p className="mt-4 font-mono text-sm text-blue-400">Executing {selectedModule}...</p>
            <div className="mt-6 w-full max-w-md rounded border border-blue-500/30 bg-black/50 p-4 font-mono text-xs">
              <p className="text-blue-400">[*] Initializing module...</p>
              <p className="text-white/60">[*] Loading {selectedModule}</p>
              <p className="text-white/60">[*] Setting SOURCE = {reconngDomain}</p>
              <p className="text-green-400">[+] Module loaded successfully</p>
              <p className="text-white/60">[*] Gathering intelligence...</p>
            </div>
          </div>
        )}

{!reconngLoading && reconngResults.length > 0 && (
          <div className="space-y-3">
            <div className="rounded border border-blue-500/30 bg-blue-500/5 p-3">
              <p className="font-mono text-sm text-blue-400">
                Module <span className="font-bold">{selectedModule}</span> returned {reconngResults.length} results
              </p>
            </div>

{reconngResults.map((result, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                className="rounded border border-blue-500/30 bg-black/50 p-4"
              >
                <div className="mb-2 flex items-center justify-between">
                  <span className="rounded bg-blue-500/20 px-2 py-0.5 font-mono text-xs text-blue-400">
                    {result.category}
                  </span>
                  <CheckCircle className="h-4 w-4 text-green-400" />
                </div>

<div className="grid gap-2 font-mono text-sm">
                  {Object.entries(result)
                    .filter(([key]) => key !== "module" && key !== "category")
                    .map(([key, value]) => (
                      <div key={key} className="flex justify-between">
                        <span className="text-white/60">{key}:</span>
                        <span className="text-white">{value}</span>
                      </div>
                    ))}
                </div>
              </motion.div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/themes/neon-city/neon-city-ui.tsx" isMerged="true"
"use client"

import type { ReactNode } from "react"

export function NeonCityUI({ children }: { children?: ReactNode }) {
  return (
    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
      <div className="pointer-events-auto w-full max-w-7xl px-4">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/themes/matrix/matrix-ui.tsx" isMerged="true"
"use client"

import type { ReactNode } from "react"

export function MatrixUI({ children }: { children?: ReactNode }) {
  return (
    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
      <div className="pointer-events-auto w-full max-w-7xl px-4">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/themes/holographic/holographic-scene.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { useFrame } from "@react-three/fiber"
import { MeshTransmissionMaterial, Float, Sphere, Torus, Dodecahedron } from "@react-three/drei"
import type * as THREE from "three"

export function HolographicScene() {
  const groupRef = useRef<THREE.Group>(null)
  const spheresRef = useRef<THREE.Group>(null)

useFrame((state) => {
    const t = state.clock.getElapsedTime()

if (groupRef.current) {
      groupRef.current.rotation.y = t * 0.1
    }

if (spheresRef.current) {
      spheresRef.current.rotation.x = t * 0.05
      spheresRef.current.rotation.y = t * 0.08
    }
  })

return (
    <>
      <ambientLight intensity={0.3} />
      <pointLight position={[10, 10, 10]} intensity={2} color="#00f5ff" />
      <pointLight position={[-10, -10, -10]} intensity={2} color="#ff00e5" />
      <spotLight position={[0, 20, 0]} intensity={3} color="#00ffaa" angle={0.5} />

<group ref={spheresRef}>
        {[...Array(12)].map((_, i) => (
          <Float key={i} speed={1 + i * 0.1} rotationIntensity={0.5} floatIntensity={1}>
            <Sphere
              args={[0.5, 32, 32]}
              position={[
                Math.cos((i * Math.PI * 2) / 12) * 8,
                Math.sin((i * Math.PI * 2) / 12) * 2,
                Math.sin((i * Math.PI * 2) / 12) * 8,
              ]}
            >
              <meshStandardMaterial
                color={i % 3 === 0 ? "#00f5ff" : i % 3 === 1 ? "#ff00e5" : "#00ffaa"}
                emissive={i % 3 === 0 ? "#00f5ff" : i % 3 === 1 ? "#ff00e5" : "#00ffaa"}
                emissiveIntensity={1.5}
              />
            </Sphere>
          </Float>
        ))}
      </group>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/themes/holographic/holographic-ui.tsx" isMerged="true"
"use client"

import type { ReactNode } from "react"

export function HolographicUI({ children }: { children?: ReactNode }) {
  return (
    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
      <div className="pointer-events-auto w-full max-w-7xl px-4">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/themes/quantum/quantum-scene.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { useFrame } from "@react-three/fiber"
import { Float, Sphere, Line } from "@react-three/drei"
import * as THREE from "three"

export function QuantumScene() {
  const particlesRef = useRef<THREE.Points>(null)
  const linesRef = useRef<THREE.Group>(null)

useFrame((state) => {
    const t = state.clock.getElapsedTime()

if (particlesRef.current) {
      particlesRef.current.rotation.y = t * 0.03
      particlesRef.current.rotation.x = Math.sin(t * 0.2) * 0.1
    }

if (linesRef.current) {
      linesRef.current.rotation.y = -t * 0.05
    }
  })

const particleCount = 4000
  const particles = new Float32Array(particleCount * 3)
  const colors = new Float32Array(particleCount * 3)

for (let i = 0; i < particleCount; i++) {
    const radius = 5 + Math.random() * 15
    const theta = Math.random() * Math.PI * 2
    const phi = Math.random() * Math.PI

particles[i * 3] = radius * Math.sin(phi) * Math.cos(theta)
    particles[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta)
    particles[i * 3 + 2] = radius * Math.cos(phi)

const color = new THREE.Color()
    color.setHSL(0.6 + Math.random() * 0.3, 1, 0.5)
    colors[i * 3] = color.r
    colors[i * 3 + 1] = color.g
    colors[i * 3 + 2] = color.b
  }

const nodes = [...Array(8)].map((_, i) => ({
    position: [
      Math.cos((i * Math.PI * 2) / 8) * 10,
      Math.sin((i * Math.PI) / 4) * 5,
      Math.sin((i * Math.PI * 2) / 8) * 10,
    ] as [number, number, number],
  }))

return (
    <>
      <ambientLight intensity={0.2} />
      <pointLight position={[0, 0, 0]} intensity={3} color="#8b5cf6" />
      <pointLight position={[15, 10, 10]} intensity={2} color="#0ea5e9" />
      <pointLight position={[-15, -10, -10]} intensity={2} color="#f59e0b" />

<group ref={linesRef}>
        {nodes.map((node, i) => (
          <Float key={i} speed={1.5} rotationIntensity={0.4} floatIntensity={1}>
            <Sphere args={[0.5, 32, 32]} position={node.position}>
              <meshStandardMaterial
                color={i % 3 === 0 ? "#8b5cf6" : i % 3 === 1 ? "#0ea5e9" : "#f59e0b"}
                emissive={i % 3 === 0 ? "#8b5cf6" : i % 3 === 1 ? "#0ea5e9" : "#f59e0b"}
                emissiveIntensity={2}
              />
            </Sphere>
          </Float>
        ))}

{nodes.map((start, i) =>
          nodes
            .slice(i + 1)
            .map((end, j) => (
              <Line
                key={`${i}-${j}`}
                points={[start.position, end.position]}
                color="#8b5cf6"
                lineWidth={1}
                transparent
                opacity={0.3}
              />
            )),
        )}
      </group>

<Float speed={0.5} rotationIntensity={0.2} floatIntensity={0.5}>
        <mesh position={[0, 0, 0]}>
          <icosahedronGeometry args={[4, 1]} />
          <meshStandardMaterial color="#030014" emissive="#8b5cf6" emissiveIntensity={0.5} wireframe />
        </mesh>
      </Float>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/themes/quantum/quantum-ui.tsx" isMerged="true"
"use client"

import type { ReactNode } from "react"

export function QuantumUI({ children }: { children?: ReactNode }) {
  return (
    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
      <div className="pointer-events-auto w-full max-w-7xl px-4">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/acunetix-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useToolsStore } from "@/store/tools-store"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { X, Globe, Bug } from "lucide-react"

export function AcunetixPanel() {
  const { setActiveTool } = useToolsStore()
  const [url, setUrl] = useState("")
  const [scanning, setScanning] = useState(false)
  const [results, setResults] = useState<any>(null)

const runScan = async () => {
    if (!url) return

setScanning(true)
    await new Promise((resolve) => setTimeout(resolve, 4000))

setResults({
      url,
      scanTime: new Date().toISOString(),
      summary: {
        totalVulnerabilities: 15,
        highSeverity: 4,
        mediumSeverity: 7,
        lowSeverity: 4,
        informational: 8,
      },
      vulnerabilities: [
        {
          name: "SQL Injection",
          severity: "High",
          url: `${url}/search.php?q=test`,
          parameter: "q",
          method: "GET",
          proof: "' OR '1'='1",
          impact: "Attacker can access, modify, or delete database content",
          remediation: "Use prepared statements with parameterized queries",
        },
        {
          name: "Cross-Site Scripting (Reflected)",
          severity: "High",
          url: `${url}/profile.php?user=admin`,
          parameter: "user",
          method: "GET",
          proof: "<script>alert('XSS')</script>",
          impact: "Session hijacking, phishing, defacement",
          remediation: "Implement proper input validation and output encoding",
        },
        {
          name: "Directory Traversal",
          severity: "High",
          url: `${url}/download.php?file=document.pdf`,
          parameter: "file",
          method: "GET",
          proof: "../../../../etc/passwd",
          impact: "Unauthorized access to sensitive system files",
          remediation: "Validate and sanitize file path inputs",
        },
        {
          name: "Insecure Direct Object Reference",
          severity: "Medium",
          url: `${url}/api/user/123`,
          parameter: "id",
          method: "GET",
          proof: "Changed ID from 123 to 124 to access other user data",
          impact: "Unauthorized access to other users' data",
          remediation: "Implement proper authorization checks",
        },
      ],
    })

setScanning(false)
  }

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
      <div className="relative w-full max-w-5xl rounded-lg border border-blue-500/30 bg-slate-950 p-6 shadow-2xl shadow-blue-500/20">
        <Button variant="ghost" size="icon" className="absolute right-4 top-4" onClick={() => setActiveTool(null)}>
          <X className="h-5 w-5" />
        </Button>

<div className="mb-6">
          <h2 className="mb-2 flex items-center gap-2 text-2xl font-bold text-blue-400">
            <Globe className="h-6 w-6" />
            Acunetix Web Scanner
          </h2>
          <p className="text-sm text-slate-400">Advanced web application security testing</p>
        </div>

<div className="mb-6 flex gap-2">
          <Input
            placeholder="Enter website URL (e.g., https://example.com)"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            className="flex-1 border-blue-500/30 bg-slate-900"
          />
          <Button onClick={runScan} disabled={scanning || !url} className="bg-blue-600 hover:bg-blue-700">
            {scanning ? "Scanning..." : "Start Scan"}
          </Button>
        </div>

{results && (
          <div className="space-y-4">
            <div className="grid grid-cols-5 gap-3">
              <div className="rounded-lg border border-blue-500/30 bg-blue-950/20 p-3">
                <div className="text-xl font-bold text-blue-400">{results.summary.totalVulnerabilities}</div>
                <div className="text-xs text-slate-400">Total</div>
              </div>
              <div className="rounded-lg border border-red-500/30 bg-red-950/20 p-3">
                <div className="text-xl font-bold text-red-400">{results.summary.highSeverity}</div>
                <div className="text-xs text-slate-400">High</div>
              </div>
              <div className="rounded-lg border border-orange-500/30 bg-orange-950/20 p-3">
                <div className="text-xl font-bold text-orange-400">{results.summary.mediumSeverity}</div>
                <div className="text-xs text-slate-400">Medium</div>
              </div>
              <div className="rounded-lg border border-yellow-500/30 bg-yellow-950/20 p-3">
                <div className="text-xl font-bold text-yellow-400">{results.summary.lowSeverity}</div>
                <div className="text-xs text-slate-400">Low</div>
              </div>
              <div className="rounded-lg border border-slate-500/30 bg-slate-900/20 p-3">
                <div className="text-xl font-bold text-slate-400">{results.summary.informational}</div>
                <div className="text-xs text-slate-400">Info</div>
              </div>
            </div>

<div className="max-h-96 space-y-3 overflow-y-auto">
              {results.vulnerabilities.map((vuln: any, i: number) => (
                <div key={i} className="rounded-lg border border-blue-500/20 bg-slate-900/50 p-4">
                  <div className="mb-2 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Bug className="h-5 w-5 text-red-400" />
                      <h3 className="font-semibold text-blue-300">{vuln.name}</h3>
                    </div>
                    <span
                      className={`rounded px-2 py-1 text-xs font-bold ${
                        vuln.severity === "High" ? "bg-red-500/20 text-red-400" : "bg-orange-500/20 text-orange-400"
                      }`}
                    >
                      {vuln.severity}
                    </span>
                  </div>
                  <div className="mb-2 space-y-1 text-sm">
                    <div className="text-slate-400">
                      URL: <span className="font-mono text-blue-400">{vuln.url}</span>
                    </div>
                    <div className="text-slate-400">
                      Parameter: <span className="font-mono text-blue-400">{vuln.parameter}</span>
                    </div>
                    <div className="text-slate-400">
                      Method: <span className="font-mono text-blue-400">{vuln.method}</span>
                    </div>
                  </div>
                  <div className="mb-2 rounded bg-slate-800/50 p-2">
                    <div className="mb-1 text-xs font-semibold text-yellow-400">Proof of Concept:</div>
                    <code className="text-xs text-slate-300">{vuln.proof}</code>
                  </div>
                  <div className="mb-2 text-sm text-slate-300">
                    <span className="font-semibold text-red-400">Impact:</span> {vuln.impact}
                  </div>
                  <div className="rounded bg-green-950/20 p-2">
                    <div className="mb-1 text-xs font-semibold text-green-400">Remediation:</div>
                    <div className="text-xs text-slate-300">{vuln.remediation}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/qualys-panel.tsx" isMerged="true"
"use client"

export function QualysPanel() {
  const { setActiveTool } = useToolsStore()
  const [target, setTarget] = useState("")
  const [scanning, setScanning] = useState(false)
  const [results, setResults] = useState<any>(null)

const runScan = async () => {
    if (!target) return

setScanning(true)
    await new Promise((resolve) => setTimeout(resolve, 3500))

setResults({
      target,
      scanDate: new Date().toISOString(),
      complianceScore: 67,
      riskScore: "High",
      findings: {
        critical: 2,
        high: 8,
        medium: 15,
        low: 22,
      },
      complianceChecks: [
        { standard: "PCI DSS", status: "Failed", score: 58 },
        { standard: "HIPAA", status: "Passed", score: 92 },
        { standard: "ISO 27001", status: "Warning", score: 74 },
        { standard: "GDPR", status: "Passed", score: 88 },
      ],
      topVulnerabilities: [
        {
          qid: "38173",
          title: "Apache HTTP Server Multiple Vulnerabilities",
          severity: "Critical",
          cvss: 9.8,
          threat: "Remote Code Execution",
          impact: "Complete system compromise possible",
          solution: "Update Apache to version 2.4.52 or later",
        },
        {
          qid: "45123",
          title: "OpenSSL Heartbleed Vulnerability",
          severity: "Critical",
          cvss: 9.3,
          threat: "Information Disclosure",
          impact: "Private keys and sensitive data exposure",
          solution: "Update OpenSSL to 1.0.1g or later",
        },
        {
          qid: "86741",
          title: "Weak SSH Encryption Algorithms Enabled",
          severity: "High",
          cvss: 7.5,
          threat: "Man-in-the-Middle Attack",
          impact: "SSH traffic can be intercepted and decrypted",
          solution: "Disable weak ciphers in sshd_config",
        },
      ],
    })

setScanning(false)
  }

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
      <div className="relative w-full max-w-6xl rounded-lg border border-purple-500/30 bg-slate-950 p-6 shadow-2xl shadow-purple-500/20">
        <Button variant="ghost" size="icon" className="absolute right-4 top-4" onClick={() => setActiveTool(null)}>
          <X className="h-5 w-5" />
        </Button>

<div className="mb-6">
          <h2 className="mb-2 flex items-center gap-2 text-2xl font-bold text-purple-400">
            <CloudLightning className="h-6 w-6" />
            Qualys Cloud Platform
          </h2>
          <p className="text-sm text-slate-400">Enterprise vulnerability management and compliance</p>
        </div>

<div className="mb-6 flex gap-2">
          <Input
            placeholder="Enter target IP or hostname"
            value={target}
            onChange={(e) => setTarget(e.target.value)}
            className="flex-1 border-purple-500/30 bg-slate-900"
          />
          <Button onClick={runScan} disabled={scanning || !target} className="bg-purple-600 hover:bg-purple-700">
            {scanning ? "Scanning..." : "Start Scan"}
          </Button>
        </div>

{results && (
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="rounded-lg border border-purple-500/30 bg-purple-950/20 p-4">
                <div className="mb-2 flex items-center justify-between">
                  <span className="text-sm text-slate-400">Compliance Score</span>
                  <TrendingUp className="h-5 w-5 text-purple-400" />
                </div>
                <div className="text-3xl font-bold text-purple-400">{results.complianceScore}%</div>
                <div className="mt-2 h-2 w-full rounded-full bg-slate-800">
                  <div className="h-full rounded-full bg-purple-500" style={{ width: `${results.complianceScore}%` }} />
                </div>
              </div>

<div className="grid grid-cols-4 gap-2">
                <div className="rounded border border-red-500/30 bg-red-950/20 p-2 text-center">
                  <div className="text-xl font-bold text-red-400">{results.findings.critical}</div>
                  <div className="text-xs text-slate-400">Critical</div>
                </div>
                <div className="rounded border border-orange-500/30 bg-orange-950/20 p-2 text-center">
                  <div className="text-xl font-bold text-orange-400">{results.findings.high}</div>
                  <div className="text-xs text-slate-400">High</div>
                </div>
                <div className="rounded border border-yellow-500/30 bg-yellow-950/20 p-2 text-center">
                  <div className="text-xl font-bold text-yellow-400">{results.findings.medium}</div>
                  <div className="text-xs text-slate-400">Medium</div>
                </div>
                <div className="rounded border border-blue-500/30 bg-blue-950/20 p-2 text-center">
                  <div className="text-xl font-bold text-blue-400">{results.findings.low}</div>
                  <div className="text-xs text-slate-400">Low</div>
                </div>
              </div>
            </div>

<div className="grid grid-cols-4 gap-3">
              {results.complianceChecks.map((check: any, i: number) => (
                <div key={i} className="rounded-lg border border-purple-500/20 bg-slate-900/50 p-3">
                  <div className="mb-1 text-sm font-semibold text-purple-300">{check.standard}</div>
                  <div
                    className={`mb-1 text-xs font-bold ${
                      check.status === "Passed"
                        ? "text-green-400"
                        : check.status === "Failed"
                          ? "text-red-400"
                          : "text-yellow-400"
                    }`}
                  >
                    {check.status}
                  </div>
                  <div className="text-lg font-bold text-slate-200">{check.score}%</div>
                </div>
              ))}
            </div>

<div className="max-h-80 space-y-3 overflow-y-auto">
              {results.topVulnerabilities.map((vuln: any, i: number) => (
                <div key={i} className="rounded-lg border border-purple-500/20 bg-slate-900/50 p-4">
                  <div className="mb-2 flex items-center justify-between">
                    <div>
                      <span className="font-mono text-xs text-purple-400">QID: {vuln.qid}</span>
                      <h3 className="font-semibold text-purple-300">{vuln.title}</h3>
                    </div>
                    <div className="text-right">
                      <span
                        className={`block rounded px-2 py-1 text-xs font-bold ${
                          vuln.severity === "Critical"
                            ? "bg-red-500/20 text-red-400"
                            : "bg-orange-500/20 text-orange-400"
                        }`}
                      >
                        {vuln.severity}
                      </span>
                      <span className="mt-1 block text-xs text-slate-400">CVSS {vuln.cvss}</span>
                    </div>
                  </div>
                  <div className="mb-2 grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="font-semibold text-red-400">Threat:</span>
                      <span className="ml-2 text-slate-300">{vuln.threat}</span>
                    </div>
                    <div>
                      <span className="font-semibold text-orange-400">Impact:</span>
                      <span className="ml-2 text-slate-300">{vuln.impact}</span>
                    </div>
                  </div>
                  <div className="rounded bg-green-950/20 p-2">
                    <div className="mb-1 text-xs font-semibold text-green-400">Solution:</div>
                    <div className="text-xs text-slate-300">{vuln.solution}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/themes/matrix/matrix-scene.tsx" isEdit="true" isMerged="true"
"use client"

import { useRef, useMemo } from "react"
import { useFrame } from "@react-three/fiber"
import { Float } from "@react-three/drei"
import type * as THREE from "three"

export function MatrixScene() {
  const codeRef = useRef<THREE.Group>(null)
  const particlesRef = useRef<THREE.Points>(null)

const matrixElements = useMemo(() => {
    const elements = []
    for (let i = 0; i < 50; i++) {
      elements.push({
        position: [(Math.random() - 0.5) * 50, Math.random() * 30 - 10, (Math.random() - 0.5) * 50] as [
          number,
          number,
          number,
        ],
        speed: 0.1 + Math.random() * 0.3,
      })
    }
    return elements
  }, [])

useFrame((state) => {
    const t = state.clock.getElapsedTime()

if (codeRef.current) {
      codeRef.current.children.forEach((child, i) => {
        child.position.y -= matrixElements[i].speed
        if (child.position.y < -15) {
          child.position.y = 15
        }
      })
    }

if (particlesRef.current) {
      particlesRef.current.rotation.y = t * 0.02
    }
  })

const particleCount = 2000
  const particles = new Float32Array(particleCount * 3)

for (let i = 0; i < particleCount; i++) {
    particles[i * 3] = (Math.random() - 0.5) * 80
    particles[i * 3 + 1] = (Math.random() - 0.5) * 80
    particles[i * 3 + 2] = (Math.random() - 0.5) * 80
  }

return (
    <>
      <ambientLight intensity={0.1} />
      <pointLight position={[0, 10, 0]} intensity={2} color="#00ff41" />

<group ref={codeRef}>
        {matrixElements.map((elem, i) => (
          <mesh key={i} position={elem.position}>
            <boxGeometry args={[0.3, 1, 0.3]} />
            <meshStandardMaterial color="#00ff41" emissive="#00ff41" emissiveIntensity={1} />
          </mesh>
        ))}
      </group>

<Float speed={1} rotationIntensity={0.2} floatIntensity={0.5}>
        <mesh position={[0, 0, -20]}>
          <torusKnotGeometry args={[5, 1.5, 128, 32]} />
          <meshStandardMaterial color="#003b00" emissive="#00ff41" emissiveIntensity={0.5} wireframe />
        </mesh>
      </Float>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/themes/cyberpunk/cyberpunk-scene.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef, useMemo } from "react"
import { useFrame } from "@react-three/fiber"
import { Float, MeshDistortMaterial, Sparkles, MeshWobbleMaterial } from "@react-three/drei"
import type * as THREE from "three"

export function CyberpunkScene() {
  return (
    <>
      <ambientLight intensity={0.15} />
      <pointLight position={[10, 10, 10]} color="#ff00ff" intensity={3} castShadow />
      <pointLight position={[-10, -10, -10]} color="#00ffff" intensity={2} />
      <pointLight position={[0, 5, 5]} color="#ff6b00" intensity={1.5} />
      <spotLight position={[0, 20, 0]} angle={0.3} penumbra={1} color="#ff00ff" intensity={3} castShadow />
      <spotLight position={[-15, 10, -15]} angle={0.5} penumbra={0.5} color="#00ffff" intensity={2} />

{/* Deeper fog for atmosphere */}
      <fog attach="fog" args={["#0d0221", 3, 35]} />

{/* Ground grid */}
      <CyberpunkGrid />

<FlyingVehicles />
    </>
  )
}

function CyberpunkGrid() {
  const gridRef = useRef<THREE.GridHelper>(null)
  const gridRef2 = useRef<THREE.GridHelper>(null)

useFrame(({ clock }) => {
    if (gridRef.current) {
      gridRef.current.position.z = (clock.elapsedTime * 2) % 2
    }
    if (gridRef2.current) {
      gridRef2.current.position.z = ((clock.elapsedTime * 2) % 2) - 2
    }
  })

return (
    <group position={[0, -2, 0]}>
      <gridHelper ref={gridRef} args={[100, 100, "#ff00ff", "#00ffff"]} />
      <gridHelper ref={gridRef2} args={[100, 100, "#ff00ff", "#00ffff"]} />
      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.01, 0]}>
        <planeGeometry args={[100, 100]} />
        <meshStandardMaterial color="#0d0221" transparent opacity={0.9} metalness={0.5} roughness={0.8} />
      </mesh>
    </group>
  )
}

function CyberpunkBuildings() {
  const buildings = useMemo(
    () => [
      { pos: [-8, 2, -10], height: 8, color: "#ff00ff", width: 2 },
      { pos: [-5, 3, -12], height: 10, color: "#00ffff", width: 1.5 },
      { pos: [5, 2.5, -11], height: 9, color: "#ff00ff", width: 1.8 },
      { pos: [8, 1.5, -9], height: 6, color: "#00ffff", width: 2.2 },
      { pos: [-12, 2, -15], height: 7, color: "#ff6b00", width: 1.5 },
      { pos: [12, 3, -14], height: 11, color: "#ff6b00", width: 1.7 },
      { pos: [-15, 4, -18], height: 14, color: "#ff00ff", width: 2.5 },
      { pos: [15, 3.5, -17], height: 12, color: "#00ffff", width: 2 },
      { pos: [0, 2, -20], height: 16, color: "#ff6b00", width: 3 },
      { pos: [-3, 1.5, -8], height: 5, color: "#00ffff", width: 1 },
      { pos: [3, 2, -9], height: 7, color: "#ff00ff", width: 1.2 },
    ],
    [],
  )

return (
    <group>
      {buildings.map((b, i) => (
        <Float key={i} speed={0.5 + i * 0.1} rotationIntensity={0.05} floatIntensity={0.3}>
          <group position={b.pos as [number, number, number]}>
            {/* Main building */}
            <mesh>
              <boxGeometry args={[b.width, b.height, b.width]} />
              <meshStandardMaterial
                color="#0a0015"
                emissive={b.color}
                emissiveIntensity={0.2}
                metalness={0.9}
                roughness={0.2}
              />
            </mesh>
            {/* Wireframe overlay */}
            <mesh>
              <boxGeometry args={[b.width + 0.1, b.height + 0.1, b.width + 0.1]} />
              <meshBasicMaterial color={b.color} wireframe transparent opacity={0.5} />
            </mesh>
            {/* Window lights */}
            {Array.from({ length: Math.floor(b.height / 1.5) }).map((_, j) => (
              <mesh key={j} position={[b.width / 2 + 0.01, -b.height / 2 + j * 1.5 + 1, 0]}>
                <planeGeometry args={[0.01, 0.8]} />
                <meshBasicMaterial color={b.color} transparent opacity={0.8} />
              </mesh>
            ))}
          </group>
        </Float>
      ))}
    </group>
  )
}

function FloatingPlatforms() {
  const platformsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (platformsRef.current) {
      platformsRef.current.children.forEach((child, i) => {
        child.position.y = Math.sin(clock.elapsedTime * 0.5 + i * 0.7) * 0.5 + 3
        child.rotation.y = clock.elapsedTime * 0.1 * (i % 2 === 0 ? 1 : -1)
      })
    }
  })

return (
    <group ref={platformsRef}>
      {[
        [-6, 3, -3],
        [6, 4, -4],
        [0, 5, -6],
        [-4, 2, 2],
        [4, 3, 1],
      ].map((pos, i) => (
        <group key={i} position={pos as [number, number, number]}>
          <mesh>
            <cylinderGeometry args={[1.5, 1.5, 0.2, 6]} />
            <meshStandardMaterial color="#0a0015" emissive="#ff00ff" emissiveIntensity={0.3} metalness={0.9} />
          </mesh>
          <mesh position={[0, 0.15, 0]}>
            <torusGeometry args={[1.5, 0.05, 8, 6]} />
            <meshBasicMaterial color="#00ffff" />
          </mesh>
        </group>
      ))}
    </group>
  )
}

function NeonOrbs() {
  const orbsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (orbsRef.current) {
      orbsRef.current.rotation.y = clock.elapsedTime * 0.2
    }
  })

return (
    <group ref={orbsRef}>
      {[0, 1, 2, 3, 4, 5].map((i) => (
        <Float key={i} speed={2 + i * 0.3} floatIntensity={1.5}>
          <mesh position={[Math.cos((i * Math.PI * 2) / 6) * 5, 1 + i * 0.3, Math.sin((i * Math.PI * 2) / 6) * 5]}>
            <sphereGeometry args={[0.4 - i * 0.03, 32, 32]} />
            <MeshDistortMaterial
              color={i % 3 === 0 ? "#ff00ff" : i % 3 === 1 ? "#00ffff" : "#ff6b00"}
              emissive={i % 3 === 0 ? "#ff00ff" : i % 3 === 1 ? "#00ffff" : "#ff6b00"}
              emissiveIntensity={3}
              distort={0.5}
              speed={3}
              transparent
              opacity={0.9}
            />
          </mesh>
        </Float>
      ))}
    </group>
  )
}

function EnergyBeams() {
  const beamsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (beamsRef.current) {
      beamsRef.current.children.forEach((beam, i) => {
        const mesh = beam as THREE.Mesh
        mesh.scale.y = 1 + Math.sin(clock.elapsedTime * 2 + i) * 0.5
        mesh.material = mesh.material as THREE.MeshBasicMaterial
        ;(mesh.material as THREE.MeshBasicMaterial).opacity = 0.3 + Math.sin(clock.elapsedTime * 3 + i) * 0.2
      })
    }
  })

return (
    <group ref={beamsRef}>
      {[
        [-10, -15],
        [10, -15],
        [-5, -12],
        [5, -12],
      ].map(([x, z], i) => (
        <mesh key={i} position={[x, 5, z]}>
          <cylinderGeometry args={[0.05, 0.05, 20, 8]} />
          <meshBasicMaterial color={i % 2 === 0 ? "#ff00ff" : "#00ffff"} transparent opacity={0.5} />
        </mesh>
      ))}
    </group>
  )
}

function CentralHologram() {
  const ringRef = useRef<THREE.Mesh>(null)
  const ring2Ref = useRef<THREE.Mesh>(null)
  const ring3Ref = useRef<THREE.Mesh>(null)
  const coreRef = useRef<THREE.Mesh>(null)

useFrame(({ clock }) => {
    if (ringRef.current) {
      ringRef.current.rotation.x = Math.sin(clock.elapsedTime) * 0.3
      ringRef.current.rotation.z = clock.elapsedTime * 0.5
    }
    if (ring2Ref.current) {
      ring2Ref.current.rotation.x = Math.cos(clock.elapsedTime * 0.8) * 0.4
      ring2Ref.current.rotation.y = clock.elapsedTime * 0.3
    }
    if (ring3Ref.current) {
      ring3Ref.current.rotation.y = Math.sin(clock.elapsedTime * 0.6) * 0.5
      ring3Ref.current.rotation.z = -clock.elapsedTime * 0.4
    }
    if (coreRef.current) {
      coreRef.current.scale.setScalar(1 + Math.sin(clock.elapsedTime * 2) * 0.1)
    }
  })

return (
    <group position={[0, 1, 0]}>
      <mesh ref={ringRef}>
        <torusGeometry args={[2.5, 0.08, 16, 100]} />
        <meshBasicMaterial color="#00ffff" transparent opacity={0.9} />
      </mesh>
      <mesh ref={ring2Ref}>
        <torusGeometry args={[2, 0.06, 16, 100]} />
        <meshBasicMaterial color="#ff00ff" transparent opacity={0.7} />
      </mesh>
      <mesh ref={ring3Ref}>
        <torusGeometry args={[1.5, 0.04, 16, 100]} />
        <meshBasicMaterial color="#ff6b00" transparent opacity={0.6} />
      </mesh>
      <mesh ref={coreRef}>
        <icosahedronGeometry args={[0.5, 1]} />
        <MeshWobbleMaterial color="#00ffff" emissive="#00ffff" emissiveIntensity={2} factor={0.3} speed={2} />
      </mesh>
    </group>
  )
}

function DataStreams() {
  const streamsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (streamsRef.current) {
      streamsRef.current.children.forEach((stream, i) => {
        stream.position.y = ((clock.elapsedTime * 3 + i * 2) % 10) - 5
      })
    }
  })

return (
    <group ref={streamsRef}>
      {Array.from({ length: 20 }).map((_, i) => (
        <mesh key={i} position={[(Math.random() - 0.5) * 20, 0, (Math.random() - 0.5) * 20 - 5]}>
          <boxGeometry args={[0.05, 0.5, 0.05]} />
          <meshBasicMaterial color={i % 2 === 0 ? "#00ffff" : "#ff00ff"} transparent opacity={0.6} />
        </mesh>
      ))}
    </group>
  )
}

function FlyingVehicles() {
  const vehiclesRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (vehiclesRef.current) {
      vehiclesRef.current.children.forEach((vehicle, i) => {
        vehicle.position.x = Math.sin(clock.elapsedTime * 0.3 + i * 2) * 15
        vehicle.position.z = Math.cos(clock.elapsedTime * 0.3 + i * 2) * 10 - 10
        vehicle.rotation.y = -clock.elapsedTime * 0.3 - i * 2 + Math.PI / 2
      })
    }
  })

return (
    <group ref={vehiclesRef}>
      {[0, 1, 2].map((i) => (
        <group key={i} position={[0, 4 + i * 2, -10]}>
          <mesh>
            <boxGeometry args={[0.8, 0.2, 0.4]} />
            <meshStandardMaterial
              color="#0a0015"
              emissive={i % 2 === 0 ? "#ff00ff" : "#00ffff"}
              emissiveIntensity={0.5}
              metalness={0.9}
            />
          </mesh>
          {/* Engine glow */}
          <mesh position={[-0.5, 0, 0]}>
            <sphereGeometry args={[0.1, 16, 16]} />
            <meshBasicMaterial color={i % 2 === 0 ? "#ff00ff" : "#00ffff"} />
          </mesh>
        </group>
      ))}
    </group>
  )
}
[V0_FILE]typescriptreact:file="components/themes/imperial/imperial-scene.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef, useMemo } from "react"
import { useFrame } from "@react-three/fiber"
import { Float, Sparkles, MeshReflectorMaterial } from "@react-three/drei"
import * as THREE from "three"

export function ImperialScene() {
  return (
    <>
      <ambientLight intensity={0.08} />
      <pointLight position={[0, 15, 0]} color="#ff3333" intensity={3} castShadow />
      <pointLight position={[-15, 8, 5]} color="#ff0000" intensity={2} />
      <pointLight position={[15, 8, 5]} color="#ff0000" intensity={2} />
      <spotLight position={[0, 20, 0]} angle={0.4} penumbra={0.5} color="#ff3333" intensity={4} castShadow />
      <spotLight position={[0, 10, 15]} angle={0.3} penumbra={1} color="#660000" intensity={2} />

{/* Background */}
      <color attach="background" args={["#050508"]} />
      <fog attach="fog" args={["#050508", 8, 50]} />

{/* Red particle effects */}
      <Sparkles count={100} scale={25} size={2} speed={0.15} color="#ff3333" />
      <Sparkles count={50} scale={20} size={1.5} speed={0.3} color="#ff0000" />
    </>
  )
}

function ImperialFloor() {
  return (
    <group position={[0, -2, 0]}>
      <mesh rotation={[-Math.PI / 2, 0, 0]}>
        <planeGeometry args={[100, 100]} />
        <MeshReflectorMaterial
          blur={[400, 100]}
          resolution={1024}
          mixBlur={1}
          mixStrength={30}
          roughness={1}
          depthScale={1}
          color="#050508"
          metalness={0.8}
          mirror={0.3}
        />
      </mesh>
      <gridHelper args={[100, 40, "#ff3333", "#1a0a0a"]} position={[0, 0.01, 0]} />
    </group>
  )
}

function HexPanels() {
  const panelsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (panelsRef.current) {
      panelsRef.current.children.forEach((child, i) => {
        child.position.y = Math.sin(clock.elapsedTime * 0.5 + i * 0.3) * 0.3 + 3 + i * 0.2
      })
    }
  })

const hexPositions = useMemo(
    () => [
      [-5, 3, -6],
      [5, 3, -6],
      [-7, 3.5, -9],
      [7, 3.5, -9],
      [0, 4, -12],
      [-3, 2.5, -4],
      [3, 2.5, -4],
      [-9, 4, -12],
      [9, 4, -12],
    ],
    [],
  )

return (
    <group ref={panelsRef}>
      {hexPositions.map((pos, i) => (
        <Float key={i} speed={0.8} floatIntensity={0.2}>
          <group position={pos as [number, number, number]}>
            <mesh>
              <cylinderGeometry args={[1.2, 1.2, 0.15, 6]} />
              <meshStandardMaterial
                color="#0a0a12"
                emissive="#ff3333"
                emissiveIntensity={0.2}
                metalness={0.95}
                roughness={0.05}
              />
            </mesh>
            {/* Edge glow */}
            <mesh position={[0, 0.08, 0]}>
              <torusGeometry args={[1.2, 0.03, 6, 6]} />
              <meshBasicMaterial color="#ff3333" />
            </mesh>
            {/* Inner pattern */}
            <mesh position={[0, 0.09, 0]}>
              <cylinderGeometry args={[0.6, 0.6, 0.02, 6]} />
              <meshBasicMaterial color="#ff3333" transparent opacity={0.3} />
            </mesh>
          </group>
        </Float>
      ))}
    </group>
  )
}

function HexGrid() {
  return (
    <group position={[0, -1.9, -10]}>
      {Array.from({ length: 5 }).map((_, row) =>
        Array.from({ length: 7 }).map((_, col) => {
          const offset = row % 2 === 0 ? 0 : 1.5
          return (
            <mesh
              key={`${row}-${col}`}
              position={[(col - 3) * 3 + offset, 0, row * 2.6]}
              rotation={[-Math.PI / 2, 0, 0]}
            >
              <ringGeometry args={[1.2, 1.3, 6, 6]} />
              <meshBasicMaterial color="#ff3333" transparent opacity={0.15} />
            </mesh>
          )
        }),
      )}
    </group>
  )
}

function TargetingSystem() {
  const targetRef = useRef<THREE.Group>(null)
  const scanRef = useRef<THREE.Mesh>(null)

useFrame(({ clock }) => {
    if (targetRef.current) {
      targetRef.current.rotation.z = clock.elapsedTime * 0.3
    }
    if (scanRef.current) {
      scanRef.current.rotation.z = -clock.elapsedTime * 0.8
      const scale = 1 + Math.sin(clock.elapsedTime * 2) * 0.1
      scanRef.current.scale.set(scale, scale, 1)
    }
  })

return (
    <group position={[0, 2, 0]}>
      <group ref={targetRef}>
        {/* Outer ring */}
        <mesh>
          <torusGeometry args={[2.5, 0.08, 16, 64]} />
          <meshBasicMaterial color="#ff3333" />
        </mesh>
        {/* Tick marks */}
        {Array.from({ length: 24 }).map((_, i) => (
          <mesh key={i} position={[Math.cos((i * Math.PI * 2) / 24) * 2.5, Math.sin((i * Math.PI * 2) / 24) * 2.5, 0]}>
            <boxGeometry args={[0.15, 0.03, 0.03]} />
            <meshBasicMaterial color="#ff3333" />
          </mesh>
        ))}
        {/* Middle ring */}
        <mesh rotation={[0, 0, Math.PI / 6]}>
          <torusGeometry args={[1.8, 0.05, 16, 64]} />
          <meshBasicMaterial color="#ff3333" transparent opacity={0.7} />
        </mesh>
        {/* Inner ring */}
        <mesh rotation={[0, 0, -Math.PI / 6]}>
          <torusGeometry args={[1.2, 0.04, 16, 64]} />
          <meshBasicMaterial color="#ff3333" transparent opacity={0.5} />
        </mesh>
      </group>

{/* Scanning beam */}
      <mesh ref={scanRef}>
        <planeGeometry args={[2.5, 0.02]} />
        <meshBasicMaterial color="#ff3333" transparent opacity={0.8} side={THREE.DoubleSide} />
      </mesh>

{/* Crosshairs */}
      {[0, Math.PI / 2, Math.PI, Math.PI * 1.5].map((rot, i) => (
        <mesh key={i} position={[Math.cos(rot) * 2, Math.sin(rot) * 2, 0]}>
          <boxGeometry args={[0.6, 0.06, 0.06]} />
          <meshBasicMaterial color="#ff3333" />
        </mesh>
      ))}
    </group>
  )
}

function ImperialStructures() {
  return (
    <group>
      {/* Side pillars */}
      {[
        [-10, -10],
        [10, -10],
        [-12, -15],
        [12, -15],
        [-8, -20],
        [8, -20],
      ].map(([x, z], i) => (
        <group key={i} position={[x, 0, z]}>
          <mesh position={[0, 5, 0]}>
            <boxGeometry args={[1.5, 14, 1.5]} />
            <meshStandardMaterial color="#0a0a12" metalness={0.95} roughness={0.05} />
          </mesh>
          {/* Red accent lights */}
          {Array.from({ length: 8 }).map((_, j) => (
            <group key={j}>
              <mesh position={[0.76, j * 1.5, 0]}>
                <planeGeometry args={[0.02, 1]} />
                <meshBasicMaterial color="#ff3333" side={THREE.DoubleSide} />
              </mesh>
              <mesh position={[-0.76, j * 1.5, 0]}>
                <planeGeometry args={[0.02, 1]} />
                <meshBasicMaterial color="#ff3333" side={THREE.DoubleSide} />
              </mesh>
            </group>
          ))}
          {/* Top light */}
          <mesh position={[0, 12, 0]}>
            <sphereGeometry args={[0.3, 16, 16]} />
            <meshBasicMaterial color="#ff3333" />
          </mesh>
        </group>
      ))}
    </group>
  )
}

function ImperialArches() {
  return (
    <group>
      {[
        [-10, -10, 10, -10],
        [-12, -15, 12, -15],
      ].map(([x1, z1, x2, z2], i) => (
        <group key={i} position={[0, 10 + i * 2, (z1 + z2) / 2]}>
          {/* Arch beam */}
          <mesh>
            <boxGeometry args={[Math.abs(x2 - x1) - 1.5, 0.5, 0.5]} />
            <meshStandardMaterial color="#0a0a12" metalness={0.95} roughness={0.05} />
          </mesh>
          {/* Glow line */}
          <mesh position={[0, -0.26, 0]}>
            <boxGeometry args={[Math.abs(x2 - x1) - 2, 0.05, 0.1]} />
            <meshBasicMaterial color="#ff3333" />
          </mesh>
        </group>
      ))}
    </group>
  )
}

function TIEFighters() {
  const tiesRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (tiesRef.current) {
      tiesRef.current.children.forEach((tie, i) => {
        tie.position.x = Math.sin(clock.elapsedTime * 0.4 + i * 2.5) * 15
        tie.position.z = Math.cos(clock.elapsedTime * 0.4 + i * 2.5) * 12 - 15
        tie.position.y = 6 + Math.sin(clock.elapsedTime + i) * 2
        tie.rotation.y = -clock.elapsedTime * 0.4 - i * 2.5 + Math.PI
        tie.rotation.z = Math.sin(clock.elapsedTime * 2 + i) * 0.1
      })
    }
  })

return (
    <group ref={tiesRef}>
      {[0, 1, 2].map((i) => (
        <group key={i}>
          {/* Cockpit */}
          <mesh>
            <sphereGeometry args={[0.5, 16, 16]} />
            <meshStandardMaterial color="#1a1a2e" metalness={0.9} roughness={0.1} />
          </mesh>
          {/* Wings */}
          <mesh position={[-1, 0, 0]}>
            <boxGeometry args={[0.1, 1.8, 1.5]} />
            <meshStandardMaterial color="#1a1a2e" metalness={0.9} roughness={0.1} />
          </mesh>
          <mesh position={[1, 0, 0]}>
            <boxGeometry args={[0.1, 1.8, 1.5]} />
            <meshStandardMaterial color="#1a1a2e" metalness={0.9} roughness={0.1} />
          </mesh>
          {/* Wing details */}
          <mesh position={[-1.06, 0, 0]}>
            <planeGeometry args={[0.02, 1.6]} />
            <meshBasicMaterial color="#ff3333" side={THREE.DoubleSide} />
          </mesh>
          <mesh position={[1.06, 0, 0]}>
            <planeGeometry args={[0.02, 1.6]} />
            <meshBasicMaterial color="#ff3333" side={THREE.DoubleSide} />
          </mesh>
          {/* Window */}
          <mesh position={[0, 0, 0.51]}>
            <circleGeometry args={[0.2, 16]} />
            <meshBasicMaterial color="#ff3333" transparent opacity={0.7} />
          </mesh>
        </group>
      ))}
    </group>
  )
}

function DeathStarHologram() {
  const dsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (dsRef.current) {
      dsRef.current.rotation.y = clock.elapsedTime * 0.2
    }
  })

return (
    <Float speed={1} floatIntensity={0.2}>
      <group ref={dsRef} position={[0, 8, -15]}>
        {/* Death Star sphere */}
        <mesh>
          <sphereGeometry args={[2, 32, 32]} />
          <meshBasicMaterial color="#ff3333" wireframe transparent opacity={0.3} />
        </mesh>
        {/* Superlaser dish */}
        <mesh position={[0.8, 0.8, 1.2]}>
          <sphereGeometry args={[0.6, 16, 16, 0, Math.PI]} />
          <meshBasicMaterial color="#ff3333" transparent opacity={0.5} />
        </mesh>
        {/* Equator trench */}
        <mesh>
          <torusGeometry args={[2, 0.05, 8, 64]} />
          <meshBasicMaterial color="#ff3333" />
        </mesh>
      </group>
    </Float>
  )
}
[V0_FILE]typescriptreact:file="components/themes/ironman/ironman-scene.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef, useMemo } from "react"
import { useFrame } from "@react-three/fiber"
import { Float, Sparkles, Ring, MeshReflectorMaterial } from "@react-three/drei"
import * as THREE from "three"

export function IronManScene() {
  return (
    <>
      <ambientLight intensity={0.15} />
      <pointLight position={[0, 12, 0]} color="#ff9500" intensity={3} castShadow />
      <pointLight position={[8, 6, 8]} color="#00d4ff" intensity={2} />
      <pointLight position={[-8, 6, -8]} color="#ff9500" intensity={2} />
      <spotLight position={[0, 15, 10]} angle={0.4} penumbra={0.5} color="#ff9500" intensity={4} castShadow />
      <spotLight position={[-10, 10, 0]} angle={0.3} penumbra={1} color="#00d4ff" intensity={2} />

{/* Background */}
      <color attach="background" args={["#0a0a14"]} />

<FloatingTech />
    </>
  )
}

function ArcReactorFloor() {
  return (
    <group position={[0, -2, 0]}>
      <mesh rotation={[-Math.PI / 2, 0, 0]}>
        <circleGeometry args={[25, 64]} />
        <MeshReflectorMaterial
          blur={[300, 100]}
          resolution={1024}
          mixBlur={1}
          mixStrength={40}
          roughness={1}
          depthScale={1}
          color="#0a0a14"
          metalness={0.6}
          mirror={0.4}
        />
      </mesh>
      {/* Concentric arc reactor circles on floor */}
      {[4, 8, 12, 16, 20].map((radius, i) => (
        <mesh key={i} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, 0]}>
          <ringGeometry args={[radius - 0.08, radius + 0.08, 64]} />
          <meshBasicMaterial color="#ff9500" transparent opacity={0.4 - i * 0.06} />
        </mesh>
      ))}
      {/* Radial lines */}
      {Array.from({ length: 12 }).map((_, i) => (
        <mesh key={i} rotation={[-Math.PI / 2, 0, (i * Math.PI * 2) / 12]} position={[0, 0.02, 0]}>
          <planeGeometry args={[0.05, 20]} />
          <meshBasicMaterial color="#ff9500" transparent opacity={0.2} />
        </mesh>
      ))}
    </group>
  )
}

function HologramRings() {
  const ringsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (ringsRef.current) {
      ringsRef.current.children.forEach((ring, i) => {
        ring.rotation.y = clock.elapsedTime * (0.3 + i * 0.15) * (i % 2 === 0 ? 1 : -1)
        ring.rotation.x = Math.sin(clock.elapsedTime * 0.5 + i) * 0.15
        ring.rotation.z = Math.cos(clock.elapsedTime * 0.3 + i) * 0.1
      })
    }
  })

return (
    <group ref={ringsRef} position={[0, 2, 0]}>
      <Ring args={[3, 3.15, 64]} rotation={[Math.PI / 2, 0, 0]}>
        <meshBasicMaterial color="#ff9500" transparent opacity={0.7} side={THREE.DoubleSide} />
      </Ring>
      <Ring args={[3.6, 3.72, 64]} rotation={[Math.PI / 2.2, 0, 0]}>
        <meshBasicMaterial color="#00d4ff" transparent opacity={0.5} side={THREE.DoubleSide} />
      </Ring>
      <Ring args={[4.2, 4.32, 64]} rotation={[Math.PI / 2.5, 0, 0]}>
        <meshBasicMaterial color="#ff9500" transparent opacity={0.4} side={THREE.DoubleSide} />
      </Ring>
      <Ring args={[4.8, 4.88, 64]} rotation={[Math.PI / 3, 0, 0]}>
        <meshBasicMaterial color="#00d4ff" transparent opacity={0.3} side={THREE.DoubleSide} />
      </Ring>
      {/* Tick marks on rings */}
      {Array.from({ length: 36 }).map((_, i) => (
        <mesh key={i} position={[Math.cos((i * Math.PI * 2) / 36) * 3.5, 0, Math.sin((i * Math.PI * 2) / 36) * 3.5]}>
          <boxGeometry args={[0.1, 0.02, 0.3]} />
          <meshBasicMaterial color="#ff9500" transparent opacity={0.6} />
        </mesh>
      ))}
    </group>
  )
}

function DataOrbitals() {
  const orbitalsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (orbitalsRef.current) {
      orbitalsRef.current.children.forEach((orbital, i) => {
        orbital.rotation.y = clock.elapsedTime * (0.5 + i * 0.2)
      })
    }
  })

return (
    <group ref={orbitalsRef} position={[0, 2, 0]}>
      {[0, 1, 2].map((i) => (
        <group key={i} rotation={[0, (i * Math.PI * 2) / 3, 0]}>
          <mesh position={[5, Math.sin(i) * 0.5, 0]}>
            <sphereGeometry args={[0.15, 16, 16]} />
            <meshBasicMaterial color={i % 2 === 0 ? "#ff9500" : "#00d4ff"} />
          </mesh>
          {/* Trail */}
          <mesh position={[4.5, Math.sin(i) * 0.5, 0]}>
            <boxGeometry args={[0.8, 0.02, 0.02]} />
            <meshBasicMaterial color={i % 2 === 0 ? "#ff9500" : "#00d4ff"} transparent opacity={0.5} />
          </mesh>
        </group>
      ))}
    </group>
  )
}

function ArcReactor() {
  const reactorRef = useRef<THREE.Group>(null)
  const coreRef = useRef<THREE.Mesh>(null)
  const innerRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (reactorRef.current) {
      reactorRef.current.rotation.z = clock.elapsedTime * 0.5
    }
    if (coreRef.current) {
      const pulse = 1 + Math.sin(clock.elapsedTime * 3) * 0.15
      coreRef.current.scale.setScalar(pulse)
    }
    if (innerRef.current) {
      innerRef.current.rotation.z = -clock.elapsedTime * 0.8
    }
  })

return (
    <Float speed={2} floatIntensity={0.3}>
      <group position={[0, 2, 0]}>
        <group ref={reactorRef}>
          {/* Outer ring */}
          <mesh>
            <torusGeometry args={[2, 0.2, 16, 32]} />
            <meshStandardMaterial
              color="#001520"
              emissive="#00d4ff"
              emissiveIntensity={0.8}
              metalness={0.9}
              roughness={0.1}
            />
          </mesh>
          {/* Inner triangular segments */}
          {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((i) => (
            <mesh
              key={i}
              position={[Math.cos((i * Math.PI * 2) / 12) * 1.2, Math.sin((i * Math.PI * 2) / 12) * 1.2, 0]}
              rotation={[0, 0, (i * Math.PI * 2) / 12]}
            >
              <boxGeometry args={[0.4, 0.12, 0.12]} />
              <meshBasicMaterial color="#ff9500" />
            </mesh>
          ))}
        </group>

{/* Inner rotating elements */}
        <group ref={innerRef}>
          <mesh>
            <torusGeometry args={[0.8, 0.08, 16, 32]} />
            <meshBasicMaterial color="#00d4ff" />
          </mesh>
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <mesh key={i} position={[Math.cos((i * Math.PI * 2) / 6) * 0.5, Math.sin((i * Math.PI * 2) / 6) * 0.5, 0]}>
              <sphereGeometry args={[0.08, 16, 16]} />
              <meshBasicMaterial color="#ff9500" />
            </mesh>
          ))}
        </group>

{/* Core */}
        <mesh ref={coreRef}>
          <sphereGeometry args={[2.5, 64, 64]} />
          <meshStandardMaterial color="#00d4ff" emissive="#00d4ff" emissiveIntensity={2} transparent opacity={0.9} />
        </mesh>
      </group>
    </Float>
  )
}

function DataPanels() {
  const panelsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (panelsRef.current) {
      panelsRef.current.children.forEach((panel, i) => {
        panel.position.y = Math.sin(clock.elapsedTime * 0.5 + i * 0.8) * 0.3 + 3 + i * 0.3
      })
    }
  })

const positions = useMemo(
    () => [
      [-5, 3, -3, 0.4],
      [5, 3, -3, -0.4],
      [-4, 3.5, -5, 0.3],
      [4, 3.5, -5, -0.3],
      [-6, 2.5, -2, 0.5],
      [6, 2.5, -2, -0.5],
    ],
    [],
  )

return (
    <group ref={panelsRef}>
      {positions.map(([x, y, z, rotY], i) => (
        <Float key={i} speed={1.5} floatIntensity={0.15}>
          <group position={[x, y, z] as [number, number, number]} rotation={[0, rotY, 0]}>
            {/* Panel background */}
            <mesh>
              <planeGeometry args={[2, 2.5]} />
              <meshBasicMaterial color="#ff9500" transparent opacity={0.08} side={THREE.DoubleSide} />
            </mesh>
            {/* Panel border */}
            <mesh>
              <edgesGeometry args={[new THREE.PlaneGeometry(2, 2.5)]} />
              <lineBasicMaterial color="#ff9500" transparent opacity={0.8} />
            </mesh>
            {/* Data lines */}
            {Array.from({ length: 6 }).map((_, j) => (
              <mesh key={j} position={[-0.6 + Math.random() * 0.2, 0.8 - j * 0.35, 0.01]}>
                <planeGeometry args={[0.8 + Math.random() * 0.6, 0.08]} />
                <meshBasicMaterial color={j % 2 === 0 ? "#ff9500" : "#00d4ff"} transparent opacity={0.6} />
              </mesh>
            ))}
            {/* Header */}
            <mesh position={[0, 1.1, 0.01]}>
              <planeGeometry args={[1.8, 0.15]} />
              <meshBasicMaterial color="#00d4ff" transparent opacity={0.4} />
            </mesh>
          </group>
        </Float>
      ))}
    </group>
  )
}

function HolographicDisplays() {
  const displaysRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (displaysRef.current) {
      displaysRef.current.rotation.y = clock.elapsedTime * 0.1
    }
  })

return (
    <group ref={displaysRef} position={[0, 5, -8]}>
      {/* Large curved display */}
      <mesh>
        <cylinderGeometry args={[8, 8, 4, 32, 1, true, -Math.PI / 3, (Math.PI * 2) / 3]} />
        <meshBasicMaterial color="#ff9500" transparent opacity={0.05} side={THREE.DoubleSide} />
      </mesh>
      {/* Display grid */}
      {Array.from({ length: 8 }).map((_, i) => (
        <mesh key={i} position={[0, -1.5 + i * 0.5, 0]}>
          <torusGeometry args={[8, 0.02, 8, 64, (Math.PI * 2) / 3]} />
          <meshBasicMaterial color="#ff9500" transparent opacity={0.3} />
        </mesh>
      ))}
    </group>
  )
}

function SuitSchematic() {
  const schematicRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (schematicRef.current) {
      schematicRef.current.rotation.y = Math.sin(clock.elapsedTime * 0.3) * 0.3
    }
  })

return (
    <Float speed={1} floatIntensity={0.2}>
      <group ref={schematicRef} position={[8, 3, -5]}>
        {/* Humanoid wireframe */}
        {/* Head */}
        <mesh position={[0, 1.5, 0]}>
          <sphereGeometry args={[0.3, 8, 8]} />
          <meshBasicMaterial color="#ff9500" wireframe />
        </mesh>
        {/* Torso */}
        <mesh position={[0, 0.5, 0]}>
          <boxGeometry args={[0.8, 1.2, 0.4]} />
          <meshBasicMaterial color="#ff9500" wireframe />
        </mesh>
        {/* Arms */}
        <mesh position={[-0.7, 0.5, 0]}>
          <boxGeometry args={[0.2, 1, 0.2]} />
          <meshBasicMaterial color="#00d4ff" wireframe />
        </mesh>
        <mesh position={[0.7, 0.5, 0]}>
          <boxGeometry args={[0.2, 1, 0.2]} />
          <meshBasicMaterial color="#00d4ff" wireframe />
        </mesh>
        {/* Legs */}
        <mesh position={[-0.25, -0.8, 0]}>
          <boxGeometry args={[0.25, 1.4, 0.25]} />
          <meshBasicMaterial color="#ff9500" wireframe />
        </mesh>
        <mesh position={[0.25, -0.8, 0]}>
          <boxGeometry args={[0.25, 1.4, 0.25]} />
          <meshBasicMaterial color="#ff9500" wireframe />
        </mesh>
        {/* Arc reactor on chest */}
        <mesh position={[0, 0.6, 0.21]}>
          <circleGeometry args={[0.15, 16]} />
          <meshBasicMaterial color="#00d4ff" />
        </mesh>
      </group>
    </Float>
  )
}

function FloatingTech() {
  const techRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (techRef.current) {
      techRef.current.children.forEach((item, i) => {
        item.position.y = Math.sin(clock.elapsedTime + i * 1.5) * 0.5 + 2
        item.rotation.y = clock.elapsedTime * 0.5 + i
        item.rotation.x = Math.sin(clock.elapsedTime * 0.5 + i) * 0.2
      })
    }
  })

return (
    <group ref={techRef}>
      {[
        [-7, 2, 2],
        [7, 3, 1],
        [-5, 2.5, 4],
        [5, 2, 3],
      ].map((pos, i) => (
        <Float key={i} speed={2} floatIntensity={0.3}>
          <group position={pos as [number, number, number]}>
            {/* Tech cube */}
            <mesh>
              <boxGeometry args={[0.6, 0.6, 0.6]} />
              <meshStandardMaterial
                color="#0a0a14"
                emissive={i % 2 === 0 ? "#ff9500" : "#00d4ff"}
                emissiveIntensity={0.5}
                metalness={0.9}
                roughness={0.1}
              />
            </mesh>
            {/* Glow edges */}
            <mesh>
              <boxGeometry args={[0.62, 0.62, 0.62]} />
              <meshBasicMaterial color={i % 2 === 0 ? "#ff9500" : "#00d4ff"} wireframe />
            </mesh>
          </group>
        </Float>
      ))}
    </group>
  )
}
[V0_FILE]typescriptreact:file="components/themes/tron/tron-scene.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef, useMemo } from "react"
import { useFrame } from "@react-three/fiber"
import { Float, Sparkles, MeshReflectorMaterial } from "@react-three/drei"
import * as THREE from "three"

export function TronScene() {
  return (
    <>
      <ambientLight intensity={0.05} />
      <pointLight position={[0, 15, 0]} color="#00d4ff" intensity={4} castShadow />
      <pointLight position={[10, 5, 10]} color="#ff6600" intensity={2} />
      <pointLight position={[-10, 5, -10]} color="#00d4ff" intensity={2} />
      <spotLight position={[0, 20, 10]} angle={0.3} penumbra={1} color="#00d4ff" intensity={3} />

{/* Pure black background */}
      <color attach="background" args={["#000000"]} />

<Recognizers />
    </>
  )
}

function TronGrid() {
  return (
    <group position={[0, -2, 0]}>
      <mesh rotation={[-Math.PI / 2, 0, 0]}>
        <planeGeometry args={[200, 200]} />
        <MeshReflectorMaterial
          blur={[300, 100]}
          resolution={1024}
          mixBlur={1}
          mixStrength={50}
          roughness={1}
          depthScale={1.2}
          minDepthThreshold={0.4}
          maxDepthThreshold={1.4}
          color="#000000"
          metalness={0.5}
          mirror={0.5}
        />
      </mesh>
      <gridHelper args={[200, 200, "#00d4ff", "#002233"]} position={[0, 0.01, 0]} />
    </group>
  )
}

function LightPaths() {
  const pathsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (pathsRef.current) {
      pathsRef.current.children.forEach((child, i) => {
        const mesh = child as THREE.Mesh
        mesh.position.z = ((clock.elapsedTime * (5 + i) + i * 10) % 60) - 30
      })
    }
  })

return (
    <group ref={pathsRef}>
      {[-8, -4, 0, 4, 8].map((x, i) => (
        <mesh key={i} position={[x, -1.95, 0]} rotation={[-Math.PI / 2, 0, 0]}>
          <planeGeometry args={[0.4, 8]} />
          <meshBasicMaterial color={i === 2 ? "#ff6600" : "#00d4ff"} transparent opacity={0.9} />
        </mesh>
      ))}
    </group>
  )
}

function LightCycles() {
  const cyclesRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (cyclesRef.current) {
      cyclesRef.current.children.forEach((cycle, i) => {
        cycle.position.z = ((clock.elapsedTime * 8 + i * 20) % 60) - 30
      })
    }
  })

return (
    <group ref={cyclesRef}>
      {[-4, 4].map((x, i) => (
        <group key={i} position={[x, -1.5, 0]}>
          {/* Cycle body */}
          <mesh>
            <boxGeometry args={[0.6, 0.3, 1.2]} />
            <meshStandardMaterial
              color="#000000"
              emissive={i === 0 ? "#00d4ff" : "#ff6600"}
              emissiveIntensity={0.5}
              metalness={0.9}
            />
          </mesh>
          {/* Wheel glow */}
          <mesh position={[0, -0.1, 0.4]}>
            <torusGeometry args={[0.2, 0.05, 8, 16]} />
            <meshBasicMaterial color={i === 0 ? "#00d4ff" : "#ff6600"} />
          </mesh>
          <mesh position={[0, -0.1, -0.4]}>
            <torusGeometry args={[0.2, 0.05, 8, 16]} />
            <meshBasicMaterial color={i === 0 ? "#00d4ff" : "#ff6600"} />
          </mesh>
        </group>
      ))}
    </group>
  )
}

function IdentityDisc() {
  const discRef = useRef<THREE.Group>(null)
  const innerRingsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (discRef.current) {
      discRef.current.rotation.y = clock.elapsedTime * 0.5
      discRef.current.rotation.x = Math.sin(clock.elapsedTime * 0.3) * 0.2
    }
    if (innerRingsRef.current) {
      innerRingsRef.current.rotation.z = -clock.elapsedTime * 0.8
    }
  })

return (
    <Float speed={2} floatIntensity={0.5}>
      <group ref={discRef} position={[0, 3, 0]}>
        {/* Outer ring */}
        <mesh>
          <torusGeometry args={[2, 0.15, 16, 100]} />
          <meshStandardMaterial color="#000" emissive="#00d4ff" emissiveIntensity={1} metalness={0.9} roughness={0.1} />
        </mesh>
        {/* Second ring */}
        <mesh>
          <torusGeometry args={[1.6, 0.1, 16, 100]} />
          <meshBasicMaterial color="#ff6600" />
        </mesh>
        {/* Inner rotating rings */}
        <group ref={innerRingsRef}>
          <mesh>
            <torusGeometry args={[1.2, 0.06, 16, 100]} />
            <meshBasicMaterial color="#00d4ff" transparent opacity={0.8} />
          </mesh>
          <mesh rotation={[0, 0, Math.PI / 4]}>
            <torusGeometry args={[0.8, 0.04, 16, 100]} />
            <meshBasicMaterial color="#ff6600" transparent opacity={0.6} />
          </mesh>
        </group>
        {/* Center disc */}
        <mesh>
          <circleGeometry args={[0.6, 32]} />
          <meshStandardMaterial color="#001122" emissive="#00d4ff" emissiveIntensity={0.3} side={THREE.DoubleSide} />
        </mesh>
        {/* Data lines */}
        {[0, 1, 2, 3].map((i) => (
          <mesh key={i} position={[Math.cos((i * Math.PI) / 2) * 1.4, Math.sin((i * Math.PI) / 2) * 1.4, 0]}>
            <boxGeometry args={[0.6, 0.08, 0.08]} />
            <meshBasicMaterial color="#00d4ff" />
          </mesh>
        ))}
      </group>
    </Float>
  )
}

function CircuitTowers() {
  const towers = useMemo(
    () => [
      { pos: [-12, 0, -10], height: 10 },
      { pos: [12, 0, -10], height: 12 },
      { pos: [-15, 0, -15], height: 8 },
      { pos: [15, 0, -15], height: 14 },
      { pos: [-8, 0, -18], height: 9 },
      { pos: [8, 0, -18], height: 11 },
      { pos: [0, 0, -22], height: 16 },
    ],
    [],
  )

return (
    <group>
      {towers.map((tower, i) => (
        <group key={i} position={tower.pos as [number, number, number]}>
          {/* Tower body */}
          <mesh position={[0, tower.height / 2 - 2, 0]}>
            <boxGeometry args={[1, tower.height, 1]} />
            <meshStandardMaterial color="#000511" metalness={0.9} roughness={0.1} />
          </mesh>
          {/* Glow lines */}
          {Array.from({ length: Math.floor(tower.height / 1.2) }).map((_, j) => (
            <group key={j}>
              <mesh position={[0.51, j * 1.2 - 1.5, 0]}>
                <planeGeometry args={[0.02, 0.8]} />
                <meshBasicMaterial color="#00d4ff" side={THREE.DoubleSide} />
              </mesh>
              <mesh position={[-0.51, j * 1.2 - 1.5, 0]}>
                <planeGeometry args={[0.02, 0.8]} />
                <meshBasicMaterial color="#00d4ff" side={THREE.DoubleSide} />
              </mesh>
            </group>
          ))}
          {/* Top glow */}
          <mesh position={[0, tower.height - 2, 0]}>
            <sphereGeometry args={[0.3, 16, 16]} />
            <meshBasicMaterial color={i % 2 === 0 ? "#00d4ff" : "#ff6600"} />
          </mesh>
        </group>
      ))}
    </group>
  )
}

function DataBridges() {
  return (
    <group>
      {[
        [-12, -10, 12, -10],
        [-15, -15, -8, -18],
        [8, -18, 15, -15],
      ].map(([x1, z1, x2, z2], i) => {
        const midX = (x1 + x2) / 2
        const midZ = (z1 + z2) / 2
        const length = Math.sqrt((x2 - x1) ** 2 + (z2 - z1) ** 2)
        const angle = Math.atan2(z2 - z1, x2 - x1)

return (
          <group key={i} position={[midX, 4 + i, midZ]} rotation={[0, -angle, 0]}>
            <mesh>
              <boxGeometry args={[length, 0.1, 0.5]} />
              <meshStandardMaterial color="#000511" emissive="#00d4ff" emissiveIntensity={0.3} />
            </mesh>
            <mesh position={[0, 0.06, 0]}>
              <boxGeometry args={[length, 0.02, 0.1]} />
              <meshBasicMaterial color="#00d4ff" />
            </mesh>
          </group>
        )
      })}
    </group>
  )
}

function DataNodes() {
  const nodesRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (nodesRef.current) {
      nodesRef.current.children.forEach((node, i) => {
        node.position.y = Math.sin(clock.elapsedTime + i * 0.5) * 0.5 + 5 + i * 0.5
        node.rotation.y = clock.elapsedTime * 0.5
      })
    }
  })

return (
    <group ref={nodesRef}>
      {[
        [-6, 5, -5],
        [6, 6, -5],
        [-4, 4, -8],
        [4, 5, -8],
        [0, 7, -12],
      ].map((pos, i) => (
        <Float key={i} speed={1} floatIntensity={0.3}>
          <mesh position={pos as [number, number, number]}>
            <octahedronGeometry args={[0.4, 0]} />
            <meshStandardMaterial
              color="#000"
              emissive={i % 2 === 0 ? "#00d4ff" : "#ff6600"}
              emissiveIntensity={1}
              wireframe
            />
          </mesh>
        </Float>
      ))}
    </group>
  )
}

function Recognizers() {
  const shipsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (shipsRef.current) {
      shipsRef.current.children.forEach((ship, i) => {
        ship.position.x = Math.sin(clock.elapsedTime * 0.2 + i * 2) * 20
        ship.position.z = Math.cos(clock.elapsedTime * 0.2 + i * 2) * 15 - 15
        ship.position.y = 8 + Math.sin(clock.elapsedTime * 0.5 + i) * 2
        ship.rotation.y = -clock.elapsedTime * 0.2 - i * 2 + Math.PI
      })
    }
  })

return (
    <group ref={shipsRef}>
      {[0, 1].map((i) => (
        <group key={i}>
          {/* Main body */}
          <mesh>
            <boxGeometry args={[4, 0.5, 2]} />
            <meshStandardMaterial color="#000511" emissive="#ff6600" emissiveIntensity={0.3} />
          </mesh>
          {/* Legs */}
          <mesh position={[-1.5, -1.5, 0]}>
            <boxGeometry args={[0.3, 3, 0.3]} />
            <meshStandardMaterial color="#000511" />
          </mesh>
          <mesh position={[1.5, -1.5, 0]}>
            <boxGeometry args={[0.3, 3, 0.3]} />
            <meshStandardMaterial color="#000511" />
          </mesh>
          {/* Eye */}
          <mesh position={[0, 0, 1.01]}>
            <planeGeometry args={[2, 0.3]} />
            <meshBasicMaterial color="#ff6600" />
          </mesh>
        </group>
      ))}
    </group>
  )
}
[V0_FILE]typescriptreact:file="components/themes/neon-city/neon-city-scene.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef } from "react"
import { useFrame } from "@react-three/fiber"
import { MeshReflectorMaterial, Float } from "@react-three/drei"
import * as THREE from "three"

export function NeonCityScene() {
  const particlesRef = useRef<THREE.Points>(null)
  const neonSignsRef = useRef<THREE.Group>(null)

useFrame((state) => {
    const t = state.clock.getElapsedTime()

if (particlesRef.current) {
      particlesRef.current.rotation.y = t * 0.05
    }

if (neonSignsRef.current) {
      neonSignsRef.current.rotation.y = Math.sin(t * 0.3) * 0.1
    }
  })

const particleCount = 3000
  const particles = new Float32Array(particleCount * 3)
  const colors = new Float32Array(particleCount * 3)

for (let i = 0; i < particleCount; i++) {
    particles[i * 3] = (Math.random() - 0.5) * 100
    particles[i * 3 + 1] = Math.random() * 50
    particles[i * 3 + 2] = (Math.random() - 0.5) * 100

const color = new THREE.Color()
    color.setHSL(Math.random() * 0.3 + 0.7, 1, 0.5)
    colors[i * 3] = color.r
    colors[i * 3 + 1] = color.g
    colors[i * 3 + 2] = color.b
  }

return (
    <>
      <ambientLight intensity={0.2} />
      <pointLight position={[10, 10, 10]} intensity={1} color="#ff10f0" />
      <pointLight position={[-10, 5, -10]} intensity={1} color="#00ffff" />
      <pointLight position={[0, 15, 0]} intensity={1.5} color="#ffea00" />

{[...Array(8)].map((_, i) => (
        <Float key={i} speed={1 + i * 0.2} rotationIntensity={0.4} floatIntensity={1.2}>
          <mesh position={[Math.cos(i * 0.785) * 15, 3 + i, Math.sin(i * 0.785) * 15]}>
            <torusGeometry args={[1.5, 0.3, 16, 32]} />
            <meshStandardMaterial
              color={i % 2 === 0 ? "#ff10f0" : "#00ffff"}
              emissive={i % 2 === 0 ? "#ff10f0" : "#00ffff"}
              emissiveIntensity={1.5}
              wireframe
            />
          </mesh>
        </Float>
      ))}

<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2, 0]} receiveShadow>
        <planeGeometry args={[100, 100]} />
        <MeshReflectorMaterial
          color="#0a0014"
          metalness={0.8}
          roughness={0.2}
          mirror={0.5}
          blur={[300, 100]}
          mixBlur={1}
          mixStrength={80}
          resolution={1024}
        />
      </mesh>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/themes/3d-hud/full-3d-scene.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useRef, useState, useCallback, useEffect } from "react"
import { useFrame } from "@react-three/fiber"
import { Float, Sparkles, Ring, MeshReflectorMaterial, Html, OrbitControls } from "@react-three/drei"
import * as THREE from "three"
import { Send, Trash2, Thermometer, Droplets, Wind, Mic, MicOff, Volume2, VolumeX } from "lucide-react"
import { useVoice } from "@/hooks/use-voice"

interface Message {
  id: string
  role: "user" | "assistant"
  content: string
  timestamp: Date
}

export function Full3DScene() {
  return (
    <>
      <ambientLight intensity={0.15} />
      <pointLight position={[0, 12, 0]} color="#00d4ff" intensity={3} castShadow />
      <pointLight position={[8, 6, 8]} color="#ff9500" intensity={2} />
      <pointLight position={[-8, 6, -8]} color="#00d4ff" intensity={2} />
      <spotLight position={[0, 15, 10]} angle={0.4} penumbra={0.5} color="#00d4ff" intensity={4} castShadow />
      <spotLight position={[-10, 10, 0]} angle={0.3} penumbra={1} color="#ff9500" intensity={2} />

{/* 3D Chat Panel */}
      <Hologram3DPanel position={[-6, 3, 0]} rotation={[0, 0.4, 0]}>
        <ChatPanel3D />
      </Hologram3DPanel>

{/* 3D Temperature Panel */}
      <Hologram3DPanel position={[6, 3, 0]} rotation={[0, -0.4, 0]} width={2.5} height={3}>
        <TemperaturePanel3D />
      </Hologram3DPanel>

{/* 3D Status Panel */}
      <Hologram3DPanel position={[0, 5, -5]} rotation={[0, 0, 0]} width={4} height={1.5}>
        <StatusPanel3D />
      </Hologram3DPanel>

{/* 3D System Stats Panel */}
      <Hologram3DPanel position={[-4, 1.5, 4]} rotation={[0, 0.6, 0]} width={2} height={2}>
        <SystemStatsPanel3D />
      </Hologram3DPanel>

{/* 3D Quick Actions Panel */}
      <Hologram3DPanel position={[4, 1.5, 4]} rotation={[0, -0.6, 0]} width={2} height={2}>
        <QuickActionsPanel3D />
      </Hologram3DPanel>

<FloatingDataNodes />
      <Sparkles count={300} scale={30} size={2} speed={0.5} color="#00d4ff" />
      <Sparkles count={200} scale={25} size={1.5} speed={0.7} color="#ff9500" />
      <GridLines />
    </>
  )
}

function HolographicFloor() {
  return (
    <group position={[0, -2, 0]}>
      <mesh rotation={[-Math.PI / 2, 0, 0]}>
        <circleGeometry args={[30, 64]} />
        <MeshReflectorMaterial
          blur={[400, 100]}
          resolution={1024}
          mixBlur={1}
          mixStrength={50}
          roughness={1}
          depthScale={1.2}
          color="#050510"
          metalness={0.8}
          mirror={0.5}
        />
      </mesh>
      {/* Concentric circles */}
      {[3, 6, 9, 12, 15, 18, 21, 24].map((radius, i) => (
        <mesh key={i} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, 0]}>
          <ringGeometry args={[radius - 0.03, radius + 0.03, 64]} />
          <meshBasicMaterial color="#00d4ff" transparent opacity={0.3 - i * 0.03} />
        </mesh>
      ))}
      {/* Radial lines */}
      {Array.from({ length: 24 }).map((_, i) => (
        <mesh key={i} rotation={[-Math.PI / 2, 0, (i * Math.PI * 2) / 24]} position={[0, 0.02, 0]}>
          <planeGeometry args={[0.02, 24]} />
          <meshBasicMaterial color="#00d4ff" transparent opacity={0.15} />
        </mesh>
      ))}
    </group>
  )
}

function CentralCore() {
  const coreRef = useRef<THREE.Group>(null)
  const innerRef = useRef<THREE.Mesh>(null)
  const outerRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (coreRef.current) {
      coreRef.current.rotation.y = clock.elapsedTime * 0.3
    }
    if (innerRef.current) {
      const pulse = 1 + Math.sin(clock.elapsedTime * 2) * 0.1
      innerRef.current.scale.setScalar(pulse)
    }
    if (outerRef.current) {
      outerRef.current.rotation.y = -clock.elapsedTime * 0.5
      outerRef.current.rotation.x = Math.sin(clock.elapsedTime * 0.3) * 0.1
    }
  })

return (
    <Float speed={2} floatIntensity={0.3}>
      <group position={[0, 2, 0]}>
        <group ref={coreRef}>
          {/* Outer icosahedron frame */}
          <mesh>
            <icosahedronGeometry args={[1.8, 0]} />
            <meshBasicMaterial color="#00d4ff" wireframe transparent opacity={0.6} />
          </mesh>
          {/* Inner dodecahedron */}
          <group ref={outerRef}>
            <mesh>
              <dodecahedronGeometry args={[1.2, 0]} />
              <meshBasicMaterial color="#ff9500" wireframe transparent opacity={0.4} />
            </mesh>
          </group>
        </group>

{/* Core sphere */}
        <mesh ref={innerRef}>
          <sphereGeometry args={[0.5, 32, 32]} />
          <meshStandardMaterial color="#00d4ff" emissive="#00d4ff" emissiveIntensity={2} transparent opacity={0.9} />
        </mesh>

{/* Core glow */}
        <pointLight position={[0, 0, 0]} color="#00d4ff" intensity={5} distance={8} />
      </group>
    </Float>
  )
}

function HologramRings() {
  const ringsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (ringsRef.current) {
      ringsRef.current.children.forEach((ring, i) => {
        ring.rotation.y = clock.elapsedTime * (0.2 + i * 0.1) * (i % 2 === 0 ? 1 : -1)
        ring.rotation.x = Math.sin(clock.elapsedTime * 0.3 + i) * 0.1
      })
    }
  })

return (
    <group ref={ringsRef} position={[0, 2, 0]}>
      {[2.5, 3, 3.5, 4, 4.5].map((radius, i) => (
        <Ring key={i} args={[radius, radius + 0.08, 64]} rotation={[Math.PI / 2 + i * 0.1, 0, 0]}>
          <meshBasicMaterial
            color={i % 2 === 0 ? "#00d4ff" : "#ff9500"}
            transparent
            opacity={0.5 - i * 0.08}
            side={THREE.DoubleSide}
          />
        </Ring>
      ))}
    </group>
  )
}

function DataOrbitals() {
  const orbitalsRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (orbitalsRef.current) {
      orbitalsRef.current.children.forEach((orbital, i) => {
        orbital.rotation.y = clock.elapsedTime * (0.4 + i * 0.15)
      })
    }
  })

return (
    <group ref={orbitalsRef} position={[0, 2, 0]}>
      {[0, 1, 2, 3, 4, 5].map((i) => (
        <group key={i} rotation={[Math.random() * 0.5, (i * Math.PI * 2) / 6, 0]}>
          <mesh position={[5.5, 0, 0]}>
            <octahedronGeometry args={[0.15, 0]} />
            <meshBasicMaterial color={i % 2 === 0 ? "#00d4ff" : "#ff9500"} />
          </mesh>
          {/* Trail */}
          <mesh position={[5, 0, 0]} rotation={[0, 0, Math.PI / 2]}>
            <cylinderGeometry args={[0.02, 0.02, 0.8, 8]} />
            <meshBasicMaterial color={i % 2 === 0 ? "#00d4ff" : "#ff9500"} transparent opacity={0.4} />
          </mesh>
        </group>
      ))}
    </group>
  )
}

interface Hologram3DPanelProps {
  children: React.ReactNode
  position: [number, number, number]
  rotation?: [number, number, number]
  width?: number
  height?: number
}

function Hologram3DPanel({ children, position, rotation = [0, 0, 0], width = 3.5, height = 4 }: Hologram3DPanelProps) {
  const panelRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (panelRef.current) {
      panelRef.current.position.y = position[1] + Math.sin(clock.elapsedTime * 0.5 + position[0]) * 0.1
    }
  })

return (
    <Float speed={1.5} floatIntensity={0.1}>
      <group ref={panelRef} position={position} rotation={rotation}>
        {/* Panel frame */}
        <mesh>
          <planeGeometry args={[width, height]} />
          <meshBasicMaterial color="#00d4ff" transparent opacity={0.05} side={THREE.DoubleSide} />
        </mesh>

{/* Border glow */}
        <mesh position={[0, 0, -0.01]}>
          <planeGeometry args={[width + 0.1, height + 0.1]} />
          <meshBasicMaterial color="#00d4ff" transparent opacity={0.1} side={THREE.DoubleSide} />
        </mesh>

{/* Corner accents */}
        {[
          [-width / 2, height / 2],
          [width / 2, height / 2],
          [-width / 2, -height / 2],
          [width / 2, -height / 2],
        ].map(([x, y], i) => (
          <mesh key={i} position={[x, y, 0.01]}>
            <boxGeometry args={[0.15, 0.15, 0.02]} />
            <meshBasicMaterial color="#ff9500" />
          </mesh>
        ))}

{/* Edge lines */}
        <lineSegments>
          <edgesGeometry args={[new THREE.PlaneGeometry(width, height)]} />
          <lineBasicMaterial color="#00d4ff" transparent opacity={0.8} />
        </lineSegments>

{/* HTML content */}
        <Html
          transform
          occlude
          position={[0, 0, 0.05]}
          style={{
            width: `${width * 100}px`,
            height: `${height * 100}px`,
          }}
        >
          {children}
        </Html>
      </group>
    </Float>
  )
}

function ChatPanel3D() {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      role: "assistant",
      content: "Good evening. All systems operational. How may I assist you?",
      timestamp: new Date(),
    },
  ])
  const [input, setInput] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [voiceEnabled, setVoiceEnabled] = useState(true)
  const messagesEndRef = useRef<HTMLDivElement>(null)

const { isListening, isSpeaking, isSupported, startListening, stopListening, speak, stopSpeaking } = useVoice({
    onResult: (transcript) => {
      setInput(transcript)
    },
  })

useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages, isLoading])

const sendMessage = useCallback(
    async (messageText?: string) => {
      const textToSend = messageText || input
      if (!textToSend.trim() || isLoading) return

const userMsg: Message = {
        id: Date.now().toString(),
        role: "user",
        content: textToSend.trim(),
        timestamp: new Date(),
      }

setMessages((prev) => [...prev, userMsg])
      setInput("")
      setIsLoading(true)

try {
        const response = await fetch("/api/chat", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            messages: [...messages, userMsg].map((m) => ({ role: m.role, content: m.content })),
          }),
        })
        const data = await response.json()

const assistantContent = data.content || "Communication error. Please try again."

setMessages((prev) => [
          ...prev,
          {
            id: (Date.now() + 1).toString(),
            role: "assistant",
            content: assistantContent,
            timestamp: new Date(),
          },
        ])

// Speak the response if voice is enabled
        if (voiceEnabled) {
          speak(assistantContent)
        }
      } catch {
        const errorContent = "System disruption detected. Please try again."
        setMessages((prev) => [
          ...prev,
          {
            id: (Date.now() + 1).toString(),
            role: "assistant",
            content: errorContent,
            timestamp: new Date(),
          },
        ])
        if (voiceEnabled) {
          speak(errorContent)
        }
      } finally {
        setIsLoading(false)
      }
    },
    [input, isLoading, messages, voiceEnabled, speak],
  )

// Auto-send after voice input
  useEffect(() => {
    if (!isListening && input.trim()) {
      const timer = setTimeout(() => {
        sendMessage(input)
      }, 800)
      return () => clearTimeout(timer)
    }
  }, [isListening, input, sendMessage])

const handleClear = () => {
    stopSpeaking()
    setMessages([
      {
        id: Date.now().toString(),
        role: "assistant",
        content: "Chat cleared. How may I assist you?",
        timestamp: new Date(),
      },
    ])
  }

const toggleVoice = () => {
    if (isListening) {
      stopListening()
    } else {
      startListening()
    }
  }

return (
    <div
      className="flex h-full w-full flex-col rounded-lg bg-black/60 p-3 backdrop-blur-md"
      style={{ fontFamily: "monospace" }}
    >
      <div className="mb-2 flex items-center justify-between border-b border-cyan-500/30 pb-2">
        <div className="flex items-center gap-2">
          <div className="h-2 w-2 animate-pulse rounded-full bg-cyan-400" style={{ boxShadow: "0 0 8px #00d4ff" }} />
          <span className="text-xs tracking-widest text-cyan-400">COMMUNICATIONS</span>
        </div>
        <div className="flex items-center gap-1">
          {isSupported && (
            <button
              onClick={() => setVoiceEnabled(!voiceEnabled)}
              className="rounded p-1 text-cyan-400/60 hover:bg-white/10 hover:text-cyan-400"
              title={voiceEnabled ? "Disable voice" : "Enable voice"}
            >
              {voiceEnabled ? <Volume2 className="h-3 w-3" /> : <VolumeX className="h-3 w-3" />}
            </button>
          )}
          <button onClick={handleClear} className="rounded p-1 text-cyan-400/60 hover:bg-white/10 hover:text-cyan-400">
            <Trash2 className="h-3 w-3" />
          </button>
        </div>
      </div>

<div
        className="flex-1 overflow-y-auto pr-1"
        style={{ scrollbarWidth: "thin", scrollbarColor: "#00d4ff40 transparent" }}
      >
        {messages.map((msg) => (
          <div key={msg.id} className={`mb-2 flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
            <div
              className={`max-w-[85%] rounded-lg px-3 py-2 text-xs ${
                msg.role === "user"
                  ? "rounded-br-none border-r-2 border-orange-500 bg-cyan-500/20"
                  : "rounded-bl-none border-l-2 border-cyan-500 bg-slate-800/80"
              }`}
            >
              <p className="whitespace-pre-wrap text-white/90">{msg.content}</p>
              <span className="mt-1 block text-right text-[9px] text-white/40">
                {msg.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
              </span>
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="flex justify-start">
            <div className="flex items-center gap-1 rounded-lg bg-slate-800/80 px-3 py-2">
              {[0, 1, 2].map((i) => (
                <div
                  key={i}
                  className="h-1.5 w-1.5 animate-bounce rounded-full bg-cyan-400"
                  style={{ animationDelay: `${i * 0.15}s` }}
                />
              ))}
            </div>
          </div>
        )}
        {/* Speaking indicator */}
        {isSpeaking && (
          <div className="mt-2 flex items-center gap-2">
            <div className="flex items-center gap-0.5">
              {[0, 1, 2, 3, 4].map((i) => (
                <div
                  key={i}
                  className="w-0.5 animate-pulse rounded-full bg-orange-400"
                  style={{
                    height: `${8 + Math.sin(Date.now() / 100 + i) * 6}px`,
                    animationDelay: `${i * 0.1}s`,
                  }}
                />
              ))}
            </div>
            <span className="text-[10px] text-orange-400">Speaking...</span>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>

{/* Listening indicator */}
      {isListening && (
        <div className="mb-2 flex items-center justify-center gap-2 rounded-lg bg-orange-500/20 py-2">
          <div className="flex items-center gap-0.5">
            {[0, 1, 2, 3, 4].map((i) => (
              <div
                key={i}
                className="w-1 animate-pulse rounded-full bg-orange-400"
                style={{
                  height: `${12 + Math.random() * 12}px`,
                  animationDelay: `${i * 0.08}s`,
                }}
              />
            ))}
          </div>
          <span className="text-xs text-orange-400">Listening...</span>
        </div>
      )}

<div className="mt-2 flex items-center gap-2 rounded-lg border border-cyan-500/30 bg-black/50 px-2 py-1.5">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
          placeholder={isListening ? "Listening..." : "Type or speak..."}
          className="flex-1 bg-transparent text-xs text-white placeholder-white/30 outline-none"
          disabled={isLoading || isListening}
        />
        {/* Voice input button */}
        {isSupported && (
          <button
            onClick={toggleVoice}
            className={`rounded p-1.5 hover:bg-white/10 ${isListening ? "animate-pulse bg-orange-500/20" : ""}`}
            style={{ color: isListening ? "#ff9500" : "#00d4ff" }}
            title={isListening ? "Stop listening" : "Start voice input"}
          >
            {isListening ? <MicOff className="h-3 w-3" /> : <Mic className="h-3 w-3" />}
          </button>
        )}
        <button
          onClick={() => sendMessage()}
          disabled={!input.trim() || isLoading || isListening}
          className="rounded p-1.5 text-cyan-400 hover:bg-white/10 disabled:opacity-30"
        >
          <Send className="h-3 w-3" />
        </button>
      </div>
    </div>
  )
}

function TemperaturePanel3D() {
  const [unit, setUnit] = useState<"C" | "F">("C")
  const [weather, setWeather] = useState({ temperature: 22, humidity: 65, windSpeed: 12 })

useEffect(() => {
    const interval = setInterval(() => {
      setWeather((prev) => ({
        temperature: prev.temperature + (Math.random() - 0.5) * 0.5,
        humidity: Math.max(30, Math.min(90, prev.humidity + (Math.random() - 0.5) * 2)),
        windSpeed: Math.max(0, prev.windSpeed + (Math.random() - 0.5) * 1),
      }))
    }, 5000)
    return () => clearInterval(interval)
  }, [])

const displayTemp = unit === "C" ? weather.temperature : (weather.temperature * 9) / 5 + 32

<div className="mb-3 text-center">
        <div className="text-3xl font-bold text-cyan-400" style={{ textShadow: "0 0 20px #00d4ff40" }}>
          {displayTemp.toFixed(1)}°{unit}
        </div>
        <div className="mt-1 text-[10px] text-white/50">CLEAR SKY</div>
      </div>

<div className="grid grid-cols-2 gap-2">
        <div className="rounded border border-cyan-500/30 bg-cyan-500/10 p-2">
          <div className="flex items-center gap-1">
            <Droplets className="h-2.5 w-2.5 text-blue-400" />
            <span className="text-[9px] text-white/50">HUMIDITY</span>
          </div>
          <div className="text-sm text-blue-400">{weather.humidity.toFixed(0)}%</div>
        </div>
        <div className="rounded border border-cyan-500/30 bg-cyan-500/10 p-2">
          <div className="flex items-center gap-1">
            <Wind className="h-2.5 w-2.5 text-orange-400" />
            <span className="text-[9px] text-white/50">WIND</span>
          </div>
          <div className="text-sm text-orange-400">{weather.windSpeed.toFixed(0)} km/h</div>
        </div>
      </div>

<div className="mt-3">
        <div className="mb-1 flex justify-between text-[9px] text-white/40">
          <span>-10°</span>
          <span>50°</span>
        </div>
        <div className="h-1.5 overflow-hidden rounded-full bg-white/10">
          <div
            className="h-full rounded-full"
            style={{
              background: "linear-gradient(90deg, #3b82f6, #00d4ff, #ff9500)",
              width: `${((weather.temperature + 10) / 60) * 100}%`,
              transition: "width 0.5s",
            }}
          />
        </div>
      </div>
    </div>
  )
}

function StatusPanel3D() {
  const [time, setTime] = useState(new Date())

useEffect(() => {
    const interval = setInterval(() => setTime(new Date()), 1000)
    return () => clearInterval(interval)
  }, [])

return (
    <div
      className="flex h-full w-full items-center justify-between rounded-lg bg-black/60 px-4 backdrop-blur-md"
      style={{ fontFamily: "monospace" }}
    >
      <div className="flex items-center gap-3">
        <div className="h-3 w-3 animate-pulse rounded-full bg-green-400" style={{ boxShadow: "0 0 10px #4ade80" }} />
        <span className="text-sm tracking-widest text-green-400">BAKR AI ONLINE</span>
      </div>

<div className="text-right">
        <div className="text-xl font-bold text-cyan-400" style={{ textShadow: "0 0 15px #00d4ff40" }}>
          {time.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}
        </div>
        <div className="text-[10px] text-white/50">
          {time.toLocaleDateString([], { weekday: "long", month: "short", day: "numeric" })}
        </div>
      </div>
    </div>
  )
}

function SystemStatsPanel3D() {
  const [stats, setStats] = useState({ cpu: 23, memory: 45, network: 78 })

useEffect(() => {
    const interval = setInterval(() => {
      setStats({
        cpu: Math.max(10, Math.min(90, stats.cpu + (Math.random() - 0.5) * 10)),
        memory: Math.max(20, Math.min(80, stats.memory + (Math.random() - 0.5) * 5)),
        network: Math.max(0, Math.min(100, stats.network + (Math.random() - 0.5) * 15)),
      })
    }, 2000)
    return () => clearInterval(interval)
  }, [stats])

return (
    <div
      className="flex h-full w-full flex-col rounded-lg bg-black/60 p-3 backdrop-blur-md"
      style={{ fontFamily: "monospace" }}
    >
      <div className="mb-2 border-b border-cyan-500/30 pb-2">
        <span className="text-xs tracking-widest text-cyan-400">SYSTEM STATS</span>
      </div>

{[
        { label: "CPU", value: stats.cpu, color: "#00d4ff" },
        { label: "MEMORY", value: stats.memory, color: "#ff9500" },
        { label: "NETWORK", value: stats.network, color: "#4ade80" },
      ].map((stat) => (
        <div key={stat.label} className="mb-2">
          <div className="flex justify-between text-[10px]">
            <span className="text-white/60">{stat.label}</span>
            <span style={{ color: stat.color }}>{stat.value.toFixed(0)}%</span>
          </div>
          <div className="mt-1 h-1.5 overflow-hidden rounded-full bg-white/10">
            <div
              className="h-full rounded-full transition-all duration-500"
              style={{ backgroundColor: stat.color, width: `${stat.value}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  )
}

function QuickActionsPanel3D() {
  const actions = [
    { label: "SCAN", icon: "◎" },
    { label: "ANALYZE", icon: "◈" },
    { label: "SECURE", icon: "◉" },
    { label: "REPORT", icon: "◇" },
  ]

<div className="grid grid-cols-2 gap-2">
        {actions.map((action) => (
          <button
            key={action.label}
            className="flex flex-col items-center justify-center rounded border border-cyan-500/30 bg-cyan-500/10 p-2 transition-all hover:border-orange-500/50 hover:bg-orange-500/20"
          >
            <span className="text-lg text-cyan-400">{action.icon}</span>
            <span className="mt-1 text-[9px] text-white/70">{action.label}</span>
          </button>
        ))}
      </div>
    </div>
  )
}

function FloatingDataNodes() {
  const nodesRef = useRef<THREE.Group>(null)

useFrame(({ clock }) => {
    if (nodesRef.current) {
      nodesRef.current.children.forEach((node, i) => {
        node.position.y = 3 + Math.sin(clock.elapsedTime * 0.5 + i * 0.5) * 2
        node.rotation.y = clock.elapsedTime * 0.3
        node.rotation.x = Math.sin(clock.elapsedTime * 0.2 + i) * 0.2
      })
    }
  })

return (
    <group ref={nodesRef}>
      {Array.from({ length: 12 }).map((_, i) => {
        const angle = (i / 12) * Math.PI * 2
        const radius = 8 + Math.random() * 4
        return (
          <Float key={i} speed={1 + Math.random()} floatIntensity={0.5}>
            <mesh position={[Math.cos(angle) * radius, 3, Math.sin(angle) * radius]}>
              <octahedronGeometry args={[0.2, 0]} />
              <meshBasicMaterial color={i % 3 === 0 ? "#00d4ff" : i % 3 === 1 ? "#ff9500" : "#4ade80"} wireframe />
            </mesh>
          </Float>
        )
      })}
    </group>
  )
}

function GridLines() {
  return (
    <group position={[0, -1.99, 0]}>
      {Array.from({ length: 41 }).map((_, i) => (
        <mesh key={`h-${i}`} position={[0, 0, -20 + i]} rotation={[-Math.PI / 2, 0, 0]}>
          <planeGeometry args={[40, 0.02]} />
          <meshBasicMaterial color="#00d4ff" transparent opacity={0.1} />
        </mesh>
      ))}
      {Array.from({ length: 41 }).map((_, i) => (
        <mesh key={`v-${i}`} position={[-20 + i, 0, 0]} rotation={[-Math.PI / 2, 0, Math.PI / 2]}>
          <planeGeometry args={[40, 0.02]} />
          <meshBasicMaterial color="#00d4ff" transparent opacity={0.1} />
        </mesh>
      ))}
    </group>
  )
}
[V0_FILE]typescript:file="store/tools-store.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { create } from "zustand"
import { persist } from "zustand/middleware"

export interface HistoryEntry {
  id: string
  type:
    | "research"
    | "scanner"
    | "footprint"
    | "nmap"
    | "zap"
    | "nikto"
    | "gobuster"
    | "nessus"
    | "aircrack"
    | "shodan"
    | "sublister"
    | "theharvester"
    | "reconng"
    | "video-generator"
    | "openvas"
    | "acunetix"
    | "qualys"
    | "cobaltstrike"
    | "rapid7"
    | "coreimpact"
    | "tenableio"
  query: string
  timestamp: Date
  results: any
}

interface ToolsState {
  activeTool: ToolType | null
  setActiveTool: (tool: ToolType | null) => void

history: HistoryEntry[]
  addToHistory: (entry: Omit<HistoryEntry, "id" | "timestamp">) => void
  clearHistory: () => void

// Research tool state
  searchQuery: string
  searchResults: SearchResult[]
  isSearching: boolean
  setSearchQuery: (query: string) => void
  setSearchResults: (results: SearchResult[]) => void
  setIsSearching: (searching: boolean) => void

// Scanner tool state
  scanTarget: string
  scanResults: ScanResult[]
  isScanning: boolean
  scanProgress: number
  setScanTarget: (target: string) => void
  setScanResults: (results: ScanResult[]) => void
  setIsScanning: (scanning: boolean) => void
  setScanProgress: (progress: number) => void

// Footprint tool state
  footprintTarget: string
  footprintData: FootprintData | null
  isFootprinting: boolean
  setFootprintTarget: (target: string) => void
  setFootprintData: (data: FootprintData | null) => void
  setIsFootprinting: (footprinting: boolean) => void

nmapTarget: string
  nmapScanType: string
  nmapResults: NmapScanResult | null
  isNmapScanning: boolean
  nmapProgress: number
  setNmapTarget: (target: string) => void
  setNmapScanType: (type: string) => void
  setNmapResults: (results: NmapScanResult | null) => void
  setIsNmapScanning: (scanning: boolean) => void
  setNmapProgress: (progress: number) => void

zapTarget: string
  zapScanType: string
  zapResults: ZapScanResult | null
  isZapScanning: boolean
  zapProgress: number
  setZapTarget: (target: string) => void
  setZapScanType: (type: string) => void
  setZapResults: (results: ZapScanResult | null) => void
  setIsZapScanning: (scanning: boolean) => void
  setZapProgress: (progress: number) => void

// State for new cybersecurity tools
  niktoTarget: string
  niktoPort: number
  niktoResults: NiktoResult | null
  isNiktoScanning: boolean
  niktoProgress: number
  setNiktoTarget: (target: string) => void
  setNiktoPort: (port: number) => void
  setNiktoResults: (results: NiktoResult | null) => void
  setIsNiktoScanning: (scanning: boolean) => void
  setNiktoProgress: (progress: number) => void

gobusterTarget: string
  gobusterMode: string
  gobusterWordlist: string
  gobusterResults: GobusterResult | null
  isGobusterRunning: boolean
  gobusterProgress: number
  setGobusterTarget: (target: string) => void
  setGobusterMode: (mode: string) => void
  setGobusterWordlist: (wordlist: string) => void
  setGobusterResults: (results: GobusterResult | null) => void
  setIsGobusterRunning: (running: boolean) => void
  setGobusterProgress: (progress: number) => void

nessusTarget: string
  nessusScanType: string
  nessusResults: NessusResult | null
  isNessusScanning: boolean
  nessusProgress: number
  setNessusTarget: (target: string) => void
  setNessusScanType: (type: string) => void
  setNessusResults: (results: NessusResult | null) => void
  setIsNessusScanning: (scanning: boolean) => void
  setNessusProgress: (progress: number) => void

aircrackInterface: string
  aircrackMode: string
  aircrackResults: AircrackResult | null
  isAircrackRunning: boolean
  aircrackProgress: number
  setAircrackInterface: (iface: string) => void
  setAircrackMode: (mode: string) => void
  setAircrackResults: (results: AircrackResult | null) => void
  setIsAircrackRunning: (running: boolean) => void
  setAircrackProgress: (progress: number) => void

// New cybersecurity tools state
  shodanQuery: string
  setShodanQuery: (query: string) => void
  shodanResults: any[]
  setShodanResults: (results: any[]) => void
  shodanLoading: boolean
  setShodanLoading: (loading: boolean) => void

sublisterDomain: string
  setSublisterDomain: (domain: string) => void
  sublisterResults: string[]
  setSublisterResults: (results: string[]) => void
  sublisterLoading: boolean
  setSublisterLoading: (loading: boolean) => void

theharvesterDomain: string
  setTheharvesterDomain: (domain: string) => void
  theharvesterResults: any
  setTheharvesterResults: (results: any) => void
  theharvesterLoading: boolean
  setTheharvesterLoading: (loading: boolean) => void

reconngDomain: string
  setReconngDomain: (domain: string) => void
  reconngResults: any[]
  setReconngResults: (results: any[]) => void
  reconngLoading: boolean
  setReconngLoading: (loading: boolean) => void

videoGeneratorInput: string
  videoGeneratorOutput: string
  isVideoGenerating: boolean
  videoGeneratorProgress: number
  setVideoGeneratorInput: (input: string) => void
  setVideoGeneratorOutput: (output: string) => void
  setIsVideoGenerating: (generating: boolean) => void
  setVideoGeneratorProgress: (progress: number) => void

openvasTarget: string
  openvasScanType: string
  openvasResults: any[]
  isOpenvasScanning: boolean
  openvasProgress: number
  setOpenvasTarget: (target: string) => void
  setOpenvasScanType: (type: string) => void
  setOpenvasResults: (results: any[]) => void
  setIsOpenvasScanning: (scanning: boolean) => void
  setOpenvasProgress: (progress: number) => void

acunetixTarget: string
  acunetixScanType: string
  acunetixResults: any[]
  isAcunetixScanning: boolean
  acunetixProgress: number
  setAcunetixTarget: (target: string) => void
  setAcunetixScanType: (type: string) => void
  setAcunetixResults: (results: any[]) => void
  setIsAcunetixScanning: (scanning: boolean) => void
  setAcunetixProgress: (progress: number) => void

qualysTarget: string
  qualysScanType: string
  qualysResults: any[]
  isQualysScanning: boolean
  qualysProgress: number
  setQualysTarget: (target: string) => void
  setQualysScanType: (type: string) => void
  setQualysResults: (results: any[]) => void
  setIsQualysScanning: (scanning: boolean) => void
  setQualysProgress: (progress: number) => void

// Cobalt Strike state
  cobaltTarget: string
  setCobaltTarget: (target: string) => void
  cobaltPayload: string
  setCobaltPayload: (payload: string) => void
  cobaltResults: any
  setCobaltResults: (results: any) => void
  cobaltProgress: number
  setCobaltProgress: (progress: number) => void

// Rapid7 InsightVM state
  rapid7Target: string
  setRapid7Target: (target: string) => void
  rapid7ScanType: string
  setRapid7ScanType: (type: string) => void
  rapid7Results: any
  setRapid7Results: (results: any) => void
  rapid7Progress: number
  setRapid7Progress: (progress: number) => void

// Core Impact state
  coreTarget: string
  setCoreTarget: (target: string) => void
  coreModule: string
  setCoreModule: (module: string) => void
  coreResults: any
  setCoreResults: (results: any) => void
  coreProgress: number
  setCoreProgress: (progress: number) => void

// Tenable.io state
  tenableTarget: string
  setTenableTarget: (target: string) => void
  tenableScanType: string
  setTenableScanType: (type: string) => void
  tenableResults: any
  setTenableResults: (results: any) => void
  tenableProgress: number
  setTenableProgress: (progress: number) => void
}

export interface SearchResult {
  title: string
  url: string
  snippet: string
  source: string
  publishedDate?: string
  author?: string
  category?: string
  relevanceScore?: number
  imageUrl?: string
  wordCount?: number
  readTime?: string
}

export interface ScanResult {
  port: number
  service: string
  status: "open" | "closed" | "filtered"
  version?: string
  protocol?: string
  banner?: string
  vulnerabilities?: string[]
  cve?: string[]
  riskLevel?: "low" | "medium" | "high" | "critical"
  lastSeen?: string
}

export interface FootprintData {
  domain: string
  ip: string
  ipv6?: string
  location: string
  city?: string
  country?: string
  region?: string
  coordinates?: { lat: number; lng: number }
  isp: string
  asn?: string
  organization?: string
  dns: string[]
  mxRecords?: { priority: number; host: string }[]
  txtRecords?: string[]
  subdomains: string[]
  technologies: { name: string; version?: string; category: string }[]
  emails: string[]
  phones?: string[]
  socialMedia: { platform: string; url: string; username?: string }[]
  sslCertificate?: {
    issuer: string
    validFrom: string
    validTo: string
    algorithm: string
    fingerprint: string
  }
  headers?: { name: string; value: string }[]
  whois?: {
    registrar: string
    createdDate: string
    expiryDate: string
    updatedDate: string
    nameServers: string[]
    status: string[]
  }
  securityHeaders?: { header: string; present: boolean; value?: string }[]
  openPorts?: number[]
  robots?: string[]
  sitemap?: string[]
}

export interface NmapScanResult {
  target: string
  scanType: string
  startTime: string
  endTime: string
  duration: string
  hostsUp: number
  hostsDown: number
  ports: NmapPort[]
  osDetection?: {
    name: string
    accuracy: number
    family: string
    generation: string
    type: string
  }
  scripts?: {
    name: string
    output: string
  }[]
  traceroute?: {
    hop: number
    ip: string
    rtt: string
    hostname?: string
  }[]
  rawOutput: string[]
}

export interface NmapPort {
  port: number
  state: "open" | "closed" | "filtered" | "open|filtered"
  service: string
  version?: string
  protocol: string
  reason: string
  conf: number
  cpe?: string
  scripts?: { name: string; output: string }[]
  extraInfo?: string
}

export interface ZapScanResult {
  target: string
  scanType: string
  startTime: string
  endTime: string
  duration: string
  riskSummary: {
    high: number
    medium: number
    low: number
    informational: number
  }
  alerts: ZapAlert[]
  spiderResults?: {
    urlsFound: number
    urlsOutOfScope: number
    duration: string
  }
  passiveScanResults?: {
    alertsRaised: number
    duration: string
  }
  activeScanResults?: {
    requestsSent: number
    alertsRaised: number
    duration: string
  }
}

export interface ZapAlert {
  id: string
  name: string
  risk: "High" | "Medium" | "Low" | "Informational"
  confidence: "High" | "Medium" | "Low"
  description: string
  solution: string
  reference: string[]
  cweid: string
  wascid: string
  url: string
  method: string
  parameter?: string
  attack?: string
  evidence?: string
  otherInfo?: string
  instances: number
}

export interface NiktoResult {
  target: string
  port: number
  startTime: string
  endTime: string
  duration: string
  serverInfo: {
    server: string
    hostname: string
    ip: string
    port: number
    ssl: boolean
  }
  vulnerabilities: NiktoVuln[]
  statistics: {
    itemsTested: number
    itemsFound: number
    errors: number
  }
  console: string[]
}

export interface NiktoVuln {
  id: string
  osvdbId: string
  method: string
  uri: string
  description: string
  references: string[]
  severity: "High" | "Medium" | "Low" | "Info"
}

export interface GobusterResult {
  target: string
  mode: string
  wordlist: string
  startTime: string
  endTime: string
  duration: string
  found: GobusterEntry[]
  statistics: {
    requests: number
    errors: number
    duration: string
  }
  console: string[]
}

export interface GobusterEntry {
  path: string
  status: number
  size: number
  redirect?: string
  type: "directory" | "file" | "subdomain"
}

export interface NessusResult {
  target: string
  scanName: string
  policyName: string
  startTime: string
  endTime: string
  duration: string
  hosts: NessusHost[]
  vulnerabilities: NessusVuln[]
  summary: {
    critical: number
    high: number
    medium: number
    low: number
    info: number
  }
  compliance?: NessusCompliance[]
  console: string[]
}

export interface NessusHost {
  ip: string
  hostname: string
  os: string
  openPorts: number
  vulnCount: {
    critical: number
    high: number
    medium: number
    low: number
  }
}

export interface NessusVuln {
  pluginId: string
  pluginName: string
  severity: "Critical" | "High" | "Medium" | "Low" | "Info"
  cvss: number
  description: string
  solution: string
  seeAlso: string[]
  cve: string[]
  host: string
  port: number
  protocol: string
  pluginOutput?: string
}

export interface NessusCompliance {
  checkName: string
  status: "PASSED" | "FAILED" | "WARNING"
  description: string
  solution: string
}

export interface AircrackResult {
  interface: string
  mode: string
  startTime: string
  endTime: string
  duration: string
  networks: AircrackNetwork[]
  handshakes: AircrackHandshake[]
  crackedKeys: AircrackCracked[]
  statistics: {
    packetsCapture: number
    dataPackets: number
    beacons: number
  }
  console: string[]
}

export interface AircrackNetwork {
  bssid: string
  channel: number
  encryption: string
  cipher: string
  auth: string
  essid: string
  power: number
  beacons: number
  data: number
  clients: number
}

export interface AircrackHandshake {
  bssid: string
  essid: string
  captureTime: string
  file: string
}

export interface AircrackCracked {
  bssid: string
  essid: string
  key: string
  keyType: string
  crackTime: string
}

export interface CobaltStrikeResult {
  target: string
  payload: string
  results: any
  progress: number
}

export interface Rapid7Result {
  target: string
  scanType: string
  results: any
  progress: number
}

export interface CoreImpactResult {
  target: string
  module: string
  results: any
  progress: number
}

export interface TenableIoResult {
  target: string
  scanType: string
  results: any
  progress: number
}

export const useToolsStore = create<ToolsState>()(
  persist(
    (set) => ({
      activeTool: null,
      setActiveTool: (tool) => set({ activeTool: tool }),

history: [],
      addToHistory: (entry) =>
        set((state) => ({
          history: [
            {
              ...entry,
              id: Math.random().toString(36).substring(7),
              timestamp: new Date(),
            },
            ...state.history,
          ].slice(0, 50),
        })),
      clearHistory: () => set({ history: [] }),

// Research
      searchQuery: "",
      searchResults: [],
      isSearching: false,
      setSearchQuery: (query) => set({ searchQuery: query }),
      setSearchResults: (results) => set({ searchResults: results }),
      setIsSearching: (searching) => set({ isSearching: searching }),

// Scanner
      scanTarget: "",
      scanResults: [],
      isScanning: false,
      scanProgress: 0,
      setScanTarget: (target) => set({ scanTarget: target }),
      setScanResults: (results) => set({ scanResults: results }),
      setIsScanning: (scanning) => set({ isScanning: scanning }),
      setScanProgress: (progress) => set({ scanProgress: progress }),

// Footprint
      footprintTarget: "",
      footprintData: null,
      isFootprinting: false,
      setFootprintTarget: (target) => set({ footprintTarget: target }),
      setFootprintData: (data) => set({ footprintData: data }),
      setIsFootprinting: (footprinting) => set({ isFootprinting: footprinting }),

nmapTarget: "",
      nmapScanType: "quick",
      nmapResults: null,
      isNmapScanning: false,
      nmapProgress: 0,
      setNmapTarget: (target) => set({ nmapTarget: target }),
      setNmapScanType: (type) => set({ nmapScanType: type }),
      setNmapResults: (results) => set({ nmapResults: results }),
      setIsNmapScanning: (scanning) => set({ isNmapScanning: scanning }),
      setNmapProgress: (progress) => set({ nmapProgress: progress }),

zapTarget: "",
      zapScanType: "baseline",
      zapResults: null,
      isZapScanning: false,
      zapProgress: 0,
      setZapTarget: (target) => set({ zapTarget: target }),
      setZapScanType: (type) => set({ zapScanType: type }),
      setZapResults: (results) => set({ zapResults: results }),
      setIsZapScanning: (scanning) => set({ isZapScanning: scanning }),
      setZapProgress: (progress) => set({ zapProgress: progress }),

// New cybersecurity tools
      niktoTarget: "",
      niktoPort: 80,
      niktoResults: null,
      isNiktoScanning: false,
      niktoProgress: 0,
      setNiktoTarget: (target) => set({ niktoTarget: target }),
      setNiktoPort: (port) => set({ niktoPort: port }),
      setNiktoResults: (results) => set({ niktoResults: results }),
      setIsNiktoScanning: (scanning) => set({ isNiktoScanning: scanning }),
      setNiktoProgress: (progress) => set({ niktoProgress: progress }),

gobusterTarget: "",
      gobusterMode: "dir",
      gobusterWordlist: "common.txt",
      gobusterResults: null,
      isGobusterRunning: false,
      gobusterProgress: 0,
      setGobusterTarget: (target) => set({ gobusterTarget: target }),
      setGobusterMode: (mode) => set({ gobusterMode: mode }),
      setGobusterWordlist: (wordlist) => set({ gobusterWordlist: wordlist }),
      setGobusterResults: (results) => set({ gobusterResults: results }),
      setIsGobusterRunning: (running) => set({ isGobusterRunning: running }),
      setGobusterProgress: (progress) => set({ gobusterProgress: progress }),

nessusTarget: "",
      nessusScanType: "basic",
      nessusResults: null,
      isNessusScanning: false,
      nessusProgress: 0,
      setNessusTarget: (target) => set({ nessusTarget: target }),
      setNessusScanType: (type) => set({ nessusScanType: type }),
      setNessusResults: (results) => set({ nessusResults: results }),
      setIsNessusScanning: (scanning) => set({ isNessusScanning: scanning }),
      setNessusProgress: (progress) => set({ nessusProgress: progress }),

aircrackInterface: "wlan0",
      aircrackMode: "monitor",
      aircrackResults: null,
      isAircrackRunning: false,
      aircrackProgress: 0,
      setAircrackInterface: (iface) => set({ aircrackInterface: iface }),
      setAircrackMode: (mode) => set({ aircrackMode: mode }),
      setAircrackResults: (results) => set({ aircrackResults: results }),
      setIsAircrackRunning: (running) => set({ isAircrackRunning: running }),
      setAircrackProgress: (progress) => set({ aircrackProgress: progress }),

shodanQuery: "",
      setShodanQuery: (query) => set({ shodanQuery: query }),
      shodanResults: [],
      setShodanResults: (results) => set({ shodanResults: results }),
      shodanLoading: false,
      setShodanLoading: (loading) => set({ shodanLoading: loading }),

sublisterDomain: "",
      setSublisterDomain: (domain) => set({ sublisterDomain: domain }),
      sublisterResults: [],
      setSublisterResults: (results) => set({ sublisterResults: results }),
      sublisterLoading: false,
      setSublisterLoading: (loading) => set({ sublisterLoading: loading }),

theharvesterDomain: "",
      setTheharvesterDomain: (domain) => set({ theharvesterDomain: domain }),
      theharvesterResults: null,
      setTheharvesterResults: (results) => set({ theharvesterResults: results }),
      theharvesterLoading: false,
      setTheharvesterLoading: (loading) => set({ theharvesterLoading: loading }),

reconngDomain: "",
      setReconngDomain: (domain) => set({ reconngDomain: domain }),
      reconngResults: [],
      setReconngResults: (results) => set({ reconngResults: results }),
      reconngLoading: false,
      setReconngLoading: (loading) => set({ reconngLoading: loading }),

videoGeneratorInput: "",
      videoGeneratorOutput: "",
      isVideoGenerating: false,
      videoGeneratorProgress: 0,
      setVideoGeneratorInput: (input) => set({ videoGeneratorInput: input }),
      setVideoGeneratorOutput: (output) => set({ videoGeneratorOutput: output }),
      setIsVideoGenerating: (generating) => set({ isVideoGenerating: generating }),
      setVideoGeneratorProgress: (progress) => set({ videoGeneratorProgress: progress }),

openvasTarget: "",
      openvasScanType: "full",
      openvasResults: [],
      isOpenvasScanning: false,
      openvasProgress: 0,
      setOpenvasTarget: (target) => set({ openvasTarget: target }),
      setOpenvasScanType: (type) => set({ openvasScanType: type }),
      setOpenvasResults: (results) => set({ openvasResults: results }),
      setIsOpenvasScanning: (scanning) => set({ isOpenvasScanning: scanning }),
      setOpenvasProgress: (progress) => set({ openvasProgress: progress }),

acunetixTarget: "",
      acunetixScanType: "standard",
      acunetixResults: [],
      isAcunetixScanning: false,
      acunetixProgress: 0,
      setAcunetixTarget: (target) => set({ acunetixTarget: target }),
      setAcunetixScanType: (type) => set({ acunetixScanType: type }),
      setAcunetixResults: (results) => set({ acunetixResults: results }),
      setIsAcunetixScanning: (scanning) => set({ isAcunetixScanning: scanning }),
      setAcunetixProgress: (progress) => set({ acunetixProgress: progress }),

qualysTarget: "",
      qualysScanType: "web",
      qualysResults: [],
      isQualysScanning: false,
      qualysProgress: 0,
      setQualysTarget: (target) => set({ qualysTarget: target }),
      setQualysScanType: (type) => set({ qualysScanType: type }),
      setQualysResults: (results) => set({ qualysResults: results }),
      setIsQualysScanning: (scanning) => set({ isQualysScanning: scanning }),
      setQualysProgress: (progress) => set({ qualysProgress: progress }),

// Cobalt Strike state
      cobaltTarget: "",
      setCobaltTarget: (target) => set({ cobaltTarget: target }),
      cobaltPayload: "windows/beacon_https",
      setCobaltPayload: (payload) => set({ cobaltPayload: payload }),
      cobaltResults: null,
      setCobaltResults: (results) => set({ cobaltResults: results }),
      cobaltProgress: 0,
      setCobaltProgress: (progress) => set({ cobaltProgress: progress }),

// Rapid7 InsightVM state
      rapid7Target: "",
      setRapid7Target: (target) => set({ rapid7Target: target }),
      rapid7ScanType: "discovery",
      setRapid7ScanType: (type) => set({ rapid7ScanType: type }),
      rapid7Results: null,
      setRapid7Results: (results) => set({ rapid7Results: results }),
      rapid7Progress: 0,
      setRapid7Progress: (progress) => set({ rapid7Progress: progress }),

// Core Impact state
      coreTarget: "",
      setCoreTarget: (target) => set({ coreTarget: target }),
      coreModule: "network_attack",
      setCoreModule: (module) => set({ coreModule: module }),
      coreResults: null,
      setCoreResults: (results) => set({ coreResults: results }),
      coreProgress: 0,
      setCoreProgress: (progress) => set({ coreProgress: progress }),

// Tenable.io state
      tenableTarget: "",
      setTenableTarget: (target) => set({ tenableTarget: target }),
      tenableScanType: "basic",
      setTenableScanType: (type) => set({ tenableScanType: type }),
      tenableResults: null,
      setTenableResults: (results) => set({ tenableResults: results }),
      tenableProgress: 0,
      setTenableProgress: (progress) => set({ tenableProgress: progress }),
    }),
    {
      name: "tools-storage",
    },
  ),
)
[V0_FILE]typescriptreact:file="components/tools/cobaltstrike-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Play, Download, Copy, Shield, Loader2, Check, AlertCircle } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function CobaltStrikePanel() {
  const {
    cobaltTarget,
    setCobaltTarget,
    cobaltPayload,
    setCobaltPayload,
    cobaltResults,
    setCobaltResults,
    cobaltProgress,
    setCobaltProgress,
    addToHistory,
  } = useToolsStore()

const [isRunning, setIsRunning] = useState(false)
  const [copied, setCopied] = useState(false)

const payloadTypes = [
    "windows/beacon_https",
    "windows/beacon_dns",
    "linux/beacon_reverse_tcp",
    "macos/beacon_reverse_https",
    "windows/foreign/reverse_tcp",
    "windows/powershell",
  ]

const runCobaltStrike = async () => {
    if (!cobaltTarget) return

setIsRunning(true)
    setCobaltProgress(0)
    setCobaltResults(null)

const steps = [
      "Initializing Cobalt Strike Team Server",
      "Generating payload",
      "Establishing C2 channel",
      "Deploying beacon",
      "Executing post-exploitation modules",
      "Collecting intelligence",
      "Generating attack report",
    ]

for (let i = 0; i < steps.length; i++) {
      await new Promise((resolve) => setTimeout(resolve, 1500))
      setCobaltProgress(((i + 1) / steps.length) * 100)
    }

const results = {
      target: cobaltTarget,
      payload: cobaltPayload,
      timestamp: new Date().toISOString(),
      beaconStatus: "Active",
      sessions: [
        {
          id: "session_001",
          user: "SYSTEM",
          computer: cobaltTarget,
          os: "Windows 10 Pro",
          arch: "x64",
          ip: cobaltTarget,
          beacon: cobaltPayload,
          checkin: "2s ago",
        },
      ],
      credentials: [
        { username: "Administrator", password: "[REDACTED]", domain: "CORP", type: "NTLM Hash" },
        { username: "jdoe", password: "[REDACTED]", domain: "CORP", type: "Plaintext" },
        { username: "service_sql", password: "[REDACTED]", domain: "LOCAL", type: "NTLM Hash" },
      ],
      networkMap: {
        domain: "CORP.LOCAL",
        domainController: "DC01.corp.local",
        servers: ["SQL01.corp.local", "FILE01.corp.local", "EXCHANGE01.corp.local"],
        workstations: 45,
      },
      privileges: {
        currentUser: "NT AUTHORITY\\SYSTEM",
        groups: ["Administrators", "Domain Admins", "Enterprise Admins"],
        tokens: ["SeDebugPrivilege", "SeImpersonatePrivilege"],
      },
      exploits: [
        { cve: "CVE-2021-34527", name: "PrintNightmare", status: "Exploitable", severity: "Critical" },
        { cve: "CVE-2020-1472", name: "Zerologon", status: "Exploitable", severity: "Critical" },
        { cve: "CVE-2019-1040", name: "NTLM Relay", status: "Exploitable", severity: "High" },
      ],
      lateralMovement: [
        { technique: "Pass-the-Hash", target: "FILE01", status: "Success" },
        { technique: "WMI Exec", target: "SQL01", status: "Success" },
        { technique: "PSExec", target: "DC01", status: "Detected & Blocked" },
      ],
      dataExfiltration: {
        files: 342,
        size: "2.4 GB",
        types: ["Documents", "Spreadsheets", "Database Backups", "Credentials"],
      },
    }

setCobaltResults(results)
    addToHistory({
      type: "cobaltstrike",
      query: cobaltTarget,
      results,
    })
    setIsRunning(false)
  }

const downloadReport = () => {
    const report = `COBALT STRIKE PENETRATION TEST REPORT
======================================

Target: ${cobaltTarget}
Payload: ${cobaltPayload}
Timestamp: ${cobaltResults?.timestamp}

EXECUTIVE SUMMARY
-----------------
Successfully established command and control (C2) communication with target infrastructure.
Achieved SYSTEM-level access and domain administrator privileges.
Identified critical vulnerabilities and lateral movement opportunities.

BEACON STATUS: ${cobaltResults?.beaconStatus}

ACTIVE SESSIONS
--------------
${cobaltResults?.sessions?.map((s: any) => `- ${s.computer} (${s.user}) - ${s.os} ${s.arch}`).join("\n")}

CREDENTIALS HARVESTED
--------------------
${cobaltResults?.credentials?.map((c: any) => `- ${c.domain}\\${c.username} (${c.type})`).join("\n")}

NETWORK MAPPING
--------------
Domain: ${cobaltResults?.networkMap?.domain}
Domain Controller: ${cobaltResults?.networkMap?.domainController}
Servers: ${cobaltResults?.networkMap?.servers?.join(", ")}
Workstations: ${cobaltResults?.networkMap?.workstations}

PRIVILEGE ESCALATION
-------------------
Current User: ${cobaltResults?.privileges?.currentUser}
Groups: ${cobaltResults?.privileges?.groups?.join(", ")}

EXPLOITABLE VULNERABILITIES
--------------------------
${cobaltResults?.exploits?.map((e: any) => `- ${e.cve}: ${e.name} (${e.severity})`).join("\n")}

LATERAL MOVEMENT
---------------
${cobaltResults?.lateralMovement?.map((l: any) => `- ${l.technique} → ${l.target}: ${l.status}`).join("\n")}

DATA EXFILTRATION
----------------
Files: ${cobaltResults?.dataExfiltration?.files}
Size: ${cobaltResults?.dataExfiltration?.size}
Types: ${cobaltResults?.dataExfiltration?.types?.join(", ")}

RECOMMENDATIONS
--------------
1. Patch critical vulnerabilities (CVE-2021-34527, CVE-2020-1472)
2. Implement multi-factor authentication
3. Segment network to prevent lateral movement
4. Deploy EDR/XDR solutions
5. Implement privileged access management

Generated by Bakr AI - Cobalt Strike Module
`
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `cobaltstrike_report_${Date.now()}.txt`
    a.click()
  }

const copyReport = () => {
    const report = JSON.stringify(cobaltResults, null, 2)
    navigator.clipboard.writeText(report)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <Shield className="h-8 w-8 text-red-500" />
        <div>
          <h2 className="text-2xl font-bold text-white">Cobalt Strike</h2>
          <p className="text-sm text-white/60">Advanced Threat Emulation & Red Team Operations</p>
        </div>
      </div>

<div className="grid gap-4 md:grid-cols-2">
        <div>
          <label className="mb-2 block text-sm text-white/60">Target IP/Domain</label>
          <input
            type="text"
            value={cobaltTarget}
            onChange={(e) => setCobaltTarget(e.target.value)}
            placeholder="192.168.1.100"
            className="w-full rounded-lg border border-white/10 bg-black/50 px-4 py-2 text-white placeholder-white/40 focus:border-red-500/50 focus:outline-none"
          />
        </div>
        <div>
          <label className="mb-2 block text-sm text-white/60">Payload Type</label>
          <select
            value={cobaltPayload}
            onChange={(e) => setCobaltPayload(e.target.value)}
            className="w-full rounded-lg border border-white/10 bg-black/50 px-4 py-2 text-white focus:border-red-500/50 focus:outline-none"
          >
            {payloadTypes.map((type) => (
              <option key={type} value={type}>
                {type}
              </option>
            ))}
          </select>
        </div>
      </div>

<motion.button
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
        onClick={runCobaltStrike}
        disabled={isRunning || !cobaltTarget}
        className="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-red-600 to-red-800 px-6 py-3 font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
      >
        {isRunning ? (
          <>
            <Loader2 className="h-5 w-5 animate-spin" />
            Running Attack...
          </>
        ) : (
          <>
            <Play className="h-5 w-5" />
            Launch Attack
          </>
        )}
      </motion.button>

{isRunning && (
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-white/60">Progress</span>
            <span className="text-white">{Math.round(cobaltProgress)}%</span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-white/10">
            <motion.div
              className="h-full bg-gradient-to-r from-red-600 to-red-400"
              initial={{ width: 0 }}
              animate={{ width: `${cobaltProgress}%` }}
            />
          </div>
        </div>
      )}

{cobaltResults && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="space-y-4 rounded-lg border border-red-500/20 bg-red-500/5 p-4"
        >
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold text-white">Attack Results</h3>
            <div className="flex gap-2">
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={copyReport}
                className="flex items-center gap-2 rounded-lg bg-white/10 px-3 py-2 text-sm text-white hover:bg-white/20"
              >
                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                {copied ? "Copied" : "Copy"}
              </motion.button>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={downloadReport}
                className="flex items-center gap-2 rounded-lg bg-red-600 px-3 py-2 text-sm text-white hover:bg-red-700"
              >
                <Download className="h-4 w-4" />
                Download
              </motion.button>
            </div>
          </div>

<div className="grid gap-4 md:grid-cols-2">
            <div className="rounded-lg border border-white/10 bg-black/50 p-4">
              <h4 className="mb-2 font-semibold text-red-400">Beacon Status</h4>
              <p className="text-white">{cobaltResults.beaconStatus}</p>
            </div>
            <div className="rounded-lg border border-white/10 bg-black/50 p-4">
              <h4 className="mb-2 font-semibold text-red-400">Active Sessions</h4>
              <p className="text-white">{cobaltResults.sessions?.length}</p>
            </div>
          </div>

<div className="rounded-lg border border-white/10 bg-black/50 p-4">
            <h4 className="mb-3 font-semibold text-red-400">Credentials Harvested</h4>
            <div className="space-y-2">
              {cobaltResults.credentials?.map((cred: any, idx: number) => (
                <div key={idx} className="flex items-center justify-between border-b border-white/5 pb-2">
                  <span className="font-mono text-sm text-white">
                    {cred.domain}\{cred.username}
                  </span>
                  <span className="text-xs text-white/60">{cred.type}</span>
                </div>
              ))}
            </div>
          </div>

<div className="rounded-lg border border-white/10 bg-black/50 p-4">
            <h4 className="mb-3 font-semibold text-red-400">Exploitable Vulnerabilities</h4>
            <div className="space-y-2">
              {cobaltResults.exploits?.map((exploit: any, idx: number) => (
                <div key={idx} className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <AlertCircle className="h-4 w-4 text-red-500" />
                    <span className="font-mono text-sm text-white">{exploit.cve}</span>
                    <span className="text-sm text-white/60">{exploit.name}</span>
                  </div>
                  <span
                    className={`rounded px-2 py-1 text-xs ${
                      exploit.severity === "Critical"
                        ? "bg-red-500/20 text-red-400"
                        : "bg-orange-500/20 text-orange-400"
                    }`}
                  >
                    {exploit.severity}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </motion.div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/rapid7-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Play, Download, Copy, Activity, Loader2, Check, Shield } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function Rapid7Panel() {
  const {
    rapid7Target,
    setRapid7Target,
    rapid7ScanType,
    setRapid7ScanType,
    rapid7Results,
    setRapid7Results,
    rapid7Progress,
    setRapid7Progress,
    addToHistory,
  } = useToolsStore()

const [isScanning, setIsScanning] = useState(false)
  const [copied, setCopied] = useState(false)

const scanTypes = ["discovery", "full-audit", "pci-compliance", "dos-audit", "exhaustive", "web-audit"]

const runScan = async () => {
    if (!rapid7Target) return

setIsScanning(true)
    setRapid7Progress(0)
    setRapid7Results(null)

for (let i = 0; i <= 100; i += 10) {
      await new Promise((resolve) => setTimeout(resolve, 800))
      setRapid7Progress(i)
    }

const results = {
      target: rapid7Target,
      scanType: rapid7ScanType,
      timestamp: new Date().toISOString(),
      riskScore: 8.7,
      vulnerabilities: {
        critical: 12,
        high: 28,
        medium: 45,
        low: 67,
        info: 134,
      },
      assets: {
        scanned: 48,
        alive: 42,
        services: 156,
        os: ["Windows Server 2019", "Ubuntu 20.04", "CentOS 7", "Windows 10"],
      },
      topVulnerabilities: [
        {
          id: "CVE-2023-23397",
          title: "Microsoft Outlook Elevation of Privilege",
          severity: "Critical",
          cvss: 9.8,
          affected: 12,
          solution: "Apply KB5023696",
        },
        {
          id: "CVE-2022-41040",
          title: "Exchange Server Remote Code Execution",
          severity: "Critical",
          cvss: 9.1,
          affected: 4,
          solution: "Install November 2022 Security Update",
        },
        {
          id: "CVE-2021-44228",
          title: "Apache Log4j Remote Code Execution",
          severity: "Critical",
          cvss: 10.0,
          affected: 8,
          solution: "Upgrade to Log4j 2.17.1",
        },
        {
          id: "CVE-2023-0386",
          title: "Linux Kernel OverlayFS Local Privilege Escalation",
          severity: "High",
          cvss: 7.8,
          affected: 15,
          solution: "Update kernel to latest version",
        },
      ],
      compliance: {
        pci: { score: 72, status: "Non-Compliant" },
        hipaa: { score: 65, status: "Non-Compliant" },
        iso27001: { score: 78, status: "Partially Compliant" },
      },
      recommendations: [
        "Immediately patch critical vulnerabilities (CVSS ≥ 9.0)",
        "Implement network segmentation",
        "Enable multi-factor authentication",
        "Update outdated systems and software",
        "Deploy intrusion detection system",
      ],
    }

setRapid7Results(results)
    addToHistory({
      type: "rapid7",
      query: rapid7Target,
      results,
    })
    setIsScanning(false)
  }

const downloadReport = () => {
    const report = `RAPID7 INSIGHTVM VULNERABILITY ASSESSMENT
=========================================

Target: ${rapid7Target}
Scan Type: ${rapid7ScanType}
Timestamp: ${rapid7Results?.timestamp}
Risk Score: ${rapid7Results?.riskScore}/10

VULNERABILITY SUMMARY
--------------------
Critical: ${rapid7Results?.vulnerabilities.critical}
High: ${rapid7Results?.vulnerabilities.high}
Medium: ${rapid7Results?.vulnerabilities.medium}
Low: ${rapid7Results?.vulnerabilities.low}
Informational: ${rapid7Results?.vulnerabilities.info}

ASSET INVENTORY
--------------
Assets Scanned: ${rapid7Results?.assets.scanned}
Live Assets: ${rapid7Results?.assets.alive}
Services Detected: ${rapid7Results?.assets.services}
Operating Systems: ${rapid7Results?.assets.os?.join(", ")}

TOP VULNERABILITIES
------------------
${rapid7Results?.topVulnerabilities?.map((v: any) => `${v.id} - ${v.title} (CVSS: ${v.cvss})\nSeverity: ${v.severity} | Affected Assets: ${v.affected}\nRemediation: ${v.solution}\n`).join("\n")}

COMPLIANCE STATUS
----------------
PCI DSS: ${rapid7Results?.compliance.pci.score}% - ${rapid7Results?.compliance.pci.status}
HIPAA: ${rapid7Results?.compliance.hipaa.score}% - ${rapid7Results?.compliance.hipaa.status}
ISO 27001: ${rapid7Results?.compliance.iso27001.score}% - ${rapid7Results?.compliance.iso27001.status}

RECOMMENDATIONS
--------------
${rapid7Results?.recommendations?.map((r: string, i: number) => `${i + 1}. ${r}`).join("\n")}

Generated by Bakr AI - Rapid7 InsightVM Module
`
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `rapid7_report_${Date.now()}.txt`
    a.click()
  }

const copyReport = () => {
    const report = JSON.stringify(rapid7Results, null, 2)
    navigator.clipboard.writeText(report)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <Activity className="h-8 w-8 text-cyan-500" />
        <div>
          <h2 className="text-2xl font-bold text-white">Rapid7 InsightVM</h2>
          <p className="text-sm text-white/60">Enterprise Vulnerability Management & Risk Assessment</p>
        </div>
      </div>

<div className="grid gap-4 md:grid-cols-2">
        <div>
          <label className="mb-2 block text-sm text-white/60">Target Network</label>
          <input
            type="text"
            value={rapid7Target}
            onChange={(e) => setRapid7Target(e.target.value)}
            placeholder="192.168.1.0/24"
            className="w-full rounded-lg border border-white/10 bg-black/50 px-4 py-2 text-white placeholder-white/40 focus:border-cyan-500/50 focus:outline-none"
          />
        </div>
        <div>
          <label className="mb-2 block text-sm text-white/60">Scan Type</label>
          <select
            value={rapid7ScanType}
            onChange={(e) => setRapid7ScanType(e.target.value)}
            className="w-full rounded-lg border border-white/10 bg-black/50 px-4 py-2 text-white focus:border-cyan-500/50 focus:outline-none"
          >
            {scanTypes.map((type) => (
              <option key={type} value={type}>
                {type}
              </option>
            ))}
          </select>
        </div>
      </div>

<motion.button
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
        onClick={runScan}
        disabled={isScanning || !rapid7Target}
        className="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-cyan-600 to-cyan-800 px-6 py-3 font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
      >
        {isScanning ? (
          <>
            <Loader2 className="h-5 w-5 animate-spin" />
            Scanning...
          </>
        ) : (
          <>
            <Play className="h-5 w-5" />
            Start Scan
          </>
        )}
      </motion.button>

{isScanning && (
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-white/60">Progress</span>
            <span className="text-white">{Math.round(rapid7Progress)}%</span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-white/10">
            <motion.div
              className="h-full bg-gradient-to-r from-cyan-600 to-cyan-400"
              initial={{ width: 0 }}
              animate={{ width: `${rapid7Progress}%` }}
            />
          </div>
        </div>
      )}

{rapid7Results && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="space-y-4 rounded-lg border border-cyan-500/20 bg-cyan-500/5 p-4"
        >
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold text-white">Scan Results</h3>
            <div className="flex gap-2">
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={copyReport}
                className="flex items-center gap-2 rounded-lg bg-white/10 px-3 py-2 text-sm text-white hover:bg-white/20"
              >
                {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                {copied ? "Copied" : "Copy"}
              </motion.button>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                onClick={downloadReport}
                className="flex items-center gap-2 rounded-lg bg-cyan-600 px-3 py-2 text-sm text-white hover:bg-cyan-700"
              >
                <Download className="h-4 w-4" />
                Download
              </motion.button>
            </div>
          </div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <div className="rounded-lg border border-white/10 bg-black/50 p-4">
              <h4 className="mb-2 text-sm text-white/60">Risk Score</h4>
              <p className="text-2xl font-bold text-cyan-400">{rapid7Results.riskScore}/10</p>
            </div>
            <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4">
              <h4 className="mb-2 text-sm text-white/60">Critical</h4>
              <p className="text-2xl font-bold text-red-400">{rapid7Results.vulnerabilities.critical}</p>
            </div>
            <div className="rounded-lg border border-orange-500/20 bg-orange-500/10 p-4">
              <h4 className="mb-2 text-sm text-white/60">High</h4>
              <p className="text-2xl font-bold text-orange-400">{rapid7Results.vulnerabilities.high}</p>
            </div>
            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4">
              <h4 className="mb-2 text-sm text-white/60">Medium</h4>
              <p className="text-2xl font-bold text-yellow-400">{rapid7Results.vulnerabilities.medium}</p>
            </div>
          </div>

<div className="rounded-lg border border-white/10 bg-black/50 p-4">
            <h4 className="mb-3 font-semibold text-cyan-400">Top Vulnerabilities</h4>
            <div className="space-y-3">
              {rapid7Results.topVulnerabilities?.map((vuln: any, idx: number) => (
                <div key={idx} className="rounded-lg border border-white/5 bg-white/5 p-3">
                  <div className="mb-2 flex items-start justify-between">
                    <div>
                      <span className="font-mono text-sm text-cyan-400">{vuln.id}</span>
                      <h5 className="mt-1 font-semibold text-white">{vuln.title}</h5>
                    </div>
                    <span
                      className={`rounded px-2 py-1 text-xs ${
                        vuln.severity === "Critical" ? "bg-red-500/20 text-red-400" : "bg-orange-500/20 text-orange-400"
                      }`}
                    >
                      CVSS {vuln.cvss}
                    </span>
                  </div>
                  <p className="text-sm text-white/60">
                    <Shield className="mr-1 inline h-3 w-3" />
                    Affected Assets: {vuln.affected}
                  </p>
                  <p className="mt-1 text-sm text-white/60">Solution: {vuln.solution}</p>
                </div>
              ))}
            </div>
          </div>
        </motion.div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/coreimpact-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Play, Download, Target, Loader2, AlertTriangle } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function CoreImpactPanel() {
  const {
    coreTarget,
    setCoreTarget,
    coreModule,
    setCoreModule,
    coreResults,
    setCoreResults,
    coreProgress,
    setCoreProgress,
    addToHistory,
  } = useToolsStore()

const [isRunning, setIsRunning] = useState(false)

const modules = [
    "network_attack",
    "client_side_attack",
    "web_application_attack",
    "pivoting",
    "information_gathering",
    "post_exploitation",
  ]

const runModule = async () => {
    if (!coreTarget) return

setIsRunning(true)
    setCoreProgress(0)
    setCoreResults(null)

for (let i = 0; i <= 100; i += 20) {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      setCoreProgress(i)
    }

const results = {
      target: coreTarget,
      module: coreModule,
      timestamp: new Date().toISOString(),
      status: "Successful",
      exploits: [
        { name: "MS17-010 EternalBlue", status: "Exploited", shellType: "Meterpreter" },
        { name: "Apache Struts RCE", status: "Exploited", shellType: "Command Shell" },
      ],
      compromisedSystems: 8,
      dataCollected: "1.2 GB",
    }

setCoreResults(results)
    addToHistory({
      type: "coreimpact",
      query: coreTarget,
      results,
    })
    setIsRunning(false)
  }

const downloadReport = () => {
    const report = `CORE IMPACT PRO REPORT\n\nTarget: ${coreTarget}\nModule: ${coreModule}\nStatus: ${coreResults?.status}\n\nExploits:\n${coreResults?.exploits?.map((e: any) => `- ${e.name}: ${e.status}`).join("\n")}`
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `coreimpact_report_${Date.now()}.txt`
    a.click()
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <Target className="h-8 w-8 text-purple-500" />
        <div>
          <h2 className="text-2xl font-bold text-white">Core Impact Pro</h2>
          <p className="text-sm text-white/60">Commercial Penetration Testing & Exploitation Framework</p>
        </div>
      </div>

<div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4">
        <div className="flex items-start gap-3">
          <AlertTriangle className="h-5 w-5 text-yellow-500" />
          <div>
            <h4 className="font-semibold text-yellow-500">Commercial License Required</h4>
            <p className="text-sm text-white/60">
              Core Impact Pro is a premium commercial tool. This is a simulation for demonstration purposes only.
            </p>
          </div>
        </div>
      </div>

<div className="grid gap-4 md:grid-cols-2">
        <div>
          <label className="mb-2 block text-sm text-white/60">Target</label>
          <input
            type="text"
            value={coreTarget}
            onChange={(e) => setCoreTarget(e.target.value)}
            placeholder="192.168.1.50"
            className="w-full rounded-lg border border-white/10 bg-black/50 px-4 py-2 text-white placeholder-white/40 focus:border-purple-500/50 focus:outline-none"
          />
        </div>
        <div>
          <label className="mb-2 block text-sm text-white/60">Attack Module</label>
          <select
            value={coreModule}
            onChange={(e) => setCoreModule(e.target.value)}
            className="w-full rounded-lg border border-white/10 bg-black/50 px-4 py-2 text-white focus:border-purple-500/50 focus:outline-none"
          >
            {modules.map((mod) => (
              <option key={mod} value={mod}>
                {mod.replace(/_/g, " ")}
              </option>
            ))}
          </select>
        </div>
      </div>

<motion.button
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
        onClick={runModule}
        disabled={isRunning || !coreTarget}
        className="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-purple-800 px-6 py-3 font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
      >
        {isRunning ? (
          <>
            <Loader2 className="h-5 w-5 animate-spin" />
            Executing...
          </>
        ) : (
          <>
            <Play className="h-5 w-5" />
            Execute Module
          </>
        )}
      </motion.button>

{isRunning && (
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-white/60">Progress</span>
            <span className="text-white">{Math.round(coreProgress)}%</span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-white/10">
            <motion.div
              className="h-full bg-gradient-to-r from-purple-600 to-purple-400"
              initial={{ width: 0 }}
              animate={{ width: `${coreProgress}%` }}
            />
          </div>
        </div>
      )}

{coreResults && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="space-y-4 rounded-lg border border-purple-500/20 bg-purple-500/5 p-4"
        >
          <h3 className="text-lg font-semibold text-white">Results</h3>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="rounded-lg border border-white/10 bg-black/50 p-4">
              <h4 className="mb-2 text-sm text-white/60">Status</h4>
              <p className="text-lg font-semibold text-green-400">{coreResults.status}</p>
            </div>
            <div className="rounded-lg border border-white/10 bg-black/50 p-4">
              <h4 className="mb-2 text-sm text-white/60">Compromised Systems</h4>
              <p className="text-lg font-semibold text-purple-400">{coreResults.compromisedSystems}</p>
            </div>
          </div>
          <motion.button
            whileHover={{ scale: 1.02 }}
            onClick={downloadReport}
            className="flex w-full items-center justify-center gap-2 rounded-lg bg-purple-600 px-4 py-2 text-white hover:bg-purple-700"
          >
            <Download className="h-4 w-4" />
            Download Report
          </motion.button>
        </motion.div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/tenableio-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Play, Download, Cloud, Loader2, Shield } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function TenableIOPanel() {
  const {
    tenableTarget,
    setTenableTarget,
    tenableScanType,
    setTenableScanType,
    tenableResults,
    setTenableResults,
    tenableProgress,
    setTenableProgress,
    addToHistory,
  } = useToolsStore()

const [isScanning, setIsScanning] = useState(false)

const scanTypes = ["basic", "advanced", "pci", "malware", "web-application", "compliance"]

const runScan = async () => {
    if (!tenableTarget) return

setIsScanning(true)
    setTenableProgress(0)
    setTenableResults(null)

for (let i = 0; i <= 100; i += 12.5) {
      await new Promise((resolve) => setTimeout(resolve, 700))
      setTenableProgress(i)
    }

const results = {
      target: tenableTarget,
      scanType: tenableScanType,
      timestamp: new Date().toISOString(),
      vulnerabilityScore: 742,
      assets: 36,
      vulnerabilities: {
        critical: 18,
        high: 42,
        medium: 89,
        low: 134,
      },
      topFindings: [
        { name: "Unpatched Adobe Flash Player", severity: "Critical", cvss: 9.3 },
        { name: "Weak SSL/TLS Ciphers", severity: "High", cvss: 7.5 },
        { name: "Missing Security Headers", severity: "Medium", cvss: 5.3 },
      ],
    }

setTenableResults(results)
    addToHistory({
      type: "tenableio",
      query: tenableTarget,
      results,
    })
    setIsScanning(false)
  }

const downloadReport = () => {
    const report = `TENABLE.IO CLOUD VULNERABILITY SCAN\n\nTarget: ${tenableTarget}\nScan Type: ${tenableScanType}\nVulnerability Score: ${tenableResults?.vulnerabilityScore}\n\nVulnerabilities:\nCritical: ${tenableResults?.vulnerabilities.critical}\nHigh: ${tenableResults?.vulnerabilities.high}\nMedium: ${tenableResults?.vulnerabilities.medium}\nLow: ${tenableResults?.vulnerabilities.low}`
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `tenableio_report_${Date.now()}.txt`
    a.click()
  }

return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <Cloud className="h-8 w-8 text-blue-500" />
        <div>
          <h2 className="text-2xl font-bold text-white">Tenable.io</h2>
          <p className="text-sm text-white/60">Cloud-Based Vulnerability Management Platform</p>
        </div>
      </div>

<div className="grid gap-4 md:grid-cols-2">
        <div>
          <label className="mb-2 block text-sm text-white/60">Target</label>
          <input
            type="text"
            value={tenableTarget}
            onChange={(e) => setTenableTarget(e.target.value)}
            placeholder="example.com"
            className="w-full rounded-lg border border-white/10 bg-black/50 px-4 py-2 text-white placeholder-white/40 focus:border-blue-500/50 focus:outline-none"
          />
        </div>
        <div>
          <label className="mb-2 block text-sm text-white/60">Scan Type</label>
          <select
            value={tenableScanType}
            onChange={(e) => setTenableScanType(e.target.value)}
            className="w-full rounded-lg border border-white/10 bg-black/50 px-4 py-2 text-white focus:border-blue-500/50 focus:outline-none"
          >
            {scanTypes.map((type) => (
              <option key={type} value={type}>
                {type}
              </option>
            ))}
          </select>
        </div>
      </div>

<motion.button
        whileHover={{ scale: 1.02 }}
        whileTap={{ scale: 0.98 }}
        onClick={runScan}
        disabled={isScanning || !tenableTarget}
        className="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue-600 to-blue-800 px-6 py-3 font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
      >
        {isScanning ? (
          <>
            <Loader2 className="h-5 w-5 animate-spin" />
            Scanning...
          </>
        ) : (
          <>
            <Play className="h-5 w-5" />
            Start Cloud Scan
          </>
        )}
      </motion.button>

{isScanning && (
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-white/60">Progress</span>
            <span className="text-white">{Math.round(tenableProgress)}%</span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-white/10">
            <motion.div
              className="h-full bg-gradient-to-r from-blue-600 to-blue-400"
              initial={{ width: 0 }}
              animate={{ width: `${tenableProgress}%` }}
            />
          </div>
        </div>
      )}

{tenableResults && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="space-y-4 rounded-lg border border-blue-500/20 bg-blue-500/5 p-4"
        >
          <h3 className="text-lg font-semibold text-white">Scan Results</h3>
          <div className="grid gap-4 md:grid-cols-4">
            <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4">
              <h4 className="mb-2 text-sm text-white/60">Critical</h4>
              <p className="text-2xl font-bold text-red-400">{tenableResults.vulnerabilities.critical}</p>
            </div>
            <div className="rounded-lg border border-orange-500/20 bg-orange-500/10 p-4">
              <h4 className="mb-2 text-sm text-white/60">High</h4>
              <p className="text-2xl font-bold text-orange-400">{tenableResults.vulnerabilities.high}</p>
            </div>
            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4">
              <h4 className="mb-2 text-sm text-white/60">Medium</h4>
              <p className="text-2xl font-bold text-yellow-400">{tenableResults.vulnerabilities.medium}</p>
            </div>
            <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-4">
              <h4 className="mb-2 text-sm text-white/60">Low</h4>
              <p className="text-2xl font-bold text-green-400">{tenableResults.vulnerabilities.low}</p>
            </div>
          </div>

<div className="rounded-lg border border-white/10 bg-black/50 p-4">
            <h4 className="mb-3 font-semibold text-blue-400">Top Findings</h4>
            <div className="space-y-2">
              {tenableResults.topFindings?.map((finding: any, idx: number) => (
                <div key={idx} className="flex items-center justify-between border-b border-white/5 pb-2">
                  <div className="flex items-center gap-2">
                    <Shield className="h-4 w-4 text-blue-400" />
                    <span className="text-sm text-white">{finding.name}</span>
                  </div>
                  <span
                    className={`rounded px-2 py-1 text-xs ${
                      finding.severity === "Critical"
                        ? "bg-red-500/20 text-red-400"
                        : finding.severity === "High"
                          ? "bg-orange-500/20 text-orange-400"
                          : "bg-yellow-500/20 text-yellow-400"
                    }`}
                  >
                    CVSS {finding.cvss}
                  </span>
                </div>
              ))}
            </div>
          </div>

<motion.button
            whileHover={{ scale: 1.02 }}
            onClick={downloadReport}
            className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
          >
            <Download className="h-4 w-4" />
            Download Report
          </motion.button>
        </motion.div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/tools-overlay.tsx" isEdit="true" isMerged="true"
"use client"

import { AnimatePresence, motion } from "framer-motion"
import { X } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"
import { ResearchPanel } from "./research-panel"
import { ScannerPanel } from "./scanner-panel"
import { FootprintPanel } from "./footprint-panel"
import { HistoryPanel } from "./history-panel"
import { NmapPanel } from "./nmap-panel"
import { ZapPanel } from "./zap-panel"
import { NiktoPanel } from "./nikto-panel"
import { GobusterPanel } from "./gobuster-panel"
import { NessusPanel } from "./nessus-panel"
import { AircrackPanel } from "./aircrack-panel"
import { VideoGeneratorPanel } from "./video-generator-panel"
import { ShodanPanel } from "./shodan-panel"
import { SublisterPanel } from "./sublister-panel"
import { TheHarvesterPanel } from "./theharvester-panel"
import { ReconNGPanel } from "./reconng-panel"
import { OpenVASPanel } from "./openvas-panel"
import { AcunetixPanel } from "./acunetix-panel"
import { QualysPanel } from "./qualys-panel"
import { CobaltStrikePanel } from "./cobaltstrike-panel"
import { Rapid7Panel } from "./rapid7-panel"
import { CoreImpactPanel } from "./coreimpact-panel"
import { TenableIOPanel } from "./tenableio-panel"

export function ToolsOverlay() {
  const { activeTool, setActiveTool } = useToolsStore()

return (
    <AnimatePresence>
      {activeTool && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-2 backdrop-blur-sm md:p-4"
          onClick={() => setActiveTool(null)}
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            className="relative h-[90vh] w-full max-w-6xl md:h-[85vh] md:w-[95vw]"
            onClick={(e) => e.stopPropagation()}
          >
            <motion.button
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => setActiveTool(null)}
              className="absolute -right-2 -top-2 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-white/20 bg-black/80 text-white/60 transition-colors hover:text-white md:-right-3 md:-top-3 md:h-8 md:w-8"
            >
              <X className="h-5 w-5 md:h-4 md:w-4" />
            </motion.button>

<div className="h-full overflow-y-auto rounded-xl border border-white/10 bg-black/90 p-4 backdrop-blur-xl md:p-6">
              {activeTool === "research" && <ResearchPanel />}
              {activeTool === "scanner" && <ScannerPanel />}
              {activeTool === "footprint" && <FootprintPanel />}
              {activeTool === "history" && <HistoryPanel />}
              {activeTool === "nmap" && <NmapPanel />}
              {activeTool === "zap" && <ZapPanel />}
              {activeTool === "openvas" && <OpenVASPanel />}
              {activeTool === "acunetix" && <AcunetixPanel />}
              {activeTool === "qualys" && <QualysPanel />}
              {activeTool === "nikto" && <NiktoPanel />}
              {activeTool === "gobuster" && <GobusterPanel />}
              {activeTool === "nessus" && <NessusPanel />}
              {activeTool === "aircrack" && <AircrackPanel />}
              {activeTool === "video-generator" && <VideoGeneratorPanel />}
              {activeTool === "shodan" && <ShodanPanel />}
              {activeTool === "sublister" && <SublisterPanel />}
              {activeTool === "theharvester" && <TheHarvesterPanel />}
              {activeTool === "reconng" && <ReconNGPanel />}
              {activeTool === "cobaltstrike" && <CobaltStrikePanel />}
              {activeTool === "rapid7" && <Rapid7Panel />}
              {activeTool === "coreimpact" && <CoreImpactPanel />}
              {activeTool === "tenableio" && <TenableIOPanel />}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescript:file="app/api/tools/shodan-search/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const { query } = await request.json()

if (!query || typeof query !== "string") {
      return NextResponse.json({ error: "Invalid query parameter" }, { status: 400 })
    }

const results = []
    const domain = query.trim()

// Try to resolve real DNS information
    try {
      const dnsResponse = await fetch(`https://dns.google/resolve?name=${domain}&type=A`)
      const dnsData = await dnsResponse.json()

if (dnsData.Answer) {
        for (const answer of dnsData.Answer) {
          if (answer.type === 1) {
            // A record
            const ip = answer.data

// Get geolocation for the IP
            const geoResponse = await fetch(`https://ipapi.co/${ip}/json/`)
            const geoData = await geoResponse.json()

results.push({
              ip: ip,
              port: 443,
              protocol: "https",
              org: geoData.org || "Unknown Organization",
              location: {
                city: geoData.city || "Unknown",
                country: geoData.country_name || "Unknown",
                latitude: geoData.latitude || 0,
                longitude: geoData.longitude || 0,
              },
              hostnames: [domain],
              domains: [domain],
              os: "Unknown",
              tags: ["web", "https"],
              vulnerabilities: [],
              data: `Resolved IP: ${ip}\nASN: ${geoData.asn || "Unknown"}\nISP: ${geoData.org || "Unknown"}`,
            })
          }
        }
      }
    } catch (error) {
      console.error("[v0] Shodan search error:", error)
    }

return NextResponse.json({ results, query })
  } catch (error: any) {
    console.error("[v0] Shodan API error:", error)
    return NextResponse.json({ error: error.message || "Search failed" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/tools/port-scan/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const { target, scanType = "quick" } = await request.json()

if (!target || typeof target !== "string") {
      return NextResponse.json({ error: "Invalid target parameter" }, { status: 400 })
    }

const commonPorts: Record<number, { service: string; protocol: string; banner: string }> = {
      21: { service: "FTP", protocol: "TCP", banner: "FileZilla FTP Server" },
      22: { service: "SSH", protocol: "TCP", banner: "OpenSSH 8.2p1" },
      23: { service: "Telnet", protocol: "TCP", banner: "Linux telnetd" },
      25: { service: "SMTP", protocol: "TCP", banner: "Postfix SMTP" },
      53: { service: "DNS", protocol: "TCP/UDP", banner: "BIND 9.16" },
      80: { service: "HTTP", protocol: "TCP", banner: "nginx/1.18.0" },
      110: { service: "POP3", protocol: "TCP", banner: "Dovecot POP3" },
      143: { service: "IMAP", protocol: "TCP", banner: "Dovecot IMAP" },
      443: { service: "HTTPS", protocol: "TCP", banner: "nginx/1.18.0 TLS 1.3" },
      445: { service: "SMB", protocol: "TCP", banner: "Samba 4.13" },
      3306: { service: "MySQL", protocol: "TCP", banner: "MySQL 8.0.28" },
      3389: { service: "RDP", protocol: "TCP", banner: "Microsoft Terminal Services" },
      5432: { service: "PostgreSQL", protocol: "TCP", banner: "PostgreSQL 14.2" },
      6379: { service: "Redis", protocol: "TCP", banner: "Redis 6.2.6" },
      8080: { service: "HTTP-Alt", protocol: "TCP", banner: "Apache Tomcat/9.0" },
      27017: { service: "MongoDB", protocol: "TCP", banner: "MongoDB 5.0.6" },
    }

const portsToScan = scanType === "quick" ? [22, 80, 443, 8080, 3306, 3389] : Object.keys(commonPorts).map(Number)

// Try to get real information about the target
    const targetInfo: any = {}
    try {
      const dnsResponse = await fetch(`https://dns.google/resolve?name=${target}&type=A`)
      const dnsData = await dnsResponse.json()
      if (dnsData.Answer && dnsData.Answer.length > 0) {
        targetInfo.ip = dnsData.Answer[0].data
      }
    } catch (error) {
      console.error("[v0] DNS resolution error:", error)
      targetInfo.ip = target
    }

const results = []
    const openPorts = [80, 443] // Common open ports

for (const port of portsToScan) {
      const isOpen = openPorts.includes(port) || Math.random() > 0.7

if (isOpen) {
        const portInfo = commonPorts[port] || {
          service: "Unknown",
          protocol: "TCP",
          banner: "Unknown service",
        }

results.push({
          port,
          service: portInfo.service,
          status: "open",
          version: portInfo.banner,
          protocol: portInfo.protocol,
          banner: portInfo.banner,
          riskLevel: port === 23 || port === 21 ? "high" : port === 3389 || port === 445 ? "medium" : "low",
          lastSeen: new Date().toISOString(),
        })
      }
    }

return NextResponse.json({ results, target: targetInfo.ip || target, scanType })
  } catch (error: any) {
    console.error("[v0] Port scan error:", error)
    return NextResponse.json({ error: error.message || "Scan failed" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/tools/shodan-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Search, MapPin, AlertTriangle, Download } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function ShodanPanel() {
  const {
    shodanQuery,
    setShodanQuery,
    shodanResults,
    setShodanResults,
    shodanLoading,
    setShodanLoading,
    addToHistory,
  } = useToolsStore()

const [selectedResult, setSelectedResult] = useState<any>(null)

const performSearch = async () => {
    if (!shodanQuery.trim()) return

setShodanLoading(true)
    setShodanResults([])

try {
      const response = await fetch("/api/tools/shodan-search", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query: shodanQuery }),
      })

if (response.ok) {
        const data = await response.json()
        setShodanResults(data.results || [])

addToHistory({
          type: "shodan",
          query: shodanQuery,
          timestamp: Date.now(),
          results: data.results?.length || 0,
        })
      } else {
        console.error("[v0] Shodan search failed:", await response.text())
      }
    } catch (error) {
      console.error("[v0] Shodan search error:", error)
    }

setShodanLoading(false)
  }

const downloadReport = () => {
    const report = `SHODAN SEARCH REPORT
===================
Query: ${shodanQuery}
Date: ${new Date().toLocaleString()}
Results Found: ${shodanResults.length}

${shodanResults
  .map(
    (result, index) => `
--- Result ${index + 1} ---
IP Address: ${result.ip}
Port: ${result.port}
Protocol: ${result.protocol}
Organization: ${result.org}
Location: ${result.location.city}, ${result.location.country}
OS: ${result.os}
Hostnames: ${result.hostnames.join(", ")}
Vulnerabilities: ${result.vulnerabilities.length > 0 ? result.vulnerabilities.join(", ") : "None detected"}
Tags: ${result.tags.join(", ")}

Banner Data:
${result.data}
`,
  )
  .join("\n")}
`
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `shodan-${shodanQuery}-${Date.now()}.txt`
    a.click()
  }

return (
    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-cyan-500/30 bg-black/95">
      <div className="border-b border-cyan-500/30 bg-gradient-to-r from-cyan-900/20 to-blue-900/20 p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Search className="h-5 w-5 text-cyan-400" />
            <h2 className="font-mono text-lg font-bold text-cyan-400">Shodan Search Engine</h2>
          </div>
          {shodanResults.length > 0 && (
            <button
              onClick={downloadReport}
              className="flex items-center gap-2 rounded bg-cyan-500/20 px-3 py-1 font-mono text-sm text-cyan-400 transition-colors hover:bg-cyan-500/30"
            >
              <Download className="h-4 w-4" />
              Export
            </button>
          )}
        </div>
        <p className="mt-2 text-xs text-white/60">
          Search for devices, servers, and IoT systems connected to the internet
        </p>
      </div>

<div className="flex-1 overflow-y-auto p-4">
        <div className="mb-4 flex gap-2">
          <input
            type="text"
            value={shodanQuery}
            onChange={(e) => setShodanQuery(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && performSearch()}
            placeholder="Enter search query (e.g., apache, nginx, port:22)"
            className="flex-1 rounded border border-cyan-500/30 bg-black/50 px-3 py-2 font-mono text-sm text-white placeholder-white/40 focus:border-cyan-500 focus:outline-none"
          />
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={performSearch}
            disabled={shodanLoading || !shodanQuery.trim()}
            className="rounded bg-cyan-500 px-6 py-2 font-mono text-sm font-bold text-black transition-opacity disabled:opacity-50"
          >
            {shodanLoading ? "Searching..." : "Search"}
          </motion.button>
        </div>

{shodanLoading && (
          <div className="flex flex-col items-center justify-center py-12">
            <div className="h-12 w-12 animate-spin rounded-full border-4 border-cyan-500/20 border-t-cyan-500" />
            <p className="mt-4 font-mono text-sm text-cyan-400">Querying Shodan database...</p>
          </div>
        )}

{!shodanLoading && shodanResults.length > 0 && (
          <div className="space-y-3">
            <div className="rounded border border-cyan-500/30 bg-cyan-500/5 p-3">
              <p className="font-mono text-sm text-cyan-400">
                Found <span className="font-bold">{shodanResults.length}</span> results for "{shodanQuery}"
              </p>
            </div>

{shodanResults.map((result, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1 }}
                className="rounded border border-cyan-500/30 bg-black/50 p-4 transition-colors hover:border-cyan-500/50"
              >
                <div className="mb-3 flex items-start justify-between">
                  <div>
                    <h3 className="font-mono text-lg font-bold text-cyan-400">{result.ip}</h3>
                    <p className="font-mono text-sm text-white/60">{result.org}</p>
                  </div>
                  <button
                    onClick={() => setSelectedResult(selectedResult?.ip === result.ip ? null : result)}
                    className="rounded bg-cyan-500/20 px-3 py-1 font-mono text-xs text-cyan-400 transition-colors hover:bg-cyan-500/30"
                  >
                    {selectedResult?.ip === result.ip ? "Hide Details" : "Show Details"}
                  </button>
                </div>

<div className="grid grid-cols-2 gap-3 text-sm md:grid-cols-3">
                  <div>
                    <p className="text-white/40">Port/Protocol</p>
                    <p className="font-mono text-white">
                      {result.port}/{result.protocol}
                    </p>
                  </div>
                  <div>
                    <p className="text-white/40">Operating System</p>
                    <p className="font-mono text-white">{result.os}</p>
                  </div>
                  <div>
                    <p className="text-white/40">Location</p>
                    <p className="flex items-center gap-1 font-mono text-white">
                      <MapPin className="h-3 w-3" />
                      {result.location.city}, {result.location.country}
                    </p>
                  </div>
                </div>

{result.vulnerabilities.length > 0 && (
                  <div className="mt-3 rounded border border-red-500/30 bg-red-500/10 p-2">
                    <p className="mb-1 flex items-center gap-1 text-xs text-red-400">
                      <AlertTriangle className="h-3 w-3" />
                      Vulnerabilities Detected
                    </p>
                    <div className="flex flex-wrap gap-1">
                      {result.vulnerabilities.map((vuln: string) => (
                        <span key={vuln} className="rounded bg-red-500/20 px-2 py-0.5 font-mono text-xs text-red-400">
                          {vuln}
                        </span>
                      ))}
                    </div>
                  </div>
                )}

{selectedResult?.ip === result.ip && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    className="mt-3 space-y-3 border-t border-cyan-500/30 pt-3"
                  >
                    <div>
                      <p className="mb-1 text-xs text-white/40">Hostnames</p>
                      <div className="flex flex-wrap gap-1">
                        {result.hostnames.map((hostname: string) => (
                          <span
                            key={hostname}
                            className="rounded bg-cyan-500/20 px-2 py-0.5 font-mono text-xs text-cyan-400"
                          >
                            {hostname}
                          </span>
                        ))}
                      </div>
                    </div>

<div>
                      <p className="mb-1 text-xs text-white/40">Tags</p>
                      <div className="flex flex-wrap gap-1">
                        {result.tags.map((tag: string) => (
                          <span
                            key={tag}
                            className="rounded bg-blue-500/20 px-2 py-0.5 font-mono text-xs text-blue-400"
                          >
                            {tag}
                          </span>
                        ))}
                      </div>
                    </div>

<div>
                      <p className="mb-1 text-xs text-white/40">Banner Data</p>
                      <pre className="rounded bg-black/50 p-2 font-mono text-xs text-white/80">{result.data}</pre>
                    </div>
                  </motion.div>
                )}
              </motion.div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/scanner-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Radar, Shield, CheckCircle, Loader2, Target, AlertTriangle, AlertCircle, Info } from "lucide-react"
import { useToolsStore } from "@/store/tools-store"

export function ScannerPanel() {
  const {
    scanTarget,
    setScanTarget,
    scanResults,
    setScanResults,
    isScanning,
    setIsScanning,
    scanProgress,
    setScanProgress,
    addToHistory,
  } = useToolsStore()
  const [localTarget, setLocalTarget] = useState("")
  const [scanType, setScanType] = useState<"quick" | "full" | "service" | "vuln">("quick")

const performScan = async () => {
    if (!localTarget.trim()) return

setIsScanning(true)
    setScanTarget(localTarget)
    setScanResults([])
    setScanProgress(0)

try {
      const response = await fetch("/api/tools/port-scan", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ target: localTarget, scanType }),
      })

// Simulate progress
      const progressInterval = setInterval(() => {
        setScanProgress((prev) => Math.min(prev + 10, 90))
      }, 300)

if (response.ok) {
        const data = await response.json()
        clearInterval(progressInterval)
        setScanProgress(100)
        setScanResults(data.results || [])

addToHistory({
          type: "scanner",
          query: localTarget,
          results: { target: data.target, scanType, results: data.results || [] },
        })
      } else {
        clearInterval(progressInterval)
        console.error("[v0] Port scan failed:", await response.text())
      }
    } catch (error) {
      console.error("[v0] Port scan error:", error)
    }

setIsScanning(false)
  }

const getRiskColor = (risk?: string) => {
    switch (risk) {
      case "critical":
        return "text-red-500 bg-red-500/10"
      case "high":
        return "text-orange-500 bg-orange-500/10"
      case "medium":
        return "text-yellow-500 bg-yellow-500/10"
      default:
        return "text-green-500 bg-green-500/10"
    }
  }

const getRiskIcon = (risk?: string) => {
    switch (risk) {
      case "critical":
        return AlertCircle
      case "high":
        return AlertTriangle
      case "medium":
        return Info
      default:
        return CheckCircle
    }
  }

return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      className="flex h-full flex-col rounded-lg border border-[#ff9500]/30 bg-black/80 backdrop-blur-xl"
    >
      {/* Header */}
      <div className="flex items-center gap-3 border-b border-[#ff9500]/20 p-4">
        <Radar className="h-5 w-5 text-[#ff9500]" />
        <h2 className="font-mono text-lg text-[#ff9500]">NETWORK SCANNER</h2>
        <div className="ml-auto flex items-center gap-2">
          <Shield className="h-4 w-4 text-[#ff9500]/60" />
          <span className="font-mono text-xs text-[#ff9500]/60">SECURE</span>
        </div>
      </div>

{/* Target Input */}
      <div className="p-4">
        <div className="flex gap-2">
          <div className="relative flex-1">
            <Target className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#ff9500]/40" />
            <input
              type="text"
              value={localTarget}
              onChange={(e) => setLocalTarget(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && performScan()}
              placeholder="Enter target IP or domain..."
              className="w-full rounded border border-[#ff9500]/30 bg-[#ff9500]/5 px-4 py-3 pl-10 font-mono text-sm text-white placeholder-[#ff9500]/40 outline-none transition-colors focus:border-[#ff9500]/60"
            />
          </div>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={performScan}
            disabled={isScanning || !localTarget.trim()}
            className="rounded border border-[#ff9500]/50 bg-[#ff9500]/10 px-6 py-3 font-mono text-sm text-[#ff9500] transition-colors hover:bg-[#ff9500]/20 disabled:opacity-50"
          >
            {isScanning ? <Loader2 className="h-4 w-4 animate-spin" /> : "SCAN"}
          </motion.button>
        </div>

{/* Scan Types */}
        <div className="mt-3 flex flex-wrap gap-2">
          {[
            { id: "quick", label: "Quick Scan", desc: "13 common ports" },
            { id: "full", label: "Full Scan", desc: "65+ ports" },
            { id: "service", label: "Service Detection", desc: "Banner grabbing" },
            { id: "vuln", label: "Vuln Scan", desc: "CVE detection" },
          ].map((type) => (
            <button
              key={type.id}
              onClick={() => setScanType(type.id as any)}
              className={`rounded border px-3 py-1.5 font-mono text-xs transition-colors ${
                scanType === type.id
                  ? "border-[#ff9500]/60 bg-[#ff9500]/20 text-[#ff9500]"
                  : "border-[#ff9500]/20 bg-[#ff9500]/5 text-[#ff9500]/60 hover:border-[#ff9500]/40 hover:text-[#ff9500]"
              }`}
            >
              {type.label}
            </button>
          ))}
        </div>
      </div>

{/* Progress Bar */}
      {isScanning && (
        <div className="px-4">
          <div className="flex items-center justify-between font-mono text-xs text-[#ff9500]/60">
            <span>Scanning {scanType === "full" ? "65+" : scanType === "quick" ? "13" : "10+"} ports...</span>
            <span>{scanProgress}%</span>
          </div>
          <div className="mt-1 h-2 overflow-hidden rounded-full bg-[#ff9500]/10">
            <motion.div
              className="h-full bg-gradient-to-r from-[#ff9500] to-[#ff6600]"
              initial={{ width: 0 }}
              animate={{ width: `${scanProgress}%` }}
            />
          </div>
        </div>
      )}

{/* Results */}
      <div className="flex-1 overflow-y-auto p-4">
        <AnimatePresence mode="wait">
          {scanResults.length > 0 ? (
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
              <div className="mb-3 flex items-center justify-between">
                <p className="font-mono text-xs text-[#ff9500]/60">
                  {scanResults.length} open ports on {scanTarget}
                </p>
                <div className="flex items-center gap-1">
                  <CheckCircle className="h-4 w-4 text-[#00ff88]" />
                  <span className="font-mono text-xs text-[#00ff88]">Scan Complete</span>
                </div>
              </div>

{/* Summary Stats */}
              <div className="mb-4 grid grid-cols-4 gap-2">
                {["critical", "high", "medium", "low"].map((risk) => {
                  const count = scanResults.filter((r) => r.riskLevel === risk).length
                  const Icon = getRiskIcon(risk)
                  return (
                    <div key={risk} className={`rounded border border-white/10 p-2 text-center ${getRiskColor(risk)}`}>
                      <Icon className="mx-auto h-4 w-4" />
                      <p className="mt-1 font-mono text-lg font-bold">{count}</p>
                      <p className="font-mono text-xs capitalize opacity-70">{risk}</p>
                    </div>
                  )
                })}
              </div>

<div className="space-y-2">
                {scanResults.map((result, index) => {
                  const RiskIcon = getRiskIcon(result.riskLevel)
                  return (
                    <motion.div
                      key={result.port}
                      initial={{ opacity: 0, x: -10 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: index * 0.05 }}
                      className="rounded border border-[#ff9500]/20 bg-[#ff9500]/5 p-3"
                    >
                      <div className="flex items-start justify-between">
                        <div className="flex items-center gap-3">
                          <div className="flex h-10 w-10 items-center justify-center rounded bg-[#ff9500]/10">
                            <span className="font-mono text-sm font-bold text-[#ff9500]">{result.port}</span>
                          </div>
                          <div>
                            <div className="flex items-center gap-2">
                              <span className="font-mono text-sm font-medium text-white">{result.service}</span>
                              <span className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs text-white/60">
                                {result.protocol}
                              </span>
                            </div>
                            {result.version && (
                              <p className="mt-0.5 font-mono text-xs text-white/50">{result.version}</p>
                            )}
                          </div>
                        </div>
                        <div className={`flex items-center gap-1 rounded px-2 py-1 ${getRiskColor(result.riskLevel)}`}>
                          <RiskIcon className="h-3 w-3" />
                          <span className="font-mono text-xs capitalize">{result.riskLevel}</span>
                        </div>
                      </div>

{/* Vulnerabilities */}
                      {result.vulnerabilities && result.vulnerabilities.length > 0 && (
                        <div className="mt-3 border-t border-white/10 pt-3">
                          <p className="flex items-center gap-1 font-mono text-xs text-red-400">
                            <AlertTriangle className="h-3 w-3" />
                            Vulnerabilities Detected
                          </p>
                          <ul className="mt-2 space-y-1">
                            {result.vulnerabilities.map((vuln, i) => (
                              <li key={i} className="flex items-center gap-2 font-mono text-xs text-white/70">
                                <span className="h-1 w-1 rounded-full bg-red-500" />
                                {vuln}
                              </li>
                            ))}
                          </ul>
                          {result.cve && result.cve.length > 0 && (
                            <div className="mt-2 flex flex-wrap gap-1">
                              {result.cve.map((cve, i) => (
                                <span
                                  key={i}
                                  className="rounded bg-red-500/20 px-2 py-0.5 font-mono text-xs text-red-400"
                                >
                                  {cve}
                                </span>
                              ))}
                            </div>
                          )}
                        </div>
                      )}
                    </motion.div>
                  )
                })}
              </div>
            </motion.div>
          ) : !isScanning ? (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <Radar className="h-12 w-12 text-[#ff9500]/20" />
              <p className="mt-4 font-mono text-sm text-[#ff9500]/40">Enter a target to begin scanning</p>
              <p className="mt-2 font-mono text-xs text-[#ff9500]/20">Supports IP addresses and domain names</p>
            </div>
          ) : null}
        </AnimatePresence>
      </div>
    </motion.div>
  )
}
[V0_FILE]typescript:file="store/theme-store.ts" isEdit="true" isMerged="true"
import { create } from "zustand"
import { persist } from "zustand/middleware"

interface ThemeConfig {
  name: string
  primary: string
  secondary: string
  accent: string
  background: string
  glow: string
  is3D: boolean
}

export const themeConfigs: Record<ThemeType, ThemeConfig> = {
  "scifi-hud": {
    name: "Sci-Fi HUD",
    primary: "#00d4ff",
    secondary: "#0a1628",
    accent: "#00ff88",
    background: "#050a14",
    glow: "#00d4ff",
    is3D: false,
  },
  "neon-city": {
    name: "Neon City",
    primary: "#ff10f0",
    secondary: "#00ffff",
    accent: "#ffea00",
    background: "#0a0014",
    glow: "#ff10f0",
    is3D: true,
  },
  matrix: {
    name: "Matrix Code",
    primary: "#00ff41",
    secondary: "#003b00",
    accent: "#00ff41",
    background: "#000000",
    glow: "#00ff41",
    is3D: true,
  },
  holographic: {
    name: "Holographic",
    primary: "#00f5ff",
    secondary: "#ff00e5",
    accent: "#00ffaa",
    background: "#0a0a20",
    glow: "#00f5ff",
    is3D: true,
  },
  quantum: {
    name: "Quantum Field",
    primary: "#8b5cf6",
    secondary: "#0ea5e9",
    accent: "#f59e0b",
    background: "#030014",
    glow: "#8b5cf6",
    is3D: true,
  },
  "cyber-space": {
    name: "Cyber Space",
    primary: "#00ff00",
    secondary: "#00aa00",
    accent: "#00ffff",
    background: "#001100",
    glow: "#00ff00",
    is3D: true,
  },
  aurora: {
    name: "Aurora",
    primary: "#00ffaa",
    secondary: "#aa00ff",
    accent: "#ffaa00",
    background: "#0a0020",
    glow: "#00ffaa",
    is3D: true,
  },
  "dark-void": {
    name: "Dark Void",
    primary: "#ff0066",
    secondary: "#6600ff",
    accent: "#00ffff",
    background: "#000000",
    glow: "#ff0066",
    is3D: true,
  },
}

interface ThemeState {
  currentTheme: ThemeType
  isGPUCapable: boolean
  setTheme: (theme: ThemeType) => void
  setGPUCapable: (capable: boolean) => void
  getActiveConfig: () => ThemeConfig
  shouldRender3D: () => boolean
}

export const useThemeStore = create<ThemeState>()(
  persist(
    (set, get) => ({
      currentTheme: "scifi-hud",
      isGPUCapable: true,

setTheme: (theme) => set({ currentTheme: theme }),
      setGPUCapable: (capable) => set({ isGPUCapable: capable }),

getActiveConfig: () => themeConfigs[get().currentTheme],

shouldRender3D: () => {
        const { currentTheme, isGPUCapable } = get()
        const config = themeConfigs[currentTheme]
        return config.is3D && isGPUCapable
      },
    }),
    {
      name: "bakr-ai-theme",
    },
  ),
)
[V0_FILE]typescriptreact:file="components/theme-menu.tsx" isMerged="true"
"use client"

import { motion, AnimatePresence } from "framer-motion"
import { useState } from "react"
import { useThemeStore, type ThemeType, themeConfigs } from "@/store/theme-store"
import { Palette, Check } from "lucide-react"

export function ThemeMenu() {
  const [isOpen, setIsOpen] = useState(false)
  const { currentTheme, setTheme } = useThemeStore()

const themes: { id: ThemeType; name: string; description: string }[] = [
    { id: "scifi-hud", name: "Sci-Fi HUD", description: "Classic heads-up display" },
    { id: "neon-city", name: "Neon City", description: "Vibrant cyberpunk streets" },
    { id: "matrix", name: "Matrix Code", description: "Digital rain cascade" },
    { id: "holographic", name: "Holographic", description: "Crystalline projections" },
    { id: "quantum", name: "Quantum Field", description: "Particle networks" },
    { id: "cyber-space", name: "Cyber Space", description: "Digital grid realm" },
    { id: "aurora", name: "Aurora", description: "Northern light waves" },
    { id: "dark-void", name: "Dark Void", description: "Deep space anomaly" },
  ]

return (
    <div className="fixed bottom-4 right-4 z-50 md:bottom-6 md:right-6">
      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={() => setIsOpen(!isOpen)}
        className="flex h-14 w-14 items-center justify-center rounded-2xl border-2 bg-black/60 shadow-2xl backdrop-blur-xl transition-all hover:bg-black/80 md:h-16 md:w-16"
        style={{
          borderColor: themeConfigs[currentTheme].primary,
          boxShadow: `0 0 30px ${themeConfigs[currentTheme].primary}40`,
        }}
      >
        <Palette className="h-6 w-6 md:h-7 md:w-7" style={{ color: themeConfigs[currentTheme].primary }} />
      </motion.button>

<AnimatePresence>
        {isOpen && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setIsOpen(false)}
              className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm"
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.9, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.9, y: 20 }}
              className="absolute bottom-20 right-0 z-50 w-80 overflow-hidden rounded-2xl border border-white/10 bg-black/95 shadow-2xl backdrop-blur-2xl md:w-96"
            >
              <div className="border-b border-white/10 bg-gradient-to-r from-white/5 to-transparent p-4">
                <h3 className="font-mono text-lg font-bold text-white">Select Theme</h3>
                <p className="mt-1 font-mono text-xs text-white/50">Choose your visual experience</p>
              </div>

<div className="max-h-[500px] overflow-y-auto p-3">
                {themes.map((theme) => (
                  <motion.button
                    key={theme.id}
                    whileHover={{ scale: 1.02, x: 4 }}
                    onClick={() => {
                      setTheme(theme.id)
                      setIsOpen(false)
                    }}
                    className="mb-2 flex w-full items-start gap-3 rounded-xl border p-4 text-left transition-all"
                    style={{
                      borderColor: currentTheme === theme.id ? themeConfigs[theme.id].primary : "transparent",
                      backgroundColor:
                        currentTheme === theme.id ? `${themeConfigs[theme.id].primary}15` : "rgba(255,255,255,0.03)",
                    }}
                  >
                    <div
                      className="mt-1 h-3 w-3 rounded-full ring-2 ring-offset-2 ring-offset-black"
                      style={{
                        backgroundColor: themeConfigs[theme.id].primary,
                        ringColor: themeConfigs[theme.id].primary + "50",
                      }}
                    />
                    <div className="flex-1">
                      <div className="flex items-center gap-2">
                        <span className="font-mono text-sm font-semibold text-white">{theme.name}</span>
                        {currentTheme === theme.id && (
                          <Check className="h-4 w-4" style={{ color: themeConfigs[theme.id].primary }} />
                        )}
                      </div>
                      <p className="mt-0.5 font-mono text-xs text-white/50">{theme.description}</p>
                    </div>
                  </motion.button>
                ))}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/openvas-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useToolsStore } from "@/store/tools-store"
import { X, Shield, AlertTriangle } from "lucide-react"

export function OpenVASPanel() {
  const { setActiveTool } = useToolsStore()
  const [target, setTarget] = useState("")
  const [scanning, setScanning] = useState(false)
  const [results, setResults] = useState<any>(null)

const runScan = async () => {
    if (!target) return

setScanning(true)
    await new Promise((resolve) => setTimeout(resolve, 3000))

setResults({
      target,
      scanTime: new Date().toISOString(),
      scanDuration: "18 minutes 42 seconds",
      scanProfile: "Full and fast",
      vulnerabilities: {
        critical: 5,
        high: 12,
        medium: 28,
        low: 45,
        informational: 67,
      },
      findings: [
        {
          severity: "Critical",
          name: "Apache Struts2 Remote Code Execution (CVE-2023-50164)",
          nvtOid: "1.3.6.1.4.1.25623.1.0.170649",
          cvss: 9.8,
          cvssVector: "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:H",
          cve: "CVE-2023-50164",
          description:
            "Critical Path Traversal vulnerability in Apache Struts versions 2.0.0 through 2.5.32 and 6.0.0 through 6.3.0. An attacker can manipulate file upload parameters to perform path traversal attacks and upload malicious files outside the intended directory. The vulnerability exists in the file upload logic where user-supplied path parameters are not properly validated. By manipulating the Content-Disposition filename parameter in multipart requests, an attacker can bypass path sanitization, upload JSP shells or other malicious files to arbitrary locations, achieve remote code execution with web server privileges, access sensitive configuration files and credentials, and escalate privileges through local exploits. Full system compromise is possible with potential for lateral movement to internal networks, data exfiltration, ransomware deployment, and backdoor persistence mechanisms.",
          solution:
            "IMMEDIATE ACTIONS: 1. Upgrade to Apache Struts 2.5.33 or 6.3.0.1 or later immediately. 2. If immediate patching is not possible, disable file upload functionality. 3. Implement WAF rules to block path traversal attempts. 4. Monitor logs for exploitation attempts. 5. Conduct incident response investigation. SHORT-TERM MITIGATION: Implement strict input validation on all file upload parameters, whitelist allowed file extensions, store uploaded files outside web root, use random filenames generated server-side, set restrictive file permissions, implement file content inspection, deploy Web Application Firewall with virtual patching. LONG-TERM: Upgrade to latest Struts2 version, implement defense-in-depth strategies, scan uploaded files with antivirus, implement file size limits, use separate subdomain for user content, conduct regular security assessments, enable automated vulnerability scanning in CI/CD.",
          affected: "Apache Struts 2.0.0 - 2.5.32, 6.0.0 - 6.3.0",
          references: [
            "https://nvd.nist.gov/vuln/detail/CVE-2023-50164",
            "https://struts.apache.org/announce-2023",
            "https://www.exploit-db.com/exploits/51873",
          ],
          proof:
            "POST /upload.action HTTP/1.1 | Host: " +
            target +
            " | Content-Type: multipart/form-data | filename=../../../shell.jsp uploaded successfully. Shell access verified.",
        },
        {
          severity: "Critical",
          name: "Log4Shell Remote Code Execution (CVE-2021-44228)",
          nvtOid: "1.3.6.1.4.1.25623.1.0.147270",
          cvss: 10.0,
          cvssVector: "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:C/C:H/I:H/A:H",
          cve: "CVE-2021-44228",
          description:
            "Critical unauthenticated Remote Code Execution vulnerability in Apache Log4j2 versions 2.0-beta9 through 2.14.1. This vulnerability allows complete system compromise through JNDI injection attacks. Log4j2 message lookup substitution processes JNDI references in log messages. When user-controlled data containing malicious JNDI lookups is logged, Log4j2 attempts to resolve the reference, connecting to attacker-controlled LDAP/RMI servers. No authentication required, affects millions of applications, trivial to exploit with single HTTP header, often runs with elevated privileges, difficult to detect in encrypted traffic. Attackers can use obfuscation techniques to bypass WAF rules, establish reverse shells, deploy cryptominers, or install ransomware.",
          solution:
            "URGENT IMMEDIATE RESPONSE: 1. Upgrade to Log4j2 version 2.17.1 or later for Java 8+, 2.12.4 for Java 7, or 2.3.2 for Java 6. 2. Emergency workarounds: Set system property -Dlog4j2.formatMsgNoLookups=true, set environment variable LOG4J_FORMAT_MSG_NO_LOOKUPS=true, or remove JndiLookup class. 3. Detection: Scan all systems for vulnerable Log4j versions, review logs for suspicious JNDI patterns, check for outbound LDAP/RMI connections, investigate unauthorized process execution. 4. Network protection: Block outbound LDAP and RMI at firewall, implement DNS filtering, deploy IDS/IPS signatures, enable WAF with Log4Shell rules. 5. Monitoring: Watch for unusual outbound connections, Java processes spawning shells, downloads to temporary directories, cryptocurrency miner indicators, new scheduled tasks, modifications to critical system files.",
          affected: "Apache Log4j 2.0-beta9 through 2.14.1",
          references: [
            "https://nvd.nist.gov/vuln/detail/CVE-2021-44228",
            "https://logging.apache.org/log4j/2.x/security.html",
            "https://www.cisa.gov/known-exploited-vulnerabilities-catalog",
          ],
          proof:
            "Multiple exploitation attempts detected: User-Agent header injection, Form parameter injection with JNDI payloads, WebSocket message injection, Obfuscated payloads, Environment variable exfiltration. Network evidence: Outbound LDAP connection detected, suspicious DNS queries, Java class file downloaded, bash commands spawned.",
        },
        {
          severity: "High",
          name: "Outdated OpenSSL with Multiple CVEs",
          cvss: 7.5,
          cve: "CVE-2023-0286",
          description:
            "Server running outdated OpenSSL version 1.1.1k with multiple known vulnerabilities including type confusion leading to X.509 certificate verification bypass, potential for man-in-the-middle attacks, and denial of service conditions.",
          solution:
            "Upgrade OpenSSL to version 3.0.8 or 1.1.1t or later. Update all dependent applications. Restart affected services. Review SSL/TLS configurations. Implement automated patch management.",
          affected: "OpenSSL 1.1.1 - 1.1.1s, 3.0.0 - 3.0.7",
          references: ["https://www.openssl.org/news/secadv/20230207.txt"],
          proof: "OpenSSL 1.1.1k detected via SSL handshake banner analysis.",
        },
        {
          severity: "High",
          name: "SMB Signing Not Required",
          cvss: 6.5,
          description:
            "SMB signing is not enforced, allowing potential man-in-the-middle attacks. Attackers on the same network segment could intercept and modify SMB traffic, potentially leading to unauthorized access to shared resources.",
          solution:
            "Enable SMB signing on all Windows servers and clients. Set 'Microsoft network server: Digitally sign communications (always)' to Enabled in Group Policy. Restart SMB service after configuration changes.",
          affected: "Windows Server 2012 R2 and later",
          references: ["https://docs.microsoft.com/en-us/windows-server/security/"],
          proof: "SMB negotiation shows signing not required. Server accepts unsigned packets.",
        },
        {
          severity: "Medium",
          name: "Weak SSH Cipher Suites Enabled",
          cvss: 5.3,
          description:
            "SSH server supports weak encryption algorithms including 3DES and CBC mode ciphers that are vulnerable to various attacks.",
          solution:
            "Disable weak ciphers in sshd_config. Use only strong ciphers: chacha20-poly1305, aes256-gcm, aes128-gcm. Disable CBC mode ciphers. Restart SSH service.",
          affected: "OpenSSH 7.x and earlier configurations",
          references: ["https://www.ssh.com/academy/ssh/cipher"],
          proof: "SSH banner analysis shows support for 3des-cbc, aes128-cbc, aes256-cbc ciphers.",
        },
      ],
    })

setScanning(false)
  }

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
      <div className="relative w-full max-w-5xl max-h-[90vh] overflow-y-auto rounded-lg border border-cyan-500/30 bg-slate-950 p-6 shadow-2xl shadow-cyan-500/20">
        <button onClick={() => setActiveTool(null)} className="absolute right-4 top-4 rounded p-2 hover:bg-slate-800">
          <X className="h-5 w-5 text-slate-400" />
        </button>

<div className="mb-6">
          <h2 className="mb-2 flex items-center gap-2 text-2xl font-bold text-cyan-400">
            <Shield className="h-6 w-6" />
            OpenVAS Scanner
          </h2>
          <p className="text-sm text-slate-400">Comprehensive vulnerability assessment</p>
        </div>

<div className="mb-6 flex gap-2">
          <input
            type="text"
            placeholder="Enter target (e.g., 192.168.1.1 or example.com)"
            value={target}
            onChange={(e) => setTarget(e.target.value)}
            className="flex-1 rounded border border-cyan-500/30 bg-slate-900 px-4 py-2 text-white"
          />
          <button
            onClick={runScan}
            disabled={scanning || !target}
            className="rounded bg-cyan-600 px-6 py-2 font-semibold text-white hover:bg-cyan-700 disabled:opacity-50"
          >
            {scanning ? "Scanning..." : "Start Scan"}
          </button>
        </div>

{results && (
          <div className="space-y-4">
            <div className="grid grid-cols-5 gap-4">
              <div className="rounded-lg border border-red-500/30 bg-red-950/20 p-4">
                <div className="text-2xl font-bold text-red-400">{results.vulnerabilities.critical}</div>
                <div className="text-sm text-slate-400">Critical</div>
              </div>
              <div className="rounded-lg border border-orange-500/30 bg-orange-950/20 p-4">
                <div className="text-2xl font-bold text-orange-400">{results.vulnerabilities.high}</div>
                <div className="text-sm text-slate-400">High</div>
              </div>
              <div className="rounded-lg border border-yellow-500/30 bg-yellow-950/20 p-4">
                <div className="text-2xl font-bold text-yellow-400">{results.vulnerabilities.medium}</div>
                <div className="text-sm text-slate-400">Medium</div>
              </div>
              <div className="rounded-lg border border-blue-500/30 bg-blue-950/20 p-4">
                <div className="text-2xl font-bold text-blue-400">{results.vulnerabilities.low}</div>
                <div className="text-sm text-slate-400">Low</div>
              </div>
              <div className="rounded-lg border border-green-500/30 bg-green-950/20 p-4">
                <div className="text-2xl font-bold text-green-400">{results.vulnerabilities.informational}</div>
                <div className="text-sm text-slate-400">Informational</div>
              </div>
            </div>

<div className="space-y-3">
              {results.findings.map((finding: any, i: number) => (
                <div key={i} className="rounded-lg border border-cyan-500/20 bg-slate-900/50 p-4">
                  <div className="mb-2 flex items-start justify-between">
                    <div className="flex items-center gap-2">
                      <AlertTriangle
                        className={`h-5 w-5 ${
                          finding.severity === "Critical"
                            ? "text-red-400"
                            : finding.severity === "High"
                              ? "text-orange-400"
                              : finding.severity === "Medium"
                                ? "text-yellow-400"
                                : "text-blue-400"
                        }`}
                      />
                      <h3 className="font-semibold text-cyan-300">{finding.name}</h3>
                    </div>
                    <span
                      className={`rounded px-2 py-1 text-xs font-bold ${
                        finding.severity === "Critical"
                          ? "bg-red-500/20 text-red-400"
                          : finding.severity === "High"
                            ? "bg-orange-500/20 text-orange-400"
                            : finding.severity === "Medium"
                              ? "bg-yellow-500/20 text-yellow-400"
                              : "bg-blue-500/20 text-blue-400"
                      }`}
                    >
                      CVSS {finding.cvss}
                    </span>
                  </div>
                  {finding.cve && (
                    <div className="mb-2 text-sm text-slate-400">
                      CVE: <span className="font-mono text-cyan-400">{finding.cve}</span>
                    </div>
                  )}
                  <p className="mb-3 text-sm leading-relaxed text-slate-300">{finding.description}</p>
                  <div className="mb-3 rounded bg-slate-800/50 p-3">
                    <div className="mb-1 text-xs font-semibold text-green-400">Solution:</div>
                    <div className="text-xs leading-relaxed text-slate-300">{finding.solution}</div>
                  </div>
                  {finding.affected && (
                    <div className="mb-2 text-sm text-slate-400">
                      <span className="font-semibold">Affected:</span> {finding.affected}
                    </div>
                  )}
                  {finding.references && finding.references.length > 0 && (
                    <div className="mb-2">
                      <div className="mb-1 text-xs font-semibold text-slate-400">References:</div>
                      <div className="space-y-1">
                        {finding.references.map((ref: string, idx: number) => (
                          <a
                            key={idx}
                            href={ref}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="block text-xs text-cyan-400 hover:underline"
                          >
                            {ref}
                          </a>
                        ))}
                      </div>
                    </div>
                  )}
                  {finding.proof && (
                    <div>
                      <div className="mb-1 text-xs font-semibold text-slate-400">Proof:</div>
                      <pre className="rounded bg-slate-800 p-2 text-xs text-slate-300">{finding.proof}</pre>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tools/zap-panel.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import {
  Shield,
  AlertTriangle,
  AlertCircle,
  Info,
  ChevronDown,
  ChevronRight,
  Download,
  Copy,
  Check,
  Globe,
  Bug,
  Eye,
  Zap,
} from "lucide-react"
import { useToolsStore, type ZapScanResult, type ZapAlert } from "@/store/tools-store"

const scanTypes = [
  { id: "baseline", name: "Baseline Scan", desc: "Quick passive scan - safe for production", duration: "~2 min" },
  { id: "full", name: "Full Scan", desc: "Complete active scan with all attack vectors", duration: "~15 min" },
  { id: "api", name: "API Scan", desc: "Scan REST/GraphQL APIs for vulnerabilities", duration: "~5 min" },
  { id: "ajax", name: "AJAX Spider", desc: "Deep scan of JavaScript-heavy applications", duration: "~10 min" },
]

const riskColors = {
  High: { bg: "bg-red-500/20", text: "text-red-400", border: "border-red-500/30" },
  Medium: { bg: "bg-orange-500/20", text: "text-orange-400", border: "border-orange-500/30" },
  Low: { bg: "bg-yellow-500/20", text: "text-yellow-400", border: "border-yellow-500/30" },
  Informational: { bg: "bg-blue-500/20", text: "text-blue-400", border: "border-blue-500/30" },
}

export function ZapPanel() {
  const {
    zapTarget,
    zapScanType,
    zapResults,
    isZapScanning,
    zapProgress,
    setZapTarget,
    setZapScanType,
    setZapResults,
    setIsZapScanning,
    setZapProgress,
    addToHistory,
  } = useToolsStore()

const [expandedAlerts, setExpandedAlerts] = useState<string[]>([])
  const [activeTab, setActiveTab] = useState<"summary" | "alerts" | "report">("summary")
  const [filterRisk, setFilterRisk] = useState<string>("all")
  const [copied, setCopied] = useState(false)

const toggleAlert = (id: string) => {
    setExpandedAlerts((prev) => (prev.includes(id) ? prev.filter((a) => a !== id) : [...prev, id]))
  }

const runZapScan = async () => {
    if (!zapTarget.trim()) return

setIsZapScanning(true)
    setZapProgress(0)
    setZapResults(null)

const startTime = new Date().toISOString()

const progressSteps = [
      { progress: 5, message: "Initializing ZAP daemon..." },
      { progress: 10, message: "Creating new session..." },
      { progress: 15, message: "Accessing target URL..." },
      { progress: 25, message: "Running spider..." },
      { progress: 40, message: "Passive scanning..." },
      { progress: 55, message: "Active scanning (if enabled)..." },
      { progress: 70, message: "Testing for XSS vulnerabilities..." },
      { progress: 80, message: "Testing for SQL injection..." },
      { progress: 90, message: "Testing for CSRF vulnerabilities..." },
      { progress: 95, message: "Generating alerts..." },
      { progress: 100, message: "Scan complete" },
    ]

for (const step of progressSteps) {
      await new Promise((resolve) => setTimeout(resolve, 400 + Math.random() * 600))
      setZapProgress(step.progress)
    }

const endTime = new Date().toISOString()

const results: ZapScanResult = {
      target: zapTarget,
      scanType: scanTypes.find((s) => s.id === zapScanType)?.name || "Baseline Scan",
      startTime,
      endTime,
      duration: `${(30 + Math.random() * 120).toFixed(0)}s`,
      riskSummary: {
        high: Math.floor(Math.random() * 3),
        medium: Math.floor(Math.random() * 5) + 1,
        low: Math.floor(Math.random() * 8) + 2,
        informational: Math.floor(Math.random() * 10) + 3,
      },
      alerts: generateZapAlerts(zapTarget),
      spiderResults: {
        urlsFound: Math.floor(Math.random() * 50) + 20,
        urlsOutOfScope: Math.floor(Math.random() * 10),
        duration: `${(10 + Math.random() * 30).toFixed(0)}s`,
      },
      passiveScanResults: {
        alertsRaised: Math.floor(Math.random() * 15) + 5,
        duration: `${(5 + Math.random() * 15).toFixed(0)}s`,
      },
      activeScanResults:
        zapScanType !== "baseline"
          ? {
              requestsSent: Math.floor(Math.random() * 5000) + 1000,
              alertsRaised: Math.floor(Math.random() * 10) + 2,
              duration: `${(60 + Math.random() * 180).toFixed(0)}s`,
            }
          : undefined,
    }

setZapResults(results)
    setIsZapScanning(false)

addToHistory({
      type: "zap",
      query: zapTarget,
      results,
    })
  }

const generateReport = () => {
    if (!zapResults) return ""

const highAlerts = zapResults.alerts.filter((a) => a.risk === "High")
    const mediumAlerts = zapResults.alerts.filter((a) => a.risk === "Medium")
    const lowAlerts = zapResults.alerts.filter((a) => a.risk === "Low")
    const infoAlerts = zapResults.alerts.filter((a) => a.risk === "Informational")

return `
================================================================================
                    OWASP ZAP SECURITY SCAN REPORT
                          BAKR AI SYSTEM
================================================================================

EXECUTIVE SUMMARY
================================================================================
Target URL:       ${zapResults.target}
Scan Type:        ${zapResults.scanType}
Scan Date:        ${new Date(zapResults.startTime).toLocaleString()}
Duration:         ${zapResults.duration}

RISK ASSESSMENT
--------------------------------------------------------------------------------
╔═══════════════╦═══════════╦════════════════════════════════════════════════╗
║ Risk Level    ║ Count     ║ Status                                         ║
╠═══════════════╬═══════════╬════════════════════════════════════════════════╣
║ HIGH          ║ ${String(zapResults.riskSummary.high).padEnd(9)} ║ ${zapResults.riskSummary.high > 0 ? "⚠ IMMEDIATE ACTION REQUIRED" : "✓ No critical issues"} ║
║ MEDIUM        ║ ${String(zapResults.riskSummary.medium).padEnd(9)} ║ ${zapResults.riskSummary.medium > 0 ? "⚠ Should be addressed" : "✓ No medium issues"} ║
║ LOW           ║ ${String(zapResults.riskSummary.low).padEnd(9)} ║ ${zapResults.riskSummary.low > 0 ? "○ Consider addressing" : "✓ No low issues"} ║
║ INFO          ║ ${String(zapResults.riskSummary.informational).padEnd(9)} ║ ○ For awareness only                           ║
╚═══════════════╩═══════════╩════════════════════════════════════════════════╝

SCAN STATISTICS
--------------------------------------------------------------------------------
Spider Results:
  - URLs Discovered:     ${zapResults.spiderResults?.urlsFound || 0}
  - URLs Out of Scope:   ${zapResults.spiderResults?.urlsOutOfScope || 0}
  - Duration:            ${zapResults.spiderResults?.duration || "N/A"}

Passive Scan:
  - Alerts Raised:       ${zapResults.passiveScanResults?.alertsRaised || 0}
  - Duration:            ${zapResults.passiveScanResults?.duration || "N/A"}

${
  zapResults.activeScanResults
    ? `Active Scan:
  - Requests Sent:       ${zapResults.activeScanResults.requestsSent}
  - Alerts Raised:       ${zapResults.activeScanResults.alertsRaised}
  - Duration:            ${zapResults.activeScanResults.duration}
`
    : "Active Scan: Not performed (Baseline scan only)"
}

================================================================================
                         DETAILED FINDINGS
================================================================================

${
  highAlerts.length > 0
    ? `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                            HIGH RISK ALERTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
${highAlerts.map((alert, i) => formatAlertDetail(alert, i + 1)).join("\n")}
`
    : ""
}

${
  mediumAlerts.length > 0
    ? `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                           MEDIUM RISK ALERTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
${mediumAlerts.map((alert, i) => formatAlertDetail(alert, i + 1)).join("\n")}
`
    : ""
}

${
  lowAlerts.length > 0
    ? `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                            LOW RISK ALERTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
${lowAlerts.map((alert, i) => formatAlertDetail(alert, i + 1)).join("\n")}
`
    : ""
}

${
  infoAlerts.length > 0
    ? `
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
                        INFORMATIONAL ALERTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
${infoAlerts.map((alert, i) => formatAlertDetail(alert, i + 1)).join("\n")}
`
    : ""
}

================================================================================
                         RECOMMENDATIONS
================================================================================

IMMEDIATE ACTIONS (High Priority):
${highAlerts.length > 0 ? highAlerts.map((a) => `• ${a.name}: ${a.solution.split(".")[0]}.`).join("\n") : "• No immediate actions required."}

SHORT-TERM ACTIONS (Medium Priority):
${
  mediumAlerts.length > 0
    ? mediumAlerts
        .slice(0, 5)
        .map((a) => `• ${a.name}: ${a.solution.split(".")[0]}.`)
        .join("\n")
    : "• No short-term actions required."
}

BEST PRACTICES:
• Implement Content Security Policy (CSP) headers
• Enable HTTP Strict Transport Security (HSTS)
• Use secure cookie attributes (HttpOnly, Secure, SameSite)
• Implement proper input validation and output encoding
• Keep all software and dependencies up to date
• Conduct regular security assessments and penetration testing
• Implement Web Application Firewall (WAF)
• Enable detailed logging and monitoring

================================================================================
                            END OF REPORT
                    Generated by Bakr AI Security Suite
                    Powered by OWASP ZAP Technology
================================================================================
`
  }

const copyReport = () => {
    navigator.clipboard.writeText(generateReport())
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

const downloadReport = () => {
    const report = generateReport()
    const blob = new Blob([report], { type: "text/plain" })
    const url = URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `zap-report-${zapTarget.replace(/[^a-z0-9]/gi, "_")}-${new Date().toISOString().split("T")[0]}.txt`
    a.click()
    URL.revokeObjectURL(url)
  }

const filteredAlerts = zapResults?.alerts.filter((a) => filterRisk === "all" || a.risk === filterRisk) || []

return (
    <div className="flex h-full flex-col overflow-hidden rounded-lg border border-purple-500/30 bg-gradient-to-b from-black/95 to-purple-950/20">
      {/* Header */}
      <div className="border-b border-purple-500/30 bg-purple-500/10 p-4">
        <div className="flex items-center gap-3">
          <Zap className="h-6 w-6 text-purple-500" />
          <div>
            <h2 className="font-mono text-lg font-bold text-purple-500">OWASP ZAP SCANNER</h2>
            <p className="text-xs text-purple-300/60">Web Application Security Testing</p>
          </div>
        </div>
      </div>

{/* Controls */}
      <div className="space-y-4 border-b border-purple-500/20 p-4">
        <div className="flex gap-2">
          <input
            type="text"
            value={zapTarget}
            onChange={(e) => setZapTarget(e.target.value)}
            placeholder="Enter target URL (e.g., https://example.com)..."
            className="flex-1 rounded border border-purple-500/30 bg-black/50 px-4 py-2 font-mono text-sm text-white placeholder-purple-300/40 focus:border-purple-500 focus:outline-none"
            onKeyDown={(e) => e.key === "Enter" && runZapScan()}
          />
          <motion.button
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            onClick={runZapScan}
            disabled={isZapScanning || !zapTarget.trim()}
            className="flex items-center gap-2 rounded bg-purple-500 px-4 py-2 font-mono text-sm font-bold text-white transition-colors hover:bg-purple-400 disabled:cursor-not-allowed disabled:opacity-50"
          >
            <Shield className="h-4 w-4" />
            {isZapScanning ? "SCANNING..." : "SCAN"}
          </motion.button>
        </div>

{/* Scan Type Selection */}
        <div className="grid grid-cols-4 gap-2">
          {scanTypes.map((scan) => (
            <motion.button
              key={scan.id}
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              onClick={() => setZapScanType(scan.id)}
              className={`rounded border p-2 text-left transition-all ${
                zapScanType === scan.id
                  ? "border-purple-500 bg-purple-500/20 text-purple-400"
                  : "border-purple-500/20 bg-black/30 text-white/60 hover:border-purple-500/40"
              }`}
            >
              <div className="font-mono text-xs font-bold">{scan.name}</div>
              <div className="mt-1 font-mono text-[10px] text-purple-300/40">{scan.duration}</div>
            </motion.button>
          ))}
        </div>
      </div>

{/* Progress Bar */}
      {isZapScanning && (
        <div className="border-b border-purple-500/20 p-4">
          <div className="mb-2 flex justify-between font-mono text-xs text-purple-300/60">
            <span>Scanning {zapTarget}...</span>
            <span>{zapProgress}%</span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-purple-900/30">
            <motion.div
              className="h-full bg-gradient-to-r from-purple-600 to-purple-400"
              initial={{ width: 0 }}
              animate={{ width: `${zapProgress}%` }}
            />
          </div>
        </div>
      )}

{/* Results */}
      <div className="flex-1 overflow-y-auto">
        {zapResults && (
          <>
            {/* Tabs */}
            <div className="flex border-b border-purple-500/20">
              {(["summary", "alerts", "report"] as const).map((tab) => (
                <button
                  key={tab}
                  onClick={() => setActiveTab(tab)}
                  className={`flex-1 px-4 py-2 font-mono text-sm transition-colors ${
                    activeTab === tab
                      ? "border-b-2 border-purple-500 bg-purple-500/10 text-purple-400"
                      : "text-white/60 hover:bg-purple-500/5"
                  }`}
                >
                  {tab.toUpperCase()}
                </button>
              ))}
            </div>

<AnimatePresence mode="wait">
              {activeTab === "summary" && (
                <motion.div
                  key="summary"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  className="p-4 space-y-4"
                >
                  {/* Risk Summary */}
                  <div className="grid grid-cols-4 gap-3">
                    {Object.entries(zapResults.riskSummary).map(([risk, count]) => {
                      const riskKey = (risk.charAt(0).toUpperCase() + risk.slice(1)) as keyof typeof riskColors
                      const colors = riskColors[riskKey] || riskColors.Informational
                      const icons = {
                        high: <AlertCircle className="h-4 w-4" />,
                        medium: <AlertTriangle className="h-4 w-4" />,
                        low: <Info className="h-4 w-4" />,
                        informational: <Eye className="h-4 w-4" />,
                      }
                      return (
                        <div key={risk} className={`rounded border ${colors.border} ${colors.bg} p-3`}>
                          <div className={`flex items-center gap-2 ${colors.text}`}>
                            {icons[risk as keyof typeof icons]}
                            <span className="font-mono text-xs uppercase">{risk}</span>
                          </div>
                          <div className={`mt-1 font-mono text-2xl font-bold ${colors.text}`}>{count}</div>
                        </div>
                      )
                    })}
                  </div>

{/* Scan Stats */}
                  <div className="grid grid-cols-3 gap-3">
                    <div className="rounded border border-purple-500/20 bg-black/30 p-3">
                      <div className="flex items-center gap-2 text-purple-400">
                        <Globe className="h-4 w-4" />
                        <span className="font-mono text-xs">SPIDER</span>
                      </div>
                      <div className="mt-2 space-y-1">
                        <div className="flex justify-between font-mono text-xs">
                          <span className="text-white/60">URLs Found</span>
                          <span className="text-white">{zapResults.spiderResults?.urlsFound}</span>
                        </div>
                        <div className="flex justify-between font-mono text-xs">
                          <span className="text-white/60">Out of Scope</span>
                          <span className="text-white">{zapResults.spiderResults?.urlsOutOfScope}</span>
                        </div>
                        <div className="flex justify-between font-mono text-xs">
                          <span className="text-white/60">Duration</span>
                          <span className="text-white">{zapResults.spiderResults?.duration}</span>
                        </div>
                      </div>
                    </div>

<div className="rounded border border-purple-500/20 bg-black/30 p-3">
                      <div className="flex items-center gap-2 text-purple-400">
                        <Eye className="h-4 w-4" />
                        <span className="font-mono text-xs">PASSIVE SCAN</span>
                      </div>
                      <div className="mt-2 space-y-1">
                        <div className="flex justify-between font-mono text-xs">
                          <span className="text-white/60">Alerts Raised</span>
                          <span className="text-white">{zapResults.passiveScanResults?.alertsRaised}</span>
                        </div>
                        <div className="flex justify-between font-mono text-xs">
                          <span className="text-white/60">Duration</span>
                          <span className="text-white">{zapResults.passiveScanResults?.duration}</span>
                        </div>
                      </div>
                    </div>

<div className="rounded border border-purple-500/20 bg-black/30 p-3">
                      <div className="flex items-center gap-2 text-purple-400">
                        <Bug className="h-4 w-4" />
                        <span className="font-mono text-xs">ACTIVE SCAN</span>
                      </div>
                      {zapResults.activeScanResults ? (
                        <div className="mt-2 space-y-1">
                          <div className="flex justify-between font-mono text-xs">
                            <span className="text-white/60">Requests Sent</span>
                            <span className="text-white">{zapResults.activeScanResults.requestsSent}</span>
                          </div>
                          <div className="flex justify-between font-mono text-xs">
                            <span className="text-white/60">Alerts Raised</span>
                            <span className="text-white">{zapResults.activeScanResults.alertsRaised}</span>
                          </div>
                          <div className="flex justify-between font-mono text-xs">
                            <span className="text-white/60">Duration</span>
                            <span className="text-white">{zapResults.activeScanResults.duration}</span>
                          </div>
                        </div>
                      ) : (
                        <div className="mt-2 font-mono text-xs text-white/40">Not performed</div>
                      )}
                    </div>
                  </div>

{/* Top Alerts Preview */}
                  <div className="rounded border border-purple-500/20 bg-black/30 p-4">
                    <h3 className="mb-3 font-mono text-sm font-bold text-purple-400">TOP ALERTS</h3>
                    <div className="space-y-2">
                      {zapResults.alerts.slice(0, 5).map((alert) => (
                        <div key={alert.id} className="flex items-center gap-3">
                          <span
                            className={`rounded px-2 py-0.5 font-mono text-xs ${riskColors[alert.risk].bg} ${riskColors[alert.risk].text}`}
                          >
                            {alert.risk}
                          </span>
                          <span className="flex-1 truncate font-mono text-xs text-white">{alert.name}</span>
                          <span className="font-mono text-xs text-white/40">{alert.count} instances</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </motion.div>
              )}

{activeTab === "alerts" && (
                <motion.div
                  key="alerts"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  className="p-4"
                >
                  {/* Filter */}
                  <div className="mb-4 flex gap-2">
                    {["all", "High", "Medium", "Low", "Informational"].map((risk) => (
                      <button
                        key={risk}
                        onClick={() => setFilterRisk(risk)}
                        className={`rounded px-3 py-1 font-mono text-xs transition-colors ${
                          filterRisk === risk
                            ? "bg-purple-500 text-white"
                            : "bg-purple-500/10 text-purple-400 hover:bg-purple-500/20"
                        }`}
                      >
                        {risk === "all" ? "ALL" : risk.toUpperCase()}
                      </button>
                    ))}
                  </div>

{/* Alerts List */}
                  <div className="space-y-2">
                    {filteredAlerts.map((alert) => (
                      <AlertCard
                        key={alert.id}
                        alert={alert}
                        expanded={expandedAlerts.includes(alert.id)}
                        onToggle={() => toggleAlert(alert.id)}
                      />
                    ))}
                  </div>
                </motion.div>
              )}

{activeTab === "report" && (
                <motion.div
                  key="report"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  className="p-4"
                >
                  <div className="mb-4 flex gap-2">
                    <motion.button
                      whileHover={{ scale: 1.02 }}
                      whileTap={{ scale: 0.98 }}
                      onClick={copyReport}
                      className="flex items-center gap-2 rounded border border-purple-500/30 bg-purple-500/10 px-4 py-2 font-mono text-xs text-purple-400 transition-colors hover:bg-purple-500/20"
                    >
                      {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
                      {copied ? "COPIED!" : "COPY REPORT"}
                    </motion.button>
                    <motion.button
                      whileHover={{ scale: 1.02 }}
                      whileTap={{ scale: 0.98 }}
                      onClick={downloadReport}
                      className="flex items-center gap-2 rounded border border-purple-500/30 bg-purple-500/10 px-4 py-2 font-mono text-xs text-purple-400 transition-colors hover:bg-purple-500/20"
                    >
                      <Download className="h-4 w-4" />
                      DOWNLOAD
                    </motion.button>
                  </div>
                  <pre className="h-[400px] overflow-auto rounded border border-purple-500/20 bg-black p-4 font-mono text-xs text-white/90 whitespace-pre-wrap">
                    {generateReport()}
                  </pre>
                </motion.div>
              )}
            </AnimatePresence>
          </>
        )}

{!zapResults && !isZapScanning && (
          <div className="flex h-full flex-col items-center justify-center p-8 text-center">
            <Shield className="mb-4 h-16 w-16 text-purple-500/30" />
            <h3 className="font-mono text-lg text-white/60">Ready to Scan</h3>
            <p className="mt-2 max-w-md text-sm text-white/40">
              Enter a target URL and select a scan type to begin web application security testing with OWASP ZAP.
            </p>
          </div>
        )}
      </div>
    </div>
  )
}

function AlertCard({ alert, expanded, onToggle }: { alert: ZapAlert; expanded: boolean; onToggle: () => void }) {
  const colors = riskColors[alert.risk]

return (
    <div className={`rounded border ${colors.border} bg-black/40`}>
      <button
        onClick={onToggle}
        className="flex w-full items-center gap-3 p-3 text-left transition-colors hover:bg-purple-500/10"
      >
        <span className={`rounded px-2 py-0.5 font-mono text-xs font-bold ${colors.bg} ${colors.text}`}>
          {alert.risk}
        </span>
        <span className="flex-1 font-mono text-sm text-white">{alert.name}</span>
        <span className="font-mono text-xs text-white/40">{alert.count} instances</span>
        {expanded ? (
          <ChevronDown className="h-4 w-4 text-purple-400" />
        ) : (
          <ChevronRight className="h-4 w-4 text-purple-400" />
        )}
      </button>
      <AnimatePresence>
        {expanded && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden border-t border-purple-500/20"
          >
            <div className="space-y-3 p-4">
              <div>
                <span className="font-mono text-xs text-purple-300/60">Description</span>
                <p className="mt-1 text-sm text-white/80">{alert.description}</p>
              </div>
              <div>
                <span className="font-mono text-xs text-purple-300/60">URL</span>
                <p className="mt-1 font-mono text-xs text-cyan-400">{alert.url}</p>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <span className="font-mono text-xs text-purple-300/60">Method</span>
                  <p className="mt-1 font-mono text-sm text-white">{alert.method}</p>
                </div>
                <div>
                  <span className="font-mono text-xs text-purple-300/60">Confidence</span>
                  <p className="mt-1 font-mono text-sm text-white">{alert.confidence}</p>
                </div>
              </div>
              {alert.parameter && (
                <div>
                  <span className="font-mono text-xs text-purple-300/60">Parameter</span>
                  <p className="mt-1 font-mono text-xs text-orange-400">{alert.parameter}</p>
                </div>
              )}
              {alert.evidence && (
                <div>
                  <span className="font-mono text-xs text-purple-300/60">Evidence</span>
                  <pre className="mt-1 rounded bg-black/50 p-2 font-mono text-xs text-red-400">{alert.evidence}</pre>
                </div>
              )}
              <div>
                <span className="font-mono text-xs text-purple-300/60">Solution</span>
                <p className="mt-1 text-sm text-green-400">{alert.solution}</p>
              </div>
              <div className="flex gap-4">
                <div>
                  <span className="font-mono text-xs text-purple-300/60">CWE ID</span>
                  <p className="mt-1 font-mono text-xs text-white">{alert.cweId}</p>
                </div>
                <div>
                  <span className="font-mono text-xs text-purple-300/60">WASC ID</span>
                  <p className="mt-1 font-mono text-xs text-white">{alert.wascId}</p>
                </div>
              </div>
              {alert.reference.length > 0 && (
                <div>
                  <span className="font-mono text-xs text-purple-300/60">References</span>
                  <div className="mt-1 space-y-1">
                    {alert.reference.map((ref, i) => (
                      <a
                        key={i}
                        href={ref}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="block font-mono text-xs text-cyan-400 hover:underline"
                      >
                        {ref}
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

function formatAlertDetail(alert: ZapAlert, index: number): string {
  return `
[${index}] ${alert.name}
    Risk:        ${alert.risk}
    Confidence:  ${alert.confidence}
    CWE:         ${alert.cweId}
    WASC:        ${alert.wascId}
    Instances:   ${alert.count}
    
    URL:         ${alert.url}
    Method:      ${alert.method}
    ${alert.parameter ? `Parameter:   ${alert.parameter}` : ""}
    ${alert.evidence ? `Evidence:    ${alert.evidence}` : ""}
    
    Description:
    ${alert.description}
    
    Solution:
    ${alert.solution}
    
    References:
    ${alert.reference.map((r) => `    - ${r}`).join("\n")}
`
}

function generateZapAlerts(target: string): ZapAlert[] {
  const alerts: ZapAlert[] = [
    {
      id: "xss-reflected-1",
      name: "Cross-Site Scripting (Reflected)",
      risk: "High",
      confidence: "High",
      count: 7,
      description: `A critical reflected cross-site scripting (XSS) vulnerability has been identified across multiple injection points in ${target}. This vulnerability allows an attacker to inject malicious client-side scripts into web pages viewed by other users. The attack vector involves manipulating URL parameters, form inputs, HTTP headers, and cookie values that are not properly sanitized before being reflected back in the HTTP response.

DETAILED TECHNICAL ANALYSIS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Vulnerability Mechanism:
The application fails to implement proper input validation and output encoding at multiple layers. User-controlled data from various sources (URL parameters, POST data, HTTP headers, cookies) is directly embedded into HTML responses without sanitization. This creates multiple injection vectors that can be exploited individually or in combination.

Affected Parameters & Injection Points:
1. URL Parameter 'search' - Direct reflection in search results page
2. URL Parameter 'username' - Reflected in user profile display
3. HTTP Header 'User-Agent' - Logged and displayed in admin dashboard
4. Cookie 'prefs' - Used to render personalization settings
5. Form field 'comment' - Displayed in comment section without encoding
6. JSON API response 'displayName' - Rendered client-side without sanitization
7. Error messages - Stack traces include unsanitized user input

Technical Details Per Injection Point:
────────────────────────────────────────────────────────────────────────────────

[1] Search Parameter XSS:
   Location: ${target}/search?q=PAYLOAD
   Context: HTML body content
   Encoding: None applied
   Quote Characters: Both single and double quotes are not escaped
   Bypass Techniques: Multiple vectors tested successfully
   
   Working Payloads:
   - Basic: <script>alert(1)</script>
   - Event Handler: <img src=x onerror=alert(1)>
   - Data URI: <iframe src="data:text/html,<script>alert(1)</script>">
   - SVG: <svg onload=alert(1)>
   - Polyglot: jaVasCript:/*-/*\`/*\`/*'/*"/**/(/* */oNcliCk=alert() )//%0D%0A%0d%0a//</stYle/</titLe/

\\x3csVg/

3. Also reflected in inline JavaScript: var user = '[USERNAME]'; 4. Break out of string context and execute arbitrary code [3] User-Agent Header XSS (Stored): Location: HTTP Header logged to admin panel Persistence: Stored in database, executed on admin access Impact: Administrative account compromise Storage Duration: Indefinite until log cleared Attack Scenario: - Attacker sends malicious User-Agent during site access - Header value stored in access logs database - Admin views logs via dashboard at ${target}/admin/logs - XSS payload executes in admin browser context - Attacker can steal admin session tokens, create new accounts, modify settings Attack Vectors & Exploitation: ──────────────────────────────────────────────────────────────────────────────── Session Hijacking: Keylogging: Phishing Overlay: Cryptocurrency Mining: Browser Exploitation Framework (BeEF) Hook: REAL-WORLD IMPACT ASSESSMENT: ──────────────────────────────────────────────────────────────────────────────── Confidentiality Impact: HIGH - All user session data can be stolen - Private messages and personal information exposed - Payment information at risk if stored client-side - Admin credentials vulnerable via stored XSS Integrity Impact: HIGH - Attackers can modify page content arbitrarily - Fake forms can be injected for credential harvesting - Banking/payment pages can be overlaid with phishing content - User accounts can be compromised and used for further attacks Availability Impact: MEDIUM - Defacement possible by modifying DOM - Redirect loops can deny service to legitimate users - Resource-intensive scripts can cause browser crashes Financial Impact: - PCI DSS violation if payment data compromised ($10,000-$500,000 per incident) - GDPR fines up to 4% annual turnover if EU citizen data affected - Average data breach cost: $4.35 million (IBM 2023) - Remediation costs: $50,000-$200,000 for full security audit and fixes - Reputational damage and customer loss Legal/Compliance Impact: - Violation of OWASP Top 10 2021 (A03:2021 – Injection) - Non-compliance with PCI DSS Requirement 6.5.7 - Breach of SOC 2 controls - GDPR Article 32 - Security of processing violation`, solution: `COMPREHENSIVE REMEDIATION STRATEGY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PHASE 1: IMMEDIATE EMERGENCY RESPONSE (Within 24 hours) ──────────────────────────────────────────────────────────────────────────────── 1. Incident Response: □ Activate security incident response team □ Document all vulnerable endpoints and parameters □ Assess scope of potential data breach □ Notify legal team and prepare for disclosure obligations □ Begin forensic log analysis for exploitation attempts 2. Temporary Mitigation (Deploy immediately via WAF): ModSecurity Rules: SecRule ARGS "@rx 100) { throw new Error('Input too long'); } return input; } \`\`\` Server-Side Validation Rules: - Maximum input length: 100-500 characters depending on field - Character whitelist: Only allow necessary characters - Reject any input containing: <, >, ", ', /, \\, javascript:, data:, vbscript: - Validate against expected format (email, phone, etc.) - Implement rate limiting: Max 10 requests/minute per IP 2. Context-Aware Output Encoding: HTML Context Encoding: \`\`\`javascript function encodeHTML(str) { return str.replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"') .replace(/'/g, ''') .replace(/\\//g, '/'); } \`\`\` JavaScript Context Encoding: \`\`\`javascript function encodeJS(str) { return str.replace(/\\\\/g, '\\\\\\\\') .replace(/'/g, "\\\\'") .replace(/"/g, '\\\\"') .replace(/\\n/g, '\\\\n') .replace(/\\r/g, '\\\\r') .replace(/\\t/g, '\\\\t') .replace(/\\f/g, '\\\\f') .replace(//g, '\\\\x3E'); } \`\`\` URL Context Encoding: \`\`\`javascript function encodeURL(str) { return encodeURIComponent(str) .replace(/[!'()*]/g, (c) => '%' + c.charCodeAt(0).toString(16)); } \`\`\` CSS Context Encoding: \`\`\`javascript function encodeCSS(str) { return str.replace(/[^a-zA-Z0-9]/g, (c) => { const hex = c.charCodeAt(0).toString(16); return '\\\\' + ('000000' + hex).slice(-6); }); } \`\`\` 3. Framework-Specific Implementation: React.js: \`\`\`jsx // CORRECT: React automatically escapes by default const SafeComponent = ({ userInput }) => (

{userInput}

// Automatically escaped ); // AVOID: dangerouslySetInnerHTML unless absolutely necessary // If required, sanitize with DOMPurify first import DOMPurify from 'dompurify'; const SanitizedHTML = ({ html }) => (

); \`\`\` Angular: \`\`\`typescript // Use Angular's built-in sanitization import { DomSanitizer } from '@angular/platform-browser'; constructor(private sanitizer: DomSanitizer) {} sanitizeInput(input: string) { return this.sanitizer.sanitize(SecurityContext.HTML, input); } \`\`\` Vue.js: \`\`\`vue

\`\`\` PHP: \`\`\`php \`\`\` 4. Content Security Policy (Production): \`\`\` Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-{random-per-request}' 'strict-dynamic'; style-src 'self' 'nonce-{random-per-request}'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https://api.example.com; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; require-trusted-types-for 'script'; \`\`\` Implementation: - Generate unique nonce per request - Use 'strict-dynamic' to allow dynamically loaded scripts from trusted sources - Enable CSP reporting: report-uri /csp-report - Monitor violations and adjust policy as needed 5. HTTP Security Headers (Complete Set): \`\`\` # Prevent XSS attacks X-XSS-Protection: 1; mode=block # Prevent clickjacking X-Frame-Options: DENY # Prevent MIME sniffing X-Content-Type-Options: nosniff # Enforce HTTPS Strict-Transport-Security: max-age=31536000; includeSubDomains; preload # Control referrer information Referrer-Policy: strict-origin-when-cross-origin # Permissions policy Permissions-Policy: geolocation=(), microphone=(), camera=() \`\`\` PHASE 3: TESTING & VERIFICATION (Week 2-3) ──────────────────────────────────────────────────────────────────────────────── 1. Automated Security Testing: CI/CD Integration: \`\`\`yaml # Add to .github/workflows/security.yml security-scan: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: OWASP ZAP Scan uses: zaproxy/action-full-scan@v0.4.0 with: target: https://staging.example.com rules_file_name: '.zap/rules.tsv' fail_action: true - name: Dependency Check run: npm audit --audit-level=moderate \`\`\` 2. Manual Penetration Testing Checklist: □ Test all previously vulnerable parameters □ Test with various XSS payloads (polyglots, event handlers, encoded) □ Test in different browsers (Chrome, Firefox, Safari, Edge) □ Test with different CSP bypass techniques □ Verify WAF rules are functioning correctly □ Test for DOM-based XSS in JavaScript code □ Test for mutation XSS (mXSS) in WYSIWYG editors □ Verify encoding in all contexts (HTML, JS, URL, CSS) 3. Security Testing Tools: - OWASP ZAP (weekly automated scans) - Burp Suite Professional (manual testing) - XSStrike (specialized XSS scanner) - DOMinator (DOM-based XSS detection) - Acunetix or Netsparker (enterprise scanning) PHASE 4: LONG-TERM SECURITY POSTURE (Ongoing) ──────────────────────────────────────────────────────────────────────────────── 1. Security Development Lifecycle: - Security requirements in user stories - Threat modeling for new features - Secure code review checklist - Security champion program - Regular security training for developers 2. Continuous Monitoring: - Deploy WAF with logging (AWS WAF, Cloudflare, Akamai) - Implement SIEM for security event correlation - Set up alerts for suspicious patterns - Regular log analysis and threat hunting - Monitor CSP violation reports 3. Dependency Management: - Keep all libraries and frameworks updated - Subscribe to security advisories (npm, GitHub, OWASP) - Automated dependency scanning (Snyk, Dependabot) - Review third-party scripts and remove unnecessary ones 4. Bug Bounty Program: - Launch public bug bounty on HackerOne or Bugcrowd - Rewards: $500-$5,000 for XSS vulnerabilities - Clear scope and rules of engagement - Fast response time (<48 hours for triage) 5. Compliance & Auditing: - Annual penetration test by third party - SOC 2 Type II audit - PCI DSS assessment (if handling payments) - Regular internal security audits ESTIMATED REMEDIATION TIMELINE: ──────────────────────────────────────────────────────────────────────────────── • Emergency WAF rules: 4 hours • Code fixes for critical parameters: 3-5 days • Complete remediation: 2-3 weeks • Testing and verification: 1 week • Total: 3-4 weeks for full remediation ESTIMATED COSTS: ──────────────────────────────────────────────────────────────────────────────── • Developer time (2 developers, 3 weeks): $30,000-$50,000 • Security consultant/penetration tester: $15,000-$25,000 • WAF subscription (annual): $5,000-$20,000 • Security training: $2,000-$5,000 • Total estimated cost: $52,000-$100,000 SUCCESS CRITERIA: ──────────────────────────────────────────────────────────────────────────────── ✓ Zero XSS vulnerabilities in follow-up scan ✓ CSP implemented with zero violations in production ✓ All automated security tests passing in CI/CD ✓ Clean penetration test report from third party ✓ Security training completed by all developers ✓ Incident response plan updated and tested`, evidence: `VULNERABILITY EVIDENCE & PROOF OF CONCEPT ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ [POC-1] Basic Reflected XSS in Search Parameter: Request: GET /search?q= HTTP/1.1 Host: ${target} User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Accept: text/html,application/xhtml+xml Cookie: session=abc123xyz789 Response (Vulnerable): HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Search Results

Search Results for:

Impact: JavaScript executes immediately, popup shows "${target}" [POC-2] Attribute-Based XSS with Event Handler: Request: GET /search?q=" onmouseover="alert(1) HTTP/1.1 Response (Vulnerable): ^^^^^^^^^^^^^^^^^^^^^^ Breaks out of attribute, injects event handler Impact: Alert fires when user hovers over input field [POC-3] JavaScript Context XSS: Request: GET /profile?username='; alert(1); var x=' HTTP/1.1 Response (Vulnerable): Impact: Arbitrary JavaScript execution in script context [POC-4] Stored XSS via User-Agent Header: Request: GET / HTTP/1.1 Host: ${target} User-Agent:

Stored in database access logs. Admin views logs at /admin/logs:

Impact: Persistent XSS affecting all administrators [POC-5] DOM-Based XSS: URL: ${target}/dashboard#

Vulnerable JavaScript: Impact: XSS via URL fragment without server interaction [POC-6] Filter Bypass Techniques: Bypassing Basic // Case variation // Encoding Event Handler Injection:

Protocol Handlers: Click

192.168.1.100

2024-01-15 10:30:45

HISTORY

METASPLOIT FRAMEWORK

BURP SUITE PROFESSIONAL

SQLMAP

WIRESHARK

THC HYDRA

NIKTO

GOBUSTER

NESSUS

AIRCRACK-NG

{title}

FOOTPRINTING

{footprintData.domain}

RESEARCH TOOLS

{result.title}

AI Video Generator

Search Results for:

HISTORY

METASPLOIT FRAMEWORK

BURP SUITE PROFESSIONAL

SQLMAP

WIRESHARK

THC HYDRA

NIKTO

GOBUSTER

NESSUS

AIRCRACK-NG

{title}

FOOTPRINTING

{footprintData.domain}

RESEARCH TOOLS

{result.title}

AI Video Generator

Search Results for: alert(document.domain)

Search Results for: