Files
traefik-llmgateway/webui
lukaszraczylo 1aa2b43932 fix(webui): defuse scaffold config traps, tighten inline guards
Micro-fix from re-review:

1. webui/components.json: deleted the font/iconLibrary keys instead of
   picking a value. Re-review checked shadcn-vue's actual parse schema
   (node_modules/shadcn-vue/dist/schema/index.js's rawConfigSchema):
   both fields are z.string().optional(), not an enum - the five-choice
   enum lives only on the init CLI's --font/--icon-library flags, not on
   the components.json schema. The previous commit's "schema forbids a
   fix" rationale was wrong; corrected here. Verified empirically, not
   just by reading the schema: ran a real `npx shadcn-vue add badge -o
   -y` against components.json with both keys removed - src/assets/
   main.css came back byte-for-byte unchanged (previously this exact
   class of call re-added a Google Fonts import and the .dark-class
   toggle). That same run did still re-add @lucide/vue to package.json's
   dependencies (some components' registry entries list an icon package
   regardless of iconLibrary) - reverted before committing, and
   webui/README.md's warning section rewritten to explain the omission
   (so nobody "helpfully" restores the keys), fix the schema claim, and
   note the narrower remaining package.json trap.

2. admin.go:27-28: adminCSP's doc comment now names all three set-sites
   (GET /admin, every GET /admin/assets/*, the three JSON routes) -
   previously only mentioned the page and JSON routes, dropped after the
   asset route gained the same header in the prior fix round.

3. Both inline-script guards (webui/generate.mjs's assertNoInlineAssets,
   admin_test.go's hasInlineScript) tightened from a bare \bsrc\s*=
   pattern to (^|\s)src\s*= - \b alone matches inside "data-src=" too
   (the "-" before "src" is a non-word character, so \b sits right
   before "src"), which would wrongly treat a data-src/nosrc attribute
   as the real src= that makes a <script> external. New Go test
   TestHasInlineScript_DataSrcIsNotExternal: <script data-src="x">
   is still flagged as inline.

No webui/src/ change this round - components.json isn't bundled, and
generate.mjs's edit only touches its own build-time guard, not the
Go-source-generation path. admin_assets_gen.go NOT regenerated
(confirmed via a throwaway `node generate.mjs` + gofmt -w run: output
is byte-identical to what's already committed).
2026-08-21 09:54:48 +01:00
..
2026-08-21 09:21:41 +01:00
2026-08-21 09:21:41 +01:00
2026-08-21 09:21:41 +01:00

Admin panel (webui)

Source for the traefik-llmgateway read-only admin dashboard: Vue 3 + TypeScript + Pinia + Tailwind v4 + shadcn-vue + Chart.js, built with Vite.

See the repo root README.md's Admin section for what the dashboard shows and how its API/auth works, and the Development section for make admin-ui — the only way this directory's output (../admin_assets_gen.go) is meant to be regenerated. Nothing here runs at request time: the plugin serves the built, baked-in output, never webui/ itself.

Warning: shadcn-vue add/init regressions

components.json has no iconLibrary or font key. Do not add them back. Their omission is the fix, not an oversight — read on before you "helpfully" restore either one.

Earlier revisions of this file set "iconLibrary": "lucide" and "font": "inter", both wrong for this project (FontAwesome only, per the vue-web-development house skill; no external font at all). Both npx shadcn-vue init and npx shadcn-vue add <component> read those two fields and, when set, rewrite src/assets/main.css — hit twice in this project's own history, init then a later add, both re-adding a @import url('https://fonts.googleapis.com/...') line and switching the dark-mode @custom-variant back to a .dark-class toggle.

The actual shadcn-vue config schema (node_modules/shadcn-vue/dist/schema/index.js's rawConfigSchema) declares both fields as z.string().optional() — not an enum, contrary to an earlier, incorrect claim in this project's own review notes that the CLI schema forced one of five fixed values. The CLI's init --font/ --icon-library flags do offer five fixed choices each, but that is a flag-parsing constraint, not a components.json schema constraint. Deleting both keys leaves them undefined after parse, a valid state: verified empirically, running npx shadcn-vue add badge -o -y against a components.json with both keys removed left src/assets/main.css byte-for-byte unchanged.

That verification also surfaced a narrower, remaining trap: the same run still added @lucide/vue back to package.json's dependencies (Badge itself does not use it — some components' registry entries list an icon package regardless of iconLibrary). So after any future shadcn-vue add/init call:

  1. Check git diff webui/package.json for a re-added lucide-vue-next/@lucide/vue dependency, and remove it (npm uninstall) if nothing in src/ imports from it.
  2. Check the new component's own file for a lucide-vue-next/@lucide/vue import and swap it for the FontAwesome equivalent (see src/components/ui/select/Select*.vue for the pattern already applied there).
  3. Diff src/assets/main.css anyway before committing, in case a future shadcn-vue release starts reading a different config key for the same font-injection step.

Local development

npm ci
npm run dev      # Vite dev server — /admin/api/* calls need a real
                  # gateway to fetch from; point one at the same origin or
                  # accept the "refresh failed" state while iterating on
                  # layout/styling alone.
npm run build     # what `make admin-ui` runs, plus webui/generate.mjs

Structure

  • src/stores/ — Pinia: auth (the sessionStorage key gate), dashboard (Overview/Usage, 5s poll), history (Charts, fetch-on-selection + 30s refresh).
  • src/components/ — AuthGate, OverviewView, UsageView, ChartsView/UsageChart, UsageTable; ui/ holds the shadcn-vue primitives this panel actually uses (Card, Table, Tabs, Button, Input, Alert, Select, Badge) — nothing installed and unused.
  • src/lib/ — api.ts (the /admin/api/* fetch wrapper), format.ts, key-storage.ts, chart-setup.ts.
  • src/types/api.ts — TypeScript mirrors of admin.go's JSON response shapes (adminOverviewResponse, adminUsageResponse, usageHistoryResponse).
  • generate.mjs — reads dist/ after vite build and writes ../admin_assets_gen.go; see its own header comment for why every asset is base64-encoded rather than embedded as a raw string literal.