Skip to content

refactor(dashboard): lote 6 — loggers, flow-routing, logs/activity/audit/costs/quota/limits/models/context/compression/translator on the CI UI Kit (KEA-7886) - #17882

Merged
diegosouzapw merged 22 commits into
feat/new-uikitfrom
feat/new-uikit-lote6
Oct 22, 2026
Merged

diegosouzapw merged 22 commits into
feat/new-uikitfrom
feat/new-uikit-lote6

Conversation

@diegosouzapw

@diegosouzapw diegosouzapw commented Oct 21, 2026 •

Copy link
Copy Markdown
Collaborator

⚠️ base-red inherited: #17219

Lote 6 of the CI UI Kit migration (KEA-7886, Task 36): the shared loggers and flow-routing groups plus 34 screens moved onto the kit adapters and @omniroute/ui-kit/* subpaths. No kit, adapter, globals.css or layout changes.

Screens × spec × tests × screenshots

Screen / group Spec Tests realigned (new) Screenshots (_artifacts/)
loggers group (RequestLoggerV2, ProxyLogger, details, ConsoleLogViewer, RequestTimeline) shared/loggers.md 10 (+1 new loggers-kit-controls) covered by logs*
flow-routing group (ModelRoutingSection, EngineConfig*, CompressionPipelineEditor, …) shared/flow-routing.md 3 (+1 new flow-routing-kit-controls) covered by context*
/dashboard/logs, /console, /proxy, /timeline (+ /logs/activity redirect) dashboard-logs*.md — lote6-logs{,-console,-proxy,-timeline,-activity}-{light,dark,390}.png
/dashboard/activity dashboard-activity.md — (+1 new lote6-adapter-adoption) lote6-activity-*.png
/dashboard/audit, /mcp, /a2a dashboard-audit*.md — lote6-audit{,-mcp,-a2a}-*.png
/dashboard/costs, /budget, /pricing dashboard-costs*.md 1 lote6-costs{,-budget,-pricing}-*.png
/dashboard/costs/quota-share dashboard-costs-quota-share.md 6 lote6-costs-quota-share-*.png
/dashboard/quota, /limits (wrappers; limits → quota) dashboard-quota.md, dashboard-limits.md — lote6-quota-*.png, lote6-limits-*.png
/dashboard/models dashboard-models.md 2 lote6-models-*.png
/dashboard/context/* (13) dashboard-context-*.md 2 lote6-context-{ccr,llmlingua,caveman,lite,settings,aggressive,rtk,session-dedup,omniglyph,headroom,ultra,combos}-*.png
/dashboard/compression (+ studio, live, exclusions) dashboard-compression*.md 3 (incl. e2e compression-studio) lote6-compression-{studio,live,exclusions}-*.png
/dashboard/translator dashboard-translator.md 8 (+1 new translator-select-accessible-names) lote6-translator-*.png

All 96 screenshots: _artifacts/lote6-<route>-{light,dark,390}.png; fix-round re-shots (seeded call logs + MCP audit rows): _artifacts/lote6/fix1-shots/ (local disk, not committed).

P6 greps (147 scope files, before → after)

  • material-symbols-outlined 185 → 0
  • raw <button|input|select|textarea|table> 281 → 1 (hidden <input type="file"> in RtkTomlImportCard)
  • hard-coded palette 782 → 4 after the fix round (ConsoleLogViewer always-dark terminal ×3, Omniglyph rendered-page preview bg-white; the 2 timeline text-white hits are gone)
  • dark: 172 → 0; "use client" violations 0
  • 35 new i18n keys in en / pt-BR / vi (34 + requestLogger.detail.liveRefresh)

Fix round 1 (review findings)

Finding Fix
I1 timeline bar labels / NOW tab white on theme fills (illegible in dark) text-bg (inverts per theme); re-shot with seeded rows, axe on the page
I2 4 translator Selects with no accessible name (RawJsonPanel, TestBenchAccordion) label= on the Select adapter; new test RED on the loose labels → GREEN
M1 MCP bars = 2xx green (chart-4) chart-2
M2 aria-pressed + action label ModelRoutingSection → Toggle (switch "Enabled"); MonitorTab drops aria-pressed; live refresh keeps aria-pressed with a static "Live refresh" name
M3 hand-built filter bars EventTypeFilter → FilterPills; logger column chips → ColumnToggle in the table toolbar; quick-filter rows in a named role="group"
M4 raised timeout / cold import warm-up beforeAll in the 2 new kit-control files and 6760; 6760 back on the default timeout
M6 stale pendência 7 models select-all uses the Checkbox adapter (indeterminate)
M7 iconMap comment key_off rationale restored; robot in alphabetical order

Validation

  • npm run lint -- --concurrency=6 rc 0 · typecheck:core rc 0 · check:dashboard-typecheck rc 0 (after the 74636c4 back-merge, 194 pre-existing within baseline) · check:ui-icu rc 0 · check-key-completeness --warn rc 0 · check:dead-code rc 0 (363 ≤ baseline 377) · icon-map-coverage + i18n-vi-completeness green after every back-merge
  • Build (.113, head 00f7175): npm run build rc 0, "Turbopack build encountered 232 warnings" (= base); §6 e2e on that build: 37 passed, 4 skipped (a11y, compression-studio, error-pages, group-b-activity-feed, group-b-quota-plans-config, group-b-quota-share-pools, group-b-redirect-logs-activity, sidebar-navigation, translator-friendly)
  • Build (local, gate lock, same head): npm run build rc 0, 232 warnings. The fix round and the back-merges do not rebuild (the wave checkpoint rebuilds).
  • e2e note: §6 e2e on a dev server (:20166, workers=1) 30 passed / 4 skipped; 3 specs hard-code http://localhost:20128 (group-b-activity-feed, group-b-quota-plans-config, group-b-quota-share-pools; group-b-redirect-logs-activity too), so they cannot run on another port — all passed on the .113 at :20128; compression-studio re-run alone 2/2
  • Section unit tests: 93 vitest files / 690 tests (timeouts under load re-run green, except rtk-context-page-load-failure, pendência 15); 38 node files 391/391
  • Fix round (head 213a176, after back-merging feat/new-uikit 74636c4 and 45497c9 / lote 8): check:dashboard-typecheck rc 0 (194 within baseline) · check:ui-icu rc 0 · node icon-map-coverage, i18n-vi-completeness, timeline utils, settings-ui-layout-static, design-kit-bridge, translator-friendly-i18n-keys 229/229 · focused vitest 14 files / 84 tests rc 0 (--maxWorkers=2; under load 30+ some first tests of modelsCombosCatalog / console-log-viewer-follow-tail time out and pass alone, 23/23 and 6/6) · eslint on the changed files rc 0
  • Smoke: 32 routes × light/dark/390, no document overflow, 0 raw tables, 0 page errors; fix round on a dev server (:20181) with seeded call_logs + mcp_tool_audit rows — logs/timeline, logs, logs/proxy, activity, translator (rawjson, testbench, monitor), models, settings/routing × light/dark/390: no document overflow, 0 Material in the lote-6 pages, 0 page errors, axe (wcag2a/aa incl. color-contrast) 0 violations on the timeline in both themes with 8 bars drawn, translator selects named Source / Target / Target Provider. Remaining axe contrast hits are not from this lote's changes: logger provider quick-filter chips (brand colours at opacity-70, unchanged from before the lote), protocol badge brand colour, and the dark Badge variant="primary" tone in globals.css (deferred to the globals owner)

Pendências (kit gaps / follow-ups)

  1. RequestLoggerDetail stays a custom in-container dialog (not kit Sheet + Tabs): pinned tests rely on window-level Escape, backdrop click and in-container queries; the kit Sheet portals and owns Escape. Its rows are click-only (pre-existing); the kit row-link pattern belongs with the move to Sheet.
  2. Kit Wizard hard-codes English labels ("Step {n} of {m}", Back, Skip for now, Save and close/exit, Setup progress, Go to / Go back to, ", completed", Saving…) and requires onSkip → needs a labels object, hideSkip and a footer slot; PoolWizard is built from primitives meanwhile.
  3. Kit Alert has no non-dismissible mode (persistent still renders the dismiss button); hidden with [&>.ci-alert__dismiss]:hidden. Needs dismissible={false}.
  4. Kit Sheet showClose hard-codes "Close panel" → needs closeLabel.
  5. Kit DataTableShell toolbarActions hard-codes "Table actions" and the default result label "result(s)"; kit Pagination / PageSizeControl English defaults ("Rows", "Rows per page") → need label props (we pass resultLabel).
  6. Adapter Collapsible has no controlled open / onOpenChange → StreamTransformer / CompressionPreview accordions keep their own header (a kit ghost Button) for the forceOpen / lazy-render contract.
  7. Adapter Checkbox has no indeterminate — stale: the adapter forwards it; the models select-all now uses it (fix round 1).
  8. Kit Progress does not forward aria-label → CatalogBulkActionBar keeps its own named role=progressbar.
  9. Kit Stat value is number-only → stat cards kept on Card.
  10. MonacoEditor defineTheme still uses hex (out of scope).
  11. Palettes kept by design: ConsoleLogViewer always-dark terminal hex, colors.ts brand / protocol / type / level palettes, Omniglyph bg-white page preview.
  12. Pre-existing English literals left for the i18n wave ("tokens compressed", TTFT title, ModelRoutingSection paid-pattern fallback, translator translateOrFallback English fallbacks).
  13. costs/CostOverviewTab dead CHART_COLORS const left (already a suppressed unused var).
  14. Spec deviations: /dashboard/models keeps the Card frame — no DataTableShell, no MultiSelectFilter, no Sheet detail; /dashboard/context/combos named combos stay as cards where spec §4 says Table.
  15. Per-test timeouts on a loaded box: rtk-context-page-load-failure (20 s, pre-existing; the base fails the same way) — cold barrel import. compression-combos-routing-mode-6760 raised its first test to 20 s in this lote; the fix round replaced that with a warm-up beforeAll and restored the default.
  16. /dashboard/costs/pricing renders lote 5's settings/components/PricingTab — resolved by the 74636c4 back-merge (lote 5a): 0 Material spans in the source.
  17. RequestTimeline header is a fixed-height single row (HEADER_HEIGHT feeds the canvas maths) → clipped at 390 px; needs a responsive two-row header (pre-existing).
  18. e2e specs group-b-activity-feed, group-b-quota-plans-config, group-b-quota-share-pools, group-b-redirect-logs-activity hard-code http://localhost:20128 — they fail on any other port; should use the config baseURL.
  19. Flow-routing CliToolCard / CliComparisonCard / CliConceptCard / SkillsConceptCard: lote 7's reviewed versions kept at the back-merge (they use Card / Badge instead of this lote's kit Table); no functional loss, tests green.

Also open (390 px): context/omniglyph rendered-page preview is wider than its card (fixed-size image); context/settings compact select w-44 is 2 px over. MonitorTab auto-refresh keeps the base's action aria-label ("Pause auto-refresh") while the visible text says "Live auto-refreshing" (label-in-name, pre-existing, pinned by translator-friendly-monitor-tab); the fix round only dropped the added aria-pressed.

…kit-lote6

# Conflicts:
#	src/shared/constants/iconMap.ts
…kit-lote6

# Conflicts:
#	src/shared/constants/iconMap.ts
…kit-lote6

# Conflicts:
#	src/shared/components/SkillsConceptCard.tsx
#	src/shared/components/cli/CliComparisonCard.tsx
#	src/shared/components/cli/CliConceptCard.tsx
#	src/shared/components/cli/CliToolCard.tsx
#	src/shared/constants/iconMap.ts
…ect names, adapters) (KEA-7886)

- RequestTimeline: bar labels and the NOW tab use text-bg (inverts per theme) instead of
  white, which was ~1.5-2.2:1 on the dark-mode pastel fills; MCP bars move to chart-2
  (chart-4 equals the 2xx success green in both themes).
- Translator RawJsonPanel / TestBenchAccordion: the 4 format/provider selects get their
  name through the Select adapter's label prop instead of a loose <label>.
- ModelRoutingSection rule toggle -> Toggle adapter (switch named "Enabled");
  MonitorTab auto-refresh drops aria-pressed; RequestLoggerDetail live refresh keeps
  aria-pressed with a static "Live refresh" name (new key in en/pt-BR/vi).
- EventTypeFilter -> FilterPills; logger column chips -> ColumnToggle in the table
  toolbar; logger quick filters wrapped in a named group.
- Models select-all uses the Checkbox adapter (forwards indeterminate).
- iconMap: restore the base's key_off rationale comment; robot key in order.
- Tests: new translator-select-accessible-names (RED on the loose labels) and
  lote6-adapter-adoption; ModelRoutingSection switch case; warm-up beforeAll in the
  two lote-6 kit-control files and 6760, whose 20 s timeout is back to the default.
…kit-lote6

# Conflicts:
#	src/shared/constants/iconMap.ts
@diegosouzapw diegosouzapw changed the title feat(dashboard): lote 6 — loggers, flow-routing, logs/activity/audit/costs/quota/limits/models/context/compression/translator on the CI UI Kit (KEA-7886) refactor(dashboard): lote 6 — loggers, flow-routing, logs/activity/audit/costs/quota/limits/models/context/compression/translator on the CI UI Kit (KEA-7886) Oct 22, 2026
…kit-lote6

# Conflicts:
#	src/shared/constants/iconMap.ts
@diegosouzapw
diegosouzapw merged commit 95ff9c2 into feat/new-uikit Oct 22, 2026
@diegosouzapw
diegosouzapw deleted the feat/new-uikit-lote6 branch October 22, 2026 04:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant