@celestia-island/hikari 0.55.142 → 0.55.143

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.142",
+  "version": "0.55.143",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkModelTag.scss

@@ -48,6 +48,37 @@
   border-radius: var(--radius-sm, 4px);
 }
 
+// Rate segment (the model-group capsule's `×N` tail, 2026-10-11): takes
+// the inline-end rounding and provides the seam's divider from its own
+// inline-start border; a success tint keeps it readable as a modifier,
+// not a second name. With a rate present the NAME segment becomes a
+// middle segment — square inline-end edge too (the join geometry below).
+.s-model-tag-group[data-rate] .hk-badge.s-model-tag-name {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  // The rate badge provides the seam's divider from its own
+  // inline-start border — the name's inline-end border must drop or
+  // the seam stacks ~2px (the num/name seam is 1px).
+  border-inline-end: none;
+}
+
+// Tagless + rate (the pill starts bare before the roster refines the
+// id): the name is the FIRST child — its leading corners keep the
+// capsule's rounding (only the :only-child escape covered it before).
+.s-model-tag-group[data-rate] .hk-badge.s-model-tag-name:first-child {
+  border-start-start-radius: var(--radius-sm, 4px);
+  border-end-start-radius: var(--radius-sm, 4px);
+}
+
+.s-model-tag-group .hk-badge.s-model-tag-rate {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  border-start-end-radius: var(--radius-sm, 4px);
+  border-end-end-radius: var(--radius-sm, 4px);
+  border-inline-start-color: rgb(var(--color-muted) / 35%);
+  flex-shrink: 0;
+}
+
 .s-model-tag-name-text {
   display: block;
   overflow: hidden;

package/src/components/HkModelTag.test.tsx

@@ -126,4 +126,30 @@ describe("HkModelTag", () => {
       c.querySelector(".s-model-tag-group")?.getAttribute("data-expanded"),
     ).toBeNull();
   });
+
+  it("renders the optional rate tail as the third joined segment", () => {
+    const c = mount(tagNode({ model: "gpt-5.5#2", rate: 1.5 }));
+    const group = c.querySelector(".s-model-tag-group");
+    expect(group?.hasAttribute("data-rate")).toBe(true);
+    expect(group?.querySelector(".s-model-tag-rate")?.textContent?.trim()).toBe("×1.5");
+    // The segments read in order: #2, name, rate.
+    expect(group?.textContent?.trim()).toBe("#2gpt-5.5×1.5");
+
+    // Trailing zeros trimmed, one decimal at most.
+    const whole = mount(tagNode({ model: "gpt-5.5#2", rate: 2 }));
+    expect(
+      whole.querySelector(".s-model-tag-rate")?.textContent?.trim(),
+    ).toBe("×2");
+    const tenth = mount(tagNode({ model: "gpt-5.5#2", rate: 0.1 }));
+    expect(
+      tenth.querySelector(".s-model-tag-rate")?.textContent?.trim(),
+    ).toBe("×0.1");
+  });
+
+  it("keeps the classic two-part pill untouched without a rate", () => {
+    const c = mount(tagNode({ model: "gpt-5.5#2" }));
+    const group = c.querySelector(".s-model-tag-group");
+    expect(group?.getAttribute("data-rate")).toBeNull();
+    expect(group?.querySelector(".s-model-tag-rate")).toBeNull();
+  });
 });

package/src/components/HkModelTag.tsx

@@ -23,6 +23,10 @@ const ModelPill = defineComponent({
     model: { type: String, required: true },
     /** Render the name without truncation (used inside the hover card). */
     expanded: { type: Boolean, default: false },
+    /** Optional third segment — the billing rate tail (`×1.5`), as the
+     *  model-group capsule's multiplier (2026-10-11 direction). Absent
+     *  keeps the classic two-part pill untouched. */
+    rate: { type: Number, default: undefined },
   },
   setup(props) {
     // Split inside the render closure: capturing `splitModelId(props.model)`
@@ -32,10 +36,19 @@ const ModelPill = defineComponent({
     // stale, untagged pill.
     return () => {
       const { base, tag } = splitModelId(props.model);
+      // ×1.5 / ×2 / ×0.1 — trailing zeros trimmed, one decimal at most
+      // (the editor offers tenths; hundredths would crowd the pill).
+      // Number.isFinite guards the catalog edge: a NaN/Infinity leaking
+      // in would otherwise render "×NaN" (R1 F3).
+      const rateText =
+        props.rate != null && Number.isFinite(props.rate)
+          ? `×${Number(props.rate.toFixed(1)).toString()}`
+          : null;
       return (
         <span
           class="s-model-tag-group"
           data-expanded={props.expanded || undefined}
+          data-rate={rateText != null || undefined}
         >
           {tag && (
             <HBadge variant="primary" size="sm" mono pill={false} class="s-model-tag-num">
@@ -45,6 +58,11 @@ const ModelPill = defineComponent({
           <HBadge variant="muted" size="sm" mono pill={false} class="s-model-tag-name">
             <span class="s-model-tag-name-text">{base}</span>
           </HBadge>
+          {rateText != null && (
+            <HBadge variant="success" size="sm" mono pill={false} class="s-model-tag-rate">
+              {rateText}
+            </HBadge>
+          )}
         </span>
       );
     };
@@ -57,6 +75,8 @@ const ModelCard = defineComponent({
   props: {
     model: { type: String, required: true },
     meta: { type: Object as PropType<HModelMeta | undefined>, default: undefined },
+    /** Billing-rate tail passthrough (see ModelPill). */
+    rate: { type: Number, default: undefined },
     currency: { type: String, default: "$" },
   },
   setup(props) {
@@ -99,7 +119,7 @@ const ModelCard = defineComponent({
       return (
         <div class="s-model-card">
           <div class="s-model-card-title">
-            <ModelPill model={props.model} expanded />
+            <ModelPill model={props.model} expanded rate={props.rate} />
           </div>
           {rows.length > 0 && (
             <div class="s-model-card-stats">
@@ -149,6 +169,8 @@ export const HkModelTag = defineComponent({
     /** Per-instance catalog override. */
     catalog: { type: Object as PropType<HModelCatalog | undefined>, default: undefined },
     currency: { type: String, default: "$" },
+    /** Optional billing-rate tail on the pill (`×1.5`); see ModelPill. */
+    rate: { type: Number, default: undefined },
   },
   setup(props) {
     const anchorRef = ref<HTMLElement | null>(null);
@@ -175,7 +197,7 @@ export const HkModelTag = defineComponent({
         onMouseenter={onEnter}
         onMouseleave={onLeave}
       >
-        <ModelPill model={props.model} />
+        <ModelPill model={props.model} rate={props.rate} />
         <HPopover
           modelValue={open.value}
           onUpdate:modelValue={(v: boolean) => { open.value = v; }}