From 2ec2b1f1ebba1e2282ce628465e11e5b8e9a9da7 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Wed, 8 Apr 2026 06:42:25 -0500
Subject: [PATCH] fix(ui): improve shimmer gradient and add Working/Worked
 tokens to Chat UX Lab

Rework the shimmer-text CSS to use a Cursor-style sweep: full-opacity base
with a narrow transparent highlight band that slides across, linear timing,
tighter background-size. Add a "Status tokens" section to the Issue Chat UX
Lab showing both the active shimmer "Working" state and the static "Worked"
state side-by-side for quick visual review.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/index.css                | 22 ++++++++++---------
 ui/src/pages/IssueChatUxLab.tsx | 39 ++++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/ui/src/index.css b/ui/src/index.css
index 807a1100..625da487 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -294,26 +294,28 @@
   }
 }
 
-/* Shimmer text effect for active "Working" state */
+/* Shimmer text effect for active "Working" state — Cursor-style sweep */
 @keyframes shimmer-text-slide {
-  0% { background-position: 200% center; }
-  100% { background-position: -200% center; }
+  0% { background-position: -100% center; }
+  100% { background-position: 200% center; }
 }
 
 .shimmer-text {
-  --shimmer-base: hsl(var(--foreground) / 0.75);
-  --shimmer-highlight: hsl(var(--foreground) / 0.3);
+  --shimmer-base: hsl(var(--foreground));
+  --shimmer-highlight: hsl(var(--foreground) / 0.35);
   background: linear-gradient(
-    110deg,
-    var(--shimmer-base) 35%,
+    90deg,
+    var(--shimmer-base) 0%,
+    var(--shimmer-base) 40%,
     var(--shimmer-highlight) 50%,
-    var(--shimmer-base) 65%
+    var(--shimmer-base) 60%,
+    var(--shimmer-base) 100%
   );
-  background-size: 250% 100%;
+  background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  animation: shimmer-text-slide 2.5s ease-in-out infinite;
+  animation: shimmer-text-slide 2s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/ui/src/pages/IssueChatUxLab.tsx b/ui/src/pages/IssueChatUxLab.tsx
index f752fa90..fa9a889b 100644
--- a/ui/src/pages/IssueChatUxLab.tsx
+++ b/ui/src/pages/IssueChatUxLab.tsx
@@ -17,7 +17,7 @@ import {
   issueChatUxTranscriptsByRunId,
 } from "../fixtures/issueChatUxFixtures";
 import { cn } from "../lib/utils";
-import { Bot, Brain, FlaskConical, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react";
+import { Bot, Brain, FlaskConical, Loader2, MessagesSquare, Route, Sparkles, WandSparkles } from "lucide-react";
 
 const noop = async () => {};
 
@@ -216,6 +216,43 @@ export function IssueChatUxLab() {
         </div>
       </LabSection>
 
+      <LabSection
+        id="working-tokens"
+        eyebrow="Status tokens"
+        title="Working / Worked header verb"
+        description='The "Working" token uses the shimmer-text gradient sweep to signal an active run. Once the run completes it becomes the static "Worked" token.'
+        accentClassName="bg-[linear-gradient(180deg,rgba(16,185,129,0.06),transparent_28%),var(--background)]"
+      >
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="rounded-xl border border-border/60 bg-accent/10 p-4">
+            <div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Active run — shimmer
+            </div>
+            <div className="flex items-center gap-2.5 rounded-lg px-1 py-2">
+              <span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
+                <Loader2 className="h-4 w-4 shrink-0 animate-spin text-muted-foreground" />
+                <span className="shimmer-text">Working</span>
+              </span>
+              <span className="text-xs text-muted-foreground/60">for 12s</span>
+            </div>
+          </div>
+          <div className="rounded-xl border border-border/60 bg-accent/10 p-4">
+            <div className="mb-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">
+              Completed run — static
+            </div>
+            <div className="flex items-center gap-2.5 rounded-lg px-1 py-2">
+              <span className="inline-flex items-center gap-2 text-sm font-medium text-foreground/80">
+                <span className="flex h-4 w-4 shrink-0 items-center justify-center">
+                  <span className="h-1.5 w-1.5 rounded-full bg-emerald-500/70" />
+                </span>
+                Worked
+              </span>
+              <span className="text-xs text-muted-foreground/60">for 1 min 24s</span>
+            </div>
+          </div>
+        </div>
+      </LabSection>
+
       <LabSection
         id="live-execution"
         eyebrow="Primary preview"