# Design System Unification — one visual language, enforced end-to-end
Establishes **one source of truth for every visual decision**, wires the
whole app to it, and **locks it in with CI** so it can't drift back.
### Foundations
- **Design-token system ("one knob per decision").** Every colour, text
size, spacing, corner radius, and shadow is a named token defined in
exactly one place — change the token, every screen updates. Collapsed
hundreds of near-duplicate definitions and removed "fake" duplicates
that pretended to be different but weren't.
- **Shared component library (O2).** Buttons, tables, dialogs, drawers,
form fields, badges, etc. already know the correct colours, spacing, and
dark-mode behaviour; new screens compose them instead of hand-styling.
Added new primitives on this branch (`OContent`, `KpiCard`) and
standardized existing ones.
- **One page structure everywhere** (`PageLayout` / `AppPageHeader` /
`AppPage` / `OContent`) — titles, breadcrumbs, spacing, and content
edges line up identically across every screen.
- **One table implementation** — all tabular data uses the same table
(sorting, density, sticky headers, empty states).
- **Styling consolidated onto Tailwind; old systems removed** —
hand-written CSS driven to the practical minimum, the legacy **Quasar**
framework fully removed, surviving stylesheets required to justify
themselves.
- **Two-tier corner radius** — a tight **4px** for controls and a soft
**12px** for surfaces (dialogs, cards, the app shell), plus a
full-circle option — replacing five radius names that all secretly meant
the same thing.
### Detailed improvements across screens
**Page structure & alignment** — unified page shell rolled across ~40+
screens (IAM, Settings, Alerts, Dashboards, Functions, Pipelines, RUM,
Metrics, Synthetics, Billing, editors, lists); one header height; one
page-edge grid driving headers, tables, rails, and tabs; unified
side-rail widths; inset rail selection/hover pills; every tab strip on
the grid line; tightened title/subtitle spacing.
**Tables (cross-screen)** — action columns consistently centered (incl.
Organizations); unified row-number column with no "#" truncation;
non-standard tables restyled to match; loading skeletons made
geometrically identical to the loaded table; symmetric edge inset; IAM
first-column grid alignment fixed.
**Traces** — flame graph + span-detail correlation panel fixes;
correlated logs/metrics placeholder fit; sticky headers; removed a
double scrollbar + a 1px sliver; aligned table fonts/badges; polished
the service detail drawer; stream-selector + correlation alignment;
aligned loading spinners; floating overlay arrows for the
disabled-services strip.
**Logs** — field-list controls aligned (focus ring no longer clipped);
detail-drawer spacing + metrics-tab overflow fixed; Run Query toolbar
tidied; listing sizing + stray border fixed.
**Metrics** — search added to the "Type" facet rail and aligned with the
other rails; proper empty states for the explorer and facet rail.
**Dashboards** — removed inconsistent card shadows; tightened
borders/resizers/field-list spacing; aligned View Dashboard chrome to
the grid; chart colours via the token helper.
**Home** — redesigned the Usage tab; added reusable KPI stat cards so
summary strips stop drifting.
**Dark mode** — new theme-switch animation; fixed a 1px content shift on
toggle and a white flash on load; fixed AI-chat text and assorted
light/dark mismatches; completed the token-driven dark migration.
**Empty states, controls & small polish** — restored 3 broken
empty-state animations; adopted the standard empty state; added the
sliding indicator to the toggle control; fixed the Quality-page inset +
drawer badge; refreshed Search History / Schedulers; fixed the
alert-history drawer scrollbar + timeline hover; removed a stray
menu-bar border.
### Dead code & cruft removal
- **Deleted the entire legacy `utilities.css`** global stylesheet (well
over a thousand lines) — evacuated in waves, roughly half of it dead
once traced.
- **Removed Quasar entirely**, including dead `.q-*` styles and ~25
phantom `--q-*` variables that were silently breaking bits of the UI.
- Stripped hundreds of **dead CSS classes and tokens that compiled to
nothing** — e.g. 46 uses of a colour class with no backing token, a
no-op shadow class on 51 elements, dead layout/utility classes, a
leftover `card-container` block, a dead table-actions token, and a
mis-registered gradient that rendered nothing.
- Cut **unused keyframe animations (19 → 3)** and removed **unused
components** + a stray build artifact.
- Net effect: a much smaller, leaner styling surface — less to maintain,
fewer dead ends to copy.
## Safety & verification
Large but low-risk: this is overwhelmingly a **styling and structure**
change, not product behaviour or data. Guarded by the
design-token/consistency/type checks above plus the existing test suite,
and reviewed screen-by-screen.
---------
Co-authored-by: Kirtan Thakkar <kirtan@kiara.tech>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: ktx-mihir <mihir.patel@kiara.tech>
## Summary
Three pieces of frontend work from one session, all verified green.
### 1. i18n migration (the bulk)
Replaced **~1,250 hardcoded user-facing strings** across **157
components** with `vue-i18n` `t()` calls and added **1,373 English
keys** to `web/src/locales/languages/en.json`. Other languages are
populated by CI.
Coverage by area: dashboards (36), traces (26), logs (24), settings
(23), IAM (21), metrics/promql (10), RUM error tracking (8).
- Parameterized messages use named interpolation (`t('key', { n })` →
`"Deleted {n} item(s)"`).
- Keys are namespaced by area + component to avoid collisions.
- Deliberately **not** translated: copy/paste code/config snippets,
query-syntax examples (Syntax Guides), technical enum tokens (OTEL
statuses, metric types), config-default fallbacks, and download
filenames.
### 2. RUM Error Tracking UX
- **Auto-size the Issue column** so Trend / Events / Users /
First-Last-seen / Status stay visible at any screen width; long messages
and file paths truncate with tooltips instead of pushing columns
off-screen.
- **Removed the redundant refresh button** (it called the same
`runQuery` as Run query); folded its loading state and keyboard shortcut
into the Run query button.
### 3. MCP Server (IAM)
- Added **Codex** to the supported MCP clients (TOML config for
`~/.codex/config.toml`).
- Added **one-click "Add to …" install buttons** for **Cursor**, **VS
Code**, and **Claude Desktop** via editor deep links (respecting the
selected OAuth / access-token auth mode).
### Tests
Components that newly call `useI18n()` broke specs that mounted them
without an i18n provider (or with an inline message subset / a
key-returning mock). Fixed **33 spec files** by providing the real app
i18n — via `config.global` plugin, a full-locale `createI18n`, or a
key-resolving `vue-i18n` mock — **without weakening any assertion or
deleting any test**.
## Verification
- ✅ Full frontend unit suite: **39,007 passed**, 414 skipped, **0
failed** (`vitest run`).
- ✅ Type-check clean: **0 errors** (`vue-tsc`).
- ✅ `en.json` valid, canonical, and every `t()` key referenced by
changed files resolves (only 3 pre-existing dangling keys remain,
unrelated to this change).
## Notes
- 3 **pre-existing** broken key refs surfaced during validation but
predate this work and were left alone: `common.loading` (AiToolsets),
`search.vrlOnlyForTable` (SearchBar),
`settings.correlation.identityConfigNoSets` (ServiceIdentitySetup).
- An unrelated pre-existing local change to `OIcon.icons.ts` was
intentionally excluded from this PR.
this PR introduces o2 ai agent with this user able to ask o2 ai about
sql query , vrl query and logs
---------
Co-authored-by: Subhradeep Chakraborty <chakrabortysubhradeep556@gmail.com>
Co-authored-by: Taiming Liu <liutaiming3@gmail.com>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced SQL autocomplete with fuzzy matching suggestions.
- Updated syntax guide to include fuzzy matching instructions for SQL
queries.
- **Bug Fixes**
- Maintained existing logic for other completion items, ensuring
seamless integration of new features.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
#4677
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced user guidance in the Kubernetes configuration with clearer
URL format instructions.
- Improved readability and styling of SQL syntax guides across various
components.
- Updated the Scheduled Dashboards interface for better report filtering
and display.
- **Bug Fixes**
- Adjusted the handling of scheduled dashboards to ensure accurate
report filtering.
- **Style**
- Added hover effects and improved visual presentation of links and text
across multiple components.
- Reformatted content in the About section for better readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
fix#4396
1. Saved view columns not getting restored
2. Removed labels from Reset Filters and Syntax Guide buttons
3. Reduced table row height to 20px
4. Table column value getting copied as JSON
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Added a "Reset Filters" option to enhance user interface
functionality.
- **User Interface Improvements**
- Updated the search bar to use localized titles for better
internationalization.
- Enhanced the syntax guide button's tooltip presentation and improved
readability through formatting adjustments.
- Modified button styles for consistency and layout improvements in the
syntax guide.
- **Styling Changes**
- Adjusted table cell padding and height for a more compact layout in
the logs table.
- **Testing Enhancements**
- Improved UI testing robustness by updating the method for locating the
"Reset Filters" button.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced text snippet suggestions in the Query Editor with updated
labels and insert text.
- Introduced new functions for advanced search and matching operations
in the Query Editor.
- **Improvements**
- Improved search instructions for 'error' values in the Syntax Guide,
including clarifications on case sensitivity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Taiming Liu <liutaiming3@gmail.com>
BenzizaandHengfei Yang
ktx-vaidehiandgithub-actions[bot]
Abhay PadamaniandClaude Opus 4.8
Prabhat Sharma
ByteBakerandHengfei Yang
Omkar Kesarkhane
John Vandenberg