yvg/pounce
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Redesign AnalyzePanel + VisionSection to match Hunt page style
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
Details
CI / Frontend Build (push) Has been cancelled
Details
CI / Backend Lint (push) Has been cancelled
Details
CI / Backend Tests (push) Has been cancelled
Details
CI / Docker Build (push) Has been cancelled
Details
CI / Security Scan (push) Has been cancelled
Details
Deploy / Build & Push Images (push) Has been cancelled
Details
Deploy / Deploy to Server (push) Has been cancelled
Details
Deploy / Notify (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Yves Gugger
2025-12-17 17:19:28 +01:00
parent 7c2d7d0a0e
commit f4c355b2cf
2 changed files with 478 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

378
frontend/src/components/analyze/AnalyzePanel.tsx
View File

@ -14,15 +14,17 @@ import {
Check,
Zap,
Globe,
Calendar,
Link2,
Radio,
Eye,
ChevronDown,
ChevronUp,
ChevronRight,
CheckCircle2,
XCircle,
Sparkles,
Info,
Clock,
Link2,
Search,
Eye,
Filter,
} from 'lucide-react'
import { api } from '@/lib/api'
import { useAnalyzePanelStore } from '@/lib/analyze-store'
@ -36,47 +38,66 @@ import { VisionSection } from '@/components/analyze/VisionSection'
function getStatusColor(status: string) {
switch (status) {
case 'pass':
return { bg: 'bg-accent/20', text: 'text-accent', border: 'border-accent/40', icon: CheckCircle2 }
return { bg: 'bg-accent/10', text: 'text-accent', border: 'border-accent/30', icon: CheckCircle2 }
case 'warn':
return { bg: 'bg-amber-400/20', text: 'text-amber-300', border: 'border-amber-400/40', icon: AlertTriangle }
return { bg: 'bg-amber-400/10', text: 'text-amber-400', border: 'border-amber-400/30', icon: AlertTriangle }
case 'fail':
return { bg: 'bg-red-500/20', text: 'text-red-400', border: 'border-red-500/40', icon: XCircle }
return { bg: 'bg-rose-500/10', text: 'text-rose-400', border: 'border-rose-500/30', icon: XCircle }
default:
return { bg: 'bg-white/10', text: 'text-white/50', border: 'border-white/20', icon: null }
return { bg: 'bg-white/5', text: 'text-white/40', border: 'border-white/10', icon: null }
}
}
function getSectionIcon(key: string) {
function getSectionConfig(key: string) {
switch (key) {
case 'authority':
return Shield
case 'market':
return TrendingUp
case 'risk':
return AlertTriangle
case 'value':
return DollarSign
case 'vision':
return Sparkles
default:
return Globe
return {
icon: Shield,
color: 'text-blue-400',
bg: 'bg-blue-500/10',
border: 'border-blue-500/20',
description: 'Age, backlinks, and trust signals'
}
}
function getSectionColor(key: string) {
switch (key) {
case 'authority':
return { text: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/30' }
case 'market':
return { text: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/30' }
return {
icon: TrendingUp,
color: 'text-emerald-400',
bg: 'bg-emerald-500/10',
border: 'border-emerald-500/20',
description: 'Search volume, CPC, and TLD availability'
}
case 'risk':
return { text: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/30' }
return {
icon: AlertTriangle,
color: 'text-amber-400',
bg: 'bg-amber-500/10',
border: 'border-amber-500/20',
description: 'Trademark, blacklist, and archive checks'
}
case 'value':
return { text: 'text-violet-400', bg: 'bg-violet-500/10', border: 'border-violet-500/30' }
return {
icon: DollarSign,
color: 'text-violet-400',
bg: 'bg-violet-500/10',
border: 'border-violet-500/20',
description: 'Estimated value and comparable sales'
}
case 'vision':
return { text: 'text-accent', bg: 'bg-accent/10', border: 'border-accent/30' }
return {
icon: Sparkles,
color: 'text-accent',
bg: 'bg-accent/10',
border: 'border-accent/20',
description: 'AI-powered business concept and buyer analysis'
}
default:
return { text: 'text-white/60', bg: 'bg-white/5', border: 'border-white/20' }
return {
icon: Globe,
color: 'text-white/50',
bg: 'bg-white/5',
border: 'border-white/10',
description: ''
}
}
}
@ -102,6 +123,24 @@ function isMatrix(item: AnalyzeItem) {
return item.key === 'tld_matrix' && Array.isArray(item.value)
}
function getItemTooltip(key: string): string {
const tooltips: Record<string, string> = {
domain_age: 'How long the domain has been registered. Older = more authority.',
backlinks: 'Number of external websites linking to this domain.',
trust_flow: 'Quality score of backlinks (0-100). Higher = more trusted.',
radio_test: 'How easy is the domain to spell when heard verbally.',
search_volume: 'Monthly Google searches for the main keyword.',
cpc: 'Cost-per-click for ads on this keyword. Higher = more commercial value.',
tld_matrix: 'Availability of this name across popular TLDs.',
trademark: 'Potential trademark conflicts. Clear = safe to use.',
blacklist: 'Whether the domain appears on spam/malware lists.',
archive: 'Wayback Machine history. Shows previous usage.',
estimated_value: 'AI-estimated market value based on comparables.',
comps: 'Similar domains that have sold recently.',
}
return tooltips[key] || ''
}
// ============================================================================
// COMPONENT
// ============================================================================
@ -187,10 +226,12 @@ export function AnalyzePanel() {
.sort((a, b) => order.indexOf(a.key) - order.indexOf(b.key))
.filter((s) => sectionVisibility[s.key] !== false)
// Append VISION (Terminal-only LLM augmentation)
if (sectionVisibility.vision === false) return sorted
// Append VISION section
if (sectionVisibility.vision !== false) {
const visionSection: AnalyzeSection = { key: 'vision', title: 'VISION', items: [] }
return [...sorted, visionSection]
}
return sorted
}, [data, sectionVisibility])
// Calculate overall score
@ -217,28 +258,31 @@ export function AnalyzePanel() {
return (
<div className="fixed inset-0 z-[200]">
{/* Backdrop */}
<div className="absolute inset-0 bg-black/85 backdrop-blur-md" onClick={close} />
<div
className="absolute inset-0 bg-black/90 backdrop-blur-sm"
onClick={close}
/>
{/* Panel - WIDER & MORE READABLE */}
<div className="absolute right-0 top-0 bottom-0 w-full sm:w-[600px] lg:w-[680px] bg-[#0A0A0A] border-l border-white/10 flex flex-col overflow-hidden shadow-2xl">
{/* Panel */}
<div className="absolute right-0 top-0 bottom-0 w-full sm:w-[560px] lg:w-[640px] bg-[#030303] border-l border-white/[0.08] flex flex-col overflow-hidden">
{/* Header */}
<div className="shrink-0 border-b border-white/10 bg-[#050505]">
<div className="shrink-0 border-b border-white/[0.08]">
{/* Top Bar */}
<div className="px-6 py-5 flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-accent/15 border border-accent/30 flex items-center justify-center">
<Shield className="w-6 h-6 text-accent" />
<div className="px-4 py-4 flex items-center justify-between gap-4">
<div className="flex items-center gap-3 min-w-0">
<div className="w-10 h-10 bg-accent/10 border border-accent/20 flex items-center justify-center shrink-0">
<Search className="w-5 h-5 text-accent" />
</div>
<div>
<div className="text-xs font-mono text-accent uppercase tracking-widest mb-1">Domain Analysis</div>
<div className="text-xl font-bold text-white font-mono truncate max-w-[300px]">
<div className="min-w-0">
<div className="text-[10px] font-mono text-accent uppercase tracking-wider">Domain Analysis</div>
<div className="text-lg font-bold text-white font-mono truncate">
{headerDomain}
</div>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5 shrink-0">
<button
onClick={async () => {
const ok = await copyToClipboard(headerDomain)
@ -246,49 +290,55 @@ export function AnalyzePanel() {
setTimeout(() => setCopied(false), 1500)
}}
className={clsx(
"w-10 h-10 flex items-center justify-center border transition-all",
copied ? "border-accent bg-accent/20 text-accent" : "border-white/20 text-white/50 hover:text-white hover:bg-white/10"
"w-9 h-9 flex items-center justify-center border transition-all",
copied
? "border-accent/30 bg-accent/10 text-accent"
: "border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05]"
)}
title="Copy domain"
>
{copied ? <Check className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
</button>
<a
href={`https://${encodeURIComponent(headerDomain)}`}
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 flex items-center justify-center border border-white/20 text-white/50 hover:text-white hover:bg-white/10 transition-colors"
className="w-9 h-9 flex items-center justify-center border border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05] transition-colors"
title="Visit domain"
>
<ExternalLink className="w-5 h-5" />
<ExternalLink className="w-4 h-4" />
</a>
<button
onClick={refresh}
disabled={loading}
className="w-10 h-10 flex items-center justify-center border border-white/20 text-white/50 hover:text-white hover:bg-white/10 transition-colors disabled:opacity-50"
className="w-9 h-9 flex items-center justify-center border border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05] transition-colors disabled:opacity-50"
title="Refresh analysis"
>
<RefreshCw className={clsx('w-5 h-5', loading && 'animate-spin')} />
<RefreshCw className={clsx('w-4 h-4', loading && 'animate-spin')} />
</button>
<button
onClick={close}
className="w-10 h-10 flex items-center justify-center border border-white/20 text-white/50 hover:text-white hover:bg-white/10 transition-colors ml-2"
className="w-9 h-9 flex items-center justify-center border border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05] transition-colors ml-1"
title="Close panel (ESC)"
>
<X className="w-5 h-5" />
<X className="w-4 h-4" />
</button>
</div>
</div>
{/* Score Bar - LARGER */}
{/* Score Bar */}
{overallScore && !loading && (
<div className="px-6 pb-5">
<div className="flex items-center gap-4 p-4 bg-white/[0.03] border border-white/10">
<div className="px-4 pb-4">
<div className="flex items-center gap-4 p-3 bg-white/[0.02] border border-white/[0.08]">
<div className={clsx(
"text-4xl font-bold font-mono",
overallScore.score >= 70 ? "text-accent" : overallScore.score >= 40 ? "text-amber-400" : "text-red-400"
"text-3xl font-bold font-mono",
overallScore.score >= 70 ? "text-accent" : overallScore.score >= 40 ? "text-amber-400" : "text-rose-400"
)}>
{overallScore.score}
</div>
<div className="flex-1">
<div className="text-xs font-mono text-white/50 uppercase tracking-wider mb-2">Overall Score</div>
<div className="h-3 bg-white/10 overflow-hidden flex">
<div className="flex-1 min-w-0">
<div className="text-[10px] font-mono text-white/40 uppercase tracking-wider mb-1.5">Health Score</div>
<div className="h-2 bg-white/[0.05] overflow-hidden flex">
<div
className="h-full bg-accent transition-all"
style={{ width: `${(overallScore.pass / overallScore.total) * 100}%` }}
@ -298,161 +348,193 @@ export function AnalyzePanel() {
style={{ width: `${(overallScore.warn / overallScore.total) * 100}%` }}
/>
<div
className="h-full bg-red-500 transition-all"
className="h-full bg-rose-500 transition-all"
style={{ width: `${(overallScore.fail / overallScore.total) * 100}%` }}
/>
</div>
</div>
<div className="flex flex-col gap-1 text-sm font-mono">
<span className="text-accent flex items-center gap-2"><CheckCircle2 className="w-4 h-4" /> {overallScore.pass}</span>
<span className="text-amber-400 flex items-center gap-2"><AlertTriangle className="w-4 h-4" /> {overallScore.warn}</span>
<span className="text-red-400 flex items-center gap-2"><XCircle className="w-4 h-4" /> {overallScore.fail}</span>
<div className="flex items-center gap-3 text-xs font-mono shrink-0">
<span className="text-accent flex items-center gap-1" title="Passed checks">
<CheckCircle2 className="w-3.5 h-3.5" /> {overallScore.pass}
</span>
<span className="text-amber-400 flex items-center gap-1" title="Warnings">
<AlertTriangle className="w-3.5 h-3.5" /> {overallScore.warn}
</span>
<span className="text-rose-400 flex items-center gap-1" title="Failed checks">
<XCircle className="w-3.5 h-3.5" /> {overallScore.fail}
</span>
</div>
</div>
</div>
)}
{/* Mode Toggle */}
<div className="px-6 pb-4 flex items-center gap-3">
{/* Controls */}
<div className="px-4 pb-3 flex items-center gap-2">
<button
onClick={() => setFastMode(!fastMode)}
className={clsx(
"flex items-center gap-2 px-4 py-2 text-sm font-bold uppercase tracking-wider border transition-all",
"flex items-center gap-1.5 px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider border transition-all",
fastMode
? "border-accent/40 bg-accent/15 text-accent"
: "border-white/20 text-white/50 hover:text-white hover:bg-white/10"
? "border-accent/30 bg-accent/10 text-accent"
: "border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05]"
)}
title="Fast mode uses DNS-only checks for speed"
>
<Zap className="w-4 h-4" />
Fast Mode
<Zap className="w-3.5 h-3.5" />
Fast
</button>
{data?.cached && (
<span className="text-sm font-mono text-white/40 px-3 py-2 border border-white/20 bg-white/5">
⚡ Cached
<span className="text-[10px] font-mono text-white/30 px-2 py-1.5 border border-white/[0.08] bg-white/[0.02] flex items-center gap-1.5">
<Clock className="w-3 h-3" />
Cached
</span>
)}
</div>
</div>
{/* Body - BETTER SPACING */}
{/* Body */}
<div className="flex-1 overflow-y-auto">
{loading ? (
<div className="flex items-center justify-center py-24">
<div className="flex items-center justify-center py-20">
<div className="text-center">
<RefreshCw className="w-10 h-10 text-accent animate-spin mx-auto mb-4" />
<div className="text-base font-mono text-white/50">Analyzing domain...</div>
<RefreshCw className="w-8 h-8 text-accent animate-spin mx-auto mb-3" />
<div className="text-sm font-mono text-white/40">Analyzing domain...</div>
</div>
</div>
) : error ? (
<div className="p-6">
<div className="border border-red-500/30 bg-red-500/10 p-6">
<div className="text-lg font-bold text-red-400 mb-2">Analysis Failed</div>
<div className="text-sm font-mono text-white/60">{error}</div>
<div className="p-4">
<div className="border border-rose-500/30 bg-rose-500/10 p-4">
<div className="text-sm font-bold text-rose-400 mb-1">Analysis Failed</div>
<div className="text-xs font-mono text-white/50">{error}</div>
</div>
</div>
) : !data ? (
<div className="flex items-center justify-center py-24">
<div className="text-base font-mono text-white/40">No data available</div>
<div className="flex items-center justify-center py-20">
<div className="text-sm font-mono text-white/30">No data available</div>
</div>
) : (
<div className="p-6 space-y-4">
<div className="p-4 space-y-3">
{visibleSections.map((section) => {
const SectionIcon = getSectionIcon(section.key)
const sectionStyle = getSectionColor(section.key)
const config = getSectionConfig(section.key)
const SectionIcon = config.icon
const isExpanded = expandedSections[section.key] !== false
return (
<div key={section.key} className={clsx("border overflow-hidden", sectionStyle.border, "bg-[#050505]")}>
{/* Section Header - LARGER */}
<div
key={section.key}
className={clsx(
"border overflow-hidden bg-[#020202]",
config.border
)}
>
{/* Section Header */}
<button
onClick={() => toggleSection(section.key)}
className={clsx(
"w-full px-5 py-4 flex items-center justify-between transition-colors",
sectionStyle.bg, "hover:brightness-110"
"w-full px-4 py-3 flex items-center justify-between transition-colors",
config.bg, "hover:brightness-110"
)}
>
<div className="flex items-center gap-3">
<SectionIcon className={clsx("w-5 h-5", sectionStyle.text)} />
<span className={clsx("text-sm font-bold uppercase tracking-wider", sectionStyle.text)}>
<SectionIcon className={clsx("w-4 h-4", config.color)} />
<div className="text-left">
<span className={clsx("text-xs font-bold uppercase tracking-wider", config.color)}>
{section.title}
</span>
<div className="text-[10px] font-mono text-white/30 mt-0.5">
{config.description}
</div>
</div>
</div>
<div className="flex items-center gap-2">
{section.key !== 'vision' && (
<span className="text-sm font-mono text-white/40 ml-2">
{section.items.length} checks
<span className="text-[10px] font-mono text-white/30">
{section.items.length}
</span>
)}
{section.key === 'vision' && (
<span className="text-sm font-mono text-white/40 ml-2">AI</span>
<span className="text-[10px] font-mono text-accent px-1.5 py-0.5 bg-accent/10">AI</span>
)}
<ChevronRight className={clsx(
"w-4 h-4 text-white/30 transition-transform",
isExpanded && "rotate-90"
)} />
</div>
{isExpanded ? (
<ChevronUp className="w-5 h-5 text-white/40" />
) : (
<ChevronDown className="w-5 h-5 text-white/40" />
)}
</button>
{/* Section Items - BETTER CONTRAST */}
{/* Section Content */}
{isExpanded && (
<div className="border-t border-white/10">
<div className="border-t border-white/[0.06]">
{section.key === 'vision' ? (
<div className="px-5 py-5">
<div className="p-4">
<VisionSection domain={headerDomain} />
</div>
) : section.items.map((item) => {
) : (
<div className="divide-y divide-white/[0.04]">
{section.items.map((item) => {
const statusStyle = getStatusColor(item.status)
const StatusIcon = statusStyle.icon
const tooltip = getItemTooltip(item.key)
return (
<div
key={item.key}
className="px-5 py-4 border-b border-white/[0.06] last:border-0 hover:bg-white/[0.03] transition-colors"
className="px-4 py-3 hover:bg-white/[0.02] transition-colors group"
>
<div className="flex items-start gap-4">
{/* Status Indicator - LARGER */}
<div className="flex items-start gap-3">
{/* Status Indicator */}
<div className={clsx(
"w-10 h-10 flex items-center justify-center shrink-0",
statusStyle.bg, statusStyle.border, "border"
"w-8 h-8 flex items-center justify-center shrink-0 border",
statusStyle.bg, statusStyle.border
)}>
{StatusIcon && <StatusIcon className={clsx("w-5 h-5", statusStyle.text)} />}
{StatusIcon && <StatusIcon className={clsx("w-4 h-4", statusStyle.text)} />}
</div>
{/* Content - BETTER READABILITY */}
{/* Content */}
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-4 mb-2">
<span className="text-base font-medium text-white">
<div className="flex items-center justify-between gap-2 mb-1">
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-white">
{item.label}
</span>
<span className="text-xs font-mono text-white/40 uppercase tracking-wider">
{tooltip && (
<Info
className="w-3.5 h-3.5 text-white/20 opacity-0 group-hover:opacity-100 transition-opacity cursor-help"
title={tooltip}
/>
)}
</div>
<span className="text-[9px] font-mono text-white/30 uppercase">
{item.source}
</span>
</div>
{/* Value - LARGER TEXT */}
{/* Value */}
<div>
{isMatrix(item) ? (
<div className="grid grid-cols-4 gap-2">
<div className="grid grid-cols-4 gap-1.5 mt-2">
{(item.value as any[]).slice(0, 12).map((row: any) => (
<div
key={String(row.domain)}
className={clsx(
"px-3 py-2 text-sm font-mono flex items-center justify-between border",
"px-2 py-1.5 text-[10px] font-mono flex items-center justify-between border",
row.status === 'available'
? "border-accent/30 bg-accent/10 text-accent"
: "border-white/10 bg-white/[0.03] text-white/50"
? "border-accent/20 bg-accent/5 text-accent"
: "border-white/[0.06] bg-white/[0.02] text-white/40"
)}
title={row.status === 'available' ? 'Available' : 'Taken'}
>
<span className="truncate">{String(row.domain)}</span>
{row.status === 'available' && <Check className="w-4 h-4 shrink-0 ml-2" />}
<span className="truncate">.{String(row.domain).split('.').pop()}</span>
{row.status === 'available' && <Check className="w-3 h-3 shrink-0 ml-1" />}
</div>
))}
</div>
) : (
<div className={clsx(
"text-base font-mono",
item.status === 'pass' ? "text-white/80" :
"text-sm font-mono",
item.status === 'pass' ? "text-white/70" :
item.status === 'warn' ? "text-amber-300" :
item.status === 'fail' ? "text-red-300" : "text-white/50"
item.status === 'fail' ? "text-rose-300" : "text-white/40"
)}>
{formatValue(item.value)}
</div>
@ -461,11 +543,11 @@ export function AnalyzePanel() {
{/* Details Toggle */}
{item.details && Object.keys(item.details).length > 0 && (
<details className="mt-3">
<summary className="text-sm font-mono text-white/40 cursor-pointer hover:text-white/60 select-none">
View raw details
<details className="mt-2">
<summary className="text-[10px] font-mono text-white/30 cursor-pointer hover:text-white/50 select-none">
Raw data
</summary>
<pre className="mt-2 text-xs font-mono text-white/50 bg-black/50 border border-white/10 p-4 overflow-x-auto">
<pre className="mt-2 text-[10px] font-mono text-white/40 bg-black/50 border border-white/[0.06] p-3 overflow-x-auto max-h-32">
{JSON.stringify(item.details, null, 2)}
</pre>
</details>
@ -478,11 +560,43 @@ export function AnalyzePanel() {
</div>
)}
</div>
)}
</div>
)
})}
</div>
)}
</div>
{/* Footer */}
<div className="shrink-0 border-t border-white/[0.08] px-4 py-3 bg-[#020202]">
<div className="flex items-center justify-between">
<div className="text-[10px] font-mono text-white/30">
Press ESC to close
</div>
<div className="flex items-center gap-2">
<a
href={`https://who.is/whois/${encodeURIComponent(headerDomain)}`}
target="_blank"
rel="noopener noreferrer"
className="text-[10px] font-mono text-white/40 hover:text-white transition-colors flex items-center gap-1"
>
<Link2 className="w-3 h-3" />
WHOIS
</a>
<span className="text-white/10">|</span>
<a
href={`https://web.archive.org/web/*/${encodeURIComponent(headerDomain)}`}
target="_blank"
rel="noopener noreferrer"
className="text-[10px] font-mono text-white/40 hover:text-white transition-colors flex items-center gap-1"
>
<Clock className="w-3 h-3" />
Archive
</a>
</div>
</div>
</div>
</div>
</div>
)

322
frontend/src/components/analyze/VisionSection.tsx
View File

@ -3,7 +3,22 @@
import { useCallback, useMemo, useState } from 'react'
import clsx from 'clsx'
import Link from 'next/link'
import { Copy, Check, Sparkles, Lock, RefreshCw, Mail, Target, Coins, Info } from 'lucide-react'
import {
Copy,
Check,
Sparkles,
Lock,
RefreshCw,
Mail,
Target,
Coins,
Info,
Rocket,
Users,
Radio,
Lightbulb,
ChevronRight,
} from 'lucide-react'
import { api } from '@/lib/api'
import { useStore } from '@/lib/store'
@ -34,6 +49,55 @@ async function copyToClipboard(text: string) {
}
}
// Card component for consistent styling
function VisionCard({
icon: Icon,
iconColor,
title,
children,
copyValue,
className,
}: {
icon: typeof Target
iconColor: string
title: string
children: React.ReactNode
copyValue?: string
className?: string
}) {
const [copied, setCopied] = useState(false)
const handleCopy = async () => {
if (!copyValue) return
const ok = await copyToClipboard(copyValue)
setCopied(ok)
if (ok) setTimeout(() => setCopied(false), 1200)
}
return (
<div className={clsx("border border-white/[0.06] bg-white/[0.02]", className)}>
<div className="px-3 py-2.5 flex items-center justify-between border-b border-white/[0.04]">
<div className="flex items-center gap-2">
<Icon className={clsx("w-3.5 h-3.5", iconColor)} />
<span className="text-xs font-bold text-white uppercase tracking-wider">{title}</span>
</div>
{copyValue && (
<button
onClick={handleCopy}
className="w-7 h-7 flex items-center justify-center border border-white/[0.08] text-white/30 hover:text-white hover:bg-white/[0.05] transition-colors"
title="Copy to clipboard"
>
{copied ? <Check className="w-3.5 h-3.5 text-accent" /> : <Copy className="w-3.5 h-3.5" />}
</button>
)}
</div>
<div className="p-3">
{children}
</div>
</div>
)
}
export function VisionSection({ domain }: { domain: string }) {
const subscription = useStore((s) => s.subscription)
const tier = (subscription?.tier || 'scout').toLowerCase()
@ -42,7 +106,6 @@ export function VisionSection({ domain }: { domain: string }) {
const [data, setData] = useState<VisionPayload | null>(null)
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [copiedKey, setCopiedKey] = useState<string | null>(null)
const headline = useMemo(() => domain?.trim().toLowerCase() || '', [domain])
@ -60,38 +123,32 @@ export function VisionSection({ domain }: { domain: string }) {
}
}, [headline])
const copy = useCallback(async (key: string, value: string) => {
const ok = await copyToClipboard(value)
setCopiedKey(ok ? key : null)
if (ok) setTimeout(() => setCopiedKey(null), 1200)
}, [])
// Upgrade CTA for Scout users
if (!canUse) {
return (
<div className="p-4 border border-white/[0.08] bg-white/[0.02]">
<div className="border border-white/[0.08] bg-white/[0.02] p-4">
<div className="flex items-start gap-3">
<div className="w-10 h-10 flex items-center justify-center border border-white/10 bg-white/[0.02] shrink-0">
<div className="w-10 h-10 flex items-center justify-center border border-white/[0.08] bg-white/[0.02] shrink-0">
<Lock className="w-5 h-5 text-white/30" />
</div>
<div className="min-w-0 flex-1">
<div className="text-sm font-bold text-white flex items-center gap-2">
<span className="text-white/60">VISION</span>
<span className="px-2 py-0.5 text-[10px] font-mono uppercase bg-white/10 text-white/50 border border-white/10">Trader+</span>
<span className="px-1.5 py-0.5 text-[9px] font-mono uppercase bg-white/[0.08] text-white/50 border border-white/[0.08]">
Trader+
</span>
</div>
<p className="text-sm text-white/40 mt-1">
Turn a domain into a buyer-ready business story: pitch, ideal buyer, and outreach angle.
<p className="text-xs text-white/40 mt-1">
AI-powered business concept, buyer persona, and outreach strategy for this domain.
</p>
<div className="mt-3 flex items-center gap-2">
<Link
href="/pricing"
className="inline-flex items-center gap-2 px-3 py-2 bg-accent text-black text-xs font-bold uppercase tracking-wider hover:bg-white"
className="inline-flex items-center gap-2 px-3 py-2 bg-accent text-black text-[10px] font-bold uppercase tracking-wider hover:bg-white transition-colors"
>
Upgrade to unlock
<Sparkles className="w-4 h-4" />
<ChevronRight className="w-3.5 h-3.5" />
</Link>
<span className="text-[10px] font-mono text-white/30">
Scout users see a preview only.
</span>
</div>
</div>
</div>
@ -101,194 +158,147 @@ export function VisionSection({ domain }: { domain: string }) {
return (
<div className="space-y-3">
<div className="p-4 border border-white/[0.08] bg-white/[0.02]">
<div className="flex items-start justify-between gap-4">
<div className="min-w-0">
<div className="text-[10px] font-mono text-white/40 uppercase tracking-wider flex items-center gap-2">
<Sparkles className="w-3.5 h-3.5 text-accent" />
Vision Engine
<span className="text-white/10">|</span>
<span className="text-white/30" title="Strict JSON output, cached for 30 days.">cached</span>
{/* Controls */}
<div className="flex items-center justify-between gap-3">
<div className="text-[10px] font-mono text-white/40">
<Sparkles className="w-3.5 h-3.5 text-accent inline mr-1.5" />
Generates business insights via AI
</div>
<div className="text-lg font-bold text-white font-mono truncate mt-1">{headline}</div>
<div className="text-xs text-white/40 mt-1 flex items-center gap-2">
<Info className="w-3.5 h-3.5 text-white/20" />
Generates a VC-style pitch + a concrete buyer persona + a ready-to-send outreach message.
</div>
</div>
<div className="flex items-center gap-2 shrink-0">
<div className="flex items-center gap-1.5">
<button
onClick={() => run({ refresh: false })}
disabled={loading}
className={clsx(
"h-9 px-3 border text-xs font-bold uppercase tracking-wider transition-colors",
"border-white/10 text-white/60 hover:text-white hover:bg-white/5",
"h-8 px-3 border text-[10px] font-bold uppercase tracking-wider transition-colors flex items-center gap-1.5",
"border-white/[0.08] text-white/50 hover:text-white hover:bg-white/[0.05]",
loading && "opacity-60"
)}
title="Generate (uses cache if available)"
>
{loading ? <RefreshCw className="w-4 h-4 animate-spin" /> : 'Generate'}
{loading ? <RefreshCw className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5" />}
{data ? 'Regenerate' : 'Generate'}
</button>
{data && (
<button
onClick={() => run({ refresh: true })}
disabled={loading}
className={clsx(
"h-9 w-9 flex items-center justify-center border transition-colors",
"border-white/10 text-white/40 hover:text-white hover:bg-white/5",
loading && "opacity-60"
)}
title="Force refresh (regenerate)"
className="h-8 w-8 flex items-center justify-center border border-white/[0.08] text-white/40 hover:text-white hover:bg-white/[0.05] transition-colors"
title="Force refresh"
>
<RefreshCw className={clsx("w-4 h-4", loading && "animate-spin")} />
<RefreshCw className={clsx("w-3.5 h-3.5", loading && "animate-spin")} />
</button>
</div>
)}
</div>
</div>
{/* Error */}
{error && (
<div className="p-4 border border-rose-500/30 bg-rose-500/10 text-rose-300 text-sm">
<div className="p-3 border border-rose-500/30 bg-rose-500/10 text-rose-300 text-xs font-mono">
{error}
</div>
)}
{/* Empty State */}
{!data && !loading && !error && (
<div className="p-6 border border-dashed border-white/[0.10] text-center text-white/40">
Click <span className="text-white/70 font-bold">Generate</span> to create a Vision for this domain.
<div className="p-6 border border-dashed border-white/[0.08] text-center">
<Sparkles className="w-8 h-8 text-white/10 mx-auto mb-2" />
<p className="text-xs text-white/30 font-mono">
Click <span className="text-white/50 font-bold">Generate</span> to create AI insights
</p>
</div>
)}
{/* Results */}
{data && (
<div className="grid grid-cols-1 gap-3">
{/* Business concept */}
<div className="p-4 border border-white/[0.08] bg-[#050505]">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Target className="w-4 h-4 text-accent" />
<div className="text-sm font-bold text-white">Business Concept</div>
</div>
<button
onClick={() => copy('business_concept', data.result.business_concept)}
className="w-9 h-9 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5"
title="Copy"
<div className="space-y-2">
{/* Business Concept */}
<VisionCard
icon={Rocket}
iconColor="text-accent"
title="Business Concept"
copyValue={data.result.business_concept}
>
{copiedKey === 'business_concept' ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
</button>
</div>
<div className="text-sm text-white/70 mt-2">{data.result.business_concept}</div>
<div className="text-[10px] font-mono text-white/40 mt-2">
<span className="text-white/20">Vertical:</span> {data.result.industry_vertical}
</div>
<p className="text-sm text-white/80 leading-relaxed">{data.result.business_concept}</p>
<div className="mt-2 flex items-center gap-2">
<span className="text-[9px] font-mono text-white/30 uppercase">Vertical:</span>
<span className="text-[10px] font-mono text-white/50 px-1.5 py-0.5 bg-white/[0.05] border border-white/[0.08]">
{data.result.industry_vertical}
</span>
</div>
</VisionCard>
{/* Buyer persona */}
<div className="p-4 border border-white/[0.08] bg-white/[0.02]">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Sparkles className="w-4 h-4 text-emerald-400" />
<div className="text-sm font-bold text-white">Ideal Buyer</div>
</div>
<button
onClick={() => copy('buyer_persona', data.result.buyer_persona)}
className="w-9 h-9 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5"
title="Copy"
{/* Ideal Buyer */}
<VisionCard
icon={Users}
iconColor="text-emerald-400"
title="Ideal Buyer"
copyValue={data.result.buyer_persona}
>
{copiedKey === 'buyer_persona' ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
</button>
</div>
<div className="text-sm text-white/70 mt-2">{data.result.buyer_persona}</div>
</div>
<p className="text-sm text-white/70">{data.result.buyer_persona}</p>
</VisionCard>
{/* Outreach */}
<div className="p-4 border border-white/[0.08] bg-white/[0.02]">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Mail className="w-4 h-4 text-sky-400" />
<div className="text-sm font-bold text-white">Outreach Draft</div>
</div>
<button
onClick={() => copy('cold_email', `Subject: ${data.result.cold_email_subject}\n\n${data.result.cold_email_body}`)}
className="w-9 h-9 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5"
title="Copy full email"
{/* Outreach Draft */}
<VisionCard
icon={Mail}
iconColor="text-sky-400"
title="Outreach Draft"
copyValue={`Subject: ${data.result.cold_email_subject}\n\n${data.result.cold_email_body}`}
>
{copiedKey === 'cold_email' ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
</button>
<div className="space-y-2">
<div>
<div className="text-[9px] font-mono text-white/30 uppercase mb-1">Subject</div>
<div className="text-sm text-white/70">{data.result.cold_email_subject}</div>
</div>
<div className="mt-2">
<div className="text-[10px] font-mono text-white/40 uppercase tracking-wider">Subject</div>
<div className="text-sm text-white/70 mt-1">{data.result.cold_email_subject}</div>
</div>
<div className="mt-3">
<div className="text-[10px] font-mono text-white/40 uppercase tracking-wider">Body</div>
<div className="text-sm text-white/60 mt-1 whitespace-pre-wrap">{data.result.cold_email_body}</div>
<div>
<div className="text-[9px] font-mono text-white/30 uppercase mb-1">Body</div>
<div className="text-xs text-white/50 whitespace-pre-wrap leading-relaxed">
{data.result.cold_email_body}
</div>
</div>
</div>
</VisionCard>
{/* Monetization + radio test */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="p-4 border border-white/[0.08] bg-white/[0.02]">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Coins className="w-4 h-4 text-accent" />
<div className="text-sm font-bold text-white">Monetization</div>
</div>
<button
onClick={() => copy('monetization', data.result.monetization_idea)}
className="w-9 h-9 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5"
title="Copy"
{/* Monetization + Radio Test Row */}
<div className="grid grid-cols-2 gap-2">
<VisionCard
icon={Coins}
iconColor="text-amber-400"
title="Monetization"
copyValue={data.result.monetization_idea}
>
{copiedKey === 'monetization' ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
</button>
</div>
<div className="text-sm text-white/70 mt-2">{data.result.monetization_idea}</div>
</div>
<p className="text-xs text-white/60 leading-relaxed">{data.result.monetization_idea}</p>
</VisionCard>
<div className="p-4 border border-white/[0.08] bg-white/[0.02]">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Sparkles className="w-4 h-4 text-violet-400" />
<div className="text-sm font-bold text-white">Radio Test</div>
</div>
<button
onClick={() => copy('radio', String(data.result.radio_test_score))}
className="w-9 h-9 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5"
title="Copy"
<VisionCard
icon={Radio}
iconColor="text-violet-400"
title="Radio Test"
copyValue={String(data.result.radio_test_score)}
>
{copiedKey === 'radio' ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
</button>
</div>
<div className="mt-2 flex items-end justify-between">
<div className="text-4xl font-bold font-mono text-white">{data.result.radio_test_score}</div>
<div className="text-[10px] font-mono text-white/40">1–10 (higher is better)</div>
</div>
<div className="text-xs text-white/40 mt-2">
Measures how easy the name is to remember and spell when heard.
<div className="flex items-end justify-between">
<div className="text-3xl font-bold font-mono text-white">{data.result.radio_test_score}</div>
<div className="text-[9px] font-mono text-white/30 text-right">
1–10<br/>higher = better
</div>
</div>
</VisionCard>
</div>
{/* Reasoning */}
<div className="p-4 border border-white/[0.08] bg-white/[0.02]">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-2">
<Info className="w-4 h-4 text-white/40" />
<div className="text-sm font-bold text-white">Why this is valuable</div>
</div>
<button
onClick={() => copy('reasoning', data.result.reasoning)}
className="w-9 h-9 flex items-center justify-center border border-white/10 text-white/30 hover:text-white hover:bg-white/5"
title="Copy"
<VisionCard
icon={Lightbulb}
iconColor="text-white/40"
title="Why This Domain Has Value"
copyValue={data.result.reasoning}
>
{copiedKey === 'reasoning' ? <Check className="w-4 h-4 text-accent" /> : <Copy className="w-4 h-4" />}
</button>
</div>
<div className="text-sm text-white/60 mt-2 whitespace-pre-wrap">{data.result.reasoning}</div>
<div className="text-[10px] font-mono text-white/30 mt-3">
{data.cached ? 'Cached' : 'Fresh'} • {new Date(data.generated_at).toLocaleString()} • {data.model}
</div>
<p className="text-xs text-white/50 leading-relaxed">{data.result.reasoning}</p>
<div className="mt-3 pt-2 border-t border-white/[0.04] flex items-center justify-between text-[9px] font-mono text-white/20">
<span>{data.cached ? 'Cached' : 'Fresh'} • {new Date(data.generated_at).toLocaleDateString()}</span>
<span>{data.model}</span>
</div>
</VisionCard>
</div>
)}
</div>
)
}