Skip to content

Commit ee2d19b

Browse files
spivxspivx
committed
feat: enhance RepoScanClient and FinalOutputView components with improved functionality and UI updates
1 parent 86ebfe2 commit ee2d19b

File tree

3 files changed

+105
-92
lines changed

3 files changed

+105
-92
lines changed

‎app/existing/[repoUrl]/repo-scan-client.tsx‎

Lines changed: 46 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client"
22

33
import { useCallback, useEffect, useMemo, useState } from "react"
4-
import { useRouter } from "next/navigation"
54
import Link from "next/link"
65

76
import { AlertTriangle, CheckCircle2 } from "lucide-react"
@@ -12,7 +11,6 @@ import { normalizeGitHubRepoInput } from "@/lib/github"
1211
import type { RepoScanSummary } from "@/types/repo-scan"
1312
import { getFileOptions } from "@/lib/wizard-config"
1413
import { generateFromRepoScan } from "@/lib/scan-generate"
15-
import { prefillWizardFromScan } from "@/lib/scan-prefill"
1614
import FinalOutputView from "@/components/final-output-view"
1715
import RepoScanLoader from "@/components/repo-scan-loader"
1816
import type { GeneratedFileResult } from "@/types/output"
@@ -28,7 +26,6 @@ type RepoScanClientProps = {
2826
}
2927

3028
export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps) {
31-
const router = useRouter()
3229
const [scanResult, setScanResult] = useState<RepoScanSummary | null>(null)
3330
const [error, setError] = useState<string | null>(null)
3431
const [isLoading, setIsLoading] = useState(false)
@@ -135,8 +132,6 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
135132
const fileOptions = getFileOptions()
136133
const [isGeneratingMap, setIsGeneratingMap] = useState<Record<string, boolean>>({})
137134
const [generatedFile, setGeneratedFile] = useState<GeneratedFileResult | null>(null)
138-
const [isPrefilling, setIsPrefilling] = useState(false)
139-
const [prefillError, setPrefillError] = useState<string | null>(null)
140135

141136
const handleGenerate = useCallback(async (fileId: string) => {
142137
if (!scanResult) return
@@ -152,25 +147,6 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
152147
}
153148
}, [scanResult])
154149

155-
const handlePrefillWizard = useCallback(async () => {
156-
if (!scanResult) {
157-
return
158-
}
159-
160-
setIsPrefilling(true)
161-
setPrefillError(null)
162-
163-
try {
164-
const { stackId } = await prefillWizardFromScan(scanResult)
165-
router.push(`/new/stack/${stackId}/user/summary`)
166-
} catch (prefillProblem) {
167-
console.error("Failed to prefill wizard from scan", prefillProblem)
168-
setPrefillError("We couldn't prefill the wizard. Try again or open the wizard manually.")
169-
} finally {
170-
setIsPrefilling(false)
171-
}
172-
}, [scanResult, router])
173-
174150
return (
175151
<div className="relative flex min-h-screen flex-col bg-background text-foreground">
176152
<div className="absolute inset-0 bg-gradient-to-b from-background via-background/95 to-background" aria-hidden="true" />
@@ -189,7 +165,7 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
189165
) : null}
190166
</CardTitle>
191167
<CardDescription>
192-
Scan the repository to pre-fill DevContext with detected stack and tooling.
168+
Run a quick analysis of the repository and generate AI-friendly instruction files tailored to what we detect.
193169
</CardDescription>
194170
</CardHeader>
195171
<CardContent className="space-y-6">
@@ -224,47 +200,53 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
224200
</div>
225201
) : scanResult ? (
226202
<div className="space-y-8">
203+
<section className="space-y-2">
204+
<h3 className="text-lg font-semibold text-foreground">Detected snapshot</h3>
205+
<p className="text-sm text-muted-foreground">
206+
We mapped the repository to highlight the primary language, tooling, and structure so you can generate the right instructions in one click.
207+
</p>
208+
</section>
227209
<section className="grid gap-6 md:grid-cols-2">
228-
<div className="rounded-lg border border-border/60 bg-background/60 p-4">
210+
<div className="rounded-2xl border border-border/60 bg-background/70 p-5">
229211
<div className="flex items-center gap-2 text-sm font-semibold">
230212
<CheckCircle2 className="size-4 text-primary" aria-hidden="true" />
231-
Primary Language
213+
Primary language
232214
</div>
233-
<p className="mt-2 text-base text-foreground">
215+
<p className="mt-3 text-base text-foreground">
234216
{scanResult.language ?? "Not detected"}
235217
</p>
236218
{scanResult.languages.length > 1 ? (
237219
<p className="mt-2 text-xs text-muted-foreground">
238-
Other languages: {scanResult.languages.slice(1).join(", ")}
220+
Also spotted: {scanResult.languages.slice(1).join(", ")}
239221
</p>
240222
) : null}
241223
</div>
242-
<div className="rounded-lg border border-border/60 bg-background/60 p-4">
224+
<div className="rounded-2xl border border-border/60 bg-background/70 p-5">
243225
<div className="flex items-center gap-2 text-sm font-semibold">
244226
<CheckCircle2 className="size-4 text-primary" aria-hidden="true" />
245227
Default branch
246228
</div>
247-
<p className="mt-2 text-base text-foreground">{scanResult.defaultBranch}</p>
229+
<p className="mt-3 text-base text-foreground">{scanResult.defaultBranch}</p>
248230
</div>
249231
</section>
250232
<section className="grid gap-6 md:grid-cols-2">
251-
<div className="rounded-lg border border-border/60 bg-background/60 p-4">
233+
<div className="rounded-2xl border border-border/60 bg-background/70 p-5">
252234
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Frameworks</h3>
253-
<p className="mt-2 text-sm text-foreground">{formatList(scanResult.frameworks)}</p>
235+
<p className="mt-3 text-sm text-foreground">{formatList(scanResult.frameworks)}</p>
254236
</div>
255-
<div className="rounded-lg border border-border/60 bg-background/60 p-4">
237+
<div className="rounded-2xl border border-border/60 bg-background/70 p-5">
256238
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Tooling</h3>
257-
<p className="mt-2 text-sm text-foreground">{formatList(scanResult.tooling)}</p>
239+
<p className="mt-3 text-sm text-foreground">{formatList(scanResult.tooling)}</p>
258240
</div>
259-
<div className="rounded-lg border border-border/60 bg-background/60 p-4">
241+
<div className="rounded-2xl border border-border/60 bg-background/70 p-5">
260242
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Testing</h3>
261-
<p className="mt-2 text-sm text-foreground">{formatList(scanResult.testing)}</p>
243+
<p className="mt-3 text-sm text-foreground">{formatList(scanResult.testing)}</p>
262244
</div>
263-
<div className="rounded-lg border border-border/60 bg-background/60 p-4">
264-
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Structure</h3>
265-
<ul className="mt-2 space-y-1 text-sm text-foreground">
245+
<div className="rounded-2xl border border-border/60 bg-background/70 p-5">
246+
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Structure hints</h3>
247+
<ul className="mt-3 space-y-2 text-sm text-foreground">
266248
{structureEntries.map(({ key, value }) => (
267-
<li key={key} className="flex items-center gap-2">
249+
<li key={key} className="flex items-center justify-between gap-4">
268250
<span className="font-medium capitalize">{key}</span>
269251
<span className={value ? "text-emerald-400" : "text-muted-foreground"}>
270252
{value ? "Present" : "Missing"}
@@ -274,44 +256,31 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
274256
</ul>
275257
</div>
276258
</section>
277-
<section className="rounded-lg border border-border/60 bg-background/60 p-4">
278-
<div className="flex flex-col gap-3">
279-
<div>
280-
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Generate context files</h3>
281-
<p className="mt-1 text-xs text-muted-foreground">We prefill smart defaults from the scan. You can tweak later in the wizard.</p>
282-
</div>
283-
<div className="flex flex-wrap gap-3">
284-
{fileOptions.map((file) => {
285-
const busy = Boolean(isGeneratingMap[file.id])
286-
return (
287-
<Button
288-
key={file.id}
289-
onClick={() => void handleGenerate(file.id)}
290-
disabled={busy}
291-
className="flex h-[36px] items-center rounded-full px-4 py-0 text-sm"
292-
>
293-
{busy ? `Generating ${file.filename}…` : `Generate ${file.filename}`}
294-
</Button>
295-
)
296-
})}
297-
</div>
298-
<div className="flex flex-wrap items-center gap-3 pt-2">
299-
<Button
300-
variant="outline"
301-
onClick={() => void handlePrefillWizard()}
302-
disabled={isPrefilling}
303-
className="flex h-[36px] items-center rounded-full px-4 py-0 text-sm"
304-
>
305-
{isPrefilling ? "Opening wizard…" : "Open in wizard"}
306-
</Button>
307-
{prefillError ? (
308-
<span className="text-xs text-destructive">{prefillError}</span>
309-
) : null}
310-
</div>
259+
<section className="space-y-4 rounded-2xl border border-border/60 bg-background/70 p-5">
260+
<div className="space-y-1">
261+
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Generate instructions</h3>
262+
<p className="text-xs text-muted-foreground">
263+
Choose the file you need—each one opens an Instructions ready preview powered by this scan.
264+
</p>
265+
</div>
266+
<div className="flex flex-wrap gap-3">
267+
{fileOptions.map((file) => {
268+
const busy = Boolean(isGeneratingMap[file.id])
269+
return (
270+
<Button
271+
key={file.id}
272+
onClick={() => void handleGenerate(file.id)}
273+
disabled={busy}
274+
className="flex h-[36px] items-center rounded-full px-4 py-0 text-sm"
275+
>
276+
{busy ? `Generating ${file.filename}…` : `Generate ${file.filename}`}
277+
</Button>
278+
)
279+
})}
311280
</div>
312281
</section>
313282
{warnings.length > 0 ? (
314-
<div className="rounded-lg border border-amber-400/60 bg-amber-950/40 p-4 text-amber-200">
283+
<div className="rounded-2xl border border-amber-400/60 bg-amber-950/40 p-4 text-amber-200">
315284
<div className="flex items-start gap-2">
316285
<AlertTriangle className="mt-0.5 size-4" aria-hidden="true" />
317286
<div className="space-y-1 text-sm">
@@ -322,7 +291,7 @@ export default function RepoScanClient({ initialRepoUrl }: RepoScanClientProps)
322291
</div>
323292
</div>
324293
) : null}
325-
<div className="rounded-lg border border-border/60 bg-background/60 p-4">
294+
<div className="rounded-2xl border border-border/60 bg-background/70 p-5">
326295
<h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Raw response</h3>
327296
<pre className="mt-3 max-h-72 overflow-auto rounded-md bg-muted p-3 text-xs text-muted-foreground">
328297
{JSON.stringify(scanResult, null, 2)}

0 commit comments

Comments
 (0)