7 Commits

Include renames

Author	SHA1	Message	Date
lukaszraczylo	24809ed25a	fix(webui): shared SearchInput/useSearchQuery, correct expand rationale ... Address review of the user/group search filter (feat/user-search): - Correct the "group name match does not auto-expand" rationale in UsageView.vue and lib/search-expand.ts. The prior comment claimed Overview has no provider-name search — false: OverviewView's providerMatches checks each model's full ROUTABLE id (`${provider}/${model}`, lib/format.ts's routableModelId), so a provider-name query does match and auto-expand there. The actual reason Usage withholds auto-expand from a name-only match: a group's name is already legible on its collapsed trigger row, so expanding every name match too would dump full member rosters for no reason; a member-only match has no such shortcut and still needs the reveal. Behavior is unchanged — only the (now accurate) justification. - Extract components/SearchInput.vue and composables/useSearchQuery.ts. OverviewView's model search, UsageView's user/group search, and ChartsView's scope-picker search were three ~22-line copies of the same icon+Input+clear-button markup, plus three copies of the query/normalized/hasQuery/clear quartet. All three views now consume the shared component/composable. SearchInput's clear button is a real shadcn Button (variant="ghost", size="icon-xs" — 24x24px) instead of a hand-rolled <button>, fixing a WCAG 2.2 SC 2.5.8 hit-target/ focus-visible gap once instead of three times. - ChartsView's search input: w-48 (clipped the 22-char placeholder) to w-56, matching the sibling SelectTrigger's width. - UsageView.vue's visibleMembers now calls the exported, tested matchingMembersOfGroup helper instead of re-implementing the same filter inline with userMatches. - Reworded the "shared with ChartsView.vue" claims on membersOfGroup (usage-search.ts) and in UsageView.vue's visibleMembers doc comment: ChartsView never calls membersOfGroup directly, only indirectly via groupMatches -> matchingMembersOfGroup. - UsageView's groups/users empty-state messages now follow Overview's aliasEmptyMessage three-way pattern ("none configured" vs "no groups/users match ..." vs "none"), distinguishing nothing-configured from nothing-matches instead of collapsing both to the same text. Gate unchanged: npm run build + npm test + vue-tsc, make admin-ui (separate regen commit), go test ./... -count=1, gofmt/vet, make yaegi-check.	2026-08-21 12:17:04 +01:00
lukaszraczylo	d6b9879813	feat(webui): user and group search filter on usage and charts views ... Add a "Filter users or groups" search input to UsageView, mirroring OverviewView's model search (same Input component, icon, and clear-button styling). Case-insensitive, trimmed substring match: - A user matches when its own name contains the query. - A group matches when its own name contains the query OR it has at least one matching member. Groups accordion shows only matching groups, sorted through the existing Groups toolbar unchanged. A group that matches only via a member auto-expands (using the same tested override semantics as Overview's provider search); a group matched by its own name is not force-expanded, since the match is already visible on its collapsed trigger row. The nested members table inside an expanded group shows every member when the group matched by name, and only the matching members when it matched via a member. The flat Users table filters to matching users, plus every member of a name-matched group. The Total card and ChartsView's chart rendering are untouched by the filter. ChartsView's scope picker (Select) gets the identical search input, filtering the user/group option list it offers. "Total" always stays in the list, and the currently selected scope is always kept in the list even if a new query would otherwise hide it, so an active chart is never torn down or re-labeled by narrowing the picker. Generalize lib/provider-expand.ts into lib/search-expand.ts: the same two-set (manuallyExpanded/manuallyCollapsed) auto-expand/override state machine now drives both Overview's providers and Usage's groups, keyed on generic string ids instead of provider names specifically. OverviewView.vue is updated to the renamed computeExpandedItems/toggleItemExpand exports; its own behavior is unchanged. The moved spec (search-expand.spec.ts) keeps all 9 original cases plus 2 new ones pinning the same semantics against non-provider (group-shaped) ids. Add lib/usage-search.ts with the shared user/group matching helpers (userMatches, groupNameMatches, membersOfGroup, matchingMembersOfGroup, groupMatches) so UsageView and ChartsView share one matching implementation, with its own vitest spec. UsageTable.vue gains an optional emptyMessage prop (threaded to DataTable) so UsageView can show a "no users match ..."/"no groups match ..." message under an active filter, matching Overview's own alias-search empty-state pattern. No backend/Go logic changes; filtering is client-side over the already-polled GET /admin/api/usage response.	2026-08-21 12:16:57 +01:00
lukaszraczylo	7f500ff803	fix(webui): shared sort header, coherent group sorting, real expand-state tests	2026-08-21 11:27:32 +01:00
lukaszraczylo	60d66ca147	feat(webui): shadcn-vue accordion + sortable DataTable, full-width panel ... Component-first admin-panel rework (operator directive), replacing hand-rolled patterns with the actual shadcn-vue library components rather than working around them. - Providers (OverviewView) and Groups (UsageView) now render as a real shadcn-vue Accordion: trigger is the summary line, content holds the detail (base URL, last refresh/error, model chips for providers; full stat grid + member users for groups) — the earlier hand-rolled second-<TableRow> toggle is retired. lib/provider-expand.ts's tested two-set expand-state module is unchanged; only the template now adapts it to Accordion's type="multiple" v-model via a writable computed instead of driving a plain v-if. - Usage view: expanding a group shows its member users' own usage rows — a client-side join on AdminUsageEntryView.groupName, which admin.go already sets per user (verified via admin_test.go's existing TestAdminUsage_MathAgainstSeededCounters; no backend change needed). - New DataTable.vue: the shadcn-vue DataTable pattern (@tanstack/vue-table, pinned to ^8.21.3 — the version whose API matches the documented pattern; npm's default "latest" resolves to v9, a breaking rewrite with a different API) factored into one reusable, generic component so every real table (users usage, aliases, a group's nested member list) gets clickable sortable headers with asc/desc indicators for free. usage-columns.ts holds the shared ColumnDef set; UsageTable.vue now delegates to DataTable. Groups themselves cannot be a literal <table> (Accordion wraps content in a <div>, illegal inside <tbody>), so their own sortability is driven by the same columns headlessly, surfaced as a small header-button toolbar above the Accordion. - Aliases table: alias id gets the ModelChip copy treatment (the alias name is the routable string); target stays plain text. - App.vue: dropped the max-w-6xl container — the panel now uses the full viewport width with responsive gutters (px-4 sm:px-6 lg:px-8). Table.vue already wraps every table in its own overflow-x-auto container, so a wide table still scrolls itself, never the page. shadcn-vue add accordion re-added @lucide/vue and required swapping its Chevron icons for FontAwesome (webui/README.md's own documented trap); components.json's iconLibrary/font keys stayed absent (verified main.css byte-identical after the add). Browser-verified against the real integration stack (real /admin over the Yaegi plugin, strict CSP incl. style-src 'self'): provider/group accordion expand, search auto-expand through the new Accordion adapter, sort toggles on aliases/users/groups-toolbar/nested-member tables, alias copy-to-clipboard, full-width at 1920px. Zero console errors (one unrelated MetaMask extension log).	2026-08-21 11:12:59 +01:00
lukaszraczylo	b39d4e92c9	fix(webui): query-safe expand state, prefixed search, accessible row toggle ... Review fix round (5 Important + 3 folded) against the provider-model accordion (f9b289f): 1. Manual expand state corruption during an active search. Clicking a row that was only auto-expanded by the search (never manually opened) read the RAW manual flag as false and added it to manuallyExpanded - invisible immediately (already showing via auto-expand) but wrongly left expanded after the search cleared. Fixed with a two-set design in a new, Vue-free module (webui/src/lib/provider-expand.ts): manuallyExpanded (the real, cross-search manual state) plus manuallyCollapsed (an override a click can set to suppress an auto-expand while a query is active). toggleProviderExpand now flips against the caller-computed EFFECTIVE current state, not the raw manual flag. manuallyCollapsed clears whenever the query becomes empty (watched, not just the clear button, so backspacing to empty resets it too). Verified two ways: a throwaway Node assertion script (node --experimental-strip-types, no test-runner dependency added) exercises the exact review-described sequence against the plain module; the identical sequence was then reproduced live in a real browser and screenshotted at each step. 2. Search matched raw model ids while chips display and copy the prefixed routable id - copying a chip and pasting it into search found nothing. Fixed: matching is now against routableModelId(p.name, m) for both the provider-level filter and the per-provider visible-model filter - strictly more permissive than the bare id. Verified live: searching the full "openai/gpt-4o-mini" string now matches. 3. role="button" on a <tr> broke table AT semantics - overriding a <tr>'s row semantics to "button" strips it from the table's row/column structure for a screen reader. Moved the interactive control to a real <button type="button"> inside the first cell (the chevron+name span); the row's own @click stays as a click-anywhere-in-row convenience, and the button needs no click handler of its own - its native click bubbles up to the row's listener, so exactly one place ever runs the toggle. Added a visible focus style matching the existing shadcn-vue focus-visible convention used elsewhere in this panel - verified live, keyboard Tab produces a clearly visible ring. aria-controls is set only while a provider is expanded, never pointing at an id that does not yet exist (the content row stays v-if, lazy) - verified live via a direct DOM check. Provider names are interpolated into that id unescaped, not sanitized in JS - providers.go's configNamePattern (charset [a-zA-Z0-9._-]) already rejects any character an HTML id/attribute value would need escaped, before this endpoint can ever see one. 4. DRY: providerState.knownIDs() and snapshot() independently rebuilt the identical explicit-union-discovered merge-and-sort. Extracted knownIDsLocked() (no locking of its own - caller must already hold st.mu), consumed by both knownIDs() (takes the lock itself) and snapshot() (already holds the lock, calls the lock-free variant directly - a call to the locking knownIDs() from inside snapshot would deadlock the non-reentrant mutex). snapshot()'s own doc comment rewritten to describe the actual shared-helper shape instead of the now-removed duplication it used to explain away. 5. (folded) Corrected a wrong claim in OverviewView.vue's own "why not Accordion/Collapsible" doc comment: a <div> inside a <tbody> does NOT get reparented by the browser's HTML parser ("foster parenting") in this app - Vue renders entirely via DOM APIs, never by parsing an HTML string, so the parser's foster-parenting algorithm (which only runs building a DOM tree from a token stream) never executes here. What actually breaks is CSS table layout: CSS2.1 17.2.1's anonymous-table- object generation misbehaves around a block box sitting directly inside a table-row-group box. The comment now says this. 6. (folded) Clipboard fallback hardening: ModelChip.vue's doc comment now states the select-text fallback is the ONLY path a click ever takes on a plain-HTTP admin deployment (Clipboard API needs a secure context), not a rare edge case. A genuine copy failure now sets a distinct "failed" state (destructive-colored icon, "Copy failed" title, auto-resets) instead of bailing silently. Regenerated via make admin-ui; admin_assets_gen.go = 850,968 bytes. Gate: go build/gofmt/vet/fieldalignment clean, go test -count=1 ok 6.4s, go test -race ok 7.6s, golangci-lint clean (1 pre-existing unrelated resp.go finding), make yaegi-check OK, npm run build clean, make integration ok 45.0s (needed 3 attempts - TestUsersFileHotReload is a pre-existing flake, now observed at least 3 times across this body of work, unrelated to this diff; flagged for follow-up, not fixed here).	2026-08-21 10:42:48 +01:00
lukaszraczylo	f9b289f1ea	feat(webui): provider model accordion ... Clicking a provider row in the dashboard expands to show its model list, with a search filter and copy-to-clipboard on each model. Backend (registry.go/admin.go): providerSnapshot gains models []string - the sorted explicit union discovered id set, computed in the SAME providerState.mu critical section as lastRefresh/lastErr (not via a separate knownIDs() call, which takes the same non-reentrant lock and would deadlock) so the three values are never assembled from two separate locked passes a concurrent finishRefresh could interleave between. adminProviderView exposes it as models (never nil - a real, if empty, JSON array). New tests: overview shape asserts sorted models per provider; a new TestModelRegistry_Snapshot_ModelsStaleWhileError proves a failed refresh after an earlier success keeps the previous discovered set (existing stale-while-error semantics, no special handling added); TestAdmin_SecretRedaction unaffected (model ids are not secrets, still passes as-is). Frontend: the accordion is NOT shadcn-vue's Accordion or Collapsible - both wrap trigger+content in one div, which cannot legally sit between two tr elements inside a table/tbody. Installed Collapsible via the CLI to check (verified components.json's now- defused font/iconLibrary omission holds under a real install: main.css stayed byte-for-byte unchanged) and inspected its source: reka-ui's CollapsibleContent does support an "as" prop that could force it onto a tr, but its animation-measurement code (getBoundingClientRect + inline transition styles) is untested in that shape and not worth taking on for an instant show/hide with no transition - removed the installed files, kept a plain reactive Set<string> + v-if second TableRow, which reuses Accordion's own visual language (rotating chevron, keyboard-accessible trigger row: role=button, tabindex, Enter/Space handlers) without misusing a component built for block content. Model chips (new ModelChip.vue) show the full ROUTABLE id - "{providerName}/{modelId}" unconditionally, so a discovered id that already contains a slash (uni/deepseek-v4-flash-0731 on provider "real") renders as real/uni/deepseek-v4-flash-0731 and stays copy-paste-valid - and copy that id to the clipboard on click (lib/clipboard.ts: navigator.clipboard.writeText with a select-the-text fallback when the Clipboard API is unavailable, never the deprecated execCommand('copy')), with a brief checkmark copied-state affordance. No CSP change: Clipboard access is a browser permission, not a CSP directive. Search input (OverviewView.vue) filters the providers table to providers with a matching model (case-insensitive substring) and the aliases table to aliases whose own name or target matches, auto- expanding matching providers while a query is active and filtering each expanded provider's own chip list down to just its matches (so a 72-model provider does not stay a 72-chip wall for a 1-model search). Manual expand/collapse state is tracked separately from the search's own auto-expand set, so clearing the query restores exactly what the user had open by hand - nothing to explicitly "restore", since the auto-expand set was never written into the manual one. Integration: TestAdminDashboard's overview assertion extended (adminProviderModels helper) to check the openai provider's models array contains dynamic.yml.tmpl's explicit "gpt-mock" model - stays API-level (asserts the JSON payload), not the rendered HTML, so the prefixed-display-form request is left at the frontend only per scope. Regenerated via make admin-ui; admin_assets_gen.go included.	2026-08-21 10:18:57 +01:00
lukaszraczylo	655bbcbf2c	feat(webui): vue admin panel source ... Vue 3 + TypeScript + Pinia + Tailwind v4 + shadcn-vue + Chart.js admin panel source under webui/, built with Vite. Views: Overview (providers, redis/cache/retry status, model aliases), Usage (per-user/per-group/total tables with tokensIn/tokensOut/cost + limits), Charts (scope selector, req/tokens(stacked in-out)/cost metric tabs, 24h/30d/12mo window switcher, fed by GET /admin/api/usage/history). Pinia stores: auth (sessionStorage key gate, x-api-key header, 401/403 re-prompt), dashboard (5s poll), history (fetch-on-selection + 30s refresh). Design: deliberate neutral warm-neutral palette with a signature teal accent (no default Inter/purple-gradient/glassmorphism), real typographic hierarchy via the platform UI/mono font stacks (zero external assets - no Google Fonts), dark+light via prefers-color-scheme (no class toggle, no theme switcher). Charts: zero-based bars, honest axes, Okabe-Ito colorblind-safe series, tokens-in/out as a distinguishable stacked pair. vite.config.ts: base '/admin/' (matches admin.go's route layout) and build.modulePreload.polyfill:false (no inline bootstrap script, so the tightened admin CSP needs no 'unsafe-inline'). Code-split: Chart.js (ChartsView) loads lazily, not in the initial bundle. generate.mjs reads dist/ after `vite build` and writes ../admin_assets_gen.go (not committed by this change) - base64-encodes every asset, decoded once at package-var init; documented rationale in the script's own header comment. Hygiene: webui/go.mod walls webui/ off from the repo root's `go build`/ `vet`/`test ./...` (npm's node_modules bundles a stray .go file that would otherwise be swept in); tools/yaegi-check/main.go excludes webui/ from its GOPATH copy for the same reason. webui/ export-ignored (.gitattributes) from release source tarballs; webui/node_modules/ gitignored. tsconfig.app.json/tsconfig.node.json's JSONC comments dropped (TS itself is fine with either; the global pre-commit JSON validator is not) - no config values changed.	2026-08-21 09:21:41 +01:00