feat(ui): dot marker on NotificationsBell, segments variant on HorizontalStepper

A queue that is either empty or not makes the count noise; marker=dot
keeps 'something is waiting' without it. The segments stepper is the
whisper track — hairline segments, current stretched in accent — for
dense chrome where the step name is carried by the surface beneath.

Author: TheGreatAxios

src/index.ts

@@ -155,6 +155,7 @@ export * from "./ui/schedule-inspector.js";
 export * from "./ui/schedule-list.js";
 export * from "./ui/section.js";
 export * from "./ui/section-nav.js";
+export * from "./ui/segmented-control.js";
 export * from "./ui/select.js";
 export * from "./ui/selection-checkbox.js";
 export * from "./ui/settings-panel.js";

src/ui/horizontal-stepper.tsx

@@ -18,6 +18,13 @@ function pillClass(status: WorkflowStepStatus): string {
 
 export type HorizontalStepperProps = {
   readonly steps: readonly WorkflowStep[];
+  /**
+   * `pills` is the default rail: numbered pills with connecting fills and
+   * labels. `segments` is the whisper track — hairline segments, done in ink,
+   * current in accent and stretched — for dense chrome like a top bar, where
+   * the step's name is already carried by the surface beneath it.
+   */
+  readonly variant?: "pills" | "segments";
   readonly className?: string;
 };
 
@@ -28,11 +35,42 @@ export type HorizontalStepperProps = {
  * change, so a run with more steps than fit on screen never leaves the
  * active one off to the side unannounced.
  */
-export function HorizontalStepper({ steps, className }: HorizontalStepperProps) {
+export function HorizontalStepper({ steps, variant = "pills", className }: HorizontalStepperProps) {
   const currentStep = steps.find((step) => step.status === "current");
   const currentRef = useScrollCurrentIntoView<HTMLLIElement>(currentStep?.number ?? -1);
   const compress = steps.length > LABEL_VISIBLE_STEP_THRESHOLD;
 
+  if (variant === "segments") {
+    return (
+      <ol
+        aria-label="Workflow progress"
+        className={cn("flex items-center gap-1", className)}
+      >
+        {steps.map((step) => (
+          <li
+            key={step.number}
+            ref={step.status === "current" ? currentRef : undefined}
+            aria-current={step.status === "current" ? "step" : undefined}
+            title={step.label}
+            className={cn(
+              "h-0.5 rounded-full transition-[width,background-color] duration-300",
+              step.status === "current" ? "w-6" : "w-4",
+              step.status === "completed"
+                ? "bg-foreground"
+                : step.status === "failed"
+                  ? "bg-destructive"
+                  : step.status === "current"
+                    ? "bg-primary"
+                    : "bg-border",
+            )}
+          >
+            <span className="sr-only">{step.label}</span>
+          </li>
+        ))}
+      </ol>
+    );
+  }
+
   return (
     <div className={cn("border-b border-border bg-card px-6 py-5", className)}>
       <ol

src/ui/notifications-bell.tsx

@@ -12,6 +12,12 @@ export type NotificationsBellProps = {
   readonly children: ReactNode;
   /** Counts above this render as "N+" so the marker cannot grow unbounded. */
   readonly maxCount?: number;
+  /**
+   * `count` shows the number; `dot` shows a bare mark — for hosts where the
+   * count is noise (a queue that is either empty or not) but "something is
+   * waiting" is not.
+   */
+  readonly marker?: "count" | "dot";
   /** Controlled open state. Pair with `onOpenChange` to lift it to a parent. */
   readonly open?: boolean;
   readonly onOpenChange?: (open: boolean) => void;
@@ -36,6 +42,7 @@ export function NotificationsBell({
   count,
   children,
   maxCount = 99,
+  marker = "count",
   open: openProp,
   onOpenChange,
   className,
@@ -68,12 +75,16 @@ export function NotificationsBell({
       >
         <Bell className="size-4" aria-hidden />
         {count > 0 ? (
-          <span
-            aria-hidden
-            className="absolute top-1 right-1 min-w-4 rounded-full bg-primary px-1 text-center font-mono text-[10px] leading-4 text-primary-foreground"
-          >
-            {count > maxCount ? `${maxCount}+` : count}
-          </span>
+          marker === "dot" ? (
+            <span aria-hidden className="absolute top-1.5 right-1.5 size-2 rounded-full bg-primary" />
+          ) : (
+            <span
+              aria-hidden
+              className="absolute top-1 right-1 min-w-4 rounded-full bg-primary px-1 text-center font-mono text-[10px] leading-4 text-primary-foreground"
+            >
+              {count > maxCount ? `${maxCount}+` : count}
+            </span>
+          )
         ) : null}
       </button>