a70b0d580a
Original task: build "SkillGuard", a German web app to audit agent skills on two axes (IT-Sicherheit, Datenschutz) with static rule engine + Replit-independent AI analysis configured via an admin backend. This session: - Fixed frontend TS errors: lucide-react name collisions (Badge from ui, Activity from lucide), widened apiType to AiProviderApiType, added queryKey to useGetScan. - Verified all pages render in German (Dashboard, Prüfen, Bericht, Verlauf, Admin) and the full scan flow works end-to-end (malicious sample -> verdict block). Code-review-driven hardening: - POST /api/scans now returns the full ScanDetail (files + findings) to match the OpenAPI contract, instead of only the summary. - AI provider error bodies are redacted (token, Bearer, sk- patterns) before being returned/persisted, and provider fetches now have a 60s timeout. - ZIP parsing now enforces limits (max files, total + per-file size) to mitigate zip-bomb DoS. Updated replit.md (project overview, decisions, gotchas) and added a memory note on lucide-react icon name collisions.
1.1 KiB
| name | description |
|---|---|
| lucide-react icon name collisions | lucide-react exports icons whose names collide with UI components and React 19 built-ins, causing silent JSX type errors |
When importing from lucide-react, some icon names collide with other symbols and the wrong one silently wins, producing confusing JSX prop type errors (e.g. "variant does not exist on LucideProps" or "className does not exist on ActivityProps").
Why: lucide-react exports Badge (collides with shadcn/ui Badge) and Activity (collides with React 19's built-in Activity component). If Badge/Activity is imported from lucide-react alongside, or the UI component is NOT imported, TS resolves the JSX tag to the wrong type. <Badge variant=...> then fails because the lucide icon has no variant, and <Activity className=...> fails against React's ActivityProps.
How to apply: Import Badge from @/components/ui/badge, never from lucide-react. Import Activity from lucide-react explicitly (not from react). When a JSX element reports props missing that clearly belong to a different component, check the import source for a name collision first.