ui: compass rose star + smooth gradient arc + tick marks on signal wheel

app.py

@@ -493,35 +493,57 @@ TOTEM_CSS = """
 
 .signal-track {
   fill: none;
-  stroke: rgba(246, 241, 232, 0.10);
-  stroke-width: 7;
+  stroke: rgba(246, 241, 232, 0.08);
+  stroke-width: 8;
 }
 
 .signal-progress {
   fill: none;
-  stroke: url(#gaugeGradient);
-  stroke-width: 7;
+  stroke-width: 8;
   stroke-linecap: round;
   transform: rotate(-90deg);
   transform-origin: 80px 80px;
-  filter: drop-shadow(0 0 6px rgba(138, 77, 255, 0.6));
+  filter: drop-shadow(0 0 7px rgba(57, 201, 255, 0.55));
 }
 
 .signal-outer-ring {
   fill: none;
-  stroke: rgba(242, 193, 78, 0.28);
+  stroke: rgba(242, 193, 78, 0.35);
   stroke-width: 1;
 }
 
-.signal-inner-ring {
+.signal-middle-ring {
   fill: none;
   stroke: rgba(57, 201, 255, 0.18);
+  stroke-width: 0.75;
+}
+
+.signal-inner-ring {
+  fill: none;
+  stroke: rgba(57, 201, 255, 0.12);
+  stroke-width: 0.75;
+}
+
+.signal-tick {
+  stroke: rgba(242, 193, 78, 0.4);
   stroke-width: 1;
 }
 
+.signal-compass-line {
+  stroke: rgba(242, 193, 78, 0.9);
+  stroke-width: 1;
+  stroke-linecap: round;
+}
+
+.signal-compass-dot {
+  fill: rgba(242, 193, 78, 0.95);
+}
+
 .signal-star {
-  fill: var(--totem-gold);
-  filter: drop-shadow(0 0 8px rgba(242, 193, 78, 0.7));
+  fill: none;
+  stroke: var(--totem-gold);
+  stroke-width: 0.8;
+  filter: drop-shadow(0 0 6px rgba(242, 193, 78, 0.8));
 }
 
 .totem-signal-label {
@@ -1390,31 +1412,79 @@ def render_signal_gauge(value: int) -> str:
         large = 1 if (end_deg - start_deg) > 180 else 0
         return f"M {x1:.2f} {y1:.2f} A {r} {r} 0 {large} 1 {x2:.2f} {y2:.2f}"
 
-    seg_colors = ["#8A4DFF", "#39C9FF", "#22B573", "#F2C14E"]
-    seg_deg = 90.0
-    paths = []
-    for idx, color in enumerate(seg_colors):
-        seg_start = idx * seg_deg
-        if total_deg <= seg_start:
-            break
-        seg_filled = min(total_deg - seg_start, seg_deg)
-        if seg_filled < 0.5:
-            break
-        svg_start = seg_start - 90  # -90 = top of circle
-        svg_end = svg_start + seg_filled
-        d = arc_path(80, 80, 68, svg_start, svg_end)
-        paths.append(f'<path d="{d}" fill="none" stroke="{color}" stroke-width="7" stroke-linecap="round" />')
-
-    paths_html = "\n        ".join(paths)
+    # Build smooth gradient arc using many small segments
+    # Gradient: gold(0%) -> teal(33%) -> blue(66%) -> purple(100%)
+    gradient_stops = [
+        (0.0,   (242, 193, 78)),   # gold
+        (0.33,  (34,  181, 115)),  # green-teal
+        (0.66,  (57,  201, 255)),  # cyan-blue
+        (1.0,   (138,  77, 255)),  # purple
+    ]
+
+    def interp_color(t):
+        for i in range(len(gradient_stops) - 1):
+            t0, c0 = gradient_stops[i]
+            t1, c1 = gradient_stops[i+1]
+            if t <= t1:
+                f = (t - t0) / (t1 - t0) if t1 > t0 else 0
+                r2 = int(c0[0] + f * (c1[0] - c0[0]))
+                g2 = int(c0[1] + f * (c1[1] - c0[1]))
+                b2 = int(c0[2] + f * (c1[2] - c0[2]))
+                return f"#{r2:02X}{g2:02X}{b2:02X}"
+        return f"#{gradient_stops[-1][1][0]:02X}{gradient_stops[-1][1][1]:02X}{gradient_stops[-1][1][2]:02X}"
+
+    n_segs = max(1, int(total_deg / 3)) if total_deg > 0 else 0
+    seg_paths = []
+    for i in range(n_segs):
+        t = i / max(n_segs - 1, 1)
+        color = interp_color(t)
+        seg_start_d = -90 + (i / n_segs) * total_deg
+        seg_end_d = -90 + ((i + 1) / n_segs) * total_deg
+        d = arc_path(80, 80, 68, seg_start_d, seg_end_d)
+        seg_paths.append(f'<path d="{d}" fill="none" stroke="{color}" stroke-width="8" stroke-linecap="butt" />')
+
+    # Round end cap on last segment
+    if seg_paths:
+        last_d = arc_path(80, 80, 68, -90 + total_deg - 0.01, -90 + total_deg)
+        color_end = interp_color(1.0 if total_deg >= 360 else total_deg / 360)
+        seg_paths.append(f'<path d="{last_d}" fill="none" stroke="{color_end}" stroke-width="8" stroke-linecap="round" />')
+
+    seg_html = "\n        ".join(seg_paths)
+
+    # Tick marks on outer ring (every 30 degrees)
+    ticks = []
+    for deg in range(0, 360, 30):
+        a = math.radians(deg - 90)
+        r_out, r_in = 75, 71
+        x1t = 80 + r_out * math.cos(a)
+        y1t = 80 + r_out * math.sin(a)
+        x2t = 80 + r_in  * math.cos(a)
+        y2t = 80 + r_in  * math.sin(a)
+        ticks.append(f'<line class="signal-tick" x1="{x1t:.2f}" y1="{y1t:.2f}" x2="{x2t:.2f}" y2="{y2t:.2f}" />')
+    ticks_html = "\n        ".join(ticks)
+
+    # 8-pointed compass rose star (thin lines, not filled)
+    # 4 main axes (N/S/E/W) long, 4 diagonal axes shorter
+    compass_lines = []
+    for i, (angle, length) in enumerate([(0,16),(45,9),(90,16),(135,9),(180,16),(225,9),(270,16),(315,9)]):
+        a = math.radians(angle - 90)
+        x_tip = 80 + length * math.cos(a)
+        y_tip = 80 + length * math.sin(a)
+        compass_lines.append(f'<line class="signal-compass-line" x1="80" y1="80" x2="{x_tip:.2f}" y2="{y_tip:.2f}" />')
+    # Small center dot
+    compass_lines.append('<circle class="signal-compass-dot" cx="80" cy="80" r="2" />')
+    compass_html = "\n        ".join(compass_lines)
+
     return f"""
     <div class="totem-signal-wrap">
       <svg class="totem-signal" viewBox="0 0 160 160" role="img" aria-label="TOTEM Signal {clamped} percent">
         <circle class="signal-outer-ring" cx="80" cy="80" r="76"></circle>
+        {ticks_html}
         <circle class="signal-track" cx="80" cy="80" r="68"></circle>
-        {paths_html}
-        <circle class="signal-inner-ring" cx="80" cy="80" r="52"></circle>
-        <circle class="signal-inner-ring" cx="80" cy="80" r="40"></circle>
-        <path class="signal-star" d="M80 58 L84.7 73.5 L100.9 73.5 L87.8 82.9 L92.6 98.4 L80 89.1 L67.4 98.4 L72.2 82.9 L59.1 73.5 L75.3 73.5 Z"></path>
+        {seg_html}
+        <circle class="signal-middle-ring" cx="80" cy="80" r="55"></circle>
+        <circle class="signal-inner-ring" cx="80" cy="80" r="42"></circle>
+        {compass_html}
       </svg>
       <div class="totem-signal-label">TOTEM Signal {clamped}%</div>
     </div>