feat: Added getTierLabel() helper, gradient track fill via --slider-fil…

- "frontend/src/components/ChatWidget.tsx"
- "frontend/src/components/ChatWidget.module.css"

GSD-Task: S04/T02

frontend/src/components/ChatWidget.module.css

@@ -69,13 +69,16 @@
 
 /* ── Personality slider ───────────────────────────────────── */
 
+.sliderSection {
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
 .sliderRow {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
 }
 
 .sliderLabel {
@@ -91,7 +94,11 @@
   appearance: none;
   height: 4px;
   border-radius: 2px;
-  background: var(--color-border);
+  background: linear-gradient(
+    to right,
+    var(--color-accent) var(--slider-fill, 0%),
+    var(--color-border) var(--slider-fill, 0%)
+  );
   outline: none;
   cursor: pointer;
 }
@@ -126,7 +133,35 @@
 .slider::-moz-range-track {
   height: 4px;
   border-radius: 2px;
-  background: var(--color-border);
+  background: linear-gradient(
+    to right,
+    var(--color-accent) var(--slider-fill, 0%),
+    var(--color-border) var(--slider-fill, 0%)
+  );
+}
+
+/* ── Tier label + value ───────────────────────────────────── */
+
+.tierInfo {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  gap: 0.375rem;
+  padding-top: 0.25rem;
+}
+
+.tierLabel {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  transition: color 0.2s;
+}
+
+.tierValue {
+  font-size: 0.625rem;
+  color: var(--color-text-secondary);
+  opacity: 0.6;
+  font-variant-numeric: tabular-nums;
 }
 
 .headerTitle {

frontend/src/components/ChatWidget.tsx

@@ -115,6 +115,15 @@ function parseCitations(text: string, sources: ChatSource[]): React.ReactNode[]
   return nodes.length > 0 ? nodes : [text];
 }
 
+/** Map personality weight to a human-readable tier label. */
+function getTierLabel(weight: number): string {
+  if (weight < 0.2) return "Encyclopedic";
+  if (weight < 0.4) return "Subtle Reference";
+  if (weight < 0.6) return "Creator Tone";
+  if (weight < 0.8) return "Creator Voice";
+  return "Full Embodiment";
+}
+
 export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps) {
   const [open, setOpen] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
@@ -275,6 +284,7 @@ export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps)
         </div>
 
         {/* Personality slider */}
+        <div className={styles.sliderSection}>
           <div className={styles.sliderRow}>
             <span className={styles.sliderLabel}>Encyclopedic</span>
             <input
@@ -286,9 +296,15 @@ export default function ChatWidget({ creatorName, techniques }: ChatWidgetProps)
               value={personalityWeight}
               onChange={(e) => setPersonalityWeight(parseFloat(e.target.value))}
               aria-label="Personality weight"
+              style={{ '--slider-fill': `${personalityWeight * 100}%` } as React.CSSProperties}
             />
             <span className={styles.sliderLabel}>Creator Voice</span>
           </div>
+          <div className={styles.tierInfo}>
+            <span className={styles.tierLabel}>{getTierLabel(personalityWeight)}</span>
+            <span className={styles.tierValue}>{personalityWeight.toFixed(1)}</span>
+          </div>
+        </div>
 
         {/* Messages */}
         <div className={styles.messages}>