@celestia-island/hikari 0.55.153 → 0.55.155

package/package.json

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

package/src/components/HkFilterPanel.scss

@@ -6,15 +6,26 @@
  * narrows to roughly TWO visible symbols and scrolls horizontally
  * instead.
  *
- * Row anatomy: [field label | operator symbol group | value control].
- * Edits commit LIVE (the desktop panel has no confirm button); the
- * mobile sheet's single confirm merely closes — the standard HkPopover
- * sheetOnMobile split renders the same panel in both shapes.
+ * Row anatomy: [field label | operator symbol group | value control +
+ * remove]. Rows are the page's ACTIVE conditions; the trailing add row
+ * (button parked in the operator column, user direction 2026-10-12)
+ * materializes the next latent field. Edits commit LIVE (the desktop
+ * panel has no confirm button); the mobile sheet's single confirm merely
+ * closes — the standard HkPopover sheetOnMobile split renders the same
+ * panel in both shapes.
+ *
+ * ONE GRID, ONE AXIS (user direction 2026-10-12): the panel itself is
+ * the grid and each row contributes `display: contents` cells, so the
+ * three columns track ONE set of widths across every row and the add
+ * row lines up with the operator column exactly. `align-items: center`
+ * puts every cell of every row on the same vertical axis — label,
+ * symbol group, control, and remove button all share it.
  */
 
 .hk-filter-panel {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(4.5rem, auto) minmax(4.5rem, auto) minmax(6rem, 1fr);
+  align-items: center;
   gap: var(--space-8, 0.5rem);
   /* Bounded width: wide enough for the operator group, narrow enough to
    * read as a header dropdown (the popover host clamps to the viewport
@@ -25,14 +36,16 @@
    * a field-rich page must not grow an unbounded dropdown. */
   max-height: min(26rem, 60vh);
   overflow-y: auto;
-  padding: var(--space-4, 0.25rem);
+  /* Minimum outer margins for every column (user direction
+   * 2026-10-12): the rows never touch the panel edge. */
+  padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
 }
 
-.hk-filter-panel-row {
-  display: grid;
-  grid-template-columns: minmax(4.5rem, auto) minmax(0, auto) minmax(0, 1fr);
-  align-items: center;
-  gap: var(--space-8, 0.5rem);
+/* A row is not a box — it donates its three cells to the panel grid so
+ * column widths stay shared across all rows (and the add row). */
+.hk-filter-panel-row,
+.hk-filter-panel-addrow {
+  display: contents;
 }
 
 .hk-filter-panel-field {
@@ -93,23 +106,90 @@
   cursor: not-allowed;
 }
 
+/* Value cell: the control takes what is left (min-width guarded, never
+ * hard-coded — it shrinks with the panel, user direction 2026-10-12);
+ * the remove verb rides at the row's end on the same axis. */
 .hk-filter-panel-value {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
   min-width: 0;
 }
 
-/* Phones: the operator column narrows hard (about two symbols visible)
- * and the row lets the value control take the remaining width. The
- * group itself scrolls — same interaction, smaller footprint. */
+.hk-filter-panel-control {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.hk-filter-panel-remove {
+  flex: 0 0 auto;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-muted, var(--color-text-secondary)));
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.hk-filter-panel-remove:hover {
+  background: rgb(var(--color-error) / 12%);
+  color: rgb(var(--color-error));
+}
+
+.hk-filter-panel-remove:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* The growth verb: parked in the OPERATOR COLUMN (grid-column 2), so it
+ * reads as part of the aligned axis — not a stray footer link. Ghost
+ * face; it appends the next latent field. */
+.hk-filter-panel-add {
+  grid-column: 2 / -1;
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+  min-height: 2rem;
+  padding: 0 var(--space-8, 0.5rem);
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-muted, var(--color-text-secondary)));
+  font-family: inherit;
+  font-size: var(--text-xs, 0.75rem);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.hk-filter-panel-add:hover {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+}
+
+.hk-filter-panel-add:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Phones: the operator column widens a touch (user direction
+ * 2026-10-12 — the old 4.25rem cap cramped the symbol group) and the
+ * row lets the value control take the remaining width. The group itself
+ * scrolls — same interaction, smaller footprint. */
 @media (max-width: 767px) {
   .hk-filter-panel {
     width: 100%;
-  }
-
-  .hk-filter-panel-row {
-    grid-template-columns: minmax(3.75rem, auto) minmax(3.9rem, auto) minmax(0, 1fr);
+    grid-template-columns: minmax(3.75rem, auto) minmax(4.75rem, auto) minmax(5rem, 1fr);
   }
 
   .hk-filter-panel-ops {
-    max-width: 4.25rem;
+    max-width: 5.25rem;
   }
 }

package/src/components/HkFilterPanel.styles.test.ts

@@ -0,0 +1,82 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { compile } from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Compiled-stylesheet guard for HkFilterPanel — the one-axis anatomy the
+ * 2026-10-12 user direction pinned:
+ *
+ *   1. the panel is a single grid with `align-items: center` (every cell
+ *      of every row on ONE vertical axis);
+ *   2. rows/add-row donate `display: contents` cells so column widths
+ *      stay shared (the add button lands in the operator column);
+ *   3. real horizontal padding (minimum outer margins);
+ *   4. the value column shrinks (min-width floors, nothing hard-coded);
+ *   5. the phone operator column keeps its widened cap.
+ *
+ * Vitest stubs CSS, so the runtime suite can never catch a lost rule —
+ * this compiles the sheet directly and asserts the contract.
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+const css = compile(resolve(componentDir, "HkFilterPanel.scss"), {
+  style: "expanded",
+}).css;
+
+function ruleFor(selector: string): string {
+  const start = css.indexOf(selector);
+  expect(start, `${selector} present in the compiled sheet`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  const close = css.indexOf("}", open);
+  return css.slice(start, close + 1);
+}
+
+describe("HkFilterPanel stylesheet contract", () => {
+  it("compiles without warnings", () => {
+    expect(css).toContain(".hk-filter-panel");
+  });
+
+  it("the panel is one grid, vertically centered on a single axis", () => {
+    const rule = ruleFor(".hk-filter-panel {");
+    expect(rule).toContain("display: grid");
+    expect(rule).toContain("align-items: center");
+  });
+
+  it("rows and the add row donate contents cells to the shared grid", () => {
+    // sass keeps the selector list wrapped: `.row,` newline `.addrow {`.
+    expect(css).toMatch(/\.hk-filter-panel-row,\s*\.hk-filter-panel-addrow\s*\{[^}]*display:\s*contents/);
+  });
+
+  it("keeps minimum outer margins on the columns", () => {
+    const rule = ruleFor(".hk-filter-panel {");
+    // Inline padding (both edges) — not the old 0.25rem sliver.
+    expect(rule).toMatch(/padding:[^;]*var\(--space-12/);
+  });
+
+  it("the value column shrinks with the panel (min floors, nothing fixed)", () => {
+    const rule = ruleFor(".hk-filter-panel {");
+    expect(rule).toMatch(/minmax\(6rem,\s*1fr\)/);
+    const value = ruleFor(".hk-filter-panel-value {");
+    expect(value).toContain("min-width: 0");
+    const control = ruleFor(".hk-filter-panel-control {");
+    expect(control).toContain("min-width: 0");
+  });
+
+  it("parks the add button in the operator column (grid-column 2 to the end)", () => {
+    const rule = ruleFor(".hk-filter-panel-add {");
+    // sass normalizes the track list ("2 / -1" → "2/-1").
+    expect(rule).toMatch(/grid-column:\s*2\s*\/\s*-1/);
+    expect(rule).toContain("justify-self: start");
+  });
+
+  it("the phone operator column keeps its widened cap (≥ the old 4.25rem)", () => {
+    expect(css).toContain("@media (max-width: 767px)");
+    const media = css.slice(css.indexOf("@media (max-width: 767px)"));
+    expect(media).toMatch(/max-width:\s*5\.25rem/);
+    expect(media).toMatch(/minmax\(4\.75rem,\s*auto\)/);
+  });
+});

package/src/components/HkFilterPanel.test.tsx

@@ -28,17 +28,74 @@ const FIELDS = [
   { key: "since", label: "Since", kind: "date" as const },
 ];
 
+/** State seeding all four fields — every declared row visible. */
+const ALL_SEEDED: HkFilterState = {
+  tool: { op: "eq", value: "" },
+  count: { op: "lt", value: "" },
+  agent: { op: "eq", value: "" },
+  since: { op: "gte", value: "" },
+};
+
 describe("HkFilterPanel", () => {
-  it("renders one condition row per declared field", () => {
+  it("renders rows ONLY for fields present in the state — the rest stay latent", () => {
     const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: {} }));
-    const rows = c.querySelectorAll(".hk-filter-panel-row");
-    expect(rows).toHaveLength(FIELDS.length);
-    const labels = [...c.querySelectorAll(".hk-filter-panel-field")].map((el) => el.textContent);
-    expect(labels).toEqual(["Tool", "Calls", "Agent", "Since"]);
+    // Empty state: no condition rows at all, just the add row.
+    expect(c.querySelectorAll(".hk-filter-panel-row")).toHaveLength(0);
+    expect(c.querySelector(".hk-filter-panel-add")).toBeTruthy();
+    // Seeded subset: rows in declaration order, only for seeded keys.
+    const c2 = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { agent: { op: "eq", value: "" }, tool: { op: "eq", value: "" } },
+      }),
+    );
+    const labels = [...c2.querySelectorAll(".hk-filter-panel-field")].map((el) => el.textContent);
+    expect(labels).toEqual(["Tool", "Agent"]);
+  });
+
+  it("hides the add row once every declared field is in the state", () => {
+    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: ALL_SEEDED }));
+    expect(c.querySelector(".hk-filter-panel-add")).toBeNull();
+    expect(c.querySelectorAll(".hk-filter-panel-row")).toHaveLength(FIELDS.length);
+  });
+
+  it("adds the next latent field with its kind's default operator and an empty value", () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { tool: { op: "eq", value: "web" } },
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    c.querySelector(".hk-filter-panel-add")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(seen).not.toBeNull();
+    // "count" is the next unused field in declaration order; its kind's
+    // first operator (lt) and an empty value.
+    expect(seen!["count"]).toEqual({ op: "lt", value: "" });
+  });
+
+  it("removes a condition entirely — the key leaves the state", () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { tool: { op: "eq", value: "web" }, count: { op: "lt", value: "3" } },
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const rows = [...c.querySelectorAll(".hk-filter-panel-row")];
+    expect(rows).toHaveLength(2);
+    rows[0]!.querySelector(".hk-filter-panel-remove")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    expect(seen).not.toBeNull();
+    expect(seen!["tool"]).toBeUndefined();
+    expect(seen!["count"]).toEqual({ op: "lt", value: "3" });
   });
 
   it("gives each kind its default operator set (regular 3, numeric 5, select 2, date 2)", () => {
-    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: {} }));
+    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: ALL_SEEDED }));
     const rows = [...c.querySelectorAll(".hk-filter-panel-row")];
     const opCounts = rows.map(
       (row) => row.querySelectorAll(".hk-filter-panel-op").length,
@@ -78,14 +135,14 @@ describe("HkFilterPanel", () => {
     const c = mount(
       h(HkFilterPanel, {
         fields: FIELDS,
-        modelValue: {},
+        modelValue: { count: { op: "lt", value: "" } },
         "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
       }),
     );
     // The number row's control is the number-variant input (type=number —
     // the browser refuses illegal keystrokes); the model side keeps the
     // shape guard (sanitizeNumberInput) as the belt.
-    const input = c.querySelectorAll<HTMLInputElement>(".hk-filter-panel-row input")[1]!;
+    const input = c.querySelectorAll<HTMLInputElement>(".hk-filter-panel-row input")[0]!;
     expect(input.type).toBe("number");
     input.value = "42.5";
     input.dispatchEvent(new Event("input", { bubbles: true }));
@@ -95,22 +152,23 @@ describe("HkFilterPanel", () => {
   });
 
   it("keeps select fields on a popup select and prepends the empty clear row", () => {
-    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: {} }));
-    const selectRow = c.querySelectorAll(".hk-filter-panel-row")[2]!;
+    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: { agent: { op: "eq", value: "" } } }));
+    const selectRow = c.querySelectorAll(".hk-filter-panel-row")[0]!;
     expect(selectRow.querySelector(".hk-popup-select-trigger")).toBeTruthy();
   });
 
   it("prepends a localized empty All row to select fields without one (the clear affordance)", async () => {
     // The select field's ONLY clear affordance is the empty value row —
-    // there is no reset verb in the header trigger. A page without its
-    // own "all" entry must therefore always find the prepended
-    // {value:"", label:All} row; a page that ships one keeps its own
-    // label. (R1 mutation f2 removed the prepend and NOTHING went red —
-    // this test is that missing pin.)
+    // removal drops the whole condition, but an EMPTY value still means
+    // "filters nothing" on the wire. A page without its own "all" entry
+    // must therefore always find the prepended {value:"", label:All} row;
+    // a page that ships one keeps its own label. (R1 mutation f2 removed
+    // the prepend and NOTHING went red — this test is that missing pin.)
     const withOwnEmpty = [
       { key: "level", label: "Level", kind: "select" as const, options: [{ value: "", label: "Everything" }, { value: "high", label: "High" }] },
     ];
-    const c = mount(h(HkFilterPanel, { fields: withOwnEmpty, modelValue: {} }));
+    const seeded = { level: { op: "eq" as const, value: "" } };
+    const c = mount(h(HkFilterPanel, { fields: withOwnEmpty, modelValue: seeded }));
     // A page shipping its own empty row keeps it as-is (no duplicate):
     // the panel prepends only when NO option carries the empty value.
     const ownTrigger = c.querySelector(".hk-filter-panel-row .hk-popup-select-trigger");
@@ -126,7 +184,7 @@ describe("HkFilterPanel", () => {
     const withoutAll = [
       { key: "level", label: "Level", kind: "select" as const, options: [{ value: "high", label: "High" }] },
     ];
-    const c2 = mount(h(HkFilterPanel, { fields: withoutAll, modelValue: {} }));
+    const c2 = mount(h(HkFilterPanel, { fields: withoutAll, modelValue: { level: { op: "eq", value: "" } } }));
     const trigger2 = c2.querySelector(".hk-filter-panel-row .hk-popup-select-trigger")!;
     trigger2.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     await Promise.resolve();
@@ -143,6 +201,36 @@ describe("HkFilterPanel", () => {
     expect(c2.querySelector(".hk-filter-panel")!.getAttribute("data-active")).toBeNull();
   });
 
+  it("suppresses the control captions (the row label is the one label) but keeps them semantic", () => {
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { agent: { op: "eq", value: "" }, tool: { op: "eq", value: "" } },
+      }),
+    );
+    // No floating caption above either control.
+    expect(c.querySelector(".hk-popup-select-label")).toBeNull();
+    expect(c.querySelector(".hk-input-label")).toBeNull();
+    // …but the field element still carries the name for AT and the
+    // mobile select sheet's breadcrumb title.
+    const selectTrigger = c.querySelector(".hk-popup-select-trigger")!;
+    expect(selectTrigger.getAttribute("aria-label")).toBe("Agent");
+    const input = c.querySelector(".hk-input-element")!;
+    expect(input.getAttribute("aria-label")).toBe("Tool");
+  });
+
+  it("rides the compact control stock (sm variants) in the dense rows", () => {
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: ALL_SEEDED,
+      }),
+    );
+    expect(c.querySelector(".hk-popup-select-trigger-sm")).toBeTruthy();
+    expect(c.querySelector(".hk-input-box-sm")).toBeTruthy();
+    expect(c.querySelector(".hk-dp-trigger-sm")).toBeTruthy();
+  });
+
   it("sanitizes number shapes: sign leading-only, one dot, junk stripped", () => {
     expect(sanitizeNumberInput("12a.5b9")).toBe("12.59");
     expect(sanitizeNumberInput("-3-x.1.2")).toBe("-3.12");

package/src/components/HkFilterPanel.tsx

@@ -1,4 +1,5 @@
 import { computed, defineComponent, type PropType } from "vue";
+import { Plus, X } from "lucide-vue-next";
 
 import HkDatePicker from "./HkDatePicker";
 import HkInput from "./HkInput";
@@ -30,17 +31,20 @@ export interface HkFilterFieldDef {
 }
 
 /** One condition: the operator and the (string) value. An EMPTY value
- *  means the field filters nothing — this is also how a condition is
- *  cleared (re-open the panel, empty the value; there is no separate
- *  reset verb in the header affordance). */
+ *  means the field filters nothing — pages map absent/empty onto "no
+ *  filter" at the RPC boundary; the row's own remove button is the UI
+ *  verb that drops the condition entirely. */
 export interface HkFilterCondition {
   op: HkFilterOperator;
   value: string;
 }
 
-/** Per-field condition state, keyed by the field def's key. Fields the
- *  record does not mention render with their kind's default operator and
- *  an empty value. */
+/** Per-field condition state, keyed by the field def's key. The record
+ *  IS the list of visible condition rows: a declared field the record
+ *  does not mention is latent — it only materializes when the user adds
+ *  it from the panel's add row (user direction 2026-10-12: conditions
+ *  are ADDED, not all rendered at once), and a row the user removes
+ *  leaves the record. */
 export type HkFilterState = Record<string, HkFilterCondition>;
 
 const OPERATOR_SYMBOL: Record<HkFilterOperator, string> = {
@@ -136,9 +140,13 @@ export default defineComponent({
 
     return () => {
       const label = props.label ?? t("hikari::filterBar.trigger", "Filters");
+      // The visible rows ARE the state record's declared fields, in
+      // declaration order; the rest stay latent behind the add row.
+      const rows = props.fields.filter((f) => props.modelValue[f.key] !== undefined);
+      const addable = props.fields.filter((f) => props.modelValue[f.key] === undefined);
       return (
         <div class="hk-filter-panel" data-testid="hk-filter-panel" data-active={activeCount.value > 0 || undefined} aria-label={label}>
-          {props.fields.map((field) => {
+          {rows.map((field) => {
             const condition = conditionFor(field);
             const ops = operatorsFor(field);
             return (
@@ -161,48 +169,97 @@ export default defineComponent({
                   ))}
                 </div>
                 <div class="hk-filter-panel-value">
-                  {field.kind === "select" ? (
-                    <HkPopupSelect
-                      modelValue={condition.value}
-                      onUpdate:modelValue={(v: string) => emitCondition(field, { value: v })}
-                      label={field.label}
-                      disabled={props.disabled}
-                      options={selectOptions(field)}
-                    />
-                  ) : field.kind === "date" ? (
-                    // The calendar picker — never the OS native input
-                    // (2026-10-11 direction); the wire format is the same
-                    // ISO YYYY-MM-DD the native input spoke.
-                    <HkDatePicker
-                      modelValue={condition.value || null}
-                      onUpdate:modelValue={(v: string | null) =>
-                        emitCondition(field, { value: v ?? "" })
-                      }
-                      disabled={props.disabled}
-                    />
-                  ) : (
-                    <HkInput
-                      type="text"
-                      variant={field.kind === "number" ? "number" : "text"}
-                      modelValue={condition.value}
-                      onUpdate:modelValue={(v: string) =>
-                        emitCondition(field, {
-                          // Belt over the browser's native number filtering:
-                          // the stored model keeps a clean number SHAPE only
-                          // (sign, digits, one dot), so pages can hand it to
-                          // RPC params verbatim.
-                          value: field.kind === "number" ? sanitizeNumberInput(v) : v,
-                        })
-                      }
-                      label={field.label}
-                      placeholder={field.placeholder ?? ""}
-                      disabled={props.disabled}
-                    />
-                  )}
+                  <div class="hk-filter-panel-control">
+                    {field.kind === "select" ? (
+                      <HkPopupSelect
+                        modelValue={condition.value}
+                        onUpdate:modelValue={(v: string) => emitCondition(field, { value: v })}
+                        label={field.label}
+                        // The row's left cell already names the field —
+                        // the control's own caption above it reads as
+                        // duplication (user direction 2026-10-12), and
+                        // the compact variant keeps the dense row stock.
+                        hideLabel
+                        size="sm"
+                        disabled={props.disabled}
+                        options={selectOptions(field)}
+                      />
+                    ) : field.kind === "date" ? (
+                      // The calendar picker — never the OS native input
+                      // (2026-10-11 direction); the wire format is the same
+                      // ISO YYYY-MM-DD the native input spoke.
+                      <HkDatePicker
+                        modelValue={condition.value || null}
+                        onUpdate:modelValue={(v: string | null) =>
+                          emitCondition(field, { value: v ?? "" })
+                        }
+                        size="sm"
+                        disabled={props.disabled}
+                      />
+                    ) : (
+                      <HkInput
+                        type="text"
+                        variant={field.kind === "number" ? "number" : "text"}
+                        modelValue={condition.value}
+                        onUpdate:modelValue={(v: string) =>
+                          emitCondition(field, {
+                            // Belt over the browser's native number filtering:
+                            // the stored model keeps a clean number SHAPE only
+                            // (sign, digits, one dot), so pages can hand it to
+                            // RPC params verbatim.
+                            value: field.kind === "number" ? sanitizeNumberInput(v) : v,
+                          })
+                        }
+                        label={field.label}
+                        hideLabel
+                        size="sm"
+                        placeholder={field.placeholder ?? ""}
+                        disabled={props.disabled}
+                      />
+                    )}
+                  </div>
+                  {/* Drop the condition entirely (the row leaves the
+                   * panel; the page refetches unfiltered). Clearing the
+                   * VALUE still means "filters nothing" for the wire —
+                   * removal is just the tidy-up verb on top. */}
+                  <button
+                    type="button"
+                    class="hk-filter-panel-remove"
+                    aria-label={t("hikari::filterPanel.removeCondition", "Remove condition")}
+                    title={t("hikari::filterPanel.removeCondition", "Remove condition")}
+                    disabled={props.disabled}
+                    onClick={() => {
+                      const next: HkFilterState = { ...props.modelValue };
+                      delete next[field.key];
+                      emit("update:modelValue", next);
+                    }}
+                  >
+                    <X size={14} aria-hidden="true" />
+                  </button>
                 </div>
               </div>
             );
           })}
+          {addable.length > 0 && (
+            <div class="hk-filter-panel-addrow">
+              {/* The ONE growth verb, parked in the operator column so
+               * the row grid reads as one aligned axis (user direction
+               * 2026-10-12). Appends the next unused field with its
+               * kind's default operator and an empty value. */}
+              <button
+                type="button"
+                class="hk-filter-panel-add"
+                disabled={props.disabled}
+                onClick={() => {
+                  const field = addable[0]!;
+                  emitCondition(field, { op: operatorsFor(field)[0]!, value: "" });
+                }}
+              >
+                <Plus size={14} aria-hidden="true" />
+                <span>{t("hikari::filterPanel.addCondition", "Add condition")}</span>
+              </button>
+            </div>
+          )}
         </div>
       );
     };

package/src/components/HkFilterTrigger.test.tsx

@@ -47,7 +47,10 @@ describe("HkFilterTrigger", () => {
     const c = mount(
       h(HkFilterTrigger, {
         fields: FIELDS,
-        modelValue: {},
+        // Seed one condition so the panel opens with its row (an empty
+        // state renders only the add row — conditions are added, not
+        // all rendered at once).
+        modelValue: { tool: { op: "eq", value: "" } },
         "onUpdate:modelValue": (s: Record<string, unknown>) => (seen = s),
       }),
     );

package/src/components/HkInput.hideLabel.test.tsx

@@ -0,0 +1,72 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkInput from "./HkInput";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkInput hideLabel", () => {
+  it("renders the caption by default and derives no aria-label", () => {
+    const c = mount(h(HkInput, { modelValue: "", label: "Tool" }));
+    expect(c.querySelector(".hk-input-label")?.textContent).toContain("Tool");
+    expect(c.querySelector<HTMLInputElement>(".hk-input-element")!.getAttribute("aria-label")).toBeNull();
+  });
+
+  it("hideLabel drops the caption and names the field element instead (text)", () => {
+    const c = mount(h(HkInput, { modelValue: "", label: "Tool", hideLabel: true }));
+    expect(c.querySelector(".hk-input-label")).toBeNull();
+    expect(c.querySelector<HTMLInputElement>(".hk-input-element")!.getAttribute("aria-label")).toBe("Tool");
+  });
+
+  it("hideLabel names the field element instead (textarea)", () => {
+    const c = mount(h(HkInput, { modelValue: "", type: "textarea", label: "Notes", hideLabel: true, rows: 2 }));
+    expect(c.querySelector(".hk-input-label")).toBeNull();
+    expect(c.querySelector<HTMLTextAreaElement>(".hk-input-textarea")!.getAttribute("aria-label")).toBe("Notes");
+  });
+
+  it("a caller-provided aria-label wins over the derived one", () => {
+    const c = mount(
+      h(HkInput, { modelValue: "", label: "Tool", hideLabel: true, "aria-label": "Custom name" }),
+    );
+    expect(c.querySelector<HTMLInputElement>(".hk-input-element")!.getAttribute("aria-label")).toBe("Custom name");
+  });
+
+  it("hideLabel names the password surface's input too", () => {
+    const c = mount(
+      h(HkInput, { modelValue: "", label: "Passphrase", hideLabel: true, variant: "password" }),
+    );
+    expect(c.querySelector(".hk-input-label")).toBeNull();
+    // The surface forwards its fallthrough attrs onto the native input.
+    const input = c.querySelector<HTMLInputElement>('input[type="password"]')!;
+    expect(input, "the password surface renders its native input").toBeTruthy();
+    expect(input.getAttribute("aria-label")).toBe("Passphrase");
+  });
+
+  it("a caller aria-label reaches the password input unchanged when hideLabel is off", () => {
+    // The derived aria-label renders `undefined` when hideLabel is off —
+    // and because JSX props merge in order, that undefined sits BEFORE
+    // the attrs spread so it can never clobber the caller's name (a
+    // regression here once silenced every labelled password field).
+    const c = mount(
+      h(HkInput, { modelValue: "", label: "Passphrase", "aria-label": "Current password", variant: "password" }),
+    );
+    const input = c.querySelector<HTMLInputElement>('input[type="password"]')!;
+    expect(input.getAttribute("aria-label")).toBe("Current password");
+  });
+});

package/src/components/HkInput.tsx

@@ -44,6 +44,15 @@ export default defineComponent({
     rows: { type: Number, default: 3 },
     autoGrow: { type: Boolean, default: false },
     size: { type: String as () => "sm" | "md" | "lg", default: "md" },
+    /**
+     * Suppress the caption above the control while keeping `label`
+     * semantic: the field element gets `aria-label={label}` instead
+     * (every variant — the password surface forwards it to its input).
+     * For rows that already name the field next to the control
+     * (HkFilterPanel's [field | ops | value] grid) — a second caption
+     * above the control reads as duplication there.
+     */
+    hideLabel: { type: Boolean, default: false },
     /**
      * Input variant. `password` renders the hikari password surface:
      * the canvas dot matrix with input ripples, the centered breathing
@@ -349,7 +358,7 @@ export default defineComponent({
 
     return () => (
       <div class="hk-input-wrapper">
-        {props.label && (
+        {props.label && !props.hideLabel && (
           <label class="hk-input-label" for={fieldId.value}>
             {props.label}
             {props.required && <span class="hk-input-required">*</span>}
@@ -357,6 +366,12 @@ export default defineComponent({
         )}
         {isPassword.value ? (
           <HkPasswordSurface
+            // Derived name FIRST: an explicit caller aria-label (via the
+            // attrs spread after it) must win — mergeProps lets a later
+            // undefined clobber an earlier value, so the order here IS
+            // the caller-precedence contract (same as the input/textarea
+            // branches below).
+            aria-label={props.hideLabel ? props.label : undefined}
             {...filteredAttrs.value}
             modelValue={props.modelValue}
             onUpdate:modelValue={(v: string) => emit("update:modelValue", v)}
@@ -436,6 +451,7 @@ export default defineComponent({
               data-1p-ignore
               data-lpignore="true"
               class="hk-input-element"
+              aria-label={props.hideLabel ? props.label : undefined}
               {...filteredAttrs.value}
               onInput={onInput}
               onFocus={(e) => { forwardFocus(true); emit("focus", e); }}
@@ -476,6 +492,7 @@ export default defineComponent({
                 "hk-input-textarea",
                 isAutoGrow.value ? "hk-input-textarea-autogrow" : "",
               ]}
+              aria-label={props.hideLabel ? props.label : undefined}
               {...filteredAttrs.value}
               onInput={onInput}
               onFocus={(e) => { forwardFocus(true); emit("focus", e); }}

package/src/components/HkPopupSelect.mobile.test.tsx

@@ -0,0 +1,50 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h } from "vue";
+
+// The sheet-title pin needs the mobile breakpoint (HkPopover's sheet
+// branch); the rest of the file is desktop-neutral. Same file-level mock
+// split as HkFilterTrigger.mobile.
+vi.mock("../runtime/useBreakpoint", () => ({
+  useBreakpoint: () => ({ isMobile: { value: true } }),
+}));
+
+import HkPopupSelect from "./HkPopupSelect";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body.querySelectorAll(".hk-popover-scrim, .hk-popover-panel, .hk-select-popout-host").forEach((el) => el.remove());
+});
+
+const OPTIONS = [{ value: "a1", label: "Agent One" }];
+
+describe("HkPopupSelect (mobile sheet)", () => {
+  it("hideLabel keeps the sheet's breadcrumb title on the field's name", async () => {
+    // hideLabel only suppresses the INLINE caption; the sheet header
+    // must still carry the field's i18n label — it names the blocking
+    // window layer for the popup-manager breadcrumb.
+    const c = mount(
+      h(HkPopupSelect, { modelValue: "", label: "Agent", hideLabel: true, options: OPTIONS }),
+    );
+    const trigger = c.querySelector<HTMLButtonElement>(".hk-popup-select-trigger")!;
+    trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const title = document.body.querySelector(".hk-popover-sheet-title");
+    expect(title, "the sheet renders a title band").toBeTruthy();
+    expect(title!.textContent).toBe("Agent");
+  });
+});

package/src/components/HkPopupSelect.scss

@@ -85,6 +85,20 @@
   cursor: not-allowed;
 }
 
+/* Compact variant (size="sm"): the dense-row stock — filter condition
+ * rows, toolbars — where the 2.5rem form-field stock reads oversized.
+ * Mirrors HkDatePicker's .hk-dp-trigger-sm geometry. */
+.hk-popup-select-trigger-sm {
+  min-height: 2rem;
+  padding: var(--space-4) var(--space-8);
+  padding-inline-end: var(--space-28);
+  font-size: var(--text-sm);
+}
+
+.hk-popup-select-trigger-sm .hk-popup-select-arrow {
+  inset-inline-end: var(--space-8);
+}
+
 .hk-popup-select-value {
   flex: 1;
   white-space: nowrap;

package/src/components/HkPopupSelect.test.tsx

@@ -0,0 +1,84 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h } from "vue";
+
+// The sheet half of this file runs with a pinned mobile breakpoint (the
+// desktop pins below share the file's module graph, and useBreakpoint
+// cannot be re-mocked per-test) — mirror of HkFilterTrigger.mobile's
+// split.
+vi.mock("../runtime/useBreakpoint", () => ({
+  useBreakpoint: () => ({ isMobile: { value: false } }),
+}));
+
+import HkPopupSelect from "./HkPopupSelect";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body.querySelectorAll(".hk-popover-scrim, .hk-popover-panel, .hk-select-popout-host").forEach((el) => el.remove());
+});
+
+const OPTIONS = [
+  { value: "a1", label: "Agent One" },
+  { value: "a2", label: "Agent Two" },
+];
+
+describe("HkPopupSelect", () => {
+  it("renders the md stock by default — no sm class, no derived aria-label", () => {
+    const c = mount(h(HkPopupSelect, { modelValue: "a1", label: "Agent", options: OPTIONS }));
+    const trigger = c.querySelector<HTMLButtonElement>(".hk-popup-select-trigger")!;
+    expect(trigger.className).toContain("hk-popup-select-trigger");
+    expect(trigger.className).not.toContain("hk-popup-select-trigger-sm");
+    // Without hideLabel the caption renders and no aria-label is derived.
+    expect(c.querySelector(".hk-popup-select-label")?.textContent).toBe("Agent");
+    expect(trigger.getAttribute("aria-label")).toBeNull();
+  });
+
+  it("size=sm rides the compact trigger class", () => {
+    const c = mount(h(HkPopupSelect, { modelValue: "a1", size: "sm", options: OPTIONS }));
+    expect(c.querySelector(".hk-popup-select-trigger-sm")).toBeTruthy();
+  });
+
+  it("hideLabel drops the caption but keeps the name on the trigger", () => {
+    const c = mount(
+      h(HkPopupSelect, { modelValue: "a1", label: "Agent", hideLabel: true, options: OPTIONS }),
+    );
+    expect(c.querySelector(".hk-popup-select-label")).toBeNull();
+    expect(c.querySelector(".hk-popup-select-trigger")!.getAttribute("aria-label")).toBe("Agent");
+  });
+
+  it("a caller-provided aria-label cannot reach the trigger (fallthrough lands on the wrapper)", () => {
+    // Unlike HkInput (whose field element spreads caller attrs after the
+    // derived aria-label), this trigger is an explicit element in the
+    // render — callers rename the field through `label`, which feeds
+    // both the caption and (with hideLabel) the derived aria-label.
+    const c = mount(
+      h(HkPopupSelect, {
+        modelValue: "a1",
+        label: "Agent",
+        hideLabel: true,
+        "aria-label": "Custom name",
+        options: OPTIONS,
+      }),
+    );
+    expect(c.querySelector(".hk-popup-select-trigger")!.getAttribute("aria-label")).toBe("Agent");
+    expect(c.querySelector(".hk-popup-select-wrapper")!.getAttribute("aria-label")).toBe("Custom name");
+  });
+
+  it("without hideLabel no aria-label is derived, even when a label renders", () => {
+    const c = mount(h(HkPopupSelect, { modelValue: "a1", label: "Agent", options: OPTIONS }));
+    expect(c.querySelector(".hk-popup-select-trigger")!.getAttribute("aria-label")).toBeNull();
+  });
+});

package/src/components/HkPopupSelect.tsx

@@ -36,6 +36,17 @@ export default defineComponent({
     error: { type: String, default: undefined },
     disabled: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
+    /** Control density: "md" is the form-field stock (2.5rem), "sm" the
+     *  compact variant (2rem) for dense rows — filter condition rows,
+     *  toolbars (HkDatePicker/HkInput carry the same split). */
+    size: { type: String as PropType<"sm" | "md">, default: "md" },
+    /** Suppress the caption above the control while keeping `label`
+     *  semantic: the trigger gets `aria-label={label}` and the mobile
+     *  sheet still takes `label` as its breadcrumb title. For rows that
+     *  already name the field next to the control (HkFilterPanel's
+     *  [field | ops | value] grid) — a second caption above the control
+     *  reads as duplication there. */
+    hideLabel: { type: Boolean, default: false },
     options: {
       type: Array as PropType<HkPopupSelectOption[]>,
       default: undefined,
@@ -159,7 +170,7 @@ export default defineComponent({
 
     return () => (
       <div class="hk-popup-select-wrapper">
-        {props.label ? (
+        {props.label && !props.hideLabel ? (
           <label class="hk-popup-select-label">
             {props.label}
             {props.required && <span class="hk-popup-select-required">*</span>}
@@ -168,7 +179,11 @@ export default defineComponent({
         <button
           ref={triggerRef}
           type="button"
-          class="hk-popup-select-trigger"
+          class={[
+            "hk-popup-select-trigger",
+            props.size === "sm" ? "hk-popup-select-trigger-sm" : "",
+          ]}
+          aria-label={props.hideLabel ? props.label : undefined}
           data-error={props.error || undefined}
           data-disabled={props.disabled || undefined}
           disabled={props.disabled}
@@ -179,7 +194,7 @@ export default defineComponent({
           <span class="hk-popup-select-value">
             {displayLabel.value || props.placeholder}
           </span>
-          <ChevronDown size={16} class="hk-popup-select-arrow" />
+          <ChevronDown size={props.size === "sm" ? 14 : 16} class="hk-popup-select-arrow" />
         </button>
         <HkPopover
           modelValue={isOpen.value}

package/src/components/adminHeaderChrome.test.ts

@@ -27,6 +27,9 @@ function ruleDeclarations(source: string, selector: string): Array<[string, stri
     let boundary = at - 1;
     while (boundary >= 0 && !"}{;".includes(code[boundary])) boundary -= 1;
     if (code.slice(boundary + 1, at).replace(/\s+/g, " ").trim() !== "") continue;
+    // Top-level rules only: a nested occurrence (the ≤767px phone band)
+    // must not satisfy the desktop pins.
+    if (braceDepthAt(code, at) !== 0) continue;
     const body = code.slice(open + 1, code.indexOf("}", open));
     const out: Array<[string, string]> = [];
     for (const part of body.split(";")) {
@@ -38,10 +41,50 @@ function ruleDeclarations(source: string, selector: string): Array<[string, stri
   return null;
 }
 
+
+/** Brace depth of `code` at character index `at` — 0 = top level, ≥1 =
+ *  nested inside an at-block (e.g. the ≤767px phone band's @media). */
+function braceDepthAt(code: string, at: number): number {
+  let depth = 0;
+  for (let i = 0; i < at; i += 1) {
+    if (code[i] === "{") depth += 1;
+    else if (code[i] === "}") depth -= 1;
+  }
+  return depth;
+}
+
 const adminTokens = readFileSync(join(here, "..", "styles", "admin-tokens.scss"), "utf8");
 const iconButtonVars = readFileSync(join(here, "HkIconButtonVars.scss"), "utf8");
 const iconButton = readFileSync(join(here, "HkIconButton.tsx"), "utf8");
 
+/** Every rule whose prelude IS `selector` (whole-prelude match, comments
+ *  stripped) — used for the phone band, where the same prelude appears
+ *  both at top level (desktop) and inside the ≤767px media block. */
+function allRuleDeclarations(
+  source: string,
+  selector: string,
+): Array<{ nested: boolean; decls: Array<[string, string]> }> {
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "");
+  const out: Array<{ nested: boolean; decls: Array<[string, string]> }> = [];
+  for (let at = code.indexOf(selector); at >= 0; at = code.indexOf(selector, at + 1)) {
+    const open = code.indexOf("{", at + selector.length);
+    if (open < 0) continue;
+    if (code.slice(at + selector.length, open).trim() !== "") continue;
+    let boundary = at - 1;
+    while (boundary >= 0 && !"}{;".includes(code[boundary])) boundary -= 1;
+    if (code.slice(boundary + 1, at).replace(/\s+/g, " ").trim() !== "") continue;
+    const nested = braceDepthAt(code, at) > 0;
+    const body = code.slice(open + 1, code.indexOf("}", open));
+    const decls: Array<[string, string]> = [];
+    for (const part of body.split(";")) {
+      const m = /^\s*([-a-zA-Z]+)\s*:\s*([\s\S]+?)\s*$/.exec(part);
+      if (m) decls.push([m[1], m[2].replace(/\s+/g, " ")]);
+    }
+    out.push({ nested, decls });
+  }
+  return out;
+}
+
 describe("admin header chrome geometry (the two user-requested fixes)", () => {
   it("keeps the console title at the panel's visual distance from the avatar (16px wing gap)", () => {
     // The frontend's workspace button sits a flex gap PLUS its own 8px
@@ -76,4 +119,26 @@ describe("admin header chrome geometry (the two user-requested fixes)", () => {
     // The component accepts the step.
     expect(iconButton).toMatch(/PropType<16 \| 24 \| 28 \| 32 \| 36 \| 40>/);
   });
+
+  it("pins the phone band: wings keep their floors, the centre strip owns the overflow", () => {
+    // User report 2026-10-12: on phones the balanced wings (flex 1 1 0 +
+    // min-width 0) were squeezed BELOW the avatar's 28px floor by a wide
+    // centre tab strip, and the strip painted straight over the avatar.
+    // The ≤767px band must pin both wings and hand the leftover to the
+    // centre (mirroring ChatLayout's own phone band) so the strip slides
+    // inside its own box instead of over the avatar.
+    const userRules = allRuleDeclarations(adminTokens, ".s-admin-header-user");
+    const centreRules = allRuleDeclarations(adminTokens, ".s-admin-header-center");
+    const actionsRules = allRuleDeclarations(adminTokens, ".s-admin-header-actions");
+    // Exactly one NESTED occurrence (the phone band) per prelude.
+    const phone = (rules: typeof userRules) => rules.filter((r) => r.nested).map((r) => r.decls);
+    expect(phone(userRules)).toHaveLength(1);
+    expect(phone(centreRules)).toHaveLength(1);
+    expect(phone(actionsRules)).toHaveLength(1);
+    expect(phone(userRules)[0]).toContainEqual(["flex", "0 0 auto"]);
+    expect(phone(actionsRules)[0]).toContainEqual(["flex", "0 0 auto"]);
+    expect(phone(centreRules)[0]).toContainEqual(["flex", "1 1 auto"]);
+    expect(phone(centreRules)[0]).toContainEqual(["min-width", "0"]);
+    expect(phone(centreRules)[0]).toContainEqual(["overflow", "hidden"]);
+  });
 });

package/src/i18n/locales/ar/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "عوامل التصفية",
     "hikari::filterBar.apply": "تطبيق",
     "hikari::filterPanel.all": "الكل",
+    "hikari::filterPanel.addCondition": "إضافة شرط",
+    "hikari::filterPanel.removeCondition": "إزالة الشرط",
     "hikari::filterBar.reset": "إعادة تعيين",
     "hikari::filterPanel.op.eq": "يساوي",
     "hikari::filterPanel.op.ne": "لا يساوي",

package/src/i18n/locales/de/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "Filter",
     "hikari::filterBar.apply": "Anwenden",
     "hikari::filterPanel.all": "Alle",
+    "hikari::filterPanel.addCondition": "Bedingung hinzufügen",
+    "hikari::filterPanel.removeCondition": "Bedingung entfernen",
     "hikari::filterBar.reset": "Zurücksetzen",
     "hikari::filterPanel.op.eq": "gleich",
     "hikari::filterPanel.op.ne": "ungleich",

package/src/i18n/locales/en/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "Filters",
     "hikari::filterBar.apply": "Apply",
     "hikari::filterPanel.all": "All",
+    "hikari::filterPanel.addCondition": "Add condition",
+    "hikari::filterPanel.removeCondition": "Remove condition",
     "hikari::filterBar.reset": "Reset",
     "hikari::filterPanel.op.eq": "equals",
     "hikari::filterPanel.op.ne": "not equals",

package/src/i18n/locales/es/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "Filtros",
     "hikari::filterBar.apply": "Aplicar",
     "hikari::filterPanel.all": "Todos",
+    "hikari::filterPanel.addCondition": "Añadir condición",
+    "hikari::filterPanel.removeCondition": "Eliminar condición",
     "hikari::filterBar.reset": "Restablecer",
     "hikari::filterPanel.op.eq": "igual a",
     "hikari::filterPanel.op.ne": "distinto de",

package/src/i18n/locales/fr/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "Filtres",
     "hikari::filterBar.apply": "Appliquer",
     "hikari::filterPanel.all": "Tous",
+    "hikari::filterPanel.addCondition": "Ajouter une condition",
+    "hikari::filterPanel.removeCondition": "Supprimer la condition",
     "hikari::filterBar.reset": "Réinitialiser",
     "hikari::filterPanel.op.eq": "égal à",
     "hikari::filterPanel.op.ne": "différent de",

package/src/i18n/locales/ja/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "絞り込み",
     "hikari::filterBar.apply": "適用",
     "hikari::filterPanel.all": "すべて",
+    "hikari::filterPanel.addCondition": "条件を追加",
+    "hikari::filterPanel.removeCondition": "条件を削除",
     "hikari::filterBar.reset": "リセット",
     "hikari::filterPanel.op.eq": "等しい",
     "hikari::filterPanel.op.ne": "等しくない",

package/src/i18n/locales/ko/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "필터",
     "hikari::filterBar.apply": "적용",
     "hikari::filterPanel.all": "전체",
+    "hikari::filterPanel.addCondition": "조건 추가",
+    "hikari::filterPanel.removeCondition": "조건 삭제",
     "hikari::filterBar.reset": "초기화",
     "hikari::filterPanel.op.eq": "같음",
     "hikari::filterPanel.op.ne": "같지 않음",

package/src/i18n/locales/pt/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "Filtros",
     "hikari::filterBar.apply": "Aplicar",
     "hikari::filterPanel.all": "Todos",
+    "hikari::filterPanel.addCondition": "Adicionar condição",
+    "hikari::filterPanel.removeCondition": "Remover condição",
     "hikari::filterBar.reset": "Redefinir",
     "hikari::filterPanel.op.eq": "igual a",
     "hikari::filterPanel.op.ne": "diferente de",

package/src/i18n/locales/ru/components.json

@@ -200,6 +200,8 @@
     "hikari::filterBar.trigger": "Фильтры",
     "hikari::filterBar.apply": "Применить",
     "hikari::filterPanel.all": "Все",
+    "hikari::filterPanel.addCondition": "Добавить условие",
+    "hikari::filterPanel.removeCondition": "Удалить условие",
     "hikari::filterBar.reset": "Сбросить",
     "hikari::filterPanel.op.eq": "равно",
     "hikari::filterPanel.op.ne": "не равно",

package/src/i18n/locales/zh-Hans/components.json

@@ -204,6 +204,8 @@
     "hikari::filterBar.trigger": "筛选",
     "hikari::filterBar.apply": "应用",
     "hikari::filterPanel.all": "全部",
+    "hikari::filterPanel.addCondition": "添加条件",
+    "hikari::filterPanel.removeCondition": "移除条件",
     "hikari::filterBar.reset": "重置",
     "hikari::filterPanel.op.eq": "等于",
     "hikari::filterPanel.op.ne": "不等于",

package/src/i18n/locales/zh-Hant/components.json

@@ -204,6 +204,8 @@
     "hikari::filterBar.trigger": "篩選",
     "hikari::filterBar.apply": "套用",
     "hikari::filterPanel.all": "全部",
+    "hikari::filterPanel.addCondition": "新增條件",
+    "hikari::filterPanel.removeCondition": "移除條件",
     "hikari::filterBar.reset": "重設",
     "hikari::filterPanel.op.eq": "等於",
     "hikari::filterPanel.op.ne": "不等於",

package/src/styles/admin-tokens.scss

@@ -450,6 +450,35 @@
   min-width: 0;
 }
 
+
+/* Phone band (≤767px) — mirrors ChatLayout's own ≤767px header band
+ * (the console face of the same balanced-wing header). On phones the
+ * desktop balanced wings (`flex: 1 1 0` + `min-width: 0`) let a wide
+ * centre tab strip squeeze BOTH side wings below their content floors:
+ * the avatar wing shrank under its 28px trigger and the strip painted
+ * straight over the avatar (user report 2026-10-12, L2 firewall tabs).
+ * The frontend's answer — pin both wings, hand the leftover to the
+ * centre and let its HTabs scroller own the overflow — is reproduced
+ * here in substance: the strip keeps every pixel the avatar and the action
+ * buttons don't need, and slides INSIDE its own box (edge fades + scroll
+ * limits intact) without ever covering the avatar.
+ * Desktop (>767px) keeps the balanced-wing centring untouched. */
+@media (max-width: 767px) {
+  .s-admin-header-user {
+    flex: 0 0 auto;
+  }
+
+  .s-admin-header-actions {
+    flex: 0 0 auto;
+  }
+
+  .s-admin-header-center {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+}
+
 .s-admin-header-avatar {
   position: relative;
   width: var(--space-28);