{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "deployment-card-base",
  "type": "registry:component",
  "title": "Deployment Card (base)",
  "description": "Theme-ready base variant of Deployment card showing environment, progress, logs, duration, and commit details..",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/watermelon/deployment-card.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { \n  Maximize2, X, Globe, GitBranch, GitCommit, Play, \n  CheckCircle2, MoreVertical, Terminal, Search, Box, RotateCw,\n  Copy, History, Settings, ShieldCheck, AlertCircle\n} from 'lucide-react';\nimport { PiShareFatLight, PiCheckBold } from 'react-icons/pi'; \nimport { LuClock } from 'react-icons/lu';\nimport { TbArrowUpRight, TbCircleDashed } from 'react-icons/tb';\nimport { BsCalendar4Week } from 'react-icons/bs';\nimport { HiMiniCalendar } from 'react-icons/hi2';\nimport { cn } from \"@/lib/utils\";\n\n// --- Interfaces  ---\nexport interface DeploymentStep {\n  id: string;\n  label: string;\n  status: 'success' | 'warning' | 'error' | 'loading' | 'pending';\n  progress: number;\n  duration: string;\n  metrics?: { files: number; functions: number; assets: number; size: string; };\n  errors?: number;\n  warnings?: number;\n}\n\nexport interface DeploymentData {\n  id: string;\n  environment: string;\n  status: 'Ready' | 'Building' | 'Error';\n  createdTime: string;\n  createdBy: { name: string; avatar: string; };\n  duration: string;\n  lastActive: string;\n  domains: string[];\n  branch: string;\n  commitMessage: string;\n  commitHash: string;\n  steps: DeploymentStep[];\n}\n\n// --- Components ---\n\nconst SegmentedProgress = ({ progress, status, count = 22 }: { progress: number, status: string, count?: number }) => {\n  const activeSegments = Math.floor(progress * count);\n  return (\n    <div className=\"flex gap-0.5\">\n      {Array.from({ length: count }).map((_, i) => {\n        const isActive = i < activeSegments;\n        let color = 'bg-muted/80'; \n        if (isActive) {\n          color = status === 'error' ? 'bg-destructive' : status === 'warning' ? 'bg-chart-1' : 'bg-primary';\n        }\n        return <div key={i} className={cn(\"w-1 h-2.5 rounded-[1px] transition-colors duration-150\", color)} />;\n      })}\n    </div>\n  );\n};\n\nconst MetricTag = ({ label, value }: { label: string, value: string | number }) => (\n  <div className=\"flex items-center gap-2 bg-muted/60 border border-border px-2 py-1 rounded-md\">\n    <span className=\"text-muted-foreground font-black text-[9px] uppercase border border-border w-4 h-4 flex items-center justify-center rounded-sm\">{label}</span>\n    <span className=\"text-foreground font-bold text-[10px]\">{value}</span>\n  </div>\n);\n\n// --- Helper ---\nconst formatDuration = (seconds: number) => {\n  const m = Math.floor(seconds / 60);\n  const s = seconds % 60;\n  return `${m}m ${s}s`;\n};\n\nexport const DeploymentCard: React.FC<{ data: DeploymentData }> = ({ data: initialData }) => {\n\n  const [data, setData] = useState(initialData);\n  const [isCopied, setIsCopied] = useState(false);\n  const [elapsedSeconds, setElapsedSeconds] = useState(0); \n  const [activePopover, setActivePopover] = useState<'more' | 'terminal' | 'search' | null>(null);\n  const [isInvestigating, setIsInvestigating] = useState(false);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  \n  const moreRef = useRef<HTMLDivElement>(null);\n  const terminalRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      const isOutsideMore = moreRef.current && !moreRef.current.contains(event.target as Node);\n      const isOutsideTerminal = terminalRef.current && !terminalRef.current.contains(event.target as Node);\n      const isOutsideSearch = searchRef.current && !searchRef.current.contains(event.target as Node);\n\n      if (isOutsideMore && isOutsideTerminal && isOutsideSearch) {\n        setActivePopover(null);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (data.status !== 'Building') return;\n\n    const interval = setInterval(() => {\n      setElapsedSeconds(prev => prev + 1);\n\n      setData(prevData => {\n        const newSteps = [...prevData.steps];\n        const activeStepIndex = newSteps.findIndex(s => s.status === 'loading' || (s.status === 'pending' && !s.metrics));\n\n        if (activeStepIndex !== -1) {\n          const step = { ...newSteps[activeStepIndex] };\n          if (step.progress < 1) {\n            step.status = 'loading';\n            step.progress += 0.05;\n            step.duration = `${Math.floor(step.progress * 10)}s`; \n          } else {\n            step.progress = 1;\n            step.status = 'success';\n          }\n          newSteps[activeStepIndex] = step;\n\n          const allDone = newSteps.every(s => s.status === 'success' || s.metrics);\n          \n          return {\n            ...prevData,\n            steps: newSteps,\n            duration: formatDuration(elapsedSeconds),\n            status: allDone ? 'Ready' : 'Building'\n          };\n        }\n        return prevData;\n      });\n    }, 200); \n\n    return () => clearInterval(interval);\n  }, [data.status, elapsedSeconds]);\n\n  const handleShare = () => {\n    navigator.clipboard.writeText(window.location.href);\n    setIsCopied(true);\n    setTimeout(() => setIsCopied(false), 2000);\n  };\n\n  const handleVisit = () => {\n    window.open(`https://${data.domains[0]}`, '_blank');\n  };\n\n  const resetSimulation = () => {\n     setData(initialData);\n     setElapsedSeconds(0);\n  };\n\n  const handleInvestigate = () => {\n    setIsInvestigating(true);\n    setTimeout(() => {\n      setIsInvestigating(false);\n      setData(prev => ({\n        ...prev,\n        steps: prev.steps.map(s => ({ ...s, status: s.status === 'error' ? 'success' : s.status }))\n      }));\n    }, 3000);\n  };\n\n  const handleRunSummary = (_id: string) => {\n     // Functional placeholder\n  };\n\n  return (\n    <div className=\"relative px-2 sm:px-0\">\n      <motion.div \n        initial={{ opacity: 0, y: 10 }}\n        animate={{ opacity: 1, y: 0 }}\n        className=\"theme-injected w-full sm:max-w-140 mx-auto bg-card rounded-xl border border-border overflow-hidden shadow-lg font-sans antialiased\"\n      >\n        {/* Header */}\n        <div className=\"flex justify-between items-center px-4 sm:px-5 py-3 border-b border-border\">\n          <span className=\"text-muted-foreground text-[11px] font-bold tracking-tight uppercase\">Deployment Card</span>\n          <div className=\"flex items-center gap-3 text-muted-foreground\">\n            <RotateCw size={13} onClick={resetSimulation} className=\"hover:text-foreground cursor-pointer transition-colors active:rotate-180 duration-500\"/>\n            <Maximize2 size={13} className=\"hover:text-foreground cursor-pointer transition-colors\" />\n            <X size={14} className=\"hover:text-foreground cursor-pointer transition-colors\" />\n          </div>\n        </div>\n\n        <div className=\"p-4 sm:p-6 space-y-6\">\n          {/* Title Area */}\n          <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0\">\n            <h1 className=\"text-foreground text-3xl font-medium tracking-tight break-all\">{data.id}</h1>\n            <div className=\"flex gap-2 w-full sm:w-auto\">\n              {/* Functional: Share Button */}\n              <button \n                onClick={handleShare}\n                className=\"flex-1 sm:flex-none justify-center py-2 gap-2 px-3 text-[12px] rounded-md flex items-center border border-border text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-all active:scale-95\"\n              >\n                {isCopied ? <PiCheckBold size={16} className=\"text-primary\"/> : <PiShareFatLight size={16} />}\n                {isCopied ? \"Copied\" : \"Share\"}\n              </button>\n              <button \n                onClick={handleVisit}\n                className=\"flex-1 sm:flex-none justify-center flex items-center py-2 gap-1 px-3 text-[12px] rounded-md bg-primary hover:opacity-90 text-primary-foreground font-semibold transition-transform active:scale-95\"\n              >\n                <TbArrowUpRight size={16} /> Visit\n              </button>\n            </div>\n          </div>\n\n          {/* Info Grid */}\n          <div className=\"flex flex-col md:flex-row gap-6 sm:gap-8\">\n            <div className=\"relative w-full md:w-64 aspect-16/10 rounded-lg border border-border overflow-hidden bg-muted group cursor-crosshair\">\n              <img title='site preview' src=\"https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=80&w=400\" className=\"w-full h-full object-cover opacity-60 grayscale group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-700\" />\n              <div className=\"absolute inset-0 p-4 flex flex-col justify-end sm:justify-center bg-linear-to-t from-black/60 to-transparent sm:from-transparent\">\n                 <div className={cn(\"w-8 h-1 mb-1 rounded-md transition-colors duration-500\", data.status === 'Ready' ? 'bg-primary' : 'bg-chart-1 animate-pulse')} />\n                 <div className=\"text-white font-bold text-sm leading-tight\">The Coordination<br/>Layer On All Chains</div>\n              </div>\n            </div>\n\n            <div className=\"flex-1 grid grid-cols-2 gap-x-4 gap-y-3 text-[11px] items-center\">\n              <span className=\"text-muted-foreground text-[12px] font-medium tracking-wider flex items-center gap-2\"><HiMiniCalendar/> Env</span>\n              <span className=\"text-foreground font-medium ml-2\">{data.environment}</span>\n              \n              <span className=\"text-muted-foreground text-[12px] font-medium tracking-wider flex items-center gap-2\"><TbCircleDashed/> Status</span>\n              <div className=\"flex items-center gap-2 ml-2\">\n                {/* Dynamic Status Display */}\n                <span className={cn(\n                  \"font-bold px-2 py-1 rounded-md flex items-center gap-2 border transition-colors duration-300\",\n                  data.status === 'Ready' \n                    ? \"text-primary bg-primary/10 border-primary/30\" \n                    : \"text-chart-1 bg-chart-1/10 border-chart-1/30\"\n                )}>\n                  <div className={cn(\"w-2 h-2 rounded-full animate-pulse\", data.status === 'Ready' ? \"bg-primary\" : \"bg-chart-1\")} />\n                  {data.status}\n                </span>\n              </div>\n\n              <span className=\"text-muted-foreground text-[12px] font-medium tracking-wider flex items-center gap-2\"><BsCalendar4Week/> Created</span>\n              <span className=\"text-muted-foreground ml-2 flex flex-wrap items-center gap-1\">\n                {data.createdTime} by \n                <span className=\"bg-muted px-2 py-1 border-border border rounded-md text-[9px] text-muted-foreground font-black text-nowrap uppercase\">{data.createdBy.name}</span>\n              </span>\n\n              <span className=\"text-muted-foreground text-[12px] font-medium tracking-wider flex items-center gap-2\"><LuClock/> Duration</span>\n              <div className=\"flex flex-wrap items-center gap-3 ml-2\">\n                {/* Dynamic Duration */}\n                <span className=\"text-muted-foreground font-mono\">{data.duration}</span>\n                <span className=\"bg-muted px-2 py-1 border-border border rounded-md text-[9px] text-muted-foreground font-black uppercase\">{data.lastActive}</span>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"border-t border-dashed border-border my-2\" />\n\n          {/* Domain & Source Section  */}\n          <div className=\"grid grid-cols-1 gap-4\">\n            <div className=\"flex items-start sm:items-center justify-between gap-2\">\n              <div className=\"flex flex-wrap items-center gap-2 text-[11px]\">\n                <span className=\"text-muted-foreground font-bold uppercase w-14 shrink-0\">Domains</span>\n                <div className=\"flex items-center gap-2 px-3 py-1 bg-muted/40 border border-border rounded-md text-foreground hover:bg-accent cursor-pointer transition-colors active:scale-95\" onClick={() => window.open(`https://${data.domains[0]}`, '_blank')}>\n                  <Globe size={12} /> {data.domains[0]} <span className=\"text-muted-foreground\">+33</span>\n                </div>\n                <div className=\"hidden sm:block px-3 py-1 bg-muted/40 border border-border rounded-md text-muted-foreground font-mono\">main-as..8z</div>\n              </div>\n              <CheckCircle2 size={16} className=\"text-primary shrink-0 mt-1 sm:mt-0\" />\n            </div>\n\n            <div className=\"flex items-start sm:items-center justify-between gap-2\">\n              <div className=\"flex flex-wrap items-center gap-2 text-[11px]\">\n                <span className=\"text-muted-foreground font-bold uppercase w-14 shrink-0\">Source</span>\n                <div className=\"flex items-center gap-2 px-2 py-1 bg-foreground border border-border rounded-md text-background font-bold text-[10px] cursor-pointer hover:opacity-80 active:scale-95\">\n                  <GitBranch size={12} /> {data.branch}\n                </div>\n                <div className=\"flex items-center gap-3 sm:ml-2 text-muted-foreground\">\n                  <span className=\"flex items-center gap-1\"><GitCommit size={14} /> 388</span>\n                  <span className=\"flex items-center gap-1\"><Box size={14} /> 90</span>\n                  <span className=\"font-black tracking-tighter cursor-help\">...</span>\n                </div>\n              </div>\n              <CheckCircle2 size={16} className=\"text-primary shrink-0 mt-1 sm:mt-0\" />\n            </div>\n          </div>\n\n          {/* Status List */}\n          <div className=\"space-y-3\">\n            <h3 className=\"text-foreground text-sm font-medium\">Deployment Status</h3>\n            {data.steps.map((step) => (\n              <div key={step.id} className=\"flex flex-col sm:flex-row sm:items-center justify-between p-3 sm:p-2 bg-muted/40 border border-border rounded-lg gap-3 sm:gap-0\">\n                \n                <div className=\"flex justify-between items-center w-full sm:w-auto\">\n                  <span className={cn(\"text-[12px] font-medium w-auto sm:w-32 shrink-0 transition-colors\", step.status === 'loading' ? 'text-foreground' : 'text-muted-foreground')}>{step.label}</span>\n                  <div className=\"flex sm:hidden items-center gap-3\">\n                      <span className=\"text-muted-foreground text-[11px]\">{step.duration}</span>\n                      <CheckCircle2 size={16} className={cn(step.status === 'error' ? 'text-destructive' : step.status === 'success' ? 'text-primary' : 'text-muted-foreground')} />\n                  </div>\n                </div>\n\n                <div className=\"flex-1 flex items-center gap-4 sm:ml-1 w-full sm:w-auto\">\n                  {step.metrics ? (\n                    <div className=\"flex gap-2 w-full sm:w-auto\">\n                      <MetricTag label=\"F\" value={step.metrics.files} />\n                      <MetricTag label=\"S\" value={step.metrics.size} />\n                    </div>\n                  ) : (\n                    <div className=\"flex items-center gap-3 w-full sm:w-auto\">\n                      <SegmentedProgress progress={step.progress} status={step.status} />\n                      {step.id === 'build' && (\n                        <button \n                          onClick={() => handleRunSummary(step.id)}\n                          className=\"text-[9px] font-bold text-muted-foreground border border-border px-2 py-1 rounded-md flex items-center gap-1 hover:bg-accent transition-colors ml-auto sm:ml-0 active:scale-95\"\n                        >\n                          <Play size={8} fill=\"currentColor\"/> <span className=\"hidden xs:inline\">RUN SUMMARY</span>\n                        </button>\n                      )}\n                    </div>\n                  )}\n                </div>\n                \n                <div className=\"hidden sm:flex items-center gap-3 shrink-0 ml-4\">\n                  <span className=\"text-muted-foreground text-[11px]\">{step.duration}</span>\n                  <CheckCircle2 size={16} className={cn(\n                    step.status === 'error' ? 'text-destructive' : \n                    step.status === 'success' ? 'text-primary' : \n                    step.status === 'loading' ? 'text-chart-1 animate-pulse' :\n                    'text-muted-foreground'\n                  )} />\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Footer */}\n        <div className=\"bg-muted/40 px-4 sm:px-6 py-4 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4 relative\">\n          <div className=\"flex gap-4 text-muted-foreground w-full sm:w-auto justify-center sm:justify-start\">\n            <MoreVertical \n              size={16} \n              className={cn(\"hover:text-foreground cursor-pointer transition-colors active:scale-90\", activePopover === 'more' ? \"text-primary\" : \"\")} \n              onClick={() => setActivePopover(activePopover === 'more' ? null : 'more')}\n            />\n            <Terminal \n              size={15} \n              className={cn(\"hover:text-foreground cursor-pointer transition-colors active:scale-90\", activePopover === 'terminal' ? \"text-primary\" : \"\")} \n              onClick={() => setActivePopover(activePopover === 'terminal' ? null : 'terminal')}\n            />\n            <Search \n              size={15} \n              className={cn(\"hover:text-foreground cursor-pointer transition-colors active:scale-90\", activePopover === 'search' ? \"text-primary\" : \"\")} \n              onClick={() => setActivePopover(activePopover === 'search' ? null : 'search')}\n            />\n          </div>\n\n          <div className=\"flex flex-col sm:flex-row items-center gap-3 sm:gap-5 w-full sm:w-auto\">\n            {(data.steps.some(s => s.status === 'error' || s.status === 'warning')) && (\n              <div className=\"text-[9px] font-bold tracking-widest uppercase text-center sm:text-left flex items-center gap-1\">\n                <span className=\"text-destructive underline decoration-destructive/30\">1</span>\n                <span className=\"text-muted-foreground font-medium\"> Error, </span>\n                <span className=\"text-chart-1 underline decoration-chart-1/30\">3</span>\n                <span className=\"text-muted-foreground font-medium\"> Warnings detected</span>\n                <AlertCircle size={10} className=\"text-destructive animate-pulse ml-1\" />\n              </div>\n            )}\n            <button\n              onClick={handleInvestigate}\n              disabled={isInvestigating}\n              className={cn(\n                \"w-full sm:w-auto px-4 py-2 rounded-md border border-border text-background text-[11px] font-medium transition-all relative overflow-hidden active:scale-95 disabled:opacity-70\",\n                isInvestigating ? \"bg-muted-foreground\" : \"bg-foreground\"\n              )}\n            >\n              <AnimatePresence mode=\"wait\">\n                {isInvestigating ? (\n                  <motion.div key=\"inv\" initial={{ y: 20 }} animate={{ y: 0 }} exit={{ y: -20 }} className=\"flex items-center gap-2\">\n                    <RotateCw size={12} className=\"animate-spin\" /> Analyzing...\n                  </motion.div>\n                ) : (\n                  <motion.span key=\"invest\" initial={{ y: 20 }} animate={{ y: 0 }} exit={{ y: -20 }}>\n                    Investigate\n                  </motion.span>\n                )}\n              </AnimatePresence>\n              {isInvestigating && (\n                <motion.div \n                  initial={{ x: \"-100%\" }}\n                  animate={{ x: \"100%\" }}\n                  transition={{ repeat: Infinity, duration: 1, ease: \"linear\" }}\n                  className=\"absolute inset-0 bg-white/10\"\n                />\n              )}\n            </button>\n          </div>\n\n          {/* Global Popover Container (Mobile-Optimized) */}\n          <AnimatePresence>\n            {activePopover === 'more' && (\n              <motion.div \n                ref={moreRef}\n                initial={{ opacity: 0, y: 10, scale: 0.95 }}\n                animate={{ opacity: 1, y: -10 }}\n                exit={{ opacity: 0, y: 10, scale: 0.95 }}\n                className=\"absolute bottom-full left-4 right-4 sm:left-6 sm:right-auto mb-2 w-auto sm:w-48 bg-card border border-border rounded-xl shadow-2xl p-1 z-50 overflow-hidden\"\n              >\n                {[\n                  { icon: Copy, label: \"Copy Deployment ID\", action: () => { /* no-op */ } },\n                  { icon: History, label: \"View History\", action: () => { /* no-op */ } },\n                  { icon: ShieldCheck, label: \"Security Audit\", action: () => { /* no-op */ } },\n                  { icon: Settings, label: \"Configure\", action: () => { /* no-op */ } },\n                ].map((item, i) => (\n                  <button \n                    key={i}\n                    onClick={() => { item.action(); setActivePopover(null); }}\n                    className=\"w-full flex items-center gap-2 px-3 py-2 text-[11px] text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg transition-colors\"\n                  >\n                    <item.icon size={12} /> {item.label}\n                  </button>\n                ))}\n              </motion.div>\n            )}\n\n            {activePopover === 'terminal' && (\n              <motion.div \n                ref={terminalRef}\n                initial={{ opacity: 0, y: 10, scale: 0.95 }}\n                animate={{ opacity: 1, y: -10 }}\n                exit={{ opacity: 0, y: 10, scale: 0.95 }}\n                className=\"absolute bottom-full left-4 right-4 sm:left-6 sm:right-auto mb-2 w-auto sm:w-80 bg-white dark:bg-[#0D0D0E] border border-border dark:border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden transition-colors duration-300\"\n              >\n                <div className=\"flex items-center justify-between px-3 py-2 border-b border-border bg-muted/30 dark:bg-white/5\">\n                   <span className=\"text-[10px] font-bold text-muted-foreground uppercase tracking-widest flex items-center gap-2\">\n                     <Play size={10} className=\"text-primary fill-primary/20\"/> Live Build Logs\n                   </span>\n                   <div className=\"flex gap-1.5\">\n                     <div className=\"w-1.5 h-1.5 rounded-full bg-border dark:bg-white/10\" />\n                     <div className=\"w-1.5 h-1.5 rounded-full bg-border dark:bg-white/10\" />\n                     <div className=\"w-1.5 h-1.5 rounded-full bg-border dark:bg-white/10\" />\n                   </div>\n                </div>\n                <div className=\"p-3 font-mono text-[10px] space-y-2 h-44 overflow-y-auto no-scrollbar\">\n                   <p className=\"text-muted-foreground/60\">[{new Date().toLocaleTimeString()}] Fetching deployment metadata...</p>\n                   <p className=\"text-emerald-600 dark:text-emerald-400 font-medium\">✔ Repository initialized</p>\n                   <p className=\"text-emerald-600 dark:text-emerald-400 font-medium\">✔ Environment variables decrypted</p>\n                   <p className=\"text-muted-foreground/60\">[{new Date().toLocaleTimeString()}] Running build script...</p>\n                   <p className=\"text-foreground/80 italic animate-pulse\">Building optimized production bundle...</p>\n                   <p className=\"text-amber-600 dark:text-amber-400 bg-amber-500/10 px-1 rounded-sm\">Warning: Large assets detected in /public</p>\n                   <p className=\"text-emerald-600 dark:text-emerald-400 font-medium\">✔ Static components pre-rendered</p>\n                   <p className=\"text-primary font-bold\">Ready for deployment at axiom.xyz</p>\n                </div>\n              </motion.div>\n            )}\n\n            {activePopover === 'search' && (\n              <motion.div \n                ref={searchRef}\n                initial={{ opacity: 0, y: 10, scale: 0.95 }}\n                animate={{ opacity: 1, y: -10 }}\n                exit={{ opacity: 0, y: 10, scale: 0.95 }}\n                className=\"absolute bottom-full left-4 right-4 sm:left-24 sm:right-auto mb-2 w-auto sm:w-64 bg-card border border-border rounded-xl shadow-2xl p-2 z-50 flex items-center gap-2\"\n              >\n                <div className=\"p-1 text-muted-foreground\"><Search size={14}/></div>\n                <input \n                  type=\"text\"\n                  autoFocus\n                  placeholder=\"Search deployment context...\"\n                  value={searchQuery}\n                  onChange={(e) => setSearchQuery(e.target.value)}\n                  className=\"bg-transparent border-none outline-none text-[11px] text-foreground placeholder:text-muted-foreground flex-1 pr-4\"\n                  onKeyDown={(e) => e.key === 'Enter' && (setActivePopover(null))}\n                />\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      </motion.div>\n    </div>\n  );\n};"
    }
  ]
}