diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 793f448..a5de9b0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -81,7 +81,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -2721,7 +2720,6 @@ "version": "18.3.27", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz", "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==", - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -2732,7 +2730,6 @@ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", "devOptional": true, - "peer": true, "peerDependencies": { "@types/react": "^18.0.0" } @@ -2898,7 +2895,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -3116,7 +3112,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", - "peer": true, "engines": { "node": ">=12" } @@ -3563,7 +3558,6 @@ "version": "1.21.7", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", - "peer": true, "bin": { "jiti": "bin/jiti.js" } @@ -3838,7 +3832,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -4010,7 +4003,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -4022,7 +4014,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -4386,7 +4377,6 @@ "version": "3.4.18", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz", "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==", - "peer": true, "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", @@ -4481,7 +4471,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", - "peer": true, "engines": { "node": ">=12" }, @@ -4618,7 +4607,6 @@ "integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -4712,7 +4700,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/frontend/src/components/DependencyGraph.tsx b/frontend/src/components/DependencyGraph.tsx index b9743aa..193b2a0 100644 --- a/frontend/src/components/DependencyGraph.tsx +++ b/frontend/src/components/DependencyGraph.tsx @@ -1,7 +1,5 @@ import { useEffect, useState, useCallback } from 'react' import ReactFlow, { - Node, - Edge, Controls, Background, useNodesState, @@ -9,6 +7,7 @@ import ReactFlow, { MarkerType, MiniMap, } from 'reactflow' +import type { Node, Edge } from 'reactflow' import dagre from 'dagre' import 'reactflow/dist/style.css' import { useDependencyGraph } from '../hooks/useCachedQuery' diff --git a/frontend/src/components/playground/HeroPlayground.tsx b/frontend/src/components/playground/HeroPlayground.tsx new file mode 100644 index 0000000..85e078f --- /dev/null +++ b/frontend/src/components/playground/HeroPlayground.tsx @@ -0,0 +1,314 @@ +/** + * HeroPlayground + * + * Combined demo + custom repo experience for the landing page hero. + * Handles mode switching, URL validation, indexing, and search. + */ + +import { useState, useCallback } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Button } from '@/components/ui/button'; +import { + RepoModeSelector, + RepoUrlInput, + ValidationStatus, + IndexingProgress, + type RepoMode +} from '@/components/playground'; +import { useAnonymousSession } from '@/hooks/useAnonymousSession'; +import { cn } from '@/lib/utils'; + +// Demo repos config +const DEMO_REPOS = [ + { id: 'flask', name: 'Flask', icon: '๐Ÿ' }, + { id: 'fastapi', name: 'FastAPI', icon: 'โšก' }, + { id: 'express', name: 'Express', icon: '๐ŸŸข' }, +]; + +// Icons +function SearchIcon() { + return ( + + + + ); +} + +function ZapIcon() { + return ( + + + + ); +} + +interface HeroPlaygroundProps { + onSearch: (query: string, repoId: string, isCustom: boolean) => void; + availableRepos?: string[]; + remaining?: number; + loading?: boolean; +} + +export function HeroPlayground({ + onSearch, + availableRepos = [], + remaining = 50, + loading = false +}: HeroPlaygroundProps) { + const navigate = useNavigate(); + + // Mode: demo repos or custom repo + const [mode, setMode] = useState('demo'); + const [selectedDemo, setSelectedDemo] = useState(DEMO_REPOS[0].id); + const [customUrl, setCustomUrl] = useState(''); + const [query, setQuery] = useState(''); + + // Anonymous session hook for custom repos + const { state, validateUrl, startIndexing, reset, session } = useAnonymousSession(); + + // Handle mode change + const handleModeChange = useCallback((newMode: RepoMode) => { + setMode(newMode); + if (newMode === 'demo') { + reset(); + setCustomUrl(''); + } + }, [reset]); + + // Handle search submit + const handleSearch = useCallback((e?: React.FormEvent) => { + e?.preventDefault(); + if (!query.trim() || loading) return; + + if (mode === 'demo') { + onSearch(query, selectedDemo, false); + } else if (state.status === 'ready') { + onSearch(query, state.repoId, true); + } + }, [query, mode, selectedDemo, state, loading, onSearch]); + + // Get validation state for ValidationStatus component + const getValidationState = () => { + if (state.status === 'idle') return { type: 'idle' as const }; + if (state.status === 'validating') return { type: 'validating' as const }; + if (state.status === 'valid') return { type: 'valid' as const, validation: state.validation }; + if (state.status === 'invalid') return { type: 'invalid' as const, error: state.error, reason: state.reason }; + return { type: 'idle' as const }; + }; + + // Can search? + const canSearch = mode === 'demo' + ? remaining > 0 && query.trim().length > 0 + : state.status === 'ready' && remaining > 0 && query.trim().length > 0; + + // Determine what to show based on state + const showDemoSelector = mode === 'demo'; + const showUrlInput = mode === 'custom' && !['indexing', 'ready'].includes(state.status); + const showValidation = mode === 'custom' && ['validating', 'valid', 'invalid'].includes(state.status); + const showIndexing = mode === 'custom' && state.status === 'indexing'; + // Always show search - in custom mode it's disabled until repo is indexed + const showSearch = true; + const isSearchDisabled = mode === 'custom' && state.status !== 'ready'; + + // Get contextual placeholder text + const getPlaceholder = () => { + if (mode === 'demo') { + return "Search for authentication, error handling..."; + } + // Custom mode placeholders based on state + switch (state.status) { + case 'idle': + return "Enter a GitHub URL above to start..."; + case 'validating': + return "Validating repository..."; + case 'valid': + return "Click 'Index Repository' to continue..."; + case 'invalid': + return "Fix the URL above to continue..."; + case 'indexing': + return "Indexing in progress..."; + case 'ready': + return `Search in ${state.repoName}...`; + default: + return "Enter a GitHub URL to search..."; + } + }; + + return ( +
+ {/* Mode Selector */} +
+ +
+ + {/* Demo Repo Buttons */} + {showDemoSelector && ( +
+ {DEMO_REPOS.map(repo => { + const isAvailable = availableRepos.length === 0 || availableRepos.includes(repo.id); + const isSelected = selectedDemo === repo.id; + return ( + + ); + })} +
+ )} + + {/* Custom URL Input */} + {showUrlInput && ( +
+ +
+ )} + + {/* Validation Status */} + {showValidation && ( +
+ +
+ )} + + {/* Indexing Progress */} + {showIndexing && ( +
+ +
+ )} + + {/* Ready State Banner */} + {mode === 'custom' && state.status === 'ready' && ( +
+
+ โœ“ + + {state.repoName} indexed ยท {state.fileCount} files ยท {state.functionsFound} functions + +
+ +
+ )} + + {/* Search Box */} + {showSearch && ( + <> +
+
+
+
+
+
+ setQuery(e.target.value)} + placeholder={getPlaceholder()} + className="flex-1 bg-transparent text-white placeholder:text-zinc-500 focus:outline-none text-base py-3" + disabled={isSearchDisabled} + /> +
+ +
+
+
+ + {/* Trust Indicators */} +
+
+ + ~100ms +
+
+ No signup required +
+ {session?.searches.remaining ?? remaining} searches left +
+ + )} + + {/* Error State */} + {state.status === 'error' && ( +
+

{state.message}

+ {state.canRetry && ( + + )} +
+ )} + + {/* Upgrade CTA (when limit reached) */} + {remaining <= 0 && ( +
+

You've used all your free searches today

+ +
+ )} +
+ ); +} diff --git a/frontend/src/components/playground/index.ts b/frontend/src/components/playground/index.ts index 097a740..2441356 100644 --- a/frontend/src/components/playground/index.ts +++ b/frontend/src/components/playground/index.ts @@ -9,3 +9,4 @@ export { RepoModeSelector, type RepoMode } from './RepoModeSelector'; export { RepoUrlInput } from './RepoUrlInput'; export { ValidationStatus } from './ValidationStatus'; export { IndexingProgress, type ProgressData } from './IndexingProgress'; +export { HeroPlayground } from './HeroPlayground'; diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx index bf59146..758aacb 100644 --- a/frontend/src/contexts/AuthContext.tsx +++ b/frontend/src/contexts/AuthContext.tsx @@ -1,5 +1,6 @@ import { createContext, useContext, useState, useEffect, ReactNode } from 'react'; -import { createClient, SupabaseClient, User, Session } from '@supabase/supabase-js'; +import { createClient } from '@supabase/supabase-js'; +import type { SupabaseClient, User, Session } from '@supabase/supabase-js'; interface AuthContextType { user: User | null; diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index 1d55ad9..9bd0c90 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -6,20 +6,11 @@ import { Card } from '@/components/ui/card' import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism' import { API_URL } from '../config/api' +import { HeroPlayground } from '@/components/playground' +import { playgroundAPI } from '@/services/playground-api' import type { SearchResult } from '../types' -// Icons -const SearchIcon = () => ( - - - -) - -const ZapIcon = () => ( - - - -) +// Icons (only GitHubIcon and SparklesIcon are used in this file) const GitHubIcon = () => ( @@ -33,31 +24,6 @@ const SparklesIcon = () => ( ) -const ArrowRightIcon = () => ( - - - -) - -const CheckIcon = () => ( - - - -) - -// Demo repos -const DEMO_REPOS = [ - { id: 'flask', name: 'Flask', icon: '๐Ÿ', color: 'from-green-500/20 to-green-600/20 border-green-500/30' }, - { id: 'fastapi', name: 'FastAPI', icon: 'โšก', color: 'from-teal-500/20 to-teal-600/20 border-teal-500/30' }, - { id: 'express', name: 'Express', icon: '๐ŸŸข', color: 'from-yellow-500/20 to-yellow-600/20 border-yellow-500/30' }, -] - -const EXAMPLE_QUERIES = [ - 'authentication middleware', - 'error handling', - 'database connection', -] - // Scroll animation hook function useScrollAnimation() { const ref = useRef(null) @@ -101,22 +67,36 @@ function AnimatedSection({ children, className = '' }: { children: React.ReactNo export function LandingPage() { const navigate = useNavigate() - const [query, setQuery] = useState('') - const [selectedRepo, setSelectedRepo] = useState(DEMO_REPOS[0].id) + const resultsRef = useRef(null) const [results, setResults] = useState([]) const [loading, setLoading] = useState(false) const [searchTime, setSearchTime] = useState(null) - const [remaining, setRemaining] = useState(50) // Will be updated from backend - const [limit, setLimit] = useState(50) // Total limit from backend + const [remaining, setRemaining] = useState(50) + const [limit, setLimit] = useState(50) const [hasSearched, setHasSearched] = useState(false) const [availableRepos, setAvailableRepos] = useState([]) const [rateLimitError, setRateLimitError] = useState(null) + const [lastQuery, setLastQuery] = useState('') + + // Scroll to results when they appear + const scrollToResults = () => { + setTimeout(() => { + resultsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }) + }, 100) + } + + // Reset to search state + const handleNewSearch = () => { + setHasSearched(false) + setResults([]) + setSearchTime(null) + setLastQuery('') + window.scrollTo({ top: 0, behavior: 'smooth' }) + } - // Fetch rate limit status on mount (backend is source of truth) + // Fetch rate limit status on mount useEffect(() => { - fetch(`${API_URL}/playground/limits`, { - credentials: 'include', // Send cookies for session tracking - }) + fetch(`${API_URL}/playground/limits`, { credentials: 'include' }) .then(res => res.json()) .then(data => { setRemaining(data.remaining ?? 50) @@ -135,37 +115,38 @@ export function LandingPage() { .catch(console.error) }, []) - const handleSearch = async (searchQuery?: string) => { - const q = searchQuery || query - if (!q.trim() || loading || remaining <= 0) return + // Unified search handler for both demo and custom repos + const handleSearch = async (query: string, repoId: string, isCustom: boolean) => { + if (!query.trim() || loading || remaining <= 0) return setLoading(true) setHasSearched(true) + setLastQuery(query) setRateLimitError(null) const startTime = Date.now() try { - const response = await fetch(`${API_URL}/playground/search`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - credentials: 'include', // Send cookies for session tracking - body: JSON.stringify({ query: q, demo_repo: selectedRepo, max_results: 10 }) - }) - const data = await response.json() + const response = isCustom + ? await playgroundAPI.search(query) + : await fetch(`${API_URL}/playground/search`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + credentials: 'include', + body: JSON.stringify({ query, demo_repo: repoId, max_results: 10 }) + }).then(res => res.json()) + + const data = isCustom ? response : response - if (response.ok) { + if (data.results) { setResults(data.results || []) setSearchTime(data.search_time_ms || (Date.now() - startTime)) - // Update remaining from backend (source of truth) if (typeof data.remaining_searches === 'number') { setRemaining(data.remaining_searches) } - if (typeof data.limit === 'number') { - setLimit(data.limit) - } - } else if (response.status === 429) { - // Rate limit exceeded - setRateLimitError(data.detail?.message || 'Daily limit reached. Sign up for unlimited searches!') + // Scroll to results after they load + scrollToResults() + } else if (data.status === 429) { + setRateLimitError('Daily limit reached. Sign up for unlimited searches!') setRemaining(0) } } catch (error) { @@ -222,134 +203,105 @@ export function LandingPage() {

- Search any codebase by meaning, not keywords. + Search any codebase by meaning, not keywords. Index your own repo in seconds.

- {/* Repo Selector */} -
- {DEMO_REPOS.map(repo => { - const isAvailable = availableRepos.includes(repo.id) - const isSelected = selectedRepo === repo.id - return ( - - ) - })} -
- - {/* Search Box */} -
-
-
-
{ e.preventDefault(); handleSearch(); }} className="flex items-center gap-3"> -
-
- setQuery(e.target.value)} - placeholder="Search for authentication, error handling..." - className="flex-1 bg-transparent text-white placeholder:text-gray-500 focus:outline-none text-base py-3" - autoFocus - /> -
- -
-
-
- - {/* Trust Indicators */} -
-
~100ms
-
- No signup required -
- {remaining} free searches -
- - {/* Example Queries */} - {!hasSearched && ( -
- Try: - {EXAMPLE_QUERIES.map(q => ( - - ))} -
- )} + {/* HeroPlayground - handles demo repos + custom repo indexing */} +
{/* ============ RESULTS SECTION (if searched) ============ */} {hasSearched && ( -
+
+ {/* Results Header */}
-
- {results.length} results - {searchTime && <>โ€ข{searchTime}ms} +
+ + | + + {results.length} results for "{lastQuery}" + + {searchTime && ( + + {searchTime > 1000 ? `${(searchTime/1000).toFixed(1)}s` : `${searchTime}ms`} + + )}
{remaining > 0 && remaining < limit && (
{remaining} remaining
)}
- {(remaining <= 0 || rateLimitError) && ( - -

You've reached today's limit

-

- {rateLimitError || 'Sign up to get unlimited searches and index your own repos.'} -

- - + {/* Loading State */} + {loading && ( +
+
+
+
+

Searching codebase...

+

This may take a few seconds for first search

+
)} -
- {results.map((result, idx) => ( - -
-
-
-

{result.name}

- {result.type.replace('_', ' ')} + {/* Results Content (only when not loading) */} + {!loading && ( + <> + {(remaining <= 0 || rateLimitError) && ( + +

You've reached today's limit

+

+ {rateLimitError || 'Sign up to get unlimited searches and index your own repos.'} +

+ + + )} + +
+ {results.map((result, idx) => ( + +
+
+
+

{result.name}

+ {result.type.replace('_', ' ')} +
+

{result.file_path.split('/').slice(-2).join('/')}

+
+
+
{(result.score * 100).toFixed(0)}%
+
match
+
-

{result.file_path.split('/').slice(-2).join('/')}

-
-
-
{(result.score * 100).toFixed(0)}%
-
match
-
-
- - {result.code} - - - ))} -
+ + {result.code} + + + ))} +
- {results.length === 0 && !loading && ( -
-
๐Ÿ”
-

No results found

-

Try a different query

-
+ {results.length === 0 && ( +
+
๐Ÿ”
+

No results found

+

Try a different query

+
+ )} + )}
diff --git a/frontend/src/services/playground-api.ts b/frontend/src/services/playground-api.ts index e3f3f51..106c70e 100644 --- a/frontend/src/services/playground-api.ts +++ b/frontend/src/services/playground-api.ts @@ -133,8 +133,8 @@ class PlaygroundAPI { * NOTE: Currently mocked due to Bug #134 (CacheService missing get/set) */ async validateRepo(githubUrl: string): Promise { - // TODO: Remove mock when #134 is fixed - const USE_MOCK = true; + // Bug #134 fixed - using real API + const USE_MOCK = false; if (USE_MOCK) { return this.mockValidateRepo(githubUrl);