@runwisp/ui 1.5.0 → 1.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^10.0.1",
-    "@runwisp/eslint-config": "1.5.0",
-    "@runwisp/typescript-config": "1.5.0",
+    "@runwisp/eslint-config": "1.5.1",
+    "@runwisp/typescript-config": "1.5.1",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -93,7 +93,7 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.52.0",
-    "@runwisp/common": "1.5.0",
+    "@runwisp/common": "1.5.1",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/lib/actions/focusTrap.ts

@@ -25,7 +25,7 @@ export function getFocusableElements(container: HTMLElement): HTMLElement[] {
  * Pure decision function: given a keydown event, the currently focusable
  * elements (in order), and whatever currently has focus, returns the element
  * that Tab/Shift+Tab should wrap focus to in order to keep it trapped inside
- * the set — or `null` if the key doesn't need handling.
+ * the set, or `null` if the key doesn't need handling.
  *
  * Framework- and DOM-free on purpose (elements are compared by identity only)
  * so this can be unit tested without a browser or jsdom.
@@ -59,7 +59,7 @@ export interface TrapFocusOptions {
  * Svelte action that keeps keyboard focus inside `node` while it's mounted:
  * Tab from the last focusable descendant wraps to the first (and Shift+Tab
  * from the first wraps to the last), and focus is restored to whatever was
- * focused beforehand once the trap is torn down — unless a click on some
+ * focused beforehand once the trap is torn down, unless a click on some
  * other real element already moved focus there, in which case that's left
  * alone.
  */
@@ -97,7 +97,7 @@ export function trapFocus(node: HTMLElement, options: TrapFocusOptions = {}) {
         destroy() {
             node.removeEventListener("keydown", handleKeydown);
             // By the time an action's destroy() runs, `node` (and whatever
-            // inside it held focus) has already been detached — removing a
+            // inside it held focus) has already been detached, removing a
             // focused element resets focus to <body> as a browser default, so
             // that can't be told apart from an explicit close (Escape, item
             // activation) by checking `node.contains(activeElement)` here.

package/src/lib/components/Badge.svelte

@@ -17,7 +17,7 @@
         outline?: boolean;
         /** Shown in the styled hover tooltip (see {@link Tooltip}). */
         tooltip?: string;
-        /** Side the tooltip opens on — pick one that has room, e.g. "bottom" near the top of the viewport. */
+        /** Side the tooltip opens on, pick one that has room, e.g. "bottom" near the top of the viewport. */
         tooltipPosition?: TooltipPosition;
         children?: Snippet;
         class?: string;

package/src/lib/components/DataGrid.svelte

@@ -46,16 +46,16 @@
         onRowClick?: (row: T) => void;
         loading?: boolean;
         stickyHeader?: boolean;
-        /** Hide the header row entirely — for single-column feeds (e.g. an
+        /** Hide the header row entirely, for single-column feeds (e.g. an
          *  inbox) where a column label would be noise. */
         showHeader?: boolean;
-        /** Rendered below the table body, inside the frame — e.g. a cursor
+        /** Rendered below the table body, inside the frame, e.g. a cursor
          *  "Load more" button for feeds that don't use offset pagination. */
         footer?: Snippet;
         /** Drop the outer border/shadow/bg so the grid sits flush inside a Card
          *  or panel that already supplies its own frame. */
         bare?: boolean;
-        /** Extra classes per row — e.g. a left accent bar for a failing row.
+        /** Extra classes per row, e.g. a left accent bar for a failing row.
          *  Rows always carry `group`, so a `render`/`rowAction` snippet can use
          *  `group-hover:` to reveal on-hover controls. */
         rowClass?: (row: T) => string;
@@ -66,7 +66,7 @@
     // Type-aware comparator. Nullish sorts last; numbers numerically; dates by
     // epoch; everything else by locale with numeric-aware string compare.
     // Returns 0 for non-comparable/equal, so a column whose key maps to no real
-    // field (a display-only key) leaves order untouched — sort stays inert there.
+    // field (a display-only key) leaves order untouched, sort stays inert there.
     function compareValues(a: unknown, b: unknown): number {
         if (a == null && b == null) return 0;
         if (a == null) return 1;
@@ -193,7 +193,7 @@
     let allSelected = $derived(selection.allSelected);
     let someSelected = $derived(selection.someSelected);
 
-    // Cell rhythm — airy by default, tight when compact. Header + body share it.
+    // Cell rhythm, airy by default, tight when compact. Header + body share it.
     const density = $derived(compact ? "compact" : "comfortable");
     // Hover reveals a teal accent rail on the leftmost cell (see .group on <tr>).
     const railHover = "group-hover:shadow-[inset_3px_0_0_var(--color-primary)]";

package/src/lib/components/FilterBar.svelte

@@ -11,7 +11,7 @@
   shown as pills; every other field stays behind "+ Add filter" until the user
   adds it, then lives as a pill. Each pill is self-contained (label + value +
   clear in one element, see FilterPill) so activating a filter never adds a
-  second row — the table below never jumps. Data-mode agnostic: the parent feeds
+  second row, the table below never jumps. Data-mode agnostic: the parent feeds
   `values` to applyFilters (client) or maps it to query params (server).
 -->
 

package/src/lib/components/FilterPill.svelte

@@ -4,7 +4,7 @@
 <!--
   One filter, one element. The pill is both the control and its own "chip":
   inactive it reads `Label ▾` (muted); active it reads `Label: value ✕` (accent)
-  with an inline clear. Active vs inactive is a restyle of the SAME element — it
+  with an inline clear. Active vs inactive is a restyle of the SAME element, it
   never spawns a second row, so the table below never jumps. Clicking the body
   opens a type-specific editor popover (select menu / number / date range).
 -->
@@ -26,7 +26,7 @@
     let {
         field,
         values = $bindable({}),
-        // Open the editor on mount — set when the pill was just added from the
+        // Open the editor on mount, set when the pill was just added from the
         // "+ Add filter" menu, so the user lands straight in the value picker.
         autoOpen = false,
         onClose,

package/src/lib/components/FormField.svelte

@@ -13,7 +13,7 @@
         children: Snippet;
         class?: string;
         // The id of the control this field labels. Pass the SAME id to the wrapped
-        // input/select so the <label for> actually points at it — otherwise the
+        // input/select so the <label for> actually points at it, otherwise the
         // label is dead (clicking it does nothing; screen readers can't associate
         // it). Falls back to a generated id when the field has no focusable target.
         id?: string;

package/src/lib/components/LogConsole.svelte

@@ -148,7 +148,7 @@
     // lineTop / totalHeight / the scroll-position→line lookup stay O(1) or
     // O(log n) even though rows are no longer uniform. A plain Map is
     // deliberate: reactivity is driven by the `rowCountVersion` counter (bumped
-    // on any change), not by per-key subscriptions — iterating a SvelteMap of
+    // on any change), not by per-key subscriptions, iterating a SvelteMap of
     // tens of thousands of lines on every streamed line would be wasteful.
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const rowCounts = new Map<number, number>();
@@ -175,7 +175,7 @@
     // Measures wrapped row counts for exactly the lines in [min, max] and bumps
     // rowCountVersion if anything changed. Called directly wherever new line
     // text lands in the cache (streamed append, on-demand backfill), each of
-    // which already knows the touched range from LogCache's merge result — so
+    // which already knows the touched range from LogCache's merge result, so
     // a single appended line costs O(1) here instead of re-walking the whole
     // (up to 50k-line) cache. Plain function, not an $effect: reads/writes
     // rowCounts and cache.lines by key, never by iterating the map.
@@ -201,7 +201,7 @@
     // or the available column width changes (wrap width affects every line's
     // row count, so there's no way to scope that to a range). Line
     // appends/backfills are measured incrementally at their call sites via
-    // measureRange instead — reading `cache.lines` in this effect's tracked
+    // measureRange instead, reading `cache.lines` in this effect's tracked
     // scope would resubscribe it to the SvelteMap's shared version signal and
     // re-run this full O(n) walk on every single appended line. `untrack`
     // (same pattern as the fetch/prune effects below) keeps that read out of
@@ -372,7 +372,7 @@
 
     // Width of the virtual scroll surface: wide enough for the longest line
     // seen so far, never narrower than the viewport (so short logs show no
-    // horizontal scrollbar). Wrapping pins the surface to the viewport — there
+    // horizontal scrollbar). Wrapping pins the surface to the viewport, there
     // is no horizontal axis to scroll.
     let surfaceWidth = $derived(
         wrap
@@ -429,14 +429,14 @@
         }
     });
 
-    // Prune stale cache entries — separate from reads to avoid a read-write cycle on SvelteMap.
+    // Prune stale cache entries, separate from reads to avoid a read-write cycle on SvelteMap.
     $effect(() => {
         const vs = visibleStart;
         const ve = visibleEnd;
         untrack(() => cache.prune(vs, ve));
     });
 
-    let prevTailRows = 0; // plain variable — intentionally non-reactive
+    let prevTailRows = 0; // plain variable, intentionally non-reactive
 
     $effect(() => {
         // Track committed lines AND live overlay rows so an animating region at
@@ -493,7 +493,7 @@
             containerWidth = containerEl.clientWidth;
             // Resync the reactive scroll position with the DOM. The browser
             // clamps scrollTop when the viewport grows (e.g. maximizing the
-            // console), but no scroll event fires for that clamp — so without
+            // console), but no scroll event fires for that clamp, so without
             // this the virtualizer keeps a stale, too-large scrollTop and
             // renders an empty window until the first manual scroll.
             scrollTop = containerEl.scrollTop;
@@ -649,7 +649,7 @@
                                     : 'text-[var(--rw-con-dim)] hover:text-aurora-400'}"
                                 title="{line.frameCount} earlier frame{line.frameCount === 1
                                     ? ''
-                                    : 's'} — click to {expandedLine === line.num
+                                    : 's'}, click to {expandedLine === line.num
                                     ? 'hide'
                                     : 'rewind'}"
                                 aria-label="Toggle frame history for line {line.num + 1}"
@@ -909,7 +909,7 @@
         border-top-color: color-mix(in srgb, var(--rw-term-warn) 30%, transparent);
     }
 
-    /* Subtle row hover on the fixed-dark console surface — a faint lift of the
+    /* Subtle row hover on the fixed-dark console surface, a faint lift of the
        console text colour, never a theme-flipping fill. */
     .log-line:hover {
         background-color: color-mix(in srgb, var(--rw-con-text) 4%, transparent);
@@ -939,7 +939,7 @@
 
     /* Blinking teal block caret shown while a run is actively streaming. One
        monospace cell wide so it reads as a terminal cursor parked at the write
-       position — inline after a still-appending line, or alone on the next. */
+       position, inline after a still-appending line, or alone on the next. */
     .stream-cursor {
         display: inline-block;
         width: 1ch;

package/src/lib/components/SearchInput.svelte

@@ -41,7 +41,7 @@
     // External writes to `value` (Reset / clear-all) win immediately: adopt them
     // and drop any pending debounce. Depends only on `value` (raw is read
     // untracked), so typing never re-enters here. Tiny race: a reset that leaves
-    // `value` unchanged ("" -> "") can't cancel a first-keystroke debounce —
+    // `value` unchanged ("" -> "") can't cancel a first-keystroke debounce,
     // negligible at 250ms. ponytail: guarded two-way sync, fine for one field.
     $effect(() => {
         const v = value;

package/src/lib/components/Select.svelte

@@ -21,7 +21,6 @@
     import { floating, isOutsideClick } from "../actions/floating.js";
     import { portal } from "../actions/portal.js";
     import { trapFocus } from "../actions/focusTrap.js";
-    import { generateUlid } from "@runwisp/common";
 
     type SelectSize = "sm" | "md" | "lg";
 
@@ -41,6 +40,8 @@
         onchange?: (value: unknown) => void;
     }
 
+    const uid = $props.id();
+
     let {
         value = $bindable(),
         options = [],
@@ -52,7 +53,7 @@
         error,
         hint,
         class: className = "",
-        id = `select-${generateUlid()}`,
+        id = `select-${uid}`,
         name,
         onchange,
         onsearch,

package/src/lib/components/Sparkline.svelte

@@ -12,7 +12,7 @@
     }
 
     // `currentColor` by default so the caller can theme us with a Tailwind
-    // text-* class — that's the only way to flip on .dark without burning a
+    // text-* class, that's the only way to flip on .dark without burning a
     // hardcoded hex in here.
     let {
         data,
@@ -47,7 +47,7 @@
         return `${pathD} L${lastX.toFixed(1)},${height} L0,${height} Z`;
     });
 
-    // Use `fill-opacity` rather than appending "18" to a hex — that trick
+    // Use `fill-opacity` rather than appending "18" to a hex, that trick
     // breaks for `currentColor` / `oklch()` / `var(...)` values.
     let resolvedFill = $derived(fillColor ?? color);
     let resolvedFillOpacity = $derived(fillColor === undefined ? fillOpacity : 1);

package/src/lib/components/StatusDot.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
     interface Props {
         tone?: StatusDotTone;
-        /** Radar ping around the dot — use for "live" states only. */
+        /** Radar ping around the dot, use for "live" states only. */
         pulse?: boolean;
         size?: "sm" | "md" | "lg";
         class?: string;

package/src/lib/components/Tooltip.svelte

@@ -45,7 +45,7 @@
     {@render children()}
 
     <!-- Hover intent: 100ms before it appears, so sweeping the pointer across a
-         dense row doesn't flash a trail of bubbles. Still no fade — `duration-0`
+         dense row doesn't flash a trail of bubbles. Still no fade, `duration-0`
          keeps the appearance instant once the delay is served, per DESIGN.md. -->
     <div
         class="

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

@@ -47,6 +47,7 @@
         formatTriggeredByLabel,
         runRetryLabel,
         runUsageLabel,
+        runLogDownloadUrl,
         instanceSuffix,
     } from "./run-helpers.js";
 
@@ -102,7 +103,7 @@
         // Stop the selected run while it is live. When provided and the run is
         // running, the action cluster shows Stop alongside Run.
         onStop?: ((runId: string) => void) | undefined;
-        // Trigger the task from the empty state (no run selected yet) — the
+        // Trigger the task from the empty state (no run selected yet), the
         // cold-start path so a never-run task is still launchable from here.
         onRunTask?: (() => void) | undefined;
         // Service lifecycle controls. When either is set the cluster swaps the
@@ -132,7 +133,7 @@
         motion?: RunMotion;
         // True when a deep-linked run id resolved to no run (deleted by retention,
         // or never existed). The empty state then says so plainly instead of the
-        // generic "Select a run" — the caller must not silently substitute another.
+        // generic "Select a run", the caller must not silently substitute another.
         notFound?: boolean;
         // True while there is no run to show *yet* (the run list or a deep-linked
         // run is still loading), so the empty state doesn't claim "No runs yet".
@@ -194,8 +195,8 @@
     // below) and paints it into the console. Resolves the line the live
     // stream should resume from, or null when there's nothing left to stream
     // (the run already ended, or the caller cancelled while we were waiting).
-    // A failed fetch still falls back to an SSE tail backfill from scratch —
-    // it does not stop the console from live-tailing — but records the
+    // A failed fetch still falls back to an SSE tail backfill from scratch,
+    // it does not stop the console from live-tailing, but records the
     // failure so LogConsole can show it instead of looking like a quiet run.
     async function seedConsoleTail(
         id: string,
@@ -260,7 +261,7 @@
     });
 
     // Maximize the console to a full-bleed overlay. The console wrapper is
-    // never remounted — `maximizePortal` relocates the *live* node to <body>
+    // never remounted, `maximizePortal` relocates the *live* node to <body>
     // (escaping any transformed/blurred ancestor that would otherwise trap a
     // position:fixed child) and moves it back on restore, so the SSE stream,
     // scroll position, and the {#key run.id} mount all survive the toggle.
@@ -282,7 +283,7 @@
 
     // The accent for a status that means "something to triage", or undefined
     // when there is nothing wrong. Tint is reserved for alarms (DESIGN.md) so a
-    // failure is the one lit thing on the page — a deliberate stop or a skip is
+    // failure is the one lit thing on the page, a deliberate stop or a skip is
     // not a failure, and success least of all. Doubles as the switch for the
     // verdict phrase's colour, so wash and wording light up together.
     function alarmAccent(displayed: string): string | undefined {
@@ -306,7 +307,7 @@
             consoleMaximized = false;
             return;
         }
-        // `F` toggles focus mode, the way a media player does — but never while
+        // `F` toggles focus mode, the way a media player does, but never while
         // the operator is typing into a field (search box, etc.).
         if (
             (event.key === "f" || event.key === "F") &&
@@ -411,7 +412,7 @@
         <!-- Detailed header: a readout whose ink scales with how much went wrong.
              Every run states its outcome in one phrase over one quiet fact line;
              only a run worth triaging colours the phrase and tints the surface.
-             Nothing here is a fixed slot — every fact renders only when it is
+             Nothing here is a fixed slot, every fact renders only when it is
              true, so the header's height is itself a signal. -->
         <div
             class="head-region @container relative shrink-0 border-b border-outline-faint"
@@ -461,9 +462,9 @@
 
                         <!-- Verdict: the outcome as one sentence, and the only large
                          type in the panel. It is prose, so the phrase is sans and
-                         only the tokens inside it — the duration, a failing exit —
+                         only the tokens inside it, the duration, a failing exit,
                          are mono (DESIGN.md's mono-vs-sans rule). The glyph is bare
-                         — no plate, no ring — so it reads as part of the sentence,
+                         (no plate, no ring) so it reads as part of the sentence,
                          and it alone carries the outcome colour on a healthy run:
                          green words are ink spent on nothing being wrong. -->
                         <Tooltip content={config.description} position="right" wide>
@@ -717,9 +718,7 @@
                             {/if}
                         {/if}
                         <a
-                            href="/api/tasks/{encodeURIComponent(
-                                run.taskName,
-                            )}/runs/{encodeURIComponent(run.id)}/log/raw"
+                            href={runLogDownloadUrl(run.id)}
                             download="{run.taskName}-{run.id}.log"
                             class="inline-flex items-center justify-center rounded-[3px] border border-outline-faint bg-surface-raised p-2 text-on-surface-muted hover:border-outline-hover hover:bg-surface-sunken hover:text-primary"
                             title="Download the full log (rotated and current parts as one file)"
@@ -773,7 +772,7 @@
             </div>
         </div>
 
-        <!-- Console hero — maximizes to a full-bleed overlay via portal -->
+        <!-- Console hero, maximizes to a full-bleed overlay via portal -->
         {#if consoleMaximized}
             <div
                 use:portal
@@ -902,7 +901,7 @@
         <EmptyState
             title={notFound ? "Run not found" : onRunTask ? "No runs yet" : "Select a run"}
             description={notFound
-                ? "This run doesn't exist — it may have been deleted by retention, or the link is wrong. Pick a run from the list to continue."
+                ? "This run doesn't exist. It may have been deleted by retention, or the link is wrong. Pick a run from the list to continue."
                 : onRunTask
                   ? "This task hasn't run yet. Trigger it to see its output here."
                   : "Pick a run from the list to view details and logs."}
@@ -923,7 +922,7 @@
 
 <style>
     /* Only a run worth triaging is washed in its outcome colour (--rw-oc, set
-       inline). Everything else — success included — passes the surface itself so
+       inline). Everything else, success included, passes the surface itself so
        the mix collapses to a plain surface, which is what lets a genuine failure
        be the one lit thing on the page. */
     .head-region {

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

@@ -9,12 +9,12 @@
   renders removable chips for each.
 
   Status is a five-bucket pick (Running / Succeeded / Failed / Skipped /
-  Stopped) with an "Advanced" expander for the individual statuses — buckets are
+  Stopped) with an "Advanced" expander for the individual statuses, buckets are
   pure UI groupings over the same `statuses` array. Time is an independent
   From/To date pair; exit code is a free-form expression (137, >100, >100 <150)
   normalized to an inclusive range at the wire.
 
-  All controls are NATIVE (<select>, <input>, checkbox, button) — a portalled
+  All controls are NATIVE (<select>, <input>, checkbox, button), a portalled
   Select component must not nest inside the portalled Popover, since clicking an
   option lands outside the popover's DOM subtree and triggers its outside-click
   close. Every mutation reassigns the whole `filters` object (never an in-place
@@ -75,7 +75,7 @@
     }
 
     // Reflect a tri-state bucket onto the native checkbox (no `indeterminate`
-    // HTML attribute exists — it must be set on the DOM node).
+    // HTML attribute exists, it must be set on the DOM node).
     function indeterminate(node: HTMLInputElement, value: boolean) {
         node.indeterminate = value;
         return {
@@ -95,7 +95,7 @@
     // --- Time -------------------------------------------------------------
     //
     // Independent From/To date bounds. A bare date is that day's 00:00 (From) or
-    // its end (To), so either edge applies on its own — From alone means
+    // its end (To), so either edge applies on its own, From alone means
     // "everything since", To alone "everything before", and the same date in
     // both captures the whole day.
 
@@ -186,7 +186,7 @@
                     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
+                    Advanced: pick exact statuses
                 </summary>
                 <div class="mt-2 flex flex-col gap-1.5">
                     {#each STATUS_GROUPS as group (group.label)}

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

@@ -114,7 +114,7 @@
         // null = no active search; the full list shows.
         outputMatches?: Map<string, RunOutputMatch> | null;
         // True while a query is typed but its results aren't in yet (debounce
-        // window or request in flight) — the rail shows its searching shimmer.
+        // window or request in flight), the rail shows its searching shimmer.
         outputSearchPending?: boolean;
     } = $props();
 
@@ -124,7 +124,7 @@
     const OVERSCAN = 8;
     const LOAD_AHEAD = 10;
 
-    // Selection model: two modes —
+    // Selection model: two modes,
     //   1. explicit:  user picked specific rows. explicitIds holds them.
     //   2. selectAll: "all matching the current filter". exceptIds holds opt-outs.
     let selectAllMode = $state(false);
@@ -139,13 +139,13 @@
 
     // Loaded runs that matched the output search, in list order. A match in a
     // not-yet-loaded run can't be shown until the rail scrolls far enough to
-    // load it — the count reflects what's loaded, not the whole history.
+    // load it, the count reflects what's loaded, not the whole history.
     const matchedRuns = $derived(
         outputMatches ? items.filter((r: Run) => outputMatches.has(r.id)) : [],
     );
 
     // Split the matching line into [before, match, after] around the first
-    // occurrence of the query, windowed to keep the match in view — mirrors the
+    // occurrence of the query, windowed to keep the match in view, mirrors the
     // artifact's snippet. Rendered as plain text spans (Svelte auto-escapes), so
     // no untrusted HTML ever reaches the DOM.
     interface HighlightParts {
@@ -600,8 +600,8 @@
     </div>
 </div>
 
-<!-- Status dot. With bulk actions on it fades out — on row hover, or whenever a
-     selection exists — so the row checkbox can take its place over it. -->
+<!-- Status dot. With bulk actions on it fades out, on row hover, or whenever a
+     selection exists, so the row checkbox can take its place over it. -->
 <!-- Placeholders shaped like this list's run rows (same padding, dot, text
      and right readout), while a search or the first page is in flight. -->
 {#snippet skeletonRows(label: string)}
@@ -697,7 +697,7 @@
     >
         {#if showTaskName}
             <!-- Cross-task /runs variant: the same readout language as the task
-                 rail — status dot, status-colored outcome, mono right readout —
+                 rail, status dot, status-colored outcome, mono right readout,
                  with the task name carried as the primary. -->
             <div class="flex items-center gap-2.5">
                 {@render statusDot(config.color, running)}
@@ -735,7 +735,7 @@
                 </span>
             </div>
         {:else}
-            <!-- Task-rail variant (artifact ".run"): a single dense line —
+            <!-- Task-rail variant (artifact ".run"): a single dense line,
                  time · date · outcome, with a mono exit/duration readout.
                  leading-tight matches the artifact's ~1.2 line-height so the
                  (descender-less) text optically centers instead of riding high

package/src/lib/components/dashboard/cron-format.test.ts

@@ -52,7 +52,7 @@ describe("humanizeCron", () => {
         expect(result.isHumanized).toBe(false);
     });
 
-    it("falls back to raw for unparseable expressions — never 'Invalid'", () => {
+    it("falls back to raw for unparseable expressions, never 'Invalid'", () => {
         const result = humanizeCron("not a cron");
         expect(result.humanized).toBe("not a cron");
         expect(result.isHumanized).toBe(false);

package/src/lib/components/dashboard/cron-format.ts

@@ -3,7 +3,7 @@
 import cronstrue from "cronstrue";
 
 interface HumanizedCron {
-    /** Display text — humanized when possible, otherwise the raw expression. */
+    /** Display text, humanized when possible, otherwise the raw expression. */
     humanized: string;
     /** The original cron expression, for tooltips. */
     raw: string;
@@ -51,7 +51,7 @@ function humanizeEvery(duration: string): string | null {
 /**
  * humanizeCron renders a cron expression as plain English ("Every 5 minutes").
  * Handles robfig's `@every <duration>` extension (cronstrue throws on it) and
- * falls back to the raw expression on anything unparseable — never "Invalid".
+ * falls back to the raw expression on anything unparseable, never "Invalid".
  */
 export function humanizeCron(cron: string): HumanizedCron {
     const raw = cron.trim();

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

@@ -42,7 +42,7 @@ const base = (overrides: Partial<RunsListFilters> = {}): RunsListFilters => ({
 });
 
 describe("emptyRunFilters", () => {
-    it("is a fully-open filter — no dimension active, newest-first", () => {
+    it("is a fully-open filter, no dimension active, newest-first", () => {
         const f = emptyRunFilters();
         expect(f.statuses).toEqual([]);
         expect(f.sortDirection).toBe("desc");
@@ -132,7 +132,7 @@ describe("statusChipLabel", () => {
 describe("STATUS_BUCKETS", () => {
     // The Failed bucket is the failure sentinel (resolved server-side to the
     // per-task is_failure classification), so the execution-failure reasons are
-    // not bucketed — they stay reachable via the popover's Advanced expander.
+    // not bucketed, they stay reachable via the popover's Advanced expander.
     const FAILURE_REASONS = [
         "failed",
         "crashed",