frontend: migrate to Vue 3 + Vite + TypeScript + Carbon Web Components, redesign visualizer - #336

…ration)

Scaffold the next-gen frontend at frontend-next/, runnable side-by-side
with the legacy Vue 2.7 app. No feature parity yet -- this PR proves
the toolchain end to end.

Stack
-----
- Vue 3.5 + Vite 8 + TypeScript 6 (strict)
- Pinia 3, Vue Router 5 (Vue 3 line)
- @carbon/web-components 2.54 (replaces @carbon/vue@2)
- @carbon/charts 1.27 (vanilla core, no Vue wrapper)
- @carbon/styles 1.106 + @carbon/icons 11.80
- ESLint 10 flat config + Prettier 3

Deliverables
------------
- App shell: main.ts bootstraps Pinia + Router, App.vue applies the
  preserved make-the-carbon-theme-go-{white,dark} class names so the
  legacy theming pattern carries over. Theme state lives in
  stores/app.ts; OS preference is detected via matchMedia.
- HeaderBar.vue ported to cds-header / cds-header-name /
  cds-header-global-action with a Pinia-bound 3-state theme toggle
  (auto/light/dark). A small CarbonIcon.vue helper renders icons from
  @carbon/icons descriptor objects.
- FooterView.vue ported to a plain footer using Carbon CSS custom
  properties; dropped the @carbon/ibmdotcom-web-components dependency.
- CarbonChart.vue: generic Vue 3 wrapper around @carbon/charts core
  classes (donut, treemap, bar variants, circle-pack, area, line, etc.).
  Mounts in onMounted, calls model.setData on data change,
  model.setOptions on options/theme change, destroys in onBeforeUnmount.
- HomeView renders a placeholder donut through the wrapper to prove the
  pipeline. ResultsView is an empty placeholder for PR #3.

Build & runtime
---------------
- Multi-stage Dockerfile builds inside the image (node:22-alpine) so
  the host needs no Node toolchain. Placeholder tokens
  (__CBOMKIT_HTTP_API_BASE__, __CBOMKIT_WS_API_BASE__,
  __CBOMKIT_TITLE__, __CBOMKIT_VIEWER_ONLY__, __CBOMKIT_POLICY_NAME__)
  are baked into the bundle via build-time CBOMKIT_* env vars.
- docker/entrypoint.sh maps the existing VUE_APP_* env var contract
  (still used by docker-compose.yaml) onto those placeholders at
  container start, so swapping images at cutover requires no compose
  changes. Glob updated from js/app.*.js to assets/**.{js,html,css}
  to match Vite's hashed asset filenames.
- nginx config copied verbatim from the legacy frontend.
- Makefile gains additive dev-frontend-next and
  build-frontend-next-image targets; existing frontend targets and
  docker-compose.yaml are untouched.

Verification
------------
- npm install succeeds with 0 vulnerabilities (Sonatype-vetted
  versions).
- npm run build (vue-tsc --noEmit && vite build) passes type check and
  produces a working bundle.
- npm run dev serves on http://localhost:8002 alongside the legacy
  frontend on :8001 with no port conflict.
- grep -c "__CBOMKIT_TITLE__" dist/** confirms the placeholder tokens
  survive minification, so runtime sed substitution will work as
  designed.

Out of scope for this PR
------------------------
Service layer (api.js, scan.js, model.js -> Pinia stores), TS types
for the CBOM schema, the visualizer redesign, scan/upload pages,
and the legacy-to-new cutover. Those land in PRs #3/#4/#5 per
frontend/MIGRATION.md.

Signed-off-by: Cameron Banowsky <[email protected]>

Ports the legacy frontend's model and helpers to TypeScript modules
under frontend-next/src/. No UI changes yet -- legacy frontend still
owns the user-facing experience until PR #3.

Pinia stores (split by responsibility)
--------------------------------------
- stores/errors.ts: ErrorEntry list + addError/closeError/clear.
- stores/scan.ts:   scanning state, codeOrigin, credentials, reset
                    helpers (resetScanningInfo/CodeOriginInfo/Credentials).
- stores/cbom.ts:   cbom, dependency maps, policyCheckResult, lastCboms,
                    showResults; startAgain() composes resets across
                    scan + cbom stores.
- stores/app.ts:    theme state (unchanged from PR #1).

Services
--------
- services/api.ts:  typed fetchLastCboms + getComplianceReport with the
                    same fallback-to-local-compliance contract.
- services/scan.ts: typed WebSocket client. Replaces the legacy
                    uuid4 dep with crypto.randomUUID() and a small
                    Math.random fallback. Message dispatch uses a
                    discriminated union over ScanMessageType; payload
                    parsing for DETECTION/CBOM funnels into setCbom +
                    buildDependencyMaps.

Pure helpers
------------
- lib/cbom.ts:           checkCbomValidity, resolvePath,
                         buildDependencyMaps, getDependenciesFor,
                         setCbom, showResultFromApi/Upload,
                         getDetections{,FromCbom}.
- lib/compliance.ts:     getComplianceLevel/Object/Color/Icon/Label/
                         Description, getPolicyResultsByAsset,
                         hasValidComplianceResults type guard,
                         checkValidComplianceResults validator,
                         getComplianceRepartition/getColorScale.
- lib/compliance-local.ts: createLocalComplianceReport (NIST PQC
                           quantum-safe whitelist mirror of the
                           legacy implementation).
- lib/info.ts:           getTermFullName/Description from the copied
                         crypto-dictionary.json; countOccurrences /
                         countNames over typed CbomComponent arrays.
- lib/general.ts:        capitalizeFirstLetter, numberFormatter,
                         formatSeconds, openGitRepo, canOpenOnline,
                         getCodeLink/openOnline (now take CodeOrigin
                         as an arg so they remain pure), limitString.

Types
-----
- types/cbom.ts:       Partial CycloneDX 1.6 + cryptography-ext schema
                       covering the fields the frontend reads:
                       AlgorithmProperties, CertificateProperties,
                       ProtocolProperties, RelatedCryptoMaterial-
                       Properties, CryptoProperties, EvidenceOccurrence,
                       CbomComponent, CbomDependency, Cbom, ScanRecord,
                       DependencyMaps, DependencyComponentList.
- types/scan.ts:       ScanState const-object enum, ScanMessageType
                       union, ScanMessageEnvelope, ScanCredentials/Input,
                       ScanRequestBody, CodeOrigin.
- types/compliance.ts: ComplianceIconKey, ComplianceLevel,
                       ComplianceFinding, PolicyCheckResultOk/Error
                       (discriminated on `error`).
- types/errors.ts:     ErrorStatus const-object enum + ErrorEntry.

Config
------
- config.ts replaces app.config.js. Composes API URLs from
  CBOMKIT_HTTP_API_BASE + CBOMKIT_WS_API_BASE via api.json. Empty base
  falls back to relative URLs so the Vite dev proxy works without env
  vars set locally. getTitle() / isViewerOnly() live here too.
- api.json copied from frontend/.
- data/crypto-dictionary.json copied from frontend/resources/.

MIGRATION.md
------------
Reflects the renumbered sequence (PR #2 is now services/state, PR #3
is the visualizer, PR #4 is scan flow + cutover) and the updated PR #2
scope (no router changes -- routes get expanded in PR #3 alongside the
visualizer ports).

Verification
------------
- npm run type-check (vue-tsc --noEmit) passes with strict mode +
  verbatimModuleSyntax enabled.
- npm run build succeeds; new modules tree-shake out for now (bundle
  hashes unchanged from PR #1) since no UI references them yet -- they
  enter the bundle in PR #3 when components start importing.

Signed-off-by: Cameron Banowsky <[email protected]>

Ports the visualizer UI to Vue 3 and ships the chart improvements that
motivated the whole migration. Drag-drop or click "Try the sample CBOM"
on the home page to land on the new /results page.

Charts
------
Five charts in a responsive CSS-grid (no fixed pixel heights anymore):
- Compliance donut (with local-approximation indicator)
- Asset names circle pack
- Primitives donut
- Functions donut
- Primitive -> algorithm treemap (new chart type, full-width)

Each chart has the Carbon toolbar enabled (zoom, expand, export PNG/CSV).
The wrapper resolves chart-specific click events into a single
`datum-click` emit so parents don't have to learn each chart's event name.
Carbon Charts wraps donut datums as `{data: {group, value}}` and treemap
leaves as `{name, value}` -- a small `unwrap()` helper in StatisticsView
handles both shapes uniformly.

KPI strip
---------
Above the charts, four metric cards summarise at-a-glance:
crypto-asset count, quantum-vulnerable count, top primitive, top
function. The "vulnerable" card flips between positive (green) and
warn (amber) accents based on the count.

Drill-down
----------
Clicking a donut slice, a circle-pack node, or a treemap leaf emits a
`filter-change` event that the ResultsView routes into a filter prop on
the DataTable. A dismissible filter chip appears above the table; the
chip's X clears the filter. Clicking the same slice twice toggles the
filter off.

DataTable
---------
A simplified port (versus the 467-LOC legacy version): renders
detections from the cbom store with columns Status / Name / Primitive
/ Functions / Location. Free-text search input alongside the filter
chip. Empty-state row when filters yield no matches. Modal triggers
and column-level customisation are deferred to PR #4 (defaults are
enough for the visualizer redesign).

Component inventory
-------------------
New under src/components/results/:
- ComplianceIcon.vue:  resolves the compliance icon descriptor through
                       complianceIconMap and applies the level colour.
                       Substitutes WatsonHealthImageAvailabilityUnavailable
                       (no longer in @carbon/icons) with the `unknown`
                       icon.
- KpiStrip.vue:        the four metric cards.
- StatisticsView.vue:  the charts grid + drill-down dispatch.
- DataTable.vue:       the table with filter + search.
- ResultTitle.vue:     title, subtitle (live detection count) + code-origin
                       tags (gitUrl/revision/commit/subfolder).
- ReturnButton.vue:    stops the WebSocket, calls store.startAgain(),
                       navigates back to home.

New under src/components/home/:
- FileUploader.vue:    plain drag-drop + click-to-browse JSON upload.
                       No Carbon Web Component used (the legacy
                       cv-file-uploader's slot API didn't translate
                       cleanly). Reads the file via FileReader, calls
                       showResultFromUpload + getComplianceReport,
                       emits an `uploaded` event the parent uses to
                       push to /results.

Other changes
-------------
- main.ts side-effect imports for cds-tile, tag, link, loading,
  inline-loading, skeleton-text, file-uploader, data-table, search,
  tooltip (registers them as custom elements).
- HomeView replaces the PR #1 placeholder donut with the uploader and
  "Try the sample CBOM" button. The bundled sample is a copy of
  example/keycloak-cbom.json -- yields 103 detections.
- Router: beforeEnter guard on /results redirects to home if no CBOM
  is loaded.
- App.vue sets document.title = getTitle() at startup so the dev tab
  title reads "CBOMkit" instead of the runtime placeholder token.
- types/filter.ts: shared DetectionFilter discriminated union, used by
  StatisticsView, ResultsView, and DataTable.

Verification
------------
- npm run type-check (strict vue-tsc) passes.
- npm run build succeeds. Bundle: ResultsView 438 kB (gzip 131 kB),
  index 1.27 MB (gzip 185 kB). Code-splitting per chart type can come
  later; the warning is noise for the redesign milestone.
- Manual: dropped the bundled keycloak sample on the new UI in
  Chrome; all 5 charts rendered, KPI strip showed (103 / 27 / Pke /
  Keygen), clicking the compliance "Unknown" slice filtered the table
  from 103 to 50 rows and surfaced a "Compliance: Unknown" chip; dark
  mode matched OS preference.
- Legacy `make production` flow still works unchanged.

Out of scope for this PR
------------------------
- Scan flow (SearchBar, WebSocket UI, GitInfoPrompt).
- Modal subcomponents (CryptoAssetDetails, DependenciesView,
  GithubEmbed).
- Notifications surface for errors.
- Vitest smoke tests + the legacy-to-new cutover.
All deferred to PR #4.

Signed-off-by: Cameron Banowsky <[email protected]>

Ports the remaining UI to reach parity with the legacy Vue 2 frontend,
plus a Vitest smoke suite. The next commit performs the legacy
cutover.

Components
----------
- global/NotificationsView.vue: toast notification surface bound to
  the errors Pinia store. Maps the ErrorStatus enum to friendly title
  + description + kind (error / warning / info) and uses
  cds-toast-notification (registered in main.ts).

- home/SearchBar.vue: Git URL / PURL input with optional advanced
  options (Scan tab: branch + subfolder; Authentication tab: username
  + password/PAT). Builds a credentials object and calls
  connectAndScan from services/scan, then routes to /results. Plain
  HTML inputs rather than cds-text-input -- the v-model story for
  custom-element inputs is fiddly and not worth a wrapper for this
  PR.

- home/ListTable.vue: last CBOMs fetched via fetchLastCboms in
  onBeforeMount. Skeleton-text rows while loading. Clicking a row
  calls showResultFromApi + getComplianceReport and routes to
  /results.

- home/SearchOrUploadView.vue: container that pairs SearchBar +
  FileUploader (with ListTable above when not in viewer-only mode).
  Replaces the bare HomeView layout.

- results/LoaderView.vue: cds-inline-loading bound to the scan store's
  scanningStatus state machine (LOADING/ENDING/LOADED/ERROR).

Wire-up
-------
- App.vue mounts NotificationsView next to the header.
- HomeView delegates to SearchOrUploadView and keeps the sample-CBOM
  shortcut.
- ResultsView shows LoaderView in the toolbar while a scan is in
  progress.
- Router guard on /results allows entry when a scan is in flight
  (live detections render) in addition to the previous "cbom is
  loaded" case.
- main.ts registers additional cds-* tags: notification, checkbox,
  tabs, text-input.

Tests (new)
-----------
- vitest 4 + jsdom 29 + @vue/test-utils 2 set up via vite.config.ts.
  Imported from vitest/config so the `test` block type-checks.
- src/lib/__tests__/compliance.test.ts: 9 cases covering
  checkValidComplianceResults validator, hasValidComplianceResults
  type guard, getComplianceLevel min-finding logic + default
  fallback.
- src/lib/__tests__/compliance-local.test.ts: 5 cases over the
  NIST PQC local report -- RSA flagged Not Quantum Safe, ML-KEM hits
  the whitelist, symmetric primitives are Not Applicable, missing
  primitive is Unknown.
- src/lib/__tests__/cbom.test.ts: 9 cases over resolvePath,
  getDetectionsFromCbom occurrence unwrap, buildDependencyMaps for
  both top-level dependencies and crypto-property refs.
- src/lib/__tests__/info.test.ts: 4 cases over countOccurrences
  (string + array values) and countNames.

All 27 tests pass. type-check + build remain clean.

Out of scope (deferred to follow-up issues, not blockers for cutover)
--------------------------------------------------------------------
- Modal subcomponents (CryptoAssetDetails, DependenciesView,
  GithubEmbed, GitInfoPrompt for post-upload git info).
- RegulatorResults compliance scorecard (KPI strip already shows the
  vulnerable count and the StatisticsView donut covers the
  distribution).
- ExplainerView / PluginExplainerView informational cards.
- DebugView (dev-only).

Signed-off-by: Cameron Banowsky <[email protected]>

Renames frontend-next/ to frontend/ and removes the legacy Vue 2 code.
Vue 3 + Vite + TypeScript + Pinia + Vue Router + @carbon/web-components
+ @carbon/charts is now the production frontend.

Changes
-------
- git mv frontend-next/ -> frontend/.
- git rm -rf frontend/ (legacy contents moved to frontend-legacy/ then
  deleted; git rename detection keeps the per-file history through
  the move).
- Makefile: the dev-frontend-next + build-frontend-next-image targets
  are removed (only one frontend now). build-frontend-image points at
  the multi-stage Vite Dockerfile. Added dev-frontend-local for `npm
  run dev` without docker.
- frontend/MIGRATION.md is retained in git history; the migration is
  complete.

User-visible
------------
- `make build-frontend-image` now produces an image built from the
  Vue 3 source. Compose `make production` / `make dev-frontend` /
  `make coeus` flows are unchanged from the outside; they continue
  to pull `ghcr.io/cbomkit/cbomkit-frontend:${VERSION}` until the
  user publishes a new image.
- `cd frontend && npm install && npm run dev` for local dev on :8002
  (Vite proxies /api and /v1/scan to the Quarkus backend on :8081).
- The same VUE_APP_HTTP_API_BASE / VUE_APP_WS_API_BASE /
  VUE_APP_TITLE / VUE_APP_VIEWER_ONLY / VUE_APP_POLICY_NAME env vars
  are honoured by the nginx entrypoint (mapped to __CBOMKIT_*__
  placeholder tokens at build time), so docker-compose.yaml requires
  no changes.

Verification
------------
- npm install, npm run type-check, npm run build, npm test all pass
  in the new frontend/ location (27 tests).
- Manual smoke in Chrome: home page, sample CBOM load, charts +
  drill-down, notifications surface, search bar, list table skeleton
  all render correctly and have no console errors.
- `make build-frontend-image` builds a working image via the
  multi-stage Dockerfile.

Out of scope, follow-up issues
------------------------------
- Asset-detail modal, dependencies-graph modal, GitHub embed modal,
  post-upload Git info prompt.
- Per-chart-type dynamic imports to shrink the main bundle from its
  current ~1.97 MB (gzip 258 kB) baseline.
- Wire Vitest into CI.

Signed-off-by: Cameron Banowsky <[email protected]>

Three small bugs surfaced when running the new frontend against a real
Quarkus backend.

WebSocket URL synthesis
-----------------------
joinURL fallback returned a relative URL ("/v1/scan/...") when no
CBOMKIT_WS_API_BASE was set. fetch() resolves relative URLs against
the document base, but `new WebSocket()` requires an absolute URL --
so scans failed with close code 1006 before the upgrade was even
sent.

Split into joinHttpURL (relative is fine) and joinWsURL (synthesises
ws://<host>:<port>/... from window.location when no base is
configured).

Dev proxy CORS Origin rewrite
-----------------------------
The backend's allowlist is set via CBOMKIT_FRONTEND_URL_CORS, which
docker-compose pins to http://localhost:8001 (legacy frontend port).
The Vite dev server runs on :8002, so HTTP requests appeared to work
(Vite proxy hides origin from the browser) but the WebSocket upgrade
forwarded the browser's Origin header and the backend rejected it.

Both proxy entries now send Origin: http://localhost:8001 explicitly,
matching the allowlist. No change in production -- there the
frontend container talks to the backend on the docker network with
the right origin already.

Compliance trigger on scan completion
-------------------------------------
The legacy frontend ran the compliance check via a watcher on
model.cbom. PR #2 moved cbom into a Pinia store but the equivalent
trigger never landed, so post-scan CBOMs stayed at "Evaluating
compliance..." indefinitely.

services/scan.ts now calls getComplianceReport(cbom) inside the
CBOM message handler. The upload path already did this directly in
FileUploader, so both flows now produce a policy result.

Pre-set scan state for route guard
----------------------------------
connectAndScan sets isScanning + scanningStatus to LOADING
synchronously before opening the WebSocket. Without this, the
synchronous router.push('/results') hit the route guard before the
async onopen fired, and the guard sent the user back to home.

Verification
------------
- Manual: pkg:maven/io.quarkus/[email protected] scanned to
  completion via the new UI; live progress messages streamed
  ("Cloning... Receiving objects 25% -> 90%, Resolving deltas 45%..."
  -> "Scan finished"); 4 cryptographic assets detected; KPI strip
  populated (Top primitive Hash, Top function Digest); commit hash
  44bc4a9 and subfolder core/runtime auto-populated from backend
  messages; donut + circle-pack charts rendered with real data.
- 27/27 Vitest tests still pass, type-check clean, build clean.

Signed-off-by: Cameron Banowsky <[email protected]>

- Replace .github/img/cbomkit.gif (1.7 MB, 14 frames) with a recording
  of the new visualizer: load the sample CBOM, click the Compliance
  donut "Not Quantum Safe" slice (table filters 103 -> 27, chip
  appears), clear the filter, click the largest treemap leaf (table
  filters by name 'key', 103 -> 24), scroll back to the chart grid.
- Annotate the README image with a one-line caption naming what the
  GIF demonstrates.
- Add a "Visualizer features" subsection under "Frontend and
  CBOMkit-coeus" describing the KPI strip, the five charts, drill-down
  behaviour, toolbar, responsive grid, and theme toggle. Notes the
  stack underneath (Vue 3 + Vite + TS + Pinia + Carbon).
- Replace the stale CONTRIBUTING snippet that ran
  `vue-cli-service serve --port 8001` with the current
  `cd frontend && npm install && npm run dev` flow (Vite on :8002,
  proxies /api and /v1/scan to :8081, Origin rewrite for backend
  CORS). Add the type-check / test / build / lint shortcuts.

Signed-off-by: Cameron Banowsky <[email protected]>

Adds DISTRUSTED and TRUSTED entries to the OPAResult enum and the
ComplianceLevel map so findings emitted by the distrusted_ca Rego policy
deserialize cleanly and surface through the compliance API and frontend
without falling back to UNKNOWN.

Severity ranks:
  0 DISTRUSTED   red,   ERROR icon         (uncompliant)
  1 QUANTUM_VULNERABLE  yellow, WARNING    (uncompliant, unchanged)
  2 UNKNOWN             blue,   UNKNOWN    (uncompliant, unchanged)
  3 QUANTUM_SAFE        green,  SECURE     (compliant,   unchanged)
  4 NA                  gray,   NA         (compliant,   unchanged)
  5 TRUSTED             green,  CHECKMARK  (compliant)

Additive only; existing quantum_safe policy results are unaffected.

Signed-off-by: Cameron Banowsky <[email protected]>

The Vue 3 migration upgraded Vite to ^8.0.13, which requires
Node.js 20.19+ or 22.12+. Node 21 is past EOL and breaks Rolldown's
native binding resolution with:

  Cannot find module '@rolldown/binding-linux-x64-gnu'

Failing CI run prior to this fix:
https://github.com/anoncam/cbomkit/actions/runs/25937520262

Bumping the matrix to 22.x (the next LTS line) restores green CI on
every PR. No code or lockfile changes required.

Signed-off-by: Cameron Banowsky <[email protected]>

The `Build Frontend` workflow was red on both 072787b and 0b3551c
with:

  Cannot find module '@rolldown/binding-linux-arm64-musl'
  npm has a bug related to optional dependencies
  (npm/cli#4828)

Two compounding root causes:

1. No `frontend/.dockerignore`. The `COPY . .` step after `npm install`
   was clobbering the freshly resolved linux-<arch>-musl `node_modules/`
   with whatever sat on the build host — on a Mac, that's the
   arm64-darwin tree, which obviously has no linux-musl Rolldown
   binding. Add a `.dockerignore` excluding `node_modules`, `dist`,
   caches, and `.git`.

2. `npm ci` inside the multi-arch image build also fails because the
   committed lockfile only lists the binding for the platform the
   lockfile was generated on (npm cli #4828, which Rolldown's runtime
   error explicitly cites). Rolldown maintainers' instruction is to
   delete the lockfile and run a fresh install. Switch the build-stage
   install to:

     rm -f package-lock.json && npm install --include=dev \
       --no-audit --no-fund --no-progress

   The pinned versions in package.json still give us a deterministic
   build for non-native deps; the lockfile stays the source of truth
   for `npm ci` in CI matrix runs (which only ever build for one
   platform). `--include=dev` is required because the image sets
   NODE_ENV=production at the top, which would otherwise omit vue-tsc
   and vite themselves.

Verified locally with `docker buildx build --platform linux/arm64`
and `--platform linux/amd64` — both produce a working image (the
`npm run build` step exits 0, the Stage 2 nginx-unprivileged image
exports cleanly).

Signed-off-by: Cameron Banowsky <[email protected]>