For AI builders
Move fast, but catch vulnerable, unpinned, unknown, or unsupported dependencies before release.
This is the frontend redesign brief, wireframe set, interaction model, and prototype contract for Publicus. It exists so product, design, engineering, and agents can inspect the same artifact before changing the live app.
The product promise stays narrow: upload the dependency files an AI workflow produced, see what blocks release, inspect source-backed evidence, and export proof before any synthesis layer speaks.
Move fast, but catch vulnerable, unpinned, unknown, or unsupported dependencies before release.
Inspect source-backed evidence, not opaque recommendations. Every claim must have a path.
Improve the open substrate through governed source contracts, review proposals, and signed truth.
The product should feel like a release cockpit, not a documentation archive. Every path starts from a real user job and ends in an inspectable next action.
Home and scan use the same upload state model.
Unsupported, partial, and unpinned are visible immediately.
Sources are separated by evidence lane and checked time.
Blocked, needs review, unknown, and pass are distinct buckets.
Each result links to primary sources and explains the verdict.
JSON and Markdown remain reviewable outside the app.
| Audience | Path | Success state |
|---|---|---|
| Security reviewer | Open scan result, filter review gaps, inspect source lanes, export proof. | Reviewer can defend the release posture without trusting synthesis. |
| Package evaluator | Check one AI-suggested package, compare latest metadata, inspect advisories. | Package is accepted, rejected, or queued for review before it enters code. |
| Registry browser | Browse signed decisions, open component detail, scan that package in context. | Curated baseline is clear without implying internet-wide coverage. |
| Recent-change reader | Open movement, click affected package or source, inspect changed evidence. | Movement is actionable, not a dead card with hover styling. |
| Trusted contributor | Find source backlog, read blocker, propose adapter or evidence dispute. | Contribution path improves the public substrate without bypassing review. |
| Route | Job | Primary action | Risk to avoid |
|---|---|---|---|
/ | Explain the promise and start the scan. | Upload dependency file. | Turning the homepage into a source catalog. |
/scan | Run the full stack or package audit. | Fix blockers and export proof. | Making unknown feel like unchecked. |
/registry | Inspect curated signed decisions. | Open component evidence. | Implying the registry is every package on the internet. |
/docs/recent-changes/ | Show movement since the last check. | Open primary source or affected package. | Hover affordance without navigation. |
/ask | Explain inspected evidence. | Ask a scoped question. | Letting synthesis outrank evidence. |
These are implementation wireframes, not decorative images. They show layout hierarchy, interaction priority, and evidence flow.
This lightweight prototype is intentionally built in plain HTML. It gives reviewers and agents a shared model for the live rewrite before production code changes.
Blocked and needs-review packages appear before complete package inventory.
Unknown is labelled outside registry, unpinned, unsupported, partial, unavailable, adapter needed, or license blocked.
Needs review because fresh upstream advisories exist and the manifest entry is not exact-version pinned.
Inspect source contract opens the Publicus schema. Open primary source leaves the app. No card should look clickable without one of these actions.
Ask receives selected package, source lanes, verdict counts, and checked timestamps.
The answer explains inspected evidence only. It cannot certify, override, or hide the fix-first verdict.
The redesign must survive a skeptical non-builder test: can a smart reviewer understand what to do, what happened, what is risky, and what proof exists without reading docs first?
Failure to avoid: too many equal CTAs and too much source-catalog text.
Pass condition: upload is visually dominant, and secondary paths explain why they exist.
Failure to avoid: results read like raw scanner output or hide unknown reasons.
Pass condition: fix-first grouping, classified unknowns, and package-level evidence drilldowns.
Failure to avoid: curated registry looks like full internet coverage.
Pass condition: curated baseline language and explicit scan path for arbitrary packages.
Failure to avoid: cards look clickable but do nothing.
Pass condition: every movement card opens source, affected package, or an explanation panel.
Failure to avoid: active feeds and roadmap-only feeds are mixed together.
Pass condition: Used in scans, Global context, Needs adapter, and License blocked buckets.
Failure to avoid: opaque AI answer becomes the product.
Pass condition: Ask is only available with selected evidence and cites exactly what it used.
Events are redacted, low-cardinality, and product-behavior focused. File contents, tokens, keys, prompts, and uploaded text are never emitted.
Route, page family, viewport class.
File extension and size bucket only.
Reason bucket: unsupported, oversized, parse_failed.
Input mode and ecosystem count bucket.
Verdict counts, source counts, elapsed bucket.
blocked, review, unknown, pass, source lane.
Ecosystem, verdict bucket, source lane count.
Source family, coverage state, target type.
JSON or Markdown, package count bucket.
Selected evidence type and verdict bucket.
Use this as the implementation prompt for the live frontend rewrite. The agent should change production code only after it can prove the current behavior with route, upload, click-path, keyboard, and evidence-pack checks.
Home and scan pages share one upload component. Drag/drop, click upload, keyboard upload, package lookup, and proof export use the same state model and event taxonomy.
Every result card opens a detail panel with registry status, live evidence lanes, source freshness, primary-source links, and a plain-English next action.
Ask is an explanation layer over selected evidence. It should not replace package verdicts, freshness clocks, source coverage, or exportable proof.
Track route, file type, size bucket, verdict counts, opened evidence lanes, and exported proof format. Never track uploaded file contents, package manager auth tokens, prompts, secrets, or raw dependency text.
Implement the Publicus AI-native scan-first frontend from /docs/product-redesign/. Keep the existing static HTML, CSS token, and vanilla JS architecture. Do not change backend API contracts. Start with home and /scan only. Use one shared upload/result state model. Every hoverable card must navigate, expand, or lose hover styling. Unknown must be classified: outside_registry, unpinned, unsupported, partial, unavailable, adapter_needed, or license_blocked. Ask appears only after selected evidence exists. Emit only redacted PublicusEvents with documented low-cardinality fields. Prove with route tests, upload E2E, evidence drilldown, proof export, keyboard path, and visual QA screenshots.
Target under 2.5s on production route smoke.
Target under 200ms for upload, filter, detail selection, and export interactions.
Target under 0.1; evidence panels must reserve space or transition predictably.
| Interaction | Measurement | Failure action |
|---|---|---|
| Upload file | Time from file selection to visible scanning state. | Inline progress state before network work starts. |
| Show results | Time from API response to first visible verdict bucket. | Render summary before long evidence lists. |
| Open evidence detail | Interaction latency and layout shift. | Reserve detail panel space or use in-flow mobile expansion. |
| Export proof | Click to browser download start. | Keep export client-side from existing scan payload. |
Use native browser performance APIs and Playwright product-flow checks before adding new measurement dependencies.
| Gate | What changes | Proof |
|---|---|---|
| Artifact complete | This HTML contains user flows, wireframes, clickable states, MOMS critique, event contract, and build prompt. | Docs route tests, public page audit, and browser smoke. |
| Shell and IA | Navigation, page hierarchy, docs routing, one primary scan path. | Docs route tests and no duplicate shell patterns. |
| Scan results | Fix-first cards, classified unknowns, evidence drilldowns. | Manifest upload E2E and evidence-pack assertions. |
| Source coverage | Four buckets and clear primary-source actions. | Source contract route and click-path smoke. |
| Tracking and performance | Redacted events and native performance observation. | Unit checks plus live product-flow smoke. |
| Accessibility | Focus states, keyboard upload, status messages, mobile collapse. | Playwright route checks and visual QA artifacts. |