mirror of
https://github.com/johndoe6345789/low-code-react-app-b.git
synced 2026-04-25 14:14:57 +00:00
johndoe6345789
4dfded3533
> spark-template@0.0.0 prebuild
> mkdir -p /tmp/dist || true
> spark-template@0.0.0 build
> tsc -b --noCheck && vite build
vite v7.3.1 building client environment for production...
<script src="/runtime-config.js"> in "/index.html" can't be bundled without type="module" attribute
✓ 37 modules transformed.
✗ Build failed in 1.07s
error during build:
[vite]: Rollup failed to resolve import "@github/spark/hooks" from "/workspaces/low-code-react-app-b/src/hooks/use-project-state.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at viteLog (file:///workspaces/low-code-react-app-b/node_modules/vite/dist/node/chunks/config.js:33635:57)
at file:///workspaces/low-code-react-app-b/node_modules/vite/dist/node/chunks/config.js:33669:73
at onwarn (file:///workspaces/low-code-react-app-b/node_modules/@vitejs/plugin-react-swc/index.js:76:7)
at file:///workspaces/low-code-react-app-b/node_modules/vite/dist/node/chunks/config.js:33669:28
at onRollupLog (file:///workspaces/low-code-react-app-b/node_modules/vite/dist/node/chunks/config.js:33664:63)
at onLog (file:///workspaces/low-code-react-app-b/node_modules/vite/dist/node/chunks/config.js:33467:4)
at file:///workspaces/low-code-react-app-b/node_modules/rollup/dist/es/shared/node-entry.js:20961:32
at Object.logger [as onLog] (file:///workspaces/low-code-react-app-b/node_modules/rollup/dist/es/shared/node-entry.js:22848:9)
at ModuleLoader.handleInvalidResolvedId (file:///workspaces/low-code-react-app-b/node_modules/rollup/dist/es/shared/node-entry.js:21592:26)
at file:///workspaces/low-code-react-app-b/node_modules/rollup/dist/es/shared/node-entry.js:21550:26
@johndoe6345789 ➜ /workspaces/low-code-react-app-b (main) $
408 lines
19 KiB
TypeScript
408 lines
19 KiB
TypeScript
import { useState } from 'react'
|
|
import { useKV } from '@/hooks/use-kv'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Alert, AlertDescription } from '@/components/ui/alert'
|
|
import { Terminal, Warning, CheckCircle, Copy, Code, MagnifyingGlass, Sparkle } from '@phosphor-icons/react'
|
|
import { parseDockerLog, getSolutionsForError, knowledgeBase } from '@/lib/docker-parser'
|
|
import { DockerError, KnowledgeBaseItem } from '@/types/docker'
|
|
import { toast } from 'sonner'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
|
|
export function DockerBuildDebugger() {
|
|
const [logInput, setLogInput] = useKV<string>('docker-log-input', '')
|
|
const [parsedErrors, setParsedErrors] = useState<DockerError[]>([])
|
|
const [selectedKbItem, setSelectedKbItem] = useState<KnowledgeBaseItem | null>(null)
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
|
|
const handleParse = () => {
|
|
if (!logInput.trim()) {
|
|
toast.error('Please paste a Docker build log first')
|
|
return
|
|
}
|
|
|
|
const errors = parseDockerLog(logInput)
|
|
|
|
if (errors.length === 0) {
|
|
toast.info('No errors detected in the log')
|
|
} else {
|
|
setParsedErrors(errors)
|
|
toast.success(`Found ${errors.length} error${errors.length > 1 ? 's' : ''}`)
|
|
}
|
|
}
|
|
|
|
const handleCopy = (text: string, label: string) => {
|
|
navigator.clipboard.writeText(text)
|
|
toast.success(`${label} copied to clipboard`)
|
|
}
|
|
|
|
const filteredKnowledgeBase = knowledgeBase.filter(item =>
|
|
item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
item.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
item.explanation.toLowerCase().includes(searchQuery.toLowerCase())
|
|
)
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Tabs defaultValue="analyzer" className="space-y-6">
|
|
<TabsList className="grid w-full grid-cols-2 lg:w-auto lg:inline-grid bg-card/50 backdrop-blur-sm">
|
|
<TabsTrigger value="analyzer" className="gap-2">
|
|
<Terminal size={16} weight="bold" />
|
|
<span className="hidden sm:inline">Log Analyzer</span>
|
|
<span className="sm:hidden">Analyze</span>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="knowledge" className="gap-2">
|
|
<MagnifyingGlass size={16} weight="bold" />
|
|
<span className="hidden sm:inline">Knowledge Base</span>
|
|
<span className="sm:hidden">Knowledge</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="analyzer" className="space-y-6">
|
|
<Card className="border-border/50 bg-card/50 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Terminal size={20} weight="bold" className="text-primary" />
|
|
Paste Build Log
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Copy your Docker build output and paste it below for analysis
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<Textarea
|
|
value={logInput}
|
|
onChange={(e) => setLogInput(e.target.value)}
|
|
placeholder="Paste your Docker build log here...
|
|
|
|
Example:
|
|
#30 50.69 Error: Cannot find module @rollup/rollup-linux-arm64-musl
|
|
#30 ERROR: process '/bin/sh -c npm run build' did not complete successfully: exit code: 1"
|
|
className="min-h-[300px] font-mono text-sm bg-secondary/50 border-border/50 focus:border-accent/50 focus:ring-accent/20"
|
|
/>
|
|
<div className="flex gap-3">
|
|
<Button onClick={handleParse} className="gap-2" size="lg">
|
|
<Sparkle size={18} weight="fill" />
|
|
Analyze Log
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
setLogInput('')
|
|
setParsedErrors([])
|
|
}}
|
|
size="lg"
|
|
>
|
|
Clear
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<AnimatePresence mode="wait">
|
|
{parsedErrors.length > 0 && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="space-y-6"
|
|
>
|
|
{parsedErrors.map((error, index) => (
|
|
<Card key={error.id} className="border-destructive/30 bg-card/50 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<Warning size={24} weight="fill" className="text-destructive animate-pulse" />
|
|
<CardTitle className="text-destructive">Error #{index + 1}</CardTitle>
|
|
<Badge variant="destructive" className="font-mono">
|
|
{error.type}
|
|
</Badge>
|
|
{error.exitCode && (
|
|
<Badge variant="outline" className="font-mono">
|
|
Exit Code: {error.exitCode}
|
|
</Badge>
|
|
)}
|
|
{error.stage && (
|
|
<Badge variant="secondary" className="font-mono">
|
|
{error.stage}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-muted-foreground font-mono">{error.message}</p>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{error.context.length > 0 && (
|
|
<div>
|
|
<h4 className="text-sm font-semibold mb-2 flex items-center gap-2">
|
|
<Code size={16} weight="bold" />
|
|
Error Context
|
|
</h4>
|
|
<ScrollArea className="h-32 rounded-md border border-border/50 bg-secondary/50 p-3">
|
|
<pre className="text-xs font-mono text-muted-foreground whitespace-pre-wrap">
|
|
{error.context.join('\n')}
|
|
</pre>
|
|
</ScrollArea>
|
|
</div>
|
|
)}
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h4 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
|
<CheckCircle size={20} weight="bold" className="text-accent" />
|
|
Recommended Solutions
|
|
</h4>
|
|
<div className="space-y-4">
|
|
{getSolutionsForError(error).map((solution, sIndex) => (
|
|
<motion.div
|
|
key={sIndex}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ delay: sIndex * 0.1 }}
|
|
>
|
|
<Card className="bg-secondary/30 border-accent/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-base text-accent">
|
|
{solution.title}
|
|
</CardTitle>
|
|
<CardDescription>{solution.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div>
|
|
<h5 className="text-sm font-semibold mb-2">Steps:</h5>
|
|
<ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
|
|
{solution.steps.map((step, stepIndex) => (
|
|
<li key={stepIndex}>{step}</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
{solution.code && (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h5 className="text-sm font-semibold">Code:</h5>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleCopy(solution.code!, 'Code')}
|
|
className="gap-2 h-7"
|
|
>
|
|
<Copy size={14} />
|
|
Copy
|
|
</Button>
|
|
</div>
|
|
<ScrollArea className="max-h-48 rounded-md border border-border/50 bg-secondary/50 p-3">
|
|
<pre className="text-xs font-mono text-foreground whitespace-pre-wrap">
|
|
{solution.code}
|
|
</pre>
|
|
</ScrollArea>
|
|
{solution.codeLanguage && (
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
Language: {solution.codeLanguage}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="knowledge" className="space-y-6">
|
|
<Card className="border-border/50 bg-card/50 backdrop-blur-sm">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<MagnifyingGlass size={20} weight="bold" className="text-primary" />
|
|
Search Knowledge Base
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Browse common Docker build errors and their solutions
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="relative">
|
|
<MagnifyingGlass
|
|
size={20}
|
|
className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder="Search errors, categories, or keywords..."
|
|
className="w-full pl-10 pr-4 py-3 rounded-lg border border-border/50 bg-secondary/50 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent/50"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{filteredKnowledgeBase.map((item) => (
|
|
<motion.div
|
|
key={item.id}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Card
|
|
className="border-border/50 bg-card/50 backdrop-blur-sm cursor-pointer hover:border-accent/50 hover:shadow-lg hover:shadow-accent/5 transition-all"
|
|
onClick={() => setSelectedKbItem(item)}
|
|
>
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<CardTitle className="text-base">{item.title}</CardTitle>
|
|
<Badge variant="secondary" className="text-xs shrink-0">
|
|
{item.category}
|
|
</Badge>
|
|
</div>
|
|
<CardDescription className="text-xs font-mono text-muted-foreground">
|
|
{item.pattern}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-muted-foreground line-clamp-2">
|
|
{item.explanation}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{filteredKnowledgeBase.length === 0 && (
|
|
<Alert>
|
|
<AlertDescription>
|
|
No results found for "{searchQuery}". Try different keywords.
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<AnimatePresence mode="wait">
|
|
{selectedKbItem && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm"
|
|
onClick={() => setSelectedKbItem(null)}
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9 }}
|
|
animate={{ scale: 1 }}
|
|
exit={{ scale: 0.9 }}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="w-full max-w-3xl max-h-[90vh] overflow-auto"
|
|
>
|
|
<Card className="border-border bg-card">
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="secondary">{selectedKbItem.category}</Badge>
|
|
<CardTitle>{selectedKbItem.title}</CardTitle>
|
|
</div>
|
|
<p className="text-sm font-mono text-muted-foreground">
|
|
Pattern: {selectedKbItem.pattern}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setSelectedKbItem(null)}
|
|
>
|
|
Close
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div>
|
|
<h4 className="font-semibold mb-2">Explanation</h4>
|
|
<p className="text-sm text-muted-foreground">
|
|
{selectedKbItem.explanation}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h4 className="font-semibold mb-4 flex items-center gap-2">
|
|
<CheckCircle size={18} weight="bold" className="text-accent" />
|
|
Solutions
|
|
</h4>
|
|
<div className="space-y-4">
|
|
{selectedKbItem.solutions.map((solution, index) => (
|
|
<Card key={index} className="bg-secondary/30 border-accent/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-base text-accent">
|
|
{solution.title}
|
|
</CardTitle>
|
|
<CardDescription>{solution.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<div>
|
|
<h5 className="text-sm font-semibold mb-2">Steps:</h5>
|
|
<ol className="list-decimal list-inside space-y-1 text-sm text-muted-foreground">
|
|
{solution.steps.map((step, stepIndex) => (
|
|
<li key={stepIndex}>{step}</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
{solution.code && (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h5 className="text-sm font-semibold">Code:</h5>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleCopy(solution.code!, 'Code')}
|
|
className="gap-2 h-7"
|
|
>
|
|
<Copy size={14} />
|
|
Copy
|
|
</Button>
|
|
</div>
|
|
<ScrollArea className="max-h-48 rounded-md border border-border/50 bg-secondary/50 p-3">
|
|
<pre className="text-xs font-mono text-foreground whitespace-pre-wrap">
|
|
{solution.code}
|
|
</pre>
|
|
</ScrollArea>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|