mgv-backoffice 1.36.0 → 1.36.2

package/src/components/BasePillPickerModal.test.ts

@@ -1,95 +1,95 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BasePillPickerModal from './BasePillPickerModal.vue'
-import type { PillPickerItem } from '../types/pillPicker'
-
-const items: PillPickerItem[] = [
-  { id: 'STOCK:AAPL', label: 'AAPL', group: 'STOCK' },
-  { id: 'STOCK:MSFT', label: 'MSFT', group: 'STOCK', title: 'Microsoft' },
-  { id: 'CRYPTO:BTC/USD', label: 'BTC/USD', group: 'CRYPTO' },
-]
-
-const groups = [
-  { value: 'STOCK', label: 'Stock' },
-  { value: 'CRYPTO', label: 'Crypto' },
-]
-
-function mountPicker(props: Record<string, unknown> = {}) {
-  return mount(BasePillPickerModal, {
-    props: { title: 'Pick one', items, ...props },
-    global: { stubs: { teleport: true } },
-  })
-}
-
-// Pills are the buttons inside the flex-wrap grid — not the segmented
-// control's buttons and not the footer Close.
-function pillLabels(wrapper: ReturnType<typeof mountPicker>): string[] {
-  return wrapper
-    .findAll('.flex.flex-wrap.gap-2 > button')
-    .map((b) => b.text())
-}
-
-describe('BasePillPickerModal', () => {
-  it('renders one pill per item and emits pick with the clicked item', async () => {
-    const wrapper = mountPicker()
-    expect(pillLabels(wrapper)).toEqual(['AAPL', 'MSFT', 'BTC/USD'])
-    await wrapper.findAll('.flex.flex-wrap.gap-2 > button')[1].trigger('click')
-    expect(wrapper.emitted('pick')).toEqual([[items[1]]])
-  })
-
-  it('narrows by free text, case-insensitively, and shows the no-match message', async () => {
-    const wrapper = mountPicker({ noMatchMessage: 'nothing here' })
-    await wrapper.find('input').setValue('btc')
-    expect(pillLabels(wrapper)).toEqual(['BTC/USD'])
-    await wrapper.find('input').setValue('zzz')
-    expect(wrapper.text()).toContain('nothing here')
-  })
-
-  it('renders the group toggle with All prepended and narrows by group', async () => {
-    const wrapper = mountPicker({ groups })
-    // Re-query before each click — the grid re-render replaces the buttons,
-    // so a wrapper captured before a click goes stale.
-    const seg = () => wrapper.findAll('[role="group"] button')
-    expect(seg().map((b) => b.text())).toEqual(['All', 'Stock', 'Crypto'])
-    await seg()[2].trigger('click')
-    expect(pillLabels(wrapper)).toEqual(['BTC/USD'])
-    await seg()[0].trigger('click')
-    expect(pillLabels(wrapper)).toEqual(['AAPL', 'MSFT', 'BTC/USD'])
-  })
-
-  it('hides the group toggle when no groups are passed', () => {
-    const wrapper = mountPicker()
-    expect(wrapper.find('[role="group"]').exists()).toBe(false)
-  })
-
-  it('shows the empty message instead of the filter row when there are no items', () => {
-    const wrapper = mountPicker({ items: [], emptyMessage: 'nothing configured' })
-    expect(wrapper.text()).toContain('nothing configured')
-    expect(wrapper.find('input').exists()).toBe(false)
-  })
-
-  it('applies the mono font to the input and pills only when asked', () => {
-    const mono = mountPicker({ mono: true })
-    expect(mono.find('input').classes()).toContain('font-mono')
-    expect(mono.findAll('.flex.flex-wrap.gap-2 > button')[0].classes()).toContain('font-mono')
-
-    const plain = mountPicker()
-    expect(plain.find('input').classes()).not.toContain('font-mono')
-  })
-
-  it('forwards an item title to the pill tooltip', () => {
-    const wrapper = mountPicker()
-    expect(
-      wrapper.findAll('.flex.flex-wrap.gap-2 > button')[1].attributes('title'),
-    ).toBe('Microsoft')
-  })
-
-  it('emits close from the footer button', async () => {
-    const wrapper = mountPicker({ closeText: 'Dismiss' })
-    const buttons = wrapper.findAll('button')
-    const closeBtn = buttons[buttons.length - 1]
-    expect(closeBtn.text()).toBe('Dismiss')
-    await closeBtn.trigger('click')
-    expect(wrapper.emitted('close')).toHaveLength(1)
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BasePillPickerModal from './BasePillPickerModal.vue'
+import type { PillPickerItem } from '../types/pillPicker'
+
+const items: PillPickerItem[] = [
+  { id: 'STOCK:AAPL', label: 'AAPL', group: 'STOCK' },
+  { id: 'STOCK:MSFT', label: 'MSFT', group: 'STOCK', title: 'Microsoft' },
+  { id: 'CRYPTO:BTC/USD', label: 'BTC/USD', group: 'CRYPTO' },
+]
+
+const groups = [
+  { value: 'STOCK', label: 'Stock' },
+  { value: 'CRYPTO', label: 'Crypto' },
+]
+
+function mountPicker(props: Record<string, unknown> = {}) {
+  return mount(BasePillPickerModal, {
+    props: { title: 'Pick one', items, ...props },
+    global: { stubs: { teleport: true } },
+  })
+}
+
+// Pills are the buttons inside the flex-wrap grid — not the segmented
+// control's buttons and not the footer Close.
+function pillLabels(wrapper: ReturnType<typeof mountPicker>): string[] {
+  return wrapper
+    .findAll('.flex.flex-wrap.gap-2 > button')
+    .map((b) => b.text())
+}
+
+describe('BasePillPickerModal', () => {
+  it('renders one pill per item and emits pick with the clicked item', async () => {
+    const wrapper = mountPicker()
+    expect(pillLabels(wrapper)).toEqual(['AAPL', 'MSFT', 'BTC/USD'])
+    await wrapper.findAll('.flex.flex-wrap.gap-2 > button')[1].trigger('click')
+    expect(wrapper.emitted('pick')).toEqual([[items[1]]])
+  })
+
+  it('narrows by free text, case-insensitively, and shows the no-match message', async () => {
+    const wrapper = mountPicker({ noMatchMessage: 'nothing here' })
+    await wrapper.find('input').setValue('btc')
+    expect(pillLabels(wrapper)).toEqual(['BTC/USD'])
+    await wrapper.find('input').setValue('zzz')
+    expect(wrapper.text()).toContain('nothing here')
+  })
+
+  it('renders the group toggle with All prepended and narrows by group', async () => {
+    const wrapper = mountPicker({ groups })
+    // Re-query before each click — the grid re-render replaces the buttons,
+    // so a wrapper captured before a click goes stale.
+    const seg = () => wrapper.findAll('[role="group"] button')
+    expect(seg().map((b) => b.text())).toEqual(['All', 'Stock', 'Crypto'])
+    await seg()[2].trigger('click')
+    expect(pillLabels(wrapper)).toEqual(['BTC/USD'])
+    await seg()[0].trigger('click')
+    expect(pillLabels(wrapper)).toEqual(['AAPL', 'MSFT', 'BTC/USD'])
+  })
+
+  it('hides the group toggle when no groups are passed', () => {
+    const wrapper = mountPicker()
+    expect(wrapper.find('[role="group"]').exists()).toBe(false)
+  })
+
+  it('shows the empty message instead of the filter row when there are no items', () => {
+    const wrapper = mountPicker({ items: [], emptyMessage: 'nothing configured' })
+    expect(wrapper.text()).toContain('nothing configured')
+    expect(wrapper.find('input').exists()).toBe(false)
+  })
+
+  it('applies the mono font to the input and pills only when asked', () => {
+    const mono = mountPicker({ mono: true })
+    expect(mono.find('input').classes()).toContain('font-mono')
+    expect(mono.findAll('.flex.flex-wrap.gap-2 > button')[0].classes()).toContain('font-mono')
+
+    const plain = mountPicker()
+    expect(plain.find('input').classes()).not.toContain('font-mono')
+  })
+
+  it('forwards an item title to the pill tooltip', () => {
+    const wrapper = mountPicker()
+    expect(
+      wrapper.findAll('.flex.flex-wrap.gap-2 > button')[1].attributes('title'),
+    ).toBe('Microsoft')
+  })
+
+  it('emits close from the footer button', async () => {
+    const wrapper = mountPicker({ closeText: 'Dismiss' })
+    const buttons = wrapper.findAll('button')
+    const closeBtn = buttons[buttons.length - 1]
+    expect(closeBtn.text()).toBe('Dismiss')
+    await closeBtn.trigger('click')
+    expect(wrapper.emitted('close')).toHaveLength(1)
+  })
+})

package/src/components/BaseRemoveButton.vue

@@ -1,22 +1,22 @@
-<template>
-  <!--
-    The "×" remove-row affordance used beside repeatable form rows
-    (extracted from WireMate's CreateMock, where the identical red ×
-    button appeared on every key/value, matcher, and cookie row).
-
-    Renders a multiplication sign; name it for screen readers via
-    `aria-label` (falls through as an attr, as do `title`, `disabled`,
-    and any extra classes like `pt-1` / `self-start`).
-  -->
-  <button
-    type="button"
-    class="px-2 text-lg leading-none text-red-400 hover:text-red-600 transition-colors cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:text-gray-400"
-    @click="emit('click')"
-  >
-    &times;
-  </button>
-</template>
-
-<script lang="ts" setup>
-const emit = defineEmits<{ click: [] }>()
-</script>
+<template>
+  <!--
+    The "×" remove-row affordance used beside repeatable form rows
+    (extracted from WireMate's CreateMock, where the identical red ×
+    button appeared on every key/value, matcher, and cookie row).
+
+    Renders a multiplication sign; name it for screen readers via
+    `aria-label` (falls through as an attr, as do `title`, `disabled`,
+    and any extra classes like `pt-1` / `self-start`).
+  -->
+  <button
+    type="button"
+    class="px-2 text-lg leading-none text-red-400 hover:text-red-600 transition-colors cursor-pointer rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:text-gray-400"
+    @click="emit('click')"
+  >
+    &times;
+  </button>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits<{ click: [] }>()
+</script>

package/src/components/BaseSpecFields.test.ts

@@ -55,6 +55,45 @@ describe('BaseSpecFields', () => {
     ])
   })
 
+  it('truncates fractional input on integer fields (e.g. a pasted decimal)', async () => {
+    const wrapper = mountFields()
+    const lookback = wrapper.findAll('input[type="number"]')[1]
+    await lookback.setValue('2.5')
+    expect(wrapper.emitted('update')).toEqual([['lookback', 2]])
+  })
+
+  it('blocks decimal-separator and exponent keys on integer fields only', () => {
+    const wrapper = mountFields()
+    const [threshold, lookback] = wrapper.findAll('input[type="number"]')
+    const press = (input: typeof lookback, key: string) => {
+      const ev = new KeyboardEvent('keydown', { key, cancelable: true })
+      input.element.dispatchEvent(ev)
+      return ev.defaultPrevented
+    }
+    for (const key of ['.', ',', 'e', 'E']) {
+      expect(press(lookback, key)).toBe(true)
+      expect(press(threshold, key)).toBe(false)
+    }
+    expect(press(lookback, '5')).toBe(false)
+  })
+
+  it('refuses pastes with non-integer content on integer fields', () => {
+    const wrapper = mountFields()
+    const lookback = wrapper.findAll('input[type="number"]')[1]
+    const paste = (text: string) => {
+      // jsdom has no ClipboardEvent constructor — a plain cancelable Event
+      // with a stubbed clipboardData exercises the same handler path.
+      const ev = new Event('paste', { cancelable: true })
+      Object.defineProperty(ev, 'clipboardData', { value: { getData: () => text } })
+      lookback.element.dispatchEvent(ev)
+      return ev.defaultPrevented
+    }
+    expect(paste('0.5')).toBe(true)
+    expect(paste('2e3')).toBe(true)
+    expect(paste('12')).toBe(false)
+    expect(paste('-3')).toBe(false)
+  })
+
   it('never mutates params directly', async () => {
     const frozen = Object.freeze({ ...params })
     const wrapper = mount(BaseSpecFields, { props: { specs, params: frozen } })

package/src/components/BaseSpecFields.vue

@@ -32,9 +32,30 @@ function onCheckbox(key: string, e: Event) {
 // Mirror v-model.number: a parseable value becomes a number, anything else
 // (including a cleared field, which becomes '') passes through as the raw
 // string so the owner's "enter a valid number" validation can catch it.
-function onNumber(key: string, raw: string) {
+// Integer specs truncate any fractional value (a pasted "2.5" becomes 2 —
+// typed decimals never get this far, see onIntegerKeydown).
+function onNumber(spec: SpecField, raw: string) {
   const n = parseFloat(raw)
-  emit('update', key, Number.isNaN(n) ? raw : n)
+  if (Number.isNaN(n)) {
+    emit('update', spec.key, raw)
+    return
+  }
+  emit('update', spec.key, spec.type === 'integer' ? Math.trunc(n) : n)
+}
+
+// type="number" step=1 only flags decimals as :invalid — it doesn't stop them
+// being typed — so integer fields swallow the decimal separators (and the
+// exponent key) at the keyboard, and refuse pastes carrying anything beyond
+// an optional sign and digits.
+function onIntegerKeydown(e: KeyboardEvent) {
+  if (e.key === '.' || e.key === ',' || e.key === 'e' || e.key === 'E') {
+    e.preventDefault()
+  }
+}
+
+function onIntegerPaste(e: ClipboardEvent) {
+  const text = e.clipboardData?.getData('text') ?? ''
+  if (!/^-?\d*$/.test(text.trim())) e.preventDefault()
 }
 </script>
 
@@ -72,7 +93,10 @@ function onNumber(key: string, raw: string) {
         type="number"
         :step="spec.step ?? (spec.type === 'integer' ? 1 : 0.01)"
         :min="spec.min ?? undefined"
-        @update:modelValue="(v: string) => onNumber(spec.key, v)"
+        :inputmode="spec.type === 'integer' ? 'numeric' : undefined"
+        @keydown="spec.type === 'integer' && onIntegerKeydown($event)"
+        @paste="spec.type === 'integer' && onIntegerPaste($event)"
+        @update:modelValue="(v: string) => onNumber(spec, v)"
       />
 
       <p v-if="spec.help" class="text-[11px] text-slate-400 mt-1">{{ spec.help }}</p>

package/src/components/BaseStatBreakdown.test.ts

@@ -1,56 +1,56 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import BaseStatBreakdown from './BaseStatBreakdown.vue'
-import type { StatBreakdownItem } from '../types/statBreakdown'
-
-const items: StatBreakdownItem[] = [
-  { label: 'Alpaca', value: 12.5 },
-  { label: 'Kraken', value: -3 },
-  { label: 'Binance', value: null },
-]
-
-describe('BaseStatBreakdown', () => {
-  it('renders one row per item with label and formatted value', () => {
-    const wrapper = mount(BaseStatBreakdown, {
-      props: { items, currency: '$' },
-    })
-    const rows = wrapper.findAll('.flex')
-    expect(rows).toHaveLength(3)
-    expect(rows[0].text()).toContain('Alpaca')
-    expect(rows[0].text()).toContain('$12.50')
-  })
-
-  it('renders an em-dash for null values instead of a misleading 0', () => {
-    const wrapper = mount(BaseStatBreakdown, { props: { items } })
-    const rows = wrapper.findAll('.flex')
-    expect(rows[2].text()).toContain('—')
-    expect(rows[2].text()).not.toContain('0.00')
-  })
-
-  it('honours the decimals prop', () => {
-    const wrapper = mount(BaseStatBreakdown, {
-      props: { items: [{ label: 'BTC', value: 0.5 }], decimals: 8 },
-    })
-    expect(wrapper.text()).toContain('0.50000000')
-  })
-
-  it('prefixes a plus and colours by sign when signed', () => {
-    const wrapper = mount(BaseStatBreakdown, {
-      props: { items, currency: '$', signed: true },
-    })
-    const values = wrapper.findAll('.font-mono')
-    expect(values[0].text()).toBe('+$12.50')
-    expect(values[0].classes().join(' ')).toContain('text-emerald-600')
-    expect(values[1].text()).toBe('-$3.00')
-    expect(values[1].classes().join(' ')).toContain('text-red-600')
-    // Null rows stay neutral even in signed mode.
-    expect(values[2].classes().join(' ')).toContain('text-slate-500')
-  })
-
-  it('stays neutral-coloured when signed is off', () => {
-    const wrapper = mount(BaseStatBreakdown, {
-      props: { items: [{ label: 'Alpaca', value: 12.5 }] },
-    })
-    expect(wrapper.find('.font-mono').classes().join(' ')).toContain('text-slate-500')
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BaseStatBreakdown from './BaseStatBreakdown.vue'
+import type { StatBreakdownItem } from '../types/statBreakdown'
+
+const items: StatBreakdownItem[] = [
+  { label: 'Alpaca', value: 12.5 },
+  { label: 'Kraken', value: -3 },
+  { label: 'Binance', value: null },
+]
+
+describe('BaseStatBreakdown', () => {
+  it('renders one row per item with label and formatted value', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items, currency: '$' },
+    })
+    const rows = wrapper.findAll('.flex')
+    expect(rows).toHaveLength(3)
+    expect(rows[0].text()).toContain('Alpaca')
+    expect(rows[0].text()).toContain('$12.50')
+  })
+
+  it('renders an em-dash for null values instead of a misleading 0', () => {
+    const wrapper = mount(BaseStatBreakdown, { props: { items } })
+    const rows = wrapper.findAll('.flex')
+    expect(rows[2].text()).toContain('—')
+    expect(rows[2].text()).not.toContain('0.00')
+  })
+
+  it('honours the decimals prop', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items: [{ label: 'BTC', value: 0.5 }], decimals: 8 },
+    })
+    expect(wrapper.text()).toContain('0.50000000')
+  })
+
+  it('prefixes a plus and colours by sign when signed', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items, currency: '$', signed: true },
+    })
+    const values = wrapper.findAll('.font-mono')
+    expect(values[0].text()).toBe('+$12.50')
+    expect(values[0].classes().join(' ')).toContain('text-emerald-600')
+    expect(values[1].text()).toBe('-$3.00')
+    expect(values[1].classes().join(' ')).toContain('text-red-600')
+    // Null rows stay neutral even in signed mode.
+    expect(values[2].classes().join(' ')).toContain('text-slate-500')
+  })
+
+  it('stays neutral-coloured when signed is off', () => {
+    const wrapper = mount(BaseStatBreakdown, {
+      props: { items: [{ label: 'Alpaca', value: 12.5 }] },
+    })
+    expect(wrapper.find('.font-mono').classes().join(' ')).toContain('text-slate-500')
+  })
+})

package/src/components/BaseStatBreakdown.vue

@@ -1,49 +1,49 @@
-<script setup lang="ts">
-// Compact per-item breakdown meant to sit under a summary/stat card (pairs
-// with EarningsCard). Each item renders on its own line — label left, value
-// right in monospace. A null/undefined value (a source that is unconfigured,
-// unreachable, or has no matching rows) shows a dash rather than a
-// misleading 0. With `signed`, values gain an explicit "+" and are coloured
-// green/red by sign.
-import type { StatBreakdownItem } from '../types/statBreakdown'
-
-const props = withDefaults(
-  defineProps<{
-    items: StatBreakdownItem[]
-    currency?: string
-    decimals?: number
-    signed?: boolean
-  }>(),
-  { currency: '', decimals: 2, signed: false },
-)
-
-function fmt(v: number | null | undefined): string {
-  if (v === null || v === undefined) return '—'
-  // Sign sits before the currency symbol ("-$3.00", "+$5.00" — same shape
-  // as fmtUsd); the plus only appears in signed mode.
-  const sign = v < 0 ? '-' : props.signed ? '+' : ''
-  return `${sign}${props.currency}${Math.abs(v).toFixed(props.decimals)}`
-}
-
-function color(v: number | null | undefined): string {
-  if (!props.signed || v === null || v === undefined) {
-    return 'text-slate-500 dark:text-slate-400'
-  }
-  return v >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'
-}
-</script>
-
-<template>
-  <div class="mt-1.5 space-y-0.5 px-1">
-    <div
-      v-for="item in items"
-      :key="item.label"
-      class="flex items-center justify-between text-[11px]"
-    >
-      <span class="text-slate-400 dark:text-slate-500">{{ item.label }}</span>
-      <span class="font-mono tabular-nums font-medium" :class="color(item.value)">
-        {{ fmt(item.value) }}
-      </span>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+// Compact per-item breakdown meant to sit under a summary/stat card (pairs
+// with EarningsCard). Each item renders on its own line — label left, value
+// right in monospace. A null/undefined value (a source that is unconfigured,
+// unreachable, or has no matching rows) shows a dash rather than a
+// misleading 0. With `signed`, values gain an explicit "+" and are coloured
+// green/red by sign.
+import type { StatBreakdownItem } from '../types/statBreakdown'
+
+const props = withDefaults(
+  defineProps<{
+    items: StatBreakdownItem[]
+    currency?: string
+    decimals?: number
+    signed?: boolean
+  }>(),
+  { currency: '', decimals: 2, signed: false },
+)
+
+function fmt(v: number | null | undefined): string {
+  if (v === null || v === undefined) return '—'
+  // Sign sits before the currency symbol ("-$3.00", "+$5.00" — same shape
+  // as fmtUsd); the plus only appears in signed mode.
+  const sign = v < 0 ? '-' : props.signed ? '+' : ''
+  return `${sign}${props.currency}${Math.abs(v).toFixed(props.decimals)}`
+}
+
+function color(v: number | null | undefined): string {
+  if (!props.signed || v === null || v === undefined) {
+    return 'text-slate-500 dark:text-slate-400'
+  }
+  return v >= 0 ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'
+}
+</script>
+
+<template>
+  <div class="mt-1.5 space-y-0.5 px-1">
+    <div
+      v-for="item in items"
+      :key="item.label"
+      class="flex items-center justify-between text-[11px]"
+    >
+      <span class="text-slate-400 dark:text-slate-500">{{ item.label }}</span>
+      <span class="font-mono tabular-nums font-medium" :class="color(item.value)">
+        {{ fmt(item.value) }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/BaseStatusPill.vue

@@ -1,54 +1,54 @@
-<template>
-  <!--
-    Connection/health status pill: a colored dot (pulsing while ok) next
-    to a short label, on a tinted rounded background. Extracted from
-    WireMate's sidebar WireMock health indicator.
-
-    status: 'ok' → emerald + pulse, 'error' → red, 'unknown' → gray.
-  -->
-  <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs" :class="pillClass">
-    <span class="relative flex h-2 w-2">
-      <span
-        v-if="status === 'ok'"
-        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
-        aria-hidden="true"
-      ></span>
-      <span class="relative inline-flex rounded-full h-2 w-2" :class="dotClass"></span>
-    </span>
-    {{ label }}
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-interface Props {
-  status: 'ok' | 'error' | 'unknown'
-  /** Short text next to the dot, e.g. "WireMock Connected". */
-  label: string
-}
-
-const props = defineProps<Props>()
-
-const { isDark } = useTheme()
-
-const pillClass = computed(() => {
-  switch (props.status) {
-    case 'ok':
-      return isDark.value ? 'bg-emerald-500/10 text-emerald-400' : 'bg-emerald-50 text-emerald-700'
-    case 'error':
-      return isDark.value ? 'bg-red-500/10 text-red-400' : 'bg-red-50 text-red-700'
-    default:
-      return isDark.value ? 'bg-gray-700 text-gray-400' : 'bg-gray-100 text-gray-500'
-  }
-})
-
-const dotClass = computed(() => {
-  switch (props.status) {
-    case 'ok': return 'bg-emerald-500'
-    case 'error': return 'bg-red-500'
-    default: return 'bg-gray-400'
-  }
-})
-</script>
+<template>
+  <!--
+    Connection/health status pill: a colored dot (pulsing while ok) next
+    to a short label, on a tinted rounded background. Extracted from
+    WireMate's sidebar WireMock health indicator.
+
+    status: 'ok' → emerald + pulse, 'error' → red, 'unknown' → gray.
+  -->
+  <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs" :class="pillClass">
+    <span class="relative flex h-2 w-2">
+      <span
+        v-if="status === 'ok'"
+        class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"
+        aria-hidden="true"
+      ></span>
+      <span class="relative inline-flex rounded-full h-2 w-2" :class="dotClass"></span>
+    </span>
+    {{ label }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+interface Props {
+  status: 'ok' | 'error' | 'unknown'
+  /** Short text next to the dot, e.g. "WireMock Connected". */
+  label: string
+}
+
+const props = defineProps<Props>()
+
+const { isDark } = useTheme()
+
+const pillClass = computed(() => {
+  switch (props.status) {
+    case 'ok':
+      return isDark.value ? 'bg-emerald-500/10 text-emerald-400' : 'bg-emerald-50 text-emerald-700'
+    case 'error':
+      return isDark.value ? 'bg-red-500/10 text-red-400' : 'bg-red-50 text-red-700'
+    default:
+      return isDark.value ? 'bg-gray-700 text-gray-400' : 'bg-gray-100 text-gray-500'
+  }
+})
+
+const dotClass = computed(() => {
+  switch (props.status) {
+    case 'ok': return 'bg-emerald-500'
+    case 'error': return 'bg-red-500'
+    default: return 'bg-gray-400'
+  }
+})
+</script>