@runwisp/ui 0.13.0 → 0.15.0

package/src/lib/components/dashboard/RunFilterPopover.svelte

@@ -47,10 +47,13 @@
         filters = $bindable(),
         showTask = false,
         tasks = [],
+        compact = false,
     }: {
         filters: RunsListFilters;
         showTask?: boolean;
         tasks?: { name: string }[];
+        // Icon-only trigger for narrow rails where a "Filter" label wouldn't fit.
+        compact?: boolean;
     } = $props();
 
     // The individual statuses behind the "Advanced" expander, grouped the way
@@ -62,12 +65,13 @@
 
     let advancedOpen = $state(false);
 
-    const count = $derived(activeFilterCount(filters) + (showTask && filters.task_name ? 1 : 0));
+    const count = $derived(activeFilterCount(filters) + (showTask && filters.taskName ? 1 : 0));
 
-    const headerClass = "text-xs font-semibold tracking-wide text-on-surface-muted uppercase";
-    const labelClass = "text-2xs text-on-surface-faint uppercase";
+    const headerClass =
+        "font-mono text-xs font-semibold tracking-[0.14em] text-on-surface-muted uppercase";
+    const labelClass = "font-mono text-2xs tracking-[0.12em] text-on-surface-faint uppercase";
     const selectClass =
-        "h-9 w-full appearance-none rounded-md border border-outline bg-surface-raised px-2.5 text-sm text-on-surface focus:border-ring focus:outline-none";
+        "h-9 w-full appearance-none rounded-[3px] border border-outline bg-surface-raised px-2.5 font-mono text-sm text-on-surface focus:border-ring focus:outline-none";
 
     function statusDot(status: RunStatus): string {
         return RUN_STATUS_CONFIG[status].dot.replace(" animate-pulse", "");
@@ -99,51 +103,53 @@
     // both captures the whole day.
 
     function setFrom(value: string) {
-        filters = { ...filters, created_after: value ? dayStartIso(value) : undefined };
+        filters = { ...filters, createdAfter: value ? dayStartIso(value) : undefined };
     }
 
     function setTo(value: string) {
-        filters = { ...filters, created_before: value ? dayEndIso(value) : undefined };
+        filters = { ...filters, createdBefore: value ? dayEndIso(value) : undefined };
     }
 
     // --- Other dimensions -------------------------------------------------
 
     function setTask(value: string) {
-        filters = { ...filters, task_name: value || undefined };
+        filters = { ...filters, taskName: value || undefined };
     }
 
     function setTrigger(value: string) {
-        filters = { ...filters, triggered_by: value || undefined };
+        filters = { ...filters, triggeredBy: value || undefined };
     }
 
     // Exit code: a free-form expression (`137`, `>100`, `>100 <150`) normalized
     // to an inclusive range at the wire. Edited in a local buffer for smooth
     // typing and committed on change; the popover content remounts on each open,
     // so the buffer re-seeds from `filters` every time it opens.
-    let exitCodeInput = $state(filters.exit_code ?? "");
+    let exitCodeInput = $state(filters.exitCode ?? "");
     const exitCodeValid = $derived(isExitCodeExprValid(exitCodeInput));
 
     function commitExitCode() {
         const trimmed = exitCodeInput.trim();
-        filters = { ...filters, exit_code: trimmed || undefined };
+        filters = { ...filters, exitCode: trimmed || undefined };
     }
 
     function setRetriesOnly(checked: boolean) {
-        filters = { ...filters, retries_only: checked ? true : undefined };
+        filters = { ...filters, retriesOnly: checked ? true : undefined };
     }
 </script>
 
 <Popover placement="right-start" mobileSheet>
     {#snippet trigger()}
         <span
-            class="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-md border px-2 text-xs font-medium transition-colors {count >
-            0
-                ? 'border-wisp-300 bg-primary-soft text-primary-soft-text'
-                : 'border-transparent text-on-surface-muted hover:bg-surface-sunken'}"
+            class="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[3px] border font-mono text-xs font-medium {compact &&
+            count === 0
+                ? 'w-7 justify-center px-0'
+                : 'px-2'} {count > 0
+                ? 'border-primary-soft-border bg-primary-soft text-primary-soft-text'
+                : 'border-transparent text-on-surface-muted hover:border-outline-hover hover:bg-surface-sunken hover:text-primary'}"
             title="Filter runs"
         >
             <Funnel size={13} />
-            Filter
+            {#if !compact}Filter{/if}
             {#if count > 0}
                 <Badge variant="primary" size="sm" class="px-1.5 py-0">{count}</Badge>
             {/if}
@@ -167,14 +173,14 @@
                             class="size-4 shrink-0 cursor-pointer rounded border-outline accent-primary"
                         />
                         <span class="size-2.5 shrink-0 rounded-full {bucket.dot}"></span>
-                        <span class="text-sm text-on-surface">{bucket.label}</span>
+                        <span class="font-mono text-sm text-on-surface">{bucket.label}</span>
                     </label>
                 {/each}
             </div>
 
             <details class="mt-0.5" bind:open={advancedOpen}>
                 <summary
-                    class="flex cursor-pointer items-center gap-1 text-2xs font-medium text-on-surface-muted transition-colors select-none marker:content-none hover:text-on-surface [&::-webkit-details-marker]:hidden"
+                    class="flex cursor-pointer items-center gap-1 font-mono text-2xs font-medium text-on-surface-muted select-none marker:content-none hover:text-on-surface [&::-webkit-details-marker]:hidden"
                 >
                     <ChevronRight size={12} class={advancedOpen ? "rotate-90" : ""} />
                     Advanced — pick exact statuses
@@ -185,7 +191,7 @@
                         <div class="grid grid-cols-2 gap-x-2 gap-y-1">
                             {#each group.values as status (status)}
                                 <label
-                                    class="flex cursor-pointer items-center gap-1.5 truncate text-xs"
+                                    class="flex cursor-pointer items-center gap-1.5 truncate font-mono text-xs"
                                 >
                                     <input
                                         type="checkbox"
@@ -206,7 +212,7 @@
             </details>
         </section>
 
-        <!-- Date range (filters on created_at). Independent From/To bounds: a
+        <!-- Date range (filters on createdAt). Independent From/To bounds: a
              bare date is that day's 00:00 (From) or its end (To), so either edge
              applies on its own and the same date in both captures the day. -->
         <section class="flex flex-col gap-2">
@@ -216,7 +222,7 @@
                     <span class={labelClass}>From</span>
                     <input
                         type="date"
-                        value={filters.created_after ? isoToDayInput(filters.created_after) : ""}
+                        value={filters.createdAfter ? isoToDayInput(filters.createdAfter) : ""}
                         onchange={(e) => setFrom(e.currentTarget.value)}
                         class={selectClass}
                     />
@@ -225,7 +231,7 @@
                     <span class={labelClass}>To</span>
                     <input
                         type="date"
-                        value={filters.created_before ? isoToDayInput(filters.created_before) : ""}
+                        value={filters.createdBefore ? isoToDayInput(filters.createdBefore) : ""}
                         onchange={(e) => setTo(e.currentTarget.value)}
                         class={selectClass}
                     />
@@ -239,7 +245,7 @@
                 <span class={headerClass}>Task</span>
                 <select
                     class={selectClass}
-                    value={filters.task_name ?? ""}
+                    value={filters.taskName ?? ""}
                     onchange={(e) => setTask(e.currentTarget.value)}
                 >
                     <option value="">Any task</option>
@@ -255,7 +261,7 @@
             <span class={headerClass}>Triggered by</span>
             <select
                 class={selectClass}
-                value={filters.triggered_by ?? ""}
+                value={filters.triggeredBy ?? ""}
                 onchange={(e) => setTrigger(e.currentTarget.value)}
             >
                 <option value="">Any trigger</option>
@@ -290,7 +296,7 @@
             <span class={headerClass}>Retries</span>
             <Toggle
                 size="sm"
-                checked={Boolean(filters.retries_only)}
+                checked={Boolean(filters.retriesOnly)}
                 label="Only retried runs"
                 onchange={setRetriesOnly}
             />

package/src/lib/components/dashboard/RunsList.svelte

@@ -175,7 +175,7 @@
         if (run.status === "running") return "live";
         if (run.status === "pending") return "queued";
         if (displayed === "failed" || displayed === "crashed") {
-            return "exit " + String(run.exit_code);
+            return "exit " + String(run.exitCode);
         }
         return runDuration(run) ?? "—";
     }
@@ -277,30 +277,30 @@
     // (page-injected or popover-set) always applies.
     function buildSelectorFilter(): NonNullable<RunSelector["filter"]> {
         const filter: NonNullable<RunSelector["filter"]> = {};
-        if (taskNameFilter) filter.task_name = taskNameFilter;
-        else if (filters.task_name) filter.task_name = filters.task_name;
+        if (taskNameFilter) filter.taskName = taskNameFilter;
+        else if (filters.taskName) filter.taskName = filters.taskName;
         if (!showFilters) return filter;
         if (filters.statuses.length > 0) filter.status = filters.statuses.join(",");
         const query = filters.search.trim();
         if (query) filter.search = query;
-        if (filters.created_after) filter.created_after = filters.created_after;
-        if (filters.created_before) filter.created_before = filters.created_before;
-        if (filters.triggered_by) filter.triggered_by = filters.triggered_by;
-        const exit = exitCodeRange(filters.exit_code);
-        if (exit.min !== undefined) filter.exit_code_min = exit.min;
-        if (exit.max !== undefined) filter.exit_code_max = exit.max;
-        if (filters.retries_only) filter.retries_only = true;
+        if (filters.createdAfter) filter.createdAfter = filters.createdAfter;
+        if (filters.createdBefore) filter.createdBefore = filters.createdBefore;
+        if (filters.triggeredBy) filter.triggeredBy = filters.triggeredBy;
+        const exit = exitCodeRange(filters.exitCode);
+        if (exit.min !== undefined) filter.exitCodeMin = exit.min;
+        if (exit.max !== undefined) filter.exitCodeMax = exit.max;
+        if (filters.retriesOnly) filter.retriesOnly = true;
         return filter;
     }
 
     function buildSelector(): RunSelector {
         if (!selectAllMode) {
-            return { match_all: false, ids: [...explicitIds] };
+            return { matchAll: false, ids: [...explicitIds] };
         }
         return {
-            match_all: true,
+            matchAll: true,
             filter: buildSelectorFilter(),
-            except_ids: [...exceptIds],
+            exceptIds: [...exceptIds],
         };
     }
 
@@ -319,19 +319,19 @@
             case "time":
                 return timeChipLabel();
             case "task":
-                return filters.task_name ?? "";
-            case "triggered_by":
-                return "Trigger: " + triggerDescription(filters.triggered_by ?? "");
-            case "exit_code":
-                return exitCodeChipLabel(filters.exit_code);
+                return filters.taskName ?? "";
+            case "triggeredBy":
+                return "Trigger: " + triggerDescription(filters.triggeredBy ?? "");
+            case "exitCode":
+                return exitCodeChipLabel(filters.exitCode);
             case "retries":
                 return "Retries only";
         }
     }
 
     function timeChipLabel(): string {
-        const after = filters.created_after;
-        const before = filters.created_before;
+        const after = filters.createdAfter;
+        const before = filters.createdBefore;
         if (isWholeDay(after, before) && after) return `On ${formatCalendarDate(after)}`;
         if (after && before) return `${formatDateTime(after)} – ${formatDateTime(before)}`;
         if (after) return `Since ${formatDateTime(after)}`;
@@ -350,9 +350,9 @@
         const sel = buildSelector();
         // Narrow the selector to the affected predicate when in explicit mode
         // so we don't ask the server to operate on rows the UI excluded.
-        const narrowed: RunSelector = sel.match_all
+        const narrowed: RunSelector = sel.matchAll
             ? sel
-            : { match_all: false, ids: affected.map((r) => r.id) };
+            : { matchAll: false, ids: affected.map((r) => r.id) };
         handler(narrowed, affected);
         clearSelection();
     }
@@ -368,7 +368,7 @@
         // reliably re-triggers its fetch effect.
         filters = {
             ...filters,
-            sort_direction: filters.sort_direction === "asc" ? "desc" : "asc",
+            sortDirection: filters.sortDirection === "asc" ? "desc" : "asc",
         };
     }
 
@@ -382,7 +382,7 @@
 <div
     class={flush
         ? "flex h-full w-full flex-col overflow-hidden border-b border-outline bg-surface md:w-[300px] md:shrink-0 md:border-r md:border-b-0"
-        : "flex flex-col overflow-hidden rounded-xl border border-outline bg-surface-raised shadow-sm md:col-span-4 lg:col-span-3"}
+        : "flex flex-col overflow-hidden rounded-[4px] border border-outline bg-surface-raised shadow-sm md:col-span-4 lg:col-span-3"}
 >
     <div
         class="flex shrink-0 items-center gap-2 border-b px-3 py-2 {hasSelection
@@ -408,7 +408,7 @@
         {/if}
 
         {#if hasSelection}
-            <span class="text-xs font-medium text-on-surface">
+            <span class="font-mono text-xs font-medium text-on-surface tabular-nums">
                 {selectionCount} selected
             </span>
             <div class="ml-auto flex items-center gap-1">
@@ -451,10 +451,14 @@
                 {/if}
             </div>
         {:else}
-            <span class="text-xs font-semibold tracking-wider text-on-surface-muted uppercase">
+            <span
+                class="shrink-0 font-mono text-xs font-semibold tracking-[0.14em] whitespace-nowrap text-on-surface-muted uppercase"
+            >
                 {headerLabel}
             </span>
-            <span class="text-xs text-on-surface-faint">
+            <span
+                class="shrink-0 font-mono text-xs whitespace-nowrap text-on-surface-faint tabular-nums"
+            >
                 {#if outputSearchActive}
                     {matchedRuns.length} of {items.length}
                 {:else}
@@ -464,7 +468,7 @@
             </span>
             <div class="ml-auto flex items-center gap-1">
                 {#if showFilters}
-                    <RunFilterPopover bind:filters {showTask} {tasks} />
+                    <RunFilterPopover bind:filters {showTask} {tasks} compact={flush} />
                 {/if}
                 <Button
                     variant="ghost"
@@ -476,7 +480,7 @@
                     {#snippet icon()}
                         <ArrowUpDown
                             size={14}
-                            class="text-on-surface-muted {filters.sort_direction === 'asc'
+                            class="text-on-surface-muted {filters.sortDirection === 'asc'
                                 ? 'rotate-180'
                                 : ''}"
                         />
@@ -495,13 +499,13 @@
         >
             {#each filterChips as chip (chip.dimension)}
                 <span
-                    class="inline-flex items-center gap-1 rounded-full bg-surface-raised py-0.5 pr-1 pl-2 text-2xs font-medium text-on-surface-muted ring-1 ring-outline-faint ring-inset"
+                    class="inline-flex items-center gap-1 rounded-[3px] border border-primary-soft-border bg-primary-soft py-0.5 pr-1 pl-2 font-mono text-2xs font-medium text-primary-soft-text"
                 >
                     {chip.label}
                     <button
                         type="button"
                         onclick={() => removeChip(chip.dimension)}
-                        class="flex size-3.5 items-center justify-center rounded-full text-on-surface-faint transition-colors hover:bg-surface-sunken hover:text-on-surface"
+                        class="flex size-3.5 items-center justify-center rounded-[3px] text-primary-soft-text/70 hover:bg-primary/15 hover:text-primary-soft-text"
                         aria-label="Remove {chip.label} filter"
                     >
                         <X size={11} />
@@ -519,7 +523,7 @@
                 <!-- Searching: shimmer placeholders shaped like result rows. -->
                 <div class="flex flex-col gap-0.5" aria-busy="true" aria-label="Searching output">
                     {#each [0, 1, 2, 3, 4] as i (i)}
-                        <div class="flex items-center gap-2.5 rounded-[10px] px-3 py-2.5">
+                        <div class="flex items-center gap-2.5 rounded-[3px] px-3 py-2.5">
                             <span
                                 class="size-[9px] shrink-0 animate-pulse rounded-full bg-surface-sunken"
                             ></span>
@@ -535,7 +539,7 @@
             {:else if matchedRuns.length === 0}
                 <div class="px-4 py-8 text-center text-xs leading-relaxed text-on-surface-muted">
                     No output matches
-                    <b class="text-on-surface">“{outputQuery.trim()}”</b>.<br />
+                    <b class="font-mono text-on-surface">“{outputQuery.trim()}”</b>.<br />
                     Try a different term.
                 </div>
             {:else}
@@ -601,7 +605,7 @@
             : ''} {bulkActions
             ? selectionActive
                 ? 'opacity-0'
-                : 'transition-opacity group-hover/row:opacity-0'
+                : 'group-hover/row:opacity-0'
             : ''}"
         aria-hidden="true"
     ></span>
@@ -622,8 +626,8 @@
             checked={isRowSelected(run.id)}
             onchange={() => toggleRow(run.id)}
             onclick={(e) => e.stopPropagation()}
-            aria-label={`Select run from ${formatDateTime(run.start_at ?? run.created_at)}`}
-            class="size-3.5 cursor-pointer rounded border-outline accent-primary opacity-0 transition-opacity {selectionActive
+            aria-label={`Select run from ${formatDateTime(run.startAt ?? run.createdAt)}`}
+            class="size-3.5 cursor-pointer rounded border-outline accent-primary opacity-0 {selectionActive
                 ? 'opacity-100'
                 : 'group-hover/row:opacity-100'}"
         />
@@ -635,15 +639,15 @@
     {@const config = getRunStatusConfig(dstatus)}
     {@const running = run.status === "running"}
     {@const spine = config.dot.replace(" animate-pulse", "")}
-    {@const startedAt = run.start_at ?? run.created_at}
+    {@const startedAt = run.startAt ?? run.createdAt}
     {@const retry = runRetryLabel(run)}
-    {@const suffix = instanceSuffix(run.instance_index, getInstanceCount(run.task_name))}
+    {@const suffix = instanceSuffix(run.instanceIndex, getInstanceCount(run.taskName))}
     <button
-        class="btn-scale group relative w-full rounded-[10px] border text-left transition-all select-none {showTaskName
+        class="btn-scale group relative w-full rounded-[3px] border text-left select-none {showTaskName
             ? 'p-3'
             : 'px-3 py-[11px]'} {isActive
             ? 'border-outline bg-surface-raised shadow-sm'
-            : 'border-transparent hover:bg-surface-sunken'}"
+            : 'border-transparent hover:border-outline-hover hover:bg-surface-sunken'}"
         onclick={() => selectRun(run.id)}
         onkeydown={(e) => e.key === "Enter" && selectRun(run.id)}
     >
@@ -655,22 +659,23 @@
                 {@render statusDot(config.color, running)}
                 <span class="flex min-w-0 flex-1 flex-col gap-0.5">
                     <span class="flex items-center gap-1.5">
-                        <span class="truncate text-[13px] font-semibold text-on-surface">
-                            {run.task_name}{#if suffix}<span class="text-on-surface-muted"
+                        <span class="truncate font-mono text-[13px] font-semibold text-on-surface">
+                            {run.taskName}{#if suffix}<span class="text-on-surface-muted"
                                     >{suffix}</span
                                 >{/if}
                         </span>
                         <span class="shrink-0 text-on-surface-faint">·</span>
-                        <span class="shrink-0 text-[12px] font-semibold capitalize {config.color}"
+                        <span
+                            class="shrink-0 font-mono text-[12px] font-semibold capitalize {config.color}"
                             >{dstatus}</span
                         >
                     </span>
                     <span
-                        class="flex min-w-0 items-center gap-1.5 text-2xs text-on-surface-faint"
+                        class="flex min-w-0 items-center gap-1.5 font-mono text-2xs text-on-surface-faint"
                         title={formatFullDateTime(startedAt)}
                     >
                         <span class="truncate">{formatDateTime(startedAt)}</span>
-                        <span class="shrink-0">· {formatTriggeredByLabel(run.triggered_by)}</span>
+                        <span class="shrink-0">· {formatTriggeredByLabel(run.triggeredBy)}</span>
                         {#if retry}
                             <span class="shrink-0 rounded bg-surface-sunken px-1 font-mono"
                                 >{retry}</span
@@ -695,13 +700,13 @@
                 {@render statusDot(config.color, running)}
                 <span class="flex min-w-0 flex-1 items-center gap-1.5 truncate">
                     <span
-                        class="text-[12.5px] font-semibold tracking-tight text-on-surface"
+                        class="font-mono text-[12.5px] font-semibold tracking-tight text-on-surface tabular-nums"
                         title={formatFullDateTime(startedAt)}
                     >
                         {formatTimeHM(startedAt)} · {formatDayMonth(startedAt)}
                     </span>
                     <span class="text-on-surface-faint">·</span>
-                    <span class="text-[12.5px] font-semibold capitalize {config.color}"
+                    <span class="font-mono text-[12.5px] font-semibold capitalize {config.color}"
                         >{dstatus}</span
                     >
                     {#if suffix}
@@ -718,10 +723,10 @@
             {#if match}
                 {@const hl = highlightParts(match.text, outputQuery)}
                 <div
-                    class="mt-1.5 truncate rounded-md bg-surface-sunken px-2 py-1 font-mono text-2xs text-on-surface-muted"
+                    class="mt-1.5 truncate rounded-[3px] border border-outline-faint bg-surface-sunken px-2 py-1 font-mono text-2xs text-on-surface-muted"
                 >
                     {hl.before}<mark
-                        class="rounded-sm bg-primary-soft px-0.5 text-primary-soft-text"
+                        class="rounded-[3px] bg-primary-soft px-0.5 text-primary-soft-text"
                         >{hl.match}</mark
                     >{hl.after}
                 </div>
@@ -729,7 +734,7 @@
         {/if}
 
         <div
-            class="duration-normal absolute inset-y-2 left-[-6px] w-[3px] rounded-[3px] transition-all {spine} {isActive
+            class="absolute inset-y-2 left-[-6px] w-[3px] rounded-[3px] {spine} {isActive
                 ? 'opacity-100'
                 : 'opacity-0'}"
             aria-hidden="true"

package/src/lib/components/dashboard/run-filters.test.ts

@@ -47,7 +47,7 @@ describe("emptyRunFilters", () => {
     it("is a fully-open filter — no dimension active, newest-first", () => {
         const f = emptyRunFilters();
         expect(f.statuses).toEqual([]);
-        expect(f.sort_direction).toBe("desc");
+        expect(f.sortDirection).toBe("desc");
         expect(activeFilterCount(f)).toBe(0);
     });
 });
@@ -75,56 +75,54 @@ describe("isNeedsAttention", () => {
 describe("dimensionActive / activeDimensions", () => {
     it("detects each dimension independently", () => {
         expect(dimensionActive(base({ statuses: ["failed"] }), "status")).toBe(true);
-        expect(dimensionActive(base({ created_after: "2026-01-01T00:00:00Z" }), "time")).toBe(true);
-        expect(dimensionActive(base({ created_before: "2026-01-01T00:00:00Z" }), "time")).toBe(
-            true,
-        );
-        expect(dimensionActive(base({ task_name: "backup" }), "task")).toBe(true);
-        expect(dimensionActive(base({ triggered_by: "cron" }), "triggered_by")).toBe(true);
-        expect(dimensionActive(base({ exit_code: "137" }), "exit_code")).toBe(true);
-        expect(dimensionActive(base({ exit_code: ">100" }), "exit_code")).toBe(true);
-        expect(dimensionActive(base({ retries_only: true }), "retries")).toBe(true);
+        expect(dimensionActive(base({ createdAfter: "2026-01-01T00:00:00Z" }), "time")).toBe(true);
+        expect(dimensionActive(base({ createdBefore: "2026-01-01T00:00:00Z" }), "time")).toBe(true);
+        expect(dimensionActive(base({ taskName: "backup" }), "task")).toBe(true);
+        expect(dimensionActive(base({ triggeredBy: "cron" }), "triggeredBy")).toBe(true);
+        expect(dimensionActive(base({ exitCode: "137" }), "exitCode")).toBe(true);
+        expect(dimensionActive(base({ exitCode: ">100" }), "exitCode")).toBe(true);
+        expect(dimensionActive(base({ retriesOnly: true }), "retries")).toBe(true);
     });
 
     it("treats an exact exit code of 0 as active (distinct from absent)", () => {
-        expect(dimensionActive(base({ exit_code: "0" }), "exit_code")).toBe(true);
+        expect(dimensionActive(base({ exitCode: "0" }), "exitCode")).toBe(true);
     });
 
     it("treats an empty or unparseable exit-code expression as inactive", () => {
-        expect(dimensionActive(base({ exit_code: "" }), "exit_code")).toBe(false);
-        expect(dimensionActive(base({ exit_code: "nonsense" }), "exit_code")).toBe(false);
+        expect(dimensionActive(base({ exitCode: "" }), "exitCode")).toBe(false);
+        expect(dimensionActive(base({ exitCode: "nonsense" }), "exitCode")).toBe(false);
     });
 
     it("lists active dimensions in display (most→least useful) order", () => {
         const f = base({
-            retries_only: true,
+            retriesOnly: true,
             statuses: ["failed"],
-            triggered_by: "cron",
-            created_after: "2026-01-01T00:00:00Z",
+            triggeredBy: "cron",
+            createdAfter: "2026-01-01T00:00:00Z",
         });
-        expect(activeDimensions(f)).toEqual(["status", "time", "triggered_by", "retries"]);
+        expect(activeDimensions(f)).toEqual(["status", "time", "triggeredBy", "retries"]);
     });
 });
 
 describe("clearDimension", () => {
     it("resets one dimension and leaves the rest untouched", () => {
-        const f = base({ statuses: ["failed"], triggered_by: "cron", retries_only: true });
-        const cleared = clearDimension(f, "triggered_by");
-        expect(cleared.triggered_by).toBeUndefined();
+        const f = base({ statuses: ["failed"], triggeredBy: "cron", retriesOnly: true });
+        const cleared = clearDimension(f, "triggeredBy");
+        expect(cleared.triggeredBy).toBeUndefined();
         expect(cleared.statuses).toEqual(["failed"]);
-        expect(cleared.retries_only).toBe(true);
+        expect(cleared.retriesOnly).toBe(true);
     });
 
     it("clears the exit-code expression", () => {
-        const f = base({ exit_code: ">100 <150" });
-        expect(clearDimension(f, "exit_code").exit_code).toBeUndefined();
+        const f = base({ exitCode: ">100 <150" });
+        expect(clearDimension(f, "exitCode").exitCode).toBeUndefined();
     });
 
     it("clears both time bounds together", () => {
-        const f = base({ created_after: "2026-01-01T00:00:00Z", created_before: "2026-02-01" });
+        const f = base({ createdAfter: "2026-01-01T00:00:00Z", createdBefore: "2026-02-01" });
         const cleared = clearDimension(f, "time");
-        expect(cleared.created_after).toBeUndefined();
-        expect(cleared.created_before).toBeUndefined();
+        expect(cleared.createdAfter).toBeUndefined();
+        expect(cleared.createdBefore).toBeUndefined();
     });
 });
 
@@ -132,18 +130,18 @@ describe("clearPopoverFilters", () => {
     it("clears every popover dimension but keeps search and sort", () => {
         const f = base({
             search: "nightly",
-            sort_direction: "asc",
+            sortDirection: "asc",
             statuses: ["failed"],
-            task_name: "backup",
-            triggered_by: "cron",
-            exit_code: "1",
-            retries_only: true,
-            created_after: "2026-01-01T00:00:00Z",
+            taskName: "backup",
+            triggeredBy: "cron",
+            exitCode: "1",
+            retriesOnly: true,
+            createdAfter: "2026-01-01T00:00:00Z",
         });
         const cleared = clearPopoverFilters(f);
         expect(activeFilterCount(cleared)).toBe(0);
         expect(cleared.search).toBe("nightly");
-        expect(cleared.sort_direction).toBe("asc");
+        expect(cleared.sortDirection).toBe("asc");
     });
 });