@mndrk/agx 2.2.0 → 2.3.1

package/cloud-runtime/standalone/apps/local/components/linear/LinearBoardFilters.tsx

@@ -0,0 +1,343 @@
+"use client";
+
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { Check, ChevronDown, RefreshCw } from "lucide-react";
+
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+export interface FilterSelectProps {
+  label: string;
+  value: string;
+  options: FilterOption[];
+  activeClasses: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+export interface FilterPopdownProps extends FilterSelectProps {
+  emptyLabel?: string;
+}
+
+export interface MultiFilterPopdownProps {
+  label: string;
+  values: string[];
+  options: FilterOption[];
+  activeClasses: string;
+  onChange: (value: string[]) => void;
+  emptyLabel?: string;
+}
+
+export function FilterSelect({
+  label,
+  value,
+  options,
+  activeClasses,
+  onChange,
+  disabled = false,
+}: FilterSelectProps) {
+  const isActive = value.trim().length > 0;
+
+  return (
+    <div className="relative">
+      <select
+        aria-label={label}
+        className={`max-w-[160px] appearance-none rounded-full border bg-transparent px-2.5 py-0.5 pr-6 text-[11px] font-medium outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${
+          isActive
+            ? activeClasses
+            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
+        }`}
+        value={value}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        {options.map((option) => (
+          <option key={`${label}-${option.value || "all"}`} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <ChevronDown
+        size={12}
+        className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-current"
+      />
+    </div>
+  );
+}
+
+export function IssueStatusSelect({
+  status,
+  options,
+  onChange,
+  disabled = false,
+  updating = false,
+}: {
+  status: string;
+  options: FilterOption[];
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  updating?: boolean;
+}) {
+  return (
+    <div className="relative">
+      <select
+        aria-label="Ticket status"
+        className="max-w-[160px] appearance-none rounded-md border border-[var(--card-border)] bg-[var(--card-bg)] px-2.5 py-1 pr-8 text-xs font-medium text-[var(--foreground)] outline-none transition-colors hover:border-[var(--muted-foreground)] disabled:cursor-not-allowed disabled:opacity-60"
+        value={status}
+        disabled={disabled || updating}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        {options.map((option) => (
+          <option key={`ticket-status-${option.value}`} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {updating ? (
+        <RefreshCw
+          size={12}
+          className="pointer-events-none absolute right-6 top-1/2 -translate-y-1/2 animate-spin text-[var(--muted-foreground)]"
+        />
+      ) : null}
+      <ChevronDown
+        size={12}
+        className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
+      />
+    </div>
+  );
+}
+
+export function FilterPopdown({
+  label,
+  value,
+  options,
+  activeClasses,
+  onChange,
+  emptyLabel,
+}: FilterPopdownProps) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const selectedOption = options.find((option) => option.value === value) ?? null;
+  const isActive = value.trim().length > 0;
+  const buttonLabel = selectedOption?.label ?? emptyLabel ?? label;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+
+  useEffect(() => {
+    setOpen(false);
+  }, [value]);
+
+  return (
+    <div className="relative" ref={wrapperRef}>
+      <button
+        type="button"
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={`flex max-w-[180px] items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
+          isActive
+            ? activeClasses
+            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
+        }`}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <span className="max-w-[132px] truncate">{buttonLabel}</span>
+        <ChevronDown size={12} className={`shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
+      </button>
+      {open ? (
+        <div
+          role="listbox"
+          aria-label={`${label} options`}
+          className="absolute left-0 top-full z-50 mt-1 min-w-[220px] overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-lg backdrop-blur-sm"
+        >
+          {options.map((option) => {
+            const isSelected = option.value === value;
+            return (
+              <button
+                key={`${label}-${option.value || "all"}`}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
+                  isSelected
+                    ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
+                    : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+                }`}
+                onClick={() => onChange(option.value)}
+              >
+                <span
+                  className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${
+                    isSelected
+                      ? "border-blue-500 bg-blue-500 text-white"
+                      : "border-[var(--card-border)]"
+                  }`}
+                >
+                  {isSelected ? <Check size={10} /> : null}
+                </span>
+                <span className="min-w-0 flex-1 truncate">{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function MultiFilterPopdown({
+  label,
+  values,
+  options,
+  activeClasses,
+  onChange,
+  emptyLabel,
+}: MultiFilterPopdownProps) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const selectedOptions = options.filter(
+    (option) => option.value && values.includes(option.value)
+  );
+  const isActive = selectedOptions.length > 0;
+  const buttonLabel = (() => {
+    if (selectedOptions.length === 0) {
+      return emptyLabel ?? label;
+    }
+    if (selectedOptions.length === options.length) {
+      return emptyLabel ?? label;
+    }
+    if (selectedOptions.length === 1) {
+      return selectedOptions[0]?.label ?? (emptyLabel ?? label);
+    }
+    const lowerLabel = label.toLowerCase();
+    return `${selectedOptions.length} ${lowerLabel}${lowerLabel.endsWith("s") ? "es" : "s"}`;
+  })();
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+
+  const toggleValue = useCallback(
+    (nextValue: string) => {
+      if (!nextValue) {
+        onChange([]);
+        return;
+      }
+
+      const nextValues = values.includes(nextValue)
+        ? values.filter((value) => value !== nextValue)
+        : [...values, nextValue];
+      onChange(nextValues);
+    },
+    [onChange, values]
+  );
+
+  return (
+    <div className="relative" ref={wrapperRef}>
+      <button
+        type="button"
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={`flex max-w-[180px] items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors ${
+          isActive
+            ? activeClasses
+            : "border-[var(--card-border)] text-[var(--muted-foreground)] hover:bg-[var(--card-bg)]"
+        }`}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <span className="max-w-[132px] truncate">{buttonLabel}</span>
+        <ChevronDown size={12} className={`shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
+      </button>
+      {open ? (
+        <div
+          role="listbox"
+          aria-label={`${label} options`}
+          aria-multiselectable="true"
+          className="absolute left-0 top-full z-50 mt-1 min-w-[240px] overflow-hidden rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] p-1 shadow-lg backdrop-blur-sm"
+        >
+          <button
+            type="button"
+            role="option"
+            aria-selected={!isActive}
+            className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
+              !isActive
+                ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
+                : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+            }`}
+            onClick={() => onChange([])}
+          >
+            <span
+              className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border ${
+                !isActive
+                  ? "border-blue-500 bg-blue-500 text-white"
+                  : "border-[var(--card-border)]"
+              }`}
+            >
+              {!isActive ? <Check size={10} /> : null}
+            </span>
+            <span className="min-w-0 flex-1 truncate">{emptyLabel ?? label}</span>
+          </button>
+          {selectedOptions.length > 0 ? (
+            <div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-[0.12em] text-[var(--muted-foreground)]">
+              Selected
+            </div>
+          ) : null}
+          {options.filter((option) => option.value).map((option) => {
+            const isSelected = values.includes(option.value);
+            return (
+              <button
+                key={`${label}-${option.value}`}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                className={`flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-xs transition-colors ${
+                  isSelected
+                    ? "bg-[var(--background)] font-medium text-[var(--foreground)]"
+                    : "text-[var(--muted-foreground)] hover:bg-[var(--background)] hover:text-[var(--foreground)]"
+                }`}
+                onClick={() => toggleValue(option.value)}
+              >
+                <span
+                  className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
+                    isSelected
+                      ? "border-blue-500 bg-blue-500 text-white"
+                      : "border-[var(--card-border)]"
+                  }`}
+                >
+                  {isSelected ? <Check size={10} /> : null}
+                </span>
+                <span className="min-w-0 flex-1 truncate">{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/linear/TicketRow.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { Check, ExternalLink, Link2, Pin } from "lucide-react";
+import type { LinearIssue } from "@/hooks/useLinearIssues";
+import type { Participant } from "@/lib/types";
+import { STATUS_LABELS } from "@/lib/linear-run-status";
+import { agentAvatarUrl, openLinearIssueTab } from "@/lib/linear-board-utils";
+
+export function TicketRow({
+  issue,
+  selected,
+  pinned,
+  onSelect,
+  onTogglePin,
+  activeAgents,
+  participants,
+}: {
+  issue: LinearIssue;
+  selected: boolean;
+  pinned?: boolean;
+  onSelect: () => void;
+  onTogglePin?: () => void;
+  activeAgents?: Array<{ agentId: string; agentName: string }>;
+  participants?: Participant[];
+}) {
+  const [copied, setCopied] = useState(false);
+  const copyResetTimeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (copyResetTimeoutRef.current) {
+        window.clearTimeout(copyResetTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopyUrl = useCallback(async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    if (!issue.url) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(issue.url);
+      setCopied(true);
+      if (copyResetTimeoutRef.current) {
+        window.clearTimeout(copyResetTimeoutRef.current);
+      }
+      copyResetTimeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+      }, 1500) as unknown as number;
+    } catch (error) {
+      console.error("Failed to copy Linear issue URL:", error);
+      setCopied(false);
+    }
+  }, [issue.url]);
+
+  const handleOpenIssue = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    if (!issue.url) {
+      return;
+    }
+    openLinearIssueTab(issue.url);
+  }, [issue.url]);
+
+  const shortStatus = STATUS_LABELS[issue.status] ?? issue.status.slice(0, 6);
+  return (
+    <div
+      className={`group relative flex cursor-pointer items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
+        selected
+          ? "bg-[var(--card-bg)]"
+          : "hover:bg-[var(--card-bg)]/50"
+      }`}
+      onClick={onSelect}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onSelect();
+        }
+      }}
+    >
+      {selected && (
+        <div className="absolute left-0 top-0 bottom-0 w-[3px] rounded-r-full bg-blue-500" />
+      )}
+      <span className="w-24 shrink-0 whitespace-nowrap font-mono text-xs text-[var(--muted-foreground)]">
+        {issue.identifier}
+      </span>
+      <span className={`min-w-0 flex-1 truncate text-xs ${selected ? "font-medium text-[var(--foreground)]" : "text-[var(--muted-foreground)]"}`}>
+        {issue.title}
+      </span>
+      <span className="shrink-0 text-xs text-[var(--muted-foreground)]">
+        {shortStatus}
+      </span>
+      {activeAgents && activeAgents.length > 0 && (
+        <span className="inline-flex items-center -space-x-1 shrink-0">
+          {activeAgents.slice(0, 3).map((agent) => {
+            const participant = participants?.find((p) => p.id === agent.agentId);
+            return (
+              <span key={agent.agentId} className="relative inline-block" title={participant?.name ?? agent.agentName}>
+                <img src={agentAvatarUrl(agent.agentId, participant?.color, 16)} alt={participant?.name ?? agent.agentName} className="h-3 w-3 rounded-full ring-[1.5px] ring-[var(--app-shell-pane)]" />
+                <span className="absolute -bottom-px -right-px h-1.5 w-1.5 rounded-full bg-green-500 ring-[1px] ring-[var(--app-shell-pane)]" />
+              </span>
+            );
+          })}
+        </span>
+      )}
+      <div className="flex shrink-0 items-center gap-1">
+        {onTogglePin && (
+          <button
+            type="button"
+            className={`flex h-6 w-6 shrink-0 items-center justify-center rounded transition-all hover:bg-zinc-700 hover:text-[var(--foreground)] ${
+              pinned
+                ? "text-amber-400 opacity-100"
+                : `text-[var(--muted-foreground)] ${selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"}`
+            }`}
+            onClick={(event) => {
+              event.stopPropagation();
+              onTogglePin();
+            }}
+            title={pinned ? "Unpin ticket" : "Pin to top"}
+            aria-label={pinned ? "Unpin ticket" : "Pin to top"}
+          >
+            <Pin size={10} className={pinned ? "fill-current" : ""} />
+          </button>
+        )}
+        <button
+          type="button"
+          className={`flex h-6 w-6 shrink-0 items-center justify-center rounded text-[var(--muted-foreground)] transition-all hover:bg-zinc-700 hover:text-[var(--foreground)] ${
+            selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+          } ${issue.url ? "" : "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-[var(--muted-foreground)]"}`}
+          onClick={(event) => {
+            void handleCopyUrl(event);
+          }}
+          title={copied ? "Copied ticket URL" : "Copy ticket URL"}
+          aria-label={copied ? "Copied ticket URL" : "Copy ticket URL"}
+          disabled={!issue.url}
+        >
+          {copied ? <Check size={10} className="text-emerald-400" /> : <Link2 size={10} />}
+        </button>
+        <button
+          type="button"
+          className={`flex h-6 w-6 shrink-0 items-center justify-center rounded text-[var(--muted-foreground)] transition-all hover:bg-zinc-700 hover:text-[var(--foreground)] ${
+            selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+          } ${issue.url ? "" : "cursor-not-allowed opacity-40 hover:bg-transparent hover:text-[var(--muted-foreground)]"}`}
+          onClick={handleOpenIssue}
+          title={issue.url ? "Open this Linear ticket in a new tab" : "This ticket does not have a Linear URL"}
+          aria-label={issue.url ? "Open this Linear ticket in a new tab" : "This ticket does not have a Linear URL"}
+          disabled={!issue.url}
+        >
+          <ExternalLink size={10} />
+        </button>
+      </div>
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/projects/ObjectiveHealthTrend.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   buildObjectiveHealthHistoryFromActivities,
   mergeObjectiveHealthSamples,
@@ -23,19 +23,19 @@ interface ObjectiveHealthTrendProps {
 const STATUS_META: Record<ProjectObjectiveHealth, { label: string; stroke: string }> = {
   on_track: {
     label: "On track",
-    stroke: "var(--status-completed-text)",
+    stroke: "var(--status-completed)",
   },
   at_risk: {
     label: "At risk",
-    stroke: "var(--status-blocked-text)",
+    stroke: "var(--status-blocked)",
   },
   off_track: {
     label: "Off track",
-    stroke: "var(--status-failed-text)",
+    stroke: "var(--status-failed)",
   },
   done: {
     label: "Done",
-    stroke: "var(--status-in-progress-text)",
+    stroke: "var(--status-in-progress)",
   },
 };
 
@@ -51,20 +51,19 @@ function formatUpdateLabel(iso: string): string {
 function buildPolylinePoints(samples: ObjectiveHealthSample[], width: number, height: number): string {
   const leftPad = 6;
   const rightPad = 6;
-  const topPad = 6;
-  const bottomPad = 6;
+  const topPad = 2;
   const xSpan = Math.max(1, width - leftPad - rightPad);
-  const ySpan = Math.max(1, height - topPad - bottomPad);
+  const ySpan = Math.max(1, height - topPad);
 
   if (samples.length === 1) {
-    const progressY = height - bottomPad - (samples[0].progress / 100) * ySpan;
-    return `${width / 2},${progressY}`;
+    const progressY = height - (samples[0].progress / 100) * ySpan;
+    return `${leftPad},${progressY} ${width - rightPad},${progressY}`;
   }
 
   return samples
     .map((sample, index) => {
       const x = leftPad + (index / Math.max(1, samples.length - 1)) * xSpan;
-      const y = height - bottomPad - (sample.progress / 100) * ySpan;
+      const y = height - (sample.progress / 100) * ySpan;
       return `${x},${y}`;
     })
     .join(" ");
@@ -136,9 +135,14 @@ export function ObjectiveHealthTrend(props: ObjectiveHealthTrendProps) {
     };
   }, [historyFromMetadata, objectiveId, objectiveKey, projectId]);
 
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(frame);
+  }, []);
+
   const plottedSamples = mergeObjectiveHealthSamples(samples, [currentSample]);
   const latestSample = plottedSamples[plottedSamples.length - 1];
-  const polylinePoints = buildPolylinePoints(plottedSamples, 180, 52);
   const statusMeta = STATUS_META[latestSample.status];
   const sampleCountLabel = samples.length === 0
     ? "Current state"
@@ -149,65 +153,45 @@ export function ObjectiveHealthTrend(props: ObjectiveHealthTrendProps) {
   return (
     <div
       data-testid="objective-health-trend"
-      className="flex min-w-[260px] flex-1 items-center gap-4 rounded-2xl border border-[var(--border)] bg-[var(--overlay-panel-muted)] px-4 py-3"
+      className="ml-auto inline-flex items-center gap-3 rounded-xl border border-[var(--border)] bg-[var(--overlay-panel-muted)] px-3 py-2"
     >
-      <div className="min-w-[84px]">
+      <div>
         <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--muted-foreground)]">
           Objective health
         </div>
-        <div className="mt-1 text-[24px] font-semibold leading-none text-[var(--foreground)]">
+        <div className="mt-0.5 text-[20px] font-semibold leading-none text-[var(--foreground)]">
           {latestSample.progress}%
         </div>
-        <div className="mt-1 text-[11px] font-medium" style={{ color: statusMeta.stroke }}>
+        <div className="mt-0.5 text-[10px] font-medium" style={{ color: statusMeta.stroke }}>
           {statusMeta.label}
         </div>
       </div>
 
-      <div className="min-w-0 flex-1">
-        <svg
-          viewBox="0 0 180 52"
-          className="h-[52px] w-full overflow-visible"
-          role="img"
-          aria-label="Objective health trend"
-        >
-          <line
-            x1="6"
-            y1="26"
-            x2="174"
-            y2="26"
-            stroke="var(--border)"
-            strokeDasharray="3 3"
-            strokeWidth="1"
-          />
-          <polyline
-            fill="none"
-            stroke={statusMeta.stroke}
-            strokeWidth="2.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            points={polylinePoints}
-          />
-          {plottedSamples.map((sample, index) => {
-            const pointString = polylinePoints.split(" ")[index] ?? "";
-            const [cx = "0", cy = "0"] = pointString.split(",");
-            return (
-              <circle
-                key={`${sample.recordedAt}-${index}`}
-                cx={cx}
-                cy={cy}
-                r={index === plottedSamples.length - 1 ? 4 : 3}
-                fill={statusMeta.stroke}
-                fillOpacity={index === plottedSamples.length - 1 ? 1 : 0.2}
-                stroke={statusMeta.stroke}
-                strokeWidth="1.5"
-              />
-            );
-          })}
-        </svg>
-
-        <div className="mt-1 flex items-center justify-between gap-2 text-[10px] text-[var(--muted-foreground)]">
-          <span>{sampleCountLabel}</span>
-          <span>{formatUpdateLabel(latestSample.recordedAt)}</span>
+      <div
+        className="h-[40px] w-[14px] overflow-hidden rounded-sm"
+        style={{ background: "var(--muted)" }}
+        role="progressbar"
+        aria-valuenow={latestSample.progress}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-label="Objective health"
+        title={`${latestSample.progress}%`}
+      >
+        <div className="flex h-full flex-col justify-end">
+          <div
+            className="relative w-full overflow-hidden rounded-sm transition-[height] duration-700 ease-out"
+            style={{
+              height: mounted ? `${latestSample.progress}%` : "0%",
+              backgroundColor: statusMeta.stroke,
+            }}
+          >
+            <div
+              className="absolute inset-0 animate-pulse"
+              style={{
+                background: `linear-gradient(0deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%)`,
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>