feat(context): draw the usage meter as a full ring

CHANGELOG.md

@@ -11,6 +11,12 @@ version with its date and start a fresh empty `[Unreleased]` above it.
 
 ## [Unreleased]
 
+### Changed
+
+- The context usage meter beside the composer is now a complete ring that fills
+  clockwise from the top, replacing the 240° arc. The percentage, the hover
+  tooltip, and the pale-red warning state above 80% are unchanged.
+
 ## [1.0.16] - 2026-09-29
 
 ### Changed

src/features/chat/ui/input-toolbar.ts

@@ -681,7 +681,7 @@ export class McpServerSelector {
 
 export class ContextUsageMeter {
   private container: HTMLElement;
-  private fillPath: SVGPathElement | null = null;
+  private fillPath: SVGCircleElement | null = null;
   private percentEl: HTMLElement | null = null;
   private circumference: number = 0;
 
@@ -703,19 +703,7 @@ export class ContextUsageMeter {
     const cx = size / 2;
     const cy = size / 2;
 
-    // 240° arc: from 150° to 390° (upper-left through bottom to upper-right)
-    const startAngle = 150;
-    const endAngle = 390;
-    const arcDegrees = endAngle - startAngle;
-    const arcRadians = (arcDegrees * Math.PI) / 180;
-    this.circumference = radius * arcRadians;
-
-    const startRad = (startAngle * Math.PI) / 180;
-    const endRad = (endAngle * Math.PI) / 180;
-    const x1 = cx + radius * Math.cos(startRad);
-    const y1 = cy + radius * Math.sin(startRad);
-    const x2 = cx + radius * Math.cos(endRad);
-    const y2 = cy + radius * Math.sin(endRad);
+    this.circumference = 2 * Math.PI * radius;
 
     const gaugeEl = this.container.createDiv({ cls: 'qoderian-context-meter-gauge' });
     const svg = gaugeEl.createSvg('svg', {
@@ -726,26 +714,29 @@ export class ContextUsageMeter {
       },
     });
 
-    const pathData = `M ${x1} ${y1} A ${radius} ${radius} 0 1 1 ${x2} ${y2}`;
-    svg.createSvg('path', {
+    svg.createSvg('circle', {
       cls: 'qoderian-meter-bg',
       attr: {
-        d: pathData,
+        cx: String(cx),
+        cy: String(cy),
+        r: String(radius),
         fill: 'none',
         'stroke-width': String(strokeWidth),
-        'stroke-linecap': 'round',
       },
     });
 
-    const fillPath = svg.createSvg('path', {
+    const fillPath = svg.createSvg('circle', {
       cls: 'qoderian-meter-fill',
       attr: {
-        d: pathData,
+        cx: String(cx),
+        cy: String(cy),
+        r: String(radius),
         fill: 'none',
         'stroke-width': String(strokeWidth),
         'stroke-linecap': 'round',
         'stroke-dasharray': String(this.circumference),
         'stroke-dashoffset': String(this.circumference),
+        transform: `rotate(-90 ${cx} ${cy})`,
       },
     });
     this.fillPath = fillPath;