feat: make stop icon and loading cursor customizable via CSS variables

frontend/src/components/BlinkingCursor.tsx

@@ -8,11 +8,6 @@ interface Props {
 
 export default function BlinkingCursor({ whitespace }: Props) {
   return (
-    <span
-      className={cn(
-        'inline-block h-3.5 w-3.5 bg-foreground rounded-full animate-pulse',
-        whitespace && 'ml-2'
-      )}
-    />
+    <span className={cn('inline-block loading-cursor', whitespace && 'ml-2')} />
   );
 }

frontend/src/components/icons/Stop.tsx

@@ -1,21 +1,11 @@
+import { cn } from '@/lib/utils';
+
 export const Stop = ({ className }: { className?: string }) => {
   return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        x="7"
-        y="7"
-        width="10"
-        height="10"
-        rx="1.25"
-        fill="currentColor"
-      ></rect>
-    </svg>
+    <span
+      className={cn('inline-block stop-icon', className)}
+      role="img"
+      aria-hidden="true"
+    />
   );
 };

frontend/src/index.css

@@ -153,6 +153,46 @@ code {
   }
 }
 
+/* Stop icon - customizable via --stop-icon-* CSS variables.
+   Override in theme.json or custom CSS to change shape, color, or animation. */
+.stop-icon {
+  background-color: var(--stop-icon-color, currentColor);
+  -webkit-mask-image: var(--stop-icon-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.25' fill='white'/%3E%3C/svg%3E"));
+  mask-image: var(--stop-icon-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='7' y='7' width='10' height='10' rx='1.25' fill='white'/%3E%3C/svg%3E"));
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  animation: var(--stop-icon-animation, none);
+}
+
+/* Loading cursor - customizable via --loading-cursor-* CSS variables.
+   Override in theme.json or custom CSS to change shape, color, size, or animation.
+   Default: pulsing circle matching the foreground color.
+   Set --loading-cursor-mask to a data URI to change the shape. */
+.loading-cursor {
+  width: var(--loading-cursor-size, 0.875rem);
+  height: var(--loading-cursor-size, 0.875rem);
+  background-color: var(--loading-cursor-color, hsl(var(--foreground)));
+  border-radius: 9999px;
+  -webkit-mask-image: var(--loading-cursor-mask, none);
+  mask-image: var(--loading-cursor-mask, none);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  animation: var(--loading-cursor-animation, loading-cursor-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite);
+}
+
+@keyframes loading-cursor-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
 /* Task highlight animation */